Penggunaan JavaScript dalam Teks HTML
JavaScript membuat halaman HTML lebih dinamis dan interaktif.
Tag HTML <script>
Tag <script> digunakan untuk menentukan skrip sisi klien (JavaScript).
Elemen <script> berisi pernyataan scripting, atau menunjuk ke file skrip eksternal melalui atribut src.
Penggunaan umum untuk JavaScript adalah manipulasi gambar, validasi form, dan perubahan konten yang dinamis.
Untuk memilih elemen HTML, JavaScript sangat sering menggunakan metode document.getElementById (id).
Contoh JavaScript ini menulis "Hello JavaScript!" menjadi elemen HTML dengan id = "demo":
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
Tip: Anda bisa belajar lebih banyak tentang JavaScript di Tutorial JavaScript kami.
Rasa JavaScript
Berikut adalah beberapa contoh JavaScript yang bisa dilakukan:
JavaScript bisa mengubah konten HTML
document.getElementById("demo").innerHTML = "Hello JavaScript!";
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
JavaScript dapat mengubah styles HTML
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</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()">Click Me!</button>
</body>
</html>
JavaScript bisa mengubah atribut HTML
document.getElementById("image").src = "picture.gif";
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="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 HTML <noscript>
Tag <noscript> digunakan untuk menyediakan konten alternatif bagi pengguna yang telah menonaktifkan skrip di browser mereka atau memiliki browser yang tidak mendukung skrip sisi klien:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Maaf, browser Anda tidak mendukung JavaScript!</noscript>
Contoh Code:
<!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>
HTML Script Tags
| Tag | Description |
|---|---|
| <script> | Mendefinisikan skrip sisi klien |
| <noscript> | Mendefinisikan konten alternatif untuk pengguna yang tidak mendukung skrip sisi klien |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2