JavaScriptをgoogle chromeで

Question

JavaScriptの学習を始めたのですが、最初で躓いてしまいました。私はgoogle chromeを規定のブラウザとして使用しています。 test.htmlでの記述： JavaScript test test.jsでの記述： var num=[11,22,33,44,55]; var name=['test','test1','test2','test3','test4']; for(var i=0;i<5;i++){ document.write(name[i]+"の点数は"+num[i]+"です
"); } 期待していた表示は、 testの点数は11です test1の点数は22です test2の点数は33です test3の点数は44です test4の点数は55ですという感じなのですが・・・google chromeでは tの点数は11です eの点数は22です sの点数は33です tの点数は44です ,の点数は55ですと表示されてしまいます。 IEでは問題ありませんでした。全てのブラウザで問題なく表示させるためには、どのようにすればいいのでしょうか？ご教示願います。

think49 · Accepted Answer

この問題は DOM とグローバル変数の仕組みを知らないと難しいですね…。

変数nameはグローバル変数として宣言されています。
グローバル変数 name は window.name と同じです。
https://developer.mozilla.org/ja/Core_JavaScript_1.5_Guide/Variables#section_5

ところが、window.name はウインドウの名前を指定するプロパティとして DOM で規定されています。
https://developer.mozilla.org/ja/DOM/window.name

window.name は String型 のプロパティとして規定されているので、初期化される値は全て String型 に変換されます。

var name = ['test','test1','test2','test3','test4']; // "test,test1,test2,test3,test4" に変換して格納される

ES3 規定にはありませんが、Stringオブジェクトは配列のように扱えるように拡張されているJavaScriptエンジンがあり、Google Chrome もその一つです。
https://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Objects/String
# この仕様は ES5 規定で取り込まれました。http://sideshowbarker.github.com/es5-spec/#x15.5.5.2

var string = 'Hello';
alert(string[0]); // "Hello" の1文字目である "H" が出力される (対象が空文字でなければ string[0] は string.charAt(0) と等価)

従って、質問文にあるコードでは "test,test1,test2,test3,test4" の1番目の文字から順番に出力してしまうのです。
この現象を避けるために関数内で変数を定義してください。

(function () { // コード全体を匿名関数(無名関数)で括る
　var num = [11, 22, 33, 44, 55];
　var name = ['test', 'test1', 'test2', 'test3', 'test4']; // ローカル変数を宣言する

for (var i = 0; i < 5; i++){
　　document.write(name[i] + 'の点数は' + num[i] + 'です\u003Cbr\u003E');
　}
})();

ローカル変数はグローバル変数とは別に定義されるので、window.name との名前の衝突を気にする必要がなくなります。

[JavaScript]　猿でもわかるクロージャ超入門　３　無名関数 - DQNEO起業日記
http://dqn.sakusakutto.jp/2009/01/javascript_2.html

think49 · Answer

#3 です。

> 対象が空文字でなければ string[0] は string.charAt(0) と等価
存在しないindex値の参照を失念していました。「ほぼ等価」に訂正します。
存在しないindex値を指定した場合、String#charAt は空文字を返し、String[[GetOwnProperty]] は undefined を返します。
# "Object Internal Methods" の [[GetOwnProperty]] (ES5 8.12.1) を利用しているので、プロパティアクセス演算子や配列と同じイメージでいいと思います。

http://sideshowbarker.github.com/es5-spec/#x8.12.1 (8.12.1 [[GetOwnProperty]])
http://sideshowbarker.github.com/es5-spec/#x15.5.5.2 (15.5.5.2 [[GetOwnProperty]])
http://sideshowbarker.github.com/es5-spec/#x15.5.4.4 (15.5.4.4 String.prototype.charAt)
http://www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/15-5_String_Objects.html#section-15.5.4.4 (15.5.4.4 String.prototype.charAt)

yyr446 · Answer

nameってのが予約語だからか？だとChromeでも問題ないぞ！

nda23 · Answer

やっぱり正当な方法が良いでしょうね。
var num=new Array(11,22,33,44,55);
var name=new Array('test','test1','test2','test3','test4');

JavaScriptをgoogle chromeで

この問題は DOM とグローバル変数の仕組みを知らないと難しいですね…。

#3 です。

nameってのが予約語だからか？

やっぱり正当な方法が良いでしょうね。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング