객체 리터럴
<!DOCTYPE html>
<!--
객체 : 이름이 붙어있는 값들의 모음
프로퍼티(변수) : 이름이 붙어있는 값
메서드 : 함수가 프로퍼티에 저장될 경우 프로퍼티명이 메소드명이 됨.
-->
<html>
<head>
<meta charset="UTF-8">
<title>객체 리터럴</title>
</head>
<body>
<script type="text/javascript">
//객체 리터럴
//(x, y)좌표가 (300,200)인 객체 생성
var p1 = {x : 300, y : 200}
//(x, y)좌표가 (350,280)인 객체 생성
var p2 = {x : 350, y : 280}
var rect = {
topLeft : p1, //사각형의 좌측상단 좌표 정보 => 초기값으로 p1객체 참조
bottomRight : p2, //사각형의 우측하단 좌표 정보 => 초기값으로 p2객체 참조
size : function(){//사각형의 면적 계산 메서드
return (this.bottomRight.x - this.topLeft.x) *
(this.bottomRight.y - this.topLeft.y);
}
}
document.writeln('위치 변경 전 사각형의 넓이 : ' + rect.size() + '<br/>');
document.writeln('<br/>');
//(x, y)좌표가 (300,200)인 객체 생성
var p1 = {x : 200, y : 300}
//(x, y)좌표가 (350,280)인 객체 생성
var p2 = {x : 300, y : 480}
rect.topLeft = p1; //사각형의 좌측상단 좌표 정보 => 초기값으로 p1객체 참조
rect.bottomRight = p2; //사각형의 우측하단 좌표 정보 => 초기값으로 p2객체 참조
document.writeln('위치 변경 후 사각형의 넓이 : ' + rect.size() + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
함수(메서드) 리터럴
<!DOCTYPE html>
<html>
<!--자바스크립트 함수
-객체 프로퍼티에도 할당 될수 있는 실행가능한 코드 값
-객체 프로퍼티에 저장된 함수를 객체의 메소드라고 부름.
-->
<head>
<meta charset="UTF-8">
<title>함수 리터럴</title>
</head>
<body>
<script type="text/javascript">
var add = function(op1, op2) {
return op1 + op2;
}
document.writeln('add(5, 3): ' + add(5, 3) + '<br/>'); //add(5, 3): 8
document.writeln('<br/>');
</script>
</body>
</html>
불리언 리터럴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>불리언 리터럴</title>
</head>
<body>
<script type="text/javascript">
//불리언 리터럴
var score = 88;
var message = '불합격';
if(score >= 70){ //비교의 결과로 true를 반환
message = '합격';
}
document.writeln(score + '점은 ' + message + '입니다.' + '<br/>');
document.writeln('<br/>');
//0, undefined, NaN, null, "" = false
var a = 0;
var b = undefined;
var c = null;
var d = NaN;
var e = "";
document.writeln('!0 => ' + !a + '<br/>'); //true
document.writeln('!undefined => ' + !b + '<br/>'); //true
document.writeln('!null => ' + !c + '<br/>'); //true
document.writeln('!NaN => ' + !d + '<br/>'); //true
document.writeln('!"" => ' + !e + '<br/>'); //true
</script>
</body>
</html>
undefined와 null
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>undefined와 null</title>
</head>
<body>
<script type="text/javascript">
//undefined와 null
var a; //변수 초기값 미지정 시 undefined값이 할당됨.
var obj = {}; //프로퍼티가 없는 빈객체를 생성함.
document.writeln('a: ' + a + '<br/>'); //a: undefined
document.writeln('obj: ' + obj + '<br/>'); //obj: object Object
document.writeln('obj.prop: ' + obj.prop + '<br/>'); //obj.prop: undefined
obj = null; //객체 참조를 제거함.
document.writeln('obj: ' + obj + '<br/>'); //obj: null
document.writeln('<br/>');
if(!a) //!undefined
document.writeln('변수 a는 초기화가 필요합니다. <br/>');
if(!obj) // !null
document.writeln('변수 obj는 참조하는 객체가 없습니다. <br/>');
</script>
</body>
</html>
