(A)6月度の月例会:
6月度の月例会で新入会員と既存会員の自己紹介とオリエンテーションの風景動画
6月28日(金)の13時より開かれた例会で次のような話し合いが行われました。
- 6月よりの新入会員と既存会員の自己紹介
既存会員の運営しているウェブ・サイトの紹介も行いました。 - ホームページ同好会の生い立ちと会の目指す方向の説明
同好会は千葉生涯学習センターのボランティアのグル―プとして発足し、3年後にインターネットと関連マルティメディア分野に特化したグループとして独立したこと。
目指している目標は会員相互の自己研鑽と学習した分野でボランティアとして社会貢献するということを説明した。 - 新入会員の学習カリキュラムに就いての話合い
月例会での既存会員の学習と並行して行う案と新入会員が既存会員のレベルに達するまで別途に学習会を用意する案とが提示され、後者の方が現実味があるという話しになった。
後者の場合は、新入会員の自宅とか講師宅等で、出来れば新たな希望者を募って、少人数で行えれば理想的だという話しになった。結論は9月の例会までに出したいということになった。
(B)勉強会:
(1) jQueryに関する先月の復習
- jQuery のDOM(Document Object Model)に就いて:
DOMとはjQueryやJavaScriptがHTMLの部品(タグ)を制御する折にDOMツリーという階層構造で指定する方法です。 - DOMツリーによる指定は:
HTMLタグの親子関係は半角スペースで結ぶ
HTMLタグとid又はClassの親子関係は半角スペース無しで直接結ぶ - その例として、DOM指定の:
ul.tab li a は
<ul class="tab">
<li><a>hogehoge</a></li>
</ul>
の<a>hogehoge</a>を指定することです。 - 第5章のjQueryによるClassの追加及び削除
例として、Sampleプログラム05-01を復習した。
(2)今日のjQueryの勉強
(a)第5章のjQueryによるTextとHTMLタグの追加・削除
- $("セレクタ").append("新しい子要素"); 親要素の一番下に新しい子要素を追加します
- $("新しい子要素").append("セレクタ"); 新しい子要素を親要素の一番下に追加します
- $("セレクタ").preppend("新しい子要素"); 親要素の一番上に新しい子要素を追加します
- $("新しい子要素").preppend("セレクタ"); 新しい子要素を親要素の一番上に追加します
- $("新しい兄弟要素").before("兄弟要素"); 新しい兄弟要素を兄弟要素の前に追加します
- $("新しい子要素").after("兄弟要素"); 新しい兄弟要素を兄弟要素の後に追加します
- $("セレクタ").text("新しいテキスト"); セレクタで指定した要素のテキストを書換えます
- $("セレクタ").html("新しいHTML"); セレクタで指定した要素のHTMLを書換えます
HTMLタグ要素の追加・削除及び変更のサンプル・プログラムとして: Sample 05-02を学習した。
HTMLタグ要素の追加・削除及び変更のサンプル・プログラムとして: Sample 05-02を学習した。
HTMLタグ要素のテキストやHTMLタグそのものを書きかえるサンプル・プログラムとしては:Sample 05-02aを学習した。
(b)第5章 アニメーションの基本的なメソッド
- $("セレクタ").show(); セレクターを表示する
- $("セレクタ").hide(); セレクターを非表示する
- $("セレクタ").toggle(); セレクターを表示と非表示とに交互に切り替える
- $("セレクタ").slideDown(); セレクターをスライトで下がってくるように表示する
- $("セレクタ").slideUp(); セレクターをスライトで上がってくるように非表示にする
- $("セレクタ").slideToggle(); セレクターをslideDownとslideUpとを交互に切り替える
- $("セレクタ").fadeIn(); セレクターを透明度をあげながら表示する
- $("セレクタ").fadeOut(); セレクターを透明度をさげながら非表示する
- $("セレクタ").fadeToggle(); セレクターをfadeInとfadeOutとを交互に切り替える
- $("セレクタ").toggleClass("クラス"); セレクタを切り替えるアニメーション
画像の表示、非表示、トグル等のサンプルとして: Sample 05-03を学習した。
クラスを切り替えてアニメーション効果をだすのサンプルとして: Sample 05-04を学習した。
今日は時間の関係で各自サンプル・プログラムを入力してもらう機会がありませんでしたので、各自で実際に入力してテストしてみて下さい。
(C) 次回の例会とその討議テーマ
日時: 平成25年9月27日(第4金曜日)13:00~16:30
場所: 千葉市市民文化センター9階の千葉市民活力創造プラザの小会議室
テ―マ: jQueryの入門の続きで更に複雑なjQueryのアニメーション命令の実習をします。
宿題: 演習の仕組みを良く理解して、次のSample05-05からの実習がスムーズに行われるようにしておく。