JS로 크롬앱만들어보기 챕터2(#2) 내용정리

◈ 기본개념 ◈

•  브라우저는 html을 통해서만 .js파일과 css파일을 읽어들일 수 있다.(.js 파일과 css파일을 html 파일에서 불러와서 여는것)

---

• 용어 정리

data type	자료형
constant	상수
variable	변수
array	배열
element	요소(배열 내부의 값)
object	객체
property	속성(객체 내부의 값)
key : value	속성명 : 속성값
method	메소드(객체의 속성이 함수 자료형일때)
function	함수
parameter	매개변수(함수를 정의할때 사용되는 변수)
argument	인자(함수가 호출될때 넘기는 변수값)

---

- property에 접근하는 방법

변수명.a;    // 'a'
변수명['a']; // 'a'

---

• Data type 

string - 문자, float-소수, integer-정수 등
boolean 값으로 true,false가 있다. <-"true" X 따옴표 붙이지 않음(not string)
또 다른 값으로는 null, undefined가 있다.
1.undefined = 변수는 선언했지만 값을 할당하지는 않음
2.null = 변수를 선언하고 null(값이 없다)을 할당할때. 즉, 정의됨
메모리 상에 자리는 존재하지만 값이 채워지지 않은 채로 있다.

---

 

• 변수선언

- 변수 선언방법

타입 변수이름 = 초기값;

 

- const a = 5;

//const = constant(상수), a = valueable(변수)

 

 - const myName = "nico";

(JS에서 상수의 단어와 단어는 일반적으로 대문자로 구분하는걸 선호함)

( *참고 python에서 변수선언은 일반적으로 my_name = "nico")

 

 

•  const / let / var 차이점 (이번강의에서는 기본적으로 const를 사용)

1. const는 변수값을 바꿀 수 없음

 참고. const a = 2; 이렇게 있으면 a = 4; 이렇게 바꾸는건 안됩니다.
하지만 배열과 같은 경우에는 내용물 안의 요소들은 변경이 가능합니다.
이게 박스로 생각하면 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 이렇게 선언을 하면 이후에 daysOfWeek = ["hi"]; 이렇게 수정하는건 불가능합니다. 왜냐하면 박스 그 통째로 바꾸려고 하기 때문입니다.
하지만 그 박스 안의 내용물들을 추가하거나 삭제할 수는 있습니다. 

 

2. let은 변수의 값을 바꿀 수 있음(새로운 변수를 선언할때만 사용하고 이후에는 let 안쓰고 변수이름만 써도 사용가능)

(ex. let a = 2;

a = 3;)

 

3. var은 초기버전 js에서 쓰던 변수 선언 방식

 

---

• 데이터 구조
  데이터 구조중 가장 기본적인건 배열
  선언 : const anything = [1, 2, "hello", false, null, undefined]; 안에 뭐든 넣어도 됨
  anything[0]; = 1
  배열에 값을 추가 하는 법 --> 배열명.push(값);
  이렇게 값을 추가하거나 변경할 수도 있음 --> 배열명[index] = 값;

---

• Object(객체)

const player = {

name : "bart",

age : 12 

}

 

console.log(player)

console.log(player.name)

player.name = "bart";

 

-> console 이라는 객체안에 log라는 속성에 접근

player 라는 객체안에 name이라는 속성에 접근

-> 접근방법

1. player["name"]

2, player.name

---

• Function(함수) : 계속 반복해서 사용할 수 있는 코드 조각, 어떤 일을 수행하고 그 결과를 알려주는 것

 - 기본 구조

Function name(){
        	}

→name 이라는 함수를 실행할 때마다 { }안의 내용이 실행됨

실행 방법 : name()

 

( ) 는 함수를 실행 할 수 있는 방법 !

ex)

console.log()

alert()

array.push()

 

참고) 객체 안에서 함수를 만들때는 plus : function(a, b) 처럼 function의 위치를 바꿔줌

const calculaor = {
	plus : function(a,b){
    	console.log(a,b);
    };

---

- return 을 쓰면 함수로 계산된 데이터를 반환시켜 데이터를 사용하고 싶은 곳에 활용할 수 있음

       * return 으로 결과 값을 반환하고 나면 함수는 종료되고 이후 코드는 작동되지 않음

const age = 33;
function calculateKrAge(ageOfForeigner){
	return ageOfForeigner + 2;
    };
    
    
const krAge = calculateKrAge(age); 
console.log(krAge);

작동순서

calculateKrAge(age); 의 age가 33이되고

calculateKrAge(ageOfForeigner) 의 ageOfForeigner가 33이 되고

ageOfForeigner + 2; 의 ageOfForeigner에 33이 들어가고

ageOfForeigner + 2; 값인 35가 return 됨

---

• argument : 함수를 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법

ex)

function sayhello(personName){
	console.log("my name is" + personName)
					}
                    
sayhello("Nico")

sayhello("Nico") → 괄호안 인자를 함수에 전달 하는 방법

function sayhello(personName) → 괄호안 인자를 함수에서 받는 방법

 

personName은 함수 { } 안에서만 쓸 수 있음 (함수 바깥에서는 사용 불가)

---

• Conditionals(조건문)

참고) typeof "data" → data의 데이터 타입을 알려줌(string인지, number인지 등)

parseInt("숫자") → 숫자부분에 들어가는 string타입의 숫자를 number 타입의 숫자로 변환해주는 함수

isNaN("인자") → 인자부분이 number인지 true , false로 알려주는 함수(NaN 이면 true)     

    * NaN : Not a Number                            // 숫자부분이나 인자부분에 값을 입력하면 함수가 작동됨

 

 

 - 기본 구조

if (condition) {
	condition == true
    } else {
    	condition == false
        }

- if에서 condition이 true일 경우 실행되고

false일 경우 else 부분이 실행 됨

 

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

if (isNaN(age)) {
	console.log("Please write a number");
} else if (age<18) {
	console.log("18살 미만은 사용할 수 없습니다");
} else if (age>=18 && age <50 ) {
	console.log("사용가능합니다");
} else if (age>=50 && age<90) {
	console.log("당신은 50살 이상입니다");
} else if (age>=90) {
	console.log("당신은 90살 이상입니다");
};

작동순서

age를 입력하면 parseInt함수가 number 타입의 숫자로 바꿔주고

isNaN(age)의 age에 저장됨

age가 number가 아니라면 isNaN이 true가 되고 Please write a number이 출력

아래는 age가 number일 때 if 부분이 false가 되고 else if 부분이 실행됨

else를 꼭 사용해야 하는건 아님

 

 

• 논리 연산자

&& : and

|| : or

== : is

!== : is not