A. Sekilas Tentang Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi

klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai

contoh, dengan menggunakan Javascript dimungkinkan untuk memvalidasi masukan-masukan

pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan

merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa

dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil

kompilasinyalah yang dijalankan oleh klien.

B. Struktur Javascript

Struktur dari Javascript adalah sebagai berikut :

Keterangan :

Kode umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali

Javascript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan

pada jendela browser.

C. Letak Penulisan Javascript dalam HTML

Skrip Javascript dalam dokumen HTML dapat diletakkan pada :

1. Bagian Head

2. Bagian Body (Jarang Digunakan)

3. Eksternal File

Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil

berdasarkan trigger pada event tertentu. Peletakan skrip di head akan menjamin skrip di-load

terlebih dahulu sebelum digunakan (dipanggil).

Skrip akan dieksekusi ketika halaman di-load sampai di bagian . Ketika menempatkan skrip pada bagian berarti antara isi dan Javascript dijadikan satu bagian. Jumlah Javascript di dan yang ditempatkan pada dokumen kita tak terbatas.

Eksternal File Terkadang kita ingin menjalankan Javascript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang skrip yang diinginkan di setiap halaman. Untuk menggunakan external Javascript (.js), dipakai atribut src pada tag pada halaman HTML-nya. Contoh File Javascript: eksternalfile.js

D. Penulisan Code

1. Semicolon (;)! Digunakan untuk memisah setiap baris yg dijalankan di Javascript. 2. Code Block! Sekelompok baris di Javascript dapat di group menggunakan function() 3. Case-Sensitive! Penulisan code di JavaScript harus memperhatikan capital suatu huruf,

karena menyebabkan suatu perintah tidak berjalan jika tidak sesuai. 4. White Space! Di Javascript tidak memperhatikan spasi dalam penulisan baris kode.

E. Latihan

1.

Buatlah sebuah fungsi untuk mengecek status pernikahan dengan menggunakan radio

button. Fungsi akan dijalankan jika element radio button mendapat event klik dari user.

2. Buatlah sebuah text area dan tombol, yang jika tombol di-klik akan menampilkan pesan :

- Bilangan tersebut adalah bilangan ganjil (bila input merupakan bilangan ganjil).

- Bilangan tersebut adalah bilangan genap (bila input merupakan bilangan genap).

- Bilangan yang dimasukkan bukan angka (bila input bukan merupakan angka).

function ckMarital(status){ document.getElementById('txtStatus').innerHTML = status; } Sudah Menikah? : Sudah Belum Status : Tidak ditentukan

function testGanGen() { if(isNaN(document.getElementById("ganGen").value)) { alert("Maaf, masukan yang anda berikan bukan angka!"); } else { if (document.getElementById("ganGen").value%2==0) { alert("Bilangan yang Anda masukkan bernilai genap"); } else {

3. Buatlah sebuah confirm dialog yang jika tombol di-klik maka:

- Menampilkan teks Anda menekan tombol OK jika tombol OK di-klik.

- Menampilkan teks Anda menekan tombol Cancel jika tombol Cancel di-klik.

F. Tugas

Buatlah form dengan kode Javascript untuk melakukan pemeriksaan input user sebelum dikirim ke

server dengan ketentuan sebagai berikut:

- Nama : teks harus berupa String dan harus diisi.

- Alamat : teks harus berupa String dan harus diisi.

- Telepon : harus terdiri dari Angka, terdiri dari 6-8 karakter dan harus disii.

- Kota : teks harus berupa String dan harus diisi.

- Tgl lahir : terbuat dari 3 textbox: tgl (1-31), bulan (1-12), tahun (1930-1995) dan harus diisi.

- Pendidikan : Combobox (SD, SMP, SMA, D3, S1) dan harus diisi.

- Pengalaman : Textarea dan harus diisi.

- Tombol Kirim dan tombol Hapus.

alert("Bilangan yang Anda masukkan bernilai ganjil"); } } } Cek angka!!

function butConf(){ var nama = confirm ("Tekan Salah Satu Tombol"); if (nama == true) { alert("Anda menekan tombol OK"); } else { alert("Anda menekan tombol Cancel"); } } Click Me!!