Praktikum JavaScript Next Gen
Mengenal fitur modern JavaScript (ES6+) dan penerapannya dalam pengembangan web
Tujuan Praktikum
Setelah menyelesaikan praktikum ini, Kalian diharapkan mampu:
- Memahami fitur-fitur modern JavaScript (ES6+)
- Menguasai penggunaan let dan const untuk deklarasi variabel
- Mengimplementasikan arrow functions dalam kode JavaScript
- Menerapkan destructuring, rest dan spread operators
- Menggunakan template literals dengan efektif
- Mengenal dan mengimplementasikan modules dan import/export
- Menguasai metode array modern dan higher-order functions
- Menggunakan Promise dan async/await untuk operasi asinkron
Pengenalan JavaScript Next Gen
JavaScript Next Gen
JavaScript Next Gen mengacu pada fitur-fitur modern dari JavaScript yang diperkenalkan dalam ECMAScript 2015 (ES6) dan versi-versi berikutnya. Fitur-fitur ini telah merevolusi cara pengembang menulis kode JavaScript, membuat kode menjadi lebih bersih, ekspresif, dan mudah dipelihara.
Fitur Utama yang Akan Dipelajari
| Fitur | Deskripsi |
|---|---|
| Let dan Const | Cara baru untuk mendeklarasikan variabel dengan scope yang lebih baik |
| Arrow Functions | Sintaks yang lebih ringkas untuk mendefinisikan fungsi |
| Template Literals | Cara baru untuk membuat string dengan interpolasi |
| Destructuring | Ekstraksi nilai dari array dan objek dengan cara yang efisien |
| Spread dan Rest Operators | Cara baru untuk bekerja dengan array dan objek |
| Default Parameters | Nilai default untuk parameter fungsi |
| Classes | Sintaks berorientasi objek untuk JavaScript |
| Modules | Sistem untuk mengimpor dan mengekspor kode |
| Promise dan Async/Await | Cara baru untuk menangani operasi asinkron |
JavaScript Compatibility
Meskipun sebagian besar browser modern telah mendukung fitur ES6+, beberapa browser lama mungkin tidak mendukungnya. Dalam lingkungan produksi, sering digunakan transpiler seperti Babel untuk mengkonversi kode ES6+ menjadi ES5 yang memiliki kompatibilitas lebih luas.
Alat dan Bahan
Untuk mengikuti praktikum ini, Kalian memerlukan:
- Browser Web: Chrome, Firefox, atau Edge (versi terbaru)
- Code Editor: Visual Studio Code, Sublime Text, atau editor kode lainnya
- Node.js: (Opsional) Untuk menjalankan JavaScript di luar browser
Rekomendasi
Kami menyarankan menggunakan Visual Studio Code dengan ekstensi-ekstensi berikut untuk pengalaman pengembangan yang lebih baik:
- ESLint - Untuk membantu menemukan dan memperbaiki masalah dalam kode JavaScript
- Prettier - Untuk memformat kode secara otomatis
- JavaScript (ES6) code snippets - Untuk mempercepat penulisan kode ES6
- LiveServer - Untuk melihat perubahan langsung di browser
Materi Praktikum
Setup Project
Membuat struktur project dan file dasar
Variabel & Arrow Functions
Let, const, arrow functions, dan template literals
Destructuring & Operators
Destructuring, spread, dan rest operators
Classes & Object Literals
Default parameters, classes, dan enhanced object literals
Array Methods
Modern array methods dan higher-order functions
Async Programming
Promise dan async/await untuk operasi asinkron
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_pertemuan4 - Setiap folder berisi semua file praktikum dan tugas untuk pertemuan tersebut
Deadline Pengumpulan
- Deadline: -
- Keterlambatan pengumpulan akan dikenakan pengurangan nilai sebesar 10% per hari
Tugas Praktikum
Aplikasi Personal Dashboard
Buatlah aplikasi personal dashboard sederhana yang menampilkan informasi yang Kalian pilih sendiri (misalnya jadwal kuliah, daftar tugas, catatan, atau informasi cuaca/waktu).
Persyaratan
- Interaktif: Pengguna harus dapat menambah, mengedit, atau menghapus informasi
- Penyimpanan Lokal: Gunakan localStorage untuk menyimpan data pengguna
- Fitur ES6+ Wajib:
- Gunakan
letdanconstsecara tepat untuk deklarasi variabel - Implementasikan minimal 3 arrow functions
- Gunakan template literals untuk rendering dinamis
- Gunakan Fungsi Asinkron (Pilih salah satu Async Await atau Promises)
- Ada implementasi Classes
- Gunakan
Kriteria Penilaian
| Aspek | Bobot |
|---|---|
| Fungsionalitas dan interaktivitas aplikasi | 30% |
| Implementasi fitur ES6+ | 25% |
| Penggunaan localStorage dan pengelolaan data | 20% |
| Desain UI dan UX | 15% |
| Dokumentasi dan kerapian kode | 10% |
Dokumentasi yang Diperlukan di Readme
- Penjelasan singkat tentang fungsi aplikasi dan fitur-fiturnya
- Screenshot aplikasi yang sudah jadi
- Daftar fitur ES6+ yang diimplementasikan