dhtml 예제

이제 문서 개체 모델에 대한 기본적인 이해와 레이어를 만드는 방법을 알고 있으므로 몇 가지 유용한 예제를 살펴보고 자체 DHTML 사이트에서 시작할 수 있습니다. 광범위한 DOM 액세스를 지원하는 DHTML 지원은 Internet Explorer 4.0에서 도입되었습니다. Netscape Navigator 4.0이 있는 기본 동적 시스템이 있었지만 DOM에 모든 HTML 요소가 표시되는 것은 아닙니다. DHTML 스타일 기술이 널리 보급되면서 관련 기술에 대한 웹 브라우저간의 다양한 지원 으로 인해 개발 및 디버깅이 어려워졌습니다. 인터넷 익스플로러 5.0+, 모질라 파이어 폭스 2.0+, 오페라 7.0+가 ECMAScript에서 상속 된 공유 DOM을 채택했을 때 개발이 쉬워졌습니다. . 예제 29-3의 DHTML 코드는 그림 29-2에 표시된 메뉴를 만듭니다. 자바 스크립트는 우리가 전에 본 두 가지 개념을 결합: 위치 된 레이어를 만들고 DOM을 통해 스타일을 조작. DHTML 은 그 자체로 기술이 아니다; HTML, 계단식 스타일 시트 (CSS), 자바 스크립트 : 오히려, 그것은 세 가지 관련 및 보완 기술의 제품입니다. 스크립트와 구성 요소가 HTML 및 CSS의 기능에 액세스할 수 있도록 하기 위해 문서의 내용은 DOM(문서 개체 모델)이라고 하는 프로그래밍 모델의 개체로 표시됩니다. . 최근에는 jQuery와 같은 JavaScript 라이브러리가 브라우저 간 DOM 조작에서 일상적인 많은 어려움을 추상화했습니다. DOM API는 DHTML의 기초로 문서의 거의 모든 것에 액세스하고 조작할 수 있는 구조화 된 인터페이스를 제공합니다.

문서의 HTML 요소는 개별 개체의 계층 적 트리로 사용할 수 있으므로 속성을 읽고 설정하고 메서드를 호출하여 요소와 해당 특성을 검사하고 수정할 수 있습니다. 요소 간의 텍스트는 DOM 속성 및 메서드를 통해서도 사용할 수 있습니다. 또한 DOM은 키를 누르고 마우스를 클릭하는 등의 사용자 작업에 대한 액세스를 제공합니다. 이벤트 처리기 함수 및 루틴을 만들어 이러한 이벤트 및 기타 이벤트를 가로채고 처리할 수 있습니다. 이벤트 처리기는 지정된 이벤트가 발생할 때마다 제어를 수신하며 DOM을 사용하여 문서를 변경하는 등 적절한 작업을 수행할 수 있습니다. 이와 대조적으로 동적 웹 페이지는 사용자, 부하 발생 또는 특정 변수 값에 따라 다르게 생성된 모든 웹 페이지를 포함하는 더 넓은 개념입니다.

Comments

comments