집 > 기사 > 웹 프론트엔드 > HTML의 스크립트 태그에 대해 알아보기

HTML의 스크립트 태그에 대해 알아보기

青灯夜游앞으로: 2020-07-06 10:24:274663검색

웹페이지 작성을 조금 배운 학생들이라면 모두 스크립트 태그에 웹페이지의 js 코드를 작성해야 한다는 사실을 알겠지만, 왜 이렇게 할까요? 이 기사에서는 스크립트 태그를 소개합니다.

script 태그

처음에 넷스케이프는 브라우저에서 js를 사용하여 HTML 파일을 표시하고 싶었지만 다른 브라우저에서는 이 파일의 표시 효과에 영향을 주고 싶지 않았기 때문에 스크립트 태그를 만들었습니다

우리 모두는 태그를 알고 있습니다. 스크립트 태그에는 다음과 같은 속성이 있습니다.

async는 인터페이스의 다른 작업을 방해하지 않는 스크립트를 즉시 다운로드하는 것을 의미합니다.
src는 이 스크립트를 실행하기 위한 외부 파일을 의미합니다.
charset는 선택 사항입니다. src 지정 외부 파일
defer 스크립트의 문자 집합은 문서가 구문 분석되어 표시될 때까지 지연됩니다. 선택 사항
언어는 더 이상 사용되지 않습니다.
type은 언어 속성을 바꾸는 데 사용됩니다. javascript이므로 일반적으로 이 매개변수를 지정할 필요가 없습니다.

<script type="text/javascript">
    // 属性设置
    function SayHi(){
        alert("Hi");
    }
</script>

<!-- 注意下面的写法    /> 这么写本身没有问题，但是不能在html中使用这种语法，因为这样会打乱html的解析 -->
<script type="text/javascript" src="2.js"/>
// 必须写成下面的样子
<script type="text/javascript" src="2.js"></script>

참고:

통역사가 스크립트 태그의 코드를 평가하기 전에 페이지의 나머지 콘텐츠는 브라우저에 의해 로드되거나 표시되지 않습니다.
태그에 src가 포함된 js 코드가 있으면 무시되므로 일단 src를 작성한 후에는 코드를 작성해서는 안 됩니다.
외부 파일을 사용하여 js를 작성하세요. 임베디드 js를 가능한 한 적게 사용하세요. 이렇게 하면 유지 관리가 쉽고 js는 두 페이지가 같은 js를 사용하면 캐시될 수 있습니다

스크립트 태그 위치

원래는 태그가 헤더에 있어야 하는데 헤더에 있기 때문에 페이지가 안 뜹니다. js가 로드될 때 렌더링됩니다(페이지만 렌더링이 본문에 로드될 때까지 시작되지 않음). 페이지가 오랫동안 공백으로 나타나므로 이제 본문 끝에 넣습니다

<body>
...

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
</body>

추가한 후 defer 속성을 스크립트에 넣으면 이론적으로 실행 지연의 목적을 달성할 수 있지만, 브라우저마다 defer를 지원하기 때문에(실행 순서가 불확실하고, 임베디드 js는 defer를 지원하지 않습니다.) 위의 작성방법을 따라 본문의 마지막에 작성하는 것이 가장 좋습니다.

async 속성은 또한 스크립트의 비동기 로딩 문제를 해결하기 위한 것이기도 합니다. 또한 원래는 defer와 차이점은 순서대로 로드를 연기하고 비동기는 순서대로 로드하지 않는다는 것입니다. 실제 사용에서는 브라우저가 이를 지원하지 않습니다. 속성 지원도 다릅니다. 두 속성 모두 DOMContentLoaded 이전에 스크립트의 순차적 실행과 실행을 보장할 수 없으므로 브라우저가 완전히 지원할 때까지 이 속성을 사용하지 않는 것이 가장 좋습니다.

Tag

브라우저가 js를 비활성화하거나 브라우저가 js를 전혀 지원하지 않는 경우(물론 지금은 이런 일이 드물지만) 원활하게 성능 저하가 필요하므로 noscript 태그가 필요합니다

그 기능은 다음과 같습니다. 위에서 언급한 상황이 발생합니다. noscript에서 콘텐츠를 표시할 때 아래 예시를 참고하세요.

<html>
    <head>
        <script src="2.js"></script>
    </head>
    <body>
        <noscript>
            <p>本页面需要浏览器支持（启用）JavaScript</p>
        </noscript>
    </body>
</html>

브라우저에서 JS가 활성화되어 있으면 이 태그의 콘텐츠가 표시되지 않습니다.

HTML의 스크립트 태그에 대해 알아보기

script 태그

관련 기사