Scribd
Upload
73 views

CSC105 Lecture 17 - JS3: Rich Little (A01) Eduard Wisernig (A02)

This document provides information about CSC105 Lecture 17 on JavaScript 3 (JS3). It lists the contact information and office hours for two instructors, Rich Little and Eduard Wisernig. It then outlines the goals of the lecture, which are to use selection statements like if/else, learn about operators like comparison and logical, work with objects like Date and Math, explore a CSS/HTML5 template, and learn about the <NAV> tag. The document proceeds to explain flow control statements, selection statements, logical operators, and examples using if/else, Date and Math objects, and while/for loops.

Uploaded by

Terry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
73 views

CSC105 Lecture 17 - JS3: Rich Little (A01) Eduard Wisernig (A02)

This document provides information about CSC105 Lecture 17 on JavaScript 3 (JS3). It lists the contact information and office hours for two instructors, Rich Little and Eduard Wisernig. It then outlines the goals of the lecture, which are to use selection statements like if/else, learn about operators like comparison and logical, work with objects like Date and Math, explore a CSS/HTML5 template, and learn about the <NAV> tag. The document proceeds to explain flow control statements, selection statements, logical operators, and examples using if/else, Date and Math objects, and while/for loops.

Uploaded by

Terry
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

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

You might also like