project 6: working with if statements essentials for design javascript level one michael brooks

44
Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Upload: todd-mcknight

Post on 01-Apr-2015

232 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Project 6: Working with If Statements

Essentials for DesignJavaScript

Level OneMichael Brooks

Page 2: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Objectives

Add Boolean values Use if statements Compare mathematical

values Contrast string values

Page 3: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 3

Objectives (continued)

React to user choices Work with logical

operators Create complex decision

statements

Page 4: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 4

Why Would I Do This?

In computer languages, specific characters or phrases (called comparison operators) make comparisons among/between values

A decision statement evaluates a condition: one set of actions occurs if the statement is true a different set of actions occurs if the statement

is false Decision statements are also known as

flow-of-control statements

Page 5: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 5

Why Would I Do This? (continued)

Using pseudo-code, you could describe a decision statement in the following manner:

Comparison operators and decision statements are useful whenever you need to make decisions based on changing information

if (a condition is true) then perform a set of actions, else (if the condition is false) do nothing

Page 6: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 6

Visual Summary

Decision statements allow JavaScript code to branch off in a number of directions, depending on the variables in the script

A flowchart is simply a diagram that shows how a script progresses during execution After the flowchart is complete, it is usually an

easy task to convert the script to actual code Example of designing a script for an online test, u

sing a flowchart

Page 7: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 8

Visual Summary (continued)

Comparison Operators Are characters or phrases that allow you to

compare two values, and then receive a true or false answer

You can use the comparison operators shown in the table linked below to compare the values

JavaScript comparison operators

Page 8: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 10

Visual Summary (continued)

The == operator is known as the equality operator, since it means “the values are equal”

The != operator is known as the inequality operator, since it means “the values are not equal”

Page 9: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 11

Visual Summary (continued)

Logical Operators In complex comparisons, it is often necessary to

evaluate more than one Boolean value to make a decision

Logical operators are designed to compare two true or false values

Example of using a logical operator

Page 10: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 12

Visual Summary (continued)

Logical AND (&&) operator

Boolean variables

permission=preReqs&&goodStanding;

Page 11: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 13

Visual Summary (continued)

The “&&” is called a logical AND operator, which evaluates whether both variables are set to true The logical AND operator

returns true if (and only if) both variables are set to true

Page 12: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 14

Visual Summary (continued)

The logical OR operator returns a value of true if any of the variables compared is equal to true It only returns a value of

false if all of the variables being compared are equal to false

Page 13: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 15

Visual Summary (continued) The exclusive OR operator (^) returns a

value of true if, and only if, one of the values is true If both values are false, the exclusive OR

statement returns a value of false If both values are true, the exclusive OR

statement is also false Assuming both variables are set to true, the

following statement would return a value of false:

permission=preReqs^goodStanding;

Page 14: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 16

Understanding Boolean Values and Expressions

The term Boolean describes a variable that has one of two possible values (true or false), which are often represented as yes or no, on or off, or 0 or 1

To assign a Boolean value in JavaScript, you can write statements such as:

var testComplete=false;

var waiverSigned=true;

Page 15: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 17

Understanding Boolean Values and Expressions (continued)

The terms true and false are keywords in the JavaScript language They have special meaning to the JavaScript

interpreter, which means you cannot use them as variable names

Whenever you make a decision, you usually use a Boolean comparison of one sort or another

Page 16: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 18

Understanding Boolean Values and Expressions (continued) Assign Boolean Values

You can assign the number 0 (for false) or the number 1 (for true) to variables to represent Boolean values

JavaScript and most computer languages will evaluate these values as if they were true or false

Example of assigning Boolean values

Page 17: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 20

If Statements and Mathematical Values

The if statement is the simplest flow-of-control statement in JavaScript

if (a condition is true) then complete an action;

if (tickets>=3)document.write("Your license is suspended!");

The pseudocode and JavaScript corresponding to an IF statement containing mathematical values

Page 18: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 21

If Statements and Mathematical Values (continued)

If you want to execute more than one statement if the condition is true, you can use pointy brackets to denote a code block, as illustrated in the following example:

if (tickets>=3) {document.write("Your license is suspended!");document.write("You have to go to driving school!");}

Page 19: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 22

If Statements and Mathematical Values (continued) You can use the keyword else to note an

alternative statement or segment of statements to perform if the condition evaluates to false

if (tickets>=3) { document.write("Your license is suspended!"); document.write("You have to go to driving school!");}else

{ document.write("If you get 3 tickets, your license will be suspended");}

Page 20: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 23

If Statements and Mathematical Values (continued) If Statements and Mathematical Comparisons

If statements that involve mathematical manipulation are probably the easiest decision statements to understand

if (answerGiven==correctAnswer) {alert("Your answer is correct!");

}else {

alert("Your answer is incorrect!"); score=score-10;

}

Page 21: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 24

If Statements and Mathematical Values (continued)

If statements that make mathematical comparisons use: comparison operators, including: greater than (>) less than (<) less than or equal to (<=) greater than or equal to (>=)

Comparison operators also consist of : The equality operator (==) The inequality operator (!=)

Page 22: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 25

If Statements and Mathematical Values (continued)

Use the Equality Operator You can use the equality

operator to make a comparison

Page 23: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 26

If Statements and Mathematical Values (continued)<html><head><title>equality.html</title></head><body><script language="JavaScript">// create two variablesnumber1=3; number2=3;// compare two variablesif (number1==number2) { alert("The numbers are equal!");}</script></body></html>

When the two variables are equal, the (number1==number2) condition is true and the alert command is triggered

Page 24: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 27

If Statements and Mathematical Values (continued) Use Greater Than Comparisons

You can use the greater than operator in a comparison

This comparison is commonly used in programming applications to determine whether a variable has reached a specific limit

You can use the greater than or equal to (>=) comparison operator when you want to know if the value on the left is greater or the same as the value on right

Page 25: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 28

If Statements and Mathematical Values (continued)<html><head><title>greaterthan.html</title></head><body><script language="JavaScript">numberOne=5; numberTwo=7;if (numberOne>numberTwo{

alert(numberOne+" is greater than “ +numberTwo); }

else {alert(numberOne+" is not greater than “ +numberTwo); }

</script></body></html>

This code compares the two numbers to test whether the first number is greater than the second number

Page 26: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 29

If Statements and Mathematical Values (continued) Make Less Than Comparisons

<html><head><title>greaterthan.html</title></head><body><script language="JavaScript">numberOne=5; numberTwo=7;if (numberOne<numberTwo{

alert(numberOne+" is greater than “ +numberTwo); }

else {alert(numberOne+" is not greater than “ +numberTwo); }

</script></body></html>

This code compares the two numbers to test whether the first number is less than the second number

Page 27: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 30

If Statements and Mathematical Values (continued) Add Not Equal To <html><head><title>notequalto.html</title></head><body><script language="JavaScript">document.write("The number must not be 5 to be accepted<br>"); numberOne=5;document.write("The number is "+numberOne+"<br>");// check to see if number is 5if (numberOne!=5) {

document.write("The number is not 5"); } </script></body></html>

The message in the if statement does not display, since the number is equal to 5

Page 28: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 31

Comparing String Values Many decision statements

involve the comparison of string values

Since JavaScript is case sensitive, it is somewhat difficult to compare strings of differing case

Using various text string methods allows you to work around this restriction

Page 29: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 32

Comparing String Values (continued)

Check for Equality You can use the equality operator (==) to

check if to Strings are equal You can use double or single quotes to

denote text strings, as long as they are used in matching pairs

You can write comparisons as name1=="Sue" or name1='Sue'

Example

Page 30: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 34

Comparing String Values (continued)

Consider Case Sensitivity You can use the equality operator (==) to

check if to Strings are equal You can use double or single quotes to

denote text strings, as long as they are used in matching pairs

You can write comparisons as name1=="Sue" or name1='Sue'

Example

Page 31: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 36

Comparing String Values (continued)

Ignore Case in Comparisons You can use string methods in a comparison

you use these methods to avoid creating case-sensitivity issues

Use toUpperCase() or toLowerCase() to avoid situations where users may inadvertently make case-sensitivity errors

Example

Page 32: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 38

Reacting to User Choices

The primary reason to use decision statements is to react to changing conditions as the script is interpreted This often involves the

user’s choices, which guide the decision-making process

Page 33: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 39

Reacting to User Choices (continued)

A user can make choices in a number of different ways: A user can click area on an image to make a

choice A user can click radio buttons or check boxes on

a form to make one or multiple choices A user can enter a value into a prompt box/value

field

Page 34: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 40

Reacting to User Choices (continued)

Confirm a User Choice You can use the confirm() method to allow the

user to confirm his choice if the user clicks OK, the confirm() method returns a

value of true if the user clicks Cancel, the confirm() method

returns a value of false

Example

Page 35: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 42

Reacting to User Choices (continued) Evaluate a Boolean Variable

You can evaluate a variable with Boolean values simply by placing the variable name in the parentheses of the if statement

You can use the confirm() method to gather information from end users

You can use the prompt() method to allow users to enter information when prompted with a question

Example

Page 36: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 44

Working with Logical Operators

Logical operators are comparison operators that compare Boolean values

Did the customer provide proof of insurance?Did the customer pay for the rental car?

if (customer provides insurance AND customer paid) {provide car to customer;

}

if (insuranceProvided && customerPaid) {provideCar();

}

Page 37: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 45

Working with Logical Operators(continued)

Use Logical AND (&&) Example 1 Example 2

Page 38: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 48

Working with Logical Operators(continued)

Use Logical OR (||) You can use the logical OR

operator to make a comparison

The logical OR operator is useful when you want to know if either condition evaluates to true Example 1 Example 2 Example 3

Page 39: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 52

Working with Logical Operators(continued)

Use Exclusive OR (^) The exclusive OR operator returns a value of

true if one and only one of the values is true Programmers typically refer to this operator as

XOR Example 1 Example 2

Page 40: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 55

Working with Logical Operators(continued)

Use Logical NOT (!) The logical NOT operator negates a Boolean

value The logical NOT operator takes the opposite of

the value normally returned by the comparison Example 1 Example 2

Page 41: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 58

Creating Complex Decision Statements

Decision statements often require complex trees of interrelated variables If one variable is true, you may want to evaluate a

second condition, and then perform a specific action if the second condition is also true in this situation, it is useful to nest if statements within

other if statements

Page 42: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 59

Creating Complex Decision Statements (continue)

Use Comments to Enhance Visibility You can add white space and tab spaces to

make complex code easier to read Example 1 Example 2

Page 43: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 62

Creating Complex Decision Statements (continued)

Use Nested If Statements You can nest an if statement within another if

statement Nested statements are often necessary for

complex code solutions Example

Page 44: Project 6: Working with If Statements Essentials for Design JavaScript Level One Michael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 64

Creating Complex Decision Statements (continued)

Add Additional Complexity You can create a script that leads a user

through a complex decision-making process this process allows you to evaluate user decisions

and react accordingly

Example