Belajar JavaScript Lengkap (Dari Dasar - Interaktif)
Studi Kasus: Website Portofolio Siswa
📌 Cara Menjalankan Kode
1. Copy semua kode ini
2. Simpan sebagai index.html
3. Buka di browser
Kenapa bisa jalan?
Karena JavaScript dijalankan langsung oleh browser tanpa install software tambahan.
🧠 Apa itu JavaScript?
JavaScript adalah bahasa pemrograman yang membuat website menjadi hidup (interaktif). Tanpa JavaScript, website hanya bisa dilihat tanpa interaksi.
- HTML = struktur
- CSS = tampilan
- JavaScript = aksi
⚡ 1. JavaScript Pertama (Alert)
function halo(){
alert("Halo siswa!");
}
Penjelasan:
- function = membuat perintah
- alert() = popup
- onclick = menjalankan fungsi saat diklik
📦 2. Variabel
let nama = "Heroic";
Variabel digunakan untuk menyimpan data yang bisa digunakan kembali.
🔁 3. Percabangan (if)
if(nama == ""){
alert("Kosong");
}
if digunakan untuk membuat keputusan.
🧠 4. Manipulasi DOM
document.getElementById("text").innerHTML = "Baru";
Teks lama
Penjelasan:
- document = halaman
- getElementById = ambil elemen
- innerHTML = ubah isi
🎯 5. Event
onclick="halo()"
Event adalah aksi user seperti klik, hover, input.
🧪 6. Studi Kasus: Form Siswa
function kirim(){
let nama = document.getElementById("namaInput").value;
if(nama == ""){
alert("Nama kosong");
}else{
alert("Halo " + nama);
}
}
Studi kasus ini digunakan untuk validasi data siswa.
🌙 7. Dark Mode
function darkMode(){
if(document.body.style.background == "rgb(18, 18, 18)"){
// balik ke putih
document.body.style.background = "#f4f6f9";
document.body.style.color = "black";
}else{
// jadi dark mode
document.body.style.background = "#121212";
document.body.style.color = "white";
}
}
Digunakan untuk mengubah tema website.
✨ 8. Animasi Scroll
window.addEventListener("scroll", function(){
// cek posisi
});
Digunakan untuk membuat animasi saat user scroll.
🧠 Cara Kerja JavaScript
1. Browser membaca HTML
2. Menemukan script
3. Menunggu event
4. Menjalankan fungsi
🧪 Latihan Siswa
Tugas:
- Buat tombol ubah warna background
- Buat alert nama sendiri
- Buat validasi form
function ubahWarna(){
document.body.style.background = "black";
}
function ubahWarna() {
document.body.style.background = "white";
}
🎯 Kesimpulan
- JavaScript membuat website hidup
- Digunakan untuk interaksi
- Wajib dikuasai web developer
PRAKTIK SUPER LENGKAP: Portofolio + Semua JavaScript
Tujuan:
Siswa tidak hanya melihat teori, tetapi langsung membuat website portofolio yang menggunakan hampir semua konsep JavaScript yang sudah dipelajari:
- Alert
- Variabel
- Percabangan (if)
- DOM (ubah teks)
- Event (onclick)
- Form input
- Manipulasi style
📌 Cara Praktik (WAJIB IKUTI)
1. Buka VS Code / Notepad
2. Buat file baru
3. Simpan dengan nama: portofolio.html
4. Copy semua kode di bawah
5. Klik 2x file → otomatis terbuka di browser
📄 KODE LENGKAP (HTML + CSS + SEMUA JAVASCRIPT)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Portofolio Siswa</title>
<style>
body{
font-family:Arial;
background:#f4f6f9;
text-align:center;
}
.header{
background:#0d47a1;
color:white;
padding:20px;
}
.card{
background:white;
margin:20px;
padding:20px;
border-radius:10px;
}
button{
padding:10px;
background:#0d47a1;
color:white;
border:none;
cursor:pointer;
margin:5px;
}
</style>
</head>
<body>
<div class="header">
<h1>Portofolio Saya</h1>
<p id="namaSaya">Nama: Belum diisi</p>
</div>
<div class="card">
<h2>👋 Perkenalan</h2>
<p id="tentang">Saya siswa yang sedang belajar coding</p>
<button onclick="halo()">Sapa</button>
<button onclick="ubahTentang()">Ubah Tentang</button>
</div>
<div class="card">
<h2>📝 Input Nama</h2>
<input type="text" id="namaInput">
<br><br>
<button onclick="kirim()">Kirim</button>
</div>
<div class="card">
<h2>🎨 Kontrol Tampilan</h2>
<button onclick="ubahWarna()">Ubah Background</button>
<button onclick="darkMode()">Dark Mode</button>
</div>
<script>
/* 1. ALERT */
function halo(){
alert("Halo! Selamat datang di portofolio saya");
}
/* 2. DOM - UBAH TEKS */
function ubahTentang(){
document.getElementById("tentang").innerHTML =
"Saya sedang belajar JavaScript!";
}
/* 3. FORM + VARIABEL + IF */
function kirim(){
let nama = document.getElementById("namaInput").value;
if(nama == ""){
alert("Nama tidak boleh kosong!");
}else{
alert("Halo " + nama);
// ubah tampilan
document.getElementById("namaSaya").innerHTML =
"Nama: " + nama;
}
}
/* 4. UBAH STYLE */
function ubahWarna(){
document.body.style.background = "lightblue";
}
/* 5. DARK MODE */
function darkMode(){
document.body.style.background = "#121212";
document.body.style.color = "white";
}
</script>
</body>
</html>
🧠 PENJELASAN SUPER DETAIL
1. function halo()
Fungsi ini digunakan untuk menampilkan popup. Kenapa pakai alert()? Karena itu cara paling sederhana untuk melihat JavaScript bekerja.
2. getElementById()
Digunakan untuk mengambil elemen HTML berdasarkan ID. Contoh:
document.getElementById("tentang")
Artinya: ambil teks dengan id "tentang"
3. innerHTML
Digunakan untuk mengubah isi HTML.
.innerHTML = "Teks Baru"
4. Variabel (let nama)
Digunakan untuk menyimpan data dari input user.
5. value
Digunakan untuk mengambil isi input.
document.getElementById("namaInput").value
6. IF (Percabangan)
Digunakan untuk mengecek kondisi:
- Jika kosong → tampil error
- Jika ada isi → lanjut
7. style.background
Digunakan untuk mengubah tampilan langsung dari JavaScript.
8. Kenapa semua ini penting?
Karena ini adalah dasar dari:
- Website interaktif
- Aplikasi web
- Frontend developer
🎯 LATIHAN TAMBAHAN (WAJIB)
Coba modifikasi sendiri:
- Ganti warna background jadi merah
- Tambahkan tombol "Reset"
- Tambahkan umur
- Tampilkan pesan "Selamat belajar!"
function reset(){
document.body.style.background = "white";
}
🔥 KESIMPULAN PRAKTIK
Jika kamu sudah sampai sini, berarti kamu sudah memahami:
- Cara membuat website
- Cara menjalankan JavaScript
- Cara membuat interaksi
Ini sudah level dasar web developer 🚀
0 Comments