JavaScript · Bab 1
Konsep Dasar & Sintaks Utama JavaScript
Peran JavaScript di web, cara menulis JavaScript di HTML, variabel, tipe data, operator, fungsi dasar, dan percabangan.
JavaScript adalah bahasa pemrograman yang membuat halaman web bisa bereaksi terhadap pengguna. HTML menyusun struktur halaman, CSS mengatur tampilan, sedangkan JavaScript menjalankan logika seperti menghitung nilai, memvalidasi form, mengganti teks, dan merespons klik tombol.
1.1 Integrasi JavaScript dalam Halaman Web
Kode JavaScript dapat ditulis dengan tiga cara utama:
- Internal JavaScript: kode ditulis langsung di dalam tag
<script>. Biasanya diletakkan sebelum</body>agar elemen HTML sudah terbaca lebih dulu. - Eksternal JavaScript: kode disimpan pada file
.js, lalu dihubungkan dengan atributsrc. Jika diletakkan di<head>, gunakandefer. - Inline JavaScript: kode ditulis pada atribut event seperti
onclick. Cara ini boleh dikenali, tetapi kurang disarankan untuk proyek yang mulai besar.
🧪 Coba ubah: ganti teks "JavaScript sudah aktif!" menjadi pesan lain, lalu jalankan kembali.
Belum ada output.
1.2 Variabel dan Scope
Variabel adalah wadah untuk menyimpan data. JavaScript modern memakai const untuk nilai yang tidak diganti, let untuk nilai yang berubah, dan menghindari var kecuali saat membaca kode lama.
| Keyword | Scope | Bisa diubah? | Catatan |
|---|---|---|---|
const | Block scope | Tidak bisa reassign | Wajib diberi nilai awal. Isi array/objek masih bisa diubah. |
let | Block scope | Bisa | Cocok untuk nilai dinamis. |
var | Function scope | Bisa | Cara lama, dapat bocor keluar blok dan rawan bug. |
🧪 Coba ubah: tambahkan skorPemain = skorPemain + 25; sebelum baris console.log("Skor: " + skorPemain);.
Belum ada output.
🧪 Coba ubah: ganti var skorLama menjadi let skorLama, lalu amati pesan error yang muncul.
Belum ada output.
1.3 Tipe Data dan Operator
JavaScript bersifat dynamically typed, artinya tipe data mengikuti nilai yang diberikan. Tipe data dasar yang sering dipakai adalah string, number, boolean, null, dan undefined.
Operator digunakan untuk menghitung, membandingkan, dan menggabungkan kondisi. Biasakan memakai operator perbandingan ketat === dan !== agar nilai dan tipe data ikut dibandingkan. Untuk logika, && berarti semua kondisi harus benar, sedangkan || berarti cukup salah satu kondisi benar.
🧪 Coba ubah: ganti nilaiTugas menjadi 60, lalu amati nilai lulus.
Belum ada output.
Type coercion (sering ditulis type coercion) terjadi saat JavaScript mengubah tipe data otomatis. Operator + akan menggabungkan teks jika salah satu operand berupa string, sedangkan operator seperti *, -, dan / berusaha mengubah string angka menjadi number.
🧪 Coba ubah: ganti x menjadi "10 siswa" dan lihat operasi mana yang menghasilkan NaN.
Belum ada output.
1.4 Fungsi Dasar
Fungsi membungkus beberapa baris kode agar bisa dipakai ulang. Fungsi dapat menerima parameter dan mengembalikan nilai dengan return. Selain deklarasi function, JavaScript modern juga mengenal arrow function, template literal, dan callback.
🧪 Coba ubah: panggil hitungRataRata(60, 70) dan lihat status yang tercetak.
Belum ada output.
🧪 Coba ubah: ubah callback forEach agar hanya mencetak nilai yang lebih besar dari 80.
Belum ada output.
1.5 Percabangan if, else if, dan switch
Percabangan membuat program memilih aksi berdasarkan kondisi. Gunakan if untuk kondisi yang fleksibel, dan switch saat membandingkan satu nilai terhadap beberapa pilihan tetap.
🧪 Coba ubah: ganti nilai menjadi 68 dan mode menjadi "terang".
Belum ada output.