1. Mencetak teks dalam javascript

Dalam Java Script perintah yang digunakan untuk mencetak suatu teks pada dokumen HTML adalah
document.write(“pesannya”).
Untuk lebih jelasnya cobalah ketikan code berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
document.write(“<H1>Aksara Jawa</H1>”);
</SCRIPT>
<I>Tulisan di atas dihasilkan oleh Java Script</I>
</BODY>
</HTML>

2. Tipe Data dan Deklarasi Variabel
Dalam Java Script terdapat tiga macam tipe data utama, yaitu tipe data String (kumpulan karakter), tipe data
bilangan / numerik, dan tipe data logika / boolean. Pada tipe data boolean akan mengenal dua buah nilai yaitu
true dan false.
Pendeklarasian variabel dalam Java Script ditandai dengan penggunaan kata kunci var dan diikuti dengan
nama variabel. Tipe data dari suatu variabel ditentukan oleh nilai yang diisikan ke dalam variabel tersebut dan
bukannya dideklarasikan secara eksplisit. Untuk lebih jelasnya cobalahcontoh berikut ini:
<SCRIPT LANGUAGE=”JavaScript””>
var kota = ”bandung”; // deklarasi variabel bernama kota bertipe data string
var gaji = 0; // deklarasi variabel bernama gaji bertipe data integer
var ipk = 2.75; // deklarasi variabel bernama ipk bertipe data float
var status_cekal = false; // deklarasi variabel bernama status_cekal bertipe data boolean
</SCRIPT>

3. Konversi Tipe Data
Dalam pemrograman java script dimungkinkan untuk melakukan konversi / pengubahan tipe data.
Tipe data yang memungkinkan untuk dikonversi adalah tipe data string ke tipe data numerik.
Ada dua fungsi yang bisa digunakan untuk mengkonversi suatu nilai bertipe data string ke numerik, Fungsi
yang pertama adalah fungsi parseInt() dan fungsi yang kedua adalah fungsi parseFloat().
Fungsi parseInt() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik berbentuk
bilangan bulat / integer.
Dan fungsi parseFloat() digunakan untuk melakukan konversi dari tipe data string ke tipe data numerik
berbentuk bilangan pecahan / floating point.
fungsi keterangan contoh:
– parseInt() digunakan untuk konversi dari tipe data string ke
tipe data numerik bilangan bulat / integer
– parseFloat() digunakan untuk konversi dari tipe data string ke
tipe data numerik bilangan pecahan / floating

4. Mengenal Message Box

Dalam Java Script terdapat tiga macam message box standar, yaitu alert, confirm, dan prompt. Dalam
JavaScript ketiga message box ini merupakan bagian dari objek window.
Alert
Alert digunakan untuk menampilkan pesan / informasi yang sifatnya penting dan mendesak. Misalkan saja
informasi yang menyatakan bahwa suatu halaman web membutuhkan shcokwave player yang terinstal pada
web browser.
Bentuk umum dari message box alert adalah:
window.alert(pesan);
Untuk lebih jelasnya dapat mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>ALERT</H1>
<SCRIPT LANGUAGE=”JavaScript”>
window.alert(“JavaScript memang hebat”);
</SCRIPT>
</BODY>
</HTML>

Confirm
Confirm digunakan untuk meminta konfirmasi dari pengunjung web. Nilai yang mampu ditampung oleh
message box ini adalah nilai true atau false. Kedua nilai ini dihasilkan dari penekanan tombol Ok atau Cancel.
Penekanan tombol Ok akan menghasilkan nilai true sedangkan penekanan tombol Cancel akan menghasilkan
tombol false.
Bentuk umum dari message box confirm adalah:
window.confirm(pertanyaan);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>CONFIRM</H1>
<SCRIPT LANGUAGE=”JavaScript”>
var komentar;
komentar = window.confirm(“Apakah Anda vegetarian?”);
if (komentar) {
document.write(“Anda seorang vegetarian”);
} else {
document.write(“Anda bukan seorang vegetarian”);
}
</SCRIPT>
</BODY>
</HTML>

Prompt
Prompt dapat digunakan untuk menampung nilai yang diinputkan oleh penunjung web.
Bentuk umum dari message box prompt adalah:
window.prompt(pesan, nilai_default);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
Prompt dapat digunakan untuk menampung nilai yang diinputkan oleh penunjung web.
Bentuk umum dari message box prompt adalah:
window.prompt(pesan, nilai_default);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>PROMPT</H1>
<SCRIPT LANGUAGE=”JavaScript”>
var nama;
nama = window.prompt(“Masukkan nama Anda”, “Mbah Boedy”);
document.write(“Selamat Datang ” + nama);
</SCRIPT>
</BODY>
</HTML>

5. Mengenal function
Penggunaan function memungkinkan penulisan suatu kode program secara modular atau yang sering kali
disebut sebagai modular programming. Penulisan function pada JavaScript umumnya diletakkan pada bagian
HEAD dalam dokumen HTML.
Bentuk umum dalam penulisan function adalah:
function nama_function() {
//statementstatement
yang akan dieksekusi oleh function
}
Ketika suatu function ingin digunakan yang perlu dilakukan adalah memanggil nama functionnya.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function salam() {
document.write(“<H1>Hallo Apa Kabar?</H1>”);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
salam();
document.write(“Header tersebut dihasilkan dari pemanggilan function salam”);
</SCRIPT>
</BODY>
</HTML>

6.Mengenal Event
Event adalah kejadian yang terjadi pada suatu halaman web. Kejadian ini bisa bermacammacam,
ada kejadian
penekanan tombol, kejadian pengubahan nilai pada textbox, dan bermacammacam
kejadian lainnya.
Kejadiankejadian
tersebut bisa diarahkan untuk memicu pemanggilan suatu function tertentu. Konsep
pemrograman di mana suatu function dipanggil berdasarkan suatu event tertentu dikenal dengan istilah event
handling programming.

Event onClick
Event onClick merupakan kejadian penekanan tombol mouse (click) pada komponen form. Kejadian ini bisa
berupa penekanan tombol, pemilihan checkbox maupun radio button, dan pemilihan suatu link, serta
penekanan tombol submit ataupun reset.
Pengaturan terhadap event ini dilakukan dengan menuliskan atribut onClick pada tag HTML yang
bersangkutan. Atribut ini dapat diberi nilai berupa nama function yang akan dipicu oleh event tersebut.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function salam() {
window.alert(“Selamat Datang\n” + formku.nama.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=”formku”>
<TABLE>
<TR><TD>Nama:</TD><TD><INPUT TYPE=”TEXT” NAME=”nama”></TD></TR>
<TR><TD></TD><TD><INPUT TYPE=”BUTTON” VALUE=”Proses” onCLick=”salam()”></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Event onFocus dan onBlur
Event onFocus berkaitan dengan kejadian mengarahkan fokus kursor ke suatu komponen form tertentu. Contoh
nyata dari kejadian ini adalah ketika melakukan pemindahan kursor ke dalam suatu textbox baik itu dilakukan
dengan menggunakan bantuan mouse ataupun menggunakan tombol tabulasi pada keyboard.
Sedikit berbeda dengan event onFocus, event onBlur berkaitan dengan kejadian ketika kursor beralih
meninggalkan suatu komponen form tertentu.
Baik event onFocus maupun event onBlur keduanya bisa diimplementasikan pada komponen textbox dan text
area.

Event onChange
Event onChange merupakan suatu kejadian pengubahan nilai pada suatu komponen. Contoh nyata dari event
ini adalah pada kejadian pengisian atau pengubahan nilai pada textbox, text area, combo box, dan listbox.
Untuk lebih jelasnya bisa mempelajadi contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function ubah_nama() {
window.alert(“Nama Anda ” + formku.nama.value);
}
function ubah_kota() {
window.alert(“Anda berada di kota ” + formku.kota.value);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Mengenal Event onChange</H1>
<FORM NAME=”formku”>
<TABLE>
<TR>
<TD>Nama</TD>
<TD><INPUT TYPE=”TEXT” NAME=”nama” onChange=”ubah_nama()”></TD>
</TR>
<TR>
<TD>Kota</TD>
<TD><SELECT NAME=”kota” onChange=”ubah_kota()”>
<OPTION VALUE=”Jakarta”>Jakarta</OPTION>
<OPTION VALUE=”Bandung”>Bandung</OPTION>
<OPTION VALUE=”Jogja”>Yogyakarta</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Event onSelect
Event onSelect berkaitan dengan kejadian pemilihan teks pada suatu komponen form seperti pemilihan teks
yang berada pada suatu textbox. Event ini bisa diterapkan pada textbox, textarea, combo box, dan list box.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function select_nama() {
window.alert(“Anda memilih teks \n pada textbox nama”);
}
function select_komentar() {
window.alert(“Anda memilih teks \n pada textarea komentar”);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Mengenal Event onSelect</H1>
<FORM NAME=”formku”>
<TABLE>
<TR>
<TD>Nama</TD>
<TD><INPUT TYPE=”TEXT” NAME=”nama” onSelect=”select_nama()”></TD>
</TR>
<TR>
<TD>Komentar</TD>
<TD>
<TEXTAREA NAME=”komentar” COLS=”20″ ROWS=”5″ onSelect=”select_kota()”>
</TEXTAREA>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Event onMouseOver dan onMouseOut
Event onMouseOver dan onMouseOut berkaitan dengan kejadian pergerakan kursor mouse pada suatu link.
Event onMouseOver terjadi ketika kursor mouse berada di atas suatu link sedangakan event onMouseOut
terjadi ketika cursor mouse bergerak meninggalkan suatu link.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE=”JavaScript”>
function dekat() {
window.alert(“Cursor Mouse Mendekat”);
}f
unction jauh() {
window.alert(“Cursor Mouse Menjauh”);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Mengenal Event onMouseOver dan onMouseOut</H1>
<A HREF=”http://ubuntu.com&#8221; onMouseOver=”dekat()” onMouseOut=”jauh()”><IMG SRC=”pic1.jpg”></A>
</BODY>
</HTML>
Semoga dapat membantu kalian membuat javascript yah…^^