Js 파일 연결하기
Index.html 파일의 <head> 영역에 다음과 같이 js 파일을 연결해준다.
<script defer src="function.js"></script>옵션 : async / defer
사용자가 html 파일을 다운로드 받았을 때 브라우저가 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환하게 된다. 이 때
<script>태그가 보이면 html 읽기를 멈추고, Js를 서버에서 다운받아 실행한 다음 다시 html 읽기를 시작한다. 만약 Js파일이 엄청 크다면 실행되는 시간이 오래걸려 사용자가 화면을 보는데 시간이 오래 걸리게 된다.
이 때문에<body>태그 맨 마지막에 넣어 DOM 구성이 끝난 다음 Js를 실행하게 하는 경우도 있다. 하지만 만약 페이지가 Js 의존도가 높다면, 사용자가 의미있는 컨텐츠를 보기 위해서 똑같이 로딩 시간이 오래 걸리게 된다.
async: 병렬로 Js를 다운받자라고 명령! 다운이 끝나면 html parsing을 멈추고 js를 실행한 후 다시 html을 parsing 한다. 여전히 시간이 조금 더 걸린다는 단점이 있음.defer: 병렬로 Js를 다운받는 점은 같지만, html parsing을 끝까지 완료한 후에 Js를 실행한다.
'use strict';
JavaScript는 Brendon Eich 가 굉장히 빠른 시간에 만들어낸 유연한 언어이다. 때문에 호출을 하고 변수 선언을 해도 정상적으로 작동이 되는 등 실수에 대한 에러를 잡아주지 않는다. 이를 해결하기 위해 'use strict'; 를 문서 처음에 작성하여 에러를 엄격히 잡아주도록 하자..!
Variable
Variable(변수)는 let과 const를 사용하며, let은 값의 재할당이 가능하고 const는 처음부터 상수(변경할 수 없는 값)만 사용 가능하다. (const = immutable data types)
var는 어디에 선언했는가와 상관없이 맨 위로 끌어올려지는 var hoising 이 작동되기 때문에 사용하지 말 것! 지역변수, 전역변수에 상관없이 작동한다.
Variable type
- Primitive type : number / string / boolean / null / undefined / symbol
let name = 'yura';
let age = 20; - 0bject type : box container
let yura = {
name = 'yura',
age = 20,
}- function
let class = function(){
console.log('print');
};Variable - Primitive type
number (숫자)
- Infinity (무한의 숫자)
- -Infinity
- NaN (not a number)
<script>
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity); //infinity
console.log(negativeInfinity); //-Infinity
console.log(nAn); //NaN
</script>string (문자)
<script>
const char = 'c';
const brendan = 'brendan';
const greeting = 'hello ' + brendan;
console.log(`value: ${greeting}, type:${typeof greeting}`); //value: hello brendan type: string
const helloBob = `hi ${brendan}!`;
console.log(`value: ${helloBob}, type: ${typeof helloBob}`); //value: hi brendan type: string
</script>boolean (참/거짓)
- false : 0 / null / undefined / NaN / ''
<script>
const canRead = true;
const test = 3 < 1; //flase
console.log(`value: ${canRead}, type: ${typeof canRead}`); //value: true, type: boolean
console.log(`value: ${test}, type: ${typeof test}`); //value: flase, type: boolean
</script>null
<script>
let nothing = null;
console.log(`value: ${nothing}, type: ${nothing}`); //value: null, type: null
</script>undefined
<script>
let x = undefined; //let x; 와 같음
console.log(`value: ${x}, type: ${x}`); //value: undefined, typd: undefined
</script>symbol
<script>
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); //false : 두 변수는 레포가 다르니까
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); //true
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); //value: id, type: symbol
</script>- template literals = `` 기호와 ${} 를 이용하여 위와같이 출력하는 것
Elli's DreamCoding 영상을 정리한 내용입니다. 🌱 드림코딩 by엘리
