2. Konsep Client Side Scripting
JavaScript?
Pendeklarasian JavaScript
JavaScript sederhana
Peletakan JavaScript
Komentar pada JavaScript
Kotak Dialog
Variabel
Operator
Struktur Kontrol
Fungsi (function)
Event
Status Bar
D3 Manajemen Informatika - Unijoyo 2
3. ž Client-side programming adalah program
komputer pada web yang dijalankan pada sisi
client, oleh web browser.
ž Operasi dapat dilakukan oleh client-side
karena operasi tersebut membutuhkan akses
ke informasi atau fungsi yang tersedia pada
client tetapi tidak pada server,
D3 Manajemen Informatika - Unijoyo 3
4. ž karena pengguna membutuhkan observasi
terhadap operasi tersebut atau menyediakan
input, atau server kekurangan kekuatan
pememrosesan untuk melakukan operasi yang
tepat waktu untuk seluruh client yang harus
dilayaninya.
ž Jika operasi dapat dilakukan oleh client tanpa
mengirim data melalui jaringan, maka hal itu
memakan waktu lebih sedikit, menggunakan
lebih kecil bandwidth dan mengurangi resiko
keamanan
D3 Manajemen Informatika - Unijoyo 4
5. ž Client-side Script seringkali dimasukkan (embedded)
di dalam dokumen HTML, tetapi dapat juga berada di
dalam file terpisah, yang direferensikan oleh
dokumen yang menggunakannya. Atas sebuah
request, file yang diperlukan dikirimkan oleh web
server kepada komputer user.
ž Web browser milik user melakukan eksekusi terhadap
Script, lalu menampilkan dokumen, termasuk output
yang dapat terlihat dari Script. Client-side Script juga
dapat berisikan perintah yang harus diikuti oleh web
browser jika user berinteraksi dengan dokumen
dengan cara tertentu.
D3 Manajemen Informatika - Unijoyo 5
6. 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
D3 Manajemen Informatika - Unijoyo 6
9. ž Di bagian Head
ž Di bagian Body
ž Di bagian Head dan body
ž Di External script
D3 Manajemen Informatika - Unijoyo 9
10. ž Script yang berisi fungsi (function)
diletakkan di bagian head. Hal ini untuk
memastikan bahwa script telah loaded
sebelum fungsi dipanggil.
<html>
<head>
<script type=“text/javascript”>
. . .
</script>
</head>
</html>
D3 Manajemen Informatika - Unijoyo 10
11. ž Script yang akan dieksekusi ketika
halaman web ditampilkan diletakkan di
dalam bagian body.
<html>
<head>
</head>
<body>
<script type=“text/javascript”>
. . .
</script>
</body>
</html>
D3 Manajemen Informatika - Unijoyo 11
12. ž Untuk script yang berjumlah banyak di dalam
dokumen HTML, maka script dapat diletakkan baik di
bagian head dan body.
<html>
<head>
<script type=“text/javascript”>
. . .
</script>
</head>
<body>
<script type=“text/javascript”>
. . .
</script>
</body>
</html>
D3 Manajemen Informatika - Unijoyo 12
13. ž Terkadang JavaScript yang sama ingin dijalankan pada
halaman-halaman web yang berbeda-beda. Maka script
yang sama tidak perlu dituliskan untuk setiap halaman,
akan tetapi dengan menuliskan JavaScript di suatu file
eksternal.
Di dalam file eskternal tidak boleh terdapat tag
<script>
ž Contoh cara penggunaan:
<html>
<head>
<script src=“namaFileScript.js">
</script>
</head>
<body>
</body>
</html>
D3 Manajemen Informatika - Unijoyo 13
14. ž Komentar 1 baris:
// ini adalah komentar
ž Komentar beberapa baris:
/*
Ini juga
Adalah komentar
*/
D3 Manajemen Informatika - Unijoyo 14
16. ž digunakan untuk memperingatkan pengunjung hal-
hal atau dalam kasus tertentu memberikan
instruksi.
ž Syntax:
window.alert(‘text’)
D3 Manajemen Informatika - Unijoyo 16
17. ž digunakan untuk menampilkan sebuah prompt yang
juga mempunyai kotak isian yang dapat menerima
sesuai informasi dari pengunjung.
ž Syntax:
window.prompt(‘text’,’defaultvalue’)
D3 Manajemen Informatika - Unijoyo 17
18. ž Digunakan untuk memperingatkan pengunjung
agar menguji atau menerima sesuatu dengan
memilih tombol OK atau Cancel untuk konfirmasi.
ž Syntax:
window.confirm(‘text’)
D3 Manajemen Informatika - Unijoyo 18
19. ž 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;
D3 Manajemen Informatika - Unijoyo 19
20. D3 Manajemen Informatika - Unijoyo 20
Contoh penggunaan variabel untuk menghitung luas persegi
panjang:
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
23. ž Digunakan untuk mengetes apakah suatu
kondisi itu benar (true) atau salah (false).
D3 Manajemen Informatika - Unijoyo 23
<html>
<head> <title>Belajar JavaScript</title> </head>
<body>
<script type="text/javascript">
var nilai
nilai = prompt('Silahkan masukkan nilai Anda','');
if(nilai <= 56)
{
window.alert('Sayang sekali. Anda tidak lulus.');
}
else
{
window.alert('Selamat! Anda lulus.');
}
</script>
</body>
</html>
24. ž Digunakan untuk melakukan perulangan jika
jumlah perulangan sudah diketahui sebelumnya
D3 Manajemen 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>
25. ž Digunakan ketika ingin melakukan perulangan
selama kondisi yang ditentukan adalah true.
D3 Manajemen 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>
26. ž Fungsi adalah potongan kode JavaScript yang dapat
dideklarasikan pada bagian head dan kemudian dapat
dirujuk dari kode yang dibuat di dalam body.
D3 Manajemen 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>
27. ž Event adalah aksi yang dapat di-trigger oleh fungsi
(function) JavaScript.
ž Event biasa dikombinasikan dengan fungsi, dan
fungsi tersebut tidak akan dieksekui sebelum event
tersebut 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
D3 Manajemen Informatika - Unijoyo 27
28. ž Onclick
Event ini di-trigger ketika mouse di-klik ke suatu obyek
ž onload and onUnload
Keduanya di-trigger ketika pengunjung memasuki atau
meninggalkan halaman web. Onload Event biasanya digunakan
untuk mengecek tipe dan versi browser pengunjung, dan
menampilkan informasi tersebut.
ž onFocus, onBlur and onChange
Dikombinasikan dengan penggunaan fungsi untuk memvalidasi
suatu isian form.
ž onSubmit
Digunakan untuk memvalidasi seluruh isian form sebelum di-
submit
ž onMouseOver and onMouseOut
Digunakan untuk membuat tombol yang “teranimasi”
D3 Manajemen Informatika - Unijoyo 28
29. ž Status bar adalah bar yang biasanya berwarna
abu-abu di sepanjang bagian bawah jendela web
browser. Status bar menampilkan informasi
seperti beberapa banyak halaman telah di-load
dan URL pada saat suatu link ditunjuk.
ž Syntax:
window.status='Teks ini terletak di status
bar';
ž Fasilitas ini dapat disertakan di dalam event
onClick, onMouseOver atau onMouseOut,
sehingga ketika suatu link ditunjuk oleh mouse,
maka status bar akan menampilkan deskripsi link
tersebut.
D3 Manajemen Informatika - Unijoyo 29
30. ž JavaScript dapat digunakan untuk membuat website
menjadi 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 situs
yang 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, Operator
Assignment, Operator Perbandingan dan Operator Logika
ž Struktur kontrol di dalam JavaScript: If…else, perulangan
For dan perulangan While.
ž JavaScript juga dapat dibuat dalam bentuk fungsi
(function), yang nantinya juga dapat digunakan untuk
men-trigger (dikombinasikan dengan) event.
D3 Manajemen Informatika - Unijoyo 30
31. ž Chris Bates [2006]. Web Programming:
Building Internet Applications, Third
Edition, John Wiley & Sons Ltd, England.
ž Husni [2007]. Pemrograman Database
Berbasis Web, Graha Ilmu, Yogyakarta.
ž Sebesta, R.W. [2002], Programming the
World Wide Web, Addison Wesley.
ž Sutarman, S.Kom [2003]. Membangun
Aplikasi Web dengan PHP dan MySQL,
Graha Ilmu, Yogyakarta.
D3 Manajemen Informatika - Unijoyo 31
32. ž Jelaskan dan berikan contoh fungsi-fungsi
standart pada javaScript mengenai fungsi
Matematika?
ž Buat program menggunakan javaScript untuk
menghitung garis miring dari segitiga siku-
siku?
ž Berikan penjelasan mengenai Mootools?
D3 Manajemen Informatika - Unijoyo 32
