検索結果: Atelier

このブログを検索

Atelierで“Prompt”が含まれるブログ記事

2008年7月27日

隠居のお勉強：JavaScript(12) throw

　MT のバージョンを 3.35 から 4.1 へアップグレードするのにずいぶん時間をとられて、続けていた JavaScript のお勉強がほったからしになっていた。
　過去の JavaSCript のエントリーを見直していると、 4.1 へアップグレードによってリンク切れを起こしていたり、必要なスクリプトがサーバーにアップされていなかったりしていた。それらを修復しながら復習することができた。

　W3School tutorial の続きで、今回は throw の勉強である。
　 throw statement によって、例外処理ができる。前回の try....catch と一緒に使うと適切なエラー・メッセージによってプログラムを流すことができる。
　以下の例では、変数x に値を求め、x が 0 より小さかったり、10 より大きかったり、数字以外の文字がインプットされた場合に、それぞれにあったエラーを表示する。
　

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","");
try
{ 
if(x>10)
  {
  throw "Err1";
  }
else if(x<0)
  {
  throw "Err2";
  }
else if(isNaN(x))
  {
  throw "Err3";
  }
}
catch(er)
{
if(er=="Err1")
  {
  alert("Error! The value is too high");
  }
if(er=="Err2")
  {
  alert("Error! The value is too low");
  }
if(er=="Err3")
  {
  alert("Error! The value is not a number");
  }
}
</script>
</body>
</html>

　上の例を実行するボタンを作ってみた。Script は外部化し<head> 部で呼び出している。　

　

　ボタンをクリックしたときに、上の js を実行するためには、関数化しておかねばならない。作った関数は以下である。

// throwEx sample
function throwEx()
{
　　・
　　・
（上の青字部分）
　　・
　　・
}

これを<body> で実行するボタン（上のボタン）を置く、HTML は、次のコードである。

<input type="button" onclick="throwEx()" value="throw statement Sample" />

隠居のお勉強：JavaScript Basic (7) 関数

　全く自己満足の世界であるが、W3Schools での JavaScript Tutorial でお勉強を続けてみたい。

　今回は、[JS Functions]の項である。Function は、Example で既に使われているので、今回はおさらいである。

Function（関数）とは、イベントあるいは関数が呼び出されるときに実行される再使用可能なコードの集まりである。

おさらいのために、今回次のような学習のためのJavaScript を作成した。
ブログ・サーバーにおいた LinkButton.js という名前の js ファイル。
//JavaScript Study Making Link Button
function link_button()
{
var name=prompt("リンクする URL 名を入力ください。","URL");
if (name!=null && name!="")
{
window.open(name);
}
}
この中で、prompt box に入力された URL を新しいウィンドウに開くという関数 link_button を設定している。
この関数を、ページを開いた時に呼び出すために、HTMLの <head> 部（MTのテンプレートで）においた。関数は、 <head> 部にも、 <body> 部にもおくことができるが、<head> 部におく方が賢明なようである。
<head> 部に関数を設定している js file を呼び出すためのHTML。<$MTBlogURL$>はMovableType のテンプレート・タグであり、私の場合、http://n-shuhei.net/blog/ を置換するタグである。
<script type="text/javascript" src="<$MTBlogURL$>LinkButton.js"></script>
呼び出した関数を実行するために、 <body> 部に関数 link_button() を実行させる次のような HTML を記述する。
<input type="button" value="URL you want" onclick="link_button()" />

上の例は、arrgument （引数）がない場合の関数であるが、一般的には、次のような構文となる。
function functionname(var1,var2,...,varX)
{
some code
}
var1,var2 などは関数に取り込まれる変数または値である。 { と }　は、関数の始めと終わりを示す。
var1,var2 などの引数がない場合にでも、関数名の後ろに () をつけなければならない。
関数名は、小文字なければならない。JavaScript は大文字・小文字の区分が厳格である。

関数ではまた、次のように関数から戻される値（戻り値）を特定する return statement が使われることがある。
function prod(a,b)
{
x=a*b;
return x;
}
上の関数を呼び出すときは、次のように２つのパラメータが必要である。
product=prod(2,3);
関数 prod() からの戻り値は 6 となるが、この値は product という変数で保存される。
関数の中で宣言された変数は、その関数の中だけで使われるローカル変数となる。関数の外で宣言された変数は、グローバル変数と呼ばれ、宣言されたページのどの関数でも使用できる。ページが閉じられたときに消滅する。

隠居のお勉強：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 + "さん。訪問ありがとうございます。");
  }
}