JavaScript
예제
- 생성한 객체에 cals 함수안에서 태그 안의 f1 폼에 있는 값을 속성 num1, num2에 넣었다.
여기서 this는 객체안의 속성 num1, num2를 가르킨다. - <\input type=”button”>의 id를 받아 plus / minus 를 판단한다.
여기서 this는 객체안의 속성값인 아닌 객체밖의 window를 가르킨다. - sum을 계산하여 출력한다.
배열
배열생성
new 연산자로 배열생성
new연산자 및 배열값으로 배열생성
배열문자열 변환
join(“-”) : -값으로 배열 나열 시, 분류
concat()
slice()
slice(a, b); : arr[a] ≤ arr[] < arr[b]splice()
splice(a, b); : a=index , b=갯수
배열정렬 : sort();
내림차순
String 객체
- 문자열을 사용하거나 조작을 지원하느 객체
- new 연산자를 사용하지 않음
예제
Date 객체
날짜와 시간을 처리할 수 있도록 지원하는 객체
Date(); : 현재 시간을 불러온다.
변수를 생성하여 다중실행 되는것을 방지
정규표현식 객체
문자열.match(/정규표현식/) → 매칭된 결과(문자열)
i : 대소문자 구분X
g: 전역검사
문자열 변환(replace)
이벤트
이벤트 관련용어 정리
- 이벤트 연결 = 윈도우 객체에 onload 속성에 함수 자료형을 할당
window.onload = function(){} - load : 이벤트이름 , 이벤트타입
- onload : 이벤트 속성
- 이벤트 속성에 할당한 함수 : 리스너(Event Listener or Event handler)
고전이벤트모델
- 하나의 이벤트에 하나의 리스너만 연결 가능
인라인 이벤트
- 인라인 태그에 이벤트 속성을 부여한다.
Default 이벤트 제거
- html태그는 이미 이벤트 리스너가 있다. 대표적으로
- default 이벤트제거 방법은 이벤트 리스너에 false 를 리턴한다.
크로스 브라우징
이벤트모델은 구IE(인터넷익스플로러8이하) 와 표준모델로 나누어진다. 그렇기 때문에 이벤트 등록을 위해서는 두가지 모두가 호환가능하도록 해야한다.
- jquery에서는 알아서 해주는 부분
표준모델
- 여러개의 이벤트리스너 등록이 가능하다.
IE8 이하모델
- 이벤트 이름에 반드시 on을 넣어야한다.
현재 내 노트북은 IE8이하 버젼이 아니기 때문에 확인할 수 없었다.
이제 이 두가지를 모두 호환 가능하도록 크로스 브라우징 하는 방법에 대해알아보자.
- if문을 사용하여 addEventListener에 값이 있는지 확인
- 값이 있으면 addEventListenr 활용하여 이벤트 추가
- 값이 없으면 구버젼 IE 이므로, attachEvent 활용하여 이벤트 추가
이벤트 전달
- 이벤트 버블링 : 자식노드에서 부모노드순으로 이벤트를 실행
- 이벤트 캡쳐링 : 버블링과 반대되는 개념으로 부모노드에서 자식노드 순으로 실행( 익스플로러에서 캡쳐링을 지원하지 않아 사용할 일 없다.)
- bb는 aa의 자식이므로, bb를 클릭시 bProcess를 실행한 후, aProcess가 실행된다.
- 쉽게 말하자면, bb를 클릭한것은 aa를 클릭한것이기도 하기때문에 둘다 실행된다는것이다. 이러한 버블링을 막기위해 하기 예시와 같이 진행할 수 있다.
- stopPropagation() 을 활용하여 이벤트 전달을 멈춘다.
그러나, IE8이하는 stopPropagation을 사용할 수 없기때문에 크로스 브라우징을 해줘야 한다.
그 방법을 알아보자.
- 구IE 에는 event를 바로 사용호출 못하고 window.event로 가능하다.
- 따라서 event라는 변수에 e와 window.event 중 가능 한것을 담는다.
(두 모델 모두 event변수안에 event가 담김) - stopBubble 함수 내용에 따라 각 모델 방식별로 버블링을 제어한다.
표준모델 → event.stopPropagation();
구모델 → event.cancelBubble = true;