FU11M00N

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 마우스 이벤트 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원합니다. click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트 mousedown 마우스를 누를 때 발생 mouseup 마우스버튼을 땔 때 발생 mousemove 마우스를 움직일 때 mouseover 마우스가 엘리먼트에 진입할 때 발생 mouseout 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu 컨텍스트 메뉴가 실행될 때 발생 - 키보드 조합 마우스 이벤트 마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용하면 됩니다. 이 때 ..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 합니다. 이것을 알려주는 이벤트가 load 와 DOMContentLoaded 입니다. Hello Hello가 로딩되기 전에 자바스크립트가 실행되었기 때문에 null이 출력됩니다. 해결하기 위한 방법 중 하나는 아래 코드와 같이 스크립트를 문서가 로드 된 후에 위치시키면 됩니다. Hello 결과가 제대로 출력되는 것을 확인할 수 있습니다. - load 다른 방법으로 load 이벤트를 사용하면됩니다. Hello window 전역객체에 load 되었을 때 이벤트를 추가합니다. load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. 이번 포스팅에서는 폼과 관련된 이벤트 타입을 알아보도록 하겠습니다. - 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 ..