Kompetensi Dasar:

3.9 Menerapkan client side scripting pada halaman web interaktif

4.9 Membuat halaman web interaktif menggunakan client side scripting

Materi Pokok :

1. Menjelaskan konsep web interaktif.

2. Perintah perintah dasar dalam aplikasi client side programming.



Mengenal JavaScript

Apa Itu JavaScript?

  • JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.
  • JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.
  • JavaScript biasanya disisipkan langsung pada halaman HTML.
  • Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.
  • JavaScript termasuk bahasa pemrograman yang biasanya untuk Client Side scripting, dimana bahasa pemrograman web yang pengolahannya dilakukan di sisi client
  • JavaScript bersifat Case Sensitive.
  • Nama resmi JavaScript : ECMAScript.
  • ECMAScript dikembangkan oleh ECMA Organization.
  • ECMA-262 adalah standar resmi JavaScript.
  • Diciptakan oleh Brendan Eich. Muncul pertama kali di semua browser Netscape dan Microsoft pada tahun 1996.
  • Disetujui sebagai standar internasional pada tahun 1998.


    • Keunggulan JavaScript

  • JavaScript dapat menempatkan text secara dinamis pada halaman HTML.
  • JavaScript dapat dieksekusi berdasarkan event tertentu.
  • JavaScript dapat membaca dan menuliskan elemen-elemen HTML.
  • JavaScript dapat digunakan untuk memvalidasi data dari form, sebelum dikirimkan ke server.
  • JavaScript dapat digunakan untuk mendeteksi browser pengunjung website.
  • JavaScript dapat digunakan untuk menyimpan dan mengambil informasi dari komputer pengunjung website.



    • Penggunaan JavaScript

    Menggunakan tag HTML <script>


    Contoh :


    <script type=“text/javascript”> ... ... </script>



    Penempatan JavaScript

  • Ditempatkan pada tag <head>
  • Ditempatkan pada tag <body>
  • Ditempatkan pada tag <head> dan <body>
  • Sebagai file external.


    • JavaScript pada Tag <head>

    Dengan menempatkan sintax JavaScript pada tag head, tidak akan mengganggu isi dari halaman web karena semua script disatukan pada satu tempat.


    Contoh :


    <head> <script type=“text/javascript”> alert(“JavaScript pada tag Head.”); </script> </head>


    JavaScript pada Tag <body>


    Contoh :


    <body> <h1>Belajar JavaScript</h1> <p> <script type=“text/javascript”> document.write(“JavaScript pada tag Body.”); </script> </p> </body>


    JavaScript Sebagai File External

  • Jika ingin menjalankan script JavaScript yang sama di banyak halaman, gunakan JavaScript sebagai file independen.
  • Simpan file tersebut dengan ekstensi .js

    • Contoh :


    <head> <script type=“text/javascript” src=“external.js”> </script> </head>


    File contoh1.js

    document.write(“<h2>Text ini ditulis dengan JavaScript</h2>”);

    File contoh1.html

    <head> <script type=“text/javascript” src=“contoh1.js”></script> </head>

    Hasilnya :





    Variabel

    Aturan penulisan Variabel :

  • Nama variabel bersifat Case Sensitive
  • Harus dimulai dengan huruf atau karakter underscore.

    • Deklarasi Variabel dengan statement var

  • var nama;
  • var nama=“Sandhika”;

    • Variabel yang tidak dideklarasikan

  • nama=“Sandhika”;
  • x=y+5;

    • Contoh Penggunaan Variabel

    Contoh :



    Hasilnya :





    Operator Aritmatika

    Macam-macam Operator Aritmatika pada JavaScript




    Contoh Penggunaan Operator Aritmatika

    Penggunaan operator + pada string.


    Contoh :



    Hasilnya :



    Contoh :


    x=5+5;
    document.write(x); → 10


    x="5"+"5";
    document.write(x); → 55


    x=5+"5";
    document.write(x); → 55


    x="5"+5;
    document.write(x); → 55

    Jika menggabungkan angka dengan string, maka hasilnya akan string.




    Operator Assigment

    Macam-macam operator Assigment pada JavaScript.


    Contoh Penggunaan Operator Assigment


    Contoh :



    Hasilnya :





    Komentar

  • Digunakan untuk menerangkan script JavaScript yang dibuat.
  • Mencegah script tersebut dieksekusi oleh browser.

    • Macam-macam komentar.

  • Single Line

    • › Dimulai dengan karakter : //


  • Multi Line

    • › Dimulai dengan karakter : /*

    › Diakhiri dengan karakter : */


    Contoh :

    /*
    document.write(“Script ini tidak akan dieksekusi”);
    */




    Operator Pembanding

    Macam - macam operator pembanding

  • Misal nilai x = 5.




    • Operator Logika

    Macam – macam operator logika

  • Misal nilai x = 6, dan y = 3.




    • Pengkondisian

    Pada JavaScript terdapat beberapa macam pengkondisian

  • if (kondisi)

    • › Gunakan statement ini untuk mengeksekusi source code hanya jika satu kondisi bernilai true.

  • if (kondisi1) else (kondisi2)

    • › Gunakan statement ini untuk mengeksekusi soure code jika satu kondisi bernilai true, dan kondisi lain bernilai false.

  • if (kondisi1) else if (kondisi2) else (kondisi3)

    • › Gunakan statement ini untuk memilih satu dari banyak kondisi.

  • switch

    • › Gunakan statement ini untuk memilih satu dari banyak kondisi.



    Contoh Penggunaan Pengkondisian


  • if statement


    • Sintaksnya :


    if (kondisi) { aksi }

    Contoh :



    Hasilnya :


    `


  • if (kondisi1) else (kondisi2)


    • Sintaksnya :


    if (kondisi) { aksi } else { aksi }


    Contoh :



    Hasilnya :




  • if (kondisi1) else if (kondisi2) else (kondisi3)

    • Sintaksnya :


    if (kondisi1) { dieksekusi jika kondisi1 bernilai true } else if (kondisi2) { dieksekusi jika kondisi1 false dan kondisi2 true } else { dieksekusi jika kondisi1 dan kondisi2 false }

    Contoh :



    Hasilnya :




  • Switch


    • Sintaksmya :


    switch (n) { case 1 : { aksi 1 } break; case 2 : { aksi 2 } break; default : { aksi default } }

  • n adalah variabel
  • Gunakan break untuk mencegah case berikutnya tereksekusi otomatis.

    • Contoh :



    Hasilnya :





    Ternary

  • Menggunakan tanda “?”
  • Merupakan model penyederhanaan dari if...else
  • Cocok untuk melakukan proses pengisian variabel suatu hasil pengujian.

    • Sintaks

    namaVariabel = (kondisi)? Nilai1 : Nilai2;

    Contoh :



    Hasilnya :





    Pengulangan

    Pada JavaScript, ada dua macam pengulangan :

  • FOR, pengulangan sebanyak jumlahyang ditentukan
  • WHILE, pengulangan sampai bertemu kondisi “true”

    • Pengulangan - for


    Sintaksnya :


    for (var=startValue; var<=endValue; var=var+increment) { source code }

    Contoh :



    Hasilnya :




    Pengulangan - for


    Sintaksnya :


    var=startValue; while (var<=endValue) { source code }


    Contoh :



    Hasilnya :




    Pengulangan for..In


    Sintaksnya For...In melakukan pengulangan sebanyak elemen array atau sebanyak properti dari suatu objek.


    Contoh :



    Hasilnya :





    Break Statement

    Perintah break akan menghentikan pengulangan dan akan mengeksekusi sintaks berikutnya setelah pengulangan.


    Contoh :



    Hasilnya :





    Continue Statement

    Perintah continue akan melewati value pengulangan yang ditentukan, kemudian melanjutkan ke value berikutnya.


    Contoh :



    Hasilnya :