JavaScript I

1
Lecture 2

• JavaScript I
• Introduction to Scripting

2
2.1 Introduction to Scripting

• JavaScript scripting language
• Enhances functionality and appearance
• Client-side scripting
• Makes pages more dynamic and interactive
• Foundation for complex server-side scripting
• Program development
• Program control

3
2.2  Simple Program Printing a Line of Text in a
Web Page

• Inline scripting
• Written in the ltbodygt of a document
• ltscriptgt tag
• Indicate that the text is part of a script
• type attribute
• Specifies the type of file and the scripting
  language use
• writeln method
• Write a line in the document
• Escape character ( \ )
• Indicates special character is used in the
  string
• alert method
• Dialog box

4
welcome.html(1 of 1)
5
welcome2.html(1 of 1)
6
welcome3.html1 of 1
7
welcome4.html1 of 1
8
(No Transcript)
9
2.2  Simple Program Printing a Line of Text in a
Web Page
10
2.3  Dynamic Welcome Page

• A script can adapt the content based on input
  from the user or other variables

11
welcome5.html(1 of 2)
12
welcome5.html(2 of 2)
13
2.3.1  Dynamic Welcome Page
Fig. 2.7 Prompt dialog displayed by the window
objects prompt method.
14
2.3.2 Adding Integers

• Prompt user for two integers and calculate the
  sum
• NaN (not a number)
• parseInt
• Converts its string argument to an integer

15
Addition.html(1 of 2)
16
Addition.html(2 of 2)
17
(No Transcript)
18
2.4  Memory Concepts

• Variable names correspond to locations in the
  computers memory
• Every variable has a name, a type, and a value
• Read value from a memory location
• nondestructive

19
2.4  Memory Concepts
Fig. 2.9 Memory location showing the name and
value of variable number1.
20
2.4  Memory Concepts
Fig. 2.10 Memory locations after values for
variables number1 and number2 have been input.
21
2.4  Memory Concepts
Fig. 2.11 Memory locations after calculating the
sum of number1 and number2.
22
2.5  Arithmetic

• Many scripts perform arithmetic calculations
• Expressions in JavaScript must be written in
  straight-line form

23
2.5  Arithmetic
24
2.5  Arithmetic
25
2.5  Arithmetic
Step 1.
y 2 5 5 3 5 7
(Leftmost multiplication)
2 5 is 10
Step 2.
y 10 5 3 5 7
(Leftmost multiplication)
10 5 is 50
Step 3.
y 50 3 5 7
(Multiplication before addition)
3 5 is 15
Step 4.
y 50 15 7
(Leftmost addition)
50 15 is 65
Step 5.
y 65 7
(Last addition)
65 7 is 72
y
72
(Last operationplace
into
)
Step 6.
y 72
Fig. 2.14 Order in which a second-degree
polynomial is evaluated.
26
2.6  Decision Making Equality and Relational
Operators

• Decision based on the truth or falsity of a
  condition
• Equality operators
• Relational operators

27
2.6  Decision Making Equality and Relational
Operators
?

28
welcome6.html(1 of 3)
29
welcome6.html(2 of 3)
30
welcome6.html(3 of 3)
31
2.6  Decision Making Equality and Relational
Operators
32
Lecture 2

• JavaScript I
• Control Statements A

33
2.7  Algorithms

• Actions to be executed
• Order in which the actions are to be executed

34
2.8  Pseudocode

• Artificial
• Informal
• Helps programmers develop algorithms

35
2.9  Control Structures

• Sequential execution
• Statements execute in the order they are written
• Transfer of control
• Next statement to execute may not be the next one
  in sequence
• Three control structures
• Sequence structure
• Selection structure
• if
• ifelse
• switch
• Repetition structure
• while
• dowhile
• for
• forin

36
2.9  Control Structures

• Flowchart
• Graphical representation of algorithm or portion
  of algorithm
• Flowlines
• Indicate the order the actions of the algorithm
  execute
• Rectangle symbol
• Indicate any type of action
• Oval symbol
• A complete algorithm
• Small circle symbol
• A portion of algorithm
• Diamond symbol
• Indicates a decision is to be made

37
2.9  Control Structures
Fig. 2.18 Flowcharting JavaScripts sequence
structure.
38
2.9  Control Structures
39
2.10  if Selection Statement

• Single-entry/single-exit structure
• Indicate action only when the condition evaluates
  to true

40
2.10  if Selection Statement
41
2.11  ifelse Selection Statement

• Indicate different actions to be perform when
  condition is true or false
• Conditional operator (?)
• JavaScripts only ternary operator
• Three operands
• Forms a conditional expression
• Dangling-else problem

42
2.11  ifelse Selection Statement
43
2.12  while Repetition Statement

• Repetition structure (loop)
• Repeat action while some condition remains true

44
2.12  while Repetition Statement
45
2.13  Formulating Algorithms Case Study 1
(Counter-Controlled Repetition)

• Counter-controlled repetition
• Counter
• Control the number of times a set of statements
  executes
• Definite repetition

46
average.html(1 of 3)
47
average.html(2 of 3)
48
average.html(3 of 3)
49
2.14  Formulating Algorithms with Top-Down,
Stepwise Refinement Case Study 2
(Sentinel-Controlled Repetition)

• Indefinite repetition
• Sentinel value

50
average2.html(1 of 3)
51
average2.html(2 of 3)
52
average2.html(3 of 3)
53
(No Transcript)
54
2.15  Formulating Algorithms with Top-Down,
Stepwise Refinement Case Study 3 (Nested Control
Structures)

• Consider problem
• Make observations
• Top-down, stepwise refinement

55
analysis.html(1 of 2)
56
analysis.html(2 of 2)
57
(No Transcript)
58
(No Transcript)
59
2.16  Assignment Operators

• Compound assignment operators
• Abbreviate assignment expressions

60
2.17  Assignment Operators
61
2.18  Increment and Decrement Operators

• Preincrement or predecrement operator
• Increment of decrement operator placed before a
  variable
• Postincrement or postdecrement operator
• Increment of decrement operator placed after a
  variable

62
2.18  Increment and Decrement Operators
63
increment.html(1 of 2)
64
increment.html(2 of 2)
65
2.18  Increment and Decrement Operators
66
2.19  Note on Data Types

• Loosely typed
• Automatically converts between values of
  different types

67
2.20  Web Resources

• www.javascriptmall.com
• developer.netscape.com/tech/javascript
• www.mozilla.org/js/language

68
Lecture 2

• END of Lecture