JAVASCRIPTLogic and Control

DECISION STRUCTURE

4-2

Decision (selection) structure:if (condition){

statementstatementetc.

}Example:if (age == 15){

document.write(“ you are a fifteen”);}

Boolean Expressions and Relational Operators

4-3

A relational operator (aka comparison operator) determines whether a specific relationship exists between two values.

Table 4-1 Relational operators

Boolean Expressions and Relational Operators

4-4

Examples:if (age > 90)…if (size < 10)…if (sum <= 50)…if (theNumber == 100)…if (x != 100)…

THE IF STATEMENT - BLOCKS

4-5

Examples:if (age > 90){

document.write (“you are a bit old”);}if (size< 10){

document.write (“you are just the right size”);}if (total >= 0){

total += 50;}if (name == “jasmine”){

document.write (“nice name!”);}

The if-else Statement

4-6

if (condition){

statementstatementetc.

}else{

statementstatementetc.

}

THE IF-ELSE STATEMENT

4-7

if (age >= 20){ document.write(“you are an adult”);}else{ document.write(“you are NOT an adult”);}

if (salary <= 10){ document.write(“you need a raise”);}else{ document.write(“you make a fine salary”);}

COMPARING STRINGS

4-8

Concept:

You can compare strings. This allows you to create decision structures that test the value of a string.

If (password == “blahblah”){

document.write(“that is the correct password”);}else{

document.write(“that is the correct password”);}

COMPARING STRINGS

4-9

Other String Comparisons

Figure 4-10 Character codes for the strings 'Mary' and 'Mark'

Figure 4-11 Comparing each character in a string

NESTED DECISION STRUCTURES

4-10

The if-else if -else Statement

if (condition_1) {statementstatementetc.

}else if (condition_2){

statementstatementetc.

}else{

statementstatementetc.

}

NESTED DECISION STRUCTURES

4-11

if (score < 60) {document.write(‘Your grade is F.’);

}else if (score < 70){

document.write( ‘Your grade is D.’);} else if score < 80:{

document.write( ‘Your grade is C.’);} else if score < 90{

document.write( ‘Your grade is B.’);} else {

document.write( ‘Your grade is A.’);}

BUILT IN NUMERIC FUNCTIONS isNaN( ) – determines whether a number

is legalReturns True (if not a number)or False (if it is a number)

NaN is an abbreviation for: Not a Number Examples of nonNumbers:

A stringA number divided by 0

alert(isNaN(4)) will return false alert(isNaN(“four”)) will return true

LOGICAL OPERATORS Logical operators are used to determine

the logic between variables or values. Given that x=6 and y=3, the table

below explains the logical operators:

Operator Description Example

&& and (x < 10 && y > 1) is true

|| or (x==5 || y==5) is false

! not !(x==y) is true

COMPOUND CONDITIONS Many times you will need to check

multiple conditions within the same statement

Logical Operators allow you to check multiple conditions:

Examples:if ((x > 100) && (x < 1000)) …

if (age < 13) || (age > 65) …

HTML DOM INNERHTML PROPERTY

The innerHTML property sets or returns the inner HTML of an element.

We will use it to set error messages on fields

Example:Styling error message#Nerror {color:red;}

The input field with place for error message

<label><input type="text" id=“num1"><span id=“Nerror"></span>

Setting the innerHTML of the span element to conatin error message

document.getElementById(" Nerror ").innerHTML = "Must be numeric";

Condition-Controlled Loops

5-16

A condition-controlled loop uses a true/false condition to control the number of times that it repeats.

while (number < 20) …

while (password != passwordOnFile)…

while (isNaN(ans))…

THE WHILE LOOP: A CONDITION-CONTROLLED LOOP

5-17

while (condition){

statementstatementetc.

}

THE WHILE LOOP: A CONDITION-CONTROLLED LOOP

5-18

•The loop will continue to run as long as count is less than, or equal to 5.

var count = 1; //set count to have a value of 1while (count <= 5) //this is the condition being tested{

document.write(count + "<br />");count++; // this will increment the count by 1

}

If the condition (count <= 5) is true, the statements inside the brackets are executed and then the loop starts over

If the condition is false, the statements inside the brackets are skipped and the program exits the loop

CALCULATING A RUNNING TOTAL

5-19

Programs that calculate the total of a series of numbers typically use two elements:

•A loop that reads each number in the series

•A variable that accumulates the total of the numbers as they are read.

THE FOR LOOP: A COUNT-CONTROLLED LOOP

5-20

for (var=startvalue; var<=endvalue; var=var+increment){

code to be executed…}

var i = 1;

for (i = 1; i <= 5; i++)…

THE FOR LOOP: A COUNT-CONTROLLED LOOP

5-21

• The example below defines a loop that starts with count=0.

• The loop will continue to run as long as count is less than, or equal to 5.

• count will increase by 1 each time the loop runs.

var i=0;for (i=0; i<=5; i++){

document.write("The number is " + i);document.write("<br />");

}

LOOPS AND ARRAYS Loops used extensively when working

with arrays Example:

var fruits = [‘apple’, ‘peach’, ‘orange’];var counter = 0;

while (counter < fruits.length) {document.write(fruits[counter]) + ‘ ‘);counter++;

}

SETTING UP A FUNCTION

function functionName ( ){

some code goes in here….}

function – keyword, tells browser you are declaring a function

functionName – the name you choose to call the function ( ) - place for parameters, extra info the function may

need { - show the beginning of function code } – shows the end of the function code

CALLING FUNCTIONS Functions only execute if they are

called!! Good Practice – place function

definitions in at the top of the head section

You can call a function in the head section or the body section

To call a function, provide the function name and the parameters (if any)

Example:doSomething( );

PARAMETERS

Used to supply 1 or more values to a function Set in the function header inside the parenthesis General format:

function doSomething(var1, var2) //this is a function header

When you make a function “call”, you need to supply the parameters

Example:doSomething(myVar1, myVar2) //this is a function

call

RETURN VALUES Used to return a value from a function

Place the return statement as the last line of the function

The value is returned to the place in the main script where the function was called

You need to save the returned value in a variable

LOCAL VARIABLES When a variable is created by an

assignment statement inside the function, the variable is local to that functionCan be assigned or modified in the functionOnce the function is done (hit the closing

bracket }), variable dies – value cannot be used outside of function

The variable does not exist outside the function!