$$$
Modul 2 $$$
# Client Side Programming
Client Side merupakan teknologi webpage yang menerapkan
jenis-jenis pemrograman web dimana semua sintaks & perintah program
dijalankan di web browser. Ketika client meminta dokumen yang mengandung script
(client side scripting), script tersebut akan diambil dari web server kemudian
dijalankan de web browser yang bersangkutan.
Ada pun cara kerja client side yaitu, pengunjung web
meng-klik salah 1 link dari web & browser membaca perintah pengunjung untuk
memanggil alamat web yang dituju. Setelah itu browser akan mengalihkan ke
halaman yang ditjuju oleh pengunjung web. Contoh aplikasi yang digunakan dalam
pemrograman client side, antara lain : Javascript, CSS, HTML.
 |
 |
||||
 |
|||||
|
|
¶ Karakteristik client side scripting :
´ Kode program
didownload bersama dengan halaman web.
´ Bersifat
interpreter & diterjemahkan oleh browser.
´ Model
eksekusinya simple & script dapat dijadikan 1 dengan HTML.
¶ Kelebihan client side scripting :
ü Tidak perlu servis khusus untuk mendalaminya.
ü Eksekusi script lebih cepat.
ü Tidak membenahi kinerja web server.
¶ Kekurangan client side scripting :
± Harus disupport oleh browser dari pihak
client.
± Script dapat ditiru.
± Dari segi keamanan kurang dapat diandalkan.
A. Sekilas
Tentang Javascript
Javascript adalah bahasa pemrograman (skrip) yang ditempelkan pada
kode HTML & proses disisi klien. Dengan adanya bahasa ini, kemempuan
dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan
Javascript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum
formulir dikirimkan ke server.
Javascrpt bukanlah bahasa Java & merupakan 2 bahasa yang
berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada
sisi klien), sedangkan kode Java dikompilasi oleh pemrogram & hasil
kompilasinyalah yang dijalankan oleh klien.
B. Javascript
Sebagai Bahasa Berorientasi Pada Obyek.
µ Properti
Adalah atribut dari sebuah objek. Contoh, objek mobil punya
properti warna mobil.
Penulisan :
Nama_Objek.Nama_Properti=Nilai.
Window.defaultStatus=”Selamat Belajar JavaScript”;
µ Metode
Adalah suatu kumpulan kode yang digunakan untuk melakukan suatu
tindakan terhadap objek.
Penulisan : Nama_Objek.Nama_Metode (parameter)
document.write (“Hallo”)
C. Struktur
Penulisan Javascript
Ada 2 jenis bagaimana Javascripr
dibuat, pertama Javascript ditulis dalam file yang terpisah dengan HTML, ke 2
Javascript ditulis dalam HTML. Javascript yang ditulis diluar HTML disebut
External Javascript dengan ekstensi file .js. Dalam HTML, penulisan script
diawali dengan <script>…</script>. Script yang
akan dijalankan harus diletakkan diantara <script> & </script>.
Tag <script> mempunyai beberapa atribut namun yang terprnting adalah
atribut language & type. Karena Javascript bukan satu-satunya bahasa
scripting, maka sangatlah perlu untuk memberitahukan kepada browser bahwa
bahasa script yang digunakan adalah Javascript & selanjutnya browser akan
menjalankan modul pendukung Javascript untuk memprosesannya. Sehingga untuk
Javascript, pada tag <script> perlulah ditambah atribut berikut ini :
<script language=”Javascript”
type=”text/javascript”>
Script dapat diletakkan di tag
<body> & / di tag <head> pada bagian halaman HTML. Terkadang
didalam penulisan javascript terdapat kode <!__//__>, umumnya disertakan
dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser
akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela
browser.
~ Contoh 1 :
<html>
<head>
<title> Alert Box </title>
</head>
<body>
<script language=”Javascript”
type=”text/javascript”> alert(“Siswa kelas X RPL sedang belajar
Javascript”);
</script>
</body>
</html>
~ Contoh 2 :
Script ditulis pada bagian body :
<html>
<body>
<script language=”Javascript”
type=”text/javascript”>
document.write
(“<h1> Berikut ini adalah contoh
penulisan dokumen menggunakan JavaScript </h1>”)
1. Penulisan
Fungsi Pada JavaScript
1.1
Penulisan JavaScript didalam tag <head>
Dalam contoh berikut, script java diletakkan di tag <head> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.
Dalam contoh berikut, script java diletakkan di tag <head> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.
Contoh 3 :
<html>
<head>
<script language=”JavaScript” type=”text/javascript”>
Function cobafungsi ( )
{
document.getElementByld(“coba”)
.innerHTML=”Kali ini saya belajar membuat fungsi dalam JavaScript.”;
}
</script>
</head>
<body>
<h1> Halaman Web RPL </h1>
<body>
<h1> Halaman Web RPL </h1>
<p id=”coba”> A Paragraph </p>
<button type=”button” onclick=”cobafungsi ( )”> Coba Fungsi
</button>
</body>
</html>
</html>
1.2
Penulisan JavaScript didalam tag <body>
Didalam contoh berikut, fungsi javascript diletakkan di tag
<body> pada halaman HTML. Fungsi akan dipanggil ketika tombol diklik.
Contoh 4 :
<html
<body>
<h1> Halaman Web RPL </h1>
<body>
<h1> Halaman Web RPL </h1>
<p id=”coba”> PORTAL RPL </p>
<button type=”button” onclick=”cobafungsi ( )”> Coba Fungsi
</button>
<script language=”JavaScript” type=”text/javascript”>
Function coba fungsi ( )
{
document.getElementByld(“coba”)
.inner HTML=”Kali ini script saya letakkan diantara tag body.”
}
</script>
</body>
</html>
</body>
</html>
2. Memberi
Komentar Pada JavaScript
Komentar pada suatu script tidak akan
dieksekusi oleh Javascript. Komentar ditambahkan pada script untuk memberikan
penjelasan script / membuat script tidak dieksekusi. Untuk memberikan komentar
yang hanya 1 baris gunakan //.
Contoh 1 :
//Ini adalah bagian heading :
document.getElementByld(“My
H1”).innerHTML=”Selamat datang di Home page saya.”;
Atau
Var x = 5 ; // mendeklarasikan x &
memasangkannya dengan 5.
Var y = x+12 ; // mendeklarasikan y
& memasangkannya dengan x+2.
Sedangkan untuk memberikan komentar
lebih dari 1 baris gunakan /* & */. Jadi script yang terletak antara /*
& */ akan dianggap sebagai komentar. Berikut contoh komentar yang lebih
dari 1 baris :
Contoh :
/*Kode berikut akan ditulis ke heading
& paragraph. Dan akan menampilkan halaman home page.*/
document.getElemenetByld(“my
H1”).innerHTML=”Selamat datang di Home Page saya.”;
document.getElementByld(“my P”).innerHTML=”Ini
adalah paragraph saya.”;
Postingan
0 komentar:
Posting Komentar