BAB VIII.
JAVASCRIPT: PENANGANAN BROWSER
RINGKASAN
MATERI
Pernahkan Anda memasuki suatu situs yang
memiliki beragam fasilitas yang sangat memudahkan
atau membebaskan Anda dari perlunya
menguasai browser yang Anda gunakan? Misalnya Anda ingin
mematikan tombol mouse agar pengunjung
situs Anda tidak dapat menyimpan gambar yang ada pada
halaman Anda, atau mem-bookmark
halaman
Anda sehingga tercatat di daftar situs favorit
pengunjung Anda, atau memberikan
kemudahan pada pengunjung untuk mencetak halaman web
Anda tersebut. Semua ini dan berbagai
macam hal lain dapat Anda berikan ke dalam halaman web
situs Anda dengan hanya beberapa baris
singkat JavaScript.
LATIHAN
Buatlah contoh-contoh di bawah ini, dan
tampilkan dalam browser dengan ukuran window kecil agar
Anda dapat lebih melihat efeknya.
Perhatikan baik-baik setiap baris skrip, dan kenali bagian mana
yang memungkinkan skrip tersebut
memberikan hasil seperti yang diinginkan. Perhatikan juga bahwa
ada beberapa skrip yang bersifat browser-specific
yaitu
IE, sehingga mungkin tidak akan dapat
bekerja bila dibuka dengan browser selain
IE. Anda akan sangat memerlukan pengetahuan tentang
hal ini nantinya.
1. Mengubah
teks pada tag <title>
<html>
<head>
<script
type="text/javascript">
function
newTitle()
{
parent.document.title="Put
your new title here"
}
</script>
<body>
Click
this button and check the browser's title field
<form>
<input
type="button" onclick="newTitle()" value="Get A new
title">
</form>
</body>
</html>
2.
Memunculkan alert box
<html>
<body>
<script
type="text/javascript">
alert("Hello
World!")
</script>
</body>
</html>
3. Mematikan
tombol kanan mouse
<html>
<head>
<script
type="text/javascript">
function
disable()
{
if
(event.button == 2)
{
alert("Sorry
no rightclick on this page.\nYou cannot view my source\nand you
cannot
steal my images.")
}}
</script>
</head>
<body
onmousedown="disable()">
<p>Right-click
on this page to trigger the event.</p>
<p>The
event property is not recognized in Netscape.</p>
</body>
</html>
4.
Memunculkan kotak konfirmasi
<html>
<body>
<script
type="text/javascript">
var name
= confirm("Press a button")
if (name
== true)
{
document.write("You
pressed OK")
}
else
{
document.write("You
pressed Cancel")
}
</script>
</body>
</html>
5.
Memberikan masukan kepada skrip
<html>
<head>
</head>
<body>
<script
type="text/javascript">
var name
= prompt("Please enter your name","")
if (name
!= null && name != "")
{
document.write("Hello
" + name)
}
</script>
</body>
</html>
6. Membuka
halaman web pada window baru
<html>
<head>
<script
language=javascript>
function
openwindow()
{
window.open("http://www.mail.telkom.net")
}
</script>
</head>
<body>
<form>
<input
type=button value="Open Window" onclick="openwindow()">
</form>
</body>
</html>
7. Membuka
beberapa window halaman web baru sekaligus
<html>
<head>
<script
language=javascript>
function
openwindow()
{
window.open("http://www.google.com/")
window.open("http://www.yahoo.com/")
}
</script>
</head>
<body>
<form>
<input
type=button value="Open Windows" onclick="openwindow()">
</form>
</body>
</html>
8. Berganti
halaman lewat tombol
<html>
<head>
<script
type="text/javascript">
function
locate()
{
location="http://www.umi.ac.id/"
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="locate()" value="New
location">
</form>
</body>
</html>
9.
Menambahkan bookmark/favorite
<html>
<head>
<script
type="text/javascript">
function
bookmark()
{
window.external.AddFavorite("http://www.telkomsel.com","Telkomsel")
}
</script>
</head>
<body>
<form>
<input
type="button" onclick="bookmark()" value="Click here
to bookmark me">
</form>
</body>
</html>
10.
Menjadikan halaman sebagai default homepage
<html>
<head>
<script
type="text/javascript">
function
makeDefault(element)
{
element.style.behavior='url(#default#homepage)';
element.setHomePage('http://www.umi.ac.id');
}
</script>
</head>
<body>
<p>Click
the button and UAD will become your default home page.</p>
<form>
<input
type="button"
onclick="makeDefault(this)"
value="Make
UAD your default homepage">
</form>
</body>
</html>
11.
Me-refresh halaman yang sedang ditampilkan
<html>
<head>
<script
type="text/javascript">
function
refresh()
{
location.reload()
}
</script>
</head>
<body>
<form>
<input
type="button" value="Refresh"
onclick="refresh()">
</form>
</body>
</html>
12.
Mengganti teks pada status bar browser
<html>
<head>
<script
type="text/javascript">
function
load()
{
window.status
= "put your message here"
}
</script>
</head>
<body
onload="load()">
<p>Look
in the statusbar</p>
</body>
</html>
13. Mencetak
halaman yang sedang tampil di browser
<html>
<head>
<script
type="text/javascript">
function
printpage()
{
window.print()
}
</script>
</head>
<body>
<form>
<input
type="button" value="Print this page"
onclick="printpage()">
</form>
</body>
</html>
14.
Memberitahukan kapan halaman web di-update terakhir kali
<html>
<body>
This
page was last modified:
<br
/>
<script
language="JavaScript">
document.write(document.lastModified)
</script>
<br
/>
<br
/>
View
source to see how it is done
</body>
</html>
15. Efek
Scroll ke bawah beberapa baris
<html>
<head>
<script
type="text/javascript">
function
scrolldown()
{
for
(i=1; i<=600; i++)
{
window.scroll(1,i)
}
}
</script>
</head>
<body>
<form>
<input
type="button" value="Scroll"
onclick="scrolldown()">
</form>
Push<br
/><br /><br /><br /><br /><br /><br
/><br /><br /><br />
the<br
/><br /><br /><br /><br /><br /><br
/><br /><br /><br />
scroll<br
/><br /><br /><br /><br /><br /><br
/><br /><br /><br />
button<br
/><br /><br /><br /><br /><br /><br
/><br /><br /><br />
to
see<br /><br /><br /><br /><br /><br
/><br /><br /><br /><br />
the<br
/><br /><br /><br /><br /><br /><br
/><br /><br /><br />
effect<br
/><br /><br /><br /><br /><br /><br
/><br /><br /><br />
</body>
</html>
0 komentar:
Posting Komentar