.jpg)
자바스크립트를 사용하는 방법
1) html 내에서 선언하여 사용하는 방법
-. head 또는 body 태그 안에 script 태그를 명시하여 사용
<head>
<script>
document.write("Hello");
</script>
</head>2) 외부에 선언된 자바스크립트 파일을 읽어 현재 문서에 적용하는 방법
-. head안에 아래와 같이 .js를 호출
<script src="000.js"></script>3) 실행 위치
-
head에 삽입되는 경우
-. 브라우저 렌더링에 방해가 되어 무거운 스크립트 실행의 경우 오랫동안 미완성 화면을 노출
-. 문서를 초기화하거나 설정하는 가벼운 스크립트들이 자주 사용
-. 문서의 DOM(Document Object Model)구조가 필요한 스크립트의 경우 document.onload와 같은 로드 이벤트가 추가되어야 에러없이 작동 -
body 끝 부분에 삽입되는 경우
-. 브라우저가 렌더링이 완료된 상태에서 스크립트가 실행되므로 콘텐츠를 변경하는 스크립트의 경우 화면에 노출된 채로 변화됨
-. 문서의 DOM 구조가 완료된 시점에 실행되기에 별다른 추가설정이 필요 없음
-. 많은 스크립트 위치로 추천됨 -
헤드 + async 속성(async 스크립트 OR 비동기 스크립트)
-. 스크립트를 백그라운드에서 다운로드하여 다운로드 도중 페이지 내 콘텐츠를 처리, 출력
(async 스크립트 실행중에는 HTML 파싱이 멈춤)
-. 페이지에 async 스크립트가 여러 개 있는 경우, 실행순서가 제각각
(다운로드가 끝난 스크립트가 먼저 실행됨) -
헤드 + defer 속성(defer 스크립트 OR 지연 스크립트)
-. 스크립트를 백그라운드에서 다운로드하여 다운로드 도중 HTML 파싱이 멈추지 않음
-. 스크립트를 병렬적으로 다운로드 후 다운로드 순서와 상관없이 문서에 추가한 순서대로 실행
-. defer 속성은 외부 스크립트에만 유효-. 데이터의 크기, 상황에 적절한 방법을 이용!!
-. defer를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용
-. async는 방문자 수 카운터나 광고 스크립트 같이 실행 순서가 중요하지 않은 경우에 적용
추가 참고 사항
-
'use strict': Stric Mode의 선언 방식으로 안전한 코딩을 위한 하나의 가이드 라인
-. 코드에 더 나은 오류 검사를 적용하는 방법
-. 올바르지 않은 문법을 사전에 검출 가능 -
var의 문제점
-. var hoisting: 어디에 선언했는지와 상관없이 선언을 젤 위로 끌어 올려준 것
-. var: 블럭구분 없이 어디에 선언해도 사용할 수 있음 -
그 외 변수 선언
-. let: 변수설정(추후 변경 o)
-. const: 변수 설정(추후 변경 x)
-. number: 숫자 데이터 유형(정수, 실수 상관없음)
