HTML web HTML HTML

(1)

XHTML 言語と DOM ＋ JavaScript によるドキュメント管理（前編）

コンピュータ数学Ａテキスト

（第 2 学年理系コース）

千葉商科大学付属高等学校数学科樽正人

2008 年 7 月 1 日

(2)

1 _序章

1.1 授業のねらい

今はパーソナルコンピュータ（以下パソコン）に限らず，携帯電話やテレビ，テレビゲーム，音楽プレイヤーなど，インターネットにアクセス可能な家電製品が当たり前な時代です。これらはインターネットという膨大な情報の海を検索する窓としての機能を備えています。

話は変わり，アメリカではパソコンのことをintelligence mirrorなどといい，知性を映し出す鏡と称します。すなわちパソコンとは，その前に座った人次第で多様な使い方があり，使う側の知性を映し出す鏡というわけです。パソコンなどのコンピュータは，元々は問題解決のためのツールとして数学によって発明されたものです。現在の理数系大学などでの数値解析が正にそれです。

このように身近な家電製品は情報を検索する窓としての機能を有するのですが，

その情報を作り出すものとして考えたとき，コンピュータ，ことさらパソコンに勝るものはありません。そこでコンピュータ数学Ａでは，身近にあるパソコンを使い，コンピュータ本来の数値解析としての道具の使い方を最終的には学んでいくことを目標にします。

1学期はwebサイトを構築する際に使われるHTML（Hyper Text Markup Lan-

guage）という言語を基本として学びます。その後，W3Cで勧告されたドキュメン

ト構造の業界標準仕様であるDOM（Document Object Model）を扱えるDHTML

（DynamicHTML）へと進みます。最終的には，DHTMLによって生成された各オブジェクトを加工するスクリプト言語であるJavaScriptによるプログラミングのエッセンスを学びます。

1.2 授業の準備と必要な文具

データ保存先フォルダの用意 Aliceサーバ上のH:ドライブ直下に，この1年間の授業のファイルを保存するフォルダとして，【コン数A】を作成します。すなわち，H:￥コン数A です。

ファイル名の拡張子を表示しますパソコンはファイルの拡張子を見て，そのファイルを開くためのプログラムを決定しています。WindowsXPは出荷時には，その拡張子が非表示の設定になっていますので，表示に変更します。

メールの署名の更新メールの署名は，1年次にH:￥signature.txtに設定しました。このファイルを開き，内容を更新します。

A4版クリアファイル（40ポケット）授業のテキストはすべて手作りになります。授業毎に配布しますので，それらをファイルするために必要です。

ボールペン赤，黒，青3色分キーボードの隙間にシャーペンの芯や消しゴムのカスが入ると誤作動の原因になります。

(4)

2 HTML _の基本

2.1 web ページと HTML

2.1.1 HTMLはテキスト文書

webページは，HTMLという言語で記述したテキスト文書を，HTMLを解釈できるソフトウエアで開いて閲覧します。このHTMLとは，HyperText Markup

Languageという言語の名称です。この言語はマークアップ言語と呼ばれ，文書構

造（や見栄え）を記述するために使われます。

HTMLは単なるテキスト文書ですから，HTMLの文法（仕様）に従ってテキストエディタで記述します。拡張子は，【html】か【htm】です。出来上がったHTML 文書をブラウザーと呼ばれるHTMLを解釈できるソフトウエアで開けば，内容を確認できます。

2.1.2 HTMLの構造

HTMLは，命令を与えたいフレーズを<命令語>と</命令語>で囲むスタイルをとります。これがマークアップ言語といわれる由縁です。 ^注意

タグは全て半角英数です

<命令語>を開始タグ，</命令語>を終了タグといいます。

HTMLは基本となる構造を持っています。それは次のようなものです。ここに出てくる<html></html><head></head><body></body>を総称して構造タグなどといいます。

HTML文書説明

<html> HTML文書を宣言する開始タグ

<head> ヘッダー部分を宣言する開始タグ

<title> ページタイトル部分を宣言する開始タグ

ようこそ。このページのタイトル

</title> ページタイトルの終了を宣言する終了タグ

</head> ヘッダー部分の終了を宣言する終了タグ

<body> 本文の開始を宣言する開始タグ

· · · ·

（webページの中身）

· · · ·

</body> 本文の終了を宣言する終了タグ

</html> HTML文書の終了を宣言する終了タグ

実践2.1.2

適当なテキストエディタを起動し，タイトルを【ようこそ！】，本文を【HTML の勉強】に変えて，実際に構造タグを打鍵してみましょう。

次にファイル名を【scheme.html】として，H:￥コン数Aに保存しましょう。

(5)

2.2 web ページの仕組み

2.2.1 webサーバ

インターネット上に公開される情報ファイルを保存しておくサーバをwebサーバといいます。これらのサーバももちろんコンピュータです。WindowsXPやWin-

dowsVistaのようにコンピュータを操作（管理）する基本ソフトがインストール

されています。ただし，これらは必ずしもWindowsとは限りません。MacOSや

Linux，BSD，Soralisなどといったはじめて耳にするようなソフトもあります。

このように色々な国で，色々なソフトによって管理されているwebサーバは，インターネットに関する技術の標準を定める団体であるIETF（Internet Engineering Task Force）が正式に発行する文書RFC（Request For Comment）の第2616番目に定められたHTTP（HyperText Transfer Protocol）という仕様に従っています。これは，保存してある情報ファイルをインターネットを介して遠く離れたパソコン（クライアントパソコンなどという）のブラウザーとやり取りするための世界共通の技術仕様書です。

そのため，機種に依存されることなく世界中のwebサーバから情報を検索することができるのです。インターネット上にあるwebサーバのアドレスをURL

（Uniform Resource Locator）と呼びますが，これがhttp://からはじまるのはそのためです。

2.2.2 ブラウザー

webサーバに保存された情報ファイルをHTTPに従って取り出し，閲覧することができるソフトウエアのことです。Internet ExplorerやFire Foxなどといったソフトウエアが有名です。webサーバに保存してあるファイルは，HTMLという言語で記載された単なるテキストファイルです。ブラウザーには，このHTMLを webページとして表示するレンダリング（rendering：解釈）機能を持っています。

2.2.3 webページの保存場所

手元のパソコンで作成したHTML文書を，インターネット上のwebサーバに保存することで，はじめて世界中に向けて発信することになります。

本校の場合は，aliceのP:￥web_publicというネットワークドライブが，web サーバの一部分になっています。ただし，P:￥web_publicにファイルを保存するということは，外の社会に向けて情報を発信することになるわけですから，著作権違反や個人情報などを迂闊に流すことにつながらないように，細心の注意を払うことが必要です。

現在は，ブログなどのように簡単な手順に従うことでwebサイトを安直に構築できる気軽さから，ついついそこに記載した内容を全世界中にさらけ出しているという重大さに気付かず，それが原因で発生するトラブルに巻き込まれるケースは，特に若い高校生の間には多くあり，深刻です。

(6)

そこで，本校ではP:￥web_publicには直接ファイルを保存せずに，L:￥web_local というネットワークドライブに保存するようにします。このL:￥web_localもweb サーバの一部分になっているのですが，このwebサーバは学内以外から閲覧することができないように制限されているため安心です。

2.2.4 webページの閲覧

L:￥web_localに保存したHTML文書は，学内に閉ざされていますが，イン

ターネットと同じ環境として閲覧することできます。これをブラウザーで閲覧するには，URL（Uniform Resource Locator）と呼ばれるwebページのアドレスを正しく指定しなければいけません。前項2.2.3でも触れましたが，L:￥web_localは学内webサーバaliceに設けられた登録ユーザー毎のwebページの保存場所です。

URLは，【http://alice/~アカウント名/閲覧するファイル名】となります。

実践2.2.4

実践2.1.2で作成したファイルをマイコンピュータを開いて，

【H:￥コン数A】から【L:￥web_local】にコピーしましょう。

次に，ブラウザーでURLを指定して，webページとして閲覧してみましょう。

2.3 入力の基本

2.3.1 使用してはいけない文字

HTMLはwebページを作成するために用いられる言語ですから，インターネット上での利用が前提になります。インターネットは世界が相手になりますから，

ユーザーが使用している基本ソフトもWindows，MacOS，Linux，BSD系UNIX などさまざまです。そのため，機種に依存した文字を利用するのは推奨されません。正しく文字が表示されない恐れがあります。次にその一覧を示します。

この他にもi-modeの絵文字や第3,4水準の漢字も正しく表示されない恐れが高いので，使用しないようにします。

また，一部の機種で半角カナを扱えないものもあるため，半角カナの仕様も避けるべきとされています。

2.3.2 特殊な文字

HTMLは開始タグと終了タグでマークアップするため，タグで利用されている半角記号の< と >は使えません。それと&も文字コードで利用するためだめです。また，半角スペースも無視¹されてしまいます。

1全角文字のスペースならちゃんと表示されます。

(7)

これらの文字を出力したい場合には，それぞれ次の文字コードを使用します。

表示 HTML入力

< <

> >

& &

Ã  

このテキストでは，tを半角スペースの意味で使います。

2.3.3 コメント（注釈）

コメント（注釈）とは，記述はしてあるがページには表示させない文章です。例えばwebページを作成していく段階で，時間を置いてあとで更新する際に，すぐにその場所を見つけ出す手がかりになるように説明文を残すといった使い方をします。

コメント（注釈）するには，その文章の前後にとします。次に例を示します。

表示 HTML入力

コンピュータ数学ですコンピュータ数学です

2.3.4 改行と段落

改行するにも命令を与える必要があります。また，段落を持つこともできます。

改行は，その改行したい文字の後ろに<br/>と入力します。段落は，段落にしたい brはBReak pはParagraph

文章を<p>段落文</p>のように段落タグで囲みます。次に例を示します。

改行の例

表示 HTML入力

ようこそ！ようこそ！<br/>また来てねまた来てね

段落の例段落の場合は，改行より

も段落間の間隔が大きくなります。

表示 HTML入力

段落１とします。 <p>段落１とします。</p>

段落２とします。

2.3.5 区切り線

区切り線，または水平線などといいます。挿入したいところで<hr/>と入力する hrはHoRizon

と，ページ幅いっぱいに区切り線が入ります。視覚的に段落の区切りを入れたいときなどに使用します。次に例を示します。

表示 HTML入力

区切り線の上区切り線の上<hr/>区切り線の下区切り線の下

(8)

2.3.6 見出し

HTMLでは見出しを【章】，【節】，【項】，【目】，【段落見出し】，【小段落見出し】

の6階層定義することができます。階層ごとに数字で指定します。hというタグを

使用します。また見出しには，改行が自動で入ります。次に例を示します。 ^hはHeading

表示 HTML入力

第 1 章

第 1 節

第 1 項

第 1 目

第 1 段落

第1小段落 <h6>第1小段落</h6>

実践2.3.2 2.3.3 2.3.4 2.3.5 2.3.6

下の説明に従ってwebページを作成しましょう。

• 太字はコメント（注釈）とします。

• ページタイトルは，【HTMLの基本】にします。

• ファイル名【fundament.html】とし，L:\web_localに保存します。

• 最後にブラウザーでURLを正しく指定して閲覧しましょう。

HTML の基本

^第¹^{節（見出しサイズ}^2）

HTML とは

^第¹^{項（見出しサイズ}^3）

HTMLはマークアップ言語といい，文章構造や見栄えを記述するために使用されます。第1段落

HTMLは，HyperTextÃMarkupÃLanguageのそれぞれの頭文字を意味しています。第2段落

構造タグとは

^第²^{項（見出しサイズ}^3）

HTMLは必ず<html>で始まり，</html>で終了します。この文章がHTMLで記述してあることをブラウザーに理解させるためです。改行

これを構造タグなどと呼びます。第1段落 Copyright(c)Ãscorpion

Copyrightの部分は，自分のアカウントに変えましょう。

(9)

2.4 箇条書き

2.4.1 記号を付けた箇条書き

まず箇条書きとなる部分を，<ul>箇条書きとなる部分</ul>のように箇条書きタ ulはUnordered List

グで囲みます。このタグは宣言であって，目に見える機能はありません。次に，このタグで

· · · · ·

囲まれた中で，実際に箇条書きにしたい項目を<li>箇条書きの項目</li>の liはList Item

ように指定します。各項目の最後には自動で改行がはいります。次に例を示します。

記号付き箇条書きの例表示 HTML入力

<ul>

·リンゴ <li>リンゴ</li>

·みかん <li>みかん</li>

·グレープ <li>グレープ</li>

</ul>

この<ul>タグの場合，<ulÃtype= xxx >とtypeオプションを指定することで，

記号を変更することができます。xxxには， circle（○）， square （■）， disc

（●）のいずれかを指定します。

2.4.2 番号を付けた箇条書き

文法は，上述の記号付き箇条書きと同じですが，宣言をするタグが<ol>箇条書

きとなる部分</ol>になります。次に例を示します。 olはOrdered List

番号付き箇条書きの例表示 HTML入力

<ol>

1. リンゴ <li>リンゴ</li>

2. みかん <li>みかん</li>

3. グレープ <li>グレープ</li>

</ol>

この<ol>タグの場合，<olÃtype= xxx >とtypeオプションを指定することで，

記号を変更することができます。xxxには， 1 ， A ， a ， I （大文字ローマ）， i （小文字ローマ）のいずれかを指定します。

2.4.3 定義の付いた箇条書き

まず箇条書きとなる部分を<dl>箇条書きとなる部分</dl>のように箇条書きタ dlはdefinition List

グで囲みます。このタグは宣言であって，目に見える機能はありません。次に，このタグで

· · · · ·

囲まれた中で，定義文を<dt>定義文</dt>のように指定します。そして，dtはdefinition Term

定義文の説明文を<dd>説明文</dd>のように指定します。定義文，説明文の最後 dd は definition De- scription

には自動で改行がはいります。次に例を示します。

(10)

定義付き箇条書きの例

表示 HTML入力

<dl>

果物 <dt>果物</dt>

リンゴは赤い <dd>リンゴは赤い</dd>

みかんは橙 <dd>みかんは橙</dd>

グレープは紫 <dd>グレープは紫</dd>

野菜 <dt>野菜</dt>

キャベツは緑 <dd>キャベツは緑</dd>

トマトは赤い <dd>トマトは赤い</dd>

</dl>

実践2.4.1 2.4.2 2.4.3

• 太字はコメント（注釈）とします。

• ページタイトルは，【箇条書きの基本】にします。

• ファイル名【list.html】とし，L:\web_localに保存します。

• 最後にブラウザーでURLを正しく指定して閲覧しましょう。

箇条書きの基本

^第¹^{節（見出しサイズ}²^）

記号付き箇条書き

^第¹^{項（見出しサイズ}³^）

記号付きの箇条書きは，<ul>箇条書きの部分</ul>のように，はじめにその宣言をします。ulとは，Unordered Listの頭文字をとっています。第1段落次に実際に箇条書きの項目となる文章を<li>項目</li>のようにliタグで囲みます。liとは，List Itemの頭文字をとっています。第2段落

例を示します。改行

·リンゴ

·みかん

·グレープ

第3段落

番号付き箇条書き

^第²^{項（見出しサイズ}^3）

基本的に文法は，記号付き箇条書きと同じですが，番号付きの箇条書きでは，

<ol>箇条書きの部分</ol>のように，宣言のタグが変わります。olとは，Ordered

Listの頭文字をとっています。第1段落例を示します。改行

1. リンゴ 2. みかん 3. グレープ第2段落

(11)

2.5 表

2.5.1 表の基本

表は，行（横）と列（縦）で構成されています。まず表となる部分を<table>. . .</table>

のようにtableタグで囲みます。これは表の宣言になります。そして，borderオ

プションで罫線（けいせん）の幅を指定します。<table border= x >となります。xは正の整数値です。オプション指定が無い場合，罫線は表示されません。

次に，行を<tr>. . .</tr>のように指定します。最後に，このtrタグで

· · · · ·

囲まれた中 ^tr^は^{Table Row} で，列を<td>. . .</td><td>. . .</td>· · · のように指定します。これでようやく1 tdはTable Data

行1列の表ができます。2行目以降は<tr>タグからの繰り返しになります。少々複雑です。次に例を示します。

表示 HTML入力 1-1 1-2 1-3

2-1 2-2 2-3

<tr>

</tr>

<tr>

</tr>

</table>

2.5.2 項目付きの表と見出し

一般的な表では，最初の行を項目にします。項目になる列ではtdの代わりにth thはTable Header

を使用します。これで指定した列は，書体が強調されます。

また，表に見出しや説明を入れたい場合があります。そのときは，<caption>見出しとなる文</caption>を<table>タグのすぐ後に挿入します。見出し文の表示

位置はalignオプションで<caption align= xxx >のように指定します。xxxに ^align^はalignment（配

は，[top, bottom, left, right]の4つが指定できます。オプションを使用しない場置）

合は，topと同等です。次に例を示します。

表示 HTML入力品目単価(円)

リンゴ 150

スイカ 1,200

果物の値段表

<caption align= bottom >果物の値段表</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

(12)

2.5.3 行割りと列割りの変更

列割りある列を複数列に跨ぎたい場合，所望の列のtdタグでcolspanオプションを<td colspan= x >のように指定します。xには跨ぐ列数がきます。また，

alignオプションでデータの水平配置を<td align= xxx >のように指定できます。xxxには[left,center,right]の3つが指定できます。指定が無い場合はcenterです。valignオプションでは垂直配置を<td valign= xxx >のように指定できます。

xxxには[top,middle,bottom]の3つが指定できます。指定が無い場合はmiddleです。次に例を示します。

表示 HTML入力値段表

果物リンゴ 200 メロン 1,200

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

行割りある列を複数行に跨ぎたい場合，所望の列のtdタグでrowspanオプションを<td rowspan= x >のように指定します。xには跨ぐ行数がきます。また，列割り同様にalignとvalignオプションでデータの配置指定ができます。次に例を示します。

表示 HTML入力果物

リンゴ果物メロンスイカ

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

(13)

実践2.5.1 2.5.2 2.5.3 次の表を作成しなさい。

値段表

種類品目単価(円) リンゴ 150

果物メロン 1,200

スイカ 1,500

人参 80 野菜長ネギ 70 キャベツ 200

表1

2.6 画像

HTMLで利用できる画像形式は，拡張子がjpg，gif，pngのものに限られます。 ^jpg^は^Joint

Photographic Experts Group(画像データ圧縮技術を開発した専門家グループの名称) gifはGraphic Interchange Format pngはPortable Network Graphics

2.6.1 ページ背景として画像を利用する

bodyタグのbackgroundオプションで<body background= 画像へのパス >

と指定します。

例えばimage_sample.htmlというファイルがあり，そのファイルと同じ場所に

bgimage.jpgという画像が保存されているとします。そうした場合，bodyタグの

オプションとして， ^{./は現在の場所}

../は一つ上の場所を示す記号。

のように指定します。

画像とは話が反れますが，bodyにはbgcolorオプションなどもあり，これで背景色を指定することができます。色合いは，RGB(Red，Green，Blue)と呼ばれる

光の3原色の強弱で調整します。強弱の指定は，各色2桁の16進数で行います。 16進数は0〜9,a〜fの 16文字を使います。

次にいくつかの色の例を示します。

RGB 発色

f f0000 赤 00f f00 緑 0000f f 青 f f00f f 紫 f f f f00 黄 f f f f f f 白 000000 黒

2.6.2 ページ内の指定場所に画像を貼り付ける

imgタグによって，画像の貼り付け定義します。imgタグは画像貼り付けの宣言です。実際の細かな指定は，すべてオプションで行います。オプション名とその機能は次のとおりです。

(14)

オプション名機能

src 画像のパスを指定

border 画像の境界線を幅を数字で指定

alt 画像の説明文を指定例１）

貼り付けたい画像sample1.jpgが，そのページと同じ場所に保存してある場合，

などとなります。

例２）

貼り付けたい画像sample2.jpgが，そのページと同じ場所にあるimageという名前のファルダ内にある場合，

2.7 ハイパーリンク

webページの一番の特徴である他のページへのハイパーリンクは，aタグを使 ^a^は^anchor 用します。aタグはハイパーリンクの宣言です。実際の細かな指定は，すべてオプ

ションで行います。オプション名とその機能は次のとおりです。

href webページのパスを指定

target リンク先となるページの表示ウインドウを指定

2.7.1 既存の別サイトへのハイパーリンク

既に別のサイトとして存在するwebページへのリンクを作成する場合は，

<a href= webページのURL target= xxx >インデックス名</a> URL は Uniform Re-

source Locator

としていします。xxxには次が指定できます。

指定名機能

blank 新規にウインドウを生成して，そこに表示

self 自分自身のウインドウに表示

top フレームで分割されている場合に，全てを１つに統合してから表示

parent フレームが分割されている場合に，１段だけ統合してから表示

例１）

付属高校のホームページへのリンクを指定する場合，

※ webページには著作権や商標権などが登録されています。そのため，必ず他人のwebサイトへのリンクを指定する際には，target= blank と新規にウインドウを生成して，そこに表示するようにすべきです。そうせずに同じウインドウに表示を行った場合に，閲覧者が他人のページでなく，元のページと同じサイトのものと錯覚を与えることがあり，それが権利の侵害につながることがあるからです。

(15)

2.8 フォーム（入力フィールド）

formタグを使用することで，ページ閲覧者がインターネットを経由して，web サーバへデータを送信することやページ内のデータを動的に更新することがが可能になります。このことにより，インタラクティブなページの作成が可能になります。

formタグは，入力フォーム全般の宣言をします。ですので，これ単体での大きな機能はありません。フォームにはデータをwebサーバに送信する際の設定を行うための下表のオプションが用意されています。

method webサーバへの送信方式 get または post を指定

action データの送信先を指定

2.8.1 inputタグ

inputタグは多くの入力フィールドの指定をします。typeオプションによって入

力の形状を決定します。typeオプションの値には下表があります。

text １行のテキストフィールド

button ボタン

radio ラジオボタン

checkbox チェックボックス

password パスワードフィールド（入力文字は∗などに変換される）

hidden ページ上には表示させない隠しフィールド

reset 入力したフォームの内容をクリアする

submit formタグのactionオプションで指定したプログラムに

フォームの内容を送信するボタン

実践2.8.1

1. form.htmlというファイルを用意します。

2. titleはフォームの基本とします。

3. formタグで入力フォームを宣言します。

4. inputタグのtypeオプションで用意された値を指定し，実際に確認してみ

ます。

2.8.2 textareaタグ

textareaタグは複数行にわたるような任意なテキストフィールドを作成します。

syntax(記法)は，

<textarea rows= 行数 cols= 文字数（ブラウザに依存） >初期文字列</textarea>

(16)

2.8.3 selectタグ

selectタグはドロップダウンメニューを作成します。各メニュー項目はoptionタグで指定します。syntax(記法)は，

</select>

となります。上の場合は，項目は３つですが，項目数は無制限に指定できます。

重要なオプション

form,input,textarea,selectタグには，オプションとしてnameとidというものがあります。nameが，webサーバにデータを送信する際に必要になる識別子であり，

idが，DOM（Document Object Model）の際に必要になる識別子です。今後は，

この2つのオプションを必ず指定するようにしてください。

3 DOM によるドキュメント管理

3.1 DOM とは

DOMはW3Cにおいて次のように勧告されています。（原文掲載）

What is the Document Object Model?

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.

これを（私）個人の解釈を入れて和文訳すると，次のようになります。

DOMって何?

DOMとは，パソコンなどの端末環境や言語に依存することのないインターフェースであり，プログラムやスクリプトが，文章の内容や構造，スタイルに動的にアクセスしたり更新したりすることを可能にします。DOMにより，

文章はさらに進んだ処理が可能となり，その処理結果を，表示しているページに組み込むことが可能になります。以上は，W3Cやその関連のwebサイトに参照されているDOM関連資料の概要です。

DOMによって管理された文章は，適当なプログラム言語やスクリプト言語によって，動的にページへのアクセスや更新が可能になるとありますが，これは本来web ページは，あらかじめ用意されたページやデータをインターネットを通じて取得するだけであったものが，DOMと適当なプログラム言語の組合せによってユーザー側で更新させることが可能になるという意味です。

(17)

3.2 DOM+JavaScript

JavaScriptとはHTMLに組込んでおき，イベント（ボタンをクリックなど）に

よって従来HTMLが苦手とした動きのあるページ処理を可能にするスクリプト言語です。当然ですが，この言語だけで分厚い本が一冊できるくらいの関数やsyntax(文法)があります。本授業で全てを学ぶことはできません。ここでは，DOMとの連携に欠かせない関数と多数のデータ解析の際に必須となる繰り返し構文，および条件によって処理を振り分ける条件分岐についてサンプルを見ながら勉強していくことにします。

3.2.1 IDによるDOMの管理

DOMによってオブジェクト化されたもの（インスタンスなどと呼ぶ）は，IDによって識別管理することができます。これを利用するための関数としてJavaScript には，getElementById( ID名 )があります。これによって，webの閲覧者がページを動的に更新させることが可能になります。次にその例を示します。

サンプル3.2.1のブラウザ画面

サンプル3.2.1

<html>

<head>

function chText() {

// 更新内容を出力するエリアを指定

var result_area = document.getElementById( uname );

// 更新する内容を取得

var inputData = document.getElementById( input_name ).value;

// 更新内容を更新エリアに出力する処理 result_area.innerHTML = inputData;

}

</script>

<title>IDによるDOMの管理</title>

</head>

<body>

こんにちは。<span id= uname >●●●</span>さん。

<hr/>

<form>

<input type= text value= あなたの名前 id= input_name name=

input_name />

</form>

</body>

</html>

HTML web HTML HTML

XHTML 言語と DOM ＋ JavaScript によるドキュメント管理（前編）

コンピュータ数学Ａテキスト

（第 2 学年理系コース）

千葉商科大学付属高等学校 数学科 樽 正人

2008 年 7 月 1 日

目 次

1 序章

1.1 授業のねらい

1.2 授業の準備と必要な文具

2 HTML の基本

2.1 web ページと HTML

2.2 web ページの仕組み

2.3 入力の基本

第 1 章

第 1 節

第 1 項

第 1 目

第 1 段落

HTML の基本

HTML とは

構造タグとは

2.4 箇条書き

箇条書きの基本

記号付き箇条書き

番号付き箇条書き

2.5 表

2.6 画像

2.7 ハイパーリンク

2.8 フォーム（入力フィールド）

3 DOM によるドキュメント管理

3.1 DOM とは

3.2 DOM+JavaScript

千葉商科大学付属高等学校数学科樽正人

目次

1 _序章

2 HTML _の基本