정규 표현식 정규 표현식(regular expression)이란 ? 정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴이다.이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다. 정규 표현식의 생성 자바스크립트에서 정규 표현식을 만드는 방법은 다음과 같다. 정규 표현식 리터럴을 이용한 생성RegExp 객체를 이용한 생성 자바스크립트에서 정규 표현식 리터럴은 다음 문법을 사용하여 표현한다. 문법 /검색패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다. 예제12345678910111213141..
예외 처리 / Strict 모드 예외(exception) 예외(exception)란 프로그램이 실행 중에 발생하는 런타임 오류를 의미한다.이러한 예외가 발생하지 않도록 미리 방지하는 것도 중요하지만, 발생한 예외를 처리하는 방법 또한 매우 중요하다. TIP : 오류(error)란 프로그램 구문의 문법적인 오류를 의미한다. 예외 발생 예외를 발생시킨다는 것은 명시적으로 오류를 발생시킨다는 의미뿐만 아니라 예외 상황을 알린다는 의미도 있다. 자바스크립트에서는 throw 키워드를 사용하여 예외를 발생시킬 수 있다. 문법 throw 표현식; 표현식에는 예외 코드를 나타내는 숫자나 오류 메시지를 담고 있는 문자열, Error 객체 등이 올 수 있다. 예외 처리(exception handling) 자바스크립트에서는..
이벤트 이벤트(event)란? 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 이벤트 타입(event type) 이벤트 타입(event type)은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다.가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공되고 있다. 다음 예제는 HTML 문서의 특정 단락을 클릭하면 발생하는 이벤트를 처리하는 예제이다. 예제12345678..
Navigator 객체 / 대화 상자 / 타이머 Navigator 객체 navigator 객체는 브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체이다. 이 객체의 이름은 넷스케이프(Netscape)의 초기 웹 브라우저였던 네비게이터(Navigator)에서 유래되었다. 브라우저 스니핑(browser sniffing) 과거에는 방문자의 웹 브라우저의 종류를 미리 파악하여 조치함으로써, 브라우저 간의 호환성을 유지하였다.이렇게 호환성을 유지하는 방법을 브라우저 스니핑(browser sniffing)이라고 한다. navigator 객체는 이러한 브라우저 스니핑에서 사용할 수 있는 다양한 표준 프로퍼티 및 비표준 프로퍼티를 제공한다.하지만 현재는 이 방법보다 필요한 프로퍼티만..
Location 객체 / History 객체 / Screen 객체 Location 객체 location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. 이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 같이 연결되어 있다.location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다. 현재 문서의 URL 주소 location 객체의 href 프로퍼티는 현재 문서의 전체 URL 주소를 문자열로 반환한다. 예제12345678910111213141516171819 JavaScript BOM Location Object 현재 문서의 URL ..
window 객체 브라우저 객체 모델(BOM)이란? 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다.이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니다.하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 준다.자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다. window 객체 window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. 자바스크립트의 모든..
노드의 조작 노드의 값 변경 nodeValue 프로퍼티를 사용하면 특정 노드의 값을 변경할 수 있다.또한, setAttribute( ) 메소드는 속성 노드의 속성값을 변경할 수 있게 해준다. 요소 노드의 텍스트 요소 노드는 자식이 직접 텍스트값을 가지지않는다. 요소 노드의 텍스트는 요소 노드의 자식 노드인 텍스트 노드(text node)에 저장된다.따라서 요소 노드의 텍스트 값을 확인하거나 변경하고자 할 때는 요소 노드에 포함된 텍스트 노드에 접근해야 한다. 텍스트 노드의 값 변경 nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경할 수 있다. 예제123456789101112131415161718192021222324 JavaScript Node Handle 텍스트 노드의 값 변경 이 텍스트를..
노드의 관리 노드의 추가 다음 메소드를 사용하면 특정 위치에 새로운 노드를 추가할 수 있다. appendChild( )insertBefore( )insertData( ) appendChild( ) 메소드 appendChild( ) 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다. 예제 123456789101112131415161718192021222324252627282930 JavaScript Node Manage appendChild() 메소드 JavaScript HTML CSS JQuery 노드 추가! function appendNode() { var parent = document.getElementById("list"); // 아이디가 ..