Upload
nguyenkhanh
View
227
Download
1
Embed Size (px)
Citation preview
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
Kode yang dijalankan di peramban (klien),setelah halaman web diambil dari peladen.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Sering skrip di sisi klien ini digunakanuntuk 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
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
Bahasa pemrograman yang “ringan.”(bahasa skrip)
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Digunakan untuk membuat halamanweb 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 tidaksemua peramban mendukung semua
fitur JavaScript (JS).
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Tak berhubungan dengan Java, kecuali namadan 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"></script>
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(“ “)); // 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”
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Program JS tidak mempunyai main, danmerespon 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
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.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
function myFunction() {alert("Salam!");alert("Apa kabar?");
}
Pernyataan yang diletakkan di dalam fungsi dapat disesuaikan dengan respon yang diinginkan.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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 :)
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Sebagian besar kode JS memanipulasielemen-elemen di dalam halaman HTML.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Contoh: mengetahui dan mengubah statuselemen, mengubah gaya halaman, ...
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Setiap elemen dalam sebuah halaman mempunyai objek DOM yang bersesuaian.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Pengaksesan atau modifikasi atribut objek DOM dilakukan dengan objectName.attributeName.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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!";
}
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
document.getElementById mengembalikanobjek DOM untuk sebuah elemen
dengan id tertentu.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Dapat mengubah teks pada sebagian besarkontrol borang dengan mengganti
nilai propertinya.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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" />
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Dapat mengubah teks di dalam banyakelemen dengan properti innerHTML.
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Komentar
// komentar satu baris
/* komentar lebih dari satu baris */
✔ Sama dengan komentar di Java✔ Perbedaan komentar di HTML, CSS, Java, JavaScript, PHP?
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
HTML: <! komentar >CSS/JS/PHP: /* komentar */
Java/JS/PHP: // komentarPHP: # komentar
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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);
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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?
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Pernyataan if/else
if (kondisi) {pernyataan;
} else if (kondisi) {pernyataan;
} else {pernyataan;
}
✔ Struktur identik dengan Java✔ JavaScript mengijinkan hampir semua bentuk nilai sebagai kondisi
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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);
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Iterasi while
while (kondisi) {pernyataan;
}
do {pernyataan;
} while (kondisi);
✔ Kata kunci break dan continue juga dapat digunakan
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
Kotak Popup
alert("pesan"); // pesanconfirm("pesan"); // mengembalikan benar atau salahprompt("pesan"); // mengembalikan masukan string
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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)
Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed
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
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