Recommended
More Related Content
Similar to 2nd Meet Web Study Jam.pptx
Similar to 2nd Meet Web Study Jam.pptx (20)
2nd Meet Web Study Jam.pptx
- 1. JavaScript DOM (Document Object Model) Universitas Safin Pati
- 2. Definisi DOM (Document Object Model) adalah sebuah interface yang memungkinkan Anda sebagai developer untuk memanipulasi style, konten dari sebuah website.
- 3. Fungsi Fungsi utama DOM adalah untuk memanipulasi halaman website melalui tag HTML. Dengan DOM, Anda dapat mengubah, mengambil, menambah, ataupun menghapus elemen HTML.
- 4. TIPE DATA Universitas Safin Pati
- 5. Tipe Data Keterangan Document Merupakan representasi dari halaman web Node Merupakan base class untuk semua tipe data di DOM, seperti Document, Element, dan Attr Element Merupakan representasi object element di halaman web, misal head, body, form, input, dan lain-lain NodeList Merupakan array/collection yang berisikan Node Attr Atau attribute, merupakan representasi object attribute dalam element NamedNodeMap Merupakan collection yang berisikan Attr dalam bentuk Map
- 7. Document ⮚ Document secara otomatis dibuat dalam browser ketika membuka halaman web, sehingga kita tidak perlu membuat objek Document secara manual ⮚ Kita bisa langsung menggunakan kata kunci document
- 8. Example
- 9. Document Property ⮚ Properti document atau metadata adalah detail tentang suatu file yang menjelaskan atau mengidentifikasinya ⮚ Properti ini meliputi detail seperti judul, nama penulis, subjek, dan kata kunci yang mengidentifikasi topik atau konten document
- 10. Example
- 11. Document Method ⮚ "Document object" menyediakan berbagai metode (method) dan properti (property) yang memungkinkan Anda untuk berinteraksi dengan elemen-elemen HTML di halaman web. ⮚ Salah satu metode yang umum digunakan adalah "getElementById" yang memungkinkan Anda untuk mengambil elemen HTML berdasarkan Id nya.
- 12. Example
- 14. Pengertian ⮚ Node dalam DOM JS adalah objek yang merepresentasikan elemen, atribut, teks, komentar, atau dokumen HTML. ⮚ Node dapat memiliki node anak, node induk, node saudara, dan node keturunan. ⮚ Node dapat dimanipulasi dengan menggunakan metode dan properti yang telah disediakan
- 15. Node Method ⮚ Node Merthod merujuk pada metode atau fungsi yang dapat digunakan untuk berinteraksi dengan dan memanipulasi node-node dalam struktur DOM. ⮚ Metode ini memungkinkan Anda untuk melakukan berbagai operasi, seperti menemukan, menambahkan, menghapus, atau mengubah node dalam dokumen HTML.
- 16. Example
- 18. Pengertian ⮚ Element merupakan Node yang berbentuk element, biasanya adalah element HTML, misal <html>, <head>, <body>, <div>, <table>, dan lain-lain
- 21. Pengertian ⮚ Attr atau attribute merupakan representasi dari attribute sebuah element, atau singkatnya key-value, key nya adalah nama attribute, dan value nya adalah value attribute
- 22. Example
- 23. DOM CSS Universitas Safin Pati
- 24. Pengertian ⮚ Javascript juga bisa digunkan untuk mengubah style yang ada di dalam html document.getElementById(id).style.property = new style
- 25. Example No Event
- 28. Pengertian Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web. Misalnya seperti: ● User melakukan scroll; ● User melakukan klik pada elemen tertentu; ● Halaman web di-load; ● Form di-submit; ● dan sebagainya. onclick=JavaScript
- 29. Example Event
- 31. EVENT LISTENER Universitas Safin Pati
- 32. Pengertian Fungsi dalam JavaScript yang menunggu peristiwa terjadi lalu meresponsnya element.addEventListener(event, function, useCapture);
- 35. Silahkan Buat Tampilan Seperti Ini
- 36. TAMAN JURUG
- 37. NEMEN
- 38. KISINAN