読者です 読者をやめる 読者になる 読者になる

プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「JavaScript&TypeScript+Knockout勉強会(AWDD#7)」に行ってきた(その1「JavaScriptで作る動的ウェブサイト入門」by 金箱遼さん)

イベント JavaScript TypeScript Knockoutjs

f:id:JHashimoto:20140409044240j:plain

5/21に、「JavaScript&TypeScript+Knockout勉強会(AWDD#7)」に行ってきたので、2回に分けて勉強会の内容を紹介します。

JavaScript&TypeScript+Knockout勉強会(AWDD#7) - connpass

 

今回は1回目です。最初のセッションは、金箱遼さんの「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メソッド:1回のプッシュ処理
    • volume変数:シャンプーの現在の量を保持
    • getVolumeメソッド:シャンプーの現在の量を取得
    • name変数:シャンプーの名前

動的ウェブサイトをつくってみる

  • シャンプーの残りをSpanに表示
    • showVolumeメソッド
    • spanのjQueryオブジェクトを作成
  • pushメソッド
    • jQueryオブジェクトのtextメソッドでテキストを操作
  • プッシュボタンのonclickに"push();showVolume()"を設定

便利なサイトの紹介

最強オブジェクト指向言語 JavaScript 再入門!

 

jsdo.it - Share JavaScript, HTML5 and CSS
jsdo.itはWEBデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティです。 ...

 

Create a new fiddle - JSFiddle

リンク

第2回のリンクです。

「JavaScript&TypeScript+Knockout勉強会(AWDD#7)」に行ってきた(その2「TypeScriptでKnockoutを使ってみた」by 村上俊介さん) - プログラマーな日々