HTML & JavaScript 파일 연동하기
- 스크립트 태그를 사용해 삽입할 수 있다.
<script></script>- html
<head>태그 안에 스크립트 태그, 자바스크립트 소스파일을 사용해 연동한다.
<head>
<script src="script.js"></script>
</head>- html은 파일을 위에서 아래로 순차적으로 읽기때문에 head 태그 안에 삽입할 시 자바스크립트 파일의 크기가 크다면 페이지의 로딩시간이 길어질 수 있기 때문에 추천하지 않음.
<body>태그 맨 밑에 위 태그를 첨부해 외부 자바스크립트 파일을 연동한다.
<script type="text/javascript" src="script.js"></script> - html 페이지가 로딩된 다음 자바스크립트를 읽기 때문에 로딩시간이 비교적 빠르지만 웹사이트가 자바스크립트에 의존적인 사이트라면 추천하지 않음.
<head>태그안에asyn이라는 속성 값 추가
<head>
<script asyn src="script.js"></script>
</head>- asyn 사용 시 브라우저가 html을 다운로드 받아 파일을 읽다 asyn를 읽었을 때 병렬구조로 자바스크립트 파일을 다운로드 받아 자바스크립트 파일의 로딩이 끝났을 시 html 파일을 읽는 것을 중단하고 다운로드 된 자바스크립트 파일을 실행하게 됨
- 다운로드 받는 시간 절약하지만 자바스크립트가 html되기 전에 시작되기 때문에 우리가 원하는 요소 정의되기 전일 수도 있음.
<head>태그안에defer이라는 속성 값 추가
<head>
<script defer src="script.js"></script>
</head>- defer을 읽은 후 자바스크립트 파일을 가져오고(html 파일은 계속 분석 중) html 파일 실행이 끝난 후 다운로드가 끝난 자바스크립트를 실행한다.
- 효율적, 추천!
use strict
'use strice';스크립트 엄격 모드!
- 기존에는 무시되던 에러들이 발생
- 더 효율적으로 자바스크립트 이용 가능
- 자바 스크립트 파일 맨 위에 선언
자바스크립트 변수 선언
let
name = 'hyerim';
let name;var
var 쓰지마!!
왜 쓰지 말아야 하나요?
1. 자바스크립트 var에서는 선언하기 전 값을 할당할 수 있음.
name = 'hyerim';
var name;hyerim
- var hoisting
hoisting : 끌어올려주다.
어디에 선언했는 지에 상관없이 항상 선언을 제일 위로 끌어올려 주는 것
2. block scope 존재하지 않음
var은 block을 무시함.
{
name = "hyerim";
var name;
}
console.log(name);hyerim
블럭을 이용해 변수를 선언해도 아무대서나 출력 가능함.
const
한번 할당하면 값이 절대 변하지 않음.
const = name
name = "choihyerim";- const를 이용해 변수를 선언하는 것이 좋은 이유
- 해커들이 값을 변경할 수 없기 때문에 보안상으로 좋음
- 스레드들이 동시에 값을 변경할 수 없다.
- 인간의 실수를 줄여준다.
var, let, const의 차이점 정리
| 변수 선언 방법 | 데이터 타입 | 중복 선언 여부 | 스코프 |
|---|---|---|---|
| var | 변경가능, mutable data type | 변수 중복 선언 허용 | 함수 레벨 스코프 |
| let | 변경가능, mutable data type | 변수 중복 선언 불가능 | 블록 레벨 스코프 |
| const | 변경 불가능, Immutable data type | 변수 중복 선언 불가능 | 블록 레벨 스코프 |
스코프(Scope)
함수 레벨 스코프: 함수안에 선언된 함수만 지역변수로 간주하며, 나머지는 모두 전역변수로 간주한다.
function hello() {
var a = 1
console.log(a)
}
hello(); // 1
console.log(a) // ReferenceError: a is not definedif true {
var a = 1;
console.log(a)
}
console.log(a) // 1 코드 블럭 안에 var로 선언한 a 변수가 코드 블럭 밖에서도 출력되는 것을 볼 수 있다.
블록 레벨 스코프 : 함수 내부는 물론, if문이나 for문 등의 코드 블럭{ ... } 에서 선언된 변수도 지역변수로 취급한다.
function hello() {
let a = 1;
console.log(a)
}
hello(); // 1
console.log(a) // ReferenceError: a is not definedif true {
let a = 1;
console.log(a)
}
console.log(a) // ReferenceError: a is not defined자바스크립트 데이터 타입(data type)
기본 자료형, primitive, single item
원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다.
- 숫자 (number)
const count = 17;
const size = 17.1;typeof count
"number"
typeof size
"number"
- 문자열 (string)
const greet = "hello"
const name = "choihyerim"
const greeting = greet; + name;typeof greet
"string"
typeof name
"string"
typeof greeting
"string"
- boolean
참과 거짓- false : 0, null, undefined, NaN, '' (빈 스트링)
true : any other value
- false : 0, null, undefined, NaN, '' (빈 스트링)
const a = 3 > 1;
const b = 3 < 1;typeof a
"boolean"
typeof b
"boolean"
a
true
b
false
- null
비어있는 값
let noting = null;- undefined
값이 정의되지 않은 상태
let x;
let x = undefined;- symbol
우선순위를 주기 위해 고유한 식별자가 필요할 때 사용
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');console.log(symbol1 === symbol2);
false
객체, object, box container
const hyerim = { name: 'hyerim', age: 23 };
hyerim.age = 24;함수, function, first-class function
function plus() {
return a + b
}다이나믹 타이핑(Dynamic typing)
변수를 선언할 때 어떤 타입인지 선언하지 않고 할당된 값에 따라 타입이 변경됨.
let text = '안녕'; //type: string
text = 1; //type: number
text = '1' + 2; //type: string
text = '1' / '2'; //type: number<참고>
https://rimi0108.github.io/