반응형 JavaScript/JQuery8 [차트API] highcharts wind barb(바람 깃) 그리기 해당 포스팅에서는 상단 이미지 예시와 같이, 풍속 값을 기반으로 하여 바람 깃 자료를 svg형태로 그려내고 풍향 값을 참고하여 해당 svg를 회전시켜 wind barb를 highcharts 내 표출하는 방법에 대해 다루었다. 목차는 다음과 같이 하였다.1. wind barb 정의 1) 바람 깃 svg 처리 메서드 2) svg 적용 메서드 3) 로드 예시2. highchart 표출3. 구현 예시 1. wind barb 정의바람 깃 생성을 위해 연관 작업을 처리하는 메서드를 3개로 나누어 작업하였다. 아래 목록화 된 목차 제목이 각 메서드 대한 내용이며, 연계처리하여 load메서드 실행->바람 깃 생성->바람 깃 svg 생성 순으로 호출되도록 하였다. 즉, 차트 객체 정의 혹은 차트 생성 시, .. 2024. 11. 25. [zoomer.js] 이미지 확대 축소 라이브러리 활용 해당 게시글은 JQuery라이브러리인 zoomer.js를 활용하여 이미지 요소의 확대 축소 기능을 구현하는 내용에 대해 정리하였다. 목차는 아래와 같다.1. 정적소스 참조2. 구현3. 한계점 1. 정적소스 참조라이브러리 사용을 위해 필요한 정적소스를 참조해야한다(CDN 방식) 본인의 경우, 인터넷망이 연결된 환경이 아니기 때문에 직접 파일을 다운로드하여 세개의 필수 파일을 프로젝트 내 추가하여 참조하였다. 버전 관리로 인한 이슈 방지를 위해서는 가급적 아래 공식 링크를 참조하여 파일 다운로드 및 CDN 방식으로 필요 파일을 로드하는 것을 추천한다.https://www.jqueryscript.net/zoom/Smooth-Image-Enlargement-Plugin-Zoomer.html Smooth I.. 2024. 11. 21. [tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지 특정요소 mouseover 이벤트를 감지하여 tooltip을 표출하는 작업을 진행하기에 앞서, 'tooltip관련 라이브러리가 없을리가 없는데?'하는 내면의 질문에서 출발하였다. 역시 직접 생성해내는 것 보다, 만들어진 라이브러리를 활용하는게 가장 빠르고 편한 것 같다. 관련 라이브러리는 Bootstrab, JQuery-ui로 두 개의 검색 결과가 있었으나, 본인의 경우 JQuery-ui를 활용하여 tooltip을 생성하고, 그에 대한 내용을 포스팅할 예정이다. https://jqueryui.com/tooltip/ Tooltip | jQuery UI Tooltip Customizable, themeable tooltips, replacing native tooltips. Hover the links ab.. 2023. 12. 7. AJAX로 json데이터 넘겨받기 기상청에서 제공하는 날씨누리서비스를 참고하여, 사용자가 특정 해구를 선택한 후 "검색"버튼 클릭시 해역예보 하단에 작성된 테이블의 내용이 비동기적으로 수정될 수 있도록 하는 작업을 진행해보았다. 비동기 처리를 진행하며 발생한 이슈를 순서대로 정리해보았으며, 목차는 다음과 같이 하였다. 1. ajax로 json데이터 받기 2. ajax 한글 인코딩 이슈 해결 3. 최종 작성된 코드 1. ajax로 json데이터 받기 ajax는 학원에서 프로젝트를 진행하며 두어번 해 본 경험이 전부였지만, id중복 확인 기능과 좋아요버튼 기능을 구현하면서 학습한 내용이 있기에 적절히 응용한다면 수월히 진행될 것이라는 판단으로, 위의 검색기능을 비동기 로직이 실행될 수 있도록 작업하였다. 검색 이벤트마다 일일예보에 대한 내용.. 2022. 8. 4. 타임슬라이더 구현 input range를 활용하여 time slider를 구현하게 되어, 그에 대한 코드들을 아래 정리해보았다 Edge, chorme에서는 정상 작동 되었으나, IE에서는 일부 JS코드와 스타일이 비정상 작동하여, 추후 동기화 되도록 작업 후 코드와 게시글을 수정하였다. 작업 단계는 아래와 같이 분류하였다. 1. 레이아웃 2. range 눈금 설정 3. 조작버튼 4. tooltip 생성 5. 이벤트 1. 레이아웃 우선 조작을 위한 버튼과 input을 배치할 위치를 정하고, 그에 대한 레이아웃을 먼저 정의하였다. 가급적 내용은 생략하고 어떤 요소들을 가질 것이며 누구의 자식요소로 배치할지를 먼저 작성하였다. 구현 완료된 jsp페이지의 코드를 첨부하자면 아래와 같다. 각 목차별로 뜯어가며 자세히 설명해 볼 예.. 2022. 6. 24. 요소의 조작 : 제이쿼리 요소의 조작과 관련된 JQuery의 메서드에 대해 정리해보았다. 목차는 다음과 같다. 내용을 표로 간결히 확인할 수 있도록 하였기에 더 자세한 내용은 각 단락별로 첨부된 링크를 통해 확인할 수 있다. 각 메서드별 경계가 모호하다고 느껴질때는 특정 메서드들의 차이점을 검색하여 이해할 수 있다. 1. getter & setter 1) getter 2) setter 2. 요소(컨텐츠)의 추가 3. 요소(컨텐츠)의 복사 및 삭제 1) 복사 2) 삭제 1. getter & setter 1) getter 아래의 보기를 통해 표를 이해할 수 있다. 안녕하세요 메서드 내용 html() 선택요소 하위의 태그와 문자열을 전부 가져옴 ex) 안녕하세요 text() 선택요소 하위의 문자열만 가져옴 ex) 안녕하세요 val().. 2022. 5. 31. 이전 1 2 다음 반응형
