JavaScript 코드를 어디에 배치할까요?
일반적으로 JavaScript 코드는 HTML 코드와 함께 사용되며 JavaScript 코드는 HTML 문서의 어느 곳에도 배치 할 수 있습니다. 그러나 배치 된 장소는 아래에 설명 된대로 JavaScript 코드의 일반 실행에 특정 영향을 미칩니다.
<head> </head> 사이에 배치되었습니다
HTML 문서에 <head> </head> 태그 사이에 JavaScript 코드를 배치하는 것이 일반적입니다. HTML 문서는 브라우저에서 위에서 아래로로드되므로 <head> </head> 태그 사이에 JavaScript 코드를 배치하여 스크립트를 사용하기 전에로드되었는지 확인하십시오.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
...
자바 스크립트 코드
...
</스크립트>
</head>
.... ....
<body> </body> 사이에 배치되었습니다
<body> </body> 사이에 JavaScript 코드가 배치되는 경우도 있습니다. 다음과 같은 상황을 상상해보십시오. HTML 요소를 조작 해야하는 JavaScript 코드가 있습니다. 그러나 HTML 문서는 브라우저에서 위에서 아래로로드되므로 HTML 요소가로드되지 않고 오류 (객체가 존재하지 않음)를 피하기 위해 HTML 요소를 조작 할 때 JavaScript 코드에 의해보고됩니다. 따라서이 코드는 HTML 요소 뒤에 작성해야합니다. 예제는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
</head>
<body>
</body>
<div id = "div1"> </div>
<script type = "text/javaScript">
document.getElementById ( "div1"). innerHtml = "테스트 텍스트";
</스크립트>
</html>
그러나 일반적으로 페이지 요소의 작동은 일반적으로 이벤트에 의해 주도 되므로이 상황은 드 rare니다. 또한 <html> </html> 외부에 JavaScript 코드를 작성하지 않는 것이 좋습니다.
힌트
html 문서가 xhtml로 선언 된 경우 <cript> </script> 태그는 cdata 섹션 내에서 선언되어야합니다. 그렇지 않으면 xhtml은 <script> </script> 태그를 다른 XML 태그로 구문 분석하고 내부의 JavaScript 코드가 정상적으로 실행되지 않을 수 있습니다. 따라서 엄격한 XHTML에서 JavaScript를 사용하면 다음 예제와 마찬가지로 선언해야합니다.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
<! [cdata [
자바 스크립트 코드
]]>
</스크립트>
</head>
.... ....
JavaScript 코드를 HTML 문서에 작성하는 위의 두 가지 방법은 HTML 문서 내에서 JavaScript 코드를 참조하는 방법입니다. 내부 참조 외에도 외부 참조도 사용할 수 있습니다.
JavaScript 코드에 대한 외부 참조
javaScript 코드 (<Script> </script> 태그 제외) MyScript.js와 같은 JS 접미사로 명명 된 별도의 문서를 작성하고 HTML 문서 <Script> </script> 태그에서 SRC 속성을 사용하여 파일을 참조하십시오.
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript"src = "myscript.js"> </script>
</head>
.... ....
외부 참조 JavaScript 코드를 사용한 후에 이점이 분명합니다.
1. JavaScript 코드에서 <!-... //-> 사용하지 마십시오
2. 못생긴 cdatas를 사용하지 마십시오
3. 공개 JavaScript 코드는 다른 HTML 문서에서 복제 될 수 있으며, 이는 JavaScript 코드의 통합 유지 보수에도 도움이됩니다.
4. HTML 문서는 더 작아 검색 엔진 컬렉션에 도움이됩니다.
5. 단일 JavaScript 파일을 압축하고 암호화 할 수 있습니다
6. 브라우저는 JavaScript 파일을 캐시하여 광대역 사용을 줄일 수 있습니다 (여러 페이지가 JavaScript 파일을 동시에 사용하는 경우 일반적으로 한 번만 다운로드하면됩니다).
7. Document.Write (2> 1)와 같은 복잡한 HTML 엔티티 사용을 피하십시오.
외부 파일로 JavaScript 코드를 형성하면 서버에서 HTTP 요청의 부담이 증가합니다. 매우 높은 동시 요청 환경에서 이것은 좋은 전략이 아닙니다. 또한 외부 JS 파일을 참조 할 때 파일의 올바른 경로에주의를 기울여야합니다.