ダイアログボックス

警告用ダイアログボックス（ alert ）

ページを一時中断させたい時に使用します。またはスクリプトの確認の為にalert表示させることもあるので、覚えておくと便利！

aタグで指定されたリンクを実行すると、リンク先のかわりに、指定されたスクリプトが実行されます。


<a href="JavaScript:alert('○○○')">クリック</a>

また<script>を使用して記述した場合、ソースが上から読み込まれ、スクリプトの実行が中断されるので、
ダイアログボックスの「OK」が押されるまで次が読み込まれません。


<body>
<script type="text/javascript">
    alert("△△△");
</script>
ページが表示されました
</body>


【 こんな使い方も 】
alert('ページ移動します');
location.href = 'http://www.google.co.jp/';

サンプルクリック

ダイアログボックスの文字列を改行する場合、\n　で区切る。

▲このページのTOPに戻る▲

確認用ダイアログボックス（ confirm ）


<script type="text/javascript">
    if(confirm("××××？")){
        document.write("OKで～す");
    }
    else{
        document.write("キャンセルしまーす");
    }
</script>

▲このページのTOPに戻る▲

入力用ダイアログボックス（ prompt ）

なんとビックリ！IE7-8ではセキュリティの関係上、promptは使用できない！

IE9からは普通に使えるらしい。


<script type="text/javascript">
    myMsg=prompt("メッセージをどうぞ","ここに入力して下さい");
    document.write(myMsg);
</script>

※"ここに入力して下さい"は空欄 ""（空の文字列）でも大丈夫。

簡易パスワードに使用出来る。簡単なアクセス制限がこれで出来る。


function pass(){
	//リンク先のＵＲＬを決定
	var url = "wakagaeri";

	//入力ダイアログを表示 ＋ 入力内容を user に代入
	PassWord = window.prompt("パスワードを入力して下さい", "");

	//入力内容が ＯＫ の場合は 次のページ.html にジャンプ
	if(PassWord == 'wakagaeri'){
		location.href = url + ".html";
	}else if(PassWord != "" && PassWord != null){//入力内容が一致しない場合は警告ダイアログを表示
		window.alert('パスワードが間違っています');
	}else{//空の場合やキャンセルした場合は警告ダイアログを表示
		window.alert('キャンセルされましたので、元のページへ戻ります');
	}
}


【 aタグの場合 】
<a href="#" onClick="pass(); return false;">入力ダイアログの表示</a>
※これだと何か記述を間違った時に、好きなページを指定出来るので便利！元のページに戻るには#が指定されている。

【 form場合 】
<form>
	<input type="button" value="入力用ダイアログ" onClick="pass(); return false;">
</form>

入力ダイアログの表示

▲このページのTOPに戻る▲

質問ページを出す

画像をクリックしたら質問を出して、答えによってページを分岐


【 jsソース 】
function simpleb07(){
　　if(confirm('このページの内容は分かりましたか？\nOKならブログへ') == true){
　　　　window.location.href='blog.html'
　　}else{
　　　　window.location.href='link.html'
　　}


【 HTML 】
<a href="javascript:simpleb07();">サンプル表示</a>

<input type="button" value="確認ダイアログ" onClick="simpleb07()">

サンプル表示

▲このページのTOPに戻る▲