JavaScript 記入場所

2014-08-28
古いっす！この記事は1年以上前に投稿されたもので、情報が古いかもしれません。ご注意ください！

HTMLにJavaScriptを組み込む

ヘッダー内に

HTMLのヘッダーに記入。ここに書いたスクリプトはbodyより前に読み込まれる。関数（処理を1まとめにしたもの）などはここに記入。

body内に

何かを表示するようなスクリプトの場合、実際に表示する位置に記入。

タグ内に

タグの中にイベントを組み込んで、そこに直接JavaScriptを記入できる。関数を呼び出したり、簡単なスクリプトを記入する。

外部ファイルに

複数のWebページ内で同じ処理を行いたい場合は、外部ファイルにスクリプトを書いて、それを各ページが読み込むようにする。

ヘッダー・body内に

HTMLのヘッダーやbody内にJavaScriptを組み込むにはscriptタグを使用する。以下の文字列をHTMLに書き込んで、その間に記入する。

<script type="text/javascript">
 <!--
 ここにJavaScriptのソースを記入。
 // -->
 </script>

scriptタグの中のHTMLのコメントタグはJavaScriptに対応していないブラウザ対策。

現在はscriptタグのみで書く事が多い。

<script> ここにJavaScriptのソースを記入 </script>

タグ内に

タグの中に記入するのは、Aタグのhref属性を使うかイベントを用いる。

<a href="JavaScript:ソース記入">クリックしてね</a><br>

<form>
<input type="button" value="Click!" onClick="ソース記入">
</form>

Aタグのhref属性を用いる場合は、そこにJavaScriptが書かれている事を示すために、JavaScript:を付ける。

外部ファイルの場合

記入と保存

外部ファイルはJavaScript専用ファイル。HTMLの中にJavaScriptを埋め込むときに使用する<script></script>は不要。直接JavaScriptのソースを書く。

拡張子は.js。

外部ファイルの参照の仕方

退部ファイルを参照する場合は、HTMLヘッダーにリンクを挿入する。

<script type="text/javascript" src="JSファイルのパス"></script>

またはイベントやAタグで呼び出す。

外部ファイルを使ったサンプル

更新日時を表示するスクリプトを作成。

※日時の表示形式はブラウザによって違う。

modi.js

function koshin(){
  var hiduke=document.lastModified;
  document.write(hiduke);
}

index.html

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

<body>
<script>
  koshin();
</script>
</body>

サンプル

<script type="text/javascript" src="JSファイルパス"></script>

外部JSファイルを読み込む。

外部ファイル本文は、<script></script>で囲む必要はない。