Pada bagian-bagian sebelumnya, kita telah sedikit mempelajari tentang dasar bahasa pemrograman berbasis web khususnya Javascript. Di dalamnya kita telah berkenalan sedikit menggunakannya di dalam dokumen HTML, misalnya penggunaan alert, prompt. Artikel kali ini melanjutkan ke tahap yang lebih advanced, bagaimana penggunaan Javascript secara luas, bagaimana ia memanipulasi halaman web, meningkatkan interaksi pada halaman, dan sebagainya.
Table of Contents
Document Object Model (DOM)
Javascript bekerja dengan cara memanipulasi elemen-elemen HTML. Agar dapat mengakses elemen-elemen tersebut, ia mesti mengetahui bagaimana cara mengakses elemen tertentu. Cara standar yang untuk mengakses setiap elemen HTML adalah menggunakan Document Object Model (DOM).
Struktur DOM
Struktur Dokumen HTML secara standar berupa hirarki Induk-Anak. Sebagai induk tertinggi adalah dokumen HTML itu sendiri yang terbagi menjadi dua anak yakni Head dan Body. Dari masing-masing anak memiliki struktur turunan sendiri dengan fungsi khusus masing-masing.
Javascript dan Document Object Model (DOM)
Karena sifat Javascript sebagai client-side programming, maka ia dapat mengakses seluruh DOM yang telah dipetakan oleh browser. Ini artinya Javascript dapat secara langsung memanipulasi DOM, dan browser secara otomatis melakukan update informasi pada halaman tersebut dengan informasi baru. Inilah kekuatan utama dari pemrograman sisi klien seperti Javascript.
Javascript memperlakukan setiap elemen dalam halaman web sebagai Object yang memiliki fitur :
- Properties : mendefinisikan informasi tentang object
- Methods : tindakan/aksi terhadap object
Javascript mendefinisikan nama object khusus bernama document sebagai rujukan terhadap elemen induk dokumen (DOM induk).
var alamatUrl = document.URL;Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript(part 3)
Berikut beberapa Properties Dokumen Javascript :
| Property | Deskripsi Property |
|---|---|
| activeElement | Elemen yang sedang menjadi fokus pada sebuah jendela halaman |
| anchors | List tautan pada sebuah halaman |
| body | Informasi elemen body pada halaman web |
| cookie | Informasi tentang semua nama dan nilai cookie pada halaman |
| characterSet | Informasi character set pada sebuah halaman |
| documentElement | Informasi tentang object DOM elemen HTML |
| documentMode | Informasi tentang mode yang digunakan oleh browser untuk menampilkan halaman web |
| domain | Nama domain dari server yang digunakan untuk mengirimkan dokumen tersebut |
| embeds | Daftar yang berisi tentang semua elemen yang dipasang pada halaman web |
| forms | Daftar yang berisi semua form pada halaman |
| head | Elemen head |
| images | Daftar yang berisi semua gambar pada halaman |
| lastModified | Informasi waktu kapan terakhir kali halaman tersebut diuabh |
| links | Daftar yang berisi semua tautan dan area pada halaman tersebut |
| title | Judul halaman |
| URL | Alamat lengkap halaman web bersangkutan |
Methods Object Dokumen Javascript:
| Methods | Deskripsi Methods Object Javascript |
|---|---|
| createElement() | Membuat elemen object |
| createTextNode() | Menambah sebuah object text |
| getElementById(id) | Mengambil informasi sebuah elemen berdasarkan id |
| getElementsByClassName(class) | Mengambil daftar yang berisikan semua elemen yang menggunakan nama class tertentu |
| getElementsByTagName(tag) | Mengambil daftar yang berisi semua elemen yang menggunakan nama tag tertentu |
| hasFocus() | Mengecek apakah window halaman web tersebut sedang aktif. Bernilai true bila sedang aktif |
| write(text) | Menuliskan text tertentu ke halaman |
| writeln(text) | Menuliskan text ke halaman web yang diakhiri dengan karakter baris baru |
Contoh: Ketikkan kode berikut ini menggunakan editor text, kemudian simpan dengan nama properti.html:
<!DOCTYPE html>
<html>
<head>
<title>Manipulasi DOM javascript</title>
<script>
var nilai = 6;
var buka;
var tutup;
for(iterasi = 1; iterasi <= nilai; iterasi++)
{
buka = "<h" + iterasi + ">";
tutup = "</h" + iterasi + ">";
document.write(buka + "Ini adalah penulisan Heading menggunakan DOM" + tutup);
}
</script>
</head>
<body>
</body>
</html>Jalankan file tersebut menggunakan browser.
Pada contoh di atas, fungsi document.write() menempatkan secara dinamis elemen h1 ke halaman web.
Properties Object DOM
Selain properties dan methods untuk dokumen seperti di atas, ada juga properties dan methods untuk setiap object elemen. Di dalam Javscript ada banyak properties dan methods. Berikut ini daftar properties yang sering digunakan:
Properties Elemen
| Properties | Deskripsi |
|---|---|
| attributes | Daftar atribut-atribut object |
| childElementCount | Informasi berisi daftar jumlah turunan object elemen |
| childNodes | Mengambil daftar yang berisi elemen turunan dari object termasuk text dan komentar |
| children | Mengambil daftar yang isinya hanya elemen turunan dari object |
| classList | Mengambil daftar nama atribut class sebuah object |
| className | Memasang atau mengambil informasi tentang nilai dari atribut class sebuah Object |
| firstChild | Anak pertama Object / Object turunan pertama |
| id | Memasang atau mengambil nilai dari id object |
| innerHTML | Memasang atau mengambil isi konten HTML sebuah object |
| lastChild | Mengambil object turunan paling akhir dari sebuah object |
| nodeName | Nama object |
| nodeType | Tipe elemen object |
| nodeValue | Memasang atau mengabil nilai object |
| nextSibling | Berpindah ke object berikutnya yang sama level |
| parentNode | Object induk dari sebuah object |
| previousSibling | Berpindah ke object sebelumnya |
| style | Memasang atau mengambil informasi style object |
Sebagai latihan, buat sebuah file bernama property-dom.html
<!DOCTYPE html>
<html>
<head>
<title>Latihan menggunakan Property DOM</title>
</head>
<body>
<body>
<h1>Heading digunakan untuk membuat judul halaman</h1>
<p>Bajawa kota yang sangat indah</p>
<br>
<button type="button" onclick="ubahwarna('red')">Ganti warna Merah!</button>
<button type="button" onclick="ubahwarna('white')">Ganti warna Putih!</button>
<script>
function ubahwarna(color) {
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>Setelah disimpan, jalankan file property-dom.html dengan browser.
Kode pada contoh di atas mendemonstrasikan penggunaan dua tombol yang menjadi pemicu fungsi ubahwarna(). Fungsi ubahwarna() menggunakan document.body untuk merujuk pada elemen body pada halaman web.
Kemudian ia mengaplikasikan style CSS untuk merubah warna menggunakan property style backgroundColor.
Baca juga : Covid 19 News dan Revolusi Industri 4 0
Catatan: dalam style CSS untuk merubah warna background menggunakan background-color. Ketika menggunakan DOM, background-color tidak dapat digunakan karena DOM tidak menggunakan simbol dash (-). Sehingga ketika style digunakan lewat DOM, ia memakai sistem kombinasi huruf Kapital dengan menghilangkan dash.
Methods pada Object DOM
Ketika kita sudah bisa mengakses object-object yang terdapat di halaman, kita bisa melakukan berbagai aksi terhadap object, menggunakan methods. Berikut methods yang sering digunakan
| Methods | Deskripsi |
|---|---|
| appendChild(object) | Menambah object turunan baru pada object yang sudah ada |
| blur() | Mengurangi tingkat fokus sebuah object pada halaman |
| click() | Melakukan aksi/tindakan klik mouse pada object bersangkutan |
| cloneNode | Melakukan penggandaan/duplikasi terhadap sebuah object DOM |
| contains(object) | Mengecek keberadaan sebuah object dalam object |
| focus() | Mengarahkan fokus terhadap sebuah object |
| getAttribute(attr) | Mengambil nilai atribut tertenu dari object |
| getElementsByClassName(class) | Mengambil daftar object yang menggunakan nama class tertentu |
| getElementsByTagName(tag) | Mengambil daftar object yang menggunakan tag yang didefinisikan |
| hasAttribute(attr) | Bernilai true jika sebuah object mengandung atribut yang didefinisikan |
| hasAttributes() | Bernilai true apabila sebuah object mengandung atribut apa saja |
| hasChildNodes() | Bernilai true jika sebuah object berisi object turunan |
| insertBefore(object) | Insert object yang didefinisikan sebelum object bersangkutan |
| removeAttribute(attr) | Menghapus atribut yang didefinisikan dari Object |
| removeChild(object) | Menghapus object turunan yang didefinisikan dari object induk |
| replaceChild(object) | Mengganti object turunan dengan object lain yang didefinisikan |
| setAttribute(attr) | Mengisi atribut object dengan nilai yang didefinisikan |
| toString() | Mengubah tipe object menjadi string |
Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (part 2)
Mengakses Elemen Halaman
Ketika aplikasi semakin besar dan kompleks dengan sendirinya semakin banyak elemen yang tertanam di dalam halaman aplikasi web. Untuk itu dibutuhkan cara untuk mengakses elemen dengan mudah. Ada dua cara untuk mengakses elemen-elemen pada halaman web:
- Menggunakan identitas yang unik pada elemen tertentu. Misalnya menggunakan atribut id.
- Menjelajahi struktur DOM untuk menemukan elemen tertentu yang termasuk bagian dari DOM tertentu.
Kedua cara di atas mempunyai kelebihan dan kekurangan masing-masing.
Menggunakan identitas
Cara ini merupakan cara yang mudah untuk menemukan elemen. Dengan javascript kita dapat menggunakan method getElemenById(). Ketika elemen yang memiliki id yang direferensikan oleh method tersebut ditemukan, maka kita dapat melakukan manipulasi terhadap elemen tersebut.
Contoh : Buat file dengan nama getid.html
<!DOCTYPE html>
<html>
<head>
<title>Menemukan Elemen Tertentu dengan Id</title>
<script>
function berubah() {
var jawaban = prompt("Masukkan teks apa saja");
var spot = document.getElementById("iniaku");
spot.innerHTML = jawaban;
}
</script>
</head>
<body>
<h1>Uhm....Cara menemukan elemen menggunakan id</h1>
<button type="button" onclick="berubah()">
Berubaaah!!!
</button>
<p id="iniaku">Ini adalah paragraf yang dicari</p>
<p id="inibukanaku">Ini adalah teks lain</p>
</body>
</html>Setelah disimpan, jalankan program di browser
Baca juga: Baca juga : Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (part 1)
Menjelajahi struktur DOM
Dalam beberapa kasus, kita perlu mengakses secara detail turunan dan segala yang berhubungan dengannya di dalam sebuah elemen. Ilustrasi sederhananya kira-kira seperti kita masuk ke dalam sebuah lokasi(elemen) lalu menjelajahi semua elemen yang terdapat di dalamnya. Untuk lebih jelasnya kita gunakan contoh seperti berikut:
Buat sebuah file bernama jelajah-elemen.html, lalu masukkan kode berikut ini
<!DOCTYPE html>
<html>
<head>
<title>Menjelajahi elemen</title>
<script>
function berubah() {
var sasaran = document.getElementById("daftarKue");
var item1 = sasaran.firstChild;
var item2 = item1.nextSibling;
var item3 = item2.nextSibling;
var item4 = item3.nextSibling;
item1.innerHTML = "Apel";
item2.innerHTML = "Jambu";
item3.innerHTML = "Pisang";
item4.innerHTML = "Rambutan";
}
</script>
</head>
<body>
<h1>Merubah elemen dengan menjelajahi</h1>
<h2>Ini adalah daftar belanjaan buah-buahan</h2>
<ul id="daftarKue"><li>Durian</li><li>Nangka</li><li>Jeruk</li><li>Lemon</li></ul>
<button type="button" onclick="berubah()">
Ubah
</button>
</body>
</html>Jalankan di browser
CATATAN : pada contoh di atas, penulisan elemen list ul dan li tidak boleh dipisahkan oleh spasi dan baris baru. Setiap spasi dianggap sebagai sebuah node.
Document Object Model (DOM) Form
Elemen-elemen Form hampir selalu kita temukan dalam halaman-halaman web seperti textbox, text area, radio buttons, dan sebagainya. Halaman media sosial, misalnya pasti ada text box untuk membuat postingan.
Text box
Berikut contoh manipulasi textbox:
Buat sebuah file bernama textbox.html kemudian isi dengan kode berikut
<!DOCTYPE html>
<html>
<head>
<title>Contoh Text Box Javascript</title>
<script>
function tampilteks() {
var textbox = document.getElementById("teks");
var data = textbox.value;
alert(data);
}
</script>
</head>
<body>
<input id="teks" type="text" name="cobateks" value="">
<button type="button" onclick="tampilteks()">Tampilkan</button>
</body>
</html>Beberapa jenis property textbox :
| Property | Deskripsi |
|---|---|
| autocomplete | Memberi atau mengambil nilai atribut autocomplete |
| autofocus | Memberi atau mengambil status apakah sebuah text box mendapat fokus ketika jendela halaman di-load |
| defaultValue | Memberi atau mengambil nilai default sebuah textbox |
| disabled | Memberi atau mengambil status textbox |
| form | Merujuk kepada form induk di mana textbox itu termasuk di dalamnya |
| list | List data yang berhubungan dengan textbox bersangkutan |
| maxLength | Memasang atau mengambil nilai panjang maksimum karakter isi textbox |
| name | Atribut name textbox |
| pattern | Memasang atau mengambil informasi pola atribut textbox |
| placeholder | Atribut placeholder textbox |
| readOnly | Membuat atau mangambil informasi apakah textbox tersebut read only |
| required | Textbox wajib diisi |
| size | Atribut ukuran textbox |
| type | Tipe/Jenis elemen textbox |
| value | Nilai atau isi textbox |
Text Area
Elemen ini mirip dengan textbox. Perbedaannya adalah Textarea memiliki multi row atau bisa menampung banyak baris.
Property Textarea
| Property | Deskripsi |
|---|---|
| cols | Menyatakan jumlah kolom pada text area |
| rows | Menyatakan jumlah baris |
| wrap | Wrap text |
Checkbox
Checkbox berfungsi untuk menampung kondisi Ya/Tidak dalam Form
<!DOCTYPE html>
<html>
<body>
<h1>Contoh penggunaan Checkbox</h1>
<label for="cekMic">Checkbox:</label>
<input type="checkbox" id="cekMic" onclick="fungsiCek()">
<p id="trims" style="display:none">Hai, terimakasih sudah memilih saya!</p>
<script>
function fungsiCek() {
var checkBox = document.getElementById("cekMic");
var text = document.getElementById("trims");
if (checkBox.checked == true){
trims.style.display = "block";
} else {
trims.style.display = "none";
}
}
</script>
</body>
</html>
Radio Button
Radio Button mirip dengan check box. Perbedaannya adalah Radio Button merupakan sebuah grup dengan beberapa pilihan, di mana hanya satu pilihan yang bisa diambil.
Bahasa pemrograman berbasis web
Javascript merupakan program yang berjalan di sisi klien. Ini berarti Javscript tidak dapat secara langsung melakukan operasi di server. Untuk itu diperlukan bahasa pemrograman lain yang berjalan di server, untuk melakukan manipulasi data. Sehingga aplikasi berbasis web dapat berjalan dinamis. Pada Chapter berikut kita akan berkenalan dengan jQuery, salah satu pustaka Javscript paling populer. Nantikan di artikel saya selanjutnya.
){kind=link}