1 / 18

JavaScript 2

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

faunus
Download Presentation

JavaScript 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 = Creates new image object called happyFace • Var happyFace = new Image(); • happyFace.src = “happy.gif” • <img src=“face.gif” id=“face” onMouseOver = ”document.face.src = happyFace.src”> In the header Sets source of happyFace to the gif References image by id 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

  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. onmouseover & onmouseout 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">

  10. onload onunload onfocus onblur onchange onsubmit onkeydown onkeypress More built-in events 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 name=prompt("Please enter your name","") Prompt evaluates to the user’s input The second parameter is text that will appear by default

  15. <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 Prompt box

  16. 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> While Loop

  17. Do Statement; While(condition) Do While loop will always executed the statement at least once So be careful Do While Loop

  18. For (intA=2; intA <=10; intA++) statement; A JavaScript For loop has three parts For Loop Initialize counter Halt Condition Increment

More Related