JavaScript dan DOM Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed

JavaScript dan DOM

Pemrograman Internet (TKE 074082)

Program Studi Teknik Elektro, Unsoed

Kode yang dijalankan di peramban (

klien

),

setelah halaman web diambil dari peladen.

Sering skrip di sisi klien ini digunakan

untuk

memanipulasi

halaman web

Mengapa kita membutuhkan

pemrograman di sisi klien?

Pemrograman di Sisi Klien?

✔

Pemrograman di sisi klien



Usabilitas: dapat digunakan untuk memodifikasi halaman, tanpa 

harus mengirimkannya ke peladen. Antarmuka pengguna yang 

cepat dan interaktif



Efisiensi: dapat membuat perubahan­perubahan kecil dan cepat 

tanpa harus menunggu atau tergantung peladen



Event­driven

: dapat merespon aksi pengguna seperti klik, dst.

✔

Pemrograman di sisi peladen



Keamanan: akses ke data yang tersimpan di peladen, klien tak 

dapat melihat kode sumber



Kompatibilitas: tidak berhubungan dengan dukungan peramban



Powerful

: dapat menulis berkas, koneksi ke peladen lain, basis 

Bahasa pemrograman yang “ringan.”

Digunakan untuk membuat halaman

web menjadi lebih interaktif.

Membuat Halaman Web Interaktif

✔

Memasukkan teks secara dinamis ke HTML, misal 

username

✔

Melakukan aksi ketika ada kejadian atau event, misal 

klik tombol

✔

Mengambil informasi komputer pengguna, misal tipe 

peramban

✔

Melakukan perhitungan atau operasi di komputer 

pengguna, misal: validasi borang

Merupakan standar web, tapi

tidak

semua

peramban mendukung semua

Tak berhubungan dengan Java, kecuali nama

dan beberapa kesamaan sintaks.

JavaScript vs. Java

✔

Interpreted bukan compiled

✔

Sintaks dan aturan lebih “santai”: tipe data lebih 

sedikit dan lebih ”lemah” (weak/loose typing), variabel 

tidak perlu dideklarasikan, sedikit exception terhadap 

kesalahan

✔

Kode berada di dalam halaman web dan terintegrasi 

dengan isi HTML/CSS

JavaScript vs. PHP

✔

Persamaan

: interpreted bukan compiled, sintaks 

aturan, dan tipe yang lebih “santai”, case­sensitive, 

regex built­in untuk pemrosesan teks.

✔

Perbedaan

: JS lebih berorientasi obyek: noun.verb(), 

tak terlalu prosedural, JS fokus ke antarmuka 

pengguna dan interaksi dengan dokumen sedang 

PHP pada keluaran dan berkas/borang HTML, kode 

JS dijalankan di klien/peramban sedang PHP di 

peladen web.

Menautkan Berkas JS

✔

Tag 

_script

 diletakkan di 

_head

 berkas HTML.

✔

Kode skrip disimpan di dalam berkas .js terpisah.

✔

Kode JS dapat pula diletakkan secara langsung di 

dalam 

head

 atau 

body

 berkas HTML.

✔

Lebih baik menyimpan kode JS dalam berkas 

tersendiri, sehingga akan memisahkan isi, presentasi, 

dan perilaku halaman web.

Pernyataan alert

✔

Perintah JS yang akan memunculkan boks dialog 

pop­up 

pesan

.

var age = 22;

var weight = 60;

var studentName = "Seiei";

✔

Variabel dideklarasikan dengan kata kunci 

_var

.

✔

Tipe tidak dispesifikasikan, walaupun sebenarnya JS punya.



Number, Boolean, String, Array, Object, Function, Null, 

Undefined.



Kita dapat mengetahui tipe variabel dengan 

typeof

.

Tipe String

var s = “Setsuna F. Seiei”;

var fNAME = s.substring(0, s.indexOf(“ “)); // Setsuna

var len = s.length; // 16

var ss = 'Soran Ibrahim' // dapat pula menggunakan ' '

✔

Method

: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, 

replace, split, substring, toLowerCase, toUpperCase.

✔

Properti 

_length

 bukan 

method

.

Program JS tidak mempunyai main, dan

Event-driven programming

Tombol: <button>

<button>Click me!</button>

✔

Teks yang akan digunakan pada tombol berada di dalam tag 

button

. Dapat pula berisi gambar.

✔

Untuk membuat tombol yang responsif atau kontrol antarmuka:



Pilih kontrol dan 

event

­nya yang menarik

function myFunction() {

alert("Salam!");

alert("Apa kabar?");

}

Pernyataan yang diletakkan di dalam fungsi dapat disesuaikan 

dengan respon yang diinginkan.

Event Handler

<element attributes onclick="function();"> …

<button onclick="myFunction();">Click me!</button>

✔

Fungsi JS dapat diset sebagai 

event handler

. Jadi ketika kita 

berinteraksi dengan sebuah elemen, fungsi akan dijalankan.

Document Object

Antarmuka untuk program atau skrip yang dapat

memberikan akses dan pemutakhiran terhadap

isi, struktur, dan gaya dokumen

.

Sebagian besar kode JS memanipulasi

elemen-elemen di dalam halaman HTML.

Contoh: mengetahui dan mengubah status

elemen, mengubah gaya halaman, ...

Setiap elemen dalam sebuah halaman

mempunyai objek DOM yang bersesuaian.

Pengaksesan atau modifikasi atribut objek DOM

dilakukan dengan objectName.attributeName.

Mengakses elemen:

JS

var name = document.getElementById("id");

HTML

<button onclick="changeText();">Click me!</button>

<input id="output" type="text" value="replace me" />

function changeText() {

var textbox = document.getElementById("output");

textbox.value = "Hello, world!";

}

document.getElementById

mengembalikan

objek DOM untuk sebuah elemen

dengan id tertentu.

Dapat mengubah teks pada sebagian besar

kontrol borang dengan mengganti

JS

function swapText() {

  var span = document.getElementById("output2");

  var textBox = document.getElementById("textbox2");

  var temp = span.innerHTML;

  span.innerHTML = textBox.value;

  textBox.value = temp;

}

HTML

<button onclick="swapText();">Click me!</button>

<span id="output2">Hello</span>

<input id="textbox2" type="text" value="Goodbye" />

Dapat mengubah teks di dalam banyak

Tipe Number

var enrollment = 99;

var medianGrade = 2.8;

var credits = 5 + 4 + (2 * 3);

✔

Integer dan real bertipe sama. Tidak ada int atau double.

✔

Operator:

_{+ ­ * / % ++ ­­ = += ­= *= /= %=}

✔

Prioritas operator atau

precedence

, sama dengan Java

Komentar

// komentar satu baris

/* komentar lebih

   dari satu baris */

✔

Sama dengan komentar di Java

✔

Perbedaan komentar di HTML, CSS, Java, JavaScript, PHP?

HTML:

<!­­ komentar ­­>

CSS/JS/PHP:

/* komentar */

Java/JS/PHP:

// komentar

String

✔

escape sequence

: 

_{\' \" \& \n \t \\}

✔

Konversi angka dan string:

var count = 10;

var s1 = "" + count;      // "10"

var s2 = count + " jeruk!";         // "10 jeruk!"

var n1 = parseInt("42 jawabannya"); // 42

var n2 = parseFloat("bosan");       // NaN

✔

Mengakses huruf pada string:

var firstLetter = s[0];      // tak berjalan di IE

var firstLetter = s.charAt(0);   // jalan di IE

var lastLetter = s.charAt(s.length – 1);

for (inisialisasi; kondisi; pemutakhiran) {

pernyataan;

}

var sum = 0;

for (var i = 0; i < 100; i++) {

sum = sum + i;

}

var s1 = "hello";

var s2 = "";

for (var i = 0; i < s.length; i++) {

s2 += s1.charAt(i) + s1.charAt(i);

}

null dan undefined

var soran = null;

var iwan = 9;

var paijo;

// soran bernilai null

// iwan bernilai 9

// paijo undefined

✔

undefined: belum dideklarasikan, tak ada nilainya

Operator Logika

✔

_{> < >= <= && || ! == != === !==}

✔

Kebanyakkan operator logika secara otomatis mengkonversi tipe:

5 < "7" bernilai benar

42 == 42.0 bernilai benar

"5.0" == 5 bernilai benar

✔

₌₌₌

 and 

_!==

 membandingkan secara ketat; operator ini akan 

memeriksa tipe dan nilainya.

"5.0" === 5 bernilai salah

Pernyataan if/else

if (kondisi) {

pernyataan;

} else if (kondisi) {

pernyataan;

} else {

pernyataan;

}

✔

Struktur identik dengan Java

✔

JavaScript mengijinkan hampir semua bentuk nilai sebagai kondisi

Tipe Boolean

var iLikePinet = true;

var ieIsGood = "IE6" > 0;   // false

if ("web dev is great") {  /* true */ }

if (0) {  /* false */ }

✔

Sembarang nilai dapat digunakan sebagai Boolean



Nilai salah: 0, 0.0, NaN, "", null, dan undefined



Nilai benar: selain nilai di atas

✔

Konversi nilai ke Boolean secara eksplisit:



var boolValue = Boolean(otherValue);



var boolValue = !!(otherValue);

Iterasi while

while (kondisi) {

pernyataan;

}

do {

pernyataan;

} while (kondisi);

✔

Kata kunci break dan continue juga dapat digunakan

Kotak Popup

alert("pesan");     // pesan

confirm("pesan");   // mengembalikan benar atau salah

prompt("pesan");    // mengembalikan masukan string

Array

var name = [];      // array kosong

var name = [value, ..., value]; // array terisi

name[index] = value;      // menyimpan elemen

var bebek = ["Huey", "Dewey", "Donald"];

var siswa = [];        // siswa.length is 0

siswa[0] = "Siswa1";   // siswa.length is 1

siswa[1] = "Siswa2";   // siswa.length is 2

siswa[4] = "Siswa3";   // siswa.length is 5

siswa[4] = "Siswa4";   // siswa.length is 5

Metode Array

var a = ["Soran", "Paijo"];// Soran, Paijo

a.push("Brian");      // Soran, Paijo, Brian

a.unshift("Kelly");       // Kelly, Soran, Paijo, Brian

a.pop();      // Kelly, Soran, Paijo

a.shift();      // Soran, Paijo

a.sort();       // Paijo, Soran

✔

Array menyediakan banyak struktur data: list, queue, stack, …

✔

Metode: concat, join, pop, push, reverse, shift, slice, sort, splice, 

toString, unshift



push dan pop menambah/menghapus dari belakang



unshift dan shift menambah/menghapus dari depan

Memisahkan string: split dan join

var count = 10;

var s = "the quick brown fox";

var a = s.split(" "); // ["the", "quick", "brown", "fox"]

a.reverse();      // ["fox", "brown", "quick", "the"]

s = a.join("!");      // "fox!brown!quick!the"

✔

split memisahkan string ke dalam array menggunakan 

delimiter



dapat pula digunakan dengan regex

✔

join menggabungkan array ke dalam satu string, meletakkan 

delimiter

 di antara array

Daftar Bacaan

●

Stepp, M., Miller, J. 2010. 

Introduction to 

JavaScript

, presentasi 

Web Programming Step 

by Step

●

W3C. 2009. 

Document Object Model

 (DOM),