SCRIPT language="Javascript"

41
M.K. Pemrograman Web (AK- 045216)

Transcript of SCRIPT language="Javascript"

Page 1: SCRIPT language="Javascript"

MK Pemrograman Web (AK-045216)

Pengenalan JavaScript Asal mula nama JavaScript adalah LiveScript dikembangkan

pertama kali pada tahun 1995 di Netscape Communications Hasil kolaborasi antara Netscape dan Sun (pengembang bahasa

pemrograman ldquoJavardquo ) memberikan nama baru ldquoJavaScriptrdquo pada tanggal 4 desember 1995

Bahasa ini dikenali pada browser Netscape Navigator mulai versi di atas 20 sedangkan Microsoft melengkapi Internet Explorer dengan JavaScript mulai versi 30 ke atas

JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses pada sisi klien sehingga kemampuan dokumen HTML menjadi lebih luas JavaScript memungkinkan untuk memvalidasi masukan-masukan pada

formulir sebelum dikirim ke server JavaScript dapat mengimplementasi permainan interaktif

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript yang terselip di dalam dokumen HTML

Javascript tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya

2

Perbedaan JavaScript dan Pemrograman Java

JavaScript sendiri merupakan bahasa yang mudah dipahami karena memiliki kemiripan dengan konsep bahasa pemrograman visual maupun Java ataupun C

JavaScript adalah bahasa yang ldquocase sensitiverdquo artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil

Seperti bahasa Java ataupun C setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma ()

3

Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)

Skrip dari JavaScript terletak di dalam dokumen HTML ltSCRIPT language=Javascriptgt

letakkan script anda disini ltSCRIPTgt

Pada navigator versi lama sebelum adanya JavaScript tidak mengenal tag tersebut dan akan melewatkannya untuk di baca Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program

ltSCRIPT language=Javascriptgt lt-- letakkan script anda disini --gt ltSCRIPTgt

Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash semua karakter di belakang tidak akan di eksekusi

Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter dan Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator

4

Meletakkan JavaScript dalam dokumen HTML Menggunakan tag ltSCRIPTgt

Tag ltSCRIPTgt diletakkan diantara bagian kepala dari dokumen HTML yaitu bagian antara tag ltHEADgt dan ltHEADgt Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag ltBODYgt dan ltBODYgt

Keterangan tambahan di dalam tag ltSCRIPTgt menunjukkan jenis bahasa yang digunakan dan versinya contohnya ldquoJavaScriptldquo ldquoJavaScript11ldquoldquoJavaScript12ldquo untuk bahasa JavaScript

Contoh ltHTMLgt ltHEADgt ltTITLEgtContoh Program JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt-- alert(Hallo )

--gt ltSCRIPTgt ltBODYgt ltHTMLgt

5

Meletakkan JavaScript dalam dokumen HTML Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas)

ltSCRIPT LANGUAGE=Javascript SRC=urlfilejsgt ltSCRIPTgtdimana urlfilejs adalah adalah lokasi dan nama file yang berisi kode JavaScript jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script

Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh

user contohnya seperti klik tombol mouse lttag eventHandler=kode Javascript yang akan dimasukkangt

dimana eventHandler adalah nama dari event tersebut

6

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 2: SCRIPT language="Javascript"

Pengenalan JavaScript Asal mula nama JavaScript adalah LiveScript dikembangkan

pertama kali pada tahun 1995 di Netscape Communications Hasil kolaborasi antara Netscape dan Sun (pengembang bahasa

pemrograman ldquoJavardquo ) memberikan nama baru ldquoJavaScriptrdquo pada tanggal 4 desember 1995

Bahasa ini dikenali pada browser Netscape Navigator mulai versi di atas 20 sedangkan Microsoft melengkapi Internet Explorer dengan JavaScript mulai versi 30 ke atas

JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses pada sisi klien sehingga kemampuan dokumen HTML menjadi lebih luas JavaScript memungkinkan untuk memvalidasi masukan-masukan pada

formulir sebelum dikirim ke server JavaScript dapat mengimplementasi permainan interaktif

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript yang terselip di dalam dokumen HTML

Javascript tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya

2

Perbedaan JavaScript dan Pemrograman Java

JavaScript sendiri merupakan bahasa yang mudah dipahami karena memiliki kemiripan dengan konsep bahasa pemrograman visual maupun Java ataupun C

JavaScript adalah bahasa yang ldquocase sensitiverdquo artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil

Seperti bahasa Java ataupun C setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma ()

3

Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)

Skrip dari JavaScript terletak di dalam dokumen HTML ltSCRIPT language=Javascriptgt

letakkan script anda disini ltSCRIPTgt

Pada navigator versi lama sebelum adanya JavaScript tidak mengenal tag tersebut dan akan melewatkannya untuk di baca Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program

ltSCRIPT language=Javascriptgt lt-- letakkan script anda disini --gt ltSCRIPTgt

Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash semua karakter di belakang tidak akan di eksekusi

Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter dan Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator

4

Meletakkan JavaScript dalam dokumen HTML Menggunakan tag ltSCRIPTgt

Tag ltSCRIPTgt diletakkan diantara bagian kepala dari dokumen HTML yaitu bagian antara tag ltHEADgt dan ltHEADgt Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag ltBODYgt dan ltBODYgt

Keterangan tambahan di dalam tag ltSCRIPTgt menunjukkan jenis bahasa yang digunakan dan versinya contohnya ldquoJavaScriptldquo ldquoJavaScript11ldquoldquoJavaScript12ldquo untuk bahasa JavaScript

Contoh ltHTMLgt ltHEADgt ltTITLEgtContoh Program JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt-- alert(Hallo )

--gt ltSCRIPTgt ltBODYgt ltHTMLgt

5

Meletakkan JavaScript dalam dokumen HTML Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas)

ltSCRIPT LANGUAGE=Javascript SRC=urlfilejsgt ltSCRIPTgtdimana urlfilejs adalah adalah lokasi dan nama file yang berisi kode JavaScript jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script

Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh

user contohnya seperti klik tombol mouse lttag eventHandler=kode Javascript yang akan dimasukkangt

dimana eventHandler adalah nama dari event tersebut

6

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 3: SCRIPT language="Javascript"

Perbedaan JavaScript dan Pemrograman Java

JavaScript sendiri merupakan bahasa yang mudah dipahami karena memiliki kemiripan dengan konsep bahasa pemrograman visual maupun Java ataupun C

JavaScript adalah bahasa yang ldquocase sensitiverdquo artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil

Seperti bahasa Java ataupun C setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma ()

3

Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)

Skrip dari JavaScript terletak di dalam dokumen HTML ltSCRIPT language=Javascriptgt

letakkan script anda disini ltSCRIPTgt

Pada navigator versi lama sebelum adanya JavaScript tidak mengenal tag tersebut dan akan melewatkannya untuk di baca Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program

ltSCRIPT language=Javascriptgt lt-- letakkan script anda disini --gt ltSCRIPTgt

Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash semua karakter di belakang tidak akan di eksekusi

Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter dan Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator

4

Meletakkan JavaScript dalam dokumen HTML Menggunakan tag ltSCRIPTgt

Tag ltSCRIPTgt diletakkan diantara bagian kepala dari dokumen HTML yaitu bagian antara tag ltHEADgt dan ltHEADgt Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag ltBODYgt dan ltBODYgt

Keterangan tambahan di dalam tag ltSCRIPTgt menunjukkan jenis bahasa yang digunakan dan versinya contohnya ldquoJavaScriptldquo ldquoJavaScript11ldquoldquoJavaScript12ldquo untuk bahasa JavaScript

Contoh ltHTMLgt ltHEADgt ltTITLEgtContoh Program JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt-- alert(Hallo )

--gt ltSCRIPTgt ltBODYgt ltHTMLgt

5

Meletakkan JavaScript dalam dokumen HTML Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas)

ltSCRIPT LANGUAGE=Javascript SRC=urlfilejsgt ltSCRIPTgtdimana urlfilejs adalah adalah lokasi dan nama file yang berisi kode JavaScript jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script

Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh

user contohnya seperti klik tombol mouse lttag eventHandler=kode Javascript yang akan dimasukkangt

dimana eventHandler adalah nama dari event tersebut

6

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 4: SCRIPT language="Javascript"

Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)

Skrip dari JavaScript terletak di dalam dokumen HTML ltSCRIPT language=Javascriptgt

letakkan script anda disini ltSCRIPTgt

Pada navigator versi lama sebelum adanya JavaScript tidak mengenal tag tersebut dan akan melewatkannya untuk di baca Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program

ltSCRIPT language=Javascriptgt lt-- letakkan script anda disini --gt ltSCRIPTgt

Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash semua karakter di belakang tidak akan di eksekusi

Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter dan Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator

4

Meletakkan JavaScript dalam dokumen HTML Menggunakan tag ltSCRIPTgt

Tag ltSCRIPTgt diletakkan diantara bagian kepala dari dokumen HTML yaitu bagian antara tag ltHEADgt dan ltHEADgt Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag ltBODYgt dan ltBODYgt

Keterangan tambahan di dalam tag ltSCRIPTgt menunjukkan jenis bahasa yang digunakan dan versinya contohnya ldquoJavaScriptldquo ldquoJavaScript11ldquoldquoJavaScript12ldquo untuk bahasa JavaScript

Contoh ltHTMLgt ltHEADgt ltTITLEgtContoh Program JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt-- alert(Hallo )

--gt ltSCRIPTgt ltBODYgt ltHTMLgt

5

Meletakkan JavaScript dalam dokumen HTML Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas)

ltSCRIPT LANGUAGE=Javascript SRC=urlfilejsgt ltSCRIPTgtdimana urlfilejs adalah adalah lokasi dan nama file yang berisi kode JavaScript jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script

Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh

user contohnya seperti klik tombol mouse lttag eventHandler=kode Javascript yang akan dimasukkangt

dimana eventHandler adalah nama dari event tersebut

6

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 5: SCRIPT language="Javascript"

Meletakkan JavaScript dalam dokumen HTML Menggunakan tag ltSCRIPTgt

Tag ltSCRIPTgt diletakkan diantara bagian kepala dari dokumen HTML yaitu bagian antara tag ltHEADgt dan ltHEADgt Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag ltBODYgt dan ltBODYgt

Keterangan tambahan di dalam tag ltSCRIPTgt menunjukkan jenis bahasa yang digunakan dan versinya contohnya ldquoJavaScriptldquo ldquoJavaScript11ldquoldquoJavaScript12ldquo untuk bahasa JavaScript

Contoh ltHTMLgt ltHEADgt ltTITLEgtContoh Program JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt-- alert(Hallo )

--gt ltSCRIPTgt ltBODYgt ltHTMLgt

5

Meletakkan JavaScript dalam dokumen HTML Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas)

ltSCRIPT LANGUAGE=Javascript SRC=urlfilejsgt ltSCRIPTgtdimana urlfilejs adalah adalah lokasi dan nama file yang berisi kode JavaScript jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script

Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh

user contohnya seperti klik tombol mouse lttag eventHandler=kode Javascript yang akan dimasukkangt

dimana eventHandler adalah nama dari event tersebut

6

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 6: SCRIPT language="Javascript"

Meletakkan JavaScript dalam dokumen HTML Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas)

ltSCRIPT LANGUAGE=Javascript SRC=urlfilejsgt ltSCRIPTgtdimana urlfilejs adalah adalah lokasi dan nama file yang berisi kode JavaScript jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script

Melalui event tertentu Event adalah sebutan dari satu action yang dilakukan oleh

user contohnya seperti klik tombol mouse lttag eventHandler=kode Javascript yang akan dimasukkangt

dimana eventHandler adalah nama dari event tersebut

6

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 7: SCRIPT language="Javascript"

JavaScript Sebagai Bahasa Berorientasi Objek

JavaScript memperlakukan elemen elemen yang tampil di jendela navigator sebagai suatu obyek yang artinya adalah elemen Diklasifikasikan berdasarkan hirarkitingkatan khusus sehingga kita

bisa mengetahui dimana letaklokasi obyek itu sebenernya Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)

Ilustrasi Kebun 1048707 Pohon

bull Dahan o Daun o Sarang Burung

1048707 Panjang = 20 1048707 Warna = kuning 1048707 Tinggi = 4

bull Batang bull Akar

1048707 Sangkar Ternak bull Ayam bull Bebek

Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut KebunPohonDahanSarang Burung

Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas pohon maka perintahnya KebunPohonDahanSarang Burungwarna=hijau 7

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 8: SCRIPT language="Javascript"

PropertiProperti adalah atribut dari sebuah objekPenulisannya (dipisahkan dengan tanda ldquordquo)

nama_objek nama_propertiProperti dapat diberi nilai penulisannya

objek properti = nilaiContoh

ltHTMLgtltHEADgtltTITLEgtProperti defaultStatusltTITLEgtltHEADgtltBODYgtltH1gtTes defaultStatusltH1gtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowdefaultStatus = Selamat belajar JavaScriptldquo --gtltSCRIPTgtltBODYgtltHTMLgt

8

Nama Objek

Nama Properti Nilai

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 9: SCRIPT language="Javascript"

MetodeProperti adalah suatu kumpulan kode yang digunakan

untuk melakukan sesuatu tindakan terhadap objek

Penulisannya (dipisahkan dengan tanda ldquordquo) nama_objek nama_metode(ldquoparameterrdquo)

Contoh ltHTMLgt ltHEADgt ltTITLEgtSkrip JavascriptltTITLEgtltHEADgt ltBODYgt ltSCRIPT language=Javascriptgt lt--

documentwrite(ldquoSelamat Mencoba JavaScript ltBRgtrdquo) documentwrite(ldquoSemoga Suksesrdquo rdquo) --gt ltSCRIPTgt ltBODYgt ltHTMLgt

9

Nama Objek

Nama Metode

Parameter

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 10: SCRIPT language="Javascript"

Penanganan Kejadian (Event Handler) Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan

manakala pemakai melakukan suatu tindakankejadian misalnya mengklik tombol mouse atau ketika menutup jendela browser

Penulisannya nama_kejadian = ldquokumpulan koderdquo Kumpulan kode dapat berisi sejumlah pernyataan Antar pernyataan

dipisahkan titik-koma Contoh

ltHTMLgtltHEADgtltTITLEgtKejadianltTITLEgtltHEADgtltBODYgtltH1gtTes KejadianltH1gtltPgtCobalah meletakkan penunjuk mouse ke link berikutdan perhatikan isi baris statusKemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris statusltPgt

ltA HREF = wwwfujitsucom onMouseOver = windowstatus = Anda menyorot link lho return true onMouseOut = windowstatus = return truegtFujitsultAgtltBODYgtltHTMLgt

10

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 11: SCRIPT language="Javascript"

Pemasukan Data JavaScript memiliki mekanisme yang memungkinkan pemakai

disuguhi jendela untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK maka kode dalam JavaScript akan melakukan serangkaian proses

Contoh ltHTMLgtltHEADgtltTITLEgtPemasukan DataltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nama = prompt(Siapa nama Anda) documentwrite(Hai + nama)--gtltSCRIPTgtltBODYgtltHTMLgt

11

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 12: SCRIPT language="Javascript"

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

12

bull Jendela KonfirmasiltHTMLgtltHEADgtltTITLEgtAlert BoxltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- windowalert(Ini merupakan pesan untuk Anda)--gtltSCRIPTgtltBODYgtltHTMLgt

ltHTMLgtltHEADgtltTITLEgtKonfirmasiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var jawaban = windowconfirm( Anda ingin meneruskan) documentwrite(Jawaban Anda + jawaban)--gtltSCRIPTgtltBODYgtltHTMLgt

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 13: SCRIPT language="Javascript"

VariabelVariable adalah suatu obyek yang berisi data data

yang mana dapat di modifikasi selama pengeksekusian program

Aturan pemberian nama variabel Nama variabel harus dimulai oleh satu huruf (huruf besar

maupun huruf kecil) atau satu karakter _Nama variabel bisa terdiri dari huruf huruf angka angka

atau karakter _ dan amp (spasi kosong tidak diperbolehkan)Nama variabel tidak boleh memakai nama yang digunakan

dalam reserved program seperti abstract boolean break byte if implements import in infinity instanceof int interface dll

13

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 14: SCRIPT language="Javascript"

Mendeklarasikan Variabeleksplisit dengan menuliskan kata kunci var kemudian

diikuti dengan nama variabel dan nilai dari variabel var test = ldquohalordquo

implisit dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel test = ldquohalordquo

ltSCRIPT language=Javascriptgt ltndash var VariabelKu var VariabelKu2 = 3 VariabelKu = 2 documentwrite(VariabelKuVariabelKu2) --gt ltSCRIPTgt

14

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 15: SCRIPT language="Javascript"

Peletakan variabel (global atau lokal) Jika dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini menjadi variabel global

Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini menjadi variabel lokal

15

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) var a = b 2 return a documentwrite(Dua kali dari b adalah ldquo PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 12

ltSCRIPT language=Javascriptgt lt-- var a = 12 var b = 4 function PerkalianDengan2(b) a = b 2 return a documentwrite(Dua kali dari b adalah PerkalianDengan2(b)) documentwrite(Nilai dari a adalaha) --gt ltSCRIPTgt

Hasilnya Dua kali dari 4 adalah 8 Nilai dari a adalah 8

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 16: SCRIPT language="Javascript"

Tipe Data (1)Bilangan bulat atau desimal

Integer(bilangan bulat) basis-nya basis desimal integer di tuliskan dalam urutan unit bilangan (dari

0 sampai dengan 9) permulaan bilangan tidak boleh dimulai oleh angka 0

basis heksadesimal dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f) permulaan bilangan dimulai oleh 0x atau 0X

basis oktal dituliskan dalam urutan unit angka dari 0 sampai dengan 7 permulaan bilangan dimulai dengan angka 0

Float (bilangan desimal) bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma bilangan bulat desimal 895 bilangan dengan tanda koma 89512 bilangan pembagian 2711 bilangan eksponensial bilangan dengan tanda koma kemudian

diikuti oleh huruf e(atau E) kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau - pangkat postitif atau negatif) contoh var a = 275e-2 var b = 358E+10 var c = 25e-2

16

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 17: SCRIPT language="Javascript"

Tipe Data (2)String adalah kumpulan dari karakter kita deklarasikan

variabel string menggunakan tanda () atau () Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan

bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator mengalami kebingungan dalam membedakan antara string dan skripnya sendiri karakter spesial ini menggunakan simbol antislash () beberapa contoh karakter spesial tersebut n kembali ke baris awal r menekan tombol ENTER t tab tanda petik ganda tanda petik tunggal karakter antislash

Contoh var a = Hallo var b = Sampai Ketemu Lagi Judul = Ada apa di dalam cwindows

Booleans adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu oleh karenanya boolean mempunyai dua nilai

True diwakili oleh nilai 1 False diwakili oleh nilai 0

17

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 18: SCRIPT language="Javascript"

Konversi Tipe DataMengubah bentuk string

menjadi bentuk bilangan bulat parseInt()

Mengkonversi bentuk string menjadi bilangan real parseFloat()

18

ltHTMLgtltHEADgtltTITLEgtKonversi BilanganltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var a = parseInt(27) documentwrite(1 + a + ltBRgt)

a = parseInt(275) documentwrite(2 + a + ltBRgt)

var a = parseInt(27A) documentwrite(3 + a + ltBRgt) a = parseInt(A275)

documentwrite(4 + a + ltBRgt) var b = parseFloat(27) documentwrite(5 + b + ltBRgt) b = parseFloat(275)

documentwrite(6 + b + ltBRgt) var b = parseFloat(27A) documentwrite(7 + b + ltBRgt) b = parseFloat(A275)

documentwrite(8 + b + ltBRgt)--gt

ltSCRIPTgtltBODYgtltHTMLgt

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 19: SCRIPT language="Javascript"

Operator Matematika

Operator Kegunaan Prioritas

+ Penjumlahan 3

- Pengurangan 3

Perkalian 2

Pembagian 2

Sisa Pembagian (modulus)

2

++ Penaikan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

-- Penurunan 1 (kalau terletak di depan variabel)4 (kalau terletak di belakang variabel

19

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 20: SCRIPT language="Javascript"

Operator Matematika

20

ltHTMLgtltHEADgtltTITLEgtOperasi MatematikaltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- documentwrite(20 + 3 = + (20 + 3) ) documentwrite(ltBRgt) documentwrite(20 + 3 = + (20 - 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt) documentwrite(20 3 = + (20 3) ) documentwrite(ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 21: SCRIPT language="Javascript"

Operator Pembanding dan LogikaOperator Keterangan Kategori

== Kesamaan Pembanding

= Ketidaksamaan Pembanding

lt Kurang dari Pembanding

lt= Kurang dari atau sama dengan Pembanding

gt Lebih dari Pembanding

gt= Lebih dari atau sama dengan Pembanding

Bukan Logika

ampamp Dan Logika

|| Atau Logika

Kondisi Nilai Benar Nilai Salah Pembanding21

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 22: SCRIPT language="Javascript"

Operator Pembanding dan LogikaltHTMLgtltHEADgtltTITLEgtOperator ltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = (nilai gt= 60) Lulus Tidak

Lulus documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

22

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 23: SCRIPT language="Javascript"

Pernyataan IFPernyataan IF tanpa else

if (kondisi) blok pernyataan yang dijalankan kalau kondisi bernilai benar

23

ltHTMLgtltHEADgtltTITLEgtContoh ifltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil = Tidak Lulus

if (nilai gt= 60) hasil = Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

bull Pernyataan IF dengan ELSE if (kondisi)

blok pernyataan yang dijalankan kalau kondisi bernilai benar

else blok pernyataan yang dijalankan kalau kondisi bernilai salah

ltHTMLgtltHEADgtltTITLEgtContoh if-elseltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var nilai = prompt(Nilai (0-100) 0) var hasil =

if (nilai gt= 60) hasil = Lulus else hasil = Tidak Lulus

documentwrite(Hasil + hasil)--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 24: SCRIPT language="Javascript"

Pernyataan IF Bersarang

24

ltHTMLgtltHEADgtltTITLEgtContoh if BerkalangltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

if (kode_hari == 0) nama_hari = Minggu else if (kode_hari == 1) nama_hari = Senin else if (kode_hari == 2) nama_hari = Selasa else if (kode_hari == 3) nama_hari = Rabu else if (kode_hari == 4) nama_hari = Kamis else

if (kode_hari == 5) nama_hari = Jumat else nama_hari = Sabtu documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 25: SCRIPT language="Javascript"

Pernyataan SwitchBentuknya

switch (variabel) case nilai1

perintah1 break

case nilai2 perintah2 break

default perintahN break

25

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 26: SCRIPT language="Javascript"

Pernyataan Switch

26

ltHTMLgtltHEADgtltTITLEgtContoh switchltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var tanggal = new Date() var kode_hari = tanggalgetDay() var nama_hari =

switch(kode_hari) case 0 nama_hari = Minggu break case 1 nama_hari = Senin break case 2 nama_hari = Selasa break case 3 nama_hari = Rabu break case 4 nama_hari = Kamis break

case 5 nama_hari = Jumat break case 6 nama_hari = Sabtu

documentwrite(Hari ini hari + nama_hari) documentwrite( tanggal + tanggalgetDate() + + (tanggalgetMonth() + 1) + + tanggalgetYear())--gtltSCRIPTgtltBODYgtltHTMLgt

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 27: SCRIPT language="Javascript"

Proses Berulang Pernyataan While

Bentuk pernyataan while (kondisi) pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0 while (bilangan lt 5) documentwrite(JavaScriptltBRgt) bilangan++ --gtltSCRIPTgtltBODYgtltHTMLgt

27

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 28: SCRIPT language="Javascript"

Proses Berulang Pernyataan DohellipWhileBentuk pernyataan

do blok pernyataan while (kondisi)

Contoh ltHTMLgtltHEADgtltTITLEgtContoh do whileltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 1 do documentwrite(bilangan + ltBRgt) bilangan++ while (bilangan lt 6)--gtltSCRIPTgtltBODYgtltHTMLgt 28

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 29: SCRIPT language="Javascript"

Proses Berulang Pernyataan ForhellipBentuk pernyataan

for (inisialisasi kondisi penaikan_penurunan) pernyataan_pernyataan

Contoh ltHTMLgtltHEADgtltTITLEgtContoh forltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var bilangan = 0

for (bilangan = 1 bilangan lt= 5 bilangan++) documentwrite(bilangan + ltBRgt)--gtltSCRIPTgtltBODYgtltHTMLgt

29

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 30: SCRIPT language="Javascript"

Proses Pengulangan dalam Pengulangan

30

ltHTMLgtltHEADgtltTITLEgtContoh for BerkalangltTITLEgtltHEADgtltBODYgtltPREgtltSCRIPT LANGUAGE = JavaScriptgtlt-- var baris i = 0 var nilai_prompt = prompt(Tinggi 5) var tinggi = parseInt(nilai_prompt)

for (baris = 1 baris lt= tinggi baris++) Buat sejumlah spasi for (i = 1 i lt= tinggi - baris i++) documentwrite( ) Karakter spasi Tampilkan for (i = 1 i lt 2 baris i++) documentwrite() Pindah baris documentwrite(n) --gtltSCRIPTgtltPREgtltBODYgtltHTMLgt

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 31: SCRIPT language="Javascript"

FungsiMendefinisikan Fungsi

function nama(daftar_parameter) Pernyataan_1 pernyataan_n

c = jumlah ( 2 3 )

31

Nama fungsi

argumenNilai balik

HTMLgtltHEADgtltTITLEgtContoh FungsiltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function jumlah(x y) var hasil = x + y return(hasil) var z = jumlah(2 3) documentwrite(z) documentwrite(ltBRgt) documentwrite(jumlah(4 5))--gtltSCRIPTgtltBODYgtltHTMLgt

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 32: SCRIPT language="Javascript"

Fungsi RekursifFungsi rekursif adalah fungsi yang memanggil dirinya sendiriContoh Faktorial

ltHTMLgtltHEADgtltTITLEgtVariabel LokalltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function faktorial(n) if (n == 0) return(1) else return( n faktorial(n-1))

var z = 77 documentwrite(4 = + faktorial(4))--gtltSCRIPTgtltBODYgtltHTMLgt

32

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 33: SCRIPT language="Javascript"

Fungsi yang Dibuat SendiriMemvalidasi Masukan pada Formulir

33

ltHTMLgtltHEADgtltTITLEgtValidasi MasukanltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekNama(form) if (formelements[0]value == ) alert(Nama harus dimasukkan) formnamafocus() formnamaselect() return(false) alert(Terima kasih + formelements[0]value) return(true) --gtltSCRIPTgt

ltFORM NAME = formkugtltPREgtNama ltINPUT TYPE = TEXT NAME = namagtltBRgtltINPUT TYPE = BUTTON VALUE = Kirim onClick = cekNama(thisform)gtltBRgtltPREgtltFORMgtltBODYgtltHTMLgt

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 34: SCRIPT language="Javascript"

Fungsi yang Dibuat SendiriMenampilkan Jam

34

ltHTMLgtltHEADgtltTITLEgtJamltTITLEgtltHEADgtltBODYgtltFORM NAME = formWaktugtWaktu Sekarang ltINPUT TYPE = TEXT NAME = teksWaktu VALUE = SIZE = 22gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt--

function aturWaktu() var sekarang = new Date() var waktuSekarang = sekarangtoLocaleString() documentformWaktuteksWaktuvalue = waktuSekarang setTimeout(aturWaktu() 1000) return(true) Menjalankan fungsi aturWaktu aturWaktu()--gtltSCRIPTgtltBODYgtltHTMLgt

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 35: SCRIPT language="Javascript"

OBJEKObjek dari Navigator (Browser)

JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifatkondisi (properti) mereka

Dimulai dari obyek yang paling besar diantara semuanya kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan Obyek paling besar adalah obyek jendela (window) dari navigator Di dalam obyek jendela ada satu obyek yang ditampilkan dalam bentuk

sebuah halaman kita sebut obyek dokumen atau document Halaman itu berisi banyak obyek seperti formula text image dan lain lainya

Untuk mengakses satu obyek kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window ) Contoh

ltscript language=Javascriptgt lt-- function ModifField()

if (documentforms[form1]check_boxchecked) documentforms[form1]text_fieldvalue=checkbox dipilih

else documentforms[form1]text_fieldvalue=checkbox tidak dipilih

--gt ltscriptgt

35

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 36: SCRIPT language="Javascript"

Objek Standard JavaScript

36

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 37: SCRIPT language="Javascript"

Objek ArrayObyek array adalah satu obyek yang memungkinkan kita untuk

membuat dan memanipulasi tabel berikut ini adalah sintaks untuk membuat tabel var x = new Array(elemen1[ elemen2 ]) jika tidak ada elemen yang disebutkan dalam parameter tabel itu akan menjadi tabel kosong pada saat pembuatannya sebaliknya jika elemen diisi maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut

Metode standard Objek Array

37

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 38: SCRIPT language="Javascript"

Objek ArrayContoh

38

ltHTMLgtltHEADgtltTITLEgtProperti prototypeltTITLEgtltHEADgtltBODYgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function tampilkanElemenArray() for (var i = 0 i lt thislength i++) documentwrite([ + i + ] = + this[i] + ltBRgt) Arrayprototypecetak = tampilkanElemenArray var musik = new Array(Jazz Rock keroncong Dangdut) var tanaman = new Array(Aglaonema Begonia Bromelia) documentwrite(Isi array musik ltBRgt) musikcetak() documentwrite(Isi array tanaman ltBRgt) tanamancetak()--gtltSCRIPTgtltBODYgtltHTMLgt

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 39: SCRIPT language="Javascript"

Objek Date (Waktu) Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga durasi waktu

Sintaks sintaks untuk membuat obyek date adalah berikut ini bull Nama_dari_obyek = new Date() sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam

saat ini bull Nama_dari_obyek = new Date(ldquohari bulan tanggal tahun

jammenitdetikrdquo) parameter berbentuk string dengan batas batas pemisah sepeti

format diatas bull Nama_dari_obyek = new Date(tahun bulan hari) parameter adalah 3 integer yang dipisahkan oleh tanda koma

Objek Waktu Standard

39

getMonth() getSecond() getTime()toLocalString()setDate(X)setDay(X) setHours(X)setMonth(X) setTime(X) dllhelliphellip

Contoh lihat Pembahasan SWITCH

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 40: SCRIPT language="Javascript"

Objek Radio

40

ltHTMLgtltHEADgtltTITLEgtMengakses Objek radioltTITLEgtltHEADgtltBODYgtKlik pada musik yang paling Anda sukailtBRgtltFORM NAME = formTes METHOD = GETgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Jazz onClick = info()gtJazzltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Keroncong onClick = info()gtKeroncongltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Dangdut onClick = info()gtDangdutltBRgtltINPUT TYPE = RADIO NAME = radioMusik VALUE = Lainnya onClick = info()gtLainnyaltBRgtltHRgt

InfoltINPUT TYPE = TEXT NAME = fieldMusik SIZE = 40gtltFORMgtltSCRIPT LANGUAGE = JavaScriptgtlt-- function info() for (var i = 0 i lt 4 i++) if (documentformTesradioMusik[i]checked) documentformTesfieldMusikvalue = documentformTesradioMusik[i]value --gtltSCRIPTgtltBODYgtltHTMLgt

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password
Page 41: SCRIPT language="Javascript"

Objek Password

41

ltHTMLgtltHEADgtltTITLEgtMengakses Objek passwordltTITLEgtltHEADgtltBODYgtltFORM NAME = formTes ACTION = tesformhtm METHOD = POSTgtltPREgtPassword Pengganti ltINPUT TYPE = PASSWORD NAME = password_1gtPassword Sekali Lagi ltINPUT TYPE = PASSWORD NAME = password_2gtltPREgtltINPUT TYPE = BUTTON NAME = tombolProses VALUE = Proses onClick = cekPassword()gtltFORMgt

ltSCRIPT LANGUAGE = JavaScriptgtlt-- function cekPassword() if (documentformTespassword_1value = documentformTespassword_2value) alert(Dua password yang Anda masukkan tidak sama) else windowlocationhref = tesformhtm --gtltSCRIPTgtltBODYgtltHTMLgt

  • JAVASCRIPT
  • Pengenalan JavaScript
  • Perbedaan JavaScript dan Pemrograman Java
  • Bentuk skrip dari Javascript dan Membuat Komentar (Skrip tidak Tereksekusi)
  • Meletakkan JavaScript dalam dokumen HTML
  • Slide 6
  • JavaScript Sebagai Bahasa Berorientasi Objek
  • Properti
  • Metode
  • Penanganan Kejadian (Event Handler)
  • Pemasukan Data
  • Jendela Peringatan dan Jendela Konfirmasi
  • Variabel
  • Mendeklarasikan Variabel
  • Peletakan variabel (global atau lokal)
  • Tipe Data (1)
  • Tipe Data (2)
  • Konversi Tipe Data
  • Operator Matematika
  • Slide 20
  • Operator Pembanding dan Logika
  • Slide 22
  • Pernyataan IF
  • Pernyataan IF Bersarang
  • Pernyataan Switch
  • Slide 26
  • Proses Berulang Pernyataan While
  • Proses Berulang Pernyataan DohellipWhile
  • Proses Berulang Pernyataan Forhellip
  • Proses Pengulangan dalam Pengulangan
  • Fungsi
  • Fungsi Rekursif
  • Fungsi yang Dibuat Sendiri
  • Slide 34
  • OBJEK
  • Objek Standard JavaScript
  • Objek Array
  • Slide 38
  • Objek Date (Waktu)
  • Objek Radio
  • Objek Password