Modul Javascript
PENGANTAR JAVASCRIPT
· Latar Belakang
· Kelebihan dan Kekurangan Javascript
|
Latar Belakang
Seperti halnya dengan bahasa pemograman lainnya,
yakni Pascal, C++, Basic dan sebagainya, java merupakan bahasa pemograman yang
umurnya relatif masih muda bila dibandingkan dengan lainnya.
Java merupakan bahasa pemograman yang menjadi kelanjutan
dari bahasa C++. Java dikembangkan oleh Sun Microsystem, Inc. pada tahun 1995
dan telah mengalami revolusi (perkembangan) yang sangat pesat sampai sekarang
ini.
Bahasa pemograman ini memiliki beberapa keunggulan dibandingkan dengan
bahasa pemograman lainnya yaitu ukuran filenya kecil, akses data cepat, bersifat
kompiler-interpreter dan dapat dibaca oleh berbagai system operasi seperti
windows ataupun linux.
Java memiliki sifat platform independent (terbuka) yang menjadi
ciri khas bahasa pemograman tersebut. Hal ini menyebabkan bahasa pemograman ini
dapat di baca seluruh komputer tanpa harus mengkonversinya sehingga ketika user
sedang berkomunikasi dengan menggunakan fasilitas komputer, user tidak perlu
mengkhawatirkan perbedaan software maupun hardware dari masing-masing komputer.
Javascript
merupakan bahasa pemograman yang dibuat untuk memudahkan bagi setiap orang
untuk mempelajari bahasa Java. Berbeda dengan java, javascript tidak memiliki
kompiler seperti halnya java. Sifat yang sama dengan bahasa java adalah
javascript bersifat interpreter, yaitu script yang telah dibuat di text editor
seperti notepad atau wordpad akan dibaca perbaris dari baris awal sampai akhir.
Bahasa pemograman javascript dibuat secara khusus untuk membuat suatu halaman
web yang interaktif maupun dinamis. Jika java merupakan bahasa pemograman dan
HTML (Hyper Text Markup Language) merupakan bahasa kode maka javascript hibrid
yang menjadi perpaduan antara bahasa java dengan HTML
Beberapa keunggulan javascript dalam mengolah dan mengkondisikan sebuah
web antara lain, karena ukuran filenya kecil maka ketika seorang merequest
sebuah web dari webserver dimana didalam web tersebut memuat script javascript
maka aplikasi dari javascript tersebut akan cepat tampil di browser tanpa harus
diolah terlebih dahulu di server. Hal ini disebabkan karena javascript memiliki
sifat client side yaitu script yang ketika dipanggil oleh browser akan langsung
tampil tanpa harus dioleh di server disertai script aslinya sehingga user dapat
melihat sourcenya dengan mudah tanpa terenkripsi oleh server.
Sedangkan ada beberapa bahasa pemograman web yang
ketika dipanggil browser maka script program tersebut akan diolah dan bekerja
di server, sedangkan ketika web tersebut akan ditampilkan di browser maka
scriptnya tidak akan disertai di browser karena scriptnya hanya akan bekerja di
server dan tidak bekerja di client. Bahasa pemograman ini sifatnya server side.
Contohnya antara lain adalah PHP, ASP, JSP dan masih banyak lainnya. Beberapa
jenis software yang menjadi webserver di antaranya adalah apache yang sekarang
ini sangat digandrungi oleh banyak sebagian besar masterweb untuk dijadikan
webservernya.
Untuk permasalahan server side ini, kita akan membahasnya pada bab
selanjutnya yaitu mengenai MySQL dan PHP. Pada bab ini kita hanya membahas
peran javascript sebagai aplikasi tambahan di browser yang bersifat client
side.
Beberapa keuntungan dan keunggulan javascript sebagai bahasa pemograman
di web sedikit telah kita uraikan di paragraph sebelumnya. Javascript juga
mampu membuat aplikasi yang sangat menarik yang dapat kita letakkan di web
kita. Seperti program kalkulator sederhana yang dipakai di web
www.bhinneka.com, pembuatan link-link dinamis yang hanya mendekatkan kursor ke
link tersebut maka akan keluar-menu-menu lainnya. Jenis ini bisa dilihat di
webnya www.microsoft.com. Ada juga yang
mampu membuat animasi gambar dan text
yang cukup banyak digunakan di web-web yang terkenal seperti www.detik.com. Bahkan ada juga yang bisa
membuat game dari javascript dan juga membuat homepage online. Jika kita
sering browsing di internet maka kita
akan mudah menemukan aplikasi-aplikasi javascript yang terdapat di web-web yang
interaktif dan dinamis.
Dalam pembuatan javascript, text editor yang memungkinkan untuk digunakan adalah notepad,
wordpad dan sebagainya. Ada beberapa Browser yang mendukung untuk menjalankan
javascript dan juga yang tidak mendukung javascript, untuk browser yang
mendukung javascript ada beberapa jenis seperti internet explorer dan netscape.
Pada
awalnya perkembangan javascript dengan pesat disebabkan semakin menjamurnya
web-web yang ada di internet. Perkembangan World Wide Web yang sangat pesat
menyebabkan munculnya banyak homepage dengan halaman-halaman yang sangat
menarik. Halaman Web yang dulunya hanya berupa teks sekarang menjadi cerdas dan
interaktif.
Oleh karena itu muncullah CGI
(Common Gateway Interface).Dengan CGI, halaman web bisa menampilkan pencacah
pengunjung , animasi sederhana dan masih banyak lagi sayangnya CGI meletakkan beban
pemrosesan di server , bukan di client . akibatnya dengan semakin banyaknya
pengguna yang mengakses server lalu lintas jaringan semakin padat. Di samping
CGI ada bahasa pemrograman lain yang juga digunakan untuk menigkatkan
interaktivitas halaman web yaitu java , yang pemrosesannya dilakukan di client
namun sayangnya java sangat sulit dipelajari terutama oleh pemula. Karena itu
dibuatlah suatu bahasa pemograman web yang khusus dibuat untuk memberikan
tampilan yang interaktif dan dinamis di sebuah web sehingga memberi kesan bagi
pengunjung agar pengunjung tersebut sering membuka web tersebut yang
mengakibatkan informasi yang kita letakkan di dalam web tersebut dapat dibaca
oleh banyak pemakai jasa internet di dunia.
Kelebihan dan Kekurangan Javascript
Kelebihan Javascript
1.
Ukuran file kecil
Script dari javascript memiliki
ukuran yang kecil sehingga ketika web yang memiliki javascript ditampilkan di
browser maka akses tampilannya akan lebih cepat dibandingkan ketika browser
membuka suatu web yang memiliki script java. Hal ini juga sangat berkepentingan
dengan daya kerja server. Semakin kecil space suatu web yang disimpan dalam
suatu server maka daya kerja server ketika di browsing oleh user di internet
akan tidak terlalu berat, selain itu sifat javascript client side yang tidak
perlu lagi di olah oleh server ketika browser memanggil web dari sebuah server.
2.
Mudah untuk dipelajari
Javascript merupakan bahasa
semi pemograman yang merupakan gabungan antara bahasa pemograman java dengan
bahasa kode HTML sehingga disebut bahasa hybrid. Walaupun javascript merupakan
turunan dari java namun javascript tidak memiliki aturan yang serumit java.
3.
Terbuka
Javascript tidak terikat oleh
hardware maupun software tertentu bahkan system operasi seperti windows maupun
unix. Karena ia bersifat terbuka, maka ia dapat dibuat maupun di baca di semua
jenis komputer.
Kekurangan Javascript
1.
Script tidak terenkripsi
Karena javascript bersifat
client side, maka script yang kita buat di text editor dan telah dijadikan web
di server, ketika user me-request web dari server tersebut maka sintak
javascript akan langsung ditampilkan di browser. User bisa melihat dan
menirunya dari sourcenya.
2.
Kemampuan terbatas
Walaupun javascript mampu
membuat bentuk web menjadi interaktif dan dinamis, namun javascript tidak mampu
membuat program aplikasi sendiri seperti java.
3.
Keterbatasan Objek
Javascript tidak mampu membuat
kelas-kelas yang bisa menampung objek-objek tambahan seperti java karena javascript teleh memiliki
objek yang built-in pada sturktur bahasanya.
STRUKTUR JAVASCRIPT
·
Struktur
dan Sintak Dasar Javascript
·
Posisi
Script Javascript di HTML
|
Struktur dan Sintak Dasar Javascript
Ditinjau dari segi pembuatan dan penulisannya, javascript tidak jauh beda
dengan HTML seperti pada pertemuan awal kita, sehingga file yang menggunakan
sintak javascript di dalam script HTML dapat menggunakan ekstension HTML juga.
Script dasar dalam javascript diawali dengan sintak <script>
dan diakhiri dengan sintak </script>.
Agar text editor dapat
mengidentifikasikan bahwa sintak tersebut merupakan sintak javascript yang
digunakan untuk aplikasi di web, maka perlu penambahan sintak di dalam sintak
script yaitu :
<script
language=”javascript”>
Sedangkan ruang yang ada di antara sintak javascript
tersebut kita dapat mencantukkan ekspresi, fungsi, pernyataan dan lain
sebagainya sesuai keinginan kita.
Di dalam penulisan javascript untuk
menampilkan suatu pernyataan atau kalimat kita dapat menggunakan sintak :
Document.write(“kalimat
yang akan di tampilkan”);
Dan pada setiap akhir pernyataan
umumnya disertai dengan tanda titik koma (;) kecuali pada kondisi tertentu saja
yang akan kita bahas pada bab-bab berikutnya.
Terkadang ada beberapa browser yang
lama tidak dapat mengidentifikasikan script javascript secara baik sehingga
tampilan di browser tersebut akan menjadi kurang indah untuk dilihat. Oleh
karena itu kita harus mengantisipasinya dengan menggunakan tanda “<!-“
setelah penulisan <script language=”javascript”> dan tanda
“//->” sebelum penulisan </script>.
Di dalam script javascript juga
dikenal tanda komentar yang apabila kita bubuhkan tanda tersebut maka kalimat
yang ada di samping ataupun di antara tanda tersebut perfungsi sebagai komentar
saja dan tidak tertampilkan di browser. Tanda ini sangat membantu bagi pemula
atau yang baru mempelajari javascript agar lebih memahami fungsi maupun peran
sintak yang di terangkan oleh tanda keterangan tersebut. Tanda tersebut ada
beberapa jenis antara lain:
- “//”, Tanda tersebut apabila kita letakkan di text editor yang menjadi wahana pembuatan script javascript maka kalimat apapun yang ada di sampingnya akan menjadi keterangan dan tidak dapat tertampilkan di browser. Tanda tersebut biasanya digunakan untuk keterangan yang hanya satu baris saja.
- “/* */ “, tanda tersebut merupakan tanda komentar yang apabila ada kalimat di antaranya maka kaliamat tersebut akan menjadi keterangan biasa dan tidak tertampilkan oleh browser. Tanda ini biasanya digunakan pada keterangan yang sbanyaknya beberapa baris.
Dari segi peletakan posisi sintak javascript, kita dapat membaginya
menjadi 2 kondisi, sebagai berikut :
- Sintak javascript ditulis dengan file yang berbeda.
- Sintak javascript terintegrasi dengan sintak HTML.
Di bawah ini kita akan menguraikan secara rinci perbedaan antara kedua
kondisi
di atas yaitu :
- Sintak javascript ditulis dengan file yang berbeda
Tata cara penulisan seperti ini yaitu memisahkan sintak javascript dengan
sintak HTML dapat memudahkan bagi pembuat web apabila kita ingin membuat web
yang berisi berbagai aplikasi javascript di setiap halaman yang kita buat.
Penulisan secara manual sintak javascript di setiap lembar web akan cukup
merepotkan bagi kita terlebih lagi hal tersebut dapat memperberat kerja server
karena besarnya file yang harus di kerjakan di server akibat banyaknya script
javascript yang berulang-ulang di setiap file web tersebut. Hal ini dapat di
atasi dengan membuat suatu file khusus bagi script javascript yang sama dari
beberapa file yang menggunakan script tersebut sehingga file utama akan mencari
file tersebut dengan sintak tertentu.
Script javascript yang kita buat tersebut kemudina kita simpan dalam
suatu file dengan ekstension “.js”. Dalam file tersebut kita tidak perlu
mencatumkan sintak pembuka <script> dan sintak penutup </script>.File
utama terserbut akan mencari file yang berekstention “.js” tersebut dengan
sintak :
<script src=”nama_file.js”> </script>
Dengan menggunakan sintak terserbut, kita dapat
memanggil kapanpun dan diposisi manapun kita ingin menampilkan aplikasi
javascript. Metode ini sangat memudahkan dan cukup praktis bagi pembuat web.
Contoh file Script.js
Contoh_2.2.html
Bila kita buka browser dengan nama file
contoh_2.2.html, maka yang tampak di browser adalah :
- Sintak javascript terintegrasi dengan sintak HTML
Metode ini sudah cukup banyak digunakan oleh para pembuat web di dunia
dan cakupan script yang digunakan tidaklah terlalu banyak sehingga tidak
terlalu memberi efek berarti bagi daya kerja server untuk mengirim web yang
beraplikasi javascript ke browser. Sintak-sintak javascript yang menggunakan
metode ini biasanya tidak terlalu sering dibuat oleh sipembuat web karena bila
ada script javascript yang ingin digunakan secara berulang-ulang maka akan
lebih efisien kalau dibuat dengan cara seperti cara nomor di atas. Bila kita
letakkan sintak javascript bersamaan dengan sintak HTML biasa dan kita buat
secara berulang-ulang di setiap lembar web yang kita buat maka hal tersebut
akan menjadikan ukuran web kita akan menjadi lebih besar dibandingkan bila kita
menggunakan cara pertama seperti di atas.
Contoh :
Posisi Script Javascript di File HTML
Dari segi
penulisan javascript, kita dapat menulis sintak (script) javascript di beberapa
posisi pada bagian tertentu di sintak HTML yang telah ada. Di bawah ini kita
akan membahas berbagai posisi yang dapat diletakkan sintak javascript di bagan
file HTML seperti pada bagian HEAD maupun BODY.
1.
Script javascript diletakkan di antara <HEAD> ….
</HEAD>
Posisi ini
sering sekali kita jumpai hampir disetiap web. Posisi ini cukup membantu
kecepatan tampilan web yang menggunakan aplikasi javascript. Karena sifatnya
interpreter, maka ketika browser pertama sekali membaca sebuah web yang
dipanggil olehnya, apabila script javascript tersebut diletakkan di antara
sintak <HEAD>….</HEAD> maka browser akan pertama sekali membaca dan
mengidentifikasi sintak tersebut sebelum browser membaca isi dari <BODY>.
Hal ini sangat membantu dari segi kecepatan tampilan sebuah web di browser.
Contoh_2.4.html
2.
Script javascript diletakkan di antara <BODY> ….
</BODY>
Penempatan
script javascript di antara sintak BODY merupakan salah satu metode posisi
pengetikan script javascript selain seperti yang di atas. Jika kita meletakkan
script javascript di dalam sintak BODY maka ketika browser menerima sebuah web
dari salah satu web server maka sintak javascript dan sintak HTML lainnya akan
bersamaan diproses sehingga kecepatannya akan sedikit berkurang bila
dibandingkan sintak javascript diletakkan di antara HEAD. Hal ini disebabkan
javascript bersifat interpreter. Penempatan posisi ini juga dapat mengatur
posisi aplikasi javascript pada tubuh website yang kita buat dengan mengaturnya
melalui table agar preposisi javascript dapat dengan mudah diletakkan.
Contoh_2.5.html
NILAI,
VARIABLE DAN KONSTANTA
·
Nilai Dalam Javascript
·
Variable
·
Konstanta/Literal
|
Nilai Dalam Javascript
Nilai merupakan besaran yang
digunakan untuk melakukan perhitungan, menulis dan sebagainya. Di dalam
javascript terdapat beberapa macam nilai, yaitu
1. String
String adalah karakter yang bisa berupa huruf , kata symbol atau angka.
String ditulis diantara tanda kutip ganda (“) atau tanda kutip tunggal ( ‘ ).
Jika terdapat string lain gunakan tanda kutip tunggal. misal :
<INPUT NAME = age on focus
=”windows.status= ‘ ketikkan umur anda ‘ “>
name = “firdaus ‘alikomeini’ adnan “
sedang untuk
menulis tanda kutip ganda dalam string digunakan tanda (\ “). Misalnya :
name = “Institut \”Teknologi \” Bandung ”
2. Numerik
Berupa bilangan atau angka yang mempunyai sifat matematis (bisa dijumlah,
tambah dsb), misalnya : 17, 8, 1945
3. Boolean
Nilai yang hanya memiliki dua nilai yaitu true (benar) dan false (salah)
4. Null
Adalah nilai yang tidak memiliki
nilai sama sekali . Null tidak sama denagn karakter kosong atau nilai nol ( 0
).
Variabel
Aturan penamaan variable
Java Script memiliki aturan untuk memberi nama variabel :
1.
Harus diawali dengan karakter (huruf atau garis bawah )
tidak boleh diawali dengan angka atau symbol.
Contoh :
Variable
|
Keterangan
|
Contoh_3.1
|
Benar
|
_contoh3.2
|
Benar
|
2001_angkatan
|
Salah
|
$sql
|
Salah
|
- Tidak boleh menggunakan spasi , untuk memisahkan antar karakter digunakan garis bawah.
Contoh :
Variable
|
Keterangan
|
Firdaus adnan
|
Salah
|
Firdaus_adnan
|
benar
|
- Kapitalisasi (huruf besar dan huruf kecil) dibedakan pada nama variabel.
Contoh :
Firdaus tidak sama dengan firdaus
- Tidak boleh mengunakan reserverd word , atau nama yang sama dengan perintah yang ada pada Java Script. Reserved word dalam javascript adalah :
Abstract,
Boolean, break, byte, case, catch, char, class, const, continue, default, do,
double, else, extends, false, final, finally, float, for, function, goto, if,
implements, import, in, instace of, int, interface, long, native, new, null,
package, private, protected, public, return, short, static, super, switch,
synchronized, this, throw, throws, transient, true, try, var, void, while,
with.
Memberikan nilai pada variabel
Untuk memberikan
nilai pada variabel digunakan sintaks :
var namavariabel = nilai (value)
contoh :
- Memberikan nilai string untuk variable :
var nama = “firdaus adnan”
- Memberi nilai numerik untuk variable :
var angka = 1000.12
- Memberi nilai Boolean untuk variable :
var x = true
var y = false
- Memberi nilai null untuk variable :
var nama = null
Konstanta/Literal
Konstanta/literal
adalah suatu nilai pasti yang tidak bisa diubah-ubah. Pengertian ini relevan
dengan kata dasarnya yaitu konstan yang artinya tetap. Jika isi variable masih
bisa diubah, maka konstanta tidak.
Antara variable dan konstanta dapat
disatukan. Perhatikan contoh di bawah ini :
total = subtotal + 100
Nilai 100 di atas adalah
konstanta/literal sedangkan total dan subtotal merupakan varible.
Beberapa jenis literal pada Java
Script :
1. Literal Integer,
yaitu suatu bilangan bulat tanpa pecahan
Literal
|
Bilangan
|
2001
|
Desimal
|
702
|
Octal
|
A33ff
|
Heksadesimal
|
2. Literal Floating Point,
yaitu suatu bilangan pecahan atau
berpangkat.
Literal
|
Arti
|
3.14
|
3,14
|
2E3
|
2 x 10 3
|
-2E3
|
-2 x 103
|
2E-3
|
2 x 103
|
3. Literal
String,
adalah suatu
karakter yang berisi huruf , angka atau symbol-simbol lainnya. Literal string
harus diawali dan diakhiri dengan tanda kutip ganda ( “ ) atau tunggal ( ‘ ).
Literal
|
Keterangan
|
“firdaus adnan”
|
Benar
|
“firdaus adnan’
|
Salah
|
4. Literal
Boolean,
adalah suatu
litral yang memiliki dua buah nilai yaitu
true (benar) dan false (salah)
contoh_3.1.html
contoh di atas menjelaskan bahwa variable yang diidentifikasikan dengan
nama menyatakan sebuah string yang valus-nya adalah firdaus. Ketika kita ingin
memanggil value tersebut kedalam browser maka kita harus mencantumkan nama
variable yang telah kita definisikan di atas yaitu nama kedalam sintak
pernyataan atau sintak yang digunakan untuk menampilkan suatu kalimat yaitu document.write
dan menambahkan tanda “+” dan tanda kutip dua (“) di samping variable tersebut.
Contoh_3.2.html
Sintak prompt di atas merupakan
script dalam javascript untuk memerintahkan user untuk memasukkan input
ke dalam box yang telah tersedia, di mana input tersebut menjadi variable
terhadap output yang dideklarasikan di dalam sintak pernyataan yaitu di dalam document.write.
Beda halnya dengan alert yang akan kita bahas pada bab selanjutnya. Contoh_3.3.html
OPERATOR
· Pengantar Operator
·
Operator Unary
·
Operator Binary
·
Operator Penugasan
·
Perbandingan
|
Pengantar Operator
Operator
merupakan perintah yang memanipulasi nilai atau variable dan memberikan suatu
hasil tertentu. Beberapa jenis operator yang sudah umum yaitu operator
aritmatika yang sering kita gunakan dalam membahas matematika, diantaranya
adalah operator tambah (+), kurang (-), kali (x), bagi (/) , persen (%) dan
sebagainya.
Data-data yang dimanipulasi oleh
operator untuk memberikan suatu hasil yang diinginkan disebut juga dengan operan.
Sebagai contoh :
X + 3 = 6
Keterangan :
- X dan 3 adalah operan
- + adalah operator
- 6 adalah hasil
Dalam modul ini kita akan mempelajari jenis-jenis
operator javascript, di antaranya adalah :
1. Operator Unary
2. Operator Binary
3. Operator penugasan
4. Operator penugasan
5. Operator perbandingan
6. Operator logical
7. Operator String
Operator Unary
Operator unary adalah operator yang hanya mengolah satu nilai atau satu
operan saja. Operator unary dalam javascript terbagi atas tiga macam, yaitu :
- Increment (penambahan), dengan symbol ++
- Decrement (pengurangan), dengan symbol –
- Negasi (lawan), dengan symbol –
Untuk lebih jelasnya, kita akan membahas satu-persatu beserta contohnya.
4.2.1 Increment
(penambahan)
Operator ini
berfungsi untuk menambahkan nilai operan (variable) sebenar satu.
Contoh :
a. total =
subtotal++
Dari contoh di
atas kita dapat mendefinisikan bahwa variable subtotal dimasukkan ke
variable total terlebih dahulu,
kemudian nilai variable subtotal ditambah
dengan angka satu.
b. total =++
subtotal
Dari contoh di
atas kita dapat mendefinisikan bahwa variable subtotal ditambah terlebih dahulu, lalu nilai
variable subtotal di masukkan ke
variable total.
4.2.2 Decrement
(pengurangan)
Operator ini akan mengurangi nilai operan (variable)
sebesar satu.
Contoh :
a.
total = subtotal--
Artinya variable subtotal dimasukkan ke variable total
terlebih dahulu kemudian nilai variable subtotal dikurangi Satu
b.
total = --subtotal
Artinya nilai variable subtotal
dikurangi satu terlebih dahulu,
kemudian nilai variable subtotal dimasukkan ke variable total.
4.2.3 Negasi
(lawan)
Operator ini akan membalikkan nilai operan. Jika
operan bernilai positif, operator negasi akan menjadikannya negatif dan
sebaliknya.
Perhatikan
contoh soal berikut :
Contoh_4.1.html
Operator Binary
Operator Binary adalah operator yang
mengolah dua nilai atau dua operan. Perhatikan contoh di bawah ini :
x + y = 5
Tanda + adalah operator binary,
karena tanda tersebut mengolah dua buah operan yakni x dan y. Semua operator
binary pada javascript adalah operator aritmatika. Perhatikan table di bawah
ini :
Operator
|
Fungsi
|
Contoh
|
+
|
Penjumlahan
|
var x = 2 + 3 ; nilai x = 5
|
-
|
Pengurangan
|
var x = 3 – 2; nilai x=1
|
+
|
Perkalian
|
var x = 2*3; nilai x = 6
|
/
|
Perkalian
|
var x = 3/2; nilai x = 1.5
|
%
|
Modulus
|
var x = 3%2; nilai x = 1
|
Perhatikan
contoh di bawah ini
Contoh_4.2.html
Operator Penugasan
Operator penugasan adalah operator yang memberi nilai kepada variable.
Jenis operator yang umum digunakan adalah tanda sama dengan (=). Contoh :
var nilai =
10
nilai =
matematika
Pada contoh di
atas, variable nilai diberi nilai (value) 10. Pada baris kedua, variable
nilai diberi nilai (value) yang terdapat pada variable matematika.
Jenis operator lainnya merupakan
singkatan dari operator binary. Perhatikan contoh di bawah ini :
nilai += matematika
contoh di atas sama artinya dengan :
nilai =nilai + matematika
Beberapa jenis operator penugasan yang terdapat pada
javascript adalah :
Operator
|
Contoh
|
Arti
|
=
|
nilai = 10
|
value nilai = 10
|
+=
|
nilai += matematika
|
nilai = nilai + matematika
|
-=
|
nilai -= matematika
|
nilai = nilai – matematika
|
*=
|
nilai *= matematika
|
nilai = nilai * matematika
|
/=
|
nilai /= matematika
|
nilai = nilai / matematika
|
%=
|
nilai %=matematika
|
nilai = nilai % matematika
|
Perhatikan contoh_4.3.html berikut ini :
Perbandingan
Operator perbandingan adalah
operator yang digunakan untuk membandingkan satu nilai dengan nilai yang lain,
untuk mendapatkan hasil benar atau salah. Pada umumnya, macam dari jenis
operator perbandingan ini adalah sama dengan (==). Contohnya :
Biaya
== 100
Jika
nilai dari variable biaya di atas besarnya sama dengan 100, maka pernyataan di
atas akan memberikan hasil true (benar). Tetapi jika nilai dari variable biaya
di atas besarnya tidak sama dengan 100, maka pernyataan di atas akan memberikan
hasil false (salah).
Operator
|
Arti
|
Contoh
|
==
|
Sama dengan
|
Total==10
|
!=
|
Tidak sama dengan
|
Total !=100
|
>
|
Lebih besar dari
|
Total>100
|
<
|
Kurang dari
|
Total<100
|
>=
|
Lebih besar atau sama
|
Total>=100
|
<=
|
Kurang dari atau sama
|
Total<=100
|
Perhatikan
contoh_4.4.html di bawah ini :
OPERATOR
(lanjutan) DAN EKSPRESI
·
Operator Logikal
·
Operator string
Ekspresi
· Definisi Ekspresi
·
Ekspresi Perbandingan
Alert
|
Operator Logikal
Pada dasarnya Operator logical hampir sama dengan operator perbandingan
yang berfungsi untuk membandingkan dua buah nilai untuk memberikan hasil beanr
atau salah. Perbedaannya adalah operator logical berfungsi membandingkan
perbandingan . Perhatikan contoh di
bawah ini :
( total > 10) && (biaya < 100)
Pada contoh di atas digunakan operator &&
yang artinya adalah mengharuskan kedua nilai memenuhi syarat. Jika kedua nilai
benar maka ekspresi di atas akan bernilai benar.
Beberapa jenis operator yang terdapat di javascript adalah sebagai berikut
:
Operator
|
Arti
|
keterangan
|
&&
|
AND (dan)
|
Kedua nilai yang dibandingkan
harus sesuai dengan kriteria
|
||
|
OR (atau)
|
Salah satu nilai yang
dibandingkan harus sesuai dengan kriteria
|
!
|
NOT (bukan)
|
Nilai yang dibandingkan
merupakan kebalikannya.
|
Dari contoh di atas yaitu (total > 10)
&& (biaya < 100) dapat kita perkirakan bahwa :
- Jika total = 12 (benar) dan biaya = 98 (benar), maka hasilnya adalah benar
- Jika total = 8 (salah) dan biaya = 98 (benar), maka hasilnya adalah salah
- Jika total = 8 (salah) dan biaya = 102 (salah), maka hasilnya adalah salah
Jika operator contoh di atas kita ganti dengan tanda ( ||
) maka dapat kita ambil perkiraan yaitu :
·
Jika total = 12 (benar) dan biaya = 98 (benar),
maka hasilnya adalah benar
·
Jika total = 8 (salah) dan biaya = 98 (benar),
maka hasilnya adalah benar
·
Jika total = 12 (benar) dan biaya = 102 (salah),
maka hasilnya adalah benar
·
Jika total = 8 (salah) dan biaya = 102 (salah),
maka hasilnya adalah salah
Jika contoh di atas dirubah menjadi !((total == 100), maka
dapat kita perkirakan hasilnya sebagai barikut :
·
Jika total=100 (benar), maka ekspresi di atas
salah
·
Jika total=98 (salah), maka ekspresi di atas
benar
Untuk lebih jelasnya,
perhatikan contoh_5.1.html di bawah ini :
Operator String
Operator
string adalah operator yang mengolah nilai string, yaitu nilai yang berupa
karakter (bukan angka atau ekspresi aritmatik).
Jenis operator string pada
dasarnya sama dengan operator-operator yang telah dijelaskan di atas. Hanya
saja, operator-operator tersebut digunakan untuk memanipulasi string.
Perhatikan contoh di bawah ini :
var nama = “firdaus” +
“alikomeini”+”adnan”
Dari contoh di atas maka dapat
diambil kesimpulan bahwa variable pesan adalah string “firdaus alikomeini
adnan”.
Beberapa hal yang perlu
diperhatikan adalah :
1.String tidak bisa
dibandingkan
Jika kita tidak bisa
membandingkan antara “roti” == “keju” atau “roti”>”keju”. Maka hasil
keduanya adalah salah atau false.
2. Javascript mengubah string
angka menjadi numerik
Apabila string berisi angka,
javascript akan mengubahnya menjadi niali numerik, sehingga dapat dibandingkan.
Perhatikan contoh di bawah ini :
“100” > “10”
Javascript akan mengubah “100”
menjadi 100 dan mengubah “10” menjadi 10. Karena 100 lebih besar dari 10, maka
ekspresi di atas bernilai true atau benar.
3.String gabungan tidak diubah
Gabungan yang dimaksud adalah
gabungan antara numerik dengan kalimat. Misalkan string tersebut berupa “angkatan2001”,
contoh tersebut tidak akan diubah menjadi nilai numerik. Perhatikan table
berikut yang menjadi contoh penerapan
operator string pada javascript :
Operator
|
Arti
|
Contoh
|
==
|
Membandingkan string
|
“roti” == “keju”
|
>
|
Lebih besar dari
|
“100” > “10”
|
+
|
Penjumlahan
|
nama_awal = “firdaus”
nama_akhir = “adnan”
Nama = nama_awal + nama_akhir
|
+=
|
Penjumlahan ganda
|
nama = “firdaus”
nama+=”adnan”
|
Untuk lebih lengkapnya, perhatikan contoh_5.2.html di
bawah ini
EKSPRESI
Definisi Ekspresi
Ekspresi
merupakan kode-kode pemograman yang digunakan untuk menampilkan perhitungan
atau penugasan.
Pada penambahan mengenai operator di atas, anda telah
menggunakan ekspresi ini.
Perhatikan contoh berikut :
var
nilai = 100
var
total = nilai1 + nilai2
Ekspresi perbandingan
Pada javascript, tidak ada
ketentuan tertentu untuk penulisan ekspresi. Tetapi ada satu pengecualian yaitu
pada ekspresi perbandingan.
Sintak
untuk ekspresi perbandingan ini adalah sebagai berikut :
(kondisi)
? nilaibenar : nilaisalah
Dari sintak di atas, jika
kondisi benar maka akan diberi nilai yang terdapat pada variable nilaibenar.
Sedangkan jika kondisi salah maka akan memberikan nilai yang terdapat pada
variable nilaisalah.
Perhatikan contoh di bawah ini :
Jika
firdaus ingin mendapatkan mobil maka syaratnya ia harus mendapatkan nilai 90,
tetapi jika ternyata nilai yang ia dapat di bawah 90 maka ayahnya akan
memberinya sebuah sepeda. Kondisi seperti ini dapat kita terjemahkan ke dalam
kalimat :
Hadiah
= (nilai > 90) ? “mobil” : “sepeda”
Jika kita terjemahkan ke dalam
bahasa javascript (contoh_5.3.html) adalah sebagai berikut :
Perhatikan contoh_5.4.html di bawah ini :
Alert
Alert dalam javascript merupakan script pemberi
pesan kepada user ketika user memasukkan input ke dalam kolom data, ketika user
sedang menekan tombol yang ada di browser atau peringatan kepada user kerika
user salah memasukkan input ke dalam kolom data di mana input tersebut
perlawana dengan keinginan script yang ada. Perhatikan contoh_5.5.html :
PERNYATAAN
· Pengantar
Pernyataan
· Pernyataan
if…else
· Pernyataan
while
· Pernyataan for
· Pernyataan
break
|
Pengantar Pernyataan
Pernyataan merupakan kata kunci yang digunakan untuk mengendalikan alur
program javascript yang kita buat. Pernyataan bisa dibuat sebagai kalimat
lengkap yang menyatukan ekspresi, variable, dan nilai-nilai yang telah kita
pelajari pada modul-modul sebelumnya.
Pernyataan (statement) dapat terbagi
menjadi 9 bagian yang akan kita bahas satu persatu. Kesembilan bagian tersebut
adalah :
- Pernyataan if..else
- Pernyataan while
- Pernyataan for
- Pernyataan break
- Pernyataan continue
- Pernyataan for..in
- pernyataan with
- Pernyataan var
- Pernyataan komentar
Dalam modul ini kita akan membahas pernyataan if..else sampai for
, sedangkan pernyataan lainnya akan dibahas pada modul selanjutnya.
Pernyataan if...else
Pernyataan ini digunakan untuk membandingkan suatu kondisi, jika kondisi itu benar, maka akan dijalankan ekspresi tertentu, tetapi jika kondisi itu salah akan dijalankan ekspresi lain. Sintaks dari pernyataan if……else,
If (kondisi)
{ekspresi 1}
else (kondisi)
{ekspresi 2}
Keterangan :
- Kondisi : kondisi yang dibandingkan
- Ekspresi-1 : ekspresi-ekspresi yang akan dijalankan jika kondisi memenuhi syarat.
- Ekspresi-2 : ekspresi-ekspresi yang akan dijalankan jika kondisi tidak memenuhi syarat.
Contoh :
Agar lebih memahami maksud dari pernyataan di atas, simak kalimat berikut
:
Jika nilai ujian saya meningkat, saya akan
mendapatkan mobil dari orangtua saya, tetapi jika tetap atau berkurang maka
saya tidak mendapatkan mobil (else) melainkan saya hanya mendapatkan sepeda.
Jika kita terjemahkan ke dalam bahasa javascript maka kalimatnya adalah :
If (nilai >90)
(hadiah = “mobil”)
else
(hadiah=”sepeda”)
keterangan :
Baris
|
Keterangan
|
if (nilai > 90)
(hadiah = “mobil”)
|
Jika isi variable nilai
bernilai lebih besar dari 90 maka variable hadiah akan diberikan nilai
“mobil”
|
Else
(hadiah= “sepeda”)
|
Jika isi variable nilai
bernilai tidak lebih besar dari 90 maka variable hadiah akan diberikan
nilai “sepeda”
|
Perhatikan
contoh_6.1.html di bawah ini :
Perhatikan contoh_6.2.html di bawah ini :
Dari contoh di atas maka browser akan meminta masukan dari
user yang di jadikannya sebagai variable yang akan di cocokkan pada sintak
pernyataan yang telah dibuat pada text editor.
Pernyataan while
Pernyataan
while digunakan untuk melakukan suatu loop atau menjalankan ekspresi
berulang-ulang selama (while) kondisi yang ditentukan bernilai benar.
Sintak dari
pernyataan while adalah sebagai berikut :
While
(kondisi)
(ekspresi)
Keterangan :
- Kondisi : kondisi yang di bandingkan
- Ekspresi : ekspresi-ekspresi yang akan dijalankan jika kondisi memenuhi syarat.
Contohnya :
Jika seorang
nasabah bank ingin menabung si suatu bank dengan dana awal Rp.100.100,-. Dia
tidak akan berhenti menabung sampai kas saldonya mencapai satu juta. Maka jika
dituangkan pada suatu sintak javascript, sebagai berikut :
var saldo = 100000
while (saldo <=1000000)
(saldo+=100000)
Dari sintak di atas maka dapat di uraikan sebagai berikut
:
- var saldo = 100000 ; aritnya adalah variable saldo di beri nilai awal 1000
- while (saldo <= 1000000); artinya adalah memeriksa kondisi apakah isi variable saldo kurang dari atau sama dengan 1000000. Jika benar, maka pernyataan berikutnya akan dijalankan.
- (saldo +=1000); artinya sama dengan saldo= saldo+1000. Variable saldo yang baru diisi dengan variable uang 1000 maka akan ditambah dengan 1000 sehingga jumlahnya kni menjadi 2000, dan begitu seterusnya.
Perhatikan
contoh_6.3.html :
Di dalam browser
akan terlihat seperti di bawah ini :
Pernyataan for
Pernyataan for berfungsi
melakukan suatu loop atau menjalankan ekspresi berulang-ulang untuk kondisi
yang telah di tentukan sebelumnya. Pernyataan for jika dilihat hampir sama
dengan pernyataan while, yang berbeda adalah pernyataan for menyertakan kondisi
awal dan kondisi akhir serta besarnya kenaikan.
Sintak
pernyataan for adalah :
for (kondisi_awal; kondisi
_akhir; kenaikan)
(ekspresi)
Keterangan :
- kondisi_awal : kondisi awal yang memenuhi untuk loop dimulai
- kondisi_akhir : kondisi akhir yang memenuhi untuk loop diakhiri
- kenaikan : besarnya kenaikan nilai variable untuk setiap iterasi loop
Perhatikan contoh_6.4.html di bawah ini :
Pernyataan Break
Pernyataan
(statement) break berfungsi sebagai menghentikan ekspresi loop yang sedang
dijalankan, dan melanjutkan ke baris skrip di bawah loop tersebut. Jika
pengulangannya belum selesai sampai pada statement yang di syaratkan maka ia
akan tetap me loop, dan berhenti pada kondisi yang telah ditetapkan di dalam sintak
javascript. Perhatikan contoh_6.5.html di bawah ini :
PERNYATAAN
(lanjutan) DAN FUNGSI
·
Pernyataan Continue
·
Pernyataan for…in
·
Pernyataan with
·
Pernyataan var
·
Pernyataan Komentar
Fungsi
·
Pengertian Fungsi
·
Pembuatan Fungsi
·
Aturan pembuatan Javascript
·
Memanggil Fungsi javascript
|
Pernyataan Continue
Pernyataan continue berfungsi untuk menghentikan eksekusi loop.
Tetapi hal ini tidak menyebabkan keluar dari loop tetapi hanya melompati satu
buah iterasi dan melanjutkan iterasi loop yang selanjutnya.
Perhatikan
contoh_7.1.html di bawah ini :
Pernyataan
for…in
Pernyataan for…in adalah
pernyataan yang melakukan loop(pengulangan) di dalam sebuah objek.
Sintak
dari pernyataan for…in adalah :
for (counter in nama_object)
{ekspresi}
Keterangan :
·
Counter : jumlah counter di dalam object (jumlah
property)
·
Nama_object : objek yang ingin dilakukan loop
·
Ekspresi : ekspresi yang dijalankan selama loop
Perhatikan
contoh_7.2.html di bawah ini :
Pada
contoh di atas, objeknya adalah buah sedangkan property untuk objek buah adalah
warna, tipe dan rasa. Setiap property memiliki nomor index yang dimulai dari 0.
Jadi pada objek buah di atas memiliki counter sebagai berikut :
·
buah [0] = buah.warna
·
buah [1] = buah.besar
·
buah[2] =
buah.rasa
Pernyataan with
Seperti halnya dengan
pernyataan for…in yang di atas, dalam pernyataan ini ada sedikit perbedaan
yaitu pernyataan with berfungsi untuk memberi tahu objek yang sedang kita
gunakan. Setiap referensi variable di dalam pernyataan berikutnya akan merujuk
kepada objek tersebut.
Sintak pernyataan with sebagai
berikut :
with (nama_object)
(ekspresi)
Keterangan :
·
nama_object : nama objek yang ibgin di jadikan
acuan pernyataan
·
ekspresi : ekspresi yang terdapat di dalam objek
contoh
:
with (buah)
{
warna = “merah”;
ukuran = “besar”;
rasa = “manis”;
}
Sintak
lengkapnya, anda cukup memodifikasi contoh seperti di atas (contoh_7.2.html).
Pernyataan var
Pernyataan var berfungsi untuk
menugaskan suatu nilai ke dalam variable. Sitak dari statement (pernyataan)
var adalah :
var nama_variable = value
contoh :
var nama = “firdaus”
var a = 5
Pada
modul sebelumnya, sebenarnya kita telah memperlajarinya yaitu pada modul
variable mengenai nilai dari variable.
Sebenarnya kita bisa memberikan
nilai untuk variable tanpa pernyataan var tersebut, seperti :
nama=”firdaus”
Pernyataan komentar
Pernyataan komentar berfungsi
untuk menerangkan atau memberi keterangan pada setiap barisnya yang ada di
dalam sintak HTML. Pernyataan ini memudahkan bagi user untuk mempelajari script
javascript yang kita buat, selain itu komentar yang kita buat dalam script
tersebut tidak akan terliah di browser dan hanya bisa terlihat di source-nya
saja, karena browser tidak ikut memproses sintak komentar tersebut.
Pada
modul sebelumnya, sebenarnya kita telah mempelajari dan membahasnya.
Sintaknya
ada dua yaitu :
1. //komentar
2. /*
komentar
komentar */
FUNGSI
Pengertian Fungsi
Fungsi adalah sekumpulan kode-kode javascript yang jika
dijalankan akan menghasilkan atau mengerjakan suatu tugas tertentu. Fungsi
dapat di sebut sebagai modul atau subprogram dari seluruh skrip atau program
javascript.
Pembuatan Fungsi
Dilihat dari segi pembuatan fungsi,
maka sintak dasarnya adalah :
function nama_fungsi (parameter)
{ ……..
ekspresi
ekspresi
………
}
Untuk memposisikan sintak tersbut,
maka sintak tersebut harus diletakkan di :
<script
language=”javascript”>
function nama_fungsi()
{
### isi
fungsi ###
}
</script>
Aturan Pembuatan Fungsi
Ditinjau dari segi pembuatannya, maka fungsi
memiliki beberapa aturan pembuatan yang akan di jabarkan di bawah ini :
- Diawali dengan kata function
- Nama fungsi bebas, asalkan dapat menjelaskan fungsi dari fungsi tersebut. Yang terenting di sini adalah fungsi harus diikuti oleh tanda kurung “()” yang digunakan sebagai tempat parameter.
- Di dalam tanda kurung setelah kata function, dapat diletakkan parameter fungsi.
Untuk lebih jelas lagi perhatikan sintak berikut :
function jumlah (a,b)
{
var c = a+b;
document.write (z)
}
Parameter di dalam fungsi bisa digunakan bisa juga
tidak digunakan. Parameter merupakan variable atau nilai yang akan diolah
ekspresi-ekspresi yang terdapat di dalam fungsi tersebut.
- Isi fungsi harus di letakkan di dalam tanda kurung kurawal.
Untuk lebih
jelas lagi, perhatikan contoh_7.3.html :
Perhatikan contoh di atas. Tampak bahwa dengan menuliskan garis() berarti
kita telah memanggil sintak “<hr>” yang di nyatakan di dalam sintak
document.write. Ini disebabkan bahwa kata garis merupakan nama sebuah fungsi
yang bisa dipanggil pada posisi manapun selama nama fungsi tersebut masih
berada di antara sintak javascript.
Pada contoh di atas, tampak bahwa
isi parameter masih kosong. Di bawah ini ada script javascript yang memberikan
nilai parameter pada fungsi. Perhatikan contoh_7.4.html di bawah ini :
Memanggil Fungsi javascript
Untuk menampilkan fungsi yang
telah di buat, maka fungsi tersebut harus dipanggil terlebih dahulu. Ada
beberapa cara pemanggilan fungsi tersebut, yaitu :
- Fungsi tersebut dipanggil dalam skrip javascript
- Fungsi dipanggil dari dalam fungsi itu sendiri
- Fungsi dipanggil dari dalam fungsi yang lain.
Di bawah ini
akan dijelaskan secara lebih rinci mengenai metode pemanggilan fungsi javascript
tersebut :
a. Memanggil
fungsi dari dalam skrip javascript
Metode ini terbagi dua :
- Fungsi dipanggil dari skrip yang terletak pada bagian <head>
Perhatikan contoh di bawah ini :
- Fungsi dinpanggil dari skrip javascript yang terletak pada bagian <body>
Perhatikan contoh_7.6.html berikut
:
FUNGSI
(lanjutan)
·
Memanggil Fungsi Dari Dalam Fungsi
·
Memanggil Fungsi Dari Fungsi Lain
·
Fungsi Built-in
|
Memanggil Fungsi Dari Dalam Fungsi
Fungsi ini disebut juga dengan fungsi rekursif yaitu fungsi berulang. Maksudnya adalah
fungsi tersebut dipanggil dari dalam fungsi itu sendiri.
Sintaknya
adalah :
<script
language =”javascript”>
function nama_function()
{ …
nama_fungsi()
…
}
</script>
Perhatikan contoh_8.1.html di bawah
ini :
Contoh yang
paling mudah untuk ditemukan adalah contoh menghitung nilai factorial.
Perhatikan
contoh_8.1.html berikut :
Dari script di
atas, dapat dilihat bahwa rumus yang telah ada harus dipanggil kembali.
Memanggil Fungsi dari Fungsi Lainnya
Dalam
membuat suatu fungsi, kita juga dapat memanggil fungsi lain yang telah kita
baut sebelumnya, dengan kata lain kita membuat suatu fungsi terlebih dahulu
kemudian membuat fungsi lainnya yang memanggil fungsi sebelumnya.
Sintaknya adalah
:
<script
language=”javascript”>
function nama_fungsi1 ()
{
…
}
function nama_fungsi2 ()
{
… nama_fungsi1()
}
</script>
Untuk lebih
jelas lagi. perhatikan contoh_8.2.html di bawah ini :
Dari contoh di atas, tanpak bahwa ada dua jenis fungsi yang berbeda,
fungsi pertama menyatakan garis, dan fungsi kedua menyatakan nilai factorial.
Kondisi di atas, fungsi gasris dapat dipanggil di dalam fungsi faktorial
sehingga selain menampilkan nilai factorial, maka akan tampil juga fungsi garis
di antara fungsi factorial.
Fungsi Built-in
Di dalam javascript juga
menyediakan beberapa fungsi built-in yang dapat langsung digunakan.
Fungsi-fungsi tersebut adalah :
- parseInt()
- parseFloat()
- isNaN()
- eval()
- escape()
- unescape()
Untuk lebih
jelasnya lagi, perhatikan penjabaran dari tiap fungsi di atas yang ada di bawah
ini :
- Fungsi parseInt()
Fungsi parseInt() berguna untuk mengubah dan mengkonversi nilai string
menjadi nilai integer dengan menggunakan basis tertentu.
Misalnya :
String “100.12” jika diubah menjadi integer dengan
basis sepuluh maka hasilnya adalah 100 karena nilai integer saja yang akan
dikonversi.
Sintaknya adalah :
ParseInt (string,
basis)
Perhatikan contoh_8.3.html di
bawah ini :
2 Fungsi
parseFloat()
Fungsi dari fungsi parseFloat()
adalah untuk mengubah atau mengkonversi nilai string menjadi nilai
floating-point. Nilai floating-point adalah bilangan pecahan atau pangkat).
Sintak fungsi tersebut adalah :
ParseFloat (string)
Perhatikan contoh_8.4.html di bawah ini :
3. Fungsi isNaN
Fungsi isNaN() yang merupakan
singkatan dari is Not a Number digunakan untuk menentukan apakah suatu nilai
berupa bilangan numerik atau bukan bilangan numerik.
Dengan kata lain
bahwa :
-
Jika nilai tersebut bukan bilangan numeric, maka fungsi isNaN akan
menghasilkan nilai true (benar).
-
Jika nilai tersebut bilangan numeric,
maka fungsi isNaN akan menghasilkan nilai false (salah).
Sintak dari fungsi tersebut adalah :
IsNaN (value)
Perhatikan contoh_8.5.html di bawah ini :
4. Fungsi eval()
Fungsi eval() digunakan untuk menghitung suatu ekspresi aritmatika.
Sintaknya adalah
Eval
(ekspresi)
Perhatikan contoh_8.6.html di bawah ini :
Ketika halaman ini akan tampil , maka akan tampak kolom tempat memasukkan
ekspresi artimatika. Jika kita masukkan suatu ekspresi aritmatika seperti :
Angka 10 di atas merupakan variable yang akan di tampilkan oleh sintak
pernyataan, maka akan tampak hasilnya seperti di bawah ini :
EVENT
·
Pengantar Event
·
Menjalankan Event
·
Beberapa Aplikasi Event
|
Pengantar Event
Event adalah suatu aksi yang dilakukan oleh pemakai
yang memicu jalannya kode JavaScript anda.sebagian besar event dipicu oleh
pemakai yang memanipulasi halaman web pada program browsernya , seperti
menggeser pointer keatas link untuk memicu menampilkan alamat link pada baris
status.
Macam-macam event :
1.
Click , event ini terjadi jika pemakai mengklik tombol
mouse pada link atau elemen yang terdapat form.
2.
Focus, event ini terjadi jika pemakai mengklik atau
meletakkan pointer mouse pada elemen form seperti field teks , kotak cek dan
sebagainya.
3.
Blur , event ini terjadi jika pemakai menyingkirkan focus
(pointer mouse) dari elemen form yang sebelumnya diberi focus.
4.
Change , event ini terjadi jika pemakai mengubah input
atau masukan pada elemen form.
5.
MouseOver, terjadi jika pemakai meletakkan mouse di
atas sebuah link .
6.
Select, event ini terjadi jika pemakai memilih teks
pada elemen form , seperti menggeser pointer mouse pada teks sambil menahan
tombol kiri mouse.
7.
Submit, event ini terjadi bila mengklik tombol “submit”
Menjalankan Event
Event Handler
Event
Handler merupakan kode-kode javascript yang akan dijalankan apabila event
tersebut dipicu.
Untuk menjalankan event tersebut
maka digunakan sintaks :
On NamaEvent
= “ kode JavaScript ”
Contoh :
OnMouseOver =”fungsi_data (a,b)”
Memanggil
Event Handler
Metode pemanggilan event handler
dapat menggunakan dua metode, yaitu :
- Memanggil melalui fungsi
Event Handler dapat dijalankan dengan cara memanggil fungsi. Sintaknya
adalah :
OnNamaEvent =
“namafungsi (parameter)”
Untuk lebih jelasnya lagi,
perhatikan contoh_9.1.html di bawah ini :
- Memanggil dengan menjalankan kode javascript secara langsung
Event Handler dapat dijalankan dengan cara membuat kode javascript secara
langsung di text editor. Sintaknya adalah :
OnNamaEvent = “kode
javascript”
Perhatikan contoh_9.2.html :
Dari contoh gambar di atas dapat di tarik beberapa kesimpulan, bahwa :
Jika link tersebut di klik yaitu kata pencet, maka akan dijalankan
script javascript “document.write ('<h4>'+'selamat
datang'+'</h4>')" yang akan menampilkan teks selamat datang pada
halaman browser tersebut.
Beberapa apklikasi Event
1. contoh_9.3.html
mengenai event Click:
Contoh di atas memberikan gambaran kerja sebuah
perhitungan sederhana dengan menggunakan javascript yang menjadi gabungan
antara fungsi dan event.
Di bawah ini adalah contoh aplikasi form yang
interaktif dengan user ketika memasukkan input ke dalamnya :
Perhatikan contoh_9.4.html, contoh ini merupakan
contoh event focus :
Tampilan di browsernya adalah :
Perhatikan bagian yang dikenai oleh tanda panah di
atas, bagian tersebut merupakan ciri khas dari event focus.
Contoh_9.5.html tentang event Submit adalah :
Tampilan di browsernya adalah :
Tampilan yang dikenai oleh tanda panah, merupakan cirri khas dari event
onSubmit.
ANEKA APLIKASI JAVASCRIPT
Di bawah ini akan di sajikan
beberapa aplikasi javascript yang dinamis sehingga dapat membuat tampilan web
site kita menjadi lebih indah dan interaktif.
1. Aplikasi Jam
Dari script di
atas, akan membuat suatu tampillan jam yang dinamis sesuai dengan pergerakan
jam yang ada di komputer kita sendiri.
Tampilan di
brrosernya adalah :
2 Di bawah ini merupakan contoh link ke
beberapa web site terkenal di dunia. Dengan memilih option-nya, kita sudak
langsung membuka website tersebut tanpa harus merubah bentuk mouse menjadi
seperti tangan. Perhatikan contoh di bawah ini
Tampilannya di browser adalah :
- Manipulasi kalkulator
Postingan
Tidak ada komentar:
Posting Komentar