tutorial javascript untuk pemula dan lanjutan part 1

Menguasai javascript merupakan keharusan bagi para developmen web. Dengan adanya javascript kita dapat memberikan bermacam-macam efek bagi web seperti membuat jendela pop up yang cantik, slide gambar, dan masih banyak lagi. Sepertinya kita bertanya dulu "Apa sih javascript itu?", "Apa javascript termasuk salah satu varian java?", Pertanyaan dasar seperti itu biasa di lontarkan oleh orang yang baru pertama mendengar istilah javascript. Begini jawabannya dari Wikipedia.

Sejarah awalnya javascript adalah 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.

JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

Java Tidak ada hubungan sama sekali dengan java. Walaupun depannya ada tulisan java.. , Sebenearnya java dan javascript hampir memiliki beberapa persamaan namun itulah keistimewaan sebuah bahasa pemrogramman.

Sintax penulisan javascript yaitu:
1. Apabila ingin menulis script javascript di sembarang tubuh html maka penulisannya.
<script type="javascript/html">
document.write("javascript pertama");
</script>
2. Menaruh script javascript di bawah head juga di perbolehkan.
<head>
<script type="javascript/html">
window.alert("javascript pertama");
</script>
</head>
3. Pemanggilan javascript juga di perbolehkan, caranya:
>buat file javascript dengan copas script di bawah ke notepad.
<script type="javascript/html">
document.write("javascript pertama");
</script>
simpan dengan ekstensi nama.js pada type ganti all files, ok.
>buah html baru pada bagian bawah <head> taruh script atau di bawah tag body
<script src=namafiletadi.js>
</script>
simpan di tempat yang sama dengan file javascript tadi, nama harus berekstensi html, nama.html

Komentar

Sama seperti bahasa pemrograman lain. Javascript juga menyediakan fasilitas untuk menuliskan komentar, komentar ini berguna bila nantinya anda atau orang lain membaca program.

Pemberian komentar dalam Javascript dapat dilakukan dengan dua cara yaitu dengan menuliskan komentar setelah tanda garis miring dua kali, contoh :

//ini komentar pendek

atau

/*ini juga komentar panjang */



Sekarang kita belajar mulai dari dasar dan lanjut

1. Pembuatan Pertanyaan memakai var.

<script>
var nama = window.prompt("siapa anda?");
window.alert("nama anda"+ nama);
</script>

2. Menggabungkan html, css dan javascript.

<script>
document.write("Nama :Paijo");
</script>

3. Membuat pop up melayang.

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #000000;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

kode iklan disini !!!!

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
4. Membuat pop up.

<SCRIPT LANGUAGE = "JavaScript">
<!--
function buatJendela() {
jendela = open("", "", "width=50, height=50");
jendela.document.write("<HTML><HEAD></HEAD>");
jendela.document.write("<BODY BGCOLOR = 'BLUE'>");
jendela.document.write("Jendela Baru");
jendela.document.write("</BODY></HTML>");
}

function tutupJendela() {
if (typeof(jendela) != "undefined")
jendela.close();
}
//-->
</SCRIPT>
<FORM>
<INPUT TYPE = "BUTTON"
VALUE = "Buat Jendela"
onClick = "buatJendela()">
<INPUT TYPE = "BUTTON" NAME = Tutup"
VALUE = "Tutup Jendela Baru"
onClick = "tutupJendela()">
</FORM>

Sebenarnya ada cara yang lain buat bikin pop up (tapi browser sekarang sudah memberikan pilihan pemblokiran pop up, dasar pop up seperti <a href="http://blank-note.blogspot.com" onclick="Window.open('http://kaskus.us');"> klik here </a>

4. Melihat navigator browser client.

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>

5. Ubah warna dokumen.

<script language="JavaScript">
<!-- function ubahWarnaLB(warna) { document.bgColor = warna; } function ubahWarnaLD(warna) { document.fgColor = warna; } //-->
</script>
<h1>TES
<form>
<input value="Latar Belakang Hitam" onclick="ubahWarnaLB('BLACK')" type="BUTTON">
<input value="Latar Belakang Putih" onclick="ubahWarnaLB('WHITE')" type="BUTTON">
<input value="Teks Kuning" onclick="ubahWarnaLD('YELLOW')" type="BUTTON">
<input value="Teks Putih" onclick="ubahWarnaLD('WHITE')" type="BUTTON">

</form>

<script language="JavaScript">
<!-- document.write("Dimodifikasi terakhir pada " + document.lastModified); //-->
</script>

5. Metode Spilt.


<SCRIPT LANGUAGE = "JavaScript">
<!--
var str = "Amir Hamzah;Jl. Cempaka 23;Yogya";

var hasil = str.split(";");
for (var i = 0; i <>
</SCRIPT>

6. Metode indexOf() dan lasIndexOf()

<SCRIPT LANGUAGE = "JavaScript">
<
!--
var str = "aku dan dia pergi ke teman dia";
var cari = "dia";

document.write("Kata 'dia' pertama kali ada pada ");
document.write("posisi ke-" + str.indexOf(cari) +
"
");

document.write("Kata 'dia' terakhir kali ada pada ");
document.write("posisi ke-" + str.lastIndexOf(cari) +
"
");

//-->
</SCRIPT>

7. Metode charAT()

<SCRIPT LANGUAGE = "JavaScript">
<!--
var str = "JavaScript";
for (var i = 0; i < str.length; i++) document.write(str.charAt(i) + ' - ' + str.charCodeAt(i) + "
");
//-->
</SCRIPT>
DOWNLOADS
Next PostPosting Lebih Baru Previous PostPosting Lama Beranda
Posting Komentar