[JavaScript] 보충

자바스크립트 보충

동적으로 HTML 작성하기

• innerHTML(): 직접 태그의 형태를 생성한다.
• createElement(): 문서에 괄호안의 태그를 생성한다.
• classList.add(): 클래스 속성의 값을 추가한다.
• setAttribute(): 특정 속성과 값을 추가하여 설정한다.
• textContent(): 해당 태그에 텍스트 내용을 추가한다.
  • toLocaleString: 숫자를 단위마다 (,)로 구분하여 변환한다.
    (ES6 이상 가능)
• appendChild(): 태그의 계층 구조를 위해, 자식 노드로 추가한다.

---

여러 기능의 메서드

dispatchEvent()

• DOM 요소에서 이벤트를 수동으로 발생시킴.

요소.dispatchEvent(이벤트 객체);

• 이벤트 객체는 new Event()로 생성 가능
• 요소가 클릭되지 않아도 강제로 실행되게끔 함.

Array.from()

• 유사 객체 or 문자열을 배열로 변환하는 메서드
• 예제는 해당 이미지 태그 모음을 배열로 변환

trim()

• 문자열의 앞 뒤 공백을 제거하는 메서드

toLowerCase()

• 문자열의 모든 알파벳을 소문자로 변환하는 메서드

문자열.includes(찾고 싶은 문자열[, 검색 위치])

• 문자열 안에 특정 문자열이 있는지 확인하여
  true 또는 false를 반환

classList.contains(”클래스명”)

• 해당 태그의 class 속성에 클래스명이 포함되어 있는지 확인

hasOwnProperty()

• 특정 객체가 해당 속성을 가지고 있는지를 확인

    객체.hasOwnProperty(속성명)
  

  • 객체가 해당 속성을 가지고 있으면 true 반환
  • 없으면, false 반환

---

여러 가지의 이벤트

“input” vs “keyup” 이벤트 차이점

• 최신 브라우저는 “input” 이벤트가 지원되므로 사용 가능

• 따라서, 지원되지 않는 환경에서는 “keyup” 이벤트를 사용하도록 함

  이벤트	동작방식
  “input”	입력값이 변경될 때마다 실행 ⇒ 한 글자 입력할 때마다 실행
  “keyup”	키보드를 눌렀다 뗄 때 실행됨

event.target.tagName

• 이벤트 대상의 태그명을 반환
• 알파벳 대문자로 반환

[상태] selectedIndex

• select 태그에서, 선택한 option 의 인덱스를 반환한다.

[상태] checked

• input[type="checkbox"] 태그에서, 선택한 option 의 인덱스를 반환한다.

change 이벤트: 특정 패키지를 선택하면, 해당 패키지를 선택했다는 문구가 화면에 나타나도록 구성한다.
submit 이벤트: 제출 전, 체크박스를 체크하지 않았다면 경고 문구가 화면에 나타나도록 구성한다.