Some JS Wrap-up

1. Some JS Wrap-up

2. Form Elements: Names v.s. Values • The only reason we need to name to our form elements is so that we can access those elements from our JavaScripts. • It’s the same reason that people have names: i.e. so that we can refer to them! • It is possible for certain elements to not require a name. For example, most buttons do not need names because we don’t anticipate needing to refer to that button at any time in the future. • E.g. A submit button whose only job is to run the script. • Usually, we are interested in the value of an element. An element gets its value in different ways: • Sometimes the value is entered by the user (e.g. the user enters types information into a textbox or textarea) • Sometimes, the element is a type that does not allow the user to enter it themselves. (e.g. Radio buttons, Checkboxes). In this case, it is up to the programmer to encode the value when they create the form.

3. Retreiving info from select boxes • The document.form.elementName.value that we’ve used for textboxes also works for other elements such as select boxes, and for textareas. • Suppose you have a select box called ‘selNationality’. To retreive the value you could type: var country = document.Form1.selNationality.value; • The value that gets retreived will be the one you encoded inside the <option> tag. • Which particular option will depend, of course, on which option the user selected when they completed the form.

4. <script> • function val() • { • var nation; • nation = document.form1.selNationality.value; • if (nation == "amer" || nation == "can") • { • alert("You do not need a passport"); • } • else • { • alert("You need a passport to travel to the US"); • } • } • </script> • <form name=form1> • <select name="selNationality"> • <option value="can">Canadian</option> • <option value="amer">American</option> • <option value="braz">Brazillian</option> • <option value="nig">Nigerian</option> • </select> • <input type=“submit” onClick=“val()” />

5. ** Retreiving info from radio buttons: • Recall that radio buttons all have the same name. Given that, how do we refer to any one particular button? • Answer, we do it numerically: That is, the first button in the group is assigned a number 0, the second ‘1’ and so on… • So: document.form1.radNationality[0].value will retreive the value of the first radio button in the group called radNationality. • How do we determine if a given radio button has been checked or not? • Answer we use “.checked” • if ( document.form1.radNationality[0].checked ) …

6. <script> function val() { if (document.form1.radCity[0].checked) { alert("You are going to " + document.form1.radCity[0].value); } else if (document.form1.radCity[1].checked ) { alert("You are going to " + document.form1.radCity[1].value); } else if (document.form1.radCity[2].checked ) { alert("You are going to " + document.form1.radCity[2].value); } } </script> <form name="form1"> New York: <input type="radio" name="radCity" value="New York" /> <br /> Los Angeles <input type="radio" name="radCity" value="Los Angeles" /><br /> Washington<input type="radio" name="radCity" value="Washington" /><br /> <input type="hidden" name="hidH" value="test" /> <input type="submit" onClick="val()" /> </form> • Note how we identify each radiobutton using [] brackets • Note how the numbers begin from 0 • Note how the syntax: doc.form.radBtn.checked evaluates to true/false and can therefore be used inside a conditional.

7. Retreiving info from check boxes: • Unlike radio buttons, check boxes all have different names. So to retreive their value, we can simply use ‘.value’ as we have for other types of form elements. • However, to determine if a check box has been checked, we need to use the ‘.checked’ syntax described previously for radio buttons.

8. <script language="JavaScript"> function val() { if ( document.Form1.chkFirst.checked ) alert("first class"); if ( document.Form1.chkPet.checked) alert("Taking your pet!"); if ( document.Form1.chkSpouse.checked ) alert("Taking your spouse"); } </script> <form name="Form1"> <input type="checkbox" name="chkFirst" />First Class Only<br /> <input type="checkbox" name="chkPet" />Traveling with Pet<br /> <input type="checkbox" name="chkSpouse" />Traveling with Spouse<br /> <input type="submit" onClick="val()" /> </form>

9. Logical “AND” ( && ): • Suppose you wanted to write a statement where two (or more) conditions must be met for something to be done. • For example, suppose you wanted to see if a user was registered to vote. You might want to ask: Is the user 18 years old AND Are they registered? • In other words, both conditions have to be true. The syntax follows: if ( age >= 18 && registered==“yes”) { alert(“You may vote”) } else { alert(“You may not vote”); } • You can have as many conditions as you like inside the main conditional. • When separated by logical AND ( && ), the rule is that ALL conditions must be true for the whole conditional to evaluate to true.

10. The “else” catch-all: • At the end of a block of ‘if’ and ‘else if’ statements, it is often a good idea to have an “else” to do something in case all of the statements are false. if ( age >= 18 && registered==“yes”) { alert(“You may vote”) } else if (age >= 18 && registered=“no”) { alert(“Please get registered”); } else { alert(“Sorry, you are not old enough to vote”); } • Because there is no ‘if’ following the end of the word ‘else’, this statement will always be evaluted provided that the program makes it that far in the block.

11. Escape characters in JS: • Sometimes in JS you will want to use characters such as ‘;’ (semicolons) or ‘ “ ‘ (quotation marks) without those characters interfering with your code. • For example, suppose you wanted to output a quotation mark inside a document.write statement? • If you wrote: document.write(“This is a quote: ““); this would not work because the second quotation mark (shown in red) would be viewed by JS as being the closing quote of the document.write statement . • Fortunately, there is a way: For several different characters, JS allows you to “escape” them by placing a ‘\’ (back-slash) before the character. This tells JS not to treat the character as part of the script, but rather as part of a string. Observe the same example: document.write(“This is a quote: \” “); • Practice: Write an anchor tag to display a link to the New York Times: <a href=“www.nytimes.com”>NY Times</a> using JS: document.write(“<a href=\”www.nytimes.com\”>NY Times</a>”);