190 likes | 332 Views
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
E N D
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