Orientat spre obiect JavaTutorial Script(OOJS) cu Exemplu

prin: James Hartman James Hartman
Hours Actualizat

În ce este OOPS Concept JavaScenariul?

De multe ori, variabilele sau matricele nu sunt suficiente pentru a simula situații din viața reală. JavaScriptul vă permite să creați obiecte care se comportă ca obiecte din viața reală. Un student sau o casă poate fi un obiect care are multe caracteristici unice proprii. Puteți crea proprietăți și metode pentru obiectele dvs. pentru a ușura programarea. Dacă obiectul tău este un student, va avea proprietăți precum prenume, nume, id etc. și metode precum calculateRank, changeAddress etc. Dacă obiectul tău este o casă, va avea proprietăți precum un număr de camere, culoarea vopselei, locația etc. și metode precum calculateArea, changeOwner etc.

Cum se creează un obiect

Puteți crea un obiect ca acesta:

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

Accesați proprietățile și metodele obiectului

Puteți accesa proprietățile unui obiect astfel:

objectname.propertyname;

Puteți accesa metode ale unui obiect ca aceasta:

objectname.methodname();

Încercați singur acest exemplu:

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

Dar crearea de astfel de obiecte nu este atât de utilă, deoarece și aici, va trebui să creați diferite obiecte pentru diferiți elevi. Aici intervine constructorul de obiecte în imagine. Constructorul de obiecte vă ajută să creați un tip de obiect care poate fi reutilizat pentru a satisface nevoia unei instanțe individuale.

Încercați singur acest exemplu:

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

Buclă prin proprietățile unui obiect

Sintaxă:

for (variablename in objectname)

{

lines of code to be executed

}

Pentru/în a buclă este de obicei folosit pentru a parcurge în buclă proprietățile unui obiect. Puteți da orice nume pentru variabil, dar numele obiectului ar trebui să fie același cu cel al unui obiect deja existent pe care trebuie să-l parcurgeți.

Încercați singur acest exemplu:

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