Atelierで“Popup_Box”タグの付いているブログ記事

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="あなたのお名前は?" />
      


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