🏃‍♂️What I learned

1. 데이터 입출력

1. innerText : JS에서 작성된 내용을 읽거나 변경
   
   • 읽어올 때 : 태그 무시
   • 변경할 때 : 문자열로 해석(태그 해석x)
2. innerHTML : JS에서 요소 전체를 읽거나 변경
   
   • 읽어올 때 : 태그+속성 모두 포함
   • 변경할 때 : HTML요소로 해석(태그 포함)

innerHTML 응용

• window.alert("내용") : 대화상자 띄우기
• window.confirm : 예/아니오 대화상자 출력
  -> 선택 결과에 따라 true/false 반환
• window.prompt("내용") : 텍스트 대화상자 띄우기
  -> 확인 : 입력 값 반환 / 취소 : null 반환

---

2. DOM(Document Object Model)

HTML의 모든 요소를 객체 형식으로 표현

1. 요소 접근 방법
   • id : document.getElementById("아이디")
   • class : document.getElementsByClassName("클래스명")
   • tag : document.getElementsByTagName("태그명")
   • name : document.getElementByName("name명")
   • CSS :
     document.querySelector("CSS선택자"):첫번째
     document.querySelectorAll("CSS선택자"): 전체

---

3. 변수

1. var변수 : 중복가능, 중복 시 덮어쓰기, 함수레벨 scope
2. let변수 : 중복불가, 블록레벨 scope
3. const상수 : 중복불가, 블록레벨 scope
4. 자료형
• string(문자열)
• number(숫자) -> 정수+실수
• boolean(논리)
• object(객체)->배열(k:v, k:v)
• function(함수)
• undefined(정의되지 않은 변수)

---

4. 이벤트

브라우저에서의 동작 or 행위
e.g.) click, keyup, keydown, mouseover 등..

• 이벤트 리스너 : 이벤트 발생을 감지하면 연결된 긴능을 수행
  e.g.) onclick, onchange.. (on + 이벤트명)
• 이벤트 핸들러 : 이벤트 리스너에 연결된 기능

1. 인라인 이벤트 모델 : 요소 내부에 이벤트 작성
2. 고전 이벤트 모델: script에서 이벤트 코드 작성
3. * 표준 이벤트 모델 : addEventListener("이벤트", 함수(){})

고전 이벤트 모델의 경우 다수의 이벤트 핸들러를 작성할 수 없음
또한, 코드해석 순서때문에 script태그를 body맨 아래에 작성해야함

---