cos 125
DESCRIPTION
COS 125. DAY 20. Agenda. Assignment 8 not corrected yet Assignment 9 posted Due April 16 New course time line Discussion on Scripts http://www.cookwood.com/html6ed/examples/#c19. New time line. April 13 Scripts Part 1 16 Assignment 9 due Scripts part 2 20 PodCasting & RSS - PowerPoint PPT PresentationTRANSCRIPT
COS 125
DAY 20
Agenda
Assignment 8 not corrected yet Assignment 9 posted
Due April 16 New course time line Discussion on Scripts
http://www.cookwood.com/html6ed/examples/#c19
New time line
April 13
Scripts Part 1 16
Assignment 9 due Scripts part 2
20 PodCasting & RSS Progress report
23 Assignment 10 due Quiz 3
27 Capstones &
Presentations Due
Adding scripts to xHTML
Scripts are little program that add activity to web pages
Scripts are the basis for DHTML Covered in COS 381
Mostly all web script is done in JavaScript Only similarity with JAVA is the name
Adding scripts
Two types Scripts that require user action Scripts that do not require user action
called automatic scripts
Automatic scripts Executed by the browser when the page is
loaded If there is more than one script they are loaded
in the order they appear in the web page
Adding a script
<script type=“text/javascript” language=“JavaScript”>
….
javascript commands
…..
</script>
language is deprecated If you want the script to load before the web page
loads place the script in the head section
A simple script
http://www.cookwood.com/html6ed/examples/scripts/simple.html
External script
You can separate the JavaScript and place it in a file (*.js) and call it from inside the xHTML page
<script type=“text/javascript” language=“JavaScript”
src=“script.url”> </script>
http://www.cookwood.com/html6ed/examples/scripts/extern.html
http://www.cookwood.com/html6ed/examples/scripts/extscript.txt
User triggered scripts
Scripts can be activated by user events
Different elements have different events <body> Events
onload >> Script to be run when a document load
onunload >> Script to be run when a document unloads
Form events
The attributes below can be used in form elements: onblur >> Script to be run when an element loses
focus onchange >> Script to be run when an element
change onfocus >> Script to be run when an element gets
focus onreset >> Script to be run when a form is reset onselect >> Script to be run when an element is
selected onsubmit >>Script to be run when a form is submitted
Mouse events
Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title. onclick >> Script to be run on a mouse click ondblclick >> Script to be run on a mouse double-click onmousedown >> Script to be run when mouse button is pressed onmousemove >> Script to be run when mouse pointer moves onmouseout >> Script to be run when mouse pointer moves out
of an element onmouseover >> Script to be run when mouse pointer moves
over an element onmouseup >> Script to be run when mouse button is released
Other events
Image events <img> onabort >> Script to be run when loading of an
image is interrupted Keyboard events
Valid for all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
onkeydown >> Script to be run when a key is pressed onkeypress >> Script to be run when a key is pressed
and released onkeyup >> Script to be run when a key is released
Link a script to a user event
In the opening tag of whatever element you wish to be associated with the script type
event_type =“some script”
EX.
onclick=“alert(‘here is today\’s’ + Date())”
http://www.cookwood.com/html6ed/examples/scripts/time.html
Buttons to launch scripts
You can create a Button to launch a script by associating a script with the onclick user event for the button
<button type="button" name="time" onclick="alert('Today is '+ Date())" style="font: 24px 'Helvetica', 'Arial', sans-serif; background:yellow;color:red;padding:4px">
What time is it?
</button>
http://www.cookwood.com/html6ed/examples/scripts/button.html
Alternate Information
Used for browsers that cannot (or will not) run scripts
<noscript>
…..
xHTML code
….
</noscript>http://www.cookwood.com/html6ed/examples/scripts/noscript.html
Hiding Scripts from old browsers
After opening script tag <script> enclose your JavaScript with the following<! --
JavaScript code
// -- >
Hiding scripts from XML parsers
<script type="text/javascript" language="javascript">
<![CDATA[ document.write("<p align='right'><i>"+Date()+"<\/i><\/p>") ]]>
</script>
Setting a default Script language
In the head sections type
<meta http-equiv="Content-Script-Type" content="text/javascript" />
More on JavaScript
http://www.w3schools.com/js/default.asp
http://javascript.internet.com/ http://www.javascriptkit.com/jsref/ http://www.echoecho.com/
javascript.htm