<TIL>HTML CSS 자바스크립트 #2

2022-03-04 TIL

💬#2.0 Your First JS Project

자바스크립트는 브라우저에 이미 있다.

자바스크립트와 css 파일을 열려면 html파일을 통해서 열어야한다.
브라우저는 HTML을 열고 HTML이 CSS와 JS를 가져옴. HTML이 접착제 역할.

💫#2.1 Basic Data Types

JS에는 데이터 타입이라는 게 있다.
숫자 : integer / float
문자(String) : (입력하는 방법 -> " HELLO " )

🔰#2.2 Variables

console.log(값);

• 콘솔에 이 값을 출력한다.
• 자바스크립트는 위에서 아래로 읽는다.
• 길이가 긴 변수를 선언할 때 → Camelcase

1억개의 코드가 있다고 생각했을때 변수를 사용해서
바꾸는게 더 게으를 수 있다.

🔘#2.3 const and let

const variableName = 5; 
let variableName = 4;
var variableName = 3;

• const는 값을 업데이트 할 수 없다.
• const나 let은 처음 변수를 생성할 때만 써준다.
자주 const를 쓰고 가끔 let을 쓰며 var는 쓰지 않는다.

💥#2.4 Booleans

true ? false ?

• null : 아무 것도 없다.(값이 없다.) != false
빈게 아니라 아무것도 없는 걸로 채워진 것!

• undefined : 정의 되지 않음.

❤#2.5 Arrays

데이터를 가능한 잘 저장하기 위한 방법이 뭘까?

array(배열) : 데이터로 이뤄진 리스트

console.log(daysOfWeek[0]) 
-> "mon"

push를 사용해서 추가할 수 있다.

#2.6 Objects

이런 데이터를 더 잘 정리하려면?
변수 형태는 적절하지 않아 보인다.

array 형태도 적절하지 않아보임. property를 보여주지 않음.

object를 만들어보자 !!

const player = {
	name:"nico",
    points: 10,
}

console.log(player.name);이 가능해진다.
console은 object log는 그 어딘가의 특성.

이렇게도 찾을 수 있다. 업데이트도 할 수 있다.

const는 수정할 수 없지만. 여기서 하는건 object를 바꾸는거라 가능하다. const 에러는 전체값을 업데이트 하려할때 발생한다.

추가도 가능하다.

💙#2.7 Functions part One

function : 반복해서 쓸 수 있는 코드 조각

🤍#2.8 Functions part Two

💲#2.11 Returns

이 상태에선 undefined가 뜬다.
뭔가를 하긴 했는데 값이 안나온다.
이럴땐 return을 기억해야한다.

우리는 때때로 console.log나 alert말고
코드의 값을 코드로 나타내고 싶을 때가 있다.
그럴 때 return을 써서 그 값으로 대체 시켜 주면된다.

💤#2.13 Conditionals

키워드는 IF다 !

promt는 사용자에게 창을 띄울 수 있도록 해준다.

이렇게. 하지만 promt 함수는 물어볼 때
자바스크립트를 정지 시키기 때문에 잘 쓰지 않는 옛날 함수다.

• typeof라는 키워드를 쓰면 타입을 알 수 있다.

prompt 안의 값은 문자인데 number로 바꾸고 싶으면 ?

• parseInt()함수를 쓰면 된다.
• NaN = Not a Number (숫자가 아님)

💦#2.14 Conditionals part Two

• isNaN() 함수 : not a number인지 불로 알려준다. false면 숫자 true면 숫자 아님.

15 -> false (숫자라는 뜻)

if(조건 = boolean) {
조건이 참일때
else{ 조건이 참이 아닐 때
}
}

이런식으로 만들 수 있다.

➰#2.15 Conditionals part Three

if(조건 = boolean) {
조건이 참일때; }
else if(다른 조건) { 다른 조건이 참일 때;
}
else {그 밖일때 ;
}

&& :and
|| :or