[국비 코딩 수업 17일차!] 8. 자바스크립트

자바스크립트로 다양한 로그인창을 만들어보기.

 

 필드셋은 아이디 패스워드의 테두리를 달아줌.

 

 

 

에드이벤트리스너 포커스를 사용하면서 id를 작성할 때 테두리를 두드러지게 표현할 수 있음.

 

 

 

html을 통해 form에 class 속성을 부여해 css와 js로 추가 값을 부여해줄 수 있음.

 

 

파라미터 값에 인풋 함수를 주어 로그인에 타이핑을 칠 때마다 값이 주어지게 만들 수 있음.

 

---

 

10) 디스패치 이벤트

 

 

반응형

모듈

---

 

- js 파일들끼리 데이터를 내보내기와 가져오기를 하는 방법.

- exprot(내보내기, import(가져오기)

 

코드 기입. <script type='module' ...>

 

 

모듈  테스트를 끌어오고 내보내는 키워드를 사용.

 

추가적으로 js사용하여 import

 

export

 

 

불러올 때는 두 가지 방법으로 할 수 있음.

 

 

 

---

정규 표현식 (Regular Expression)

 

1) 정의

문자열에서 특정 문자 조합을 찾기 위한 패턴.

 

2) 용도 

              문자 검색(Seach)

              문자 대체(Replace)

              문자 추출(Extract)

 

3) 사용법

 new RegExp('정규식', '플래그') ;

- 플래그

g : 모든 문자와 일치(global)

i : 영어 대소문자 구별하지 않고 일치 (ignore case)

m : 여러 줄 일치 (multi), 각각의 줄을 시작과 끝으로 인식.

4) API 

 

정규식.test(문자열) : 일치 여부 확인.

문자열.match(정규식): 일치하는 문자의 배열을 반환

문자열.replace(정규식, 대체문자) : 일치하는 문자를 대체 

 

5) 패턴 표현식

 

^ab(아무 문자나 올 수 있음) : 줄 (line) 시작에 있는 ab와 일치하는 것을 찾음.

ab$ : 줄(line) 끝에 있는 ab와 일치

.: 임의의 한 문자와 일치 => a.b : aab, abb, acb, adb, ..

a | b : a 또는 b와 일치

ab? : b가 없거나 b와 일치

{n} : 3ro dusthr dlfcl => a{3} : aaa

{n,} : n개 이상 연속 일치 => a{3,} : aaa, aaaa, aaaaa, ...

{n,m} : n개 이상 n 개 이하 연속 일치 => a{3, 5} : aaa, aaaa, aaaaa

+ : 1회 이상 연속 일치 ({1,}) => a + : a, aa, aaa, ....

* : 0회 이상 연속 일치 

[ab] : a 또는  b = > 강[남북]구 : 강남구, 강북구 

[a-z] : a~z 사이의 문자 구간에 일치 (영어 소문자)

[A-Z] : A ~Z (아크키코드) 사이의 문자 구간에 일치 (영어 대문자)

[0-9] : 0~9 사이 구간에 일치 (숫자)

[가-힣] 가부터 힣 사이의 문자 구간에 일치 /(한글)

[a-zA-z] a A z Z 까지 알파벳만 일치

[^ab] : ab를 제외한 모든 문자 구간에 일치.(^를 맨 앞에 사용 시) / (^ - 제외)

\w : word    비트 < 바이트 < 키로바이트 < 메가바이트 < 기가바이트. 워드는 단위를 나타냄.

word : 63개 문자 : 대소문자 52개 + 숫자 10개 + _ 에 일치 => a\wb

\W :\w에 해당하지 않는 나머지 문자에 일치.

\d : digit(숫자)에 일치. => [0-9] 

\s : space, tab 등에 일치 

\S : \s에 해당하지 않는 나머지 문자에 일치

\ : 특수문자 해제(escape)

 

(?:) : 그룹 지정.

(?=) : 앞쪽 일치

(?<=) : 뒤쪽 일치 

 

JQuery

- 정의 : 오픈 소스 기반의 자바스크립트 라이브러리 중 하나이다.

웹사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해주고, 짧고 단순한 코드로 웹페이지에 다양한 효과나 연출을 적용할 수 있다.

 

- 사용법 : 라이브러리를 다운받아 사용할 수 있음.

 

[국비 코딩 수업 18~20일차!] 9. Java 기본기