ひな形スクリプト講座1

登場人物??

・・・いか先生、イカ煎餅ではない。
 ・・・わからないことだらけでいつも真っ青になっている、ナース

・・・さんぷるくん、サンプルを口で突く。

・・・こーひーぶれいくん。頭から出ているのは潮ではなく、エスプレッソ。

・・・上手くん・・・・・・・意味不明

記述に誤りがある場合はお知らせいただけるとありがたいです。

[ひな形スクリプト講座1][ひな形スクリプト講座2][ひな形スクリプト講座3][ひな形スクリプト講座4][ひな形スクリプト講座5][ひな形スクリプト講座6][ひな形スクリプト講座7][ひな形スクリプト講座8][ひな形スクリプト講座9][ひな形スクリプト講座10][ひな形スクリプト講座11][ひな形スクリプト講座12][ひな形スクリプト講座13][ひな形スクリプト講座14][ひな形スクリプト講座15][ひな形スクリプト講座16][ひな形スクリプト講座17][ひな形スクリプト講座18][ひな形スクリプト講座19][ひな形スクリプト講座20][ひな形スクリプト講座21][ひな形スクリプト講座22][ひな形スクリプト講座23][ひな形スクリプト講座24][ひな形スクリプト講座25][ひな形スクリプト講座26][ひな形スクリプト講座27][ひな形スクリプト講座28][ひな形スクリプト講座29][ひな形スクリプト講座30][参考資料索引]

 

ようこそ、ここは初心者向けのHTMLメールひな形に絞ったスクリプト講座です。
スクリプトの用語や規則は出てくる都度解説することにして、実際にスクリプトを組みながら、進めたいと思います。

講座中に疑問やわからないことが出てくるかもしれませんが、そこで止まらずに進んでください。後から振り返ると以前わからなかったことがいつの間にかわかるようになっていることが多々あります。質問はある程度の学習後に質問コーナーを設けるつもりです。質問コーナーは期間を設けて行います。それまでは質問を受け付けませんので、質問する具体的内容はそれまでに温めておいてください。

それでは早速はじめましょう。第一回は内容が濃いですよ。第一回目だけでもかなりのことが学べます。

画像を一番左端から一番右端へと移動させるスクリプトを作ってみましょう。

画像を一番左に配置する基本ソースとして次のようなHTMLドキュメントを作成します。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img src="akiakane.gif" style="position:absolute; left:0px; top:100px">
</body>
</html>

あきあかね画像はこれをDLできます。右クリックして「対象をファイルに保存」でパソコンに保存して利用ください。

imgタグでakiakane.gifを絶対配置でleft:0px,top:100pxの位置に配置します。このimgエレメントの親エレメントはHTML文書の表示されるbodyになります。
あっ、エレメントって簡単に言うとHTMLタグによって構成された要素のことです。タグはHTML文書(HTMLドキュメント)の規則に従った命令(マークアップ)のことで、通常<と>で囲まれています。開始タグと終了タグとで構成されるのが普通ですが、終了タグが不要のものや省略できるものもあります。

上の基本ソースでは<body>が開始タグで</body>が終了タグですね。終了タグは</タグ名>となっています。imgエレメントを記述するimgタグには終了タグが不要です。

上記HTMLドキュメントを表示させると、左から0ピクセル、上から100ピクセルのところにアキアカネが表示されます。imgタグにはwidthやheightが記述されていないので、このimgタグ命令では画像は本来の画像サイズで表示されます。省略した場合の状態は初期値(デフォルト)として値を持っていることが多いです。
imgタグでは省略時はwidthとheightはその画像の本来のサイズになると考えれば良いです。

次にJavaScriptで右に少しずつ動かすことを考えます。これはimgエレメントのleftを少しずつ増やしていけばいいのでは?とは誰しも思いつきますよね。
つまりimgのleftを0=>1=>2=>3=>・・・・・・のように次第に大きくすれば結果として右に動いているように見えるはずです。

ではimgのleftに思い通りの値を入れてやるにはどうすればいいかを考えます。

例えばスクリプトでleftを100pxにしてみましょう。

<script>
???
</script>

あれれ?いざやろうと思ったらどうしたら良いのか皆目見当が付かない・・ですよね。HTMLの表示に関わる記述にCSS(通常スタイルシートと呼ばれています)があるように、スクリプトにも操作したい対象のスタイルシートを設定したり、内容を受けとるために用意されている決まりごとがあります。操作したい対象のことをオブジェクトといい、オブジェクトはプロパティという形でCSS同様の状態や特徴を持つように設計されています。操作する対象であるオブジェクトはエレメントであるとは限りませんが、エレメントはスクリプトで操作の対象として扱われる時、オブジェクトになります。

で、オブジェクトのプロパティを記述する時はオブジェクトを表す文字に.ドットをつけてプロパティを表す文字を書きます。

object.propname

ここでオブジェクトを表す文字ってまた疑問が出てきましたね。プロパティを表す文字ってのもなにかわかりませんね。ここでは操作対象オブジェクトがimgエレメントなので、imgエレメントをオブジェクトとして指定できる文字ということになりますね。文書中にはimgエレメントが複数あってもおかしくないのですから、特定のimgエレメントを指定できるような名前でオブジェクトとして扱えれば、便利であることは想像にたやすいですね。HTMLにはidセレクタがあり、これは通常一意的なエレメントの識別に使用されます。文書中idは重複しないように記述するのが普通です(決定的ではありませんが)。

スクリプトもHTML文書中で使用されるのですから、このidがスクリプトでもエレメントを一意的に識別する名前であり、そのままオブジェクトとして指定することができる名前にもなってくれると便利です。実際ありがたいことにそのように設計されています。

プロパティを表す文字については、基本的にCSSに近い形でオブジェクトの種類(エレメントの種類)ごとに用意されています。これについては追々知ることにしましょう。
ここでは操作するimgエレメントにidをつけてオブジェクトを示す名前にしましょう。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img
id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
</body>
</html>

上記の様にidをつけると、CSSのleftに相当するプロパティはimg1.style.leftになります。これは正確にはimg1エレメントオブジェクトのstyleオブジェクトのleftプロパティです。これについては[参考資料索引]の[エレメントのプロパティ]にあるstyleオブジェクトを参照ください。

100ピクセルの位置に移動させるのは次のようになります。

<script>
img1.style.left=100
</script>

100ピクセル位置に表示

さてこれはleftが100ピクセルに移動しただけで決して動いているようには見えません。しかしimgエレメントのleftを操作する方法はわかりましたね。
leftを0から1ずつ増やして表示させ、右端まで動かすことを考えましょう。1ずつ増やすというところが味噌ですね。

今現在のleftの値がなんであってもその値に1プラスしてそれをleftにしてしまうにはどうするかを考えます。
上にあるimg1.style.left=100の=(イコール)は等しいという意味のイコール記号ではありません。これはJavaScriptでは右の値を左に入れなさい(代入しなさい)という意味です。JavaScriptでは=は等しいという意味には決してなりませんので、覚えておきましょう。尚VBScriptでは=は記述内容によって等しいという意味になる場合と代入するという意味になる場合があります。蛇足ですが、JavaScriptでの等しいは==のようにイコールマークを2つつなげて書きます。これは後の講座で出てきますので、ここでは「=は代入する」とだけ覚えておいてください。

さて現在の値が入っているものをaと表すとすると、JavaScriptでは「現在のaの値にbを加えてaに代入する」のはa=a+bと書きます。
a+bをaに入れ直すとも言えますね。これに則って現在のimg1のleftに1加えてimg1のleftに入れ直すのは、img1.style.left=img1.style.left+1のように書けそうです。

実際にやってみましょう。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>
img1.style.left=img1.style.left+1
</script>
</body>
</html>

あれ?スクリプトエラーが出ますね?実はこのプロパティの内容は文字列なんですね。次のサンプルをクリックして表示させてみてください。ステータスバーに0pxと表示されます。
style.leftの内容は文字列

JavaScriptでは何かの値に数値を+で足した場合、数値の足し算をするか、文字列を連結するかを自動判断して行われます。+には足し算の意味と文字列の連結という二つの意味があります。

img1.style.left+1は0pxという文字列に1を+する・・・文字列の連結と受け取られて、0px1という値になります。ところがimg1.style.leftには0px1という値を入れることはできませんので、エラーが出るんですね。

pxという単位がない場合はどうでしょう?サンプルはおきませんが、スクリプトでは通常ピクセル単位でスタイルシートの値は扱われます。pxという単位をimgタグに入れなかったとしても0pxになってしまいます。また文字列としての"0"に数値の1を+した場合、文字列として扱える場合は、0を数値として扱いません。"01"という文字列になってしまいます。文字列として扱えない場合は0という数値で計算してくれます  例)a="5"*2・・・aは10という数値になります。*は×(乗算記号)。

つまりimg1.style.leftは数値計算に使えないということがわかりますね。

でも安心ください。JavaScriptでのオブジェクトのプロパティには、数値として扱われる計算に用いることができるものが用意されています。style.pixelLeftプロパティも用意されているプロパティのひとつです。pixelLeftは現在のLEFTの属性値単位が何であってもピクセル単位での数値となります。単位を変更することなく、ピクセル単位に解釈し直して読み書きができるプロパティです。早速書き直してみましょう。

object.style.pixelLeftは読み書き可能な、数値型プロパティ。文字列ではない。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>
img1.style.pixelLeft=img1.style.pixelLeft+1
</script>
</body>
</html>

さあ、動いているのでしょうか?img1.style.pixelLeftの値がどう変化したかを見ることができるようにするため、+1された時にその変化した値が読み取れると良いですね。残念ながらJavaScriptには実行中の様々な値をモニターできるツールはありません。そこでステータスバーを利用して、直接その内容を表示させる方法がよくとられます。

次のようにスクリプト内に記述して表示させてみましょう。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1
" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft
</script>
</body>
</html>

こんな感じ・・・ステータスバーには0ではなく、1と表示されていますね。つまり0+1が実行されたことを示しています。

これでは次々に計算を繰り返して1ずつ増加していくようにはとてもならないことがわかります。img1.style.pixelLeft=img1.style.pixelLeft+1を何度も繰り返せという命令がありませんからね。

JavaScriptで最もよく使用される繰り返しとして、for〜繰り返し構文があります。英語の構文のように規則的な意味を持つ一連の規則的フレーズをJavaScriptでも構文といい、繰り返し命令も繰り返し構文といいます。

for(カウンタ変数=スタート値;条件式;カウンタ変数の増減式){処理}・・・よく使用される使い方

条件式がtrueのの場合、処理を実行します。その際カウンタ変数の増減式も実行されます。カウンタ変数はスタート値から始まります。一般にfor〜ループ処理(あるいはfor文ともいいます。通常この構文ではカウンタ変数を使って特定回数だけ処理を繰り返したい場合に使用します。

条件式は「カウンタ変数が10よりも小さい」とか「カウンタ変数が10以下である」とかの場合がほとんどです。カウンタ変数の増減式は、カウンタを1ずつ増加させるなどを記述することが多いです。

例)
for(i=1;i<10;i++){処理}・・・カウンタ変数iが1,2,3,4,5,6,7,8,9の時処理が行われます。10の時は条件式に当てはまらなくなるので処理は行われずに、この構文から抜けます。カウンタ変数が1から順に1ずつ増加します。i++はi=i+1と同じ意味を持ちます。i+=1でも同じ意味になります。ということはimg1.style.pixelLeft=img1.style.pixelLeft+1img1.style.pixelLeft++ともimg1.style.pixelLeft+=1とも書けることになります。

例えばiが3の時を考えますと、i<10はtrueになりますね。すると処理が実行されます。処理が終わるまでi++は実行されません。処理終了後i++が実行され、この時点でiは6になりますね。繰り返し構文なので、戻り今度はiが6の場合で条件式に当てはめられます。やはりi<10はtrueなので処理が実行されます。処理終了後i++によりiは7になります。iが9の時はi<10がtrueなので、処理実行後i++が実行されます。この時点でiは10になっています。戻りiは10の状態で条件式に当てはめられます。今度はi<10がfalseになります。従って処理が実行されずfor〜ステートメントブロックから抜けます。処理は必ず中括弧{}で囲んでください。

ではこのfor文でできるかどうか試してみましょう。とその前に画面の一番右端ってleftの値はどうなるのでしょう?ブラウザのウィンドウサイズは人によってまちまちですよねぇ。モニターの解像度だって違うし。それぞれのパソコンでHTMLを表示するソフトウェアの表示部サイズがわかれば右端の位置がわかりますよね。

安心ください、ひな形表示するInternetExplorerやOutlookExpressの表示部のサイズはJavaScriptで取得できるようになっています。いくつかありますが、ここではdocument.body.clientWidthを使用してみます。bodyの横サイズですが、スクロールバーを含みません。右端まで移動ですから一番右端に来たときのimg1のleftがどうなればいいかを考えましょう。leftが表示部の横幅まで達すると右端の位置から表示されるのではみ出て隠れてしまいますよね。ぴったり右端にくっついた形で画像が表示されるようにしたいので、img1の表示横幅分だけ左に寄せて表示させなければなりません。つまりleftの値は表示部の横幅からimg1の表示横幅を差し引いた位置になるまでという条件式が浮かびます。

img1の横幅はどうやったらわかるのでしょう?これもimg1.clientWidthが用意されていますので使用してみましょう。

これらを踏まえて条件式は、img1.style.pixelLeft<=document.body.clientWidth-img1.clientWidthとしてみます。aがb以下という条件式はa<=bとします。a=<bでは間違いになります。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>

for(i=1;img1.style.pixelLeft<=document.body.clientWidth-img1.clientWidth;i++){
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft

}
</script>
</body>
</html>

どうでしょう?異常な速さでステータスバーにimg1.style.pixelLeftの値が変化し確かに動いているようです。あきあかねは右端に表示されていますね。しかし動きが速すぎて動いているように見えませんね。しかも速度を調整できそうにありません。JavaScriptにwait()命令やpause()命令があれば、時間稼ぎができるのですが、そのような命令は用意されていないのです。

これではfor文での繰り返しは使えそうにありません。どうやら時間を稼ぐことのできる命令を使う必要がありそうです。
※Date()オブジェクトという日付オブジェクトを使用すればできそうですが、無駄な処理を繰り返させる手法をとるなど余計ややこしくなりますので、ここでは割愛します。

JavaScriptに用意されているタイマーは二つしかありません。setTimeout()とsetInterval()という命令です。

またまたここで新しい言葉登場します。これ言葉もJavaScriptでは大切なので覚えておきましょう。

今setTimeout()とsetInterval()という命令と書きましたが、JavaScriptでのオブジェクトが持っている動作をメソッドといいます。ここでのsetTimeout()とsetInterval()も命令として働きますが、やはりメソッドと言います。オブジェクトにはプロパティとメソッドがあり、プロパティはオブジェクトの状態や形態・特徴メソッドはオブジェクトに働きかけることができる動作です。メソッドはオブジェクトが予め持っている関数ともいえます。従いまして、メソッドは必ず()が付きます。プロパティには()が付きません。出てきたclientWidthもbodyやimg1のプロパティということになりますね。尚、プロパティには値を変更できる読み書き可能なもの、変更できず読み取り専用のものがあります。ちなみにsetTimeout()はwindowオブジェクトのプロパティです。

人に例えるとJaneの目は青いはプロパティ、Janeの目を閉じさせるはメソッドという感じです。そうそうオブジェクトは省略できるものがありますので、必ずしもobject.メソッド()形式ではなく、メソッド()だけ記述することがあります。頭の片隅にでも置いておいてください。

疲れましたか?先が見えない?でも核心の部分はかなり話したので、ここまででもScriptのこと結構詳しくなっているはずなんですよ。一休みでもしてくださいね。


さぁ、疲れは取れましたか?Scriptで一連の処理をする時、なくてはならないもの、そう関数を扱っていきます。難しく考えないでくださいね。

関数っといってもいろいろあるのですが、ここでは引数を伴わず、返り値も持たないユーザー定義関数を指します---忘れてください。

一連の処理を行う場合に、関数にしなかったものは、再利用できません。一回限りの処理ならば関数にしなくてもよいのですが、二度三度または繰り返し同じ処理をしたい場合には関数として処理をまとめてしまうのはスクリプトに限らずプログラムでの常套手段です。

では関数を書いてみましょう。

function 関数名(){
処理
}

関数であることを示すためにはfunctionとし、関数名に()をつけます。Functionと先頭を大文字にしてはいけません関数として実際に処理する内容は中括弧{}で括ります。{}内には処理内容を複数行に渡って記述することができます。基本的にはJavaScriptで用意されている単語は小文字ですが、new Array()など例外もあります。

とりあえず処理の一部を書いて見ましょう。関数名は半角アルファベットか半角数字を使用し、先頭文字は数字は使えないと覚えてください。他にも使える文字はありますが、アルファベットと数字を用いれば事足ります。ここではlidouとしました。

<script>
function lidou(){
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft
}
</script>

この処理も繰り返し行わなければ移動していかないことは明白ですね。関数の処理を繰り返すにはsetTimeout()を使用します。関数の中で処理が一回終わる直前にまた関数を実行させるという処理が必要なんです。

<script>
function lidou(){
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft
setTimeout("lidou()",100)
}
</script>

lidou関数が実行されるとimg1.style.pixelLeftが+1されます。更にステータスバーにその内容が表示されます。更にseTimeoutによりlidou関数が実行されます。こういった動作により繰り返しが起きます。setTimeout()ですが、次のような式になります。

setTimeout("処理",タイマー時間)

処理のところが""で囲まれていることに注意してください。処理はスクリプトであることは言うまでもありません。実行する時間はこのsetTimeoutが処理されタイマーとして働き出してからの時間です。タイマー時間の単位はミリ秒であることは覚えておかなければなりません。尚、1ミリ秒は千分の一秒、1000ミリ秒が1秒となります。
setTimeout("lidou()",100)0.1秒後にlidou()を実行せよという意味になります。

ではソースを書き加えて表示させてみます。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>

function lidou(){
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft

setTimeout("lidou()",100)
}
</script>
</body>
</html>

あれれ?まったく動きませんね。ステータスバーに値が表示されないことから一度も実行されていないことがわかります。どうしてなのか、もうお分かりですよね。
関数は確かに書きましたが、関数はどこからか実行しなさいって命令されないと実行されないのです。関数の内容はメモリに記憶されいつでも実行可能な状態になっていますが、実行しなさいという命令がこない限り何も起こらないのです。

では関数を実行させる命令を書きましょう。関数を実行しなさいという命令は関数名()をスクリプトの記述できるどこかにおけばいいことになっています。但し関数がメモリに記憶され実行可能状態になる前に関数を実行しなさいという命令が起こるとエラーが出ます。関数が実行可能状態でにないのに命令したからですね。この点は注意してくださいね。

ということで関数が確実に記憶されたよって位置に命令文を置きましょう。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>

function lidou(){
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft

setTimeout("lidou()",100)
}
lidou()
</script>
</body>
</html>

右移動

はい、移動してますねぇ。でも右端で止まりません。右端で停止する命令らしきものがありませんからね。

ということでまたまた新しい構文が出ます。if〜条件分岐構文(if〜条件分岐処理)です。これはもし条件式がtrueならば処理を実行しなさいという構文です。

if(条件式)処理

または

if(条件式){
処理
}

処理が1つしかない場合は赤い方で構いません。
if(条件式)
処理
と改行してはいけません。
改行する場合や処理が複数行にわたる場合は青い方のように処理内容を中括弧{}で囲んでくださいね。

では条件式を考えましょう。スクリプトでは答えがひとつとは限らないのがほとんどです。

@leftがdocument.body.clientWidth-img1.clientWidth以上になったら繰り返しを停止する

Aleftがdocument.body.clientWidth-img1.clientWidthになるまで繰り返す

どちらでも考えられるのです。

@ではif(img1.style.pixelLeft>=document.body.clientWidth-img1.clientWidth)returnとする方法が考えられます。
a>=bはaがb以上ならばという意味です。a=>bではありません。returnですが、関数を抜けるという命令です。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>

function lidou(){
if(img1.style.pixelLeft>=document.body.clientWidth-img1.clientWidth)return
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft
setTimeout("lidou()",100)
}

lidou()
</script>
</body>
</html>

右移動2

うまくいきました。

Aではif(img1.style.pixelLeft<document.body.clientWidth-img1.clientWidth){処理}という方法が考えられます。ここでは符号(比較演算子といいます)が<=ではなく、<となってることに注意します。
というのも=をいれるとmg1.style.pixelLeftがdocument.body.clientWidth-img1.clientWidthと等しくなった時にも処理が実行され、処理img1.style.pixelLeft=img1.style.pixelLeft+1によってimg1.style.pixelLeftがdocument.body.clientWidth-img1.clientWidth+1となってしまうからです。こういう細かいところでスクリプトが思い通りに動かないことがありますので注意してくださいね。

<html>
<head>
<title></title>
</head>
<body style="margin:0px; overflow:hidden">
<img id="img1" src="akiakane.gif" style="position:absolute; left:0px; top:100px">
<script>

function lidou(){
if(img1.style.pixelLeft<document.body.clientWidth-img1.clientWidth)
{
img1.style.pixelLeft=img1.style.pixelLeft+1
status=img1.style.pixelLeft

setTimeout("lidou()",100)
}
}
lidou()
</script>
</body>
</html>

右移動3

こちらもうまく動き停止しました。

第二回は変数を用いてこのスクリプトをもっと改良してみましょう。


[ひな形スクリプト講座1][ひな形スクリプト講座2][ひな形スクリプト講座3][ひな形スクリプト講座4][ひな形スクリプト講座5][ひな形スクリプト講座6][ひな形スクリプト講座7][ひな形スクリプト講座8][ひな形スクリプト講座9][ひな形スクリプト講座10][ひな形スクリプト講座11][ひな形スクリプト講座12][ひな形スクリプト講座13][ひな形スクリプト講座14][ひな形スクリプト講座15][ひな形スクリプト講座16][ひな形スクリプト講座17][ひな形スクリプト講座18][ひな形スクリプト講座19][ひな形スクリプト講座20][ひな形スクリプト講座21][ひな形スクリプト講座22][ひな形スクリプト講座23][ひな形スクリプト講座24][ひな形スクリプト講座25][ひな形スクリプト講座26][ひな形スクリプト講座27][ひな形スクリプト講座28][ひな形スクリプト講座29][ひな形スクリプト講座30][参考資料索引]