Pembahasan pada bab ini adalah mengenai apa saya yang dapat dilakukan dengan menggunakan JavaScript dan contoh penerapannya dalan coding.
Section Artikel
JavaScript Dapat Mengubah Konten HTML
Salah satu dari banyak method yang ada pada JavaScript adalah getElementById ().
Contoh di bawah ini script akan mencari elemen HTML (dengan id = “demo”), dan mengubah konten elemen (innerHTML) menjadi “Hello JavaScript”.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript?</h2>
<p id="demo">JavaScript dapat mengubah konten HTML.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Klik disini!</button>
</body>
</html>
JavaScript dapat menerima tanda kutip ganda maupun tunggal.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript?</h2>
<p id="demo">JavaScript dapat mengubah konten HTML.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Klik disini!</button>
</body>
</html>
JavaScript Dapat Mengubah Nilai Atribut HTML
Dalam contoh ini JavaScript mengubah nilai atribut src (source) dari tag <image> .
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript?</h2>
<p>JavaScript mengubah nilai atribut .</p>
<p>Dalam contoh ini JavaScript mengubah nilai atribut src (source) dari tag image.</p>
<button onclick="document.getElementById('myImage').src='https://dosenit.com/wp-content/uploads/2020/10/pic_bulbon.gif'">Nyalakan lampu</button>
<img id="myImage" src="https://dosenit.com/wp-content/uploads/2020/10/pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://dosenit.com/wp-content/uploads/2020/10/pic_bulboff.gif'">Matikan lampu</button>
</body>
</html>
JavaScript Dapat Mengubah Style HTML (CSS)
Mengubah style pada elemen HTML, merupakan salah satu bagian dari mengubah atribut HTML:
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript?</h2>
<p id="demo">JavaScript Dapat Mengubah Style elemen HTML</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Klik disini!</button>
</body>
</html>
JavaScript Dapat Menyembunyikan Elemen HTML
Menyembunyikan elemen HTML dapat dilakukan dengan mengubah style pada tampilan.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Apa yang dapat dilakukan JavaScript?</h2>
<p id="demo">JavaScript dapat menyembunyikan elemen HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Klik disini!</button>
</body>
</html>
Apakah anda tahu?
JavaScript dan Java adalah bahasa yang sangat berbeda, baik dalam konsep maupun desain.
JavaScript ditemukan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA pada tahun 1997.
ECMA-262 adalah nama Official dari standarnya dan ECMAScript adalah nama resmi dari bahasa JavaScript.
