Post on 19-Jan-2016
description
Praktikum Java Script
Pengertian Javascript adalah bahasa yang berbentuk
kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML
Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web
Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya
Kelebihan Javascript Ukuran file kecil
Script dari javascript memiliki ukuran yang kecil sehingga ketika web yang memiliki javascript ditampilkan di browser maka akses tampilannya akan lebih cepat dibandingkan ketika browser membuka suatu web yang memiliki script java
Mudah untuk dipelajariBahasanya tidak serumit java
TerbukaJavascript tidak terikat oleh hardware maupun software tertentu bahkan system operasi
Kekurangan Javascript Script tidak terenkripsi
Karena javascript bersifat client side, maka script yang kita buat di text editor dan telah dijadikan web di server, ketika user me-request web dari server tersebut maka sintak javascript akan langsung ditampilkan di browser.
Kemampuan terbatasWalaupun javascript mampu membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java.
Keterbatasan ObjekJavascript tidak mampu membuat kelas-kelas yang bisa menampung objek-objek tambahan seperti java karena javascript telah memiliki objek yang built-in pada sturktur bahasanya.
Deklarasi Umum<script>
…….
</script>
Agar text editor dapat mengidentifikasikan bahwa sintak tersebut merupakan sintak javascript yang digunakan untuk aplikasi di web, maka perlu penambahan sintak di dalam sintak script yaitu
<SCRIPT language="Javascript">
letakkan script anda disini
</SCRIPT>
Peletaan sintak java script pada dokumen HTML Script javascript diletakkan di antara <BODY> …. </BODY>
Script javascript diletakkan di antara <HEAD> …. </HEAD>
Peletaan sintak java script pada dokumen HTMLMenggunakan file ekstern
Melalui event tertentu
Komentar<SCRIPT>
// ini adalah komentar
/* ini adalah
Komentar
Yang panjang */ </SCRIPT>
Menulis pada output html
Mengakses elemen HTML
document.write(“kalimat yang akan di tampilkan”);
//Find the element x=document.getElementById("demo") //Change the content x.innerHTML="Hello JavaScript";
Variable
Variable adalah suatu obyek yang berisi data, yang mana dapat di modifikasi selama pengeksekusian program.
kriteria berikut ini penulisan 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 sesuai dengan sintak yang ada di java script
• Nama variabel case sensitive (y dan Y adalah variabel yang berbeda)
Jenis jenis data dari variabel Numerik
Berupa bilangan atau angka yang mempunyai sifat matematis (bisa dijumlah, tambah dsb), misalnya : 17, 8, 1945
Integer : yaitu suatu bilangan bulat tanpa pecahan
Float : yaitu suatu bilangan pecahan atau berpangkat.
o Kata (kumpulan huruf) : kita sebut stringvar a = "Hallo"; var name = “Institut \”Teknologi \” Bandung ”
o Booleans adalah satu variabel khusus yang berguna untuk mengevaluasi suatu kondisi tertentu, oleh karenanya boolean mempunyai dua nilai :
True : diwakili oleh nilai 1 False : diwakili oleh nilai 0
o variabel dengan jenis null : satu kata khusus (termasuk keyword juga) untuk menjelaskan bahwa tidak ada data didalamnya.
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 = “Anissa”;Var x=true;Var y=null; document.write(VariabelKu*VariabelKu2); // --> </SCRIPT>
Array var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
Atau
var cars=new Array("Saab","Volvo","BMW");
Atau
var cars=["Saab","Volvo","BMW"];
Pengaksesan document.write("elemen ke 4 dari tabel adalah "+cars[1]);
Konversi jenis variabel Meskipun JavaScript memungkinkan pengaturan perubahan jenis
variabel secara transparan, kadang kadang kita perlu juga untuk melakukan konversi jenis variabel secara paksa. Ada 2 fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu :
• parseInt() Fungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan
parameter tertentu (bisa dalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameter kedua) menjadi bilangan bulat. Sintaksnya adalah sebagai berikut :
parseInt(string[, basis]);
----------- var a = "123"; var b = "456"; document.write(a+b,"<BR>"); // hasil 123456 document.write(parseInt(a)+parseInt(b),"<BR>"); // hasil 579
Konversi jenis variabel parseFloat() dengan parameter tertentu menjadi bilangan
desimal, Sintaks dari fungsi parseFloat adalah sebagai berikut :
---------------------------------------parseFloat(string);
Operator Binary
Operator Penugasan
Operator ini memungkinkan kita untuk menyederhanakan operasi penambahan nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri
Operator Unary
Operator ini memungkinkan kita untuk menambahkan ataupun mengurangi per unit dari satu variabel. Operator ini sangat berguna dalam struktur pemrograman sistem Loop, yang membutuhkan penghitung (variabel yang nilainya naik/turun satu persatu ) .
Operator Pembanding
Operator Logika (Booleans)
Operator jenis ini memungkinkan kita untuk memverifikasi apakah beberapa kondisi sudah benar
Operator untuk memanipulasi data string Operator + yang digunakan untuk variabel
jenis String memungkinkan kita untuk melakukan penggabungan (concantenate) dua variabel String.
var='a'+'b' adalah sama dengan var='ab'
var1='a'
var=var1+'b' -> var='ab'
Ekspresi perbandingan (kondisi) ? nilaibenar : nilaisalah
Var Hadiah = (nilai > 90) ? “mobil” : “sepeda”
Struktur Kondisional Struktur kondisional adalah instruksi instruksi
yang memungkinkan kita untuk melakukan test apakah satu kondisi adalah benar atau tidak, dan memungkinkan juga terjadinya proses interaksi di dalam skrip yang kita buat
if ((kondisi1)&&(kondisi2))
if ((kondisi1)||(kondisi2))
-----------------------------
if (kondisi syarat1 terpenuhi) {
daftar instruksi atau blok instruksi
}
else {
daftar instruksi/blok instruksi yang lain
}
Loop struktur instruksi instruksi yang dapat di eksekusi
berulang umang selama kondisi syaratnya belum terpenuhi. for (penghitung; kondisi loop berhenti; modfikasi penghitung) {
daftar instruksi instruksi atau blok instruksi }
Sebagai contoh : for (i=1; i<6; i++) {
Alert(i) } ------------------------while (kondisi syarat terpenuhi) { daftar instruksi instruksi atau blok instruksi
}
Instruksi continue Ada hal yang patut di perhatikan juga, ada kalanya kita perlu melakukan
lompatan (jump) terhadap satu atau beberapa nilai tertentu di dalam loop tanpa menghentikan loop itu sendiri. Sintaks yang digunakan disini adalah continue , dan di letakkan di dalam loop itu sendiri, pada umumnya kita tambahkan juga struktur kondisional sebagai syarat supaya sintaks tersebut berjalan lancar.
Contoh :
x=1; while (x<=10) { if (x == 7) { Alert('pembagian oleh 0'); X++; continue; } a = 1/(x-7); Alert(a); x++; }
Instruksi break
Sebaliknya kita juga bisa memaksa loop berhenti sebelum waktunya dengan alasan yang dikemukan di bagian awal dari loop. Instruksi Break memungkinkan menghentikan suatu loop (baik untuk for ataupun while). Pemakaiannya sendiri seperti instruksi continue, yaitu penambahan struktur kondisional agar supaya loop berhenti dan tidak berulang ulang looping Contoh :
for (x=1; x<=10; x++) { a = x-7; if (a == 0) {
Alert('pembagian oleh 0'); break;
} Alert(1/a);
}
Instruksi switch …. case
Instruksi ini memungkinkan kita untuk melakukan test berbagai nilai dari variabel yang sama. Dengan cara ini kita bisa melakukan testing terhadap berbagai nilai variabel lebih sederhana daripada memakai instruksi if.
switch (Variabel) {
case Nilai1:
blok instruksi;
break;
case Nilai2:
blok instruksi;
break;
case NilaiX:
blok instruksi;
break;
default:
blok instruksi;
break;
}
Fungsi
Fungsi adalah subprogram yang memungkinkan kita untuk menjalankan sekelompok instruksi dengan satu pemanggilan sederhana nama fungsi tersebut dari satu atau beberapa bagian di dalam badan suatu program.
Pendefinisian satu fungsi dinamakan deklarasi. Sintaks pendeklarasian suatu fungsi adalah sebagai berikut :
function Nama_dari_Fungsi(argumen1, argumen2, ...) {
daftar instruksi atau blok instruksi
}
Pemanggilan fungsi
<HTML>
<HEAD>
<SCRIPT language="Javascript">
<!--
function Pemanggilan() {
//blok instruksi
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="Pemanggilan();" >
…………………………………
</BODY>
</HTML>
Parameter dari fungsi
<HTML> <HEAD> <SCRIPT language="Javascript"> <!-- function Tampilkan1() { alert('Teks 1'); }
function Tampilkan2() { alert('Teks 2'); } //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:;" onClick="Tampilkan1();">Teks1</A> <A href="javascript:;" onClick="Tampilkan2();">Teks2</A> </BODY> </HTML>
atau cara kedua berikut akan memberikan hasil yang sama : <HTML> <HEAD> <SCRIPT language="Javascript"> <!-- function Tampilkan(Teks) { alert(Teks); } //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:;" onClick="Tampilkan('Teks1');">Teks1</A> <A href="javascript:;" onClick="Tampilkan('Teks2');">Teks2</A> </BODY> </HTML>
Bekerja dengan variabel di dalam fungsi
Variabel yang dideklarasikan secara implisit di dalam fungsi (tanpa kata kunci var) akan menjadi global, yang artinya variabel masih bisa di akses sesudah eksekusi dari fungsi.
Variabel yang dideklarasikan secara eksplisit di dalam fungsi (menggunakan kata kunci var) akan menjadi lokal, yang artinya hanya dapat diakses dari dalam fungsi, semua referensi yang memakai variabel ini dari luar fungsi akan menyebabkan pesan error (variabel tidak dikenal).
Event Event adalah suatu aksi yang dilakukan oleh pemakai yang memicu
jalannya kode JavaScript anda.sebagian besar event dipicu oleh pemakai yang memanipulasi halaman web pada program browsernya
Macam-macam event :1. Click , event ini terjadi jika pemakai mengklik tombol mouse pada
link atau elemen yang terdapat form. 2. Focus, event ini terjadi jika pemakai mengklik atau meletakkan
pointer mouse pada elemen form seperti field teks , kotak cek dan sebagainya.
3. Blur , event ini terjadi jika pemakai menyingkirkan focus (pointer mouse) dari elemen form yang sebelumnya diberi focus.
4. Change , event ini terjadi jika pemakai mengubah input atau masukan pada elemen form.
5. MouseOver, terjadi jika pemakai meletakkan mouse di atas sebuah link .
6. Select, event ini terjadi jika pemakai memilih teks pada elemen form , seperti menggeser pointer mouse pada teks sambil menahan tombol kiri mouse.
7. Submit, event ini terjadi bila mengklik tombol “submit”
Daftar Event
Event Keterangan
Abort (onAbort)
terjadi pada saat user mengagalkan proses download image
Blur (onBlur) terjadi ketika elemen kehilangan fokus, artinya user melakukan klik diluar elemen itu,
Change (onChange)
terjadi pada saat user memodifikasi isi dari data dalam satu field data
Click (onClick)
terjadi pada saat user melakukan klik mouse terhadap satu elemen yang berhubungan dengan event
Dblclick (onDblclick)
terjadi pada saat user melakukan klik dua kali pada satu elemen yang berhubungan event, elemen bisa berupa satu hiperlink atau elemen dari satu form. Event ini hanya mensupport JavaScript ver 1.2 keatas
Dragdrop (onDragdrop)
terjadi pada saat user melakukan drag dan drop elemen di dalam navigator. Hanya mensupport JavaScriptver 1.2 keatas
Error (onError)
muncul ketika error pada saat loading halaman. Hanya support JavaScript ver 1.1 keatas
Daftar Event
Event Keterangan
Focus (onFocus)
terjadi pada saat user memberikan focus kepada satu elemen
Keydown (onKeydown)
terjadi pada saat user menekan satu tombol pada keyboardnya. Hanya mensupport JavaScript ver 1.2 keatas
Keypress (onKeypress)
terjadi pada saat user menekan dan manahan tombol di keyboardnya tetap ditekan. Hanya mensupport JavaScript ver 1.2 keatas
Keyup (onKeyup)
terjadi pada saat user melepaskan tombol pada keyboardnya. Hanya mensupport JavaScript versi 1.2 keatas
Load (onLoad)
terjadi pada saat navigator user meload/memanggil suatu halaman
Mouseover (onMouseover)
terjadi pada saat user meletakkan kursor mouse diatas suatu elemen
Mouseout (onMouseout)
terjadi pada saat kursor mouse meninggalkan posisinya dari atas suatu elemen
Daftar EventEvent Keterangan
Reset (onReset)
terjadi pada saat user menghapus data pada suatu form dengan bantuan satu tombol reset
Resize (onResize)
terjadi pada saat user merubah dimensi ukuran dari jendela navigator
Select (onSelect)
terjadi pada saat user melakukan proses select terhadap suatu teks (sebagian atau semuanya) di dalam satu field bertjenis teks atau textarea
Submit (onSubmit)
terjadi pada saat user melakukan klik terhadap tombol pengiriman suatu form
Unload (onUnload)
terjadi pada saat navigator user meninggalkan halaman yang sedang diproses (atau di load)
Contoh Event
Object
Object
Membuat obyekvar x = new Array(elemen1[, elemen2, ...]);
var x = new Boolean(parameter);
Nama_dari_obyek = new Date();
Object
Mengakses object properties
objectName.propertyName Example : var message="Hello World!"; var x=message.length;
Mengakses Object Method objectName.methodName(
) var message="Hello world!"; var x = message.toUpperCase();
Kotak Dialog Kotak dialog adalah satu jendela yang tampil
di bagian depan (layer paling atas) menyusul satu event yang di jalankan, dan memungkinkan kita untuk : 1. Memberikan peringatan kepada user 2. Memberikan pilihan yang harus dipilih oleh user 3. Meminta user untuk mengisi atau melengkapi
isian pada suatu form field.
1.Metoda alert() Metoda alert() memungkinkan navigator
untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan (sebagai satu satunya parameter dari metoda). Pada saat kotak ini muncul, user tidak punya pilihan lain selain menekan tombol OK.
Sintaksnya adalah sebagai berikut : alert(nama_dari_variabel);
alert('teks');
alert('teks' + nama_dari_variabel);
Alert<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
alert("Hallo !");
</SCRIPT>
</BODY>
</HTML>
2. Metoda confirm() ,dengan tambahan kita bisa melakukan
pilihan OK atau Cancel. Pada saat kita pilih OK maka metoda ini akan mengirimkan nilai true dan mengirimkan nilai false jika kita memilih Cancel
sedangkan sintaksnya sendiri sama seperti metoda alert, dalam contoh ini sintaksnya adalah :
confirm('Anda Mau Meneruskan Proses ?');
Metoda prompt() Metoda prompt() agak sedikit lebih canggih
dibandingkan kedua metoda sebelumnya karena dia dilengkapi dengan satu cara untuk mendapatkan informasi yang diberikan oleh user. Metoda prompt() terdiri dari 2 komponen, yang pertama teks untuk pertanyaan dan yang kedua adalah teks default dari field yang akan diisi informasi oleh user.
prompt('Siapakah Nama Anda ?', 'isi disini' );
PRAKTIKUM
Tambahkan halaman entry page pada pertemuan sebelumnya dengan verifikasi
code (captcha) menggunakan javascript
Lanjutan
Lanjutan
SUMBERhttp://lecturer.eepis-its.edu/~
idris/file/PemrogramanWeb/Teori/day-4.pdf
http://codeproject.com
http://w3schools.com
Modul CCIT Ponorogo 2011