9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【JavaScript】入門10. JavaScriptをHTMLへ組み込む方法
こんにちは（・∀・）
今日はJavaScriptで書いたスクリプトをHTMLファイルに組み込む方法をご紹介します。
JavaScriptの記述場所
HTMLにJavaScriptを記述する場所ですが、どこでも良い訳ではありません。JavaScriptの記述場所は基本body要素内の閉じタグ「</body>」の直前に記述します。
ただし、スクリプトの内容によってはHTMLが全て読み込まれる前にJavaScriptを読み込ませたい場合があります。その場合はhead要素内にJavaScript記述します。他にインラインで記述する方法もありますが、JavaScriptの記述場所はほぼこのどちらかとなります。
しかしここでは基本的にbody要素内の閉じタグ「</body>」の直前と覚えておいてください。
</body>タグ直前に記述する方法
<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのスクリプトを書いていきます。*/
</script>
</body>
</html>
head要素内に記述する方法
<html>
<head>
<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのスクリプトを書いていきます。*/
</script>
</head>
<body>
</body>
</html>
インラインで記述する方法
<p><a href-"javascript:void(0)" onclick="history.back(); return false;">BACK<a><p>
JavaScriptをHTMLに記述する場所についてはご理解いただけましたでしょうか⁉️続いてはJavaScriptをHTMLに記述する方法です。
JavaScriptの記述方法
JavaScriptをHTMLに記述する方法は2通りあります。一つはHTMLに直接書き込む方法で、もう一つはJavaScriptを別ファイルにしてHTMLに読み込ませる方法です。
JavaScriptをHTMLに直接記述する方法
<script>
/*ここに「ボタンが動いたり色が変わったり」や「テキストが表示されたり消えたり」などのスクリプトを書いていきます。*/
</script>
</body>
</html>
JavaScriptを別ファイルにしてHTMLに読み込ませる方法
<script src="hoge.js"></script>
</body>
</html>
別ファイルにJavaScriptを記述してHTMLにそのファイルを読み込ませます。
その際、文字化けを防ぐためJavaScriptファイルのエンコード設定に注意してください。例として、HTMLファイルのエンコードがutf-8の場合はJavaScriptファイルのエンコードもutf-8に設定してください。
またJavaScriptファイルにスクリプトを記述する時は<script>タグは不要です。
いかがでしたでしょうか、JavaScriptをHTMLに記述する場所と記述方法について、ご理解いただけましたでしょうか⁉️