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

HTML5など
勉強会 Vol. 3
2011/11/10 @ 某社
System Management Headquaters
George Harada

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

Agenda
1. ライトニングトーク
2. keynote
3. 入門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.innerHTML
element.outerHTML
■メソッド (挿入のみ)
element.insertAdjacentHTML(position, text)
position: beforebegin ! 該当要素の直前
afterbegin ! 該当要素の最初の子要素として挿入（開始タグの直後）
beforeend ! 該当要素の最後の子要素として挿入（終了タグの直前）
afterend ! 該当要素の直後
HTMLの操作

テキストノードを取得、設定する
■プロパティ
element.textContent
■メソッド (設定のみ)
document.createTextNode()
テキストの操作

class属性の値を取得、設定する
■プロパティ
element.classList
element.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)
その他

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

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

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

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

Special Thanks to
Operation
Operation
Operation
Operation
Operation
Support
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

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

More Related Content

Viewers also liked

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

More from George Harada

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