Unikma.ac.id – JavaScript adalah salah satu bahasa pemrograman paling populer di dunia yang digunakan untuk menghidupkan halaman web. Jika HTML berperan sebagai struktur dan CSS mempercantik tampilan, maka JavaScript adalah “otak” yang membuat semuanya interaktif seperti tombol yang bisa diklik, animasi yang bergerak, hingga validasi formulir secara otomatis.
Bagi pemula, mempelajari JavaScript bisa terasa rumit di awal, tetapi cara terbaik untuk memahami konsepnya adalah belajar sambil membuat proyek sederhana. Artikel ini akan membimbing kamu mengenal dasar JavaScript, memahami logika pemrogramannya, dan menerapkannya langsung melalui beberapa proyek mini yang bisa kamu coba sendiri.
Mengapa Harus Belajar JavaScript?
- Bahasa yang Mudah Dipelajari
JavaScript memiliki sintaks yang sederhana dan mirip bahasa manusia, sehingga cocok untuk pemula. - Dapat Digunakan di Mana Saja
JavaScript berjalan di browser tanpa perlu instalasi tambahan, dan juga dapat digunakan di sisi server menggunakan Node.js. - Banyak Peluang Karier
Hampir semua website modern menggunakan JavaScript. Jadi, kemampuan ini sangat dicari oleh perusahaan. - Komunitas yang Besar dan Aktif
Ada banyak forum, tutorial, dan dokumentasi gratis yang membantu kamu belajar lebih cepat.
Dasar-Dasar JavaScript yang Perlu Dipahami
Sebelum membuat proyek, pahami dulu beberapa konsep dasar berikut:
1. Variabel: digunakan untuk menyimpan data.
javascript
let nama = "Dissplay";
let umur = 20;
2. Tipe Data: seperti string (teks), number (angka), boolean (true/false), dan array (kumpulan data).
Javascript
let aktif = true;
let angka = [1, 2, 3, 4, 5];
3. Fungsi (Function): blok kode yang dapat dipanggil berulang kali.
Javascript
function sapa(nama) {
console.log("Halo, " + nama + "!");
}
sapa("Dissplay");
4.Kondisional (if-else): digunakan untuk membuat keputusan logika.
Javascript
if (umur >= 18) {
console.log("Kamu sudah dewasa!");
} else {
console.log("Kamu masih di bawah umur!");
}
5. Event Listener: memungkinkan JavaScript merespon tindakan pengguna seperti klik atau ketikan.
Javascript
document.querySelector("button").addEventListener("click", function() {
alert("Tombol diklik!");
});
Proyek Sederhana #1: Kalkulator Sederhana
Tujuan:
Membuat kalkulator dengan fungsi penjumlahan, pengurangan, perkalian, dan pembagian.
html
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<h2>Kalkulator Sederhana</h2>
<input type="number" id="angka1" placeholder="Angka pertama">
<input type="number" id="angka2" placeholder="Angka kedua">
<button onclick="hitung('+')">+</button>
<button onclick="hitung('-')">-</button>
<button onclick="hitung('*')">*</button>
<button onclick="hitung('/')">/</button>
<p>Hasil: <span id="hasil"></span></p>
<script>
function hitung(operator) {
let a = parseFloat(document.getElementById("angka1").value);
let b = parseFloat(document.getElementById("angka2").value);
let hasil;
if (operator == '+') hasil = a + b;
else if (operator == '-') hasil = a - b;
else if (operator == '*') hasil = a * b;
else if (operator == '/') hasil = a / b;
document.getElementById("hasil").innerText = hasil;
}
</script>
</body>
</html>
Penjelasan:
Kode di atas menggunakan fungsi hitung() yang mengambil dua angka dari input, melakukan operasi aritmatika sesuai tombol yang diklik, lalu menampilkan hasilnya di layar.
Proyek Sederhana #2: To-Do List (Daftar Tugas Harian)
Tujuan:
Membuat aplikasi sederhana untuk mencatat dan menghapus tugas.
html
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<h2>Daftar Tugas Harian</h2>
<input type="text" id="tugas" placeholder="Tambahkan tugas baru...">
<button onclick="tambahTugas()">Tambah</button>
<ul id="daftarTugas"></ul>
<script>
function tambahTugas() {
let tugas = document.getElementById("tugas").value;
if (tugas === "") {
alert("Tugas tidak boleh kosong!");
return;
}
let li = document.createElement("li");
li.textContent = tugas;
li.addEventListener("click", function() {
li.remove(); // klik untuk hapus tugas
});
document.getElementById("daftarTugas").appendChild(li);
document.getElementById("tugas").value = "";
}
</script>
</body>
</html>
Penjelasan:
Kamu dapat menambahkan teks ke dalam daftar, dan jika item diklik, item tersebut akan dihapus. Ini adalah contoh bagaimana JavaScript menangani event dan manipulasi DOM (Document Object Model).
Proyek Sederhana #3: Jam Digital
Tujuan:
Menampilkan waktu secara real-time di halaman web.
html
<!DOCTYPE html>
<html>
<head>
<title>Jam Digital</title>
</head>
<body>
<h2>Jam Digital</h2>
<h1 id="jam"></h1>
<script>
function updateJam() {
const waktu = new Date();
let jam = waktu.getHours().toString().padStart(2, '0');
let menit = waktu.getMinutes().toString().padStart(2, '0');
let detik = waktu.getSeconds().toString().padStart(2, '0');
document.getElementById("jam").textContent = `${jam}:${menit}:${detik}`;
}
setInterval(updateJam, 1000); // update tiap detik
updateJam(); // jalankan saat pertama kali
</script>
</body>
</html>
Penjelasan:
Proyek ini memanfaatkan Date() dan setInterval() untuk memperbarui jam setiap detik,menampilkan waktu real-time seperti jam digital.
Tips Belajar JavaScript Lebih Cepat
- Konsisten Berlatih : Jangan hanya membaca teori, tapi praktekkan dengan membuat proyek kecil setiap hari.
- Gunakan Console Browser : Tekan F12 di browser untuk mencoba kode langsung.
- Pelajari DOM dan Event : Dua konsep penting untuk interaktivitas web.
- Mulai dari Masalah Sederhana : Misalnya validasi form, animasi sederhana, atau efek klik.
- Bergabung dengan Komunitas : Forum seperti Stack Overflow atau grup belajar JavaScript di Discord/Facebook dapat membantu.
Belajar JavaScript tidak harus sulit kuncinya adalah belajar dengan praktik nyata. Melalui proyek sederhana seperti kalkulator, to-do list, atau jam digital, kamu akan memahami bagaimana logika dan fungsi JavaScript bekerja dalam kehidupan nyata. Setelah menguasai dasar, kamu bisa melangkah ke tahap lebih lanjut seperti belajar Framework (React, Vue, Angular) atau membangun aplikasi web dinamis.
Jadi, buka teks editor kamu, tulis kode pertamamu, dan mulailah perjalanan menjadi seorang Frontend Developer hebat!
.
Sumber Referensi:
PetaniKode : “https://www.petanikode.com/tutorial/javascript/”.
Jagoan Hosting : “https://www.jagoanhosting.com/blog/belajar-javascript/”.
MalasNgoding : “https://www.malasngoding.com/tutorial/javascript/”.
IDwebhost : “https://idwebhost.com/blog/belajar-javascript-untuk-pemula/”.
RevoU : “https://www.revou.co/panduan-teknis/belajar-javascript”.
