Microsoft의 IE 5.0 브라우저 출시 이전에 웹 프로그래밍이 직면한 가장 큰 과제는 코드 재사용 및 다중 페이지 공유를 달성하기 위한 구성 요소를 쉽게 생성할 수 없다는 것이었습니다. 이 문제는 항상 DHTML(동적 HEML) 웹 페이지 프로그래머를 괴롭혔습니다. 여러 페이지에서 반복되거나 유사한 기능을 충족하기 위해 HTML, CSS 및 JAVASCRIPT 코드를 계속 다시 작성할 수 있습니다. IE 5.0 브라우저 출시 이후 이러한 상황이 개선되어 특정 기능을 구현하는 코드를 컴포넌트에 캡슐화할 수 있는 새로운 명령어 조합 방법이 제공되었으며, 이를 통해 여러 페이지에서 코드 재사용이 가능해졌고 웹 프로그래밍이 더 쉬워졌습니다. .완전히 새로운 세계로 들어가세요. 이 새로운 기술은 우리가 이야기할 DHTML의 "동작"입니다.
"동작"은 페이지의 특정 기능이나 작업을 캡슐화하는 간단하고 사용하기 쉬운 구성 요소입니다. 웹 페이지의 요소에 "동작"이 첨부되면 해당 요소의 원래 동작이 변경됩니다. 따라서 웹 페이지 프로그래머는 페이지의 HTML 코드를 단순화하는 동시에 개체의 기능을 향상시키기 위해 "동작"을 사용하여 일반 DHTML 지침을 개발하고 원본 개체의 일부 속성을 변경할 수 있습니다. 게다가, "비헤이비어"의 생성 및 사용도 매우 간단하고 편리하며, 필요한 지식은 이미 사용하고 있는 CSS 스타일 시트, HTML 지침 및 JAVASCRIPT 스크립트 언어뿐입니다. 이에 대해 알고 실제 프로그래밍 경험이 있는 한 "행동"의 사용을 배우고 익히는 데 문제가 없습니다. "비헤이비어"를 작성하고 사용하는 방법을 설명하기 위해 글꼴 효과를 변경하는 "비헤이비어" 컴포넌트를 예로 들어 "비헤이비어"가 페이지 편집에 가져오는 장점과 편리함을 경험해 보겠습니다.
먼저, "동작" 구성 요소를 구성하는 파일은 모두 .htc 확장자를 갖는 새 텍스트 파일을 만듭니다. 이 파일의 내용은 이 "동작"에 대한 설명입니다. 이를 생성하고 사용하는 단계는 다음과 같습니다.
(1) 먼저 이 "동작"에 여러 이벤트 응답을 추가합니다. 명령문 작성 형식은 다음과 같습니다.
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue ()" / >
"EVENT"는 필수 이벤트 이름에 해당합니다. 여기서는 onmouseover, onmouseout, onmousedown, onmouseup입니다. 물론 특정 요구 사항에 맞게 다른 이벤트 이름을 추가할 수도 있습니다. "ONEVENT"는 개별 이벤트 핸들, 즉 이벤트가 트리거될 때 호출되는 함수의 이름에 해당합니다. Glowit() 함수는 글꼴 주위에 빨간색 광선을 만듭니다. noglow() 함수는 글꼴의 글로우 효과를 제거합니다. Font2yellow() 함수는 글꼴 색상을 노란색으로 변경합니다. Font2blue() 함수는 글꼴 색상을 파란색으로 변경합니다. 네 가지 사건의 정의는 모두 비슷합니다.
(2) 다음으로, 이 "행동"에 "메서드" 정의를 두 개 더 추가하면 내용은 다음과 같습니다.
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
"NAME" 매개변수는 지정된 "메서드" 이름에 해당합니다. move_down과 move_right는 각각 아래로, 오른쪽으로 이동하는 "메소드"에 해당하는 함수 이름입니다. 메소드 이름 뒤에 "( )" 괄호를 넣지 마십시오. 즉, "move_down()"처럼 쓰지 마십시오. 이는 "메소드" 정의 구문에서는 허용되지 않습니다.
(3) 다음 단계는 JAVASCRIPT 스크립트 문을 사용하여 익숙한 DHTML 환경에서 "이벤트 핸들" 및 "메서드"에 해당하는 함수 내용을 작성하여 원하는 효과를 얻는 것입니다. 구체적인 내용은 아래 소스 프로그램을 참조하시기 바랍니다. "요소" 매개변수는 이 "동작"이 첨부된 개체를 참조합니다. "동작"은 항상 페이지의 요소에 첨부되고 이 요소를 통해 작동하기 때문입니다. 다른 설명은 모두 DHTML 프로그래밍 콘텐츠이므로 이에 대해 더 이상 설명하지 않겠습니다. 질문이 있는 경우 자세한 DHTML 프로그래밍 참조 콘텐츠, 속성 및 메서드 사용에 대한 지침, 수많은 기사 및 예제 프로그램이 포함된 IE 브라우저용 Microsoft MSDN 개발 설명서를 참조할 수 있습니다. 특히 초보자에게는 Microsoft의 MSDN 설명서를 자주 방문하는 것이 좋은 학습 습관입니다. URL은 http://msdn.microsoft.com/ie/ 입니다.
완전한 "행동" 문서인 "font_효과.htc"의 내용은 다음과 같습니다:
//////////////////////////////" 동작" 문서 시작 /////////////////////////////////////
"동작에 4개의 마우스 이벤트 추가 "
<PUBLIC:ATTACH EVENT= "onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow ()" / >
< PUBLIC :ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//"행동"에 대한 두 가지 메서드 정의
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME=" move_right" / >
< SCRIPT LANGUAGE="JScript" >
//글꼴 색상을 저장할 변수 정의
varfont_color;
//텍스트를 아래로 이동하는 메서드 정의
function move_down()
{
element.style.posTop+=2;
}
// 텍스트를 오른쪽으로 이동시키는 메소드 정의
function move_right()
{
element.style.posLeft +=6
}
//마우스 onmouseup 이벤트 호출 함수 정의
functionfont2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//마우스 onmousedown 이벤트 호출 함수 정의
functionfont2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow'
}
}
//마우스 onmouseover 이벤트 호출 함수 정의 function
Glory()
{
if (event.srcElement
== element)
{
font_color=style.color
='white';
(색상=빨간색,강도=2)";
}
}
//마우스 onmouseout 이벤트 호출 함수 정의 function
noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color
}
}
< /SCRIPT >
/ // ////////////////"행동" 문서 끝 /////////////////////////// ////// /
(4) 페이지에서 "행동"을 사용하는 방법
페이지에서 "행동" 구성 요소를 사용하는 데는 새로운 지식을 배울 필요가 없습니다. 필요한 지식은 CSS 스타일시트와 HTML 설정에 불과합니다. 다음 내용을 참조하세요.
< STYLE >
.myfilter{behavior:url(font_ effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
이는 우리가 사용하는 스타일과 다르다는 것을 알 수 있습니다. 이미 익숙하시죠. 테이블 세팅은 똑같습니다. 위의 명령문은 "myfilter"라는 스타일 이름을 정의합니다. 그 중 상대적으로 새로운 내용은 "behavior:url(font_ effect.htc);"입니다. "behavior"는 새로운 "behavior" 속성의 이름입니다. 스타일 시트에서 "동작"이 어떻게 설정되는지. 괄호 안의 내용은 "행동" 문서의 파일 이름입니다. 이 예에서는 "행동" 문서가 페이지 파일과 동일한 디렉터리에 있음을 나타냅니다. 이 매개변수 앞에 "behavior"를 추가하면 동작 문서를 올바르게 찾을 수 있습니다. 이 "스타일"의 나머지 콘텐츠는 필요에 따라 늘리거나 줄일 수 있는 일반적인 스타일 속성 설정이지만, 이 예에서는 "글로우" 필터 효과를 사용했기 때문에 하나 이상의 너비 속성이 설정해야 합니다. 위의 스타일 사양을 통해 글꼴 변경 효과가 있는 "동작"과 함께 제공되는 "myfilter"라는 스타일이 있습니다. 페이지 컴포넌트의 "동작"과 함께 이 스타일을 사용하려는 경우에도 매우 간단합니다. 컴포넌트의 속성 설정 영역에 "스타일 이름"을 배치하기만 하면 됩니다. 다음 설명을 참조하세요.
<span id="myspan" class='myfilter' >동작에 의해 생성된 텍스트 효과< /span >< br >
<span class='myfilter' >마우스 포인터 다음에 빛남
</span> 위의 문장 Content, class='myfilter'는 우리에게 익숙한 스타일 설정입니다. "id" 태그는 첫 번째 "span" 태그의 속성에도 정의되어 있습니다. 나중에 볼 수 있듯이 이는 "동작" 내에서 "메서드" 호출을 보여주기 위해 설정됩니다. 이 설정 후에 "span" 구성 요소의 콘텐츠는 "behavior" 구성 요소에서 미리 결정된 효과를 표시할 수 있습니다.
1. 마우스 포인터를 텍스트 내용 위로 이동하면 텍스트 주위에 빨간색 광선 효과가 생성되고 텍스트가 흰색으로 변합니다.
2. 마우스 버튼을 누르면 텍스트 색상이 노란색으로 변경됩니다.
3． 마우스 버튼을 떼면 텍스트 색상이 다시 파란색으로 변경됩니다.
4. 마우스 포인터가 텍스트 영역 밖으로 이동하면 빨간색 광선 효과가 제거되고 텍스트가 원래 모양으로 돌아갑니다.
또한 "behavior"를 정의할 때 "move_down" 및 "move_right"라는 두 가지 "메서드"를 설정합니다. 이 두 "메서드"를 호출하기 위해 두 개의 버튼이 정의됩니다.
< 버튼 onclick="myspan.move_right();" >텍스트의 첫 번째 줄을 오른쪽으로 이동</button >< br >
< 버튼 onclick="myspan.move_down ();" >텍스트의 첫 번째 줄을 아래로 이동</button>
버튼의 onclick 이벤트를 사용하여 이 두 가지 "메서드"를 호출합니다. 이전에 정의된 "id" 태그는 구성 요소의 개체 이름으로 사용됩니다. " myspan.move_down"을 사용하여 이 개체를 조작하는 "메서드"를 호출합니다. 해당 버튼을 누르면 첫 번째 줄의 텍스트가 아래쪽이나 오른쪽으로 이동하는 것을 볼 수 있습니다. 데모에는 텍스트의 첫 번째 줄만 사용되었지만 실제로는 해당 설정을 지정하는 한 다른 개체를 이동할 수도 있습니다. 페이지 소스 문서의 전체 내용은 다음과 같습니다.
< html >
< HEAD >
< TITLE > 동작 효과 데모 < /TITLE >
< STYLE >
.myfilter{behavior:url(font_효과.htc);position:relative;font-weight :bold; width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
<span id="myspan" class='myfilter' >동작에 의해 생성된 텍스트 효과< /span >< br >
< spa class=' myfilter' >마우스 포인터 뒤에서 빛남< /span >< br >
<span class='myfilter' >동시에 텍스트가 흰색으로 변합니다.< /span >< br >
<span class='myfilter ' >마우스를 누른 후 텍스트가 노란색으로 변합니다. </ /span >< br
> <span class='myfilter' >마우스를 떼면 텍스트가 파란색으로 변합니다.</ /span >< br >
<span class='myfilter' >마우스를 멀리 이동하면 텍스트가 원래 상태로 돌아갑니다.< /span >< br >
< 버튼 onclick="myspan.move_right();" >텍스트의 첫 번째 줄을 오른쪽으로 이동</ /button >< br >
< 버튼 onclick="myspan.move_down();" >텍스트의 첫 번째 줄을 아래로 이동</ /button >
</ /BODY >
</ /html >
위의 간략한 소개를 통해 쉽게 결합할 수 있음을 알 수 있습니다. 하나의 "동작"에 여러 텍스트 변경 효과를 동시에 적용할 수 있으며 간단한 "스타일" 설정을 통해 임의로 변경할 수 있습니다. 페이지 구성 요소와 관련하여 "동작" 구성 요소의 장점과 강력한 기능을 반영합니다. "동작" 구성 요소는 페이지 내에서뿐만 아니라 동일한 사이트의 모든 페이지에서도 재사용할 수 있습니다. 위의 효과를 얻기 위해 "동작"을 사용하지 않는 경우 페이지에서 미리 결정된 기능 세트를 호출하여 동일한 기능을 완료할 수 있다고 상상해 보십시오. 텍스트 효과를 사용하는 페이지의 각 요소에는 4개의 마우스 이벤트가 있습니다. 여러 페이지에서 동일한 효과를 사용하는 경우 호출되는 기능도 각 페이지에서 반복적으로 설정해야 합니다. 비교해 보면 어느 것이 더 좋고 어느 것이 더 나쁜지는 분명합니다. 따라서 "동작" 구성 요소를 사용하면 간단하고 효율적이며 다양하고 유지 관리하기 쉬운 페이지를 만들 수 있습니다. 이 글의 예제는 단지 "행동" 컴포넌트의 작성 및 사용 과정을 설명하기 위한 것이므로 독자는 "행동" 프로그래밍에 대한 일반적인 이해를 가질 수 있으며, 이를 기반으로 자신에게 필요한 "행동" 컴포넌트를 만들 수 있습니다. 또는 개인적인 요구 사항을 충족하기 위해 직접 인용할 수도 있습니다. "구성 요소 공유"라는 개념도 "행동" 개발자의 원래 의도이기 때문입니다. 마지막으로, 나는 이 기사가 "다른 사람들에게 영감을 주는" 목적에 도움이 되고 독자들이 DHTML 웹 프로그래밍의 놀라운 세계로 들어갈 수 있기를 바랍니다.