Contoh penarapan JavaScript Statements

Contoh penarapan JavaScript Statements

—

by

Webbiz.ID
in

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>
JavaScript

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>
JavaScript

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>
JavaScript

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>
JavaScript

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>
JavaScript

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!

Artikel Terbaru ⭐