Daftar Isi

1. Pengantar JavaScript
2. Dasar-Dasar JavaScript
3. Struktur Kontrol dan Fungsi
4. Objek dan Array
5. Manipulasi DOM
6. Event Handling
7. Asynchronous JavaScript (Promise, Async/Await)
8. Proyek Nyata: To-Do List Interaktif
9. Sumber Belajar dan Channel Pembelajaran

1. Pengantar JavaScript

JavaScript adalah bahasa pemrograman yang sangat populer dan digunakan untuk membuat halaman web menjadi interaktif. Dengan JavaScript, Anda dapat membuat animasi, memvalidasi form, berkomunikasi dengan server, dan banyak lagi.

Dalam ebook ini, Anda akan belajar mulai dari dasar hingga membuat proyek nyata menggunakan JavaScript.

2. Dasar-Dasar JavaScript

Mari kita mulai dengan memahami variabel, tipe data, dan cara menampilkan output di JavaScript.

2.1 Variabel dan Tipe Data

Variabel digunakan untuk menyimpan data. Ada beberapa tipe data dasar seperti string , number , boolean , dan lain-lain.

let nama = "Budi";
const umur = 25;
let isStudent = true;

      

2.2 Menampilkan Output

Anda bisa menampilkan output menggunakan console.log() atau alert() .

console.log("Halo, dunia!");
alert("Selamat datang di JavaScript!");

      

3. Struktur Kontrol dan Fungsi

Struktur kontrol digunakan untuk mengatur alur program, seperti pengkondisian dan perulangan. Fungsi digunakan untuk mengelompokkan kode yang dapat dipanggil berulang kali.

3.1 Pengkondisian (if, else)

let nilai = 80;
if (nilai >= 75) {
  console.log("Lulus");
} else {
  console.log("Tidak lulus");
}

      

3.2 Perulangan (for, while)

for (let i = 1; i <= 5; i++) {
  console.log("Perulangan ke-" + i);
}

let j = 1;
while (j <= 5) {
  console.log("While loop ke-" + j);
  j++;
}

      

3.3 Fungsi

function sapa(nama) {
  return "Halo, " + nama + "!";
}

console.log(sapa("Andi"));

      

4. Objek dan Array

Objek dan array adalah struktur data penting dalam JavaScript untuk menyimpan kumpulan data.

4.1 Objek

Objek menyimpan data dalam bentuk pasangan key dan value.

let mahasiswa = {
  nama: "Sari",
  umur: 21,
  jurusan: "Teknik Informatika"
};

console.log(mahasiswa.nama); // Output: Sari

      

4.2 Array

Array menyimpan data dalam bentuk list yang berurutan.

let buah = ["apel", "jeruk", "pisang"];
console.log(buah[1]); // Output: jeruk

// Menambahkan elemen
buah.push("mangga");

      

5. Manipulasi DOM

DOM (Document Object Model) adalah struktur halaman web yang bisa dimanipulasi menggunakan JavaScript untuk membuat halaman menjadi dinamis.

5.1 Mengakses Elemen

// Mengambil elemen dengan id
const judul = document.getElementById("judul");

// Mengambil elemen dengan class
const items = document.getElementsByClassName("item");

// Mengambil elemen dengan query selector
const firstItem = document.querySelector(".item");

      

5.2 Mengubah Konten dan Style

const judul = document.getElementById("judul");
judul.textContent = "Judul Baru";
judul.style.color = "red";

      

6. Event Handling

Event adalah aksi yang terjadi pada halaman web, seperti klik tombol, input teks, dan lain-lain. Kita bisa menambahkan fungsi yang dijalankan saat event terjadi.

6.1 Menangani Event Klik

const tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
  alert("Tombol diklik!");
});

      

6.2 Event Input

const input = document.getElementById("inputNama");
input.addEventListener("input", function(event) {
  console.log("Input berubah: " + event.target.value);
});

      

7. Asynchronous JavaScript (Promise, Async/Await)

JavaScript dapat menjalankan kode secara asynchronous, artinya tidak harus menunggu proses selesai untuk menjalankan kode berikutnya. Ini penting untuk mengambil data dari server tanpa membuat halaman berhenti.

7.1 Promise

const janji = new Promise((resolve, reject) => {
  let sukses = true;
  if (sukses) {
    resolve("Berhasil!");
  } else {
    reject("Gagal!");
  }
});

janji.then((hasil) => console.log(hasil))
     .catch((error) => console.log(error));

      

7.2 Async/Await

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function tampilkan() {
  console.log("Mulai");
  await delay(2000);
  console.log("Selesai setelah 2 detik");
}

tampilkan();

      

8. Proyek Nyata: To-Do List Interaktif

Mari kita buat aplikasi To-Do List sederhana yang memungkinkan pengguna menambah, menghapus, dan menandai tugas selesai.

HTML Struktur

<div id="todoApp" class="max-w-md mx-auto bg-white p-6 rounded shadow">
  <h3 class="text-2xl font-semibold mb-4">To-Do List</h3>
  <input type="text" id="todoInput" placeholder="Tambah tugas..." class="border p-2 w-full rounded mb-4"/>
  <button id="addBtn" class="bg-indigo-600 text-white px-4 py-2 rounded w-full mb-4 hover:bg-indigo-700">Tambah</button>
  <ul id="todoList" class="list-disc pl-5 space-y-2"></ul>
</div>

      

JavaScript

const todoInput = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const todoList = document.getElementById("todoList");

addBtn.addEventListener("click", () => {
  const task = todoInput.value.trim();
  if (task !== "") {
    const li = document.createElement("li");
    li.className = "flex justify-between items-center";

    const span = document.createElement("span");
    span.textContent = task;
    span.className = "cursor-pointer";
    span.addEventListener("click", () => {
      span.classList.toggle("line-through");
      span.classList.toggle("text-gray-400");
    });

    const delBtn = document.createElement("button");
    delBtn.innerHTML = "×";
    delBtn.className = "text-red-600 font-bold ml-4 hover:text-red-800";
    delBtn.addEventListener("click", () => {
      todoList.removeChild(li);
    });

    li.appendChild(span);
    li.appendChild(delBtn);
    todoList.appendChild(li);

    todoInput.value = "";
    todoInput.focus();
  }
});

      

Demo Visual

9. Sumber Belajar dan Channel Pembelajaran

Berikut beberapa sumber dan channel yang sangat membantu untuk belajar JavaScript lebih dalam:

• MDN Web Docs - JavaScript (Bahasa Indonesia)
• Academind - YouTube Channel (Tutorial JavaScript dan Framework)
• Traversy Media - YouTube Channel (Tutorial Lengkap Web Development)
• freeCodeCamp - JavaScript Algorithms and Data Structures
• The Modern JavaScript Tutorial (javascript.info)

Sumber Kode dan Repositori

Anda juga bisa melihat contoh kode dan proyek nyata di GitHub:

• JavaScript Algorithms and Data Structures - GitHub
• You Don't Know JS (Book Series) - GitHub