ООП в JavaScript

RoamingFire · 11.03.2008

Решил вот полностью постигнуть Ajax, но перед этим решил разобваться с ООП в Jav'e... Написал конструктор для объекта. Ему передаются из параметров только id кнопки. При нажатии должен меняться ее бекгроунд. Вот, что написал:
1. button.js

Код:

function btn(id)
{
  this.id = document.getElementById(id);
  this.id.onclick = function()
					{
					  this.id.className = 'on';
					}
}

1.html

Код:

<HTML>
<HEAD>
<script type = "text/javascript" src = "button.js"> </SCRIPT>
<script type = "text/javascript">
  window.onload = function()
				  {
					var a = new btn('gg');
				  }
</SCRIPT>
<STYLE type = "text/css">
  .on
  {
	background-color: red;
  }
</STYLE>
</HEAD>
<BODY>
<BUTTON id = "gg">ЖАМКНИ МЕНЯ</BUTTON>
</BODY>
</HEAD>
</HTML>

При таком раскладе нифига не работает!!!!
Но если в файле button.js сделать вот так:

Код:

function btn(id)
{
  this.id = document.getElementById(id);
  this.id.onclick = function() 
					{
					  this.className = 'on';
					}
}

То все работает? Скажите почему??? :blink: :blink: :blink:

И еще дайте пожалуйста сцылочку, если таковая имеется, где можно про эту гадость почитать?

ZitosS_32 · 11.03.2008

Может так?

Код:

function btn(id)
{
  id = document.getElementById(id);
  id.onclick = function() 
					{
					  id.className = 'on';
					}
}

Проверил, работает! И так...
this прямая ссылка на исполняющий функцию, действие объект(в данном случае это кнопка)
getElementByID(id) здесь функция возвращает ссылку на определённый объект...
И твоё использование this.id неправильно...

Может я и не прав, сам с JS не всегда в ладах )))

RoamingFire · 11.03.2008

Да вроде ты прав. Щас вот полистал книжечку по Ajax. Там оказывается есть глава про ООП в джаве, щас почитаю. Спасибо

Baboot · 11.03.2008

вот тут читай про ООП в JS:
http://www.dklab.ru/chicken/nablas/40.html
http://www.dklab.ru/chicken/nablas/39.html

RoamingFire · 11.03.2008

Пасибки!

RoamingFire · 12.03.2008

Да, Alex, ты был прав. This ссылается на объект, в котором вызвана текущая функция!
button.js

Код:

function Button(id1,id2)
{
  this.element1 = document.getElementById(id1);
  this.element2 = document.getElementById(id2);

  this.element1.onclick = function()
  {
	this.className = 'c';  
  }
  var parent = this;
  this.element2.onclick = function()
  {
	this.className = 'cc';
	parent.element1.className = 'ccc';
  }
}

1.html

Код:

<HTML>
<HEAD>
<script type = "text/javascript" src = "button.js"> </SCRIPT>
<script type = "text/javascript">
  window.onload = function()
				  {
					var a = new Button('gg','bb');
					
				  }
</SCRIPT>
<STYLE type = "text/css">
  .c
  {
	background-color: black;
  }
  .cc
  {
	background-color: gray;
  }
  .ccc
  {
	background-color: white;
  }
</STYLE>
</HEAD>
<BODY>
<BUTTON id = "gg">ЖАМКНИ МЕНЯ</BUTTON>
<BUTTON id = "bb">ЖАМКНИ МЕНЯ</BUTTON>
</BODY>
</HEAD>
</HTML>

Вот на всякий случай написал пример, для тех у кого возникнет такая-же проблема, который на 100% разъясняет ситуацию.

ООП в JavaScript

RoamingFire

Well-Known Member

ZitosS_32

Совесть

RoamingFire

Well-Known Member

Baboot

New Member

RoamingFire

Well-Known Member

RoamingFire

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей