JavaScript (46) 썸네일형 리스트형 javascript date 일 더하기 사용자로부터 날짜를 입력받는다. 선택 날짜에 제한을 두고 싶다. 예를 들어서, 예약 날짜를 입력 받는데 오늘로부터 최소 3일 이후부터만 선택 가능해 보자. //사용자가 날짜를 입력하는 태그 //파라미터로 던져 준 숫자만큼 날을 더하는 함수 addDays()를 Date에 prototype으로 넣어 둠. Date.prototype.addDays = function(days) { const date = new Date(this.valueOf()); date.setDate(date.getDate() + days); return date; } const dateVal = document.querySelector('input#orderDate').value; //사용자가 입력한 날짜를 문자열 형태로 받아옴 cons.. input 태그에서 최소값 min 최대값 max 설정하기 / text에서 숫자만 받기 number only - input 태그 type을 number로 설정하기 - 사용자로부터 정보를 입력받을 때는 input 태그를 사용한다. 이때 숫자 자료형으로 입력받고 싶다면 type을 number로 설정해주면 된다. //숫자만 입력받기 (기본값1) 숫자를 입력 받을 때, 어떤 숫자 이상만 입력 가능하거나 어떤 숫자 이하만 입력 가능하도록 제한을 걸어 두어야 할 때도 있다. 그럴 때는 최대값이나 최소값을 설정해주면 된다. //최소 1, 최대 10 사이에서 입력 받기 최대값이나 최소값 제한이 적용되는 것은 마우스로 값을 조정할 때뿐이다. 키보드로 입력할 때는 인식하지 못한다. 따라서 키보드로 입력하는 값은 따로 이벤트 설정을 해두어야 한다. - type은 text로 하고 이벤트로 제한하기 - 숫자만 입력받는 또 다른 방법이.. [JavaScript] yyyy-mm-dd 형태로 format 해서 출력하기 - javascript 에서 시각을 YYYY-MM-DD로 변형하기 - 현재 시각은 new Date()로 출력할 수 있다. 출력 형태는 아래와 같다. Sat Apr 16 2022 22:45:02 GMT+0900 (한국 표준시) Date.now()는 아래와 같이 유닉스 타임을 돌려준다. 1650116719429 형식을 YYYY-MM-DD 형태로 바꾸고 싶다면 어떻게 해야 할까. 아쉽게도 javascript 내장함수는 따로 없다. 직접 만들어서 써야 한다. 아래와 같이 만들 수 있다. function dateFormatter(d) { const cal = new Date(d); //파라미터로 전달 받은 날짜를 가지고 새로운 Date 자료형 변수를 만든다. const year = cal.getFullYear().. jQuery로 checkbox 값 가져오기 / 체크박스 value 변경하기 - checkbox 값 체크 여부 받아오기 - 체크박스는 토글 요소다. 체크가 되어 있거나, 되어 있지 않거나, 둘 중 하나다. 체크 여부는 checked 속성을 확인할 수 있다. 체크되어 있으면 checked 가 활성화돼 있고, 체크되어 있지 않으면 checked 속성이 없다. jQuery를 활용하면 특정 체크박스가 체크되어 있는지 아닌지 여부를 손쉽게 확인할 수 있다. > is() 함수 이용하기 const isChecked = $(item).find('input[name="isRefund"]').is(':checked'); is() 함수는 파라미터로 던져주는 선택자, 함수, 요소 등에 부합하는 대상이 있다면 true를 반환하고, 없으면 false를 반환한다. $(item).find('input[nam.. 크롬 개발자 도구 (F12) 를 바탕으로 원하는 attributes 값 받아오기 - 크롬 개발자 도구로 속성 값들에 접근하기 - 크롬 개발자 도구를 활용하면 HTMl 요소가 가지고 있는 어떤 값에 손쉽게 접근할 수 있다. 크롬으로 웹 페이지를 연 뒤에 개발자 도구(F12)를 활성화한다. 열려 있는 개발자 도구 창에서 가장 왼쪽 상단에 보면 사각형 위에 마우스 커서 모양이 있는 아이콘이 있다. 이 요소 선택 도구(ctrl + shift + c)를 클릭한 뒤에 웹 페이지 안에서 조사하고 싶은 요소를 클릭한다. 개발자 도구 창에서 Elements 탭을 클릭하고, 그 안에서 다시 properties 탭을 클릭한다. 그러면 선택한 요소가 가지고 있는 여러 가지 속성들이 출력된다. 여기서 태그의 속성 값들을 바탕으로 원하는 요소에 접근할 수 있다. 아래 코드를 console 창에 입력해 보자... jQuery 에서 find() 함수 사용법 / Vanilla JS로 바꾸기 - jQuery 로 하위 요소 선택하기 - find()는 하위 요소를 선택하는 함수다. $('tbody#fruitListBody tr'); 위처럼 선택하면 id가 'fruitListBody'인 tbody 태그 안에 있는 tr 태그들을 선택한다. 선택한 태그 안에서 다시 하위 요소들을 찾아야 할 때도 있다. 이럴 때는 find() 함수를 이용하면 된다. 예를 들어, tr 태그를 하나씩 불러와서 각각 어떤 처리를 해야 할 때 사용하면 편하다. 아래는 예제다. tbody 태그 안에 있는 tr 태그들을 모두 부른다. 그 tr 태그들을 하나씩 불러와서 find 함수를 실행한다. 그러면 tr 태그 안에 있는 하위 요소들을 탐색할 수 있다. 하위 요소들 중에 가격 값이 들어 있는 td 태그와 갯수 값이 있는 태그에 .. JSON 이란? 배열을 stringify 해서 ajax로 보내고 java에서 parser로 파싱하기 - JSON이란? - JSON이란 무엇일까? JSON은 아래의 줄임말이다. > JavaScript Object Notation 번역하자면 자바스크립트에서 객체를 표현하는 문법정도 된다. 내부 형태는 아래처럼 속성 이름과 속성 값이 쌍을 이루는 구조다. const obj = { key1:val1, key2:val2, key3:val3 }; 이렇게 간단한 구조에다가 여러 환경에서 통용되는 형태이기 때문에 많이 사용한다. - Java에서 JSON 단일 객체 다루기 - 먼저 전체적인 흐름은 다음과 같다. 어떤 데이터를 입력 받는다. 그 데이터의 자료형은 문자열이다. 데이터 내용은 JSON 형태로 이루어져 있다. 이러한 경우 그 데이터를 JSON 객체로 변환할 수 있다. 이처럼 변환하는 작업을 parsing 이라.. 자바스크립트 태그 속성 값 가져오기 ( javaScript tagName ) - 요소의 tagName 속성에 접근하기 - 어떤 요소의 하위 요소들 중에서 특정 태그 요소들만 받아오려고 한다. 예를 들어서 특정 div 태그 안에 있는 요소들 중에 태그 요소들만 받아오거나 태그 요소들만 받아오는 식이다. 그때 'tagName' 속성 값을 이용하면 된다. 요소 객체들은 'tagName' 이라는 속성을 갖는다. 그 요소의 태그 이름을 들고 있는 속성이다. const ele = document.querySelector('#eleID'); const tagName = ele.tagName; if(tagName == 'INPUT') { console.log('이 태그는 input 태그입니다'); //do something } - 응용 예시 - 예를 들어서, 아래 코드를 보자. 어떤 태그 안에.. 이전 1 2 3 4 5 6 다음
