티스토리 뷰

 

 

https://www.youtube.com/playlist?list=PLLUCyU7SBaR7tOMe-ySJ5Uu1UlEBznxTr 

 

노마드 코더 바닐라 자바스크립트 Nomad Coder

 

www.youtube.com

 

수업 준비물

 

깃허브, 크롬, 비주얼 스튜디오 설치

 

-> 미니 앱을 만들것

 

https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca/related?hl=ko

 

Momentum

Replace new tab page with a personal dashboard featuring to-do, weather, and inspiration.

chrome.google.com

프로젝트의 마지막 단계 이런것을 만드는것을 배우게 될것이다.

 

프론트앤드 개발자는 자바스크립트만 쓸수있어서 장점이자, 단점이다.

 

그에 자바스크립트는 빠르게 발전한다. 

 

자바스크립트는 브라우져로 돌아가고, 브라우져는 모든 컴퓨터에 깔려있다.

그렇기에 자바스크립트가 강력한 이유이다.

 

 

https://world-draw.appspot.com/

 

World Draw

An AI Experiment to draw the world together.

world-draw.appspot.com

 

ECMA스크립트

 

바닐라 자바스크립트는 javascript의 한 종류로 Library 없는 것을 이야기한다.

조리가 되지 않은 날것의 자바스크립트를 뜻함

 

 

http://vanilla-js.com/

 

Vanilla JS

Vanilla JS Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is smal

vanilla-js.com

https://replit.com/

 

The collaborative browser based IDE

Replit is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages.

replit.com

수업은 Repl를 이용해서 이루어진다.

 

index.html

<DOCTYPE html>
  <html>
    <head>
      <title>Something</title>
      <link rel="stylesheet" 
      href="index.css">
    </head>
    <body>
      <h1>This works!</h1>
      <script src="index.js"></script>
    </body>
  </html>

index.css

body{
  background-color: peru;
}

h1 {
  color: white;
}

index.js

console.log('Im Working. Im JS')

javascript를 배우고 파이썬을 배울수있을까에 대한 고찰

-> 컨셉은 같다. function을 배우고 Variable을 배우고 결국 컨셉은 하나의 언어를 배운다는것이다.

거기서 파생되는거기에 모든 프로그래밍 언어를 알아들을 수 있을것이다.

 

자바스크립트는 마치 훈육하지 않는 아빠와 같다. 그냥 사랑하기때문에 이상한 문법으로 쓰더라도 제대로된 값을 출력한다. 그렇기에 제대로된 코딩을 입력하는 습관을 기를 필요가있다.

 

변수. Variables

 

a = 221; a를 생성하고 221;에서 초기화 한것

let a = 211; -> let = let은 수학적 상태? 검색 x

 

let a = 221;
let b = a-5;
a = 4;
console.log(b, a);

자바스크립트는 위에서 아래로 출력한다.

216 4

그렇기에 변화된 값은 4로 출력된다.

 

그렇담 가끔 변하지 않는 변수의 값을 주고싶을때가 있을것이다.

 

그렇담?

const 는 상수이며 안정적이란 뜻을가지고있다.

const a = 221;
const b = a-5;
a = 4;
console.log(b, a);


//아래의 에러가 발생
TypeError: Assignment to constant variable.
    at /index.js:3:3

문제는 3번째에 있다고 알려줌

-> 상수에 새로운 값을 대입할 수 없다.

 

let과 const의 차이점이다.

 

var = varible 는 과거의 산유물

 

주석 - > 코멘트  : 노트 코드를 설명하는 노트라고 생각하면된다. // 한줄 /* */ 여러줄

// 이게 달리면 자바스크립트에게 야 여기에있는것은 전부 해석하지마라 라고 알려주는것.

 

//String
const what = "😞"

console.log(what);

결과 - 😞 

이모지도 텍스트기에 나온다. 텍스트를 출력하기 위해선 " " 안에 작성해줘야 출력된다.

 

"1212121212" 이렇게 된다면 더이상 숫자가아닌 문자로 인식한다.

/* String
const what = "😞"
console.log(what);
*/

// const wat = "true";

//Number
// const wat = 666;

//Float
// const wat = 55.1;

다음 강의에선 이걸 활용한다.

댓글
© 2022 chanchaning