バリケンのJavaScript日記 RSSフィード

2006-10-31

[] $H, $R  $H, $R - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  $H, $R - バリケンのJavaScript日記  $H, $R - バリケンのJavaScript日記 のブックマークコメント

new ObjectRange()は$Rって書けるんだね。

var ary = new ObjectRange(1, 100).toArray();

は、

var ary = $R(1,100).toArray();

でいいんだね。

あと、$HでHashオブジェクトが作れるみたい。

var hash = $H({ apple : "りんご", orange : "オレンジ", cherry : "さくらんぼ" });
トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061031

2006-10-30

[] 「たのしいRuby 第2版」の練習問題をJavaScriptで解く(5)  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(5) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(5) - バリケンのJavaScript日記  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(5) - バリケンのJavaScript日記 のブックマークコメント

きょうも「たのしいRuby」の練習問題をJavaScriptで解いてみるよ。きょうはこちら

(1) "Ruby is an object oriented programming language"という文字列があります。この文字列を使って次の処理を行ってください。

(a)文字列に含まれる各単語を要素とする配列を作ってください。

(b)(a)の配列アルファベット順にソートしてください。

(c)(a)の配列大文字と小文字の区別をせずにアルファベット順にソートしてください。

(d)すべての単語の先頭を大文字にして"Ruby Is An Object Oriented Programming Language"にしてください。

(f)文字列に含まれる文字とその数を次のような形式で表示させてください(空白文字が6つ、'R'が1つ、'a'が4つ‥‥という意味です)。

' ': ******
'R': *
'a': ****
'b': **
...

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。まずは(a)から。

var str = "JavaScript is an object oriented programming language";
var ary = str.split(/\s+/);

次は(b)だね。

ary.sort();

その次は(c)だよ。

ary.sortBy(function(x) { return x.toLowerCase(); });

次は(d)だね。うーん、RubyString#capitalizeメソッドみたいなものはないのかな?

str.replace(/\b\w/g, function(word){ return word.toUpperCase(); });

さいごに(e)だよ。これもRubyなら「'*'という文字を3個」を「'*' * 3」と書けるのになあ。

var str = "JavaScript is an object oriented programming language";

str.toArray().sort().uniq().each(function(char) {
  var result = "'" + char + "': ";
  for (var i = str.replace(new RegExp(char, "g"), "").length; i < str.length; i++) {
    result += "*";
  }
  print(result + '\n');
});

ちなみにuniqメソッドはprototype.jsの1.5.0からサポートされるみたい。1.4.0だと次のように自分で定義してね。

Array.prototype.uniq = function () {
  return this.inject([], function(array, value) {
    return array.include(value) ? array : array.concat([value]);
  });
}
トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061030

2006-10-29

[] 「たのしいRuby 第2版」の練習問題をJavaScriptで解く(4)  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(4) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(4) - バリケンのJavaScript日記  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(4) - バリケンのJavaScript日記 のブックマークコメント

きょうも「たのしいRuby」の練習問題をJavaScriptで解いてみるよ。きょうはこちら

(9) (,),{,}という4つの文字を要素とした配列があります。この配列に対して、カッコが正しく対応しているかどうかを調べるメソッド、balanced?メソッドを定義してください。なお、「カッコが正しく対応している」とは、

  • (と)の数が同じ
  • {と}の数が同じ
  • 「( )」の対応と「{ }」の対応が交差することはない

といった状態のことです。

p balanced?(["(","{","{","{","}","}","(",")","}","(",")",")"])
#=>true

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

function is_balanced(ary) {
  var stack = [];
  try {
    ary.each(function(item) {
      switch (item) {
        case "(":
          stack.push(item);
          break;
        case ")":
          if (stack.pop() != "(")
            throw "exit";
          break;
        case "{":
          stack.push(item);
          break;
        case "}":
          if (stack.pop() != "{")
            throw "exit";
          break;
        default:
          break;
      }
    });
    if (stack.length == 0)
      return true;
    else
      return false;
  } catch(e) {
    return false;
  }
}

細かいところは違うけど、基本的には似てるよね。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061029

2006-10-28

[] 「たのしいRuby 第2版」の練習問題をJavaScriptで解く(3)  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(3) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(3) - バリケンのJavaScript日記  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(3) - バリケンのJavaScript日記 のブックマークコメント

きょうも「たのしいRuby」の練習問題をJavaScriptで解いていくよ。

まずはこちら

(5) (1)の配列に含まれる整数の和を次の2つの方法で求めてください。 (a)Array#eachメソッドを使う (b)Array#injectメソッドを使う

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。まずは(a)から。

var ary = new ObjectRange(1, 100).toArray();

var sum = 0
ary.each(function(item) {
  sum += item;
});

print(sum);

(b)は、以前解いたよね。

var ary = new ObjectRange(1, 100).toArray();

print(ary.inject(0, function(sum, item){ return sum += item; }));

次はこちら

(6) randメソッドは「rand(n)」と呼ぶと0からn-1の値を得ることができます。このrandを利用して(1)の配列をでたらめな順番に並べ換えてください。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

var ary = new ObjectRange(1, 100).toArray();

ary = ary.sortBy(function() { return Math.random(); });

その次はこちら

(7) 1から100の要素を含む配列aryから、1~10、11~20、21~30というように10個の要素を含む配列を10個取り出します。取り出したすべての配列を、順に別の配列resultに格納するとき、以下の???の部分に当てはまる式を考えてください。

ary = [1~100の要素を含む配列]
result = Array.new
10.times{|i|
  result << ary[???]
}

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

var ary = new ObjectRange(1, 100).toArray();

var result = [];
for (var i = 0; i < 10; i++) {
  result.push(ary.slice(i * 10, i * 10 + 10));
}

さらにその次はこちら

(8) 数値からなる配列nums1とnums2に対して、それらの個々の要素を足し合わせた要素からなる配列を返すメソッドsum_arrayを定義してください。

p sum_array([1,2,3],[4,6,8]) #=> [5,8,11]

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

function sum_array(ary1, ary2) {
  var result = [];
  ary1.zip(ary2, function(item) {
    result.push(item[0] + item[1]);
  });
  return result;
}

うん、いい感じいい感じ。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061028

2006-10-27

[] Core JavaScript 1.5 Guide 日本語版を読む(8)  Core JavaScript 1.5 Guide 日本語版を読む(8) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(8) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(8) - バリケンのJavaScript日記 のブックマークコメント

きょうもCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を引き続き読んでいくよ。

今日も気になったところをメモするよ。

オブジェクトリテラル

「{ }」でオブジェクトを作れるよ。ただし、ブロックとまぎらわしいから文の最初で使っちゃダメみたい。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> obj = { }
[object Object]
js> mypc = { cpu: "1GHz", mem: "512MB", hdd: "60GB" }
[object Object]
js> mypc.cpu
1GHz
js> mypc.mem
512MB
js> mypc.hdd
60GB
js> ^C
>

アクセサが自動的に設定されちゃうのかな?

[] 「たのしいRuby 第2版」の練習問題をJavaScriptで解く(2)  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(2) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(2) - バリケンのJavaScript日記  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(2) - バリケンのJavaScript日記 のブックマークコメント

きょうも「たのしいRuby」の練習問題をJavaScriptで解いて、Rubyの回答と比較してみるよ。

まずはこちら

(1) 1から100までの整数を含む配列を作ってください。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

var ary = [];
for (var i = 0; i < 100; i++) {
  ary[i] = i + 1;
}

別解として、範囲オブジェクトを使ってみるよ。

var ary = new ObjectRange(1, 100).toArray();

次はこちら

(2) (1)の配列の要素をすべて100倍した要素を含む、新しい配列を作ってください。また、新しい配列を作成せずに、すべての要素を100倍したものに置き換えてください。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。まずは新しい配列を作るもの。

var ary = new ObjectRange(1, 100).toArray();

var new_ary = ary.map(function(x) { return x * 100; });

次に、置き換えるもの。

var ary = new ObjectRange(1, 100).toArray();

var ary = ary.map(function(x) { return x * 100; });

その次はこちら

(3) (1)の配列から3の倍数だけを取り出して、新しい配列を作ってください。また、新しい配列を作成せずに、3の倍数以外の数を削除してください。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。まずは新しい配列を作るもの。

var ary = new ObjectRange(1, 100).toArray();

var new_ary = ary.select(function(x) { return (x % 3 == 0) });

次に、削除。正確には削除じゃないけど、まあいいよね。

var ary = new ObjectRange(1, 100).toArray();

var ary = ary.select(function(x) { return (x % 3 == 0) });

さらにその次はこちら

(4) (1)の配列を次の3つの方法で逆順に並べ換えてください。 (a)Array#reverseメソッドを使う (b)Array#sortメソッドを使う (c)Array#sort_byメソッドを使う

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。まずは(a)から。

var ary = new ObjectRange(1, 100).toArray();

ary.reverse();

次に(b)だよ。

var ary = new ObjectRange(1, 100).toArray();

ary.sort(function(x, y) { if (x < y) return -1; if (x > y) return 1; if (x == y) return 0; });

さいごに(c)だよ。

var ary = new ObjectRange(1, 100).toArray();

ary.sortBy(function(x) { return -x; });

うん、ここまでやってみた感じでは、やっぱりRubyに似てるねえ。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061027

2006-10-26

[] Core JavaScript 1.5 Guide 日本語版を読む(7)  Core JavaScript 1.5 Guide 日本語版を読む(7) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(7) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(7) - バリケンのJavaScript日記 のブックマークコメント

きょうもCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を引き続き読んでいくよ。

今日も気になったところをメモするよ。

浮動小数点リテラル

浮動小数点リテラルは、3.1415、-3.1E12、.1e12、2E-12とかだよ。「e」と「E」に違いはなくて、どちらも指数部(10の何乗か)をあらわすよ。

整数リテラル

10進数、16進数、8進数が表せるけど、8進数リテラルは将来的にはサポートされなくなるみたいだから使わないほうがいいみたい。16進数は最初に「0x」をつければいいみたいだよ。

[] 「たのしいRuby 第2版」の練習問題をJavaScriptで解く(1)  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(1) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(1) - バリケンのJavaScript日記  「たのしいRuby 第2版」の練習問題をJavaScriptで解く(1) - バリケンのJavaScript日記 のブックマークコメント

JavaScriptRubyに似ているから、「たのしいRuby」の練習問題をRubyの回答と比較しながら解いてみて、理解を深めてみることにするよ。

まずはこちら

(1)温度を表すときに、日本では通常「摂氏セルシウス)温度」という単位系が使われていますが、アメリカなどでは「華氏(ファーレンハイト)温度」という単位系が使われています。摂氏温度を華氏温度に変換するメソッドcels2fahrを定義してください。なお、摂氏温度と華氏温度の変換の公式は次のようになります。

華氏摂氏×9÷5+32

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

function cels2fahr(num) {
  return num * 9 / 5 + 32;
}

次はこちら

(2) (1)とは逆に華氏温度を摂氏温度に変換するメソッドfahr2celsを定義してください。また、摂氏1度から摂氏100度まで1度きざみに華氏温度との対応を出力させてください。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

function fahr2cels(num) {
  return (num - 32) * 5 / 9;
}

for (var i = 1; i <= 100; i++) {
  print(i + ' ' + cels2fahr(i) + '\n');
}

その次はこちら

(3) randメソッドを「rand(n)」と呼ぶと0からn-1の値を得ることができます。このrandメソッドを利用して、1から6までの数字をランダムに返すメソッドdiceを定義してください。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

function dice() {
  return Math.ceil(Math.random() * 6);
}

さらにその次はこちら

(4) 整数numが素数であるかどうかを調べるメソッドprime?(num)を定義してください。なお、素数とは「それ自身と1以外で割ることのできない数」です。1桁の整数のうち、素数となるのは「2,3,5,7」です。

たのしいRuby 第2版

じゃあ、ぼくの答えだよ。

function is_prime(num) {
  if (num < 2)
    return false;
  else if (num == 2)
    return true;
  else if (num % 2 == 0)
    return false;
  else {
    try{
      for (var i = 3; i <= Math.ceil(Math.sqrt(num)); i += 2) {
        if (num % i == 0) throw "exit";
      }
    } catch(e) {
      return false;
    }
    return true;
  }
}

うーん、いまのところ気になるのは、Rubyの「範囲オブジェクト」に相当するものがないことかなあ。

追記:ObjectRangeが「範囲オブジェクトなんだね!」

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061026

2006-10-25

[] Core JavaScript 1.5 Guide 日本語版を読む(6)  Core JavaScript 1.5 Guide 日本語版を読む(6) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(6) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(6) - バリケンのJavaScript日記 のブックマークコメント

きょうもCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を引き続き読んでいくよ。

今日も気になったところをメモするよ。

真偽値リテラル

真偽値型は、trueと書いたら「trueプリミティブ値」、falseと書いたら「falseプリミティブ値」になるみたいだよ。

配列リテラルと違って、真偽値リテラルは「Booleanオブジェクトではない」ことに注意してね。プリミティブ値とオブジェクトとの違いは、こちらにある興味深い実験を参考にしてね。

[] prototype.jsで遊ぶ(2)  prototype.jsで遊ぶ(2) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  prototype.jsで遊ぶ(2) - バリケンのJavaScript日記  prototype.jsで遊ぶ(2) - バリケンのJavaScript日記 のブックマークコメント

昨日は落ちていたprototype.jsの配布元のサイトが復活したみたい!

じゃあ、今日もちょこっとprototype.jsで遊んでみるよ。今日はinjectメソッドを試してみるよ。以前「たのしいRuby」で解いた問題JavaScriptで解いてみることにするよ。

function print(s) {
  WScript.StdOut.Write(s);
}

function load(filename) {
  var fso = WScript.CreateObject("Scripting.FileSystemObject");
  var fs = fso.OpenTextFile(filename, 1, false, -2);
  eval(fs.ReadAll());
  fs.Close();
}

try {
  load("prototype-1.4.0.js");
} catch(e) {
}

var ary = [];
for (var i = 0; i < 100; i++) {
  ary[i] = i + 1;
}

print(ary.inject(0, function(sum, item){ return sum += item; }));

これをinject_test.jsというファイル名で保存して、cscriptで実行してみるよ。

>cscript inject_test.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

5050
>

こうして見ると、prototype.jsを使うとJavaScriptがかなりRubyっぽくなることがわかるねえ。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061025

2006-10-24

[] Core JavaScript 1.5 Guide 日本語版を読む(5)  Core JavaScript 1.5 Guide 日本語版を読む(5) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(5) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(5) - バリケンのJavaScript日記 のブックマークコメント

きょうもCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を引き続き読んでいくよ。

じゃあ、気になったところをメモするよ。

リテラル

リテラルとは、ソースコードの中に書いたとおりの値になる書き方のことだよ。JavaScriptには、次のリテラルがあるみたいだよ。

配列リテラル

次のように書くみたい。

coffees = ["French Roast", "Columbian", "Kona"]

配列リテラルArrayオブジェクトなるみたいだよ。

取り出すときのインデックスは0から始まるみたい。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> coffees = ["French Roast", "Columbian", "Kona"]
French Roast,Columbian,Kona
js> coffees[0]
French Roast

余計なカンマを入れると、空の要素になるみたいだよ。ただし一番右側のカンマだけは無視されるみたいだよ。

js> fish = ["Lion", , "Angel"]
Lion,,Angel
js> fish[0]
Lion
js> fish[1]

js> fish[2]
Angel
js> fish.length
3
js> myList = ['home', , 'school', ];
home,,school,
js> myList[0]
home
js> myList[1]

js> myList[2]
school
js> myList[3]

js> myList[4]

js> myList.length
4

あれ?SpyderMonkeyでも試してみよう。

$ smjs
js> myList = ['home', , 'school', ];
home,,school
js> myList.length
3
js> ^C
$

うーん、JavaScriptJScript仕様って微妙に違うんだねえ。気をつけなくっちゃ。

[] prototype.jsで遊ぶ(1)  prototype.jsで遊ぶ(1) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  prototype.jsで遊ぶ(1) - バリケンのJavaScript日記  prototype.jsで遊ぶ(1) - バリケンのJavaScript日記 のブックマークコメント

配列を操作するなら、やっぱりeachメソッドとかが欲しいよね。というわけで、ちょっとprototype.jsで遊んでみることにするよ。

でもなぜかprototype.jsの配布元のサイトが落ちてるみたいだから、「はてな」のサイトのprototype-1.4.0.jsを利用させてもらったよ。

$ wget http://www.hatena.ne.jp/js/prototype-1.4.0.js
$ vi each_test.js

こちらを参考に、次のような内容にしたよ。

try {
  load("prototype-1.4.0.js");
} catch(e) {
}

[1,2,3,4,5].each(function(x) {
  print(x);
});

どうも例外処理をしないとエラーが出てスクリプトが途中で止まっちゃうみたい。

じゃあ、実行してみよう!

$ smjs each_test.js
1
2
3
4
5
$

Windowsのcscriptでは、loadを自分で定義しないとダメみたい。

function print(s) {
  WScript.StdOut.Write(s);
}

function load(filename) {
  var fso = WScript.CreateObject("Scripting.FileSystemObject");
  var fs = fso.OpenTextFile(filename, 1, false, -2);
  eval(fs.ReadAll());
  fs.Close();
}

try {
  load("prototype-1.4.0.js");
} catch(e) {
}

[1,2,3,4,5].each(function(x) {
  print(x + "\n");
});

これをeach_test.jsというファイル名で保存して、cscriptで実行してみるよ。

>cscript each_test.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

1
2
3
4
5

>

うーん、ここでもやっぱりLinuxのSpyderMonkeyとWindowsのcscriptの微妙な違いに悩まされるねえ。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061024

2006-10-23

[] Core JavaScript 1.5 Guide 日本語版を読む(4)  Core JavaScript 1.5 Guide 日本語版を読む(4) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(4) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(4) - バリケンのJavaScript日記 のブックマークコメント

きょうもCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を引き続き読んでいくよ。

じゃあ、気になったところをメモするよ。

定数

定数はconstで宣言するよ。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> const prefix = '212';
Exception: 構文エラーです。
js> ^C
>

あれれ?構文エラーなっちゃった

よく調べてみたら、こちらに書いてあったんだね。

定数

読み取り専用の名前付き定数がサポートされています。この機能は JavaScript の C での実装でのみ利用可能です。定数 のページを参照してください。

JavaScript 1.5 における新機能

ということで、JavaScriptのCでの実装、つまりSpiderMonkeyでならうまくいきそうだね。

$ smjs
js> const prefix = '212';
js> prefix
212
js> prefix = '345';
345
js> prefix
212
js> var prefix = '789';
5: TypeError: redeclaration of const prefix
js> ^C
$

へえ、constで定義したあとに再代入してもエラーにはならない(けど代入できてない)んだね。そして、varで再代入しようとするとエラーになるんだね。

[] 関数名はvarconst 関数名はvarかconstか - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  関数名はvarかconstか - バリケンのJavaScript日記  関数名はvarかconstか - バリケンのJavaScript日記 のブックマークコメント

constでちょっと気になったのが、「第7章 関数」で紹介されている無名関数のサンプルだよ。

const square = function(number) {return number * number};

じゃあ、普通に名前つきで定義したときは、関数名はconst相当なのかな?var相当なのかな?

実験してみよう!

$ smjs
js> function square1(x) { return x * x; }
js> square1(5)
25
js> var square2 = square1;

function square1(x) {
    return x * x;
}

js> square2(7)
49
js> square1 = 'test';
test
js> square2(3)
9
js> square1
test
js> square1(2)
8: TypeError: square1 is not a function
js> ^C
$

どうやら通常の関数定義はvar相当みたいだよ。

constでも同じように実験してみるね。

$ smjs
js> const square1 = function(x) { return x * x; }
js> square1(5)
25
js> var square2 = square1;
js> square2(7)
49
js> square1 = 'test';
test
js> square1

function (x) {
    return x * x;
}

js> var square1 = 'test';
7: TypeError: redeclaration of const square1
js> ^C
$

やっぱり挙動が違うよね。というわけで、「通常の関数定義は、無名関数var相当の変数名を付けたもの」ということがわかったよ。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061023

2006-10-22

[] Core JavaScript 1.5 Guide 日本語版を読む(3)  Core JavaScript 1.5 Guide 日本語版を読む(3) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(3) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(3) - バリケンのJavaScript日記 のブックマークコメント

きょうもCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を引き続き読んでいくよ。

きょうも気になったところをメモしていくね。

変数

昨日もちょっと出てきたけど、変数について。

変数名はアルファベットかアンダースコアかドル記号から始まり、続く文字は数字もOK。大文字、小文字を区別するんだって。

変数の宣言

変数の宣言はvarを使うんだって。

var x = 42;

なんと、varを省略すると、どこでもグローバル変数になるんだって!ちょっとびっくり。

変数は「入れ物」?「ラベル」?

あと、Rubyでは「全てがオブジェクト」だったけど、どうやらJavaScriptでは違うみたいだねえ。「値」と「オブジェクト」は違うものみたい。

Rubyでは変数は「オブジェクトに貼り付けるラベル」だったけど、JavaScriptではどうかな?

とりあえず、「値」に対する「変数」は、「入れ物」と考えていいのかな?じゃあ、オブジェクトに対してはどうだろう?

これを調べるには、破壊的メソッドがあるオブジェクトを作ってみて実験すればいいよね。昨日出てきたArrayオブジェクトreverse()メソッドは破壊的メソッドみたいだから、これを利用して実験してみよう!

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> var a1 = [1, 2, 3, 4, 5];
1,2,3,4,5
js> var a2 = a1;
1,2,3,4,5
js> a1.reverse();
5,4,3,2,1
js> a1
5,4,3,2,1
js> a2
5,4,3,2,1
js>
^C
>

うん、オブジェクトに対しては、JavaScriptでも「変数オブジェクトに貼り付けるラベル」と考えていいみたい。

[] Arrayオブジェクトのmapメソッド  Arrayオブジェクトのmapメソッド - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Arrayオブジェクトのmapメソッド - バリケンのJavaScript日記  Arrayオブジェクトのmapメソッド - バリケンのJavaScript日記 のブックマークコメント

Rubyではおなじみのmapメソッドは、JavaScript 1.5では実装されていないみたい(1.6からみたい)。

いろいろと探してみたところ、こちらで実装されていたのでそのままコピペさせてもらったよ。mapがあればRubyのeachっぽいこともできるから便利だよね。

function puts(s) {
  WScript.StdOut.Write(s + "\n");
}

if (!Array.map) {
  if (!Array.prototype.map) {
    Array.prototype.map = function (callback, thisObject) {
      var length = this.length;
      var result = new Array(length);
      for (var i = 0; i < length; i++)
        result[i] = callback.call(thisObject, this[i], i, this);
      return result;
    };
  }
  Array.map = function (array, callback, thisObject) {
    return Array.prototype.map.call(array, callback, thisObject);
  };
}

var a = ["ひとつ","ふたつ","みっつ","よっつ","いつつ"];

a.map(function (item) {
  puts(item);
});

実行結果だよ。

>cscript array_map.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

ひとつ
ふたつ
みっつ
よっつ
いつつ

>

2006-10-21

[] Core JavaScript 1.5 Guide 日本語版を読む(2)  Core JavaScript 1.5 Guide 日本語版を読む(2) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(2) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(2) - バリケンのJavaScript日記 のブックマークコメント

きょうはCore JavaScript 1.5 Guide 日本語版「第3章 コア言語の機能」を読んでいくよ。

きょうも気になったところをメモしていくことにするよ。

JavaScriptには、次の5種類の値の型(データ型)があるんだって。

JavaScriptでは、整数と実数の区別がないみたいだよ。あと、日付を表すデータ型もないんだって。たとえば日付を扱うには、Dateオブジェクトとそのメソッドを使えばいいみたいだよ。

今のところの疑問:

データ型の変換

JavaScriptは動的型付けだから、変数宣言のときにデータ型を指定しなくていいし、あとから違う型の値を代入することができるよ。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> var answer = 42;

js> answer
42
js> answer = "Thanks for all the fish...";
Thanks for all the fish...
js> ^C
>

あとちょっと面白いのが、「+」は数値を文字列に変換するみたいだよ。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> x = "The answer is " + 42;
The answer is 42
js> y = 42 + " is the answer";
42 is the answer
js> ^C
>

他の演算子は、数値を文字列に変換しないみたいだよ。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> "37" - 7
30
js> "37" + 7
377
js> "37" + 7 - 7
370
js> ^C
>

とりあえず今日はここまで。

[] Arrayオブジェクトreverseメソッド、joinメソッド  Arrayオブジェクトのreverseメソッド、joinメソッド - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Arrayオブジェクトのreverseメソッド、joinメソッド - バリケンのJavaScript日記  Arrayオブジェクトのreverseメソッド、joinメソッド - バリケンのJavaScript日記 のブックマークコメント

404 Blog Not Found:javascript - Interpolatorで変数展開で、本文とは全然関係ない一番最後のところが気になったよ。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> ['Javascripter', 'the', 'Dan'].reverse().join(' ');
Dan the Javascripter
js> ^C
>

へえ、これだけ見ると、なんだかRubyそっくりだね。Core JavaScript 1.5 Guide 日本語版「第8章 オブジェクトの使用」 Array のメソッドのところに説明があるみたいだよ。

うーん、まだまだ先は長いなあ。

トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061021

2006-10-20

[] WindowsでもインタラクティブJavaScript環境  WindowsでもインタラクティブなJavaScript環境 - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  WindowsでもインタラクティブなJavaScript環境 - バリケンのJavaScript日記  WindowsでもインタラクティブなJavaScript環境 - バリケンのJavaScript日記 のブックマークコメント

SpiderMonkeyの「JavaScriptインタラクティブシェル」のようなものがWindowsでもないかなーと思って探してみたら、ijs.jsっていうのがあるんだね。

使い方は、コマンドプロンプトで

>cscript ijs.js

とやればいいみたい。

>cscript ijs.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

js> print("Hello, world!");
Hello, world!
js> ^C
>

SpiderMonkeyとは違って、終了はCrtl + Cなんだね。

追記:SpiderMonkeyでも、Crtl + Cで終了できるみたい!

[] WindowsでもJavaScriptファイルから実行  WindowsでもJavaScriptをファイルから実行 - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  WindowsでもJavaScriptをファイルから実行 - バリケンのJavaScript日記  WindowsでもJavaScriptをファイルから実行 - バリケンのJavaScript日記 のブックマークコメント

cscriptコマンドを使えば、Windowsでもコマンドラインjsファイルを実行できるんだね。

cscript [JavaScriptファイル名]

SpiderMonkeyとは違って、コンソールに出力するprint関数が実装されていないんだね。print関数を使いたいときは、さっきのijs.jsを参考にして、自分で書いてあげればいいみたい。

たとえば、次のような内容のテキストを、

function print(s) {
  WScript.StdOut.Write(s);
}

print("Hello, world!");

メモ帳か何かでhello.jsという名前で保存して、コマンドプロンプトで

>cscript hello.js

とすれば実行できるよ。

>cscript hello.js
Microsoft (R) Windows Script Host Version 5.6
Copyright (C) Microsoft Corporation 1996-2001. All rights reserved.

Hello, world!
>

[] Core JavaScript 1.5 Guide 日本語版を読む(1)  Core JavaScript 1.5 Guide 日本語版を読む(1) - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  Core JavaScript 1.5 Guide 日本語版を読む(1) - バリケンのJavaScript日記  Core JavaScript 1.5 Guide 日本語版を読む(1) - バリケンのJavaScript日記 のブックマークコメント

JavaScriptの実行環境の整備で前置きが長くなっちゃったけど、いよいよCore JavaScript 1.5 Guide 日本語版を読んでいくよ。

第1章 このガイドについて

まずは「第1章 このガイドについて」だよ。とりあえずこの章は、さーっと読み流しちゃった。

第2章 JavaScript 概要

次に「第2章 JavaScript 概要」だよ。

じゃあ、気になったところをメモしていくよ。

JavaScriptの特徴
JavaScriptJavaの対比
ECMAScript

JavaScriptECMA-262、ISO-16262として国際規格になっているんだね。

JavaScriptECMAScriptとでは、ちょっと違うみたい。たとえばECMAScriptで言う「Globalオブジェクトのメソッドやプロパティ」のことを、JavaScriptでは「トップレベル関数プロパティ」と呼ぶんだって。あと、JavaScriptでは「引数なしのNumberコンストラクタは+0を返す」「引数なしのStringコンストラクタは""(空文字)を返す」と決まっているけど、ECMAScriptでは決まっていないのかな?

今のところの疑問:

とりあえず今日はこれくらいで。明日からは「第3章 コア言語の機能」を読んでいくよ。

YuichirouYuichirou2006/10/21 01:02cscriptで解釈できるのは、正しくはJScriptというJavascirptに対抗してマイクロソフトが作った(パクった?)言語です。第一次ブラウザ戦争時代、Mozilla系はJavaScript、IEはJScriptを対応スクリプト言語とし、それぞれ相手を真似たり独自拡張したりしていました。その後それぞれの共通仕様をまとめて標準化したのがECMAScriptです。
ちなみにOperaの対応スクリプト言語は「ECMAScript, with extensions to both JavaScript and JScript」(JavascirptとJScript両方の独自拡張を持ったECMAScript)だそうです。

muscovyduckmuscovyduck2006/10/21 20:50詳細な情報ありがとうございます!>Yuichirouさん

m-komagatam-komagata2006/11/02 11:20すげー!

2006-10-19

[] JavaScriptのいい教科書が見つかったかも!  JavaScriptのいい教科書が見つかったかも! - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  JavaScriptのいい教科書が見つかったかも! - バリケンのJavaScript日記  JavaScriptのいい教科書が見つかったかも! - バリケンのJavaScript日記 のブックマークコメント

今までずーっとJavaScript勉強をしたかったんだけど、なかなかいい教科書がないなーって思っていたんだよ。

でも、Kazuho@Cybozu Labsさんのエントリ経由でCore JavaScript 1.5 Guide 日本語版存在を知ったよ。これがなかなかよさそうだから、これを教科書JavaScript勉強していこうと思うよ。

みんなと比べたらかなりのんびりペースでの勉強になると思うけど、よろしくね。

[] SpiderMonkeyインストール  SpiderMonkeyのインストール - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  SpiderMonkeyのインストール - バリケンのJavaScript日記  SpiderMonkeyのインストール - バリケンのJavaScript日記 のブックマークコメント

まずは、Rubyirbに相当するSpiderMonkeyインストールするよ。Debian系のLinuxディストリビューションを使っている人なら、こちらにあるとおり

# aptitude install spidermonkey-bin

コマンド一発でインストールできるよ。

じゃあ、使ってみよう!jsコマンドを実行すると、インタラクティブJavaScriptを実行できるシェルが立ち上がるよ。まずはお約束HelloWorldからやってみるね。

$ js
js> print("Hello, World!");
Hello, World!
js> quit();

$

やったあ、動いた!でも、終了するのに「quit();」って打たないといけないのは面倒だねえ。

追記:Crtl + Cで終了できるみたいだよ!

[] SpiderMonkeyjsファイルを実行  SpiderMonkeyでjsファイルを実行 - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  SpiderMonkeyでjsファイルを実行 - バリケンのJavaScript日記  SpiderMonkeyでjsファイルを実行 - バリケンのJavaScript日記 のブックマークコメント

もちろんインタラクティブシェルだけじゃなくて、ファイルJavaScriptコードを書いてから実行することもできるよ。ちなみに、jsはsmjsの別名みたいだから、smjsコマンドを使ってもいいみたい。

$ vi hello.js

次のような内容にするよ。

print("Hello, World!");

じゃあ、実行してみよう。

$ smjs hello.js

実行結果だよ。

Hello, World!

もちろん、shebang(#!で始まる行のこと)を使って単体のコマンドにすることもできるよ。

$ vi hello.js

次のような内容にするよ。

#!/usr/bin/smjs

print("Hello, World!");

次のようにして実行するよ。

$ ./hello.js

実行結果だよ。

Hello, World!

[] 変数関数  変数と関数 - バリケンのJavaScript日記 を含むブックマーク はてなブックマーク -  変数と関数 - バリケンのJavaScript日記  変数と関数 - バリケンのJavaScript日記 のブックマークコメント

変数を定義するときはvar関数を定義するときはfunctionを使うみたい。

$ vi square.js

次のようにして、変数xと関数squareを定義してみたよ。

var x = 5;

function square(num) {
  return num * num;
}

print(square(x));

じゃあ、実行するね。

$ smjs square.js

実行結果だよ。

25
トラックバック - http://javascript.g.hatena.ne.jp/muscovyduck/20061019