작성완료
자바스크립트 문법
This blog covers JavaScript syntax and fundamental programming concepts.
기초 문법
script 태그는 자바스크립트 코드를 작성할 영역을 선언하는 것
head 태그 영역과 body태그 영역에 선언하여 사용 가능.
주석처리
선언문 안에 설명글을 적거나 코드를 생략할 때 주석처리를 하면됨.
예시
<html>
<head>
<script> 스크립트 코드 </script>
</head>
<body>
<script>
스크립트 코드
// 한줄 주석/*
여러줄 주석
여러줄 주석
*/
</script>
</body>
</html>
내부 스크립트를 외부 스크립트로 분리
// script.jsdocument.write('Hello World!!');
<!-- index.html -->
...
<head>
<title>Document</title>
<script src="script.js"></script>
</head>
...
script태그의src속성을 이용하여 JS파일의 상대경로를 통해 JS파일과 연동하여 사용- 내부에 정의된 `script
태그를 외부로 분리하는 이유는 자바스크립트 소스를 찾기 쉽고, 손상시킬 염려도 줄일 수 있음.
- 프로젝트 관리를 원활하게 할 수 있음.
> 코드 입력 시 주의 사항자바스크립트는 대,소문자를 구분하여 작성코드를 한줄에 여러 코드를 작성할 때에는 세미콜론( ; )을 사용하는 것이 좋음가독성을 높이기 위해 한 줄에 한 문장씩 작성하는 것이 좋음문자형 데이터를 쓸 때에 큰따옴표( " )와 작은따옴표( ' )의 겹침을 주의코드를 작성할 때에 괄호의 짝을 맞춰야함
### **변수**
변하는 데이터(값)을 저장할 수 있는 메모리 공간
변수에는 오직 한 개만 저장이 가능합니다. 따라서 10이라는 데이터가 저장되어 있는 a라는 변수에 20이라는 데이터를 저장하려고 할 때 기존에 저장되어 있던 데이터는 지워지고 새로운 데이터가 저장됨.
### **변수선언**
> 기본형var 변수명;
var 변수명 = 값;
- 변수를 선언할 때 한글을 사용할 수 없고, 영문과 숫자, 일부 특수문자( _ , \$ )만 사용가능.
### **변수에 저장할 수 있는 자료형**
- 문자형
문자형 데이터는 데이터가 큰따옴표 또는 작은따옴표로 감싸져 있음
그리고
HTML`태그를 포함되어 있는 문자형 데이터를 출력하면 태그로 인식
기본형
var 변수명 = '문자/숫자';예시var str = 'javascript';
var num = '1000';
var tag = '<h1>제목</h1>';
- 숫자형
숫자를 의미하고 큰따옴표가 숫자를 감싸고 있다면 Number(숫자)를 이용하여 문자형 데이터를 숫자형 데이터로 바꿔야함.
기본형
var 변수명 = 숫자 / Number('문자형 숫자');예시var num1 = 100;
var num2 = 12345;
var str = Number('500');
null과 `undefined
데이터
> null : 변수에 저장된 데이터를 비우고자 할 때 사용하는 값
undefined : 변수를 선언하고 값이 저장되기 전의 기본 값
-
typeof`
지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용
> 기본형
```javascript
typeof 변수 또는 데이터
``
### **변수 선언 시 주의 사항**
- 변수명 첫 글자로는 \$ , _ , 영문자만 사용가능
- 변수명 두번째 글자부터는 영문자, 숫자, \$ , _ 만 사용가능
- 변수명으로 예약어를 사용할 수 없음
- 변수명 작명할 때에는 되도록 의미를 부여해 작성
- 변수명을 사용할 때에는 대/소문자를 구분
### **연산자**
### **연산자의 종류**
- 산술 연산자
- 더하기, 빼기, 곱하기, 나누기, 나머지 연산이 존재
- 연산 대상 데이터가 반드시 2개가 있어야함
- 문자 결함 연산자
- 피연산자가 문자형 데이터일 때 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용
- 피연산자 중 문자형 데이터가 포함되어 있으면 다른 데이터형들을 문자형 데이터로 변환하고 문자 결합을 하여 하나의 문자형 데이터로 반환
> 기본형문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터문자형 데이터 + 문자형 이외 형태의 데이터 = 하나의 문자형 데이터
예시
'do it' + ' javaScript' = 'do it javaScript';
'100' + 200 = '100200'`;
- 대입 연산자
- 연산된 데이터를 변수에 저장할 때 사용
- 복합 대입 연산자는 산술 연산자와 대입 연산자가 복합적으로 적용
HTML에서 문자형 데이터를 복합 대입 연산자를 이용하여 하나의 문자로 결합하여 사용가능
- 증감 연산자
숫자형 데이터를 1씩 증가/감소 시키는 증가/감소 연산자가 존재
기본형변수의 값을 1만큼 감소 : 변수--; 또는 --변수;변수의 값을 1만큼 증가 : 변수++; 또는 ++ 변수;변수++ 과 ++변수의 차이var A = ++B;먼저 B의 값을 증가 시키고 증가된 B의 값을 A에 대입var A = B++;먼저 B의 값을 A에 대입하고 B의 값을 증가
- 비교 연산자
- 두 데이터를 비교할 때 사용하는 연산자
- 연산된 결과값은
true또는false로 논리형 데이터를 반환
| 종류 | 설명 | 비고 |
|---|---|---|
| A > B | A가 B보다 크다. | - |
| A < B | A가 B보다 작다. | - |
| A >= B | A가 B보다 크거나 같다. | - |
| A <= B | A가 B보다 작거나 같다. | - |
| A == B | A와 B는 같다. | 데이터형과 상관없이 표기된 데이터만 일치하면 true를 반환 |
| A != B | A와 B는 다르다. | 데이터형과 상관없이 표기된 데이터만 일치하지 않으면 true를 반환 |
| A === B | A와 B는 같다. | 데이터와 데이터형 모두가 같아야 true를 반환 |
| A !== B | A와 B는 다르다. | 데이터와 데이터형 중 하나 또는 모두가 달라야 true를 반환 |
- 논리 연산자
피연산자가 논리형 데이터인true또는false로 결과값을 반환
| 종류 | 설명 |
|---|---|
| OR ( || ) | 둘중 하나라도 true일때 true 반환 |
| AND ( && ) | 둘 모두 true일때 true 반환 |
| NOT ( ! ) | 피연산자의 값의 반대값을 반환 |
- 삼항 조건 연산자
조건식의 결과에 따라 실행 결과가 달라지는 연산자, 피연산자가 3개 필요형태조건식 ? true일때 출력값 : false일때 출력값
연산자의 우선순위
우선순위()단항 연산자 ( -- , ++ , ! )산술 연산자 ( + , - , * , / , % )비교 연산자 ( < , > , <= , >= , == , != , === , !== )논리 연산자 ( && , || )(복합)대입 연산자 ( = , += , -= , *= , /= , %= )