Kuasai JavaScript: Kursus Master Modern dari Awal Hingga Mahir

Daftar Isi

Pengantar JavaScript
Dasar-dasar JavaScript
Fungsi dan Scope
Objek dan Array
Manipulasi DOM
Event Handling
Pemrograman Asinkron
Modul dan Struktur Proyek
Fitur Modern ES6+
Praktik Membuat Aplikasi Sederhana
Kesimpulan dan Langkah Selanjutnya

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. Kursus ini akan membawa Anda dari pemahaman dasar hingga mahir dalam JavaScript modern.

Ilustrasi layar komputer dengan kode JavaScript berwarna-warni dan ikon JavaScript di latar belakang

Dasar-dasar JavaScript

Di bagian ini, kita akan mempelajari tipe data, variabel, operator, dan struktur kontrol seperti if, switch, dan loop.

Tipe Data dan Variabel

JavaScript memiliki beberapa tipe data seperti string , number , boolean , null , undefined , dan object . Variabel dapat dideklarasikan menggunakan var , let , atau const .

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

Struktur Kontrol

Struktur kontrol digunakan untuk mengatur alur program.

if (umur >= 18) {
  console.log("Dewasa");
} else {
  console.log("Belum dewasa");
}

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

Fungsi dan Scope

Fungsi adalah blok kode yang dapat digunakan kembali. Scope menentukan cakupan variabel dalam fungsi atau blok kode.

Membuat Fungsi

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

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

Scope Variabel

Variabel yang dideklarasikan dengan let atau const memiliki scope blok, sedangkan var memiliki scope fungsi.

function contohScope() {
  if (true) {
    let x = 10;
    var y = 20;
  }
  console.log(y); // 20
  // console.log(x); // Error: x tidak terdefinisi di sini
}

Objek dan Array

Objek dan array adalah struktur data penting dalam JavaScript.

Objek

Objek menyimpan data dalam bentuk pasangan key-value.

const orang = {
  nama: "Sari",
  umur: 30,
  pekerjaan: "Guru"
};

console.log(orang.nama); // Sari

Array

Array adalah daftar terurut dari nilai.

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

Manipulasi DOM

DOM (Document Object Model) memungkinkan kita mengubah konten dan struktur halaman web secara dinamis.

Ilustrasi diagram DOM dengan elemen HTML yang diubah menggunakan JavaScript

Memilih Elemen

const judul = document.getElementById("judul");
const paragraf = document.querySelector(".paragraf");

Mengubah Konten

judul.textContent = "Judul Baru";
paragraf.innerHTML = "<strong>Teks Tebal</strong>";

Event Handling

Event adalah aksi yang terjadi pada halaman web, seperti klik, hover, atau input.

Menangani Event

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

Ilustrasi tangan mengklik tombol pada layar komputer dengan efek event JavaScript

Pemrograman Asinkron

JavaScript mendukung pemrograman asinkron untuk menangani operasi yang memakan waktu seperti pengambilan data dari server.

Callback

function ambilData(callback) {
  setTimeout(() => {
    callback("Data diterima");
  }, 2000);
}

ambilData(function(data) {
  console.log(data);
});

Promise

const janji = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Berhasil!");
  }, 2000);
});

janji.then((hasil) => {
  console.log(hasil);
});

Async/Await

async function tampilkanData() {
  const hasil = await janji;
  console.log(hasil);
}

tampilkanData();

Modul dan Struktur Proyek

Modul membantu mengorganisasi kode menjadi bagian-bagian yang terpisah dan mudah dikelola.

Membuat Modul

// math.js
export function tambah(a, b) {
  return a + b;
}

// main.js
import { tambah } from './math.js';
console.log(tambah(2, 3)); // 5

Ilustrasi diagram struktur folder proyek JavaScript modern dengan modul-modul terpisah

Fitur Modern ES6+

ES6 dan versi lebih baru membawa banyak fitur baru yang memudahkan penulisan kode JavaScript.

Arrow Function

const kali = (a, b) => a * b;
console.log(kali(4, 5)); // 20

Destructuring

const user = { nama: "Rina", umur: 28 };
const { nama, umur } = user;
console.log(nama, umur); // Rina 28

Template Literals

const pesan = `Halo, ${nama}! Umur kamu ${umur} tahun.`;
console.log(pesan);

Praktik Membuat Aplikasi Sederhana

Kita akan membuat aplikasi penghitung sederhana yang dapat menambah dan mengurangi angka.

Ilustrasi aplikasi penghitung sederhana dengan tombol tambah dan kurang serta tampilan angka di layar

HTML

<div id="app" class="text-center space-y-4">
  <h3 class="text-2xl font-bold">Penghitung</h3>
  <div id="angka" class="text-4xl font-extrabold">0</div>
  <div class="space-x-4">
    <button id="tambah" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">Tambah</button>
    <button id="kurang" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Kurang</button>
  </div>
</div>

JavaScript

const angkaEl = document.getElementById("angka");
const tambahBtn = document.getElementById("tambah");
const kurangBtn = document.getElementById("kurang");

let nilai = 0;

tambahBtn.addEventListener("click", () => {
  nilai++;
  angkaEl.textContent = nilai;
});

kurangBtn.addEventListener("click", () => {
  nilai--;
  angkaEl.textContent = nilai;
});

Kesimpulan dan Langkah Selanjutnya

Anda telah mempelajari dasar hingga fitur modern JavaScript. Selanjutnya, teruslah berlatih dengan membuat proyek nyata, mempelajari framework populer seperti React atau Vue, dan mendalami konsep lanjutan seperti TypeScript dan testing.