자바스크립트란?
사용자의 행동에 반응하고, 데이터를 처리하며, 웹페이지를 살아있게 만드는 프로그래밍 언어
HTML이 뼈대를 만들고, CSS가 꾸며주면, JavaScript는 거기에 생명을 불어넣는 역할
버튼을 누르면 반응하고, 데이터를 계산하고, 서버와 소통하고, 화면을 실시간으로 바꾸는 등 웹에서 일어나는 모든 동적인 것들을 말한다.
HTML = 사람의 몸 (뼈, 장기)
CSS = 사람의 외모 (옷, 헤어스타일)
JS = 사람의 뇌 + 근육 (생각하고, 판단하고, 움직임)
script 태그는 어디에 위치해야 할까?
HTML 파일에서 JavaScript를 불러올 때 script 태그의 위치를 어디에 놓아야 좋을지 궁금했다.
1. head 안에 넣는 경우
<head>
<script src="app.js"></script>
</head>HTML이 다 그려지기 전에 JS가 실행되어 오류가 날 수 있다.2. body 맨 아래에 넣는 경우
<body>
<h1>Hello</h1>
<script src="app.js"></script>
</body>- HTML을 다 그린 후 JS가 실행되어 안전하다.
- JS 파일이 크면 페이지 로딩이 느려질 수 있다.3. head 안에 async 사용
<head>
<script async src="app.js"></script>
<script async src="util.js"></script>
<script async src="main.js"></script>
</head>- HTML 로딩과 JS 로딩을 동시에 진행한다.
- JS 로딩이 끝나면 즉시 실행한다.
- 순서가 보장되지 않아 JS끼리 의존성이 있으면 위험하다.4. head 안에 defer 사용
<head>
<script defer src="app.js"></script>
<script defer src="util.js"></script>
<script defer src="main.js"></script>
</head>- HTML 로딩과 JS 로딩을 동시에 진행한다.
- HTML이 다 그려진 후에 JS가 실행되므로 오류가 날 위험이 없다.
- script 태그가 여러 개일 때 순서가 보장된다.변수 선언
변수란? 데이터를 담아두는 이름표가 붙은 상자
var | let | const | |
|---|---|---|---|
| 재선언 | ✅ 가능 | ❌ 불가 | ❌ 불가 |
| 재할당 | ✅ 가능 | ✅ 가능 | ❌ 불가 |
| 사용 권장 | ❌ 지양 (버그 위험) | ✅ 권장 | ✅ 권장 |
각각 언제 사용할까?
-
var - 구버전으로 사용 지양
var x = 1;
var x = 2; // 재선언 가능 -
let - 나중에 값이 바뀔 때 사용
let count = 1;
count = 3; // 재할당 가능 -
const - 값이 고정일 때 (기본적으로 이걸 먼저 사용하기)
const name = "철수";
name = "영희"; // ❌ 오류 발생!
