Web × プログラミング ~jQuery編~ #2
日報
今日は周南にきていた.目的は人の冷蔵庫にキュアちゃんシールを貼ること、Webプログラミングの勉強会に参加すること.
cloudGarage
先日のクリエイティブハントにきてくださったテコラスの方々.cloudGarageはマッチョが使うイメージよと言われて燃えた.使いたい.
0割り
0でわる問題.0で割ったらどうなるの?世界が終わるとしか習ってないので実際にやってみた. C言語. コンパイルは普通に通った.実行すると
Floating point exception: 8
とでた.
これからやっていく事
部室予約管理システムを作る.
眠っていたので再開する.開発環境をdocker-composeに移行したいので,自分でもう一回やってみます.
rssフォーマット xmlの仕様を制限したもの. hatena /rss wordpress /feed スクレイピングは無理やり. rssは使うために提供されている.簡単に抜ける.
埋め込むとき2つの方法
- ブログパーツを埋め込む.
Oauth
サーバーを作るのがめんどくさいのに標準.外部と連携させるとき必須.
フレームワークを作ったほうがいいね.
1パス入ると手間がかかる.速度と質を維持するにはフレームワークいらない
なぜwordpressを使うか?考える.それくらいだったら直書きがいいよねって場合もある.
セッションキーの中で発行する.
セッションキー
- コンシューマーキー
- コンシューマーシークレット
2つの組み合わせで認証
Web × プログラミング~jQuery編~
jQuery勉強会きた.
www.slideshare.net
Web × プログラミング ~jQuery編~ #2 - connpass
jQuery使ったほうがいいか,js書いたほうがいいか
JavaScriptとは
動的にHTMLを変える.悪用されたりで下火になった事も.
定義書ECMAScript-262.
ブラウザ側でもプログラムを実行する.スクリプトを処理.
あ,あれだブラウザにJSを売ったから動く
* サーバーサイドプログラミング言語
* クライアントサイドプログラミング言語
js
ccj
結構前に見せてもらったスライドだったけど今だったらよくわかる.感動する.
HTTPでwebサーバ,返し方はHTML,jsでクライアントが解析
返し方をJSONにしてjsでHTMLにして表示もできる.
悪い噂
- jsは遅い,jsは環境依存が強い
は歴史から.インタプリタで遅くなりがち JITコンパイラにより高速化されている. - ネスケ戦争
各ブラウザが独自拡張した関数や機能などを搭載.ネスケ戦争はなくなった. - たくさん動くものやばい 動きを止める時代
jQueryをなんで使うか
他にもあるよ.jQueryは共通化するためライブラリを作成しようとした. YUIは死んだ.なんかのライブラリ乗っけて動かすが当たり前. これからjQueryのライブラリ書こうとしてるけどそれ以外にしなくていいの? * 軽量.他のライブラリに比べて軽量. * 癖を吸収する
- 素のJSはidがないと指定できないのでクエリセレクタを強化した.(JSはタグに対して動作を描くもの.)
- クラスを追加する,削除するを簡単に
- スタイルを追加,属性を追加
data = "" Ajax:非同期でjsでHTMLで通信してくれる (トリガーがなくても通信してくれる.) 反応がくるまでの間表示したりできる.
DOM解析
XMLをバラす
データの構造とか持っててアクションを起こす.
Javaをリスペクトしただけかよ!Javaの親戚ではなくCに近い.
jQuery('A');
めんどくさくない?$でいいよ.つまり$はjQueryの略.
ワードプレス版jQueryは省略されているので注意.jQueryにすれば動く.組み込まれてるバージョンを削除して公開されているjQueryを置き換えれば動作する.
Ajax入れるは事実上のjQuery.
ライブラリの取り込み
script に src="jquery.js"を入れればいい.
呼び出し
$.trim()
$('p.foo').addClass('bar');
pタグのfoo.これはスタイルシートと書き方同じ.
DOM
each関数
流れ
jQueryとスタイルシートのバランス考える.CSSでできるならそうしたほうがいい.
jsがよくなってきてるのでjQuery使わなくてよくなってきた.素のjsに置き換え,別のライブラリに移行する動きもある.
実装
googleAPIのサイトからコピーするのが手っ取り早い.
headに入れておくのが早い.せめてjQueryを使う前に書く.
イベントに対してってのがjsだと弱い.イベントの待機の仕方.
押したボタン自体の要素をセレクトするにはthis.複数のボタンがある時に分けられる.どこのボタンを押したか?を選定するときに使われる.
同じレベルにあるinput boxをとってきたい.
DOMセレクタのいいところ.
* parent()さらに親はparents()当てはまるまで探してくる.
* children(),さらに子はfind()
兄弟の指定方法
siblings
色を変える
styleを使う 要素を直で触る?