Javascript
advertisement
Javascript
Pengantar
• Javascript menyediakan fasilitas pemrograman
untuk lingkungan web browser
• Didukung banyak browser tetapi tidak semua
• Tidak membutuhkan tool khusus, file javascript
dapat dibuat dengan editor teks biasa. Hanya
dibutuhkan browser untuk menjalankan.
• JavaScript <> Java
Kelebihan Javascript
• Membuat web menjadi lebih dinamis dan
interaktif :
– Membuat aplikasi yang dapat bereaksi
terhadap suatu even dalam halaman web
– Membaca dan menulis ulang tag HTML
– Validasi data yang akan dikirim ke server
– Salah satu unsur dari AJAX
Impelementasi Javascript
•
•
Javascript berupa script/program yang
disisipkan dalam dokumen HTML
Terdapat 2 cara penerapan :
1. Dalam internal dokumen HTML
2. Dalam file eksternal
Impelementasi Javascript
1. Dalam internal dokumen HTML
•
Dalam elemen head :
<head>
<script type=“text/javascript”>
Function pesan(){
Document.alert(“ini pesan dari javascript”);
}
</script>
</head>
•
Dalam elemen body :
<body>
<script type=“text/javascript”>alert(“ini pesan dari
javascript”)</script>
</body>
Impelementasi Javascript
2. Dalam file eksternal
•
•
Script ditulis dalam suatu file
File tersebut dipanggil dari dokumen HTML dengan
elemen script :
<script src=“nm_file.js”></script>
VARIABEL
Variabel
•
•
•
•
Case sensitive
Diawali huruf atau underscore
Bukan keyword javascript
Scope :
– Global
Dapat diakses oleh semua script dalam dokumen HTML
– Local
• Dideklarasikan dalam suatu fungsi
• Hanya dapat diakses oleh fungsi tersebut
• Cara deklarasi :
var nm_var=nilai
nm_var=nilai
(lokal)
(global)
OPERATOR
Operator
•
•
•
•
•
Aritmatika (+, -, /, *, %, ++, --)
Assigment (=, +=, -=, *=, /=, %=)
Pembandingan (==, !=, >, <, >=, <=)
Logika (&&/and, II/or, !)
String (+/concatenation/penggabungan)
Operator
• Kondisi
– Pengisian variabel berdasar nilai ekspresi :
ekspresi ? nilaitrue : nilaifalse
Contoh :
bil=5
jnsbil=(bil%2==0) ? “Genap” : “Ganjil”
• New
– Mendefinisikan variabel bertipe objek
var nmvar=new object_js()
Contoh : var tgl=new Date()
Struktur Dasar
Program
Struktur Keputusan
•
•
•
•
If
If … else
If … else if … else
Switch … case
Struktur IF
if
If (ekspresi) {
statement2
}
If … else
If (ekspresi) {
statement2_true
}else{
statement2_false
}
If … else if …else
If (ekspresi1) {
statement12_true
}else if (ekspresi2){
statement22_true
}else{
statement2_false
}
Contoh IF
<body><script type="text/javascript">
var bil=prompt("Masukkan bilangan",2)
hasil=bil % 2
if (hasil==0) {
document.write("Genap!")
} else {
document.write("Ganjil!")
}
</script></body>
Struktur SWITCH…CASE
switch (ekspresi){
case nilai1 :
Statementberdasarnilai1;
[case nilai2 :
Statementberdasarnilai2;
…]
[default:
StatementDefault;]
}
Contoh SWITCH…CASE
<body><script type="text/javascript">
var bil=prompt("Masukkan bilangan",2)
document.write(bil + " : ")
switch (bil) {
case "0" : document.write("nol");break;
case "1" : document.write("satu");break;
case "2" : document.write("dua");break;
default : document.write("tidak dikenal");
}
</script></body>
Struktur Perulangan
• While
• Do … while
• For
Struktur WHILE
while (ekspresi){
statement;
statement;
…
}
Contoh WHILE
<body>
<script type="text/javascript">
i=0;
while (i<6) {
document.write(i+"<br>")
i++
}
</script>
</body>
Struktur FOR
for (inisialisasi;terminasi;increment){
statement;
statement;
…
}
Contoh FOR
<body>
<script type="text/javascript">
for (i=1; i<=6; i++){
document.write("<h"+i+">Header"+i+"</h"+i+">")
}
</script>
</body>
FUNGSI
Deklarasi Fungsi
Function nm_fung([parameter]){
….
statement-statement fungsi
….
[return nilai]
}
Contoh FUNGSI
<body>
<h1>Menjumlahkan 2 bilangan menggunakan Fungsi</h1>
<script type="text/javascript">
var a=4
b=28
document.write("a = "+a+"<br>"+"b="+b+"<br>")
document.write("Jmlah a+b =" + jumlah(a,b))
function jumlah(a,b) {
return a+b
}
</script>
</body>
Event Javascript
Event / Kejadian
• Kejadian-kejadian dalam suatu halaman
web dapat diidentifikasi dan ditangani oleh
javascript, antara lain :
mouseover, click, focus, blur, change,
select, submit, load, unload
• Untuk membuat event handler / penangan
even buat atribut HTML dengan nama ‘on’
diikuti nama event :
<p onmouseover=“alert(‘halo’)”>Tes</p>
OBJECT
Pengertian Object
• Entitas program saat runtime yang
memiliki method (aksi) dan property
(atribut)
• Javascript memiliki sejumlah object
internal
• Javascript dapat mengakses object
internal, termasuk milik browser (DOM>Document Object Model)
Object Internal
•
•
•
•
String
Array
Math
Date
Object String
• Properties
– length : panjang suatu string
• Methods
–
–
–
–
charAt : mencari karakter posisi tertentu
indexOf : mencari nilai indeks karakter
toLowerCase : mengubah ke huruf kecil
toUpperCase : mengubah ke huruf besar
Contoh Object String
<body>
<script>
str=“Cicak vs Buaya”;
alert(str.length);
alert(str.indexOf(“vs”))
alert(str.toLowerCase())
</script>
</body>
//14
//6
//cicak vs buaya
Object Date
• Javascript menyimpan tanggal sebagai
angka integer berupa banyaknya milidetik
sejak 01 Jan 1970 pukul 00:00:00.
• Pembuatan object Date :
nm_objek=new Date();
Methods Date
• getDate() : mengambil nilai tanggal
• getHours() : mengambil nilai jam
• setDate(tanggal) : mengeset tanggal
(1..31)
• setMonth(bulan) : mengeset bulan (0..11)
• setYear(tahun) : mengeset tahun (>1900)