はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNを見て勉強しましたが、実装は違うものを作りました。
DOMを操作して要素ノードをつけたりテキストノードをつけたりです。
というか、ノードについていまいち理解できていなかったので復習しました。
はやりたいことあったけど実力が及ばず・・・今日は残念な仕上がりになりました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は14日目。(2019/11/1)
よろしくお願いします。
サイトURL
前提
覚えておくといいノードは4つです。全部ではないですが、大体これだけ知っていればwebサイト制作には困らないと思います。
- ドキュメントノード (htmlより上の文書の大元になるノード、よって1つしかない)
- 要素ノード (pとかdivとか）
- テキストノード (pで挟まれている文字とか）
- 属性ノード (idとかclassとか、タグの中に書かれているやつ)
やったこと
- 灰色の部分にJavaScriptで要素やテキストを加える
- マウスの位置を表示する 3.##
本当はマウスを動かすといい感じの丸がついてくるようにしたかったんです・・・。
でもうんともすんとも言わず、結果位置だけの表示に・・・
1. 灰色の部分にJavaScriptで要素やテキストを加える
では1から行きます。
JSで要素、テキストを加える方法↓
<div id="mouseMove"></div>
let circle = document.getElementById('mouseMove');
let div = document.createElement('div');
div.setAttribute('id', 'test');
let text = '肉';
let textNode = document.createTextNode(text);
div.appendChild(textNode);
let plusDiv = circle.appendChild(div);
まずcreateElementで要素を作ります。setAttributeで属性を付け加えられます。
createTextNodeは要素ノードの中にあるテキストノードを作る役割です。作ってどこに加えるかはappendChildを使います。
一見、テキストノードを作らなくてもinnerHTMLでいいと思うかもしれませんが、
innerHTMLは要素ノード内のテキストを丸ごと書き換えてしまうので、+@で文字を加えたい場合はテキストノードを使う必要があります。
要素内にテキストを入れたい場合
- 追加 → createTextNode
- 書き換え → innerHTML
2. マウスの位置を表示する
基本は大切ということで一応書きます↓
mouseMove.addEventListener('mousemove', function (e) {
let coordinate = ' (X座標：' + e.pageX + ' Y座標：' + e.pageY + ')';
eNode.innerHTML = coordinate;
})
イベントリスナーでmousemoveを指定しています。mouseMoveというIDがつけられたdivの中でマウスが動かされるとマウスの座標を表示します。
3. 5秒ごとに通知する
setIntervalという関数を使いました。この関数は一定間隔で繰り返し処理をしてくれます。
let plusTime = 5;
function timeCount() {
alert('遊び始めてから' + plusTime + '秒経ちました');
plusTime += 5;
}
setInterval(timeCount, 5000);
setInterval(timeCount, 5000);
↑これで呼び出しています
第一引数が呼び出す処理で、第二引数が処理間隔(ms)です。5000なので5秒間隔ですね。
感想
mousemoveでいい感じの丸が動くやつを作りたかったな〜。
多分cssに原因があったはずだから、javascriptだけじゃなくcssもやらないと。
明日も頑張ります！
最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。
参考
- MouseEvent - Web API | MDN (https://developer.mozilla.org/ja/docs/Web/API/MouseEvent)
参考になりました。ありがとうございます！