1. JavaScript를 사용하는 방법
- script 태그를 사용한다
- script 태그는 반드시 body태그의 가장 아래쪽에 위치한다.
- script 태그 내부에 JS코드를 작성하거나 src 속성을 이용하여 JS파일을 연동시킨다.
예시) HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vanilla JS</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>This works!</h1>
<!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
<script src="index.js"></script>
</body>
</html>
예시) JS 파일 코드
alert("JavaScript is working");
예시) 실행 결과
2. JS의 기본문법
1) JS variable(변수) 선언 방법
-
JS에는 변수를 사용하기 위해 반드시 3가지 과정을 거쳐야한다. Create(선언), Initialize(초기화), Use(사용)
-
선언과 초기화는 한번에 수행할 수 있으며, JS에서 변수를 선언할 때, 반드시 let을 붙여야 한다. ex) let a = 100;
-
명령어가 끝날 때는 반드시 세미콜론(;)을 찍는다.
2) JS 변수의 종류
-
JS에는 변수선언에 사용되는 3가지 변수타입이 존재한다. let, const, var
-
const: 선언 후 절대 값이 변하지 않는 상수 (상수는 변수의 반대말)
-
let: 선언 후에도 값을 바꿀 수 있는 변수
-
var: variable의 약자로 초기의 JS가 갖고있던 유일한 변수선언 명령문이다. 당시에는 let과 const가 없었다.(이제는 잘 사용하지 않는다.)
-
JS에서 변수를 선언할 경우, 기본적으로 const를 사용하는 것을 권장한다.
3) JS comment(주석)
- 슬래시 두번(//) 다음에 오는 문장은 주석처리되어 JS로 인식되지 않는다.
- 범위 주석처리는, /*주석작성부*/ 이와 같은 방식으로 범위주석을 작성할 수 있다.
// This is a comment
/* This is a multi-line comment */
This is not a comment
4) JS의 데이터 타입
- String(문자열): "abc"
- Boolean(논리형): true, false
- number(정수형): 1,2,3
- float(소수형): 55.12
5) JS의 Array(배열)
- JS에서 배열은 [](대괄호)를 사용하여 표현한다.
ex) const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; - JS의 배열은 다양한 데이터 타입을 함께 담을 수 있다.
ex) const mixedArray = ["Mon", 123, "Wed", true, "Fri"];
6) JS의 Object(객체)
- JS의 객체란, key와 value를 한 쌍으로 구성하는 데이터를 의미한다.
- 배열처럼 작동하지만 key를 사용하여 원하는 데이터를 쉽게 찾아낼 수 있다.
const myInfo = {
name: "abc",
location: "Seoul, Korea",
gender: "Male",
handsome:"true"
}
//위치를 알고싶다면 위치정보를 갖고 있는 location(key)를 사용하면 된다.
console.log(myInfo[location]); //출력문
* const로 선언했기 때문에, myInfo라는 객체는 변할 수 없다. 여기서 의미하는 변할 수 없다라는 의미는 myInfo가 Object로 선언되었다는 그 정보를 바꿀 수 없다는 것이다. 즉, location을 부산으로 바꾸고 싶다면 아래의 코드처럼 바꿀 수 있는 것이다. 하지만, myInfo라는 객체 자체를 문자열이나 숫자 등으로 바꿀 수 없다는 것이다.
myInfo.location = "Busan, Korea"; // 가능
myInfo = "hello"; // 불가능(에러발생)
6) JS의 객체와 배열을 함께 사용하는 방법
- 다양한 정보를 구성하기위해 배열 내부에 여러개의 객체가 필요한 경우에는 다음과 같은 방식으로 만들 수 있다.
const myInfo = {
name: "abc",
location: "Seoul, Korea",
gender: "Male",
handsome:"true"
favFood: [
{
name: "Kimchi",
healthy: true
},
{
name: "Hamburger",
healthy: false
}
]
}
console.log(myInfo.favFood[0].name) // Kimchi가 출력된다.
'Front-end > Vanilla JS' 카테고리의 다른 글
| Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) (0) | 2020.10.07 |
|---|---|
| Vanilla JS - DOM(Document Object Model)(2) (0) | 2020.10.06 |
| Vanilla JS - DOM(Document Object Model)(1) (0) | 2020.10.03 |
| Vanilla JS - 기본문법(2) (0) | 2020.10.02 |
| Vanilla JS - JavaScript란 무엇인가 (0) | 2020.10.01 |
댓글