HTMLファイルでの準備

【本節の目的】
JavaScript言語で書かれた処理をHTMLファイル中で利用するための手順を学習します。

JavaScriptファイルを利用する3つのステップ

HTMLとは別ファイルにあるJavaScript言語処理を利用するには、以下の3つのステップが必要です。

[HTMLファイルでの準備] JavaScript言語を利用することを宣言する　
[処理の定義] いくつかの基本的な処理をまとめて一つの処理として名前をつける
[処理の適用] 定義した(定義されていた)処理の名前をHTMLファイルの実行したい場所に記述する

これから、これら３つのステップについて実際の利用例を示していきます。

HTMLファイルでの準備　～<head>要素での宣言

CSSを利用したときと同様に、HTMLファイルのhead要素で、 JavaScript言語を利用することを宣言しておく必要があります。以下が、その例です。

<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./myscript.js"></script>

1行目は、HTMLファイル中で利用するプログラムがJavaScript言語であることを宣言しています。
2行目は、JavaScript言語で記述された処理の定義集である ./myscript.js というファイルを、このHTMLファイル中で利用することを宣言しています。つまり、これにより、 JavaScriptの処理の定義は、すべて ./myscript.js というファイルに記述することになります。

ということで、CSSとJavaScriptを利用する皆さんのHTMLファイルのhead要素は、以下のようになるはずです。

............
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="../css/mystyle.css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>○○○</title>
   ........
  </head>
............

HTMLファイルでの準備

JavaScriptファイルを利用する3つのステップ

HTMLファイルでの準備 ～<head>要素での宣言

HTMLファイルでの準備　～<head>要素での宣言