카테고리 없음

[JS] 자바스크립트 객체, 이벤트, 내장객체

좨랭이 2022. 4. 30. 18:08

객체

- 객체기반언어(객체지향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.메서드()
<속성>

자연로그 밑에 사용되는 오일러 상수
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