Objekt orientert JavaScript(OOJS) opplæring med eksempel
James Hartman
Hva er OOPS Concept i JavaManus?
Mange ganger er variabler eller matriser ikke tilstrekkelige til å simulere virkelige situasjoner. JavaSkript lar deg lage objekter som fungerer som virkelige objekter. En student eller et hjem kan være et objekt som har mange unike egenskaper. Du kan lage egenskaper og metoder for objektene dine for å gjøre programmeringen enklere. Hvis objektet ditt er en student, vil det ha egenskaper som fornavn, etternavn, id osv. og metoder som calculateRank, changeAddress etc. Hvis objektet ditt er et hjem, vil det ha egenskaper som et antall rom, malingsfarge, plassering osv. og metoder som calculateArea, changeOwner etc.
Hvordan lage et objekt
Du kan lage et objekt som dette:
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} };
Få tilgang til objektegenskaper og metoder
Du kan få tilgang til egenskaper for et objekt som dette:
objectname.propertyname;
Du kan få tilgang til metoder for et objekt som dette:
objectname.methodname();
Prøv dette eksemplet selv:
<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 konstruktør
Men å lage objekter av denne typen er ikke så nyttig, for også her må du lage forskjellige objekter for forskjellige elever. Her kommer objektkonstruktør inn i bildet. Objektkonstruktør hjelper deg med å lage en objekttype som kan gjenbrukes for å møte behovet til individuelle forekomster.
Prøv dette eksemplet selv:
<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>
Gå gjennom egenskapene til et objekt
Syntaks:
for (variablename in objectname)
{
lines of code to be executed
}
For/i en sløyfe brukes vanligvis til å gå gjennom egenskapene til et objekt. Du kan gi hvilket som helst navn for variabel, men navnet på objektet skal være det samme som på et allerede eksisterende objekt som du må gå gjennom.
Prøv dette eksemplet selv:
<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>
