Use object oriented on JavaScript
I am new to JavaScript and am trying to learn how to upload images on my screen and then swap it. The way I manage it is using the following code:
for(i = 0; i <= 5; i++) {
N= " + i;
document.write("<img id= " + N + " src='graphics/" + N + ".jpg' onclick='swap(id)'/>");
}
However, I want to learn how t开发者_如何学运维o use an object orriented way to do it and work with objects, but I found it very difficult to make it work. How to use OO? Using OO, I want to use an array of 3*3 size and swap the images on mouse click.
A good start is Working with Objects from the Mozilla Development Center(/Network).
Actually you are already working with objects, as nearly everything in JavaScript (even functions) are objects.
You also have to learn what the Document Object Model (DOM) is and how it connects to JavaScript.
And it is not wrong to read the whole MDC JavaScript guide, especially about functions as functions are very powerful in JavaScript (mostly because they are objects).
Confused now? Don't worry, read and learn :)
This might be a good strarting point:
var myImage = document.getElementByID('myImage');
myImage.src = 'someurl';
You could have a look at an introductive article on the Mozilla Developer Network.
Furthermore I created this small – hopefully illustrating – example. (Notice the private method and what happens when you try to access it from "outside"!)
<body>
<script type="text/javascript">
function Gallery() {
// private members
var apple = document.getElementById('apple');
var orange = document.getElementById('orange');
var hasSwapped = false;
// private method
hasSwapped = function() {
hasSwapped = true;
}
// public method
this.swap = function() {
var swap = apple.src;
apple.src = orange.src;
orange.src = swap;
hasSwapped();
}
// public method
this.getInfo = function() {
return hasSwapped ? "Swapped!" : "Not swapped!";
}
}
</script>
<img src="apple.jpg" id="apple" />
<img src="orange.jpg" id="orange" />
<script type="text/javascript">
alert("Starting ...");
var gallery = new Gallery();
gallery.swap();
alert(gallery.getInfo());
if(gallery.hasSwapped()) {
alert("Swapped?!");
}
</script>
</body>
OOP with JavaScript is a bit different. Like you, I'm relatively new to this topic so I have been trying to teach myself over the past couple of months. I would recommend reading over some of the articles posted by the other users as well as some of these:
- http://eloquentjavascript.net/contents.html
- https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Details_of_the_Object_Model#Class-Based_vs._Prototype-Based_Languages
- http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742
You didn't really specify what exactly you wanted to do with OOP in terms of code, so I can't really provide specific code, but I highly recommend reading these articles and others that you find on the web to get a general idea of what JavaScript is like, how it works with the DOM, and how it is related to OOP.
I hope this helps.
Hristo
This is an simple example of how to make an object and create "methods" to it.
function Hej( name )//Define the function that will define your Object.
{
//DEFINE OBJECT VARIABLES
this.name = name;
//DEFINE THE METHODS
this.Get_Name = Get_Name;
function Get_Name()
{
return name;
}
}
Print to console
xx = new Hej("kalle"); //Create a new object
console.log( xx.Get_Name() );
yy = new Hej("pelle"); //Create a new object
console.log( yy.Get_Name() );
In Chrome this will print it out to the console.
In Chrome you press F12 to go to find the console.
Test the code with http://jsfiddle.net/
加载中,请稍侯......
精彩评论