pertemuan ke-5 client side scripting (javascript) · javascript sederhana peletakan javascript...
Post on 02-Mar-2019
242 Views
Preview:
TRANSCRIPT
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
S1 Teknik Informatika - Unijoyo 2
� 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,
S1 Teknik Informatika - Unijoyo 3
� 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
S1 Teknik Informatika - Unijoyo 4
� 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.
S1 Teknik Informatika - Unijoyo 5
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
S1 Teknik Informatika - Unijoyo 6
<script type=“txt/javascript"><!--
Kode-kode JavaScript// -->
</script>
S1 Teknik Informatika - Unijoyo 7
JavaScript untukmenuliskan teks:
<html>
<body>
<script type="text/javascript">
document.write(“JavaScript sederhana!");
</script>
</body>
</html>
S1 Teknik Informatika - Unijoyo 8
Tampilan:
�Di bagian Head�Di bagian Body�Di bagian Head dan body�Di External script
S1 Teknik Informatika - Unijoyo 9
�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>
S1 Teknik Informatika - Unijoyo 10
�Script yang akan dieksekusi ketikahalaman web ditampilkan diletakkan didalam bagian body.<html><head></head><body><script type=“text/javascript”>. . .</script></body></html>
S1 Teknik Informatika - Unijoyo 11
� 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>
S1 Teknik Informatika - Unijoyo 12
� 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>
S1 Teknik Informatika - Unijoyo 13
� Komentar 1 baris:// ini adalah komentar
� Komentar beberapa baris:
/*Ini jugaAdalah komentar*/
S1 Teknik Informatika - Unijoyo 14
�Alert� Prompt� Confirm
S1 Teknik Informatika - Unijoyo 15
�digunakan untuk memperingatkan pengunjung hal-hal atau dalam kasus tertentu memberikaninstruksi.
�Syntax:window.alert(‘text’)
S1 Teknik Informatika - Unijoyo 16
�digunakan untuk menampilkan sebuah prompt yangjuga mempunyai kotak isian yang dapat menerimasesuai informasi dari pengunjung.
�Syntax:window.prompt(‘text’,’defaultvalue’)
S1 Teknik Informatika - Unijoyo 17
�Digunakan untuk memperingatkan pengunjungagar menguji atau menerima sesuatu denganmemilih tombol OK atau Cancel untuk konfirmasi.
�Syntax:window.confirm(‘text’)
S1 Teknik Informatika - Unijoyo 18
� 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;
S1 Teknik Informatika - Unijoyo 19
S1 Teknik Informatika - Unijoyo 20
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"><!--var luas,panjang,lebar,satuan;satuan = window.prompt('Masukkan satuan (m,cm) :');panjang = window.prompt('Masukkan panjang persegi panjang :', + '0');lebar = window.prompt('Masukkan lebar persegi panjang :', + '0');luas=panjang*lebar;document.write('Panjang = ' + panjang +' ' + satuan + "<br>");document.write('Lebar = ' + lebar +' ' + satuan + "<br>");document.write('Luas = ' + luas +' ' + satuan + "<sup>2<sup>");//--></script>
</body></html>
Menampilkan informasi
Menampilkan isi variabel
variabel
�Operator Aritmatika:+ - * / % ++ --
�Operator Assignment:= += -= *= /= %=
�Operator Perbandingan:== === != > < >= <=
�Operator Logika:&& || !
S1 Teknik Informatika - Unijoyo 21
� If…else� Perulangan For� Perulangan While
S1 Teknik Informatika - Unijoyo 22
�Digunakan untuk mengetes apakah suatukondisi itu benar (true) atau salah (false).
S1 Teknik Informatika - Unijoyo 23
<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
S1 Teknik Informatika - Unijoyo 24
<html><head> <title>Belajar JavaScript</title> </head><body>
<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.
S1 Teknik Informatika - Unijoyo 25
<html><head> <title>Belajar JavaScript</title> </head><body>
<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.
S1 Teknik Informatika - Unijoyo 26
<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
S1 Teknik Informatika - Unijoyo 27
� 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”
S1 Teknik Informatika - Unijoyo 28
� 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.
S1 Teknik Informatika - Unijoyo 29
� 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.
S1 Teknik Informatika - Unijoyo 30
�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.
S1 Teknik Informatika - Unijoyo 31
top related