지옥의불구덩이

JavaScript 숫자형 input설정 / 총점 자동계산 / 설문지 작성 일반적인 설문지같은 경우, 사용자로부터 문항별로 점수를 입력받고 계산된 총점을 포함하여 제출하게 됩니다. 웹에서 해당 내용을 반영하기위해 다음의 두가지 설정을 반영하도록 합니다. 1. 점수입력을 위한 input박스를 숫자형만 받도록 설정하고, 해당숫자가 각 항목의 최대점을 넘지 않도록 설정 2. 각 점수의 input박스가 반영될때 마다, 총점을 자동계산하여 표출해주도록 설정 해당 설정이 반영된 화면은 다음과 같이 동작합니다. - 각 문항 점수항목의 input박스 설정 점수별로 input박스에 사용자 입력(keyup) 이벤트가 발생할때 마다 setNumeric함수(숫자형설정) > autoCal함수(총점 계산하여 자동 반영) 순으로 ..

JavaScript 문자열대체 / 공백제거 / replace / replace All 1. 문자열 양쪽 끝 공백제거(trim) var str = " a b c " str = str.trim(); // "a b c" 2. 문자열 대체(replace) const newStr = str.replace(regexp|substr, newSubstr|function) var fruit = "apple tomato banana"; fruit = fruit.replace("apple","orange"); // "orange tomato banana" 2-1. 문자열 제거 - 찾는 패턴에 해당하는 항목이 여럿이더라도, 문자열 인덱스상에서 맨앞의 항목만 변경됩니다. var fruit = "apple tomato banan..

제이쿼리 체크박스 전체선택 on&off / JQuery Check All on&off 개발시 테이블 태그에서 자주 사용되는 체크박스의 전체선택/전체해제 코드입니다. (체크박스 항목중, disabled옵션을 반영하여 작성된 코드입니다.) 관련 함수는 총 두가지로 이루어져있습니다. 1. 체크박스 그룹 일괄 on/off 함수 2. 체크박스 그룹내 항목 개별 선택시, 그룹 전체항목이 체크되면 일괄체크박스에 체크시키는 함수 - 테이블 태그 설정 html 부분 입니다. 번호 아이디 이름 생년월일 성별 1 hong 홍길동 2021-04-02 남 .... 5 gan 간달프 2021-04-02 남 전체선택 on/off 체크박스의 id는 "checkAll"이고, 해당될 요소들의 클래스명은 "checkGroup"으로 구성하..

제이쿼리 이미지 미리보기 생성 / JQuery Image Preview 이미지에 마우스오버시 미리보기 이미지 툴팁(확대) 생성하는 코드입니다. 이미지만 확대하는 Preview, 이미지 확대후 캡션도 생성하는Preview 두가지 종류 입니다. - 이미지 태그 설정 html 부분 입니다. # mouseover 시, Image Preview Gallery 생성 without Caption with Caption Jquery함수에서 img태그에 data-image속성값이 있으면 해당값을 Caption으로 설정하여 Preview를 생성할 것입니다. HTML에서 원하는 엘리먼트에 "data-속성명" 을 통해 화면에는 표출되지않는 정보들을 부여할 수 있습니다. - Preview 태그를 생성하는 자바스크립트 함..

textarea 글자수 제한 / 바이트(Byte) 제한 클라이언트로부터 입력받고자 하는 텍스트가 긴 문자열의 경우, textarea태그를 설정하여 받게됩니다. 이 때, 입력받을 수 있는 최대 바이트수를 정해두고 해당 범위 내에서만 입력가능하도록 하는 자바스크립트 함수를 설정하겠습니다. (기본 태그로 bootstrap 클래스 적용) ※제한을 "글자수"로 두지않는 이유 한글은 한글자당 2byte를 할당하고, 영문자는 한글자당 1byte를 할당합니다. 만약 제한 기준을 "글자수"로 설정한다면 최대치로 입력했다고 가정했을 때, 한글과 영문자의 구성에 따라TextArea에서 전달하는 데이터의크기가 가변적이게 됩니다. 즉, TextArea를 통하여 전달하는 데이터양의 최대값을 설정하겠다는 취지를 벗어나게됩니다. -..