Daftar Isi

1. Pengantar JavaScript
2. Dasar-Dasar JavaScript
3. Fungsi dan Scope
4. Manipulasi DOM
5. Event Handling
6. Asynchronous JavaScript
7. Project Mini: To-Do List
8. Sumber Belajar dan Source Code

1. Pengantar JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Dengan JavaScript, Anda dapat membuat elemen web yang dinamis, seperti tombol yang merespon klik, animasi, validasi form, dan banyak lagi.

Dalam pelatihan ini, Anda akan belajar step by step mulai dari dasar hingga membuat project mini yang bisa langsung dipraktekkan.

2. Dasar-Dasar JavaScript

Mari kita mulai dengan memahami sintaks dasar JavaScript, tipe data, variabel, dan operator.

2.1 Variabel dan Tipe Data

Variabel digunakan untuk menyimpan data. JavaScript memiliki beberapa tipe data seperti string, number, boolean, null, dan undefined.

let nama = 'Budi';
const umur = 25;
var aktif = true;
      

2.2 Operator

Operator digunakan untuk melakukan operasi pada variabel dan nilai.

5 + 3  // hasil 8
10 - 4 // hasil 6
7 * 2  // hasil 14
9 / 3  // hasil 3
      

2.3 Struktur Kontrol

Struktur kontrol seperti if-else dan loop digunakan untuk mengatur alur program.

if (umur >= 18) {
  // kode jika benar
  console.log('Anda sudah dewasa');
} else {
  // kode jika salah
  console.log('Anda masih anak-anak');
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}
      

3. Fungsi dan Scope

Fungsi adalah blok kode yang dapat dipanggil berulang kali. Scope menentukan cakupan variabel.

3.1 Membuat Fungsi

function sapa(nama) {
  return `Halo, ${nama}!`;
}

console.log(sapa('Andi')); // Output: Halo, Andi!
      

3.2 Scope Variabel

Variabel yang dideklarasikan di dalam fungsi hanya bisa diakses di dalam fungsi tersebut (local scope).

function contohScope() {
  let lokal = 10;
  console.log(lokal);
}

contohScope(); // Output: 10
console.log(lokal); // Error: lokal tidak terdefinisi
      

4. Manipulasi DOM

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

4.1 Memilih Elemen

const judul = document.querySelector('h1');
console.log(judul.textContent);
      

4.2 Mengubah Konten dan Style

judul.textContent = 'Judul Baru';
judul.style.color = 'red';
      

4.3 Menambah Elemen Baru

const paragrafBaru = document.createElement('p');
paragrafBaru.textContent = 'Ini paragraf baru yang ditambahkan dengan JavaScript.';
document.body.appendChild(paragrafBaru);
      

5. 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.

5.1 Menangani Event Klik

const tombol = document.createElement('button');
tombol.textContent = 'Klik Saya';
document.body.appendChild(tombol);

tombol.addEventListener('click', () => {
  alert('Tombol telah diklik!');
});
      

5.2 Event Input

const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Ketik sesuatu...';
document.body.appendChild(input);

input.addEventListener('input', (e) => {
  console.log('Input saat ini: ' + e.target.value);
});
      

6. Asynchronous JavaScript

JavaScript dapat menjalankan kode secara asynchronous, misalnya mengambil data dari server tanpa harus reload halaman.

6.1 Callback

function ambilData(callback) {
  setTimeout(() => {
    callback('Data berhasil diambil');
  }, 2000);
}

ambilData((pesan) => {
  console.log(pesan);
});
      

6.2 Promise

function ambilDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data berhasil diambil dengan Promise');
    }, 2000);
  });
}

ambilDataPromise().then((pesan) => {
  console.log(pesan);
});
      

6.3 Async/Await

async function tampilkanData() {
  const pesan = await ambilDataPromise();
  console.log(pesan);
}

tampilkanData();
      

7. Project Mini: To-Do List

Mari kita buat aplikasi To-Do List sederhana menggunakan JavaScript, HTML, dan Tailwind CSS.

<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow">
  <h3 class="text-2xl font-bold mb-4 text-indigo-700">To-Do List</h3>
  <input id="todo-input" type="text" placeholder="Tambah tugas baru..." class="border border-gray-300 rounded px-3 py-2 w-full mb-4 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
  <button id="add-btn" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Tambah</button>
  <ul id="todo-list" class="mt-4 list-disc list-inside space-y-2"></ul>
</div>

<script>
  const input = document.getElementById('todo-input');
  const addBtn = document.getElementById('add-btn');
  const todoList = document.getElementById('todo-list');

  addBtn.addEventListener('click', () => {
    const task = input.value.trim();
    if (task !== '') {
      const li = document.createElement('li');
      li.textContent = task;
      li.classList.add('cursor-pointer', 'hover:line-through', 'transition', 'duration-300');
      li.addEventListener('click', () => {
        li.classList.toggle('line-through');
      });
      todoList.appendChild(li);
      input.value = '';
      input.focus();
    }
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      addBtn.click();
    }
  });
</script>
        

Penjelasan:
- Input untuk menulis tugas baru.
- Tombol "Tambah" untuk menambahkan tugas ke daftar.
- Daftar tugas yang bisa diklik untuk menandai selesai (garis coret).

Anda bisa menyalin kode di atas dan langsung mencobanya di browser.

8. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar tambahan dan channel yang direkomendasikan untuk memperdalam JavaScript dan web development:

• MDN Web Docs - JavaScript - Dokumentasi resmi dan lengkap tentang JavaScript.
• Academind (YouTube Channel) - Tutorial web development modern, termasuk JavaScript.
• Traversy Media (YouTube Channel) - Tutorial lengkap dan praktis tentang JavaScript dan framework terkait.
• freeCodeCamp - JavaScript Algorithms and Data Structures - Kursus interaktif gratis untuk belajar JavaScript.
• Source Code Pelatihan JavaScript Accelerated (GitHub) - Kumpulan source code lengkap dari pelatihan ini.

Selamat belajar dan terus praktik agar mahir dalam web development menggunakan JavaScript!