jQuery ▷ 클라이언트용 자바스크립트 라이브러리 ＊모든 웹브라우저에서 사용 가능한 무료 오픈 소스 라이브러리 ☞ 2006년 1월 존 레식(John Resig)이 발표 ＊적은 용량, 빠르고 풍부한 기능을 제공 ☞ 자바스크립트를 필요로 하는 다양한 작업을 브라우저에서 사용이 용이한 API를 통해 빠르고 간단한 처리가 가능 jQuery 사용 방법 ▷ jQuery 다운로드 → 외부 자바스크립트 파일로 추가 http://www.jquery.com ▷ CDN 이용jQuery 사용 방법_다운로드를 이용한 방법 ▷ jQuery 다운로드 ＊'Download the compressed, production jQuery 버전번호' ☞ 소스 파일에서 주석이나 여백 등을 모두 제외시켜 최소화한 버전 ☞ jQuery-버전번호..
브라우저 객체 모델 ▷ Browser Object Model ＊브라우저를 객체로 표현 객체. … .객체.속성 객체. … .객체.메서드() window.document.write() windowdocumentHTML 문서를 표현history사용자가 방문한 URL을 저장·관리location현재 URL에 대한 정보를 유지navigator브라우저에 대한 정보를 관리 window 객체 ▷ 창에 대한 전반적인 모든 상황을 제어하는 최상위 객체 ＊주요 메서드 ☞ open(), close() → 새로운 윈도를 엶, 열린 창을 닫음 ☞ alert(), confirm(), prompt() → 경고창, 확인창, 입력창 ☞ setInterval() → 일정 시간 간격으로 함수를 반복적으로 호출 ☞ setTimeout() → ..
DOM 노드의 삽입 새로운 요소의 삽입 ▷ 텍스트가 있는 새 요소의 삽입 과정 ＊추가하려는 새로운 요소를 생성 ☞ var 새요소변수 = document.createElement("요소명"); ＊텍스트 내용이 있는 경우 텍스트 노드를 생성 ☞ var 텍스트노드변수 = document.createTextNode("텍스트내용"); ＊생성된 텍스트 노드를 새로운 요소의 자식 요소로 연결 ☞ 새요소변수.appendChild(텍스트노드변수); ＊새 요소가 추가될 부모 요소를 찾아 자식 요소로 연결 ☞ var 부모요소변수 = document.getElementById("부모_아이디명"); ☞ 부모요소변수.appendChild(새요소변수); ▷ 속성이 있는 새 요소의 삽입 과정 ＊추가하려는 새로운 요소를 생성 ☞ va..
요소의 내용 수정 ▷ innerHTML 속성 ＊HTML 형식으로 요소의 내용을 다룰 때 사용 ☞ 요소변수 = document.getElementById("아이디명") ☞ 변수 = 요소변수.innerHTML 요소변수.innerHTML = 값 ▷ textContent 속성 ＊HTML 태그와 속성을 제외하고 내용만을 가져오는 경우 ☞ 변수 = 요소변수.textContent ＊태그를 포함한 텍스트로 설정하는 경우 태그도 일반 텍스트로 취급 ☞ 요소변수.textContent = 값 요소의 내용 수정_요소 내용 가져오기 요소의 내용 수정_요소 내용 설정하기 요소의 속성 수정 ▷ HTML 요소에서 사용하는 속성을 그대로 사용해서 값 할당 ＊document.getElementById("아이디명").속성 = 값 요소의 ..
문서 객체 모델 ▷ DOM : Document Object Model ＊ 문서 객체 → HTML 문서의 태그를 자바스크립트에서 사용할 수 있도록 객체로 만든 것 ＊ 브라우저가 HTML 문서에 접근할 수 있도록 정의해 놓은 표준 → HTML 문서를 분석하고 표시하는 방식 ＊ 웹 문서가 적재되면 웹브라우저는 정적으로 DOM을 생성 ☞ 계층적인 구조를 갖는 트리로 표현 ☞ 자바스크립트를 통해 프로그램 실행 중에 웹 문서의 내용, 구조 및 스타일 등에 대한 동적인 작업이 가능 DOM 요소의 접근 방법 ▷ id를 이용한 방법 ＊ getElementById("아이디명") ☞ id="아이디명"을 갖는 오직 하나의 요소만 선택 ▷ 태그명을 이용한 방법 ＊ getElementsByTagName("태그명") ☞ 지정한 태..
String 객체 ▷ 문자의 모양을 지정하거나 문자열을 다루기 위한 객체 ＊ new 연산자를 사용하지 않고 문자열을 그냥 변수에 할당 ＊ 속성 ☞ length → 문자열의 길이를 반환 ＊ 메서드 ☞ 글꼴 관련 메서드 ☞ 위치 이동 관련 메서드 ☞ 문자열 처리 관련 메서드 ＊ 속성 ☞ "자바스크립트".length → 6 ☞ "JavaScript".length → 10 ＊ 글꼴 관련 메서드 ☞ str = "자바스크립트(JavaScript)" ☞ str.big() : 글자 크기를 현재 글자보다 한 단계 크게 지정 ☞ str.small() : 글자 크기를 현재 글자보다 한 단계 작게 지정 ☞ str.bold() : 글자를 굵게 지정 ☞ str.italics() : 글자를 기울어진 형태로 지정 ☞ str.stri..
이벤트 ▷ 어떤 특정한 사건이나 동작 ＊ 원하는 이벤트에 대응하는 처리 내용을 이벤트 핸들러로 작성/등록 ☞ 해당 이벤트가 발생하면 자동으로 이벤트 핸들러를 수행 주요 이벤트구분이벤트설명윈도우load브라우저에서 웹 문서를 모두 읽어 왔을 때 발생unload브라우저의 웹 문서를 닫을 때 발생포커스focus윈도우, 폼, 구성요소가 포커스를 받을 때 발생blur포커스를 잃을 때 발생폼change입력양식의 값이 변경되었을 때 발생reset입력양식을 초기화시켰을 때 발생select입력양식의 내용 중 특정 내용을 선택하였을 때 발생키보드keydown키보드의 키를 누르는 순간 발생 keyup키보드의 키를 누른 후 놓았을 때keypress키보드의 키를 눌렀다 놓는 순간 발생마우스click마우스를 클릭하는 순간 발생db..
객체 ▷ 자바스크립트 → 객체 기반의 언어 ▷ 객체(object) ＊ 자바스크립트의 작업 대상 → 가장 기본적인 자료형 ＊ 실세계 사물을 모델링하기 위해 변수와 함수를 그룹화핚 것 ☞ 속성(property) → 객체의 특성/상태를 표현하기 위한 데이터 ☞ 메서드(method) → 객체와 관련된 작업을 처리하는 함수 → 데이터를 동작하는 규칙이나 방법 ＊ 종류 → 내장 객체(String, Date, Array, Math 등), 사용자 정의 객체 객체 생성 ▷ 객체 정의 → 일반 함수와 동일한 형식의 생성자 함수 이용 function 객체명 ( 매개변수1, 매개변수2, …, 매개변수n ) { this.속성1 = 매개변수1; //매개변수1은 속성1의 속성값 … //this : 현재 객체를 나타내는 예약어 th..