WEB – Javascript Pemograman Web (2010/2011) – Mar 24, 2011  Teknik Informatika, Universitas Islam Indonesia Follow  Hari S...
Point of today.. <ul><li>Kapan Menggunakan Javascript ? </li></ul><ul><li>Cara Penulisan </li></ul><ul><li>Cara Peletakan ...
Kapan ?? <ul><li>Ketika ada sebuah event yang ingin dieksekusi </li></ul><ul><li>Membuat tampilan halaman jadi lebih ‘hidu...
Cara Penulisan <ul><li>Java Script dapat dituliskan dalam sebuah dokumen HTML dengan dua cara : </li></ul><ul><li>Sebagai ...
Karakteristik Javascript <ul><li>Menggunakan blok awal “{“ dan blok akhir “}”. </li></ul><ul><li>Case Sensitive  artinya m...
Cara Peletakan <ul><li>Internal </li></ul><ul><ul><li>Diantara tag <head> </head> </li></ul></ul><ul><ul><li>Diantara tag ...
Variabel <ul><li>Penamaan </li></ul><ul><ul><li>Case sensitive </li></ul></ul><ul><ul><li>Harus diawali dengan huruf atau ...
Struktur Kendali <ul><li>If (kondisi) </li></ul><ul><li>{ </li></ul><ul><li>... blok if ...  </li></ul><ul><li>} </li></ul...
Fungsi <ul><li>Fungsi mengandung kode yang akan dieksekusi oleh sebuah event atau sebuah panggilan (call) terhadap fungsi ...
Fungsi <ul><li>Argumen adalah variabel yang digunakan dalam fungsi </li></ul><ul><li>Nilainya adalah nilai yang dilewatkan...
Contoh Fungsi Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <script type=&quot;text/javascript&quot;> function total(a,...
Perulangan <ul><li>For </li></ul><ul><li>While </li></ul><ul><li>Do .. While  </li></ul>Pemograman Web (2010/2011) – Hari ...
Event Handler Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Event Event akan dijalankan ketika . . . onMouseover user m...
Kotak Dialog Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Object Dalam Javascript Pemograman Web (2010/2011) – Hari Setiaji, S.Kom browser Math date Window/ frame Navigator String ...
Teknologi terkini javascript <ul><li>Digunakan sebagai metode pengiriman request client dibelakang layar. Call it  AJAX </...
Growing up together.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Clue for exam.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
To do list.. <ul><li>Review kembali materi HTML, CSS dan Javascript </li></ul><ul><li>Update your project </li></ul><ul><l...
Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
Upcoming SlideShare
Loading in...5
×

Web Programming - Javascript

2,392

Published on

Materi javascript dasar. Dimulai dari cara penulisan, peletakkan dan komponen-komponen lainnya. Enjoy..

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,392
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
188
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Pemrograman Web
  • Web Programming - Javascript

    1. 1. WEB – Javascript Pemograman Web (2010/2011) – Mar 24, 2011 Teknik Informatika, Universitas Islam Indonesia Follow Hari Setiaji on Twitter
    2. 2. Point of today.. <ul><li>Kapan Menggunakan Javascript ? </li></ul><ul><li>Cara Penulisan </li></ul><ul><li>Cara Peletakan </li></ul><ul><li>Variabel </li></ul><ul><li>Struktur Kendali </li></ul><ul><li>Fungsi </li></ul><ul><li>Perulangan </li></ul><ul><li>Event Handler </li></ul><ul><li>Kotak Dialog </li></ul><ul><li>Object Dalam Javascript </li></ul><ul><li>Teknologi Javascript Terkini </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    3. 3. Kapan ?? <ul><li>Ketika ada sebuah event yang ingin dieksekusi </li></ul><ul><li>Membuat tampilan halaman jadi lebih ‘hidup’ </li></ul><ul><li>Validasi form </li></ul><ul><li>Anything else..?? </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    4. 4. Cara Penulisan <ul><li>Java Script dapat dituliskan dalam sebuah dokumen HTML dengan dua cara : </li></ul><ul><li>Sebagai statement dan fungsi menggunakan tag SCRIPT </li></ul><ul><li>Sebagai pengontrol perintah menggunakan tag HTML </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <SCRIPT LANGUAGE=&quot;JavaScript&quot;> JavaScript statements.......... </SCRIPT >
    5. 5. Karakteristik Javascript <ul><li>Menggunakan blok awal “{“ dan blok akhir “}”. </li></ul><ul><li>Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan huruf besar dan huruf kecil. </li></ul><ul><li>Extension umumnya menggunakan “*.js”. </li></ul><ul><li>Setiap statement dapat diakhiri dengan “;” sebagaimana dengan c++, tetapi dapat juga tidak. </li></ul><ul><li>Jika tidak didukung dalam browser versi lama scriptnya, scriptnya dapat disembunyikan diantara tag “<!--” dan //--> </li></ul><ul><li>Jika program dalam satu baris terlalu panjang dapat disambung kebaris berikut dengan karakter “”. </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    6. 6. Cara Peletakan <ul><li>Internal </li></ul><ul><ul><li>Diantara tag <head> </head> </li></ul></ul><ul><ul><li>Diantara tag <body> </body> </li></ul></ul><ul><li>Eksternal </li></ul><ul><ul><li>Diantara tag <head> </head> </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <script language=”Java Script” src=”url/file.js”> </script>
    7. 7. Variabel <ul><li>Penamaan </li></ul><ul><ul><li>Case sensitive </li></ul></ul><ul><ul><li>Harus diawali dengan huruf atau underscore </li></ul></ul><ul><ul><li>Bukan keyword JavaScript </li></ul></ul><ul><ul><li>Tidak mengandung karakter tanda baca atau karakter untuk operasi pada script </li></ul></ul><ul><li>Scope </li></ul><ul><ul><li>Global </li></ul></ul><ul><ul><ul><li>Dapat diakses oleh seluruh fungsi </li></ul></ul></ul><ul><ul><ul><li>Didefinisikan di luar fungsi </li></ul></ul></ul><ul><ul><li>Lokal </li></ul></ul><ul><ul><ul><li>Hanya dapat diakses oleh fungsi itu sendiri </li></ul></ul></ul><ul><ul><ul><li>Dideklarasikan dalam fungsi </li></ul></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <ul><ul><li>var namavariabel=nilai </li></ul></ul><ul><ul><li>namavariabel=nilai </li></ul></ul>
    8. 8. Struktur Kendali <ul><li>If (kondisi) </li></ul><ul><li>{ </li></ul><ul><li>... blok if ... </li></ul><ul><li>} </li></ul><ul><li>Else </li></ul><ul><li>{ ... blok else ... </li></ul><ul><li>} </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom switch (variabel) { case nilai1 : perintah1; break; case nilai2 : perintah2; break; default perintahN; break; }
    9. 9. Fungsi <ul><li>Fungsi mengandung kode yang akan dieksekusi oleh sebuah event atau sebuah panggilan (call) terhadap fungsi tersebut </li></ul><ul><li>Fungsi biasanya didefinisikan di section head, dan dipanggil dalam dokumen </li></ul><ul><li>Fungsi dapat digunakan ulang (reuse) dalam script yang sama atau halaman lainnya </li></ul><ul><ul><li>NB : Jika tidak ada argumen harus ada tanda () di belakang nama fungsi </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <ul><ul><li>namafungsi(argumen1,argumen2,..argumen_n) </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li> statement_code </li></ul></ul><ul><ul><li>} </li></ul></ul>
    10. 10. Fungsi <ul><li>Argumen adalah variabel yang digunakan dalam fungsi </li></ul><ul><li>Nilainya adalah nilai yang dilewatkan ketika fungsi tersebut dipanggil </li></ul><ul><li>fungsi mengembalikan nilai balik dengan menggunakan statement “return” </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <ul><li>function total(a,b) </li></ul><ul><li>{ </li></ul><ul><ul><li> hasil=a+b; </li></ul></ul><ul><ul><li>return hasil; </li></ul></ul><ul><ul><li>} </li></ul></ul>
    11. 11. Contoh Fungsi Pemograman Web (2010/2011) – Hari Setiaji, S.Kom <script type=&quot;text/javascript&quot;> function total(a,b) { hasil=a+b; return hasil; } Sum = total(3,5); document.write(&quot;Hasil penjumlahan 3 dan 5 adalah &quot;+Sum); </script> Hasil penjumlahan dari 3 dan 5 adalah 8
    12. 12. Perulangan <ul><li>For </li></ul><ul><li>While </li></ul><ul><li>Do .. While </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom Apa perbedaanya..? <h2>Menampilkan Header</h2> <script type=&quot;text/javascript&quot;> for (i=1;i<=6;i++){ document.write(&quot;<h&quot;+i+&quot;>Header&quot;+i+&quot;</h&quot;+i+&quot;>&quot;) } </script>
    13. 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. 14. Kotak Dialog Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    15. 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. 16. Teknologi terkini javascript <ul><li>Digunakan sebagai metode pengiriman request client dibelakang layar. Call it AJAX </li></ul><ul><li>Tampilan halaman akan semakin ‘hidup’ dengan adanya library javascript. Example : jQuery, MooTools, Prototype. </li></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    17. 17. Growing up together.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    18. 18. Clue for exam.. Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    19. 19. To do list.. <ul><li>Review kembali materi HTML, CSS dan Javascript </li></ul><ul><li>Update your project </li></ul><ul><li>Pelajari database dan PHP </li></ul><ul><li>Pelajari contoh-contoh </li></ul><ul><ul><li>Download URL : http://files.setiaji.info </li></ul></ul>Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    20. 20. Finally Pemograman Web (2010/2011) – Hari Setiaji, S.Kom
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×