COS 125 day 20
advertisement
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
Assignment 9 due
Scripts part 2
20
23
16
PodCasting & RSS
Progress report
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/ex
amples/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/ex
tern.html
http://www.cookwood.com/html6ed/examples/scripts/ex
tscript.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/example
s/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.a
sp
http://javascript.internet.com/
http://www.javascriptkit.com/jsref/
http://www.echoecho.com/javascript.ht
m
