このJavaScriptの解説をしていただきたいです。

友人から送られてきたのですが、JavaScriptは触ったことがなく、興味が湧いたので詳しく知りたいと思いました。
なので、解説をお願いしたいです。
htmlはかじったことがありますので、解説は大丈夫です。
友人も私も環境はwindows10です。

フォルダー
┣Black_Circle.jpg
┣new.html
┗idou.js

html
1<body>
2    </div>
3    <img src="Black_Circle.jpg" id="ball" height="150" width="150">
4    </div>
5</body>
6<script src="idou.js"></script>

JavaScript
1var x_move = 0;
2var y_move = 0;
3var n_move = 1;
4
5ball.onclick = function() {
6    setInterval("idou(1,1,ball)", 10);
7}
8
9function idou(x, y, ball){
10    x_move += x*n_move;
11    //y_move += y*n_move;
12
13    ball.style.transform = 'translate(' + x_move + 'px, ' + y_move + 'px)';
14    ball.style.transform += 'scale(' + -1*n_move + ', 1)';
15
16    if( x_move == 300 || x_move == -1){
17        n_move = n_move * -1;
18    }
19}

gentaro

2020/11/15 11:25

ガイドラインを読んで出直しましょう。 https://teratail.com/help/question-tips https://teratail.com/help/avoid-asking あなたのための無料教師を募集するサイトではありません。そういう依頼は有償で請け負ってくれるサイトが存在するので、お仕事として依頼してください。

coco_bauer

2020/11/15 11:30

せめて、Javascriptの文法などの基礎的な知識を自分で調べるべきではないですか？触ったこともないプログラム言語のコードの説明を丸投げするのは、あまりに怠慢だと思います。

CHERRY

2020/11/15 12:03

送ってきた人に聞くことはできないのでしょうか？送ってきた人が作られたのもであれば、作った方に解説してもらうのが一番良いと思います。

kai0310

2020/11/16 08:15 編集

ファイル名と関数名に親切にローマ字で移動と書いてあるので移動させるプログラムがある。ぐらいはプログラミングができなくても検討をつけれるはず。あとは分からないところをドキュメントを読んで一行一行何についての記述か調べてください。 ex. varってなんだ？ functionってなんだ？ ifってなんだ？の様に一つずつまずは調べてみてください。

退会済みユーザー

2020/11/16 07:34

この質問により、多くの方が、多大に気分を害されたかと思います。お詫びいたします。 gentaro様、わざわざ丁寧な言葉でのご指摘ありがとうございます。前回の利用から長く間をあけてしまっていて、ガイドラインはほぼ記憶していませんでした。今後は、このようなことがないように、teratail以外でも投稿等をする際はガイドライン等を再確認することにします。 coco_bauer様、わざわざ丁寧な言葉でのご指摘ありがとうございます。確かに、自分で調べ、その上でどうしても分からない点を質問するべきでした。自分の興味だけで調べもせず、全て他力本願な行為は不精であり、また、teratailの利用の仕方がなっていませんでした。今後は、他人に教えを乞う際は、自分で解決する努力をした上で教えを乞おうことにします。 CHERRY様、わざわざ丁寧な言葉でのご指摘ありがとうございます。友人にも解説をお願いしたのですが、「自分で考えろ」と言われました。友人にも忠告されていたにも関わらず、このような質問をして、迷惑をおかけしました。 kai0310様、わざわざ丁寧な言葉でのご指摘ありがとうございます。今後、分からないことを調べる際には、その様に検討をつけてから考えます。プログラミングでは、一行一行理解することに留意します。

退会済みユーザー

2020/11/16 09:08

ベストアンサーは最も評価が高かったものにさせて頂きます。

miyabi_pudding

2020/11/16 09:22

え、JSの解説を欲してる質問じゃなかったんでしょうか・・・？笑 BAの回答は、JSの解説ではなく、あえて別解法を示している回答だと思いますが。いや、別にいいんですけどね。

行動規範の内容に同意します

回答3件

ベストアンサー

このくらいの処理だとhtml+cssとかでできそうですけどね

css
1<style>
2@keyframes myani{
3  0%    {transform:translate(  0px,0px) scale(-1,1);}
4  49.9% {transform:translate(300px,0px) scale(-1,1);}
5  50%   {transform:translate(300px,0px);};
6  100%  {transform:translate(  0px,0px);}
7}
8
9#move{
10position:absolute;
11top:-9999px;
12}
13#move:checked ~ #ball{
14  animation: myani 5s infinite ;
15}
16</style>
17<div>
18<label>
19<input type="checkbox" id="move">
20<img src="Black_Circle.jpg" id="ball" height="150" width="150">
21</label>
22</div>

投稿2020/11/15 14:41

yambejp

総合スコア116835

yambejp

2020/11/15 14:44

jsおよびcssの解説 jsでは画像を左右反転させ右に300移動し、そこで更に左右反転させ左に300移動、を繰り返しそれをエミュレートしたCSSだと全体を5秒のエンドレスアニメを指定し、半分まで左右反転し右に300移動、残り半分で反転をやめて左に300移動しています

行動規範の内容に同意します

javascript
1var x_move = 0;
2// 0という値をメモリに格納、x_moveという名前で参照とする変数を宣言
3var y_move = 0;
4// 0という値をメモリに格納、y_moveという名前で参照とする変数を宣言
5var n_move = 1;
6// 1という値をメモリに格納、n_moveという名前で参照とする変数を宣言
7// なお、varという宣言子を使用した場合、同スコープ上のオブジェクト（this）のプロパティとして変数が格納される
8
9ball.onclick = function() {
10  setInterval("idou(1,1,ball)", 10);
11  // 10ms毎に、idou関数を、1, 1, ballという引数を以って実行する
12}
13// 関数オブジェクトをメモリに格納、ballというDOM変数のonclick属性に代入する
14// つまり、onclickは、関数オブジェクトの参照となる
15// onclick属性は、同DOMをクリックした際のコールバックとして機能する
16
17function idou(x, y, ball){
18  x_move += x*n_move;
19  // x_moveに引数のxにn_moveを乗算した値を、加算代入する
20  // 新たな値がメモリに格納され、x_moveは新しい値の参照となる（古い値はメモリから破棄される（GC））
21  //y_move += y*n_move;
22  // ステートメントをコメントアウトしている（コメントアウトすると、その行は実行されない）
23
24  ball.style.transform = 'translate(' + x_move + 'px, ' + y_move + 'px)';
25  // ballのstyleプロパティのtransformプロパティに、右項の値を代入している
26  // DOM変数のstyleプロパティは、同DOMのインナースタイルに対して、値の変更を行うことができるアクセサともなる
27  // 右項に関して： 'translate(' という文字列に、x_moveの値（数値）と、
28  // 'px, '文字列、y_moveの値、'px'文字列、の順に加算（文字列の場合連結となる）を行い、一つの文字列リテラルをメモリに格納、上記styleのプロパティに代入している
29  // transform属性は、上記文字列リテラルの参照となる。
30  // と同時に上記のように、HTML DOMのスタイルを変化させる。（おそらく内部的にセッターが機能している）
31  ball.style.transform += 'scale(' + -1*n_move + ', 1)';
32  // 上記同様にtransformに代入を行っているが、加算と代入を同時に行っているため、
33  // 上記の文字列の後に続けて値を連結している
34
35  // if文は、()の中が、truthyである場合、ブロック内の処理を実行する構文
36  if( x_move == 300 || x_move == -1){
37    // x_moveが300である、または、x_moveが-1である時に、この中身が実行される
38    n_move = n_move * -1;
39    // n_moveに-1を乗算した値をメモリに格納、n_moveに代入。n_moveは左記の新しい数値リテラルの参照となる。古い値はメモリから解放、破棄される
40  }
41}
42// function宣言により、idouという変数名にて参照とし、関数オブジェクトをメモリに格納する
43// function宣言の場合は、varと同様に、同スコープ上のオブジェクト（this）のプロパティとして格納される

基本用語を知らないなら、自分で調べてください。
（あえて用語使って小難しく書いてます）

投稿2020/11/15 18:07

編集2020/11/16 01:29

miyabi_pudding

総合スコア9555

以下、適当な解説。

javascript
1        // x_move は 0である 以下略
2        var x_move = 0;
3        var y_move = 0;
4        var n_move = 1;
5
6        // id="ball"がクリックされたら10m/秒ごとにidou関数を実行
7        
8        ball.onclick = function () {
9            setInterval("idou(1,1,ball)", 10);
10        }
11                    //1, 1, ball
12        function idou(x, y, ball) {
13            // x_move は 1 * n_move + x_move(初期値は1,次は2以下略)
14            x_move += x * n_move;
15            //y_move += y*n_move;
16
17            // <img src="img/1.png" id="ball" style="transform:translate(x_move px,0px)" height="150" width="150" alt="tes"> 
18            ball.style.transform = 'translate(' + x_move + 'px, ' + y_move + 'px)';
19            // <img src="img/1.png" id="ball" style="transform:translate(x_move px,0px) scale(-1*n_move,1)" height="150" width="150" alt="tes">
20            ball.style.transform += 'scale(' + -1 * n_move + ', 1)';
21            // x_move が300 または -1の時
22            if (x_move == 300 || x_move == -1) {
23                //n_moveはn_move * -1
24                n_move = n_move * -1;
25            }
26        }