Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1
Teaching Plan Feedback on Week5 practical Looping statements Week 6 practicals Submission of week1-6 learning log COM311 H Zheng, School of C&M, UUJ 2
Issues observed in Practical Using lecture notes and other reading material Make the function generic Reading list is available on Blackboard COM311 H Zheng, School of C&M, UUJ 3
JavaScript statement structure Sequential statements Looping statements Branch statements COM311 H Zheng, School of C&M, UUJ 4
Sequential statements Example: 1. var x=2; 2. var y=3; 3. var z=0; 4. var z=x+y; 5. document.write("The sum is: " + Z); COM311 H Zheng, School of C&M, UUJ 5
COM311 H Zheng, School of C&M, UUJ 6 Loops Doing things repeatedly – Loop control - Specifies what condition is necessary for the continued execution of the loop – Loop body - Statements that will be repeatedly executed as long as the loop control condition is satisfied – Three types of looping statements in Javascript
1. for Statement Syntax: for (initial expr.; test condition ; update expr.) { JavaScript statements comprising loop body } Example: var sum=0; for (i=1; i<=10; i++){ sum=sum+i; //sum+=i; } COM311 H Zheng, School of C&M, UUJ 7
2. While Statement Syntax: while (condition) { JavaScript statements comprising loop body } Example: var i=1; while(i<=10){ sum+=i; i++; } COM311 H Zheng, School of C&M, UUJ 8
COM311 H Zheng, School of C&M, UUJ 9 3. do…while statement Syntax: do{ JavaScript statements comprising loop body } while (condition); Example: var sum=0; do{ sum+=i; i++; }while(i<=10);
sum10.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!— var sum=0; do{ sum+=i; i++; }while(i<=10); window.alert("The sum is "+sum); //--> How to design a calculator to add …+n, n is the input from the user? COM311 H Zheng, School of C&M, UUJ 10
An example of loops listing2.2.html loop me <!-- for (i=5;i>1;i--){ document.write(i + " bottles of root beer on the wall. "); document.write("You take one down, pour a round. "); } document.write(" There is only one bottle of root beer left. "); document.write(" Now stop drinking all my root beer. "); //--> COM311 H Zheng, School of C&M, UUJ 11
Looping through an array var fruit=[‘apple’, ‘banana’, ‘pear’, ‘peach’]; How to display each fruit in each line? COM311 H Zheng, School of C&M, UUJ 12
Example – loop in array var fruit=["apple","pear","banana","peach"]; for (var i=0;i<4;i++) { document.write(fruit[i] + " "); } COM311 H Zheng, School of C&M, UUJ 13
Using the length property of the array var fruit=["apple","pear","banana","peach"]; for (var i=0; i<fruit.length; i++){ document.write(fruit[i] + " "); } COM311 H Zheng, School of C&M, UUJ 14
Array elements in html: Array object String Radio button Checkbox Selection menu Image sets ….. COM311 H Zheng, School of C&M, UUJ 15
Exercise How to loop into radio button/check box elements? Pay by cash Pay by card by phone by by post //get obj payment var thepayment=document.myform.payment; //using looping to display value of each item, how? COM311 H Zheng, School of C&M, UUJ 16
Summary feedback & response Learning log submission sequential statements looping statements COM311 H Zheng, School of C&M, UUJ 17