More HTML Forms

1
More HTML Forms
2
Document Trees
lthtmlgt lth1gtForm Onelt/h1gt ltform namefirstForm"gt A
ddressltinput type"text" name"address"
size"30"gt ltbrgtShould we keep it? ltinput
type"checkbox" namekeepergt ltbrgtltinput
type"radio" namesizegtSmall ltbrgtltinput
type"radio" name"size"gtMedium ltbrgtltinput
type"radio" name"size"gtLarge lt/formgt lth1gtForm
Twolt/h1gt ltform namesecondForm ltbrgtltselect
name"topping"gt ltoptiongtPepperoni ltoptiongtSausag
e ltoptiongtPineapple ltoptiongtLimburger and
Onion lt/selectgt ltbrgtltinput type"button"
name"myButton" valueMy Button"gt lt/formgt lt/htm
lgt
3
Document Trees
document
secondForm
firstForm
myButton
topping
address
keeper
size
value
value
value
checked
2
0
1
checked
checked
checked
4
Document Tree Path Names
document.firstForm.address.value1075
North document.secondForm (is a
form) document.secondForm.myButton (is a
button) document.secondForm.myButton.value (is a
string) if (document.firstForm.keeper.checked)
if (document.firstForm.size2.checked)
document
secondForm
firstForm
myButton
topping
address
keeper
size
value
value
value
checked
2
0
1
checked
checked
checked
5
More Form Widget Events

• Button, Check Box, Radio Buttons
• onclick
• Text Box, Text Area
• onchange, onblur, onfocus, onselect
• Selection List
• onchange, onclick, onblur, onfocus

6
Text Style Demos
7
Payroll Demos
8
Debugging

• What is a bug?
• In the old days computers would fail because bugs
  would die on the circuits and short them out
• A bug is a problem in a program that you need to
  find

9
How do you find the last blue wolf in Minnesota?
10

• Build a fence
• Listen for the howl

11

• Build a fence
• Listen for the howl

12

• Build a fence
• Listen for the howl

13

• Build a fence
• Listen for the howl

14
Debugging with a wolf fence

• Make your program do something that will show
  where the problem is
• alert(any string you want)

15
Debugging Demo
16
Debugging

• Find a way to make your problem smaller
• Make a copy and cut features out of the copy that
  dont relate to your problem
• Put in Wolf fences to help you narrow down the
  problem