Set 3: AJAX Prep, Functions and this

1. Set 3: AJAX Prep, Functions and this Talk about picking topics first. Talk about ask in ADVANCE for problems. IT452 Advanced Web and Internet Systems

2. Opening Exercise • Write a javascript function colorOrange() that turns orange only the “oranges” list item in the HTML below. • ALSO: you may not assume that the oranges item is always second in the list. function colorOrange() { var node = document.getElementById("mylist"); var kids = node.childNodes; for( var xx = 0; xx < kids.length; xx++ ) { // 1 is ELEMENT_NODE, 3 is TEXT_NODE if( kids[xx].nodeType == 1 && kids[xx].innerHTML == "oranges" ) kids[xx].style.color = "orange"; } } <ul id=“mylist”> <li>apples</li> <li>oranges</li> <li>peaches</li> <li>kiwi</li> </ul>

3. Standard Function function handleQuery() { var elems = [ "this", "is", "a", "new", "row" ]; document.writeln(elems); return false; } handleQuery(); Functions are normally defined in the global context. Variables can be global, or local.

4. Fun with Functions (funcs1.html) function handleQuery() { var elems = [ "this", "is", "a", "new", "row" ]; document.writeln(elems); return false; } var mystery = handleQuery; mystery(); Function references! var anon = function(arg1) { var elems = [ "this", "is", "a", arg1, "row" ]; document.writeln(elems); return false; }; anon(“happy”); Anonymous function

5. Nesting Functions (funcs2.html) function randomFunc() { var rand = Math.random(100); var func = function() { return rand; } return func; } var number1 = randomFunc()(); var number2 = randomFunc()(); Does number1 == number2 ? Nested functions! Two different random numbers.

6. Closure and Functions (funcs3.html) function makeSomeFunctions() { var funcs = new Array(); for( var xx = 0; xx < 5; xx++ ) funcs[xx] = function() { document.writeln(“<p>My fave is “ + xx); } return funcs; } var myFuncs = makeSomeFunctions(); for( var ii = 0; ii < myFuncs.length; ii++ ) myFuncs[ii](); What is the output? (func3.html) Write the anon. function on the board by itself…will show the xx variable is not defined anywhere. FREE VARIABLE.

7. Closure and Functions function makeSomeFunctions() { varfuncs = new Array(); for( varxx = 0; xx < 5; xx++ ) funcs[xx] = function() { document.writeln(“<p>My fave is “ + xx); } return funcs; } Variable xx is removed from the call stack when makeSomeFunctions() exits. The anonymous function depends on xx, what happens? A closure is created containing the local variables.

8. Closure Picture function makeSomeFunctions() { varfuncs = new Array(); for( varxx = 0; xx < 3; xx++ ) funcs[xx] = function() { document.writeln(“<p>My fave is “ + xx); } return funcs; } varsomeFuncs = makeSomeFunctions(); Closure Function Scope Chain Global Variables function() { document.writeln(“<p>My fave is “ + xx); } Local to makeSomeFunctions xx Tons of detail at jibbering.com/faq/notes/closures/

9. Closure Picture Loop 1: xx = 0 Loop 2: xx = 1 Loop 3: xx = 2 Loop 4: xx = 3 End Loop: xx = 4 function makeSomeFunctions() { varfuncs = new Array(); for( varxx = 0; xx < 3; xx++ ) funcs[xx] = function() { document.writeln(“<p>My fave is “ + xx); } return funcs; } varsomeFuncs = makeSomeFunctions(); Closure Function Scope Chain Global Variables function() { document.writeln(“<p>My fave is “ + xx); } Local to makeSomeFunctions xx Tons of detail at jibbering.com/faq/notes/closures/

10. Anon Functions with Arguments function makeSomeFunctions() { varfuncs = new Array(); for( var xx = 0; xx < 5; xx++ ) funcs[xx] = function(arg) { document.writeln(“<p>My fave is “ + xx + “ with arg “ + arg+ “</p>”); } return funcs; } varmyFuncs = makeSomeFunctions(); for( var ii = 0; ii < myFuncs.length; ii++ ) myFuncs[ii](ii); My fave is 5 with 0 My fave is 5 with 1 My fave is 5 with 2 My fave is 5 with 3 My fave is 5 with 4 What is the output? (funcs4.html)

11. Challenge Exercise • Change this code so I can call changeIt(integer) to alter the variable xx in myFave() • You must leave both the “var xx” and anon function in makeFunction() function makeFunction() { var xx = 3.14159; return function() { document.writeln(“<p>My fave is “ + xx); } } var myFave = makeFunction; myFave(); changeIt(2.718); myFave(); Output: My fave is 3.14159 My fave is 2.71828 Solution: funcs5.html Make a global changeIt variable, set it to an anon. function inside makeFunctions().

12. Anon. Functions (funcs5.html) • Two functions can read and write the same memory location. • Define two anonymous functions in the same local context. varchangeIt; function makeFunction() { var xx = 3.14159; changeIt = function(newval) { xx = newval; } return function() { document.writeln(“<p>My fave is “ + xx); } }

13. This this is this. What is this? A reference to the owner of the current context. In a function? In an element property (e.g., onclick=“foo(this)”)? The owner of the function. Usually the window object. The HTML element itself.

14. This this is this. (this1.html) <p onmouseover=“highlightme(this)” onmouseout=“dehighlightme(this)”>…</p> This refers to the <p> element

15. This is tricky! Inline properties are references to functions, and those functions are owned by the global Window object. <p onmouseover=“highlightme()” onmouseout=“dehighlightme()”>…</p> function highlightme() { this.style.color = “red”; } This refers to the window object!

16. But look at this… (this2.html) function highlightme() { this.style.color = “red”; } var node = document.getElementById(“target”); node.onmouseover = highlightme; This refers to the window object! The function is copied. So the element now owns the function. “this” is now the HTML Element

17. Exercise #2 • What is the output? • See this3.html • User clicks on the three text paragraphs in order Do in the browser Click the following 3: onclick=highlightme(this) onclick=highlightmeNone() Dynamically created, onclick=highlightmeNone