Member Avatar for gunnarflax

Hi! I've started learning writing javascript objects with literal notation...

something = {
   variable: "value",
   method: function(){
      //code
   }
}

instead of the usual syntax...

function something(){
   variable = "value";

   function method(){
      //code
   }
}

the problem is that it's hard for me to adapt procedures which I'm used to within the normal syntax for the literal notation. E.g:

example = {
   variable: "whee"
}

Is this variable global or local? If it's local, how do I declare a variable globally? I also wonder if it is possible to bind events to objects from within the object? And if I'm correct - jQuery is coded this way, but how can they then make use of their selector:

$("div")

When it is an object defined with literal notation that doesn't have a constructor?

Any help is welcome, advice, links to tutorials, whatever you got! :)
Thanks!

  • 2 Contributors
  • 2 Replies
  • 191 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by gunnarflax
Member Avatar for gumape

In JavaScript, object literals are instances of the Object object.
For example:

var point = {x : 100, y : 50};
alert (point.x);    // or point["x"]
alert (point.y);    // or point["y"]

point is an instance of the Object object and it has two properties (x and y).

This example is the same as the previous one, but it declares members with quoted names.

var point = {"x" : 100, "y" : 50};
alert (point.x);    // or point["x"]
alert (point.y);    // or point["y"]

Further examples:

var point = {x : 100, y : 50, sum: function () {return this.x + this.y}};
alert (point.sum ());    // 150
var point = {};
point.x = 100;
point.y = 50;
point.sum = function () {return this.x + this.y};
alert (point.sum ());    // 150

If you want to create a new object type not an instance of an object, you can use the function keyword (or the Function object):

function Point (x, y) {
	this.Init (x,y);
}

	// Methods of the Point object
Point.prototype.Init = function (x, y) {
	this.x = x;
	this.y = y;
}

Point.prototype.Sum = function () {
	return this.x + this.y;
}


	// create an instance of the Point object
var point = new Point (100, 50);
alert (point.Sum ());

In that case, point is an instance of the Point object. The Point object has two methods (Init and Sum).
When a new Point instance is created the Point method is called which calls its Init method (this.Init (x, y)).
The Init method initializes the x and y properties of the Point object.

Finally an example that shows how to register object methods as event handlers:

<head>
    <script>
			// DisplayNumbers object
		function DisplayNumbers (elem, from, to, delay) {
			this.Init (elem, from, to, delay);
		}

		DisplayNumbers.prototype.Init = function (elem, from, to, delay) {
			this.elem = elem;
			this.from = from;
			this.to = to;
			this.delay = delay;

			this.act = this.from;

				// save a reference to the current object
			var _this = this;
				/* use the saved reference within the registered function 
				 (the 'this' statement within the registered function refers to the function
				 not the current instance of DisplayNumbers) */
			this.timerID = setInterval (function () {_this.Next ()}, this.delay);
		}

		DisplayNumbers.prototype.Next = function () {
			if (this.act > this.to) {
				clearInterval (this.timerID);
				return;
			}

			this.elem.innerHTML += this.act;
			this.act++;
		}

			// Attach DisplayNumbers instances to textareas
		function OnDocLoad () {
			var output1 = document.getElementById ("output1");
			var output2 = document.getElementById ("output2");

			var displayNumbers1 = new DisplayNumbers (output1, 1, 9, 400);
			var displayNumbers2 = new DisplayNumbers (output2, -9, 9, 200);
		}
    </script>
</head>
<body onload="OnDocLoad ()">
    <textarea id="output1"></textarea>
    <textarea id="output2"></textarea>
</body>

You can find several examples and detailed descriptions on the following pages:
Object object,
Function object,
this keyword .

Edited by gumape because: n/a
commented: A very elaborate answer! +1
Member Avatar for gunnarflax

Thank you for your very elaborate reply! It has been very helpful! :) I just have one more question to be answered - the global variable. The thing is, I work with jQuery in my project and when I write code like this...

example = {
   variable: "value",
   method: function(){
      $("#element").post("path/to/file.php", function(){
          alert(this.variable);
      }
   }
}

The problem here is that the "this"-keyword refers to #element instead of the variable example.variable. So how can I be able to use variable inside of the ajax-post function?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.