BAB IX.
JAVASCRIPT: GAMBAR, FRAME, FORM, DAN CLIENT
RINGKASAN
Bagian berikutnya dari latihan
menggunakan JavaScript adalah penguasaan skrip untuk menangani
obyek gambar, frame, form, dan
pendeteksian elemen web pada client yaitu browser yang digunakan.
Pada dasarnya, HTML memang telah memiliki
tag untuk penanganan obyek gambar, frame, dan form,
tetapi seperti halnya sifat HTML yang
statis, maka tag HTML untuk penanganan obyek-obyek tersebut
juga memberikan hasil yang statis pula.
JavaScript selain dapat digunakan untuk membuatnya lebih
dinamis, juga digunakan untuk menjadi pre-processor
dari
masukan yang diberikan pengunjung
halaman web ke situs web Anda, sehingga
situs web Anda memiliki interaktivitas yang sebenarnya.
LATIHAN
Silakan Anda kerjakan latihan-latihan di
bawah ini, dan seperti sebelumnya, perhatikan bagian mana
saja yang digunakan agar dapat memberikan
hasil yang diinginkan. Untuk beberapa contoh, Anda
memerlukan file-file HTML tambahan,
silakan Anda buat file HTML tambahan dengan isi yang
berbeda-beda agar hasilnya lebih terlihat
jelas. Diantara file tambahan yang dibutuhkan terdapat file
pemroses masukan dari form. Bahasan file
pemroses masukan form belum dijangkau dalam
perkuliahan (dibahas khusus dalam
pemrograman web tingkat lanjut, skrip pada sisi server), sehingga
file HTML untuk pemroses form cukup file dummy saja yang berisi pesan
teks “Data telah diproses”.
1. Preload
gambar ke memori
<html>
<head>
<script
type="text/javascript">
if
(document.images)
{
a = new
Image(160, 120)
a.src =
"gambar.jpg"
}
</script>
</head>
<body>
<img
src="gambar.jpg" width="160" height="120">
</body>
</html>
2. Keluar
dari frame
<html>
<head>
<script
type="text/javascript">
function
breakout()
{
if
(window.top != window.self)
{
window.top.location="targetpage.htm"
1
Fakul tas I lmu Komp uter
U niversi tas
Musl im Indonesia
Modul
Praktikum
Pemrograman
IV (WEB)
}
}
</script>
</head>
<body>
<form>
To break
out of the frame:
<input
type="button" onclick="breakout()" value="Click
me">
</form>
</body>
</html>
3. Melakukan
update halaman pada 2 iframe
<html>
<head>
<script
type="text/javascript">
function
twoframes()
{
document.all("frame1").src="frame_c.htm"
document.all("frame2").src="frame_d.htm"
}
</script>
</head>
<body>
<iframe
src="frame_a.htm" name="frame1"></iframe>
<iframe
src="frame_b.htm" name="frame2"></iframe>
<br
/>
<form>
<input
type="button" onclick="twoframes()" value="Change url
of the two
iframes">
</form>
</body>
</html>
4. Validasi
alamat e-mail
<html>
<head>
<script
type="text/javascript">
function
validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
if (at
== -1)
{
alert("Not
a valid e-mail")
return
false
}
}
</script>
</head>
<body>
<form
name="myForm" action="prosesform.htm" onsubmit="return
validate()">
Enter
your E-mail address:
<input
type="text" name="myEmail">
<input
type="submit" value="Send input">
</form>
<p>This
example only tests if the email address contains an "@"
character.</p>
<p>Any
"real life" code will have to test for punctuations, spaces and other
things
as
well.</p>
</body>
</html>
5. Validasi
panjang masukan teks
<html>
<head>
<script
type="text/javascript">
function
validate()
{
x=document.myForm
input=x.myInput.value
if
(input.length>5)
{
alert("Do
not insert more than 5 characters")
return
false
}
else
{
return
true
}
}
</script>
</head>
<body>
<form
name="myForm" action="prosesform.htm" onsubmit="return
validate()">
In this
input box you are not allowed to insert more than 5 characters:
<input
type="text" name="myInput">
<input
type="submit" value="Send input">
</form>
</body>
</html>
6.
Menjadikan teks masukan sebagai obyek aktif
<html>
<head>
<script
type="text/javascript">
function
setfocus()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
Pemrograman
IV (WEB)
<body>
<form>
<input
type="text" name="field" size="30"
value="input text">
<input
type="button" value="Selected"
onclick="setfocus()">
</form>
</body>
</html>
7.
Menggunakan tombol radio
<html>
<head>
<script
type="text/javascript">
function
check(browser)
{
document.forms[0].answer.value=browser
}
</script>
</head>
<body>
<form>
Which
browser is your favorite<br>
<input
type="radio" name="browser"
onclick="check(this.value)" value="Explorer">
Microsoft
Internet Explorer<br>
<input
type="radio" name="browser"
onclick="check(this.value)" value="Netscape">
Netscape
Navigator<br>
<input
type="text" name="answer">
</form>
</body>
</html>
8.
Menggunakan kotak cek
<html>
<head>
<script
type="text/javascript">
function
check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i =
0; i<coffee.length; ++ i)
{
if (coffee[i].checked)
{
txt=txt
+ coffee[i].value + " "
}}
answer.value="You
ordered a coffee with " + txt
}
</script>
</head>
<body>
<form>
Pemrograman
IV (WEB)
How
would you like your coffee?<br>
<input
type="checkbox" name="coffee"
value="cream">With cream<br>
<input
type="checkbox" name="coffee"
value="sugar">With sugar<br>
<input
type="text" name="answer" size="30">
<input
type="button" name="test" onclick="check()"
value="Order">
</form>
</body>
</html>
9.
Menggunakan kotak drop-down
<html>
<head>
<script
type="text/javascript">
function
put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedInd
ex].text
txt=option
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
<p>
Select
your favorite browser:
<select
name="dropdown" onchange="put()">
<option>Internet
Explorer
<option>Netscape
Navigator
</select>
</p>
<p>
Your
favorite browser is:
<input
type="text" name="favorite" value="Internet
Explorer">
</p>
</form>
</body>
</html>
10. Kotak
drop-down sebagai menu
<html>
<head>
<script
type="text/javascript">
function
go(form)
{
location=form.selectmenu.value
}
</script>
</head>
<body>
<form>
<select
name="selectmenu" onchange="go(this.form)">
Pemrograman
IV (WEB)
<option>--Select
page--
<option
value="http://www.telkom.net">TelkomNet
<option
value="http://www.google.com">Google
<option
value="http://www.uad.ac.id">UAD
</select>
</form>
</body>
</html>
11. Kotak
teks yang otomatis berpindah fokus bila batasan masukan terpenuhi
<html>
<head>
<script
type="text/javascript">
function
toUnicode(elmnt,content)
{
if
(content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if
(next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>This
script automatically sets focus to the next input field when the current
input
field's maxlength has been reached</p>
<form
name="myForm">
<input
size="3" tabindex="1" name="myInput"
maxlength="3"
onkeyup="toUnicode(this,this.value)">
<input
size="3" tabindex="2" name="mySecond"
maxlength="3"
onkeyup="toUnicode(this,this.value)">
<input
size="3" tabindex="3" name="myThird"
maxlength="3"
onkeyup="toUnicode(this,this.value)">
</form>
</body>
</html>
12. Deteksi
browser yang digunakan
<html>
<head>
<script
type="text/javascript">
document.write("You
are browsing this site with: "+ navigator.appName)
</script>
</head>
<body>
</body>
</html>
13. Deteksi
konfigurasi tampilan yang digunakan
<html>
<body>
<script
type="text/javascript">
document.write("SCREEN
RESOLUTION: ")
document.write(screen.width
+ "*")
document.write(screen.height
+ "<br>")
document.write("AVAILABLE
VIEW AREA: ")
document.write(window.screen.availWidth
+ "*")
document.write(window.screen.availHeight
+ "<br>")
document.write("COLOR
DEPTH: ")
document.write(window.screen.colorDepth
+ "<br>")
</script>
</body>
</html>
14. Redirect
ke situs web berdasarkan browser yang digunakan
<html>
<head>
<script
type="text/javascript">
function
redirectme()
{
bname=navigator.appName
if
(bname.indexOf("Netscape")!=-1)
{
window.location="http://www.netscape.com"
return
}
if
(bname.indexOf("Microsoft")!=-1)
{
window.location="http://www.microsoft.com"
return
}
window.location="http://www.w3.org"
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="redirectme()"
value="Redirect">
</form>
</body>
</html>
0 komentar:
Posting Komentar