5월 ~ 7월) 웹/web
44Day - 07_function/ 08_scope/ 09_argument/ 10_return/ 11_inner/ 12_callback/ 13_closure/ 14_timer/ 15_encode/ 16_eval/ 17_isNaN/ 18_isFinite/ 19_parse/ $20_class
첼로그
2023. 6. 12. 18:25
07_function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 함수</h1>
<hr>
<p>함수(Function) : 매개변수로 값을 전달받아 가공 처리하여 결과값을 반환하는 기능을 제공</p>
<p>자바스크립트에서는 함수를 선언해야만 함수를 호출하여 함수에 작성된 명령을 실행하여
결과값을 반환받아 사용</p>
<hr>
<p>자바스크립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분</p>
<p>선언함수 : 함수명을 명시하여 선언하는 함수</p>
<p>익명함수 : 함수명을 명시하지 않고 선언하는 함수</p>
<script type ="text/javascript">
//ES6에서는 람다 표현식을 이용한 화살표함수 추가
// > 코드를 간결하게 표현하여 가독성 증가
//형식)(매개변수, 매개변수) => { 명령; 명령; ... }
// > 변수에 화살표함수를 저장하여 변수를 이용해 함수 호출
// > 함수에 작성된 명령이 하나인 경우 { } 기호 생략 가능
//const display = () => { alert("화살표함수의 명령 실행"); }
const display = () => alert("화살표함수의 명령 실행");
display();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 함수</h1>
<hr>
<p>함수(Function) : 매개변수로 값을 전달받아 가공 처리하여 결과값을 반환하는 기능을 제공</p>
<p>자바스크립트에서는 함수를 선언해야만 함수를 호출하여 함수에 작성된 명령을 실행하여
결과값을 반환받아 사용</p>
<hr>
<p>자바스크립트에서는 함수 선언방법에 따라 선언함수와 익명함수로 구분</p>
<p>선언함수 : 함수명을 명시하여 선언하는 함수</p>
<p>익명함수 : 함수명을 명시하지 않고 선언하는 함수</p>
<script type="text/javascript">
/*
//선언함수 - 함수명(함수를 구분하기 위한 식별자)을 명시하여 함수 선언
//형식)function 함수명(매개변수,매개변수,...) { 명령; 명령; ... }
// => 내부적으로 함수명는 변수로 처리되어 선언함수를 값으로 저장 - 함수명에 함수 저장
function display() {
alert("선언함수의 명령 실행");
}
//선언함수는 함수명을 이용하여 함수 호출 - 반복 호출 가능
//형식)함수명(값, 값, ...)
//display();//함수 호출 - 함수에 작성된 명령 실행
//display();
//alert(typeof(display));//function - 함수형
alert(display);//함수명 출력 - 함수명에 저장된 선언함수 출력
*/
/*
//익명함수- 함수명을 명시하지 않고 함수 선언
// => 익명함수는 함수를 선언하고 바로 함수를 호출하여 사용 - 함수를 한번만 호출
//형식)(function(매개변수,매개변수,...) { 명령; 명령; ... })(값, 값, ...);
(function() {
alert("익명함수의 명령 실행");
})();
*/
/*
//변수에 익명함수를 저장 - 함수변수
// => 함수는 내부적으로 값으로 처리되므로 변수에 저장 가능
var display=function() {
alert("익명함수의 명령 실행");
}
//함수변수는 선언함수의 함수명과 동일한 역활 수행
// => 함수변수를 이용하여 익명함수 반복 호출 가능
//형식)함수변수명(값, 값, ...)
//display();
//alert(typeof(display));//function - 함수형
alert(display);//함수변수값 출력 - 함수변수에 저장된 익명함수 출력
*/
/*
//선언함수는 자바스크립트 명령 실행전에 선언 - 함수 선언 전에 함수 호출 가능
display();//함수 선언 전 함수 호출 - 가능
function display() {
alert("선언함수의 명령 실행");
}
*/
// display(); //함수 선언 후 함수 호출 - 가능
/*
//익명함수를 선언하여 변수에 저장하면 명령으로 처리되어 함수 선언 전 호출 불가능
display();//함수 선언 전 함수 호출 - 불가능 : 에러발생
var display=function() {
alert("익명함수의 명령 실행");
}
//display();//함수 선언 후 함수 호출 - 가능
*/
/*
//선언함수를 변수에 저장 가능하지만 함수명으로 함수 호출 불가능
// => 함수변수를 이용하여 함수 호출 가능
var display=function printf() {
alert("익명함수의 명령 실행");
}
//printf();//에러 발생
display();
*/
//ES6에서는 람다 표현식을 이용한 화살표함수 추가
// => 코드를 간결하게 표현하여 가독성 증가
//형식)(매개변수, 매개변수) => { 명령; 명령; ... }
// => 변수에 화살표함수를 저장하여 변수를 이용해 함수 호출
// => 함수에 작성된 명령이 하나인 경우 { } 기호 생략 가능
//const display = () => { alert("화살표함수의 명령 실행"); }
const display = () => alert("화살표함수의 명령 실행");
display();
</script>
</body>
</html>
08_scope
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>전역변수와 지역변수</h1>
<hr>
<p>전역변수(Global Variable) : 함수 외부에서 선언된 변수 - 모든 함수에서 사용 가능</p>
<p>지역변수(Local Variable) : 함수 내부에서 선언된 변수 - 선언된 함수에서만 사용 가능</p>
<script type="text/javascript">
var globalVar=100;//전역변수
function display1() {
//alert("display1 함수에서 사용하는 globalVar 변수값 = "+globalVar);
globalVar=200;//함수에서 전역변수에 저장된 값 변경
//지역변수는 함수가 종료되면 자동 소멸되므로 함수 외부에서 지역변수 사용 불가능
var localVar=300;//지역변수
//alert("display1 함수에서 사용하는 localVar 변수값 = "+localVar);
//자바스크립트는 변수에 값을 저장하면 변수를 선언하지 않아도 변수로 사용 가능
// => 함수에서 변수를 선언하지 않고 값만 저정하여 사용한 변수는 전역변수로 처리
variable=400;
//alert("display1 함수에서 사용하는 variable 변수값 = "+variable);
}
function display2() {
//alert("display2 함수에서 사용하는 globalVar 변수값 = "+globalVar);
//alert("display2 함수에서 사용하는 localVar 변수값 = "+localVar);//에러 발생
alert("display2 함수에서 사용하는 variable 변수값 = "+variable);
}
display1();
display2();
</script>
</body>
</html>
09_argument
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>함수의 인자</h1>
<hr>
<p>인자(Argument) - 함수에 작성된 명령을 실행하기 위해 반드시 필요한 값을 힘수 호출할 때
전달받아 저장하기 위해 사용하는 변수 - 매개변수(Parameter)</p>
<script type="text/javascript">
/*
//매개변수는 var 키워드 없이 선언하며 지역변수로 처리
function sum(num1, num2) {
alert("합계 = "+(num1+num2));
}
//매개변수의 갯수와 같은 갯수의 값을 전달하여 함수 호출
//sum(10, 20);//합계 = 30
//매개변수의 갯수보다 적은 갯수의 값을 전달하여 함수 호출 가능
// => 값을 전달받지 못한 매개변수는 [undefined] 자료형의 변수로 처리 - 비정상적인 결과 제공
//sum(10);//합계 = NaN
//매개변수의 갯수보다 많은 갯수의 값을 전달하여 함수 호출 가능
// => 매개변수에 값이 차례대로 전달되어 저장되며 남은 값은 미사용 처리
sum(10, 20, 30);//합계 = 30
*/
function total() {
//alert("total 함수의 명령 실행");
//arguments 객체 : 함수 호출시 전달된 모든 값을 배열 형식으로 저장하기 위한 내장객체
//alert(arguments);//[object Arguments]
//alert(arguments.length);//전달값의 갯수를 제공받아 출력
var tot=0;
for(i=0;i<arguments.length;i++) {
tot+=arguments[i];//전달값을 제공받아 변수에 누적 처리
}
alert("합계 = "+tot);
}
//자바스크립트에서는 매개변수에 상관없이 함수명으로 함수 호출 가능
//total();
//total(10,20,30);
total(10,20,30,40,50);
</script>
</body>
</html>
10_return
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Return</h1>
<hr>
<p>return 명령 : 함수를 강제로 종료하기 위한 명령
- 함수의 내부값(함수 명령의 처리 결과값)을 함수 외부로 반환하는 기능 제공</p>
<script type ="text/javascript">
/*
function display(name) {
if(name == "홍길동") {
alert("관리자님, 안녕하세요.");
return; // 함수 종료
}
alert(name + "님, 안녕하세요.");
}
display("홍길동");
//display("임꺽정");
*/
/*
function sum(num1, num2) {
return num1+num2;
}
//함수를 호출하여 return 명령으로 반환되는 값을 제공받아 변수에 저장
var tot=sum(10, 20);
alert("합계 = "+tot);
*/
/*
// ES6에서 추가된 화살표함수를 사용하여 함수를 선언해 변수에 저장
// const sum = (num1, num2) => { return num1+num2 };
// 화살표함수의 명령으로 값을 반환하는 명령이 하나만 있는 경우 { } 기호 및 return 키워드 생략 가능
const sum = (num1, num2) => num1+num2;
alert("합계 = " + sum(10, 20)); // 함수를 호출하여 반환되는 값을 변수에 저장하지 않고 출력
*/
function display() {
alert("display 함수의 명령 실행");
}
// 반환되는 결과값이 없는 함수를 호출하여 반환값을 변수에 저장할 경우 변수에는
// 아무런 값도 저장되지 않아 [undefined] 자료형으로 처리
var result = display();
alert(result); // undefined
</script>
</body>
</html>
11_inner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>내부함수(Inner Function)</h1>
<hr>
<p>내부함수 - 함수 내부에 선언된 함수로 선언된 함수에서만 호출 가능</p>
<script type="text/javascript">
/*
function display() {
alert("display 함수의 명령 실행-1");
}
//동일한 이름의 함수 선언 가능 - 기존 함수 덮어씌우기(OverWrite)
function display() {
alert("display 함수의 명령 실행-2");
}
display();
*/
/*
function outer() {
//내부함수 선언 - 함수가 종료되면 내부함수 소멸
function inner() {
alert("inner 함수의 명령 실행");
}
inner();//내부함수는 선언된 함수 내부에서만 호출 가능
}
//outer();
//inner();//내부함수는 함수 외부에서 호출 불가능
*/
function outer() {
//함수 내부에 익명함수를 선언하여 호출
(function() {
alert("익명함수의 명령 실행");
})();
}
outer();
</script>
</body>
</html>
12_callback
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>콜백함수(Callback Function)</h1>
<hr>
<p>콜백함수 : 매개변수로 함수를 전달받아 저장하여 함수 내부에서 매개변수로 호출되는 함수</p>
<script type="text/javascript">
//함수명을 사용하여 함수 선언 - 선언함수
function display1() {
alert("display1 함수의 명령 실행");
}
//함수명은 함수를 구분하기 위한 식별자로 내부적으로 함수변수처럼 함수를 저장하여 사용
//alert(display1);//변수에 저장된 값 출력 >> 선언함수 출력
//display1();//함수명을 이용하여 함수 호출
//함수명 없이 함수 선언 - 익명함수 : 익명함수를 변수에 저장
var display2=function() {
alert("display2 함수의 명령 실행");
}
//변수에 함수를 저장하여 사용 가능 - 함수변수
//alert(display2);//변수에 저장된 값 출력 >> 익명함수 출력
//display2();//함수변수를 이용하여 함수 호출
function display(callback) {
//alert(callback);//매개변수에 저장된 값 출력
callback();//매개변수에 저장된 함수를 이용하여 함수 호출 - 콜백함수
}
//display(display1);//함수명으로 매개변수에 선언함수를 전달하여 함수 내부에서 호출
//display(display2);//함수변수로 매개변수에 익명함수를 전달하여 함수 내부에서 호출
/*
//함수 호출시 익명함수를 생성하여 매개변수에 전달하여 함수 내부에서 호출
display(function() {
alert("익명함수의 명령 실행");
});
*/
//함수 호출시 화살표함수를 생성하여 매개변수에 전달하여 함수 내부에서 호출
display(() => alert("화살표함수의 명령 실행"));
</script>
</body>
</html>
13_closure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>클로저함수(Closure Function)</h1>
<hr>
<p>클로저함수 : 함수 내부에 선언된 함수(내부함수)를 반환받아 함수 외부에서 호출하는 함수</p>
<script type="text/javascript">
function outer() {
// 내부함수 선언
function inner() {
alert("내부함수의 명령 실행");
}
// inner();//내부함수는 선언된 함수 내부에서만 호출 가능
// 함수명은 변수와 같고 함수는 값이므로 반환 가능
return inner; // 함수 반환
}
// inner(); // 내부함수를 함수 외부에서 호출한 경우 에러 발생
/*
var closure = outer(); // 함수를 반환받아 변수에 저장
closure(); // 변수에 저장된 내부함수를 함수 외부에서 호출 가능 - 클로저함수
*/
// 내부함수를 반환받아 변수에 저장하지 않고 직접 호출
// outer()();
function display(name) {
// 익명함수를 생성하여 반환
return function() {
// 내부함수에서는 외부함수의 변수 사용 가능
alert(name + "님, 안녕하세요.");
}
}
// display("홍길동")( );
display("임꺽정")( );
</script>
</body>
</html>
14_timer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>내장함수 - 시간 경과에 따른 명령 실행 함수</h1>
<hr>
<p>setTimeout(callback, ms) : 시간(ms) 경과 후 콜백함수를 한번만 호출하여 콜백함수의
명령을 실행하는 함수 - timeoutId(setTimeout 함수를 구분하기 위한 식별자) 반환</p>
<p>clearTimeout(timeoutId) : timeoutId의 setTimeout 함수의 실행을 취소하는 함수</p>
<p>setInterval(callback, ms) : 시간(ms) 경과마다 콜백함수를 반복적으로 호출하여 콜백함수의
명령을 실행하는 함수 - intervalId(setInterval 함수를 구분하기 위한 식별자) 반환</p>
<p>clearInterval(intervalId) : intervalId의 setInterval 함수의 실행을 취소하는 함수</p>
<script type="text/javascript">
/*
//콜백함수에 익명함수를 전달하여 익명함수의 명령을 반복 실행
var id=setInterval(function() {
alert("setInterval 함수에 의해 반복 실행되는 명령");
}, 1000);
*/
// 콜백함수에 화살표함수를 전달하여 화살표함수의 명령을 반복 실행
var id = setInterval(() => alert("setInterval 함수에 의해 반복 실행되는 명령"), 1000);
setTimeout(function() {
clearInterval(id);
}, 5000);
</script>
</body>
</html>
15_encode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>내장함수 - 부호화(복호화) 관련 함수</h1>
<hr>
<!-- URI 주소는 영문자, 숫자, 일부 특수문자로만 표현 가능 -->
<!-- > URI(웹자원의 식별자) = URL(웹자원의 위치) + QueryString(전달값) -->
<!-- URI 주소의 질의문자열(QueryString)을 이용하여 요청 웹프로그램에게 필요한 값 전달 -->
<!-- 문제점)질의문자열에 URI 주소로 사용 불가능한 문자 포함 가능 - 값이 비정상적으로 전달 -->
<!-- 해결법)질의문자열에 URI 주소로 사용 불가능한 문자가 포함된 경우 부호화 처리하여 전달 -->
<!-- 부호화(Encoding) 처리 : URI 주소로 사용 불가능한 문자를 URI 주소로 사용 가능한 문자(유니코드)로 변환 -->
<p>encodeURI(string) 함수 또는 encodeURIComponent(string) 함수 : 매개변수로 일반 문자값을
전달받아 부호화된 문자값으로 변환하여 반환하는 함수 - 부호화 처리 함수</p>
<p>decodeURI(string) 함수 또는 decodeURIComponent(string) 함수 : 매개변수로 부호화 처리된
문자값을 전달받아 일반 문자값으로 변환하여 반환하는 함수 - 복호화 처리 함수</p>
<script type="text/javascript">
var name="홍길동";
// alert("name = "+name);
var encodeName=encodeURIComponent(name);
// alert("encodeName = "+encodeName);
var decodeName=decodeURIComponent(encodeName);
alert("decodeName = "+decodeName);
</script>
</body>
</html>
16_eval
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>내장함수 - eval 함수</h1>
<hr>
<p>eval(string) : 매개변수로 문자값을 전달받아 자바스트립트 명령으로 변환하여 실행하는 함수</p>
<script type="text/javascript">
/*
var text="20 + 10";
//alert(text);//20 + 10 - 변수에 저장된 문자값 출력
alert(eval(text));//30 - 변수에 저장된 문자값으로 명령으로 변환되어 실행
*/
/*
var operation=prompt("연산식을 입력해 주세요");
alert("연산결과 = "+eval(operation));
*/
var display="function() { alert('함수의 명령 실행'); }";
//alert("변수의 자료형 = "+typeof(display));//변수의 자료형 = string
//display();//변수에 저장된 값이 함수가 아니므로 함수 호출 불가능 - 에러발생
//eval 함수를 사용하여 변수에 저장된 문자값을 실행
// => 함수가 저장된 문자값을 자바스트립트 명령으로 변환되어 함수가 먼저 선언되므로 앞과
//뒤에 ( ) 기호를 사용하여 우선 처리
//alert("변수의 자료형 = "+typeof(eval("("+display+")")));//변수의 자료형 = function
eval("("+display+")")();//문자값으로 저장된 함수를 eval 함수를 사용하여 선언한 후 직접 호출
</script>
</body>
</html>
17_isNaN
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>a
<h1>내장함수 - isNaN 함수</h1>
<hr>
<p>isNaN(value) : 매개변수로 전달받는 값이 숫자로만 구성된 경우 [false]를 반환하고
숫자로만 구성되지 않은 경우 [true]를 반환하는 함수</p>
<script type="text/javascript">
//var value="123";
var value="123abc";
if(isNaN(value)) {
alert("숫자로만 구성된 값이 아닙니다.");
} else {
alert("숫자로만 구성된 값입니다.");
}
</script>
</body>
</html>
18_isFinite
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>내장함수 - isFinite 함수</h1>
<hr>
<p>isFinite(value) : 매개변수로 전달받은 값이 무한수인 경우 [false]를 반환하고
유한수인 경우 [true]를 반환하는 함수</p>
<script type="text/javascript">
//alert(10/4);//2.5
//alert(10/3);//3.3333333333333335 - 자바스트립트는 모든 숫자값이 유한수로 표현
//alert(10/0);//Infinity - 무한수
//var num1=10, num2=3;
var num1=10, num2=0;
if(isFinite(num1/num2)) {
alert(num1/num2);
} else {
alert("0으로 나눌 수 없습니다.");
}
</script>
</body>
</html>
19_parse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>내장함수 - 숫자값 변환 함수</h1>
<hr>
<p>parseInt(value) : 매개변수로 전달받은 값을 정수값으로 변환하여 반환하는 함수</p>
<p>parseFloat(value) : 매개변수로 전달받은 값을 실수값으로 변환하여 반환하는 함수</p>
<script type="text/javascript">
/*
var result=50/3;
//alert("결과 = "+result);//결과 = 16.666666666666668
//alert("결과 = "+parseInt(result));//결과 = 16
*/
/*
//parseInt(string[, radix]) : 매개변수를 전달받은 특정 진수의 문자값을 10진수의 정수값으로 변환하여 반환하는 함수
//alert("16진수 : 123 = 10진수 : "+parseInt("123", 16))
//alert("16진수 : abc = 10진수 : "+parseInt("abc", 16))
alert("8진수 : 123 = 10진수 : "+parseInt("123", 8));
*/
/*
var num="100";
//alert(num+200);//100200 - 문자값 결합
//매개변수로 전달받은 문자값을 정수값으로 변환하여 반환
alert(parseInt(num)+200);//300 - 산술 연산
*/
/*
var num="10.5";
//alert(num+20);//10.520 - 문자값 결합
//매개변수로 전달받은 문자값을 실수값으로 변환하여 반환
alert(parseFloat(num)+20);//30.5 - 산술 연산
*/
/*
var num="100";
//alert(parseInt(num)+200);//300 - parseInt 함수를 사용하여 문자값을 숫자값(정수값)으로 변환
alert(Number(num)+200);//300 - Number 함수를 사용하여 문자값을 숫자값으로 변환
*/
var num="100abc";
//parseInt 함수를 사용하면 매개변수로 전달받은 문자값의 앞부분의 숫자만 잘라내어 정수값으로 변환하여 반환
//alert(parseInt(num)+200);//300
//Number 함수를 사용하면 매개변수에 전달받은 문자값에 숫자외 문자가 존재할 경우 NaN 발생
alert(Number(num)+200);//NaN
</script>
</body>
</html>
$20_class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>자바스크립트 객체</h1>
<hr>
<p>자바스크립트는 객체 지향 프로그래밍 언어로 객체를 이용하여 프로그램을 작성하는 언어</p>
<p>자바스크립트는 모든 값을 객체로 표현하여 처리</p>
<p>객체(Object) : 현실 세계에 존재하는 특정 대상을 프로그램에서 사용하기 위해
프로퍼티(Property : 표현대상의 속성)와 메소드(Method : 표현대상의 행위)로 표현</p>
<p>자바스트립트는 클래스 대신 함수(클래스 함수)를 사용하여 객체를 생성
- 클래스 함수를 선언하고 new 연산자로 클래스 함수를 호출하여 객체 생성</p>
<p>ES6에서는 클래스를 선언하여 객체 생성 가능 - 클래스를 선언하고 new 연산자로
클래스의 생성자(Constructor)를 호출하여 객체 생성</p>
<p>클래스 함수(클래스)로 객체를 생성하는 이유는 동일한 프로퍼티와 메소드가 포함된
다수의 객체를 쉽게 생성하기 위해 사용 - 생산성 및 유지보수의 효율성 증가</p>
<script type="text/javascript">
/*
//클래스 함수 선언 - 객체를 생성하기 위한 함수
// => 일반함수와 구분하기 위해 함수명의 첫문자를 대문자로 작성 - 파스칼 표기법
// => 클래스 함수의 매개변수로 값을 전달받아 프로퍼티의 초기값으로 저장
function Student(num, name, address) {
//this 키워드를 사용하여 프로퍼티와 메소드 표현
// => this : 클래스 함수 내부에서 객체를 표현하기 위해 사용하는 키워드
//this 키워드로 객체의 요소를 표현하여 값 저장 - 프로퍼티
//프로퍼티(Property) : 객체의 속성값을 저장하기 위한 변수 - 멤버변수
this.num = num;
this.name = name;
this.address = address;
//this 키워드로 객체의 요소를 표현하여 함수 저장 - 메소드
// => 메소드는 this 키워드를 이용하여 프로퍼티 사용 가능
//메소드(Method) : 객체의 행위(기능)을 함수로 표현하여 저장한 변수 - 멤버함수
this.display = function() {
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
}
//클래스 함수를 사용하여 객체를 생성하는 방법
// => new 연산자로 클래스 함수를 호출하여 객체 생성하고 생성된 객체를 변수에 저장 - 객체변수
//형식)var 변수명 = new 클래스함수(값, 값, ...)
var student=new Student(1000, "홍길동", "서울시 강남구");
alert("student = "+student);//student = [object Object]
//alert("변수의 자료형 = "+typeof(student));//변수의 자료형 = object
//객체는 . 연산자를 사용하여 객체 요소(프로퍼터 또는 메소드)에 접근하여 사용 가능
//alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);
//student.display();//메소드 호출
//. 연산자 대신 [] 연산자를 이용하여 객체에 접근 가능
//alert("학번 = "+student["num"]+", 이름 = "+student["name"]+", 주소 = "+student["address"]);
//student["display"]();
//자바스트립트는 객체에 요소(프로퍼터 또는 메소드)에 대한 추가, 변경, 삭제 가능
student.phone="010-1234-5678";//객체에 프로퍼티 추가
//alert("전화번호 = "+student.phone);
//객체 메소드에 저장된 함수 변경
student.display = function() {
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address+", 전화번호 = "+ this.phone);
}
//student.display();
//delete(객체요소) : 객체에서 요소를 삭제하는 함수
delete(student.phone);//프로퍼티 삭제
//객체의 요소가 아닌 경우 [undefined] 자료형으로 처리
alert("전화번호 = "+student.phone);//전화번호 = undefined
*/
//ES6에서는 class 키워드로 클래스를 선언하여 객체 생성 가능 - 내부적으로 클래스 함수로 처리
class Human {
constructor(num) { //constructor 키워드로 생성자 선언
//this 키워드로 객체 요소를 표현하여 값 저장 - 프로퍼티
this.num = num;
}
}
//extends 키워드로 부모클래스를 상속받아 클래스 작성 가능
class Student extends Human {
constructor(num, name, address) {
super(num);//부모클래스의 생성자를 호출하여 객체 초기화
this.name = name;
this.address = address;
}
//메소드 선언 - function 키워드 없이 함수 선언
display() {
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
}
let student=new Student(1000, "홍길동", "서울시 강남구");
//alert("클래스의 자료형 = "+typeof(Student));//클래스의 자료형 = function
//alert("변수의 자료형 = "+typeof(student));//변수의 자료형 = object
//alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);
student.display();
</script>
</body>
</html>
