HTMLの基礎

HTML文書の基本構成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML文書のタイトル</title>
        <style>
            ここにスタイル（見た目）を記述
        </style>
        <script>
            ここにスクリプト（プログラム）を記述
        </script>
    </head>
    <body>
        ここに本体文書を記述
    </body>
</html>

記号<と>で囲まれた部分をタグ（tag）もしくは要素（element）と呼ぶ
必要のないタグは省略することもできる
- HTML5の場合，必須とされている記述は「!DOCTYPE」宣言と「title」タグのみ

タグの基本ルール

開始タグと終了タグがあり，その内側に中身を記述する．

<h1>今日の出来事</h1>

終了タグが存在しないタグ（br，img，hr，meta，input，embed，linkなど）については，<タグ名 />のように記述する．

<br />

付加情報は属性として<タグ名属性名1="属性値1" 属性名2="属性値2">のように記述する．複数指定可能．

<img width="200" src="photo.png" />

タグはネスト構造を取り，一番外側には<html>タグが一つだけある．

よく使われるタグ

タグの解説ページを探すとたくさんの情報が見つかります．とりあえずは以下ぐらいを覚えておきましょう．必要になったときに調べるようにしましょう．

タグ名	用途
h1	見出し1（heading 1）
h2	見出し2（heading 2）
h3	見出し3（heading 3）
p	段落（paragraph）
div	グループ化
span	テキストの一部
ul	箇条書き（unordered list）
ol	番号付リスト（ordered list）
li	リストの各項目（list item）
img	画像（image）
br	改行（break line）
button	ボタン
input	入力欄（フォーム入力）
a	文書間のリンク記述（anchor）
table	テーブル
tr	テーブルの行
td	テーブルの各セル

HTML文書の構造

すべてのHTML文書は，htmlタグ（要素）を頂点とするtree構造である．

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML文書の構造</title>
  </head>
  <body>
    <h1>タイトル</h1>
    <p>ここは<b>段落</b>です．</p>
  </body>
</html>

graph TB A[html] --> B[head] A --> C[body] B --> D[meta] B --> E[title] E --> F[HTML文書の構造] C --> G[h1] G --> H[タイトル] C --> I[p] I --> J[ここは] I --> K[b] I --> L[です] K --> M[段落]

DOM（Document Object Model）

DOMとは，

文書をオブジェクトとして扱うモデル（英語そのままの意味）
HTMLとJavaScriptの橋渡しになる
- JavaScriptのプログラムからHTML文書をコントロールできる，ぐらいの理解でも構わない

documentオブジェクト

HTML文書がブラウザに読み込まれると，その文書のhtml要素がdocumentというオブジェクトに保存される．「オブジェクト指向的なプログラミング」についてはいずれ解説する．

オブジェクトについて一言

C言語では「データ」と「手続き」が別々に存在し，プログラムで指定した順番で「手続きがデータを処理している」．これに対し，オブジェクト指向では，オブジェクトそのものがデータと手続きの両方を持っている．特に，データのことをプロパティ，手続きのことをメソッドなどと呼び，この「プロパティとメソッドを持ったものをオブジェクト」という．

このdocumentを起点として，JavaScriptからHTMLの各要素にアクセスすることができる．

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DOMのテスト</title>
  </head>
  <body>
    <h1 id="large_head">大見出し</h1>
  </body>
</html>

これをFirefoxやchromium-browserなどのブラウザで表示すると以下のようになるはず．

さて，この文書のDOMを操作してみよう．例題のhtmlファイル中では，<h1>タグにid属性を追加してある．これをいじってみる．

Firefoxの場合，F12キー（またはCtrl+Shift+Iでも良い），あるいは「ツール」メニューから「ウェブ開発」「開発ツールを表示」とすると，開発者ツールウィンドウが現れる（chromium-browserの場合はデベロッパツールという名称）．その中から「コンソール」タブを選択し，下端の方にある入力領域「≫」に次のように入力してみよう．

document.getElementById("large_head").textContent="Hello!"

入力間違いがなければ，以下のように表示テキストが変わるはずだが確認できただろうか．

DOM編集

ここで行った操作により，JavaScriptからDOMを操作している．先に説明したようにdocumentオブジェクトにはhtml要素が格納されていて，さまざまなメソッド（機能や関数）を使って要素を取得することができる．上の例では，getElementByIDメソッドを使ってtextContentというプロパティ（属性値）に値を代入することで表示テキストを変更した．

詳細はおいおい勉強していくとして，当面は

HTML文書には，非常に多くの要素が含まれている
document.getElementByID()で要素にアクセスできる
要素にはいろいろなプロパティがあり，値を代入するとリアルタイムに更新される

ぐらいを覚えておけばよい．

イベント

DOMの他にもうひとつ，HTMLとJavaScriptを結びつけるものにイベント（Event）がある．

ブラウザで発生するイベント

主なイベントとしては以下がある．

ページを読み込んだ
マウスが動いた
マウスがクリックされた
キーが押された
キーが離された
ボタンがクリックされた

具体例で見てみよう．

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>BMI計算</title>
    <script>
      function calc_bmi() {
        var h = document.getElementById("height").value;
        var w = document.getElementById("weight").value;
        var bmi = w / (h * h);  // BMI指数
        document.getElementById("bmi").textContent="BMIは" + bmi + "です";
      }
    </script>
  </head>
  <body>
    <h1>BMI計算</h1>
    身長 [m] : <input id="height" /><br />
    体重 [kg]: <input id="weight" /><br />
    計算: <button onClick="calc_bmi()">実行</button>
    <p id="bmi"></p>
  </body>
</html>

このhtmlファイルをブラウザで読み込んで実行すると以下のようになる．（身長・体重を入力して実行ボタンを押す）

イベントハンドラ（Event Handler）

上の例では，19行目に

19	`計算: <button onClick="calc_bmi()">実行</button>`

とある．これがボタンの記述であり，ボタンがクリックされたときにonClick属性で指定された「calc_bmi()」が実行される．このように，何らかのイベント（この場合はクリックされた）に応じて実行される関数をイベントハンドラ，あるいはコールバック関数という．（calc_bmiがイベントハンドラ）

プログラムは，<script>要素の中に記述する．

function calc_bmi() {
  var h = document.getElementById("height").value;
  var w = document.getElementById("weight").value;
  var bmi = w / (h * h);  // BMI指数
  document.getElementById("bmi").textContent="BMIは" + bmi + "です";
}

8行目のdocument.getElementById("height").valueで，17行目の入力ボックス<input id="height" />に入力された値を取得できる（heightというidをつけていることに注意．もちろん，この名前自体は自由に変更できる）
id=weightについても同様
BMIの計算結果を変数bmiに格納し，それをbmiというidを持つ段落ブロック（<p id="bmi">）に書き込んでいる