.
유사한 보안 제한의 몇 가지 예가 있으며,이 책에서 다룰 응용 프로그램에서 발생할 때 확장 할 것입니다. 그러나 요약하면, 우리가 이미 본 것들을 포함하여 JavaScript의 주요 제한 사항 및 보안 제한 목록이 있습니다. JavaScript는 할 수 없습니다 :
. Progressive Enhancement 로 널리 알려져 있으며,이 책 전체에서 사용할 방법론입니다. 묻지 마십시오!
때때로, 당신은 JavaScript없이 동등한 기능을 제공 할 수없는 상황에 직면 할 수 있습니다. 그러한 경우, 나는이 비 호환성 (물론 비 기술적 인 용어로)을 사용자에게 알려주는 정적 메시지를 보는 것이 좋다고 생각합니다. 그러나 대부분의 경우 문자 그대로 유일한 방법이 아니라면 이런 종류의 메시지를 제공하지 마십시오. .
분리의 이점
내용과 행동의 좋은 분리를 실천함으로써, 우리는 더 부드러운 열화 측면에서 실질적인 이점을 얻을뿐만 아니라 분리 측면에서 사고의 이점을 얻습니다. HTML과 JavaScript를 분리했기 때문에 HTML을 결합하는 대신 HTML을 볼 때 핵심 기능이 스크립팅과 무관하게 페이지의 내용을 설명해야한다는 것을 잊을 가능성이 적습니다.
더 명확하게, 조금 더 타이핑 :
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
언어 또는 호스트 객체를 통해 사용할 수없는 시스템 설정 또는 사용자의 컴퓨터의 기타 데이터를 읽습니다 (호스트 객체는 Window 및 Screen과 같은 것입니다.
그들은 스크립팅을 전혀 지원하지 않는 장치를 사용하고 있거나 제한된 방식으로 지원합니다.
토론
이 시나리오에 대한 "전통적인"접근 방식은 순수한 JavaScript에서 별도의 동적 메뉴를 생성하고 noscript 요소 내에 폴백 정적 컨텐츠를 갖는 것입니다 : <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript>
<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>
이러한 코드 요소가 항상 필요하지는 않지만 필요할 때 사용하는 것이 더 쉽고, 일관되게 사용하는 경우 결과 코드를 읽는 것이 더 쉽습니다.
<would> 위의 예제는 다음과 같이 더 잘 쓰여질 것입니다
<p>
이 버전은 코드 가독성의 궁극적 인 것을 나타냅니다
<em>
함수 리터럴 사용 </em> </p>
<p> JavaScript 언어의 복잡성에 경험이 생기면 기능 리터럴을 사용하여 필요에 따라 익명 함수를 만들고 JavaScript 변수 및 객체 속성에 할당하는 것이 일반적입니다. 이와 관련하여 기능 정의에이어야합니다. 세미콜론이이어야하며, 변수 할당을 종료합니다.
var sayomething = function (메시지)
{<.>
...
}; </.></p> <p>
<scr> 페이지에 스크립트를 추가
<ipt> 스크립트가 흥미 진진한 일을 시작하기 전에 웹 페이지에로드해야합니다. 이 작업을 수행하는 두 가지 기술이 있습니다. 그 중 하나는 다른 기술보다 뚜렷하게 낫습니다. </ipt></scr></p>.
솔루션 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>
<most> 첫 번째이자 가장 직접적인 기술은 이전에 본 것처럼 스크립트 요소 내에 직접 코드를 작성하는 것입니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
이 방법의 문제는 레거시 및 텍스트 전용 브라우저 (스크립트 요소를 전혀 지원하지 않는 브라우저)에서 내용을 문자 그대로 텍스트로 렌더링 할 수 있다는 것입니다.
이 문제를 피하는 더 나은 대안은 항상 외부 JavaScript 파일에 스크립트를 넣는 것입니다. 다음은 다음과 같습니다. <p>
</p>
<an> 이것은 what-is-javaScript.js라는 외부 JavaScript 파일을로드합니다. 파일에는 다음과 같이 스크립트 요소 내부에 넣을 코드가 포함되어야합니다.
<p>
<this>이 메소드를 사용하면 스크립트 요소를 이해하지 못하는 브라우저는 스크립트 요소를 무시하고 내용을 렌더링하지 않지만 (요소가 비어 있기 때문에) 이해하는 브라우저는 스크립트를로드하고 처리합니다. 이를 통해 스크립팅과 컨텐츠를 별도로 유지하는 데 도움이되며 훨씬 쉽게 유지 관리됩니다. 여러 문서에서 코드의 사본을 유지하지 않고도 여러 페이지에서 동일한 스크립트를 사용할 수 있습니다.
</this></p> 토론 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 스크립트 요소 내부에서 직접 코드를 사용하지 않는 권장 사항에 의문을 제기 할 수 있습니다. “문제 없어요.”라고 말할 수 있습니다. "그냥 HTML 댓글을 작성하겠습니다." 글쎄, 나는 그것에 동의하지 않아야한다 : "숨기기"코드에 HTML 댓글을 사용하는 것은 우리가 떨어지지 않는 것을 피해야하는 매우 나쁜 습관이다. <p>.
<m> 코드 주위에 HTML 주석을 넣습니다
<par> 검증 파서는 주석을 읽을 필요가 없으며, 처리하기에 훨씬 적은 주석을 읽을 필요가 없습니다. 댓글을 달린 JavaScript가 전혀 작동하지 않는다는 사실은 구식이 아닙니다. 사실이 아닐 수있는 문서에 대해 가정하는 오래된 구식 관행에 대한 후퇴입니다.
이 책의 모든 예제는 HTML (XHTML과는 반대로)에 제공 되므로이 가정은 합리적이지만 XHTML과 함께 작업하는 경우 (MIME 유형의 응용 프로그램/XHTML XML과 함께 제공) 코드의 의견은 검증 된 XML 파자에 의해 검증 된 XML 파자에 의해 폐기 될 수 있습니다. 전달을 보장하기 위해 호환성 (및 개별 프로젝트와 마찬가지로 자신의 코딩 습관과 관련된 이점)을 위해서는 이러한 방식으로 코드에 주석을 두는 것을 피하는 것이 좋습니다. JavaScript는 항상 외부 JavaScript 파일에 보관되어야합니다. </par></m></p>
<ibute> 언어 속성 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<ibute> 언어 속성이 더 이상 필요하지 않습니다. Netscape 4와 동시대 인들이 지배적 인 브라우저였던 시절, <cript> 태그의 언어 속성은 상향 수준의 지원을위한 스니핑의 역할 (예 : JavaScript1.3)을 지정하는 역할을했으며 스크립트 통역사가 작동하는 방식의 작은 측면에 영향을 미쳤습니다.<ing> 그러나 JavaScript의 버전을 지정하는 것은 JavaScript가 ecmascript이고 언어 속성이 유형 속성에 유리하게 더 이상 사용되지 않았습니다. 이 속성은 스크립트 및 스타일 시트와 같은 MIME 유형의 포함 된 파일을 지정하며 사용해야 할 유일한 파일입니다.
<p>
<the> 기술적으로 값은 텍스트/ecmascript이어야하지만 인터넷 익스플로러는이를 이해하지 못합니다. 개인적으로, JavaScript가 (아이러니하게도) 타이핑하기가 어려운 단어이기 때문에 더 행복 할 것입니다. 타이핑을 입력했기 때문에 스크립트 실패가 발생한 횟수를 잃어 버렸습니다. </the></p>.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<ip> 같은 페이지에서 여러 스크립트가 작동하도록합니다
<ip> 여러 스크립트가 함께 작동하지 않으면 스크립트가 주어진 요소에서 동일한 이벤트에 대해 이벤트 핸들러를 할당하기를 원하기 때문입니다. 각 요소는 각 이벤트에 대해 하나의 핸들러 만 가질 수 있으므로 스크립트는 서로의 이벤트 처리기를 무시합니다.
솔루션 <p> </p>
<sus> 일반적인 용의자는 페이지의 스크립트만이 이벤트를 사용할 수 있기 때문에 Window Object의로드 이벤트 핸들러입니다. 두 개 이상의 스크립트를 사용하는 경우 마지막 스크립트가 이전에 온 스크립트를 무시합니다.
<multiple> 우리는 다음과 같이 단일로드 핸들러 내부에서 여러 기능을 호출 할 수 있습니다.
<p>
<we> 그러나이 코드를 사용하면로드 시간에 필요한 모든 것을 수행 해야하는 단일 코드에 연결되어 있습니다. 더 나은 솔루션은 다른 핸들러와 충돌하지 않는로드 이벤트 핸들러를 추가하는 수단을 제공합니다.
<single> 다음 단일 함수를 호출 할 때, 우리는 충돌하지 않고 수의로드 이벤트 핸들러를 할당 할 수 있습니다.
</single></we></p>
<is>이 함수가 제자리에 있으면 여러 번 사용할 수 있습니다.
<h5>
<idea> 당신은 아이디어를 얻습니다!
</idea>
</h5> 토론 <p>
<cript cript> JavaScript에는 이벤트 처리기와 유사하게 작동하는 이벤트 리스너 추가 (및 제거) 방법이 포함되어 있지만 여러 리스너가 요소에서 단일 이벤트를 구독 할 수 있습니다. 불행히도, 이벤트 리스너의 구문은 인터넷 익스플로러에서 다른 브라우저와는 완전히 다릅니다. 즉, IE는 독점적 인 방법을 사용하는 경우 다른 방법은 W3C 표준을 구현합니다. 우리는이 이분법을 자주 만나게 될 것이며, 13 장, 기본 동적 HTML에서 자세히 논의 할 것입니다.
<c> w3c 표준 방법을 addeventListener : 라고합니다
</c></cript></p>
<method> IE 메소드는 첨부 이벤트라고합니다 :
<p>
보시다시피, 표준 구조는 이벤트 이름 ( "on"접두사없이)을 취한 다음 이벤트가 발생할 때 호출 될 함수와 이벤트 버블 링을 제어하는 인수 (13 장, 기본 동적 HTML 참조)가 이어집니다. IE 메소드는 이벤트 <em> handler 이름 ( " 이것을 종합하려면, 우리는 그것을 사용하려고 시도하기 전에 각 방법의 존재를 확인하기 위해 몇 가지 테스트를 추가해야합니다. 다양한 유형의 데이터 ( "문자열", "번호", "부울", "개체", "배열", "함수"또는 "정의되지 않은")를 식별하는 JavaScript 연산자 Typeof를 사용하여이를 수행 할 수 있습니다. 존재하지 않는 메소드는 "정의되지 않은"을 반환합니다
<p>
<additional> 추가 합병증이 하나 있습니다. 오페라에서는 여러 이벤트 리스너를 트리거 할 수있는로드 이벤트가 창이 아닌 문서 개체에서 나옵니다. 그러나 구형 모질라 브라우저 (예 : Netscape 6)에서는 작동하지 않기 때문에 문서 만 사용할 수 없습니다. 이 단점을 통해 경로를 작성하려면 Window.AdDeventListener를 테스트 한 다음 Document.AddeventListener, 그런 다음 Window.ATTACHEVENT, 해당 순서대로 테스트해야합니다.
<br> 마지막으로, 이러한 방법을 지원하지 않는 브라우저 (Mac IE 5, 실제로)의 경우, 폴백 솔루션은 여러 구식 이벤트 핸들러를 함께 체인하여 이벤트가 발생할 때 차례로 호출되는 것입니다. 우리는 이벤트가 발생할 때 새로 할당 된 핸들러를 호출하기 전에 기존 핸들러를 호출하는 새로운 이벤트 핸들러를 동적으로 구성하여이를 수행합니다. (이 기술은 Simon Willison에 의해 개척되었습니다.) </additional></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<you> 이것이 어떻게 작동하는지에 대한 세부 사항을 이해하지 못하면 걱정하지 마십시오. 13 장, 기본 동적 HTML에서 훨씬 자세히 설명 할 것입니다. 그곳에서 우리는 이벤트 청취자가로드 이벤트뿐만 아니라 모든 종류의 이벤트 중심 스크립트에 유용하다는 것을 알게 될 것입니다.
<av> javaScript 소스 코드가 숨겨져
<ever> 자랑스러워하는 것을 만든 적이 있다면 지적 재산을 보호하려는 욕구를 이해할 수 있습니다. 그러나 웹의 JavaScript는 본질적으로 오픈 소스 언어입니다. 소스 형식의 브라우저에 이루어 지므로 브라우저가 실행할 수 있다면 사람이 읽을 수 있습니다. <p>.
<few> 웹에는 소스 코드 암호화를 제공한다고 주장하는 몇 가지 응용 프로그램이 있지만 실제로는 다른 코더가 몇 초 안에 해독 할 수없는 소스 코드를 암호화 할 수있는 일이 없습니다. 실제로, 이러한 프로그램 중 일부는 실제로 문제를 일으 킵니다. 종종 느리거나 효율적이지 않거나 평범한 부서지는 방식으로 코드를 재구성합니다. 내 조언? 전염병처럼 그들에게서 멀리 떨어져 있습니다. </few></p>
<the> 그러나 여전히 코드를 숨기려는 욕구는 여전히 남아 있습니다. 명백한 암호화가 아니라면 사용자가 볼 수있는 코드를 난독 화하기 위해 할 수있는 일이 있습니다.
솔루션 <p> </p>
모든 의견과 불필요한 공백을 제거한 코드는 읽기가 매우 어렵고 예상대로 그러한 코드에서 개별 기능을 추출하는 것은 매우 어렵습니다. 이러한 방식으로 스크립트를 압축하는 간단한 기술은 가장 결정적인 해커를 제외한 모든 것을 포기할 수 있습니다. 예를 들어,이 코드를 가져 가십시오 : <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<p>
<press> 우리는 불필요한 공백을 제거하여 다음 두 줄로 해당 코드를 압축 할 수 있습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<that> 그러나 그 중요한 단어 - 불필요한 단어를 기억하십시오. var 및 typeof 이후의 단일 공간과 같은 일부 공백이 필수적입니다.
<p> 토론 </p>
<adv>이 관행은 난독 화의 이점과는 별다른 장점이 있습니다. 의견이 벗겨진 스크립트와 불필요한 공백은 더 작습니다. 따라서 로딩이 빠르며 더 빨리 처리 할 수 있습니다. <p>
<remember> 그러나 코드는 세미콜론 라인 터미네이터 및 브레이스를 사용하여 엄격하게 포맷해야한다는 것을 기억하십시오 (“브레이스와 세미콜론 사용 (일관된 코딩 실습)”이라는 섹션에서 논의한 바와 같이); 그렇지 않으면, 라인 브레이크를 제거하면 코드 라인이 함께 실행되고 궁극적으로 오류가 발생합니다.
<com> 압축을 시작하기 전에 스크립트 사본을 만들어야합니다. 나는 그것이 명백해 보인다는 것을 알고 있지만, 나는이 실수를 많이했다. 요즘 내가하는 일은 스크립트를 완전히 간격하고 댓글을 달린 형태로 작성하고 유지 한 다음 게시되기 직전에 많은 검색/교체 표현을 통해 실행하는 것입니다. 일반적으로 myscript.js와 myscript-commented.js라는 스크립트의 사본 또는 비슷한 것.
<back> 우리는 20 장 에서이 주제로 돌아와서 페이스를 유지하면서 스크립트의 속도와 효율성을 향상시키고 필요한 물리적 공간의 양을 줄이기위한 다양한 기술 중에서 이것을 논의 할 것입니다. <em>.
<a> 스크립트 디버깅
<is> 디버깅은 버그를 찾고 (희망적으로) 고정하는 과정입니다. 대부분의 브라우저에는 일종의 버그보고가 내장되어 있으며 몇 개의 외부 디버거도 조사 할 가치가 있습니다.
<ows> 브라우저의 내장 오류보고
<mo> 오페라, 모질라 브라우저 (예 : Firefox) 및 Internet Explorer는 모두 적절한 버그보고 기능이 내장되어 있지만 Opera와 Mozilla의 디버깅 도구는 가장 유용합니다. </mo></ows></is></a></em>
</back></com></remember></p> Opera <p>
도구> 고급> JavaScript 콘솔에서 JavaScript 콘솔을 엽니 다. 도구> 기본 설정> 고급> 컨텐츠로 이동 한 다음 JavaScript 옵션 버튼을 클릭하여 대화 상자를 열고 오류에서 JavaScript 콘솔 열기를 확인하여 오류가 발생할 때 자동으로 열도록 설정할 수도 있습니다.
</p> Firefox 및 기타 Mozilla 브라우저 <p>
도구> JavaScript 콘솔에서 JavaScript 콘솔을 엽니 다
Windows 용 Internet Explorer </p>
도구> 인터넷 옵션> 고급 옵션으로 이동하여 옵션 비활성화 스크립트 디버깅을 선택 취소 한 다음 오류가 발생할 때마다 대화 상자가 팝업되도록 모든 스크립트 오류에 대한 알림 표시 옵션을 확인하십시오.
<p> Mac의 인터넷 익스플로러
탐색기> 기본 설정> 웹 브라우저> 웹 컨텐츠로 이동하여 스크립팅 오류 알림 옵션을 확인하십시오.<doesn> safari는 기본적으로 버그보고가 포함되어 있지 않지만 최근 버전에는 JavaScript 콘솔을 포함한 "비밀"디버그 메뉴가 있으며 다음 터미널 명령을 입력하여 활성화 할 수 있습니다. ($는 명령 프롬프트를 나타내고 입력해서는 안됩니다.) <p>
</p>
<use> 당신은 또한 Safari Enhancer라는 확장자를 사용할 수 있습니다. 여기에는 JavaScript 메시지를 Mac OS 콘솔에 덤프하는 옵션이 포함됩니다. 그러나이 메시지는 그다지 도움이되지 않습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<br> 다양한 브라우저의 콘솔 메시지를 이해하면 각 브라우저가 다른 정보를 제공하기 때문에 약간의 연습을 할 수 있습니다. 오류의 예는 다음과 같습니다. 안개화 된 기능 호출 : <p>
</p>
<gives> Firefox는 간결하지만 매우 정확한 보고서를 제공합니다. 여기에는 오류가 발생한 줄 번호와 그림 1.1과 같이 설명이 포함되어 있습니다.
<p> </p>
<.> 그림 1.1. javaScript 오류는 Firefox <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 의 콘솔입니다
그림 1.2와 같이, "Opera의 JavaScript 콘솔"이 보여줍니다. Opera는 오류가 발생한 이벤트에 대한 백 트레이스, 그것이 발생한 줄 알림 및 설명을 포함하여 극도로 장황한 보고서를 제공합니다. <p>.
<ace ace> 백 트레이스는 원래 다른 코드에서 호출 한 코드에서 오류가 발생할 때 도움이됩니다. 예를 들어, 이벤트 핸들러가 두 번째 함수를 호출하는 기능을 호출하는 경우,이 시점에서 오류가 발생합니다. Opera의 콘솔은이 프로세스를 각 단계를 통해 원래 이벤트 또는 전화로 추적합니다.
<er> 인터넷 익스플로러는 그림 1.3에 표시된 상당히 기본적인 종류의 보고서를 제공합니다. 통역사가 오류가 발생한 선 (실제 문제의 실제 위치에 가깝거나 가까이 있거나 가깝지 않을 수도 있음)과 오류 유형의 요약을 제공하지만 오류 자체의 세부 사항을 설명하지는 않습니다. (Internet Explorer는 외부 JavaScript 파일에서 오류를 찾는 데 특히 좋지 않습니다. 종종 오류 위치가 실제로 HTML 파일에 스크립트가로드되는 줄의 수가 될 것입니다.) </er></ace></p>.
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345112726.png" class="lazy" alt="스크립트 스마트 : 처음부터 품질 자바 스크립트" >
<.> 그림 1.2. Opera <br>의 JavaScript 콘솔
<em> </em>
<.> 그림 1.3. Windows의 JavaScript 콘솔 IE </.></.></p>
<gather> 아마도 당신이 모은 것처럼, 나는 인터넷 익스플로러의 오류보고에 지나치게 깊은 인상을받지는 않지만 아무것도 아닌 것보다 훨씬 낫습니다. 적어도 오류가 발생했다는 것을 알고 있습니다. <p>.
<function> 경고 함수는 오류를 분석하는 매우 유용한 수단입니다. 스크립트의 어느 시점에서나 사용하여 객체 및 변수를 조사하여 예상되는 데이터를 포함하는지 확인할 수 있습니다. 예를 들어, 여러 조건부 분기가있는 함수가있는 경우 각 조건 내에 경고를 추가하여 실행되는지 확인할 수 있습니다.
<p>
<for> 어쩌면 수년간의 가치는 숫자로 돌아 오지 않을 것입니다. 스크립트의 시작에 변수를 테스트하여 어떤 유형이 있는지 알 수있는 경고를 추가 할 수 있습니다.
</for></p>
<you> 이론적으로는 매우 긴 데이터 문자열이 일부 정보가 넓은 대화 상자를 만들 수 있지만 일부 정보가 창 밖에 클립 될 수있는 광범위한 대화를 만들 수 있지만 경고 대화 상자에 많은 정보를 넣을 수 있습니다. 라인 브레이크를위한 N과 같은 Escape 문자로 출력을 형식화하여이를 피할 수 있습니다.
try-catch <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> 사용 <atch>
<atch> Try-Catch 구성은 "무언가를 시도"하기 위해 스크립트를 얻는 매우 유용한 방법으로, 발생할 수있는 오류를 처리 할 수 있습니다. 기본 구성은 다음과 같습니다
<p>
<sure> 오류가 어디에서 왔는지 잘 모르겠다면, 매우 큰 코드 블록 주위에 시도를 포장하여 일반적인 실패를 가두는 다음 해당 블록 내에서 점진적으로 작은 코드 덩어리 주위를 조일 수 있습니다. 예를 들어, 함수의 전반부 (코드의 편리한 지점에서)와 후반에 오류가 발생하는 위치를 확인하기 위해 트리 트 브레이스를 랩핑 할 수 있습니다. 그런 다음 편리한 시점에서 용의자를 반으로 나누고 문제가있는 선을 격리 할 때까지 계속 진행할 수 있습니다. </sure></p>.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<use> 종종, 나는 in iterator를 사용하여 전체 객체를 통과하고 그 말이 무엇인지 알아냅니다.
<p>
<page> 페이지 또는 창에 쓰기
<ining> 디버깅 중에 많은 데이터를 검사하거나 복잡한 방식으로 형식의 데이터를 처리하는 경우 많은 경고 대화 상자를 다루는 것보다 해당 데이터를 페이지 나 팝업 창에 직접 작성하는 것이 좋습니다. 특히 루프에서 데이터를 검사하는 경우 수백 개의 대화 상자를 생성 할 수 있으며, 각 대화는 수동으로 해고해야합니까? 매우 지루한 과정입니다.
<s> 이러한 종류의 상황에서는 요소의 InnerHTML 속성을 사용하여 데이터를 페이지에 작성할 수 있습니다. 다음은 배열 (데이터)의 내용을 사용하여 목록을 작성한 다음 테스트 DIV에 적어 두는 예입니다.
</s><p>
<write> 우리는 또한 팝업에 데이터를 쓸 수 있습니다. 페이지에 넣을 편리한 장소가 없으면 유용합니다.
</write></p>
<at> 당신은 당신이 좋아하는 것처럼 출력을 포맷 할 수 있고, 그것을 사용하여 어떤 방식으로 데이터를 구조화하여 오류를 더 쉽게 찾을 수 있습니다.
<with> 소량의 데이터로 작업 할 때는 기본 제목 요소에 데이터를 작성하여 비슷한 이점을 얻을 수 있습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<is>이 최종 접근법은 SetInterval 함수에 의해 처리되는 값 (14 장, 시간 및 움직임에서 제대로 충족하는 비동기 타이머)과 같이 지속적으로 또는 빠르게 변경되는 데이터를 추적 할 때 가장 유용합니다. <p>.
외부 디버거를 사용하는 <al>
<two> 나는 두 개의 디버거를 추천 할 수 있습니다 :
</two></al></p> <p>
Mozilla와 Firefox의 venkman
Windows Internet Explorer 용 Microsoft Script Debugger
</p>
<ugg> 외부 디버거는 스크립트를 분석하는 훨씬 더 자세한 방법이며 브라우저 내 상대보다 훨씬 더 큰 기능을 갖습니다. 외부 디버거는 특정 지점에서 스크립트 실행을 중지하거나 특정 속성을 시청하여 변경 사항에 대한 정보를 제공 할 수 있지만 발생할 수 있습니다. 여기에는 또한 코드를 "스텝을 통과"할 수있는 기능도 포함되어 있으며, 잠시만 발생하거나 격리하기 어려운 오류를 찾는 데 도움이됩니다.
<ugg> 외부 디버거는 복잡한 소프트웨어이며 개발자가 올바르게 사용하는 방법을 배우려면 시간이 걸릴 수 있습니다. 논리적 오류를 강조하는 데 매우 유용 할 수 있으며, 학습 도구로서 자체적으로 가치가 있지만 브라우저 비 호환성을 도울 수있는 능력이 제한적입니다. 원하는 버그가 디버거가 지원하는 브라우저에있는 경우에만 유용합니다! <p>.
<n> 엄격한 경고 </n></p>
<the> Firefox에서 JavaScript 콘솔을 열면 오류 및 경고를 표시하는 옵션이 포함되어 있음을 알 수 있습니다. 경고는 그 자체로 잘못되지는 않지만 자동 오류 처리에 의존하거나, 더 이상 사용되지 않은 구문을 사용하거나, 다른 방법으로는 ECMAScript 사양과 관련이 없음을 코드에 알립니다. (이러한 경고를 보려면 주소를 입력하여 엄격한보고를 활성화해야 할 수도 있습니다. 구성 및 설정 javascript.options.strict to true.)
예를 들어 <the> 변수 과일은 아래 코드에서 두 번 정의됩니다.
<p>
<om> 우리는 두 번째 var를 생략해야했습니다. VAR은 처음으로 변수를 선언하는 데 사용되기 때문입니다. 그림 1.4,“Firefox의 JavaScript 경고 콘솔”은 JavaScript 콘솔이 경고로 오류를 강조하는 방법을 보여줍니다.
</om></p> <ul>
<.> 그림 1.4. Firefox의 JavaScript 경고 콘솔 <li>
<cod> 이와 같은 경고를 일으킬 수있는 몇 가지 코딩 실수가 있습니다. 예를 들면 : </cod>
</li>
<li> <ul>
<l> 변수를 재고-이것은 방금 본 것처럼“var 이름의 재개”라는 경고를 만듭니다.
<decl> 처음에 변수를 선언하지 않으면 -이 감독은“선언되지 않은 변수 이름에 대한 과제”라는 경고를 만듭니다. 예를 들어, 우리 코드의 첫 번째 줄이 단순히 fruit = 'mango'; 를 읽는 경우 이것은 발생할 수 있습니다.
<the> 객체의 존재를 가정 할 때 -이 가정은“정의되지 않은 속성 이름에 대한 참조”라는 경고를 생성합니다.
<li>
예를 들어, <a>와 같은 테스트 조건은 if (document.getElementById)와 같은 테스트 조건이 getElementById 메소드의 존재를 가정하고 JavaScript의 자동 오류 처리 기능 이이 메소드가 존재하지 않는 브라우저에서 존재하지 않는 메소드를 False로 변환한다는 사실에 대해 은행입니다. 경고를 보지 않고 동일한 목적을 달성하기 위해서는 if (typeof document.getElementById! = 'undefined')를 사용하여 더 구체적입니다.
<some> 또한 기능 관련 경고도 있으며, 개인적으로 좋아하는“쓸모없는 표현”을 포함하는 다른 기타 경고가 있습니다.
</some></a>
</li>
<run> 주제에 대한 철저한 요약을 위해 Alex Vincent의 JavaScript 엄격한 경고를 다루는 기사를 추천합니다.
<don> 경고는 스크립트가 작동하는 것을 방해하지 않지만 경고를 피하기 위해 노력하면 더 나은 코딩 실습을 채택하는 데 도움이되므로 궁극적으로 효율성 혜택을 창출하는 데 도움이됩니다. 예를 들어, 엄격한 경고가 없으면 스크립트는 Mozilla에서 더 빨리 실행됩니다. 20 장에서 다시 볼 주제는 페이스를 유지합니다. <li>.
유형 변환 테스트 </li>
<li> 정의되지 않은 값을 테스트하기 위해 유형 변환에 의존해서는 안되지만 ecmascript 사양에 NULL이 False를 평가해야하기 때문에 NULL이 될 수있는 값에 대해서는 완벽하게 괜찮습니다. 예를 들어, 위와 같이 연산자 유형을 사용하여 이미 GetElementByID의 존재를 확립 한 결과, GetElementByID가 DOM에서 존재하지 않는 요소에 대해 NULL을 반환하기 때문에 아래에 표시된 개별 요소를 테스트하는 것이 안전합니다.
</li>
</don></run></the></decl></l>
</ul> 요약
이 장에서는 코드를 쉽게 읽고 관리 할 수 있도록 스크립팅에 대한 모범 사례 접근 방식에 대해 이야기했으며 지원되지 않는 장치에서 우아하게 저하 될 수 있습니다. 또한이 책의 거의 모든 솔루션에 사용할 유비쿼터스로드 이벤트 리스너를 포함하여 유용한 스크립트를 구축하는 데 필요한 기술 중 일부를 소개하기 시작했습니다.
<some> 우리는 이미 꽤 진보 된 것들을 다루었으므로 일부를 취하기가 어려웠는지 걱정하지 마십시오. 나머지 장을 진행하면서 여기에서 소개 한 모든 개념과 기술로 돌아올 것입니다. <p>.
</p> <nav> 5 장. 문서 객체 모델 탐색 <h5>
</h5>
브라우저는 JavaScript 프로그램이 문서 개체 모델 (DOM)을 통해 웹 페이지의 요소에 액세스 할 수 있습니다.
<be> DOM은 상호 연결된 노드로 구성된 나무로 생각할 수 있습니다. HTML 문서의 각 태그는 노드로 표시됩니다. 해당 태그 내부에 중첩 된 모든 태그는 어린이로 연결된 노드 또는 트리의 가지입니다. 이러한 각 노드를 요소 노드라고합니다. (엄밀히 말하면, 각 요소 노드는 한 쌍의 태그-요소의 시작 및 종료 태그 (예 : <p> 및 </p>) 또는 단일자가 폐쇄 태그 (예 : <br> 또는 <br> xhtml에서)를 나타냅니다.) 다른 유형의 노드가 있습니다. 가장 유용한 것은 문서 노드, 텍스트 노드 및 속성 노드입니다. 문서 노드는 문서 자체를 나타내며 DOM 트리의 루트입니다. 텍스트 노드는 요소의 태그 사이에 포함 된 텍스트를 나타냅니다. 속성 노드는 요소의 오프닝 태그 내부에 지정된 속성을 나타냅니다. 이 기본 HTML 페이지 구조를 고려하십시오
<p>
이 페이지의 DOM은 그림 5.1,“트리 계층으로 시각화 된 간단한 HTML 페이지의 DOM 구조”로 시각화 될 수 있습니다.
모든 페이지에는 문서 노드가 있지만 후손은 문서 자체의 내용에서 파생됩니다. 요소 노드, 텍스트 노드 및 속성 노드를 사용하여 페이지의 모든 정보는 JavaScript를 통해 액세스 할 수 있습니다.
<n> DOM은 HTML 및 JavaScript로 제한되지 않습니다. W3C DOM 사양 사이트가 다음을 설명하는 방법은 다음과 같습니다.
<model> 문서 개체 모델은 프로그램 및 스크립트가 문서의 내용, 구조 및 스타일에 동적으로 액세스하고 업데이트 할 수있는 플랫폼 및 언어 중립 인터페이스입니다.
<though> 따라서 JavaScript와 HTML의 혼합물이 DOM이 사용되는 기술의 가장 일반적인 조합이지만,이 장에서 얻은 지식은 여러 다른 프로그래밍 언어 및 문서 유형에 적용될 수 있습니다. </though></model></n></p>
<make> "도메인의 마스터"로 만들기 위해이 장에서는 웹 페이지에서 찾고있는 요소를 찾는 방법을 설명하고 변경하거나 재 배열하거나 완전히 지우는 방법을 설명합니다. <p>.
</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<.> 그림 5.1. 트리 계층으로 시각화 된 간단한 HTML 페이지의 DOM 구조 <p> </p>
<ements> 액세스 요소
액세스는 제어, 제어는 전력이며 전력 프로그래머입니까? 따라서 웹 페이지에있는 모든 것에 액세스해야합니다. 다행히 JavaScript는 몇 가지 방법과 속성 만 사용하여 페이지의 모든 요소에 액세스 할 수 있습니다.
솔루션 </ements></.></make></be></nav></some>
</li></.>
</ul></the></the></ugg></ugg></is></with></at></ining></page></p> <p><possible> 로드맵과 같은 HTML 문서를 탐색 할 수는 있지만 집에서 시작하여 한 번에 하나의 노드를 향해 목적지를 향해 시작 하는가? 이것은 일반적으로 많은 코드가 필요하기 때문에 요소를 찾는 비효율적 인 방법이며, 문서 구조의 변경은 일반적으로 스크립트를 다시 작성해야 함을 의미합니다. 빠르고 쉽게 무언가를 찾고 싶다면 손 뒤쪽에 문신을 해야하는 방법은 document.getElementById입니다.
<that> 올바른 마크 업이 있다고 가정하면 GetElementById를 사용하면 고유 ID 속성 값으로 모든 요소에 즉시 액세스 할 수 있습니다. 예를 들어, 웹 페이지 에이 코드가 포함되어 있다고 상상해보십시오
<p>
<the> A 요소의 ID 속성을 사용하여 요소 자체에 직접 액세스 할 수 있습니다.
</the></p>
<the> 변수 요소의 값은 이제 A 요소를 참조합니다. ElementRef에서 수행하는 모든 작업은 정확한 하이퍼 링크에 영향을 미칩니다.
<p>
<seen> 이름에서 볼 수 있듯이 GetElementsByTagName은 태그 이름을 가져 와서 해당 유형의 모든 요소를 반환합니다. 이 HTML 코드가 있다고 가정하십시오
</seen></p>
<ieve> 우리는 다음과 같은 각 하이퍼 링크가 포함 된 컬렉션을 검색 할 수 있습니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 변수 앵커의 값은 이제 요소 모음이 될 것입니다. 컬렉션은 컬렉션의 각 항목이 사각형 브래킷 표기법을 사용하여 참조되며 항목은 0에서 수치로 인덱싱된다는 점에서 어레이와 유사합니다. GetElementsByTagName이 반환 한 컬렉션은 소스 순서별로 요소를 정렬하므로 각 링크를 참조 할 수 있습니다.
<p>
<you>이 컬렉션을 사용하면 요소를 반복하고 요소 노드의 클래스 이름 속성을 사용하여 클래스를 할당하는 등 요소를 반복하고 작업을 수행 할 수 있습니다.
</you></p>
<el> 문서 노드에서만 호출 될 수있는 getElementById와 달리 getElementsByTagName 메소드는 모든 단일 요소 노드에서 사용할 수 있습니다. 특정 요소에서 실행하여 getElementsByTagName 메소드의 범위를 제한 할 수 있습니다. getElementsByTagName은 메소드가 호출 된 요소의 후손 인 요소 만 반환합니다.
<two> 목록이 두 개 있지만 한 목록의 링크에 새 클래스를 할당하려면 부모 목록에서 getElementsByTagName을 호출하여 해당 요소를 대상으로 할 수 있습니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<list> 별 목록을 타겟팅하려면 부모 UL 요소에 대한 참조를 얻은 다음 직접 getElementsByTagName을 호출해야합니다.
<p>
<the> 가변 스타 랜더의 값은 페이지의 모든 요소 모음 대신 별이 아닌 목록 내부의 A 요소 모음이 될 것입니다.
dom 0 컬렉션 </the></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<p> HTML 문서의 많은 "특별한"요소는 훨씬 더 직접적인 수단으로 액세스 할 수 있습니다. 문서의 본문 요소는 문서로 액세스 할 수 있습니다. 문서의 모든 양식 모음은 document.forms에 있습니다. 문서의 모든 이미지는 document.images에서 찾을 수 있습니다.
<em> 실제로,이 컬렉션의 대부분은 DOM이 W3C에 의해 표준화되기 전부터 주변에 있었고 일반적으로 DOM 0 특성이라고합니다.
이러한 기능의 초기 구현이 표준화되지 않았기 때문에 이러한 컬렉션은 표준 준수로 이동하는 브라우저에서 신뢰할 수없는 것으로 입증되었습니다. 예를 들어 일부 Mozilla 브라우저 (예 : Firefox)의 초기 버전은 XHTML 문서에서 이러한 컬렉션을 지원하지 않았습니다.
</em> 오늘날의 브라우저는 일반적으로 이러한 컬렉션을 지원하는 데 도움이됩니다. 그러나 문제가 발생하면 관련 요소에 액세스 할 수있는 더 많은 장점 GetElementsByTagName 방법을 시도해 볼 가치가 있습니다. 예를 들어 document.body 대신 : 를 사용할 수 있습니다
</p> var body = document.getElementsByTagName ( "body") [0]; <p> <em>
</em> 토론
<need> 요소별로 DOM 계층 요소를 밟아야하는 경우 각 노드에는 관련 노드에 액세스 할 수있는 몇 가지 속성이 있습니다.
</need></p> <p>
<lode.childnodes- x>를 포함하여 지정된 노드의 각 어린이에 대한 소스 주문 참조가 포함 된 컬렉션.
<lode.firstchild>
<lode.lastchild>
<lode.parentnode>
<lode.nextsibling>
<lode.previoussibling>와 동일한 레벨에있는 이전 요소
<p>
<these> 이러한 속성 중 하나라도 특정 노드에 대해 존재하지 않으면 (예 : 부모의 마지막 노드에는 다음 형제가 없음) NULL의 값이 있습니다. <em>.
<at>이 간단한 페이지를 살펴보십시오 :
</at></em>
<with> id Star2가있는 목록 항목은 다음과 같은 표현식을 사용하여 참조 할 수 있습니다.
</with></these></p>
공백 노드 <p> <em>
일부 브라우저는 텍스트 문자열 (예 : HTML 파일)에서 해석 된 DOM 구조의 요소 노드간에 공백 노드를 생성합니다. 공백 노드는 소스 파일에 작성된 방식으로 코드를 형식화하는 데 도움이되는 공백 (탭, 공백, 새 줄) 만 포함하는 텍스트 노드입니다.
</em> 위의 속성을 사용하여 노드별로 DOM 노드를 가로 질러이면 항상 이러한 공백 노드를 허용해야합니다. 일반적으로 검색 한 노드가 요소를 분리하는 공백 노드가 아니라 요소 노드인지 확인하는 것을 의미합니다.</p>
<p> 노드가 요소 노드인지 텍스트 노드인지 확인하는 두 가지 쉬운 방법이 있습니다. 텍스트 노드의 Nodename 속성은 항상 "#text"인 반면, 요소 노드의 Nodename은 요소 유형을 식별합니다. 그러나 요소 노드와 텍스트 노드를 구별 할 때 NodeType 속성을 쉽게 확인하는 것이 더 쉽습니다. 요소 노드는 <have have> <em> nodetype가 1이고 텍스트 노드의 NodeType은 3입니다. 요소를 검색 할 때이 지식을 테스트로 사용할 수 있습니다.
</em> 예 5.9. access_element4.js (발췌)
</have></p>
var str2 = document.getElementById ( "star1"). nextibling; <p>
<em>
while (star2.nodeType == "3")
{<.>
star2 = star2.nextsibling; <br>
} <br>
<prop> 이러한 DOM 속성을 사용하면 루트 HTML 요소에서 여행을 시작하고 네트워크가 깊은 필드 세트의 전설에 묻힐 수 있습니까? 노드를 따르는 문제 일뿐입니다. <br>.
<and> 요소 및 텍스트 노드 생성
<cript> JavaScript는 DOM에서 기존 요소를 수정하는 능력이 없습니다. 또한 새로운 요소를 만들어 페이지 구조 내에 어디에나 배치 할 수 있습니다. <br>
솔루션 <br> <br>
<br>
</cript></and></prop></.></em>
<new> 변수 Newanchor는 새로운 A 요소가 될 것입니다.
XML MIME 유형 </new></p> MIME 유형의 응용 프로그램/XHTML XML (또는 다른 XML MIME 유형)이있는 문서에 사용하기 위해 JavaScript를 코딩하는 경우 CreateElement 대신 CreateElementns를 사용하여 요소를 작성하는 네임 스페이스를 지정해야합니다.
<p>
</p> 이 차이는 removeelement/remodelementns 및 getAttribute/getAttributens와 같은 다수의 DOM 방법에 적용됩니다. 그러나이 책에서 이러한 방법의 네임 스페이스 강화 버전을 사용하지 않을 것입니다.
Simon Willison은 웹 사이트에서 JavaScript 및 다양한 Mime 유형으로 작업하는 것에 대한 간략한 설명을 제공합니다.
<goes> 요소 안에 들어가는 텍스트는 실제로 요소의 자식 텍스트 노드이므로 별도로 생성해야합니다. 텍스트 노드는 요소 노드와 다르므로 자체 생성 메소드 인 CreateTextNode : 가 있습니다.
<h5>
<ify> 기존 텍스트 노드를 수정하는 경우 NoDevalue 속성을 통해 포함 된 텍스트에 액세스 할 수 있습니다. 이를 통해 텍스트 노드 안에 텍스트를 가져 와서 설정할 수 있습니다.
</ify>
</h5>
<the> 변수 OldText의 값은 이제 "Monoceros"이며, TextNode 내부의 텍스트는 이제 "pyxis"입니다.
<ert>는 AppendChild 메소드를 사용하여 요소 노드 또는 텍스트 노드를 기존 요소의 마지막 자식으로 삽입 할 수 있습니다. 이 방법은 모든 요소의 기존 어린이를 따라 새 노드를 배치합니다.
<ment> html 의이 조각을 고려하십시오 :
<p>
<dom> 우리는 DOM 메소드를 사용하여 단락 끝에서 다른 링크를 생성하고 삽입 할 수 있습니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 변수 Newchild의 값은 새로 삽입 된 요소에 대한 참조가 될 것입니다.
<to>이 코드가 HTML 코드로 실행 된 후 DOM의 상태를 번역하려면 다음과 같습니다.
<p>
<ify> 우리는 새로운 요소에 대한 속성을 지정하지 않았으므로 현재 어디에서나 연결되지 않습니다. 속성을 지정하는 프로세스는 "요소의 속성을 읽고 쓰고 쓰는"섹션에서 곧 설명됩니다.
</ify></p> 토론 <p>
<basic> 새 요소 또는 텍스트 노드를 웹 페이지에 삽입 할 수있는 세 가지 기본 방법이 있습니다. 당신이 사용하는 접근법은 새 노드를 삽입하려는 지점에 따라 달라집니다 : 요소의 마지막 자식, 다른 노드 이전 또는 노드를 대체하는 것입니다. 마지막 아이처럼 요소를 추가하는 과정이 위에서 설명되었습니다. 상위 요소의 삽입 메소드를 사용하여 기존 노드 전에 노드를 삽입 할 수 있으며, 상위 요소의 RelfaceChild 메소드를 사용하여 노드를 교체 할 수 있습니다.
<use> 삽입물을 사용하려면 삽입하려는 노드와 삽입하려는 노드에 대한 참조가 있어야합니다. 이 HTML 코드를 고려하십시오 :
</use></basic></p>
<ert> 우리는 부모 요소 (단락)에서 insertbe를 호출하여 기존 링크 앞에 새 링크를 삽입 할 수 있습니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 변수 Newchild의 값은 새로 삽입 된 요소에 대한 참조가 될 것입니다.
<to>이 작업 후 DOM의 상태를 HTML로 변환하려면 다음과 같이 보일 것입니다.
<p>
<could> 대신, 우리는 대체물을 사용하여 기존 링크를 완전히 바꿀 수 있습니다.
</could></p>
<then> 그러면 Dom은 다음과 같이 보일 것입니다
<p>
<em>
</em>
<of> 요소의 유형 변경
<ed> 주문 목록이 약간 변하지 않은 느낌이 있습니까? 제목에 단락 부러움이 있습니까? 약간의 JavaScript 지식을 사용하면 어린이의 구조를 보존하면서 요소의 유형을 완전히 변경할 수 있습니다.
솔루션 </ed></of></p> <p>
<straight> 요소 유형을 간단하고 간단한 방법은 없습니다. 이 업적을 달성하려면 약간의 저글링 행위를 수행해야합니다. </straight></p>
<ume> 우리 가이 단락을 div로 변경하고 싶다고 가정 해 봅시다.
<p>
<create> 우리는 새로운 div를 만들고, 각 단락의 아이들을 그것으로 옮기고, 새로운 요소를 구식으로 바꾸어야합니다 : .
</create></p>
<am> 여기서 낯선 선은 단락의 어린이들 각각에 대해 클론이 만들어지는 지점이어야합니다. Clonenode 메소드는 호출되는 노드의 동일한 사본을 생성합니다. 이 방법을 통과시킴으로써 우리는 해당 요소의 모든 어린이들이 요소 자체와 함께 복사되기를 원한다는 것을 나타냅니다. Clonenode를 사용하여 새로운 DIV에서 원래 요소의 어린이를 반영한 다음 복사가 완료되면 단락을 제거 할 수 있습니다.<ing> 클로닝 노드는 어떤 상황에서는 유용하지만이 특정 문제에 접근하는 더 깨끗한 방법이 있음이 밝혀졌습니다. 기존 단락의 자식 노드를 새로운 Div로 간단히 옮길 수 있습니다. DOM 노드는 한 번에 하나의 부모 요소에만 속할 수 있으므로 DIV에 노드를 추가하면 단락에서 노드를 제거합니다.
<p>
</p> dom <script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script> 의 노드 구조를 변경하십시오
<p> 컬렉션의 요소는 DOM에서 변경이 발생할 때마다 자동으로 업데이트됩니다. 변경이 발생하기 전에 해당 컬렉션을 변수로 복사하더라도 컬렉션이 자동으로 업데이트됩니다. 따라서 DOM에서 작업 중이었던 컬렉션에 포함 된 요소를 DOM에서 제거하면 컬렉션에서 요소 참조도 제거됩니다. 이렇게하면 컬렉션의 길이와 제거 된 요소 이후에 나타나는 요소의 인덱스가 변경됩니다.
<em> 노드를 새로운 상위 요소로 이동하는 등 DOM의 노드 구조에 영향을 미치는 작업을 수행 할 때는 반복 프로세스에주의해야합니다. 위의 코드는 자녀가 재배치 될 때마다 Childnodes 컬렉션의 길이가 하나씩 감소하고 컬렉션의 모든 요소가 이동하기 때문에 단락의 첫 번째 자식 만 액세스하는 while 루프를 사용합니다. 카운터 변수가있는 루프의 경우 컬렉션의 내용이 루프 전체에 걸쳐 동일하게 유지되기 때문에 모든 어린이를 올바르게 처리하지는 않습니다.
</em> 토론 </p>
<easy> 요소의 속성을 교체에 복사하는 쉬운 방법은 없습니다. (DOM 사양을 살펴보면, 불행히도, 관련 특성 및 메소드에 대한 Internet Explorer의 지원은 작업에 달려 있지 않습니다.) 새 요소가 동일한 ID, 클래스, HREF 등을 갖기를 원한다면 수동으로 값을 복사해야합니다.
<p>
<an> 요소 또는 텍스트 노드 제거
<has> 일단 요소가 유용성이 오래 지속되면 이제 절단을해야 할 때입니다. JavaScript를 사용하여 DOM에서 깨끗하게 요소를 제거 할 수 있습니다.
솔루션 <em> </em>
<ech> removeChild 메소드는 부모로부터 자식 노드를 제거하고 제거 된 객체에 대한 참조를 반환합니다. </ech></has></an></p>.
<off>이 html : 부터 시작합시다
<p>
<rem> 우리는 removeChild를 사용하여 학부모 단락에서 하이퍼 링크를 제거 할 수 있습니다.
<em>
<rem> removed removedchild는 A 요소에 대한 참조가되지만 해당 요소는 DOM의 어느 곳에도 위치하지 않습니다. 마치 CreateElement를 사용하여 방금 만든 것처럼 메모리에서 간단하게 사용할 수 있습니다. 이를 통해 페이지의 다른 위치로 재배치 할 수있게되거나, 원하는 경우, 또는 스크립트 끝에서 변수가 사라지게 할 수 있으며, 참조가 완전히 손실되어 효과적으로 삭제됩니다. 위의 코드에 따라 DOM은 다음과 같이 끝납니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
물론 <you> removechild에서 변수에 반환 값을 할당 할 필요가 없습니다. 당신은 그것을 실행하고 요소를 완전히 잊을 수 있습니다 : <p>
</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 토론 <p>
<that> 삭제하는 요소에 보존하려는 자녀가있는 경우 (즉, 부모를 제거하여“풀림”하는 것만으로도 자녀를 구출하여 부모가 제거 될 때 문서에 머무르도록해야합니다. 이미 언급 한 삽입 된 삽입 메소드를 사용하여이를 달성 할 수 있으며, DOM에 이미 포함 된 요소에 사용될 때 먼저 제거한 다음 적절한 지점에서 삽입합니다. <em>.
<aph> 다음 html의 단락에는 여러 어린이가 포함되어 있습니다
</aph></em>
<op> 우리는 단락의 Childnodes 컬렉션을 고려하고 요소 자체를 제거하기 전에 각 어린이를 개별적으로 이전 할 수 있습니다.
</op></that></p>
<dom> 페이지의 DOM은 이제 다음과 같이 보일 것입니다
<p>
<the> 요소의 속성을 읽고 쓰십시오
<ently> HTML 요소의 가장 자주 사용되는 부분은 그 속성입니까? ID, 클래스, HREF, 제목 또는 HTML 태그에 포함될 수있는 100 개의 다른 정보. JavaScript는이 값을 읽을 수있을뿐만 아니라 글을 쓸 수 있습니다. </ently></the></p>
솔루션 <p> </p>
<for> 요소의 속성을 읽고 쓰는 데 두 가지 방법이 있습니다. GetAttribute는 속성의 값을 읽을 수 있으며 STATTRIBUTE은 글을 쓸 수 있습니다.
<t>이 html을 고려하십시오 :
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<able> 우리는 그렇게 요소의 속성을 읽을 수있을 것입니다 :
<p>
<the> 변수 앵커리드의 값은 "antares"가 될 것이며, 변수 anchortitle의 값은 "멀리 떨어진 곳"이 될 것입니다.
<attr> 하이퍼 링크의 속성을 변경하려면 setattribute를 사용하여 변경할 속성의 이름을 전달하고 변경하려는 값을 다음과 같습니다.
</attr></the></p>
<the> 가변 뉴 테틀의 가치는 이제 "멀지 않아"가 될 것입니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div <br>
onmouseover="this.style.borderColor='red'" <br>
onmouseout="this.style.borderColor='black'"></pre><div class="contentsignin">로그인 후 복사</div></div> 토론 <p>
<from> 프리 로밍 네트 스케이프 광야에서 현대 시대의보다 엄격하게 정의 된 표준 기반 지형으로의 여정에서 DOM 표준은 HTML을 다루기 위해 상당한 양의 추가 구문을 선택했습니다. 이 엑스트라의 가장 널리 퍼져있는 것은 DOM 특성과 HTML 속성 사이의 매핑입니다.<is> 문서가 DOM 형식으로 구문 분석되면 요소의 속성에 대해 특수 속성 노드가 생성됩니다. 이 노드는 해당 요소의 "어린이"로 액세스 할 수 없습니다. 위에서 언급 한 두 가지 방법을 통해서만 액세스 할 수 있습니다. 그러나 원래 DOM 구현 (DOM 0)으로의 후퇴 (여기서 제로는 이러한 기능이 표준 이전에 나왔음을 시사한다)로, 현재 DOM 사양에는 HTML에 특정한 추가 기능이 포함되어 있습니다. 특히, 속성은 요소의 속성으로 직접 액세스 할 수 있습니다. 따라서 하이퍼 링크의 HREF 속성은 link.getAttribute ( "href")와 link.href. 를 통해 액세스 할 수 있습니다.
<ut>이 바로 가기 구문은 더 깨끗하고 읽기 쉬운 일뿐입니다. 어떤 상황에서는 또한 필요합니다. Internet Explorer 6 및 아래 버전은 요소의 시각적 표시에 대한 설정을 통해 변경된 변경 사항을 전파하지 않습니다. 따라서 setattribute를 사용하여 요소의 클래스, ID 또는 스타일에 대한 변경 사항은 표시되는 방식에 영향을 미치지 않습니다. 이러한 변경 사항이 효력을 발휘하려면 요소 노드의 속성 별 속성을 통해 이루어져야합니다. </ut></is></from></p>.
<use> 문제를 더 혼동시키기 위해, 속성 별 속성을 읽을 때 반환되는 값은 브라우저마다 다르며, Konqueror에서 가장 주목할만한 변형입니다. 속성이 존재하지 않으면 Konqueror는 NULL을 속성 별 속성 값으로 반환하는 반면 다른 모든 브라우저는 빈 문자열을 반환합니다. 보다 구체적인 경우 일부 브라우저는 링크를 반환합니다. 이 경우 브라우저에서 절대 URL을 지속적으로 반환하므로 DOT 속성을 사용하는 것이 더 안전합니다.
그러면 이러한 문제에 대한 일반적인 해결책은 무엇입니까?
<is> 기본 규칙은 다음과 같습니다. 속성에 값이 할당되었다고 확신하면 DOT 속성 메소드를 사용하여 액세스하는 것이 안전합니다. 속성이 설정되었는지 여부가 확실하지 않은 경우 먼저 DOM 메소드 중 하나를 사용하여 값이 있는지 확인한 다음 DOT 속성을 사용하여 값을 얻습니다.
<p> reading </p>의 경우 <verified>
<that> 이것은 그 값을 가져 오기 전에 속성이 존재하고 무효가 아닌지 확인합니다.
</that></verified></is></use></the></able></t></for></dom></you></rem></em></rem></p> <p> 에 쓰기 </p>에 대해서는 다음 코드를 사용하십시오.
<p>
이 코드는 속성이 먼저 속성이 올바르게 생성되었는지 확인한 다음 속성이 요소의 시각적 표시에 영향을 미치는 경우 Internet Explorer가 문제가되지 않는 방식으로 설정됩니다.<a>이 규칙에는 존재가 보장 할 수있는 속성에 대한 몇 가지 예외가 있습니다. 이러한 "필수"속성에서 가장 주목할만한 것은 스타일과 클래스이며, 모든 주어진 요소에 항상 유효합니다. 따라서 즉시 DOT 속성 (element.style 및 element.className)으로 즉시 참조 할 수 있습니다.
<p>
<ibute> 우리가 조심해야 할 다른 속성은 레이블의 특성입니다. 클래스와 동일한 규칙을 따르지만 재산 양식은 htmlfor입니다. getAttribute/setAttribute를 사용하여 Element.getAttribute ( "for")를 작성하지만 Internet Explorer에서는 요소입니다. getAttribute ( "htmlfor").
<ements> 특정 속성 값을 가진 모든 요소를 얻습니다
<find> 특정 속성을 가진 모든 요소를 찾는 기능은 동일한 클래스 또는 제목을 가진 모든 요소를 수정해야 할 때 매우 편리 할 수 있습니다.
솔루션 </find></ements></ibute></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<find> 특정 속성 값의 요소를 찾으려면 해당 속성의 모든 요소를 확인해야합니다. 이것은 매우 계산 집약적 인 작업이므로 가볍게 수행해서는 안됩니다. type = "Checkbox"로 모든 입력 요소를 찾으려면 검색을 먼저 입력 요소로 제한하는 것이 좋습니다.
<p>
<less> 이렇게하면 페이지의 모든 요소를 반복하고 유형을 확인하는 것보다 계산이 적습니다. 그러나이 솔루션에 제시된 기능 (getElementsByAttribute)은 동일한 속성 값을 갖는 다른 유형의 여러 요소를 찾아야 할 때 이상적입니다.
<way> 페이지의 모든 요소를 확인하는 가장 쉬운 방법은 getElementsByTagName ( "*")이 반환 한 컬렉션을 루프하는 것입니다. 이 방법의 유일한 문제는 Internet Explorer 5.0 및 5.5가 태그 선택을 위해 별표 와일드 카드를 지원하지 않는다는 것입니다. 운 좋게도이 브라우저는 문서를 지원합니다. 모든 속성은 페이지의 모든 요소를 포함하는 배열입니다. getElementsByAttribute는 간단한 코드 브랜치 로이 문제를 처리 한 다음 주어진 속성 값의 요소를 확인하여 반환 할 배열에 일치를 추가합니다.
</way></less></p>
<the> getElementsByAttribute의 많은 코드는이 장의 앞부분에서 언급 된 속성 처리의 브라우저 차이를 처리합니다. 필요한 기술은 필요한 속성이 클래스 또는 용인 경우 사용됩니다. 클래스 속성에서 일치하는지 확인할 때 추가 보너스로 요소에 여러 클래스가 할당 된 경우 기능은 각각 각각을 확인하여 필요한 값과 일치하는지 여부를 확인합니다. <h5>.<rem> 요소에 여러 클래스를 추가하고 제거합니다
<classes> 여러 클래스를 결합하는 것은 매우 유용한 CSS 기술입니다. 하나의 요소에 여러 가지 다른 스타일을 결합하여 사이트 전체에 다른 효과를 혼합하고 일치시켜 매우 원시적 인 상속 수단을 제공합니다. 강조 요소와 같은 상황에서 특히 유용합니다. 다른 클래스에 의해 요소에 적용될 수있는 다른 시각적 특성을 방해하지 않고 요소를 강조 표시하는 클래스를 추가 할 수 있습니다. 그러나 JavaScript로 클래스를 할당하는 경우 이전에 할당 된 클래스를 실수로 덮어 쓰지 않도록주의해야합니다.
솔루션 <h5> </h5>
모든 요소의 클래스는 ClassName 속성을 통해 액세스 할 수 있습니다. 이 속성을 사용하면 현재 해당 요소에 적용되는 클래스를 읽고 쓸 수 있습니다. 하나의 문자열이기 때문에 ClassName 작업의 가장 어려운 부분은 여러 클래스를 나타내는 데 사용하는 구문을 처리해야한다는 것입니다.
<in> 요소의 클래스 이름 속성의 클래스 이름은 공백으로 분리됩니다. 첫 번째 클래스 이름은 아무것도 앞에 있지 않으며 마지막 클래스 이름은 아무것도 뒤 따릅니다. 이를 통해 클래스 목록에 클래스를 쉽게 추가 할 수 있습니다. 클래스 이름 끝에 공간과 새로운 클래스 이름을 연결하십시오. 그러나 목록에 이미 존재하는 클래스 이름을 추가하면 클래스를 제거 할 수 있으므로 클래스를 제거 할 수 있습니다. 또한 ClassName 값의 시작 부분에서 공간을 사용하지 않으려는 것입니다. 이로 인해 Opera 7 : <p>에서 오류가 발생할 수 있기 때문입니다.
</p>
<cl> 먼저, AddClass는 추가 할 클래스를 포함하는 정규 표현 패턴을 만듭니다. 그런 다음이 패턴을 사용하여 현재 클래스 이름 값을 테스트합니다. 클래스 이름이 아직 존재하지 않으면 빈 클래스 이름 값 (이 경우 클래스 이름이 속성 구두로 할당됩니다)을 확인하거나 기존 값에 공간과 새 클래스 이름에 추가됩니다.
분리 클래스 <p>
수업을 찾기위한 일부 정규 표현 예제는 경계 특수 문자 (b)라는 단어를 분리하기 위해 사용합니다. 그러나 이것은 하이픈을 포함하는 모든 유효한 클래스 이름과 함께 작동하지 않습니다.
<rem> 클래스를 제거하는 프로세스는 클래스를 추가하는 데 사용하는 것과 동일한 정규 표현 패턴을 사용하지만 많은 수표를 수행 할 필요는 없습니다.
<em>
<ec> removeClass가 클래스 이름 속성 값의 사본에서 교체 정규 표현식을 실행 한 후, 모든 클래스 클래스 이름에서 마지막 클래스를 제거 할 때 생성됨)를 제거하여 결과 값을 정리 한 다음 대상의 클래스 이름에 다시 할당합니다.<h5> 요약
이 장에서는 문서 객체 모델을 조작하기 위해 필요한 기본이지만 강력한 도구를 도입했습니다. 웹 페이지를 조작 할 때 브라우저에서 보는 모든 것 아래의 골격 인 DOM을 이해하는 것이 중요합니다. DOM의 일부를 생성, 편집 및 삭제하는 방법을 아는 것은이 책의 나머지 부분을 이해하는 데 중요합니다. 이 기술을 숙달 한 후에는 유능한 JavaScript 프로그래머가 될 수 있습니다. </h5>
<p>
<working> 7 장. Windows 및 프레임으로 작업 </working></p>
<about>이 장은 팝업 열기, 프레임 간의 통신, (iframe의 데이터를 읽는 데 관련된 기술은 18 장에서 다루고, JavaScript를 사용하여 웹 응용 프로그램을 구축하고 페이지의 스크롤 위치를 찾는 것과 같은 간단한 창과 프레임 조작에 관한 것입니다.
<feel> 많은 사람들이 창문 조작이 어두운면과 비슷하다고 생각합니다. 그들은 창이 문서가 아닌 사용자의 GUI의 일부라고 생각하며 JavaScript는 문서 스크립팅 언어이므로 Windows를 조작하는 비즈니스 조작이 없습니다. <p>.
<ined> 나는 일반적으로 동의하는 경향이 있지만, 의견은 때때로 사치라는 것을 알고 있습니다. 고객이 구체적인 것을 요구하는 경우 반드시 마음을 바꾸거나 그러한 원칙에 따라 일을 거절 할 자유가 있습니다. 이 장에서는 다양한 실용적인 창과 프레임 조작 작업을 다루면서 사용에서 발생할 수있는 유용성 및 접근성 문제에 민감하게 유지됩니다.
그러나 는 한계가 있으며 일부 종류의 창 스크립팅은 특히 비우호적입니다. 우리는 사용자의 기본 창을 닫거나 수정하거나 화면 주위의 창을 움직이거나 전체 화면 또는 "크로스리스"창을 여는 것과 같은 공격적인 전술을 다루지 않을 것입니다. 이것들은 JavaScript를 나쁜 이름으로 부여한 학대 종류입니다. </ined></p>
<this>이 장의 대부분을 통해 우리는 창 객체의 속성과 방법을 자세히 살펴볼 것입니다. 이들은 다양한 브라우저에서 다양한 방식으로 구현되며, 대부분은 JavaScript가 표준화되기 전까지 사용되었습니다.
<quite> 우리는 다루기 위해 많은 코드 브랜치를 가지고 있지만, 특정 브라우저를 감지하는 대신 호환성을 테스트하기 위해 객체 또는 기능을 감지하는 과정을 신중하게 사용하여 두려운 브라우저 스니핑을 피할 것입니다. <h5>.
팝업 Wind
<pop> 팝업 창을 사용해야합니까? 내가 가진 가장 고려 된 대답은 이것입니다. 당신이 그것을 도울 수 있다면 아닙니다. 팝업 윈도우는 마케팅 담당자의 공격적인 사용으로 인해 나쁜 평판을 얻었지만 팝업을 요청한 팝업조차도 유용성에 대한 장벽이 될 수 있습니다. </pop>
</h5>.<say> 나는 팝업이 결코 적절하지 않다고 말하지 않을 것이지만, 나는 그것들이 거의 없다고 말할 것입니다. 그럼에도 불구하고 새 창을 엽니 다. 새 창을 열 수있는 상황이있을 것이다. 아마도 가장 적절한 솔루션은 다음과 같습니다. 온라인 설문 조사는 형식이 컨텐츠를보다 접근하기 쉽게 만들 수 있기 때문에 한 가지 예일 수 있습니다. 뷰포트는 알려진 크기가 필요할 수 있으므로 DHTML 게임은 또 다른 것입니다.
<ify> 팝업이 만드는 문제를 논의한 다음 가능한 한 이러한 문제를 완화시키는 실용적인 방법을 제공하여 내 의견을 자격을 갖추게됩니다.
<p> 팝업에 무슨 문제가 있습니까? </p>
<with> 대부분의 팝업 창 스크립트의 주요 문제는 사용자의 요구를 고려하지 않으며 디자이너의 요구 만 해결한다는 것입니다. 결과? 우리는 모두 그들을 보았습니다 : <p>
</p> <p>
<that> 링크에서 생성 된 팝업은 스크립팅을 사용할 수 없을 때 링크가 아무것도 수행하지 않지만 <em>
<that that> 상태 표시 줄이없는 팝업 창이 따라서 문서가로드되었는지 또는 정지되었는지 여부를 반드시 알 수 없으며 여전히로드 중입니다.
<that> 팝업은 사용자가 창 크기를 조정할 수있는 기능을 제공하지 않는 팝업과 창 밖에서 스케일링 할 수있는 컨텐츠에 대해 스크롤 바를 생성하지 못하는 팝업
"크로스리스"또는 사용자 화면의 전체 크기로 열린 windows
</that></that></em></that></p>
<not> 이러한 문제는 유용성에 대한 의문 일뿐 만 아니라 접근성에 대한 문제입니다. 예를 들어, 스크린 리더 사용자는 장치에서 새 창이 열렸다는 사실을 알리지 않을 수 있습니다. 이로 인해 브라우저 기록으로 돌아 가려고 시도하면 혼란이 발생할 수 있습니다 (할 수 없습니다). 창이 전체 크기로 열리면 시력이있는 사용자에게도 같은 일이 발생할 수 있습니다. 귀하와 저는 작업 표시 줄을 사용하여 열린 창을 모니터링하는 데 익숙 할 수 있지만 모든 컴퓨터 사용자가 아닙니다. 새 창이 팝업되었다는 사실조차 알지 못할 수도 있습니다. <p>.
<to> 팝업을 사용하고 이와 같은 문제를 찾고 일반적으로 영향에 민감한 경우 팝업을 사용자에게 더 친숙하게 만들고 양심에 부담을 줄 수 있습니다. </to></p>
또한 개발자의 관점에서 팝업 창이 작동하지 않는다는 점을 명심하십시오. 대부분의 브라우저는 이제 팝업 창을 억제하는 옵션이 포함되어 있으며 경우에 따라 사용자 이벤트에 응답하여 팝업이 생성 되더라도 억제가 발생합니다. <p>.
<able> 스크립팅이 지원되지 않은 상황과 마찬가지로이를 허용 할 수 있습니다. 팝업의 기본 트리거가 팝업에 실패하면 여전히 유용한 일을하도록함으로써. 또는 코드가 창을 열고 자체 닫힌 속성을 확인하여 실제로 표시되는지 확인할 수 있습니다 (다음 솔루션 에서이 기술을 살펴 보겠습니다).
<these> 그러나 이러한 접근 방식 중 어느 것도 모든 브라우저 및 팝업 차단제와 함께 작동하도록 보장되지 않으므로 사용 가능성에 따라 가능성이 높기 때문에 가능할 때마다 팝업을 사용하지 않도록하는 것이 더 간단하고 좋습니다. </these></able></p>.
<ul> 문제를 어떻게 최소화합니까? <li><to> 우리가해야 할 일은 팝업의 윤리적 사용을위한 황금 규칙을 설정하는 것입니다 :
<p> </p>
<tr> 스크립팅을 사용할 수 없을 때 트리거링 링크가 제대로 저하되어 있는지 확인하십시오.
<status> 항상 상태 표시 줄을 포함하십시오
<mechan>는 항상 내용을 넘치는 메커니즘을 포함합니다. 창 크기 조정을 허용하거나 스크롤 바가 나타나거나 둘 다를 허용하십시오.
<that> 640 × 480 픽셀보다 큰 창을 열지 마십시오. 팝업의 크기를 제한함으로써 대부분의 모니터에서 사용자의 기본 창보다 작도록 보장합니다. 이렇게하면 사용자가 팝업이 새로운 창임을 알게 될 가능성이 높아집니다. <p>.
</p>
솔루션 <ul> <li>
<gener> 위의 지침을 기반으로하는 일반적인 팝업 기능은 다음과 같습니다.
</gener>
</li>
<lim> 창 크기를 제한하는 것뿐만 아니라이 스크립트는 오버플로가없는 팝업을 생성하는 것을 거부하므로 오버플로 인수에 대해 "스크롤", "크기 조정"또는 "둘 다"를 지정하지 않으면 "둘 다"의 기본 설정이 사용됩니다.
<li> 3 대 연산자 </li>
이 스크립트는 3 배 연산자라는 바로 가기 표현식을 사용하여 각 오버플로 옵션을 평가합니다. 3 원 운영자가 사용합니까? 및 : 평가의 두 가지 가능한 결과를 나누는 문자이며, 단일 if..else 조건에 해당합니다. 이 코드를 고려하십시오
<li>
이 코드는 아래 마크 업과 같습니다
</li>
<li> 괄호는 필요하지 않지만 표현을 쉽게 읽을 수 있다는 것을 알 수 있습니다. 이것 및 기타 유용한 바로 가기에 대한 자세한 내용은 20 장을 참조하십시오.
<the> 팝업 기능이 제자리에 있으면 다양한 방식으로 호출 할 수 있습니다. 예를 들어, 일반 링크를 사용할 수 있습니다
</the>
</li>
<ting> 스크립팅을 사용할 수없는 경우 다른 링크와 마찬가지로 작동하지만 스크립팅을 사용할 수 있으면 스크립트가 HREF를 다른 설정과 함께 MakePopup 기능으로 전달하는 클릭 이벤트 핸들러를 트리거 할 수 있습니다. 핸들러의 반환 값은 창이 실제로 열리는 지 여부에 따라 다릅니다. 팝업을 차단하는 브라우저는 정상적인 링크를 따릅니다.
</ting></lim>
</ul>
<if> 일반적으로 창을 생성 해야하는 스크립트가 있으면 URL로 MakePopup 함수를 직접 호출 할 수 있습니다.
<p>
<to> 스크립트에서 나중에 해당 창을 닫아야하는 경우 저장된 창에서 닫기 메소드를 사용하여 다음을 수행 할 수 있습니다.
<em>
</em> 토론
<op> window.open 메소드는 URL 및 창 이름 외에 여러 인수를 할 수 있습니다. 이는 창에 메뉴 표시 줄, 도구 표시 줄 또는 주소 (위치) 막대와 같은 특정 장식이 있어야하는지 여부를 지정합니다. 이 인수는 쉼표로 지정된 문자열로 전달됩니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<p> MakePopup 함수에서 메뉴 바, 도구 모음 및 위치 인수는 모두 팝업 창에 거의 유용하지 않기 때문에 모두 사전 설정됩니다. 결국 탐색 도구입니다. 팝업은 주로 1 페이지의 인터페이스에 사용되거나 설문 조사 예제 또는 은행 웹 사이트의 로그온 절차와 같은 기록 내비게이션이 권장되지 않는 인터페이스에 사용됩니다.
<those> 필요한 경우 해당 인수를 변경할 수 있지만, 상태 인수는 항상 예를 끄려면 유용성이 양호하기 때문입니다. (알고 있습니다 - 이미 언급했지만 중요하기 때문에 다시 말하고 있습니다!) <p>
<able> 리지 가능한 인수는 디자인 또는 사용자 기본 설정의 결과로 일부 브라우저에서는 아무런 영향을 미치지 않을 수 있습니다. 실제로 Mac OS X의 Opera 8에서는 사용자 정의 크기의 창을 전혀 만들 수 없습니다. 생성 된 창이 현재 창에서 새 탭으로 나타납니다. 그 특정 예외는 그 자체로 중요하지 않을 수 있지만, 생성 된 창의 속성에 대한 제어가 절대적으로 보장되지 않는다는 일반적인 지점을 설명하는 역할을합니다. </able></p>.
<window> 새 창이 열리면 객체의 초점 방법을 사용하여 초점을 맞출 수 있습니다. 일반적으로 필요하지 않습니다. 일반적으로 기본적으로 발생합니다. 그러나 여러 Windows를 사용하여 스크립팅 할 때이 기술이 유용 할 수 있습니다.
<p>
또는 팝업을 열고 기본 창에 초점을 유지하려고 할 수도 있습니다 (따라서 소위“팝 언더”를 만듭니다). 블러 방법을 사용하여 창에서 초점을 멀리 할 수 있습니다 : </p>
<p>
<that> 그러나이 경우 초점이 다음에 어디로 갈지 예측할 수 없으므로 기본 창에 초점을 맞추는 것이 더 신뢰할 수 있습니다.
</that></p>
<ite> 새 창에서 오프 사이트 링크를 열었습니다
<ict> HTML 4 및 XHTML 1의 엄격한 버전에서는 링크의 대상 속성이 더 이상 존재하지 않습니다. 이것에 대한 한 가지 해석은 웹 페이지가 단순히 새 창에서 링크를 열지 않아야한다는 것입니다. 다른 하나는 타겟팅에 보편적 의미가 없으므로 HTML에서 정의해서는 안된다는 것입니다. (CSS 3 작업 초안에는 링크 프레젠테이션을위한 목표 속성 세트가 포함되어 있습니다. 결국이 메커니즘이 CSS에 전달되는 것을 볼 수 있습니다. 개인적으로, 나는 이것이 CSS와는 아무 관련이 없기 때문에 초안 단계를 지나치지 않기를 바랍니다. 인터페이스 제어는 의미 론적 Markup 언어보다 디자인 언어에서 더 이상 적합하지 않기 때문입니다!)
<interpret> 다른 해석이 있으며, 논쟁은 길고 때로는 지루하지만,이 문제에 대한 해결책이 필요하다고 말하면 충분합니다. 귀하의 개인적인 견해가 무엇이든, 그것은 웹 개발 고객의 일반적인 요청입니다. <p>.
솔루션 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>이 스크립트는 rel 속성 값 외부로 링크를 식별합니다. rel 속성은 링크와 대상 사이의 관계를 설명하는 방법이므로 다른 사이트를 가리키는 링크를 식별하는 데 사용되는 사용은 의미 적으로는 없습니다.
<p>
<al> 각 외부 링크가 이와 같이 식별되면 단일 문서. 온 클릭 이벤트 핸들러는 그러한 모든 링크를 클릭 할 수 있습니다.
</al></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 토론 <p>
단일 문서 전체 이벤트 핸들러를 사용하는 것이 가장 효율적인 접근법입니다. 모든 링크를 반복하고 각 링크를 개별적으로 바인딩하는 것보다 훨씬 낫습니다. 이벤트 대상 속성을 참조하여 실제로 클릭 한 요소를 찾을 수 있습니다. 이벤트 및 이벤트 속성에 대한 자세한 내용은 13 장, 기본 동적 HTML을 참조하십시오. 그러나 상황에 대한 간단한 요약이 있습니다.
<event> 2 개의 완전히 다른 이벤트 모델이 현재 브라우저에서 사용됩니다. 이 스크립트는 Mozilla 브라우저에서 사용하는 이벤트 인수 인 E를 찾아서 사용해야하며 Window.event 객체가 Internet Explorer가 사용하는 이벤트 객체와 달리 E를 찾아 사용해야합니다. 그런 다음 사용중인 모델에 적합한 객체 속성을 저장합니다. Mozilla 대상 및 브라우저 유사 브라우저 또는 IE의 SRCelement.
대상 객체 (NULL이 아닌 경우)는 링크 요소 노드, 링크 내부의 요소 또는 텍스트 노드 또는 다른 노드의 세 가지 중 하나 일 수 있습니다. 우리는 </event></p> 첫 두 사례가 스크립트에 의해 처리되기를 원하지만 마지막 상황에서 발생하는 클릭은 안전하게 무시 될 수 있습니다. 우리가하는 일은 링크를 찾거나 신체 요소에 도달 할 때까지 이벤트 대상의 부모 노드의 흔적을 따라야합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<a> 일단 통합 대상 링크가 있으면 단순히 올바른 값의 rel 속성을 확인해야합니다. 그것이 존재하는 경우, 우리는 링크의 HREF로 창을 열 수 있으며, 그 모든 것이 성공적이면 (새 Window 객체의 닫힌 속성에 의해 판단되는대로) 핸들러는 False를 반환하여 원래 링크가 따르는 것을 방지합니다. <p>.
<to> int
<em> 첫 번째 테스트 </em> </to></p>
<p> 우리는 속성 별 속성이 해당 속성에 값이 할당되었음을 확실히 알고있는 경우에만 신뢰할 수 있기 때문에 getAttribute를 Rel에 대한 첫 번째 테스트로 사용합니다. 문자열에 대한 테스트 대상으로 바로 갈 수는 없습니다. 문자열에 대한 릴은 무효 또는 정의되지 않았기 때문입니다. 이것은“요소의 속성을 읽고 쓰고 쓰는 것”이라는 섹션에서 더 자세히 설명했습니다.
</p>
<p>
<fr> 프레임 사이의 의사 소통 </fr></p>
<in> 프레임 환경에서 작업하는 경우 스크립트가 프레임간에 통신하거나 속성을 읽거나 쓰거나 다른 문서에서 기능을 호출해야 할 수도 있습니다.<a> 프레임 사용 여부에 대해 선택할 수 있다면, 개념적으로 깨 졌다는 사실과는 별도로 심각한 사용성과 접근성 문제가 많기 때문에 (해결할 수없는 브라우저 상태 내에 생성) 그렇게하는 것이 좋습니다. 그러나 팝업 사용과 마찬가지로 경우에 따라 프레임 사용에 대해 선택할 수 없습니다. 따라서 실제로 사용해야한다면 여기에해야 할 일이 있습니다. <p>
솔루션 </p> <p>
<with> 간단한 프레임 세트 문서로 시작하겠습니다
<em>
<four> 우리는 크로스 프레임 스크립팅에 4 개의 참조를 사용할 수 있습니다 :
</four></em> </with></p>
<ref ref> 창 또는 자체는 현재 프레임 페이지를 나타냅니다
<to> 부모는 현재 페이지가 포함 된 프레임이 포함 된 페이지를 나타냅니다.
<to> 상단은 프레임 계층 구조의 맨 위에있는 페이지를 나타냅니다. 이는 계층 구조에 프레임 세트가 하나만 있으면 부모와 동일합니다.
<collection> 프레임 컬렉션은 현재 페이지의 모든 프레임의 연관 배열입니다.
<p>
<we> 컨텐츠 프레임에 NavigationFrame에서 페이지를 통신하려는 스크립트가 있다고 가정 해 봅시다. 두 페이지 모두 단일 프레임 세트 (계층 구조에서 유일한 프레임 세트)에 포함되어 있으므로 ContentFrame 내에서 다음 참조를 성공적으로 만들 수 있습니다.
</we></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<ames ames> parent.frames [0]
<ames ames> top.frames [0]
<ames ames> parent.frames [ 'navigationframe']
<ames ames> top.frames [ 'navigationframe']
<p>
<collection> 프레임 컬렉션은 연관 배열 (6 장에서 본 양식 컬렉션, 양식 처리 및 검증 양식)이므로 각 요소는 색인 또는 이름으로 액세스 할 수 있습니다. 프레임 순서가 변경되면 나중에 코드를 편집 할 필요가 없도록 일반적으로 이름을 사용하는 것이 가장 좋습니다 (나중에 코드를 편집 할 필요가 없습니다. 마찬가지로, 복잡한 중첩 프레임 세트의 부모 참조는 계층 구조가 변경되면 변경 될 수 있으므로 일반적으로 개발자가 항상 상단에서 참조를 시작하는 것이 좋습니다. 위의 옵션 중에서, 내가 선호하는 참조는 상위입니다.
<have> 이제 프레임에 대한 참조가 있으므로 다른 프레임 페이지에서 함수를 호출 할 수 있습니다.
</have></collection></p>
또는 대안 적으로, 우리는 다른 프레임 문서에 대한 참조를 얻고 거기에서 DOM과 함께 작업 할 수 있습니다.
<p>
</p> 토론 <ul>
<ames> 프레임 간의 통신은 동일한 도메인의 문서 만 허용됩니다. 보안상의 이유로 스크립트와 다른 도메인에서로드 된 문서로 작업 할 수 없습니다. 예를 들어 악성 사이트 소유자가 정기적으로 방문하는 사이트를 프레임에로드하고 입력하는 개인 데이터를 훔치는 것은 그렇지 않습니다. <li>.실제로 일부 브라우저는 사용자가 모든 스크립트가 프레임간에 통신하는 것을 허용하지 않고 단지 크로스 사이트 스크립팅 취약점의 가능성을 근절하기 위해 스크립트가 구성된 브라우저에서 실행되는 경우이 선호도를 해결할 수있는 방법이 없습니다.
<have> 문제에 대해 불평하는 사용자가있는 경우 (그리고 크로스 프레임 스크립팅을 허용하기 위해 설정을 변경할 수 없거나 변경하지 않을 경우) 가장 안전한 일은 단순히 크로스 프레임 스크립팅을 완전히 피하는 것입니다. <p>.
<passing> 페이지간에 데이터를 전달하는 대체 방법은 6 장, 양식 처리 및 검증 양식 및 8 장에서 쿠키 작업을 수행합니다.
<oll> 스크롤 위치
<ing> 페이지 스크롤링은 JavaScript에서 가장 표준화되지 않은 속성 중 하나입니다. 다른 버전의 다른 브라우저에서 세 가지 변형이 사용되고 있습니다. 그러나 몇 가지 신중한 객체 테스트를 통해 우리는 일관된 값을 안정적으로 얻을 수 있습니다. </ing></oll></passing></p>
솔루션 <p> </p>
<ways>이 정보를 얻는 세 가지 방법이 있습니다. 우리는 각 접근 방식에서 객체 테스트를 사용하여 사용 가능한 지원 수준을 결정합니다.
<p>
<now> 이제 필요에 따라 함수를 호출 할 수 있습니다. 다음은 Window.onscroll 이벤트 핸들러를 사용하는 간단한 데모가 있습니다.
</now></p>
<h5> 스크롤의 문제 </h5>
<p> 스크롤은 가장 신뢰할 수있는 이벤트가 아닙니다. Konqueror 또는 Safari 1.0에서 전혀 발사되지 않을 수도 있고 사용자가 Firefox에서 마우스 휠로 탐색 할 때 전혀 발사되지 않을 수 있습니다. 그리고 불이 붙으면 인터넷 익스플로러에서와 같이 지속적으로 빠르게 그렇게 할 수 있습니다. 이는 이벤트에 응답하도록 설정된 스크립트가 매우 복잡한 경우 느리고 비효율적 일 수 있습니다.
이런 종류의 어려움이있는 경우 onscroll 이벤트 핸들러 대신 SetInterval 함수를 사용하는 것이 더 나을 수 있습니다. SetInterval을 사용하면 이벤트에 대한 응답보다는 예측 가능한 간격으로 기능을 호출 할 수 있습니다. 14 장, 시간 및 움직임에서 이러한 종류의 스크립팅에 대해 자세히 알아볼 수 있지만 다음과 같은 예는 다음과 같습니다.
wind
{<.>
var scrollpos = getScrollingPosition (); </.></p>
document.title = 'left ='scrollpos [0] 'top ='
스crollpos [1]; <p>
}, 250); <em> </em>
</p> 토론 <p>
<compl> 여기서 유일한 합병증은 IE 5가 실제로 DocumentElement.scrolltop 속성을 인식하지만 그 값은 항상 0이므로 값을 확인하고 속성의 존재를 찾아야한다는 것입니다. </compl></p>.
그렇지 않으면, 어떤 브라우저가 어떤 속성을 사용하고 있는지는 실제로 중요하지 않습니다. 중요한 것은 스크립트가 호환성 테스트 중 하나를 통해 유용한 값을 반환한다는 것입니다. 그러나 각 브라우저에서 사용하는 속성은 여기에 참조를 위해 표시됩니다.
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ul>
<ageage> Window.pageyOffset은 Firefox 및 기타 Mozilla 브라우저, Safari, Konqueror 및 Opera에서 사용합니다.
<oc oc> document.documentElement.scrolltop은 표준 호환 모드에서 IE 6에서 사용됩니다
<..> document.body.body.scrolltop은 IE 5에서, 즉“Quirks”모드에서 6 개로 사용됩니다.
<li>
<tell tell>이 목록은 완전한 이야기를 말하지는 않지만 주로 테스트 순서를 설명하기위한 것입니다. 보다 최근의 Mozilla 브라우저 (예 : Firefox)는 IE 6과 동일한 렌더링 모드 규칙에 따라 DocumentElement.scrolltop 및 body.scrolltop을 지원합니다. Safari 및 Konqueror Support Body.scrolltop 두 모드에서. Opera는 모든 모드에서 세 가지 속성을 모두 지원합니다! </tell>
</li>
<this> 그러나이 중 어느 것도 당신이 아는 것이 중요하지 않습니다. 브라우저 공급 업체는 이러한 여러 속성을 추가하여 한 속성을 알지 못하는 스크립트를 허용하며,이를 위해 임의의 선택을 제공하지 않도록합니다. 우리의 관점에서 볼 때 중요한 점은 스크립트가 가능한 한 널리 작동하도록하는 일련의 호환성 테스트 세트를 해결하는 것입니다.
렌더링 모드 <li> </li>
"표준"모드와 "퀴크스"모드는 현재 브라우저에서 사용하는 두 가지 주요 렌더링 모드입니다. 이 모드는 캔버스 ( 또는 )의 요소와 CSS 박스 크기의 계산 방법을 포함하여 출력 문서의 다양한 측면에 영향을 미칩니다. 렌더링 모드에 대한 자세한 내용은 11 장, 브라우저 차이 감지를 참조하십시오.
<scr> 페이지 스크롤을 특정 위치로 만들기 <li>
<ows> 모든 현재 브라우저는 페이지를 스크롤하기위한 동일한 (비표준) 메소드를 구현합니다. 적어도 여기에 뭔가 간단합니다! </ows>
</li>
솔루션 </scr></this></..></oc></ageage>
</ul> <p>
<methods> 페이지 (또는 창 또는 프레임), 특정 양 (창 .scrollby) 또는 특정 지점 (window.scrollto)으로 스크롤하는 데 사용할 수있는 두 가지 방법이 있습니다.
</methods></p>
<say>이 예제는 다음과 같이 말합니다. 200 픽셀로 아래로 스크롤 한 다음 200 픽셀을 가로 질러 스크롤 한 다음 왼쪽에서 300 픽셀, 상단에서 100 픽셀을 한 다음 상단 코너로 다시 스크롤하십시오. <p>.
<port> 뷰포트 크기 (창 내부 사용 가능한 공간)
<the> 뷰포트 크기의 세부 사항은 다양한 종류의 스크립팅에 필요합니다. 사용 가능한 공간이 스크립트의 논리의 요소 인 경우. 이 솔루션은이 책에서 뷰포트 크기를 얻기위한 유틸리티 기능을 제공합니다.
솔루션 </the></port></p> <p>
<ies> 우리가 필요한 속성은 이전 섹션에서 스크롤하는 페이지에 대해 본 속성과 같은 세 가지 방법으로 구현됩니다 ( "페이지를 특정 위치로 만들기"라는 섹션). 이 예에서와 마찬가지로, 우리는 객체 테스트를 사용하여 IE 5에서 필요한 값이없는 테스트를 포함하여 어떤 구현이 관련되는지를 결정할 수 있습니다 (이 테스트는 같은 이유로 필요합니다. 속성이 존재하지만 우리가 원하는 것이 아니기 때문에) : <em>.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<s s> 함수는 너비와 높이의 배열을 반환하므로 해당 데이터가 필요할 때마다 호출 할 수 있습니다.
</s><p>
</p> 요약
<the> 우리는이 장에서 실용 주의적 관점에서 창과 프레임 조작의 기본 사항을 다루었습니다. 또한 이와 같은 스크립트가 사용자 친화적이고 액세스 할 수 있도록하기 위해 사용할 수있는 원칙과 기술에 대해서도 이야기했습니다. 의심 할 여지없이, 이런 종류의 작업은 논란의 여지가 남아있을 것이며, 분명히 프레임의 사용이 천천히 죽어가더라도 더욱 정교한 인터페이스의 출현으로 인해 이러한 문제가 생생하게 유지되기 때문에 분명히 우리는 일종의 타겟팅 메커니즘이 필요합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>.
<the> 나는 Xlink 표준의 쇼 속성을 좋아하는데,이 속성은 새로운 것과 교체와 같은 값을 가지고 있습니다. 이는 대상 프로세스를 제안하지만 (새 창을 열고 각각 현재 창의 내용을 교체하십시오) 실제로 특정 동작을 정의하지는 않습니다. 그들은 실제로 발생하는 일을 제어하기 위해 사용자 에이전트에게 맡기므로, 예를 들어, 새로운 것을 사용하여 Windows 대신 탭을 열 수 있습니다. <h5>.
</h5>
<basic> 13 장. 기본 동적 html <p>
<t> Dynamic HTML은“이것은 DHTML입니다.”라고 말하고 말할 수있는 단일 기술이 아닙니다. 이 용어는 웹 페이지를 동적으로 만들기 위해 결합하는 모든 기술을 포함하는 설명 자입니다.
<lhtml html dom css javascript dhtml> 처리 이벤트 </lhtml></t></p>
<that that> 사용자와 웹 페이지와의 상호 작용 (마우스를 이동하거나 키보드를 활용하든 키보드를 활용하든 브라우저가 이벤트를 생성하게됩니다. 때로는 코드 가이 상호 작용에 응답하기를 원하므로 이러한 이벤트를 듣고 코드를 실행 해야하는시기를 알려줍니다.
솔루션 <p> </p>
<ways> 이벤트를 처리하는 두 가지 방법은 짧은 방법과 W3C 방식이 있습니다. 각각 장단점이 있지만 특정 요소에서 이벤트가 발생할 때 지정된 기능을 실행할 수 있습니다.
<:> 짧은 방법 : 이벤트 처리기 사용 <way> 이벤트를 처리하는 짧은 방법은 모든 요소의 바로 가기 속성으로 할당 된 DOM 0 이벤트 핸들러를 사용하는 것입니다. 5 장에서 보았 듯이 DOM 0 속성 단축키를 논의했을 때 문서 객체 모델을 탐색하면이 이벤트 핸들러는 향후 방지되지 않습니다. 그러나 표준 W3C 이벤트 리스너에 비해 몇 가지 장점을 제공합니다.
<p> </p>
<er er> 현재 운영중인 모든 브라우저는 코드 분기없이 DOM 0 이벤트 핸들러를 지원합니다.
<ed> DOM 0 이벤트 핸들러에 의해 실행 된 각 기능은 이벤트 핸들러가 할당 된 정확한 요소에 액세스 할 수 있습니다. (나중에 볼 수 있듯이, 이것은 W3C 이벤트 리스너에서 항상 사용할 수있는 것은 아닙니다.) <p>.
</p>
<with> DOM 0 이벤트 핸들러를 활용하는 데있어 주요 문제는 여러 스크립트에서 작동하도록 설계되지 않았다는 것입니다. DOM 0 이벤트 핸들러를 할당 할 때마다 해당 이벤트에 대해 이전에 할당 된 핸들러를 덮어 씁니다. 이는 동일한 요소에서 이벤트 처리가 필요한 여러 스크립트의 작동을 방해 할 수 있습니다. W3C 이벤트 리스너를 사용하면 동일한 요소에 여러 이벤트 리스너를 적용하고 언제든지 제거 할 수있는 기능을 즐길 수 있습니다.
<be> 코드가 다른 사람의 이벤트 처리를 방해하지 않는다고 확신 할 수 있다면 (예 : 자신의 스크립트에서 동적으로 생성 된 요소에 이벤트를 배치하는 경우) DOM 0 이벤트 처리기를 사용하는 것이 안전합니다. 그러나 모든 것이 평등합니다.이 책에서와 같이 W3C 이벤트 청취자를 실용적으로 사용하는 것이 더 안전합니다.
<dom> 다수의 DOM 0 이벤트 핸들러는 브라우저를 통해 사용할 수 있습니다. 표 13.1, "Dom 0 이벤트 핸들러"는 가장 일반적으로 사용되는 핸들러가 나와 있습니다.
표 13.1. DOM 0 이벤트 처리기 <ul>
<li>
DOM 0 이벤트 핸들러를 사용하는 경우, 처리하려는 이벤트가있는 요소에 대한 참조가 있으면 적절한 속성에 핸들링 기능을 할당하는 간단한 문제입니다.
</li>
<that>는 함수 할당 (button.onclick = ender;)에서 괄호가 함수 이름을 따르지 않습니다. 그들의 포함은 기능을 즉시 실행하고 반환 값을 이벤트 핸들러로 할당합니다. 괄호를 생략하면 기능 자체를 핸들러에 할당 할 수 있습니다. 이것은 또한 처리 기능에 직접 인수를 제공 할 수 없음을 의미합니다. 함수는 다른 수단을 통해 정보를 얻어야합니다. <li>.
익명 함수 </li> </that>
</ul>
지명 된 함수에 대한 참조를 제공하는 대신 이벤트 핸들러에 익명 함수를 제공 할 수 있습니다 : <p> </p>
<p> var mylink = document.getElementById ( "mylink"); </p>
<p>
mylink.onclick = function ()
{<.>
경고 ( "Engage!"); </.></p>
<p>
거짓을 반환합니다. <br>
} <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136345865741.png" class="lazy" alt="스크립트 스마트 : 처음부터 품질 자바 스크립트" ></p>
<p> 핸들링 기능 재사용 (및 고유 한 코딩 환경 설정)에 따라 이벤트 처리 코드를 더 쉽게 작성하는 방법이 될 수 있습니다.
<of> 핸들링 함수의 반환 값은 해당 이벤트의 기본 조치가 발생하는지 여부를 결정합니다. 따라서 앞 코드에서 MyButton이 하이퍼 링크 인 경우 클릭시 기본 조치는 HREF 위치로 이동하는 것입니다. False를 반환하면 Engage Function에서는 기본 작업이 발생하지 않으며 하이퍼 링크 내비게이션은 발생하지 않습니다. 반환 값이 true 인 경우, 이벤트 처리 기능의 코드가 실행 된 후 기본 조치가 발생합니다.
이벤트가 발생하면 해당 이벤트의 방법, 이유 및 위치에 대한 자세한 정보가 이벤트 개체에 기록됩니다. Internet Explorer에서는 글로벌 창의 형태를 취합니다. 이벤트 객체는 다른 브라우저에서는 이벤트 처리 기능에 대한 인수로 객체가 전달됩니다. 이 차이는 취급 기능 내에서 해결하기가 상당히 쉽습니다.
<em>
<allows> 이벤트 객체를 사용하면 키가 눌려 졌는지 여부, 이벤트의 좌표 (예 : 마우스 버튼을 클릭했을 때 커서가 위치한 위치) 및 기능을 유발 한 이벤트 유형과 같은 세부 사항을 클릭 한 것과 같은 세부 사항을 찾을 수 있습니다. 이벤트 속성 이름 중 상당수는 브라우저에서 일관되지만 일부는 다릅니다. Mozilla 이벤트 속성은 Gecko Dom Reference에서 볼 수 있으며 Internet Explorer 이벤트 속성은 MSDN에서 볼 수 있습니다. 브라우저마다 이름이 다른 속성의 경우, 관련 문제의 잠재력은 일반적으로 작은 물체 감지로 수정 될 수 있습니다. 이 장의 뒷부분에서 자세히 설명하겠습니다
<c> w3c way (이벤트 리스너)
DOM 0 이벤트 핸들러는 빠르고 쉽지만 제한 사항이 있습니다 (결국 더 이상 사용되지 않는다는 사실을 제외하고). W3C 이벤트 리스너의 주요 장점은 단일 요소에서 동일한 이벤트에 대한 여러 취급 기능의 추가 및 제거를 기본적으로 지원한다는 것입니다. 이벤트 청취자는 또한 여러 단계에서 이벤트에 응답 할 수 있습니다 (대부분의 브라우저는 아직이 기능을 지원하지 않지만).
W3C 사양에서는 요소의 addeventListener 메소드를 사용하여 요소에 이벤트를 추가 할 수 있지만 Windows 용 인터넷 익스플로러는 약간 다른 구문을 가진 첨부 이벤트라는 메소드를 사용하도록 선택합니다. (MAC 용 Internet Explorer는 이러한 이벤트 모델 중 하나를 지원하지 않으므로이 브라우저에서 이벤트 작업을 위해 DOM 0 핸들러에 의존해야합니다.)
<event> 인터넷 익스플로러를 제외한 모든 브라우저에 이벤트 리스너를 추가하려면 다음과 유사한 코드를 작성합니다.
</event></c></allows></em>
<expl> 인터넷 익스플로러를 지원하려면이 코드가 필요합니다<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 다른 기능 이름뿐만 아니라 Internet Explorer는 "클릭"이 아닌 "Onclick"이벤트의 Dom 0 핸들러 이름을 사용한다는 점에 유의해야합니다. AddeventListener에 제공되는 추가 인수는 캡처 (true) 또는 거품 (False) 이벤트 전파 단계 중에 청취자가 적용되는지 여부를 지정합니다. 이벤트 전파는 아래 논의에서 더 자세히 설명하지만 Bubble은 실제로 가장 유용한 선택이며 Internet Explorer에서와 같은 표준 호환 브라우저에서 동일한 동작을 보장합니다. <p>.
<between>이 두 접근법의 차이점은 추상화 기능을 사용하여 작업하기가 상당히 쉽습니다. 또한 W3C 이벤트 리스너를 동시에 지원하지 않는 브라우저에 대한 폴백을 제공 할 수 있습니다.
</between></p>
<if> 첫 번째 두 IF 진술은 각각 표준 기반 및 인터넷 익스플로러 방법을 다루지 만, Catch-All은 이러한 방법 중 하나, 특히 MAC 용 Internet Explorer 5를 지원하지 않는 이전 브라우저를 처리합니다. 이 마지막 경우 DOM 0 이벤트 핸들러가 사용되지만 특정 요소에 대한 단일 이벤트를 처리하는 데 여러 기능을 사용하여 클로저를 사용하여 이벤트에 첨부 된 기존 기능을 실행하는 데 사용됩니다. <p>.
<an> 클로저는 스코핑과 관련된 JavaScript의 고급 기능입니다 (JavaScript의 19 장, 객체 방향에서 읽을 수 있음). 클로저는 내부 함수가 포함 함수가 실행 된 후에도 포함 함수의 변수를 참조 할 수 있도록합니다. Simon Willison은 이벤트 핸들러와 관련하여 그들의 사용법을 자세히 설명했습니다. 클로저는 W3C 이벤트 리스너를 지원하지 않는 브라우저에 여러 이벤트 핸들러를 쌓을 수 있다고 말하면 충분합니다.
이벤트 리스너를 할당하기위한 크로스 브라우저 코드는 다음과 같습니다.
</an></p>
진정한 기사 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>
</p> DOM 0 이벤트 핸들러 폴백은 요소에서 하나의 이벤트 유형에 여러 이벤트 리스너를 추가 할 수있는 기능을 모방하지만 W3C 이벤트 모델의 정확한 복제를 제공하지 않습니다. 특정 핸들러는 요소에서 제거 할 수 없기 때문입니다.
<dom> DOM 0 핸들러는 False를 반환하여 요소의 기본 조치 취소를 허용했지만 W3C 이벤트 리스너는이 목표를 약간 다르게 달성했습니다. 이 모델에서 기본 조치를 취소하려면 이벤트 객체를 수정해야합니다. Internet Explorer는 ReturnValue 속성을 False로 설정해야합니다. 표준 기반 구현은 동일한 작업을 수행하기위한 예방 정보 방법을 제공합니다. 우리는 우리의 차이점을 파악하는 작은 기능을 만들 수 있습니다.
<p>
<this> 우리는 기본 조치를 취소 할 때 마다이 함수를 호출 할 수 있습니다.
</this></p>
<to> W3C 이벤트 모델을 지원하지 않는 브라우저도 기본 조치를 방해 할 수 있도록 stopDefaultAction을 실행 한 후에도 여전히 False를 반환해야합니다. Safari 및 W3C 이벤트 리스너 <p> <em>
</em> Safari의 버그로 인해 W3C 이벤트 리스너를 사용할 때 해당 브라우저에서 하이퍼 링크를 클릭하는 기본 동작을 취소하는 것은 불가능합니다. 취소를 달성하려면 Return value가있는 DOM 0 이벤트 핸들러를 사용해야합니다.
</p> aitchEvent를 확인하는 <p> <em>
Windows 용 Internet Explorer는 실제로 이벤트 청취자를 첨부하는 데 사용될 때 실제로 이벤트 개체를 이벤트 처리 기능에 전달합니다. 그러나 이전 이벤트 모델을 사용하는 브라우저에 대해이 객체의 존재를 확인해야합니다.
<adv> W3C 이벤트 리스너를 사용하는 장점 중 하나는 같은 이벤트에서 다른 청취자를 방해하지 않고 요소에서 개별 청취자를 제거 할 수 있다는 것입니다. DOM 0 핸들러를 사용하면 불가능합니다
<er> 인터넷 익스플로러는 DetacheVent 메소드를 사용하는 반면 표준 호환 브라우저는 RemoveEventListener라는 메소드를 지정합니다. 이러한 각 방법은 리스너에 대한 대응 물과 상당히 유사하게 작동합니다. 이벤트 유형을 처리하도록 할당 된 기능과 함께 이벤트 유형을 제공해야합니다. 표준 방법은 또한 이벤트 핸들러가 캡처 또는 버블 단계에서 응답하도록 등록되었는지 여부를 알아야합니다.
<function> 다음은 브라우저 에서이 접근법을 지원하는 기능입니다
</function></er></adv></em>
W3C 이벤트 모델 및 익명 함수 </p>
<p> W3C 이벤트 모델은 익명 함수를 제거 할 수 없으므로 이벤트 리스너를 제거 해야하는 경우 해당 기능을 참조하십시오.
<ers> W3C 이벤트 리스너를 지원하지 않는 브라우저 에서이 기능은 주어진 이벤트에서 모든 이벤트 핸들러를 제거합니다. 그중 하나만 제거하고 다른 이벤트를 제거 할 수는 없습니다. <em>.
</em> 토론 </ers></p>
<the> 대상 요소를 참조합니다
<you> 자주, 이벤트 핸들러 내부의 이벤트 대상이었던 개체를 사용하고 싶을 것입니다. DOM 0 이벤트 처리기를 사용하면 특수 변수를 사용하여 처리 함수 내부에서 이벤트 대상 객체를 참조하십시오. 이 코드를 고려하십시오 :
<p>
<ref> 여기, 이것은 id mylink와의 링크를 나타냅니다. 우리는 그것을 사용하여 링크의 HREF 속성을 얻을 수 있습니다. <em>
<you> 그러나 W3C 이벤트 리스너를 사용하는 경우 이벤트 대상은 다른 브라우저의 다른 속성 아래에서 이벤트 객체의 일부로 저장됩니다. Internet Explorer는 대상을 SRCelement로 저장하는 반면 표준 모델은 대상으로 저장합니다. 그러나 이러한 속성이 지적하는 요소는 반드시 이벤트 리스너가 할당 된 요소 일 필요는 없습니다. 사실, 그것은 사건의 영향을받는 계층 구조에서 가장 깊은 요소입니다. 다음 HTML을 살펴보십시오<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<event> 클릭 이벤트 리스너가 단락에 배치되고 사용자가 링크를 클릭하면 단락의 클릭 이벤트 핸들러가 실행되지만 위에서 언급 한 속성을 통해 액세스 할 수있는 이벤트 대상은 하이퍼 링크입니다. 일부 브라우저 (특히 Safari)는 링크 내부의 텍스트 노드를 대상 노드로 계산하기까지합니다.
<a> 우리는 어떤 속성이 구현되었는지에 관계없이 이벤트 대상을 반환하는 함수를 쓸 수 있지만, 이벤트 리스너를 원래 적용한 요소를 찾는 문제는 해결되지 않습니다. (W3C 표준은 CurrentTarget이라는 다른 속성을 지정합니다. 리스너가 할당 된 요소를 얻을 수는 있지만 인터넷 익스플로러에 해당하는 브라우저는 없습니다. CurrentTarget을 지원하는 브라우저도 동일한 값으로 이벤트 핸들러 스타일을 설정했지만 인터넷에 대한 최상의 재판매는 종종 대상이되지 않습니다. 우리가 이벤트 리스너를 첨부 한 요소 일 가능성이 높은 요소. 이렇게하려면 요소의 태그 이름, 클래스 및 기타 속성에 대해 검사를 수행 할 수 있습니다.
<event> 추상화 이벤트 대상 함수는 다음과 같습니다
<p>
if-else는 브라우저를 가로 질러 이벤트 대상을 검색합니다. 브라우저에서보고 한 대상이 텍스트 노드 인 경우 while 루프는 첫 번째 비 텍스트-노드 부모를 찾습니다.
<to> 클릭 한 요소를 검색하려면 GetEventTarget을 호출합니다.
</to></p>
이 경우 이벤트 처리 기능이 링크 (<a> 태그)에만 첨부 될 것이라는 것을 알고 있기 때문에 이벤트 대상에서 위쪽으로 반복하여 "A"라는 노드 이름을 확인할 수 있습니다. 우리가 찾은 첫 번째 것은 핸들러가 할당 된 링크입니다. 이를 통해 링크 내부의 일부 요소로 작업하지 않도록합니다 (예 : 강하거나 스팬).
<this> 분명히,이 대상 찾기 방법은 이상적이지 않으며, 작업 할 정확한 HTML에 대한 지식이 없다면 100% 정확할 수 없습니다. 최근 에이 문제를 해결하기 위해 많은 노력을 기울였으며, 제안 된 솔루션 중 상당수는 DOM 0 이벤트 핸들러와 이벤트 리스너의 W3C 표준을 지원하는 브라우저 (인터넷 익스플로러가 아님)에서 사용 가능한이 변수를 제공합니다.
<is> 그러한 해결책 중 하나는 이벤트 청취 기능을 인터넷 익스플로러에서 대상 객체의 메소드로 만드는 것입니다. 그런 다음 메소드가 호출되면 자연스럽게 메소드가 호출 된 객체를 가리 킵니다. 이를 위해서는 AttachEventListener와 DetacheVentListener를 모두 수정해야합니다.
<p>
<thinking>이 사고 라인은 Peter Paul Koch의 개선 된 Addevent 경쟁에 대한 출품작으로 잘 표현되었습니다.Dean Edwards의 또 다른 솔루션은 독립적 인 추가 및 제거 기능을 갖춘 DOM 0 이벤트 처리기 구현에 찬성하여 W3C 이벤트 모델을 완전히 피합니다.
<these>이 두 솔루션 모두 잘 쓰여지고 강력한 것으로 판명 될 수 있지만,이 글을 쓰는 시점에서 테스트되지 않았으므로 우리는 우리가 알고 처리 할 수있는 접근 방식을 고수 할 것입니다 : 주요 솔루션에 제시된 것. 게다가 실제로 이벤트의 목표를 찾기위한 반복 과정은 그다지 신뢰할 수없는 것만 큼 신뢰할 수 없습니다.
<bub> 이벤트 버블 링이란 무엇이며 어떻게 제어합니까? <p>
<not> 당신은 우리가 W3C Standard AddeventListener 메소드에 세 번째 인수를 제공해야했으며, 캡처 인수가 우리의 aitcheventlistener 기능에 포함되어 있음을 알았을 것입니다. 이 인수는 청취자가 작동하는 이벤트 사이클의 단계를 결정합니다.
<have> 두 가지 요소가 있다고 가정합니다. 하나는 다른 요소 안에 중첩되어 있다고 가정합니다.
</have></not></p>
<click> 사용자가 링크를 클릭하면 단락과 하이퍼 링크에 클릭 이벤트가 등록됩니다. 문제는 어느 쪽이 이벤트를 먼저 받는가? <p>입니다
<cont> 이벤트주기에는 두 단계가 포함되어 있으며 각각은 다른 방식 으로이 질문에 응답합니다. 캡처 단계에서 이벤트는 외부에서 작동하므로 단락은 먼저 클릭 한 다음 하이퍼 링크를받습니다. 버블 단계에서는 이벤트가 내부에서 작동하므로 앵커는 단락 전에 클릭을받습니다.
<er> 인터넷 익스플로러와 오페라는 버블 링 만 지원하므로 첨부 이벤트에는 세 번째 인수가 필요하지 않습니다. addeventListener를 지원하는 브라우저의 경우 세 번째 인수가 참이면 캡처 단계에서 이벤트가 잡히게됩니다. 거짓이면 거품 단계에서 이벤트가 잡히게됩니다. </er></cont></p>
<ers> 두 단계를 지원하는 브라우저에서 캡처 단계가 먼저 발생하며 항상 기포 단계가 뒤 따릅니다. 각 단계마다 리스너를 설정할 경우 캡처 및 버블 링 단계에서 동일한 요소에서 이벤트를 처리 할 수 있습니다. <p>.
<also>이 단계는 또한 중첩 요소가 동일한 사건의 영향을 받는다는 사실을 강조합니다. 이벤트 청취자가 트리거 된 후 더 이상 이벤트가 계층 구조 (단계에 따라 다름)를 계속 전파하는 이벤트를 원하지 않으면 중지 할 수 있습니다. Internet Explorer에서는 이벤트 객체의 CANCLEBBLE 속성을 True로 설정하는 것이 포함됩니다. W3C 모델에서는 대신 스톱 포거레이션 방법을 호출해야합니다.
</also></p>
<want> 이벤트 핸들러보다 이벤트가 더 전파되기를 원하지 않으면이 코드를 사용합니다.
<p>
<assign> 우리는 링크와 단락이 포함 된 단락 모두에서 클릭 이벤트를 듣기 위해 Engage Function을 할당했지만 이벤트의 전파가 처음으로 호출 될 때 이벤트의 전파가 중지되므로 클릭당 한 번만 호출됩니다. </assign></p>.<of> 요소의 크기 찾기
<many> 컨텐츠 길이, CSS 규칙, 글꼴 패밀리, 글꼴 크기, 라인 높이, 텍스트 확대 / 축소 등 요소의 크기에 영향을 미치는 변수가 너무 많습니다. 이에 브라우저가 CSS 크기와 글꼴 크기를 일관성있게 해석한다는 사실을 추가하고 요소가 렌더링되는 치수를 결코 예측할 수 없습니다. 요소의 크기를 결정하는 유일한 일관된 방법은 브라우저에서 렌더링되면 측정하는 것입니다.
솔루션 <p>
<straight> 요소가 얼마나 큰지 정확히 아는 것이 유용하다고 바로 알 수 있습니다. W3C는 도움이되지 않습니다. 요소의 크기를 결정하는 표준화 된 방법이 없습니다. 고맙게도, 브라우저 제조업체는 우리가 그것을 알아낼 수 있도록 일부 DOM 속성에 대해 다소 정착했습니다. </straight></p>.
<differ> 상자 모델 차이는 인터넷 익스플로러가 요소의 CSS 차원의 일부로 패딩과 경계를 포함한다는 것을 의미하지만, 오프셋 폭과 오프 테일 속성은 모든 브라우저에서 패딩 및 경계를 포함한 요소의 너비를 지속적으로 반환합니다.
<that> 요소의 크기가 다음과 같은 CSS에 지정되었다고 상상해 봅시다 : .
<p>
<that> 우리는 해당 오프셋 및 오프 테일 속성을 확인하여 요소의 정확한 픽셀 너비를 JavaScript에서 결정할 수 있습니다.
<em>
<or> 인터넷 익스플로러 6, 오페라, 모질라 및 사파리에서 변수 픽셀 위드는 이제 450으로 설정 될 것이며, 변수 픽셀 하이트는 250으로 설정됩니다. 인터넷 익스플로러 5/5.5에서는 350과 픽셀 하이트가 350이 될 것이기 때문에, 파괴 된 모델은 그 상자에 사용되는 차원이 될 것이기 때문입니다. 값은 브라우저마다 다르지만 실제 렌더링 된 크기도 다르기 때문에 값이 다릅니다. 오프셋 치수는 요소의 정확한 픽셀 치수를 지속적으로 계산합니다.
<not> 요소의 크기를 지정하지 않고 대신 기본 블록 렌더링 (따라서 박스 모델 버그를 피함)으로 디스플레이를 남겨두면 브라우저간에 값이 비슷합니다 (스크롤 바 너비 차이, 글꼴 등).
</not></or></em> 올바른 치수를 달성
</that></p> 요소의 크기를 올바르게 결정하려면 브라우저가 해당 요소 렌더링을 마칠 때까지 기다려야합니다. 그렇지 않으면 치수가 사용자가 보는 것과 다를 수 있습니다. 브라우저가 요소 렌더링을 마치는 것을 보장 할 수있는 방법은 없지만, 일단 창의로드 이벤트가 시작되면 모든 요소가 렌더링되었다고 가정하는 것이 일반적으로 안전합니다.
<p> 토론 </p> <to> 요소의 크기를 뺀 값을 뺀 것입니다. 이 값은 ClientWidth 및 ClientHeight 속성을 사용하여 액세스하며, 위에 사용 된 예제 요소의 경우 Internet Explorer 5/5.5에서 300과 100, 다른 모든 브라우저에서 400 및 200입니다. <p>.
<property> 경계 나 패딩없이 요소의 너비를 검색 할 수있는 속성이 없습니다.
</property></p>
<p>
<of> 요소의 위치 찾기
<position> 요소의 정확한 위치를 아는 것은 다른 요소를 배치하려고 할 때 매우 유용합니다. 그러나 브라우저 크기, 글꼴 크기 및 컨텐츠 길이가 다르기 때문에 페이지를로드하기 전에 요소의 위치를 하드 코딩하는 것은 종종 불가능합니다. JavaScript는 페이지가 렌더링 된 후 요소의 위치를 확인하는 메소드를 제공하므로 요소가 어디에 있는지 정확히 알 수 있습니다.
솔루션 </position></of></p> <p>
<t> OffsetTop 및 OffSetLeft 속성은 요소의 상단과 오프셋 비교의 상단 사이의 거리를 알려줍니다. 그러나 상대방은 무엇입니까? 글쎄, 그것은 요소와 브라우저에 따라 크게 다릅니다. 때로는 즉각적인 포함 요소입니다. 다른 경우에는 HTML 요소입니다. 다른 경우에는 존재하지 않습니다. </t></p>
고맙게도, 해결책은 오프셋 대회의 트레일을 따르고 오프셋 위치를 추가하는 것입니다. 모든 브라우저에서 페이지에서 요소의 정확한 절대 위치를 제공하는 메소드입니다. <h5>.
<in> 문제의 요소가 상쇄없는 경우 요소 자체의 오프셋 위치로 충분합니다. 그렇지 않으면, 우리는 요소의 오프셋을 오프셋의 오프셋에 추가 한 다음 오프셋 비교 (있는 경우)에 대한 프로세스를 반복합니다.
</in>
</h5>
Mac Bug의 경우 IE 5
<p> Mac의 Internet Explorer 5는 오프셋 치수를 계산할 때 신체의 여백이나 패딩을 고려하지 않으므로이 브라우저에서 정확한 측정을 원한다면 신체에 마진이 0과 패딩이 있어야합니다.
</p> 토론 <p>
<works> 위의 방법은 단순하고 복잡한 레이아웃에 작용합니다. 그러나 하나 이상의 요소의 조상이 CSS 위치 속성을 정적으로 설정 (기본값) 이외의 다른 것으로 설정할 때 문제가 발생할 수 있습니다. <em>.
<many> 중첩 위치 및 브라우저 차이의 가능한 조합이 너무 많아서 스크립트를 모두 고려하는 스크립트를 작성하는 것은 거의 불가능합니다. 많은 상대적 또는 절대 포지셔닝을 사용하는 인터페이스를 사용하는 경우 특정 사례를 실험하고 특별한 기능을 작성하는 것이 가장 쉬울 수 있습니다. 다음은 만날 수있는 차이점이 있습니다. </many></em>
</works></p> <ul>
Windows와 Mozilla/Firefox의 인터넷 익스플로러에서 <or or>, 부모가 상대적으로 위치하는 요소는 부모의 경계를 자체 오프셋에 포함시키지 않습니다. 그러나 부모의 오프셋은 국경의 가장자리에만 측정됩니다. 따라서이 값의 합에는 경계 거리가 포함되지 않습니다. <li>
오페라와 사파리에서는 신체가 자체 오프셋에 신체의 마진을 포함 할 절대적이거나 상대적으로 위치한 요소가 있습니다. 신체의 오프셋에는 자체 마진도 포함됩니다. </li>
Windows 용 Internet Explorer에서 <or> 비교적 위치가있는 요소 내부에 절대적으로 위치 된 요소에는 상대적으로 위치 된 요소의 여백이 오프셋에 포함됩니다. 상대적으로 위치한 요소에는 마진도 포함됩니다. <li>
</li>
<the> 마우스 커서의 위치를 감지합니다
<m> 마우스 오버 또는 마우스 미 모브와 같은 마우스 이벤트로 작업 할 때는 마우스 커서의 좌표를 사용하여 작업의 일부로 사용하여 마우스 근처에 요소를 배치하기를 원합니다. 아래에 설명 된 솔루션은 실제로“요소의 위치 찾기”라는 섹션에서 논의한 요소 위치 감지 방법보다 더 신뢰할 수있는 위치 감지 방법입니다.
솔루션 <li> </li>
<cont> 이벤트 객체에는 모든 브라우저에서 동등한 값을 얻으려면 약간의 객체 감지가 필요하지만 커서의 위치와 함께 작동하기 위해 알아야 할 모든 것이 포함되어 있습니다.
<of> 전체 페이지에 대한 커서의 위치를 얻는 표준 방법은 이벤트 객체의 pagex 및 pagey 속성을 통한 것입니다. Internet Explorer는 이러한 속성을 지원하지 않지만 거의 우리가 원하는 속성을 포함합니다. ClientX와 Client는 Internet Explorer에서 제공되지만 마우스 커서에서 브라우저 창의 가장자리까지의 거리를 측정합니다. 전체 페이지와 관련하여 커서의 위치를 찾으려면 현재 스크롤 위치를 이러한 차원에 추가해야합니다. 이 기술은 창과 프레임으로 작업하는 7 장에서 다루었습니다. 해당 솔루션의 getScrollingPosition 기능을 사용하여 필요한 차원을 검색해 봅시다.
</of></cont></m></the></or></or>
</ul>
<h5>
<tool> 요소에 마우스를 할 때 툴팁 표시
<are> 툴팁은 대부분의 브라우저에서 유용한 기능이지만 인터페이스의 일부로 사용하려는 경우 약간 제한적일 수 있습니다. 원할 때 나타나는 레이어를 사용하고 싶거나 잘리지 않고 일반 텍스트 이상을 포함 할 수있는 레이어를 사용하려면 고유 한 툴팁을 만들지 않겠습니까? <p>.
솔루션 </p> <p>
이 예에서는 툴팁이 나타나는 모든 요소에 클래스 Hastooltip을 적용합니다. 각 요소의 제목 속성에서 툴팁에 표시 될 정보를 얻을 수 있습니다.</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<oration>이 장의 앞부분의 브라우저 이벤트 탐색에서, 당신은 이미 레이어가 나타나고 사라질 때를 알려주기 위해 일부 이벤트 청취자를 설정해야한다는 것을 이미 깨달았을 것입니다. <p>.
<class> 툴팁은 요소 위에 마우스 할 때 고정 된 위치에 고전적으로 나타나고 마우스가 나올 때 사라집니다. JavaScript 툴팁의 일부 구현은 마우스가 요소를 통해 움직일 때 툴팁을 이동하지만 개인적 으로이 성가신 것을 발견합니다. 이 솔루션에서는 마우스 오버 및 마우스 아웃 이벤트에 중점을 둘 것입니다.
</class></p>
<cod> 우리는 이미 1 장의 AddloadListener, JavaScript 시작, 5 장의 getElementsByAttribute, 문서 개체 모델 탐색 및이 장에서 이전에 만든 첨부 이벤트 리스트너 기능을 포함 하여이 스크립트의 몇 가지 기능을 이미 코딩했습니다.
<p>
<cross> 크로스 브라우저 이벤트 객체를 얻은 후 기본 이벤트 대상 요소에서 Hastooltip 클래스로 반복 한 후 Showtip은 툴팁 (A DIV)을 만들어냅니다. 툴팁의 컨텐츠는 대상 요소의 제목 속성에서 가져와 툴팁 내부의 텍스트 노드에 배치됩니다.
<the> 브라우저에 향상된 툴팁 위에 자체 툴팁이 표시되지 않도록하려면 대상 요소의 제목이 지워집니다. 이제 브라우저가 툴팁으로 표시 할 것이 없으므로 방금 만든 것과 방해 할 수 없습니다. 제목을 제거하여 발생하는 잠재적 인 접근성 문제에 대해 걱정하지 마십시오. 나중에 다시 넣을 것입니다.
</the></cross></p> Opera에서 툴팁 디스플레이 제어 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<p> 오페라는 빈 문자열로 설정 한 후에도 원래 제목을 여전히 표시합니다. 이 브라우저에 툴팁이 나타나지 않으려면이 장의 첫 번째 섹션 인 "Handling Events"라는 섹션의 STOPDEFAULTACTION 기능을 사용하여 마우스 오버의 기본 동작을 중지해야합니다. 이것은 하이퍼 링크의 상태 표시 줄 주소 디스플레이와 같은 다른 마우스 오버 동작에도 영향을 미칠 것입니다.
<s> 툴팁 스타일을위한 후크를 제공하려면 Target Element의 ID (TargetIdToolTip)를 기반으로 한 툴팁 요소를 할당하고 툴팁 클래스를 설정합니다. 이 접근법은 CSS를 통해 스타일을 적용 할 수 있지만, 우리는 툴팁의 위치를 미리 계산할 수 없으므로, 이벤트가 트리거 될 때 계산 된대로 마우스 커서의 좌표를 사용해야합니다.
<is> 남아있는 것은 툴팁 요소를 신체에 추가하는 것입니다. 그래서 우리가 링크를 통해 마우스를 할 때 마술처럼 나타납니다! 약간의 CSS를 사용하면 그림 13.1, "마우스 오버에 나타나는 동적으로 생성 된 층"과 같이 보일 수 있습니다.<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136346382132.png" class="lazy" alt="스크립트 스마트 : 처음부터 품질 자바 스크립트" >
그림 13.1. 마우스 오버에 나타나는 동적으로 생성 된 층
<ouse> 마우스가 요소에서 옮겨지면 문서에서 툴팁을 삭제하면 사라집니다.
<br>
<show> 앞서 Showtip에서는 대상 요소의 속성으로 툴팁 요소에 대한 참조를 만들었습니다. 그렇게 한 후, 우리는 전체 DOM을 검색 할 필요없이 여기서 제거 할 수 있습니다. 툴팁을 제거하기 전에 컨텐츠를 검색하여 대상 요소의 제목에 삽입하므로 나중에 다시 사용할 수 있습니다.
<em> 그 물체가 존재합니까? </em> </show></ouse></p>
<p> 다른 이벤트에서 생성 된 개체가 실제로 조작을 시도하기 전에 실제로 존재하는지 확인해야합니다. 이벤트는 종종 잘못 분류 될 수 있기 때문에 정해진 순서로 발생할 것이라고 보장 할 수 없기 때문입니다.
</p> 토론 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<the> 위의 코드의 한 가지 문제는 대상 요소가 브라우저 창의 오른쪽 또는 하단 가장자리에 가까운 경우 툴팁이 차단된다는 것입니다. 이를 피하려면 툴팁을위한 충분한 공간이 있는지 확인하고 그에 따라 배치해야합니다.
각 차원에서 마우스 위치가 브라우저 창 크기보다 적은지 툴팁 크기를 뺀 것인지 확인하면 화면에 레이어를 이동하기 위해 레이어를 얼마나 멀리 이동 해야하는지 알 수 있습니다.
<p>
<ident>이 함수는 툴팁 요소의 삽입에 도달 할 때까지 이전 버전과 동일합니다. 요소를 삽입하기 직전에 가시성을 "숨겨진"것으로 설정했습니다. 즉, 페이지에 배치되면 레이어가 표시된 경우 동일한 공간을 차지하지만 사용자는 페이지에서 볼 수 없습니다. 이를 통해 툴팁의 크기를 측정 한 다음 사용자가 원래 위치에서 플래시를 보지 않고 재배치 할 수 있습니다.
<det> 레이어가 뷰포트 외부에 표시되는지 여부를 감지하기 위해 뷰포트와 관련하여 커서의 위치를 사용합니다. 이것은 ClientX/Clienty를 사용하여 이론적으로 얻을 수 있지만, Safari는이 속성에 잘못된 가치를 제공합니다. 대신, 우리는 CursorPosition 내부의 크로스 브라우저 값을 사용하고 스크롤 위치 (ClientX/Clienty와 동일)를 빼냅니다. 뷰포트의 크기는 7 장에서 만든 getViewportSize 함수를 사용하여 얻어지고 Windows 및 프레임으로 작업 한 다음 각 차원마다 커서 위치와 레이어의 크기가 뷰포트 크기보다 큽니다 (Scrollbar에 대한 허용).
<the> 레이어의 일부가 뷰포트 외부에 나타나면 뷰포트 크기에서 크기를 빼서 위치를 배치합니다. 그렇지 않으면 커서 위치를 사용하여 정상적으로 배치됩니다<exception> 주목할만한 유일한 예외는 레이어가 일반적으로 뷰포트 외부에 두 차원으로 나타나면 수직으로 위치 할 때 커서 위에 자동으로 배치된다는 것입니다. 이것은 층이 커서 위에 직접 나타나고 마우스 아웃 이벤트를 트리거하는 것을 방지합니다. 또한 툴팁에 의해 대상 요소가 완전히 가려지는 것을 방지하여 사용자가 클릭하지 못하게합니다.
<p> 가시 도구 팁 치수 측정 </p>
<p> 툴팁의 크기를 측정하려면 먼저 문서에 추가되어야합니다. 이렇게하면 페이지에 자동으로 표시되므로 사용자가 잘못된 위치에 표시되는 것을 보지 못하면 숨겨야합니다. 우리는 툴팁의 위치를 마무리 할 때까지 가시성을 "숨겨진"것으로 설정함으로써 그렇게합니다.
<em> 디스플레이가 "없음"으로 설정된 개체가 전혀 렌더링되지 않기 때문에 더 친숙한 디스플레이 속성을 사용할 수 없으므로 측정 할 차원이 없습니다.
<ables> 열별로 정렬
<be> 테이블은 정보의 광산 일 수 있지만 제대로 이해할 수있는 경우에만 가능합니다. 다른 열로 테이블을 정렬 할 수있는 기능을 갖추면 사용자는 데이터를 이해하는 방식으로 데이터를 볼 수 있으며 궁극적으로 더 큰 이해를위한 기회를 제공 할 수 있습니다.
솔루션 </be></ables></em> </p>
시작하려면 의미 적으로 의미있는 HTML 테이블을 사용합니다. 이를 통해 이벤트 리스너를 삽입하고 추가 요소를 주입하고 데이터를 정렬하는 데 필요한 구조를 제공합니다.
<p>
<need> 먼저, 각 테이블 제목 셀에 이벤트 리스너를 설정해야합니다. 이들은 열에 대한 클릭을 듣고 클릭 한 열에 정렬을 트리거합니다.
<em>
<er> Internet Explorer 5의 MAC 용은 동적으로 생성 된 테이블 컨텐츠를 다루는 데 어려움이 있으므로 테이블을 정렬 할 수 있도록 구체적으로 제외해야합니다.
<with> 클래스 SortableTable이있는 테이블 만 분류 테이블로 바뀌므로 initsortabletable은 DOM을 탐색 하여이 테이블에서 테이블 제목 셀을 찾습니다. 일단 발견되면 각 제목 셀의 내용이 하이퍼 링크에 싸여 있습니다. 키보드 사용자가 테이블을 정렬 할 열을 선택할 수 있으며 이벤트 리스너는 이러한 링크에 설정되어 클릭 이벤트를 모니터링하고 응답으로 SortColumn을 실행합니다. 각 링크의 제목 속성도 설정되어 사용자에게 링크를 클릭 할 때 어떤 일이 발생하는지에 대한 정보를 제공합니다.
<ol> 제목 셀을 클릭 할 때마다 전체 테이블 구조를 탐색하고 재 배열해야한다는 사실 때문에 SortColumn 함수는 상당히 길다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<lo> 모든 구조 변수가 정의 된 후 발생하는 첫 번째 루프의 첫 번째는 하나를 클릭 할 때 각 테이블 제목 셀의 각 상태를 설정합니다. 클래스는 테이블이 현재 정렬 된 제목 셀을 식별하기 위해 유지 될뿐만 아니라 각 셀에 특수 SortOrder 속성이 유지되어 해당 열이 정렬 된 순서를 결정합니다. 처음에는 열이 내림차순으로 정렬되지만 제목 셀을 두 번 연속으로 클릭하면 정렬 순서가 오름차순 시퀀스를 반영하도록 변경됩니다. 각 제목 셀은 가장 최근에 나타난 정렬 순서 상태를 기억하며, 제목 셀이 재선 될 때 컬럼이 해당 상태로 되돌아갑니다. 클릭 한 제목 셀에 대한 하이퍼 링크의 제목은 현재 정렬 순서에 따라 다시 작성됩니다. 사용자가 다시 클릭하면 정렬 순서가 무엇인지 입니다.
<lo> 루프의 두 번째는 테이블 본문에 포함 된 각 행을 정렬합니다. 원래 tbody의 사본은 재정렬 된 테이블 행을 저장하기 위해 만들어졌으며 처음에는이 사본이 비어 있습니다. 원래 tbody의 각 행이 스캔되면, 정렬중인 열의 테이블 셀의 내용은 이미 사본의 행과 비교됩니다.
<find> 테이블 셀의 내용을 찾으려면 getInternalText 기능을 사용합니다.
<p>
</p>
<ol> SortColumn은 정렬 된 테이블 셀 값이 스캔하는 것보다 "낮은"사본에서 행을 찾으면 스캔 한 행의 사본을 복사 된 tbody에 삽입합니다. 오름차순 순서의 열의 경우, 우리는 간단히이 비교를 뒤집습니다. 사본의 행 값은 스캔 한 행보다 "더 큰"값이어야합니다.
<a> 그러나 비교가 이루어지기 전에 정렬 된 테이블 셀의 내용이 정수 또는 플로트로 해석 될 수 있는지 확인합니다. 그렇다면 비교 값이 변환됩니다. 이것은 숫자를 포함하는 열이 올바르게 정렬되어 있는지 확인합니다. 문자열 비교는 숫자 비교와 다른 결과를 생성합니다
<our> 일단 우리의 모든 원래 행을 새로운 tbody에 복사하면 해당 요소는 이전 행을 대체하는 데 사용되며 정렬 된 테이블이 있습니다! <p>.
<abled> 현재 정렬 된 테이블 제목 제목 셀에 할당 된 SortabledEscending 및 SortAbsending 클래스를 사용하여 CSS를 사용하여 표를 정렬 한 것처럼 표현하는 방법과 "네 번째 열에 내려 오는 순서로 정렬 된 정렬 테이블"및 "정렬 가능한 테이블은 두 번째 열에 정렬 된 정렬"
</abled></p> <p>
그림 13.2. 네 번째 열에서 내림차순으로 정렬 된 정렬 가능한 테이블 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><ul > <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
<br>
<script type="text/javascript" src="menu.js"></script></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript" src="menu.js"></script> <br>
<br>
<noscript> <br>
<ul> <br>
<li><a href="/">Home</a></li> <br>
<li><a href="/about/">About</a></li> <br>
<li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
</noscript></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p>
그림 13.3. 두 번째 열에서 오름차순 순서로 정렬 된 테이블 </p> <p></p>
<h5> 요약
<pill> DHTML의 두 가지 주요 기둥은 이벤트 캡처와 DOM을 통한 페이지 요소의 개편 및 생성입니다. 이러한 원칙을 사용하면 사용자가 페이지와 상호 작용하는 다양한 방법을 캡처하고 그에 따라 인터페이스에 응답 할 수 있습니다.
<seen> 현재 사용 가능한 JavaScript 강화 웹 응용 프로그램의 수와 품질로 볼 수 있듯이 DHTML 기능은 새로운 인터페이스에 가져올 수있는 기능은 혁신적인 JavaScript의 가장 큰 성장 영역 중 하나를 나타냅니다. 이 장에 표시된 기초와 기본 예는 사용자의 브라우저 내부에서 전달할 수있는 힘을 제공합니다. 우리는 정말 흥미로운 인터페이스를 구축 할 때 다음 장에서 더 확장 할 것입니다.
<for> javaScript 선집 샘플 : 101 필수 팁, 트릭 및 해킹 . 다음은 무엇입니까?
<as> 오프라인을 읽기 위해이 샘플을 PDF로 다운로드하십시오. 책의 목차를 확인하여 다른 내용을 확인하십시오. 그리고 다른 사람들 이이 책에 대해 어떻게 생각하는지 - <p> </p> javaScript 선집의 라이브 고객 리뷰 : 101 필수 팁, 트릭 및 해킹 <p>. .
<questions> javaScript에 대한 자주 묻는 질문 (FAQ)은 처음부터 입니다
<importance> 웹 개발에서 JavaScript의 중요성은 무엇입니까? <p> <em> JavaScript는 웹 개발에서 중요한 구성 요소입니다. 웹 페이지에서 복잡한 기능을 구현할 수있는 프로그래밍 언어입니다. 웹 페이지가 적시 컨텐츠 업데이트, 대화식지도, 애니메이션 그래픽 또는 비디오 주크 박스 스크롤과 같은 정적 정보를 표시하는 것 이상으로 JavaScript가 관련됩니다. 그것은 우리가 이전 기사에서 광범위하게 사용한 두 가지 (HTML과 CSS)의 표준 웹 기술의 세 번째 층입니다. </em> 어떻게 자바 스크립트를 처음부터 배우기 시작할 수 있습니까? </p> <p> 스크래치에서 Javascript를 배우기 시작하면 더 작게 관리 할 수있는 경우 관리가 가능합니다. 웹 개발의 기초를 형성 할 때 HTML 및 CSS의 기본 사항을 이해하여 시작하십시오. 그런 다음 변수, 데이터 유형, 기능, 루프 및 조건부와 같은 JavaScript 기본 사항으로 점차적으로 이동할 수 있습니다. 연습은 JavaScript를 배우는 데 핵심이므로 정기적으로 코드를 조정하십시오. <em> 초보자가 JavaScript를 학습 할 때 초보자가 저지르는 일반적인 실수는 무엇입니까? </em> JavaScript를 배우는 경우 JavaScript와 Java의 차이를 이해하지 못하고 기본 사항을 충분히 이해하지 못하고 충분히 실천하지 않는 경우에는 초보자가 저지르는 일부 일반적인 실수입니다. JavaScript는 고유 한 개념과 구조를 가진 고유 한 언어이며, 더 복잡한 주제로 넘어 가기 전에 이것을 이해하는 것이 중요합니다. 배운 개념의 정기적 인 연습 및 적용은 JavaScript를 마스터하는 데 중요합니다. </p>
<j> 사전 프로그래밍 경험없이 JavaScript를 배울 수 있습니까? <h3> </h3> 예, 사전 프로그래밍 경험없이 JavaScript를 배울 수 있습니다. 프로그래밍에 대한 배경 지식을 갖추면 학습 과정이 더 쉬워 질 수 있지만 전제 조건은 아닙니다. JavaScript는 종종 웹 개발에 대한 용서 구문과 광범위한 사용으로 인해 초보자에게 좋은 모국어로 권장됩니다. <p> 스크래치에서 JavaScript를 배우는 데 얼마나 걸립니까? </p> <h3> 스크래치에서 자바 스크립트를 배우는 데 걸리는 시간은 이전 경험에 따라 크게 다를 수 있으며, 배우기 위해 헌신 할 수있는 시간, 배울 수있는 지식에 의존 할 수 있습니다. 평균적으로, 처음부터 시작하여 매일 몇 시간 동안 헌신한다면, 몇 주에서 몇 달 안에 기본 사항을 배울 수 있습니다. </h3> <p> JavaScript를 배우는 가장 좋은 리소스는 무엇입니까? </p> <h3> JavaScript를 배우는 데 사용할 수있는 수많은 리소스가 있습니다. Codecademy, Udemy 및 Freecodecamp와 같은 온라인 플랫폼은 포괄적 인 과정을 제공합니다. “Eloquent JavaScript”및“You No No Mone JS”와 같은 책도 적극 권장됩니다. 또한 Mozilla Developer Network (MDN)는 JavaScript에 대한 광범위한 문서를 가지고 있습니다. </h3> 프론트 엔드 개발에 JavaScript가 어떻게 사용됩니까? </j></importance></questions></p> 프론트 엔드 개발에서 JavaScript는 웹 페이지를 역동적이고 대화식으로 만드는 데 사용됩니다. 슬라이더, 양식 검증, 팝업 등과 같은 기능을 만드는 데 사용할 수 있습니다. 또한 문서 개체 모델 (DOM)을 조작하여 웹 페이지의 내용과 레이아웃을 실시간으로 변경할 수 있습니다. <h3> 백엔드 개발에 JavaScript를 사용할 수 있습니까? </h3> 예, JavaScript를 백엔드 개발에 사용할 수 있습니다. Node.js는 서버에서 JavaScript를 실행할 수있는 JavaScript 런타임입니다. node.js를 사용하면 JavaScript 만 사용하여 전체 웹 응용 프로그램을 구축 할 수 있습니다. <p> JavaScript 프레임 워크 및 라이브러리는 무엇이며 유용한 이유는 무엇입니까? </p> JavaScript 프레임 워크 및 라이브러리는 복잡한 코딩 작업을 단순화하는 데 사용될 수있는 사전 작성된 JavaScript 코드입니다. 이들은 JavaScript 코드의 구조를 제공하여 대규모, 유지 관리 가능하며 확장 가능한 웹 응용 프로그램을보다 쉽게 구축 할 수 있도록합니다. 예를 들어 React.js, Angular.js 및 Vue.js. <h3> </h3> JavaScript의 미래는 무엇입니까? <p> JavaScript는 웹 개발에서 계속 지배적 인 힘이되고 미래는 유망한 것처럼 보입니다. React, Angular 및 Vue와 같은 프레임 워크가 증가함에 따라 JavaScript는 점점 더 강력하고 다재다능 해지고 있습니다. 또한 Node.js의 개발은 JavaScript의 서버 사이드까지 확장되어 전체 스택 언어로 확장되었습니다. 웹 응용 프로그램이 계속 복잡 해짐에 따라 숙련 된 JavaScript 개발자에 대한 수요는 여전히 높아질 것입니다. </p></as></for></seen></pill>
</h5></our></a>
</ol></find></lo></lo>
</ol></with></er></em></need></p></exception></the></det></ident></p></the></is></s></p></cod></oration></are></tool>
</h5></to></that></differ></many></of></want></ers></click></bub></these></thinking></p></is></this></a></event></a></event></you></em></ref></p></you></the></to></dom></if></the></expl></of></p></dom></be></with></ed></er></way></:></ways></that></basic></the></the></em></ies></p></say></ways></have>
</li></ames>
</ul></ames></ames></ames></ames></collection></to></to></ref></a></in></a></interpret></ict></ite></window></those></p></op></to></p></if></that></mechan></status>
</tr></to></li>
</ul></not></with></ify></say></quite></this></feel></about></ec></em></rem></p></cl></in></classes></rem>
</h5></the></find></a></p></off></easy></ing></am></ume></then></to></the></ert></to></the></dom></p></ment></ert></the></goes></lode.previoussibling></lode.nextsibling></lode.parentnode></lode.lastchild></lode.firstchild></lode.childnodes-></p></list></two></el></the></ieve></the></that></possible></p></use></atch></atch></you></function></p></gather></.></gives></use></doesn></p></adv></that></press></p></the></ever></av></you></em></p></method></is></multiple></sus></ip></ip></ing></cript></ibute></ibute></the></an></most></p></would>
위 내용은 스크립트 스마트 : 처음부터 품질 자바 스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
