자바스크립트 기초 문법 - 선언문
선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것이다.
즉, <script> </script> 라는 태그를 선언문이라고 할 수 있다.
<script> 태그로 시작된 곳부터 </script> 태그로 종료된 곳까지 스크립트 영역이라고 한다.
<script>
자바스크립트 코드;
</script>
<script></script> 태그, 즉 선언문은 <head> 태그 영역 또는 <body> 태그 영역에 선언할 수 있다.
대부분은 <head> 태그 영역에 스크립트 선언을 하는 편이다.
자바스크립트 주석 처리
자바스크립트 선언문 안에서 코드가 아닌 설명글을 넣고 싶을 때는 주석 처리를 한다.
다른 사람이 볼 때 코드에 대한 설명을 간략하게 할 수 있으며,
필요하지 않는 코드를 주석 처리를 하여 주석 처리된 코드 결과를 보지 않을 수 있는 장점이 있다.
이때 한 줄 주석일 경우에는 // 한줄 설명글 로 작성하고,
여러 줄 주석일 경우에는 /* 여러 줄 설명글 */ 로 작성하면 된다.
// 주석이 한 줄 설명글인 경우
/*
설명글이 여러 줄인 경우
이렇게 주석 처리를 합니다.
*/
<!-- HTML 소스의 설명글(주석)은 이렇게 처리합니다 -->
내부 스크립트 외부로 분리하기
HTML 내부에 작성된 자바스크립트는 외부로 분리하는 작업을 하면
자바스크립트 소스 코드를 찾기 쉬울 뿐만 아니라 누군가 소스를 손상시킬 염려도 없다.
즉, 외부로 분리하는 주된 목적은 프로젝트 관리를 원활하게 하기 위해서이다.
<script src = "자바스크립트 파일 경로"></script>
1. 내부 스크립트 외부로 분리하기 - JS 파일 생성 (example.js)
document.write("환영합니다");
2. 내부 스크립트 외부로 분리하기 - HTML 파일에서 연동하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src ="/js/example.js"></script>
</head>
<body>
</body>
</html>
코드 입력 시 주의 사항
1. 자바스크립트는 대소문자를 구분하여 작성합니다.
날짜 객체 생성 : New date(); (X)
날짜 객체 생성 : new Date(); (O)
2. 코드 한줄을 작성한 후에는 세미콜론(;)을 사용하는 것이 좋습니다.
세미콜론을 쓰지 않으면 다음 예제처럼 한 줄에 2개의 코드를 작성할 경우 오류가 발생합니다.
document.write("hi") document.write("bye") (X)
document.write("hi"); docuement.write("bye"); (O)
3. 하지만 코드를 작성할 때는 한 줄에 한 문장만 작성하는 것이 가독성을 위해 좋습니다.
4. 문자형 데이터를 작성할 때는 큰따옴표(" ")와 작은따옴표(' ')의 겹침 오류를 주의해야 합니다.
큰따옴표 겹침 오류
document.write("책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.");
잘된 예
document.write('책에 "자바스크립트는 대소문자를 구분해야 합니다"라고 나와 있다.');
document.write("책에 \자바스크립트는 대소문자를 구분해야 합니다\라고 나와 있다.");
5. 코드를 작성할 때 중괄호{} 또는 소괄호()의 짝이 맞아야 합니다.
document.write("welcome"; (X)
document.write("welcome"); (O)
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| [JavaScript] 제어문 (2) - 선택문 switch문 (0) | 2024.01.28 |
|---|---|
| [JavaScript] 제어문 (1) - 조건문(if, else, else if, 중첩 if) (0) | 2024.01.28 |
| [JavaScript] JavaScript 시작하기 (4) - 연산자 (0) | 2024.01.17 |
| [JavaScript] JavaScript 시작하기 (3) - 변수 (0) | 2024.01.17 |
| [JavaScript] JavaScript 시작하기 (1) - JavaScript 정의 및 맛보기 예제 (0) | 2024.01.17 |