Применение классов - JavaScript, Ajax

bestnicer · 22.01.2013, 08:00

Как сделать то же самое, только с классами?

Код HTML:

<HTML>
 <HEAD>
 <TITLE> Вычисление периметра и площади</TITLE>
 <script language="JavaScript">
 function pr (obj) 
 {var a=Number(obj.st1.value) 
  var b=Number(obj.st2.value) 
  var s; p=2*(a+b); 
 document.writeln("Периметр прямоугольника равен ",p,"<br>"); 
 s=(a*b);
 document.write("Площадь прямоуголька равна ",s);
 }
 function pp (obj) 
 {var a1=Number(obj.st3.value)
 var b1=Number(obj.st4.value)
 var c1=Number(obj.st5.value)  
 var s1; p1=a1+b1+c1; 
 document.writeln("Периметр треугольника равен ",p1,"<br>"); 
 p1=p1/2;
 s1=Math.sqrt(p1*(p1-a1)*(p1-b1)*(p1-c1));
 document.write("Площадь треугольника равна ",s1);
 }
function square (obj)  
 {var r=obj.st6.value 
 var s2 
 {r=Number (r) 
 {s2=3.14*r*r;
document.write("Площадь круга равна ",s2);
} 
 } 
 }
</script>
 </HEAD>
 <BODY> 
<table border="1" cellpadding="30">
<tr>
<td>
<center>
<br>
<br>
Вычисление площади и периметра прямоугольника
<h4>Введите значениe сторон:</h4>
 <form name="form2">
 Сторона 1: <input type="text" size="7" name="st1"><br>
 Сторона 2: <input type="text" size="7" name="st2"><br>
 <input type="button" value="Вычислить" onClick="pr(form2)"><br>
 <input type="reset" value=Очистить>
</center> 
</td>
<td>
<center>
<br>
<br>
Вычисление площади и периметра треугольника
<h4>Введите значениe сторон:</h4>
 <form name="form2">
 Сторона 1: <input type="text" size="7" name="st3"><br>
 Сторона 2: <input type="text" size="7" name="st4"><br>
 Сторона 3: <input type="text" size="7" name="st5"><br>
 <input type="button" value="Вычислить" onClick="pp(form2)"><br>
 <input type="reset" value=Очистить>
</center> 
</td>
<td>
<center>
Вычисление площади круга(по радиусу)
 <h4> Введите размер (радиус круга ):</h4> 
<form name="form2">
Радиус круга   : <input type ="text" size=7 name="st6"><br>
 <input type ="button" value="Вычислить" onClick="square(form2)"><br>
 <input type ="reset" value=Очистить> 
</center>
</td>
</tr>
</table>
 </form>
 </BODY>
 </HTML>

Naive · 22.01.2013, 09:48

Код:

  function Rect(a, b) { // Объявляем класс
    return this.init(a, b); // запускаем конструктор
  };
  Rect.prototype.constructor = Rect; // указываем явно конструктором сам класс

  Rect.prototype.init = function(a, b){ // тело конструктора
    this.a = a;
    this.b = b;
  };
  Rect.prototype.s = function() { // метод вычисления площади
    return this.a*this.b;
  };
  Rect.prototype.p = function() { // метод вычисления периметра
    return 2*this.a + 2*this.b;
  };

  var test_rect = new Rect(2,3); // создаем экземпляр класса

  console.log(test_rect.p()); //  вычисляем..

  console.log(test_rect.s()); // вычисляем..

Дальше по аналогии.

bestnicer · 22.01.2013, 10:49

а как и где написать в вычислении площади треуголника

Код:

p1=p1/2

?

Naive · 22.01.2013, 11:10

А код проанализировать, мозгом своим подумать никак?

bestnicer · 22.01.2013, 11:35

Я смогла сообразить только на это

Код:

return Math.sqrt(this.(p1/2) * (this.(p1/2) - this.a1) * (this.(p1/2) - this.b1) * (this.(p1/2) - this.c1);

И еще хочу спросить в строке

Код:

var test_rect = new Rect(2,3)

(2,3) что обозначает?

Naive · 22.01.2013, 12:09

А... я уж думал совсем все тухло...

Цитата:

Сообщение от bestnicer

Я смогла сообразить только на это

Код:

return Math.sqrt(this.(p1/2) * (this.(p1/2) - this.a1) * (this.(p1/2) - this.b1) * (this.(p1/2) - this.c1);

Методы класса — это обычные функции по-сути, просто выполняются в контексте своего объекта. То есть можно было бы упростить так:

Код:

{
  var semi_p = this.p()*.5;
  function tmp(side) {
    return semi_p - side;
  };
  return Math.sqrt(semi_p*tmp(this.a)*tmp(this.b)*tmp(this.c));
}

Цитата:

Сообщение от bestnicer

И еще хочу спросить в строке

Код:

var test_rect = new Rect(2,3)

(2,3) что обозначает?

В этой строке создается экземпляр класса прямоугольника под названием test_rect.
2, 3 - стороны прямоугольника, в данном случае.
Только вот мне не понятно, почему «this.a1», зачем эта единица?

bestnicer · 22.01.2013, 12:35

В первом случае (вычисление периметра и площади прямоугольника) уже были заданы переменные a и b. Если я их повторю в следующей функции, значит ошибки не будет?)

Naive · 22.01.2013, 13:00

Нет, в вашем коде тоже не было бы ошибки: переменные объявлены локально внутри функции, глобально этих переменных не существует, менять/перекрывать нечего.
В случае с классами "переменная" — это объект [test_rect], этих объектов может быть миллион и никто внутрь другого не залезет. Стороны a и b принадлежат только к этому конкретному прямоугольнику и никому больше, ни треугольнику, ни кругу, ни другому прямоугольнику.
Почитайте про локальные и глобальные переменные. Когда я учился в школе, нам на информатике этого тоже не преподавали и тоже был такой треш:

Код:

var x1,x2,x3,x4,x5,x6,y1,y2,y3,y4,y5;

bestnicer · 22.01.2013, 13:03

Теперь я не могу изменить

Код:

<h4>Введите значениe сторон:</h4>
 <form name="form2">
 Сторона 1: <input type="text" size="7" name="st1"><br>
 Сторона 2: <input type="text" size="7" name="st2"><br>
 <input type="button" value="Вычислить" onClick="pr(form2)"><br>

bestnicer · 22.01.2013, 16:11

в общем, что в итоге получилось

Код:

<HTML>
 <HEAD>
 <TITLE> Вычисление периметра и площади</TITLE>
 <script language="JavaScript">
     function Rect(a, b) { // Объявляем класс
         return this.init(a, b); // запускаем конструктор
     };
     Rect.prototype.constructor = Rect; // указываем явно конструктором сам класс
     Rect.prototype.init = function (a, b) { // тело конструктора
         this.a = a;
         this.b = b;
     };
     Rect.prototype.s = function () { // метод вычисления площади
         return this.a * this.b;
     };
     Rect.prototype.p = function () { // метод вычисления периметра
         return 2 * this.a + 2 * this.b;
     };
	 function Rect_do(){
	     var new_rect = new Rect(document.getElementsByName("st1")[0].value, document.getElementsByName("st2")[0].value);
	     document.getElementsByTagName("div")[0].innerHTML = 'Площадь: ' + new_rect.s() + '<br />Периметр: ' + new_rect.p();
	 };
	 
	 function trian(a, b, c) {
         return this.init(a, b, c);
         };
         trian.prototype.constructor = trian;
         trian.prototype.init = function (a, b, c) {
             this.a = a;
             this.b = b;
             this.c = c;
         };
         trian.prototype.p = function () { // метод вычисления периметра
             return this.a + this.b + this.c;
         };
         trian.prototype.s = function () { // метод вычисления площади
             var semi_p = this.p()*0.5;
             function tmp(side) {
             return semi_p - side;
             };
             return Math.sqrt(semi_p * tmp(this.a) * tmp(this.b) * tmp(this.c));
         };
		 
	function Trian_do(){
	     var new_trian = new trian(document.getElementsByName("st3")[0].value, document.getElementsByName("st4")[0].value, document.getElementsByName("st5")[0].value);
	     document.getElementsByTagName("div")[1].innerHTML = 'Площадь: ' + new_trian.s() + '<br />Периметр: ' + new_trian.p();
	 };
    
	
	function circle(r) {
         return this.init(r);
         };
         circle.prototype.constructor = circle;
         circle.prototype.init = function (r) {
             this.r = r;
         };
         circle.prototype.s = function () { // метод вычисления площади
             return 3.14 * this.r * this.r;
         };
		 
	function Circle_do(){
	    var new_circle = new circle(document.getElementsByName("st6")[0].value);
	    document.getElementsByTagName("div")[2].innerHTML = 'Площадь: ' + new_circle.s();
	};
		 
</script>
 </HEAD>
 <BODY> 
<table border="1" cellpadding="30">
<tr>
<td>
<center>
<br>
<br>
Вычисление площади и периметра прямоугольника
<h4>Введите значениe сторон:</h4>
 <form name="form2">
     Сторона 1: <input type="text" size="7" name="st1"><br>
     Сторона 2: <input type="text" size="7" name="st2"><br>
     <input type="button" value="Вычислить" onClick="Rect_do()"><br>
     <input type="reset" value=Очистить>
 <div>
 </div>
</center> 
</td>
<td>
<center>
<br>
<br>
Вычисление площади и периметра треугольника
<h4>Введите значениe сторон:</h4>
 <form name="form2">
 Сторона 1: <input type="text" size="7" name="st3"><br>
 Сторона 2: <input type="text" size="7" name="st4"><br>
 Сторона 3: <input type="text" size="7" name="st5"><br>
 <input type="button" value="Вычислить" onClick="Trian_do()"><br>
 <input type="reset" value=Очистить>
 <div></div>
</center> 
</td>
<td>
<center>
Вычисление площади круга(по радиусу)
 <h4> Введите размер (радиус круга ):</h4> 
<form name="form2">
Радиус круга   : <input type ="text" size=7 name="st6"><br>
 <input type ="button" value="Вычислить" onClick="Circle_do()"><br>
 <input type ="reset" value=Очистить> 
 <div></div>
</center>
</td>
</tr>
</table>
 </form>
 </BODY>
 </HTML>

Но есть большое НО, почему-то не правильно считает периметр в треугольнике, что не так?

22.01.2013, 10:49	#3
bestnicer Пользователь Регистрация: 29.05.2012 Сообщений: 59	а как и где написать в вычислении площади треуголника Код: `p1=p1/2` ?

22.01.2013, 11:10	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	А код проанализировать, мозгом своим подумать никак? Alar, верни репу!

22.01.2013, 11:35	#5
bestnicer Пользователь Регистрация: 29.05.2012 Сообщений: 59	Я смогла сообразить только на это Код: `return Math.sqrt(this.(p1/2) * (this.(p1/2) - this.a1) * (this.(p1/2) - this.b1) * (this.(p1/2) - this.c1);` И еще хочу спросить в строке Код: `var test_rect = new Rect(2,3)` (2,3) что обозначает?

22.01.2013, 13:00	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Нет, в вашем коде тоже не было бы ошибки: переменные объявлены локально внутри функции, глобально этих переменных не существует, менять/перекрывать нечего. В случае с классами "переменная" — это объект [test_rect], этих объектов может быть миллион и никто внутрь другого не залезет. Стороны a и b принадлежат только к этому конкретному прямоугольнику и никому больше, ни треугольнику, ни кругу, ни другому прямоугольнику. Почитайте про локальные и глобальные переменные. Когда я учился в школе, нам на информатике этого тоже не преподавали и тоже был такой треш: Код: `var x1,x2,x3,x4,x5,x6,y1,y2,y3,y4,y5;` Alar, верни репу! Последний раз редактировалось Naive; 22.01.2013 в 13:02.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Применение подпрограмм	desnet	Паскаль, Turbo Pascal, PascalABC.NET	4	12.03.2012 17:58
Объявление классов. Применение принципов ООП	get	Паскаль, Turbo Pascal, PascalABC.NET	0	26.05.2011 13:15
применение c++	vvsh	Общие вопросы C/C++	21	22.01.2011 22:53
применение ComboBox	Improviz	Компоненты Delphi	2	21.02.2010 12:52
Создание классов и использование объектов классов при написании программ в среде C++.	Frozen inside	Помощь студентам	0	16.04.2009 23:18

22.01.2013, 12:35	#7
bestnicer Пользователь Регистрация: 29.05.2012 Сообщений: 59	В первом случае (вычисление периметра и площади прямоугольника) уже были заданы переменные a и b. Если я их повторю в следующей функции, значит ошибки не будет?)