Modul 5-Java
Diunggah oleh
Marwan ZebuaJudul Asli
Hak Cipta
Format Tersedia
Bagikan dokumen Ini
Apakah menurut Anda dokumen ini bermanfaat?
Apakah konten ini tidak pantas?
Laporkan Dokumen IniHak Cipta:
Format Tersedia
Modul 5-Java
Diunggah oleh
Marwan ZebuaHak Cipta:
Format Tersedia
JAVASCRIPT
Modul 4
A. Apa Itu Javascript
Javascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side
programming. Client di sini adalah browser, seperti: Internet Explorer, Firefox, Safari dan
sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML.
B. Memulai Javascript
Kode javascript ditulis diantara tag <script> dan </script>, bisa kita sisipkan di kode-kode HTML
Kita, apakah pada tag head atau body. Contoh :
Ketikkan kode berikut pada Notepad atau DW.
<script>
Alert(“Hallo Javascript”);
</script>
Lalu simpan dengan nama : Hallo.html, kemudian jalankan atau bukalah file tersebut maka
hasilnya sebagai berikut :
Sesuai dengan judul maka pembahasan kita kali ini adalah javascript, tetapi saya lebih menitik
beratkan pada perintah –perintah dan penggunaan java yang paling sering digunakan dalam
pemrograman web. Hal ini bertujuan untuk lebih memfokuskan materi yang akan kita pelajari.
Selain dituliskan langsung pada file html, Javascript bisa juga ditulis terpisah, filenya diberi
ekstension .js Contoh: namafile.js, nanti cara menyisipkannya di file html adalah seperti berikut:
Javascript-privateweb
Syawaluddin.ST Page 1
<script type="text/javascript" src="namafile.js"></script>
C. Sintaks Javascript
Sintaks javascript mirip-mirip bahasa C atau java. Javascript bersifat case sensitive, artinya huruf
kecil dan huruf besar adalah berbeda. Setiap baris kode javascript dipisahkan baris baru atau
bisa juga titik koma (;) Komentar dalam javascript di awali dengan // atau ditulis diantara /*
dan */
D. Variabel
Variabel di javascript bisa ditulis dengan diawalai huruf atau underscore ( _ ) atau tanda dollar
(). Contoh : jumlah_hits , _nama
Deklarasi variable
• Anda bisa mendeklarasi dengan menggunakan var, contoh: var x = 5, ini bersifat local dan
global (bisa di akses oleh semua fungsi)
• Atau langsung deklarasikan tanpa var, x = 5
Contoh:
<script>
var x = 5;
var nama = “Desrizal”;
document.write(nama);
</script>
A.PENANGANAN EVENT
Javascript-privateweb
Syawaluddin.ST Page 2
Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event
atau kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan
suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double
klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan
sebagainya.
Sintaknya:
nama_event=”kode javascript”
Contoh:
<html>
<body>
<a href=”http://www.facebook.com” onclick=”alert(‘hello’)”>google</a>
</body>
</html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan dieksekusi kode
javascript alert(‘hello’).
Ada macam-macam event yang bisa terjadi pada halaman web atau objek HTML, yaitu sebagai
berikut:
• onblur
• onchange
• onclick
• ondblclick
• onerror
• onfocus
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onreset
• onresize
• onselect
Javascript-privateweb
Syawaluddin.ST Page 3
• onsubmit
• onunload
B. Contoh-contoh
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="proses" onclick="inform()">
</form>
Pada contoh berikut jika kita mengklik radio button akan mengubah warna latar halaman web
<html>
<body>
<form name="go">
<input type="radio" name="C1" onclick="document.bgColor='lightblue'">
<input type="radio" name="C1" onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1" onclick="document.bgColor='lightgreen'">
</form>
</body>
</html>
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 .
Javascript-privateweb
Syawaluddin.ST Page 4
<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>
<tronmouseover="this.bgColor='lightblue'"onmouseout="this.bgColor='#efefef'"
bgcolor="#efefef">
<td>Baris kedua</td>
</tr>
</body>
</html>
4. onunload
Biasanya berguna untuk mendeteksi jika user meninggalkan atau menutup suatu halaman web
Javascript-privateweb
Syawaluddin.ST Page 5
<html>
<body> onunload="alert('Thank you. Please come back to this site and visit us
soon, ok?')">
<h1>Welcome</h1>
</body>
</html>
B. OBJEK WINDOW
Javascript-privateweb
Syawaluddin.ST Page 6
A. Membuka Window di Javascript
Untuk membuka window di javascript adalah dengan metode open()
Sintaks:
window.open(url, nama_window, konfigurasi)
Contoh:
window.open(“http://www.google.com”,”windowku”,”width=300,height=200”);
Untuk konfigurasi yang bisa diset sebagai berikut:
B. Contoh-contoh
1. Membuka window baru dengan function
<html>
<body>
<script>
function bukawindow(){
window.open("http://www.google.com","google","width=400,height=300,toolbar=1"
);
}
</script>
<input type="button" onclick="bukawindow()" value="buka">
</body>
</html>
2. Mereload, Menutup, Meloading Halaman Baru, Print
Untuk mereload window adalah dengan cara: window.location.reload()
Javascript-privateweb
Syawaluddin.ST Page 7
Untuk menutup window adalah dengan cara: window.close()
Untuk meloading halaman baru adalah: window.location="urlkamu.com"
Untuk mengeprint halaman web : window.print()
3. Alert dan Confirm
cofirm, digunakan untuk memunculkan window konfirmasi atau semacam pertanyaan yang
jawabannya antara OK atau Cancel.
<script type="text/javascript">
var x=window.confirm("Apakah anda baik-baik saja?")
if (x)
window.alert("Good!")
else
window.alert("Too bad")
</script>
Contoh lain :
<script type="text/javascript">
var y=window.prompt("Masukkan nama anda")
window.alert(y)
</script>
prompt, digunakan untuk meminta inputan melalui window.
C. PENANGANAN FORM
Javascript-privateweb
Syawaluddin.ST Page 8
A. Penanganan CheckBox di javascript
Deteksi apakah checkbox sudah dicek
checkboxObject.checked=true|false
Contoh:
<html>
<head>
<script type="text/javascript">
function check(){
document.getElementById("myCheck").checked=true
}
function uncheck(){
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()"
value="Check Checkbox" />
<input type="button" onclick="uncheck()"
value="Uncheck Checkbox" />
</form>
</body>
</html>
Mengambil Nilai checkbox
Javascript-privateweb
Syawaluddin.ST Page 9
<html>
<head>
<script type="text/javascript">
function createOrder(){
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i){
if (coffee[i].checked){
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value="Kamu memilih " + txt
}
</script>
</head>
<body>
<p>Penyajian coffee yang anda sukai?</p>
<form>
<input type="checkbox" name="coffee" value="cream">Dengan cream<br />
<input type="checkbox" name="coffee" value="sugar">Dengan Gula<br />
<br />
<input type="button" onclick="createOrder()" value="Send order">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>
B. Penanganan Input Radio di Javascript
Javascript-privateweb
Syawaluddin.ST Page 10
<html>
<head>
<script type="text/javascript">
function setkelamin(jenis){
document.getElementById("kelaminmu").value = jenis;
}
</script>
</head>
<body>
jenis Kelamin:
<br>
<input type=radio value="Laki-laki" name="kelamin"
onclick="setkelamin(this.value)">Laki-laki<br>
<input type=radio value="Perempuan" name="kelamin"
onclick="setkelamin(this.value)">Perempuan<br>
<input type=text id="kelaminmu">
</body>
</html>
C. Penanganan Select Box di Javacsript
Mengambil nilai select box
<html>
<head>
<script type="text/javascript">
function favBrowser(){
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex
].text
}
</script>
</head>
<body>
<form>
Javascript-privateweb
Syawaluddin.ST Page 11
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
<option>Internet Explorer</option>
<option>Netscape</option>
<option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>
</html>
D. Mendelete option dari dropdown list
<html>
<head>
<script type="text/javascript">
function removeOption(){
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
<option>Melon</option>
</select>
<input type="button" onclick="removeOption()" value="Remove option">
</form>
</body>
</html>
E. Validasi pada Form
<html><head>
Javascript-privateweb
Syawaluddin.ST Page 12
<SCRIPT LANGUAGE="JavaScript">
function checkrequired(which) { var pass=true;
if (document.images) {
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,8)=="required") {
if (((tempobj.type=="text"||tempobj.type=="textarea")&&
tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(8,30).toUpperCase();
alert("Mohon periksa "+shortFieldName+" apakah telah diisi dengan benar.");
return false;
}
else
return true;
}
// End -->
</script>
</head>
<body>
<center>
<form onSubmit="return checkrequired(this)">
Name :<input type="text" name="requirednama">
<br>
E-Mail :<input type="text" name="requiredemail">
<br>
Hoby :
<select name="requiredhobby">
<option selected>Pilih salah satu !<option>Olahraga
<option>Menyanyi<option>Makan
</select>
Javascript-privateweb
Syawaluddin.ST Page 13
<br>
Komentar :
<textarea name="requiredkomentar"></textarea>
<br>
<input type=submit value="Submit">
</form>
</center>
</body>
</html>
F. Membuat kalender dengan Javascript
<BODY>
<CENTER>
<SCRIPT LANGUAGE="JavaScript">
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Javascript-privateweb
Syawaluddin.ST Page 14
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"
+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
Javascript-privateweb
Syawaluddin.ST Page 15
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
Javascript-privateweb
Syawaluddin.ST Page 16
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</SCRIPT>
</CENTER>
</body>
Javascript-privateweb
Syawaluddin.ST Page 17
Anda mungkin juga menyukai
- Tugas Rangkuman 2Dokumen1 halamanTugas Rangkuman 2Marwan ZebuaBelum ada peringkat
- Quis No 1Dokumen2 halamanQuis No 1Marwan ZebuaBelum ada peringkat
- MODUL 4-cssDokumen20 halamanMODUL 4-cssMarwan ZebuaBelum ada peringkat
- Modul 5-JavaDokumen17 halamanModul 5-JavaMarwan ZebuaBelum ada peringkat
