JS 기본 사용법
자바스크립트는 HTML에서 제공하는 script 태그 사이에 작성하거나 외부 스크립트를 import 하는 방식으로 사용할 수 있습니다.
<script>
//...자바스크립트 코드...
</script>
또는
<script src="자바스크립트경로"></script>script를 작성할 때 주의점
script를 head 태그 혹은 body 태그 중간에 작성하면
HTML 파싱 ▶️ HTML 파싱 정지 ▶️ JavaScript 파일 다운로드 후 실행 ▶️ HTML 이어서 파싱
순서로 진행됩니다.
자바스크립트의 파일의 크기가 가볍다면 미비한 영향을 미치겠지만 크기가 무겁고, 인터엣의 속도가 느리다면 웹사이트를 보는 데까지 많은 시간이 소요된다는 단점이 발생합니다. 또한 DOM을 제어하고 조작하는 자바스크립트 코드가 있다면 오류가 발생할 수 있습니다.
body 태그 끝에 작성하면
HTML 파싱 ▶️ JavaScript 파일 다운로드 후 실행
순서로 진행됩니다.
대부분의 경우에 제일 많이 위치하여 사용하는 방법입니다.
자바스크립트 파일을 다운로드하기 전 HTML 코드를 모두 파싱 하기 때문에 사용자가 화면의 내용을 빨리 볼 수 있다는 장점이 있습니다. 하지만 HTML 코드가 자바스크립트 의존적인 웹사이트라면 사용자가 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다는 단점이 있습니다.
세 번째 방법으로는 head 태그에 작성하지만 async 속성을 추가하는 방법입니다.
<head>
<script async src="./main.js"></script>
</head>HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ JavaScript 파일 다운 완료되면 HTML 파싱 정지 ▶️ JavaScript 파일 실행 ▶️ HTML 이어서 파싱
async 속성을 추가하는 경우에는 자바스크립트 파일을 만나면 병렬 다운로드 되기 때문에 다운로드 시간을 절약해서 속도가 빨라질 수 있지만, 자바스크립트 파일이 실행이 될 때 잠시 HTML 파싱이 멈추기 때문에 첫 번째 방법에서의 문제점이 그대로 나타날 수 있습니다. 또한 먼저 다운로드 된 자바스크립트 파일이 먼저 실행되기 때문에 순서 보장이 되지 않습니다.
하지만 만약 자바스크립트 파일이 DOM을 조작하지 않는 경우, async를 사용하는 것이 성능상 이점이 있습니다.
마지막으로 defer 속성을 추가하여 head 태그에 위치하는 방법입니다.
<head>
<script defer src="./main.js"></script>
</head>HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ HTML 전체 파싱 후 JavaScript 파일 실행
defer 속성을 추가하면 위의 설명한 async의 방식과 같이 HTML 파싱하는 동안 자바스크립트 코드를 다운로드를 완료하고 파싱이 완료 되면 파일이 실행됩니다. 따라서 속도적인면에서는 가장 우세하다고 볼 수 있습니다.
async, defer 을 head태그에 위치하는 이유는 html과 js 다운로드를 병렬로 한다는 장점을 활용하기 위해서 입니다.
변수
자바스크립트에서 변수를 선언한다는 것은 데이터를 저장할 공간을 만든다는 것이므로 자바스크립트를 배울 때 가장 먼저 배워야 하는 개념은 바로 변수를 선언하는 방법입니다.
자바스크립트에서 변수를 선언하는 방법은 3가지가 있습니다.
var
var 키워드로 선언하는 방법입니다. 변수명 중복, 재할당 가능합니다.
var [변수명] = 값;
var username = 'chul su'; // or "chul sulet
let 키워드로 선언하는 방법입니다. 변수명 중복 불가능하고, 재할당 가능합니다.
let [변수명] = 값;
let username = "chul su";const
const 키워드로 선언하는 방법입니다. 변수명 중복, 재할당 불가능합니다.
const [변수명] = 값;
let username = "chul su";자주 사용하는 용어
const sumResult = 10 + 20;1. 키워드(keyword)
var, let, const와 같이 자바스크립트 프로그래밍 내부에서 어떤 특정한 목적으로 그 기능이 정의가 되어진 단어를 말합니다. 대표적으로 우리가 변수를 선언하기 위해서 사용했던 var, let, const가 키워드에 속합니다.
2. 식별자(identifier)
어떤 대상을 유일하게 식별 및 구별할 수 있는 이름을 의미합니다. sumResult는 변수 공간을 식별할 수 있는 유일한 이름이기 때문에 식별자에 속하고 키워드의 역할에 맞추어서 변수명이라고 부릅니다.
3. 선언(declaration)
변수를 공간을 생성하는 과정에서 const sumResult; 처럼 변수 선언 키워드와 식별자를 작성하는 것을 선언이라고 합니다.
var username; // username 변수 선언
let userage; // userage 변수 선언
const sumResult; // sumResult 변수 선언4. 연산자(operator)
프로그래밍 언어에서 어떤 특정한 연산 처리를 하기 위해서 사용하는 기호를 연산자라고 합니다. 각각의 연산자는 특정 연산 방법이 정해져 있으며 대표적으로는 산술 연산자(+, -, *, /)와 나머지 연산자(%), 대입 연산자(=)와 같은 것이 있습니다.
위에서는 변수 선언 다음에 대입 연산자(=)를 사용하고 있으며 대입 연산자는 우측에 있는 항을 좌측의 항에 대입하는 연산 처리를 합니다.
5. 할당(assignment)
선언된 변수 공간에 값을 저장하는 과정을 할당이라고 표현합니다.
6. 표현식
값으로 추론되는 하나의 식을 의미합니다. 요컨데 10 + 20은 30이라는 값으로 추론될 수 있으므로 표현식입니다.
7. 값(value)
더 이상 계산될 수 없는 데이터를 말합니다. 요컨데 "chul su" 나 30과 같은 데이터는 더 이상 계산될 수 없으므로 값입니다.
식별자 네이밍 규칙
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
- 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야한다. (숫자 불가능)
- 키워드는 식별자로 사용할 수 없다. (if, else, for 등)
- 공백 문자를 포함하지 않는다.
주석
주석은 자바스크립트 코드에 삽입되는 설명이나 메모를 의미합니다. 주석은 실제 실행되는 코드에는 영향을 주지 않고, 개발자가 코드를 이해하고 문제를 파악하는데 도움을 줍니다. 또한, 특정 코드를 비활성화 할 때도 유용합니다.
한줄 주석
한줄 주석은 슬래시 기호 두 개를 연속으로 사용해서 작성합니다.
// comment여러 줄 주석
여러 줄 주석은 / 와 / 사이에 작성합니다.
/*
comment..
comment...
*/