今日学んだこと 2021/01/19

学習項目

Java Script 基礎 2

学習内容

機能の学習に続いて、取得した要素をどう動かしていくかを学んだ。

インラインスタイル

HTML要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。
インラインスタイルの追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドを使用する。

setAttributeメソッド

指定した要素上に新しい属性を追加、または既存の属性の値を変更できる。

要素.setAttribute(name, value)

// nameは属性の名前を文字列で指定
// valueは属性に設定したい値を指定

removeAttributeメソッド

指定した要素から、特定の属性を削除する。

要素.removeAttribute(name, value)

// nameは属性の名前を文字列で指定
// valueは属性に設定したい値を指定

この二つを用いることで、例えば

<span id="change-hover">test</span>

#sample {color: red;}

といった文字がサイトに表示あったとして、

function changeColor() {
// IDを取得
const changeHoverColor = document.getElementById("change-hover")

// マウスを当てたときに色を変えるようにする
// 1.当てたときにイベント発火
changeHoverColor.addEventListener('mouseover, function(){
// 2.色を変える
  this.setAttribute("style", "color:blue;")
})

// マウスを離した時に色を元に戻すようにする（変更を消す）
// 1.離した時にイベント発火
changeColor.addEventListener('mouseout', function(){
// 2.色を戻す
  this.removeAttribute("style", "color:blue;")
})
window.addEventListener('load', change)

というように記述することで、マウスを当てると赤→青、マウスを話すと青→赤
と変化する。
またthisを利用することで、イベントの発火元となった要素を取得することができるため、記述を少なくすることができる。

getAttributeメソッド

要素上の指定した属性の値を戻り値として返すメソッド。

要素.getAttribute('属性名')

このメソッドを使うことで、クリックをしたことで、変更する等の使用を実装できる。

<span id="change-click">クリックすると色が変わる</span>

#change-click {color: red;}

function changeColor() {
  // IDを取得
  const changeClickColor = document.getElementById("change-click")
  // クリックした時に色を変えるようにする
  // 1.クリックした時にイベント発火
  changeClickColor.addEventListener('click', function() {
  // 2.今の属性を取得し、if文で状況に応じて色を変える
    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() {
// IDを取得
  const ChangeHtml = document.getElementById("change-html")
  const choiceClickHtml = document.querySelectorAll(".choice-class")

  // forEach文を使って、choice-classの全てが同じ処理をできるようにする
  choiceClickHtml.forEach(function(choice){
    // クリックした時にイベント発火
    choice.addEventListener('click', function() {
      // choice-classの文字列を取得し変数に代入
      value = choice.innerHTML
      // change-htmlの文字列に先程の変数を代入することで、文字を変える
      ChangeHtml.innerHTML = value
    })
  })
}
window.addEventListener('load', changeColor)

HTML情報を取得し、ほかに代入することで文字を変えることができる。

また、昨日の記事では先頭にwindow.addEventListener('load', function(){}を記述していたが、一般的ではないらしく、 function 関数名(){} を記述して、関数を定義して、その中に記述し、その後に
window.addEventListener('load', 関数名)を記述して、関数を読み込むというのが一般的。

まとめ

なんとなく、文法、動かし方がわかってきたと思う。でもこういうのって、多分発想が重要になってくるから、ほかのコードを見たりすることも同じぐらい大事だと思った。

学習の書き留めプログラミング勉強中

プログラミングで学んだことを日記として残して行こうと思います

今日の学習