본문 바로가기

전체

 (219)
[JavaScript] 예외처리 예외처리 예외(Exception) : 프로그램 실행시 발생되는 문제(오류) 자바스크립트 예외 처리는 코드 실행 중 발생할 수 있는 예외나 오류 상황에 대처하는 방법을 제공한다. 예외 처리는 프로그램의 안정성을 높이고, 예외 상황에서도 제어를 유지하고 처리할 수 있도록 해준다. 자바스크립트에서 예외는 try...catch 문을 사용하여 처리된다. try 블록 내에서 예외가 발생할 수 있는 코드를 실행하고, 예외가 발생하면 해당 예외를 처리하기 위해 catch 블록이 실행된다. catch 블록은 예외를 처리하고 문제를 해결하는 코드를 작성하는 곳이다. 또한 try...catch 문은 finally 블록을 추가하여 예외 발생 여부와 관계없이 항상 실행되는 코드를 작성할 수도 있다. finally 블록은 선택적..
[JavaScript] form 태그 관련 이벤트 (사용자 입력값 검증) form 태그 관련 이벤트 form 태그는 사용자로부터 값을 입력받아 제출 이벤트(Submit Event)가 발생되면 웹프로그램을 요청하여 입력값을 전달하는 태그이다. form 태그의 하위태그로 사용자로부터 값을 입력받기 위한 입력태그와 제출 이벤트(Submit Event)를 발생시킬 수 있는 태그가 반드시 작성되어 있어야 정상적인 동작이 가능하다. form 태그는 사용자 입력값을 검증한 후 정상적인 경우에만 동작되도록 프로그램을 설정하고 비정상적인 입력값이 있는 경우 form 태그가 동작되지 않도록 설정해주는 것이 중요하다. ★ 따라서 form 태그는 자바스크립트를 이용해서 사용자 입력값을 검증해 주는 것을 권장한다. form 태그 사용자 입력값 검증 예시 1) 아무런 이벤트도 발생하지 않는 butto..
[JavaScript] DHTML(Dynamic HTML) DHTML(Dynamic HTML) DHTML(Dynamic HTML)는 브라우저에서 이벤트가 발생될 경우 브라우저에 출력된 태그를 변경하여 동적인 페이지를 제공하는 방법이다. DHTML은 HTML, CSS, JavaScript, DOM(Document Object Model) 등을 활용하여 웹 페이지의 동적인 요소를 조작하고 변경하는 기술이다. DHTML 예시 DHTML 아이템 추가
[JavaScript] addEventListener 메소드 addEventListener() 메소드 태그의 이벤트 리스너 속성값으로는 다수의 이벤트 처리 함수 호출이 가능하다. 이벤트 버튼1 하지만 Node(Element) 객체의 이벤트 리스너 속성에는 하나의 이벤트 처리 함수만 등록할 수 있다. 이벤트 버튼2 >> evnetHandleTwo 함수의 명령만 실행된다. Node(Element) 객체의 addEventListener() 메소드를 사용하면 다수의 이벤트 처리 함수 등록이 가능하다. 이벤트 버튼3 Node.addEventListener(eventName, callback[, useCapture])를 이용하여 이벤트 처리 함수 등록 → addEventListener() 메소드를 호출할 때 useCapture 매개변수를 이용하면 캐쳐링 또는 버블링 단계에서..
[JavaScript] 이벤트 전파(Event Propagation) 이벤트 전파(Event Propagation) 브라우저에서 발생된 이벤트는 window 객체에 먼저 도착하고 DOM Tree를 이용하여 이벤트가 발생된 태그에 도착한 후 다시 반대방향으로 이동하여 window 객체에 도착한 다음 이벤트는 소멸된다. 이벤트 전파는 HTML 요소 간에 발생한 이벤트가 어떻게 전파되는지를 나타내는 개념이다. 이벤트 전파는 이벤트가 발생한 요소부터 상위 요소로 전달되는 방식에 따라 캡쳐링(Capturing) 단계와 버블링 단계(Bubbling)로 구분할 수 있다. 캡쳐링(Capturing) 단계 캡쳐링은 이벤트가 window 객체(최상위 요소)로부터 시작하여 타겟 객체(이벤트가 발생된 요소)까지 모든 객체에 이벤트가 전파되는 과정이다. 이벤트가 상위 요소로 전파되면서 하위 요소..
[JavaScript] 이벤트 처리(Event Handle) / this 키워드 / 태그의 기본 이벤트 처리 기능 이벤트 처리(Event Handle) 이벤트(Event)는 태그(박스모델 - Element 객체)에서 발생되는 다양한 사건을 의미한다. 태그에서 발생된 이벤트에 대한 처리를 자바스크립트 명령으로 작성하여 실행한다. 이벤트 처리(Event Handle)를 통해 사용자의 동작에 따른 상호작용, 웹 페이지의 상태 변화에 따른 동적인 처리 등을 구현할 수 있다. 1. 태그의 이벤트 리스너 속성(onXXX)의 속성값으로 이벤트 처리 명령을 작성할 수 있다. → 태그에서 이벤트 리스너 속성의 이벤트가 속성값으로 설정된 명령을 실행한다. 버튼-1 2. 태그를 검색하여 Element 객체로 제공받아 Element 객체의 이벤트 리스너 속성에 이벤트 처리 함수를 등록할 수 있다. → 태그에서 이벤트 리스너 속성의 이벤트..
[JavaScript] DOM(Document Object Model) : 문서 객체 모델 / Element 객체 DOM(Document Object Model) : 문서 객체 모델 DOM은 document 객체를 기반으로 제공되는 HTML 태그의 Element 객체이다. DOM은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 자바스크립트를 사용하여 태그에서 이벤트가 발생될 경우 이벤트 처리 함수를 사용하여 태그를 Element 객체로 제공받아 조작이 가능하다. 이를 통해 동적인 페이지(DHTML:dynamicHTML)를 구현할 수 있다. - DHTML(Dynamic HTML; 동적 HTML): 정적 마크업 언어인 HTML과 클라이언트 기반 스크립트 언어(ex.자바스크립트) 그리고 스타일 정의 언어인 CSS를..
[JavaScript] BOM(Browser Object Model) BOM(Browser Object Model) BOM은 브라우저를 기반으로 제공되는 자바스크립트의 내장객체이다. BOM은 웹 브라우저 기능 요소를 직접 제어할 수 있는 객체의 모음이다. 객체 모델의 종류 : window(상위 객체), navigator, location, history, document 등 1) window 객체 window 객체는 브라우저 창(window)를 객체로 표현하여 브라우저 창과 관련된 정보와 동작을 제어하는 다양한 메소드와 속성을 제공한다. window 객체는 자바스크립트의 최상위객체이자 전역객체이며 모든 객체가 소속된 글로벌 객체이다. → JSC(Javascript core), DOM, BOM을 포함한 전역 객체이다. window 객체의 프로퍼티나 메소드는 window를 생..

티스토리툴바