Orientado a Objeto JavaTutorial de script (OOJS) com exemplo
James Hartmann
Em que consiste o conceito OOPS JavaRoteiro?
Muitas vezes, variáveis ou arrays não são suficientes para simular situações da vida real. JavaScript permite que você crie objetos que agem como objetos da vida real. Um aluno ou uma casa podem ser objetos que têm muitas características únicas próprias. Você pode criar propriedades e métodos para seus objetos para facilitar a programação. Se seu objeto for um aluno, ele terá propriedades como nome, sobrenome, id etc. e métodos como calculateRank, changeAddress etc. Se seu objeto for uma casa, ele terá propriedades como número de cômodos, cor da tinta, localização etc. e métodos como calculateArea, changeOwner etc.
Como criar um objeto
Você pode criar um objeto como este:
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} };
Acessar propriedades e métodos de objetos
Você pode acessar as propriedades de um objeto assim:
objectname.propertyname;
Você pode acessar métodos de um objeto assim:
objectname.methodname();
Experimente você mesmo este exemplo:
<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>
Construtor OOPS
Mas criar objetos deste tipo não é tão útil porque aqui também você terá que criar objetos diferentes para alunos diferentes. Aí entra o construtor de objetos em cena. O construtor de objetos ajuda a criar um tipo de objeto que pode ser reutilizado para atender às necessidades de uma instância individual.
Experimente você mesmo este exemplo:
<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>
Percorrer as propriedades de um objeto
Sintaxe:
for (variablename in objectname)
{
lines of code to be executed
}
O para/em um laço geralmente é usado para percorrer as propriedades de um objeto. Você pode dar qualquer nome para o variável, mas o nome do objeto deve ser o mesmo de um objeto já existente que você precisa percorrer.
Experimente você mesmo este exemplo:
<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>
