JavaScript - Whats The Scope Of A Cookie?

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

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.

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...?

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.

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>

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.

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!

Origins?

note: it's not really seachable, because if you search javascript foo, or javascript foo origins example javascript just shows up...

Code:

<html>
<title>hi</title>
<Head>
<SCRIPT language="JavaScript">
<!--

var rand_url= new Array()
rand_url[0]="http://www.facebook.com";
rand_url[1]="http://www.youtube.com";
rand_url[2]="http://www.bing.com";
rand_url[3]="http://www.yahoo.com";
rand_url[4]="http://www.google.com";

var rand_num= Math.floor(Math.random()*5);

//-->
</SCRIPT>
</head>
<body>
<H2>Try your luck!</H2>

 <a href="javascript:func(rand_url[rand_num])"><img src="http://www.mycasinogames.org/editor/assets/button_playnow.jpg"
  alt="CLICK ME!"/></a> 
</body>
</html>

I'm testing out some JavaScripts, and im using one that give a random link. So, basically they have to click a "Play Now" IMAGE to launch ONE of the links above in the "rand_url" However what is in red isn't working. When clicking the image, it does nothing. Can you help?

i have been working on Javascript and HTML for long time but never had such kind of a problem. A very simple code isnt getting executed. Please help me out with what i am missing : Here is the HTML code with javascript(a very simple webpage to say hello) :

Code:

<html>

<head>

<script type = "Javascript">
function say_hi()
{
 window.alert("Said hiii..");
}

</script>
</head>

<body>
ahgdahsgdhagshd
<input type = "checkbox" onclick= say_hi()/>click the check box
sdfsdf

</body>

</html>

Problem is that say_hi() isnt getting called. I have tried :

Code:

onclick= "say_hi();"

also.. but still its not getting called when i am clicking the checkbox which it should!!! Yes but if i am writing :

Code:

onclick= "window.alert("Hi");"

then its getting executed!!!. Whats going on here in my code.
Thanks in advance

Simply what is wrong with my code. The following code is for a simple slideshow that is supposed to accept a range of images to display.

Its for a website where it shows all the store for a company and when you rollover the image of it is plays a slideshow of images. If you have any other way of doing this that would be easier than please post it here. It must work in all browsers. As you can see there are lots of images to me loaded for this

Code:

<!--
var image1=new Image()
image1.src="contact/images/wingham/01.jpg"
var image2=new Image()
image2.src="contact/images/wingham/02.jpg"
var image3=new Image()
image3.src="contact/images/wingham/03.jpg"
var image4=new Image()
image4.src="contact/images/wingham/04.jpg"
var image5=new Image()
image5.src="contact/images/wingham/05.jpg"
var image6=new Image()
image6.src="contact/images/wingham/06.jpg"

var image7=new Image()
image7.src="contact/images/listowel/01.jpg"
var image8=new Image()
image8.src="contact/images/listowel/02.jpg"
var image9=new Image()
image9.src="contact/images/listowel/03.jpg"
var image10=new Image()
image10.src="contact/images/listowel/04.jpg"
var image11=new Image()
image11.src="contact/images/listowel/05.jpg"
var image12=new Image()
image12.src="contact/images/listowel/06.jpg"

var image13=new Image()
images13.src="contact/images/hanover/01.jpg"
var image14=new Image()
images14.src="contact/images/hanover/02.jpg"
var image15=new Image()
images15.src="contact/images/hanover/03.jpg"
var image16=new Image()
images16.src="contact/images/hanover/04.jpg"
var image17=new Image()
images17.src="contact/images/hanover/05.jpg"
//-->

<!--
//variable that will increment through the images
var step=1
function slideit(start,finish,action){
   if(action == 'abort'){
        return
    }
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<finish){
step++
}
else{
step=start
}
//call function "slideit()" every 2.5 seconds
timer = setTimeout("slideit(start,finish)", 1000);
}

function slideOff() {
		document.images.slide.src=eval("image1.src")
		clearTimeout(timer);
}


//Called something like this: slideit(1,6)//

Im looking at how or what this effect is called i am not even sure if it is javascript i assume it is from looking at the code.

But i cant seem to convert it to what i want. So if someone could point me to a more simple version of this code or what the technique is called that would be great.

Here is the page.
http://www.pizzacapers.com.au/the-me...nature-pizzas/

What i am talking about:
You click the pizza and it comes up inside of the border picture on the left side of the page.

Thanks