Yuliawati
LATIHAN Yunus,S.P
[Link].T
PEMANTAPAN
KEMBALI
MERUJUK PADA
LATIHAN
SEBELUMNYA,
IMPLEMENTASI
KAN
PEMANFAATAN
CSS, ATUR
STYLE PADA
PAGE
SEBELUMNYA
SESUAI
DENGAN
KREATIFITAS
Yuliawati
JAVASCRIPT Yunus,S.P
[Link].T
TUJUAN PERKULIAHAN
Mahasiswa dapat mengetahui
dasar javascript pada html
Mahasiswa dapat
mempraktekkan pengoperasian
javascript pada html.
Mahasiswa dapat melakukan
pemanfaatan variabel, tipe
data, objek, operator, dan
operasi kondisi
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 “Java” ) memberikan nama baru
“JavaScript” pada tanggal 4 desember 1995.
Bahasa ini dikenali pada browser Netscape Navigator mulai
versi di atas 2.0. ,sedangkan Microsoft melengkapi Internet
Explorer dengan JavaScript mulai versi 3.0 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
5
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 “case sensitive” 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 (;). 6
BENTUK SKRIP DARI JAVASCRIPT DAN
MEMBUAT KOMENTAR (SKRIP TIDAK
TEREKSEKUSI)
S k r i p d a r i J a v a S c r i p t t e r l e t a k d i d a l a m d o ku m e n H T M L .
< S C R I P T la n g u a g e = " J a v a s c r ip t " >
letakkan script anda disini
</SCRIPT>
Pa d a n a v i g a t o r v e r s i l a m a , s e b e l u m a d a n y a J a v a S c r i p t, ti d a k m en g en a l
t a g t e r s e b u t d a n a ka n m e l e w a t ka n n y a u n t u k d i b a c a . U n tu k i tu p er l u
d i t a m b a h ka n t a g ko m e n t a r a g a r s k r i p n y a t i d a k d i b a c a s eb a g a i s k r i p ,
t e t a p i d i b a c a s e b a g a i ko m e n t a r d a n ti d a k a ka n d i e k s e ku s i s eb a g a i
p ro g r a m .
<SCRIPT language="Javascript">
<!--
letakkan script anda disini
// -->
</SCRIPT>
U n t u k m e n u l i s ko m e n t a r d a l a m s a t u b a r i s k i ta g u n a ka n ka r a k ter d o b el
slash.
/ / s e m u a ka r a kt e r d i b e la ka n g / / t i d a k a k a n d i e ks e ku s i
U n t u k m e n u l i s ko m e n t a r y a n g t e rd i r i d a r i b e b e r a p a b a r i s k i ta g u n a ka n
ka r a k t e r / * d a n * /
/ * S e m u a b a r i s a n t a r a 2 t a n d a t e r s e b u t t i d a k a ka n d i e ks e ku s i
o l e h ko m p i la t o r * / 7
MELETAKKAN JAVASCRIPT DALAM
DOKUMEN HTML
Menggunakan tag <SCRIPT>
Tag <SCRIPT> diletakkan diantara bagian kepala dari dokumen HTML,
yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi
JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen
HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>.
Keterangan tambahan di dalam tag <SCRIPT> menunjukkan jenis bahasa
yang digunakan dan versinya, contohnya “JavaScript“,
“JavaScript1.1“,“JavaScript1.2“ untuk bahasa JavaScript
Contoh :
<HTML>
<HEAD>
<TITLE>Contoh Program Javascript</TITLE>
</HEAD>
<BODY>
<SCRIPT language="Javascript">
<!--
alert("Hallo !");
// -->
</SCRIPT>
</BODY>
8
</HTML>
MELETAKKAN JAVASCRIPT DALAM
DOKUMEN HTML
Menggunakan fi le ekstern
Menuliskan kode program JavaScript dalam suatu fi le teks dan
kemudian fi le teks yang berisi kode JavaScript di panggil dari
dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).
<SCRIPT LANGUAGE="Javascript" SRC="url/fi [Link]">
</SCRIPT>
dimana url/fi [Link] adalah adalah lokasi dan nama fi le 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.
<tag eventHandler="kode Javascript yang akan
dimasukkan">
9
dimana eventHandler adalah nama dari event tersebut.
JAVASCRIPT SEBAGAI
BAHASA BERORIENTASI OBJEK
JavaScript memperlakukan elemen elemen yang tampil di jendela
navigator sebagai suatu obyek , yang artinya adalah elemen :
Diklasifi kasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa
mengetahui dimana letak/lokasi obyek itu sebenernya.
Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)
Ilustrasi :
Kebun
Pohon
• Dahan
o Daun
o Sarang Burung
Panjang = 20
Warna = kuning
Tinggi = 4
• Batang
• Akar
Sangkar Ternak
• Ayam
• Bebek
S ar a n g b u r u n g y an g b e r a d a d i a t a s p o h o n d a p a t d i t u l i s ka n s e b a g a i
b e r i ku t :
Ke bu n . Po h o n . D a h a n . S a r a n g B u r u n g
B i l a i n g i n m e n g e c a t a t a u m e n g g a n t i w a rn a s a r a n g b u r u n g y a n g t e r l e t a k
d i a t as p o h o n , m a ka p e r i n t a h n y a : 10
Ke bu n . Po h o n . D a h a n . S a r a n g B u r u n g . w a r n a = h i j a u
PROPERTI
Properti adalah atribut dari sebuah objek.
Penulisannya (dipisahkan dengan tanda “.”) :
nama_objek . nama_properti
Properti dapat diberi nilai, penulisannya :
objek . properti = nilai
Contoh :
<HTML>
<HEAD>
<TITLE>Properti defaultStatus</TITLE>
</HEAD>
<BODY> Nama Properti
Nilai
<H1>Tes defaultStatus</H1>
<SCRIPT L ANGUAGE = "JavaScript">
<!--
[Link] = "Selamat belajar
JavaScript“ ;
//--> Nama Objek
</SCRIPT>
</BODY> 11
</HTML>
METODE
Properti adalah suatu kumpulan kode yang
digunakan untuk melakukan sesuatu tindakan
terhadap objek.
Penulisannya (dipisahkan dengan tanda “.”) :
nama_objek .
nama_metode(“parameter”)
Contoh :
<HTML>
<HEAD>
Nama Metode
<TITLE>Skrip Javascript</TITLE>
</HEAD> Parameter
<BODY>
<SCRIPT language="Javascript">
<!--
[Link](“Selamat Mencoba JavaScript <BR>”):
[Link](“Semoga Sukses” !”);
// --> Nama Objek
</SCRIPT>
</BODY> 12
</HTML>
PENANGANAN KEJADIAN (EVENT
HANDLER)
Pe nanganan Ke j adi an adal ah s e ku m pu l an kode y an g akan di j al an kan
m anakal a pe m akai m e l aku kan s u atu ti n dakan /ke j adi an , m i s al n y a
m e ngkl i k tom bol m ous e atau ke ti ka m e n u tu p j e nde l a brow s e r.
Pe nul i s anny a : nama_ke j ad i an = “kump ul an kod e ”
Kum pul an kode dapat be r i s i s e j u m l ah pe rn y ataan . A n tar pe rn y ataan
di pi s ahkan ti ti k-kom a.
Contoh :
<HTML>
<HEAD>
<TITLE>Kejadian</TITLE>
</HEAD>
<BODY>
<H1>Tes Kejadian</H1>
<P>Cobalah meletakkan penunjuk mouse ke link berikut
dan perhatikan isi baris status.
Kemudian pindahkan penunjuk mouse dari
link berikut dan perhatikan isi baris status
</P>
<A HREF = "[Link]"
onMouseOver = "[Link] =
'Anda menyorot link, lho';
return true"
onMouseOut = "[Link] = '';
return true">Fujitsu</A> 13
</BODY>
</HTML>
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 :
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Siapa nama Anda?");
[Link]("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
14
JENDELA PERINGATAN DAN
JENDELA KONFIRMASI
• Jendela Konfirmasi
Jendela Peringatan <HTML>
<HTML> <HEAD>
<HEAD> <TITLE>Konfirmasi</TITLE>
<TITLE>Alert Box</TITLE> </HEAD>
</HEAD> <BODY>
<BODY> <SCRIPT LANGUAGE = "JavaScript">
<SCRIPT LANGUAGE = <!--
"JavaScript"> var jawaban = [Link](
<!-- "Anda ingin
[Link]("Ini meneruskan?");
merupakan pesan untuk [Link]("Jawaban Anda:
Anda"); " + jawaban);
//--> //-->
</SCRIPT> </SCRIPT>
</BODY> </BODY>
</HTML> </HTML>
15
VARIABEL
Variable adalah suatu obyek yang berisi data data,
yang mana dapat di modifi kasi 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 & (spasi kosong tidak diperbolehkan).
Nama variabel tidak boleh memakai nama yang digunakan
dalam reserved program, seperti : abstract, boolean, break,
byte, if, implements, import, in, infi nity, instanceof, int,
interface, dll
16
MENDEKLARASIKAN
VARIABEL
eksplisit : dengan menuliskan kata kunci var
kemudian diikuti dengan nama variabel dan nilai
dari variabel : var test = “halo”
implisit : dengan menuliskan secara langsung nama
dari variabel dan diikuti nilai dari variabel : test =
“halo”
<SCRIPT language="Javascript">
<!–
var VariabelKu;
var VariabelKu2 = 3;
VariabelKu = 2;
[Link](VariabelKu*VariabelKu2);
// -->
</SCRIPT>
17
PELETAKAN VARIABEL
(GLOBAL ATAU LOKAL)
J i ka d i d e k l a r a s i ka n d i b a g i a n a w a l d a r i s k r i p p ro g r a m , y a n g a r t i n y a s e b e l u m
p e n d e k l a r a s i a n s e m u a f u n g s i , m a ka s e m u a f u n g s i d i d a l a m p ro g r a m b i s a
mengakses variabel ini, dan variabel ini menjadi variabel global.
J i ka d i a d e k l a r a s i ka n d e n g a n m e n g g u n a ka n ka t a ku n c i v a r d i d a l a m s u a t u f u n g s i
t e r t e n t u , m a ka v a r i a b e l i t u h a n y a b i s a d i a k s e s d a r i d a l a m f u n g s i t e r s e b u t , d a n
a r t i n y a v a r i a b e l i n i t i d a k b e rg u n a b a g i f u n g s i f u n g s i y a n g l a i n , d a n k i t a s e b u t
variabel ini menjadi variabel lokal
<SCRIPT language="Javascript"> <SCRIPT language="Javascript">
<!-- <!--
var a = 12; var a = 12;
var b = 4; var b = 4;
function PerkalianDengan2(b) { function PerkalianDengan2(b) {
var a = b * 2; a = b * 2;
return a; return a;
} }
[Link]("Dua kali dari ",b," [Link]("Dua kali dari ",b," adalah
adalah “ , PerkalianDengan2(b)); ",PerkalianDengan2(b));
[Link]("Nilai dari a adalah",a); [Link]("Nilai dari a adalah",a);
// --> // -->
</SCRIPT> </SCRIPT>
Hasilnya : Hasilnya :
Dua kali dari 4 adalah 8 Dua kali dari 4 adalah 8
Nilai dari a adalah 12 Nilai dari a adalah 8 18
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 : 895,12
bilangan pembagian : 27/11
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 = 2.75e-2;
var b = 35.8E+10; 19
var c = .25e-2;
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 \"c:\\windows\\\"";
Booleans, adalah satu variabel khusus yang berguna
untuk mengevalua si suatu kondisi tertentu, oleh karenanya
20
boolean mempunyai dua nilai :
KONVERSI
TIPE DATA
<HTML>
<HEAD>
<TITLE>Konversi Bilangan</TITLE>
</HEAD>
Mengubah bentuk string <BODY>
menjadi bentuk bilangan <SCRIPT LANGUAGE = "JavaScript">
<!--
bulat : var a = parseInt("27");
parseInt() [Link]("1. " + a + "<BR>");
a = parseInt("27.5");
Mengkonversi bentuk [Link]("2. " + a + "<BR>");
string menjadi bilangan var a = parseInt("27A");
[Link]("3. " + a + "<BR>");
real : parseFloat() a = parseInt("A27.5");
[Link]("4. " + a + "<BR>");
var b = parseFloat("27");
[Link]("5. " + b + "<BR>");
b = parseFloat("27.5");
[Link]("6. " + b + "<BR>");
var b = parseFloat("27A");
[Link]("7. " + b + "<BR>");
b = parseFloat("A27.5");
[Link]("8. " + b + "<BR>")
//-->
</SCRIPT>
</BODY>
</HTML> 21
OPERATOR MATEMATIKA
Operator Kegunaan Prioritas
+ Penjumlahan 3
- Pengurangan 3
* Perkalian 2
/ Pembagian 2
% Sisa Pembagian 2
(modulus)
++ 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
22
OPERATOR MATEMATIKA
<HTML>
<HEAD>
<TITLE>Operasi Matematika</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
[Link]("20 + 3 = " + (20 + 3) );
[Link]("<BR>");
[Link]("20 + 3 = " + (20 - 3) );
[Link]("<BR>");
[Link]("20 * 3 = " + (20 * 3) );
[Link]("<BR>");
[Link]("20 / 3 = " + (20 / 3) );
[Link]("<BR>");
[Link]("20 % 3 = " + (20 %
3) );
[Link]("<BR>");
//-->
</SCRIPT>
</BODY> 23
</HTML>
OPERATOR PEMBANDING
DAN LOGIKA
Operator Keterangan Kategori
== Kesamaan Pembanding
!= Ketidaksamaan Pembanding
< Kurang dari Pembanding
<= Kurang dari atau sama dengan Pembanding
> Lebih dari Pembanding
>= Lebih dari atau sama dengan Pembanding
! Bukan Logika
&& Dan Logika
|| Atau Logika
? Kondisi ? Nilai Benar : Nilai Salah Pembanding
24
TERIMAKASIH