Pendahuluan Javascript


Para blogger ataupun web designer pastinya mengenal javascript. Tapi masih banyak diantara kita hanya mengenal javascript dengan cara copy paste script ataupun hanya menggunakan plugin yang sudah jadi. Bahkan diantara para blogger dan webdesigner tidak tahu apa perbedaan dari raw javascript dan jquery. Javascript yang dijelaskan dalam tutorial ini adalah bahasa pemrograman yang terdapat dalam hampir semua web browser (firefox, safari, IE, chrome dan lain-lain), jadi kita tidak perlu download atau install atau membeli license untuk menggunakan dan mengembangkannya. Dan juga Javascript yang dijelaskan disini nanti hanya javascript yang bekerja pada client side.

Penjelasan tentang client-side programming :

  • Hanya dapat dilihat hasilnya setelah dibuka oleh web browser pada komputer pengguna.

  • Saat ini belum dapat dibaca oleh search engine (search engine hanya bisa membaca script tapi bukan hasilnya).

  • Yang dibaca oleh browser adalah script bukan output berupa html. Setelah browser membaca script kemudian browser akan execute script yang kemudian menghasilkan output  berupa html atau hal lainnya sesuai yg diinginkan oleh pembuat script.


Cara Membuat script dengan javascript


Kebutuhan dalam membuat script menggunakan javascrript :

  1. Web browser (sangat disarankan firefox, karena nantinya akan diajarkan menggunakan firefox untuk debugging).

  2. Text editor (sangat disarankan menggunakan Notepad++)


Cukup dibutuhkan dua program tersebut diatas untuk belajar javascript, sangat mudah bukan ?

Berikut syntax yang digunakan untuk menulis javascript
<script type="text/javascript">
// Script anda disini
</script>

pada syntax diatas anda dapat menulis script anda pada tulisan "Script anda disini". Agar tidak membingungkan yang baru belajar web programming saat ini saya tidak membahas tentang cara penulisan untuk HTML, strict XHTML atau lainnya. Sementara ini saya akan menerangkan secara sederhana saja. agar mudah difahami dan bisa dicoba.

Kelebihannya lagi tentang javascript adalah anda dapat membuat secara offline tidak perlu koneksi internet ataupun harus upload terlebih dahulu.

Baiklah untuk memulai pelajaran tentang javascript coba kita lihat code berikut ini
<script type="text/javascript">
document.write("Pelajaran pertama dari javascript");
</script>

Demo Hasil

Cara membuat dalam file tersebut sebagai berikut :

  1. Buatlah file html misal demo.html atau dengan notepad++ "new file" kemudian "save as"  file menjadi demo.html (ingat akhiran dari file adalah htm atau html).

  2. Isikan file tersebut dengan script di atas.


Dari code di atas menghasilkan output berupa tulisan "Pelajaran pertama dari javascript"

fungsi yang digunakan adalah document.write() untuk memberikan output pada browser apa yang kita tulis dalam kurung tersebut.

untuk mengakhiri satu baris script dari javascript dengan tanda semicolon (;)

Kenapa kita harus repot-repot menggunakan javascript kalau untuk menulis "Pelajaran pertama dari javascript" dalam html file cukup ditulis itu saja ?

Demo hanya menggunakan HTML, perhatikan link demo html dengan link demo javascript apakah hasilnya sama ?

kalau ingin melihat source file dari file itu bisa lihat dengan cara klik kanan pada browser dan pilih "View Page Source" maka akan terlihat perbedaan isinya tetapi hasilnya sama.

Untuk menunjukkan kemudahan penggunakan javascript mari kita lihat apakah anda sanggup menulis secara html tulisan berikut ini ? (angka tersebut ditulis berurutan sampai 1000)

Angka ke = 1
Angka ke = 2
Angka ke = 3
Angka ke = 4

.

.

Angka ke = 1000

Cukup lama mengetik content seperti di atas apabila menggunakan html, tetapi dengan menggunakaan javascript cukup beberapa baris berikut :
<script type="text/javascript">
for (var j = 1; j <= 1000; ++j) {
document.write('Angka ke = '+ j+'<br/>');
}
</script>

Demo hasil

Penjelasan script di atas nanti saja setelah masuk bagian loop dalam javascript.

Demikian saja tutorial javascript pada artikel ini, semoga bermanfaat bagi kita semua.

Wassalamu'alaikum warohmatullahi wabarokatuh

0 Read More
0 comments:

Post a Comment