1. 바닐라 JS 란?
노마드 코더에서 바닐라 JS를 배우기 시작했다. 자바스크립트의 원형이라고 생각하면 된다고 한다. 라이브러리나 프레임워크가 없기 때문에 더 기초적인 코드를 짜야하지만 기본기를 배울 수 있다고 한다. 사실 노마드코더에서 파이썬 데이터 사이언스 수업을 들으려고 했는데 바닐라JS 랑 파이썬2주 완성을 들어야 한다길래 수강했다. 바닐라 JS로 TO-DO LIST 를 만들고 관리하는 웹페이지를 만드는게 프로젝트의 목적이다.
자바스크립트는 사용자와의 상호작용이 가능한 동적인 웹사이트를 만드는데 꼭 필요한 언어이다. 그리고 진짜 오래된 언어이다. 그래서 , 뭔가 기대가 된다. 그럼 우선 자바스크립트의 기본 문법에 대해서 배워보자.
html 뼈대 설정
먼저 기본적인 웹의 뼈대를 만들고 index.html 이란 이름으로 저장하자.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!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 파일을 만들어 아래코드를 추가한다.
1
2
3
4
5
6
7
8
9
body {
background-color: #ecf0f1;
/* 배경색 설정 */
}
h1 {
color: #34495e;
/* h1 태그에 해당하는 색 설정 */
}
자바스크립트 기본문법 1
그리고 마지막으로 index.js 파일을 만들어 실습의 장을 연다. 처음엔 간단하게 var,array,const 에 대해 배워보도록 하겠다. 아래 코드를 보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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