Pemrograman Web (Java Script)

(1)

Mengenal JavaScript dan Struktur JavaScript

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009

1. Pendahuluan

Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis, kode langsung di tulis di dalam dokumen HTML dan sangat mudah terlihat, sedangkan di Java, kode sudah berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab untuk menterjemahkan program di dalam applet tersebut setiap kali halaman HTML yang memuat applet tersebut dipanggil oleh browser. Dibandingkan dengan applet java yang cukup lambat dibuka oleh browser, bisa kita katakan bahwa Javascript cukup cepat di panggil(di load) oleh navigator.

Kelebihan JavaScript:

1. Cepat, Anda meletakan JavaScript di dalam file HTML, jadi bisa sekaligus dan cepat dalam memanipulasi halaman Web. Program yang dibuat oleh JavaScript juga dapat langsung dicoba pada browser tanpa harus dikompilasi terlebih dahulu, sehingga memotong waktu pembuatan jadi lebih cepat.

2. Mudah, Karena JavaScript hanya memiliki sedikit sintaks, penghafalannya tidak sulit dilakukan. Semua perintahnya juga memiliki bahasa Inggris sederhana yang mudah dihafal dan dimengerti. Walaupun JavaScript memiliki banyak kesamaan dengan Java, ia tidak memiliki aturan maupun sintaks yang serumit Java. Setiap orang yang memiliki kemampuan programming terbataspun dapat menggunakannya.

3. Terbuka, JavaScript tidak terikat oleh system operasi, pereangkat keras, atau program tertentu. Ia bersifat terbuka dan fleksibel. JavaScript dapat

(2)

Mengenal JavaScript dan Struktur JavaScript

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009

dibuat pada komputer PC yang menggunakan system operasi Windows dan dibaca oleh komputer mainframe yang memakai UNIX, misalnya. 4. Ukurannya Kecil, Program JavaScript relative berukuran sangat kecil jika

dibandingkan dengan program-program yang dibuat dengan Java. Hal ini dapat mengurangi beban penyimpanan pada komputer server dan mempersingkat waktu download-nya.

Kekurangan JavaScript:

1. Kemampuan terbatas, JavaScript walaupun mampu memperindah sebuah halaman Web, ia tidak dapat digunakan untuk melakukan tugas-tugas yang lain seperti membuat program aplikasi sendiri.

2. Objek terbatas, JavaScript hanya memiliki beberapa objek yang sudah built-in pada struktur bahasanya. Anda tidak dapat membuat kelas-kelas yang bisa menampung objek-objek tambahan sepertti pada Java.

3. Tidak dapat disembunyikan, Setiap orang dapat membaca program JavaScript yang Anda buat. Hal ini dapat mengakibatkan pencontekan atau penggunaan program Anda secara luas dan tidak terkendali. Siapa saja yang membuka halaman Web yang berisi skrip JavaScript, ia dapat meniru dan mengambil skrip tersebut untuk kepentingan pribadi.

2. Struktur JavaScript 2.1Struktur JavaScript

Program yang ditulis di dalam bahsa JavaScript harus diberi tanda atau tag <SCRIPT> … </SCRIPT>. Semua kata, pernyataan, atau ekspresi yang terdapat di dalam tag <SCRIPT> … </SCRIPT> adalah skrip JavaScript.

Tag JavaScript ini memiliki dua buah atribut yang dapat Anda gunakan salah satunya saja, jika Anda menginginkan:

1. JavaScript ditulis di dalam dokumen HTML. 2. JavaScript ditulis di dalam file terpisah. 2.1.1 JavaScript ditulis di dokumen HTML

Dibawah ini adalah atribut tag JavaScript yang standar digunakan. Tag ini menandai dimulainya kode program JavaScript yang ditulis dengan bahasa JavaScript.

*** script JavaScript ditulis di sini *** </SCRIPT>

*** skrip JavaScript terdapat di sini *** </SCRIPT>

(3)

Mengenal JavaScript dan Struktur JavaScript

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Contoh:

<TITLE>Contoh Webpage Saya</TITLE> <SCRIPT LANGUAGE = “JavaScript”>

*** skrip JavaScript ditulis di sini *** </SCRIPT>

</HEAD> <BODY>

*** kode HTML ditulis di sini *** </BODY>

</HTML>

2.1.2 JavaScript diletakan pada file terpisah Atribut yang digunakan adalah:

Diantara tag <SCRIPT> … </SCRIPT> Anda tidak perlu lagi menuliskan program JavaScript, karena sudah dibuat di dalam file terpisah yang harus memiliki akhiran .JS. cara ini sangat membantu ketika Anda berniat memanggil sebuah program JavaScript secara berulang-ulang dari halaman Webpage yang berbeda.

Contoh:

<TITLE>Contoh Webpage Saya</TITLE>

<BODY>

*** kode HTML *** </BODY>

</HTML>

Letak JavaScript dalam HTML Pada bagian head

Penulisan skrip JavaScript yang paling umum digunakan adalah pada bagian HEAD. Semua definisi JavaScript ditulis dan dipanggil pada bagian HEAD.

Contoh:

<TITLE>jJavaScript pada bagian HEAD</title> <SCRIPT LANGUAGE = “JavaScript”>

*** skrip JavaScript ditulis di sini *** </SCRIPT>

</HEAD> <BODY>

*** kode HTML *** </BODY>

</HTML>

(4)

Mengenal JavaScript dan Struktur JavaScript

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009

Anda juga bisa menuliskan definisi JavaScript pada bagian HEAD dan memanggilnya pada bagian BODY.

Contoh:

<TITLE>jJavaScript pada bagian HEAD</title> <SCRIPT LANGUAGE = “JavaScript”>

*** skrip JavaScript ditulis di sini *** </SCRIPT>

</HEAD> <BODY>

*** memanggil skrip JavaScript *** </SCRIPT>

*** kode HTML *** </BODY>

</HTML>

Pada bagian body

Cara ini sama saja seperti cara diatas, tetapi jarang digunakan. Contoh:

<TITLE>JavaScript pada bagian BODY</TITLE> </HEAD>

<BODY>

*** skrip JavaScript ditulis di sini *** </SCRIPT>

*** kode HTML *** </BODY>

</HTML>

3. Skrip JavaScript

3.1Membuat skrip JavaScript

Langkah-langkah membuat skrip JavaScript:

1. Jalankan program penyunting teks, misalnya Notepad pada Windows. 2. Ketikakan dokumen HTML yang mengandung skrip JavaScript berikut

ini:

<TITLE>Script JavaScript Pertama Ku</TITLE> <SCRIPT LANGUAGE = "JavaScript"> var

nama = prompt("Siapa nama Anda?","none");

document.write("<h1><center>" + "Wahyu mengucapkan..." + "</h1>"); document.write("<h3>Haloo " +nama+ ". Selamat Datang di JavaScript!</h3>"); </SCRIPT>

</HEAD> <BODY></BODY> </HTML>

(5)

M

Mengenal

Created by Wah 3. S 4. P 5. F 3.2Men JavaS brow 1. J

In 2. B 3. F la

4. K

LAT Buat

JavaScript

hyu Nurjaya W Simpan file t Pada kotak S File Name m njalankan sk

Setelah Script, Anda wser apa saja

Jalankan pro nternet Expl Buka file HT File HTML y

ayer browse

Ketikan nam

TIHAN!!! tlah sebuah h

t dan Struk

WK, S.T., M.Ko tersebut. Save As Type misalnya Con

krip JavaSc Anda memb a bisa memb a.

ogram Web lorer). TML yang A

yang menga er Anda, seba

ma Anda, klik

halaman We

ktur JavaSc

m. 2009 e, pilih All F ntoh1.HTM a cript

buat dokume buka dan me browser (m Anda buat dia

andung skrip agai berikut:

k OK, hasil a

ebsite dengan

cript

Files. atau Contoh

en HTML y enjalankann misalnya Ne

atas. p JavaScript

akhirnya seb

n output seba

1.HTML.

ang mengan nya pada pro etscape Navi

akan ditamp

bagai berikut

agai berikut:

ndung skrip ogram Web igator atau

pilkan pada

(6)

M

Mengenal

Created by Wah Setel

Setel

JavaScript

hyu Nurjaya W lah prompt t

lah Anda isi

t dan Struk

WK, S.T., M.Ko ersebut And

prompt ini,

ktur JavaSc

m. 2009 da isi, tekan t

maka outpu

cript

tombol OK;

ut terakhir ya

output selan

ang diharapk

njutnya :

kan adalah:

(7)

M K N P M

JU

FAK

U

MATA KUL KODE MAT NAMA DOS PROGRAM MATA KUL

URUSAN

KULTAS

UNIVERS

LIAH TA KULIAH SEN

STUDI LIAH PRAS

BAHA

N MANA

TEKNIK

SITAS K

SYARAT

AN A

AJEMEN

K DAN I

KOMPUT

2009

: KAIT-I : -: WAHY : S1 : KAIT-I

AJAR

INFORM

ILMU K

TER IND

I (JAVASCR YU NURJAY

(HTML)

MATIKA

OMPUT

DONESIA

RIPT) YA WK, S.T

A

TER

A

(8)

Komputer Aplikasi IT-II (JAVASCRIPT) Deskripsi Matakuliah:

Mata kuliah Komputer Aplikasi IT-II (JavaScript) merupakan mata kuliah yang memberikan pokok bahasan mengenai desain Website yang lebih interaktif. Dengan menggunakan pemrograman JavaScript selain mudah untuk dipelajari karena memiliki sintak yang sedikit dan besar file yang cukup kecil dengan format HTML, juga mampu memberikan solusi animasi yang bisa diandalkan serta logika hitung yang cukup tangguh. JavaScript tidak dapat berdiri sendiri tetapi JavaScript hidup pada sintak HTML. Topik-topik yang akan dibahas: Mengenal JavaScript dan Struktur JavaScript; Nilai, Variabel dan Literal; Operator dan Ekspresi; Pernyataan (Statement); Fungsi (Function); Event; Objek; Hosting Website.

Prasyarat: Komputer Aplikasi IT-I (HTML) Bobot: 2 sks

(9)

Nilai, Variabel dan Literal

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 4. Nilai, Variabel dan Literal

Nilai

Nilai adalah besaran yang digunakan untuk melakukan perhitungan, menulis, dan sebagainya. Dalam JavaScript terdapat beberapa macam nilai:

1. String adalah karakter yang berupa huruf, kata, simbol, atau angka. String harus ditulis dengan tanda kutip ganda (“) atau tunggal (‘). 2. Numerik adalah berupa bilangan atau angka yang bersifat matematis

(bisa dikalikan, dijumlahkan dan sebagainya).

3. Boolean adalah nilai yang hanya memiliki dua nilai true (benar) atau false (salah).

4. Null adalah nilai yang tidak memiliki isi sama sekali, tidak sama dengan karakter kosong atau nol (0).

Variabel

Variabel adalah tempat Anda menyimpan nilai-nilai pada JavaScript. Aturan penamaan variabel

Dalam JavaScript penamaan variabel memiliki beberapa aturan yaitu:

1. Harus diawali dengan karakter (huruf atau garis bawah), tidak boleh diawali dengan angka atau simbol.

Variabel Keterangan

x1 Benar nama_orang Benar _nama_kekasih Benar 90_jumlah Salah %total Salah

2. Tidak boleh menggunakan spasi.

Variabel Keterangan

nama_orang Benar

nama orang Salah

3. Kapitalisasi (huruf besar dan huruf kecil) dibedakan.

Contoh: nama ≠ Nama ≠ NAMA

4. Tidak boleh menggunakan reserved word, atau kata-kata yang sama dengan perintah yang ada pada JavaScript.

abstract boolean break byte case

catch char class const continue

default do double else extends

false final finally float for

function goto if implements import

in instance of int interface long

native new null package private

protected public return short static

super switch synchronized this throw

throws transient true try var

(10)

Nilai, Variabel dan Literal

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Memberi nilai untuk variabel

Syntax:

var namavariabel = nilai Ket:

namavariabel : nama untuk variabel

nilai : nilai yang ingin dimasukan kedalam variabel Contoh:

var nama = “Adi Kurniadi” var x = 5.3

var isi = null var pria = true

Konstanta dan Literal

Suatu nilai pasti yang tidak dapat diubah-ubah. Contoh:

total = subtotal + 1000

Ket: nilai 1000 adalah konstanta / literal. Sedangkan total dan subtotal adalah variabel.

Jenis-jenis konstanta / literal: 1. Literal integer

Suatu bilangan bulat tanpa pecahan. Dapat berupa angka desimal, hexadesimal, atau oktal.

2. Literal floating-point

Suatu bilangan pecahan atau bilangan berpangkat.

Literal Arti

3.14 3,14

2E3 (2e3) 2 pangkat 3

3. Literal string

Suatu karakter yang berisi huruf, angka atau simbol-simbol lainnya. 4. Literal Boolean

(11)

O

Operator d

Created by Wah

5. Operato Operato O mem O mem Cont

x + 5

x dan + ada 10 ada Operato O 1 2 3 L B in

dan Ekspres

hyu Nurjaya W

or dan Eksp or Operator ada mberikan suat Operan adal mberikan suat toh: = 10

5 adalah oper alah operator alah hasil or unary Operator yan 1. Incremen Contoh: tot artinya varia ditambah 1. tot artinya varia variabel subto 2. Decreme Contoh: tot artinya varia dikurangi 1. tot artinya varia variabel subto 3. Negasi (l

Operator LATIHAN!! Buatlah seb ncrement me

si

WK, S.T., M.Ko

presi alah perintah tu hasil. lah data-da tu hasil. ran

ng hanya men nt (penambah tal = subtotal++

bel subtotal dima tal = ++subtotal abel subtotal ditam

otal.

nt (penguran tal = subtotal--

bel subtotal dima tal = --subtotal abel subtotal diku

otal. lawan) : -

ini akan me !!

buah progr elakukan pen

m. 2009

h yang mem ata yang di

ngolah satu han) : ++ +

asukan ke variabe l

mbah 1 terlebih ngan) : --

asukan ke variabe

rangi 1 terlebih

embalikan ni

ram untuk nambahan n

manipulasi n imanipulasi

nilai atau op

l total terlebih da

dahulu, lalu nilai

l total terlebih da

dahulu, lalu nilai

ilai operan.

membuktik nilai 1. Outpu

nilai atau va oleh opera

peran saja.

ahulu, lalu nilai v

i variabel subtota

ahulu, lalu nilai v

i variabel subtota

kan bahwa ut yang dihar

ariabel dan ator untuk

variabel subtotal

al dimasukan ke

variabel subtotal

al dimasukan ke

a operator rapkan:

(12)

O

Operator d

Created by Wah

Operato O C X T O (m L B d Operato O a C Operato O n O d d d

dan Ekspres

hyu Nurjaya W

or binary Operator yan

Contoh: X + Y = 10

Tanda + adala Operator binar modulus)). LATIHAN!! Buatlah prog dengan keten or penugasa Operator yan adalah operat Contoh: Operator = += -= *= /= %= or perbandi Operator yan nilai yang lai Operator yan dengan (= =) dari (<), lebih dengan (<=).

si

WK, S.T., M.Ko

ng mengolah

h operasi bina ry pada JavaS

gram untuk m ntuan output

ng memberi tor sama den

total = 100 total+=bia total-=biay total*=biay total/=biay total%=biay ingan ng digunaka in, untuk me ng termasuk

), tidak sama h besar atau

m. 2009

h dua nilai at

ary, karena me Script adalah

memberikan sebagai beri

i nilai kepa ngan (=). Contoh 0 aya ya ya ya ya

an untuk me endapatkan h kedalam op a dengan (!= u sama denga

au dua opera

engolah dua bu operator arit

gambaran c ikut:

ada variabel

Nilai total = total = tota total = tota total = tota total = tota total = tota

embandingk hasil benar at perator perba =), lebih bes an (>=), dan

an.

uah operan ya tmatika ( +,

contoh opera

. Contoh ya

Arti

= 100 al + biaya al - biaya al * biaya al / biaya al % biaya

kan suatu ni tau salah. andingan ad sar dari (>), n kurang dari

aitu X dan Y. -, *, /, % ator binary, ang umum ilai dengan dalah: sama lebih kecil i atau sama

(13)

Operator dan Ekspresi

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009

Operator logikal

Operator logikal sebenarnya hampir sama dengan operator perbandingan , yang fungsinya juga membandingakan dua buah nilai untuk memberikan hasil benar atau salah.

Contoh:

Operator Arti Keterangan

&& AND (dan) Kedua nilai yang dibandingkan harus sesuai dengan kriteria. || OR (atau) Salah satu nilai yang dibandingkan harus sesuai dengan kriteria ! NOT (bukan) Nilai yang dibandingkan merupakan kebalikannya

Operator string

Operator yang mengolah nilai string, yaitu nilai yang berupa karakter (bukan angka atau ekspresi aritmatik).

Contoh:

var pesan = “aku” + “cinta” + “kamu”

Ekspresi

Pengertian ekspresi

Ekspresi adalah kode-kode pemrograman yang digunakan untuk menampilkan perhitungan atau penugasan.

Ekspresi perbandingan Syntax:

(kondisi)? nilaibenar : nilaisalah Contoh:

Misal jika si A mendapat nilai ujian lebih besar dari 80, ayahnya akan membelikan mobil sebagai hadiah. Tetapai jika tidak, ayahnya hanya akan membelikan sepada.

Hadiah = (nilai_ujian > 80)? “mobil” : “sepeda”

Keterangan:

Jika variabel nilai_ujian lebih besar dari 80 (kondisi benar), maka isi variabel hadiah adalah “mobil”. Sedangkan jika variabel nilai_ujian tidak lebih besar dari 80 (kondisi salah), maka isi variabel hadiah adalah “sepeda”.

(14)

P

C 6

Pernyataan

Created by Wah 6. Pernyat Pernyata mengend Pernyat Digu Synt Kete Kond Eksp Eksp LAT Buat if-els - J m - O Setel

n (Stateme

hyu Nurjaya W taan (Statem aan adalah dalikan alur taan if-else unakan untuk ax: if (kondisi) { else { erangan:

disi : k

presi-1 : e presi-2 : e TIHAN!!!

tlah program se):

Jika nilai An mobil. Tetap Output yang

lah Anda isi

ent)

WK, S.T., M.Ko ment) kata kunc program Jav k membandi ) ekspresi-1} ekspresi-2} kondisi yang ekspresi yan ekspresi yan

m untuk mem nda lebih b

i jika tidak l diharapkan

nilai diatas,

m. 2009 i yang dig vaScript And ngkan suatu

g dibandingk ng akan dijal ng akan dijal

mbandingkan esar dari 80 lebih besar d

sebagai beri tekan tomb

gunakan un da. u kondisi. kan

lankan jika k lankan jika k

n kondisi seb 0, maka An dari 80, Anda

ikut: ol OK.

ntuk menen kondisi benar kondisi salah bagai beriku nda akan me

a mendapatk

12

tukan dan r h ut (gunakan endapatkan kan sepeda.

(15)

P

Pernyataan

Created by Wah Pernyat

Perny menj diten Synt

LAT Buat “uan kuran saya Outp

Pernyat Perny berul Sinta

n (Stateme

hyu Nurjaya W taan while

yataan wh jalankan ek ntukan bernil

ax:

while (kond { TIHAN!!!

tlah program ng saya seka ng dari 1000

lebih dari 1 put program

taan for yataan for b lang-ulang u ax:

for ( kondi {

ent)

WK, S.T., M.Ko hile diguna kspresi beru

lai benar. disi) ekspresi }

m dengan kon arang jumlah

00, saya aka 0000, maka yang dihrap

berfungsi me untu (for) ko si_awal; kondi ekspresi }

m. 2009 akan untuk

ulang-ulang

ndisi sebagai hnya 1000. an menabun

saya akan b pkan:

elakukan sua ondisi yang te

isi_akhir; kena

melakuka selama (

i berikut: Selama (wh ng 1000 setia erhenti men

atu loop atau elah ditentuk aikan)

an suatu l (while) kon

hile) uang s ap bulan. Se

abung.”

u menjalanka kan.

13

loop atau ndisi yang

saya masih etelah uang

(16)

P

Pernyataan

Created by Wah LAT Soal perny Pernyat

Perny sedan Cont

LAT Buat outpu

n (Stateme

hyu Nurjaya W TIHAN!!!

sama denga yataan for! taan break yataan brea ng dijalanka toh:

var counter var x = 0 while (coun {

} document.w TIHAN!!!

tlah program ut yang diha

ent)

WK, S.T., M.Ko an soal latiha

ak berfungs an, dan melan

r = 1 nter <= 10)

x += 1 counter if (coun else

write (x)

m untuk pem arapkan seba

m. 2009 an pada pern

si untuk me njutkan ke b

0 r++ nter == 5)

{ break } { continue }

mbuktian pem agai berikut:

nyataan whil

enghentikan baris skrip di

makaian pern

le, tetapi loo

n eksekusi i bawah loop

nyataan bre

14

op gunakan

loop yang p tersebut.

(17)

Pernyataan (Statement) 15

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Pernyataan continue

Pernyataan continue juga berfungsi untuk menghentikan eksekusi loop. Tetapi pernyataan ini tidak menyebabkan keluar dari loop hanya melompati satu buah interasi loop yang berikutnya.

Contoh:

var counter = 1 var x = 0

while (counter < 5 ) {

counter++ if (counter ==3)

{ continue } else

{ x+=10}

}

document.write(x) Pernyataan for-in

Pernyataan for-in adalah pernyataan yang melakukan loop (pengulangan) di dalam sebuah objek.

Sintax:

for (counter in namaobjek) { ekspresi } Keterangan:

Counter : jumlah counter didalam objek (jumlah properti) Namaobjek : objek yang ingin dilakukan loop

Ekspresi : ekspresi yang dijalankan selama loop Contoh:

mobil.merek = “Toyota” mobil.tipe = “Starlet” mobil.warna = “abu-abu” mobilku = “ ”

for (counter in mobil)

{ mobilku += mobil[counter] + “ “ } Pernyataan with

Pernyataan with berfungsi untuk memberi tahu objek yang sedang Anda gunakan.

Sintax:

with (namaobjek) { ekspresi } Keterangan:

Namaobjek : objek yang ingin dijadikan acuan Ekspresi : ekspresi yang terdapat di dalam objek

(18)

Pernyataan (Statement) 16

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Contoh:

with (mobil)

{ merek = Toyota; tipe = Starlet; warna = abu-abu } Pernyataan var

Pernyataan var berfungsi untuk menugaskan suatu nilai kedalam variabel. Sintax:

var namavariabel = nilai Contoh:

var nama = “Adi” var x = 100 var pria = true Pernyataan komentar

Pernyataan komentar berfungsi untuk menerangkan baris-baris pada skrip JavaScript Anda, untuk memudahkan Anda dalam memahami setiap skrip JavaScript.

Sintax:

// komentar

Jika teks komentar panjangnya lebih dari satu baris, gunakan syntax: /* komentar

Komentar */

Contoh:

//skrip untuk menghitung jumlah tabungan var uang = 1000

/* jika variabel uang nilainya kurang dari 10.000 maka loop di bawahnya akan terus dijalankan */

while (uang <= 10000) { uang += 1000 }

(19)

Fungsi (Function) 17

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 7. Fungsi (Function)

Pengertian fungsi

Fungsi adalah sekumpulan kode-kode JavaScript yang jika dijalankan akan menghasilkan atau mengerjakan suatu tugas tertentu.

Membuat fungsi Syntax fungsi

Sintax:

function namafungsi (parameter) {

…

ekspresi

…

} Keterangan:

Namafungsi : nama untuk fungsi tersebut Parameter : nama untuk parameter fungsi

Ekspresi : semua ekspresi atau pernyataan yang merupakan isi dari fungsi

Letak fungsi

Terdapat dalam skrip JavaScript: <SCRIPT LANGUAGE = “JavaScript”> function fungsi1 ()

{

*** ISI FUNGSI1 *** }

</SCRIPT>

Dalam dokumen HTML letak fungsi ini adalah sebagai berikut: <HTML>

<HEAD><TITLE></TITLE> <SCRIPT LANGUAGE = “JavaScript”> function fungsi1 ()

{

*** ISI FUNGSI1 *** }

</SCRIPT> </HEAD> <BODY></BODY> </HTML>

Aturan pembuatan fungsi

Ada beberapa aturan sederhana dalam membuat fungsi, yaitu: 1. Diawali dengan kata function

2. Nama fungsi bisa apa saja, tetapi harus dapat menjelaskan “fungsi” dari fungsi tersebut.

(20)

Fungsi (Function) 18

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009

3. Nama fungsi dapat disertai oleh parameter fungsi tersebut yang diapit oleh tanda kurung.

4. Isi fungsi ditulis diantara tanda kurung kurawal {…}.

5. Di setiap akhir frase fungsi, untuk memisahkan antara satu frase dengan frase lainnya digunakan tanda titik koma (;). Pada frase terakhir Anda tidak perlu mengetikan tanda titik koma ini.

Parameter fungsi

Fungsi dapat dibuat tanpa atau dengan menggunakan parameter. Contoh fungsi tanpa parameter:

Sintax:

<SCRIPT LANGUAGE = “JavaScript”> function fungsi1 ()

{

*** ISI FUNGSI1 *** }

</SCRIPT> Fungsi: function garis() {

document.write(“<hr>”) }

Contoh fungsi dengan parameter: Sintax:

<SCRIPT LANGUAGE = “JavaScript”> function fungsi1 (parameter)

{

*** ISI FUNGSI1 *** }

</SCRIPT> Fungsi:

function penjumlahan(x,y) {

var z = x + y; document.write(z) }

Memanggil fungsi

Memanggil fungsi dari dalam skrip JavaScript Sintax1: (pada bagian HEAD)

<HTML>

<HEAD><TITLE></TITLE> <SCRIPT LANGUAGE = “JavaScript”> function namafungsi ()

{ *** ISI FUNGSI *** } namafungsi()

</SCRIPT>

(21)

F

Fungsi (Fu

Created by Wah S < < < fu < < < < < < < L B in s d b d Memang S < fu <

unction)

hyu Nurjaya W Sintax2: (pad <HTML> <HEAD><TITL <SCRIPT LANGU unction namaf { ** </SCRIPT> </HEAD> <BODY> <SCRIPT LANGU namafungs </SCRIPT> </BODY> </HTML> LATIHAN!! Buatlah sebu ni berisi pe sebanyak lo dengan keten besar. Fungs diharapkan a

ggil fungsi d Sintax: <SCRIPT LANGU unction namaf { … </SCRIPT>

WK, S.T., M.Ko da bagian BO LE></TITLE>

UAGE = “JavaS fungsi () ** ISI FUNGSI

UAGE = “JavaS si()

uah function erintah untu oop yang d ntuan pada s si dipanggil adalah sebaga

dari dalam UAGE = “JavaS fungsi () … namafungsi()

m. 2009 ODY) Script”> *** } Script”>

n dengan nam uk mencetak dikehendaki

setiap loop u l dari dalam

ai berikut: fungsi Script”> ) … }

ma fungsiny k kalimat “ (loop guna ukuran huruf m skrip Jav

ya adalah hu “Aku bisa J akan pernya f berubah da vaScript. Ou

19

uruf, fungsi JavaScript” ataan for), ari kecil ke utput yang

(22)

F

Fungsi (Fu

Created by Wah C fu

L L o

Memang S < < < fu fu

unction)

hyu Nurjaya W Contoh:

unction faktor {

if el

}

LATIHAN!! Lengkapi co output sebag

ggil fungsi d Sintax: <HTML> <HEAD><TITL <SCRIPT LANGU

unction namaf { ** unction namaf

{ ** na }

</SCRIPT>

WK, S.T., M.Ko ial (x) ((x == 0) ||

{ return se

{

}

ontoh pengg ai berikut:

dari fungsi y

LE></TITLE> UAGE = “JavaS fungsi1 () ** ISI FUNGSI fungsi2 () ** ISI FUNGSI amafungsi1()

m. 2009 (x == 1)) n 1 }

hasil_faktori return hasil_

galan progra

yang lain

Script”> 1 *** } 2 ***

ial = (x * fakt _faktorial

am diatas se

orial (x-1));

ehingga me

20

(23)

F

Fungsi (Fu

Created by Wah < < < L L fu d

Fungsi B Fungsi p F s b S

K S B m

unction)

hyu Nurjaya W </HEAD> <BODY></BOD </HTML> LATIHAN!! Lihat pada la fungsi garis t dalam fungsi

Built-In parseInt() Fungsi parse string menja basis (dasar b Sintax:

parseInt (st Keterangan:

String : n

Basis : mengubah str

WK, S.T., M.Ko DY>

atihan sub p tanpa param i huruf. Outp

eInt() bergun adi nilai int

bilangan) ter tring, basis)

nilai string y nilai basis ring.

m. 2009 pokok bahas meter kemudi put yang dih

na untuk m teger (bilan rtentu.

yang ingin di s (dasar bi

an 7.3.1, An ian fungsi ga arapkan ada

mengubah ata gan bulat)

iubah menja ilangan) ya

nda tambahk aris ini anda alah sebagai b

au mengkon dengan me

adi integer ang digunak

21

kan sebuah a panggil di

berikut:

nversi nilai nggunakan

(24)

F

Fungsi (Fu

Created by Wah Fungsi p F s b S Fungsi i F m b S Fungsi e F S C < < < O S to s te

unction)

hyu Nurjaya W parseFloat() Fungsi parse string menja berpangkat). Sintax: parseFloat isNaN() Fungsi isNaN menentukan bukan bilang Sintax: isNaN (nila eval() Fungsi eval() Sintax: eval (ekspr Contoh: <HTML> <HEAD> <TITLE>Co <SCRIPT L hitung = p document.w </SCRIPT> </HEAD> <BODY></BOD </HTML> Output progr Setelah And ombol OK, semua opera ersebut. Out

WK, S.T., M.Ko )

eFloat() berg adi nilai flo

(string)

N() (kepanj apakah suatu gan numerik

ai)

) berguna un esi)

ontoh Fungsi H LANGUAGE = "J prompt("Masuk write("Hasil da > DY> ram: a memasuka maka akan si aritmatika tput setelah A

m. 2009 guna untuk m oating-point

angan dari u nilai berup (not a numb

ntuk menghit

Huruf</TITLE JavaScript"> kan ekspresi ar ari ", hitung, "

an ekspresi secara otom a yang Anda Anda tekan t

mengubah at (bilangan p

is not a nu pa bilangan n ber).

tung suatu ek

ritmatika: ","" " adalah = ",e

aritmatika matis fungsi

a inputkan p tombol OK a

tau mengkon pecahan atau umber) berg numerik (nu kspresi aritm ") eval(hitung));

kemudian A eval() ini m pada prompt adalah sebag

22

nversi nilai u bilangan guna untuk umber) atau matika. Anda tekan menghitung JavaScript gai berikut:

(25)

F

Fungsi (Fu

Created by Wah Fungsi e F S Fungsi u F A S Contoh f <HTML> <HEA <TITL <SCRI docum docum docum docum docum docum docum docum docum docum docum docum docum docum docum </SC </HE <BODY>< </HTML>

unction)

hyu Nurjaya W escape() Fungsi escap Sintax: escape (“ka unescape() Fungsi unes ASCII. Sintax: unescape ( fungsi parseI AD> LE>Contoh Fu IPT LANGUAGE ment.write("<h ment.write("pa ment.write("pa ment.write("<h ment.write("pa ment.write("pa ment.write("pa ment.write("<h ment.write("Ap ment.write("Ap ment.write("Ap ment.write("<h ment.write("Ko ment.write("<h ment.write("Ko RIPT> EAD> </BODY> >

WK, S.T., M.Ko pe() berguna arakter”) cape() berg “%string”) Int(), parseF ungsi Huruf</T E = "JavaScrip h3>Contoh Fun

rseInt dari '10 rseInt dari 'Ad h3>Contoh Fun rseFloat dari ' rseFloat dari ' rseFloat dari ' h3>Contoh Fun pakah '100' ada pakah 100 adal pakah '100Ab' a

h3>Contoh Fun ode ASCII dari

m. 2009 untuk meng una untuk Float(), isNaN TITLE> pt"> ngsi parseInt() 0' basis 10 ada di' basis 10 ada ngsi parseFloa

+123.45' adala -123.45' adalah Adi' adalah ", ngsi isNaN()</ alah bukan bil lah bukan bila adalah bukan b ngsi escape()<

'&' adalah ", e ngsi unescape(

'61' adalah ka

ghasilkan kod

menghasilka

N(), escape()

</h3>"); alah ", parseIn alah ", parseIn

t()</h3>"); ah ", parseFloa

h ", parseFloa , parseFloat("A /h3>");

angan? ", isNa ngan? ", isNaN bilangan? ", i /h3>"); escape('&'),"<b ()</h3>"); arakter ", unes

de ASCII.

an karakter

) dan unesca

nt("100",10),"< nt("Adi",10),"< at("+123.45")," t("-123.45"),"< Adi"),"<br>"); aN("100"),"<br N(100),"<br>" sNaN("100Ab") br>"); cape('%61'),"<

23

dari kode ape(): <br>"); <br>"); "<br>"); <br>"); r>"); ); ),"<br>"); br>");

(26)

F

Fungsi (Fu

Created by Wah Output p

unction)

hyu Nurjaya W program:

WK, S.T., M.Ko

m. 2009

(27)

Event

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 8. Event

Pengertian event

Event adalah suatu aksi yang dilakukan oleh pemakai yang “memicu” jalannya skrip atau program JavaScript Anda.

Macam-macam event Click

Event Click terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat pada form.

Focus

Event Focus terjadi jika pemakai mengklik atau meletakan pointer mouse pada elemen form seperti teks, kotak cek, dan sebagainya. Jika elemen form diberi fokus, elemen tersebut akan menjadi aktif.

Blur

Event Blur adalah lawan dari event Focus. Event Blur terjadi apabila pemakai menyingkirkan fokus (pointer mouse) dari elemen form yang sebelumnya diberi fokus.

Change

Event Change terjadi apabila pemakai mengubah input atau masukan pada elemen form.

MouseOver

Event MouseOver terjadi apabila pemakai meletakkan pointer mouse di atas sebuah link.

Select

Event Select terjadi apabila pemakai memilih teks pada elemen form. Submit

Event Submit terjadi apabila pemakai mengklik tombol “Submit” pada elemen form.

Menjalankan event Event Handler

Event Handler adalah kode-kode JavaScript yang akan dijalankan apabila event dipicu.

Syntax untuk menjalankan program JavaScript pada suatu event: onNameEvent = “kode JavaScript”

Contoh:

onFocus = “document.write (‘Ini teks yang muncul’)”

jika pemakai meletakkan pointer mouse pada suatu field form, maka akan ditampilkan teks “Ini teks yang muncul”.

(28)

Event

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Memanggil event handler

Terdapat dua cara memanggil event Handler: 1. Memanggil event handler melalui fungsi.

Syntax:

onNameEvent = “namafungsi (parameter)”

2. Memanggil event handler dengan menjalankan kode JavaScript secara langsung.

Syntax:

onNameEvent = “kode JavaScript” Contoh event

Event onFocus

Pada contoh event onFocus ini, Anda akan membuat sebuah Guestbook atau buku tamu. Setiap kali Anda meletakkan pointer mouse pada kotak teks, maka pada baris status (status bar) akan ditampilkan keterangan mengenai kotak teks tersebut.

Program: <HTML> <HEAD>

<TITLE>Event onFocus</TITLE> </HEAD>

<BODY> <center>

<form name="guessbook" method="post" action=""> <table border="0" width="80%">

<tr>

<td colspan="3" align="center"><h2>My Guest Book</h2><hr></td> </tr>

<tr>

<td colspan="3" align="left"><b>My Guest Book</b></td> </tr>

<tr>

<td width="30%"><b>Nama</b></td> <td width="10%" align="center"><b>:</b></td>

<td><input type="text" size="20" maxlength="20" name="nama" onFocus="window.status='Ketikan Nama Anda !'"></td>

</tr> <tr>

<td width="30%"><b>Alamat</b></td> <td width="10%" align="center"><b>:</b></td>

<td><input type="text" size="30" maxlength="30" name="alamat" onFocus="window.status='Ketikan Alamat Anda !'"></td>

</tr> <tr>

<td width="30%"><b>E-Mail</b></td> <td width="10%" align="center"><b>:</b></td>

<td><input type="text" size="15" maxlength="15" name="email" onFocus="window.status='Ketikan E-Mail Anda !'"></td>

</tr> <tr>

(29)

E

Event

Created by Wah o < < < < v < < < < < < O

hyu Nurjaya W <td width= <td width= <td><texta onFocus="wind </tr> <tr>

<td colspa </tr> <tr>

<td c value="Sent"> </tr> </table> </form> </center> </BODY> </HTML> Output progr

WK, S.T., M.Ko ="30%"><b>K ="10%" align=

area

dow.status='Ke

n="3">&nbsp

colspan="3"  <input

ram:

m. 2009 Komentar</b> ="center"><b>

cols=50 etikan Koment

;</td>

align="ce type="reset" v

></td> >:</b></td>

rows=4 ar Anda !'"><

enter"><hr>< value="Reset"

name= </textarea></

<input ty ></td>

="komentar" /td>

(30)

Event

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Event onClick

Pada contoh event onClick, tombol Sent dan Reset akan diberi event Click sehingga:

- Jika tombol Send diklik, maka event onClick akan menjalankan fungsi kirim_form() yang menampilkan kotak dialog dan mengirimkan form.

- Jika tombol reset diklik, maka event onClick akan menjalankan fungsi reset_form() yang menampilkan kotak dialog dan menghapus form.

Program: <HTML> <HEAD>

<TITLE>Event onClick</TITLE> <SCRIPT LANGUAGE = "JavaScript"> function kirim_form()

{

window.alert("Form telah sukses dikirim"); }

function reset_form() {

window.alert("Form akan dihapus"); document.clear()

}

</SCRIPT> </HEAD> <BODY>

<center>

<form name="guessbook" method="post" action=""> <table border="0" width="80%">

<tr>

<td colspan="3" align="center"><h2>My Guest Book</h2><hr></td> </tr>

<tr>

<td colspan="3" align="left"><b>My Guest Book</b></td> </tr>

<tr>

<td width="30%"><b>Nama</b></td> <td width="10%" align="center"><b>:</b></td>

<td><input type="text" size="20" maxlength="20" name="nama" onFocus="window.status='Ketikan Nama Anda !'"></td>

</tr> <tr>

<td width="30%"><b>Alamat</b></td> <td width="10%" align="center"><b>:</b></td>

<td><input type="text" size="30" maxlength="30" name="alamat" onFocus="window.status='Ketikan Alamat Anda !'"></td>

</tr> <tr>

<td width="30%"><b>E-Mail</b></td> <td width="10%" align="center"><b>:</b></td>

<td><input type="text" size="15" maxlength="15" name="email" onFocus="window.status='Ketikan E-Mail Anda !'"></td>

</tr> <tr>

(31)

E

Event

Created by Wah K < < < < o o < < < < < < O J

hyu Nurjaya W <td width=" <td><textar Komentar Anda ! </tr>

<tr>

<td colspan </tr>

<tr>

<td colsp nClick="kirim_ nClick="reset_f </tr> </table> </form> </center> </BODY> </HTML> Output progr Jika ditekan t

WK, S.T., M.Ko "10%" align="ce rea cols=50 row !'"></textarea>

n="3"> </

pan="3" alig _form()">  form()"></td>

ram: tombol Send

m. 2009 enter"><b>:</ ws=4 name="k ></td>

/td>

gn="center"><h <input

/b></td> komentar" onFo

hr><input typ type="rese

ocus="window.st

pe="button" et"

tatus='Ketikan

value="Send" value="Reset"

(32)

E

Event

Created by Wah J

Event on P li T b < < e

hyu Nurjaya W Jika ditekan t

nMouseOve Pada contoh

ink pada for Tambahkan buat di atas ( <HR> <a href = mai

-mail donk!’”>

WK, S.T., M.Ko tombol Rese

event onMo rm diatas.

kode HTML (di bawah tag

ilto:wahyu@un >Email: Wahy

m. 2009 et:

ouseOver ini

L berikut in g </form>):

nikom.ac.id o yu@unikom.ac

, Anda akan

ni dibawah f

nMouseOver = c.id</a>

n menambahk

form yang t

= “window.stat

kan sebuah

telah Anda

(33)

E

Event

Created by Wah O K m

K m

hyu Nurjaya W Output progr Ketika point muncul alam

Ketika point muncul “Kiri

WK, S.T., M.Ko ram:

ter mouse b mat e-mail ya

er mouse m im e-mail do

m. 2009 berada pada ang dituju:

meninggalkan onk!”:

link, maka

n link, maka

pada status

a pada statu

s bar akan

(34)

Objek 32

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 9. Objek

Pengertian Objek

JavaScript adalah bahasa pemrograman yang berorientasi objek (object oriented programming). Artinya semua elemen di dalam JavaScript diperlakukan sebagai objek-objek yang terpisah.

Membuat Objek Mendefinisikan objek

Syntax:

function nama_objek (properti1, properti2, …) {

this.properti1 = properti1

this.properti2 = properti2

…

} Contoh:

function mobil (merek, tipe, warna) {

this.merek = merek;

this.tipe = tipe; this.warna = warna; }

Membuat objek Syntax:

nama_instance = new nama_objek (isi_properti) Keterangan:

Nama_instance : nama dari objek yang ingin dibuat

Nama_objek : nama objek yang mendasari objek tersebut Isi_properti : isi properti dari objek

Contoh:

mobil_Adi = new mobil (“Toyota”, “Starlet”, “Hitam”) mobil_Iyud = new mobil (“Daihatsu”, “Charade”, “Biru”) mobil_Ayu = new mobil (“BMW”, “520”, “Kuning”) Menentukan isi objek

Syntax:

nama_objek.properti1 = isi_properti1

nama_objek.properti2 = isi_properti2

nama_objek.properti3 = isi_properti3

…

Atau

nama_objek.[0] = isi_properti1 nama_objek.[1] = isi_properti2 nama_objek.[2] = isi_properti3

(35)

Objek 33

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Contoh:

mobil.merek = “Toyota”;

mobil.tipe = “Starlet”;

mobil.warna = “Hitam”;

memiliki arti yang sama dengan:

mobil.[0] = “Toyota”;

mobil.[1] = “Starlet”;

mobil.[2] = “Hitam”;

Macam-macam Objek Objek buatan

Objek buatan atau custom objects adalah onjek-objek yang Anda buat atau Anda definisikan sendiri untuk melakukan perhitungan pada skrip JavaScript Anda. Sudah diterangkan di atas.

Objek yang telah disediakan oleh JavaScript Objek built-in

Objek built-in adalah objek-objek yang telah disediakan oleh JavaScript dan bisa Anda gunakan untuk membuat program.

1. Objek Array

Objek Array adalah objek yang digunakan untuk menangani jenis bilangan array.

Sintax:

nama_array = new Array (panjang_array);

nama_array = new Array (elemen-0, elemen-1, …, elemen-n)

Keterangan:

Nama_array : nama objek Array yang ingin dibuat Panjang_array : panjang atau besarnya array tersebut Elemen : elemen-elemen dari objek array Contoh:

nama = new Array (3);

nama = new Array (“Adi”, “Yudi”, “Indra”) 2. Objek Boolean

Objek boolean berfungsi untuk mengubah bilangan bukan boolean menjadi bilangan boolean.

Syntax:

nama_boolean = new Boolean (nilai) Keterangan:

Nama_boolean : nama objek boolean yang ingin dibuat Nilai : nilai yang akan diubah jadi boolean

(36)

Objek 34

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 Contoh:

nilai1 = new Boolean (“Adi”) → hasilnya true

nilai2 = new Boolean (100) → hasilnya true

nilai3 = new Boolean (0) → hasilnya false

nilai4 = new Boolean (true) → hasilnya true

nilai5 = new Boolean (false) → hasilnya false

3. Objek Date

Objek date digunakan untuk memanipulasi tanggal dan jam pada JavaScript Anda.

Syntx:

nama_date = new Date (parameter) Keterangan:

Parameter dapat berisi:

- Jika objek Date dibuat tanpa parameter, maka ia akan mengambil tanggal dan jam dari komputer Anda.

Misalnya:

tanggal = new Date ()

- Parameter = ”bulan, tanggal, tahun jam:menit:detik” Misalnya:

tanggal = new Date (“March, 18, 1970 02:00:00”) - Parameter = (tahun, bulan, tanggal)

Misalnya:

tanggal = new Date (98, 2, 18)

- Parameter = (tahun, bulan, tanggal, jam, menit, detik) Misalnya:

tanggal = new Date (98, 2, 18, 7, 0, 5) 4. Objek Function

Objek function berfungsi mengubah kode-kode HTML menjadi sebuah fungsi.

Syntax:

nama_fungsi = new Function (parameter, “isi fungsi”) Contoh:

nama = new Function (“document.write (‘Adi’)”) 5. Objek Math

Objek math berfungsi untuk menangani perhitungan-perhitungan matematis yang rumit.

Syntax:

Math.properti Atau

(37)

Objek 35

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 6. Objek Number

Objek number berfungsi untuk mengolah bilangan numerik. Syntax:

Number.properti 7. Objek String

Objek string berfungsi untuk mengolah string atau karakter. Syntax:

nama_string = new String (string) Objek browser

Objek browser adalah objek-objek yang berhubungan dengan browser dan berfungsi memanipulasi elemen-elemen yang terdapat pada program Web browser (seperti misalnya Netscape Navigator, Internet Explorer).

1. Objek Window

Objek window adalah objek yang digunakan untuk memanipulasi jendela browser.

2. Objek Location

Objek location adalah objek yang menyimpan atau mencatat alamat URL.

3. Objek History

Objek history adalah objek yang mencatat semua tempat yang telah Anda kunjungi dangan browser Anda.

4. Objek Document

objek document adalah dokumen atau halaman Web yang saat ini sedang ditampilkan pada layar browser.

5. Objek Form

Objek form adalah objek yang digunakan untuk mengambil input atau masukan dari pemakai, sehingga Anda bisa berinteraksi antara server dan client.

Catatan:

(1)

E

Event

Created by Wah

Event on

P li T b

< < e

hyu Nurjaya W

Jika ditekan t

nMouseOve

Pada contoh ink pada for Tambahkan buat di atas (

<HR> <a href = mai

-mail donk!’”>

WK, S.T., M.Ko

tombol Rese

event onMo rm diatas.

kode HTML (di bawah tag

ilto:wahyu@un >Email: Wahy

m. 2009

et:

ouseOver ini

L berikut in g </form>):

nikom.ac.id o yu@unikom.ac

, Anda akan

ni dibawah f

nMouseOver = c.id</a>

n menambahk

form yang t

= “window.stat

30

kan sebuah

telah Anda

(2)

E

Event

O K m

K m

Output progr Ketika point muncul alam

Ketika point muncul “Kiri

ram:

ter mouse b mat e-mail ya

er mouse m im e-mail do

berada pada ang dituju:

meninggalkan onk!”:

link, maka

n link, maka

pada status

a pada statu

31

s bar akan

(3)

Objek

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009 9. Objek

Pengertian Objek

JavaScript adalah bahasa pemrograman yang berorientasi objek (object oriented programming). Artinya semua elemen di dalam JavaScript diperlakukan sebagai objek-objek yang terpisah.

Membuat Objek Mendefinisikan objek

Syntax:

function nama_objek (properti1, properti2, …) {

this.properti1 = properti1 this.properti2 = properti2

…

}

Contoh:

function mobil (merek, tipe, warna) {

this.merek = merek; this.tipe = tipe; this.warna = warna; }

Membuat objek

Syntax:

nama_instance = new nama_objek (isi_properti)

Keterangan:

Nama_instance : nama dari objek yang ingin dibuat

Nama_objek : nama objek yang mendasari objek tersebut Isi_properti : isi properti dari objek

Contoh:

Syntax:

nama_objek.properti1 = isi_properti1 nama_objek.properti2 = isi_properti2 nama_objek.properti3 = isi_properti3

…

Atau

nama_objek.[0] = isi_properti1 nama_objek.[1] = isi_properti2 nama_objek.[2] = isi_properti3

(4)

Objek

Contoh:

mobil.merek = “Toyota”; mobil.tipe = “Starlet”; mobil.warna = “Hitam”;

memiliki arti yang sama dengan:

mobil.[0] = “Toyota”; mobil.[1] = “Starlet”; mobil.[2] = “Hitam”; Macam-macam Objek

Objek buatan

Objek buatan atau custom objects adalah onjek-objek yang Anda buat atau Anda definisikan sendiri untuk melakukan perhitungan pada skrip JavaScript Anda. Sudah diterangkan di atas.

Objek yang telah disediakan oleh JavaScript Objek built-in

Objek built-in adalah objek-objek yang telah disediakan oleh JavaScript dan bisa Anda gunakan untuk membuat program.

1. Objek Array

Objek Array adalah objek yang digunakan untuk menangani jenis bilangan array.

Sintax:

nama_array = new Array (panjang_array);

nama_array = new Array (elemen-0, elemen-1, …, elemen-n)

Keterangan:

Nama_array : nama objek Array yang ingin dibuat Panjang_array : panjang atau besarnya array tersebut Elemen : elemen-elemen dari objek array Contoh:

nama = new Array (3);

nama = new Array (“Adi”, “Yudi”, “Indra”) 2. Objek Boolean

Objek boolean berfungsi untuk mengubah bilangan bukan boolean menjadi bilangan boolean.

Syntax:

nama_boolean = new Boolean (nilai)

Keterangan:

Nama_boolean : nama objek boolean yang ingin dibuat Nilai : nilai yang akan diubah jadi boolean

(5)

Objek

Created by Wahyu Nurjaya WK, S.T., M.Kom. 2009

Contoh:

nilai1 = new Boolean (“Adi”) → hasilnya true nilai2 = new Boolean (100) → hasilnya true nilai3 = new Boolean (0) → hasilnya false nilai4 = new Boolean (true) → hasilnya true nilai5 = new Boolean (false) → hasilnya false 3. Objek Date

Objek date digunakan untuk memanipulasi tanggal dan jam pada JavaScript Anda.

Syntx:

nama_date = new Date (parameter)

Keterangan:

Parameter dapat berisi:

- Jika objek Date dibuat tanpa parameter, maka ia akan mengambil tanggal dan jam dari komputer Anda.

Misalnya:

tanggal = new Date ()

- Parameter = ”bulan, tanggal, tahun jam:menit:detik” Misalnya:

tanggal = new Date (“March, 18, 1970 02:00:00”)

- Parameter = (tahun, bulan, tanggal) Misalnya:

tanggal = new Date (98, 2, 18)

- Parameter = (tahun, bulan, tanggal, jam, menit, detik) Misalnya:

tanggal = new Date (98, 2, 18, 7, 0, 5) 4. Objek Function

Objek function berfungsi mengubah kode-kode HTML menjadi sebuah fungsi.

Syntax:

nama_fungsi = new Function (parameter, “isi fungsi”)

Contoh:

nama = new Function (“document.write (‘Adi’)”) 5. Objek Math

Objek math berfungsi untuk menangani perhitungan-perhitungan matematis yang rumit.

Syntax:

Math.properti

Atau

(6)

Objek

35 6. Objek Number

Objek number berfungsi untuk mengolah bilangan numerik. Syntax:

Number.properti 7. Objek String

Objek string berfungsi untuk mengolah string atau karakter. Syntax:

nama_string = new String (string) Objek browser

Objek browser adalah objek-objek yang berhubungan dengan browser dan berfungsi memanipulasi elemen-elemen yang terdapat pada program Web browser (seperti misalnya Netscape Navigator, Internet Explorer).

1. Objek Window

Objek window adalah objek yang digunakan untuk memanipulasi jendela browser.

2. Objek Location

Objek location adalah objek yang menyimpan atau mencatat alamat URL.

3. Objek History

Objek history adalah objek yang mencatat semua tempat yang telah Anda kunjungi dangan browser Anda.

4. Objek Document

objek document adalah dokumen atau halaman Web yang saat ini sedang ditampilkan pada layar browser.

5. Objek Form

Objek form adalah objek yang digunakan untuk mengambil input atau masukan dari pemakai, sehingga Anda bisa berinteraksi antara server dan client.

Catatan: