DHTML 유토피아 : JavaScript & dom을 사용한 현대 웹 디자인

동적 웹 페이지 잠금 해제의 매력 : dhtml의 세계 깊이 이 기사는 SitePoint의 새 책 "DHTML Utopia : JavaScript & Dom을 사용한 현대 웹 디자인"에서 발췌 한 것입니다.이 책은 DHTML 기술을 심층적으로 탐색하여 유용성과 표준 호환성을 희생하지 않으면 서 풍부한 사용자 경험을 만드는 방법을 가르쳐줍니다. 저자 Stuart Langridge는 웹 표준을 사용하고 코드 및 태그를 분리하여 매력적이고 실용적이고 대화식 DHTML 애플리케이션을 구축합니다. 이 책은 문서 객체 모델 (DOM), 원격 스크립팅, Ajax, XML-RPC 및 XPath 기술을 포함하여 300 페이지 이상의 DHTML 기술을 다루어 자신의 웹 프로젝트 애플리케이션을 작성하는 데 도움이됩니다. 예를 들어, 표준을 준수하는 계층 적 탐색 메뉴를 작성하십시오.

다음 발췌문은 DHTML의 핵심 기술과 응용 프로그램을 빠르게 이해하게 할 것입니다. 자세한 내용은 책 페이지를 방문하거나 전체 카탈로그를보십시오. PDF 버전을 다운로드 할 수도 있습니다. 이제 1 장으로 가자.

1 장 : DHTML 기술의 개요 이 장에서는 HTML, CSS 및 JavaScript의 조합을 포함하여 DHTML 웹 사이트를 구축하는 데 필요한 기본 사항에 대한 간략한 개요를 간략하게 제공합니다. DHTML은 단일 기술이 아니지만 요리 기술과 같은이 세 가지 기술의 영리한 융합으로 최종 결과는 간단한 가정 요리 요리 나 그랜드 연회 일 수 있습니다.

HTML 기본 웹 사이트는 HTML로 작성되었습니다. 성공적인 DHTML Enhanced 웹 사이트를 구축하려면 HTML이 두 가지 조건을 충족해야합니다.

Fefficient Html :

HTML 사양의 규칙을 따르고 HTML 코드가 표준을 준수하는지 확인하십시오. 이는 DHTML을 구축하는 데 중요합니다. 여기에는 올바른 중첩 태그, 컨테이너 태그 닫기 및 문서 유형 선언 (Doctype) 사용이 포함됩니다. W3C 유효성 검사기를 사용하여 HTML의 유효성을 확인하십시오.

시맨틱 한 HTML :

HTML 태그를 사용하여 문서 요소의 속성을 설명합니다. 예를 들어, 태그를 사용하여 단락을 나타내고 태그를 사용하여 <strong> 또는 </strong> 태그를 사용하여 텍스트 형식을 제어하지 않고 참조를 나타냅니다. 시맨틱 태그를 사용하면 DHTML 기술을보다 쉽게 ​​적용 할 수 있습니다. <strong> </strong> <s> css 를 추가하십시오 <ing> 계단식 스타일 시트 (CSS)는 HTML 렌더링 방법, 즉 페이지의 각 요소의 모양을 정의하는 데 사용됩니다. CSS 스타일을 통해 DHTML 페이지는 페이지의 모양과 내용을 독립적으로 처리하여 깨끗한 분리를 달성 할 수 있습니다. <ul> <as> JavaScript 추가 <cript cript> JavaScript는 웹 사이트에 동적 동작을 추가하는 데 사용되는 프로그래밍 언어입니다. HTML은 페이지 구조를 정의하고 CSS는 페이지 모양을 정의하며 JavaScript는 버튼 클릭, 이미지 드래그 또는 마우스 이동과 같은 사용자 상호 작용 동작을 정의합니다. JavaScript는 DOM과 작동하여 작업을 다양한 이벤트와 연결합니다 (마우스 오버, 드래그 및 클릭). <li> 도구 권장 사항 <av> 좋은 JavaScript 개발 환경 및 코드 편집기는 개발 효율성을 크게 향상시킬 수 있습니다. 디버깅을 위해 Mozilla Firefox를 사용하고 구문 강조를 지원하는 코드 편집기를 사용하는 것이 좋습니다. <h4> 2 장 : 문서 객체 모델 (dom) <an> dom은 HTML 페이지를 JavaScript 프로그램에서 액세스 할 수있는 일련의 객체로 설명하며, 이는 페이지 요소를 트리 구조 (Dom Tree)에 매핑합니다. 각 요소는 요소 노드가되고 각 텍스트 조각은 텍스트 노드가됩니다. DOM 트리의 구조는 HTML 태그의 중첩 수준에 해당합니다. 효과적이고 올바르게 중첩 된 HTML은 올바른 DOM 트리를 구축하는 데 필수적입니다. </an> </h4> <dom> DOM 트리를 통해 여행 <dom> DOM 트리를 통과하는 것은 트리의 각 노드에 순서대로 액세스하는 과정을 나타냅니다. 이것은 일반적으로 재귀 적으로 사용하여 구현됩니다. 메소드는 지정된 ID의 요소를 얻는 데 사용되며 <h3 id="메소드는-지정된-유형의-모든-요소를-얻는-데-사용됩니다"> 메소드는 지정된 유형의 모든 요소를 ​​얻는 데 사용됩니다. </h3> <el> 운영 DOM 요소 <j> JavaScript를 사용하여 DOM 요소의 속성, 텍스트 내용 및 스타일 속성을 수정할 수 있습니다. <p> 메소드는 새 하위 노드를 추가하는 데 사용되며, 메소드는 지정된 노드 전에 새 하위 노드를 삽입하는 데 사용되며 </p> 메소드는 하위 노드를 삭제하는 데 사용되며 메소드는 노드를 복제하는 데 사용됩니다. <h4> <:> dom 작동 예 : 확장 양식 및 모듈 식 이미지 스위칭 </:> </h4> 이 장에서는 두 가지 예를 제공합니다. 사용자가 입력 필드를 동적으로 추가 할 수있는 확장 가능한 형식과 HTML 코드를 수동으로 수정하지 않고 JavaScript를 통해 이미지 스위칭 효과를 자동으로 감지하고 설정하는 모듈 식 이미지 스위칭을 제공합니다. <p> <hand> 3 장 : DOM 이벤트 처리 이벤트는 마우스 클릭, 양식 변경 등과 같은 요소에서 발생하는 작업입니다. DHTML 프로그래밍의 핵심은 이벤트 처리, 즉 이벤트에 응답하기 위해 코드를 작성하는 것입니다. <code>document.getElementById() 이벤트 처리 메소드 document.getElementsByTagName() Modern Dom Event Handling은

메소드 (및 ee 's

메소드)를 사용하여 이벤트 리스너를 요소에 첨부합니다. 이벤트 리스너 함수는 이벤트 객체를 매개 변수로 수신하며, 이벤트 요소, 마우스 좌표 등과 같은 이벤트에 대한 자세한 정보가 포함되어 있습니다.

이벤트 버블 링 및 차단 기본 동작

이벤트 버블은 이벤트가 대상 요소에서 조상 요소로 위로 기포되는 프로세스를 나타냅니다. appendChild() 방법은 이벤트가 버블 링되는 것을 방지 할 수 있습니다. insertBefore() 메소드는 링크 점프 방지와 같은 이벤트의 기본 동작을 차단할 수 있습니다. removeChild() 크로스 브라우저 이벤트 처리 코드가 다른 브라우저에서 올바르게 작동하는지 확인하려면 및 메소드를 균일하게 처리하기 위해 cloneNode() 기능을 사용하는 것과 같은 크로스 브라우저 호환 이벤트 처리 메소드를 사용해야합니다.

이벤트 처리 예 : 스마트 링크 및 테이블 강조 표시 이 장에서는 두 가지 예를 제공합니다. 스마트 링크, 사용자는 새 창에서 링크를 열는지 여부를 선택할 수 있습니다.

4 장 : 브라우저 기능 감지 DHTML 향상이 이러한 기능을 지원하지 않는 브라우저에서 문제를 일으키지 않도록하려면 브라우저 기능 감지가 필요합니다. 속성 탐지 기능 감지는 브라우저 유형을 식별하여 지원하는 기능을 유추하지 않고 브라우저가 특정 기능을 지원하는지 직접 확인하는 메소드를 말합니다. 여기에는 DOM 메소드와 속성이 존재하는지 확인하는 것이 포함됩니다.

기능 감지의 예 : 스크롤 가능한 이미지

이 장에서는 기능 감지를 사용하여 코드가 다른 브라우저에서 올바르게 작동하고 마우스 좌표 획득의 브라우저 차이를 처리하는 스크롤 가능한 이미지 예제를 제공합니다.

이 책의 나머지 장은 DHTML의 고급 기술과 응용 프로그램을 더 탐구 할 것입니다.

(그림은 원래 형식으로 남아 있고 위치가 변경되지 않음)

사진 링크에 액세스 할 수 없으므로 그림을 표시 할 수 없습니다. 이미지 링크가 유효한지 확인하십시오.

위 내용은 DHTML 유토피아 : JavaScript & dom을 사용한 현대 웹 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!