HTMLの基本

HTMLの基本(1)

(1) プログラミングの練習としてjavascriptを薦める理由
　この教材の管理人が，プログラミングの練習としてjavascriptを薦める理由

1) 今日の中高生が使っているパソコンで特別なソフトウェアをインストールしなくても，初めから使える機能だけを使ってプログラミングができる．
2) javascriptは，C言語，C++言語と共通するところが多く，社会人になってからプログラミングをする必要が生じたときに，そのまま使えることが多い．

1)について：今日のパソコンはブラウザがあり，メモ帳などのテキストエディタも入っていますので，javascriptの演習をするために必要な条件は，初めからそろっています．
2)について：変数，関数，オブジェクトの使い方は十分練習できます．

(2) HTML文書の構造

　遠方のサーバにあるファイルの文字や画像をChromeやSafariのようなブラウザを使って読んでいるとき，ほとんどの場合，そのファイルはHTML（Hypertext Markup Language）という形式で書かれています．
　HTML文書は，右図のように<html>と</html>で囲まれた範囲に書かれ，

①<head>と</head>で囲まれたヘッダ部分，
②<body>と</body>に囲まれたボディ部分（これが本文），
③</body>から</html>までの部分（あまり利用されない．ヘッダに対してフッタと言えそうだが，はっきりそのように書かれた記事は見かけない）

の3つの部分から成り立っています．
　HTML文書はWebページとも呼ばれますが，②のボディ部分にメモ帳などのテキストエディタで書き込まれた文字は，ブラウザから読むことができます．

(3) HTML文書のファイル名の付け方
　HTML文書は，自分のパソコンの中でファイルとして読み書きすることもできますが，最終的には外部のサーバに転送して，Webページとして他の人にも見てもらうことがほとんどです．
　ところで，多くのサーバではパソコンとは異なり，全角漢字，かな，カナ（2バイト文字）や半角カタカナのファイル名は使えません．そこで，自分のパソコンの中で動作テストする段階から，サーバ対応のファイル名にしておく方がよい．

（ア）ファイル名は半角文字で，「アルファベット，数字，アンダーバー（下線），ハイフン」だけで書く．アルファベットの大文字と小文字は区別される．
（イ）ファイル名の右端に .htm または .html という拡張子を付ける．

※理屈上は上の通りですが，中高生が何度も作業を繰り返すとき，後日振り返って管理しやすくするには，次のように決めてしまう方がよい．

（ア）ファイル名は「半角小文字のアルファベットで始まり」「誰の」「何の」「何番目の」ファイルかが分かるような名前にする．
（イ）拡張子は一種類だけに決める．（ .htm だけにするなど）
【例】 suzuki_kihon1.htm , tanaka_kihon2.htm など

(4) 実習1

　1) 次の窓枠の中をクリックすると，反転表示なって選択されますので，マウス右クリックなどを利用して，コピー（パソコンのメモリーに入れること）してください．
　2) 次にパソコンの中にあるメモ帳などのテキストエディタを起動して，新規ファイルが表示されたら，先ほどコピーした内容をその画面に貼り付け（ペースト）してください．（マウス右クリックで貼り付けを選択，またはShift+Insertキー）
　3) ファイルに名前を付けて保存してください．そのとき，うえで述べた約束に従って，HTML文書として拡張子をhtmにしてください．
　4) ファイルを保存するときは，漢字コードの指定とHTML文書に書かれたcharsetが一致しなければなりません．漢字コードとしてShift JISは選べるテキストエディタを使っているときは「Shift JIS」を選び，メモ帳を使っているときは「ANSI」を選んで保存してください．

※なぜ，コピー＆ペーストでやるのか？一字一句入力して覚える方がよいのではないか？
⇒ そんなことはありません．先頭のdoctypeとかcharsetのような呪文のようなものの意味について，ここで詳しく説明することはできませんが，HTML文書にはこれらを定型的に記述する方がよいので，１つ型版を作っておいて以後はそれをコピーして使うというスタイルの方が，能率がよいのです．

(5) HTML文書をパソコンの中に保存してからの作業

1) 自分のパソコンの中（または指定されたサーバ内の特定のフォルダ）に名前を付けて保存したHTML文書を，Chromeなどのブラウザから読んで，しっかりできているかどうか確かめます．
2) このとき，右のイメージ図のように，HTML文書に書き込めるのは，テキストエディタだけです．読む方は，テキストディタとブラウザの両方から読んでいます．
　以後は，「テキストエディタで少し手直しをして」「ブラウザで確認する」という作業を繰り返すことになります．
3) テキストエディタでHTML文書が書き換えられても，ブラウザの方はリロード（再読み込み，更新

）するまで内容の変更を反映しません．…ブラウザに表示されるのは，リロードしたときのファイルの状態だけです．だから，書き換え作業を行った場合，その都度ブラウザでリロードしないと確かめることはできません．
4) たとえば自分の作品を先生が学校のWebページにアップしたとき，メモ帳などのテキストエディタにそのHTMLファイルのURLでファイル名を指定して読み出しても，読み出すことはできますが，今度は書き込むことはできません．（権限がないからです）
　このようにして，「書き換え作業は自分のパソコンや指定されたフォルダで行う」「サーバに転送する権限のある人に転送してもらったら，サーバ上のHTMlファイルに対してはブラウザで読むだけ」になります．&hellp;通常の場合，サーバ上のファイルをテキストエディタで直接書き換えることはできません．

(6) HTML文書の中でjavascriptのプログラムを書く場所
　HTML文書のボディ部分に書かれた文書は，一度書いたら書き直さない限り変わらない文字，画像などでできており，ワープロ文書と同じようなところがあります．
　しかし，今日のブラウザは固定的な文書を見せることだけでなく，様々なプログラムを組み込むことができます．そのうちの重要なものがjavascriptです．
　javascriptのプログラムはHTML文書の

①<head>と</head>で囲まれたヘッダ部分
②<body>と</body>に囲まれたボディ部分
③</body>から</html>までの部分

の3つの部分のどこに書いてもよい．
　これらのどの部分に書かれた変数や関数も互いに自由に使え，①で定義されたものを②③で利用することや，③で定義されたものを①②で利用することなども自由にできます．
　たとえ話：四島と多くの小島に分かれていても気持ちは１つの国なので，どの島でもらったお金も他の島でも使える．

(7) 前方参照は禁止
　ブラウザはHTML文書の先頭から順に読み込んで行って，内容を解析して処理していきます．だから，ある時点では左図のように，読み込みが完了した部分と，まだ読み込んでいない部分に分かれます．
　プログラミングの分野で，まだ登場していない定義を先に使ってしまうミスを「前方参照」ということがあります．その事情は，ブラウザが読み込みながら処理していく過程でも同様で「前方参照は禁止」です…undefinedのエラーになります．
　たとえば，②のボディにおいて，<img src="abc.png" name="image1">と定義されている画像を①の段階で書き換えたり，動かしたりしようとすると，まだ定義されていない画像を処理することはできないという意味でエラーになります．しかし，HTML文書が全部読み込まれてから，その操作を行うことは問題なくできます．
　同様にして，③に定義されている変数や関数を①や②で使おうとするときにも同様の問題が起こります．

　プログラマーが「前方参照」と言うことを，教育委員会や中央官庁では「それは後方参照だ」と言う傾向があります．第3条で定義されている用語を第1条で使ってしまうような場合，文書事務では第3条は第1条の「後方」だからダメだと言いますが，プログラマーは「前方」だからダメだというのです．（神学論争は疲れる）

変数や関数の定義は，ヘッダ部分に書く方がよい

(8) 実習2

1) 次の窓枠をクリックして反転表示にし，右クリックでコピー，テキストエディタで新規ファイルに貼り付け，自分のパソコンの作業用フォルダにabc_xyz1.htmなど適当な名前をつけて保存してください．
2) 次に，Chrome, Safariなどのブラウザでそのファイルを読んでください．
3) ブラウザの通常の使用方法では，エラーの箇所は表示されず，javascriptのエラーがあっても無視されるだけですが，次のように設定を変えるとエラー箇所が表示されます．この例は①のヘッダ内部にある場合でも，１行後で定義される変数をそれよりも先に使おうとするとエラーになることを示しています．

ChromeではファンクションキーのF12を押す．⇒ReferenceError: xx1 is not defined at abc_xyz1.htm:8など表示されます．これは8行目の命令document.write(xx1);において変数xx1が定義されていないことを示しています．
Safariでは画面上端にメニューバーが表示されるようにしておいて，メニューバーの「開発」→「javaScriptのデバッグを開始」，再び「開発」→「エラーコンソールを表示」とします．（下端に表示されるサブメニューのうち，「コンソール」を選択するようにしてください）⇒ReferenceError: Can't find variable: xx1　abc_xyz1.htm:8など表示されます．

1) 次の窓枠をクリックして反転表示にし，先ほどと同様に練習用のHTML文書として保存し，ブラウザで読んでください．

今度はエラーは起こらず，①②③のどの部分で定義された変数も③で使えることが分かります．