5 確認ウィンドウの表示

ボタンをクリックした時、確認ウィンドウを表示し、OKボタンが押された時にページを移動するよう設定してください。
移動先のホームページアドレスは、自由に設定してください。

ファイル名は js05.html  としてください。

サンプル

 : 省略

4: <SCRIPT language="JavaScript">
5: <!--
6: function cfm() {
7:    if( window.confirm("本当に移動しますか?") ){
8:       location.href="http://www.kyoto-su.ac.jp/";
9:    }
10: }
11: //-->
12: </SCRIPT>

  : 省略

15: 下のボタンをクリックすると確認ウィンドウが表示されます<BR><BR>
16: <FORM> <INPUT type="button" value="京都産業大学のトップページに移動" onClick="cfm();"></FORM>

  : 省略
このサンプルは、必要な記述の一部です。
スクリプトを動作させるために、足りないHTMLタグなどを各自追加してください。

解説

おおまかな流れ
16行目でボタンを作成してあり、ボタンがクリック(onClick)された時に、cfm() 関数が実行されます。
cfm() 関数は、確認ウィンドウを表示して、もし [ OK ] ボタンが押されたら、決められたURLにページを移動させます。

6行目:
function で新しい関数 cfm() を定義しています。
cfm() 関数の中では、確認ウィンドウを表示し、OKボタンが押された時にページを移動する処理を行います。

7行目:
window.confirm() メソッドを使うと、[ OK ] ボタンと [ キャンセル ] ボタンのある確認ウィンドウを開けます。
window.confirm() は if と併用して使うことが多いです。
主に以下の様な使い方をします。

if( window.confirm('好きなメッセージ') ) { 真の場合の記述; } else { 偽の場合の記述; }

確認ウィンドウで [ OK ] が押された時に [ 真の場合の記述 ] が実行され、
[ キャンセル ] が押された時に [ 偽の場合の記述 ] が実行されます。
※この例では else 以降の 偽の場合の記述 が書かれていないので、[ キャンセル ] が押されたときは何も起こりません。

8行目:
location.href="ジャンプ先のURL"; のように location オブジェクトの href オプションにURLを代入すると、
ページは直ちに指定したURLに切り替わります。
※つまり Javascript によって強制的に別のページに移動させられます。

16行目:
<input type="button"> でボタンを作成し、onClick イベントハンドラを使うことで、
ボタンがクリックされた時に、cfm() 関数を実行するよう設定しています。

実行例

実行例