Tutorial Javascript

Ini adalah tulisan berseri yang saya buat, dan ini adalah tulisan untuk seri pertama.

• Arahan Awal Untuk Anda
• Apa itu Javascript
• Menambahkan Javascript Pada Halaman Web
• Javascript Untuk Browser yang Tidak Menginginkannya
• Selalu Tambahkan Komentar Pada Kode Anda
• Kapankah Script Saya Dijalankan?
• Memanipulasi Sebuah Event
• Kapankah Saya Menggunakan Javascript

Arahan Awal Untuk Anda

Sebelum Anda membuat sebuah aplikasi web dengan teknologi yang canggih dan luar biasa dengan berbagai macam efek yang akan membuat, mungkin sebuah revolusi, terlebih dahulu Anda harus mencamkan suatu hal yang paling penting dalam pemrograman Javascript ini. Hal tersebut adalah: tidak semua browser yang nantinya akan digunakan oleh user Anda mendukung semua fitur Javascript yang Anda buat, dan walaupun browser tersebut memberikan dukungan yang semakin luas, Anda tidak dapat mengharapkan bahwa semua fitur yang Anda miliki akan didukung oleh browser yang nantinya user Anda pergunakan, dan Anda juga tidak dapat memaksakan mereka untuk menggunakan browser yang Anda inginkan.

Panjang dan mengerikan bukan? Tapi itulah kenyataan yang harus Anda dapati disaat nantinya Anda berpetualangan dengan beberapa ratus baris code di belantara web yang kejam. Camkan hal tersebut sehingga saat nantinya Anda telah selesai dengan satu buah project, Anda tidak akan menangis mengetahui bahwa beberapa ratus baris kode yang Anda telah tulis ternyata tidak dapat digunakan.

Apa itu Javascript

Dari beberapa sumber yang dapat dipercaya, Javascript diinformasikan sebagai sebuah bahasa pemrograman yang diikutkan pada sebuah halaman web dengan tujuan membuat sebuah aplikasi web yang interaktif. Menggunakan Javascript Anda bisa melakukan sebuah proses pemeriksaan masukan user pada sebuah form, dan bahkan memodifikasinya. Selain itu Anda bisa menambahkan bagian dari halaman web Anda secara interaktif, menghilangkannya, serta berbagai hal-hal menarik lainnya.

Program Javascript akan dijalankan oleh satu buah halaman web. Saat halaman web tersebut ditutup, maka Javascript juga akan berhenti dijalankan. Untuk memberikan kemampuan berkomunikasi diantara halaman web, Anda bisa mempergunakan fasilitas untuk memanipulasi Cookies yang telah tersedia sebagai fasilitas standart pada Javascript.

Javascript sendiri merupakan sebuah bahasa pemrograman yang dijalankan pada halaman web dari sisi client. Karena itu Javascript disebut bersifat Client Side. Hal ini tentunya berbeda dengan bahasa yang digunakan untuk membuat aplikasi web lainnya, seperti PHP, ASP, JSP yang bersifat Server Side, atau dijalankan di server. Sebagai tambahan, Anda jangan bingung dan menyamakan Javascript dengan bahasa Java, karena walaupun syntak yang digunakan hampir sama, Java dan Javascript merupakan bahasa yang sangat berbeda kalau dipandang dari sisi proses eksesuksi programnya.

Menambahkan Javascript Pada Halaman Web

Untuk menambahkan kode Javascript pada sebuah halaman web, Anda harus menuliskankannya diantara kode <script language=Javascript> dan </script>. Dengan cara demikianlah sebuah browser dapat memisahkan diantara bagian kode Javascript yang Anda miliki dan kode HTML pada sebuah halaman web.

Sebagai contoh:

<script language=Javascript>
// ini bagian kode javascript
</script>

Javascript Untuk Browser yang Tidak Menginginkannya

Mungkin ada beberapa browser yang tidak mengerti tentang Javascript yang biasanya merupakan sebuah browser tua (siapa tahu user Anda menggunakannya). Maka Anda bisa menambahkan tag HTML untuk komentar seperti dibawah ini.

<script language=Javascript>
<!--
 // ini bagian kode javascript
-->
</script>

Selain itu apabila sebuah browser telah diset untuk tidak menjalankan perintah Javascript, namun Anda ingin user menjalankannya, maka Anda bisa menggunakan tag <noscript>.

<noscript>
 <p>Aktifkan Javascript atau Anda tidak mendapatkan hasil yang Anda inginkan.</p>
</noscript>

Selalu Tambahkan Komentar Pada Kode Anda

Saat kode Anda nantinya dibagi-bagi dengan programmer lainnya, atau sebagai salah satu petunjuk bagi Anda, maka bagian-bagian penting dari kode Anda bisa tambahkan komentar. Hal ini diperlukan agar disaat Anda atau programmer lainnya yang harus melakukan perbaikan atau penambahan fitur, programmer tidak harus melakukan tracking ulang untuk mengetahui kegunaan dari kode yang sebelumnya telah Anda tulis. Selain itu adalah sebuah praktek pemrograman yang baik apabila Anda bisa menambahkan komentar pada bagian-bagian kode Anda yang penting.

Untuk menambahkan komentar, Anda tinggal menggunakan tanda “//” untuk satu baris komentar, atau “/*” yang ditutup tanda “*/” untuk menambahkan komentar dengan banyak baris.

<script language=Javascript>
<!--
 // ini komentar satu baris
/*
 ini komentar banyak baris
 jangan lupa tutup dengan tanda ini
*/
-->
</script>

Kapankah Script Saya Dijalankan?

Saat browser me-load sebuah halaman dan mendapatkan baris perintah yang diketahuinya sebagai kode Javascript, maka saat itu juga program Anda akan dijalankannya. Misalnya sebuah kode yang akan menampilkan sebuah pesan bagi user.

<script language=Javascript>
 alert(‘Hi, Anda sedang menjalankan program Javascript !’);
</script>

Namun pada beberapa kasus kita harus mengatur kapan kita menginginkan sebuah perintah Javascript dijalankan. Untuk itu kita bisa memasukkannya kedalam sebuah fungsi yang akan dijalankan nantinya bersamaan dengan terjadinya sebuah event. Misalnya kita ingin agar user diberitahu bahwa dia akan dibawa ke halaman web yang lain saat dia mengklik sebuah link url.

<script language=Javascript>
 function go_further()
 {
  alert(‘Anda akan dibawa ke halaman web lain …’);
  return true;
 }
</script>

<a href=”I_Love_YOU.html” onclick=”go_further();”>I Love You</a>

Maka seperti contoh diatas kita bisa mempergunakan event dari elemen HTML untuk sebuah link (a) saat diklik, yang dalam hal ini adalah onclick, untuk kemudian menjalankan perintah Javascript kita bernama go_further().

Perhatikan bahwa perintah Javascript kita masukkan diantara double quote (“). Selain itu juga program diatas bisa kita singkat menjadi seperti ini.

<a href=”I_Love_YOU.html” onclick=”alert(‘Anda akan dibawa ke halaman web lain …’);” >I Love You</a>

Sekarang perhatikan bahwa perintah untuk menampilkan pesan tersebut ternyata bisa langsung kita ketikkan didalam event yang kita inginkan. Namun bagaimana jika kita menginginkan bahwa pesan yang tampil memiliki double quote didalamnya. Misalnya Anda ingin menampilkan pesan seperti ini: Anda akan dibawa ke halaman “I Love You”. Apabila Anda menuliskan seperti ini:

<a href=”I_Love_YOU.html” onclick=”alert(‘Anda akan dibawa ke halaman “I Love You”’);” >I Love You</a>

maka perintah tersebut tidak akan dijalankan karena browser akan kebingungan untuk menjalankan perintah Javascript, yang disebabkan karena untuk menunjukkan perintah Javascript yang kita gunakan kita harus menggunakan double quote untuk itu. Sehingga saat Anda menggunakan perintah diatas, alih-alih browser menampilan pesan seperti yang Anda inginkan, browser akan menganggap perintah Javascript kita hanya sampai ke bagian setelah kalimat halaman. Untuk memperbaikinya kita harus mengganti double quote tersebut dengan HTML tag “"e”.

<a href=”I_Love_YOU.html” onclick=”alert(‘Anda akan dibawa ke halaman "eI Love You"e’);” >I Love You</a>

Memanipulasi Sebuah Event

Kita bisa juga memanipulasi sebuah event. Misalkan merujuk pada contoh sebelumnya, kita ingin agar user diberitahukan lebih dulu kemana ia akan diantarkan dan kita ingin agar user bisa memiliki pilihan untuk mengikuti link tersebut atau tidak. Maka dengan program yang sederhana kita bisa melakukan hal tersebut.

<script language=javascript>
function go_further()
{
 // Tanya user ingin di bawa ke halaman I_Love_you.htm
 var ask = confirm('Anda ingin dibawa ke I_Love_you.htm?');
 if(ask == true) // user mengatakan ya
  return true;
 return false; // lainnya dia tidak ingin
}
</script>
<a href="I_Love_you.htm" onclick="return go_further();">Ke I Love You</a>

Pada contoh diatas kita tinggal menambahkan nilai kembalian pada fungsi go_further(), sehingga saat user mengatakan tidak, kita akan mengembalikan nilai false dan true bila sebaliknya. Sedangkan pada bagian event onclick kita menambahkan perintah return yang akan memerintahkan browser untuk mengevaluasi nilai kembalian dari go_further. Sehingga saat nilai kembaliannya true browser akan melanjutkan dengan perintah selanjutnya, atau membatalkan event klik apabila nilai kembaliannya adalah false.

Namun yang harus Anda perhatikan sekali lagi, bahwa tidak semua event dikenali di semua browser. Oleh karena itu Anda harus melakukan percobaan pada browser yang kemungkinan digunakan oleh user Anda, atau Anda harus melakukan sebuah perkecualian.

Kapankah Saya Menggunakan Javascript

Pertanyaan yang gampang-gampang susah karena harus dipertanyakan pada kebutuhan aplikasi Anda. Satu fakta yang tidak bisa disangkal, dengan Javascript maka beban loading halaman page Anda akan semakin berat. Akan tetapi hal tersebut bisa dikurangi dengan membuat sebuah program yang efektif dan efisien, walaupun hal tersebut kurang bisa dinilai secara objektif. Namun karena sekarang harga koneksi internet untuk ukuran transfer data yang besar semakin murah, saya rasa hal tersebut bisa ditanggulangi.

Namun bagi saya sendiri, apabila saya menginginkan adanya halaman yang interaktif, adanya proses yang ingin saya lakukan pada browser client langsung (seperti validasi form dsb), maka saya akan memilih untuk menggunakan Javascript.