이 글은 주로 HTML에서 JavaScript를 사용하는 방법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다. 태그 </strong></span></p> <p> HTML5에서 스크립트에는 주로 다음과 같은 속성이 있습니다: async, defer, charset, src, type, </p> <ul class=" list-paddingleft-2"><li><p>async (선택 사항): </p></li></ul> <p> 키워드: 비동기 스크립트 , 외부 파일, 즉시 다운로드 </p> <p> 태그에 이 속성이 포함되어 있으면 스크립트(외부 파일)가 즉시 다운로드됩니다. 다운로드하는 동안 페이지에서 다른 작업을 수행할 수 있습니다. 다운로드가 완료되고 실행 후 계속해서 파싱을 진행하지만 실행 순서는 보장되지 않습니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><script src="js/index2.js" async="async"> 로그인 후 복사defer(선택 사항): 키워드: 지연된 스크립트, 외부 파일, 지연된 로드 태그에 이 속성이 포함되어 있으면 스크립트는 페이지가 완전히 구문 분석되거나 표시될 때까지 기다릴 수 있습니다. 외부 파일에 유효합니다. 동시에 지연으로 인해 두 개의 스크립트가 있는 경우 전자는 후자의 실행으로 제한됩니다. 로그인 후 복사charset (선택): 키워드: 문자 집합 대부분의 브라우저는 그 값을 무시했기 때문에 사용하는 사람이 거의 없습니다. src (선택): 키워드: 외부 참조 참조해야 하는 외부 파일의 주소를 나타냅니다. type(선택): 키워드: MIME(스크립팅 언어 콘텐츠 유형) 브라우저 호환성을 극대화하기 위해 유형 속성 값은 주로 text/javascript입니다. 이 속성을 쓰지 않으면 기본값이 됩니다. 여전히 텍스트/자바스크립트입니다. 참고: 외부 파일을 참조할 때 태그에 다른 JS 코드를 추가하지 마세요. 구문 분석 시 브라우저는 src에서 참조하는 외부 스크립트 파일만 다운로드하며 테이블에 포함된 코드는 무시됩니다. 태그의 위치 </strong></span></p> <p> 일반적으로 태그 내부의 <head>에 외부 파일(CSS 파일, JavaScript 파일 포함)이 있는 태그에 대한 참조를 넣습니다. </p> <p> 그러나 구문 분석 과정에서 여러 JavaScript 외부 파일이 발견되면 모든 외부 파일이 로드될 때까지 페이지를 완전히 표시할 수 없으므로 일반적으로 다음과 같이 <body> 태그 하단에 배치합니다. </p> <p style="text-align: center"><img src="https://img.php.cn/upload/article/000/192/893/ac6f5bea3de83af42bfe96a35c51e1c3-0.png" alt=""></p> <p> 위에서 언급한 것처럼 <script>에 defer 속성이 있지만 HTML5에서 언급했듯이 HTML5에서는 포함된 스크립트에 의해 설정된 defer 속성을 무시합니다. 현재는 IE4~IE7에서만 defer 속성을 지원합니다. , IE8은 HTML5 표준을 완전히 따르므로 <script> 태그를 <body> 태그 아래에 배치하는 것이 가장 좋습니다. </p> <p><span style="color: #ff0000"><strong> 외부 파일 참조의 장점</strong></span></p> <ul class=" list-paddingleft-2"> <li><p> 유지 관리에 도움이 됩니다. 모든 JavaScript 파일을 함께 사용하면 HTML 코드를 건드릴 필요가 없을 뿐만 아니라 개발자가 코드를 더 쉽게 작성하고 유지 관리할 수 있습니다. </p></li> <li><p>탐색 속도 향상: 여러 HTML 페이지가 동일한 JavaScript 외부 파일을 참조하는 경우 이 파일은 한 번만 로드(캐시됨)되므로 페이지 로드 속도가 빨라질 수 있습니다. </p></li> <li><p>안전: 외부 파일을 참조할 때 사용자가 HTML 코드를 보면 JavaScript 코드가 표시되지 않으므로 태그 내에 작성하는 것보다 더 안전합니다. </p></li> </ul> <p><span style="color: #ff0000"><strong><noscript> 태그 </strong></span></p> <p> 말 그대로 NO-script, no script입니다. 즉, 브라우저가 JavaScript를 지원하지 않으면 <noscript> 태그의 내용이 표시됩니다. </p> <ul class=" list-paddingleft-2"> 브라우저는 스크립트를 지원하지 않습니다. <li><p></p></li>브라우저는 스크립트를 지원하지만 JavaScript는 비활성화되어 있습니다. <li><p></p></li> 위의 두 조건 중 하나라도 충족되면 <noscript> </ul> <p></p> <p style="text-align: center"><img src="https://img.php.cn/upload/article/000/192/893/ac6f5bea3de83af42bfe96a35c51e1c3-1.png" alt=""> 위 페이지는 브라우저가 JavaScript를 지원하지 않거나 비활성화한 경우에만 표시되는 메시지를 사용자에게 제공합니다. 그렇지 않으면 사용자는 해당 메시지를 볼 수 없으며 페이지의 다른 요소 표시에 영향을 미치지 않습니다. . </p> <p>요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. </p> <p>관련 권장사항: </p> <p></p>HTML에 CSS를 도입하는 방법<p><a href="http://www.php.cn/p-tutorial-396350.html" target="_blank"></a></p>HTML5 저장소 저장소에 대한 자세한 설명<p><a href="http://www.php.cn/p-tutorial-396347.html" target="_blank"><p><a href="http://www.php.cn/p-tutorial-396339.html" target="_blank">HTML5 쿼리 페이지 생성 예시</a></p></a></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
