scripts chapter 19-20. scripts small programs used to add interactivity to your web pages the...
TRANSCRIPT
Scripts
Chapter 19-20
Scripts
• Small programs used to add interactivity to your web pages
• The backbone of Dynamic HTML (DHTML)• Most scripts are written in JavaScript which is
supported by most browsers• The scripts will be inserted into the XHTML code
when needed. • JavaScript is actually a powerful and complex
programming language. We will be learning only the basics.
Automatic Scripts
• Execute automatically when the page is loaded
• Run in the order in which they appear in the XHTML file.
• If the script is used in several different pages, then it can be saved in a separate file and “called” from any web page.
The script tag<script type=“text/javascript”
language=“JavaScript” >
The actual script itself goes here.
</script>
<head><meta http-equiv=“content-type”Content=“text/html; charset=iso-8859.1”/><title>Simple Scripts</title></head> <body><script type=“text/javascript” language=“JavaScript”>document.write(“Visca Catalunya!”)</script><p>Here’s the rest of the page.</p></body></html>
The script tag
<head><meta http-equiv=“content-type”Content=“text/html; charset=iso-8859-1”/><title>Accessing external scripts</title></head> <body><script type=“text/javascript” language=“JavaScript” src=“extscript.txt”></script><p>Here’s the rest of the page.</p></body></html>
<script type=“text/javascript”language=“JavaScript”> src=“extscript.txt”></script>
The text file “extscript.txt” contains:document.write(“Visca Catalunya!”)
Triggered Scripts
• Script is executed only when intrinsic event occurs
• There are 18 pre-defined intrinsic events
• A user causes an intrinsic event to occur by performing some action (usually with the mouse)
• See next slide for list of intrinsic events
intrinsic eventsonload the page is loaded in the browser body, frameset
onunload browser load a different page after specified page has loaded
body, frameset
onclick the visitor clicks on the specified area all elements except applet, base, basefont, br, font, frame,
ondblclick the visitor double clicks the specified area frameset, head, html, iframe, meta, param, script, style,title
onmousedown visitor presses the mouse button down over the element
same as for onclick/ondblclick
onmouseup visitor lets the mouse button go after having clicked on element
same as for onclick/ondblclick
onmouseover visitor points the mouse at the element same as for onclick/ondblclick
onmousemove visitor moves mouse over element after pointing at it
same as for onclick/ondblclick
onmouseout visitor moves mouse away from element after being over it
same as for onclick/ondblclick
onselect visitor selects one or more chars or words in the element
input(of type name or password), textarea
onfocus the visitor selects, clicks, or tabs to the specified element
a, area, button, input, label, select, textarea
onblur visitor leaves an element that was previously in focus
a, area, button, input, label, select, textarea
onkeypress the visitor types something in the specified element
input(of type name or password), textarea
onkeydown the visitor types something in the specified element
input(of type name or password), textarea
onkeyup visitor lets go of the key after typing in the specified element
input(of type name or password), textarea
onsubmit visitor clicks the form’s submit button form (not input of type submit)
onreset visitor clicks the form’s reset button form (not input of type reset)
onchange the visitor modifies the value or contents of the element
input, select, textarea
intrinsic events (cont)
Not all browsers support scripts• Use <noscript> … </noscript> element<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Llumi's big cat dreams</title> <script type="text/javascript" language="JavaScript"> <!-- littlecat = new Image(143,83) littlecat.src = "../javascript/real.jpg" bigcat = new Image(143,83) bigcat.src = "../javascript/dream.jpg" // --> end comments to hide scripts </script> </head> <body> <noscript>Your browser isn't running scripts, so you can't see what Llumi's thinking.</noscript> <p>Point at Llumi to see what she's thinking. <a href="llumipage.html" onmouseover="document.catpic.src = bigcat.src" onmouseout="document.catpic.src = littlecat.src"><img src="../javascript/real.jpg" name="catpic" width="143" height="83" alt="The Real Llumi" /></a></p> </body> </html>
Hiding Scripts
• Older browsers– <script type=“text/javascript”
• <!—– littlecat=new image(143,83)– littlecat.src= “real.jpg”– bigcat = new Image(143,83)– bigcat.src = :dream.jpg”
// a JavaScript comment
-->
Hiding Scripts from XML Parsers
<sxript
<script>
<![CDATA[
document.write(“ etc … “)
]]>
</script>