[JS] 자바스크립트 객체, 이벤트, 내장객체
객체
- 객체기반언어(객체지향X)-> 자바스크립트의 작업대상(가장ㅇ기본적인 자료형 )
- 실세계의 사물을 모델링(변수(속성: 객체의 특성/상태를 표현하기 위한 데이터)와 함수(메소드:객체와 관련된 작업을 처리, 데이터를 동작하는 규칙이나 방법)로 구성)
EX) 휴대폰 ->객체
모델명, 색상, 화면크기 -> 속성
전화걸기 , 문자보내기 -> 메서드
사용자 정의 객체 : 객체 정의 -> 일반함수와 동일한 형식의 생성자 함수이용
function 객체명 (매개변수1, 매개변수2) {
this.속성1 = 매개변수 1;
}
객체 선언 -> 객체 변수 생성
객체변수 = new객체명([매개변수리스트])
속성 및 메서드 참조
객체변수.속성
객체변수.메서드([매개변수리스트])
EX) 객체의 정의와 사용
<script>
function Student(name, dept, grade) { // 사용자 정의 객체
this.name = name; // 속성
this.dept = dept;
this.grade = grade;
this.print = function() { // 메소드
document.write(this.name+"은" +this.dept +"과" + this.grade+"학년 학생입니다.<br/>");
}
}
s1 = new Student("홍길동", "컴퓨터과학", 3); // 객체 생성
cDate = new Date(); // 내장 객체의 사용
document.write("["+(cDate.getMonth()+1)+"월"
+cDate.getDate()+"일 현재]");
s1.print(); // 메서드 호출
</script>
결과
[2월10일 현재]
홍길동은 컴퓨터과학과 3학년 학생입니다.
EX) 기존 객체에 속성/메서드 추가
생성자 함수 변경 없이 값을 대입하는 문장을 직접 사용
<script>
function Student(name, dept, grade) { ... } // 객체 정의
s1 = new Student("홍길동", "컴퓨터과학", 3); // 객체 생성
s1.region = "서울";
s1.subject = function() {
document.write("학생이름 : " + this.name);
document.write("소속지역대학 : " + this.region);
document.write("수강과목 : 컴퓨터과학개론, 알고리즘");
}
s1.subject();
</script>
결과
학생이름 : 홍길동
소속지역대학 : 서울
수강과목 : 컴퓨터과학개론, 알고리즘
속성 및 메서드의 공유
-> prototype 객체사용
EX) 메모리의 낭비 (100개의 객체가 print를 각자 다 가지고 있음)
<script>
function Student(name, dept, grade) { // 사용자 정의 객체
this.name = name; // 속성
this.dept = dept;
this.grade = grade;
this.print = function() { // 메소드
document.write(this.name+"은" +this.dept +"과" + this.grade+"학년 학생입니다.<br/>");
}
}
// 객체 생성 (예: 100개 생성)
s1 = new Student("홍길동", "컴퓨터과학", 3);
...
s100 = new Strudent( ... );
EX) prodotype
function Student(name, dept, grade) { // 사용자 정의 객체
this.name = name; // 속성
this.dept = dept;
this.grade = grade; }
Student.prototype.print = function() {
document.write(this.name+"은" +this.dept +"과" + this.grade+"학년 학생입니다.<br/>");
이벤트
- 어떤 특정한 사건이나 동작 (마우스클릭, 키보드작성)
"마우스 버튼을 클릭하면 웹페이지의 배경색이 변경"
"이벤트" "이벤트 핸들러"
사건/동작--------------------------> 처리 내용
특정 이벤트에 대응하는 원하는 처리 내용을 이벤트 핸들러로 작성하고 등록 -> 해당 이벤트가 발생하면 자동으로 등록된 이벤트 핸들러 수행
<시작태그 속성="값" ... on이벤트명="이벤트핸들링 코드">
<head>
<script>
funtion changeColor() {
document.body.style.backgroundColor = document.myform.color.value;
}
funtion restorebgColor() {
document.body.style.backgroundColor = "white";
}
</script>
<body onLoad="alert('Load 이벤트가 발생했습니다.')">
<form name="myform">
<input type="color" name="color">
<input type="button" value="색상변경" onClick="changeColor()"> // 버튼을 누르면 changeColor함수를 호출한다
<input type="button" value="원래대로" onClick="restorebgColor()">
</body>
** 주요 이벤트
윈도우 | load | 브라우저에서 웹 문서를 모두 읽어 왔을 때 발생 |
unload | 브라우저의 웹 문서를 닫을 때 발생 | |
포커스 | focus | 윈도우, 폼, 구성요소가 포커스를 받을 때 발생 |
blur | 포커스를 잃을 때 발생 | |
폼 | change | 입력양식의 값을 변경되었을 때 발생 |
reset | 입력양식을 초기화시켰을 때 발생 | |
select | 입력양식의 내용 중 특정 내용을 선택하였을 때 발생 | |
키보드 | keydown | 키보드의 키를 누르는 순간 발생 |
keyup | 키보드의 키를 누른 후 놓았을 때 | |
keypress | 키보드의 키를 눌렀다 놓는 순간 | |
마우스 | click | 마우스를 클릭하는 순간 |
dblclick | 마우스를 더블클릭하는 순간 | |
mousedown | 마우스 버튼을 누르는 순간 | |
mouseup | 마우스 버튼을 클릭했다 놓는 순간 | |
mousemove | 마우스가 움직일 때마다 발생 | |
mouseover | 마우스 커서를 링크 위에 올려놓을 때 발생 |
내장객체
- 이미 만들어져있는 객체
- String, Array, Date, Mate, screen
**String, Math, screen은 new라는 연산자를 사용하지 않고 사용
String
- 문자의 모양을 지정하거나 문자열을 다루기 위한 객체
- new 연산자를 사용X
- 문자열을 그냥 변수에 할당
- 속성 : length -> 문자열의 길이 반화
ex) "자바스크립트".length => 6 "JavaScript".length => 10
- 메서드 : 글꼴 관련 메서드, 위치 이동 관련 메서드, 문자열 처리 관련 메서드
ex) 글꼴 관련 메서드
str = "자바스크립트(JavaScript)"
str.big() | 글자 크기를 현재 글자보다 한 단계 크게 지정 |
str.small() | 글자 크기를 현재 글자보다 한 단계 작게 지정 |
str.bold() | 글자를 굵게 지정 |
str.italics() | 글자를 기울게 |
str.strike() | 글자 가운데 통과하는 선을 그음 |
str.sub() | 글자를 아래첨자 형태로 출력 |
str.sup() | 글자를 위첨자 형태로 출력 |
str.fontcolor("blue") | 글자 생상 지정 |
str.fontsize(6) | 글자 크기 지정 |
ex) 위치 이동 관련 메서드
문자열.link("URL")
<a href="URL"> => "방송대".link("http://www.knou.ac.kr")
<a href="#이름"> => "위치이동메서드".link("pos_method")
문자열.anchor("이름")
<a id="이름"> => "메서드 설명".anchor("pos_method")
ex) 문자열 처리 관련 메서드
J/a/v/a/S/c/r/i/p/t/ /P/r/o/g/r/a/m/m/i/n/g
0/1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/21
메서드 | 결과값 | 의미 |
str.toLowerCase() | 소문자로 변환 | |
str.toUpperCase() | 대문자로 변환 | |
str.substring(4, 18) | Script Program | Script Program n1부터 n2이전까지의 문자열 반환 |
str.slice(4,18) | Script Program | Script Program n1부터 n2 이전까지의 문자열 반환 |
str.substr(4,18) | Script Programming | Script Programming n1부터 n2개의 갯수만큼 문자열 반환 |
str.charAt(4) | S | S 인덱스 n에 대응되는 문자 반환 |
str.indexOf("p") | 8 | 왼쪽에서부터 지정된 문자열의 위치 반환 |
str.lastIndexOf("a") | 16 | 오른쪽에서부터 지정된 문자열의 위치 반환 |
str.concat(" !!!") | JavaScript Programming !!! | 두 문자열을 하나의 문자열로 연결 |
str.replace('JavaScript', 'JS') | JS Programming | 문자열1을 문자열2로 대체 |
str.split(" ", 2) | JavaScript,Programming | 분리자를 기준으로 개수만큼 문자열로 분리 |
str.charCodeAt(4) | 83 | 인덱스 n에 대응되는 문자의 유니코드 번호를 반환 |
str.fromCharCode(83) | S | 유니코드 번호를 문자열로 반환 |
Array
- 배열을 사용하기 위한 객체
배열을 선언하는 방식
1 배열객체변수명 = new Array();
arr = new Array(); => arr[9] ="JS";
0/1/2/3/4/5/6/7/8/9
JS
2 배열객체변수명 = new Array(배열크기)
arr = new Array(3); => arr[0] = 10; arr[1]="JacaScript"; arr[2]="Programming";
3 배열의 선언과 동시에 값을 할당
배열객체변수명 = new Array(배열요소1, ..., 배열요소n)
arr = new Array(10, "JavaScript", "Programming");
// 일반적인 배열과 자바스크립트의 배열의 차이
** 일반적인 배열은 배열의 값의 자료형이 일치
자바스크립트는 배열의 자료형을 혼합하여 저장이 가능
<script>
arr = new Array(3);
arr[0] = 10;
arr[1] = "JavaScript";
arr[2] = "Programming";
document.write("배열의 길이는 " + arr.length + "이고, <br/>");
document.write("배열의 요소는 <br/>");
for(i=0; i<arr.length; i++)
document.write(arr[i] + "이다.");
</script>
LandAnimal = new Array("호랑이", "사자", "표범"); SeaAnimal = new Array("참치", "고래");
LandAnimal.join() => 호랑이,사자,표범 배열의 값들을 결합해서 하나의 문자열을 만듦
LandAnimal.indexOf("사자") => 1 값을 가진 요소의 인덱스를 반환
LandAnimal.push("치타")
LandAnimal.join("->") => 호랑이 -> 사자 -> 표범 -> 치타 스택에 데이터를 삽입
LandAnimal.shift()
LandAnimal.join("->") => 사자 -> 표범 -> 치타 배열의 첫번째 요소를 반환/ 제거
LandAnimal.reverse() 배열 요소들의 순서를 역순으로 만듦
animal = LandAnimal.concat(SeaAnimal) 두 개의 배열을 하나의 배열로 만듦
animal.join("->") => 치타 -> 표범 -> 사자 -> 참치 -> 고래
animal.sort() 배열을 정렬
animal.pop() 스택에서 데이터를 삭제
animal.join("->") =>고래- > 사자 -> 참치 -> 치타
substr = animal.slice(1,3) 시작인덱스~ 종료인덱스-1 까지를 추출하여 새러운 배열을 만듦
substr.join("->") => 사자->참치
date
- 사용자 시스템의 날짜와 시간을 관리해 주는 객체
객체변수명 = new Date()
date = new Date(); => date 현재 날짜와 시간
객체변수명 = new Date(년,월,일,[,시[,분[,초[,밀리초]]]])
date = new Date();
date.getFullYear() => 연도 반환
date.getMonth() => 월 반환 0: 1월
date.getDAte() => 일 반환
date.getDay() => 요일 반환 0:일, 1:월, 2:화
date.getHours() => 시 반환
date.getMinutes() => 분 반환
date.getSeconds() => 초 반환
date.getMilliseconds() => 밀리초 반환
date.getTime => 70-1-1 00:00:00부터 현재까지 경과한 시간을 1/1000초 단위로 반환
**** 날짜와 시간을 지정하는 메서드 (set)
setFullYear(), setMonth(), .....
ex) 현재 날짜/시간 : 2020년 2월 11일 화요일 오후 9시 34분 41초 출력
<script>
date = new Date();
document.write("<p>현재 날짜/시간 : ")
document.write(date.getFullYear()+"년");
document.write((date.getMonth()+1)+"월");
document.write(date.getDate()+"일");
switch(date.getDay()) {
case 0 : document.write("일요일"); break;
case 1 : document.write("월요일"); break;
case 2 : document.write("화요일"); break;
case 3 : document.write("수요일"); break;
case 4 : document.write("목요일"); break;
case 5 : document.write("금요일"); break;
case 6 : document.write("토요일"); break;
}
if(date.getHours() >= 12) {
document.write("오후");
hr = date.getHours()-12;
if(hr==0) hr=qw;
document.write(hr + "시");
} else {
document.write("오전");
document.write(date.getHours() + "시");
}
document
</script>
Math
- 수학 계산과 관련된 객체
new 연산자 없이 바로 사용 -> Math.속성, Math.메서드()
<속성>
E | 자연로그 밑에 사용되는 오일러 상수 |
LN10 | 10의 자연로그 |
LN2 | 2의 자연로그 |
PI | 원주율 |
등등 | ... |
<메서드>
abs(n) | n의 절대값 |
max(n, m) | 둘 중 큰 수 |
min(n, m) | 둘 중 작은 수 |
ceil(n) | n의 소수부분을 올림한 값 |
floor(n) | n의 소수부분을 버림한 값 |
random() | 0<= 난수 < 1 |
round(n) | n을 반올림한 값 |
pow(n,m) | n의 m승 |
등등 |
screen
- 화면(모니터)의 정보를 나타내는 객체
new 연산자 없이 바로 사용 -> screen.속성
속성
availHeight | 브라우저화면에서 툴바, 메뉴바 등을 제외한 실질적인 화면의 높이 |
availWidth | 브라우저화면에서 툴바, 메뉴바 등을 제외한 실질적인 화면의 너비 |
height | 디스플레이 화면의 높이 |
width | 디스플레이 화면의 너비 |
colorDepth | 사용 가능한 색상 수 |
** 정리
1 객체 = 속성 + 메서드
- 속성 : 변수, 객체의 특성을 표현하기 위한 데이터
- 메서드 : 함수, 데이터를 동작하는 규칙이나 방법
객체 정의(생성자 함수), 객체 생성 및 참조
2 이벤트
- 어떤 특정한 사건이나 동작
- <태그 ... on이벤트명 = "이벤트 핸들링 코드">
- load, unload, focus, blur, click, dblclick, ...
3 내장객체
String, Array, Date, Math, screen