ひな形スクリプト講座3

前回で同じ結果になることがひとつの方法だけとは限らないことがわかりましたね。

ではここでもう一度おさらいしておきますね。

aとbが等しい・・・a=bではなく、a==bでしたね。等しいってどういった場合に使うかといいますと、プログラムでは条件式にしか現れません。aとbが等しい時とか、等しいならばという時にしか使われないんですね。でこのような==は比較演算子と呼ばれています。aがbより大きいのa>bの>も比較演算子です。aがb以上（a>=b）の比較演算子は>=でしたね。a=>bではありませんよ。aがb以下（a<=b）の比較演算子は<=です。a=<bは間違いになります。aがb未満（a<b）の比較演算子は<となります。
VBS(VBScript)では=は等しいと代入二つの意味があると書きましたが、これは条件式の場合と条件式以外とがプログラム上ではっきりと区別できるから意味が違っていても同じ記号を使っても問題ないからなんですね。

それから一番基本的な条件分岐構文も学べました。
if(条件式){
処理1
}else{
処理2
}
でしたね。もし条件式が成り立つ場合(true)は、処理1を実行し、条件式が成り立たない場合は処理2を実行するでした。else以下は省略できました。
if(条件式){
処理
}
もし条件式がtrueの時（だけ）処理を実行するとなります。

エレメント・・・覚えてますか？HTMLドキュメント上のタグによって作られた要素でしたね。その要素そのものはオブジェクトとして、操作対象になりました。更にオブジェクトにはプロパティ（特徴・性質・状態）とメソッド（動作）がありました。また、エレメント（エレメントオブジェクト）はIDをつけることで、ID名がオブジェクトを識別する名前（識別子）となることもわかりました。

関数（ユーザーが作成したユーザー定義関数）は、関数名に()をつけ、関数の動作内容を処理として中括弧{}で囲むこともわかりました。
function 関数名(){
処理
}

setTimeoutはスクリプトにとって時間差で処理する場合に使用しました。
setTimeout("処理",時間)でしたね。時間の単位はミリ秒でした。

コメントの入れ方覚えてますか？
//は行内にこの記号がある場合、その記号以降の文字はコメントとして扱われるでした。
a=b//bをaに代入する
こんな感じですね。a=bは//の前にあるので、コメント扱いになりませんよ。//が及ぶ範囲はその行末までです。
複数行に渡ってコメントを入れる場合は/*と*/で囲むでしたね。

おさらいはこのくらいにして、次行きましょう。無理して覚えないでくださいね。また後から必ず出てきますからね。

前に戻り次のソースからはじめましょう。

では今度は右端から左端へ移動を考えてみましょう。右端ではLeftがdocument.body.clientWidth-img1.clientWidthと同じになるのは既に出てきましたね。左にixピクセルだけ移動させるには、お分かりだと思います。そうですね。現在の img1.style.pixelLeftからixだけマイナスにすればいいですね。aからbを引いてaに入れるはa=a-bです。a=a+(-b)でもOKです。aにbを加えてaに代入するはa+=bでしたが、aにbを引いて代入するという演算子も用意されています。a-=bとなり、これはa=a-bと同じです。

ついでながら=や+=あるいは-=という演算子のことを代入演算子と呼びます。+(加算）、-（減算）、*（乗算）、/（除算）、や%(剰余--ジョウヨ)を算術演算子と呼びます。
%剰余については後日説明しますね。

ということで簡潔に書くならば、img1.style.pixelLeft-=ixとなります。

停止位置は左端なので、img1.style.pixelLeftが0になった時ですね。前回同様にixだけ引いた時に0にぴったりなればいいのですが、どうやらならない場合が出てきそうな気配がします。このような場合は図を描いてみるとわかりやすくなりますよ。

左にはみ出る（オーバーランしてしまう）のは、どういう場合でしょうか？現在のLeftの値にixだけ差し引いた値が、0pxより小さくなった場合ですね。
そしてその時にはどうすればいいかもお分かりでしょう。0pxにしてしまえばいいわけですね。ということで条件式を考えましょう。

[方法1]
もしLeftが0と等しくなった時（あるいは0以下の時でも構いませんが）、左移動の処理は終了させる。
そうでない時、
もし現在のLeftにix差し引いた値が0より小さい時には、Leftを0にする。
そうでない時は現在のLeftにix差し引いた値をLeftにする。

[方法2]
もしLeftが0より大きい時、
もし現在のLeftにix差し引いた値が0より小さい時には、Leftを0にする。
そうでない時は現在のLeftにix差し引いた値をLeftにする。
そうでない時、処理を終了させる(関数から抜ける）

まず方法1でスクリプトを組んでみましょう。
もしLeftが0と等しくなった時処理は終了・・・if(img1.style.pixelLeft==0){return}
そうではない時、・・・else{
もし現在のLeftにix差し引いた値が0より小さい時 Leftを0にする・・・if(img1.style.pixelLeft-ix<0){img1.style.pixelLeft=0}
そうでない時、現在のLeftにix差し引いた値をLeftにする・・・else{img1.style.pixelLeft-=ix}
}
これを繰り返し実行するようにsetTimeout()メソッドも使用して、関数にします。

前回のスクリプトに整理して書き足しましょう。

さて、このままでは左移動する関数は実行されません。どこにも実行する命令がありませんよね。そこで前回までの右移動したら右端で停止するのではなく、今度は左移動し始めるようにします。右端まできたら停止するのではなく、ridou()関数を実行させますから、上記スクリプトの太字部分returnにridou()実行させてから、returnさせましょう。

右行って左移動1・・・右に移動し、その後左移動し停止しますね。

では左に移動後、左端に来たらまた右移動し始めるというようにピンポンのように繰り返してみましょう。

やはり左端に来たらまた停止させないで、lidou()関数を実行させてみましょう。
if(img1.style.pixelLeft==0){return}・・・この部分をlidou()実行させてreturnにしてみます。

右行って行って繰り返し・・・うまくいきました。

では宿題を兼ねて方法２でのやり方を考えてみてくださいね。・・・答えは第４回にまわします。

第４回では画像をもう少し小さくし、上下運動スクリプトを考えてみます。上下運動と左右運動を組み合わせると・・・・なんだか面白くなってきました。