가카리의 공부방

40. jQuery 이벤트 vs 자바스크립트 이벤트 jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 아래 예제는 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용하는 것의 차이점을 보여준다. (실행) // 순수하게 구현했을 때 var target = document.getElementById('pure'); if(target.addEventListener){ target.addEventListener('click', function(event){ alert('pure'); }); } else { target.attachEvent('onclick', function(event){ alert('pure'); }); } // jQuery를 사용했을 때 $('#jquery').on('click',..

39. 마우스 1) 이벤트 타입 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click 클릭했을 때 발생하는 이벤트. dblclick 더블클릭을 했을 때 발생하는 이벤트 mousedown 마우스를 누를 때 발생 mouseup 마우스버튼을 땔 때 발생 mousemove 마우스를 움직일 때 mouseover 마우스가 엘리먼트에 진입할 때 발생 mouseout 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu 컨텍스트 메뉴가 실행될 때 발생 2) 키보드 조합 마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다. event.shiftKey event.altKey ..

38. 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.아래 코드의 실행결과는 null이다. Hello가 로딩되기 전에 자바스크립트가 실행되었기 때문이다. var t = document.getElementById('target'); console.log(t); Hello 이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이다. Hello var t = document.getElementById('target'); console.log(t); 또 다른 방법은 load 이벤트를 이용하는 것이다. window.addEventListener('load', func..

36. 이벤트 타입 아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다. 1 웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다. 37. 폼 폼과 관련된 이벤트 타입을 알아보자. 1) submit submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.form 태그에 적용된다. 아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다. name var t = document.getElementById('target'); t.addEventListener('submit', function(event){ ..

35. 기본동작의 취소 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. 1) inline 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials 2) property 방식 리턴 값이 false이면 기본동작이 취소된다. (실행) prevent event on opentutorials document.querySelector('a').onc..

31. 이벤트 등록방법(inline) 인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 32. 이벤트 등록방법(프로퍼티 리스너) 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할..

30. 이벤트 1) 이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. DOCTYPE html> onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. 2) event target target은 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다. 3) event type 이벤트의 ..

29. 문서의 기하학적 특성 1) 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. body{ padding:0; margin:0; } #target{ width:100px; height:100px; border:50px solid #1065e6; padding:50px; margin:50px; } Coding var t = document.getElementById('target'); console.log(t.getBoundingClientRect()); 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClie..

27. Text 객체 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다. (둘 다 같은 의미임) nodeValue data html css JavaScript var t = document.getElementById('target').firstChild; console.log(t.nodeValue); console.log(t.data); 출처 : https://opentutorials.org/course/1375/6745 28. Text 객체 조작 API 텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작..

26. Text 객체 1) 소개 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world var t1 = document.getElementById('target1').firstChild; var t2 = document.getElementById('target2').firstChild; console.log(t1.firstChild.nodeValue); try{ console.log(t2.firstChild.nodeValue); } catch(e){ console.log(e); } console.log(t2.nextSibling..