JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih dinamis dan interaktif.
Bahasa Pemrograman JavaScript dapat digunakan langsung di HTML dengan menambahkan tag <script> di bagian <head> atau <body> dokumen.
Dengan cara ini, JavaScript dapat berjalan bersamaan dengan HTML untuk menciptakan pengalaman pengguna yang lebih baik.
Pelajari contoh-contoh sederhana cara memakai bahasa pemrograman javascript yang akan dibahas pada artikel kali ini.
Anda dapat memahami cara kode JavaScript berinteraksi dengan dokumen HTML untuk mengatur elemen pada halaman web, menangani aksi pengguna, dan menunjukkan data secara langsung di browser. Simak selengkapnya!
Baca Juga: Belajar JavaScript Untuk Pemula Sampai Mahir
5 Contoh Coding JavaScript di HTML Sederhana
1. Menampilkan Pesan dengan alert()
Contoh pertama ini menunjukkan bagaimana cara menggunakan fungsi alert() untuk melihat pesan pop-up di browser.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contoh Alert JavaScript</title>
</head>
<body>
<h1>Contoh Alert JavaScript</h1>
<script>
alert(“Selamat datang di situs kami!”);
</script>
</body>
</html>
Penjelasan: Saat halaman dibuka, sebuah pop-up alert akan muncul yang menampilkan pesan “Selamat datang di situs kami!”
2. Menampilkan Pesan di Konsol dengan console.log()
Contoh ini menunjukkan bagaimana kode program JavaScript digunakan untuk menampilkan pesan di konsol.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contoh Console JavaScript</title>
</head>
<body>
<h1>Contoh Console JavaScript</h1>
<script>
console.log(“Ini adalah pesan yang muncul di console.”);
</script>
</body>
</html>
Penjelasan: Saat Anda membuka developer tools di browser dan menuju ke tab”konsol”, pesan “Ini adalah pesan yang muncul di console” akan terlihat.
3. Mengubah Konten HTML dengan document.getElementById()
Contoh berikut menunjukkan bagaimana JS (JavaScript) dapat digunakan untuk mengubah konten HTML di halaman web.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Contoh Mengubah Konten HTML</title>
</head>
<body>
<h1 id=”judul”>Judul Lama</h1>
<button onclick=”ubahJudul()”>Klik untuk Mengubah Judul</button>
<script>
function ubahJudul() {
document.getElementById(“judul”).innerHTML = “Judul Baru!”;
}
</script>
</body>
</html>
Penjelasan: Ketika tombol diklik, teks di dalam tag <h1> dengan id=”judul” akan berubah menjadi “Judul Baru!”
4. Mengambil Nilai dari Input Form dengan document.getElementById()
Contoh ini menunjukkan bagaimana cara mengambil nilai dari input form dan menampilkannya di layar.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Input Form dengan JavaScript</title>
</head>
<body>
<h1>Masukkan Nama Anda</h1>
<input type=”text” id=”namaInput” placeholder=”Masukkan nama”>
<button onclick=”tampilkanNama()”>Tampilkan Nama</button>
<p id=”output”></p>
<script>
function tampilkanNama() {
var nama = document.getElementById(“namaInput”).value;
document.getElementById(“output”).innerHTML = “Halo, ” + nama + “!”;
}
</script>
</body>
</html>
Penjelasan: Setelah pengguna memasukkan nama dan mengklik tombol, kode JS (JavaScript) akan menampilkan nama yang dimasukkan di bawah input form.
5. Menambahkan Elemen Baru ke Halaman dengan document.createElement()
Contoh ini memperlihatkan bagaimana cara menambahkan elemen baru, seperti paragraf, ke halaman HTML menggunakan JavaScript.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Menambahkan Elemen dengan JavaScript</title>
</head>
<body>
<h1>Tambah Elemen Baru</h1>
<button onclick=”tambahParagraf()”>Tambah Paragraf</button>
<script>
function tambahParagraf() {
var paragraf = document.createElement(“p”);
paragraf.innerHTML = “Ini adalah paragraf baru yang ditambahkan dengan JavaScript!”;
document.body.appendChild(paragraf);
}
</script>
</body>
</html>
Penjelasan: Setiap kali tombol diklik, JavaScript membuat elemen <p> baru dan menambahkannya ke dalam body halaman, menuliskan teks baru di halaman web browser.
Gunakan JavaScript di HTML untuk Mengembangkan Website Anda
Kelima contoh di atas memperkenalkan cara sederhana menggunakan JavaScript di HTML untuk mengubah konten halaman, menangani interaksi pengguna, dan memperlihatkan pesan atau elemen baru.
Dengan contoh-contoh ini, pemula dapat memulai perjalanan mereka dalam belajar JavaScript dan memahami cara membuat program JavaScript yang interaktif.
Pelajari contoh penggunaan Javascript di HTML lebih jauh melalui Kursus Fullstack Web Developer Javascript yang telah Course-Net sediakan, tersedia dari kelas pemula hingga mahir.
Anda bisa langsung belajar dengan coach praktisi yang telah berpengalaman lebih dari 5 tahun dengan layanan re-coaching, belajar sampai bisa, bahkan seumur hidup!
Kursus Experience Based Learning yang telah mendapatkan 4 (empat) penghargaan internasional ini bisa anda cicil hingga 18 kali.
100.000+ alumni dengan 472+ corporate clients telah merasakan kepuasan yang tinggi dibuktikan dengan bintang 4.9 dari 15.000+ ulasan di google review. Kini, giliran anda!
