Submit Search
Upload
undefined in eventAttributes
•
Download as PPTX, PDF
•
0 likes
•
379 views
I
ironiqu
Follow
JavaScript勉強会:"undefined in" 4回目、eventAttributes
Read less
Read more
Technology
Report
Share
Report
Share
1 of 50
Download now
Recommended
undefined in eventListener
undefined in eventListener
ironiqu
undefined in startup
undefined in startup
ironiqu
undefined in getElement(s)
undefined in getElement(s)
ironiqu
undefined in dom
undefined in dom
ironiqu
IPv4/IPv6 移行・共存技術の動向
IPv4/IPv6 移行・共存技術の動向
Yuya Rin
MVC 02
MVC 02
Satoshi Shoda
MVC 03
MVC 03
Satoshi Shoda
MVC 01
MVC 01
Satoshi Shoda
Recommended
undefined in eventListener
undefined in eventListener
ironiqu
undefined in startup
undefined in startup
ironiqu
undefined in getElement(s)
undefined in getElement(s)
ironiqu
undefined in dom
undefined in dom
ironiqu
IPv4/IPv6 移行・共存技術の動向
IPv4/IPv6 移行・共存技術の動向
Yuya Rin
MVC 02
MVC 02
Satoshi Shoda
MVC 03
MVC 03
Satoshi Shoda
MVC 01
MVC 01
Satoshi Shoda
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
More Related Content
Recently uploaded
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Recently uploaded
(7)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Featured
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
Featured
(20)
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
Skeleton Culture Code
Skeleton Culture Code
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Getting into the tech field. what next
Getting into the tech field. what next
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
How to have difficult conversations
How to have difficult conversations
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The six step guide to practical project management
The six step guide to practical project management
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
undefined in eventAttributes
1.
undefinedin.net 2015/6/18 wrote by
ironiqu
2.
undefined in eventAttributes 今回は、ElementのEventについて覚えていき ます
3.
今日のアジェンダ 1. 前回の復習 2. ElementのEventってなに? 3.
Eventの種類 4. Eventの設定方法 5. eventAttributesってみる 6. 他の言語環境のEvent? 7. 今週のLT 60分ほどおつきあいください
4.
前回の復習 前回について何か覚えてる方!
5.
前回の復習 Elementの取得方法についてですね
6.
前回の復習 Elementの取得の呪文を解説して 取得を実演しました では、idでの取得をどなたか教えてください
7.
前回の復習 idの値を使って取得 <p id=”text”> テキスト
</p> document.getElementById(“text”)
8.
前回の復習 classの値を使って取得 <p class=”text”> テキスト
</p> document.getElementsByClassName(“text”)
9.
前回の復習 詳細につきましては前回のスライドを見てくだ さい
10.
ElementのEventってなに? では、本題 Eventについてです
11.
ElementのEventってなに? Event 出来事、事象 weblio辞書より引用
12.
ElementのEventってなに? 言葉としてのEventの意味はご存知だと思いま す では、Webページに於けるEventとは?
13.
ElementのEventってなに? Webページに於けるEventは アクセスした瞬間より始まり ページを閉じる瞬間までに発生する事象
14.
ElementのEventってなに? みなさんは、現代っ子なので Webページを閲覧すると思います
15.
ElementのEventってなに? Webページを閲覧した時 みなさんのどのような行動が Eventとなるでしょうか
16.
ElementのEventってなに? 少なくとも、マウスでの操作は ほとんどEventとなります (ホイールクリックの非対応ブラウザあり)
17.
ElementのEventってなに? 近年では、タッチスクリーンの携帯電話で Webページを閲覧する人が増加傾向です 画面タッチの行動もEventで認識します http://www.w3.org/TR/touch-events/ 2013年に勧告
18.
ElementのEventってなに? キーボードで入力する行動もEvent
19.
ElementのEventってなに? ブラウザのサイズ変更や スクロールもEventとなる ブラウザのアクティブであるかもEventとなる
20.
ElementのEventってなに? 知名度の低いEventとして コピー カット ペースト これらもEventとなります
21.
Eventの種類 Eventは、すべてのElementや対象に 平等に同じものが 備わっているわけではありません http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents-h3
22.
Eventの種類 と、いいますと? 使えるElementには、制限があります
23.
Eventの種類 Webブラウザを司る windowという対象(bodyタグ)には onresize onload onbeforeunload などなどwindow専用のEvent http://www.w3.org/TR/2009/WD-html5-20090212/browsers.html#window
24.
Eventの種類 Elementでは onclick onkeydown などなど http://www.w3.org/TR/DOM-Level-3-Events/#h-event-types-list
25.
Eventの種類 Form(inputタグ)でのEvent onselect onchange onsubmit などなど
26.
Eventの種類 マウスやキーボードなどの 操作による種類 http://www.w3.org/TR/DOM-Level-3-Events/
27.
Eventの種類 実際に、大量にあるEventを覚えるのは大変で す なので、どのようなEventがあるか おさえておけばよいでしょう
28.
Eventの種類 DOMのEventの一覧を確認したい場合、 W3Cの勧告では非常に探しづらいので Wikipediaで綺麗にまとまっているのを 参考にしたらよいと思います https://en.wikipedia.org/wiki/DOM_events
29.
Eventの設定方法 Eventを設定するには、 いくつかの準備が必要です
30.
Eventの設定方法 初見だと大変、煩わしいですが 定型文ですので、頑張って覚えましょう
31.
Eventの設定方法 まずは、function 一連の処理の塊の作り方を覚えましょう
32.
Eventの設定方法 function(){ /* 処理 */ }; functionという文字と括弧の配置を覚えましょ う こっそりと存在するセミコロンも忘れずに
33.
Eventの設定方法 exam = function(){ alert(“test”); }; examという箱に「=」でfunctionを設定してあ げます これで、examを実行すると中のalert(“test”);が 実行されるわけですね
34.
Eventの設定方法 ElementにEventを設定してあげるには、 先のfunctionを設定するだけです
35.
Eventの設定方法 では、実際に設定してみると次のようになりま す
36.
Eventの設定方法 document.getElementById(“button”).onclick = function(){ alert(“click
now!”); }; Elementを取得します ElementのEventに対して functionを設定します
37.
Eventの設定方法 今の例は、 scriptで設定した場合です 次の例は、Elementに直接設定したものです
38.
Eventの設定方法 <button id=”button” onclick=”alert(¥”click
now!¥”);”> click </button> Elementを記述します ElementのEventに対して functionを設定します
39.
Eventの設定方法 ”alert(¥”click now!¥”);” この部分は注意が必要です! 「”」の内側に「”」を書く場合は 「”」で囲った部分と競合するため 「¥(バックスラッシュ)」を付けてあげましょ う というルール
40.
Eventの設定方法 これで、みなさんは、 Eventマイスターになれました おめでとうございます(拍手)
41.
eventAttributesってみる では、いくつかのEventを設定した 例を実際にみてください
42.
eventAttributesってみる 入力されている文字を リアルタイムに別のElementで表示 eventAttribute_input.html
43.
eventAttributesってみる スクロールされたときにElementを タイミングをずらしてスクロール(パララック ス) eventAttribute_scroll.html
44.
eventAttributesってみる マウスの移動に合わせて Elementが追随(マウスストーカー) eventAttribute_move.html
45.
他の言語環境のEvent? 基本的にユーザーインターフェースを伴う アプリケーション開発では Eventは同じように実装できます
46.
他の言語環境のEvent? Android(Java) button.setOnClickListener(new View.OnClickListener(){ public void
onClick(View v){ AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this); alertDialogBuilder.setMessage("click now!").show(); } });
47.
他の言語環境のEvent? Windows(C#) this.btn.Click += delegate(object
sender, RoutedEventArgs e){ MessageBox.Show("click now!"); };
48.
今週のLT s.m の JavaScript on Photoshop
49.
今週のLT JavaScriptを絡めた解説のLT JavaScriptで作った作品の努力や レビューなど、どしどし募集
50.
undefined in eventAttributes 参加いただきありがとうございました 次回はeventListener(更に深く)
Download now