자바스크립트(JavaScript)/자바스크립트
[JavaScript] 내부/외부 자바스크립트와 주의사항
by yerica
2024. 7. 5.
Java Script
<script> 태그는 javascript 선언문이다.
<script>를 선언하고 맨처음 "user strict";를 작성하는데 이는 엄격한 javascript ES6를 사용하겠다는 의미이다.
java script는 html 파일 내에 <script>태그로 작성하여 사용하는 내부 자바스트립트와
파일확장자를 js로 따로 작성하고 링크로 연결하여 사용하는 외부 자바스크립트가 존재한다.
보통 외부 자바스크립트는 <head>에 넣는 것이 정석이지만, script를 먼저 불러오면 로딩 속도가 느려지는 문제 때문에 <body>의 가장 마지막 부분이나 <body>태그의 바로 다음 줄에 넣는 경우가 많다.
defer속성은 현 요소를 마지막에 읽도록 명령하는 속성으로 <head>에 <script>를 넣는 경우 defer와 함께 사용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>스크립트 위치</title>
<!-- head에 넣은 스크립트 -->
<!-- 1. script가 여러개 있을때 defer를 넣으면 오류난다.-->
<script src="./js/welcom.js" defer></script>
<!-- 2. 링크로 script를 연결 후에 내부 스크립트를 쓰면 오류난다. -->
<script src="./js/welcom.js" defer>
document.write("hello world");
</script>
</head>
<body>
<!-- body에 넣은 스크립트 -->
<script src="./js/welcom.js"></script>
</body>
<!-- body 바로 밑에 줄에 넣은 스크립트 -->
<script>
document.write("hello world");
</script>
</html>
자바스크립트 코드 입력 시 주의사항
(= 코딩컨벤션 / 코딩스타일)
1. 대/소문자를 구분하여 작성하기.
자바스크립트는 대/소문자를 구분하여 인식하기 때문에, 만약 잘못 입력했을 경우 오류가 발생한다.
| 예시 |
| 1 |
document.write( ) |
올바른 문법. |
| 2 |
Document.write( ) |
틀린 문법으로 오류가 발생한다. |
2. 문장의 마무리는 세미콜론.
코드를 한 줄을 작성한 후에는 세미콜론(;)으로 마무리한다.
세미콜론을 쓰지 않고 한 줄에 2개의 코드를 작성하면 오류가 발생한다.
한 줄만 작성한 것이라면 세미콜론을 쓰지 않아도 오류는 안나지만 한 줄에 한 줄만 작성하는 것이 가독성이 좋다.
| 예시 |
| 1 |
document.write( ); document.write( ); |
올바른 문법. |
| 2 |
document.write( ) document.write( ) |
틀린 문법으로 오류가 발생한다. |
3. 따옴표의 겹침오류 조심하기.
문자형 데이터를 작성할 때에는 "큰따옴표"와 '작은따옴표'의 겹침 오류를 조심해야 한다.
| 맞는 문법 |
| 1 |
document.write('hello 'New' world') |
hello와 world가 다른 단어로 인식되고 가운데 New는 사라진다. |
| 2 |
document.write('hello "New' worle") |
따옴표가 교차해서 들어가면 오류가 발생한다. |
| 틀린 문법 |
| 1 |
document.write('hello "New" world') |
큰따옴표와 작은따옴표를 각각 세트로 인식하여,
오류가 발생하지 않는다. |
| 2 |
document.write("hello 'New' world") |
| 3 |
document.write('hello ‘New’ world') |
엔터틱코드를 쓰면 기호로 출력된다. |
| 4 |
document.write('hello \'New\' world') |
역슬레쉬와 함께 기호를 쓰면 문자로 처리한다. |
+) 엔터버튼 위의 ￦ 버튼이 \ 역슬레쉬 버튼이다.
역슬레쉬를 기호 앞에 붙이면 다음에 오는 기호를 단순한 문자로 처리한다.
4. 괄호의 짝이 맞아야한다.
코드를 작성할 때에는 {중괄호}나 [대괄호], (소괄호)의 짝이 맞아야한다.
| 예시 |
| 1 |
document.write( ) |
올바른 문법. |
| 2 |
document.write( } |
틀린 문법으로 오류가 발생한다. |
