Tuesday, April 30, 2013

Javascript Tutorial: Beginning

Javascript adalah bahasa pemrograman yang banyak digunakan untuk menambahkan fitur interaktif pada aplikasi web, bergerak di sisi client. Tetapi dengan sistem node.js, Javascript dapat digunakan di sisi server. Program hibrid (desktop + web) berbasis Adobe Air juga dapat dibangun dengan javascript. Sehingga seperti sepupunya -- Java, Javascript adalah bahasa pemrograman yang sangat portable, cross-platform, run anywhere. Justru lebih lightweight dibandingkan Java. Di sisi client (browser), Javascript lebih responsive dibandingkan Java

Belajar Javascript gratis dan mudah. Gratis, karena banyak sekali tutorial online gratis. Salah satunya adalah favorit saya yaitu W3School. Mudah karena memang bahasanya tergolong mudah dibandingkan Java dan C/C++ yang kompleks. Mudah karena tools belajar onlinenya banyak tersedia seperti, lagi-lagi dari W3School yaitu Tri It Your Self. Menjalankan programnya, simple, kita hanya perlu web browser. Tapi hati-hati, tidak semua web browser mendukung javascript versi terbaru, khususnya IE dari Microsoft. IE terkenal lambat dalam mengadopsi standar, dan seringkali memiliki dialek dan library khusus sendiri.


Tag <script>


Sebagai contoh berikut ini Javascript ditulis di dalam tag <body> dan melakukan manipulasi penambahan script html di dalam body.

<body>

JavaScript can write directly into the HTML output stream:

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

</body>

Kita hanya bisa menggunakan <strong>document.write</strong> di dalam output HTML.
Jika menggunakannya setelah dokumen di-load (misalnya dalam suatu funtion), maka keseluruhan dokumen akan tertimpa.

Javascript juga digunakan untuk menambahkan sifat reaktif pada dokumen html. Seperti kode berikut ini, bila kita mengklik tombol "Click Me!" maka akan muncul popup alert window "Welcome".
<button type="button" onclick="alert('Welcome!')">Click Me!</button>

Function dalam Javascript adalah kumpulan statement/perintah. Seperti contoh berikut ini fungsi myFunction akan merubah isi tag <body> ber-id "demo".

<p id="demo">
JavaScript can change the content of an HTML element.
</p>

<script>
function myFunction()
{
   x=document.getElementById("demo");  // Find the element
   x.innerHTML="Hello JavaScript!";    // Change the content
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>