javascript & jquery - hermantolle.com · disusun dengan sintaks html. penambahan script ini...
TRANSCRIPT
Javascript & JQuery Client Side Scripting
Herman Tolle – Sistem Informasi PTIIK UB
Web Dinamis
Website yang dinamis menyediakan interaksi antara pengguna dengan halaman web
Interaktifitas tidak didapatkan pada dokumen yang murni HTML saja.
Kemampuan pemrograman dapat ditambahkan pada dokumen web untuk interaktifitas
Why JavaScript?
Web application round-trip expensive
no way to do computation on the client side
example: form validation
Web pages static
no way to allow users to interact with the page
example: popup link menus
What is needed
client-side code
Pemrograman Web
Client Side Script :
Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client.
Javascript, Jscript, VBScript
Server Side Script:
Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client.
ASP/ASP.Net, PHP, CGI, JSP, dll
Pemrosesan Script
Web Browser
(Client side processing)
HTML JavaScript
Java Applets
Web
Server
CGI SSI
Servlet PHP JSP
ASP
Databases
HTTP
Server Side Processing
Client Side Script
Script yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML.
Penambahan script ini mempunyai tujuan tertentu. Misalnya:
menampilkan jam dan tanggal yang up- to-date,
menu yang dinamis (mis: pull down menu),
kontrol terhadap sebuah window, animasi sederhana, animasi mouse maupun untuk validasi form, dll
Client Side Script
Advantage:
Waktu proses relatif cepat karena langsung dieksekusi oleh browser client
Tidak memerlukan web server untuk hosting
Dapat dieksekusi langsung oleh berbagai browser
Disadvantage:
Script bisa dilihat oleh pengguna
Script dapat di copy-paste
Tidak cocok untuk akses data atau database
Server Side Script
Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll
PHP: open source dan banyak digunakan luas Active Server Pages (ASP) dan ASP.Net,
teknologi yang dikembangkan oleh Microsoft ColdFusion (CFM), dikembangkan oleh
Macromedia Java Server Pages dan Servlet dikembangkan
oleh Sun Microsystem Common Gateway Interface (CGI), yang
dibuat dengan bahasa pemrograman C++ atau Perl
Server Side Include (SSI), seperti misalnya Frontpage Server Extension
Server Side Script
Advantage:
Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-paste
Cocok untuk akses data atau aplikasi database
Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll
Disdvantage:
Waktu proses relatif lebih lambat karena dieksekusi oleh server
Memerlukan web server untuk hosting
JavaScript
Dikembangkan oleh Netscape tahun 1995 JavaScript is
a scripting language
for web clients
interpreted
Un-typed: tidak memiliki tipe data spesifik
Dynamic HTML
combination of JavaScript, CSS and DOM
to create very flexible web page presentation
11
Pengenalan JavaScript
• Asal mula nama JavaScript adalah LiveScript, dikembangkan pertama kali pada tahun 1995 di Netscape Communications.
• Hasil kolaborasi antara Netscape dan Sun (pengembang
bahasa pemrograman “Java” ) memberikan nama baru “JavaScript” pada tanggal 4 desember 1995.
• JavaScript adalah bahasa skrip yang ditempelkan pada
kode HTML dan diproses pada sisi klien, sehingga kemampuan dokumen HTML menjadi lebih luas. – JavaScript memungkinkan untuk memvalidasi masukan-masukan
pada formulir sebelum dikirim ke server
– JavaScript dapat mengimplementasi interaktiftifitas
• Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript yang terselip di dalam dokumen HTML.
12
Perbedaan JavaScript dan Pemrograman Java
• JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil.
• Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma (;).
JavaScript code can be embedded in a Web page using SCRIPT tags <SCRIPT> </SCRIPT>
the output of JavaScript code is displayed as if directly entered in HTML
<html>
<head>
<title>JavaScript Page</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello world!");
document.write("<p>How are <br />" +
"<i>you</i>?</p>");
</script>
<p>Here is some static text as well. </p>
</body>
</html>
14
Bentuk skrip dan Komentar
• Skrip dari JavaScript terletak di dalam dokumen HTML.
<SCRIPT language="Javascript">
letakkan script anda disini
</SCRIPT>
• Pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip, tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program.
<SCRIPT language="Javascript">
<!--
letakkan script anda disini
// -->
</SCRIPT>
• Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash.
// semua karakter di belakang // tidak akan di eksekusi
• Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */
/* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */
15
Meletakkan Script dalam HTML
• Menggunakan tag <SCRIPT> – Tag <SCRIPT> diletakkan diantara bagian kepala dari dokumen HTML, yaitu bagian antara
tag <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>.
– Contoh :
<HTML> <HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
alert("Hallo !");
// -->
</SCRIPT>
</BODY>
</HTML>
16
Meletakkan Script dalam HTML
• Menggunakan file ekstern – Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks
yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).
<SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>
dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript,
jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.
• Melalui event tertentu – Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya
seperti klik tombol mouse.
<tag eventHandler="kode Javascript yang akan dimasukkan">
dimana eventHandler adalah nama dari event tersebut.
17
Properti
• Properti adalah atribut dari sebuah objek.
• Penulisannya (dipisahkan dengan tanda “.”) :
nama_objek . nama_properti
• Properti dapat diberi nilai, penulisannya :
objek . properti = nilai
• Contoh : <HTML>
<HEAD>
<TITLE>Properti defaultStatus</TITLE>
</HEAD>
<BODY>
<H1>Tes defaultStatus</H1>
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.defaultStatus = "Selamat belajar JavaScript“ ; //-->
</SCRIPT>
</BODY>
</HTML>
Nama Objek
Nama Properti Nilai
18
Metode
• Properti adalah suatu kumpulan kode yang digunakan untuk
melakukan sesuatu tindakan terhadap objek.
• Penulisannya (dipisahkan dengan tanda “.”) :
nama_objek . nama_metode(“parameter”) – Contoh :
<HTML> <HEAD>
<TITLE>Skrip Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
document.write(“Selamat Mencoba JavaScript <BR>”):
document.write(“Semoga Sukses” !”);
// -->
</SCRIPT>
</BODY>
</HTML>
Nama Objek
Nama Metode
Parameter
19
Penanganan Kejadian (Event Handler) • Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan manakala
pemakai melakukan suatu tindakan/kejadian, misalnya mengklik tombol mouse
atau ketika menutup jendela browser. • Penulisannya :nama_kejadian = “kumpulan kode” • Kumpulan kode dapat berisi sejumlah pernyataan. Antar pernyataan dipisahkan
titik-koma.
• Contoh : <HTML>
<HEAD>
<TITLE>Kejadian</TITLE>
</HEAD>
<BODY>
<H1>Tes Kejadian</H1>
<P>Cobalah meletakkan penunjuk mouse ke link berikut
dan perhatikan isi baris status.
Kemudian pindahkan penunjuk mouse dari
link berikut dan perhatikan isi baris status
</P>
<A HREF = "www.fujitsu.com"
onMouseOver = "window.status =
'Anda menyorot link, lho';
return true"
onMouseOut = "window.status = '';
return true">Fujitsu</A>
</BODY>
</HTML>
20
Pemasukan Data
• JavaScript memiliki mekanisme yang memungkinkan pemakai disuguhi jendela
untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK,
maka kode dalam JavaScript akan melakukan serangkaian proses.
• Contoh :
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama Anda?");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
21
Jendela Peringatan dan Jendela Konfirmasi • Jendela Peringatan
• Jendela Konfirmasi
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE =
"JavaScript">
<!--
window.alert("Ini merupakan
pesan untuk Anda");
//-->
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Konfirmasi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var jawaban = window.confirm(
"Anda ingin meneruskan?");
document.write("Jawaban Anda: " +
jawaban);
//-->
</SCRIPT>
</BODY>
</HTML>
22
Variabel
• Variable adalah suatu obyek yang berisi data data, yang
mana dapat di modifikasi selama pengeksekusian program.
• Aturan pemberian nama variabel :
– Nama variabel harus dimulai oleh satu huruf (huruf besar maupun
huruf kecil) atau satu karakter ''_''.
– Nama variabel bisa terdiri dari huruf huruf, angka angka atau
karakter _ dan & (spasi kosong tidak diperbolehkan).
– Nama variabel tidak boleh memakai nama yang digunakan dalam
reserved program, seperti : abstract, boolean, break, byte, if,
implements, import, in, infinity, instanceof, int, interface, dll
23
Mendeklarasikan Variabel
• eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan
nama variabel dan nilai dari variabel : var test = “halo”
• implisit : dengan menuliskan secara langsung nama dari variabel dan
diikuti nilai dari variabel : test = “halo”
<SCRIPT language="Javascript">
<!–
var VariabelKu;
var VariabelKu2 = 3;
VariabelKu = 2;
document.write(VariabelKu*VariabelKu2);
// -->
</SCRIPT>
24
<HTML>
<HEAD>
<TITLE>Operasi Matematika</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("20 + 3 = " + (20 + 3) );
document.write("<BR>");
document.write("20 + 3 = " + (20 - 3) );
document.write("<BR>");
document.write("20 * 3 = " + (20 * 3) );
document.write("<BR>");
document.write("20 / 3 = " + (20 / 3) );
document.write("<BR>");
document.write("20 % 3 = " + (20 % 3) );
document.write("<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
Operator Matematika
25
Operator Pembanding dan Logika
Operator Keterangan Kategori
== Kesamaan Pembanding
!= Ketidaksamaan Pembanding
< Kurang dari Pembanding
<= Kurang dari atau sama dengan Pembanding
> Lebih dari Pembanding
>= Lebih dari atau sama dengan Pembanding
! Bukan Logika
&& Dan Logika
|| Atau Logika
? Kondisi ? Nilai Benar : Nilai Salah Pembanding
26
<HTML>
<HEAD>
<TITLE>Operator ?</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = (nilai >= 60) ? "Lulus" : "Tidak Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
Operator Pembanding dan Logika
27
Pernyataan IF • Pernyataan IF tanpa else
if (kondisi) {
// blok pernyataan yang dijalankan
// kalau kondisi bernilai benar
}
<HTML>
<HEAD>
<TITLE>Contoh if</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "Tidak Lulus";
if (nilai >= 60)
hasil = "Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
• Pernyataan IF dengan ELSE
if (kondisi) {
// blok pernyataan yang dijalankan
// kalau kondisi bernilai benar
} else {
// blok pernyataan yang dijalankan // kalau kondisi bernilai salah
}
<HTML>
<HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nilai = prompt("Nilai (0-100): ", 0);
var hasil = "";
if (nilai >= 60)
hasil = "Lulus";
else
hasil = "Tidak Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
28
Pernyataan IF Bersarang
<HTML>
<HEAD>
<TITLE>Contoh if Berkalang</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var tanggal = new Date();
var kode_hari = tanggal.getDay();
var nama_hari = "";
if (kode_hari == 0)
nama_hari = "Minggu";
else
if (kode_hari == 1)
nama_hari = "Senin";
else
if (kode_hari == 2)
nama_hari = "Selasa";
else
if (kode_hari == 3)
nama_hari = "Rabu";
else
if (kode_hari == 4)
nama_hari = "Kamis";
else
if (kode_hari == 5)
nama_hari = "Jumat";
else
nama_hari = "Sabtu";
document.write("Hari ini hari " + nama_hari);
document.write(", tanggal " + tanggal.getDate() +
"/" + (tanggal.getMonth() + 1) +
"/" + tanggal.getYear());
//-->
</SCRIPT>
</BODY>
</HTML>
29
Pernyataan Switch
• Bentuknya :
switch (variabel) {
case nilai1 :
perintah1;
break;
case nilai2 :
perintah2;
break;
default
perintahN;
break;
}
30
Pernyataan Switch <HTML>
<HEAD>
<TITLE>Contoh switch</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var tanggal = new Date();
var kode_hari = tanggal.getDay();
var nama_hari = "";
switch(kode_hari) {
case 0:
nama_hari = "Minggu";
break;
case 1:
nama_hari = "Senin";
break;
case 2:
nama_hari = "Selasa";
break;
case 3:
nama_hari = "Rabu";
break;
case 4:
nama_hari = "Kamis";
break;
case 5:
nama_hari = "Jumat";
break;
case 6:
nama_hari = "Sabtu";
}
document.write("Hari ini hari " +
nama_hari);
document.write(", tanggal " +
tanggal.getDate() +
"/" + (tanggal.getMonth()
+ 1) +
"/" + tanggal.getYear());
//-->
</SCRIPT>
</BODY>
</HTML>
31
Proses Berulang : Pernyataan While
• Bentuk pernyataan :
while (kondisi) {
pernyataan
}
• Contoh : <HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var bilangan = 0;
while (bilangan < 5) {
document.write("JavaScript<BR>");
bilangan++;
}
//-->
</SCRIPT>
</BODY>
</HTML>
32
Proses Berulang : Pernyataan Do….While
• Bentuk pernyataan :
do {
blok pernyataan
} while (kondisi) ;
• Contoh : <HTML>
<HEAD>
<TITLE>Contoh do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var bilangan = 1;
do {
document.write(bilangan + "<BR>");
bilangan++;
} while (bilangan < 6);
//-->
</SCRIPT>
</BODY>
</HTML>
33
Perulangan : Pernyataan For….
• Bentuk pernyataan :
for (inisialisasi; kondisi; penaikan_penurunan) {
pernyataan_pernyataan
}
• Contoh : <HTML>
<HEAD>
<TITLE>Contoh for</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var bilangan = 0;
for (bilangan = 1; bilangan <= 5; bilangan++)
document.write(bilangan + "<BR>");
//-->
</SCRIPT>
</BODY>
</HTML>
34
Proses Pengulangan dalam Pengulangan <HTML>
<HEAD>
<TITLE>Contoh for Berkalang</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var baris, i = 0;
var nilai_prompt = prompt("Tinggi: ", 5);
var tinggi = parseInt(nilai_prompt);
for (baris = 1; baris <= tinggi ; baris++) {
// Buat sejumlah spasi
for (i = 1; i <= tinggi - baris; i++) {
document.write(" "); // Karakter spasi
}
// Tampilkan *
for (i = 1; i < 2 * baris; i++) {
document.write("*");
}
// Pindah baris
document.write("\n");
}
//-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
35
Fungsi • Mendefinisikan Fungsi
function nama(daftar_parameter) {
Pernyataan_1;
pernyataan_n;
}
c = jumlah ( 2 , 3 );
Nama fungsi
argumen Nilai balik
HTML>
<HEAD>
<TITLE>Contoh Fungsi</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function jumlah(x, y) {
var hasil = x + y;
return(hasil);
}
var z = jumlah(2, 3);
document.write(z);
document.write("<BR>");
document.write(jumlah(4, 5));
//-->
</SCRIPT>
</BODY>
</HTML>
36
Fungsi yang Dibuat Sendiri • Memvalidasi Masukan pada Formulir
<HTML>
<HEAD>
<TITLE>Validasi Masukan</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekNama(form) {
if (form.elements[0].value == "") {
alert("Nama harus dimasukkan");
form.nama.focus();
form.nama.select();
return(false);
}
alert("Terima kasih, " +
form.elements[0].value);
return(true);
}
//-->
</SCRIPT>
<FORM NAME = "formku">
<PRE>
Nama : <INPUT TYPE = "TEXT"
NAME = "nama"><BR>
<INPUT TYPE = "BUTTON"
VALUE = "Kirim"
onClick =
"cekNama(this.form)"><BR>
</PRE>
</FORM>
</BODY>
</HTML>
37
Fungsi yang Dibuat Sendiri
• Menampilkan Jam
<HTML>
<HEAD>
<TITLE>Jam</TITLE>
</HEAD>
<BODY>
<FORM NAME = "formWaktu">
Waktu Sekarang :
<INPUT TYPE = "TEXT"
NAME = "teksWaktu"
VALUE = ""
SIZE = "22">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function aturWaktu() {
var sekarang = new Date();
var waktuSekarang = sekarang.toLocaleString();
document.formWaktu.teksWaktu.value =
waktuSekarang;
setTimeout('aturWaktu()', 1000);
return(true);
}
// Menjalankan fungsi aturWaktu
aturWaktu();
//-->
</SCRIPT>
</BODY>
</HTML>
38
OBJEK • Objek dari Navigator (Browser)
– JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek, dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifat/kondisi (properti) mereka.
– Dimulai dari obyek yang paling besar diantara semuanya, kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan.
• Obyek paling besar adalah obyek jendela (window) dari navigator.
• Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah halaman, kita sebut obyek dokumen atau document
• Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya..
– Untuk mengakses satu obyek, kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window )
• Contoh :
<script language="Javascript">
<!-- function ModifField()
{
if (document.forms["form1"].check_box.checked) {document.forms["form1"].text_field.value="checkbox dipilih"}
else
{document.forms["form1"].text_field.value="checkbox tidak dipilih"}
} // --> </script>
JavaScript Object Reference
• JavaScript has a wide variety of objects you can use
when programming, and each of them have different
properties you can control or display through the use of
methods. This list should make your programming jobs
in JavaScript a little easier.
• Client-side JavaScript objects
• Anchor, Applet, Array, Boolean, Button, Checkbox, Date, document,
event, FileUpload, form, Frame, Function, Hidden, History, Image,
Java, JavaArray, JavaClass, JavaObject, JavaPackage, Layer Link,
Location, Math, MimeType, Navigator, netscape, Number, Object,
Option, Packages, Password, Plugin, Radio, RegExp, Reset,
screen, Select, String, Style, Submit, Sun, Text, Textarea, window.
40
Objek Standard JavaScript
41
Objek Array • Obyek array adalah satu obyek yang memungkinkan kita untuk membuat
dan memanipulasi tabel, berikut ini adalah sintaks untuk membuat tabel :
var x = new Array(elemen1[, elemen2, ...]); jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi
tabel kosong pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi tabel
akan di inisialisasi oleh nilai dari elemen tersebut.
• Metode standard Objek Array :
42
Objek Array • Contoh :
<HTML>
<HEAD>
<TITLE>Properti prototype</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function tampilkanElemenArray() {
for (var i = 0; i < this.length; i++) {
document.write("[" + i + "] = " +
this[i] + "<BR>");
}
}
Array.prototype.cetak = tampilkanElemenArray;
var musik = new Array("Jazz", "Rock",
"keroncong", "Dangdut");
var tanaman = new Array("Aglaonema", "Begonia",
"Bromelia");
document.write("Isi array musik: <BR>");
musik.cetak();
document.write("Isi array tanaman: <BR>");
tanaman.cetak();
//-->
</SCRIPT>
</BODY>
</HTML>
43
Objek Date (Waktu) • Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang
berhubungan dengan penanggalan dan juga durasi waktu.
• Sintaks sintaks untuk membuat obyek date adalah berikut ini :
• Nama_dari_obyek = new Date()
sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini.
• Nama_dari_obyek = new Date(“hari, bulan tanggal tahun jam:menit:detik”)
parameter berbentuk string dengan batas batas pemisah sepeti format diatas.
• Nama_dari_obyek = new Date(tahun, bulan, hari)
parameter adalah 3 integer yang dipisahkan oleh tanda koma
• Objek Waktu Standard
getMonth(), getSecond(),
getTime(),toLocalString()
,setDate(X),setDay(X),
setHours(X),setMonth(X)
, setTime(X) , dll……
Contoh : lihat
Pembahasan SWITCH
44
Objek Password
<HTML>
<HEAD>
<TITLE>Mengakses Objek password</TITLE>
</HEAD>
<BODY>
<FORM NAME = "formTes"
ACTION = "tesform.htm"
METHOD = "POST">
<PRE>
Password Pengganti : <INPUT TYPE = "PASSWORD"
NAME = "password_1">
Password Sekali Lagi: <INPUT TYPE = "PASSWORD"
NAME = "password_2">
</PRE>
<INPUT TYPE = "BUTTON"
NAME = "tombolProses"
VALUE = "Proses"
onClick = "cekPassword()">
</FORM>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function cekPassword() {
if (document.formTes.password_1.value !=
document.formTes.password_2.value)
alert("Dua password yang Anda masukkan
tidak sama");
else
window.location.href = "tesform.htm";
}
//-->
</SCRIPT>
</BODY>
</HTML>
Kapabilitas Javascript
• Implementasi pemrograman dalam
dokumen HTML
• Fungsi-fungsi sisi client: validasi form (cek
input), menampilkan Jam,
• Interaktifitas: Menu interaktif, pop up
window
• Animasi: animasi mouse, background
• Kontrol setiap elemen dokumen HTML
45
Document Object Model
Describes how the document object from JavaScript can be traversed and modified
Represented as tree structure
Can add new elements to the page
Can change attributes of existing elements
DOM has levels 0-3 and many sub-standards
The DOM interface used in other contexts with other languages (C++, Java, python, etc.)
The document as a tree
<html>
<head>
<title>A Document</title>
</head>
<body>
<h1>A web page</h1>
<p>A <i>simple</i> paragraph</p>
</body>
</html>
document
<html>
<head> <body>
<title>
“A document”
<h1>
<p>
“A web page”
“A ”
“simple”
“ paragraph” <i>
Client-side JavaScript objects
Tips Client Side Script:
Gunakan untuk proses-proses sisi client
Script Javascript mudah untuk “dibajak”
Pelajari bagaimana cara “menambahkan” ke website kita
Source:
http://www.dynamicdrive.com
http://www.javascriptsource.com
Referensi
JavaScript Guide from Netscape (Complete Reference):
http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm
Quick Reference from Shelly Cahsman:
http://www.scsite.com/js/qr.htm
JavaScript Object Reference:
http://www.htmlstuff.com/programmer/jsobjects/index.html
Task
Tambahkan pada website Anda:
Show the time and date to a Web page.
Add a greeting to a Web page based on the time of day.
Using mouse event handlers create rollover effect.
JQUERY
Javascript Framework
JQuery
Powerful JavaScript library
Access parts of a page using CSS or XPath-like expressions
Modify the appearance of a page
Alter the content of a page
Change the user’s interaction with a page
Rich library of methods for AJAX development (AJAX = Asynchronous JavaScript and XML)
With jQuery and AJAX, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.
$(“#firstName”).text(“Joe Black”);
$(“button”).click(function() {alert “Clicked”;});
$(“.content”).hide();
$(“#main”).load(“content.htm”);
$(“<div/>”).html(“Loading…”).appendTo(“#content”);
A Quality of Life by jQuery:
Very compact and fluent programming model
jQuery is a lightweight, open-source
JavaScript library that simplifies
interaction between HTML and
JavaScript
It was and still being
developed
by John Resig from
Mozilla and was first
announced in January
2006
It has a great community, great
documentation, tons of plugins,
and it was recently adopted by
Microsoft
(how about intellisense in VS?)
The current version is 1.3.2
(as of July 2009)
To enable itellisense in VS 2008 SP1
install the –vsdoc hotfix:
VS90SP1-KB958502-x86.exe
Copy the
jquery.js
and the
jquery-vsdoc.js
into your application
folder
No need to reference the –vsdoc.js
<script src=“jquery.js”/>
Reference it in your markup
… or just drag it into the file
///<reference path=“jquery.js”/>
Reference it in your JS files:
<script src=“http://ajax.googleapis.com/
ajax/libs/jquery/1.2.6/
jquery.min.js”>
</script>
You can also reference it from Google
jQuery Core Concepts
Create HTML elements on the fly
var el = $(“<div/>”)
The Magic $() function
Manipulate existing DOM elements
$(window).width()
The Magic $() function
Selects document elements
(more in a moment…)
$(“div”).hide();
$(“div”, $(“p”)).hide();
The Magic $() function
$(document).ready(function(){…});
Fired when the document is ready for
programming.
Better use the full syntax:
$(function(){…});
The Magic $() function
It may be used in case of conflict with other
frameworks.
jQuery(“div”);
The full name of $() function is
jQuery uses closures for isolation
(function(){
var
jQuery=window.jQuery=window.$=function(){
// …
};
})();
The library is designed to be isolated
var foo = jQuery.noConflict();
// now foo() is the jQuery main function
foo(“div”).hide();
Avoid $() conflict with other
frameworks
// remove the conflicting $ and jQuery
var foo = jQuery.noConflict(true);
$(“div”).hide()
$(“<span/>”).appendTo(“body”)
$(“:button”).click()
jQuery’s programming philosophy is:
GET >> ACT
$(“div”).show()
.addClass(“main”)
.html(“Hello jQuery”);
Almost every function returns jQuery,
which provides a fluent programming
interface and chainability:
Get > Act
Chainability
The $() function
Three Major Concepts of jQuery
jQuery Selectors
$(“*”) // find everything
All Selector
Selectors return a pseudo-array of jQuery
elements
$(“div”)
// <div>Hello jQuery</div>
Basic Selectors
Yes, jQuery implements CSS Selectors!
$(“#usr”)
// <span id=“usr”>John</span>
$(“.menu”)
// <ul class=“menu”>Home</ul>
By Tag:
By ID:
By Class:
$(“div.main”) // tag and class
$(“table#data”) // tag and id
More Precise Selectors
// find by id + by class
$(“#content, .menu”)
// multiple combination
$(“h1, h2, h3, div.content”)
Combination of Selectors
$(“table td”) // descendants
$(“tr > td”) // children
$(“label + input”) // next
$(“#content ~ div”) // siblings
Hierarchy Selectors
$(“tr:first”) // first element
$(“tr:last”) // last element
$(“tr:lt(2)”) // index less than
$(“tr:gt(2)”) // index gr. than
$(“tr:eq(2)”) // index equals
Selection Index Filters
$(“div:visible”) // if visible
$(“div:hidden”) // if not
Visibility Filters
$(“div[id]”) // has attribute
$(“div[dir=‘rtl’]”) // equals to
$(“div[id^=‘main’]”) // starts with
$(“div[id$=‘name’]”) // ends with
$(“a[href*=‘msdn’]”) // contains
Attribute Filters
$(“input:checkbox”) // checkboxes
$(“input:radio”) // radio buttons
$(“:button”) // buttons
$(“:text”) // text inputs
Forms Selectors
$(“input:checked”) // checked
$(“input:selected”) // selected
$(“input:enabled”) // enabled
$(“input:disabled”) // disabled
Forms Filters
$(“select[name=‘ddl’] option:selected”).val()
Find Dropdown Selected Item
<select name=“cities”>
<option value=“1”>Tel-Aviv</option>
<option value=“2” selected=“selected”>Yavne</option>
<option value=“3”>Raanana</option>
</select>
SELECTORS DEMO
Document Traversal
$(“div”).length
Returns number of selected elements.
It is the best way to check selector.
A Selector returns a pseudo array of
jQuery objects
$(“div”).get(2) or $(“div”)[2]
Returns a 2nd DOM element of the
selection
Getting a specific DOM element
$(“div”).eq(2)
Returns a 2nd jQuery element of the
selection
Getting a specific jQuery element
var sum = 0;
$(“div.number”).each(
function(){
sum += (+this.innerHTML);
});
this – is a current DOM element
each(fn) traverses every selected
element calling fn()
$(“table tr”).each(
function(i){
if (i % 2)
$(this).addClass(“odd”);
});
$(this) – convert DOM to jQuery
i - index of the current element
each(fn) also passes an indexer
.next(expr) // next sibling
.prev(expr) // previous sibling
.siblings(expr) // siblings
.children(expr) // children
.parent(expr) // parent
Traversing HTML
$(“table td”).each(function() {
if ($(this).is(“:first-child”)) {
$(this).addClass(“firstCol”);
}
});
Check for expression
// select paragraph and then find
// elements with class ‘header’ inside
$(“p”).find(“.header”).show();
// equivalent to:
$(“.header”, $(“p”)).show();
Find in selected
$(“<li><span></span></li>”) // li
.find(“span”) // span
.html(“About Us”) // span
.andSelf() // span, li
.addClass(“menu”) // span,li
.end() // span
.end() // li
.appendTo(“ul.main-menu”);
Advanced Chaining
$(“div”)
.slice(2, 5)
.not(“.green”)
.addClass(“middle”);
Get Part of Selected Result
HTML Manipulation
$(“p”).html(“<div>Hello $!</div>”);
// escape the content of div.b
$(“div.a”).text($(“div.b”).html());
Getting and Setting Inner Content
// get the value of the checked checkbox
$(“input:checkbox:checked”).val();
Getting and Setting Values
// set the value of the textbox
$(“:text[name=‘txt’]”).val(“Hello”);
// select or check lists or checkboxes
$(“#lst”).val([“NY”,”IL”,”NS”]);
Handling CSS Classes
// add and remove class
$(“p”).removeClass(“blue”).addClass(“red”);
// add if absent, remove otherwise
$(“div”).toggleClass(“main”);
// test for class existance
if ($(“div”).hasClass(“main”)) { //… }
// select > append to the end
$(“h1”).append(“<li>Hello $!</li>”);
// select > append to the beginning
$(“ul”).prepend(“<li>Hello $!</li>”);
Inserting new Elements
// create > append/prepend to selector
$(“<li/>”).html(“9”).appendTo(“ul”);
$(“<li/>”).html(“1”).prependTo(“ul”);
// select > replace
$(“h1”).replaceWith(“<div>Hello</div>”);
Replacing Elements
// create > replace selection
$(“<div>Hello</div>”).replaceAll(“h1”);
$(“h3”).each(function(){
$(this).replaceWith(“<div>”
+
$(this).html()
+ ”</div>”);
});
Replacing Elements while keeping
the content
// remove all children
$(“#mainContent”).empty();
Deleting Elements
// remove selection
$(“span.names”).remove();
// change position
$(“p”).remove(“:not(.red)”)
.appendTo(“#main”);
$(“a”).attr(“href”,”home.htm”);
// <a href=“home.htm”>…</a>
Handling attributes
// set the same as the first one
$(“button:gt(0)”).attr(“disabled”,
$(“button:eq(0)”).attr(“disabled));
// remove attribute - enable
$(“button”).removeAttr(“disabled”)
$(“img”).attr({
“src” : “/images/smile.jpg”,
“alt” : “Smile”,
“width” : 10,
“height” : 10
});
Setting multiple attributes
// get style
$(“div”).css(“background-color”);
CSS Manipulations
// set style
$(“div”).css(“float”, “left”);
// set multiple style properties
$(“div”).css({“color”:”blue”,
“padding”: “1em”
“margin-right”: “0”,
marginLeft: “10px”});
// get window height
var winHeight = $(window).height();
// set element height
$(“#main”).height(winHeight);
//.width() – element
//.innerWidth() – .width() + padding
//.outerWidth() – .innerWidth() + border
//.outerWidth(true) – including margin
Dimensions
The default unit is Pixel (px)
// from the document
$(“div”).offset().top;
// from the parent element
$(“div”).position().left;
// scrolling position
$(window).scrollTop();
Positioning
Events
$(document).ready(function(){
//…
});
When the DOM is ready…
Fires when the document is ready for
programming.
Uses advanced listeners for detecting.
window.onload() is a fallback.
// execute always
$(“div”).bind(“click”, fn);
// execute only once
$(“div”).one(“click”, fn);
Attach Event
Possible event values:
blur, focus, load, resize, scroll, unload, beforeunload, click,
dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, mouseenter, mouseleave, change, select, submit,
keydown, keypress, keyup, error
(or any custom event)
jQuery.Event object
$(“div”).unbind(“click”, fn);
Detaching Events
(Unique ID added to every attached function)
$(“div”).trigger(“click”);
Events Triggering
Triggers browser’s event action as well.
Can trigger custom events.
Triggered events bubble up.
// attach / trigger
elem.blur(fn) / elem.blur()
elem.focus(fn) / elem.focus()
elem.click(fn) / elem.click()
elem.change(fn) / elem.change()
Events Helpers
And many others…
// use different triggering function
$(“div”).triggerHandler(“click”);
Preventing Browser Default Action
// prevent default action in handler
function clickHandler(e) {
e.preventDefault();
}
// or just return false
function clickHandler(e) {return false;}
// stop bubbling, keep other handler
function clickHandler(e) {
e.stopPropagation();
}
Preventing Bubbling
// stop bubbling and other handlers
function clickHandler(e) {
e.stopImmediatePropagation();
}
// or just return false
function clickHandler(e) {return false;}
// attach live event
(“div”).live(“click”, fn);
// detach live event
(“div”).die(“click”, fn);
Live Events
Currently supported events: click, dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, keydown, keypress, keyup
EVENTS DEMO
Effects
// just show
$(“div”).show();
// reveal slowly, slow=600ms
$(“div”).show(“slow”);
// hide fast, fast=200ms
$(“div”).hide(“fast”);
// hide or show in 100ms
$(“div”).toggle(100);
Showing or Hiding Element
$(“div”).slideUp();
$(“div”).slideDown(“fast”);
$(“div”).slideToggle(1000);
Sliding Elements
$(“div”).fadeIn(“fast”);
$(“div”).fadeOut(“normal”);
// fade to a custom opacity
$(“div”).fadeTo (“fast”, 0.5);
Fading Elements
Fading === changing opacity
$(“div”).hide(“slow”, function() {
alert(“The DIV is hidden”);
});
$(“div”).show(“fast”, function() {
$(this).html(“Hello jQuery”);
}); // this is a current DOM element
Detecting animation completion
Every effect function has a (speed, callback)
overload
// .animate(options, duration)
$(“div”).animate({
width: “90%”,
opacity: 0.5,
borderWidth: “5px”
}, 1000);
Custom Animation
$(“div”).animate({width: “90%”},100)
.animate({opacity: 0.5},200)
.animate({borderWidth: “5px”});
Chaining Animation
By default animations are queued and than
performed one by one
$(“div”)
.animate({width: “90%”},
{queue:false, duration:1000})
.animate({opacity : 0.5});
Controlling Animations Sync
The first animation will be performed
immediately without queuing
Referensi
Jquery.com
W3CShools.com