イヌでもわかるJavaScript講座

【リスト】

<script language="JavaScript">

</script>

↓　このフォームには、上記のリストと同じものが入っています。[CTRL]+[A]で全選択して、コピーできます。

【説明】

myMes = new Array(24);
myMes は変数です。自分の好きな名前で結構です。この変数にメッセージを格納します。

new Array() は、配列宣言です。Array(24) なので、変数 myMes は２４個の「行」を持つことになります。つまり、２４時間分です。

続いて myMes[0]= ... で、それぞれの時間に表示したいメッセージを入れていきます。
変数右隣の括弧 [ ] は、配列宣言された変数のどこの「行」を指すかを表す記号です。

※配列宣言を行わなければ変数に「行」はありませんので、１個のデータしか保存できません。このときは myMes= ... のようにデータをセットします。

数を数えていく場合、私たちは１から始めますが、配列は０から数えていきます。
myMes = new Array(24); と宣言すると、myMes[0] ～ myMes[23] の行ができます。

午前０時は myMes[0] 、午後１１時は myMes[23] というふうにデータをセットすることにします。

注意：ゼロから数えるについて
24個の配列を生成すると、0番目から23番目のようにゼロから表現します。
ゼロから数えると説明しましたが、「こんにちは」は何文字かというと5文字です。「こ」は1文字、「こん」は2文字です。決して「こ」は0文字ではありません。何番目と何個がごちゃごちゃにならないように気をつけてくださいませ。

上のメッセージは、サンプルなので味気ないです。心のこもったメッセージに変えましょう。

document.write(myMes[(new Date()).getHours()]);
で、その時間のメッセージを表示します。
これはちょっと、まとめすぎました。
わかりやすくすると

myDate = new Date();
myHour = myDate.getHours();
myMessage = myMes[myHour];
document.write(myMessage);

上から、現在の時間を取得します。このデータは年月日時分秒の情報をもっています。
次に、その時間の「時(hour)」を取得します。取得したデータは0～23のはずです。
その「時」番目のmyMesテーブルの内容を取り出します。上でセットしたメッセージです。
それを表示します。

という感じです。

このようにあいさつ文はメッセージ定義と命令１行で済むという、非常に単純な仕掛けだったのです。

いま、上の命令文を完全に理解しようとしなくて結構です。たぶん、暗号文か英語を眺めているように見えると思います。実はプログラムも英語の勉強と同じで、慣れると見えるようになってきます。なぁ～んとなく、分かったような気がすれば、このステップも終了です。

補足：２４時間分も挨拶を考えるのは億劫だ！という方は、かなりとんでしまいましたが、Ｓｔｅｐ．６８に「あいさつ文を表示してみましょう億劫編」があります。(^^;

【難しい話】

●変数宣言 var

JavaScriptでは、
myMes = "こんにちは" ;
のように、いきなり変数を使った場合、myMes の格納空間を自動的に作ってくれてデータである "こんにちは" を格納してくれます。

しかし、高度なプログラム言語では「こういった変数を使いますので準備していてください」といった変数宣言という処理があります。
JavaScript にもあります。
var myMes ;
myMes = "こんにちは" ;
といった感じで
var 変数 ;
にて１度だけ宣言します。

宣言はカンマ区切りで
var 変数 , 変数 , 変数 ;
のように連続して宣言もできますし、

var 変数 = データ ;
のように宣言して初期値を代入しておくこともできます。

JavaScript のデータの種類には数値型、文字型、ブーリアン型、オブジェクト型、配列型の５種類の「型」がありますが全て var にて宣言します。

JavaScript はバリアントタイプの変数で、変数は全ての型を代入することができます。
var myMes = "こんにちは" ;
myMes = 1 ;
このように文字列が代入されていてる変数も、数値を代入することで数値型の変数に変更させることもできます。

また、
myMes = new Array(3) ;
のように3個の行、myMes[0]～myMes[2] の配列宣言をしていても
myMes[3] = "こんにちは";
のように宣言範囲を超えた代入をすると、その分「行」を自動で追加生成してくれます。

変数にはグローバル変数とローカル変数がありますが、var で変数を宣言しなければグローバル変数として処理されます。
注意：ブラウザの種類で仕様が違うようです。

オブジェクト型とはオブジェクトの位置を示す場所を格納することです。
document.getElementById(myID).style.left = myXpoint ;
document.getElementById(myID).style.top = myYpoint ;
は、
myObj = document.getElementById(myID).style ;
myObj.left = myXpoint;
myObj.top = myYpoint;
のように使うことができます。

変数宣言をするのは一般であり、Microsoft も安全性の面から宣言をすることを推薦しています。しかし、当サイトはこの var 宣言はしていません。それは次のような些細なバグの発見の可能性を優先しています。

変数名は大文字と小文字も区別されて、初心者にとっては綴りのタイプミスは必須です。
var 宣言された変数はメモリが設定され、その内容は undefined (NaN) になります。
myOrenge = 100;　←myOrangeをmyOrengeとタイプミスした
myTotal = myOrange * 20;
このようなタイプミスがある場合、myOrange を変数宣言していれば、NaN*20=NaN として処理は続行されますが、変数宣言されていない変数名をいきなり演算などに使用した場合は、「myOrangeは宣言されていません」と親切なエラーウィンドウまで出て処理を停止してくれるため、エラー対処が容易になります。