JavaScript

Kenapa Belajar JavaScript?

• Menjadikan laman web lebih interaktif
• Validasi form sebelum submit
• Animasi dan efek visual
• Komunikasi dengan server (AJAX)
• Membina web apps yang kompleks

1. Inline JavaScript

Kod JavaScript ditulis terus dalam atribut HTML:

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

2. Internal JavaScript

Kod JavaScript ditulis dalam tag <script> di dalam HTML:

<script>
    function sayHello() {
        alert('Hello World!');
    }
</script>

3. External JavaScript

Kod JavaScript disimpan dalam fail .js berasingan:

<script src="script.js"></script>

1. Alert Box

Memaparkan mesej kepada pengguna:

alert("Ini adalah mesej alert!");

2. Confirm Box

Meminta pengesahan dari pengguna (OK atau Cancel):

var result = confirm("Adakah anda pasti?");
if (result) {
    alert("Anda klik OK");
} else {
    alert("Anda klik Cancel");
}

3. Prompt Box

Meminta input dari pengguna:

var name = prompt("Siapa nama anda?", "Masukkan nama");
alert("Hello " + name);

Sintaks Asas:

alert(message);

Contoh Penggunaan:

// Alert mudah
alert("Selamat Datang!");

// Alert dengan variable
var nama = "Ahmad";
alert("Hello " + nama);

// Alert dengan operasi matematik
alert(10 + 20); // Akan papar 30

Event Yang Popular:

Event	Keterangan
onclick	Apabila elemen diklik
onmouseover	Apabila mouse berada di atas elemen
onmouseout	Apabila mouse keluar dari elemen
onchange	Apabila nilai input berubah
onload	Apabila halaman selesai loading
onfocus	Apabila input mendapat fokus

Contoh Penggunaan:

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

<p onmouseover="this.style.color='red'" 
   onmouseout="this.style.color='black'">
   Hover pada saya!
</p>

Contoh Validasi Mudah:

function validateForm() {
    var name = document.getElementById("name").value;
    
    if (name == "") {
        alert("Nama mesti diisi!");
        return false;
    }
    
    if (name.length < 3) {
        alert("Nama mesti sekurang-kurangnya 3 aksara!");
        return false;
    }
    
    return true;
}

Form Dengan Validasi:

<form onsubmit="return validateForm()">
    <input type="text" id="name" placeholder="Nama">
    <button type="submit">Hantar</button>
</form>

Cuba Sendiri:

Nama:

Umur:

Hantar