HTML에서 JS 메소드 사용 요약

이번에는 HTML에서 JS를 사용하는 방법에 대해 요약해보겠습니다. HTML에서 JS를 사용할 때 주의사항은 무엇인가요?

Foreword

JavaScript는 브라우저에 내장된 스크립트 언어입니다. 웹페이지에 자바스크립트 스크립트가 삽입되어 있고 브라우저가 웹페이지를 로드하면 스크립트를 실행하여 브라우저를 작동하고 다양한 동적 효과를 얻습니다.

웹페이지에 자바스크립트 코드를 삽입하는 방법

1. ;script> code> 요소는 코드를 직접 삽입합니다

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

<script>元素直接嵌入代码

<script type="text/javascript" src="example.js"></script>

2、<script>元素加载外部脚本

<script src="a.js" defer></script>
<script src="b.js" defer></script>

<script>标签相关属性

type属性

• <script>标签默认就是JavaScript代码，嵌入javascript脚本时，type属性可以省略

• 如果type属性的值，浏览器不认识，就不会执行其中的代码，所以可以在<script>标签中嵌入任意的文本内容，只要加上一个浏览器不认识的type属性就行，浏览器不会执行也不会显示它的内容，但是这个<script>节点依然存在于DOM之中，可以使用<script>节点的text属性读取它的内容

defer属性

<script src="a.js" async></script>
<script src="b.js" async></script>

defer属性的运行流程：

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有defer属性的<script>元素

3. 浏览器继续往下解析HTML网页，同时并行下载<script>元素加载的外部脚本

4. 浏览器完成解析HTML网页，此时再回过头执行已经下载完成的脚本

需要注意：

• 异步加载资源

• 按照顺序执行脚本

• 使用defer加载的外部脚本不应该使用document.write方法

async属性

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

async属性的运行流程：

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有async属性的<script>标签

3. 浏览器继续往下解析HTML网页，同时并行下载<script>标签中的外部脚本

4. 脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本

5. 脚本执行完毕，浏览器恢复解析HTML网页

需要注意：

• 异步加载资源

• 并不会按照顺序执行JS，谁先下载完，谁就先执行

• 使用async加载的外部脚本不应该使用document.write方法

async和defer属性归纳

• 都能解决“阻塞效应”

• 都是异步加载资源，但执行顺序不一样

• 如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性

动态生成脚本

rrreee

• 不会阻塞页面渲染

• async设置为false可以保证b.js在a.js后面执行

• 在这段代码后面加载的脚本文件，会等在b.ja执行完成后再执行

相关知识点总结

1. 包含在<script>2, <script>요소는 외부 스크립트를 로드합니다rrreee

   <script> ; 태그 관련Attribute🎜🎜🎜type 속성
   • 🎜<script> 태그는 기본적으로 JavaScript 코드로 설정됩니다. JavaScript 스크립트를 삽입할 때 type 속성을 생략할 수 있습니다🎜
   • 🎜값이 유형 속성 중 하나가 브라우저에서 인식되지 않으면 코드가 실행되지 않으므로 <script> 태그에 텍스트 내용을 삽입할 수 있습니다. 브라우저가 인식하지 못하는 유형 속성만 추가하면 됩니다. 브라우저는 콘텐츠를 실행하거나 표시하지 않지만 이 <script> 노드는 여전히 DOM에 존재합니다. code> 노드의 콘텐츠를 읽습니다🎜
   🎜defer 속성rrreee🎜defer 속성의 실행 프로세스:🎜
   1. 🎜브라우저가 HTML 웹 페이지를 구문 분석하기 시작합니다🎜
   2. 🎜분석 과정에서 defer 속성이 있는 <script> 요소가 발견되었습니다🎜 li>
   3. 🎜브라우저는 계속해서 HTML 웹페이지를 구문 분석하는 동시에 <script> 요소에 의해 로드된 외부 스크립트를 병렬로 다운로드합니다🎜
   4. 🎜브라우저가 HTML 웹페이지 구문 분석을 완료한 후 다시 돌아가서 다운로드한 스크립트를 실행합니다🎜
   🎜참고: 🎜
   • 🎜리소스를 비동기식으로 로드🎜
   • 🎜스크립트를 순서대로 실행🎜
   • 🎜 defer를 사용하여 로드된 외부 스크립트는 document🎜.write method🎜
   🎜async 속성rrreee🎜비동기 속성의 실행 프로세스:🎜
   1. 🎜브라우저가 구문 분석을 시작합니다. HTML 웹 페이지🎜
   2. 🎜의 구문 분석 프로세스 중에 <script&gt ; 비동기 속성이 있는 태그가 발견되었습니다🎜
   3. 🎜 브라우저는 HTML 웹 페이지를 계속 구문 분석하는 동시에 <script>에서 외부 스크립트를 다운로드합니다. > 태그를 병렬로🎜
   4. 🎜스크립트 다운로드가 완료되면 브라우저는 HTML 웹페이지 구문 분석을 중지하고 다운로드한 스크립트를 실행하기 시작합니다🎜
   5. 🎜스크립트가 실행된 후 브라우저는 HTML 웹페이지 구문 분석을 재개합니다🎜
   🎜참고: 🎜
   • 🎜리소스를 비동기식으로 로드🎜
   🎜 JS를 먼저 다운로드한 사람이 먼저 실행되지 않습니다.🎜
2. 🎜async를 사용하여 로드된 외부 스크립트는 document 쓰기 방법을 사용하면 안 됩니다.🎜
🎜async. 속성 유도 연기

• 🎜는 "차단 효과"를 해결할 수 있습니다🎜
🎜모두 비동기적으로 리소스를 로드하지만 순서는 실행이 다릅니다🎜
• 🎜스크립트 간에 종속성이 없으면 async 속성을 사용하세요. 스크립트 간에 종속성이 있으면 defer 속성을 사용하세요🎜

🎜동적으로 스크립트를 생성하세요. 🎜rrreee

• 🎜페이지 렌더링을 차단하지 않습니다🎜
• 🎜 async를 false로 설정하여 b .js가 a.js 다음에 실행되도록 합니다🎜 li>
• 🎜이 코드 이후에 로드된 스크립트 파일은 b.ja가 완료된 후 실행됩니다🎜

🎜관련 지식 포인트 요약🎜

🎜<script> 태그 내에 포함된 JavaScript 코드는 위에서부터 다음으로 구문 분석됩니다🎜

1. 코드가 어떤 방식으로 삽입되든 defer 및 async 속성이 없는 한 브라우저는 페이지에 나타나는 순서대로 <Script> 태그를 구문 분석합니다<Script>标签在页面中出现的先后顺序对它们进行解析

2. 加载外部脚本的优点：可维护性、可缓存、适应未来

3. <script>

   외부 스크립트 로딩의 장점: 유지 관리성, 캐시 가능성, 미래 적응성

<script> 맨 아래에 배치하는 이유 1. "차단 효과"를 피하기 위해. 2. DOM 구조가 생성되기 전에

DOM 노드

를 호출하면 오류가 발생합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 참조하세요. PHP 중국어 웹사이트!

추천 도서:
MySQL 데이터베이스 액세스 거부 처리 방법

🎜🎜🎜🎜6각형 버튼 특수 효과 구현 방법🎜🎜🎜

위 내용은 HTML에서 JS 메소드 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!