html5の前のjavascript入門

HTML5

JavaScript

2012-11 HTML5JavaScript ( http://beanzinc.jp )

HTML5 jQuery Lesson 1 Lesson 2 Web JavaScript & API

2


(24)

19

JavaScript

PHP, Objective-C, C, Python, Ruby,

( http://alpacat.com )

3


HTML5

4


HTML5

footer

audio, video

CSS3

Canvas

WebGL

: HTML5

: CSS3WebGL

HTML5

5


Dev.Opera

6


WebGL Three.js

7


HTML5

JavaScript

8


HTML5 ...

9

footer

audio, video

CSS3

Canvas

WebGL

JavaScript !!

JavaScript !!


JavaScript

10

iPhone&Android

&Web

Web


...

JavaScript

11


jQuery !!

12

...


jQuery

13


jQuery JavaScript

jQuery11

JavaScript

14

http://www.mwsoft.jp/column/program_top10.htmlTOP10

JavaScriptIEIE


jQuery

15


!!

16

...


Native JavaScript

17

var foo = function(){ alert(piyo);};

var hoge = document.getElementById(hoge);

// Chrome, Firefoxhoge.addEventListener(click, foo, false);

// IE, Operahoge.attachEvent(onclick, foo);


jQuery

18

$(#hoge).click(function(){ alert(piyo);});


img

19

...


Native JavaScript

20

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

21

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


jQuery !!

22

http://jquery.com/


Lesson 1

Lesson 2

23


24

Mac Windows

Google Chrome Firefox

jQuery

CotEditor

SakuraEditorTeraPad


Lesson 1

25

2012-11 HTML5JavaScript ( http://beanzinc.jp ) 26

lesson1.htmlimg/1.jpg2.jpgjs/jquery-1.8.1.min.js


Lesson 1

jQuery

lesson1.html

HTML5

jQueryid

UTF-8!!


$(img#alpaca).hover( function(){ $(img#alpaca).attr(src, img/2.jpg); }, function(){ $(img#alpaca).attr(src, img/1.jpg); } );

lesson1.html

id


lesson1.html!!

...

jQuery

{ } ( ) , () ()

; ()

id

29

lesson1.html


HTML

id () class (OK)

$(img#alpaca).attr(src, img/2.jpg);

id #

class .

id or class

(: attribute)

alpacaidimgsrc img/2.jpg


$(img#alpaca).hover(

function(){


},

function(){


}

);

......




Lesson 1

Lesson 1 $(img#alpaca).hover( function(){ $(img#alpaca).attr(src, img/2.jpg); }, function(){ $(img#alpaca).attr(src, img/1.jpg); } );


Lesson 2

33


lesson1.htmllesson2.htmlimg/1.jpg2.jpg3.jpg4.jpg5.jpgjs/jquery-1.8.1.min.js

lesson1.html


Lesson 2 //

lesson2.html

UTF-8!!

Lesson 2

5.jpg


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 }

$('img#alpaca').attr('src', 'img/' + imgs[index]); //

index = index + 1; // 1 }, 3000 /* [] */);

id


lesson2.html!!

...

jQuery

{ } ( ) , () ()

; ()

id

37

lesson2.html


var

38

...

var hoge = ;var foo = 123;

var piyo = ;alert(piyo);

alert


var imgs = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];

39

...

OK

0 1 2 3 4

alert(imgs[0]);

1.jpg

0


var timer = setInterval(function(){

//

}, 3000);

40

setInterval ...

[]

clearInterval(timer);


if (index > 4) { // 4 index = 0; // 0}


index = index + 1; // 1

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

Lesson 2 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 }


index = index + 1; // 1 }, 3000 /* [] */);


Web

43


jQuery ...

jQueryhttp://semooh.jp/jquery/

jQuery Docshttp://docs.jquery.com/

jQuery


JavaScript ...

JavaScript | MDNhttps://developer.mozilla.org/ja/docs/JavaScript/Reference

JavaScriptisthttp://javascriptist.net/


JavaScript ...

JavaScript 6David Flanagan

JavaScript: The Good Parts Douglas Crockford


JavaScript & API

47


jQuery Mobile

Web JavaScriptHTML

48

http://jquerymobile.com/


Titanium

iPhone, Android

49

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


Facebook SDK

FacebookSSL

50

http://developers.facebook.com/docs/reference/javascript/

for JavaScript


node.js

WebJavaScript

51

http://nodejs.org/


three.js

3D

52

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


53

http://beanzinc.jp/contents/recruit

URLFacebook


Lesson 1CSS

54


CSShover

CSSimg

src

div...

!!


Omake 1 div#alpaca { width: 400px; height: 300px; background-image: url(img/1.jpg); background-position: center center; background-repeat: no-repeat; } div#alpaca:hover { background-image: url(img/2.jpg); }

omake1.html

div

hover

CSS


Web

WebSocket

57


Web

... (Pull)


WebSocket

Web

(Push)

... (Push)


node.js + Socket.IO http://apps.alpacat.com/chat_room/

2

60


fin.

61

html5の前のjavascript入門

Technology