Discussion

1
Discussion 17 JavaScript Programming
2
Text Box
Review namevalue
lttrgt lttdgtlth2gtText Boxlt/h2gt lt/tdgt
lttdgtName ltinput type"text" name"myName"
id"title" size"20" maxlength"30" /gt
lt/tdgt lt/trgt
3
Check Box
Review namevalue
lttrgt lttdgtlth2gtCheck Boxlt/h2gt lt/tdgt lttdgtUS
Citizen ltinput type"checkbox"
checked"checked" name"citizen"
id"citizen" value"US" /gt lt/tdgt lt/trgt
4
Radio Buttons
Review namevalue
lttrgt lttdgtlth2gtRadio Buttonslt/h2gt lt/tdgt
lttdgt ltinput type"radio" name"year"
id"y1" checked"checked"
value"Fresh" /gtFreshman ltinput
type"radio" name"year" id"y2"
value"Soph" /gtSophomore ltinput
type"radio" name"year" id"y3"
value"Jun" /gtJunior ltinput
type"radio" name"year" id"y4"
value"Sen" /gtSenior lt/tdgt lt/trgt
5
Text Area
Review namevalue
lttrgt lttdgtlth2gtText Arealt/h2gtlt/tdgt
lttdgtlttextarea name"address" id"address"
cols"20" rows"10"gtType your address here.
lt/textareagt lt/tdgt lt/trgt
6
Selection List
Review namevalue
lttrgt lttdgtlth2gtSelection Listlt/h2gtlt/tdgt lttdgt
ltselect name"color" id"color" size"1"gt
ltoption value"R" selected"selected"gtredlt/o
ptiongt ltoption value"G"gtgreenlt/optiongt
ltoption value"B"gtbluelt/optiongt
ltoption value"C"gtcyanlt/optiongt ltoption
value"M"gtmagentalt/optiongt ltoption
value"Y"gtyellowlt/optiongt lt/selectgt
lt/tdgt lt/trgt
7
Event Handling
Review
lttrgt lttdgtlth2gtText Boxlt/h2gtlt/tdgt lttdgtTitle
ltinput type"text" name"title" value""
size"20" maxlength"30" onchange"window.a
lert(demoform.title.value)" /gt
lt/tdgt lt/trgt lttrgt lttdgtlth2gtButtonlt/h2gtlt/tdgt
lttdgtltinput type"button" name"go" value"GO!"
onclick"window.alert(demoform.title.value)" /gt
lt/tdgt lt/trgt
8
What is JavaScript?

• JavaScript is a scripting language - a scripting
  language is a lightweight programming language.
• A JavaScript defines lines of executable computer
  code.
• A JavaScript is usually embedded directly in HTML
  pages.
• JavaScript is an interpreted language (means that
  scripts execute without preliminary compilation).
• JavaScript was designed to add interactivity and
  programming to HTML web pages.
• Performs calculations such as totaling the price
  or computing sales tax.
• Verifies data such as with credit card
  applications.
• Adapts the display to user needs.

9
Why JavaScript?

• JavaScript is used in millions of Web pages to
  improve the design, validate forms, and much
  more.
• JavaScript was developed by Netscape and is the
  most popular scripting language on the internet.
• JavaScript works in all major browsers that are
  version 3.0 or higher.
• Everyone can use JavaScript without purchasing a
  license.
• JavaScript is supported by all major browsers,
  like Netscape and Internet Explorer.

10
Basic JavaScript

• The content of the ltscriptgt element is a
  JavaScript program.
• We can use variables and expressions such as,
• Pay payRatehours
• Tax PaytaxRate
• We can use built-in system functions.
• alert(), document.write(), document.writeln()
• Math.random(), Math.round()
• We can write and reuse our own functions

11
What are the variable names?

• lthtmlgtltbodygtltform name"demoform"gt
• lth1gthtml form widgets demolt/h1gt
• title ltinput maxlength"30" name"title" /gtltbr
  /gt
• ltinput type"button" value"go!" name"go"gtltbr
  /gt
• us citizen ltinput type"checkbox"
  checked"checked"
• name"citizen" /gtltbr /gt
• Freshmanltinput type"radio" checked"checked"
  name"year" /gt
• Sophomoreltinput type"radio" name"year" /gt
• Juniorltinput type"radio" name"year" /gt
• Seniorltinput type"radio" name"year" /gtltbr /gt
• lttextarea name"address" rows"10" /gtType your
  address here.lt/textareagtltbr /gt
• ltselect size"1" name"color"gt
• ltoption selected"selected"gtRedlt/optiongt
• ltoptiongtYellowlt/optiongt
• lt/selectgt
• lt/formgtlt/bodygtlt/htmlgt

How many are there?
12
Functions

• A function is a reusable code-block that will be
  executed by an event, or when the function is
  called.
• A function consists of a piece of computation
  that takes 0 or more arguments (input data) and
  returns a value (output data).
• In Javascript, you can make functions yourself,
  and there are also predefined functions.

13
Functions

• To create a function
• function funcName( arg1, arg2, . . . )
• JavaScript Code
• To call a function
• funcName( argExp1, argExp2, . . . )
• Each argument is assigned to each parameter
• The body of the function is executed.

14
Predefined System Functions

• document.write("HTML text")
• Writes its parameter out as if it were HTML
• document.writeln("HTML text")
• Writes one or more HTML expressions, followed by
  a carriage return, to a document in the specified
  window.
• alert("HTML text")
• Used to alert the user
• Can be used to debug program

15
Function Demo
Concatenate Operator

• lthtmlgt
• ltheadgt
• ltscriptgt
• function sayHello()
• alert("Hello " myForm.go.value)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltform name"myForm"gt
• ltinput type"button" name"go" value"GO!"
• onclick"sayHello()" /gt
• lt/formgt
• lt/bodygt
• lthtmlgt

16
Three Programming Constructs
17
Conditional Demo

• function evaluatePay()
• if (myForm.pay.value lt 100)
• alert("You earn less than 100 dollars")
• else
• alert("You earn 100 or more dollars.")
• My Pay ltinput type"text" name"pay"
• onchange"evaluatePay()" /gt

18
Iterative Demo

• function countDown()
• for (i 5 i gt 0 i i - 1)
• alert( i " " i " " i " " i )
• ltinput type"button" value"Count Down"
• onclick"countDown()" /gt

19
Widgets
ltform name"myForm"gtlt/formgt
myForm.myName.value
ltinput type"text" name"myName" size"25" /gt
ltinput type"checkbox" name"clothes" value"Tie"
/gtTie ltinput type"checkbox" name"clothes"
value"Hat" /gtHat ltinput type"checkbox"
name"clothes" value"Coat" /gtCoat
myForm.clothes0.value myForm.clothes0.checked
ltinput type"radio" name"year" value"Soph"
/gtSophomore ltinput type"radio" name"year"
value"Jun" /gtJunior ltinput type"radio"
name"year" value"Sen" /gtSenior
myForm.year1.value my Form.year1.checked
ltselect name"color"gt ltoption
value"R"gtredlt/optiongt ltoption
value"G"gtgreenlt/optiongt ltoption
value"B"gtbluelt/optiongt lt/selectgt
myForm.color.value myForm.color2.value myForm.co
lor2.selected
lttextarea name"myBox" cols"25" rows"2"gt
lt/textareagt
myForm.myBox.value
20
Text Box
?
myForm.myName.value
lttrgt lttdgtlth2gtText Boxlt/h2gt lt/tdgt
lttdgtName ltinput type"text" name"myName"
id"title" size"20" maxlength"30" /gt
lt/tdgt lt/trgt
21
Check Box
?
myForm.citizen.checked
lttrgt lttdgtlth2gtCheck Boxlt/h2gt lt/tdgt lttdgtUS
Citizen ltinput type"checkbox"
checked"checked" name"citizen"
id"citizen" value"US" /gt lt/tdgt lt/trgt
22
Radio Buttons
?
myForm.year0.checked
lttrgt lttdgtlth2gtRadio Buttonslt/h2gt lt/tdgt
lttdgt ltinput type"radio" name"year"
id"y1" checked"checked"
value"Fresh" /gtFreshman ltinput
type"radio" name"year" id"y2"
value"Soph" /gtSophomore ltinput
type"radio" name"year" id"y3"
value"Jun" /gtJunior ltinput
type"radio" name"year" id"y4"
value"Sen" /gtSenior lt/tdgt lt/trgt
23
Text Area
?
myForm.address.value
lttrgt lttdgtlth2gtText Arealt/h2gtlt/tdgt
lttdgtlttextarea name"address" id"address"
cols"20" rows"10"gtType your address here.
lt/textareagt lt/tdgt lt/trgt
24
Selection List
?
myForm.color0.selected
lttrgt lttdgtlth2gtSelection Listlt/h2gtlt/tdgt lttdgt
ltselect name"color" id"color" size"1"gt
ltoption value"R" selected"selected"gtredlt/o
ptiongt ltoption value"G"gtgreenlt/optiongt
ltoption value"B"gtbluelt/optiongt
ltoption value"C"gtcyanlt/optiongt ltoption
value"M"gtmagentalt/optiongt ltoption
value"Y"gtyellowlt/optiongt lt/selectgt
lt/tdgt lt/trgt