毎週金曜日配信 What's New 2002/12/6
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
初心者のためのホームページ作り
http://www.scollabo.com/banban/
＜第30号＞
banban@scollabo.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
この講座はタグを覚えてテキストエディタだけでホームページを作るという、ど
ちらかというとやや専門的な作業が中心になります。各種の専用のオーサリング
ソフトとは一線を画して、思い通りのプロ並みのＨＰを作ることが出来ます。
時には専門的で難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。講座をすすめ
る中で分からない点がありましたら、ご遠慮なくメールください。
当講座ではHTML4.01を中心とした文法が主体となっています。なお、このマガ
ジンは等幅フォントでお読みいただくと快適に読めるようになります。
今週の課題 ■ JavaScript講座 第３回
■ ホームページに求められるもの --- Webデザイン
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆JavaScript入門 --- 構文（命令文）
このJavaScript講座も３回目です。これから、徐々に難しくなってきます。特に
第１回、第２回を十分に復習しておいてください。
今回は、演算子を用いて、for構文、while構文、if構文を作成します。
今まで紹介してきたJavaScriptでは、非常に単純なものだけでした。どんなに
オブジェクトやメソッド、プロパティを覚えても実用的なスクリプトを組むのは
困難です。そのためにも、「構文」を生かすことが不可欠です。
for構文と while構文は、繰返しを形成し、if構文は判断をします。
例えば、あるテキストを 100回表示させる場合、同じスクリプトを 100回書か
なければ実現しません。
例：
banban = "JavaScript講座";
document.write(banban);
document.write(banban);
document.write(banban);
:
:
document.write(banban);
こんな面倒なことは誰もしません。しかし、for構文を使うと、簡単に100回で
も1000回でも同じものを表示させることができます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆for構文（ループ命令)
ここでは、算術演算子（計算）を用いて、100までの数値を作り出します。
for (n = 1; n <= 100; n++)
for ループ（繰返し）を定義します。
n = 1; 初期値 つまり n に 1 を初期値として設定しています。
n <= 100; 繰返しの条件 n が 100と同じか少ないという意味
n++ n = n + 1 と同じ意味を持ち、n の数値を１つずつ増やします。
この構文は、n が 100 になるまで繰り返します。これを利用することで、100
回も同じメソッドが繰り返されます。
for (n = 1; n <= 100; n++) {
document.writeln("<p>" + n + "回目のJavaScript講座<\/p>");
}
構文によって指定されたプログラムを実行するために、｛ と ｝で囲む必要が
あります。これを「ブロック」と呼びます。今後頻繁に出現しますので、必ず
覚えてください。
また、逆順を指定する場合には、下記のように記述します。
for(n =100; n >= 1; n--)
初期値の 100 が 1 になるまでの繰返しです。
■まとめ
for(論理式) {
プログラム
}
論理式 (初期化式; 条件式; 増減式)
セミコロンで区切られた３つのオプションのステートメントを指定することに
より、任意の回数だけブロックをループさせることができます。
初期化式
一般にループカウンタを初期化するために使用し、この式に書かれたステート
メントは、ループを回る前に１回だけ実行されます。
条件式
現在の状態を評価するためのステートメントをこの式で書きます。ループを回
るたびにこの式は評価され、この式が真（true）である間、ループブロックを
繰り返し実行します。評価の結果が偽（false）になった場合は、ループブロッ
クの次の行に制御を移します。ループの判断として扱われる数式です。
増減式
ループを１度回るたびに実行され、ループカウンタを増加、または減少させま
す。この値が、条件式で評価されます。
n = n + 1 数学的に解釈すればデタラメな数式ですが、各種のプログラム
言語で採用されています。
例えば、初期値が１の時、この構文では初期値に１を足して nに代入します。
次のループでは、n は２が初期値となりこれにまた１と加えていきます。この
式では、繰り返されるたびに１つずつ値が増えていきます。
加えられた値は、常にループを回る毎に条件式で評価（判断）されます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆while構文（ループ命令)
同じように、この構文も評価を行ってループブロックを繰り返し実行します。
n = 0;
while(n <= 100 ) {
document.writeln("<p>" + n + "回目のJavaScript講座<\/p>");
n = n + 1;
}
for構文と同じ動作をします。n の値が100になるまで繰り返されます。
while構文には判断する条件式がありませんので、ブロック内で値を変化させ
なければなりません。そのためにメソッド後に n = n + 1 としました。
逆の場合は、
n = 100;
while(n >= 1 ) {
という形になります。その場合、式は n = n - 1 とします。
■まとめ
while(評価式) {
プログラム
n = n + 1; // 増加式（減少式)
}
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆if構文（条件分岐命令)
JavaScript には条件つき命令が１つだけあります。それが if構文です。
if構文とは、もし○○が、●●だったら、▽▽しなさい、さもなくば◆◆にし
なさい、という条件によって、実行するプログラムを分岐させるものです。
大きな特徴として、if構文はネスト（入れ子)にすることが可能です。
var today = new Date();
var h = today.getHours();
if((h > 5) && (h <= 10)) {
document.write("おはよう！");
}
else if((h > 10) && (h < = 17)) {
document.write("こんにちは！");
}
else {
document.write("こんばんは！");
}
document.write("ただいま", h , "時です。");
■スクリプト解説
var today var h
変数を宣言しています。このように varによる変数の宣言はグローバル変数と
呼びブロックの内や外でも使用可能です。宣言がない場合には、ブロック内で
変数の値が無視される危険があります。
today = new Date();
today という変数に、new Date() を代入します。
new Date() は、Dateオブジェクトを利用する際に使用するものです。
なお、Dateオブジェクトについての詳しい説明は、いずれ講座で取り上げます。
ここでは、h の値に、０〜24までが想定されます。
h = today.getHours();
getHours（） Dateオブジェクトのメソッドの１つで、時間を取得します。
if((h > 5) && (h <= 10))
もし、h の値が５以上で、しかも10以下の場合は、そのままブロックを実行し
ます。
&& 論理積 「and」の意味を持ち、２つの値の比較を行います。
h の値が５以上、10以内であれば「おはよう！」を表示します。
else
else もし、h の値が５以下で16以上であれば、次のif構文を実行します。
if((h > 10) && (h < =17))
もし、h の値が10以上で、しかも17以下であればブロックを実行します。次の
ブロックでは「こんにちは！」を表示します。
最後の else
h の値がどれにも該当しない場合には、「こんばんは！」を表示します。
このif構文は入れ子になっており、２つのif構文が含まれていることがお分か
りいただけたと思います。おおきく３つのプログラムがあり、時間によって実行
されるプログラムがあります。
もっと細かくすることも可能です。
例えば、
else if((h > 0) && (h < = 2)) {
document.write("ずいぶん遅いですね");
}
else if((h > 2) && (h <= 4)) {
document.write("もうすぐ朝ですよ");
}
なんてことができます。
実行結果
http://www.scollabo.com/banban/magazine/sample/mmsample_048.html
■まとめ
if(条件式){
実行プログラム
}
else if(条件式)}
実行プログラム
}
else {
実行プログラム
}
for構文や、if構文は置くが深く、多くのスクリプトで使います。
JavaScriptの基本的な構文ですので、是非、マスターしてください。
■注意点
今回のスクリプトでは、< や >、& などがあります。これらは実体参照となり
ますので、スクリプトは外部に置くことが推奨されています。詳しくは、本誌
第26号をお読みください。
（現在のところHTMLに関しては問題ないようですが・・）
また、スクリプト内には読みやすくさせるために、スペースを取っています。
ブラウザによっては、スペースがあると実行エラーを起こす可能性があります
ので、スペースを取り除いてください。
例： n = n + 1 → n=n+1
■Dateオブジェクトメソッド一覧
「今週のおさらい」の巻末に掲載しました。参考までにお読みください。
http://www.scollabo.com/banban/magazine/backnm_030.html#dateobject
次回のJavaScript講座では、関数と配列について解説する予定です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆ホームページに求められるもの --- Webデザイン
デザインとは本来、「設計」の意味を持っています。ページを構成する文書全
体を設計することは、人間の「感性」によることが多々あるでしょう。
色とか形とかは副次的なものであって、デザインに求められるものは、理念、
つまり、コンセプトです。
発信しようとしている情報のテーマは何か？ 誰に向けているのか？ どんな
年代で、どのような階層の人に向けられているのか？
多くが不特定多数に向けて情報が提供されています。不特定多数とは、男性や
女性、学生や勤労者、主婦、自営業など。そして若年層や老年層まで含まれてい
ます。もしかしたら外国人も含めることができるでしょう。
Windowsもいれば、Macintosh、UNIX、あるいは PDAなどもいるでしょう。MSIE
であっったり、Netscape、Opera、iCab、Lynx、W3M、HP-Reader、実に様々です。
最新の Windowsマシンであったり、私のように古い年代のパソコンもあり、ま
た高速のブロードバンドや、28.8K の非常に遅い通信環境のユーザもあります。
最新の調査によれば、現在の日本のインターネット人口は、6480万人ともいわれ
ています。（２人に１人の割合）
その不特定多数のユーザが利用しやすいサイトとは、どのようなデザインが求
められるでしょうか？
ネットサーフィンをしていると、こんな文字が飛び込んできました。
「このサイトは、Microsoft Internet Explorer 6.0 で最適化されております
ので、同種のブラウザでお読みください。」
「最適化」されているとはどういうものでしょうか？
確かに、Windows の MSIEで見れば、綺麗に見えます。しかし、Macintoshの
MSIEで見たら、表示が崩れていました。同じようなカテゴリで検索して他のサイ
トを訪れてみたら、今度は、
「このサイトは、Netscape 6.0で最適化されています。」ときた。
この２つのサイトは、永遠にお互いのリンクを貼ることができません。ハイパ
ーテキストとしてのHTMLが、ないがしろにされた瞬間でもあります。
実は、このようにブラウザ別の「最適化」を謳っていないページでも似たよう
な現象があります。それはそれはもう悲惨です。
また、遅いダイヤルアップでアクセスすると、すべての表示までの時間が非常
に長くイライラさせられることもあります。
（例えば、28.8Kbpsのダイヤルアップで、40KBでは、最短15秒かかる。）
■ユニバーサルデザインとインフラ
ユニバーサル・デザインという言葉を聞いたことがあると思います。駅の階段や
公衆トイレ、市役所の玄関など、多くの場所で採用されています。これらは、不
特定多数の人々が利用する場所です。（ＵＤマークのある設備）
つまり、どんな人でも快適に利用できる環境を提供するのが、ユニバーサル・
デザインの骨子です。それは、Webにも当てはまることでしょう。
特定の企業が利用しているイントラネットでは、ユニバーサル・デザインは関
係ありません。単純に業務遂行の目的を持っているため、同じ環境を与えられて
いるので、「最適化」されています。
しかし、もはやインターネットはインフラ（公共性のある社会整備施設）です。
道路や鉄道、電話、ガス、水道などとまったく同じレベルにあると言っても過言
ではないでしょう。
そのインフラが使いにくい状況は、決して不特定多数の方にとって「最適化」
されているとは言い難いものです。
デザインとは「設計」です。テキストエディタを起動してHTMLをタイプする前
に、テーマとコンセプトを確認し、紙の上で構成を考えましょう。
文字の大きさはどうするか、画像の容量は大きくないか、配色は見やすいか、
スクロールの量は適切か、ひとつずつ細かくチェックし、必要なタグを選び、文
書構造から、見栄えの要素や属性を切り離します。
ユニバーサル・デザインは、そうした綿密な作業の上で構築されます。作り上
げられるデザインは、多くのユーザのインターフェイスそのものです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
今回はここまで、ではでは・・
今週のおさらいはＷｅｂページにも掲載しましたので、是非見ておいてください。
Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明して
います。あわせて過去の記事のおさらいも掲載しています。
（今週のおさらい）
http://www.scollabo.com/banban/magazine/backnm_030.html
次回は、HTMLの初心者が間違えやすいミスについて詳しく解説します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、使っているテキ
ストエディタなど、なるべく分かりやすく制作環境を明記していただけると回答
しやすくなると思います。
ただし、平日の昼間は会社勤めなので、返事が遅れることがあります。ご了承
ください。
発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには平にご容赦願います。なお、マガジン
のすべての記述に誤りや重大なスペルミスがある場合、叱咤と罵声と共に私まで
突きつけていただくと幸いに思います。
バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
講座教材 http://www.scollabo.com/banban/daf/material.html
まぐまぐの過去記事 http://backno.mag2.com/reader/Back?id=0000090196
配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助か
ります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
＜えでぃた〜ず・るーむ＞
現在、猛烈な勢いで XHTML講座のページを作成しています。自宅ではこの作業に
ほとんどの時間を割いています。おそらく今月末にはサイト上にアップする予定
です。（多分、きっと）
そのためのリファレンスを作成するために、現在の「HTML4.01リファレンス」
を改造しています。しかしながら現在のリファレンスは、あまりにもミスが多い
点に気づき驚愕しています。タイプミスやブラウザのサポート状況、さらにはあ
るはずのない属性値などもうメチャクチャです。お気づきになりました？
とりあえず、XHTML1.1リファレンスが完成したら直しますので、もう少しお待
ちください。ただし訂正すべき箇所は他のページにもたくさんありますが・・
自慢ではないですが、私はブラインドタッチができません。（そりゃ、自慢に
ならないだろ？）パソコン歴は既に22年以上にもなるのに、一度もブラインドタ
ッチに挑戦したことがありません。でも、タイプは早いんです。
その昔、貿易会社で勤めていた頃、英文タイプライターは必須だったので、必
死に勉強したため、タイプ入力には自信があります。
ただし、両手の人差し指のみでタイプします。常にキーばかり見て画面を見て
いるわけではないので、日本語の入力のつもりが、実は半角になっていたなんて
場合が、多々あります。当然、逆の場合も多々。本当に多々。
当講座には、年配の初心者の方がたくさんおります。ご安心ください。ブライ
ンドタッチができなくても、人差し指だけのタイプでも、立派にホームページは
作れます。シスアドにもなれます。プログラマーでもSEでも問題ありません。
（と、自分の努力のなさを正当化する今日この頃・・）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、HTMLをご自分のページ作成に自由に使ってい
ただいても差し支えありません。
Copyright(C) 2002 www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
Copyright(C) 2002-3003 banban@scollabo.com