Orientato agli oggetti JavaTutorial script(OOJS) con esempio

By: James Hartmann James Hartmann
Hours aggiornato

In cosa consiste il concetto OOPS JavaCopione?

Molte volte le variabili o gli array non sono sufficienti per simulare situazioni di vita reale. JavaScript ti consente di creare oggetti che agiscono come oggetti della vita reale. Uno studente o una casa possono essere oggetti che hanno molte caratteristiche uniche. Puoi creare proprietà e metodi per i tuoi oggetti per semplificare la programmazione. Se il tuo oggetto è uno studente, avrà proprietà come nome, cognome, ID ecc. e metodi come calculateRank, changeAddress ecc. Se il tuo oggetto è una casa, avrà proprietà come un numero di stanze, colore della vernice, posizione ecc. e metodi come calculateArea, changeOwner ecc.

Come creare un oggetto

Puoi creare un oggetto come questo:

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

Accedere alle proprietà e ai metodi dell'oggetto

Puoi accedere alle proprietà di un oggetto come questo:

objectname.propertyname;

Puoi accedere ai metodi di un oggetto come questo:

objectname.methodname();

Prova tu stesso questo esempio:

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

Costruttore OOPS

Ma creare oggetti di questo tipo non è molto utile perché anche qui dovrai creare oggetti diversi per studenti diversi. Ecco che entra in scena il costruttore di oggetti. Il costruttore di oggetti ti aiuta a creare un tipo di oggetto che può essere riutilizzato per soddisfare le esigenze della singola istanza.

Prova tu stesso questo esempio:

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

Passa attraverso le proprietà di un oggetto

Sintassi:

for (variablename in objectname)

{

lines of code to be executed

}

Il per/in a loop viene solitamente utilizzato per scorrere le proprietà di un oggetto. Puoi dare qualsiasi nome al file variabile, ma il nome dell'oggetto dovrebbe essere lo stesso di un oggetto già esistente di cui devi eseguire il loop.

Prova tu stesso questo esempio:

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