Raih keahlian JavaScript melalui bootcamp berbasis tantangan yang seru! Bergabunglah sekarang dan tingkatkan keterampilan coding Anda!
JavaScript adalah bahasa pemrograman yang sangat populer dan digunakan di hampir semua website modern. Dengan menguasai JavaScript, kamu dapat membuat website menjadi interaktif, membangun aplikasi web, dan bahkan mengembangkan aplikasi mobile dan desktop.
Bootcamp ini dirancang untuk pemula yang ingin belajar JavaScript secara bertahap melalui tantangan praktis yang akan membantu kamu memahami konsep dan langsung mempraktikkannya.
Sebelum mulai coding, pastikan kamu sudah menyiapkan beberapa tools berikut:
Kamu juga bisa menggunakan layanan online seperti CodePen atau JSFiddle untuk langsung mencoba kode JavaScript tanpa instalasi.
Mari kita mulai dengan memahami dasar-dasar JavaScript, seperti variabel, tipe data, dan operasi dasar.
Variabel digunakan untuk menyimpan data. Di JavaScript, kamu bisa menggunakan
let
,
const
, dan
var
untuk mendeklarasikan variabel.
let nama = "Budi";
const umur = 25;
var isStudent = true;
Kamu bisa melakukan operasi matematika dan operasi string dengan mudah:
let a = 10;
let b = 5;
let hasil = a + b; // 15
let greeting = "Halo, " + nama; // "Halo, Budi"
Buatlah kalkulator sederhana yang dapat menjumlahkan dua angka yang dimasukkan pengguna.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Simple Calculator</title>
</head>
<body>
<input type="number" id="num1" placeholder="Angka pertama" />
<input type="number" id="num2" placeholder="Angka kedua" />
<button onclick="calculate()">Hitung</button>
<p id="result">Hasil: </p>
<script>
function calculate() {
const num1 = Number(document.getElementById('num1').value);
const num2 = Number(document.getElementById('num2').value);
const sum = num1 + num2;
document.getElementById('result').textContent = 'Hasil: ' + sum;
}
</script>
</body>
</html>
Fungsi adalah blok kode yang dapat digunakan kembali. Kamu bisa membuat fungsi dengan atau tanpa parameter.
function sapa(nama) {
return "Halo, " + nama + "!";
}
let pesan = sapa("Andi");
console.log(pesan); // Halo, Andi!
Fungsi membantu membuat kode lebih terstruktur dan mudah dipelihara.
Buat aplikasi To-Do List sederhana yang memungkinkan pengguna menambahkan dan menghapus tugas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>To-Do List</title>
</head>
<body>
<input type="text" id="taskInput" placeholder="Tambah tugas..." />
<button onclick="addTask()">Tambah</button>
<ul id="taskList"></ul>
<script>
function addTask() {
const input = document.getElementById('taskInput');
const task = input.value.trim();
if (task === '') return;
const li = document.createElement('li');
li.textContent = task;
li.style.cursor = 'pointer';
li.onclick = function() {
this.remove();
};
document.getElementById('taskList').appendChild(li);
input.value = '';
}
</script>
</body>
</html>
Array adalah struktur data yang menyimpan banyak nilai dalam satu variabel. Looping digunakan untuk mengakses setiap elemen array.
let buah = ["apel", "jeruk", "pisang"];
for (let i = 0; i < buah.length; i++) {
console.log(buah[i]);
}
// Output:
// apel
// jeruk
// pisang
Buat galeri gambar yang menampilkan gambar dari array dan memungkinkan pengguna menambahkan gambar baru dengan URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Galeri Gambar Dinamis</title>
<style>
img { width: 150px; margin: 5px; border-radius: 8px; }
</style>
</head>
<body>
<input type="text" id="imgUrl" placeholder="Masukkan URL gambar" size="40" />
<button onclick="addImage()">Tambah Gambar</button>
<div id="gallery"></div>
<script>
const images = [
"https://placehold.co/150x100/png?text=Gambar+1",
"https://placehold.co/150x100/png?text=Gambar+2",
"https://placehold.co/150x100/png?text=Gambar+3"
];
function displayGallery() {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
images.forEach(url => {
const img = document.createElement('img');
img.src = url;
img.alt = "Gambar galeri dengan latar belakang warna cerah dan teks 'Gambar'";
gallery.appendChild(img);
});
}
function addImage() {
const input = document.getElementById('imgUrl');
const url = input.value.trim();
if (url) {
images.push(url);
displayGallery();
input.value = '';
}
}
displayGallery();
</script>
</body>
</html>
Objek adalah kumpulan properti yang menyimpan data dan fungsi. Objek sangat berguna untuk merepresentasikan data yang kompleks.
const mahasiswa = {
nama: "Sari",
umur: 21,
jurusan: "Teknik Informatika",
sapa: function() {
return "Halo, nama saya " + this.nama;
}
};
console.log(mahasiswa.sapa()); // Halo, nama saya Sari
Buat quiz sederhana dengan pertanyaan pilihan ganda dan tampilkan skor setelah selesai.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Quiz Interaktif</title>
<style>
button { margin: 5px 0; display: block; }
</style>
</head>
<body>
<div id="quiz"></div>
<div id="result" style="margin-top:20px; font-weight:bold;"></div>
<script>
const quizData = [
{
question: "Apa kepanjangan dari HTML?",
options: ["Hyper Text Markup Language", "Home Tool Markup Language", "Hyperlinks and Text Markup Language"],
answer: 0
},
{
question: "Apa fungsi JavaScript dalam web?",
options: ["Membuat halaman statis", "Menambahkan interaktivitas", "Mengatur layout"],
answer: 1
},
{
question: "Tag HTML untuk membuat paragraf adalah?",
options: ["<div>", "<p>", "<span>"],
answer: 1
}
];
let current = 0;
let score = 0;
function loadQuiz() {
const quiz = document.getElementById('quiz');
quiz.innerHTML = '';
if (current >= quizData.length) {
document.getElementById('result').textContent = 'Skor Anda: ' + score + ' dari ' + quizData.length;
return;
}
const q = quizData[current];
const questionEl = document.createElement('h3');
questionEl.textContent = q.question;
quiz.appendChild(questionEl);
q.options.forEach((option, index) => {
const btn = document.createElement('button');
btn.textContent = option;
btn.onclick = () => {
if (index === q.answer) score++;
current++;
loadQuiz();
};
quiz.appendChild(btn);
});
}
loadQuiz();
</script>
</body>
</html>
JavaScript berjalan secara asynchronous untuk menangani operasi yang memakan waktu seperti pengambilan data dari server. Berikut adalah konsep penting:
function fetchData(callback) {
setTimeout(() => {
callback("Data berhasil diambil");
}, 2000);
}
fetchData(function(result) {
console.log(result);
});
function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Data berhasil diambil");
}, 2000);
});
}
fetchData().then(result => console.log(result));
async function getData() {
const result = await fetchData();
console.log(result);
}
getData();
Buat aplikasi yang mengambil data dari API publik dan menampilkannya di halaman.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Fetch API Example</title>
<style>
article { margin-bottom: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; }
h3 { margin-bottom: 5px; }
</style>
</head>
<body>
<h1>Daftar Postingan</h1>
<div id="posts">Loading...</div>
<script>
async function fetchPosts() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const posts = await response.json();
const postsDiv = document.getElementById('posts');
postsDiv.innerHTML = '';
posts.slice(0, 10).forEach(post => {
const article = document.createElement('article');
const title = document.createElement('h3');
title.textContent = post.title;
const body = document.createElement('p');
body.textContent = post.body;
article.appendChild(title);
article.appendChild(body);
postsDiv.appendChild(article);
});
}
fetchPosts();
</script>
</body>
</html>
Berikut beberapa sumber belajar dan channel YouTube yang sangat membantu untuk belajar JavaScript:
Angular, Pemrograman Web, Framework JavaScript, Tutorial Pemula, Pengembangan Aplikasi Web
Pelajari Angular 2 dan kuasai pembuatan aplikasi web! Dapatkan tips praktis untuk menjadi mahir. Klik untuk memulai perjalanan coding Anda sekarang!
Angular, Router, SPA, Pengembangan Web, Tutorial, Teknologi, Framework JavaScript
Pelajari cara menguasai Angular Router untuk mengembangkan SPA skala besar dengan efisien. Temukan tips dan trik menarik yang akan memudahkan pengembangan aplikasi Anda!
AngularJS, Direktif Kustom, Aplikasi Halaman Tunggal, Pengembangan Web, Framework JavaScript
Pelajari kekuatan AngularJS dengan direktif kustom! Temukan cara membuat aplikasi halaman tunggal yang intuitif dan responsif. Klik untuk mulai!
Backbone.js, Tutorial, Pemrograman Web, JavaScript, Pengembangan Aplikasi
Pelajari kekuatan Backbone.js dengan tutorial langkah demi langkah yang mudah diikuti. Tingkatkan keterampilan pengembangan web Anda dan raih hasil maksimal! Mulai sekarang!
Belajar Pemrograman, JavaScript, Pemula, Panduan Lengkap, Teknologi Pendidikan
Kuasa JavaScript dalam genggaman Anda! Temukan panduan lengkap belajar JavaScript untuk pemula dan mulailah perjalanan coding Anda hari ini!
Belajar, React, Panduan, Pemula, JavaScript, Praktis
Pelajari React dengan panduan lengkap ini! Temukan cara praktis untuk menguasai JavaScript dan bangun aplikasi web impian Anda. Klik untuk mulai!
Ebook, Belajar React, Masterclass, Pengembangan Web, Pemrograman JavaScript, Tutorial Online
Kuasi React dari nol hingga mahir! Bergabunglah dalam masterclass lengkap dan tingkatkan keterampilan pengembangan Anda. Daftar sekarang untuk transformasi yang luar biasa!