生活符号化javascript 28強関数の使用

10123 ワード
JavaScript 生活コード テキストリンク
動作は同じであるが,コードの有効性を再構成と呼ぶ.
その重要な手段の一つは関数である.
キーで生成されたコードを効率的に変換してみましょう.
複数のinputボタンが繰り返されると、悪いことが起こります
jsコードをコピーし、headラベルの内部にscriptラベルを作成し、貼り付けます.
Webブラウザにこれらのコードがnightday Handlerという関数であることを伝える
function nightDayHandler(self){js코드}
ナイト・デイ・ハンドラー();これを元のコードのところに貼ればいいです
  <h1>WEB</h1>

    <input type="button" value="night" onclick="
      nightDayHandler();
    ">
そしていったん実行すると実行できない.
onclickという名前のイベントで、this
アクティビティは、その属するタグを指すように規定されています.
独立した関数を作成すると、関数のthisはinputボタンではなく、グローバルオブジェクトを指し、Webブラウザでウィンドウになります.
nightDayHandlerを実行するときに、この値をinputに指定します.
この値を指定すると、この値はnightDayHandler実行時にここのパラメータに入力するときに使用されるパラメータになります.
名前をselfにするなら、かつてthisだった子供たちをselfに変えるべきだ.

これで使いやすくなる
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>html css</title>
    <link rel="stylesheet" href="style.css">
    <script>
    function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night' ){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      self.value = 'day';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
          alist[i].style.color = 'powderblue';
          i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      self.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
          alist[i].style.color = 'blue';
          i = i + 1;
      }
    }
  }
    </script>
  </head>

  <body>
    <h1>WEB</h1>
    <input id=night_day" type="button" value="night" onclick="
      nightDayHandler(this);
    ">
  </body>
</html>
20210616 TIL
I/O Multiplexing