JS4

• 

  [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.

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

• 

  [JS]Object 객체에서 Key값 또는 value만 가져오는방법 이렇게 생긴 Object 객체에서 key값만 나열하거나 또는 가져오고싶다면 Object.keys(객체) 함수를 사용하여 위와같이 key값만 뽑아낼수 있다. value값도 마찬가지로 Object.values(객체) 함수를 사용하여 아래와 같이 value값만 뽑아낼 수있다. 웹개발/TIL 2020. 4. 23.