Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Memahami apa itu JavaScript dan perannya di web
- Menambahkan JavaScript ke halaman HTML
- Menggunakan
console.log()untuk mencetak pesan - Membuka dan menggunakan browser console
Materi Singkat
Kita sudah punya HTML (kerangka) dan CSS (tampilan). Sekarang saatnya JavaScript — otaknya halaman web.
Bayangkan website sebagai pertunjukan wayang:
- HTML = wayang kulit (struktur fisik)
- CSS = kostum dan warna wayang
- JavaScript = dalang yang menggerakkan wayang
JavaScript adalah bahasa pemrograman yang berjalan di browser. Dengan JavaScript, kamu bisa:
- Menampilkan/menyembunyikan elemen saat tombol diklik
- Memvalidasi form sebelum dikirim
- Membuat animasi
- Berkomunikasi dengan server (mengambil data baru tanpa reload)
Cara Menambahkan JavaScript ke HTML
1. Internal (di dalam <script>):
<body>
<p>Konten halaman</p>
<!-- Taruh script di akhir body -->
<script>
console.log("Halo dari JavaScript!");
</script>
</body>2. External (file terpisah):
<body>
<p>Konten halaman</p>
<!-- Hubungkan file JS di akhir body -->
<script src="script.js"></script>
</body>Kenapa di akhir <body>? Agar HTML dimuat dulu sebelum JavaScript dijalankan. Ini mencegah error saat JavaScript mencoba mengakses elemen yang belum ada.
Console: Alat Terbaikmu
Console adalah tempat JavaScript berbicara kepadamu (dan kamu bisa berbicara balik). Buka dengan:
- Chrome/Edge:
F12atauCtrl+Shift+J - Firefox:
F12atauCtrl+Shift+K - Mac:
Cmd+Option+J
Fungsi console.log() mencetak pesan ke console:
console.log("Halo, Dunia!"); // teks
console.log(42); // angka
console.log(3.14); // desimal
console.log(true); // boolean
console.log("Namaku:", "Budi"); // beberapa nilai
console.log(1 + 2); // ekspresi (hasil: 3)Console juga berguna untuk:
- Debugging — melihat nilai variabel
- Percobaan — ketik langsung di console, tekan Enter
Kamu bisa mengetik JavaScript langsung di console browser dan langsung melihat hasilnya!
Contoh Kode
index.html:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Belajar JavaScript</title>
</head>
<body>
<h1>Halaman Belajar JavaScript</h1>
<p>Buka console browser untuk melihat pesan dari JavaScript!</p>
<script>
// Ini adalah komentar — tidak dieksekusi JavaScript
console.log("Halo dari JavaScript!");
console.log("2 + 3 =", 2 + 3);
console.log("Panjang kata 'Indonesia':", "Indonesia".length);
// Kamu juga bisa tampilkan dialog
// alert("Selamat datang!"); // uncomment untuk mencoba
</script>
</body>
</html>Penjelasan:
//adalah komentar — teks setelahnya diabaikan JavaScriptconsole.log()mencetak ke konsol"Indonesia".lengthadalah properti — mengembalikan panjang string (9)
Tugas Kecil
- Buat file
belajar-js.htmldengan struktur HTML5 lengkap - Tambahkan tag
<script>di akhir<body> - Di dalam script, tulis
console.log()yang mencetak:- Namamu
- Usiamu
- Hasil dari
10 * 5(cukup tulis ekspresinya, bukan hasilnya langsung) - Sebuah kalimat: "Saya sedang belajar JavaScript!"
- Buka file di browser, tekan
F12, pilih tab "Console" - Pastikan 4 pesan muncul di console