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 relati masih muda bila dibandingkan dengan lainnya! Java merupakan bahasa pemograman yang menjadi kelanjutan dari bahasa C++! Java dikembangkan oleh Sun "icrosystem, #nc! pada tahun $%%& dan telah mengalami revolusi 'perkembangan( yang sangat pesat sampai sekarang ini! Bahasa pemograman ini memiliki beberapa keunggulan dibandingkan dengan bahasa pemograman lainnya yaitu ukuran ilenya kecil, akses data cepat, bersi at kompiler)interpreter dan dapat dibaca oleh berbagai system operasi seperti *indo*s ataupun linu+! Java memiliki si at platform independent 'terbuka( yang menjadi ciri khas bahasa pemograman tersebut! ,al ini menyebabkan bahasa pemograman ini dapat di baca seluruh komputer tanpa harus mengkonversinya sehingga ketika user sedang berkomunikasi dengan menggunakan asilitas komputer, user tidak perlu mengkha*atirkan perbedaan so t*are maupun hard*are 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! Si at yang sama dengan bahasa java adalah javascript bersi at interpreter, yaitu script yang telah dibuat di te+t editor seperti notepad atau *ordpad akan dibaca perbaris dari baris a*al sampai akhir!

Team Training SMK-TI

-)$

Bahasa pemograman javascript dibuat secara khusus untuk membuat suatu halaman *eb yang interakti maupun dinamis! Jika java merupakan bahasa pemograman dan ,."L ',yper .e+t "arkup Language( merupakan bahasa kode maka javascript hibrid yang menjadi perpaduan antara bahasa java dengan ,."L Beberapa keunggulan javascript dalam mengolah dan mengkondisikan sebuah *eb antara lain, karena ukuran ilenya kecil maka ketika seorang mere/uest sebuah *eb dari *ebserver dimana didalam *eb tersebut memuat script javascript maka aplikasi dari javascript tersebut akan cepat tampil di bro*ser tanpa harus diolah terlebih dahulu di server! ,al ini disebabkan karena javascript memiliki si at client side yaitu script yang ketika dipanggil oleh bro*ser 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 *eb yang ketika dipanggil bro*ser maka script program tersebut akan diolah dan bekerja di server, sedangkan ketika *eb tersebut akan ditampilkan di bro*ser maka scriptnya tidak akan disertai di bro*ser karena scriptnya hanya akan bekerja di server dan tidak bekerja di client! Bahasa pemograman ini si atnya server side! Contohnya antara lain adalah P,P, 0SP, JSP dan masih banyak lainnya! Beberapa jenis so t*are yang menjadi *ebserver di antaranya adalah apache yang sekarang ini sangat digandrungi *ebservernya! 1ntuk permasalahan server side ini, kita akan membahasnya pada bab selanjutnya yaitu mengenai "yS2L dan P,P! Pada bab ini kita hanya membahas peran javascript sebagai aplikasi tambahan di bro*ser yang bersi at client side! Beberapa keuntungan dan keunggulan javascript sebagai bahasa pemograman di *eb sedikit telah kita uraikan di paragraph sebelumnya! Javascript juga mampu membuat aplikasi yang sangat menarik yang dapat kita letakkan di *eb kita! Seperti program kalkulator sederhana yang dipakai di *eb ***!bhinneka!com, pembuatan link)link dinamis yang hanya mendekatkan kursor ke link tersebut maka akan keluar)menu)menu lainnya! Jenis ini bisa dilihat Team Training SMK-TI -)3 oleh banyak sebagian besar master*eb untuk dijadikan

di *ebnya ***!microso t!com! 0da juga yang mampu membuat animasi gambar dan te+t yang cukup banyak digunakan di *eb)*eb yang terkenal seperti ***!detik!com! Bahkan ada juga yang bisa membuat game dari javascript dan juga membuat homepage online! Jika kita sering bro*sing di internet maka kita akan mudah menemukan aplikasi)aplikasi javascript yang terdapat di *eb)*eb yang interakti dan dinamis! 4alam pembuatan javascript, te+t editor yang memungkinkan untuk digunakan adalah notepad, *ordpad dan sebagainya! 0da beberapa Bro*ser yang mendukung untuk menjalankan javascript dan juga yang tidak mendukung javascript, untuk bro*ser yang mendukung javascript ada beberapa jenis seperti internet e+plorer dan netscape! Pada a*alnya perkembangan javascript dengan pesat disebabkan semakin menjamurnya *eb)*eb yang ada di internet! Perkembangan 5orld 5ide 5eb yang sangat pesat menyebabkan munculnya banyak homepage dengan halaman) halaman yang sangat menarik! ,alaman 5eb yang dulunya hanya berupa teks sekarang menjadi cerdas dan interakti ! 6leh karena itu muncullah C7# 'Common 7ate*ay #nter ace(!4engan C7#, halaman *eb bisa menampilkan pencacah pengunjung , animasi sederhana dan masih banyak lagi sayangnya C7# meletakkan beban pemrosesan di server , bukan di client ! akibatnya dengan semakin banyaknya pengguna yang mengakses server lalu lintas jaringan semakin padat! 4i samping C7# ada bahasa pemrograman lain yang juga digunakan untuk menigkatkan interaktivitas halaman *eb yaitu java , yang pemrosesannya dilakukan di client namun sayangnya java sangat sulit dipelajari terutama oleh pemula! Karena itu dibuatlah suatu bahasa pemograman *eb yang khusus dibuat untuk memberikan tampilan yang interakti dan dinamis di sebuah *eb sehingga memberi kesan bagi pengunjung agar pengunjung tersebut sering membuka *eb tersebut yang mengakibatkan in ormasi yang kita letakkan di dalam *eb tersebut dapat dibaca oleh banyak pemakai jasa internet di dunia!

Team Training SMK-TI

-)8

Kelebihan dan Kek rangan Ja!a"#ri$t

Kelebihan Javascript $! 1kuran ile kecil Script dari javascript memiliki ukuran yang kecil sehingga ketika *eb yang memiliki javascript ditampilkan di bro*ser maka akses tampilannya akan lebih cepat dibandingkan ketika bro*ser membuka suatu *eb yang memiliki script java! ,al ini juga sangat berkepentingan dengan daya kerja server! Semakin kecil space suatu *eb yang disimpan dalam suatu server maka daya kerja server ketika di bro*sing oleh user di internet akan tidak terlalu berat, selain itu si at javascript client side yang tidak perlu lagi di olah oleh server ketika bro*ser memanggil *eb dari sebuah server! 3! "udah untuk dipelajari Javascript merupakan bahasa semi pemograman yang merupakan gabungan antara bahasa pemograman java dengan bahasa kode ,."L sehingga disebut bahasa hybrid! 5alaupun javascript merupakan turunan dari java namun javascript tidak memiliki aturan yang serumit java! 8! .erbuka Javascript tidak terikat oleh hard*are maupun so t*are tertentu bahkan system operasi seperti *indo*s maupun uni+! Karena ia bersi at terbuka, maka ia dapat dibuat maupun di baca di semua jenis komputer! Kekurangan Javascript $! Script tidak terenkripsi Karena javascript bersi at client side, maka script yang kita buat di te+t editor dan telah dijadikan *eb di server, ketika user me)re/uest *eb dari server tersebut maka sintak javascript akan langsung ditampilkan di bro*ser! 1ser bisa melihat dan menirunya dari sourcenya! 3! Kemampuan terbatas

Team Training SMK-TI

-)9

5alaupun javascript mampu membuat bentuk *eb menjadi interakti dan dinamis, namun javascript tidak mampu membuat program aplikasi sendiri seperti java! 8! Keterbatasan 6bjek 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!

Team Training SMK-TI

-)&

STR%KT%R JAVASCRIPT
Struktur dan Sintak 4asar Javascript Posisi Script Javascript di ,."L

Str kt r dan Sintak &a"ar Ja!a"#ri$t

4itinjau dari segi pembuatan dan penulisannya, javascript tidak jauh beda dengan ,."L seperti pada pertemuan a*al kita, sehingga ekstension ,."L juga! Script dasar dalam javascript dia*ali dengan sintak <script> dan diakhiri dengan sintak </script>. 0gar te+t editor dapat mengidenti ikasikan bah*a sintak tersebut merupakan sintak javascript yang digunakan untuk aplikasi di *eb, 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, ungsi, pernyataan dan lain sebagainya sesuai keinginan kita! 4i dalam penulisan javascript untuk menampilkan suatu pernyataan atau kalimat kita dapat menggunakan sintak : Document.write(kalimat ang akan di tampilkan!" 4an pada setiap akhir pernyataan umumnya disertai dengan tanda titik koma ';( kecuali pada kondisi tertentu saja yang akan kita bahas pada bab)bab berikutnya! .erkadang ada beberapa bro*ser yang lama tidak dapat mengidenti ikasikan script javascript secara baik sehingga tampilan di bro*ser ile yang menggunakan sintak javascript di dalam script ,."L dapat menggunakan

Team Training SMK-TI

-)<

tersebut akan menjadi kurang indah untuk dilihat! 6leh karena itu kita harus mengantisipasinya dengan menggunakan tanda =>?)= setelah penulisan <script language=javascript> dan tanda =@@)AB sebelum penulisan >@scriptA! 4i dalam script javascript juga dikenal tanda komentar yang apabila kita bubuhkan tanda tersebut maka kalimat yang ada di samping ataupun di antara tanda tersebut per ungsi sebagai komentar saja dan tidak tertampilkan di bro*ser! .anda ini sangat membantu bagi pemula atau yang baru mempelajari javascript agar lebih memahami ungsi maupun peran sintak yang di terangkan oleh tanda keterangan tersebut! .anda tersebut ada beberapa jenis antara lain: $! =@@B, .anda tersebut apabila kita letakkan di te+t editor yang menjadi *ahana pembuatan script javascript maka kalimat apapun yang ada di sampingnya akan menjadi keterangan dan tidak dapat tertampilkan di bro*ser! .anda tersebut biasanya digunakan untuk keterangan yang hanya satu baris saja! 3! =@C C@ =, tanda tersebut merupakan tanda komentar yang apabila ada kalimat di antaranya maka kaliamat tersebut akan menjadi keterangan biasa dan tidak tertampilkan oleh bro*ser! .anda ini biasanya digunakan pada keterangan yang sbanyaknya beberapa baris! 4ari segi peletakan posisi sintak javascript, kita dapat membaginya menjadi 3 kondisi, sebagai berikut : $! Sintak javascript ditulis dengan ile yang berbeda! 3! Sintak javascript terintegrasi dengan sintak ,."L! 4i ba*ah ini kita akan menguraikan secara rinci perbedaan antara kedua kondisi di atas yaitu : $! Sintak javascript ditulis dengan ile yang berbeda .ata cara penulisan seperti ini yaitu memisahkan sintak javascript dengan sintak ,."L dapat memudahkan bagi pembuat *eb apabila kita ingin membuat *eb yang berisi berbagai aplikasi javascript di setiap halaman yang kita buat! Penulisan secara manual sintak javascript di setiap lembar *eb akan cukup merepotkan bagi kita terlebih lagi hal tersebut dapat Team Training SMK-TI -)D

memperberat kerja server karena besarnya ile yang harus di kerjakan di server akibat banyaknya script javascript yang berulang)ulang di setiap ile *eb tersebut! ,al ini dapat di atasi dengan membuat suatu ile khusus bagi script javascript yang sama dari beberapa ile yang menggunakan script tersebut sehingga ile utama akan mencari ile tersebut dengan sintak tertentu! Script javascript yang kita buat tersebut kemudina kita simpan dalam suatu ile dengan ekstension =!jsB! 4alam ile tersebut kita tidak perlu mencatumkan sintak pembuka >scriptA dan sintak penutup >@scriptA!Eile utama terserbut akan mencari ile yang berekstention =!jsB tersebut dengan sintak : <script src=nama#file.js> </script> 4engan menggunakan sintak terserbut, kita dapat memanggil kapanpun dan diposisi manapun kita ingin menampilkan aplikasi javascript! "etode ini sangat memudahkan dan cukup praktis bagi pembuat *eb! $ontoh file %cript.js

ContohF3!3!html

Team Training SMK-TI

-)G

Bila kita buka bro*ser dengan nama ile contohF3!3!html, maka yang tampak di bro*ser adalah :

3! Sintak javascript terintegrasi dengan sintak ,."L "etode ini sudah cukup banyak digunakan oleh para pembuat *eb di dunia dan cakupan script yang digunakan tidaklah terlalu banyak sehingga tidak terlalu memberi e ek berarti bagi daya kerja server untuk mengirim *eb yang beraplikasi javascript ke bro*ser! Sintak)sintak javascript yang menggunakan metode ini biasanya tidak terlalu sering dibuat oleh sipembuat *eb karena bila ada script javascript yang ingin digunakan secara berulang)ulang maka akan lebih e isien kalau dibuat dengan cara

Team Training SMK-TI

-)%

seperti cara nomor di atas! Bila kita letakkan sintak javascript bersamaan dengan sintak ,."L biasa dan kita buat secara berulang)ulang di setiap lembar *eb yang kita buat maka hal tersebut akan menjadikan ukuran *eb kita akan menjadi lebih besar dibandingkan bila kita menggunakan cara pertama seperti di atas! Contoh :

P'"i"i S#ri$t Ja!a"#ri$t di (ile )TML

4ari segi penulisan javascript, kita dapat menulis sintak 'script( javascript di beberapa posisi pada bagian tertentu di sintak ,."L yang telah ada! 4i ba*ah ini kita akan membahas berbagai posisi yang dapat diletakkan sintak javascript di bagan ile ,."L seperti pada bagian ,H04 maupun B64I! $! Script javascript diletakkan di antara >,H04A J! >@,H04A Posisi ini sering sekali kita jumpai hampir disetiap *eb! Posisi ini cukup membantu kecepatan tampilan *eb yang menggunakan aplikasi javascript! Karena si atnya interpreter, maka ketika bro*ser pertama sekali membaca sebuah *eb yang dipanggil olehnya, apabila script javascript tersebut diletakkan di antara sintak >,H04AJ!>@,H04A maka bro*ser akan pertama sekali membaca dan mengidenti ikasi sintak tersebut sebelum Team Training SMK-TI -)$K

bro*ser membaca isi dari >B64IA! ,al ini sangat membantu dari segi kecepatan tampilan sebuah *eb di bro*ser! ContohF3!9!html

3! Script javascript diletakkan di antara >B64IA J! >@B64IA Penempatan script javascript di antara sintak B64I merupakan salah satu metode posisi pengetikan script javascript selain seperti yang di atas! Jika kita meletakkan script javascript di dalam sintak B64I maka ketika bro*ser menerima sebuah *eb dari salah satu *eb server maka sintak javascript dan sintak ,."L lainnya akan bersamaan diproses sehingga kecepatannya akan sedikit berkurang bila dibandingkan sintak javascript diletakkan di antara ,H04! ,al ini disebabkan javascript bersi at interpreter! Penempatan posisi ini juga dapat mengatur posisi aplikasi javascript pada tubuh *ebsite yang kita buat dengan mengaturnya melalui table agar preposisi javascript dapat dengan mudah diletakkan! ContohF3!&!html

Team Training SMK-TI

-)$$

NILAI* VARIABLE &AN K+NSTANTA

Lilai 4alam Javascript -ariable Konstanta@Literal

Nilai &alam Ja!a"#ri$t

Lilai merupakan besaran yang digunakan untuk melakukan perhitungan, menulis dan sebagainya! 4i dalam javascript terdapat beberapa macam nilai, yaitu $! String String adalah karakter yang bisa berupa huru , kata symbol atau angka! String ditulis diantara tanda kutip ganda '=( atau tanda kutip tunggal ' M (! Jika terdapat string lain gunakan tanda kutip tunggal! misal : <&'()* '+,- = age on focus =windows.status= . ketikkan umur anda . > name = firdaus .alikomeini/ adnan sedang untuk menulis tanda kutip ganda dalam string digunakan tanda 'N =(! "isalnya : name = &nstitut 0*eknologi 0 1andung 3! Lumerik Team Training SMK-TI -)$3

Berupa bilangan atau angka yang mempunyai si at matematis 'bisa dijumlah, tambah dsb(, misalnya : $D, G, $%9& 8! Boolean Lilai yang hanya memiliki dua nilai yaitu true 'benar( dan false 'salah( 9! Lull 0dalah nilai yang tidak memiliki nilai sama sekali ! Lull tidak sama denagn karakter kosong atau nilai nol ' K (!

Variabel
At ran $enamaan !ariable Java Script memiliki aturan untuk memberi nama variabel : $! ,arus dia*ali dengan karakter 'huru atau garis ba*ah ( tidak boleh dia*ali dengan angka atau symbol! Contoh : -ariable ContohF8!$ #contoh8!3 3KK$Fangkatan Os/l Keterangan Benar Benar Salah Salah

3! .idak boleh menggunakan spasi , untuk memisahkan antar karakter digunakan garis ba*ah! Contoh : -ariable Eirdaus adnan EirdausFadnan Keterangan Salah benar

8! Kapitalisasi 'huru besar dan huru kecil( dibedakan pada nama variabel! Contoh : Firdaus tidak sama dengan firdaus

Team Training SMK-TI

-)$8

9! .idak boleh mengunakan reserverd *ord , atau nama yang sama dengan perintah yang ada pada Java Script! Peserved *ord dalam javascript adalah : 0bstract, Boolean, break, byte, case, catch, char, class, const, continue, de ault, do, double, else, e+tends, alse, inal, inally, loat, or, unction, goto, i , implements, import, in, instace o , int, inter ace, long, native, ne*, null, package, private, protected, public, return, short, static, super, s*itch, synchroniQed, this, thro*, thro*s, transient, true, try, var, void, *hile, *ith! Memberikan nilai $ada !ariabel 1ntuk memberikan nilai pada variabel digunakan sintaks : var namavariabel R nilai 'value( contoh : $! "emberikan nilai string untuk variable : var nama R = irdaus adnanB 3! "emberi nilai numerik untuk variable : var angka R $KKK!$3 8! "emberi nilai Boolean untuk variable : var + R true var y R alse 9! "emberi nilai null untuk variable : var nama R null

K'n"tanta,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! 0ntara variable dan konstanta dapat disatukan! Perhatikan contoh di ba*ah ini : total R subtotal + $KK Lilai $KK di atas adalah konstanta@literal sedangkan total dan subtotal merupakan varible! Beberapa jenis literal pada Java Script : Team Training SMK-TI -)$9

$! Literal #nteger, yaitu suatu bilangan bulat tanpa pecahan Literal 3KK$ DK3 088 3! Literal Eloating Point, yaitu suatu bilangan pecahan atau berpangkat! Literal 8!$9 3H8 )3H8 3H)8 8! Literal String, adalah suatu karakter yang berisi huru , angka atau symbol)simbol lainnya! Literal string harus dia*ali dan diakhiri dengan tanda kutip ganda ' = ( atau tunggal ' M (! Literal = irdaus adnanB = irdaus adnanS 9! Literal Boolean, 'salah( contohF8!$!html Keterangan Benar Salah 0rti 8,$9 3 + $K 8 )3 + $K8 3 + $K8 Bilangan 4esimal 6ctal ,eksadesimal

adalah suatu litral yang memiliki dua buah nilai yaitu true 'benar( dan false

Team Training SMK-TI

-)$&

contoh di atas menjelaskan bah*a variable yang diidenti ikasikan dengan nama menyatakan sebuah string yang valus)nya adalah irdaus! Ketika kita ingin memanggil value tersebut kedalam bro*ser maka kita harus mencantumkan nama variable yang telah kita de inisikan di atas yaitu nama kedalam sintak pernyataan atau sintak yang digunakan untuk menampilkan suatu kalimat yaitu document.write dan menambahkan tanda =+B dan tanda kutip dua '=( di samping variable tersebut! ContohF8!3!html

Sintak prompt di atas merupakan

script dalam javascript untuk

memerintahkan user untuk memasukkan input ke dalam bo+ 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! ContohF8!8!html

Team Training SMK-TI

-)$<

+PERAT+R
Pengantar 6perator 6perator 1nary 6perator Binary 6perator Penugasan Perbandingan

Pengantar +$erat'r
6perator 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,

Team Training SMK-TI

-)$D

diantaranya adalah operator tambah '+(, kurang ')(, kali '+(, bagi '@( , persen 'T( dan sebagainya! 4ata)data yang dimanipulasi oleh operator untuk memberikan suatu hasil yang diinginkan disebut juga dengan operan. Sebagai contoh : U+8R< Keterangan : U dan 8 adalah operan + adalah operator < adalah hasil 4alam modul ini kita akan mempelajari jenis)jenis operator javascript, di antaranya adalah : $! 6perator 1nary 3! 6perator Binary 8! 6perator penugasan 9! 6perator penugasan &! 6perator perbandingan <! 6perator logical D! 6perator String

+$erat'r %nar6perator unary adalah operator yang hanya mengolah satu nilai atau satu operan saja! 6perator unary dalam javascript terbagi atas tiga macam, yaitu : $! #ncrement 'penambahan(, dengan symbol ++ 3! 4ecrement 'pengurangan(, dengan symbol V 8! Legasi 'la*an(, dengan symbol V 1ntuk lebih jelasnya, kita akan membahas satu)persatu beserta contohnya! 9!3!$ #ncrement 'penambahan( 6perator ini ber ungsi untuk menambahkan nilai operan 'variable( sebenar satu!

Team Training SMK-TI

-)$G

Contoh : a! total R subtotal++ 4ari contoh di atas kita dapat mende inisikan bah*a variable su2total dimasukkan ke variable total terlebih dahulu, kemudian nilai variable su2total ditambah dengan angka satu! b! total R++ subtotal 4ari contoh di atas kita dapat mende inisikan bah*a variable su2total ditambah terlebih dahulu, lalu nilai variable su2total di masukkan ke variable total! 9!3!3 4ecrement 'pengurangan( 6perator ini akan mengurangi nilai operan 'variable( sebesar satu! Contoh : a! total R subtotal)) 0rtinya variable su2total dimasukkan ke variable total terlebih dahulu kemudian nilai variable su2total dikurangi Satu b! total R ))subtotal 0rtinya nilai variable su2total dikurangi satu terlebih dahulu, kemudian nilai variable su2total dimasukkan ke variable total! 9!3!8 Legasi 'la*an( 6perator ini akan membalikkan nilai operan! Jika operan bernilai positi , operator negasi akan menjadikannya negati dan sebaliknya! Perhatikan contoh soal berikut : ContohF9!$!html

Team Training SMK-TI

-)$%

+$erat'r Binar6perator Binary adalah operator yang mengolah dua nilai atau dua operan! Perhatikan contoh di ba*ah ini : ++y R& .anda + adalah operator binary, karena tanda tersebut mengolah dua buah operan yakni + dan y! Semua operator binary pada javascript adalah operator aritmatika! Perhatikan table di ba*ah ini : 6perator + ) + @ Eungsi Penjumlahan Pengurangan Perkalian Perkalian Contoh var + R 3 + 8 ; nilai + R & var + R 8 V 3; nilai +R$ var + R 3C8; nilai + R < var + R 8@3; nilai + R $!&

Team Training SMK-TI

-)3K

"odulus

var + R 8T3; nilai + R $

Perhatikan contoh di ba*ah ini ContohF9!3!html

+$erat'r Pen ga"an

6perator penugasan adalah operator yang memberi nilai kepada variable! Jenis operator yang umum digunakan adalah tanda sama dengan 'R(! Contoh : var nilai = 34 nilai = matematika Pada contoh di atas, variable nilai diberi nilai 'value( $K! Pada baris kedua, variable nilai diberi nilai 'value( yang terdapat pada variable matematika! Jenis operator lainnya merupakan singkatan dari operator binary! Perhatikan contoh di ba*ah ini : nilai 5= matematika contoh di atas sama artinya dengan : nilai =nilai 5 matematika Beberapa jenis operator penugasan yang terdapat pada javascript adalah : 6perator R +R Contoh nilai R $K nilai +R matematika 0rti value nilai R $K nilai R nilai + matematika -)3$

Team Training SMK-TI

)R CR @R TR

nilai )R matematika nilai CR matematika nilai @R matematika nilai TRmatematika

nilai R nilai V matematika nilai R nilai C matematika nilai R nilai @ matematika nilai R nilai T matematika

Perhatikan contohF9!8!html berikut ini :

Perbandingan
6perator 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 'RR(! Contohnya : Biaya RR $KK

Team Training SMK-TI

-)33

Jika nilai dari variable biaya di atas besarnya sama dengan $KK, maka pernyataan di atas akan memberikan hasil true 'benar(! .etapi jika nilai dari variable biaya di atas besarnya tidak sama dengan $KK, maka pernyataan di atas akan memberikan hasil alse 'salah(! 6perator 0rti RR Sama dengan ?R .idak sama dengan A Lebih besar dari > Kurang dari AR Lebih besar atau sama >R Kurang dari atau sama Perhatikan contohF9!9!html di ba*ah ini : Contoh .otalRR$K .otal ?R$KK .otalA$KK .otal>$KK .otalAR$KK .otal>R$KK

+PERAT+R .lan/ tan0 &AN EKSPRESI

6perator Logikal 6perator string Hkspresi 4e inisi Hkspresi Hkspresi Perbandingan 0lert

Team Training SMK-TI

-)38

+$erat'r L'gikal
Pada dasarnya 6perator logical hampir sama dengan operator

perbandingan yang ber ungsi untuk membandingkan dua buah nilai untuk memberikan hasil beanr atau salah! Perbedaannya adalah operator logical ber ungsi mem2andingkan per2andingan ! Perhatikan contoh di ba*ah ini : ( total > 34! 66 (2ia a < 344! Pada contoh di atas digunakan operator WW 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 : 6perato r WW XX ? 0rti 0L4 'dan( 6P 'atau( L6. 'bukan( keterangan Kedua nilai yang dibandingkan harus sesuai dengan kriteria Salah satu nilai yang dibandingkan harus sesuai dengan kriteria Lilai yang dibandingkan merupakan kebalikannya!

4ari contoh di atas yaitu 'total A $K( WW 'biaya > $KK( dapat kita perkirakan bah*a : Jika total R $3 'benar( dan biaya R %G 'benar(, maka hasilnya adalah 2enar Jika total R G 'salah( dan biaya R %G 'benar(, maka hasilnya adalah salah Jika total R G 'salah( dan biaya R $K3 'salah(, maka hasilnya adalah salah

Jika operator contoh di atas kita ganti dengan tanda ' XX ( maka dapat kita ambil perkiraan yaitu : Jika total R $3 'benar( dan biaya R %G 'benar(, maka hasilnya adalah 2enar Jika total R G 'salah( dan biaya R %G 'benar(, maka hasilnya adalah 2enar Jika total R $3 'benar( dan biaya R $K3 'salah(, maka hasilnya adalah 2enar Jika total R G 'salah( dan biaya R $K3 'salah(, maka hasilnya adalah salah

Team Training SMK-TI

-)39

Jika contoh di atas dirubah menjadi 7((total == 344!8 maka dapat kita perkirakan hasilnya sebagai barikut : Jika totalR$KK 'benar(, maka ekspresi di atas salah Jika totalR%G 'salah(, maka ekspresi di atas benar 1ntuk lebih jelasnya, perhatikan contohF&!$!html di ba*ah ini :

+$erat'r String
6perator 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! ,anya saja, operator)operator tersebut digunakan untuk memanipulasi string! Perhatikan contoh di ba*ah ini : var nama = firdaus 5 alikomeini5adnan

Team Training SMK-TI

-)3&

4ari contoh di atas maka dapat diambil kesimpulan bah*a variable pesan adalah string = irdaus alikomeini adnanB! Beberapa hal yang perlu diperhatikan adalah : $!String tidak bisa dibandingkan Jika kita tidak bisa membandingkan antara =rotiB RR =kejuB atau =rotiBABkejuB! "aka hasil keduanya adalah salah atau alse! 3! Javascript mengubah string angka menjadi numerik 0pabila string berisi angka, javascript akan mengubahnya menjadi niali numerik, sehingga dapat dibandingkan! Perhatikan contoh di ba*ah ini : 344 > 34 Javascript akan mengubah =$KKB menjadi $KK dan mengubah =$KB menjadi $K! Karena $KK lebih besar dari $K, maka ekspresi di atas bernilai true atau benar! 8!String gabungan tidak diubah 7abungan yang dimaksud adalah gabungan antara numerik dengan kalimat! "isalkan string tersebut berupa angkatan94438 contoh tersebut tidak akan diubah menjadi nilai numerik! Perhatikan table berikut yang menjadi contoh penerapan operator string pada javascript : 6perator RR A + 0rti "embandingkan string Lebih besar dari Penjumlahan Contoh =rotiB RR =kejuB =$KKB A =$KB namaFa*al R = irdausB namaFakhir R =adnanB +R Penjumlahan ganda Lama R namaFa*al + namaFakhir nama R = irdausB nama+RBadnanB 1ntuk lebih lengkapnya, perhatikan contohF&!3!html di ba*ah ini

Team Training SMK-TI

-)3<

EKSPRESI &e1ini"i Ek"$re"i

Hkspresi 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 = 344 var total = nilai3 5 nilai9

Ek"$re"i $erbandingan

Team Training SMK-TI

-)3D

Pada javascript, tidak ada ketentuan tertentu untuk penulisan ekspresi! .etapi ada satu pengecualian yaitu pada ekspresi perbandingan! Sintak untuk ekspresi perbandingan ini adalah sebagai berikut : (kondisi) ? nilaibenar : nilaisalah 4ari sintak di atas, jika kondisi benar maka akan diberi nilai yang terdapat pada variable nilai2enar! Sedangkan jika kondisi salah maka akan memberikan nilai yang terdapat pada variable nilaisalah! Perhatikan contoh di ba*ah ini : Jika irdaus ingin mendapatkan mobil maka syaratnya ia harus mendapatkan nilai %K, tetapi jika ternyata nilai yang ia dapat di ba*ah %K maka ayahnya akan memberinya sebuah sepeda! Kondisi seperti ini dapat kita terjemahkan ke dalam kalimat : :adiah = (nilai > ;4! < mo2il = sepeda Jika kita terjemahkan ke dalam bahasa javascript 'contohF&!8!html( adalah sebagai berikut :

Perhatikan contohF&!9!html di ba*ah ini :

Team Training SMK-TI

-)3G

Alert
0lert dalam javascript merupakan script pemberi pesan kepada user ketika user memasukkan input ke dalam kolom data, ketika user sedang menekan tombol yang ada di bro*ser atau peringatan kepada user kerika user salah memasukkan input ke dalam kolom data di mana input tersebut perla*ana dengan keinginan script yang ada! Perhatikan contohF&!&!html :

Team Training SMK-TI

-)3%

PERN2ATAAN
Pengantar Pernyataan Pernyataan i Jelse Pernyataan *hile Pernyataan or Team Training SMK-TI -)8K

 Pernyataan break

Pengantar Pern-ataan

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 % bagian yang akan kita bahas satu persatu! Kesembilan bagian tersebut adalah : $! Pernyataan i !!else 3! Pernyataan *hile 8! Pernyataan or 9! Pernyataan break &! Pernyataan continue <! Pernyataan or!!in D! pernyataan *ith G! Pernyataan var %! Pernyataan komentar 4alam modul ini kita akan membahas pernyataan if..else sampai for , sedangkan pernyataan lainnya akan dibahas pada modul selanjutnya!

Pern-ataan i1333el"e
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 i JJelse, I1 .k'ndi"i0 4ek"$re"i 56 el"e .k'ndi"i0 4ek"$re"i 76 Keterangan :

Team Training SMK-TI

-)8$

Kondisi : kondisi yang dibandingkan Hkspresi)$ : ekspresi)ekspresi yang akan dijalankan jika kondisi memenuhi syarat! Hkspresi)3 : ekspresi)ekspresi yang akan dijalankan jika kondisi tidak memenuhi syarat!

Contoh : 0gar 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 : &f (nilai >;4! (hadiah = mo2il! else (hadiah=sepeda! keterangan : Baris i 'nilai A %K( 'hadiah R =mobilB( Hlse 'hadiahR =sepedaB( Keterangan Jika isi variable nilai bernilai lebih besar dari %K maka variable hadiah akan diberikan nilai =mo2il Jika isi variable nilai bernilai tidak lebih besar dari %K maka variable hadiah akan diberikan nilai =sepeda

Perhatikan contohF<!$!html di ba*ah ini :

Team Training SMK-TI

-)83

Perhatikan contohF<!3!html di ba*ah ini :

Team Training SMK-TI

-)88

4ari contoh di atas maka bro*ser akan meminta masukan dari user yang di jadikannya sebagai variable yang akan di cocokkan pada sintak pernyataan yang telah dibuat pada te+t editor!

Pern-ataan 8hile
Pernyataan bernilai benar! Sintak dari pernyataan *hile adalah sebagai berikut : >hile (kondisi! (ekspresi! Keterangan : Kondisi : kondisi yang di bandingkan Hkspresi : ekspresi)ekspresi yang akan dijalankan jika kondisi memenuhi syarat! Contohnya : Jika seorang nasabah bank ingin menabung si suatu bank dengan dana a*al Pp!$KK!$KK,)! 4ia tidak akan berhenti menabung sampai kas saldonya mencapai satu juta! "aka jika dituangkan pada suatu sintak javascript, sebagai berikut : var saldo = 344444 while (saldo <=3444444! (saldo5=344444! 4ari sintak di atas maka dapat di uraikan sebagai berikut : var saldo R $KKKKK ; aritnya adalah variable saldo di beri nilai a*al $KKK *hile 'saldo >R $KKKKKK(; artinya adalah memeriksa kondisi apakah isi variable saldo kurang dari atau sama dengan $KKKKKK! Jika benar, maka pernyataan berikutnya akan dijalankan! *hile digunakan untuk melakukan suatu loop atau

menjalankan ekspresi berulang)ulang selama '*hile( kondisi yang ditentukan

Team Training SMK-TI

-)89

'saldo +R$KKK(; artinya sama dengan saldoR saldo+$KKK! -ariable saldo yang baru diisi dengan variable uang $KKK maka akan ditambah dengan $KKK sehingga jumlahnya kni menjadi 3KKK, dan begitu seterusnya!

Perhatikan contohF<!8!html :

4i dalam bro*ser akan terlihat seperti di ba*ah ini :

Pern-ataan 1'r
Pernyataan or ber ungsi melakukan suatu loop atau menjalankan ekspresi berulang)ulang untuk kondisi yang telah di tentukan sebelumnya! Pernyataan or jika dilihat hampir sama dengan pernyataan *hile, yang berbeda adalah Team Training SMK-TI -)8&

pernyataan or menyertakan kondisi a*al dan kondisi akhir serta besarnya kenaikan! Sintak pernyataan or adalah : for (kondisi#awal" kondisi #akhir" kenaikan! (ekspresi! Keterangan : kondisi#awal : kondisi a*al yang memenuhi untuk loop dimulai kondisi#akhir = kondisi akhir yang memenuhi untuk loop diakhiri kenaikan : besarnya kenaikan nilai variable untuk setiap iterasi loop

Perhatikan contohF<!9!html di ba*ah ini :

Pern-ataan Break
Pernyataan 'statement( break ber ungsi sebagai menghentikan ekspresi loop yang sedang dijalankan, dan melanjutkan ke baris skrip di ba*ah 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 contohF<!&!html di ba*ah ini :

Team Training SMK-TI

-)8<

Team Training SMK-TI

-)8D

PERN2ATAAN .lan/ tan0 &AN (%NGSI

Pernyataan Continue Pernyataan orJin Pernyataan *ith Pernyataan var Pernyataan Komentar Eungsi Pengertian Eungsi Pembuatan Eungsi 0turan pembuatan Javascript "emanggil Eungsi javascript

Pern-ataan C'ntin e
Pernyataan continue ber ungsi untuk menghentikan eksekusi loop! .etapi hal ini tidak menyebabkan keluar dari loop tetapi hanya melompati satu buah iterasi dan melanjutkan iterasi loop yang selanjutnya! Perhatikan contohFD!$!html di ba*ah ini :

Team Training SMK-TI

-)8G

Pern-ataan 1'r9in
Pernyataan orJin adalah pernyataan yang melakukan loop'pengulangan( di dalam sebuah objek! Sintak dari pernyataan orJin adalah : for (counter in nama#o2ject! ?ekspresi@ Keterangan : Counter : jumlah counter di dalam object 'jumlah property( LamaFobject : objek yang ingin dilakukan loop Hkspresi : ekspresi yang dijalankan selama loop

Perhatikan contohFD!3!html di ba*ah ini :

Pada contoh di atas, objeknya adalah buah sedangkan property untuk objek buah adalah *arna, tipe dan rasa! Setiap property memiliki nomor inde+ yang dimulai dari K! Jadi pada objek buah di atas memiliki counter sebagai berikut :

Team Training SMK-TI

-)8%

buah YKZ R buah!*arna buah Y$Z R buah!besar buahY3Z R buah!rasa

Pern-ataan 8ith
Seperti halnya dengan pernyataan orJin yang di atas, dalam pernyataan ini ada sedikit perbedaan yaitu pernyataan *ith ber ungsi untuk memberi tahu objek yang sedang kita gunakan! Setiap re erensi variable di dalam pernyataan berikutnya akan merujuk kepada objek tersebut! Sintak pernyataan *ith sebagai berikut : with (nama#o2ject! (ekspresi! Keterangan : namaFobject : nama objek yang ibgin di jadikan acuan pernyataan ekspresi : ekspresi yang terdapat di dalam objek

contoh : *ith 'buah( [ *arna R =merahB; ukuran R =besarB; rasa R =manisB; \ Sintak lengkapnya, anda cukup memodi ikasi contoh seperti di atas

'contohFD!3!html(!

Pern-ataan !ar
Pernyataan var ber ungsi untuk menugaskan suatu nilai ke dalam variable! Sitak dari statement 'pernyataan( var adalah : var nama#varia2le = value contoh : Team Training SMK-TI -)9K

var nama R = irdausB var a R & 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 : namaRB irdausB

Pern-ataan k'mentar
Pernyataan komentar ber ungsi untuk menerangkan atau memberi keterangan pada setiap barisnya yang ada di dalam sintak ,."L! 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 bro*ser dan hanya bisa terlihat di source)nya saja, karena bro*ser tidak ikut memproses sintak komentar tersebut! Pada modul sebelumnya, sebenarnya kita telah mempelajari dan membahasnya! Sintaknya ada dua yaitu : $! //komentar 3! /A komentar komentar A/

(%NGSI

Pengertian ( ng"i
Eungsi adalah sekumpulan kode)kode javascript yang jika dijalankan akan menghasilkan atau mengerjakan suatu tugas tertentu! Eungsi dapat di sebut sebagai modul atau subprogram dari seluruh skrip atau program javascript!

Team Training SMK-TI

-)9$

Pemb atan ( ng"i

4ilihat dari segi pembuatan ungsi, maka sintak dasarnya adalah : function nama#fungsi (parameter! ? BB.. ekspresi ekspresi JJJ \ 1ntuk memposisikan sintak tersbut, maka sintak tersebut harus diletakkan di : <script language=javascript> function nama#fungsi(! ? CCC isi fungsi CCC @ </script>

At ran Pemb atan ( ng"i

4itinjau dari segi pembuatannya, maka ungsi memiliki beberapa aturan pembuatan yang akan di jabarkan di ba*ah ini : $! 4ia*ali dengan kata function 3! Lama fungsi bebas, asalkan dapat menjelaskan ungsi dari fungsi tersebut! Iang terenting di sini adalah fungsi harus diikuti oleh tanda kurung ='(B yang digunakan sebagai tempat parameter! 8! 4i dalam tanda kurung setelah kata function8 dapat diletakkan parameter ungsi! 1ntuk lebih jelas lagi perhatikan sintak berikut : unction jumlah 'a,b( [ var c R a+b; document!*rite 'Q( \

Team Training SMK-TI

-)93

Parameter di dalam ungsi bisa digunakan bisa juga tidak digunakan! Parameter merupakan variable atau nilai yang akan diolah ekspresi) ekspresi yang terdapat di dalam ungsi tersebut! 9! #si ungsi harus di letakkan di dalam tanda kurung kura*al! 1ntuk lebih jelas lagi, perhatikan contohFD!8!html :

Perhatikan contoh di atas! .ampak bah*a dengan menuliskan garis'( berarti kita telah memanggil sintak =>hrAB yang di nyatakan di dalam sintak document!*rite! #ni disebabkan bah*a kata garis merupakan nama sebuah ungsi yang bisa dipanggil pada posisi manapun selama nama ungsi tersebut masih berada di antara sintak javascript! Pada contoh di atas, tampak bah*a isi parameter masih kosong! 4i ba*ah ini ada script javascript yang memberikan nilai parameter pada ungsi! Perhatikan contohFD!9!html di ba*ah ini :

Team Training SMK-TI

-)98

Memanggil ( ng"i /a!a"#ri$t

1ntuk menampilkan ungsi yang telah di buat, maka ungsi tersebut harus dipanggil terlebih dahulu! 0da beberapa cara pemanggilan ungsi tersebut, yaitu : $! Eungsi tersebut dipanggil dalam skrip javascript 3! Eungsi dipanggil dari dalam ungsi itu sendiri 8! Eungsi dipanggil dari dalam ungsi yang lain! 4i ba*ah ini akan dijelaskan secara lebih rinci mengenai metode pemanggilan ungsi javascript tersebut : a! "emanggil ungsi dari dalam skrip javascript "etode ini terbagi dua : $! Eungsi dipanggil dari skrip yang terletak pada bagian >headA Perhatikan contoh di ba*ah ini :

Team Training SMK-TI

-)99

3! Eungsi dinpanggil dari skrip javascript yang terletak pada bagian >bodyA Perhatikan contohFD!<!html berikut :

Team Training SMK-TI

-)9&

(%NGSI .lan/ tan0

"emanggil Eungsi 4ari 4alam Eungsi "emanggil Eungsi 4ari Eungsi Lain Eungsi Built)in

Memanggil ( ng"i &ari &alam ( ng"i

Eungsi ini disebut juga dengan ungsi rekursi Sintaknya adalah : <script language =javascript> function nama#function(! ?B nama#fungsi(! B @ </script> Perhatikan contohFG!$!html di ba*ah ini : Contoh yang paling mudah untuk ditemukan adalah contoh menghitung nilai actorial! Perhatikan contohFG!$!html berikut : yaitu ungsi berulang!

"aksudnya adalah ungsi tersebut dipanggil dari dalam ungsi itu sendiri!

Team Training SMK-TI

-)9<

4ari script di atas, dapat dilihat bah*a rumus yang telah ada harus dipanggil kembali!

Memanggil ( ng"i dari ( ng"i Lainn-a

4alam membuat suatu ungsi, kita juga dapat memanggil ungsi lain yang telah kita baut sebelumnya, dengan kata lain kita membuat suatu ungsi terlebih dahulu kemudian membuat ungsi lainnya yang memanggil ungsi sebelumnya! Sintaknya adalah : <script language=javascript> function nama#fungsi3 (! ? B @ function nama#fungsi9 (! ? B nama#fungsi3(! @ </script>

Team Training SMK-TI

-)9D

1ntuk lebih jelas lagi! perhatikan contohFG!3!html di ba*ah ini :

4ari contoh di atas, tanpak bah*a ada dua jenis ungsi yang berbeda, ungsi pertama menyatakan garis, dan ungsi kedua menyatakan nilai actorial! Kondisi di atas, ungsi gasris dapat dipanggil di dalam ungsi aktorial sehingga selain menampilkan nilai actorial, maka akan tampil juga ungsi garis di antara ungsi actorial!

( ng"i B ilt-in

4i dalam javascript juga menyediakan beberapa ungsi built)in yang dapat langsung digunakan! Eungsi) ungsi tersebut adalah : $! parse#nt'(

Team Training SMK-TI

-)9G

3! parseEloat'( 8! isLaL'( 9! eval'( &! escape'( <! unescape'( 1ntuk lebih jelasnya lagi, perhatikan penjabaran dari tiap ungsi di atas yang ada di ba*ah ini : $! Eungsi parse#nt'( Eungsi parse#nt'( berguna untuk mengubah dan mengkonversi nilai string menjadi nilai integer dengan menggunakan basis tertentu! "isalnya : String =$KK!$3B jika diubah menjadi integer dengan basis sepuluh maka hasilnya adalah $KK karena nilai integer saja yang akan dikonversi! Sintaknya adalah : (arse&nt (string8 2asis! Perhatikan contohFG!8!html di ba*ah ini :

Team Training SMK-TI

-)9%

3 Eungsi parseEloat'( Eungsi dari ungsi parseEloat'( adalah untuk mengubah atau mengkonversi nilai string menjadi nilai loating)point! Lilai loating)point adalah bilangan pecahan atau pangkat(! Sintak ungsi tersebut adalah : (arseDloat (string! Perhatikan contohFG!9!html di ba*ah ini :

8! Eungsi isLaL Eungsi isLaL'( yang merupakan singkatan dari is 'ot a 'um2er digunakan untuk menentukan apakah suatu nilai berupa bilangan numerik atau bukan bilangan numerik! 4engan kata lain bah*a : ) Jika nilai tersebut bukan bilangan numeric, maka menghasilkan nilai true 'benar(! ungsi isLaL akan

) Jika nilai tersebut bilangan numeric, maka ungsi isLaL akan menghasilkan nilai alse 'salah(! Sintak dari ungsi tersebut adalah : &s'a' (value! Perhatikan contohFG!&!html di ba*ah ini :

Team Training SMK-TI

-)&K

9! Eungsi eval'( Eungsi eval'( digunakan untuk menghitung suatu ekspresi aritmatika! Sintaknya adalah -val (ekspresi! Perhatikan contohFG!<!html di ba*ah ini :

Ketika halaman ini akan tampil , maka akan tampak kolom tempat memasukkan ekspresi artimatika! Jika kita masukkan suatu ekspresi aritmatika seperti :

Team Training SMK-TI

-)&$

0ngka $K di atas merupakan variable yang akan di tampilkan oleh sintak pernyataan, maka akan tampak hasilnya seperti di ba*ah ini :

Team Training SMK-TI

-)&3

EVENT
Pengantar Hvent "enjalankan Hvent Beberapa 0plikasi Hvent

Pengantar E!ent
Hvent adalah suatu aksi yang dilakukan oleh pemakai yang memicu jalannya kode JavaScript anda!sebagian besar event dipicu oleh pemakai yang memanipulasi halaman *eb pada program bro*sernya , seperti menggeser pointer keatas link untuk memicu menampilkan alamat link pada baris status! "acam)macam event : $! Click , event ini terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat orm! 3! Eocus, event ini terjadi jika pemakai mengklik atau meletakkan pointer mouse pada elemen orm seperti ield teks , kotak cek dan sebagainya! 8! Blur , event ini terjadi jika pemakai menyingkirkan ocus 'pointer mouse( dari elemen orm yang sebelumnya diberi ocus! 9! Change , event ini terjadi jika pemakai mengubah input atau masukan pada elemen orm! &! "ouse6ver, terjadi jika pemakai meletakkan mouse di atas sebuah link ! <! Select, event ini terjadi jika pemakai memilih teks pada elemen orm , seperti menggeser pointer mouse pada teks sambil menahan tombol kiri mouse! D! Submit, event ini terjadi bila mengklik tombol =submitB

Men/alankan E!ent
E!ent )andler Hvent ,andler merupakan kode)kode javascript yang akan dijalankan apabila event tersebut dipicu!

Team Training SMK-TI

-)&8

1ntuk menjalankan event tersebut maka digunakan sintaks : 6n 'ama-vent R = kode JavaScript B Contoh : En,ouseEver =fungsi#data (a82! Memanggil E!ent )andler "etode pemanggilan event handler dapat menggunakan dua metode, yaitu : $! "emanggil melalui ungsi Hvent ,andler dapat dijalankan dengan cara memanggil ungsi! Sintaknya adalah : En'ama-vent = namafungsi (parameter! 1ntuk lebih jelasnya lagi, perhatikan contohF%!$!html di ba*ah ini :

3! "emanggil dengan menjalankan kode javascript secara langsung Hvent ,andler dapat dijalankan dengan cara membuat kode javascript secara langsung di te+t editor! Sintaknya adalah : En'ama-vent = kode javascript Perhatikan contohF%!3!html :

Team Training SMK-TI

-)&9

4ari contoh gambar di atas dapat di tarik beberapa kesimpulan, bah*a : Jika link tersebut di klik yaitu kata pencet, maka akan dijalankan script javascript =document!*rite ']>h9A]+]selamat datang]+]>@h9A](^ yang akan menampilkan teks selamat datang pada halaman bro*ser tersebut!

Bebera$a a$klika"i E!ent

$! contohF%!8!html mengenai event Click:

Team Training SMK-TI

-)&&

Contoh di atas memberikan gambaran kerja sebuah perhitungan sederhana dengan menggunakan javascript yang menjadi gabungan antara ungsi dan event! 4i ba*ah ini adalah contoh aplikasi orm yang interakti dengan user ketika memasukkan input ke dalamnya : Perhatikan contohF%!9!html, contoh ini merupakan contoh event ocus :

.ampilan di bro*sernya adalah :

Team Training SMK-TI

-)&<

Perhatikan bagian yang dikenai oleh tanda panah di atas, bagian tersebut merupakan ciri khas dari event ocus! ContohF%!&!html tentang event Submit adalah :

.ampilan di bro*sernya adalah :

Team Training SMK-TI

-)&D

.ampilan yang dikenai oleh tanda panah, merupakan cirri khas dari event onSubmit!

Team Training SMK-TI

-)&G

ANEKA APLIKASI JAVASCRIPT

4i ba*ah ini akan di sajikan beberapa aplikasi javascript yang dinamis sehingga dapat membuat tampilan *eb site kita menjadi lebih indah dan interakti ! $! 0plikasi Jam

Team Training SMK-TI

-)&%

4ari script di atas, akan membuat suatu tampillan jam yang dinamis sesuai dengan pergerakan jam yang ada di komputer kita sendiri! .ampilan di brrosernya adalah :

3 4i ba*ah ini merupakan contoh link ke beberapa *eb site terkenal di dunia! 4engan memilih option)nya, kita sudak langsung membuka *ebsite tersebut tanpa Team Training SMK-TI -)<K

harus merubah bentuk mouse menjadi seperti tangan! Perhatikan contoh di ba*ah ini

.ampilannya di bro*ser adalah :

Team Training SMK-TI

-)<$

8! "anipulasi kalkulator

Team Training SMK-TI

-)<3

Team Training SMK-TI

-)<8

Team Training SMK-TI

-)<9

Team Training SMK-TI

-)<&