隠居のお勉強：JavaScript Basic (6) Google Map link の confirm box を作る

　金曜の夜から、夫婦そろって風邪（？）を引いてしまった。どちらも消化器系をやられたので、一種の食中毒かもしれない。陽春の候というのに、二人揃って床に就いた。こんなことははじめてである。医者からもらった薬を服んで寝ていたら、翌朝は体調が戻った。

　引き続き、W3Schools JavaScript Tutorial で、お勉強である。今日は、[JS Popup Boxes] の項である。

JavaScript では、3種のポップアップ・ボックスを作成できる。　　Alert: Confirm: Prompt: ボックスである。

Alert Box は、ページ閲覧者に確認の情報をポップアップ・ボックスに表示する。
Example を参考に、次のような js ファイル（名前はなんでもよいが、AlertBox_h1.js とした）を作って、ページの <head> 部においてみた。MTでは、メインページやエントリーページのテンプレートの <head> 部である。
```
//JS Study: 改行付き Alert Box
function disp_alert()
{
alert("Alert Box で改行するには" + '¥n' + "¥¥n¥ を使います。");
}
```
　¥は小文字である。MTやGoogle のサーチボックスや Gmail では、101/102 英語キーボードで小文字 ¥ を打つと、\ となって、小文字の ¥ は表示されない。この場合、HTMLのタグで使う、< > をエントリーで使うとき < > と入力するように、¥ と入力すると小文字 ¥が表現される。なお、秀丸では小文字の ¥ が表示されるので、 js ファイル作成には問題がない。HTMLで表示されている入力部分に、小文字 ¥ を打つと、\ となるらしい。
ずいぶん寄り道をしたが、JavaScript での文字列の改行には、¥n を使う。HTML での < br /> と同じである。このときの ¥ をエスケープ・シーケェンスというらしい。エスケープ・シーケェンスについては、後ほど Tutorial の項目にもでてくるようだ。
MTテンプレートの <head> 部においた記述を次に示す。 <$MTBlogURL$> は、MT のテンプレート・タグである。
```

<script type="text/javascript" src="<$MTBlogURL$>AlertBox_h1.js"></script>
```

そして、 <body> 部に（エントリーに）次のようなHTMLを記述したとき、下のような Example が実行される。実際のブログへの応用については、まだ、思いつかない
```
<input type="button" onclick="disp_alert()" value="改行つき Alert Box の例" />
```

Example:右のボタンをクリックしてみてください。
今回初めて、 <head> 部で js ファイルを呼び出し、 <body> 部でそれを実行することを試みた。Expert が提供してくれている JavaScript プラグインの多くはこの方式をとっている。

Confirm Box は、ページ閲覧者に「OK」か「キャンセル」かの確認をとるお馴染みのポップアップ・ボックスである。

tutorial の Example と Tag <index> というページにある例を参考に、Alert Box のようによく利用する Google Map へのリンクボタンで確認するスクリプトを置いてみた。
外部 js ファイル（名前はなんでもよいが、ConfirmBox_h2.js とした）と<head> 部（テンプレート）に記述したHTMLおよび <body> 部に（エントリーに）に記述したHTMLは次のようなものである。

外部 js ファイル：別 Window に開きたかったので、tutorial にある location.href ではなしに window.open を用いた。 location.href では新しい Window に表示させる方法が分からなかった。

//JavaScript Study Confirm Box
function disp_confirm()
{
var r=confirm("Google Map を開きますか？");
if (r==true)
  {
     window.open("http://maps.google.co.jp/","_blank");
   }
else
  {
 window.alert('キャンセルされました'); 
  }
}

<head> 部（テンプレート）に記述したHTML


<script type="text/javascript" src="<$MTBlogURL$>ConfirmBox_h2.js"></script>

<body> 部に（エントリーに）に記述したHTML


<input type="button" onclick="disp_confirm()" value="Google Map" />

右のボタンをクリックすると Confirm Box がでる。　
　ブログの右サイドにリンクボタンとして設置してみた。自作　JavaScript ３作目である。

Prompt Box は、多くの場合ページの訪問者にページに入る前に、何かの値を求めるときに使われる。

Example を参考に学習のために作った外部 js ファイル、<head> 部（テンプレート）に記述したHTMLおよび <body> 部に（エントリーに）記述したHTMLは次のようなものである。

外部 js ファイル。名前はなんでもよいが、PromptBox_h3.js とした

//JavaScript Study Prompt Box
function disp_prompt()
{
var name=prompt("貴方のお名前を教えてください。","お名前");
if (name!=null && name!="")
  {
    window.alert("今日は!! " + name + "さん。訪問ありがとうございます。");
  }
}

<head> 部（テンプレート）に記述したHTML


<script type="text/javascript" src="<$MTBlogURL$>PromptBox_h3.js"></script>

<body> 部に（エントリーに）に記述したHTML


<input type="button" onclick="disp_prompt()" value="あなたのお名前は？" />

右のボタンをクリックしてみてください。
今のところ、どのように使うか思案しているが、まあ、隠居のお勉強の成果ということで、大目に見てください。

隠居のお勉強：JavaScript Basic (6) Google Map link の confirm box を作る

タグ:

コメントする