Catatan Kuliah: Belajar Javascript - DOM (Document Object Model)

Playlist dan Tujuan

• Ada playlist baru di Youtube: Javascript Tutorial untuk pemula.
• Playlist ini berisi materi Javascript yang sering digunakan di industri.
• Setiap video dalam playlist disusun berurutan, meskipun tidak terlalu terstruktur.

Apa itu DOM?

• Document Object Model (DOM) adalah standar yang digunakan untuk mengakses dan memperbarui konten HTML.
• DOM memungkinkan kita untuk mengubah elemen HTML dan styling melalui Javascript.

Poin Pembelajaran

1. Element Manipulation

   • Menambahkan, mengubah, dan menghapus elemen HTML dengan Javascript.

2. Data Selector

   • Cara memilih elemen menggunakan metode seperti getElementById dan querySelector.

3. Styling di Javascript

   • Mengubah styling elemen DOM melalui Javascript.

4. Event Handling

   • Menangani berbagai event seperti click, mouse over, dan mouse out.

5. Tugas Kecil

   • Persiapan folder dan file untuk praktikum.

Praktik Menggunakan DOM

• Mengubah Title:

  • Contoh: Mengubah document.title menggunakan console.log() untuk memeriksa.

• Manipulasi Elemen:

  • Menggunakan document.body.append() untuk menambahkan elemen baru ke dalam body.
  • Menggunakan document.createElement() untuk membuat elemen baru.

Contoh Kode

• Mengubah judul:

  document.title = 'Vikri Gobles';
  

• Menambahkan elemen:

  const body = document.body;
  body.append('Hello world');
  

• Membuat elemen H1:

  const h1 = document.createElement('h1');
  h1.textContent = 'Anjay ini H1 bro';
  body.append(h1);
  

Styling Elemen

• Menggunakan style untuk mengubah tampilan elemen:

  btn1.style.border = 'none';
  btn1.style.padding = '8px';
  btn1.style.background = 'tomato';
  

Event Handling

• Menambahkan event onclick dan membuat fungsi untuk merespons klik.
• Contoh penggunaan onmouseover dan onmouseout untuk menangani interaksi dengan mouse:

  <button id="btn1" onmouseover="alert('Mouse over!');">Klik Saya</button>
  

Tugas

• Munculkan elemen HTML baru dengan teks nama kalian ketika mouse bergerak ke tombol kedua.
• Ubah warna teks ketika mouse keluar dari tombol.

Penutup

• Tutorial ini adalah bagian dari pembelajaran lebih lanjut tentang Javascript.
• Playlist Javascript akan terus diperbarui dengan materi baru.