Pengenalan DOM dalam JavaScript

Aug 19, 2024

Catatan Kuliah: Pengenalan DOM dalam JavaScript

Pendahuluan

  • Selamat datang di channel Web Programming Unpas.
  • Pembicara: Sandika Gali.
  • Tema: Seri baru tentang JavaScript, khususnya tentang DOM (Document Object Model).

Apa itu DOM?

  • Definisi DOM: Menurut Mozilla, DOM adalah antarmuka pemrograman untuk HTML yang merepresentasikan halaman web, memungkinkan program untuk mengubah dan memanipulasi strukturnya.
  • Komponen DOM:
    • Dokumen: Isi dari website yang ditampilkan di browser.
    • Objek: Nilai atau tipe data dalam JavaScript. Misal, objek mahasiswa dengan properti seperti nama, nrp, email.
    • Model: Representasi dari elemen HTML.

Memahami Struktur DOM

  • Setelah file HTML dibuka di browser, elemen-elemen HTML akan dibaca dan direpresentasikan sebagai objek di dalam browser.
  • Pohon Hierarki DOM (DOM Tree):
    • Struktur data yang menyimpan representasi elemen HTML dalam bentuk pohon.
    • Setiap elemen disebut sebagai simpul atau node.
    • Contoh:
      • Tag terluar adalah HTML, dengan anak tag HEAD dan BODY.
      • Struktur ini memudahkan navigasi dan manipulasi elemen.

Interaksi dengan DOM

  • Akses dan Manipulasi:
    • Menggunakan JavaScript untuk memilih (DOM Selection) dan memanipulasi (DOM Manipulation) elemen HTML.
    • Contoh manipulasi: menambah, mengubah, atau menghapus elemen.
    • Event Handling: Mempelajari perubahan pada DOM yang dipicu oleh interaksi pengguna (klik, hover, dll).

Rencana Pembelajaran

  • Materi yang akan dibahas:
    1. DOM Selection
    2. DOM Manipulation
    3. DOM Traversal
    4. Event Handling
  • Studi Kasus:
    • Membuat aplikasi sederhana seperti kalkulator, slideshow, dan game.

Persiapan untuk Seri Ini

  • Pengetahuan Dasar: Penting untuk memahami HTML, CSS, dan JavaScript sebelum memulai.
  • Software yang Diperlukan:
    • Kode editor (misalnya, Sublime Text)
    • Web browser (misalnya, Google Chrome)

Penutup

  • Dukung channel dengan like, subscribe, dan share.
  • Pertanyaan dan komentar dipersilakan di kolom komentar.
  • Terima kasih telah menonton.
  • Sampai jumpa di video berikutnya.