티스토리 뷰

유료강의/국비지원

웹퍼블리셔 활용 5일차 - 폼 예제 1, 2

2021bong 2021. 10. 18. 20:17

폼으로 더하기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-1.form.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="calc">
    <input type="text" name="kor">
    <input type="text" name="eng">
    <input type="button" value="더하기">
  </div>
  <div class="result">
    <input type="text" class="result">
  </div>
</body>

</html>

 

제이쿼리

$("[type='button']").on('click', function(){
  let kor = Number($("input[name='kor']").val()); // input은 string으로 받아오기 때문에 추가
  let eng = Number($("input[name='eng']").val());
  $('.result input').val(kor + eng);
});

 

바닐라

const btn = document.querySelector("[type='button']");
const kor = document.querySelector("input[name='kor']");
const eng = document.querySelector("input[name='eng']");
const result = document.querySelector(".result input");
let total;

btn.onclick = function(){
  total = Number(kor.value) + Number(eng.value);
  result.value = total;
}

 

문자열을 숫자로 변환해주는 함수

eval(string)
  total = eval(`${kor.value} + ${eng.value}`); // 숫자열 더하기 계산
  total = eval(kor.value + eng.value); // 문자열끼리 더한다음에 숫자열로 변환

 

+사용하지말것

 

eval() - JavaScript | MDN

eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수입니다.

developer.mozilla.org

 

 

계산기 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script defer src="./js/3-2.form.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="result">
    <input type="text" name="result">
    <button>결과보기</button>
    <button>초기화</button>
  </div>
  <div class="btn">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>0</button>
  </div>
  <div class="calc">
    <button>+</button>
    <button>-</button>
    <button>*</button>
    <button>/</button>
  </div>
</body>
</html>

 

const result = $('.result input')
let data = "";

$('button').on('click',function(){
  data += $(this).text(); // 아무 버튼을 클릭하면
  $(result).val(data); // result에 값이 쌓이면서 들어가게 하기
});
const result = $('.result input')
let data = "";

$('button').on('click',function(){
  if($(this).text() != '결과보기'){ // 결과보기 버튼은 예외처리 하기
    data += $(this).text()
  } else {
    data = eval(data); // 결과보기를 누르면 계산하게 하기
  }
  $(result).val(data);
});
const result = $('.result input')
let data = "";

$('button').on('click',function(){
  if($(this).text() != '결과보기' && $(this).text() != '초기화'){ // 초기화버튼 추가로 조건 수정
    data += $(this).text()
  } else if ($(this).text() == '초기화') { // 초기화 버튼을 눌렀을 때
    data = ''; // data의 값을 비워두게 변경
  } else {
    data = eval(data);
  }
    $(result).val(data);
});

 

키보드도 입력가능하게 하기

$(window).on('keyup', function(e){
  data += e.key;
  $(result).val(data); // 키보드로 입력한 값을 result에 들어가게 하기
});

입력 가능한 키 제한하기

$(window).on('keyup', function(e){
  data += e.key;
  $(result).val(data);
  console.log(e.key.replace(/[^0-9]/g,'')); // replace 함수 사용
});
$(window).on('keyup', function(e){
  data += e.key;
  $(result).val(data);
  console.log(/[^0-9]/g.test(e.key)); // 정규 표현식과 test 함수 사용하기
});

.replace

+공부

 

 

정규 표현식

올바른 조건대로 입력했는지 (예: 아이디) 검증할 때 사용

[이메일]
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

[휴대폰] 
01로 시작하고 1,6,9숫자, 하이픈(-) 3또는 4개의 숫자, 하이픈(-) 4개의 숫자
/^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;

3개숫자, 하이픈(-) 3~4개의 숫자, 하이픈(-) 4개의 숫자
/^\d{3}-\d{3,4}-\d{4}$/; 


[아이디,비밀번호] 
8 ~ 10자 영문, 숫자 조합
/^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z]{8,10}$/;

특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식 
/^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^*&+=]).*$/;

+

정규 표현식 공부

 

 

.test

정규표현식.test(확인할 값)

true, false 값만 반환

정규 표현식이 있어야만 사용가능

정규 표현식에 해당되는 값이면 true, 아니면 false

+공부

 

$(window).on('keyup', function (e) {
  if (!/[^0-9\+-/*]/g.test(e.key)) { // 숫자와 연산자만 입력가능
    data += e.key;
  }
  $(result).val(data);
});

 

$(window).on('keyup', function (e) {
  if (!/[^0-9\+-/*]/g.test(e.key)) {
    data += e.key;
  }
  if(e.keyCode == 13){
    data = eval(data);
  }
  if(e.keyCode == 8){
    data = '';
  }
  $(result).val(data);
});

+

키보드 입력 막기

728x90
저작자표시

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 활용 7일차 - 폼 예제 6, 7, 8  (0) 2021.10.20
웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5  (0) 2021.10.19
웹퍼블리셔 활용 4일차 - 스크롤 예제 3, 제이쿼리UI  (0) 2021.10.14
웹퍼블리셔 활용 3일차 - 스크롤 예제 2  (0) 2021.10.13
웹퍼블리셔 활용 2일차 - 스크롤 예제 1 완성  (0) 2021.10.12
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함