忘れがちなJavaScript

# ■ script/noscriptタグ
~~~html
<html>
<body>

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

# ■ イベントハンドラ
~~~html
<input type="button" value="日付登録" onclick="window.prompt('今日の日付を入力して下さい','2018/1/1')">
~~~

# ■ 外部スクリプト読み込み
~~~html
<script src="test.js"></script>
~~~

# ■ 文字列操作

## 出力
~~~javascript
document.write("hello");
~~~

## 連結
~~~javascript
document.write("he" + "llo" + "<br>");
document.write("he", "llo", "<br>")
~~~

# ■ ダイアログ表示
## 警告表示
~~~javascript
window.alert("Hello");
~~~

## 確認表示
~~~javascript
if(window.confirm()){
  document.write("OKが押されました");
}
else{
  document.write("キャンセルが押されました");
}
~~~

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

# ■ コンソール出力
~~~javascript
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以上|

## 論理演算子
<table>
<tr><th>演算子</th><th>意味</th></tr>
<tr><td>&&</td><td>論理積</td></tr>
<tr><td>||</td><td>論理和</td></tr>
<tr><td>!</td><td>否定</td></tr>
</td></tr>
</table>

## ビット演算子

<table>
<tr>
<th>演算子</th><th>意味</th>
</tr>
<tr>
<td>&</td><td>AND</td>
</tr>
<tr>
<td>|</td><td>OR</td>
</tr>
<tr>
<td>^</td><td>XOR</td>
</tr>
<tr>
<td>~</td><td>反転</td>
</tr>
<tr>
<td>>></td><td>右シフト</td>
</tr>
<tr>
<td><<</td><td>左シフト</td>
</tr>
</table>

## 三項演算子
~~~javascript
const cnt = 0;
document.write((cnt == 0) ? "値は0です":"値は0以外です");
~~~

# ■ 繰り返し
## for
~~~javascript
const array_test = new Array("A", "B", "C");
for(let cnt = 0; cnt < 3; cnt++){
  document.write(array_test[cnt]);
}
~~~

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

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

# ■ 条件分岐
## if

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

## switch

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

# ■ 関数
## 関数定義
~~~javascript
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
~~~

## 無名関数
~~~javascript
var msg = function(input){
  document.write(input);
  return "!";
};
document.write(msg("Hello"), "<br>");
~~~

## 即時関数
~~~javascript
(function test(input){
  document.write(input);
})("Hello");
~~~

# ■ Arrayオブジェクト
## 配列
~~~javascript
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
~~~

## 配列操作
~~~javascript
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
~~~

## 二次元配列
~~~javascript
let array_test = new Array();
array_test = [
[10, 100],
[20, 200]
];
document.write(array_test[1][1]);  // 200
~~~

## 連想配列
~~~javascript
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オブジェクト
~~~javascript
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オブジェクト
~~~javascript
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オブジェクト
~~~javascript
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
~~~

# ■ タイマ設定・解除
~~~javascript
let count = 0;
function alertset(){
    window.alert(count++);
    if(count == 10){
      clearInterval(timer);
    }
}
timer = setInterval(function(){
  alertset();
}, 5000);
~~~

# ■ コメント
~~~javascript
// comment
/* comment */
/*
comment
*/
~~~