Objektile orienteeritud JavaSkripti (OOJS) õpetus koos näitega

Autor: James Hartman James Hartman
Hours Ajakohastatud

Milles on OOPS-i kontseptsioon? JavaSkript?

Sageli ei piisa muutujatest või massiividest tegelike olukordade simuleerimiseks. JavaSkript võimaldab teil luua objekte, mis toimivad nagu päriselu objektid. Üliõpilane või kodu võib olla objekt, millel on palju ainulaadseid omadusi. Programmeerimise hõlbustamiseks saate luua oma objektidele atribuute ja meetodeid. Kui teie objekt on õpilane, on sellel atribuudid nagu eesnimi, perekonnanimi, id jne ja meetodid, nagu arvutadaRank, changeAddress jne. Kui teie objekt on kodu, on sellel atribuudid, nagu hulk ruume, värvivärv, asukoht jne. ja meetodid, nagu arvutage pindala, muutke omanikku jne.

Kuidas luua objekti

Saate luua sellise objekti:

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

Juurdepääs objekti omadustele ja meetoditele

Objekti omadustele pääsete juurde järgmiselt:

objectname.propertyname;

Objekti meetoditele pääsete juurde järgmiselt:

objectname.methodname();

Proovige seda näidet ise:

<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 konstruktor

Kuid seda tüüpi objektide loomine pole nii kasulik, sest ka siin peate looma erinevatele õpilastele erinevaid objekte. Siin tuleb pildile objektikonstruktor. Objektikonstruktor aitab teil luua objektitüübi, mida saab individuaalse eksemplari vajaduste rahuldamiseks uuesti kasutada.

Proovige seda näidet ise:

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

Looge läbi objekti omaduste

süntaksit:

for (variablename in objectname)

{

lines of code to be executed

}

For/in a silmus kasutatakse tavaliselt objekti omaduste läbimiseks. Võite anda sellele mis tahes nime muutuja, kuid objekti nimi peaks olema sama, mis juba olemasoleva objekti nimi, mida peate läbima.

Proovige seda näidet ise:

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