ひな形スクリプト講座6

 

[ひな形スクリプト講座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][参考資料索引]

 前回は乱数Math.random()が出てきましたね。0以上1未満の乱数になる、このことをしっかり理解しておいてください。0以外は小数になりますね。このようなスクリプトに予め用意されている関数をビルトイン関数と呼びます。小数点以下を切り捨てるMath.floor()もビルトイン関数です。関数は自作することもできましたね。その方法は function 関数名(){処理}でした。関数はメソッド同様に必ず()が付きます。

さて、条件式によっていくつかの場合分けをして処理を変える方法で、前回はif条件分岐構文をいくつも使用して処理を振り分けしました。もっと場合分けが増えた時、if文をいくつも書き連ねるのは、プログラムの流れがわかり辛くなり、混乱することになり兼ねません。

そこでswitch条件分岐構文の登場!
条件式であられる値が特定の値をとる場合に、処理を分ける時に使用します。VBScriptではもっと使い勝手がいいのですが、JavaScriptでは特定の値をとる場合にのみ分岐させることができます。

switch(評価式){
case 値1:
処理1;break
case 値2:
処理2;break


default:
処理x
}

評価する値や式が特定の値をとる場合、値1になる時には処理1を実行する、値2になるときには処理2を実行する、・・・・・、いずれにも当てはまらない場合は処理xを実行する

defaultは本来のとか元々のという意味で、通常はdefault:以下の処理xが実行されますが、case以下の値に一致する場合にのみ、その処理が行われます。
breakがついていますが、これは破るつまり、swicth文を抜けるということになります。breakがないと、例えば値1になった時に処理1が実行されますが、その後の処理も実行してしまう癖を持っています。つまりbreakがないswitchステートメントブロック(後述)では、値1の時処理1=>処理2=>・・・=>処理xと次々に実行されてしまうので、注意してください。

簡単な一例を
switch(saikkoro){
case 1:
status="目は1です";break
case 2:
status="目は2です";break
case 3:
status="目は3です";break
case 4:;case:5:
status="目は4か5です";break
default:
status="目は6です"
}

saikoroという変数の値が1の時、目は1ですとステータスバーに表示します4または5の時は目は4か5ですと表示します。case 4:;case 5:この書き方に注意してみてくださいね。1、2、3、4、5のいずれでもない場合はdefault:以下の処理が実行されるので、目は6ですと表示されます。

case のところに例えば0以下(<0)などの比較式を使用できないのは残念です。

尚、出現する可能性のある値によってcaseによる場合分けが全て記述されている場合はdefaultは必ずしも必要としません。
上の場合、default:の代わりに、case 6:としても問題ありません(さいころの目は1から6までの整数しか出現しませんから)。

 

ではこのswitch条件分岐構文を使用して前回の場合わけをしてみましょう。

var saikoro=Math.floor(Math.random()*4)+1
if(saikoro==1){処理1}
if(saikoro==2){処理2}
if(saikoro==3){処理3}
if(saikoro==4){処理4}

が前回の振り分けでした。saikoroは1か2か3か4の値しかとりませんでしたね。

switch(saikoro){
case 1:
処理1;break
case 2:
処理2;break
case 3:
処理3;break
case 4:
処理4
}

これは次のように書いてもOKです。
swicth(saikoro){
case 1:
処理1
break
case 2:
処理2
break
case 3:
処理3
break
case 4:
処理4
}

;はスクリプトの文節の区切りみたいなものです。一行に複数の命令や演算・計算式を記述する場合は、;で区切って書くことができますが、改行によって区切ることができるかどうかは自動判断されます。即ち改行によって区切りが可能である機能が備わっているため、命令区切りの;行の最後尾に入れなくても構いません。この文節をステートメントと呼びますが、これは後で説明します。
swith(saikoro){
case 1:
処理1;
break;
case 2:
処理2;
break;
case 3:
処理3;
break;
case 4:
処理4;
}

と記述しても同じです。

さあ、処理も記述して完成させましょう。

<script>
var ix=5//一度に動くピクセル数
var iy=5//一度に動くピクセル数(縦)
var rtime=10//繰り返し実行時間(ミリ秒)
function lidou(){//右移動する関数
if(img1.style.pixelLeft+ix>=document.body.clientWidth-img1.clientWidth){
   if(img1.style.pixelLeft<document.body.clientWidth-img1.clientWidth){
       img1.style.pixelLeft=document.body.clientWidth-img1.clientWidth
   }else{
       ridou()
       return
   }
}else{
   img1.style.pixelLeft+=ix
}
status=img1.style.pixelLeft
setTimeout("lidou()",rtime)
}

function ridou(){//左移動する関数
if(img1.style.pixelLeft>0){
   if(img1.style.pixelLeft-ix<0){
       img1.style.pixelLeft=0
   }else{
       img1.style.pixelLeft-=ix
   }
   setTimeout("ridou()",rtime)
}else{
lidou()
return
}
}

function didou(){//下移動する関数
if(img1.style.pixelTop+iy>=document.body.clientHeight-img1.clientHeight){
   if(img1.style.pixelTop<document.body.clientHeight-img1.clientHeight){
       img1.style.pixelTop=document.body.clientHeight-img1.clientHeight
   }else{
       uidou()
       return
   }
}else{
   img1.style.pixelTop+=iy
}
setTimeout("didou()",rtime)
}

function uidou(){//上移動する関数
if(img1.style.pixelTop>0){
   if(img1.style.pixelTop-iy<0){
       img1.style.pixelTop=0
   }else{
       img1.style.pixelTop-=iy
   }
   setTimeout("uidou()",rtime)
}else{
didou()
return
}
}

var saikoro=Math.floor(Math.random()*4)+1
switch(saikoro){
case 1:
img1.style.pixelLeft=-img1.clientWidth
img1.style.pixelTop=
Math.floor(Math.random()*(document.body.clientHeight+img1.clientHeight+1))-img1.clientHeight
break
case 2:
img1.style.pixelTop=-img1.clientHeight
img1.style.pixelLeft=
Math.floor(Math.random()*(document.body.clientWidth+img1.clientWidth+1))-img1.clientWidth
break
case 3:
img1.style.pixelLeft=document.body.clientWidth
img1.style.pixelTop=Math.floor(Math.random()*(document.body.clientHeight+img1.clientHeight+1))-img1.clientHeight
break
case 4:
img1.style.pixelTop=document.body.clientHeight
img1.style.pixelLeft=Math.floor(Math.random()*(document.body.clientWidth+img1.clientWidth+1))-img1.clientWidth
}



lidou()//右移動関数スタート
didou()//下移動関数スタート
</script>

switchで処理

 途中、ステートメントブロックって言葉が出ましたので、説明しておきますね。

文章でいえば、ひとつの意味ある文はで区切りますよね。例えば「私は今日スーパーに行きました。そこで食品を買いました。生活雑貨も買いました。」という文章は、で区切られた三つの文で成り立っています。「私はスーパーに行き、食品と生活雑貨を買いました。」という文章もばらばらにすればみっつの独立したそれぞれが意味ある文章になっていますね。"食品と生活雑貨"の"と"はandです。

スクリプトも意味あるひとつの命令や式が複数組み合わさってプログラムとして動きます。そのひとつひとつの命令や式をステートメントといいます。
例えばa=b(bをaに代入)、a=Math.floor(Math.random()*10)などもそれぞれ独立して動作する命令・式です。

「もしaが0より大きく、10未満の時」、これはもし(aが0より大きい。なおかつaは10未満である)時」ということです。数学のようにif(0<a<10)とは書けません。スクリプトでは、なおかつを&&で表します。このような場合は、 if(a>0&&a<10)。と記述します。ここでいうa>0もa<10も独立した意味ある式(比較)ですので、それぞれがステートメントです。

スクリプトでは条件式以外でステートメントを続けて記述する際は、の代わりに;を使用します。一行に複数のステートメントを記述する時には、;で区切ればいいのです。条件式はステートメントとは呼ばないかもしれませんが。

a=b+c
d=a*a
は、
a=b+c;d=a*a
と一行に記述することもできます。

ステートメントの意味がわかったところで、ステートメントブロックとは、{}や()で囲まれた処理のブロック(固まり・影響の及ぶ範囲)を言います。
if(条件式){処理}の処理部分はif構文の及ぶブロックですから、ifステートメントブロック(あるいは単にifブロック)、switch(評価式){処理}の処理部分も{}で囲まれ、switchステートメントブロック(あるいはswitchブロック)といいます。

ああなんか覚えること多いなと・・・いえいえ覚えなくても良いです。こんな言葉を知らなくてもスクリプトのプログラミングはできますから。我々が話をする時に五段活用とか知らなくても会話できるのと同様です。

 

次回はイベントとイベントハンドラ、また乱数ではね返りする時に移動ピクセル数を変えて動きに変化をつけてしまいましょう。  ??


 

[ひな形スクリプト講座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][参考資料索引]