Modul ini membahas dasar-dasar JavaScript meliputi definisi, variabel, operator, komentar, fungsi-fungsi dasar matematika dan string, penggunaan tabel dan menu option, serta teknik seleksi data menggunakan radio button. JavaScript memungkinkan pengolahan data interaktif di dalam browser menggunakan komponen dasar HTML dan fungsi-fungsi pemrograman seperti di Java.

1. Modul-6 :
Java Script (1)
Dasar javascript,variabel , manipulasi
string, fungsi matematis, table dan
menu option
Modul -6 : Java Script (1) 1

2. Dalam modul ini akan dipelajari:
1. Definisi Java Script
2. Statemen write()
3. Data,variabel dan operator
4. Comentar dan case
5. Fungsi tanggal, string dan
matematis
6. Table dan menu
7. Seleksi dengan radio
Modul -6 : Java Script (1) 2

3. 1. Definisi Java Script
 Java script adalah suatu script yang diinsetkan kedalam HTML sebagai script
 Browser yang mengenal javaScript akan menterjemahkan kode-kode java dan
hasilnya ditampilkan menyatu dengan kode-kode HTML
 Java Script bekerja pada sisi clen (yaitu pada browser)
 Tag HTML untuk memperkenalkan bahwa kode-kode adalah java script adalah :
<Script Language=Javascript>
isi kode java script
</Script>
 Isi kode java script dapat berupa statemen-statemen java script yang tidak
sepenuhnya sama dengan statemen java
Modul -6 : Java Script (1) 3

4. 2. Mencetak ke dalam dokumen
 Dalam java jika kita akan mencetak kelayar akan menggunakan
System.out.println() jika dalam modus command line, atau
g.drawString(string,x,y) jika dalam modus window
 Dalam java Script kita menggunakan document.write(teks)
 teks : dapat berupa string, variabel atau tag HTML
Klik-klik untuk
detail efek !
Modul -6 : Java Script (1) 4

5. 3. Data, variabel dan Operator
OPERATOR : Operator aritmetika (*,/,+,-) dan logika(<,><=,>=,!=, &&,
|| dan !) sama persis dengan program java
VARIABEL :
Dalam java Script variable cukup dideklarasikan dengan var (tidak harus).
Tidak dibedakan apakah variabel itu bilangan(int, float) atau string.
Contoh : var A=10; var B=”JOKO” , atau cukup A=10; B=”JOKO”
Klik lihat hasil
demo
Modul -6 : Java Script (1) 5

6. 4. Komentar dan Case
 Komentar dalam Java Script
sama dengan dalam Java, yaitu
Klik lihat
menggunakan : // atau /*
contoh
// ini komentar
/* komentar
komentar
*/
 Masalah case juga sama dengan Klik untuk
Java, dimana huruf Besar lihat hasilnya
dengan huruf kecil dibedakan :
A=10; dan a=5; adalah dua
variabel yang berbeda
Modul -6 : Java Script (1) 6

7. 5. Fungsi Tanggal dan waktu
 Membuat objek tanggal dengan
new Date()
 Beberapa fungsi tanggal:
getDay() = angka hari
getDate() = angka tanggal
getMonth() =angka bulan
0,1,..,11
getYear() = angka tahun
 Untuk mengakses jam :
getHours() Klik untuk
getMinutes() lihat hasilnya
getSeconds()
demo
Modul -6 : Java Script (1) 7

8. Fungsi-fungsi string dan table
 Operasi penggabungan string
dilakukan dengan +
Klik contoh
 Suatu string dalam JavaScript
dapat berfungsi sebagai TAG program
HTML yang memilii efek pada
tampilan
 Efek tampilan itu misalnya untuk
membaut table dengan tag
 <table> ..<table><tr>.,</tr> dan
<td></td>
 Fungsi string : substring(awal,
akhir)
 Fungsi string : length = (panjang
string)
Demo program
Modul -6 : Java Script (1) 8

9. Fungsi-fungsi matematis
 Fungsi-fungsi matematis
dalam java script masih
sama dengan dalam Java,
yaitu menggunakan class
Math
 Contoh:
 Math.random() = bilangan
acak >0 dan <1 hasil
 Math.sin(sudut radian) =
mencari sinus
 Math.cos(sudut radian) =
mencari cosinus
 Math.exp(x) = e^x
 Math.log(x) = e log x
 Math.sqrt(x) = akar dari x
demo
Modul -6 : Java Script (1) 9

10. Masukan data dari form
 Masukan data dari form
diawali dengan
mendefinisikan form dengan
tag <form name=…>
 Selanjutnya dalam form
dapat diletakkan komponen
GUI seperti TextField atau
button dengan:
<input type=…>
 Pada button didefinisikan
kode javascript yang akan Klik lihat hasil
mengambil data dari form
dan memprosesnya
 Hasil proses ditampilkan
kembali melalui form
demo
Modul -6 : Java Script (1) 10

11. 6. Seleksi dengan menu OPTION
 Untuk menu opsi digunakan tag :
 <SELECT NAME=namaMenu>
 Dilengkapi dengan pilihan Klik lihat
<OPTION value=“nilai pilihan”> hasil
jika salah satu pilihan dijadikan terpilih
maka digunakan kata kunci
SELECTED
Jika OK
di klik
Modul -6 : Java Script (1) 11

12. 7. Seleksi dengan radio
 Seleksi dengan radio adalah alternatif pada pilihan tunggal
seperti menu
 Definisi komponen radio :
<input type=radio name=name value=nilai
onClick=namafungsi(value)>
 Seleksi radio mana yang dipilih dengan :
 seleksi dilakukan dalam fungsi javaScript , misalnya
 Nama fungsi adalah : pilih(value)
 Dalam definisi javaScript
function pilih(arg)
{if(arg=value1) tindakan1
if(arg=value2) tindakan2
}
CONTOH:
Radio untuk menyeleksi warna latar belakang layar
Modul -6 : Java Script (1) 12

13. Seleksi dengan radio (lanjutan…)
Klik untuk lihat hasil
Jika Jika radio
radio MERAH
MAGENTAdiklik
KUNING diklik
diklik
Modul -6 : Java Script (1) 13

14. Seleksi dengan radio (komponennya)
Modul -6 : Java Script (1) 14

15. Rangkuman
 Java script memungkinkan kita membuat pengolahan
data dengan program java, variabel dan fungsi-fungsi
standard seperti Math, string dipadukan dengan input
data dari HTML form
 Java script tetap bersifat case sensitif seperi java
 Java script lebih longgar memformat variabel dari
pada java
 Teknik java script dibuat dengan dasar pemikiran :
 Komponen seperti FORM, GUI, TEXTFIELD,
BUTTON dan TABLE atau MENU dengan HTML
sedangankan fungsi-fungsi pengolah data dengan java
Script
 Harus hati-hati dan cermat masalah case, karena
HTML sendiri tidak bersifatr “case sensitive”
sebagaimana javaScript
Modul -6 : Java Script (1) 15

16. Latihan
1. Buatlah suatu formulir untuk membaca data Nama dan alamat
dengan table dan Textfield. Sediakan satu TextFiled dan dua
button. Jika tombol Baca di klik definisikan fungsi javaScript
untuk membaca nama dan alamat dan menampilkan dalam
kotak hasil. Jika tombol Hapus di klik formluir bersih kembali.
Lihat tampilan berikut
Modul -6 : Java Script (1) 16