Mari belajar javascript dasar dan DOM pada javascript
JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan interaktivitas pada halaman web. Dengan JavaScript, Anda dapat membuat halaman web menjadi lebih dinamis, seperti menampilkan animasi, memvalidasi formulir, atau mengontrol perilaku elemen pada halaman.
JavaScript memiliki sintaks sederhana yang mudah dipelajari. Berikut adalah elemen-elemen utama yang perlu Anda ketahui:
var, let, dan const.if, else, dan else if.for, while, atau do...while.Berikut adalah beberapa contoh kode JavaScript dasar:
// Deklarasi variabel
let name = "Rafi";
const age = 18;
// Fungsi sederhana
function greet() {
console.log("Halo, " + name);
// output : Halo, Rafi
}
// Pemanggilan fungsi
greet();
// Kondisi
if (age >= 18) {
console.log("dewasa.");
} else {
console.log("bawah umur.");
}
// Perulangan
for (let i = 1; i <= 5; i++) {
console.log("Angka " + i);
// output Angka 1 sampai Angka 5
}
Dengan JavaScript, Anda dapat menambahkan logika dan interaksi pada halaman web, membuatnya lebih hidup dan menarik bagi pengguna.
DOM (Document Object Model) adalah representasi struktur dari dokumen HTML atau XML sebagai pohon (tree). Dengan DOM, JavaScript dapat mengakses dan memanipulasi elemen-elemen pada halaman web.
Struktur DOM tree merepresentasikan elemen-elemen HTML dalam bentuk hierarki. Elemen-elemen ini termasuk elemen induk (parent), anak (child), dan saudara (sibling). Berikut adalah struktur dasar DOM tree:
<!DOCTYPE html>
<html>
<head>
<title>Contoh DOM</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>contoh DOM Tree</p>
</body>
</html>
Struktur di atas akan diwakili dalam DOM tree seperti ini:
<title>.<h1> dan <p>.JavaScript dan DOM memungkinkan Anda untuk membuat halaman web yang interaktif dan dinamis. Dengan memahami struktur DOM tree, Anda dapat memanipulasi elemen-elemen HTML dengan lebih mudah menggunakan JavaScript.
DOM Selection adalah proses memilih elemen-elemen pada dokumen HTML menggunakan JavaScript. Dengan DOM Selection, Anda dapat mengakses, membaca, atau memanipulasi elemen tertentu dalam halaman web.
JavaScript menyediakan beberapa metode untuk memilih elemen dalam DOM. Berikut adalah metode yang paling umum digunakan:
Berikut adalah beberapa contoh cara menggunakan metode DOM Selection:
// Memilih elemen berdasarkan ID
const header = document.getElementById("header");
console.log(header.textContent);
// Memilih elemen berdasarkan class
const items = document.getElementsByClassName("item");
console.log(items[0].textContent);
// Memilih elemen berdasarkan tag
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].textContent);
// Memilih elemen pertama dengan querySelector
const firstItem = document.querySelector(".item");
console.log(firstItem.textContent);
// Memilih semua elemen dengan querySelectorAll
const allItems =
document.querySelectorAll(".item");
allItems.forEach(item => console.log(item.textContent));
Berikut adalah penjelasan singkat tentang metode-metode tersebut:
Berikut adalah contoh struktur HTML yang digunakan dalam seleksi DOM:
<!DOCTYPE html>
<html>
<head>
<title>
Contoh DOM Selection
</title>
</head>
<body>
<h1 id="header">
Selamat Datang
</h1>
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item">Item 3</p>
</body>
</html>
DOM Selection adalah langkah pertama untuk berinteraksi dengan elemen-elemen dalam halaman web. Dengan memilih elemen yang tepat, Anda dapat memanipulasi konten, atribut, atau gaya elemen menggunakan JavaScript.
JavaScript digunakan untuk membaca, menambahkan, mengubah, atau menghapus elemen pada DOM tree. Berikut adalah contoh sederhana:
// Menambahkan elemen
baru ke DOM
const newElement = document.createElement("p");
newElement.textContent = "Ini adalah elemen baru.";
document.body.appendChild(newElement);
// Mengubah teks
pada elemen
const heading = document.querySelector("h1");
heading.textContent = "Halo";
// Menghapus elemen
const paragraph = document.querySelector("p");
paragraph.remove();
Berikut adalah penjelasan dari kode manipulasi DOM:
document.createElement("p") membuat elemen paragraf baru (<p>).newElement.textContent = "Ini adalah elemen baru."; mengisi teks dalam elemen paragraf baru.document.body.appendChild(newElement); menambahkan paragraf baru ke dalam <body>.document.querySelector("h1"); memilih elemen <h1>.heading.textContent = "Halo"; mengganti teks dalam elemen <h1> menjadi "Halo".<p> pertama pada dokumen.paragraph.remove(); menghapus elemen paragraf yang dipilih.DOM Event adalah mekanisme di mana JavaScript dapat merespons interaksi pengguna dengan elemen pada halaman web. Interaksi ini bisa berupa klik, ketikan, gerakan mouse, atau bahkan perubahan nilai pada form. Dengan menangani event, Anda dapat membuat halaman web menjadi lebih interaktif dan dinamis.
Berikut adalah beberapa jenis event yang umum digunakan dalam DOM:
mouseover, mouseout, dan mousemove.keydown, keypress, dan keyup.submit, change, dan input.load dan resize.Untuk menangani event, Anda dapat menggunakan metode addEventListener. Metode ini memungkinkan Anda menambahkan fungsi yang akan dijalankan ketika event terjadi.
// Menangani event klik
const button = document.getElementById("myButton");
button.addEventListener("click", function(){
alert("Tombol diklik!");
});
// Menangani event mouse
const box = document.getElementById("myBox");
box.addEventListener("mouseover", function(){
box.style.backgroundColor = "yellow";
});
box.addEventListener("mouseout", function(){
box.style.backgroundColor = "white";
});
// Menangani event keyboard
document.addEventListener("keydown", function(e){
console.log("Key yang ditekan:", e.key);
});
Berikut adalah struktur HTML untuk contoh event di atas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Contoh DOM Event</title>
<script src="https://cdn.tailwindcss.com">
</script>
</head>
<body class="bg-gray-100 font-sans
text-gray-800 p-6">
<div class="max-w-lg mx-auto">
<!-- Tombol -->
<button id="myButton"
class="px-4 py-2 bg-blue-500
text-white font-semibold rounded shadow
hover:bg-blue-600">
Klik Saya
</button>
<!-- Kotak -->
<div id="myBox"
class="w-52 h-24 border border-black
mt-4 flex
justify-center items-center
text-lg font-medium">
Kotak
</div>
</div>
</body>
</html>
Berikut adalah penjelasan dari kode di atas:
DOM Event memungkinkan Anda untuk merespons interaksi pengguna dengan elemen-elemen pada halaman web. Dengan memahami jenis-jenis event dan cara menangani event menggunakan addEventListener, Anda dapat menciptakan pengalaman pengguna yang lebih interaktif.
DOM Traversal adalah teknik untuk menjelajahi atau menavigasi elemen-elemen dalam struktur pohon DOM (Document Object Model). Dengan DOM Traversal, Anda dapat berpindah dari satu elemen ke elemen lain, seperti ke elemen induk, anak, atau saudara dalam hierarki DOM.
Berikut adalah metode yang umum digunakan untuk menjelajahi elemen dalam DOM:
Berikut adalah contoh cara menggunakan metode DOM Traversal:
// Mengakses elemen parent
const child = document.getElementById("child");
console.log(child.parentNode);
// Mengakses elemen anak
const parent = document.getElementById("parent");
console.log(parent.children);
// Mengakses elemen pertama dan terakhir
console.log(parent.firstElementChild);
console.log(parent.lastElementChild);
// Mengakses elemen saudara (sibling)
const firstChild = parent.firstElementChild;
console.log(firstChild.nextElementSibling);
// Saudara berikutnya
console.log
(firstChild.nextElementSibling.previousElementSibling);
// Kembali ke elemen awal
Berikut adalah contoh struktur HTML untuk latihan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Contoh DOM Traversal</title>
</head>
<body>
<div id="parent">
<div id="child1">Anak 1</div>
<div id="child2">Anak 2</div>
<div id="child3">Anak 3</div>
</div>
<script src="script.js"<</script>
</body>
</html>
Berikut adalah penjelasan dari kode di atas:
child.parent.DOM Traversal adalah teknik penting untuk menavigasi elemen-elemen dalam struktur DOM. Dengan memahami metode DOM Traversal, Anda dapat mengakses elemen-elemen yang spesifik dan memanipulasi elemen-elemen tersebut dengan mudah menggunakan JavaScript.