Movatterモバイル変換

HTML5など勉強会 Vol. 32011/11/10 @ 某社System Management HeadquatersGeorge Harada

提供勉強会スタッフ（ボランティア）システム統括本部

Agenda1. ライトニングトーク2. keynote3. 入門JavaScript

1人の持ち時間５分延長はありません質疑応答の時間もありません気になる事は本人を捕まえてLTのお約束ごと

資料はこちらhttp://goo.gl/UmWez

実際にやってみる-- 社内URL --上記のURLに"Google Chrome" でアクセスして、会社のメールアドレスを入力

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 => backgroundColorelement.style.backgroundColorstyleの操作

ブラウザが発生させる「イベント」に対して処理を登録し、イベント発生時に実行させる→ 一般的な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)その他

これですべてのコンテンツ終了

後日、アンケートにご協力下さい！！！

勉強会スタッフ絶賛募集中です

また次回お会いしましょう

Special Thanks toOperationOperationOperationOperationOperationSupportOA Support 情報システム室順不同敬称略

参考文献等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

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

Viewers also liked

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

More from George Harada

Recently uploaded

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