Pages

Rabu, 19 November 2014

MODUL 7 JAVASCRIPT



MODUL 7
JAVASCRIPT

A.  TUJUAN
Mengetahui dan memahami bahasa Javascript dalam pemrograman web.

B.   LANDASAN TEORI
Javascript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML. Sepanjang sejarah internet bahasa ini adalah bahasa script pertama untuk web. Bahsa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah disisi user, yang artinya disisi browser bukan di sisi server web.



Sejarah Javascript
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.[6] JavaScript adalah bahasa yang digunakan untuk AJAX
Beberapa contoh menggunakan adalah:
  • berputar atau bergulir teks.
  • membuat bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh, dalam sebuah formulir pemesanan, jika pengguna kutu kotak centang “menyampaikan kepada alamat yang berbeda”, bagian ekstra dengan kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat terlihat.
  • drop down menu.
  • mengambil informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
  • memvalidasi input pengguna pada formulir.
  • perhitungan tanpa perlu kembali ke server.
  • menentukan jenis browser.


Hubungan ke Java
Meskipun nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari sintaks antara dua bahasa. Bahkan mereka dikembangkan oleh dua perusahaan yang sama sekali berbeda, dengan tujuan dan pemikiran yang berbeda: Netscape mengembangkan JavaScript dan Sun Microsystems mengembangkan Java. Hanya saja kedua nama tersebut membingungkan bagi orang yang belum tau.
JavaScript dapat diinterpretasikan oleh browser yang paling  langsung dan cepat, sementara Java memerlukan terpisah “Java Virtual Machine” harus dimulai sebelum menjalankan. JavaScript dan Java sama-sama menggunakan sintaks yang mirip (berdasarkan bahasa C) tetapi perintah yang digunakan banyak yang sangat berbeda. Ada juga perbedaan teknis. Java adalah bahasa diketik statis yang membutuhkan deklarasi semua variabel dan jenis mereka (misalnya integer, string atau boolean). Sebaliknya, Javascript adalah “longgar” bahasa diketik, memungkinkan variabel yang akan digunakan tanpa deklarasi sebelumnya.
Sebagai contoh, membandingkan dua metode penulisan ke tampilan (halaman).
Di Java, untuk menulis “Halo dunia!”, Kode akan membaca: System.out.println (“Halo dunia!”);
Sedangkan dalam JavaScript (di browser), akan berkata: document.write (“Halo dunia! “);
Untuk lebih jelasnya dibawah contoh penulisan javascript,
Penulisan JavaScript
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag
<script type=”teks/javascript”>.
<script type=”teks/javascript”>
alert(“Halo Dunia!”);
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:
<script type=”teks/javascript” src=”alamat.js”>
</script>
Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).
<html>
<head>
<script type=”teks/javascript”>
…
</script>
</head>
</html>
Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.
<html>
<head>
</head>
<body>
<script type=”teks/javascript”>
…
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.

External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js document.write(“pesan ini tampil ketika halaman diload”);
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman HTML-nya.
<html>
<head>
</head>
<body>
<script src=”xxx.js”>
</script>
<p>Script di atas berada di berkas “xx.js” (eksternal) </p>
</body>
</html>

C.  ALAT DAN BAHAN
1.        Laptop
2.       Sistem Operasi Windows 7
3.       Browser Chrome
4.      Notepad ++
5.       Dua file image berektensi .jpg
6.      Lembar kerja percobaan

D.  LANGKAH-LANGKAH PRAKTIKUM
Percobaan 1
1.        Buka aplikasi notepad
2.       Ketik script berikut
<html>
<head>
<title>Javascript</title>
</head>
<body>
<script language="Javascript">
<!--
confirm("Hallo...!");
// -->
</script>
</body>
</html>

3.       Simpan file dengan nama percobaan1.html
4.      Buka file dengan bowser
5.       Print screen hasilnya lampirkan dalam laporan.
Percobaan 2
1.        Letakkan dua buah file image berektensi .jpg dan beri nama file tersebut dengan nama masing-masing gambar1.jpg dan gambar2.jpg
2.       Buka aplikasi notepad
3.       Ketikkan script berikut
<html>
<head>
<title>Mouse Over</title>
</head>
<body>
<a href="javascript:;"
onMouseOver="document.img_1.src='gambar1.jpg';"
onMouseOut="document.img_1.src='gambar2.jpg';">
<img name="img_1" src='gambar2.jpg' height='100' width='100'></a>
<body>
<html>

4.      Simpan file dengan nama mouseover.html
5.       Buka file dengan browser
6.      Arahkan pointer mouse pada gambar, amati yang terjadi
7.       Print screen hasilnya lampirkan dalam laporan.

Percobaan 3
1.        Buka aplikasi notepad
2.       Ketikkan script berikut
<html>
<head>
<title>Counter</title>
<script>
function CountMax()
{
var wert,max;
max = 100
wert = max-(document.form1.question.value.length);
if (wert < 0){
alert("Maaf, batas maksimum pengisian adalah "+ max +" karakter!");
document.form1.question.value=
document.form1.question.value.substring(0, max);
wert = max-(document.form1.question.value.length);
document.form1.rv_counter.value = wert;
} else {
document.form1.rv_counter.value = max-
(document.form1.question.value.length);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<textarea name="question" cols="60" rows="3"
id="question" OnFocus="CountMax();"
OnClick="CountMax();" OnChange="CountMax();"
OnKeydown="CountMax();" OnKeyup="CountMax();"
wrap="virtual"></textarea>
<font face="arial, helvetica, sans-serif,
bookman old style, comic sans ms" size="2">
Sisa<input name="rv_counter" type="text" size="3"
maxlength="3" value="100">
</form>
</body>
</html>

3.       Simpan file dengan nama counter.html
4.      Buka file dengan browser
5.       Ketikkan karakter pada text area sebanyak 101 karakter, kemudian amati yang terjadi
6.      Print screen hasilnya lampirkan dalam laporan.
Percobaan 4
1.        Buka aplikasi notepad
2.       Ketikkan script berikut
<html>
<head>
<title>Kalkulator</title>
<script language='javascript'>

function tambah()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
tambah=parseInt(nilaia)+parseInt(nilaib);
document.myform.hasil.value=tambah;
}

function kurang()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
kurang=nilaia-nilaib;
document.myform.hasil.value=kurang;
}

function kali()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
kali=nilaia*nilaib;
document.myform.hasil.value=kali;
}

function bagi()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
bagi=nilaia/nilaib;
document.myform.hasil.value=bagi;
}
</script>
</head>
<body>
<form name='myform'>
<h3>Kalkulator Sederhana</h3></br>
Nilai A = <input type='text' name='a' size='5'></br></br>
Nilai B = <input type='text' name='b' size='5'></br></br>
<input type='button' name='aksi' value='+' Onclick='tambah()'>
<input type='button' name='aksi' value='-' Onclick='kurang()'>
<input type='button' name='aksi' value='*' Onclick='kali()'>
<input type='button' name='aksi' value='/' Onclick='bagi()'>
</br></br>
<b>Hasil = </b><input type='text' name='hasil' size='5'>
</br>
</form>
</body>
</html>

3.       Simpan file dengan nama kalkulator.html
4.      Buka file dengan browser
5.       Masukkan nilai A dan nilai B, kemudian klik salah satu tanda operasi (+, -, *, /). Amati hasilnya dengan mengeklik seluruh tombol operasi.
6.      Print screen hasilnya lampirkan dalam laporan.
E.   TUGAS
1.        Buatlah aplikasi pengambil keputusan sederhana menggunakan javascript yang menghitung nilai dengan ketentuan:
Jika Nilai 0-20 = E,
Jika Nilai 21-40 = D,
Jika Nilai 41-60 = C,
Jika Nilai 61-80 = B,
Jika Nilai 81-100 = A,
Tuliskan scripnya dan lampirkan hasil tampilan dibrowser.
<html>
<head>
<title>Pengabilan Keputusan</title>
</head>
<body>
<script language="javascript">
<!--
var nilai;
nilai=prompt("Isi Nilai","");
if ((nilai <= 100) && (nilai >=81))
{
document.write("Nilai A");
}
else if ((nilai <=80) && (nilai >=61))
{
document.write("Nilai B");
}
else if ((nilai <=60) && (nilai >=41))
{
document.write("Nilai C");
}
else if ((nilai <=40) && (nilai >=21))
{
document.write("Nilai D");
}
else if (nilai < 20)
{
document.write("Nilai E");
}
//-->
</script>
</body>
</html>






Posted by at 04.14
Labels:

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)