Dari Pemula hingga Mahir - Tutorial Komprehensif, Problem Solving, dan IDE Interaktif
JavaScript adalah bahasa pemrograman yang dirancang untuk membuat halaman web interaktif dan dinamis. Awalnya dibuat oleh Brendan Eich pada tahun 1995, JavaScript telah berkembang menjadi salah satu bahasa pemrograman paling penting di dunia.
// Cara menggunakan JavaScript
// 1. Inline
<button onclick="alert('Hello')">Click</button>
// 2. Internal
<script>
console.log('Hello, JavaScript!');
</script>
// 3. External
<script src="script.js"></script>
Program pertama Anda dalam JavaScript.
console.log("Hello, World!");
Menyimpan dan menggunakan data dalam program.
let nama = "Budi";
let umur = 20;
const PI = 3.14;
console.log(nama); // Budi
console.log(umur); // 20
Melakukan operasi matematika dan perbandingan.
let a = 10, b = 3;
console.log(a + b); // 13
console.log(a > b); // true
console.log(a === b); // false
Memahami berbagai tipe data JavaScript.
let num = 42;
let text = "hello";
let flag = true;
let arr = [1, 2, 3];
let obj = {name: "Budi"};
Menyimpan multiple items dalam satu variabel.
let fruits = ["apple", "banana"];
console.log(fruits[0]); // apple
console.log(fruits.length); // 2
fruits.push("grape"); // Tambah
Menyimpan data dengan key-value pairs.
let person = {
name: "Budi",
age: 25
};
console.log(person.name); // Budi
Membuat keputusan berdasarkan kondisi.
let age = 18;
if (age >= 18) {
console.log("Dewasa");
} else {
console.log("Anak-anak");
}
Mengulang kode dengan jumlah tertentu.
for (let i = 0; i < 5; i++) {
console.log(i);
}
Mengulang selama kondisi terpenuhi.
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
Membuat dan menggunakan function.
function greet(name) {
return "Halo, " + name;
}
console.log(greet("Budi")); // Halo, Budi
Syntax yang lebih singkat untuk function.
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8
Function yang dikirim sebagai parameter.
function process(callback) {
callback("Done");
}
process(msg => console.log(msg));
Mengakses dan memanipulasi elemen HTML.
let elem = document.getElementById("id");
elem.innerHTML = "Hello";
elem.style.color = "red";
Menanggapi interaksi pengguna.
btn.addEventListener("click", () => {
console.log("Clicked!");
});
Membuat dan menambahkan elemen HTML baru.
let div = document.createElement("div");
div.textContent = "Hello";
document.body.appendChild(div);
Menangani operasi async dengan Promise.
let promise = new Promise((resolve) => {
setTimeout(() => resolve("Done"), 1000);
});
promise.then(r => console.log(r));
Syntax yang lebih clean untuk Promise.
async function getData() {
let data = await fetch(url);
return await data.json();
}
Membuat HTTP request ke server.
fetch("https://api.example.com/data")
.then(r => r.json())
.then(d => console.log(d));
Variabel atau function belum didefinisikan.
Pastikan variabel sudah didefinisikan sebelum digunakan.
// ❌ SALAH
console.log(name);
// ✅ BENAR
let name = "Budi";
console.log(name);
Operasi pada tipe data yang tidak sesuai.
Periksa tipe data dengan typeof.
// ❌ SALAH
let num = 5;
console.log(num.toUpperCase());
// ✅ BENAR
let text = "hello";
console.log(text.toUpperCase());
Tulis dan jalankan kode JavaScript langsung di browser ini!