desain web – pertemuan 12
DESCRIPTION
Desain web – pertemuan 12. Javascript (Part 1). Pengenalan Javascript. JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. - PowerPoint PPT PresentationTRANSCRIPT
Desain web – pertemuan 12
Javascript (Part 1)
JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera.
Kode JavaScript dapat disisipkan dalam halaman web
JavaScript pertama kali dikembangkan oleh Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript
Pengenalan Javascript
Animasi sederhana Validasi form inputan Menampilkan pop up window Menampilkan dialog konfirmasi Menampilkan alert Menangani event handler pada objek HTML AJAX Membuat halaman web yang interaktif
Kegunaan Javascript
Hirarki JavaScript
Penulisan kode javascript bersifat case sensitive
Setiap 1 perintah sebaiknya ditutup dengan titik koma (;)
Bisa dipisah dengan file HTML ataupun digabung
Penulisan Kode Javascript
Memasukkan JavaScript ke dalam HTML (1)
1. Di antara tag <head> … </head>
Jika script diletakkan di antara <head>, maka script hanya akan dijalankan ketika dipanggil oleh sebuah event.
<html><head><script language=“javascript”> … </script></head><body>
Memasukkan JavaScript ke dalam HTML (2) 1. Di antara tag <body> … </body>
script yang diletakkan di antar tag body akan dijalankan ketika halaman itu dibuka.<html> <head> </head> <body> <script type="text/javascript"> … </script> </body>
Memasukkan JavaScript ke dalam HTML (3)
3. External Script
Jika, kita sudah membuat javascript pada halaman yang berbeda, maka untuk menyertakan file tersebut gunakan script berikut.<script language=“javascript” src=“file.js”> </script>
Pada external script (dalam hal ini file.js) tidak perlu lagi ditambahkan <script language=javascript>…</script>
Contoh (js1.html)
Contoh Lanjutan (script.js)
Variabel Variabel harus dimulai dengan karakter atau
garis bawah Penamaan variabel bersifat sensitive case
(“berat” tidak sama dengan “Berat”) Dapat langsung diisi dengan nilai ketika
pertama kali dideklarasikan
Komentar
Untuk menambahkan komentar dalam javascript, kita dapat menggunakan // , jika komentar hanya terdiri dari satu baris /* … */ , jika komentar lebih dari satu baris
Operator Aritmatik
Operator Deskripsi Contoh Hasil
+ Penambahan x=2; x+2 4
- Pengurangan x=2; 5-x 3
* Perkalian x=4; x*5 20
/ Pembagian 15/55/2
32.5
% Hasil pembagian 5%210%810%2
120
++ Increment x=5x++
x=6
-- Decrement x=5x--
x=4
Assignment Operators
Operator Contoh Sama seperti
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Operator Perbandingan
Operator Keterangan Contoh
== Sama dengan 5==8 returns false
!= Tidak sama dengan 5!=8 returns true
> Lebih besar dari 5>8 returns false
< Lebih kecil dari 5<8 returns true
>= Lebih besar atau sama dengan 5>=8 returns false
<= Lebih kecil atau sama dengan 5<=8 returns true
Operator Logika
Operator Deskripsi Contoh
&& Dan x=6y=3
(x < 10 && y > 1) returns true
|| Atau x=6y=3
(x==5 || y==5) returns false
! tidak x=6y=3
!(x==y) returns true
Contoh (js2.html)
Event Pada JavaScript (1)
Event Keterangan
Abort Dibangkitkan bila user menghentikan pemuatan image (tag <IMG>); yaitu bila user menekan tombol Stop atau mengklik link.
Blur Dibangkitkan bila informasi masukan pada sebuah elemen form kehilangan fokus masukan; yaitu bila user menekan tombol <Tab> atau mengklik elemen form lainnya.
Change Dibangkitkan bila informasi masukan pada sebuah elemen form (seperti text, textarea, choice) diubah oleh user.
Click dibangkitkan bila user mengklik sebuah elemen form atau link.
Error dibangkitkan bila terjadi kesalahan saat browser memuat dokumen atau image.
Focus dibangkitkan bila sebuah elemen form menerima fokus masukan; yaitu bila user mengklik elemen form ini atau menekan tombol <Tab> sehingga fokus masukan berpindah ke elemen ini.
Load dibangkitkan bila browser selesai memuat dokumen.
MouseOut dibangkitkan bila cursor mouse keluar dari daerah link atau image map.
MouseOver dibangkitkan bila kursor mouse berada di atas sebuah link.
Reset dibangkitkan bila user menekan tombol Reset.
Select dibangkitkan bila user memilih sebagian atau seluruh teks pada elemen form yang berupa kotak teks.
Submit dibangkitkan bila user menekan tombol Submit.
Unload dibangkitkan bila user keluar dari dokumen ini.
DblClick dibangkitkan bila user mengklik ganda sebuah elemen form atau link.
DragDrop dibangkitkan bila user menjatuhkan (men-drop) sebuah objek ke jendela browser.
KeyDown dibangkitkan bila user menekan tombol keyboard.
KeyPress dibangkitkan bila user menekan tombol keyboard dan menahannya.
KeyUp dibangkitkan bila user melepas tombol keyboard.
MouseDown dibangkitkan bila user mengklik tombol mouse.
MouseMove dibangkitkan bila user menggerakkan cursor mouse.
MouseUp dibangkitkan bila user melepas tombol mouse.
Move dibangkitkan bila user atau skrip menggerakkan jendela atau frame.
Resize dibangkitkan bila user atau skrip mengubah ukuran jendela atau frame.
Event Pada JavaScript (2)
Document.write => digunakan untuk menampilkan tulisan di layar
Alert => digunakan untuk menampilkan message box
Confirm => digunakan untuk menampilkan konfirmasi
Window.open => digunakan untuk membuat pop up window
Window.close => digunakan untuk menutup pop up windows
Prompt => digunakan untuk menampilkan kotak inputan
Contoh Fungsi Javascript
Fungsi Window.open
Metode open membutuhkan tiga parameter. Berikut ini adalah sintaks metode open:
window.open (“Url”, “namajendela”, [“opsi1, opsi2, …”]);
Macam-macam opsi pada metode window.open
Nama Nilai Keterangan
toolbar [=yesno][=10] jika bernilai yes atau 1, browser menampilkan toolbar yang berisi tombol Back, Forward, Home, dst.
location [=yesno][=10] jika bernilai yes atau 1, browser menampilkan field masukan URL.
status [=yesno][=10] jika bernilai yes atau 1, browser menampilkan palang status di bagian bawah jendela.
menubar [=yesno][=10] jika bernilai yes atau 1, browser menampilkan palang menu di bagian atas jendela.
scrollbars [=yesno][=10] jika bernilai yes atau 1, browser menampilkan scrollbar horisontal dan vertikal.
resizeable [=yesno][=10] jika yes atau 1, ukuran jendela browser dapat diubah oleh pengguna.
width bilangan bulat menentukan lebar jendela (dalam satuan pixel).
height bilangan bulat menentukan tinggi jendela (dalam satuan pixel).
Contoh (js3.html)
Contoh (js4.html)