1 / 19

JavaScript

JavaScript. JavaScript control statement s. 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

mliss
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 +"<sup> 2 </sup> = "+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?

More Related