카테고리 없음

[바닐라JS] 바닐라JS로 크롬 앱 만들기 #2.1~#2.6 2일차

Summer_berry 2021. 12. 14. 08:00

2021-12-14

 

#2.1 Basic Data Types

Javascript data type

숫자, 문자(int, float, String) 등을 입력하면 자바스크립트가 뭘 해야하는지 안다.

 

 

 

#2.2 Variables

console.log(); 안에 값을 입력하면 콘솔창에 log 또는 print한다.

안에 숫자나 문자를 입력하면 된다.

위에서 부터 아래로 읽는다.

 

 

console.log(5+2);  -> 7

console.log(5*2); -> 10

console.log(5/2); -> 2.5

여기서 5를 모두 8로 바꾸려면 하나하나 바꿔야하는데 변수를 사용하면 한번에 바꿀 수 있다.

 

변수(variable): 값을 저장하거나 유지하는 역할을 한다.

const : 바뀌지 않는 값

camelCase : 변수에 빈칸이 필요하다면 대문자로 변경한다.

 

const a = 5;

console.log(a+2);  -> 7

console.log(a*2); -> 10

console.log(a/2); -> 2.5

 

const a =5;

const b = 2;

const myName = "sori";

 

console.log(a+b);  -> 7

console.log(a*b); -> 10

console.log(a/b); -> 2.5

console.log("hello " + myName); -> hello sori

 

 

 

 

#2.3 const and let

const : constant 변경 할 수 없음

let : 변경 할 수 있음

var : variable 계속 변경 가능(쓰지말기)

대부분 const로 만들고 필요할때 let을 사용

always const, sometimes let, never var 

 

 

 

 

 

#2.4 Booleans

const amIFat = null;

let something;

 

console.log(amIFat ) - > null

console.log(something) - > undefined

 

boolean은 true, false만 가능

null : 말 그대로 아무것도 없다는 뜻. 

undefined : 변수는 존재하지만 값이 주어지지 않은 것

console.log(something) - > undefined

 

 

 

#2.5 Arrays

const mon = "mon";

const tue = "tue";

const wed= "wed";

const thu= "thu";

const fri = "fri ";

const sat = "sat";

const sun= "sun";

 

const daysOfWeek = mon + tue + wed + thu + fri + sat + sun ; 

-> montuewedthufrisatsun ; 

 

const daysOfWeek = [ mon , tue , wed , thu , fri , sat , ];  

-> [ "mon" , "tue" , "wed" , "thu" , "fri" , "sat"  ];  

 

// Get Item from Array

console.log(daysOfWeek[])

[] 안에 index를 입력하면 해당하는 것을 얻어온다.

* 컴퓨터는 0 부터 세기 때문에 5번째를 얻고 싶다면 4를 입력해야함.

 

// Add one more day to the array 배열에 값 추가하기

daysOfWeek.push("sun");

->[ "mon" , "tue" , "wed" , "thu" , "fri" , "sat", "sun"  ];  

 

 

 

#2.6 Objects

const playerName = "sori";

const playerPoints = 10000;

const playerPretty = true;

const playerFAt = "no";

-> 변수를 많이 만들어야 함

 

cosnt player = ["sori", 10000, true, "no" ];

-> 어떤 것이 뭘 의미하는지 알 수 없음

 

const player = {

    name : "sori",

    points : 10,

    fat : false,

}

 

console.log(player);

-> {name : "sori", points : 10, fat : false }

 

console.log(player.name);

console.log(player[name]);

-> sori

 

player.fat = true;

-> fat 부분이 false로 변경됨.

 

player.lasgName = "potato";

-> 추가됨