정복하고 싶다, 너란 Java의 세계.

datepicker html 샘플 코드 datepicker 샘플 코드 설명 datepicker 사용에 필요한 라이브러리 datepicker 는 jquery 라이브러리를 활용한다. datepicker는 jquery를 활용해서 이용할 수 있다. datepicker 는 jquery-ui와 jquery-ui 의 css 라이브러리를 활용한다. Help. jquery-ui.min.js는 datepicker 기능을 활용하기 위한 script이다. jquery-ui.css는 datepicker에 css 요소를 입혀주기 위해 사용하는 라이브러리이다. datepicker 기본 설정한 이미지 datepicker의 속성과 css를 수정해서 다양하게 활용할 수 있지만, 나는 간단히 테스트해 보기 위한 용도로 기본적으로 날짜 형..

#testModal 안에 #smallModal이 있다. #testModal이 큰 모달이고 그 안에 #smallModal이 있다. #testModal 을 닫았을 때 check 값을 true로 주고 조건을 걸어서 작업을 하려고 하는데 modal 안에 있는 작은 modal을 닫았더니 check 값이 true로 설정되어 내가 원하는 작업을 수행할 수 없었다. 방법을 찾아본 결과, 아래와 같이 해결할 수 있었다. var check = false; $('#testModal').on('hidden.bs.modal', function (event) { var target = event.target; var relatedTarget = event.relatedTarget; // 이벤트가 발생한 요소와 그의 자식 요소인지..

아래와 같이 사용하면 html에 그리지 못한 form을 자바스크립트로 직접 만들어서 서버단으로 데이터를 전송할 수 있다. let form = document.createElement('form'); form.action = '/test/test2/test3'; form.method = 'POST'; let el = ''; el += ''; el += ''; el += ''; form.innerHTML = el; // 폼을 제출하려면 반드시 폼이 문서 안에 있어야 한다. document.body.append(form); form.submit(); html 태그에 form을 그리고 또 요소들을 찾아서 javascript로 값을 할당하고 다시 submit하는 과정이 번거로웠고 왜 때문인지 백엔드로 POST 방..

현재 페이지 URL에서 원하는 파라미터 값을 추출 하는 방법 공유드립니다! 테스트는 아래 네이버 기사 링크타고 들어가서 개발자 도구 콘솔에서 타이핑 해보았습니다. https://n.news.naver.com/article/005/0001612676?cds=news_media_pc&type=editn “세안제 위장 염산 나눠준다고?”…알고보니 ‘흑설탕물’ 31일 소셜미디어와 지역 커뮤니티 등을 중심으로 경기 의정부, 양주 지역에 “누군가 세안제를 가장한 ‘염산’을 아이들에게 나눠주고 있다”는 경고글이 퍼지며 일대 주민들을 긴장시켰다. n.news.naver.com ?cds=news_media_pc&type=editn 네이버 기사 URL 파라미터들입니다. cds와 type 파라미터 값을 제대로 출력하는지 확..

See the Pen Untitled by hyeryeonkim (@khr777) on CodePen. var 변수 선언은 전역 변수 또는 함수 내에서 사용하기 위해 선언하죠. let과 const 변수가 나오기 전에는 모두 var 변수를 사용했는데 var 변수가 갖는 문제가 많다보니 let과 const를 접한 이후로는 자연스럽게 let과 const를 사용하게 되더라구요. var변수는 재선언이 가능하며 값도 다시 설정할 수 있습니다. 물론 여기에서 발생하는 문제가 흔히 알고 있는 var의 문제점이죠. var mung = 3; mung = 4; console.log(mung); function method_1() { mung = '사람'; console.log(mung); //사람 var mung = '강아..

이번에 회사에서 운영하는 서비스의 결제 방식을 나이스페이먼츠에서 토스페이먼츠로 변경하게 되었다. 그래서 토스 연동을 시작하며 관련 자료를 포스팅 하려던 찰나, 연동 테스트 API를 호출하려고 간단한 테스트 코드를 삽입했는데 오류가 발생했다. 대체, 왜? 구글링을 하다가 다행히 문제를 해결할 수 있는 팁을 얻어 나도 기록해보려 한다. 사실 문제를 해결하기까지도 대체 뭐 때문인지,. 망연자실 하고 있었던 나였다. , . 일단 해당 오류 원인은 이러했다. 카카오에서 제공하는 카카오 맵 SDK 에서 javascript native Map을 활용하고 있는데, 또다른 스크립크에서 Map객체를 덮어 씌워서 문제가 발생한 것이라고 한다. 해결 방법은, 카카오 맵 SDK보다 우선적으로 import하니 오류 없이 정상적으..

프론트 작업을 하다가 특정 클래스를 많은 요소에 심어두고 한번에 제거해서 다른 클래스를 추가하고 싶은 상황이 생겼다. 어떻게 할 수 있을까 생각을 하다가 foreach, each 다른것도 약하지만 프론트에 한없이 약하기에(본인은 굉장한 노력파) 또 열심히 찾아본 결과 나름 나쁘지 않은 해답을 찾았다. 본인은 요소들을 찾아서 값을 변경하거나 하는 등의 중요한 작업을 하는게 아닌 A클래스를 가진 요소를 찾아서 A클래스를 제거하고 B클래스로 변경해주고 싶었다. 이런 경우 아래와 같이 처리하면 아주 간단히 처리할 수 있다. // 특정 클래스를 가진 요소 선택 var elements = $(".특정클래스"); // 선택한 요소의 클래스 변경 elements.removeClass("기존클래스").addClass("..

우선 쿠키란 무엇인지 간략하게 알아보자 쿠키는 웹 사이트에서 사용자의 컴퓨터에 저장되는 작은 데이터 조각이다. 쿠키는 사용자와 웹 사이트 간의 상호작용을 기록하고 유지하는 데 사용된다. 쿠키는 웹 사이트가 클라이언트를 식별하고 상태를 추적하는 데 사용되며 클라이언트가 웹 사이트에 방문하면 서버에서 쿠키를 생성하고, 그 후 클라이언트의 브라우저에 저장된다. 클라이언트가 같은 웹 사이트를 방문할 때마다 해당 쿠키가 서버로 전송되어 서버는 클라이언트를 식별하고 상태를 추적할 수 있다. 쿠키에는 이름, 값, 만료일, 도메인 등의 정보가 포함되어 브라우저에 저장된다. 필요한 script 모음 cookie 생성 $.cookie('name', 'value', { expires: 1, path: '/' }); 'nam..

Stop Confetti Drop Confetti 요긴하게 써먹을 수 있을 것 같다 ㅇㅅㅇ,, js파일은 첨부한 파일을 사용하면 된다.

window.screenTop : 상단으로부터 브라우저 위치 window.screenLeft : 왼쪽으로부터 브라우저 위치 window.innerWidth : 브라우저 화면의 너비(viewport) window.innerHeight : 브라우저 화면의 높이(viewport) window.outerWidth : 브라우저 전체의 너비(메뉴, 툴바, 스크롤바 포함) window.outerHeight : 브라우저 전체의 높이(메뉴, 툴바, 스크롤바 포함)

https://ko.javascript.info 모던 JavaScript 튜토리얼 ko.javascript.info

includes() includes() 함수는 IE 브라우저 지원을 하지 않는다고 한다. 올해 6월 15일자로 마이크로소프트가 IE 지원을 종료했다고 하지만 아직 우리나라에서 IE를 이용하는 사용자가 많다고 한다. 프로젝트를 진행하던 중, 나는 조금 더 사용이 편해 보이는 includes() 함수를 자주 사용했다. 코드 리뷰 과정에서 선임님은 includes() 함수는 IE 지원이 되지 않아 아직 IE를 이용하고 있는 사용자들이 우리의 서비스를 이용하려할 때, 기능이 제대로 작동하지 않는 문제에 직면하게 된다고 설명을 해주셨다. 대신 브라우저에 영향을 받지 않는 indexOf() 함수 사용을 권장해주셨다. 아래는 indexOf() 사용법과 지원 브라우저를 확인할 수 있는 페이지이다. https://www..

$('#datepicker input').datepicker({ format : "yyyy-mm-dd", // endDate : "infinity", autoclose : true, todayHighlight :true, // 오늘을 표시해줄지. default 가 false endDate: '+90d', // 선택할 수 있는 최대 일자 }).datepicker("setDate", new Date()); 아래는 참고 하기 좋을 것 같아서 기재

$("select#test").change(function(){ $('#test').val($(this).val()); }); 위와 같이 하면 셀렉트 박스 값이 바뀐담,,.

setTimeout(function(){ var offset = $('tr').closest('th').find('.popup').offset(); $('html, body').animate({scrollTop : (offset.top-100)}, 350); }, 200); 위 코드를 응용해서 사용할 수 있다. setTimeout 함수를 이용해서 0.2초 뒤에 실행이 되는것 같은데,,...,,, scrollTop 의 350은 0.35초 동안 읭... 뭘까 하하

$.ajax({ type: "POST", url: "/test/open/test/post", dataType: 'json', data: JSON.stringify({"key": 'abcd12345689'}), contentType:'application/json; charset=utf-8', success: function(data){ alert("JSON.stringify로 파라미터로 넘기기 성공!" + data.result); } }) ajax로 통신하는 방법

$('#id').val(3).select2(); 잘 작동하는 코드 아래는 작동하지 않았던 .., 예제 $("#id").val(3); 위와 다른 trigger 예제 등은 작동하지 않았다....

자바스크립트 배열의 내장 함수에 sort()가 있다. 명칭 그대로 배열 안의 원소를 정렬하는 함수이다. 추후에 또 검색할 것 같아서 적어놓는다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다. sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다. 첫 번째 인수가 두 번째 인수보다 작을 경우 - 값 두 인수가 같을 경우 0 첫 번째 인수가 두 번째 인수보다 클 경우 + 값 문자 정렬 var fruit = ['orange', 'apple', 'banana']; /* 일반적인 방법 */ fruit.sort()..

if(jQuery(".test table").length < 1) { alert('테이블이 존재 하지 않으니까 1번 그리고 그 다음에는 테이블을 만들지 않을게!'); } if(jQuery(".test table").length == 0) { alert('아직 테이블이 존재하지 않아! 만들어도 돼!'); }

https://tutorialpost.apptilus.com/code/posts/jquery/jq-node-traverse/