Λογισμικό & κατασκευή λογ/κού

2 Δεκ 2013 (πριν από 4 χρόνια και 5 μήνες)

144 εμφανίσεις

1
ITEC136
ITEC136
Concepts
Concepts
Week 2 –Software Life Cycle
1
Week 2
Week 2
Module 2: Software Life Cycle
Module 2: Software Life Cycle
Week 2 –Software Life Cycle
2

Weekly Recitation Time Set
Weekly Recitation Time Set

See Week 1 Recording or PDF on
See Week 1 Recording or PDF on
FTP site
FTP site

http://cs.franklin.edu/~crossmid/201
http://cs.franklin.edu/~crossmid/201
3
3
-
-
Fa
Fa
-
-
ITEC136/PDF/
ITEC136/PDF/
Week 2 –Software Life Cycle
3
Week 1 Review
Week 1 Review

HTML documents
HTML documents

Elements (tags)
Elements (tags)

Attributes
Attributes

Entities
Entities

Inline and external JavaScript
Inline and external JavaScript
Week 2 –Software Life Cycle
4
Wiki Access
Wiki Access

http://franklinitec136.pbworks.com/
http://franklinitec136.pbworks.com/

Interaction on the Wiki is the first
Interaction on the Wiki is the first
stop if you have a question!
stop if you have a question!

Possibly answered in a previous post
Possibly answered in a previous post

Other students may respond sooner
Other students may respond sooner

Monitored by myself
Monitored by myself
2
Week 2 –Software Life Cycle
5
Good Reflection Papers
Good Reflection Papers

FTP site in PDF folder
FTP site in PDF folder

"ITEC136ReflectionPaperTriggerQuesti
"ITEC136ReflectionPaperTriggerQuesti
ons.PDF"
ons.PDF"

http://cs.franklin.edu/~crossmid/2013
http://cs.franklin.edu/~crossmid/2013
-
-
Fa
Fa
-
-
ITEC136/PDF/
ITEC136/PDF/
Week 2 –Software Life Cycle
6
Week 2 Overview
Week 2 Overview

Describe each step in the Software
Describe each step in the Software
Development Life Cycle
Development Life Cycle

Declare, define, and use variables in
Declare, define, and use variables in
JavaScript
JavaScript

Describe arithmetic, relational, and
Describe arithmetic, relational, and
logical operators in terms of their
logical operators in terms of their
data types
data types
ITEC136
ITEC136
Concepts
Concepts
Week 2 –Software Life Cycle
7
Software Life Cycle
Software Life Cycle
Week 2 –Software Life Cycle
8
SDLC
SDLC

S
S
oftware
oftware
D
D
evelopment
evelopment
L
L
ife
ife
C
C
ycle
ycle

Why Use Formal Methodologies?
Why Use Formal Methodologies?

Increase chances of success
Increase chances of success

Reduce risks
Reduce risks
3
Week 2 –Software Life Cycle
9
SDLC
SDLC

Many methodologies exist
Many methodologies exist

All have common activities
All have common activities

Determining what the customer wants
Determining what the customer wants

Converting real
Converting real
-
-
world customer language
world customer language
into an abstract model suitable for
into an abstract model suitable for
computers
computers

Converting model into executable program
Converting model into executable program

Validating the behavior of the code against
Validating the behavior of the code against
the customer's expectations
the customer's expectations

Repairing any defects discovered (inclusive
Repairing any defects discovered (inclusive
Week 2 –Software Life Cycle
10
Waterfall SDLC
Waterfall SDLC
4
Week 2 –Software Life Cycle
13
Waterfall
Waterfall

Analysis/Design
Analysis/Design
Requirements
Analysis and
Design
Implementation
Testing
Maintenance

Analysis and Design
Analysis and Design

Determine architecture
Determine architecture

System
System

Software
Software

Determine what is done in software
Determine what is done in software

Create abstract models (
Create abstract models (
no code
no code
)
)

High
High
-
-
level and low
level and low
-
-
level
level
Week 2 –Software Life Cycle
14
Waterfall
Waterfall
-
-
Implementation
Implementation
Requirements
Analysis and
Design
Implementation
Testing
Maintenance

Implementation
Implementation

Create Algorithms and flowcharts
Create Algorithms and flowcharts

Write Code using
Write Code using

Functions (methods) (Week 3)
Functions (methods) (Week 3)

Control structures
Control structures

selection statements
selection statements

if
if
and
and
if..else
if..else
(Week 4)
(Week 4)

Repetition
Repetition

Looping statements (Week 6 & 7)
Looping statements (Week 6 & 7)

Objects (Week 9 & 13)
Objects (Week 9 & 13)
Week 2 –Software Life Cycle
15
Waterfall
Waterfall
-
-
Testing
Testing
Requirements
Analysis and
Design
Implementation
Testing
Maintenance

Testing
Testing

Validates code
Validates code
two
two
ways
ways

That it does what it should do
That it does what it should do

Functional requirements
Functional requirements

That it doesn
That it doesn

t do what it shouldn
t do what it shouldn

t do
t do

Non
Non
-
-
functional requirements
functional requirements

Graceful failure
Graceful failure

Error recovery
Error recovery
Week 2 –Software Life Cycle
16
Waterfall
Waterfall
-
-
Maintenance
Maintenance
Requirements
Analysis and
Design
Implementation
Testing
Maintenance

Maintenance
Maintenance

Ongoing development to
Ongoing development to

Fix bugs
Fix bugs

Can be more than 80% of man
Can be more than 80% of man
-
-
hours
hours
5
Week 2 –Software Life Cycle
17
Requirements
Analysis and
Design
Implementation
Testing
Maintenance

Simplicity
Simplicity

Easy to benchmark
Easy to benchmark

Clearly delineated milestones
Clearly delineated milestones
Week 2 –Software Life Cycle
18
6
Week 2 –Software Life Cycle
21

Changing requirements
Changing requirements

Early problem discovery
Early problem discovery

Always working software
Always working software

Extensive feedback
Extensive feedback

Problems
Problems

Architecture can suffer
Architecture can suffer
7
Week 2 –Software Life Cycle
25

Boxes
Boxes

In the real world:
In the real world:

Some boxes are empty
Some boxes are empty

Some boxes hold things
Some boxes hold things

Box contents can be replaced
Box contents can be replaced

Some boxes hold more than one thing
Some boxes hold more than one thing
Variables & Boxes Analogy
Variables & Boxes Analogy
Week 2 –Software Life Cycle
26
Variables & Boxes Analogy
Variables & Boxes Analogy

Variables
Variables

In programming:
In programming:

Some variables are empty
Some variables are empty

Some variables hold one item
Some variables hold one item

Variable contents can be replaced
Variable contents can be replaced

Some variables hold more than one thing
Some variables hold more than one thing
Arrays hold more than
Arrays hold more than
one variable (week 9)
one variable (week 9)
Week 2 –Software Life Cycle
27

Variables have 4 key properties
Variables have 4 key properties

Have a
Have a
name
name

Have a
Have a
value
value

Have a
Have a
data type
data type
based on the
based on the
value
value

Have
Have
scope
scope
Variable Properties
Variable Properties
Week 2 –Software Life Cycle
28

Recall: JavaScript is
Recall: JavaScript is
case
case
-
-
sensitive
sensitive
Declaring a variable
Declaring a variable
var
ageNow;
// Value in ageNowis undefined initially
var
–a JavaScript
keyword
to creates a
variable to hold data
Definition:
keyword –a
word the language reserves
for a specific use or action
ageNow-an
identifier
Definition:
identifier –the name you
assign to a variable
Create descriptive
names for your
variables!
8
Week 2 –Software Life Cycle
29

Declaring multiple variables on 1 line
Declaring multiple variables on 1 line

Use commas, end with semi
Use commas, end with semi
-
-
colon
colon
Declaring a variable
Declaring a variable
var
ageNow;
// Value in ageNowis undefined
var
ageNow, colorChoice;
Each JavaScript statement should end with a semi-colon. If
ignored, may interfere with
Week 2 –Software Life Cycle
30

Defining a variable
Defining a variable

an initial value
an initial value
Variables Assignment
Variables Assignment
var
ageNow;
ageNow= 5;
The equal sign is the assignment operator.Sets the left hand side to "hold" or "contain" the
right hand side. In this case the variable ageNow
holds 5
Week 2 –Software Life Cycle
31

Defining a variable
Defining a variable

an initial value
an initial value
Variables Assignment
Variables Assignment
var
ageNow;
ageNow= 5;
A variable can be an
l-value.
l-values
can appear on the left hand side of an
assignment statement. Many operators and
keywords cannot be
l-values
Week 2 –Software Life Cycle
32

Defining a variable
Defining a variable

an initial value
an initial value
Variables Assignment
Variables Assignment
var
ageNow;
ageNow= 5;
5 is an
r-value
only
r-values
appear on the right hand
side of an assignment statement
Note: Variables can be both
l-value
and
r-value
9
Week 2 –Software Life Cycle
33

Defining a variable
Defining a variable

an initial value
an initial value

Variables Assignment
Variables Assignment
var
ageNow= 5;
var
ageNow;
// 2 slashes comments the rest of the line.
ageNow= 5;
// Good for brief comments after code.
/* Anything enclosed in single or double quotes is
literal text. This is another way to create comments.
*/
Week 2 –Software Life Cycle
34
Declare
Declare
All
All
Variables
Variables

JavaScript will create variables automatically if
JavaScript will create variables automatically if
var
var
missing!
missing!

Omit
Omit
var
var
and the variable becomes global
and the variable becomes global
(accessible from everywhere)
(accessible from everywhere)

Not good programming style!
Not good programming style!

POINTS LOST FOR ALLOWING
POINTS LOST FOR ALLOWING
AUTOMATIC VARIABLE DECLARATION
AUTOMATIC VARIABLE DECLARATION

Global variables should be
Global variables should be

Limited in number
Limited in number

Expressly created outside of
Expressly created outside of
all
all
functions
functions

Created at the top of JS file using
Created at the top of JS file using
var
var
Week 2 –Software Life Cycle
35
Declare
Declare
All
All
Variables
Variables

Always use
Always use
var
var
to create variables
to create variables

Examples, below is valid JavaScript!
Examples, below is valid JavaScript!
var
var
well
well
=
=
2
2
;
;
clean
clean
=
=
7
7
;
;
well
well
=
=
well
well
+
+
clean +
clean +
1
1
;
;
Good way!use
var
to declare a variable
var
.
But actually legal
JavaScript, cleanbecomes a
global
variable always
.
Unclear and unexpected!
Should be:
var
clean = 7;
What does this line of code do? What is “in”well afterwards?
Week 2 –Software Life Cycle
36
Declare
Declare
All
All
Variables
Variables

More examples
More examples
var
var
state
state
=
=
"FL"
"FL"
;
;
var
var
isOver40
isOver40
;
;
isOver40
isOver40
=
=
true
true
;
;
Assign
isOver40
isOver40
the
boolean value
true
The boolean values of
true
or
false
are not
strings! They are
reserved words in
JavaScript
state is a string variable
Strings are alwaysenclosed in
double or single quotes
10
Week 2 –Software Life Cycle
37
Variable Naming Rules
Variable Naming Rules

Rules for variable names (identifiers)
Rules for variable names (identifiers)

Cannot be a JavaScript reserved word
Cannot be a JavaScript reserved word
(See Reserved Word Table, Gosselin text)
(See Reserved Word Table, Gosselin text)

-
-
Z, a
Z, a
-
-
z, _ , \$]
z, _ , \$]

Subsequent characters can also include
Subsequent characters can also include
[0
[0
-
-
9]
9]

No spaces allowed
No spaces allowed
Week 2 –Software Life Cycle
38
Variables and Data Types
Variables and Data Types

Rules for variable names (identifiers)
Rules for variable names (identifiers)
Example
Example
Valid or invalid?
Valid or invalid?
If invalid, why?
If invalid, why?
aSampleID
aSampleID
???
???
???
???
First_Name
First_Name
1forTheMoney
1forTheMoney
\$
\$
big&tall
big&tall
oc
oc
event
event
class
class
Week 2 –Software Life Cycle
39
Variables and Data Types
Variables and Data Types

Rules for variable names (identifiers)
Rules for variable names (identifiers)
Example
Example
Valid or invalid?
Valid or invalid?
If invalid, why?
If invalid, why?
aSampleID
aSampleID
OK
OK
First_Name
First_Name
OK
OK
1forTheMoney
1forTheMoney
Invalid
Invalid
No start w/ num
No start w/ num
\$
\$
big&tall
big&tall
Invalid
Invalid
& is reserved
& is reserved
oc
oc
event
event
Invalid
Invalid
No spaces
No spaces
class
class
Invalid
Invalid
Reserved word
Reserved word
Week 2 –Software Life Cycle
40
Informal Variable Naming Rules
Informal Variable Naming Rules

Should not be too similar to a built
Should not be too similar to a built
-
-
in
in
identifier, ex: document, window
identifier, ex: document, window

Should use
Should use
camelCase
camelCase
Conventions, a
Conventions, a
mixture of lower and upper characters
mixture of lower and upper characters

varvarvarvar
varvarvarvar
thisIsACamelCaseVar
thisIsACamelCaseVar
;
;

Should be descriptive of their purpose
Should be descriptive of their purpose
varvarvarvar
varvarvarvar
firstName
firstName
, age;
, age;
11
Week 2 –Software Life Cycle
41
Data Types
Data Types

Each variable has a
Each variable has a
type
type
that
that
determines which operations can be
determines which operations can be
performed on it
performed on it

Ex: numbers can have arithmetic
Ex: numbers can have arithmetic
performed on them, strings can be
performed on them, strings can be
Week 2 –Software Life Cycle
42
JavaScript Data Types
JavaScript Data Types

Data types
Data types
Data Type
Data Type
Example
Example
Description
Description
Integers
Integers
42424242
42424242
A whole number
A whole number
-
-
2
2
53
53
through 2
through 2
53
53
Floating
Floating
point
point
6.023E23
6.023E236.023E23
6.023E23
6.023E236.023E236.023E236.023E23
A number with a decimal point
A number with a decimal point
Boolean
Boolean
truetruetruetrue
truetruetruetrue
Either
Either
true
true
or
or
false
false
String
String
"
"""
"
"""
loremloremloremlorem
loremloremloremlorem
ipsumipsumipsumipsum
ipsumipsumipsumipsum
"
"""
"
"""
A sequence of character data
A sequence of character data
Undefined
Undefined
Declared but uninitialized variable
Declared but uninitialized variable
Null
Null
nullnullnullnull
nullnullnullnull
The
The

empty
empty

object
object
Object
Object
new Date()new Date()new Date()new Date()
new Date()
new Date()new Date()
new Date()
Any user or built
Any user or built
-
-
in object
in object
Week 2 –Software Life Cycle
43
Data Types in JavaScript
Data Types in JavaScript

Type is automatically set by
Type is automatically set by
usage
usage

typeof
typeof
operator returns description
operator returns description

-
-
only
only
var
var
age
age
,
,
name
name
,
,
sum
sum
;
;
age
age
=
=
33
33
;
;
name
name
=
=
"Jim"
"Jim"
;
;
sum
sum
=
=
age
age
+
+
4
4
;
;
After executing this line, the type of all 3 variables is
"undefined"
Now the type of
age is
"number"
typeof
name ==
"string"
typeof
sum ==
"number"
Week 2 –Software Life Cycle
44
Variables and Data Types
Variables and Data Types

typeof
typeof
operator
operator
var
lastName
=
"Smith"
;
var
numDependents
=
3
;
var
dateOfBirth
=
new
Date
(
1973
,
11
,
29
);
var
canVote
=
true
;
document
.
writeln
(
typeof
lastName
);
// prints "string"
document
.
writeln
(
typeof
numDependents
);
// prints "number"
document
.
writeln
(
typeof
dateOfBirth
);
// prints "object"
document
.
writeln
(
typeof
canVote
);
// prints "boolean"
Wee
k 2 Stud
y
Notes example

testing cod
e using
typeof
12
ITEC136
ITEC136
Concepts
Concepts
Week 2 –Software Life Cycle
45
JavaScript Operators
JavaScript Operators
Week 2 –Software Life Cycle
46
Operators
Operators
-
-
Arithmetic
Arithmetic

Arithmetic operators
Arithmetic operators

math
math
Operator
Operator
Description
Description
+
+
Adds two numbers yielding their sum
Adds two numbers yielding their sum
-
-
(binary)
(binary)
Subtracts two numbers yielding their difference
Subtracts two numbers yielding their difference
*
*
Multiplies two numbers yielding their product
Multiplies two numbers yielding their product
/
/
Divides two numbers yielding the quotient
Divides two numbers yielding the quotient
-
-
(unary)
(unary)
Negates a single number
Negates a single number
%
%
Divides two numbers yielding the remainder
Divides two numbers yielding the remainder
% is modulus or modulo. Used frequently in some
programming tasks. Hint: % useful in homework 2
13
Week 2 –Software Life Cycle
49
Order of Operations
Order of Operations

Order
Order

Parenthesis First
Parenthesis First

Exponents (powers, roots)
Exponents (powers, roots)

Multiply & Division (left
Multiply & Division (left
-
-
to
to
-
-
right)
right)

-
-
to
to
-
-
right)
right)

Source
Source

http://www.mathsisfun.com/operation
http://www.mathsisfun.com/operation
-
-
order
order
-
-
pemdas.html
pemdas.html
Higher
Order
PEMDAS

Parent
hes
is first

E
xponents (powers, roots)

Mult
ip
ly &
Division (left
-to
-right)

Subtraction (l
eft
-
to
-right)
PEMDAS

P
arenthesis f
irst

E
xponents (
p
o
wers, roots)

M
ultiply &
D
ivision (l
eft
-to
-right)

A
ddition &
S
ubtraction (
left
-to
-right)
Week 2 –Software Life Cycle
50
JavaScript Operators
JavaScript Operators

Relational Operators
Relational Operators

comparison/equality
comparison/equality
Operator
Operator
Description
Description
<
<
Less than
Less than
<=
<=
Less than or equal to
Less than or equal to
>
>
Greater than
Greater than
>=
>=
Greater than or equal to
Greater than or equal to
==
==
Equal to
Equal to
!=
!=
Not equal to
Not equal to
===
===
Equal to and of same type
Equal to and of same type
!==
!==
Not equal to or not of same type
Not equal to or not of same type
Using == is a
comparison
yielding
true
or
false
.This is
NOTassigning
a value
Week 2 –Software Life Cycle
51
JavaScript Operators
JavaScript Operators

Relational Operators
Relational Operators

comparison/equality
comparison/equality
Operator
Operator
Description
Description
<
<
Less than
Less than
<=
<=
Less than or equal to
Less than or equal to
>
>
Greater than
Greater than
>=
>=
Greater than or equal to
Greater than or equal to
==
==
Equal to
Equal to
!=
!=
Not equal to
Not equal to
===
===
Equal to and of same type
Equal to and of same type
!==
!==
Not equal to or not of same type
Not equal to or not of same type
These are all of the same precedence
The relational
operations are higher
precedence than the
equality operators
Week 2 –Software Life Cycle
52
JavaScript Operators
JavaScript Operators

Relational Operators
Relational Operators

comparison
comparison
Expression
Expression
Result
Result
3
3
<
<
21
21
???
???
3
3
>=
>=
3
3
"3"
"3"
==
==
3
3
"3"
"3"
===
===
3
3
"3"
"3"
!==
!==
3
3
14
Week 2 –Software Life Cycle
53
JavaScript Operators
JavaScript Operators
-
-
Boolean
Boolean

Relational Operators
Relational Operators

comparison
comparison
Expression
Expression
Result
Result
3
3
<
<
21
21
true
true
3
3
>=
>=
3
3
true
true
"3"
"3"
==
==
3
3
true
true
"3"
"3"
===
===
3
3
false
false
"3"
"3"
!==
!==
3
3
true
true
These results are boolean
values, not
strings! Recall
that boolean
values are
either true or
false ONLY
Week 2 –Software Life Cycle
54
JavaScript Operators
JavaScript Operators
-
-
Boolean
Boolean

Logical Operators
Logical Operators

Always
Always
yield
yield
boolean value (true or false)
boolean value (true or false)
Returns true if false,
Returns true if false,
or false if true
or false if true
Logical NOT
Logical NOT
!
!
Logical OR
Logical OR
Logical AND
Logical AND
Description
Description
Operator
Operator
Description
Description
&&
&&
Returns true if both
Returns true if both
true, otherwise false
true, otherwise false
||
||
Returns true if
Returns true if
either true,
either true,
otherwise false
otherwise false
Higher
Precedence
Week 2 –Software Life Cycle
55
Operators
Operators

Boolean Examples
Boolean Examples

Logical Operators
Logical Operators

Yield boolean
Yield boolean

Complete table
Complete table

see Gosselin book
see Gosselin book
Expression
Expression
Value
Value
true || false
true || false
true
true
true && !false
true && !false
true
true
true || !(!false)
true || !(!false)
true
true
Boolean
Precedence:
! && ||
Week 2 –Software Life Cycle
56
More Boolean Examples
More Boolean Examples

Evaluating row 1:
Evaluating row 1:
true || false && false
true || false && false
true || (false && false)
true || (false && false)
true || false
true || false
true
true

Precedence & Associativity table
Precedence & Associativity table

see Gosselin book
see Gosselin book
Expression
Expression
Value
Value
true || false && false
true || false && false
???
???
true && false || false
true && false || false
???
???
!(true || false && !false)
!(true || false && !false)
???
???
Boolean
Precedence:
! && ||
Precedence demands these
parenthesis, even though
associativity is left to right
&& has higher precedence than ||
15
Week 2 –Software Life Cycle
57
More Boolean Examples
More Boolean Examples

Evaluating row 2:
Evaluating row 2:

Precedence & Associativity table
Precedence & Associativity table

see Gosselin book
see Gosselin book
Expression
Expression
Value
Value
true || false && false
true || false && false
true
true
true && false || false
true && false || false
???
???
!(true || false && !false)
!(true || false && !false)
Boolean
Precedence:
! && ||
Week 2 –Software Life Cycle
58
More Boolean Examples
More Boolean Examples

Evaluating row 3:
Evaluating row 3:

Precedence & Associativity table
Precedence & Associativity table

see Gosselin book
see Gosselin book
Expression
Expression
Value
Value
true || false && false
true || false && false
true
true
true && false || false
true && false || false
false
false
!(true || false && !false)
!(true || false && !false)
???
???
Boolean
Precedence:
! && ||
Week 2 –Software Life Cycle
59
More Boolean Precedence
More Boolean Precedence

Precedence & Associativity table
Precedence & Associativity table

see Gosselin book
see Gosselin book
Expression
Expression
Value
Value
true || false && false
true || false && false
true
true
true && false || false
true && false || false
false
false
!(true || false && !false)
!(true || false && !false)
false
false
Boolean
Precedence:
! && ||
Week 2 –Software Life Cycle
60
Precedence / Associativity
Precedence / Associativity

Ensure mastery of both operator precedence
Ensure mastery of both operator precedence
and associativity
and associativity

Associativity of both && and || is "left to right"
Associativity of both && and || is "left to right"
for multiple occurrences of the
for multiple occurrences of the
same
same
operator
operator

But, && has higher precedence than ||
But, && has higher precedence than ||

For expressions without parenthesis having
For expressions without parenthesis having
both && and ||, precedence requires
both && and ||, precedence requires
evaluation of && first
evaluation of && first

Precedence "trumps" associativity
Precedence "trumps" associativity
16
Week 2 –Software Life Cycle
61
Valid Operators by Data Type
Valid Operators by Data Type

Data types determine valid operators
Data types determine valid operators

Can add, subtract, multiply, and divide
Can add, subtract, multiply, and divide
numbers and floating points but not
numbers and floating points but not
Booleans
Booleans

Can compare numbers and strings
Can compare numbers and strings
directly but not objects
directly but not objects

Can use
Can use
and
and
,
,
or
or
, and
, and
not
not
on Booleans,
on Booleans,
but not strings
but not strings
Week 2 –Software Life Cycle
62
JavaScript Operators
JavaScript Operators

Compound assignment examples
Compound assignment examples
varvarvarvar
varvarvarvar
gender
gender
=
=
"male"
"male"
;
;
varvarvarvar
varvarvarvar
age
age
=
=
17
17
;
;
varvarvarvar
varvarvarvar
riskFactor
riskFactor
=
=
(
(
gender
gender
==
==
"male"
"male"
)
)
&&
&&
(
(
age
age
<=
<=
21
21
);
);
//
//
riskFactor
riskFactor
set to true
set to true
age
age
=
=
22
22
;
;
riskFactor
riskFactor
=
=
(
(
gender
gender
==
==
"male"
"male"
)
)
&&
&&
(
(
age
age
<=
<=
21
21
);
);
//
//
riskFactor
riskFactor
set to false
set to false
Week 2 –Software Life Cycle
63
JavaScript Operators
JavaScript Operators

Increment (++) and decrement (
Increment (++) and decrement (
--
--
)
)

Shortcut for adding 1 to a variable
Shortcut for adding 1 to a variable

Two flavors: Pre
Two flavors: Pre
-
-
vs. post
vs. post
-
-

Pre
Pre
-
-
: ++ or
: ++ or
--
--
operation on variable first,
operation on variable first,
then yield the variable value in any
then yield the variable value in any
operation in the line of code
operation in the line of code

Post
Post
-
-
: yield the variable value, ++ or
: yield the variable value, ++ or
--
--
operation on the variable
operation on the variable
only
only
before
before
moving to next statement
moving to next statement
Week 2 –Software Life Cycle
64
JavaScript Operators
JavaScript Operators

Increment (++) and decrement (
Increment (++) and decrement (
--
--
)
)

Assume x is 10 initially for each row
Assume x is 10 initially for each row
Example
Example
New value of y
New value of y
New value of x
New value of x
y = x++
y = x++
-
-
5;
5;
???
???
???
???
y = ++x
y = ++x
-
-
5;
5;
y = x
y = x
--
--
-
-
4;
4;
y =
y =
--
--
x
x
-
-
4;
4;
17
Week 2 –Software Life Cycle
65
JavaScript Operators
JavaScript Operators

Increment (++) and decrement (
Increment (++) and decrement (
--
--
)
)

Assume x is 10 initially for each row
Assume x is 10 initially for each row
Example
Example
New value of y
New value of y
New value of x
New value of x
y = x++
y = x++
-
-
5;
5;
5
5
11
11
y = ++x
y = ++x
-
-
5;
5;
???
???
???
???
y = x
y = x
--
--
-
-
4;
4;
y =
y =
--
--
x
x
-
-
4;
4;
Week 2 –Software Life Cycle
66
JavaScript Operators
JavaScript Operators

Increment (++) and decrement (
Increment (++) and decrement (
--
--
)
)

Assume x is 10 initially for each row
Assume x is 10 initially for each row
Example
Example
New value of y
New value of y
New value of x
New value of x
y = x++
y = x++
-
-
5;
5;
5
5
11
11
y = ++x
y = ++x
-
-
5;
5;
6
6
11
11
y = x
y = x
--
--
-
-
4;
4;
???
???
???
???
y =
y =
--
--
x
x
-
-
4;
4;
Week 2 –Software Life Cycle
67
JavaScript Operators
JavaScript Operators

Increment (++) and decrement (
Increment (++) and decrement (
--
--
)
)

Assume x is 10 initially for each row
Assume x is 10 initially for each row
Example
Example
New value of y
New value of y
New value of x
New value of x
y = x++
y = x++
-
-
5;
5;
5
5
11
11
y = ++x
y = ++x
-
-
5;
5;
6
6
11
11
y = x
y = x
--
--
-
-
4;
4;
6
6
9
9
y =
y =
--
--
x
x
-
-
4;
4;
???
???
???
???
Week 2 –Software Life Cycle
68
JavaScript Operators
JavaScript Operators

Increment (++) and decrement (
Increment (++) and decrement (
--
--
)
)

Assume x is 10 initially for each row
Assume x is 10 initially for each row
Example
Example
New value of y
New value of y
New value of x
New value of x
y = x++
y = x++
-
-
5;
5;
5
5
11
11
y = ++x
y = ++x
-
-
5;
5;
6
6
11
11
y = x
y = x
--
--
-
-
4;
4;
6
6
9
9
y =
y =
--
--
x
x
-
-
4;
4;
5
5
9
9
Placing ++ or --before or after makes a
big difference
in the calculation of y. But not the final value in x
18
Week 2 –Software Life Cycle
69
Operators
Operators
-
-
Ternary
Ternary

Conditional or Ternary operator
Conditional or Ternary operator

Similar to IF function in Excel
Similar to IF function in Excel

Dynamically builds a portion of a line
Dynamically builds a portion of a line
of code based upon a
of code based upon a
condition
condition

Can be thought of as building one
Can be thought of as building one
line of code based upon a boolean
line of code based upon a boolean
decision
decision
Week 2 –Software Life Cycle
70
Operators
Operators
-
-
Ternary
Ternary

Ternary syntax:
Ternary syntax:
(
(
condition
condition
)
)
?
?
true_part
true_part
:
:
false_part
false_part

All
All
( ) ? :
( ) ? :
above needed for ternary
above needed for ternary

condition
condition

expression to evaluate
expression to evaluate

true_part
true_part

use when
use when
condition
condition
is true
is true

false_part
false_part

use when
use when
condition
condition
is false
is false

An example
An example

The ternary operator
allows a choice between
two JavaScript fragments.
Week 2 –Software Life Cycle
71
Ternary Decomposed
Ternary Decomposed
var
val
,
num
=
50
;
val
=(
num
<
11
)?
100
:
10
;
(
"valis "
+
val
);
true_part
false_part
if this
condition
evaluates to true, then the entire operator is
replaced with the
true_part
like this:
val
=
100
;
But if
condition
evaluates false (as in this example), the ternary
replaces with
false_part
like this:
val
=
10
;
Show a labeled message
of the contents of val
Week 2 –Software Life Cycle
72
Ternary Example
Ternary Example

Ternary operation can work with
Ternary operation can work with
strings too!
strings too!
var
number
=
5
;
var
evenOrOdd
=(
number
%
2
==
0
)?
"even"
:
"odd"
;
(
"Thenumber was "
+
evenOrOdd
);
19
ITEC136
ITEC136
Concepts
Concepts
Week 2 –Software Life Cycle
73
Homework 2
Homework 2
Optional
Optional

Due 1 week from
Due 1 week from
Sunday
Sunday
Week 2 –Software Life Cycle
74
Using prompt function
Using prompt function

Getting user input into variables
Getting user input into variables
var
firstName
=
window.prompt
(
);
var
age
=
window.prompt
(
);
prompt()is a function in the built-in
windowobject that opens an input
dialog box with the first parameter
as a visual cue. Second parameter is
the default value. prompt()always
returns a string.
Week 2 –Software Life Cycle
75
Entire prompt() Example
Entire prompt() Example
<!DOCTYPE
<!DOCTYPE
HTML
HTML
PUBLIC
PUBLIC
"
"
-
-
//W3C//DTD HTML 4.01//EN"
//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
"http://www.w3.org/TR/html4/strict.dtd">
<
<
html
html
>
>
<
<
>
>
<
<
title
title
>
>
Prompt
Prompt
Demo
Demo
</
</
title
title
>
>
</
</
>
>
<
<
body
body
>
>
<
<
script
script
type
type
=
=
"text/
"text/
javascript
javascript
">
">
var
varvarvar
varvarvarvar
firstName
firstName
=
=
prompt
prompt
(
(
"Enter
"Enter
, "Joe"
, "Joe"
);
);
var
varvarvar
varvarvarvar
age
age
=
=
prompt
prompt
(
(
"Enter
"Enter
);
);
</
</
script
script
>
>
</
</
body
body
>
>
</
</
html
html
>
>
Week 2 –Software Life Cycle
76
Homework 2 Hints
Homework 2 Hints

Due at the end of week 3
Due at the end of week 3

Key Operators & built
Key Operators & built
-
-
in objects
in objects

Division operator /
Division operator /

% (modulus) operator
% (modulus) operator

key to determining
key to determining
remaining coins
remaining coins

window.prompt()
window.prompt()

Since prompt() returns a string, not a number,
Since prompt() returns a string, not a number,
investigate
investigate
parseInt()
parseInt()

document.writeln()
document.writeln()

use to output to HTML
use to output to HTML
stream, see W01 PDF
stream, see W01 PDF

Looking to round down or up? Check out the
Looking to round down or up? Check out the
functions in the
functions in the
Math
Math
object
object
20
Week 2 –Software Life Cycle
77
Homework 2
Homework 2

Always deliver a complete solution!
Always deliver a complete solution!

HTML + JavaScript + images + CSS
HTML + JavaScript + images + CSS

Post Q&A and get hints on wiki
Post Q&A and get hints on wiki

Homework 2 Questions
Homework 2 Questions

Homework 2 Hints
Homework 2 Hints

http://franklinitec136.pbworks.com/
http://franklinitec136.pbworks.com/

Use wiki's Navigator pane on right to
Use wiki's Navigator pane on right to
access Homework folder
access Homework folder
Week 2 –Software Life Cycle
78

Homework 1 due this Sunday
Homework 1 due this Sunday

Proctor selection Complete?
Proctor selection Complete?

See Course web site for readings for
See Course web site for readings for
next week
next week

Weekly Reflection Journaling
Weekly Reflection Journaling

"ah
"ah
-
-
ha!" moments
ha!" moments

Live Recitation Participation or Recording Summary
Live Recitation Participation or Recording Summary

Sunday
Sunday
Week 2 –Software Life Cycle
79
Questions?
Questions?
Week 2 –Software Life Cycle
80
Break
Break
-
-
out Session
out Session

Create a simple
Create a simple
HTML page with
HTML page with
embedded
embedded
JavaScript
JavaScript

JavaScript should
JavaScript should
prompt for your
prompt for your
name and output it
name and output it
to the HTML page
to the HTML page