Pemrograman Web / Internet 1 Pengenalan Perancangan Web S1-TI/D3-TI/S1-SI
m maatteerrii:: JJaavvaaS Sccrriipptt
STMIK AMIKOM YOGYAKARTA YOGYAKARTA 2008
WIDHIARTA, S. KOM
W idhiarta, S. Kom
CLIENT SIDE SCRIPT - JAVASCRIPT
WIDHIARTA, S. KOM
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.
2
W idhiarta, S. Kom
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. Fungsifungsi 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".
3
W idhiarta, S. Kom
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
Kompilasi diserver sebelum dieksekusi di
dikompilasi).
client.
Bekerja pada obyek. Kode
Applets dipisahkan dari HTML (diakses
mempergunakan obyek-obyek built-in, dan
dari halaman HTML).
dapat dikembangkan tetapi tidak diperlukan kelas-kelas. Tipe-tipe variabel data tidak perlu
Tipe-tipe variable data harus
dideklarasikan.
dideklarasikan.
Ikatan dinamis (dinamic binding), referensi
Ikatan statik (static binding), referensi
obyek dicek pada alur waktu.
obyek harus ada pada waktu yang dikompilasi.
Tidak dapat otomatis menulis pada hardisk.
4
Dapat otomatis menulis pada hardisk.
W idhiarta, S. Kom
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
5
W idhiarta, S. Kom
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
6
W idhiarta, S. Kom
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.
7
W idhiarta, S. Kom
D. Operator
8
W idhiarta, S. Kom
9
W idhiarta, S. Kom
E. Pop Up i. Alert à pop up hanya sebatas pemberitahuan.
ii. Confirm box à pop up pemberitahuan dengan pilihan tombol konfirmasi.
10
W idhiarta, S. Kom
iii. Prompt box à pop up dengan isian data
F. Fungsi Contoh pemanggilan fungsi dengan form.
11
W idhiarta, S. Kom
à Fungsi dengan 2 argumen
à Fungsi yang mengembalikan nilai
12
W idhiarta, S. Kom
à Fungsi dgn argumen dan mengembalikan nilai
G. Perulangan i. For – Loop
13
W idhiarta, S. Kom
ii. While – Loop 1. While – Loop
2. Do – While – Loop
14
W idhiarta, S. Kom
iii. Break – Loop 1. Break
2. Continue
15
W idhiarta, S. Kom
iv. For … In
H. Even
Silahkan cari tag html yang mendukung atribut even tersebut!
16
W idhiarta, S. Kom
Contoh even onblur:
I. Try … Catch
17
W idhiarta, S. Kom
à Try … catch dengan box konfirmasi
J. Throw
18
W idhiarta, S. Kom
K. On Error
19
W idhiarta, S. Kom
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?
20
W idhiarta, S. Kom
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.
21
W idhiarta, S. Kom
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.
22
W idhiarta, S. Kom
E. Boolean
Hasil tampilan…..
F. Math Obyek Math dapat kamu gunakan untuk melakukan perhitungan matematis sederhana. Referensinya sebagai berikut.
23
W idhiarta, S. Kom
Method Matematika
G. HTML DOM Sebagai tambahan untuk obyek built-in JavaScript, kamu dapat mengakses dan memanipulasi semua obyek HTML DOM dengan JavaScript.
24
W idhiarta, S. Kom
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.
25
W idhiarta, S. Kom
26
W idhiarta, S. Kom
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
27
W idhiarta, S. Kom
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
28
W idhiarta, S. Kom
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.
29
W idhiarta, S. Kom
i. Method Sebuah obyek dapat memuat beberapa method. Sintaks:
Contoh memanggil metode sleep() untuk personJob:
CONTOH: 1. Create direct Instance of object.
30
W idhiarta, S. Kom
2. Create template for an object.
~~~~~~ JJJJJJJJJJJ ~~~~~~ -||||||| ““””
31
