자바스크립트 기본 문법 (변수)

YEONGHUN KO·2021년 11월 10일

JAVASCRIPT - BASICS

목록 보기

1/27

1. 바닐라 JS 란?

노마드 코더에서 바닐라 JS를 배우기 시작했다. 자바스크립트의 원형이라고 생각하면 된다고 한다. 라이브러리나 프레임워크가 없기 때문에 더 기초적인 코드를 짜야하지만 기본기를 배울 수 있다고 한다. 사실 노마드코더에서 파이썬 데이터 사이언스 수업을 들으려고 했는데 바닐라JS 랑 파이썬2주 완성을 들어야 한다길래 수강했다. 바닐라 JS로 TO-DO LIST 를 만들고 관리하는 웹페이지를 만드는게 프로젝트의 목적이다.

자바스크립트는 사용자와의 상호작용이 가능한 동적인 웹사이트를 만드는데 꼭 필요한 언어이다. 그리고 진짜 오래된 언어이다. 그래서 , 뭔가 기대가 된다. 그럼 우선 자바스크립트의 기본 문법에 대해서 배워보자.

html 뼈대 설정

먼저 기본적인 웹의 뼈대를 만들고 index.html 이란 이름으로 저장하자.

<!DOCTYPE html>
<html>
  <head>
    <title>무모</title>
    <link rel="stylesheet" href="index.css" />
    <!--index.css 파일안에 css언어로 디자인을 집약할 생각-->
  </head>
  <body>
    <h1 id="title">This will work. so Don't worry</h1>
    <script src="index.js"></script>
    <!--자바스트립트 코드는 index.js 파일에 모아놀 생각-->
  </body>
</html>

css 뼈대 설정

그러고는 index.css 파일을 만들어 아래코드를 추가한다.

body {
  background-color: #ecf0f1;
  /* 배경색 설정 */
}

h1 {
  color: #34495e;
  /* h1 태그에 해당하는 색 설정     */
}

자바스크립트 기본문법 1

그리고 마지막으로 index.js 파일을 만들어 실습의 장을 연다. 처음엔 간단하게 var,array,const 에 대해 배워보도록 하겠다. 아래 코드를 보자.

let a = 24; //  변수를 처음 정의 할 때 let을 쓴다. 그리고 진짜 필요할 때만. 대부분은 const 변수를 사용하자.
let b = a - 12; // 그리고 문장이 끝나면 세미콜론을 붙이자
const c = 111; //  변수를 변경할 수 없게 하려면 const(constant) 코드를 사용한다.(중요)
const name = "yeong";
const daysOfweek = ["mon","tue","wed"]; // array. 파이썬에서 list() 객체와 같다고 보면 될 것 같다.
                                       // 2번째 원소만 불러오고 싶다 하면 [1] 만 붙여주면 된다.

console.log(daysOfweek) // 파이썬과 다르게(print()) 자바스크립트에서는 console.log() 라는 함수를 써서
>>>["mon","tue","wed"]
결과값을 프린트한다

console.log(b)
>>>12

YEONGHUN KO

'과연 이게 최선일까?' 끊임없이 생각하기

다음 포스트