12장

1분 퀴즈

1. ③

해설_ 문서 객체 모델은 웹 브라우저에서 생성되므로 자바스크립트 언어 사양에는 포함되지 않습니다.

본문으로

2. ①

해설_ document.getElementById() 메서드는 id 속성값을 # 없이 문자열로 입력합니다.

본문으로

3. ④

해설_ textContent/innerHTML/innerText 속성을 사용하면 콘텐츠를 변경할 수 있습니다. 그리고 classList 객체의 remove() 메서드를 사용하면 클래스를 삭제할 수 있습니다. removeClass() 메서드는 실제로는 없는 메서드입니다. 하지만 마치 메서드 이름처럼 그럴 듯해 보여서 자주 헷갈리니 잘 기억해 주세요.

본문으로

4. ④

해설_ 요소 노드는 createElement() 메서드로 생성합니다. 그리고 img 태그의 속성 경로와 설명은 src 속성과 alt 속성으로 지정합니다. 마지막으로 생성한 요소 노드를 HTML 문서에 추가할 때는 appendChild() 메서드를 사용합니다.

본문으로

5. ①

해설_ document 객체를 사용하면 form 태그의 name 속성값을 이용해 특정 form 요소 노드에 접근할 수 있습니다. form 요소 노드에 접근한 뒤에는 하위 노드들의 name 속성값으로 원하는 입력 요소를 선택하고 value 속성으로 입력값을 가져오면 됩니다.

본문으로

6.

<button>클릭</button>
<script>
  document.querySelector("button").addEventListener("dblclick", function(){
    alert("dblclick!");
  })
</script>

해설_ 이벤트 등록 대상 노드를 선택하고 addEventListener() 메서드에 이벤트 타입과 그에 따른 실행 함수를 매개변수로 전달해 이벤트를 등록하면 됩니다.

본문으로

7. ⑤

해설_ 이벤트 객체의 매개변수 이름은 마음대로 지정해도 됩니다. 단, 문제에서는 이벤트 함수 내부에서 e라는 변수명을 참조하므로 (가)는 e가 되어야 합니다. 그리고 기본 이벤트를 취소하므로 (나)에는 preventDefault() 메서드가 들어가야 합니다.

본문으로

셀프체크

document.forms[0].addEventListener("submit", function(e){
  // 1
  e.preventDefault();
  const idEl = document.forms[0].username;
  const idValue = idEl.value.trim();
  const pwEl = document.forms[0].password;
  const pwValue = pwEl.value.trim();
  // 2
  if(idValue === ""){
    alert("아이디를 입력해 주세요.");
    idEl.focus();
    return;
  }
  // 3
  if(idValue.indexOf("@") === -1){
    alert("아이디는 이메일 형식으로 입력해 주세요.");
    idEl.focus();
    return;
  }
  // 4
  if(pwValue  === ""){
    alert("비밀번호를 입력해 주세요.");
    pwEl.focus();
    return;
  }
  // 5
  if(pwValue.trim().length <= 4){
    alert("비밀번호는 5자리 이상 입력해 주세요.")
    pwEl.focus();
  }
  // 6
  this.submit();
});

1. 기본 이벤트를 취소할 때는 이벤트 객체의 preventDefault() 메서드를 사용합니다.

2. 4. 아이디 값이나 비밀번호 값은 노드를 선택해서 value 속성으로 가져올 수 있습니다. 이때, 공백을 제거하기 위해 String 객체의 trim() 메서드(11.3.1 문자열을 다루는 String 객체 참고)도 함께 사용합니다.

3. 아이디 값에 @ 기호가 포함됐는지 확인하려면 indexOf() 메서드로 문자열을 검사합니다. -1보다 큰 값이 나오면 @ 기호가 있다는 의미이고, -1이 나오면 없다는 의미입니다.

5. 문자열의 길이는 length 속성으로 확인할 수 있습니다.

6. 폼 요소는 submit() 메서드로 전송할 수 있습니다.

본문으로