Document Objects Forms, Images and Links

Document ObjectsForms, Images and Links

Project 3 • To evaluation the expression, use: var actual=“2*3+6”; parseFloat(eval(actual));

Example <HTML> <head> <body> <title> <h1> <h2> <h3>

Document model – Javascript hierarchy • Javascript document objects are arranged in a DOM hierarchy. • The window object is at the top of the tree and has child nodes • Navigator object • Frame object • History object • Location object • Document object • Screen object • Event object

Document object • Documents contain text, images, forms, links • Subordinates to the document object are: • Anchors • Images • Forms • Links • Applets • Embeds

Dot syntax • window.document.bgColor OR • document.bgColor

Document • Every window contains a document object that corresponds to the HTML document shown in the window • The document object corresponds to the code between <body> </body>

Document Properties frames[ ] Height images[ ] lastModified linkColor links[ ] Location Referrer Title vlinkColor width activeElement alinkColor anchors[ ] applets[ ] bgColor cookie domain embeds[ ] fgColor forms[ ]

Document Methods attachEvent() captureEvents() Clear() clearAttributes() close() focus() getElementById() getElementsByName() getElementsTagByName() getSelection() handleEvent() hasFocus() open() recalc() releaseEvents() routeEvent() setActive() write() writeln()

Accessing Objects within a Document The Document object contains many objects that can be accessed using special arrays. For example, collections of anchors, frames, images, forms, and links can be accessed using these array. The table below shows some of these special arrays. • anchors[subscript] – Reference named anchors in a page. • applets[subscript] – Reference Java applets in a page. • embeds[subscript] – Reference embedded objects in a page. • forms[subscript] – Reference forms in a page. • frames[subscript] – Reference window objects of frame objects in a page. • images[subscript] – Reference images in a page. • links[subscript] – Reference hyper links in a page.

Form objects - Objectives • Examine form objects • Script push buttons and form submissions • Manipulate checkboxes • Work with radio buttons • Check the options on a selection menu • Validate the contents of text-related input fields

Forms • An HTML page may contain one or more forms. A form is created with the <form></form> tags and each set of form tags in an HTML document has an associated form object. • Multiple forms are stored in an array by the browser and can be referenced as shown in the example below: • document.forms[0] • If the form has a name it can be referenced by name as shown in the example below: • document.forms[“myForm”]

Reset and Submit Methods The reset() method clears all of the components of a form. The submit() method is used to start the processing of the form. Whatever action is specified in the form will be executed when the onsubmit event handler fires. Form submission can be handled: • completely by a script • submitting the form’s contents to a server script • using a script to pre-process the form’s elements before submitting it to a server

Form ObjectProperties, Methods, and Events

Form Object Properties

Form Object Properties (continued)

Submitting a Form with Javascript • Event handlers. Events are triggered by a user when he initiates some actions (pressing a key, clicking his mouse on a button, moving his mouse over a link) • Handler can check the input data to decide whether to submit or reject the form. • onclick • onsubmit • onreset

Button ObjectProperties, Methods, and Events If the form is not going to submit data to a server, the button input type can be used instead of the submit button

Working With Push Buttons <html> <head> <title>Push buttons</title> <script type="text/javascript"> function booktype(btn) { if (btn.value == "Mystery") { alert("You selected mystery!"); } if (btn.value == "Fantasy") { alert("You selected fantasy!"); } if (btn.value == "Science Fiction") { alert("You selected science fiction!"); } if (btn.value == "Romance") { alert("You selected romance!"); }

Working With Push Buttons(continued) var theOthers = ""; for (var i = 0; i < btn.form.elements.length; i++) { if (btn.form.elements[i] != btn) { theOthers += btn.form.elements[i].value + " "; } } alert("You didn't select " + theOthers); } </script></head> <body> <h1>Working with Push Buttons</h1> <form> <p><b>Click on your favorite book genres!</b></p> <input type="button" value="Mystery" onclick="booktype(this);" /> <input type="button" value="Fantasy" onclick="booktype(this);" /> <input type="button" value="Science Fiction" onclick="booktype(this);" /> <input type="button" value="Romance" onclick="booktype(this);" /> </form> </body> </html>

Checkbox Objects Checkboxes are commonly used in forms to make boolean selections for example: Member / Non Member, Male / Female, etc.. Adding a checkbox to an HTML document creates a related checkbox object that can be accessed in JavaScript.

Checkbox ObjectProperties, Methods, and Events

Using and Validating Checkboxes <script type="text/javascript"> function validcheck(x,y) { var ischecked = null; var checkedItems = “”; for (var i = x; i < y; i++) { if (document.forms[0].elements[i].checked) { ischecked = "ok"; checkedItems = checkedItems + “\n” + document.forms[0].elements[i].name; } } if (ischecked == null) { alert ("\nPlease select at least one of the check boxes!\n\n Then resubmit the form."); } else{ alert(“You have selected the following items: “ + checkedItems); } return; } </script>

Using and Validating Checkboxes(continued) <body> <h1>Scripting and Validating Checkboxes</h1> <form name=myform method=post onsubmit="validcheck(0,4)"> <p>Select the topics you are interested in: <p> <input type=checkbox name="biology" />Biology<br /> <input type=checkbox name="calculus" />Calculus<br /> <input type=checkbox name="organic-chemistry" />Organic Chemistry<br /> <input type=checkbox name="physics" />Physics<br /> <input type=checkbox name="world-literature" />World Literature</p> <input type=submit value="Submit" /> </form> </body> </html>

Using Radio Button Objects Radio buttons are best used when the user should make a single selection from a group of selections. They are similar to checkboxes in that they are selected or not selected, in other words they store boolean values. However, unlike checkboxes, you can only choose one radio button at a time in a group of radio buttons. Adding a radio button to an HTML document creates a related radio button object that can be accessed in JavaScript. When creating an array of radio buttons, give them all the same name.

Using Radio Button Objects <script type="text/javascript"> function checkbutton(radiogroup){ for (var i = 0; i < radiogroup.length; i++) { if (radiogroup[i].checked) { return i; } } return 0; } function checkselection(form) { var i = checkbutton(form.group1); alert("You selected " + form.group1[i].value); } </script>

Using Radio Button Objects(continued) <body> <form> <p>Select your favorite dessert:</p> <p><input type=radio name=group1 value="none" checked />None <input type="radio" name="group1" value="ice cream" />Ice cream <input type="radio" name="group1" value="pie" />Fruit or cream pie <input type="radio" name="group1" value="pudding" />Pudding or jello <input type="radio" name="group1" value="candy bar" />Candy bar</p> <p><input type=button value="Determine selection" onclick="checkselection(this.form);" /> </form> </body> </html>

Midterm exam JavaScript requires which of the following steps? a. Compile and deployment of the files. b. Edit and load into a Web browser. c. Edit and compile. d. All of the above

Midterm exam In JavaScript, which of the following can be used to indicate that comments end? a. !--> b. -- > */ c. !//--> d. //!-->

Midterm exam Which of the following is a valid variable name? a. if b. var c. Weather d. All of the above

Midterm exam How many times does the code within the body of the “for” loop process for the following code if "years" is equal to 3: (i=1; i<years; i++) { <body of the for loop>} ?? a. 0 b. 1 c. 2 d. 3

Midterm exam How many times does the code within the "while...loop" perform, if the "years" is 1 before this while loop and “years” is incremented by 1 each iteration in the body of the while loop: while (years>0) {<body of while loop>}? a. 0 b. 1 c. 2 d. Endless Loop

Midterm exam JavaScript pass variables by which of the following? a. By neither reference nor value b. By value c. By reference d. By value and reference

Midterm exam A new array can be declared by which of the following? a. Student = new Array; b. Array = new Student; c. Student = new Array (); d. Array = new Student ();

Midterm exam If the length of a String is determined to be 20 by using the length property, which of the following is TRUE? a. The index can vary from 0-19. b. The index can vary from 0-20. c. The index can vary from 1-19. d. The index can vary from 1-20.

Midterm exam What is the possible number of different values that can be returned from the getDay() method? a. 0 b. 7 c. 31 d. Unlimited

Midterm exam Which of the following is the correct syntax to use the Math Object’s SQRT2 property? a. Math.SQRT2 b. Math.(SQRT2) c. MATH. SQRT2 d. MATH.( SQRT2)

Error <script language="JavaScript“> document.writeln("Two,..."); document.writeln(‘’ Three, .."); document.write("Four..<br>"); </script>

Code 17. function quote() { var age=document.quoteform.age.value; if (age<=0) window.alert(“ Age must be >0”); else if (age >= 20 && age<=30) alert(“Your rate: 2$ a week”); else if (age>30 && age <=40) alert(“Your rate: 3$ a week”); else if (age>40 && age <=50) alert(“Your rate: 5$ a week”); else if (age > 50) alert(“Your rate: 10$ a week”); else if (age < 20) alert(“Undefined”); }

Code 18. <script type="text/javascript"> var answer = document.form.input.value; if (answer=="Netscape" || answer=="netscape") alert("Congratulations"); else alert("Sorry, it is not "+answer); document.form.input.value=""; focument.form.input.focus(); }

Code 19. function computeInterest(PMT,IR,NP) { return (PMT *(1-Math.pow(1+IR,-1*NP)/ IR); }

Code 20: <script type="text/javascript"> // Insert your code here var stringObj = new String("Javascript is not Java"); var index; index = stringObj.lastIndexOf("Java"); document.write("Index of the second Java is "+index+"<BR>"); document.write(stringObj.toUpperCase().fontcolor("red").bold().fontsize(10)); </script>

Selection lists can be used for multiple selections or for menus. Selection lists can be helpful when you want to display a lot of information in a small space. All of the information in a selection list is pre-validated by the author and does not have to be validated by a script later. Adding a selection list to an HTML document creates a related selection list object that can be accessed in JavaScript. Using Selection Objects

Selection ObjectProperties, Methods, and Events

Using Selection Menus <script type="text/javascript"> function indexSelection(form) { alert(form.userPref1.options[form.userPref1.selectedIndex].text); } function directSelection(form) { alert(form.userPref2.options.value); } function multipleSelection(form) { var theString = ""; for (var i = 0; i < form.userPref3.length; i++) { if (form.userPref3.options[i].selected) { theString += form.userPref3.options[i].text + " \n"; } } alert("You have selected: \n\n" + theString); } </script>

Using Selection Menus(continued) <body> <form name="form1"> <p>Choose the language you plan on studying:</p> <p><select name="userPref1"> <option selected="selected">English</option> <option>French</option> <option>German</option> <option>Spanish</option> </select></p> <p><input type="button" value="Show Selection 1" onclick="indexSelection(this.form);"/></p> </form> <form name="form2"> <p>Choose one of the following:</p> <p><select name="userPref2"> <option value="Biology">Biology</option> <option value="Chemistry">Chemistry</option> <option value="Physics">Physics</option> <option value="EarthScience">Earth Science</option> </select></p> <p><input type="button" value="Show Selection 2" onclick="directSelection(this.form);"/></p> </form>

Using Selection Menus(continued) <form name="form3"> <p>Choose the areas of math you plan on studying:</p> <p><select name="userPref3" multiple="multiple"> <option value="Algebra">Algebra</option> <option value="Trigonometry">Trigonometry</option> <option value="Calculus">Calculus</option> <option value="DiscreteMath">Discrete Mathematics</option> </select></p> <p><input type="button" value="Show Selection 3" onclick="multipleSelection(this.form);"/></p> </form> </body> </html>

Text Objects Text input fields are used to enter single lines of text. Input text fields can have the following styles: • hidden – the field does not show in the browser window but text can be stored in it • password – password fields display an * (asterisk) character for every character entered into the text field • text – text fields display the text entered by the user Text Area fields may contain multiple lines of text and excellent choices when entering larger amounts of text.

Document Objects Forms, Images and Links