Pemrograman Web / Internet 1 Pengenalan …para pengguna dari berbagai kalangan. Adanya syntax yang mudah, fungsi-fungsi khusus yang terpasang, dan kebutuhan minimal yang diperlukan

PPPeeemmmrrrooogggrrraaammmaaannn WWWeeebbb /// IIInnnttteeerrrnnneeettt 111

PPPeeennngggeeennnaaalllaaannn PPPeeerrraaannncccaaannngggaaannn WWWeeebbb

SSS111---TTTIII///DDD333---TTTIII///SSS111---SSSIII

mmmaaattteeerrriii::: JJJaaavvvaaaSSScccrrriiipppttt

STMIK AMIKOM YOGYAKARTA

YOGYAKARTA

2008

WIDHIARTA, S. KOM

WWiiddhhiiaarrttaa,, SS.. KKoomm

2

CLIENT SIDE SCRIPT - JAVASCRIPT

1.1 SEJARAH

JavaScript diperkenalkan pertama kali 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++.

1.2 PENGERTIAN

JavaScript adalah bahasa pemrograman yang khusus untuk 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 obyek,

sedangkan Script adalah serangkaian instruksi program.

Dalam aplikasi client untuk Navigator, pernyataan Java Script yang tertulis dalam

sebuah halaman web dapat mengetahui dan merespon perintah pemakai seperti gerakan

mouse, input form, dan navigasi halaman HTML.

Sebagai contoh, anda dapat menulis sebuah fungsi Java Script untuk memverifikasi

bahwa seseorang telah benar menuliskan informasi yang cocok dalam sebuah form yang

meminta diisi nomor telepon dan nomor kode pos. Tanpa transmisi jaringan apapun,

sebuah halaman HTML yang dilengkapi dengan tulisan Java Script dapat

menginterpretasikan teks yang dituliskan pada halaman tersebut dan memberikan

tampilan teks dialog penolakan apabila teks yang dituliskan tadi salah. Atau anda dapat

mempergunakan Java Script untuk memerintahkan sebuah aksi (seperti memainkan file

suara, mengeksekusi sebuah "applet" atau berkomunikasi dengan "plug-in" lain)

sebagai respon terhadap dibukanya sebuah halaman web atau penutupan halaman

tersebut oleh pengguna internet.

WIDHIARTA, S. KOM


3

Kesimpulannya, JavaScript:

- dibuat untuk membuat halaman web menjadi lebih interaktif.

- merupakan scripting language

- di embeddedkan dg html

- merupakan bahasa interpreter

- free lisensi

1.3 HAL-HAL YANG HARUS DIPERHATIKAN

Ada beberapa hal yang harus diperhatikan dalam pengelolaan pemrograman

JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript

membedakan huruf besar dan huruf kecil. 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), dan banyak yang lainnya.

Apa yg bisa kita lakukan dg javascript?

- JavaScript melengkapi html dengan pemrograman.

- Dapat menulis text secara dinamis dalam html.

- Dapat bereaksi dalam suatu even yang terjadi

- Dapat membaca dan menulis elemen html

- Dapat digunakan untuk memvalidasi data

- Dapat digunakan untuk mendeteksi jumlah pengunjung

- Dapat digunakan untuk membuat cokies

1.4 PERBANDINGAN JAVASCRIPT & JAVA

Bahasa pemrograman Java Script adalah bahasa pemrograman Java yang tidak

dilengkapi dengan penulisan kode statik Java dan tipe pengecekan yang kuat.

Java Script memiliki banyak ekspresi syntax dan konstruksi kontrol dasar aliran

pemrograman Java. Sebaliknya, apabila pada Java terdapat deklarasi sistem kompilasi

waktu, sedangkan Java Script hanya memiliki system pengaturan waktu yang didasarkan

pada sejumlah kecil data numerik, boolean dan nilai string. Java Script memiliki model

sederhana program berorientasi obyek yang masih terus dikembangkan kapabilitasnya.

Java Script juga memiliki fungsi-fungsi, tanpa penggunaan deklarasi khusus. Fungsi-

fungsi dapat merupakan "properties" sebuah obyek.

Komplemen Java Script merupakan tampilan Java yang amat berguna untuk

menyebutkan penulis (author). Pernyataan-pernyataan Java Script dapat mengambil dan

mengatur "properties" yang diinginkan untuk mencari pernyataan atau memungkinkan

dihubungkannya sebuah halaman HTML dengan sebuah "applet" atau "plug-in".


4

Java adalah bahasa pemrograman yang didesain untuk eksekusi cepat dan

keamanan penulisan. Keamanan penulisan terlihat dari dimungkinkannya perintah "int"

pada sebuah referensi obyek atau untuk mengambil ruang memory khusus dengan

mengurangi jumlah kode byte Java.

Program Java memiliki kelas-kelas eksklusif dan metodanya. Java juga

memerlukan perlengkapan untuk melakukan deklarasi kelas, metoda penulisan, dan

memastikan keamanan penulisan. Hal ini menjadikan program Java tampak kompleks

dan kurang user friendly sehingga cenderung dibutuhkan selalu sebuah hirarki sejumlah

kumpulan obyek.

Sebaliknya Java Script, memiliki kemampuan tinggi meski hanya dituliskan dalam

beberapa baris perintah dinamis saja seperti yang terdapat dalam program Hyper Talk

atau dBase. Bahasa pemrograman script ini juga dilengkapi alat-alat yang memudahkan

para pengguna dari berbagai kalangan. Adanya syntax yang mudah, fungsi-fungsi

khusus yang terpasang, dan kebutuhan minimal yang diperlukan dalam membuat sebuah

obyek.

Berikut adalah perbandingan Java Script dan Java.

JavaScript Java

Diterjemahkan oleh client (tidak

dikompilasi).

Kompilasi diserver sebelum dieksekusi di

client.

Bekerja pada obyek. Kode

mempergunakan obyek-obyek built-in, dan

dapat dikembangkan tetapi tidak diperlukan

kelas-kelas.

Applets dipisahkan dari HTML (diakses

dari halaman HTML).

Tipe-tipe variabel data tidak perlu

dideklarasikan.

Tipe-tipe variable data harus

dideklarasikan.

Ikatan dinamis (dinamic binding), referensi

obyek dicek pada alur waktu.

Ikatan statik (static binding), referensi

obyek harus ada pada waktu yang

dikompilasi.

Tidak dapat otomatis menulis pada hardisk. Dapat otomatis menulis pada hardisk.


5

1.5 DASAR JAVASCRIPT

A. Intro

Aturan penulisan sintaks:

Cara 1. Penyisipan JavaScript dalam body

Cara 2. Penyisipan JavaScript dalam head

Cara 3. Penyisipan JavaScript dalam head & body


6

Cara 4. Penyisipan JavaScript dalam bentuk file

B. Variabel

à digunakan untuk menyimpan data.

Sintaks:

i. cara 1, dengan pernyataan var

var nama_variabel = nilai

ii. cara 2, tanpa pernyataan var

nama_variabel = nilai

Contoh: JavaScript with variable.html


7

C. Percabangan

i. If

Beberapa kombinasi Percabangan dengan If

If … else

If … else If … else

If ( if … else) else

Berikut merupakan contoh kombinasi If … else If … else.

ii. Switch

Switch digunakan untuk memilih satu dari banyak pilihan blok kode yang akan

dieksekusi.


8

D. Operator


9


10

E. Pop Up

i. Alert

à pop up hanya sebatas pemberitahuan.

ii. Confirm box

à pop up pemberitahuan dengan pilihan tombol konfirmasi.


11

iii. Prompt box

à pop up dengan isian data

F. Fungsi

Contoh pemanggilan fungsi dengan form.


12

à Fungsi dengan 2 argumen

à Fungsi yang mengembalikan nilai


13

à Fungsi dgn argumen dan mengembalikan nilai

G. Perulangan

i. For – Loop


14

ii. While – Loop

1. While – Loop

2. Do – While – Loop


15

iii. Break – Loop

1. Break

2. Continue


16

iv. For … In

H. Even

Silahkan cari tag html yang mendukung atribut even tersebut!


17

Contoh even onblur:

I. Try … Catch


18

à Try … catch dengan box konfirmasi

J. Throw


19

K. On Error


20

L. Spesial Karakter

M. Guidelines

Berikut cara untuk menulis baris keterangan dalam JavaScript

1.6 Obyek Javascript

A. Intro

JavaScript merupakan bahasa pemrograman berorientasi obyek (OOP = Object

Oriented Programming). Dalam OOP, kita boleh membuat obyek dan tipe variable

sendiri. Hal itu akan kita pelajari pada sesi Advance JavaScript. Kita akan memulai

dengan melihat obyek JavaScript yang ada dan bagaimana menggunakannya.

i. Properti

Properti adalah nilai yang berasosiasi dengan obyek.

Contoh berikut, digunakan properti length dari obyek yang mengembalikan angka dari

karakter string.

Berapa hasil perhitungan yang ditampilkan?


21

ii. Method

Method adalah aksi yang dapat dilakukan pada obyek. Contoh berikut, digunakan

metode toUpperCase( ) dari obyek untuk menampilkan text dalam huruf besar.

B. JavaScript String Object

Obyek string digunakan untuk memanipulasi setiap teks yang disimpan.


22

C. Date

Manipulasi data menggunakan metode yang telah ada pada obyek Date.

D. Array

Obyek Array digunakan untuk menyimpan sekumpulan nilai didalam satu nama variabel.


23

E. Boolean

Hasil tampilan…..

F. Math

Obyek Math dapat kamu gunakan untuk melakukan perhitungan matematis

sederhana. Referensinya sebagai berikut.


24

Method Matematika

G. HTML DOM

Sebagai tambahan untuk obyek built-in JavaScript, kamu dapat mengakses dan

memanipulasi semua obyek HTML DOM dengan JavaScript.


25

1.7 Javascript Lanjut

A. Deteksi Browser

Obyek Navigator JavaScript membawa informasi tentang browser pengunjung.

B. Cookies

Cookie adalah variabel yang disimpan di komputer pengunjung suatu web. Setiap

computer yang sama melakukan request halaman web dengan web browser, ia akan

mengirim cookie juga. Dengan JavaScript, kamu dapat membuat dan mengambil kembali

nilai cookie.


26


27

C. Validasi

JavaScript dapat digunakan untuk melakukan validasi input data pada form HTML

sebelum data dikirim ke server. Misalnya validasi untuk field yang kosong, email, tanggal

dan input untuk field numeric.

D. Animasi

Dengan JavaScript dapat dibuat gambar animasi. Misalnya untuk animasi tombol.

E. Image Map


28

F. Timing

Dengan JavaScript, sangat dimungkinkan untuk tidak segera mengeksekusi kode setelah

sebuah fungsi dipanggil, tapi setelah interval waktu tertentu. Itu disebut even timing.

i. simple timing


29

ii. a clock created with a timing event

G. Pembuatan Obyek

Obyek digunakan sepenuhnya untuk mengorganisasikan informasi.

Sebelumnya kita telah mengenal beberapa obyek built-in JavaScript seperti String, Date,

Array, dll.

Tambahan, kamu juga bisa membuatnya sendiri.

i. Properti

Sintaks untuk mengakses properti dari sebuah obyek:

Kamu dapat menambah properti ke sebuah obyek dengan memberi nilai sederhana.

Diasumsikan bahwa personObj sudah ada – kamu dapat memberinya property dengan

nama firstname, lastname, age dan eyecolor.


30

i. Method

Sebuah obyek dapat memuat beberapa method. Sintaks:

Contoh memanggil metode sleep() untuk personJob:

CONTOH:

1. Create direct Instance of object.


31

2. Create template for an object.

~~~~~~ JJJJJJJJJJJ ~~~~~~

-||||||| -

““””

Documents

Pemrograman Web / Internet 1 Pengenalan …para pengguna dari berbagai kalangan. Adanya syntax yang mudah, fungsi-fungsi khusus yang terpasang, dan kebutuhan minimal yang diperlukan