0% menganggap dokumen ini bermanfaat (0 suara)
8 tayangan25 halaman

Praktikum JavaScript Dasar untuk TI

Modul ini adalah panduan praktikum untuk mata kuliah Pemrograman Web pada semester 3 Program Studi Teknologi Informasi, yang mencakup 8 sesi dengan fokus pada dasar-dasar JavaScript. Mahasiswa diharapkan dapat memahami konsep JavaScript, variabel, tipe data, struktur kontrol, loop, fungsi, serta manipulasi array dan objek. Setiap sesi dilengkapi dengan tujuan pembelajaran, materi teori, langkah praktikum, dan tugas untuk memperdalam pemahaman mahasiswa.

Diunggah oleh

movietrama
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
8 tayangan25 halaman

Praktikum JavaScript Dasar untuk TI

Modul ini adalah panduan praktikum untuk mata kuliah Pemrograman Web pada semester 3 Program Studi Teknologi Informasi, yang mencakup 8 sesi dengan fokus pada dasar-dasar JavaScript. Mahasiswa diharapkan dapat memahami konsep JavaScript, variabel, tipe data, struktur kontrol, loop, fungsi, serta manipulasi array dan objek. Setiap sesi dilengkapi dengan tujuan pembelajaran, materi teori, langkah praktikum, dan tugas untuk memperdalam pemahaman mahasiswa.

Diunggah oleh

movietrama
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

Modul Praktikum JavaScript Dasar

Pemrograman Web - Semester 3 Teknologi Informasi

INFORMASI UMUM
Mata Kuliah: Pemrograman Web
Semester: 3
Program Studi: Teknologi Informasi
Jumlah Sesi Praktikum: 8 sesi
Durasi per Sesi: 2-3 jam
Prasyarat: HTML dan CSS Dasar

TUJUAN PEMBELAJARAN
Setelah menyelesaikan modul ini, mahasiswa diharapkan dapat:

1. Memahami konsep dasar JavaScript dan peran dalam web development

2. Menggunakan variabel, tipe data, dan operator dengan tepat

3. Mengimplementasikan struktur kontrol (if-else, loop, switch)

4. Membuat dan menggunakan fungsi dalam program

5. Memanipulasi DOM (Document Object Model)

6. Menangani event dari user

7. Bekerja dengan array dan object

8. Melakukan debugging dan error handling

SESI 1: PENGENALAN JAVASCRIPT DAN SETUP ENVIRONMENT

Tujuan Sesi
Mahasiswa memahami apa itu JavaScript, fungsinya dalam web, dan mampu setup environment praktikum.

Materi Teori
Apa itu JavaScript? JavaScript adalah bahasa pemrograman yang dijalankan di browser untuk membuat
website menjadi interaktif. Berbeda dengan HTML (struktur) dan CSS (tampilan), JavaScript memberikan
fungsionalitas dan logika pada halaman web.
Peran JavaScript:

Merespons aksi pengguna (klik, input, hover)

Memanipulasi konten HTML secara dinamis

Validasi form sebelum dikirim ke server

Membuat animasi dan efek visual

Komunikasi dengan server (AJAX)

Praktikum
Alat yang Diperlukan:

Text editor (VS Code, Sublime Text, atau Notepad++)

Web browser (Chrome, Firefox)

Developer Tools browser

Langkah Praktikum:

1. Buat folder project bernama js-praktikum

2. Buat file [Link] dengan struktur dasar:

html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengenalan JavaScript</title>
</head>
<body>
<h1>Selamat Datang di JavaScript</h1>
<p id="pesan"></p>

<script>
// Script inline pertama Anda
[Link]('pesan').textContent = 'JavaScript sedang berjalan!';
[Link]('Halaman telah dimuat');
</script>
</body>
</html>

3. Buka file di browser dan buka Developer Tools (F12)


4. Lihat tab Console dan amati output

5. Modifikasi teks dalam [Link]() dan refresh halaman

Tugas:

Tambahkan 3 baris [Link]() berbeda dengan pesan Anda sendiri

Ubah konten elemen dengan id pesan menjadi nama Anda

SESI 2: VARIABEL, TIPE DATA, DAN OPERATOR

Tujuan Sesi
Mahasiswa mampu mendeklarasikan variabel, memahami tipe data, dan menggunakan operator.

Materi Teori
Deklarasi Variabel:

var - cara lama (hindari penggunaan)

let - deklarasi modern dengan scope lokal

const - untuk nilai yang tidak berubah

Tipe Data Primitif:

String: "Halo" , 'Dunia'

Number: 42 , 3.14 , -5

Boolean: true , false

Undefined: variabel tanpa nilai

Null: nilai kosong yang disengaja

Operator:

Aritmatika: + , - , * , / , % , **

Perbandingan: == , === , != , !== , < , > , <= , >=

Logika: && , || , !

Assignment: = , += , -= , *= , /=

Praktikum
Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Variabel dan Tipe Data</title>
</head>
<body>
<h1>Praktikum Variabel dan Tipe Data</h1>
<div id="hasil"></div>

<script>
// Deklarasi variabel
let nama = "Andi";
let umur = 20;
let tinggi = 170.5;
let aktif = true;
const PI = 3.14159;

[Link]("Nama:", nama);
[Link]("Tipe nama:", typeof nama);
[Link]("Umur:", umur);
[Link]("Tipe umur:", typeof umur);

// Operasi aritmatika
let a = 10;
let b = 3;
[Link]("10 + 3 =", a + b);
[Link]("10 - 3 =", a - b);
[Link]("10 * 3 =", a * b);
[Link]("10 / 3 =", a / b);
[Link]("10 % 3 =", a % b);

// Operasi perbandingan
[Link]("10 > 3:", a > b);
[Link]("10 == '10':", a == '10');
[Link]("10 === '10':", a === '10');

// Operasi logika
[Link]("true && false:", true && false);
[Link]("true || false:", true || false);
[Link]("!true:", !true);

// String concatenation
let kalimat = nama + " berusia " + umur + " tahun";
[Link](kalimat);
// Template literal
let kalimat2 = `${nama} berusia ${umur} tahun dan tingginya ${tinggi} cm`;
[Link](kalimat2);
</script>
</body>
</html>

Tugas:

Buat variabel untuk menyimpan data pribadi Anda (nama, NIM, semester, GPA)

Hitung rata-rata dari 5 nilai menggunakan variabel

Gunakan template literal untuk membuat kalimat deskriptif

Tampilkan hasil di console dan di halaman web

SESI 3: STRUKTUR KONTROL - IF ELSE DAN SWITCH

Tujuan Sesi
Mahasiswa mampu membuat keputusan dalam program menggunakan if-else dan switch.

Materi Teori
If-Else Statement: Digunakan untuk mengeksekusi kode berdasarkan kondisi tertentu.

Switch Statement: Digunakan ketika ada banyak pilihan yang berbeda.

Praktikum
Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Struktur Kontrol</title>
<style>
body { font-family: Arial; margin: 20px; }
.hasil { margin: 10px 0; padding: 10px; background: #f0f0f0; }
</style>
</head>
<body>
<h1>Praktikum Struktur Kontrol</h1>

<div id="hasil1" class="hasil"></div>


<div id="hasil2" class="hasil"></div>
<div id="hasil3" class="hasil"></div>

<script>
// Contoh 1: If-Else dasar
let nilai = 75;
let grade;

if (nilai >= 85) {


grade = "A";
} else if (nilai >= 75) {
grade = "B";
} else if (nilai >= 65) {
grade = "C";
} else {
grade = "D";
}

[Link]('hasil1').textContent =
`Nilai ${nilai} mendapat grade ${grade}`;

// Contoh 2: Switch statement


let hari = 3; // Rabu
let namaHari;

switch (hari) {
case 1:
namaHari = "Senin";
break;
case 2:
namaHari = "Selasa";
break;
case 3:
namaHari = "Rabu";
break;
case 4:
namaHari = "Kamis";
break;
case 5:
namaHari = "Jumat";
break;
default:
namaHari = "Hari lainnya";
}

[Link]('hasil2').textContent =
`Hari ke-${hari} adalah ${namaHari}`;

// Contoh 3: Nested if dan logical operators


let umur = 20;
let punya_sim = true;
let status;

if (umur >= 17 && punya_sim) {


status = "Boleh mengemudi";
} else if (umur >= 17) {
status = "Sudah cukup umur tapi belum punya SIM";
} else {
status = "Belum boleh mengemudi";
}

[Link]('hasil3').textContent =
`Umur ${umur}, SIM: ${punya_sim} => ${status}`;
</script>
</body>
</html>

Tugas:

Buat program untuk menentukan kategori usia (anak-anak, remaja, dewasa, lansia)

Buat program yang mengecek apakah suatu tahun adalah tahun kabisat

Buat program nilai kelulusan dengan kriteria minimal 60


SESI 4: LOOP DAN ITERASI

Tujuan Sesi
Mahasiswa mampu menggunakan berbagai jenis loop untuk mengulang kode.

Materi Teori
Jenis-Jenis Loop:

for - loop dengan jumlah iterasi yang pasti

while - loop selama kondisi terpenuhi

do-while - loop yang minimal dijalankan sekali

for...of - loop untuk array

for...in - loop untuk object properties

Praktikum
Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Loop dan Iterasi</title>
<style>
body { font-family: Arial; margin: 20px; }
.hasil { margin: 20px 0; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; }
pre { background: #f0f0f0; padding: 10px; overflow-x: auto; }
</style>
</head>
<body>
<h1>Praktikum Loop dan Iterasi</h1>

<div id="hasil1" class="hasil"></div>


<div id="hasil2" class="hasil"></div>
<div id="hasil3" class="hasil"></div>

<script>
// Contoh 1: For loop
let output1 = "Perkalian 5:\n";
for (let i = 1; i <= 10; i++) {
output1 += `5 × ${i} = ${5 * i}\n`;
}
[Link]('hasil1').innerHTML =
`<pre>${output1}</pre>`;

// Contoh 2: While loop - menghitung jumlah


let output2 = "";
let sum = 0;
let i = 1;
while (i <= 5) {
sum += i;
output2 += `Iterasi ${i}: sum = ${sum}\n`;
i++;
}
[Link]('hasil2').innerHTML =
`<pre>${output2}</pre>`;

// Contoh 3: For...of untuk array


let buah = ["apel", "jeruk", "mangga", "pisang"];
let output3 = "Buah-buahan:\n";
for (let b of buah) {
output3 += `- ${b}\n`;
}
// Gunakan for biasa untuk mendapat index
output3 += "\nDengan index:\n";
for (let i = 0; i < [Link]; i++) {
output3 += `${i + 1}. ${buah[i]}\n`;
}

[Link]('hasil3').innerHTML =
`<pre>${output3}</pre>`;
</script>
</body>
</html>

Tugas:

Buat program untuk menampilkan segitiga bintang

Buat program untuk mencari bilangan prima dari 1 sampai 50

Buat program untuk menghitung faktorial menggunakan loop

SESI 5: FUNGSI (FUNCTION)

Tujuan Sesi
Mahasiswa mampu membuat dan menggunakan fungsi untuk menyederhanakan kode.

Materi Teori
Fungsi: Blok kode yang dapat dipanggil berulang kali. Fungsi memiliki input (parameter) dan output (return).

Cara Mendefinisikan Fungsi:

Function declaration

Function expression

Arrow function

Praktikum
Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Fungsi</title>
<style>
body { font-family: Arial; margin: 20px; }
.hasil { margin: 10px 0; padding: 10px; background: #f0f0f0; }
</style>
</head>
<body>
<h1>Praktikum Fungsi</h1>

<div id="hasil1" class="hasil"></div>


<div id="hasil2" class="hasil"></div>
<div id="hasil3" class="hasil"></div>
<div id="hasil4" class="hasil"></div>

<script>
// Fungsi 1: Dasar tanpa parameter
function salam() {
return "Halo, selamat datang di praktikum JavaScript!";
}
[Link]('hasil1').textContent = salam();

// Fungsi 2: Dengan parameter


function hitung_luas_persegi(sisi) {
return sisi * sisi;
}
[Link]('hasil2').textContent =
`Luas persegi dengan sisi 5 = ${hitung_luas_persegi(5)}`;

// Fungsi 3: Dengan multiple parameter


function hitung_rata_rata(nilai1, nilai2, nilai3) {
return (nilai1 + nilai2 + nilai3) / 3;
}
let rata = hitung_rata_rata(80, 75, 85);
[Link]('hasil3').textContent =
`Rata-rata nilai = ${rata}`;

// Fungsi 4: Arrow function


const pangkat = (x, n) => {
return [Link](x, n);
};
[Link]('hasil4').textContent =
`2 pangkat 5 = ${pangkat(2, 5)}`;
// Fungsi 5: Dengan default parameter
function greet(name = "Tamu") {
return `Halo, ${name}!`;
}
[Link](greet()); // Menggunakan default
[Link](greet("Andi")); // Menggunakan parameter
</script>
</body>
</html>

Tugas:

Buat fungsi untuk konversi suhu dari Celsius ke Fahrenheit dan sebaliknya

Buat fungsi untuk mengecek apakah suatu angka adalah bilangan genap atau ganjil

Buat fungsi untuk menghitung faktorial

SESI 6: ARRAY DAN OBJECT

Tujuan Sesi
Mahasiswa mampu bekerja dengan struktur data array dan object.

Materi Teori
Array: Kumpulan data terurut yang diakses dengan index (dimulai dari 0).

Object: Kumpulan data yang terdiri dari key-value pairs, menyimpan data dengan properti.

Praktikum
Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Array dan Object</title>
<style>
body { font-family: Arial; margin: 20px; }
.hasil { margin: 10px 0; padding: 10px; background: #f0f0f0; }
pre { background: #e8e8e8; padding: 10px; }
</style>
</head>
<body>
<h1>Praktikum Array dan Object</h1>

<div id="hasil1" class="hasil"></div>


<div id="hasil2" class="hasil"></div>
<div id="hasil3" class="hasil"></div>

<script>
// ARRAY
let nilai = [85, 90, 78, 95, 88];

// Akses elemen
[Link]("Nilai pertama:", nilai[0]);
[Link]("Panjang array:", [Link]);

// Method array
[Link](92); // Tambah elemen di akhir
[Link](); // Hapus elemen terakhir
[Link](nilai);

// Hitung rata-rata
let jumlah = 0;
for (let v of nilai) {
jumlah += v;
}
let rata = jumlah / [Link];
[Link]('hasil1').textContent =
`Array nilai: [${nilai}]\nRata-rata: ${[Link](2)}`;

// Filter nilai > 80


let nilaiTinggi = [Link](function(n) {
return n > 80;
} );
[Link]("Nilai > 80:", nilaiTinggi);
// OBJECT
let mahasiswa = {
nama: "Andi Pratama",
nim: "2021001",
semester: 3,
aktif: true,
nilai_rata: 3.5,
hobi: ["programming", "gaming", "membaca"],
alamat: {
jalan: "Jl. Merdeka No. 123",
kota: "Jakarta",
provinsi: "DKI Jakarta"
}
};

// Akses properti
let info = `Nama: ${[Link]}\n`;
info += `NIM: ${[Link]}\n`;
info += `Semester: ${[Link]}\n`;
info += `Kota: ${[Link]}`;

[Link]('hasil2').innerHTML =
`<pre>${info}</pre>`;

// Array of objects
let daftar_mahasiswa = [
{ nama: "Andi", nim: "2021001", nilai: 85 },
{ nama: "Budi", nim: "2021002", nilai: 90 },
{ nama: "Citra", nim: "2021003", nilai: 78 }
];

let tabel = "Daftar Mahasiswa:\n";


daftar_mahasiswa.forEach(function(m) {
tabel += `${[Link]} (${[Link]}): ${[Link]}\n`;
} );

[Link]('hasil3').innerHTML =
`<pre>${tabel}</pre>`;
</script>
</body>
</html>

Tugas:

Buat array berisikan 10 nama teman, kemudian tampilkan dengan loop

Buat object untuk menyimpan data produk (nama, harga, stok), kemudian akses dan tampilkan
Buat array of objects untuk daftar buku dan tampilkan informasinya

SESI 7: DOM MANIPULATION DAN EVENT

Tujuan Sesi
Mahasiswa mampu memanipulasi DOM dan menangani event dari user.

Materi Teori
DOM (Document Object Model): Representasi struktur HTML dalam bentuk tree yang dapat dimanipulasi
dengan JavaScript.

Event: Peristiwa yang terjadi saat interaksi user (klik, hover, input, dll).

Praktikum
Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>DOM Manipulation dan Event</title>
<style>
body { font-family: Arial; margin: 20px; }
button { padding: 10px 20px; margin: 5px; cursor: pointer; }
input { padding: 8px; margin: 5px; }
#output { margin: 20px 0; padding: 15px; background: #f0f0f0; min-height: 50px; }
.highlight { background: yellow; padding: 5px; }
</style>
</head>
<body>
<h1>Praktikum DOM dan Event</h1>

<!-- Form Input -->


<div>
<label>Masukkan Nama:</label>
<input type="text" id="inputNama" placeholder="Nama Anda">
<button onclick="tampilkanNama()">Tampilkan</button>
</div>

<hr>

<!-- Counter -->


<div>
<p>Counter: <span id="counter">0</span></p>
<button onclick="tambahCounter()">+1</button>
<button onclick="kurangiCounter()">-1</button>
<button onclick="resetCounter()">Reset</button>
</div>

<hr>

<!-- List Dinamis -->


<div>
<input type="text" id="inputItem" placeholder="Tambah item">
<button onclick="tambahItem()">Tambah</button>
<ul id="daftarItem">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>

<hr>
<!-- Output -->
<div id="output"></div>

<script>
// Counter global
let count = 0;

// Fungsi 1: Manipulasi text


function tampilkanNama() {
let nama = [Link]('inputNama').value;
let output = [Link]('output');

if (nama === '') {


[Link] = '<p style="color: red;">Nama tidak boleh kosong!</p>';
} else {
[Link] = `<p>Halo, <span class="highlight">${nama}</span>!</p>`;
}
}

// Fungsi 2: Counter
function tambahCounter() {
count++;
[Link]('counter').textContent = count;
}

function kurangiCounter() {
count--;
[Link]('counter').textContent = count;
}

function resetCounter() {
count = 0;
[Link]('counter').textContent = count;
}

// Fungsi 3: Tambah item ke list


function tambahItem() {
let input = [Link]('inputItem');
let item = [Link];

if (item !== '') {


let list = [Link]('daftarItem');
let li = [Link]('li');
[Link] = item;
[Link](li);
[Link] = ''; // Clear input
}
}

// Event listener alternatif


[Link]('inputNama').addEventListener('keypress', function(e) {
if ([Link] === 'Enter') {
tampilkanNama();
}
} );
</script>
</body>
</html>

Tugas:

Buat form validasi untuk input email

Buat aplikasi todo list sederhana dengan tombol tambah dan hapus

Buat toggle theme (dark/light mode) dengan tombol

SESI 8: FORM VALIDATION DAN PROJECT AKHIR

Tujuan Sesi
Mahasiswa mengaplikasikan semua konsep yang telah dipelajari dalam sebuah project terintegrasi.

Praktikum: Aplikasi Kalkulator Sederhana


Buat file [Link] :

html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kalkulator Sederhana</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
width: 300px;
}
h1 { text-align: center; margin-bottom: 20px; font-size: 24px; }
.input-group {
margin-bottom: 15px;
}
label { display: block; margin-bottom: 5px; font-weight: bold; }
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
input:focus { outline: none; border-color: #667eea; }
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
button:hover { background: #764ba2; }
.result {
margin-top: 20px;
padding: 15px;
background: #f0f0f0;
border-radius: 5px;
text-align: center;
display: none;
}
.[Link] { display: block; }
.result-value {
font-size: 28px;
font-weight: bold;
color: #667eea;
}
.error {
color: red;
margin-top: 10px;
display: none;
}
.[Link] { display: block; }
</style>
</head>
<body>
<div class="container">
<h1>🧮 Kalkulator</h1>

<div class="input-group">
<label>Angka Pertama:</label>
<input type="number" id="angka1" placeholder="Masukkan angka">
</div>

<div class="input-group">
<label>Operasi:</label>
<select id="operasi">
<option value="tambah">+ Tambah</option>
<option value="kurang">- Kurang</option>
<option value="kali">× Kali</option>
<option value="bagi">÷ Bagi</option>
</select>
</div>

<div class="input-group">
<label>Angka Kedua:</label>
<input type="number" id="angka2" placeholder="Masukkan angka">
</div>

<button onclick="hitung()">Hitung</button>

<div class="result" id="result">


<p>Hasil:</p>
<div class="result-value" id="hasilNilai">0</div>
</div>

<div class="error" id="error"></div>


</div>

<script>
function hitung() {
// Ambil nilai input
let a = parseFloat([Link]('angka1').value);
let b = parseFloat([Link]('angka2').value);
let op = [Link]('operasi').value;

// Reset error
let errorDiv = [Link]('error');
[Link]('show');

// Validasi
if (isNaN(a) || isNaN(b)) {
[Link] = 'Harap masukkan angka dengan benar!';
[Link]('show');
[Link]('result').[Link]('show');
return;
}

// Hitung berdasarkan operasi


let hasil;
switch(op) {
case 'tambah':
hasil = a + b;
break;
case 'kurang':
hasil = a - b;
break;
case 'kali':
hasil = a * b;
break;
case 'bagi':
if (b === 0) {
[Link] = 'Tidak boleh membagi dengan 0!';
[Link]('show');
[Link]('result').[Link]('show');
return;
}
hasil = a / b;
break;
}

// Tampilkan hasil
[Link]('hasilNilai').textContent = [Link](2);
[Link]('result').[Link]('show');
}

// Allow Enter key untuk menghitung


[Link]('angka2').addEventListener('keypress', function(e) {
if ([Link] === 'Enter') {
hitung();
}
} );
</script>
</body>
</html>

Tugas Akhir (Project):

Pilih salah satu dari berikut untuk dikerjakan sebagai project akhir:

1. Aplikasi Daftar Nilai Siswa


Input: nama siswa, nilai (minimal 3 mata pelajaran)

Output: rata-rata, grade, dan status kelulusan

Fitur: tambah/hapus siswa, urutkan berdasarkan nilai

2. Aplikasi Konverter Unit


Konversi: panjang (m, km, cm), berat (kg, gram), suhu (C, F)

Interface yang user-friendly dengan dropdown

Real-time conversion

3. Quiz Interaktif
Minimal 10 pertanyaan multiple choice

Skor otomatis
Tampilkan jawaban benar/salah

Persentase hasil akhir

KRITERIA PENILAIAN
Aspek Bobot Keterangan

Ketepatan Konsep 25% Pemahaman dan penerapan konsep JS dengan benar

Fungsionalitas 30% Program berjalan sesuai spesifikasi

Code Quality 20% Kode rapi, terstruktur, dan mudah dipahami

User Interface 15% Tampilan menarik dan user-friendly

Dokumentasi 10% Komentar kode dan penjelasan jelas


 

TIPS DEBUGGING
1. Gunakan Console
F12 → Console tab

Gunakan [Link]() untuk cek nilai variabel

Baca pesan error dengan teliti

2. Gunakan Debugger
F12 → Sources tab

Breakpoint untuk pause eksekusi

Step through untuk lihat alur program

3. Common Errors
TypeError: variabel atau method tidak ada

ReferenceError: variabel tidak dideklarasikan

SyntaxError: kesalahan penulisan kode

RESOURCES TAMBAHAN
Dokumentasi Online:

MDN Web Docs: [Link]

W3Schools: [Link]
[Link]: [Link]

Tools Berguna:

VS Code

Chrome DevTools

JSFiddle untuk testing cepat

GitHub untuk version control

CHECKLIST PEMBELAJARAN
Pastikan Anda telah memahami:

Deklarasi dan penggunaan variabel (let, const)


Tipe data primitif dan operator
If-else dan switch statement
Loop (for, while, for...of)
Fungsi dan parameter
Array dan method array
Object dan nested object
DOM selection dan manipulation
Event handling
Form validation
Template literal
Arrow function
Scope dan closure (bonus)

CATATAN PENTING
Praktik secara konsisten untuk menguasai konsep

Jangan hanya copy-paste, pahami setiap baris kode

Coba modifikasi dan eksperimen dengan kode yang ada

Buat proyek kecil untuk mengkonsolidasikan pembelajaran

Manfaatkan console untuk debugging

Dibuat untuk: Mahasiswa Semester 3 Teknologi Informasi


Versi: 1.0
Tahun: 2024

Anda mungkin juga menyukai