MEMAHAMI TEKNIK PEMROGRAMANPADA HALAMAN WEB DENGAN JAVASCRIPT

A. PENDAHULUAN Perkembangan JavaScript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Bahasa yang sekarang dikenal dengan nama JavaScript ini sebelumnya bernama LiveScript dan berfungsi sebagai bahasa sederhana untuk browser Netscape navigator 2 (browser yang populer waktu itu). Awalnya, bahasa ini memang sedikit banyak mendapat kritikan dengan alasan kurang aman, pengembangannya yang tergesa-gesa, serta tidak ada pesan error yang ditampilakn jika terdapat kesalahan saat penyusunan program. Kemudian melalui kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman Java) pada masa itu, Netscape memberikan nama JavaScript kepada bahasa tersebut 4 desember 1995. Pada waktu hampir bersamaan, pihak microsoft sendiri mencoba mengadaptasi teknilogi ini yang mereka sebut sebagai Jscript di browser milik mereka sendiri, yaitu internet Explorer 3. Kini penggunaan dari Jscript sendiri masih terus dikembangkan pihak microsoft dengan didukung oleh kebanyakan browser yang tersedia saat ini.B. DEFINISIMenurut Wahana Komputer1. JavaScript merupakan bahasa yang berbentuk kumpulan scrip yang berfungsi untuk memberikan tampilan yang tampak lebih interaktif pada dokumen web. Dengan kata lain, bahasa ini adalah bahasa pemrograman untuk memberi kemampuan tambahan ke dalam bahasa pemrograman HTML (Hypertext Markup Language) dengan mengijinkan pengeksekusian perintah-perintah pada sisi client, dan bukan sisi server dokumen web. (Sumber : Wahana Komputer,2010,Panduan praktis Menguasai Pemrograman Web dengan JavaScript.Yogyakarta.Penerbit : ANDI)

Menurut Wijaya 2. 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 dibrowser atau halaman web agar halaman web menjadi lebih hidup. (Sumber : http://trickwijaya.blogspot.com/2013/02/pengertian-dan kegunaan-javascript.html )

Menurut Bengkel Internet Pens -ITS 3. Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-masukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien. (Sumber : Modul : Bengkel Internet PENS-ITS)

Jadi, Javascript adalah bahasa pemrograman yang di proses di sisi client, yang berfungsi sebagai validasi, interaksi, sehingga halaman web menjadi lebih hidup.

Berikut salah satu contoh halam web yang menggunakan javascript :

Gambar 1 Contoh Website Yang Menggunakan Java ScriptSumber : www.garuda-indonesia.com

Contoh program java script

1

2

3

4

5

6{7alert("Hello! Saya adalah alert box!");8}9

10

11

Gambar 2 Javascript dengan Alert

C. STRUKTUR JAVASCRIPTUntuk memulai menerapkan javascript dalam pemrograman web, ada beberapa hal yang perlu diketahui oleh seorang perancang web, yaitu :1. Seorang perancang harus mengetahui cara menggunakan HTML dan mengedit dokumen HTML.2. Seorang perancang harus menggunakan browser yang sudah mendukung pemrograman javascript.Dengan mengetahui hal diatas, perancang web dapat dengan mudah memasukkan program java script ke dokumen HTML. Contoh script yang menunjukkan javascript sebagai berikut :

Tempat menulis kode .....

Tempat menulis kode .....

Tempat menulis kode .....

Cara Meletakkan Kode Javascript 1. Diletakkan di bagian Head Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakan skrip di head akan menjamin skrip di-load terlebih dahulu sebelum digunakan (dipanggil).

...

2. Penulisan pada bagian Body Skrip akan dieksekusi ketika halaman di-load sampai di bagian . Ketika menempatkan skrip pada bagian berarti antara isi dan JavaScript dijadikan satu bagian. JumlahJavaScript di dan yang ditempatkan pada dokumen kita tak terbatas.

...

3. Penulisan di External File Terkadang kita ingin menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang skrip yang diinginkan di setiap halaman.

...

Hal yang Perlu Diperhatikan dalam Penulisan Kode JavascriptPenulisan JavaScript termasuk kategori bahasa yang case sensitive artinya sangat membedakan penamaam variabel dan fungsi dalam penggunaan antara huruf besar dan kecil, berikut aturan penamaan variable :a. Harus diawali dengan karakter (huruf atau garis bawah) tidak boleh diawali dengan angka atau symbol. Contoh :VariabelKeterangan

Contoh_3.1 Benar

_contoh3.2 Benar

2010_angkatan Salah

$sqlSalah

b. Tidak boleh menggunakan spasi, untuk memisahkan antar karakter digunakan garis bawah. Contoh :VariabelKeterangan

Ahmad lubis ghozali Salah

Ahmad_lubis_ghozali Benar

c. Kapitalisasi (huruf besar dan huruf kecil) dibedakan pada nama variabel. Contoh : Ghozali tidak sama dengan ghozali

d. Tidak boleh mengunakan reserverd word, atau nama yang sama dengan perintah yang ada pada Java Script. Reserved word dalam javascript adalah: Abstract, Boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instace of, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, var, void, while,with.

Metode atau Fungsi JavaScriptMetode atau Fungsi yang sering digunakan dalam penulisan JavaScript, yaitu sebagai berikut :1. Method alert()Digunakan untuk menampilkan dialog atau kotak pesan yang berisi tombol OK dan teks keterangan. Pada saat kotak ini muncul, Anda tidak punya pilihan lain selain menekan tombol OK.

Sintak :alert("Hello! Saya adalah alert box!");

Gambar 3 Tampilan method alert2. Method confirm()Memiliki fungsi yang hampir sama dengan alert, namun mempunyai dua pilihan tombol yaitu OK dan tombol Cancel. Pada saat Anda memilih OK, method ini akan mengirimkan nilai true. Sedangkan jika Anda memilih Cancel maka method ini akan mengirim nilai false.

Sintak :confirm("Hello! Saya adalah alert box!");

Gambar 4 Tampilan method confirm3. Method prompt()Memiliki fungsi yang lebih canggih jika dibandingkan dengan kedua method alert() dan confirm(). Digunakan untuk memunculkan dialog atau kotak pesan pada saat halam wen di panggil kembali (load), atau pada saat pengunjung mengeklik sesuatu. Method ini terdiri dari 2 komponen, yang pertana teks untuk pertanyaan dan yang kedua adalah teks default dari field yang akan diisi informasi oleh user.

Sintak :var nama = prompt("Siapa nama Anda?","Masukkan nama anda");document.write("Hai, " + nama);

Gambar 5 Tampilan method promptKelebihan dan Kekurangan Dalam penulisan bahasa pemrograman, tentu memiliki kelebihan dan kekurangan, begitu pula dengan program javascript. Adapun kelebihan dari penggunaan JavaScript adalah sebagai berikut :a. Lebih praktis dan mudah sebab bahasa pemrograman JavaScript memiliki sedikit sintaks.b. Koneksi cepat sebab peletakan program terdapat di sisi client, berukuran file sangat kecil, dan dapat langsung dijalankan di browser.

Sedangkan kekurangan dari bahasa pemrograman JavaScript antara lain :a. Pengelolaan objek dalam JavaScript sangat terbatas.b. Penggunaan JavaScript dapat di-copy langsung melalui sebuah web browser, sehingga setiap orang dapat menggunakan program JavaScript yang telah kita buat.

D. TIPE DATATipe Data merupakan besaran yang digunakan untuk melakukan perhitungan, menulis dan sebagainya. Di dalam javascript terdapat beberapa macam Tipe Data, yaitu:1. String String adalah karakter yang bisa berupa huruf, kata symbol atau angka. String ditulis diantara tanda kutip ganda () atau tanda kutip tunggal ( ). Jika terdapat string lain gunakan tanda kutip tunggal.Sintak :var myString = 'J4V@ ScripT!!!';document.write(myString.charAt(7));

2. Numerik Berupa bilangan atau angka yang mempunyai sifat matematis (bisa dijumlah, tambah dsb), misalnya : 17, 8, 1945

Sintak :

Gambar 6 Javascript Numerik

3. Boolean Nilai yang hanya memiliki dua nilai yaitu true (benar) dan false (salah) Sintak :

Gambar 6 Javascript Boolean

4. Null Adalah nilai yang tidak memiliki nilai sama sekali. Null tidak sama dengan karakter kosong atau nilai nol ( 0 ).E. KONSTANTA/LITERAL Konstanta/literal adalah suatu nilai pasti yang tidak bisa diubah-ubah. Pengertian ini relevan dengan kata dasarnya yaitu konstan yang artinya tetap. Jika isi variable masih bisa diubah, maka konstanta tidak. Antara variable dan konstanta dapat disatukan. Perhatikan contoh di bawah ini: total = subtotal + 100 Nilai 100 di atas adalah konstanta/literal sedangkan total dan subtotal merupakan variable. Beberapa jenis literal pada Java Script : 1. Literal Integer yaitu suatu bilangan bulat tanpa pecahan Contoh :Var A = 100;2. Literal Floating Point, yaitu suatu bilangan pecahan atau berpangkat. Contoh :Phi = 3.14 3. Literal String, adalah suatu karakter yang berisi huruf, angka atau simbol simbol lainnya. Literal string harus diawali dan diakhiri dengan tanda kutip ganda ( ) atau tunggal ( ). Contoh :Var A = 1004. Literal Boolean, adalah suatu literal yang memiliki dua buah nilai yaitu true (benar) dan false (salah)

F. OPERATOR Menutrut Operator merupakan simbol atau karakter yang digunakan dalam program untuk melakukan suatu ekspresi atau manipulasi seperti menjumlahkan, memberikan nilai ke variable dan membandingkan.1. Operator AritmatikaDigunakan untuk melakukan perhitungan aritmatika dan mengembalikan hasil berupa number.

OperasiKeteranganContoh

+Tambahx+y

-Kurangx-y

*Kalix*y

/Bagix/y

%Modulox%y

=Sama denganx=y

Contoh program :Sintak :

Gambar 7 Javascript Operator Aritmatik2. Operator Pembanding (Relasi)Digunakan untuk membandingkan dua buah operan. Operan yang dikenal operator ini dapat bertipe string, numeric, maupun ekspresi lain. Hasil perbandinga berupa keadan true dan false.

OperasiKeterangan

==Sama dengan

!=Tidak sama dengan

>Lebih besar

>=Lebih besar atau sama dengan