Pengenalan Javascript Dan Dom

1. Pengenalan JavaScript dan DOM

• Apa itu JavaScript?

  • JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif.

• Apa itu DOM?

  • DOM adalah struktur yang merepresentasikan elemen-elemen dalam halaman HTML dan memungkinkan kita untuk memanipulasi halaman tersebut menggunakan JavaScript.

• Bagaimana JavaScript berinteraksi dengan DOM?

  • JavaScript dapat mengakses, memodifikasi, dan menghapus elemen-elemen HTML menggunakan DOM.

2. Dasar-Dasar DOM

• Mengakses Elemen DOM

  • Menggunakan metode seperti getElementById(), getElementsByClassName(), dan querySelector().

    // Mengakses elemen dengan ID
    let element = document.getElementById('myElement');
    
    // Mengakses elemen dengan class
    let elements = document.getElementsByClassName('myClass');
    
    // Mengakses elemen pertama yang cocok dengan selector
    let firstElement = document.querySelector('p');

• Manipulasi Konten Elemen

  • Mengubah teks atau HTML elemen menggunakan properti seperti innerText dan innerHTML.

    // Mengubah teks dalam elemen
    element.innerText = "Hello, World!";
    
    // Mengubah konten HTML dalam elemen
    element.innerHTML = "<strong>Hello, World!</strong>";

3. Menambahkan dan Menghapus Elemen

• Membuat Elemen Baru

  • Menggunakan createElement() dan appendChild().

    let newDiv = document.createElement('div');
    newDiv.innerText = "This is a new div!";
    document.body.appendChild(newDiv);

• Menghapus Elemen

  • Menggunakan removeChild() untuk menghapus elemen dari DOM.

    let elementToRemove = document.getElementById('oldElement');
    document.body.removeChild(elementToRemove);

4. Event Handling (Penanganan Peristiwa)

• Menambahkan Event Listener

  • Menggunakan addEventListener() untuk menangani peristiwa (event).

    let button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('Button clicked!');
    });

• Membuat Fungsi untuk Event

  • Menangani berbagai jenis event seperti click, mouseover, keydown, dan lainnya.

    button.addEventListener('mouseover', function() {
        button.style.backgroundColor = 'yellow';
    });

5. Manipulasi Atribut Elemen

• Mengakses dan Mengubah Atribut Elemen

  • Menggunakan getAttribute() dan setAttribute() untuk membaca dan mengubah atribut elemen.

    let imgElement = document.getElementById('myImage');
    let imgSrc = imgElement.getAttribute('src'); // Mengambil atribut src
    imgElement.setAttribute('alt', 'A beautiful image'); // Mengubah atribut alt

• Menghapus Atribut

  • Menggunakan removeAttribute() untuk menghapus atribut elemen.

    imgElement.removeAttribute('src');

6. Styling Elemen dengan JavaScript

• Mengubah CSS Elemen

  • Mengubah gaya elemen dengan properti style.

    let divElement = document.getElementById('myDiv');
    divElement.style.backgroundColor = 'lightblue';
    divElement.style.width = '200px';
    divElement.style.height = '200px';

7. Manipulasi Kelas CSS

• Menambah dan Menghapus Kelas

  • Menggunakan classList.add(), classList.remove(), dan classList.toggle() untuk menambahkan atau menghapus kelas CSS.

    divElement.classList.add('newClass'); // Menambah kelas
    divElement.classList.remove('oldClass'); // Menghapus kelas
    divElement.classList.toggle('active'); // Men-toggle kelas

8. Penutupan dan Praktik

• Tugas dan Praktik Mandiri

  • Menerapkan apa yang telah dipelajari untuk membuat proyek kecil seperti interaktivitas tombol, form, atau galeri gambar.

  • Cobalah membuat aplikasi sederhana seperti kalkulator atau pengingat tugas menggunakan DOM.

9. Referensi dan Dokumentasi

• Menggunakan dokumentasi resmi untuk mempelajari lebih lanjut tentang DOM dan JavaScript:

  • MDN Web Docs (Document Object Model)