Memulai Coding JavaScript

1. Menjalankan JavaScript dengan Tag Script

Browser membaca HTML untuk menampilkan struktur halaman. Agar browser tahu bahwa ada kode JavaScript yang harus dijalankan, kita menggunakan tag HTML khusus yaitu <script>.

Ada dua cara utama untuk melakukan ini: Internal dan Eksternal.

A. Internal Script (Kode di dalam HTML)

Kamu bisa menulis kode JavaScript langsung di dalam file HTML. Cara ini cocok untuk kode yang sangat sedikit.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar JS</title>
</head>
<body>
    <h1>Halo Dunia!</h1>

    <script>
        // Ini adalah kode JavaScript
        console.log("Pesan ini muncul di Console browser kamu");
        alert("Selamat datang di JavaScript!");
    </script>
</body>
</html>

B. External Script (File Terpisah) - Direkomendasikan

Untuk proyek yang nyata, kita memisahkan kode JavaScript ke file tersendiri (biasanya berekstensi .js). Ini membuat kode lebih rapi dan mudah dikelola.

Buat file index.html.
Buat file main.js di folder yang sama.

File: index.html

<!DOCTYPE html>
<html>
<body>
    <h1>Tes External Script</h1>

    <script src="main.js"></script>
</body>
</html>

File: main.js

console.log("File eksternal berhasil terhubung!");

Mengapa diletakkan di bawah?

Kamu akan sering melihat tag <script> diletakkan tepat sebelum penutup tag </body>.

Alasannya: Browser membaca kode dari atas ke bawah. Jika script diletakkan di atas (Head), browser akan sibuk memuat JavaScript sebelum menampilkan konten halaman (HTML), membuat website terasa lambat. Dengan meletakkannya di bawah, HTML tampil dulu, baru JavaScript berjalan.

Latihan 1:

Buat file latihan.html.
Buat file script.js.
Hubungkan keduanya.
Tulis kode di script.js untuk memunculkan alert("Saya siap belajar!").
Buka file html tersebut di browser dan pastikan popup muncul.

2. Variabel (Variables)

Variabel adalah nama yang diberikan untuk lokasi penyimpanan data di memori komputer. Sederhananya, ini adalah cara kita memberi label pada sebuah data agar bisa digunakan kembali nanti.

Di JavaScript modern, kita memiliki tiga cara mendeklarasikan variabel: var, let, dan const.

A. `var` (Cara Lama)

Ini adalah cara lama sebelum tahun 2015.

Kekurangan: Memiliki aturan jangkauan (scope) yang bisa membingungkan dan sering menyebabkan bug (kesalahan kode) yang tidak disengaja.
Saran: Hindari penggunaan var di proyek baru.

B. `let` (Data yang Bisa Berubah)

Gunakan let jika kamu yakin nilai variabel tersebut akan berubah di kemudian hari.

let skor = 0; // Deklarasi awal
console.log(skor); // Output: 0

skor = 10; // Mengubah nilai (re-assign)
console.log(skor); // Output: 10

// Perhatikan: Kita tidak menulis 'let' lagi saat mengubah nilai.

C. `const` (Data Konstan/Tetap)

Gunakan const (singkatan dari constant) jika nilainya tidak boleh diubah setelah dideklarasikan. Ini adalah praktik terbaik (best practice) untuk mencegah perubahan data yang tidak disengaja.

const pi = 3.14;
console.log(pi);

// pi = 3.15; // INI AKAN ERROR! Karena const tidak bisa diubah.

Aturan Penamaan Variabel

Gunakan gaya camelCase (huruf kecil di awal, huruf besar untuk kata berikutnya). Contoh: namaSaya, totalHarga.
Tidak boleh diawali dengan angka.
Tidak boleh menggunakan spasi.
Bersifat case-sensitive (nama dan Nama dianggap berbeda).

Latihan 2:

Tulis kode berikut di file script.js kamu:

Buat variabel const untuk menyimpan nama negara kamu (misal: "Indonesia").
Buat variabel let untuk menyimpan umur kamu.
Tampilkan keduanya menggunakan console.log(namaNegara, umur).
Coba ubah nilai umur, lalu tampilkan lagi.
Coba ubah nama negara, dan perhatikan error apa yang muncul di Console browser (tekan F12 di browser untuk melihat tab Console).

3. Tipe Data (Data Types)

Variabel bisa menyimpan berbagai jenis data. Berikut adalah tipe data dasar (primitif) di JavaScript yang wajib kamu tahu:

A. String (Teks)

Deretan karakter yang diapit oleh tanda kutip. Kamu bisa menggunakan kutip satu ', kutip dua ", atau backtick ```.

let namaDepan = "Budi";   // Double quote
let namaBelakang = 'Belakang'; // Single quote
let pesan = `Halo, ${namaDepan}`; // Backtick (Template Literal) - Fitur Modern

Info: Backtick memungkinkan kita menyisipkan variabel langsung ke dalam string menggunakan ${variabel}.

B. Number (Angka)

JavaScript tidak membedakan antara bilangan bulat (integer) dan bilangan desimal (float). Semuanya adalah Number.

let angkaBulat = 100;
let angkaDesimal = 3.14; // Gunakan titik, bukan koma
let negatif = -50;

C. Boolean (Logika)

Hanya memiliki dua nilai: true (benar) atau false (salah). Ini sangat penting untuk pengambilan keputusan logika (pengkondisian) nanti.

let sedangBelajar = true;
let sudahSelesai = false;

D. Undefined

Tipe data spesial yang berarti "variabel sudah dibuat, tapi belum ada isinya".

let alamat;
console.log(alamat); // Output: undefined

E. Null

Nilai spesial yang berarti "kosong" atau "tidak ada nilai". Berbeda dengan undefined, null biasanya sengaja kita set untuk menandakan kekosongan.

let hasilPencarian = null; // Sengaja dikosongkan

Cara Mengecek Tipe Data

Kamu bisa menggunakan operator typeof untuk mengetahui tipe data sebuah variabel.

let data = "Halo";
console.log(typeof data); // Output: "string"

data = 123;
console.log(typeof data); // Output: "number"

Latihan 3:

Di dalam file script.js kamu:

Buat variabel harga dengan nilai 15000.
Buat variabel namaProduk dengan nilai "Kopi".
Buat variabel isAvailable dengan nilai true.
Gunakan console.log() dan typeof untuk memeriksa tipe data ketiga variabel tersebut. Pastikan hasilnya sesuai (number, string, boolean).

Script, Variable & Data Types