노마드 코더 바닐라JS로 크롬 앱 만들기 복습용 정리(1)

 

- 자바스크립트를 배우면 웹, 앱, 게임, 머신러닝 등 다양한 개발을 할 수 있다. 이제는 백엔드도 구현할 수 있음. 

 

- 자바스크립트를 다루려면, 브라우저의 console을 사용하면 된다.

  자바스크립트는 브라우저에 이미 설치되어 있기 때문.

  하지만 긴 코드를 다루기에는 불편하므로 파일을 만들어 VSCode를 이용해 작성할 수도 있다.

 

- 물론, 자바스크립트 파일이나 CSS 파일을 브라우저에서 직접 연다고 실행되는 것은 아니다.

  브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져온다.

 

  <script src="app.js"></script>

 

  이런 식으로 HTML 파일에 자바스크립트 파일을 연결해 주면 된다.

  참고) 일반적으로 자바스크립트 파일은 맨 위에서 가져오지 않는다.

 

---

 

- console.log(); 

  콘솔 출력 코드.

 

- 데이터 타입 (프로그래밍 언어가 알아서 이해함)

  1. 숫자   

  2. "문자(string)"

  3. boolean (true / false)   

  4. null : 아무것도 없다. 비어있다. / undefined : variable이 메모리에 만들어졌지만 값이 없다.

 

- variable

  1) const(상수)를 이용해 숫자를 한꺼번에 바꿀 수 있다.

      참고) 자바스크립트 세상에서는 단어에 공백이 필요하다면 일반적으로 다음 단어의 첫 문자를 대문자로 쓴다.

               (카멜 케이스)

               파이썬에선 일반적으로 _사용.(스네이크 케이스)

  2) let 은 const와 다르게 값이 바뀔 수 있다.

  즉, 이런 식으로 업데이트할 수 있음. 두 가지 방식의 차이를 알면 코드의 의도를 이해할 수 있게 된다.

  (이 밖에도 과거에는 var을 사용했지만 지금은 잘 안 씀.)

  참고) 많은 사람들이 let과 const 중 const를 기본으로 사용하는 경향이 있음.

 

 

- 데이터의 구조와 정리

   

  → 자료를 나열할 땐 array [ , ] 를 사용한다.

 

array 에서 금요일 받아오기

※ 컴퓨터는 0부터 숫자를 센다!

 

push 를 이용하여 자료 추가하기

 

  → object { }를 이용하면 property를 가진 데이터(property : value)를 저장하고, 자료를 호출할 수도 있다. 

       (호출 예시 : console.log(player.name); 또는 console.log(player["name"]); )

  이런 식으로 사용하며, object에 뭔가를 추가하거나 업데이트하려면

  이렇게 뒤에 코드를 추가해 주면 된다.

  ( + 만약 기존 player point에 15점을 더하고 싶다면 player.point = player.point+15; 를 추가하면 된다.)

 

  설명이 필요 없는 자료들은 array를 이용하고, 설명이 필요한 자료들은 object를 이용한다.

 

---

 

- function

  : 반복해서 사용할 수 있는 코드 조각. 어떤 코드를 캡슐화해서 실행을 여러 번 할 수 있게 해줌.

 

    데이터를 function에 보내는 방법 ↓↓↓

 

계산기 만들기

 

- return

이해가 잘 안됨. 다시 확인★ →22.12.23 확인 완료!

아까 만든 계산기 return으로 바꾸기

  value를 얻으려면 return을 사용! 믹서기에서 망고 주스를 꺼내는 것.

  return 하는 순간 function 은 종료됨.

 

 

- conditional(조건문) 

  : if(condition){

        /// condition === true

    } else {

        // condition === false

    } 

  → condition 은 boolean 이어야 함.

       esle if 를 이용하면 한 가지 condition을 더 사용할 수 있음.

 

음주 나이 측정기

  prompt : 사용자에게 창을 띄울 수 있도록 해줌. CSS 적용이 불가능한 오래된 방식

  참고) alert : 경고창 띄우기

 

  typeof : value의 type 보기

  string type을 number type로 바꾸려면 parseInt 사용.

예시

  isNaN : 우리가 보낸 variable이 NaN인지 아닌지 알려줌.( NaN : Not a Number )

 

  && : AND operator(연산자), 즉 모두 true여야 true.

  || : OR operator(연산자), 즉 하나라도 true면 true.

  === : 같은지 확인.  cf) = : value를 할당하는 것.

  !== : 같지 않은지 확인.

 

  참고) 자바스크립트는 코드를 위에서 아래로 읽음. 그러므로 순서가 중요함.

            그리고 function은 내부에서부터 외부로 실행됨.(작은 괄호 → 큰 괄호)