Mengenal JavaScript Dasar untuk Web Dinamis

Simbol JavaScript Logo Interaksi Web

JavaScript (JS) adalah bahasa pemrograman inti dari World Wide Web, bersama dengan HTML (struktur) dan CSS (gaya). Jika HTML menyediakan kerangka, dan CSS memberinya penampilan, maka JavaScript adalah yang memberikan kehidupan dan interaksi pada sebuah situs web. Memahami dasar-dasar JavaScript adalah langkah krusial bagi siapa pun yang ingin membangun pengalaman web modern yang dinamis.

Pada awalnya, JavaScript digunakan hampir secara eksklusif untuk memvalidasi formulir atau membuat efek sederhana. Namun, hari ini, berkat evolusi mesin seperti V8 (yang digunakan di Chrome dan Node.js), JS mampu menjalankan tugas-tugas kompleks di sisi klien (browser) maupun sisi server.

Variabel dan Tipe Data

Sama seperti bahasa pemrograman lainnya, JavaScript memerlukan wadah untuk menyimpan informasi. Wadah ini disebut variabel. Di era modern, kita cenderung menggunakan kata kunci let dan const.

Tipe data dasar dalam JS meliputi:

// String (Teks)
let nama = "Budi";

// Number (Angka, baik integer maupun desimal)
let usia = 25;
let harga = 19.99;

// Boolean (Benar atau Salah)
let aktif = true;

// Null (Tidak ada nilai yang disengaja)
let dataKosong = null;

// Undefined (Variabel telah dideklarasikan tapi belum diberi nilai)
let hasil;

Operator Dasar

Operator memungkinkan kita melakukan operasi pada variabel dan nilai. Operator aritmatika sangat umum digunakan: 

let a = 10;
let b = 3;

let tambah = a + b;      // 13
let kali = a * b;        // 30
let sisaBagi = a % b;    // 1 (karena 10 dibagi 3 sisa 1)

Struktur Kontrol: Kondisional (If/Else)

Struktur kontrol memungkinkan program Anda membuat keputusan. Pernyataan if...else adalah alat paling dasar untuk menjalankan blok kode tertentu berdasarkan kondisi tertentu. 

let skor = 75;

if (skor >= 70) {
    console.log("Selamat, Anda Lulus!");
} else if (skor >= 50) {
    console.log("Perlu remedial.");
} else {
    console.log("Anda Tidak Lulus.");
}

Output pada konsol akan menampilkan "Selamat, Anda Lulus!" karena kondisi pertama terpenuhi.

Perulangan (Loops)

Ketika Anda perlu mengulangi tugas berkali-kali, perulangan adalah jawabannya. for loop adalah yang paling umum untuk mengulang sejumlah kali yang sudah ditentukan. 

// Menghitung dari 1 sampai 5
for (let i = 1; i <= 5; i++) {
    console.log("Iterasi ke: " + i);
}

Fungsi: Blok Kode yang Dapat Digunakan Kembali

Fungsi adalah bagian kode yang terorganisir dan dapat digunakan kembali untuk melakukan satu tindakan spesifik. Ini sangat penting untuk membuat kode lebih bersih dan modular. 

// Mendefinisikan fungsi
function sapaPengguna(nama) {
    return "Halo, " + nama + "! Selamat datang.";
}

// Memanggil fungsi
let pesanSelamatDatang = sapaPengguna("Andi");
console.log(pesanSelamatDatang); // Output: Halo, Andi! Selamat datang.

Mengintegrasikan JavaScript ke HTML

Ada tiga cara utama untuk memasukkan JS ke dalam dokumen HTML:

  1. Inline: Menambahkan atribut langsung ke tag HTML (biasanya untuk event handler kecil).
  2. Internal: Menulis kode JS di antara tag <script> di dalam file HTML.
  3. External (Paling Disarankan): Menulis JS di file terpisah (misalnya, script.js) dan menautkannya menggunakan <script src="script.js"></script>, biasanya diletakkan sebelum tag penutup </body>.

Menguasai konsep-konsep dasar JavaScript ini—variabel, tipe data, operator, struktur kontrol, dan fungsi—akan memberikan fondasi yang kokoh. Setelah menguasai dasar, Anda siap untuk mempelajari konsep yang lebih mendalam seperti manipulasi DOM (Document Object Model) untuk mengubah halaman web secara langsung.

Related Posts