nds_js.md

JavaScript再入門

NDS40初心者Day (2015/2/21) 発表スライド

前編 あなたとJavaScript

あなたとJavaとJavaScript

var javascript = "JavaScript";
var java = "Java";

console.log(javascript === java);
// => false
console.log(javascript == java);
// => false

変数宣言

var a = "b";
console.log(a)

var

function forget_var(){
  f_v = "v_f_v"; // varなし
}
forget_var();
console.log(f_v); // => “aaaa” 

function not_forget_var(){
  var n_f_v = "v_n_f_v";
}
not_forget_var();
console.log(n_f_v); // error

スコープ

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

== (!=) / === (!==)

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 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()); // => 1
console.log(count2()); // => 2
console.log(count3()); // => 1

セミコロン

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

オブジェクト

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

継承

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); // => 4
o.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()

var o = {};
o.x = "a";
var p = inherit(o);
console.log("x" in p); // => true
console.log(o.hasOwnProperty("x")); // => true
console.log(p.hasOwnProperty("x")); // => false

コンストラクタ

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

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"

後編 フロッピーってなんですか？

プロジェクトの作成

$ cocos new floppybird -l js

.gitignore(例)

.DS_Store
.idea
frameworks/runtime-src/proj.android/assets
frameworks/js-bindings/cocos2d-x/cocos/platform/android/java/assets
frameworks/runtime-src/proj.android/bin
frameworks/js-bindings/cocos2d-x/cocos/platform/android/java/bin
frameworks/runtime-src/proj.android/gen
frameworks/js-bindings/cocos2d-x/cocos/platform/android/java/gen
frameworks/runtime-src/proj.android/libs/armeabi
frameworks/runtime-src/proj.android/obj
frameworks/runtime-src/proj.android/out
frameworks/runtime-src/proj.android/local.properties
frameworks/js-bindings/cocos2d-x/cocos/platform/android/java/local.properties
frameworks/runtime-src/proj.ios/*.xcodeproj/project.xcworkspace/xcuserdata
frameworks/runtime-src/proj.ios/*.xcodeproj/xcuserdata
frameworks/runtime-src/proj.ios/cocos2dx-store-example.xcodeproj/project.xcworkspace/xcshareddata/cocos2dx-store-example.xccheckout

基本形

// src/title.js
var 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];

プリロード

cc.LoaderScene.preload(title_resources, function () {
    cc.director.runScene(new TitleScene());
}, this);

表示

// src/title.js
this.sprite = new cc.Sprite(res.title_png);
this.sprite.attr({
    x: size.width / 2,
    y: size.height / 2,
    scale: 0.5,
    rotation: 180
});

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);
startGame.scale = 1.5;

マウスイベント

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