<script type="text/javascript" charset="Shift_JIS">

function Punctuate(){
   var Input,Out,InputLegth,Remainde,Floor,Extract,Decrement,Minority; //変数宣言

   Decrement=0;   //初期値設定
   Out="";        //初期値設定

   Input=document.form1.text1.value;   //テキストフォームから入力を変数Inputに入れる
   InputLegth=Input.length;            //入力された文字数を変数InputLegthに入れる
   Remainde=InputLegth/3;              //その文字数を3で割った数を変数Remaindeに入れる
   Floor=Math.floor(Remainde);         //文字数を小数点以下を切り捨てた値を変数Floorに入れる
   Minority=String(Remainde).charAt(2);//文字数を3で割った数の小数点第一位の値を変数Minorityに入れる

   //↓このfor文で数値を３つに区切っていき先頭に , を付けていく
   for(i=0;i<Floor;i++){
      Extract=Input.substring(InputLegth+Decrement,InputLegth+(Decrement-3));
                                                   //↑文字を３つずつ区切っていく
      Out=","+Extract+Out;      //先頭に , を付けて前回区切った数値を結合する

      Decrement-=3;             //変数を３つずつ減らしていく
   }

   //↓この条件分岐で数値の先頭に , がつかないように処理を行う
   if(Minority==0){                     //小数点1位の値が0だった場合(先頭が3個だった場合)
      Out=Out.replace(",","");          //先頭の , を切り取る
   }else if(Minority==6){               //小数点1位の値が3だった場合(先頭が2個だった場合)
      Out=Input.substring(0,2)+Out;     //変数Inputから先頭の１文字を抜き出し変数Outにくっつける。
   }else if(Minority==3){               //小数点1位の値が3だった場合(先頭が1個だった場合)
      Out=Input.substring(0,1)+Out;     //変数Inputから先頭の２文字を抜き出し変数Outにくっつける。
   }

   document.form1.text2.value=Out;      //出力に変数Outの値を出力する
}

</script>

<form name="form1">
   入力<input type="text" size="20" name="text1"><br>
   出力<input type="text" size="20" name="text2">

   <input type="button" name="button1" value="変換" onClick="Punctuate()">   //関数Punctuate()を実行する
</form>

[解説]

Level.3 では比較的簡単なサンプルを解説していきます。

さぁ、ちょっと長いプログラムですけど流れとしては簡単です。

このプログラムの流れとしては

1. 数値の文字数を出す
2. この文字数を３わって小数点以下切り捨てる、これがコンマの数となる
3. 後ろから３つ数値を抜き出す
4. 抜き出した数値の先頭に , を付ける
• コンマの数だけ3と4をループする

これがこのプログラムの流れです、やってることはやっぱり簡単なのです。

文字数を3で割り切れなかった場合の処理方法
まず、文字数を3でわる、これで小数点以下の値は0か3か6のどれかとなる。
0の場合は最後のコンマのあとに３つ文字が入る時
3の場合は最後のコンマのあとに２つ文字が入る時
6の場合は最後のコンマのあとに１つ文字が入る時
となるのでこれをif文で行って処理を行っていきます。

では、細かい解説にいきます。

今回新しく使っているのはいろいろありますが解説しながら説明していきたいと思います。

var Input,Out,InputLegth,Remainde,Floor,Extract,Decrement,Minority;
は変数宣言です。varというのが新しく変数を使うよ、っていってくれるものです。 ２つ以上使うときは , で区切っていきます。

実はこのvarは省略可能で今まで使っていなかったんですけど今回から入れていくことにしました。 どうもこちらを使った方がプログラムの確実性がますそうなのです。

Input=document.form1.text1.value;
ではフォームの入力された数値を変数Inputに入れてます。

InputLegth=Input.length;
で、入力された文字数を変数InputLegthに入れてます。

***.length

***の文字数を返します。"123456".lengthだったら6を返します。

Remainde=InputLegth/3;
で、その文字数を3で割った数を変数Remaindeに入れてます。

Floor=Math.floor(Remainde);
で、文字数を小数点以下を切り捨てた値を変数Floorに入れる。3.333とか3.666でも3になります。

Minority=String(Remainde).charAt(2);
で小数点第一位の数を抜き出す。

String(***)

***を文字列に変換する命令です。A=String(123123)はA="123123"と同じコトです。

***.charAt(x)

***のx番目の文字を返します。"01234".charAt(2)だったら 1 を返します。

for(i=0;i<Floor;i++){
   Extract=Input.substring(InputLegth+Decrement,InputLegth+(Decrement-3));
   Out=","+Extract+Out;
   Decrement-=3;
};

で、このfor文で数値を３つに区切っていき先頭に , を付けていく作業を行っています。 この説明では 1234567890 が与えられた数値として説明していきます。

このループは Floor の数だけループします。

***.substring(x,y)

xからy番目の数を抜き出します。"123456".substring(3,5)だったら45を抜き出す。

Extract=Input.substring(InputLegth+Decrement,InputLegth+(Decrement-3));
これで後ろから３つ数値を抜き出しています。
最初はInputLegthが 10 Decrementが 0 、つまりInput.substring(10,7)となっている。 1234567890 だったら後ろの3つ、つまり 890 が抜き出される。

Out=","+Extract+Out;
これでさっき抜き出された 890 の先頭に , がついて ,890 となる

Decrement-=3;
はDecrement=Decrement-3と同じコトです。

これがループの１回目の流れ。
２回目はDecrementが-3となっていて
Extract=Input.substring(InputLegth+Decrement,InputLegth+(Decrement-3));
はInput.substring(7,4)となっている。 これで 567 が抜き出される。
Out=","+Extract+Out;
で ,567 となってさっきの,890がくっついて ,567,890 となる。

３回目はDecrementが-6となって Input.substring(3,0)となり234が抜き出される。
Out=","+Extract+Out;
で ,234 になって ,567,890 とくっついて ,234,567,890 となる。

これでループを抜ける。

if(Minority==0){
   Out=Out.replace(",","");
}else if(Minority==3){
   Out=Input.substring(0,1)+Out;
}else if(Minority==6){
   Out=Input.substring(0,2)+Out;
};

↑文字数を3で割った数の小数点第一位の値によって条件分岐させています。

Minority==0の場合は
Out.replace(",","")で先頭に , がついているので , をとってる(正確には置換)しています

***.replace("x","y")

xを検索してyに置換(置き換える)をする命令です。"012345".replace("3","1")だったら 012145 となります。

Minority==6の場合は先頭の数値が2つになるので、
Out=Input.substring(0,2)+Outで入力された数値の先頭の２つを抜き出してループで出した値にくっつける。

Minority==3の場合は先頭の数値が1つになるので、
Out=Input.substring(0,1)+Outで入力された数値の先頭の１つを抜き出してループで出した値にくっつける。

今回の解説の場合ではMinority==3になるので 最初の一文字、 1 を抜き出してくっつけるので 1,234,567,890 となります。

document.form1.text2.value=Out;
でテキストフォームの出力に出力しています。

あとはフォームの
<input type="button" name="button1" value="変換" onClick="Punctuate()">
を押すことで実行してくれます。

どうでしょうか、結構解説がややこしいかもしれません。 自分でもよくわかんなくなってきちゃった(汗

解説していて思ったんですけどこれは正規表現を使えばもっとスマートに出来たかも。 変数も1個ですんだかもしれない可能性が^^;