Your SlideShare is downloading. ×
HTML5など社内勉強会 Vol.3 - 入門JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

204

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
204
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5など勉強会 Vol. 32011/11/10 @ 某社System Management HeadquatersGeorge Harada
  • 2. 提 供勉強会スタッフ(ボランティア)システム統括本部
  • 3. Agenda1. ライトニングトーク2. keynote3. 入門JavaScript
  • 4. Agenda1. ライトニングトーク2. keynote3. 入門JavaScript
  • 5. 1人の持ち時間5分延長はありません質疑応答の時間もありません気になる事は本人を捕まえてLTのお約束ごと
  • 6. Agenda1. ライトニングトーク2. keynote3. 入門JavaScript
  • 7. 資料はこちらhttp://goo.gl/UmWez
  • 8. Agenda1. ライトニングトーク2. keynote3. 入門JavaScript
  • 9. 実際にやってみる-- 社内URL --上記のURLに"Google Chrome" でアクセスして、会社のメールアドレスを入力
  • 10. sample-- 社内URL --
  • 11. Webページに機能をもたらすことユーザに視覚的なフィードバックを与えてインタラクティブな機能を実現するには、DOM操作が欠かせないJavaScriptの役割
  • 12. これだけ理解すれば、制したも同じ!?1. DOM操作2. イベント駆動3. 非同期通信(これはまた、別のお話)JavaScript
  • 13. プログラミング言語から、HTMLドキュメントのコンテンツにアクセスするためのAPIを定義したもの■メソッド・命令■プロパティ・属性、性質DOM(Document Object Model)
  • 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アクセサー
  • 16. CSSのセレクター表記を使って、特定の要素を抽出するためのAPI■メソッドdocument.querySelector(selectors)document.querySelectorAll(selectors)element.querySelector(selectors)element.querySelectorAll(selectors)DOMアクセサーの不自由な点が改良されて、使いやすいSelectors API
  • 17. HTMLを取得、置換、挿入する■プロパティelement.innerHTMLelement.outerHTML■メソッド (挿入のみ)element.insertAdjacentHTML(position, text)position: beforebegin ! 該当要素の直前afterbegin ! 該当要素の最初の子要素として挿入(開始タグの直後)beforeend ! 該当要素の最後の子要素として挿入(終了タグの直前)afterend ! 該当要素の直後HTMLの操作
  • 18. テキストノードを取得、設定する■プロパティelement.textContent■メソッド (設定のみ)document.createTextNode()テキストの操作
  • 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. style属性の値を取得、設定する■プロパティelement.style.{CSSプロパティ名}CSSプロパティ名は、CSSで指定する名称からハイフン(-)を取り除き、次の文字を大文字にしたものex. background-color => backgroundColorelement.style.backgroundColorstyleの操作
  • 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 タッチイベントがキャンセルされたタッチイベント (スマートフォン)
  • 25. ■イベント・ハンドラ・HTML要素の属性に指定する・DOM要素のプロパティに指定する※1つの要素・イベントに対して、1つしか登録できない■イベント・リスナー・EventTarget.addEventListener() メソッドを利用する※複数登録できるイベントに対する処理の登録
  • 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)タイマー処理
  • 29. ■デバッグ用のログを出力するconsole.log()■ブラウザにポップアップを表示するwindow.alert(message)その他
  • 30. これですべてのコンテンツ終了
  • 31. 後日、アンケートにご協力下さい!!!
  • 32. 勉強会スタッフ絶賛募集中です
  • 33. また次回お会いしましょう
  • 34. tthhaannkkss !!
  • 35. Special Thanks toOperationOperationOperationOperationOperationSupportOA Support 情報システム室順不同 敬称略
  • 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

×