Download presentation
Presentation is loading. Please wait.
1
Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1
2
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
3
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
4
JavaScript statement structure Sequential statements Looping statements Branch statements COM311 H Zheng, School of C&M, UUJ 4
5
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
6
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
7
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
8
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
9
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);
10
sum10.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!— var sum=0; do{ sum+=i; i++; }while(i<=10); window.alert("The sum is "+sum); //--> How to design a calculator to add 1+2+3+4+…+n, n is the input from the user? COM311 H Zheng, School of C&M, UUJ 10
11
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
12
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
![Looping through an array var fruit=[‘apple’, ‘banana’, ‘pear’, ‘peach’]; How to display each fruit in each line.](http://images.slideplayer.com./27/9165052/slides/slide_12.jpg "COM311 H Zheng, School of C&M, UUJ 12.")
13
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
![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](http://images.slideplayer.com./27/9165052/slides/slide_13.jpg "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")
14
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
![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](http://images.slideplayer.com./27/9165052/slides/slide_14.jpg "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")
15
Array elements in html: Array object String Radio button Checkbox Selection menu Image sets ….. COM311 H Zheng, School of C&M, UUJ 15
16
Exercise How to loop into radio button/check box elements? Pay by cash Pay by card by phone by email 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
17
Summary feedback & response Learning log submission sequential statements looping statements COM311 H Zheng, School of C&M, UUJ 17
Similar presentations
