Bab 4: JavaScript | JITC Training

4.1 Dasar-dasar JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas ke halaman web. Ini adalah salah satu teknologi inti dari pengembangan web, bersama dengan HTML dan CSS. JavaScript memungkinkan pengembang untuk membuat halaman web yang dinamis dan interaktif.

Menyertakan JavaScript dalam HTML

JavaScript dapat disertakan dalam halaman HTML menggunakan tag <script>. Ada dua cara utama untuk melakukannya: menyematkan JavaScript secara langsung di dalam file HTML atau menautkan file JavaScript eksternal.

Menyematkan JavaScript Langsung

<!DOCTYPE html>
<html>
<head>
    <title>Contoh JavaScript</title>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p id="demo">Ini adalah paragraf.</p>
    <script>
        document.getElementById("demo").innerHTML = "Paragraf telah diubah oleh JavaScript!";
    </script>
</body>
</html>

Menautkan File JavaScript Eksternal

<!DOCTYPE html>
<html>
<head>
    <title>Contoh JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p id="demo">Ini adalah paragraf.</p>
</body>
</html>

// script.js
document.getElementById("demo").innerHTML = "Paragraf telah diubah oleh JavaScript!";

4.2 Variabel, Tipe Data, dan Operator

Variabel

Variabel digunakan untuk menyimpan nilai. Dalam JavaScript, Anda dapat mendeklarasikan variabel menggunakan var, let, atau const.

let nama = "John";
const usia = 30;
var kota = "Jakarta";

Tipe Data

JavaScript mendukung beberapa tipe data dasar, termasuk:

String: Teks, dikelilingi oleh tanda kutip.

let teks = "Hello, World!";

Number: Angka, baik bilangan bulat maupun desimal.

let angka = 42;

Boolean: Nilai benar atau salah.

let isTrue = true;

Array: Kumpulan nilai.

let daftar = ["apel", "pisang", "ceri"];

Object: Kumpulan pasangan kunci-nilai.

let orang = {nama: "John", usia: 30, kota: "Jakarta"};

Operator

JavaScript memiliki berbagai operator untuk melakukan operasi pada variabel dan nilai.

Operator Aritmatika

Penjumlahan: +
Pengurangan: -
Perkalian: *
Pembagian: /
Modulus (sisa bagi): %

let a = 10;
let b = 5;
let hasil = a + b; // 15

Operator Perbandingan

Sama dengan: ==
Identik (sama nilai dan tipe): ===
Tidak sama dengan: !=
Tidak identik: !==
Lebih besar: >
Lebih kecil: <
Lebih besar atau sama dengan: >=
Lebih kecil atau sama dengan: <=

let x = 10;
let y = "10";

console.log(x == y);  // true
console.log(x === y); // false

4.3 Fungsi dan Lingkup

Fungsi

Fungsi adalah blok kode yang dirancang untuk melakukan tugas tertentu. Fungsi dapat menerima parameter dan mengembalikan nilai.

Mendeklarasikan Fungsi

function salam(nama) {
    return "Halo, " + nama + "!";
}

console.log(salam("John")); // Halo, John!

Fungsi Anonim

let salam = function(nama) {
    return "Halo, " + nama + "!";
};

console.log(salam("John")); // Halo, John!

Arrow Function

let salam = (nama) => {
    return "Halo, " + nama + "!";
};

console.log(salam("John")); // Halo, John!

Lingkup

Lingkup menentukan aksesibilitas variabel dan fungsi dalam kode. Ada dua jenis lingkup utama:

Lingkup Global: Variabel yang dideklarasikan di luar fungsi dapat diakses dari mana saja dalam kode.
Lingkup Lokal: Variabel yang dideklarasikan di dalam fungsi hanya dapat diakses dari dalam fungsi tersebut.

let globalVar = "Saya global";

function contohFungsi() {
    let localVar = "Saya lokal";
    console.log(globalVar); // Bisa mengakses variabel global
    console.log(localVar);  // Bisa mengakses variabel lokal
}

contohFungsi();
console.log(globalVar); // Bisa mengakses variabel global
console.log(localVar);  // Error: localVar tidak didefinisikan di lingkup ini

4.4 DOM Manipulation

DOM (Document Object Model) adalah representasi struktur halaman web yang dapat dimanipulasi dengan JavaScript. Dengan DOM, Anda dapat mengakses dan mengubah elemen HTML dan gaya CSS secara dinamis.

Mengakses Elemen DOM

getElementById: Mengakses elemen berdasarkan ID.

let elemen = document.getElementById("demo");

getElementsByClassName: Mengakses elemen berdasarkan kelas.

let elemen = document.getElementsByClassName("contoh");

getElementsByTagName: Mengakses elemen berdasarkan tag.

let elemen = document.getElementsByTagName("p");

Mengubah Konten dan Gaya Elemen

innerHTML: Mengubah konten HTML elemen.

document.getElementById("demo").innerHTML = "Konten baru";

style: Mengubah gaya CSS elemen.

document.getElementById("demo").style.color = "blue";

Menambahkan dan Menghapus Elemen

createElement: Membuat elemen baru.

let elemenBaru = document.createElement("p");
elemenBaru.innerHTML = "Paragraf baru";
document.body.appendChild(elemenBaru);

removeChild: Menghapus elemen.

let elemen = document.getElementById("demo");
elemen.parentNode.removeChild(elemen);

4.5 Event Handling

Event handling adalah cara untuk menangani berbagai peristiwa yang terjadi pada elemen HTML, seperti klik, hover, dan input.

Menangani Event dengan JavaScript

Menggunakan Atribut HTML

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button onclick="sapa()">Klik Saya</button>
    <script>
        function sapa() {
            alert("Halo, dunia!");
        }
    </script>
</body>
</html>

Menggunakan addEventListener

<!DOCTYPE html>
<html>
<head>
    <title>Event Handling</title>
</head>
<body>
    <button id="myButton">Klik Saya</button>
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Halo, dunia!");
        });
    </script>
</body>
</html>

4.6 AJAX dan Fetch API

AJAX (Asynchronous JavaScript and XML) dan Fetch API memungkinkan Anda untuk mengambil data dari server tanpa harus memuat ulang halaman.

Contoh Menggunakan Fetch API

<!DOCTYPE html>
<html>
<head>
    <title>Fetch API</title>
</head>
<body>
    <button id="loadData">Muat Data</button>
    <div id="data"></div>
    <script>
        document.getElementById("loadData").addEventListener("click", function() {
            fetch("https://jsonplaceholder.typicode.com/posts/1")
                .then(response => response.json())
                .then(data => {
                    document.getElementById("data").innerHTML = `<h2>${data.title}</h2><p>${data.body}</p>`;
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

4.7 ES6 dan Fitur Modern JavaScript

JavaScript ES6 (ECMAScript 2015) memperkenalkan banyak fitur baru yang membuat penulisan kode lebih mudah dan lebih efisien.

Beberapa Fitur Baru ES6

let dan const: Cara baru untuk mendeklarasikan variabel.

let nama = "John";
const usia = 30;

Template Literals: Cara baru untuk menyisipkan variabel ke dalam string.

let salam = `Halo, ${nama}!`;

Destructuring: Ekstraksi nilai dari array atau objek.

let [a, b] = [1, 2];
let {nama, usia} = {nama: "John", usia: 30};

Arrow Functions: Sintaksis fungsi yang lebih ringkas.

let salam = (nama) => `Halo, ${nama}!`;

Kesimpulan

JavaScript adalah bahasa yang sangat penting dalam pengembangan web modern. Dengan memahami dasar-dasar JavaScript, variabel, fungsi, manipulasi DOM, event handling, AJAX, dan fitur modern ES6, Anda dapat membuat halaman web yang dinamis dan interaktif. Bab berikutnya akan membahas integrasi teknologi front-end yang telah Anda pelajari untuk membangun aplikasi web yang lengkap.