H O M E

function ajaxReturnData(){ var result_data; $.ajax({ type : "post" ,url : "" ,data : data ,dataType : "json" ,async : false success: function(data, textStatus) { result_data = data; } }); return result_data; } 함수 내에 변수 선언후 ajax success 시에 해당 변수에 서버에서 return해준 값을 담아서 return !! ajax는 기본 동기식이기 때문에 async: false 옵션을 추가하여 비동기로 통신해야한다.

JSON ( JavaScript Object Notation ) * Javascript에서 객체를 만들 때 사용하는 일종의 데이터 표준을 의미한다. * 사람이 읽고 쓰기가 쉽고, 기계도 분석과 생성이 용이하다. 데이터의 용량도 작다. * 설정의 저장이나 데이터 전송 등에 많이 사용된다. * JSON이 지원하는 데이터 형식 등 자세한 내용은 이쪽 ->>> http://www.json.org/json-ko.html JSON API* JSON.parse(); 인자로 전달된 문자열을 JavaScript의 데이터로 변환. * JSON.stringify(); 인자로 전달된 JavaScript 데이터를 문자열로 변환. JSON을 이용한 AJAX 통신* AJAX를 이용한 타임라인 항목을 리스트로 표현하는 예제

Ajax * Asynchronous JavaScript and XML의 약자다 * 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. * JavaScript를 이용해 웹 서버와 웹 브라우저가 내부적으로 통신하게 된다. * 변경된 결과를 웹페이지에 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 된다. * IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 한다. * 반드시 비동기적으로 동작해야 한다. XMLHttpRequest ( 실습에 서버 필요) * 마이크로소프트가 만든 JavaScript의 객체로 HTTP를 통해 쉽..

1. form * 사용자가 입력한 정보를 서버로 전송하는 HTML 태그 submit폼의 정보를 서버로 번송하는 명령인 submit시에 일어난다.form 태그에 적용된다.예제 >실행 화면 링크실행 화면 링크 결과 Hello * Hello가 로드되기 전에 스크립트가 실행되어 값은 null이 나왔다. - 이를 해결하기 위한 첫번째 방법은 자바스크립트를 문서 끝에 위치시키는 것이다. - 두번째 방법 : load 이벤트 이용 Hello * load 이벤트 발생 시 메소드가 호출되면서 해당 HTML 엘리먼트를 찾는다. * load 이벤트는 웹페이지 전체가 브라우저에서 해석이 끝나고 이미지와 스크립트 등의 리소스 까지 다운로드가 끝났을 때 load 객체가 자동으로 호출되도록 약속되어있다. 때문에 타겟을 찾을 수 있다..

기본 이벤트 * 웹 브라우저의 기본 요소들의 기본 동작* 예 ) a 태그를 클릭하면 href 속성의 URL로 이동한다. 예 ) 폼에서 submit을 누르면 데이터가 전송된다. 예 ) 텍스트 필드에 포커스를 맞춘 상태에서 키보드로 켁스트를 입력할 수 있다. 1. inline* 이벤트의 리턴 값이 false 이면 이벤트가 취소된다. - 예제 >실행 화면 링크실행 화면 링크실행 화면 링크

이벤트 전파* 부모 - 자식의 계층 구조로 이루어진 각각의 요소에 이벤트를 부여할 때 이벤트 순서를 정할 수 있다. 1. 캡처링 ( Capturing )* 부모노드에서 자식노드로 이벤트가 전파된다.* 낮은 IE 버전에서는 작동하지 않아 선호되는 방식은 아니다.* item.addEventListener("이벤트 타입", 이벤트 핸들러, true); 2. 버블링 ( Bubbling )* 자식 노드부터 부모 노드로 이벤트가 전파된다.* item.addEventListener("이벤트 타입", 이벤트 핸들러, false); 3. 캡처링과 버블링 예제 one two three 위의 예제 코드를 계층화 해서 보면 아래와 같다 캡처링 이벤트 전파일 때 버블링 전파일 때 4. 이벤트 전파 차단* 다층 구조의 노드에 이..

1. inline* 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.* 이벤트의 소재를 파악하기 용이하다.* 정보인 HTML과 제어인 JavaScript가 혼재되어 좋은 방식은 아니다. ☆ 이벤트가 발생한 대상을 원하는 경우 this를 이용해 참조할 수 있다. - 자기 자신을 참조- this를 이용해 참조 2. Property Listener* 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록한다.* HTML과 JavaScript를 분리한다. ☆ 이벤트가 실행된 맥락의 정보가 필요할 때 이벤트 객체를 이용한다. 이는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다. 3. addEventListener()* 이벤트를 등록하는 가장 권장되는 방법* 여러개의 이벤트 핸들러를 등록할 수 있다. -..

이벤트* 어떤 사건을 의미한다.* 사용자가 클릭했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꿨을 '때' * 개발자가 어떤일이 발생했을 때 실행되어아얄 코드를 등록하고, 브라우저는 그 일이 발생했을 때 코드를 실행한다. 이러한 방식을 이벤트 프로그래밍이라고 한다. onclick 속성을 생각하면 쉽다. * event target : 이벤트가 일어날 객체* event type : 이벤트의 종류를 의미한다. click 또는 scroll ( 사용자가 스크롤을 움직였을 때 ), mousemove ( 사용자가 마우스를 움직였을 때 )* event handler : 이벤트가 발생했을 때 동작하는 코드이다. >>>>>이벤트 타입의 종류 링크

1. getBoundingClientRect();* 엘리먼트의 크기를 반환한다. Coding - 결과 2. Viewport* 문서의 내용 중 사용자에게 보여지는 부분을 의미한다. 이에따라 문서의 좌표와 Viewport의 좌표가 있다.* Viewport 좌표는 스크롤이 생기면 스크롤의 위치에 따라 요소의 위치가 달라진다.* 스크롤의 정도를 알고 싶으면 window.pageYOffset 속성을 사용하면 알 수 있다. (※ 구버전 웹브라우저는 scrollTop 속성 이용 ) - 사용 예* getBoundingClientRect의 top 속성과 window.pageYOffset의 값이 1초마다 출력 Coding 3. 문서의 좌표* Viewport의 좌표에 스크롤의 정도를 더하면 알 수 있다. // 위 예제의 함..

조작 API* 문자를 제어하는 API - 종류* appendData() : 인자로 추가 할 텍스트를 넘겨주어 마지막에 추가한다.* deleteData() : 첫번째 인자부터 두번째 인자까지 텍스트 삭제 * insertData() : 두번째 인자로 삽입할 텍스트를 넘겨주어 첫번째 인자부터 텍스트를 삽입한다.* replaceData() : 세번째 인자로 변경할 텍스트를 넘겨주어 첫번째 인자부터 두번째인자까지 변경한다.* substringData() : 첫번째 인자부터 두번째 인자까지의 텍스트를 반환한다. - 예제 HTML! CSS //텍스트 필드 data : start : end : //기능 버튼 - 결과 HTML! CSS data : start : end :