Berikut ini adalah contoh lengkap JavaScript statements beserta penerapannya pada HTML dan penjelasannya.
1. Mengubah Teks pada Halaman HTML
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Contoh Mengubah Teks</title>
<script>
document.getElementById("demo").innerHTML = "Halo, dunia!";
</script>
</head>
<body>
<h1 id="demo">Teks Awal</h1>
</body>
</html>
2. Menghitung Jumlah Karakter pada Input Teks
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Contoh Menghitung Karakter</title>
<script>
function hitungKarakter() {
var teks = document.getElementById("inputTeks").value;
var jumlahKarakter = teks.length;
document.getElementById("hasil").innerHTML = "Jumlah karakter: " + jumlahKarakter;
}
</script>
</head>
<body>
<input type="text" id="inputTeks" oninput="hitungKarakter()">
<p id="hasil"></p>
</body>
</html>3. Menampilkan Pesan Alert
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Contoh Pesan Alert</title>
<script>
function tampilkanAlert() {
alert("Ini adalah pesan alert!");
}
</script>
</head>
<body>
<button onclick="tampilkanAlert()">Tampilkan Alert</button>
</body>
</html>4. Mengubah Warna Latar Belakang
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Contoh Mengubah Warna Latar Belakang</title>
<script>
function ubahWarna() {
document.body.style.backgroundColor = "yellow";
}
</script>
</head>
<body>
<button onclick="ubahWarna()">Ubah Warna Latar Belakang</button>
</body>
</html>5. Menampilkan Tanggal dan Waktu
JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Contoh Menampilkan Tanggal dan Waktu</title>
<script>
function tampilkanTanggalWaktu() {
var sekarang = new Date();
var tanggal = sekarang.getDate();
var bulan = sekarang.getMonth() + 1;
var tahun = sekarang.getFullYear();
var jam = sekarang.getHours();
var menit = sekarang.getMinutes();
var detik = sekarang.getSeconds();
var waktu = jam + ":" + menit + ":" + detik;
document.getElementById("hasil").innerHTML = "Tanggal: " + tanggal + "/" + bulan + "/" + tahun + "<br>Waktu: " + waktu;
}
</script>
</head>
<body>
<button onclick="tampilkanTanggalWaktu()">Tampilkan Tanggal dan Waktu</button>
<p id="hasil"></p>
</body>
</html>Output:
See the Pen Contoh penarapan JavaScript Statements by De Orchids (@De-Orchids) on CodePen.
Semoga contoh-contoh di atas dapat membantu Anda memahami penggunaan JavaScript dalam HTML. Selamat mencoba!
Leave a Reply