STMIK AMIKOM YOGYAKARTA YOGYAKARTA 2008 WIDHIARTA, S. KOM

Transkripsi

1 Pemrograman Web // IInternet 1 Pengenallan Perancangan Web S1-TII//D3-TII//S1-SII matterri i:: JavaScrri iptt STMIK AMIKOM YOGYAKARTA YOGYAKARTA 2008 WIDHIARTA, S. KOM

2 CLIENT SIDE SCRIPT - JAVASCRIPT WIDHIARTA, S. KOM 1.1 SEJARAH JavaScript diperkenalkan pertama kali oleh Netscape pada tahun 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 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 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

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. 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

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 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. Dapat otomatis menulis pada hardisk. 4

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 5

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 6

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. 7

8 D. Operator 8

9 9 Widhiarta, S. Kom

10 E. Pop Up i. Alert pop up hanya sebatas pemberitahuan. ii. Confirm box pop up pemberitahuan dengan pilihan tombol konfirmasi. 10

11 iii. Prompt box pop up dengan isian data F. Fungsi Contoh pemanggilan fungsi dengan form. 11

12 Fungsi dengan 2 argumen Fungsi yang mengembalikan nilai 12

13 Fungsi dgn argumen dan mengembalikan nilai G. Perulangan i. For Loop 13

14 ii. While Loop 1. While Loop 2. Do While Loop 14

15 iii. Break Loop 1. Break 2. Continue 15

16 iv. For In H. Even Silahkan cari tag html yang mendukung atribut even tersebut! 16

17 Contoh even onblur: I. Try Catch 17

18 Try catch dengan box konfirmasi J. Throw 18

19 K. On Error 19

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? 20

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. 21

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. 22

23 E. Boolean Hasil tampilan.. F. Math Obyek Math dapat kamu gunakan untuk melakukan perhitungan matematis sederhana. Referensinya sebagai berikut. 23

24 Method Matematika G. HTML DOM Sebagai tambahan untuk obyek built-in JavaScript, kamu dapat mengakses dan memanipulasi semua obyek HTML DOM dengan JavaScript. 24

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. 25

26 26 Widhiarta, S. Kom

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, , tanggal dan input untuk field numeric. D. Animasi Dengan JavaScript dapat dibuat gambar animasi. Misalnya untuk animasi tombol. E. Image Map 27

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 28

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. 29

30 i. Method Sebuah obyek dapat memuat beberapa method. Sintaks: Contoh memanggil metode sleep() untuk personjob: CONTOH: 1. Create direct Instance of object. 30

31 2. Create template for an object. ~~~~~~ JJJJJJJJJJJ ~~~~~~