1
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Lecture 21
Javascript
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Announcements
Reminder: beginning withHomework #7, Javascriptassignments must be submittedusing a format described in anattachment to HW#73rd Exam date set for 12/14 inGoessmann Lab. 64.
2
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Javascript Object Model
http://www.parallel.ru/docs/Internet/IRT/articles/js169/object.gif
Document Object Model (DOM)
Browser Object Model (BOM)
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
What is the DOM?
The DOM is a W3C standard.separated into 3 different levels:Core DOM,XML DOM and HTML DOM
The DOM defines the objects andproperties of all documentelements, and the methods(interface) to access them.
3
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
navigator ObjectSee Q10.6, W3C
<script language="JavaScript"> document.write("<font size=+1><b>\ The properties of the \"navigator\" object are:</b><br>"); for(var property in navigator){ document.write(property + "<br>"); }</script>
<script language="JavaScript”>var BrowserName= navigator.appName;var BrowserVersion = navigator.appVersion;var BrowserAgent= navigator.userAgent;var platform= navigator.platform;…</script>
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
window Object
Where all the action happensProperties: Methods:
4
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
window Examples
Open a new window (s) Q10.7 W3C W3C
Open a new window and close it Q10.8Open a new window, scale and close itQ10.9Manipulate the status bar Q10.10Manipulate the title and status barsQ10.11Enter data into a Text Box W3C W3C
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Objects in the window Objectlocation ObjectUsed to access the URL of thedocument currently loaded
history ObjectKeeps track of the pages visited
screen ObjectW3C
Q10.20
Q10.21
5
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Menus and Navigation Bars
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Back to the DOM?The DOM defines the objects and properties ofall document elements, and the methods(interface) to access them.
6
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Accessing document objectdocument objects arecreated for youwhenever you load awebpage does so automatically,even if there's not oneline of JavaScript codeon your page, asopposed to the Dateobject, for example.forms are accessiblevia element objects,images are accessiblethrough image objects,etc.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
DOM Nodes
Nodeseverything in an HTML document isa nodeentire document is a documentnodeevery HTML tag is an element nodetext in the HTML elements are textnodesHTML attributes are attribute nodescomments are comment nodes
7
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
document nodeNodes<html> <head> <title>My Page</title> </head> <body> <h1>DOM is fun</h1> <p>Hello world!</p> </body></html>
The root node is <html> and has two child nodes;<head> and <body>
<head> node holds a <title> node.<body> node holds a <h1> and <p> node text is always stored in text nodes
common error in DOM processing is to expect an elementnode to contain text.
<html>
<head> <body>
<title> <h1> <p>
DOM is fun Hello world!
element nodes
text nodesMy Page
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Node Parents, Children, and Siblings
nodes in the node tree have ahierarchical relationship to each otherparent nodes have children; children onthe same level are called siblingsthe top node is called the rootevery node, except the root, has exactlyone parent nodea node can have any number of childrena leaf is a node with no childrensiblings are nodes with the same parent
8
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Node Parents, Children, and Siblings
<html>
<head> <body>
<title> <h1> <p>
DOM is fun Hello world!
My Page
parent_of
sib_of
root
leaf
child_of
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Node Parents, Children, and Siblings
parent_of
sib_of
rootchild_of
9
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
HTML DOM Propertiestypical DOM properties:x.innerHTML - the inner text value of x(a HTML element)x.nodeName - the name of xx.nodeValue - the value of xx.parentNode - the parent node of xx.childNodes - the child nodes of xx.attributes - the attributes nodes of x
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
HTML DOM Methods
Examplesx.getElementById(id) - get theelement with a specified idx.getElementsByTagName(name) -get all elements with a specified tagnamex.appendChild(node) - insert a childnode to xx.removeChild(node) - remove achild node from x
10
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
document Object
Q11.3
Q11.4
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
JavaScript, DOM & HTML elements
The HTML DOM and JavaScript can be used tochange the inner content and attributes ofHTML elements dynamicallyExample 1 - Change the Background Color
11
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
JavaScript, DOM & HTML elementsExample 2 - Change the image source
function showPic(whichpic) { var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); var text = whichpic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text;}
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
document Object
12
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
form Object
The Form object represents anHTML form.For each instance of an HTML<form> tag in a document, a Formobject is created.Forms are used to prompt usersfor input.The input data is normally postedto a server for processing.
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
form Object examples
W3C, W3C
13
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
HTML Forms and InputA form is an area that can contain formelements that allow the user to enterinformationE.g. text fields, textarea fields, drop-downmenus, radio buttons, checkboxes, etc.)
A form is defined with the <form> tag<form>.input elements.</form>
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
HTML Forms and InputThe most used form tag is the <input>tagThe type of input is specified with thetype attribute.text fields are used when you want theuser to type letters, numbers, etc. in aform.
<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" /></form>
text fields
Input fieldsPassword fieldsTextarea
14
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
HTML Forms and InputRadio Buttons are used when you want the user toselect one of a limited number of choices.<form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form>
Checkboxes are used when you want the user toselect one or more options of a limited number ofchoices
<form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle"value="Airplane" />
</form>
Radio buttons
Checkboxes
Mixed Forms Q11.5
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
HTML Forms and InputAction Attribute and the Submit ButtonWhen the user clicks on the "Submit" button, thecontent of the form is sent to the server.The form's action attribute defines the name ofthe file to send the content to.The file defined in the action attribute usuallydoes something with the received input.<form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user" /><input type="submit" value="Submit" /></form>
If you type somecharacters in the text fieldbelow, and click the"Submit" button, thebrowser will send yourinput to a page calledhtml_form_submit.asp.The page will show you thereceived input.
15
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Examplescreate a simple drop-down box on an HTML page. Adrop-down box is a selectable list.Simple drop down box Another drop down box
draw a border with a caption around your dataFieldset around data
add a form to a page. The form contains two input fieldsand a submit buttonForm with input fields and a submit button
extended formsForm with checkboxes Form with radio buttons
how to send e-mail from a formSend e-mail from a forme-mail validation
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
document Object elements[ ]
16
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Example<form name="formtest" >Please enter your name: <br><input type="text" size="50" name="user_name"><p>Please enter your phone: <br><input type="text" size="30" name="user_phone"><p><input type="button"value="show form data"onClick="showForm(this.form)";>
</form>function showForm(myform) {
NewWin=window.open('','','width=300,height=200');name_input="<b>Your name: " + myform.user_name.value
+ "</b><br>";NewWin.document.write(name_input);phone_input="<b>Your phone: " + myform.user_phone.value
+ "</b><br>";NewWin.document.write(phone_input);
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Examplefunction display(){ var output=""; output+="First Name: "+document.aform.first.value; output+="\nLast Name: "+document.aform.last.value; output+="\nComments: "+document.aform.comments.value; output+="\nCheck box checked: "+document.aform.check.checked; output+="\nSelection box: "+document.aform.sel.value; alert(output); //document.aform.button1.value=output;}
<form name="aform">First Name:<br><input type="text" name="first" value="bob" onFocus="this.select()"><br>Last Name:<br><input type="text" name="last" value="smith"onFocus="this.select()" ><br>Comments:<br><textarea name="comments" rows="5" cols="100">text in text area</textarea><br>check box<input type="checkbox" name="check"><br>pick one<br><select name="sel"><option value="hw">homework<option value="quiz">quiz<option selected value="exam">exam</select><br><input type="button" value="click to display information"onClick="display()" name="button1"></form></body></html>
17
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Pulldown<html><head><title>Drop-Down Menus</title><script language="JavaScript">
function schedule(f){if(f.menu1.selectedIndex == 0){// Could also say: document.form1.menu1.selectedIndexf.text1.value="PL100, Feb 3-7, 9am to 5pm, Room 2133, Dr. Baloney "// Could also say: document.form1.text1.value}if(f.menu1.selectedIndex == 1){f.text1.value="PL200 Feb 10-13 9am to 5pm, Room 209B, Ms. Eclectic";}if(f.menu1.selectedIndex == 2){f.text1.value="UX101 Mar 2-6 9am to 5pm, Room 209, Mr. Nerdly";}if(f.menu1.selectedIndex == 3){f.text1.value="SH201 Apr 10-13 9am to 5pm, Room 209B, Miss Bashing";}
}</script><body bgcolor=lightgreen><font face=arial ><b><form name="form1">Select a Course<br>
<select name="menu1" size="4" onChange="schedule(this.form)"><option name="choice1" value="Perl1">Intro to Perl</option><option name="choice2" value="Perl2">Advanced Perl</option><option name="choice3" value="Unix1">Intro to Unix</option><option name="choice4" value="Shell1">Shell
Programming</option></select><p>
<input type="text" name="text1" size=60 /></form></body></html>
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Accessing images & creating rollovers
As with forms, images are accessible through"image object"image Object properties
Change the height and width of an imageChange the src of an imageSequencing Images Q11.33Selecting an image Q11.34
18
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Creating an image rollover effect
assigning a new image to the src property ofthe image each time the onMouseover eventhandler is fired inside an image link, wechange the image onMouseover.
<html><head><title>Preloading Images</title></head><h2> This Is Baby William</h2><script language="JavaScript">
if(document.images){var baby1=new Image(); // Preload an imagebaby1.src="baby1image.jpg";
}if (document.images){
var baby2=new Image(); // Preload an imagebaby2.src="baby2image.jpg";
}</script><body bgcolor="cornflowerblue"><a href="#" onMouseOver="document.willy.src=baby2.src;"
onMouseOut="document.willy.src=baby1.src;"><img name="willy"
src="baby1image.jpg"align="left"alt="baby" border=2 hspace="10"width="220" height="250">
</body></html>
Changing on a clickQ11-6
Q11.35
UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010
Preloading images load an image into cache before being used, so itappears instantaneously when neededgood for change of image in effects like rollover images andimage slideshows.
create an instance of the image object in the HEAD sectionof the page, and assigning the image we wish to preload toits src property
example:<head><script type="text/javascript"><!--image01= newImage()image01.src="1.gif”image02= new Image()image02.src="3.gif"//--></script></head>
repeat this for every image you wish to preload.