웹개발/Java & JavaScript14

• 

  [JavaScript] iframe에서 바깥 영역(parent document)의 이벤트 동작하기 iframe을 사용하다보면 iframe을 띄운 영역(document) 에 접근하여 버튼등에 이벤트를 줘야하는 경우가 생긴다. 그러나, 시행착오를 해본 사람이라면 iframe내에 script 소스를 추가하여 이벤트를 주어봐도 iframe 바깥영역의 element를 찾지 못한다는 것을 알 수 있다. Q. 왜 그런 것일까? Re. Document 영역이 다르기 때문 위 그림은 modal창 영역 안에 iframe을 넣은 모습이라고 생각해보자. 설명을 추가하면 위 그림처럼 한 document 영역에서 iframe을 호출했다면 호출된 iframe은 또 다른 document이다. (iframe영역: 하늘색영역) 당연히 iframe dom객체에서 셀렉터를 이용해 찾아봤다 다른 dom객체에 있는 element는 찾을 수.. 웹개발/Java & JavaScript 2021. 8. 20.

• 

  [Java] 자바 디렉토리내 파일, 파일구조, 파일명확인하기 Java에서 디렉토리 내의 파일구조나 파일들의 파일명을 확인하는 간단한 방법이 있다. 1. 먼저 디렉토리 경로로 File객체를 생성한다. String fileDir = "D:\uploadShpfile\ETT"; File dir = new File(fileDir); //디렉토리 경로로 파일객체 생성 2. 생성된 File 객체 dir 값을 확인해본다. 필자가 입력한 fileDir값은 "D:\uploadShpfile\ETT"이며 값을 확인해보면 지정한 디렉토리내의 디렉토리와 파일들을 하이라키 구조로 담아서 보여주는 모습을 볼 수 있다. 옆에 파일구조와 비교하여보면 쉽게 이해 할 수 있을 것이다. 웹개발/Java & JavaScript 2021. 6. 23.

• [Java] Split 함수 "." 사용시 작동안됨(split dot not working) 해결 프로젝트에서 파일명을 split함수로 쪼개어사용하던 중 에러가 발생했다 split으로 나누어진 배열의 첫번째 요소를 사용하려고 했더니 java.lang.IndexOutOfBoundsException : Invalid array range: 0 to 0 에러가 발생했다. 확인해보니 split함수에서 발생한 에러! FileName.split(".")[0] 이와 같이 사용하면 에러를 뱉는다.. 확인해보니 "."(dot) 은 정규식 예약어라서 개행문자를 제외한 모든 문자를 의미하여 모든 문자를 각각 split하게 된다고한다. 어쨌든 "."(dot)을 기준으로 문자열을 나누고 싶다면 FileName.split("\\.")[0] 이렇게 사용하면된다. ** 참고 : 위와 같이 "\\" 처리 해줘야하는 문자들 ** 물.. 웹개발/Java & JavaScript 2021. 6. 22.

• [JS] JavaScript로 canvas상에 드래그로 선 그리기 안녕하세요. canvas 두번째 포스팅입니다. 오늘은 canvas에 드래그로 선 그리는 예제를 공유합니다. 컨버스상에 그리는 기능을 사용하는 간단한 개념에 대한 설명은 이전의 사각형 그리기 포스팅을 참고해주시면 감사하겠습니다. 2021.05.31 - [웹개발/Java & JavaScript] - [JS] JavaScript로 canvas상에 사각형 그리기 [JS] JavaScript로 canvas상에 사각형 그리기 안녕하세요. 오늘은 HTML canvas 엘리먼트상에 사각형을 그리는 예제를 공유해볼까합니다. canvas란?? canvas란 웹 상에서 그래픽을 그리기 위한 엘리먼트로 2D, 3D 그래픽을 그릴 baekh-93.tistory.com canvas에 선 그리기 먼저 선을 그릴때도 사각형과 같이 .. 웹개발/Java & JavaScript 2021. 6. 1.

• [JS] JavaScript로 canvas상에 드래그로 사각형 그리기 안녕하세요. 오늘은 HTML canvas 엘리먼트상에 사각형을 그리는 예제를 공유해볼까합니다. canvas란?? canvas란 웹 상에서 그래픽을 그리기 위한 엘리먼트로 2D, 3D 그래픽을 그릴 때 주로 사용합니다. 사용 예 로는 다음, 카카오, 구글의 지도를 띄울 때 canvas element를 사용하기도하고 그림판 또는 웹상에서 이미지를 편집할 때 주로 사용합니다. canvas 상에 사각형 그리기 먼저 canvas에서 사각형을 그리기 위해 알아야하는 것들을 정리해보면 1. 엘리먼트 만들기 - 원하는 크기로 html 소스상에 를 생성합니다. 2. 2D 렌더링 컨텍스트 객체 생성 엘리먼트 상에 드로잉영역을 생성하고, 출력할 컨텐츠를 다루기 위해서 2D 렌더링 컨텍스트 객체를 만들어 줘야 합니다. (그리.. 웹개발/Java & JavaScript 2021. 5. 31.

• [JS] IE로 웹사이트 접속시 Edge로 전환하기 요즘 보통 웹사이트가 크롬기반으로 개발을하기 때문에 IE에서는 호환이 안되는 경우가 많다. 그래서 IE로 웹사이트에 접속했을 때 크롬으로 실행 할 수 있는 방법을 찾아보았는데 크롬은 안되는 것 같고,, (있으면 댓글 남겨주시면 감사하겠습니다) 크롬기반의 Edge로 실행하도록 할 수 있는 방법을 찾아냈다. 웹 구동시 처음 작동하는 JS 파일에 아래 코드를 추가하면 메시지와 함께 해당 페이지를 Edge로 실행시켜준다. if(navigator.userAgent.indexOf("Trident") > 0){ alert("*** 은 Microsoft Edge, Chrome 브라우저에 최적화 되어있습니다. " + "원활한 사용을 원하시면 Microsoft Edge, Chrom.. 웹개발/Java & JavaScript 2021. 4. 12.

• [JS]Datatables dateType data sorting [데이터테이블 날짜데이터 정렬하기] DataTables 라이브러리를 사용하면서 옵션으로 sorting 하는 기능을 자주사용하는데 sort 컬럼을 날짜데이터 컬럼을 설정하여 정렬시에는 제대로 정렬이 되지 않는 현상들이 나타난다. 이는 JavaScript에서는 데이터 형식을 따로 지정해 주지 않기 때문에 date type 형태의 데이터를 문자열로 읽어 정렬 했기 때문인데 간단하게 해결하는 방법이 존재한다! 1. date-eu.js 파일 import date-eu.js 파일을 직접 다운로드 받아서 추가하거나 또는 아래코드를 추가한다. 2. dataTable 생성 옵션을 아래와 같이 구성한다. var dataTable = $('#example').DataTable({ data: data, columns: [ { "type": "date-eu", .. 웹개발/Java & JavaScript 2021. 2. 12.

• 

  [JS]JavaScript, JQuery 브라우저 크기 구하기(해상도 구하기) 웹 개발을 할 때 반응형 웹을 고려하거나, CSS에서 이미지나 Element의 위치를 정할 때 웹 브라우저의 크기를 생각해야할 때가 있다. 보통 픽셀단위로 값을 설정하게되면 이 값을 절대적인 값이기 때문에 개인 모니터의 해상도에 따라 의도와 다르게 나타나는 경우가 생기기 때문이다. 이 경우에는 웹 브라우저의 크기를 구하여 이러한 경우를 최소화 할 수 있다. JavaScript의 경우 위와 같이 window객체를 이용하여 해상도를 구할 수 있는데 innerHeight 와 outerHeight 의 차이에 대해 궁금할 수 있을 것이다 쉽게 설명하면 그림과 같다. 브라우저의 빨간색영역이 outer 브라우저의 파란색 영역이 inner 제이쿼리의 경우도 위와 같이 wi.. 웹개발/Java & JavaScript 2020. 11. 25.

• 

  [JS] JavaScript에서 contextpath 구하기(window 객체 활용) 톰캣서버에 배포를 할때 이미지나 동영상은 경로가 맞지 않아 제대로 업로드가 안되는 현상이 발생한다. 이런경우 contextpath를 이용해 경로를 설정해놓으면 손쉽게 해결할 수 있다. 구글 디버깅툴에서 window.location.pathname 위와 같이 입력을하면 사용하면 현페이지 .html, .jsp 파일의 경로를 알 수있는데 이를 활용하는 것이다. 필자는 파일경로가 "/up/map-service.html" 로나오는데 substring() 함수를 이용해 contextPath를 구해보았다. 실제 개발에서는 위와 같이 하나의 함수로 만들었고 javaScript에서 위와같이 활용하였다. 대신 이미지경로를 ContextPath()를 기준으로 맞춰줘야하며 배포시에도 ContextPath()를 신경써줘야한다. 웹개발/Java & JavaScript 2020. 11. 24.