What is this kind of notation called 3

[guitardave78]

Hi all. I have been writing some javascript stuff using the following style. I picked it up somwhere and it is very much like classes in vbscript. Can anyone tell me what it is called so i can research it a bit more!!

var cookie = {
	set : function(name,value,expiredays){
		var exdate=new Date();
		exdate.setDate(exdate.getDate()+expiredays);
		document.cookie=name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate);
	},
	get : function(name){
		if (document.cookie.length>0){
			var cookies = document.cookie
			cookies = cookies.split(";")
			for(var n=0;n<cookies.length;n++){
				var namePos = cookies[n].indexOf(name.toLowerCase() + "=");
				if(namePos >= 0){
					var value = cookies[n].split("=")[1]
					value = value.replace(/\+/g, ' ');
					return(unescape(value));
					break;
				}
			}
		}
		return null
	},
	remove : function(name){
		cookie.set(name,null,-1);
	}
}

}...the bane of my life!

http://www.fuzzyd.co.uk

 

[adam0101]

It's short-hand for creating a custom object.

These three examples all produce the same object:

// [b]Example 1[/b]
var obj = {
  myproperty: 1,
  mymethod: function(){
    alert("Hi");
  }
}

// [b]Example 2[/b]
function obj(){
  this.myproperty = 1;
  this.mymethod = function(){
    alert("Hi");
  }
}

// [b]Example 3[/b]
obj = function(){}
obj.prototype.myproperty = 1;
obj.prototype.mymethod = function(){
  alert("Hi");
}

Adam

http://adameslinger.blogspot.com/

 

[tsdragon]

Thanks for the very clear answer. Useful to know.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[jemminger]

also known as "object notation", and similar in syntax to JSON (i don't think JSON technically allows function definitions)

-jeff

http://www.jeffemminger.com

lost: one sig, last seen here.

 

[guitardave78]

That was just what I needed!!!! thanks.

}...the bane of my life!

http://www.fuzzyd.co.uk

 

[BillyRayPreachersSon]

Heheh - this brings back memories from Jan 2004:

What is this storage container called? (thread216-752643)

Amazing how these things crop up every so often!

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[tsdragon]

I think you're correct that JSON doesn't allow function definitions. Not because you can't so much as because there's very little reason. JSON is designed to pass data, and a function definition technically isn't data. That being said, unless you're using a JSON parser instead of simply using eval, there really isn't any reason why you can't return a function definition. If you ever come up with a good reason to do so I'd like to hear it.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[guitardave78]

Ok, why does this not work

var test = {
	w: "wibble",
        f: "flurb",
	start : function(){
		alert(t + " " + f);
	}
}
test.start()

}...the bane of my life!

http://www.fuzzyd.co.uk

 

[guitardave78]

Ok ignore that

var test = {
    w : "wibble",
    f : "flurb",
    start : function(){
        alert(test.t + " " + test.f);
    }
}
test.start()

}...the bane of my life!

http://www.fuzzyd.co.uk

 

[adam0101]

I need to fix my examples. The first example created an instance of an object, where the next two only created the classes used to create an instance. This is what it should be:

[b]// Example 1[/b]
var myObj = {
  myproperty: 1,
  mymethod: function(){
    alert("Hi");
  }
}

[b]// Example 2[/b]
function obj(){
  this.myproperty = 1;
  this.mymethod = function(){
    alert("Hi");
  }
}
var myObj = new obj();

[b]// Example 3[/b]
obj = function(){}
obj.prototype.myproperty = 1;
obj.prototype.mymethod = function(){
  alert("Hi");
}
var myObj = new obj();

Adam

http://adameslinger.blogspot.com/

 

[guitardave78]

Is there a prefered method?
I really like using the first one as it is much easier to remember!!

}...the bane of my life!

http://www.fuzzyd.co.uk

 

[1DMF]

thanks for the OO lesson Adam!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[adam0101]

Is there a prefered method?

It really depends. If you just need a quick object to hold data, the first example works great. But if you want an object that you can pass arguments into the constructor, you'd have to use #2 or #3.

Personally, I've taken to using a combination of all three when creating really big complex objects. I usually put each class in a separate file. For example, this is a custom object I created to use with a custom ASP.NET server control:

[green]/*** NAMESPACE ***/[/green]
var Acme = window.Acme || {};


[green]/*** CONSTRUCTOR ***/[/green]
Acme.MessageViewer = function(ContentDivId, MessageDivId){
	
	[green]// Add this instance to the static collection.[/green]
	Acme.MessageViewer.Collection[Acme.MessageViewer.Collection.length] = this;
	
	[green]// Define properties.[/green]
	this.id = Acme.MessageViewer.Collection.length - 1;	[green]// Unique id of this object.[/green]
	this.ContentDiv = document.getElementById(ContentDivId);
	this.MessageDiv = document.getElementById(MessageDivId);
	this.Fader = null;
	
	[green]// Attach methods to page events.[/green]
	Acme.EventHelper.AddEvent( window, "onload", new Function("Acme.MessageViewer.Collection["+this.id+"].FadeMessage()") );
	Acme.EventHelper.AddEvent( window, "onload", new Function("Acme.MessageViewer.Collection["+this.id+"].RestoreScrollPosition()") );
	Acme.EventHelper.AddEvent( window, "onunload", new Function("Acme.MessageViewer.Collection["+this.id+"].SaveScrollPosition()") );
	Acme.EventHelper.AddEvent( this.MessageDiv, "onmouseover", new Function("Acme.MessageViewer.Collection["+this.id+"].CancelFadeMessage()") );
}


[green]/*** INSTANCE METHODS ***/[/green]

[green]// Saves the scroll position of the content Div before a post-back.[/green]
Acme.MessageViewer.prototype.SaveScrollPosition = function(){
	if(this.ContentDiv != null){
		Acme.CookieHelper.CreateCookie('MessageViewer' + this.id + '_ScrollPosition', this.ContentDiv.scrollTop, 0);
	}
}

[green]// Restores the saved scroll position of the content Div after the post-back.[/green]
Acme.MessageViewer.prototype.RestoreScrollPosition = function(){
	if(this.ContentDiv != null && location.href == document.referrer){
		this.ContentDiv.scrollTop = Acme.CookieHelper.ReadCookie('MessageViewer' + this.id + '_ScrollPosition');
	}
}

[green]// Starts fading the message Div and eventually hides it if the user doesn't mouseover.[/green]
Acme.MessageViewer.prototype.FadeMessage = function(){
	[green]// Only fade if it has been set to visible on the server-side.[/green]
	if(this.MessageDiv){
		var startColor = new Acme.RGB(255,255,225);
		var endColor = new Acme.RGB(236,233,216);
		this.Fader = new Acme.Fader(this.MessageDiv, startColor, endColor, true);
		this.Fader.Fade(40, 1, 4000);
	}
}

[green]// Resets the color of the MessageDiv and stops the hiding of it.[/green]
Acme.MessageViewer.prototype.CancelFadeMessage = function(){
	if(this.Fader != null) this.Fader.CancelFade();
}


[green]/*** STATIC PROPERTIES ***/[/green]

[green]// Holds references to all MessageViewer objects created.
Acme.MessageViewer.Collection = [];


[green]/*** STATIC METHODS ***/[/green]

Acme.MessageViewer.ButtonMouseOver = function(lnk){
	lnk.className = 'MessageViewerButtonMouseOver';
}

Acme.MessageViewer.ButtonMouseOut = function(lnk){
	lnk.className = 'MessageViewerButtonMouseOut';
}

So in my ASP.NET code, I write out this to create a new object.

<script language='JavaScript'>new Acme.MessageViewer('TheContentDivId', 'TheMessageDivId')</script>

Adam

http://adameslinger.blogspot.com/