Dasar JavaScript

Mata Kuliah: Pemrograman Berbasis Web

---

🧭 1. Pengertian JavaScript

7

📖 Deskripsi

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif dan dinamis.

🧠 Narasi

Jika HTML adalah struktur dan CSS adalah tampilan, maka JavaScript adalah otak yang mengatur perilaku halaman. Dengan JavaScript, halaman web bisa merespons klik, input pengguna, animasi, hingga komunikasi dengan server.

---

🧩 2. Cara Menyisipkan JavaScript

6

📖 Deskripsi

JavaScript dapat digunakan dalam 3 cara:

🧱 Tabel Metode

Metode	Penjelasan
Inline	Dalam atribut HTML
Internal	Dalam tag <script>
External	File .js terpisah

💻 Contoh

<script>
  alert("Halo Dunia");
</script>

🧠 Narasi

Penggunaan external JavaScript direkomendasikan untuk proyek besar karena lebih rapi dan mudah dikelola.

---

🔤 3. Variabel dan Tipe Data

6

📖 Deskripsi

Variabel digunakan untuk menyimpan data.

🧱 Jenis Deklarasi

Keyword	Keterangan
var	Lama
let	Modern
const	Konstan

🧱 Tipe Data

Tipe	Contoh
Number	10
String	“Halo”
Boolean	true/false
Array	[1,2,3]
Object	{nama:”Budi”}

💻 Contoh

let nama = "Budi";
const umur = 20;

🧠 Narasi

Gunakan let dan const dalam pengembangan modern karena lebih aman dan terstruktur.

---

➕ 4. Operator

7

📖 Deskripsi

Operator digunakan untuk melakukan operasi pada data.

🧱 Tabel Operator

Jenis	Contoh
Aritmatika	+, -, *, /
Perbandingan	==, ===, >
Logika	&&, ||

💻 Contoh

let hasil = 10 + 5;

🧠 Narasi

Operator sangat penting dalam pengolahan data dan pengambilan keputusan.

---

🔀 5. Struktur Kontrol (Control Flow)

6

📖 Deskripsi

Digunakan untuk mengatur alur program.

🧱 Jenis

Struktur	Fungsi
if-else	Percabangan
switch	Pilihan
for	Perulangan
while	Perulangan

💻 Contoh

if (umur > 18) {
  console.log("Dewasa");
}

🧠 Narasi

Control flow memungkinkan program mengambil keputusan berdasarkan kondisi tertentu.

---

🔁 6. Perulangan (Looping)

6

📖 Deskripsi

Loop digunakan untuk mengulang kode.

💻 Contoh

for (let i = 0; i < 5; i++) {
  console.log(i);
}

🧠 Narasi

Loop membantu menghemat kode dan meningkatkan efisiensi.

---

🧠 7. Fungsi (Function)

8

📖 Deskripsi

Fungsi adalah blok kode yang dapat digunakan kembali.

💻 Contoh

function sapa(nama) {
  return "Halo " + nama;
}

🧠 Narasi

Fungsi membantu membuat kode lebih modular dan mudah dipelihara.

---

🧱 8. Array dan Object

6

📖 Deskripsi

Struktur data untuk menyimpan banyak nilai.

💻 Contoh

let buah = ["Apel", "Jeruk"];let orang = {
  nama: "Budi",
  umur: 20
};

🧠 Narasi

Array untuk data berurutan, object untuk data berpasangan (key-value).

---

🌐 9. DOM (Document Object Model)

6

📖 Deskripsi

DOM adalah representasi struktur HTML dalam bentuk objek.

💻 Contoh

document.getElementById("judul").innerHTML = "Hello JS";

🧠 Narasi

Dengan DOM, JavaScript bisa mengubah isi halaman secara langsung.

---

🖱️ 10. Event Handling

8

📖 Deskripsi

Event adalah aksi pengguna.

💻 Contoh

<button onclick="alert('Klik!')">Klik</button>

🧠 Narasi

Event membuat web menjadi interaktif dan responsif.

---

⚠️ 11. Error dan Debugging

6

📖 Deskripsi

Debugging adalah proses mencari kesalahan.

🧠 Narasi

Gunakan:

• Console (console.log)
• Developer tools browser

---

🧪 12. Studi Kasus Praktikum

🎯 Tugas

Buat program:

• Input nama
• Tampilkan salam
• Gunakan fungsi
• Gunakan event klik

---

🎯 13. Kesimpulan

• JavaScript membuat web interaktif
• Variabel, fungsi, dan DOM sangat penting
• Event adalah inti interaksi
• Debugging wajib dikuasai

---

🎓 Penutup

Materi ini menjadi dasar untuk:
➡️ JavaScript DOM lanjutan
➡️ AJAX & Fetch API
➡️ Framework seperti React