Jquery, Hover 기능 만들기 Hover 기능 특정 영역에 마우스를 올렸을 때 발생되는 Event를 Hover라고 부른다. 카테고리, 메뉴 혹은 마우스 올렸을 때 , 사용자에게 강조하기 위해 많이 사용하며 CSS 외에 Jquery를 통해서 Hover기능을 추가할 수도 있다. Hover 기능 사용하기 //Hover 추가하기 //마우스 올렸을 때 발생되는 이벤트 $(Hover대상).hover(function() { $(this).css('background', 'green'); }, //마우스가 영역 바깥으로 나갔을때 발생되는 이벤트 function() { $(this).css('background', 'white'); }) 만약 Hover대상에 마우스가 올려갔을 경우, 배경이 초록색으로 변한다. 그..
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..