lecture 21 - computer science education lab, umass, … university of massachusetts amherst •...

1

UNIVERSITY OF MASSACHUSETTS AMHERST •• CMPSCI 120 Fall 2010

Lecture 21

Javascript


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


Javascript Object Model

http://www.parallel.ru/docs/Internet/IRT/articles/js169/object.gif

Document Object Model (DOM)

Browser Object Model (BOM)


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


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>


window Object

Where all the action happensProperties: Methods:

4


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


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


Menus and Navigation Bars


Back to the DOM?The DOM defines the objects and properties ofall document elements, and the methods(interface) to access them.

6


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.


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


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


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



<html>

<head> <body>

<title> <h1> <p>

DOM is fun Hello world!

My Page

parent_of

sib_of

root

leaf

child_of



parent_of

sib_of

rootchild_of

9


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


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


document Object

Q11.3

Q11.4


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


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;}


document Object

12


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.


form Object examples

W3C, W3C

13


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>


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


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


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


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


document Object elements[ ]

16


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);


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


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>


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


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


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"></script></head>

repeat this for every image you wish to preload.

lecture 21 - computer science education lab, umass, … university of massachusetts amherst •...

Documents