Pemrograman Web - Client Side Programming (Bab 8)(kelas XI)
BAB VIII
Client Side Programming
A. KOMPETENSI DASAR
3.8 Memahami client side scripting dalam pemrograman web
4.8 Mempresentasikan client side scripting dalam pemrograman web
B. MATERI PEMBELAJARAN
Konsep Client Side Scripting Programming
Secara umum, pemrograman web terbagi menjadi dua macam, yaitu Client Side Scripting dan Server Side Scripting. Perbedaan dari Client Side Cripting dan Server Side Scripting adalah pada bagaimana cara kerja dan dimana letak pemrosesannya. Aplikasi berbasis web adalah aplikasi yang arsitekturnya berupa cliend-site, yaitu aplikasi web yang dapat diolah di sisi client maupun server. Client Side Scripting adalah salah satu bahasa pemrograman web yang proses pengolahannya berada pada client atau browser. Browser bertindak sebagai client nya.
Didalam web browser tersebut terdapat library yang menterjemahkan semua perintah di halaman web menggunakan client side scripting yang biasa disebut dengan web engine.
Cara kerja Client Side Scripting:
Macam-Macam Aplikasi Client Side Programming
Beberapa contoh Client Side Scripting adalah :
1. Extensible Hyper Text Markup Language (XHTML)
2. Hyper Text Markup Language (HTML)
3. Cascading Style Sheet (CSS)
4. JavaScript JQuery dsb)
5. Extensible Markup Language (XML)
Aplikasi Client Side Scripting memiliki beberapa kelebihan, yaitu :
1. Tidak memerlukan server khusus untuk menjalankannya
2. File ringan, sehingga tidak membebani kinerja web server
3. Eksekusi script lebih cepat
Namun selain itu Client Side Scripting juga memiliki beberapa kekurangan, yaitu:
1. Keamanan kurang dapat diandalkan
2. Harus di dukung oleh browser dari client
3. Script mudah ditiru.
Struktur program client side
Salah satu program client side adalah Javascript. Javascript adalah salah satu bahasa pemrograman yang berjalan pada sisi klien. Javascript memiliki banyak keutamaan, misal mapu berjalan di setiap browser yang mendukungnya dan tidak tergantung pada sistem operasi atau yang biasa dikenal dengan nama cross-platform language. Javascript merupakan bahasa yang didukung oleh browser sehingga dapat langsung berjalan tanpa harus di compile atau di eksekusi.
Ada beberapa cara menuliskan kode Javascript di dalam dokumen atau halaman HTML, yaitu :
1. Menggunakan tag <SCRIPT>
Kode javascript dalam HTML dituliskan dengan menggunakan tag <script> dengan format sebagai berikut :
2. Menggunakan file eksternal
Yaitu dengan menuliskan kode program Javascript dalam suatu file teks dan kemudian file teks yang berisi kode Javascript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang disisipkan kedalam dokumen HTML adalah sebagai berikut :
3. Melalui event tertentu
Yaitu sebutan dari satu aksi yang dilakukan oleh user, contohnya seperti klik tombol mouse, pembahasan lebih lanjut ada di materi lainnya. Kodenya dapat di tulis sebagai
berikut :
eventHandtler adalah nama event tersebut.
Penulisan komentar untuk Javascript sama dengan cara penulisan pada C, C++ maupun Java, yaitu:
1. // : Untuk menulis komentar dalam satu baris
Semua tulisan yang terletak setelah tanda // tidak akan dieksekusi atau ditampilkan pada halaman web
2. /*..*/ : Untuk menulis komentar yang terdiri dari beberapa baris
Semua tulisan yang terletak diantara tanda /*..*/ tidak akan dieksekusi atau ditampilkan pada halaman web.
Komentar berfungsi hanya sebagai keterangan, tidak akan di eksekusi atau ditampilkan pada halaman web.
Cara penyisipan script client side dalam HTML
Ada 2 cara memasukkan Javascript ke HTML, yaitu :
1. Membuat Javascript di HTML secara langsung
Dengan menggunakan tag <script>...</script> yang mencakup semua kode JS yang dapat ditambahkan diantara tag <head> atau diantara tag <body>.
2. Menambahkan kode Javascript ke file terpisah
Menambahkan kode Javascript ke file terpisah digunakan jika beberapa JS script harus digunakan di beberapa halaman. Sehingga kode Javascript ditambahkan pada file terpisah, dan untuk membuat Javascript di HTML adalah dengan mengimport file eksternal. Cara mereferensikan dari dalam dokumen HTML sama dengan ketika mereferensi dokumen CSS.
Beberapa kelebihan menambahkan kode JS pada file terpisah yaitu :
• Readibility dan maintenance kode lebih mudah
• File Javascript yang di cache menaikkan semua performa websit dengan cara mengurangi waktu yang dibutuhkan halaman website untuk loading
• Ketika kode HTML dan Javascript terpisah, semua yang terhubung lebih mudah digunakan.
C. TUGAS MANDIRI (5 SOAL URAIAN)
Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!
1. Bagaimana cara mengaktifkan kode javascript?
2. Buatlah analisa tentang penulisan komentar pada Javascript!
3. Buatlah analisis tentang cara memasukkan Javascript pada HTML!
4. Bagaimana cara mengontrol HTML dengan javascript!
5. Buatlah analisis tentang kelebihan penambahan kode JS pada file terpisah !
D. TUGAS KELOMPOK (5 SOAL PRAKTIK URAIAN)
Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!
1. Carilah informasi tentang sejarah Javascript lalu diskusikan tentang sejarah Javascript tersebut dengan anggota kelompok anda!
2. Jelaskan perbedaan antara Java dengan Javascript!
3. Buatlah analisis tentang peranan browser dalam penerapan Javascript pada suatu dokumen HTML!
4. Buatlah analisa tentang cara kerja Client Side Scripting!
5. Buatlah timeline sejarah perkembangan Javascript dalam bentuk dokumen HTML dengan tampilan sebagai berikut!
E. UJI KOMPETENSI
PILIHAN GANDA
Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. Netscape memberikan nama "Javascript" pada tanggal...
A. 4 Desember 1995
B. 5 Desember 1995
C. 6 Desember 1995
D. 7 Desember 1995
E. 8 Desember 1995
2. Penempatan JavaScript pada elemen dalam HTML adalah ...
A. <script>
B. <javascript>
C. <scripting>
D. <js>
E. <java>
3. Sintaks JavaScript yang benar untuk mengubah isi dari elemen HTML di bawah ini adalah...
<p id="demo"> Ini adalah demonstrasi. </p>
A. document.getElementById ("demo") innerHTML = "Hello World!".;
B. document.getElementByName ("p") innerHTML = "Hello World!".;
C. document.getElement ("p") innerHTML = "Hello World!".;
D. #demo.innerHTML = "Hello World!";
E. demo.innerHTML = "Hello World"
4. Tempat yang tepat untuk menyisipkan JavaScript adalah...
A. bagian <head>
B. bagian <body>
C. bagian <head> dan <body> yang benar
D. tidak di bagian <head> dan <body>
E. bagian <title>
5. Sintaks yang benar untuk merujuk ke skrip eksternal yang disebut "xxx.js" adalah
A. <script name = "xxx.js">
B. <script href="xxx.js">
C. <script src="xxxx.js">
D. <script rel="xxx.js">
E. <javascript src="xxx.js">
6. Dibawah ini merupakan Client Side Scripting kecuali...
A. XHTML
B. Javascript
C PHP
D. HTML
E. CSS
7. Berikut merupakan pernyataan yang benar tentang Javascript, kecuali...
A. Bahasa yang dijalankan oleh program eksternal (Java Virtual Machine) diintegrasikan ke dalam browser
B. Bahasa yang langsung dijalankan oleh browser
C. Didefinisikan dengan tag <script> pada halaman HTML
D. Kode program bersifat terbuka dan dapat dibaca oleh browser
E. Tidak memerlukan proses kompilasi menjadi file lainnya
8. Yang bukan merupakan sifat dari Javascript adalah...
A. tertutup
B. terbuka
C. dapat dibaca oleh browser
D. case sensitif
E. tidak perlu kompilasi
9. Cara menambahkan komentar di JavaScript adalah...
A. "Ini adalah komentar
B. // Ini adalah komentar
C. <!- Ini adalah komentar ->
D. "ini adalah komentar"
E. (ini adalah komentar")
10. Cara untuk menyisipkan komentar yang memiliki lebih dari satu baris adalah...
A. <!- Komentar ini memiliki lebih dari satu baris ->
B. /* Komentar ini memiliki lebih dari satu baris */
C. // Komentar ini memiliki lebih dari satu baris //
D. (Komentar ini memiliki lebih dari satu baris)
E. "Komentar ini memiliki lebih dari satu baris
11. Yang bukan merupakan fungsi dari komentar adalah...
A. diperlukan dalam program untuk membantu dalam pengembangan aplikasi selanjutnya
B. sebagai keterangan program
C. sebagai pengingat bagian-bagian khusus di dalam skrip tersebut
D. untuk membuat orang yang tidak tahu program yang dibuat jadi mengerti dengan membaca petunjuk-petunjuk yang dibuat
E. sebagai penampil program yang dibuat
12. Setiap browser saat ini memiliki implementasi sendiri-sendiri untuk ECMAScript, Browser yang cocok untuk JScript adalah...
A. Internet Explorer
B. Opera
C. Safari
D. Google Chrome
E. Mozilla Firefox
13. Yang termasuk program editor web berbayar adalah...
A. Notepad++
B. Sublime Text
C. Adobe Dreamweaver
D. Aptana
E. Expression Web 4
14. Javascript pertama kali diperkenalkan oleh netscape pada tahun...
A. 1945
B. 1995
C. 2005
D. 1983
E. 1975
15. Script pada Javascript dapat ditempatkan pada...
A. Body, header, title
B. Header, title, html
C. Title, body, external file
D. Body, header, external file
E. Body, header, html
BENAR-SALAH
Pilihlah B jika pernyataan Benar atau S jika pernyataan Salah
0 komentar: