Subbab 4 / 9

Pengantar JavaScript Dasar & Manipulasi DOM

HTML digunakan untuk membuat struktur web, CSS untuk desain web, sedangkan JavaScript (JS) bertugas untuk memberikan logika dan interaktivitas pada web (membuat web menjadi lebih "hidup").

  1. Buat folder baru di komputer/laptop dengan nama Praktikum-JS.
  2. Buka folder tersebut menggunakan Visual Studio Code.
  3. Buat dua buah file baru: index.html dan script.js.
  4. Tuliskan struktur dasar HTML pada index.html dan hubungkan file JS menggunakan tag <script> tepat di atas tag penutup </body>.

Kode index.html:

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum JavaScript Dasar</title>
</head>
<body>
    <h1>Selamat Datang di Praktikum JavaScript</h1>
    <p>Silakan buka Console Browser untuk melihat output.</p>
    
    <!-- Menghubungkan JS eksternal -->
    <script src="script.js"></script>
</body>
</html>
  1. Buka index.html di browser.
  2. Klik kanan pada halaman browser -> pilih Inspect (Inspeksi) -> pindah ke tab Console. Ini adalah tempat kita melihat proses JavaScript yang berjalan di latar belakang.

VARIABEL & TIPE DATA

Variabel adalah wadah untuk menyimpan data. JavaScript modern menggunakan let (nilainya bisa diubah) dan const (nilainya tetap/konstan). Tipe data dasar meliputi String (teks), Number (angka), dan Boolean (true/false).

Buka file script.js dan ketikkan kode berikut:

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
console.log("=== BAGIAN 2: VARIABEL & TIPE DATA ===");

// 1. Menggunakan let (Bisa diubah)
let namaMahasiswa = "Budi Santoso";
console.log("Nama Awal:", namaMahasiswa);

namaMahasiswa = "Andi Wijaya"; // Mengubah isi variabel
console.log("Nama Setelah Diubah:", namaMahasiswa);

// 2. Menggunakan const (Tidak bisa diubah)
const nim = "2026101010";
console.log("NIM:", nim);
// nim = "2026101011"; // Jika baris ini diaktifkan, akan terjadi Error!

// 3. Tipe Data
let umur = 20; // Number
let ipk = 3.85; // Number (Desimal)
let isLulus = true; // Boolean

console.log("Umur saya " + umur + " tahun.");

Simpan file dan cek Console di browser. Pastikan tidak ada error.

STRUKTUR KONTROL (LOGIKA & PERULANGAN)

  • If...Else: Digunakan untuk mengambil keputusan berdasarkan kondisi tertentu.
  • For Loop: Digunakan untuk menjalankan kode secara berulang-ulang selama kondisi terpenuhi.

Tambahkan kode berikut di bawah kode sebelumnya pada script.js:

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
console.log("\n=== BAGIAN 3: LOGIKA & PERULANGAN ===");

// 1. Percabangan (If - Else If - Else)
let nilaiAkhir = 75;

if (nilaiAkhir >= 80) {
    console.log("Grade: A - Lulus dengan Sangat Baik");
} else if (nilaiAkhir >= 60) {
    console.log("Grade: B - Lulus");
} else {
    console.log("Grade: C - Belum Lulus, silakan mengulang");
}

// 2. Perulangan (For Loop)
// Format: for (nilai_awal; batas_kondisi; penambahan)
console.log("Menampilkan bilangan genap dari 2 sampai 10:");
for (let i = 2; i <= 10; i += 2) {
    console.log("Angka Genap: " + i);
}

FUNCTION (FUNGSI)

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu dan bisa dipanggil berkali-kali tanpa harus menulis ulang kodenya. Terdapat fungsi tradisional dan Arrow Function (fitur JS modern ES6).

Tambahkan kode berikut pada script.js:

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
console.log("\n=== BAGIAN 4: FUNCTION ===");

// 1. Fungsi Tradisional
function hitungLuasSegitiga(alas, tinggi) {
    let luas = 0.5 * alas * tinggi;
    return luas;
}

// Memanggil fungsi
let hasilLuas = hitungLuasSegitiga(10, 5);
console.log("Luas Segitiga (alas 10, tinggi 5) adalah: " + hasilLuas);

// 2. Arrow Function
const sapaUser = (nama) => {
    console.log("Halo, " + nama + "! Selamat belajar JS.");
}

sapaUser("Mahasiswa Web");

MANIPULASI DOM & EVENT LISTENER

DOM (Document Object Model) adalah representasi struktur HTML web kita. Dengan JS, kita bisa mengambil elemen HTML (seperti paragraf, tombol, dll) dan mengubahnya secara dinamis (mengubah warna, teks, dll). Event Listener bertugas "mendengarkan" aksi user (seperti saat tombol diklik).

1. Ubah file index.html: Tambahkan elemen-elemen berikut di dalam tag <body> (di atas tag script):

php
1
2
3
4
<hr>
    <h2>Latihan DOM (Document Object Model)</h2>
    <p id="teks-dom">Ini adalah teks asli dari HTML.</p>
    <button id="btn-ubah-teks">Ubah Teks & Warna</button>

2. Tambahkan kode berikut pada script.js:

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
console.log("\n=== BAGIAN 5: DOM & EVENT LISTENER ===");

// Tahap 1: Seleksi Elemen dari HTML
const teksDom = document.getElementById("teks-dom");
const btnUbah = document.getElementById("btn-ubah-teks");

// Tahap 2: Tambahkan Event Listener (Event 'click')
btnUbah.addEventListener("click", function() {
    // Aksi yang dijalankan saat tombol diklik
    teksDom.textContent = "Teks ini telah diubah menggunakan JavaScript!";
    teksDom.style.color = "red";
    teksDom.style.fontWeight = "bold";
    
    // Munculkan notifikasi alert
    alert("Berhasil mengubah teks!");
});

Kembali ke browser, coba klik tombol "Ubah Teks & Warna" dan lihat apa yang terjadi pada halaman web.

MINI PROJECT - INTERACTIVE COUNTER

Sebagai penerapan seluruh materi di atas, mari kita membuat aplikasi penghitung (Counter).

1. Tambahkan ke dalam index.html:

php
1
2
3
4
5
6
7
8
9
10
11
<hr>
    <h2>Mini Project: Penghitung (Counter)</h2>
    
    <!-- inline CSS sederhana agar tampilan di tengah -->
    <div style="text-align: center; border: 1px solid #ccc; padding: 20px; width: 300px;">
        <h1 id="angka-counter" style="font-size: 50px; margin: 10px;">0</h1>
        <button id="btn-kurang" style="padding: 10px 20px;">Kurang (-)</button>
        <button id="btn-tambah" style="padding: 10px 20px;">Tambah (+)</button>
        <br><br>
        <button id="btn-reset">Reset</button>
    </div>

2. Tambahkan logika berikut pada script.js:

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// --- MINI PROJECT COUNTER ---

// 1. Seleksi Elemen
const teksAngka = document.getElementById("angka-counter");
const btnTambah = document.getElementById("btn-tambah");
const btnKurang = document.getElementById("btn-kurang");
const btnReset = document.getElementById("btn-reset");

// 2. Buat Variabel Penampung Angka
let angka = 0;

// 3. Logika Tombol Tambah
btnTambah.addEventListener("click", function() {
    angka++; // artinya angka = angka + 1
    teksAngka.textContent = angka;
    teksAngka.style.color = "green"; // warna teks hijau jika ditambah
});

// 4. Logika Tombol Kurang
btnKurang.addEventListener("click", function() {
    // Syarat opsional: Angka tidak boleh minus
    if (angka > 0) {
        angka--; 
        teksAngka.textContent = angka;
        teksAngka.style.color = "red"; // warna teks merah jika dikurang
    } else {
        alert("Angka sudah mencapai 0!");
    }
});

// 5. Logika Tombol Reset
btnReset.addEventListener("click", function() {
    angka = 0;
    teksAngka.textContent = angka;
    teksAngka.style.color = "black";
});

LIVE CODINGGGGGGG🔥🔥🔥

  1. Modifikasi Counter: Tambahkan fitur agar setiap kali nilai mencapai kelipatan 10 (10, 20, 30, dst), munculkan pop-up pesan alert("Selamat, Anda mencapai " + angka)!. Clue: Gunakan operator Modulus (%) di dalam event listener tambah.
  2. Kalkulator Luas Persegi Panjang: Buatlah form sederhana (menggunakan tag <input>) di HTML untuk memasukkan "Panjang" dan "Lebar". Buat tombol "Hitung Luas". Saat tombol diklik, JavaScript harus mengambil nilai (value) dari kedua input tersebut, menghitungnya, dan menampilkannya pada tag <p> yang ada di bawah tombol.
Subbab Sebelumnya
SI ES ES🥶
Subbab Berikutnya
JavaScript Lanjutan: DOM Dinamis, Asynchronous JavaScript, dan Fetch API