![[7/15] 자바스크립트 기초2](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fdm9sqb%2FbtrSJmQWkVm%2FAAAAAAAAAAAAAAAAAAAAALl6BsMHob1k2G4Pgk-kqLG5sQNPnnkNGez84GkyMV6o%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DUK%252BbkD8q%252BAr8eBdSMpTaAnoIJAw%253D)
📌지역변수와 전역변수
지역 변수 : 함수 내부에서 선언되었기 떄문에 선언된 함수에서 변수로 사용가능
전역 함수 : 함수 외부에서 선언된 변수로, 모든 함수에서 변수로 사용 가능
<!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 |