クリックした場所に要素を移動させる！(timeclock DAY1)

今回はjavascriptを用いて要素をクリックした場所に移動させる

というのをやっていきます。
初心者が自分で考えて作ったものなので多分最適化したら3行ぐらいで終わるかもしれません…自身がない方に採用してほしい…( ;´･ω･`)

クリックした場所移動

window.onload = function(){
//まず動かす対象を取得
var ball = document.getElementById("ball"); 
//対象が動くフィールドとなる部分を取得
 var contents = document.getElementById("contents");

//フィールドが押されたときにイベント発生
varcontentsaddEventListener("click",function(){
//押された場所を取得
   var x = event.x;
   var y = event.y;　
//押された場所に移動
   ball.style.left = x + "px";
   ball.style.top = y　+ "px";
},false)

これだけです！
引っ掛かるところは関数内部かな？

var x = event.x;
var y = event.y;　

ここの中ではＸ軸からの距離、Y軸からの距離をそれぞれとってきています。
Javascript では座標を指定するときなどは左上に(0,0)があると考えて、

Ｘ軸が正の方向にいくときに増加して、
Y軸が負の方向にいくときに減少します。
なんかすごいわかりずらくてこんがらがりますがそんなもんだと覚えましょう…( ;´･ω･`)

そうして上で得られた変数x,yをここで使います。

ball.style.left = x + "px";
ball.style.top = y　+ "px";

落ち着いて分けて考えると、
ball(変数)のstyle(cssの設定)のtop(上からの距離)=変数px
です！topはabsoluteと設定したときによくみますよね？あれです…
同じようにyもleft(左からの距離)としています。
→変数 + "px"の部分
　ここはjavascriptでstyleの指定をする際に変数(数字)は""をつけて、px(文字)ではつけないという基本的な原則に乗っ取ってます…

まとめ

今回の処理では
変数に現在位置代入！からの
　変数で場所指定！
という単純な動作をしています。
ポチポチ押して動くのも結構楽しいのでやってみては？？？

次回の時　旅さん

さーて来週(明日ぐらい)の時　旅さんはー？
俺です。
この動きを導入するときに一緒に導入した移動距離と時間を比例関係におく
っというのをここで紹介したいと思います。
そもそも今日紹介しようとしたけど分量が長くなったのでやめました…
また明日も…見てくれよな！

なに紹介してる？？

紹介しているものとしては現在作成しているもののなかで実装した機能たちです。

タイトルの後ろには現在作成しているものの名前とそれが今何日目なのかを表してます…
こんな感じのものつくりたいっていうのと似てたらそれがついてるやつを追ってけば少しずつ完成していくはずです。
それかそこから紹介してそうだなーっていうのを予想して探してみてください(激ムズ)
要望あったり、面白そうなアイデアくれたら作ります。今は経験が必要なので…

以上！
あなたとともに時を越える旅を？