JavaScript adalah bahasa pemrograman dinamis yang digunakan untuk pengembangan web interaktif. Dikembangkan pertama kali oleh Netscape pada tahun 1995, JavaScript kini menjadi bagian inti dari pengembangan web bersama HTML dan CSS.
JavaScript adalah bahasa pemrograman client-side yang berjalan di browser dan digunakan untuk:
JavaScript adalah bahasa yang sangat fleksibel dan kuat. Dengan menguasai dasar-dasarnya dan memahami konsep-konsep lanjutan seperti OOP, asynchronous programming, serta DOM manipulation, Anda dapat membuat aplikasi web yang kaya fitur dan interaktif.
1. Pengenalan JavaScript
Apa Itu JavaScript?
JavaScript adalah bahasa pemrograman client-side yang berjalan di browser dan digunakan untuk:
- Validasi form
- Manipulasi DOM
- Event handling
- Interaksi asinkron (AJAX)
- Membuat animasi dan efek
Menyisipkan JavaScript
JavaScript:
<!-- Internal -->
<script>
alert('Hello, World!');
</script>
<!-- Eksternal -->
<script src="script.js"></script>2. Dasar-dasar JavaScript
Variabel
JavaScript:
let name = "John";
const PI = 3.14;
var age = 25; // Tidak direkomendasikan untuk penggunaan modernTipe Data
- String, Number, Boolean
- Object, Array
- null, undefined
Operator
JavaScript:
// Aritmatika
let sum = 5 + 3;
// Perbandingan
5 === '5'; // false
5 == '5'; // true
// Logika
true && false // falseStruktur Kontrol
JavaScript:
if (x > 10) {
console.log("Lebih dari 10");
} else {
console.log("Kurang atau sama dengan 10");
}Loop
JavaScript:
for (let i = 0; i < 5; i++) {
console.log(i);
}3. Fungsi dan Scope
Fungsi Biasa dan Arrow Function
JavaScript:
function greet(name) {
return `Hello, ${name}`;
}
const greet2 = (name) => `Hello, ${name}`;Scope
- Global Scope
- Function Scope
- Block Scope (let dan const)
4. Objek dan Array
Objek
JavaScript:
let person = {
name: "Alice",
age: 30,
greet: function() {
return "Hi!";
}
};Array
JavaScript:
let fruits = ["Apple", "Banana", "Mango"];
fruits.push("Orange");5. DOM Manipulation
Mengakses Elemen
JavaScript:
document.getElementById("demo");
document.querySelector(".class-name");
[HEADING=2]Mengubah Konten[/HEADING]
[CODE=javascript]
document.getElementById("demo").innerHTML = "Hello World!";Event Handling
JavaScript:
document.getElementById("btn").addEventListener("click", function() {
alert("Tombol diklik!");
});6. Advanced JavaScript
Closures
JavaScript:
function outer() {
let count = 0;
return function() {
count++;
return count;
};
}
let counter = outer();Callback & Promise
JavaScript:
// Callback
function fetchData(callback) {
setTimeout(() => {
callback("Data diterima");
}, 1000);
}
// Promise
let promise = new Promise((resolve, reject) => {
resolve("Berhasil");
});
promise.then(res => console.log(res));Async/Await
JavaScript:
async function getData() {
let response = await fetch('https://api.example.com');
let data = await response.json();
console.log(data);
}7. JavaScript Modern (ES6+)
Fitur Baru
- let, const
- Template literals
- Default parameters
- Destructuring
- Spread/rest operator
- Modules (import / export)
- Optional chaining
8. Error Handling
Try-Catch
JavaScript:
try {
throw new Error("Terjadi kesalahan!");
} catch (err) {
console.error(err.message);
}9. OOP di JavaScript
Class & Inheritance
JavaScript:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
return `${this.name} bersuara`;
}
}
class Dog extends Animal {
speak() {
return `${this.name} menggonggong`;
}
}10. Tips dan Best Practices
- Gunakan let dan const alih-alih var
- Pisahkan logika dalam fungsi modular
- Gunakan === untuk perbandingan ketat
- Komentar kode dengan jelas
- Gunakan linters seperti ESLint
11. Tools dan Framework Terkait
- Node.js – Menjalankan JavaScript di server
- NPM – Manajemen paket JavaScript
- React, Vue, Angular – Framework frontend
- Webpack, Babel – Alat bantu build modern
12. Latihan & Proyek Mini
- Kalkulator
- To-do list
- Game sederhana (Tebak angka)
- Aplikasi pencari data API
Penutup
JavaScript adalah bahasa yang sangat fleksibel dan kuat. Dengan menguasai dasar-dasarnya dan memahami konsep-konsep lanjutan seperti OOP, asynchronous programming, serta DOM manipulation, Anda dapat membuat aplikasi web yang kaya fitur dan interaktif.
