객체 지향 Java예제가 있는 스크립트(OOJS) 튜토리얼
제임스 하트만
OOPS 컨셉이란? Java스크립트?
실제 상황을 시뮬레이션하기에는 변수나 배열만으로는 충분하지 않은 경우가 많습니다. Java스크립트를 사용하면 실제 객체처럼 작동하는 객체를 만들 수 있습니다. 학생이나 집은 고유한 특성이 많은 객체가 될 수 있습니다. 프로그래밍을 더 쉽게 하기 위해 객체에 속성과 메서드를 만들 수 있습니다. 객체가 학생인 경우 이름, 성, ID 등의 속성과 calculateRank, changeAddress 등의 메서드가 있습니다. 객체가 집인 경우 방 수, 페인트 색상, 위치 등의 속성과 calculateArea, changeOwner 등의 메서드가 있습니다.
개체를 만드는 방법
다음과 같은 객체를 생성할 수 있습니다.
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} };
개체 속성 및 메서드에 액세스
다음과 같이 객체의 속성에 액세스할 수 있습니다.
objectname.propertyname;
다음과 같이 객체의 메소드에 액세스할 수 있습니다.
objectname.methodname();
다음 예제를 직접 시도해 보세요.
<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 생성자
그러나 이런 종류의 개체를 만드는 것은 그다지 유용하지 않습니다. 왜냐하면 여기서도 학생들마다 다른 개체를 만들어야 하기 때문입니다. 여기에 객체 생성자가 그림으로 나타납니다. 개체 생성자는 개별 인스턴스의 요구 사항을 충족하기 위해 재사용할 수 있는 개체 유형을 생성하는 데 도움이 됩니다.
다음 예제를 직접 시도해 보세요.
<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>
객체의 속성을 통해 반복
구문 :
for (variablename in objectname)
{
lines of code to be executed
}
for/in a 고리 일반적으로 객체의 속성을 반복하는 데 사용됩니다. 원하는 이름을 지정할 수 있습니다. 변수, 그러나 개체의 이름은 반복해야 하는 이미 존재하는 개체의 이름과 동일해야 합니다.
다음 예제를 직접 시도해 보세요.
<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>
