Console Program

コンソールモードで JavaScript の基本を説明します。
document.write で吐き出されたテキストがブラウザに渡されて、新しいページに表示されます。
ページ全体のソースコードは、右クリックから ソースの表示(V) で確認することが出来ます。
  1. con_100.html
    1~100までの合計を計算します。
    変数は宣言する必要は無く、数値と文字列などの区別はありません。
    <br> は HTML 文の改行で、\n はテキスト表示の改行です。
    document.write の「+」は文字列を結合する演算子です。
    <script>
    sum= 0;
    for(i=1; i<101; i++)
    {   sum= sum +i;  }
    document.write("1~100までの合計 : " + sum + "<br>\n");
    </script>
    
  2. document.write には、配列や構造体も指定できます。

  3. con_sosu.html
    50以下の素数を印字します。
    Math.floor(n/2) で小数点以下を切り捨てます。
    n を割り切ることが出来る最大の値(i)を求めて「i==1」なら素数です。
    <script>
    for(n=2; n<50; n++)
    {   for(i=Math.floor(n/2); n%i!=0; i--);
        if (i==1)   document.write("素数 : " + n + "<br>\n");
    }
    </script>
    

  4. con_pai.html
    円に内接する正方形から始めて、円周率の近似値を求めて印字します。
    円周率の近似値の計算は 円周率の話 を参照して下さい。
    ちなみに円周率の最初の部分は、次のようになります。
    3.1415 9265 3589 7932
    
    <script>
        k= 4;
        l= Math.sqrt(2);
        for(i=0; i<10; i++)
        {   document.write("正" + k + "角形    ");
            document.write("円周率 : " + l*k/2 + "<br>\n");
            w= l/2;
            lw= w*w;
            h= Math.sqrt(1-lw);
            hw= 1-h;
            l= Math.sqrt(hw*hw+lw);
            k= k+k;
        }
    </script>
    

  5. con_string.html
    ' と " はどちらも同じで、' の中で引用符を使うときは " で囲みます。
    文字列(str) を定義して、「AA」を「A」に置き換えて印字します。
    幾つかの A の並びから最初の AA だけが A に置き換えられています。
    次は「B」を「*」に置き換えて印字します。
    /B+/gi は 複数個並んだ B を意味する正規表現です。
    i フラグを指定すると大文字小文字を区別しなくなります。
    g フラグを指定すると最初にマッチした部分に加え、2番目、3番目...にマッチした部分にも適用されます。
    幾つかの B の並びが、全て * に置き換えられています。
    <script>
    var str= " A, AA, AAA, AAAA, AA, aaa, BB, BBB, bbb, bbbb"
    document.write(str + "<br>\n");
    var ans= str.replace("AA", "A");
    document.write(ans + "<br>\n");
    var ans= str.replace(/B+/gi, "*" );
    document.write(ans + "<br>\n");
    </script>
    
  6. string から一文字取り出すには string.charAt(n) を使います。
    chr= str.string.charAt(0); で先頭の空白を取り出します。
    部分文字列の取り出しは substr() を使います。
    wk= str.substr(4,3) で "AA," を取り出します。

  7. con_split.html
    文字列(str) を定義して document.write で印字します。
    document.write で吐き出した HTML テキストは、複数の半角スペースは一個になります。
    文字列(str)を「,」で切り分けて配列にします。
    reverse() で配列を逆順に並び替えます。
    並び替えた配列を join() でつなぎ合わせて文字列(ans)に格納して印字します。
    一行で書いているのでわかり難いと思いますが、行を分けて確かめて下さい。
    <script>
    var str= " A,  BB,   CCC,     DDDD"
    document.write(str + "<br>\n");
    var ans= str.split(",").reverse().join("");
    document.write(ans + "<br>\n");
    </script>
    

  8. con_gcm.html
    gcm() 関数(メソッド)を定義して、タイプ入力した DATA-1 と DATA-2 の最大公約数(GCM) を印字します。
    GCM(最大公約数), LCM(最小公倍数)の説明は Gcm Lcm の説明 を参照して下さい。
    var で宣言した領域は関数内でのみ有効で、宣言しない領域はプログラム全体で有効です。
    関数内で使用するローカル変数は var で宣言すべきです。
    変数には数値と文字列の区別が無いので、parseInt() で明白に int に変換しています。
    <script>
    function gcm(n, m)
    {   var wn = parseInt(n);     //値1
        var wm = parseInt(m);     //値2
        while(wn!=wm)
        {   if (wn>wm)  wn -= wm;
            else        wm -= wn;
        }
        return wn;
    }
        d1 = prompt("DATA-1 を入力してください");
        d2 = prompt("DATA-2 を入力してください");
        document.write("GCM(" + d1 + ", " + d2 + ") は= " +gcm(d1,d2) + " です。<br>\n");
    </script>
    

  9. con_array.html
    配列は Array で定義します。
    Array クラスのソートメソッドで昇順に並べて印字します。
    数値では無く、先頭の文字の大きさでソートされていることを確認して下さい。
    <script>
      num = new Array(56, 9, 789, 1234);
      //Array の sort() メソッドを使う 
      num.sort();
      document.write(num + "<br>");
    
      //ソートの比較関数を定義する
      num.sort(function(a,b){ return a-b; } );
      window.alert("数値で比較 : " + num);
      document.write(num + "<br>");
    </script>
    
    数値のときは比較関数を定義します。
      //ソートの比較関数を定義する
      num.sort(function(a,b){ return a-b; } );
      window.alert("数値で比較 : " + num);
      document.write(num + "<br>");
    </script>
    
  10. Javascript でデバッグの頼りになるのは document.write() と window.alert() でしょうか。
    どちらも配列や構造体の変数も指定できます。

  11. con_sort.html
    実数をタイプ入力して、func() 関数で降順にソートします。
    降順ソートでは比較関数(compareFunc)を定義して下さい。
    データ件数は最大10件で、ゼロがタイプされるとデータの終わりです。
    タイプされたデータを Number() 関数で数値に変換しています。
    ary[i]= d; のように、添え字を付けて参照したり追加することが出来ます。
    <script>
    function compareFunc(a, b)
    {   return b - a;
    }
    function func(ary)
    {   ary.sort(compareFunc);
    }
        var i;
        ary= new Array();
        for(i=0; i<10; i++)
        {   var d = prompt("DATA を入力してください");
            d = Number(d);
            if (d==0)   break;
            ary[i]= d;
        }
        func(ary);
        for(i=0; i<ary.length; i++)
        {   document.write("ary[" + i + "] 番目は : " + ary[i] + " です。<br>\n");
        }
    </script>
    
  12. 配列の末尾に追加する関数を使うことも出来ます。
    ary.push(d); で末尾に追加されます。
    配列の先頭に追加するときは unshift() を使います。
    先頭を削除するときは shift() で、末尾を削除するときは pop() です。

  13. con_rensou.html
    連想配列とは、キーになる文字列とその値を対で定義した配列です。
    連想配列 ary を定義して、イニシャルと名前を格納します。
    for(key in ary) で、配列 ary に格納されている名前を印字します。
    document.write() では「+」に代えて「,」を使うことも出来ます。
    <script>
    var ary= new Array();
    ary["ST"]= "Suzuki Tarou";
    ary["TH"]= "Tanaka Hanako";
    ary["YK"]= "Yamada Kouji";
    ary["AK"]= "Ayase Keiko";
    
    for(key in ary)
    {   var name = ary[key];
        document.write(key, ": ", name, "<br>\n");
    }
    </script>
    

  14. con_rensoufunc.html
    glcm() 関数では GCM と LCM を計算して、連想配列でリターンします。
        return {gcm:wn, lcm:lcm};
    
    関数を呼び出して、リターンされた値を受け取るソースコードです。
        var {gcm, lcm}= glcm(d1, d2);
    
    <script>
    function glcm(n, m)
    {   var wn = parseInt(n);     //値1
        var wm = parseInt(m);     //値2
        while(wn!=wm)
        {   if (wn>wm)  wn -= wm;
            else        wm -= wn;
        }
        var lcm = n*m/wn;
        return {gcm:wn, lcm:lcm};
    }
        var d1 = prompt("DATA-1 を入力してください");
        var d2 = prompt("DATA-2 を入力してください");
        onload = function()
        {   var {gcm, lcm}= glcm(d1, d2);
            document.write("DATA-1:", d1, " DATA-2:", d2,
                "<br>\nGCM:", gcm, " LCM:", lcm);
        }
    </script>
    
  15. 普通の配列でリターンするプログラムは GCM と LCM を返す関数 を参照して下さい。

  16. con_class.html
    gcmlcm Class を定義します。
    var cls = new gcmlcm(); で gcmlcm Class を生成します。
    this は現在(gcmlcm が呼ばれたとき)のインスタンスです。
    this.nm は n と m の積を保存する領域です。
    this.gcm, this.lcm, this.disp は gcmlcm クラスの内部関数です。
    cls.gcm() と cls.lcm() で最大公約数と最小公倍数を求めて印字します。
    cls.disp() で GCM と LCM のメッセージを取得して印字します。
    <script>
    function gcmlcm()
    {   this.nm;
        this.gcm = function(n, m)
        {   var wn = parseInt(n);   //値1
            var wm = parseInt(m);   //値2
            while(wn!=wm)
            {   if (wn>wm)  wn -= wm;
                else        wm -= wn;
            }
            return wn;
        }
        this.lcm = function(n, m)
        {   this.nm= parseInt(n)*parseInt(m);
            return this.nm/this.gcm(n, m);
        }
        this.disp = function(n, m)
        {   var str= "GCM(" + n + ", " + m + ")=" + this.gcm(n,m) +
                     " : LCM(" + n + ", " + m + ")=" + this.lcm(n,m) + "<br>\n";
            return str;
        } 
    }
        var cls = new gcmlcm();
        d1 = prompt("DATA-1 を入力してください");
        d2 = prompt("DATA-2 を入力してください");
        document.write(cls.gcm(d1, d2) + "<br>\n");
        document.write(cls.lcm(d1, d2) + "<br>\n");
        document.write(cls.disp(d1, d2) + "<br>\n");
    </script>
    

  17. con_TextFile.html
    Text File を入力します。
    form から type="file" でファイルを選択します。
    obj1.addEventListener() でファイルが選択されたことを知り、reader.readAsText(file[0]); で入力します。
    file[] は複数のファイルが扱えるように配列になっています。
    一個のときは file[0] を指定します。
    複数のファイルの扱いは File Copy を参照して下さい。
    <form name="test">
    <input type="file" id="selfile" /><br/>
    </form>
    
    <script type="text/javascript">
    var obj1 = document.getElementById("selfile");
    
    //ダイアログでファイルが選択された時
    obj1.addEventListener("change",function(evt)
    {   var file = evt.target.files;
        var reader = new FileReader();
        reader.readAsText(file[0]);
      
        //読込終了後の処理
        reader.onload = function(ev)
        {   window.alert(reader.result);  }
    },false);
    </script>
    

  18. con_GetArray.html
    Text File から二次元データを入力して Array に格納します。
    form から type="file" でファイル(Array.txt)を選択します。
    obj1.addEventListener() でファイルが選択されたことを知り、reader.readAsText(file[0]); で入力します。
    Text File の入力は con_TextFile.html を参照して下さい。
    <form name="test">
    <input type="file" id="selfile" /><br/>
    </form>
    
    <script type="text/javascript">
    var obj1 = document.getElementById("selfile");
    
    //ダイアログでファイルが選択された時
    obj1.addEventListener("change",function(evt)
    {   var file = evt.target.files;
        var reader = new FileReader();
        reader.readAsText(file[0]);
      
        //読込終了後の処理
        reader.onload = function(ev)
        {   var str= reader.result;
            arr= new Array(); 
            var w1= str.split("\n");
            window.alert(w1);
            for(var i=0; i<w1.length; i++)
            {   if (w1[i].length<4) continue;
                var w2= w1[i].replace(" \r", ""); 
                var w2= w2.split(" ");
                arr.push(w2);
            }
            for(var i=0; i<arr.length; i++)
            {  for(var j=0; j<arr[i].length; j++)
               {   document.write(i + "," + j + "=" + arr[i][j] + " ");
               }
               document.write("<br>\n");
            }
        }
    },false);
    </script>
    
  19. 二次元データがタイプされている Array.txt を入力して下さい。
    UTF-8 の BOM 無しでタイプされ、改行コードは \r\n です。
    4 4 3 
    4 1 2 4 
    4 2 3 1 5 
    2 2 4 5 7 
    1 2 2 2 5 4 
    2 4 2 4 1 3 
    5 2 5 1 1 
    2 2 1 2 3 1 
    4 2 4 5 
    4 2 2 3 3 
    
  20. arr= new Array(); が二次元配列の定義です。
    var str= reader.result; でデータを入力して、str.split("\n"); で切り分けて配列 w1 に格納します。
    w1 の配列を一行ずつ処理するのですが、長さが4未満(改行コードだけ)の行は切り捨てます。
    w1 には行末の空白と "\r" が残っているので、" \r" を削除して w2 に格納します。
    w2.split(" "); で空白で切り分けて配列 arr に追加します。
    完成した二次元配列 arr を添え字で参照して印字しています。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)