HTML5の前のJavaScript入門

HTML5 の前の

JavaScript 入門
ビーンズ株式会社豊川

アウトライン
• スピーカーについて
• HTML5とは
• jQueryとは
• Lesson 1
• Lesson 2
• 役に立つWebサイト・書籍のご紹介
• 楽しいJavaScript ライブラリ & API ご紹介
• おまけ
ビーンズ株式会社 ( http://beanzinc.jp ) 2 2012-11 HTML5の前のJavaScript入門

スピーカーについて
• 豊川弘樹 (24歳)
• 19歳のときプログラミングを本格的に始める
アルパカ好きって言うと

• 好きな言語は JavaScript 好きな動物はアルパカよくあぁ∼って言われます

• その他扱える言語は PHP, Objective-C, C, Python, Ruby, 関西弁など
• これまで作ったものはポートフォリオに ( http://alpacat.com )


HTML5 とは


HTML5 とは
狭義: HTMLのバージョン5としての仕様
広義: CSS3やWebGLなどの周辺技術を含めた仕様群

広義のHTML5に含まれる技術例

footerなどの新しいタグ

WebGL CSS3

Canvas audio, video要素

マイク、カメラなどのデバイスアクセス


カメラアクセスデモ
• Dev.Opera


WebGL デモ
• Three.js


HTML5 がすごいのはわかったけど
なんで JavaScript なん？


HTML5 と言うけれど実際は...
JavaScript 必須!!

footerなどの新しいタグ

WebGL CSS3

Canvas audio, video要素

マイク、カメラなどのデバイスアクセス

JavaScript で扱うことが多い!!

JavaScript の愉快な仲間たち

ショートコーディングモバイル用Web作成支援

iPhoneアプリサーバーサイド
&Androidアプリ &リアルタイムWeb


アプリからサーバーまでなんでもできる...
そう、JavaScript ならね


唐突ですが...

今日は jQuery を使います!!
Ω ΩΩ＜な、なんだってー！？


jQuery とは


jQuery とは
• JavaScriptを素早く簡単に書くためのライブラリ

• jQueryを使うことである程度クロスブラウザ（※1）
対応が可能
※1 あらゆるブラウザで正常に動作すること

“ 一人前のJavaScript使いになるためには、ブラウザの違いに
翻弄されて目を血走らせながら「IEがぁ、IEがあぁぁ」と

”
叫ぶ儀式を通過しなければいけない。
プログラミング言語人気TOP10の簡易解説より
http://www.mwsoft.jp/column/program_top10.html

• おそらく今最も使われているJavaScriptライブラリ


jQuery を使って書くとどうなるの？


例えば...
クリックしたときに何かする!!


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);


jQuery
$(ʻ‘#hogeʼ’).click(function(){
alert(ʻ‘piyoʼ’);
});


例えば...
img要素を追加する


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);
};


jQuery
$(function(){
$('<img />').attr('src', 'img/1.jpg').css({width:'400px', height:'300px'}).appendTo('body');
});


jQuery は公式サイトからダウンロードできます!!
http://jquery.com/

クリック → 名前を付けて保存


本日のレシピ

• Lesson 1
マウスオーバーで画像を切り替える

• Lesson 2
画像を自動的に切り替えてスライドショーにする


材料

Mac Windows

ブラウザ
Google Chrome Firefox など

SakuraEditor
メモ帳 TeraPad など
CotEditor

ライブラリ
jQuery


Lesson 1
マウスオーバーで画像を切り替える


<作業フォルダ>
├lesson1.html
├img/
│├1.jpg
│└2.jpg
└js/
　└jquery-‐‑‒1.8.1.min.js
※先ほどダウンロードしたもの


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にして保存するのを忘れないでください!!


lesson1.html 追記していきます


<script type=”text/javascript”>
$(ʻ‘img#alpacaʼ’).hover(
function(){ 自分で付けたid名
$(ʻ‘img#alpacaʼ’).attr(ʻ‘srcʼ’, ʻ‘img/2.jpgʼ’);
},
function(){
}
);
</script>

</body>


lesson1.htmlをブラウザで確認してみましょう!!
lesson1.htmlをブラウザで開きます
うまく動かないときは...

• jQuery 読み込みのファイルパスがあっているか

• { } や ( ) の数と位置があっているか

• , (コンマ)や ’ (クォート)を忘れていないか

• 行末の ; (セミコロン)を忘れていないか

• id名の指定があっているか


HTML復習
<img src=”img/1.jpg” id=”alpaca” class=”animals” />

要素名属性名属性値 id名 (重複不可) class名 (重複OK)

alpacaというid名のimg要素のsrc属性に img/2.jpg を設定する


要素名 id or class名属性名属性値

id は「#」属性を設定する
(属性: attribute)
class は「.」


マウスオーバー時は...し、マウスアウト時は...する

function(){ マウスオーバー時の処理理

}, alpacaというid名のimg要素のsrc属性に ‘img/2.jpg’ を設定する

function(){ マウスアウト時の処理理

} alpacaというid名のimg要素のsrc属性に ‘img/1.jpg’ を設定する

);


Lesson 1 <!DOCTYPE html>
<html>
ソースコード <head>
<meta http-‐‑‒equiv="Content-‐‑‒Type" content="text/html;
charset=UTF-‐‑‒8">
</head>
<body>
function(){
},
function(){
}
);
</script>
</body>
</html>


Lesson 2
画像を自動的に切り替えて

スライドショーにする


<作業フォルダ>
lesson1.htmlをコピーして新しく作ります
├lesson1.html
├lesson2.html
├img/
│├1.jpg
画像を追加します
│├2.jpg
│├3.jpg
│├4.jpg
│└5.jpg
└js/
　└jquery-‐‑‒1.8.1.min.js


lesson2.html
<!DOCTYPE html>
<html> Lesson 2に変更
<head>
</head>
5.jpgに変更
<body>
// 次ページで
</script>
全て消去します
</body>
</html>

文字コードをUTF-8にして保存するのを忘れないでください!!

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>


lesson2.htmlをブラウザで確認してみましょう!!
lesson2.htmlをブラウザで開きます
うまく動かないときは...

• jQuery 読み込みのファイルパスがあっているか

• { } や ( ) の数と位置があっているか

• , (コンマ)や ’ (クォート)を忘れていないか

• 行末の ; (セミコロン)を忘れていないか

• id名の指定があっているか


変数 ... ⽂文字列列や数値などに名前を付けたもの

var hoge = ʻ‘あああʼ’;
var foo = 123;
変数は「var」を付けて宣言

例
var piyo = ʻ‘アルパカʼ’;
alert(piyo);
「アルパカ」と表示される
※ alert はポップアップウィンドウを表示する


配列列 ... 同じ種類の要素を⼊入れておく箱

配列

要素要素要素要素要素

0番目 1番目 2番目 3番目 4番目

var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
変数
配列を表す括弧

例 0番目

alert(imgs[0]); 要素はカンマで区切る
「1.jpg」と表示されるカンマの後ろに改行を入れてもOK


setInterval ... ⼀一定間隔で何かする（タイマー）


// 何かの処理理（⼀一定間隔で何度度も実⾏行行される）

}, 3000);

タイマーの実⾏行行間隔[ミリ秒]

タイマーを解除したいとき（上記の場合）
clearInterval(timer);
解除したいタイマー


3秒間隔で繰り返し

}



つまり...
インデックスは3秒間隔で次のように変化し、
0 → 1 → 2 → 3 → 4 → 0 → ...

インデックスに対応した画像がセットされる
imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
0番目 1番目 2番目 3番目 4番目


Lesson 2 <!DOCTYPE html>
<html>
ソースコード <head>
</head>
<body>
var imgs = [ '1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg' ]; // 画像リスト

var index = 0; // 画像リストのインデックス(0開始)

}


}, 3000 /* 実⾏行行間隔[ミリ秒] */);
</script>
</body>
</html>

役に立つWebサイト・書籍のご紹介


jQuery の入門には...
• jQuery日本語リファレンス
http://semooh.jp/jquery/

情報は古いですが非常に見やすいです。
初めはここで。

• jQuery Docs
http://docs.jquery.com/

jQuery公式ドキュメント。
英語ですが最新版のリファレンスはここで。


JavaScript の入門には...
• JavaScriptリファレンス | MDN
https://developer.mozilla.org/ja/docs/JavaScript/
Reference

教科書的な。

• JavaScriptist
http://javascriptist.net/

サンプル付き逆引きリファレンスがわかりやすいです。


JavaScript を本格的に勉強するために...
• JavaScript 第6版
David Flanagan 著、村上列訳

通称サイ本。
比較的難しいので自信がついてきた頃にどうぞ。

• JavaScript: The Good Parts ―「良い
パーツ」によるベストプラクティス
Douglas Crockford 著、水野貴明訳

実践的な内容。クロージャなどの勉強に。


楽しい JavaScript ライブラリ & API ご紹介


jQuery Mobile http://jquerymobile.com/

こんなあなたにおすすめ難易度 ★☆☆☆☆

• 手軽にリッチなスマホ用Webサイトを作りたい！
• JavaScriptわからんけどHTMLならわかる！

Titanium http://www.appcelerator.com/platform/titanium-sdk/

こんなあなたにおすすめ難易度 ★★☆☆☆

• iPhone, Androidのネイティブアプリを作りたい！
• インターフェースビルダー？必要無いでござる

Facebook SDK for JavaScript
http://developers.facebook.com/docs/reference/javascript/

こんなあなたにおすすめ難易度 ★★★☆☆

• 俺はFacebookアプリを作るぞジョジョーッ！！
• SSL？大丈夫だ、問題ない

node.js http://nodejs.org/

こんなあなたにおすすめ難易度 ★★★★☆

• リアルタイムWebを作りたい！
• サーバサイドもJavaScriptで書いてやるぜ！

three.js http://mrdoob.github.com/three.js/

こんなあなたにおすすめ難易度 ★★★★★

• ブラウザで3Dやりたい！


以上です。本日はありがとうございました。
スライドのURLは弊社Facebookページにて告知させて頂きます。

弊社では一緒にモノ作りに
チャレンジしたい！という
仲間を募集しています。

ご興味のある方はこちらから

http://beanzinc.jp/contents/recruit


おまけ・其の壱

Lesson 1のやつをCSSでやる


・・・
CSSのhover疑似クラスを使うと
マウスオーバーしたときの
スタイルを指定できる

!! CSSではimg要素の
src属性を指定できないが
div要素などの背景画像なら...


omake1.html
<!DOCTYPE html>
<html>
<head>
<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>


おまけ・其の弐
リアルタイムWebでよく出てくる

WebSocketってなんなん？


従来 ... クライアントがサーバーに問い合わせにいく(Pull型)
Webサーバークライアント

新しいメッセージありますか？

ないよ


ないってば


・・・


WebSocket ... サーバーからクライアントへのアクション(Push) が可能

Webサーバークライアント

新しいメッセージあったら言ってください

わかった

・・・

新しいメッセージほらよ (Push)


リアルタイムチャットデモ
• node.js + Socket.IO
http://apps.alpacat.com/chat_room/

2つ以上のタブやブラウザを開いてチャットしてみてください


fin.


HTML5の前のJavaScript入門

More Related Content

What's hot

Viewers also liked

Similar to HTML5の前のJavaScript入門

Recently uploaded

HTML5の前のJavaScript入門