1.1 Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman tingkat tinggi (high-level), dinamis (dynamically typed), berorientasi objek, dan berbasis skrip (scripting language) yang menjadi salah satu teknologi inti dalam pembangunan aplikasi web modern. Bersama dengan HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets), JavaScript membentuk tiga pilar utama pengembang web (The Holy Trinity of Web Development).

1. Peran 3 Pilar Utama Web Development

2. Karakteristik Utama JavaScript

• Client-Side Scripting: Secara tradisional, skrip JavaScript dieksekusi langsung di dalam browser pengguna (client), sehingga tidak memerlukan page reload untuk memproses aksi pengguna.
• Interaktif dan Dinamatis: Memungkinkan elemen pada halaman web untuk merespons masukan pengguna secara real-time (seperti klik tombol, validasi formulir, atau pembaruan konten secara otomatis).
• Interpreted / JIT Compiled: Kode JavaScript tidak memerlukan kompilasi manual ke file biner sebelum dijalankan; mesin browser mengompilasinya secara langsung saat runtime menggunakan teknik Just-In-Time (JIT) Compilation.
• Cross-Platform: Dapat berjalan di hampir semua sistem operasi yang memiliki browser web modern, serta dapat digunakan di sisi server (Server-Side) berkat kehadiran environment seperti Node.js.

3. Contoh Sederhana Penggunaan JavaScript

<!-- Contoh Interaktivitas Sederhana dengan JavaScript -->
<button onclick="sapaPengguna()">Klik Saya!</button>

<script>
  function sapaPengguna() {
    alert("Selamat datang di pembelajaran JavaScript!");
  }
</script>

Dengan baris kode di atas, saat pengguna menekan tombol "Klik Saya!", browser secara otomatis menjalankan fungsi JavaScript sapaPengguna() yang menampilkan dialog sapaan tanpa perlu mengunggah ulang (reload) halaman web.

1.2 Latar Belakang JavaScript

Sejarah dan latar belakang terciptanya JavaScript merupakan kisah menarik dalam evolusi dunia World Wide Web (WWW). JavaScript lahir dari kebutuhan untuk menjadikan halaman web lebih hidup dan tidak sekadar dokumen statis.

1. Asal-Usul dan Penciptaan

• Tahun Penciptaan: 1995
• Tokoh Pembuat: Brendan Eich saat bekerja di Netscape Communications Corporation.
• Durasi Pengembangan: Hanya dalam waktu 10 hari pada bulan Mei 1995!
• Tujuan Awal: Menambahkan bahasa skrip yang mudah digunakan pada browser Netscape Navigator untuk memvalidasi formulir dan memberikan efek interaktif ringan tanpa harus bergantung pada server.

2. Evolusi Nama JavaScript

1. Mocha: Nama kode (codename) awal saat bahasa ini dikembangkan pertama kali oleh Brendan Eich.
2. LiveScript: Nama resmi pertama saat dikirimkan dalam rilis beta Netscape Navigator 2.0 pada September 1995.
3. JavaScript: Pada Desember 1995, Netscape dan Sun Microsystems melakukan co-branding dan mengubah namanya menjadi JavaScript. Keputusan ini murni strategi pemasaran untuk memanfaatkan popularitas bahasa Java yang sedang booming saat itu, meskipun kedua bahasa tersebut memiliki arsitektur dan filosofi yang sangat berbeda.

3. Standardisasi Melalui ECMAScript

Untuk mencegah perpecahan (fragmentasi) akibat munculnya versi buatan Microsoft bernama JScript pada Internet Explorer, Netscape menyerahkan spesifikasi JavaScript kepada ECMA International pada tahun 1996.

• ECMAScript (ES) adalah standar resmi yang mengatur spesifikasi bahasa JavaScript.
• Versi standar pertama (ES1) dirilis pada tahun 1997.
• ES6 / ECMAScript 2015: Merupakan rilis terpenting dalam sejarah JavaScript yang membawa perombakan besar-besaran (seperti let/const, Arrow Functions, Classes, Promises, dan Modules).

4. Perkembangan dari Client-Side ke Server-Side

• 1995–2008: JavaScript dianggap sebagai bahasa pelengkap browser sederhana untuk animasi teks atau validasi input.
• 2008: Google merilis browser Chrome dengan mesin V8 JavaScript Engine yang sangat cepat.
• 2009: Ryan Dahl menciptakan Node.js, memungkinkan JavaScript dijalankan di luar browser (sisi server/backend). Perkembangan ini mengubah JavaScript menjadi bahasa Full-Stack serbaguna.

1.3 Bagaimana Cara Kerja JavaScript?

Memahami mekanisme eksekusi kode JavaScript di balik layar sangat penting bagi setiap web developer. Pemrosesan kode terjadi di dalam JavaScript Engine yang terintegrasi pada web browser atau sistem runtime.

1. Alur Eksekusi Kode JavaScript dalam Browser

Ketika sebuah halaman web yang mengandung kode JavaScript dimuat oleh browser, tahapan proses yang terjadi adalah sebagai berikut:

1. HTML Parsing & Tag Loading: Browser membaca dokumen HTML. Ketika menemukan tag <script>, browser mengunduh atau membaca kode JavaScript tersebut.
2. Parsing & AST Generation: Mesin JavaScript membaca teks kode sumber (source code) dan mengubahnya menjadi struktur data pohon sintaks yang disebut Abstract Syntax Tree (AST).
3. Compilation (JIT): Mesin JavaScript modern menggunakan kompilator Just-In-Time (JIT) untuk mengubah AST menjadi bahasa mesin (machine code) yang dioptimalkan secara cepat.
4. Execution: Kode mesin yang dihasilkan dieksekusi oleh CPU sistem pengguna.

2. Komponen Utama Mesin JavaScript (JavaScript Engine)

Di dalam mesin JavaScript (seperti Google V8), terdapat dua komponen memori utama:

• Memory Heap: Area memori alokasi tidak terstruktur tempat variabel, objek, dan fungsi disimpan.
• Call Stack: Struktur data tumpukan LIFO (Last In, First Out) yang mencatat lokasi eksekusi fungsi yang sedang berjalan dalam program.

+------------------------------------+
|         JavaScript Engine          |
|  +------------------+  +---------+ |
|  |   Memory Heap    |  |  Call   | |
|  |  (Objek & Var)   |  |  Stack  | |
|  +------------------+  +---------+ |
+------------------------------------+

3. Sifat Single-Threaded

JavaScript bersifat Single-Threaded, yang artinya hanya memiliki satu Call Stack dan hanya dapat mengeksekusi satu instruksi pada satu waktu.

Untuk menangani operasi lama (seperti pengunduhan data jaringan atau delay timer) tanpa membuat aplikasi "membeku" (freezing), JavaScript memanfaatkan mekanisme Event Loop dan pemrosesan asinkron (Asynchronous I/O).

1.4 Event-Driven Programming

JavaScript menganut paradigma Event-Driven Programming (pemrograman berbasis kejadian). Artinya, alur eksekusi program tidak hanya berjalan secara linier dari atas ke bawah, melainkan sebagian besar ditentukan oleh kejadian (event) yang dipicu oleh tindakan pengguna atau sistem.

1. Komponen Utama Event-Driven

Dalam paradigma ini, terdapat tiga konsep mendasar:

1. Event: Kejadian yang terjadi pada sistem atau browser (contoh: pengguna mengklik mouse, menekan tombol keyboard, mengubah ukuran jendela, atau halaman selesai dimuat).
2. Event Listener / Target: Elemen HTML atau objek yang mendengarkan atau menunggu terjadinya event tertentu.
3. Event Handler (Callback Function): Fungsi JavaScript yang akan dieksekusi secara otomatis sebagai respons ketika event tersebut terjadi.

2. Kejadian (Event) Populer di Web Browser

3. Contoh Implementasi Event Listener

// Mengambil elemen tombol dari dokumen HTML
const tombol = document.getElementById("btnSimpan");

// Menambahkan Event Listener untuk kejadian 'click'
tombol.addEventListener("click", function (event) {
  console.log("Tombol berhasil diklik!");
  alert("Data Anda telah disimpan.");
});

4. Mekanisme Event Loop & Queue

Dalam arsitektur event-driven JavaScript, ketika sebuah event terjadi:

1. Browser menangkap event dan memasukkan fungsi penangan (event handler) ke dalam Task Queue (Antrean Tugas).
2. Event Loop memantau Call Stack.
3. Jika Call Stack sedang kosong, Event Loop mengindahkan fungsi dari Task Queue ke Call Stack untuk segera dieksekusi.

1.5 Apa yang Bisa Dilakukan dengan JavaScript?

JavaScript telah berkembang pesat dari sekadar skrip kecil menjadi bahasa pemrograman multi-platform yang dapat digunakan di hampir semua ranah pengembangan perangkat lunak modern.

1. Penggunaan di Sisi Client (Client-Side Web Development)

• Manipulasi DOM: Mengubah isi teks, elemen HTML, struktur dokumen, atau atribut CSS secara langsung pada halaman yang sedang dibuka.
• Validasi Form Client-side: Memeriksa kelengkapan isi input formulir (seperti format email atau kekuatan kata sandi) sebelum data dikirim ke server.
• Komunikasi Asinkron (AJAX & Fetch API): Mengambil atau mengirim data ke server di latar belakang tanpa harus menyegarkan (reload) seluruh halaman web.
• Grafik Interaktif & Animasi: Membuat animasi visual 2D/3D interaktif menggunakan HTML5 Canvas, SVG, atau library seperti Three.js dan Chart.js.
• Penyimpanan Lokal (Web Storage): Menyimpan data pengguna di dalam browser menggunakan localStorage, sessionStorage, atau IndexedDB.

2. Penggunaan di Sisi Server (Server-Side Development)

Dengan hadirnya Node.js, Deno, dan Bun:

• Membangun RESTful API, GraphQL API, atau aplikasi web backend berskala besar.
• Mengelola database (MySQL, PostgreSQL, MongoDB).
• Menangani sistem Real-time Communication (seperti Chat, Notifikasi Langsung) menggunakan WebSocket atau Socket.io.

3. Penggunaan di Bidang Lain

1.6 Ragam Bahasa & Ekosistem JavaScript

Ekosistem JavaScript sangat kaya dan beragam. Seiring berjalannya waktu, JavaScript melahirkan berbagai varian bahasa turunan (superset), dialek, serta kerangka kerja (framework) yang memperluas kemampuannya.

1. Dialek dan Superset Bahasa

• Vanilla JavaScript: Sebutan untuk kode JavaScript murni tanpa bantuan library atau framework eksternal apapun.
• TypeScript: Superset buatan Microsoft yang menambahkan sistem pengetikan statis (static typing) opsional pada JavaScript. Kode TypeScript akan dikompilasi (transpiled) menjadi JavaScript standar.
• CoffeeScript / ActionScript: Bahasa pendahulu yang memberikan sintaksis alternatif sebelum munculnya ES6.
• JSX (JavaScript XML): Ekstensi sintaksis yang menggabungkan HTML di dalam JavaScript, populer digunakan dalam library React.

2. Paradigma Pemrograman dalam JavaScript

JavaScript adalah bahasa Multi-Paradigm yang mendukung beberapa gaya penulisan kode sekaligus:

1. Pemrograman Prosedural: Penulisan instruksi langkah demi langkah secara berurutan.
2. Pemrograman Berorientasi Objek (OOP): Menggunakan konsep Objek, Class, dan Prototype-based Inheritance.
3. Pemrograman Fungsional (FP): Menggunakan Pure Functions, First-Class Functions, dan menghindari efek samping (side effects).

3. Ekosistem Framework & Library Utama

                      +-------------------+
                      | Ekosistem JS      |
                      +---------+---------+
                                |
        +-----------------------+-----------------------+
        |                                               |
+-------v-------+                               +-------v-------+
|   Frontend    |                               |    Backend    |
+---------------+                               +---------------+
| • React.js    |                               | • Node.js     |
| • Vue.js      |                               | • Express.js  |
| • Angular     |                               | • NestJS      |
| • Svelte      |                               | • Deno / Bun  |
+---------------+                               +---------------+

1.7 JavaScript Bukan Java

Salah satu kesalahpahaman paling umum di kalangan pemula adalah menganggap JavaScript dan Java adalah bahasa yang sama atau saling berkaitan erat. Meskipun keduanya memiliki nama yang mirip, Java dan JavaScript adalah dua bahasa pemrograman yang sepenuhnya berbeda dengan konsep, arsitektur, dan tujuan penggunaan yang tidak sama.

"Java is to JavaScript as ham is to hamster." (Java dan JavaScript berbeda sebagaimana daging ham berbeda dengan hamster).

Perbandingan Komparatif: Java vs JavaScript

Alasan Historis Pemilihan Nama

Pemberian nama JavaScript pada tahun 1995 murni merupakan strategi pemasaran (marketing stunt). Saat itu bahasa Java sedang sangat populer dan mendapat perhatian besar di industri IT. Netscape memutuskan untuk mengganti nama awal bahasa mereka (LiveScript) menjadi JavaScript agar mendapat keuntungan dari kepopuleran nama Java.

1.8 Perkembangan Terkini JavaScript

JavaScript mengalami perkembangan yang sangat pesat. Sejak rilis bersejarah ES6 (ECMAScript 2015), organisasi TC39 (Technical Committee 39) merilis pembaruan standar ECMAScript secara berkala setiap tahun.

1. Fitur-Fitur Utama JavaScript Modern (ES6+)

• Deklarasi Variabel Modern: let dan const menggantikan penggunaan var untuk menghindari masalah hoisting dan function scoping.
• Arrow Functions: Penulisan fungsi secara lebih ringkas dengan sintaks () => {}.
• Template Literals: Penggabungan string yang lebih mudah menggunakan backtick (``) dan interpolasi ${variabel}.
• Destructuring Assignment: Ekstraksi nilai dari Array atau Objek secara praktis.
• Promises & Async/Await: Pemrograman asinkron yang jauh lebih rapi dan mudah dibaca dibandingkan metode Callback Hell terdahulu.
• ES Modules (import / export): Pengorganisasian kode secara modular ke dalam file-file terpisah.
• Optional Chaining (?.) & Nullish Coalescing (??): Penanganan nilai null atau undefined yang lebih aman dan efisien.

2. Perkembangan Runtime Baru

Selain Node.js yang menjadi penguasa server-side selama lebih dari satu dekade, kini hadir lingkungan runtime modern generasi baru:

• Deno: Diciptakan juga oleh Ryan Dahl (pembuat Node.js) dengan fokus pada keamanan default, dukungan TypeScript bawaan, dan kepatuhan pada standar web modern.
• Bun: Runtime JavaScript ultracepat yang dirancang sebagai pengganti Node.js secara drop-in, dilengkapi dengan bundler, test runner, dan Manajer Paket bawaan yang sangat cepat.

3. WebAssembly (WASM) & Masa Depan

Kehadiran WebAssembly (WASM) memungkinkan bahasa pemrograman berkinerja tinggi seperti C++, Rust, atau Go dikompilasi dan dijalankan di dalam browser bersandingan dengan JavaScript. Hal ini membuka peluang baru untuk aplikasi web tingkat berat seperti editor video, game 3D, dan pemrosesan citra tingkat lanjut di dalam browser.

1.9 Browser Web yang Mendukung JavaScript

Hampir seluruh web browser modern saat ini mendukung eksekusi JavaScript secara bawaan (built-in). Setiap vendor browser mengembangkan atau menggunakan mesin (engine) khusus untuk memproses dan mengeksekusi kode JavaScript.

1. Mesin JavaScript (JavaScript Engines) pada Browser Utama

2. Pengujian Kompatibilitas & Alat Transpiler

Karena setiap browser dan versi yang berbeda memiliki tingkat dukungan yang bervariasi terhadap fitur ECMAScript terbaru:

• Can I Use (caniuse.com): Situs web untuk mengecek apakah suatu fitur JavaScript/CSS didukung oleh versi browser tertentu.
• Babel: Alat transpiler yang mengubah kode JavaScript modern (ES6+) menjadi versi JavaScript lama (ES5) agar dapat berjalan pada browser versi lama (legacy browsers).
• Polyfill: Potongan kode JavaScript yang memberikan kemampuan fitur baru pada browser lama yang belum mendukung fitur tersebut secara native.

3. Cara Mengaktifkan / Mematikan JavaScript di Browser

Pengguna dapat menonaktifkan atau mengaktifkan JavaScript melalui menu Pengaturan Pengembang (Developer Tools) atau Privacy Settings di browser:

Pada Google Chrome:
Pengaturan -> Privasi dan Keamanan -> Setelan Situs -> JavaScript -> [Izinkan / Jangan Izinkan]

Catatan: Jika JavaScript dimatikan di browser, sebagian besar aplikasi web modern (seperti Gmail, YouTube, Google Maps, atau e-commerce) tidak akan dapat berfungsi sebagaimana mestinya.

2.1 Cara Menyisipkan JavaScript dalam Dokumen HTML

Untuk membuat halaman web HTML menjadi interaktif, kode JavaScript harus dihubungkan dengan dokumen HTML. Browser menyediakan tag khusus bernama <script> yang berfungsi sebagai jembatan untuk mengeksekusi instruksi JavaScript.

1. Tiga Metode Utama Menyisipkan JavaScript

Secara umum, terdapat 3 cara untuk menyisipkan kode JavaScript ke dalam dokumen HTML:

A. Internal Scripting (Embedded Script)

Kode JavaScript dituliskan secara langsung di dalam tag <script> yang diletakkan di dalam berkas HTML itu sendiri.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Internal Script</title>
</head>
<body>
    <h1>Belajar JavaScript Internal</h1>

    <script>
        // Kode JavaScript ditulis di sini
        console.log("Pesan ini muncul dari Internal Script");
        alert("Halo, Selamat Belajar!");
    </script>
</body>
</html>

B. External Scripting (File Terpisah)

Kode JavaScript ditulis dalam berkas terpisah berkestensi .js (misalnya main.js), kemudian dihubungkan ke dokumen HTML menggunakan atribut src pada tag <script>.

Berkas HTML (index.html):

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh External Script</title>
</head>
<body>
    <h1>Belajar JavaScript Eksternal</h1>

    <!-- Menghubungkan ke berkas JavaScript eksternal -->
    <script src="main.js"></script>
</body>
</html>

Berkas JavaScript (main.js):

// Catatan: Tidak perlu menuliskan tag <script> di berkas .js
console.log("Pesan ini berasal dari berkas main.js eksternal!");

C. Inline Scripting (Event Handler Atribut HTML)

Kode JavaScript disisipkan secara langsung di dalam atribut event milik elemen HTML (seperti onclick, onmouseover, onsubmit).

<!-- Disisipkan langsung pada atribut onclick -->
<button onclick="alert('Tombol diklik secara inline!')">Klik Saya</button>

Catatan Pengajaran: Penggunaan Inline Scripting sangat tidak disarankan untuk aplikasi skala besar karena menyatukan struktur HTML dengan logika program (code smell).

2. Perbandingan Ketiga Metode

2.2 Kapan JavaScript Digunakan?

JavaScript digunakan ketika halaman web membutuhkan perilaku dinamis, logika pemrograman, atau interaktivitas pengguna yang tidak dapat ditangani oleh HTML dan CSS murni.

1. Skenario Utama Penggunaan JavaScript

A. Validasi Input Formulir di Sisi Klien (Client-Side Validation)

Sebelum data formulir dikirimkan ke server backend, JavaScript dapat mengecek keabsahan data terlebih dahulu di browser pengguna.

• Memeriksa apakah bidang nama/email sudah diisi.
• Memeriksa apakah format alamat email sesuai.
• Memastikan kata sandi memenuhi kriteria panjang dan karakter.

B. Manipulasi DOM & Konten Dinamis

JavaScript digunakan saat tampilan atau isi halaman perlu berubah secara instan tanpa memuat ulang (reload) halaman.

• Menampilkan/menyembunyikan menu navigasi samping (sidebar toggle).
• Menampilkan jendela pop-up dialog (modal box).
• Mengubah tema halaman (Dark Mode / Light Mode).

C. Komunikasi Asinkron (AJAX / Fetch API)

Diperlukan ketika aplikasi web ingin mengambil data baru dari server secara real-time.

• Mengambil balasan komentar baru di media sosial.
• Fitur pencarian otomatis (auto-complete / live search).
• Pembaruan papan skor olahraga atau harga saham secara langsung.

D. Interaktivitas Media & UI/UX Khusus

• Pemutar audio/video kustom.
• Komponen Image Carousel / Slider.
• Peta interaktif (seperti Google Maps).
• Game berbasis browser (2D/3D Canvas).

2. Kapan JavaScript TIDAK Boleh Digunakan?

Meskipun JavaScript sangat berdaya guna, ada situasi di mana JavaScript sebaiknya tidak digunakan:

1. Keamanan Utama & Rahasia Server: Jangan pernah meletakkan logika keamanan rahasia (seperti kunci enkripsi private, kata sandi database) di JavaScript client-side karena kode tersebut dapat dilihat oleh siapapun melalui View Source atau Developer Tools.
2. Pengganti Struktur Murni HTML: Jangan gunakan JavaScript hanya untuk membuat elemen standar jika HTML murni sudah menyediakannya (misalnya membuat tombol menggunakan <div> yang diberi event JavaScript daripada memakai <button>).

2.3 Di Mana JavaScript Disisipkan dalam Dokumen HTML?

Lokasi penempatan tag <script> di dalam struktur dokumen HTML memegang peranan penting terhadap kecepatan pemuatan (loading performance) dan urutan eksekusi aplikasi web.

1. Opsi Penempatan Tag <script>

A. Di dalam Bagian <head>

<!DOCTYPE html>
<html>
<head>
    <title>Penempatan di Head</title>
    <script src="app.js"></script>
</head>
<body>
    <h1 id="judul">Selamat Datang</h1>
</body>
</html>

• Dampak: Browser akan menghentikan pembacaan HTML (parsing blocking), mengunduh file app.js, dan mengeksekusinya sebelum elemen <body> selesai digambar.
• Risiko: Jika script mencoba mengakses elemen HTML (seperti document.getElementById("judul")), akan terjadi error karena elemen tersebut belum dibuat oleh browser saat script berjalan.

B. Di Bagian Akhir <body> (Sebelum </body>)

<!DOCTYPE html>
<html>
<head>
    <title>Penempatan Sebelum Body Tutup</title>
</head>
<body>
    <h1 id="judul">Selamat Datang</h1>

    <!-- Direkomendasikan secara konvensional -->
    <script src="app.js"></script>
</body>
</html>

• Dampak: Seluruh elemen visual HTML diparse dan ditampilkan terlebih dahulu ke layar pengguna sebelum skrip diunduh dan dijalankan.
• Keuntungan: Mencegah freezing tampilan dan memastikan semua elemen DOM sudah siap diakses oleh skrip.

2. Fitur Modern: Atribut async dan defer

Pada browser modern, kita dapat menempatkan skrip di bagian <head> tanpa menghambat render halaman dengan memanfaatkan atribut async atau defer:

<!-- Menggunakan async -->
<script src="analytics.js" async></script>

<!-- Menggunakan defer -->
<script src="main.js" defer></script>

Perbandingan Alur Eksekusi:

[Tanpa Atribut] HTML Parsing ===> [ Unduh JS | Eksekusi JS ] ===> Lanjut HTML Parsing
[async]         HTML Parsing ===== (Unduh JS) =====> [ Eksekusi JS ] ===> Lanjut HTML Parsing
[defer]         HTML Parsing ======================================> [ Eksekusi JS ]

2.4 Bagaimana Jika Browser Tidak Mendukung JavaScript?

Meskipun hampir semua browser web saat ini sudah mendukung JavaScript, ada beberapa kondisi di mana kode JavaScript tidak dapat berjalan:

1. Pengguna sengaja mematikan fitur JavaScript melalui pengaturan browser demi alasan privasi atau keamanan.
2. Browser lawas atau perangkat embedded khusus (seperti pembaca layar/screen-reader tertentu) yang tidak memiliki engine JavaScript.
3. Atribut keamanan jaringan/firewall perusahaan yang memblokir skrip eksternal.

1. Pengenalan Tag <noscript>

Untuk mengantisipasi situasi di atas, standar HTML menyediakan tag khusus bernama <noscript>.

Isi atau konten di dalam tag <noscript> hanya akan ditampilkan oleh browser jika JavaScript sedang tidak aktif atau tidak didukung.

Contoh Penggunaan Tag <noscript>:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Uji Coba Noscript</title>
    <style>
        .noscript-warning {
            background-color: #ffcccc;
            color: #990000;
            padding: 15px;
            border: 1px solid #990000;
            margin: 10px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <!-- Pesan alternatif bagi browser tanpa JavaScript -->
    <noscript>
        <div class="noscript-warning">
            ⚠️ Perhatian: Fitur JavaScript pada browser Anda sedang nonaktif. 
            Beberapa fitur interaktif pada halaman web ini mungkin tidak akan berfungsi dengan baik.
        </div>
    </noscript>

    <h1>Selamat Datang di Portal Kami</h1>
    <p id="pesan-dinamis">Halaman sedang dimuat...</p>

    <script>
        // Kode ini hanya berjalan jika JavaScript aktif
        document.getElementById("pesan-dinamis").innerText = "JavaScript aktif dan berjalan dengan normal!";
    </script>
</body>
</html>

2. Prinsip Progressive Enhancement

Dalam perancangan web modern (web design best practices), pengembang disarankan menerapkan prinsip Progressive Enhancement:

• Fungsi Dasar Terlebih Dahulu: Pastikan konten dan informasi utama web tetap dapat dibaca dan diakses menggunakan HTML murni tanpa bergantung pada JavaScript.
• Peningkatan Berbertahap: Gunakan JavaScript sebagai lapisan peningkatan (enhancement layer) untuk memberikan pengalaman pengguna (UI/UX) yang lebih halus dan interaktif.

2.5 Script Eksternal JavaScript

Memisahkan kode JavaScript ke dalam berkas terpisah (.js) adalah standar industri dalam pengembangan aplikasi web modern.

1. Cara Membuat dan Menghubungkan Script Eksternal

1. Buat berkas baru dengan ekstensi .js (misalnya app.js).
2. Tuliskan kode JavaScript di dalam berkas tersebut tanpa menggunakan tag <script>.
3. Hubungkan berkas tersebut ke dokumen HTML menggunakan atribut src pada tag <script>.

Struktur Folder Proyek:

my-website/
├── index.html
└── js/
    ├── app.js
    └── utils.js

2. Contoh Kode

Berkas js/app.js:

// Logika Aplikasi Utama
function hitungTotal(harga, jumlah) {
    return harga * jumlah;
}

console.log("Total belanja: Rp" + hitungTotal(50000, 3));

Berkas index.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Sistem Kasir Web</title>
</head>
<body>
    <h1>Aplikasi Kasir</h1>

    <!-- Menghubungkan file JavaScript dari folder 'js' -->
    <script src="js/app.js" defer></script>
</body>
</html>

3. Menghubungkan Lebih dari Satu Script Eksternal

Jika proyek web memiliki beberapa berkas JavaScript, kita dapat menghubungkannya secara berurutan:

<!-- Urutan pemanggilan sangat penting jika file kedua bergantung pada file pertama -->
<script src="js/utils.js" defer></script>
<script src="js/app.js" defer></script>

Aturan Penting Path File (src):

• src="app.js" $\rightarrow$ Berkas berada di folder yang sama dengan berkas HTML.
• src="js/app.js" $\rightarrow$ Berkas berada di dalam sub-folder js.
• src="https://cdn.example.com/library.js" $\rightarrow$ Mengambil berkas eksternal dari server CDN jaringan internet.

2.6 Keuntungan Menggunakan Script Eksternal JavaScript

Penggunaan berkas script eksternal (.js) merupakan praktek terbaik (best practice) yang sangat dianjurkan bagi pengembang web. Berikut adalah keuntungan utamanya:

1. Pemisahan Kode (Separation of Concerns)

Pengorganisasian kode yang bersih memisahkan tiga tanggung jawab utama web development:

• HTML: Menangani struktur data dan dokumen.
• CSS: Menangani gaya dan tampilan visual.
• JavaScript: Menangani logika dan interaktivitas.

Dengan memisahkan ketiga hal ini, berkas HTML menjadi jauh lebih ringkas dan mudah dibaca.

2. Kemudahan Perawatan Kode (Maintainability)

Jika terjadi kesalahan (bug) atau perubahan logika pada aplikasi, pengembang cukup memperbaiki kode pada berkas .js terkait tanpa harus menjelajahi ribuan baris kode HTML.

3. Penggunaan Ulang Kode (Code Reusability)

Satu berkas skrip eksternal (misalnya validation.js atau theme.js) dapat dihubungkan ke puluhan atau ratusan halaman HTML yang berbeda dalam satu situs web.

               +----------------+
               |  theme-mode.js |
               +-------+--------+
                       |
     +-----------------+-----------------+
     |                 |                 |
+----v----+       +----v----+       +----v----+
| home.html|       |about.html|       |cart.html |
+---------+       +---------+       +---------+

4. Kecepatan Pemuatan Melalui Caching Browser (Performance & Caching)

Browser web menyimpan berkas JavaScript eksternal di dalam memori Cache.

• Ketika pengguna berpindah dari halaman index.html ke about.html, browser tidak perlu mengunduh ulang berkas .js yang sama dari jaringan.
• Hal ini secara signifikan menghemat penggunaan kuota internet dan mempercepat waktu pemuatan (page load time).

5. Efisiensi Kolaborasi Tim

Dalam sebuah tim pengembang:

• Pengembang Frontend HTML/CSS dapat bekerja pada berkas index.html.
• Pengembang JavaScript dapat bekerja secara bersamaan pada berkas app.js tanpa risiko terjadinya konflik pengeditan berkas (merge conflict).

3.1 Editor Program JavaScript

Untuk menulis dan mengelola kode JavaScript dengan efisien, seorang pengembang membutuhkan perangkat lunak penyunting kode (code editor).

1. Kategori Penyunting Kode

1. Text Editor Sederhana (misalnya Notepad): Dapat digunakan untuk menulis kode, namun tidak memiliki fitur bantuan seperti penandaan warna sintaksis (syntax highlighting) atau verifikasi kesalahan.
2. Modern Code Editor / IDE (seperti VS Code, WebStorm): Dilengkapi dengan berbagai fitur pintar yang mempercepat proses pengodean, pelacakan bug, dan integrasi dengan peralatan pengembangan modern.

2. Pilihan Editor Populer untuk JavaScript

3. Fitur Penting Editor JavaScript Modern

• Syntax Highlighting: Mewarnai kata kunci, variabel, string, dan fungsi agar kode mudah dibaca.
• Auto-Completion (IntelliSense): Memberikan saran melengkapi kode dan dokumentasi parameter secara otomatis saat mengetik.
• Linter & Formatter (ESLint & Prettier): Memeriksa potensi kesalahan sintaksis dan merapikan format kode sesuai standar industri.
• Terminal Terintegrasi: Memungkinkan eksekusi perintah Node.js atau Git langsung dari dalam editor.

4. Browser Developer Console sebagai Live Editor

Setiap browser modern dilengkapi dengan Developer Tools (tekan F12 atau Ctrl + Shift + I $\rightarrow$ tab Console). Tab Console ini berfungsi sebagai lingkungan Read-Eval-Print Loop (REPL) tempat kita dapat mengetikkan dan menguji baris kode JavaScript secara langsung di browser.

// Ketik langsung di Browser Console:
console.log("Pengujian langsung di Browser Console!");

3.2 Aturan Dasar Pemrograman JavaScript

Dalam menulis program menggunakan JavaScript, terdapat beberapa aturan dasar sintaksis yang wajib dipahami agar program dapat berjalan dengan benar dan bebas dari kesalahan (error).

3.2.1 Case Sensitive

JavaScript adalah bahasa pemrograman yang case-sensitive (peka terhadap huruf besar dan huruf kecil). Artinya, nama variabel, nama fungsi, keyword, atau pengenal (identifier) lain yang ditulis dengan huruf besar dan huruf kecil dianggap sebagai hal yang berbeda.

Contoh Kasus:

• Variabel nama, Nama, dan NAMA adalah tiga variabel terpisah yang berbeda.
• Kata kunci bahasa seperti while, if, function harus ditulis dengan huruf kecil. Menulis While atau IF akan menyebabkan kesalahan sintaksis (SyntaxError).

let nama = "Budi";
let Nama = "Andi";

console.log(nama); // Output: Budi
console.log(Nama); // Output: Andi

// Menggunakan kata kunci dengan huruf besar akan ERROR:
// IF (nama === "Budi") { ... } // Uncaught SyntaxError: Unexpected identifier

3.2.2 Penulisan Perintah (Statements & Semicolons)

Perintah atau instruksi dalam JavaScript disebut sebagai statement. Setiap statement memberi tahu komputer untuk melakukan suatu tindakan tertentu.

Penggunaan Semicolon (Titik Koma ;):

1. Pengakhir Statement: Dianjurkan untuk mengakhiri setiap perintah dengan tanda titik koma (;).
2. Automatic Semicolon Insertion (ASI): JavaScript memiliki fitur ASI yang secara otomatis menyisipkan titik koma jika pembatas baris (newline) ditemukan. Walaupun opsional pada beberapa kondisi, penggunaan titik koma secara eksplisit sangat disarankan untuk menghindari perilaku yang tidak diinginkan (side-effect).

let a = 10;
let b = 20;
let hasil = a + b;
console.log(hasil);

3.2.3 Satu Baris Lebih dari Satu Perintah

JavaScript mengizinkan Anda menuliskan lebih dari satu perintah dalam satu baris, dengan syarat setiap perintah harus dipisahkan oleh tanda titik koma (;).

Contoh Penulisan:

// Satu baris berisi lebih dari satu perintah (dipisahkan semicolon):
let x = 5; let y = 10; let total = x + y; console.log(total);

Catatan Praktik Terbaik (Best Practice): Meskipun diperbolehkan menuliskan beberapa perintah dalam satu baris, sangat disarankan untuk menuliskan satu perintah per baris demi menjaga keterbacaan kode (code readability) dan mempermudah proses pemeliharaan serta debugging.

3.3 Tipe Data

Tipe data adalah klasifikasi nilai yang memberi tahu komputer bagaimana data tersebut dapat digunakan dan diolah dalam program. JavaScript bersifat dynamically typed, artinya variabel tidak terikat pada satu tipe data tertentu dan nilainya dapat berubah tipe saat runtime.

3.3.1 Numerik (Number)

JavaScript hanya memiliki satu tipe data umum untuk angka, yaitu Number (berbasis format IEEE 754 64-bit float). Tipe ini mencakup bilangan bulat (integer) maupun bilangan pecahan (floating-point).

let umur = 25;           // Integer
let nilaiIPK = 3.85;      // Floating-point
let nilaiNegatif = -15;   // Bilangan negatif

// Nilai khusus numerik:
let takHingga = 1 / 0;    // Infinity
let bukanAngka = "abc" / 2; // NaN (Not a Number)

3.3.2 String

String digunakan untuk menyimpan teks dan karakter. String dapat diapit dengan tanda petik tunggal ('), tanda petik ganda ("), atau template literal / backtick (`).

let namaDepan = "Budi";
let namaBelakang = 'Santoso';

// Template Literal (ES6) memungkinkan penyisipan variabel (${...}):
let sapaan = `Selamat datang, ${namaDepan} ${namaBelakang}!`;
console.log(sapaan); // Output: Selamat datang, Budi Santoso!

3.3.3 Boolean

Tipe data Boolean hanya memiliki dua nilai logika: true (benar) atau false (salah). Tipe ini umumnya digunakan dalam kondisi percabangan (control flow).

let sudahLulus = true;
let memilikiAkses = false;

if (sudahLulus) {
  console.log("Selamat, Anda telah lulus!");
}

3.3.4 Date

Date adalah objek bawaan (built-in object) di JavaScript yang digunakan untuk mengelola tanggal, waktu, dan penanggalan.

// Tanggal dan waktu saat ini
let sekarang = new Date();
console.log(sekarang);

// Tanggal spesifik (Tahun, Bulan 0-indexed, Tanggal)
let ulangTahun = new Date(2000, 4, 15); // 15 Mei 2000

3.3.5 Objek (Object)

Object adalah kumpulan pasangan key-value (kunci dan nilai) yang digunakan untuk menyimpan kumpulan data terstruktur atau entitas yang lebih kompleks.

let mahasiswa = {
  nim: "20261001",
  nama: "Siti Rahma",
  jurusan: "Teknik Informatika",
  IPK: 3.90
};

// Mengakses nilai properti objek:
console.log(mahasiswa.nama); // Siti Rahma
console.log(mahasiswa["jurusan"]); // Teknik Informatika

3.3.6 RegExp (Regular Expression)

RegExp adalah tipe data objek yang digunakan untuk mencocokkan pola teks (pattern matching) dan pencarian atau penggantian string.

// Membentuk pola RegExp untuk mengecek angka:
let polaAngka = /[0-9]+/;

let teks = "Kode pos 12345";
let hasilUji = polaAngka.test(teks);
console.log(hasilUji); // true

3.3.7 null dan undefined

null dan undefined melambangkan ketidakberadaan nilai, namun dengan makna yang berbeda:

• undefined: Variabel telah dideklarasikan tetapi belum diberi nilai (unassigned).
• null: Nilai sengaja dikosongkan secara eksplisit oleh programmer.

let x;
console.log(x); // undefined

let y = null;
console.log(y); // null

console.log(typeof x); // "undefined"
console.log(typeof y); // "object" (bug historis di JS)

Ringkasan Tipe Data JavaScript

3.4 Variabel

Variabel adalah wadah (container) berlabel di memori yang digunakan untuk menyimpan nilai data dalam program. Nilai yang tersimpan dalam variabel dapat dibaca, diubah, dan diproses selama program berjalan.

3.4.1 Variabel Tunggal

Variabel tunggal merepresentasikan lokasi penyimpanan yang menampung satu nilai pada satu waktu. Deklarasi variabel dalam JavaScript modern dapat dilakukan menggunakan kata kunci var, let, atau const.

Pendeklarasian Variabel:

• var: Cara lama (ES5), memiliki function scope, dan dapat di-re-deklarasi (kurang disarankan di JS modern).
• let: Cara modern (ES6), memiliki block scope, nilai variabel dapat diubah (mutable).
• const: Cara modern (ES6), memiliki block scope, nilainya konstan / tidak dapat diubah (immutable assignment).

// Deklarasi dan inisialisasi:
var namaDepan = "Ahmad";
let usia = 20;
const PI = 3.14159;

// Mengubah nilai variabel let:
usia = 21; // Boleh

// Mengubah nilai variabel const akan ERROR:
// PI = 3.14; // TypeError: Assignment to constant variable.

3.4.2 Array

Array adalah tipe variabel khusus yang dapat menampung banyak nilai sekaligus dalam satu variabel dengan menggunakan indeks posisi (dimulai dari 0).

// Deklarasi Array menggunakan kurung siku []:
let daftarBuah = ["Apel", "Jeruk", "Mangga", "Pisang"];

// Mengakses elemen array berdasarkan indeks:
console.log(daftarBuah[0]); // Apel
console.log(daftarBuah[2]); // Mangga

// Menambah atau mengubah elemen:
daftarBuah[1] = "Anggur"; // Mengganti 'Jeruk' menjadi 'Anggur'
daftarBuah.push("Melon"); // Menambahkan di akhir array

console.log(daftarBuah.length); // Jumlah elemen: 5

3.4.3 Lingkup dan Umur Variabel (Scope & Lifecycle)

Lingkup (scope) menentukan wilayah dalam kode di mana suatu variabel dapat diakses dan digunakan, sedangkan umur variabel (lifecycle) adalah jangka waktu variabel tersebut tersimpan di memori.

1. Global Scope (Lingkup Global)

Variabel yang dideklarasikan di luar fungsi atau blok kode mana pun. Variabel global dapat diakses dari bagian mana pun dalam kode dan terus hidup selama halaman web aktif.

let variabelGlobal = "Saya dapat diakses dari mana saja";

function tampilkan() {
  console.log(variabelGlobal); // Berhasil diakses
}

2. Function Scope (Lingkup Fungsi)

Variabel yang dideklarasikan di dalam fungsi (menggunakan var, let, atau const). Variabel ini diciptakan saat fungsi dipanggil dan dihancurkan saat fungsi selesai dieksekusi.

function hitung() {
  var pesanFungsi = "Hanya ada di dalam fungsi";
  console.log(pesanFungsi);
}

hitung();
// console.log(pesanFungsi); // ReferenceError: pesanFungsi is not defined

3. Block Scope (Lingkup Blok)

Variabel yang dideklarasikan dengan let dan const di dalam blok kurung kurawal { ... } (seperti if, for, while). Variabel tidak dapat diakses di luar blok tersebut.

if (true) {
  let variabelBlok = "Tersedia hanya di blok ini";
  var variabelVar = "Bisa tembus luar blok!";
}

// console.log(variabelBlok); // ReferenceError
console.log(variabelVar);     // Berhasil (karena var tidak punya block scope)

Perbandingan var, let, dan const

3.5 Perintah Dasar

Dalam pemrograman JavaScript, perintah dasar mencakup mekanisme pengisian nilai (assignment), penanganan masukan pengguna (input), serta penayangan hasil ke layar (output).

3.5.1 Assignment (Pengisian Nilai)

Assignment adalah proses memberikan nilai ke dalam suatu variabel menggunakan operator sama dengan (=). Nilai di sebelah kanan operator dievaluasi terlebih dahulu, kemudian disimpan ke variabel di sebelah kiri.

let alas = 10;
let tinggi = 5;

// Assignment dengan hasil ekspresi matematika:
let luas = 0.5 * alas * tinggi;

// Re-assignment (pengisian ulang nilai):
alas = 15;

3.5.2 Perintah Output

JavaScript memiliki beberapa metode bawaan untuk menampilkan keluaran (output) kepada pengguna maupun pengembang:

1. console.log(): Menampilkan pesan atau data pada Konsol Pengembang (Browser Developer Console). Utama digunakan untuk debugging.
2. document.write(): Menulis teks atau elemen HTML langsung ke dalam dokumen halaman web.
3. alert(): Menampilkan kotak dialog peringatan pop-up sederhana.
4. innerHTML: Menampilkan hasil dengan mengubah teks/elemen di dalam tag HTML tertentu.

// 1. Output ke Console
console.log("Nilai luas:", luas);

// 2. Output ke Dokumen HTML
document.write("<h3>Hasil Perhitungan Luas Segitiga</h3>");
document.write("Luas = " + luas);

// 3. Output via Alert Popup
alert("Proses perhitungan selesai!");

3.5.3 Perintah Input

Di lingkungan browser web, masukan pengguna dapat diperoleh melalui:

1. Formulir HTML: Mengambil nilai dari komponen input seperti <input>, <textarea>, atau <select>.
2. Kotak Dialog Dialog Pop-up (prompt): Menerima masukan berupa teks langsung dari pengguna melalui dialog pop-up browser.

3.5.4 prompt() dan confirm()

1. prompt(pesan, nilaiAwal)

Menampilkan kotak dialog input teks. Fungsi ini mengembalikan nilai berupa String jika pengguna menekan tombol OK, atau null jika pengguna menekan tombol Cancel.

Penting: Karena prompt() mengembalikan tipe data String, lakukan konversi angka menggunakan parseInt() atau parseFloat() jika masukan akan diolah secara matematis.

let nama = prompt("Masukkan nama Anda:", "Budi");
let inputUmur = prompt("Masukkan umur Anda:");
let umur = parseInt(inputUmur); // Mengubah string menjadi integer

2. confirm(pesan)

Menampilkan dialog konfirmasi dengan tombol OK dan Cancel. Mengembalikan nilai true jika OK diklik, atau false jika Cancel diklik.

let yakin = confirm("Apakah Anda yakin ingin menghapus data ini?");
if (yakin) {
  console.log("Data dihapus.");
} else {
  console.log("Pembatalan penghapusan.");
}

3.5.5 Contoh Lengkap

Berikut adalah program sederhana interaktif yang menghitung luas persegi panjang dari masukan pengguna:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Kalkulator Luas Persegi Panjang</title>
</head>
<body>

    <h2>Kalkulator Luas Persegi Panjang</h2>
    <div id="hasil"></div>

    <script>
        // 1. Input menggunakan prompt
        let stringPanjang = prompt("Masukkan Panjang (cm):", "10");
        let stringLebar = prompt("Masukkan Lebar (cm):", "5");

        // 2. Konversi Tipe Data (String ke Float)
        let panjang = parseFloat(stringPanjang);
        let lebar = parseFloat(stringLebar);

        // 3. Assignment dan Perhitungan
        let luas = panjang * lebar;
        let keliling = 2 * (panjang + lebar);

        // 4. Output ke Console
        console.log(`Panjang: ${panjang}, Lebar: ${lebar}, Luas: ${luas}`);

        // 5. Output ke Halaman HTML via innerHTML
        document.getElementById("hasil").innerHTML = `
            <p><strong>Panjang:</strong> ${panjang} cm</p>
            <p><strong>Lebar:</strong> ${lebar} cm</p>
            <hr>
            <p><strong>Luas:</strong> ${luas} cm²</p>
            <p><strong>Keliling:</strong> ${keliling} cm</p>
        `;

        // 6. Output Alert Popup
        alert(`Perhitungan selesai! Luas Persegi Panjang adalah ${luas} cm²`);
    </script>

</body>
</html>

3.6 Operator

Operator adalah simbol khusus yang digunakan dalam pemrograman untuk melakukan manipulasi atau operasi tertentu pada variabel dan nilai (disebut operand).

3.6.1 Operator Berdasar Jumlah Operand

Berdasarkan jumlah operand yang dioperasikan, operator dapat dikelompokkan menjadi:

1. Operator Unary: Membutuhkan hanya 1 operand.
2. Operator Binary: Membutuhkan 2 operand.
3. Operator Ternary: Membutuhkan 3 operand (misalnya kondisi ? nilai1 : nilai2).

3.6.2 Operator Unary

Operator yang hanya bekerja pada satu operand.

let x = 5;

// Increment (Penambahan 1)
x++; // x menjadi 6

// Decrement (Pengurangan 1)
x--; // x kembali menjadi 5

// Unary Plus (+) dan Negasi (-)
let a = "10";
let b = +a;  // Mengonversi string "10" menjadi angka 10
let c = -b;  // Mengubah menjadi nilai negatif -10

// Operator typeof
console.log(typeof x); // "number"

// Operator Logical NOT (!)
let status = false;
console.log(!status); // true

3.6.3 Operator Binary

Operator yang membutuhkan dua operand, ditempatkan di antara operand kiri dan operand kanan (misal: a + b, x > y).

let p = 10;
let q = 3;
let hasil = p * q; // Operator * beroperasi pada operand p dan q

3.6.4 Operator Berdasar Tipe Data

3.6.4.1 Operator Aritmetika

Digunakan untuk operasi matematika dasar.

3.6.4.2 Operator Assignment (Pengisian)

Digunakan untuk memasukkan atau mengupdate nilai ke dalam variabel.

3.6.4.3 Operator Bit (Bitwise Operator)

Memproses angka dalam bentuk bit biner 32-bit.

3.6.4.4 Operator String (Penggabungan String)

Operator + digunakan untuk mengabungkan (concatenation) dua atau lebih string.

let kata1 = "Pemrograman";
let kata2 = "Web";
let kalimat = kata1 + " " + kata2; // "Pemrograman Web"

// Jika dikombinasikan dengan angka:
console.log("Nilai: " + 100); // "Nilai: 100" (Konversi otomatis ke string)

3.6.4.5 Operator Pembandingan (Relasional)

Digunakan untuk membandingkan dua nilai dan menghasilkan nilai Boolean (true atau false).

3.6.4.6 Operator Logika

Digunakan untuk menentukan logika antara variabel atau nilai Boolean.

3.7 Ekspresi

Dalam JavaScript, ekspresi (expression) adalah setiap unit kode valid yang dapat dievaluasi (evaluated) untuk menghasilkan sebuah nilai tunggal.

1. Konsep dasar Ekspresi

Ekspresi dapat berupa kombinasi sederhana dari nilai literal atau variabel, hingga kombinasi kompleks yang melibatkan operator dan panggilan fungsi.

// 1. Literal Expression (menghasilkan nilai 5)
5

// 2. Variable Expression (menghasilkan nilai yang tersimpan di variabel x)
x

// 3. Arithmetic Expression (menghasilkan nilai 25)
10 + 15

// 4. String Expression (menghasilkan "Halo Dunia")
"Halo " + "Dunia"

// 5. Logical/Relational Expression (menghasilkan true)
(10 > 5) && (3 < 8)

2. Perbedaan Antara Expression dan Statement

Penting untuk membedakan antara Expression dan Statement dalam pemrograman JavaScript:

// 'a + 5' adalah ekspresi di dalam sebuah statement assignment:
let total = a + 5; 

// Panggilan fungsi yang mengembalikan nilai adalah ekspresi:
let hasil = Math.max(10, 20); // Math.max(10, 20) menghasilkan 20

3. Kategori Ekspresi dalam JavaScript

1. Primary Expressions: Nilai dasar atau keyword (42, "teks", true, this).
2. Assignment Expressions: Mengisi variabel sekaligus mengembalikan nilai (x = 10).
3. Complex Expressions: Penggabungan beberapa ekspresi dengan operator ((a * b) + (c / d)).

3.8 Komentar

Komentar adalah bagian dari kode program yang diabaikan oleh mesin pemroses JavaScript (engine). Komentar tidak akan dieksekusi dan digunakan khusus sebagai catatan penjelas bagi programmer, dokumentasi kode, atau mematikan sementara perintah tertentu saat pengujian.

1. Jenis Penulisan Komentar dalam JavaScript

JavaScript menyediakan dua jenis cara penulisan komentar:

1. Komentar Satu Baris (Single-Line Comment)

Diawali dengan tanda dua garis miring (//). Semua teks dari tanda // hingga akhir baris tersebut akan dianggap sebagai komentar.

// Ini adalah komentar satu baris penuh
let harga = 50000; // Komentar di samping perintah

// Menghitung diskon 10%
let diskon = harga * 0.10;

2. Komentar Banyak Baris (Multi-Line Comment)

Diawali dengan /* dan diakhiri dengan */. Dapat mencakup satu baris atau beberapa baris sekaligus.

/* 
  Fungsi: hitungTotalPembayaran
  Deskripsi: Menghitung total harga belanjaan setelah dikurangi diskon 
             dan ditambah pajak PPN 11%.
  Penulis: Tim Pengembang Web
*/
function hitungTotalPembayaran(hargaUtama, diskon) {
    return (hargaUtama - diskon) * 1.11;
}

2. Komentar Dokumentasi (JSDoc)

Dalam pengembangan proyek profesional, bentuk khusus komentar multi-baris bernama JSDoc sering digunakan untuk menghasilkan dokumentasi otomatis dan memberikan petunjuk IntelliSense pada editor kode modern seperti VS Code.

/**
 * Menghitung luas lingkaran berdasarkan jari-jari.
 * @param {number} r - Jari-jari lingkaran.
 * @returns {number} Luas lingkaran.
 */
function hitungLuasLingkaran(r) {
    return Math.PI * r * r;
}

3. Manfaat dan Praktik Terbaik (Best Practices)

1. Memperjelas Kode Kompleks: Gunakan komentar untuk menjelaskan alasan (why) suatu algoritma rumit digunakan, bukan hanya apa (what) yang dilakukan kode.
2. Mematikan Kode Sementara (Debugging): Membantu mengisolasi kesalahan dengan "menonaktifkan" baris kode tertentu secara cepat.
3. Hindari Komentar Berlebihan (Over-commenting): Jangan menuliskan komentar untuk instruksi yang sudah jelas (misal: let x = 5; // Mengisi x dengan 5). Tulis kode yang rapi dan bersifat self-documenting.

3.9 JavaScript dan Tag HTML

Salah satu fungsi utama JavaScript dalam web development adalah memanipulasi elemen-elemen HTML pada halaman web secara dinamis melalui antarmuka Document Object Model (DOM).

1. Menghubungkan JavaScript dengan Elemen HTML

JavaScript dapat mengakses tag/elemen HTML berdasarkan atribut seperti id, class, atau nama tag.

Metode Seleksi Elemen Utama:

• document.getElementById("id_elemen"): Mengambil satu elemen berdasarkan ID uniknya.
• document.querySelector("selector_css"): Mengambil elemen pertama yang cocok dengan pemilih CSS.
• document.querySelectorAll("selector_css"): Mengambil semua elemen yang cocok dalam bentuk NodeList.

// Memilih elemen dengan id="judul-halaman"
let elemenJudul = document.getElementById("judul-halaman");

// Memilih tombol pertama dengan class="btn-utama"
let elemenTombol = document.querySelector(".btn-utama");

2. Memanipulasi Isi dan Atribut Tag HTML

Setelah elemen berhasil diakses, kita dapat mengubah teks, struktur HTML di dalamnya, atribut, maupun gaya tampilannya (CSS).

1. Mengubah Konten (innerHTML & textContent)

• textContent: Mengubah isi teks murni di dalam tag.
• innerHTML: Mengubah isi tag termasuk menyisipkan tag HTML baru.

// Mengubah teks saja:
document.getElementById("status").textContent = "Proses Berhasil!";

// Mengubah isi dengan menyisipkan tag HTML:
document.getElementById("info").innerHTML = "<span style='color:green;'>Aktif</span>";

2. Mengubah Atribut Tag HTML

Kita dapat mengubah atribut seperti src pada tag <img>, href pada tag <a>, atau value pada tag <input>.

// Mengganti gambar pada tag <img id="gambar-profile">:
let imgProfile = document.getElementById("gambar-profile");
imgProfile.src = "gambar_baru.png";
imgProfile.alt = "Foto profil terbaru";

3. Contoh Implementasi Lengkap (Interaksi HTML & JavaScript)

Berikut contoh dokumen HTML interaktif tempat JavaScript merespons aksi klik tombol untuk mengubah tag teks dan atribut elemen HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Manipulasi Tag HTML dengan JavaScript</title>
    <style>
        .kotak {
            padding: 20px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <h1 id="judul">Judul Awal Halaman</h1>
    
    <div id="konten" class="kotak">
        <p>Paragraf ini akan diubah oleh JavaScript.</p>
    </div>

    <br>
    <button onclick="ubahKontenHTML()">Ubah Isi Tag HTML</button>
    <button onclick="resetJudul()">Reset Judul</button>

    <script>
        function ubahKontenHTML() {
            // 1. Mengubah teks judul
            document.getElementById("judul").textContent = "Judul Telah Diperbarui!";
            
            // 2. Memanipulasi tag HTML di dalam div#konten
            let divKonten = document.getElementById("konten");
            divKonten.innerHTML = `
                <h3>Konten Baru Berhasil Dimuat</h3>
                <p>Status: <strong style="color: blue;">Terverifikasi</strong></p>
                <ul>
                    <li>Fitur A Aktif</li>
                    <li>Fitur B Aktif</li>
                </ul>
            `;
        }

        function resetJudul() {
            document.getElementById("judul").textContent = "Judul Awal Halaman";
        }
    </script>

</body>
</html>