検索結果: Atelier

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

2008年8月 3日

隠居のお勉強：JavaScript(13) onerror

　梅雨明けから酷暑の日が続き、屋外での活動はほとんどできない。特に、ここ大阪堺市は全国的に見ても暑い都市で連日最高気温が35℃を超えている。老齢を自覚して、クーラーの効いた部屋で過ごすようにしている。

　幸いウェブを開いておれば退屈することはない。JavaScript の学習がおろそかになっていたので、例によって W3Schools の tutorial で再開することにした。今回は、前回に続いてエラー処理の script である。

　onerror イベントハンドラーは、エラーをキャッチしてメッセージを出す古くからの標準的な方法である。

　次はその使い方サンプルである。

<html>
<head>
<script type="text/javascript">
onerror=handleErr;
var txt="";

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n";
txt+="Error: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="Line: " + l + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
return true;
}

function message()
{
adddlert("Welcome guest!");
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

上のスクリプトは、alert("Welcome guest!"); とすべきとろころが、adddlert("Welcome guest!"); となっているので、下のボタンをクリックするとスクリプトがエラーとなり、onerror イベントハンドラーが働き、エラーが表示される。

この間違ったスクリプトを訂正すると、"Welcome guest!"　と本来のメッセージが表示され、エラーは表示されない。次のボタンをクリックしてみてください。

隠居のお勉強：JavaScript Basic (8) Loop

　W3Schools JavaScript Tutorial の第８回である。まだ、基礎部分を学習している。使わせてもらっている Expert が書かれた JavaScript を理解するには、まだ当分時間がかかりそうだが、少しずつ理解できる部分もでてきた。

　今回は Loop （ループ）である。ループには、For Loop と While Loop がある。

for loop は、スクリプトを何回繰り返すかが分かる場合に使用される。

Example を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
loop は、i=0 からスタートし、i が 10 以下の間、下のコード( document.write() ）が繰り返される。i は１回繰り返されるたびに、１付加される。結果は次のようになる。
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10

while loop は、特定の条件が true （真）である間ループする実行を求めるときに使われる。

Example を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=10)
{
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>
loop は、i が 10 以下の間、下のコード( document.write() ）が繰り返される。結果は、for loop の場合と同じである。

do...while loop は、while loop の変種である。この loop は、常に code block を一度は実行する。それ以降は、特定の条件が true （真）である間実行をループする。

Example を次に示す。
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
while (i<0);
</script>
</body>
</html>
結果は、次の通りである。
The number is 0

syntax は理解できたが、どのような場合に使われるかがよく分からない。

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

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


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

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


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

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

隠居のお勉強：JavaScript Basic (4) 訪問時刻によって、挨拶文を変える。

　相変わらず、PC 前でRadio Senbokuを聴きながら、JavaScript のお勉強である。

　前回に書いたように、W3Schools JavaScript tutorial での [JS If...Else] のページにある Examples を応用して、私のブログのタイトルへ訪問時刻によって変化するお礼挨拶を表示させることにした。
　この具体例を記す前に、勉強したことを学習ノートにまとめておきたい。

[JS If...Else] で学んだこと。

デシジョンによって異なるアクションを実行する条件式を記述できる。
条件式には、if statement　；　if...else statement ；　if...else if....else statement　；　switch statement　がある。

if statement　はある特定条件が真(true) のみの場合にコードを実行する。次に例を示す。

<script type="text/javascript">
//Write "Lunch-time!" if the time is 11
var d=new Date();
var time=d.getHours();


if (time==11) 
{
document.write("<b>Lunch-time!</b>");
}
<script><b>Lunch-time!</b>");
}
<script>

if...else statementは、ある条件が、true の場合はあるコードを実行し、false の場合は他のコードを実行する。
以下は事例。

<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date();
var time = d.getHours();


if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>

if...else if....else statement　の記述によって、多くに条件の中から適切な条件に合致するコードを実行させることができる。
下に example を示す。

<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>>Good morning</b>");
}
else if (time>10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>

　この if...else if....else statement を応用して、下のような外部 js ファイルを秀丸でエンコードを UTF8 として Greeting.js というファイル名（拡張子が js であれば名前は何でも良い）作成し、ブログサーバーにファイル転送ソフト（FFTP）でアップした。

//ブログ・タイトルに、挨拶を表示する　JSファイル
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<span style='color: #ffffe0'><b>おはようございます!!　早くからのご訪問ありがとうございます。</b></span>");
}
else if (time>=10 && time<18)
{
document.write("<span style='color: #ffffe0'><b>こんにちは!!　いつもご訪問ありがとうございます。</b></span>");
}
else
{
document.write("<span style='color: #ffffe0'><b>今晩は!!　いつもご訪問ありがとうございます。</b></span>");
}

　変数 d time の定義の仕方は、学習を進めると出てくると思うが、今のところ examples の通りに使っている。
　文字色を指定する span タグの間に入れるダブルコーテション（ "---"）の文字列ははシングルコーテション（ '---' ）でなければならない。

　この js ファイルをブログ・テンプレートのタイトル表示部分に、下の記述を挿入した。
　朝１０時までに訪問していただいた方には、「おはようございます。」、１０時から１８時までに訪問していただいた方には、「こんにちは」、１８時以降２４時までの間に訪問していただいた方には、「今晩は」と表示されるはずである。

<script src="http://n-shuhei.net/blog/Greeting.js"></script>

今まで学習したことを自分のブログのカストマイズに生かせるのはもっと学習が進んでからと思っていたが、この時点でささやかながら応用できた。お勉強の励みになるというものだ。

　

隠居のお勉強：JavaScript Basic (3)

　雨が降り続くので、今日も JavaScript の学習を　W3Schools Tutorial ですることにした。いつになったら自分のブログに使えるスクリプトが記述できるか分からないが、気長にやっていこうと思う。残された人生の時間はそんなに多くないが。

今日は、[JS Comparisons] から。

Comparison Operators（比較演算子）は、変数あるいは値を比較し真 (true) 偽 (false)を決定する論理式で使用される。
比較演算子の使用例を、下の図に表示する。
Logical Operators（論理演算式）は、変数あるいは値の論理の真 (true) 偽 (false)を決定するときに使用される。
論理演算子の使用例を、下の図に表示する。

JavaScript は、ある条件下において、ある変数にある値を割り当てる Conditional Operator（条件演算子）も備えている。
Conditional Operator（条件演算子）は次のように使用される。

次に、[JS If...Else] の学習。条件式の勉強である。

　Tutorial に例示されている Examples を見ていたら、自分のブログに応用できそうだったので、外部 JS ファイルを記述してタイトル部分に使用してみるとなんとか形になった。
　詳細については、次回のエントリーに掲載したい。

隠居のお勉強：JavaScript Basic (2)

　今日は朝から春雨が強く降っている。再開をはじめたDIYは今日はお休みにして、PC 前でRadio Senbokuを聴きながらJavaScript の晩学をした。教材は、W3Shools のものである。
　

今日は、まずコメントの書き方について。
- 一行に書くときは行頭に //
- 複数行にまたがるときは、コメントの先頭に　/* コメントの終わりを　*/　とする。
- もちろん、スクリプトをコメントアウトするときにも使える。

次に、[JS Variables] の学習　
- Variables（変数）は、情報を格納するコンテナである。
- 変数は代数学(Algebra)の x=5, y=6,, z=x+y → z=11 と同じように、x, y, z が変数である。
- 変数は、carname="VOLVO" のようにテキストも値として持てる。
- 変数は、大文字・小文字を区分する。また、変数名は、文字で始まらねばならない。JavaScript そのものが大文字と小文字を区分する。

次に、[JS Operators] の学習
- Operator（演算子）には、Arithmetic operators（算術演算子）や Assignment operators（代入演算子）などがある。
- Arithmetic operators（算術演算子）には、つぎのようなものがある。
- Assignment operators（代入演算子）には、つぎのようなものがある。
- +（プラス）演算子は、テキストの連結にも使われる。

　JavaScript Tutorial に使われている英語は、JavaScript Language Specification を参考にさせていただいた。普通の英語辞書には載っていない。

隠居のお勉強：JavaScript Basic (1)

　ブログで少し凝ったことを実現させようとすると Web を構成している言語を少しは理解する必要がある。HTML(HyperText Markup Language), CSS(Cascading Style Sheets)についてはある程度理解できるようになり、自分のサイトへの応用に少しはいじれるようになってきた。

　だが、カスタマイズに多用している JavaScript, Adobe Flash を制御する ActionScript については、ネットや参考書などで公開されている example を真似して作っている。それでは、少し自分向けにいじりたい場合には手も足もでなくなる。
　年寄りの冷や水であるが、基本的なことを学習しようかと思い始めた。学習したことをすぐ忘れてしまうので、自分自身への記録のためにブログ上に学習ノートを作ることにした。ブログとは、その語源からして自分のためようだから。

　教材は、W3Schools の tutorial を使うことにした。英語だが平易に書いてあり、頭の硬くなった老人でもなんとかついていけそうであるが、どこまで理解できるかは自信がない。

　W3Schools の Home 左メニューの BrowserScripting から Learn JavaScript を選択すると JavaScript Tutorial が出てくる。学習の仕方は、[JS Home] → [JS Introduction] とページを繰っていくのだが、ページの上下に [previous] [next] があるので、これに従えばよい。もちろん、記述は　example とかお試しページや関連ページへのハイパーリンクが設定されている。これらへリンクした後は、最初の内は元のページに戻って、 [next] ボタンで次のページに進んだ方がよさそうだ。

　Tutorial の [JS Introduction] に、

JavaScript's official name is "ECMAScript".
The standard is developed and maintained by the ECMA organisation.
ECMA-262 is the official JavaScript standard. The standard is based on JavaScript (Netscape) and JScript (Microsoft).

　とある。一方、ActionScript のWikipedia による解説では、

ActionScript（アクションスクリプト）とは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語である。ECMAScript(ECMA-262)を拡張した物である。

　とある。JavaScript の学習は、ActionScript の学習でもあるのをはじめて分かった。お恥ずかしい話である。

　[JS How to] [JS Where to] までは、いままで曲がりなりに、エキスパート達の JavaScript を使ってきたので理解できる。　 [JS Where to] で Using an External JavaScript を実験するために、

// これは、外部JSファイルを使う勉強用です。
document.write("<h1>これは、タグ h1 で書いています。</h1><br />");
document.write("<h2>これは、タグ h2 で書いています。</h2>");
document.write("<p>これは、タグ p で書いています。</p>");

　というような外部JSファイルをテキスト作成ソフト秀丸で作成し、サーバーに xxx_1.js というファイルをFTPソフト（私の場合 FFTP ）でアップした。ファイルを作成するとき、エンコードは UTF-8　でなければならない。秀丸は、このような機能が備わっているから便利である。

　なお、このエントリーに記述したHTMLは、次のようなものである。

　この外部JSをこのエントリーで実行してると、結果は次の通りとなる。JavaScript のなかに記述した HTML タグは、そのまま実行される。直接 HTMLでエントリー編集すればできることであるが、外部JSファイルを使う学習するためである。

　これを第１回とし、今後、W3Schools の順序に従って学習したことを記していきたい。

道東ドライブ：Google Maps API　Traial_3

　エントリー＜秋の網走・知床・阿寒・摩周・屈斜路湖：レンタカードライブ＞では、 ZENRIN の地図をキャプチャーしたものを使った。内容を同じにして、地図を Google Maps API に変更した。地図の右サイドの地名をクリックすると該当する場所のマーカーに吹き出しが出て、その中のリンクをクリックすると写真が出るようになっている。その他、拡大・縮小、ドラッグしての移動、航空写真にするなど Google Map　の機能はそのまま使える。この Google Maps API 導入には、いささかの学習を必要としたので、私のような初心者向けに学習体験を地図の下に備忘録的に記したい。

　前のエントリー＜泉北近辺私的観光地図：Google Maps API Trial_2＞と異なる点は、地図の右サイドに地名を並べ、それをクリックすると目的とする地点のマーカーに飛ぶようにしたことである。この API の題材は、前のエントリーでも紹介した Google Maps API Tutorial からいただいたものである。前のエントリーでは、sample のソースコードをコピペし、Google Maps API キーを自分用に変えたり、data を変更するだけで上手く導入することができた。
　今回いただいた sample (Part 3) は、 xml ファイルを使うことになっている。今回も xml ファイルをコピペしたらいいと思っていたが、そうは単純にいかなかった。コピペだけで上手くいかないとなると基礎知識が希薄であるから、どこをさわったらいいのか見当がつかない。 IE7の問題なのかなどと勘ぐったが、Firefoxでも上手くいかない。Firefox では、以下のようなメッセージが出る。

この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。

　IEでも似たようなメッセージがたびたびでる。 Ajax を良く理解していないと思い調査したが、Ajax についてのサイトはちょっと高度で敷居が高い。が、そんなに高度の問題でもないようだ。どうやら xml ファイルへの理解が少ないことが原因らしいと思われたので、基礎から学習することにした。xml を教えてくれるサイトは「たのしいXML」のような日本語のサイトがあるがもうひとつピンとこない。Google で "xml tutorial" でサーチしてみると英語の世界にに基本から教えてくれるサイトがあった。W3 Schools である。このサイトのXML Tutorial を最初から読んでいくと優しい英語で非常に分かりやすい。XML Basic の９講座あたりに、自分で作った xml ファイルをファイルの中身をコピペするのとファイル名を入れて、それぞれ validate する個所がある。ファイルの中身のコピペではエラーを起こさなかったが、ファイル名をいれると何の表示もない。Note: をみるとどうやらクロスドメインの問題らしい。ここからヒントをもらい今まで、Dreamweaver を使ってPC のC:ディレクトリーに　JavaScript を置き、呼んでくる xml ファイルをレンタルサーバー上に置いていたので上手くいかなかったようだ。JavaScript を含んだHTMLファイルもサーバー上に置いたら、望む結果が得られた。JavaScript に xml ファイルをよんでくるには、同じドメインでないと駄目のようである。目的としていることができたのでxml の学習は中断してしまったが、機会を見て続きを勉強したい。
　Google Maps API には、ルートに色を付ける方法も用意されているようなので再度挑戦してみたい。
　なお、xml ファイルのデータとして書き込む地点の経度・緯度を得るには、Google Map で望む地点をダブルクリックして、右上のメールをクリックすると送信フォームの中に数字が示されるので、それをコピペすれば楽である。正確性を期するならば、国土地理院の「ウオッ地図」で目的地点の経度・緯度が求められるが、度以下の少数部分は計算が必要である。
　Google Maps API に取り組んでから、アルツハイマーになりつつある頭脳弱体化防止には少し役立ったかもしれない。

泉北近辺私的観光地図：Google Maps API Trial_2

　前回のエントリーに引き続いて、Google Maps API についていろいろとサーチしてみた。このようなAPI(Application Program Interface)ソフトは、英語の世界の方が発展が早い。それで敬遠気味であった英語のサイトを探してみると Blackpool Community Church Javascript Team が運営しているGoogle Maps API Tutorial というサイトの存在が分かった。その Tutorial　の Part1 に求めていたコードがあった。おまけに最新の v2 版である。This is just I've wanted. である。前回のコードよりスマートだし、拡張性がある。 Donation を求めておられるが早速させてもらいたいと思う。
　地図上の赤いマークをクリックすると吹き出しがでて、その中のリンクをクリックするとリンク先や写真が出てくる。吹き出しの中は、HTMLで書けるのでかなりの応用が利くはずである。