dynamic web authoring javascript – looping statements com311h zheng, school of c&m, uuj1
TRANSCRIPT
![Page 1: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/1.jpg)
Dynamic Web Authoring
JavaScript
– Looping statements
COM311 H Zheng, School of C&M, UUJ 1
![Page 2: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/2.jpg)
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
![Page 3: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/3.jpg)
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
![Page 4: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/4.jpg)
JavaScript statement structure
Sequential statements Looping statements Branch statements
COM311 H Zheng, School of C&M, UUJ 4
![Page 5: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/5.jpg)
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
![Page 6: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/6.jpg)
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
![Page 7: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/7.jpg)
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
![Page 8: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/8.jpg)
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
![Page 9: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/9.jpg)
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);
![Page 10: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/10.jpg)
sum10.html<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><script language=javascript type=text/javascript><!—var sum=0;do{
sum+=i;i++;
}while(i<=10);
window.alert("The sum is "+sum);//--></script></head><body></body></html>
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
![Page 11: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/11.jpg)
An example of loops listing2.2.html<html><head><title>loop me</title><script type="text/javascript" language="javascript"><!--for (i=5;i>1;i--){
document.write(i + " bottles of root beer on the wall.<br>");document.write("You take one down, pour a round.<br>");
}document.write("<br>There is only one bottle of root beer left.<br>");document.write("<h1>Now stop drinking all my root beer.</h1>");//--></script></head><body bgcolor="white"></body></html>
COM311 H Zheng, School of C&M, UUJ 11
![Page 12: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/12.jpg)
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
![Page 13: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/13.jpg)
Example – loop in array
<script>
var fruit=["apple","pear","banana","peach"];
for (var i=0;i<4;i++) {
document.write(fruit[i] + "<br>");
}
</script>
COM311 H Zheng, School of C&M, UUJ 13
![Page 14: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/14.jpg)
Using the length property of the array
<script>
var fruit=["apple","pear","banana","peach"];
for (var i=0; i<fruit.length; i++){
document.write(fruit[i] + "<br/>");
}
</script>
COM311 H Zheng, School of C&M, UUJ 14
![Page 15: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/15.jpg)
Array elements in html:
Array object String Radio button Checkbox Selection menu Image sets …..
COM311 H Zheng, School of C&M, UUJ 15
![Page 16: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/16.jpg)
Exercise How to loop into radio button/check box
elements?<input type = "radio" name = ”payment" value =”cash" /> Pay by cash<input type = "radio" name = ”payment" value = ”card" /> Pay by card
<input type = "checkbox" name = ”Contact" value =“phone" /> by phone<input type = "checkbox" name = ”Contact" value = ”email" /> by email<input type = "checkbox" name = ”Contact" value = ”post" /> by post
//get obj paymentvar thepayment=document.myform.payment; //using looping to display value of each item, how?
COM311 H Zheng, School of C&M, UUJ 16
![Page 17: Dynamic Web Authoring JavaScript – Looping statements COM311H Zheng, School of C&M, UUJ1](https://reader036.vdocuments.mx/reader036/viewer/2022082713/5697c00e1a28abf838cc9b7a/html5/thumbnails/17.jpg)
Summary
feedback & response Learning log submission sequential statements looping statements
COM311 H Zheng, School of C&M, UUJ 17