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 the header

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"; 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 Box var 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 Sample Java Script Page var name; name=prompt("Please enter your name",""); if (name!=null && name!="") { document.write("Hello " + name); } Thanks for visiting my webpage. 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; var top; top = prompt("Enter a number",""); if (top!=null && name!="") { var n = 0; while (n<=top) { document.write(n); n = n + 1; } };

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 counterHalt ConditionIncrement