Apa itu Javascript? Memang terkesan familiar namanya. Apalagi kalau anda tidak sengaja membuka web yang didalamnya terdapat konten, "Copy paste kan kode Javascript ini pada blog anda". Mungkin beberapa dari anda, keluar beberapa pertanyaan. Mulai dari, Apa itu Javascript? Bentuk umum kode/script-nya seperti apa? Hingga sampai apa fungsi dari Javascript itu?. Nah kebetulan di posting kali ini, saya akan mengulas satu persatu tentang Javascript itu sendiri, sampai pada contoh script-nya. Maap-maap nih ya kalau script-nya terbilang cukup sederhana, toh disini kan cuma perkenalan tentang Javascript itu sendiri (ngeles, bilang aja masih newbie :D ). Mungkin di lain kesempatan, saya akan membuat tutorial khusus untuk Javascript ini sendiri. Langsung ke TKP.
Kalau sekilas melihat namanya, "Javascript", pasti pikiran anda langsung tertuju pada bahasa pemrograman Java. Jadi mentang-mentang nama depannya sama, jadi artinya juga sama gitu. Kalau benar anda berpikiran seperti itu, maka saya berani menjawab anda 100% salah. Kalau saya yang salah, iris deh kuping saya (becanda ya, jangan iris beneran). Langsung saja, Javascript itu merupakan suatu bahasa yang berjalan disisi klien (client side scripting). Apa itu Client-side? Yah contoh simple-nya seperti bahasa HTML aja. Jadi bahasa/script itu diterjemahkan langsung oleh browser pada komputer user. Dari situ, kita dapat menyimpulkan, kalau Javascript itu merupakan bahasa yang berjalan di browser.
Selanjutnya, "Apa sih fungsi dan kelebihan Javascript?". Secara keseluruhan, Javascript digunakan untuk menyediakan akses script pada objek yang embedded (dibenamkan). Kelebihannya, Javascript dapat membuat atau membuka halaman pop up, fungsi validasi pada form sebelum data dari form itu dikirim ke server, merubah image kursor ketika melewati objek tertentu, dan lain-lain. Kesimpulannya, fungsi sekaligus kelebihan Javascript itu untuk membuat web tampil lebih atraktif, dinamis serta lebih efektif (terutama dalam hal tampilannya). Kebetulan di blog saya yang sangat amat teramat sederhana ini, terdapat Javascript-nya. Dimananya? Anda bisa lihat pada navigasi bar saya yang terletak pada header. Apabila kita sorot navigasi tersebut, maka akan muncul menu yang baru dibawahnya (drop-down menu). Menarik bukan?
Bentuk Umum Javascript
Script pada bagian head
<html>
<head>
<script type="text/javascript">
.....
</script>
</head>
</html>
Script pada bagian body
<html>
<head>
</head>
<body>
<script type="text/javascript">
.....
</script>
</body>
</html>
External Javascript
<html>
<head>
</head>
<body>
<script src="xxx.js">
</script>
<p>Script di atas ada di "xxx.js" (external)</p>
</body>
</html>
Contoh halaman web sederhana dengan Javascript
<html>
<head>
<title>Simple</title>
<script type="text/javascript">
function message() {
alert ("Visit my blog http://sharethewords.blogspot.com/");
}
</script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<div id="header">
<h1><center>sharethewords.blogspot.com</h1>
</div>
<div id="menu">
<div class="navigasi">
<h3><center>Favorite Links</center></h3>
<ul>
<li><a href="https://www.blogger.com/">Blogger</a></li>
<li><a href="http://www.google.co.id/">Google</a></li>
<li><a href="http://www.indowebster.com/">Indowebster</a></li>
<li><a href="http://www.kaskus.us/">Kaskus</a></li>
<li><a href="http://www.mediafire.com/">Mediafire</a></li>
<li><a href="http://twitter.com/">Twitter</a></li>
</ul>
</div>
</div>
<div id="isi">
<img src="index.jpg" class="gambar" />
<p><center>Masukan Data Anda :</center></p>
<p><body onload="message()">
<pre>
<script type="text/javascript">
nama = prompt ("Nama Anda");
document.writeln("Nama Anda : "+nama);
kelas = prompt ("Kelas Anda");
document.writeln("Kelas Anda : "+kelas);
npm = prompt ("NPM Anda");
document.writeln("NPM Anda : "+npm);
uts = prompt ("UTS Anda");
document.writeln("UTS Anda : "+uts);
uas = prompt ("UAS Anda");
document.writeln("UAS Anda : "+uas);
final = ((uts*0.5)+(uas*0.5));
document.writeln("Nilai Akhir : "+final);
document.write("Grade Anda : ");
if (final<20)
{
document.write("<b>E</b>");
}
else if (final<40)
{
document.write("<b>D</b>");
}
else if (final<60)
{
document.write("<b>C</b>");
}
else if (final<80)
{
document.write("<b>B</b>");
}
else
{
document.write("<b>A</b>");
}
</script>
<br>
</div>
<div id="footer">
<p>Copyright © 2010 by ilhamsetya</p>
</div>
</div>
</body>
</html>
Hasilnya :
Cukup jelas kan? Silahkan dicoba. Share the one world now !
Tidak ada komentar:
Posting Komentar