Pemrograman Web - Client Side Programming (Bab 9)(Kelas XI)

BAB IX

Client Side Programming

A. KOMPETENSI DASAR

3.9 Menerapkan client side scripting pada halaman web interaktif

4.9 Membuat halaman web interaktif menggunakan client side scripting

B. MATERI PEMBELAJARAN

Konsep Web Interaktif

Website interaktif merupakan pengembangan dari website dinamis. Di dalam website interaktif terdapat komunikasi dua arah, antara pengunjung dengan admin web atau antara pengunjung dengan pengunjung lain.

Javascript adalah salah satu bahasa pemrograman yang digunakan untuk menambahkan fitur supaya web menjadi interaktif, seperti pada halaman feedback, melakukan pembuatan game, pembuatan perubahan tombol ketika diklik, disorot

dengan memberikan animasi, efek dinamik dan lain sebagainya. Javascript dapat dikolaborasikan dengan dokumen HTML dan dapat digunakan untuk membuat website interaktif. Javascript adalah bahasa yang cukup komplek tetapi sangat fleksibel dan banyak Programmer telah menyediakan tool yang berdiri di atas core Javascript agar dapat menggunakan fungsi-fungsi ekstra, yaitu:

1. Application Programming Interfaces (APIs)

2. API pihak ketiga

3. Frameworks pihak ketiga dan libraries

Perintah-Perintah Dasar Javascript

1. Variabel

Adalah tempat yang digunakan untuk memberi nilai. Keyword yang digunakan untuk mendeklarasikan variabel adalah var. Contoh : var namavariabel;

Untuk menandakan akhir baris, maka untuk semua baris di JS harus diakhiri dengan tanda semi-colon (;). Jika tidak ditambahkan tanda semi-colon maka hasilnya tidak sesuai dengan yang diinginkan.

Teknik pemberian nama variabel diantaranya adalah :

1. Camel Case, yaitu teknik untuk nama variabel yang lebih dari satu kata akan digabungkan tanpa garis bawah dan setiap huruf pertama dari tiap kata dituliskan dalam huruf kapital. Contoh: NamaLengkap, namaLengkap, namaLengkap Siswa dan sebagainya.

2. Notasi Hungaria, yaitu diawal dari nama variabel akan ditambahkan tipe data yang ditampungnya, seterusnya dapat menggunakan notasi camel case. Contoh: stringNama Lengkap, strNamaLengkap, intUmur, dan sebagainya.

3. Variabel, dengan nama lebih dari satu kata dapat juga dibuat dengan menambahkan garis bawah sebagai penghubung antar katanya. Contoh: Nama_ Lengkap, nama_Lengkap, nama_lengkap, dan sebagainya.

Mengenal variabel artinya juga harus mengenal tipe data. Setiap variabel memiliki tipe data yang berbeda. Tipe data tergantung dari data yang dimasukkan atau diminta Berikut adalah jenis-jenis tipe data pada Javascript:

2. Operator

Operator adalah simbol matematika yang mengoperasikan dua nilai (variabel yang memiliki nilai) dan mendapatkan nilai baru. Beberapa contoh operator pada Javascript adalah :

3. Kondisional

Yaitu struktur kode yang memungkinkan untuk menguji apakah ekspresi mengembalikan nilai yang benar atau tidak, lalu menjalankan perintah lain

tergantung pada hasilnya.

IF

Bentuk umum dari kondisional adalah if....else.

Bentuk if tunggal

Format lainnya yang dapat digunakan untuk menerima kondisi yang tidak sesuai :

Untuk kondisi yang lebih dari satu dapat juga dibuat menggunakan format berikut :

Contoh :

Switch

Selain IF, Switch juga merupakan bentuk lain dari percabangan. Switch berguna akan ditentukan memiliki nilai tertentu. Format dari switch

apabila kondisi yang adalah sebagai berikut :

4. Fungsi

Functions dapat digunakan berkali-kali, jika ingin menggunakannya kembali maka dapat dengan cara memanggil nama fungsi nya dan tidak harus dengan menulis semua kodenya lagi setiap akan menggunakannya kembali.

Contoh :

Tampilan pada browser:

Fungsi alert() berfungsi untuk membuat pop-up terlihat pada jendela browser, perlu memberikan string sebagai sebuah argumen untuk mengatakan pada fungsi alert() tentang pesan apa yang akan ditampilkan pada pop-up.

5. Events

Events digunakan untuk hal yang lebih interaktif dalam website. Contoh yang sering dijumpai adalah click event, yaitu suara akan muncul di browser ketika tombol di klik oleh mouse. Contoh:

C. TUGAS MANDIRI (5 SOAL URAIAN)

Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!

1. Buatlah analisa tentang cara mendeklarasikan variable di javascript!

2. Buatlah contoh program Javascript yang menerapkan variabel pada dokumen HTML !

3. Buatlah analisa tentang operator pada Javascript!

4. Buatlah contoh program Javascript yang menerapkan operator pada dokumen HTML!

5. Buatlah analisa tentang cara membuat fungsi di javascript?

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. Buatlah analisa tentang konsep web interaktif !

2. Jelaskan perbedaan antara IF dengan SWITCH pada Javascript!

3. Lengkapilah program dibawah ini untuk mendapatkan tampilan seperti yang diinginkan :

4. Buatlah analisa dari program diatas dengan berdiskusi bersama anggota kelompok!

5. Buatlah kesimpulan dan presentasikan bersama anggota kelompok didepan kelas!

E. UJI KOMPETENSI

PILIHAN GANDA

Berilah tanda silang (X) pada pilihan jawaban yang benar!

1. Cara menulis "Hello World" di kotak peringatan yang benar adalah...

A. alertbox ("hello world");

B. msg ("hello world");

C. alert ("hello world");

D. msgbox("hello world");

E. javascript("hello world");

2. Cara membuat fungsi dalam JavaScript yang benar adalah...

A. function myFunction()

B. function:myFunction()

C. function-myFunction()

D. function var myFunction()

E. function_myFunction()

3. Cara memanggil fungsi bernama "myFunction" yang benar adalah...

A. call function myFunction()

B. myFunction()

C. function myFunction()

D. var myFunction()

E. myFunction()

4. Cara menulis pernyataan IF di JavaScript yang benar adalah.....

A. if (i == 5)

B. ifi== 5 then

C. ifi 5 then

D. ifi=5

E. if i(i =5)

5. Cara menulis pernyataan IF untuk mengeksekusi beberapa kode jika "i" adalah tidak sama dengan 5 adalah...

A. if (i = 5!)

B. ifi<> 5

C. if (i <> 5)

D. ifi! 5 then

E. if I i==5

6. Cara memulai perulangan dengan WHILE pada Javascript yang benar adalah...

A. while (i <= 10; i++)

B. while (i <= 10)

C. while i = 1 to 10

D. while I < 10

E. while i == 5

7. Cara memulai perulangan FOR pada Javascript yang benar adalah...

A. for (i = 0; i <= 5)

B. for (i = 0; i <= 5; i++)

C. for i = 1 to 5

D. for (i <= 5; i++)

E. for i = 5

8. Cara yang benar untuk menulis array JavaScript adalah...

A. var colors = ["merah", "hijau", "biru"];

B. var colors = "merah", "hijau", "biru";

C. var colors = (1: "merah", 2: "hijau", 3: "biru");

D. var colors = 1 = (“merah"), 2 = ("hijau"), 3 = (“biru");

E. var colors = merah, hijau, biru;

9. Cara membuat menggenapkan jumlah 7,25 ke integer terdekat adalah dengan...

A. round (7.25)

B. rnd (7.25)

C. math.round (7.25)

D. math.rnd (7.25)

E. math.ceil(7.25)

10. Cara menemukan nomor dengan nilai tertinggi x dan y adalah...

A. ceil (x, y)

B. top (x, y)

C. math.max (x, y)

D. math.ceil (x, y)

E. max.value(x,y)

11. Sintaks JavaScript yang benar untuk membuka jendela baru yang disebut "w2" adalah...

A. w2 = window.open("http://www.w3schools.com");

B. w2 = window.new("http://www.w3schools.com");

C. w2 = window.close("http://www.w3schools.com");

D. w2 = window.tab("http://www.w3schools.com");

E. w2 = window.popup("http://www.w3schools.com");

12. Cara mendeteksi nama browser klien adalah dengan...

A. client.navName

B. navigator.appName

C. browser.name

D. client.name

E. browser.appName

13. Cara mengontrol aksi yang terjadi ketika pengguna mengklik pada elemen HTML adalah...

A. onclick

B. onmouseover

C. onchange

D. onmouseclick

E. onhover

14. Hasil dari kode kembali: Boolean (10> 9) adalah...

A. false

B. true

C. nan

D. 1

E. Error

15. Di dalam sebuah kode script tertulis : <input type="button" value="Klik disini” onclick="klik()". Event yang digunakan dalam kode script tersebut adalah...

A. alert

B. confirm

C. document.write

D. onmouseout

E. onclick

16. Di dalam sebuah kode script terdapat tulisan : document.bgColor="blue". Arti dari kode tersebut adalah ...

A. memberikan warna biru pada background page

B. memberikan warna biru pada tulisan di page

C. memberikan warna tulisan pada setiap dokumen

D. memberikan warna biru pada link dokumen

E. memberikan warna biru pada link dari halaman web

17. Di dalam sebuah kode script terdapat tulisan : document.fgColor="blue". Arti dari kode tersebut adalah ...

A. memberikan warna biru pada background page

B. memberikan warna biru pada tulisan di page

C. memberikan warna tulisan pada setiap dokumen

D. memberikan warna biru pada link dokumen

E. memberikan warna biru pada link dari halaman web

18. Fungsi yang digunakan untuk mengubah satu nilai dari suatu variabel menjadi bilangan desimal adalah...

A. parseInt()

B. eval=(nama variabel)

C. window close

D. parseFloat()

E. window.prompt

19. Fungsi yang digunakan untuk mengubah satu nilai dari suatu variabel menjadi bilangan bulat adalah...

A. parseInt()

B. eval=(nama variabel)

C. window close

D. parseFloat()

E. window.prompt

20. Di dalam Javascript kita hanya memanipulasi empat jenis data, dibawah ini yang bukan merupakan keempat jenis data tersebut adalah...

A. jenis data fungsi

B. jenis data bilangan (integer atau float)

C. jenis data kata (string)

D. jenis data boolean (true/false)

E. jenis data null (tidak ada data didalamnya)

MENJODOHKAN

Lengkapilah titik-titik pada program tersebut dengan memilih jawaban pada kotak jawaban untuk mendapatkan output yang benar!

Terdapat script sebagai berikut: (untuk soal no 1-4)

Lengkapilah tabel di bawah ini: (soal no 5-10)

Kotak Pilihan Jawaban