JavaScript (36) 썸네일형 리스트형 [#. JavaScript] 정규표현식을 이용해서 input 입력 폼에서 소수점 첫째 자리까지만 입력할 수 있도록 막기 input에서 소수점 첫째자리까지만 입력 가능하게 하려고 한다 자바스크립트 정규식을 이용해서 막아보자 $("#num").off("keypress").on("keypress",function(e){ var num = $("#num").val(); var _pattern1 = /^\d*[.]\d{1}$/; if (_pattern1.test(num)) { return false;// 현재 value 값이 소수점 첫째 짜리 숫자라면 더 이상 입력 X } }); 정규식.test(str) 문자열과 정규식의 일치 여부를 true, false로 반환한다 [#. JavaScript] chart.js doughnut(donut) chart 원형 차트 생성, 사용하기 도넛 모양 원형 차트를 만들려고 합니다 chart.js를 사용하겠습니다 www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 사이트로 들어가면 설치부터 사용 방법, 사용 가능한 옵션들까지 상세하게 정의되어 있다 npm, Bower, CDN 등 여러 가지 방법으로 설치하거나 가져와서 사용할 수 있다 나는 CDN으로 가져와서 사용했다 ① CDN으로 chart.js 사용 ② char.. [#. JavaScript] Math.pow(a, b) 제곱 구하기 엑셀에서 3^2로 표현되는 제곱 구하는 함수 Math.pow(밑, 지수) 제곱 Math.pow(3, 2)// 9 세제곱 Math.pow(5, 3);// 125 네제곱 Math.pow(3, 4)// 81 [#. JavaScript] 소수점 올림, 소수점 내림, 소수점 반올림, 소수점 반올림 후 숫자를 문자열로 변환 소수점 올림, 내림, 반올림, 반올림 해서 문자열로 출력 하는 방법을 알아보자 소수점 올림 Math.ceil(89.123);// 90 Math.ceil(89.678);// 90 소수점 버림 Math.floor(89.123);// 89 Math.floor(89.678);// 89 소수점 반올림 Math.round(89.123);// 89 Math.round(89.678);// 90 toFixed 지정한 소수점 이하 숫자를 반올림한 후 숫자 -> 문자열 변환하여 출력 toFixed(2) => 소수점 3번째 자리에서 반올림 (89.123).toFixed(0)// "89" (89.123).toFixed(2)// "89.12" (89.123).toFixed(4)// "89.1230" (89.678).toFixed.. [#. JavaScript] 문자를 숫자로 형변환하는 parseInt, Number의 차이 parseInt, parseFloat의 차이 문자열을 숫자로 바꿔주기 위해 형변환을 사용한다 parseInt, Number의 차이를 알아보자 Number 변환하는 자리에 숫자만 가능 Number('1234')// 1234 Number('100만원')// NaN parseInt(정수) 변환하는 자리에 문자가 섞여있어도 숫자로 시작하는 경우에만 숫자가 시작하는 부분부터 숫자가 끝나는 부분까지 변환 가능 parseInt('1234');// 1234 parseInt('100만원');// 100 parseInt('가격은 100만원');// NaN parseFloat(실수) parseInt와 기본적으로 같지만, parseInt는 정수로 출력 parseFloat는 실수로 출력 var kg = '5.7kg'; parseInt(kg)// 5정수 parseFloat.. [#. JavaScript] 브라우저 화면 넓이(width), 높이(height) 값 가져오기 반응형 웹에서 기기별 px을 구해야 하거나, 여러모로 화면 위치값이나 넓이와 높이값이 필요할 때 사용할 수 있다 window.screenTop : 상단으로부터 브라우저 위치 window.screenLeft : 왼쪽으로부터 브라우저 위치 window.innerWidth : 브라우저 화면의 너비(viewport) window.innerHeight : 브라우저 화면의 높이(viewport) window.outerWidth : 브라우저 전체의 너비(메뉴, 툴바, 스크롤바 포함) window.outerHeight : 브라우저 전체의 높이(메뉴, 툴바, 스크롤바 포함) [#JavaScript] checkbox toggle 체크박스 토글, 이메일 로그인/핸드폰번호 로그인 ① HTML 휴대폰 번호로 로그인 로그인 ② Script // 비밀번호 input focus/focusout에 따라 border-bottoer 변경 $(".pw-wrap input").focus(function() { $(".pw-wrap").css("border-bottom", "1px solid #2299f2"); }); $(".pw-wrap input").focusout(function() { $(".pw-wrap").css("border-bottom", "1px solid #dee0e4") }); // 눈 모양 아이콘 클릭 시 비밀번호 입력한 부분 보이게 하기 $("#eyes").click(function() { $(".pw-wrap input").toggleClass("active"); if($.. [#JavaScript] 버튼 전체 동의 체크박스, 체크 및 체크 해제 각각의 체크박스 선택 시 체크, 체크 해제 그리고 전체 동의 버튼 클릭 시 전체 체크, 전체 체크 해제 약관에 모두 동의합니다. 이용약관 동의 [필수] 보기 마케팅 약관 동의 [필수] 보기 $("#chk-all").click( function() { var checkedVal = $(".chk").prop("checked"); $(".chk").prop("checked", this.checked); if($("#chk-all").prop("checked") == true) { $(".check-msg").css("color", "#43494f"); } else { $(".check-msg").css("color", "#b0b5c1"); } }); $(".chk").on("click", function().. 이전 1 2 3 4 5 다음
