1 / 38

Javascript Event Driven programming, Intro to DOM , Arrays, Styling, etc.

Javascript Event Driven programming, Intro to DOM , Arrays, Styling, etc. chapters 8 & 9&11 JavaScript Tutorial at http://www.w3schools.com/js/. Event-driven programming. JS programs have no main; they respond to user actions called events

triage
Télécharger la présentation

Javascript Event Driven programming, Intro to DOM , Arrays, Styling, etc.

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. JavascriptEvent Driven programming, Intro to DOM, Arrays, Styling, etc. chapters 8 & 9&11 JavaScript Tutorial at http://www.w3schools.com/js/

  2. Event-driven programming • JS programs have no main; they respond to user actions called events • event-driven programming: writing programs driven by user events

  3. HTML Buttons: <button> the canonical clickable UI control (inline) <button>Click me!</button> • button's text appears inside tag; can also contain images • To make a responsive button or other UI control: • choose the control (e.g. button) and event (e.g. mouse click) of interest • write a JavaScript function to run when the event occurs • attachthe function to the event on the control • statements placed into functions can be evaluated in response to user events

  4. Event handlers: onclickevent and attribute <elementattributesonclick="function();">... <button onclick="myFunction();">Click me!</button> • JavaScript functions can be set as event handlers • when you interact with the element, the function will execute • onclick is just one of many event HTML attributes we'll use function myFunction() { alert("Hello!"); alert("How are you?"); } … <head> <script src=“button.js" type="text/javascript"> </script> </head> <body> <button onclick="myFunction();">Click me! </button> <body> … • but popping up an alert window is disruptive and annoying • A better user experience would be to have the message appear on the page...

  5. Document Object Model (DOM) • most JS code manipulates elements on an HTML page • we can examine elements' state • e.g. see whether a box is checked • we can changestate • e.g. insert some new text into a div • we can changestyles • e.g. make a paragraph red a set of JavaScript objects that represent each element on the page

  6. DOM-getElementById • The getElementById method, given an id as an argument, finds the HTML element with a matching id attribute and returns a JavaScript object representing the element.

  7. Accessing elements: document.getElementByIdvalueversus innerHTML • document.getElementByIdreturns the DOM object for an element with a given id. • value property of a JavaScript object representing an HTML text input element specifies the text to display in the text field. • You can change the text in most formcontrols by setting the valueproperty • innerHTML property can be used in a script to set the contents of HTML container (e.g. div, span, p) element’s. • change the text inside most container elements by setting the innerHTMLproperty

  8. Accessing elements: document.getElementByIdvalueproperty example varname = document.getElementById("id"); <script src="replace.js" type="text/javascript"></script> </head> <body> <button onclick="changeText();">Click me!</button> <input id="output" type="text" value="replace me" /> </body> function changeText() { var textbox = document.getElementById("output"); textbox.value = "Hello, world!"; }

  9. Accessing elements: document.getElementByIdinnerHTMLexample <script src="replace2.js" type="text/javascript"></script </head> <body> <button onclick="swapText();">Click me!</button> <span id="output2">Hello</span> <input id="textbox2" type="text" value="Goodbye" /> </body> Replace2.htm function swapText() { var span = document.getElementById("output2"); vartextBox = document.getElementById("textbox2"); var temp = span.innerHTML; span.innerHTML= textBox.value; textBox.value = temp; } replace2.js

  10. Another example

  11. <head> <title>CMPS 278 Tip Calculator</title> <link href="tip_files/tip.css" type="text/css" rel="stylesheet"> <script src="tip_files/tip.js" type="text/javascript"></script> </head> <body> <h1>CMPS 278 Tip Calculator</h1> <div> <input id="subtotal" type="text"> $ Subtotal <br> <input id="tip" type="text"> % Tip <hr> </div> <div id="output"> <h2>Your total:</h2> <pid="total">$0.00</p> </div> <div> <button onclick="cool();">Calculate Tip</button> </div> </body> Another example tip.html function cool() { var subtotal = document.getElementById("subtotal").value; var tip = document.getElementById("tip").value; var total = parseInt(subtotal) + parseInt(subtotal)*(parseFloat(tip)/100.0); document.getElementById("total").innerHTML = total; } tip.js

  12. Arrays var n2 = new Array(); // allocate empty Array var n1 = new Array( 5 ); // allocate five-element Array var name = []; // empty array var colors = new Array(value, value, ..., value); var name = [value, value, ..., value]; // pre-filled name[index] = value; // store element. • JavaScript arrays are Arrayobjects . • Creating arrays using the newoperator is known as creating an object instance • JavaScript reallocates an Arraywhen a value is assigned to an element that is outside the bounds of the original Array • Elements between the last element of the original Arrayand the new element have undefined values • Referring to an element outside the Arraybounds is a logic error. • Arrays can be created using a comma-separated initializer list enclosed in square brackets ([]) • The array’s size is determined by the number of values in the initializer list • The initial values of an array can be specified as arguments in the parentheses following newArray • The size of the array is determined by the number of values in parentheses

  13. Arrays //Creates an array with all elements are defined var colors = new Array( "cyan", "magenta","yellow", "black" ); var ducks = ["Huey", "Dewey", "Louie"]; // Creates an array with four elements, two of which reserve space for values to //be specified later var integers2 = [ 2, , , 8 ]; // Creates an empty array then add elements to it var stooges = []; // stooges.length is 0 stooges[0] = "Larry"; // stooges.length is 1 stooges[1] = "Moe"; // stooges.length is 2 stooges[4] = "Curly"; // stooges.length is 5 stooges[4] = "Shemp"; // stooges.length is 5// store element. • several ways to initialize an array • length property (grows as needed when elements are added) • JavaScript arrays are “dynamic” entities that can change size after they are created

  14. Arrays • Two ways to pass arguments to functions (or methods) • Pass-by-value • Numbers, boolean values and strings are passed to functions by value. • Pass-by-reference • All objects are passed to functions by reference • Arrays are objects in JavaScript, so Arrays are passed to a function by reference • To pass an array as an argument to a function, just specify the name of the array (a reference to the array) without brackets • Although entire arrays are passed by reference, individual elementsare passed by value • To pass an array element to a function, use the subscriptedname of the element as an argument in the function call

  15. Arrays initarray.js // Initializer list specifies the number of elements and a value for each element. var colors = new Array( "cyan", "magenta","yellow", "black" ); var integers1 = [ 2, 4, 6, 8 ]; var integers2 = [ 2, , , 8 ]; outputArray( "Array colors contains", colors ); outputArray( "Array integers1 contains", integers1 ); outputArray( "Array integers2 contains", integers2 ); // output the heading followed by a two-column table containing the subscripts and elements of theArray function outputArray( heading, theArray ) { document.writeln( "<h2>" + heading + "</h2>" ); document.writeln( "<table border = \"1\"" ); document.writeln( "<thead><th>Subscript</th>" + "<th>Value</th></thead><tbody>" ); // output the subscript and value of each array element for ( vari = 0; i < theArray.length; i++ ) document.writeln("<tr><td>" + i + "</td><td>" + theArray[ i ] + "</td></tr>"); document.writeln( "</tbody></table>" ); }// end function outputArray <head> <title>Initializing an Array with a Declaration</title> <style type = "text/css"> table { width: 15em } th { text-align: left } </style > <script src="initarray.js" type="text/javascript"></script> </head> <body></body>

  16. Arrays (sorting an Array) • The sort() method sort the items of an array. • takes one optional argument, defining the sort order which can be either alphabetic or numeric, and either ascending or descending. • Default sort order is alphabetic and ascending • when numbers are sorted alphabetically, "40" comes before "5“ • To perform a numeric sort, you must pass an argument when calling the sort method. • The argument must be a function that takes two arguments, compares the two arguments, and returns one of the following three values: -1, 0, 1 if the first argument is less than, equal to, or greater than the second, respectively • Functions in JavaScript are considered to be data and can be assigned to variables, stored in Arrays and passed to functions just like other data

  17. Arrays sort.js var fruits = ["Banana", "Orange", "Apple", "Mango"]; var a = [ 10, 1, 9, 2, 8, 3, 7, 4, 6, 5 ]; document.writeln( "<h1>Sorting an Array</h1>" ); outputArray( "Array 'a' data items in original order: ", a ); outputArray( "Array 'fruits' data items in original order: ", fruits ); fruits.sort(); outputArray( "Array 'fruits' data items in ascending order: ", fruits); a.sort(); outputArray( "Array 'a' data items in default order: ", a); a.sort( compareIntegers ); // sort the array outputArray("Array 'a' data items in ascending order: ", a); // output the heading followed by the contents of theArray function outputArray( heading, theArray ){ document.writeln( "<p>" + heading + theArray.join( " " ) + "</p>" ); } // end function outputArray // comparison function for use with sort functioncompareIntegers( value1, value2 ) { return parseInt( value1 ) - parseInt( value2 ); } // end function compareIntegers <head> <title>Sorting an Array with Array Method sort</title> <script src= "sort.js" type="text/javascript"></script> </head> <body></body>

  18. More Array methods var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); // Banana,Orange,Apple, fruits.push("Kiwi"); // Banana,Orange,Apple,Kiwi fruits.shift() //Orange,Apple,Kiwi fruits.unshift("Lemon","Pineapple"); // Lemon,Pineapple,Orange,Apple,Kiwi

  19. More Array methods var fruits = ["Banana", "Orange", "Apple", "Mango"]; //slice the elements starting at index 1, and ends at, but does not include, index 3 varar = fruits.slice(1,3) // Orange, Apple (in ar) // At position 1, add the new items: ar.splice(1,0,"Lemon","Kiwi"); // Orange,Lemon,Kiwi,Apple //At position 2, remove 1 item and add the new items, : ar.splice(2,1,“Banana",“Mango"); // Orange, Lemon,Banana,Mango,Apple // At position 2, remove 2 items: ar.splice(2,2);//Orange,Lemon,Apple fruits.toString(); // Banana,Orange,Apple,Mango fruits.reverse(); // Mango,Apple,Orange,Banana (in fruits) fruits.splice(1, 1); // Mango,Orange,Banana (in fruits) var basket = fruits.concat(ar); // Mango,Orange,Banana,Orange,Lemon,Apple(in basket)

  20. for …in and join method • Thejoin() method joins the elements of an array, separated by the separator supplied in the function’s argument, into a stringand returns the string • If an argument is not specified, the comma is used as default separator • for…in statement • Enables a script toperform a task for each element in an array • skips any undefined elements in the array. var fruits = ["Banana", "Orange", "Apple", "Mango"]; var energy = fruits.join(); //The result of energy will be: Banana,Orange,Apple,Mango var energy = fruits.join(" and "); //The result of energy will be: Banana and Orange and Apple and Mango for ( var j in fruits ){ document.write(fruits [j] + " "); // Banana Orange Apple Mango }

  21. Linearsearch.htm <html > <head> <title>Linear Search of an Array</title> <script src= "linearsearch.js" type="text/javascript"></script> </head> <body> <form action = ""> <p>Enter integer search key<br /> <input id = "inputVal" type = "text" /> <input type = "button" value = "Search" onclick = "buttonPressed()"/> <br /> </p> <p>Result<br /> <input id = "result" type = "text" size = "30" /> </p> </form> </body> </html>

  22. var a = new Array( 100 ); // create an Array // fill Array with even integer values from 0 to 198 for ( var i = 0; i < a.length; ++i ) a[ i ] = 2 * i; // function called when "Search" button is pressed function buttonPressed(){ // get the input text field var inputVal = document.getElementById( "inputVal" ); // get the result text field var result = document.getElementById( "result" ); // get the search key from the input text field var searchKey = inputVal.value; //Array a is passed to linearSearch even though it is a // global variable. Normally an array will be passed to //a method for searching. var element = linearSearch( a, parseInt( searchKey ) ); if ( element != -1 ) result.value = "Found value in element " + element; else result.value = "Value not found"; } // end function buttonPressed // Search "theArray" for the specified "key" value function linearSearch( theArray, key ) { // iterates through each element of the array in order for ( var n = 0; n < theArray.length; ++n ) if ( theArray[ n ] == key ) return n; return -1; } // end function linearSearch Linear search.js

  23. Splitting strings: split and join var s = "the quick brown fox"; var a = s.split(" "); // ["the", "quick", "brown", "fox"] a.reverse(); // ["fox", "brown", "quick", "the"] s = a.join("!"); // "fox!brown!quick!the" • splitbreaks apart a string into an array using a delimiter • can also be used with regular expressions (seen later) • joinmerges an array into a single string, placing a delimiter between them

  24. Scope • Global variables or script-level are accessible in any part of a script and are said to have global scope • Thus every function in the script can potentially use the variables • Local variables of a function and function parameters have function scope • If a local variable in a function has the same name as a global variable, the global variable is “hidden” from the body of the function. 24 24

  25. The arguments array function example() { for (vari = 0; i < arguments.length; i++) { alert(arguments[i]); } } example("how", "are", "you"); // alerts 3 times • every function contains an array named argumentsrepresenting the parameters passed • can loop over them, print/alert them, etc. • allows you to write functions that acceptvarying numbers of parameters 25

  26. Arrays as maps var map = []; map[42] = "the answer"; map[3.14] = "pi"; map["champ"] = "suns"; • the indexes of a JS array need not be integers! • this allows you to store mappings between an index of any type ("keys") and value • similar to Java's Map collection or a hash table data structure 26

  27. two-dimensional Arrays • In general, an array with m rows and n columns is called an m-by-narray • Two-dimensional array element accessed using an element name of the form a[ i ][ j ] • a is the name of the array • i and j are the subscripts that uniquely identify the row and column • Multidimensional arrays are maintained as arrays of arrays • can be initialized in declarations like a one-dimensional array, with values grouped by row in square brackets • The rows of a two-dimensional array can vary in length 27

  28. two-dimensional Arrays as maps vararray1 = [ [ 1, 2, 3 ], // first row [ 4, 5, 6 ] ]; // second row vararray2 = [ [ 1, 2 ], // first row [ 3 ], // second row [ 4, 5, 6 ] ]; // third row outputArray( "Values in array1 by row", array1 ); outputArray( "Values in array2 by row", array2 ); functionoutputArray( heading, theArray) { document.writeln( "<h2>" + heading + "</h2><pre>" ); // iterates through the set of one-dimensional arrays for ( variin theArray ) { // iterates through the elements of each one-dimensional array for ( varj in theArray[ i ] ) document.write( theArray[ i ][ j ] + " " ); document.writeln( "<br />" ); } // end for document.writeln( "</pre>" ); } // end function outputArray 28

  29. OnloadEvent • If a script in the headattempts to get a DOM node for an HTML element in the body, getElementByIdreturns nullbecause the body has not yet loaded • onloadproperty of the body element calls an event handler when the <body>of the HTML document is completely loaded into the browser window <body onload = "functionName ()"> 29 29

  30. onload event <html> <head> <script type="text/javascript"> function myFunction() { varaddr = document.getElementById("address"); addr.innerHTML = "this is what will be shown"; } </script> </head> <body> <p>This won't be changed!</p> <div id="address"> <p>1234 Street</p> <p>Atlanta, GA</p> </div> </body> </html> <body onload = "myFunction()">

  31. The eval(evil?) function eval("JavaScript code"); eval("var x = 7; x++; alert(x / 2);"); // alerts 4 • evaltreats a String as JavaScript code and runs that code • This is occasionally useful, but usually a very bad idea • if the string's contents come from user input, the user can cause arbitrary code execution • can lead to security problems and bugs 31

  32. The typeof function typeof(value) • given these declarations: • function foo() { alert("Hello"); } • var a = ["Huey", "Dewey", "Louie"]; • The following statements are true: • typeof(3.14) === "number" • typeof("hello") === "string" • typeof(true) === "boolean" • typeof(foo) === "function" • typeof(a) === "object" • typeof(null) === "object" • typeof(undefined) === "undefined" 32

  33. JavaScript in HTML body (example) <script type="text/javascript"> JavaScript code </script> • JS code can be embedded within your HTML page's head or body • runs as the page is loading • this is considered bad styleand should be avoided. • mixes HTML content and JS scripts (bad) • can cause your page not to validate 33

  34. Some of the DOM object properties <div id="main" class="foo bar"> <p>Hello, <em>very</em> happy to see you!</p> <imgid="icon" src="images/borat.jpg" alt="Borat" /> </div>

  35. DOM properties for form controls <input id="sid" type="text" size="7" maxlength="7" /> <input id="frosh" type="checkbox" checked="checked" /> Freshman?

  36. Abuse of innerHTML // bad style! var paragraph = document.getElementById("welcome"); paragraph.innerHTML = "<p>text and <a href="page.html">link</a>"; • innerHTML can inject arbitrary HTML content into the page • however, this is prone to bugs and errors and is considered poor style • Most programmers avoid using innerHTML to inject HTML tags; and use it to inject plain text only • document.write/writeln() also injects HTML code into the HTML page • But later on we will use the DOM methods to create HTML elements and add them to our web page.

  37. Adjusting styles with the DOM <button id="clickme">Color Me</button> HTML window.onload = function() { document.getElementById("clickme").onclick = changeColor; }; function changeColor() { varclickMe = document.getElementById("clickme"); clickMe.style.color = "red"; } • contains same properties as in CSS, but with camelCasedNames • examples: backgroundColor, borderLeftWidth, fontFamily • window.onloadevent occurs when the browser has finished loading the page (will be discussed later) JS

  38. Common DOM styling errors • many students forget to write .style when setting styles • style properties are capitalizedlikeThis, not like-this • style properties must be set as strings, often with units at the end • write exactly the value you would have written in the CSS, but in quotes

More Related