javascriptの基本

javascriptを呼吸するように書くためにはまだまだ長い道のり。まずは基本をまとめてみる。

関数スコープ

変数が関数スコープなのが、一番やっかい。代入したのに入ってないとか他の言語からくるとビビリます。スコープを決めたいときは無名関数を書いてしまうのが手っ取り早いと思います。

(function(){ 

// この中にコードを書くとこの中は同じスコープなのでいい感じ。

 })();

HTML

色々書く方法がありますが、Mojolicious::Lite等を使用する場合、デーモンプロセスの再起動をしなくてもいいように外部ファイルを指定します。
日本語表示のためにcharset=utf-8を忘れないようにしましょう。

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="1.js" charset="utf-8"></script>
</body>
</html>

print文

まず始めに私が必要だと思うのはprint系の文です(はい、printデバックです ^^;; )。変数の確認に必須ではないかと思います。
まだ他にもあると思いますが、下記が主な方法だと思います。
個人的な使用感はfirebugのconsole.logが好きです。というよりオブジェクトの中身はconsole.logでしかうまく見れないような気がします。

var str = "Hello World";
// There are a couple of way to print
console.log(str); // with firebug
//alert(str); // with popup
//document.write(str); // write on html

//a nice way to print obj status
// http://stackoverflow.com/questions/957537/how-can-i-print-a-javascript-object
//var tmp = JSON.stringify(p);
document.write(JSON.stringify(p));

配列/Array

配列はよく使います。javascriptの配列はなんでも入れられそうです。
foreachも添字が返ってくることに注意すれば問題ないでしょう。foreachはプロトタイプを考える必要があるっぽいのでノーマルのforを使った方が良さそうです。

//=================================================
// Array
//=================================================
var array_test = new Array(3);
array_test = [1,2,"hoge",p]; // Looks we can put anything
console.log(array_test);
console.log(array_test.length);

for (var i in array_test) {
    console.log(array_test[i]); // i is not object but just index
}

連想記憶/Hash

javascriptのHashは配列で書くみたいです。注意点はhash_test.lengthは何も返さないこと。
i+1を返す使用になっているかららしいです。Hashの大きさを知るためには面倒ですが、ループで取得。

//=================================================
// Hash
//=================================================
var hash_test = new Array();
hash_test['A'] = 1;
hash_test['B'] = 2;
hash_test['C'] = 3;

console.log(hash_test);
console.log(hash_test.length); // Note this doesn't work

var elementNum=0;
for(i in hash_test){
    elementNum++;
}
console.log(elementNum);

// Use this to get keys
for(var keys in hash_test) {
    console.log(keys);
}
// Make sure that you have chartset="utf-8"  in script in html
var pref = {
                "長野県":"塩尻市",
                "山梨県":"甲府市",
                "宮崎県":"日南市"
           };

console.log(pref);
document.write(pref["長野県"]);

関数

無名関数を押さえておけば大丈夫だと思います。

//=====================================================
// function
//=====================================================
function hello(str){
    console.log("Hello " + str);
}
hello("World");

// Anonymous function
var hoge = 1;
var foo = function(a) { var hoge = 3;  return a + hoge};
console.log(hoge);
console.log(foo(5));
//window.onclick = function() { var x="JavaScript!"; alert("Hello, " + x); }

クラス

クラスのメソッドは色々方法がありそうですが、注意するのは名前のスコープですかね。
ライブラリを読んだときに同じ名前で干渉しないようにしましょう。
私はprototypeでいきます。（干渉がおきにくそうだし、複数呼び出すときの効率がよいみたい)

//==================================================
// First class
function Person(name, age)
{
    this.name = name;
    this.age = age;
}

// Class's method
Person.prototype.getMinus10yAge = function () {
    return this.age - 10;
}
//==================================================

var p = new Person("shoheik");;
p.age = 32;
var a = p.getMinus10yAge(); // Need ()
console.log(a);

といあえず、これでコードをライブラリを読み込んで処理できそう:)

Debuginfo

思考とアウトプット