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
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
skrip di sisi klien
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Kode yang dijalankan di peramban (klien), setelah halaman web diambil dari peladen.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Sering skrip di sisi klien ini digunakan untuk memanipulasi halaman web atau merespon aksi pengguna.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
menghasilkan halaman web yang dinamis
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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)
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Digunakan untuk membuat halaman web menjadi lebih interaktif.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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).
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Tak berhubungan dengan Java, kecuali nama dan beberapa kesamaan sintaks.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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">
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Pernyataan alert ✔ Perintah JS yang akan memunculkan boks dialog popup pesan. alert("IE6 detected. Suckmode enabled.");
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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”
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Program JS tidak mempunyai main, dan merespon aksi pengguna dengan event.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Event-driven programming (menulis program yang dikendalikan oleh event pengguna)
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed