20230601(목)_ 혼자 공부하는 자바스크립트 공부

금일 달성 항목

1) 혼자 공부하는 자바스크립트 진행 (328 Page 까지 진행)

2) 알고리즘 3차 특강 참여 

 

---

문제 해결 과정 1 

[문제]

1) 이벤트 연결 버튼을 누르면 활성화되어 클릭 횟수를 선택 시 카운팅

2) 이벤트 해제 버튼을 누르면 비활성화되어 클릭 횟수 선택 시 카운팅 고정

3) 이벤트 연결 상태에 따라 아래에 연결 or 해제 표시

 

 

[시도 및 해결]

스스로 해결할 수 없어 강의자료를 보며 하나씩 채워나갔습니다.

 

1) 형태의 뼈대를 만듭니다.

    <script>
      const header = document.createElement("h1");
      header.innerText = `클릭 횟수 : 0`;

      const p = document.createElement("p");
      p.innerText = `이벤트 연결 상태 : 해제`;

      const connectButton = document.createElement("button");
      connectButton.innerText = "이벤트 연결 버튼";


      const disconnectButton = document.createElement("button");
      disconnectButton.innerText = "이벤트 해제 버튼";


      document.body.appendChild(header);
      document.body.appendChild(connectButton);
      document.body.appendChild(disconnectButton);
      document.body.appendChild(p);

 

2) 이벤트 연결 버튼에 addEventListener이라는 이벤트를 추가하였습니다. 이 이벤트는 별도의 변수로 만들어야 해서 맨 위에 추가하였습니다. innerText를 사용하여 이벤트 연결 상태를 문자로 출력하였습니다.

      let counter = 0
      const listener = () => {
      header.innerText = `클릭 횟수 : ${++counter}`;
      }
      
      const connectButton = document.createElement("button");
      connectButton.innerText = "이벤트 연결 버튼";
      connectButton.addEventListener('click', () => {
        header.addEventListener('click',listener )
        p.innerText = `이벤트 연결 상태 : 연결`;
        })

 

3) removeEventListerner 이벤트를  추가하여 클릭 이벤트를 제거하였습니다.

innerText를 사용하여 이벤트 연결 상태를 문자로 출력하였습니다.

      const disconnectButton = document.createElement("button");
      disconnectButton.innerText = "이벤트 해제 버튼";
      disconnectButton.addEventListener('click', () => {
        header.removeEventListener('click', listener)
        p.innerText = `이벤트 연결 상태 : 해제`;
        })

 

 

[알게된 점]

하나하나 분석하면서 보다보니 코드의 내용이 길어도 이해가 갑니다. 처음 긴 코드를 맞닥뜨릴때는 너무 막막해했는데 말이죠.. ㅎㅎ

그리고 다양한 이벤트를 공부해서 활용하면 더 풍성한 사이트를 만들 수 있을 것이라 생각했습니다.

 

 

---

특강

알고리즘 특강 - 김창민 튜터님

• peek, push, pop 함수 구현
• 링크드리스트 기반 큐의 enqueue 함수 구현하기
• 버블정렬, 선택 정렬, 삽입 정렬 함수 구현