[機能]JavaScriptを使って「OK」ボタンと「キャンセル」ボタンのあるダイアログを表示して閲覧者に確認を取り、その結果に応じて処理を分岐させるには、confirmメソッドを使います。ように記述して使い、返されたtrue/falseの値をチェックして条件分岐を作れば良いだけです。確認ダイアログから返される値がtrueかfalseかをif文で判別するだけ「OK/キャンセル」ダイアログを表示して確認・分岐する方法JavaScriptでは、[OK]ボタンと[キャンセル]ボタンの2つのボタンがあるダイアログボックスを表示して、ユーザに可否を選択させることができます。ページを移動する前に移動しても良いかどうか確認するとか、何かを送信する際に本当に送信しても良いかどうか確認するとか、そんな感じのことに使うと便利です。以下のサンプルは、ボタンをクリックすると移動しても良いかどうかの確認ダイアログが表示されます。上記のボタンクリックで表示される確認ダイアログで、[OK]をクリックすれば本当に移動(※)し、[キャンセル]をクリックすれば移動せずにアラートボックスを表示(※)します。※移動する場合の移動先は、当サイトのHOMEページです。※アラートボックスは、[OK]ボタン1つだけの確認ダイアログです。詳しくは「OKボタン1つだけのアラートボックスを表示する方法」をご参照下さい。確認ダイアログから返される値がtrueかfalseかをif文で判別するだけこのように、「OK」ボタンと「キャンセル」ボタンのある確認ダイアログを表示するには、confirmメソッドを使います。以下のようにして使います。confirm("移動してもいいですかー?");上記の場合、「移動してもいいですかー?」というメッセージと共に、[OK]ボタンと[キャンセル]ボタンの2つがある確認ダイアログが表示されます。confirmメソッドは、ユーザが押したのが[OK]ボタンならtrueを、[キャンセル]ボタンならfalsを返します。上記ではユーザが選択した結果(true/false)が変数resに格納されます。ユーザの選択に応じて処理を分岐するには、if~else文を使えばよいでしょう。説明のために冗長に記述したJavaScriptソースを掲載します。キャンセルならアラートボックスを表示alert("移動をやめまーす。");}}上記のJavaScriptソースでは、MoveCheckという名称の関数を作っています。この関数では、confirmメソッドで表示する確認ダイアログの返値を変数resに格納して(2行目)、変数resの値がtrueだったらページを移動、falseだったらアラートボックスを表示させています。ページを移動する方法については、「ページを移動させたり、現在URLを構成部分別に得る方法」をご参照下さい。上記のソースはちょっと冗長ですね。trueかfalseを1回判別するだけなのですから、confirmメソッドの返値をわざわざ変数に入れる必要はありません。if文の判定式の中でわざわざtrueと比較する必要もありません。以下のように書けば少しソースが短くなります。{alert("移動をやめました。");}}上記のJavaScriptソースでも先程と同じようにMoveCheckという名称の関数を作っています。2行目では「confirmメソッドで確認ダイアログを表示」と「OKがクリックされたら」という条件判定を同時に行っています。ここで作成した関数を呼び出すHTMLは、例えば以下のように記述します。onclick="MoveCheck();">ここではonclick属性を使って、クリックされたときにMoveCheck関数が実行されるようにしています。OKかCancelかの選択をユーザにさせたいときにこんな感じで、[OK]ボタンと[キャンセル]ボタンを使った確認ダイアログを簡単に表示できます。false;を実行して送信しないようにするとか、そういうことに活用すると良さそうな気がします。Aboutで記事にしていますので、そちらもよろしければご参照下さい。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:ウェブページ全般の製作依頼だけでなく、特定の機能を提供するJavaScript単体の作成作業も含め、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。モダンスタイルによる基礎から現場での応用まで▲JavaScriptの文法仕様を基礎からしっかり把握したい場合にお勧めです。解説がとても詳しく、基礎から応用まで網羅されていて、JavaScriptを隅々まで理解するのに役立ちます。JavaScriptを詳しく知るには、とりあえずこれを1冊読みましょう。▲JavaScriptのライブラリやフレームワークが、ひたすら多数紹介されています。目的に応じてどんなライブラリを使えば良いのか、そもそもどんなライブラリがあるのか知るのにお勧めです。▲正確な文法を知りたいとき、手軽にさっと調べられる辞書(辞典)として手許に置いておきたい場合に。▲jQueryを活用する方法について、サンプルと実現ソースが見やすく列挙された解説書。基礎から分かりやすく説明されています。▲jQueryを活用して実現できる様々なパーツ(デザインやUI)の実装方法を列挙した解説書。サンプルが多数あります。JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。......と言っても初心者向けでは決してないので注意してね。^^;JavaScriptに関する解説書は、自分に合うかどうか立ち読みして確認したり、せめて購入前に目次などから大まかな内容はチェックしておいた方が良いと思います。TIPSふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(16)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。関連するかもしれない情報など▼このページに関連しそうな記事が約8本くらい自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。