Mais conteúdo relacionado
Semelhante a HTML5の前のJavaScript入門 (20)
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入門
- 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入門
- 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入門
- 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入門
- 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入門
- 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入門
- 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入門
- 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入門
- 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入門
- 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入門