Praktikum Java Script

49
Praktikum Java Script

description

Praktikum Java Script. Pengertian. Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML - PowerPoint PPT Presentation

Transcript of Praktikum Java Script

Page 1: Praktikum  Java Script

Praktikum Java Script

Page 2: 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

Page 3: Praktikum  Java Script

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

Page 4: Praktikum  Java Script

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.

Page 5: Praktikum  Java Script

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>

Page 6: Praktikum  Java Script

Peletaan sintak java script pada dokumen HTML Script javascript diletakkan di antara <BODY> …. </BODY>

Script javascript diletakkan di antara <HEAD> …. </HEAD>

Page 7: Praktikum  Java Script

Peletaan sintak java script pada dokumen HTMLMenggunakan file ekstern

Melalui event tertentu

Page 8: Praktikum  Java Script

Komentar<SCRIPT>

// ini adalah komentar

/* ini adalah

Komentar

Yang panjang */ </SCRIPT>

Page 9: Praktikum  Java 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";

Page 10: Praktikum  Java Script

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)

Page 11: Praktikum  Java Script

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.

Page 12: Praktikum  Java Script

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>

Page 13: Praktikum  Java 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]);

Page 14: Praktikum  Java Script

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

Page 15: Praktikum  Java Script

Konversi jenis variabel parseFloat() dengan parameter tertentu menjadi bilangan

desimal, Sintaks dari fungsi parseFloat adalah sebagai berikut :

---------------------------------------parseFloat(string);

Page 16: Praktikum  Java Script

Operator Binary

Page 17: Praktikum  Java Script

Operator Penugasan

Operator ini memungkinkan kita untuk menyederhanakan operasi penambahan nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri

Page 18: Praktikum  Java Script

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 ) .

Page 19: Praktikum  Java Script

Operator Pembanding

Page 20: Praktikum  Java Script

Operator Logika (Booleans)

Operator jenis ini memungkinkan kita untuk memverifikasi apakah beberapa kondisi sudah benar

Page 21: Praktikum  Java Script

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'

Page 22: Praktikum  Java Script

Ekspresi perbandingan (kondisi) ? nilaibenar : nilaisalah

Var Hadiah = (nilai > 90) ? “mobil” : “sepeda”

Page 23: Praktikum  Java Script

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

}

Page 24: Praktikum  Java Script

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

}

Page 25: Praktikum  Java Script

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++; }

Page 26: Praktikum  Java Script

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);

}

Page 27: Praktikum  Java Script

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;

}

Page 28: Praktikum  Java Script

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

}

Page 29: Praktikum  Java Script

Pemanggilan fungsi

<HTML>

<HEAD>

<SCRIPT language="Javascript">

<!--

function Pemanggilan() {

//blok instruksi

}

//-->

</SCRIPT>

</HEAD>

<BODY onLoad="Pemanggilan();" >

…………………………………

</BODY>

</HTML>

Page 30: Praktikum  Java Script

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>

Page 31: Praktikum  Java Script

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).

Page 32: Praktikum  Java Script

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”

Page 33: Praktikum  Java Script

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

Page 34: Praktikum  Java Script

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

Page 35: Praktikum  Java Script

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)

Page 36: Praktikum  Java Script

Contoh Event

Page 37: Praktikum  Java Script

Object

Page 38: Praktikum  Java Script

Object

Membuat obyekvar x = new Array(elemen1[, elemen2, ...]);

var x = new Boolean(parameter);

Nama_dari_obyek = new Date();

Page 39: Praktikum  Java Script

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();

Page 40: Praktikum  Java Script

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.

Page 41: Praktikum  Java Script

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);

Page 42: Praktikum  Java Script

Alert<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<BODY>

<SCRIPT language="Javascript">

alert("Hallo !");

</SCRIPT>

</BODY>

</HTML>

Page 43: Praktikum  Java Script

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 ?');

Page 44: Praktikum  Java Script

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' );

Page 45: Praktikum  Java Script

PRAKTIKUM

Page 46: Praktikum  Java Script

Tambahkan halaman entry page pada pertemuan sebelumnya dengan verifikasi

code (captcha) menggunakan javascript

Page 47: Praktikum  Java Script

Lanjutan

Page 48: Praktikum  Java Script

Lanjutan