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

JavaScript dan DOM Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed Iwan Setiawan <stwn at unsoed.ac.id>

Tahun Ajaran 2011/2012

client-side scripting

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

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 digunakan untuk memanipulasi halaman web atau merespon aksi pengguna.


menghasilkan halaman web yang dinamis


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 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. Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

JavaScript

Bahasa pemrograman yang “ringan.” (bahasa skrip)


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 Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

Merupakan standar web, tapi tidak semua peramban mendukung semua fitur JavaScript (JS).


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”, 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. Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

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


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(“ “)); // 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. ✔ Concatenation dengan “+”. Misal “22” + 2 menghasilkan “222”



Program JS tidak mempunyai main, dan merespon aksi pengguna dengan event.


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


Tombol:

✔ 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();"> … Click me! ✔ 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 Object Model (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 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: document.getElementById

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

HTML Click 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 nilai propertinya.


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 Click me! <span id="output2">Hello


Dapat mengubah teks di dalam banyak elemen 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: CSS/JS/PHP: /* komentar */ Java/JS/PHP: // komentar 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);


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 Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

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

✔ Dua cara menginisialisasi array ✔ Properti length (bertambah ketika elemen ditambahkan) Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

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  shift dan pop mengembalikan elemen yang dihapus Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed

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/


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

Recommend Documents