노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 듣고 내용을 정리합니다.
🦖 브라우저에 내장되어있는 자바스크립트
자바스크립트를 바로 다루고 싶다면 브라우저의 검사(insepct)의 console을 사용하면 된다. 자바스크립트는 브라우저에 이미 설치되어있기 때문에 그냥 console에서 사용하면 된다.
자바스크립트는 항상 브라우저에 상주하며 내가 어떤 코드를 입력하기를 기다리고 있다.
그러나 콘솔에서는 한줄만 작성할 수 있고 긴 프로그램 작성에는 유용하지 않기 때문에 자바스크립트 파일을 만드는 것이다.
🦖 브라우저와 CSS, Javascript
CSS와 JS 파일 만들고 코드를 작성한 후 해당 파일을 브라우저에서 열면, 브라우저는 해당 코드를 실행하지 않고 그냥 작성한 코드를 보여주기만 해서 우리가 원하는 결과가 나오지 않는다. 이들은 파일을 연다고 실행되지 않는다.
이것은 HTML이 접착제 역할을 함으로써 해결할 수 있다. 즉 CSS와 JS는 HTML 없이는 우리가 원하는대로 동작될 수 없다는 것이다.
브라우저는 HTML을 열어서 실행하고, HTML 파일이 CSS와 JS를 가져오는 것이다.
🦖 Javascript 파일을 HTML에서 가져오기
일반적으로, 자바스크립트 파일은 맨 위에서 가져오지 않고 주로 끝에서 한다.
HTML body 태그의 끝에서 아래와 같이 적으면 된다.
<body>
<script src="파일명.js"></script>
</body>🦖 브라우저의 검사(insect)에서 HTMl, CSS, JS 확인하기
HTML은 Elements의 왼쪽 창에서, CSS는 오른쪽 창에서 확인할 수 있다.
JS는 Console 창에서 확인할 수 있다.
🦖 콘솔에게 메세지를 보내는 JS 코드
console.log(545454);콘솔창은 545454를 출력한다. 즉 콘솔에 log 또는 print를 하는 것이다.
🦖 변수 선언
JS에서는 변수 선언을 위해 const(상수), let을 사용한다.
const a = 5;
let b = 6;
console.log(a+2);
console.log(b*2);const는 값이 바뀔 수 없다. 즉 값을 절대 업데이트 할 수 없다.
반면 let은 값이 바뀔 수 있다.
둘중 더 디폴트로 사용하는 것은 const고 변수를 업데이트 해야하는 경우에만 let을 사용함
과거에는 const, let은 존재하지 않았고 var가 있었는데 var는 어떠한 규칙도 가지고 있기 않다. 그렇기 때문에 이것은 상수에 대한 보호가 안 되어서 잘 사용하지 않는다. var은 절대 쓰지 말 것!
🦖 자바스크립트 변수명 컨벤션
카멜케이스로 작성한다.
const veryLongVariableName = 0;추가) 파이썬에서는 스네이크케이스로 작성한다.
very_long_variable_name = 0🦖 문자열 작성
자바스크립트 문자열 작성시 큰따옴표나 작은 따옴표 무엇을 쓰든 상관없다.
🦖 boolean 데이터 타입
true, false로 나뉘어져있음.
const amIFat = true;참고) python은 true 대신 True, false 대신 False이다.
🦖 null 데이터 타입
아무것도 없음을 의미. 그 변수에 아무것도 없음을 의미한다.
const amIFat = null;주의! false랑 헷갈리지 말 것. false는 false라는 값이 존재하는 것임.
null은 절대 자연적으로 발생하지 않는다. null은 우리가 변수 안에 어떤 것이 없다는 것을 확실하게 해주기 위해 사용하는 것이다. 자바스크립트에게 여기에는 값이 "없다"는 것을 알려주는 것이다.
참고) python은 null 대신 None이다.
🦖 undefined 데이터 타입
우리는 보통 variable을 만들면 값을 주지만, 만약 변수에 값을 주지 않고 콘솔 창에 출력하면 undefined라고 출력이 된다. 정의되어 있지 않다는 것이다.
let something;
console.log(someting);🦖 null vs. undefined
undefined는 변수가 존재하는데, 값이 주어지지 않은 것이고
null은 변수가 존재하고, 값이 주어졌는데 그 값이 "비어있음"인 것이다.
🦖 배열(array)
데이터로 이루어진 리스트.
꼭 요소들의 데이터 타입이 동일하지 않아도 됨.
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"];
const nonsense = [1, 2, "hello", false, null, true, undefined];
console.log(daysOfWeek, nonsense);
// 값에 접근하기
console.log(daysOfWeek[2]);
// 값 추가하기
daysOfWeek.push("sun");만약 인덱스 범위를 넘어선 인덱스 값을 출력하면 undefined라고 나온다.
🦖 객체(Objects)
// 객체 생성
const player = {
name: "nico",
points: 10,
fat: true,
}
// 객체 통으로 출력
console.log(player);
// 특정 속성값 출력
console.log(player.name);
console.log(player["name"]); //동일
// 속성값 업데이트
player.fat = false;
// 속성값 추가
player.lastName = "potato";
player가 object이고, player object 안의 name, points, fat이 property이다.
object 안에서는 = 대신에 : 를 사용한다.
그리고 하나의 property를 작성하고 다른 property를 작성하기 위해서는 ,(콤마)를 쓴다.
object의 property에 접근하기 위해서는 object명.property명 을 쓰면 된다.
이를 통해 console.log 또한 console이라는 object의 log라는 property를 사용하고 있음을 알 수 있다.
속성값을 업데이트하는 코드에서, 의문이 생길 수 있다. player 객체는 const이고 const는 수정할 수 없다고 했는데 어떻게 업데이트가 가능한 것일까?
사실 우리가 하는 것은 객체의 "속성값"을 업데이트하는 것이지 객체 자체를 업데이트하는 것은 아니기 때문에 오류가 생기지 않는다.
아래와 같이 객체 자체를 수정할 때는 오류가 발생한다.
player = false;const는 원래 object 타입이었는데 boolean으로 바꾸려고 하는 경우이다.
🦖 리스트(배열) vs. 객체
리스트는 모든 값이 같은 의미를 가진다. 만약 내가 한 주의 요일 리스트를 가진다면 그 리스트에 있는 모든 값들이 요일이라는 의미를 지닌다.
하지만 object(객체)에서는 객체 이름만으로는 무엇인지 알 수 없는 property들도 있다. 그래서 player.name, player.points, player.fat과 같이 속성이름으로 접근하는 것이다.
🦖 함수(function)
함수의 목적은 여러가지 일을 같은 코드로 하기 위해 사용한다.
function 함수명(변수명1, 변수명2, ...) {
return 반환값;
}
const 함수반환값받을변수명 = 함수명(인수명1, 인수명2, ...);
함수가 받는 변수의 자료형 써줄 필요 없이 그냥 변수명만 써주면 됨.
만약 함수가 받는 변수는 1개로 해뒀는데 인수를 여러개 보낸다면 첫 번째 인수만 함수가 받는다.
함수가 받는 변수명은 함수 안에서만 사용 가능하다. 함수 밖에서 사용하면 정의되지 않은 변수명으로 인식된다.
🦖 Object 안에 함수 넣기
const player = {
name: "nico",
sayHello: function (otherPersonsName) {
console.log("hello " + otherPersonsName + " nice to meet you");
},
};
console.log(player.name);
player.sayHello("lynn");
🦖 NaN 자료형
Not a Number
🦖 prompt 함수
사용자에게 창을 띄울 수 있게 해주는 함수이다.
prompt는 2개의 argument(인자)를 받는데 하나는 string형인 message(문자), 다른 하나는 default이다.
사용자에게 message를 보여주고 값을 넣으라고 말해준다.
하지만 prompt는 사용자가 값을 입력할 때까지 javascript 코드를 일시정지 시킨다.
또한 message가 별로 안 예쁘고 CSS를 적용시킬 수 없기 때문에 잘 사용하지 않는다.
사용자가 입력한 message를 반환해준다.
🦖 변수의 자료형을 알려주는 코드
const age = 15;
console.log(typeof age);🦖 string을 number로 바꿔주는 함수 parseInt
const str = "15";
console.log(typeof parseInt(str)); // string이 아닌 number가 출력된다.parseInt는 "123"과 같은 숫자로 된 문자열만 숫자로 바꿔줄 수 있다. 그래서 만약 "hello" 같은 문자로 된 문자열을 처리하면 결과값으로 NaN(Not a Number)을 반환한다.
🦖 NaN인지 아닌지 확인하는 함수 isNaN
boolean(true/false)을 return하여 number인지 아닌지 알려준다.
const age = parseInt(prompt("How old are you?"));
console.log(isNaN(age));🦖 연산자 ===와 !==
==은 값이 같은지 비교하는 연산자이고, ===은 값과 유형까지도 비교하는 연산자이다.
주로 ===을 사용하는 것을 추천한다.
not도 마찬가지이다. !=은 값만 비교, !==은 값과 유형까지도 비교한다.
🦖 조건문
if(조건) {
//조건문이 true일 경우 이 코드블록 실행
} else {
//조건문이 false일 경우 이 코드블록 실행
}if(조건1) {
// 조건1이 true일 경우 이 코드블록 실행
} else if(조건2) {
// 조건1이 false이고 조건2가 true일 경우 이 코드블록 실행
}if에 들어가는 조건(condition)은 boolean으로 판별 가능해야 한다.
예를 들어보자.
const age = parseInt(prompt("How old are you?"));
if (isNaN(age) || age < 0) {
console.log("Please write a real positive number");
} else if (age < 18) {
console.log("You are too young.");
} else if (age <= 50) {
console.log("You can drink");
} else if (age <= 80) {
console.log("You should exercise");
} else {
console.log("You can do whatever you want.");
}
