Memahami Dasar JavaScript untuk Web Dinamis

JavaScript (JS) adalah salah satu pilar utama pengembangan web modern, bersama dengan HTML (struktur) dan CSS (presentasi). Jika HTML membangun kerangka dan CSS memberikannya gaya, maka JavaScript adalah otak yang memberikan interaktivitas dan fungsionalitas dinamis pada sebuah situs web. Memahami dasar-dasar JavaScript adalah langkah krusial bagi siapa pun yang ingin bergerak melampaui halaman web statis.

Apa Itu JavaScript?

JavaScript awalnya dikembangkan untuk membuat halaman web lebih hidup di sisi klien (browser pengguna). Namun, dengan munculnya lingkungan seperti Node.js, JS kini juga sangat kuat digunakan di sisi server. Intinya, JS adalah bahasa pemrograman skrip yang memungkinkan Anda memanipulasi konten halaman web setelah halaman dimuat, merespons tindakan pengguna, dan berkomunikasi dengan server tanpa perlu memuat ulang seluruh halaman.

Variabel: Tempat Menyimpan Data

Dalam pemrograman, kita perlu wadah untuk menyimpan informasi. Di JavaScript, wadah ini disebut variabel. Ada tiga kata kunci utama untuk mendeklarasikan variabel, meskipun saat ini const dan let adalah yang paling direkomendasikan:

Contoh deklarasi variabel:


// Menggunakan let untuk nilai yang bisa berubah
let umur = 25;
umur = 26; // Nilai berhasil diubah

// Menggunakan const untuk nilai tetap
const namaDepan = "Budi";
// namaDepan = "Andi"; // Ini akan menghasilkan error

Tipe Data Dasar

Setiap data yang disimpan harus memiliki tipe. Beberapa tipe data dasar dalam JS meliputi:

  1. String: Teks, selalu diapit tanda kutip ("Halo").
  2. Number: Angka, baik integer maupun desimal (10 atau 3.14).
  3. Boolean: Nilai logis, hanya true atau false.
  4. Null & Undefined: Mewakili ketiadaan nilai.

Struktur Kontrol: Pengambilan Keputusan

Program yang baik harus mampu membuat keputusan berdasarkan kondisi tertentu. Ini dilakukan menggunakan struktur kontrol seperti pernyataan if...else. 


let suhu = 30;

if (suhu > 28) {
    console.log("Cuaca panas, pakai baju tipis!");
} else if (suhu >= 20) {
    console.log("Cuaca sedang, nyaman.");
} else {
    console.log("Cuaca dingin, pakai jaket.");
}

Fungsi: Blok Kode yang Dapat Digunakan Kembali

Fungsi adalah inti dari pemrograman modular. Mereka adalah blok kode yang dirancang untuk melakukan tugas tertentu, dan dapat dipanggil berkali-kali tanpa harus menulis ulang logika di dalamnya. Ini sangat penting untuk menjaga kode tetap bersih dan efisien. 


// Deklarasi fungsi
function sapaPengguna(nama) {
    return "Halo, selamat datang " + nama + "!";
}

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

Interaksi dengan HTML (DOM)

Kekuatan sejati JavaScript di web terletak pada kemampuannya berinteraksi dengan Document Object Model (DOM). DOM adalah representasi terstruktur dari halaman HTML Anda. Melalui JS, Anda bisa memilih elemen HTML, mengubah teksnya, mengubah gayanya (CSS), atau bahkan menambahkan elemen baru.

Misalnya, untuk mengubah teks di dalam elemen dengan ID judul: 


// 1. Ambil elemen berdasarkan ID
const elemenJudul = document.getElementById('judul');

// 2. Ubah konten teksnya
elemenJudul.textContent = 'Judul Berubah Oleh JavaScript!';

Dengan menguasai variabel, tipe data, struktur kontrol, fungsi, dan manipulasi DOM, Anda telah menguasai fondasi paling penting dari bahasa JavaScript. Langkah selanjutnya adalah eksplorasi lebih dalam mengenai struktur data seperti Array dan Object, serta konsep asynchronous programming.

Related Posts