Praktikum JavaScript Dasar

Tujuan Praktikum

Setelah menyelesaikan praktikum ini, Kalian diharapkan mampu:

• Memahami konsep dasar JavaScript sebagai bahasa pemrograman web
• Menguasai penggunaan variabel, tipe data, dan operator dalam JavaScript
• Mengimplementasikan struktur kendali (conditionals dan loops)
• Membuat dan menggunakan fungsi dalam JavaScript
• Mengerti cara menangani event dan memanipulasi DOM

Dasar Teori

Karakteristik Utama JavaScript

Engine JavaScript

Engine JavaScript adalah program yang mengeksekusi kode JavaScript. Browser web modern memiliki engine JavaScript terintegrasi.

• V8: Dikembangkan oleh Google, digunakan di Chrome dan Node.js
• SpiderMonkey: Engine pertama, dikembangkan oleh Netscape, sekarang digunakan di Firefox
• JavaScriptCore: Dikembangkan oleh Apple untuk Safari
• Chakra: Dikembangkan oleh Microsoft untuk Edge (versi lama)

Dasar-dasar JavaScript

JavaScript memiliki 3 cara untuk mendeklarasikan variabel:

• var: Cara lama, memiliki cakupan fungsi atau global
• let: Diperkenalkan di ES6, memiliki cakupan blok
• const: Diperkenalkan di ES6, untuk nilai yang tidak berubah

Tipe Data Primitif

Number, String, Boolean, Undefined, Null, Symbol, dan BigInt

Ekosistem JavaScript Modern

JavaScript modern tidak hanya terbatas pada browser, tetapi telah berkembang menjadi ekosistem lengkap untuk pengembangan berbagai platform:

• Server-side: Node.js, Deno
• Mobile: React Native, Ionic
• Desktop: Electron, NW.js
• IoT: Johnny-Five, Cylon.js
• Game: Phaser, Three.js
• AI/ML: TensorFlow.js, Brain.js

Fitur JavaScript Modern

Document Object Model (DOM)

DOM adalah representasi terstruktur dari dokumen HTML yang memungkinkan JavaScript berinteraksi dan memanipulasi konten halaman web.

// Mengakses elemen
const element = document.getElementById('myId');

// Mengubah konten
element.innerHTML = 'New content';

// Menambah event listener
element.addEventListener('click', function() {
  alert('Element clicked!');
});

API Web Modern

JavaScript modern menawarkan berbagai API Web yang memungkinkan pengembangan aplikasi yang kaya fitur:

• Fetch API: Mengirim permintaan jaringan
• Web Storage: Menyimpan data di browser
• Geolocation: Mendapatkan lokasi pengguna
• Canvas: Menggambar grafik dinamis
• WebSockets: Komunikasi dua arah real-time
• IndexedDB: Database di sisi klien

Prasyarat

Sebelum memulai praktikum ini, pastikan Kalian memiliki pengetahuan dasar tentang:

• HTML dan CSS dasar
• Konsep logika pemrograman
• Penggunaan browser modern (Chrome, Firefox, dll.)

Materi Praktikum

Format Pengumpulan

Direktori GitHub

• Buat repository dengan format: pemrograman_web_itera_[NIM]
• Contoh: pemrograman_web_itera_119140001

Struktur Folder

• Buat folder per pertemuan dengan format: [NAMA]_[NIM]_pertemuan[X]
• Contoh: johndoe_119140001_pertemuan3
• Setiap folder berisi semua file praktikum dan tugas untuk pertemuan tersebut

Deadline Pengumpulan

• Deadline: Sabtu, 18 Oktober 2025, pukul 14:59 WIB
• Keterlambatan pengumpulan akan dikenakan pengurangan nilai sebesar 10% per hari

Tugas Praktikum

Aplikasi Manajemen Tugas Mahasiswa

Buatlah aplikasi manajemen tugas yang membantu mahasiswa mengelola aktivitas akademik mereka. Aplikasi ini harus interaktif, fungsional, dan menyimpan data secara lokal.

Persyaratan

• Interaktif: Pengguna harus dapat menambah, mengedit, menandai selesai, dan menghapus tugas
• Penyimpanan Lokal: Gunakan localStorage untuk menyimpan data pengguna
• Validasi Form: Implementasikan validasi untuk input pengguna (nama tugas tidak boleh kosong, deadline harus valid, dll.)
• Fitur Wajib:
  • Menambahkan tugas baru dengan informasi: nama tugas, mata kuliah, deadline
  • Menandai tugas sebagai selesai/belum selesai
  • Menghapus tugas yang sudah tidak diperlukan
  • Filter atau pencarian tugas (berdasarkan status atau mata kuliah)
  • Menampilkan jumlah tugas yang belum selesai
  • Validasi form untuk memastikan data yang dimasukkan valid

Kriteria Penilaian

Dokumentasi yang Diperlukan di Readme

• Penjelasan singkat tentang fungsi aplikasi dan fitur-fiturnya
• Screenshot aplikasi yang sudah jadi (minimal 3 screenshot menunjukkan berbagai fitur)
• Cara menjalankan aplikasi
• Daftar fitur yang telah diimplementasikan
• Penjelasan teknis tentang penggunaan localStorage dan validasi form

Submit Tugas

Submit Tugas Praktikum 1