MINYA

[Javascript, 자바스크립트]만 19세 미만 체크하기, 나이 체크 함수

function isAdult(year, month, day) { const today = new Date(); const birthday = new Date(year, month - 1, day); const diffYear = today.getFullYear() - birthday.getFullYear(); const diffMonth = today.getMonth() - birthday.getMonth(); const diffDay = today.getDate() - birthday.getDate(); // 년도 차이가 19이면 월과 일 차이도 체크 if (diffYear === 19) { // 월 차이가 마이너스면 아직 생일이 지나지 않은 상태 if (diffMonth < 0) { return t..

input 태그에 에 JSON으로 데이터 전달 input 태그를 사용하다 보면 value 값으로 데이터를 한 번에 여러개를 전달하는 일이 생깁니다. 그냥 일차원 적으로 value="값1, 값2, 값3" 이렇게 생각을 할 수도 있는데, 이렇게 코딩을 하면 value 값을 자바스크립트로 뽑아낼 수는 있으나.. 비효율적인 코딩 입니다. 한 번에 여러 데이터를 전달하고 싶다면, Key : Value 로 이루어진 오브젝트 형인 JSON 형태로 전달을 하는게 깔끔합니다. JSON JSON은 Key : Value 로 구성하여 만듭니다. { key1 : value1, key2 : value2, key3 : value3, key4 : value4, key5 : value5 } JSON 데이터 전달하기 let jsonTe..

.not() .not()은 제이쿼리로 선택한 선택자(요소)들 중에서, 특정 선택자(요소)만을 제외하는 함수입니다. 자주 사용되는 함수는 아니지만 종종 필요한 경우가 있더라구요. html 클릭해보아요 1 2 3 4 5 6 7 8 9 10 SCRIPT $('button').click( function() { $('li').not('li.none').css('color', 'red'); });

JSTL을 사용하여 select box 값 고정하기 뷰 페이지 (jsp 페이지)를 개발하다 보면 셀렉트박스(select box)를 자주 사용합니다. 셀렉트박스(select box)를 선택하여 화면 이동시 리로딩(새로고침) 되는 페이지를 개발하다보면 리로딩 되어도 선택한 셀렉트박스(select box)의 값(value)이 고정되게 만들어야 할 때가 있습니다. 위의 이미지 처럼 선택한 값이 다시 고정되게 만드려면 뷰 -> 컨트롤러 -> 뷰 (view -> controller -> view) 로 선택한 값을 넘겨주고, 컨트롤러로 부터 뷰 페이지로 넘겨받은 값을 다시 자바스크립트,제이쿼리 또는 JSTL을 사용하여 고정시켜주면 됩니다. HTML 해지 진행 완료 jQuery 뷰에서 보낸 test 값을 컨트롤러에서 ..

자동으로 콤마(,) 입력 input 태그에 숫자를 입력시에 천 단위마다 자동으로 콤마를 찍어주는 팁입니다. "common.js" 라는 파일을 만들어 이렇게 전역적으로 사용되는 파일들을 작성하고 사용하시면 더 깔끔하게 사용하실 수 있어요. HTML 작성 위의 input 태그처럼 작성해주고 onkeyup 속성으로 스크립트를 호출합니다. script (common.js) function inputNumberFormat(obj) { obj.value = comma(uncomma(obj.value)); } function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } function uncomma(s..

onchange() 함수 활용 간단히 onchange 함수를 활용해볼 수 있다. html 1월 2월 3월 4월 5월 script // 제이쿼리를 이용한 방법 $("#month").change(function(){ let month1 = $(this).val(); let month2 = $("#month > option:selected").val(); console.log(month1); console.log(month2); }); // 함수를 만들어 호출하는 방법 function getMonth() { let month3 = $("#month > option:selected").val(); console.log(month3); } 셀렉트박스(SelectBox) 값(value) 고정시키기 // value값..

Math() Math.ceil() : 소수점 올림, 정수 반환 Math.floor() : 소수점 버림, 정수 반환 Math.round() : 소수점 반올림, 정수 반환 올림 let testNum = 99.11; console.log(Math.ceil(testNum)); // 100 출력, 올림 적용 버림 let testNum = 99.11; console.log(Math.floor(testNum)); // 99 출력, 버림 적용 반올림 let testNum = 99.5; console.log(Math.round(testNum)); // 100 출력, 반올림 적용 toFixed(), toExponential(), toPrecision() toFixed(), toExponential(), toPrecisio..

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 모달 만들기 모달이란, 다음 이미지와 같이 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI 를 의미합니다. 이번에는 이런 UI 를 HTML 과 JavaScript 를 사용하여 만들어보겠습니다. 우선, Codesandbox 에서 새로운 Vanilla Sandbox 를 만드세요. 그리고, index.js 를 열고 맨 위 import "./styles.css"; 하단의 코드를 지워주세요. 이번에 우리는 스타일링을 할 것이기 때문에 css 를 불러와야 합니다. 그 다음에, index.html 을 열어서 다음과 같이 수정해주세요. 안녕하세요! 내용내용내용 버튼 열기 이렇게 화면이 나타났나요? 그 다음엔, 버튼 아래에 다음 내용을 보여주세요...

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. 카운터 버튼을 클릭하면 숫자가 올라가거나 내려가는 카운터입니다 UI 만들기 0 +1 -1 위와 같은 결과물이 나타났나요? 우리가 보여준 h2 와 button 태그에 id 값을 설정해주었는데요, 이렇게 id 값을 설정해주면 JavaScript 에서 쉽게 해당 DOM 을 선택 할 수 있습니다. 여기서 DOM 이란, 각 태그에 대한 정보를 지니고 있는 JavaScript 객체입니다. DOM 선택하기 우선, DOM 을 선택해봅시다. index.js 를 다음과 같이 만듭니다. const number = document.getElementById("number"); const increase = document.getElementById("increas..

이글은 "벨로퍼트"님의 동영상 강의를 보고 정리한 내용입니다. async/await async/await 문법은 ES8에 해당하는 문법으로서, Promise 를 더욱 쉽게 사용 할 수 있게 해줍니다. 기본적인 사용법을 알아봅시다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process(); async/await 문법을 사용할 때에는, 함수를 선언 할 때 함수의 앞부분에 async 키워드를 붙여주세요..