Lecture06 javascript1

  • 1,947 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,947
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WEB PROGRAMMINGLECTURE 6 – JAVASCRIPT (1) ORGANIZED BY GHIFAR
  • 2. MATERI JAVASCRIPT (1)  Pendahuluan  Sintaks Dasar  Penggunaan Javascript  Hirarki Objek Javascript  Function
  • 3. PENDAHULUAN JAVASCRIPT Client-side scripting Bahasa scripting yang paling populer di Internet, dapat berjalan di hampir semua browser Didesain untuk menambah interaktifitas pada halaman HTML Interpreted language (tanpa kompilasi) Free (tanpa membeli lisensi) Javascript is not Java !
  • 4. PENDAHULUAN JAVASCRIPT (2) : APA YANGDAPAT DILAKUKAN JAVASCRIPT? sebagai alat pemrograman bagi desainer HTML dapat meletakkan teks dinamis pada halaman HTML  document.write(“<h1>”+name+”</h1>”); {name merupakan variable} dapat bereaksi terhadap event dapat membaca dan menulis elemen HTML dapat digunakan untuk validasi data dapat mendeteksi pengunjung browser dapat membuat cookie
  • 5. SINTAKS DASAR (1)  Case sensitive <script language=”javascript”> <!-- // pendefinisian variabel atau objek /* statement-statement javascript */ //--> </script> <script type="text/javascript"> Komentar satu baris <!-- // pendefinisian variabel atau objekKomentar lebih dari satu baris /* statement-statement javascript */ //--> </script>
  • 6. SINTAKS DASAR (2) Contoh : <html> <body> <h1>My First Web Page</h1> <script type="text/javascript"> document.write("<p> Hello World! </p>"); </script> </body> </html>
  • 7. PENGGUNAAN JAVASCRIPT1. Di dalam tag <body> <html> <body> <h1>My First Web Page</h1> Latihan: Tukar baris kode berikut dan lihat <p id="demo"></p> hasilnya di browser. Apa yang terjadi dan mengapa? <script type="text/javascript"> document.getElementById("demo").innerHTML=Date(); </script> </body> </html>
  • 8. PENGGUNAAN JAVASCRIPT (2)2. Di dalam tag <head>  Dieksekusi saat sebuah event terjadi  Event ditangani oleh sebuah fungsi <head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First Web Page</h1> <p id="demo"></p> <button type="button" onclick="displayDate()">Display Date</button> </body>
  • 9. PENGGUNAAN JAVASCRIPT (3)3. File eksternal  Ekstensi : js  Dapat digunakan oleh banyak halaman web <html> <head> <script type="text/javascript" src=”sample.js"></script> </head> <body> </body> </html> Perhatikan lokasi penyimpanan file eksternal
  • 10. HIRARKI OBJEK JAVASCRIPT Dua tipe objek:  Language object  Disediakan oleh bahasa dan tidak bergantung pada objek lain  Navigator  Disediakan oleh browser, tergantung pada jenis browser yang digunakan
  • 11. Object Properties Methods Event HandlerWindow frames , status, top,name alert, confirm, onLoad, onUnload, prompt, close onBlur, onFocusHistory length, forward, go back -Navigator appCodeName, appName, javaEnabled - appVersion, pluginsDocuments alinkColor, anchors, open, close, write, - bgColor, titleImage border, complete, height - -Form action, elements, submit, reset onSubmit, onReset FileUpload
  • 12. function functionname(var1,var2,...,varX) { // some code}
  • 13. <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body></html>
  • 14. <p id=bgchange style="background-color: 0000ff”>The background changes every half second</p><script type=“text/javascript">function turn_red() { bgchange.style.backgroundColor="ff8080"; greenTimer=setTimeout("turn_green()", 500);}function turn_green() { function turn_blue() { bgchange.style.backgroundColor bgchange.style.backgroundColor="8080ff"; ="80ff80"; redTimer=setTimeout("turn_red()", 500); blueTimer= } setTimeout("turn_blue()", 500);} turn_red(); </script>
  • 15. That’s all for today Any Question ?