Manipulasi DOM dengan JavaScript

Begitu banyak sumber tentang sejarah JavaScript. Ada yang mengatakan tidak berhubungan dengan Java dan ada yang mengatakan berhubungan dengan Java. Untuk menggali lebih jauh, mungkin kita harus melakukan research lebih lanjut dan tulisan ini tidak difokuskan untuk itu. :D Saya ambil saja salah satu sumber yang saya yakini yang saya dapatkan pada halaman http://oreilly.com/pub/a/javascript/2001/04/06/js_history.html yang menyatakan bahwa Javascript dan Java saling berhubungan pada awal pengembangannya.

Berikut kutipan yang diterjemahkan pada halaman tesebut;
"Balik pada awal 1995. Netscape mempekerjakan Brendan Eich pada MicroUnitSystems Engineering untuk mengimplementasikan satu bahasa baru. Membuat Navigator baru yang menambahkan dukungan Java yang dapat diakses oleh programmer non-Java. Eich memutuskan untuk membuat script terpisah yang menyesuaikan dengan environtment dan audience (programmer) agar web designer dan "
web developer dapat terhubung pada elemen-elemen yang ada pada halaman (html)."

Bahasa script seperti; JavaScript, PHP, Ruby, AutoLISP dll sejatinya diperuntukkan untuk aplikasi yang kecil. Tetapi seiring perkembangan waktu, bahasa script berkembang kearah enterprise tentunya dengan arsitektur yang disesuaikan.

Dulu, JavaScript digunakan hanya terbatas pada akses halaman html. Pada masa ini, JavaScript telah dikembangkan secara luas seperti game engine, animasi, manipulasi halaman html, framework UI, dll.

Pada tulisan kali ini, saya akan menunjukkan bagaimana memanipulasi Document Object Model (DOM) menggunakan JavaScript dengan format latihan;

1. Menambahkan tulisan pada node[1]

Buatlah page seperti berikut

Jalankan page maka akan terlihat seperti berikut;

2. Menambahkan attribut style pada elemen.
Melanjutkan contoh diatas, sekarang bukalah developer tools dan ikuti gambar berikut;

3. Menambahkan text pada elemen DOM
Berikut ini Anda kita akan mempelajari bagaimana menangani array pada elemen dan memberinya nama.

Buatlan halaman seperti berikut

Buka halaman tersebut, buka developer tools dan tuliskan langkah-langkah berikut;

4. Menambahkan class pada elemen DOM
Game kali ini cukup menarik karena kita bisa membuat dan memodifikasi elemen, menempatkan class atau id sehingga berwarna-warni.

Game berikut bisa dimulai dengan merefresh halaman yang sudah dibuat pada game diatas sebelumnya.
Buka developer tools, dan ikuti berikut;

Game yang menarik bukan? :)




[1] node = DOM element, nodes = DOM elements