FU11M00N

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. 이번 포스팅에서는 폼과 관련된 이벤트 타입을 알아보도록 하겠습니다. - submit submit 은 폼의 정보를 서버로 전송하는 명령인 submit 시에 발생합니다. - 예제 name 만약 값이 입력되지 않았다면 전송을 중단됩니다. name 이라는 id 를 가진 태그의 값이 아무것도 없을 때, 위 그림과 같이 Name 필드의 값이 누락되었다는 메시지와 함께 submit 이 중단됩니다. event.preventDefault(); 기본 동작을 취소하는 명령입니다. - change change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트입니다. input(text,radio,checkbox), textarea, select 태..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 캡처링(Capturing) HTML 태그는 중첩되어 있습니다. 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 되는 경우가 생깁니다. 이럴때 중첩된 태그들의 이벤트는 어떻게 처리가 되어 출력이 되는지 보겠습니다. - 예제 event propagation 위의 예제 코드에서, 제일 안쪽에 존재하는 id 가 target 인 버튼을 누르면 아래와 같이 출력됩니다. 그러면 이벤트가 부모에서부터 시작되어 자식으로 전파되는 식으로 출력이 됩니다. 부모에서 자식으로 전파되는 방식이 캡쳐링(capturing) 이라고 합니다. 하지만 ie 낮은 버전에서는 작동하지 않기 때문에 잘 사용하지는 않습니다. - 버블링(Bubb..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 이벤트(Event)란 이벤트(event)는 어떤 사건을 의미합니다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 뜻합니다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행됩니다. JS 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록합니다. 그리고 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 됩니다. 이러한 방식을 이벤트 프로그래밍이라고 합니다. - event target target은 이벤트가 일어날 객체를 의미합니다. 타겟은 버튼 태그에 대한 객체..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 알아보도록 하겠습니다. - 예제 Coding 엘리먼트의 테두리와 body 태그 사이의 거리가 50px입니다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px입니다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect 입니다. 이를 콘솔에서 실행한 결과는 아래와 같습니다. 즉 엘리먼트의 크기와 위치를 알고 싶을 때는 getBoundingClientRect를 사용하면 됩니다. getBoundingClientRect의 width 값을 IE는 제공하지 않습니다. 엘리먼트가 중첩되어 있다면 위와같이 coding 엘리먼트와 문서와의 거리는 2..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받습니다. 여기서 중요한점은 DOM에서는 공백이나 줄바꿈도 텍스트 노드입니다. - Text 객체 예제 Hello world Hello world 사이에 공백이 없기때문에 target1의 첫번째 자식은 p 엘리먼트입니다. target2 의 첫번째 자식은 text 입니다. 줄바꿈이나 공백 같은 것도 하나의 객체라고 인식하기 때문입니다. 즉 Hello world 를 출력하고 싶다면, 첫번째 자식의 형제 관계를 찾아야합니다. - Text 객체 주요기능 값 아래 리스트는 텍스트 노드의 값을 가져오는 API입니다. data nodeValue 조..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - Document Document 객체는 DOM의 스펙입니다. 이것이 웹브라우저에서는 HTMLDocument 객체로 사용됩니다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있습니다. - 예제 document 는 node 를 상속받았기 때문에, childNodes를 사용가능합니다. 위의 결과는 document 의 첫번째 자식은 이 출력되고 두번째 자식은 html 태그 전체라는 것을 출력해줍니다. - Document 주요 API 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할입니다. createElement() createTextNode() 문서 정보 API title ..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 문자열로 노드 제어 - innerHTML innerHTML은 문자열로 자식 노드를 만들 수 있는 기능을 제공합니다. 또한 자식 노드의 값을 읽어올 수도 있습니다. - innerHTML 예제 HTML CSS get 버튼을 누르면 콘솔창에 위와 같은 결과가 출력됩니다. innerHTML 로 타겟의 하위 html 태그를 얻어옵니다. set 버튼을 누르면 html 문서가 변해서 출력됩니다. - outerHTML outerHTML은 선택한 엘리먼트를 포함해서 처리됩니다. innerHTML 은 선택한 엘리먼트 하위의 엘리먼트들을 다뤘지만, outerHTML 선택한 엘리먼트를 포함한다는 점에서 차이가 있습니다. - outerHTML 예제..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - jQuery 노드 변경 API jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있습니다. 아래 링크는 jquery api manipulation 관련 링크입니다. http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of mat..