5/21に、「JavaScript＆TypeScript＋Knockout勉強会（AWDD#7）」に行ってきたので、２回に分けて勉強会の内容を紹介します。
JavaScript＆TypeScript＋Knockout勉強会（AWDD#7） - connpass
今回は１回目です。最初のセッションは、金箱遼さんの「JavaScriptで作る動的ウェブサイト入門」でした。
セッション内容
非デザイナー、非エンジニアとスムーズにコミュニケーションするには
- 動くモックを作ると効率がよい
セッションで目指すところ
- jQueryプラグインを使えるレベルから一歩上にいくのにはハードルがある
- 体系的な前提知識が必要
- 全体像がわかるようにするのがこのセッションのゴール
jQueryについて知る
- javaScriptとは（wikipediaより）
- プログラム言語である
- オブジェクト指向である
- スクリプト言語である
- 主要なブラウザが実装している
jQueryの機能と特徴
- DOMエレメントの選択
- DOM操作と変更
- イベント
- CSS操作
- エフェクトとアニメーション
- Ajax
- 拡張性
jQueryプラグインについて知る
- jQueryで動くプログラム
DOMとjQueryオブジェクトについて知る
- DOMとはXMLやHTMLにアクセスするためのAPI
- DOMはツリーを構成する要素のことをノードと呼ぶ
- ノード≒DOM Element
- CSSの要素を追加したり、テキストを書き換えたり、前後に要素を追加したりできる
- 参考サイト
JavaScript DOM リファレンス
このページはJavaScript DOMのリファレンスです。JavaScriptでHTML/XMLドキュメントを操作するサンプルを掲載しています。 ...
jQueryオブジェクト
- jQueryからDOM要素を操作をするときに便利な、jQueryオブジェクトというものがある
- DOMからjQueryオブジェクトに変換できる
- jQueryオブジェクトからDOMに変換できる
- jQueryオブジェクトは複数のDOM要素を持てる
イベントについて知る
- JavaScriptはブラウザの操作を知ることができる
- この操作のことをイベントと呼ぶ
- jQueryはより簡単にイベントを扱えるようにしてくれる
オブジェクトについて知る
- データと手続きをひとまとまりにしたもの
- シャンプーをオブジェクトで表現
- pushメソッド：１回のプッシュ処理
- volume変数：シャンプーの現在の量を保持
- getVolumeメソッド：シャンプーの現在の量を取得
- name変数：シャンプーの名前
動的ウェブサイトをつくってみる
- シャンプーの残りをSpanに表示
- showVolumeメソッド
- spanのjQueryオブジェクトを作成
- pushメソッド
- jQueryオブジェクトのtextメソッドでテキストを操作
- プッシュボタンのonclickに"push();showVolume()"を設定
便利なサイトの紹介
jsdo.it - Share JavaScript, HTML5 and CSS
jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。 ...
Create a new fiddle - JSFiddle
リンク
第２回のリンクです。
