| Objectives | Key Result | Time Goal |
|---|---|---|
| 1) Memahami Dasar JavaScript | 1.1) Memahami definisi JavaScript dan perannya dalam web | 5 menit |
| 1.2) Menambahkan file JavaScript ke HTML | - | |
| 1.3) Menjalankan JavaScript di browser | - | |
| 2) Memahami Variabel & Tipe Data | 2.1) Menggunakan let dan const |
10 menit |
| 2.2) Memahami tipe data dasar | 10 menit | |
| 3) Menguasai Function & ES6 Syntax | 3.1) Membuat function dan arrow function | 15 menit |
| 3.2) Menggunakan template literal | 5 menit | |
| 3.3) Menggunakan destructuring & spread operator | 15 menit | |
| 4) Menguasai Logic & Looping | 4.1) Menggunakan if/else |
10 menit |
4.2) Menggunakan loop (for, while) |
10 menit | |
4.3) Menggunakan array methods (map, filter) |
20 menit | |
| 5) Menguasai DOM Manipulation | 5.1) Mengambil element HTML | 15 menit |
| 5.2) Mengubah isi HTML | 15 menit | |
| 5.3) Menangani event | 20 menit | |
| 6) Menguasai Async JavaScript | 6.1) Memahami Promise | 20 menit |
| 6.2) Menggunakan async/await | 20 menit | |
| 6.3) Menggunakan Fetch API | 20 menit | |
| 7) Implementasi Nyata JavaScript | 7.1) Membuat mini project sederhana | 1–2 jam |
| Total: ± 4–5 jam |
1.1) Memahami definisi JavaScript dan bagaimana digunakan dalam web
JavaScript adalah bahasa pemrograman untuk membuat website menjadi interaktif.
1.2) Menambahkan JavaScript ke HTML
<script>
console.log("Hello World");
</script>
1.3) Menjalankan JavaScript di browser
Gunakan Inspect → Console
2.1) Menggunakan let dan const
let age = 20;
const name = "John";
2.2) Tipe data dasar
const text = "Hello";
const number = 10;
const isTrue = true;
const arr = [1, 2, 3];
const obj = { name: "John" };
3.1) Function dan arrow function
function greet(name) {
return "Hello " + name;
}
const greetArrow = (name) => `Hello ${name}`;
3.2) Template literal
const name = "Anna";
console.log(`Hello ${name}`);
3.3) Destructuring & Spread
const user = { name: "Anna", age: 22 };
const { name } = user;
const arr = [1, 2];
const newArr = [...arr, 3];
4.1) if else
if (age > 18) {
console.log("Adult");
} else {
console.log("Minor");
}
4.2) Loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
4.3) Array methods
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
const filtered = nums.filter(n => n > 1);
5.1) Mengambil element
const btn = document.querySelector("button");
5.2) Mengubah isi HTML
btn.innerText = "Click Me!";
5.3) Event
btn.addEventListener("click", () => {
alert("Clicked!");
});
6.1) Promise
const promise = new Promise(resolve => {
resolve("Done");
});
6.2) async/await
const load = async () => {
const result = await promise;
console.log(result);
};
6.3) Fetch API
fetch("https://jsonplaceholder.typicode.com/posts")
.then(res => res.json())
.then(data => console.log(data));
7.1) Mini Project
Buat: