The World's billboards Memo Blog

世界の広告ビルボードの記録ブログ。

【読書メモ】JavaScriptの基本と常識

Posted by advernya : 11月 3, 2010

◎JavaScriptで実現出来ること
1. ページの中の要素の内容を変更
2. ページの中の要素のスタイルを変更
3. ページの中の要素を動かす
4. ページの中の要素を非表示/表示する
5. フォーム送信データのチェック
6. クッキーの読み書き
7. クリックなどのユーザーアクションに対応出来る
8. サーバーと通信出来る

◎WEB2.0の定義
1. サービス提供者である事
2. データソ−スをコントロール出来る
3. ユーザーの無意識な参加を促す
4. 集合知を利用する
5. ロングテールを理解している
6. プラットフォームを選ばない
7. リッチで軽い

◎携帯電話はJavascriptに対応しているのか
OperaやNetFront搭載機種なら対応しているが、そうでない機種は基本的には対応していない。

◎JavaScriptの活用
★クライアントを把握する能力
・使っているブラウザ、OS、プラグインなどがわかる。従来はサーバー側のプログラムでしかわからなかった。
・ブラウザの種類のよるページの崩れを調整してレイアウトを変える事が可能。
・Flashが埋め込んである場合に、ユーザーがプラグインを持っているか調べ、その後の対応を決められる。
★ユーザーとコミュニケーションする能力
フォーム、マウス操作、ウィンドウを使って
★ドキュメントを操作する能力
Document Object Model(DOM)を使ってテキストや画像などを操作出来る
★ゲーム能力
イベントとDOMを組み合わせるとゲームを作る事も可能
★WEBアプリケーション能力
サーバー通信とDOMを組み合わせたAjaxはWEBアプリケーションを高度化する。

◎操作の基本的な仕組み
操作したい要素にはHTMLタグのid属性を使って名前を付けておく。この名前を使ってJavaScriptからアクセスする。

◎HTML操作の基本パターン
★ユーザーがクリックなど何か操作をしたときに、HTML要素を操作するというパターンがJavaScriptの王道で基本。
「ユーザーが何か操作をしました」という事をイベントという。
・イベントが起きた時にある関数が実行されるように設定する。この関数をイベント・ハンドラーという。
・ユーザー操作はそれほど多くなない。マウスのクリック・ドラッグ、キー入力。
・マウスでクリックするのは、リンク・ボタン・チェックボックス・ラジオボタン・画像。
・キーボード入力は、主に文字と上下左右のカーソルキー。
★タイマーを使って操作
★通信を使って。Ajaxでデータが到着したら何かアクションを起こす。

◎BOM(ブラウザー・オブジェクト・モデル)
・windowオブジェクト
・navigatorオブジェクト
・documentオブジェクト

◎DOM(ドキュメント・オブジェクト・モデル)
Webページ内の画像やテキストなどの構成要素をJavaScriptから操作出来るよう、要素をオブジェクト化する技術。
W3CによってDOMの仕様が定められている。BOMではブラウザ間で違いがあったが、それを解消したのがDOM。
今後はBOMよりもDOMが主役になってくるだろう。2004年にDOM Level3が発表されたが、ほとんどサポートされてない。
Level2は2000年発表。

◎イベントハンドラー
「インラインモデル」と「従来モデル」がある。
・インラインモデル…全てのブラウザでサポートされている。関数名変更・イベント登録をやめたりの変更にはHTMLタグの変更も必要。
・従来モデル…新しいブラウザでサポート。古いブラウザでは動作しない場合も。JavaScriptだけでイベントの登録や解除ができるので便利。イベント・ハンドラーの関数名変更もJavaScriptのコード修正だけで済む。

◎ブラウザの最新シェアの公開サイト
http://marketshear.hitslink.com/report.aspx?qprid=0

◎Cookie
JavaScriptはローカルディスクにアクセス出来ないが、、Cookieだけは唯一の例外。
C:¥Users¥¥AppData¥Roaming¥Microsoft¥Windows¥Cookies

◎JavaScriptからスタイルを操作(静的コンテンツの操作)
すべての要素にはstyleオブジェクトがプロパティの1つとして含まれている。
このstyleオブジェクトをJavaScriptで操作すると、スタイルをコントロール出来る。

◎サーバーと連携するAjax
Ajaxは言語や技術ではなく、既存の標準的な技術をJavaScriptで統合して新しい効果を発揮出来るようにした総合的な活用技術。
・Ajaxは単独技術ではなく技術の組み合わせ
・XMLHttpRequestを利用してサーバーと非同期通信する
・XML、JSON、テキストなどをサーバーとやりとりする
・ドキュメント・オブジェクト・モデル(DOM)を使ったダイナミックな表示
・JavaScriptによってそれらの要素技術を統合する

◎AjaxでXMLを読み込む
Ajaxで通信するファイルの本命はXMLファイル。XMLはHTMLと似てはいるが、タグを自分で定義出来るのが特徴。XMLはデータ構造を記述する言語で、表現方法などの装飾的な情報は含まない。

◎XMLファイルはUTF-8で保存しないと文字化けする。
Ajaxで通信するデータのフォーマットはUTF-8に決まっている。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。