ホームページ同好会平成２１年１２月の活動

日時：　　平成２１年１２月２５日（金）　　午後１：００～４：３０
場所：　　京葉銀行文化プラザ内ボランティア・カフェ会議室
参加者：　Ａｓさん、Ｈｒさん、Ｈｓさん、Nhさん、Stさん、及びSrさんの６名
議題：　　新加入のＡｓさんの歓迎昼食会と恒例の勉強会

（１）新加入のＡｓさんの歓迎昼食会

　　例会に先立って午前１１：３０より、京葉銀行文化プラザ１階のレストランで新加入のＡｓさんの歓迎昼食会
　　が催された。
　　自己紹介に始まり、ホームページのこと、お絵かきのこと、山登りのこと、お遍路のこと等の話題に花が咲いた。
　　千葉市のホームページの話も出ました。　市の公共施設に無線ＬＡＮが欲しいという意見も出ました。

　　　　Ａｓさんの歓迎昼食会の模様ーNhさん撮影・提供

（２）　今月の勉強会　

テーマ：　JavaScriptの入門

　　（Ａ）ＪａvａＳｃｒｉｐｔを記述する場所３種類の復習

　　　　（１）ＨＴＭＬファイルのＢｏｄｙの中に直接記述する場合
　　　　　　　ページのＢｏｄｙの中に<SCRIPT>～</SCRIPT>で囲んで記述する。
　　　　　　　ホームページ・ビルダーの素材集から挿入する場合は殆どこのケースです。
　　　　　　　ＪａｖａＳｃｒｉｐｒのコードが１行など簡単な場合はこの方法が良いが、数十行等に亘る場合は
　　　　　　　Ｂｏｄｙ本体のＨＴＭＬコードを邪魔して判り難くなるので、その場合は（２）がお勧めです。

　　　　（２）ＨＴＭＬファイルのHeadの中に記述する場合
　　　　　　　ページのＨｅａｄの中に<SCRIPT>～</SCRIPT>で囲んで記述する。
　　　　　　　　ページのＢｏｄｙの中から
　　　　　　　　　　<a href="JavaScript: Greeting()">ここをクリック</a>
　　　　　　　　　　<img src="image.jpg"onclick="JavaScript: someFunction() ">
　　　　　　　　のようにＨｅａｄの中に規定されているＪａｖａＳｃｒｉｐｔにリンクする。
　　　　　　　ＧｏｌｉｖｅやＤｒｅａｍｗｅａｖｅｒのような高度のＳｏｆｔやＩｎｔｅｒｎｅｔからダウンロードする場合は
　　　　　　　このケースが多い。　この勉強会ではこのケースに焦点を当てます。　

　　　　（３）外部の拡張子｢*.js｣のファイルにＪａｖａＳｃｒｉｐｔを記述する場合
　　　　　　　”***.js”には<SCRIPT>タグの中身だけ記述します。本質的には（２）の場合と同じです。
　　　　　　<SCRIPT>、</SCRIPT>は必要ありません。
　　　　　　　複数ページから読み込まれる汎用スクリプトの使用に便利です。

　　（Ｂ）ＪａＶａＳｃｒｉｐｔの文法の概要（Object指向のプログラム）

　　　　　この勉強会での目的は、ＪａｖaScriptのプログラム技術そのものを習得するものではなく、むしろ
　　　　　この道の専門家が作成し、インターネット上で無料で公開しているサンプルＪａｖａＳｃｒｉｐｔコードを利用
　　　　　するに最低限必要な程度のの基本的な文法を学ぶことにあります。

　　　　　□　Ｏｂｊｅｃｔ指向のＳｙｓｔｅｍ開発手法
　　　　　　　Ｏｂｊｅｃｔ（物）を中心としてそのＭｅｔｈｏｄ（操作）とＰｒｏｐｅｒｔｙ（属性）を規定することによって
　　　　　　　プログラムを構成する事を目指した最近のＳｙｓｔｅｍ開発の手法。

　　　　　□ Objectとは：
　　　　　　　a. ビルトインObject　＝　予めＳｙｓｔｅｍで規定されているもの　例；window, document, array, function等
　　　　　　　　　これらのＯｂｊｅｃｔは階層的に規定されている。
　　　　　　　　　　　　　例：　document.image 　　　//上部の親Ｏｂｊｅｃｔとその下の子Ｏｂｊectはピリオド「.」で結ぶ。
　　　　　　　b.一般のObject　＝　ユーザー自身で宣言しなければなりません。
　　　　　　　　　　　　例：　myDate=new Date(); 　//　独自のオブジェクトmyDateを宣言し、今日の日付を入れる
　　　　　　　　　　　　　　　　　又は
　　　　　　　　　　　　　　　　num= 10;　　　　　 //　独自のオブジェクトnumを宣言し、その中に数字１０を入る

　　　　　□　Method：　Objectへの操作命令で、次のように書きます：
　　　　　　　オブジェクト名．メソッド名（パラメータ）
　　　　　　　　　　例：　window.write("ＨＰ同好会の皆さん　今日は");
　　　　　　　　　　　　　　// ウェブ・ページの中に直接メッセージを書き出す

　　　　　□　Property：　Objectの情報を参照したり設定し、次のように書きます：
　　　　　　　オブジェクト名．プロパティ名　　　　　（注）Property名の後に（）は書きません
　　　　　　　　　例：　　navigator.appName　　　　　・・・アプリケーション名
　　　　　　　　　　　　　 navigator.appVersion　　　・・・ブラウザのバージョン
　　　　　　　　　　　　　 document.bgColor　　　　　・・・ページの背景色

　　　　　□　変数：　数値や文字列、真偽値、オブジェクトなどを代入して、計算や表示、オブジェクトの指定
　　　　　　　などを行う器のようなもの。
　　　　　　　　　例：　ｎ=10; 　　//　nに10を代入
　　　　　　　　　　　　window.alert(ｎ)　　//　１０を画面に表示する。

　　　　　□　配列（Ａｒｒａｙ）：　「Array」オブジェクトを使い、一つのオブジェクトで複数の変数を包含し表現
　　　　　　　　できる大変便利なものです。
　　　　　　　　　例：配列名=new Array()　　　　　　　　　　　・・・配列の宣言
　　　　　　　　　　　　配列名=new Array(e1,e2,e3,・・・,en)　　・・・直接代入する場合
　　　　　　　　　　　　配列名=[e1,e2,e3,・・・,en]　　　　　　　　・・・new Array()を省略して直接代入する場合
　　　　　　　　　　　　配列名=new Array(n)　　　　　　　　　　・・・この場合はn個の配列を宣言する
　　　　　　　　　　　　配列名 ["Str"]=e　　　　　　　　　　　　　・・・[ ]内に文字列を使用することもできます
　　　　　　　　　　　　　　nは配列の要素数。e,e1,e2,e3,・・・enは配列の要素。
　　　　　　　　　　　　　　要素の順位番号は0,1,2,3,・・・のように0から始まることに注意！
　　　　　　　　　　　　同じ配列の要素に数値や文字列を混在させることも可能。
　
　　　　　□　イベントとイベント・ハンドラー：
　　　　　　　　JavaScriptの対話的操作で、イベントが起される為のタグがイベント・ハンドラーです。
　　　　　　　　　例：　<img src="picture.gif" onClick="alert('画像がクリックされました')">
　　　　　　　　　　　　　　　画像をクリックした時にアラート（警告文）が表示させる
　　　　　　　　　　　　<div onMouseover="alert('文字とマウスカーソルが重なりました')">文字</div>
　　　　　　　　　　　　　　　テキスト文字にマウスを重ねた時にアラートを表示させる
　　　　　　　　　　　　<img src="picture.gif" onClick="JavaScript: showTime() "name="image_object_name">
　　　　　　　　　　　　　　　画像をクリックした時に、何かの動作（例として現時間を表示）をさせる関数を実行させる
　　　　　　　　　　　　　　　name=""タグでＪａｖａＳｃｒｉｐｔの中で使用されるＯｂｊｅｃｔ名を規定する
　　　　　　　　　　　　<a href="JavaScript: showTime（）">現時間を表示する</a>
　　　　　　　　　　　　　　　イベント・ハンドラーの代わりに<a>・・</a>を使ってＨｅａｄの部分の関数を呼び出す
　　　　　　　　　　　　　　　ことも出来る

　　　　　□　Headの中の関数の書き方：
　　　　　　　　　例：　<head>
　　　　　　　　　　　　　　　<title>現時間を表示させる</title>
　　　　　　　　　　　　　　　<script language="JavaScript">
　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　</script>
　　　　　　　　　　　　　</head>

　　　　　詳細なＪａｖａＳｃｒｉｐｔの文法に就いては、次のサンプルの導入演習で具体的な説明することにします。
　　　　　又は、このサイトの｢ウェブ上のＰＣ教室｣の中の｢コース番号０１｣の
　　　　　｢ホームページ・ビルダー基礎勉強の手引｣の｢Ｌｅｓｓｏｎ１０｣を参照下さい。

　　（Ｃ）「画像の切換え」に関するサンプルＪａｖaScriptの導入演習
　　　　
　　　　このサンプルはHP同好会の「test.site」(　http://trial01.my.zmx.jp/　)の７番テストに掲載してありますので、
　　　　確認してください。

　　　　導入のステップは以下の通りです：

　　　　（０）　講師から用意・提供さりたサンプルの素材「fldr_script」と「fldr_frames」を各自のパソコンの「test.site」
　　　　　　　　フォルダーの中にコピー・貼り付けをする。
　　　　　　　　「fldr_script」と「fldr_frames」と２つのフォルダーに分けたのは、ＪａｖａＳｃｒｉｐｔのプログラムとそれが
　　　　　　　　扱う画像等のＯｂｊectが同じフォルダーの中に入るように考慮した為です。
　　　　　　　　実際には、この作業は各自が判断して、サイト作成で混乱が起きないようにフォールダーの仕分けを
　　　　　　　　適切にしなければなりません。
　　　　　
　　　　（１）　各自のパソコンの中の「test.site」をホームページ・ビルダーで開き、トップ頁の目次に７番目の項目を
　　　　　　　　「画像の切換え」として追加する。
　　　　　　　　サイトを保存した後、「サイト」メニュー　→　「サイト情報を更新」の操作を行う。
　　　　　　　　これはステップ（０）で追加した２つのフォルダーのデターをホームページ・ビルダーに認識させる為に
　　　　　　　　絶対必要なことです。

　　　　（２）　新規に空白ページを標準モードで作成する。
　　　　　　　　このサイトのトップ・フォルダーにある「common.css」というこのサイトを通して共通なスタイル・シートを
　　　　　　　　右側のペインにある「ページ一覧ビュー」の「サイト」ビューから挿入する。
　　　　　　　　”見出し２”の大きさで「ＪaｖａＳｃｒｉｐｔ入門０１－画像の切換え」というような見出しを入力する。
　　　　　　　　見出しのすぐ下に新しい段落で”画像をクリックすると切替ります”というような文言を入力する。
　　　　　　　　同時に、「編集」メニュー　→　「ページの属性」　でページのタイトルをを適当に入力する。

　　　　　　　　その上で、「ファイル」メニュー　→　「名前を付けて保存」の操作で、このページを保存する。
　　　　　　　　ファイル名は「page_script_01」というような名前でよいが、重要なことは保存場所を「fldr_script」に
　　　　　　　　指定する事です。これは素材の画像等がそのフォルダーの中に保存されているからです。
　　　　　　　　若し、この保存場所の指定を誤ると、以後如何に正しくサンプルＪavaScriptコードを導入しても、
　　　　　　　　このＪａvａＳｃｒｉｐｔは正しく作動せずエラーになります。
　　
　　　　　　　　ことほど左様に、ホームページ作成は大変アドレス・センスィティブなもので、ページや画像等を
　　　　　　　保存する場合は、如何にその保存場所が大切かを肝に銘じて下さい。
　
　　　　（３）　新規に作成したページ「page_script_01」を「HTMLソース」タブで開いて、ＨＴＭLソース・コードを
　　　　　　　　「ＨＴＭLソース」モードで表示する。
　　　　　　　　事前に配布されたレジメの中の”ＪａｖａＳｃｒｉｐｔのサンプルの検証”のサンプル（１）のＨｅａｄの中に
　　　　　　　　コピー・貼り付けるべきサンプル・コード：

　　　　　　　　　　　　<SCRIPT type="text/JavaScript">
　　　　　　　　　　　　　　　
　　　　　　　　　　　　</SCRIPT>

　　　　　　　　の部分をＨｅａｄｅｒの中の</head>の直前の部分に貼り付ける。
　　　　　
　　　　　　　　この作業は実際には、各自が導入したいＪａｖaScriptをインターネットからダウンロードし、
　　　　　　　　そのサンプルのＨｅａｄｅｒに張り付ける部分を選んで自分の頁のＨｅａｄｅｒ部分に貼り付ける作業です。
　　　
　　　　（４）　そのページを再び「ページ編集」モードに戻し、”画像をクリックすると切替ります”の文言のすぐ下に
　　　　　　　　新しい段落で、中央揃いで「fldr_script」フォルダーの中にある素材画像「image1.jpg」を挿入する。
　　　　　　　　次に、挿入した画像をクリックして、「挿入」メニュー　→　「リンク」　の操作で、
　　　　　　　　リンクの属性ダイアグムを表示します。そしてそのファイル名欄に半角英数字：で
　　　　　　　　　　　　　
　　　　　　　　　　　　　JavaScript:Switch()　

　　　　　　　　と正確に入力します。　そしてそのページを上書き保存しておきます。

　　　　（５）　そのページを再度「ＨＴＭLソース」モードに戻して、「image1.jpg」にリンクを付けた部分を確認する。

　　　　　　　　　<P><A href="JavaScript:Switch()"><img src="image1.jpg"></A></P>

　　　　　　　となっていれば、これまでの操作が正しく行われたことになります。
　　　　　　　但し、画像の縦横のサイズを指定するタグが入っているかも知れませんが、それは残してもそのまま
　　　　　　　でもよい。余りサイズが大きいようなら削除しておく。

　　　　（６）　生成された上のコードの<img>タブの中に「name=""」というコードを挿入する。
　　　　　　　　そのクオーテーション””の中に、Ｈｅａｄｅｒの中に張り付けたＪａｖaScriptコードの６行目にある

　　　　　　　　　varIMG　　　　//これは画像のＯｂｊｅｃｔ名です。

　　　　　　　をコピーして貼り付けます。

　　　　　　　結果として：

　　　　　　　　<P><A href="JavaScript:Switch()"><img src="image1.jpg" name="varIMG"></A></P>

　　　　　　　となっていれば正解です。
　
　　　　　　　name="varIMG"はこの画像Ｏｂｊｅｃｔに名前を付けて、ＪａｖａＳｃｒｉｐｔのプログラムに渡すことを意図して
　　　　　　　います。

　　　　　　　ここで重要なことは、人間による手入力を極力避けて、”varIMG”等はサンプルの中からコピーすること
　　　　　　　によって誤入力をしないことです。
　　
　　　　（７）　最終的にこのページを上書き保存して、「プレビュー」モードで富士山の画像をクリックしてみて、
　　　　　　　　画像が切り替わるかどうか確認してみる。　上手く作動しなければ、上のソース・コードの手入力に
　　　　　　　　誤りがないかどうかチェックして、誤りがあれば修正する。
　　　　　　　　今回手入力した部分は　"JavaScript:Switch()"　だけなので、特にこの部分のミスを調べる。

　　　　（８）　「test_site」のトップ頁の目次の７番目の項目に今回作成したページ「page_script_01」にリンクを付けて
　　　　　　　　おく。　今回時間中にこの操作をやりませんでしたので、各自やっておきまっしょう。

　　　　（９）　欲を言えば、今回利用したサンプルＪｖａScriptのコードを眺めて、少しでもＪａｖaScriptの仕組みを理解
　　　　　　　　するよう努めてみましょう。
　　　　　　　　ＪaｖａＳｃｒｉｐｔの文法を集中的に覚えるというのではなく、今後幾つかの具体的なサンプルの導入を
　　　　　　　　通じて、徐々にＪａｖａＳｃｒｉｐｔのコードに慣れ親しんで行く方向が現実的だと思います。
　　　　　　　　今回は先ず次のような点での理解に努めてください。

　　　　　　　＊　ＪａｖａＳｃｒｉｐｔのコードは

　　　　　　　　　　　<SCRIPT type="text/JavaScript">
　　　　　　　　　　　　　　　
　　　　　　　　　　　</SCRIPT>
　　　　
　　　　　　　　　で囲まれていること。　コピー/貼り付けの折には、ちょっとしたタブも抜け落ちないようにしましょう。

　　　　　　　＊　関数ｆｕｎｃｔｉｏｎは：

　　　　　　　　　　　function xxxxx() {
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　
　　　　　　　　　　　のように、{　　　}で括られているので、どの｛｝も抜け落ちないように気を付ける。
　　　　　　　
　　　　　　　＊　picやnum　のようなＳｙｓtemのＯｂｊｅｃｔでないＯｂｊｅｃｔは必ず事前に

　　　　　　　　　　　　　pic=new Array("image1.jpg","image2.jpg");
　　　　　　　　　　　　　num =1;

　　　　　　　　　　のように宣言（定義）されていなければなりません。

　　　　　　　＊　配列Ａｒｒａｙは複数のＯｂｊectを包含して処理できる大変便利なＯｂｊectです。
　　　　　　　　　　直ぐには理解し難いでしょうが、今後例題を通じて理解するように努めましょう。
　　　　　　　　　　中に入る要素の順位番号は0,1,2,3,・・・のように0から始まることに注意！

　　　　　　　　　　
　　　　　　　　　　サンプルＪａｖａＳｃｒｉｐｔの主要命令の：

　　　　　　　　　　　　　document.varIMG.src=pic[num];
　　　　　　
　　　　　　　　　　は、ページ（document）上にある画像（varIMG）のソースにpic[num]という配列（Ａｒｒａｙ）
　　　　　　　　　　を使って、１クリック毎に配列の中の要素の順位番号を０→１→０と変化させることによって
　　　　　　　　　　画像を切り替えています。これは正に配列（Ａｒｒａｙ）利用の妙味です。

　　　　　　　＊　イコール記号「＝」は置き換えに主として使われますので、イコールとしての記号は「＝＝」です。

　　　　　　　＊　この演習では２つの画像の切換えでしたが、素材には第３の画像"image3.jpg"を用意して
　　　　　　　　　　ありますので、プログラムに興味ある方は、３つの画像の切換えのコードにチャレンジして
　　　　　　　　　　見てください。　ほんの少しの変更で可能です。

　　　（１０）　無料でダウンロード出来るＪａｖaScriptのサイトを訪問してみてください。
　　　　　　　　サンプルは実行して試してみることが出来るようになっていますので、試してみると面白いですよ。
　　　　　　　　ＪａｖaScriptのサンプル・サイトの例：
　　　　　　　　　　　＊eWeb JavaScript Sample： http://javascript.eweb-design.com/#link
　　　　　　　　　　　＊＋１JavaScript　　　：　http://plusone.jpn.org/javascript/

（３）　来月からの勉強のテーマの予定

　　平成２２年１月：　Ａ．今月勉強しました「画像の切換え」サンプルの復習
　　　　　　　　　　　　　　　Ｓrさんは自宅で上の（０）～（９）のステップをトライして下されば、当然質問が出ると思
　　　　　　　　　　　　　　　います。　他の方も今日勉強したことをちゃんと復習されたら、きっと新たな質問が出る
　　　　　　　　　　　　　　　と思いますので、質疑応答を通じて復習をします。

　　　　　　　　　　　　　Ｂ．「サイコロ」ゲームのサンプル導入の演習を行います。
　　　　　　　　　　　　　　　サンプルのコードは今月のレジメの中ににありますので、削除しないでおいて下さい。
　　　　　　　　　　　　　　　素材の画像は今回コピーして保存下さった「fldr_script」の中にあります。
　　　
　　　　　　　　　　　　　Ｃ．時間があれば「２フレーム・ターゲット」の導入の演習を行います。
　　　　　　　　　　　　　　　この演習ではフレーム設定ページの実習も含みますので、少々複雑になります。
　　　　　　　　　　　　　　　時間切れになれば、２月のテーマにします。
　　　　　　　　　　　　　　　サンプルのコードも今月のレジメの中ににありますので、削除しないでおいて下さい。
　　　　　　　　　　　　　　　素材の画像は今回コピーして保存下さった「fldr_frames」の中にあります。

　　平成２２年２月以降：　ご希望を出して下さい。
　　　　　　　　　　　　　考えられるテーマとしては、「フォームのある頁」作成や「ウェブ・サイトのファイル管理」
　　　　　　　　　　　　　などがあります。

平成２１年１２月度

平成２１年１２月例会