Timer 타이머

JS // timer function countdown( elementId, seconds ){ var element, endTime, hours, mins, msLeft, time; function updateTimer(){ msLeft = endTime - (+new Date); if ( msLeft < 0 ) { console.log('done'); } else { time = new Date( msLeft ); // hours = time.getUTCHours(); // mins = time.getUTCMinutes(); hours = String(time.getUTCHours()).padStart(2, "0"); mins = String(time.getUTCMinutes()).padStart(2..

2022.05.18

input[type="number"] 화살표 및 키보드 막기

CSS input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } JS // input[type="number"] 키보드 막기 $( function(){ $("input[type='number']").on('keydown', function(e){ if(!((e.keyCode > 95 && e.keyCode 47 && e.keyCode < 58) || e.keyCode == 8)) { return false; } }); });

2022.05.18

HTML include

HTML, CSS 파일로만 작업된 페이지에서 include를 하는 방법 HTML에는 include 기능이 없지만 JavaScript AJAX를 이용하여 인클루드를 할 수 있다. HTML JS window.addEventListener('load', function() { var allElements = document.getElementsByTagName('*'); Array.prototype.forEach.call(allElements, function(el) { var includePath = el.dataset.includePath; if (includePath) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () {..

2022.05.03

input replace 유효성 체크

Javascript를 이용한 input value 유효성 검사. value 입력 시 다음 칸으로 focus() 된다. HTML 인증번호 4자리 입력 잘못된 인증번호 입니다! JS /* signup */ $(function(){ $(document).on('keypress keyup keydown', 'input[onlyNumber]', function(e){ console.log(e.which); if(/[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)){ //한글 막기 e.preventDefault(); this.value = ''; }else if (e.which != 8 && e.which != 0 //영문 e막기 && e.which 57 //숫자키만..

2022.05.03

input 태그의 pattern 속성과 정규표현식

HTML5에서 새롭게 추가된 속성입니다. 태그의 pattern 속성은 폼 제출 시 요소의 값을 검사할 때 사용될 정규 표현식(regular expression)을 명시합니다. 이때 전역 속성인 title 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있습니다. 보안상 예상치 않은 데이터 입력을 완전하게 컨트롤 하기 위해서는 최종적으로 서버사이드 스크립트에서 처리해 주어야 한다. pattern 속성이 제대로 동작하는 요소의 type 속성값은 다음과 같습니다. date, email, password, search, tel, text, url 문법 예제 생년월일: 예제

2022.05.02

ES6 배열 내장 함수

ES6 배열함수 ES6에는 배열을 처리할 수 있는 여러 함수들이 있다. 1) forEach : 반환값이 없다, 단순 for문과 같이 작동한다. 2) map : 반환값을 배열에 담아 반환한다. ***** 3) filter : 조건에 충족하는(true) 아이템만 배열에 담아 반환한다. 4) some : 조건에 충족하는 아이템이 하나라도 있으면 true 반환, 아니면 false. 5) every : 모든 배열에 아이템이 조건을 충족하면 true 반환, 아니면 false. 6) find : 조건에 충족하는 아이템 하나만 반환(여러개라면 첫번째것만 반환) 7) findIndex : 조건에 충족하는 아이템의 인덱스값 반환 (여러개라면 첫번째아이템의 인덱스번호만 반환) 8) reduce : 배열의 각 요소에 대해 주..

2022.04.26