html5など社内勉強会 vol.3 - 入門javascript
DESCRIPTION
TRANSCRIPT
HTML5など 勉強会 Vol. 3
2011/11/10 @ 某社
System Management HeadquatersGeorge Harada
提 供
勉強会スタッフ（ボランティア）
システム統括本部
Agenda
1. ライトニングトーク
2. keynote
3. 入門JavaScript
Agenda
1. ライトニングトーク
2. keynote
3. 入門JavaScript
1人の持ち時間５分延長はありません質疑応答の時間もありません気になる事は本人を捕まえて
LTのお約束ごと
Agenda
1. ライトニングトーク
2. keynote
3. 入門JavaScript
Agenda
1. ライトニングトーク
2. keynote
3. 入門JavaScript
実際にやってみる-- 社内URL --
上記のURLに"Google Chrome" でアクセスして、
会社のメールアドレスを入力
sample-- 社内URL --
Webページに機能をもたらすこと
ユーザに視覚的なフィードバックを与えてインタラクティブな機能を実現するには、DOM操作が欠かせない
JavaScriptの役割
これだけ理解すれば、制したも同じ！？
1. DOM操作
2. イベント駆動
3. 非同期通信 （これはまた、別のお話）
JavaScript
プログラミング言語から、HTMLドキュメントのコンテンツにアクセスするためのAPIを定義したもの
■メソッド・命令■プロパティ・属性、性質
DOM (Document Object Model)
DOMツリー<body><h1>見出し</h1><p><em>これが</em>本文です。</p></body>
HTML5に対応したブラウザでは上記のタグを読み込むと、内部的に右図のようなDOMツリーを構成する。
四角の枠を「ノード」と呼ぶ。
要素 body
テキスト ホワイト・スペース
要素 p
要素 em
テキスト 本文です。
テキスト ホワイト・スペース
テキスト 見出し
テキスト これが
テキスト ホワイト・スペース
要素 h1
DOMツリーから特定の要素を参照する手段■プロパティ (一部)
document.body , document.forms■メソッドdocument.getElementById(id)document.getElementsByName(name)document.getElementsByTagName(tagname)document.getElementsByClassName(classes)element.getElementsByTagName(tagname)element.getElementsByClassName(classes)
DOMアクセサー
CSSのセレクター表記を使って、特定の要素を抽出するためのAPI
■メソッドdocument.querySelector(selectors)document.querySelectorAll(selectors)element.querySelector(selectors)element.querySelectorAll(selectors)
DOMアクセサーの不自由な点が改良されて、使いやすい
Selectors API
HTMLを取得、置換、挿入する■プロパティelement.innerHTMLelement.outerHTML■メソッド (挿入のみ)
element.insertAdjacentHTML(position, text) position: beforebegin ! 該当要素の直前 afterbegin ! 該当要素の最初の子要素として挿入（開始タグの直後） beforeend ! 該当要素の最後の子要素として挿入（終了タグの直前） afterend ! 該当要素の直後
HTMLの操作
テキストノードを取得、設定する■プロパティelement.textContent
■メソッド (設定のみ)
document.createTextNode()
テキストの操作
class属性の値を取得、設定する■プロパティelement.classListelement.classList.length■メソッド
element.classList.item(index)element.classList.contains(classname)element.classList.add(classname)element.classList.remove(classname)element.classList.toggle(classname)
classの操作
style属性の値を取得、設定する■プロパティelement.style.{CSSプロパティ名}
CSSプロパティ名は、CSSで指定する名称からハイフン(-)を取り除き、次の文字を大文字にしたもの
ex. background-color => backgroundColor element.style.backgroundColor
styleの操作
ブラウザが発生させる「イベント」に対して処理を登録し、イベント発生時に実行させる→ 一般的なGUIアプリケーションと同じ
対して、従来のケータイサイトは「リクエスト駆動」→ Webサーバへのアクセス（＝リクエスト）に対して→ 処理を実行し、コンテンツ（＝レスポンス）を返す
イベント駆動 (イベントドリブン)
HTMLイベント (DOM Level 2 抜粋)
イベントタイプ 発火タイミング
load 文書のロードが完了した
unload 文書がアンロードされた（ページ遷移した時など）
change input要素の内容が変更された
submit フォームが送信された
focus 要素がフォーカスされた
blur 要素からフォーカスが外れた
scroll ウィンドウがスクロールした
マウスイベント (DOM Level 2)
イベントタイプ 発火タイミング
click 要素がクリックされた
mousedown マウスボタンが要素上で押下された
mouseup 押下されていたマウスボタンが要素上で離された
mouseout マウスポインタが要素の上から離れた
mouseover マウスポインタが要素の上に乗った
mousemove マウスポインタが要素の上を移動した
イベントタイプ 発火タイミング
touchstart 画面がタッチされた
touchmove 画面をタッチしたまま動いている最中
touchend 画面からタッチが離れた
touchcancel タッチイベントがキャンセルされた
タッチイベント (スマートフォン)
■イベント・ハンドラ・HTML要素の属性に指定する・DOM要素のプロパティに指定する
※1つの要素・イベントに対して、1つしか登録できない
■イベント・リスナー・EventTarget.addEventListener() メソッドを利用する
※複数登録できる
イベントに対する処理の登録
■HTML要素の属性に指定する<button onclick="alert('hello!')">ハロー</button>
■DOM要素のプロパティに指定する<button>ハロー</button><script> document.querySelector('button').onclick = function() { alert('hello!'); }</script>
イベント・ハンドラ
■ EventTarget.addEventListener メソッドを利用する<button>ハロー</button><script> document.querySelector('button').addEventListener('click', function() { alert('hello!'); }, false);</script>
イベント・リスナー
所定の時間が経過したら、特定の処理を実行■時限タイマー// timeoutミリ秒後に、関数callbackを実行timerID = window.setTimeout(callback, timeout)// setTimeoutで作ったタイマーを解除window.clearTimeout(timerID)
■繰り返しタイマー// timeoutミリ秒間隔で、関数callbackを実行timerID = window.setInterval(callback, timeout)// setIntervalで作ったタイマーを解除window.clearInterval(timerID)
タイマー処理
■デバッグ用のログを出力するconsole.log()
■ブラウザにポップアップを表示するwindow.alert(message)
その他
これですべてのコンテンツ終了
後日、アンケートにご協力下さい！！！
勉強会スタッフ絶賛募集中です
また次回お会いしましょう
tthhaannkkss !!
Special Thanks toOperationOperationOperationOperationOperationSupport
OA Support 情報システム室順不同 敬称略
参考文献等HTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541
JavaScript- http://www.amazon.co.jp/パーフェクトJavaScript-PERFECT-4-井上-誠一郎/dp/477414813X- http://www.amazon.co.jp/徹底解説-HTML5-APIガイドブック-ビジュアル系API編-羽田野/dp/4798028541
Zen-Coding- http://code.google.com/p/zen-coding/- http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn- http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn