Materi JavaScript

Pelajari JavaScript untuk membuat halaman web interaktif

Apa itu JavaScript?

JavaScript adalah bahasa pemrograman yang dijalankan di browser untuk membuat halaman web interaktif. JavaScript dapat merespons aksi pengguna seperti klik, input, dan scroll.

Dengan JavaScript, Anda dapat mengubah konten HTML, mengatur gaya CSS, menangani event, dan berkomunikasi dengan server. JavaScript adalah bahasa yang sangat powerful dan fleksibel.

Cara Menggunakan JavaScript

1. Inline JavaScript

html

<button onclick="alert('Tombol diklik!')">Klik Saya</button>

2. Internal JavaScript

html

<script>
  console.log('Hello World');
  alert('Selamat datang!');
</script>

3. External JavaScript

html

<!-- Di file HTML -->
<script src="script.js"></script>

<!-- Di file script.js -->
console.log('File JavaScript eksternal');

Variable & Deklarasi

Variable adalah tempat menyimpan data. JavaScript memiliki 3 cara deklarasi variable: let, const, dan var.

javascript

// let - variable yang bisa diubah
let nama = "Alif";
nama = "Ahmad"; // Bisa diubah
console.log(nama); // "Ahmad"

// const - konstanta, tidak bisa diubah
const umur = 16;
// umur = 17; // Error!

// var - cara lama, tidak direkomendasikan
var kota = "Kediri";

// Tipe data
let angka = 42; // number
let teks = "Hello"; // string
let benar = true; // boolean
let kosong = null; // null
let tidak_terdefinisi; // undefined
let objek = { nama: "Alif" }; // object
let array = [1, 2, 3]; // array

Array & Method

Array adalah kumpulan data yang disimpan dalam satu variable.

javascript

// Membuat array
let buah = ["Apel", "Jeruk", "Mangga"];

// Mengakses elemen
console.log(buah[0]); // "Apel"
console.log(buah[1]); // "Jeruk"
console.log(buah.length); // 3

// Method array
buah.push("Pisang"); // Tambah di akhir
console.log(buah); // ["Apel", "Jeruk", "Mangga", "Pisang"]

buah.pop(); // Hapus di akhir
console.log(buah); // ["Apel", "Jeruk", "Mangga"]

buah.unshift("Nanas"); // Tambah di awal
console.log(buah); // ["Nanas", "Apel", "Jeruk", "Mangga"]

buah.shift(); // Hapus di awal
console.log(buah); // ["Apel", "Jeruk", "Mangga"]

// Looping array
for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

// forEach
buah.forEach(function(item) {
  console.log(item);
});

Function

javascript

// Function declaration
function sapa(nama) {
  return "Halo, " + nama;
}

console.log(sapa("Alif")); // "Halo, Alif"

// Function expression
const tambah = function(a, b) {
  return a + b;
};

console.log(tambah(5, 3)); // 8

// Arrow function (ES6)
const kali = (a, b) => {
  return a * b;
};

console.log(kali(4, 5)); // 20

// Arrow function singkat
const kurang = (a, b) => a - b;
console.log(kurang(10, 3)); // 7

Event Handling

javascript

// Click event
document.getElementById("tombol").addEventListener("click", function() {
  alert("Tombol diklik!");
});

// Input event
document.getElementById("input").addEventListener("input", function(e) {
  console.log(e.target.value);
});

// Submit event
document.getElementById("form").addEventListener("submit", function(e) {
  e.preventDefault(); // Cegah reload halaman
  console.log("Form dikirim");
});

// Mouse events
document.getElementById("box").addEventListener("mouseover", function() {
  console.log("Mouse masuk");
});

document.getElementById("box").addEventListener("mouseout", function() {
  console.log("Mouse keluar");
});

// Keyboard events
document.addEventListener("keydown", function(e) {
  console.log("Tombol ditekan: " + e.key);
});

DOM Manipulation

javascript

// Mengakses elemen
const element = document.getElementById("id");
const elements = document.getElementsByClassName("class");
const element2 = document.querySelector(".class");
const elements2 = document.querySelectorAll(".class");

// Mengubah konten
element.textContent = "Teks baru";
element.innerHTML = "<strong>HTML baru</strong>";

// Mengubah atribut
element.setAttribute("class", "class-baru");
element.id = "id-baru";
element.style.color = "red";

// Menambah class
element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active");

// Membuat elemen baru
const div = document.createElement("div");
div.textContent = "Elemen baru";
document.body.appendChild(div);

// Menghapus elemen
element.remove();

Siap Berlatih?

Setelah mempelajari materi JavaScript, coba latihan soal untuk menguji pemahaman Anda.

Mulai Latihan Soal