dasar pemrograman javascript
DESCRIPTION
Tutorial Dasar Pemrograman JavascriptTRANSCRIPT
MODUL WEB DESAIN 3 DASAR PEMROGRAMAN JAVASCRIPT
PEMBIMBING : DEKA M WILDAN
SMK BHAKTI NUSANTARA BOJA Website : www.smkbhinus.net
Email : [email protected]
DASAR PEMROGRAMAN JAVASCRIPT 1.1 Apakah JavaScript itu?
JavaScript merupakan sebuah bahasa scripting yang dinamis yang berarti tipe data pada Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang lain sesuai dengan kebutuhan. JavaScript dikembangkan oleh Netscape. Dengan JavaScript kita dapat dengan mudah membuat halaman web yang interaktif. Pemrograman javascript tidak sama dengan pemrograman java, karena javascript tidak membutuhkan compiler khusus dan langsung bisa dieksekusi melalui web browser seperti mozilla firefox, internet explorer dan browser lainnya. Untuk menjalankan javascript diperlukan javascript‐enabled pada web browser yang support javascript. 1.2 Mencantumkan JavaScript pada halaman HTML
Dibawah ini contoh penulisan kode javascript yang ditulis langsung pada halaman html yang dibuat dari aplikasi notepad:
<html> <body> <br> Ini halaman HTML normal. <br> <script language="JavaScript"> document.write("Hallo Saya bersama Javascript !") </script> <br> Ini HTML lagi. </body> </html>
Keterangan :
Perintah “document.write(“Hallo Saya bersama Javascript!”)” adalah untuk menulis sebuah dokumen yang berkarakter “Hallo Saya bersama Javascript!” dan langsung ditampilkan pada halaman web.
Isi script pada javascript harus terletak dibawah kode <script language=”javascript”> dan diatas kode </script>. Contoh pilihan lainnya untuk membuat tag pembuka untuk pengisian kode javascript adalah <script type=”text/javascript” src=”file_javascript.js”> ISI KODE JAVASCRIPT</script>. Kemudian Simpan dengan nama misal “javascript.html” tanpa tanda kutip save as type: all files. Kemudian pilih lokasi penyimpanan, direkomendasikan di simpan dalam satu folder website agar file lebih mudah dicari, lalu klik save. Jika kode javascript dimasukkan ke dalam tag html harus berformat atau berekstensi *.html
Dan hasilnya akan terlihat seperti gambar dibawah ini :
Tulisan yang terblok warna biru dengan kata “Hallo Saya bersama Javascript!” adalah contoh dokumen karakter yang dibuat dengan perintah dari kode javascript. Segala sesuatu yang berada di antara tag <script> dan </script> di‐interpretasi‐kan sebagai kode JavaScript.
1.3 Non‐JavaScript browser Apa yang akan terjadi jika kita menggunakan browser yang tidak mengerti JavaScript? Non‐ JavaScript browser tidak mengenal tag <script>. Dia akan mengabaikan tag itu dan mengeluarkan seluruh kode selayaknya text biasa . Ini berarti bahwa user akan melihat kode JavaScript program kita yang ada di dokumen HTML. Ini tentunya bukan hal yang kita harapkan. Ada cara untuk menyembunyikan baris kode dari browser yang seperti itu, yaitu dengan menggunakan HTML‐comments <!‐‐ ‐‐>. Contoh penggunaan javascript untuk web browser yang tidak mengenal tag javascript adalah sebagai berikut: Buka notepad, lalu ketikkan kode seperti dibawah ini.
<html> <body> <br> Ini dokumen HTML normal <br> <script language="JavaScript"> <!‐‐ hide from old browsers document.write("Yang ini akibat JavaScript!") // ‐‐> </script> <br> Ini HTML lagi. </body> </html>
Kemudian save dengan nama misal “hidejavascript.html” tanpa tanda kutip, save as type=”ALL FILES”, lalu buka file tersebut di web browser. Dan hasilnya akan terlihat seperti di bawah ini : Tanpa HTML‐comment tampilan pada non‐JavaScript browser akan seperti: Ini dokumen HTML normal Ini HTML lagi Tampilan pada non‐JavaScript browser yang menggunakan HTML‐comment akan terlihat seperti ini: Ini dokumen HTML normal Yang Ini akibat JavaScript! Ini HTML lagi
1.4 Event Event dan event handler merupakan hal yang sangat penting dalam pemrograman JavaScript. Event adalah sesuatu yang terjadi karena aksi user. Contohnya jika user men‐click tombol mouse terjadilah event Click. Jika mousepointer bergerak melewati sebuah link terjadilah event MouseOver. Ada banyak event yang terdapat dalam JavaScript yang selengkapnya bisa di lihat pada JavaScript Reference. Tentunya kita ingin program JavaScript kita bereaksi jika terjadi suatu event tertentu. Ini bisa dilakukan dengan bantuan event‐handlers. Sebagai contoh kita memiliki sebuah tombol yang akan mengeluarkan sebuah popup window jika di‐tekan. Ini berarti bahwa sebuah window popup harus muncul sebagai reaksi dari event Click. Event‐handler yang harus kita gunakan adalah onClick, yang memberitahukan apa yang harus dikerjakan oleh komputer jika event ini terjadi. Contoh di bawah ini menunjukkan bagaimana mudahnya menggunakan event‐handler onClick: <form method=”post” action=””> <input type="button" value="Click me" onClick="alert('Ya')"> </form> Ada beberapa hal baru dalam kode di atas, mari kita lihat satu per satu. Kita telah membuat form dan sebuah tombol (ini merupakan bahasa HTML standard) . Bagian yang baru adalah onClick="alert('Ya')" yang berada di dalam tag <input>. Inilah yang mendefinisikan apa yang akan terjadi jika tombol ditekan. Jadi jika terjadi event Click, komputer akan mengeksekusi alert('Ya'), yang merupakan kode JavaScript (perhatikan bahwa kita tidak menggunakan tag <script> pada kasus ini). alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung kita tentukan string yang akan muncul pada window yang dimaksud. Jadi script kita di atas menampilkan window dengan tulisan 'Ya' saat user men‐click tombol. Satu hal yang mungkin membingungkan: pada perintah document.write() kita menggunakan double quotes (") dan pada alert() kita menggunakan juga single quotes ('), mengapa? Pada contoh ini kita menuliskan onClick="alert('Yo')" – kita gunakan keduanya (double dan single quote) . Jika kita tulis onClick="alert("Yo")" maka komputer akan bingung mana yang menjadi bagian event‐handler onClick dan mana yang bukan. Urutan penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Yo")'. Ada banyak event‐handler lain yang bisa kita gunakan. Selengkapnya lihat pada referensi JavaScript. 1.5 Function Pada dasarnya function merupakan cara untuk menyatukan beberapa perintah. Contoh cara menampilkan teks sebanyak tiga kali, berikut baris kodenya :
Dan hasilnya akan terlihat seperti gambar dibawah ini :
<html> <script language="JavaScript"> <!‐‐ hide function myFunction() { document.write("Selamat datang pada homepage saya!<br>"); document.write("Ini menggunakan JavaScript!<br>"); } myFunction(); myFunction(); myFunction(); // ‐‐> </script> </html>
Penggunaan Function, Variabel, Event, dan Operator Penggunaan function, variabel, event dan operator bisa digabungkan menjadi satu. Perintah fungsi/function bisa dipasang di event dan digabung dengan kode “document.write. Dengan melakukan perintah “OnClick” atau “OnMouseOver” atau perintah event yang lainnya. Contoh yang menggunakan penggabungan, bukalah notepad kemudian tuliskan berikut baris kodenya : <form name="calculasi" method="post" action="java.html"> <p>Nilai X= <input name="x" type="text" size="20"></p> <p>Nilai y= <input name="y" type="text" size="20"></p> <p><input type="submit" name="submit" value="Hitung" onclick="hitung()"> </form> <script language="JavaScript"> function hitung() { var x = document.calculasi.x.value; var y = document.calculasi.y.value; var hasil = x * y; document.write("Hasilnya adalah=" + hasil) } </script> <p> </p> <form name="komen" method="post" action="java.html"> <p>Nama : <input name="nama" type="text" size="35"></p> <p>Email : <input name="email" type="email" size="35"></p> <p><input type="submit" name="submit" value="Cetak" onclick="cetak()"></p> </form> <script language="JavaScript"> function cetak() { var n = document.komen.nama.value; var e = document.komen.email.value; document.write("Nama anda :" + n ) document.write("Email anda :" + e ) } </script> Keterangan : Font yang bergaris tebal saling berhubungan dengan object yang lain. Var adalah pemberian nilai variabel bebas Function hitung() (maksudnya memberikan fungsi dari suatu perintah hitung pada element button pada form). Var x dan Var y (maksudnya memberikan nilai variabel bebas dan x adalah nilai masukkan). Var hasil=x*y (maksudnya hasil perhitungan dari kedua nilai variabel tersebut dan hasil adalah nilai hitung). Document.write (maksudnya mencetak sebuah karakter huruf atau angka).
Daftar Operator assignment
TUGAS !
1. Buatlah sebuah halaman web dengan isi content JavaScript “mencetak hasil penjumlahan dan perkalian dari 3 bilangan”. Dengan Rumus NA=X+Y*A, dengan variabel 1 adalah X, variabel 2 adalah Y, variabel 3 adalah A dan NA adalah variabel hasil !
2. Buatlah sebuah halaman web dengan isi content JavaScript “Mencetak Komentar” apabila form belum terisi terdapat peringatan autentikasi bahwa form tersebut belum terisi !
BIODATA PENULIS
Penulis yang bernama asli Deka Mukhamad Wildan ini menamatkan dirinya dari SMK Bhakti Nusantara Boja Kendal tahun 2011 jurusan Teknik Komputer dan Jaringan (TKJ), yang beralamat di Boja juga. Sekarang ini penulis bekerja di SMK Bhakti Nusantara sebagai staff Tata Usaha sekaligus admin dari website www.smkbhinus.net sejak bulan Agustus 2011, sambil mengajar juga di kelas 1 program keahlian Rekayasa Perangkat Lunak (RPL) tentang pemrograman web. Penulis juga masih aktif sebagai mahasiswa STEKOM Semarang angkatan 2012, mengambil Program studi D3 jurusan Teknik Komputer. Hobi penulis yaitu belajar ilmu komputer apa aja yang penting tentang komputer, lalu Bermain bola Voly, Nonton TV, Facebookan, dan surfing di internet.