1. Number Data type
이항연산자 - 왼쪽(좌항)에 있는 값과 오른쪽(우항)에 있는 값을 처리해서 하나의 값을 만들어내는 역할
console.log(1);
console.log(1+1);
console.log(4-1);
console.log(2*3);
console.log(10/2);
2. String Data type
String(문자열) 표현 : " " , ' '
어떤 데이터를 사용하냐에 따라 연산자의 의미가 바뀜
"+" 이항연산자 -> 결합 연산자
//이항 연산자
console.log(1+1); // 2
//결합 연산자
console.log('1'+'1'); // 11
String count
string.length
console.log('abcd'.length);
3. Variable
var a = 1;
console.log(a);
변수 선언시 변수 앞에 var 를 붙이는 것이 좋음
코드 상에서의 줄바꿈
\
출력 상에서의 줄바꿈
\n
var name = 'k8805';
// String literals
var letter = 'Dear '+name+'\n\nabcdefg'+'\
\
abc';
console.log(letter);
4. Template literals
키보드를 보면 ~ 표시 옆에 ` 가 있는데 이를 이용
var letter = `Dear ${name}
abcdefg`;
console.log(letter);
개행문자 \n를 사용하지 않고 enter를 쳐도 error없이 출력됨
변수를 넣어서 치환하고 싶을 때
+name+ 대신에 ` ` 안에서 ${name}을 사용함
`${1+1}` 의 경우 1+1 의 연산결과가 출력됨
※ 5번 6번 7번 세가지는 서로 밀접한 관계에 있기 때문에 같이 생각하는 것이 좋음
5. Boolean Data type
console.log(true);
console.log(false);
실행하면 각각 true와 false가 출력된다.
true는 변수 이름으로 쓸 수 없음
6. Comparison operator (비교연산자)
좌항과 우항을 비교해서 true나 false 둘 중에 하나의 값을 만들어내는 연산자
console.log(1==1); //true
console.log(1==2); //false
console.log(1===1); //true
console.log(1>2); //false
console.log(1<2); //true
'=' 는 개수에 따라 의미가 다름
= 1개 (name=1) : 대입 연산자
= 2개 (name==1) : 비교 연산자 (좌항과 우항의 값이 같으면 true, 다르면 false)
= 3개 (name===1) : 비교 연산자 ( 좌항과 우항의 값이 정확하게 같은지 비교해주는 연산자)
☆ 비교연산자를 사용할 때, == 보다는 === 권장
7. Conditional Statement (조건문)
조건에 따라 실행문의 흐름 제어
if 괄호 안에는 문법적으로 true/false 즉, boolean형이 들어감
if(true){
console.log('C1');
}
if(false){
console.log('C2');
}
위 코드와 아래의 코드는 동일하다. true가 아니면 false이기 때문에 if (true){..} else{..} 를 쓸 수 있다.
if(true){
console.log('C1');
}
else{
console.log('C2');
}
8. loop (반복문)
for문, while문, do-while문
- while문 (가장 기초적이지만 불편)
while 괄호 안에는 if 괄호 안과 마찬가지로 boolean형을 넣는다.
while 괄호 안에 true를 넣으면 : 무한 반복문
아래 코드와 같이 i<5를 넣으면 반복문이 실행될때 마다 i가 1씩 커지고, i가 5가 되면 false가 되므로 반복문을 종료한다.
var i=0;
while(i<5){
console.log(i);
i=i+1;
}
'Web > HTML+CSS+JavaScript' 카테고리의 다른 글
[JavaScript] Function (0) | 2020.07.25 |
---|---|
[JavaScript] Array data type (0) | 2020.07.25 |
[HTML] 기본문법 태그 (0) | 2020.07.13 |
[HTML+CSS3] 링크만들기 (0) | 2020.05.25 |
[HTML+CSS3] 이미지삽입하기 (0) | 2020.05.19 |