JavaScriptとの併用[HTML]
16024 ワード
1.<script>スクリプトラベル
HTMLでJavaScriptを使用する方法
まず、
<script>タグを使用します.このタグを以下のhtmlに入れる基本スケルトン
<body>または<head>から開始する.<!DOCTYPE html> --> html로 작성된 문서라는 뜻
<html> --> html은 head와 body로 구분된다
<head> --> head는 문서 전체에 공통적으로 적용되어야 할 내용이 들어간다
<meta charset="utf-8" /> --> 한국어를 브라우저 상에서 볼 수 있게끔 한다.
<title>Practice</title> --> 웹페이지의 이름으로 크롬에서는 탭에 명시된다.
</head> --> 닫는 태그
<body> --> body에는 웹페이지에 보여질 내용이 들어간다
</body> --> 닫는 태그
</html> --> 닫는 태그 2.<body>の<script>
1つ目はtype=「text/javascript」
▶▼簡単なJavaScriptを作る
👇例👇
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type = "text/javascript"> --> 이런식으로 추가하고 내용으로 자바스크립트 작성
console.log('JS here');
</script>
</body>
</html>2つ目のケース:src=「main.js」
▶▼▼bodyラベル最下端
👇例👇
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...
...
<script src = "main.js"></script>
</body>
</html>[動作順序]
[자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)][フィーチャー]
jsを準備する前に、ユーザーはウェブサイトの内容をプレビューすることができます.ただし、正常に稼働しているサイトを表示するには時間がかかります.
3.「head」の「script」
1つ目のケース:src=「main.js」
▶▼▼ヘッドラベル内部
👇例👇
<!DOCTYPE html>
<html>
<head>
<script src = "main.js"></script>
</head>
<body>
</body>
</html>[動作順序]
[자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)][フィーチャー]
まずhtml分析を開始し、途中でjsが必要であることを知り、サーバーからスクリプトファイルをダウンロードして実行し、html分析に戻ります.サイトはユーザーに表示するのに時間がかかります.
2つ目のケース:async src=「main.js」
▼headタグの内部にjsファイルが複数ある場合
👇例👇
<!DOCTYPE html>
<html>
<head>
<script async src = "a.js"></script>
<script async src = "b.js"></script>
<script async src = "c.js"></script>
</head>
<body>
</body>
</html>[動作順序]
[자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)][フィーチャー]
1.asynという名前のスクリプトを使用して属性値をマークします.宣言されたタイプとして宣言された属性値のみがtrueとみなされるため、async機能が使用できます.
2.htmlファイルを分析しながらjsファイルをロードする(並列実行可能)
3.jsファイルのロード時間を節約できますが、すべてのhtmlファイルを分析する前にjsファイルが実行され、Webサイトが正しく動作しない可能性があります.
4.ユーザーは、完全なWebサイトを表示するのに多くの時間を費やす必要があります.
5.複数のjsファイルが実行順序を必要とする場合、asyncは絶対に使用できません.
3つ目のケース:defersrc=「main.js」
▼headタグの内部にjsファイルが複数ある場合
👇例👇
<!DOCTYPE html>
<html>
<head>
<script defer src = "a.js"></script>
<script defer src = "b.js"></script>
<script defer src = "c.js"></script>
</head>
<body>
</body>
</html>[動作順序]
[자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)][フィーチャー]
1.deferという名前のスクリプトを使用して属性値をマークします.宣言されたタイプとして宣言された属性値のみがtrueとみなされるため、defer機能を使用できます.
2.htmlファイルを分析しながらjsファイルをロードする(並列実行可能)
3.すべてのキャプチャと解析を完了してから実行を開始
4.宣言された順序でjsファイルを実行するので、順序をよく守ることができます.
n/a.結論
これまではscriptプロパティdefer値を書き込みながらheadタグ内部に書き込むのが望ましい.
リファレンス
Reference
この問題について(JavaScriptとの併用[HTML]), 我々は、より多くの情報をここで見つけました https://velog.io/@syj9760/HTML-콜라보-with-자바스크립트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol