Pengantar JavaScript

Mengenal JavaScript: cara menyisipkan ke HTML, variabel dengan const/let, tipe data dasar, dan operator.

Phase

Phase 3 — JS

Topik

JavaScript Dasar

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Menyisipkan JS: inline, internal (<script>), external (.js)
02Menggunakan console.log dan debugging dasar
03Mengenal tipe data: string, number, boolean, null, undefined
04Memahami perbedaan var, let, const
05Menggunakan operator aritmatika, assignment, dan perbandingan
06Menggunakan typeof operator

📖Sub-topik & Materi

01Cara menyisipkan JS: external .js (rekomendasi), internal <script>, inline
02console.log(), console.error(), console.warn() untuk debugging
03Tipe data: string, number, boolean, null, undefined, object
04Variabel: const (tidak bisa diubah), let (bisa diubah), var (hindari)
05Operator: aritmatika (+, -, *, /, %), assignment (=, +=), perbandingan (===, !==)
06typeof operator untuk mengecek tipe data

💡Penjelasan Konsep

Konsep 1

JavaScript di HTML: Script Tag

JavaScript disisipkan ke HTML dengan tag <script>. Taruh di akhir <body> (sebelum </body>) agar HTML selesai dimuat lebih dulu — menghindari error "element not found". Atau gunakan di <head> dengan atribut defer yang menunggu HTML selesai dimuat.

html

<!-- CARA 1: Di akhir body (paling mudah) -->
<body>
  <h1>Halo Dunia</h1>
  <script src="script.js"></script>
</body>

<!-- CARA 2: Di head dengan defer -->
<head>
  <script src="script.js" defer></script>
</head>

<!-- CARA 3: Inline (hindari untuk kode panjang) -->
<script>
  console.log('Halo dari JavaScript!');
</script>

Konsep 2

var vs let vs const

var adalah cara lama — punya masalah scope dan hoisting yang membingungkan, JANGAN pakai. const untuk nilai yang tidak berubah (sebagian besar variabel). let untuk nilai yang perlu diubah (counter, variabel loop). Aturan praktis: selalu mulai dengan const, ganti ke let hanya jika perlu mengubah nilainya.

javascript

"t-kw">class="t-cm">// "t-kw">const: tidak bisa di-reassign
"t-kw">const nama = "t-st">'Ahmad';
"t-kw">const PI = 3.14159;
"t-kw">class="t-cm">// nama = "t-st">'Budi'; // ERROR!

"t-kw">class="t-cm">// "t-kw">let: bisa di-reassign
"t-kw">let skor = 0;
skor = skor + 10; "t-kw">class="t-cm">// OK
skor += 10;       "t-kw">class="t-cm">// Shorthand

"t-kw">class="t-cm">// "t-kw">var: JANGAN pakai (ada masalah scope)
"t-kw">var umur = 20; "t-kw">class="t-cm">// hindari ini

Konsep 3

Tipe Data Dasar JavaScript

JavaScript punya 7 tipe data primitif. Yang paling sering digunakan: string (teks, diapit tanda kutip atau backtick), number (semua angka — int dan float dijadikan satu), boolean (true/false), undefined (variabel belum diberi nilai), null (sengaja dikosongkan). Gunakan typeof untuk mengecek tipe data.

javascript

"t-kw">class="t-cm">// String
"t-kw">const nama = "t-st">'Ahmad';           "t-kw">class="t-cm">// single quote
"t-kw">const kota = "Kediri";          "t-kw">class="t-cm">// double quote
"t-kw">const salam = "t-st">`Halo, ${nama}!`; "t-kw">class="t-cm">// template literal (backtick)

"t-kw">class="t-cm">// Number
"t-kw">const umur = 20;
"t-kw">const tinggi = 175.5;
"t-kw">const negatif = -10;

"t-kw">class="t-cm">// Boolean
"t-kw">const aktif = true;
"t-kw">const sudahDaftar = false;

"t-kw">class="t-cm">// Undefined & Null
"t-kw">let belumDiisi;          "t-kw">class="t-cm">// undefined
"t-kw">const kosong = null;     "t-kw">class="t-cm">// null (sengaja)

"t-kw">class="t-cm">// Cek tipe data
console.log("t-kw">typeof nama);   "t-kw">class="t-cm">// "string"
console.log("t-kw">typeof umur);   "t-kw">class="t-cm">// "number"
console.log("t-kw">typeof aktif);  "t-kw">class="t-cm">// "boolean"

Konsep 4

Template Literal — String Modern

Template literal (menggunakan backtick ` `) adalah cara modern menulis string di JavaScript. Keunggulan: bisa menyisipkan variabel/ekspresi dengan ${}, bisa menulis string multi-baris tanpa \n, dan lebih mudah dibaca.

javascript

"t-kw">const nama = "t-st">'Siti';
"t-kw">const umur = 21;
"t-kw">const kota = "t-st">'Pare';

"t-kw">class="t-cm">// Cara lama (susah dibaca)
"t-kw">const perkenalan1 = "t-st">'Halo, nama saya ' + nama + "t-st">', umur ' + umur + "t-st">' tahun.';

"t-kw">class="t-cm">// Template literal (modern & bersih)
"t-kw">const perkenalan2 = "t-st">`Halo, nama saya ${nama}, umur ${umur} tahun.`;

"t-kw">class="t-cm">// Bisa ekspresi matematika
console.log("t-st">`Tahun lahir: ${2025 - umur}`);

"t-kw">class="t-cm">// Multi-baris
"t-kw">const html = "t-st">`
  <div "t-kw">class="profil">
    <h2>${nama}</h2>
    <p>Asal: ${kota}</p>
  </div>
`;

💻Contoh Kode Lengkap

javascript

"t-kw">class="t-cm">// Cara menyisipkan JS (External — DIREKOMENDASIKAN)
"t-kw">class="t-cm">// Di HTML: <script src="script.js" defer></script>

"t-kw">class="t-cm">// === Variabel ===
"t-kw">const nama = "t-st">'Budi Santoso';   "t-kw">class="t-cm">// Tidak bisa diubah nilainya
"t-kw">let umur = 20;                  "t-kw">class="t-cm">// Bisa diubah
"t-kw">let kota = "t-st">'Kediri';

"t-kw">class="t-cm">// === Tipe Data ===
console.log("t-kw">typeof nama);    "t-kw">class="t-cm">// "string"
console.log("t-kw">typeof umur);    "t-kw">class="t-cm">// "number"
console.log("t-kw">typeof true);    "t-kw">class="t-cm">// "boolean"
console.log("t-kw">typeof null);    "t-kw">class="t-cm">// "object" (quirk JavaScript!)
console.log("t-kw">typeof undefined); "t-kw">class="t-cm">// "undefined"

"t-kw">class="t-cm">// === Operator ===
"t-kw">const hasil = 10 + 3;   "t-kw">class="t-cm">// 13
"t-kw">const sisa  = 10 % 3;   "t-kw">class="t-cm">// 1 (modulo/sisa bagi)

"t-kw">class="t-cm">// === Perbandingan ===
console.log(5 === "t-st">'5'); "t-kw">class="t-cm">// false (strict — tipe harus sama)
console.log(5 == "t-st">'5');  "t-kw">class="t-cm">// true  (loose — hati-hati!)
console.log(5 !== 3);   "t-kw">class="t-cm">// true

⚡Latihan Kelas · Buka konsol browser, eksperimen dengan variabel dan tipe data

Buka Chrome > F12 > Console

Deklarasikan 5 variabel: nama (string), umur (number), lulus (boolean), nilai (number), kota (string)

Gunakan typeof untuk mengecek tipe setiap variabel

Coba ubah nilai const — amati error yang muncul

Buat file script.js, link ke HTML, dan tampilkan variabel di console

📝 Tugas 4.1 — Variabel & Tipe Data

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat file script.js berisi: minimal 5 variabel dengan tipe berbeda (const dan let), operasi aritmatika sederhana (hitung luas dan keliling persegi panjang), dan tampilkan semua hasilnya di console dengan format rapi menggunakan template literal.

Kriteria Penilaian	Poin
Menggunakan const dan let dengan tepat (bukan var)	25
Minimal 3 tipe data berbeda digunakan	25
Template literal digunakan untuk output console	25
Output console terbaca, rapi, dan bermakna	25
Total	100