1. HTML에 Javascript를 삽입하는 방법은 <script>와 </script> 태그 쌍 사이에 Javascript 코드를 직접 배치하는 것입니다. <script /> 태그의 src 속성을 사용하여 외부 js 파일을 구성하고 여기에 배치합니다. 다음과 같은 이벤트 핸들러: <p onclick="alert('나는 onclick 이벤트에 의해 실행되는 자바스크립트입니다.')">나를 클릭하세요</p>
URL의 본문으로 이 URL은 다음과 같은 특수 Javascript: 프로토콜을 사용합니다. <a href="javascript:alert('나는 javascript: 프로토콜에 의해 실행되는 javascript입니다.')">나를 클릭하세요</a>
새로운 javascript 코드를 작성하려면 javascript 자체의 document.write() 메소드를 사용하십시오. Ajax를 사용하여 javascript 코드를 비동기적으로 얻은 다음
작성된 Javascript가 실행되기 전에 3번째 및 4번째 메소드를 실행해야 합니다. 특별히 설정되어 있으면 페이지가 실행되지 않습니다.
2. 페이지의 Javascript 실행 순서 페이지의 Javascript 코드는 HTML 문서의 일부이므로 페이지가 로드될 때 Javascript가 실행되는 순서는 소개 태그 <script />가 나타나는 순서입니다. . <script /> 태그 또는 src를 통해 가져온 외부 JS는 해당 문이 나타나는 순서대로 실행되며 실행 프로세스는 문서 로딩의 일부입니다.
각 스크립트에서 정의한 전역 변수와 함수는 나중에 실행되는 스크립트에서 호출할 수 있습니다.
변수 호출은 이전에 선언되어 있어야 합니다. 그렇지 않으면 얻은 변수 값이 정의되지 않습니다.
<script type="text/javscrpt">//<![CDATA[
경고(tmp); //정의되지 않은 출력
var tmp = 1;
경고(tmp); //출력 1
//]]></script>
동일한 스크립트에서 함수 정의는 함수 호출 뒤에 나타날 수 있습니다. 그러나 두 개의 코드에 있고 함수 호출이 첫 번째 코드에 있는 경우 정의되지 않은 함수 오류가 보고됩니다.
<script type="text/javscrpt">//<![CDATA[
aa(); //브라우저 오류
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa(); //출력 1
함수 aa(){alert(1);}
//]]></script>
document.write()는 스크립트 문서의 위치에 출력을 씁니다. 브라우저는 documemt.write()가 있는 문서의 내용을 구문 분석한 후 document.write()에 의해 출력된 내용을 계속 구문 분석합니다. 그런 다음 계속해서 HTML 문서를 구문 분석합니다.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("나는" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
경고(3);
//]]></script>
test.js의 내용은 다음과 같습니다:
var tmpStr = 1;
경고(tmpStr);
Firefox 및 Opera의 팝업 값 순서는 1, 2, 나는 1, 3입니다.
IE의 팝업 값 순서는 2, 1, 3입니다. 동시에 브라우저는 다음과 같은 오류를 보고합니다. tmpStr이 정의되지 않았습니다. 이유는 IE가 SRC의 Javascript 코드를 기다리지 않기 때문일 수 있습니다. document.write 시 다음 라인을 실행하기 전에 로드되므로 2가 먼저 나타나고 document.write('document.write("I am" + tmpStr)')가 실행되어 tmpStr이 호출되면 tmpStr이 정의되지 않습니다. , 오류가 발생했습니다.
이 문제를 해결하려면 HTML 구문 분석 원칙을 사용하여 하나의 HTML 태그를 구문 분석한 후 다음 태그를 실행하고 코드를 분할하여 이를 달성할 수 있습니다.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript">');
document.write('alert(2);')
document.write('alert("나는" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
경고(3);
//]]></script>
이런 식으로 IE와 다른 브라우저에서 출력 값의 순서는 1, 2, I am 1, 3으로 일관됩니다.
3. onload를 사용하여 페이지에서 Javascript의 실행 순서를 변경하는 방법
<script type="text/javascript">//<![CDATA[
window.onload = f;
함수 f(){경고(1);}
경고(2);
//]]></script>
출력값의 순서는 2, 1이다.
winodws.onload가 여러 개 있는 경우 가장 효과적인 것만 적용됩니다. 해결 방법은
window.onload = function(){f();f1();f2();....
입니다.. }
레벨 2 DOM 이벤트 유형 활용
if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}또 다른{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}
Defer는 IE에서 사용할 수 있으며, 문서가 로드된 후에 실행되는 기능이지만 window.onload의 제한 사항은 없습니다. .onload 반복해서 사용할 수 있지만 IE에서만 유효하므로 위의 예를 다음과 같이 수정할 수 있습니다.
<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("나는" + tmpStr);');
document.write('</script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
경고(3);
//]]></script>
이런 식으로 IE는 오류를 보고하지 않으며 출력 값의 순서는 1, 3, 2, I am 1이 됩니다.
HTML 파서는 스크립트를 발견하면 평소대로 문서 구문 분석을 종료해야 하며 스크립트가 실행될 때까지 기다립니다. 이 문제를 해결하기 위해 HTML4 표준에서는 defer를 정의합니다. defer를 사용하면 브라우저에 HTML 문서 구문 분석을 계속하고 스크립트 실행을 지연하라는 메시지가 표시됩니다. 이 지연은 스크립트가 외부 파일에서 로드될 때 매우 유용하므로 브라우저는 실행을 계속하기 전에 모든 외부 파일이 로드될 때까지 기다릴 필요가 없으므로 성능을 효과적으로 향상시킬 수 있습니다. IE는 현재 defer 속성을 지원하는 유일한 브라우저이지만 지연된 스크립트는 지연되지 않은 다음 스크립트까지만 지연되는 것이 아니라 항상 문서 끝까지 지연되기 때문에 IE는 defer 속성을 올바르게 구현하지 않습니다. 이는 IE에서 지연된 스크립트의 실행 순서가 매우 혼란스럽고 후속 지연되지 않은 스크립트에 필요하지 않은 함수 및 변수를 정의할 수 없음을 의미합니다. IE의 모든 연기 스크립트 실행 시간은 HTML 문서 트리가 설정된 후 window.onload 이전이어야 합니다.
Ajax를 활용해보세요.
xmlhttpRequest는 외부 문서의 로드 상태를 확인할 수 있으므로 코드의 로드 순서를 변경할 수 있습니다.