javascript 2
DESCRIPTION
JavaScript 2. JavaScript. Rollovers. Most web page developers first use JavaScript for rollovers A rollover is a change in the appearance of an element of the page when the cursor is placed over it. Rollovers have come to mean that something is a link - PowerPoint PPT PresentationTRANSCRIPT
1
JavaScript 2
JavaScript
2
Rollovers• Most web page developers
first use JavaScript for rollovers
• A rollover is a change in the appearance of an element of the page when the cursor is placed over it.
• Rollovers have come to mean that something is a link
• A rollover replaces one image with another
3
Rollovers• Most web page developers
first use JavaScript for rollovers
• A rollover is a change in the appearance of an element of the page when the cursor is placed over it.
• Rollovers have come to mean that something is a link
• A rollover replaces one image with another
4
The Images• Generating the images for
a rollover can be complex• It can be difficult to ensure
that the slices of an image fit together correctly when assembled in a table
• Photoshop’s Slice tool can be useful
5
onMouseOver =
• The mouseOver event is triggered when the cursor hovers over the item
• It can be used for rollovers
6
onMouseOver =
• Var happyFace = new Image();• happyFace.src = “happy.gif”
• <img src=“face.gif”id=“face” onMouseOver = ”document.face.src = happyFace.src”>
7
onMouseOver =
• Var happyFace = new Image();• happyFace.src = “happy.gif”
• <img src=“face.gif”id=“face” onMouseOver = ”document.face.src = happyFace.src”>
Creates new image object called happyFace
Sets source of happyFace to the gif
The image tag is given the name “face”
When the cursor hovers over the image the source property of the image named face is chanced to the source of the image object happy
References image by id
In theheader
8
onMouseOut
• The built-in event onMouseOut is triggered when the cursor moves off an object.
• Usually a rollover has a mouse over and mouse out part to restore the original image
9
var good = new Image();good.src ="colin-good.jpg";var evil = new Image();evil.src ="colin-evil.jpg";</head>
<body><img src="colin-good.jpg" id="face" onMouseOver="document.face.src=evil.src" onMouseOut="document.face.src=good.src">
onmouseover & onmouseout
10
More built-in events
• onload • onunload• onfocus• onblur• onchange• onsubmit• onkeydown• onkeypress
Often used when working with cookies
Can be used to trigger validation of form fields as user enters the data
11
Alerts & Dialogs
• JavaScript can control windows to get the user’s attention or solicit input
• The exact look of these windows will depend on the operating system
12
Alert Box
alert (“This is important!”)
Alert boxes only inform the user. They does accept any input.
13
Confirm Boxvar name=confirm (“Your credit card will be charged")
Confirm evaluates to true is OK is clicked and false otherwise
14
Prompt Box
Prompt evaluates to the user’s input
The second parameter is text that will appear by default
name=prompt("Please enter your name","")
15
Prompt box
<html><head><title>Sample Java Script
Page</title></head><body bgcolor="#ffffff"
text="#000000"><script type="text/javascript">var name;name=prompt("Please enter your
name","");if (name!=null && name!="")
{document.write("Hello " + name);}
</script><br /><br />Thanks for visiting my webpage.</body></html>
• This page prompts for the user's name in a dialog box.
• If the user cancels the value is null
• The name is included in in the greeting
• Because the script is in the body of the page it runs when the page is loaded
16
While Loop
While (condition)Statement;
<script type="text/javascript">var top;top = prompt("Enter a number","");if (top!=null && name!="")
{var n = 0;while (n<=top){document.write(n);n = n + 1;}};
</script>
17
Do While Loop
Do Statement;
While (condition)
• Do While loop will always executed the statement at least once
• So be careful
18
For Loop
For (intA=2; intA <=10; intA++)statement;
• A JavaScript For loop has three parts
Initialize counter Halt Condition Increment