JavaScript Control Structures

1
JavaScript Control Structures
2
Control Structures
Flowcharting JavaScripts sequence structure.
3
if/else Selection Structure
Flowcharting the single-selection if structure.
4
if/else Selection Structure
true
false
grade gt 60
print Failed
print Passed
Flowcharting the double-selection if/else
structure.
5
Counter-Controlled Repetition
true
product lt
1000
false
Flowcharting the while repetition structure.
6
Average.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- average.html --gt
• 6 lt!-- Class Average Program --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtClass Average Programlt/titlegt
• 11
• 12 ltscript type "text/javascript"gt
• 13 lt!--
• 14 var total, // sum of
  grades
• 15 gradeCounter, // number of
  grades entered
• 16 gradeValue, // grade value
• 17 average, // average of
  all grades
• 18 grade // grade typed
  by user
• 19

7
Average.htmlProgram Output

• 36 // add 1 to gradeCounter
• 37 gradeCounter gradeCounter 1
• 38
• 39
• 40 // Termination Phase
• 41 average total / 10 // calculate
  the average
• 42
• 43 // display average of exam grades
• 44 document.writeln(
• 45 "lth1gtClass average is "
  average "lt/h1gt" )
• 46 // --gt
• 47 lt/scriptgt
• 48
• 49 lt/headgt
• 50 ltbodygt
• 51 ltpgtClick Refresh (or Reload) to run
  the script againltpgt
• 52 lt/bodygt
• 53 lt/htmlgt

8
Average2.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- Average2.html --gt
• 6 lt!-- Sentinel-controlled Repetition --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtClass Average Program
• 11 Sentinel-controlled
  Repetitionlt/titlegt
• 12
• 13 ltscript type "text/javascript"gt
• 14 lt!--
• 15 var gradeCounter, // number of
  grades entered
• 16 gradeValue, // grade value
• 17 total, // sum of grades
• 18 average, // average of
  all grades
• 19 grade // grade typed
  by user

9
Average2.html

• 36
• 37 // add 1 to gradeCounter
• 38 gradeCounter gradeCounter 1
• 39
• 40 // prompt for input and read
  grade from user
• 41 grade window.prompt(
• 42 "Enter Integer Grade, -1 to
  Quit", "0" )
• 43
• 44 // convert grade from a string
  to an integer
• 45 gradeValue parseInt( grade )
• 46
• 47
• 48 // Termination phase
• 49 if ( gradeCounter ! 0 )
• 50 average total / gradeCounter
  
• 51
• 52 // display average of exam
  grades
• 53 document.writeln(
• 54 "lth1gtClass average is "
  average "lt/h1gt" )

10
Program Output
11
Analysis.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- analysis.html --gt
• 6 lt!-- Analyzing Exam Results --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtAnalysis of Examination
  Resultslt/titlegt
• 11
• 12 ltscript type "text/javascript"gt
• 13 lt!--
• 14 // initializing variables in
  declarations
• 15 var passes 0, // number of
  passes
• 16 failures 0, // number of
  failures
• 17 student 1, // student
  counter
• 18 result // one exam
  result
• 19

12
Analysis.html

• 33 // termination phase
• 34 document.writeln( "lth1gtExamination
  Resultslt/h1gt" )
• 35 document.writeln(
• 36 "Passed " passes "ltbr
  /gtFailed " failures )
• 37
• 38 if ( passes gt 8 )
• 39 document.writeln( "ltbr /gtRaise
  Tuition" )
• 40 // --gt
• 41 lt/scriptgt
• 42
• 43 lt/headgt
• 44 ltbodygt
• 45 ltpgtClick Refresh (or Reload) to run
  the script againlt/pgt
• 46 lt/bodygt
• 47 lt/htmlgt

13
Program Output
14
Increment and Decrement Operators
15
Increment.html

• 1 lt?xml version "1.0"?gt
• 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"
• 3 "http//www.w3.org/TR/xhtml1/DTD/xhtml1-st
  rict.dtd"gt
• 4
• 5 lt!-- increment.html
  --gt
• 6 lt!-- Preincrementing and Postincrementing
  --gt
• 7
• 8 lthtml xmlns "http//www.w3.org/1999/xhtml"gt
  
• 9 ltheadgt
• 10 lttitlegtPreincrementing and
  Postincrementinglt/titlegt
• 11
• 12 ltscript type "text/javascript"gt
• 13 lt!--
• 14 var c
• 15
• 16 c 5
• 17 document.writeln(
  "lth3gtPostincrementinglt/h3gt" )
• 18 document.writeln( c )
  // print 5
• 19 // print 5 then increment

16
Program Output
17
Split()

• The split method is a handy way to "split" a
  string into two or more parts based on a
  character that divides the parts.
• The character that divides the parts could be
  many things -- a comma, a slash, a symbol ( ),
  or another of your choice.

18
Split() example
ltSCRIPT languageJavaScriptgt function
divide_string() var where_is_mytool"home/myto
ol/mytool.cgi" var mytool_arraywhere_is_mytool
.split(/) alert(mytool_array0
mytool_array1 mytool_array2)
lt/SCRIPTgt ltFORMgt ltINPUT TYPEbutton onClickd
ivide_string() valueGo!gt lt/FORMgt Split.html
19
End of Lecture

• Next time, more JavaScript!