隠居のお勉強:JavaScript Basic (6) Google Map link の confirm box を作る
金曜の夜から、夫婦そろって風邪(?)を引いてしまった。どちらも消化器系をやられたので、一種の食中毒かもしれない。陽春の候というのに、二人揃って床に就いた。こんなことははじめてである。医者からもらった薬を服んで寝ていたら、翌朝は体調が戻った。
引き続き、W3Schools JavaScript Tutorial で、お勉強である。今日は、[JS Popup Boxes] の項である。
右のボタンをクリックすると Confirm Box がでる。
ブログの右サイドにリンクボタンとして設置してみた。自作 JavaScript 3作目である。
右のボタンをクリックしてみてください。
今のところ、どのように使うか思案しているが、まあ、隠居のお勉強の成果ということで、大目に見てください。
引き続き、W3Schools JavaScript Tutorial で、お勉強である。今日は、[JS Popup Boxes] の項である。
- JavaScript では、3種のポップアップ・ボックスを作成できる。 Alert: Confirm: Prompt: ボックスである。
- Alert Box は、ページ閲覧者に確認の情報をポップアップ・ボックスに表示する。
- Example を参考に、次のような js ファイル(名前はなんでもよいが、AlertBox_h1.js とした)を作って、ページの <head> 部においてみた。MTでは、メインページやエントリーページのテンプレートの <head> 部である。
¥は小文字である。MTやGoogle のサーチボックスや Gmail では、101/102 英語キーボードで小文字 ¥ を打つと、\ となって、小文字の ¥ は表示されない。この場合、HTMLのタグで使う、< > をエントリーで使うとき < > と入力するように、¥ と入力すると小文字 ¥が表現される。なお、秀丸では小文字の ¥ が表示されるので、 js ファイル作成には問題がない。HTMLで表示されている入力部分に、小文字 ¥ を打つと、\ となるらしい。//JS Study: 改行付き Alert Box function disp_alert() { alert("Alert Box で改行するには" + '¥n' + "¥¥n¥ を使います。"); }
- ずいぶん寄り道をしたが、JavaScript での文字列の改行には、¥n を使う。HTML での < br /> と同じである。このときの ¥ をエスケープ・シーケェンスというらしい。エスケープ・シーケェンスについては、後ほど Tutorial の項目にもでてくるようだ。
- MTテンプレートの <head> 部においた記述を次に示す。 <$MTBlogURL$> は、MT のテンプレート・タグである。
<!-- JavaScript Study --> <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 3作目である。
- 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="あなたのお名前は?" />
右のボタンをクリックしてみてください。
今のところ、どのように使うか思案しているが、まあ、隠居のお勉強の成果ということで、大目に見てください。