Konsep Dasar & Sintaks Utama JavaScript

Setelah CSS mengatur tampilan halaman, JavaScript menambahkan respons terhadap tindakan pengguna. 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:

1. Internal JavaScript: kode ditulis langsung di dalam tag <script>. Biasanya diletakkan sebelum </body> agar elemen HTML sudah terbaca lebih dulu.
2. Eksternal JavaScript: kode disimpan pada file .js, lalu dihubungkan dengan atribut src. Jika diletakkan di <head>, gunakan defer.
3. Inline JavaScript: kode ditulis pada atribut event seperti onclick. Cara ini boleh dikenali, tetapi kurang disarankan untuk proyek yang mulai besar.

Console adalah panel untuk melihat pesan dari kode. console.log(...) mencetak nilai atau pesan untuk membantu memeriksa jalannya kode. Di lab, hasilnya muncul pada panel Console, bukan di halaman Preview.

Contoh singkat pemasangan eksternal: <script src="aplikasi.js" defer></script>. Atribut defer menunda eksekusi sampai HTML selesai dibaca. Contoh inline: <button onclick="console.log('Ditekan')">Coba</button>.

Contoh berikut memakai getElementById, textContent, dan addEventListener untuk memilih elemen, mengganti teks, dan merespons klik. Cara ini dibahas di bab 3 dan 4; tiru dulu untuk melihat hasilnya.

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: ganti teks "JavaScript sudah aktif!" menjadi pesan lain, lalu jalankan kembali.

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.

Scope adalah wilayah tempat variabel bisa dibaca. Blok adalah kumpulan baris di antara { dan }; block scope membatasi variabel pada blok itu, sedangkan function scope membatasinya pada fungsi. if menjalankan blok hanya saat kondisinya benar; percabangan dibahas lebih lengkap di 1.5.

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.

▶ JalankanResetJavaScript

🧪 Coba ubah: tambahkan skorPemain = skorPemain + 25; sebelum baris console.log("Skor: " + skorPemain);.

▶ JalankanResetJavaScript

🧪 Coba ubah: ganti var skorLama menjadi let skorLama, lalu amati pesan error yang muncul.

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.

▶ JalankanResetJavaScript

🧪 Coba ubah: ganti nilaiKuis menjadi 60, lalu amati nilai lolos.

Perubahan tipe otomatis (type coercion) terjadi saat JavaScript menyesuaikan tipe nilai ketika menjalankan operasi. Operator + akan menggabungkan teks jika salah satu operand berupa string, sedangkan operator seperti *, -, dan / berusaha mengubah string angka menjadi number.

Penggabungan teks disebut concatenation: "Air" + " dingin" menghasilkan "Air dingin".

▶ JalankanResetJavaScript

🧪 Coba ubah: ganti x menjadi "10 orang" dan lihat operasi mana yang menghasilkan NaN.

Operator Hitung dan Penugasan

Operator	Kegunaan	Contoh
+, -, *, /	Tambah, kurang, kali, bagi	12 + 3 = 15; 12 - 3 = 9; 12 * 3 = 36; 12 / 3 = 4
%	Sisa pembagian	17 % 5 = 2
=	Menyimpan nilai	let stok = 12
++, --	Menambah atau mengurangi satu	stok++; lalu stok--
+=, -=	Mengubah nilai dengan jumlah tertentu	stok += 3; lalu stok -= 2
? :	Memilih satu dari dua nilai (ternary)	stok > 0 ? "Tersedia" : "Habis"

Pada ternary, bagian sebelum ? adalah kondisi, sesudahnya nilai saat benar, dan sesudah : nilai saat salah.

Array dan Objek

Array menyimpan daftar berurutan, misalnya const warna = ["Merah", "Biru"]. Indeks dimulai dari nol: warna[0] adalah "Merah". Objek menyimpan pasangan nama dan nilai, misalnya const kebun = { luas: 24, kota: "Bogor" }. Ambil nilai dengan kebun.kota, atau kebun[kunci] bila kunci berisi nama properti seperti "kota".

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. Arrow function adalah cara ringkas menulis fungsi dengan =>. Template literal adalah teks bertanda backtick yang bisa menyisipkan nilai lewat ${...}. Callback adalah fungsi yang diberikan ke fungsi lain untuk dijalankan kemudian. forEach menjalankan callback sekali untuk setiap isi array.

▶ JalankanResetJavaScript

🧪 Coba ubah: panggil hitungRataRata(60, 70) dan lihat status yang tercetak.

▶ JalankanResetJavaScript

🧪 Coba ubah: ubah callback forEach agar hanya mencetak nilai yang lebih besar dari 80.

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.

▶ JalankanResetJavaScript

Di lab, variabel yang dibaca bernama mode dan sudah dideklarasikan. Gunakan nama itu saat menyesuaikan contoh; jangan menyalin deklarasi const tema.

🧪 Coba ubah: ganti nilai menjadi 68 dan tema menjadi "terang".

Berikutnya: perulangan di bab 2 untuk mengolah daftar data.

Kondisi awal

HTML menyusun halaman dan CSS mengatur tampilannya. Sekarang kita mulai JavaScript untuk menjalankan perhitungan dan memilih tindakan. Belum ada data peserta atau hasil perhitungan pada latihan ini.

Buka Lab Bab 1: Dasar Sintaks JavaScript. Editor JavaScript mewakili berkas script.js. Zona adalah area bernomor yang boleh diganti isinya. Salin potongan di bawah ke zona yang disebutkan, pertahankan baris di luar zona, lalu tekan Jalankan. Tekan Cek untuk memeriksa langkah lab. Tidak perlu memasang aplikasi atau membuat berkas di komputer.

Console adalah panel pesan dari program. console.log menulis ke panel itu. Preview menampilkan halaman HTML; hasil bab ini dibaca di Console.

Panduan sintaks pertama

Langkah 1: Simpan nama dan hitung poin

Variabel adalah tempat menyimpan nilai dengan nama. const dipakai untuk nilai yang tidak diganti, sedangkan let untuk nilai yang dapat berubah. Tanda = menyimpan nilai di sebelah kanan ke nama di sebelah kiri.

Tempel di Lab 1, Zona 1. Berkas: script.js

const namaSiswa = "Rani";
let poin = 10;
poin = poin + 5;
console.log(namaSiswa + ": " + poin);

namaSiswa menyimpan string, yaitu teks di antara tanda kutip. poin menyimpan number, yaitu angka. Baris ketiga membaca poin lama, menambah 5, lalu menyimpannya kembali: 10 menjadi 15. Pada baris terakhir, + menggabungkan teks dan angka menjadi pesan. Penggabungan teks disebut concatenation; perubahan angka menjadi teks di sini disebut type coercion.

Hasil: setelah Jalankan, Console memuat Rani: 15.

Langkah 2: Buat fungsi pemeriksa nilai

Fungsi adalah kumpulan perintah bernama yang dapat dipanggil kembali. function membuat fungsi; parameter nilai menerima angka saat fungsi dipanggil. return mengembalikan jawaban dan mengakhiri pemanggilan fungsi.

Tempel di Lab 1, Zona 2. Berkas: script.js

function cekKelulusan(nilai) {
    if (nilai >= 75) {
        return "Lulus";
    }

    return "Remedial";
}

console.log(cekKelulusan(82));

if memilih perintah berdasarkan kondisi. Operator >= berarti lebih besar atau sama dengan. Kondisi menghasilkan boolean, yaitu true atau false. Angka 82 memenuhi batas 75, sehingga jawaban fungsi adalah Lulus. Nilai di bawah 75 melewati blok if dan mendapat Remedial. else dapat dipakai untuk cabang lainnya, dan else if untuk kondisi tambahan; fungsi ini cukup memakai return kedua.

Scope adalah wilayah tempat nama dapat dibaca. Parameter nilai hanya tersedia di fungsi ini. let dan const di dalam blok bertanda kurung kurawal juga terbatas pada blok tersebut. Cara lama var mengikuti scope fungsi. Tulis deklarasi sebelum memakainya: hoisting menyiapkan deklarasi, tetapi let dan const belum dapat dibaca selama Temporal Dead Zone sebelum baris deklarasinya berjalan.

Hasil: setelah Jalankan, Console memuat Rani: 15, lalu Lulus pada baris berikutnya.

Langkah 3: Pilih pesan tema

Lab sudah menyediakan const mode = "gelap"; di luar zona. Pertahankan baris itu. switch membandingkan satu nilai dengan beberapa pilihan case. break mengakhiri pilihan yang cocok; default menangani nilai yang tidak cocok dengan pilihan mana pun.

Tempel di Lab 1, Zona 3. Berkas: script.js

switch (mode) {
    case "terang":
        console.log("Tema terang aktif");
        break;
    case "gelap":
        console.log("Tema gelap aktif");
        break;
    default:
        console.log("Mode tidak dikenal");
}

Karena mode bernilai gelap, hanya pesan untuk case gelap yang dicetak. Setelah tiga zona terisi, tekan Jalankan dan Cek pada lab.

Hasil: Console berisi tiga baris berurutan, yaitu Rani: 15, Lulus, dan Tema gelap aktif; pemeriksaan ketiga langkah lulus.

Langkah 4: Jalankan contoh utuh di materi

Playground adalah kotak kode yang dapat dijalankan langsung pada halaman materi. Tekan Jalankan pada contoh utuh berikut. Contoh ini menggabungkan tiga zona dan deklarasi mode yang disediakan lab. Untuk mengerjakan lab, tetap salin potongan per zona dari langkah sebelumnya.

Berkas: script.js

▶ JalankanResetJavaScript

JavaScript juga dapat ditulis di dalam tag <script> pada HTML (internal), atau dimuat dari berkas luar dengan <script src="script.js" defer></script> (eksternal). defer menunggu HTML selesai dibaca. Cara inline menulis tindakan di atribut seperti onclick; lab sudah menyiapkan pemuatan skrip sehingga kita cukup mengisi zona.

Hasil: Console playground menampilkan tiga pesan yang sama dengan lab lengkap.

Bekal membaca sintaks berikutnya

Operator === memeriksa nilai dan tipe sekaligus; !== berarti tidak sama secara ketat. && mengharuskan kedua kondisi benar, sedangkan || cukup salah satunya. Operator % memberi sisa pembagian. ++ menambah satu, -- mengurangi satu, dan += menambahkan nilai ke isi lama. Ternary memilih dua nilai dengan bentuk kondisi ? nilaiBenar : nilaiSalah.

Array menyimpan daftar berurutan dengan indeks mulai nol. Objek menyimpan pasangan nama dan nilai. null menyatakan nilai kosong yang sengaja diberikan, sedangkan undefined menandakan nilai belum tersedia. Arrow function memakai tanda => untuk menulis fungsi secara ringkas. Template literal memakai backtick untuk menyisipkan nilai ke teks. Callback adalah fungsi yang diberikan ke fungsi lain untuk dijalankan; kita akan memakainya bersama daftar bulan di bab berikutnya.

Kalau ada galat

Nama sudah dideklarasikan. Ganti isi zona, jangan menambahkan salinan kedua di bawah potongan lama. Untuk mode, pertahankan deklarasi bawaan dan tempel hanya switch dari Langkah 3.

Nama tidak dikenali. Nama peka terhadap huruf besar dan kecil. Tempel ulang seluruh potongan zona terkait agar namaSiswa, poin, dan cekKelulusan sama persis.

Pesan tidak terlihat di halaman. Buka Console setelah Jalankan. Bab ini mencetak pesan, belum mengubah elemen HTML.

Keadaan akhir

Program menghitung poin Rani, memeriksa kelulusan, dan memilih tema. Bab 2 memakai variabel serta kondisi ini untuk menjalankan perintah berulang dan mengisi form tanggal lahir.