[Memo] #2 Welcome to Javascript | 바닐라 JS로 크롬 앱 만들기

💛2.0 your first js project

HTML, JS

 

🔶 브라우저의 console 이용

개발자 도구의 conlse

콘솔탭에 작업을 하면 브라우저에 영향을 미침

>alert("hi");

콘솔에서 작성하는게 귀찮음

• 콘솔은 긴코드를 작성하기 위해서 만들기 위한것이 아님
• 콘솔을 한줄씩 작성할 수 있음

→ JS 파일을 만들어야함

html은 접착제임

• css, js 파일을 html에 가져와서 사용
• css, js 파일은 브라우저에 열어도 제대로 반영이 안됨

 

참고)  ! + tab : html 탬플릿 자동완성

 

🔶 개발자 도구- 크롬

html - element tab

css - style tab

js - console

콘솔은 Js 오류를 확인할 수 있음

 

---

💛2.1 basic data types

number

int

float

js에는 type 이 있음

여러가지 타입을 같이 쓸 수 있음

int + float = float

string 타입은 “” 붙여서

• “string”

 

---

💛2.2 variables

consol.log();

xx.xx(값)

print 같은 역할을 함

쌍따움표, 작은따옴표 상관 없음

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

const (상수, constant) : 바뀌지 않는 값

JS는 카맬케이스를 씀 veryLongName

파이썬은 스네이크케이스 very_long_name

 

 

---

💛2.3 const and let

🔶 let과 const의 차이점

• const는 값이 바뀔 수 없음
• 변수값을 바꾸고 싶을때는 let으로 선언

let은 업데이트하고 싶을때 업데이트 할 수 있음

변수값을 절대로 바꾸고 싶지 않을때는 상수로 선언

코드를 통해서 작성한 사람의 의도를 알 수 있음

let을 보고는 업데이트가 될 수 있겠구나…

const를 보고는 바뀌지 않는 변수구나…

const를 기본적으로 쓰고 업데이트 하고싶은거만 (필요할 때) let을 쓰는걸 권유함

+) const/let 이전에는 var를 썼었음

• var은 원한다면 어디서든 업데이트 할 수 있었음

브라우저는 var, let, const를 이해함

 

var는 절대 안되!!! 절대 안되!!!

 

---

 

💛 2.4 boolean

🔶 true / false / null / undefined

null은 false 랑 다름

null은 말그대로 없다는 것임

undefined 도 타입임

• 아직 값이 정의되어 있지 않음

 

null은 자연적으로 발생하지 않음

null은 우리가 변수안에 값이 없다는 것을 알리기 위해 사용

null은 비어있어요를 의도적으로 표시하는 것임

+) 참고 - python

True

False

None

 

---

💛 2.5 Arrays

• 데이터를 정리하는 법
• 데이터 구조 - 우리가 어떻게 하면 가능한 최선의 방법으로 데이터를 정리할 수 있을까?

항목들을 배열에 넣고 작업 가능

array.push('')

array의 목적은 하나의 변수안에 데이터의 리스트를 가지는 것임

 

 

---

💛 2.6 Objects

const playerName = "Ralo";
const playerPoints = 2400;
const playerHandsome = false;
const playerFat = "little bit";
//player.name ??
//player.point??
//player.handsome

• 객체로 정렬을 하는게 데이터를 더 효율적으로 저장할 수 있음
• 객체가 더 잘 정돈됨

const player1 = ["Paka", "9999", false, "MolRu" ];
//player[0] == name;
//player[1] == points;

• 배열도 최선책은 아님

 

🔶 object : {}

property

object 내에서는 = (이코르) 를 사용하지 않음 대신 : (땡땡을 사용함)

// 3) object
const player3 = {
    name: "Dopa",  //property
    points: "2800",
    playerHandsome: true,
    playerFat: "not bad"
};

console.log(player3);
console.log(player3.name);
console.log(player3["points"]);
// palyer.name

 

객체를 const로 선언을 해도 수정, 프로퍼티 추가 가능!!

// object property add or update
//! 의문점!!! const(상수)는 수정을 할 수 없다고 했는디???
//! player3를 상수로 선언했는데 왜 프로퍼티 추가가되지???
//* object 안의 무언가를 수정하는 거임, 객체는 아직 동일함
//-> 에러는 상수 전체를 하나의 값으로서 업데이트 하려고 할 떄 발생하게 됨

player3.fat = false; //add
player3.points = 3000; //update
console.log(player3);

//-> 에러는 상수 전체를 하나의 값으로서 업데이트 하려고 할 때 발생하게 됨
//* 에러 예시
//* player3 = false;
//* console.log(player3); -> error 메세지 출력됨

 

 

---

 

💛 2.7 Function part 1

• 함수는 개발자가 계속 사용할 수 있는 코드라고 생각하면 됨!

//* function
// None function...
console.log("Hello my name is mori0");
console.log("Hello my name is mori1");
console.log("Hello my name is mori2");
console.log("Hello my name is mori3");
console.log("Hello my name is mori4");
console.log("Hello my name is mori5");

//* 코드의 반복을 줄여보자!!

function sayHello(test){
    console.log("Hello my name is " + test)
};
sayHello('mori7');1

 

---

 

💛2.8 Function part 2

function orderHam(menu, sizeupAv, takeOutAv){
    console.log("주문하신 "+ menu + "사이즈 "+sizeupAv +"이시고 " + takeOutAv+" 주문맞으신가요?" )
};

orderHam('와퍼','기본','포장');
orderHam('베이컨토마토디럭스', '라지', '매장');

function plus(firstNum, secondNum){
    console.log(firstNum + secondNum);
}

function divide(a, b){
    console.log(a / b);
}

plus(200, 300);
divide(35, 7);

const player4 = {
    name: 'mori',
    sayHello: function(otherPersonsName){
        console.log('Hello!'+otherPersonsName);
    }
}

console.log(player4.name);
player4.sayHello('lynn');

 

 

---

 

💛2.13 Conditionals _ 조건문

• true, false (불리언 타입 이용)

const age_ex = prompt("How old are you?"); // new window 
// js를 일시 정지 시키게 됨 <---- waiting for us

prompt()를 안쓰는 이유

• css 적용이 어려움
  • 버튼 같은 것도 변경이 어려움
• input 값을 입력하기 전까지 js를 거기서 멈추고 있음
• 오래된 방법임
• 요즘은 자신만의 html, css를 가지고 모달창을 만들어서 주는 방식으로 코드를 작성 함

 

 

타입 변경

parseInt()

string 이면 숫자와 크기 비교를 할 수 없음

• 숫자로 타입 변경을 하면 비교가 가능하게 됨(크기)

parseInt() 안에 숫자가 아닌 스트링을 넣으면 Nan이 나옴

Not a Number

 

NaN에 typeof 찍으면 number로 뜬다!!!

console.log('first'); 
console.log(age_test); // NaN
console.log('here');
console.log(typeof age_test); // number
//if age is not a number??
console.log(age_test == NaN); // false
console.log(age_test != NaN); // true
console.log(age_test == 'NaN'); // false
console.log(age_test != 'NaN'); // true

NaN 체크 isNaN() → boolean type 으로 output return

 

 

 

 

본 포스팅은 momadcoders '바닐라 JS로 크롬 앱 만들기' 강의를 들으며 메모한 글 입니다.