Web Programming - Javascript
Download as ppt, pdf1 like1,099 views
Dokumen ini membahas penggunaan JavaScript dalam pemrograman web, termasuk cara penulisan, struktur kendali, fungsi, dan event handler. Selain itu, dijelaskan juga karakteristik, penamaan variabel, serta teknologi terkini yang menggunakan JavaScript untuk meningkatkan interaktivitas halaman web. Contoh kode dan cara penempatan script dalam dokumen HTML juga diberikan.
Web Programming - Javascript
- 1. WEB – Javascript Pemograman Web (2010/2011) – Mar 24, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter
- 2. Point of today.. Kapan Menggunakan Javascript ? Cara Penulisan Cara Peletakan Variabel Struktur Kendali Fungsi Perulangan Event Handler Kotak Dialog Object Dalam Javascript Teknologi Javascript Terkini Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 3. Kapan ?? Ketika ada sebuah event yang ingin dieksekusi Membuat tampilan halaman jadi lebih ‘hidup’ Validasi form Anything else..?? Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 4. Cara Penulisan Java Script dapat dituliskan dalam sebuah dokumen HTML dengan dua cara : Sebagai statement dan fungsi menggunakan tag SCRIPT Sebagai pengontrol perintah menggunakan tag HTML Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <SCRIPT LANGUAGE="JavaScript"> JavaScript statements.......... </SCRIPT >
- 5. Karakteristik Javascript Menggunakan blok awal “{“ dan blok akhir “}”. Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan huruf besar dan huruf kecil. Extension umumnya menggunakan “*.js”. Setiap statement dapat diakhiri dengan “;” sebagaimana dengan c++, tetapi dapat juga tidak. Jika tidak didukung dalam browser versi lama scriptnya, scriptnya dapat disembunyikan diantara tag “<!--” dan //--> Jika program dalam satu baris terlalu panjang dapat disambung kebaris berikut dengan karakter “\”. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 6. Cara Peletakan Internal Diantara tag <head> </head> Diantara tag <body> </body> Eksternal Diantara tag <head> </head> Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <script language=”Java Script” src=”url/file.js”> </script>
- 7. Variabel Penamaan Case sensitive Harus diawali dengan huruf atau underscore Bukan keyword JavaScript Tidak mengandung karakter tanda baca atau karakter untuk operasi pada script Scope Global Dapat diakses oleh seluruh fungsi Didefinisikan di luar fungsi Lokal Hanya dapat diakses oleh fungsi itu sendiri Dideklarasikan dalam fungsi Pemograman Web (2010/2011) – Hari Setiaji, S.Kom var namavariabel=nilai namavariabel=nilai
- 8. Struktur Kendali If (kondisi) { ... blok if ... } Else { ... blok else ... } Pemograman Web (2010/2011) – Hari Setiaji, S.Kom switch (variabel) { case nilai1 : perintah1; break; case nilai2 : perintah2; break; default perintahN; break; }
- 9. Fungsi Fungsi mengandung kode yang akan dieksekusi oleh sebuah event atau sebuah panggilan (call) terhadap fungsi tersebut Fungsi biasanya didefinisikan di section head, dan dipanggil dalam dokumen Fungsi dapat digunakan ulang (reuse) dalam script yang sama atau halaman lainnya NB : Jika tidak ada argumen harus ada tanda () di belakang nama fungsi Pemograman Web (2010/2011) – Hari Setiaji, S.Kom namafungsi(argumen1,argumen2,..argumen_n) { statement_code }
- 10. Fungsi Argumen adalah variabel yang digunakan dalam fungsi Nilainya adalah nilai yang dilewatkan ketika fungsi tersebut dipanggil fungsi mengembalikan nilai balik dengan menggunakan statement “return” Pemograman Web (2010/2011) – Hari Setiaji, S.Kom function total(a,b) { hasil=a+b; return hasil; }
- 11. Contoh Fungsi Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <script type="text/javascript"> function total(a,b) { hasil=a+b; return hasil; } Sum = total(3,5); document.write("Hasil penjumlahan 3 dan 5 adalah "+Sum); </script> Hasil penjumlahan dari 3 dan 5 adalah 8
- 12. Perulangan For While Do .. While Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Apa perbedaanya..? <h2>Menampilkan Header</h2> <script type="text/javascript"> for (i=1;i<=6;i++){ document.write("<h"+i+">Header"+i+"</h"+i+">") } </script>
- 13. Event Handler Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Event Event akan dijalankan ketika . . . onMouseover user meletakkan kursor mouse diatas suatu elemen onFocus user memberikan focus kepada satu elemen onBlur elemen kehilangan fokus, artinya user melakukan klik diluar elemen itu. onChange user memodifikasi isi dari data dalam satu field data onClick user melakukan klik mouse terhadap satu elemen yang berhubungan dengan event onLoad navigator user meload/memanggil suatu halaman onSubmit melakukan klik tombol submit onMouseout kursor mouse meninggalkan posisinya dari atas suatu elemen onReset menghapus data pada suatu form dengan bantuan satu tombol reset
- 14. Kotak Dialog Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 15. Object Dalam Javascript Pemograman Web (2010/2011) – Hari Setiaji, S.Kom browser Math date Window/ frame Navigator String document Link form anchor select Button/ Submit/ reset Text/ textarea radio checkbox
- 16. Teknologi terkini javascript Digunakan sebagai metode pengiriman request client dibelakang layar. Call it AJAX Tampilan halaman akan semakin ‘hidup’ dengan adanya library javascript. Example : jQuery, MooTools, Prototype. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 17. Growing up together.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 18. Clue for exam.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 19. To do list.. Review kembali materi HTML, CSS dan Javascript Update your project Pelajari database dan PHP Pelajari contoh-contoh Download URL : http://files.setiaji.info Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
- 20. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Editor's Notes
- #2: Pemrograman Web