DHTML 초보자 안내서

코어 포인트

Dynamic HTML (DHTML)은 독립적 인 프로그래밍 언어가 아니라 HTML, JavaScript 및 CSS를 결합하여 웹 페이지를 동적으로 만듭니다.

DHTML의 주요 기능은 4 세대 브라우저의 내장 기능에 의존하는 페이지를 다시로드하지 않고 웹 페이지의 모양과 내용을 동적으로 변경하는 것입니다.

DHTML의 구현은 브라우저마다 크게 다릅니다. 예를 들어 NetScape Navigator 4는
• 태그를 사용하고, Internet Explorer 4는 와 같은 표준 HTML 태그와 관련된 스타일 객체에 의존합니다.
크로스 브라우저 호환성을 달성하기 위해 DHTML은 브라우저에 따라 다양한 스크립팅 기술을 사용해야하며, 이는 효율적인 스크립팅에서 객체 감지와 같은 브라우저 감지 기술의 중요성을 강조합니다.
• Ajax 및 JQuery와 같은 새로운 기술의 끝없는 출현에도 불구하고 DHTML은 여전히 ​​관련이 있으며 대화식 동적 웹 컨텐츠를 만드는 데 기본적인 기술입니다.
• 자체적으로 선포 된 웹 마스터로서 최신 웹 기술을 유지하기 위해 최선을 다합니다. 현재 DHTML, 즉 동적 HTML을 배우고 있습니다. 이 기술에 대해 많은 것을 들었고 그것이 어떻게 인터넷에 혁명을 일으킬 것인지에 대해, 나는 소파에서 일어 서서 배우기 시작했거나 더 이상 "웹 사이트 관리자"라고 부를 자격이 없을 것이라고 생각했습니다. 나와 같은 DHTML에 대해 아무것도 모른다면,이 튜토리얼은 당신에게 적합합니다. 학습 과정을 즐기십시오. 질문이 있으시면 저에게 이메일을 보내주십시오. <layer></layer> 이것은 좋은 질문이며 나는 정답을 찾는 데 어려움을 겪고 있음을 인정합니다. JavaScript News Group의 게시물이 다음 답변 으로이 질문에 답하려고하는 것을 기억합니다. <div> "DHTML은 HTML과 JavaScript의 조합입니다. 검색 엔진에서 수백 개의 검색 결과를 검색하여 애매한 답변을 찾았지만 여전히 찾을 수 없었습니다. 그래서 나는 그것이 무엇이든 상관없이 DHTML을 먼저 배우고 그것이 무엇인지 알아낼 것입니다! 이제 저는 DHTML 프로그래머이므로 멋진 DHTML 정의를 제공 할 준비가되었다고 생각합니다. "DHTML은 4 세대 브라우저의 여러 내장 브라우저 기능의 조합으로 웹 페이지를보다 역동적으로"<code><table> "로 만들 수 있습니다. 실제로 배워야 할 것은 DHTML 자체가 아니라 DHTML을 사용하는 데 필요한 구문입니다. 다른 무엇보다도 동적 드라이브에 빠르게 액세스 하고이 언어가 무엇을 할 수 있는지 확인할 수 있습니다. 내가 말했듯이, DHTML은 함께 웹 페이지를 동적으로 만드는 기능 모음입니다. "동적"이라고 말할 때 DHTML의 제작자가 의미하는 바를 정의하는 것이 중요하다고 생각합니다. "Dynamic"은 문서가로드 된 후 웹 페이지의 모양과 스타일을 변경하는 브라우저의 기능으로 정의됩니다. JavaScript를 배울 때 JavaScript의 메소드를 사용하여 웹 페이지를 동적으로 만들 수 있다는 것을 알게되었습니다. 예를 들면 : <code>document.write()

  나는 나 자신에게 "나쁘지 않다"고 말한 것을 기억합니다. 그러나 내가 만들고자하는 콘텐츠가 동적 일뿐 만 아니라 주문형에서 생성된다면 어떻게해야합니까? 나는 그 당시에 여전히 순진했고 위의 코드를 함수에 중첩하고 양식 버튼을 통해 호출 하여이 작업을 수행하려고 노력했습니다. 버튼을 누르는 것은 실망입니다. 내 웹 페이지 전체가 삭제되어 함수에 의해 생성 된 텍스트 만 남겨 두었습니다. document.write("This is text created on the fly!") 그것은 과거입니다. 이제 DHTML이 도입되면 브라우저가 다른 모든 것을 지우지 않고 원하는대로 웹 페이지의 컨텐츠를 변경할 수 있습니다. 이것이 DHTML의 전부입니다. 문서가로드 된 후에도 외관과 스타일을 변경하는 브라우저의 기능.

  나는 이미 당신을 흥분하기 때문에 공평하다고 생각합니다. 나는 그것에 약간의 냉수를 부어야합니다. DHTML 기술은 현재 개발 중이며 NS 4 및 IE 4는이 훌륭한 기술을 구현할 때 크게 다릅니다. 현재 DHTML 코드를 작성하고 두 브라우저 모두에서 제대로 작동 할 것으로 기대할 수 없습니다. 또한,이 두 브라우저는 DHTML 개발의 다른 단계에 있습니다. 나는 어떤 홍보를 전파하는 데 도움이되지 않으므로, 나는 여기에 있습니다.

  이것은 당신의 관점에 따라 좋은 일이거나 나쁜 일이 될 수 있습니다. NS 4의 DHTML은 매우 간단하며 기본적으로 한 단어 - 레이어로 끓일 수 있습니다. 나는 나 자신에 놀랐지 만 사실이었다 - NS 4는 DHTML의 마법을 연주하기 위해 라는 새로운 태그에 전적으로 의존한다. 이 새로운 태그는 웹 페이지의 어느 곳에도 배치 할 수 있기 때문에 (다른 것이 없음) 이동할 수 있기 때문에 동적입니다. 내부 컨텐츠는 주문형으로 업데이트 될 수 있습니다.

  기본 구문

  태그의 기본 구문은 간단 할 수 없습니다 (HTML의 태그가 복잡해 보입니다!) :

  <layer> 레이어 내의 텍스트 </layer>

  태그는 컨텐츠 태그이므로 콘텐츠를 추가 할 수 있습니다 (예 : ). 위의 코드를 페이지에 계속 삽입하려고 노력하십시오 ... 레이어 내부의 텍스트가 다른 텍스트와 겹치는 것을 알 수 있습니다. 레이어가 페이지의 나머지 부분 위에 위치한 종이 조각과 같으며 문서 스트림에서 공간을 차지하지 않는다고 상상해보십시오.

  레이어 속성 단일 레이어는 쓸모가 없지만 지루할 수 있습니다. 다행히도 더 많은 기능이 있습니다. 레이어는 속성을 지원하여 속성을 지원하여 X 및 Y 좌표 시스템을 사용하여 위치를 찾아 배경을 제공하고 클립 (레이어의 특정 영역을 보이기)을 클립하고 숨기기 등을 클립 할 수 있습니다. 아래에서 가장 중요한 층 특성을 나열했습니다

  당신은 마음대로 다른 속성을 혼합하고 일치시킬 수 있습니다.

  위의 속성 중 일부를 사용하여 예제 레이어를 보려면 여기를 클릭하십시오. 는

  및

  속성을 ​​지정하지 않았다는 점에 유의하십시오. 지정하지 않으면 레이어가 정의하는 위치에 배치됩니다.

  스크립트 계층 이것은 레이어에서 가장 중요한 것 중 하나입니다 - 스크립트하는 방법. 결국, 레이어를 활성화시키는 것은 스크립트입니다. 레이어에 액세스하려면 다음 구문을 사용해야합니다.

  left 레이어에 액세스하는 것은 첫 번째 단계 일뿐입니다. 레이어에 액세스하면 레이어의 특성 중 하나를 계속 조작하여 동적 효과를 생성 할 수 있습니다. top 레이어의 배경색이 빨간색과 파란색으로 전환되는 예를 보려면 여기를 클릭하십시오.

  모든 속성 계층의 속성 계층은 읽을 수 있고 쓸 수 있으므로 각 속성을 시도하십시오!

  DHTML의 IE 4 구현을 배우기 시작했을 때 NS 해당 버전보다 훨씬 더 복잡하다는 것을 깨달았습니다. IE의 DHTML은 태그에 의존하지 않고 사용하는 데 사용되는 공통 HTML 태그 (예 :

  및 )에 의해 생성 된 새로운 객체 및 속성에 의존합니다. 더 강력하지만 마스터하기가 더 어렵습니다.