-
자바 스크립트 적용하기프론트엔드/JavaScript 2020. 9. 5. 10:11
자바스크립트 HTML 문서에 적용하기
자바 스크립트의 경우 HTML 문서를 동적으로 작동하도록 도와주기 때문에 기본적으로 HTML 문서 내에 위치한다. 하지만 필요에 따라 그 위치를 변경할 수 있다.
스크립트 적용 위치
자바 스크립트는 아래와 같이 크게 세가지로 적용 위치를 변경해줄 수 있다.
1. <head> 태그 내에 <script>위치
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 자바스크립트를 적용하는 <script>태그는 <head> 태그 내에서 위치시켜준다. // <script> 태그 내에선 HTML, CSS랑 다른 문법이 적용된다. </script> </head> <body> <h1> 테스트입니다. </h1> </body> </html>2. <body> 태그 내에 <script>위치
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1> 테스트입니다. </h1> <script> // 자바스크립트를 적용하는 <script>태그는 <body> 태그 내에서 위치할 수 있다. </script> </body> </html>3. HTML 문서 밖에 스크립트 파일 생성 후 삽입
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="/test.js"></script> <script> //위와 같이 외부 스크립트 파일을 불러올 수도 있다. </script> </head> <body> <h1> 테스트입니다. </h1> </body> </html>스크립트 적용 위치가 다른 이유
일반적으로 간단히 학습용 페이지를 만들경우 스크립트 파일이 간단하고 내용이 길지 않다.
그래서 어디 위치하나 스크립트 실행에 있어 크게 시간 차이가 없다.
하지만 프로젝트가 커지고 스크립트 파일이 방대해지면 위치에 따른 시간 차가 난다.
즉 페이지 로딩의 효율화를 위해 필요게 맞게 적용 위치를 다르게 해주는 것이다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
for...of / for...in 에 대해서 (0) 2020.09.09 자료형 변환(type conversion) (0) 2020.09.09 Var vs let vs Const (0) 2020.09.09 자바 스크립트의 데이터 타입 (0) 2020.09.05 자바스크립트(Java Script)란? (0) 2020.08.25