2020년 2월 23일 일요일 오후 3:00JavaScript8분 읽기 (대략 1248 단어)

자바스크립트 기초 문법

1. 자바스크립트 선언문

1. type 속성

1
2
<script type="text/javascript">  
</script>

옛날 표준인 HTML4 에는
type=”text/javascript”라는 속성이 필요했습니다.
HTML5부터는 사용하지 않아도 됩니다.

HTML5 에선 불필요한 MIME 유형을 제공하기보다는 속성을 생략할 것을 권장합니다.

2. language 속성

1
2
<script language="javascript">  
</script>

스크립트 언어를 표시하기위한 속성.
이속성은 표준화되지 않았습니다.

3. 생략

1
2
<script>  
</script>

html5 부터는 디폴트로 script 는 js로 쓰기때문에
type값을 생략한 script 로만 사용하셔도 무방합니다.

4. 외부에서 불러오기

1
<script src="소스경로"></script>

2. 자바스크립트 선언문은 HTML문서 어디에 작성하나요?

자바스크립트는 < head>태그 영역 또는 < body>태그 영역에 선언하면 됩니다.

HTML의 < head> 섹션이 아니라 < /body> 태그 바로 앞에 두는 것이 가장 좋습니다.

그 이유는 HTML이 웹에서 로딩되는 순서가 위에서 아래로 로드되기 때문입니다.
Head를 먼저 로드 한 다음 body를 로드합니다.
JavaScript을 헤드 영역에 넣으면 HTML을 로드하기 전에
전체 JavaScript 파일이 로드되므로 몇 가지 문제가 발생할 수 있습니다.

1. HTML을 변경하는 코드가 JavaScript에있는 경우

실제로 영향을 줄 수있는 HTML 요소가 없으므로 JavaScript 코드가 작동하지 않는 것처럼 보입니다. 오류가 발생할 수 있습니다.

2. JavaScript가 많은 경우

HTML을 로드하기 전에 모든 JavaScript를 로드하기 때문에 페이지 로딩이 눈에 띄게 느려질 수 있습니다.

자바 스크립트 링크를 HTML </ body>태그 앞에 배치하면
자바 스크립트가 로드되기 전에 HTML을 로드 할수 있게 하여 오류를 방지하고
웹 사이트 응답 시간을 단축 할 수 있습니다.

3. 자바스크립트 주석 처리

1
2
3
4
5
6
7
//한 줄 설명글인 경우  
  
/*  
 설명글이 여러줄 인 경우  
    
 설명글이 여러줄 인 경우  
*/

4. 자바스크립트 코드 입력시 주의할 점

1. 자바스크립트는 대·소문자를 가려서 씁니다.

날짜 객체 생성:New date(); (X)
날짜 객체 생성:New Date(); (O)

2. 실행문을 작성할 때는 한줄에 한 문장만 작성하는 것이 가독성을 위해 좋습니다.

3. 문자형 데이터를 작성할 때는 큰 따옴표(“”)와 작은따옴표(‘’)을 주의

""겹침 오류 
1
2
3
4
document.write("문자형 데이터 "작성시 따옴표 겹침을" 주의 합니다.") (X)  
  
document.write('문자형 데이터 "작성시 따옴표 겹침을" 주의 합니다.') (O)  
document.write("문자형 데이터 "작성시 따옴표 겹침을" 주의 합니다.") (O)

5. 자바스크립트 data types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1. String (문자형 데이터 타입)  
    
 const what = "JS Study"  
  
2. Boolean (논리형 데이터 타입 true or false)  
    
 const what = true;  
  
3. Number (숫자형 데이터 타입)  
  
 const what = 123;  
  
4. Float (소숫점 데이터 타입)  
  
 const what = 123.4;  
  
5. Null (값이 없는 = 데이터를 비우고자 할때 사용)  
  
 const what = null;  
  
6. Undefined (값이 없는 = 지정 되지않음)  
  
 const what;

6. 자바스크립트 변수 선언

1. ES6 이전 - var

ES6 이전 사용하던 변수 선언 방식으로 변수 선언 방식에 있어서 큰 단점을 가지고있어
ES6 이후 잘 사용되지 않는다.

1
2
3
4
5
var name = "first";  
console.log(name); // first  
  
var name = "second";  
console.log(name); // second

이런식으로 변수를 한 번 더 선언하게 되는 실수를 하는 경우
에러가 나오지 않고 각기 다른 값이 출력 된다.
이는 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.

2. ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식 let 과 const

1
2
3
4
5
6
let name = "first";  
console.log(name); // first  
 
let name = "second";  
console.log(name);   
// Uncaught SyntaxError: Identifier 'name' has already been declared

name이 이미 선언 되었다는 에러 메세지가 나온다.
const를 사용해도 마찬가지로 변수 재선언이 되지 않는다.

let은 변수에 재할당이 가능
1
2
3
4
5
6
7
8
9
let name = "first";  
console.log(name); // first  
  
let name = "second";  
console.log(name);  
// Uncaught SyntaxError: Identifier 'name' has already been declared  
  
name = "third";  
consol.log(name); // third
const는 변수 재선언, 변수 재할당 모두 불가능 (상수)
1
2
3
4
5
6
7
8
9
10
const name = "first";  
console.log(name) // first;  
  
const name = "second";  
console.log(name);  
// Uncaught SyntaxError: Identifier 'name' has already been declared  
  
name = "third";  
consol.log(name);  
//Uncaught TypeError: Assignment to constant variable.
#

카테고리

×