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/