JAVASCRIPT Iim Abdurrohim, M.T.
JAVASCRIPT
JavaScript adalah bahasa pemrograman yang terutama digunakan
untuk membuat halaman web menjadi interaktif. Ini adalah salah
satu dari tiga teknologi inti pengembangan web, bersama dengan
HTML (HyperText Markup Language) dan CSS (Cascading Style
Sheets).
JavaScript digunakan untuk menambah fungsionalitas dinamis ke
halaman web, seperti validasi form, manipulasi DOM (Document
Object Model), membuat animasi, dan mengelola event dari
pengguna.
BERIKUT INI ADALAH BEBERAPA KONSEP KUNCI
DAN DASAR-DASAR JAVASCRIPT:
1. Variabel dan Tipe Data
2. Operator
3. Fungsi
4. Manipulasi DOM
5. Event Handling
6. Pengkondisian
7. Looping
8. Asynchronous Programming (Callback, Promise, Async/Await)
9. Framework dan Library
10. Tools dan Environment
1. VARIABEL DAN TIPE DATA
JavaScript mendukung berbagai tipe data, seperti:
• Number: angka (misalnya, 42, 3.14)
• String: teks (misalnya, "Halo Dunia")
• Boolean: nilai benar atau salah (true, false)
• Array: kumpulan elemen (misalnya, [1, 2, 3])
• Object: kumpulan pasangan kunci-nilai (misalnya, { nama:
"Budi", umur: 25 })
UNTUK MENDEKLARASIKAN VARIABEL, ADA
BEBERAPA CARA:
• var: cara lama, lingkup global atau fungsi.
• let: variabel lingkup blok.
• const: variabel konstan yang tidak bisa diubah.
Contoh:
let nama = "Budi";
const umur = 25;
var status = true;
2. OPERATOR
JavaScript mendukung berbagai operator untuk melakukan operasi
pada variabel, seperti:
• Aritmatika: +, -, *, /, %
• Perbandingan: ==, !=, ===, !==, >, <, >=, <=
• Logika: && (AND), || (OR), ! (NOT)
Contoh:
let a = 10;
let b = 20;
let c = a + b; // 30
let isEqual = (a == b); // false
3. FUNGSI
Fungsi adalah blok kode yang dapat dijalankan kapan saja dan
dapat menerima input berupa parameter dan mengembalikan
nilai.
Contoh:
function salam(nama) {
return "Halo, " + nama;
}
let pesan = salam("Andi"); // Halo, Andi
Fungsi juga bisa dideklarasikan menggunakan arrow function:
const salamArrow = (nama) => "Halo, " + nama;
4. MANIPULASI DOM
DOM (Document Object Model) adalah representasi struktur
halaman web. JavaScript bisa digunakan untuk memanipulasi
elemen DOM, seperti mengubah teks, menambah atau
menghapus elemen, serta menangani event.
Contoh mengambil elemen dan mengubah teksnya:
let element = [Link]("judul");
[Link] = "Judul Baru";
5. EVENT HANDLING
JavaScript mendukung berbagai event yang bisa digunakan untuk merespon
tindakan pengguna, seperti klik, input, atau hover.
Contoh event listener untuk tombol klik:
let tombol = [Link]("myButton");
[Link]("click", function() {
alert("Tombol diklik!");
});
6. PENGKONDISIAN
JavaScript mendukung struktur kontrol untuk pengambilan keputusan
menggunakan pernyataan kondisional seperti if, else if, else, dan
switch.
Contoh:
let angka = 10;
if (angka > 0) {
[Link]("Angka positif");
} else if (angka < 0) {
[Link]("Angka negatif");
} else {
[Link]("Angka nol");
}
7. LOOPING
JavaScript mendukung beberapa cara untuk melakukan pengulangan, seperti for,
while, dan do-while.
Contoh:
for (let i = 0; i < 5; i++) {
[Link](i); // 0, 1, 2, 3, 4
}
8. ASYNCHRONOUS PROGRAMMING (CALLBACK,
PROMISE, ASYNC/AWAIT)
JavaScript memiliki kemampuan untuk menjalankan kode secara asynchronous,
terutama ketika bekerja dengan operasi yang memerlukan waktu lama seperti
pengambilan data dari server.
Callback: Fungsi yang dijalankan setelah fungsi lain selesai.
Promise: Objek yang mewakili hasil akhir dari operasi asynchronous.
Async/Await: Sintaks modern untuk menangani operasi asynchronous dengan lebih mudah dibaca.
CONTOH PENGGUNAAN PROMISE:
let janji = new Promise(function(resolve, reject) {
let sukses = true;
if (sukses) {
resolve("Operasi berhasil");
} else {
reject("Operasi gagal");
}
});
[Link](function(result) {
[Link](result); // Operasi berhasil
}).catch(function(error) {
[Link](error);
});
CONTOH PENGGUNAAN ASYNC/AWAIT:
async function ambilData() {
let response = await fetch("[Link]
let data = await [Link]();
[Link](data);
}
ambilData();
9. FRAMEWORK DAN LIBRARY
JavaScript memiliki ekosistem yang sangat besar, dengan banyak library dan
framework yang memudahkan pengembangan aplikasi web modern. Beberapa yang
populer adalah:
•React: Library untuk membangun UI berbasis komponen.
•[Link]: Framework progresif untuk membangun UI interaktif.
•Angular: Framework yang kuat untuk pengembangan aplikasi web.
10. TOOLS DAN ENVIRONMENT
Untuk menulis dan menjalankan JavaScript, beberapa tools umum yang digunakan
termasuk:
Browser Developer Tools: Alat debugging dan inspeksi DOM pada browser (Chrome, Firefox).
[Link]: Lingkungan runtime JavaScript untuk mengeksekusi JavaScript di server.
JavaScript menjadi bahasa yang sangat penting dalam pengembangan web
modern, dengan kemampuan untuk menangani fungsionalitas di sisi klien (frontend)
dan server (backend dengan [Link]).
SOAL PILIHAN GANDA:
1. Apa output dari kode berikut?
a) True
b) false
c) undefined
d) Null
2. Fungsi berikut akan mengembalikan apa jika dipanggil dengan
multiply(2)(3)?
a) 6
b) NaN
c) undefined
d) TypeError
SOAL ESAI:
1. Jelaskan perbedaan antara var, let, dan const dalam JavaScript. Berikan contoh
situasi di mana masing-masing akan lebih cocok digunakan.
2. Apa itu event bubbling dan event capturing dalam JavaScript? Bagaimana cara
mencegah event bubbling menggunakan kode JavaScript?
SOAL PRAKTIKUM
Soal 1: Buat fungsi JavaScript yang mengembalikan semua bilangan ganjil dari
array input yang diberikan.
Soal 2: Buatlah fungsi untuk menghitung jumlah karakter vokal dalam sebuah string.