praktikum dhtml

PraktikumDynamic HTML (DHTML)

1) DHTML CSS Position:relative

<html><head><style>h1.ex1{position:relative;left:20px;}h1.ex2{position:relative;left:-20px;}</style></head><body><h1>Normal Heading</h1><h1 class="ex1">Heading +20</h1><h1 class="ex2">Heading -20</h1><p>Relative positioning moves an element relative to its original position.</p><p>"left:20" adds 20 pixels to the element's LEFT position.</p><p>"left:-20" subtracts 20 pixels from the element's LEFT position.</p></body></html>

Position:relative

Position:absolute

<html><head><style>h1{position:relative;left:40px;}</style></head><body><h1>Heading A</h1><p>This is a paragraph.</p><h1>Heading B</h1><p>This is a paragraph.</p><h1>Heading C</h1><p>This is a paragraph.</p><h1>Heading D</h1><p>This is a paragraph.</p></body></html>

<html><head><style>h1.x{position:absolute;left:100px;top:150px;}</style></head><body><h1 class="x">This is a heading</h1><p>With absolute positioning, an element can be placed anywhere on a page.</p><p>The LEFT position of the heading is 100 pixels from the left of the page.The TOP position is 150 pixels from the top of the page.</p></body></html>

Visibility

Z-index

<html><head><style>h1.one{visibility:visible;}h1.two{visibility:hidden;}</style></head><body><h1 class="one">Heading one</h1><h1 class="two">Heading two</h1><p>Where is heading two?</p></body></html>

<html><head><style>img.x{position:absolute;left:0px;top:0px;z-index:-1;}</style></head><body><h1>This is a Heading</h1><img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index -1 has lower priority.</p></body></html>

Z-index Vice Versa

Cursors

<html><head><style>img.x{position:absolute;left:0px;top:0px;z-index:1;}</style></head><body>

<h1>This is a Heading</h1><img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index 1 has higher priority.</p></body></html>

<html><body><p>Move the mouse over the words to see the cursor change</p> <span style="cursor: auto">Auto</span><br /><span style="cursor: crosshair">Crosshair</span><br /><span style="cursor: default">Default</span><br /><span style="cursor: pointer">Pointer</span><br /><span style="cursor: hand">Hand</span><br /><span style="cursor: move">Move</span><br /><span style="cursor: e-resize">e-resize</span><br /><span style="cursor: ne-resize">ne-resize</span><br /><span style="cursor: nw-resize">nw-resize</span><br /><span style="cursor: n-resize">n-resize</span><br /><span style="cursor: se-resize">se-resize</span><br /><span style="cursor: sw-resize">sw-resize</span><br /><span style="cursor: s-resize">s-resize</span><br /><span style="cursor: w-resize">w-resize</span><br /><span style="cursor: text">text</span><br /><span style="cursor: wait">wait</span><br /><span style="cursor: help">help</span><br /></body></html>

Watermark

<html><head><style>body{background-attachment: fixed;background-image: url("bulboff.gif");background-repeat: no-repeat;}</style></head><body><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p><br /><br /><br /><br /><br /><br /><br /><p>Scroll the page and see what happens</p></body></html>

Change background color

2) DHTML (Event) OnLoad

<html><head><script type="text/javascript">function bgChange(bg){document.body.style.background=bg}</script></head><body><b>Mouse over the squares and the background color will change!</b><table width="300" height="100"> <tr> <td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> </td> <td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')" bgcolor="blue"> </td> <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')" bgcolor="green"> </td></tr></table></body></html>

<html><head><script type="text/javascript">function mymessage(){alert("This message was triggered from the onload event")}</script></head><body onload="mymessage()"></body></html>

OnUnload

Onchange

<html><head><script type="text/javascript">function mymessage(){alert("This message was triggered from the onunload event")}</script></head><body onunload="mymessage()"><p>An alert box will display a message when you close this document!</p></body></html>

<html><head><script type="text/javascript">function preferedBrowser(){prefer=document.forms[0].browsers.valuealert("You prefer browsing internet with " + prefer)}</script></head><body><form>Choose which browser you prefer:<select id="browsers" onchange="preferedBrowser()"><option value="Internet Explorer">Internet Explorer<option value="Netscape">Netscape</select></form></body></html>

Onsubmit

Onreset

<html><head><script type="text/javascript">function confirmInput(){fname=document.forms[0].fname.valuealert("Hello " + fname + "! You will now be redirected to www.w3Schools.com")}</script></head><body><form onsubmit="confirmInput()" action="http://www.w3schools.com/">Enter your name: <input id="fname" type="text" size="20"><input type="submit"></form></body></html>

<html><head><script type="text/javascript">function message(){alert("This alert box was triggered by the onreset event handler")}</script></head><body><form onreset="message()">Enter your name: <input type="text" size="20"><input type="reset"></select></form></body></html>

3) DHTML (Text) Element access

Attribute change

innerHTML access

<html><body><h1 id="header">My header</h1><script type="text/javascript">document.getElementById('header').style.color="red"</script><p><b>Note:</b> It is the script that changes the style of the element!</p></body></html>

<html><body><img id="image" src="smiley.gif" width="32" height="32"><script type="text/javascript">document.getElementById('image').src="landscape.jpg"</script><p><b>Note:</b> The original image was a smiley, but the script changes the source to a landscape image!</p></body></html>

<html><body><h1 id="header">Old header</h1><script type="text/javascript">document.getElementById('header').innerHTML="New header"</script><p>Note that the original text was "Old header"!</p></body></html>

Change innerHTML

Change position

<html><head><script type="text/javascript">function nameon(){document.getElementById('h2text').innerHTML="WELCOME!"}function nameout(){document.getElementById('h2text').innerHTML="How are you today?"}</script></head><body><h2 id="h2text" onmouseout="nameout()"onmouseover="nameon()">Mouse over this text!</h2></body></html>

<html><head><script type="text/javascript">function moveleft(){document.getElementById('header').style.position="absolute"document.getElementById('header').style.left="0"}function moveback(){document.getElementById('header').style.position="relative"}</script></head><body><h1 id="header" onmouseover="moveleft()"onmouseout="moveback()">Mouse over this text</h1></body></html>

Onmousemove

4) DHTML (Input Forms) Identical forms

<html><head><script type="text/javascript">var i=1function moveright(){document.getElementById('header').style.position="relative"document.getElementById('header').style.left=ii++}</script></head><body onmousemove="moveright()"><h1 id="header">Move the mouse over this page</h1></body></html>

<html><head><script type="text/javascript">function sameInfo(){for (i=0; i<document.myForm1.option.length; i++)

{

document.myForm2.option[i].value=document.myForm1.option[i].value

}}</script></head><body><form name="myForm1">First name: <input type="text" name="option"><br />Last name: <input type="text" name="option"><br />Address: <input type="text" name="option"><br />E-mail: <input type="text" name="option"><br /><br /><input type="button" onclick="sameInfo()" value="Same information below"><br /></form><form name="myForm2">First name: <input type="text" name="option"><br />Last name: <input type="text" name="option"><br />Address: <input type="text" name="option"><br />E-mail: <input type="text" name="option"><br /></form></body></html>

Identical forms 2

<html><head><script type="text/javascript">function sameInfo(){for (i=0; i<document.myForm1.option.length; i++)

{

document.myForm2.option[i].value=document.myForm1.option[i].value

}}</script></head><body><form name="myForm1">First name: <input onkeyup="sameInfo()" type="text" name="option"><br />Last name: <input onkeyup="sameInfo()" type="text" name="option"><br />Address: <input onkeyup="sameInfo()" type="text" name="option"><br />E-mail: <input onkeyup="sameInfo()" type="text" name="option"><br /></form><form name="myForm2">First name: <input type="text" name="option"><br />Last name: <input type="text" name="option"><br />Address: <input type="text" name="option"><br />E-mail: <input type="text" name="option"><br /></form></body>

Change background color of an input field

Change text color of an input field

<html><head><script type="text/javascript">function changeColor(color){document.getElementById('x').style.background=color}</script></head><body><p>This example demonstrates how to change the background color of an input field.</p><p>Mouse over the three colored table cells, and the input field will change background-color:</p><table width="100%"><tr><td bgcolor="red" onmouseover="changeColor('red')"> </td><td bgcolor="blue" onmouseover="changeColor('blue')"> </td><td bgcolor="green" onmouseover="changeColor('green')"> </td></tr></table><form><input id="x" type="text" value="Mouse over the colors" size="20"></form></body></html>

<html><head><script type="text/javascript">function changeColor(color){document.getElementById('x').style.color=color}</script></head><body><p>This example demonstrates how to change the text color of an input field.</p><p>Mouse over the three colored table cells, and the text will change color:</p><table width="100%"><tr><td bgcolor="red" onmouseover="changeColor('red')"> </td><td bgcolor="blue" onmouseover="changeColor('blue')"> </td><td bgcolor="green" onmouseover="changeColor('green')"> </td></tr></table><form><input id="x" type="text" value="Mouse over the colors" size="20"></form></body></html>

Insert background image to an input field

<html><head><script type="text/javascript">function bgChange(bg){document.getElementById('x').style.background="url(" + bg + ")"}</script></head><body><p>This example demonstrates how to insert a background image to an input field</p><p>Mouse over these images and the input field will get a background image.</p><table width="300" height="100"><tr><td onmouseover="bgChange('paper.jpg')" background="paper.jpg"></td><td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td></tr></table><form><input id="x" type="text" value="Mouse over the images" size="20"></form></body></html>

Change background color of a radio button

<html><head><script type="text/javascript">function changeColor(color){document.getElementById('x').style.background=color}</script></head><body><p>This example demonstrates how to change the background color of a radio button.</p><p>Mouse over the three colored table cells, and the background color will change:</p><table width="100%"><tr><td bgcolor="red" onmouseover="changeColor('red')"> </td><td bgcolor="blue" onmouseover="changeColor('blue')"> </td><td bgcolor="green" onmouseover="changeColor('green')"> </td></tr></table><form>Mouse over the colors<input id="x" checked type="radio"></form></body></html>

5) DHTML (Window) Shake the window

6) DHTML (Links) Text transform

<html><head><script>function startEQ(){richter=5parent.moveBy(0,richter)parent.moveBy(0,-richter)parent.moveBy(richter,0)parent.moveBy(-richter,0)timer=setTimeout("startEQ()",10)}function stopEQ(){clearTimeout(timer)}</script></head><body><form><input type="button" onclick="startEQ()" value="Start an earthquake"><br /><br /><input type="button" onclick="stopEQ()" value="Stop the earthquake"></form></body></html>

<html><head><style>a:hover{text-transform:uppercase;}</style></head><body><a href="default.asp">Mouse over this link</a> </body></html>

Letter spacing

Blinking link

<html><head><style>a:hover{letter-spacing: 2;}</style></head><body><a href="default.asp">Mouse over this link</a> </body></html>

<html><head><script type="text/javascript">function blinklink(){if (!document.getElementById('blink').style.color)

{document.getElementById('blink').style.color="red"}

if (document.getElementById('blink').style.color=="red"){document.getElementById('blink').style.color="black"}

else{document.getElementById('blink').style.color="red"}

timer=setTimeout("blinklink()",100)}function stoptimer(){clearTimeout(timer)}</script></head><body onload="blinklink()" onunload="stoptimer()"><a id="blink" href="default.asp">Blinking link</a> </body></html>

Shaking link

Random Banner

<html><head><script type="text/javascript">function shakeleft(){document.getElementById('myLink').style.position="relative"document.getElementById('myLink').style.left="3"timer=setTimeout("shakeright()",10)}function shakeright(){document.getElementById('myLink').style.left="0"timer=setTimeout("shakeleft()",10)}function stoptimer(){clearTimeout(timer)}</script></head><body><a id="myLink" href="http://www.w3schools.com/"onmouseover="shakeleft()" onmouseout="stoptimer()">Mouse over this link</a></body></html>

<html><body><script type="text/javascript">image0="/banners/w3schools.gif"href0="/default.asp"alt0="W3Schools.com"image1="/banners/rd_htmlref.jpg"href1="http://www.w3schools.com/html/html_reference.asp"alt1="HTML Reference"image2="/banners/rd_xhtml.jpg"href2="http://www.w3schools.com/xhtml/default.asp"alt2="ASP Free"len=3now=new Date()now=now.getSeconds()rnd=now%lenimage=eval("image"+rnd)href=eval("href"+rnd)alt=eval("alt"+rnd)document.write("<a href='" + href + "'>")document.write("<img src='" + image + "' alt='" + alt + "'></a>")</script><h3>Refresh this page to see the banner change</h3></body></html>

TUGAS PRAKTIKUM.

1. Buat Tampilan sebagai berikut dengan menggunakan DHTML

BELAJAR DHTML BY nama andaTulisan

Bergerak Dari kanan ke kiri,

bila tulisan sudah berada dipaling kiri, maka tulisan

muncul kembali dari

sebelah kanan

MENU

LAUK-PAUK AYAM GORENG

UDANG REBUS

CUMI BAKAR

MINUMAN ES DEGAN

ES CAMPUR

ES TELER

BURUAN, MENU TERBATAS

Tulisan Berkedip-kedip

praktikum dhtml

Documents