|
JavaScript - Need Explanation On Scope
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 Similar TutorialsI 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. Code: <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. 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 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 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 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 hi all ~ this is my code, when i change the first checkbox , i want to change the var theSame, but it seams doesn't change in if(theSame == 1) ; but it changes in alert("b"+theSame) , it's queer, how to handle this ? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var theSame = 1;
$("input[name='thesame']").change(function(){
theSame = $(this).is(":checked") ? 1 : 0;
alert("a"+theSame)
});
if(theSame == 1){
$(".check_list input").change(function(){
alert("b"+theSame)
});
}
});
</script>
</head>
<body>
<input type="checkbox" name="thesame">same
<br>
<div class="check_list">
<input type="checkbox" name="son">ppp
<input type="checkbox" name="son">ppp
<input type="checkbox" name="son">ppp
</div>
</body>
</html>
Hi there - this seems like it should be an obvious problem - can anyone spot it? I have an object, declared this way: Code: var FK_gid = new picChooser('FK_gid', FK_gidArray);
FK_gid.init();
and a select group like this: Code: <select id = "FK_gid" name = "FK_gid"> <option value="none" selected="true" >None</option> <option value="335" >pics/zoobins.jpg</option> etc. etc. </select> picChooser in construction sets the onchange of the select group like this: Code: this.list = document.getElementById('FK_gid');
this.list.setAttribute("onchange", "FK_gid.displayImage();");
and the object's displayImage(); is like this: Code: this.displayImage = function () {
this.clearImage();
if (this.list.selectedIndex != 0)
{
pic = new Image();
pic.src = this.reformat(this.list.options[this.list.selectedIndex].innerHTML);
img = document.createElement("img");
img.src = pic.src;
this.preview.appendChild(img);
}
}
But whenever I choose something else off the list I get this error message: Code: TypeError: Result of expression 'FK_gid.displayImage' [undefined] is not a function. It's bizarre because when I type FK_gid.displayImage(); into Safari's dynamic console the function works perfectly... Any ideas? Thanks Edd I have a popup in one of my pages which is populated via AJAX call with a list of click-able options, this is all good, however I am now trying to display a javascript tree in the popup but it can not seem to 'see' the javascript routine that creates the tree, even if I hard code that into the popup itself, so the tree starts with d=new dTree() , and javasript is telling me that 'd' is undefined. the code works fine in a regular webpage but when pulled up in a AJAX generated popup it cant see squat? I tried parent.dTree() etc but to no avail. Is this because the javascript is loaded after the main page load via AJAX? if so is it accessible in anyway ? Let's say I'm defining an object and I want the constructor to take one input and ten save it. I'd like to do something like this: function apple(color) { this.color = arguments.color; } But of course that doesn't work because arguments isn't a scope. My question is, is there a scope I can use. What I've been doing instead is this: function apple(new_color) {this.color = new_color;} But that just seems less than perfectly pretty. I am writing a rather large bookmarklet. For this bookmarklet I would like to have some user-defined variable values. My idea for this is a bookmarklet code something like this Code: var MY_var = "my value";
(function(){
/* usual loading of bookmarklet script file */
var s=document.createElement('script');
s.type='text/javascript';
s.src='https://myhost.com/path/to/my.js;
document.getElementsByTagName('head')[0].appendChild(s);
})();
However I can't access the variable MY_var in the bookmarklet script file "my.js". Is there any way I can change the bookmarklet so that I can access MY_var in my.js? I don't even know where to begin with this one. I don't know the terminology for what I am trying to do here, and the sample code is too big and cluttered to post. So I put together the following to illustrate the structure of the object that I am trying to overcome. I have a method chain within an object, and I need to override one of the methods, but when I do so I loose access to the private methods and properties of it's containing object... I googled this for several hours, and the best that I can come up with is that I need to somehow use call() to access the scope of another object. But I don't understand call() or apply() at all, and I've read many tutorials on those... Code: window.oModule['Report'] = (function(){
var _privateProp1 = '' ,
_privateMethod1 = function(){
// ...
} ,
_publicMethod1 = function(){
// ...
} ,
_publicMethod2 = (function(){
var _sub_privateProp1 = '' ,
_sub_privateMethod1 = function(param1,param2){
// ...
} ,
_sub_publicMethod1 = function(){
// ...
} ,
_sub_publicMethod2 = function(start , end){ // I need to replace this method from somewhere else
var _neededValue = '';
for(var i = start ; i<end ; ++i) {
// ...
_neededValue += _sub_privateMethod1(arg1,arg2)
}
return _neededValue;
} ;
return{
'_sub_publicMethod1' : _sub_publicMethod1 ,
'_sub_publicMethod2' : _sub_publicMethod2
}
})() ;
return{
'_publicMethod1' : _publicMethod1 ,
'_publicMethod2' : _publicMethod2
}
})();
alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5)) // This works fine
oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){ // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
var _neededValue = '';
// ...
return start+end
}
alert(oModule.Report._publicMethod2._sub_publicMethod2(1,5)) // This will alert 6 (as intended)
oModule.Report._publicMethod2._sub_publicMethod2 = function(start,end){ // Doing this modifies the output of all expressions that already call the sub method (which is what I need)
var _neededValue = '';
for(var i = start ; i<end ; ++i) {
// ... different set of instructions
_neededValue += _sub_privateMethod1(arg1,arg2) // This line causes an error: _sub_privateMethod1 is undefined
}
return _neededValue
}
I am doing project exercises from a JavaScript book for a college class. I am creating a brand new .html document for each project. I was under the impression that each unique page name would have its very own cookie scope. But to my surprise it seems adding/loading cookies using 'document.cookie' doesn't assign new cookies to each page. I am seeing that when I try to load document.cookie in new .html pages there are cookies that were already created in past pages in the document.cookie property/string. So whats the 'default' scope of a document cookie. Do I have to set the domain property to get unique cookies for each .html page I create? Thanks for the help. Edit: Okay, it seems that cookies have a default scope of the folder your .html page resides in and all sub-folders that your page resides in. I moved my project folder so that it was a sibling of my projects folder and it got its own cookies that way. Recently I had an issue while trying to copy an array: I couldn't understand why modifying the new array caused modifications in the old array Old Pedant cleared that up nicely for me in http://www.codingforums.com/showthread.php?t=240020 Now I'm trying to understand closures, and scope and all that fun stuff thanks to Venegal's great tutorial at reallifejs.com and I have the following: Code: <script>
window.USER = (function(){
var Employees = [['Alex',1,'ft',1],['Olivia',2,'ft',1],['Brenda',3,'ft',1],['Michael',4,'ft',1]];
var info = ['Start String'];
var Setup = function(){
}
return{
CheckLogin : function(login){
this.info = Employees[login];
},
Reset : function(){
},
info:info,
Emp:Employees
};
})();
</script>
And I think I got all the kinks worked out, but there was one thing that I don't understand... Based on my other thread I expected the modification of USER.info to overwrite values in USER.Emp Don't get me wrong, I didn't want that to happen, I am just confused as to why it didn't I used the following buttons to test the values of USER.info and USER.Emp but again, writing to USER.info did not overwrite anything in USER.Emp.... Code: <script>
document.write('<button onclick="alert(USER.info)">USER.info read</button>');
document.write('<button onclick="USER.info=\'Test String\'">USER.info write</button>');
document.write('<button onclick="alert(USER.Emp)">Employees read</button>');
document.write('<button onclick="USER.CheckLogin(0)">Check Login</button>');
</script>
So what I guess I'm asking is why? Or maybe: what is happening here, and how does it differ from my last issue? Was it maybe a scope issue? Or maybe something more sinister...? Hello, I am trying add some animation effects to a navigation button and am having some problems with my code. I am using setInterval(); and the problem came with trying to clear it using clearInterval(); if i have this code then it seems to clear it fine: Code:
var i = 21;
function w(){
document.getElementById("homebtntop").style.height = i + "px";
i--;
}
function c(){
if(i<=6){
window.clearInterval(t);
}
}
function r(){
t = self.setInterval("w()",15);
}
function slideIn(){
t = self.setInterval("w()",15);
clearInterval(t);
}
but if i then try to call it from inside a function c(); it doesn't work: Code: var i = 21;
function w(){
document.getElementById("homebtntop").style.height = i + "px";
i--;
}
function c(){
if(i<=6){
window.clearInterval(t);
}
}
function r(){
t = self.setInterval("w()",15);
}
function slideIn(){
t = self.setInterval("w()",15);
clearInterval(t);
}
Any ideas? i am sorry if my code makes no ssense or is badly formatted, this is my first time with javasript. Thank you. Question: if I declare a variable in on js fiile, is this available to another js file that is loaded? Answer: yes, it's available (unless inside of a function or something) BUT: does it matter WHERE I declare this variable?? Let's say, I have the following in my HTML file: <script src="script/main.js"></script> And then at the very bottom of my HTML page before the </body> tag I have: <script type="text/javascript">var myvariable = "Sample Data";</script> So, is myvariable available to main.js? In simple tests I've done, yes it does seem to be available But... what if I have a lot of other js code running in between Does this change anything? Thanks OM This is a bit of a strange one. I have been trying to call a function in a child object from the parent object but the child seems to be going out of scope in onbeforeunload function. These function calls work outside of a onbeforeunload, so it only fails when called in onbeforeunload. I can fix it by making the child object a global but I was trying to avoid that. Anyone know why my childobject is out of scope when called in onbeforeunload? Notice I call that same function in windows onload event and it works fine. Here is the code (I have simplified as much as possible to just show the error): Code: <html>
<head>
<title>Broken Page</title>
<script language="javascript" type="text/javascript">
var myparent;
function windowLaunch()
{
myparent = new parent();
myparent.getchildvalue();
window.onbeforeunload = myparent.getchildvalue;
}
function parent()
{
this.mychild = new childobject("myinput");
this.getchildvalue = function()
{
var tmpval = this.mychild.returnvalue();
};
}
function childobject(thename)
{
this.myprop = thename;
this.returnvalue = function()
{
return (document.getElementById(this.myprop).value);
};
}
</script>
</head>
<body id="thebody" onload="windowLaunch();">
<div id="outerdiv">
<span title="This Input Box">My Input:</span><br />
<input id="myinput" style="width: 290px"/>
</div>
</body>
</html>
Hi all, I'm just starting out with Javascript as a development language and this will probably be a relatively simple problem for someone to solve for me. I am trying to access a variable (this.bodyEl.innerHTML) from within a function but get an error message indicating that it is "undefined". I know that it is a valid variable because I call it elsewhere outside of the inner function itself. I'm sure this is just a scope issue, but I'd welcome any suggestions on how to solve it with an explanation of where I've gone wrong if you have the time. Here's the code: Code: displayFeed: function(responseData) {
this.bodyEl.innerHTML = "xxxx"; // I can see this
var responseDoc = Presto.Util.parseXml(responseData);
var items = Ext.DomQuery.select("/rss/channel/item", responseDoc);
items.each(function(item, bodyHTML) {
var rssTitle = Ext.DomQuery.selectValue("/title", item);
var rssDescription = Ext.DomQuery.selectValue("/description", item);
var rssLink = Ext.DomQuery.selectValue("/link", item);
// but this results in an undefined error
this.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
}); // end of items processing
}
This is a fragment of the code from my script. The first access of "this.bodyEl.innerHTML" works fine, but the second access in the items.each loop doesn't and I get an undefined variable error. Is this a scoping problem, and if so how is it best solved. Thanks in advance, Innes (NZ) Hey everyone, I wanted to write my own script for a fade-in animation, since the ones I have found have got too many options or need some framework, which makes them unnecessarily big. I wanted to learn too. Unfortunately, the code didn't work as I wanted, and I commented some things so as to find out what's happening. The only function called from outside is fadeIn with a string as argument (in the example, this string is: d1296668690535). This is the code: Code: var fadems = 500; // Anim. duration in milliseconds
var fps = 20; // Frames per second
function fadeIn(elemId){
var frames = fadems/1000 * fps;
var delay = 1000 / fps;
var incrOp = 1 / frames;
//document.getElementById(elemId).style.zoom = '1';
setOp(elemId, 0);
for(i=1; i<=frames; i++){
debugOutLn("(fadeIn for) elemId = " + elemId);
setTimeout("setOp(" + elemId + "," + incrOp*i + ")", delay*i);
}
}
function setOp(elemId, val){
debugOutLn("(setOp) elemId = " + elemId + "; val = " + val);
// document.getElementById(elemId).style.opacity = val;
// document.getElementById(elemId).style.filter = 'alpha(opacity = ' + val * 100 + ')';
}
Code: function debugOutLn(str){
document.getElementById("debug").innerHTML += str + "<br />";
}
And this is the text it outputs (on Opera 11.01): Code: (setOp) elemId = d1296668690535; val = 0 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (fadeIn for) elemId = d1296668690535 (setOp) elemId = [object HTMLDivElement] ; val = 0.1 (setOp) elemId = [object HTMLDivElement] ; val = 0.2 (setOp) elemId = [object HTMLDivElement] ; val = 0.30000000000000004 (setOp) elemId = [object HTMLDivElement] ; val = 0.4 (setOp) elemId = [object HTMLDivElement] ; val = 0.5 (setOp) elemId = [object HTMLDivElement] ; val = 0.6000000000000001 (setOp) elemId = [object HTMLDivElement] ; val = 0.7 (setOp) elemId = [object HTMLDivElement] ; val = 0.8 (setOp) elemId = [object HTMLDivElement] ; val = 0.9 (setOp) elemId = [object HTMLDivElement] ; val = 1 Why is an object reference assigned to what was previously a string? Thanks for the help! Hello... Thanks for reading... I am getting an undefined error when i try to get a value from this array in the interior loop... Code: // This is the array I am trying to access AuditTable [0] = ["Visio Modifed date","Word Modified Date","User Status","User Comment","Last Audit","Audit Status","Audit Comment"] AuditTable [1] = ["11/23/2009 8:52:18 AM","missing","OK","user comment number 1","1/1/2009","ok","audit comment number 1"] AuditTable [2] = ["11/24/2009 12:21:19 AM","missing","Out of Date","Changes from 2008 not implemented","1/2/2009","Out of Date","needs update"] AuditTable [3] = ["11/22/2009 9:24:42 PM","missing","Incomplete","Document doesnt cover all possibilities","1/3/2009","Inadequate","needs update"] I have hard coded values and had success such as: Code: data = AuditTable[1][0] But when I put the vars associated with the loop in I get an undefined error - AuditTable[i] is undefined: Code: // produces error data = AuditTable[i][j] //Works but retrieves wrong data data = AuditTable[j][i] //Works but retrieves wrong data data = AuditTable[1][i] //Works but retrieves wrong data data = AuditTable[j][2] I must be trying to access the array incorrectly or something... I have defined all the vars, and tried many combinations, alerted the values of both vars so I can prove it is not a scope issue... Am I missing something obvious? Thanks much... Code: var reportArray=new Array();
var reportData, title, subTitle, data;
for(i in parmarray)// loop thru AuditTable array and get values
{
title = '<div style="font-family:verdana; font-size:14px; font-weight:bold; margin:25px 0px 5px 30px">';
title += namearray[i][0];
title += '</div>';
reportArray.push(title);//Take compiled variable value and put it into array
for(j=0; j < AuditTable[0].length; j++)// loop thru AuditTable array and get values
{
subTitle = AuditTable[0][j];//points to first row of AuditTable where the labels are
data = AuditTable[1][0];//points to the current row where actual data is
html = i + j +'<div style="font-family:verdana; font-size:12px; color:#696969; font-weight:bold; margin-left:30px;">';
html += subTitle;
html += '</div><div style="font-family:verdana; font-size:12px; color:#a9a9a9; margin-left:30px; margin-bottom:10px">';
html += data;
html += "</div>";
reportArray.push(html);// put results into array
}
}
|
|||||||