Javascriptの勉強をしていても、動きがないとつまらないですよね。
個人的に好きなwindow.prompt()を使って入力した文字を表示してみましょう。
window.prompt()とは
window.prompt()は画面上にテキストを入力することを促すダイアログを表示してくれます。
※ promptは英語で迅速なという意味がありますが、コンピュータ用語では促すという意味として使われています。
実際に使ってみた方がわかりやすいと思うので、以下で実践してみましょう。
window.prompt()を使ってみよう
それでは実際にwindow.prompt()を使ってみましょう。
以下のコマンドをコンソールで実行してみてください。
// ダイアログを表示
let answer = window.prompt(“文字を入力してください。”);
// コンソールに入力された文字を表示
console.log(answer);
入力した文字がコンソール上に表示されたと思います。
コンソールについてはこちらをご確認ください。
window.prompt()で条件分岐してみる
window.prompt()で2分岐
ifとelseの条件分岐とwindow.prompt()を使ってもう少し複雑なことをしてみましょう。
// ダイアログを表示
let answer = window.prompt(“あなたは寿司は好きですか？(はい／いいえ)”);
// 入力に応じて条件分岐
if(answer === “はい”){
window.alert(“気が合いますね。”);
}else{ // はい以外全て
window.alert(“あなたは宇宙人ですね。”);
}
入力に応じてalertが表示されるればOKです。
window.prompt()で3分岐
このままでは俺か俺以外かのような状態なのでelse ifを使って3分岐させてみたいと思います。
// ダイアログを表示
let answer = window.prompt(“あなたは寿司は好きですか？(はい／いいえ)”);
// 入力に応じて条件分岐
if(answer === “はい”){
window.alert(“気が合いますね。”);
}else if(answer === “いいえ”){
window.alert(“あなたは宇宙人ですね。”);
}else{ // はい／いいえ以外
window.alert(“「はい」か「いいえ」でお答えください。”);
}
これで3分岐が完成です。分岐を増やして遊んでみると楽しいと思います。
条件分岐 + ファンクション
今のままだと「はい」か「いいえ」ではない場合、再度入力することができず不便なのでファンクションを使って呼び出せるようにしてみます。
// sushi()を作成
function sushi(){
// ダイアログを表示
let answer = window.prompt(“あなたは寿司は好きですか？(はい／いいえ)”);
// 入力に応じて条件分岐
if(answer === “はい”){
window.alert(“気が合いますね。”);
}else if(answer === “いいえ”){
window.alert(“あなたは宇宙人ですね。”);
}else{ // はい／いいえ以外
window.alert(“「はい」か「いいえ」でお答えください。”);
sushi();
}
};
// sushi()を呼び出し
sushi();
「はい」か「いいえ」でない限り、しつこいくらい聞いてきますね。
おわり
window.prompt()のついでに条件分岐も紹介してみました。できることが増えてくると楽しいですよね。
