JavaScriptが中に配置することができます<body>と<head> HTMLページのセクション。
<script>タグ
HTMLでは、JavaScriptコードが間に挿入されなければならない<script>と</script>タグ。
例
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
:古い例では、type属性使用することができ<script type="text/javascript"> 。
このタイプの属性は必須ではありません。 JavaScriptは、HTMLのデフォルトのスクリプト言語です。
JavaScriptの関数とイベント
JavaScriptのfunctionのために、「尋ねた"ときに実行することができますJavaScriptコードのブロック、です。
イベントが発生した場合、例えば、機能は、ユーザがボタンをクリックしたときと同様に、実行することができます。
あなたは後の章で関数とイベントについて多くを学びます。
内のJavaScript <head>または<body>
あなたは、HTMLドキュメント内のスクリプトの任意の数を配置することができます。
スクリプトは中に配置することができ<body> 、または中<head> HTMLページのセクション、またはその両方で。
一箇所ですべてのコードを保ち、常に良い習慣です。
内のJavaScript <head>
この例では、JavaScriptの機能を内に配置されている<head> HTMLページのセクション。
ボタンがクリックされたときに関数が(と呼ばれる)が呼び出されます。
例
<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
»それを自分で試してみてください でJavaScriptの<body>
この例では、JavaScriptの機能を内に配置された<body> HTMLページのセクション。
ボタンがクリックされたときに関数が(と呼ばれる)が呼び出されます。
例
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
»それを自分で試してみてください の下部にあるスクリプトを配置することをお勧めします<body>要素。
スクリプトのコンパイルは表示を遅くすることができますので、これは、ページの負荷を向上させることができます。
外部のJavaScript
スクリプトはまた、外部ファイルに配置することができます。
myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
同じコードは、多くの異なるウェブページで使用される場合、外部スクリプトが実用的です。
JavaScriptのファイルのファイル拡張子は持っている.js 。
SRC(ソース)属性でスクリプトファイルの名前を入れて、外部スクリプトを使用するには<script>タグ:
あなたは、外部スクリプト参照配置することができます<head>または<body>好きなように。
それは正確にどこに位置していたかのようにスクリプトが動作します<script>タグが配置されています。
外部スクリプトは含めることはできません<script>タグを。
外部JavaScriptメリット
外部ファイルにJavaScriptを配置すると、いくつかの利点があります。
- これは、HTMLとコードを分離します
- これは、HTMLとJavaScriptを読みやすくし、維持することができます
- キャッシュされたJavaScriptファイルはページがロードをスピードアップすることができます