| change() 란? javascript를 사용하여 이벤트를 동작하기 위해서는 addEventListener() 라는 함수가 존재합니다. 이벤트를 구현할 경우 jQuery를 사용하면 간단한 방법으로 이벤트를 제어할 수 있습니다. ex)bind(),on(),change() | 문법 해당요소.change(실행할 코드); change() 메소드는 해당하는 요소의 value에 변화가 생길 경우 이를 감지하여 등록된 callback함수를 동작시킵니다. 해당 코드는 input,textarea,select 태그에 동작합니다. 예시) 파일 첨부가 완료되었음을 알리는 알림창을 띄우는 코드 파일을 첨부해주세요! 이벤트를 동작시킬 코드 이처럼 파일이 등록되면 change() 함수가 감지하여 이벤트(alert)를 발생시키..
| FormData란 ? 이번에는 FormData를 사용하여 태그처럼 파일을 넘겨주는 방식을 알아보겠습니다. FormData 인터페이스는 XMLHttpRequest.send()로 쉽게 보내질 수 있는 폼 filed와 key / value 쌍을 쉽게 만들 수 있습니다. 인코딩 type이 "multipart/form-daata"로 설정 되어 있으면 폼이 사용하는 것과 같은 포맷으로 사용합니다 contentType,processData 옵션은 false로 설정해야 합니다 ※processData란 ? 일반적으로 서버에 전달되는 데이터는 query string 형태로 전달되기 때문에) ex) http://example.com/over/there?title=Main_page&action=raw data 파라미터로 ..
| encodeURIComponent() ? encodeURIComponent() 함수는 URI의 특정한 문자를 UTF-8로 인코딩해 하나,둘 OR 셋의 연속된 이스케이프 문자로 나타냅니다. ※두 개의 대리 문자로 이루어진 문자만 이스케이프 문자 네개로 변환됩니다. 다음 문자를 제외한 모든 문자를 이스케이프(유니코드 형식으로 변환) 합니다. 1BYTE 문자는 %XX, 2BYTE 문자는 %uXXXX 형태로 Not Escaped: A-Z a-z 0-9 - _ . ! ~ * ' ( ) //영 대소문자, 숫자 , *-_.,! ~ ' ( ) 은 제외 구문 encodeURIComponent(str); 매개변수 : URI 구성요소 반환 값 주어진 문자열을 URI 구성요소로서 인코딩한 새로운 문자열 | encodeUR..
jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. each() 메서드는 다음과 같은 두 가지 타입이 있습니다. // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) 간략한 설명을 드리겠습니다. $(selector).each(function(index, element)) $('li').each 셀렉터는 앞에 알맞게 본인이 원하는걸 선택하면 되겠습니다. function 반복문 한..
콜백함수란? 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 함수정의 // 콜백 함수가 될 매개변수 설정 function plus(a, b, callback) { var sum = a + b; callback(sum); } plus 함수를 보면 callback라는 매개변수를 넣어주고 plus 함수 내부에서 callback 매개변수를 함수 형태로 실행하고 있는 모습입니다. 정의한 함수 호출 // plus 함수에 익명 함수를 인자로 전달 plus(1, 2, function(result) { console.log(result); }); 익명 함수를 전달하고 plus 함수를 호출하고 있는 모습입니다. 함수에서 ..
Ajax-Ajax란 비동기 방식의 javascript와 XML을 가리킨다. 동기 방식과 빙동기 방식의 차이점에 대해 설명한다면, %차이점동기방식->서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행비동기식 방식->반대로 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 사용이유-AJax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버간에 XML과 JSON,텍스트,HTML등의 정보를 교환하기 위해서이다.즉, Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있다. 또한 자료를 요청할 경우 어느정도 시간이 소요되는데 반해 Ajax는 기다릴 필요 없이 바로 수행 가능하다.
애니메이션 효과 제어 메서드‘효과’ 또는 ‘애니메이션’이 적용된 요소의 동작을 제어하는 메서드이다. 개념함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장이된다. 큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 이해하기 쉽다.사람들이 줄을 서 있고, 먼저 마친 사람은 먼저 나간다. 이와 같이 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.% 먼저 들어간 데이터가 먼저 처리되는 형식을 FIFO(first in first out)이라고 부른다.종류stop ,delay , queue , clearQueue , dequeue , finish가 있다. -stop / delay 메서드1.stop-> 요소에 적용한 애니메이션을 정지시킨다.기본형$(“요소 선..
효과 및 애니메이션 메서드문서 객체를 보이게 했다가 안 보이게 하려면 스타일의 display속성을 이용해야 한다. 단,스타일을 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다.하지만 효과 메서드를 이용하면 스타일을 이용하는 것보다 좀 더 역동적으로 동작을 조절해 화려하게 숨기거나 보이게 만들 수 있다. -효과 메서드선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메서드가 있다.종류 기본형$(“요소선택”).효과메서드(효과 소요 시간,가속도,콜백 함수); 효과 소요시간은 요소를 숨기거나 노출할 때 소요되는 시간case1) ex) “slow” , “normal” , “fast”case2) ex) 1,000 (1초) 500 (0.5초) 가속도는 숨기거나 노출하는 동안의 가속도..