pertemuan ke-5 client side scripting (javascript) · javascript sederhana peletakan javascript...

Pertemuan Ke-5Client Side Scripting

(JavaScript)

S1 Teknik Informatika - Unijoyo 1

Konsep Client Side ScriptingJavaScript?Pendeklarasian JavaScriptJavaScript sederhanaPeletakan JavaScriptKomentar pada JavaScriptKotak DialogVariabelOperatorStruktur KontrolFungsi (function)EventStatus Bar


� Client-side programming adalah programkomputer pada web yang dijalankan pada sisiclient, oleh web browser.

�Operasi dapat dilakukan oleh client-sidekarena operasi tersebut membutuhkan akseske informasi atau fungsi yang tersedia padaclient tetapi tidak pada server,


� karena pengguna membutuhkan observasiterhadap operasi tersebut atau menyediakaninput, atau server kekurangan kekuatanpememrosesan untuk melakukan operasi yangtepat waktu untuk seluruh client yang harusdilayaninya.

� Jika operasi dapat dilakukan oleh client tanpamengirim data melalui jaringan, maka hal itumemakan waktu lebih sedikit, menggunakanlebih kecil bandwidth dan mengurangi resikokeamanan


� Client-side Script seringkali dimasukkan (embedded)di dalam dokumen HTML, tetapi dapat juga berada didalam file terpisah, yang direferensikan olehdokumen yang menggunakannya. Atas sebuahrequest, file yang diperlukan dikirimkan oleh webserver kepada komputer user.

� Web browser milik user melakukan eksekusi terhadapScript, lalu menampilkan dokumen, termasuk outputyang dapat terlihat dari Script. Client-side Script jugadapat berisikan perintah yang harus diikuti oleh webbrowser jika user berinteraksi dengan dokumendengan cara tertentu.


Untuk membuat website menjadi dinamis dan interaktif:� meletakan teks dinamik di dalam halaman HTML� memberikan reaksi terhadap suatu event� membaca dan menuliskan elemen-elemen HTML� digunakan untuk memvalidasi data� digunakan untuk mendeteksi browser pengunjung web� digunakan untuk menyimpan dan menerima informasi di

komputer pengunjung halaman Web


JavaScript untukmenuliskan teks:

<html>

<body>

<script type="text/javascript">

document.write(“JavaScript sederhana!");

</script>

</body>

</html>


Tampilan:

�Di bagian Head�Di bagian Body�Di bagian Head dan body�Di External script


�Script yang berisi fungsi (function)diletakkan di bagian head. Hal ini untukmemastikan bahwa script telah loadedsebelum fungsi dipanggil.<html>

<head>

<script type=“text/javascript”>

. . .

</script>

</head>

</html>


�Script yang akan dieksekusi ketikahalaman web ditampilkan diletakkan didalam bagian body.<html><head></head><body><script type=“text/javascript”>. . .</script></body></html>


� Untuk script yang berjumlah banyak di dalamdokumen HTML, maka script dapat diletakkan baik dibagian head dan body.<html><head><script type=“text/javascript”>. . .</script></head><body><script type=“text/javascript”>. . .</script></body></html>


� Terkadang JavaScript yang sama ingin dijalankan padahalaman-halaman web yang berbeda-beda. Maka scriptyang sama tidak perlu dituliskan untuk setiap halaman,akan tetapi dengan menuliskan JavaScript di suatu fileeksternal.Di dalam file eskternal tidak boleh terdapat tag<script>

� Contoh cara penggunaan:<html><head><script src=“namaFileScript.js"></script></head><body></body></html>


� Komentar 1 baris:// ini adalah komentar

� Komentar beberapa baris:

/*Ini jugaAdalah komentar*/


�Alert� Prompt� Confirm


�digunakan untuk memperingatkan pengunjung hal-hal atau dalam kasus tertentu memberikaninstruksi.

�Syntax:window.alert(‘text’)


�digunakan untuk menampilkan sebuah prompt yangjuga mempunyai kotak isian yang dapat menerimasesuai informasi dari pengunjung.

�Syntax:window.prompt(‘text’,’defaultvalue’)


�Digunakan untuk memperingatkan pengunjungagar menguji atau menerima sesuatu denganmemilih tombol OK atau Cancel untuk konfirmasi.

�Syntax:window.confirm(‘text’)


� Tipe data:¡ Numeric¡ String¡ Boolean¡ Null

� Aturan penggunaan:¡ Nama variabel adalah case-sensitive (a dan A adalah 2 contoh

variabel yang berbeda)¡ Nama variabel harus dimulai dengan suatu huruf atau oleh

karakter garis bawah (underscore)

� Contoh deklarasi:nama = ‘eve’;angka = 17;


Contoh penggunaan variabel untuk menghitung luas persegipanjang:

Tampilan:

JavaScript:<html><head><title>..:: Belajar JavaScript ::.. </title></head><body>Menghitung Luas Persegi Panjang: <br><script language="JavaScript"></script>

</body></html>

Menampilkan informasi

Menampilkan isi variabel

variabel

�Operator Aritmatika:+ - * / % ++ --

�Operator Assignment:= += -= *= /= %=

�Operator Perbandingan:== === != > < >= <=

�Operator Logika:&& || !


� If…else� Perulangan For� Perulangan While


�Digunakan untuk mengetes apakah suatukondisi itu benar (true) atau salah (false).


<html><head> <title>Belajar JavaScript</title> </head><body>

<script type="text/javascript">var nilainilai = prompt('Silahkan masukkan nilai Anda','');if(nilai <= 56){window.alert('Sayang sekali. Anda tidak lulus.');}else{window.alert('Selamat! Anda lulus.');}

</script></body></html>

�Digunakan untuk melakukan perulangan jikajumlah perulangan sudah diketahui sebelumnya



<script type="text/javascript">// Mengulang angka dari 0 sampai 5

var angka=0;for (angka=0;angka<=5;angka++)

{document.write('Angka ' + angka + "<br>");

}</script>

</body></html>

�Digunakan ketika ingin melakukan perulanganselama kondisi yang ditentukan adalah true.



<script type="text/javascript">// Mengulang angka dari 0 sampai 5

var angka=0;while (angka<=5)

{document.write("Angka " + angka +"<br>");angka=angka+1;

}</script>

</body></html>

� Fungsi adalah potongan kode JavaScript yang dapatdideklarasikan pada bagian head dan kemudian dapatdirujuk dari kode yang dibuat di dalam body.


<html><head><script type="text/javascript">function perkalian(a,b)

{return a*b;

}</script>

</head><body><script type="text/javascript">

document.write(perkalian(7,5));</script>

</body></html>

� Event adalah aksi yang dapat di-trigger oleh fungsi(function) JavaScript.

� Event biasa dikombinasikan dengan fungsi, danfungsi tersebut tidak akan dieksekui sebelum eventtersebut terjadi

� Contoh-contoh penggunaan event:¡ Ketika mouse di-klik¡ Ketika menampilkan halaman web atau menampilkan

gambar¡ Mouse digerakkan ke suatu posisi tertentu di dalam halaman

web¡ Memilih suatu kotak masukan di dalam suatu form HTML¡ Selecting an input box in an HTML form¡ Men-submit suatu form HTML


� OnclickEvent ini di-trigger ketika mouse di-klik ke suatu obyek

� onload and onUnloadKeduanya di-trigger ketika pengunjung memasuki ataumeninggalkan halaman web. Onload Event biasanya digunakanuntuk mengecek tipe dan versi browser pengunjung, danmenampilkan informasi tersebut.

� onFocus, onBlur and onChangeDikombinasikan dengan penggunaan fungsi untuk memvalidasisuatu isian form.

� onSubmitDigunakan untuk memvalidasi seluruh isian form sebelum di-submit

� onMouseOver and onMouseOutDigunakan untuk membuat tombol yang “teranimasi”


� Status bar adalah bar yang biasanya berwarnaabu-abu di sepanjang bagian bawah jendela webbrowser. Status bar menampilkan informasiseperti beberapa banyak halaman telah di-loaddan URL pada saat suatu link ditunjuk.

� Syntax:window.status='Teks ini terletak di statusbar';

� Fasilitas ini dapat disertakan di dalam eventonClick, onMouseOver atau onMouseOut,sehingga ketika suatu link ditunjuk oleh mouse,maka status bar akan menampilkan deskripsi linktersebut.


� JavaScript dapat digunakan untuk membuat websitemenjadi dinamis dan interaktif.

� JavaScript dapat diletakkan di bagian Head, Body,gabungan Head dan body, serta di External script.

� Terdapat tiga macam kotak dialog untuk pengunjung situsyang dapat dibuat dengan menggunakan JavaScript, yaitu:Alert, Prompt dan Confirm

� Tipe data yang dapat digunakan: Numeric, String,Boolean dan Null

� Jenis-jenis operator: Operator Aritmatika, OperatorAssignment, Operator Perbandingan dan Operator Logika

� Struktur kontrol di dalam JavaScript: If…else, perulanganFor dan perulangan While.

� JavaScript juga dapat dibuat dalam bentuk fungsi(function), yang nantinya juga dapat digunakan untukmen-trigger (dikombinasikan dengan) event.


�Chris Bates [2006]. Web Programming:Building Internet Applications, ThirdEdition, John Wiley & Sons Ltd, England.

�Husni [2007]. Pemrograman DatabaseBerbasis Web, Graha Ilmu, Yogyakarta.

�Sebesta, R.W. [2002], Programming theWorld Wide Web, Addison Wesley.

�Sutarman, S.Kom [2003]. MembangunAplikasi Web dengan PHP dan MySQL,Graha Ilmu, Yogyakarta.


pertemuan ke-5 client side scripting (javascript) · javascript sederhana peletakan javascript...

Documents