Tutorial Javascript Dasar 1

Gambar 139. 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. | Lots to do with Javascript within a w

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='https://multibisnisindo.com/po-content/uploads/pic_bulbon.gif'">Nyalakan Lampu</button> <img id="myImage" src="https://multibisnisindo.com/po-content/uploads/pic_bulboff.gif" style="width:100px"> <button onclick="document.getElementById('myImage').src='https://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.

Layanan Perancang Website Batuceper Di Jamin Terdaftar Google

Jasa Perancang Situs Website Company Profile Jaminan Terdaftar Mesin Pencari

Layanan Perancang Website Company Profile Di Jamin Muncul Di Pencarian

Cara Mengatasi Error Wordpress Akibat Gagal Update Tanpa Kehilangan Konten Website

Cara Membuat Tombol Kontak WhatsApp Melayang Muncul Pada Setiap Halaman Di Berbagai Platform Website

Theme Divi Pro Hanya 50 Ribu Untuk 10 Orang Tercepat

Tutorial Javascript Dasar 1