power-girl0-0

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 기본 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자. on의 기본적인 문법은 아래와 같다. .on( events [, selector ] [, data ], handler(eventObject) ) [ ] 대괄호 있는 부분은 생략이 가능하나, 어떤 것을 생략하느냐에 따라 기능이 달라진다. event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 아래 예제는 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용하는 것의 차이점을 보여준다. (실행 결과) 위 코드를 통해 jQuery 코드가 사용하지 않은 것보다 현저히 적은 것을 확인할 수 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. 이런 이유 때문에 jQuery와 같은 라이브러리를 사용하는 것이다.

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 이벤트 타입 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click : 클릭했을 때 발생하는 이벤트. dblclick : 더블클릭을 했을 때 발생하는 이벤트 mousedown : 마우스를 누를 때 발생 mouseup : 마우스버튼을 땔 때 발생 mousemove : 마우스를 움직일 때 mouseover : 마우스가 엘리먼트에 진입할 때 발생 mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu : 컨텍스트 메뉴가 실행될 때 발생..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다. 아래 코드의 실행결과는 null이다. Hello가 로딩되기 전에 자바스크립트가 실행되었기 때문이다. Hello 이를 해결하려면 아래와 같이, 스크립트를 문서 끝에 위치시켜야 한다. Hello 또 다른 방법은 load 이벤트를 이용하는 것이다. Hello 그런데 load 이벤트는 문서내의 모든 리소스(이미지, ..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) Form과 관련된 이벤트 타입에 대해서 알아보자. 이것은 주로 사용자의 입력값이 유효한지에 대해서 많이 사용된다. submit submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. 아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단하는 코드이다. name 아래 구문은 전송을 취소하는 명령이다. 이것을 이용하여, 값이 없으면 전송되지 않도록 설정한 것이다. event.preventDefault..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 이벤트의 리턴값이 false이면 기본 동작이 취소된다. 아래 코드는 기본 동작을 막으려면 체크박스..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 이벤트 전파 HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 캡처링 ( capturing ) 이런 경우 중첩된 태그들에 이벤트가 등록 되어 있다면 어떻게 처리 될까? 아래 소스를 통해 알아보자.(실행 결과) [ 실행결과 ] INPUT HTML capturing INPUT BODY capturing INPUT FIELDSET capturing INPUT INPUT target 이벤트가 부모에서부터 발..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) addEventListener( ) addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. 위 코드와 같이 t객체에 addEventListener을 이용하여, 해당 객체를 클릭하면 두번째 인자의 함수가 실행된다. 하지만, 위 방식은 ie8이하에서는 호환되지 않는다. 따라서, attachEvent 메소드를 사용해야 하며, 이것은 addEventListener와 같은 방식인데 이름만 다른 것이다..