자바스크립트(JavaScript)
- HTML 파일 내에서 Javascript 문법을 사용하기 위해 사용하는 태그는
<script>이다.
-
HTML 파일 내에서 Javascript 문법을 사용하는 것은 보안상 취약점이 될 수 있으므로 자제한다.
-
Javascript 파일의 확장자는 'js'이며 HTML 파일에서 외부 Javascript 파일을 불러오기 위해서는 아래와 같이 작성한다. (경우에 따라 추가적인 속성을 사용할 수 있다. 이는 HTML 내의 script 태그에 관한 파일 참조)
<script src="외부 파일 주소"></script>- 주석
- 한줄 주석 : // ...
- 여러줄 주석 : / ... /
- Javascript는 진입점이 없고 작성한 코드가 바로 실행된다. (호출이 필요한 함수나, 클래스 등이 아니라면)
- 한 구문이 끝나면 세미콜론(;)을 붙이는 것을 기본으로한다. 생략시 한 줄을 한 구문으로 인식한다.
태그 script - 가능한 부모 :
<head>- 종류 : 닫는 태그 필요
- 직접 Javascript 문법을 사용하거나 외부의 js 파일을 불러오기 위해 사용한다.
- 속성
- src : 외부 JS 파일의 주소 및 경로
- async : 문서의 로드를 막지 않고, 비동기적으로(Asynchronously) JS 파일을 다운로드한다. 다운로드 완료시 바로 JS 파일을 실행한다. 속성 값 없음.
- defer : 문서의 로드를 막지 않고, 비동기적으로 JS 파일을 다운로드한다. JS 파일 다운로드 완료시, DOM 구조 파악 완료되는 시점에 JS 파일을 실행한다. 이미 DOM 구조 파악이 끝났다면 다운로드 직후 실행한다. 속성 값 없음.
변수와 상수
- 변수(Variable)란 선언(Declaration) 후 그 값이 얼마든지 변할 수 있는 값을 의미한다. 다음과 같이 선언한다.
let [변수 이름];
혹은
let [변수 이름] = [초기 값];
-
변수를 선언할 때, 그 변수의 타입(Type)을 명시적으로(Explicitly) 적지 않고, 'let' 키워드를 이용한다.
-
상수(Constant)란 선언 및 초기화 후 그 값이 변할 수 없는 값을 의미한다. 선언과 동시에 값 초기화를 해야하며 선언시 초기 값을 비워둘 수 없다. 다음과 같이 선언한다.
const [상수 이름] = [초기 값];
- 상수를 선언할 때, 그 상수의 타입을 명시적으로 적지 않고, 'const' 키워드를 이용한다.
- 일반적인 방식으로 약속된 키워드(keword)를 변수 및 상수 이름으로 이용할 수 없다.
가령, 'let const = 123;' 이라고 선언할 수 없는 것.
-
이미 선언된 변수 혹은 상수의 이름을 다시 사용할 수 없다. (동일하거나 보다 하위인 스코프하에)
-
변수와 상수의 명명법(Naming Convention)은 카멜 케이스(Camel Case)를 따른다.
전역 변수(Global Variable)
-
window : 브라우저 그 자체를 의미하는 전역 변수이다.
-
history : 브라우저의 탐색 기록에 대한 정보를 담고 있다. window.history 혹은 history로 접근 가능.
-
location : 현재 위치(URL)와 관련된 정보를 담고 있다. window.location 혹은 location으로 접근 가능.
-
href : 현재 위치(URL)를 문자열로 반환한다.
-
document : HTML 문서를 의미한다.
쉽게 생각하면
<html ~> 부터 </html> 까지. window.document로 접근하거나 그냥 document로 접근할 수 있다.
- body :
<body ~> 부터 </body>까지를 의미한다. window.document.body 혹은 document.body로 접근한다. (그냥 body로는 접근 못함)
데이터 타입
-
타입
-
간혹 Javascript에는 타입이 없다고 하는 경우가 있는데 Javascript에도 타입은 존재하며 다만 변수/상수 선언시 명시하지 않을 뿐임.
-
typeof(x) : 전달된 x의 타입을 문자열로 반환한다.
-
'number' : 전달된 값이 숫자임.
-
'string' : 전달된 값이 문자열임.
-
'boolean' : 전달된 값이 논리형임.
-
'object' : 전달된 값이 다른 타입으로 정의할 수 없는 일반 객체라는 뜻.
-
'undefined' : 전달된 값이 undefined 라는 뜻.
-
숫자 : 0부터 9 혹은 마침표(.)로 이루어진 값. 123
-
지수표기법(Exponential Notation) : {n}E{x} 방식으로 표기. 이는 n 곱하기 10의 x승이라는 뜻이다.
가령 1E+1은 10이고, 1E+2는 100이다. (잘 쓰이지는 않는다.)
-
문자열 : 쌍따옴표(") 혹은 홑따옴표(') 혹은 백틱(`) 으로 감싼 값을 의미한다.
-
주의 : 그냥 123은 숫자 백이십삼이지만 '123'은 문자열 일이삼이다.
따라서 '123' + 4 (문자열 일이삼 더하기 숫자 사)은 문자열 합치기로 작동하고 그 결과가 '1234'(문자열 일이삼사)로 나오게 된다.
- 논리값 : 참과 거짓, 두개로 이루어진 값으로 참은 true, 거짓은 false 이다.
-
기타
-
NaN : (안 중요) NaN(Not a Number)은 숫자가 아닌 값이다. typeof(NaN)은 'number'를 반환한다. 무한수를 무한수로 나누면 NaN을 반환한다.
-
Infinity : (안 중요) 무한한 수를 의미한다. 어떠한 값을 0으로 나누면 반환되는 값이다. typeof(Infinity)는 'number'를 반환한다.
-
null : 값이 의도적으로 없음을 의미한다. typeof(null)은 'object'를 반환한다.
-
undefined : 값이 의도했든 안했든 없음을 의미한다. 변수 선언과 동시에 값을 초기화하지 않으면 설정되는 값이다.
