Set 3: AJAX Prep, Functions and this Opening Exercise Write a - PDF document

IT452 Advanced Web and Internet Systems Set 3: AJAX Prep, Functions and this 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. <ul id=“mylist”> <li>apples</li> <li>oranges</li> <li>peaches</li> <li>kiwi</li> </ul> 1

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

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 ? 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) 3

Closure and Functions 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; } 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. Closure Picture function makeSomeFunctions() { var funcs = new Array(); for( var xx = 0; xx < 3; xx++ ) funcs[xx] = function() { document.writeln(“<p>My fave is “ + xx); } return funcs; } var someFuncs = makeSomeFunctions(); Closure Function Scope Chain function() { Global Variables document.writeln(“<p>M Local to makeSomeFunctions y fave is “ + xx); } xx Tons of detail at jibbering.com/faq/notes/ closures / 4

Closure Picture Loop 1: xx = 0 function makeSomeFunctions() { var funcs = new Array(); Loop 2: xx = 1 for( var xx = 0; xx < 3; xx++ ) Loop 3: xx = 2 funcs[xx] = function() { document.writeln(“<p>My fave is “ + xx); } Loop 4: xx = 3 return funcs; End Loop: xx = 4 } var someFuncs = makeSomeFunctions(); Closure Function Scope Chain function() { Global Variables document.writeln(“<p>M Local to makeSomeFunctions y fave is “ + xx); } xx Tons of detail at jibbering.com/faq/notes/ closures / Anon Functions with Arguments function makeSomeFunctions() { var funcs = 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; } var myFuncs = makeSomeFunctions(); for( var ii = 0; ii < myFuncs.length; ii++ ) myFuncs[ii](ii); document.writeln("<p>Func[0] = " + myFuncs[0]); What is the output? (funcs4.html) 5

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); } } Output: var myFave = makeFunction; myFave(); My fave is 3.14159 changeIt(2.718); myFave(); My fave is 2.71828 Anon. Functions (funcs5.html) • Two functions can read and write the same memory location. • Define two anonymous functions in the same local context. 6

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)”)? This this is this. (this1.html) <p id=“target” onmouseover =“ highlightme (this)” onmouseout =“ dehighlightme (this)”>…</p > function highlightme(node) { node.style.color = "red"; } function dehighlightme(node) { node.style.color = "blue"; } 7

This is tricky! <p id=“target” onmouseover =“ highlightme ()” onmouseout =“ dehighlightme ()”>…</p> function highlightme() { this.style.color = “red”; } But look at this… (this2.html) function highlightme() { this.style.color = “red”; } var node = document.getElementById (“target”); node.onclick = highlightme; 8

Exercise #2 function highlightme(node) { alert("highlightme(node) node = " + node); alert("highlightme(node) this = " + this); helper(); } function helper() { alert("helper() this = " + this); } function highlightmeNone() { alert("highlightmeNone() this = " + this); helper(); } function init() { var p = document.createElement("p"); p.innerHTML = "Dynamically created, onclick=highlightmeNone"; p.onclick = highlightmeNone; document.body.appendChild(p); } </script> </head> <body onload="init()"> <p>Click the following 3:</p> <p id="target2" onclick="highlightme(this)">onclick=highlightme(this)</p> <p id="target2" onclick="highlightmeNone()">onclick=highlightmeNone()</p> </body> Exercise #2 (continued) • What is the output? • See this3.html – User clicks on the three text paragraphs in order Click the following 3: onclick=highlightme(this) onclick=highlightmeNone() Dynamically created, onclick=highlightmeNone 9