ITEC136 ITEC136 Business Programming Business Programming Concepts Concepts

lumpysteerSoftware and s/w Development

Dec 2, 2013 (3 years and 10 months ago)

136 views

1
ITEC136
ITEC136
Business Programming
Business Programming
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
Administrivia
Administrivia


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


Only 5 requested access to Wiki
Only 5 requested access to Wiki


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


Read Questions in this document
Read Questions in this document


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
Business Programming
Business Programming
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
of adding new features)
of adding new features)
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


Translate design into code
Translate design into code


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


Add new features
Add new features


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


Waterfall advantages
Waterfall advantages


Simplicity
Simplicity


Easy to benchmark
Easy to benchmark


Clearly delineated milestones
Clearly delineated milestones
Week 2 –Software Life Cycle
18
Waterfall Disadvantages
Waterfall Disadvantages
6
Week 2 –Software Life Cycle
21
Spiral Advantages/Disadvantages
Spiral Advantages/Disadvantages


Advantages
Advantages


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
debugging! Omit at your risk!
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


Declare and assign initial value
Declare and assign 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
Bad way!Omit
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)


Must start with [A
Must start with [A
-
-
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


Start with lower case letter
Start with lower case letter
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
concatenated (linked together)
concatenated (linked together)
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


Read
Read
-
-
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
Business Programming
Business Programming
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)


Addition & Subtraction (left
Addition & Subtraction (left
-
-
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)

Addition &
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
;
alert
(
"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"
;
alert
(
"Thenumber was "
+
evenOrOdd
);
19
ITEC136
ITEC136
Business Programming
Business Programming
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
(
"Enter your first name", "Joe"
);
var
age
=
window.prompt
(
"Enteryour first name", "Joe"
);
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
>
>
<
<
head
head
>
>
<
<
title
title
>
>
Prompt
Prompt
Demo
Demo
</
</
title
title
>
>
</
</
head
head
>
>
<
<
body
body
>
>
<
<
script
script
type
type
=
=
"text/
"text/
javascript
javascript
">
">
var
varvarvar
varvarvarvar
firstName
firstName
=
=
prompt
prompt
(
(
"Enter
"Enter
your first name"
your first name"
, "Joe"
, "Joe"
);
);
var
varvarvar
varvarvarvar
age
age
=
=
prompt
prompt
(
(
"Enter
"Enter
your age", "40"
your age", "40"
);
);
</
</
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()


read string from user
read string from user


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
Upcoming Deadlines
Upcoming Deadlines


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