3/17(수)FrontEnd/Javascript(6), jQuery(1)

민국·2021년 3월 17일
jquery

정규표현식

시작~끝까지 오로지 영문자로만 이뤄진 경우

: 갯수 상관없음, 단 적어도 한 글자는 무조건 있어야 될 경우

regExp = /^[a-zA-z]+$/
console.log("/^[a-zA-z]+$/ : " + regExp.test("JavaScript")); 
// true
console.log("/^[a-zA-z]+$/ : " + regExp.test("Java!Scr1234ipt")); 
//false

시작~끝까지 오로지 영문자, 숫자로만 이뤄진 경우

regExp = /^[a-zA-z0-9]+$/;
console.log("/^[a-zA-z0-9]+$/ : " + regExp.test("JavaScript123")); 
// true

시작~끝까지 오로지 한글(자음,모음,결합)로만 이뤄진 경우

regExp = /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/;
console.log("/^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/ : " + regExp.test("안녕하세요크하하함")); 
// 띄어쓰기 인식 못함, true

var name = prompt("너 이름이 뭐니?");
  if(regExp.test(name)){
  	alert("환영합니다!");
  } else {
  	alert("유효한 이름이 아닙니다.");
  }
}

플래그문자

  • i : 대소문자를 가리지 않고 비교를 수행하겠다
  • g : 전역으로 비교를 수행하겠다
  • m : 여러줄 비교를 수행하겠다

(1). i

: 대소문자 가리지 않고 비교 수행

시작부터 끝까지 영문자 또는 숫자로만 이뤄져야 할 때

:단, 첫글자는 반드시 영문자로, / /i; 이런식으로 / 뒤에 기록함.

regExp = /^[a-z][a-z0-9]+$/i;
// ^[a-z]: 영문자로 시작
// [a-z0-9]+$ : 끝까지 영문자 또는 숫자로만 한 글자 이상인 경우
// i : 영문자들 대소문자 상관없이 검사하라

console.log("/^[a-z][a-z0-9]+$/i; : " + regExp.test("adss35111"));
// true

영문자로만 최소 3글자 이상, 최대 5글자 이하만을 입력

var regExp = /^[a-z]{3,5}$/i;
console.log("/^[a-z]{3,5}$/i : " + regExp.test("adssd"));
// true
console.log("/^[a-z]{3,5}$/i : " + regExp.test("wsdddssd"));
// false

(2) g : 전역비교

var str = "JavaScript JQuery Ajax"
            
var regExp = /a/; // a 하나 비교
console.log("/a/ : " + str.replace(regExp, "(***)"));

regExp = /a/g; // a 전역비교
console.log("/a/g : " + str.replace(regExp, "(***)"));

regExp = /a/ig; // 대소문자 가리지 않고 전역비교
console.log("/a/ig : " + str.replace(regExp, "(***)"));

(3) m : 여러 줄 비교

var str = "JavaScript\nJQuery\nAjax"

var regExp = /^J/;
console.log(str.replace(regExp,"(***)"));

regExp = /^J/g;
console.log(str.replace(regExp,"(***)")); 
// 안 먹음 왜? 한줄 전역만 비교하기때문에

regExp = /^J/mg; // i, g, m 순서 상관없음
console.log(str.replace(regExp,"(***)")); 
// 여러줄 전역비교

주민번호 확인(정규표현식 활용)

1단계

: 6개의 값 - 7개의 값
. : 개행문자를 제외한 모든 문자(영문자, 숫자, 한글, 특수문자)

(var regExp = /^......-......$/;)
// 숫자외의 다른문자가 와도 글자수만 맞으면 정상입력 
// 성별자리에 1,2,3,4가 아닌 그 외의 숫자가 와도 정상입력이 나옴 => 수정필요

2단계

: 숫자값 6개-[1-4]숫자값 6개

. : 개행문자를 제외한 모든 문자(영문,숫자,한글,특수문자)

< 추가적인 메타문자 >

  • \d : 숫자(즉, [0-9]와 동일)

  • \D : 숫자를 제외한 모든 문자

  • \w : 영문자, 숫자, _

  • \W : 영문자, 숫자, _를 제외한 모든 문자

  • \s : 공백문자(띄어쓰기, 탭, 줄바꿈)

  • \S : 공백문자를 제외한 모든 문자

< 수량문자 >

  • ( + ) : 1개 이상(1글자는 반드시 있어야됨)

  • ( * ) : 0개 이상(0글자도 가능)

  • ? : 0또는 1개 (다수는 불가능)

  • {5} : 5글자

  • {2,5} : 2글자 이상 5글자 이하

  • {2,} : 2글자 이상

  • {,5} : 5글자 이하

3단계

: 생년월일 맞추기

  • 생년(두자리) => \d{2}
    : 아무 숫자로 두 자리만 채우면 됨

  • 월(두자리) => (0[1-9]|1[0-2])

    • 앞자리가 0일 경우 뒷자리는 1~9까지 가능 0[1-9]
    • 앞자리가 1일 경우 뒷자리는 0~2까지 가능 1[0-2]

  • 일(두자리) => (0[1-9]|[1-2][0-9]|3[0-1]) => 연결 "|"

    • 앞자리가 0일 경우 뒷자리는 1~9까지 가능 0[1-9]
    • 앞자리가 1또는 2일 경우 뒷자리는 0~9까지 가능 [1-2][0-9]
    • 앞자리가 3일 경우 뒷자리는 0~1까지 가능 3[0-1]

<결과물>

주민번호 : <input type="text" placeholder="-포함해서 입력하시오" id="pno">

<script>
function test4(){

// 사용자가 입력한 주민번호 값
var value = document.getElementById("pno").value;
            
var regExp = /^\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])-[1-4]\d{6}$/;

if(regExp.test(value)){
document.getElementById("result").innerHTML = "정상입력!";
} else{
document.getElementById("result").innerHTML = "잘못입력!";
}
}
</script>

회원가입 만들기

<!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">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <h1>회원가입</h1>
    <form action = "insert.me">
        *아이디 : 
        <input type="text" name="userId" id="userId" required><br>
        <label>첫글자는 반드시 영문자로, 그리고 영문자, 숫자 포함하여 총 4~12자로 입력하시오.</label>
        <br><br>
        
        *비밀번호 : 
        <input type="password" name="userPwd1" id="userPwd1" required><br>
        <label>영문자, 숫자, 특수문자로 총 8~15자로 입력하시오.</label>
        <br><br>
        
        *비밀번호 확인 : 
        <input type="password" name="userPwd2" id="userPwd2" required><br>
        위의 비밀번호와 일치하게 입력하시오.
        <br><br>
        
        *이름 : 
        <input type="text" name="userName" id="userName" required><br>
        한글로만 이루어져야되며 2글자 이상으로 입력하시오.
        <br><br>
        
        *이메일 : 
        <input type="email" name="email" value="email"><br>
        <label>이메일 형식에 맞춰서 입력하시오.</label>
        <br><br>

        *취미 : <input type="text" name="hobby" id="hobby" placeholder="축구, 농구, 야구, 독서 등" list="hobbyList"><br>
        <datalist>
            <option value = "soccer">축구</option>
            <option value = "basketball">농구</option>
            <option value = "baseball">야구</option>
            <option value = "reading">독서</option>
        </datalist>
        <br><br>
        
        *거주지 : 
        <select name="address" id="address">
            <option value="seoul">서울</option>
            <option value="incheon">인천</option>
            <option value="busan">부산</option>
        </select>
        <br><br>

        <input type="submit" value="회원가입" onclick = "return validate();">
        <input type="reset" value="취소">
    </form>
    <script>
        function validate(){

            // 유효성 검사 : 아이디,비밀번호,비밀번호확인,이름

            // input 요소 객체를 가져오기(작성되어있는 값(value) 가져오는게 아님)
            var userId = document.getElementById("userId");
            var userPwd1 = document.getElementById("userPwd1");
            var userPwd2 = document.getElementById("userPwd2");
            var userName = document.getElementById("userName");

            // 1) 아이디 검사(첫글자는 반드시 영문자로, 그리고 영문자, 숫자 포함하여 총 4~12자로 입력하시오.)
            var regExp = /^[a-z][a-z\d]{3,11}$/;

            if(!regExp.test(userId.value)){
                alert("유효한 아이디를 입력하세요!!")
                
                userId.value =""; // 사용자가 작성한 아이디 지우기
                userId.focus(); // 커서가 깜빡깜빡

                return false;
            }
            
            // 2) 비밀번호 검사(영문자, 숫자, 특수문자(!@#$%^&*)로 총 8~15자로 입력하시오.)

            regExp = /^[a-z\d!@#$%^&*]{8,15}$/i;
            if(!regExp.test(userPwd1.value)){
                alert("유효한 비밀번호가 아닙니다!")

                userPwd1.value ="";
                userPwd1.focus();

                return false;
            }

            // 3) 비밀번호 일치 검사(위의 비밀번호와 일치하게 입력하시오.)

            if(userPwd1.value != userPwd2.value){
                alert("비밀번호가 일치하지 않습니다!!");

                userPwd2.select(); // 비밀번호 확인쪽이 선택됨.

                return false;
            }

            // 4) 이름 검사
            regExp = /^[가-힣]{2,}$/g;

            if(!regExp.test(userName.value)){
                alert("이름을 제대로 입력해주세요.");

                userName.value ="";
                userName.focus();

                return false;
            }
        } 
            
    
    </script>
</body>
</html>

jQuery

1. jQuery 개요

1) jQuery란?

기존에 순수자바스크립트 언어 만으로 구현하기에 복잡했던 구문 작성들을 간소화하기 위해 "존 레삭"에 의해 개발된 JavaScript 기반의 "라이브러리"(유용한 기능들의 모음집)

복잡한 자바스크립트 구문을 보다 짧고 쉽게 개발 가능 (적은 양의 코드로 빠르고, 풍부한 기능 제공)

  • JQuery 장점
    1) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있음
    2) AJAX(비동기식통식), 이벤트 처리 등등 폭넓게 지원함
    3) JQuery와 관련된 확장형 플러그인, 오픈 API등을 지원
    (차트, 슬라이드, 애니메이션 등등)

2) jQuery 라이브러리 연결방법

: head 태그 내부에 script 태그로 jQuery관련 .js파일 가져오기
단, 오프라인 / 온라인 방식이 있음

2)-(1) JQuery 라이브러리 다운로드 받은 후 해당 파일의 경로 지정 연결(오프라인)

  • UnCompressed - 개발자 전용
    일반 js파일 : 개발자 같은 사람이 보기 쉽도록 주석, 코드 정렬 등을 활용해서 가시성을 유지하느 파일(가독성 좋게)

  • Compressed - 배포전용
    min js파일 : 주석, 들여쓰기, 띄어쓰기 등을 최소화 및 간소화해서 네트워크상으로 데이터 전달시 최소한의 데이터 전달로 효율 높임

2)-(2) CDN(Content Delivery Network)를 통한 연결(온라인)

: 라이브러리를 제공하는 사이트 주소를 제시해서 파일을 연동시키는 방법

3) jQuery 시작하기

: jQuery 구문은 문서상에 dom요소가 다 로드(다 만들어지고 나서)된 후에 실행되어야만 함

3)-(1) 순수js에서의 해당 내용은

window.onload = function(){
	실행내용;
}

window.onload 구문은 해당 문서의 dom요소들도 다 로드되고 뿐만 아니라, 외부문서들까지 다 가지고 온 뒤에 실행됨 그리고 이 구문은 html에서 단 한번만 작성 가능

3)-(2) jQuery에서 3가지 구문

  • (1) 
jQuery(document).ready(function(){
                실행내용;
});
  • (2) 
$(document).ready(function(){ // 보통 제일 많이 씀;
                실행내용;
});
  • (3)
$(function(){ // 제일 축약함
                실행내용;
});

jQuery에서의 해당 구문은 외부문서들을 다 가져오기 전에 dom요소만 로드되면 곧바로 실행함.
해당 문서에 여러번 기술 가능함!

h3 요소들 선택해서 배경색 노란색으로 변경

  • 순수 js 방식
        var h3Arr = document.getElementsByTagName("h3"); // 배열 : [h3, h3, h3]

        
        h3Arr[0].style.backgroundColor = "yellow";
        h3Arr[1].style.backgroundColor = "yellow";
        h3Arr[2].style.backgroundColor = "yellow";
        

        for(var i=0; i<h3Arr.length; i++){
            h3Arr[i].style.backgroundColor = "yellow";
        }
  • jQuery 방식
        // $("h3").style.backgroundColor = "yellow";

        $("h3").css("backgroundColor", "yellow");
        // $("선택자") : 내가 원하는 요소 선택
        // .css() 메소드 : 선택한 요소들의 스타일과 관련된 기능 수행

2. 기본선택자

1) 아이디 선택자

: 특정 고유한 아이디 값을 가진 요소 하나만을 선택하고자 할 때

    <h1 id="id1">ID1</h1>
    <h2 id="id2">ID2</h2>

    <script>
        $(document).ready(function(){
            // 순수 자바스크립트 방식 => document.getElementById("아이디명")
            document.getElementById("id1").style.color = "red"; 
            document.getElementById("id1").innerHTML = "h1변경"; 
            
            // jQuery 방식 => $("#아이디명")
            $("#id2").css("color","pink"); // 요소객체.style.color = "pink";
            $("#id2").html("h2변경"); // 요소객체.innerHTML = "h2변경";


        })
    </script>
profile
민국
새싹개발자
이전 포스트

3/16(화)FrontEnd/Javascript(5)

다음 포스트

3/20(토)Semi-Proejct/UML(유스케이스)

0개의 댓글