JavaScript를 왜 사용할까?
- 프론트엔드에서만 가능
- 액티브한, 반응형 웹페이지를 구현 ex. game, three.js
JavaScript 설정
HTML 환경 특성상 코드가 적혀있는 순서대로 쭉 읽어서 내려 오기 때문에,
그 특성을 고려하지 않고 코드를 작성하고 나면
내가 원하는 대로 페이지에 나오지 않을 수 있는 상황이 생길 수 있다.
그래서 JavaScript 파일을 불러올 때는 defer 를 활용해 불러오는 것이
가장 좋은 방법이라고 한다.
<head> <script defer src="script.js"></script> </head>실제 기본적인 Setting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="variable.js"></script>
</head>
<body></body>
</html>JS 파일에는 변수를 설정하는 코드를 사용하는 경우가 많은데,
이때, 가장 상단에 'use strict'! 를 선언해 주는 것이 좋다고 한다.
이걸 설정해 주면 내가 지정하지 않은 변수를 사용하게 되면
오류가 발생하기 때문에 비상식적인 출력을 막아주는 역할을 한다고 한다.
물론 html 내에서 type 을 통한 선언을 할 시에는 선언할 필요가 없지만 말이다.
// Whole-script strict mode syntax
// JavaScript is very flexible
// flexible === dangerous
// added ECMAScript 5
"use strict";
console.log("Hello World!");
let a;
a = 6;이유
1. <script>를 <head> 안에 넣을 경우
js 다운, 적용 후 html요소가 만들어지기 때문에 사용자가 웹페이지를 보는 속도가 느림
2. <script>를 <body> 안에 넣을 경우
html 요소가 만들어지고 난 후 js를 다운 적용 하기 때문에 웹페이지를 빠르게 보이지만 페이지가 js에 의존적이면 유저가 빠르게 정상적인 페이지를 보기는 어려울 수 있음
3. <script async>
html 요소가 만들어질때 병렬적으로 다운받을 수 있다는 장점이 있지만, html 요소가 모두 만들어지기 전에 js가 적용되기 때문에 오작동 가능성 있음
4. <script defer>
html 요소가 만들어질때 병렬적으로 다운받을 수 있고, 적용은 html이 모두 만들어 진 후 하므로 최적의 방법
'use strict' ㄴ오류를 내어 비상식적인 프로그래밍을 막아줌
'개발언어 > JavaScript' 카테고리의 다른 글
| Function(코드를 캡슐화해서, 실행을 여러번 가능) (0) | 2021.08.25 |
|---|---|
| Objects [설명이 필요한 정보가 담긴 데이터 리스트들] (0) | 2021.08.24 |
| Array [설명이 필요하지 않은 데이터 리스트들] (0) | 2021.08.24 |
| Booleans(true,false,null, undefined) (0) | 2021.08.24 |
| Variable을 만드는 방법(const,let,var) (0) | 2021.08.24 |