JavaScript - This/that Explanation..?
Hi I am currently reading through an example in my book and I'm stuck on a function which is passed 'that' as it's parameter. What I'll do is type the code and then my question's so I can explain myself a little better.
Code: Code: <head> <script type="text/javascript"> var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); function changeImg(that) { var newImgNumber = Math.round(Math.random() * 3); while (that.src.indexOf(myImages[newImgNumber]) != -1) { newImgNumber = Math.round(Math.random() * 3); } that.src = myImages[newImgNumber]; return false; } </script> </head> <body> <img name="img0" src="usa.gif" border="0" onclick="return changeImg(this)" /> <img name="img1" src="mexico.gif" border="0" onclick="return changeImg(this)" /> Now what I cannot grasp is how does 'this' relate to 'that'? You return to the onclick handler the function name with the parameter as (this). The function parameter is (that) and I see that 'that' is used within the conditional part of the while statement. What I do not understand is why is 'this' used as the parameter in the onclick event's function, when in the actual function it is 'that'. I hope I have explained myself well enough and I look forward to any responses you may have. Thank-you. LC Similar TutorialsCode: <script type="text/javascript"> var K_Thomas = "Kurt Thomas" , E_Turner = "Evan Turner" , P_George = "Paul George" , B_Davis = "Baron Davis"; var G_Vasquez = "Greivis Vasquez" , G_Dragic = "Goran Dragic" , K_Love = "Kevin Love" , V_Carter = "Vince Carter"; var L_Odom ="Lamar Odom" , JasonSmith="Jason Smith" , D_Jordan = "DeAndre Jordan" , J_ONeal = "Jermaine O'Neal"; var playername = prompt("Find Player Salary","First Name Last Name"); if (playername = K_Thomas) { alert("Kurt Thomas - $1.3 M 2012 Bucks"); } else if (playername = E_Turner) { alert("Evan Turner - $4.48 M 2012++ Bucks [$2 M Paid 2013]"); } else if (playername = P_George) { alert("Paul George - $1.71 M 2012++ Bucks"); } else if (playername = B_Davis) { alert("Baron Davis - $13.44 M 2012+ Bucks [$5.44 M Paid 2012]"); } else if (playername = G_Vasquez) { alert("Greivis Vasquez - $1.02 M M 2012++ Bucks"); } else if (playername = G_Dragic) { alert("Goran Dragic - $1.97 M 2012 Bucks"); } else if (playername = K_Love) { alert("Kevin Love - $3.88 M 2012 Bucks"); } else if (playername = V_Carter) { alert("Vince Carter - $17.52 M 2012 Bucks [$2 M Paid 2012]"); } else if (playername = L_Odom) { alert("Lamar Odom - $8.2 M 2013 Bucks [$4 M Paid 2012 & $4 M Paid 2013]"); } else if (playername = JasonSmith) { alert("Jason Smith - $1 M 2012 Bucks"); } else if (playername = D_Jordan) { alert("DeAndre Jordan - $10.1 M 2015 Bucks"); } else if (playername = J_ONeal) { alert("Jermaine O'Neal - $0.3 M 2012 Bucks"); } else { alert("Player Not Found."); } </script> So, whenever I run this code it either always shows up with Kurt Thomas's alert or with all of them. (I've tried using both document.write and alert) I don't know what I'm doing wrong with the conditions, but I'm new to javascript and it could be something simple. The Mozilla error console didn't find anything. Just for clarification I want it to happen so that when I type in a player's first and last name it brings up their salary information. Thanks in advance for your help. Hey Guys, I have been trying to work out this problem for the last couple of days have having found long way around of doing it but i was wondering why this way isn't working. I have attached to following code but can't seem to get it to show me the average which i am looking for which is 17.2 i have tried a number of things and mostly it is just curiosity as i have also pasted the deadline for this piece of work and was wondering is someone would be able to enlighten me on why its just giving me the output. 'The average height is NaN' (Not a Number) I know that it is probably something stupid like iam not declaring something as numeric or it might be that the whole think is wrong. I would very much appreciate any-help that people can give me but please don't direct me to another post. Code: <HTML> <HEAD> <TITLE> Plant Experiments </TITLE> <SCRIPT LANGUAGE = "JavaScript"> var plantHeights = [15,16,17,18,19]; var plantNumbers = [2,1,5,4,3]; var plant = new Array(5); for (var plantt = 0; plantt < plant.length; plantt = plantt + 1) { plant[plantt] = plantHeights[plantt] * plantNumbers[plantt]; } document.write('The heigh is ' + (plantNumbers[plant] + plantHeights[plant]/plant)); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Many Thanks, Tom I don't really understand why a.d() fails in the following, or rather why a.d can't access local vars in a, or how to rewrite this so that it can PHP Code: window.a = (function () { var b = '<br>hello '; var c = function (){ document.write(b+'from c') // in this scope we can access the local vars of a }; c() // this will work and write hello from c document.write(b) // this will work and write hello from b return{c:c} })(); a.d = function () { document.write(b+'from d') // even though as far as I can tell I have added d to the object a, } // this still can't access the local vars of a... why not? how can I change that? a.d() // doesn't work :( a.c() // this works too because we returned c in a's return statement I have devised the following constructor based loosely on the observer pattern Code: Observer = function (ConditionIsTrue , codeToExecute){ var observer = this , ConditionWasMet = false , CheckIfReady = function () { if (ConditionIsTrue()) { if(!ConditionWasMet) codeToExecute(); ConditionWasMet = true; } else { if (ConditionWasMet) ConditionWasMet = false; } }; Loop.call(observer , CheckIfReady) observer.speed(1) }; It works fine, no problems that I know of... But the most interesting thing happened when I attached it to my lib and ran it through the http://closure-compiler.appspot.com/home compiler Code: $['Observer'] = function (//...etc... For the first time the compiler has added something to my global scope Code: var i=!1; window.$=function(){//...etc... ... Observer:function(j,k){var h=i;Loop.call(this,function(){j()?(h||k(),h=!0):h&&(h=i)});this.speed(1)} } })(); Can someone explain to me why the var ConditionWasMet had to be exported to the global scope? Was it already in the global scope? That would confuse me considering the observer can be called from multiple instances without conflict... But I don't want any surprise conflicts jumping out at me later, I appreciate the consideration. hi guys, l am currently studying web technologies on a part time basis, and learning javascript. l got a very useful website, but still l dont understand certain things like this one: Quote: When a function has performed an assignment, it may provide a value that other functions would need, for any reason you judge necessary. When a function produces a value an makes it available to other functions, such a function is said to return a value. To define a function that returns a value, just before the closing curly bracket, type the return keyword followed by the value that the function returns. The value should be a valid and expected type. Because JavaScript is not a type-checking language, meaning it hardly checks anything you are doing, it is your responsibility to make sure that your function returns the right value. Here is a function that returns a value: function rectangleArea(length, height) { var area; area = length * height * 3.14159; return area; } Even if a function returns a value, it can still be called like any other function. If a function returns a value, its name can be assigned to a variable to give a value to, or change the value of, the variable. Here is an example: Code: <Script Language="JavaScript"> function rectangleArea(length, height) { var area; area = length * height * 3.14159; return area; } function displayArea() { var l, h, rectArea; l = 52.05; h = 46.55; rectArea = rectangleArea(l, h); document.write("The area of the is ", rectArea); } </Script> <Script Language="JavaScript"> displayArea(); </Script> what l understand from the code is, l have 2 functions, first function is a return function and has got a value, but where is this value going? l mean what's happing with it? l mean l cant see this return value in the second function, why? l ma also not understand why we need to have 2 functions, why not just 1 ?/?? can someone explain me one by one the lines maybe? thanks I am learning javascript from this site, and one of the programs code given is now explained to the point that I can not use it. I don't know how to call it. I would be glad if someone would examine the code to see how it should be applied. Date and Time Scripts Frank |