1. HTML の基礎と JavaScript
1.1 土台となる HTML コード
まずは、*.html / .*php 形式のファイルを作成し、以下のソースコードを記述します。
オンラインコードエディタで以下のコードを実行し、「Hello World!」と表示されることを確認してください。
- 1 行目：
<!DOCTYPE html>は、文書が HTML5 であることを示すドキュメントタイプ宣言です。 - 4 行目：
<meta charset="UTF-8">は、ページの文字エンコーディングが UTF-8 であることを示しています。 - 5 行目：
<title>タグでは、ブラウザに表示されるページタイトルを指定します。
1.2 JavaScript の記述
HTML ファイルの中に、ページの動的な変更を可能とする JavaScript を記述していきます。
以下のように、JavaScript コードは <script> タグで囲って </body> の直前に置きます。
1.2.1 JavaScript の記述位置
本演習では JavaScript コードは他の全ての要素が読み込まれた後、すなわち </body> の直前に置きます。
<head>の中に置くこともできますが、その場合はwindow.onload などのイベントハンドラを利用して、
ページ読み込み後に JavaScript を実行するなどの工夫が必要になります。
1.2.2 ファイルの分割
本演習では基本的に、一つの HTML ファイルの中に JavaScript を記述することを前提に進めていきますが、 JavaScript は別ファイルにしたほうが、プロジェクト全体の見通しが良くなります。 また、外部 JavaScript を呼び出す場合、ファイルがキャッシュされ以降のページ読み込みが早くなることがあります。
例えば、外部 JavaScript ファイルとして js/main.js を読み込ませる場合、ソースコードは次のようになります。