Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5など社内勉強会 Vol.3 - 入門JavaScript

547 views

Published on

Published in: Education
  • Be the first to comment

HTML5など社内勉強会 Vol.3 - 入門JavaScript

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

×