100% menganggap dokumen ini bermanfaat (1 suara)

2K tayangan90 halaman

Belajar Javascript

Dokumen tersebut memberikan penjelasan tentang cara menanamkan JavaScript ke dalam kode HTML dan menjelaskan konsep dasar variabel dan jangkauan dalam JavaScript seperti variabel global dan lokal."

Diunggah oleh

agusjakaswara

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai DOC, PDF, TXT atau baca online di Scribd

100% menganggap dokumen ini bermanfaat (1 suara)

2K tayangan90 halaman

Belajar Javascript

Dokumen tersebut memberikan penjelasan tentang cara menanamkan JavaScript ke dalam kode HTML dan menjelaskan konsep dasar variabel dan jangkauan dalam JavaScript seperti variabel global dan lokal."

Diunggah oleh

agusjakaswara

Hak Cipta

Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.

Format Tersedia

Unduh sebagai DOC, PDF, TXT atau baca online di Scribd

Anda di halaman 1/ 90

Home, Forum diskusi, Chatting, D

Memasukkan JavaScript kedalam HTML

JavaScript adalah pemrograman sisi klien yang akan dijalankan oleh
browser dari pengunjung, dan program JavaScript biasa ditanamkan didalam
halaman web untuk menghasilkan halaman yang dinamis. Untuk
mempelajari JavaScript sebaiknya anda menguasai dasar-dasar HTML
Script sehingga akan memudahkan anda untuk menyisipkan program
JavaScript secara baik dan benar.

Ketiklah Contoh berikut dan simpan ke file Hello.html

</HEAD>

</HTML>

Untuk melihat hasilnya, buka file Hello.html dengan internet browser.

Sebenarnya ada dua cara menanamkan JavaScript kddalam dokumen HTML

anda, yaitu :

1. Mengapit JavaScript tersebut dengan tag <SCRIPT>...</SCRIPT>

Contoh :
<SCRIPT LANGUAGE="JavaScript">

<!-- Menyembunyikan script terhadap browser non-JavaScript

Perintah-perintah JavaScript anda diketik disini.

// -->

</SCRIPT>

2. Menggunakan tag HTML yang menangani event.

Contoh :
<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik
disini untuk mengetahui lebih jauh tentang saya'; return true;"
onMouseOut="window.status=''; ">Klik disini</A>

Dengan menggunakan Tag <SCRIPT>

Walaupun Netscape Navigator akan mengolah semua teks

dalam tag <SCRIPT> sebagai JavaScript, tetapi adalah lebih baik melakukan
deklarasi LANGUAGE yang menentukan jenis bahasa script yang digunakan.
karena ada beberapa bahasa script lainnya untuk HTML, mendeklarasikan
jenis bahasa script adalah suatu praktek yang baik. Marilah kita memulai
dengan suatu program sederhana yang akan mencetak Hello World.

Contoh :
<HTML>
<HEAD>

</HEAD>

</HTML>
Hasil:

Contoh diatas menunjukkan program Javascript diketik diantara

tag <HEAD> dan </HEAD>. Jika contoh JavaScript diatas diketikkan
diantara tag <BODY>, juga akan memiliki hasil yang sama. Tetapi karena
bagian heading akan dibaca terlebih dahulu dibandingankan dengan
bagian <BODY>, menempatkan semua fungsi maupun variabel global pada
bagian heading adalah praktek pemrograman yang baik. Dan semua perintah
JavaScript yang berkaitan dengan dokumen ditempatkan pada bagian body
HTML.

Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga

untuk menghindari kesalahan penampilan pada browser tersebut, anda perlu
mengetikkan JavaScript diantara tag komentar HTML sebagai berikut :

Catatan
Ingat, selalu mengetik JavaScript diantara baris komentar sehingga
browser non Java dapat mengabaikannya, hal ini dilakukan karena
siapa saja dapat mengunjungi homepage kita di internet dengan
berbagai web browser.

Dengan menggunakan Event

Menangani Event akan mengubah halaman yang static menjadi lebih

dinamis. Event adalah hasil terhadap aksi yang dilakukan oleh pemakai,
seperti klik pada mouse, klik pada tombol submit di suatu form, dan keluar
dari halaman. Netscape mengenali sejumlah event, tetapi kita tidak akan
mendiskusinya sekarang.

Contoh:
<FORM>
<INPUT TYPE=BUTTON VALUE="Coba Klik" onClick="alert('Hello world')">
</FORM>

Hasil:

Dibuat oleh [email protected]

Medan - Sumatera Utara
Indonesia

Variabel dan Literal

Setelah mengetahui cara menanamkan JavaScript kedalam halaman web,
selanjutnya kita akan membahas dasar-dasar dari pemrograman JavaScript
itu sendirinya, sebagai langkah pertama dari proses belajar, kita akan
membahas Variabel dan Literal. Ketiklah contoh berikut, dan simpan ke file
Scroller.html
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Start of scroller script
var scrollCounter = 0;
var scrollText = "Teks yang anda inginkan, misalnya Viva
Indoprog";
var scrollDelay = 70;
var i = 0;

while (i ++ < 140)

scrollText = " " + scrollText;

function Scroller()
{
window.status = scrollText.substring(scrollCounter++,
scrollText.length);
if (scrollCounter == scrollText.length)
scrollCounter = 0;
setTimeout("Scroller()", scrollDelay);
}

Scroller();
// End of scroller script -->
</SCRIPT>
</HEAD>
<BODY>
<H1>Coba perhatikan status bar anda</H1>
</BODY>

</HTML>

Pada contoh diatas menggunakan beberapa variabel seperti scrollCounter,

scrollText, scrollDelay, i, dan literal seperti 0, "Teks yang anda inginkan,
misalnya Viva Indoprog", 70.

Pada JavaScript memiliki beberapa tipe dari nilai sebagai berikut :

• Number, baik bilangan nyata (real) maupun bilangan bulat (integer)

(contoh 4.156 dan 39)
• String (contoh "ini adalah JavaScript")
• Logical (Boolean) dengan nilai true dan false
• Null, yang mana adalah keyword khusus yang mengawali nilai
kosong.

Walaupun memiliki tipe data yang sedikit, tetapi cukup untuk unjuk kerja
JavaScript. Perlu diperhatikan bahwa pada JavaScript tidak ada perbedaan
antara integer dengan real, keduanya dimasukkan pada tipe yang sama yaitu
number. JavaScript tidak menyediakan tipe data khusus untuk data tanggal.
Tetapi memiliki beberapa fungsi dan objek tanggal (date) yang dapat
digunakan untuk melakukan manipulasi data tanggal.

Mendefinisikan Variabel

Aturan penamaan variabel pada JavaScript adalah nama variabel harus

dimulai dengan suatu huruf atau garis bawah (_) dan huruf selanjutnya dapat
berupa angka (0-9), huruf besar (A-Z) atau huruf kecil (a-z), garis bawah.
Berikut ini adalah contoh penamaan variabel yang benar:
Nama_depan

h9224

_nama

Catatan
JavaScript membedakan huruf besar dan kecil (case sensitif),
sehingga harus diwaspadai oleh programmer, penulisan indoprog
adalah berbeda dengan Indoprog bagi JavaScript.

Batasan lainnya dalam pemberian nama variabel adalah tidak boleh sama
dengan cadangan kata pada JavaScript. Tabel 1 adalah daftar dari cadangan
kata (Reserved Word) pada JavaScript.

Table 1. Cadangan kata pada JavaScript.

abstract extends int super

boolean false interface switch
break final long synchronized
byte finally native this
case float new throw
catch for null throws
char function package transient
class goto private true
const if protected try
continue implements public var
default import return val
do in short while
double instanceof static with
else
Tidak semua kata dalam Table 1 digunakan oleh JavaScript dewasa ini; dan
beberapa diantara dicadangkan untuk pemakaian yang akan datang.
Cadangan Kata tidak boleh digunakan untuk nama variabel, nama fungsi,
nama metode, dan nama objek

Variabel dalam JavaScript dapat menyimpan semua tipe data yang sah, dan
tidak diperlukan suatu deklarasi tipe data. Pada script yang sama, suatu
variabel dapat di set ke type data yang berbeda dalam suatu deklarasi
tunggal. Berikut ini deklarasi variabel yang sah:
temperatur =

temperatur = "Temperatur adalah"

temperature = "Temperatur adalah " + 27

Karena JavaScript sangat longgar tentang tipe, dan menyediakan beberapa

fungsi untuk melakukan manipulasi data string dan nilai numerik (belum
dibahas pada bagian ini).

Baca Bagian ini !!!

JavaScript adalah bahasa script yang dinamis. Hal ini berarti bahwa tipe data
pada Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang
lain sesuai dengan kebutuhan.

Sebagai contoh, anda dapat menyatakan myData = 10; pada suatu baris
initialisasi, dan baris berikutnya, menyatakan myData = "Hello World!"
yang membuat tipe myData menjadi suatu string. Java Script akan secara
otomatis mengubah tipe data berdasarkan ekspresi yang ditentukan. Jadi jika
anda menyatakan myData = "10" - 2;, maka anda akan bertanya mengapa
Javascript tidak mengkonversi 2 menjadi "2" dan
menghasilkan "102", jawabanya adalah karena operator - tidak ditujukan
untuk pemakaian pada string sehingga "10" - 2 tidak memiliki arti sama
sekali. Berikut ini akan membawa kita kepada suatu situasi yang lebih
menarik. Operator + dinyatakan untuk pemakaian pada numerik dan string.
Jadi akankah 10 + "20"mengembalikan nilai 30 (10+20) atau "1020" ("10"
+ "20"). Hal ini tentu saja akan membingungkan anda dengan pemakaian
operator +, jawabannya adalah Javascript akan selalu mengkonversi segala
sesuatu ke string sebelum melakukan evaluasi, sehingga 10 + "20" adalah
sama dengan "10" + "20" dan hasilnya adalah "1020".

Jangkauan dari Variabel

JavaScript memiliki dua jangkauan untuk variabel:

• variabel Global
• variabel Local

Variabel lokal digunakan didalam suatu fungsi dan ruang lingkupnya

terbatas pada fungsi tersebut. Untuk mendeklarasikan suatu variabel lokal,
harus diawali dengan var, seperti contoh berikut ini:
var nilaiTerbesar =0

JavaScript mengganggap semua variabel yang tidak diawali dengan var

adalah variabel global. Walaupun JavaScript memperbolehkan anda
menggunakan nama variabel yang sama untuk local maupun global, tetapi
dalam praktek hal tersebut tidak disarankan, karena akan membingungkan
anda sendiri.

TIP
Untuk memastikan fungsi mendapatkan nilai yang benar dari suatu
variabel global, deklarasikan semua variabel global tersebut pada
awal dari script.

Literal

Sebagai lawan dari variabel adalah literal yang merupakan baku yang
digunakan dalam JavaScript. JavaScript mendukung literal-literal berikut:

• Integer literal
• Floating point literal
• Boolean literal
• String literal
• Special character

Integer dapat dalam basis desimal (basis 10), hexadesimal, dan oktal. Suatu
nilai desimal adalah semua angka yang tidak diawali dengan nol (seperti 4,
89, atau 57). Suatu angka yang diawali dengan nol, adalah berbasis oktal
(seperti 04, 065, atau 0145). Suatu bilangan dinyatakan dalam basis
hexadesimal diawali dengan 0x atau 0X (seperti 0xff, 0X44, atau 0xAE).

Suatu literal floating-point terdiri dari komponen: suatu desimal bulat, suatu
decimal berkoma (.), suatu desimal pecahan, dan eksponen. (seperti 1.23 or
44.6389) atau dalam notasi scientific (3.6E-8, .4E12, or -2.7E12). Setiap
literal floating-point literal minimal memiliki satu digit dengan satu desimal
atau eksponen.

Literal Boolean adalah true atau false.

Literal String dapat diapit oleh petik tunggal ( ' ) atau petik ganda ( " ).
Tanda petik awal dan akhir harus sama, seperti contoh berikut:
"suatu literal dengan petik ganda"

'suatu literal dengan petik tunggal'

TIP
Ketika anda menulis event handle, apit string dengan petik tunggal,
karena petik ganda dibatasi untuk nilai atribut pada HTML

Contoh :

Literal string dapat juga mengandung karakter khusus untuk kendali baris
Table 2 adalah daftar dari karakter khusus dan fungsi-fungsinya.

Table 2. Karakter khusus JavaScript.

Keterangan Spesial Karakter

Backspace \b

Form feed \f

Newline \n

Carriage return \r

Tab \t

Tanda backslash (\) adalah karakter escape pada JavaScript. Ketika

digunakan pada akhir dari suatu baris, akan berfungsi sebagai character
penyambung baris. Ketika diikuti oleh karakter lain, karakter escape tersebut
akan kehilangan fungsi khususnya. Dalam JavaScript, programmer
menggunakan backslash untuk escape backslash lainnya, suatu petik
tunggal, dan suatu petik ganda.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Ekspresi dan Operator

Literal dan variabel dihubungkan oleh operator dan akan
menghasilkan ekspresi. JavaScript menyediakan berbagai operator yang
memungkinkan programmer menulis sejumlah ekspresi dari yang paling
sederhana sampai yang paling sulit.
Contoh :
temp = 24

pada contoh diatas, temp adalah variabel, 24 adalah variabel, = adalah

operator, dan temp=24 adalah ekspresi.

Operator JavaScript dapat dibagi menjadi beberapa kategori berikut:

• Assignment operator
• Arithmetic operator
• Bitwise operator
• Logical operator
• Comparison operator
• String operator

JavaScript memiliki operator binari maupun unari. Suatu operator binari

memiliki format.
operand1 operator operand2

Sebagai contoh , 9 * 7 atau temp = 24 adalah ekspresi dengan operator

binari.

Operator unari memiliki dua format:

operand operator

atau
operator operand

Sebagai contoh ekspresi mengunakan operator unari adalah ++y atau y++.

Catatan
Bagi programmer C language, tentu saja operator unari bukan sesuatu
yang asing, tetapi bagi programmer dari latarbelakang Basic dan
Pascal, penulisan y++ adalah sama dengan y = y + 1.

Assignment Operator

Operator pemberi nilai (=) adalah suatu operator binari yang digunakan
untuk memberi nilai ke operand di sisi kiri (biasanya berupa suatu variabel)
yang didasarkan pada nilai operand sebelah kanan (seperti NamaDepan =
"Hendra" atau x = y * 9). Table 3 adalah daftar singkat operator pemberi
nilai.

Table 3. Daftar Operator assignment

Shorthand operator Artinya Contoh

x += y x = x + Y x +=
x -= y x = x - y x -=
x *= y x = x * y x *=
x /= y x = x / y x /=
x %= y x = x % y x %=
x <<= y x = x << y x <<=
x >>= y x = x >> y x >>=
x >>>= y x = x >>> y x >>>=
x &= y x = x & y x &= 0xC0
x |= y x = x | y x |= 0x0F
x ^= y x = x ^ y x ^= 0XFF

Catatan
Bagi yang tidak familiar dengan pemrograman C, hati-hati dengan
perbedaan antara assignment operator (=) dan comparison operator
(==)

Arithmetic Operator

Sesuai dengan fungsinya operator aritmatika melakukan operasi perhitungan

aritmatika terhadap suatu nilai numerik baik dalam literal maupun variabel.
JavaScript mendukung operator standard aritmatika untuk penjumlahan (+),
pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator
modulus (%), increment (++), decrement (--), dan unary negation (-).

Operator modulus (%) adalah suatu operator binary yang mengembalikan

nilai sisa dari suatu pembagian bulat operand1 terhadapoperand2. Sebagai
contoh, hasil dari 27 % 6 adalah 4.

Operator increment unary adalah menambah nilai satu ke variabel operand,

sedangkan operator decrement unary mengurangi satu dari padanya.
Bagaimanapun, nilai yang dikembalikan tergantung dari posisi operator
terhadap operand Jika operator berada didepan (++x atau --x), nilai yang
dikembalikan adalah x+1 atau x-1. Ketika operator dibelakang(x++ or x--),
nilai x dikembalikan sebelum ditambah atau dikurang.

Operator khusus unari arithmetic adalah operator unari negation operator. Ia

membalikan tanda dari nilai yang diberikan pada suatu variabel. Sebagai
contoh, jika x = -7, -x mengubah nilai menjadi 7.
Bitwise Operator

Untuk programmer yang perlu menangani bit. JavaScript menyediakan satu

set dari operator bitwise. Untuk operator ini, JavaScript melakukan konversi
terhadap operand menjadi integer 32-bit sebelum melakukan operasi
padanya. Operator logika bitwise adalah

• Bitwise AND (&), akan mengembalikan nilai dari logika AND antara
sepasang bit. Sebagai contoh , 0x0f & 0x0amengembalikan 0x0a.
• Bitwise OR (|), akan mengembalikan nilai dari logika OR antara
setiap pasangan dari bit. Sebagai contoh, 0x05 |
0x0amengembalikan 0x0f.
• Bitwise XOR (^), akan mengembalikan nilai dari logika exclusive OR
between antara tiap pasangan bit. Sebagai contoh,0x0f ^
0x0a mengembalikan 0x05.

JavaScript juga menyediakan satu set bitwise untuk operasi

shift operand1 terhadap jumlah yang ditentukan di operand2. Operand ini
adalah

• Shift left (<<), akan mengeser bit ke kiri dengan jumlah tertentu. Bit
yang melewati batas kiri akan diabaikan, dan suatu bit nol akan
digeser dari kanan. Sebagai contoh, 0x0f << 2 mengembalikan 0x3c.
• Sign propagating shift right (>>) mempertahankan bit tanda dari nilai
ketika melakukan geser ke kanan sesuai dengan jumlah yang
ditentukan. Bit yang tergeser melewati bata kanan akan diabaikan,
kecuali bit tanda, bit nol akan digeser dari kiri.. Sebagai contoh, 10 >>
2 mengembalikan 2 dan -10 >> 2 mengembalikan -2.
• Zero-fill right shift (>>>) sama seperti >>, cuma tidak
mempertahankan bit tanda ketika dilakukan pergeseran sesuai dengan
jumlah yang ditentukan.

Logical Operator

Operator logika membutuhkan operand dengan nilai Boolean (true atau

false) dan mereka akan mengembalikan suatu nilai logika. Operator logika
adalah sebagai berikut :

• Logical AND (&&)

• Logical OR (||)
• Logical NOT (!)

Operator logika NOT adalah suatu unary operator yang mempertahankan

nilai ekspresi.
Comparison Operator

Operator perbandingan diterapkan pada perbandingan pada data numerik

dan data string serta tidak dapat dilakukan pada nilai Boolean. Masing-
masing operand harus memiliki tipe yang sama: nemerik dibandingkan
dengan numerik atau string dengan string. Hasil dari perbandingan adalah
sautu nilai Boolean. Operator perbandingan adalah:

• Equal (==)
• Not equal (!=)
• Greater than (>)
• Greater than or equal to (>=)
• Less than (<)
• Less than or equal to (<=)

JavaScript juga mendukung ekspresi secara kondisi (conditional expression)

yang mana berbentuk.
(kondisi) ? nilai_benar : nilai_salah

Jika kondisi adalah benar, ekspresi memiliki dari true_value. Sebaliknya

memiliki nilai dari false_value. Seperti saudaranya yang berbasis bahasa C,
ekpresi kondisi adalah ekspresi standard dan dapat digunakan dimana saja,
dan dapat dilihat sebagai berikut :
status_baterai = (voltase > 1.3) ? "baik" : "buruk"

Catatan
Bagi programmer C language, tentu saja comparison operator (==)
bukan sesuatu yang asing, tetapi bagi programmer dari latarbelakang
Basic dan Pascal, penulisan = adalah tidak sama dengan ==.

String Operator

Operator string (+) mengabung dua nilai string dan mengembalikan satu
string dimana merupakan hasil gabungan dari keduanya. Sebagai contoh :
"Java" + "Script"

Menghasilkan
"JavaScript"
Operator shorthand += mengabung string kiri dengan string dikanan operand
dan memberikan nilai baru pada operand disebelah kiri.

Urutan operasi

Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu operator,
urutan operasi dari operator menentukan nilai hasil evaluasi. Dengan
menggunakan tanda kurung, programmer dapat mengatur aturan tersebut.
Table .4 adalah urutan prioritas operasi dari yang paling rendah sampai yang
paling tinggi.

Table 4. Prioritas urutan operasi dari prioritas rendah sampai tinggi.

Keterangan Operator
Assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
Conditional ?:

Logical OR ||

Logical AND &&

Bitwise OR |

Bitwise XOR ^

Bitwise AND &

Equality == !=
Relational < <= > >=
Bitwise shift << >> >>>
Addition/subtraction +-
Multiply/divide */%
Negation/increment ! ~ - ++ -
Call, member () []

Dibuat oleh [email protected]

Medan - Sumatera Utara
Indonesia

Struktur Kendali dan Fungsi

Untuk membuat suatu halaman yang dinamis dan interaktif, perancang
halaman Web membutuhkan perintah-perintah yang dapat mengatur aliran
dari informasi. Berdasarkan hasil komputasi yang telah dilakukan,
JavaScript akan membuat keputusan jalur mana yang akan dieksekusi. Kita
akan membahas tentang perintah kondisi dan loop dalam JavaScript.
Walaupun semua kode harus ditulis dalam penanganan event, tetapi hal ini
adalah praktek pemrograman yang kurang baik. Sebagai pengantinya,
gunakan fungsi, kode akan menjadi lebih modular dan dapat digunakan
kembali (reusable).

Perintah kondisi

Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian

sebelumnya. JavaScript memiliki suatu perintah kondisi if. Tata cara
penulisan dari perintah kondisi tersebut adalah sebagai berikut:
if (kondisi1) {

pernyataan1 }

[else {

pernyataan2}]

kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki

nilai Boolean true atau false. contoh pemakaian statement if:
if (n>3) {

status = true

if (j != n) j = 0 }

else j = n

Perhatian
Bagi programmer C harus berhati-hati dengan evaluasi kondisi pada
JavaScript. Suatu kondisi numerik yang mengasilkan nol adalah tidak
sama dengan suatu Boolean true pada JavaScript, dan sebaliknya
suatu nilai bukan nol tidak sema dengan Boolean false. Pada
JavaScript hasil dari suatu kondisi harus data type Boolean.

Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh
berikut adalah perintah yang benar:
if (a==b) j=0

else j=1

Perintah Perulangan
JavaScript mendukung dua struktur loop; perintah for dan perintah while.
Untuk control pada struktur loop, JavaScript menyediakan
perintah break dan continue.

Perintah for

Perintah for pada JavaScript sama dengan yang ada di Java dan C.
Perintah for mengulang suatu loop sampai kondisi menghasilkan evaluasi
true atau loop keluar dengan perintah break . Syntax untuk
perintah for adalah sebagai berikut :
for ([ekspresi-awal;] [kondisi;] [ekspresi-penambah]) {

pernyataan

Urutan proses untuk perintah for adalah sebagai berikut:

1. Interpreter menjalankan ekspresi-awal. Ekspresi ini mementukan

nilai yang diperlukan untuk kendali perulangan.
2. Kemudian interpreter memeriksa kondisi. Jika true, kendali
dilanjutkan ke langkah selanjutnya. Jika false, kendali diarahkan ke
perintah setelah perulangan.
3. Kemudian interpreter menjalankan ekspresi-penambah, yang mana
melakukan update terhadap variabel-variabel yang digunakan untuk
kendali perulangan.
4. Kemudian statement dijalankan dan, jika ditemukan
suatu break atau continue, kendali kembali ke langkah 2.
Contoh :

<!-- menyembunyikan script dan browser non-JS

for (i=1; i<=10; i++) {

sq=i*i

document.write("number: " + i + " square: " + sq + "<BR>")

// akhir dari penyembunyian -->

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

Hasil :

number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
number: 5 square: 25
number: 6 square: 36
number: 7 square: 49
number: 8 square: 64
number: 9 square: 81
number: 10 square: 100
number: 1 square: 1
number: 2 square: 4
number: 3 square: 9
number: 4 square: 16
number: 5 square: 25
number: 6 square: 36
number: 7 square: 49
number: 8 square: 64
number: 9 square: 81
number: 10 square: 100

Perintah while

Perintah while terus mengulangi loop selama kondisi memiliki nilai true.
Syntax untuk perintah while adalah sebagai berikut :
while (kondisi) {

pernyataan

Test kondisi terjadi pada perulangan while yang pertama kali dan pada akhir
dari setiap loop. Ketika hasil test mengembalikan false, kendali dilewatkan
ke perintah berikutnya setelah loop. Perintah for yang diubah ke
suatu while loop.
Contoh:
<HTML>
<HEAD>

<!-- menyembunyikan script

i=1

while (i<=10) {

sq=i*i

document.write("number: " + i + "square: " + sq + "<BR>")

i++

// end script hiding -->

</SCRIPT>

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

Hasil:

Perintah break

Perintah break menghentikan for atau while loop dan mengembalikan

kendali ke perintah berikutnya yang mengikuti loop. Contoh berikut
menggambarkan bagaimana menggunakan perintah break:
i=0

while (i<10) {

if (i==3)

break

i++

Perintah continue

Seperti perintah break, perintah continue menghentikan interasi tersebut

untuk suatu for atau while loop; Tetapi tidak keluar dari loop; Tetapi
melakukan interasi berikutnya.

• Pada suatu while loop, kendali dilewatkan ke condition.

• Pada suatu for loop, dilewatkan ke increment-expression.

Berikut ini memperlihatkan bagaimana menggunakan perintah continue:

i=0

while (i<10) {

if (i==3)

continue

i++

Perintah function

Suatu function adalah sekumpulan dari perintah JavaScript yang akan

mengerjakan tugas tertentu. Fungsi ini dapat dipanggil dari segala titik pada
dokumen tersebut dan dipanggil dari event. Format dari
perintah function adalah sebagai berikut:
function FunctionName(argument list) {

statements

Contoh:
<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript"

<!-- hide the script

function DisplayIt(LineToDisplay) {

document.write(LineToDisplay + "<BR>")

// end hiding -->

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript"

<!-- hide it

LineToDisplay("Hello World")

// end hiding -->

</SCRIPT>

</BODY>
</HTML>
TIP
Karena browser membaca perintah tersebut diapit
oleh <HEAD>...</HEAD> duluan; adalah praktek yang baik untuk
memesan semua variabel global dan semua fungsi padaHEAD dari
dokumen. Hal ini mencegah kesalahan seperti non-initialized
variables dan undefined functions

Argumen dari suatu fungsi dapat berupa sembarang tipe data atau objek
JavaScript. Objek array functionName.argument[i]
dan functionName.arguments.length mengandung nilai jumlah argumen
yang dikirim ke fungsi, argumen acuan dengan mendeklarasikan nama-nama
variabel. Hal ini memungkinkan sejumlah argumen dilewatkan ke fungsi
sebagai suatu argument array. Contoh berikut menunjukkan pemakaian dari
suatu variable argument list.

Contoh :
<HTML>
<HEAD>

<!-- menyembunyikan

UnorderList="UL"

function DisplayList(ListType) { // menampilkan

variabel list

if (ListType="OL" || ListType="UL") { // validasi jenis

list

document.write("<" + ListType + ">" // menampilkan jenis

list

for (var i=1; i<DisplayList.arguments.length; i++)

document.write("LI" + DisplayList.arguments[i])

document.write("</" + ListType + ">") // End list

return true

else return false

// akhir dari penyembunyian -->

</SCRIPT>

</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript"

<!-- menyembunyikan

if (DisplayList(UnorderList, "Bullet 1 text", "Bullet 2 text"))

document.write("<P>List Display</P>")

else

document.write("<P>Invalid List Type<p>")

// unhide it -->

</SCRIPT>

</BODY>
</HTML>

Contoh diatas menggambarkan beberapa hal yang penting dari suatu fungsi.
Suatu variabel global diinisialisasi pada bagian<HEAD>.
Perintah var mendeklarasikan i sebagai suatu variabel lokal pada fungsi.
Juga ditunjukkan bagaimana perintah returndapat digunakan untuk
memastikan fungsi dijalankan dengan baik. Perintah return juga dapat
mengembalikan string atau nilai numerik, sebagaimana yang ditunjukkan
oleh contoh dibawah ini:
function RetExam(a, b) {

var x=0

x = a+b

return x

TestResult=RetExam(5, 7)

Komentar

JavaScript mendukung dua bentuk format untuk komentar:

• Komentar satu baris yang diawali dengan suatu double slash (//)
• Komentar banyak baris yang diawali dengan suatu /* dan diakhiri
dengan suatu */

Komentar single-line, dari C++, memperlakukan semua yang dari double

slash ke belakang sebagai suatu komentar, berikut ini adalah contoh yang
sah untuk suatu komentar single-line :
// ini adalah komentar

if (a=b) c=1 // ini juga adalah komentar

Komentar banyak baris mengikuti aturan pada C dan dapat digunakan untuk
menandai perintah JavaScript, sebagaimana yang ditunjukkan oleh contoh
sebelumnya, adalah sutu komentar HTML, baris terakhir membutuhkan dua
slash untuk menjaga JavaScript dapat menginterprestasikan baris tersebut.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Dasar dari Objek

JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan
merupakan bahasa object-oriented programming (OOP). Perancang
JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi
bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang
telah dibuat dengan suatu bahasa OOP kedalam dokumen HTML.
Selanjutnya Javascript tidak memiliki encapsulation , inheritance, dan
abstraction seperti pada C atau Java.

Tetapi class pada JavaScript menyediakan properti dan metode untuk

membuat objek.

Objek dan Properti

Berikut ini adalah notasi yang digunakan oleh JavaScript untuk

menggambarkan suatu objek dan propertinya:
ObjekName.PropertyName

Sebagai contoh, objek mydog memiliki properti sebagai berikut :

mydog.breed="small mut"

mydog.age=5

mydog.weight=25

Objek juga dapat menggunakan acuan array dengan menggunakan nama

propertinya sebagai index:
mydog["breed"]="small mut"

mydog["age"]=5

mydog["weight"]=25

Juga dapat mengunakan acuan array dengan index secara numerik:

mydog[0]="small mut"

mydog[1]=5

mydog[2]=25
Defining Metodes

Suatu fungsi yang berasosiasikan objek acuan adalah metode. format

berikut meng-asosiasikan fungsi dengan suatu objek:
ObjekName.MetodeName = function_name

Kemudian metode tersebut berkerja dengan suatu objek:

ObjekName.MetodeName(parameters);

Bekerja dengan Objek

Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan

dari JavaScript yaitu dengan perintah for...in , perintah with , operator new,
dan kata kunci this.

Perintah for...in

Perintah for...in menyediakan suatu mekanisme perulangan untuk iterasi

melalui semua properti dari suatu objek. Dengan format adalah sebagai
berikut :
for (variable in Objekname) {

statements

Contoh berikut mengunakan perintah ini untuk menampilkan semua properti

dalam suatu objek dan nilai asosiasinya:
function ListProperti(obj, obj_name) {

var result = ""

for (var i in obj) {

result += obj_name + "." + i " = " + obj[i] + "<BR>"

return result

PropList = ListProperti(mydog, "mydog")

Pada contoh sebelumnya, variabel i adalah nama dari property, kemudian

mengindeks objek dengan menggunakan property name_obj[i].
Perintah with

Pada beberapa situasi suatu objek perlu dibuat acuan beberapa kali.
Perintah with membuat acuan ke suatu objek default yang berada dalam
kurung. Tata cara penulisannya adalah sebagai berikut:
with (ObjekName) {

statements

Objek math berikut merupakan contoh pemakaian dari perintah with:

var r =

var x =

with (Math) {

r = p / (1 - cos(a))

x = (2 * p * cos(a)) / (sin(a) * sin(a))

Operand new

Untuk suatu tipe objek user-defined, operand new berfungsi membuat suatu
instance baru dari objek. Tata cara penulisannya adalah sebagai berikut:
ObjekName = new ObjekType(param1 [, param2,] É [, paramN])

Kata kunci this

this mengacu pada objek yang sekarang. Pada bagian selanjutnya akan
ditunjukkan bagaimana pemakaian kata kunci ini dalam penulisan function
dan metode.

Membuat Objek baru

Walaupun JavaScript memiliki sejumlah besar objek yang telah

didefinisikan, developer dapat membuat objeknya sendiri. Untuk membuat
suatu objek baru diperlukan dua langkah yaitu:

1. Mendefinisikan jenis objek dengan membuat suatu fungsi.

2. Membuat instances dari objek tersebut dengan menggunakan operand
new.
Fungsi tersebut mendefinisikan jenis objek, properti, dan metode. Sebagai
contoh untuk membuat suatu objek dog:
function dog(breed, age, weight) {

this.breed = breed;

this.age = age;

this.weight = weight;

Untuk menggunakan fungsi diatas, operand new diperlukan untuk

mendefinisikan suatu instance baru untuk objek tersebut. Sebagai contoh:
mydog = new dog("small mut", 5, 25);

Selain type data yang umum (string, numeric, and Boolean), objek yang lain
dapat juga menjadi properti dari suatu objek. Contoh menambah suatu
nomor izin pada objek jenis dog, nomor izib ini juga mengacu pada objek
lain.
function doglicense(owner, phone_number) {

this.owner = owner;

this.phone_number = phone.number;

AZ123 = new doglicense("John Smith", "999-9999");

Jenis Objek dog perlu dimodifikasi untuk mengikutsertakan informasi baru

tersebut:
function dog(breed, age, weight, license) {

this.breed = breed;

this.age = age;

this.weight = weight;

this.license = license;

mydog = new dog("mixed mut", 5, 25, AZ123);

Untuk mengacu pada pemilik mydog, syntax berikut diperlukan
mydog.license.owner

CATATAN
Jika suatu property baru ditambahkan pada suatu objek tanpa
mengubah jenis objek, properti tambahan tersebut hanya berpengaruh
pada objek tersebut dan bukan pada semua instances dari objek jenis
yang sama.
CATATAN
Suatu variabel string atau suatu string literal adalah suatu objek string.
Metode string adalah asosiasi dengan objek ini, dan akan didiskusikan
pada bagian "Objek dan fungsi built-in".

Mendefinisikan Array

Tidak seperti bahasa lainnya, Java script tidak memiliki suatu tipe data
array. Tetapi bagaimanapun, fungsi yang sama dapat dengan membentuk
suatu objek untuk melakukan emulasi suatu array. Langkah pertama untuk
mendefinsikan suatu objek array:
function MakeArray(n) {

this.length = n;

for (var i = 1; i <= n; i++)

this[i] = 0;

return this

Langkah berikutnya adalah mendefinisikan suatu instance untuk membentuk

objek MakeArray :
ExmpArray = new MakeArray(20);

Ketika anda memberikan nilai pada suatu elemen array, hal tersebut
menyerupai memberi nilai pada suatu type data array. Perbedaannya adalah
array ini dimulai dari satu dan bukan nol, karena nol mendefinisikan
panjang dari array:
ExmpArray[1] = "test1"

ExmpArrya[2] = "another test"

Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Objek dan Fungsi Built-In

Objek dan fungsi yang akan dijelaskan pada bagian ini adalah bagian dari
lingkungan JavaScript, selanjutnya sangat tergantung pada jenis web
browser. Adapun objek dan fungsi tersebut adalah sebagai berikut:

• Objek string dan metode asosiasinya

• Objek Math dan metode asosiasinya
• Objek date dan metode asosiasinya
• Fungsi eval, parseInt, dan parseFloat

Objek String

Suatu string yang dipetik adalah suatu variabel string atau suatu properti
string dari suatu objek, segala sesuatu yang ditempatkan diantara petik
adalah suatu string. Ada dua cara untuk menggunakan suatu objek string:

1. stringName.propertyName
2. stringName.metodeName(parameters)

Properti Objek String

Objek string hanya memiliki sebuah properti -length. Karena berupa

properti, berikut ini adalah acuan yang benar:
StringLength = stringVariable.length;

StringLength = mydog.name.length;

StringLength = "This is a string".length;

Metodee Objek String

Sejumlah besar metode adalah asosiasi dengan objek string. Disamping

fungsi manipulasi string yang normal, banyak diantaranya berfungsi
membungkus string diantara tag HTML. Berikut ini adalah daftar dari
metode Objek string:

• anchor(nameAttribute). Dengan nameAttribute sebagai nilai dari

parameter yang dilewatkan ke metode, metode anchor mengurung
text dengan tag <A></A>. Berikut ini adalah contohnya:
document.write("Other Links".anchor("other_links"));
• big(). String di apit dengan tag <BIG></BIG>.
• blink(). String di apit dengan tag <BLINK></BLINK> .
• bold(). String di apit dengan tag <B></B>.
• charAt(index). Metode ini mengembalikan huruf yang ditentukan
oleh index, dimana index adalah range 0 sampaistringName.length -
1. Jika index berada diluar jangkauan, suatu null string akan
dikembalikan.
• fixed(). String di apit dengan tag <TT></TT>.
• fontcolor(color). String di apit dengan tag <FONT
COLOR="color"></FONT>. Parameter color ditentukan dengan
format rrggbb.
• fontsize(size). String di apit dengan
tag <FONTSIZE=size></FONTSIZE>. Nilai dapat berupa angka satu
sampai tujuh, atau dapat perubahan secara relatif (+ atau -) yang
didasarkanpada ukuran font dasar yang ditentukan pada
tag<BASEFONT>.
• indexOf(searchValue, [fromIndex]). Metode ini mengembalikan
posisi index dari string pertama yang ditemukan berdasarkan
string searchValue. fromIndex secara optional menentukan posisi awal
pencarian. Jika pencarian tidak ditemukan maka JavaScript
mengembalikan -1.
• italics(). String di apit dengan tag <I></I>.
• lastOf(searchValue, [fromIndex]). Menyerupai indexOf, cuma
pencarian dilakukan dari arah belakang.
• link(hrefAttribute). String di apit dengan tag <A
HREF=hrefAttribute></A>.
• small(). String di apit dengan tag <SMALL></SMALL>.
• strike(). String di apit dengan tag <STRIKE></STRIKE>.
• sub(). String di apit dengan tag <SUB></SUB>.
• substring(indexA, indexB). Metode ini mengembalikan subset dari
suatu string, yaitu dari posisi index A s/d indexB-1. Jika indexA
sama dengan indexB akan dikembalikan suatu null string.
• sup(). String di apit dengan tag <SUP></SUP>.
• toLowerCase(). Metode ini mengubah string ke huruf kecil dan
mengembalikannya.
• toUpperCase(). Metode ini mengubah string ke huruf besar dan
mengembalikannya.

Objek Math

Objek Math menyediakan suatu himpunan dari nilai-nilai standar matematika

dan metode-metode yang argumennya berupa himpunan dari operator
matematika yang disediakan dengan JavaScript. Tidak seperti Objek
lainnya, Objek Math tidak membutuhkan suatu instance dari Objek sebelum
menggunakan metode objek math tersebut. Untuk memudahkan
pemasukkan nama dan pembacaan, metode Math sering diikat dengan
perintah with. Syntax untuk Objek Math adalah sebagai berikut:

1. Math.propertyName
2. Math.metodeName(parameters)

Properti Objek Math

Objek Math memiliki delapan buah properti. Properti-properti ini ini

mendefinisikan berbagai konstanta matematika. Tabel 5. menunjukkan
properti-properti tersebut dan nilai perkiraannya.

Table 5. Properti-properti objek Math dan nilainya.

Property Description Approx. value

E Euler's constant 2.718
LN2 Natural logarithm of 2 0.693
LN10 Natural logarithm of 10 2.302
LOG2E Base 2 logarithm of e 1.442
LOG10E Base 10 logarithm of e 0.434
PI Ratio of circumference to diameter 3.14159
SQRT1_2 Square root of one-half 0.707
SQRT2 Square root of two 1.414

Metode Objek Math

Objek Math memiliki sejumlah metode yang argumennya adalah himpunan

dari operator matematika:

• abs(number). Metode ini mengembalikan nilai absolut dari number.

• acos(number). Mengembalikan nilai arc cosinus dari number yang
bernilai antara -1 and 1.
• asin(number). Mengembalikan nilai arc sinus
• atan(number). Mengembalikan nilai arc tangen dalam radian.
• ceil(number). Mengembalikan nilai integer berikutnya yang lebih
besar atau sama dengannnumber.
• cos(number). Mengembalikan nilai cosinus dari number (dalam sudut
radian).
• exp(number). Mengembalikan pangkat e dari number, dimana e adalah
konstanta Euler's.
• floor(number). Mengembalikan integer yang lebih kecil atau sama
dengan the number.
• log(number). Mengembalikan logaritma natural (base e) dari number,
dimana number adalah sembarang bilangan positif hasil ekspresi atau
Objek. Jika number berada diluar jangkauan maka nilai pengembalian
defaultnya adalah1.797693134862316e+308.
• max(number1, number2). Mengembalikan terbesar dari kedua number.
• min(number1, number2). Mengembalikan terkecik dari kedua number.
• pow(base, exponent). Metode ini melakukan
pangkat base terhadap exponent. Jika salah satunya bilangan
imaginier, maka akan dikembalikan nol.
• random(). Hanya terdapat pada paltforms UNIX, yang mana
mengembalikan suatu pseudorandom number antara nol dan satu.
Pada Netscape Navigator 3.0, metode random() metode dapat
digunakan pada semua platforms.
• round(number). Mengembalikan nilai dari number yang dibulatkan
kebilangan integer terdekat.
• sin(number). Mengembalikan nilai sinus dari sudut dalam radian.
• sqrt(number). Mengembalikan nilai akar dari bilangan non negatif,
Jika diluar jangkauan akan dikembalikan nol.
• tan(number). Mengembalikan nilai tangen dari sudut dalam radian.

Contoh :
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var ran
ran = Math.round(Math.random()*50000)
alert("Anda adalah pengunjung yang ke " + ran + ".")

// End -->

</SCRIPT>

Objek Date

Walaupun JavaScript tidak menyediakan suatu type data Date, tetapi

menyediakan suatu objek Date yang mana menangani informasi date dan
time. Semua tanggal adalah jumlah milidetik sejak January 1, 1970,
00:00:00. Akibatnya semua tanggal sebelum 1970 adalah tidak sah.

Objek Date membutuhkan suatu instance dari objek Date yang berkaitan
dengan pemakaian metode-metodenya. Instance dapat berupa suatu objek
baru atau properti dari objek yang ada. Ada empat cara untuk membentuk
instance baru:
dateObjekName = new Date()

dateObjekName=new Date("month day, year hours:minutes:seconds")

dateObjekName=new Date(year, month, day)

dateObjekName=new Date(year, month, date, hours, minutes, seconds)

Membentuk suatu himpunan dari tanggal dan waktu ke tanggal dan waktu
sekarang. Mengosongkan time berarti memberinya nilai nol. Karena
objek Date tidak mengandung properti apa-apa, hanya ada satu format
untuk metode Date:
dateObjekName.metodeName(parameters)

Pengecualiaanya adalah UTC dan metode parse, yang mana adalah metode
status dan pemakaiannya
Date.UTC(parameters)

Date.parse(parameters)

Table 6 menjelaskan nilai yang akan dikembalikan oleh berbagai

perintah get.

Table 6. Memisahkan informasi dalam objek Date.

metode Date Nilai yang dikembalikan

getDate() Day of the month
getDay() Day of the week
getHours Hour of the day
getMinutes Minutes in the hour
getMonth The month
getSeconds Seconds in the minute
getTime Milliseconds since 1/1/1970
getTimezoneOffset Offset between local time and GMT
getYear The year

Selain dapat menerima berbagai informasi dari Objek Date, metode pada
Tabel 7 menunjukkan bagaimana mengubah informasi date.

Table 19.7. Setting informasi dalam objek Date.

metode Date Nilai yang sah

setDate(dayValue) 1-31
setHours(hoursValue) 0-23
setMinutes(minutesValue) 0-59
setMonth(monthValue) 0-11
setSeconds(secondsValue) 0-59
setTime(timeValue) >=0
setYear(yearValue) >=1970

Dua metode tambahan yang dapat digunakan untuk melakukan konvesi data
tanggal ke suatu nilai string, adalah sebagai berikut:

• toGMTString(). Metode ini meng-konversi date dalam GMT

(Greenwich Mean Time) dan mengembalikannya sebagai suatu
string. Format sebenarnya tergantung pada platform hardware.
• toLocaleString(). Mthod ini meng-konversi string ke format locale,
yang mana bervariasi berdasarkan setting.

Objek Date juga memiliki dua metode statik untuk menangani string; hal
tersebut memiliki format Date.metode(). Metode-metode ini adalah sebagai
berikut:

• parse(dateString). Metode ini melakukan konversisuatu string

tanggal ke jumlah detik sejak January 1, 1970, 00:00:00. Setting
waktu adalah default. Tetapi juga mendukung akhiran yang
menentukan GMT oatau U.S. standard time zones.
• UTC(year, month, day [, hrs] [, min] [, sec]). Metode ini
mengembalikan jumlah milidetik sejak January 1, 1970, 00:00:00
Universal Time Coordinate (dengan kata lain adalah, GMT).

Contoh :
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var months=new Array(13);

months[1]="Januari";
months[2]="Februari";
months[3]="Maret";
months[4]="April";
months[5]="Mei";
months[6]="Juni";
months[7]="Juli";
months[8]="Agustus";
months[9]="September";
months[10]="Oktober";
months[11]="Nopember";
months[12]="Desember";

var time=new Date();

var lmonth=months[time.getMonth() + 1];

var date=time.getDate();

var year=time.getYear();

if (year < 2000) // Y2K Fix, Isaac Powell

year = year + 1900;

document.write("<center>" + lmonth + " ");

document.write(date + ", " + year + "</center>");

// End -->

</SCRIPT>

Hasil :

Agustus 2, 2009

Fungsi Built-In

JavaScript mendukung beberapa function built-in yang mana tidak berkaitan

dengan Objek tertentu. Berikut ini adalah function-function built-in adalah
sebagai berikut:

• eval(string). Function eval meng-evaluasikan string, yang mana

dapat berupa ekspresi JavaScript, perintah, atau urutan dari perintah-
perintah, dan mengembalikan hasil. Beberapa contoh dari
function eval adalah
var x =

var y =

var z = "if (x <= 9) (x*y) else (x/y);"

document.write(eval("x + y / 4"), "<BR>")

document.write(eval(z), "<BR>")

• parseFloat(string). Fungsi ini mengurai string dan mengembalikan

suatu nilai floating point. Jika karakter pertama bukan suatu bilangan
atau tanda, nilai nol akan dikembalikan pada platform Windows,
dan NaN (not a number) pada platforms lain.
• parseInt(string [, radix]). Fungsi parseInt mengurai string dan
mengembalikan suatu integer berdasarkan basis yang ditentukan.
Nilai dari akar tersebut adalah 8 untuk octal, 10 untuk desimal, dan
16 untuk hexadesimal.
• isNaN(testValue). Fungsi ini hanya ada pada platforms UNIX untuk
dan mengevaluasi testValue untuk menentukan apalah adalah NaN.
Akan dikembalikan true atau false
• escape("string"). Mengembalikan encoding ASCII dari suatu
argumen dalam ISO Latin-1 character set. stringtersebut adalah suatu
non-alpahnumeric string atau property dari suatu Objek yang ada.
Jika berupa suatu alphanumeric, akan dilewatkan nilai ke output
string tanpa melakukan encoding terhadapnya.
• unescape("string"). Mengembalikan karakter ASCII untuk %xx,
atau hexadesimal yang ditentukan dalam parameter string.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Objek Netscape
Sebagai tambahan kepada objek-objek JavaScript dan metode, Pengembang
halaman Web dapat mengakses objek-objek dan metode dalam Netscape
browser. Bagian ini akan membahas Objek Netscape Navigator dan
metode-metodenya.

Hirarki Objek Navigator

Netscape Navigator membangun suatu hirarki instance-instance yang

berkaitan dengan dokumen yang sedang di proses.

Hirarki ini penting untuk membuat acuan kepada Objek dan propertinya.
Turunan dari suatu Objek adalah properti dari objek orang tuanya. Karena
semua objek adalah merupakan turunan dari objek window , sehingga
objek window sendirinya tidak memiliki acuan ke objek maupun properti
apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window lain
membutuhkan tambahan nama window kepada Objek acuan-nya.
Hal yang penting dari HTML Layout

Untuk dapat menggunakan JavaScript secara benar membutuhkan

pengertian bagaimana Netscape Navigator memproses suatu dokumen
HTML. Ketika suatu dokumen HTML di muat, browser akan mulai
melakukan proses terhadap baris pertama dari dokumen. Browser membuat
layout dari layar berdasarkan perintah HTML yang terdapat dalam dokumen
tersebut. Setelah layar selesai digambar, layar tidak dapat digambar ulang
tanpa melakukan proses terhadap dokumen baru. Bagaimana hal ini
mempengaruhi frame dan window adalah topik pada bagian berikutnya.

Sesuai dengan hal ini, maka instance dari suatu objek ada setelah proses
dilakukan terhadap baris HTML yang menghasilkan instance tersebut.
Dengan kata lain JavaScript tidak dapat mengacu pada suatu objek HTML
seperti form, atau menjalankan suatu fungsi sampai browser memproses
perintah tersebut. Sebagai contoh, JavaScript tidak dapat mengacu pada
suatu objek formsampai browser memproses HTML untuk form tersebut.
Demikian juga dengan proses perubahan properti, setelah browser
menggunakan properti dalam menghasilkan layout window, maka
perubahan properti setelah itu tidak memiliki efek terhadap tampilannya.

Walaupun nampaknya keterbatasan tersebut berat, namun dengan pengertian

yang baik terhadap HTML proses dan JavaScript akan mengurangi frustasi.
Prinsip utama yang perlu diingat bahwa suatu dokumen HTML diproses
secara berurut dan JavaScript adalah bagian dari proses secara berurut
tersebut.

Objek Window

Objek window adalah orang tua dari semua Objek. Hal tersebut termasuk
semua window dan frame yang berada dalam suatu. Ketika browser mulai
memuat suatu dokumen HTML, hal tersebut dimulai dengan suatu instance
dari objek window. Jika dokumen HTML membuat suatu frame, informasi
dari frame tersebut tersimpan dalam suatu objek frame array. Dengan kata
lain, membuka suatu window akan menghasilkan suatu anak dari objek
window. Kehebatan dari JavaScript adalah terletak pada kemampuan untuk
melakukan utilisasi properti dan metode dari objek window.

Bagian ini akan membahas properti dari objek window berikut :

• objek Location
• objek History
• objek Document

Diantara ketiga objek tersebut, document adalah objek yang paling penting
dalam hirarki tersebut. Objek document itu sendirinya mengacu kepada objek
lain. Hal lain yang penting dari hal ini adalah sebagai berikut:

• objek form
• objek anchor
• objek link

Objek location

Objek location mengandung informasi tentang URL sekarang. Acuannya ke

objek tersebut adalah sebagai berikut:
[windowReference.]location[.propertyName]

Properti dari Objek location mengacu pada bagian individual dari URL:
protocol//hostname:port pathname search hash

CATATAN
Objek location dan properti location dari objek dokumen
(document.location) memiliki tujuan yang berbeda.
Objek location dapat berubah, tetapi propertilocation tidak dapat
berubah.

Properti dari objek location adalah sebagai berikut:

• protocol. protocol menentukan metode access dari URL.

• hostname. hostname mengandung nama host dan domain, atau alamat
IP, dari host tujuan.
• port. port adalah TCP/IP port, jika kosong akan digunakan port
default dari protocol tersebut.
• pathname. pathname meliputi path resource pada host tujuan.
• search. property search adalah string yang dimulai dengan tanda ?
yang digunakan untuk script CGI.
• hash. property hash adalah suatu string yang dimulai dengan tanda
hash(#) dan diikuti dengan suatu anchor name.
• href. property ini merupakan keseluruhan dari URL. Jika acuan
dibuat ke[windowName.]location, property href menjadi asumsi.
• host. Property ini ekivalen dengan hostname:port.

CATATAN
Walaupun JavaScript memungkinkan modifikasi pada properti
individual, praktek pemrograman yang umum adalah mengubah
properti href. Pendekatan ini mencegah hasil error dari browser
sebelum akses URL belum berubah secara keseluruhan.

Contoh :
<a href="" onmouseover="parent.location='http://www.indoprog.com/'">
Langsung ke homepage Indoprog</A>

Contoh diatas akan langsung membuka

homepage http://www.indoprog.com begitu pointer lewat diatas
link Langsung ke homepage Indoprog

Objek History

Akses ke objek History adalah topik yang kontroversial karena

memungkinkan script mengirim history kembali ke server. Untuk mencegah
pemakaian yang menyimpang, Netscape Navigator 2.01 keatas telah
menghilangkan Objek ini.
Contoh 1 :
<a href="#" onClick="history.go(-1)">Back</a>
<input type=button value="Back" onClick="history.go(-1)">

Hasil :
Back

Contoh 2 :
<HEAD>

</SCRIPT>
</HEAD>

Objek document

Objek document menyimpan properti, objek, dan metode yang mewakili

dokumen. Hal tersebut mengacu pada bagian dokumen HTML yang
didefinsikan oleh tag <BODY></BODY>. Bagian ini mendiskusikan komponen
dari objek dokumen, kecuali objekform (yang akan dibahas pada bagian
berikutnya).

Properti objek document

Option HTML ke tag <BODY> mendefinisikan properti objek document.

JavaScript mengacu pada semua properti ini, kecuali untuk image
background.

CATATAN
String yang diperlukan untuk mengubah properti color adalah dalam
formatdocument.colorProperty =
"#RRGGBB" ataudocument.colorproperty="colorName". Property
color lainnya didefinisikan dalam tag <HEAD></HEAD> yang
mendahului tag <BODY>.

Properti color untuk Objek document adalah sebagai berikut:

• bgColor. Property ini menentukan warna latarbelakang dari dokumen.

Property bgColor secara langsung mengupdate tampilan.
• fgColor. Property ini menentukan warna text dari dokumen. Setelah
browser menyelesaikan layout dari dokumen HTML., browser
mengabaikan perubahan pada propery ini. Kecuali tag <FONT> atau
metode fontcolor metode menyediakan suatu mekanisme alternatif
untuk mengubah warna text.
• linkColor. linkColor mewakili warna dari suatu link yang
didefinsikan oleh HREF.
• alinkColor. property control warna dari suatu active link. Dengan
kata lain, hal tersebut adalah warna dari link ketika terpilih.
• vlinkColor. Situs yang pernah dikunjungi, browser menampilkan
warna untuk link tersebut.

Contoh 1:
<FORM>
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="40E0D0"> Torquoise
<OPTION VALUE="2E8B57"> Sea Green
<OPTION VALUE="87CEEB"> Sky Blue
<OPTION VALUE="F4A460"> Sandy Brown
<OPTION VALUE="FFF0F5"> Lavender Blush
<OPTION VALUE="FF1493"> Deep Pink
<OPTION VALUE="FFFFFF" SELECTED> White
</SELECT>
</FORM>

Hasil :

Objek document juga mengandung properti berikut yang tidak berkaitan

dengan warna:

• lastModified. Property read-only yang berkaitan dengan tanggal

terakhir dokumen dimodifikasi.
• location. Property read-only yang biasanya sama dengan nilai dari
lokasi Objek, kecuali redirection digunakan untuk URL
• referrer. Property read-only mengandung URL untuk dokument
yang mana di link ke dokumen tersebut.
• title. Property read-only mengandung nilai yang ditentukan pada
tag<TITLE></TITLE>.

Contoh 1:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Hasil:

Update terakhir :Sat, 19 Oct 2002 03:52:20 GMT Update terakhir :

07/14/2000 09:07:48

Contoh 2:
<form name=404form>
<script language="JavaScript">

</script>
</form>
Hasil :

Anda datang dari halaman :

The anchors Objek

Objek anchors mengandung suatu array dari semua anchors yang

dideklarasikan dengan atribut NAME dari tag <A> </A>. Array tersebut dimulai
dari 0 dan berlanjut sampai document.anchors.length - 1. Nilai
dari document.annchors[index]adalah null.

TIP
Sebelum menggunakannya untuk memberikan nilai
seperti location.hash, adalah mungkin untuk memeriksa keabsahan
dari anchor dengan membandingkannya dengan panjang array; anda
menggunakan bilangan berurut untuk menentukan anchors

Objek link

Array link mengandung Objek link yang didefinisikan oleh tag <A></A> atau
dengan metode link. Array tersebut meliputi objek untuk
atribut HREF dan NAME. Dengan tambahan ke atribut TARGET, properti dari
masing-masing Objek link adalah identik dengan Objek location.

CATATAN
link array adalah suatu array read-only. Entries tambahan
ditambahkan dengan tag<A></A>. Metode link melakukan
modifikasi terhadap isi dalam array link

Objek link memiliki dua event handler: onClick dan onMouseOver. Bagian
ini disebut sebagai "The Form Objek," pada bagian selanjutnya di bab ini,
menggambarkan bagaimana mengunakan event handler.

Properti cookie

Property cookie mengandung suatu nilai string dari isi cookier dari
file cookies.txt untuk dokumen tersebut. Untuk suatu keterangan lengkap
tentang bagaimana menggunakan cookies, lihat bagian Netscape cookie
specification. Metode substring,charAt, indexOf, dan lastIndexOf dapat
digunakan untuk memisahkan string cookie.
The document Objek Metodes

Objek document mengandung lima metode:

• document.write()
• document.writeln()
• document.open()
• document.close()
• document.clear()

Sebagaimana yang ditunjukkan pada contoh sebelumnya,

metode document.write, tanpa mengacu pada suatu window, menulis text ke
window yang sekarang. Metode document.writeln() adalah sama
dengan document.write, selain itu juga menyisip suatu karakter newline
pada akhir dari argumen. Format dari metode ini adalah sebagai berikut:
document.write(ekspresi [, ekspresi2] ... [ekspresiN])

document.writeln(ekspresi [, ekspresi2] ... [ekspresiN])

Tipe default MIME adalah text/html. Bagaimanapun,

metode document.open(["mimetype"]) memungkinkan untuk membuka type
MIME lainnya, seperti text/plain, image/gif, image/jpeg, image/x-bitmap,
dan plugIn. Metode document.open()membuka suatu stream untuk
mengumpulkan output dari metode write dan write.ln. Jika tipe MIME
adalah text atau image, browser membuka suatu stream untuk layout, untuk
plugIn, browser membukanya pada suatu plug-in. Jika suatu dokumen telah
siap dalam target windows, mthod open menghapusnya.

Contoh :
<SCRIPT>
document.write(Date()+".")
</SCRIPT>

Hasil :

Sun Aug 02 2009 10:59:31 GMT+0700 (SE Asia Standard Time).

CATATAN
Sekarang, tidak dimungkinkan lagi untuk mencetak tulisan apapun
dengan JavaScript melalui metode write ataupun writeln
Stream tersebut tetap terbuka sampai browser menemukan
metode document.close(). document.close() memaksakan isi dari stream
ditampilkan. Metode document.clear() membersihkan isi dari window.

Contoh :
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var clocktext, timeday;

// End -->

</script>

Hasil : Lihat pada Title Halaman ini

Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Objek Form
HTML tag <FORM></FORM> adalah fasilitas input data oleh pemakai, dan
output data variabel kepada pemakai. Input oleh pemakai memiliki efek
pemilihan pada sisi klien yang dapat dikirm ke server. Pada sisi lain, data
variabel seperti marquees dapat ditampilkan pada form. Pada sisi input,
event handle adalah fasilitas untuk membangkitkan rutin JavaScript untuk
melakukan aktifitas pada proses edit data seperti validasi. Pada sisi output,
JavaScript memegang peranan penting dalam mengatur bagaimana data
ditampilkan.

penanganan events
Event adalah hasil dari aksi pemakai, seperti klik pada suatu tombol mouse,
checking pada suatu kotak, dan pengiriman form. Penanganan Event
didefinsikan dalam tag HTML sepanjang JavaScript berkaitan dengan event
tersebut. Berikut ini adalah contoh yang merupakan kode dari suatu
penanganan event.
<INPUT TYPE="button" VALUE="Submit" onClick="validate(this.form)">

Pada contoh sebelumnya, kata kunci this mengacu pada objek tersebut,
yang mana adalah objek button. Dengan menyebutkanthis.form, adalah
acuan ke objek form yang mengandung button tersebut. Ketika contoh
sebelumnnya menjalankan suatu fungsi, perintah JavaScript juga sah. Kalau
lebih dari satu perintah, tiap perintah harus dipisahkan dengan suatu titik
koma.

TIP
Praktek pemrograman yang baik adalah menggunakan fungsi karena
mereka membuat kode lebih mudah dibaca dan dapat digunakan
kembali.
NOTE
Sampai suatu dokumen HTML selesai di muat ke window yang
mengandung tag<BODY></BODY>, suatu window tidak mengandung
penanganan event.

Berikut ini adalah daftar dari penanganan event yang didukung oleh
JavaSCript:

• onBlur.JavaScript menjalankan penanganan event ini ketika pemakai

meninggalkan field yang menyebabkan kehilangan fokus.
• onChange. dijalankan ketika user meninggalkan field dan terjadi
perubahan nilai object tersebut.
• onClick. event onClick terjadi ketika pemakai klik pada window atau
link..
• onFocus. event ini terjadi ketika suatu form mendapatkan fokus.
• onLoad. event ini terjadi ketika browser selesai memuat suatu
dokumen atau semua frame didalam tag <FRAMESET>.
• onMouseOver. event ini terjadi ketika mouse bergerak melewati object
dari luar object tersebut. Rutin JavaScript harus mengembalikan true
untuk status dan properti defaultStatus yang ditentukan..
• onSelect. event ini terjadi ketika pemakai melakukan select text pada
text area..
• onSubmit. terjadi ketika user submit suatu form. Jika JavaScript
mengembalikan false, form tersebut tidak akan di submit, nilai
lainnya atau tidak ada nilai balik, membuat form di submit.
• onUnload. event ini terjadi ketika dokument di exit.
Penanganan Event adalah bagian dari berbagai object. Beberapa object
mendukung lebih dari satu penanganan event, dan beberapa penanganan
event terjadi pada banyak objek. Tabel.8 menunjukkan hubungan antara
penanganan event dan objek-objek.

Table 8. Hubungan antara penanganan event dan objek.

Objek Penanganan Event

button onClick
checkbox onClick
form onSubmit
link onClick, onMouseOver
radio onClick
reset onClick
select onBlur, onChange, onFocus
submit onClick
text onBlur, onChange, onFocus, onSelect
textarea onBlur, onChange, onFocus, onSelect
window onLoad, onUnload

Contoh:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<FORM NAME="contoh" METODE=GET ACTION="" onSubmit="return periksa()">

<PRE>
Nama Anda : <INPUT TYPE=TEXT NAME="nama" SIZE=30 MAXLENGTH=30>
Umur : <INPUT TYPE=TEXT NAME="umur" SIZE=3 MAXLENGTH=3>
Tgl. Lahir: <INPUT TYPE=TEXT NAME="lahir" SIZE=10 MAXLENGTH=10>
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</PRE>
</FORM>

Hasil:
Nama Anda :

Umur :

Tgl. Lahir:
Submit Query Reset

FORM>.
Untuk JavaScript, hal tersebut adalah suatu read-only array yang
membentuk properti berikut :

• action. property ini mengandung nilai dari atribut ACTION.

• element. ini adalah suatu array dari elemen object yang didefinsikan
untuk form.
• encoding. property ini mengandung nilai dair atribut ENCTYPE.
• length. property ini mengandung jumlah dari isian didalam element
array.
• metode. property ini mengandung nilai dari atribut METODE.
• target. property ini mengandung nilai dari atribut TARGET .

Berikut ini adalah arti yang sah dari pengalamatan bentuk object ::
formName.propertyName

formName.metodeName(parameters)

forms[index].propertyName

forms[index].metodeName(parameters)

Metode Objek Form

Object form hanya memiliki satu metode-submit. Metode submit

melakukan
aksi yang sama seperti tombol submit pada HTML form dan memiliki tata
cara penulisan sebagai berikut:

document.formName.submit()

Objek element

Objek elemen berpengaruh pada isi elemen dalam tag <FORM></FORM>. Tabel
9 menperlihatkan elemen objek dan properti-nya.

Tabeel 9. Properti dari objek element.

Element Properti
object
button name, value
checkbox name, value, checked, defaultChecked
hidden name, value
password name, value, defaultValue
radio name, value, checked, defaultChecked, length
reset name, value
select name, length, options array, selectedIndex
submit name, value
text name, value, defaultValue
textarea name, value, defaultValue

Properti adalah mengunakan pengalamatan

seperti document.elementName.property, atau document.formName.
elements[index].propertyName, dimana elementName adalah nilai dari nama
property untuk objek elemen.

Metode element

Metode element melakukan emulasi dari sepupu mereka, yaitu penanganan

event:

• blur(). Metode ini memindahkan fokus dari object yang ditentukan,

tetap tidak membuat fokus pada objek lain.
• click(). Metode ini melakukan suatu simulasi klik mouse pada suatu
objek yang ditentukan. Ketika mengacu pada element radio,
bentuknya adalah document.radioName[index].click().
• focus(). Metode ini memberikan fokus pada objek tertentu.
• select(). Metode ini men-select seluruh text area.

Kecuali objek radio, metode dialamatkan

sebagai document.elementName.metodename(). Tabel 10 mendaftarkan
element objek-objek dan metode yang bersesuaian

Table 10. Metode-metode dari elemen objek-objek.

Elemen objek Metode

button click
checkbox click
hidden (tidak ada metode)
password blur, focus, select
radio click
reset click
select blur, focus
submit click
text blur, focus, select
textarea blur, focus, select

Contoh :
<form>

F:
<input type="text" name="F" value="32"
onChange="C.value = 100/(212-32) * (this.value - 32 )"><br>
C:
<input type="text" name="C" value="0"
onChange="F.value = (212-32)/100 * this.value + 32 "><br>

</form>

Hasil :

F:
C:
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Window dan Frame

Window dan frame membuat bingung banyak pengembang halaman Web
dari pada aspek-aspek browser lainnya. Ketika Netscape Navigator berjalan,
suatu window akan dibuka, dan tergantung bagaimana pengaturan
optionnya, serta memuat suatu dokumen ke dalam window tersebut. Jika
anda memilih menu option File | New Web Browser, suatu window baru
akan di buka. Dalam hal ini menutup jendela yang sebelumnya tidak akan
menutup jendela yang baru tersebut.

Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET>

dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika
dokumen frame ditutup, frame menghilang karena keberadaannya
tergantung pada dokumen tersebut.

Properti Objek Window

Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat

dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada
menampilkan pesan, tetapi sangat tergantung pada parameter yang
diberikan. berikut ini adalah properti dari objek window yang akan
mempengaruhi fleksibilitas dari jendela browser:
• defaultStatus. defaultStatus adalah pesan yang dimunculkan pada
status bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset
dari onMouseOver event handler, event handler harus mengembalikan
true untuk perubahan status.
• frames. Property ini adalah suatu array yang mengandung object
frame. Frame mewarisi semua properti dan metode dari objek
window.
• length. nilai dari properti ini adalah jumlah frame dalam frame array.
• parent. Dari suatu acuan frame, ini adalah window yang mana
frameset berada. Suatu frame diantara frameset tersebut dapat
mengacu pada frame lain dalam frameset dengan
menggunakan parent.frames[index] tanpa memiliki acuan ke nama
window.
• self. Ini adalah sama dengan window atau frame yang sekarang.
• status. Ini adalah pesan transient yang mana diset
dengan onMouseOver event handler.
• top. Property ini digunakan sebagai acuan window yang laing atas.
Dapat digunakan oleh child windows atau embedded filesets untuk
mengacu pada window original.
• window. Property ini adalah sama dengan window sekarang.

Contoh:
<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik
disini untuk keterangan lebih lengkap'; return true;"
onMouseOut="window.status=''; ">Klik disini</A>

Hasil:

Klik disini

Bentuk untuk mengacu properti window adalah

window.propertyName

self.propertyName

top.propertyName

parent.propertyName

windowVar.propertyName

propertyName

Metode Objek Window

Berikut ini adalah metode dari objek window atau frame:

• alert("message"). Metode ini membuat suatu kotak dialog peringatan

dengan suatu tombol OK tunggal. Digunakan untuk menampilkan
pesan yang tidak membutuhkan keputusan pemakai.
• close(). Metode ini menutup window acuan. Harus mengandung
window acuan seperti window.close dan close()tanpa acuan adalah
sama dengan document.close.
• confirm("message"). Metode confirm menampilkan suatu dialog box
konfirmasi dengan tombol OK dan Cancel. OK mengembalikan nilai
true, dan Cancel mengembalikan nilai false.
• [windowVar = ][window.]open("URL", "windowName"
["windowFeatures"]. Metode ini membuka suatu Jendela browser
yang baru. Nama object windowVar adalah nama dari jendela baru dan
digunakan sebagai acuan untuk properti dan metodes-nya.URL
menentukan URL yang akan dibuka ke jendela baru. Jika optionnya
null, suatu window kosong akan dibuka. Variabel windowName adalah
nama yang digunakan pada atribut TARGET dari <FORM> dan <A> tag.
Variabel windowFeatures adalah suatu comma-separated list dari
option berikut:
toolbar=yes|no

location=yes|no

directories=yes|no

status=yes|no

menubar=yes|no

scrollbars=yes|no

resizable=yes|no

width=pixels

height=pixels

• Jika tidak ada yang ditentukan, maka semuanya bernilai true. Jika
salah satu ditentukan, maka semua yang lain menjadi false. Jika salah
satu di tentukan tanpa nilai, maka nilainya adalah true.

NOTE
Setelah terbuat, window adalah tidak terikat pada parent window, jika
parent window di tutup, window yang dibuat tersebut tetap
buka.Event onUnLoad menangani penutupan window yang dibuat
• prompt("message" [, inputDefault]). metode prompt menampilkan
suatu prompt dialog box dengan suatu message, suatu input field, dan
tombol OK, dan sebuah tombol Cancel. inputDefault adalah suatu
string, integer, atau property dari suatu object yang mana mewakili
nilai default untuk inout field. Jika inputDefault tidka ditentukan,
input fied menampilkan nilai <undefined>.
• timeoutID=setTimeout(expression, msec). Dengan metode ini,
evaluasi dari ekspresi adalah jumlah delay dalam
milidetik. timeoutID adalah hanya digunakan oleh
metode clearTimeout.
• clearTimeout(timeoutID). Metode ini membatalkan time-out yang
ditentukan oleh metode setTimeout.

Metode sebelumnya menggunakan acuan berikut:

window.metodeName(parameters)

self.metodeName(parameters)

top.metodeName(parameters)

parent.metodeName(parameters)

windowVar.metodeName(parameters)

metodeName(parameters)

PERHATIAN
Metode open() dan close() perlu mengunakan
acuan window.open() danwindow.close() untuk menghindari scope
dengan document.open() dandocument.close()

Membagi Window kedalam Frame

Frames membagi suatu window secara multiple, memiliki scrollbar masing-

masing. Frame dibuat dengan tag<FRAMESET></FRAMESET> dalam dokumen
HTML. Masing-masing dokumen membuat suatu frame array untuk
dokumen. Jika suatu dokumen dibuka pada salah satu frame memiliki
suatu <FRAMESET> tag, frame akan terbagi lagi menjadi frame oleh dokumen
tersebut. Hirarki dari frameset adalah penting sebagai acuan properti dan
metode dari frame.

CATATAN
Frames memiliki semua properti dari suatu window. Seluruh hirarki
untuk struktur frame adalah sama dengan struktur window.

Struktur dibawah setiap window atau frame dapat menjadi acuan.

Selanjutnya, properti pada suatu window atau frame dapat mengubah
properti object pada jendela atau frame lain.
CATATAN
Dokumen HTML yang
menggunakan <FRAMESET></FRAMESET> mengandung hanya perintah
frame. Setelah frame terbuka, dokumen tersebut menjadi tidak visible.
Dokumen HTML adalah suatu frame dapat mengendalikan frame lain.
Selanjutnya kemungkinan untuk pengaturan layar memberikan
kebebasan bagi pengembang untuk suatu dokumen web yang
interaktif

Contoh :
<html>
<head>

if (top.location != this.location)

top.location = this.location //membuat html tidak

berada
//dalam frame lain
</script>

<title>Tutorial JavaScript</title>

<frame src="daftar.html" name="kiri">

<frame src="topik1.html" name="kanan">

</frameset>

</head>
</html>
file daftar.html
<html>
<head>

function buka(x)
{
top.frames[1].location=x;
return false
}

</script>

</head>

<body>

<h1>Daftar Isi</h1>
<a href="" onclick="return buka('topik1.html')">Memasukan
JavaScript ke dalam HTML</a><hr>
<a href="" onclick="return buka('topik2.html')">Variabel dan
Literal</a><hr>
<a href="" onclick="return buka('topik3.html')">Ekspresi dan
Operator</a><hr>
<a href="" onclick="return buka('topik4.html')">Struktur Kendali
dan Fungsi</a><hr>
<a href="" onclick="return buka('topik5.html')">Dasar dari
Objek</a><hr>
<a href="" onclick="return buka('topik6.html')">Objek dan Fungsi
built-in</a><hr>
<a href="" onclick="return buka('topik7.html')">Objek
netscape</a><hr>
<a href="" onclick="return buka('topik8.html')">Objek form</a><hr>
<a href="" onclick="return buka('topik9.html')">Window dan
Frame</a><hr>

</body>
</html>

Klik untuk melihat hasil dari contoh diatas

Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Tips & Trik

Bagian Tips & Trik ini adalah beberapa hal yang dapat anda lakukan untuk
meningkatkan halaman Web anda tanpa tahu banyak mengenai JavaScript.

• Meletakan tulisan pada status bar

• Menampilkan tanggal "Last Updated" pada dokumen
• Menampilkan pesan dengan suatu kotak pesan
• Membuat suatu link yang dapat menutup jendela browser
• Membuka suatu halaman berdasarkan pilihan pemakai pada suatu
dropdown list
• Membagi Jendela Browser menjadi frame, dan klik link pada pilihan
diframe kiri akan mengupdate isi frame kanan.

Meletakan tulisan pada status bar

Contoh pertama mendemontrasikan bagaimana memanipulasi tulisan pada

status bar. Ketika anda mengerakan kursor melalui suatu link, maka
statusbar akan menampilkan URL tujuan link tersebut.

Suatu kode HTML untuk suatu membentuk link dapat berupa :

<A HREF="mylink.htm">klik disini</A>

Untuk menampilkan sesuatu pada status bar ketika mouse pointer digerakan
melalui link, anda perlu menambah kode berikut :
<A HREF="mylink.htm" onMouseOver="window.status='Klik disini untuk
mengetahui lebih jauh tentang saya'; return true;"
onMouseOut="window.status=''; ">Klik disini</A>

Kode diatas akan menghasilkan suatu link Klik disini. Coba gerakan mouse
pointer melaluinya, mudah bukan ?

onMouseOver adalah suatu penanganan event. Perlu diperhatikan bahwa

JavaScript akan membedakan huruf besar dan huruf kecil, tetapi Microsoft
Internet Explorer adalah lebih pemaaf dibandingkan dengan Netscape
Navigator, jadi untuk hasil yang lebih akurat, sebaiknya anda
menggunakan Navigator dalam memeriksa kebenaran script pada halaman
anda.

Anda mungkin merasa aneh mengapa kami diperlukan suatu return

true; pada penanganan event onMouseOver. Normalnya browser
menampilkan URL dari link pada status bar, dan potongan kode ini
memberitahukan kepada browse untuk tidak menimpa pesan kita dengan
URL tersebut.

Menampilkan tanggal "Last Updated" pada dokumen

Pada halaman kita sering ingin menampilkan informasi kepada pengunjung

tanggal terakhir kali halaman kita di Update. Berikut ini adalah potongan
script yang akan secara otomatis menghasilkan informasi terakhir kali
halaman kita di Update:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Sisipkan kode berikut pada bagian dokumen HTML anda yang akan
menampilkan informasi Last update. Perhatikan bahwa script diketik
diantara tag komentar HTML , tujuannya supaya script tersebut
tersembunyi dari browser non-JavaScript, dengan demikian tidak
menimbulkan kesalahan pada browser non-JavaScript tersebut.

Catatan : biasakan mengetik script anda diantara tag komentar HTML .

Menampilkan pesan dengan suatu kotak pesan

Kadang-kadang kita ingin menampilkan suatu pesan kepada pengunjung,

jika suatu tombol atau link di klik. Pada JavaScript kita dapat menggunakan
fungsi alert() yang mana akan menampilkan suatu kotak pesan. Misalnya
kita ingin memberi kejutan kepada pengunjung, begitu halaman dibuka.
Untuk melakukan hal ini, tambahkan saja kode berikut setelah tag <BODY>
(atau diantara tag <HEAD>).
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Hal ini tentu saja akan menjadi kejutan bagi pengunjung halaman anda :-).
Bagaimana jika kita ingin menampilkan suatu kotak pesan ketika user
melakukan klik pada suatu link Anda dapat mencoba klik disini. Untuk
memahami apa sebenarnya yang terjadi, coba simak script berikut :
<A HREF="JavaScript: alert('pesan anda disini.')">

JavaScript: bagian ini akan memberitahukan kepada browser bahwa dia

harus menjalankan perintah JavaScript yang tersebut ketika link di klik.

Anda juga dapat membuat suatu pesan ditampilkan tombol ditekan. Coba
yang berikut ini:
<FORM>
<INPUT TYPE=BUTTON VALUE="Klik disini"
onClick="alert('pesan anda disini')">
</FORM>

Catatan

Anda mungkin memperhatikan bahwa, cara penulisan script pada setiap

contoh diatas berbeda. Yang pertama adalah script ditulis diantara tag
HTML <A HREF=...>, yang kedua adalah diantara suatu tang <SCRIPT> ...
</SCRIPT>. Perbedaan ini adalah bahwa, script pertama akan dijalankan
pada event tertentu (MouseOver dalam hal ini), sedangkan untuk yang
kedua, script langsung dijalankan ketika ditemukan pada dokumen HTML.

Membuat suatu link yang dapat menutup jendela browser

Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan
metode close pada objek window.

Contoh :
<A HREF="javascript:window.close()">tutup</A>
Coba klik tutup untuk menutup jendela ini.

Membuka suatu halaman berdasarkan pilihan pemakai pada suatu

dropdown list

Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih
pemakai, dan membuka halaman yang diinginkan

Adapun kode untuk Contoh diatas:

<SCRIPT LANGUAGE='JavaScript'>
<!--
function BuatArray() {
var jlhargumen = BuatArray.arguments.length;
for ( i = 0 ; i < jlhargumen; i++ )
{ this[i]=BuatArray.arguments[i] }
}

function buka() {
var pilih = eval(document.dropdown.site.selectedIndex);
if( (pilih > 0) && (pilih < 7) ) {
var bagian=new BuatArray( '',
'http://indoprog.terrashare.com/tutor/html/index.html',
'http://indoprog.terrashare.com/tutor/javascript/index.html',
'http://indoprog.terrashare.com/tutor/asp/index.html',
'http://indoprog.terrashare.com/tutor/php/index.html',
'http://indoprog.terrashare.com/tutor/perl/index.html');

this.location=buka[pilih];
}
}
//-->
</SCRIPT>

<FORM NAME="dropdown">
<SELECT NAME="site" onChange='buka();' ALIGN="left">
<OPTION SELECTED>Pilih tutorial yang diinginkan
<OPTION>HTML
<OPTION>JavaScript
<OPTION>ASP
<OPTION>PHP
<OPTION>Perl
</SELECT>
</FORM>

Membagi Jendela Browser menjadi frame, dan klik link pada pilihan
diframe kiri akan mengupdate isi frame kanan.

Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan

contoh berikut :
Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai
berikut :
Contohy.html
<html>
<head>

<title>Tutorial JavaScript</title>

<frame src="menu.html" name="kiri">

<frame src="topik1.html" name="kanan">

</frameset>

</head>
</html>

Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama
menu.html, dan sebelah kanan akan diaktifkan topik1.html, dan isi dari
menu.html adalah sebagai berikut :
menu.html
<html>
<head>
<script language="JavaScript">
function buka(x)
{
top.kanan.location=x; // membuka halaman x pada frame kanan
return false
}
</script>
</head>
<body>
<h1>Daftar Isi</h1>

<a href="" onclick="return buka('topik1.html')">Memasukan

JavaScript ke dalam HTML</a><hr>
<a href="" onclick="return buka('topik2.html')">Variabel dan
Literal</a><hr>
<a href="" onclick="return buka('topik3.html')">Ekspresi dan
Operator</a><hr>
<a href="" onclick="return buka('topik4.html')">Struktur Kendali
dan Fungsi</a><hr>
<a href="" onclick="return buka('topik5.html')">Dasar dari
Objek</a><hr>
<a href="" onclick="return buka('topik6.html')">Objek dan Fungsi
built-in</a><hr>
<a href="" onclick="return buka('topik7.html')">Objek
netscape</a><hr>
<a href="" onclick="return buka('topik8.html')">Objek form</a><hr>
<a href="" onclick="return buka('topik9.html')">Window dan
Frame</a><hr>

</body>
</html>
Pada menu.html diatas, kita menggunakan event onclick pada masing-
masing link yang akan memanggil suatu fungsi buka yang diikuti dengan
suatu parameter yang berupa nama dokumen html target. Pada fungsi buka,
kita menggunakan properti location untuk frame kanan membuka halaman
bersangkutan.

Catatan : kanan dalam hal ini adalah nama frame.

Klik untuk melihat hasil dari contoh diatas

Bagaimana, menarik bukan ?

Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Pengenalan
JavaScript adalah suatu bahasa script yang menyerupai cara penulisan pada
Java. Kode JavaScript dituliskan diantara tag HTML yang akan
diinterpretasikan oleh browser klien. Java script akan membuat halaman
Web anda menjadi lebih interaktif. Menggunakan JavaScript,
memungkinkan kustomisasi terhadap dokumen HTML pada saat diakses
dengan menulis melalui penanganan event terhadap elemen-elemen dalam
halaman tersebut, memeriksa data form pada sisi klien dan melakukan
perhitungan pada sisi klien.

Agar dapat bekerja dengan lancar dengan contoh JavaScript berikut ini,
tentu saja anda membutuhkan suatu browser yang mendukung
JavaScript which you already have.

Tentang JavaScript

JavaScript adalah bahasa script yang dinamis. Hal ini berarti bahwa tipe data
pada Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang
lain sesuai dengan kebutuhan. Sebagai contoh, anda dapat
menyatakan myData = 10; pada suatu baris initialisasi, dan baris berikutnya,
menyatakan myData = "Hello World!" yang membuat tipe myData menjadi
suatu string. Java Script akan secara otomatis mengubah tipe data
berdasarkan ekspresi yang ditentukan. Jadi jika anda menyatakan myData =
"10" - 2;, maka anda akan bertanya mengapa Javascript tidak
mengkonversi 2 menjadi "2" dan menghasilkan "102",jawabanya adalah
karena operator - tidak ditujukan untuk pemakaian pada string sehingga "10"
- 2 tidak memiliki arti sama sekali. Berikut ini akan membawa kita kepada
suatu situasi yang lebih menarik. Operator + dinyatakan untuk pemakaian
pada numerik dan string. Jadi akankah 10 + "20" mengembalikan
nilai 30 (10+20) atau "1020" ("10" + "20"). Hal ini tentu saja akan
membingungkan anda dengan pemakaian operator +, jawabannya adalah
Javascript akan selalu mengkonversi segala sesuatu ke string sebelum
melakukan evaluasi, sehingga 10 + "20" adalah sama dengan "10" +
"20" dan hasilnya adalah "1020".

Perhatian: JavaScript membedakan huruf besar dan kecil, sehingga

penulisan indoprog adalah berbeda dengan Indoprog (Ngomong-ngomong
apakah kepanjangan dari indoprog?)

Berkaitan dengan keamanan yang terkandung dalam JavaScript, adalah

sangat tidak benar bahwa kode JavaScript dapat merusak sistem anda.
Sehingga anda dapat mengunakannya tanpa perasaan was-was.

Contoh JavaScript

Semua contoh yang diberikan disini adalah pendek dan sederhana. Jika anda
merasa berguna, silahkan duplikasi dan masukkan ke halaman Web anda.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Mengubah warna latarbelakang

Ingin membuat halaman yang memiliki latarbelakang yang dapat diubah
sesuai dengan keinginan pemakai ? Hal ini dimungkinkan dengan
menggunakan Javascript. Tetapi sebenarnya ini bukanlah ide yang baik.

Coba pilih warna kesukaan anda dari daftar berikut :

Kode untuk mengubah warna latarbelakang adalah :

document.bgColor = "rrggbb"

dimana "rrggbb" adalah suatu string yang menyatakan komponen merah

(red), hijau (green) dan biru(blue) dalam hexadesimal. Script untuk contoh
diatas adalah sebagai berikut.
<FORM>
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="40E0D0"> Torquoise
<OPTION VALUE="2E8B57"> Sea Green
<OPTION VALUE="87CEEB"> Sky Blue
<OPTION VALUE="F4A460"> Sandy Brown
<OPTION VALUE="FFF0F5"> Lavender Blush
<OPTION VALUE="FF1493"> Deep Pink
<OPTION VALUE="FFFFFF" SELECTED> White
</SELECT>
</FORM>

Jika anda menentukan suatu image latarbelakang pada tag HTML

<BODY> , maka contoh diatas tidak akan memiliki hasil efek.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Statusbar dan Scroller

Pernah melihat yang tulisan berputar di status bar browser ? Itu adalah
scroller. Tulisan berputar sangat populer dan menarik perhatian bagi
pemula, dan bukan merupakan ide yang baik, karena fungsi status bar bukan
ditujukan untuk hal tersebut. Menurut anda apa fungsi status bar ?

Program Scroller

Berapa banyak baris script yang diperlukan untuk menghasilkan suatu

scroller ? Jawabnya Dua belas baris.

Fasilitas apa saja yang terdapat pada JavaScript sehingga memungkinkan

kita membuat suatu scroller ?

Pertama adalah kemampuan menampilkan tulisan pada status bar dengan :

window.status = "Ini akan muncul pada status bar"

Kedua adalah adanya fungsi setTimeout(). Fungsi ini memiliki dua buah
parameter. Parameter pertama adalah string yang merupakan perintah
JavaScript yang akan diaktifkan dan parameter kedua adalah jumlah
milidetik untuk mengaktifkan perintah tersebut.

Tulisan berputar pada dasarnya adalah suatu fungsi, yang pada pada setiap
aksi, memindahkan tulisan pada scrollbar sedikit ke kiri dan kemudian
memanggil setTimeout() untuk mengaktifkan kembali dirinya setelah suatu
interval waktu tertentu.
Berikut ini adalah kode lengkap untuk menghasilkan scroller.

<SCRIPT LANGUAGE="JavaScript">
<!-- Start of scroller script
var scrollCounter = 0;
var scrollText = "Teks yang anda inginkan, misalnya Viva Indoprog";
var scrollDelay = 70;
var i = 0;

while (i ++ < 140)

scrollText = " " + scrollText;

function Scroller()
{
window.status = scrollText.substring(scrollCounter++,
scrollText.length);
if (scrollCounter == scrollText.length)
scrollCounter = 0;
setTimeout("Scroller()", scrollDelay);
}

Scroller();
// End of scroller script -->
</SCRIPT>

Fungsi lainya yang kita gunakan adalah substring(), yang mana merupakan
metode dari objek string. Jika name="JavaScript",
maka name.substring(4,9) akan mengembalikan "Script". Sudahkah anda
mengerti garis besarnya ?

Membuat tulisan berputar pada halaman anda

Jika pemrograman bukan merupakan bidang anda, dan anda menginginkan

scroller diatas, maka duplikasi saja kode diatas ke file HTML anda, dan
letakkan di antara tag <HEAD> dan </HEAD> serta
ubah scrollText dan scrollDelay variabel pada baris 4 & 5 sesuai dengan
kebutuhan anda.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Fungsi Date Time

Selamat Pagi Selamat Pagi

Untuk memudahkan penanganan tanggal dan waktu, JavaScript

menyediakan Objek Date didalamnya. Suatu variabel Date harus
dideklarasikan terlebih dahulu sebelum kita dapat menggunakannya.
Pendeklarasian Objek Date dapat menggunakan statement JavaScript berikut
ini.
dateVar = new Date();

Contoh diatas akan membuat suatu variabel dengan nama dateVar dan
mengisinya dengan tanggal dan waktu sekarang. Jika anda ingin
menentukan tanggal dan waktu lainnya, anda dapat menggunakan salah satu
cara penulisan berikut.
dateVar = new Date("month day, year hours:minutes:seconds")
dateVar = new Date(year, month, day)
dateVar = new Date(year, month, day, hours, minutes, seconds)

Metode dari Object Date

Metode-metode yang paling banyak digunakan pada objek tanggal adalah

sebagai berikut.
getYear()
dateVar.getYear() mengembalikan nilai seperti 99 sesuai dengan
tahun dari dateVar.
getMonth()
mengembalikan nilai antara 0 dan 11 sesuai dengan tanggal January
s/d December.
getDate()
mengembalikan nomor hari dari bulan.
getDay()
mengembalikan nomor hari dari minggu. Nol untuk Minggu, satu
untuk Senin dan seterusnya.
getHours()
mengembalikan angka antara 0 dan23 menentukan jam dari hari.

Anda mungkin pernah menggunjungi situs yang dapat menyapa Selamat

Pagi atau Selamat Malam tergantung pada waktu kunjungan anda. Hal ini
dapat dilakukan dengan memeriksa waktu sekarang dan sisipkan sapaan
dengan menggunakan fungsidocument.write(). Kode berikut ini dapat
melakukan hal tersebut. Sisipkan kode tersebut dalam HTML file pada
posisi dimana anda ingin sapaan tersebut muncul.
<SCRIPT LANGUAGE="JavaScript">
<!-- Memyembunyikan kode dari browser non-js
currentTime = new Date();
if (currentTime.getHours() < 12)
document.write("Selamat Pagi");
else if (currentTime.getHours() < 17)
document.write("Selamat Sore");
else document.write("Selamat Sore");

// akhir dari penyembunyian -->

</SCRIPT>

Membuat Jam Digital

Berikut ini adalah suatu contoh program jam digital dengna JavaScript.

Kode-nya adalah sebagai berikut:.

Fungsi setTimeout() telah didiskusikan pada Scroller.

Metode blur() digunakan untuk memindahkan focus dari textbox Jam.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Menampilkan Icon New-Item

Ketika anda menambahkan atau melakukan modifikasi tertentu pada situs
anda, anda sering ingin menempatkan suatu icon (new)disampingnya,
sehingga pengunjung dengan mudah dapat menemukan hal-hal yang baru
tersebut. Tentu saja icon tersebut ditampilkan untuk suatu periode waktu
tertentu dan kemudian dihilangkan. Pekerjaan tersebut menjadi tidak efektif
bila anda melakukan modifikasi situs secara berkala atau situs anda cukup
besar.

Dengan menggunakan JavaScript, adalah memungkinkan untuk

memprogram HTML yang menampilkan icon new untuk suatu periode
waktu tertentu. Anda dapat menulis suatu fungsi JavaScript yang mana
berfungsi membandingkan waktu sekarang dengan waktu kadaluarsa yang
telah ditetapkan, atau dengan kata lain sisipkan icon new hanya jika tanggal
sekarang belum mencapai tanggal kadaluarsa. Berikut ini kodenya :
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Biasanya, fungsi seperti ini didefinisikan antara

bagian <HEAD> dan </HEAD> pada HTML. Ganti nama new.gif ke nama dari
image anda dan modifikasi atribut WIDTH dan HEIGHT ke ukuran yang sesuai.
Sekarang dimana saja anda ingin meletakkan icon new tersebut, sisipkan
kode berikut :
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
Icon akan menampilkan tanggal yang mana anda tentukan sebagai parameter
untuk newItem().
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Membuka dan Manipulasi Window

Jika anda pernah berurusan dengan homepage-homepage
di Geocities atau Tripod, anda akan terbiasa dengan suatu jendela kecil yang
muncul dengan suatu iklan banner. Bisa saja anda merasakan hal tersebut
mengganggu. Tetapi anda harus percaya pada saya bahwa adalah cukup
menyenangkan jika anda melalukan hal tersebut pada homepage anda. Tidak
percaya...? Klik disini!

Saya tidak akan memberikan source codenya karena sebaiknya anda tidak
melakukan hal tersebut pada penggunjung homepage anda ;-)

Pop-up windows biasanya digunakan ketika anda ingin menampilkan

sesuatu kepada user, tetapi anda tidak ingin mereka meninggalkan halaman
yang sedang mereka lihat (Mungkin anda takut mereka tidak akan kembali).

Mari kita lihat kode yang digunakan untuk membuat link tersebut.
klik disini
Perlu dicatat bahwa saya menggunakan petik tunggal untuk string
bersangkar (nested string). Bagian 'return false' memberitakukan browser
bahwa ketika user melakukan klik pada link, browser tersebut tetap akan
berada pada halaman yang sama dari pada halaman yang ditentukan pada
HREF. Penanganan event onClick() akan memanggil
fungsi window.open()untuk membuka suatu jendela browser yang baru.
Parameter pertama adalah : 'http://www.indoprog.f2s.com' merupakan
URL yang akan dimuat. Parameter kedua adalah, 'indoprogWnd' merupakan
nama yang akan diberikan pada jendela baru tersebut. Parameter ketiga
menentukan dimensi tampilan dari jendela. Kita menentukan ukuran jendela
adalah 370x240 dengan sautu status bar. Perhatikan disana ada koma untuk
pemisah masing-masing elemen. Tampilan dari window dapat dikenalikan
dengan option sebagai berikut:
height
Tinggi dari jendela baru dalam pixel (mis: height=100)
width
Lebar dari jendela dalam pixel (mis: width=200)
directories
Menentukan apakah browser menampilkan tombol directory sepert
i"What's Cool" dll. (mis: directories=yes)
hotkeys
Mengaktifkan atau menonaktifkan aneka tombol hotkey
(mis: hotkeys=no)
location
Menentukan apakah kotak "Location" ditampilkan
(mis: location=yes)
menubar
Menentukan apakah jendela baru memiliki menu bar
(mis: menubar=yes)
resizable
Menentukan apakah pemakai diperbolehkan untuk mengubah ukuran
dari jendela baru (mis: resizable=no)
scrollbars
Menentukan apakah jendela baru memiliki scroll
bars(mis: scrollbars=yes)
toolbar
Menentukan apakah jendela baru memiliki suatu toolbar
(mis: toolbar=yes)

Selain nilai dari yes/no, anda dapat juga menggunakan nilai 1/0. mis, anda
dengan menulis toolbar=1 sebagai penganti daritoolbar=yes.
Berikut ini adalah beberapa kombinasi yang mana dapat anda coba sendiri.
Semuanya akan membuka dokumen pada suatu jendela baru dengan efek
yang berbeda-beda.

Coba ini
Coba ini
Suatu jendela dasar, tanpa menu, tanpa toolbar, tanpa status bar, dan bahkan
tanpa scroll bar.

Coba ini
Coba ini

Suatu jendela dengan menubar, kotak location dan scroll bars.

Coba ini
Coba ini

Suatu window dengan toolbar, statusbar dan scroll bar. Anda dapat juga
mengubah ukuran jendela jika anda menginginkannya dimana hak tersebut
tidak mungkin dilakukan pada jendela-jendela sebelumnya.

Pada contoh diatas, saya memisahkan kode ke dalam sejumlah baris untuk
memudahkan pembacaan, tetapi jika anda ingin menggunakan-nya, pastikan
segala sesuatu berada dalam petik ganda dan seluruhnya berada dalam suatu
petik tunggal.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Bekerja dengan Form

Untuk membuat halaman yang interaktif dengan pengunjung, anda tentu
saja membutuhkan Form untuk mendapatkan masukkan dari pengunjung.
Biasanya hasil input tersebut akan diproses dengan suatu CGI Script atau
mekanisme sejenisnya. Jika anda tidak/ terbiasa dengan form dan CGI
script, anda harus membaca An Instantaneous Introduction to CGI Scripts
and HTML Forms.
• Membuat suatu form
• Validasi form dengan penanganan event onSubmit()
• Mengatur focus
• Jika anda anggota GeoCities . . .

Membuat suatu form

Berikut ini suatu contoh form dengan tiga field, sebuat tombol submit dan
sebuah tombol reset.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Form diatas dibuat dengan menggunakan kode HTML berikut ini:

<FORM NAME="contoh" METHOD=POST

ACTION="/cgi-bin/homestead/mail.pl?member_name">
Masukkan nama anda : <INPUT TYPE=TEXT NAME="nama" SIZE=30><BR>
Umur anda : <INPUT TYPE=TEXT NAME="umur" SIZE=3><BR>
Tanggal lahir : <INPUT TYPE=TEXT NAME="lahir" SIZE=10><BR>
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>

Kita dapat membuat acuan ke form diatas dengan objek

document.contoh,
dimana contoh adalah nama form diatas. Untuk mendapatkan nilai pada
field pertama kita menggunakan acuan:

objek document.contoh.nama

dan

document.contoh.umur

untuk field yang kedua. Untuk mendapatkan text yang mana dimasukkan
kedalam field nama, dapat digunakan
document.contoh.nama.value

Berikutnya akan kita pelajari bagaimana melakukan validasi terhadap data

yang dimasukkan pada masing-masing field.

Validasi form
Untuk menambahkan validasi pada form anda, ada dua hal perlu dilakukan.
Yang pertama adalah menulis suatu rutin JavaScript yang akan melakukan
validasi (yang pada contoh ini, kita akan menamainya sebagai
fungsi validasiForm()) dan kedua adalah melakukan modifikasi pada tag
<FORM> menjadi
<FORM NAME="contoh" METHOD=POST ACTION="..." onSubmit="return
validasiForm()">

Baris diatas memberitahukan browser untuk

memanggil validateForm() ketika pemakai melakukan klik pada tombol
submit di form tersebut. Kode berikut ini untuk validasiForm()

Dan berikut ini adalah form yang telah ditambahi validasi.

Masukkan nama anda :

Umur anda :

Tanggal lahir:
Submit Query Reset

Jika salah satu field dikosongkan, suatu kotak peringatan akan muncul dan
form tidak di submit. Form di submit jika rutin validasi mengembalikan
suatu nilai true; jika dikembalikan nilai false, operasi submit dibatalkan.

Mengatur focus
Catatan: Contoh berikut ini tidak akan bekerja pada Microsoft Internet Explorer 3.x. Anda akan menemukan bahwa focus
bukanlah properti yang dapat diset. Jika ada yang tahu apa penyebab masalah tersebut, tolong beritahukan pada saya.
Pada contoh sebelumnya, pesan yang diberikan tidak menjelaskan field
mana yang menyebabkan masalah. Biasanya form lebih besar dan suatu
pesan tidak cukup. Pada form berikut, tidak hanya pesan yang lebih
informatif, tetapi juga kursor diletakkan pada tempat dimana pemakai dapat
langsung mengetik. Sebagai contoh untuk memposisikan kursor pada field
pertama (nama anda). Kita menggunakan fungsi
JavaScript document.contoh.nama.focus(). Berikut ini fungsi hasil
modifikasi.

Berikut ini form baru kita.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Jika anda anggota GeoCities

Anda mungkin memiliki catatan bahwa <FORM> tag mengandung suatu

field ACTION yang mana diset ke "/cgi-bin/homestead/mail.pl?
member_name". Ini adalah suatu CGI Script yang disediakan
oleh GeoCities untuk digunakan anggotanya. Jika anda merupakan anggota
GeoCities, anda dapat menggunakan script ini untuk mendapatkan informasi
yang dimasukkan pengunjung ke form. Hanya ganti member_name ke nama
anggota GeoCities anda yang sebenarnya. Ketika seseorang masuk ke
halaman anda dan mengisi pada form serta submit, anda akan mendapatkan
suatu mail dengan informasi yang dimasukkan. Juga jangan
lupa METHOD=POST pada bagian <FORM> tag.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Membuat suatu form

Berikut ini suatu contoh form dengan tiga field, sebuat tombol submit dan
sebuah tombol reset.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Form diatas dibuat dengan menggunakan kode HTML berikut ini:

<FORM NAME="contoh" METHOD=POST

Kita dapat membuat acuan ke form diatas dengan objek

document.contoh,
dimana contoh adalah nama form diatas. Untuk mendapatkan nilai pada
field pertama kita menggunakan acuan:

objek document.contoh.nama

dan

document.contoh.umur

untuk field yang kedua. Untuk mendapatkan text yang mana dimasukkan
kedalam field nama, dapat digunakan
document.contoh.nama.value

Berikutnya akan kita pelajari bagaimana melakukan validasi terhadap data

yang dimasukkan pada masing-masing field.

Validasi form

Untuk menambahkan validasi pada form anda, ada dua hal perlu dilakukan.
Yang pertama adalah menulis suatu rutin JavaScript yang akan melakukan
validasi (yang pada contoh ini, kita akan menamainya sebagai
fungsi validasiForm()) dan kedua adalah melakukan modifikasi pada tag
<FORM> menjadi
<FORM NAME="contoh" METHOD=POST ACTION="..." onSubmit="return
validasiForm()">

Baris diatas memberitahukan browser untuk

memanggil validateForm() ketika pemakai melakukan klik pada tombol
submit di form tersebut. Kode berikut ini untuk validasiForm()

Dan berikut ini adalah form yang telah ditambahi validasi.

Masukkan nama anda :

Umur anda :

Tanggal lahir:
Submit Query Reset
Jika salah satu field dikosongkan, suatu kotak peringatan akan muncul dan
form tidak di submit. Form di submit jika rutin validasi mengembalikan
suatu nilai true; jika dikembalikan nilai false, operasi submit dibatalkan.

Pada contoh sebelumnya, pesan yang diberikan tidak menjelaskan field

Berikut ini form baru kita.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Jika anda anggota GeoCities

Anda mungkin memiliki catatan bahwa <FORM> tag mengandung suatu

field ACTION yang mana diset ke "/cgi-bin/homestead/mail.pl?
member_name". Ini adalah suatu CGI Script yang disediakan
oleh GeoCities untuk digunakan anggotanya. Jika anda merupakan anggota
GeoCities, anda dapat menggunakan script ini untuk mendapatkan informasi
yang dimasukkan pengunjung ke form. Hanya ganti member_name ke nama
anggota GeoCities anda yang sebenarnya. Ketika seseorang masuk ke
halaman anda dan mengisi pada form serta submit, anda akan mendapatkan
suatu mail dengan informasi yang dimasukkan. Juga jangan
lupaMETHOD=POST pada bagian <FORM> tag.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Validasi form

Baris diatas memberitahukan browser untuk

memanggil validateForm() ketika pemakai melakukan klik pada tombol
submit di form tersebut. Kode berikut ini untuk validasiForm()

Dan berikut ini adalah form yang telah ditambahi validasi.

Masukkan nama anda :

Umur anda :

Tanggal lahir:
Submit Query Reset

Pada contoh sebelumnya, pesan yang diberikan tidak menjelaskan field

Berikut ini form baru kita.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Jika anda anggota GeoCities

Anda mungkin memiliki catatan bahwa <FORM> tag mengandung suatu

field ACTION yang mana diset ke "/cgi-bin/homestead/mail.pl?
member_name". Ini adalah suatu CGI Script yang disediakan
oleh GeoCities untuk digunakan anggotanya. Jika anda merupakan anggota
GeoCities, anda dapat menggunakan script ini untuk mendapatkan informasi
yang dimasukkan pengunjung ke form. Hanya ganti member_name ke nama
anggota GeoCities anda yang sebenarnya. Ketika seseorang masuk ke
halaman anda dan mengisi pada form serta submit, anda akan mendapatkan
suatu mail dengan informasi yang dimasukkan. Juga jangan
lupaMETHOD=POST pada bagian <FORM> tag.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Pada contoh sebelumnya, pesan yang diberikan tidak menjelaskan field

mana yang menyebabkan masalah. Biasanya form lebih besar dan suatu
pesan tidak cukup. Pada form berikut, tidak hanya pesan yang lebih
informatif, tetapi juga kursor diletakkan pada tempat dimana pemakai dapat
langsung mengetik. Sebagai contoh untuk memposisikan kursor pada field
pertama (nama anda). Kita menggunakan fungsi
JavaScript document.contoh.nama.focus(). Berikut ini fungsi hasil
modifikasi.
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Berikut ini form baru kita.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Jika anda anggota GeoCities

Anda mungkin memiliki catatan bahwa <FORM> tag mengandung suatu

field ACTION yang mana diset ke "/cgi-bin/homestead/mail.pl?
member_name". Ini adalah suatu CGI Script yang disediakan
oleh GeoCities untuk digunakan anggotanya. Jika anda merupakan anggota
GeoCities, anda dapat menggunakan script ini untuk mendapatkan informasi
yang dimasukkan pengunjung ke form. Hanya ganti member_name ke nama
anggota GeoCities anda yang sebenarnya. Ketika seseorang masuk ke
halaman anda dan mengisi pada form serta submit, anda akan mendapatkan
suatu mail dengan informasi yang dimasukkan. Juga jangan
lupaMETHOD=POST pada bagian <FORM> tag.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Bekerja dengan Form

• Membuat suatu form

• Validasi form dengan penanganan event onSubmit()
• Mengatur focus
• Jika anda anggota GeoCities . . .

Membuat suatu form

Berikut ini suatu contoh form dengan tiga field, sebuat tombol submit dan
sebuah tombol reset.

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Form diatas dibuat dengan menggunakan kode HTML berikut ini:

<FORM NAME="contoh" METHOD=POST

Kita dapat membuat acuan ke form diatas dengan objek

document.contoh,
dimana contoh adalah nama form diatas. Untuk mendapatkan nilai pada
field pertama kita menggunakan acuan:

objek document.contoh.nama
dan

document.contoh.umur

untuk field yang kedua. Untuk mendapatkan text yang mana dimasukkan
kedalam field nama, dapat digunakan
document.contoh.nama.value

Berikutnya akan kita pelajari bagaimana melakukan validasi terhadap data

yang dimasukkan pada masing-masing field.

Validasi form

Baris diatas memberitahukan browser untuk

memanggil validateForm() ketika pemakai melakukan klik pada tombol
submit di form tersebut. Kode berikut ini untuk validasiForm()

Dan berikut ini adalah form yang telah ditambahi validasi.

Masukkan nama anda :

Umur anda :

Tanggal lahir:
Submit Query Reset

Pada contoh sebelumnya, pesan yang diberikan tidak menjelaskan field

Masukkan nama anda :

Umur anda :

Tanggal lahir :
Submit Query Reset

Jika anda anggota GeoCities

Anda mungkin memiliki catatan bahwa <FORM> tag mengandung suatu

field ACTION yang mana diset ke "/cgi-bin/homestead/mail.pl?
member_name". Ini adalah suatu CGI Script yang disediakan
oleh GeoCities untuk digunakan anggotanya. Jika anda merupakan anggota
GeoCities, anda dapat menggunakan script ini untuk mendapatkan informasi
yang dimasukkan pengunjung ke form. Hanya ganti member_name ke nama
anggota GeoCities anda yang sebenarnya. Ketika seseorang masuk ke
halaman anda dan mengisi pada form serta submit, anda akan mendapatkan
suatu mail dengan informasi yang dimasukkan. Juga jangan
lupaMETHOD=POST pada bagian <FORM> tag.
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Menemukan apakah browser klien mendukung

JavaScript
Browser anda mendukung JavaScript.
Coba non-aktifkan JavaScript support dan load kembali halaman ini.
Browser anda mendukung JavaScript.
Coba non-aktifkan JavaScript support dan load kembali halaman ini.

Pada umumnya browser dewasa ini telah mendukung JavaScript, tetapi juga
ada beberapa browser kecil tidak mendukung JavaScript atau pengunjung
sengaja me-non-aktifkan fasiltas JavaScript pada browsernya.

Ketika menulis suatu halaman HTML yang mengandung JavaScript, adalah

suatu ide yang baik untuk mempertimbangkan kemungkinan pemakai
menggunakan browser yang tidak mendukung JS. Beberapa teknik yang
umum digunakan berkaitan dengan browser yang tidak mendukung JS akan
dijelaskan berikut ini.

Mengunakan tag komentar comment diantara tag <SCRIPT>

Jika anda ingin halaman Web anda dapat bekerja walaupun browser
pemakai tidak mendukung JS, maka yang harus anda lakukan adalah
meletakkan kode JS diantara tag komentar pada HTML. Browser non JS
akan mengenali dan mengabaikannya kode script anda, sedangkan browser
yang mendukung JS akan mengenali dan menjalankan script tersebut.

Mengunakan <NOSCRIPT> tag

Jika anda ingin melakukan sesuatu untuk browser yang mendukung JS dan
sesuatu yang berbeda untuk browser non JavaScript. Untuk hal ini, metode
yang telah dijelaskan diatas adalah tidak memadai. Untuk memberikan
perlakuan untuk browser non-JS anda dapat menggunakan dengan
mengunakan tag <NOSCRIPT>. Semua browser yang mendukung JavaScript
mengenali<NOSCRIPT> tag. Mereka akan mengabaikan saja apa yang berada
diantara <NOSCRIPT> dan </NOSCRIPT>. Browser yang tidak mendukung
JavaScript tidak mengenali tentang <NOSCRIPT> tag. Mereka akan
mengabaikan tag tersebut tetapi akan menampilkan apa yang berada
diantaranya.

Perhatikan penulisan komentar yang benar tetap diperlukan

diantara <SCRIPT> tag karena browser non JavaScript tidak
mengenali <SCRIPT> tag dan akan menampilkan kode diantara komentar
tersebut Pada bagian tag <HEAD> </HEAD> sisipkan kode JavaScript untuk
mengalihkan tampilan browser ke halaman yang mengandung JavaScript.
<script language="JavaScript">

</script>

Jangan lupa untuk menulis script tersebut diantara tag komentar HTML,
ketika halaman ini di muat oleh browser yang mendukung JS, maka script
tersebut akan dijalankan dan halaman yang mengandung JavaScript
ditampilkan
<noscript>
halaman ini hanya dapat ditampilkan pada browser yang mendukung
JavaScript
</noscript>
Dibuat oleh [email protected]
Medan - Sumatera Utara
Indonesia

Manipulasi Gambar
Sesuatu yang lebih menarik yang dapat anda lakukan dengan JavaScript
adalah melakukan manipulasi gambar. Untuk melakukan hal ini anda
membutuhkan browser Netscape 3.0+ atau IE4.0+.
Contoh berikut akan mendemontrasikan bagaimana anda dapat mengubah
suatu image secara dinamis setelah halaman ini selesai di muat. Saya
menggunakan dua gambar berikut untuk melakukan animasi secara pseudo
(menggunakan kode program).

fanoff.gif fan.gif

Ketika anda klik pada tombol "On" , 'fan.gif' akan ditampilkan. Ketika anda
klik "Off", 'fanoff.gif' akan ditampilkan. Perlu dicatat bahwa saya hanya
mengganti gambar-gambar tersebut. Animasi tersebut terjadi karena 'fan.gif'
adalah suatu GIF animasi.

Perhatikan pada kode JavaScript yang diperlukan agar ini bekerja:

Pada <IMG> tag, bagian NAME="coolfan" ditambahkan supaya anda

dapat mengacu pada image ini sebagai coolfan dari JavaScript. Pada
handler onClick dari tombol, kita dapat mengubah properti src dari image ke
yang anda inginkan Ini akan membuat browser mengambil image baru dan
ditampilkan menggantikan yang lama.

Image Rollovers
Anda mungkin pernah melihat sejumlah halaman web yang mana suatu
gambar berubah ketika anda mengerakan mouse melewatinya. Hal ini dapat
juga dilakukan dengan teknik diatas. Coba gerakan mouse melewati gambar
dibawah. Klik padanya akan membawa anda ke halaman index.html.

Sekarang, perhatikan kode yang diperlukan untuk membuat link seperti

yang di atas.

Baca juga:
Magical MouseOver Maker dari About.com

Dibuat oleh [email protected]

Medan - Sumatera Utara
Indonesia

Proteksi Password
Kadang-kadang kita ingin memproteksi halaman untuk kalangan sendiri.
Usaha yang dapat kita lakukan untuk melakukan proteksi tersebut adalaj
dengan menanyakan username dan password. Ketika pengunjung
melakukan klik pada tombol submit, kode JavaScript pada halaman akan
memeriksa apakah username dan jika password benar, maka halaman yang
sebenarnya akan ditampilkan. Kodenya adalah sebagai berikut.

Username:

Password:

Reset

Yang ini form yang sebenarnya

Username:
Password:
Reset

Dengan sedikit forward dan berhasil. Masalahnya adalah orang dapat

melakukan suatu View|Source dan menemukan username serta password
untuk halaman yang di proteksi password, tentu saja contoh ini kurang
sempurna contoh ini kurang baik.

Yang kita butuhkan adalah suatu metode di mana pada HTML source-nya
tidak akan kelihatan username dan password serta halaman target. Suatu
metode yang umum digunakan adalah membuat nama halaman target
berdasarkan username dan password yang dimasukkan oleh pemakai dan
mengarahkan browser ke halaman tersebut. Perhatikan hasil modifikasi
fungsiverifyLogin(.

Sekarang fungsi akan melakukan pengabungan terhadap username, pasword

dan ".html" serta mengarahkan browser ke lokasi tersebut. Jadi jika
pengunjung memasukkan secret sebagai username dan page sebagai
password, dia akan mendapatkan secretpage.html. Atau dengan kata lain
mereka tidak akan mengetahui username dan paswword yang benar dan
memasukan foosebagai username dan bar sebagai password, mereka akan
diarahkan ke html yang tidak ada foobar.html dan mendapatkan kesalahan
yang menyatakan halaman tersebut tidak ada.

Baca Juga:
Password Protection Scripts dari Javascript Source
Password Protection Scripts dari WebAbstraction

Dibuat oleh [email protected]

Medan - Sumatera Utara
Indonesia

JavaScript dan Cookies

Cookies merupakan topik yang cukup kontroversial sampai sekarang.
Netscape memasukkannya dalam produk mereka. Cookieadalah suatu
informasi kecil yang mana dimasukkan oleh halaman web kedalam mesin
anda dan dapat mengambil kembali informasi tersebut jika anda
mengunjungi halaman tersebut untuk kedua kalinya. Untuk melindungi
privasi anda, cookie yang dimasukkan oleh suatu situs tidak dapat diakses
oleh situs lain. Dengan menggunakan cookies anda dapat melacak telah
berapa kali pengunjung dengan browser yang sama menggunjungi situs
anda.

Untuk mempelajari bagaimana menggunakan cookies, anda dapat

mengunjungi Netscape's Javascript Guide .

Untuk menggunakan fungsi ini pada halaman anda, tambahkan kode diatas
diantara tag <HEAD> dan </HEAD> pada dokumen HTML anda. Tetapi sebelum
anda mulai mengunakan fungsi ini, adalah ide yang baik untuk mengerti
bagaimana hal tersebut bekerja.

Suatu cookie pada dasarnya terdiri dari tiga bagian informasi yaitu : nama
variable, nilai dan tanggal kadaluarsa cookies tersebut. Sebagai contoh,
ketika seorang pengunjung mengunjungi homepage anda, anda dapat
menanyakan namanya serta menyimpannya pada suatu cookie yang
bernama 'visitor; dan menentukan tanggal kadaluarsanya untuk sejumlah
bulan setelah tanggal sekarang.Anda dapat mengakses cookie dengan
mengunakan metode objek document.cookie.

document.cookie = "visitor=yoda; expires=Sun, 01-Jan-01 00:00:00 GMT";

Baris diatas akan membuat suatu cookie dengan nama visitor dan mengisi
nilainya dengan 'yoda' serta cookie ini akan aktif sampai tahun 2001. Bagian
expires sebenarnya bersifat optional dan jika dibiarkan kosong, cookie akan
kadaluarsa sesaat setelah jendela browser ditutup.

Fungsi setCookie() pada contoh JavaScript diatas akan melakukan hal yang
sama, kecuali bahwa dia membuat string dari agumen yang dikirim dan
memberikannya ke document.cookie. Baris kode adalah contoh pemakaian
fungsi setCookie tersebut:
expireDate = new Date("January 01, 2000 00:00:00");
setCookie("visitor", "yoda", expireDate);

Tentu saja anda tidak ingin memberi nama kepada setiap pengunjung situs
anda sebagai 'yoda' (kecuali anda adalah seorang pengemar berat film Star
Wars ). Mari kita buat suatu form yang bernama visitor untuk menanyakan
nama pengunjung dan menyimpannya sebagai cookie.
<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

<FORM NAME="myForm">
Please enter your name:
<INPUT TYPE=TEXT NAME="visitor">
<INPUT TYPE=BUTTON VALUE="Save" onClick="saveVisitor()">
</FORM>

Please enter your name:

Setelah sesaat anda menyimpan cookie, nilai dari document.cookie harus

diubah sesuai dengannya. Untuk melihat nilai dari pengunjung, klik disini.
Link tersebut memiliki kode
<A HREF="Javascript:alert(getCookie('visitor'))">

Contoh yang diberikan diatas agak panjang dan bagian yang paling sulit
baru saja akan dimulai. Membaca kembali cookie adalah tidak sederhana
seperti ketika membuat, karena jika anda menanyakan nilai
dari document.cookie, anda akan mendapatkan suatu string yang telah
diformat yang berisi semua cookie. Untuk melihat apa yang saya maksud,
perhatikan apa yang dihasilkan kode berikut:
alert(document.cookie);

Anda akan melihat cookie yang telah anda set sebelumnya, tetapi anda juga
akan melihat cookie lain yang mana secara otomatis diset oleh halaman ini
(Cookies ini digunakan oleh banner pada halaman ini untuk meyakinkan
banner yang telah ditampilkan tidak akan ditampilkan terus-terusan).
Melakukan pemisahan nilai untuk cookie tertentu dapat cukup melelahkan,
tetapi untunglah kita telah memiliki fungsi getCookie() yang mana telah
disediakan untuk kita. Kita telah melihat diatas bahwa
memanggilgetCookie("visitor") mengembalikan nilai dari
cookie visitor.

Baca Juga:
Cookie Scripts dari The Javascript Source
Cookies and Forms dari Irt.org
Cookie tips dari Webreference

Dibuat oleh [email protected]

Medan - Sumatera Utara
Indonesia
Belajar html

Borang
Penggunaan borang adalah satu cara yang amat sesuai untuk mengambil data-data
daripada pengunjung. Kebiasaannya, syarikat-syarikat yang menjalankan perniagaan melalui
Internet akan mengambil butir-butir peribadi pengunjung dan menyimpannya di dalam
pangkalan data syarikat tersebut. Ataupun, ada juga syarikat yang menjalankan perniagaan
bercorak interaktif di Internet, sebagai contoh Hotmail, Yahoo mail, Rocketmail dan
sebagainya.

Untuk memanupulasikan data-data yang diambil dari pengunjung web mereka, Pelayan Web
khas diperlukan. Pelayan Web ini telah di tetapkan untuk menjalankan tugas-tugas untuk
infomasi yang diterima dari pengunjung. Sebagai pengguna Geocities, anda tidak
dibenarkan untuk membuat interaktif seperti ini. Ini untuk mengelakkan dari adanya ahli-
ahli Geocities yang melakukan perniagaan berdasarkan Internet.
Walaubagaimanapun, Geocities telah bermurah hati untuk membekalkan ahlinya dengan
khidmat form posting. Dengan menggunakan khidmat ini, anda boleh mencipta borang pada
laman web anda untuk mengambil infomasi dari pengunjung, ataupun menjalankan kajiselidik
dan apabila pengunjung menekan butang Submit, maka segala infomasi yang anda
mahukan dari pengunjung akan diposkan kepada anda melalui e-mail.

Penggunaan borang dilakukan dengan penggunaan tag <form>..</form>. Segala yang

terkandung di dalam tag <form> dan </form> akan ditafsirkan sebagai borang.

Untuk membuatkan segala informasi borang tersebut diposkan kepada anda maka anda
perlu letakkan kod di bawah.Member name ialah nama ahli anda(login) di geocities.

-----------------------------------
<form method=post action="/cgi-bin/homestead/mail.pl?member_name">
...
...
...
...
</form>
-----------------------------------

Input Box
Ini adalah untuk permulaan yang paling ringkas. Input Box, disini anda boleh mengambil
butir-butir am daripada pengunjung, sebagai contoh, nama pengunjung tersebut.

Sila masukkan nama anda

Kod yang digunakan untuk memaparkan Input Box di atas ialah.

<form>
Sila masukkan nama anda
<input type="text" name="first_name" VALUE="Ahmad Hafiz" size="10" maxlength="15">
</form>

Tag yang digunakan ialah tag <input>. Tag ini tidak mempunyai penutupnya. Sifat-sifat yang
digunakan ialah sifat

• type
Disini kita menggunakan nilai "text", terdapat beberapa nilai lagi yang boleh diberikan
kepada sifat type ini dan akan diterangkan kemudian.
• name
Nama perlu diberikan kepada elemen ini supaya pelayan web boleh mengenalpasti
elemen-elemen yang hendak diproses.
• value
Nilai yang diberikan kepada sifat ini akan dipaparkan.
• size
Lebar Input Box ini, nilai yang diberikan ialah jumlah huruf yang akan dipaparkan
pada satu masa.

• maxlength
Maksimum huruf yang dibenarkan untuk input.

TextArea
Jika melalui contoh di atas pengunjung hanya boleh masukkan satu barisan teks sahaja,
maka melalui contoh di bawah, pengunjung boleh memasukkan informasi lebih dari satu
baris.

Masukkan komen anda di sini:

-----------------------------------
<form method="post" action="/cgi-bin/homestead/mail.pl?member_name">
Masukkan komen anda di sini:<br>
<textarea name="feedback" rows="3" cols="40">
Hai, sila taip komen anda di sini.
</textarea>
</form>
-----------------------------------

Tag yang digunakan ialah tag <textarea>...</textarea>, manakala sifat-sifat yang digunakan
ialah sifat.

• name
Seperti biasa, setiap elemen perlu dinamakan
• rows
Baris yang akan dipaparkan

• cols
Lajur yang akan dipaparkan

Check Box
Check box berguna supaya pengunjung boleh memilih pilihan yang telah anda tetapkan. Tag
yang digunakan ialah tag<input>, tetapi sifat nilai untuk sifat type telah ditukar
kepada checkbox.

Tapak web saya di geocities

Ya, saya perlukan bantuan

Kod yang digunakan....

-----------------------------------
<form method="post" action="/cgi-bin/homestead/mail.pl?member_name">
<input type="checkbox" name="tapakweb" checked>Tapak web saya di geocities<br>
<input type="checkbox" name="bantuan">Ya, saya perlukan bantuan<br>
</form>
-----------------------------------

Sifat-sifat yang digunakan

• type
Di sini, nilai checkbox digunakan untuk sifat type.
• name
Seperti biasa nama untuk elemen ini

• checked
Ini akan membuatkan pilihan untuk ditandakan awal-awal lagi.

Radio Button
Pilihan seperti ini, membuatkan pengunjung hanya boleh memilih antara satu pilihan-pilihan
yang anda telah tetapkan. Tag yang digunakan ialah tag <input>, dan untuk sifat type pula
digunakan nilai radio.

Tentukan Jantina: Lelaki Perempuan

Tentukan Warna: Biru Merah Kuning

Kod yang digunakan

-------------------------------------
<form method="post" action="/cgi-bin/homestead/mail.pl?member_name">
<dl>
<dd>Tentukan Jantina:
<input type="radio" name="jantina" value="Lelaki" checked>Lelaki
<input type="radio" name="jantina" value="Perempuan">Perempuan
<dd>Tentukan Warna:
<input type="radio" name="warna" value="Biru" checked>Biru
<input type="radio" name="warna" value="Merah">Merah
<input type="radio" name="warna" value="Kuning">Kuning
</dl>
</form>
-------------------------------------

 Untuk template klasik

1. Sign in di blogger.

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kode template yang ada, lalu save untuk backup data
5. Cari kode yang mirip dengan kode di bawah ini, biasanya di tulis dengan body :

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

6. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :

body{
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
cursor: url("http://24rohman.googlepages.com/dragon3.ani");
}

7. Klik tombol Simpan Perubahan Template

8. Selesai. Silahkan lihat hasilnya.

 Untuk template baru

1. Sign in di blogger

2. Klik menu Layout

3. Klik menu Edit HTML

4. Klik link Download template seluruhnya, save dulu untuk backup biar aman

5. Cari kode yang mirip dengan kode dibawah, biasanya di tulis dengan body :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: justify;
}
6. Sisipkan kode kursor di dalam kode tadi, sehingga seperti ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: justify;
cursor: url("http://24rohman.googlepages.com/dragon3.ani");
}

7. Klik tombol Simpan Template

8. Selesai. Silahkan lihat hasilnya.

Anda mungkin juga menyukai

Makalah Javascript
Belum ada peringkat
Makalah Javascript
12 halaman
Pemrograman Web Javascript
Belum ada peringkat
Pemrograman Web Javascript
103 halaman
Andry Javascript
Belum ada peringkat
Andry Javascript
40 halaman
JavaScript Modul
Belum ada peringkat
JavaScript Modul
1.089 halaman
Pengenalan Javascript
Belum ada peringkat
Pengenalan Javascript
32 halaman
Java Script
Belum ada peringkat
Java Script
20 halaman
Pertemuan - 6 - JAVASCRIPT (Materi)
Belum ada peringkat
Pertemuan - 6 - JAVASCRIPT (Materi)
41 halaman
JavaScript Dasar
100% (1)
JavaScript Dasar
311 halaman
Kelas 5
Belum ada peringkat
Kelas 5
354 halaman
Materi Javascript
Belum ada peringkat
Materi Javascript
61 halaman
Makalah Javascript 1. Pengenalan Javascript
Belum ada peringkat
Makalah Javascript 1. Pengenalan Javascript
12 halaman
Pengenalan Javascript
Belum ada peringkat
Pengenalan Javascript
40 halaman
JavaScript and DOM
Belum ada peringkat
JavaScript and DOM
9 halaman
Javascriptdasar3 231124074649 E7b71cc3
Belum ada peringkat
Javascriptdasar3 231124074649 E7b71cc3
155 halaman
06-Javascript Basic Dan Manipulasi DOM
Belum ada peringkat
06-Javascript Basic Dan Manipulasi DOM
33 halaman
JavaScript Dasar - 1
Belum ada peringkat
JavaScript Dasar - 1
97 halaman
Slide4 Js
Belum ada peringkat
Slide4 Js
73 halaman
Slide4 Js 1
Belum ada peringkat
Slide4 Js 1
42 halaman
Java Script
Belum ada peringkat
Java Script
86 halaman
Bab III - Javascript
Belum ada peringkat
Bab III - Javascript
32 halaman
Materi PemrogWeb - Javasript
Belum ada peringkat
Materi PemrogWeb - Javasript
78 halaman
Javascript
Belum ada peringkat
Javascript
41 halaman
Modul It2 Lengkap
Belum ada peringkat
Modul It2 Lengkap
63 halaman
Dasar Javascript
Belum ada peringkat
Dasar Javascript
39 halaman
W151700011 - Web 1: Pemrograma N
Belum ada peringkat
W151700011 - Web 1: Pemrograma N
11 halaman
Aplikasi IT II (Javascript & HTML)
100% (1)
Aplikasi IT II (Javascript & HTML)
62 halaman
Materi Praktikum Javascript Dasar
Belum ada peringkat
Materi Praktikum Javascript Dasar
22 halaman
Dasar Javascript Bagian 1
Belum ada peringkat
Dasar Javascript Bagian 1
10 halaman
Java Script Unikom PDF
Belum ada peringkat
Java Script Unikom PDF
23 halaman
Java Script
Belum ada peringkat
Java Script
26 halaman
Makalah Javascript 1. Pengenalan Javascript
Belum ada peringkat
Makalah Javascript 1. Pengenalan Javascript
12 halaman
Javascript: Nama: Ba'itsufia Dinda Asgyzta No: 06 Prodi: D4 - Manajemen Bisnis Internasional Kelas: Mbi - 1D
Belum ada peringkat
Javascript: Nama: Ba'itsufia Dinda Asgyzta No: 06 Prodi: D4 - Manajemen Bisnis Internasional Kelas: Mbi - 1D
7 halaman
Dasar Javascript PDF
Belum ada peringkat
Dasar Javascript PDF
27 halaman
Modul JavaScript
Belum ada peringkat
Modul JavaScript
20 halaman
JavaScript Bagian 1
Belum ada peringkat
JavaScript Bagian 1
16 halaman
Java Script
Belum ada peringkat
Java Script
20 halaman
Javascript
Belum ada peringkat
Javascript
63 halaman
Bab-1 Pengenalan JavaScript
Belum ada peringkat
Bab-1 Pengenalan JavaScript
15 halaman
Tutorial Javascript Indonesia
Belum ada peringkat
Tutorial Javascript Indonesia
64 halaman
Catatan Javascript HTML
Belum ada peringkat
Catatan Javascript HTML
14 halaman
Java
Belum ada peringkat
Java
14 halaman
Prompt Seperti Pro
Dari Everand
Prompt Seperti Pro
Iema Rahman
Belum ada peringkat
Pemrograman Berorientasi Objek dengan Visual C#
Dari Everand
Pemrograman Berorientasi Objek dengan Visual C#
Risal
3.5/5 (6)
Pemrograman Python untuk Pemula: Pemrograman
Dari Everand
Pemrograman Python untuk Pemula: Pemrograman
JUD
5/5 (10)
Membuat Aplikasi Bisnis Menggunakan Visual Studio Lightswitch 2013
Dari Everand
Membuat Aplikasi Bisnis Menggunakan Visual Studio Lightswitch 2013
Risal
3.5/5 (7)
Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
Dari Everand
Mari Belajar Pemrograman Berorientasi Objek menggunakan Visual C# 6.0
Risal
4/5 (16)