Frontend/Java Script (11) 썸네일형 리스트형 JS 예외 처리 (part. 03) - 예외 강제 발생 예외를 강제로 발생시킬 때는 throw 키워드 사용 try{ throw 'DivideByZeroException'; }catch (exception){ if(exception == 'DivideByZeroException'){ alert('ㅇㅁㅇ') } } 적절한 강제적 예외 발생과 처리 function divide(alpha, beta){ if (beta == 0){ throw 'DivideByZeroException'; }else{ return alpha / beta; } } try{ divide(10, 0); }catch (exception){ alert('0으로 나눌 수 없습니다.'); } JS 예외 처리 (part. 02) - 예외 객체 예외 객체 try catch 구문을 사용할 때 catch의 괄호 안에 입력하는 식별자가 예외 객체 일반적으로 e나 exception 식별자를 사용 예외 객체의 속성 message : 예외 메세지 description : 예외 설명 name : 예외 이름 JS 예외 처리 (part. 01) - 예외 처리 프로그램 실행 중 발생하는 오류를 예외(Exception) 프로그래밍 언어의 문법적인 오류로 프로그램이 실행되기도 전에 발생하는 오류를 에러(Error) 라고 함 기본 예외 처리 이벤트 연결의 예외 처리 function registerEventListener(node, event, listener) { if (node.addEventListener) { // 파이어폭스, 크롬, 사파리, 오페라 node.addEventListener(event, listener, false); } else if (node.attachEvent) { // 인터넷 익스플로러 node.attachEvent('on' + event, listener); } } 이벤트 객체의 예외 처리 function whenClick(e) { v.. JS event (part. 08) - 표준 이벤트 모델 한 번에 여러 가지의 이벤트 리스너를 추가할 수 있으며, 인터넷 익스플로러 모델과 달리 이벤트 캡처링을 지원 addEventListener(eventName, handler, useCapture) removeEventListener(eventName, handler) 표준 이벤트 모델의 이벤트 연결하는 메서드 인터넷 익스플로러 이벤트 모델과 달리 이벤트 이름을 매개변수로 입력함 Click window.onload = function () { var header = document.getElementById('my-header'); header.addEventListener('click', function () { this.innerHTML += '+'; }); }; 표준 이벤트 모델은 이벤트 리스너 안에.. JS event (part. 07) - 인터넷 익스플로러 이벤트 모델 인터넷 익스플로러 이벤트 모델은 다음과 같은 두 가지 메서드로 이벤트를 연결하거나 제거할 수 있다. 첫 번째 매개변수에 이벤트 속성을 쓴다 attachEvent(eventProperty, eventListener); detachEvent(eventProperty, eventListener); window.attachEvent('onload',function () { // load 이벤트 연결 }); 인터넷 익스플로러의 이벤트 모델이므로 인터넷 익스플로러에서만 실행됨 window.onload = function () { var header = document.getElementById('my-header'); // 인터넷 익스플로러의 경우 실행 if (header.attachEvent) { var hand.. JS event (part. 06) - 이벤트 전달 Paragraph window.onload = function () { document.getElementById('header').onclick = function () { alert('header'); }; document.getElementById('paragraph').onclick = function () { alert('paragraph'); }; }; p 태그를 클릭하면 이벤트 버블링이 일어나면서 paragraph => header 순으로 경고창이 출력됨 여기서 이벤트의 전달을 막아보자 인터넷 익스플로러와 그외 브라우저가 이벤트 전달을 막는 방법이 다름 인터넷 익스플로러 : 이벤트 객체의 cancelBubble 속성을 true로 변경 그 이외의 브라우저 : 이벤트 객체의 stopPropaga.. JS event (part. 05) - 디폴트 이벤트 제거 이름 비밀번호 비밀번호 확인 html 작성 window.onload = function () { document.getElementById('my-form').onsubmit = function () { return false; }; }; submit 디폴트 이벤트 제거 window.onload = function () { document.getElementById('my-form').onsubmit = function () { var pass = document.getElementById('pass').value; var passCheck = document.getElementById('pass-check').value; if(pass == passCheck){ alert("성공") }else{ ale.. JS event (part. 04) - 이벤트 강제 실행 메서드 호출처럼 이벤트 속성을 호출하면 이벤트가 강제로 실행됨 ButtonA ButtonB Button A - 0 Button B - 0 window.onload = function(){ var buttonA = document.getElementById("button-a"); var buttonB = document.getElementById("button-b"); var counterA = document.getElementById("counter-a"); var counterB = document.getElementById("counter-b"); buttonA.onclick = function(){ counterA.innerHTML = Number(counterA.innerHTML) + 1; } .. JS event (part. 03) - 이벤트 발생 객체와 이벤트 객체 이벤트 리스너 안에서 this 키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있음 h1 태그 클릭시 경고창에 [object HTMLHeadingElement] 출력됨 이벤트가 어디서 발생했는지, 타입은 무엇인지, alt나 shift, ctrl 등을 함께 눌렀는지, 마우스의 x좌표, 마우스의 y좌표 등 이벤트와 관련된 모든 내용이 출력됨 // 첫줄 var event = e || window.event; 인터넷 익스플로러 8 이하의 버전은 이벤트가 발생할 때 이벤트 객체를 window.event 속성으로 전달하지만, 다른 브라우저는 이벤트 리스너의 매개변수로 전달하므로 사용한 코드 note. 인터넷 익스플로러 9부터는 두 가지 방식을 모두 사용가능 JS event (part. 02) - 고전 이벤트 모델 고전 이벤트 모델 문서 객체의 이벤트 속성으로 이벤트를 연결하는 방법 (현대에도 많이 사용중) Click 이벤트 리스너를 제거할 때는 문서 객체의 이벤트 속성에 null을 넣어줌 고전 이벤트 모델은 이벤트 하나에 이벤트 리스너 하나만 연결할 수 있음 JS event (part. 01) - 이벤트 Evnet 종류 JS의 이벤트는 사용자가 발생시킬 수도 있고 애플리케이션 스스로 발생시킬 수도 있다. 마우스 이벤트 키보드 이벤트 html 프레임 이벤트 html 입력 양식 이벤트 유저 인터페이스 이벤트 구조 변화 이벤트 터치 이벤트 이벤트 연결 이벤트를 연결한다 => window 객체의 onload 속성에 함수 자료형을 할당하는 것 이때 load를 '이벤트 이름' 또는 '이벤트 타입'이라고 하며 onload를 '이벤트 속성'이라고 함 이벤트 속성에 할당한 함수를 '이벤트 리스너' 또는 '이벤트 핸들러'라고 함 이벤트 모델 문서에 객체를 연결하는 방법을 이벤트 모델이라고 함 DOM Level 단계에 따라 두가지로 분류, 다시 두가지로 각각 나눠짐 (총 4가지) DOM Level 0 - 인라인 이벤트 모델.. 이전 1 다음
