Dasar javascript,variabel , manipulasi string, fungsi matematis, table dan menu option
Post on 02-Jan-2016
65 Views
Preview:
DESCRIPTION
Transcript
Modul -6 : Java Script (1) 1
Dasar javascript,variabel , manipulasi string, fungsi matematis, table dan menu option
Java Script (1)
Modul-6 :
Modul -6 : Java Script (1) 2
Dalam modul ini akan dipelajari:
1. Definisi Java Script
2. Statemen write()
3. Data,variabel dan operator
4. Comentar dan case
5. Fungsi tanggal, string dan matematis
6. Table dan menu
7. Seleksi dengan radio
Modul -6 : Java Script (1) 3
1. Definisi Java Script
Java script adalah suatu script yang diinsetkan kedalam HTML sebagai script
Browser yang mengenal javaScript akan menterjemahkan kode-kode java dan hasilnya ditampilkan menyatu dengan kode-kode HTML
Java Script bekerja pada sisi clen (yaitu pada browser) Tag HTML untuk memperkenalkan bahwa kode-kode adalah java script
adalah :
<Script Language=Javascript> isi kode java script
</Script> Isi kode java script dapat berupa statemen-statemen java script yang
tidak sepenuhnya sama dengan statemen java
Modul -6 : Java Script (1) 4
2. Mencetak ke dalam dokumen
Dalam java jika kita akan mencetak kelayar akan menggunakan System.out.println() jika dalam modus command line, atau g.drawString(string,x,y) jika dalam modus window
Dalam java Script kita menggunakan document.write(teks) teks : dapat berupa string, variabel atau tag HTML
Klik-klik untuk detail efek !
Modul -6 : Java Script (1) 5
3. Data, variabel dan Operator
OPERATOR : Operator aritmetika (*,/,+,-) dan logika(<,><=,>=,!=, &&,
|| dan !) sama persis dengan program java
VARIABEL :
Dalam java Script variable cukup dideklarasikan dengan var (tidak harus). Tidak dibedakan apakah variabel itu bilangan(int, float) atau string. Contoh : var A=10; var B=”JOKO” , atau cukup A=10; B=”JOKO”
demo
Klik lihat hasil
Modul -6 : Java Script (1) 6
4. Komentar dan Case
Komentar dalam Java Script sama dengan dalam Java, yaitu menggunakan : // atau /*
// ini komentar
/* komentar
komentar
*/
Masalah case juga sama dengan Java, dimana huruf Besar dengan huruf kecil dibedakan : A=10; dan a=5; adalah dua variabel yang berbeda
Klik untuk lihat hasilnya
Klik lihat contoh
Modul -6 : Java Script (1) 7
5. Fungsi Tanggal dan waktu
Membuat objek tanggal dengan new Date()
Beberapa fungsi tanggal:
getDay() = angka hari
getDate() = angka tanggal
getMonth() =angka bulan 0,1,..,11
getYear() = angka tahun Untuk mengakses jam :
getHours()
getMinutes()
getSeconds()
Klik untuk lihat hasilnya
demo
Modul -6 : Java Script (1) 8
Fungsi-fungsi string dan table
Demo program
Operasi penggabungan string dilakukan dengan +
Suatu string dalam JavaScript dapat berfungsi sebagai TAG HTML yang memilii efek pada tampilan
Efek tampilan itu misalnya untuk membaut table dengan tag
<table> ..<table><tr>.,</tr> dan <td></td>
Fungsi string : substring(awal, akhir)
Fungsi string : length = (panjang string)
Klik contoh program
Modul -6 : Java Script (1) 9
Fungsi-fungsi matematis
Fungsi-fungsi matematis dalam java script masih sama dengan dalam Java, yaitu menggunakan class Math
Contoh: Math.random() = bilangan
acak >0 dan <1 Math.sin(sudut radian) =
mencari sinus Math.cos(sudut radian) =
mencari cosinus Math.exp(x) = e^x Math.log(x) = e log x Math.sqrt(x) = akar dari x
hasil
demo
Modul -6 : Java Script (1) 10
Masukan data dari form
Masukan data dari form diawali dengan mendefinisikan form dengan tag <form name=…>
Selanjutnya dalam form dapat diletakkan komponen GUI seperti TextField atau button dengan:
<input type=…> Pada button didefinisikan kode
javascript yang akan mengambil data dari form dan memprosesnya
Hasil proses ditampilkan kembali melalui form
Klik lihat hasil
demo
Modul -6 : Java Script (1) 11
6. Seleksi dengan menu OPTION
Untuk menu opsi digunakan tag : <SELECT NAME=namaMenu> Dilengkapi dengan pilihan
<OPTION value=“nilai pilihan”>jika salah satu pilihan dijadikan terpilihmaka digunakan kata kunciSELECTED
Klik lihat hasil
Jika OK di klik
Modul -6 : Java Script (1) 12
7. Seleksi dengan radio
Seleksi dengan radio adalah alternatif pada pilihan tunggal seperti menu
Definisi komponen radio : <input type=radio name=name value=nilai
onClick=namafungsi(value)> Seleksi radio mana yang dipilih dengan : seleksi dilakukan dalam fungsi javaScript , misalnya Nama fungsi adalah : pilih(value) Dalam definisi javaScript
function pilih(arg){if(arg=value1) tindakan1 if(arg=value2) tindakan2}
CONTOH:Radio untuk menyeleksi warna latar belakang layar
Modul -6 : Java Script (1) 13
Seleksi dengan radio (lanjutan…)
Klik untuk lihat hasil
Jika radio MERAH diklik
Jika radio KUNING diklik
Jika radio MAGENTA diklik
Modul -6 : Java Script (1) 14
Seleksi dengan radio (komponennya)
Modul -6 : Java Script (1) 15
Rangkuman
Java script memungkinkan kita membuat pengolahan data dengan program java, variabel dan fungsi-fungsi standard seperti Math, string dipadukan dengan input data dari HTML form
Java script tetap bersifat case sensitif seperi java Java script lebih longgar memformat variabel dari
pada java Teknik java script dibuat dengan dasar pemikiran : Komponen seperti FORM, GUI, TEXTFIELD, BUTTON
dan TABLE atau MENU dengan HTML sedangankan fungsi-fungsi pengolah data dengan java Script
Harus hati-hati dan cermat masalah case, karena HTML sendiri tidak bersifatr “case sensitive” sebagaimana javaScript
Modul -6 : Java Script (1) 16
Latihan
1. Buatlah suatu formulir untuk membaca data Nama dan alamat dengan table dan Textfield. Sediakan satu TextFiled dan dua button. Jika tombol Baca di klik definisikan fungsi javaScript untuk membaca nama dan alamat dan menampilkan dalam kotak hasil. Jika tombol Hapus di klik formluir bersih kembali. Lihat tampilan berikut
top related