Bahasa pemrograman berbasis web

Chapter 3: Belajar bahasa pemrograman berbasis web – Javascript (Part 4)

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.

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).

Bahasa pemrograman berbasis web
Document Object Model dan Javascript

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.

Bahasa pemrograman berbasis web
Basic DOM – Bahasa pemrograman berbasis web

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 :

  1. Properties : mendefinisikan informasi tentang object
  2. 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 :

PropertyDeskripsi Property
activeElementElemen yang sedang menjadi fokus pada sebuah jendela halaman
anchorsList tautan pada sebuah halaman
bodyInformasi elemen body pada halaman web
cookieInformasi tentang semua nama dan nilai cookie pada halaman
characterSetInformasi character set pada sebuah halaman
documentElementInformasi tentang object DOM elemen HTML
documentModeInformasi tentang mode yang digunakan oleh browser untuk menampilkan halaman web
domainNama domain dari server yang digunakan untuk mengirimkan dokumen tersebut
embedsDaftar yang berisi tentang semua elemen yang dipasang pada halaman web
formsDaftar yang berisi semua form pada halaman
headElemen head
imagesDaftar yang berisi semua gambar pada halaman
lastModifiedInformasi waktu kapan terakhir kali halaman tersebut diuabh
linksDaftar yang berisi semua tautan dan area pada halaman tersebut
titleJudul halaman
URLAlamat lengkap halaman web bersangkutan
Property Object Javascript

Methods Object Dokumen Javascript:

MethodsDeskripsi 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
Methods Object Javascript

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.

Contoh manipulasi DOM Javascript

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

PropertiesDeskripsi
attributesDaftar atribut-atribut object
childElementCountInformasi berisi daftar jumlah turunan object elemen
childNodesMengambil daftar yang berisi elemen turunan dari object termasuk text dan komentar
childrenMengambil daftar yang isinya hanya elemen turunan dari object
classListMengambil daftar nama atribut class sebuah object
classNameMemasang atau mengambil informasi tentang nilai dari atribut class sebuah Object
firstChildAnak pertama Object / Object turunan pertama
idMemasang atau mengambil nilai dari id object
innerHTMLMemasang atau mengambil isi konten HTML sebuah object
lastChildMengambil object turunan paling akhir dari sebuah object
nodeNameNama object
nodeTypeTipe elemen object
nodeValueMemasang atau mengabil nilai object
nextSiblingBerpindah ke object berikutnya yang sama level
parentNodeObject induk dari sebuah object
previousSiblingBerpindah ke object sebelumnya
styleMemasang atau mengambil informasi style object
Tabel Properties dari elemen

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

MethodsDeskripsi
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
cloneNodeMelakukan 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
Tabel Methods DOM Object

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>
Bahasa pemrograman berbasis web - javascript
Tampilan manipulasi textbox menggunakan javascript

Beberapa jenis property textbox :

PropertyDeskripsi
autocompleteMemberi atau mengambil nilai atribut autocomplete
autofocusMemberi atau mengambil status apakah sebuah text box mendapat fokus ketika jendela halaman di-load
defaultValueMemberi atau mengambil nilai default sebuah textbox
disabledMemberi atau mengambil status textbox
formMerujuk kepada form induk di mana textbox itu termasuk di dalamnya
listList data yang berhubungan dengan textbox bersangkutan
maxLengthMemasang atau mengambil nilai panjang maksimum karakter isi textbox
nameAtribut name textbox
patternMemasang atau mengambil informasi pola atribut textbox
placeholderAtribut placeholder textbox
readOnlyMembuat atau mangambil informasi apakah textbox tersebut read only
requiredTextbox wajib diisi
sizeAtribut ukuran textbox
typeTipe/Jenis elemen textbox
valueNilai atau isi textbox
Textbox Properties

Text Area

Elemen ini mirip dengan textbox. Perbedaannya adalah Textarea memiliki multi row atau bisa menampung banyak baris.

Property Textarea

PropertyDeskripsi
colsMenyatakan jumlah kolom pada text area
rowsMenyatakan jumlah baris
wrapWrap text
Property text area

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.

Leave a Reply