CODEWITHSUNDEEP
javascriptobjectattributes
user3180077
user3180077

Reputation: 633

Are there specific conventions for adding attributes to Javascript objects?

So I have an array (of length 1 for the moment) in Javascript. It contains an Image object for the moment. Basically, I made an animation that works perfectly with this code : 

ants[0]._x = 5;
ants[0]._y = 5;

and then, in my updating function : 

 function animate() {

  context.drawImage(ants[0], 0, 0, 158, 160, ants[0]._x, ants[0]._y, 158, 160);
  ants[0]._x += 5;
  ants[0]._y += 5;

 }

The problem is, when I change _x and _y to x and y (like so : 

ants[0].x = 5;    
ants[0].y = 5;

and everywhere else in the code) The animation won't work. Moreover, x and y equal to 0 even if I initialized them to 5.

So my question is, is it because my images are Images objects and to add new attributes to a built-in object, you have to add underscores ?

Upvotes: 0

Views: 73

Answers (3)

jasonscript
jasonscript

Reputation: 6170

An Image object already has it's own readonly x and y properties. These correspond to the image width and height. Edit: actually corresponds to the position on the page If you're trying to set arbitrary values in your image, you need to create new variables. Previously you were doing this with the underscore character (_x), but you can do it with other characters too

For example:

ants[0].myProperty = 'stackoverflow';
console.log(ants[0].myProperty);            // will print 'stackoverflow

You can view all the properties contained in an object with

var ants = new Image;
for (var p in ants) {
    console.log(p);
}

MDN has more information on the Image element

Upvotes: 1

Barmar
Barmar

Reputation: 780909

Yes, there's a convention, called Custom Data Attributes. Attributes that begin with data- are reserved for the application, they're guaranteed never to affect the semantics of the elements in the browser.

ant[0].setAttribute("data-x", 5);
ant[0].setAttribute("data-y", 5);

See the official W3C documentation and this blog post by John Resig summarizing it.

Upvotes: 0

LetterEh
LetterEh

Reputation: 26696

There is nothing stopping you from assigning x and y under regular circumstances (ie: if you're using home-made objects, and not built-in language/browser objects). When you start playing with reserved properties of protected objects, there are all kinds of weird things that can happen, from a browser letting you break the page completely until you refresh, or a browser letting you try for hours to change the definition of window.

It all comes down to how you assign them, how you use them after, whether you're swapping objects out of your array...

...and it's an Image object, so you need to make sure that the image is actually loaded before you can do much with it.

There's really nothing stopping you from doing things like:

var my_character = {
    x : 0,
    y : 0,
    width  : 32,
    height : 64,
    sprite_sheet  : loadedImage,
    current_frame : 6,
    update : function () {
        my_character.current_frame += 1;
        my_character.x += 3;
        my_character.y -= 2;
    }
};


context.drawImage(
    my_character.sprite_sheet,
    x - my_character.width/2,
    y - my_character.height/2,
    my_character.width,
    my_character.height,
    my_character.width * current_frame,
    0,
    my_character.width,
    my_character.height
);

That's not a particularly elegant way of doing it, but seriously, if you wanted to then add a my_character.$ = "35.99";, you could.

It's something more than "x" and "y".

If you wanted to use something like my_character.° = 32.5; I believe you'd have to use my_character["°"] = 32.5;

Upvotes: 0

Related Questions