ブラウザでOK/キャンセルのダイアログ表示方法
JS BinというJavaScriptの動作を確認するツールで簡単にみれます。
JS Binのコンソール画面に貼り付けて、RUNを押すだけで確認できます。
コールバック関数を利用した処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function pushOK() { console.log("OKを押しました"); } function pushCancel(){ console.log("キャンセルを押しました"); } function confirmed(fn1,fn2) { if(window.confirm("実行しますか？")){ fn1(); } else{ fn2(); } } |
匿名関数を利用した表記方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function confirmed(fn1,fn2) { if(window.confirm("実行しますか？")){ fn1(); } else{ fn2(); } } confirmed(function() { console.log("OKを押しました"); },function(){ console.log("キャンセルを押しました"); }); |
promptで文字入力があってるか確認する
ただ単に、javascriptのpromptで文字入力を読み取って、あってるか確認するだけのコールバック関数の練習
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function confirmed(fn1,fn2) { const input = prompt("「OK」と打ち込んでください"); if (input === "OK") { fn1(); } else{ fn2(); } } confirmed(function() { console.log("OKと入力されました"); },function(){ console.log("入力が間違っています"); }); |
OKと入力すればOKと入力されましたと出て、それ以外だと、間違ってますよ！って警告出す
そして、上のやつのIF文の位置だけ変えたのが以下。実行してみると、上のやつと全く同じ結果になる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function confirmed(fn) { const input = prompt("「OK」と打ち込んでください"); fn(input); } confirmed(function(input) { if (input === "OK") { console.log("OKと入力されました"); } else{ console.log("入力が間違っています"); } }); |
配列にデータを入れて、それを取り出す関数
javaScript標準のforEach関数を使って、[]の配列名を取得
|
1 2 3 4 5 6 7 |
//コールバック関数で、かつ匿名関数で、forEach使ってみる const OnajiSeiyu = ["ハマーン","マウワー","ナナイ"]; OnajiSeiyu.forEach(function(name){ console.log(name); }); |
