TIL 16: 유효성 검사, 이벤트 객체

오늘은 유효성 검사 페이지 마저 완성하고, 이벤트 객체에 대해 배웠습니다.

주말에 살짝 1주차에 배운 코플릿 내용 복습하고, 페어분이랑 함께 두시간 정도 시간을 더 내서 이 사이트를 완성해보았어요!

일단 Bare Minimum 이상으로 더 많은 것들을 해냈기에 만족스럽습니다.

그래도 항상 기본기가 다져지도록 주의하며 공부해보겠습니다.

 

 

아래와 같이 꾸며 보았습니다. 디즈니를 좋아해서 이렇게 만들어보았어요!

나름 동영상, 애니메이션, Flexbox, Validation Check 등 여러가지를 넣어보았습니다.

 

이러한 홈페이지를 만들기 위해서는 HTML, CSS, DOM 이 필요합니다.

물론 제대로 된 기능을 구현하려면 더 많은 것들이 필요하겠지만 보이는 것만으로 봤을 때는 얼추 갖출 수 있었습니다.

이번에는 내용을 하나하나 정리하기보다는 제가 몰랐던 부분을 위주로 정리해보려고 합니다.

 

먼저 처음에 DOM을 배웠을 때, 용어 자체가 굉장히 낯설었습니다.

Document Object Model(문서 객체 모델)이라는 뜻인데요. 

브라우저를 조작하기 위한 하나의 기준이라고 생각하시면 됩니다!

DOM은 Java Script에 의해 브라우저를 조작할 수 있으며, 크롬이 DOM에 의해 만들어졌다고 합니다.

 

바닐라JS는 JS이외의 추가적인 라이브러리 등을 사용하지 않고 오직 JS만 사용한 상태를 말한다고 합니다. 

 

 

innerHTML과 textContent와의 차이

innerHTML은 'Element'의 속성을 갖습니다.

또한 마크업 태그를 핸들링할 수 있습니다.

따라서 <div>, <img>, <script> 태그 등도 삽입이 가능한데요.

또 다른 말로는 XSS 공경의 대상이 쉽게 됩니다.

textContent는 'Node'의 속성을 갖습니다. 

마크업 태그를 제외한 모든 문자열을 읽고, 변경할 수 있습니다.

 

 

이벤트 객체로는 아래와 같은 것들이 있습니다.

아직 직접 사용하지 못해본 것도 몇개 있는데 블로깅 마치고 마저 해보려고 합니다!

• onclick
• onsubmit
• onchange
• onmouseover
• onkeyup
• event.preventDefault