노마드코드-바닐라 JS로 크롬 앱 만들기 #2 요약

 

#2.0 Your First JS Project (11:11)

 

브라우저 개발자도구

Elements : html코드, 오른쪽창에서 css코드 확인

Console: Js코드 확인

 

#2.1 Basic Data Types (04:32)

 

숫자타입: 2+2 = 4

문자타입: "2" + "2" = 22

 

#2.2 Variables (10:39)

console.log(); #콘솔에 log 또는 print하는 일을 함

 

변수 만들기

const a = 5 #숫자 5를 변수 a에 할당

 

JS 변수명(낙타모양)

const veryLongVariableName = 0;

파이썬 변수명(뱀모양)

very_long_variable_name = 0;

 

#2.3 const and let (09:45)

new

const: constant(상수)이고, 값이 바뀔 수 없음

let:  값이 바뀔 수 있음

 

older

var: 담긴 의미가 없고, 어디서든 바꿀 수 있음

 

규칙:

대부분 const를 기본으로 사용하고, 변수를 업데이트하고 싶다면 let을 쓰되, var은 쓰지 말것.(니콜라스 피셜)

 

변수 업데이트

변수명 = 값; #변수 앞에 let을 쓰지 않음

 

#2.4 Booleans (07:22)

데이터 타입

Boolean 타입

true = 1(켜짐)

false = 0(꺼짐)

 

const a = null #변수 a에 아무것도 없는 값을 할당(비워있는 것 x)

undefined: 존재하지 않는 것을 의미, 변수는 있는데 값은 없음

 

fs) 파이썬

null => None

true => True

false => False

 

#2.5 Arrays (13:53)

데이터 구조 정리

const a =[1, 2, 3, 4]

1) 시작과 끝은 대괄호 [ ] 사용

2) 각각의 항목 사이는 ,(쉼표)로 구분

3) 항목에는 어떤 데이터 값이든 들어갈 수 있음(변수도 가능)

목적: 하나의 변수 안에 데이터의 리스트를 가지는 것

 

데이터 찾기

console.log(a[0]) # 배열 a 안에 0번째 값

리스트 값은 0부터 시작!

 

데이터 추가

a.push("값"); 변수 a의 마지막 항목에 값을 추가

 

#2.6 Objects (13:05)

const player = {

    name: "nice",

    points: 10,

    fat: true,

};

console.log(player.name); #console.log(player["name"]);과 결과는 같음

1. 객체는 { }(중괄호)를 사용

2. 프라퍼티 사이는 ,(쉼표)로 구분

3. console이라는 변수에 log라는 프라퍼티가 있는 것

4. objects는 값의 설명이 필요할 때 사용, 프라퍼티를 가진 데이터를 저장

 

 

객체의 프라퍼리 값 업데이트 및 추가

player.fat = false;

(const 변수 값이 아니라 변수의 프라퍼티 값이 변경되어서 에러가 나지 않음, player=false로 바꾸면 에러가 남)

 

#2.7 Functions part One (08:44)

function sayHello() {

    console.log("Hello!");

}

#sayHello()라는 함수를 실행하면 { } 안의 값이 실행된다.

 

#2.8 Functions part Two (12:45)

function sayHello(nameOfPerson, age) {

    console.log("Hello my name is" + nameOfPerson + " and I'm " + age);

}

 

sayHello("nico", 10);

 

함수안에  "nico"와 10과 같이 인수를 받아서 함수의 값을 실행한다.

함수 안에 인수는 함수 블록에서만 존재

 

* NaN: Not a Number(숫자가 아님)을 의미

 

객체 안에서 함수 선언

const player = {

    name: "nice",

    sayHello: function (otherPersonsName) {

        console.log("Hello " + otherPersonsName + " nice to meet you");

    },

};

 

player.sayHello("lynn");

player.sayHello("nico");

 

#2.11 Returns (15:43)

console.log(): 콘솔화면에 결과값을 표시

return: 함수에서 사용 시 결과 값을 반환해준다. 결과값으로 여러 곳에 사용 가능해짐

 

*브라우저 콘솔 창에 함수이름 검색하면 값이 나옴

*새로운 변수에 함수를 할당하면 함수의 결과 type을 가지게 됨

ex) 

const calculator = {

    plus: function ( a , b ) {

        console.log( a + b );

    },

};

const plusResult = calculator.plus(2, 3); #콘솔 창에 plusResult 검색 시 undefind가 나옴

 

* 한번 retrun 하면 함수는 끝난다. 

 

const calculator = {

    plus: function ( a , b ) {

        return (a + b);

        console.log( "hello" );

    },

};

# return 반환 후 함수는 종료되므로 hello는 출력되지 않음,

 

#2.13 Conditionals (11:35)

 const age = prompt("How old are you?");

 

    console.log(age);

 

 

#알림창에 취소를 누르면 콘솔창에 null이 나옴

 

 

console.log(typeof age); # 알림창에 age의 데이터 타입이 나옴

알림장의 기본값은 string

parseInt("15") # string을 number로 바꿔줌

 

 

#2.14 Conditionals part Two (09:02)

 

isNaN() #NaN이면 true, number이면 false

 

조건문

if (조건=true) {

//실행문

}

else {

//실행문

}

 

 

#2.15 Conditionals part Three (13:49)

 

 

&& : and 연산자, 왼쪽값과 오른쪽값이 둘다 true일 때 true로 출력, 그 외는 false

|| : or 연산자, true가 하나라도 있으면 true, 그외는 false

else와 elseif는 선택사항

 

 

===: 왼쪽값과 오른쪽값이 같다

!==:  왼쪽값과 오른쪽값이같지 않다