Dasar Javascript

Pada modul ini akan dijelaskan dasar penulisan dari console.log, pengenalan variabel , penggunaan function dan pemakaian logika IF, yang dilanjutkan dengan pembuatan aplikasi animasi sederhana untuk menjalan suatu gambar mobil,

Javascript

Pengenalan singkat dasar javascript

  • Download terlebih dahulu file-file yang dibutuhkan, dengan klik pada tombol download yang ada di modul praktek ini.
  • simpan ke folder tempat kerja anda misalnya di My Document
  • Lakukan extract zip file
  • buat file baru dengan nama prak-1a.html
    • dan ketik kode berikut dengan menggunakan teknik emmet
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Javascript pertama</title>
    </head>
    <body>

        <script src="prak-1a.js"></script>
    </body>
    </html>
  • selanjutnya buat file baru dengan nama prak-1a.js
    function prak1a() {
      // cara cetak ke console
      console.log('hallo ini javascript pertama');
    }

    function prak1b() {
      // deklarasi variabel
      var jumlahOrder = 100;   // number
      var namaDepan = "Yudy";  // string
      var menikah = true;      // boolean
      var kumpulanNilai = [10,20,30] // array

      console.log(jumlahOrder);
      console.log(typeof jumlahOrder);
      console.log(kumpulanNilai[0]);
    }

    function luasSegitiga(alas, tinggi) {
      // function passing parameter dan cetak nilai
      return (0.5 * alas * tinggi);
    }

    var luasPersegiPanjang = function(panjang,lebar) {
      // function bisa dimasukkan ke dalam variabel
      console.log(panjang * lebar)
    }

    function ifSederhana(nilai) {
      // demo if sederhana 
      if (nilai < 60) {
        return "Gagal"
      } else {
        return "Lulus"
      }
    }

    function ifBertingkat(nilai) {
      // penggunaan if bertingkat
      if (nilai < 45) {
        return "E"
      } else if (nilai < 60) {
        return "D"
      } else if (nilai < 70) {
        return "C"
      } else if (nilai < 80) {
        return "B"
      } else if (nilai < 100) {
        return "A"
      } else {
        return "Nilai Salah"
      }
    }

    function penggunaanAndOr(nilai) {
      if (nilai >= 50 && nilai <= 80) {
        return "nilai antara 50 - 80"
      }
    }

    function penggunaanSwitch(jurusan) {
      switch (jurusan) {
        case 'IPA':
          return 'Belajar Mat Kimia Fisika Biologi';
          break;
        case 'IPS':
          return 'Belajar Akuntansi';
          break;
        case 'Bahasa':
          return 'Belajar Sastra';
          break;
        default:
          return 'Maaf tidak ada jurusan itu';
      }
    }

    // program utama
    prak1a();
  • untuk melihat hasilnya di console
    • buka prak-1a.html dengan menggunakan firefox
    • tekan mouse kanan diatasnya, kemudian pilih inspect element
    • klik pada tab pilihan console
    • lakukan refresh (F5) bila merubah program pada javascript untuk melihat hasilnya
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Animasi Javascript</title>
    </head>
    <body>
      <img src="images/car.png" alt="gambar mobil" id="mobil1">
      <form action="#">
        <input type="button" value="Maju" onClick="majuKanan();">
      </form>
      <script src="prak-1b.js"></script>
    </body>
    </html>

Aplikasi HTML menggunakan javascript (animasi manual)

  • selanjutnya buat file prak-1b.js
    • dan ketik program berikut:
    var mobil = null;

    function initialize(){
       mobil = document.getElementById('mobil1');
       mobil.style.position= 'relative'; 
       mobil.style.left = '0px'; 
    }

    function majuKanan(){
       mobil.style.left = parseInt(mobil.style.left) + 10 + 'px';
    }

    window.onload =initialize;
  • Cobalah siswa membuat satu tombol agar mobil bisa berjalan mundur

Membuat animasi otomatis.

  • pada file html tambahkan 2 tombol berikut dibawah tombol maju
    <input type="button" value="Maju Otomatis" onClick="majuOtomatis();">
    <input type="button" value="Stop" onClick="stop();">
  • pada file js tambahkan 2 function berikut:
    function majuOtomatis(){
     mobil.style.left = parseInt(mobil.style.left) + 10 + 'px';
     animasi1 = setTimeout(majuOtomatis,100); // setiap 100 ms
    }

    function stop(){
       clearTimeout(animasi1);
    }