object oriented JavaScript

Question

Is there any error in my code esp var newpoint[0] = new Point; . I wnat to know on how to do oop in javascript

function Point()
{
    var x;
    var y;
}

var length = 1;
var arrayindex;
var newpoint[0] =  new Point;
newpoint[0].x = 10;
newpoint[0].y = 10;
for(i=0 ; i<10; i ++)
{
    newpoint[length].x = 10*i;
    newpoint[length++].y = 10*i;
}

for(arrayindex in newpoint )
{
    alert('x='+newpoint[arrayindex].x +'y='+newpoint[arrayindex].y);
}

EDIT : Thanks all . I have come up with two code need to know which one is better any any sugesstion and protips . both work

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

var length = 0;
var newpoint = [];

for(i=0 ; i<10; i ++)
{
    newpoint[length] =new Point();
    newpoint[length].x = 10*i;
    newpoint[length++].y = 10*i;
}

for(arrayindex in newpoint )
{
    alert('x='+newpoint[arrayindex].x +'y='+newpoint[arrayindex].y)
}

and

var length = 0;
var newpoint = [];
for(i=0 ; i<10; i ++)
{
    newpoint[length] = {};
    newpoint[length].x = 10*i;
    newpoint[length++].y = 10*i;
}
for(var arrayindex in newpoint )
{
    alert('x='+newpoint[arrayindex].x +'y='+newpoint[arrayindex].y)
}

Answer 1

Please see vo Wetzel's answer

You may be looking some thing similar to this

// OOP style template obj
Point = {
    x:null,
    y:null
};

var newpoint = new Array(); // An array to hold Point type objects

// now add some entriedsto the above array
for(var i=0 ; i<10; i ++)
{
    newpoint[i] = new Point(); // create a new point object
    newpoint[i].x = 10*i; // set the values of the point object you just created
    newpoint[i].y = 10*i;
}

for(var arrayindex in newpoint )
{
    alert('x='+newpoint[arrayindex].x +', y='+newpoint[arrayindex].y);
}​

Answer 2

You can use a constructor function in order to create points without having to type a lot of things. When is invoked with the new keyword, the this keyword in this function refers to the object being created.

This constructor function takes x and y as arguments and put it in the object.

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

Then you want to have an array of points. Before using it, you need to create it first.

var newpoint = [];

Adding new points is easy. With the help of the constructor of function it can be short of concise.

for (var i = 0; i < 10; i ++) {
    newpoint.push (new Point(10 * i, 10 * i));
}

• new Point(10 * i, 10 * i) creates a new instance of Point with the specified x and y coordinates.
• newpoint.push is used to add the passed argument to the array. So no more length tracking!
• Combined, this creates a new point, and adds it to the array.

Then to display it, you can iterate over the array the same way as before. Note that this time I use newpoint.length to mean the length of the array.

If you can the number 10 above you don't have to make any modifications to this loop, because we get the length dynamically.

for (var i = 0; i < newpoint.length; i ++) {
    alert('x=' + newpoint[i].x + ' y=' + newpoint[i].y);
}

Answer 3

newpoint has to be an array first, you cannot use:

var newpoint[0] = new Point(); //newpoint has to be declared on its own to be an array if you like to use [0] indexing;

Use

var newpoint = [];
newpoint[0] = new Point();

or

var newpoint = [new Point()];  //Cipi's suggestion for oneliner

You need () after the type. The new keyword calls the constructor method which can accept parameters so you need to use ().

var newpoint[0] = new Point();

Also the class ddeclaration is not right The declaration is your constructor and has to return it self:

function Point() 
{
    this.x = null; //Or whatever default value you like
    this.y = null; 
    /*
    "This" makes the x and y variables members of the object instead of 
    local variables if the constructor function, without "this" they will 
    be forgotten as soon as the function ends. */
}

You can add methods either in the constructor

function Point() 
{
    this.x = null; //Or whatever default value you like
    this.y = null; 
    this.list = function () 
    { 
        alert(this.x);
    };
}

or using prototype

function Point() 
{
    this.x = null; //Or whatever default value you like
    this.y = null; 
}    
Point.prototype.list = function () 
{
     alert(this.x);
}

Answer 4

I think that you want to do this: var newpoint = [new Point]. (The way you do is initialising element 0 with new object, but element 0 of newpoint doesn't exist, because you never said that newpoint is an array.) That way you initialised first element of an array newpoint to that new Point, so this: newpoint[0].x = 10 can execute.

But then this: newpoint[length].x = 10*i will fail because your array only has one element initialised and it is newpoint[0], all others are undefined. I think you want to initialise them first (all 10) like so for example:

for(var i=1; i<10; i++)
{
    newpoint.push(new Point());
}

Also, change Point like below if you want to be able to see x and y in the object you created!

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

Then your code will run fine...

Answer 5

Before I comment your code, read a Tutorial: https://developer.mozilla.org/en/JavaScript/Guide

And now for entertaiment:

function Point()
{
    var x; // great a local variable!
    var y; // another one! they drop out of scope... (protip: use 'this')
}

var length = 1; // ???
var arrayindex; // better declare that in the for
var newpoint[0] =  new Point; // that works yes, but only the `new Point` part, 'newpoint[0]' what is that supposed to do?
newpoint[0].x = 10; // there's no x property on a `Point` here
newpoint[0].y = 10;
for(i=0 ; i<10; i ++) // i leaks into global scope
{
    newpoint[length].x = 10*i; // ??? Fails, newpoint is not an array
    newpoint[length++].y = 10*i; // Again, what's the point of this?
}

for(arrayindex in newpoint ) // great! a extremely slow for in to iterate over an array..
// pro tip, this will enumerate over all the _properties_ of the _object_
{
    // usual complain about the missing 'hasOwnProperty' call (TM)
    alert('x='+newpoint[arrayindex].x +'y='+newpoint[arrayindex].y);
}

Answer 6

Are you trying to use the x and y as properties? you do not need to declare them in function. You can directly use them on a javascript object.

var newpoint = []; // Declares newpoint as array
var length = 1;
for(var i=0 ; i<10; i ++)
{
    newpoint[length] = {}; //Declares a new object.
    newpoint[length].x = 10*i;
    newpoint[length++].y = 10*i;
}

The .x and .y are automatically associated as properties for the object