Tutorial Javascript Dasar 1 – Multibisnisindo Digital Agency

Tentang Javascript dan Contoh-contohnya

Mohon sebelum anda baca tutorial ini, baca terlebih dahulu tutorial sebelumnya tentang:

Banyak sekali yang dapat dilakukan dengan Javascript dalam sebuah pengembangan web. Tutorial Javascript Dasar 1 ini berisi beberapa contoh apa yang dapat dilakukan JavaScript.

JavaScript Dapat Mengubah Konten HTML.

Salah satu dari banyak metode JavaScript HTML adalah getElementById (). Contoh ini menggunakan metode untuk “menemukan” elemen HTML (dengan id = “Belajar”) dan mengubah isi elemen (innerHTML) untuk “Selamat Belajar”.

Setiap contoh yag ada Silahkan tempel pada editor HTML-CSS atau simpan dengan ekstensi . lalu jalankan:

<!DOCTYPE ><br /> <><br /> <body></p> <p><h1>Tutorial Javascript Dasar 1</h1></p> <p><p id=”Belajar”>JavaScript dapat mengubah konten HTML.</p></p> <p><button type=”button” onclick=”document.getElementById('Belajar').innerHTML = 'Selamat Belajar Javascript!'”>Klik Saya!</button></p> <p></body><br /> </><br />

JavaScript Dapat Merubah HTML Attributes

Contoh ini mengubah gambar HTML dengan mengubah src (source) atribut dari sebuah img tag:

<!DOCTYPE ><br /> <><br /> <body></p> <p><h1>Tutorial Javascript Dasar 1</h1></p> <p><p>JavaScript dapat mengubah attributes HTML.</p></p> <p><p>Dalam hal ini JavaScript mengubah src (source) atribut dari suatu gambar.</p></p> <p><button onclick=”document.getElementById('myImage').src='https://multibisnisindo.com/po-content/uploads/pic_bulbon.gif'”>Nyalakan Lampu</button></p> <p><img id=”myImage” src=”https://multibisnisindo.com/po-content/uploads/pic_bulboff.gif” style=”width:100px”></p> <p><button onclick=”document.getElementById('myImage').src='https://multibisnisindo.com/po-content/uploads/pic_bulboff.gif'”>Mematikan lampu</button></p> <p></body><br /> </><br />

JavaScript Dapat Mengubah Gaya HTML (CSS)

Mengubah gaya elemen HTML, adalah varian dari mengubah atribut HTML:

<!DOCTYPE ><br /> <><br /> <body></p> <p><h1>Tutorial Javascript Dasar 1</h1></p> <p><p id=”Belajar”>JavaScript dapat mengubah gaya elemen HTML.</p></p> <p><button type=”button” onclick=”document.getElementById('Belajar').style.fontSize='35px'”>Klik Saya!</button></p> <p></body><br /> </><br />

JavaScript Bisa Sembunyikan HTML Elements

Menyembunyikan elemen HTML dapat dilakukan dengan mengubah gaya tampilan:

<!DOCTYPE ><br /> <><br /> <body></p> <p><h1>Tutorial Javascript Dasar 1</h1></p> <p><p id=”demo”>JavaScript dapat menyembunyikan elemen HTML.</p></p> <p><button type=”button” onclick=”document.getElementById('demo').style.display='none'”>Klik Saya!</button></p> <p></body><br /> </><br />

JavaScript Bisa Tampilkan Elemen HTML

Menampilkan elemen HTML yang tersembunyi juga bisa dilakukan dengan mengubah gaya tampilan:

<!DOCTYPE ><br /> <><br /> <body></p> <p><h1>Tutorial Javascript Dasar 1</h1></p> <p><p>JavaScript dapat menunjukkan elemen HTML yang tersembunyi.</p></p> <p><p id=”Belajar” style=”display:none”>Hallo Kawan, selamat belajar!</p></p> <p><button type=”button” onclick=”document.getElementById('Belajar').style.display='block'”>Klik Saya!</button></p> <p></body><br /> </><br />

Contoh-contoh diatas merupakan dasar atau pendahuluan Javascript, pada tutorial selanjutnya kita akan buat contoh-contoh Javascript berdasarkan cara referensinya.