바닐라 JS로 크롬 앱 만들기 (#1, #2)

 

JavaScript 

JavaScript는 모든 브라우저에 내장되어 있다. 따로 설치할 필요가 없다.

(모든 브라우저들은 HTML,CSS,JS 를 이해한다.)

 

브라우저는 html을 열고 html은 CSS와 JS를 가져오는 것이다.

 

variable 

• 이름 정할 때 공백을 사용하지 않는다
• 기본적으로 const 를 사용하고 값을 변경할 필요가 있을 때 let을 사용한다.
• null 은 아무것도 없는것이고 undefined 는 값이 정의되지 않은 것이다. 

array

• [ ] 기호를 사용해서 만든다. ( ex. const nonsense = [1, 2, 'hello', false] )
• array 안 각각의 항목은 쉼표로 분리
• push() : 값 추가

object

• object != list ( 리스트는 모든 값이 같은 의미를 갖는다. )
• 중괄호를 사용해서 만든다. 
• = 를 사용하지 않고 : 를 사용한다.
• 한 개의 property 를 작성하고 콤마(,) 사용
• 다른 데이터 타입 정의 가능

const player = {
	point : 30,
	name : 'kim',
};

console.log(player.name);	
console.log(player["name"]);

player.point = 10;

player.point = 10; 처럼 constant 안의 무언가를 업데이트 하는 것은 문제 없음

하지만, player = false;  처럼 constant 전체를 하나의 값으로서 업데이트 하려고할때는 오류 발생한다. 

 

function

• 계속 반복해서 사용할 수 있는 코드조각
• 함수 선언 : function 함수이름( ){ 실행할 코드 } / 함수 실행 : 함수이름();
• argument : 함수를 실행하는 동안 어떤 정보를 함수에게 보낼 수 있는 방법

function sayHello(name, age) {
	console.log("Hello!", name, " you age : ", age);
}

sayHello("kim", 10);

 

return

• function안에서 return을 하면 function을 실행할 때 return 값 전달.(function이 function 밖과 소통하는 방법)
• console 은 그냥 보여주기 위한 것이라 코드에서는 결과값을 알 수 없다.
• function을 variable에 할당하면, 그 variable은 function의 결과 type을 가진다.
• return 을 하면 function 은 종료

 

prompt 

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

const age = parseInt( prompt('how old are you?') );

사용자에게 메세지를 보여주고 값을 입력하도록 하는 창이다.

prompt 을 사용한 창

 

parseInt : String 타입을 number 타입으로 변환

NaN:  숫자가 아닐때 출력되는 오류(Not a Number) 

=	value 할당
===	값이 일치한지 확인

 

 

' 노마드 코드 - 바닐라 JS로 크롬 앱 만들기' 공부하면서 정리한 내용입니다.