반응형 Programing/JavaScript123 Javascript jQuery selector 비교 정리 querySelectorAll getElements 차이 NodeList, HTMLCollection 차이 Javascript jQuery selector 비교 정리 querySelectorAll, getElements 차이 NodeList, HTMLCollection 차이 javascript와 jQuery의 selector 를 비교 정리 하는 시간을 갖어 보겠습니다. jQuery의 selector에 대해서는 아래의 link를 참고하세요. Link : https://aljjabaegi.tistory.com/58 jQuery Selector 셀렉터 사용법 jQuery Selector 셀렉터 사용법 이번 포스팅에서는 jQuery의 기본 셀렉터에 대해서 알아보도록 하겠습니다. 셀렉터는 HTML DOM element 에 보다 쉽게 접근 할 수 있게 해주며 jQuery 에서 제공하는 막강한 기능의.. aljjabaeg.. Programing/JavaScript 2020. 1. 8. 브라우저 종료 이벤트 처리, 브라우저 새로고침 이벤트 처리 브라우저 종료 이벤트 처리, 브라우저 새로고침 이벤트 처리 웹소켓 클라이언트의 경우 서버에 접속 후 브라우저를 닫거나 새로고침 할 때 서버의 Excetion을 발생 시킬 수 있습니다. org.eclipse.jetty.io.EofException Caused by: java.io.IOException: 현재 연결은 원격 호스트에 의해 강제로 끊겼습니다 그래서 클라이언트는 브라우저의 닫힘이나 새로고침 시 이벤트를 감지해서 커넥션 종료나 로그아웃 처리를 해야 할 경우가 있는데요, 그럴 때 사용하는 것이 전역객체의 onbeforeunload 함수 입니다. 그리고 새로고침도 감지해야 할 경우가 있기 때문에 브라우저에서 새로고침에 사용되는 F5, Ctrl+F5, Ctrl+r 키 이벤트를 감지해야 합니다. windo.. Programing/JavaScript 2019. 6. 17. JavaScript 정규식 정규표현식 알짜만 빼먹기 JavaScript 정규식 정규표현식 알짜만 빼먹기 이번 포스팅에서는 Javascript의 정규표현식, 줄여 정규식에 대해 알짜만 쏙쏙 빼먹는 시간을 갖어보겠습니다. 우선, 정규식이 뭐냐? MDN의 설명을 좀 참고하면, 정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서 정규 표현식 또한 객체 입니다. 라고 정의하고 있네요. 쉽게 말해 보다 쉽게 문자열 패턴을 만드는 방법입니다. 문자열 패턴을 만드는 방법이니 문자열 함수에서 주로 사용이 되겠죠? replace 나 split, match, search 등과 같이 사용하는 것을 보신 적이 있으실 꺼에요. 예를 들어보도록 하죠. Javascript 에는 java 와 같은 replaceAll 함수가 없습니다... Programing/JavaScript 2019. 6. 17. JavaScript Blob 데이터로 이미지 URL 생성해 표출하기 JavaScript Blob 데이터로 이미지 URL 생성해 표출하기 이번 포스팅은 Javascript에서 Blob 데이터를 받아 이미지 URL을 생성해 표출하는 방법을 알아보겠습니다. 우선 데이터베이스에는 BLOB 타입으로 이미지가 저장되어 있습니다. Java VO 에서는 byte 배열 타입으로(toJson) 해당 데이터를 클라이언트에게 전달합니다. private byte[] blob; 브라우저에서 받은 blob 데이터를 확인해 봅시다. 콘솔로 데이터를 확인해보면 배열의 형태인 것을 보실 수 있습니다. 우선 이 배열을 8비트의 부호없는 정수 배열로 변환합니다. (Uint8Array) 그리고 이를 Blob 객체로 생성합니다. (Blob) Blob 객체에 대해서는 아래의 Link를 참고하세요. Link : .. Programing/JavaScript 2019. 4. 9. Javascript 객체 확대 축소 이동 라이브러리 Panzoom Javascript jquery 객체 확대 축소 이동 라이브러리 Panzoom 이번 포스팅에서 소개할 JavaScript 라이브러리는 panzoom 입니다. 위 동영상 처럼 마우스 휠을 사용하여 객체의 확대 축소가 가능하고, 드래그로 객체를 이동할 수 있습니다. 상하, 좌우축만 움직이도록 제한 할 수도 있으며, 이미지 뿐 아니라, dom 객체도 컨트롤이 가능합니다. 다운로드는 아래의 링크를 통해 가능합니다. Download Link : https://github.com/anvaka/panzoom 위의 깃허브에서 다운로드 하셔서 압축을 풀면, 아래와 같은 폴더를 보실 수 있습니다. demo 폴더의 index.html 을 열어 기능과 코드를 확인하신 후 dist\jquery.panzoom.min.js 파일만.. Programing/JavaScript 2019. 1. 20. Javascript 두 좌표 사이의 거리 구하기, 두 좌표의 중앙 좌표 구하기 Javascript 두 좌표 사이의 거리 구하기, 두 좌표의 중앙 좌표 구하기 WGS84 좌표계의 두 좌표 사이의 중앙에 좌표간 거리를 구해서 출력하는 방법을 알아보도록 하겠습니다. GSP지도는 카카오(다음) 지도 기반입니다. - 두 좌표의 중심점을 구하는 함수 function makeLengthInfo(data){ var iwContent = ''; var distanceArray = []; data.reduce(function(a,b){ var d = []; var position1 = new daum.maps.LatLng(Number(a.split('/')[0]),Number(a.split('/')[1])); var position2 = new daum.maps.LatLng(Number(b.spli.. Programing/JavaScript 2018. 11. 19. Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법 Javascript setInterval, clearInterval 함수의 즉시 종료에 대한 고찰, 해결방법 사용법 JavaScript 에서 setInterval 함수는 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을 때 사용합니다. 예를 들어 1초마다 특정 함수를 실행시키고 싶다면 아래와 같이 사용합니다. const timer = setInterval(function(){ 특정함수(); }, 1000); 기간은 milisecond 를 사용합니다. 그리고 중지하고 싶을 때는 clearInterval 함수를 사용합니다. clearInterval 함수의 매개변수는 setInterval 함수가 리턴해주는 값을 사용합니다. 예로든 위의 반복을 중지하고 싶다면, 리턴받은 timer 값을 매개변수로 보내주면.. Programing/JavaScript 2018. 10. 31. javascript 동적 멀티파일 업로드, 동적으로 선택된 파일 전달, ajaxForm 활용 fileList 컨트롤, dynamic file upload javascript 동적 멀티파일 업로드, 동적으로 선택된 파일 전달, ajaxForm 활용 fileList 컨트롤, dynamic file upload 우선 멀티 업로드에 대한 전반적인 설명은 아래의 Link로 대체 하겠습니다. Link1 : javascript 업로드할 이미지 미리보기 image preview URL.createObjectURL Link2 : javascript spring 멀티파일선택 업로드 ajaxForm multipart/form-data MultipartHttpServletRequest Link3 : Java Spring File Upload MultipartHttpServletRequest 멀티파일 업로드 방법 첫 번째 Link를 보시면, 마지막에 질문을 던졌죠. 멀티로 파일.. Programing/JavaScript 2018. 3. 20. Tomcat Control character in cookie value or attribute. 원인 및 해결방법 Tomcat Control character in cookie value or attribute. 원인 및 해결방법 원인 : 쿠키에 한글 저장 시 인코딩을 하지 않았을 경우 발생. 해결방법 : 쿠키에 한글 저장 시 인코딩 설정, 불러올 때 디코딩 설정 escape. unescape 를 활용하면 해결 할 수 있습니다. 저장 시 escape(id값); 을 사용하여 인코딩 후 저장하고, 불러올 시 unescape(id값)을 사용하여 디코딩 합니다. Sample Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /**쿠키를 저장한다 * cNm : 쿠키명 * cVal : 쿠키값 * cDay : 쿠키저.. Programing/JavaScript 2018. 3. 9. javascript 자바스크립트 트리 추천 zTree 추천 트리 플러그인 tree plugin javascript 자바스크립트 트리 추천 zTree 추천 트리 플러그인 tree plugin 이번 포스팅에서는 자바스크립트 트리 플러그인인 zTree 사용법에 대해 알아보도록 하겠습니다. 자바스크립트 트리 플러그인으로 구글링을 하시면 많은 플러그인들이 검색되지만 zTree 가 가장 간편하고 많은 기능을 제공하는 것으로 판단 되었습니다. 그럼 사용법을 보도록 하죠. 우선 zTree 페이지로 이동하여 파일을 다운받습니다. Link : http://www.treejs.cn/v3/main.php#_zTreeInfo URL에서도 알수 있듯이 중국에서 만들어진 플러그인 입니다. 페이지 우측 하단에서 다운로드 받아주세요. 다운 받으신 후 압축을 풀면 아래와 같은 폴더구조를 보실 수 있습니다. zTree_v3-mas.. Programing/JavaScript 2018. 2. 2. javascript contextPath 구하는 방법 ctx, window.location.pathname, 프로젝트명 구하는 법 javascript contextPath 구하는 방법 ctx, window.location.pathname, 프로젝트명 구하는 법 1. taglib 사용 1 cs 2. window 객체에서 추출 1 const ctx = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2)); cs 3. request 에서 추출 1 cs Programing/JavaScript 2018. 1. 25. 자바스크립트 javascript 페이지 인쇄하기 window.print() document.write() 자바스크립트 javascript 페이지 인쇄하기 window.print() document.write() 자바스크립트에서 별도의 페이지를 만들지 않고, 특정 버튼을 클릭했을 때 새로운 window객체를 만들어 인쇄 페이지를 만드는 방법을 알아보도록 하겠습니다. 1 2 3 4 $('.print').click(function(){ const completeParam = makeHtml(); reportPrint(completeParam); } Colored by Color Scripter cs print라는 클래스명을 가진 버튼을 클릭 시 makeHtml 함수에서 인쇄할 html 페이지를 만들어 리턴 받습니다. 1 2 3 4 5 6 7 8 9 10 function makeHtml(){ const obj = .. Programing/JavaScript 2017. 12. 22. javascript 자바스크립트 멀티 파일 읽기, 복수의 파일 읽기, 여러개 파일 읽기, multi FileReader javascript 자바스크립트 멀티 파일 읽기, 복수의 파일 읽기, 여러개 파일 읽기, multi FileReader 이전 포스팅에서 하나의 Text 파일을 읽어 처리하는 방법을 알아보았습니다. 하지만 꼭 하나의 html file 태그에 하나의 파일만 처리하는 법은 없죠. Link : javascript 자바스크립트 파일 텍스트 읽기 text file read 방법, 파일데이터 추출 이번엔 복수의 파일을 선택하여 처리하는 방법을 알아보도록 하겠습니다. 여러개의 파일을 처리하기 위해선 여러개의 파일을 선택해야 겠죠? 기존에 file 태그에 multiple="multiple" 옵션을 추가하고 name의 명칭 끝에 [] 을 붙여줍니다. (name="fileNames1[]") [] 라는 것은 배열로 처리된다는.. Programing/JavaScript 2017. 12. 18. 자바스크립트 javascript for in , for of 의 차이 자바스크립트 javascript forEach, for of, for in 의 차이 보통 자바스크립트에서 반복문의 형태는 4가지 정도가 있죠. 기본 for문, forEach, for of, for in. 그럼 이들의 차이는 무엇일까요? 아래의 소스를 보면서 알아보도록 하죠. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 const array = ['가','나','다','라']; console.log("size : "+array.length); const size = array.length; //객체의 반복 in, 배열 of console.log("basic"); for(let i=0; i Programing/JavaScript 2017. 12. 5. javascript var, let, const 의 차이, 차이점 javascript var, let, const 의 차이, 변수선언 방법 이전의 javascript 에서는 var 를 사용하여서만 변수를 선언했습니다. 하지만 이는 1. 변수의 재선언 시에나 2. 호이스팅과 같은 자바스크립트의 특성에서 몇몇 문제점을 야기했죠. 그래서 이러한 문제점을 보완하기 위해 ECMAScript 6 에서 나온 것이 const와 let 입니다. 이것은 둘다 재선언이 불가능 합니다. 간단한 예를 보도록 하죠. 1 2 3 4 5 6 var name = '이건' console.log(name); var name = 'Geon Lee'; console.log(name); name = ''; console.log(name); cs 위와 같이 var로 선언된 경우 아무 문제 없이 console이.. Programing/JavaScript 2017. 12. 4. 이전 1 2 3 4 5 6 7 ··· 9 다음 💲 추천 글 반응형