読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

2.2 JavaScriptはどこに書く?

JavaScript 読書メモ

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第2章を読んでみます。

 

jsstudy.hatenablog.com

 

2.2 JavaScriptはどこに書く?

(p.44)

 

  1. <script>タグとJavaScriptの記述場所
  2. HTMLにJavaScriptを直接記述する方法
  3. JavaScriptファイルを読み込む方法

 

HTMLドキュメントに直接JavaScriptを書く方法

(例)

<body>

:(中略)

<script>

console.log('This is a pen.');

</script>

</body>

 

これで、コンソール画面に「This is a pen.」と出力されます。

 

HTMLドキュメント内に<script>、</script>を追加すれば、その中にJavaScriptを直接書くことができます。

<script>タグは、<head> ~ </head>内、または<body> ~ </body>内のどこにでも追加できます。

一般的には、</body>終了タグの直前に追加します。

 

<script>にtype属性を含める必要はない

HTML5では<script>にtype属性を含める必要がなくなりました。

 

HTML5の<script>タグ

<script>

console.log('Hello!');

</script>

 

HTML4以前の<script>タグ

<script type="text/javascript">

console.log('Hello!');

</script>

 

(参考)HTML4とHTML5の違い(新機能まとめ)

www.htmq.com

 

JavaScriptファイルを読み込む

(p.47)

JavaScriptプログラムを専用ファイルに書いておいて、それをHTMLファイルに込みこませることもできます。

 

(例)

「index.html」というHTMLファイルを用意して、以下の中身を書く。

<body>

<script src="script.js"></script>

</body>

 

「script.js」というJavaScriptファイルを用意して、以下の中身を書く。

//外部JavaScriptファイル

console.log('Hello!');

 

「index.html」と「script.js」は、同じフォルダ(ディレクトリー)内に置きます。

index.htmlをブラウザーで開くと、コンソール画面に「Hello!」と出力されます。

 

(p.49)

外部JavaScriptファイルの読み込み

HTMLに外部JavaScriptファイルを読み込むときも<script>タグを使います。

<script>タグにsrc属性を追加して、そこに外部JavaScriptファイルへのパスを指定します。

相対パスで指定する場合は、HTMLファイルからのパスにします。

なお、外部JavaScriptファイルを読み込む場合は、<script>開始タグと</script>終了タグの間には何も書きません。

ただし、</script>終了タグは忘れずに書いてください。

 

●書式

<script src="HTMLファイルからのパス"></script>

 

f:id:jsstudy:20170304004814p:plain

 

JavaScriptが実行される順序

HTML内にJavaScriptを直接記述する方法と、外部JavaScriptファイルを用意して読み込む方法を、両方同時に使用することができます。

JavaScriptは、<script>タグ内に直接プログラムが書かれているか、外部ファイルが読み込まれているかにかかわらず、HTMLの上のほうに書かれている<script>から順に実行されます。

 

JavaScriptは外部ファイルに書くのが一般的

HTMLとJavaScriptのプログラムを別々にしておいたほうが管理がしやすいことから、実際のWebサイトではできるだけ外部JavaScriptファイルを作成したほうがよいでしょう。

 

ファイルの文字コード形式は「UTF-8」に

Webサイトに使用するHTML、CSSJavaScriptファイルを作成する際は、必ず文字コード形式を「UTF-8」にしてください。

 

文字化けを防止するために、文字コードを「ShiftJIS」や「EUC」ではなく、「UTF-8」に統一しておくと。

 

(参考)

文字コード - Wikipedia

 

qiita.com

 

コメント

(p.48)

「コメント文」は、プログラムを後から見返すときのためのメモや説明です。

コメント文はJavaScriptの実行時には無視されるので、基本的に何を書いても大丈夫です。

「//」を書いておくと、その1行だけがコメントになります。

複数行のコメントを残したいときは、始めに「/*」、終わりに「*/」を書きます。

その間に挟まれた部分がすべてコメントになります。

 

(例)

// 単一行コメント

 

/*

複数行にまたがる

コメント

*/

 

まとめ

  1. JavaScriptプログラムは、外部ファイルに記述して、HTMLファイルに読み込んで実行させる。
  2. <script src="sample.js(=JSファイルへのパス)"></script>と書けばOK