#1. はじめに
今回はJavaScriptについて記載する．
JavaScriptはHTMLのbodyタグに埋め込む．

ソースファイルはHTMLで保存すること．
例：index.html

面倒なので，bodyタグより外側は省略する．

実行結果は記載しない．
本記事では記述パターンを複数書くため統一性がないが，実際はなるべく統一して書くこと．

#2. ソースコード
##2.1. 基本構文

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
</head>
<body>
    ブラウザに表示される内容<br>
    <script type="text/javascript">
        document.write("この部分はJavaScriptによる出力");
    </script>
</body>
</html>

##2.2. 開始と終了

index.html

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

HTML5からは<script type="text/javascript">の部分を，下のように<script>と省略して表記することができる．

index.html

<script>
</script>

##2.3. ステートメント（文）
ステートメントはセミコロン;で終わる

index.html

<script>
    document.write("文字列を表示その1");
    document.write("<br>");
    document.write("文字列を表示その2");
</script>

次のようにも記述できる．

index.html

<script>
    document.write("文字列を表示その1");
</script>
<br>
<script>
    document.write("文字列を表示その2");
</script>

##2.4. コメント（注釈）

index.html

<script>
    /*
      複数行に渡るコメント
      複数行に渡るコメント
    */

    // 1行コメント

    document.write("コメントは表示されません");
</script>

##2.5. コンソール表示

主にデバッグ（バグの取り除き）のために用いる．変数の値の変化などをこれで知ることが可能．

index.html

<script>
    console.log("コンソールに表示");
</script>

##2.6. 変数

変数名は文字（アルファベット）かアンダースコア_で始まる．
数字で始まる変数名は不可．
大文字，小文字は区別される．

以下に記す変数の種類の使い分けについてはスコープやオブジェクトの概念が関わってくるが，詳しくはここでは触れない．

###2.6.1. 再定義可能変数
再定義（再宣言）可能な変数を定義するには，varを用いる．

index.html

<script>
    var a=10;    // 変数aの定義
    var b=5;     // 変数bの定義
    var c=7,d=1; // 複数の変数を一度に定義

    var a=3;     // 変数aの再定義
</script>

###2.6.2. 再定義不可能変数
再定義（再宣言）不可能な変数を定義するには，letを用いる．

index.html

<script>
    let a=10; // 変数aの定義
    let b=5;  // 変数bの定義

    let a=3;  // 変数aの再定義を試みるとエラー発生
    a=3;      // 再代入は可能
</script>

###2.6.3. 再代入不可能変数
再定義のみならず再代入も不可能な変数を定義するには，constを用いる．

index.html

<script>
    const a=10; // 変数aの定義
    const b=5;  // 変数bの定義

    const a=3;  // 変数aの再定義を試みるとエラー発生
    a=3;        // 変数aの再代入を試みてもエラー発生
</script>

##2.7. 型
変数定義の際，明示的な型宣言を必要としない．
例えば変数aに文字列を代入すればaの型は文字列に，整数値を代入すれば整数に自動的に決定される．

index.html

<script>
    var a="文字列"; // 文字列は ダブルクォート " で囲う
    var b=10;

    // 変数の内容表示
    document.write(a);
    document.write("<br>");
    document.write(a);
</script>

##2.8. 配列
一つの変数に複数の値を保持するための仕組み．
キー（添え字）はゼロ（0）から始まる．

index.html

<script>
    var a = new Array("apple","orange","banana");
    var b = ["apple","orange","banana"] 

    // ブラウザによるが，コンソールで見た方がわかりやすいかも
    console.log(a); // 0:"apple", 1:"orange", 2:"banana"
    console.log(b); // 0:"apple", 1:"orange", 2:"banana"
</script>

ただし，上の二つの定義方法には異なる点もある．
値を一つ格納しようとした時である．

index.html

<script>
    var a = new Array(3);
    var b = [3]

    console.log(a); // Array(3) プロパティなし
    console.log(b); // Array(1) 0:3
</script>

配列a：配列の要素を三つ確保する
配列b：配列の要素を一つ確保し，値3を格納する

##2.9. 演算子
文字列の結合にはドット.を用いる．

index.html

<script>
    var a=10, b=5, c="東京都", d="新宿区";

    document.write(a+b); // a+b
    document.write("<br>");
    document.write(a-b); // a-b
    document.write("<br>");
    document.write(a*b); // a×b
    document.write("<br>");
    document.write(a/b); // a÷b
    document.write("<br>");
    document.write(a%b); // a÷bの余り
    document.write("<br>");

    document.write("出身は"+c+d+"高田馬場です");

</script>

また，`${変数名}`としても同じように表示される．
囲うのに使用している記号はバッククォート`なのでシングルクォート'と間違えないこと．

index.html

<script>
    var e="山田";
    document.write(`名前は${e}太郎です`);
</script>

##2.10. if文

条件式により処理を分岐する．
（条件分岐にはif文の他にswitch文も存在する．）

条件式は次の通り．
バーティカルバー|は，Qiitaの表の仕様の都合により全角で書いていますが，実際に使う際は半角に直すこと．

条件式	意味
`a==b`	`a`と`b`は等しい等価演算子
`a===b`	`a`と`b`は型を含め等しい厳密等価演算子
`a!=b`	`a`と`b`は等しくない不等価演算子
`a!==b`	`a`と`b`は型を含め等しくない厳密不等価演算子
`a<b`	`a`は`b`より小さい（未満）
`a>b`	`a`は`b`より大きい（超過）
`a<=b`	`a`は`b`より小さいか等しい（以下）
`a>=b`	`a`は`b`より大きいか等しい（以上）
`a&&b`	`a`であり`b`（`a`かつ`b`）論理積(AND)
`a｜｜b`	`a`または`b` 論理和(OR)
`!a`	`a`ではない否定(NOT)

構文

if(条件式1){
    処理1;
}
else if(条件式2){
    処理2;
}
else{
    処理3;
}

else if，elseを使わずに上と同じ意味にするには下のようなやり方がある．

構文2

if(条件式1){
    処理1;
}
if(!条件式1 && 条件式2){
    処理2;
}
if(!条件式1 && !条件式2 && 条件式3){
    処理3;
}

index.html

<script>
    a=0;
    
    if(a==0){
        document.write("aは0です");
    }else if($i==1){
        document.write("aは1です");
    }else if($i==2){
        document.write("aは2です");
    }else{
        document.write("aは0,1,2ではありません");
    }
</script>

##2.11. for文

条件を満たしている間，{}で囲まれた処理を繰り返し実行する．
（繰り返し文にはfor文の他にwhile文も存在する．）

構文

for(変数の初期化,継続条件式,変数のインクリメント){
    処理;
}

index.html

<script>
    for(i=0;i<10;i=i+1){  // i=i+1 は i+=1 または i++ ，++i としても同じ
        document.write(i+"<br>");
    }
</script>

index.html

<script>
    fruit = new Array;
		
    fruit[0]="apple";
    fruit[1]="orange";
    fruit[2]="banana";			
		
    for(i=0;i<3;i++){
        document.write(`${fruit[i]}<br>`);
    }
</script>

継続条件式を省略することで，無限ループが可能となる．
if文とbreakを使い，繰り返しから脱出することが可能である．
breakの対象は，直近のループ1つである．多重ループの場合は，その都度breakする必要がある．
ちなみに，ブロック{}内の処理が1つの場合は，ブロックを省略することが可能である．

index.html

<script>
    for(;;){
        document.write("あいうえお<br>");
        if(jouken) break;    // 条件 jouken を満たすとき脱出
    }
</script>

##2.12. ダイアログ

index.html

<script>
    alert("This is Alert");
    confirm("This is Confirm");
    prompt("This is Prompt");
</script>

index.html

<script>
    alert("This is Alert");
    var con = confirm("This is Confirm");
    var pro = prompt("This is Prompt");
		
    if(con){
        document.write("Confirm is True.");
        document.write("<br>");
        document.write("(You chose \"OK\".)");
    }
    else{
        document.write("Confirm is False.");
        document.write("<br>");
        document.write("(You chose \"Cancel\".)");
    }
		
    if(pro){
        alert("You entered \"" + pro + "\".");
    }
    else{
        alert("You didn't enterd.")
    }
</script>

##2.13. onclick属性

例えば，
onclick="func()"
の場合は，クリックした時にfunc()を呼び出す．

index.html

<body>
    <script>
        function btn2()
        {
            alert("You click submit2");
        }
		
        function btn4()
        {
            alert("You doubleClick submit4");
        }
    </script>
	
    <!-- onclick="" 内の命令が1つの場合はセミコロン省略可能 -->
    <!-- onclick･･･1回押されたら -->
    <input type="submit" value="submit1_click!" onclick="alert('You click submit1')">
    <br>
    <input type="submit" value="submit2_click!" onclick="btn2()">
    <br>
    <!-- ondblclick･･･2回連続して押されたら -->
    <input type="submit" value="submit3_doubleClick!" ondblclick="alert('You doubleClick submit3');">
    <br>
    <input type="submit" value="submit4_doubleClick!" ondblclick="btn4()">
    <br>
    <!-- onmouseover･･･マウスカーソルを重ねたら -->
    <input type="submit" value="submit5_mouseover" onmouseover="alert('Mouseover now!')">
    <br>
</body>

##2.14. オブジェクト指向

index.html

<body>
    <script>
        //オブジェクト作成 newで作成する
        var person = new Object();
		
        //オブジェクトのメンバー(プロパティ)にアクセス ドット演算子を使用する
        person.name="山田";
        person.address="東京都新宿区･･･";
        person.email="yamada@hoge.hoge";
	
        document.write(person.name);
        document.write("<br>");
        document.write(person.address);
        document.write("<br>");
        document.write(person.email);
    </script>
</body>

##2.15. オブジェクトプロトタイプ

index.html

<body>
    <script>
        //あらかじめ，雛形を作っておくやり方
        function person(name,email)
        {
            //thisで自身のプロパティにアクセス
            this.name=name;
            this.email=email;
        }
		
        var yamada = new person("山田","yamada@hoge.hoge");
		
        document.write(yamada.name);
        document.write("<br>");
        document.write(yamada.email);	
    </script>
</body>

##2.16. 無名関数

index.html

<body>
    <script>
        //変数に関数を代入
        var abcde = function(){ alert("Hello"); };
		

        //変数名で呼び出す
        abcde();
    		

        //オブジェクトのメンバーにできる
        var person = new Object();
		
        person.name = "yamada";
        person.email = "yamada@hoge.hoge";
        person.fghij = function()
        {
            document.write("Object!");
        }
		
        person.fghij();	
    </script>
</body>

##2.17. Mathオブジェクト

数学に関するファンクションがまとめられている．

index.html

<body>
    <script>
        document.write(Math.round(2.4)); //四捨五入による切り捨て例
        document.write("<br>");
        document.write(Math.round(2.5)); //四捨五入による切り上げ例
        document.write("<br>");
        document.write(Math.ceil(1.2));	 //切り上げ例
        document.write("<br>");
        document.write(Math.floor(3.8)); //切り捨て例
        document.write("<br>");
        document.write(Math.abs(-5));	 //絶対値を取得
        document.write("<br>");
        document.write(Math.max(-1,0,1));//最大値を取得
        document.write("<br>");
        document.write(Math.min(-1,0,1));//最小値を取得
        document.write("<br>");
		
        function getRandomInt1(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //最大値を除く乱数の取得
			
        }
        document.write(getRandomInt1(4,8)); //上の関数から4以上8未満の整数のうち，いずれかを取得

        document.write("<br>");
		
        function getRandomInt2(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min +1)) + min; //最大値を含む乱数の取得
			
        }		
        document.write(getRandomInt2(4,8)); //上の関数から4以上8以下の整数のうち，いずれかを取得

        document.write("<br>");
    </script>
</body>

##2.18. Stringオブジェクト

文字列操作のファンクションがまとめられている.

index.html

<body>
    <script>
        //文字列長
        var personName="山田太郎";
        var nameLen=personName.length;
        document.write(personName.length);
		
        document.write("<br>");
		
        document.write("ABCabc012あいう".length);
		
        document.write("<br>");
		
		
        //指定文字列の先頭位置
        var a="ABCabc012".indexOf("ABC"); //先頭から0番目(1文字目)を返す
        document.write(a);
		
        document.write("<br>");
		
        var b="ABCabc012".indexOf("abc"); //先頭から3番目(4文字目)を返す
        document.write(b);
		
        document.write("<br>");
		
        var c="ABCabc012".indexOf("xyz"); //見つからず，-1(エラー値)を返す
        document.write(c);
		
        document.write("<br>");
		
		
        //指定位置の文字列
        var d="ABCabc012".charAt();   //先頭の文字を返す
        document.write(d);
		
        document.write("<br>");
		
        var e="ABCabc012".charAt(4);  //4番目(5文字目)の文字を返す
        document.write(e);
		
        document.write("<br>");
		
        var f="ABCabc012".charAt(10); //見つからず，何も返さない
        document.write(f);
		
        document.write("<br>");
		
		
        //指定位置から指定位置までの文字列
        var g="ABCabc012".substring(2,5); //2番目(3文字目)から5-1番目(6-1文字目)までの文字列を返す
        document.write(g);
		
        document.write("<br>");
		
        var h="ABCabc012".substring(3);	  //3番目(4文字目)以降全ての文字列を返す
        document.write(h);
		
        document.write("<br>");
		
		
        //文字列一致( == は使用しないこと)
        var i="ABCabc012".match("ABCabc012"); //一致の場合，文字列を返す
        document.write(i);
		
        document.write("<br>");
		
        var j="ABCabc012".match("ABCxyz012"); //不一致の場合，nullを返す
        document.write(j);
		
        document.write("<br>");
    </script>
</body>

##2.19. Arrayオブジェクト

配列操作のファンクションがまとめられている.

index.html

<body>
    <script>	
        //配列
        var a=[3,7,0,-5,1];
        document.write(a);//区切り文字であるカンマを含め，要素全表示
        document.write("<br>");
		
        var a=[3,7,0,-5,1];
        document.write(a[3]);//指定した要素番号の要素を表示
        document.write("<br>");
		
        var a = new Array(-3,-2,-1,0,1,2,3);
        document.write(a);
        document.write("<br>");
		
        //配列長
        var a=[2,0,-5,99];
        var cnt1=a.length;
        document.write(cnt1);
        document.write("<br>");
		
        var cnt2=[2,0,-5,99,3,-9,1].length;
        document.write(cnt2);
        document.write("<br>");
		
		
        //数値から文字列(配列)へ変換
        var a=314159265;
        var len=a.toString().length;
        document.write(a+" は "+len+" 桁");
        document.write("<br>");
		
		
        //末尾の要素削除
        var a=[3,5,-7,2,1];
        a.pop(); //末尾の要素1を削除
        document.write(a);
        document.write("<br>");
		
		
        //末尾へ指定要素追加
        var a=[3,5,-7,2,1];
        a.push(33);
        document.write(a);
        document.write("<br>");
		
		
        //要素の逆順
        var a=[3,5,-7,2,1];
        a.reverse();
        document.write(a);
        document.write("<br>");
		
		
        //配列の結合
        var a=[3,-4,0];
        var b=[-7,3,1];
        var c=a.concat(b);    //配列aの後ろにbを結合
        document.write(c);    //要素全表示
        document.write("<br>");
        document.write(c[4]); //指定要素表示
        document.write("<br>");
		
		
        //concatを使った配列のコピー
        var a=[1,2,3,4,5];
        var b=[];
        //b=a; //コピーの間違い例
        b=a.concat(); //コピーの正しい例．b=a; の場合，参照型のためメモリ場所の共有(代入)となるため，配列bに変化を与えると配列aにも変化が出てしまうため，このようにする
        b.push(6); //前の行で b=a; を行うと，この行でpush(6);をすることで配列aにも同じ変化を与えてしまう
        document.write(a);
        document.write("<br>");
        document.write(b);
        document.write("<br>");
    </script>
</body>

##2.20. Dateオブジェクト

時刻・日付に関するファンクションがまとめられている．

index.html

<body>
    <script>
        //取得
        var date = new Date();
        var Y=date.getFullYear();      //年
        var M=date.getMonth()+1;       //月(0~11)
        var D=date.getDate();          //日
        var w=date.getDay();           //曜日(0~6)
        var h=date.getHours();         //時
        var m=date.getMinutes();       //分
        var s=date.getSeconds();       //秒
        var ms=date.getMilliseconds(); //ミリ秒
		
        document.write(Y);
        document.write("<br>");
        document.write(M);
        document.write("<br>");
        document.write(D);
        document.write("<br>");
        document.write(w);
        document.write("<br>");
        document.write(h);
        document.write("<br>");
        document.write(m);
        document.write("<br>");
        document.write(s);
        document.write("<br>");
        document.write(ms);
        document.write("<br>");


        //指定
        var date = new Date(2020,0,31,13,30,00); //2020年1月31日 13時30分00秒
        document.write(date);
        document.write("<br>");


        var date = new Date();
        document.write(date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate());
        document.write("<br>");
		
    </script>
</body>

#3. おわりに

まだ追記するかもしれません．

深くは記載しません．