jQuery 라이브러리를 사용하면 손쉽게 문서 객체에 효과를 줄 수 있습니다. 최근에는 CSS3를 사용해 애니메이션을 구현하는 방법도 등장했습니다. CSS3로 애니메이션 효과를 적용하면 성능은 좋지만 구 버전의 인터넷 익스플로러에서는 작동하지 않습니다. 여기에서는 jQuery 라이브러리를 사용해 문서 객체에 효과를 줍니다. 5.1 효과 메소드 소개 jQuery 라이브러리는 [표11-9]처럼 문서 객체를 보여 주거나 보이지 않게 만드는 간단한 효과 메소드를 제공합니다. slideDown()과 slideUp()은 메소드 이름에 사라지거나 사라지지 않는다는 의미가 잘 드러나지 않으므로 주의하기 바랍니다. [표 11-9] jQuery 라이브러리의 간단한 효과 메소드 메소드 설명 show(속도) 문서 객체를 크게..
이전 장에서는 순수하게 자바스크립트만 사용해 이벤트를 연결하는 방법을 살펴보았습니다. 웹 브라우저마다 조금씩 차이가 있으므로 어렵게 느꼈을 수도 있습니다. 하지만 jQuery 라이브러리를 사용하면 손쉽게 모든 웹 브라우저에서 동작하는 이벤트를 생성할 수 있습니다. 4.1 간단한 이벤트 연결 지금까지 jQuery 라이브러리로 웹 페이지를 작성할 때 다음 코드를 사용했습니다. // 이벤트를 연결합니다.$(document).ready(function () { }); 여기서 ready()가 간단한 이벤트 연결 메소드입니다. ready() 메소드를 사용하면 ready 이벤트 (문서 객체 준비 완료 이벤트)가 연결됩니다.ready 이벤트 이외에도 jQuery 라이브러리는 [표 11-5]처럼 간단한 이벤트 연결 메소..
jQuery 라이브러리를 사용하면 문서 객체도 쉽게 조작할 수 있습니다. 문서 객체를 조작하는 메소드의 사용 방법은 비슷하므로 속성 조작 메소드 위주로 설명합니다. 속성 조작 내용을 주의 깊게 살펴봅니다. 3.1 속성 조작 jQuery 라이브러리르 사용해서 문서 객체의 속성을 조작할 때는 attr() 메소드를 사용합니다. attr()메소드는 매개 변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있습니다. [표 11-1] 문서 객체의 속성 조작 메소드 메소드 설명 attr() 문서 객체의 속성 조작 속성 추출 다음 코드처럼 attr() 메소드에 매개 변수르 ㄹ하나 입력하면 해다 ㅇ속성을 추출합니다. 앞에서 설명했듯이 jQuery 라이브러리는 문서 객체 여러 개를 한 번에 선택합니다. 여러 개의 문서 ..
jQuery 라이브러리는 다음 형태로 사용합니다. $(선택자). 메소드(매개 변수, 매개 변수) [그림 11-3] jQuery 라이브러리 메소드의 기본 형태 [그림 11-3]의 왼ㅇ쪽에 있는 $() 함수의 형태 때문에 익숙하지 않을 수 있습니다. 자바스크립트는 식별자로 특수 문자 $와 _를 사용할 수 있습니다. 따라서 $() 함수는 별도의 특별한 기능이 아니라 단순한 함수입니다. jQuery()는 jQuery 라이브러리의 기본 함수라 많이 사용하는데, 쉽게 사용할 수 있도록 다음 코드처럼 변수를 대치합니다. // Expose jQuery to the global objectwindow.jQuery = window.$ = jQuery;Tip_ 라이브러리에 있는 내용 기본 예제 11-2 문서 객체 선택 jQ..
jquery 라이브러리를 사용할 수 있는 설정 방법을 알아보겠습니다. 기본 예제 11-1 jQuery 라이브러리 설정 1. jQuery 웹 사이트 접속하기 사용할 jQuery 라이브러리를 구해야 합니다. jQuery 라이브러리는 두 가지 방법으로 사용할 수 있습니다. 첫 번째는 파일을 다운로드해 외부 자바스크립트 파일로 추가하는 방법입니다. http://jquery.com에 접속하면 메인 페이지에서 곧바로 jQuery 라이브러리를 다운로드 할 수 있습니다. 두 번째는 CDN 호스트를 사용하는 방법입니다. CDN(Content Delivery Network)은 파일을 여러 서버에 분산시키고 사용자가 접속하는 지역과 가장 가까운 곳의 서버에서 파일을 전송하는 기술입니다. CDN을 사용하면 트래픽이 특정 서버..
이벤트는 키보드를 누르거나 마우스를 클릭하는 것처럼 어떠한 현상이 프로그램에 영향을 미치는 것을 의미합니다. 이벤트는 사용자가 직접 발생시킬 수도 있고 응용 프로그램에서 자체적으로 발생시킬 수도 있습니다. 자바스크립트는 다음 이벤트를 기본으로 지원합니다. - 마우스 이벤트- 키보드 이벤트- HTML 프레임 이벤트- HTML 입력 양식 이벤트- 사용자 인터페이스 이벤트- 구조 변화 이벤트- 터치 이벤트 이벤트 용어를 정리하고 이벤트와 관련된 내용을 살펴보겠습니다. 지금까지 문서 객체를 조작하면서 다음 코드를 계속 사용해 왔습니다. window.onload = function () { }; 코드에서 onload를 이벤트 속성이라고 합니다. on을 제외한 load를 이벤트 이름 또는 이벤트 타입이라고 합니다...
학습 목표- 문서 객체와 문서 객체 모델의 개념을 이해합니다.- 문서 객체를 선택하고 조작할 수 있습니다.- 이벤트의 종류를 알아보고 문서 객체에 이벤트를 연결합니다. Preview HTML 태그를 자바스크립트에서 이용할 수 있게 객체로 만든 것을 문서 객체라고 합니다. 따라서 자바스크립트에서 문서 객체를 사용하면 HTML 태그를 생성 - 제거하거나 조작할 수 있습니다. 또 문서 객체를 사용해 마우스를 클릭하거나 키보드를 누르는 등 이벤트에 반응할 수 있습니다. 1. 문서 객체 모델 관련 용어 웹 브라우저에 HTML 파일을 끌어다 놓으면 웹 브라우저는 HTML 파일을 분석하고 화면에 표시 합니다. 이때 웹 브라우저가 HTML 파일을 분석하고 표시하는 방식을 문서 객체 모델이라고 합니다. 문서 객체 모델을..
객체는 여러 개의 자료형을 한 번에 저장하는 자료형입니다. "배여로가 같네요?" 배열은 인덱스를 기반으로 자료를 저장하지만, 객체는 키를 기반으로 자료를 저장합니다. 곧바로 하나하나 자세하게 살폅조겠습니다. 8.1 객체 개요 객체를 살펴보기 전에 배열과 관련된 기본 내용을 다시 정리해 보겠습니다. 배열은 다ㅣ음 방법으로 생성합니다. 배열에는 인덱스와 요소가 있습니다. 각 배열 요소를 사용하려면 다음과 같이 배열 이름 뒤에 인덱스를 입력해 요소에 접근합니다. array[0] -> '사과'array[2] -> '망고' 배열의 인덱스와 요소는 [표 9-13]과 같습니다. 표 9-13 배열 인덱스 요소 0 사과 1 바나나 2 망고 3 딸기 배열은 객체를 기반으로 만들었습니다. 따라서 배열과 객체는 상당히 유사합..
IT로 먹고사는 사람들의 IT 생활리뷰
