■ script/noscriptタグ

<html>
<body>

  <!--</body>の直前に記載-->
<script>
<!--
  /* JavaScriptのコード */
//-->
</script>
<noscript>
  <!--JavaScript非対応ブラウザのコード-->
</noscript>
</body>
</html>

■ イベントハンドラ

<input type="button" value="日付登録" onclick="window.prompt('今日の日付を入力して下さい','2018/1/1')">

■ 外部スクリプト読み込み

<script src="test.js"></script>

■ 文字列操作

出力

document.write("hello");

連結

document.write("he" + "llo" + "<br>");
document.write("he", "llo", "<br>")

■ ダイアログ表示

警告表示

window.alert("Hello");

確認表示

if(window.confirm()){
  document.write("OKが押されました");
}
else{
  document.write("キャンセルが押されました");
}

入力表示

window.prompt('今日の日付を入力して下さい','2018/1/1');

■ コンソール出力

console.log("Hello");

■ 変数

型

型	名称
number	数値型
boolean	論理型
string	文字列型
object	オブジェクト型
null	NULL型

エスケープシーケンス

エスケープシーケンス	意味
\n	改行
\t	タブ

キャスト

書式	意味
parseInt("10")	文字列 ⇒ 整数
String(10)	数値 ⇒ 文字列

■ 演算子

算術演算子

演算子	意味
+	加算
-	減算
*	乗算
/	除算
%	剰余

複合演算子

演算子	意味
+=	加算して代入
-=	減算して代入
*=	乗算して代入
/=	除算して代入
%=	剰余を代入

比較演算子

演算子	意味
A == B	AとBは等しい
A != B	AとBは等しくない
A > 0	Aは0より大きい
A < 0	Aは0より小さい
A <= 0	Aは0以下
A >= 0	Aは0以上

論理演算子

演算子	意味
&&	論理積
\|\|	論理和
!	否定

ビット演算子

演算子	意味
&	AND
\|	OR
^	XOR
~	反転
>>	右シフト
<<	左シフト

三項演算子

const cnt = 0;
document.write((cnt == 0) ? "値は0です":"値は0以外です");

■ 繰り返し

for

const array_test = new Array("A", "B", "C");
for(let cnt = 0; cnt < 3; cnt++){
  document.write(array_test[cnt]);
}

while

let cnt = 0;
while(cnt < 10){
  document.write(cnt, "<br>");
  cnt++;
}

do while

let cnt = 0;
do{
  document.write(cnt, "<br>");
  cnt++;
}while(cnt < 10);

■ 条件分岐

if

var answer = window.prompt("答えは？", "");
if (answer == 0){
  document.write("答えは0です");
}
else if (answer == 1){
  document.write("答えは1です");
}
else{
  document.write("答えは0,1以外です");
}

switch

var answer = window.prompt("答えは？", "");
switch(answer){
case 0:
  document.write("答えは0です");
  break;
case 1:
  document.write("答えは1です");
  break;
default:
  document.write("答えは0, 1以外です");
  break;
}

■ 関数

関数定義

function test(input0, input1, input2)
{
  document.write(input0 + input1 + "<br>");  // test実行
  input2[0] = 100;
  return "OK";
}
const output = [0, 1];
document.write(test("test", "実行", output), "<br>");  // OK
document.write(output[0]);  // 100

無名関数

var msg = function(input){
  document.write(input);
  return "!";
};
document.write(msg("Hello"), "<br>");

即時関数

(function test(input){
  document.write(input);
})("Hello");

■ Arrayオブジェクト

配列

const array_test1 = new Array("A", "B", "C");
document.write(array_test1[0], "<br>");
const array_test2 = ["A", "B", "C"];
document.write(array_test2[1], "<br>");
document.write(array_test1.length);  // 3

配列操作

let array = ["a", "b", "c"];   // a ⇒ b ⇒ c
array.push("d");           // a ⇒ b ⇒ c ⇒ d 
array.unshift("z");        // z ⇒ a ⇒ b ⇒ c ⇒ d
let out = array.pop();     // d
out = array.shift();       // z
out = array.slice(1, 3);   // b,c

二次元配列

let array_test = new Array();
array_test = [
[10, 100],
[20, 200]
];
document.write(array_test[1][1]);  // 200

連想配列

const array_test = {
  a:"A",
  b:"B",
  c:"C",
  alert: function(input){
      window.alert(input);   // Hello
      window.alert(this.a);  // β
    }
};

document.write(array_test['a']); // A
document.write(array_test.b);    // B

array_test['a'] = "α";
array_test.b = "β";

delete array_test['c'];
array_test.alert("Hello");

■ Mathオブジェクト

document.write(Math.abs(-1), "<br>");     // 1 : 絶対値
document.write(Math.ceil(5/2), "<br>");   // 3 : 切り上げ
document.write(Math.floor(5/2), "<br>");  // 2 : 切り下げ
document.write(Math.pow(5,2), "<br>");    // 25 : べき乗
document.write(Math.random(), "<br>");    // 0.3402336179217773
document.write(Math.round(5/2), "<br>");  // 3  : 四捨五入

■ Dateオブジェクト

const curDate = new Date();
document.write(curDate.getFullYear(), "<br>");     // 2018 : 年
document.write(curDate.getMonth(), "<br>");        // 0    : 月
document.write(curDate.getDate(), "<br>");         // 13   : 日 
document.write(curDate.getDay(), "<br>");          // 6    : 曜日
document.write(curDate.getHours(), "<br>");        // 0    : 時間
document.write(curDate.getMinutes(), "<br>");      // 0    : 分
document.write(curDate.getSeconds(), "<br>");      // 0    : 秒
document.write(curDate.getMilliseconds(), "<br>"); // 0    : ミリ秒
document.write(curDate.getTime(), "<br>");         // 1518447600000  : 1970/1/1 午前00:00:00以降のミリ秒

■ Stringオブジェクト

const str = new String("Hello");
document.write(str.length, "<br>");         // 5
document.write(str.substr(2,3), "<br>");    // llo
document.write(str.indexOf("o"), "<br>");   // 4
document.write(str.replace("h", "H"));      // Hello

■ タイマ設定・解除

let count = 0;
function alertset(){
    window.alert(count++);
    if(count == 10){
      clearInterval(timer);
    }
}
timer = setInterval(function(){
  alertset();
}, 5000);

■ コメント

// comment
/* comment */
/*
comment
*/