LESSON 2: CONTROL STRUCTURES

JAVASCRIPT

CONTROL STRUCTURES

• CONTROL STRUCTURES• – ALLOWS US TO CHANGE THE ORDERING OF HOW THE STATEMENTS IN

OUR PROGRAMS ARE EXECUTED

TWO TYPES OF CONTROL STRUCTURES

• – DECISION CONTROL STRUCTURES• ● ALLOWS US TO SELECT SPECIFIC SECTIONS OF CODE TO BE

EXECUTED• – REPETITION CONTROL STRUCTURES• ● ALLOWS US TO EXECUTE SPECIFIC SECTIONS OF THE CODE A

NUMBER OF TIMES

DECISION CONTROL STRUCTURES

• – JAVASCRIPT STATEMENTS THAT ALLOWS US TO SELECT AND EXECUTE SPECIFIC BLOCKS OF CODE WHILE SKIPPING OTHER SECTIONS

• TYPES:• – IF-STATEMENT• – IF-ELSE-STATEMENT• – IF-ELSE IF-STATEMENT

IF-STATEMENT

• – SPECIFIES THAT A STATEMENT (OR BLOCK OF CODE) WILL BE EXECUTED IF AND ONLY IF A CERTAIN BOOLEAN STATEMENT IS TRUE.

IF-STATEMENT HAS THE FORM:

• IF( BOOLEAN_EXPRESSION )• STATEMENT;

• OR• IF( BOOLEAN_EXPRESSION ){• STATEMENT1;• STATEMENT2;• }

CONDITIONAL CODE

• IF ( CONDITION){

• //CODE GOES HERE• }

IF-STATEMENT FLOWCHART

SAMPLE PROGRAM2:

• VAR GRADE = 68;• IF( GRADE > 60 ){• DOCUMENT.WRITE("CONGRATULATIONS!");• DOCUMENT.WRITE("YOU PASSED!");• }

CODING GUIDELINES

1. THE BOOLEAN_EXPRESSION PART OF A STATEMENT SHOULD EVALUATE TO A BOOLEAN VALUE. THAT MEANS THAT THE EXECUTION OF THE CONDITION SHOULD EITHER RESULT TO A VALUE OF TRUE OR A FALSE.

• 2. INDENT THE STATEMENTS INSIDE THE IF-BLOCK.• FOR EXAMPLE,• IF( BOOLEAN_EXPRESSION ){• //STATEMENT1;• //STATEMENT2;• }

IF-ELSE STATEMENT

• – USED WHEN WE WANT TO EXECUTE A CERTAIN STATEMENT IF A CONDITION IS TRUE, AND A DIFFERENT STATEMENT IF THE CONDITION IS FALSE.

IF-ELSE STATEMENT HAS THE FORM:

• IF( BOOLEAN_EXPRESSION ){• STATEMENT1;• STATEMENT2;• . . .• }• ELSE{• STATEMENT3;• STATEMENT4;• . . .• }

SAMPLE PROGRAM:

• VAR GRADE = 68;

• IF( GRADE > 60 )• DOCUMENT.WRITE("CONGRATULATIONS!");

• ELSE• DOCUMENT.WRITE("SORRY YOU FAILED");

SAMPLE PROGRAM2:

• VAR GRADE = 68;

• IF( GRADE > 60 ){• DOCUMENT.WRITE("CONGRATULATIONS!");• DOCUMENT.WRITE("YOU PASSED!");• }• ELSE{• DOCUMENT.WRITE("SORRY YOU FAILED");• }

CODING GUIDELINES:

• 1. TO AVOID CONFUSION, ALWAYS PLACE THE STATEMENT OR• STATEMENTS OF AN IF OR IF-ELSE BLOCK INSIDE {}.• 2. YOU CAN HAVE NESTED IF-ELSE BLOCKS. THIS MEANS THAT YOU• CAN HAVE OTHER IF-ELSE BLOCKS INSIDE ANOTHER IF-ELSE BLOCK.• FOR EXAMPLE,• IF( BOOLEAN_EXPRESSION ){• IF( BOOLEAN_EXPRESSION ){• //SOME STATEMENTS HERE• }• }• ELSE{• //SOME STATEMENTS HERE• }

EQUALITY

• = ASSIGNMENT OPERATOR• == COMPARING EQUALITY … IF THE VALUE IS THE SAME

• === STRICT EQUALITY ,VALUE AND DATA TYPE MUST BE THE SAME

SAMPLE CODE:

• VAR AMOUNT =500;• IF(AMOUNT<1000){• ALERT(“IT’S LESS THAN 1000");• }•

SAMPLE CODE:

• VAR GRADE =75;• IF(GRADE<75){• ALERT(“CONGRATULATIONS!");• }• ELSE{• ALERT(“SORRY,YOU FAILED”);•

• }•

SAMPLE CODE:

• VAR A =5;• VAR B ="5";

• IF(A==B){ • ALERT("YES THEY ARE EQUAL");• }

• ELSE{ • ALERT("YES THEY ARE NOT EQUAL");

• }

IF-ELSE-ELSE IF STATEMENT:

• ● THE STATEMENT IN THE ELSE-CLAUSE OF AN IF-ELSE BLOCK CAN BE ANOTHER IF-ELSE STRUCTURES.

• ● THIS CASCADING OF STRUCTURES ALLOWS US TO MAKE MORE• COMPLEX SELECTIONS.• ● THE STATEMENT HAS THE FORM:

• IF( BOOLEAN_EXPRESSION1 )• STATEMENT1;• ELSE IF( BOOLEAN_EXPRESSION2 )• STATEMENT2;• ELSE• STATEMENT3;

SAMPLE PROGRAM:

• VAR GRADE = 68; • IF( GRADE > 90 ){• ALERT("VERY GOOD!"); • } • ELSE IF( GRADE > 60 ){ • ALERT(" GOOD!"); • } • ELSE{ • ALERT("SORRY YOU FAILED");• }

EXERCISE

• /*CREATE A SCRIPT THAT WILL COMPUTE THE REAL ESTATE TAX, GIVEN THE FOLLOWING FORMULAS:

• A.)IF VALUE OF REAL ESTATE IS LESS THAN 250,001.00, TAX IS 5% OF REAL ESTATE VALUE.

• B.) IF VALUE OF REAL ESTATE IS BETWEEN 250, 001.00 TO 500,000, TAX IS 10% OF THE REAL ESTATE VALUE.

• C.)IF MORE THAN 500,000 TAX IS 15% OF THE REAL ESTATE VALUE.*/

EXERCISE

• /*AN EMPLOYEE’S WEEKLY WORKING HOURS IS 40. IF AN EMPLOYEE EXCEEDS 40 HOURS, IT IS CONSIDERED OVERTIME. CREATE A SCRIPT THAT WILL INSPECT THE NUMBER OF HOURS WORKED BY EMPLOYEE AND HIS/HER HOURLY RATE AND PRINT THE GROSS PAY AND OVERTIME PAY RENDERED, IF THERE’S NO OT PAY TO PRINT, PRINT ONLY THE GROSS PAY. TO COMPUTE FOR THE GROSS PAY OF THE EMPLOYEE, MULTIPLY THE NUMBER OF HOURS WORKED BY HIS/HER HOURLY RATE PLUS HIS/HER OT PAY. OT HOURS ARE TIME RENDERED BY EMPLOYEE OVER 40 HOURS. THE OVERTIME HOURS RENDERED SHOULD BE COMPUTED BY USING 150% OF HIS HOURLY RATE*/

EXERCISE

• /*CREATE A SCRIPT THAT WILL CHECK THE NUMBER AND PRINT EITHER ODD OR EVEN*/

EXERCISE

• /*CREATE A SCRIPT THAT WILL ASSESS WHICH OF THE 3 NUMBERS INSTANTIATED IS THE HIGHEST*/

LOGICAL AND/OR

• IF(A==B && C==D)

• IF(A==B || C==D)

EXERCISE:

• GRADE:

• 90 – 100 = “EXCELLENT”• 80 – 89 = “GOOD JOB”• 60 – 79 = “STUDY HARDER”• 59 – BELOW = “SORRY YOU FAILED”

MODULUS OPERATOR : %

• VAR NUM = 3; • VAR MOD= NUM% 2;

• IF(MOD==0){ • ALERT("EVEN");• } • ELSE{• ALERT("ODD");• }

UNARY OPERATOR

• INCREMENT • A++;• ++A;

• DECREMENT• A--;• --A;

WHILE LOOP

• VAR A =1;

• WHILE(A<10){• DOCUMENT.WRITE("SHA"); • A++;

• }

DO WHILE

• VAR A=1;

• DO {• DOCUMENT.WRITE();• A++;• }

• WHILE(A<10);

FOR LOOP

• FOR(I=1; I<5; I++){

• DOCUMENT.WRITE(“I LOVE JAVASCRIPT”);

• }

SWITCH

• VAR GENDER=“F";• SWITCH(A){• CASE "F":• CONSOLE.LOG("YOU ARE A FEMALE"); • BREAK;

• CASE "M": • CONSOLE.LOG("YOU ARE A MALE");• BREAK;

• }

SWITCH-STATEMENT

• USE THE SWITCH STATEMENT TO SELECT ONE OF MANY BLOCKS OF CODE TO BE EXECUTED.

• SWITCH• – ALLOWS BRANCHING ON MULTIPLE OUTCOMES.• WHERE,• – SWITCH_EXPRESSION• ● IS AN INTEGER OR CHARACTER EXPRESSION

• – CASE_SELECTOR1, CASE_SELECTOR2 AND SO ON,• ● ARE UNIQUE INTEGER OR CHARACTER CONSTANTS

SWITCH STATEMENT HAS THE FORM:• SWITCH( SWITCH_EXPRESSION ){• CASE CASE_SELECTOR1:• STATEMENT1;//• STATEMENT2;//BLOCK 1• BREAK;• CASE CASE_SELECTOR2:• STATEMENT1;//• STATEMENT2;//BLOCK 2• BREAK;• :• DEFAULT:• STATEMENT1;//• STATEMENT2;//BLOCK N• }

SWITCH-STATEMENT

• WHEN A SWITCH IS ENCOUNTERED,• – JAVASCRIPT FIRST EVALUATES THE SWITCH_EXPRESSION, AND JUMPS

TO THE CASE WHOSE SELECTOR MATCHES THE VALUE OF THE EXPRESSION.

• – THE PROGRAM EXECUTES THE STATEMENTS IN ORDER FROM THAT POINT ON UNTIL A BREAK STATEMENT IS ENCOUNTERED, SKIPPING THEN TO THE FIRST STATEMENT AFTER THE END OF THE SWITCH STRUCTURE.

• – IF NONE OF THE CASES ARE SATISFIED, THE DEFAULT BLOCK IS EXECUTED. TAKE NOTE HOWEVER, THAT THE DEFAULT PART IS OPTIONAL.

SWITCH-STATEMENT

• NOTE:• – UNLIKE WITH THE IF STATEMENT, THE MULTIPLE STATEMENTS ARE

EXECUTED IN THE SWITCH STATEMENT WITHOUT NEEDING THE CURLY BRACES.

• – WHEN A CASE IN A SWITCH STATEMENT HAS BEEN MATCHED, ALL THE STATEMENTS ASSOCIATED WITH THAT CASE ARE EXECUTED. NOT ONLY THAT, THE STATEMENTS ASSOCIATED WITH THE SUCCEEDING CASES ARE ALSO

• EXECUTED.• – TO PREVENT THE PROGRAM FROM EXECUTING STATEMENTS IN THE

SUBSEQUENT CASES, WE USE A BREAK STATEMENT AS OUR LAST STATEMENT.

FLOW CHART

CODING GUIDELINES

• 1. DECIDING WHETHER TO USE AN IF STATEMENT OR A SWITCH STATEMENT IS A JUDGMENT CALL. YOU CAN DECIDE WHICH TO USE, BASED ON READABILITY AND OTHER FACTORS.

• 2. AN IF STATEMENT CAN BE USED TO MAKE DECISIONS BASED ON RANGES OF VALUES OR CONDITIONS, WHEREAS A SWITCH STATEMENT CAN MAKE DECISIONS BASED ONLY ON A SINGLE INTEGER OR CHARACTER VALUE. ALSO, THE VALUE PROVIDED TO EACH CASE STATEMENT MUST BE UNIQUE.

ACTIVITY:

• SWITCH ACTIVITY 1• SWITCH ACTIVITY2

• WINDOW.ONLOAD = INITALL;• FUNCTION INITALL() {• SWITCH(NAVIGATOR.PLATFORM) {• CASE "WIN32":• ALERT("YOU'RE RUNNING WINDOWS");• BREAK;• CASE "MACPPC":• ALERT("YOU HAVE A POWERPC-BASED MAC");BREAK;• CASE "MACINTEL":• CASE "X11":• ALERT("YOU HAVE AN INTEL-BASED MAC"); BREAK;• DEFAULT:• ALERT("YOU HAVE " + NAVIGATOR.PLATFORM); }• }

VARIABLE SCOPE

VARIABLES DEFINED INSIDE A FUNCTION ARE ONLY KNOWN TO THAT FUNCTION, AND VARIABLES DEFINED OUTSIDE A FUNCTION ARE IN THE GLOBAL SCOPED AND ARE KNOWN EVERYWHERE.

VAR MESSAGE = "HI";

FUNCTION SHOWMESSAGE() {

  VAR MESSAGE = "BYE";

  ALERT(MESSAGE);

}

SHOWMESSAGE();

ALERT(MESSAGE);

THE FIRST ALERT WILL SHOW THE MESSAGE VALUE LOCAL TO THE SHOWMESSAGE FUNCTION, THE SECOND ALERT WILL SHOW THE MESSAGE VALUE IN THE GLOBAL SCOPE.