Об'єктно-орієнтований JavaПідручник зі сценарієм (OOJS) із прикладом

Автор: Джеймс Гартман Джеймс Гартман
Hours оновлений

У чому полягає концепція OOPS JavaСценарій?

Часто змінних або масивів недостатньо для моделювання ситуацій у реальному житті. JavaСценарій дозволяє створювати об’єкти, які діють як реальні об’єкти. Студент або дім можуть бути об’єктом, який має багато власних унікальних характеристик. Ви можете створювати властивості та методи для ваших об’єктів, щоб полегшити програмування. Якщо ваш об’єкт є студентом, він матиме такі властивості, як ім’я, прізвище, ідентифікатор тощо, а також такі методи, як CalculateRank, changeAddress тощо. Якщо ваш об’єкт є домом, він матиме такі властивості, як кількість кімнат, колір фарби, розташування тощо і такі методи, як calculateArea, changeOwner тощо.

Як створити об'єкт

Ви можете створити такий об’єкт:

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
line of code
}

OR

var objName= {property1:value1, property2:value2, method1: function()

{ lines of code} };

Доступ до властивостей і методів об’єктів

Ви можете отримати доступ до властивостей об’єкта таким чином:

objectname.propertyname;

Ви можете отримати доступ до методів об’єкта таким чином:

objectname.methodname();

Спробуйте цей приклад самостійно:

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Конструктор OOPS

Але створення об’єктів такого типу не дуже корисно, тому що тут також вам доведеться створювати різні об’єкти для різних учнів. Тут з’являється конструктор об’єктів. Конструктор об’єктів допомагає створити тип об’єкта, який можна повторно використовувати для задоволення потреб окремого екземпляра.

Спробуйте цей приклад самостійно:

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Перегляд властивостей об’єкта

Синтаксис:

for (variablename in objectname)

{

lines of code to be executed

}

За/в a петля зазвичай використовується для перегляду властивостей об'єкта. Ви можете дати будь-яку назву змінна, але ім’я об’єкта має бути таким самим, як і ім’я вже існуючого об’єкта, який вам потрібно прокрутити.

Спробуйте цей приклад самостійно:

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>