노마드코더 바닐라JS로 크롬앱 만들기 1

딩쓰·2023년 3월 26일

노마드코더 바닐라JS로 크롬앱 만들기

목록 보기
1/3
post-thumbnail

#1.0 ~ 1.6

자바스크립트는 모든 브라우저에 내장되어 있어서 설치가 필요없으며, 프론트엔드 개발자가 사용할수 있는 유일한 프로그래밍 언어

#2.0 ~ 2.16

2.0 Your First JS Project

  • 브라우저는 HTML을 열고, HTML은 CSS와 자바스크립트를 가져옴.
  • 브라우저가 css와 js를 가져오는 것이 아님. html에서 불러오는 것임
  • 브라우저가 실행시켜야 할 css 와 js 가 있다면 css 엔진과 javascript 엔진을 돌림.
  • <link:css> -> html에서 css 불러오기(코드 바로 작성됨)

2.1 Basic Data Types

데이터 타입의 종류

1. Number
1) 정수(Integer) // 1, 2, 3, 4 ...
2) 소수(Float) // 1.555, 2.545345 ...

  • Number타입은 서로 연산기호를 이용하여 계산할 수 있음

2. String : 처음부터 끝까지 문자(Text)로 구성되어 있다는 의미

"Hello," + " My name is Nico" ->Hello, My name is Nico

  • String타입은 ""을 이용하여 입력하고 String타입의 합은 두개를 합쳐서 출력

2.3 const and let

변수만들때 let, const, var차이

let : 재선언 금지, 재할당 가능
const: 재선언 금지, 재할당 금지
var: 재선언 가능, 재할당 가능

let a = b;
let a = c;
//재선언 금지

let a = b;
a = c;
//재할당은 가능

const a = b;
const a = c;
//재선언 금지

const a = b;
a = c;
//재할당 금지

var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

=> const 와 let 을 사용하면 코드에서 업데이트가 되는 값인지 아닌지 코드에서 의미 파악 가능.

2.4 Booleans

data type에는 숫자,문자 말고도 boolean 값으로 true,false가 있음.
또 다른 값으로는 null, undefined가 있음.

  1. null: 변수에 null(값이 없다)이 할당됨. 즉, 정의됨
  2. undefined: let something; 처럼 변수에 값을 지정하지 않으면 메모리 상에 자리는 존재하지만 값이 채워지지 않은 채로 있음.

2.5 Arrays (배열)

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]
daysOfWeek.push("sun");

const는 daysOfWeek = ["sun"] 이런식으로 변수 자체에는 재할당이 불가능하지만 내용물은 언제든지 변경 가능

2.6 Objects (객체)

설명이 필요하지 않은 데이터 리스트들은 array로,
설명이 필요한 정보가 담긴 데이터 리스트들은 object로!

object는 property를 가진 데이터를 저장해주며, { } 를 사용함.

const player = {
name : "nico",
color : red,
fat : true,
};

property를 불러오는 방법은 2가지가 있음.

  1. console.log(player.name); => "nico"
  2. console.log(player["name"]); => "nico"

또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능함.

const player = {
name : "nico",
color : red,
fat : true,
};

console.log(player);
player.color = "blue";
console.log(player.color); => "blue"

2.7 Functions part One

function은 계속 반복해서 사용할 수 있는 코드 조각. 코드를 캡슐화해서 실행을 여러번 할 수 있게 해줌.

function sayHello () {
console.log("Hello!");
};

소괄호 안에 작성하는 것은 실행버튼을 누를 때마다 발생함.

sayHello(); 이렇게 쳐서 실행할 수 있음.

argument(인수)는 function을 실행하는 도안 정보를 function에게 보낼 수 있는 방법으로, 소괄호 안에 위치함.

2.8 Functions part Two

함수의 괄호 안의 매개변수에서 아규먼트를 받아들일 수 있음.

function sayHello(nameOfPerson) {
console.log(nameOfPerson);
}

sayHello("nico")
sayHello("dal")
sayHello("lynn") // nameOfPerson은 "nico" "dal" "lynn" 을 받았다고 생각하면 됨.

argument는 하나만 받을 수 있는게 아니라 여러개를 받을 수 있음.

function sayHello(nameOfPerson , age) {
console.log(nameOfPerson);
}

sayHello("nico" , 12);
sayHello("dal" , 20);
sayHello("lynn" , 23); // sayHello function의 매개변수 2개는 아래 2개의 argument를 받는 중임.

function의 값은 function 안에서만 존재함.

object 안에서 매개변수가 아규먼트를 받는 방식

const player = {
 name : function(Name) {
 console.log("Your Name is " + Name + " 입니다.")
 },
 sayHello : function(Age) {
 console.log("Your age is " + Age + " 입니다.")
 }
}

player.sayHello(14)
player.name("james")

2.9 Recap

console.log() 와 player.name() 은 비슷한 형태. 즉 console은 object라는 것.

function plus(a, b) { ... } 의 a, b는 data를 받으면 대체되는 place holer(자리 표시자)임. 매개변수는 function body에서만 사용할 수 있음.

const calculator = {
  add: function (a, b) {
    console.log(a, b);
  };
};

calculator.add(3, 1);

2.11 Returns

return은 function이 function의 밖과 소통하는 방법임. return을 사용하면, 함수에서의 결과값을 함수 밖에서 받아서 사용할 수 있음. 이 때 기억할 점은 return을 하면 함수의 동작은 종료된다는 것.

const calculator = {
    plus: function(a,b){
    	console.log("hello");	// 실행됨
        return a+b;
        console.log("byebye");	// 실행되지 않음
    },
    minus: function(a,b){
        return a-b;
    },
    divide: function(a,b){
        return a/b;
    },
    powerOf: function(a,b){
        return a**b;
    }
};

const plusResult = calculator.plus(5,5);
const minusResult = calculator.minus(plusResult,5);
const divideResult = calculator.divide(190,minusResult);
const powerOfResult = calculator.powerOf(divideResult,divideResult);

console.log(powerOfResult);

2.12 Recap

한번 return을 하면 해당 함수는 종료됨. 그렇기 때문에 return 후의 코드는 작동되지 않음.(return 앞에 작업을 한다면 출력됨.)

return은 말 자체로 다시 돌려준다라는 의미로 해당 함수의 변수값을 지정해주면 해당code를 안에서 실행해서 그 결과값을 해당 함수의 변수값을 선언한 변수한테 돌려주는 것임.

2.13 Conditionals

prompt();라는 함수는 사용자에게 창을 띄어 값을 받음.
prompt();를 사용하면 답을 할때까지 코드의 실행을 멈추고, 매우 오래된 방법임. css로 바꾸지도 못해서 잘 사용하지 않음.

const age = prompt("How old ar you?"); 

console.log(typeof age);

typeof라는 키워드를 쓰면 type를 볼 수 있는데, prompt();에서 숫자를 입력해도 string이라고 뜸. string이 디폴트이기 때문.

한 type로 받아서 다른 type로 바꾸는 작업을 해야함. "15" => 15
string -> number로 변환해주는 함수 parseInt();
console.log(typeof "15", typeof parseInt("15")); => string number
이렇게 숫자로 변환이 되야 비교를 할 수 있음. 참고로 "숫자"가 아닌게 입력되면 변환이 안됨. NaN(not a number)

const age = parseInt(prompt("how old are you?"));
console.log(age);

2.14 Conditionals part Two

isNaN 은 무언가가 NaN인지 판별하는 방법임.

const age= parseInt(prompt (“How old are you?”));
console.log(isNaN(age));

숫자 입력하면 false
글자 입력하면 true

if(condition){
실행코드=true ---실행
실행코드=false ----다음 else 값 실행
} else{

}

condition은 boolean으로 판별가능해야 함. (true , false)

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

if(isNaN(age)){
    console.log("Please write a number");
} else {
    console.log("Thank you for writing your age.");
}

2.15 Conditionals part Three

true || true === true
false || true === true
true || false === true
false || false === false


true && true === true
false && true === false
true && false === false
false && false === false

댓글:
다른 언어에서 == 을 쓰다가 === 를 사용하여 찾아보니
JS에서만 사용하는 연산자이며
== 은 값만을 비교하고
=== 은 유형도 비교하여 === 를 주로 사용하는걸 추천한다고 함.
ex)

0 == false ---> true
0 === false ---> false

3. JAVASCRIPT ON THE BROWSER

3.0 The Document Object

  • js를 사용하는 이유는 HTML과 상호작용하기 위해서. HTML의 Element들을 js를 통해 변경하고, 읽을 수 있음. console에 document를 입력하면 작성한 HTML을 가져올 수 있고, document는 브라우저에 존재하는 object임.
  • console에 console.dir(document)를 호출해 보면, document.title이 HTML에서 정의한 title이랑 같음.
  • JS에서 HTML document 객체로 부터 title을 가져올 수 있음.
    JS는 HTML에 접근하고 읽을 수 있게 설정되어 있고,js를 통해 HTML을바꿀 수도 있음.document.title = "hi";
  • 모든 것들은 document로부터 시작함. web site를 의미하기 때문!

3.1 HTML in Javascript

  • document는 js에서 HTML에 접근할 수 있는 방법임.
    HTML의 <h1 id="title">Grab me!</h1> 를 js에서 getElementById라는 함수를 통해 id로 element를 가져올 수 있음. 또한, innerText로 HTML 요소들의 값을 변경할 수도 있음.
const title = document.getElementById("title");

title.innerText = "Got you!";
  • console.dir()은 console.log() 보다 element를 더 자세하게 보여줌.

3.2 Searching For Elements

  • getElementById(): 해당 아이디 하나만 불러올 수 있다.
  • getElementByClassName(): 해당 클래스네임으로 불러올 수 있으며, 동일요소가 있을 시 배열형태로 보여준다.
  • getElementByTag(): 해당태그를 불러올 수 있으며,중복요소가 있으면, 배열형태로 나타낸다.
  • queryselect()/querySelectAll(): 해당 태그 및 아이디 클래스명에 속한 요소들을 콜링할 수 있으며 중복요소가 많을 시 queryselect는 첫번째 요소만, queryselectAll은 모든 조건들을 배열로 보여준다.
profile
딩쓰
Frontend Developer
다음 포스트

노마드코더 바닐라JS로 크롬앱 만들기 2

0개의 댓글