Enviar pesquisa
Carregar
HTML5など社内勉強会 Vol.3 - 入門JavaScript
•
1 gostou
•
913 visualizações
George Harada
Seguir
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 36
Baixar agora
Baixar para ler offline
Recomendados
Wave
Wave
Akira Takahashi
[社内勉強会]Gradleを使おう
[社内勉強会]Gradleを使おう
hirooooo
テスト駆動開発の導入ーペアプログラミングの学習効果ー
テスト駆動開発の導入ーペアプログラミングの学習効果ー
Shuji Watanabe
5分で武装 ~QnA Maker編~
5分で武装 ~QnA Maker編~
Takashi Ushigami
Serverless LT 20201202
Serverless LT 20201202
ssuserebdd2a
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
Yukio Andoh
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
Recomendados
Wave
Wave
Akira Takahashi
[社内勉強会]Gradleを使おう
[社内勉強会]Gradleを使おう
hirooooo
テスト駆動開発の導入ーペアプログラミングの学習効果ー
テスト駆動開発の導入ーペアプログラミングの学習効果ー
Shuji Watanabe
5分で武装 ~QnA Maker編~
5分で武装 ~QnA Maker編~
Takashi Ushigami
Serverless LT 20201202
Serverless LT 20201202
ssuserebdd2a
プログラミング言語Clojureのニャンパスでの活用事例
プログラミング言語Clojureのニャンパスでの活用事例
sohta
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]
Yukio Andoh
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
You_Kinjoh
Three.jsで3D気分
Three.jsで3D気分
Toshio Ehara
楽しいShaderToy
楽しいShaderToy
Masaki Sasaki
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
GLSLによるシェーダーアートことはじめ
GLSLによるシェーダーアートことはじめ
Yoichi Hirata
コンテンツをディレクションするということ
コンテンツをディレクションするということ
Yoshihiro Kanematsu
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
Daisuke Miyazaki
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コピーライターはせがわ てつじ
コンテンツ作りの三原則
コンテンツ作りの三原則
INFOBAHN.inc(株式会社インフォバーン)
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
典子 松本
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
Sadao Tokuyama
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Visso株式会社
Lync でできる? 仕事効率化
Lync でできる? 仕事効率化
Manato KAMEYA
Java one 2013 sf 報告会lt
Java one 2013 sf 報告会lt
torutk
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Power Automate for desktopで安定してフローを実行するためのちょっとしたTips
Power Automate for desktopで安定してフローを実行するためのちょっとしたTips
kinuasa
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Norito Agetsuma
Koi::Bana〜恋に落ちたエンジニア〜
Koi::Bana〜恋に落ちたエンジニア〜
Munenori Sugimura
Google Product
Google Product
Daisuke Sugai
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!デベロッパーネットワーク
Mais conteúdo relacionado
Destaque
Three.jsで3D気分
Three.jsで3D気分
Toshio Ehara
楽しいShaderToy
楽しいShaderToy
Masaki Sasaki
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
GLSLによるシェーダーアートことはじめ
GLSLによるシェーダーアートことはじめ
Yoichi Hirata
コンテンツをディレクションするということ
コンテンツをディレクションするということ
Yoshihiro Kanematsu
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
Daisuke Miyazaki
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
Yuudai Tachibana
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コピーライターはせがわ てつじ
コンテンツ作りの三原則
コンテンツ作りの三原則
INFOBAHN.inc(株式会社インフォバーン)
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
Destaque
(10)
Three.jsで3D気分
Three.jsで3D気分
楽しいShaderToy
楽しいShaderToy
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
GLSLによるシェーダーアートことはじめ
GLSLによるシェーダーアートことはじめ
コンテンツをディレクションするということ
コンテンツをディレクションするということ
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
カヤックコピー部のコピー講座
カヤックコピー部のコピー講座
コンテンツ作りの三原則
コンテンツ作りの三原則
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
Semelhante a HTML5など社内勉強会 Vol.3 - 入門JavaScript
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
典子 松本
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
Sadao Tokuyama
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Visso株式会社
Lync でできる? 仕事効率化
Lync でできる? 仕事効率化
Manato KAMEYA
Java one 2013 sf 報告会lt
Java one 2013 sf 報告会lt
torutk
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
yoshikawa_t
Power Automate for desktopで安定してフローを実行するためのちょっとしたTips
Power Automate for desktopで安定してフローを実行するためのちょっとしたTips
kinuasa
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Norito Agetsuma
Koi::Bana〜恋に落ちたエンジニア〜
Koi::Bana〜恋に落ちたエンジニア〜
Munenori Sugimura
Google Product
Google Product
Daisuke Sugai
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
schoowebcampus
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!デベロッパーネットワーク
ゲーム開発環境の自動化
ゲーム開発環境の自動化
Masahiko Nakamura
GoogleAnalytics Tools クックブック
GoogleAnalytics Tools クックブック
Takashi Sudou
クラウドワークスを使ったバーチャル開発術(セミナー資料)
クラウドワークスを使ったバーチャル開発術(セミナー資料)
Innova Inc.
クラウドワークスを使ったバーチャル開発術
クラウドワークスを使ったバーチャル開発術
Kimiya Sato
Itca yammer提案110615
Itca yammer提案110615
伸夫 森本
テストしなイカ? Seleniumで自動ブラウザテスト
テストしなイカ? Seleniumで自動ブラウザテスト
Ohishi Mikage
気の合う人達と社外で社内勉強会
気の合う人達と社外で社内勉強会
Yu Shibatsuji
Scrumの紹介とXPプロジェクトへの適用(Scrum and XP)
Scrumの紹介とXPプロジェクトへの適用(Scrum and XP)
Masashi Umezawa
Semelhante a HTML5など社内勉強会 Vol.3 - 入門JavaScript
(20)
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
2010年11月27日土曜日FlexUserGroup勉強会 第125回 京都 Flex & Google App Engine for Java & ...
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Lync でできる? 仕事効率化
Lync でできる? 仕事効率化
Java one 2013 sf 報告会lt
Java one 2013 sf 報告会lt
Chrome Devtools for beginners (v1.1)
Chrome Devtools for beginners (v1.1)
Power Automate for desktopで安定してフローを実行するためのちょっとしたTips
Power Automate for desktopで安定してフローを実行するためのちょっとしたTips
JSR 352 “Batch Applications for the Java Platform”
JSR 352 “Batch Applications for the Java Platform”
Koi::Bana〜恋に落ちたエンジニア〜
Koi::Bana〜恋に落ちたエンジニア〜
Google Product
Google Product
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せます
ゲーム開発環境の自動化
ゲーム開発環境の自動化
GoogleAnalytics Tools クックブック
GoogleAnalytics Tools クックブック
クラウドワークスを使ったバーチャル開発術(セミナー資料)
クラウドワークスを使ったバーチャル開発術(セミナー資料)
クラウドワークスを使ったバーチャル開発術
クラウドワークスを使ったバーチャル開発術
Itca yammer提案110615
Itca yammer提案110615
テストしなイカ? Seleniumで自動ブラウザテスト
テストしなイカ? Seleniumで自動ブラウザテスト
気の合う人達と社外で社内勉強会
気の合う人達と社外で社内勉強会
Scrumの紹介とXPプロジェクトへの適用(Scrum and XP)
Scrumの紹介とXPプロジェクトへの適用(Scrum and XP)
Mais de George Harada
もし、IT関連企業で働くことになったら
もし、IT関連企業で働くことになったら
George Harada
暑い夏のお仕事
暑い夏のお仕事
George Harada
What is LT ?
What is LT ?
George Harada
いがいがさんと私
いがいがさんと私
George Harada
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
George Harada
HTML5など社内勉強会 Vol.8 - WebSocket
HTML5など社内勉強会 Vol.8 - WebSocket
George Harada
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
George Harada
HTML5など社内勉強会 Vol.3 keynote
HTML5など社内勉強会 Vol.3 keynote
George Harada
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
George Harada
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
LTとはなんぞ?
LTとはなんぞ?
George Harada
学生向け会社説明会でHTML5
学生向け会社説明会でHTML5
George Harada
Mais de George Harada
(12)
もし、IT関連企業で働くことになったら
もし、IT関連企業で働くことになったら
暑い夏のお仕事
暑い夏のお仕事
What is LT ?
What is LT ?
いがいがさんと私
いがいがさんと私
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
HTML5など社内勉強会 Vol.8 - WebSocket
HTML5など社内勉強会 Vol.8 - WebSocket
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
HTML5など社内勉強会 Vol.3 keynote
HTML5など社内勉強会 Vol.3 keynote
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
LTとはなんぞ?
LTとはなんぞ?
学生向け会社説明会でHTML5
学生向け会社説明会でHTML5
Último
Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdf
oganekyokoi
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
yutakashikano1984
International Politics I - Lecture 1
International Politics I - Lecture 1
Toru Oga
Registration of travel agents - 'Explanation of the registration system under...
Registration of travel agents - 'Explanation of the registration system under...
oganekyokoi
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
RodolfFernandez1
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
oganekyokoi
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
shu1108hina1020
What I did before opening my business..pdf
What I did before opening my business..pdf
oganekyokoi
Último
(8)
Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdf
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
International Politics I - Lecture 1
International Politics I - Lecture 1
Registration of travel agents - 'Explanation of the registration system under...
Registration of travel agents - 'Explanation of the registration system under...
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要 パワーポイント
What I did before opening my business..pdf
What I did before opening my business..pdf
HTML5など社内勉強会 Vol.3 - 入門JavaScript
1.
HTML5など 勉強会 Vol. 3 2011/11/10
@ 某社 System Management Headquaters George Harada
2.
提 供 勉強会スタッフ (ボランティア) システム統括本部
3.
Agenda 1. ライトニングトーク 2. keynote 3.
入門JavaScript
4.
Agenda 1. ライトニングトーク 2. keynote 3.
入門JavaScript
5.
1人の持ち時間5分 延長はありません 質疑応答の時間もありません 気になる事は本人を捕まえて LTのお約束ごと
6.
Agenda 1. ライトニングトーク 2. keynote 3.
入門JavaScript
7.
資料はこちら http://goo.gl/UmWez
8.
Agenda 1. ライトニングトーク 2. keynote 3.
入門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.innerHTML element.outerHTML ■メソッド (挿入のみ) element.insertAdjacentHTML(position, text) position:
beforebegin ! 該当要素の直前 afterbegin ! 該当要素の最初の子要素として挿入(開始タグの直後) beforeend ! 該当要素の最後の子要素として挿入(終了タグの直前) afterend ! 該当要素の直後 HTMLの操作
18.
テキストノードを取得、設定する ■プロパティ element.textContent ■メソッド (設定のみ) document.createTextNode() テキストの操作
19.
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の操作
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 タッチイベントがキャンセルされた タッチイベント (スマートフォン)
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 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
Baixar agora