객체 : 변수와 메소드를 함께 가지고 있는것
💡 램에 로드
자바에서는 클래스마다 메소드 하나 생성!
자바는 클래스를 생성할 때 멤버변수는 Heap영역에 만들어지고 Method는 Method영역에 만들어짐힙에 만든 클래스 멤버변수와 Metod영역에 메소드가 힙영역 안에 있는 버추얼테이블에 링크로 연결되어있다
[1] 사용자 정의 객체
객체를 만드는 2가지 방법
1. 리터럴 객체 : 객체를 생성하면서 설계하는 방식
2. 생성자 함수를 이용한 객체생성 [ new 키워드로 객체생성 ]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS object</title>
<script>
//[1]자바에서 객체 2가지
//1. 내장 객체
//1.1) 이미 new 까지 되어 있는 것들 : document, window, navigation..
//1.2) 직접 new 해야 하는 것들 : Date(), String(), Number()...
//2. 사용자 정의 객체
//[2]객체를 만드는 2가지 방법
//1. 리터럴 객체 : 객체를 생성하면서 설계하는 방식
var person = {
//멤버변수 (속성 property)
name : "sam",
age : 20,
//멤버함수 - 메소드 method
show: function(){
//document.write(name +" , ");
//document.write(age +"<br>");
// this키워드가 없으면 멤버변수를 인식하지 못함. [전역변수로 인식해 버림]
document.write(this.name +" , " + this.age +"<br>");
}
};
//객체의 멤버변수(속성) 출력
document.write("name: " + person.name +" , ");
document.write("age: " + person.age +"<br>");
//객체 멤버함수(메소드) 호출
person.show();
// 새로운 리터럴 객체를 만들려면 다시 설계해야 함
var person2= {
name: "robin",
age: 25,
show: function(){
document.write("show : " + this.name +" , " + this.age+"<br>");
},
add: function(a,b){
var c= a+b;
document.write("add : " + c +"<br>");
}
};
person2.show();
person2.show(10); //파라미터 없는데 전달하면? 상관없음
person2.add(5, 3);
//person.add(10,20); //에러 : 없는 메소드는 호출 불가
//JS는 유연한 언어, 객체를 생성 후에
//객체의 멤버 추가할 수 있음
person.tel= "01012345678"; // 새로운 property 추가
document.write("name: " + person.name +" , ");
document.write("age: " + person.age +" , ");
document.write("tel: " + person.tel +"<br>");
person.show(); //멤버값 출력기능 호출
//tel까지 포함하여 출력해주는 기능메소드 새로이 추가
person.out= function(){
document.write("out: " + this.name+" , " + this.age +" , " + this.tel +"<br>");
}
person.out();
//혹시 대입한 적이 없는 멤버변수를 출력하면??
document.write(person.address); //속성은 추가한 것이고. 값은 undefined 인 것임.
document.write("<hr>");
// 리터럴 객체는 여러개의 속성, 메소드가 있을때..
// 객체를 생성할때 마다 관련 설계코드를 모두 다시 작성해야 함
// 객체가 많이 사용될때는 매우 짜증..
// 미리 객체의 설계도를 만들어 놓고..필요할때 마다 객체로 생성하여 사용하는 기법 등장
//2. 생성자 함수를 이용한 객체생성 [ new 키워드로 객체생성 ]
// 학생 객체 설계 : 이름, 나이, 전공
function Student(){
//멤버변수 - property
this.name= "aaa";
this.age= 23;
this.major= "android";
//멤버함수 - method
this.show= function(){
document.write("student show : " + this.name +" , " + this.age +" , " + this.major +"<br>");
}
this.setMember= function(name, age, major){
this.name= name;
this.age= age;
this.major= major;
}
}
//위 설계도(생성자함수)를 이용하여 객체 생성
var stu= new Student();
stu.show();
//또 다른 학생 객체가 필요할때..또 설계할 필요없이. new만
var stu2= new Student();
//두번째 학생의 멤버속성값 대입
stu2.name="bbb";
stu2.age= 25;
stu2.major= "ios";
stu2.show();
//위 방식으로 멤버값을 일일이 대입하려니..여러줄 코딩
//이거 짜증...
var stu3= new Student();
stu3.setMember("ccc", 26, "web"); //멤버값을 입력해주는 기능메소드가 있다면.
stu3.show();
//이런식이면 객체 생성 후에 항상 멤버값을 대입하는
//기능 메소드를 호출하는 코드가 추가로 요구됨
//그래서 객체를 생성하면서 멤버값들을 전달할 수 있다면..
//코드가 더 간결할 것 같음
//그래서 생성자 함수에 파라미터 전달
function Stu(name, age, major){
this.name = name;
this.age = age;
this.major = major;
this.show = function(){
document.write('major : ' + this.name + ', ' + this.age, ', ' + this.major+ '<br>');
}
//setter, getter method
this.setName= function(name){
this.name= name;
}
this.getName= function(){
return this.name;
}
}
var s= new Stu("kim", 20, "native app");
s.show();
var s2= new Stu(); //값을 전달 안하면? undefined
s2.show();
s2.setName("hong");
document.write("name: " + s2.getName() );
document.write("<hr>");
//337p 예제
function Car(model, speed, color){
this.model = model;
this.speed = speed;
this.color = color;
this.breake = function(){
this.speed -=10;
}
this.accel = function(){
this.speed +=10;
}
this.show = function(){
document.write('Car : ' + this.model + ', ' + this.speed, ', ' + this.color+ '<br>');
}
}
var myCar = new Car("aaa", 50, "blue");
myCar.show();
myCar.breake();
myCar.show();
myCar.accel();
myCar.show();
document.write("<hr>");
// 추가적인 내용들 /////
//1) in 키워드 : 연산자
document.write( 'name' in stu ); //name속성이 있으면 true
document.write("<br>");
document.write( 'addr' in stu ); //addr속성이 없기에 false
document.write("<br><br>");
//2) 객체 안에 객체가 멤버로 존재할 수 있음
var flight = {
airline : "korean air",
number : 777,
arrival : {
nation : 'USA',
city : 'LA'
}
}
document.write(flight.arrival.city+"<br>");
document.write(flight['airline']+"<br>");//연관배열로 멤버접근 가능
document.write("<br>");
//3) Object.create() 메소드 .. 객체 clone기능
//리터럴 객체의 단점. 같은 구성의 객체를 또 생성할때 코드를 모두 다시 작성
var p1= {
name:"aaa",
age:20,
show:function(){
document.write("show: " + this.name+","+this.age+"<br>");
}
}
var p2= Object.create(p1); //p1객체를 복제한 새로운 객체 리턴
p1.show();
p2.name="bbb";
p2.age= 25;
p2.show();
</script>
</head>
<body>
</body>
</html>
[2] prototype
객체마다 갖게 되는 메소드를 공유하도록 하는 것
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Prototype</title>
<script>
//리터럴객체든, 생성자함수를 이용한 객체든 모두
//멤버메소드가 객체마다 존재함. 이거 낭비
// 같은 객체자료형 마다 메소드가 하나만 존재하도록 하는 기법
function Person(name, age){
this.name= name;
this.age= age;
}
//Person 자료형(생성자함수)에 하나만 존재하는 메소드 추가
Person.prototype.show= function(){
document.write("person : " + this.name+","+this.age+"<br>");
}
var p1= new Person("sam", 20);
var p2= new Person("robin", 25);
p1.show(); //마치 객체가 가진 메소드인양...
p2.show();
</script>
</head>
<body>
</body>
</html>
[3] 내장객체(중 직접 new 해야 하는 것들)
- 내장 객체
1.1) 이미 new 까지 되어 있는 것들 : document, window, navigation..
1.2) 직접 new 해야 하는 것들 : Date(), String(), Number()...
1. Date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Date 내장객체</title>
<script>
//JS에서 미리 설계해 놓은 내장객체들(생성자 함수들- 자바의 class들)
// Date, Number, String, Math, Array ..
//1. Date
var a= new Date(); //날짜 관리 객체 생성
document.write(a +"<br>"); //참조변수를 출력하면 자동 .toString()발동
document.write(a.toString() +"<br>");
document.write(typeof(a) +"<br>");
// Date 생성자함수의 주요기능 메소드들....
document.write(a.toDateString() +"<br>");
document.write(a.toLocaleString() +"<br>");
document.write(a.getYear() +"<br>"); //1900년부터 기준..
document.write(a.getFullYear() +"<br>");
document.write(a.getMonth() +"<br>"); // 월은 0~11 로 나옴 (내가 원하는 월 얻고 싶으면 +1 필수!)
document.write(a.getDate() +"<br>");
document.write(a.getHours() +"<br>"); // 0~23
document.write(a.getMinutes() +"<br>");
document.write(a.getSeconds() +"<br>");
document.write(a.getTime() +"<br>"); //currentTimeMillis() 1970/1/1 09:00:00 부터 ms마다 카운트
//set도 가능
var b= new Date(); //현재시간
document.write(b.toLocaleString() +"<br>");
b.setFullYear(2018);
document.write(b.toLocaleString() +"<br>");
//생성자의 파라미터를 통해 특정 날짜 설정.
var c= new Date(2025, 4, 9); //2025년 5월 9일
document.write(c.toLocaleString() +"<br>");
var c= new Date("Wed Sep 13 2017 13:40:13 GMT+0900");
document.write(c.toLocaleString() +"<br>");
var c= new Date("Wed Sep 13 2017");
document.write(c.toLocaleString() +"<br>");
var c= new Date("2017. 9. 13");
document.write(c.toLocaleString() +"<br>");
var c= new Date(456813245);
document.write(c.toLocaleString() +"<br>");
var c= new Date(0); //기준시
document.write(c.toLocaleString() +"<br>");
//두 날짜 사이의 비교
var a = new Date("2017.9.12");
var b = new Date();
var diff= b.getTime() - a.getTime(); //밀리초 차이
var diff = b-a; //자동 getTime()으로 계산함
document.write("두 날짜 차이 : " + diff +"<br>");
//ms를 일수로 변환
var sec = diff/1000;
var min = sec/60;
var hour = min/60;
var day = hour/24;
document.write("두 날짜 차이 day1 : " + day +"<br>");
var day = diff/(1000*60*60*24);
document.write("두 날짜 차이 day2 : " + day +"<br>");
day = Math.floor(day); //반올림 없이 소수점 날려버림
document.write("두 날짜 차이 day3 : " + day +"일 <br>");
</script>
</head>
<body>
</body>
</html>
2.Number
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Number</title>
<script>
//2. Number - 마치 안드로이드의 Wrapper 클래스 같은 역할
//수치형과 Number는 다른 자료형
var a= 10; //수치형
var b= new Number(10); //object 형
document.write(typeof(a) +"<br>");
document.write(typeof(b) +"<br>");
document.write( (a==b) +"<br>" );
document.write( (a===b) +"<br>" );//자료형이 다르므로 false
//Number 객체의 유용한 기능들... 메소드
var num = new Number(123.456);
//1) 지수표현식
document.write(num.toExponential() + "<br>");
//2) 소수점 자르기 [부동 소수점 -> 고정 소수점 표현식]
document.write( num.toFixed() + "<br>" )
document.write( num.toFixed(2) + "<br>" ) //소수점 2자리 반올림
//3) 진법 변환 표기( string으로... 변환 )
var num= new Number(10);
document.write( num.toString() +"<br>"); // 10진법
document.write( num.toString(16) +"<br>"); // 16진법
document.write( num.toString(8) +"<br>"); // 8진법
document.write( num.toString(2) +"<br>"); // 2진법
// 수치형은 Number객체로 자동 Wrapping 됨
var a= 255;
document.write( a.toString(16) +"<br>" );
// 변수에 넣지 않고도 수치형 값을 곧바로 Number로 사용할때는 소수점이 필수
// 상수엔 메소드 사용 못함
document.write( 10.54321.toFixed(2) +"<br>" );
//document.write( 10.toString(2) +"<br>" ); //error
document.write( 10.0.toString(2) +"<br>" );
</script>
</head>
<body>
</body>
</html>
3. String
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS String object</title>
</head>
<body>
<script>
//3. String - 문자형의 wrapper
var a= "Hello";
var b= new String("Hello");
document.write(typeof(a)+"<br>");
document.write(typeof(b)+"<br>");
document.write( (a==b) +"<br>" ); //true
document.write( (a===b) +"<br>" ); //false
//String 내장객체의 주요 기능 메소드들..
var s= "Hello world"; //자동 wrapping
document.write( s.length +"<br>"); //property :글자수
document.write( s.toUpperCase() +"<br>" );
document.write( s.toLowerCase() +"<br>" );
document.write( s +"<br>" ); //원본은 불변!!!!!!!!!!!
document.write( s.concat("Nice") +"<br>" );
document.write( s.indexOf("w") +"<br>" );
document.write( s.indexOf("wor") +"<br>" );
document.write( s.indexOf("word") +"<br>" ); //못찾으면 -1 리턴
//문자열 중에서 원하는 문자 탐색.. match
var str="Hello world! Nice to meet you. 안녕하세요. 반갑습니다. Nice work! nice study.";
var search= str.match("Hello");
document.write("탐색 결과 : " + search+"<br>");
var search= str.match("hello"); //대소문자 구별 없으면 ... null 리턴
document.write("탐색 결과 : " + search+"<br>");
// /hello/ 이 표기법 = 정규 표현식
var search= str.match(/hello/i); //대소문자 구별 없이 탐색하는 옵션 지정 : i(=insencetive)
document.write("탐색 결과 : " + search+"<br>");
//탐색결과가 여러개 일때..
var search= str.match(/Nice/); //같은 단어가 더 있어도 1개만 찾아서 리턴함
document.write("탐색 결과 : " + search+"<br>");
var search= str.match(/Nice/g); //여러개를 찾고 싶으면 옵션 g .. 여러개 이므로 결과를 배열로 리턴함
document.write("탐색 결과 : " + search+"<br>");
//대소 문자 구별없이 원하는 값 찾아오기
var search= str.match(/Nice/ig); //대소문자 구분없이 여러개 찾고 싶다면. 옵션모두 사용
document.write("탐색 결과 : " + search+"<br>");
//한글도 됨
var search= str.match(/안녕/);
document.write("탐색 결과 : " + search+"<br>");
//replace : 문자 바꿔치기
var s= "Hello world";
document.write( s.replace("world","android") +"<br>");
document.write( s.replace("worlD","android") +"<br>"); //대소 구별해서 안바뀜
//대소문자 구별없이 바꿔치기
document.write( s.replace(/worlD/i,"android") +"<br>");
//바꿔야할 문자열이 여러개라면
var ss = "Hello world, nice world, good world, bad world";
var result = ss.replace("world", "android"); //자바 or 코틀린이었으면 전부 바뀌었을 텐데 JS에선 하나만 바뀜
document.write(result +"<br>");
var result = ss.replace(/world/ig, "android"); //정부 바꾸고 싶으면 옵션 사용
document.write(result +"<br>");
//이를 이용하여 특정 문자열 중에서 비속어를 xxx로 변경처리 자동완성
s = s.replace("욕", "xxx");
// 문자열을 특정 키워드로 분리하여 문자열 배열로
var s= "010-1234-5678";
var arr= s.split("-");
document.write(arr.length +"<br>");
document.write(arr[0]+"<br>")
document.write(arr[1]+"<br>")
document.write(arr[2]+"<br>")
//문자령을 HTML요소로 자동 감싸주는 기능
var s= "Hello test";
document.write(s +"<br>");
document.write("<b>"+s+"</b>"+"<br>");
document.write(s.bold() +"<br>");
document.write(s.italics() +"<br>");
document.write(s.fontcolor('green') +"<br>");
document.write(s.link("https://www.naver.com") +"<br>");
</script>
</body>
</html>
4. Math
<!DOCTYPE html>
<html>
<head>
<title>JS Math object</title>
</head>
<body>
<script>
//4. Math
// 별도의 new 없이 클래스명으로 그냥 메소드 사용
var n= 3.64;
//플로어 - 소수점 제거
document.write( Math.floor(n) +"<br>" );
//반올림
document.write( Math.round(n) +"<br>" );
//천장 - 소수점이 있으면 무조건 올림
document.write( Math.ceil(n) +"<br>" );
//랜덤값
var r= Math.random(); // 0.0~1.0
document.write(r +"<br>");
//0~9 사이 얻고싶으면
var r= Math.floor(Math.random()*10);
document.write(r +"<br>");
// 5~15
//1. Math.floor()
var r= Math.floor(Math.random()*11)+5;
document.write(r +"<br>");
//2. toFixed()
var r= (Math.random()*11 + 5).toFixed();
document.write(r +"<br>");
document.write(typeof(r) +"<br>"); //타입찍으면 string
</script>
</body>
</html>
5. Array
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Array object</title>
</head>
<body>
<script>
//5. Array
//이미 배열수업에 기본 사용법 소개..
var arr= new Array(10,20,30);
//배열의 주요 기능 메소드들..
//1) 배열붙이기..concat
var arr1= [3,4,5];
var arr2= arr.concat(arr1); //원본은 안바뀜
document.write( arr2 +"<br>" );
document.write( arr1 +"<br>" );
document.write( arr +"<br>" );
//2) 특정 요소값 위치 찾기 - indexOf
document.write( arr.indexOf() +"<br>" ); // 없으면 -1
document.write( arr.indexOf(30) +"<br>" );
//검색 위치 저장
document.write( arr.indexOf(10, 1) +"<br>" ); //배열의 1번방부터 검색 시작
//3) push, pop [stack - FILO]
var stack = [1,2,3,4,5];
document.write(stack +"<br>");
stack.push(100); //마지막에 추가
document.write(stack +"<br>");
stack.pop(); //마지막 요소 빼옴 (배열 길이 바뀜)
stack.pop();
document.write(stack +"<br>");
//4) push, shift [queue - FIFO]
var que= [1,2,3,4,5];
que.push(10); //새로운 데이터를 마지막에 삽입
document.write(que +"<br>");
que.shift(); // 가장 처음에 저장된 요소값이 꺼내짐
document.write(que +"<br>");
//5) sort -- 정렬. 실제 요소들의 위치가 변경됨
var arr= [3,5,4,8,9,1,6,7];
arr.sort(); //실제 원본 위치 변경됨
document.write(arr +"<br>");
// 두자리 수 일때 문제 발생..why? 데이터를 알파벳순으로..오름차순 정렬..
arr= [3,1,15,48,754,1234,54,90];
arr.sort();
document.write(arr +"<br>");
//해결하려면.. sort()의 파라미터에 '정렬기준함수'를 넣어줌.
arr.sort( function(a,b){ return a-b; } ); //오름차순
//내부적으로 연산하며 비교, -가 나오면 그냥 두고 양수가 나오면 뒤집음 - 버블 소트!!!!
document.write(arr +"<br>");
arr.sort( function(a,b){ return b-a; } ); //내림차순
document.write(arr +"<br>");
//알파벳은 기본 오름차순
var arr= ["abc","aab","bsc","adsf","asdf"];
arr.sort();
document.write(arr +"<br>");
//알파벳의 내림차순 정렬 '정렬지정함수'
var desc= function(a,b){
if(a>b) return -1;
if(b>a) return 1;
return 0;
}
arr.sort( desc );
document.write( arr +"<br>");
//6) slice - 배열의 일부분을 잘라서 새로운 배열 리턴
var arr= [10,20,30,40,50,60,70,80,90];
var arr2=arr.slice(3); //3번 방부터 잘라서 새로운 배열 리턴
document.write(arr +"<br>");
document.write(arr2 +"<br>");
var arr2=arr.slice(3,6); //3번~6번방 전까지 잘라서 새로운 배열 리턴
document.write(arr +"<br>");
document.write(arr2 +"<br>");
//7) join - 배열의 요소를 특정문자를 구분자로 하여 하나의 문자열로 리턴
var arr= ["010", "1234", "5678"];
var s= arr.join("-");
document.write(s +"<br>");
//8) filter - 지정함수 필요 [sort와 같음]
//요소의 개수만큼 호출됨
//조건이 true인것만 새로운 배열로 만들어 리턴해줌
var arr=[1,2,3,4,5,2,7,1,-5,-7,3.14];
//배열 요소들 중에서 3보다 큰 값들만..
var arr2= arr.filter( function(e){
return e>3; //이 결과가 true인 e를 새로운 배열에 추가하여 최종 filter()의 리턴으로 배열을 내보냄
});
document.write("원본 : "+arr +"<br>");
document.write("필터 : "+arr2 +"<br>");
//요소의 값이 3보다 크고 인덱스 번호가 5이상인 요소 찾기
// filter 매개변수 값은 3개 받음 e, index, array
var arr3= arr.filter( function(e,index,array){
return e>3 && index>=5;
});
document.write(arr3 +"<br>");
//9) revers - 배열의 요소순서를 뒤집기 -원본 요소위치 변경
var arr= ["aa","bb","cc"];
arr.reverse();
document.write(arr +"<br>");
//////////////////////////////////////////////////
// ECMAscript5에서 새로이 추가된 배열 기능메소드 ////
document.write("<hr>");
var aa= [10,20,30,40,50];
//배열의 요소값에 각각 '접근'하는 반복문 기능메소드 - 출력용
aa.forEach(function(value, index, array){ //값, 인덱스번호, 배열 자체
document.write( index+" : " + value +"<br>");
});
document.write("<hr>");
// forEach()와 구조적으로 똑같지만..
// 배열의 각 요소에 작업후 새로운 배열을 만들어
// 리턴해 주는 메소드
var bb= aa.map( function(value, index, array){
return value +1;
});
document.write(bb+"<br>");
</script>
</body>
</html>
[4] 예외처리
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Exception</title>
<script>
// 예외처리. - 에러가 발생할때 프로그램이 멈추지 않도록 하는 문법
//alet('aaa'); //여기서 에러 발생 - 코드가 여기서 멈춤, 다음줄이 진행하지않는다
try{
alet('aaa');
}catch(e){
document.write(e +"<br>");
}
document.write("예외처리 연습...<br>");
function aaa(){
document.write("aaa...<br>");
}
// finally
try{
aaa();
}catch(e){
document.write("예외발생시에 실행되는 영역<br>");
}finally{
document.write("예외와 상관없이 무조건 실행되는 영역<br>");
}
//throw - 일부러 예외를 발생시키는 문법
try{
var a=10;
var b=15;
var c= a-b;
if(c < 0) throw "음수 결과는 나오면 안됨" //예외 상황으로 만들고 싶을 때 throw
document.write("결과 : " + c +"<br>");
}catch(e){
document.write("에러.." + e);
}
</script>
</head>
<body>
</body>
</html>
보조기억장치