Memanfaatkan JavaScript dan jQuery Untuk Pemrograman Web

Materi Pokok

  • Pengenalan JavaScript
  • Cara meletakan kode JavaScript
  • Cara memeriksa kesalahan 
  • Cara membuat fungsi
  • Aturan penamaan variabel
  • Perintah if dan switch
  • Perintah while, do.. while, dan for
  • Array
  • jQuery
  • Penanganan kejadian dengan jQuery
  • Berbagai pustaka di jQuery

1. Bisakah dijelaskan tentang JavaScript?

JavaScript adalah bahasa pemrograman yang penggunaannya diletakan di dokumen HTML. Kode ditulis di dalam pasangan tag <script> dan </script>. Berbeda dengan kode php yang diproses di server, kode javaScript diproses disisi klien karena sifatnya tersebut, JavaScript dapat digunakan misalnya untuk validasi data di formulir di sisi klien sehingga tidak terjadi komunikasi bolak-balik dengan server. Di samping itu, JavaScript melalui pendekatan AJAX dapat digunakan untuk merubah isi sebagian area di halaman web berdasarkan data yang diperoleh dari server. 
Apabila kamu sudah terbiasa dengan PHP, mempelajari javaScript tidaklah sulit karena ada kemiripan atau hampir sama. Akan tetapi penting kamu ketahui  jangan sampai mencampuradukan kode PHP dan javaScript karena keduanya merupakan bahsa yang berbeda.
JavaScript tidak memerlukan piranti khusus. Browser telah menyediakan pemrosesan JavaScript oleh karena itu kamu bisa langsung membuat kode javaScript tanpa memerlukan aplikasi tambahan.

2. Dimana saja Kode JavaScript bisa dituliskan?

Kode JavaScript bisa diletakan di dalam pasangan tag <head>..</head> setelah <title>..</title>. Namun, kode JavaScript bisa juga diletakan di bagian <body>..</body> . Contoh berikut memperlihatkan peletakan kode JavaScript di dalam tag <head>..</head>:

<!doctype html>
<html>
   <head>
      <title>Contoh Java Script</title>
      <script type=”text/javascript”>
         window.onload = init;
       
         function init() {         
            var elemenInfo = document.getElementById(“info”);
            var teks = “Well, saya dibangkitkan oleh JavaScript”;
            elemenInfo.innerHTML = teks;
         }

      </script>
   </head>
   <body>
      <h1>Contoh HTML, PHP, dan JavaScript</h1>
      <div>Tulisan ini berasal dari kode HTML</div>
      <?php
         print(“Tulisan ini dibangkitkan oleh PHP”);
      ?>
      <div id=”info”></div>
   </body>
</html>

pada dokumen diatas, kode

<script type=”text/javascript”>
         window.onload = init;
       
         function init() {         
            var elemenInfo = document.getElementById(“info”);
            var teks = “Well, saya dibangkitkan oleh JavaScript”;
            elemenInfo.innerHTML = teks;
         }

      </script>

menyatakan kode JavaScript. Hal ini ditandai dengan  <script type=”text/javascript”> dan di akhiri </script> Kode tersebut terletak di dalam tag <head> dan </head> setelah pasangan <title> dan </title>. 

Pernyataan 

window.onload = init;

menyatakan bahwa kalau seluruh elemen di HTML sudah termuat di halaman web ( dinyatakan dengan atribut onload pada window), fungsi init akan dijalankan. Sementara definisi fungsi init adalah sebagai beriukut:

function init() {

…

}

Pernyataan

var elemenInfo = document.getElementById(“info”);

digunakan untuk membuat variabel elemenInfo agar merujuk ke elemen HTML yang ber ID “info”. Elemen yang dimaksud adalah :

<div id =”info”</div>

dalam hal ini, var digunakan untuk mendeklarasikan variabel. Pernyataan

var teks = “well, saya dibangkitkan oleh JavaScript’;

digunkan untuk mendeklarasikan variabel teks dan diisi dengan string:

“well, saya dibangkitkan oleh JavaScript”

Selanjutnya ,

elemenInfo.innerHTML = teks;

digunakan untuk mengisikan variabel teks ke bagian elemen yang dirujuk oleh elemenInfo. Dalam hal ini, innerHTML adalah properti milik elemen tersebut yang menyatakan isi elemen. Hasil pemanggilan jscript.php seperti berikut:

Memanfaatkan JavaScript dan jQuery Untuk Pemrograman Web
JavaScript

Hal yang serupa, khususnya yang dibangkitkan oleh JavaScript, bisa ditulis menjadi seperti berikut:

<!doctype html>
<html>
   <head>
      <title>Contoh Java Script</title>
   </head>
   <body>
      <h1>Contoh HTML, PHP, dan JavaScript</h1>
      <div>Tulisan ini berasal dari kode HTML</div>
      <?php
         print(“Tulisan ini dibangkitkan oleh PHP”);
      ?>
      <div id=”info”>
          <script type=”text/javascript”>
             document.write(“Well, saya dibangkitkan oleh JavaScript”);
          </script>
      </div>
   </body>
</html>

Perhatikan bahwa kode JavaScript diletakan di dalam pasangan tag <div> dan </div> yang berada di body. selain itu, penampilan string dilakukan melalui document.write () dan tidak perlu ada rujukan ke elemen HTML karena kode sudah berada di elemen bersangkutan yaitu <div>.

Kode JavaScript sering juga diletakan di file yang terpisah dengan file yang berisi kode HTML. Pada keadaan seperti ini, kode javaScript disimpan di file berekstensi .js. sebagai contoh, perhatikan file berikut:

window.onload = init;

function init() {
        var elemenInfo = document.getElementById(“info”);
        var teks = “well, saya dibangkitkan oleh JavaScript”;
        elemenInfo.innerHTML = teks;
}

Penggunaan kode di atas dapat dilihat di dokumen berikut:

<!doctype html>
<html>
   <head>
      <title>Contoh Java Script</title>
      <script type=”text/javascript” src=”contoh.js”></script>
   </head>
   <body>
      <h1>Contoh HTML, PHP, dan JavaScript</h1>
      <div>Tulisan ini berasal dari kode HTML</div>
      <?php
         print(“Tulisan ini dibangkitkan oleh PHP”);
      ?>
      <div id=”info”></div>
   </body>
</html>

Hasilnya akan sama seperti jscript.php

CATATAN

  1. Pernyataan di JavaScript  sebenarnya tidak harus di akhiri dengan titik komasepanjang di baris tempat pernyataan tersebut berada hanya berisi satu pernyataan. Namun dianjurkan untuk tetap menyertakan titik koma di akhir pernyataan.
  2. Di JavaScript, tanda petik ganda (“) yang mengapit string boleh digantikan dengan tanda petik tunggal (‘).

3. Bagaimana caranya mengetahui kode JavaScript yang salah?

Jika kamu menggunakan browser Google Chrome, kamu bisa memonitor kesalahan kode JavaScript dengan menekan tombol Ctrl+Shift+J terlebih dahulu. Untuk memahami hal ini,  cobalah untuk menuliskan dokumen seperti berikut:

<!doctype html>
<html>
   <head>
      <title>Contoh Java Script</title>

   </head>
   <body>
      <script type=”text/javascript”>
         document.writ(“Apakah Anda melihat tulisan ini”);
      </script>
   </body>
</html>

Perhatikan , document.write sengaja ditulis menjadi document.writ ( tanpa e). Lalu panggilah di browser. Hasilnya, halaman web dalam keadaan kosong, seperti terlihat di bawah ini.

ujisalah

Sekarang, cobalah menekan tombol ctrl+shift+j!. Kamu akan menjumpai hasil seperti berikut:

tampilan kesalahan

Pesan kesalahan terpenting terletak pada baris pertama, yang menyatakan bahwa metode writ tidak dikenal. Sekarang, cobalah untuk menambahkan e setelah write. simpan dokumen dan panggil kembali di browser. Hasilnya  seperti berikut:

Tampilan uji kesalahan
Tampak bahwa tulisan hasil write () sudah terlihat dan pesan bahwa writ tidak ada atau tidak muncul.
CATATAN
  1. Pesan lain diabaikan saja karena tidak ada hubungan dengan kode yang kamu tulis.
  2. Pada Firefox, Error Console ( jendela yang berisi pesan kesalahan) diaktifkan dengan menggunakan Ctrl+Shift+J
  3. Untuk menghapus pesan terdahulu, kliklah pada Clear.

4. Bagaimana cara membuat fungsi di JavaScript?

Bentuk definisi fungsi adalah sebagai berikut:

function nama (daftar_argumen) {

pernyataan_1;

…

pernyataan_2;

}

Pernyataan return di gunakan untuk memberikan nilai balik fungsi. kala nilai balik tidak diperlukan maka tidak perlu ada return.  Pada contoh di atas

function init() {
        var elemenInfo = document.getElementById(“info”);
        var teks = “well, saya dibangkitkan oleh JavaScript”;
        elemenInfo.innerHTML = teks;
}

Pada contoh kode di atas tidak mengandung return.

Di fungsi, variabel yang dideklarasikan sebagai var berlaku sebagai variabel lokal.  Jika variabel di fungsi tidak dideklarasikan dengan var, variabel tersebutbersifat gelobal. Oleh karena itu, harus hati-hati untuk tidak menggunakan var karena bisa mempengaruhi variabel diluar fungsi. Efek variabel global dapat kamu lihat di contoh berikut:

<!doctype html>
<html>
   <head>
      <title>Efek Variabel Global</title>
   </head>
   <body>
      <h1>Efek Variabel</h1>
      <script type=”text/javascript”>       
         var mobil = “Toyota Avanza”;
         document.write(“Sebelum pemanggilan fungsi: ” +
                         mobil + “<br>”);
         ubahData();
         document.write(“Setelah pemanggilan fungsi: ” +
                         mobil + “<br>”);                       
     
         function ubahData() {
            mobil = “Honda Jazz”;
         } 
      </script>
   </body>
</html>

hasilnya seperti berikut:

Hasil Efek Variabel

Perhatikan bahwa isi variabel mobil berubah setelah pemanggilan fungsi ubahData(). Hal ini terjadi krena variabel mobil di fungsi ubahData() tidak dideklarasikan dengan var. Dengan demikian, variabel mobil dianggap sebagai variabel global, akibatnya nilai variabel mobil di pemanggilnya berubah. Berbeda halnya jika variabel mobil di fungsi ubahData() dideklarasikan dengan var. sebagai contoh, ubahlah

mobil = “Honda Jazz”;

menjadi

var mobil = “Honda Jazz”;

hasilnya menjadi seperti berikut

Efek variabel global
Perhatikn bahwa isi variabel mobil tidak berubah setelah pemanggilan fungsi ubahData(). ini terjadi  karena variabel mobil di fungsi ubahData() dideklarasikan dengan var. Dengan demikian, variabel mobil di fungsi ubahData() adalah variabel lokal. Itulah sebabnya, perubahan isi vriabel mobil di fugsi ubahdata() tidak mempengaruhi variabel mobil di pemanggilannya.

5. Apakah di JavaScript ada perintah untuk membuat komentar?

Komentar di JavaScript bisa menggunakan // atau pasangan /* dan */. Jadi, komentar di Java Script serupa dengan PHP.

6. Apakah Variabel di JavaScript mempunyai aturan sama dengan di PHP?

Nama Vaiabel di JavaScript mempunyai aturan seperti berikut:
1. Nama variabel diawali dengan huruf, karakter garis bawah (_) atau tanda $.
2. Karakter berikutnya bisa berupa huruf, angka, karakter garis bawah (_)a atau tanda $.
3. Huruf kecil dan huruf kapita dibedakan.
Jadi, ada perbedaan dengan penamaan variabel di PHP. Karena itu, hati-hati didalam memberikan nama variabel JavaScript supaya tidak tertukar dengan aturan penamaan varibale PHP.
CATATAN
  1. Variabel di JavaScript bisa ditulis dengan mengikuti aturan punak unta. Nama variabel ditulis dengan awalan berupa huruf kecil. Kalau nama variabel mengandung dua kata atau lebih, huruf awal kata kedua dan seterusnya ditulis dengan huruf kapital. Contoh hargaMobil, nilaiUjianTerakhir.

Hal terpenting lainnya, variabel di JavaScript dideklarasikan menggunakan kata var. Contoh:

var teks;

Saat pendeklarasian, variabel bisa diberi nilai sekaligus. Contoh:

var teks = “well, saya dibangkitnkan oleh JavaScript”;

7. Operator apa saja yang disediakan di JavaScript?

JavaScript menyediakan banyak operator. Beberapa operator akan dijelasakn di bagian ini. Untuk operasi aritmatika, JavaScript menyediakan operator-operator seperti berikut:

OPERATOR
PRIORITAS
KETERANGAN
CONTOH
HASIL
*
3
Perkalian
2*4
8
/
2
Pembagian
6/3
2
%
3
Sisa Pembagian
7%2
1
+(unary)
2
Tanda Positif
+6
6
(-unary)
2
Tanda Negatif
+7
-7
+
4
Penjumlahan
2+3
5
–
4
Pengurangan
4-1
3
++
1
Naikan Nilai Sebesar Satu
a=1;
a berisi 2
—
1
Pengurangan Nilai Satu
a=1;
a berisi 0

CATATAN
  1. Unary berarti bahwa operator melibatkan satu operand. Adapun operator  binary adalah operator yang melibatkan dua operand.
  2. Prioritas menentukan urutan pengerjaan ekspresi. Operator yang mempunyai prioritas lebih tinggi akan dikerjakan lebih dahulu daripada operator yang prioritasnya lebih rendah. Contoh: 6+2*3 akan menghasilkan 12, karena 2*3 akan diproses terlebih dahulu. Hasilnya baru dijumlahkan dengan 6.

Tunggu Pembahasan  Selanjutnya ya Bro

Jika Kalian ingin belajar tentang HTML, JavaScript, PHP, dan Database silakan berkunjung ke blog Pemrograman disini banyak tutorial yang membahas tentang web pemrograman.

One comment

  1. PsikomterBlog
    PsikomterBlog
    Apr 2, 2020 / 1:48 pm Reply

    Wahh JavaScript yaa, saya pernah jg main ini pas buat web, seperti retina.js, dn itu sangat bagus sekali utk website menajdi lebih interaktif, haturnuhun ka (y/

Leave a Reply