Tutorial JavaScript

Definisi JavaScript

JavaScript adalah bahasa pengaturcaraan yang membolehkan laman web menjadi interaktif dan dinamik.

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

ℹ️ Nota: JavaScript berbeza dengan Java. Ia adalah bahasa yang berbeza sepenuhnya!

Embedding JavaScript

Terdapat 3 cara untuk memasukkan JavaScript ke dalam HTML:

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>

✓ Best Practice: Gunakan External JavaScript untuk projek yang lebih besar dan lebih mudah diurus.

Popup Boxes

JavaScript menyediakan 3 jenis popup boxes untuk interaksi dengan pengguna:

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);

Alert Method

Method alert() adalah yang paling mudah untuk memaparkan output JavaScript:

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

⚠️ Amaran: Jangan terlalu banyak guna alert() kerana ia boleh mengganggu pengalaman pengguna.

JavaScript Events

Events adalah tindakan yang berlaku dalam browser yang boleh dikesan oleh JavaScript:

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>

Hover pada saya untuk lihat perubahan

Form Validation

JavaScript boleh digunakan untuk memvalidasi input form sebelum data dihantar ke server:

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:

✓ Tips: Sentiasa validasi input di bahagian server juga, bukan hanya di client-side!