2008年3月24日

隠居のお勉強: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のタグで使う、< > をエントリーで使うとき &lt; &gt; と入力するように、&yen; と入力すると小文字 ¥が表現される。なお、秀丸では小文字の ¥ が表示されるので、 js ファイル作成には問題がない。HTMLで表示されている入力部分に、小文字 ¥ を打つと、\ となるらしい。
    • ずいぶん寄り道をしたが、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="あなたのお名前は?" />
      


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

コメントする

(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)