728x90
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.
1. 변수 알아보기
1) 변수 : 프로그램을 실행하는 동안 값이 여러번 달라 질 수있는 데이터
2) 상수 : 값을 지정하면 바뀌지 않는 데이터
2. 변수 선언 규칙
1) 영어문자와 _(언더스코어-아래다시), 숫자를 사용함
2) 영어 대소문자 구별함, 예약어 변수 이름 못 씀
3) 여러 단어를 연결한 변수이름은 중간에 대문자를 섞어쓰는게 좋음
4) 변수 이름은 의미있게!
3. 변수 선언하기
var 변수명;
var a, b, c; //한꺼번에 변수 지정이 가능하다.
4. 자료형
종류 | 설명 | 예시 |
숫자형 | 따옴표 없이 숫자로만 표시(정수, 실수) | var num = 1000; |
문자형 | 작은/큰따옴표로 묶어서 나타냄 | var greeting = "안녕하세요; |
논리형 | 참과 거짓 | var isEmpty = true; |
배열 | 하나의 변수에 여러 값을 저장 | var seasons = ['봄', '여름', '가을', '겨울'] |
객체 | 함수와 속성을 함께 포함 | var date = new Date(); |
undefined | 자료형이 지정되지 않았을 때 상태 | |
null | 값이 유효하지 않을때 |
- 자바스크립트에서 실수계산은 적합하지 않음. (이진수로 계산하기 때문)
- 프롬프트창에서 입력받은 값이 문자열이더라도 사칙연산에서 자동으로 숫자형으로 바뀜
5. 연산자
종류 | 설명 |
산술 연산자 | +, -, /, *, %, ++(1을 더함), --(1을 뺌) |
할당 연산자 | =, +=, -=, *=, /=, %= |
비교 연산자 | ==, !=, ===, !==, <, <=, >, >= |
논리 연산자 | !, &&(and), ||(or) |
조건 연산자 | (조건) ? true 일때 실행 : false 일때 실행 ex) 3+2 ? |
* ==와 ===차이 : ==는 자동으로 자료형을 변환하여 비교, ===는 자료형까지 비교하여 결과 출력
ex) 3 == "3" >> true 3 === "3" >> false
* 그래서 자동으로 형변환하지 않기 위해 ===를 더 많이 사용함
👉 자동 형변환
- 자바스크립트에서는 기대하는 값에 다른 자료형이 오면 자동으로 형 변환을 해준다.
var a = "10";
var b = "20";
var result = a+b; >> "1020"
var result = a-b; >> -10
6. 조건문
1) if문/ if-else문
if(조건) {
조건 결과값이 true일 때 실행 할 명령
} else {
조건 결과값ㅇ false일 때 실행할 명령
}
2) switch 문
switch(조건)
{
case 값1: 명령1
break
case 값2: 명령2
break
....
default: 명령n
}
7. 반복문
1) for문
for(초기값; 조건; 증감식) {
실행할 명령
}
2) while문
while(조건) {
실행할 명령
}
3) do-while문 : 일단 열영을 한번 실행한 후, while문에서 조건을 체크한다.
do {
실행할 명령
} while (조건)
4) break문 : 반복문이 끝나기 전에 조건에 따라 반복문을 빠져나옴
5) continue : 반복 과정을 한 차례 건너뛰고 반복문의 맨 앞으로 돌아감
728x90
'Frontend > Study' 카테고리의 다른 글
[JS] 16_자바스크립트와 객체 (0) | 2021.07.16 |
---|---|
[JS] 15_함수와 이벤트 (0) | 2021.07.13 |
[JS] 13_자바스크립트와 첫 만남 (0) | 2021.07.06 |
[CSS] 08_레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.07.02 |
[CSS] 07_텍스트를 표현하는 다양한 스타일(텍스트 속성) (0) | 2021.07.02 |