Tutorial Javascript: Pengertian dan Fungsi Javascript

Assalamualaikum wr.wb

Pada kesempatan kali ini kita akan membahas mengenai Tutorial Javascript: Pengertian dan Fungsi Javascript .
Silahkan teman - teman simak pembahasan dibawah ini!

Pengertian Javascript

Javascript merupakan suatu bahasa pemrogaman client side yang wajib dimengerti oleh para pengembang website. Javascript dapat membuat website anda yang dibuat menjadi lebih interaktif. Javascript dapat membuat webiste seakan-akan berinteraksi langsung dengan para pengguna website tersebut.

Javascript merupakan suatu bahasa pemrogaman yang berjalan di client-slide, yaitu perangkan lunak browser. hampir semua perangkat lunak seperti browser saat ini mendukung javascript, contohnya seperti: Internet Explorer, Mozilla Firefox, Google Chrome, Opera dan lain-lain.

Keunggulan Javascript

  1. Keunggulan javascript yang pertama adalah ukuran file yang kecil karena script dari bahasa pemrogaman javascript memiliki ukuran yang kecil sehingga ketika website yang memiliki javascript ditampilkan pada browser maka kita akan mengaksesnya lebih cepat jika dibandingkan ketika browser membuka suatu website yang memiliki script java. Hal ini juga sangat penting diperhatikan karena berkepentingan dengan daya kerja server. Semakin kecil website yang disimpan dalam suatu server, maka daya kerja server ketika kita browsing oleh user di internet akan lebih cepat atau tidak terlalu berat. Selain itu sifat javascript client side yang tidak lagi perlu diolah oleh server ketika browser memanggil website dari sebuah server.
  2. Keunggulan yang kedua adalah, javascript mudah untuk dipelajari karena javascript merupakan suatu bahasa semi pemograman yang merupakan sebuah gabungan antara bahasa pemrogaman java dengan bahasa kode dari HTML sehingga disebut bahasa Hybrid. Walaupun bahasa pemrogaman javascript merupakan bahasa turunan dari java namun bahasa pemrogaman ini tidak memiliki aturan serumit java.
  3. Keunggulan yang ketiga adalah Terbuka karena bahasa ini tidak terikat oleh hadware maupun software tertentu bahkan termasuk system operasi seperti windows maupul Linux. Karena ia bersifat terbuka, maka ia dapat dibuat maupun dibaca disemua jenis komputer.

Kekurangan Javascript

Kekurangan dari javascript ini adalah penggunaan javascript dapat dicopy langsung melalu web browser, sehingga setiap orang dapat menggunakan program javascipt yang telah kita buat.

Ciri - Ciri javascript
  1. Mempunyai  extensi berupa file ".js" contoh "app.js".
  2. Aturan Case Sensitive
  3. Tiap akhir perintahnya menggunakan tanda ";"
  4. Bahasa ini Diawal dengan tanda "<script type='text/javascript>'"atau "<script>" dan diakhiri dengan tanda "<script>".
  5. Biasanya saling berkaitan dengan script HTML.

 Basic Javascript

Dibawah ini adalah contoh penerapan Basic Javascript diantaranya sebagai berikut
<script type="text/javascript">
alert("Hello World")
</script>
 Silahkan teman  - teman simpan script diatas dengan nama latihan_01.html lalu jalankan pada web browser kalian masing - masing
Hasilnya:
Silah ikuti script dibawah ini
<script type="text/javascript">
document.white("Hello World");
</script>
Silahkan teman - teman simpan script diatas dengan nama latihan_02.html lalu jalankan pada web browser
Hasilnya:
Selanjutnya kita akan membahas mengenai apa itu javascript sebagai file external?, silahkan simak pembahsan dibawah ini!

JavaScript sebagai File External

Jika teman - teman ingin menjalankan script JavaScript yang sama dibanyak halaman tentunya, hal terbaik yang dapat dilakukan adalah menggunakan file javascripr sebagai file independen.
Silahkan ketikan script dibawah ini:
document.white("<h2>Tulisan Ini Dari File .js menggunakan JavaScript</h2>"); 
 simpan script diatas dengan nama latihan_03.js
Langkah selanjutnya kita akan membuat file html sebagai wadah untuk menampilkan script javasript diatas, silahkan ketikan script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Memanggil File .js</title>
<script type="text/javascript" src="latihan_03.js"></script>
</head>
<body>
</body>
</html>
Silahkan simpan kode diatas dengan nama latihan_03.html
Hasilnya:
 Setelah teman - teman memahami penjelasan diatas, kita masuk pada tahap penjelasan mengenai Variabel pada javascript.

Variabel

  1. Aturan penulisan pada variabel
      • Nama varibel bersifat Case Sensitive atau muruf besar dan kecilnya sangat berpengaruh
      • Harus dimulai dengan menggunakan huruf atau karakter underscore.
          2. Deklarasi variable dengan statement var
      • var nama;
      • var nama = "Bimboo";
          3. Variable yang tidak dideklarasikan
      • nama = "Bimboo";
      • x = y + 5;
    Silahkan teman - teman ketikan script dibawah ini:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Penjumlahan</title>
    </head>
    <body>
    <h3>Penjumlahan</h3>
    <b>dua + enam =
    <script type="text/javascript">
    var angka = "Delapan";
    document.white(angka);
    </script>
    </b>
    </body>
    </html>
    Simpan dengan nama latihan_04.html
    Hasilnya:

    Operator Aritmatika

    Operator
    Deksripsi
    Contoh
    Hasil
    +
    Penjumlahan
    X = 5 + 2;
    X = 7
    -
    Pengurangan
    X = 10-2;
    X = 8
    *
    Perkalian
    X = 5*4;
    X = 20
    /
    Pembagian
    X = 10/2;
    X = 5
    %
    Modulus
    X = 5 % 2;
    X = 1
    ++
    Increment
    X++;
    X = x+1
    --
    Decrement
    x--;
    X = x-1

    Operator Assigment
    Operator
    Contoh
    Sama Dengan
    Hasil
    =
    X = “Belajar JS”;

    X = Belajar JS
    +=
    X += 6;
    X = x+6;
    X = 8
    -=
    X -= 2;
    X = x – 2;
    X = 6
    *=
    X *=y;
    X = x * y;
    X = 20
    /=
    X /= 2;
    X = x/2;
    X =5
    %=
    X % =y;
    X =x % y;
    X =1

    Operator Pembanding
    Operator
    Deskripsi
    Contoh
    ==
    Sama dengan
    X == 8 -> salah
    ===
    Sama persis dengan (tipe data dan nilai)
    X === 5 -> benar
    X === “5” -> salah
    !=
    Tidak sama dengan
    X !=8 -> benar
    > 
    Lebih besar dari
    X > 8 -> salah
    < 
    Lebih kecil dari
    X < 8 -> benar
    >=
    Lebih besar sama dengan dari
    X >= 8 -> salah
    <=
    Lebih kecil sama dengan dari
    X <= 8 -> benar

    Operator Logika
    Misalkan x = 6 dan y = 3
    Operator
    Deksripsi
    Contoh
    &&
    Dan (and)
    (x<10 && y>1) -> benar
    ||
    Atau (or)
    (x == 5 || y == 3) -> benar
    !
    Tidak (not)
    !(x==y) -> benar


    Pengkondisian
    Pada Javascript terdapat 5 macam pengondisian

    1. if(kondisi)
    Silahkan teman - teman gunakan statement ini untuk mengeksekusi sourcode hanya jika suatu kondisi bernilai true.

    2. if(kondisi1)else(kondisi2)
    Silahkan teman - teman gunakan statement ini untuk mengeksekusi sourcode jika satu kondisi itu bernilai true dan kondisi lainnya bernilai false.

    3. if(kondisi1) else if (kondisi2) else(kondisi3)
    Statement ini digunakan untuk memilih satu kondisi dari banyak kondisi.

    4. Switch
    Silahkan gunakan statement ini untuk memilih  satu dari banyak kondisi

    5. Ternary
    Menggunakannya hampir sama dengan if else hanya saja lebih sederhana.

    Silahkan ketik script dibawah ini!
    <script type="text/javascript"> var nama = "Bimboo"; if (nama == "Bimboo"){ document.write("Hai "+nama); }</script>
    Silahkan simpan script diatas dengan nama latihan05.html
    Hasilnya:
    Silahkan ketik Script dibawah ini!
    <script type="text/javascript"> var x = 100; if(x < 50){ document.write("X kurang dari 50"); }else{ document.white("X lebih dari 50"); }</script>

    Silahkan teman - teman simpan script diatas dengan nama latihan06.html
    Hasilnya:
    Silahkan ketik Script dibawah ini!
    <script type="text/javascript"> var nama = "Bimboo"; var tampung = "" ; if(nama == "Budi"){ tampung = "Hai Budi"; }else if(nama == "Ahmad"){ tampung = "Hai Ahmad"; }else{ tampung = "Hai"+nama; } document.write(tampung);</script>

    Silahkan teman - teman simpan script diatas dengan nama latihan07.html
    Hasilnya:
    Silahkan ketik script dibawah ini
    <script type="text/javascript"> var tampung = (50 > 40) ? "Benar" : "Salah" ; document.write(tampung);</script>
    Silahkan teman - teman simpan script diatas dengan nama latihan08.html
    Hasilnya:

    Pengulangan

    Pada JavaScript, ada tiga macam pengulangan yaitu:

    1. FOR, Pengulangan sebayak jumlah yang telah kita tentukan.
    2. White, Pengulangan Sampai telah bertemu kondisi "true".
    3. Do White, Pengulangan yang biasanya dilakukan terlebih dahulu sebelum kondisinya bernilai "true".
    Yang pertama kita pelajari adalah cara penggunaan FOR Silahkan teman - teman ikuti script dibawah ini:
    <script type="text/javascript">
    for(var i = 1 ; i <=5; i++){
    document.white("Pengulangan ke - "+i+"<br/>");
    }
    </script>
    Simpan script diatas dengan nama latihan09.html
    Hasilnya:

    Selanjutnya kita akan belajar cara penggunaan WHILE, silahkan teman - teman ketikan script dibawah ini
    <script type="text/javascript">
    var i = 1;
    while(i <= 4){
    document.white("Pengulangan While Ke -"+i+"<br />");
    i++;
    }
    </script>
    Silahkan simpan script diatas dengan nama latihan10.html
    Hasilnya:
    Selanjutnya kita akan belajar cara penggunaan DO WHILE pada javascript, silahkan teman teman ketikan script dibawah ini:
    <script type="text/javascript">
    var i = 1;
    do {
    document.write("Pengulangan DO WHILE ke - "+1+"<br/>");
    i++;
    }while(i <= 4);
    </script> 
    Silahkan simpan script diatas dengan nama latihan11.html
    Hasilnya:
    Tahapan akhir kita akan mempelajari studi kasus penggunaan javascript ini
    Silahkan ketik script dibawah ini dan ikuti langkah - langkahnya.

    <html>
    <head>
    <title>Latihan Studi Kasus</title>
    </head>
    <body>
    Angka 1 : <input type="text" id="angka1"> <br>
    Angka 2 : <input type="text" id="angka2"> <br> <br>
    <input type="button" value="+" onClick="fungsi('+')"> <br> <br> <br>
    <b id="hasil">
    <script type="text/javascript">
    function fungsi(operator){
    var angka1 = document.getElementById("angka1").value;
    var angka2 = document.getElementById("angka2").value;
    var tampung = "" ;
    var temp = "" ;
    if(operator == "+"){
    temp = "Penjumlahan" ;
    tampung = parseInt(angka1) + parseInt(angka2) ;
    }
    document.getElementById("hasil").innerHTML = "Hasil Dari "+temp+" adalah "+tampung;
    }
    </script>
    </b>
    </body>
    </html>
    Simpan kode diatas dengan nama latihan_studikasus.html
    Hasilnya:

    Studi Kasus 

    1. Silahkan teman teman berikan fungsi kuran (-), bagi (/) dan perkalian (*) pada latihan yang telah kita pelajari sebelumnya, seperti gambar dibawah ini
    2. Silahkan beri validasi ketika kolomnya kosong tetapi kita menekan tombol pengoprasian
    • Angka satu dan angka dua kosong , maka akan muncul alert seperti berikut
    • Angka satu kosong maka akan muncul alert seperti dibawah ini
    • Angka dua kosong maka akan muncul alert seperti dibawah ini
    3. Silahkan teman teman berikan 1 button untuk clear text maupun hasilnya, seperti gambar dibawah ini
    Setelah kita klik button maka hasilnya atau tampilannya harus seperti gambar dibawah ini:
    kembali ke semula
    Selamat teman teman telah mempelajari tentang Tutorial Javascript: Pengertian dan Fungsi Javascript 
    Semoga bermanfaat ;)

    0 Response to "Tutorial Javascript: Pengertian dan Fungsi Javascript "

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel