가카리의 공부방

44. 네트워크 통신 - jQuery Ajax jQuery이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중의 하나가 크로스브라우징의 문제를 jQuery가 알아서 해결해준다는 것이다. 뿐만 아니라 여러가지 편리한 기능들을 제공한다. 이번 시간에는 jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자. jQuery는 Ajax와 관련해서 많은 API를 제공한다. http://api.jquery.com/category/ajax/ 그 중에서 가장 중요한 API는 $.ajax이다. 1) $.ajax http://api.jquery.com/jQuery.ajax/ $.ajax의 문법은 아래와 같다. 1 jQuery.ajax( [settings ] ) setting는 Ajax 통신을 위한 옵션을 담고 있..

43. 네트워크 통신 - JSON 1) JSON이란? JSON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. 이런 이유로 최근에는 JSON이 XML을 대체해서 설정의 저장이나 데이터를 전송등에 많이 사용된다. JSON에 대한 자세한 내용은 아래 JSON의 공식홈페이지를 참조한다. http://www.json.org/json-ko.html 2) JSON API ECMAscript 5에는 JSON을 공식적으로 지원하는 API가 포함되었다. JSON.parse() 인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다.JSON.stringify() ..

42. 네트워크 통신 - Ajax 1) Ajax 웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었다. 그러다 Ajax 개념이 도입되면서 모든 것이 바뀌었다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. Ajax는 Asynchronous JavaScript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미..

41. jQuery on API 사용법 1) 기본 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자.on의 기본적인 문법은 아래와 같다. 1 .on( events [, selector ] [, data ], handler(eventObject) ) event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함 data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함 handler : 이벤트 핸들러 함수 1) selector selector 파라미터는 이벤트 대상을 필터링한다. 아래 예제를 보자. on메소드의 2번째..

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를 분리할..