Download - JavaScript再入門
JavaScript再入門
@sambaiz
NDS40初心者Day (2015/2/21)
自己紹介
@sambaiz
• 大学卒業できるかもしれない
• 春から東京で働くかもしれない
• はじめてのNDSは多分
NDS26: IPv6 Hackathon (2012/5/26)でした
• ありがとうNDS！また会う日まで！
あなたとJavaScript
前編
万能言語JavaScript
• JavaScriptは
– クライアントサイドで使えます
–サーバサイドでも使えます(node.js)
–アプリが作れます(Cordova)
–ゲームが作れます(cocos2d-js, Unity)
あなたとJavaとJavaScript
あなたは混同してもいいし、しなくてもいい
みんなちがって、みんないい
あなたとJavaとJavaScript
開発当初はLiveScriptと呼ばれていたが、1995
年にサン・マイクロシステムズ（現・オラクル）が開発したプログラミング言語Javaが当時大きな
注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更された
(Wikipedia)
あなたとJavaとJavaScript
1997年、通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化され多くのウェブブラウザで利用できるようになった。
(Wikipedia)
あなたとJavaとJavaScript
var javascript = "JavaScript";
var java = "Java";
console.log(javascript === java);
// => false
console.log(javascript == java);
// => false
How to run
• Webブラウザ上でJavaScriptが実行できるサービスがいくつかあります
• コードは
https://gist.github.com/sambaiz/3981579efd5b9c5bf636
に貼ってあります(“sambaiz gist” で検索)
http://jsbin.com/ とか
変数宣言
var a = “v_a";
console.log(a) // => “v_a”
var
• 宣言時にvarを省略するとグローバルになる
function forget_var(){
f_v = "v_f_v"; // varなし
}
forget_var();
console.log(f_v); // => “v_f_v”
var
function not_forget_var(){
var n_f_v = "v_n_f_v";
}
not_forget_var();
console.log(n_f_v); // error
スコープ
• varで関数スコープはあるが、ブロックスコープはない(ECMAScript6のletがその役割)
for(var i=0; i<10; i++){
var ff_v = "v_ff_v";
}
console.log(ff_v); // => "v_ff_v"
console.log(i); // => 10
ホイスティング（巻き上げ）
• 関数で宣言された変数は関数全体からアクセスできる
• 宣言の前でもアクセスできる(ただし宣言時の代入は巻き上げない)
ホイスティング（巻き上げ）
var h = "v_gh"
function hoisting(){
console.log(h); // => "v_gh"
h = "v_h";
console.log(h); // => "v_h"
};
hoisting();
ホイスティング（巻き上げ）
var h2 = "v_gh2"
function hoisting2(){
console.log(h2); // => undefined
var h2 = "v_h2";
console.log(h2); // => “v_h2”
};
hoisting2();
ホイスティング（巻き上げ）
var h3 = "v_gh3"
function hoisting3(){
var h3;
console.log(h3); // => undefined
h3 = "v_h3"
console.log(h3); // => “v_h3”
};
hoisting3();
関数の先頭で宣言された場合と同じ
== (!=) / === (!==)
• === は型も一致する場合にtrueを返す
• ==は型変換してから比較する
console.log(1 == "1");
// => true
console.log(1 === "1”)
// => false
基本型
console.log(typeof(undefined));
// => “undefined”
console.log(typeof(1));
// => “number”
console.log(typeof("1"));
// => “string”
console.log(typeof(true));
// => “boolean”
参照型(オブジェクト)
console.log(typeof(null)); // => "object"
console.log(typeof([])); // => “object”
console.log(typeof(new Date())); // => “object”
console.log(typeof(function(){return 1}));
// => “function”
参照型
var fa = function(){return 1};
var fb = fa;
console.log(fa === fb); // => true
console.log(function(){return 1} === function(){return 1});
// => false
関数
• functionで定義する• 入れ子にできる
function ff1(a){b = "fuga"function ff2(){
return a + b; //入れ子にしている関数の引数や変数にアクセスできる
}return ff2();
}
console.log(ff1("hoge")); // => "hogefuga"
クロージャ
function counter(){var c = 0;return function (){
c += 1;return c;
};}
count = counter();count2 = count; // 参照渡しcount3 = counter();console.log(count()); // => 1console.log(count2()); // => 2console.log(count3()); // => 1
セミコロン
Always use semicolons.(Google JavaScript Style Guide)
function operation(){console.log("operation")return -1;
}
var THINGS_TO_EAT = ["AAAA"] // ;なし-1 == operation() || console.log("fail"); // => fail //(["AAAA"] - 1がNaNになるため)
var THINGS_TO_EAT = ["AAAA"]; // ;あり-1 == operation() || console.log("fail");
オブジェクト
• 順序付けされていないプロパティの集合
• 動的にプロパティを追加したり削除することができる
• プロパティの他に３つのオブジェクト属性を持つ
–オブジェクトのプロトタイプ
–オブジェクトのクラス(オブジェクトの型を表す文字列）
–オブジェクトの拡張可フラグ(ECMAScript5)
オブジェクト
var obj = {a: "aaa", b: 100, c: {d: true}};
console.log(obj.a); // => "aaa"
obj.e = false;
console.log(obj.e); // => false
console.log(obj[“e”]); // => false
delete obj.a;
console.log(obj.a); // => undefined
プロトタイプ
• オブジェクトはプロトタイプのプロパティを継承する
継承
• ECMAScript5で定義されたObject.create()は
最初の引数をプロトタイプとするオブジェクトを生成する
継承
function inherit(p){if (p == null) throw TypeError(); if (Object.create) // Object.create()が使えれば使うreturn Object.create(p);
var t = typeof p;if (t !== "object" && t !== "function") throw TypeError();
function f() {}; // ダミーのコンストラクタf.prototype = p; return new f();
}
継承
var o = {};
o.x = 1;
o.y = 3;
var p = inherit(o);
//{x: 1, y: 3}が継承される
console.log(p.x); // => 1
継承
p.x = 2;// 継承プロパティに代入すると継承プロパティの値を変えるのではなく、// 新たに独自プロパティを作成する(継承プロパティは見えなくなる)console.log(o.x); // => 1 o.y = 4;// プロトタイプのプロパティと、継承プロパティは繋がっているconsole.log(p.y); // => 4o.x = 5;// 独自プロパティは繋がっていないconsole.log(p.x); // => 2
継承
var q = inherit(p);
console.log(q.x); // => 2
o.y = 10;
// p.yは独自プロパティではないので、q.yはo.yまで繋がっている
console.log(q.y); // => 10
in / hasOwnProperty()
• inはプロパティを持つかを調べる• hasOwnProperty()は独自プロパティを持つかを調べる
var o = {};o.x = "a";var p = inherit(o);console.log("x" in p); // => trueconsole.log(o.hasOwnProperty("x")); // => trueconsole.log(p.hasOwnProperty("x")); // => false
コンストラクタ
• newはコンストラクタ関数のprototypeフ ゚ロパティの値をプロトタイプとするオブジェクトを生成する
function Person(name){this.name = name;
}
Person.prototype = {introduce: function(){ return "My name is " + this.name }
}
var p = new Person("Tom");console.log(p.introduce()); // => “My name is Tom”
call(), apply()
• あるオブジェクトのメソッドかのように関数を呼び出せる
• 最初の引数は対象となるオブジェクト
• call()は第二引数以降が関数の引数になる
• apply()は第二引数に配列の形で関数の引数を指定する
call(), apply()
var tom = {name: "Tom",introduce: function(fp, be) {
console.log([fp,be,this.name].join(" "));}
};var sam = {
name: "Sam"};
tom.introduce("I", "am"); // => "I am Tom"tom.introduce.call(sam, "We", "are"); // => "We are Sam"tom.introduce.apply(sam, ["We", "are"]); // => "We are Sam"
後編
フロッピーってなんですか
cocos2d-js
ゲームを作るよ！
cocos2d-js
作るゲーム
プロジェクトの作成
$ cocos new floppybird -l js
.gitignore(例)
.DS_Store
.ideaframeworks/runtime-src/proj.android/assetsframeworks/js-bindings/cocos2d-x/cocos/platform/android/java/assetsframeworks/runtime-src/proj.android/binframeworks/js-bindings/cocos2d-x/cocos/platform/android/java/binframeworks/runtime-src/proj.android/genframeworks/js-bindings/cocos2d-x/cocos/platform/android/java/genframeworks/runtime-src/proj.android/libs/armeabiframeworks/runtime-src/proj.android/objframeworks/runtime-src/proj.android/outframeworks/runtime-src/proj.android/local.propertiesframeworks/js-bindings/cocos2d-x/cocos/platform/android/java/local.propertiesframeworks/runtime-src/proj.ios/*.xcodeproj/project.xcworkspace/xcuserdataframeworks/runtime-src/proj.ios/*.xcodeproj/xcuserdataframeworks/runtime-src/proj.ios/cocos2dx-store-example.xcodeproj/project.xcworkspace/xcshareddata/cocos2dx-store-example.xccheckout
ブラウザで実行
cocos run –p web
// 127.0.0.1:8000
ブラウザで実行
基本形
// src/title.jsvar TitleLayer = cc.Layer.extend({
ctor:function () {this._super();this.init();
},init:function () {
/* いろいろ */}
});
var TitleScene = cc.Scene.extend({onEnter:function () {
this._super();var layer = new TitleLayer();this.addChild(layer);
}});
素材
// src/resource.js
var res = {
title_png : "res/title.png",
start_png : "res/start.png",
end_png : "res/end.png"
};
var title_resources = [res.title_png, res.start_png, res.end_png];
プリロード
// main.js
cc.LoaderScene.preload(title_resources, function () {
cc.director.runScene(new TitleScene());
}, this);
表示
// src/title.jsthis.sprite = new cc.Sprite(res.title_png);this.sprite.attr({
x: size.width / 2,y: size.height / 2,scale: 0.5,rotation: 180
});this.addChild(this.sprite, 0);
project.json
{"project_type": "javascript",
"debugMode" : 1,"showFPS" : true,"frameRate" : 60,"id" : "gameCanvas","renderMode" : 0,"engineDir":"frameworks/cocos2d-html5",
"modules" : ["cocos2d"],
"jsList" : ["src/resource.js",“src/title.js”
]}
追加
ボタン
素材
押してないとき
押したとき
押せないとき
ボタン
var startGameNormal = new cc.Sprite(res.start_button_png, cc.rect(0, 0, 126, 33));var startGameSelected = new cc.Sprite(res.start_button_png, cc.rect(0, 33, 126, 33));var startGameDisabled = new cc.Sprite(res.start_button_png, cc.rect(0, 33 * 2, 126, 33));
var startGame = new cc.MenuItemSprite(startGameNormal, startGameSelected, startGameDisabled, this.onStartGame, this);
タイトル画面ができました
物理エンジン
• Box2Dを使いたかった
• moduleに追加すれば動くはず
• 動かなかった（また後でがんばる)
// project.json
"modules" : ["cocos2d", "box2d”]
とりあえず横に動かす
マウスイベント
if ('mouse' in cc.sys.capabilities){cc.eventManager.addListener({
event: cc.EventListener.MOUSE,onMouseDown: function(event){
if(event.getButton() == cc.EventMouse.BUTTON_LEFT){/* 右クリック押したとき */
}},onMouseUp: function(event){
if(event.getButton() == cc.EventMouse.BUTTON_LEFT){/* 右クリック離したとき */
}}
}, this);}
押してる間だけ横に動く
壁の描画（上から降りてくる)
壁の描画(静止)
var draw = cc.DrawNode.create();
draw.position = cc.p(100,100);
draw.drawSegment(cc.p(0, 200), cc.p(400,200), 10, cc.color(200,200,200,255))
draw.drawSegment(cc.p(600, 200), cc.p(cc.winSize.width,200), 10,cc.color(200,200,200,255))
当たるとゲームオーバー
Androidとか
ANDROID_SDK_ROOT
NDK_ROOT
ANT_ROOT
あたりを通して
cocos compile –p androidするとapkができる
終わりに
• 終わりです
• ありがとうございました
