Используйте объект, ориентированный на JavaScript - PullRequest
Новая
       4

Используйте объект, ориентированный на JavaScript

1 голос
/ 12 декабря 2010

Я новичок в JavaScript и пытаюсь научиться загружать изображения на мой экран, а затем поменять его местами.Я управляю им с помощью следующего кода: 

 for(i = 0; i <= 5; i++) { 
  N= " + i;
  document.write("<img id= " + N + " src='graphics/" + N + ".jpg' onclick='swap(id)'/>");  
}

Однако я хочу научиться использовать объектно-ориентированный способ сделать это и работать с объектами, но мне было очень трудно это сделатьРабота.Как использовать ОО?Используя OO, я хочу использовать массив размером 3 * 3 и менять местами изображения одним щелчком мыши.

Ответы [ 5 ]

6 голосов
/ 12 декабря 2010

Хорошее начало - Работа с объектами из Центра разработки Mozilla (/ Network).

На самом деле вы уже работаете с объектами, поскольку почти все в JavaScript (даже функции) является объектами.

Вам также необходимо узнать, что такое объектная модель документа (DOM) и как она подключается к JavaScript .

И правильно читать полное руководство по JavaScript MDC , особенно о функциях, поскольку функции очень мощны в JavaScript (в основном потому, что они являются объектами).

сейчас в замешательстве? Не волнуйся, читай и учись :)

2 голосов
/ 12 декабря 2010

Вы можете взглянуть на вводную статью о Mozilla Developer Network .

Кроме того, я создал этот небольшой, надеюсь, иллюстрирующий пример.(Обратите внимание на приватный метод и то, что происходит, когда вы пытаетесь получить к нему доступ извне!) 

<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>
2 голосов
/ 12 декабря 2010

Это может быть хорошей точкой отсчета: 

var myImage = document.getElementByID('myImage');
myImage.src = 'someurl';
1 голос
/ 12 декабря 2010

ООП с JavaScript немного отличается. Как и вы, я относительно новичок в этой теме, поэтому я пытался учить себя последние пару месяцев. Я бы порекомендовал прочитать некоторые статьи, опубликованные другими пользователями, а также некоторые из них:

Вы на самом деле не указали, что именно вы хотите делать с ООП в терминах кода, поэтому я не могу предоставить конкретный код, но я настоятельно рекомендую прочитать эти и другие статьи, которые вы найдете в Интернете, Общее представление о том, что такое JavaScript, как он работает с DOM и как он связан с ООП.

Надеюсь, это поможет.

Христо

0 голосов
/ 28 июля 2013

Это простой пример того, как создать объект и создать для него «методы». 

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;
    }
}

Печать на консоль 

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() );

В Chrome это распечатает его на console. В Chrome вы нажимаете F12, чтобы найти консоль.

Проверьте код с помощью http://jsfiddle.net/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...