TEXTAREA と 外部ｊｓファイル
ITAHASHI Kunio
<TEXTAREA>....</TEXTAREA>内のデータを配列データとして
グループごとに差しかえることはできますでしょうか。データを
jsファイルとして外部化してそれを読み込ませることができれ
ば、もっともよいのですが、うまくいきません。
次のようなスクリプトを書いています。
<script src="a.js"></script>
<script>
document.write( '<textarea cols="50" rows="30">')
for(var i=0; i<d.length; i++){
document.write(' '+ d[i] +'\n');
}
document.write( '</textarea>')
</script>
ここで、たとえばですが、素人考えで、
<script ID="sc" src="a.js"></script>
として、IDを設定し、イベントで
function changeJs(){
document.all['sc'].src='b.js';
}
のような処理を考えてみましたが、うまく動きません。
この場合は、実行時にプロパティを設定することが
できないということのようです。
他のIEのみのメソッドなどでinnerHTMLのように文字列を
入れかえることはできそうですが、実現したいのは、
配列データそのものをまとめて入れかえることです。
何かよいアドバイスありましたら、よろしくお願いいたし
ます。
なお、a.jsおよびb.jsの内容は、
-----[a.js]-------------
var d=new Array()
d[0]='1200';
d[1]='1650';
d[2]='2400';
d[3]='3520';
-----[b.js]-------------
var d=new Array()
d[0]='261ppm';
d[1]='335ppm';
d[2]='582ppm';
d[3]='641ppm';
---------------------
いつも初歩的な質問ですいません。
よろしくお願いいたします。
--
板橋
/*********ブラウザ環境********
Appname = Microsoft Internet Explorer
Appversion = 4.0 (compatible; MSIE 4.01; Windows 98)
Broswer = Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)
***************************/
ku...@gssm.otsuka.tsukuba.ac.jp
> <script src="a.js"></script>
> <script>
> document.write( '<textarea cols="50" rows="30">')
> for(var i=0; i<d.length; i++){
> document.write(' '+ d[i] +'\n');
> }
> document.write( '</textarea>')
> </script>
ということは。a.jsを読み込み、続いてすぐにdocument.write()で
textareaを書き出してしまうわけですよね。書き出してしまってから、
後で
> として、IDを設定し、イベントで
イベントに対応してsrcを差し替えても配列の中身は変わるでしょう
が書き出した内容は変わらないでしょ。textareaの中身を変えたいの
ならそのtextareaのvalueを変更しないと。
docment.write()はそういうのには不向きです 久野
ITAHASHI Kunio
いつもすいません。
> イベントに対応してsrcを差し替えても配列の中身は変わるでしょう
>が書き出した内容は変わらないでしょ。textareaの中身を変えたいの
>ならそのtextareaのvalueを変更しないと。
>
納得です。<body onload=""...>でリロードをかけて何とかなるかなと思
っていたのですが・・・。しかし、
document.formName.TextareaName.value = d ;
で、TEXTAREA内に差し替えたい配列の要素を、いわばべた打ちの
形で（コンマ連結で）、持って来ることはできるのですが、これを整形
するにはどうすればよいのかわかりません。いろいろ試してみました
が、コントロールできないようです。
どなたか、よいアドバイスお願いいたします。
--
板橋
Satoshi Nakajima
板橋さんが何をされたいのかよくわからないので、
適切なアドバイスでなければ申しわけありません。
以下のようなソースは参考になりませんか？
var d=new Array()
function set_a(){
d[0]='1200';
d[1]='1650';
d[2]='2400';
d[3]='3520';
}
function set_b(){
d[0]='261ppm';
d[1]='335ppm';
}
function mojiretu(){
var moji="";
for (var i=0; i<d.length; i++){
moji=moji+' '+ d[i] +'\n';}
alert(moji);
}
var d=new Array()
set_a();
mojiretu();
var d=new Array()
set_b();
mojiretu();
/*
整形することが問題なのでしたら、
function mojiretu() の中の alert を、
document.formName.TextareaName.value = moji
とすれば、よさそうな気がしますが。
（IE6.0では動作確認できました。）
あるいは、これ
http://www.chem.gunma-ct.ac.jp/sinro.htm
に近いことをしようとされているとか。
*/
ku...@gssm.otsuka.tsukuba.ac.jp
> 納得です。<body onload=""...>でリロードをかけて何とかなるかなと思
> っていたのですが・・・。しかし、
リロードしたら当然HTMLから読み直されるから<script>要素のsrc属
性も元に戻って、その値でdocument.write()されるでしょ。
ソースを自分の希望的観測で解釈しないようにとこないだ私は言った
ですよね～ :-)
> で、TEXTAREA内に差し替えたい配列の要素を、いわばべた打ちの
> 形で（コンマ連結で）、持って来ることはできるのですが、これを整形
> するにはどうすればよいのかわかりません。いろいろ試してみました
> が、コントロールできないようです。
document.write()でなら整形できるけど文字列として連結するときは
整形できない、というのも不思議です。
document.write(a);
document.write(b);
document.write(c);
する代わりに
result = '';
result += a + "\n";
result += b + "\n";
result += c + "\n";
としてこのresultをtextareaのvalueに入れりゃいいんでは。
なかなか興味深い質問ですね :-) 久野
ITAHASHI Kunio
板橋です。
スクリプトとURLありがとうございました。
パーフェクトです！
私のしたいことができました。
高専のコードは配列の要素に直接整形をしていますが、for文
での記述の呼び出しができないでいました。
ナカジマさんがお示しくださったコードは私にはちょっと複雑な
のですが、イベント化できました。
私の理解が正しければ、関数で定義した整形コードを関数ごと
呼び出しているわけですね。今の私にはどうも関数というのが
イマイチ理解不足で、このようなコードが書けるようになれるよ
うにもっと頑張りたいと思います。
本当にありがとうございました。
またよろしくお願いいたします。
--
板橋 拝
T. Sugita
既に解決されているようなので、混乱させる元になるかという気が
しないでもないのですが、データの読み込みというのも面白そう
なので、いくつか作ってみました。
# 以前、どなたか例示されていたと思うのですが、Google の
# fj.comp.lang.javascript が Swen 以来死んだ状態なので・・・
環境
IE5.5sp2 (5.50.4807.2300)
Mozilla Firebird 0.7+ Gecko/20031002
| IE Gecko
-------------+----+-------
1) reload OK OK
2) open-js OK OK(なぜエラーが発生するかよくわからず)
3) open-html OK OK(なぜエラーが発生するかよくわからず)
4) frame OK OK(reload時のみ security error)
5) iframe OK OK(reload時のみ security error)
6) script OK NG
7) innerHTML NG NG(なので、ソース無しです)
# IE の方は、とくエラーは発生しません。
# DOM に関しては、試していないです。
共通
=== a.js ===
var aaa = new Array(1, 2, 3);
=== b.js ===
var aaa = new Array(4, 5, 6);
1) reload
=== reload.html ===
<head>
<script>
function parseInput(href,sep1,sep2,sep3) {
if (href == undefined) href = "";
if (sep1 == undefined) sep1 = "?";
if (sep2 == undefined) sep2 = "&";
if (sep3 == undefined) sep3 = "=";
var url = href.split(sep1);
var args = new Array(); // local scope
args[0] = url[0];
if (url.length >= 2) {
var opts = url[1].split(sep2);
for (var i=0; i < opts.length; i++) {
var e = opts[i].split(sep3);
args[e[0]] = (e[1] == undefined ? true : unescape(e[1]));
}
}
if (parseInput.debug) {
var s = "";
for (var i in args)
s += i + ":" + args[i] + "\n";
alert(s);
}
return args;
}
var args = parseInput(location.href); // global scope
function reload(fname) {
location.href = args[0] + "?data=" + fname;
}
function disp(data) {
var txt = document.getElementById("txt");
txt.value = data[0];
}
function init() {
disp(aaa);
}
</script>
</head>
<body onload="init()">
<script>
var fname = (args['data'] ? args['data'] : "a.js");
document.writeln("<script src='" + fname + "'></\script>");
</script>
<textarea id="txt">
</textarea>
<hr>
<input type="button" value="a" onclick="reload('a.js')">
<input type="button" value="b" onclick="reload('b.js')">
<hr>
</body>
2) open-js
=== open-js.html ===
<head>
<script>
function load_data(fname) {
var w = open("about:blank","data","width=400,height=50");
w.document.open();
w.document.writeln("<p>just a moment.</p>");
w.document.writeln("<script src='" + fname + "'></\script>");
w.document.writeln("<script>");
w.document.writeln("opener.load_finish(self, aaa);");
w.document.writeln("</\script>");
w.document.close();
}
function load_finish(w,data) {
disp(data);
w.close();
}
function disp(data) {
var txt = document.getElementById("txt");
txt.value = data[0];
}
function init() {
load_data('a.js');
}
</script>
</head>
<body onload="init()">
<textarea id="txt">
</textarea>
<hr>
<input type="button" value="a" onclick="load_data('a.js')">
<input type="button" value="b" onclick="load_data('b.js')">
<hr>
</body>
3) open-html
=== open-html.html ===
<head>
<script>
function load_data(fname) {
open(fname,"data","width=400,height=50");
}
function load_finish(w,data) {
disp(data);
w.close();
}
function disp(data) {
var txt = document.getElementById("txt");
txt.value = data[0];
}
function init() {
load_data("a.html");
}
</script>
</head>
<body onload="init()">
<textarea id="txt">
</textarea>
<hr>
<input type="button" value="a" onclick="load_data('a.html')">
<input type="button" value="b" onclick="load_data('b.html')">
<hr>
</body>
=== a.html ===
<head>
<script>
var aaa = new Array(1, 2, 3);
function finish() {
opener.load_finish(self, aaa);
}
</script>
</head>
<body onload="finish()">
<p>just a moment.</p>
</body>
=== b.html ===
<head>
<script>
var aaa = new Array(4, 5, 6);
function finish() {
opener.load_finish(self, aaa);
}
</script>
</head>
<body onload="finish()">
<p>just a moment.</p>
</body>
4) frame
=== frame.html ===
<frameset cols="100%,*" frameborder="no">
<frame name="main" src="frame-main.html">
<frame name="data" src="about:blank">
</frameset>
=== frame-main.html ===
<head>
<script>
function load_data(fname) {
top.data.document.open();
top.data.document.writeln("<script src='" + fname + "'></\script>");
top.data.document.close();
setTimeout("disp(top.data.aaa)", 0);
}
function disp(data) {
var txt = document.getElementById("txt");
txt.value = data[0];
}
function init() {
load_data('a.js');
}
</script>
</head>
<body onload="init()">
<textarea id="txt">
</textarea>
<hr>
<input type="button" value="a" onclick="load_data('a.js')">
<input type="button" value="b" onclick="load_data('b.js')">
<hr>
</body>
5) iframe
<head>
<script>
function load_data(fname) {
data.document.open();
data.document.writeln("<script src='" + fname + "'></\script>");
data.document.close();
setTimeout("disp(data.aaa)", 0);
}
function disp(data) { // local scope
var txt = document.getElementById("txt");
txt.value = data[0];
}
function init() {
load_data('a.js');
}
</script>
</head>
<body onload="init()">
<textarea id="txt">
</textarea>
<hr>
<input type="button" value="a" onclick="load_data('a.js')">
<input type="button" value="b" onclick="load_data('b.js')">
<hr>
<iframe name="data" style="height:0; display:none"></iframe>
<!-- どちらでも可
<iframe name="data"
style="height:0; left:0; top:0; position:absolute; visibility:hidden">
</iframe>
-->
</body>
6) script
<head>
<script>
function load_data(fname) {
var data = document.getElementById("data");
data.src = fname;
setTimeout("disp(aaa)", 0);
}
function disp(data) { // local scope
var txt = document.getElementById("txt");
txt.value = data[0];
}
function init() {
load_data('a.js');
}
</script>
</head>
<body onload="init()">
<textarea id="txt">
</textarea>
<hr>
<input type="button" value="a" onclick="load_data('a.js')">
<input type="button" value="b" onclick="load_data('b.js')">
<hr>
<script id="data" src="a.js"></script>
</body>
# 書いてる途中でちょっと編集したので、間違ってたらご容赦ください。
ちょっと関係ないですが、Gecko で、フレーム内で iframe を利用し、
onload で document.write() を利用して初期化しようとすると、
document.close() しているにもかかわらず、読み込みが終了しない
という現象が発生していました。
button 等の onclick か、フレームでなく直接開いた場合の初期化
の場合は問題なかったです。
koun...@mbh.nifty.com
余計な記事だとは思いますが。枯れ木も山のにぎわいということで。
最初に板橋さんの記事を見たとき，本体とデータ部分は分けて，データに変更や追加
がある場合は，データ部分の変更で対応したいのかなと思いました。そこで，追加
データがある場合には，a.jsとかb.jsとかにデータファイルを分割するのではなく，
データファイルはa.js１つにまとめてそこでデータの追加や変更をする方法ではどう
なのかとちょっと考えてみました。
本体の内容。
-------------------------------------------------------
<html>
<body>
<script src="a.js"></script>
<script>
function dispdata(x)
{
var s = "";
for(i=0; i < x.length; i++)
s = s+x[i]+"\n";
document.form.txt.value = s;
}
</script>
<form name = "form">
<select name = "mymenu"
onChange="dispdata(getdata(this.form.mymenu.selectedIndex))">
<script>
document.write(str);
</script>
</select>
<textarea name = "txt" rows = 30 cols = 30>
</textarea>
</form>
</body>
</html>
---------------------------------------------------------
a.js （データファイルの内容）
function getdata(index)
{
var x;
if (index == 0) {x = a;}
if (index == 1) {x = b;}
if (index == 2) {x = c;}
// hogeデータを追加する場合，以下を追加。
// if (index == 3) {x = hoge;}
return x;
}
var str = "<option> aデータ\
<option> bデータ\
<option> cデータ"
// hogeデータを追加の場合は，最後の行を下記のように訂正し，付け加える。
// <option>は連続して記載。途中にコメント等を入れると動かない。
//<option> cデータ\
//<option> hogeデータ"
var a = new Array('1200', '1650', '2400', '3520');
var b = new Array('261ppm', '335ppm', '582ppm', '641ppm');
var c = new Array("abcd", "efgh", "ijkl", "mnop", "qrst", "uvwx");
// hogeデータを追加する場合。
// var hoge = new Array("テスト", "試験");
----------------------------------------------------------------
--
******************************
keizi kounoike
******************************
Satoshi Nakajima
ナカジマです。
> 高専のコードは配列の要素に直接整形をしていますが、for文
> での記述の呼び出しができないでいました。
こんな感じではいかがですか。
myData = new Array(
"0-0\n0-1\n0-2\n0-3\n0-4\n0-5\n0-6\n0-7",
"1-0\n1-1\n1-2\n1-3\n1-4\n1-5\n1-6\n1-7",
"2-0\n2-1\n2-2\n2-3\n2-4\n2-5\n2-6\n2-7",
"3-0\n3-1\n3-2\n3-3\n3-4\n3-5\n3-6\n3-7"
);
for (var k=0; k<myData.length; k++){
var d=myData[k];
for (var i=0; i<d.split("\n").length; i++){
alert(d.split("\n")[i]);}
}
==
Satoshi Nakajima 中島 敏
mailto:naka...@chem.gunma-ct.ac.jp
ITAHASHI Kunio
板橋です。
コードすいません。なるほど、
var d=myData[k];
for (var i=0; i<d.split("\n").length; i++){
........
........
なんてことができるんですね。こういう発想は湧きません。
参考になります。ありがとうございました。
ところで、・・・
またまた、カベにぶち当たってしまいました。
整形を記述したステートメントのある関数を呼び出してデータ
表示の切り替えをする場合、テストでボタンクリックのイベント
を使ってためして、なるほど納得と思ったのですが、実際のイ
べントは切り替え数が多いので<SELECT>が都合よいのです。
そこで<SELECT>のコードを書いてみたのですが、関数の呼び
出し方がうまくできません。
/*データ配列*/
var d1 = new Array();
d1[0] = "3658";
d1[1] = "2641";
.................
.................
var d2 = new Array();
d2[0] = "236ppm";
d2[1] = "157ppm";
.................
.................
として、それぞれに
function F1(){
//整形
}
function G1(){
//整形
}
と２つの関数を作り、この関数をonchangeイベントで切り替えて
呼び出すのにはどう書けばいいのでしょうか。
onclick="F1()"などで個別に呼び出すのは簡単なのですが、
<SELECT>のonchangeだと難しいです。いろいろやってみました
が、オブジェクトじゃないとかで、うまく書くことができません。
split()で分けた変数をそれぞれvalueとtextにふりわけ、value値
をonchangeの関数名と関連させるとかのやり方をしたりしました
（何と言われるか分かっているので、私の書いたコードは省略し
ます）。
何かアドバイスありましたらお願いいたします。
--
板橋
ku...@gssm.otsuka.tsukuba.ac.jp
> onclick="F1()"などで個別に呼び出すのは簡単なのですが、<SELECT>
> のonchangeだと難しいです。いろいろやってみましたが、オブジェク
> トじゃないとかで、うまく書くことができません。split()で分けた
> 変数をそれぞれvalueとtextにふりわけ、value値をonchangeの関数名
> と関連させるとかのやり方をしたりしました(何と言われるか分かっ
> ているので、私の書いたコードは省略します)。
何と言われるんですか(笑)。それを拝見するから面白いのであって
自分のやったことを出さないで正解だけくれというのは私から見たら
つまらないです。
そもそもなんで関数を2つにするんですか。関数は1つで、その中で
select要素の何番目が現在選ばれているかを参照して必要なデータを
処理する、というのが普通だと思います。
まあ普通じゃなくやってもいいけど 久野
ITAHASHI Kunio
いつもありがとうございます。
<SELECT>のナビとないアタマ絞って格闘していて、鴻池さんの
記事を拝読したのが、たったいまでした。
そしたら、なんと！
私が夜も寝ないで、出来ない出来ないと悪戦苦闘していたスクリ
プトを書いていただいてるではありませんか。
まさに完璧です。これしたかったんです！
ありがとうございました。
それにしても、コードを拝見すると、やはり私の独力では無理で
した。onchangeは、なるほど、とようやく分析できる程度です。
こんなスクリプトが書けるようになる日が来るんでしょうか。
それにしても、すごいですね。
また疑問が湧くかもですが、取り急ぎ、お礼まで。
下手な説明から私の意図をちゃんと汲んで頂いてとてもうれしい
です。本当にありがとうございました。
--
板橋 拝
杉田さんにも、同じこと申し上げなければならないかも、です。
アタマが疲れていて、コードが食傷気味なので、また、投稿
します。すいません、杉田さん。この場を借りて・・・。m(_ _)m
＃それにしても、ばかデカイエッチ系の迷惑投稿なんとかならな
＃いですか？ヘッダーをダウンロードしてから、記事をまた取り
＃直しています。何が面白いんだろうか、こんなことして。
ITAHASHI Kunio
うーん。残念ですが、よく見ると、鴻池さんのスクリプトも
基本的には高専のコードと同じように思います。
ナカジマさんが書いてくれているような*関数を呼び出す*
のに<SELECT>を使うにはどうすればいいのでしょうか。
＃やっぱ無理なのかな
--
板橋
ITAHASHI Kunio
やっぱアタマ、スッキリしてなかったです。
記事キャンセルしましたが・・・すいません。
.
ITAHASHI Kunio
いつもありがとうございます。
とても勉強になりました。
特に、６番目の
<script id="data" src="a.js"></script>
の型の例は私が当初考えていたものと同じような
ので、とても興味をもって拝見いたしました。
document.getElementById("data")などはIE４用に
書き換えて実行させてみましたが、残念ながら、こ
のスクリプトでも私が試みていたときのように、私の
ブラウザは
「実行時にプロパティを設定することはできません」
というエラーを出してしまいます。
でも、これが出来たらいちばんクールなスクリプト
だと思います。
３番目も新鮮でした。なるほど、です。外部ｊｓだけじゃ
ないのですね。
いろいろいつも示唆に富むアドバイスありがとうご
ざいます。またよろしくお願いいたします。
--
板橋 拝
T. Sugita
# 忘年会シーズンなので、応答は結構遅れます。m(_ _)m
In message news:dTxDb.1907$747...@news1.dion.ne.jp
"ITAHASHI Kunio" <kunit...@h2.dion.ne.jp> wrote ...
> var d=myData[k];
> for (var i=0; i<d.split("\n").length; i++){
> ........
> ........
> なんてことができるんですね。こういう発想は湧きません。
ちょっと気になるところなのですが、もし発想というのが
以下の部分ということであれば、
> for (var i=0; i<d.split("\n").length; i++){
ここは、
var n = d.split("\n").length;
for (var i=0; i < n; i++){
と置き換えても同じことで、形式としては一般的なものです。
表現方法より、意味に沿って考えた方がわかりやすいと思います。
> と２つの関数を作り、この関数をonchangeイベントで切り替えて
> 呼び出すのにはどう書けばいいのでしょうか。
～ 略 ～
> （何と言われるか分かっているので、私の書いたコードは省略し
> ます）。
プログラムは、フローチャートといった言葉からもわかる通り、
テクニックを駆使するというよりは流れを考える作業ですので、
たとえ間違っていても、全体のコードからわかることも多いものです。
(流れの中での(自分なりの)必然を探す作業と言った方が良いのかな？)
呼び出し先と呼び出し元をセットにした簡単なモデルがあると、
言葉だけよりは、より多くのことが伝わりますので、ぜひコード
を提示された方が良いかと思います。
select の件ですが、久野さんから回答が示されていますが、補足です。
select について、たとえばプルダウン式のメニューの場合、N個の
選択肢があったとして、操作の面から言うと、メニューを選択(クリック)
して選択肢となる項目を表示し、目で確認して、何番目かの項目を
選択します。
そして、select には、何番目を選択したかという情報がセットされ、
各項目には、個別に識別できる情報をあらかじめセットできます。
何番目を選択したかという情報は selectedIndex に保存されているので、
ごく簡単に書くと、
<script>
function chgsel(obj) {
window.status = obj.selectedIndex;
}
</script>
<select onchange="chgsel(this)">
<option>A
<option>B
</select>
のようにして、なにが選択されたのかを知ることができます。
ただ、これだと選択項目を変更した場合にいちいち順番を確認する
必要があるため、各項目に情報を持たせて、
<script>
function chgsel(obj) {
window.status = obj[obj.selectedIndex].value;
}
</script>
<select onchange="chgsel(this)">
<option value="aa">A
<option value="bb">B
</select>
のようにして、情報を取り出すことも可能です。
# 整合性さえ保っていれば良いので、selectedIndex だけで
# やってしまっても、全然問題ないです。
識別するには、if 文で書くと
var val = obj[obj.selectedIndex].value;
if (val == "aa") {
window.status = "AA";
} else if (val == "bb") {
window.status = "BB";
}
のようになりますし、switch 文を使うと
switch (val) {
case "aa":
window.status = "AA";
break;
case "bb":
window.status = "BB";
break;
}
のようになります。
switch 文の方がわかりやすいかは人それぞれですが、
実現するだけなら if 文でも十分です。
# 結局は同じことですし
複数のデータを扱う場合、2次元配列にして
var table = new Array();
table[0] = new Array();
table[0][0] = "A0";
table[0][1] = "A1";
table[1] = new Array();
table[1][0] = "B0";
table[1][1] = "B1";
として、
var data = table[obj.selectedIndex];
window.status = data[0];
のように利用するとか、value で引き出した値の利用を前提に
var table = new Array();
table["aa"] = new Array();
table["aa"][0] = "A0";
table["aa"][1] = "A1";
table["bb"] = new Array();
table["bb"][0] = "B0";
table["bb"][1] = "B1";
と設定しておいて、
var data = table[obj[obj.selectedIndex].value];
window.status = data[0];
でも良いかと思います。
# どちらの場合も、エラー(値範囲外の)処理は記述してませんので、
# 整合性は保つ必要があります。
ITAHASHI Kunio
>> なんてことができるんですね。こういう発想は湧きません。
>
>ちょっと気になるところなのですが、もし発想というのが
>以下の部分ということであれば、
>
>> for (var i=0; i<d.split("\n").length; i++){
>
>ここは、
>
> var n = d.split("\n").length;
> for (var i=0; i < n; i++){
>
>と置き換えても同じことで、形式としては一般的なものです。
>表現方法より、意味に沿って考えた方がわかりやすいと思います。
>
なるほど。単にそういうことだったんですね。素人なものですから、
形に惑わされてしまうと、あー、すごいなあ、と感心してしまいます。
for文といえば、私的にずーっと未解決なことがあるのですが、ちょ
っとご助言いただけますでしょうか。できれば、今の問題に取り入
れられたら、いいのですが・・・。
配列データの中の任意の要素を切り出すという問題です。
たとえば、
var x = new Array('',
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9'
);
という配列データが与えられていて、いま、この中の任意の要素、
'2', '3', '4, '7', '8', '9' という６つの文字列を切り出して表示するとい
うコードを書く、というとき、for文を２つ使って文字列を連結させる
という考え方でのコードは書けるのですが、*１つのfor文*で書き
出すことはできますでしょうか。
for(i=2,i<5;i++) || (i=7;i<10;i++)){
document.write(i+'<br>')
}
または、
for(i=2;((i<5)||(i>=7&&i<10));i++){
.................
}
もしくは、
for(i=2?;i<5:i=7?;i<10:null;i++){
..................
}
というような具合で。
それが出来れば１つの配列を経済的に使えるのですが。
ご教示お願いいたします。
--
板橋
ITAHASHI Kunio
var x = new Array('', を var x = new Array( に訂正してキャンセルのうえ再
送します。すいません。
*/
杉田さん 解説ありがとうございます。
>> なんてことができるんですね。こういう発想は湧きません。
>
>ちょっと気になるところなのですが、もし発想というのが
>以下の部分ということであれば、
>
>> for (var i=0; i<d.split("\n").length; i++){
>
>ここは、
>
> var n = d.split("\n").length;
> for (var i=0; i < n; i++){
>
>と置き換えても同じことで、形式としては一般的なものです。
>表現方法より、意味に沿って考えた方がわかりやすいと思います。
>
なるほど。単にそういうことだったんですね。素人なものですから、
形に惑わされてしまうと、あー、すごいなあ、と感心してしまいます。
for文といえば、私的にずーっと未解決なことがあるのですが、ちょ
っとご助言いただけますでしょうか。できれば、今の問題に取り入
れられたら、いいのですが・・・。
配列データの中の任意の要素を切り出すという問題です。
たとえば、
var x = new Array(
Satoshi Nakajima
板橋さんこんばんは。
for(i=2;((i<5)||(i>=7&&i<10));i++){
// 処理
alert(i);
}
を実行した時、何が起きたかを考えれば、理解しやすいと思うのですが。
for ( 初期値; 条件式; 増減式 ) { 処理 }
は、条件式が成立している間、処理を行い、増減式に従ってカウンタ(iなど）を増減しま
す。つまり、上のソースを実行させると、
i=2 これは、条件 ((i<5)||(i>=7&&i<10)) が真なので、処理を行い、i を１増します。
i=3 同じく、条件は真。処理を行い、i を１増します。
i=4 同じく、条件は真。処理を行い、i を１増します。
i=5 ここで、条件は偽となるので、処理は行われず、ループを終了します。
つまり、条件式のORより後半（(i>=7&&i<10)）は、関係なくなりますね。
条件式のところを替えるのではなく、増減式を工夫して、
for(i=2;i<10;(i=i+1+(i==4)*2)){
alert(i);
}
とする方法はありますが、これはいかにもトリッキーです。
（ie6.0/win98 では動きましたが、真＝1 と扱うかどうかは、
保証されていないと思うので、上のソースは止めといた方が
いいんではないかと思います。＜この辺りの事情は詳しく
ありません。m(__)m）
板橋さんのやりたいことを素直に行うなら、
for(i=2;i<10;i++){
if ((i<5)||(i>=7&&i<10)) {
// 処理
};
}
とするのが普通だと思います。カウンタ変数 i は、１ずつ増えますが、条件を満たさな
い時は、処理が行われないように書いてあります。
Satoshi Nakajima
あちゃあ、誰かにつっこまれる前に。(^^;
その１。真偽を数値化するためには、条件演算子を
使えばよかったんですね。
for(i=2;i<10;(i+=(i==4?3:1))){
alert(i);
}
一応、これでプラットフォームを選ばないはず、ですよね。笑
その２。for ～ next ループって…。
BASIC出身だもんで。許してください。m(__)m
"Satoshi Nakajima" <naka...@chem.gunma-ct.ac.jp>
wrote in message news:bs42mm$5b$1...@x1wa.gunma-ct.ac.jp...
：
：
ITAHASHI Kunio
たびたびですいません。
丁寧に解説してくださり、ありがとうございました。
おかげで、疑問氷解です。やっぱ、私は基本的な欠落があるらしく、
妙なところをいじくり回していました。ループはそのままにして、if()で
やる。なるほどです。これなら好きなように取り出せますね。
杉田さんもおっしゃっていましたが、
>表現方法より、意味に沿って考えた方がわかりやすいと思います。
ということ、本当にそうだと思います。指針にしたいと思います。
素直さや基本に忠実ということは、何でもそうですが、本当はかなり
実力がないと出来ないことですよね。
がんばります。
きょうは有意義でした。ありがとうございました。
またよろしくお願いいたします。
--
板橋 拝
T. Sugita
In message news:bs42mm$5b$1...@x1wa.gunma-ct.ac.jp
"Satoshi Nakajima" <naka...@chem.gunma-ct.ac.jp> wrote ...
> for(i=2;i<10;i++){
> if ((i<5)||(i>=7&&i<10)) {
同じことなのですが、インデントが深くなることを嫌う場合とかに
continue を使って処理をとばすという方法もあります。
# たまに continue や break を嫌う人もいるみたいですが、
# 私はよく使います。
for (i=2; i < 10; i++) {
if (i == 5 || i == 6) {
continue; // 5 か 6 であれば、ループ内の処理をとばす
}
… 処理 …
}
数が少ないのであれば、インデックスを配列にして
取り出すのも手です。
var idxs = new Array(2, 3, 4, 7, 8, 9);
var n = idxs.length;
for (var j=0; j < n; j++) {
i = idxs[j];
… 処理 …
}
もともとの意図として、複数のループ範囲で同じ処理を通過したい
(ので2つのfor文を1つで行いたいとのことでしたが、構文がない)
という処理をそのまま実現する場合、その範囲を配列にして
2重のループで、外側で複数の範囲テーブルの読み出し、内側
でその範囲のループの処理を記述する手もあります。
var ranges = new Array(
new Array(2, 4),
new Array(7, 9)
);
/* わかりづらければ
var ranges = new Array();
ranges[0] = new Array(2, 4);
ranges[1] = new Array(7, 9);
*/
var i, j, r;
var n = ranges.length; // この場合 2
for (j=0; j < n; j++) {
r = ranges[j]; // 範囲の読み出し
for (i=r[0]; i <= r[1]; i++) { // 要素の[0]～[1]まで
… 処理 …
}
}
Satoshi Nakajima
ナカジマです。
（少なくとも ie6.0/win98 の僕の環境では）増減式のところに、
関数を用いても大丈夫なようです。
わざわざ関数を呼び出すと、インデントが深くなる問題は
本質的には避けられていないような気もしますが、
直感的には、同程度にわかりやすいような気もしますので、
紹介だけ。
function incre(i){
do
i++;
while ((i<5||i>=7)==false)
return i;
}
for(i=2;i<10;i=incre(i)){
// 処理
alert(i);
}
/*
while ((i<5||(i>=7&&i<10))==false)
としてしまうと、i=9 の時の処理の後、増減式に従って
i=10 となった時点で、無限に i++がくり返される。
for文の判定にかかる前に無限ループにはまってしまう。
*/
koun...@mbh.nifty.com
> （少なくとも ie6.0/win98 の僕の環境では）増減式のところに、
> 関数を用いても大丈夫なようです。
>
ECMA 262 の規格に準拠しているなら，関数でもよいというのは不思議でもないと思
います。
ただ，次のようなものも一応動くようですが，これが正常な動作と言い切れるような
var i のスコープについて明確に記載されたものはあるのでしょうか。（ちょっと調
べたけど見つけれませんでした。）
var x = new Array('0','1','2','3','4','5','6','7','8','9');
document.write('---not recommend---' + '<BR>');
for(var i = 2; i < x.length; i++){
if (i == 5) i = 7;
document.write(x[i] + '<BR>');
}
document.write('-----i = incre()------' + '<BR>');
for(var i = 2; i < x.length; i = incre()){
document.write(x[i] + '<BR>');
}
document.write('------incre()-------' + '<BR>');
for(var i = 2; i < x.length; incre()){
document.write(x[i] + '<BR>');
}
document.write('------incre1()-------' + '<BR>');
for(var i = 2; i < x.length; incre1()){
document.write(x[i] + '<BR>');
}
function incre(){
do
i++;
while (!(i < 5 || i >= 7))
return i;
}
function incre1(){ // return文なし
do
i++;
while (!(i < 5 || i >= 7))
}
あっ，一番上のはvar i のスコープとはなんの関係もありません。ただ直接変数var
i をいじっても動くには動くというだけです。（もちろん，余程の時でないとやりま
せんが）
それから，当然ですが
for(var i = 2; i < x.length; incre(i))
としたのでは，永久にｉが変化しないので動きませんが。
Satoshi Nakajima
ナカジマです。的外れなフォロウでなければ良いですが (^^;
関数の引数のスコープに関して調べてみました。
http://www5a.biglobe.ne.jp/~n_rieko/javascript/8.htm
/* 引用ココヨリ
NetscapeNavigatorではvarを使い宣言した場合その変数は宣言された場所に限らず全てグ
ローバル変数になります。逆に言えばNetscapeNavigatorでは関数の中でvarを付けないで
宣言した変数以外全てグローバル変数となります。
InternetExploreでは関数の中で宣言した変数は全てその関数のみのローカル変数となり
ます。関数の外で宣言した変数は全てグローバルな変数となります。
引用ココマデ */
とのことですので、kounoikeさんの書かれたいずれの関数においても、i はグローバル変
数（関数外からも参照可能）となるようです。
kounoikeさんの関数のうち、増減式が「incre()」「incre1()」の使い方は、i がグロー
バル変数であることを前提として、関数内で変化した i を参照する形で書かれています
し、また、「i = incre()」の使い方も、関数に引数がないことから、i がグローバル変
数であることを暗黙に要求しています。
その意味では「これが正常な動作」であると言っていいのではないでしょうか。（i が
ローカル変数であった場合には動作しない「仕様」で書かれている、というのは、この場
合、関数の中のみ i を j で置き換えた場合に作動しないという意味です。）
<koun...@mbh.nifty.com> wrote
in message news:bs6p8o$osf$1...@news511.nifty.com...
：
：
T. Sugita
In message news:bs6p8o$osf$1...@news511.nifty.com
<koun...@mbh.nifty.com> wrote ...
> ただ，次のようなものも一応動くようですが，これが正常な動作と
> 言い切れるような var i のスコープについて明確に記載されたもの
> はあるのでしょうか。（ちょっと調べたけど見つけれませんでした。）
ECMA-262 のスコープって、あちこちに書いてあるんですよね。
たぶん関連するのは
10.1.3
10.1.4
10.2.*
12.2
13
あたりかな？・・・(英語なので、？付き(^^;;)
JavaScript のスコープはブロックスコープではないですし、
変数領域は動的に確保(生成)されるわけで、this を意識して、
継承時のプロパティと同じで、遡ってその領域をアクセスする
という考え方で良いのではないかと思います。
koun...@mbh.nifty.com
news:bs8vke$msl$1...@news00.iij4u.or.jp...
> ECMA-262 のスコープって、あちこちに書いてあるんですよね。
> たぶん関連するのは
> 10.1.3
> 10.1.4
> 10.2.*
> 12.2
> 13
> あたりかな？・・・(英語なので、？付き(^^;;)
ナカジマさん，杉田さん情報ありがとうございます。で，至った結論は，forにおけ
るvar iは使用される場所により，グローバルにもなるし，function localでもある
ということですかね。というのも，下の場合increout() の変数 i が宣言されていな
い状態のようなので。
ともかく，ECMA-262の規格ってよう分からんというのが正直な感想です。（もっと分
かりやすくそれぞれの説明に例でも付けてくれればいいのに。この規格の解説書みた
いなのは無いのかな。）インタープリター言語の中でも，もやもやとしたはっきりし
ない仕様（私にとって）に思えて仕方ない。言語構造を理解した上で使うには相当難
しいと感じます。読めば読むほど，分からなくなる私にとっては厄介な言語です。
var x = new Array('0','1','2','3','4','5','6','7','8','9');
fortest();
function fortest() {
function increin() {
do
i++;
while (!(i < 5 || i >= 7))
return i;
}
document.write('------increin()-------' + '<BR>');
for(var i = 2; i < x.length; increin()) {
document.write(x[i] + '<BR>');
}
document.write('------increout()-------' + '<BR>');
for(var i = 2; i < x.length; increout()) {
document.write(x[i] + '<BR>');
}
}
function increout() {
do
i++;
while (!(i < 5 || i >= 7))
return i;
}
--
******************************
keizi kounoike
******************************
Satoshi Nakajima
<koun...@mbh.nifty.com> wrote in message news:bsbsi8$b7i$1...@news511.nifty.com...
> ともかく，ECMA-262の規格ってよう分からんというのが正直な感想です。（もっと分
> かりやすくそれぞれの説明に例でも付けてくれればいいのに。この規格の解説書みた
> いなのは無いのかな。）インタープリター言語の中でも，もやもやとしたはっきりし
> ない仕様（私にとって）に思えて仕方ない。言語構造を理解した上で使うには相当難
> しいと感じます。読めば読むほど，分からなくなる私にとっては厄介な言語です。
kounoike さんの書かれる関数「increin()」「increout()」ともに、「return i」で変数
i を返す形で書いておきながら、実行の段階では、「i = （関数）」とせずに、単に関数
を実行している点で、仕様外の書き方かな、と感じてしまうところはあります。変数がグ
ローバルであることを期待して、関数の実行により変数を変化させておいてそれを外から
参照しようとしているなら、return 文が意味を為さないと思うのです。
もともと「もやもやとしたはっきりしない仕様」なのは、そういう仕様なのだからしよう
がないのでしょうが、僕はその辺のようわからんところは諦めてしまって、始めから変数
がローカルであるものとして書いておけばブラウザが変わったりしてもまあ大丈夫かなと
いうのが僕の思うところです。（変数がグローバルだと動作が変わってしまうような場面
があったとして、その時は別の文字で書いておけば大丈夫でしょうし。）
kounoike さんはきっとお判りの上で、動かないソース例を挙げられたのでしょうが、念
のため、動く（はずの）ソースも書いておきます。ローカル変数であることを強調して、
k, j を使っていますが、i で書いても動くはずです。
var x = new Array('0','1','2','3','4','5','6','7','8','9');
fortest();
function fortest() {
function increin(k) {
do
k++;
while (!(k < 5 || k >= 7))
return k;
}
document.write('------increin()-------' + '<BR>');
for(var i = 2; i < x.length; i=increin(i)) {
document.write(x[i] + '<BR>');
}
document.write('------increout()-------' + '<BR>');
for(var i = 2; i < x.length; i=increout(i)) {
document.write(x[i] + '<BR>');
}
}
function increout(j) {
do
j++;
while (!(j < 5 || j >= 7))
return j;
}
T. Sugita
In message news:bsbsi8$b7i$1...@news511.nifty.com
<koun...@mbh.nifty.com> wrote ...
> ナカジマさん，杉田さん情報ありがとうございます。で，至った結論は，forにおけ
> るvar iは使用される場所により，グローバルにもなるし，function localでもある
> ということですかね。
for における var i に限ったことではなく、
var i がグローバルに現れると、global に生成される。
var i が関数の中に現れると、その関数内で local scope が生成される。
(ローカルにメモリが確保される)
block scope ではないので、新たな関数内でなければ、複数回現れると、
新たに生成(と開放)され、スコープ範囲は同じ範囲となる。
i を使用する際、ローカルスコープに無ければ、最大、グローバルまで
遡って検索する。
(例の increout() だと、グローバルには i は無いのでエラーで止まっている)
ということじゃないかと思います。
ローカルに記述した変数へのアクセスに関しては、new を使った際に
結構便利で、よく利用されますよね。
# あまり適切ではありませんが・・・
function Obj() {
var s = 0;
this.init = function (v) {
s = v;
}
this.add = function (v) {
s += v;
}
this.print = function () {
alert(s);
}
}
var x = new Obj();
x.init(0);
x.add(1);
x.print();
for (var i= に限っていないという点は、block scope でないことから、
test();
function test() {
var i = 10;
{
var i = 20;
alert(i); // 20
}
alert(i); // 20
}
となりますよね。つまり、
var i;
for (i=
と考えても同じではないかと思います。
> ともかく，ECMA-262の規格ってよう分からんというのが正直な感想です。
たしかに。
せめて日本語だとありがたいところです。(^^;;
Satoshi Nakajima
いろいろ勉強になります。
"T. Sugita" <nws-...@bp.iij4u.or.jp> wrote in message
news:bscgfp$f07$1...@news00.iij4u.or.jp...
>for における var i に限ったことではなく、
>var i がグローバルに現れると、global に生成される。
>var i が関数の中に現れると、その関数内で local scope が生成される。
>(ローカルにメモリが確保される)
>block scope ではないので、新たな関数内でなければ、複数回現れると、
>新たに生成(と開放)され、スコープ範囲は同じ範囲となる。
>i を使用する際、ローカルスコープに無ければ、最大、グローバルまで
>遡って検索する。
（現象から理解する限り :-）
「i を使用する際、ローカルスコープに（＝同じオブジェクト内（関数内）で var 文が
明示されて）無ければ、最大、グローバルまで遡って（var 文を）検索する。」
ということですよね？
先日引用したウェブサイトの情報「NetscapeNavigatorではvarを使い宣言した場合その変
数は宣言された場所に限らず全てグローバル変数になります。」は、これに矛盾するので
す。もしこの情報が正しければ、kounoike さんの書かれたソースで、i はすべてグロー
バルに扱われるはずですが、NN7.0では、そのように動作せず、IEと同様、宣言のあった
オブジェクトの階層でのローカル変数としてしか扱われていないようです。
こういうブラウザやバージョンに依存したりするような末端でのお話は、本質的には「本
来の仕様はどうであるか」ということとは無関係なのですが。まあ、使う方にとっては意
味もないわけではないことですし。;-p
以下は、ie6.0/win98 での動作の確認をした時のソースと結果で、ほんの蛇足です。
// kounoike さんオリジナル。28行だけ付け足した。
/*01*/ var x = new Array('0','1','2','3','4','5','6','7','8','9');
/*02*/
/*03*/ fortest();
/*04*/
/*05*/ function fortest() {
/*06*/ function increin() {
/*07*/ do
/*08*/ i++;
/*09*/ while (!(i < 5 || i >= 7))
/*10*/ return i;
/*11*/ }
/*12*/
/*13*/ document.write('------increin()-------' + '<BR>');
/*14*/ for(var i = 2; i < x.length; increin()) {
/*15*/ document.write(x[i] + '<BR>');
/*16*/ }
/*17*/
/*18*/ document.write('------increout()-------' + '<BR>');
/*19*/ for(var i = 2; i < x.length; increout()) {
/*20*/ document.write(x[i] + '<BR>');
/*21*/ }
/*22*/ }
/*23*/
/*24*/ function increout() {
/*25*/ do
/*26*/ i++;
/*27*/ while (!(i < 5 || i >= 7))
/*28*/ document.write('iout='+i+'<br>') // つけ足した。
/*29*/ return i;
/*30*/ }
/*実行結果(1)
increout() が変数 i を見つけられない。
------increin()-------
2
3
4
7
8
9
------increout()-------
2
*/
// ◎ 02行に「グローバルな i 」を導入
/*02*/ var i=1;
/*実行結果(2)
increout()の階層では i が変化しているが、
fortest()内の i は変化していない。
（fortest() 内に、ローカル変数 i
のメモリが確保されている。）
------increin()-------
2
3
4
7
8
9
------increout()-------
2
iout=2
2
iout=3
2
iout=4
2
iout=7
2
iout=8
2
iout=9
2
iout=10
2
iout=11
2
iout=12
2
iout=13
2
iout=14
2
iout=15
2
iout=16
2
：
（無限ループ）
*/
// ◎ 14行、19行の変数宣言 var を省略
/*14*/ for( i = 2; i < x.length; increin()) {
/*19*/ for( i = 2; i < x.length; increout()) {
/*実行結果(3)
fortest() 内のローカル変数 i
は確保されず、上の階層の i を流用する。
------increin()-------
2
3
4
7
8
9
------increout()-------
2
iout=3
3
iout=4
4
iout=7
7
iout=8
8
iout=9
9
iout=10
*/
// ◎ 確認
// 02行の省略
/*02*/ //var i=1;
/*実行結果(4) ＝実行結果(3)と同じ
実行結果(1)と比較してやると、14行目、19行目で、
「階層内にvar文がないために」上の階層の i を流用する。
一番上の階層でのみ、var文は省略されても同じ意味となる。
koun...@mbh.nifty.com
> kounoike さんの書かれる関数「increin()」「increout()」ともに、「return i」
で変数
> i を返す形で書いておきながら、実行の段階では、「i = （関数）」とせずに、単
に関数
> を実行している点で、仕様外の書き方かな、と感じてしまうところはあります。変
数がグ
> ローバルであることを期待して、関数の実行により変数を変化させておいてそれを
外から
> 参照しようとしているなら、return 文が意味を為さないと思うのです。
ナカジマさん，こんちわ。returnで値を返す関数を利用する場合，呼び出し側でその
値を利用しなければならないと言うような仕様上の制限はないと思います。変数のス
コープを調べたかったので，初めからreturn 文には何の意味も持たせていません
し，引数も与えていません。
> kounoike さんはきっとお判りの上で、動かないソース例を挙げられたのでしょう
が、念
> のため、動く（はずの）ソースも書いておきます。ローカル変数であることを強調
して、
> k, j を使っていますが、i で書いても動くはずです。
>
関数に引数渡しで，リターン値を利用するのでは上にも書いたようにスコープとは何
の関係も無くなるので，意図的に普通じゃない使い方をしました。そうでなければ，
ナカジマさんが下に書いたような関数の書き方が普通の書き方ですが。まあ，引数に
関しては値渡しなので引数の記号が゜k, j, i, だろうが元のiとは何の関係もないの
でなんであろうと動くのは自然だと思います。
> function increout(j) {
> do
> j++;
> while (!(j < 5 || j >= 7))
> return j;
> }
--
******************************
keizi kounoike
******************************
ku...@gssm.otsuka.tsukuba.ac.jp
naka...@chem.gunma-ct.ac.jpさん:
> 先日引用したウェブサイトの情報「NetscapeNavigatorではvarを使い
> 宣言した場合その変数は宣言された場所に限らず全てグローバル変数
> になります。」は、これに矛盾するのです。もしこの情報が正しけれ
> ば、
なんすか、その大嘘サイトは? 次のHTMLをNetscape Navigator
4.78/Unix で実行してみましたがもちろん「10」が2回表示されますよ。
だいたいNetscape Navigatorに搭載されているJavaScript 1.1～1.2あ
たりを土台にECMA-262が作られたんだからこんな根幹部分が違うわけは
ないです。
大嘘サイトは沢山あるけどそんなモロなのは珍しい。 久野
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>???</title>
</head><body>
<pre><script type="text/javascript">
var x = 10;
function f1() { var x = 20; }
document.writeln(x);
f1();
document.writeln(x);
</script></pre>
</body></html>
Satoshi Nakajima
<koun...@mbh.nifty.com> wrote in message news:bse5p2$8ug$1...@news511.nifty.com...
> ナカジマさん，こんちわ。returnで値を返す関数を利用する場合，呼び出し側でその
> 値を利用しなければならないと言うような仕様上の制限はないと思います。変数のス
> コープを調べたかったので，初めからreturn 文には何の意味も持たせていません
> し，引数も与えていません。
:
仰有る通りだと思います。ちょっと読み返してみたら、僕の投稿の書き方はちょっと決め
つけっぽいですね。大変失礼しました。 m(__)m
自分でもいろいろ試したり、kounoike さんをはじめ、みなさんの記事を読んだりしなが
ら、非常に勉強になっています。今後ともよろしくお願いします。
T. Sugita
In message news:bse4qh$n...@utogw.gssm.otsuka.tsukuba.ac.jp
<ku...@gssm.otsuka.tsukuba.ac.jp> wrote ...
> なんすか、その大嘘サイトは? 次のHTMLをNetscape Navigator
> 4.78/Unix で実行してみましたがもちろん「10」が2回表示されますよ。
もしかしたら、大ーーー昔、そんな仕様のものがあったのだろうか
とも考えていたのですが、考えてみると Copyright (C) 2000-2001
なので、そんなに古い話でもないということに気づきました。
NN2 を入れるのはちょっと怖いので、NN3 の資料をみると、
Copyright (C) 1995-1996 Netscape Communications Corporation
http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ident.htm#1004248
| When you set a variable identifier by assignment outside of a function,
| it is called a global variable, because it is available everywhere
| in the current document. When you declare a variable within a function,
| it is called a local variable, because it is available only within the
| function. Using var is optional, but you need to use it if you want to
| declare a local variable inside a function that has already been declared
| as a global variable.
とありますので、NN3 でも 10 が 2 回表示されそうです。