java scriptでslideを作ってみた

Let’s JavaScript !

お品書き

• JavaScriptのいいところ

• JSの主戦場

• SlideShareアプリ、作ってみた。

JavaScriptのここが楽しい

その１

イベントループ

<script>var

divs=document.getElementsByTagName('div');

for(var i=0,len=divs.length;i<len;i++){

divs[i].addEventListener('click',function(){

console.log(this.innerHTML

});

}

</script>

その２

コンパクトな言語仕様

Not ExistStandard Input/Output

HelloWorld

var HELLO_WORLD=“Hello JavaScript World !”;

//警告

alert(HELLO_WORLD);

//consoleオブジェクトが有効なら

console.log(HELLO_WORLD);

//古いブラウザ

document.write(HELLO_WORLD);

その他にも。。。

• スクリプト言語の癖にめちゃくちゃ早い

• デザインさんも関わる言語なので親しみやすい

• JSON形式がネイティブに扱える– DBもJSON

• 割と何でもできる– オブジェクト指向、イベント指向、メタプログラミング、関数型プログラミングetc…

JSの主戦場

Webブラウザ

• Titanium

–AndroidOS or iOS

• Windows8 Native App

–HTML5+JavaScript

• Serve side

–Rhino,Node.js…

• DataBase

–CouchDB,MongoDB…

フロントエンドからバックエンドまで全てJavaScriptで作れる

このアプリは

全てJavaScriptで構成されてます(jQuery+Node.js+MongoDB)

前々からHTMLベースのスライドが作りたかった

そこで妄想していたアプリにぴったりだったのがWebSocket

WebSocketとは？

簡単に言うと双方向通信ができるAjax

理由

ソースコードをベタ貼りしたい

配信制御をスマホやタブレットでやりたい！

+α

スライド内にコメントが残せます

書いた内容はWebSocketでリアルタイムに更新されます

ドラッグでメモの位置も変更できます。

これもリアルタイム。

JavaScriptは技術いっぱい夢いっぱいです。

あなたも今日から

Let‘s Enjoy JavaScript！！

ご清聴ありがとうございました。