클래스
객체 생성 방법
객체명 = {키:값, ...}
obj = new Object();
obj.title = "노인과 바다";
obj.author = "헤밍웨이";
obj.setValue = function(t,a){
this.title = t;
this.title = a;
}--> obj 라는 보따리에 title, author, setValue 라는 변수가 만들어짐
객체명 = function(파라미터){
this.변수 = 파라미터;
...
} 객체명.prototype.함수명 = function(파라미터){
this.변수 = 파라미터;
...
}표준 내장 객체
-
Array
- length
- concat(), join(), reverse(), sort(), slice(), ...
-
Date
- getFullYear(), getMonth(), get Date(), get Day(), getHour(), ...
-
Math
- pow(), cell(), round(), floor(), random(), abs(), ...
-
String
- toLowerCase(), toUpperCase(), charAt(), indecOf(), substr(), ...
-
Window (브라우저 내장 객체)
- location
- href, reload
- history
- back()
- navigator
- document
- link
- anchor
- images
- layer
- form
- text- textarea
- password
- radio
- checkbox
- button
- select
- reset
- submit
- location
이벤트
3가지 구성요소
-
이벤트 소스 : HTML 요소 (주로 input)
-
이벤트 클래스 : 사건 유형별로 이미 준비완료
- onclick, onblur, onfocus, onmouseout, onselect, onsubmit, onreset, onload, ondbclick, ondragdrop, onkeydown, onkeyup, onkeypress, onmove, onresize
-
이벤트 핸들러 : 함수
이벤트 등록 및 해제
- addEventListener(이벤트 클래스, 이벤트 핸들러, 캡처 타입)
- removeEventListener(이벤트 클래스, 이벤트 핸들러, 캡처 타입)
***
태그안을 건드리지 말기 !
원래 <body> 이렇게 지정하던걸 자바스크립트의 <script> 태그 안에서 다음과 같이 지정
window.onload = function(){
fnload();
}
<button onclick="">버튼</button>이벤트 정보 확인
--> 매개변수를 통해서 확인
기본 동작 방지
--> preventDefault()
버블링과 캡처링
--> 이벤트 전파 (Propagation) 방식
- 캡처링 : addEventListener의 세번째 인자인 capture 단계를 false로 지정하여 방지
- 버블링 :stopPropagation() 를 호출하여 방지
이벤트 옵션
- addEventListener(이벤트 클래스, 이벤트 핸들러, 옵션)
- once : 핸들러를 한번만 실행하게 해주는 옵션
- passive : 기본 동작과 핸들러의 실행을 분리 시켜주는 옵션
--> 이벤트가 발생했을 때 호출할 함수
parent.addEventListener("mousedown", ev=>{
log("Parent~");
ev.stopPropagation();
}, {once:true});이벤트 위임 (Delegate)
마우스와 포인터 이벤트
- click, dbclick, mousedown, mouseup, mouseleave, mousemove, contextmenu, wheel
키보드 이벤트
- keydown, keyup, focus, blur, input, change, submit, reset
- keydown : 사용자가 키를 누르는 순간에 발생
- keyup : 사용자가 키를 놓는 순간에 발생
ex)
enter 키를 눌렀을때 입력한 텍스트 값을 출력
input1.addEventListener("keyup", ev => {
if (ev.key === 'Enter'){
console.log(ev.target.value);
}
});--> ev.target.value 는 이벤트를 발생시킨 요소의 값이고 이를 input1.value ( 직접적으로 코드에서 지정한 특정 요소의 값) 으로 수정 가능 !
디스패치 이벤트
--> 강제로 이벤트를 발생시킬 때 사용
