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. おわりに
まだ追記するかもしれません．
深くは記載しません．