[7/15] 자바스크립트 기초2

📌지역변수와 전역변수

지역 변수 : 함수 내부에서 선언되었기 떄문에 선언된 함수에서 변수로 사용가능

전역 함수 : 함수 외부에서 선언된 변수로, 모든 함수에서 변수로 사용 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>전역변수와 지역변수</h1>
	<hr>
	<p>전역변수(Global Variable) : 함수 외부에서 선언된 변수 -모든 함수에서 변수(값) 사용가능</p>
	<p>지역변수(local Variable) : 함수 내부에서 선언된 변수 -선언된 함수(블럭)에서 변수(값)사용가능 </p>
	
	<script type="text/javascript">
	var globalVar = 100; //전역변수
	
	function print1(){
		//alert("print() 함수 = " + globalVar)
		
		//var키워드를 생략하여 사용할 경우 전역변수로 처리하기 때문에 주의!!
		var localVar = 300;//함수 종료시 자동 소멸
		alert("print() 함수 = " + localVar);
	}
	
	function print2(){
		//다른함수에서 선언된 지역변수는 사용 불가능
		alert("print() 함수 = " + globalVar);
	}
	
	print1();
	print2();
	
	</script>
	
</body>
</html>

📌매개변수

argument는 배열객체라고 한다. 자바스크립트가 가지고 있는 내장 객체이다.

따라서 arguments.length로 길이도 알 수 있고, arguments[i]로 인덱스로도 접근이 가능하다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>매개변수(Argument)</h1>
	<hr>
	<p>매개변수 : 함수의 명령실행에 필요한 값을 함수 호출 시 전달받기 위한 </p>
	
	<script type="text/javascript">
	function sum(num1, num2) {
		alert("sum = " + (num1 + num2));
	}
	
	//매개변수의 갯수보다 적은 갯수의 값 전달 가능
	//=>값을 전달받지 못한 매개변수는 undefined형태로 표현된다 => 비정상적인 실행
    sum(10);
    
	sum(10,20);
	
	//매개변수의 갯수보다 많은 갯수의 값 전달 가능
	//=>매개변수에 전달되지 않은 값은 자동 소멸된다
	sum(10,20,30); //결과는 30(10+20)
	
	function total(){
		//alert("total 함수호출");
		
		//arguments : 함수 호출 시 전달된 모든 값들을 저장하기 위한 객체 
		//alert(typeof(arguments));
		
		//arguments.length : 객체에 저장된 값의 갯수 = 배열객체 
		//=> 요소의 갯수를 표현
		//alert(arguments.length);//10,10,10을 전달 했으므로 3이 출력된다
		
		var tot = 0;
		for(var i = 0 ; i<arguments.length; i++){
			tot += arguments[i];
		}
		
		alert(tot);
	}
	
	total(10,10,10);
	
	</script>

</body>
</html>

📌return

: 함수를 종료하기 위한 명령 또는 함수 내부값을 호출시, 반환하는 기능을 제공한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>Return</h1>
	<hr>
	<p>함수를 종료하기 위한 명령 - 함수 내부 값을 호출시 반환하는 기능 제공</p>
	
	<script type="text/javascript">
	function sum(num1, num2) {
		if(isNaN(num1) || isNaN(num2)) {
			alert("숫자값을 2개를 전달해야 함수 호출이 가능합니다.");
			return;//함수 종료
		}
		
		return num1+num2;//함수를 종료하며 값 반환
	}
	
	//함수를 호출하여 반환되는 값을 변수에 저장
	//var tot=sum(10,20);
	//alert("합계 = "+tot);
	
	//alert("합계 = "+sum(10,20));
	
	//함수 호출시 반환값이 없는 경우 undefined 형태로 출력
	//alert("합계 = "+sum());
	alert("합계 = "+sum("abc",20));
	</script>
</body>
</html>

📌내부함수

이미 print라는 함수가 존재한다고 가정할때, 그것을 인지하지 못하고 또 같은 이름으로 함수를 만들 경우, 기존에 있던 함수에 내가 만든 함수로 덮어씌우기가 되므로 조심해야한다.

이것을 방지하기 위해서 내부함수를 사용한다.

겉표현의 함수이름은 outerFunction으로 지정해놓고, 내가 만들고싶은 함수를 그 안에 마음대로 구현하면 된다. 함수내부에 내가 만든 함수를 실행하는 명령도 반드시 넣어주어야 실행이된다는것을 주의!!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>내부함수(Inner Function)</h1>
	<hr>
	<p>내부함수 : 내부에서만 함수 호출 가능
		-선언된 함수 내부에서만 함수 호출 가능</p>
		
	<script type="text/javascript">
	/*function print() {
		alert("print함수 호출");
	}
	
	print();
	
	//동일한 이름의 함수를 선언할 수 있다.
	//=>기존함수 덮어 씌우기가 되므로, 위에 print함수는 없어지고 밑에 print함수가 남는다
	function print() {
		alert("밑에 print함수 호출")
	}*/
	
	function outerFunction() {
		//내부함수 : 다른함수로 덮어씌우기 선언하지 못하도록 작성한다
		function print() {
			alert("outerFunction()에 선언된 print() 내부함수 호출");
		}
	
		//내부함수는 선언된 함수 내에서만 호출이 가능하다
		print();
	}
	
	outerFunction();
	print(); //이렇게 하면 덮어씌워지지 않고 따로따로 선언이 가능해 진다
	
	function print() {
		alert("밑에 print함수 호출")
	}
	
	</script>
	
</body>
</html>

📌callback함수(=함수가 불러진다)

: 함수의 매개변수에 외부함수를 전달하여 저장하고, 매개변수로 함수 내부에서 호출되는 함수

외부함수로 만들어서 호출되는 것은 내부함수처럼 호출하는 형태. 이벤트 핸들러가 주로 이런형식으로 짜여지므로 중요하다★

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>콜백함수</h1>
	<hr>
	<p>함수의 매개변수에 외부함수를 전달하여 저장하고 매개변수로 함수 내부에서 호출되는 함수
	
	<script type="text/javascript">
	
		//이거 자체가 선언문이기 때문에 미리 만들어진다
		function print1() {
			alert("함수 호출 - 함수명 이용");
		}
		
		//함수명은 함수를 저장하는 함수 변수 이다
		//alert(typeof(print1));//function자료형
		//alert(print1);//함수가 호출된다
		
		//함수명을 이용하여 함수를 호출
		//print1();
		
		//얘는 =(저장하라는 명령)이기 떄문에 미리 호출x 그렇기 때문에 변수는
		//선언되어있지만, 함수가 호출이 나중에 되기 때문에 값이 저장되어 있지 않게 된다
		var print2 = function() {//익명의 함수를 이용
			alert("함수 호출 - 함수 변수 이용")
		}
		
		//alert(typeof(print2)); //얘도 function자료형
		
		//함수변수를 이용하여 함수 호출
		//print2();
		
		function callback(call) {
			//alert(call);
			
			//매개 변수에 저장된 함수를 호출 할 수 있다.-콜백함수(매개변수로 전달되서 호출되는 함수)
			//전달된 함수에따라 다르게 호출될 수 있다.
			call();
		}
		
		callback(print1);
        
        //이런 형태로 많이 사용한다
        //외부함수로 만들어서 호출하는 건 내부함수처럼 호출하는 형태로!!
        //이벤트 핸들러가 주로 이런 형태로 짜여진다 ★★★중요
        callback(function() {
			alert("안녕하세요");
		})
		
	</script>
</body>
</html>

📌클로저 함수

: 내부함수를 반환받아 호출하는 함수

3가지의 방법이 존재한다

1.함수를 호출하여 내부함수를 반환받아 저장(= 함수 변수)

var fun = outer(); //fun변수는 outer함수가 저장
fun(); //그렇기 때문에 함수형태로 호출해야한다.

2. 내부함수를 반환받아

outer()(); //변수로 반환받아 사용하는 것이 아니라, 바로 실행

3. 선언할때부터 다 때려박기

function closure (name) {
return function () {
alter("안녕하세요");
}
}

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 print() {
			alert("outer() 함수 내부에 선언된 print() 함수 호출");
		}	
		
		//print();
		return print;
	}
	
	//방법1-----------------------------
	//함수를 호출하여 내부함수를 반환받아 저장 - 함수변수
	var fun=outer();
	
	//함수변수를 이용하여 함수 호출 - 내부함수 호출(클로저 함수)
	fun();
	
	//방법2-----------------------------
	//내부함수를 반환받아 직접호출
	//=>즉, 변수로 받아 사용하는것이 아니라 바로 실행
	outer()();
	
	
    	//방법3----------------------------
   	 //선언할때부터 다 때려박기
	function closure(name) {
		return function () {
			alert(name + "님, 안녕하세요");
		}
	}
	
	closure("홍길동")();
	
	</script>
</body>
</html>

내장함수

📌내장함수 - timer함수

setTimeout	시간경과 후 콜백함수의 명령을 한번만 실행하는 함수
clearTimeout	timeoutId로 등록된 setTimeout함수를 초기화
setInterval	시간마다 콜백함수의 명령을 반복실행하는 함수
clearInterval	intervalId로 등록된 setInterval함수를 초기화 하는 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장함수 - timer 함수</h1>
	<hr>
	
	<!-- setInterval과 clearInterval은 자주 사용된다 -->
	<p>setTimeout(callback,ms) : 시간(ms) 경과 후 콜백함수의 명령을 
	한번만 실행하는 함수 - timeoutId(함수 호출 고유값) 반환</p>
	
	<p>clearTimeout(timeoutId) : timeoutId로 등록된 setTimeout() 함수를
	초기화 처리하는 함수 - setTimeout() 함수 실행 취소</p>
	
	<p>setInterval(callback,ms) : 시간(ms)마다 콜백함수의 명령을 
	반복 실행하는 함수 - intervalId(함수 호출 고유값) 반환</p>
	
	<p>clearInterval(intervalId) : intervalId로 등록된 setInterval() 함수를
	초기화 처리하는 함수 - setInterval() 함수 실행 취소</p>
	
	<script type="text/javascript">
		var intervalId = setInterval(function() {
			alert("시간경과 후 반복실행되는 명령");
		}, 1000);
		
		setTimeout(function() {
			clearInterval(intervalId)
		}, 5000);
		
	</script>
	
</body>
</html>

📌내장함수 - encode함수 (인코딩과 디코딩)

쿼리스트링에 전달되는 값을 읽어들이기 위해서 쓴다
폰태그를 사용하면 쓸일이 없음

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장함수 - encode 함수</h1>
	<hr>
	<!-- URL 주소는 영문자,숫자,일부 특수문자를 이용하여 작성 -->
	<!-- URL 주소는 QueryString를 사용하여 요청 프로그램에 값을 전달 -->
	<!-- => QueryString은 URL 주소로 표현할 수 없는 문자 포함 -->
	<!-- => URL 주소로 표현할 수 없는 문자를 URL 주소로 인식되도록 부호화 처리하여 전달 -->
	<p>encodeURI(string)과 encodeURIComponent(string) : 문자값을 
	전달받아 부호화 변환하여 반환하는 함수</p>
	<p>decodeURI(string)과 decodeURIComponent(string) : 부호화된 
	문자값을 전달받아 복호화 변환하여 반환하는 함수</p>
	
	<script type="text/javascript">
	var name = "홍길동";
	alert(name);
	
	var encodename = encodeURIComponent(name);
	alert("encodeName = " + encodename);
	
	var decodeName = decodeURIComponent(encodename);
	alert(decodeName);
	</script>
</body>
</html>

📌내장함수 - eval함수★

문자값을 객체로 바꿀때 많이 쓴다 -> ajax에서 많이 쓴다고 한다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>내장함수 - eval함수</h1>
	<hr>
	<p>eval(String) : 문자값을 전달받아 자바스크립트코드로 변환하여 반환하는 함수
	<script type="text/javascript">
		var text = "20 + 10 ";
		//alert(text);
		
		alert(eval(text));//출력 30 -> text에 저장되어 있는 코드가 자바스크립트 코드로 변환되어
						//계산되기때문에 30이 출력된다
		var operation = prompt("사칙연산을 입력해주세요");
		alert("연산결과 = " + eval(operation));
		
		var fun = "function() {alert('익명함수 호출')}";
		alert(typeof(fun));
		
		//함수가 아니므로 함수처럼 호출 할 경우 에러가 발생한다
		//fun();
		
		//문자값을 자바스크립트 코드로 변환해서 처리
		//=> 선언문은()기호를 이용하여 먼저 처리되도록설정
		alert(typeof(eval("("+fun+")")));
		eval("("+fun+")")();
		
		
		
	</script>

</body>
</html>

📌내장함수 - isNaN함수

전달값이 숫자로만 구성된 경우 false를 반환
전달값이 숫자로만 구성되지 않은 경우 true를 반환

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<h1>내장함수 - isNaN 함수</h1>
	<hr>
	<p>isNaN(value) : 전달값이 숫자로만 구성된 경우 false 반환,숫자로만
	구성되지 않은 경우 true를 반환하는 함수</p>

	<script type="text/javascript">
		var text = "123";
		if(isNaN(text)){
			alert("NaN(Not a Number)이 맞습니다 - 숫자로만 구성되지 않은 값)")
		}else {
			alert("NaN(Not a Number)이 맞습니다 - 숫자로만 구성되지 않은 값)")
		}
	</script>
</body>
</html>

📌내장함수 - isFinite함수

전달값이 무한대인 경우 false를 반환
유한대인 경우 true를 반환

<!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/3);
	//alert(10/0);//Infinity : 무한대
	
	//var num1=20, num2=10;
	var num1=20, num2=0;
	
	if(isFinite(num1/num2)) {
		alert("결과 = "+(num1/num2));
	} else {
		alert("0으로 나눌 수 없습니다.");
	}
	</script>
</body>
</html>

📌내장함수 - pasre함수

parseInt	전달값을 정수값으로 변환하여 반환하는 함수
parseFloat	전달값을 실수값으로 변환하여 반환하는 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장함수 - parse 함수</h1>
	<hr>
	<p>parseInt(value) : 전달값을 정수값으로 변환하여 반환하는 함수</p>
	<p>parseFloat(value) : 전달값을 실수값으로 변환하여 반환하는 함수</p>
	
	<script type="text/javascript">
	var result=50/3;
	//alert("결과 = "+result);
	
	var result = 50/3;
	//alert("결과 = " + parseInt(result));
	
	//parseInt(value[,radix]) : 진수형식의 문자값을 전달받아 10진수
	//정수값으로 변환하여 반환하는 함수
	//=>진수가 생략된 경우 10진수로 자동처리
	//alert(parseInt(123,8));
	//alert(parseInt("abc",16));	
	
	var num = "100.5";
	//alert(num + 200); //결과 : 문자값(문자 결합)
	
	//Number() : 전달받은 문자값을 숫자값으로 변환하여 반환하는 함수
	alert(Number(num + 200));//결과 :100.52
	alert(parseFloat(num)+200); //결과 : 실수값 = 300.5
	alert(parseInt(num)+200); //결과 : 정수값 = 300
	
	var num1 = "100abc";
	alert(Number(num1)+200);//결과 : NaN
	alert(parseInt(num1) + 200);//결과 : 300 - 앞부분 숫자만 잘라내어 정수값으로 반환
								//만약 var값이 "abc100"이라면 NaN이 나온다
	</script>
</body>
</html>

자바스크립트의 객체

[객체를 만드는 방법]

빈 객체를 만들어서 계속 추가/삭제하는 방법
class를 만들어서 계속 추가/삭제 하는 방법

📌자바스크립트 객체

JSON(JavaScript Object Notation) : 자바스크립트 객체 표기법
참고로 배열은 대괄호를 사용하여 표기한다
{ }기호를 사용하여 오브젝트 객체를 표현한다
var student = new Object();로 객체를 만들어 줄수도 있지만
var student = {};도 가능하다
객체 요소(속성과 메소드)는 . 연산자를 이용하여 접근할 수 있다

계속 객체를 수정할 수 있기 때문에 동적인 언어라고 표현한다
하지만 객체의 사용갯수가 많아지면 속도가 느려지기 떄문에 오히려 자바가 좋을 수 도 있다는 단점도 존재!

자바스크립트에서 객체란, 속성과 메소드의 모임을 의미한다.
브라우저를 하나의 객체로 표현하여 프로그램을 작성한다. BOM - 객체관점
그렇기 때문에 1. 객체를 생성하고 2. 객체의 요소(속성과 메소드)를 추가 변경 삭제하여 사용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>자바 스크립트 객체</h1>
	<hr>
	<p>자바 스크립트 객체 : 속성(Property)과 메소드의 모임 </p>
	<p>자바 스크립트는 브라우저를 하나의 객체로 표현하여 프로그램 작성 : BOM(Browser Object Model) -객체 관점 프로그램 </p>
	
	<p>자바 스크립트는 오브젝트 클래스 함수를 이용하여 
		객체를 생성하고 객체의 요소(속성과 메소드)를 추가 변경 삭제 하여 사용한다 </p>
	<p>Object클래스 함수 : 요소가 없는 객체를 생성하기 위한 함수 </p>
	
	<script type="text/javascript">
	//자바스크립트 객체 생성 방법
	//형식) var 변수명 = new 클래스 함수(값, ...)
	
	//Object클래스 함수로 오브젝트 객체를 생성하여 변수에 저장
	//var student = new Object(); //속성이나 메소드가 하나도 없는 객체를 스튜던트 변수에 만들어서 저장하라
	//alert(typeof(student)); //결과 : object Object => 오브젝트 클래스를 가지고 만든 오브젝트 객체다 라는 뜻
	
	//{}기호를 사용하여 Object객체를 표현 - JSON(JavaScript Object Notation)
	var student = {};
	
	//객체 요소(속성과 메소드)는 . 연산자를 이용하여 접근할 수 있다 
	//새로운 객체 요소가 사용될 경우 객체의 요가 추가가 된다
	
	//객체 요소에 값  저장할 경우 속성으로 인식되어 처리 
	//=>객체 속성은 값을 저장하는 객체 요소
	student.num = 100//속성 추가
	student.name = "홍길동";
	student.address = "서울시 강남구";
	
	//객체 속성값을 출력
	alert("학번 = " + student.num +" 이름 = " + student.name + " 주소 = " + student.address);
	//객체에 존재하지 않는 요소를 사용할 경우 undefinded발생
	//alert("전화번호" + studnet.phone); //없는 객체 속성을 불러오면 undefined(=값이 없다)라고 뜬다
	
	//객체 요소에 함수를 저장할 경우 메소드로 인식되어 처리가 된다
	student.display = function() {
		//객체 요소를 메소드에서 사용할 경우 반드시 this키워드를 사용해야 한다
		//=> this를 사용하지 않을 경우 일반 변수로 인식되어 처리된다
		//객체 메소드에서 현재 객체를 표현하기 위한 키워드
		alert("학번 = " + this.num +" 이름 = " + this.name + " 주소 = " + this.address);
		
	}
	
	student.display();
	
	</script>
	
</body>
</html>

📌JSON을 이용하여 객체를 만드는 방법

//JSON을 이용할 경우 객체 생성 시 요소 추가 기능
//형식) var 변수명 = ("요소명": "값", "요소명" : "함수");
	
var student = {"num" : 1000, "name" : "홍길동" , address : "서울시 강남구", "display": function(){
	alert("학번 = " + this.num +" 이름 = " + this.name + " 주소 = " + this.address);
}};

//함수 호출
student.display();

alert("학번 = " + student.num +" 이름 = " + student.name + " 주소 = " + student.address);
	
//배열로 객체의 속성에 접근할 수 있다(단, 메소드는 접근 불가능)
alert("학번 = " + student["num"] +" 이름 = " + student["name"] + " 주소 = " + student["address"]);

//delete(객체 변수.요소명) : 객체의 요소를 제거하는 함수
delete(student.address);//address속성을 삭제해달라.

📌in연산자와 with함수

in 연산자 : 객체 요소를 확인하는 연산자
→ for문을 이용할 수 있다.
with 연산자 : 객체 요소를 변수처럼 사용할 수 있는 기능을 제공하는 함수

//in연산자 : 객체 요소를 확인하는 연산자
//형식) "요소명" in 객체 변수
//=> 객체에 존재하는 요소가 아닌 경우 false반환 요소인 경우 true를 반환
alert("num" in student);//true반환
alert("phone" in student); //false로 반환

//in연산자를 이용하여 for구문을 이용한 반복처리 
//형식) for(변수명 in 객체변수)
//=> 객체의 요소명을 반환받아 변수에 저장하는 기능을 반복처리하는 명령
for(property in student){
    alert(property + " = " + student[property]);
}

//with(object) : 객체 요소를 변수처럼 사용할 수 있는 기능을 제공하는 함수
with(studnet){
	alert("학번 = " + num +" 이름 = " + name + " 주소 = " + address);
}

📌class함수 → 객체를 다수 개 만들 때 사용

객체를 하나 만들면 위와같은 방법이 편하지만 객체를 다수개를 만들때에는 힘드므로 class함수를 생성
일종의 생성자라고 생각하면 된다.
요소의 추가삭제도 가능하다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>클래스 함수</h1>
	<hr>
	<p>클래스 함수 : 객체를 생성하기 위한 함수 </p>
	<p>클래스 함수는 new연산자로 호출하여 객체를 생성</p>
	<p>동일한 형태의 객체를 쉽게 생성하기 위한 클래스 함수 선언 
		-생산성 향상 및 유지보수의 효율성 증가</p>
		
	<script type="text/javascript">
	//클래스 함수 선언-매개 변수로 값을 전달받아 속성을 선언
	function Student(num, name, address) {
		//객체의 요소는 반드시 this키워드를 사용하여 표현
		this.num = num;
		this.name = name;
		this.address  = address;
        
        //메소드는 실제 이렇게 만들지 않음
        //=> 객체들마다 동일한 기능의 메소드를 가지고 있을 필요가 없기 때문임
		this.display = function(){
			alert("학번 = " + this.num +" 이름 = " + this.name + " 주소 = " + this.address);
		}
	}
	
	//클래스 함수를 이용하여 객체를 생성
	var student1 = new Student(1000, "홍길동", "서울시 강남구");
	var student2 = new Student(1000, "임꺽정", "서울시 종로구");
	var student3 = new Student(1000, "전우치", "서울시 구로구");
	
	student1.display();
	student2.display();
	student3.display();

	</script>
	
</body>
</html>

📌프로토타입 메소드

클래스 함수로 객체를 생성할 경우, 클래스 함수 안에 선언된 요소는 객체마다 따로 생성이된다.
하지만 속성은 객체마다 따로 생성되는 것이 맞지만, 메소드는 객체마다 생성되는 것은 비효율적이다.
메소드는 생성된 객체의 갯수와 상관없이 하나만 생성되어 모든 객체가 공유하여 사용하는 것을 권장한다.
이것을 프로토타입 메소드라고 한다.

두가지의 방법이 존재

1. 메소드마다 따로따로 선언

2. 한번에 선언

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>프로토 타입 메소드</h1>
	<hr>
	<p>클래스 함수로 객체를 생성할 경우 클래스 함수 안에 선언된 요소는 객체마다 따로 생성이 된다 </p>
	<p>속성은 객체마다 따로 생성되는 것이 맞지만, 메소드는 객체마다 생성되는 것은 효율적이지 X </p>
	<p>메소드는 생성된 객체의 객수에 상관없이 하나만 생성되어 모든 객체가 공유하여 사용하는 것을 권장
		이것을 프로토타입 메소드라고 한다 </p>
	
	<script type="text/javascript">
	//클래스 함수는 속성만 선언
	function Student(num , name, address) {
		this.num = num;
		this.name = name;
		this.address = address;
		
		//클래스 함수에 선언된 메소드는 객체마다 따로 존재하게 된다
		/*
			this.display = function(){
				alert("학번 = " + this.num +" 이름 = " + this.name + " 주소 = " + this.address);
			}
		*/
	}
	
	//클래스 함수의 프로토 타팁 메소드 추가 - 모든 객체가 공유하여 사용하는 메소드
	Student.prototype.display = function(){
		alert("학번 = " + this.num +" 이름 = " + this.name + " 주소 = " + this.address);
	}
	
	Student.prototype.setValue = function(num, name, address){
		this.num = num;
		this.name = name;
		this.address = address;
	}
	
	//프로토타입 메소드를 여러개 추가할 경우 오브젝트 객체 형태로 추가
	Student.prototype = {
		"display" : function(){
			alert("학번 = " + this.num +" 이름 = " + this.name + " 주소 = " + this.address);
		},
		
		"setValue" : function(){
			this.num = num;
			this.name = name;
			this.address = address;
		}
			
	};
	
	//var student1 = new Student(1000, "홍길동", "서울시 강남구");
	//var student2 = new Student(1000, "임꺽정", "서울시 종로구");
	//var student3 = new Student(1000, "전우치", "서울시 구로구");
	
	var student=new Student(1000, "홍길동", "서울시 강남구");
	student.display();
	
	student.setValue(2000, "임꺽정", "수원시 팔달구");
	student.display();
	
	</script>

</body>
</html>

📌내장클래스 함수 - Object

오브젝트 객체가 패키지의 역할을 수행한다
오브젝트 객체의 속성으로 만들어버린다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<h1>내장 클래스 함수 - Object</h1>
	<hr>
	<p>Object 클래스 함수 : 요소가 없는 객체를 생성하기 위한 클래스 함수</p>
	<p>필요한 속성과 메소드를 추가하여 사용</p>
	
	<script type="text/javascript">
	/*
	var student=new Object();
	//alert(student);
	
	//객체 속성 추가
	student.num=1000;
	student.name="홍길동";
	student.address="서울시 강남구";
	
	//alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);

	//객체 메소드 추가
	student.display=function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	}
	
	student.display();
	*/
	
	//JSON를 이용하여 Object 객체 생성 - 객체 생성시 요소 추가 가능
	var student={"num":1000,"name":"홍길동","address":"서울시 강남구"
			,"display":function() {
				alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
			}
	};
	
	//alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);
	student.display();
	
	//Object개체로 패키지 역할 수행
	var site = new Object();//var site = {};같음
	site.itwill = new Object();
	
	//객체의 속성으로 함수를 만들어버림
	//이렇게 사용하면 오버라이트가 될 일이 없게 된다
	//일종의 자바에서 패키지의 역할을 한다고 생각하면된다
	site.itwill.Studnet = function(num, name, address){
		this.num = num;
		this.name = name;
		this.address = address;
	}
	
	site.itwill.Student.prototype.display = function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	}
	
	var student = new site.itwill.Student(1000,"홍길동","서울시 강남구");


	</script>
</body>
</html>

📌number클래스 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Number클래스 함수</h1>
	<hr>
	<p>숫자값을 저장한 객체를 생성하기 위한 클래스 함수 </p> 

	<script type="text/javascript">
	/*
	var num = new Number(100);
	var num = new Number("100");//위에와 결과가 같게 나온다
	
	//Number.toString(redix) : 객체에 저장된 숫자값을 원하는 진수의 문자값으로 변환하여 반환하는 메소드
	//=> 진수를 전달하지 않을 경우 10진수의 문자값으로 변환하여 반환
	alert(num.toString(2));//2진수로 출력
	alert(num.toString(8));//8진수로 출력
	alert(num.toString());//아무것도 입력하지 않으면 10진수로 출력
	
	//객체변수를 출력할 경우 toString()메소드가 자동 호출
	//=> 객체에 저장된 정수값을 10진수의 문자값으로 출력할 경우 생략하여 사용한다
	alert(num);//toString을 사용하지 않아도 된다.
	*/
	
	var num = 100;
	alert(typeof(num));//자료형 : number형 - 객체가 아님
	
	//자바스크립트는 모든 값을 객체 관점으로 처리
	//=> number자료형은 내부적으로 Number객체로 처리 
	//=> Number자료형의 변수도 Number객체의 메소드호출이 가능하다
	alert(num.toString()); //자료형이 숫자형인데도 객체메소드를 사용할 수 있다.
	alert(num.toString(2)); //얘도 실행됨
	
	//변수의 자료형이 Object타입이 아니므로 요소 추가가 불가능하다
	num.display() = function() {
		alert("display 메소드 호출")
	}
	
	 num.display(); //함수가 아니라는 에러가 뜸
	 
	 var num = new Number(100);
	 alert(typeof(num)); //결과 : 오브젝트
	 
	 //변수의 자료형이 Object타입이므로 이제는 요소를 추가할 수 있게 된다.
	 num.display() = function() {
			alert("display 메소드 호출")
	}
	 
	 var num = "100";
	 alert(typeof(num)); //결과 : String
	 //문자값을 Number클래스함수에 전달하여 숫자값을 반환
	 alert(num + 200); //결과값이 100200으로 보이게 된다.
	
	 alert(Number(num) + 200); //결과 : 300이 출력
	 
	 var num = 12.3456789;
	 //alert("num =" + num ); 
	 //Mumber.toFixed(number) : 전달된 숫자값의 자릿수 위치의 소수점까지 값을 반올림 하여 반환하는 메소드
	 //=> 숫자값은 0부터 20까지만 가능하다(반올림된다)
	alert("num = " + num.toFixed(0)); //결과 : 12
	alert("num = " + num.toFixed(1)); //결과 : 12.3
	alert("num = " + num.toFixed(2)); //결과 : 12.35
	
	alert("최대 숫자값 = " + Number.MAX_VALUE);
	alert("최대 숫자값 = " + Number.MIN_VALUE);
	 
	</script>
	 
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'💻 수업정리 (2020) > JavaScript' 카테고리의 다른 글

[7/21] jQuery (0)	2020.07.21
[7/20] 자바스크립트 last (0)	2020.07.20
[7/17] 자바스크립트 기초4 (0)	2020.07.17
[7/16] 자바스크립트 기초 3 (0)	2020.07.16
[7/14] 자바스크립트 (0)	2020.07.14

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`