1. Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi interaktif.
Bisa menampilkan teks, menghitung, memanipulasi HTML, hingga membuat animasi.
Untuk latihan dasar, kita akan menampilkan output menggunakan:
document.write("Halo Dunia!");
2. Menyisipkan JavaScript ke HTML
Buat file bernama index.html, lalu isi:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript Dasar</title>
</head>
<body>
<script>
document.write("Halo, ini JavaScript pertama saya!");
</script>
</body>
</html>
3. Variabel dalam JavaScript
Variabel = tempat menyimpan data.
Contoh:
<script>
let nama = "Budi";
let umur = 20;
document.write("Nama saya: " + nama + "<br>");
document.write("Umur saya: " + umur + " tahun<br>");
</script>
4. Tipe Data
- String →
"Hello" - Number →
10,3.14 - Boolean →
true,false - Array →
["apel", "jeruk"] - Object →
{nama:"Siti", umur:25}
Contoh:
<script>
let buah = ["Apel", "Mangga", "Jeruk"];
document.write("Buah favorit: " + buah[1]);
</script>
5. Operator dalam JavaScript
Operator aritmatika:
let a = 10;
let b = 5;
document.write("Penjumlahan: " + (a + b) + "<br>");
document.write("Perkalian: " + (a * b) + "<br>");
6. Percabangan (IF / ELSE)
<script>
let nilai = 75;
if (nilai >= 80) {
document.write("Nilai Anda A");
} else if (nilai >= 70) {
document.write("Nilai Anda B");
} else {
document.write("Nilai Anda C");
}
</script>
7. Perulangan (LOOP)
For loop:
<script>
for (let i = 1; i <= 5; i++) {
document.write("Perulangan ke " + i + "<br>");
}
</script>
While loop:
<script>
let x = 1;
while (x <= 5) {
document.write("While ke: " + x + "<br>");
x++;
}
</script>
8. Fungsi (Function)
<script>
function sapa(nama) {
document.write("Halo " + nama + "<br>");
}
sapa("Dina");
sapa("Rudi");
</script>
9. Event Dasar (onclick) + document.write()
Event = aksi yang dilakukan user (klik, hover, input).
Contoh tombol yang memicu JS:
<button onclick="document.write('Tombol diklik!')">Klik Saya</button>
Catatan: document.write() akan menghapus seluruh halaman jika digunakan setelah halaman selesai load. Ini normal untuk latihan dasar.
10. Studi Kasus Praktik
PRAKTIK 1 — Menampilkan Biodata dengan document.write()
<!DOCTYPE html>
<html>
<head>
<title>Praktik 1</title>
</head>
<body>
<script>
let nama = "Ahmad";
let kelas = "TI 1";
let kampus = "Universitas XYZ";
document.write("<h2>Biodata Mahasiswa</h2>");
document.write("Nama: " + nama + "<br>");
document.write("Kelas: " + kelas + "<br>");
document.write("Kampus: " + kampus + "<br>");
</script>
</body>
</html>
PRAKTIK 2 — Kalkulator Penjumlahan Sederhana
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
</head>
<body>
<script>
let angka1 = 7;
let angka2 = 3;
let hasil = angka1 + angka2;
document.write("<h3>Kalkulator Penjumlahan</h3>");
document.write(angka1 + " + " + angka2 + " = " + hasil);
</script>
</body>
</html>
PRAKTIK 3 — Cetak Angka 1–50
<!DOCTYPE html>
<html>
<head>
<title>Looping Angka</title>
</head>
<body>
<script>
for (let i = 1; i <= 50; i++) {
document.write(i + "<br>");
}
</script>
</body>
</html>
PRAKTIK 4 — Program Nilai Mahasiswa
<!DOCTYPE html>
<html>
<head>
<title>Nilai Mahasiswa</title>
</head>
<body>
<script>
let nama = "Siti";
let nilai = 88;
document.write("<h2>Nilai Mahasiswa</h2>");
document.write("Nama: " + nama + "<br>");
document.write("Nilai: " + nilai + "<br>");
if (nilai >= 85) {
document.write("Grade: A");
} else if (nilai >= 70) {
document.write("Grade: B");
} else {
document.write("Grade: C");
}
</script>
</body>
</html>
PRAKTIK 5 — Fungsi Cetak Pola Bintang
<!DOCTYPE html>
<html>
<head>
<title>Pola Bintang</title>
</head>
<body>
<script>
function cetakBintang(jumlah) {
for (let i = 1; i <= jumlah; i++) {
for (let j = 1; j <= i; j++) {
document.write("*");
}
document.write("<br>");
}
}
cetakBintang(5);
</script>
</body>
</html>
11. Tugas Untuk Mahasiswa (Latihan Mandiri)
✔ Buat program menggunakan document.write() untuk:
- Menampilkan tabel perkalian 1–10
- Menampilkan daftar 20 nama teman menggunakan array
- Menghitung total belanja dari 5 item
- Menentukan bilangan ganjil/genap dari 1–100
- Membuat fungsi perhitungan luas segitiga & persegi panjang