■ 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
*/