JavaScript dan HTML

Articles

JavaScript dan HTML

Artikel ini menjelaskan JavaScript dan HTML.

YouTube Video

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(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 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: Sebuah acara yang dieksekusi ketika halaman telah sepenuhnya dimuat.
window.onresize: Sebuah acara yang dieksekusi ketika ukuran jendela berubah.
window.onscroll: Sebuah acara yang dipicu 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.

 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 memiliki beberapa metode untuk mengakses elemen dalam DOM.

document.getElementById(): Mendapatkan elemen berdasarkan atribut id
document.getElementsByClassName(): Mendapatkan elemen berdasarkan nama kelas (HTMLCollection)
document.getElementsByTagName(): Mendapatkan elemen berdasarkan nama tag (HTMLCollection)
document.querySelector(): Mendapatkan elemen pertama yang cocok menggunakan selektor CSS
document.querySelectorAll(): Mendapatkan semua elemen yang cocok menggunakan selektor 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

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"

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(): Menambah kelas
remove(): Menghapus kelas
toggle(): Menambah atau menghapus kelas berdasarkan keberadaannya
contains(): Memeriksa apakah sebuah 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 (dalam semua tipe)
firstChild / lastChild: Elemen anak pertama/terakhir
nextSibling / previousSibling: Elemen saudara berikut/elemen saudara 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<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 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

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`