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 to 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.
-
codeproject.com/Articles/5608/…The Demz– The Demz2013年07月28日 17:05:54 +00:00Commented Jul 28, 2013 at 17:05
5 Answers 5
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 :)
1 Comment
This might be a good strarting point:
var myImage = document.getElementByID('myImage');
myImage.src = 'someurl';
Comments
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>
Comments
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
2 Comments
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/