본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


자바스크립트22

Input type File 다중 파일 선택 & Ajax 전송 input type file 테그 속성중에 multiple이라는 속성이 있다. 해당 속성을 선택하면 파일이 여러개 선택 되는데, 해당 데이터가 배열로 리턴된다. 해당 내용을 한번에 던져도 상관없지만 만약 프로그래스를 구현하려면 각각 전송하는 것을 권장한다. function sendData(){ $.each(formArray, function (uniquId, DATA) { //앞서 유니크한 아이디로 프로그래스 아이디를 매칭하면 파일마다 각각 //전송상태 효과를 줄 수 있다. $.ajax({ url: '주소', xhr: function() { var myXhr = $.ajaxSettings.xhr(); //PROGRESS_KEY 값에 앞서 지정한 유니크한아이디를 넣어주자. myXhr.upload.PROGR.. 2019. 4. 27.
Javascript로 일반 문자열을 배열로 파싱, 변환 서버에서 데이터를 받은 경우에..헤더나 네트워크문제로 해당 데이터가 객체가 아니라 일반 문자열로 들어오는 경우가 있다. 또는 콤마, json형식처럼 보이는 문자열을 가져와서 파싱만 해주면 반복문으로 사용하면 참 편리한데 이걸 일일이 split하거나 사용자 정의의 파싱메소드를 만들기에는 참 귀찮은 일이지 않을 수 없다. 이럴때는 아래 소스코드를 활용하면 쉽게 배열형태의 객체로 파싱이 가능하다. var string = "0,1,2,3,4,5"; //콤마로된 문자열 var objectstring = '{Name:"김이사", number:12345}'; //json형태의 문자열 var stringToArray = (new Function("return [" + string+ "];")()); var object.. 2019. 4. 27.
Jquery 객체 생성시 이벤트 부여(FadeIn) Jquery를 활용하여 객체 생성시 이벤트를 주는 방법이다. 물론..앵귤러같은경우에는 데이터를 갱신만 하면 알아서 그려주지만... Jquery는 앵귤러처럼 양방향 바인딩이 아니니깐..어쩔수 없이 일일이 그리고 효과를 부여해야 한다. var pgContents = "Hello world!"; var item = $(pgContents).fadeIn(500); //효과 $('#대상').append(item);//객체생성 위 예제코드를 적용하면 append가 실행되면서 이벤트가 바로 처리된다. 비동기 방식으로 페이징 처리하거나 내용을 갱신하는경우 페이드인 효과를 고객이 주로 요구할 때 사용하면 편리하다. 2019. 4. 27.
Openlayers 사용법, 소개 매번 네이버, 구글맵 연동을 하다가 얼마전 오픈레이어스를 활용해서 지도작업을 해야되는 경우가 있었습니다. 한글지원도 잘 되고, 지형도 잘 표현하면서 나름 괜찮았던 gis 작업 이었습니다. 처음 오픈레이어스를 만났을 때는 관공서 관련된 프로젝트였는데..열지도, 지역구 그리기, 마커표시 및 이름표시 등 이러한 내용의 작업을 해야 하였습니다. 물론 네이버나 다음 및 구글 지도가 훨씬 더 이쁘고 기능도 강력하지만.. 일정량 이상 사용시 유료되는게 단점이 있으며 순수 내부망으로 구축된 곳에서는 사용 할 수가 없습니다. 그런데, 오픈레이어스의 장점은...네트워크가 되지 않아도 지형정보만 제공되어지는 서버가 존재 한 다면, 해당 정보를 통해 기능구현이 가능한 점 입니다. 저 또한 지형정보를 가진 업체와 일을 해보니... 2019. 4. 27.
Javascript Map, 맵 자바스크립트에서 Map 객체를 활용하여 데이터를 set, get 할 수 있는 방법이 es6문법편에서부터 자세히 소개 되어 있다. 해당 기능을 통해서 데이터를 나유롭게 가져 올 수 있고, 또한 반복문을 통해서 데이터를 출력 하는 것 도 가능 하다. 물론...배열에 json형식 데이터를 넣으면 맵처럼 사용 하기 쉽고 편하긴 하지만, 개인적으로 자바스크립트에서의 배열의 단점이 delete가 좀 귀찮고 delete된 객체가 비어버릴 경우 undefined나 null값이 들어가는 경우 때문에 이 Map을 활용 한 다면 조금 더 쉽게 key, value 형태로 객체를 다룰 수 있지 않을까 싶다. var map = new Map(); //맵 객체 선언 map.set("param","data"); //key, valu.. 2019. 4. 27.
자바스크립트 정규식 RegExp es6가 나옴에 따라 정규식을 만들어 주는 객체가 한개 생겼다. 정규식을 찾아서 일일이 할 필요가 없는 괜찮은 기능인 것 같다. var re = new RegExp("ab+c"); console.log(re); 생성자에 원하는 값을 넣어주면 자동으로 정규식으로 변환하여 준다. 2019. 4. 27.