CSC105 Lecture 17 – JS3
Rich Little (A01) Eduard Wisernig (A02)
[email protected] [email protected]http://connex.csc.uvic.ca http://connex.csc.uvic.ca
Phone: 250-472-5752 Phone: 250-472-5722
Lectures: Lectures:
MWR 2:30 – 3:20 pm ECS 125 TWF 8:30 – 9:20 am ECS 116
Office Hours: Office Hours:
F 10:00 a.m. – 12:00 p.m. T 9:30 a.m. – 11:30 a.m.
ECS 516. ECS 617.
Goals
Use selection statements
If, if_else
Learn about more operators
Comparison, Logical
Objects
Date(), Math()
Download and explore a css/html5
template
Learn about the <NAV> tag
Flow Control Statements
Sequential
The default
Automatically execute next instruction
Branching:Selection
skip instructions
if; if-else; switch
Looping:Repetition
repeat instructions
while; do-while; for
Selection Statements
IF Statement
do an alternative code segment or not
IF ELSE Statement
select between two or more alternative
code segments
Selection Statements
if Statement • if else Statement
if (expression ) if (expression )
{statement;} {statement;}
else
{statement;}
Relational Operators
< Less than
<= Less than or equal Highest precedence
> Greater than
> = Greater than or equal
= = Equal
!= Not Equal Lowest precedence
IF ELSE demo
var testit = confirm(“Do you agree with
everything I say?”);
if (testit)
{ document.write("<b> Yes! You already
agreed to everything I say. </b>")}
else
{document.write("<b> No! OK, everyone is
entitled to an opinion.</b>")}
IF ELSE with relational operators
var numberOrdered = 99;
if (numberOrdered <= 100)
{
// calculate retail cost
var total = 19.95 * numberOrdered;
document.write(“Your Total Cost : ” + total);
}
else
{
// calculate wholesale cost
var total = 12.95 * numberOrdered;
document.write(“Your Total Cost : ” + total);
}
Truth Tables (Logical Operators)
AND && (score >= 80) && (score < 90)
Questions: evaluate if
A B A && B score = 95 False
false false false score = 85 true
false true false score = 79 false
true false false
true true true
OR | | (score >= 80) | | (score = =90)
A B A || B Questions: evaluate if
false false false true score = 95
false true true true score = 85
true false true false score = 79
true true true
IF ELSE with Logical AND Operators
if (percentCorrect >= 90 && percentCorrect <=100)
{ document.write(“Grade is A”);}
else if (percentCorrect >=80 && percentCorrect <90)
{document.write(“Grade is B”); }
else if (percentCorrect >=50 && percentCorrect < 80)
{document.write(“Grade is C”); }
else
{document.write (“Grade is -- well, not so good - it is F”);}
IF ELSE with Logical OR Operators
if (color == "red" || color == "blue" || color == "yellow")
{
document.write("<p> This is a primary colour. ");
}
else if(color == "green" || color == "purple" || color == "orange")
{
document.write("<p> This is a secondary colour");
}
else
{
document.write("<p> Not a primary or secondary colour.");
}
Example: IfElse.html
Creating new instances of
Objects
To do something unique to your page you
might need to create an instance of an
object and use it in your own script.
7 constructors we can use
Array( ) Date( ) Function( )
Image( ) Option( ) String( )
Object ( )
EXAMPLE
var thingy = new Object( )
The Date() Object
The Date object is used to work with dates
and times.
Date objects are created with new Date().
We generally instantiate a date object with
var d = new Date();
To extract the hour we use the
getHours() methods
var n = d.getHours();
This returns a number from 0 to 23
Question
Given the code below, which if-else statement(s) will
create the proper alert?
var d = new Date();
var h = d.getHours();
A). B). C).
if (h >= 12) if (h > 12) if (h < 12) then
alert("It is PM"); alert("It is PM"); alert("It is AM");
else else else
alert("It is AM"); alert("It is AM"); alert("It is PM");
D). Both A and C E). Both B and C
The Math Object
Math.xxx
ceil(x) Math.ceil(23.2)
floor(x) Math.floor(25.85)
round(x) Math.round(25.85)
abs(x) Math.abs(-23)
sqrt(x) Math.sqrt(25)
min(x,y) Math.min(23,43)
max(x,y) Math.max(23,43)
pow(x,y) Math.pow(2,8)
Let’s make change example
var price = parseFloat(prompt("Enter the purchase price "," "));
var pennies = 100 - price; price = 44
var amountChange = pennies; pennies = 56
quarters = 2
var quarters = Math.floor(pennies / 25);
pennies = 6
pennies = pennies % 25;
var dimes = Math.floor(pennies / 10); dimes = 0
pennies = 6
pennies = pennies % 10;
nickels = 1
var nickels = Math.floor(pennies / 5); pennies = 1
pennies = pennies % 5;
change_maker.html
Flow Control Statements
Sequential
The default
Automatically execute next instruction
Branching:Selection
skip instructions
if; if-else; switch
Looping:Repetition
repeat instructions
while; do-while; for
Repetition in JavaScript
while
initial_expression;
while (condition_expression)
{
statements;
loop_count;
}
• for
for (initial_expression; condition_expres; loop_count)
{
statements;
}
While example
<SCRIPT Language="JavaScript">
var i =1;
while (i <=3)
{
document.write(" <BR> The value of i is " + i );
i = i + 1;
}
document.write ("<BR> The final value of i is " + i);
</SCRIPT>
var i = 1;
i <= 3 The value of i is i = i + 1;
T The value of i is 1 2 = 1 + 1;
T The value of i is 2 3 = 2 + 1;
T The value of i is 3 4 = 3 + 1;
F While1.html
The final value of i is 4
for loop
5
Syntax: 1 2 4
for(Initialization; Boolean_Expression;After_Loop_Body)
{
loop body; 3
}
Execution sequence:
1. Initialization - executes only the first iteration of
the loop
2. Boolean_Expression - the loop test
3. loop body - execute only if loop test is true
4. After_Loop_Body - typically changes the loop counter
5. Boolean_Expression - Repeat the loop test
