Scribd
Unggah
7 tayangan

Modul Praktek6

Diunggah oleh

Mftahul hd4
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
7 tayangan

Modul Praktek6

Diunggah oleh

Mftahul hd4
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Modul Praktik JavaScript dan Manipulasi DOM

Oleh : Mochammad Faid

Tujuan

 Memahami dasar-dasar JavaScript.


 Menguasai manipulasi DOM untuk interaktivitas halaman web.

Bagian 1: Pengantar JavaScript

Latihan 1: Variabel dan Tipe Data

1. Buat file HTML sederhana dengan nama latihan1.html.


2. Tambahkan kode berikut di dalam tag <body>:

html
Copy code
<script>
let nama = "John Doe";
let umur = 30;
let isMahasiswa = true;

console.log("Nama: " + nama);


console.log("Umur: " + umur);
console.log("Mahasiswa: " + isMahasiswa);
</script>

3. Buka file tersebut di browser dan lihat hasilnya di konsol (Ctrl + Shift + I untuk
membuka Developer Tools).

Bagian 2: Fungsi

Latihan 2: Fungsi Sederhana

1. Buat file HTML baru dengan nama latihan2.html.


2. Tambahkan kode berikut di dalam tag <body>:

html
Copy code
<script>
function tambah(a, b) {
return a + b;
}

let hasil = tambah(5, 10);


console.log("Hasil Penjumlahan: " + hasil);
</script>
3. Lihat hasilnya di konsol seperti sebelumnya.

Bagian 3: DOM Manipulation

Latihan 3: Mengubah Teks dan Gambar

1. Buat file HTML baru dengan nama latihan3.html.


2. Tambahkan kode berikut:

html
Copy code
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Latihan Manipulasi DOM</title>
</head>
<body>
<h1 id="judul">Judul Awal</h1>
<img id="gambar" src="gambar-awal.jpg" alt="Gambar Awal"
width="200">
<button onclick="ubahKonten()">Ubah Konten</button>

<script>
function ubahKonten() {
document.getElementById("judul").innerText = "Judul
Baru";
document.getElementById("gambar").src = "gambar-
baru.jpg";
}
</script>
</body>
</html>

3. Simpan gambar dengan nama gambar-awal.jpg dan gambar-baru.jpg di folder


yang sama.
4. Buka file di browser dan klik tombol untuk mengubah teks dan gambar.

Bagian 4: Menggunakan jQuery

Latihan 4: jQuery Manipulasi DOM

1. Buat file HTML baru dengan nama latihan4.html.


2. Tambahkan kode berikut:

html
Copy code
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Latihan jQuery</title>
<script src="https://code.jquery.com/jquery-
3.6.0.min.js"></script>
</head>
<body>
<h1 id="judul">Judul Awal</h1>
<button id="tombol">Ubah Judul</button>

<script>
$("#tombol").click(function() {
$("#judul").text("Judul Baru dengan jQuery");
});
</script>
</body>
</html>

3. Buka file di browser dan klik tombol untuk mengubah judul.

Bagian 5: Menggunakan Alpine.js

Latihan 5: Alpine.js Interaktivitas

1. Buat file HTML baru dengan nama latihan5.html.


2. Tambahkan kode berikut:

html
Copy code
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Latihan Alpine.js</title>
<script src="https://cdn.jsdelivr.net/npm/alpinejs"
defer></script>
</head>
<body>
<div x-data="{ text: 'Teks Awal' }">
<h1 x-text="text"></h1>
<button @click="text = 'Teks Baru'">Ubah Teks</button>
</div>
</body>
</html>
3. Buka file di browser dan klik tombol untuk mengubah teks.

Penutup

 Setelah menyelesaikan semua latihan, kamu akan memiliki pemahaman yang lebih
baik tentang JavaScript, manipulasi DOM, dan penggunaan jQuery serta Alpine.js.
 Jangan ragu untuk bereksperimen lebih jauh dengan kode yang ada!

Anda mungkin juga menyukai