Basics of Javascript

Pengenalan Ringkas JavaScript untuk Pemula

JavaScript adalah bahasa pengaturcaraan yang sangat penting dalam dunia web. Ia membolehkan laman web menjadi hidup, berinteraksi dengan pengguna, dan memberikan pengalaman yang lebih dinamik. Mari kita terokai dunia JavaScript dalam panduan mudah ini!

Semua kod JavaScript bermula dengan <script> dan berakhir dengan </script>

1) Menerima Input dari Pengguna

var userInput = prompt("Masukkan nama anda:");

2) Pengisytiharan Pemboleh Ubah/Pemalar

var namaPengguna = "John";

const PI = 3.14159;

3) Menghasilkan Output

document.write("Mesej ini akan dipaparkan dalam konsol pelayar.");

4) Kotak Fitur Popup

window.alert("Mod Pengajian: SEPENUH MASA");
        

window.prompt("Sila masukkan nama 

anda:", "");
        

window.confirm("Anda pasti?")
        

5) If-Else

if (umur >= 18) {
    document.write("Anda layak 

mengundi.");
} else {
    document.write("Anda tidak 

layak mengundi.");
}
        

6) Fungsi, Loop, dan Array

// Fungsi untuk menghitung keliling 

persegi
function hitungKeliling(sisi) {
    return 4 * sisi;
}

// Loop untuk menampilkan nombor 1 

hingga 5
for (let i = 1; i <= 5; i++) {
    document.write(i + " ");
}

// Deklarasi dan penggunaan array
var buah = ["Epal", "Pisang", 

"Anggur"];
document.write("
 Buah pertama: " + buah[0]);
        

7) Objek dan Metode

// Objek dengan propertinya
var manusia = {
    nama: "Ali",
    umur: 25,
    pekerjaan: "Jurutera"
};

// Metode untuk menampilkan info 

manusia
function tampilkanInfo() {
    document.write("Nama: " + 

manusia.nama + "
");
    document.write("Umur: " + 

manusia.umur + "
");
    document.write("Pekerjaan: " + 

manusia.pekerjaan);
}

// Memanggil metode
tampilkanInfo();
        

8) Kenyataan Penukaran (Switch)

var hari = "Selasa";

switch (hari) {
    case "Ahad":
        document.write("Hari Ahad - 

Rehat");
        break;
    case "Selasa":
        document.write("Hari Selasa 

- Kelas JavaScript");
        break;
    default:
        document.write("Hari lain - 

Aktiviti biasa");
}
        

9) Penanganan Ralat (Try-Catch)

try {
    // Kod yang mungkin menghasilkan ralat
    var hasilBahagi = 10 / 0;
    document.write("Hasil Bahagi: " 

+ hasilBahagi);
} catch (ralat) {
    // Menangkap ralat dan menangani
    document.write("Ralat: " + 

ralat.message);
}
        

10) Pengaturcaraan Asinkron dengan Janji (Promises)

// Fungsi yang mengembalikan janji
function janjiContoh() {
    return new Promise(function 

(resolve, reject) {
        // Contoh tugas asinkron 

(timeout 2 saat)
        setTimeout(function () {
            var keputusan = 

Math.random() < 0.5;
            if (keputusan) {
                resolve("Berjaya!");
            } else {
                reject("Gagal!");
            }
        }, 2000);
    });
}

// Menggunakan janji
janjiContoh()
    .then(function (hasil) {
        document.write("Janji 

Berjaya: " + hasil);
    })
    .catch(function (ralat) {
        document.write("Janji Gagal: " + ralat);
    });
        

11) Manipulasi DOM dan Kejadian

// Memanipulasi elemen pada halaman
var paragrafBaru 

= document.createElement("p");
paragrafBaru.textContent 

= "Ini adalah paragraf baru.";

// Menambahkan paragraf baru 

ke dalam body
document.body.appendChild

(paragrafBaru);

// Menangkap kejadian klik 

pada button
var buttonDOM 

= document.getElementById

("tambahButton");
buttonDOM.addEventListener

("click", function () {
    var paragrafButton 

= document.createElement("p");
    paragrafButton.textContent 

= "Button telah diklik!";
    document.body.appendChild

(paragrafButton);
});

Pengenalan Ringkas JavaScript untuk Pemula

JavaScript adalah bahasa pengaturcaraan yang sangat penting dalam dunia web. Ia membolehkan laman web menjadi hidup, berinteraksi dengan pengguna, dan memberikan pengalaman yang lebih dinamik. Mari kita terokai dunia JavaScript dalam panduan mudah ini!

Semua kod JavaScript bermula dengan <script> dan berakhir dengan </script>

1) Menerima Input dari Pengguna

var userInput = prompt("Masukkan nama anda:");

2) Pengisytiharan Pemboleh Ubah/Pemalar

var namaPengguna = "John";

const PI = 3.14159;

3) Menghasilkan Output

document.write("Mesej ini akan dipaparkan dalam konsol pelayar.");

4) Kotak Fitur Popup

window.alert("Mod Pengajian: SEPENUH MASA");
        

window.prompt("Sila masukkan nama anda:", "");
        

window.confirm("Anda pasti?")
        

5) If-Else

if (umur >= 18) {
    document.write("Anda layak mengundi.");
} else {
    document.write("Anda tidak layak mengundi.");
}
        

6) Fungsi, Loop, dan Array

// Fungsi untuk menghitung keliling persegi
function hitungKeliling(sisi) {
    return 4 * sisi;
}

// Loop untuk menampilkan nombor 1 hingga 5
for (let i = 1; i <= 5; i++) {
    document.write(i + " ");
}

// Deklarasi dan penggunaan array
var buah = ["Epal", "Pisang", "Anggur"];
document.write("
 Buah pertama: " + buah[0]);
        

7) Objek dan Metode

// Objek dengan propertinya
var manusia = {
    nama: "Ali",
    umur: 25,
    pekerjaan: "Jurutera"
};

// Metode untuk menampilkan info manusia
function tampilkanInfo() {
    document.write("Nama: " + manusia.nama + "
");
    document.write("Umur: " + manusia.umur + "
");
    document.write("Pekerjaan: " + manusia.pekerjaan);
}

// Memanggil metode
tampilkanInfo();
        

8) Kenyataan Penukaran (Switch)

var hari = "Selasa";

switch (hari) {
    case "Ahad":
        document.write("Hari Ahad - Rehat");
        break;
    case "Selasa":
        document.write("Hari Selasa - Kelas JavaScript");
        break;
    default:
        document.write("Hari lain - Aktiviti biasa");
}
        

9) Penanganan Ralat (Try-Catch)

try {
    // Kod yang mungkin menghasilkan ralat
    var hasilBahagi = 10 / 0;
    document.write("Hasil Bahagi: " + hasilBahagi);
} catch (ralat) {
    // Menangkap ralat dan menangani
    document.write("Ralat: " + ralat.message);
}
        

10) Pengaturcaraan Asinkron dengan Janji (Promises)

// Fungsi yang mengembalikan janji
function janjiContoh() {
    return new Promise(function (resolve, reject) {
        // Contoh tugas asinkron (timeout 2 saat)
        setTimeout(function () {
            var keputusan = Math.random() < 0.5;
            if (keputusan) {
                resolve("Berjaya!");
            } else {
                reject("Gagal!");
            }
        }, 2000);
    });
}

// Menggunakan janji
janjiContoh()
    .then(function (hasil) {
        document.write("Janji Berjaya: " + hasil);
    })
    .catch(function (ralat) {
        document.write("Janji Gagal: " + ralat);
    });
        

11) Manipulasi DOM dan Kejadian

// Memanipulasi elemen pada halaman
var paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini adalah paragraf baru.";

// Menambahkan paragraf baru ke dalam body
document.body.appendChild(paragrafBaru);

// Menangkap kejadian klik pada button
var buttonDOM = document.getElementById("tambahButton");
buttonDOM.addEventListener("click", function () {
    var paragrafButton = document.createElement("p");
    paragrafButton.textContent = "Button telah diklik!";
    document.body.appendChild(paragrafButton);
});