Pertemuan 4 - JavaScript DOM

-
DOM 
API
DOM merupakan singkatan dari Document Object Model. Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface).
Javascript DOM dan HTML
DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG. Objek DOM di javascript bernama document. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML.
Di dalam objek document, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML. Sebagai contoh fungsi documen.write().
Contoh:



  • Mengkases Elemen Tertentu dengan DOM

Objek document adalah model dari dokumen HTML. Objek ini berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML yang bisa digambarkan dalam bentuk pohon seperti ini:
Objek DOM HTML
Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu.
Contoh:


Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:
  • getElementById() fungsi untuk memilih elemen berdasarkan atribut id.
  • getElementByName() fungsi untuk memilih elemen berdasarkan atribut name.
  • getElementByClassName() fungsi untuk memilih elemen berdasarkan atribut class.
  • getElementByTagName() fungsi untuk memilih elemen berdasarkan nama tag.
  • getElementByTagNameNS() fungsi untuk memilih elemen berdasarkan nama tag.
  • querySelector() fungsi untuk memilih elemen berdasarkan query.
  • querySelectorAll() fungsi untuk memilih elemen berdasarkan query.
  • dan lain-lain.
Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.
Contoh Script:

Hasil:

Pada contoh di atas, kita memilih elemen dengan fungsi document.getElementById(). Lalu membuatkan objek untuk elemen tersebut. Setelah itu, kita bisa lakukan apapun yang diinginkan seperti mengubah teks dan style CSS.
Contoh Script:

Hasil:

Pada contoh di atas, kita memiliki tiga buah paragraf dengan nama class paragraf. Lalu kita mencoba memilih ketiga paragraf tersbut melalui javascript dengan method atau fungsi getElementByClassName().
Variabel paragraf akan berisi sebuah array yang di dalamnya terdapat tiga buah objek DOM dari paragraf. Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama.
Contoh:

Mari kita coba buat sebuah animasi warna. Kita memanfaatkan fungsi setInterval() dan fungsi setTimeOut() untuk menentukan waktu animasinya.
Contoh Script:

Hasil:

Warna akan beganti secara terus menerus dengan interval 0,5 detik dari hitam ke warna lain.


  • Membuat Elemen dengan DOM API

DOM juga menyediakan fungsi untuk membuat elemen HTML. Salah satunya adalah fungsi createElement().
Contoh Script:

Hasil:

  • Menghapus Elemen dengan DOM API
Kalau tadi kita menggunakan fungsi append() untuk menambahkan elemen, maka untuk menghapusnya kita menggunakan fungsi remove().

Contoh Script:

Hasil:

  • Contoh Program yang Memanfaatkan DOM

Kita sudah tahu cara mengakses elemen dengan DOM dan kita juga sudah paham cara menambahkan dan menghapus elemen.
Contoh Script:

Hasil:
(Program saat awal terbuka)

(program saat di jalankan untuk memilih menu warna latar)


(tampilan web akan berubas saat selesai mengganti warna latar)

(Program saat dijalankan untuk mengganti warna teks) 


(Hasil dari program pemilihan warna teks)

Komentar

Posting Komentar

Postingan populer dari blog ini

Pertemuan 3 - JavaScript Perulangan

-
Gambar
Perulangan Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang, berapapun yang kita mau. Ada lima macam bentuk perulangan di Javascript. Secara umum, perulangan ini dibagi dua. Yaitu:  counted loop  dan  uncounted loop . Perbedaanya: Counted Loop  merupakan perulangan yang jelas dan sudah tentu banyak perulangannya. Sedangkan  Uncounted Loop , merupakan perulangan yang tidak jelas berapa kali ia harus mengulan. Perulangan yang termasuk dalam  Counted Loop : Perulangan For Perulangan Foreach Perulangan Repeat Perulangan yang termasuk dalam  Uncounted Loop : Perulangan While Perulangan Do/While Perulangan For Perulangan  for  merupakan perulangan yang termasuk dalam  couted loop , karena sudah jelas berapa kali ia akan mengulang. Contoh Script: Hasil: Contoh Script: Hasil: Contoh Script: Hasil: Perulangan While Perulangan  while  merupakan perulangan yang termasuk dalam perulangan  uncounted loop . Perulangan...
Baca selengkapnya

Tugas Praktikum 13 || Pemrograman Web Dinamis

-
Gambar
  Fitur Upload,Report (Pdf dan Excel),Import dan Grafik - PHP Fitur Upload BLOB ke Database 1. Pastikan apache dan mysql pada app xampp sudah di start 2. buka localhost/phpmyadmin pada browser lalu pilih database db_barangku, dan buat table baru dengan nama tb_gambar dan set sebagai berikut : 3. lalu buat folder baru pada directory C:/xampp/htdocs/pw, beri nama Praktikum13 4. Lalu pada folder praktikum13 buat new file koneksiblob.php dengan script sebagai berikut : 5.Selanjutnya membuat form_upload.php dengan script sebagai berikut :     Saat dijalankan pada browser maka tampilannya seperti ini : mencoba mengisi gambar cek pada database apakah sudah masuk atau belum 6. Membuat file image_view.php untuk menampilkan gambar dari database 7. Selanjutnya membuat file tampil_gambar.php untuk menampilkan data hasil upload yang kita lakukan : saat dijalankan maka tampilanya akan seperti ini : 8.  Lalu membuat file delete_gambar.php dengan script seperti berikut : coba hapus ...
Baca selengkapnya

Pertemuan 1 - Cara Penulisan Kode JavaScript

-
Gambar
1. Tag <SCRIPT> cara yang umum dipakai adalah menuliskannya dalam tag <script> dikenal dengan istillah embed. Tag <script> bisa dibuat didalam tag <head>, maupun di dalam tag <body>.            bisa dilihat pada gambar dibawah ini :             2. File External tidak ingin kode javascript bercampurr aduk dengan HTML, kita bisa menuliskannya pada file terpisah, Caranya buatlah sebuah file yang berekstensi .js, misalnya isinya berikut ini :   Kemudian , kita perlu menghubungkan file eksternal tersebut dengan file HTML, caranya, gunakan tag <script> dengan attribute src, untuk menentukan lokasi file javascriptnya, seperti gambar dibawah ini : 3.Atribute Event Cara yang ketiga ini sering digunakan untuk memanggil fungsi pada event tertentu dikenal dengan istilah inline.  Misalnya ketika suatu elemen diklik, maka jalankan fungsi javascript. Con...
Baca selengkapnya