Tutorial Javascript Dasar 1

by Admin
17 November 2016
1528 Views

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 .html lalu jalankan:

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

JavaScript Dapat Merubah HTML Attributes

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

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

JavaScript Dapat Mengubah Gaya HTML (CSS)

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

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

JavaScript Bisa Sembunyikan HTML Elements

Menyembunyikan elemen HTML dapat dilakukan dengan mengubah gaya tampilan:

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

JavaScript Bisa Tampilkan Elemen HTML

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

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

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