210705 DOM

Document Object Model
HTML要素をオブジェクト(JavaScriptオブジェクト)として操作できる
簡単に.JavaScriptとhtmlファイルをつなぐ橋渡しとしてのDOM
DOMを使用してHTMLを操作できます.
HTMLの構造はJavaScriptオブジェクトの構造と同様にツリー構造である.
DOMは文書オブジェクトを介してHTMLにアクセスする.
こうやって説明を探すと、たくさんのNODEという言葉に触れるので、
ノードはDOMにとって?すべてを意味するようです.
(注釈、別名など…)
正義を知りたくてあちこち探しましたが、いい資料がたくさんありましたが、
いずれにしても、とても抽象的な存在のようです.
今でも整理して見直すのは難しいです

JavaScriptでは、DOMはdocumentオブジェクト上で実施される.

ブラウザで実行されるJavaScriptコードでは、documentオブジェクトを任意の場所で問い合わせることができます.

一定の理解があれば、これらの文がどういう意味か知っています.
>コンソールウィンドウでのクエリー方法にもいくつかの違いがあります<
console.log(パラメータ)
パラメータとして渡される値を出力
HTMLと同じツリー構造に要素を出力
console.dir(パラメータ)
パラメータとして渡されるオブジェクトのプロパティを出力
要素をjsonと同じツリー構造に出力
elementでラベルを作ってそこでclassListを作りますに追加
作成した変数にclassの別名を含める

여기서부터는 기록

입력창의 값 바꾸는 법 = value ----> 변수.value


부모찾는 메소드
document.querySelector('아이디,클래스 무언가').parentElement


생성 : 변수.setAttibute('key','value')
내용삽입 : 변수.textContent = '내용'

이벤트 발생 시 작동하는 함수를 할당하는 방법
(1) DOM 객체에 onclick 을 직접 지정
document.querySelector('id또는class?').onclick = 작동함수

(2) addEventListener 메소드 사용하여 할당
document.querySelector('id또는calss?').addEventListener('이벤트',function(){~~~함수내용~~~})

210706 DOM-検証

1.

 const menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

      let btnAmericano = menus[0];
      let btnCaffelatte = menus[1]

      btnAmericano.onclick = handleClick;
      btnCaffelatte.onclick = handleClick; //


2-1. function handleClick(event){ // 여기서 매개변수?받음 (event) 애로
      console.log(`${event.target.textContent}를 클릭하셨습니다.`); // 매개변수를 콘솔로그로 출력
      }

2-2.       btnAmericano.addEventListener('click', (event) => {        //btnAmericano 에 이벤트 리스너 추가 (클릭이벤트, 클릭시 호출 될 함수 생성 (매개변수명 : event)) => 바로 리턴 값
        let value = event.target.textContent;         // value 라는 변수 선언 : 클릭 된 메뉴 이름을 담는다 // 
        console.log(value + "를 클릭하셨습니다.");         // event = 매개변수에 있는 target node?에서 textcontent (외부출력되어있는값)
     });



**주의사항**

  function handleClick(event) {
  console.log(event);
  } //console.log 활용해서 찍어보면 경로 다 나온다. 진짜 활용 잘해서 풀어야 됨

btnAmericano.target.textContent
event.target.textcontent

210707高次関数-コールバック関数

高次関数(highorder function)は、関数をパラメータ(パラメータ)として受信し、関数として返す関数です.
(1)変数に関数を割り当てることはできますか?------>はい.
(2)関数を含む変数をパラメータとして渡すことは可能か!?はい!
(3)関数内で変数に関数を割り当てることはできますか!!!はい!!!
(4)関数はこの変数を返すことができますか!!!はい!!!
高次関数は?
パラメータとして別の関数が受信された場合、

関数を返すと

になります.

関数をパラメータとして受信し、関数を返します.
デフォルトではjavascriptには複数の内蔵高次関数が含まれています.
ここで,配列法の一部は代表的な高次関数に相当する.

以下はすべて戻り値で[配列]を返します。

< map >
与えられた条件に基づいて新しい配列を返す
< filter >
伝える条件は?関数の形状!
フィルタ条件を指定する関数
< reduce >//
初期値、配列
最後にGitKrakenをインストール!