Debug

1
Debug
2
alerts(throughout code)display objectsdisplay
literals
3
Radio Buttons and Check Boxes
4
Radio Buttons

• Radio button groups allow the use to choose ONE
  choice from a group.
• Since only one radio button can be selected when
  one is selected the previously selected one is
  deseleted.
• If one button is selected as the default at
  startup then a null selection (none selected) is
  not possible
• If no default selection is set and a choice is
  required then you must validate to ensure that
  one has been selected

5
Radio Buttons
ltbodygt lth1gtVisitor Gender Surveylt/h1gt ltform
name"survey" method"POST" action""onsubmit"ret
urn validate()"gt ltpgtNameltinput name"visitor"
type"text" id"visitor" size"40"gtlt/pgt ltpgt
Gender ltinput name"gender" type"radio"
value"Male" checkedgt Male ltinput
type"radio" name"gender" value"Female"gt
Female ltbrgt
named the same are mutually exclusive
6
Dreamweavers Insert Bar

• To add a radio button group to a document
• Place the insertion point within the form
  outline.
• From the form toolbar choose Radio Group
• Fill in the Radio Group options
• Name of group
• Enter each option label
• Enter the value for each option
• Table for easy alignment

7
Table within the Form
Sample code shows groups name (gender), and each
buttons label and value To make a particular
button the default specify checked
lttable width"200"gt lttrgt lttdgtltlabelgt
ltinput type"radio" name"gender"
value"M"gt Malelt/labelgtlt/tdgt lt/trgt
lttrgt lttdgtltlabelgt ltinput
type"radio" name"gender" value"F" checkedgt
Femalelt/labelgtlt/tdgt lt/trgt lt/tablegt
8
JavaScript - Radio Group array

• A Radio group is an array of options
• Arrays
• When referencing an array element specify a
  numeric subscript in square brackets.
• monthlySales3 1000
• Numbering of array elements always begins at zero
• Common to use a loop to step through an array
  processing each element in sequence

9
Option Group and Option properties

• length property the length (number of elements)
  in an array
• myForm.gender.length would be 2
• checked property set to true if the option is
  checked, otherwise false
• if (myForm.gender1.checked true)
• Value returns the value of the specified option
• myForm.gender0.value -- would be M

10
Pseudocode for determining which button is
selected

• loop start i at 0 while i lt elements increment
  i
• if groupNamei.checked is true
• return the value of groupNamei
• end loop

11
Tying it all together

• Validating Radio Buttons Selection
• Need to validate that the user has selected an
  option
• Validate only required if a default was not set
• Add code to your form validate function to use
  the getRadioValue function
• If the value returned is null then you have and
  error and must generate a message and set the
  focus as before

12
Check boxes

• Checkboxes may be inserted into a form using
  Dreamweavers forms toolbar
• Tables are a handy way of aligning text to appear
  as a label on the left of checkboxes on the right

Series of 5 checkboxes named and assigned values
name value flavour1 V
flavour2 C etc
13
Check box attributes

• name
• Field-name for this checkbox
• value
• Value sent to server if box is checked
• Default value "on"
• Unchecked value null
• checked
• Indicates box is checked on load
• Default cleared

14
Check boxes

• Unlike radio buttons checkboxes arent grouped
• They therefore cant be accessed using group name
  and array subscripts
• Each box has a unique name (i.e. vanilla,
  chocolate, etc.)
• If you would like to treat a series of check
  boxes like a group and process them using loops a
  common practice is to name them with a standard
  name, and append a sequential number to the end,
  example
• flavour1, flavour2, flavour3

15
Use of variable object name

• Recap notation to refer to an object
• if (document.myForm.flavour1 checked)
• Use square braces to convert string to object
• Note no "." before string text reference
• if (document.myFormflavour1".value
  checked)
• same example using a variable
• var myObjectName flavour1
• if (document.myFormmyObjectname.value
  checked)

16

• / code a loop to step though each box by
  building a string of checkbox name /
• function checkIcecream()
• var flavourName new Array ("","Vanilla","Choco
  late","Strawberry","Butterscotch",Mint")
• var boxesChecked 0
• var i 0
• var boxName ""
• var message "I like "
• for (var i1ilt5i)
• boxName "flavour"i
• if (document.iceCreamboxName.checked)
• boxesChecked
• message" " flavourNamei
• if (boxesChecked0)

16
17
List/Menu

• Adding lists and menus
• Lists and menus let you present users with many
  choices within a limited space.
• Lists provide a scroll bar that lets users
  navigate through many items, and make multiple
  selections.
• Drop-down menus display a single item, which is
  also the active selection.
• Users can choose only one item from a menu.

18
Selection List/Menu tag

• ltSELECT multiple nametext sizevaluegt
• ltOPTION valuevaluegt option 1 lt/OPTIONgt
• ltOPTION valuevalue selectedgtoption 2
  lt/OPTIONgt
• lt/SELECTgt

• attributes
• if SELECT size is greater than one you get a list
  box with a scroll bar rather than a drop down
  list box
• Specify multiple if more than one option can be
  selected. Will work for the user as does in
  Windows (Shift or Control click to select
  multiples and ranges)
• Specify selected in option tag if option is
  default
• A menu is just a list with
• Allow multiple set to NO
• The size (height in Dreamweaver) set to 1

19
Selection List/Menu Properties

• selectedIndex
• The number of the chosen option (0 relative).
• -1 if no option selected
• choiceNum document.myForm.myList.selectedInde
  x
• value
• The value of the selected option
• choiceValue
• document.myForm.myList.optionschoiceNum.va
  lue

20
Switch case

•  switch (expression)
•   case value1 
• statment(s)  break  case value2 
• statment(s)   break  case
  value3    statment(s)    break
   default     statement(s)
•   

Without break execution will fall through and
subsequent cases where expression qualifies will
also be executed
21
Switch case example

• switch (myField)
• case "webct"
• window.location"http//webct2.conestogac.on.ca"
  
• break
• case "mail"
• window.location"https//cs23.conestogac.on.ca"
  
• break
• case "tse"
• window.location"http//www.tse.com"
• break
• default
• alert("I do not know that site")

22

• // generate a random number keep prompting user
  for a value until they supply matching
• ltbodygt
• ltscript language"JavaScript" type"text/JavaScrip
  t"gt
• var myGuess Math.floor(Math.random() 10)
• var yourGuess-1
• var badger""
• var yourInput""
• while (myGuess ! yourGuess)
• yourInput prompt(badger "guess a number
  between 0 and 10", "")
• yourGuess parseInt(yourInput) // convert
  string to integer
• badger Guess again ... "
• document.write("You guessed right " myGuess)
• lt/scriptgt
• lt/bodygt

23
Arrays
NO array var day0 "Monday" var day1
"Tuesday" var day2 "Wednesday" var day3
"Thursday" var day4 "Friday" var day5
"Saturday" var day6 "Sunday"

• In some ways, arrays in JavaScript are easier to
  use and more powerful than arrays in C/C and
  Java.
• use square brackets in array syntax in these
  languages.
• Consider writing a script where you need to
  create a variable for each day of the week.

24
New Array
var days new Array(7) // creates a new
array of length 7 days0 "Monday"
// populate array 1 element at a time days1
"Tuesday" days2 "Wednesday" days3
"Thursday" days4 "Friday" days5
"Saturday" days6 "Sunday" //or populate
an array all at once, automatic subscript var
daysnew Array(Mon,Tues,Wed,Thurs,Fri,S
at,Sun)
25
Array Processing using loop

• To step through the array
• for ( var i 0 i lt days.length i )
•     document.write( daysi "ltbrgt)

26
Scrolling picture example

• lthtmlgtltheadgt
• ltscript language"JavaScript" type"text/JavaScrip
  t"gt
• var imageList new Array("../images/pic1.jpg",".
  ./images/pic2.jpg","../images/pic3.jpg")
• currentPic 0
• numPics imageList.length
• function rotate()
• currentPic
• if (currentPicnumPics)
• currentPic0
• document.photo.srcimageListcurrentPic
• setTimeout("rotate()",11000)
• lt/scriptgt
• lt/headgt

setTimeout method performs first parameter at
interval of second parameter see page
82
27
Other examples of arrays and loops

• Check out the web

28
JavaScript code

• function showGender()
• var i 0
• var selectedGender ""
• for (i 0 iltdocument.myForm.gender.length
  i)
• if (document.myForm.genderi.checked)
  
• selectedGender document.myForm.genderi
  .value
• alert("selectedGender is " selectedGender)

29
JavaScript Function

• Since this action of determining the value of the
  selected option in a group is so common it would
  be desirable to write a function to do this for
  any given option group on any form
• Function will
• Have 2 parameters
• the name of the form
• The name of the option group
• Return the value of the selected option
• Store this function in a JavaScript library so it
  can be shared and incorporated into any .htm file

30
Creating Reusable Libraries of Code

• To Create the library file
• Can use your favourite editor or using
  Dreamweaver
• JavaScript
• Add standard documentation to the top of the file
• Add descriptive documentation for each function
• keep the file with a .js extension (i.e.
  myLibrary.js)
• For this course store the library file in the
  root WD1 directory

31
Creating Reusable Libraries of Code

• To use the library file
• Add the SCR attribute to the SCRIPT tag in the
  HEAD section in your .html file
• ltscript language"JavaScript" type"text/JavaScrip
  t src"../library.js"gt
• lt/scriptgt
• In Dreamweaver when typing scr you can use
  browse to point to the library file
• NOTE the ltscriptgt tag with .src must not contain
  any javaScript code - its for the library ONLY
• If you want JavaScript code in this section of
  the page include it in another ltscriptgt tag