エントリーで、HTML や Javascript , XML のソースコードを記録するときには、<pre><code>～</code></pre>という形で記述している。
　私のMovable Type でのブログは、「小粋空間」さんのテンプレートを使わせてもらっている。もちろん付属しているCSS(Cascading Style Sheets)も使っている。そのCSSでの　<pre>　は次のように設定されている。backgroundの色は、いじっていているが。

pre {
    margin: 15px 20px 0px;
    padding: 10px;
    background: #ffffe0;
    border: 1px solid #999;
    font-size: 83.3%;
    line-height: 1.5;
    width: 100%;
    overflow: scroll;
}

　このまま、100行、200行あるソースコードを記載すると、縦に非常に間延びしたエントリーになってしまう。
　これを避ける方法をネットでサーチしてみると余りにも普通の知識なのか適切な記述が見つからなかった。もう一度 CSS の基本に立ち返って学習してみると、CSS の pre の部分に、

pre {
  ,,,,
  height: 150px;
  ,,,,
 }
 

といれればよいことが分かった。　
　が、これでは１行のコードを表示するときでも、縦 150px のボックスができてしまう。それで面倒でも、本文のHTMLで

<pre style="height: 150px"> 

とスタイルを指定すればいいことが分かった。この方法を使えば、ボックスの縦の大きさを表示するコードの行数に合わせて変えることができる。スタイルを指定しなければ、縦スクロールがなく、全てのソースコードが表示される。余りにも基本的なことなので、ブログに載せるのは恥ずかしいが、自分自身の備忘録として残しておきたい。

　なお、、<pre><code>　～　</code></pre>　の　～　部分（ソースコード）にある　<　>　は、特殊文字と判定されるので、&lt; &gt;  とHTML エンコードする必要がある。
私はエンコードには、HTML エンコードフォームというサービスを使わせてもらっている。これを使うと空白文字が 、&nbsp; に、" が &quot;に、& が &amp;にエンコードされるが、エンコードされたものをそのまま　Copy&Paste して使っても問題はない。
　また、いろいろな場面でソースコードを整理する必要があるが、そのようなときはシェアウエアの「秀丸エディタ」を使っている。テキストを編集する様々な機能が備わっているので、非常に便利である。

　昨年秋に、宍道湖をドライブしたときの旅行記はエントリーしたが、旅行地図を作ろうと思いながらできずにいた。
　最近新たな知識も取り入れて、宍道湖ドライブ地図を作製したので、備忘録として記録しておきたい。
　ツーリストがプロを使って作成していると思われる Google Maps API による地図には、数字や英字の入った Marker を格好良く使っている。私も使いたいと思っていたが、数字入りマーカーを作る方法がよく分からなかった。どこかに、できあいのものはないかと、"番号付きマーカー"というような言葉でネットサーチしていると、dLinkbRING というサイトを見つけた。そこで提供されている番号付きマーカーがもちろん使えるが、そのページに紹介されている、こんな便利なサイトにいくと自分の好きな色のマーカーに、数字あるいは英字を入れて作れるサービスが提供されていることが分かった。これで、次のような番号付きマーカーを作った。


　これらを地図上に表示させるには、AjaxTowerというサイトのGoogle Maps入門(Google Maps API)を参考にした。このサイトの「マーカーのアイコンを指定」の JavaScript コードを参考にして、以前に　「伊勢参り」　のエントリーで使った　GoogleMaps API コードの JavaScript 部分に手を加えてみたのが、次のコードである。

<!-- 番号入りマーカーを表示する。-->
    <script type="text/javascript">
    //<![CDATA[

    var map;
    var marker1, marker2, marker3, marker4, marker5;

    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(35.430883,133.01199),10);
    map.setMapType(G_HYBRID_MAP);

    var markerIcon1 = new GIcon();
    markerIcon1.image = "http://n-shuhei.net/xxxxxxx/xxxxxx/marker1.png";
 //   markerIcon1.shadow = "./img/shadow.png";
    markerIcon1.iconSize = new GSize(35, 40);
 //   markerIcon1.shadowSize = new GSize(70, 56);
    markerIcon1.iconAnchor = new GPoint(18, 40);

    var markerIcon2 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker2.png");
    var markerIcon3 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker3.png");
    var markerIcon4 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker4.png");
    var markerIcon5 = new GIcon(markerIcon1, "http://n-shuhei.net/xxxxxxx/xxxxxx/marker5.png");

    var opt1 = {icon:markerIcon1};
    var opt2 = {icon:markerIcon2};
    var opt3 = {icon:markerIcon3};
    var opt4 = {icon:markerIcon4};
    var opt5 = {icon:markerIcon5};

    marker1 = new GMarker(new GLatLng(35.469199,133.053875), opt1);
    marker2 = new GMarker(new GLatLng(35.44333,133.284674), opt2);
    marker3 = new GMarker(new GLatLng(35.444729,132.866077), opt3);
    marker4 = new GMarker(new GLatLng(35.401434,132.685919), opt4);
    marker5 = new GMarker(new GLatLng(35.377854,133.198242), opt5);
		
    var marker1_is_displayed = 0;
    var marker2_is_displayed = 0;
　　var marker3_is_displayed = 0;
　　var marker4_is_displayed = 0;
　　var marker5_is_displayed = 0;

    function checkbox1clicked() {
      if (marker1_is_displayed == 0) {
        map.addOverlay(marker1);
        marker1_is_displayed = 1;
      } else {
        map.removeOverlay(marker1);
        marker1_is_displayed = 0;
      }
    }

    function checkbox2clicked() {
      if (marker2_is_displayed == 0) {
        map.addOverlay(marker2);
        marker2_is_displayed = 1;
      } else {
        map.removeOverlay(marker2);
        marker2_is_displayed = 0;
      }
    }
	
	function checkbox3clicked() {
      if (marker3_is_displayed == 0) {
        map.addOverlay(marker3);
        marker3_is_displayed = 1;
      } else {
        map.removeOverlay(marker3);
        marker3_is_displayed = 0;
      }
    }
	
	function checkbox4clicked() {
      if (marker4_is_displayed == 0) {
        map.addOverlay(marker4);
        marker4_is_displayed = 1;
      } else {
        map.removeOverlay(marker4);
        marker4_is_displayed = 0;
      }
    }

    function checkbox5clicked() {
      if (marker5_is_displayed == 0) {
        map.addOverlay(marker5);
        marker5_is_displayed = 1;
      } else {
        map.removeOverlay(marker5);
        marker5_is_displayed = 0;
      }
    }
   //]]>
    </script>

もともとのコードがどこかのページからいただいたコードだから、よく理解していない部分もあるが、なんとか上手く機能しているようである。 iconSize での数字を変えることで、番号付きマーカーの形が変わるようである。また、shadow もつけられる。
　このようにして「宍道湖私的観光地図」を作った。下は、その screenshot であるが、全体像は右メニューにボタンを置いたのでクリックしてみて欲しい。

なお、このGoogle Maps入門にある「マップタイプの選択」ページで示されている JavaScript, Google Maps API リファレンスのコードを参考に、初めに表示される画面を「地図＋航空写真」(HYBRID) に設定した。
　Google Maps入門のサイトには、他にも少し学習すれば使えそうなインストラクションもあるので応用していきたいと思う。

　アメリカのWeb Radio サイト Live365 に、2007年2月から年金の小遣いを捻出して有料でインターネット・ラジオ放送局を開いている。このブログで何度も紹介しているRadio Senboku である。古いLP や CD 、eMusic からのダウンロードなど、いろいろな方法で収集した Jazz を10時間・100曲ぐらいの Playlist に編集して流している。更新は１ヶ月半に１回くらいの割合である。自分自身がパソコンなどの作業をするときの BGM が目的であるが、世界の２０カ国ぐらいのJazz 好きが聴いてくれているようだ。

　先日、Live365 のホームページを見ていたら、ウェブページに貼り付けられる Link Widget が提供されていることが分かった。ブログのヘッダーにも、リンクボタンを置いているが、早速右メニューにRadio Senboku へアクセスするリンク・バナーを置いてみた。

　ここに表示されるプレイボタンをクリックすると、Live365 にユーザーとして登録（無料）していない人は登録を求められるが、既に登録している人は、 Radio Senboku につながり　Jazz を聴くことができる。有料（月￥500ほど）であるが、VIP 登録するとコマーシャルなしで10,000 以上あるどの局でも連続的に聴くことができる。
　このリンク・バナーは、下のように現在流れている曲を収納しているCDジャケットが表示され、Artist と Track 名が出てくる。演奏を中止するには、バナーの上にカーソルを持っていくと現れるストップ・マークをクリックすればよい。
　その下に　[Radio Senboku Playlist]ボタンを置いた。クリックすると、現在放送している曲の Excel リストが表示される。先日、「和泉の国ジャズストリート」で聴いたテナーサックス奏者　高橋知道さんの [Luis] というオリジナル曲（演奏も）も入れてみた。 Jazz が嫌いでなければ一度クリックしてみてください。ヘッダーのリンクボタンよりアクセスするより簡単です。

　　　

　梅雨明けから酷暑の日が続き、屋外での活動はほとんどできない。特に、ここ大阪堺市は全国的に見ても暑い都市で連日最高気温が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!"　と本来のメッセージが表示され、エラーは表示されない。次のボタンをクリックしてみてください。

　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" />

　サンデー毎日なのに結構なにやかやと時間をとられて、お勉強がすすんでいない。例によって、W3Schools の tutorial にしたがって、次のステップに進もうと思う。

　ネットでいろいろと調べてみると、try... catch という構文は、Ajaxでほぼ必須になっているらしい。私のJavaScript の勉強は、Web ページをもう少し動的にしたいという、だいそれた願望に基づいているから、Ajax に必須なら、特に力を入れて勉強したいと思う。

　try...catch の構文の文法は、次のように解釈できる。

　Script を書いていて、プログラムにバグがないかどうかを確認するときなどに使うらしい。エラーの内容を表示するようにしておくと、バグの箇所と特定するのに役に立つということである。本格的に JavaScript プログラムを書くことはまだまだ先のことであろうが、おぼえておきたい。

　W3Schools には、例示として次のようなコードが示されている。

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Click OK to continue viewing this page,\n";
  txt+="or Cancel to return to the home page.\n\n";
  if(!confirm(txt))
    {
    document.location.href="http://www.w3schools.com/";
    }
  }
}
</script>
</head>


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


</html>

　try ブロック部分の adddlert("Welcome guest!");　の　adddlert　は alert のミススペルでエラーとなるから、catch ブロックの処理を行って、confirm-box を表示させることになる。

　あまり意味はないが、テストのために上のコードを少しいじって、このエントリーに取り込んでみた。下のボタンをクリックしてみてください。 Confirm Box が出るはずです。

　　　　
　なお、この JavaScript 部分を外部ファイル化し、テンプレートの head 部分に読み込んで使うことを試したがうまくいかなかったので、直接 head 部分に書き込んでいる。

　ちょっとサボっていた W3Schools の JavaScript のお勉強を再開した。じつは順序に従って、for..in という構文の学習していたのだが、example の文法がよく理解できない。あとで学習する object のときにも出てくるようなので、スキップすることにした。 object がよく理解できていないことが原因のようなので、その学習の中で理解していくことにした。

　それで今回は、次のステップである event の勉強である。

　Web ページの全ての要素（element）は、JavaScript 関数(function)　のトリガーであるイベント(event）となる。例えば、ボタン element の onClick　event は、ボタンをクリックすると実行される関数を指示する場合に使用される。イベント(event）は、HTMLタグの中で定義する。

　event には次のようなものがある。

• マウス・クリック
• Web ページあるいはイメージのロード
• Web ページ上のホットスポットにカーソルが乗る。
• HTML form で input box が選択される。
• HTML form をサブミットする。
• 何らかのキーが叩かれる。

　event は通常、関数との組み合わせで使用される。関数は、event が発生する前には実行されない。

　例えば、 onClick　event は次のように使われる。

　このコードを実行すると次のようになる。Copy Text ボタンをクリックしてみてください。



　JavaScript で認められている event の一覧を、英語であるが W3Schools から引用加工させていただいて、下のテーブルに記載した。
　詳細は、W3Schools の complete Event reference にある。それぞれの event の使い方を詳しく説明している。

　 　

Attribute	The event occurs when...
onabort	Loading of an image is interrupted
onblur	An element loses focus
onchange	The user changes the content of a field
onclick	Mouse clicks an object
ondblclick	Mouse double-clicks an object
onerror	An error occurs when loading a document or an image
onfocus	An element gets focus
onkeydown	A keyboard key is pressed
onkeypress	A keyboard key is pressed or held down
onkeyup	A keyboard key is released
onload	A page or an image is finished loading
onmousedown	A mouse button is pressed
onmousemove	The mouse is moved
onmouseout	The mouse is moved off an element
onmouseover	The mouse is moved over an element
onmouseup	A mouse button is released
onreset	The reset button is clicked
onresize	A window or frame is resized
onselect	Text is selected
onsubmit	The submit button is clicked
onunload	The user exits the page

　JavaScript の勉強が、１週間ほど空いているので再開することにした。

　W3Schools の次のレッスンは、Loop で使う break と continue である。

• 二つの特殊なコマンド break, continue をloop の中で使うことができる。
• break コマンドは、loop の途中である条件になれば、その loop を中止する。
• 例を次に示す。
  <html>
  <body>
  <script type="text/javascript">
  var i=0;
  for (i=0;i<=10;i++)
  {
  if (i==3)
  {
  break;
  }
  document.write("The number is " + i);
  document.write("<br />");
  }
  </script>
  </body>
  </html>


• 結果は次の通りになる。
  The number is 0
  The number is 1
  The number is 2


• continue コマンドは、loop の途中である条件になる場合のみloop を実行しないが、loop は続ける。
• 例を次に示す。
  <html>
  <body>
  <script type="text/javascript">
  var i=0
  for (i=0;i<=10;i++)
  {
  if (i==3)
  {
  continue;
  }
  document.write("The number is " + i);
  document.write("<br />");
  }
  </script>
  </body>
  </html>


• 結果は次の通りになる。
  The number is 0
  The number is 1
  The number is 2
  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

　構文は理解できたが、どのような時に使われているのか分からない。

　なお、このようなエントリーを編集するときに、< や > を使う場合には、&lt; &gt;　とエンコードしなければならないが、今回から HTML エンコードホームというサービスを使わせてもらうことにした。
　W3Schools などの example コードをこのページのエンコード前ボックスにコピペ（copy & paste）すれば、エンコードされた結果がエンコード後ボックスに表示されるので、これをエントリー編集画面にコピペすればよい。
　今までは、< などを一つずつ&lt; などと書き直していたのでずいぶん楽になった。
　今頃気がつくのは、老齢化現象の一つと思うが。

　W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。

　なお、 Customaize History 履歴ページの番号降順設定は、上の JavaScript でInternetExplorer(IE) では上手くいっていたが、Mojilla 系の Firefox Netscape では番号が倍になり、原因が突き止められないまま放ってあった。
　今回改めて "childNodes.length" でネットサーチしてみると答えがあった。thescript.com というサイトのフォーラムによると、どうやら Mojilla 系では、 whitespace （空白スペース）をカウントの対象に入れるらしいことが分かった。
　そこで、Customaize History 履歴ページ(MovableType　のインデックス・テンプレートで作成している）の編集画面で編集しやすくするために入れていた </li>....<li> の間の空白スペースを削除すると、Mojilla 系でも IE と同じように、綺麗な降順番号を表示するようになった。<li>..</li> のタグ・セット間に必ず空白スペースが入っていたので、偶然数字が倍の偶数になっていたらしい。

　この世界、学習すべきことは五万とある。死ぬまで退屈することはないだろう。

　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 は理解できたが、どのような場合に使われるかがよく分からない。