JavaScript dan HTML

Articles

JavaScript dan HTML

Artikel ini menerangkan JavaScript dan HTML.

YouTube Video

Objek `window` dalam JavaScript

Objek window dalam JavaScript adalah objek global dalam persekitaran pelayar, menyediakan fungsi dan maklumat berkaitan halaman web dan tetingkap pelayar. Oleh kerana window adalah skop global pelayar, semua kod JavaScript yang berjalan dalam pelayar menjadi sebahagian daripada objek window. Objek window memainkan peranan penting dalam menjalankan JavaScript dalam persekitaran pelayar, menyediakan banyak API dan sifat-sifat.

Ciri-ciri Utama Objek `window`

Sifat-sifat

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);

window.document: Mengakses dokumen HTML semasa.
window.location: Menguruskan URL semasa dan navigasi pelayar.
window.history: Mengakses maklumat sejarah pelayar dan membenarkan navigasi ke depan dan ke belakang.
window.navigator: Menyediakan maklumat tentang pelayar dan peranti.
window.innerWidth / window.innerHeight: Mendapatkan lebar dan tinggi kawasan pandang.

Kaedah-kaedah

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

window.alert(): Memaparkan dialog amaran.
window.confirm(): Memaparkan dialog untuk meminta pengesahan pengguna dan mengembalikan hasil OK atau Batal.
window.prompt(): Memaparkan dialog untuk meminta input pengguna dan mendapatkan nilai yang dimasukkan.
window.open(): Membuka tetingkap atau tab baru.
window.setTimeout() / window.setInterval(): Menetapkan pemasa untuk menjalankan fungsi selepas masa tertentu atau pada selang tetap.

Pengendalian Acara

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

window.onload: Acara yang melaksanakan apabila halaman telah dimuatkan sepenuhnya.
window.onresize: Acara yang melaksanakan apabila saiz tetingkap berubah.
window.onscroll: Acara yang mencetuskan apabila pengguna menatal halaman.

Peranan sebagai Pemboleh Ubah Global

1var myVar = 10;
2console.log(window.myVar); // 10

Objek window menyimpan pemboleh ubah dan fungsi global. Dengan kata lain, pemboleh ubah dan fungsi yang diisytiharkan secara automatik menjadi sifat kepada window.

Manipulasi DOM dalam JavaScript

Manipulasi DOM (Document Object Model) JavaScript digunakan untuk berinteraksi secara dinamik dengan elemen pada laman web. DOM mewakili struktur dokumen HTML sebagai pokok, yang boleh diubah menggunakan JavaScript untuk mengubah struktur dan mengawal paparan laman.

Asas DOM

DOM menganggap HTML satu laman web sebagai objek, membolehkan akses dan pengubahsuaian elemen serta atribut. Gunakan objek document untuk mengakses dokumen HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Mengambil Elemen DOM

JavaScript mempunyai beberapa kaedah untuk mengakses elemen dalam DOM.

document.getElementById(): Dapatkan elemen berdasarkan atribut id
document.getElementsByClassName(): Dapatkan elemen berdasarkan nama kelas (HTMLCollection)
document.getElementsByTagName(): Dapatkan elemen berdasarkan nama tag (HTMLCollection)
document.querySelector(): Dapatkan elemen pertama berdasarkan pemilih CSS yang sepadan
document.querySelectorAll(): Dapatkan semua elemen yang sepadan menggunakan pemilih CSS (NodeList)

Contoh: `getElementById` dan `querySelector`

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Manipulasi DOM

Pelbagai operasi boleh dilakukan pada elemen yang diperoleh.

Menukar Teks

Untuk menukar teks elemen, gunakan textContent atau innerHTML.

textContent: Dapatkan atau tukar kandungan teks dalam elemen. Tag HTML tidak ditafsirkan.
innerHTML: Dapatkan atau tukar kandungan HTML dalam elemen. Rentetan yang mengandungi tag HTML juga diproses.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Menukar Atribut

Gunakan setAttribute() dan getAttribute() untuk menukar atribut elemen.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Mengubah CSS

Gunakan properti style untuk mengubah gaya CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Memanipulasi Kelas

Gunakan classList untuk menambah atau menghapus kelas dari elemen.

add(): Tambah kelas
remove(): Buang kelas
toggle(): Tambah atau buang kelas bergantung pada kehadirannya
contains(): Semak jika kelas wujud

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Mencipta dan Menghapus Elemen DOM

Mencipta Elemen Baru

Gunakan document.createElement() untuk mencipta elemen baru dan tambahkan ke DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Menghapus Elemen

Gunakan kaedah remove() untuk menghapus elemen.

1newDiv.remove();  // Remove the created element

Menambah Peristiwa

Sebagai sebahagian daripada manipulasi DOM, anda boleh menambah pengendali peristiwa yang bertindak balas kepada interaksi pengguna. Gunakan addEventListener() untuk mengendalikan peristiwa seperti klik dan interaksi papan kekunci.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

Dalam contoh ini, menekan butang akan mengubah teks elemen #content.

Menavigasi Pokok DOM

Anda boleh menavigasi DOM untuk mengakses elemen ibu bapa dan elemen yang setara.

parentNode: Akses nod ibu bapa
childNodes: Akses nod anak (daripada semua jenis)
firstChild / lastChild: Elemen anak pertama/terakhir
nextSibling / previousSibling: Elemen setara seterusnya/elemen setara sebelumnya

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Contoh: Menambah Item Baru ke Senarai

Berikut ialah contoh menambah item baharu ke dalam senarai.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

Dalam kod ini, mengklik butang "Tambah Item" akan menambah elemen <li> baharu ke dalam senarai.

Ringkasan

Manipulasi DOM JavaScript membolehkan anda mendapatkan, menukar, mencipta, dan memadam elemen dalam dokumen HTML.
Anda boleh mendapatkan elemen menggunakan kaedah seperti getElementById() dan querySelector().
Gunakan textContent atau innerHTML untuk menukar teks dan HTML, dan setAttribute() untuk memanipulasi atribut.
Gunakan createElement() untuk mencipta elemen baharu dan remove() untuk memadamkannya.
Anda boleh mencipta laman web interaktif yang bertindak balas terhadap tindakan pengguna melalui pengendalian acara.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Fungsi Generator dalam JavaScript

JavaScript dan HTML

YouTube Video

Objek window dalam JavaScript

Ciri-ciri Utama Objek window

Sifat-sifat

Kaedah-kaedah

Pengendalian Acara

Peranan sebagai Pemboleh Ubah Global

Manipulasi DOM dalam JavaScript

Asas DOM

Mengambil Elemen DOM

Contoh: getElementById dan querySelector

Manipulasi DOM

Menukar Teks

Menukar Atribut

Mengubah CSS

Memanipulasi Kelas

Mencipta dan Menghapus Elemen DOM

Mencipta Elemen Baru

Menghapus Elemen

Menambah Peristiwa

Menavigasi Pokok DOM

Contoh: Menambah Item Baru ke Senarai

Ringkasan

YouTube Video

Objek `window` dalam JavaScript

Ciri-ciri Utama Objek `window`

Contoh: `getElementById` dan `querySelector`