今日学んだこと 2021/01/19
学習項目
Java Script 基礎 2
学習内容
機能の学習に続いて、取得した要素をどう動かしていくかを学んだ。
インラインスタイル
HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。
インラインスタイルの追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドを使用する。
setAttributeメソッド
指定した要素上に新しい属性を追加、または既存の属性の値を変更できる。
要素.setAttribute(name, value)
removeAttributeメソッド
指定した要素から、特定の属性を削除する。
要素.removeAttribute(name, value)
この二つを用いることで、例えば
<span id="change-hover">test</span>
#sample {color: red;}
といった文字がサイトに表示あったとして、
function changeColor() {
const changeHoverColor = document.getElementById("change-hover")
changeHoverColor.addEventListener('mouseover, function(){
this.setAttribute("style", "color:blue;")
})
changeColor.addEventListener('mouseout', function(){
this.removeAttribute("style", "color:blue;")
})
window.addEventListener('load', change)
というように記述することで、マウスを当てると赤→青、マウスを話すと青→赤
と変化する。
またthisを利用することで、イベントの発火元となった要素を取得することができるため、記述を少なくすることができる。
getAttributeメソッド
要素上の指定した属性の値を戻り値として返すメソッド。
要素.getAttribute('属性名')
このメソッドを使うことで、クリックをしたことで、変更する等の使用を実装できる。
<span id="change-click">クリックすると色が変わる</span>
#change-click {color: red;}
function changeColor() {
const changeClickColor = document.getElementById("change-click")
changeClickColor.addEventListener('click', function() {
if (changeClickColor.getAttribute("style") == "color:blue;") {
this.removeAttribute("style", "color:blue;")
} else {
this.setAttribute("style", "color:blue;")
}
})
}
window.addEventListener('load', changeColor)
これで、cssが青の時は青色を取り除く（赤色にする）にし、そのほかの色の時は青色を付与するという実装ができる。
debugger
debuggerを用いることで、ソースコードに処理を一旦停止させる場所を指定することができる。処理が停止している状態で、特定の変数の値を確認したり、1行だけ処理を進めたりなど、幅広いデバッグが可能となる。
innerHTML
innerHTMLを使用すると、HTML要素の取得や書き換えを行うことができる。
<span id="change-html">選択すると文字が変わる</span>
<ul>
<li class="choice-class">1: 選択肢</li>
<li class="choice-class">2: 選択肢</li>
<li class="choice-class">3: 選択肢</li>
<li class="choice-class">4: 選択肢</li>
</ul>
function changeColor() {
const ChangeHtml = document.getElementById("change-html")
const choiceClickHtml = document.querySelectorAll(".choice-class")
choiceClickHtml.forEach(function(choice){
choice.addEventListener('click', function() {
value = choice.innerHTML
ChangeHtml.innerHTML = value
})
})
}
window.addEventListener('load', changeColor)
HTML情報を取得し、ほかに代入することで文字を変えることができる。
また、昨日の記事では先頭にwindow.addEventListener('load', function(){}を記述していたが、一般的ではないらしく、
function 関数名(){} を記述して、関数を定義して、その中に記述し、その後に
window.addEventListener('load', 関数名)を記述して、関数を読み込むというのが一般的。
まとめ
なんとなく、文法、動かし方がわかってきたと思う。でもこういうのって、多分発想が重要になってくるから、ほかのコードを見たりすることも同じぐらい大事だと思った。