자바스크립트

자바스크립트 선언문

선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것이라고 이해하면 됩니다.

<script>
    자바스크립트코드;
</script>

선언문은 <head> 태그 영역 또는 <body> 태그 영역에 선언하면 됩니다. 다음은 선언문을 작성하는 예제입니다.

01: <!DOCTYPE html>
02: <html lang="ko">
03: <head>
04:    <meta charset="UTF-8">
05:    <title>Document</title>
06:    <script>
07:        자바스크립트코드;
08:    </script>
09: </head>
10: <body>
11: </body>
12: </html>

자바스크립트 주석 처리

자바스크립트 선언문 안에서 코드가 아닌 설명글을 넣고 싶을 때는 주석 처리를 하면 됩니다. 이때 한 줄 주석일 경우에는"//한 줄 글 설명글" 작성하고, 여러줄 주석일 경우에는 /*여러 줄 설명글*/로 작성하면 됩니다.

//한 줄 설명글인 경우
/*
설명글이 여러 줄인 경우
이렇게 처리합니다. 
*/
<!--HTML 소스의 설명글은 이렇게 처리합니다.-->

코드를 작성할 때 이렇게 설명글을 달아 놓으면 시간이 흘러도 잊어버리지 않겠죠?

내부 스크립트 외부로 분리하기

앞의 예제 [statement_c.html]에서 HTML 내부에 작성된 자바스크립트는 마지막에는 외부로 분리하는 작업을 해야 합니다. 그렇게 하면 자바스크립트 소스 찾기도 쉬울 뿐만 아니라 누군가가 소스를 손상시킬 염려도 없습니다. 즉 외부로 분리하는 주된 목적은 프로젝트 관리를 원활하게 하기 위함입니다. 다음은 외부 자바스크립트 연동 코드로 파일을 연결하는 기본형입니다.

<script src="JS 파일 경로"></script>

내부스크립트를 외부로 분리하려면 따로 파일을 만들어서 저장해야합니다. 즉, HTML 파일과 JS(자바스크립트)파일을 분리하여 HTML 내에서 JS(자바스크립트)파일을 연동하면 됩니다.

내부 스크립트 분리하기

1. js파일을 만들어 보겠습니다. 먼저 비주얼 스튜디오 코드에서 [파일 - 새 파일 - 보통문서]를 선택하거나 단축기 ctrl + N을 눌러 빈문서를 엽니다. 그런다음 다음과 같이 코드를 작성하고 문서를 저장합니다.

01: document.write("환영합니다.");

2. 파일을 열어 앞에서 작성한 js파일을 연동합니다. 다음과 같이 코드를 작성합니다. 만약 연동이 잘 되지 않으면 src 값에 js파일의 전체 경로를 넣어보세요

01: <!DOCTYPE html>
02: <html lang="ko">
03: <head>
04:    <meta charset="UTF-8">
05:    <title>외부 자바스크립트 연동</title>
06:    <script src="JS 파일 경로"></script>
07: </head>
08: <body>
09: </body>
10: </html>

내부 스크립트가 분리되었습니다. 이렇게 분리하면 소스를 분석할 때 찾기 쉬울뿐 아니라 다른 개발자가 잘못하여 소스를 손상시킬 일도 없겠죠.

코드 입력 시 주의 사항

다음은 자바스크립트를 작성할 떄 주의해야 할 몇가지 사항입니다.

1. 자바스크립트는 대.소문자를 구분하여 작성합니다.

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

2. 코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋습니다. 세미콜론을 쓰지 않으면 다음 예제처럼 한줄에 2개의 코드를 작성할 경우 오류가 발생합니다.

document.write("hi") document.write("bye") (X)
document.write("hi"); documnet.wirte("bye"); (O)

3. 하지만 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 가독성을 위해 좋습니다.

4. 문자형 데이터를 작성할 때는 큰따옴표("")와 작은따옴표('')의 겹칩 오류를 주위해야 합니다.

큰따옴표 겹침 오류
documnet.write("책에"자바스크립트는 대소문자를 구분해야합니다."라고 나와 있다.");

잘된 예
documnet.write('책에"자바스크립트는 대소문자를 구분해야 합니다."라고 나와 있다.');
document.write("책에\"자바스크립트는 대소문자를 구분해야 합니다.\"라고 나와있다");

5. 코드를 작성 할 때 중괄호{} 또는 소괄호()의 짝이 맞아야 합니다.

document.write("welcome!"}; (X)
document.write("welcome!"); (O)