dynamic web authoring javascript – looping statements com311h zheng, school of c&m, uuj1
TRANSCRIPT
Dynamic Web Authoring
JavaScript
– Looping statements
COM311 H Zheng, School of C&M, UUJ 1
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<?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
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
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
<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
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
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?<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
Summary
feedback & response Learning log submission sequential statements looping statements
COM311 H Zheng, School of C&M, UUJ 17