DOMContentLoaded를 사용하여 자바스크립트로 HTML 문서를 조작할 수 있습니다.
document.body.innterHTML도 마찬가지로 HTML 문서를 조작할 수 있지만 body 안에 넣어줘야 실행되는 반면 DOMContentLoaded는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행해 body 태그 이전에 넣어줘도 문제 없이 실행됩니다.
document.addEventListener('DOMContentLoaded',()=>{
})
HTML 문서 객체를 가져오기 위해서 document. 을 사용하면 됩니다. (head, body, title ...)
만약 head 안에 다른 태그에 접근하고 싶다면 querySeletor, querySeletorAll을 사용해야 합니다.querySeletor()란 괄호 내 선택자 하나에 접근할 수 있고, querySeletorAll()은 선택자 모두에 접근할 수 있는 메소드입니다.
document.querySeletor('선택자')
태그 선택자 : 태그
아이디 선택자 : #아이디
클래스 선택자 : .클래스
속성 선택자 : [속성=값]
후손 선택자 : 선택자_A
다음 HTML 문서에 글자를 넣기 위해서는 innerHTML과 textContent가 있습니다.
innerHTML은 HTML 문서에 HTML 형식으로 문자열을 넣어주고, textContent는 문자열을 그대로 넣습니다.
'<h1> 안녕하세요 </h1>' 라는 문자열에 대해 innerHTML은
안녕하세요
로 넣는 반면 textContent는
<h1>안녕하세요</h1>
그대로 넣습니다.
다음으로 HTML 문서 객체의 속성을 조정할 때는 setAttribute(), 추출할 때는 getAttribute()를 사용합니다.
document.setAttribute('속성', '값')
document.getAttribute('속성')
만약 이미지의 src를 조정할 때는 setAttribute('src', 100) 과 같이 접근하면 됩니다.
자바스크립트를 가지고 문서의 스타일에도 접근할 수 있습니다.
지금까지는 생성된 문서 객체 내부에 접근했다면 이번에는 createElement() 메소드를 사용해 객체 내부에 문서 객체를 생성하는 방법을 알아보겠습니다.
createElement('h1')을 하게 되면 h1 태그가 생기고 이를 document.body.appendChild() 해주게 되면 body 태그 아래 h1 태그가 들어가게 되는 것입니다.
만약 문서 객체를 제거하고 싶다면 removeChild() 메소드를 사용해 지울 수 있습니다. 만약 자식 객체를 지우고 싶은게 아니라 부모 객체를 지우고 싶다면 parendNode.removeChild()를 해주면 됩니다.
다음은 자바스크립트를 활용해 이벤트를 넣는 방법입니다.addEventListener('이벤트 이름', '콜백함수') 함수를 사용해 이벤트를 넣어줄 수 있습니다.
| Chapter 7-1 마무리 |
| 1. 다음 중에서 웹브라우저가 문서 객체를 모두 읽어들였을 떄 실행되는 이벤트를 골라주세요. |
| ② |
| 2. 다음과 같은 요소를 qeurySelector() 메소드로 선택할 때 사용할 수 있는 선택자를 2개 이상 적어주세요. |
| 태그 선택자, 클래스 선택자 |
| 3. 다음 중에서 문서 객체 내부의 글자를 조작하는 속성이 아닌 것을 골라주세요. |
| ④ |
| 4. 다음 CSS에서 사용하는 스타일 속성들을 자바스크립트 문서 객체에서 점을 찍고 곧바로 사용할 수 있는 형태의 식별자로 변경해주세요. |
| border-radius -> borderRadius font-family -> fontFamily line_height -> lineHeight width -> width box-sizing -> boxSizing |
이벤트리스너에 넣을 수 있는 이벤트들
키보드 이벤트
- keydown : 키가 눌릴 때 실행
- keypress : 키가 입력되었을 때
- keyup : 키보드에서 키가 떨어질 때
| Chapter 7-2 마무리 |
| 1. 다음 이벤트 모델의 이름과 코드를 연결해주세요. 식별자 listnener는 이벤트 리스너입니다. |
| a - 3 b - 2 c - 1 |
| 2. 다음 중에서 체크 박스와 라디오 버튼 등 입력 양식의 체크 상태를 확인할 때 사용하는 속성을 골라주세요. |
| ③ |
| 3. 다음 이벤트의 이름과 이벤트가 발생하는 상황을 연결해주세요. |
| a - 2 b - 1 c - 3 d - 4 |
| 4. 다음 중 기본 이벤트를 막는 메소드 이름을 골라주세요. |
| ① |
| 5. 다음 중 이벤트 리스너 내부에서 이벤트 발생 객체를 찾는 코드로 알맞은 것을 모두 골라주세요. |
| ② |
| 6. 본문에서 살펴본 입력 양식들을 활용해서 만들 수 있는 프로그램을 5개만 생각해보세요. |
| 1. 계산기 2. 일기장 3. 메모장 4. 알람 5. 점프 게임 |
try~catch를 사용해서 예외를 처리할 수 있습니다.
try에는 예외가 발생할 가능성이 있는 코드를, catch에는 예외가 발생했을 때 실행할 코드를, finally에는 무조건 실행할 코드를 넣어줍니다.
| Chapter 8-1 마무리 |
| 1. 다음 중에서 구문 오류가 발생하는 코드를 고르세요. |
| ② |
| 2. 예외 처리 구문의 조함으로 옳지 않은 것을 고르세요. |
| ③ |
| 3. 다음 코드 중에서 try catch finally 구문으로 처리할 수 없는 코드를 고르세요. |
| ③ |
throw를 사용해 예외를 강제로 발생시킬 수도 있습니다.
throw를 사용해 사용자가 무분별하게 코드를 사용하는 것과 자바스크립트 내에서 논리적 오류가 있는 경우 경고를 줄 수 있습니다.
| Chapter 8-2 마무리 |
| 1. 다음 중 예외를 강제로 발생시킬 때 사용하는 키워드는 무엇인가요? |
| ③ |
| 2. 다음 중에서 예외 객체를 e라는 변수로서 추출하는 방법으로 옳은 것을 골라주세요. |
| ② |
| 3. 다음 코드의 실행 결과를 예측해주세요. |
| > try 구문입니다. > catch 구문입니다. > finally 구문입니다. |
6주간의 여정이 끝이 났습니다!!
그럼 20000~