Untuk membuat halaman web menjadi lebih dinamis dan interaktif kita dapat menggunakan JavaScript pada HTML.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Pertamaku</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Klik disini untuk menampilkan tanggal dan waktu</button>
<p id="demo"></p>
</body>
</html>
Tag <script> pada HTML
Tag <script> pada HTML digunakan untuk menentukan skrip client-side (JavaScript).
Elemen <script> berisi pernyataan script, atau menunjukan pada script file eksternal melalui atribut src.
Penggunaan yang paling umum pada JavaScript adalah manipulasi gambar, form validasi, dan merubah konten yang dinamis.
Untuk memilih elemen pda HTML, JavaScript paling sering menggunakan method document.getElementById ().
Contoh JavaScript dibawah ini menulis “Halo JavaScript!” menjadi elemen HTML dengan id = “demo”.
<!DOCTYPE html>
<html>
<body>
<h2>Gunakan JavaScript untuk Mengubah Teks</h2>
<p>Contoh JavaScript ini menulis "Halo JavaScript!" menjadi elemen HTML dengan id = "demo".</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Halo JavaScript!";
</script>
</body>
</html>
Macam-macam penggunaan JavaScript
Berikut beberapa contoh yang dapat dilakukan JavaScript.
Contoh:
JavaScript untuk mengubah konten
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Pertamaku</h1>
<p>JavaScript dapat mengubah konten elemen HTML:</p>
<button type="button" onclick="myFunction()">Klik disini!</button>
<p id="demo">Ini adalah demonstarsi.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
Contoh :
JavaScript dapat mengubah style
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Pertamaku</h1>
<p id="demo">JavaScript dapat mengubah style pada elemen HTML:</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">klik disini!</button>
</body>
</html>
Contoh :
JavaScript dapat merubah atribut HTML
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Pertamaku</h1>
<p>Di sini, JavaScript mengubah nilai atribut src (source) dari sebuah gambar.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "https://www.w3schools.com/html/pic_bulboff.gif"
} else {
pic = "https://www.w3schools.com/html/pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="https://www.w3schools.com/html/pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
Tag <noscript> pada HTML
Tag noscript HTML mendefinisikan konten alternatif untuk ditampilkan kepada pengguna yang telah menonaktifkan script di browser mereka atau memiliki browser yang tidak mendukung script.
Contoh :
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Maaf, browser Anda tidak mendukung JavaScript!</noscript>
<p>Browser tanpa dukungan JavaScript akan menampilkan teks yang tertulis di dalam elemen noscript.</p>
</body>
</html>
Tag Script di HTML
| Tag | Deskripsi |
| <script> | Mendefinisikan client-side script |
| noscript | Mendefinisikan konten alternatif untuk browser pengguna yang tidak mendukung JavaScript |
Sekian penjelasn tentang JavaScript pada HTML, semoga bermanfaat.
