Document Objects Forms, Images and Links

The document object model Each element of an HTML document, such as an image, form, link, or button, can be represented as a JavaScript object. Each object contains properties and methods to describe and manipulate these objects.

The HTML document – E1 My Page Level 1 Level 2 Level 3 HTML “My Page”“Level1”“Level2”“Level3” Each node in the tree can be referenced using the dot syntax. In JavaScript, the window object is at the top of the tree. Its children nodes are the navigator, the frames, the history, the location, the document, the screen and the event objects. We will see tonight the document object and its children, the anchor, images, forms, links, applets and embeds objects.

The document Every window or frame contains a document object that corresponds to the HTML document shown in the window. This object corresponds mainly to the body of the document. The document object can be represented as a property of the window by saying window.document. JavaScript knows that the window is the top level of the hierarchy, so you can omit the window part, writing only document.bgColor, for example, instead of window.document.bgColor. The document object is defined when the tag is encountered on the page and stays in existence until the page is unloaded.

Looping through document 0bject Properties – E2 Looping through Object Properties var props=new Array(); for ( var property in window.document){ props.push(property); } for(i=0;i<props.length; i++){ document.write( props[i] + " "); if( i>0 && i%3 == 0 ){document.write(" ");} }

Document Object Properties – E3 Document Object Properties var beg_tag=" "; end_tag=" "; document.write("The location of the document: "+ beg_tag + document.location + end_tag); document.write("The document's title: "+ beg_tag+ document.title + end_tag); document.write("The background color: "+ beg_tag+ document.bgColor + end_tag); document.write("The link color is: "+ beg_tag+ document.linkColor + end_tag); document.write("The text color is: "+ beg_tag+ document.fgColor + end_tag); document.write("The document was last modified: "+ beg_tag + document.lastModified + end_tag); Thanks!

document object methods() The parentheses differentiate a method from a property. When you open a new document, the current document is replaced with a new document and all of its content overwritten.

document open() & close() methods – E4 Frame Me! Right Frame Just to show you that this is the right frame Left Frame left frame writes to right frame // Methods of the document object parent.frames[1].document.open(); parent.frames[1].document.write(" ", " ", " Hey brother, let me write all over you! "); parent.frames[1].document.close();

Forms Used to pass information from the browser to the server. Uses different ways to accept input, such as radio buttons, checkboxes, pop-up menus and text boxes. FORMAT: The body of the form goes here, including input devices for filling out the form. The fields are created by the HTML tag. Input types: button, text, textarea, password, checkbox, radio, select, file, hidden, submit, image and reset.

An HTML form – E5 An HTML Form All About You Type your name here: Talk about yourself here: I was born... Choose your food: Hamburger Fish Steak Yogurt Choose a work place: Los Angeles San Jose San Francisco Choose a vacation spot: Hawaii Bali Maine Paris

JavaScript and the forms Object The forms object is also a property of the document object. Every time you create a form in a given document, the browser creates a unique form object and assigns it as an element of an array, called the forms[] array. The index value corresponds to the order in which the form occurs in the document. If the form has a name, it can be referenced by its own name: document.myform. The form contains input types. The JavaScript forms object consists of a property called elements. Each of the input types in the elements[] array is also an object in its own right. document.forms[0].element[0] refers to the first field in the first form.

Two forms example - E6 : Type your name here Beans Carrots window document forms[0]forms[1] “form1”“form2” elements[0]elements[1]elements[0]elements[1] “yourname”“button1”“veggie1”“veggie2” value “bean”value “carrot”

Naming Forms – E7 Naming Forms object Enter your name: <input type="text" name="namefield" value="Name: "> document.writeln( "The first form is named: “ + window.document.form1.name); document.write( "The second form is named: “ + document.form2.name);

Referencing the form elements by name – E8 Naming Buttons Naming buttons document.write(" Form name is: "+document.myform.name); document.write(" Name of first button is: " +document.myform.button1.name); document.write(" Value of button1 field: " +document.myform.button1.value); document.write(" Name of second button is: " +document.myform.button2.name); document.write(" Value of button2 field: " +document.myform.button2.value);

Form and element properties – E9 Form and Element Properties Enter something: <input name="enter" type="text" value="hello"> Button test document.write(" Form name is: "+document.myForm1.name); document.write(" Number of button fields: "+document.myForm2.length); document.write(" Value of the text field: "+document.myForm1.enter.value); document.write(" Value of button1 field: "+document.myForm2.button1.value); document.write(" The name of the first form," + " document.forms[0].name, is: "+document.forms[0].name); document.write(" The name of the second form, " + "document.forms[1].name, is: "+document.forms[1].name); document.write(" Accessing the \"elements[]\" name," + "type, and value properties: "); for(var i = 0; i < document.myForm2.length; i++){ document.write(" name: " + document.myForm2.elements[i].name +" "); document.write("value: “ +document.forms[1].elements[i].value+" "); document.write("type: “ +document.forms[1].elements[i].type+" "); }

HTML form without JavaScript – E10 An HTML Form All About You Type your name here: Choose a work place: Los Angeles San Jose San Francisco Choose a vacation spot: Hawaii Bali Maine Paris

Submitting a form with an image – E11 An Image Input Type Enter your name:

onClick event handler – E12 onClick Event Handler and Forms function readySubmit(){ if(confirm("Are you ready to submit your form? ")){return true;} else{return false;} } Enter your user id: <input type="text" name="textbox" value=""> Type your password: <input type="password" name="secret"> <input type="submit" onClick="readySubmit();">

onSubmit event handler – E13 onSubmit Event Handler and Forms function readySubmit(){ if(confirm("Are you ready to submit your form? ")){return true;} else{return false;} } Enter your user id: <input type="text" name="textbox" value=""> Type your password: <input type="password" name="secret">

onReset event handler – E14 The onReset Event function resetAll(){ if(confirm("Do you want to reset the form to its default values? ")){return true;} else{return false;} } Enter your user id: <input type="text" name="textbox" value=""> Type your password: <input type="password" name="secret"> <input type="submit" onClick="readySubmit();"> // function from previous example <input type="reset" value="Reset Form">

More on this keyword – E15 An HTML form and the "this" keyword and Event Handler function checkForm(yourinfo){ if(yourinfo.namestring.value == ""){ // Check for an empty string alert("Please type in your name"); return(false); } else{return(true);} } Type your name here:

Button input type – E16 button input type function greetme(){alert("Why did you click me like that? ");} <input type="button" value="Click me!" onClick="greetme()">

submit() and reset() methods – E17 An HTML Form All About You Type your name here: <input type="text" name="namestring" size="50"> Talk about yourself here: <textarea name="comments" align="left" rows="5" cols="50">I was born... Choose a work place: <input type="checkbox" name="place" value="LA">Los Angeles <input type="checkbox" name="place" value="SJ">San Jose <input type="checkbox" name="place" value="SF" checked>San Francisco Click here to submit this form Click here to reset this form

displaying a form in a pop-up menu – E18 Display Form Input function showForm(myform) { NewWin=window.open('','','width=300,height=200'); name_input=" Your name: " + myform.user_name.value + " "; NewWin.document.write(name_input); phone_input=" Your phone: " + myform.user_phone.value + " "; NewWin.document.write(phone_input); } function close_window(){ NewWin.window.close(); } Display form data in a little window Please enter your name: Please enter your phone: <input type="button" value="show form data" onClick="showForm(this.form)";> Click here to close little window