はじめに
Webサイトを作成する際、
① サイトにアクセスしたとき、何か警告メッセージを表示したい
② 登録フォーム・ログアウト処理など...ミスクリック防止の為に確認画面を表示したい
③ 特定の人しかアクセスできないサイトへ遷移するボタンを設置したい
と思うことあると思います。
今回は、そんな機能についてご紹介します。
① 警告メッセージを表示するalert関数
まず、警告を出したい場合は、alert関数を使います。
alert関数
<script>
alert('Hello');
</script>
このalert関数は、ただ文字列を表示するのみで、OKを押したら処理を続行します。
② 確認ダイアログの表示するconfirm関数
次に、処理を続行するかどうか選択させる場合は、confirm関数を使います。
confirm関数
<form name="logout_form">
<input type="submit" name="logout" value="ログアウト">
</form>
<script>
// logout_formにあるlogoutがクリックされたとき
document.logout_form.logout.addEventListener('click', function(){
var result = confirm('本当にログアウトしますか？');
if(result){
// trueの処理(OKを選択した場合)
}else{
// falseの処理(キャンセルを選択した場合)
}
})
</script>
③ 文字を入力させるprompt関数
最後に、文字列の入力を促す際は、prompt関数を使います。
prompt関数
<form name="secret_form">
<label>こちらは身内専用です</label>
<input type="button" name="secret" value="身内専用">
</form>
<script>
// secret_formにあるsecretをクリックした場合
document.secret_form.secret.addEventListener('click', function(){
// 第二引数は初期値
var result = prompt('パスワードを入力してください', 'テスト');
if(result === "password"){
// trueの処理(passwordと入力された場合)
}else{
// falseの処理(入力されたものが誤り・キャンセルを押した場合)
alert("パスワードが違います。");
}
})
</script>