入力内容

HTML

CSS

JavaScript

今回のプログラムは今までのものとは違い、どこで変数に10を足すのかなどをきちんと考えなければうまく動きません。

ボタンが押された時にはright()とback()という関数によって箱が右に動いていきます。しかし厳密に言えば箱の左側の余白を調整しているだけなのです。
今回はxという変数に、取る余白の大きさを入れています。

right()関数は実行されるたびにxに10を足していきます。つまり箱の左側の余白を10ずつ大きくするということです。
back()関数は何回実行してもxを10にするだけです。

ちょっと寄り道!

「var x」 というのはScratchでいう変数の作成と同じことを表しています。

また「x = 10」は、「変数x を 10 にする」と同じで、「x = x + 10」は、「変数x を 10 ずつ変える」と同じことを表します。

   

 

出力