JavaScript dan HTML

Articles

JavaScript dan HTML

Artikel ini menerangkan JavaScript dan HTML.

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

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(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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 ini dicetuskan apabila halaman telah dimuat sepenuhnya.
window.onresize: Acara ini dicetuskan apabila saiz tetingkap diubah.
window.onscroll: Acara ini berlaku 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.

Mengambil Elemen DOM

JavaScript mempunyai beberapa kaedah untuk mengakses elemen dalam DOM.

document.getElementById(): Mengambil elemen mengikut atribut idnya.
document.getElementsByClassName(): Mengambil elemen-elemen mengikut nama kelas. Mengembalikan HTMLCollection. HTMLCollection ialah koleksi langsung yang mencerminkan perubahan dalam DOM secara masa nyata.
document.getElementsByTagName(): Mengambil elemen-elemen mengikut nama tag. Mengembalikan HTMLCollection.
document.querySelector(): Menggunakan penyeleksi CSS untuk mengambil elemen pertama yang sepadan.
document.querySelectorAll(): Menggunakan penyeleksi CSS untuk mengambil semua elemen yang sepadan. Mengembalikan NodeList. NodeList ialah koleksi statik yang menyimpan keadaan pada masa pengambilan dan tidak mencerminkan perubahan berikutnya pada DOM.

Contoh: `getElementById` dan `querySelector`

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

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"
3console.log(id);

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(): Menambah kelas.
remove(): Mengeluarkan kelas.
toggle(): Menambah atau mengeluarkan kelas bergantung kepada sama ada ia wujud.
contains(): Memeriksa sama ada sesuatu 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: Mengakses nod induk.
childNodes: Mengakses nod anak. Anda boleh mengakses semua jenis nod, bukan hanya nod elemen seperti tag HTML, tetapi juga nod teks dan nod komen.
firstChild / lastChild: Mengakses elemen anak pertama dan terakhir.
nextSibling / previousSibling: Mengakses elemen adik-beradik seterusnya dan 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// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

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 Shadow DOM 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`