17日目TIL

7138 ワード
DOM Today I learned テキストリンク

開始します。


今日はDOMで基本的な内容を完成し、習った内容を復習しました.確かにCSSと同じように何度も使って慣れた方がいいと思うので、繰り返し練習してみました.

DOM


イベントオブジェクト
ほとんどのページは静止ではなく、ユーザーの移動に伴って変化します.これらのユーザの動作をイベントと呼び、Webページのボタンを押したり、テキストウィンドウでマウスカーソルを入力したり移動したりするなどのイベントオブジェクトとして出力することができるので、JavaScriptで操作するように設定することができます.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>이벤트 객체</title>
  </head>
  <body>
    <button>아메리카노</button>
    <button>카페라떼</button>
    <script>
      let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
      let btnAmericano = menus[0];
      let btnCaffelatte = menus[1];
      btnAmericano.onclick = handleClick;
      btnCaffelatte.onclick = handleClick;
      function handleClick() {
        let currentMenu = event.target.textContent; // TODO
        console.log(currentMenu + "를 클릭하셨습니다.");
      }
    </script>
  </body>
</html>
アメニティとカフェラテのボタンが付いた簡単なページですが、ボタンを押すと「メニュー」+」をクリックします.名前の文字列を出力する場合は、eventhandler関数を指定して実行できます.この関数は、onclickというイベントオブジェクトに文字列を出力し、押下ボタンを認識します.2つのボタンに1つの関数が割り当てられているので、押されたボタンのテキスト内容を出力するためにevent.target.textContentという方法を使用しました.(オブジェクトなのでthis.textContentを使っても同じ内容が出力されます.)

(実際に実行されているWebページの外観)
  • onsubmit
  • onchange
  • onmouseover
  • onkeyup
  • event.preventDefault
    • onclickに加えて、さまざまなアクティブなオブジェクトでWebページを動的に移動することもできます.
    sklearn:OneHotEncoderの簡単な使い方
    Unionタイプと例外処理