キュアセブン技術ブログ

考えたこと,学んだことを書きます

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を使う 要素を直で触る?