Tips dan Trik Java Script 1

Sejarah JavaScript
JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.

Pengertian JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Yang Harus Diperhatikan Dalam Penulisan JavaScript
Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t. Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.

Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.

Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user. Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang – buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan fungsi JavaScript.

Lebih Cepat dan Lebih Hemat
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan. http://gugling.com/pengertian-javascript-dan-sejarahnya.html

Akhirnya datang juga

Saya suda menebak pasti anda akan melihat ke sini juga. dan memang itu pilihan yang tepat. saya akan berikan tiga alasan kongkrit kenapa anda perlu belajar Java Script.

Pertama, Dengan java script home page anda jadi terlihat cerdas.Bisa melakukan respons yang tidak diduga oleh pengunjung. kasarnya memberi “otak pada Home Page.

Kedua, dibandingkan jenis web program (program yang dipakai untuk situs) lainnya, java script menurut saya adalah yang termudah. hei..ini bukan berarti merendahkan. Justru ini adalah keunggulan.

Ketiga, java script kini merupakan web program yang paling populer. Dengan mempelajari ini berarti anda akan masuk ke sebuah komunitas keren, ya nggak?.

Bagaimana sih memulai Javascript?

Nah mungkin kini anda penasaran, bagaimana sih memulai java script? tidak terlalu ‘wah’, anda hanya perlu menyisipkan sedikit kode ke dalah file html anda. berikut ini adalah contoh sederhana dari script java script. masukan ke dalam file html anda.

<script language=”javascript”>
document.write(“<font color=’red’>cuman tulisan merah.</font>”)
</script

Script di atas sederhana dan mungkin akan dapat menebak maksud tiap perintah. Yup, setiap script harus dimulai dengan tag </SCRIPT LANGUAGE=”JavaScript”> dan ditutup dengan tag </SCRIPT>. Di antara kedua tag tersebut kita dapat memasukkan perintah yang diinginkan.

Untuk script diatas, kita hanya menuliskan satu baris perintah, yaitu: document.write(“<FONT COLOR=’RED’>Cuman tulisan warna merah.</FONT>” Perintah diatas dapat kita artikan sebagai ambil “document” (document disini adalah file html kita) kemudian tuliskan (“write”) apa yang ada di dalam kurung.

Sebagai informasi bagi anda, dalam javascript, “document” di atas disebut dengan “object” dan “write” di atas disebut “method” yang dilakukan terhadap object tersebut. Ada banyak method yang dapat dilakukan dan akan kita bahas pada tutorial-tutorial berikutnya.

Script kedua yang akan kita coba adalah menampilkan waktu.

Untuk menampilkan waktu kita dapat menggunakan script berikut:

<script language=”javascript”>
sekarang = new Date();
document.write(“hari ini : “+ sekarang.getDate() + “-“+(sekarang.getMonth()+1)+”-“+sekarang.getFullYear() + “, jam: “+ sekarang.getHours() + “:” + sekarang.getMinutes() + “:” + sekarang.getSeconds())
</script>

Seperti script sebelumnya, script diatas dibuka dengan <SCRIPT LANGUAGE=”JavaSript”> dan ditutup denagn </SCRIPT>. Kemudian di baris kedua diperkenalkan tanda “//” yang berarti bahwa apapun yang berada di sebelah kanan tanda tersebut akan diabaikan dan hanya dianggap sebagai komentar.

Kemudian baris berikutnya adalah perintah Sekarang = new Date(); Disini kita membuat object baru yang diberi nama “Sekarang”. Objek ini kita isi dengan waktu saat halaman ini di-load, yaitu menggunakan perintah new Date(). Kemudian ditutup dengan tanda titik koma (;) untuk mengakhiri sebuah statement.

Pada baris berikutnya kita menuliskan apa yang ada di dalam kurung ke halaman html, menggunakan document.write seperti biasa. Semua yang berada di antara tanda petik (“), misalnya “Hari ini” atau “, jam: ” akan ditampilkan apa adanya, dan yang tidak diberi tanda petik akan diproses.

Disini kita menemui beberapa hal baru, yaitu Sekarang.getDate(), juga Sekarang.getMonth () sampai terakhir Sekarang.getSeconds(). Semua get…() tersebut adalah “method”yang bekerja pada “object” yang bernama Sekarang, dimana getDate() akan memberikan nilai tanggal, getMonth() akan memberikan nilai bulan, dst.

Event Handler, penyusup yang lihai

Event hendler juga bagian dari java script. Tapi enggak seperti yang lain, event handler nggak perlu dimulai dengan tag <SCRIPT LANGUAGE= “javascript”>. Dia menyatu engan kode HTML. Mungkin anda ingat saat mempelajari form. Di sana sekilas kita mengenal tentang onClick ini adalah salah satu event handler, dia adalah java script, tapi berhasil menyusup ke tag HTML.

Sekarang saya akan menerangkan beberapa contoh event handler yang populer. Pertama adalah onMouseOver (perhatikan penggunaan huruf besar). Event handler onMouseOver ini gunanya untuk mengatur apa yang akan terjadi saat mouse kita gerakkan ke atasnya. perhatikan contoh berikut:

<a href=”http://tpundiksha.wordpress.com&#8221;
onMouseOver=”window.status=’Ke Menu Utama’; return true”>Klik di sini</a>

Gerakkan mouse ke link di atas, dan perhatikan apa yang terjadi pada window status (tulisan di bagian paling kiri bawah. Nah, anda lihat akan tertulis “ke Menu Utama”. Mungkin tanpa perlu diterangkan anda telah paham, tapi baiklah saya jelaskan sedikit. onMouseOver di atas adalah event handler pada link. Event handler ini mengubah window status menjadi seperti yang tertulis di antara tanda quote (‘) saat mouse bergerak ke atas link. Disini window adalah “object” dan status adalah “property” (pada tutorial sebelumnya kita telah mengenal istilah “object” dan “method”). Kemudian ditutup dengan titik koma (;)

Berikutnya kita menuliskan return true. Script inilah yang menyebabkan window status berubah saat mouse bergerak ke atas link. Tanpa adanya script tersebut efek yang kita inginkan (berubahnya window status) muncul terlambat, setelah mouse pergi dari link. Saat mouse berada di atas link window status tetap seperti default, yaitu menampilkan alamat link. Reload halaman ini, dan arahkan mouse anda ke link berikut, untuk melihat efek script yang sama, namun tanpa menggunakan return true.

Dengan menggunakan onMouseOver kita juga dapat mengubah propery lain.Misalnya kita akan mengubah warna latar dokumen, yaitu dengan menggunakan document.bgColor. Berikut ini contoh pemakaiannya.

<a href=”https://flashpermanen.wordpress.com&#8221;
onMouseOver=”document.bgColor= ‘ffcc99’; return true”>Klik di sini</a>

Untuk mengembalikan warna latar seperti semula reload halaman ini.

Sekarang mungkin anda tertarik untuk menggabung dua efek di atas, perubahan window. status dan document.bgColor- tidak terlalu sulit. Kita cukup memisahkan kedua efek tersebut dengan koma (,) seperti script berikut. Perintah on.MouseOver yang kedua berada di antara tanda petik(“) untuk membuat efeknya terjadi simultan.

Link di atas di buat menggunakan script berikut.

<a href=”http://xxx.com&#8221;
onMouseOver=”document.bgColor= ‘#ffcc99′,onMouseOver=window.status=’Ke Menu Utama’; return true”>Klik di sini</a>

kita juga dapat menampilkan window dengan tulisan yang kita inginkan menggunakan alert (). Script dibawah dan hasilnya saya rasa dapat dimengerti dengan mudah.

<a href=”http://tpundiksha.wordpress.com&#8221;
onMouseOver=”alert(‘Woeeeee..Kaget Dunk!!! :D’); return true”>Klik di sini</a>

Saya rasa sekarang anda sudah cukup faham dasar dari penggunaan event handler. Oleh karena itu kini saya akan memperkenalkan beberapa event handler lain populer. Yang pertama adalah onClick seperti telah kita bicarakan di atas. onClick akan bekerja saat anda mengklik link. Perhatikan script berikut:

<a href=”http://tpundiksha.wordpress.com&#8221;
onClick=”alert(‘Gak kaget lagi dech!!! :D’);
return true”>Klik di sini</a>

Berikutnya adalah event handler onFocus. Evebt Handler ini bekerja saat anda terfokus pada sebuah item. Wah, bingung deh, lihat aja contoh ini. Eits, anda benar-benar masih inget tentang form kan? jika tidak dipelajari dulu disini.

<form>
<input type=”text”size=”30″
onFocus=”window.status=’Anda Siap Mengisi Kotak?’;”></form>

Ini hasilnya. Coba letakkan kursor dalam kotak teks dan perhatikan window status di bawah.

Sekarang kita belajar tentang onBlur. onBlur adalah kebalikan dari onFocus. Dia bekerja justru saat anda tidak fokus :D. Lihat script dan hasilnya di bawah.

<form>
<input type=”text”size=”40″ value=”tulis nama anda di sini!!”
onBlur=”alert(‘anda telah mengedit kotak’);”>
</form

Ada lagi event handler yang perintahnya onChange. Mirip dengan onBlur, hanya dia bekerja apabila ada perubaha. Jika anda tidak mengubah isi kotak, dia tidak akan bekerja. Lihat script dan hasil berikut ini.

<form>
<input type=”text”size=”40″ value=”tulis nama anda di sini!!”
onChange =”alert(‘anda telah mengedit kotak’);”>
</form>

Berikut ini adalah onSelect. Event hendler ini bekerja saat memilih (memblokir) isi kotak. Lebih baik perhatikan script dan hasilnya berikut ini.

<form>
<input type=”text”size=”40″ value=”tulis nama anda di sini!!”
onSelect=”alert(‘Anda Gagal Dech.. kacian’);”
</form>

Mmm msih d beberapa nih. Anda bisa menggunakan onSubmit, yang bekerja saat anda mengklik tombol submit. Lihat contoh ini.

<form onSubmit=”alert (‘Anda yakin mau mengirim data?’)”;>
<input type=”submit”>
</form>

Dan yang terakhir yang akan dibahas di sini – fiuh – adalah onLoad dan onUnload. Kedua perintah ini berada dalam tag <BODY> di mana mereka akan memanggil sesuatu saat halaman tersebut dipanggil (untuk onLoad) atau saat halaman tersebut ditutup (untuk onUnload). Untuk mencobanya … hmmm … bagusnya anda belajar fungsi dulu deh. Jadi kita pending dulu ya.

Udah ya … saya mau istirahat dulu sebelum dilanjutkan ke tutorial berikutnya. Byee.