JavaScript dan DOM - stwn.blog. · PDF fileTeks yang akan digunakan pada tombol berada di dalam tag button ... Teknik Elektro, Unsoed Contoh: ... Elektro, Unsoed JS var name

Tahun Ajaran 2011/2012

JavaScript dan DOMPemrograman Internet (TKE 074082)

Program Studi Teknik Elektro, Unsoed

Iwan Setiawan <stwn at unsoed.ac.id>

Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

client-side scripting


client-side scripting


skrip di sisi klien


Kode yang dijalankan di peramban (klien),setelah halaman web diambil dari peladen.



Sering skrip di sisi klien ini digunakanuntuk memanipulasi halaman web

atau merespon aksi pengguna.


menghasilkan halaman web yang dinamis

Mengapa kita membutuhkanpemrograman 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 perubahanperubahan kecil dan cepat tanpa harus menunggu atau tergantung peladen

Eventdriven: 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

data, dan lainlain.

JavaScript


Bahasa pemrograman yang “ringan.”(bahasa skrip)


Digunakan untuk membuat halamanweb 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 tidaksemua peramban mendukung semua

fitur JavaScript (JS).


Tak berhubungan dengan Java, kecuali namadan 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”, casesensitive, regex builtin 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.


<script src="uifw.js" type="text/javascript"></script>


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 popup pesan.

alert("IE6 detected. Suckmode enabled.");


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(“ “)); // Setsunavar len = s.length; // 16var ss = 'Soran Ibrahim' // dapat pula menggunakan ' '

✔ Method: charAt, charCodeAt, fromCharCode, indexOf, lastIndexOf, replace, split, substring, toLowerCase, toUpperCase.

✔ Properti length bukan method.✔ Concatenation dengan “+”. Misal “22” + 2 menghasilkan “222”



Program JS tidak mempunyai main, danmerespon aksi pengguna dengan event.


Event-driven programming(menulis program yang dikendalikan oleh event pengguna)


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 eventnya yang menarik Tulis fungsi JS untuk dijalankan ketika event muncul Sertakan fungsi pada event di dalam kontrol elemen.


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.

✔ Salah satu atribut event HTML adalah onclick :)

Document ObjectModel (DOM)


Antarmuka untuk program atau skrip yang dapat memberikan akses dan pemutakhiran terhadap isi, struktur, dan gaya dokumen.

DOM merupakan konvensi. Netral terhadap platform dan bahasa.


Sebagian besar kode JS memanipulasielemen-elemen di dalam halaman HTML.


Contoh: mengetahui dan mengubah statuselemen, 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:document.getElementById


JSvar 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 mengembalikanobjek DOM untuk sebuah elemen

dengan id tertentu.


Dapat mengubah teks pada sebagian besarkontrol borang dengan mengganti

nilai propertinya.


JSfunction 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 banyakelemen dengan properti innerHTML.

Sintaks JavaScript


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✔ Banyak operator melakukan konversi secara otomatis tipe: “2” * 3


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: // komentarPHP: # 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"); // 42var n2 = parseFloat("bosan"); // NaN

✔ Mengakses huruf pada string:var firstLetter = s[0]; // tak berjalan di IEvar firstLetter = s.charAt(0); // jalan di IEvar lastLetter = s.charAt(s.length – 1);


iterasi for.


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);}

hheelllloo


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✔ null: ada nilainya, tetapi ditentukan kosong atau null✔ Mengapa JavaScript mempunyai kedua nilai ini?


Operator Logika

✔ > < >= <= && || ! == != === !==✔ Kebanyakkan operator logika secara otomatis mengkonversi tipe:

5 < "7" bernilai benar42 == 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; // falseif ("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"); // pesanconfirm("pesan"); // mengembalikan benar atau salahprompt("pesan"); // mengembalikan masukan string


Array

var name = []; // array kosongvar name = [value, ..., value]; // array terisiname[index] = value; // menyimpan elemen

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

var siswa = []; // siswa.length is 0siswa[0] = "Siswa1"; // siswa.length is 1siswa[1] = "Siswa2"; // siswa.length is 2siswa[4] = "Siswa3"; // siswa.length is 5siswa[4] = "Siswa4"; // siswa.length is 5

✔ Dua cara menginisialisasi array✔ Properti length (bertambah ketika elemen ditambahkan)


Metode Array

var a = ["Soran", "Paijo"];// Soran, Paijoa.push("Brian"); // Soran, Paijo, Briana.unshift("Kelly"); // Kelly, Soran, Paijo, Briana.pop(); // Kelly, Soran, Paijoa.shift(); // Soran, Paijoa.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 shift dan pop mengembalikan elemen yang dihapus


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), http://w3.org/DOM/

Documents

JavaScript dan DOM - stwn.blog. · PDF fileTeks yang akan digunakan pada tombol berada di dalam tag button ... Teknik Elektro, Unsoed Contoh: ... Elektro, Unsoed JS var name