🍞 대외활동/길벗 블로깅 멘토

[HTML+CSS+자바스크립트] 12장 문서 객체 모델과 이벤트 다루기 (~522p)

박빵이 2023. 3. 14. 19:27

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열여덟 번째 날로, 자바스크립트 공부 아홉 번째 날입니다!

이벤트를 다뤄볼 예정인데, 힘을 내서 같이 공부를 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(487~522p)

5. 폼 조작하기

6. 이벤트 다루기

7. 이벤트 객체와 this

 

5. 폼 조작하기

5.1 form 태그 선택하기

HTML 폼 요소의 시작은 항상 form 태그입니다.

그래서 폼 요소를 조작하기 전에 form 태그를 선택하는 방법부터 알아볼게요!

크게 form 태그는 forms 속성과 name 속성으로 선택할 수 있습니다.

 

먼저 forms 속성을 실습해 보겠습니다.

 

- forms 속성 사용하기 

다음과 같이, form 태그가 있습니다!

코드를 실행해 개발자 도구의 콘솔창에서 document.forms로 값을 출력해 보면 어떤 결과가 나올까요?

  <body>
    <form>
      <input type="text" />
    </form>
    <form>
      <input type="text" />
    </form>
    <form>
      <input type="text" />
    </form>
  </body>

그럼 다음과 같은 결과가 나옵니다.

이때, HTMLCollection 객체는 유사 배열이라서 인덱스를 사용해 form 요소 노드에 하나씩 접근할 수 있어요.

- name 속성 사용하기 

name 속성을 사용하면 forms 속성보다 훨씬 직관적으로 form 요소 노드를 선택할 수 있어요!

앞서, 코드에서 name 부분을 더 추가해 보겠습니다. 

  <body>
    <form name="frm1">
      <input type="text" />
    </form>
    <form name="frm2">
      <input type="text" />
    </form>
    <form name="frm3">
      <input type="text" />
    </form>
  </body>

그럼, 다음과 같이 name명으로 접근할 수 있어서 훨씬 직관적이에요!

 

 

5.2 폼 요소 선택하기

지금까지는 form 태그를 선택했으니, 다음으로는 form 요소를 선택해 볼게요!

폼 요소에는 input 태그를 비롯해 select 태그, button 태그 등이 있습니다.

이런 폼 요소를 선택할 때는 elements 속성이나 name 속성을 사용합니다.

 

다음 실습으로 폼 요소에 접근하는 방법을 알아볼게요.

먼저, 기본 form 코드를 작성해 주세요.

    <form name="frm1">
      <label for="uname">이름</label>
      <input type="text" id="uname" name="uname" />
      <br />
      <label for="age">나이</label>
      <input type="text" id="age" name="age" />
      <br />
      <label for="gender">성별</label>
      <select id="gender" name="gender">
        <option value="male">male</option>
        <option value="female">female</option>
      </select>
      <button>전송</button>
    </form>

frm1로 먼저 폼 태그에 접근하고

elements를 써서 form 요소 노드의 하위에 있는 폼 요소 노드의 정보에 접근했어요!

다음과 같이 인덱스를 활용하여 폼 요소에 접근할 수도 있답니다.

5.3 폼 요소의 입력값 다루기

폼 요소는 사용자에게 값을 입력받아 이를 서버에 전달해요.

전달받은 값을 서버에서 어떻게 활용하는지는 백엔드영역이라서 이해하지 않아도 되지만,

서버에 전달하기까지 폼 요소에 입력된 값이 유효한지는 검증할 수 있어야 합니다.

 

- 한 줄 입력 요소 다루기

text와 password 요소에 사용자가 입력한 값을 가져오려면

해당 요소 노드에서 value 속성을 사용해 가져오면 됩니다.

    <form name="frm">
      <input type="text" name="id" />
      <input type="password" name="pw" />
    </form>

- 여러 줄 입력 요소 다루기

input 태그 대신 여러 줄을 사용하려면 무슨 태그를 써야 했는지 기억나시나요?

바로, textarea 태그입니다. 

    <form name="frm">
      <textarea name="desc"></textarea>
    </form>

textarea 태그 역시, input 태그와 동일하게 value를 사용해 값에 접근할 수 있습니다. 

- 체크박스 다루기

  <body>
    <label><input type="checkbox" value="apple" />사과</label>
    <label><input type="checkbox" value="banana" />바나나</label>
    <label><input type="checkbox" value="orange" />오렌지</label>
    <label><input type="checkbox" value="melon" />멜론</label>
  </body>

체크박스에 체크 표시가 되어 있는 값만 가져오고 싶다면

checked 속성을 사용해 다음과 같이 작성하면 됩니다.

const checkboxEls = document.querySelectorAll('[type="checkbox"]');
for (let i = 0; i < checkboxEls.length; i++) {
  if (checkboxEls[i].checked === true) {
    console.log(checkboxEls[i].value);
  }
}

- 라디오 버튼 다루기

    <form>
      <label><input type="radio" name="fruits" value="apple" />사과</label>
      <label><input type="radio" name="fruits" value="banana" />바나나</label>
      <label><input type="radio" name="fruits" value="orange" />오렌지</label>
      <label><input type="radio" name="fruits" value="melon" />멜론</label>
    </form>

radio 역시, 체크박스와 동일하게 체크되어 있는 것을 checked 속성을 활용해 확인해 볼 수 있어요!

 

- 콤보박스 다루기

콤보박스도 체크박스, 라디오처럼 checked 속성을 사용하시면 됩니다. 

 

- 파일 업로드 요소 다루기

파일 업로드는 프로젝트할 때 엄청 많이 쓰이게 될 거예요!

이번에 파일 업로드 요소 다루기에서 잘 익히 시킬 바랍니다.

<form>
  <input type="file" name="upload" />
</form>

파일 업로드 요소에서 핵심은 files 속성으로 반환되는 FileList 객체입니다.

앞의 코드를 웹 브라우저로 실행하고 이미지 파일을 하나 첨부해 보세요!

 

그다음으로, 아래의 코드를 콘솔창에 작성해 보시면, FileList 객체가 나오는 것을 볼 수 있어요.

const filesObj = document.frm.upload.files;
console.log(filesObj)

FileList 객체에 접근해 보면 다음과 같은 정보를 가져올 수 있습니다.

  const files = docuemnt.frm.upload.files;
  files[0].name; // 파일 이름
  files[0].size; // 파일 크기
  files[0].type; // 파일 타입
  files[0].lastModifiedDate; // 파일 마지막 수정일

 

6. 이벤트 다루기

6.1 이벤트 종류

웹 브라우저에서 사용자와의 상호작용으로 발생하는 이벤트는 200여 가지가 넘기 때문에 모든 이벤트를 다루기는 불가능합니다. 그래서 이 책에서는 꼭 알아야 하는 중요한 이벤트를 몇 가지만 살펴보겠습니다.

 

책에 있는 표 15-9를 참고하셔서 이벤트 종류와 설명에 대해서 한 번 꼼꼼히 읽어보세요!

onclick, onfocus, onsubmit이 자주 쓰입니다.

 

6.2 이벤트 등록하기

이벤트가 발생할 때 어떤 작업을 할지 자바스크립트 코드로 작성하는 것을 이벤트 등록이라고 합니다.

이벤트를 등록하는 방법은 3가지로 정리할 수 있습니다.

인라인, 프로퍼티 리스너, 이벤트 등록 메서드로 이벤트를 등록하는 것을 알아볼게요!

 

- 인라인 방식으로 이벤트 등록하기

<button onclick="clickEvent()">클릭</button>
<script>
  function clickEvent() {
    alert("click");
  }
</script>

- 프로퍼티 리스너 방식으로 이벤트 등록하기

<button>클릭</button>
<script>
  const btnEl = document.querySelector("button");
  btnEl.onclick = function () {
    alert("click");
  };
</script>

- 이벤트 등록 메서드로 이벤트 등록하기

<button>클릭</button>
<script>
  const btnEl = document.querySelector("button");
  btnEl.addEventListener("click", function () {
    alert("button click");
  });
</script>

 

이 세 가지 이벤트 등록 방법 중에 저는 인라인 방식이나 이벤트 등록 메서드를 많이 사용하는 것 같아요.

편한 방법을 찾아보시고, 꼭 세가지 방법으로 다양하게 외우시지 않으셔도 됩니다!

 

7. 이벤트 객체와 this

7.2 이벤트 취소하기

HTML 태그 중 일부는 기본으로 이벤트가 적용되어 있습니다. 대표적으로 a 태그와  form 태그가 그렇습니다.

a 태그는 생성된 요소를 클릭하면 다른 페이지로 이동하도록 클릭 이벤트가 연결된 상태입니다.

form 태그는 폼 내부에서 버튼이 눌리면 전송되도록 전송 이벤트가 연결된 상태입니다.

이를 preventDefault() 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있습니다.

 

7.3 this 키워드 사용하기

이벤트 함수 내부에서  this  키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있습니다.

다음 코드를 보면 모든 p 태그에  click 이벤트를 연결하고, 이벤트 함수 내부에서  this 키워드를 콘솔창에 출력합니다.

<p>text-1</p>
<p>text-2</p>
<p>text-3</p>
<script>
  const pEls = document.querySelectorAll("p");
  pEls.forEach((el) => {
    el.addEventListener("click", function () {
      console.log(this);
    });
  });
</script>

 

기존 코드에서 p 태그를 클릭하면 텍스트 색상을 빨간색으로 바꿀 수 있도록 코드를 변경해 봅시다.

또한, 이미 빨간색이면 검은색으로 바뀌게 toggle 되도록 구현해 보겠습니다. 

    <p>text-1</p>
    <p>text-2</p>
    <p>text-3</p>
    <script>
      const pEls = document.querySelectorAll("p");
      pEls.forEach((el) => {
        el.addEventListener("click", function () {
          if (el.style.color === "red") {
            el.style.color = "black";
          } else {
            el.style.color = "red";
          }
        });
      });
    </script>

그럼 클릭할 때마다, 색상이 변경되는 것을 볼 수 있어요!

❗ 그리고 한 가지 더 this를 사용할 땐 조심해야 돼요.

이벤트 함수를 화살표 함수로 쓰게 된다면, this의 범위가 달라져서 this가 이벤트 발생 노드를 가리키지 않게 됩니다.

다음과 같이 화살표 함수일 때 this를 출력해 볼까요?

  const pEls = document.querySelectorAll("p");
  pEls.forEach((el) => {
    el.addEventListener("click", () => {
      console.log(this);
    });
  });

실행결과를 보면 this가 window 객체를 가리키는 것을 볼 수 있어요.

 

그래서 이럴 땐 이벤트 객체의 target 속성을 사용해야 합니다.

target 속성은 이벤트 발생 노드를 가리키는 이벤트 객체의 속성이에요!

    <script>
      const pEls = document.querySelectorAll("p");
      pEls.forEach((el) => {
        el.addEventListener("click", (e) => {
          console.log(e.target);
        });
      });
    </script>

 

 

✅ 정리

1. 폼 조작하기
2. 이벤트 다루기
3. 이벤트 객체와 this

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!

 

 

저작자표시