1. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 1 http://www.cs.cityu.edu.hk/~helena Program Structure IV Transfer of control Sequence, selection, repetition structures Selection structure if if-else if… else if … Code formatting Repetition structure while-loop for-loop Nested control structures [Please switch off your phone]

2. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 2 http://www.cs.cityu.edu.hk/~helena Transfer of control Overview : Sometimes, next statement to execute may not be the next one in sequence. For example: line 1. line 2. line 3. line 4. line 5. line 6. line 7. line 8. line 9. line 10. var mark; mark=prompt('What is your mark?',''); if (mark>40) document.write('Passed.'); else {document.write('Failed.'); document.write(' '); document.write('You must take this course again!'); } document.write(' End of report.'); After the checking at line 3 has finished, either line 4 or line 5 will be executed. Suppose line 4 is executed after line 3, we say "the control is transferred to line 4". Suppose line 5 is executed after line 3, we say "the control is transferred to line 5". In case line 4 is executed, then after line 4 is executed, line 10 will be executed. We say "the control is transferred to line 10".

3. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 3 http://www.cs.cityu.edu.hk/~helena Transfer of control Three different kinds of Control Structures (1) Sequence structure Statements execute in the order they are written. This is the default flow unless other control structures are applied. Firstly execute line 1 Then execute line 2 Finally execute line 3 (2) Selection structure The choice of next statement is based on a test: whether a condition is true or not. Example (3) Repetition structure (learn later) A statement (or a set of statements) is to be repeated again and again until the repetition condition becomes false. a = 3; b = 4; alert(a+b); 123123 var count=1; while (count<=10) {document.write('hello '); count++; } 1234512345 if (mark>40) document.write('pass'); else document.write('fail'); 12341234

4. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 4 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if statement The if statement if (condition) statement-to-be-executed; One whole if statement If the condition is true, then statement-to-be-executed will be executed. If the condition is not true (false), then statement-to-be-executed will not be executed. Must have a pair of outer brackets: if (..)  this is wrong!! Outer brackets should NOT be omitted.  if (mark > 80)  if mark > 80  if ( mark 100 )  if (mark 100)  if ( (mark 100) ) alert('invalid mark');  this is OK!!  this is OK too!! brackets around “mark 100” are optional

5. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 5 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if statement if (condition) {.. some statements.. } One whole if statement A compound statement: a sequence of statements grouped by braces { and } if (mark<=40) { document.write('Failed.'); document.write(' '); document.write('Please retake.'); } Example: To execute 2 or more statements under a condition, use braces to group them as a compound statement. Start mark<=40 Output ‘Failed’ True End False Output ‘ ’ Output ‘Please..’

6. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 6 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if statement (Recall 3ProgramStructureII.ppt slide #17) Sometimes we apply a checking at the beginning of a function: /*Check the mark, show the grade*/ function sayTheGrade(mark) { if ( (mark 100) ) {alert("wrong mark"); return; } if (mark>80) alert('A'); … } Handle abnormal cases: If it is abnormal, just say the error and quit the function immediately. Under normal cases, remaining code will continue. Start (mark 100) Output “wrong mark” True End Handle normal cases False

7. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 7 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if statement In normal cases (like below), the code after the whole if statement does not depend on the condition. if (mark > 40) document.write("Congratulations! You've passed! "); document.write("Good-bye!"); In the above, the code document.write("Good-bye!"); does not belong to the if statement. "Good-bye!" will be shown no matter whether the mark is passed or not. Try to draw the flowchart:

8. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 8 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if statement End of the whole if statement if (mark > 40) document.write("Congratulations!"); document.write("You've passed! "); The whole if statement is ended when the first semi-colon is found. Examples: if (mark > 40) document.write("Congratulations!"); document.write("You've passed! "); End of the whole if statement In each of the above, the code document.write("You've passed! "); does not belong to the if statement anymore. Therefore "You've passed!" will be shown no matter whether the mark is passed or not. To correct, use braces “{..}” to enclose all involved statements. Wrong output

9. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 9 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if statement Do NOT put a semi-colon after the condition. End of the whole if statement This code does not belong to the if statement anymore. This greeting will be shown no matter whether the mark is passed or not. if (mark > 40); document.write("Congratulations! You've passed! "); Wrong output

10. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 10 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if..else statement The if..else statement if (condition) statement-I; else statement-II; One whole if-else statement If the condition is true, then statement-I will be executed, statement-II will not be executed. If the condition is not true (false), then statement-II will be executed, statement-I will not be executed. Start condition False End True Statement-IIStatement-I

11. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 11 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if..else statement The if..else statement if (condition) statement-I; else statement-II; One whole if-else statement If 2 or more statements have to be executed in place of statement-I (or statement-II), then they should be in form of a compound statement, ie. grouped by brackets { and }. if (condition) {.. some statements.. } else statement-II; if (condition) statement-I; else {.. some statements.. } if (condition) {.. some statements.. } else {.. some statements.. }

12. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 12 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if..else statement Control structures can be nested. For example: if (condition A) if (condition B) statement-I-I else statement-I-II else statement-II; Another one if-else statement if (female==true) if (married) document.write('Mrs.'); else document.write('Miss'); else document.write('Mr.'); if (condition A) statement-I; else if (condition B) statement-II-I else statement-II-II if (condition A) if (condition B) statement-I-I else statement-I-II else if (condition C) statement-II-I else statement-II-II We should add additional braces to avoid confusions of matching between else and if. Example: if (female==true) { if (married) document.write('Mrs.'); else document.write('Miss'); } else document.write('Mr.'); Improved version

13. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 13 http://www.cs.cityu.edu.hk/~helena Transfer of control – The if..else if.. statement (Recall 3ProgramStructureII.ppt slide #21) A special form of the nested if..else statement is based on parallel conditions like: if (tutorialNumber==1) room='CSC-D'; else if (tutorialNumber==2) room='CSC-K'; else if (tutorialNumber==3) room='CSC-B'; else if (tutorialNumber==4) room='CSC-A'; else alert('Wrong number'); To better represent the parallel relationship among the cases, We may align them as: if (tutorialNumber==1) room='CSC-D'; else if (tutorialNumber==2) room='CSC-K'; elseif (tutorialNumber==3) room='CSC-B'; elseif (tutorialNumber==4) room='CSC-A'; else alert('Wrong number'); No matter which style is being used, the indentations of lines should be consistent. [indentation means the positioning of the first character in a line.]

14. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 14 http://www.cs.cityu.edu.hk/~helena Code Formatting if (female==true) { if (married) document.write('Mrs.'); else document.write('Miss'); } else document.write('Mr.'); Difficult to read and find out errors. Usually, 1.(Recall 4ProgramStructureIII.ppt slide #8) '}' should align with the beginning of the control structure (if, else, function etc..). For ‘{', both ways in figures 2 and 3 are okay. 2.Additional { and } can be added for better clarity. 3.else should align with the matching if or else if. 4.The if(..), else, and else if(..) parts should occupy whole lines. statement-to-be-executed should start on a separate line. if (female==true) { if (married) document.write('Mrs.'); else document.write('Miss'); } else {document.write('Mr.'); } if (female==true) { if (married) document.write('Mrs.'); else document.write('Miss'); } else { document.write('Mr.'); } or Code Formatting : Consistent positioning/indentation Make your code easy to read. -- Relationship between statements is clear Make it easier to find out errors. -- Easier to match beginning and ending braces Figure 1 Figure 2 Figure 3

15. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 15 http://www.cs.cityu.edu.hk/~helena The while statement (while-loop) while (condition) statement-to-be-executed; One whole while statement Transfer of control – Repetition structure (while-loop) 1.If the condition is not true (false), then statement-to-be-executed will not be executed, and the whole while statement is ended. 2.Otherwise statement-to-be-executed will be executed. 3.1 and 2 are repeated until the condition becomes false. Explanation: Start condition True End False Statement-to- be-executed

16. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 16 http://www.cs.cityu.edu.hk/~helena The while statement (while-loop) while (condition) statement-to-be-executed; Note that: If the condition is already false at the very beginning, statement-to-be-executed will not be executed and the whole while statement is ended immediately. The while (condition) line is executed one time more than statement-to-be-executed. Reason: the last time of checking obtains a false condition that ends the while-loop. Don't type a semi-colon after the while part like while (condition) ;  what will happen? while (condition) ; - means while the condition is true, nothing is to be done. - just keep on checking the condition only. Can it stop? Transfer of control – Repetition structure (while-loop) Start condition True End False Statement-to- be-executed

17. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 17 http://www.cs.cityu.edu.hk/~helena Example 1: Display 10 lines of "hello" : line 1: count is set to 1 line 2: "count<=10" is checked (it is true) line 3: document.write(..) shows "1 hello" line 4: "count++; " is done (count becomes 2) line 2: "count<=10" is checked (it is true) line 3: document.write(..) shows "2 hello" line 4: "count++; " is done (count becomes 3) line 2: "count<=10" is checked (it is true) line 3: document.write(..) shows "3 hello" line 4: "count++; " is done (count becomes 4).. line 4: "count++; " is done (count becomes 10) line 2: "count<=10" is checked (it is true) line 3: document.write(..) shows "10 hello" line 4: "count++; " is done (count becomes 11) line 2: "count<=10" is checked (it is false) line 6: alert('End'); is done => the dialog shows "End". var count=1; while (count<=10) {document.write(count + ' hello '); count++; } alert('End'); 1. 2. 3. 4. 5. 6. Transfer of control – Repetition structure (while-loop) Questions:1. How many times lines 1, 2, 3, 4, 6 are executed? 2. What is the value of count after the while-loop is finished? End

18. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 18 http://www.cs.cityu.edu.hk/~helena Example 2: Display the first 10 square numbers starting from 1*1 var i=1; var square=1; while (i<=10) {document.write(i + '*' + i + ' is ' + square + ' '); i++; square = i*i; } 1. 2. 3. 4. 5. 6. 7. Transfer of control – Repetition structure (while-loop) Example 3: Display all square numbers between 100 and 200 var i=10; var square=100; while (square<200) {document.write(i + '*' + i + ' is ' + square + ' '); i++; square = i*i; } 1. 2. 3. 4. 5. 6. 7.

19. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 19 http://www.cs.cityu.edu.hk/~helena Transfer of control – Repetition structure (for-loop) The for statement (for-loop) for (pre-statement; condition; post-statement) loop-statement; 1.Execute pre-statement 2.Check the condition. If it is not true (false), then the whole for statement is ended. 3.Otherwise loop-statement will be executed, followed by post-statement 4.2 and 3 are repeated until the condition becomes false. Explanation: Start condition True End False loop-statement pre-statement post-statement for-loop will not appear in test/exam of this course

20. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 20 http://www.cs.cityu.edu.hk/~helena Transfer of control – Repetition structure (for-loop) The for statement (for-loop) for (pre-statement; condition; post-statement) loop-statement; Note that: The pre-statement is executed exactly once (not depend on the initial true/false value of the condition. The condition is checked one time more than loop-statement and post-statement Reason: the last time of checking obtains a false condition that ends the loop. Like while-loops, don't type a semi-colon after for(...) like for (..); Start condition True End False loop-statement pre-statement post-statement for-loop will not appear in test/exam of this course

21. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 21 http://www.cs.cityu.edu.hk/~helena var count=1; while (count<=10) {document.write(count + ' hello '); count++; } alert('End'); for-loop is usually used if we know the number of times of looping. The previous examples for while-loops can be rewritten as: Transfer of control – Repetition structure (for-loop) var count; for (count=1;count<=10;count++) {document.write(count + ' hello '); } alert('End'); for (pre-statement; condition; post-statement) loop-statement; 1.Run pre-statement 2.Check the condition. If false, then finish 3.Otherwise run loop-statement, then post-statement 4.Repeat 2 and 3 until the condition becomes false for-loop will not appear in test/exam of this course

22. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 22 http://www.cs.cityu.edu.hk/~helena A control structure (if-else, while, or for-loop etc..) can contain one or more control structures, that can contain further control structures. A simple example is: To show the first 100 square numbers starting from 1*1, 10 numbers in a row. Design: if i equals 10, 20, 30,.., then add a line break after displaying the square. Nested Control Structures var i=1; var square=1; while (i<=100) {document.write(square + ' '); if (i%10==0) { document.write(' '); } i++; square = i*i; }

23. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 23 http://www.cs.cityu.edu.hk/~helena Nested Control Structures var i=1; var square=1; document.write(' '); while (i<=100) { /*if it is first cell of a row, ie. i=1,11,21,etc.. write */ if (i%10==1) document.write(' '); /*write the ith cell*/ document.write(' '+square + ' '); /*if it is last cell of a row, ie. i=10,20,30,etc.. write */ if (i%10==0) document.write(' '); /*prepare i and square for next iteration*/ i++; square = i*i; } document.write(' '); To show the first 100 square numbers starting from 1*1, 10 numbers in a row, in an HTML table.

24. (CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 5. Program Structure IV - 24 http://www.cs.cityu.edu.hk/~helena Summary Transfer of control Sequence structure Selection structure Repetition structure Selection structure if if-else if… else if … Code formatting Repetition structure while-loop for-loop Nested control structures