HTML5など社内勉強会 Vol.3 - 入门闯补惫补厂肠谤颈辫迟
- 1. HTML5など 勉強会 Vol. 3 2011/11/10 @ 某社 System Management Headquaters George Harada
- 3. Agenda 1. ライトニングトーク 2. keynote 3. 入门闯补惫补厂肠谤颈辫迟
- 4. Agenda 1. ライトニングトーク 2. keynote 3. 入门闯补惫补厂肠谤颈辫迟
- 6. Agenda 1. ライトニングトーク 2. keynote 3. 入门闯补惫补厂肠谤颈辫迟
- 8. Agenda 1. ライトニングトーク 2. keynote 3. 入门闯补惫补厂肠谤颈辫迟
- 9. 実際にやってみる -- 社内URL -- 上記のURLに "Google Chrome" でアクセスして、 会社のメールアドレスを入力
- 12. これだけ理解すれば、制したも同じ！？ 1. DOM操作 2. イベント駆動 3. 非同期通信（これはまた、別のお話） JavaScript
- 14. DOMツリー <body> <h1>見出し</h1> <p><em>これが</em>本文です。</p> </body> HTML5に対応したブラウザでは 上記のタグを読み込むと、内部的に 右図のようなDOMツリーを構成する。 四角の枠を「ノード」と呼ぶ。 要素 body テキスト ホワイト?スペース 要素 p 要素 em テキスト 本文です。 テキスト ホワイト?スペース テキスト 見出し テキスト これが テキスト ホワイト?スペース 要素 h1
- 15. DOMツリーから特定の要素を参照する手段 ■プロパティ (一部) document.body , document.forms ■メソッド document.getElementById(id) document.getElementsByName(name) document.getElementsByTagName(tagname) document.getElementsByClassName(classes) element.getElementsByTagName(tagname) element.getElementsByClassName(classes) DOMアクセサー
- 17. HTMLを取得、置換、挿入する ■プロパティ element.innerHTML element.outerHTML ■メソッド (挿入のみ) element.insertAdjacentHTML(position, text) position: beforebegin ! 該当要素の直前 afterbegin ! 該当要素の最初の子要素として挿入（開始タグの直後） beforeend ! 該当要素の最後の子要素として挿入（終了タグの直前） afterend ! 該当要素の直後 HTMLの操作
- 20. style属性の値を取得、設定する ■プロパティ element.style.{CSSプロパティ名} CSSプロパティ名は、CSSで指定する名称から ハイフン(-)を取り除き、次の文字を大文字にしたもの ex. background-color => backgroundColor element.style.backgroundColor styleの操作
- 21. ブラウザが発生させる「イベント」に対して 処理を登録し、イベント発生時に実行させる → 一般的なGUIアプリケーションと同じ 対して、従来のケータイサイトは「リクエスト駆動」 → Webサーバへのアクセス（＝リクエスト）に対して → 処理を実行し、コンテンツ（＝レスポンス）を返す イベント駆動(イベントドリブン)
- 22. HTMLイベント (DOM Level 2 抜粋) イベントタイプ 発火タイミング load 文書のロードが完了した unload 文書がアンロードされた（ページ遷移した時など） change input要素の内容が変更された submit フォームが送信された focus 要素がフォーカスされた blur 要素からフォーカスが外れた scroll ウィンドウがスクロールした
- 23. マウスイベント (DOM Level 2) イベントタイプ 発火タイミング click 要素がクリックされた mousedown マウスボタンが要素上で押下された mouseup 押下されていたマウスボタンが要素上で離された mouseout マウスポインタが要素の上から離れた mouseover マウスポインタが要素の上に乗った mousemove マウスポインタが要素の上を移動した
- 24. イベントタイプ 発火タイミング touchstart 画面がタッチされた touchmove 画面をタッチしたまま動いている最中 touchend 画面からタッチが離れた touchcancel タッチイベントがキャンセルされた タッチイベント (スマートフォン)
- 26. ■HTML要素の属性に指定する <button onclick="alert('hello!')">ハロー</button> ■DOM要素のプロパティに指定する <button>ハロー</button> <script> document.querySelector('button').onclick = function() { alert('hello!'); } </script> イベント?ハンドラ
- 27. ■ EventTarget.addEventListener メソッドを利用する <button>ハロー</button> <script> document.querySelector('button').addEventListener('click', function() { alert('hello!'); }, false); </script> イベント?リスナー
- 28. 所定の時間が経過したら、特定の処理を実行 ■時限タイマー // timeoutミリ秒後に、関数callbackを実行 timerID = window.setTimeout(callback, timeout) // setTimeoutで作ったタイマーを解除 window.clearTimeout(timerID) ■繰り返しタイマー // timeoutミリ秒間隔で、関数callbackを実行 timerID = window.setInterval(callback, timeout) // setIntervalで作ったタイマーを解除 window.clearInterval(timerID) タイマー処理
- 30. これですべての コンテンツ終了
- 32. 勉強会スタッフ 絶賛募集中です
- 33. また次回 お会いしましょう
- 34. tthhaannkkss !!
- 35. Special Thanks to Operation Operation Operation Operation Operation Support OA Support 情報システム室 順不同 敬称略
- 36. 参考文献等 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