PWPB | Pertemuan 12
Javascript
A. Pengenalan
Javascript adalah bahasa yang berbentuk kumpulan skrip yang berjalan pada suatu dokumen HTML.
Sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTMLdengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.
B. Sejarah
Javascript diperkenalkan pertama kali oleh Brendan Eich yang 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, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang 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 1995.
Javascript bergantung kepada browser
(navigator) yang memanggil dan menampilkan halaman web yang tidak hanya berisi HTML tapi juga dapat berisi skrip-skrip Javascript. Javascript juga tidak memerlukan penerjemah khusus untuk menjalankannya, karena sudah 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 perbandingan mendasar antara Java dan Javascript.
C. Penulisan Coding
-) Javascript adalah bahasa yang “case
sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil,
-) Penulisan variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test.
-) Setiap instruksi dapat diakhiri dengan karakter titik koma (;).
-) Menggunakan tag <SCRIPT> Kode javascript dalam HTML dituliskan dengan menggunakan tag <script> dengan format sebagai berikut :
<script>.........................</script>
-) Menggunakan file eksternal : Menuliskan kode program Javascript dalam suatu file teks dan kemudian file teks yang berisi kode Javascript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas). Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut :
<script src="">.........................</script>
-) dimana lokasi/file.js adalah 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, pembahasan lebih lanjut ada di materi lainnya.
-) Kodenya dapat di tulis sebagai berikut :
<tag eventHandler="Kode Javascript Yang Akan dimasukan"> dimana eventHandler adalah nama dari event tersebut.
D. Variable
Variable adalah suatu obyek yang
berisi data data, yang mana dapat dimodifikasi selama eksekusi program. Di Javascript terdapat
beberapa kriteria untuk penamaan variabel, seperti ditunjukkan berikut ini.
Nama variabel harus dimulai oleh satu huruf (huruf
besar maupun huruf kecil) atau satu karakter _ (garis bawah).
Nama variabel bisa
terdiri dari kombinasi huruf, angka atau karakter _ dan $ (spasi kosong tidak diperbolehkan).
Nama variabel tidak
boleh memakai nama-nama yang termasuk ke dalam kata kunci bahasa Javascript (abstract,boolean,case,dll).
E. Tipe Data
Di javascript data yang
dapat disimpan dalam suatu variabel 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 : jika
kondisinya benarfalse : jika kondisinya salah
F. Implementasi atau Koding
1. halo.html (file HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script language="javascript" type="text/javascript">
alert("Hello World !");
</script>
</body>
</html>
Hasilnya
2. halo.js (File Javascript)
alert("Hello Wolrd !");
Jika langsung menulis kodingannya di file javascript berarti harus dipanggil file javascriptnya seperti berikut:
halo.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script src="halo_alternative.js"></script>
</body>
</html>
Hasilnya
3. UbahStyle.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</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>
Hasilnya Sebelum di klik
4. VariableOnJavaScript.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<h1>JavaScript Variables<h1>
<h2>pada contoh ini x, y, z adalah variables</h2>
<p id="demo"></p>
<script type="text/javascript">
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Hasil Kodingan di atas
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<h1>Javascript Variables contoh 2</h1>
<p id="demo"></p>
<script type="text/javascript">
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML = "Totalnya adalah: " + total;
</script>
</body>
</html>
Hasil Kodingan di atas
6. VariableOnJSWithTypeData.html
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<h1>Javascript Variables dengan Tipe Data</h1>
<p>Deklarasi string menggunakan kutip</p>
<p>Deklarasi angka tidak perlu menggunakan kutip</p>
<p>cobalah dengan tanda komentar //</p>
<p id="demo"></p>
<script type="text/javascript">
var pi = 3.14;
var person = "John";
var answer = 'Yes i am';
//document.getElementById("demo").innerHTML = pi;
document.getElementById("demo").innerHTML = person;
//document.getElementById("demo").innerHTML = answer;
</script>
</body>
</html>
Hasil Kodingan di atas
Praktikum
quiz.html (File HTML)
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<link rel="stylesheet" href="quiz.css">
</head>
<body>
<h1>Operasi Aritmatika Menggunakan Javascript</h1>
<table border="1" align="center" width="50%">
<tr align="center">
<th width="10%">Operasi</th>
<th width="30%">Soal</th>
<th width="10%">Hasil</th>
</tr>
<tr align="center">
<td>Tambah</td>
<td>6 + 2</td>
<td><p id="jumlah"></p></td>
</tr>
<tr align="center">
<td>Kurang</td>
<td>6 - 2</td>
<td><p id="kurang"></p></td>
</tr>
<tr align="center">
<td>Kali</td>
<td>6 * 2</td>
<td><p id="kali"></p></td>
</tr>
<tr align="center">
<td>Bagi</td>
<td>6 / 2</td>
<td><p id="bagi"></p></td>
</tr>
<tr align="center">
<td>Modulus</td>
<td>6 % 2</td>
<td><p id="modulus"></p></td>
</tr>
<tr align="center">
<td>Increment</td>
<td>6 ++</td>
<td><p id="increment"></p></td>
</tr>
<tr align="center">
<td>Decrement</td>
<td>2 --</td>
<td><p id="decrement"></p></td>
</tr>
<tr align="center">
<td>Akar</td>
<td>√100</td>
<td><p id="akar"></p></td>
</tr>
<tr align="center">
<td>Pangkat</td>
<td>10<sup>2</sup></td>
<td><p id="pangkat"></p></td>
</tr>
<tr align="center">
<td>Rumus ABC</td>
<td>
(-(-5)+√(-5)<sup>2</sup>-4(2)(-3)) / 2(2) <br><br>
(-(-5)-√(-5)<sup>2</sup>-4(2)(-3)) / 2(2)
</td>
<td>
<p id="abc1"></p>
<p id="abc2"></p>
</td>
</tr>
</table>
<script type="text/javascript" src="quiz.js"></script>
</body>
</html>
quiz.css (File CSS)
body {
background-color: gray;
}
h1 {
text-align: center;
color: blueviolet;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
table {
border: 2px solid black;
font-family: Arial, Helvetica, sans-serif;
}
quiz.js (File JS)
alert("Selamat Datang di Operasi Aritmatika")
var a = 6;
var b = 2;
// Operasi Aritmatika Penjumlahan dengan memamanggil variable a dan b
var jumlah = a + b;
// Operasi Aritmatika Pengurangan dengan memamanggil variable a dan b
var kurang = a - b;
// Operasi Aritmatika Perkalian dengan memamanggil variable a dan b
var kali = a * b;
// Operasi Aritmatika Pembagian dengan memamanggil variable a dan b
var bagi = a / b;
// Operasi Aritmatika Modulus dengan memamanggil variable a dan b
var modulus = a % b;
// Operasi Aritmatika Increment dengan memamanggil variable a
var increment = a++;
// Operasi Aritmatika Decrement dengan memamanggil variable b
var decrement = b--;
// Operasi Aritmatika akar menggunakan method javascript yaitu Math.sqrt(angka)
var akar = Math.sqrt(100);
// Operasi Aritmatika pangkat menggunakan method javascript yaitu Math.pow(angka,pangkat)
var pangkat = Math.pow(10,2);
// Rumus ABC dengan cara menggabungkan operasi operasi di atas
var ABC1 = ( -7 + Math.sqrt(Math.pow(7,2)-4*1*10) ) /2*1;
var ABC2 = ( -7 - Math.sqrt(Math.pow(7,2)-4*1*10) ) /2*1;
document.getElementById("jumlah").innerHTML = jumlah;
document.getElementById("kurang").innerHTML = kurang;
document.getElementById("kali").innerHTML = kali;
document.getElementById("bagi").innerHTML = bagi;
document.getElementById("modulus").innerHTML = modulus;
document.getElementById("increment").innerHTML = increment;
document.getElementById("decrement").innerHTML = decrement;
document.getElementById("akar").innerHTML = akar;
document.getElementById("pangkat").innerHTML = pangkat;
document.getElementById("abc1").innerHTML = ABC1;
document.getElementById("abc2").innerHTML = ABC2;
Hasil Kodingan di atas
Setelah di klik OK
Sekian dan Terima Kasih, Wasalamualaikum
0 Comments