<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>프로토타입 메소드(Prototype Method)</h1>
<hr>
<p>클래스 함수를 사용하여 객체를 생성할 경우 클래스 함수에 선언된 프로퍼티와 메소드가
객체의 요소로 생성</p>
<p>프로퍼티는 객체의 속성값을 저장하기 위해 객체마다 따로 생성되어 사용하는 것이 맞지만
메소드는 동일한 명령의 함수가 객체마다 따로 생성되어 저장되는 것은 비효율적인 사용 방법</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);
}
this.setValue=function(num, name, address) {
this.num=num;
this.name=name;
this.address=address;
}
}
//생성된 객체마다 프로퍼티와 메소드를 따로 저장
var student1=new Student(1000, "홍길동", "서울시 강남구");
var student2=new Student(2000, "임꺽정", "서울시 종로구");
var student3=new Student(3000, "전우치", "서울시 동작구");
//student1.display();
//student2.display();
student3.display();
*/
//클래스 함수 선언할 때 프로퍼티만 생성
function Student(num, name, address) {
this.num=num;
this.name=name;
this.address=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(num, name, address) {
this.num=num;
this.name=name;
this.address=address;
}
}
/*
//생성된 객체에는 프로퍼티만 따로 저장되고 메소드는 하나만 생성되어 모든 객체가 공유하여 사용
var student1=new Student(1000, "홍길동", "서울시 강남구");
var student2=new Student(2000, "임꺽정", "서울시 종로구");
var student3=new Student(3000, "전우치", "서울시 동작구");
//student1.display();
//student2.display();
student3.display();
*/
var student=new Student(1000, "홍길동", "서울시 강남구");
// student.display();
// student.setValue(2000, "임꺽정", "서울시 종로구");
// student.display();
// instanceof 연산자 : ES6에서 추가된 연산자로 변수에 저장된 객체가 클래스 함수(클래스)에
// 접근하지 못할 경우 [false]를 제공하고 접근 가능한 경우 [true]를 제공하는 연산자
// 형식)객체변수 instanceof 클래스
// alert(student instanceof Student);//true
// in 연산자 : 객체의 요소가 아닌 경우 [false]를 제공하고 객체의 요소인 경우 [true]를 제공하는 연산자
// 형식)"요소명" in 객체변수
// alert("num" in student); // true
// alert("display" in student); // true
// alert("phone" in student); // false
/*
//for 구문을 사용하여 객체 요소에 대한 일괄처리 가능
// 형식)for(변수명 in 객체변수) { 명령; 명령; ... }
// > 객체 요소의 이름을 하나씩 제공받아 변수에 저장하여 반복 처리
for(variable in student) {
// alert(variable);
// 객체의 요소는 . 연산자가 아닌 [] 연산자를 사용하여 접근 가능
if(typeof(student[variable]) != "function") { // 객체의 요소가 메소드가 아닌 경우
alert(variable + " = " + student[variable]);
}
}
*/
// with 구문을 사용하여 블럭 내부에서 객체 요소를 변수처럼 사용하는 기능 제공
// 형식)with(객체변수) { 명령; 명령; ... }
// alert("학번 = " + student.num + ", 이름 = " + student.name + ", 주소 = " + student.address);
with(student) {
alert("학번 = "+num+", 이름 = "+name+", 주소 = "+address);
}
</script>
</body>
</html>
22_Object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Object 클래스 함수</h1>
<hr>
<p>요소가 하나도 선언되어 있지 않은 클래스 함수로 요소가 하나도 없는 객체를 생성할 때 사용</p>
<p>생성된 Object 객체에 요소를 추가하여 사용 - 필요한 요소가 포함된 하나의 객체를 생성</p>
<script type="text/javascript">
/*
var student=new Object();//Object 객체를 생성하여 변수에 저장 - Empty Object
//alert(student);//[object Object]
//Object 객체에 요소 추가
student.num=1000;//객체 요소에 값을 저장 - 프로퍼티 추가
student.name="홍길동";
student.address="서울시 강남구";
//alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);
//Object 객체에 요소 추가
student.display=function() {//객체 요소에 함수를 저장 - 메소드 추가
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
student.display();
*/
/*
//자바스크립트에서는 Object 객체로 보다 쉽게 생성하기 위해 JSON 기능 제공
//JSON(JavaScript Object Notation) : 자바스크립트 객체 표기법
// => 자바스크립트에서 객체를 쉽게 생성하기 위해 제공되는 방법
// => Object 객체 : {}, Array 객체 : []
var student={};
//alert(student);//[object Object]
student.num=1000;//프로퍼티 추가
student.name="홍길동";
student.address="서울시 강남구";
student.display=function() {//메소드 추가
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
student.display();
*/
/*
//JSON를 이용하면 객체를 생성할 때 요소를 추가하여 초기화 처리 가능
//형식)var 변수명={"요소명":값, "요소명":값, "요소명":함수, ... }
var student={"num":1000, "name":"홍길동", "address":"서울시 강남구"
, "display":function(){
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
};
*/
/* ES6에서는 Object 객체에 메소드를 간결하게 표현하여 저장 가능 */
var student={"num":1000, "name":"홍길동", "address":"서울시 강남구"
, display(){
alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
}
};
student.display();
</script>
</body>
</html>
23_Array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Array 클래스 함수</h1>
<hr>
<p>다수의 값(객체)를 저장하는 객체를 생성하기 위한 클래스 함수
- Array 객체의 프로퍼티와 메소드 제공</p>
<script type="text/javascript">
// 방법 1
/*
//요소가 하나도 없는 Array 객체 생성 - Empty Array
var array=new Array();
//Array.length : Array 객체에 저장된 요소의 갯수를 저장한 프로퍼티
//alert(array.length);//객체의 속성값 출력
//Array.toString() : Array 객체에 저장된 모든 요소값을 문자값으로 반환하는 메소드
//alert(array.toString());//객체 메소드를 호출하여 반환되는 값 출력
//Array 객체를 저장한 변수를 출력할 경우 자동으로 toString() 메소드 호출
alert(array);
*/
// 방법 2
/*
//Array(size) : 매개변수로 전달받은 숫자값(정수)의 갯수만큼 요소를 가진 Array 객체 생성
// => Array 객체의 요소에는 자동으로 null 저장
var array=new Array(5);
//alert(array.length);
alert(array);
*/
// 방법 3
//Array(value, value, ...) : 매개변수로 2개 이상의 값을 전달받아 전달값의 갯수만큼 요소를
//가진 Array 객체 생성 - Array 객체의 요소값으로 전달값이 차례대로 저장
var array = new Array(10,20,30);
//alert(array.length);
alert(array);
//Array 객체의 요소는 첨자(0부터 1씩 증가되는 숫자값)를 사용하여 구분
// => Array 객체의 요소는 [] 연산자에 첨자를 사용하여 표현
//alert("array[0] = "+array[0]+", array[1] = "+array[1]+", array[2] = "+array[2]);
//Array 객체의 요소를 표현하는 첨자가 범위를 벗어난 경우 [undefined] 자료형으로 표현
//alert("array[3] = "+array[3]);
/*
//JSON를 이용하여 Array 객체 생성
var array=[];//Empty Array
alert(array.length);
*/
//JSON를 이용하여 Array 객체를 생성하고 Array 객체의 요소에 초기값 저장
var array=[10, 20, 30];
/*
//for 구문을 이용하여 Array 객체에 저장된 요소에 대한 일괄 처리 가능
for(i=0;i<array.length;i++) {
alert("array["+i+"] = "+array[i]);
}
*/
/*
//in 연산자를 사용한 for 구문을 이용하여 Array 객체의 첨자를 제공받아 일괄 처리 가능
for(index in array) {
alert("array["+index+"] = "+array[index]);
}
*/
/*
//of 연산자를 사용한 for 구문을 이용하여 Array 객체의 요소값을 제공받아 일괄 처리 가능
for(value of array) {
alert(value);
}
*/
/*
//Array.forEach(callback(element[, index][, array])) : Array 객체의 요소를 일괄 처리
//하기 위한 기능을 제공하는 메소드
// => 메소드 매개변수에 콜백함수를 전달하면 Array 객체에 저장된 요소의 갯수만큼 반복
//호출되며 콜백함수의 매개변수로 전달받은 값을 이용하여 Array 객체를 콜백함수에서 처리
// => 콜백함수의 매개변수에는 요소값, 첨자, Array 객체가 저장되어 콜백함수에서 사용
array.forEach(function(elt, i) {
alert("array["+i+"] = "+elt);
});
*/
//alert(array);//10,20,30
//Array.push(value) : Array 객체의 마지막 위치에 요소를 추가를 매개변수로 전달받은 값을
//요소값으로 저장하는 메소드
array.push(40);
//alert(array);//10,20,30,40
//Array.pop() : Array 객체의 마지막 위치에 요소를 삭제하고 삭제된 요소의 값을 반환하는 메소드
var value=array.pop();
//alert(array);//10,20,30
//alert(value);//40
//Array.unshift(value) : Array 객체의 첫번째 위치에 요소를 추가를 매개변수로 전달받은 값을
//요소값으로 저장하는 메소드
array.unshift(value);
//alert(array);//40,10,20,30
//Array.shift() : Array 객체의 첫번째 위치에 요소를 삭제하고 삭제된 요소의 값을 반환하는 메소드
var value=array.shift();
//alert(array);//10,20,30
alert(value);//40
</script>
</body>
</html>
24_destructure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>구조분해할당(Destructuring Assignment)</h1>
<hr>
<p>구조분해할당 : Object 객체 또는 Array 객체의 요소를 해체하여 요소값을 개별적인 변수에
저장하여 제공하기 위한 기능</p>
<script type="text/javascript">
/*
var array=["홍길동","임꺽정","전우치"];
//var one=array[0];
//var two=array[1];
//var three=array[2];
//구조분해할당을 사용하여 Array 객체의 요소값을 차례대로 제공받아 변수에 저장
//형식)var [변수명,변수명,...] = Array객체
var [one, two, three] = array;
alert("one = "+one+", two = "+two+", three = "+three);
*/
/*
var [one, two, three] = ["홍길동","임꺽정","전우치"];
alert("one = "+one+", two = "+two+", three = "+three);
*/
/*
//Array 객체를 분리 할당할 경우 할당 받을 값이 없을 때 변수에 저장될 기본값 설정 가능
//var [one, two, three="일지매"] = ["홍길동","임꺽정","전우치"];
var [one, two, three="일지매"] = ["홍길동","임꺽정"];
alert("one = "+one+", two = "+two+", three = "+three);
*/
/*
//함수 선언시 매개변수에 전달된 값이 없는 경우 매개변수에 저장된 기본값 설정 가능
function sum(num1=10, num2=20) {
return num1+num2;
}
//alert("합계 = "+sum());
//alert("합계 = "+sum(100));
alert("합계 = "+sum(100,200));
*/
/*
var [num1, num2] = [10, 20];
//alert("num1 = "+num1+", num2 = "+num2);//num1 = 10, num2 = 20
//두 변수에 저장된 값을 바꾸어 저장
[num1, num2] = [num2, num1];
alert("num1 = "+num1+", num2 = "+num2);////num1 = 20, num2 = 10
*/
/*
function returnArray() {
return [10, 20, 30];//Array 객체 반환
}
//Array 객체를 반환받아 변수에 저장
//var array=returnArray();
//alert(array[0]+", "+array[1]+", "+array[2]);//10, 20, 30
//Array 객체를 반환받아 Array 객체의 요소값을 변수에 저장
//var [num1, num2, num3] = returnArray();
//alert(num1+", "+num2+", "+num3);//10, 20, 30
//Array 객체를 반환받아 Array 객체의 요소값 중 필요한 요소값만 변수에 저장 가능
//var [num1, , num2] = returnArray();
//alert(num1+", "+", "+num2);//10, 30
//... 연산자(전개 연산자)를 사용하여 할당된 나머지 요소값들을 Array 객체로 전달받아 저장
var [num1, ...num2] = returnArray();
alert("num1 = "+num1);//10
alert("num2 = "+num2);//20,30
*/
/*
//Object 객체를 생성하여 변수에 저장
var student={num:1000, name:"홍길동"};
//alert("학번 = "+student.num+", 이름 = "+student.name);
//Object 객체의 요소값을 구조 분해하여 개별적인 변수에 저장
// => 변수의 이름이 반드시 요소명과 동일하게 생성되도록 작성
//var [num, name] = student;
//alert("학번 = "+num+", 이름 = "+name);
//변수의 이름의 요소명이 다르게 설정된 경우 에러 발생
//var [number, name] = student;//에러 발생
//alert("학번 = "+number+", 이름 = "+name);
//변수의 이름를 요소명과 다르게 설정하여 사용 가능
var {num:number, name:irum} = student;
alert("학번 = "+number+", 이름 = "+irum);
*/
/*
var {num:number, name:irum} = {num:1000, name:"홍길동"};
alert("학번 = "+number+", 이름 = "+irum);
*/
var people=[{"name":"홍길동", "subject":"JAVA", "grade":"초급"}
,{"name":"임꺽정", "subject":"JSP", "grade":"중급"}
,{"name":"전우치", "subject":"SPRING", "grade":"고급"}];
/*
for(i=0;i<people.length;i++) {
// alert(people[i]);//[object Object]
alert("이름 = "+people[i].name+", 과목명 = "+people[i].subject+", 등급 = "+people[i].grade);
}
*/
/*
// for 구분에서 of 연산자를 사용하여 Array 객체의 요소값(Object 객체)를 하나씩 제공받아 반복 처리
for(object of people) {
alert("이름 = "+object.name+", 과목명 = "+object.subject+", 등급 = "+object.grade);
}
*/
/*
// Array 객체의 요소값(Object 객체)를 구조 분해하여 변수에 저장
// > Object 객체의 요소명과 변수명을 동일하게 작성
for([name, subject, grade] of people) {
alert("이름 = "+name+", 과목명 = "+subject+", 등급 = "+grade);
}
*/
/*
for({name:irum, subject:name, grade} of people) {
alert("이름 = " +irum+ ", 과목명 = " +name+ ", 등급 = " + grade);
}
*/
//매개변수로 Object 객체를 전달받아 요소값을 구조 분해하여 변수에 저장
function display({num, name}) {
alert("학번 = "+num+", 이름 = "+name);
}
//var student={"num":1000, "name":"홍길동"};
//display(student);
display({"num":1000, "name":"홍길동"});
</script>
</body>
</html>
25_Number
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<h1>Number 클래스 함수</h1>
<hr>
<p>숫자값이 저장된 객체를 생성하기 위한 클래스 함수 - Number 클래스 함수의 프로퍼티와 메소드 제공</p>
<script type="text/javascript">
/*
//매개변수에 전달된 숫자값이 저장된 Number 객체를 생성하여 변수에 저장
//var num=new Number(100);
var num=new Number("100");//매개변수에 문자값을 전달해도 숫자값으로 변환되어 저장
//alert("변수의 자료형 = "+typeof(num));//변수의 자료형 = object
//Number.toString() : Number 객체에 저장된 숫자값을 문자값으로 변환하여 반환하는 메소드
//alert("num.toString() = "+num.toString());//num.toString() = 100
//Number 객체가 저장된 변수를 출력하면 자동으로 toString() 메소드 호출
//alert("num = "+num);//num = 100
//Number.toString(radix) : Number 객체에 저장된 숫자값을 매개변수로 전달받은 진수 형태의
//문자값으로 변환하여 반환하는 메소드
//alert("16 진수 = "+num.toString(16));
//alert("8 진수 = "+num.toString(8));
//alert("2 진수 = "+num.toString(2));
//Number.valueOf() : Number 객체에 저장된 숫자값을 반환하는 메소드
var su=num.valueOf();
//alert("변수의 자료형 = "+typeof(su));//변수의 자료형 = number
//alert("su = "+su);//su = 100
//자바스크립트는 모든 값을 객체로 표현하여 처리
// => number 자료형의 변수에 저장된 숫자값은 내부적으로 Number 객체로 처리
// => number 자료형의 변수는 Number 클래스 함수의 프로퍼티와 메소드 사용 가능
//alert("su.toString(2) = "+su.toString(2));
*/
/*
//Number 객체에 요소(프로퍼티 또는 메소드) 추가 가능
var num=new Number(100);
//alert("num = "+num);//num = 100
num.display=function() {//Number 객체에 요소(메소드) 추가
alert("Number 객체에 display() 메소드 호출");
}
num.display();//메소드 호출 가능
*/
/*
//number 변수는 객체가 아니므로 요소(프로퍼티 또는 메소드) 추가 불가능
var num=100;
//alert("num = "+num);//num = 100
num.display=function() {//
alert("Number 객체에 display() 메소드 호출");
}
num.display();//에러 발생
*/
var num=12.3456789;
//alert("num = "+num);//num = 12.3456789
/*
//Number.toFixed(digits) : Number 객체에 저장된 숫자값에서 매개변수로 전달받은 소숫점
//자릿수(0~20)까지 잘라내어 문자값으로 변환하여 반환하는 메소드
// => 자릿수 뒤의 값을 이용하여 반올림 처리
//alert("num.toFixed(0) = "+num.toFixed(0));//num.toFixed(0) = 12
//alert("num.toFixed(1) = "+num.toFixed(1));//num.toFixed(1) = 12.3
alert("num.toFixed(2) = "+num.toFixed(2));//num.toFixed(2) = 12.35
*/
/*
var num="100";
//alert("변수의 자료형 = "+typeof(num));//변수의 자료형 = string
//alert("결과 = "+(num+200));//결과 = 100200 - 문자값 결합
//Number(string) : 매개변수로 전달받은 문자값을 숫자값을 변환하여 반환하는 함수
alert("결과 = "+(Number(num)+200));//결과 = 300
*/
alert("자바스크립트에서 표현 가능한 최대 숫자값 = "+Number.MAX_VALUE);
alert("자바스크립트에서 표현 가능한 최소 숫자값 = "+Number.MIN_VALUE);
</script>
</body>
</html>
