Jquery, Jquery 라이브러리 설치하기 Jquery 설치하기 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com Jquery를 설치하기 위해서는, 정식 사이트에서 설치받는 것이 매우 안전하다. Jquery는 많은 다운로드 중에서 ..
ㅇㅇ GibberishAES 암호화 본문의 내용을 전송할 때, 데이터를 암호화 시키기 위한 방법 중 하나이다. 실행이 정상적으로 되었을 경우, console창에 임꺽정과 알수 없는 단어가 나열되어 나타난다. enc는 encoding 한 결과, dec는 decoding한 결과물이다. 단어는 임꺽정 동일하다. 해당 AES를 활용할 때, SCRIPT 가장 하단에 놓여있다. 다음과 같은 함수를 이용할 경우, 변형이 되는 것을 확인 할 수 있다. 키 변경은 가장 위에 aes_key 변수를 통해 변경할 수 있다. key는 mollang, korea, slacademy 등 원하는 key로 변경이 가능하다. 단, AES로 암호화 된 단어는 동일한 key를 통해 원하는 값으로 복호화가 가능하다. 즉, key값이 일치하지..
준비 과정 - HTML 활용하기 전체 체크 test checkbox의 전체선택하는 방법은 의외로 간단하다. checkbox를 묶는 상위 테그를 생성하면 쉽게 만들 수 있다. 여기서는 알기 쉽게 div 테그를 생성하였고 check_all이라는 명칭을 주었다. 전체 선택 만들기 체크박스 전체 체크 test 전체checkbox를 클릭할 경우, 나머지 checkbox도 모두 체크된다. Jquery의 Click을 활용하여, 전체 채크 할 수 있도록 만들었다. 그러나 여기서, CheckBox는 click으로 할 경우 문제가 발생한다. checkBox를 click으로만 받을 경우, true와 false의 구분이 한 박자 느린 결과를 보여준다. 따라서 checkBox는 change를 사용하는 것이 더 명확하다. 전체 ..
JavaScript 배열 추가하기, 삭제하기 배열 만들기 let arr = new Array(); JavaScript 생성하기 위해서는 다음과 같다. new Array(); 할 경우 간단하게 배열이 생성된다. let test_arr = [1, 2, 3]; 위의 같은 경우에는 배열을 선언 뒤 생성했다면, 이 같은 경우는 배열 생성과 동시에 값을 추가한다. 보통 이 방법은 Test 할 때 사용하거나, 변하지 않는 값을 정의할 때 이용하는 방법이다. 배열 추가하기 1. 배열 추가하기 - 기본 let arr = new Array(); arr[0] = 'a'; arr[arr.length-1] = 'b'; arr[2] = 'b'; 배열[인덱스 번호] = 값; 추가할 곳의 인덱스번호를 지정 후 값을 지정할 경우,..
[JavaScript] JavaScript 활용하기 - 기초(3) 이전 글 JavaScript의 Event 2022.01.29 - [Web/JavaScript] - [JavaScript] JavaScript 기초 [JavaScript] JavaScript 기초 [JavaScript] JavaScript의 기초 JavaScript HTML과 같이 쓰는 친구로 객체 기반의 스트리트 언어이다. 정적인 HTML을 동적으로 변환시키고, 다양한 접근 방식으로 웹의 편의를 높여준다. Java와 언어와 유사 mollangpiu.tistory.com JavaScript의 변수 타입 사용 2022.01.29 - [Web/JavaScript] - [JavaScript] JavaScript의 변수 [JavaScript] Ja..
JavaScript의 변수 JavaScript의 변수 JavaScript에서 데이터를 다루기 위해서는 변수가 존재한다. 만약, Java를 배웠다면 int, char을 배웠을 것이다. 마찬가지로 JavaScript에도 변수가 존재하는데, 이는 var이다. var은 정수, 문자, 실수, true 등 모든 것을 담을 수 있는 편의를 제공한다. var은 숫자도 문자도 모두 표현할 수 있는 것을 확인할 수 있다. 여기서 주목할 점은, JavaScript는 문자와 숫자를 임의로 변경하므로 반대로 말하면 변수 타입이 불안정하게 저장된다는 뜻을 나타낸다. let과 const 그렇다면 정말로 var만 사용할까? 만약 이런 질문을 받는다면, No 다. var은 어디까지나 javascript의 입문 혹은 과거에 사용하던 변..
[JavaScript] JavaScript의 기초 JavaScript HTML과 같이 쓰는 친구로 객체 기반의 스트리트 언어이다. 정적인 HTML을 동적으로 변환시키고, 다양한 접근 방식으로 웹의 편의를 높여준다. Java와 언어와 유사하여, Java를 할 줄 안다면 반은 먹고 들어가는 언어이다.다만 Java와는 다르게 JavaScript는 자동으로 개발자의 편의를 지원하다 보니 차이가 존재할 수 있다는 것은 꼭 명심해야 한다. JavaScript 사용 방법 JavaScript는 보통 body 태그의 마지막에 위치한다. JavaScript가 종종 HTML문구를 불러오지 못하는 경우가 발생하는데, 이를 해결하기 위해서 body 끝부분에 안착시킨다. html을 실행할 경우, JavaScript에 작성된 글이..
JQuery, Filter 활용하기 filter 사용 예시 다양한 음식 사진들 중에서, filter를 황용하여 위의 목록에 따라서 해당되는 음식값만 골라내도록 하였다. filter는 말 그대로 필터링한다고 보면 된다. filter 대상의 값을 유, 무에 따라 true와 false로 구분된다. 체크하기 all ice-cream chocolate cake juice sandwich div 태그 안에 여러 img가 출력되었다. 위 경우는 연습에 해당되어 태그를 종류별로 정리를 하였지만 실제로는 뒤죽박죽 섞이는 바람에 사진의 정렬은 어렵다고 봐야 한다. 그러므로, 여기서 중요한 것은 a 태그의 class에 해당되는 image와 sandwich, juice 등 명칭을 바라보면 된다. filter의 활용 var f..
OpenLayer, 지도 클릭시 마커를 지도에 표시하기 이전 글 참조 2021.11.12 - [Web/JavaScript] - OpenLayer, 클릭시 좌표 가져오는 방법 OpenLayer, 클릭시 좌표 가져오는 방법 OpenLayer, 클릭시 좌표 가져오는 방법 클릭시 좌표 가져오는 방법 지도를 클릭시, 좌표를 가져오는 방법이다. 이동 var map = new ol.Map({ view: new ol.View({ zoom: 16, center: [ 126.97659.. mollangpiu.tistory.com 2021.11.09 - [Web/JavaScript] - OpenLayer, 마커 만들기 OpenLayer, 마커 만들기 OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Ma..
OpenLayer, 클릭시 좌표 가져오는 방법 클릭시 좌표 가져오는 방법 지도를 클릭시, 좌표를 가져오는 방법이다. 이동 var map = new ol.Map({ view: new ol.View({ zoom: 16, center: [ 126.97659953, 37.579220423 ], //포인트의 좌표를 리턴함 projection : 'EPSG:4326', }), target: 'js-map', layers: [ new ol.layer.Tile({ source : new ol.source.XYZ({ //vworld api 사용 url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png', //tileGrid: tileGrid }) }) ] }..
JavaScript, CSS의 @keyframes 제어하기 막대그래프 CSS를 통해서 막대그래프 하나를 만들어보았다. 이는 Youtube를 참조하였다. 그리고 데이터를 바탕으로 막대그래프의 크기가 변동될 수 있도록 하였다. 버튼 수치 변경 75% 보이기, 감추기 var cnt = 0; function view() { var graph = document.getElementById('graph'); if(cnt == 0) { graph.style.display ="block"; cnt++; } else { cnt--; graph.style.display = 'none'; } } 먼저, 버튼을 눌러서 그래프의 보이기 / 감추기를 만들었다. 기본적인 style을 이용해서, display의 block과 none..
OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Marker 생성으로 넘어가 보도록 한다. 2021.11.09 - [Web/JavaScript] - OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러.. mollangpiu.tistory.com 이전 글에서 코드를 추가하여 마커 기능을 추가하였다. 소스 공유 이동 앞서, 오픈레이어의 구조 중 제일 중요한 것을 꼽는다면, Layer가 되겠다. Layer는 OpenLaye..
OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러나 이를 활용하기 위해서는 조금 복잡한 과정을 겪는다. 그냥 된다면 매우 행운스럽겠지만, 안타깝게도 오픈 레이어를 노말로 사용할 확률은 매우 적기 때문이다. 지도를 이용하는 방법 오픈레이어 라이브러리를 가져온 오픈 레이어는 단순하다. 여기서, 이전 글을 살펴보았다면 좌표계의 설정이 안 된 OpenLayer인 것을 확인할 수 있다. 이를 확인하는 방법은, Map에 설정된 View의 설정에서 projection이 존재하는 여부에 따라 결정된다. 여기서는 존재하..
OpenLayer, Layer 수정하기 수정하기 해당 글은 이전의 글을 이어가는 과정이다. 글을 나눈 이유는 수정하기가 생각보다 어렵지 않기 때문이다. 그러나 헷갈릴 수 있으므로, 글을 나누어 추가하는 과정을 통해 응용하길 바라는 마음으로 나누게 되었다. 1. Vector에 수정권한 넣기 VectorLayer에 editable을 추가하였다. 이는 true일 경우 해당 Layer를 수정할 수 있는 권한을 준다는 의미이다. 2. 수정할 Layer의 값 불러오기 수정하기는 interaction의 기능 중 하나이다. 여기서 포인트는 수정하기 위해서는 수정할 대상의 VectorLayer가 존재해야 한다는 것이다. 그러나 해당 소스는 불러오는 Source가 따로 없고 만들어진 Source를 수정하는 과정이므로 선택..
OpenLayer, 등록하기, 선택하기 동시 사용하기 화면 구성 Draw or Select Interaction: Draw Select html의 화면은 다음과 같다. Select박스의 공간과 map을 표시하는 div의 공간이 전부이다. 등록하기 이전에도 설명한 글이지만, 중요한 부분이므로 다시 작성하게 되었다. 음식을 담기 위해서는 반드시 그릇이 필요하다. 마찬가지로 데이터를 저장하기 위해서는 반드시 Object가 필요하다. OpenLayer에서 좌표를 받기 위해서는 Vector의 Layer가 필요하다. 이를 map 선언 시 다음과 같이 입력해야 한다. 후에 map.addLayer를 이용하여 추가할 수 있지만, Layer가 다수로 나뉘어서 관리하기 어렵다는 단점이 있다. 따라서 하나로 관리할 수 있도록..