실무에서 하드 코딩을 하다가 배열 안에서 중복되는 값들을 count 해야 하는 상황이 왔다. 찾아보니 reduce()라는 기능을 가진 녀석이 있었는데 글을 적으며 이해하기 위해 노력해본다. ex) arr = {"김동수","김동수","김영희","김영희"} 라는 녀석이 있는데 중복 값을 count 해야 한다. 얼핏 정리한 글들을 봤는데 자바스크립트 내장 메서드 중에서 제일 강력하다는 글을 보았다. 먼저 map()을 살펴보자. map()이란? map의 기본 원리는 간단한데, 반복문을 돌며 배열 안의 요소들을 1:1로 짝지어 주는 것이다. 어떻게 짝지어줄 것인가 정의한 함수를 메서드의 인자로 넣어주면 된다. // map 활용 const arr = [1,2,3]; let result = arr.map( (resu..
| 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 파라미터로 ..
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 반복문 한..
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초) 가속도는 숨기거나 노출하는 동안의 가속도..
키보드 이벤트 -keydown() / keyup() /keypress() 메서드keydown()과 keypress() 이벤트 메서드는 선택한 요소에서 키보드 자판을 눌렀을 때 이벤트를 발생시키거나 해당 이벤트를 강제로 발생시킵니다.차이점 : keydown()은 모든 키(한글 제외) 에 대해 이벤트를 발생시키지만 keypress()는 기능크(F1~F12,Alt,Ctrl,Shift,백스페이스,캡스락,탭,한영)에 대해 이벤트를 발생시키지 X또한 키베도 이벤트 핸들러에서 생성된 이벤트 객체의 속성을 이용하면 고유 키의 코드값을 구할 수 있다. 이를 사용해 단축키 기능도 만들 수 있다. -이벤트가 발생한 요소 추적하기사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해오는 방법입니다.이벤트가 발생한 요소를 선택해..