JavaScript adalah bahasa pemrograman sisi klien (client-side) yang esensial untuk membuat halaman web menjadi dinamis dan interaktif. Dengan JavaScript, Anda dapat memanipulasi elemen HTML, merespons kejadian pengguna (event), melakukan validasi form, berkomunikasi dengan server melalui AJAX, dan bahkan membangun aplikasi web kompleks. Memahami dasar JavaScript adalah langkah pertama untuk mengembangkan keterampilan sebagai web developer modern. Artikel ini akan membahas cara menambahkan JavaScript ke halaman web, struktur dasar sintaks, variabel, tipe data, operator, kontrol alur, fungsi, event, dan praktik terbaik agar kode JavaScript Anda mudah dipelihara dan ramah SEO.
Menambahkan JavaScript ke Halaman Web
Ada tiga metode utama untuk menambahkan JavaScript ke halaman web: inline, internal, dan eksternal. Inline JavaScript menggunakan atribut onclick atau event lain langsung pada elemen HTML, misalnya <button onclick="alert('Halo!')">Klik</button>. Metode ini berguna untuk demo cepat, tetapi membuat HTML berantakan dan sulit dipelihara. Internal JavaScript diletakkan dalam tag <script> di dalam dokumen HTML, biasanya di akhir sebelum penutup <body>, agar elemen HTML sudah termuat saat script dijalankan. Contoh:
<script>
console.log('Selamat datang di JavaScript');
</script>Eksternal JavaScript menggunakan file terpisah dengan ekstensi .js yang dirujuk melalui tag <script src="app.js"></script>. Keuntungan eksternal adalah pemisahan konten dan logika, cache browser, dan kemudahan pemeliharaan pada proyek besar. Pilih metode yang sesuai kebutuhan, namun eksternal umumnya paling direkomendasikan.
Inline vs Internal vs Eksternal
Pertimbangkan maintainability dan performa saat memilih metode. Inline cocok untuk percontohan kecil, internal untuk halaman satu-off dengan kode singkat, dan eksternal untuk proyek berskala menengah hingga besar. Dengan JavaScript eksternal, browser hanya perlu memuat satu kali file .js, meningkatkan kecepatan akses pada halaman berikutnya.
Struktur Dasar dan Sintaks JavaScript
JavaScript menggunakan sintaks mirip C, dengan variabel, pernyataan (statement), dan ekspresi (expression). Setiap pernyataan diakhiri titik-koma (;) meski tidak wajib. Contoh variabel dengan let, const, dan var:
<script>
let nama = 'Andi';
const PI = 3.14;
var umur = 25;
</script>let dan const diperkenalkan di ES6; const untuk nilai konstan, let untuk variabel dengan scope blok. var memiliki function scope dan sebaiknya dihindari untuk mengurangi bug. JavaScript mendukung tipe data primitif seperti string, number, boolean, undefined, null, dan object (termasuk array dan function). Memahami perbedaan tipe data membantu menghindari kesalahan tipe (type coercion) yang tidak diinginkan.
Variabel dan Tipe Data
Variabel adalah tempat penyimpanan sementara di memori. String untuk teks, number untuk angka, boolean untuk true/false. Array dan object untuk struktur data lebih kompleks. Contoh array:
<script>
let buah = ['apel', 'pisang', 'jeruk'];
console.log(buah[0]); // 'apel'
</script>Kontrol Alur: Percabangan dan Perulangan
Kontrol alur menentukan jalannya program berdasarkan kondisi atau pengulangan. Percabangan menggunakan if, else if, else, dan switch. Contoh:
<script>
let nilai = 80;
if (nilai >= 90) {
console.log('A');
} else if (nilai >= 75) {
console.log('B');
} else {
console.log('C atau kurang');
}
</script>Perulangan menggunakan for, while, dan do...while. Contoh for loop:
<script>
for (let i = 0; i < 5; i++) {
console.log(i);
}
</script>Penggunaan kontrol alur yang tepat membuat kode lebih dinamis dan responsif terhadap data maupun interaksi pengguna.
Switch Case untuk Banyak Kondisi
Switch case memudahkan penanganan banyak kondisi daripada if-else berlapis. Contoh:
<script>
let hari = 'Senin';
switch (hari) {
case 'Senin':
console.log('Awal minggu');
break;
case 'Jumat':
console.log('Akhir minggu');
break;
default:
console.log('Hari biasa');
}
</script>Fungsi dan Event Handling
Fungsi adalah blok kode yang dapat dipanggil berulang kali. Dideklarasikan dengan function atau arrow function (ES6). Contoh:
<script>
function sapa(nama) {
return `Halo, ${nama}`;
}
console.log(sapa('Budi'));
const tambah = (a, b) => a + b;
console.log(tambah(2, 3));
</script>
Event handling memungkinkan JavaScript merespon interaksi pengguna seperti klik, input, atau scroll. Metode paling umum adalah addEventListener. Contoh:
<button id="btn">Klik Aku</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('Tombol ditekan');
});
</script>
Best Practices dalam Menulis JavaScript
Gunakan const dan let daripada var, pisahkan kode ke modul ES6 dengan import dan export, dan hindari global variable. Tulis kode bersih dengan linting (ESLint) dan dokumentasi JSDoc untuk makro dan tim besar. Optimalkan performa dengan debouncing atau throttling pada event scroll atau resize, dan gunakan async/await untuk menangani operasi asynchronous agar kode lebih mudah dibaca dibanding .then().
Kesimpulan
Memulai dengan JavaScript melibatkan penambahan kode ke halaman web, memahami sintaks dasar, variabel, tipe data, kontrol alur, fungsi, dan event handling. Dengan praktik terbaik seperti penggunaan const/let, modularisasi kode, dan optimasi asynchronous, Anda dapat menulis JavaScript yang efisien, maintainable, dan SEO-friendly. Teruslah bereksperimen dengan DOM, API browser, dan library atau framework untuk mengembangkan kemampuan Anda sebagai web developer modern.