MODUL BELAJAR HARI 15-16
Week 3: Interaktif dengan JavaScript! 🚀
Sekarang kita masuk ke tahap membuat website lebih hidup dengan JavaScript!
Hari 15-16: Dasar-dasar JavaScript
Di sini kita akan belajar:
✅ Cara menulis JavaScript dasar.
✅ Menggunakan alert, console.log, dan variabel.
✅ Menjalankan JavaScript di dalam HTML.
✅ Mengenal operator & tipe data.
1. Menjalankan JavaScript di HTML
Buat file index.html dan tambahkan script ini di dalamnya:
<!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>Belajar JavaScript Dasar</h1>
<button onclick="sayHello()">Klik Aku!</button>
<script>
function sayHello() {
alert("Halo! Selamat belajar JavaScript 🚀");
}
</script>
</body>
</html>
🔹 Penjelasan:
onclick="sayHello()"→ Memanggil fungsi saat tombol diklik.alert("Halo!")→ Menampilkan pesan pop-up.<script>...</script>→ Menuliskan JavaScript di dalam HTML.
2. Menampilkan Output di Console
Buka DevTools (F12 > Console) di browser dan tambahkan kode ini ke index.html:
<script>
console.log("Selamat datang di dunia JavaScript!");
</script>
💡 Tips: console.log() sering digunakan untuk debugging (cek kode yang berjalan).
3. Variabel & Tipe Data
Buat file script.js dan tambahkan kode ini:
// Variabel menggunakan let & const
let nama = "Muhammad Nur"; // Bisa diubah
const tahunLahir = 1986; // Tidak bisa diubah
console.log("Nama saya:", nama);
console.log("Saya lahir tahun:", tahunLahir);
// Tipe data dasar
let angka = 25; // Number
let teks = "Hello World"; // String
let benar = true; // Boolean
let kosong = null; // Null
let tidakTerdefinisi; // Undefined
console.log(typeof angka); // Output: number
console.log(typeof teks); // Output: string
console.log(typeof benar); // Output: boolean
🔹 Penjelasan:
let→ Bisa diubah.const→ Tidak bisa diubah.- Tipe data: Number, String, Boolean, Null, Undefined.
🎯 Tugas Praktik Hari 15-16:
✅ Tambahkan prompt() agar user bisa memasukkan nama sendiri!
✅ Buat variabel untuk menghitung usia berdasarkan tahun lahir!
✅ Coba gunakan console.log() untuk menampilkan hasil perhitungan.
🚀 Next: Hari 17-18 - Manipulasi DOM!
Besok kita akan mengubah teks, gambar, dan elemen HTML menggunakan JavaScript! 🔥
Komentar
Posting Komentar