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

1

Set 3: AJAX Prep, Functions and this

IT452 Advanced Web and Internet Systems

Opening Exercise

• Write a javascript function colorOrange() that turns orange
• nly 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>

2

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");

3

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)

4

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();

function() { document.writeln(“<p>M y fave is “ + xx); } Global Variables Local to makeSomeFunctions xx

Closure

Tons of detail at jibbering.com/faq/notes/closures/

Function Scope Chain

5

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();

Loop 1: xx = 0 Loop 2: xx = 1 Loop 3: xx = 2 Loop 4: xx = 3 End Loop: xx = 4

function() { document.writeln(“<p>M y fave is “ + xx); } Global Variables Local to makeSomeFunctions xx

Closure

Tons of detail at jibbering.com/faq/notes/closures/

Function Scope Chain

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)

6

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

• Anon. Functions (funcs5.html)
• Two functions can read and write the same

memory location.

• Define two anonymous functions in the same local

context.

7

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)”

• nmouseout=“dehighlightme(this)”>…</p>

function highlightme(node) { node.style.color = "red"; } function dehighlightme(node) { node.style.color = "blue"; }

8

This is tricky! <p id=“target” onmouseover=“highlightme()”

• nmouseout=“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;

9

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:

• nclick=highlightme(this)
• nclick=highlightmeNone()

Dynamically created, onclick=highlightmeNone