Orienté objet JavaTutoriel sur le script (OOJS) avec exemple

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

Qu’est-ce que le concept OOPS dans JavaScénario?

Souvent, les variables ou les tableaux ne suffisent pas pour simuler des situations réelles. JavaLe script vous permet de créer des objets qui se comportent comme des objets réels. Un étudiant ou une maison peuvent être des objets possédant de nombreuses caractéristiques uniques. Vous pouvez créer des propriétés et des méthodes pour vos objets afin de faciliter la programmation. Si votre objet est un étudiant, il aura des propriétés telles que le prénom, le nom, l'identifiant, etc. et des méthodes telles que calculateRank, changeAddress, etc. Si votre objet est une maison, il aura des propriétés telles que le nombre de pièces, la couleur de la peinture, l'emplacement, etc. et des méthodes telles que calculateArea, changeOwner, etc.

Comment créer un objet

Vous pouvez créer un objet comme ceci :

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

Accéder aux propriétés et méthodes des objets

Vous pouvez accéder aux propriétés d'un objet comme ceci :

objectname.propertyname;

Vous pouvez accéder aux méthodes d'un objet comme ceci :

objectname.methodname();

Essayez cet exemple vous-même :

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

Constructeur OUPS

Mais créer des objets de ce genre n’est pas très utile car ici aussi, vous devrez créer différents objets pour différents élèves. Voici le constructeur d'objets qui entre en image. Le constructeur d'objet vous aide à créer un type d'objet qui peut être réutilisé pour répondre aux besoins d'une instance individuelle.

Essayez cet exemple vous-même :

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

Parcourez les propriétés d'un objet

syntaxe:

for (variablename in objectname)

{

lines of code to be executed

}

Le pour/dans un boucle est généralement utilisé pour parcourir les propriétés d’un objet. Vous pouvez donner n'importe quel nom au variable, mais le nom de l'objet doit être le même que celui d'un objet déjà existant que vous devez parcourir.

Essayez cet exemple vous-même :

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

Résumez cet article avec :