해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 합니다. 이것을 알려주는 이벤트가 load 와 DOMContentLoaded 입니다. 예시로 load 가 왜 필요한지 보겠습니다. Hello 위 코드의 실행결과는 null 이 출력되는 것을 볼 수 있습니다. 그 이유는 Hello가 로딩되기 전에 자바스크립트가 실행되었기 때문입니다. 이를 해결하기 위한 방법 중 하나는 아래 코드와 같이 스크립트를 문서의 끝에 위치시키는 것입니다. Hello 결과가 제대로 출력되는 것을 확인할 수 있습니다. 다른 방법으로, load 이벤트를 이용할..

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 이번 포스팅에서는 폼과 관련된 이벤트 타입을 알아보도록 하겠습니다. 자바스크립트 기본 문법 :: submit submit 은 폼의 정보를 서버로 전송하는 명령인 submit 시에 발생합니다. form 태그에 적용됩니다. 아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인하는 예제입니다. 만약 값이 입력되지 않았다면 전송을 중단하도록 동작합니다. name name 이라는 id 를 가진 태그의 값이 아무것도 없을 때, 위 그림과 같이 Name 필드의 값이 누락되었다는 메시지와 함께 submit 이 중단됩니다. event.preventDefault(); 위 구문은 바로 전 포스팅인 기본 동작을 ..

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 : 기본 동작의 취소 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있습니다. 텍스트 필드에 포커스를 준 상태에서 키보드 입력이 들어오면 텍스트가 입력되고, 폼에서 submit 버튼을 누르면 데이터가 전송됩니다. a 태그를 클릭하면 href 속성의 URL로 이동합니다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 , 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있습니다. inline 방식 이벤트의 리턴값이 false이면 기본 동작이 취소됩니다. 예시를 들어보도록 하겠습니다. prevent event on opentutorials 위 그림과 같이 ..

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 : 이벤트 전파 - 캡처링(Capturing) HTML 태그는 중첩되어 있습니다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 되는 경우가 생깁니다. 이런 경우에, 중첩된 ㅌ내그들에 이벤트가 등록되어 있다면 어떻게 처리될까요? 어떤 태그부터 이벤트가 실행될까요? 예시로 살펴보도록 하겠습니다. event propagation 위의 예제 코드에서, 제일 안쪽에 존재하는 id 가 target 인 버튼을 눌러보도록 하겠습니다. 이벤트가 부모에서부터 발생해서 자식으로 전파되고 있는 것을 확인할 수 있습니다. 이러한 방식을 capturing이라고 합니다. i..