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.
• Its 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 dont 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 weve
  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 ltoptiongt tag.
• Which particular option will depend, of course,
  on which option the user selected when they
  completed the form.

4
ltscriptgt 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") lt/scriptgt lt
form nameform1gt ltselect name"selNationality"gt lt
option value"can"gtCanadianlt/optiongt ltoption
value"amer"gtAmericanlt/optiongt ltoption
value"braz"gtBrazillianlt/optiongt ltoption
value"nig"gtNigerianlt/optiongt lt/selectgt ltinput
typesubmit onClickval() /gt
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.radNationality0.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.radNationality0.checked )
  

6

• ltscriptgt
• function val()
• if (document.form1.radCity0.checked)
• alert("You are going to " document.form1.radCi
  ty0.value)
• else if (document.form1.radCity1.checked )
• alert("You are going to " document.form1.radCi
  ty1.value)
• else if (document.form1.radCity2.checked )
• alert("You are going to " document.form1.radCi
  ty2.value)
• lt/scriptgt

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

• ltscript language"JavaScript"gt
• 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")
• lt/scriptgt
• ltform name"Form1"gt
• ltinput type"checkbox" name"chkFirst" /gtFirst
  Class Onlyltbr /gt
• ltinput type"checkbox" name"chkPet" /gtTraveling
  with Petltbr /gt
• ltinput type"checkbox" name"chkSpouse"
  /gtTraveling with Spouseltbr /gt

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 gt 18 registeredyes)
• 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 gt 18 registeredyes)
• alert(You may vote)
• else if (age gt 18 registeredno)
• 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
• lta hrefwww.nytimes.comgtNY Timeslt/agt using JS
• document.write(lta href\www.nytimes.com\gtNY
  Timeslt/agt)