JavaScript dan HTML

Articles

JavaScript dan HTML

Artikel ini menjelaskan 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 lingkungan browser, menyediakan fungsi dan informasi yang terkait dengan halaman web dan jendela browser. Karena window adalah cakupan global dari browser, semua kode JavaScript yang berjalan di browser menjadi bagian dari objek window. Objek window memainkan peran penting dalam menjalankan JavaScript di lingkungan browser, menyediakan banyak API dan properti.

Fitur Utama dari Objek `window`

Properti

 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 saat ini.
window.location: Mengelola URL saat ini dan navigasi browser.
window.history: Mengakses informasi riwayat browser dan memungkinkan navigasi maju dan mundur.
window.navigator: Memberikan informasi tentang browser dan perangkat.
window.innerWidth / window.innerHeight: Mendapatkan lebar dan tinggi viewport.

Metode

 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(): Menampilkan dialog peringatan.
window.confirm(): Menampilkan dialog yang meminta konfirmasi pengguna dan mengembalikan hasil OK atau Batal.
window.prompt(): Menampilkan dialog yang meminta input pengguna dan mendapatkan nilai yang dimasukkan.
window.open(): Membuka jendela atau tab baru.
window.setTimeout() / window.setInterval(): Mengatur timer untuk menjalankan fungsi setelah waktu tertentu atau pada interval tertentu.

Penanganan 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: Event ini dipicu ketika halaman telah selesai dimuat.
window.onresize: Event ini dipicu ketika ukuran jendela diubah.
window.onscroll: Event ini terjadi ketika pengguna menggulir halaman.

Peran sebagai Variabel Global

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

Objek window menyimpan variabel dan fungsi global. Dengan kata lain, variabel dan fungsi yang dideklarasikan secara otomatis menjadi properti dari window.

Manipulasi DOM dalam JavaScript

Manipulasi DOM (Document Object Model) dalam JavaScript digunakan untuk berinteraksi secara dinamis dengan elemen-elemen pada halaman web. DOM merepresentasikan struktur dokumen HTML sebagai sebuah pohon, yang dapat diubah menggunakan JavaScript untuk memodifikasi struktur dan mengontrol tampilan halaman.

Dasar-Dasar DOM

DOM memperlakukan HTML sebuah halaman web sebagai objek, memungkinkan akses dan modifikasi elemen serta atribut. Gunakan objek document untuk mengakses dokumen HTML.

Mengambil Elemen DOM

JavaScript memiliki beberapa metode untuk mengakses elemen dalam DOM.

document.getElementById(): Mengambil elemen berdasarkan atribut id-nya.
document.getElementsByClassName(): Mengambil elemen berdasarkan nama kelas. Mengembalikan sebuah HTMLCollection. HTMLCollection adalah kumpulan data yang dinamis dan merefleksikan perubahan pada DOM secara langsung.
document.getElementsByTagName(): Mengambil elemen berdasarkan nama tag. Mengembalikan sebuah HTMLCollection.
document.querySelector(): Menggunakan selector CSS untuk mengambil elemen pertama yang cocok.
document.querySelectorAll(): Menggunakan selector CSS untuk mengambil semua elemen yang cocok. Mengembalikan sebuah NodeList. NodeList adalah kumpulan statis yang menahan keadaan saat pengambilan data dan tidak merefleksikan perubahan pada DOM setelahnya.

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

Berbagai operasi dapat dilakukan pada elemen-elemen yang diperoleh.

Mengubah Teks

Untuk mengubah teks suatu elemen, gunakan textContent atau innerHTML.

textContent: Mendapatkan atau mengubah isi teks dari elemen. Tag HTML tidak akan ditafsirkan.
innerHTML: Mendapatkan atau mengubah isi HTML dari elemen. String yang berisi tag HTML juga akan diproses.

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

Mengubah Atribut

Gunakan setAttribute() dan getAttribute() untuk mengubah 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 sebuah elemen.

add(): Menambahkan kelas.
remove(): Menghapus kelas.
toggle(): Menambah atau menghapus kelas tergantung apakah kelas tersebut sudah ada atau belum.
contains(): Memeriksa apakah suatu kelas ada.

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

Membuat dan Menghapus Elemen DOM

Membuat Elemen Baru

Gunakan document.createElement() untuk membuat elemen baru dan menambahkannya 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 metode remove() untuk menghapus sebuah elemen.

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

Menambah Event

Sebagai bagian dari manipulasi DOM, Anda dapat menambah event handler yang merespons interaksi pengguna. Gunakan addEventListener() untuk menangani event seperti klik dan interaksi keyboard.

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

Pada contoh ini, menekan sebuah tombol akan mengubah teks dari elemen #content.

Menavigasi Pohon DOM

Anda dapat menavigasi DOM untuk mengakses elemen induk dan saudara.

parentNode: Mengakses node induk.
childNodes: Mengakses node anak. Anda dapat mengakses semua jenis node, tidak hanya node elemen seperti tag HTML, tetapi juga node teks dan node komentar.
firstChild / lastChild: Mengakses elemen anak pertama dan terakhir.
nextSibling / previousSibling: Mengakses elemen saudara berikutnya dan sebelumnya.

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

Contoh: Menambahkan Item Baru ke dalam Daftar

Berikut adalah contoh menambahkan item baru ke dalam daftar.

 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 kode ini, mengklik tombol "Tambahkan Item" menambahkan elemen <li> baru ke dalam daftar.

Ringkasan

Manipulasi DOM JavaScript memungkinkan Anda untuk mendapatkan, mengubah, membuat, dan menghapus elemen dalam dokumen HTML.
Anda dapat mendapatkan elemen menggunakan metode seperti getElementById() dan querySelector().
Gunakan textContent atau innerHTML untuk mengubah teks dan HTML, serta setAttribute() untuk memanipulasi atribut.
Gunakan createElement() untuk membuat elemen baru dan remove() untuk menghapusnya.
Anda dapat membuat halaman web interaktif yang merespons tindakan pengguna melalui penanganan acara.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Fungsi Generator dalam JavaScript Shadow DOM dalam JavaScript

JavaScript dan HTML

YouTube Video

Objek window dalam JavaScript

Fitur Utama dari Objek window

Properti

Metode

Penanganan Acara

Peran sebagai Variabel Global

Manipulasi DOM dalam JavaScript

Dasar-Dasar DOM

Mengambil Elemen DOM

Contoh: getElementById dan querySelector

Manipulasi DOM

Mengubah Teks

Mengubah Atribut

Mengubah CSS

Memanipulasi Kelas

Membuat dan Menghapus Elemen DOM

Membuat Elemen Baru

Menghapus Elemen

Menambah Event

Menavigasi Pohon DOM

Contoh: Menambahkan Item Baru ke dalam Daftar

Ringkasan

YouTube Video

Objek `window` dalam JavaScript

Fitur Utama dari Objek `window`

Contoh: `getElementById` dan `querySelector`