Geek Answers Handbook

How to create a class in javascript?

This is what I got so far, and it doesn’t work at all :( all the variables are zero in my class, and the update is never called.

I mean the programming class, not the css class. I.E. not (.movingdiv {color: # ff0000;})

<!DOCTYPE html> <html lang="en"> <head> <title>Class Test</title> <meta charset="utf-8" /> <style> body { text-align: center; background-color: #ffffff;} #box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;} </style> <script type="text/javascript"> document.onkeydown=function(event){keyDown(event)}; document.onkeyup=function(event){keyUp(event)}; var box = 0; function Player () { var speed = 5; var x = 50; var y = 50; } function update() { box.style.left = this.x + "px"; box.style.top = this.y + "px"; box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ this.x + "<br /> Y: " + this.y + "</h6>"; } var player = new Player(); var keys = new Array(256); var i = 0; for (i = 0;i <= 256; i++){ keys[i] = false; } function keyDown(event){ keys[event.keyCode] = true; } function keyUp(event){ keys[event.keyCode] = false; } function update(){ if(keys[37]) player.x -= player.speed; if(keys[39]) player.x += player.speed; player.update(); } setInterval(update, 1000/60); </script> </head> <body> <div id="box" ></div> <script type="text/javascript"> box = document.getElementById('box'); box.innerHTML = "<h6 style=\"margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;\">X: "+ player.x + "<br /> Y: " + player.y + "</h6>"; </script> </body> </html>

Edit: OK, I think I messed up here. The first time I tried to make a class, I seemed to mess up. After retrying, it seems I can now use the "1 Function Use" function in a Meders message.

the real problem is that javascript doesn't know what to do when it hits this line in my real code:

 box.style.background-position = "" + -(this.frame * this.width) + "px " + -(this.state * this.height) + "px";

He also seems to suffocate anytime I put

box.style.background-color

So now I need a question how to set the value for style variables in javascript with the name “-” in the name. I will send the test in a second

+6
javascript html oop class
source share
3 answers

According to this article, there are three ways to define a class in JavaScript:

1 Using the function

Example:

  function Apple (type) { this.type = type; this.color = "red"; this.getInfo = getAppleInfo; } function getAppleInfo() { return this.color + ' ' + this.type + ' apple'; } var apple = new Apple('macintosh'); apple.color = "reddish"; alert(apple.getInfo());

2 Using JSON

  var apple = { type: "macintosh", color: "red", getInfo: function () { return this.color + ' ' + this.type + ' apple'; } } apple.color = "reddish"; alert(apple.getInfo());

3 Singleton using function

  var apple = new function() { this.type = "macintosh"; this.color = "red"; this.getInfo = function () { return this.color + ' ' + this.type + ' apple'; }; } apple.color = "reddish"; alert(apple.getInfo());
+13
source share

var makes a private variable, a prefix with this instead in your constructor:

  function Player () { this.speed = 5; this.x = 50; this.y = 50; var pri = 'private'; this.update = function() { if(keys[37]) this.x -= this.speed; if(keys[39]) this.x += this.speed; } } var player = new Player; alert( player.speed ) // should alert 5 alert( player.pri ) // should fail or say undefined

You can also do ...

  var player = { speed: 5, x:50, y:50, update: function() { // code } }

And then get rid of new Player and the Player constructor.

+6
source share

You use Player as a constructor, but it is not configured as one.

Instead of using var inside a constructor function, for example var speed = 5; you need to use

 this.speed=5;

Then it will return the player instance. Be that as it may, you simply set some variables and return nothing in particular.

Now, with regard to exploring the creation and inheritance of JS objects, I propose checking out the resources of Douglas Crockford. As you may know, it is not intended for classes like Java, PHP, Python, etc. JavaScript has prototype inheritance based on existing cloning objects.

Crockford discusses doing class inheritance in JS in this old article . The problem is that you are not using JS to do this best. This treatise may be of interest when it explains one way to clone objects. This is an Object.beget method that is good but has limitations. The best way is a "functional" method. Sorry for the PowerPoint links, but you should read the following: http://www.crockford.com/codecamp/The%20Good%20Parts%20ppt/4%20prototypal.ppt and this: http://www.crockford.com/codecamp /The%20Good%20Parts%20ppt/5%20functional.ppt

http://video.yahoo.com/watch/630959/2974197 is one version of the video in which Crockford discusses all aspects of JS. http://www.youtube.com/watch?v=hQVTIJBZook is different.

I really recommend getting the JavaScript book : Good Parts for Thoroughly Running Pragmatic Advanced JavaScript.

+1
source share

More articles:


All Articles