Java Script

1
Java Script
2
JavaScript What is is and What it Does

• What it is
• It is NOT Java
• It is NOT Server-side programming
• Users can see code
• It is a client-side programming tool
• It is embedded within an HTML page
• JavaScript is case-sensitive

• What it does
• Allows interactive computing at the client level
• Supported by IE, Netscape, etc.
• Dynamically changes HTML
• Reacts to events
• Read and write HTML elements
• Validates data

3
Hello World Example

• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("lth1gtHello World! This is
  Chucklt/h1gt")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

4
Hello World Example

• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("lth1gtHello World! This is
  Chucklt/h1gt")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

Begins with ltscript type"text/javascript"gt and
ends with lt/scriptgt
5
Conditions

• If...then...else works like Java or C
• var d new Date()
• if (d.getHours() lt 12)
• document.write("Good morning!")
• else
• document.write("Good day!")

6
Conditions

• switch...case works like Java or C
• var d new Date()
• switch (d.getDay())
• case 1
• document.write("Mondays Stink")
• break
• case 5
• document.write("TGIF")
• break
• default
• document.write("Just another day.")

7
Loops

• for loops works like Java or C
• for (i 0 i lt 5 i)
• document.write("Hi Mom " i "ltBRgt")
• while and do while loops works like Java or C
• do
• document.write("Hi Mom " i "ltBRgt")
• i
• while (i lt 10)

8
Functions You Need

• alert pops up a message box
• alert("This is a message")
• confirm gives an OK or Cancel box
• if (confirm("Is this OK?"))
• document.write("You pressed OKltBRgt")
• else
• document.write("You pressed CancelltBRgt")

• Comments are done with
• / comment /
• //Comment to line end
• fontcolor changes font color
• txt "Hi Mom"
• document.write( txt.fontcolor('red'))
• prompt lets the user enter text
• UserID prompt("Please enter your UserID","")

9
Form Validation

• You assign a form using the onsubmit clause
• ltform name"myForm" action" JavaScriptAnswer.htm
  " onsubmit"return validate()"gt
• The above command will only go to the
  JavaScriptAnswer.htm page if the validate
  function returns true

10
Form Validation

• Heres the form
• ltform name"myForm" action"JavaScriptAnswer.htm"
  onsubmit"return validate()"gt
• Enter a value from 1 to 5
• ltinput type"text" name"myNum"gt
• ltBRgt
• ltinput type"submit"gt
• lt/formgt

11
Form Validation

• Heres the JavaScript to validate
• function validate()
• f document.myForm
• v f.myNum.value
• if (v gt 0 v lt 6)
• return true
• else
• alert(Invalid Number! Please reenter")
• return false

12
FormManipulation

• ltform name"myForm" action"JavaScriptAnswer.htm"gt
  
• What state do you want to work in
• ltselect name"state" onchange"statechange()"gt
• ltoptiongtIndianalt/optiongt
• ltoptiongtIllinoislt/optiongt
• ltoptiongtCalifornialt/optiongt
• lt/selectgt
• ltBRgt
• What city do you want to work in
• ltselect name"city"gt
• ltoptiongtIndianapolislt/optiongt
• ltoptiongtSouth Bendlt/optiongt
• ltoptiongtFort Waynelt/optiongt
• lt/selectgt
• ltBRgt
• ltinput type"submit"gt
• lt/formgt

• You can change form elements based upon previous
  entry.
• Use the onchange HTML attribute.
• Consider this HTML

13
FormManipulation

• switch (choiceNum)
• case 0 //Indiana
• c.options0.text "Indianapolis"
• c.options1.text "South Bend"
• c.options2.text "Fort Wayne"
• break
• case 1 // This one is Illinois
• c.options0.text "Chicago"
• c.options1.text "Champagne"
• c.options2.text "Springfield"
• break
• case 2 // This one is California
• c.options0.text "Los Angeles"
• c.options1.text "San Fransisco"
• c.options2.text "San Diego"
• break

• Now look at the statechange function
• function statechange()
• f document.myForm
• s f.state
• c f.city
• choiceNum s.selectedIndex
• newState s.optionschoiceNum.text
• alert ("Choice is changed to " choiceNum ",
  which is " newState)

14
Radio Buttons

• Say you had the following HTML
• ltbgtWhat do you like best?lt/bgtltbrgt
• ltinput type"radio" name"group1" value"mommy"
  checkedgt mommyltbrgt
• ltinput type"radio" name"group1" value"toys"gt
  toysltbrgt
• ltinput type"radio" name"group1"
  value"monkeys"gt monkeysltbrgt

15
Radio Buttons Continued

• Your JavaScript would look like this
• for (var i0 iltdocument.form.group1.length
  i)
• if (document.form.group1i.checked)
• group1Checked document.form.group1i.value
• if(group1Checked)
• alert("I like " group1Checked " best.")
• else
• alert("You did not make a selection.")