>  기사  >  웹 프론트엔드  >  HTML에서 JavaScript를 사용하는 방법

HTML에서 JavaScript를 사용하는 방법

墨辰丷
墨辰丷원래의
2018-06-04 14:43:501914검색

이 글은 주로 HTML에서 JavaScript를 사용하는 방법을 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그

HTML5에서 스크립트에는 주로 다음과 같은 속성이 있습니다: async, defer, charset, src, type,

  • async (선택 사항):

  키워드: 비동기 스크립트 , 외부 파일, 즉시 다운로드

 태그에 이 속성이 포함되어 있으면 스크립트(외부 파일)가 즉시 다운로드됩니다. 다운로드하는 동안 페이지에서 다른 작업을 수행할 수 있습니다. 다운로드가 완료되고 실행 후 계속해서 파싱을 진행하지만 실행 순서는 보장되지 않습니다.

<script src="js/index2.js" async="async"></script>  
  • defer(선택 사항):

키워드: 지연된 스크립트, 외부 파일, 지연된 로드

태그에 이 속성이 포함되어 있으면 스크립트는 페이지가 완전히 구문 분석되거나 표시될 때까지 기다릴 수 있습니다. 외부 파일에 유효합니다. 동시에 지연으로 인해 두 개의 스크립트가 있는 경우 전자는 후자의 실행으로 제한됩니다.​

<script src="js/index1.js" defer="defer"></script>
  • charset (선택):

​ 키워드: 문자 집합

대부분의 브라우저는 그 값을 무시했기 때문에 사용하는 사람이 거의 없습니다.

  • src (선택):

   키워드: 외부 참조

  참조해야 하는 외부 파일의 주소를 나타냅니다.

  • type(선택):

  키워드: MIME(스크립팅 언어 콘텐츠 유형)

  브라우저 호환성을 극대화하기 위해 유형 속성 값은 주로 text/javascript입니다. 이 속성을 쓰지 않으면 기본값이 됩니다. 여전히 텍스트/자바스크립트입니다.

 참고: 외부 파일을 참조할 때 태그에 다른 JS 코드를 추가하지 마세요. 구문 분석 시 브라우저는 src에서 참조하는 외부 스크립트 파일만 다운로드하며 테이블에 포함된 코드는 무시됩니다.

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 위치

일반적으로 태그 내부의 93f0f5c25f18dab9d176bd4f6de5d30e에 외부 파일(CSS 파일, JavaScript 파일 포함)이 있는 태그에 대한 참조를 넣습니다.

 그러나 구문 분석 과정에서 여러 JavaScript 외부 파일이 발견되면 모든 외부 파일이 로드될 때까지 페이지를 완전히 표시할 수 없으므로 일반적으로 다음과 같이 6c04bd5ca3fcae76e30b72ad730ca86d 태그 하단에 배치합니다.

위에서 언급한 것처럼 3f1c4e4b6b16bbbd69b2ee476dc4f83a에 defer 속성이 있지만 HTML5에서 언급했듯이 HTML5에서는 포함된 스크립트에 의해 설정된 defer 속성을 무시합니다. 현재는 IE4~IE7에서만 defer 속성을 지원합니다. , IE8은 HTML5 표준을 완전히 따르므로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 6c04bd5ca3fcae76e30b72ad730ca86d 태그 아래에 배치하는 것이 가장 좋습니다.

외부 파일 참조의 장점

  • 유지 관리에 도움이 됩니다. 모든 JavaScript 파일을 함께 사용하면 HTML 코드를 건드릴 필요가 없을 뿐만 아니라 개발자가 코드를 더 쉽게 작성하고 유지 관리할 수 있습니다.

  • 탐색 속도 향상: 여러 HTML 페이지가 동일한 JavaScript 외부 파일을 참조하는 경우 이 파일은 한 번만 로드(캐시됨)되므로 페이지 로드 속도가 빨라질 수 있습니다.

  • 안전: 외부 파일을 참조할 때 사용자가 HTML 코드를 보면 JavaScript 코드가 표시되지 않으므로 태그 내에 작성하는 것보다 더 안전합니다.

2b0b25ff593c5b6c03403dd6234ffb2c 태그

말 그대로 NO-script, no script입니다. 즉, 브라우저가 JavaScript를 지원하지 않으면 2b0b25ff593c5b6c03403dd6234ffb2c 태그의 내용이 표시됩니다.

    브라우저는 스크립트를 지원하지 않습니다.
  • 브라우저는 스크립트를 지원하지만 JavaScript는 비활성화되어 있습니다.
  • 위의 두 조건 중 하나라도 충족되면 2b0b25ff593c5b6c03403dd6234ffb2c

 위 페이지는 브라우저가 JavaScript를 지원하지 않거나 비활성화한 경우에만 표시되는 메시지를 사용자에게 제공합니다. 그렇지 않으면 사용자는 해당 메시지를 볼 수 없으며 페이지의 다른 요소 표시에 영향을 미치지 않습니다. .

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

관련 권장사항:

HTML에 CSS를 도입하는 방법

HTML5 저장소 저장소에 대한 자세한 설명

HTML5 쿼리 페이지 생성 예시

위 내용은 HTML에서 JavaScript를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.