1 of 8
Java Script
Pengenalan Java Script
Java script adalah scripting yang tidak terlalu sulit, bahasa ini akan diselipkan
diantara coding HTML atau pada file tersendiri yang nanti akan dipanggil oleh kode
HTML. Bahasa ini dapat dijalankan disemua browser seperti Netscape Navigator,
Internet Explorer, Opera dan sebagainya.
Java script mampu merespon berbagai event yang ada, membuat teks/image yang
dinamik, melakukan validasi/pengecekan, membaca dan mencetak perintah HTML.
Memulai Java Script
Bentuk dasar dari penulisan java script adalah :
<script language="javascript">
// coding javascript
</script>
setiap statement javascript dapat diakhiri dengan semicolon(;) atau tanpa
semicolon(;).
Untuk menandakan komentar digunakan tanda // atau /* */
contoh :
<html>
<head><title>Contoh JavaScript</title></head>
<body>
<script type="text/javascript">
[Link]("Hello World!")
</script>
</body>
</html>
Perintah java script ini biasanya diletakkan diantara:
Head, diantara tag pembukan <head> dan penutup </head>
body,<body></body>
External Script, perintah java script disimpan ke dalam file yang terpisah dengan file
html. Kemudian file tersebut akan dipanggil dari file html ini. file javascript tersebut
akan dipanggil dengan :
<script src="url">
</script>
url adalah nama file java script.
Variabel
Variabel digunakan untuk menyimpan data.
Nama variabel bersifat case sensitive artinya membedakan huruf besar dan huruf
kecil.
Nama variabel harus dimulai dengan huruf atau garis bawah(underscore), tidak
boleh diawali dengan special karakter atau bilangan.
contoh pendeklarasian variabel :
var a, b, B;
var name="Yulianto";
a = 5;
b = "hallo";
Data Type
Data merupakan jenis data yang tersimpan dalam suatu variable.
Data type dalam javascript dapat berupa Number, String atau Boolean.
Smart Media Solusindo Tutorial
2003[Link]
2 of 8
Data Type Contoh
Number X=10
String Nama=”asrul muan”
Boolean Found=true
Operator
Operator aritmetik
+, - , *, / , %, ++, --
contoh:
var a = 5 + 20; // a = 25
Operator pemberian nilai (assignment operator)
=, +=, -=, *=, /=, %=
contoh :
var c = 5;
c += 7; // c = c + 7; => 12
Operator perbandingan
<=, >=, <, >, ==, !=
contoh :
var d = (a < b);
Operator logika
&&, ||, !
contoh :
var a= true;
var b= false;
var c= a && b; // c = false
var d= a || b; // d = true
var e= ! a; // e = false;
Operator string
contoh :
var a = "Hello ";
var b = "world";
var c = a + b; // c = a + b; => "Hello World"
a += b; // a = a + b; => "Hello World"
Percabangan
if ... else
sintaks :
if (kondisi)
{
// pernyataan yang dieksekusi jika kondisi dipenuhin
}
else
Smart Media Solusindo Tutorial
2003[Link]
3 of 8
{
// pernyataan yang dieksekusi jika kondisi tidak dipenuhi
}
contoh :
var a = 5;
var b = 6;
if (a < b)
{
[Link] (a + " < " + b);
} else
{
[Link] (a + " > " + b);
}
if ... else if ... else
contoh :
var a = 5;
var b = 6;
if (a < b)
{
[Link] (a + " < " + b);
} else if (a > b)
{
[Link] (a + " > " + b);
} else
{
[Link] (a + " = " + b);
}
switch
switch (var)
{
case value : //ekspresi; break;
...
...
default : //ekspresi; break;
}
contoh :
switch (hari)
{
case 1 : [Link]("senin"); break;
case 2 : [Link]("selasa"); break;
case 3 : [Link]("rabu"); break;
...
default : [Link]("minggu"); break;
}
Pengulangan
fungsi ini sering digunakan saat penulisan program.
Smart Media Solusindo Tutorial
2003[Link]
4 of 8
beberapa statement perulangan(looping) :
while
Blok statement akan dijalankan apabila kondisi dipenuhi(true)
syntaks:
while (kondisi)
{
statement/coding yang akan dijalankan
}
contoh:
var i=1;
while (i<=10){
[Link]("Line ke-" + i);
[Link]("<br>");
i++;
}
do...while
Blok statement akan dijalankan sekali, kemudian akan terus dijalankan apabila
kondisi dipenuhi(true)
syntaks:
do{
statement/coding yang akan dijalankan
} while(kondisi)
contoh:
var i=0;
do{
i++;
[Link]("Line ke-" + i);
[Link]("<br>");
}while(i<10)
for
Blok statement akan dijalankan sejumlah angka yang sudah ditentukan
syntaks:
for(initial; kondisi; penambahan){
statement/coding yang akan dijalankan
}
contoh:
for (var i=1 i<=10 ; i++){
[Link]("Line ke-" + i + "<br>");
}
Function
adalah penggalan program yang mempunyai fungsi tertentu yang dapat
dipergunakan berulang kali.
cara mendeklarasikan fungsi(function):
function namafunction(arg1, arg2, dsb)
{
perintah yang akan dikerjakan oleh fungsi ini.
}
Smart Media Solusindo Tutorial
2003[Link]
5 of 8
contoh :
function tambah(a, b)
{
c = a + b;
return c;
}
dan kemudian function ini dapat dipanggil dengan :
total = tambah (5, 7);
Object String
Object string digunakan untuk melakukan operasi terhadap teks(string)
beberapa property object String :
- Property Length
contoh :
var strNama = "Yulianto";
[Link] ([Link]);
hasil :
8
- property fontcolor()
contoh :
[Link]('red');
beberapa method object string:
- Method indexOf()
- Method substr()
- Method toLowerCase() dan toUpperCase()
contoh :
[Link]();
Object Date
digunakan untuk melakukan operasi date dan time
contoh :
var tanggal = new Date()
[Link]([Link]())
[Link]([Link]())
Methods Keterangan
getDate() Tanggal 1-31
getDay() Hari 0-6 (0=sunday...)
getMonth() Bulan 0-11 (0=january...)
getFullYear() Tahun 4 digit (2002,2004...)
getYear() Tahun 2 digit
getHour() Jam(0-23)
getMinutes() Menit(0-59)
getSeconds() Detik (0-59)
getMilliseconds() 1/1000 Detik (0-999)
Math Object
Smart Media Solusindo Tutorial
2003[Link]
6 of 8
DOM
Merupakan kumpulan object yang dimiliki browser (termasuk tag HTML) yang
tersusun dengan hierarki tertentu. Tiap Object memiliki properti, methods dan
collection untuk mengakses element-element didalam suatu browser.
window
history location document frames navigator event
selection all applet form link anchor image plug-in frames script body stylesheet
Hierarki DOM
Window Object
Properti:
Property Keterangan
name Menentukan nama window
location Untuk link atau mereferensi ke file tertentu
navigator Jenis browser
Status Menampilkan teks pada status bar
document Object dokumen
Methods:
Methods Keterangan
alert() Menampilkan pop up window
confirm() Menempilkan confirm dialog box
prompt() Menampilkan Prompt window
open() Membuka window
[Link]("url", "windowName",
"windowAttributes")
close() Menutup window
focus() Focus pada suatu element
setInterval() Memanggil fungsi setiap kali interval terpenuhi
setTimeout() Memanggil fungsi satu kali, setelah timeout terpenuhi
Window
value Description
Attribute
copyhistory boolean 'Go'menu history of opener window
dependent boolean subwindow closes if opener closes
Smart Media Solusindo Tutorial
2003[Link]
7 of 8
directories boolean hot buttons, such as "What's new"
pixel
height height of new window
count
location boolean URL location display
menubar boolean Note: is always present in Macs
resizable boolean Note: Mac windows always resizable
pixel
screenX horizontal position of top left corner of window
count
pixel
screenY vertical position of top left corner
count
scrollbars displayed if doc or image is larger than specified
scrollbars boolean
size
status boolean status area at bottom of window
toolbar boolean back, forward, reload, etc buttons
pixel
width width of new window
count
Document Object
Property Keterangan
anchors Link suatu document
body Body dari dokumen
title Title dokumen
forms Forms array
images Gambar array
Methods Keterangan
open() Membuka stream data
close() Menutup stream data
write() Menulis teks pada dokumen
writln() Menulis teks pada dokumen
getElementById Memeriksa semua element berdasar id
getElementByName Memeriksa semua element berdasar name
Form Object
Property Keterangan
action Menentukan action dari form
elements Array dari semua element anggota form
length Jumlah element dari form
methods Menentukan Methods attribute
name Nama form
target Target form
Smart Media Solusindo Tutorial
2003[Link]
8 of 8
Methods Keterangan
reset() Menghapus isi form
submit() Mengirim isi form ke halaman action yang telah
ditentukan
Smart Media Solusindo Tutorial
2003[Link]
