디버깅
html, 자바스크립트는 검사의 소스 창에서 디버깅 하기
jquery
.addClass, .removeClass, toggleClass
<결과>
- toggle 은 사라졌다가 나타났다가
- box라는 css요소를 추가하거나 삭제하거나 토글할 때 사용
on 사용시 발생한 동작 자체를 명령어로 작성 가능
css 요소를 동적으로 html에 추가하고 싶을 때 사용함
$("#요소의 아이디").click(()=>{}); .show, .hide, .toggle
<결과>
- show, hide, toggle의 동작안에는 style 요소의 display :none가 나오는 명령어가 있음
style요소의 display:none을 요소에 추가하고 싶을 때 사용함
그렇다면 두 가지의 각각의 사용하는 경우?
단순히 요소를 추가/제거 할 때는 class
요소를 숨기거나 보이게 하는 것은 .show, .hide, .toggle
오늘 했던 jquery 메서드
.text(), appendTo(), .css(), .val()
정규표현식(RegExp)
- Regular Expression
1. 정규표현식 객체 생성
1-1. 단순히 만드는 방법
/원하는 정규표현/;
1-2. RegExp 객체를 생성해서 만드는 방법
const 상수명 = new RegExp("원하는 정규표현")
검증한 문자열이 계속해서 바꾸는 경우를 대비할 때 사용함.
웹브라우저에서 입력한 걸 검증하는 경우에 사용함!
정규표현식의 종류
눈에 보이지 않는 tab, space, new line 도 인식함
공백, 탭, 새로은 라인 등도 모두 일치가 되어야 true 가 된다.
\ 역슬래쉬
- 특별한 문자열로부터 탈출해서 일반 문자로 만들자!
\특수문자 : 그냥 문자로 생각하기
점도 literal 값이 필요하면 \붙이기
[후보문자]
- [abc]== a, b, c 중에 한글자
- [^abc]는 반대로 a, b, c 가 아닌 한 글자
- -와 @ 둘중에 하나가 0번 이상이 되어야 함
후보문자 중에 하나가 0번 이상이 나오는 부분 찾기
(문자조합1|문자조합2|문자조합3)
수량자(*, +, ?)
- : 0번 이상 , 없어도 되고 여러개 있어도 됨, 눈이 오면 장사가 0친다.
- : 1번 이상, 반드시 있어야 하고 ,양의 정수는 1이상(근디 없으면 stop)
? : 없어도 되고 있으면 하나만 , 101010 이진수는 몰라 (?) -> 0번 이상이고 1 이하
수량자 예시
https://kimgura.site/student.html
javascript 정규식 pdf 확인하기
{} 반복횟수
반복횟수를 제한하거나 제어할 때 사용한다.
수량자와 {}의 관계
자주 사용하는 표현식
숫자 하나를 말하는 표현식
[0-9] == [\d]
숫자가 아닌 한글자를 표현식
[^0-9] == [^\d]==[\D] (decimal number)
특수문자가 아닌 모든 글자
[a-zA-Z0-9_] : 특수문자가 아닌 모든 글자 == [\w]
특수문자 글자인 것
[^a-zA-Z0-9_] == \W
\s는 공백을 뜻함
\s == 공백
\S == 공백이 아닌 놈
- /^[a-zA-Z0-9_]+$/; : 특수문자가 아닌 모든 글자로만 이루어져 있다.
2. 요소를 여러개 찾는 정규식
.exec()를 사용하는 방법
- 원하는 정규표현식에 g를 붙이기
- gura 를 몇 번째 인덱스에서 찾았는지?
전역에서 내가 원하는 표현을 찾고싶을 때 사용
.exec()의 다양한 표현들
왜 검증 객체를 안에 만들면 왜 안되는가?
- 안에 만들면 객체가 새롭게 계속 만들어지기에 첫번째 값만 읽어온다.
- 원래 reg.exec(source)는 한번 만들어진 객체가 연속해서 검증한다.
한 번 생성된 객체는 연속적인 검사를 수행하다가 중간에 끊기면, 처음부터 다시 검사를 시작한다.
웹프로그램에서 맞게 입력했는지 검증 프로세스
만약에 내가 입력코드를 웹브라우저에서 검증하고 싶다면?
- form 형식(입력하는 곳)의 기본 폼 검증 방법을 비활성화
- 검증할 정규표현식 생성 = (/정규표현식/ or RegExp로 객체 생성)
- 검증한 결과로 응답할 행동 나누기
e는 발생한 사건, e.target는 사건이 발생한 요소를 뜻함
* javascript 보완
- .style는 css를 제어하는 명령어
- .style.display : 요소의 css(.style)의 속성인(.display)를 변경
html의 요소의 css를 자바스크립트로 변경 시, .style 사용하고
그 안의 속성을 변경하고 싶으면 . css속성 이름 ="변경값"
왜 웹프로그 입력값 검증 시에는 ^와 $를 꼭 사용해야 하는걸까?
앞과 뒤에 뭔가가 붙을 가능성이 있기 때문에
