Haikal PG - XI RPL 1 - PWPB Sesi 12

Assalamualaikum Warahmatullahi Wabarokatuh

Pada pertemuan kali ini kita akan masuk ke materi Javscript. Javasrcipt ini digunakan untuk pengeksekusian perintah di sisi user / client-side. Seperti memunculkan alert, membuat kalkulator dengan javascript.

Sejarah Javasrcipt

• Javascript diperkenalkan pertama kali oleh Brendan Eich bekerja di Netscape pada tahun 1995.
• Pada awalnya bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, penembangannya yang terkesan buru-buru dan tidak ada pesan kesalahan yang ditampilkan tiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan giatnya kerjasama antara Netscape dan Sun (Pengembang bahasa pemrograman "Java") pada masa itu, maka Netscape memberikan nama "Javascript" kepada bahasa tersebut pada tanggal 4 desember 1955.
• versi terakhir dari bahasa ini adalah vesi 1.8.5 yang dirilis tanggal 22 Maret 2011
• Javascript bergantung kepada browser (navigator) yang memanggil dan menampilkan halaman web yang tidak hanya berisi HTML tapi juga dapat berisi skrip-skrip Javascript. Javascrip juga tidak memerlukan penerjemah khusus untuk menjalankannya, karena sudag disediakan sendiri oleh browser yang digunakan, Lain halnya dengan bahasa "Java" yang memerlukan penerjemah khusus untuk menjalankannya di sisi user/klien. Berikut ini satu tabel yang berisi beberapa perbandigan mendasar antara Java dan Javascript, :

Perbedaan Javascript dengan Java

Penulisan Code Javascript

• Menggunakan file external : Menuliskan kode program Javascript dalam suatu file dan kemudian file teks yang berisi code Javascript di panggil dari dalam dokumen HTML. Kode yang kita sisipkan kedalam dokumen HTML adalah berikut : <script language="javascript" src="lokasi/file,js"></script>
• Dimana lokasi/file.js adalah lokasi dan nama file yang berisi kode Javascript, jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.
• Melalui event tertentu : Event adalah sebutan dari satu aksi yang dilakukan oleh user, contohnya seperti klik tombol mouse, pembahsan lebih lanjut ada di materi lainnya.
• Kodenya dapat ditulis sebagai berikut : <tag eventHandler="Kode JS yang akan dimasukkan"> dimana eventHandler  adalah nama dari event tersebut.

Browser yang bisa digunakan seperti : google, safari, mozzila firefox, microsoft edge dll yang bisa kompatible dengan JS.

Variable

• Variable adalah suatu obyek yang berisi data-data, yang mana dapat dimodifikasi selama eksekusi program. Di Javascript terdapat beberapa kriteria untuk penamaan variable, seperti ditunjukkan berikut ini :

1. Nama variable harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter_(garis bawah)
2. Nama variable bisa terdiri dari kombinasi huruf, angka atau karakter _ dan $ (spasi kosong tidak diperbolehkan).
3. Nama variable tidak boleh memakai nama-nama yang termasuk ke dalam kata kunci bahasa Javascript.
4. Berikut ini merupakan daftar katakunci/keywords di javascript :

Contoh pemberian nama variable
Nama variable yang benar :

• umur
• namaLengkap
• luas_lingkaran
• jari2
• _7an
• $biaya

Nama variable yang tidak benar : 

• 7an
• nama Lengkap
• luas lingkaran
• function (karena termasuk keywords Javascript)

Format deklarasi (pembuatan) variable di Javascript

var nama_variable_nya;

atau bisa juga dengan tambahan inisialisasi : 

var nama_variable = nilai;

var umur;

umur = 15;

Tipe Data

• Di Javascript data yang disimpan dalam suatu variable dikelompokkan menjadi tiga jenis, yaitu :

1. Bilangan/numerik, bulat atau desimal, yang kita sebut sebagai integer juga float
2. Kata/kalimat (kumpulan huruf/karakter) : kita sebut string
3. Boolean : suatu variabel yang mempunyai dua nilai dan berfungsi untuk memeriksa suatu kondisi : 

• true : benar
• false : salah

halo.html

Tampilannya jika kita isikan alert pada javascript. Metode yang digunakan yaitu embedded / didalam 1 file dengan html yang dimana didalamnya ada tag <script> </script>. Tampilan alert jika dijalankan :

Jika mengklik ok pada alert : 

Kita bisa mengubah pesan pada alert tersebut seperti pada saat masuk website kita akan menyambutnya dengan alert ini. Contoh penulisan alert:  <script language="javascript"> alert("Selamat datang di website kami");</script>. Bingung? tenang saya kasih source codenya : 

<!DOCTYPE html> <html> <head> <title>Program JS</title> </head> <body> <script language="javascript"> alert("Hello World"); </script> </body> </html>


halo_alternative.js
kita akan menggunakan js secara eksternal dengan cara memanggilnya di file html dengan tag <script language="javascript" src="ini.js"></script>. Simpan tag ini dibagian head seperti CSS. Sama seperti diatas kita akan membuat alert namun ini menggunakan metode pengkodingan eksternal. Tampilan alert :

Tampilan jika mengklik ok :

Codenya :
HTML:
<!DOCTYPE html> <html> <head> <title>Linked JS</title> <script type="text/javascript" src="halo_alternative.js"></script> </head> <body> </body> </html>
Javascript:
alert("Hello !");


UbahStyle.html
Selain bisa menampilkan alert, Javascript juga dapat mengubah style color pada font, misa kita memilih tag p dengan selector id didalamnya. Lalu kita juga buat tag button dan attribut onclick nah attribut inilah yang mengubah style fontnya. Contoh tampilan :
Sebelum di klik :

Sesudah di klik :

Gimana? menarik bukan?, atau masih bingung? tenang saya kasih source codenya!

<!DOCTYPE html> <html> <head> <title>Linked JS</title> </head> <body> <h1 id="id1"> My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click ME!</button> </body> </html>

VariableOnJavascript.html
Kita akan membuat sebuah variable dan menampilkannya ke page html. misal kita punya angka 1 dan akan di tambah 2, nah maka hasil ini akan ditampilkan di html dengan hasil 3. Contoh :

Image diatas merupakan hasil penjumlahan 5 + 6 dengan var x = 5, var y = 6 dan z = x + y
Ini dia source codenya :
<!DOCTYPE html> <html> <head> <title>Javascripts Variables</title> </head> <body> <h1> JS Variables</h1> <p> pada contoh ini x, y & z adalah variable</p> <p id="demo"> </p> <script language="Javascript"> var x = 5; var y = 6; var z = x + y; document.getElementById('demo').innerHTML = z; </script> </body> </html>
Setelah di jumlahkan pada 'document.getElementById('demo').innerHTML = z;' ini digunakan untuk menampilkan hasilnya ke page/halaman html kita.

VariableOnJS2.html
Sama sepeti diatas kita akan menampilkan hasil nya ke page html kita :

Ini dia codenya :

<!DOCTYPE html> <html> <head> <title>Javascript Variables contoh 2</title> </head> <body> <p id="demo"> </p> <script language="Javascript"> var price1 = 5; var price2 = 6; var total = price1 + price2; document.getElementById("demo").innerHTML = "Totalnya adalah : " + total; document.getElementById("demo").innerHTML = "Totalnya adalah : " + total; </script> </body> </html>


VariableWithTypeData.html
Disini kita akan menggunakan tipe data dan bagaimana cara penggunaan comment. comment/komentar ini adalah program yang tidak ada di eksekusi, bisa digunakan untuk penjelasan. Contoh comment pada Javascipt : //Ini adalah single line comment
/* Ini adalah multiline comment */
Disini kita akan membuat 3 variable dengan tipe data yang berbeda lalu menampilkannya satu persatu ke page html.
Tampilan :

Disini kita menampilkan sebuah string yang berisikan nama 'John Doe' dan ditampilkannya ke page HTML. Codenya :

<!DOCTYPE html> <html> <head> <title>JS Variables dengan Tipe data</title> </head> <body> <h1> JS Variables dengan Tipe data</h1> <p> Deklarasi Strings harus disertai tanda kutip</p> <p> Deklarasi Angka tidak perlu disertai kutip</p> <p> Cobalah dengan tanda komentar</p> <p id="demo"> </p> <script language="javascript"> var pi = 3.14; var person = "John Doe"; var answer = 'Yes I am !'; //document.getElementById("demo").innerHTML = pi; document.getElementById("demo").innerHTML = person; //document.getElementById("demo").innerHTML = answer; </script> </body> </html>
Kita lihat diatas terdapat '//document.getElementById("demo").innerHTML = pi;' , ''//document.getElementById("demo").innerHTML = answer;" padahal variable ini sudah di inisialisasi namun tidak tampil? ya karena itu kode program yang tidak akan di eksekusi yang menggunakan comment. Jika kita menghapus comment nya. Code :

<!DOCTYPE html> <html> <head> <title>JS Variables dengan Tipe data</title> </head> <body> <h1> JS Variables dengan Tipe data</h1> <p> Deklarasi Strings harus disertai tanda kutip</p> <p> Deklarasi Angka tidak perlu disertai kutip</p> <p> Cobalah dengan tanda komentar</p> <p id="demo"> </p> <script language="javascript"> var pi = 3.14; var person = "John Doe"; var answer = 'Yes I am !'; document.getElementById("demo").innerHTML = pi; document.getElementById("demo").innerHTML = person; document.getElementById("demo").innerHTML = answer; </script> </body> </html>

Maka tampilanya:

Lah? Kok? Kenapa yang tampil masih juga 1? gk semuanya?. Karena 'tempat' nya itu hanya 1 yaitu di tag <p> dimana kode JS itu di eksekusi dari atas ke bawah maka yang terakhir di eksekusi akan di tampilkan page. Jika kita menyediakan tempat seperti tag <p> dengan selector id yang berbeda value nya maka semuanya akan bisa ditampilkan.

QUIZZ 12

• Buatlah 1 page yang isinya aritmatika.
• Jelaskan menggnakan komentar

Disini saya membuat sebuah kalkulator menggunakan Javascript. Berikut tampilanya : 

Selain menggunakan Javascript, saya juga menggunakan CSS agar tampilannya lebih menarik. Ini dia source codenya : 

HTML:

<!DOCTYPE html> <html> <head> <title>Aritmatika</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="itsjs.js"></script> </head> <body> <script type="text/javascript"> </script> <div id="container"> <form name="formz"> Bilangan 1 :<input type="text" name="pertama" class="put"><br><br> Bilangan 2 :<input type="text" name="kedua" class="put"><br> <input type="button" value="Enter" onclick="aritmatika();" class="button"> <input type="reset" class="button"> </form> <div id="hasil"> <h4> Hasil Penjumlahan : <p id="tambah"> 0</p> </h4> <h4> Hasil Pengurangan : <p id="kurang"> 0</p> </h4> <h4> Hasil Pembagian : <p id="bagi"> 0</p> </h4> <h4> Hasil Perkalian : <p id="kali"> 0</p> </h4> </div> </div> </body> </html>  

CSS:

#container{ width: 200px; margin: 0 auto; background-color: lavender; padding: 20px; border: 3px dashed black; } #hasil{ background-color: salmon; padding: 10px; margin-top: 10px; border: 3px dashed black; } .button{ margin-top: 10px; background-color: black; color: white; } .button:hover{ margin-top: 10px; background-color: transparent; color: black; } .put{ border:1px solid black; border-radius: 5px; text-align: center; }  

Javascript:

function aritmatika(){ //pada variable bil1 dan bil2 adalah untuk mengambil nilai pada form 1 dan 2 var bil1 = parseFloat(document.formz.pertama.value); if (isNaN(bil1)) bil1 = 0.0; var bil2 = parseFloat(document.formz.kedua.value); if (isNaN(bil2)) bil2 = 0.0; //pada bagian ini dimulailah artimatika yang berisi penjumlahan, perkalian dll. //dan ditampilkannya di page html var tambah = document.getElementById("tambah").innerHTML = bil1 + bil2; var kurang = document.getElementById("kurang").innerHTML = bil1 - bil2; var bagi = document.getElementById("bagi").innerHTML = bil1 / bil2; var kali = document.getElementById("kali").innerHTML = bil1 * bil2; }  

Sekian yang bisa saya sampaikan pada sesi kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh.