SlideShare une entreprise Scribd logo
1  sur  23
WEB PROGRAMMING
LECTURE 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 semua browser
 Didesain untuk menambah interaktifitas pada
  halaman HTML
 Interpreted language (tanpa kompilasi)

 Free (tanpa membeli lisensi)

 Javascript is not Java !
PENDAHULUAN JAVASCRIPT (2) : APA YANG
DAPAT 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
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 objek
Komentar lebih dari satu baris                /* statement-statement javascript */
                                              //-->
                                    </script>
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>
PENGGUNAAN JAVASCRIPT
1.   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>
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>
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
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
Object      Properties                  Methods               Event Handler
Window      frames , status, top,name   alert, confirm,       onLoad, onUnload,
                                        prompt, close         onBlur, onFocus
History     length, forward, go         back                  -
Navigator   appCodeName, appName, javaEnabled                 -
            appVersion, plugins
Documents   alinkColor, anchors,        open, close, write,   -
            bgColor, title
Image       border, complete, height    -                     -
Form        action, elements,           submit, reset         onSubmit, onReset
            FileUpload
function functionname(var1,var2,...,varX) {
  // some code
}
<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>
<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>
That’s all for today




 Any Question ?

Contenu connexe

Tendances (16)

Tutorial Jsp (Java Server Page) Bagian 1
Tutorial Jsp (Java Server Page) Bagian 1Tutorial Jsp (Java Server Page) Bagian 1
Tutorial Jsp (Java Server Page) Bagian 1
 
Pertemuan java script 1
Pertemuan java script 1Pertemuan java script 1
Pertemuan java script 1
 
Jquery ppt
Jquery pptJquery ppt
Jquery ppt
 
Modul praktikum javascript
Modul praktikum javascriptModul praktikum javascript
Modul praktikum javascript
 
Panduan lengkap php ajax j query
Panduan lengkap php ajax j queryPanduan lengkap php ajax j query
Panduan lengkap php ajax j query
 
Java sfb
Java sfbJava sfb
Java sfb
 
Pertemuan java script 2
Pertemuan java script 2Pertemuan java script 2
Pertemuan java script 2
 
Jeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar JspJeni Web Programming Bab 4 Dasar Jsp
Jeni Web Programming Bab 4 Dasar Jsp
 
materi webdesign - CSS
materi webdesign - CSSmateri webdesign - CSS
materi webdesign - CSS
 
modul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Webmodul CSS tugas Pemrograman Berbasis Web
modul CSS tugas Pemrograman Berbasis Web
 
membuat hello world
membuat hello worldmembuat hello world
membuat hello world
 
Pemrograman Web 6 - jQuery
Pemrograman Web 6 - jQueryPemrograman Web 6 - jQuery
Pemrograman Web 6 - jQuery
 
Tutorial Jsp (Java Server Page) Bagian 1
Tutorial Jsp (Java Server Page) Bagian 1Tutorial Jsp (Java Server Page) Bagian 1
Tutorial Jsp (Java Server Page) Bagian 1
 
Modul Javascript
Modul JavascriptModul Javascript
Modul Javascript
 
Pemrograman Web 5 - Javascript
Pemrograman Web 5 - JavascriptPemrograman Web 5 - Javascript
Pemrograman Web 5 - Javascript
 
Pengenalan pemrograman android
Pengenalan pemrograman androidPengenalan pemrograman android
Pengenalan pemrograman android
 

Similaire à Lecture06 javascript1

Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
Rian Affan
 
Web mvc dengan java jsp seri 1
Web mvc dengan java   jsp seri 1Web mvc dengan java   jsp seri 1
Web mvc dengan java jsp seri 1
Zaenal Arifin
 
Jeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced JsfJeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced Jsf
Individual Consultants
 

Similaire à Lecture06 javascript1 (20)

Praktikum javascript
Praktikum javascriptPraktikum javascript
Praktikum javascript
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
 
Moduljavascript
ModuljavascriptModuljavascript
Moduljavascript
 
web_06-javascript.pdf
web_06-javascript.pdfweb_06-javascript.pdf
web_06-javascript.pdf
 
Jquery id
Jquery idJquery id
Jquery id
 
54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery54 hal-dasar-dasar-jquery
54 hal-dasar-dasar-jquery
 
Javascript
JavascriptJavascript
Javascript
 
Selayang Pandang Javascript dan NodeJS
Selayang Pandang Javascript dan NodeJSSelayang Pandang Javascript dan NodeJS
Selayang Pandang Javascript dan NodeJS
 
Pemrograman Web - Client Side Javascript
Pemrograman Web - Client Side JavascriptPemrograman Web - Client Side Javascript
Pemrograman Web - Client Side Javascript
 
Pelatihan j query
Pelatihan j queryPelatihan j query
Pelatihan j query
 
Web mvc dengan java jsp seri 1
Web mvc dengan java   jsp seri 1Web mvc dengan java   jsp seri 1
Web mvc dengan java jsp seri 1
 
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLiteCara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
Cara Membuat Aplikasi Android Resep Masakan Sederhana Android-SQLite
 
Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6
 
Tugas 3
Tugas 3Tugas 3
Tugas 3
 
Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6Mengamankan Aplikasi Java EE 6
Mengamankan Aplikasi Java EE 6
 
Tugas 3 0317 hendrie prasetyo 1612510899
Tugas 3 0317 hendrie prasetyo 1612510899Tugas 3 0317 hendrie prasetyo 1612510899
Tugas 3 0317 hendrie prasetyo 1612510899
 
Tugas 3 0317
Tugas 3 0317Tugas 3 0317
Tugas 3 0317
 
Jeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced JsfJeni Web Programming Bab 10 Advanced Jsf
Jeni Web Programming Bab 10 Advanced Jsf
 
SESI 3 FE.pptx
SESI 3 FE.pptxSESI 3 FE.pptx
SESI 3 FE.pptx
 

Plus de Muhammad Ghifary

Plus de Muhammad Ghifary (6)

Baby it s cold outside
Baby it s cold outsideBaby it s cold outside
Baby it s cold outside
 
Moodle presentationunpar
Moodle presentationunparMoodle presentationunpar
Moodle presentationunpar
 
Materi trainingweb dr
Materi trainingweb drMateri trainingweb dr
Materi trainingweb dr
 
Presentasi seminar penelitian pemodelan web services di unpar
Presentasi seminar penelitian pemodelan web services di unparPresentasi seminar penelitian pemodelan web services di unpar
Presentasi seminar penelitian pemodelan web services di unpar
 
Presentasi seminar penelitian pemodelan web services di unpar
Presentasi seminar penelitian pemodelan web services di unparPresentasi seminar penelitian pemodelan web services di unpar
Presentasi seminar penelitian pemodelan web services di unpar
 
Multimedia Tech
Multimedia TechMultimedia Tech
Multimedia Tech
 

Lecture06 javascript1

  • 1. WEB PROGRAMMING LECTURE 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 YANG DAPAT 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 objek Komentar 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 JAVASCRIPT 1. 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.
  • 12.
  • 13. Object Properties Methods Event Handler Window frames , status, top,name alert, confirm, onLoad, onUnload, prompt, close onBlur, onFocus History length, forward, go back - Navigator appCodeName, appName, javaEnabled - appVersion, plugins Documents alinkColor, anchors, open, close, write, - bgColor, title Image border, complete, height - - Form action, elements, submit, reset onSubmit, onReset FileUpload
  • 14.
  • 15.
  • 16.
  • 17.
  • 19. <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>
  • 20. <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>
  • 21.
  • 22.
  • 23. That’s all for today Any Question ?