MODUL3
JAVA SCRIPT
TARGET
PRAKTIKUM
1. Mengenal Java Script.
2. Mengetahui penggunaan kode Java Script.
3. Mengetahui FrameworkJava Script dan bagaiman penggunaannya.
A. TUGASPENDAHULUAN
1. Apa yang anda ketahui tentang Java Script?
2. Sebutkan beberapa macam cara penulisan kode Java Script. Dan tuliskan contoh
kodenya!
3. Sebutkan beberapa framework Java Script! Minimal 4.
JAWABANTUGASPENDAHULUAN
B. TUGAS PRAKTIKUM
1. Percobaan 1 : Mengenal dan mempelajari kode Java Script, Lakukan beberapa instruksi
berikut ini:
a. Mencetak tag clalam html dengan dengan Javascript, membuat prompt, alert
Ketik kode berikut ini simpan dengan nama
[Link]
<html>
<head>
<title>::Variabel dan
Operator::</title>
</head>
<body>
<script language="j avascript">
document. write ("<base font size=20>Teks berukuran 20 pts</
font>");
[Link]("<basefont size=20>H<sub>2</sub>O</font>");
var penulisan_nama=prompt("Tuliskan nama anda:", "");
document. write ("<b><center><hl>"+t>enulisan
nama+"</hl></b></center>");
alert ("Welcome to My Website, ".[Link] nama+ " !
");
</script> -
</body>
</html>
Apa yang bisa ancla jelaskan dari kode diatas?
b. Mengenal variable dan operator Java Script
Untuk mendeklarasikan variable JS anda cukup menuliskan keyword var dan diikuti nama
variabelnya. JS berbeda dengan Java, ia tidak mempunyai pendeklarasian variable dengan
tipe data sekaligus, melainkan JS akan mengenali tipe suatu variable ketika variable tersebut
telah diisi dengan [Link] contoh dibawah ini.
Ketik kode berikut ini, simpan dalam file
[Link]
<html>
<head>
<title>: :Variabel dan Operator::</title>
</head>
<body>
<SCRIPT language="Javascript">
<!--
var x = 3; //tipe
interger
var y = "19"; /* tipe string */
a= "saya";
var b=x * y;
var c=a + x;
d=x +a;
e=y + Xi
[Link]('Hasil dari ', x, I x I ,y, I I
'b);
[Link]('<br><br>');
[Link]('Hasil dari a, ' + ' ,x, ' ' 'C);
', [Link]('<br><br>');
[Link]('Hasil dari ', x, I + I ,a, I I
'd);
[Link]('<br><br>');
[Link]('Hasil dari ', y, I
+ I ,x, ' 'e);
I
II-->
</SCRIPT>
</body>
</html>
Hal apa yang telah anda dapatkan dari kode diatas? Jelaskan dibawah ini!
c. Mengenal Pernlangan dalam Java Script
Seperti Java, JS juga mengenal model pernlangan, sifat dan penulisan pernlangan di JS
hampir sam dengan j ava.
Ketik kode berikut ini simpan dalam file bemama [Link]
<html>
<head>
<title>::Kondisi: :</title>
</head>
<body>
<b>Bilangan Genap 1-10 adalah </b>
<SCRI!'T language="Javascript">
<!--
var i=O;
var jumlah=O;
while(i++<lO) {
if((i%2)==0) {
jumlah+=i;
[Link](i, ' ');
}
}
[Link]('<br><b>Jumlah =</b> ' ,jumlah);
II-->
</SCRIPT>
</body>
</html>
Tugas : Silahkan anda ubah kode tersebut dengan perulangan for, clan tambahkan kode
agar
program bisa menyeleksi mana bilangan ganjil dan mana bilangan genap.
d. Mengenal fungsi di java script
JS juga mengenal pembuatan fungsi, hanya saja fungsi di java script berbeda dengan fungsi di
java. Fungsi di JS pembuatannya sama persis dengan variable yaitu tidak ditentukan tipe dari
fungsi tersebut. Melainkan JS akan mengenal fungsi tersebut bertipe apa dari basil
keluarannya.
Ketik kode berikut ini, simpan dalam file bemama
[Link]
<html>
<head>
<title>: :Fungsi: :</title>
</head>
<body>
<SCRIPT language="Javascript">
<!--
function kali()
c=a*b;
return c;
)
function bagi(x,y)
z=x/y;
return z ,
var a=3;
var b=6;
[Link]('Hasil dari •, a,' x ',b,' ', kali {));
[Link]('<br><br>');
[Link]('Hasil dari ' b,' / ',a,' ',bagi(b,a));
II-->
</SCRIPT>
</body>
</html>
Tugas: Silahkan anda buat sebuab fungsi yang bisa menghitung berapa banyakjwnlah
bilangan genap dari N angka yang dimasukkan melalui parameter fungsinya.
e. Mengenal percabangan dalam JavaScript
Javascript juga mempunyai bentuk percabangan. Untuk percabangan ini kita akan
membahas
percabangan if.
Ketik kode dibawah dan simpan dalam file bemama [Link]
<script language="javascript">
var t=new Date ()
var jam=[Link]()
var menit=[Link]()
var detik=[Link]()
[Link] ("<b><center>Sekarang ini jam menunjukkan pukut :
<h3>"+jam +": "+menit+": "+detik+"<br><br>")
if (jam==l II jam<12) alert("SelamatPagi!")
else if(jam==12 11 jam<l8) alert("Selamat s i anq l
") else if(jam==l8 11 jam<20) alert("Selamat Sore!")
else alert ("Selamat Malam! ")
</script>
Tugas : Silahkan anda ubah percabangan if diatas dengan percabangan swith-case. Kode
switch case JS mirip dengan j ava. Jika bingung minta petunjuk asisten.
f. Mengenal variable array JavaScript
Ketik kode berikut ini, dan simpan dengan nama file [Link]
<script language="javascript">
var hari=new
Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu")
var bulan=new Array ("Januari", "Pebruari", "Maret", "April", "Mei",
"Juni n I "Juli" I "Agustus" I II September" I "Oktober" I "Nopember" I "Desember")
var t=new Date ()
var hari_ini=hari[[Link]()J
var tanggal=[Link]()
var bulan_ini=bulan[[Link]()]
var tahun=[Link]()
document. write ("<b><center>Sekarang adalah hari: "+hari ini +".
tanggal: "+tanggal+" "+bulan_ini+" "+tahun)
</script>
Tugas : Silahkan anda buat program untuk mengiterasi nilai variable array diatas
dengan
menggunakan perulangan for. Simpan dalam file bemama [Link] masukkan
kode
program dalam fungsi, dan tampilkan outputnya dengan perintah document.
writet)
g. Mengenal Form dan Event di JavaScript
Aplikasi berbasis web memanfaatkan JS untuk menambahkan event didalamnya, karena
hingga saat ini belum ada Bahasa pemrograman web seperti PHP, ASP sejauh ini JS dan
VB Script yang mempunyai fitur ini dan paling banyak digunakan.
Event onClick
Ketik kode berikut ini dan simpan dengan nama [Link]
<html>
<head>
<title>:Event Click:</title>
<script language="Javascript">
function dontclickme() {
alert ( "Terima Kasih Sudah Klik saya ! ");
}</script>
</head>
<body><form>
<input type="button" value="KlikAku" onClick="dontclickme ()"></form>
</body>
</html>
Event OnClick Pada Fotm
Ketikkan kode berikut ini, simpan dalam file bemama [Link]
<html>
<head>
<title>:Event Click:</title>
<body>
<script language="Javascript">
function calcl(form) {
a= [Link]/100;
b = a*[Link];
[Link] = b;
}</script>
</head>
<body>
<form name="form">
Persentase ; <input type="text" name="a" size=S></br>
Angka Di Presentase :<input type="text" name="b" size=S> </br>
<input type="button" value="Calculate" onClick="calcl (this. form)">
</br>
<input type="text" name="totall"size=S maxlength=40>
</form>
</body>
</html>
Apa yang bisa and a jelaskan setelah mengerjakan kode diatas?
h. Untuk percobaan praktikum Java Script kedua, kita akan mencoba membuat operasi cbeckAll
clan Uncheck All pada list data yang ditampilkan dengan checkbox dengan memanfaatkan
eventonclick.
Ketikkan kode berikut ini, dan simpan dalam file [Link]. jangan lupa tambahkan
struktur tag standart dokumen htmlnya.
<Script Language="Javascript">
function checkAll(field) {
for (i = O; i <[Link]; i++) field[il .checked true
}
function uncheckAll(field)
{
for (i = O; i <[Link]; i++) field[i] .checked false
}
</script>
<form name="formnya">
<input type="button" name="CheckAll" value="Check All"
onClick="checkAll (document. [Link]) ">
<input type="button" name="UnCheckJl.11" value="Uncheck All"
onClick="uncheckAll ([Link])"><br>
<input type="checkbox" name="buah" />Manqqis<br>
<input type="checkbox" name="buah" />Apel<br>
<input type="checkbox" name="buah" />Jeruk<br>
<input type="checkbox" type="checkbox" name="buah" name="buah" />Pear<br>
<input />Anggur
</form>
Tugas : Silahkan anda ubah aplikasi sederhana tersebut dengan menggunakan 1 button,
adapun system kerja yang diinginkan adalah : ketika posisi checkbox tercentang akan
menampilkan pesan UncheckAll pada tombol, dan Jikaposisi chechbox tidak tercentang
maka akan menampilkan CheckAll seperti gambar berikut:
I UnChccl<"ll I
~Ma>ggis
i::ZJA~el
[Link].11k
0Pcor
[Link]
2. Buat sebuah form dengan struktur seperti gambar dibawah, kerrmdian tambahkan aksi ketika
tombol submit diklik, clan ada field yang belum diisi maka ada alert yang mengatakan bahwa
field terse but hams diisi. Simpan dalam file bernama [Link]
FonnPendaftaran:------
-
Nama: IMasukkan Nama
E-mail: lMasukkan Email
Alamat: _I ~J
3. Percobaan 2 : Mengenal FrameworkJQuery
Adalah salah satu Framework JavaScript yang banyak digunakan saat ini, selain JQuery masih
ada banyak Framework javascript lain yang bisa anda gunakan.
Dalam praktik ini, kita akan membuatprogram untuk mengakses nilai inputan dalam
form menggunakanfitur JQue1y. Perhatikan stmktur kode berikutini.
<link href="[Link]" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery .min. js">
</script>
<script type="text/javascript" >
s (function() (
$(".eek"} .click (function(} {
var tinggi = S("#bilangan"} .val(};
if (tinggi%2==0}
{
alert{'Bilangan'+tinggi+'Adalah Ganep'};
}else{
alert{'Bilangan'+tinggi+'Adalah Ganjil');
}
}} ;
return false;
}} ;
</script>
<hl>Pengecek Bilangan Ganjil/Genap</hl>
<form name="formsubmit">
Masukkan Angka <input id="bilangan" type="text" class="blue" />
<input type="submit" value="CEK BILANGAN" class="cek"/>
</form>
Contoh JQuery diatas hanyalah contoh simple dari penerapan JQuery dalam document
HTML. anda bisa mencari lebih lanjut fitur fitur apa yang didukung JQuery di situs resmi JQuery.
C. KESIMPULAN
Tuliskan pendapat atau kesimpulan yang bisa anda arnbil dari praktikum yang telah anda
lakukan.
[Link] Mengerjakan ©