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

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


2008年4月28日

隠居のお勉強:JavaScript(11) try...catch

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

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

 try...catch の構文の文法は、次のように解釈できる。
try{エラーをキャッチしたいcodeの実行}
catch(err){エラーをキャッチしたときの処理内容}


 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 部分に書き込んでいる。

2008年4月19日

隠居のお勉強:JavaScript(10) event

 ちょっとサボっていた 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 は次のように使われる。
Field1: <input type="text" id="field1" value="おはよう!!">
Field2: <input type="text" id="field2">
Click the button below to copy the content of Field1 to Field2.
<button onclick="document.getElementById('field2').value= document.getElementById('field1').value">Copy Text</button>

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

Field1:
Field2:

Click the button below to copy the content of Field1 to Field2.


 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

2008年4月 7日

隠居のお勉強:JavaScript Basic (9) Break and Continue

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

 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; などと書き直していたのでずいぶん楽になった。
 今頃気がつくのは、老齢化現象の一つと思うが。

2008年3月31日

隠居の JavaScript :番号付きリストを降順にする。(追記)

 W3Schools JavaScript Tutorial の Loop の項まで学習して、Customaize History 履歴ページでのリスト番号を降順にする方法に使っている Expert が書いた次の JavaScript が少し理解できるようになったので、私の理解できた範囲でコメント文に記した。
<!--list descend-->
<script>
var o = document.getElementById("hoge");
//getElementById メソッドは指定ID(この場合:"hoge")のエレメント(この場合<ol>を指定する。
//"hoge"は、HTMLの<ol id="hoge"> というように指定している。
var max = o.childNodes.length;
//<ol id="hoge"> 要素内の子ノード(この場合、<li>..</li>)の数を変数 max に与える。参考:AllAbout JavaScript
for(var i = 0;i < max;i ++)
//隠居のお勉強:for loop の例
{
o.childNodes[i].value = max - i;
//子ノード<li>の i 番目に、(最大番号- i )を代入する。結果は、番号が降順になる。
}
</script> 


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

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

2008年3月30日

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

 W3Schools JavaScript Tutorial の第8回である。まだ、基礎部分を学習している。使わせてもらっている 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 は1回繰り返されるたびに、1 付加される。結果は次のようになる。
      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 は理解できたが、どのような場合に使われるかがよく分からない。

2008年3月28日

隠居のお勉強: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()" />

    • 右のボタンをクリックするとリンク先のURLを入力できる。  

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


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

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


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

2008年3月21日

隠居のお勉強:JavaScript Basic (5) switch 構文を使って、本日の曜日を表示する

 前回の学習[JS If...Else] で、JavaScript を自分のブログへいささかの応用ができたので、勇気を得て続けて W3Schools JavaScript Tutorial でのお勉強である。

  • 今回は、条件式 [JS Switch] の学習。
    • 多くの選択肢から、一つの条件式を選んで実行する場合には、switch 構文を使わねばならない。
    • 以下は使用例である。
      <script type="text/javascript">
      //You will receive a different greeting based
      //on what day it is. Note that Sunday=0,
      //Monday=1, Tuesday=2, etc.
      var d=new Date();
      theDay=d.getDay();
      switch (theDay)
      {
      case 5:
        document.write("Finally Friday");
        break;
      case 6:
        document.write("Super Saturday");
        break;
      case 0:
        document.write("Sleepy Sunday");
        break;
      default:
        document.write("I'm looking forward to this weekend!");
      }
      </script>
    • break ステートメンを書くのは次の選択肢が実行されることを阻むためである。

  • これを応用して、自分のブログのタイトル下にある横長カレンダー横に、本日の曜日を表示することを試みた。横長カレンダーでは、曜日が分からない。
    • 上の example を参考に、次のような外部 js ファイルを秀丸で作成した。ファイル名は何でもいいが、TheDay.js として FFTP でブログサーバーにアップした。
      
      //今日は何曜日かを表示する js ファイル
      var d = new Date();
      theDay=d.getDay();
      switch (theDay)
      {
      case 0:
        document.write("<span id='js-text-red'><b>本日:日曜日</b></span>");
        break;
      case 1:
        document.write("<span id='js-text-grey'><b>本日:月曜</b></span>");
        break;
      case 2:
        document.write("<span id='js-text-grey'><b>本日:火曜</b></span>");
        break;
      case 3:
        document.write("<span id='js-text-grey'><b>本日:水曜</b></span>");
      break;
      case 4:
        document.write("<span id='js-text-grey'><b>本日:木曜</b></span>"); 
      break;
      case 5:
        document.write("<span id='js-text-grey'><b>本日:金曜</b></span>"); 
      break;
      case 6:
        document.write("<span id='js-text-blue'><b>本日:土曜</b></span>");
       break;
      }
      

    • スタイルシートに、次のスタイルを追加した。日曜日は、文字色を赤に、土曜日は水色にした。
      /* JS TheDay text */
      #js-text-grey { color: #408080; font-size: 10px; }
      #js-text-red { color: #ff0000; font-size: 10px; }
      #js-text-blue { color: #8888ff; font-size: 10px; }

    • MT テンプレート(メイン・エントリー)の<body> 部のカレンダー表示部分に、次のステートメントを追加した。
      <script src="http://n-shuhei.net/blog/TheDay.js"></script>
 これで、横長カレンダーの横に、本日:金曜日というように、ブログに訪問していただいた日の曜日が表示されるようになった。自作 JavaScript の2作目である。

2008年3月20日

隠居のお勉強: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 ファイルをブログ・テンプレートのタイトル表示部分に、下の記述を挿入した。
 朝10時までに訪問していただいた方には、「おはようございます。」、10時から18時までに訪問していただいた方には、「こんにちは」、18時以降24時までの間に訪問していただいた方には、「今晩は」と表示されるはずである。
<script src="http://n-shuhei.net/blog/Greeting.js"></script> 


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

 

2008年3月20日

隠居のお勉強: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 ファイルを記述してタイトル部分に使用してみるとなんとか形になった。
 詳細については、次回のエントリーに掲載したい。

2008年3月19日

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

 今日は朝から春雨が強く降っている。再開をはじめたDIYは今日はお休みにして、PC 前でRadio Senbokuを聴きながらJavaScript の晩学をした。教材は、W3Shools のものである。
 
  • 今日は、まずコメントの書き方について。
    • 一行に書くときは行頭に //
    • 複数行にまたがるときは、コメントの先頭に /* コメントの終わりを */ とする。
    • もちろん、スクリプトをコメントアウトするときにも使える。
  •  これは、当然のことながらActionScript の記述でも同じである。CSS では、/* -------- */ だけのようである。
     HTMLでは、コメントは一行でも複数行でも、行中でも、コメントの先頭は <!-- で、終わりは --> である。

  • 次に、[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 を参考にさせていただいた。普通の英語辞書には載っていない。

2008年3月18日

隠居のお勉強: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は、次のようなものである。
<script src="http://n-shuhei.net/blog/xxx_1.js"></script>


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


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

2007年4月23日

XHTMLstrict に Flash を表示する

隠居のFlash:<object> と<embed>で書いたように、どのブラウザでも動くように Flash をHTMLに埋め込むには、<object> と<embed>という同じようなタグを書かねばならない。最近はHTMLをもっと厳密(strict)に書いて、どのブラウザでも動くようにしようということで、W3C(The World Wide Web Consortium )は、XHTML strict を推奨している。この XHTML strict では、<embed>タグは使えない。現在MovableTypeで使っている「小粋空間」さんのテンプレートは、移行段階のXHTML Transitional なので現状で困っているわけではないが、Flashを XHTMLstrictで表示させる(embedタグを使わずに表示させる)コードが紹介されていたので、ブログのヘッダー部分の Flash を変更してみた。

続きを読む "XHTMLstrict に Flash を表示する"