JavaScript Triggers_javascript 기술에 대한 자세한 설명

웹 사이트의 프런트 엔드는 세 개의 레이어로 구성됩니다. 구조화된 의미 태그와 웹 사이트 콘텐츠를 포함하는 XHTML로 구축된 구조적 계층입니다. 이 레이어 위에 프레젠테이션 레이어(CSS)와 동작 레이어(JavaScript)를 추가하면 웹 사이트가 더욱 아름답고 사용자 친화적으로 보입니다. 이 세 층 사이에는 엄격한 분리가 유지되어야 합니다. 예를 들어, 구조적 레이어와 동작 레이어를 건드리지 않고도 전체 프리젠테이션 레이어를 다시 작성할 수 있어야 합니다.
이러한 엄격한 분리 외에도 프리젠테이션 계층과 동작 계층 모두 구조 계층의 지침이 필요합니다. 스타일을 적용할 위치와 동작을 초기화할 시기를 알아야 합니다. 즉, 트리거가 필요합니다.

CSS 트리거에 대해서는 누구나 알고 있습니다. 클래스 및 ID 속성을 사용하면 웹사이트 성능을 완벽하게 제어할 수 있습니다. 그러나 인라인 스타일 속성을 사용하면 이러한 트리거 없이 작업할 수 있지만(번역자 참고 사항: XHTML 태그에 작성된 style="..." 속성 참조) 이러한 사용법은 강력히 반대되어야 합니다. 웹 사이트의 성능을 재정의하려면 XHTML 구조 레이어도 변경해야 합니다. 이들의 존재는 성능과 구조 사이의 분리를 파괴합니다.

JavaScript 트리거
동작 레이어도 동일한 방식으로 작동해야 합니다. 인라인 이벤트 핸들러(예: onmouseover="switchImages('fearful',6,false)") 사용에서 벗어나 동작을 구조와 분리할 수 있습니다. CSS와 마찬가지로 트리거를 사용하여 동작을 배포할 위치를 스크립트에 알려야 합니다.

가장 간단한 JavaScript 트리거는 id 속성입니다.

• 링크 1
• 링크 2
• 링크 3

var x = document.getElementById('navigation');if (!x) return;var y = x.getElementsByTagName('a');for (var i=0;i 이러한 방식으로 이 스크립트는 트리거됩니다. id="navigation"이 나타나는지 여부에 따라 id="navigation"이 없으면 아무 일도 일어나지 않습니다((!x)가 나타나면 해당 항목으로 둘러싸인 모든 링크 요소(태그 참조)). 이 방법은 간단하고 우아하며 모든 브라우저에서 작동합니다. 이 방법이 귀하의 요구 사항을 충족한다면 더 이상 읽을 필요가 없습니다.)

고급 트리거
ID를 트리거로 사용할 수 없는 경우는 다음과 같습니다.

ID는 문서에서 한 번만 나타날 수 있으며 때로는 동일한 동작을 여러(또는 그룹) 요소에 추가하고 싶을 수도 있습니다.
때때로 스크립트에는 "여기에 배포"라고 말하는 것보다 더 많은 정보가 필요합니다(번역자 주: 일부 매개변수 전달 등).
위의 두 가지 질문을 설명하기 위해 양식 스크립트를 사용합니다. "이 입력 필드(번역자 참고 사항: 텍스트 입력 상자, 비밀번호 입력 상자 등)가 필요합니다."를 지정하는 것과 같이 XHTML에 양식 유효성 검사 트리거를 추가하는 것이 유용할 수 있습니다.이러한 트리거를 구현하기 위해 다음 스크립트를 얻을 수 있습니다.

function verifyForm(){ var x = document.forms[0].elements for (var i=0;i 우리는 이 스크립트에 어떤 입력 필드가 필요한지 알려주기 위해 어떤 종류의 트리거를 만들어야 합니까? 분명히 id를 사용하는 것은 작동하지 않습니다. 이상적인 솔루션은 많은 수의 입력 필드에서 작동해야 하며 그것이 가능한지 생각하는 것은 당연합니다. 동작을 트리거하는 데 사용되는 클래스:

if (x[i].className == 'required' && !x[i].value) //사용자에게 이 필드를 입력하라는 메시지 표시
그러나 엄밀히 말하면 class 속성은 CSS 트리거를 정의하는 데 사용됩니다. CSS와 JavaScript 트리거를 함께 정의하는 것이 불가능하지는 않지만 그렇게 하면 코드가 혼란스러워질 수 있습니다.

if ( x[i].className.indexOf('required') != -1 && !x[i].value)
제 생각에는 class 속성은 CSS의 주요 부분에서만 사용해야 한다고 생각합니다. XHTML 프리젠테이션 레이어. 트리거가 동작 레이어에서 정보를 전달하도록 허용되면 문제가 복잡해집니다. 클래스 속성을 사용하여 두 레이어를 동시에 트리거하는 것은 동작과 성능의 분리와 충돌하지만, 방법을 결정하는 것은 사용자에게 달려 있습니다.

메시징 트리거
또한 트리거는 "여기에 배포(동작)"를 지정하는 명령보다 더 복잡할 수 있습니다. 동작 레이어를 더욱 다양하게 만들고 표준 스크립트를 어리석게 실행하는 대신 각 XHTML 요소의 개별 요구에 응답할 수 있습니다.

양식을 예로 들면 이 양식에는 상한이 있는 일부 텍스트 입력 상자가 포함되어 있습니다. 문자열 길이에 대한 원래의 maxlength 속성은 더 이상 textarea 요소에서 작동하지 않으므로 이를 수행하려면 스크립트를 작성해야 합니다. 또한 이 양식의 모든 텍스트가 동일한 최대 문자열 길이를 가지지는 않습니다.

다음과 같은 것이 필요합니다.

var x = document.getElementsByTagName('textarea');for (var i=0;i max) // 사용자에게 오류 알림}
이 스크립트에는 두 가지 핵심 정보가 필요합니다.

이 텍스트 입력 상자의 길이에 상한이 있습니까? 이것은 매우 일반적인 트리거입니다. 여기에 특정 작업을 추가해야 하는 스크립트입니다.
상한은 어떻게 되나요? 스크립트가 사용자 입력을 올바르게 확인할 수 있도록 하는 값입니다.
여기서 클래스 기반 접근 방식은 더 이상 적합하지 않습니다. 기술적으로 불가능하지는 않지만 필요한 코드가 너무 복잡해집니다. 예를 들어 "large"라는 클래스가 있는 텍스트 입력 상자에 트리거를 추가하여 스크립트에 필수이고 최대 길이가 300임을 알려줍니다.


이는 프레젠테이션 레이어와 동작 레이어를 혼합할 뿐만 아니라 이 값을 읽는 데 사용되는 스크립트도 이상해집니다.

var max = this.className .substring( this.className.indexOf('maxlength ') 10);if (this.value.length > max) // 사용자에게 문제가 발생했음을 알려줍니다.
이 스크립트는 끝에 maxlength=x를 입력한 경우에만 작동한다는 것을 쉽게 알 수 있습니다. 이 스크립트가 마지막이 아닌 maxlength=x를 처리하도록 하려는 경우(예를 들어 값 전달 트리거를 추가하려는 경우가 종종 발생함) 더 복잡해집니다.

당면한 문제
이것이 지금 우리가 직면한 문제입니다. 일반 명령문("여기에 작업 배포")과 요소별 값을 모두 스크립트에 쉽게 전달할 수 있는 완벽한 JavaScript 트리거를 어떻게 추가할 수 있습니까?

기술적으로는 이 정보를 클래스 속성에 추가하는 것이 가능하지만 문제는 클래스가 이를 위해 설계되었는가입니다.

사용자 정의 속성
다른 솔루션으로 전환했습니다. 앞서 언급한 텍스트 영역 길이 제한 예제를 살펴보겠습니다. 두 가지 정보가 필요합니다.

이 텍스트 입력 상자의 길이에 상한이 있나요?
상한은 어떻게 되나요?
이 정보를 자연스럽고 의미론적인 방식으로 표현하려면 텍스트 영역에 사용자 정의 속성을 추가해야 합니다.


maxlength 속성은 사용자 입력을 확인하고 전달하도록 스크립트에 알립니다. 속성의 값은 최대 길이를 스크립트에 전달합니다.같은 방식으로 "필수" 트리거를 사용자 정의 속성으로 변경할 수 있습니다. 예를 들어, require="true"는 어떤 값이 할당되든 관계없이 알림 역할만 하고 추가 정보를 수반할 필요가 없기 때문입니다.


엄밀히 말하면 이렇게 해도 문제가 없습니다. W3C DOM의 getAttribute() 메소드는 모든 태그에서 모든 속성 값을 읽을 수 있습니다. 7.54 이전의 Opera 버전만 태그(예:

)에서 잘못된 속성(예: src)을 읽는 것을 허용하지 않습니다. 다행히 이후 버전에서는 getAttribute()를 완벽하게 지원합니다.

내 솔루션은 다음과 같습니다.

function verifyForm(){ var x = document.forms[0].elements; for (var i=0;i max) / / 알림 user of error}
제 생각에는 이 솔루션은 구현하기 쉽고 JavaScript 트리거 형식과 일치합니다. "변수 이름/값" 쌍은 트리거 이름과 스크립트에 필요한 값을 제공합니다. 각 요소의 동작을 개별적으로 정의할 수 있습니다. 마지막으로 XHTML에 트리거를 추가하는 이 방법은 초보자에게 매우 간단합니다.

Custom DTD
그런데 이 솔루션으로 제작한 페이지는 검증을 통과하지 못하는 또 다른 문제가 있습니다. 유효성 검사기는 필수 및 최대 길이가 불법인 것으로 간주합니다. 물론, 유효성 검사기는 XHTML에 전자 속성이 없고 후자 속성은 요소에만 속합니다.

해결책은 이를 합법적으로 만드는 것입니다. 즉, 사용자 정의 문서 유형 정의(DTD)를 정의하고 우리가 정의한 속성을 포함하도록 XHTML의 작은 확장을 만드는 것입니다. 이 사용자 정의 DTD는 새 속성이 표시되어야 하는 올바른 위치를 정의한 다음 유효성 검사기가 사용자 정의 XHTML 방식에 따라 문서의 유효성을 검사합니다. DTD에서 이러한 속성이 정확하다고 말하면 올바른 것입니다.

사용자 정의 DTD를 만드는 방법을 모르신다면 J.David Eisenberg가 게시한 "사용자 정의 DTD 만들기" 기사를 읽어보세요(번역자 주: 귀하의 의견에 따라 번역할지 결정하세요^_^ ) , 이 기사에서 그는 당신이 알아야 할 모든 것을 알려줄 것입니다.

제 생각에는 사용자 정의 속성을 사용하여 동작 레이어를 트리거하고 이러한 속성을 합법화하는 사용자 정의 DTD와 결합하면 깔끔한 코드와 효율적인 스크립트를 유지하면서 동작 레이어를 구조 레이어에서 분리하는 데 도움이 될 수 있습니다. 또한 이러한 속성과 스크립트가 정의되면 가장 초보자라도 XHTML 문서에 트리거를 쉽게 추가할 수 있습니다.