JavaScript

1. JavaScript JavaScript control statement s

2. JavaScript with Form --- input • Read Input from the page • Input tag <input type=“text” id=“fName”> • Interaction with this element • document.getElementById(“fName”) • Property of input element • Value : Text Box: value is the text input • Put it together var name = document.getElementById(“fName”).value;

3. Counter-Controlled Repetition • Counter-controlled repetition requires • name of a control variable • initial value of the control variable • the increment (or decrement) by which the control variable is modified each time through the loop • the condition that tests for the final value of the control variable to determine whether looping should continue

4. For Loop • for statement • Specifies each of the items needed for counter-controlled repetition with a control variable • Can use a block to put multiple statements into the body for ([initialization]; [condition]; [final-expression]) Statement Example: for ( vari = 1; i <= 10; i++ ) { document.writeln(“<h1>”+i+”</h1>”); }

5. Simple for loop • Calculate the square of 1, 2,…. 10 for ( vari = 1; i <= 10; i++ ) { variSquare = i*i; document.writeln( "<h1>" +iSquare+"</h1>" ); } // end for

6. for loop that read input and write output function calculate(){ //get input varnE = document.getElementById("inputnumber"); var n = parseInt(nE.value); //calculate varoutList = ""; for ( vari = 1; i <= n; i++ ) { variSquare = i*i; outList += "<h3> "+ i +"² = "+iSquare +"</h3>"; } // end for //output varoE = document.getElementById("output"); oE.innerHTML = outList; }

7. Work with string • The double-quote character delimits the beginning and end of a string literal in JavaScript • it cannot be used in a string unless it is preceded by a \ to create the escape sequence \” • HTML5 allows either single quotes (') or double quotes (") to be placed around the value specified for an attribute • JavaScript allows single quotes to be placed in a string literal

8. For loop that produce a multiplication table • Nested Loop varoutList = "<table border='1'>"; for ( vari = 1; i <= n; i++ ) { outList += "<tr>"; for (var j = 1; j<=n; j++){ var product = i*j; outList += "<td> "+ i +" x "+j +" = "+product +"</td>"; } outList +="</tr>"; } // end for outList +="</table>";

9. Math Object • Math object • Properties • Math.E • Math.PI • Method • Math.random() ; // A random number between 0 and 1 • Math.floor(x) ; // returns the largest integer less than or equal to a number • Math.pow(base, exponent ) // return base^exponent

10. A Simple Javascript Quiz • Generate 10 basic multiplication problems using JavaScript. for ( vari=1; i<=10; i++){ num1 = Math.floor(Math.random()*10); num2 = Math.floor(Math.random()*10); //display the problem document.writeln("<p>" + num1 +" x " +num2+" = "+"<input type='text' id='ans"+i+"'> </p>") }

11. Think about it • How can we check answers? • We need an array to store the answer. • Array • var c = new Array(10); • c[0]=1; • c[2] = c[0]+1; • We also need a HTML intrinsic event and javascript function checkAnswer()

12. Think about it. • How could we display quiz questions one by one?

13. Use while loop • while • Allows you to specify that an action is to be repeated while some condition remains true • The body of a loop may be a single statement or a block • Eventually, the condition becomes false and repetition terminates while (condition) Statement while (n < 3) { n ++; x += n; } • Example: average.html

14. Document Object Model • http://www.w3.org/DOM/ • DOM technique report --http://www.w3.org/DOM/DOMTR • The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. • http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html • TheHTMLDocument object has the following methods: • getElementById(elementId)This method returns a Element object. The elementId parameter is of type String. • The HTMLInputElement object has the following properties: • valueThis property is of type String.

15. DOM Style • <p style=“color:red;” id=“p1”> • p --------- html element • style ------ attribute of the element • “color:red;” ----- value of the attribute • To access the attribute of HTML Element • pE = document.getElementById(“p1”); • pE.style.color = “blue”; • Or • pE.setAttribute(style, “color:blue”);

16. Shrink and Expand Example function hide(){ var uE1 = document.getElementById("u1"); var uE2 = document.getElementById("u2"); uE1.style.visibility="hidden"; uE2.style.display="none"; } function expand(){ var uE1 = document.getElementById("u1"); //uE.style.color="red"; uE1.style.visibility="visible"; //uE.setAttribute("style", "visibility: visible;color:red"); }

17. The Simple Drop Down Menu window.onload = hide; function hide(){ var uE1 = document.getElementById("u1"); uE1.style.display="none"; } function expand(){ var uE1 = document.getElementById("u1"); uE1.style.display="block"; }

18. Work with Image • Displaying Random Images • Generate random numbers • Display different image file according to the numbers // roll the dice function rollDice() { die1Image = document.getElementById( "die1" ); setImage( die1Image ); } // end function rollDice // set src and alt attributes for a die function setImage( dieImg ) { vardieValue = Math.floor( 1 + Math.random() * 6 ); dieImg.setAttribute( "src", "die" + dieValue + ".png" ); dieImg.setAttribute( "alt", "die image with " + dieValue + " spot(s)" ); } // end function setImage

19. Practice • Can you do a image rollover?