Web Programming - Javascript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web Programming - Javascript

on

  • 2,547 views

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

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

Statistics

Views

Total Views
2,547
Views on SlideShare
2,547
Embed Views
0

Actions

Likes
0
Downloads
178
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Pemrograman Web

Web Programming - Javascript Presentation Transcript

  • 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=&quot;JavaScript&quot;> 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=&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. Perulangan
    • For
    • While
    • Do .. While
    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. 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