Contoh Proyek Sederhana untuk Belajar JavaScript dengan Cepat
JavaScript adalah salah satu bahasa pemrograman yang paling populer di dunia, terutama untuk pengembangan web. Bagi pemula, belajar JavaScript bisa terasa menantang. Namun, cara terbaik untuk memahami JavaScript adalah dengan langsung membuat proyek sederhana. Artikel ini akan memberikan beberapa contoh proyek yang mudah dilakukan dan membantu Anda belajar JavaScript dengan cepat.
1. Kalkulator Sederhana
Apa yang Dipelajari:
Operasi dasar (penjumlahan, pengurangan, perkalian, pembagian).
Manipulasi DOM (Document Object Model).
Cara Membuatnya:
Buat file HTML sederhana dengan tiga input: dua untuk angka dan satu untuk hasil.
Tambahkan tombol untuk setiap operasi matematika.
Gunakan JavaScript untuk menangkap input dari pengguna, melakukan perhitungan, dan menampilkan hasilnya.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<h1>Kalkulator Sederhana</h1>
<input type=”number” id=”num1″ placeholder=”Angka pertama”>
<input type=”number” id=”num2″ placeholder=”Angka kedua”>
<br>
<button onclick=”calculate(‘+’)”>Tambah</button>
<button onclick=”calculate(‘-‘)”>Kurang</button>
<button onclick=”calculate(‘*’)”>Kali</button>
<button onclick=”calculate(‘/’)”>Bagi</button>
<h2>Hasil: <span id=”result”>0</span></h2>
<script>
function calculate(operator) {
const num1 = parseFloat(document.getElementById(‘num1’).value);
const num2 = parseFloat(document.getElementById(‘num2’).value);
let result = 0;
if (operator === ‘+’) result = num1 + num2;
else if (operator === ‘-‘) result = num1 – num2;
else if (operator === ‘*’) result = num1 * num2;
else if (operator === ‘/’) result = num1 / num2;
document.getElementById(‘result’).textContent = result;
}
</script>
</body>
</html>
2. To-Do List
Apa yang Dipelajari:
Array untuk menyimpan data.
Event handling (menangani klik tombol).
Manipulasi elemen HTML secara dinamis.
Cara Membuatnya:
Buat input teks dan tombol untuk menambahkan tugas.
Tampilkan daftar tugas di layar.
Tambahkan tombol untuk menghapus tugas dari daftar.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<input type=”text” id=”taskInput” placeholder=”Masukkan tugas”>
<button onclick=”addTask()”>Tambah</button>
<ul id=”taskList”></ul>
<script>
function addTask() {
const taskInput = document.getElementById(‘taskInput’);
const taskList = document.getElementById(‘taskList’);
const task = taskInput.value;
if (task) {
const li = document.createElement(‘li’);
li.textContent = task;
const deleteButton = document.createElement(‘button’);
deleteButton.textContent = ‘Hapus’;
deleteButton.onclick = () => taskList.removeChild(li);
li.appendChild(deleteButton);
taskList.appendChild(li);
taskInput.value = ”;
}
}
</script>
</body>
</html>
3. Jam Digital
Apa yang Dipelajari:
Fungsi waktu dengan objek
Date.Fungsi interval untuk memperbarui tampilan secara otomatis.
Cara Membuatnya:
Buat elemen HTML untuk menampilkan waktu.
Gunakan JavaScript untuk mengambil waktu saat ini.
Perbarui tampilan waktu setiap detik dengan fungsi
setInterval.
Contoh Kode:
<!DOCTYPE html>
<html>
<head>
<title>Jam Digital</title>
</head>
<body>
<h1>Jam Digital</h1>
<h2 id=”clock”>00:00:00</h2>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, ‘0’);
const minutes = now.getMinutes().toString().padStart(2, ‘0’);
const seconds = now.getSeconds().toString().padStart(2, ‘0’);
document.getElementById(‘clock’).textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>
Kesimpulan
Proyek-proyek sederhana seperti kalkulator, to-do list, dan jam digital sangat efektif untuk membantu pemula memahami konsep dasar JavaScript. Dengan mempraktikkan proyek-proyek ini, Anda tidak hanya belajar sintaks JavaScript tetapi juga mengasah kemampuan problem-solving. Selamat mencoba dan semoga sukses belajar JavaScript dengan Cepat!
BelajarWeb.click,
Platform Pembelajaran Online dan Offline Terbaik