Modul Webprog

JAVASCRIPT
6.1. Pengenalan Javascript

Javascript merupakan bahasa pemograman web yang bersifat Client Side
Programming Language (pemrosesan dilakukan oleh client / browser). Digunakan
untk membuat web menjadi interaktif dan dinamik
Kegunaan Javascript
1) Animasi sederhana
2) Validasi form inputan
3) Menampilkan pop up window
4) Menampilkan dialog konfirmasi
5) Menampilkan alert
6) Menangani event handler pada objek HTML
7) AJAX
8) Membuat halaman web yang interaktif
6.2. Penggunaan Javascript dalam Dokumen HTML

Javascript bisa dimasukkan ke dalam dokumen HTML di bagian <head> ataupun
<body> dengan menggunakan sintaks berikut
<script type=“text/javascript”>
Letakkan perintah javascript di sini
</script>
Selain itu javascript bisa dipisah ke dalam file tersendiri dengan extention .js.
Kemudian file .js ini dipanggil di dokumen HTML, bisa di dalam <head> ataupun
<body>
<script type=“text/javascript” src=“file.js”></script>
Penulisan perintah dalam javascript bersifat case sensitive. Penggunaan titik koma
(;) di akhir perintah bersifat optional
6.3. Variabel
Variabel berguna untuk menampung data, value atau informasi. Beberapa aturan
dalam pembuatan nama variable pada javascript :
1) Tidak boleh sama dengan reserved word
2) Bersifat case sensitive
3) Tidak boleh ada spasi
4) Diawali oleh huruf atau underscore
5) Boleh diawali dengan var, ataupun tidak. Contoh berikut ini sama-sama benar
x = 0;
var total = 100;
6.4. Operator
1) Operator Aritmatika
Operator Simbol Contoh
Penambahan + x=y+z
Pengurangan - x=y–z
Perkalian * x=y*z
Pembagian / x=y/z
2) Operator Logika
operator simbol Contoh
and && expr 1 && expr 2
or || expr 1 || expr 2
not ! !expr 1
3) Operator Perbandingan
operator simbol Contoh
samadengan == expr1 == expr2
tidak samadengan != expr1 != expr2
lebihbesar dari > expr1 > expr2
lebihbesar samadengan >= expr1 >= expr2
lebihkecil dari < expr1 < expr2
lebihkecil samadengan <= expr1 <= expr2
6.5. Komentar / Remark

Untuk menambahkan komentar dalam javascript, kita dapat menggunakan beberapa
bentuk berikut
 // , jika komentar hanya terdiri dari satu baris
 /* … */ , jika komentar lebih dari satu baris
6.6. Struktur Kondisi dan Perulangan

1) Struktur kondisi if
Bentuk umum
If (kondisi){
Statement jika kondisi true;
}
Keterangan
 Kondisi merupakan sebuah variabel atau statement yang akan dicek
nilai true atau false nya
 Jika kondisi bernilai true, akan mengerjakan statement di dalam blok if.
 Jika kondisi bernilai false, tidak akan mengerjakan apapun
2) Struktur kondisi if else

Bentuk umum
If (kondisi){
Statement jika kondisi true;
}else{
Statement jika kondisi false;
}
Keterangan
 Kondisi merupakan sebuah variabel atau statement yang akan dicek
nilai true atau false nya
 Jika kondisi bernilai true, akan mengerjakan statement di dalam blok if.
 Jika kondisi bernilai false, akan mengerjakan statement di dalam blok
else
3) Struktur kondisi switch case

Bentuk umum
Switch(variabel){
Case „1‟ : statement-1;break;
Case „2‟ : statement-2;break;
Case „n‟ : statement-n;break;
Default : statement-default;
}
Keterangan
 Variabel adalah variabel yang akan dicek isinya
4) Struktur perulangan For

Bentuk Umum
for(inisialisasi; kondisi; counter)
{
Statement-dikerjakan-selama-kondisi-true
}
Keterangan
 Inisialisasi : pemberian nilai awal variabel
 Kondisi : statement kondisi yang akan membatasi perulangan.
Perulangan akan berjalan terus selama kondisi bernilai true
 Counter : penambahan atau pengurangan nilai variabel agar
perulangan tetap berjalan
5) Struktur perulangan while

Bentuk Umum
inisialisasi
while(kondisi){
Statement-dikerjakan-selama-kondisi-true;
Counter;
}
Keterangan
6) Struktur perulangan do while

Bentuk umum
Inisialisasi
do{
Statement-dikerjakan-selama-kondisi-true;
counter
} while(kondisi)
Keterangan
6.7. Fungsi
Fungsi digunakan untuk modularisasi kode. Perintah yang sering digunakan,
dijadikan sebuah fungsi agar lebih mudah dipanggil.
Definisi sebuah fungsi
function nama_fungsi(argument1, argument2, …){
beberapa pernyataan;
}
Atau bisa juga sebagai berikut

function nama_fungsi(argument1, argument2, …){
beberapa pernyataan;
return argument2;
}
Setelah didefinisikan, sebuah fungsi bisa dipanggil dari bagian program lain. Di
bawah ini ilustrasi pendefinisian dan pemanggilan fungsi.
6.8. Alert dan Confirm Window

Alert window digunakan untuk menampilkan jendela pesan yang muncul di
browser.
Contoh : alert(„selamat datang di website kami);
Confirm window digunakan untuk menampilkan jendela konfirmasi yang
muncul di browser. Tombol yang tertera adalah OK dan CANCEL.
Contoh : confirm (“Apakah anda yakin akan keluar dari halaman ini?”)
6.9. Praktikum
1. Ketiklah 2 program berikut, kemudian jalankan file js1.html di browser
Program 6.1 js1.html
Pada baris ke 4 program di atas, dilakukan pemanggilan javascript external

dengan nama script.js sehingga kita harus membuat file script.js berikut
Program 6.2 script.js
Hasil jika file js1.html dijalankan di browser
Gerakkan kursor pada tulisan hapus, merah, hijau, kuning.
2. Apakah kegunaan onmouseover pada baris ke-20 program 6.1?
3. Ketiklah program berikut kemudian jalankan pada browser

Program 6.3 if.html
Hasilnya jika dijalankan pada browser
Isi sebuah nilai dan klik tombol ok

Program 6.4 ifelse.html

Program 6.5 for.html
Hasil program jika dijalankan pada browser

Program 6.6 while.html

Program 6.7 dowhile.html
8. Apakah perbedaan antara fungsi alert dan document.write pada program-

program di atas?
Program 6.8 fungsi.html
Rangkuman
Javascript memiliki banyak kegunaan pada sebuah website. Javascript bisa
diletakkan bersamaan di dokumen HTML dan dibuat menjadi file terpisah dengan
ekstention .js
Latihan
Program 6.9 nilai.html
2. Apa pesan yang muncul jika pada program 6.9 dimasukkan nilai-nilai berikut
Nilai Pesan yang muncul
85
100
46
73
12
38
60
3. Buatlah program untuk menginput panjang dan lebar sebuah persegi panjang
menggunakan prompt. Kemudian munculkan luas dan kelilingnya di browser.
4. Dengan menggunakan struktur for, buatlah deret bilangan berikut

 12 14 16 18 20 22 24
 3 6 9 12 15 18 21
 3 7 11 15 19 23 27
 2 4 6 8 10 12 14
5. Buatlah sebuah form inputan untuk menginput nilai awal dan nilai akhir. Di
dalam form juga terdapat sebuah tombol untuk mencetak bilangan genap.
Tampilkan bilangan genap antara nilai awal dan nilai akhir jika form tombol
tersebut diklik!
6. Apa yang dimaksud dengan framework javascript?
7. Apa kelebihan dan kekurangan menggunakan framework javascript?
8. Sebutkan beberapa framework javascript yang ada!

Modul Webprog

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Webprog

Diunggah oleh

Hak Cipta:

Format Tersedia

JAVASCRIPT

6.1. Pengenalan Javascript

6.2. Penggunaan Javascript dalam Dokumen HTML

Operator Simbol Contoh

operator simbol Contoh

and && expr 1 && expr 2

samadengan == expr1 == expr2

tidak samadengan != expr1 != expr2

lebihbesar dari > expr1 > expr2

lebihbesar samadengan >= expr1 >= expr2

lebihkecil dari < expr1 < expr2

lebihkecil samadengan <= expr1 <= expr2

6.5. Komentar / Remark

6.6. Struktur Kondisi dan Perulangan

2) Struktur kondisi if else

3) Struktur kondisi switch case

4) Struktur perulangan For

5) Struktur perulangan while

6) Struktur perulangan do while

Atau bisa juga sebagai berikut

6.8. Alert dan Confirm Window

Program 6.1 js1.html

Pada baris ke 4 program di atas, dilakukan pemanggilan javascript external

Hasil jika file js1.html dijalankan di browser

Gerakkan kursor pada tulisan hapus, merah, hijau, kuning.

2. Apakah kegunaan onmouseover pada baris ke-20 program 6.1?

3. Ketiklah program berikut kemudian jalankan pada browser

Isi sebuah nilai dan klik tombol ok

4. Ketiklah program berikut kemudian jalankan pada browser

5. Ketiklah program berikut kemudian jalankan pada browser

Hasil program jika dijalankan pada browser

7. Ketiklah program berikut kemudian jalankan pada browser

8. Apakah perbedaan antara fungsi alert dan document.write pada program-

4. Dengan menggunakan struktur for, buatlah deret bilangan berikut

6. Apa yang dimaksud dengan framework javascript?

7. Apa kelebihan dan kekurangan menggunakan framework javascript?

8. Sebutkan beberapa framework javascript yang ada!

Anda mungkin juga menyukai