Submit Search
Upload
HTML5の前のJavaScript入門
•
8 likes
•
2,980 views
Hiroki Toyokawa
Follow
2012年11月29日(木)に飯田橋にて開催いたしました勉強会の資料になります。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 61
Download now
Download to read offline
Recommended
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Yahoo!デベロッパーネットワーク
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Backbone.js入門
Backbone.js入門
AdvancedTechNight
Vue入門
Vue入門
Takeo Noda
Recommended
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
let UIWebView as WKWebView
let UIWebView as WKWebView
Taketo Sano
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Yahoo!デベロッパーネットワーク
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Start React with Browserify
Start React with Browserify
Muyuu Fujita
Backbone.js入門
Backbone.js入門
AdvancedTechNight
Vue入門
Vue入門
Takeo Noda
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
One night Vue.js
One night Vue.js
Masahiro Kyuden
iOS WebView App
iOS WebView App
hagino 3000
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
はじめてのVue.js
はじめてのVue.js
kamiyam .
iOS の通信における認証の種類とその取り扱い
iOS の通信における認証の種類とその取り扱い
niwatako
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Vue.js入門
Vue.js入門
Takuya Sato
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Masatoshi Tada
いまさらJavaScript
いまさらJavaScript
Naomichi Yamakita
はじめてのSpring Boot
はじめてのSpring Boot
なべ
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
はじめてのVue.js
はじめてのVue.js
Kei Yagi
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Kazunori Tatsuki
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
More Related Content
What's hot
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
One night Vue.js
One night Vue.js
Masahiro Kyuden
iOS WebView App
iOS WebView App
hagino 3000
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
はじめてのVue.js
はじめてのVue.js
kamiyam .
iOS の通信における認証の種類とその取り扱い
iOS の通信における認証の種類とその取り扱い
niwatako
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
Vue.js入門
Vue.js入門
Takuya Sato
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
健人 井関
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Masatoshi Tada
いまさらJavaScript
いまさらJavaScript
Naomichi Yamakita
はじめてのSpring Boot
はじめてのSpring Boot
なべ
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
はじめてのVue.js
はじめてのVue.js
Kei Yagi
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
What's hot
(20)
はじめよう Backbone.js
はじめよう Backbone.js
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
One night Vue.js
One night Vue.js
iOS WebView App
iOS WebView App
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
はじめてのVue.js
はじめてのVue.js
iOS の通信における認証の種類とその取り扱い
iOS の通信における認証の種類とその取り扱い
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
Vue.js入門
Vue.js入門
初めてのvue.js(2.x系)
初めてのvue.js(2.x系)
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
Java EE 8先取り!MVC 1.0入門 [EDR2対応版] 2015-10-10更新
いまさらJavaScript
いまさらJavaScript
はじめてのSpring Boot
はじめてのSpring Boot
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
JavaScript 研修
JavaScript 研修
はじめてのVue.js
はじめてのVue.js
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
Viewers also liked
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
Kazunori Tatsuki
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
JavaScript入門-基礎編
JavaScript入門-基礎編
mactkg
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
Viewers also liked
(6)
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
[A 3]SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門
JavaScript Basic 01
JavaScript Basic 01
JavaScriptことはじめ
JavaScriptことはじめ
JavaScript入門-基礎編
JavaScript入門-基礎編
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
HTML5, きちんと。
HTML5, きちんと。
Similar to HTML5の前のJavaScript入門
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
TDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
Nobuhiro Sue
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
Hideki Akiba
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
Masakazu Muraoka
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
HTML5-20100626
HTML5-20100626
Taku AMANO
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
Yahoo!デベロッパーネットワーク
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration
Kazuchika Sekiya
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
Similar to HTML5の前のJavaScript入門
(20)
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
スマホにおけるWebGL入門
スマホにおけるWebGL入門
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Web制作勉強会 #2
Web制作勉強会 #2
TDC20111031_Groovy_Geb
TDC20111031_Groovy_Geb
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
HTML5でできるカメラアプリを実際に体験しよう
HTML5でできるカメラアプリを実際に体験しよう
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
非同期処理をちょっとはラクに。Promises:aほか
非同期処理をちょっとはラクに。Promises:aほか
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
HTML5-20100626
HTML5-20100626
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
ぼく(たち)のかんがえた最新のJS開発環境 #scripty04
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
[JavaOne Tokyo 2012] JavaFX and Web Integration
[JavaOne Tokyo 2012] JavaFX and Web Integration
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
HTML5 & The Web Platform
HTML5 & The Web Platform
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Recently uploaded
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
atsushi061452
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
harmonylab
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
atsushi061452
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(14)
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
FIDO Alliance Osaka Seminar: PlayStation Passkey Deployment Case Study.pdf
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
FIDO Alliance Osaka Seminar: LY-DOCOMO-KDDI-Mercari Panel.pdf
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
【DLゼミ】XFeat: Accelerated Features for Lightweight Image Matching
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: NEC & Yubico Panel.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
FIDO Alliance Osaka Seminar: Welcome Slides.pdf
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
FIDO Alliance Osaka Seminar: CloudGate.pdf
FIDO Alliance Osaka Seminar: CloudGate.pdf
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
HTML5の前のJavaScript入門
1.
HTML5 の前の JavaScript 入門
ビーンズ株式会社 豊川
2.
アウトライン
• スピーカーについて • HTML5とは • jQueryとは • Lesson 1 • Lesson 2 • 役に立つWebサイト・書籍のご紹介 • 楽しいJavaScript ライブラリ & API ご紹介 • おまけ ビーンズ株式会社 ( http://beanzinc.jp ) 2 2012-11 HTML5の前のJavaScript入門
3.
スピーカーについて
• 豊川 弘樹 (24歳) • 19歳のときプログラミングを本格的に始める アルパカ好きって言うと • 好きな言語は JavaScript 好きな動物はアルパカ よくあぁ∼って言われます • その他扱える言語は PHP, Objective-C, C, Python, Ruby, 関西弁 など • これまで作ったものはポートフォリオに ( http://alpacat.com ) ビーンズ株式会社 ( http://beanzinc.jp ) 3 2012-11 HTML5の前のJavaScript入門
4.
HTML5 とは ビーンズ株式会社 (
http://beanzinc.jp ) 4 2012-11 HTML5の前のJavaScript入門
5.
HTML5 とは
狭義: HTMLのバージョン5としての仕様 広義: CSS3やWebGLなどの周辺技術を含めた仕様群 広義のHTML5に含まれる技術例 footerなどの新しいタグ WebGL CSS3 Canvas audio, video要素 マイク、カメラなどのデバイスアクセス ビーンズ株式会社 ( http://beanzinc.jp ) 5 2012-11 HTML5の前のJavaScript入門
6.
カメラアクセス デモ
• Dev.Opera ビーンズ株式会社 ( http://beanzinc.jp ) 6 2012-11 HTML5の前のJavaScript入門
7.
WebGL デモ
• Three.js ビーンズ株式会社 ( http://beanzinc.jp ) 7 2012-11 HTML5の前のJavaScript入門
8.
HTML5 がすごいのはわかったけど
なんで JavaScript なん? ビーンズ株式会社 ( http://beanzinc.jp ) 8 2012-11 HTML5の前のJavaScript入門
9.
HTML5 と言うけれど実際は...
JavaScript 必須!! footerなどの新しいタグ WebGL CSS3 Canvas audio, video要素 マイク、カメラなどのデバイスアクセス JavaScript で扱うことが多い!! ビーンズ株式会社 ( http://beanzinc.jp ) 9 2012-11 HTML5の前のJavaScript入門
10.
JavaScript の愉快な仲間たち
ショートコーディング モバイル用Web作成支援 iPhoneアプリ サーバーサイド &Androidアプリ &リアルタイムWeb ビーンズ株式会社 ( http://beanzinc.jp ) 10 2012-11 HTML5の前のJavaScript入門
11.
アプリからサーバーまでなんでもできる...
そう、JavaScript ならね ビーンズ株式会社 ( http://beanzinc.jp ) 11 2012-11 HTML5の前のJavaScript入門
12.
唐突ですが...
今日は jQuery を使います!! Ω ΩΩ<な、なんだってー!? ビーンズ株式会社 ( http://beanzinc.jp ) 12 2012-11 HTML5の前のJavaScript入門
13.
jQuery とは ビーンズ株式会社 (
http://beanzinc.jp ) 13 2012-11 HTML5の前のJavaScript入門
14.
jQuery とは
• JavaScriptを素早く簡単に書くためのライブラリ • jQueryを使うことである程度クロスブラウザ(※1) 対応が可能 ※1 あらゆるブラウザで正常に動作すること “ 一人前のJavaScript使いになるためには、ブラウザの違いに 翻弄されて目を血走らせながら「IEがぁ、IEがあぁぁ」と ” 叫ぶ儀式を通過しなければいけない。 プログラミング言語人気TOP10の簡易解説より http://www.mwsoft.jp/column/program_top10.html • おそらく今最も使われているJavaScriptライブラリ ビーンズ株式会社 ( http://beanzinc.jp ) 14 2012-11 HTML5の前のJavaScript入門
15.
jQuery を使って書くとどうなるの? ビーンズ株式会社 (
http://beanzinc.jp ) 15 2012-11 HTML5の前のJavaScript入門
16.
例えば...
クリックしたときに何かする!! ビーンズ株式会社 ( http://beanzinc.jp ) 16 2012-11 HTML5の前のJavaScript入門
17.
Native JavaScript
var foo = function(){ alert(ʻ‘piyoʼ’); }; var hoge = document.getElementById(ʻ‘hogeʼ’); // Chrome, Firefox⽤用 hoge.addEventListener(ʻ‘clickʼ’, foo, false); // IE, Opera⽤用 hoge.attachEvent(ʻ‘onclickʼ’, foo); ビーンズ株式会社 ( http://beanzinc.jp ) 17 2012-11 HTML5の前のJavaScript入門
18.
jQuery
$(ʻ‘#hogeʼ’).click(function(){ alert(ʻ‘piyoʼ’); }); ビーンズ株式会社 ( http://beanzinc.jp ) 18 2012-11 HTML5の前のJavaScript入門
19.
例えば...
img要素を追加する ビーンズ株式会社 ( http://beanzinc.jp ) 19 2012-11 HTML5の前のJavaScript入門
20.
Native JavaScript
window.onload = function(){ var element = document.createElement('img'); element.src = 'img/1.jpg'; element.style.width = '400px'; element.style.height = '300px'; var body = document.getElementsByTagName("body").item(0); body.appendChild(element); }; ビーンズ株式会社 ( http://beanzinc.jp ) 20 2012-11 HTML5の前のJavaScript入門
21.
jQuery
$(function(){ $('<img />').attr('src', 'img/1.jpg').css({width:'400px', height:'300px'}).appendTo('body'); }); ビーンズ株式会社 ( http://beanzinc.jp ) 21 2012-11 HTML5の前のJavaScript入門
22.
jQuery は公式サイトからダウンロードできます!!
http://jquery.com/ クリック → 名前を付けて保存 ビーンズ株式会社 ( http://beanzinc.jp ) 22 2012-11 HTML5の前のJavaScript入門
23.
本日のレシピ
• Lesson 1 マウスオーバーで画像を切り替える • Lesson 2 画像を自動的に切り替えてスライドショーにする ビーンズ株式会社 ( http://beanzinc.jp ) 23 2012-11 HTML5の前のJavaScript入門
24.
材料
Mac Windows ブラウザ Google Chrome Firefox など SakuraEditor メモ帳 TeraPad など CotEditor ライブラリ jQuery ビーンズ株式会社 ( http://beanzinc.jp ) 24 2012-11 HTML5の前のJavaScript入門
25.
Lesson 1 マウスオーバーで画像を切り替える ビーンズ株式会社 (
http://beanzinc.jp ) 25 2012-11 HTML5の前のJavaScript入門
26.
<作業フォルダ>
├lesson1.html ├img/ │├1.jpg │└2.jpg └js/ └jquery-‐‑‒1.8.1.min.js ※先ほどダウンロードしたもの ビーンズ株式会社 ( http://beanzinc.jp ) 26 2012-11 HTML5の前のJavaScript入門
27.
lesson1.html <!DOCTYPE html> <html>
HTML5の宣言 <head> <meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html; charset=UTF-‐‑‒8"> <title>Lesson 1</title> <script type="text/javascript" src="js/jquery-‐‑‒1.8.1.min.js"></script> </head> jQuery読み込み <body> <img src="img/1.jpg" width="400" height="300" id="alpaca" /> </body> </html> jQueryで操作するためにidを振っておく 文字コードをUTF-8にして保存するのを忘れないでください!! ビーンズ株式会社 ( http://beanzinc.jp ) 27 2012-11 HTML5の前のJavaScript入門
28.
lesson1.html
追記していきます <img src="img/1.jpg" width="400" height="300" id="alpaca" /> <script type=”text/javascript”> $(ʻ‘img#alpacaʼ’).hover( function(){ 自分で付けたid名 $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/2.jpgʼ’); }, function(){ $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/1.jpgʼ’); } ); </script> </body> ビーンズ株式会社 ( http://beanzinc.jp ) 28 2012-11 HTML5の前のJavaScript入門
29.
lesson1.htmlをブラウザで確認してみましょう!!
lesson1.htmlをブラウザで開きます うまく動かないときは... • jQuery 読み込みのファイルパスがあっているか • { } や ( ) の数と位置があっているか • , (コンマ)や ’ (クォート)を忘れていないか • 行末の ; (セミコロン)を忘れていないか • id名の指定があっているか ビーンズ株式会社 ( http://beanzinc.jp ) 29 2012-11 HTML5の前のJavaScript入門
30.
HTML復習
<img src=”img/1.jpg” id=”alpaca” class=”animals” /> 要素名 属性名 属性値 id名 (重複不可) class名 (重複OK) alpacaというid名のimg要素のsrc属性に img/2.jpg を設定する $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/2.jpgʼ’); 要素名 id or class名 属性名 属性値 id は「#」 属性を設定する (属性: attribute) class は「.」 ビーンズ株式会社 ( http://beanzinc.jp ) 30 2012-11 HTML5の前のJavaScript入門
31.
マウスオーバー時は...し、マウスアウト時は...する
$(ʻ‘img#alpacaʼ’).hover( function(){ マウスオーバー時の処理理 $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/2.jpgʼ’); }, alpacaというid名のimg要素のsrc属性に ‘img/2.jpg’ を設定する function(){ マウスアウト時の処理理 $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/1.jpgʼ’); } alpacaというid名のimg要素のsrc属性に ‘img/1.jpg’ を設定する ); ビーンズ株式会社 ( http://beanzinc.jp ) 31 2012-11 HTML5の前のJavaScript入門
32.
Lesson 1
<!DOCTYPE html> <html> ソースコード <head> <meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html; charset=UTF-‐‑‒8"> <title>Lesson 1</title> <script type="text/javascript" src="js/jquery-‐‑‒1.8.1.min.js"></script> </head> <body> <img src="img/1.jpg" width="400" height="300" id="alpaca" /> <script type=”text/javascript”> $(ʻ‘img#alpacaʼ’).hover( function(){ $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/2.jpgʼ’); }, function(){ $(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/1.jpgʼ’); } ); </script> </body> </html> ビーンズ株式会社 ( http://beanzinc.jp ) 32 2012-11 HTML5の前のJavaScript入門
33.
Lesson 2 画像を自動的に切り替えて
スライドショーにする ビーンズ株式会社 ( http://beanzinc.jp ) 33 2012-11 HTML5の前のJavaScript入門
34.
<作業フォルダ>
lesson1.htmlをコピーして新しく作ります ├lesson1.html ├lesson2.html ├img/ │├1.jpg 画像を追加します │├2.jpg │├3.jpg │├4.jpg │└5.jpg └js/ └jquery-‐‑‒1.8.1.min.js ビーンズ株式会社 ( http://beanzinc.jp ) 34 2012-11 HTML5の前のJavaScript入門
35.
lesson2.html <!DOCTYPE html> <html>
Lesson 2に変更 <head> <meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html; charset=UTF-‐‑‒8"> <title>Lesson 2</title> <script type="text/javascript" src="js/jquery-‐‑‒1.8.1.min.js"></script> </head> 5.jpgに変更 <body> <img src="img/5.jpg" width="400" height="300" id="alpaca" /> <script type=”text/javascript”> // 次ページで </script> 全て消去します </body> </html> 文字コードをUTF-8にして保存するのを忘れないでください!! ビーンズ株式会社 ( http://beanzinc.jp ) 35 2012-11 HTML5の前のJavaScript入門
36.
<script type=”text/javascript”> var imgs = [ // 画像リスト 追記していきます '1.jpg', // 0番⽬目 '2.jpg', // 1 '3.jpg', // 2 '4.jpg', // 3 '5.jpg' // 4 ]; var index = 0; // 画像リストのインデックス(0開始) var timer = setInterval(function(){ if (index > 4) { // インデックスが4より⼤大きいとき index = 0; // インデックスを0に戻す } 自分で付けたid名 $('img#alpaca').attr('src', 'img/' + imgs[index]); // 画像切切り替え index = index + 1; // インデックスを1増やす }, 3000 /* 実⾏行行間隔[ミリ秒] */); </script> ビーンズ株式会社 ( http://beanzinc.jp ) 36 2012-11 HTML5の前のJavaScript入門
37.
lesson2.htmlをブラウザで確認してみましょう!!
lesson2.htmlをブラウザで開きます うまく動かないときは... • jQuery 読み込みのファイルパスがあっているか • { } や ( ) の数と位置があっているか • , (コンマ)や ’ (クォート)を忘れていないか • 行末の ; (セミコロン)を忘れていないか • id名の指定があっているか ビーンズ株式会社 ( http://beanzinc.jp ) 37 2012-11 HTML5の前のJavaScript入門
38.
変数 ... ⽂文字列列や数値などに名前を付けたもの
var hoge = ʻ‘あああʼ’; var foo = 123; 変数は「var」を付けて宣言 例 var piyo = ʻ‘アルパカʼ’; alert(piyo); 「アルパカ」と表示される ※ alert はポップアップウィンドウを表示する ビーンズ株式会社 ( http://beanzinc.jp ) 38 2012-11 HTML5の前のJavaScript入門
39.
配列列 ... 同じ種類の要素を⼊入れておく箱
配列 要素 要素 要素 要素 要素 0番目 1番目 2番目 3番目 4番目 var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']; 変数 配列を表す括弧 例 0番目 alert(imgs[0]); 要素はカンマで区切る 「1.jpg」と表示される カンマの後ろに改行を入れてもOK ビーンズ株式会社 ( http://beanzinc.jp ) 39 2012-11 HTML5の前のJavaScript入門
40.
setInterval ... ⼀一定間隔で何かする(タイマー)
var timer = setInterval(function(){ // 何かの処理理(⼀一定間隔で何度度も実⾏行行される) }, 3000); タイマーの実⾏行行間隔[ミリ秒] タイマーを解除したいとき(上記の場合) clearInterval(timer); 解除したいタイマー ビーンズ株式会社 ( http://beanzinc.jp ) 40 2012-11 HTML5の前のJavaScript入門
41.
3秒間隔で繰り返し if
(index > 4) { // インデックスが4より⼤大きいとき index = 0; // インデックスを0に戻す } $('img#alpaca').attr('src', 'img/' + imgs[index]); // 画像切切り替え index = index + 1; // インデックスを1増やす つまり... インデックスは3秒間隔で次のように変化し、 0 → 1 → 2 → 3 → 4 → 0 → ... インデックスに対応した画像がセットされる imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']; 0番目 1番目 2番目 3番目 4番目 ビーンズ株式会社 ( http://beanzinc.jp ) 41 2012-11 HTML5の前のJavaScript入門
42.
Lesson 2
<!DOCTYPE html> <html> ソースコード <head> <meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html; charset=UTF-‐‑‒8"> <title>Lesson 2</title> <script type="text/javascript" src="js/jquery-‐‑‒1.8.1.min.js"></script> </head> <body> <img src="img/5.jpg" width="400" height="300" id="alpaca" /> <script type=”text/javascript”> var imgs = [ '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg' ]; // 画像リスト var index = 0; // 画像リストのインデックス(0開始) var timer = setInterval(function(){ if (index > 4) { // インデックスが4より⼤大きいとき index = 0; // インデックスを0に戻す } $('img#alpaca').attr('src', 'img/' + imgs[index]); // 画像切切り替え index = index + 1; // インデックスを1増やす }, 3000 /* 実⾏行行間隔[ミリ秒] */); </script> </body> </html> ビーンズ株式会社 ( http://beanzinc.jp ) 42 2012-11 HTML5の前のJavaScript入門
43.
役に立つWebサイト・書籍のご紹介 ビーンズ株式会社 ( http://beanzinc.jp
) 43 2012-11 HTML5の前のJavaScript入門
44.
jQuery の入門には...
• jQuery日本語リファレンス http://semooh.jp/jquery/ 情報は古いですが非常に見やすいです。 初めはここで。 • jQuery Docs http://docs.jquery.com/ jQuery公式ドキュメント。 英語ですが最新版のリファレンスはここで。 ビーンズ株式会社 ( http://beanzinc.jp ) 44 2012-11 HTML5の前のJavaScript入門
45.
JavaScript の入門には...
• JavaScriptリファレンス | MDN https://developer.mozilla.org/ja/docs/JavaScript/ Reference 教科書的な。 • JavaScriptist http://javascriptist.net/ サンプル付き逆引きリファレンスがわかりやすいです。 ビーンズ株式会社 ( http://beanzinc.jp ) 45 2012-11 HTML5の前のJavaScript入門
46.
JavaScript を本格的に勉強するために...
• JavaScript 第6版 David Flanagan 著、村上 列 訳 通称サイ本。 比較的難しいので自信がついてきた頃にどうぞ。 • JavaScript: The Good Parts ―「良い パーツ」によるベストプラクティス Douglas Crockford 著、水野 貴明 訳 実践的な内容。クロージャなどの勉強に。 ビーンズ株式会社 ( http://beanzinc.jp ) 46 2012-11 HTML5の前のJavaScript入門
47.
楽しい JavaScript ライブラリ
& API ご紹介 ビーンズ株式会社 ( http://beanzinc.jp ) 47 2012-11 HTML5の前のJavaScript入門
48.
jQuery Mobile
http://jquerymobile.com/ こんなあなたにおすすめ 難易度 ★☆☆☆☆ • 手軽にリッチなスマホ用Webサイトを作りたい! • JavaScriptわからんけどHTMLならわかる! ビーンズ株式会社 ( http://beanzinc.jp ) 48 2012-11 HTML5の前のJavaScript入門
49.
Titanium
http://www.appcelerator.com/platform/titanium-sdk/ こんなあなたにおすすめ 難易度 ★★☆☆☆ • iPhone, Androidのネイティブアプリを作りたい! • インターフェースビルダー? 必要無いでござる ビーンズ株式会社 ( http://beanzinc.jp ) 49 2012-11 HTML5の前のJavaScript入門
50.
Facebook SDK
for JavaScript http://developers.facebook.com/docs/reference/javascript/ こんなあなたにおすすめ 難易度 ★★★☆☆ • 俺はFacebookアプリを作るぞジョジョーッ!! • SSL? 大丈夫だ、問題ない ビーンズ株式会社 ( http://beanzinc.jp ) 50 2012-11 HTML5の前のJavaScript入門
51.
node.js
http://nodejs.org/ こんなあなたにおすすめ 難易度 ★★★★☆ • リアルタイムWebを作りたい! • サーバサイドもJavaScriptで書いてやるぜ! ビーンズ株式会社 ( http://beanzinc.jp ) 51 2012-11 HTML5の前のJavaScript入門
52.
three.js
http://mrdoob.github.com/three.js/ こんなあなたにおすすめ 難易度 ★★★★★ • ブラウザで3Dやりたい! ビーンズ株式会社 ( http://beanzinc.jp ) 52 2012-11 HTML5の前のJavaScript入門
53.
以上です。本日はありがとうございました。
スライドのURLは弊社Facebookページにて告知させて頂きます。 弊社では一緒にモノ作りに チャレンジしたい!という 仲間を募集しています。 ご興味のある方はこちらから http://beanzinc.jp/contents/recruit ビーンズ株式会社 ( http://beanzinc.jp ) 53 2012-11 HTML5の前のJavaScript入門
54.
おまけ・其の壱
Lesson 1のやつをCSSでやる ビーンズ株式会社 ( http://beanzinc.jp ) 54 2012-11 HTML5の前のJavaScript入門
55.
・・・
CSSのhover疑似クラスを使うと マウスオーバーしたときの スタイルを指定できる !! CSSではimg要素の src属性を指定できないが div要素などの背景画像なら... ビーンズ株式会社 ( http://beanzinc.jp ) 55 2012-11 HTML5の前のJavaScript入門
56.
omake1.html <!DOCTYPE html> <html>
<head> <meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html; charset=UTF-‐‑‒8"> <title>Omake 1</title> <style type=”text/css”> CSS 指定 div#alpaca { width: 400px; height: 300px; 背景画像に設定 background-‐‑‒image: url(ʻ‘img/1.jpgʼ’); background-‐‑‒position: center center; background-‐‑‒repeat: no-‐‑‒repeat; } hover疑似クラス div#alpaca:hover { background-‐‑‒image: url(ʻ‘img/2.jpgʼ’); } </style> </head> divに変更 <body> <div id="alpaca"></div> </body> </html> ビーンズ株式会社 ( http://beanzinc.jp ) 56 2012-11 HTML5の前のJavaScript入門
57.
おまけ・其の弐 リアルタイムWebでよく出てくる
WebSocketってなんなん? ビーンズ株式会社 ( http://beanzinc.jp ) 57 2012-11 HTML5の前のJavaScript入門
58.
従来 ... クライアントがサーバーに問い合わせにいく(Pull型)
Webサーバー クライアント 新しいメッセージありますか? ないよ 新しいメッセージありますか? ないってば 新しいメッセージありますか? ・・・ ビーンズ株式会社 ( http://beanzinc.jp ) 58 2012-11 HTML5の前のJavaScript入門
59.
WebSocket
... サーバーからクライアントへのアクション(Push) が可能 Webサーバー クライアント 新しいメッセージあったら言ってください わかった ・・・ 新しいメッセージほらよ (Push) ビーンズ株式会社 ( http://beanzinc.jp ) 59 2012-11 HTML5の前のJavaScript入門
60.
リアルタイムチャット デモ
• node.js + Socket.IO http://apps.alpacat.com/chat_room/ 2つ以上のタブやブラウザを開いてチャットしてみてください ビーンズ株式会社 ( http://beanzinc.jp ) 60 2012-11 HTML5の前のJavaScript入門
61.
fin. ビーンズ株式会社 ( http://beanzinc.jp
) 61 2012-11 HTML5の前のJavaScript入門
Download now