개발 관련78 17. 에러 처리와 디버깅 다루는 내용 브라우저의 에러 보고에 대한 이해 에러 처리 자바스크립트 코드 디버그 1. 브라우저의 에러 보고에 대한 이해 주요 웹 브라우저는 자바스크립트 에러를 사용자에게 보고하는 기능을 갖추고 있음 대개 개발자에게만 쓸모있는 정보이므로 개발할 때는 에러 보고 기능을 켜야함 2. 에러 처리 기대할 수 있는 최선의 경우는 사용자가 무슨 일이 일어난 건지 모른 채 다시 시도해보는 것이며, 최악의 경우는 화를 내고 다시 방문하지 않는 것 2-1. try-catch try 절에서 에러가 생기면 코드 실행을 즉시 멈추고, catch 절을 실행 catch 에 담기는 정보는 브라우저에 따라 다르지만, message 프로퍼티는 존재 finally 절은 항상 실행됨 function trycatchFunction() { .. 2022. 7. 13. 13. 이벤트 다루는 내용 이벤트 흐름에 대한 이해 이벤트 핸들러 다루기 여러 가지 타입의 이벤트 메모리와 성능 1. 이벤트 흐름에 대한 이해 자바스크립트와 HTML 의 상호작용은 문서나 브라우저 창에서 특정 순간에 일어난 일을 가리키는 이벤트에 의해 처리됨 이벤트는 리스너(핸들러) 로 추적하며 리스너는 이벤트가 일어날 때만 실행됨 1.1 이벤트 버블링 익스플로러의 이벤트 흐름 문서트리에서 가장 깊이 위차한 요소에서 시작해 거슬러 올라가는 방식 click me 요소를 클릭하면 document 의 순서대로 발생 1.2 이벤트 캡처링 이벤트 버블링과는 반대로 최상위 노드에서 시작 오래된 브라우저에서는 지원하지 않으므로 이벤트 버블링을 주로 사용함 1.3 DOM 이벤트 흐름 이벤트 캡처링 단계, 타깃 단계, 이벤트 버블링 .. 2022. 7. 13. 11. DOM 확장 다루는 내용 선택자 API 에 대한 이해 HTML5 DOM 확장 사용 브라우저 전용 DOM 확장 사용 1. 선택자 API CSS 선택자로 패턴을 만들고 그에 맞는 DOM 요소를 선택하는 능력 (Ex. jQuery) 1-1 querySelector() CSS 쿼리를 받고 패턴에 일치하는 첫 번째 자손 요소를 반환 없으면 null var body = document.querySelector('body'); // ID 가 'div1' 인 요소 var div1 = document.querySelector('#div1'); // 클래스가 selected 인 것 중 첫 번째 var selected = document.querySelector('.selected.. 2022. 7. 13. 10. DOM DOM 을 노드의 계층 구조로 이해 다양한 노드 타입 브라우저들 간의 비호환성을 우회하는 DOM 코딩 1. 노드의 계층 구조 HTML 과 XML 문서는 모두 DOM 을 통해 노드의 계층 구조로 표현 가능 Hello 문서 노드(Document) 는 각 문서를 루트로 표현함. 위에서 문서 노드의 자식은 하나 뿐인데 이를 문서요소 라고 함 문서 요소는 문서의 최상위 요소이며 다른 요소는 모두 이 안에 존재 문서 하나에 문서 요소 하나만 있을 수 있음 2. 다양한 노드 타입 2-1 Node 타입 DOM 레벨 1에는 Node 라는 인터페이스가 존재 각 노드에는 childNodes 라는 프로퍼티가 있는데 이 프로퍼티에는 NodeList 가 저장됨 NodeList는 처음 호출했을 때 얻은 결과를 저장하고 있는 것이 .. 2022. 7. 13. 8. 브라우저 객체 모델 다루는 내용 BOM 의 핵심인 window 객체에 대한 이해 창과 프레임, 팝업 컨트롤 location 객체에서 얻는 페이지 정보 navigator 객체를 통한 브라우저 이해 1. window 객체 웹페이지에서 정의한 모든 객체, 변수, 함수에서는 window 가 Global 객체 구실을 함 var age = 29; function sayAge() { console.log(this.age); } console.log(window.age); // 29 sayAge(); // 29 window.sayAge(); // 29 var 연산자를 써서 window에 추가한 프로퍼티는 [[Configurable]] 속성이 false 로 지정되기에 delete 를 통해 삭제 불가능 페이지에 프레임이 들어있으면 각 프레임.. 2022. 7. 13. 7. 함수 표현식 다루는 내용 함수 표현식의 특징 함수와 재귀 클로저를 이용한 고유(프라이빗) 변수 1. 함수 표현식의 특징 함수를 정의하는 방법은 함수 선언과 함수 표현식 2가지가 있음. 함수 선언에서 뚜렷한 특징은 호이스팅(hoisting)이다. sayHi(); function sayHi() { console.log("hi"); } // 함수 선언부를 다른 코드보다 먼저 읽고 실행함 함수 표현식은 일반적인 변수 할당과 거의 비슷하며 함수 이름이 없어 익명 함수로 간주함 sayHi(); // error var sayHi = function() { console.log("hi"); } // 다른 표현식과 마찬가지로 호출 하기 전에 할당해야함 함수 표현식은 다른 함수에서 사용할 수 있도록 함수를 반환하는 형태도 가능 fun.. 2022. 7. 13. 이전 1 ··· 7 8 9 10 11 12 13 다음