Objektum orientált JavaScript(OOJS) bemutató példával
James Hartman
Miben található az OOPS koncepció? JavaForgatókönyv?
Sokszor a változók vagy tömbök nem elegendőek a valós helyzetek szimulálásához. JavaA Script lehetővé teszi olyan objektumok létrehozását, amelyek valós objektumokként működnek. Egy diák vagy egy otthon lehet olyan tárgy, amelynek számos egyedi tulajdonsága van. A programozás megkönnyítése érdekében tulajdonságokat és metódusokat hozhat létre az objektumokhoz. Ha az objektum egy tanuló, akkor olyan tulajdonságokkal rendelkezik, mint a keresztnév, vezetéknév, azonosító stb., valamint olyan metódusok, mint a számítási hely, a changeAddress stb. és olyan módszerek, mint a számítási terület, változástulajdonos stb.
Hogyan hozzunk létre egy objektumot
Ilyen objektumot hozhat létre:
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} };
Hozzáférés az objektum tulajdonságaihoz és módszereihez
Egy objektum tulajdonságait így érheti el:
objectname.propertyname;
Egy objektum metódusait a következőképpen érheti el:
objectname.methodname();
Próbáld ki te is ezt a példát:
<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
De az ilyen objektumok létrehozása nem olyan hasznos, mert itt is különböző objektumokat kell létrehoznia a különböző tanulók számára. Itt jön az objektumkonstruktor a képbe. Az objektumkonstruktor segít létrehozni egy objektumtípust, amely újrafelhasználható az egyedi példányok igényeinek kielégítésére.
Próbáld ki te is ezt a példát:
<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>
Hurok egy objektum tulajdonságain keresztül
Syntax:
for (variablename in objectname)
{
lines of code to be executed
}
A for/in a hurok rendszerint egy objektum tulajdonságainak áttekintésére szolgál. Bármilyen nevet adhatsz a változó, de az objektum nevének meg kell egyeznie egy már létező objektum nevével, amelyen át kell lépnie.
Próbáld ki te is ezt a példát:
<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>
