JQuery 1

Jquery pada dasarnya adalah kumpulan program javascript yang berguna sehingga kita tanpa harus bersusah-susah lagi membuat program javascript dari modul paling dasar, dengan adanya jquery memudahkan kita memilih elemen-elemen(paragraf, list, gambar) yang ada di dalam halaman web untuk kemudian dapat diambil nilainya atau diganti nilainya (DOM manipulation) serta melakukan otomatisasi misalnya user klik suatu button atau pilihan select all, maka semua objek secara otomatis terpilih. pada bagian ini akan diberikan contoh-contoh mengambil nilai, melakukan perubahan suatu objek dan mengganti nilai objek tertentu

Pengenalan Jquery

  • Jquery ditulis oleh John Resig pada tahun 2006
  • reference: http://jquery.com/
  • Tujuan penulisan adalah
    • memudahkan kita memilih elemen-elemen(paragraf, list, gambar, ...) yang ada di dalam halaman web untuk kemudian dapat diambil nilainya, diganti nilainya (DOM manipulation)
    • Otomatisasi kalau misalnya user klik suatu button atau pilihan select all, maka semua objek secara otomatis terpilih (Event Handling)
    • support cross browser sehingga dijalankan di browser apapun tetap berjalan dengan baik.
    • kemampuan lain seperti animasi, AJAX akan dibahas di materi berikutnya
  • Jquery pada dasarnya adalah kumpulan program javascript yang berguna sehingga kita tanpa harus bersusah-susah lagi membuat program javascript dari modul paling dasar (thank you John).
  • karena pada dasarnya jquery ini menggunakan javascript, maka semua perintah yang ada di javascript berlaku pada jquery
  • bila isi suatu file html isinya semua sudah ditampilkan di browser (100% loaded), maka dokumen ini disebut dengan nama DOM (Document Object Model)

Penggunaan selector $()

  • untuk dapat mengambil nilai yang ada di dokumen HTML dan berubahnya, maka javascript menggunakan teknik yang ada di css dengan keterangan sbb:
    • Tag html
    • misalnya tag paragraf saya yudi
    • pada jquery dapat diambil dengan nilainya dengan $('p')
    • Tag nama ID
    • misalnya pada html terdapat 10000
    • pada jquery menggunakan $('#harga-barang')
    • Tag nama Class
    • misalnya pada html terdapat satu
    • pada jquery menggunakan $('.daftar')

Contoh Praktek

  • buat file baru dengan nama prak-3.html dan lakukan copy-paste dari contoh berikut:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prak 3</title>
</head>
<body>
  <form action="#">
    <input type="button" value="Ambil Nilai" onClick="ambilNilai();">
    <input type="button" value="Ubah Warna" onClick="ubahWarna();">
    <input type="button" value="Set Nilai" onClick="setNilai();">
  </form>
  <p>Zootopia</p>
  <div id="tahun">2016</div>
  <div class="nama-aktor">Jason Bateman</div>
  <div class="nama-aktor">J.K Simmons</div>
  <select id="pilihan-tiket">
    <option>50000</option>
    <option>60000</option>
    <option>70000</option>
    <option>100000</option>    
  </select>

  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="prak-3.js"></script>
</body>
</html>
  • buat file baru dengan nama prak-3.js dan lakukan copy-paste dari contoh berikut:
  var namaFilm = null;
  var tahunPembuatan = null;
  var namaAktor = null;
  var pilihanTiket = null;

  function ambilNilai(){
    namaFilm = $('p').text();
    tahunPembuatan = $('#tahun').text();
    namaAktor = $('.nama-aktor').text();
    pilihanTiket = $('#pilihan-tiket').val();


    console.log("nama film : ",namaFilm);
    console.log(tahunPembuatan);
    console.log(namaAktor);
    console.log(pilihanTiket);
  }

  function ubahWarna(){
    $("p").css("color", "red");
    $("#tahun").css("background-color", "yellow");
    $(".nama-aktor").css("color", "blue");
  }        

  function setNilai() {
    $('p').text("Me Before You");
    $('#tahun').text("July - 2016");
    $('.nama-aktor').text("Sam Claflin & Emilia Clarke");
  }

  $(document).ready(function(){
        alert("Javascript pertama");
  });

Latihan Siswa

  • buat file baru dengan nama prak-3a.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prak 3</title>
</head>
<body>
  <form action="#">
    <input type="button" value="satu"   onClick="satu();">
    <input type="button" value="dua"    onClick="dua();">
    <input type="button" value="tiga"   onClick="tiga();">
    <input type="button" value="empat"  onClick="empat();">
    <input type="button" value="lima"   onClick="lima();">
  </form>  
  <h1>Jalan-jalan di Indonesia</h1>
  <h2>Kota-kota Tujuan</h2>
  <p>Rencanakan Perjalanan anda: </p>
  <ul id="tujuan">
    <li>Jakarta</li>
    <li>Semarang</li>
    <li class='promo'>Surabaya</li>
  </ul>
  <ul id="pesawat">
    <li>Garuda</li>
    <li>Lion Air</li>
    <li>City Link</li>
    <li class='promo'>Batik Air</li>
  </ul>
  <ul id="nilaisiswa">
    <li>75</li>
    <li>80</li>
    <li>90</li>
    <li>30</li>
    <li>95</li>
    <li>50</li>
  </ul>
  <ul id="catatan">
    <li id="ratarata">x</li>
    <li id="tertinggi">x</li>
    <li id="terendah">x</li>
    <li id="total">x</li>
  </ul>    
  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="prak-3a.js"></script>
</body>
</html>
  • buat file baru dengan nama prak-3a.js
  var contoh = null;

  function satu() {

  }

  function dua() {

  }

  function tiga() {

  }

  function empat() {

  }

  function lima() {

  }

  $(document).ready(function(){
        alert("Test Jquery sukses");
  });

5 Soal untuk siswa

  • Bila di klik tombol satu maka list yang ada di bagian tujuan berubah warna menjadi merah
  • Bila di klik tombol dua maka list yang ada di bagian pesawat berubah warna menjadi kuning
  • Bila di klik tombol tiga maka akan melakukan total pada bagian nilaisiswa dan nilainya akan di outputkan di bagian id total
  • Bila di klik tombol empat maka akan mencari nilai tertinggi pada bagian nilaisiswa dan nilainya akan di outputkan di bagian id tertinggi
  • Bila di klik tombol lima maka akan mencari nilai terendah pada bagian nilaisiswa dan nilainya akan di outputkan di bagian id terendah

teknik untuk mengambil nilai dari suatu list

function tiga() {
   var totalNilai = 0;
   $('#nilaisiswa li').each(function(index){
      totalNilai = totalNilai + parseInt($(this).text(),10);
      console.log(totalNilai);
  });
  $('#total').text(totalNilai);
}

sistem traverse pada jquery

  • $("#tujuan li:first");
  • $("#tujuan li:odd");
  • $("#tujuan li:odd");
  • $("#tujuan").find("li");
  • $("li").first();
  • $("li").first().next();
  • $("li").first().next().prev();
  • $("li").first().parent();
  • $("#tujuan").children("li");