* 자바스크립트 선언문
- 자바스크립트 선언문은 <head> 태그 영역 또는 <body> 태그 영역에 선언하면 됨.
|
1
2
3 |
<script type="text/javascript">
자바스크립트 실행문;
</script> |
cs |
* 자바스크립트 주석 처리
|
// 한 줄 설명글인 경우
/* 설명글이 여러 줄인 경우 이렇게 처리함 */
<!-- HTML 소스의 설명글인 경우 이렇게 처리함 --> |
* 내부 스크립트 외부로 분리하기
- 외부 자바스크립트 연동 코드로 파일을 연결하는 기본형
|
<script type="text/javascript" src="소스경로"></script> |
* 자바스크립트 코드 입력 시 주의할 점
1. 자바스크립트는 대·소문자를 가려서 씀
2. 실행문을 마치고 나서는 세미콜론(;)을 쓰는 것이 좋음. 세미콜론을 쓰지 않으면, 한 줄에 여러개의 실행문을 작성할 때 문제가 생김.
3. 실행문을 작성할 때는 한줄에 한 문장만 작성하는 것이 가독성을 위해 좋음.
4. 문자형 데이터를 작성할 때는 큰따옴표("")와 작은따옴표('')겹침 오류를 주의함.
|
큰 따옴표 겹침 오류 document.write("책에 "자바스크립트는 대소문자를 가려야 합니다"라고 나와 있다.");
잘된 예 document.write('책에 "자바스크립트는 대소문자를 가려야 합니다"라고 나와 있다.'); document.write("책에 \"자바스크립트는 대소문자를 가려야 합니다\"라고 나와 있다."); |
5. 실행문을 작성할 때 중괄호{} 또는 소괄호()의 짝이 맞아야 함.
6. 사용자가 마우스가 없을 때 키보드만으로도 접근할 수 있도록 작성하도로록 함. (키보드 접근성 준수)
* 변수
- 변수에 저장할 수 있는 데이터의 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 비워진(Null) 데이터가 있음.
[변수 선언]
- 변수 선언할 때는 var 키워드를 변수명 앞에 붙임.
- 변수의 이름을 지을 때는 한글을 사용할 수 없으며, 영문과 숫자 글고 일부 특수 문자(_, $)만 포함할 수 있음.
- 두 번째 단어의 첫 글자는 대문자로 표기함. (낙타(Camel) 표기법이라 부름)
|
var 변수명; 또는 var 변수명=값; |
[변수에 저장할 수 있는 데이터형]
1) 문자형 데이터
- 문자형(String) 데이터는 문자나 숫자를 큰따옴표("") 또는 작은따옴표('')로 감싸고 있음.
|
var 변수명="사용할 문자나 숫자"; |
2) 숫자형 데이터
- 숫자형(Number) 뎅터는 변수에 저장된 데이터가 숫자만 들어가야 함.
|
var 변수명=숫자; 또는 Number("숫자"); |
3) 논리형 데이터
- 논리형(Boolean) 데이터는 true(참) 또는 false(거짓)가 있음.
- Boolean() 메서드에 입력하는 데이터 중에 숫자 0과 null, undefined를 제외한 모든 데이터는 true를 반환함.
|
var 변수명=true or false; 또는 Boolean(데이터); |
|
var s=true; // 변수 s에 true를 저장함. var t=10>=100; // 변수 t에 false를 저장함. var k=Boolean("hello"); // 변수 k에 true를 저장함. |
4) Null & Undefined 데이터
- Undefined는 변수에 아무 값도 등록되어 있지 않은 경우이고, Null은 변수에 데이터로 nul;이 저장되어 있는 경우를 가리킴.
- Null은 변수에 저장된 데이터를 비우고자 할 때 사용하는 값.
|
var s; // 값이 등록되어 있지 않은 경우 undefined var t=null/ |
5) typeof
- 지정한 데이터 또는 변수에 저장된 데이터형을 알고 싶을 때 사용함.
|
typeof 변수 또는 데이터; |
[CDATA 선언문]
- 스크립트 구문에 //<![CDATA[ //]]>을 사용한 것.
- 유효성 검사 시 태그들을 단순히 문자형 데이터로 간주하여 표준 문법으로 인식함.
- (X)HTML 내부에 자바스크립트를 작성할 때 태그를 사용하면 CDATA 선언문을 작성해야 문법 오류가 나는 것을 막을 수 있음.
[변수를 선언할 때 주의할 사항]
1. 변수명은 첫 글자로 $, _(언더바), 영문자만 올 수 있음.
2. 변수먕 첫 글자 다음은 영문자, 숫자, $, _, 숫자만 포함할 수 있음.
3. 변수명으로는 예약어(document, location, window 등)를 사용할 수 없음.
4. 변수명을 지을 때는 되도록 의미를 부여해 작성하는 것이 좋음.
5. 변수명을 사용할 때는 대·소문자를 구분해야 함.
* 연산자
[산술 연산자]
- +, -, *, /, %
[문자 결합 연산자]
- 문자 결합 연산자는 피연산자(연산 대상 데이터)가 문자형 데이터임.
- 여러 개 문자를 하나의 문자형 데이터로 결합할 때 사용함.
|
문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터 문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터 |
[대입 연산자]
- 대입 연산자(=)는 연산된 데이터를 최종적으로 변수에 저장할 때 사용함.
- 복합 대입 연산자 : 산술 연산자와 대입 연산자가 복합적으로 적용된 것 (+=, *=, /=, %=)
[증감 연산자]
- 증가 연산자(++), 감소 연산자(--)가 있음.
|
변수--; 또는 --변수; // 1 감소시킴. 변수++; 또는 ++변수; // 1 증가 시킴 |
|
var A=++B; // 변수 B의 데이터를 1 증가시킨 후 변수 A에 저장함. var A=B++; // 변수 A에 변수 B의 데이터를 저장한 후 변수 B의 데이터를 1 증가시킴. |
[비교 연산자]
- 연산된 결과의 값은 treu(참) 또는 false(거짓)으로 논리형 데이터를 반환함.
- >, <, >=, <=
- == : 숫자를 비교할 경우 데이터형(type)은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환함 10과 "10"을 비교했을 경우 true를 반환함.
- != : 숫자를 비교할 경우 데이터형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 다르면 true를 반환함. 10과 "10"를 비교했을 경우 false를 반환함.
- === : 숫자를 비교할 경우 반드시 표기된 숫자와 데이터형도 일치해야만 true를 반환함. 10과 "10"을 비교했을 경우 false를 반환함.
- !== : 숫자를 비교할 경우 반드시 표기된 숫자 또는 데이터형이 일치하지 않았을 때 true를 반환함. 10과 "10"을 비교했을 경우 true를 반환함.
[논리 연산자]
- || (or), && (and), !(not)
- 피연산자가 논리형 데이터인 true 또는 false로 결과를 반환함.
[연산자 우선순위]
1. ()
2. 단항 연상자( --, ++, ! )
3. 산술 연산자( *, /, %, +, - )
4. 비교 연산자( >, >=, <, <=, ==, ===, !== )
5. 논리 연산자( &&, || )
6. 대입(복합 대입) 연산자( =, +=, -=, *=, /=, %= )
[삼항 조건 연산자]
|
조건식 ? 실행문 1 : 실행문 2 |
* prompt() 메서드
- 사용자로부터 입력된 값은 문자형 데이터로 반환함
|
prompt("질문", "기본 응답"); |
내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
'Programming > JavaScript' 카테고리의 다른 글
| 함수 (Function) (0) | 2017.05.20 |
|---|---|
| 문서 객체 모델(DOM) (0) | 2017.05.20 |
| 브라우저 객체 모델(BOM) (0) | 2017.05.20 |
| 객체 / 내장객체 (0) | 2017.05.20 |
| 쿠키(Cookie) (0) | 2017.05.18 |
| JavaScript의 메서드 (0) | 2017.05.18 |
| JavaScript 이벤트 (0) | 2017.05.18 |
| 요소의 참조 (0) | 2017.05.17 |
