Pertemuan 1-2: Pengenalan & Fundamental

Mengenal JavaScript, Sintaks, Output, dan Variabel

Pengertian

JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Jika HTML adalah kerangka dan CSS adalah tampilannya, maka JavaScript adalah otaknya. JavaScript berjalan di sisi klien (di browser pengguna), memungkinkannya untuk memanipulasi konten halaman, merespons aksi pengguna (seperti klik dan input), dan berkomunikasi dengan server tanpa perlu me-reload halaman.

Analogi

Analogi: Sistem Kelistrikan Rumah
Bayangkan sebuah website adalah rumah. HTML adalah kerangka dan struktur (dinding, atap). CSS adalah dekorasi dan cat (warna dinding, model jendela). JavaScript adalah sistem kelistrikan dan semua perangkat elektronik. Saklar yang menyalakan lampu, bel pintu yang berbunyi saat ditekan, AC yang menyala saat panas—semua interaksi yang membuat rumah "hidup" dan merespons penghuninya adalah peran JavaScript.

Contoh Kode & Hasil

1. Menampilkan Output dengan alert()

Cara paling sederhana untuk menampilkan pesan pop-up kepada pengguna.

// Saat tombol diklik, fungsi ini akan berjalan
alert('Halo, ini JavaScript!');

Penjelasan Kode: alert() adalah fungsi bawaan JavaScript yang akan menghentikan eksekusi halaman dan menampilkan sebuah kotak dialog dengan pesan yang kita tulis di dalamnya.

2. Variabel untuk Menyimpan Data

Variabel adalah wadah untuk menyimpan nilai data. Kita menggunakan kata kunci let untuk nilai yang bisa berubah dan const untuk nilai yang tetap.

Hasil akan tampil di sini.

let nama = 'Budi';
const tahunLahir = 2005;
let umur = 2024 - tahunLahir;

// Menampilkan hasilnya ke console browser (F12)
console.log(nama + ' berumur ' + umur + ' tahun.');

Penjelasan Kode: Kita mendeklarasikan variabel nama dengan let karena nama bisa saja diubah. tahunLahir kita deklarasikan dengan const karena tidak akan berubah. Variabel umur adalah hasil perhitungan.

3. Mengubah Konten HTML

JavaScript dapat berinteraksi dengan elemen HTML melalui DOM (Document Object Model).

Teks ini akan diubah oleh JavaScript.

// Kode ini akan berjalan saat tombol diklik
document.getElementById('teks-ubah').innerHTML = 'Wow, teksnya sudah berubah!';

Penjelasan Kode: document.getElementById('teks-ubah') memilih elemen HTML dengan ID "teks-ubah". Properti .innerHTML kemudian digunakan untuk mengganti konten di dalam elemen tersebut.

Latihan Mandiri

Tugas: Kalkulator Sederhana

  1. Buat file HTML dan hubungkan dengan file JavaScript eksternal bernama latihan.js.
  2. Di HTML, buat sebuah paragraf dengan id="hasil".
  3. Di file latihan.js, buat dua variabel, angka1 dengan nilai 25 dan angka2 dengan nilai 10.
  4. Buat variabel ketiga bernama hasilKali yang berisi hasil perkalian angka1 dan angka2.
  5. Gunakan document.getElementById() untuk menampilkan hasilnya di dalam paragraf dengan pesan: "Hasil dari 25 x 10 adalah [hasilKali]".

Kesimpulan

Pada pertemuan ini, kita telah mempelajari bahwa JavaScript adalah bahasa pemrograman yang memberikan interaktivitas pada website. Kita telah memahami cara dasar untuk menampilkan output, menyimpan data menggunakan variabel (let dan const), dan yang terpenting, cara JavaScript memanipulasi elemen HTML. Memahami fondasi ini adalah langkah pertama dan paling krusial untuk menjadi seorang pengembang web.