Adifahram

Kategori: Laravel

Materi Dasar JavaScript

Dipublikasikan pada 2025-05-17 10:08:29

Gambar

Materi Dasar JavaScript

1. Apa Itu JavaScript?

JavaScript (JS) adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif. Jika HTML adalah kerangka rumah, dan CSS adalah cat serta dekorasinya, maka JavaScript adalah listrik yang membuat lampu menyala dan perangkat bekerja.

JavaScript memungkinkan kita untuk:

  • Menambahkan efek dinamis pada halaman web
  • Membuat validasi formulir
  • Berinteraksi dengan pengguna (misalnya, menampilkan pop-up, merespons klik tombol, dll.)
  • Mengembangkan aplikasi web interaktif

JavaScript bisa berjalan langsung di browser tanpa perlu diinstal secara terpisah.

2. Cara Menjalankan JavaScript di HTML

Ada tiga cara untuk menulis JavaScript dalam HTML:

a. Inline JavaScript (Langsung di dalam Tag HTML)

<button onclick="alert('Halo, Selamat Datang!')">Klik Saya</button>
  • Kelebihan: Mudah dan cepat digunakan.
  • Kekurangan: Tidak cocok untuk kode yang panjang karena sulit dikelola.

b. Internal JavaScript (Di dalam Tag <script> dalam HTML)

<!DOCTYPE html>
<html>
<head>
    <script>
        function sapa() {
            alert('Halo, Selamat Datang!');
        }
    </script>
</head>
<body>
    <button onclick="sapa()">Klik Saya</button>
</body>
</html>
  • Kelebihan: Bisa digunakan untuk beberapa elemen sekaligus dalam satu halaman.
  • Kekurangan: Jika banyak halaman menggunakan kode yang sama, akan sulit untuk dikelola.

c. External JavaScript (File Terpisah)

Kode JavaScript ditulis dalam file .js lalu dipanggil di HTML.

File script.js

function sapa() {
    alert('Halo, Selamat Datang!');
}

File HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="sapa()">Klik Saya</button>
</body>
</html>
  • Kelebihan: Lebih rapi dan bisa digunakan di banyak halaman.
  • Kekurangan: Perlu pemanggilan file eksternal.

3. Dasar-Dasar JavaScript

a. Variabel dalam JavaScript

Variabel digunakan untuk menyimpan data. Ada tiga cara mendeklarasikan variabel:

var nama = "Ali"; // Variabel dengan var (cara lama, kurang disarankan)
let usia = 25; // Variabel yang nilainya bisa berubah
const negara = "Indonesia"; // Variabel tetap yang nilainya tidak bisa diubah
  • var bisa digunakan di mana saja, tetapi kurang disarankan karena memiliki kelemahan dalam pengelolaan cakupan.
  • let direkomendasikan untuk variabel yang bisa berubah.
  • const digunakan untuk variabel yang nilainya tetap.

b. Tipe Data dalam JavaScript

Tipe data menentukan jenis nilai yang disimpan dalam variabel.

let teks = "Halo!"; // String (teks)
let angka = 10; // Number (angka)
let benar = true; // Boolean (true atau false)
let kosong = null; // Null (tidak ada nilai)
let tidakDidefinisikan; // Undefined (belum diberi nilai)

c. Operator dalam JavaScript

Operator digunakan untuk melakukan operasi pada nilai.

let a = 10;
let b = 5;
let hasil = a + b; // Penjumlahan
console.log(hasil); // Output: 15

Beberapa operator umum:

  • + (tambah), - (kurang), * (kali), / (bagi), % (modulus/sisa bagi)
  • == (sama dengan), != (tidak sama), === (identik), !== (tidak identik)

4. Struktur Kontrol

a. Percabangan (If-Else)

let nilai = 80;
if (nilai >= 75) {
    console.log("Lulus");
} else {
    console.log("Tidak Lulus");
}

b. Perulangan (Looping)

  • For Loop
for (let i = 1; i <= 5; i++) {
    console.log("Perulangan ke-" + i);
}
  • While Loop
let i = 1;
while (i <= 5) {
    console.log("Perulangan ke-" + i);
    i++;
}

5. Fungsi dalam JavaScript

Fungsi adalah blok kode yang bisa digunakan kembali.

function sapa(nama) {
    console.log("Halo, " + nama + "!");
}

sapa("Budi"); // Output: Halo, Budi!

6. DOM (Document Object Model)

JavaScript bisa mengakses dan mengubah elemen HTML menggunakan DOM.

document.getElementById("judul").innerHTML = "Judul Baru";

Contoh penggunaan:

<h1 id="judul">Halo Dunia</h1>
<button onclick="ubahTeks()">Ubah Teks</button>

<script>
function ubahTeks() {
    document.getElementById("judul").innerHTML = "Teks Berubah!";
}
</script>

7. Event dalam JavaScript

Event digunakan untuk mendeteksi aksi pengguna, seperti klik atau input.

<button onclick="tampilkanPesan()">Klik Saya</button>
<script>
function tampilkanPesan() {
    alert("Tombol diklik!");
}
</script>

8. Array dan Objek

a. Array (Kumpulan Data)

let buah = ["Apel", "Jeruk", "Mangga"];
console.log(buah[0]); // Output: Apel

b. Objek (Data dengan Properti)

let orang = {
    nama: "Dika",
    umur: 30,
    pekerjaan: "Programmer"
};
console.log(orang.nama); // Output: Dika

9. Asynchronous JavaScript (AJAX dan Fetch API)

Untuk mengambil data dari server tanpa me-refresh halaman.

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => console.log(data));

10. Kesimpulan

JavaScript adalah bahasa yang kuat untuk membuat halaman web interaktif. Dengan memahami dasar-dasarnya, kamu bisa mulai membuat fitur dinamis di web seperti validasi formulir, manipulasi DOM, dan interaksi pengguna. Langkah selanjutnya adalah mempelajari konsep lanjutan seperti JavaScript modern (ES6+), framework seperti React atau Vue, dan backend dengan Node.js!


← Kembali ke daftar blog