Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WEB PROGRAMMINGLECTURE 6 – JAVASCRIPT (1)                ORGANIZED BY                     GHIFAR
MATERI JAVASCRIPT (1)    Pendahuluan    Sintaks Dasar    Penggunaan Javascript    Hirarki Objek Javascript    Function
PENDAHULUAN JAVASCRIPT Client-side scripting Bahasa scripting yang paling populer di Internet,  dapat berjalan di hampir...
PENDAHULUAN JAVASCRIPT (2) : APA YANGDAPAT DILAKUKAN JAVASCRIPT? sebagai alat pemrograman bagi desainer HTML dapat melet...
SINTAKS DASAR (1)       Case sensitive             <script language=”javascript”>                       <!--             ...
SINTAKS DASAR (2)   Contoh :       <html>        <body>        <h1>My First Web Page</h1>        <script type="text/javas...
PENGGUNAAN JAVASCRIPT1.   Di dalam tag <body>     <html>      <body>       <h1>My First Web Page</h1>                     ...
PENGGUNAAN JAVASCRIPT (2)2.   Di dalam tag <head>      Dieksekusi saat sebuah event terjadi      Event ditangani oleh se...
PENGGUNAAN JAVASCRIPT (3)3.   File eksternal      Ekstensi : js      Dapat digunakan oleh banyak halaman web         <ht...
HIRARKI OBJEK JAVASCRIPT   Dua tipe objek:       Language object           Disediakan oleh bahasa dan tidak bergantung ...
Object      Properties                  Methods               Event HandlerWindow      frames , status, top,name   alert, ...
function functionname(var1,var2,...,varX) {  // some code}
<html> <head>   <script type="text/javascript">     function displaymessage() {       alert("Hello World!");    }  </scrip...
<p id=bgchange style="background-color: 0000ff”>The background changes every half second</p><script type=“text/javascript"...
That’s all for today Any Question ?
Lecture06 javascript1
Lecture06 javascript1
Lecture06 javascript1
Lecture06 javascript1
Lecture06 javascript1
Lecture06 javascript1
Lecture06 javascript1
Lecture06 javascript1
Upcoming SlideShare
Loading in …5
×

Lecture06 javascript1

2,491 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Lecture06 javascript1

  1. 1. WEB PROGRAMMINGLECTURE 6 – JAVASCRIPT (1) ORGANIZED BY GHIFAR
  2. 2. MATERI JAVASCRIPT (1)  Pendahuluan  Sintaks Dasar  Penggunaan Javascript  Hirarki Objek Javascript  Function
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. function functionname(var1,var2,...,varX) { // some code}
  13. 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. 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. 15. That’s all for today Any Question ?

×