오늘은 08 - 1장의 내용을 정리해보자. 08 - 1장의 제목은 '구문 오류와 예외'로, 실무에서 오류를 처리하는 방법에 대해서 설명하고 있다. 예제는 소규모이기 때문에 필요성을 못 느낄수도 있지만, 실무에서는 많이 사용하므로 꼭 기억해두자. 그럼 정리 시작! 오류의 종류 프로그래밍 언어의 오류(error)에는 크게 2가지 종류가 있다. 프로그램 실행 전에 발생하는 오류 프로그램 실행 중에 발생하는 오류 괄호 개수를 잘못 입력하는 등의 오류로 코드가 실행조차 되지 않는 오류를 구문 오류(syntax error)라고 하고, 이러한 문법적 오류를 제외하고 코드 실행 중간에 발생하는 오류를 예외(exception) 또는 런타임 오류(runtime error)라고 부른다. 그리고 이를 처리하는 것을 예외처리(..

오늘은 07 - 2장의 내용 정리를 마무리해보자. 07 - 2장의 남은 부분은, 여러 가지 글자 입력 양식 이벤트에 관해서 설명하고 있다. 기본 이벤트 막기 웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 다음과 같은 컨텍스트 메뉴(context menu)를 출력한다. 이처럼 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본 이벤트라고 부른다. 링크를 클릭했을 때 이동하는 것, 제출 버튼을 눌렀을 때 이동하는 등이 모두 기본 이벤트의 예이다. 이러한 기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용한다. 다음 코드는 모든 img 태그의 contextmenu 이벤트가 발생할 때 preventDefault() 메소드를 호출해서 기본 이벤트..

오늘은 07 - 2장의 내용 정리를 이어가 보자. 07 - 2장의 다음 부분은,여러 가지 글자 입력 양식 이벤트에 관해서 설명하고 있다. 글자 입력 양식 이벤트 사용자로부터 어떠한 입력을 받을 때 사용하는 요소를 입력 양식(form)이라고 부른다. HTML에서는 input 태그, textarea 태그, button 태그, select 태그 등이 모두 입력 양식이다. 입력 양식을 사용하는 간단한 예를 살펴보자. 일단 inch 단위를 cm 단위로 변환하는 프로그램이다. 지금까지 배웠던 키보드 이벤트를 사용하면 숫자를 입력했을 때 실시간으로 변환할 수도 있다. 하지만 이번에는 button 태그의 활용도 함께 볼 수 있게 버튼을 클릭할 때 변환이 되도록 구현해 보자. DOCTYPE html> Document d..

오늘은 07 - 2장의 내용을 정리해 보자. 07 - 2장의 제목은 '이벤트 활용'으로, 간단한 애플리케이션을 구현하는 이벤트와 관련된 내용을 다루고 있다. 이벤트 모델 이벤트를 연결하는 방법을 이벤트 모델이라고 부른다. 07 -1 장에서는 이벤트를 연결할 때 addEventListener() 메소드를 사용했다. 이 방법이 현재 표준으로 사용하고 있는 방법이므로 표준 이벤트 모델이라고 부른다. document.body.addEventListener('keyup', () => { }) 과거에는 다음과 같이 문서 객체가 갖고 있는 onOO으로 시작하는 속성에 함수를 할당해서 이벤트를 연결했다. 이와 같은 이벤트 연결 방법을 고전 이벤트 모델이라고 부른다. document.body.onkeyup = (even..

오늘은 07 - 1장의 내용을 정리를 마무리 해보자. 07 - 1장의 뒷부분에는 문서 객체와 이벤트에 대해서 설명하고 있다. 화면을 구성하는 기본 내용이니 잘 익혀두어야 한다. 그럼 정리 시작! 문서 객체 생성하기 지금까지는 body 태그 내부에 있는 특정 문서 객체를 읽어들이고 이를 조작했다. 문서 객체를 생성하고 싶을 때에는 document.createElement() 메소드를 사용한다. document.createElement(문서 객체 이름) 그런데 문서 객체를 만들었다고 문서 객체가 배치되는 것은 아니다. 문서를 어떤 문서 아래에 추가 할지를 지정해줘야 한다. 프로그래밍에서는 트리라고 부른다. 문서 객체에는 appendChild() 메소드가 있으며, 이를 활용하면 어떤 부모 객체 아래에 자식 객..

오늘은 07 - 1장의 내용을 정리해 보자. 07 - 1장의 제목은 '문서 객체 조작하기'로, 화면에 글자 또는 그림 등을 출력하는 방법을 설명하고 있다. 화면을 구성하는 기본 내용이니 잘 익혀두어야 한다. 그럼 정리 시작! INTRO HTML 페이지에 있는 html, head, body, title, h1, div, span 등을 HTML 언어에서는 요소(element)라고 부른다. 그리고 자바스크립트에서는 이를 문서 객체(document object)라고 부른다. 따라서 '문서 객체를 조작한다'는 말은 'HTML 요소들을 조작한다'는 의미이다. 문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델(DOM, Document Objects Model) 이라고 부른다. DOMContentLoaded ..