(A)11月度の月例会:
2013年11月度の月例会での勉強会風景
11月22日(金)の13時より開かれた例会で次のような話し合いが行われました。
- 平成25年度12月の月例会の日時
従来通り第4金曜日しますと12月27日になり可なり師走の押し迫った日にちになりますが、これで良いかどうか話合いました。全員この第4金曜日の12月27日で構わないということになりました。 - このところ勉強会のテーマはJavaScript-jQueryが続きましたが、これで良いかどうかの話合われました。今月に引き続きjQueryの勉強で行こうということのなりました。
- jQueryは来月辺りからAjax通信のメソッドに入るという説明がありました。
jQueryの基本が済んだらば、実用的なjQueryのプラグインも勉強もしようという話しにもなりました。 - JavaScript-jQueryが終ったら、実用的なcgiのパッケージの勉強もしたいという声も出ました。
(B)勉強会:
(1) jQueryのこれまでの復習
3カ月の長い夏休みの後なので、今後アニメーションの勉強に入る前にjQueryの復習をしっかりしておく必要があります。
- 1-1 アニメーションの基本的なメソッド
$("セレクタ").show(); セレクターを表示する
$("セレクタ").hide(); セレクターを非表示する
$("セレクタ").toggle(); セレクターを表示と非表示とに交互に切り替える
$("セレクタ").slideDown(); セレクターをスライトで下がってくるように表示する
$("セレクタ").slideUp(); セレクターをスライトで上がってくるように非表示にする
$("セレクタ").slideToggle(); セレクターをslideDownとslideUpとを交互に切り替える
$("セレクタ").fadeIn(); セレクターを透明度をあげながら表示する
$("セレクタ").fadeOut(); セレクターを透明度をさげながら非表示する
$("セレクタ").fadeToggle(); セレクターをfadeInとfadeOutとを交互に切り替える
("セレクタ").toggleClass("クラス"); セレクタを切り替えるアニメーション - 1-2 代表的なイベントの起動メソッド
$("セレクタ").click(function(){ 処理 });
セレクタがクリックされた時、処理する この他に.dblclick、focus、mouseoverのメソッドがある。
上のコードを入力する際にしばしばクロージングの『 });』の入力忘れがちにないます。
これを防ぐために、$("セレクタ").click(function()を入力した時点で、{処理コード}の入力前に
{
}); と入力しておくと良い。
(2) 今日の勉強
- 2-1 アニメーションの一基本形にスピ-ドと完了時の操作を加味したメッソッド
$("セレクタ").アニメーションのメッソド(スピード,function()
{ ~アニメーションが完了した時の操作~ });
スピードはアニメーションの経過時間でミリ秒単位で指定するか、"slow"、"normal"、"fast"の何
れかで指定する。指定しないとnormalになる。
function()はコールバック関数と言い、アニメーションが完了した時の操作です。
これは省略可能で、指定しなければ何も起こらない。
- 2-2 アニメーションの一般形のメッソッド
$("セレクタ").animate(変化後のCSSプロパティ,スピード,イージング,コールバック関数);
変化後のCSSプロパティは{"margin-left": 40px", "margin-top", "20px"}のように 複数指定可
スピードは省略可能で、指定無ければnormalとなる
イージングは変化の仕方で、linear(定速)かswing(自然の動きで初期値)
コールバック関数は指定しないと何も起こらない。
一般形のアニメーション メソドの例として: Sample_5-5
- 2-3 メソッド・チェインを使った連続的動きのアニメーション
$("セレクタ").メソッド1 一つのセレクタに複数のメソッドを付けると
.メソッド2 連続したアニメーションの動きをさせることが出来ます。
.メソッド3 連続的動きの乱れを防ぐために:
.delay(遅らせる時間ミリ秒単位)
.stop()
.メソッドn; が使われます。
一般形のメソッド・チェインを使った連続的アニメーションの例として: Sample_5-6
- 2-4 ウェブ・ページ編集中に動きが極端に遅くなる問題
ウェブ・ページ編集中にページを開いたり、保存したりする動作が極端に遅くなり、中々動作中
を示す砂時計が消えないことがある。
これはページ編集中に何らかの誤操作によって大量のスペースがページに挿入されたり、或い
は</div>や</p>や</html>等のクロージング・タグが削除されてしまって起こることがある。
この問題の見分け方は、問題のページのプロパティを調べて、そのページのサイズが極端に大
きいことで判る。 通常のウェブ・ページの大きさは高々何百kbであるが、もしこれが何百mbで
あれば、まさのこのケースでしょう。
- 2-5 ウェブ・サイトのあり方に就いての話合い
ウェブ・サイトは何らかの意図をもって作成されるべき自己表現の場であると言う意見が出され
ました。
従って、何の意図も感じられない単なる写真の羅列であるようなウェブ・サイトを作るべきではな
いというのが当同好会の一般的な考えでした。
当サイトのPC上のWeb教室の中の『より質の高いウェブ・ページを目指して(1)及び(2)』もその
一つのあり方を示しています。参考にして下さい。
(C) 次回の例会とその討議テーマ
日時: 平成25年12月27日(第4金曜日)13:00~16:30
場所: 千葉市市民文化センター9階の千葉市民活力創造プラザの小会議室
テ―マ: 更に複雑なjQueryのアニメーション命令(特にAjax通信のメソッドを含む)の学習
及び実習をします。
宿題: 演習の仕組みを良く理解して、Sample5ー5の実習と同様な自分自身で作成下
例題を一つぐらいやってjQueryの実習に慣れておいて下さい。