코딩 공부 시작
영상 : 초보자를 위한 바닐라 자바스크립트
바닐라 자바스크립트를 공부해야 하는 이유
- 자바스크립트는 웹사이트를 만들 때 사용하는 유일한 언어이다.
- 모든 컴퓨터에는 웹사이트를 여는 브라우저가 있기 때문에 범용성이 있다.
- 자바스크립트로 웹사이트를 만드는 것 부터 앱을 만들거나 게임까지 다양하게 사용할 수 있다.
- 바닐라 자바스크립트란?
- 패치가 진행되기 이전의 자바스크립트 언어
- 속도가 빠르며, 기본적인 구조를 이해하면 다른 언어들을 배우는데 쉽게 배울 수 있다.
자바스크립트는 CSS와 같이 html내에서 외부 파일을 불러오는 식으로 사용된다.
<body>내에서 불러야 한다. <script src="파일제목"></script>형식으로 불러야 한다.
각 줄의 마지막에 세미콜론(;)을 쓰는 것을 습관화하자.
alert('message'); message라는 내용의 경고 창을 띄운다.
console.log('message'); console에 message가 나온다.
변수(variable) 변경될 수 있는 것
변수를 사용할 땐
- 변수를 생성한다
- 변수를 초기화한다
- 변수를 사용한다.
let a = 5; //a=5
let b = a - 2; //a=5, b=3
a = 3; //a=3, b=3
console.log(b, a);
->3, 3
- 변수는 한 번 생성하면 다시 정의(let)할 필요가 없다.
- 컴퓨터는 코드를 위에서 아래로 순서대로 처리하기 때문에 b를 정의할 땐 a=5로 b=3이 되지만, console.log로 불러올 땐 세 번째 줄에서 a=3으로 바꼈기 때문에 3, 3이 출력된다.
상수(const) 변경되지 않는 수
변하면 안되는 수는 const로 정의해 나중에 모르고 값이 바뀌는 것을 막도록 한다.(바꾸는 경우에 에러메시지가 뜸)
웬만하면 const로 정의하고, 바껴야 될 것만 let으로 정의한다.
const를 기본으로 사용할것
예전엔 변수나 상수를 정의할 때 var을 사용했지만, 범위제약이 없어서 에러를 만드는 경우가 많다고 한다.
var대신 let과 const만 사용해 에러를 발생시키지 않도록 한다.
// 뒤의 글들을 주석처리한다. 코딩에 영향을 미치지 않음
/* 긴 주석의 경우
이렇게 *과 /를 사용해 처리한다 */
Data Type
const name =
"연결된 문자열"(string)
True(0)/False(1) (boolean)
123 (number)
12.5 (float, 소숫점이 있는 숫자)
*"123"과 123은 다르다
"123"으로는 수학적인 연산을 제대로 실행할 수 없다.
Organize Data
Array
const daysOfWeek = ["Mon", "Tue", "Wed", "Tue", "Fri", "Sat", "Sun"];
여러개의 자료들을 묶어서 관리함
순서대로 0, 1, 2, ... 6 번째 자료로 저장됨
Objects
const joyInfo = {
name: "joy", //라벨 : 자료,
age: 30,
country: "republic of Korea",
gender: "female"
favMovies: ["Harry Potter", "Avengers", "Titanic"] //object안에 array 혹은 array안에 objects를 넣을 수 있다.
favFood: [
{
name: "curry",
country: "india"
},
{
name: "kimbap",
country: "korea"
}
]
};
내가 저장하는 정보에 라벨을 붙여서 저장한다.
.으로 하위목록으로 들어간다
console.log(joyInfo.favFood[0].country);
->india
'TIL' 카테고리의 다른 글
| 2020.09.08 (0) | 2020.09.09 |
|---|---|
| 2020.09.07 (0) | 2020.09.08 |
| 2020.09.04 (0) | 2020.09.04 |
| 2020.09.03 (0) | 2020.09.03 |
| 2020.09.02 (0) | 2020.09.03 |