Lecture 21 Javascript Announcements Reminder: beginning with Homework #7, Javascript assignments must be submitted using a format described in an attachment to HW#7 3rd Exam date set for 12/14 in Goessmann Lab. 64. 1
Javascript Object Model Browser Object Model (BOM) Document Object Model (DOM) http://www.parallel.ru/docs/internet/irt/articles/js169/object.gif 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 and properties of all document elements, and the methods (interface) to access them. 2
navigator Object See 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 happens Properties: Methods: 3
window Examples Open a new window (s) Q10.7 W3C W3C Open a new window and close it Q10.8 Open a new window, scale and close it Q10.9 Manipulate the status bar Q10.10 Manipulate the title and status bars Q10.11 Enter data into a Text Box W3C W3C Objects in the window Object location Object Q10.20 Used to access the URL of the document currently loaded history Object Q10.21 Keeps track of the pages visited screen Object W3C 4
Menus and Navigation Bars Back to the DOM? The DOM defines the objects and properties of all document elements, and the methods (interface) to access them. 5
Accessing document object document objects are created for you whenever you load a webpage does so automatically, even if there's not one line of JavaScript code on your page, as opposed to the Date object, for example. forms are accessible via element objects, images are accessible through image objects, etc. DOM Nodes Nodes everything in an HTML document is a node entire document is a document node every HTML tag is an element node text in the HTML elements are text nodes HTML attributes are attribute nodes comments are comment nodes 6
Nodes <html> <head> <title>my Page</title> </head> <body> <h1>dom is fun</h1> <p>hello world!</p> </body> </html> document node <html> element nodes <head> <body> <title> <h1> <p> DOM is fun Hello world! text nodes My Page 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 element node to contain text. Node Parents, Children, and Siblings nodes in the node tree have a hierarchical relationship to each other parent nodes have children; children on the same level are called siblings the top node is called the root every node, except the root, has exactly one parent node a node can have any number of children a leaf is a node with no children siblings are nodes with the same parent 7
Node Parents, Children, and Siblings child_of <html> root <head> <body> parent_of <title> <h1> <p> DOM is fun Hello world! My Page leaf sib_of Node Parents, Children, and Siblings child_of root sib_of parent_of 8
HTML DOM Properties typical DOM properties: x.innerhtml - the inner text value of x (a HTML element) x.nodename - the name of x x.nodevalue - the value of x x.parentnode - the parent node of x x.childnodes - the child nodes of x x.attributes - the attributes nodes of x HTML DOM Methods Examples x.getelementbyid(id) - get the element with a specified id x.getelementsbytagname(name) - get all elements with a specified tag name x.appendchild(node) - insert a child node to x x.removechild(node) - remove a child node from x 9
document Object Q11.3 Q11.4 JavaScript, DOM & HTML elements The HTML DOM and JavaScript can be used to change the inner content and attributes of HTML elements dynamically Example 1 - Change the Background Color 10
JavaScript, DOM & HTML elements Example 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 11
form Object The Form object represents an HTML form. For each instance of an HTML <form> tag in a document, a Form object is created. Forms are used to prompt users for input. The input data is normally posted to a server for processing. form Object examples W3C, W3C 12
HTML Forms and Input A form is an area that can contain form elements that allow the user to enter information E.g. text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) A form is defined with the <form> tag <form>. input elements. </form> HTML Forms and Input The most used form tag is the <input> tag The type of input is specified with the type attribute. text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name:<input type="text" name="firstname" /> <br /> Input fields Last name:<input type="text" name="lastname" /> Password fields</form> Textarea text fields 13
HTML Forms and Input Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male" /> Male Radio buttons <br /> <input type="radio" name="sex" value="female" /> Female </form> Checkboxes are used when you want the user to select one or more options of a limited number of choices <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" /> Checkboxes </form> Mixed Forms Q11.5 HTML Forms and Input Action Attribute and the Submit Button When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does 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 some characters in the text field below, and click the "Submit" button, the browser will send your input to a page called html_form_submit.asp. The page will show you the received input. 14
Examples create a simple drop-down box on an HTML page. A drop-down box is a selectable list. Simple drop down box Another drop down box draw a border with a caption around your data Fieldset around data add a form to a page. The form contains two input fields and a submit button Form with input fields and a submit button extended forms Form with checkboxes Form with radio buttons how to send e-mail from a form Send e-mail from a form e-mail validation document Object elements[ ] 15
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)";> function showform(myform) { </form> 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); Example function 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> 16
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.selectedindex f.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 image Change the src of an image Sequencing Images Q11.33 Selecting an image Q11.34 17
Creating an image rollover effect assigning a new image to the src property of the image each time the onmouseover event handler is fired inside an image link, we change 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 image baby1.src="baby1image.jpg"; if (document.images){ var baby2=new Image(); // Preload an image baby2.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" </body> </html> align="left" alt="baby" border=2 hspace="10" width="220" height="250"> Q11.35 Changing on a click Q11-6 Preloading images load an image into cache before being used, so it appears instantaneously when needed good for change of image in effects like rollover images and image slideshows. create an instance of the image object in the HEAD section of the page, and assigning the image we wish to preload to its 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. 18