Java script
Apa itu JavaScript? JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape. JavaScript digolongkan sebagai bahasa scripting sisi klien (client side scripting) artinya bahwa script JavaScript tersebut akan dieksekusi atau dijalankan pada komputer kita sendiri saat kita membuka suatu halaman web yang berisi script JavaScript. Dengan JavaScript kita dapat dengan mudah membuat halaman web yang interaktif.
Menjalankan JavaScript Apa yang diperlukan untuk menjalankan script yang ditulis dengan JavaScript? Kita perlu JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript – misalnya Netscape Navigator (versi 2.0 ke atas ) atau Microsoft Internet Explorer (MSIE - versi 3.0 ke atas). Mengingat kedua browser di atas telah banyak beredar dan digunakan, pemilihan JavaScript sebagai untuk meningkatkan kemampuan halaman web menjadi sangat baik. Untuk menggunakan JavaScript kita harus telah mengenal baik HTML.
<html> <body> <br> Ini halaman HTML normal. <script language="JavaScript"> document.write("Yang ini akibat JavaScript!") </script> Ini HTML lagi. </body> </html> <script language="JavaScript"> document.write("Yang ini akibat JavaScript!") </script> Untuk melihat hasilnya simpan file di atas sebagai file HTML normal dan buka dari JavaScript-enabled browser. Hasilnya akan terlihat seperti berikut ini: (jika kita menggunakan JavaScript-enabled browser akan terlihat 3 baris):
PERHATIKAN PENULISAN JAVA SCRIPT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Demo Kotak Dialog</title> </head> <body> <script language="JavaScript" type="text/javascript"> <!-- alert('OK, JavaScript Enabled'); //--> </script> Refresh (F5) untuk melihat pesan JavaScript </body> </html>
Non-JavaScript browser Apa yang akan terjadi jika kita menggunakan browser yang tidak mengerti JavaScript? Non-JavaScript browser tidak mengenal tag <script>. Dia akan mengabaikan tag itu dan mengeluarkan seluruh kode selayaknya text biasa .
<html> <body> <br> Ini halaman HTML normal. <script language="JavaScript"> <!-- document.write("Yang ini akibat JavaScript!") //--> </script> Ini HTML lagi. </body> </html> PERHATIKAN TANDA <!--……..//> DIDALAM HTML DISEBUT DENGAN KOMENTAR. DI DALAM JAVA SCRIPT PENGGUNAAN TANDA TSB DIMAKSUDKAN AGAR KETIKA WEB BROWSER TIDAK SUPPORT DENGAN JAVA SCRIPT ,MAKA SCRIPT JAVA TIDAK AKAN DIMUNCULKAN DI WEB BROWSER KARENA DIANGGAP TULISAN BIASA.
Event Event dan event handler merupakan hal yang sangat penting dalam pemrograman JavaScript. Event adalah sesuatu yang terjadi karena aksi user. Contohnya jika user men-click tombol mouse terjadilah event Click. Jika mousepointer bergerak melewati sebuah link terjadilah event MouseOver.
Fungsi alert() berfungsi untuk menampilkan window popup Fungsi alert() berfungsi untuk menampilkan window popup. Di dalam tanda kurung kita tentukan string yang akan muncul pada window yang dimaksud. Jadi script kita di atas menampilkan window dengan tulisan 'Ya' saat user men-click tombol. Satu hal yang mungkin membingungkan: pada perintah document.write() kita menggunakan double quotes (") dan pada alert() kita menggunakan juga single quotes ('), mengapa? Jika kita tulis onClick="alert("Ya")" maka komputer akan bingung mana yang menjadi bagian event-handler onClick dan mana yang bukan. Urutan penggunaannya tidak menjadi masalah. Jadi bisa juga kita tuliskan onClick='alert("Ya")'.
Contoh-contoh Penanganan Event 1. onclick Pada contoh dibawah kita membuat tombol, yang kalau diklik akan muncul window alert <script> function inform(){ alert("Hai anda mengklik saya") } </script> <form> <input type="button" name="test" value="Click me" onclick="inform()"> </form>
2. onload Event onload akan dieksekusi jika suatu objek telah diload, pada contoh berikut kita menaruh event onload di tag <body>, artinya jika halaman web sudah diload semua, maka dieksekusi kode javascript <html> <head><title>Body onload example</title> </head> <body onload="alert('Halaman ini telah selesai di loading')"> Welcome to my page </body> </html>
3. onmouseover dan onmouseout Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di atas suatu objek HTML, onmouseout berguna untuk mendeteksi apakah pointer mouse keluar dari objek HTML, contoh: <html> <body> <table> <tr onmouseover="this.bgColor='lightblue'" onmouseout="this.bgColor='#efefef'" bgcolor="#efefef"> <td>Baris pertama</td> </tr> <tr> <td>Baris kedua</td> </body> </html>
4. onunload Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman web <html> <body onunload="alert('Thank you. Please come back to this site and visit us soon, ok?')"> <h1>Welcome</h1> </body> </html>
Function Pada dasarnya function merupakan cara untuk menyatukan beberapa perintah. <html> <script language="JavaScript"> <!-- hide document.write("Selamat datang pada homepage saya!<br>"); document.write("Ini menggunakan JavaScript!<br>"); // --> </script> </html>
Hasil keluarannya akan seperti: kita dapat mebuatnya lebih baik lagi seperti pada kode di bawah ini: <html> <script language="JavaScript"> <!-- hide function myFunction() { document.write("Selamat datang pada homepage saya!<br>"); document.write("Ini menggunakan JavaScript!<br>"); } myFunction(); // --> </script> </html>
Alert, Confirm dan Prompt alert digunakan untuk menampilkan window alert Contoh: <script> alert(“Hellow World!!”); </script> Hasil:
cofirm cofirm, digunakan untuk memunculkan window konfirmasi atau semacam pertanyaan yang jawabannya antara OK atau Cancel Contoh: <script type="text/javascript"> var x=window.confirm("Apakah anda baik-baik saja?") if (x) window.alert("Good!") else window.alert("Too bad") </script>
prompt prompt, digunakan untuk meminta inputan melalui window Contoh: <script type="text/javascript"> var y=window.prompt("Masukkan nama anda") window.alert(y) </script> Hasilnya:
Memformat teks dengan Javascript
Contoh 1: <script> var teks = "Desrizal" panjang = teks.length; alert(panjang); </script>
Contoh 4: <script> var message="Welcome to our site!" var format=message.toUpperCase() var size=1 for (i=0;i<message.length;i++){ document.write(format.charAt(i).fontsize(size).bold()) if (size<7){ size++ }else{ size=1 } </script>
B. Penanganan Objek String
Validasi email, pada contoh berikut kita akan mengecek apakah email berikut valid atau tidak. Cara mengeceknya adalah apakah string yang diinput mengandung karakter @ atau titik (.) <form name="test" onSubmit="checkemail(this.test2.value);return false"> <input type="text" size=20 name="test2"> <input type="submit" value="Submit"> </form> <script type="text/javascript"> function checkemail(email){ if (email.indexOf("@")!=-1 && email.indexOf(".")!=-1) alert("bagus!") else alert("Bukan email") } </script>
Menghitung kata, Pada contoh berikut kita akan menghitung kata, caranya adalah mengambil isi suatu textarea, lalu memotong-motong isinya dengan metode split. <form name="wordcount"> <textarea rows="12" name="wordcount2" cols="38" wrap="virtual"></textarea><br> <input type="button" value="Hitung kata" onClick="hitung()"> <input type="text" name="wordcount3" size="20"> </form> <script type="text/javascript"> function hitung(){ var formcontent=document.wordcount.wordcount2.value isi=formcontent.split(" ") document.wordcount.wordcount3.value=isi.length } </script>
Metode Tanggal dan Waktu Untuk membuat objek tanggal dan waktu terlebih dahulu anda mendeklarasikan variabel/objek tanggal dan waktu tersebut var mydate= new Date() Berikut adalah beberapa metode tanggal dan waktu di javascript
B. Javacsript Timer Pada javascript terdapat fungsi timer, yaitu seTimeout(), yang berfungsi untuk mengatur timer untuk mengeksekusi suatu fungsi atau kode tertentu Sintaks: setTimeout("expression", delaytime) expression bisa berupa kode javascript atau suatu fungsi delaytime, adalah setiap berapa milidetik suatu expression dieksekusi
Contoh: <html> <body> <input type="text" id="timer" size="12"> <input type="button" value="Start" onClick="count()"> <script type="text/javascript"> var c=0 document.getElementById("timer").value = "" function count(){ document.getElementById("timer").value=c c=c+1 setTimeout("count()",1000) } </script> </body> </html>