（A）１０月度の月例会：
2013年10月度の月例会での勉強会風景
１０月２５日（金）の１３時より開かれた例会で次のような話し合いが行われました。
- 平成25年度11月より平成26年度1月までの月例会の予定
従来通り毎月第4金曜日に開くことを決め、平成26年度1月までの会議室の予約を取りました。 - ホームページを作成にあたってその検証は少なくともIEとFireFoxで行うようにしましょう。
IEは利用者が多いので古いバージョンの使用者の互換性をより大切にする一方、FireFoxなど新しいBrowserは新しいルールをより積極的に取り入れていこうという 傾向が強いという事情から、Browserによって表示され方がかなり異なる場合が屡見受けられます。 従って、ウェブ・ページの設計には新旧いずれのBrowserにも見栄が悪くならないような工夫が必要です。 - 新入会員の学習カリキュラムに就いて
6月の例会に出席された入会希望者は残念ながら入会されないことになりました。恐らく、既存会員の技術レベルとその方のレベルの相違が理由ではないかと思われます。 将来、新入会員の加入を考える場合は別の勉強会が必要と思われます。
（Ｂ）勉強会：
（1） jQueryのこれまでの復習
3カ月の長い夏休みの後なので、今後アニメーションの勉強に入る前にjQueryの復習をしっかりしておく必要があります。
- １－１ jQueryの基本構文
$("セレクター").jQueryの命令： - １－２ セレクターの指定の仕方
☆ HTMLのタグ 例 li
☆ id名、class名 例 #button .shogun
☆ Htmlタグ内部のid名、class名
例 ul#button, ul.man
タグの後にスペースを入れない
☆ HTMlタグの子孫のタグ
例 ul.tab li a
タグの後にスペースを入れる
この例は：
<ul class="tab">
<li><a>リンク先</a></li>
☆ DOMのルール
＊ $("li:eq(n)").メソッド; nは０，１，２、・・・・n番目の要素を指定
＊ $("li"）.filter("class名"又はid名”).メソッド
現在の要素集合にfilterで絞り込む
これは $("li.class名 又 li#id名).メソッドとは同じfilter命令です。
＊next() prev() nextAll() prevAll() - １－３ イベントの起動メソッド
$("セレクタ").click(function(){ 処理 });
セレクタがクリックされた時、処理する
$("セレクタ").dblclick(function(){ 処理 });
セレクタがダブル・クリックされた時、処理する
$("セレクタ").focus(function(){ 処理 });
セレクタが選択された状態になった時、処理する
$("セレクタ").mouseover(function(){ 処理 });
セレクタにマウスが乗せられたされた時、処理する - １－４ クラスの追加・削除により見栄の変化をつける
$("セレクタ").addClass("クラス名"); セレクタで選択された要素にクラスを追加します
$("セレクタ").removeClass("クラス名");セレクタで選択された要素からクラスを削除します
例 Sample 05-01 - １－５ HTML要素の追加・削除
$("セレクタ").append("新しい子要素"); 親要素の一番下に新しい子要素を追加します
$("新しい子要素").append("セレクタ"); 新しい子要素を親要素の一番下に追加します
$("セレクタ").preppend("新しい子要素");親要素の一番上に新しい子要素を追加します
$("新しい子要素").preppend("セレクタ");新しい子要素を親要素の一番上に追加します
$("新しい兄弟要素").before("兄弟要素");新しい兄弟要素を兄弟要素の前に追加します
$("新しい子要素").after("兄弟要素"); 新しい兄弟要素を兄弟要素の後に追加します
$("セレクタ").text("新しいテキスト"); セレクタで指定した要素のテキストを書換えます
$("セレクタ").html("新しいＨＴＭＬ"); セレクタで指定した要素のＨＴＭＬを書換えます
ＨＴＭＬタグ要素の追加・削除及び変更のサンプル・プログラムは： Sample 05-02
ＨＴＭＬタグ要素のテキストやＨＴＭＬタグそのものを書きかえるサンプルは：
Sample 05-02a - １－６ アニメーションの基本的なメソッド
$("セレクタ").show(); セレクターを表示する
$("セレクタ").hide(); セレクターを非表示する
$("セレクタ").toggle(); セレクターを表示と非表示とに交互に切り替える
$("セレクタ").slideDown(); セレクターをスライトで下がってくるように表示する
$("セレクタ").slideUp(); セレクターをスライトで上がってくるように非表示にする
$("セレクタ").slideToggle(); セレクターをslideDownとslideUpとを交互に切り替える
$("セレクタ").fadeIn(); セレクターを透明度をあげながら表示する
$("セレクタ").fadeOut(); セレクターを透明度をさげながら非表示する
$("セレクタ").fadeToggle(); セレクターをfadeInとfadeOutとを交互に切り替える
("セレクタ").toggleClass("クラス"); セレクタを切り替えるアニメーション
画像の表示、非表示、トグル等のサンプルとして： Sample 05-03を学習した。
クラスを切り替えてアニメーション効果をだすのサンプルとして：Sample 05-04を学習した。
（２）Browserの解釈の違いによる問題点
(月山縦走のウェブ・ページの例を使う)
- ２－１ コメント<!-- コメント -->の解釈の違い
IR9,10 ・・・・・・・・・ 先行するスペースはコメントとして無視
FireFox, GoogleChrome ・・ 先行するスペースはスペースとしてみなされる
<div id="left_side">
XXXXXXXX
</div><!-- end of left_side -->
<div id="rigt_side">
YYYYYYYY
</div><!-- end of right_side -->
上の場合、</div>と<!-- end of left_side -->の間にスペースを入れてはいけない。 - ２－２ 横並びの中枠<div>の高さを同じにして揃える方法
横並びの中枠<div>の高さはその枠の中のタグの種類や数によって異なるので、共通の中枠
<div>高さ指定では中枠<div>の高さがずれてしまう。
横並びの中枠<div>各々の中にheightを指定したclassを入れる。調整は手作業でする。 - ２－３ 横並びのDIV枠を整列させる方法
横並びのDIV枠を整列させて隣合う枠の高さを同じにするのは、CSSでは高さを指定せず
内容物によって高さを調整する。内容物が少ない方の枠には<br />を入れて調整する。
今日は時間の関係で全てのサンプル・プログラムを入力してもらう機会がありませんでしたので、今日入力しなかったサンプル・プログラムも各自で実際に入力してテストしてみて下さい。
(Ｃ） 次回の例会とその討議テーマ
日時： 平成２５年１１月２２日（第４金曜日）13:00～16:30
場所： 千葉市市民文化センター9階の千葉市民活力創造プラザの小会議室
テ―マ： 更に複雑なjQueryのアニメーション命令の実習をします。
宿題： 演習の仕組みを良く理解して、次のSample０５－０５からの実習がスムーズに行われるようにしておく。
