js 복습 21.03.19

in Dev on Java Script


HTML에 JS 적용하기 : body 태그 마지막에
<script src="myScriptFile.js"></script>

컴퓨터는 위에서부터 아래로 Line 1부터 하나씩 차근차근 작동
기본적으로 script 태그를 만나면, 브라우저는 HTML 태그를 해석하는 것을 잠시 멈추고, JavaScript 파일을 불러와서 실행. script 태그 등장과 동시에 자바 스크립트가 실행. 보통 body 태그 마지막에 첨부.
  • head 태그 안쪽에 script를 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="myScriptFile.js"></script>
</head>
<body>
  <div id="msg">Hello JavaScript!</div>
</body>
</html>
  • app.js
console.log('Hello JS!');
// Hello JS!

let msgElement = document.querySelector('#msg');
console.log(msgElement);
// null
// body의 div#msg를 불러오기전에 JS가 실행되므로 찾을 수 없다(null).
  • body 태그 끝에 삽입하는 경우 :
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="msg">Hello JavaScript!</div>

  <script src="myScriptFile.js"></script>
</body>
</html>
  • app.js
console.log('Hello JS!');

let msgElement = document.querySelector('#msg');
console.log(msgElement);
// <div id='msg'>Hello JS!</div>

CSS 변수 설정 방법

변수 사용 방법 : 속성에 대한 값 대신 var(–변수이름)으로 적용.

:root {
  --invalid-text-color: rgb(177, 59, 69);
  --invalid-border-color: rgba(177, 59, 69, .2);
  --invalid-background-color: rgba(255, 192, 203, 0.493);
  --valid-text-color: rgb(51, 173, 51);
  --minimum-width: 600px;
}
// :root 아래에 --변수이름로 시작되는 항목(invalid, valid 등)이 변수입니다.
  • css root
:root {
    --div-main-color: grey;
    /* 변수를 root에 있는 속성으로 지정. */
}

div {
    color: var(--div-main-color);
    /* 변수 설정 방법 : var(--변수명) */
}

정규표현식 : 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴 (JS에서 정규 표현식 또한 객체)

- ^x : 문자열의 시작을 표현하며 x 문자로 시작됨을 의미
- x$ : 문자열의 종료를 표현하며 x 문자로 종료됨을 의미
- .x : 임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미
- x+ : 반복을 표현하며 x 문자가 한번 이상 반복됨을 의미
- x? : 존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미
- x* : 반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미
- x|y : or 를 표현하며 x 또는 y 문자가 존재함을 의미
- (x) : 그룹을 표현하며 x 를 그룹으로 처리함을 의미.
- (x)(y) : 그룹들의 집합을 표현하며 앞에서 부터 순서대로 번호를 부여하여 관리하고 x, y 는 각 그룹의 데이터로 관리.
- (x)(?:y) : 그룹들의 집합에 대한 예외를 표현하며 그룹 집합으로 관리되지 않음을 의미
- x{n} : 반복을 표현하며 x 문자가 n번 반복됨을 의미
- x{n,} : 반복을 표현하며 x 문자가 n번 이상 반복됨을 의미
- x{n,m} : 반복을 표현하며 x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미
  • [] 는 내부에 지정된 문자열의 범위 중에서 한 문자만을 선택하다는 특수한 의미
[xy] : 문자 선택을 표현하며 x 와 y 중에 하나를 의미.
[^xy] : not을 표현하며  x 및 y 를 제외한 문자를 의미.
[x-z] : range를 표현하며 x ~ z 사이의 문자를 의미.
\^ : escape를 표현하며 ^ 를 문자로 사용함을 의미한.
\b : word boundary를 표현하며 문자와 공백사이의 문자를 의미.
\B : non word boundary를 표현하며 문자와 공백사이가 아닌 문자를 의미.
\d : digit 를 표현하며 숫자를 의미
\D : non digit 를 표현하며 숫자가 아닌 것을 의미.
\s : space 를 표현하며 공백 문자를 의미
\S : non space를 표현하며 공백 문자가 아닌 것을 의미.
\t : tab 을 표현하며 탭 문자를 의미
\v : vertical tab을 표현하며 수직 탭(?) 문자를 의미.
\w : word 를 표현하며 알파벳 + 숫자 + _ 중의 한 문자임을 의미.
\W : non word를 표현하며 알파벳 + 숫자 + _ 가 아닌 문자를 의미.
  • flag : Flag를 사용하지 않으면 문자열에 대해서 검색을 한번만 처리하고 종료
g : Global 의 표현하며 대상 문자열내에 모든 패턴들을 검색하는 것을 의미. 

i : Ignore case 를 표현하며 대상 문자열에 대해서 대/소문자 구분 없앰.

m : Multi line을 표현하며 대상 문자열이 다중 라인의 문자열인 경우에도 검색하는 것을 의미

출처: https://hamait.tistory.com/342 [HAMA 블로그]

  • 사용 방법 1 : 정규식 리터럴(슬래쉬”/”로 감싸는 패턴)을 사용
/정규 표현식/플래그
  • 예시
/[0-9]/g
// 전체에서 0~9 사이에 아무 숫자 '하나' 찾음 

/[to]/g
// 전체에서 t 혹은 o를 모두 찾음 

/filter/g
// 전체에서 각 문자(f,i,l,t,e,r)를 따로 찾는게 아니라 'filter' 라는 단어에 매칭되는것을 찾음 

/\b(?:(?!to)\w)+\b/g
// 전체에서 'to' 라는 단어를 빼고 다른 단어 매칭 /  확인결과 "Tutorial" 도 제외됨. 

\b(?!\bto\b)\w+\b
//전체에서 'to' 라는 단어를 빼고 다른 단어 매칭 /  확인결과 "Tutorial" 는 제외 안됨.  이게 더 정확하다고 볼수있을듯.
  • 자주 사용 되는 예시
// 이메일 
 /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

// '시작을'  0~9 사이 숫자 or a-z A-Z 알바펫 아무거나로 시작하고  
// /  중간에 - _  . 같은 문자가 있을수도 있고 없을수도 있으며 / 
// 그 후에 0~9 사이 숫자 or a-z A-Z 알바펫중 하나의 문자가 없거나 연달아 나올수 있으며 / 
//  @ 가 반드시 존재하고  / 
// 0-9a-zA-Z 여기서 하나가 있고  /  
// 중간에 - _  . 같은 문자가 있을수도 있고 없을수도 있으며 / 
// 그 후에 0~9 사이 숫자 or a-z A-Z 알바펫중 하나의 
// 문자가 없거나 연달아 나올수 있으며 /  반드시  .  이 존재하고  
// / [a-zA-Z] 의 문자가 2개나 3개가 존재 /   이 모든것은 대소문자 구분안함 

//전화번호 
 /^\d{3}-\d{3,4}-\d{4}$/

// 시작을 숫자 3개로하며 /   중간에 하이픈 -  하나 존재 / 
//  숫자가 3~4개 존재하며 /  하이픈 하나 존재 /  숫자 4개로 끝남 

// 핸드폰 번호 
 /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/

// 시작을 숫자 01로 시작하며 그 후에 0,1,6,7,8,9 중에 하나가 나올수도 있으며 /  
// 하이픈 - 하나 존재할수도 있으며 /  숫자 3~4개 이어지고 / 
// 또 하이픈 - 하나 존재할수도 있으며 /  숫자 4개가 이어짐 

// URL
URL - ^(https?):\/\/([^:\/\s]+)(:([^\/]*))?((\/[^\s/\/]+)*)?\/?([^#\s\?]*)(\?([^#\s]*))?(#(\w*))?$
  • 사용 방법 2 : RegExp 객체의 생성자 함수를 호출
let re = new RegExp("ab+c");

생성자 함수 :

  • 특징 : 함수 이름의 첫 글자는 대문자로 시작. 반드시 “new” 연산자를 붙여 실행.
function <생성자 명>() {
    this.프로퍼티
// "this.프로퍼티"를 통해서 프로퍼티 명시만 가능
}

// new 키워드를 통해 생성자 함수를 호출
let 생성자 = new 생성자명();

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

console.log(user.name); // Jack
console.log(user.isAdmin); // false

위 코드의 작동 방식

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

let user = new User("Jack") 
// 위 코드는 아래 코드와 같다. 
// let user = {
//   name: "Jack",
//   isAdmin: false
// };
  • 사용 사례 : 여러개의 동일한 property를 가지는 Object를 생성하기 위해서 필요 = 재사용할 수 있는 객체 생성 코드를 구현.
let user1 = new User("CREAMer") 

// user1 = { name: "CREAMer", isAdmin: "false" }

let user2 = new User("DREAMer")

// user1 = { name: "DREAMer", isAdmin: "false" }



© 2020.11. by creamer

Powered by CREAMer