Modul Javascript

BENGKEL INTERNET PENS-ITS
1
MATERI III
JAVASCRIPT

Tujuan :
1. Memahami tentang struktur javascript
2. Memahami tentang pemrograman di javascript
3. Memahami tentang pemakaian obyek dan form

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 J avaScript dimungkinkan untuk memvalidasi masukan-
masukan pada formulir sebelum formulir dikirimkan ke server.
Javascript bukanlah bahasa J ava dan merupakan dua bahasa yang berbeda. J avascript
diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode J ava
dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

B. Struktur JavaScript
Struktur dari J avaScript adalah sbb :
<SCRIPT LANGUAGE = JavaScript>
<!- -
Penulisan kode javascript
// - - >
</SCRIPT>

Keterangan :
Kode <!- - // - - >umumnya disertakan dengan tujuan agar sekiranya browser tidak
mengenali J avaScript maka browser akan memperlakukannya sebagai komentar sehingga
tidak ditampilkan pada jendela browser.

C. JavaScript sebagai bahasa berorientasi pada obyek
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.
Penulisan :
Nama_objek.nama_properti =nilai
window.defaultStatus =Selamat Belajar J avaScript;

Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (Hallo)

D. Letak JavaScript dalam HTML
Skrip J avascript dalam dokumen HTML dapat diletakkan pada :
1. Bagian Head
2. Bagian Body (jarang digunakan).

2
LATIHAN LATIHAN :
A. DASAR-DASAR JAVASCRIPT
1. Pemakaian alert sebagai property window

2. Pemakaian metode dalam objek.

3. Pemakaian prompt

<HTML>
<HEAD>
<TI TLE>Al er t Box</ TI TLE>
</ HEAD>
<BODY>
<SCRI PT LANGUAGE = " J avaScr i pt " >
<! - -
wi ndow. al er t ( " I ni mer upakan pesan unt uk Anda" ) ;
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
<HTML>
<HEAD>
<TI TLE>Skr i p J avaScr i pt </ TI TLE>
</ HEAD>
<BODY>
Per cobaan memakai J avaScr i pt : 
<! - -
document . wr i t e( " Sel amat Mencoba J avaScr i pt " ) ;
document . wr i t e( " Semoga sukses! " ) ;
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
<HTML>
<HEAD>
<TI TLE>Pemasukan Dat a</ TI TLE>
</ HEAD>
<BODY>
<! - -
var nama = pr ompt ( " Si apa nama Anda?" , " Masukkan nama anda" ) ;
document . wr i t e( " Hai , " + nama) ;
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
3
4. Pembuatan fungsi dan cara pemanggilannya

B. DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT
1. Operasi dasar aritmatika

<HTML>
<HEAD>
<TI TLE>Cont oh Pr ogr amJ avascr i pt </ TI TLE>
</ HEAD>
<SCRI PT l anguage=" J avascr i pt " >
f unct i on pesan( ) {
al er t ( " memanggi l j avascr i pt l ewat body onl oad" )
}
</ SCRI PT>
<BODY onl oad=pesan( ) >
</ BODY>
</ HTML>
<HTML>
<HEAD>
</ HEAD>
f unct i on t est ( val 1, val 2)
{
document . wr i t e( " " +" Per kal i an : val 1*val 2 " +" " )
document . wr i t e( val 1*val 2)
document . wr i t e( " " +" Pembagi an : val 1/ val 2 " +" " )
document . wr i t e( val 1/ val 2)
document . wr i t e( " " +" Penj uml ahan : val 1+val 2 " +" " )
document . wr i t e( val 1+val 2)
document . wr i t e( " " +" Pengur angan : val 1- val 2 " +" " )
document . wr i t e( val 1- val 2)
document . wr i t e( " " +" Modul us : val 1%val 2 " +" " )
document . wr i t e( val 1%val 2)
}
</ SCRI PT>
<BODY>

</ BODY>
</ HTML>
4
2. Operasi relational

3. Seleksi kondisi (if..else)

<HTML>
<HEAD>
</ HEAD>
f unct i on t est ( ) {
val 1=wi ndow. pr ompt ( " Ni l ai I : " )
val 2=wi ndow. pr ompt ( " Ni l ai I I : " )
document . wr i t e( " " +" val 1==val 2" +" " )
document . wr i t e( val 1==val 2)
document . wr i t e( " " +" val 1! =val 2" +" " )
document . wr i t e( val 1! =val 2)
document . wr i t e( " " +" val 1&gt val 2" +" " )
document . wr i t e( val 1>val 2)
document . wr i t e( " " +" val 1&l t val 2" +" " )
document . wr i t e( val 1<val 2) }
</ SCRI PT>
<BODY>

</ BODY>
</ HTML>
<HTML>
<HEAD>
<TI TLE>Cont oh i f - el se</ TI TLE>
</ HEAD>
<BODY>
<! - -
var ni l ai = pr ompt ( " Ni l ai ( 0- 100) : " , 0) ;
var hasi l = " " ;
i f ( ni l ai >= 60)
hasi l = " Lul us" ;
el se
hasi l = " Ti dak Lul us" ;
document . wr i t e( " Hasi l : " + hasi l ) ;
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
5
4. Penggunaan operator switch untuk seleksi kondisi

5. Pemakaian looping <for >

<HTML>
<HEAD>
</ HEAD>
f unct i on t est ( )
{
val 1=wi ndow. pr ompt ( " I nput Ni l ai ( 1- 5) : " )
swi t ch ( val 1)
{
case " 1" :
document . wr i t e( " bi l angan sat u" )
br eak
case " 2" :
document . wr i t e( " bi l angan dua" )
br eak
case " 3" :
document . wr i t e( " bi l angan t i ga" )
br eak
case " 4" :
document . wr i t e( " bi l angan empat " )
br eak
case " 5" :
document . wr i t e( " bi l angan l i ma" )
br eak
def aul t :
document . wr i t e( " bi l angan l ai nnya" )
}
}
</ SCRI PT>
<BODY>

</ BODY>
</ HTML>
<HTML>
<HEAD>
</ HEAD>
<BODY>
<! - -
f or ( x=0; x<=10; x++)
document . wr i t e( x+" " )
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
6
6. Pemakaian looping <do..while >

7. Pemakaian looping <while >

<HTML>
<HEAD>
</ HEAD>
<BODY>
<! - -
var x=0
do{
x++;
}
whi l e ( x<=10)
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
<HTML>
<HEAD>
</ HEAD>
<BODY>
<! - -
var x=0
whi l e ( x<=10) {
x++;
}
/ / - - >
</ SCRI PT>
</ BODY>
</ HTML>
7
C. PEMBUATAN FORM
1. Form input :

2. Form button :

<ht ml >
<head> </ head>
f unct i on t est ( ) {
var val 1=document . ki r i m. T1. val ue
i f ( val 1%2==0)
document . ki r i m. T2. val ue=" bi l angan genap"
el se
document . ki r i m. T2. val ue=" bi l angan ganj i l "
}
</ SCRI PT>
<body>
<f or mmet hod=" POST" name=" ki r i m" >
BI L 
MERUPAKAN BI L 



</ f or m>
</ body>
</ ht ml >
<HTML>
<HEAD>
<TI TLE>Obj ek document </ TI TLE>
</ HEAD>
<BODY>
<! - -
f unct i on ubahWar naLB( war na) {
document . bgCol or = war na;
}
f unct i on ubahWar naLD( war na) {
document . f gCol or = war na;
}
/ / - - >
</ SCRI PT>
<H1>TES</ H1>
<FORM>

VALUE = " Lat ar Bel akang Put i h"
onCl i ck = " ubahWar naLB( ' WHI TE' ) " >
VALUE = " Teks Kuni ng"
onCl i ck = " ubahWar naLD( ' YELLOW' ) " >
VALUE = " Teks Bi r u"
onCl i ck = " ubahWar naLD( ' BLUE' ) " >
</ FORM>
8

TUGAS :
1.
Buat halaman html untuk mengkonversi nilai angka menjadi nilai huruf dengan
menggunakan javascript (contoh seperti C.1.)

Konversi :
0-40 =E
41-55=D
56-60=C
61-65=BC
66-70=B
71-80=AB
81-100=A

2.
Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan
menggunakan javascript.

Contoh tampilan :

Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol +atau atau x atau /
ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan
operasi arithmetic sesuai dengan tombol yang ditekan.

<! - -
document . wr i t e( " Di modi f i kasi t er akhi r pada " +
document . l ast Modi f i ed) ;
/ / - - >
</ SCRI PT>

</ BODY>
</ HTML>

Modul Javascript

Diunggah oleh

Informasi Dokumen

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 Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

BENGKEL INTERNET PENS-ITS

Anda mungkin juga menyukai