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

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

Objectives

Add Boolean values Use if statements Compare mathematical

values Contrast string values


Objectives (continued)

React to user choices Work with logical

operators Create complex decision

statements


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


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


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


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



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”



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



Logical AND (&&) operator

Boolean variables

permission=preReqs&&goodStanding;



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



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


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;


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;


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


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


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


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!");}


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");}


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;

}



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 (!=)



Use the Equality Operator You can use the equality

operator to make a comparison


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


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


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


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


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


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


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



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



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


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


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


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


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


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();

}


Working with Logical Operators(continued)

Use Logical AND (&&) Example 1 Example 2



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



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



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


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


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


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


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

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

Documents