Tujuan Pembelajaran
- Memahami fungsi JavaScript dalam membuat website interaktif.
- Mengenal sintaks dasar JavaScript seperti variabel, operator, dan fungsi.
- Mampu menulis dan menjalankan kode JavaScript sederhana di halaman web.
Pengenalan JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website menjadi dinamis dan interaktif. Berbeda dengan HTML dan CSS yang mengatur struktur dan tampilan, JavaScript mengatur perilaku elemen web — seperti menampilkan pesan, menghitung nilai, atau merespons klik pengguna.
Contoh Struktur HTML + JavaScript
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar JavaScript Dasar</title>
</head>
<body>
<h1>Belajar JavaScript</h1>
<button onclick="sapaPengguna()">Klik Saya</button>
<p id="pesan"></p>
<script>
function sapaPengguna() {
let nama = prompt("Siapa nama kamu?");
document.getElementById("pesan").innerHTML = "Halo, " + nama + "!";
}
</script>
</body>
</html>
Penjelasan Kode
<script>digunakan untuk menulis kode JavaScript di dalam HTML.prompt()digunakan untuk meminta input dari pengguna.document.getElementById()digunakan untuk mengubah isi elemen HTML.onclickadalah event yang dijalankan ketika tombol diklik.
Contoh Variabel dan Operator
<script>
let a = 10;
let b = 5;
let hasil = a + b;
console.log("Hasil penjumlahan: " + hasil);
</script>
Langkah Praktik
- Buka teks editor seperti VS Code atau Notepad++.
- Buat file index.html dan tuliskan struktur HTML di atas.
- Tambahkan kode JavaScript di dalam tag
<script>. - Simpan file dan buka di browser untuk melihat hasilnya.
- Cobalah ubah nilai variabel dan perhatikan perubahan hasilnya.
Tips Belajar JavaScript
- Gunakan console.log() untuk menampilkan hasil di konsol browser.
- Pelajari dasar logika pemrograman seperti kondisi dan perulangan.
- Cobalah membuat interaksi sederhana seperti hitung luas, ubah warna, atau validasi form.
- Gunakan browser console (F12) untuk debugging jika terjadi error.
Asesmen: Tanya Jawab
- Apa fungsi JavaScript dalam halaman web?
- Sebutkan tiga contoh penggunaan JavaScript dalam website!
- Apa perbedaan antara variabel dan fungsi dalam JavaScript?
- Bagaimana cara menampilkan pesan kepada pengguna menggunakan JavaScript?
- Buatlah contoh kode JavaScript yang menjumlahkan dua angka dari input pengguna.
Tags
koding