자바스크립트 - 배열 / 객체 (2)

프로그래밍/JavaScript 자바스크립트 2021. 9. 30.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
// 객체 리터널(이니셜라이저)를 이용한 객체 생성
var obj = {name:'홍길동', age:20}; // 프로퍼티이름:값, 프로퍼티명은 문자열만 가능
// var obj = {'name':'홍길동', 'age':20}; // 가능

console.log( typeof obj ); // "object"
console.log( obj );
console.dir( obj );

// 객체 속성 값 확인
console.log( obj.name ); // 홍길동

// 객체 속성 값 변경
obj.name = '김자바';
console.log( obj.name ); // 김자바

var s;
s = obj.age >= 19 ? obj.name +"님은 성인 입니다." : obj.name +"님은 성인이 아닙다.";
console.log( s );

obj.Age = 22; // 프로퍼티의 대소문자가 틀리면 에러가 나오지 않고 새로운 속성이 추가된다. 
console.log( obj.age ); // 20

console.dir( obj );

// 객체 리터널(이니셜라이저)를 이용한 객체 생성 - 2
var obj2 = { }; // 빈 객체
console.log( typeof obj2 );
console.log( obj2 );

// 실행시 동적으로 속성 추가
obj2.subject = "자바";
console.log( obj2 );
console.log( obj2.subject );

// 객체 리터널(이니셜라이저)를 이용한 객체 생성 - 3
var obj3 = {
	name : '홍길동',
	age : 20,
	state : function() {
		return this.age >= 19 ? '성인' : '미성년자';
	},
	msg : function() {
		// 메소드안에서 속성 및 다른 메소드를 호출할때 this 생략 불가
		var s = `${this.name}님은 ${this.state()} 입니다`;
		console.log(s);
	}
};

console.log( obj3 );

obj3.msg();

</script>

</head>
<body>

<h3>객체 만들기</h3>

</body>
</html>

객체를 선언과 동시에 초기화 할 수 있다.

그리고 만든 객체의 여러 정보들을 보고 싶을때

console.log로 좋지만 console.dir도 자세한 정보를 보여준다.

obj2.subject = "자바"; 이런식으로 기존에 만들었던 객체에 속성을 추가 할 수 있다.

그리고 이건 객체에 속성을 넣었는데 속성끼리 서로 영향을 주는 모습을 볼 수 있다.

msg 속성에서 state속성과 name 속성을을 이용하는 모습을 볼 수 있다.

state 속성에서는 age속성을 참조 했다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 생성자 함수를 이용한 객체 생성

// 생성자 함수 작성 - 생성자는 대문자로 시작한다.
function User(name, age) {
	this.name = name;
	this.age = age;
	
	this.state = function() {
		return this.age >= 19 ? "성인":"미성년자";
	}
	
	this.msg = function() {
		var s = this.name +"님은 "+this.state()+"입니다.";
		console.log( s );
	}
}

// 생성자 함수를 이용한 객체 생성
var obj = new User('홍길동', 20);
console.log( obj.name );
obj.msg();


var Book = {
	subject:'자바',
	msg:function() {
		return '좋아하는 과목은 '+this.subject+'입니다.';
	}
};

//Object.create()메소드를 이용한 객체 생성
var b1 = Object.create(Book);
var b2 = Object.create(Book);
b1.subject = 'HTML';
b2.subject = 'CSS';

console.log(Book.msg()); // 자바
console.log(b1.msg()); // HTML
console.log(b2.msg()); // CSS

</script>
</head>
<body>

<h3>객체 생성</h3>

</body>
</html>

생성자 함수를 만들때는 항상 대문자로 시작 해야한다.

function User(name, age) {
this.name = name;
this.age = age;

this.state = function() {
return this.age >= 19 ? "성인":"미성년자";
}

this.msg = function() {
var s = this.name +"님은 "+this.state()+"입니다.";
console.log( s );
}
}

name과 age를 매개변수로 입력 받아서 내부에서 this.을 붙여서 활용하는 모습이다.

Object.create()로도 객체를 생성 할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
// 생성자 함수
function User(name) {
	this.name = name;
}

var obj = new User('홍길동');
console.log(obj instanceof User); // true
console.log(obj instanceof Object); // true. User의 상위 객체는 Object

// 객체 리터널
var obj2 = {}; // 객체 리터널로 생성되는 객체는 Object 객체
console.log(obj2 instanceof Object); // true
</script>
</head>
<body>

<h3>객체-인스턴스</h3>

</body>
</html>

instanceof 는 변수의 클래스와 비교를 해준다.

obj와 User의 관계가 어떠냐고 물어서 true가 나오고

obj와 Object의 관계도 true가 나온다. 왜냐하면 자바처럼 상위 객체는 같다고 취급 해준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
// 객체의 메소드를 호출할때 메소드 내부 코드에서 사용한 this : 해당 메소드를 호출한 객체
var obj = { // 객체 생성
		name : '김자바',
		msg : function(){
			// console.dir(this);
			console.log(this.name); // this는 msg() 메소드를 호출한 객체
		}
};
obj.msg();

// 생성자 함수를 호출할 때의 this : 새로 생성되는 객체 
function Test(arg) {
	this.name = arg;
	this.getName = function() {
		return this.name;		
	};
}

var obj2 = new Test('자바');
console.log( obj2.getName() );

// 함수를 호출할때의 this
var userName = '스프링'; // 전역 변수. 전역변수는 자동으로 window의 속성이 된다.
// console.log(userName); // 스프링
console.log(window.userName); // 스프링

// sayUser()를 호출할 때 this는 전역 객체(window)에 바인딩
var sayUser = function(){
	console.log( this.userName, userName, window.userName); // 스프링 스프링 스프링
};
sayUser();

</script>

</head>
<body>

<h3>객체 - this</h3>

</body>
</html>

만든 객체의 메소드를 사용할때 그 메소드 내부에서 this를 사용했다면

그건 해당 메소드를 호출한 객체를 말한다.

하지만 생성자의 함수를 호출할 때의 this는 새로 생성되는 객체를 의미한다.

그리고 전역변수를 호출할 때는 window.을 붙여주면 된다.

var asd = 'asd'; 라고 전역변수를 선언했을때 얘를 부를때는 그냥 asd로 불러도 되지만

window.asd 라고 호출 해도 된다.

그리고 this.asd라고 하게 되면 전역 객체에 해당되어 사용 된다.

다 똑같다는 말

this 의 개념

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function send() {
	var f = document.myForm;
	
	var name = f.name.value;
	var kor = f.kor.value;
	var eng = f.eng.value;
	var mat = f.mat.value;
	
	alert(name + ":" + kor +":" + eng + ":" + mat);
}

function validate(obj) {
/*
	if(! /^(\d){1,3}$/.test(obj.value) ) {
		obj.focus();
		return;
	}
*/

	if(isNaN(obj.value) || parseInt(obj.value) < 0 || parseInt(obj.value) > 100) {
		alert("점수는 0~100 사이만 가능 합니다.");
		obj.focus();
		return;
	}
	
}

</script>
</head>
<body>

<h3>form 요소의 이벤트 핸들러에서의 this : 이벤트를 발생시킨 객체 자기 자신</h3>
<form name="myForm">
	<p> 이름 : <input type="text" name="name"> </p>
	<p> 국어 : <input type="text" name="kor" onchange="validate(this);"> </p>
	<p> 영어 : <input type="text" name="eng" onchange="validate(this);"> </p>
	<p> 수학 : <input type="text" name="mat" onchange="validate(this);"> </p>
	<p>
		<button type="button" onclick="send()">확인</button>
	</p>
</form>

</body>
</html>

onchange 부분 보면 스크립트에서 만든 함수의 인자로 this를 넣었는데

form 요소안에서 사용하는 이벤트는 this = 자기 자신 의 의미이다.

즉 validate라는 함수에 자기 자신을 넣는다는 뜻.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function send(f) {
	var name = f.name.value;
	var kor = f.kor.value;
	var eng = f.eng.value;
	var mat = f.mat.value;
	
	alert(name + ":" + kor +":" + eng + ":" + mat);
}

</script>
</head>
<body>

<h3>form 요소 안에서의 this.form : 현재 객체의 부모 form을 나타냄</h3>
<form name="myForm">
	<p> 이름 : <input type="text" name="name"> </p>
	<p> 국어 : <input type="text" name="kor"> </p>
	<p> 영어 : <input type="text" name="eng"> </p>
	<p> 수학 : <input type="text" name="mat"> </p>
	<p>
		<button type="button" onclick="send(this.form)">확인</button>
	</p>
</form>

</body>
</html>

하지만 this 뒤에 form을 붙여주면 this가 붙은 객체의 부모 form을 말한다.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 클래스 (0)	2021.09.30
자바스크립트 - 객체(3) (0)	2021.09.30
자바스크립트 - 배열 / 객체 (1) (0)	2021.09.30
자바스크립트 - 달력 (0)	2021.09.28
자바스크립트 - Math 함수 (0)	2021.09.28

ABOUT ME

this 의 개념

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

this 의 개념

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바