선언문
<script>
자바스크립트 코드
</script>
<head></head> 영역이나 <body></body> 영역에 선언한다.
대부분 <head> 영역에 선언
주석처리
//한 줄
/*
설명이
여러 줄
*/
<!-- HTML 소스의 주석은 이렇게 -->
내부 스크립트 외부로 분리
<script src="JS 파일 경로"></script>
외부로 분리하려면 따로 파일을 만들어야 한다.
코드 작성 시 주의 사항
- 자바스크립트는 대, 소 문자를 구분하여 작성한다.
- 코드 한 줄을 작성한 후에는 세미콜론(;)을 쓰는 것이 좋다.
- 한 줄에 한 문장만 작성하는 것이 가독성을 위해 좋다.
- 문자형 데이터를 작성할 때는 큰따옴표(" ")와 작은따옴표(' ')의 겹침 오류를 주의해야 한다.
- 코드를 작성할 때 중괄호 {} 또는 소괄호 ()의 짝이 맞아야 한다.
변수
변하는 데이터(값)를 저장할 수 있는 메모리 공간
변수 선언
var 변수명; or var 변수명 = 값;
var box;
box = 100;
box에 100을 저장
box = 30;
document.write(box); // 30 출력
변수에 저장 가능한 자료형
문자형(String), 숫자형(Number), 논리형(Boolean), 빈 데이터(Undefined)가 있다.
문자형
var 변수 = "사용할 문자나 숫자";
var s = "javascript";
var num = "100";
var tag = "<h1> String </h1>";
숫자형
var 변수 = 숫자; or Number("문자형 숫자");var s = 100;var t = Number("100"); // "100" -> 100
논리형
데이터는 true(참) 또는 false(거짓)가 있다.var 변수 = true or false; 또는 Boolean(데이터);var s = true;var t = 10>=100; //falsevar k = Boolean("hello") //trueBoolean() 메서드는 데이터를 입력하면 논리형 데이터인 true 또는 false를 반환
숫자 0과 null, undefined, 빈 문자(" ")를 제외한 모든 데이터에 대한 true를 반환
null & undefined 데이터
undefined는 변수에 값이 등록되기 전의 기본값이고, null은 변수에 저장된 값이 null인 경우를 가리킨다.
var s; //undefined
var t = hello;
t = null;
typeof
지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용
typeof 변수 또는 데이터;
var num = 100;
var str = "자바스크립트";
document.write(typeof num, "<br>"); //number
document.write(typeof str); //string
변수 선언 시 주의 사항
- 변수명 첫 글자로는 $, _(언더바), 영문자만 올 수 있다.
- 변수명 첫 글자 다음은 영문자, 숫자, $, _(언더바)만 포함할 수 있다.
- 변수명으로 예약어(document, location, window 등)를 사용할 수 없다.
- 변수명을 지을 때는 되도록 의미를 부여해 작성하는 것이 좋다.
- 변수명을 사용할 때에는 대, 소 문자를 구분해야 한다.
연산자
산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다.
산술 연산자
| 종류 | 기본형 | 설명 |
| + | A + B | 더하기 |
| - | A - B | 빼기 |
| * | A * B | 곱하기 |
| / | A / B | 나누기 |
| % | A % B | 나머지 |
문자 결합 연산자
피연산자(연산 대상 데이터)가 문자형 데이터. 여러 개의 문자를 하나의 무자형 데이터로 결합할 때 사용.
더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있으면 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형 변환되고 문자 결합이 이루어져 하나의 문자형 데이터를 반환한다.
"안녕" + "하세요" = "안녕하세요";
"100" + 200 = "100200";
대입 연산자
| 종류 | 풀이 |
| A = B | A = B |
| A += B | A = A + B |
| A *= B | A = A * B |
| A /= B | A = A / b |
| A %= B | A = A % B |
증감 연산자
증감 연산자는 숫자형 데이터를 1씩 증가시키는 연산자 ( ++ ), 반대로 1씩 감소시키는 감소 연산자 ( -- )
변수--; --변수;
변수++; ++변수;
var A = ++B;
var A = B++;
비교 연산
| 종류 | 설명 | 비고 |
| A > B | A가 B보다 크다. | |
| A < B | A가 B보다 작다. | |
| A >= B | A가 B보다 크거나 같다. | |
| A <= B | A가 B보다 작거나 같다. | |
| A == B | A와 B는 같다. | 숫자를 비교할 경우 자료형(type)은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환. 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 true 반환 |
| A != B | A와 B는 다르다. | 숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 다르면 true를 반환. 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 false 반환 |
| A === B | A와 B는 같다. | 숫자를 비교할 경우 반드시 표기된 숫자와 자료형도 일치해야만 true를 반환. 숫자형 10과 문자형 "10"을 비교 했을 경우 표기된 숫자는 같지만 하나는 숫자형이고 하나는 문자형이기 때문에 false를 반환 |
| A !== B | A와 B는 다르다. | 숫자를 비교할 경우 반드시 표기된 숫자 또는 자료형이 일치하지 않을 때 true를 반환. 숫자형 10과 문자형 "10"을 비교했을 경우 표기된 숫자는 같지만 하나는 숫자형 하나는 문자형이므로 true를 반환 |
논리 연산자
| 종류 | 설명 |
| || | or 연산자라 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결괏값을 반환한다. |
| && | and 연산자라 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false 로 결괏값을 반환한다. |
| ! | not 연산자라 부르며, 단항 연산자. 피연한자의 값이 true면 반대로 false로 결괏값을 반환. |
연산자 우선순위
- ()
- 단항 연산자(--, ++, !)
- 산술 연산자(*, /, %, +, -)
- 비교 연산자(>, >=, <, <=, ==, ===, !==, !=)
- 논리 연산자(&&, ||)
- 대입(복합 대입) 연산자(=, +=, -=, *=, /=, %=)
삼항 조건 연산자
조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2
var a = 10;
var b = 3;
var result = a > b ? "javascript" : "hello";
document.write(result); //javascript
'Develop > 자바스크립트 + 제이쿼리' 카테고리의 다른 글
| 함수 (0) | 2020.10.18 |
|---|---|
| 객체 - 브라우저 객체 (0) | 2020.10.17 |
| 객체 - 내장 객체 (0) | 2020.10.15 |
| 제어문 (0) | 2020.10.15 |
| 자바스크립트 시작 (0) | 2020.10.14 |
댓글