1. 연산자 종류
- 대입 연산자
- 사칙 연산자 : +, -, *, /(몫), %(나머지)
- 단항 연산자 : 변수에 대한 연산 결과를 다시 자기 자신에게 적용하는 경우
var x = 100;
x = x+5;
-------------
x += 5;
- 증감 연산자 : 특정 변수에 저장되어 있는 값을 1씩 증가, 감소 시킬 경우
x = x+1;
x += 1;
x++;
++x;
---------
x = x-1;
x -= 1;
x--;
--x;
- 비교 연산자 : 두 개 변수 값 간의 관계를 비교해서 true나 false의 결과 반환
- 논리 연산자 : 좌변과 우변을 논리 연산하고, 참일 때는 true, 거짓일 때는 false 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = 100 + 30;
var num2 = 100 - 30;
var num3 = 100 * 30;
var num4 = 100 / 30;
var num5 = 100 % 30;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);
console.log(num5);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 100;
num += 5;
console.log(num);
num -= 3;
console.log(num);
num *= 5;
console.log(num);
num /= 3;
console.log(num);
num % 3;
console.log(num);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var plus_num = 1;
plus_num = plus_num + 1;
plus_num += 1;
plus_num++;
++plus_num;
console.log(plus_num);
var minus_num = 4;
minus_num = minus_num - 1;
minus_num -= 1;
minus_num--;
--minus_num;
console.log(minus_num);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var a1 = 100;
var x1 = 1;
var y1 = a1 + x1++;
console.log(x1);
console.log(y1);
var a2 = 100;
var x2 = 1;
var y2 = a2 + ++x2;
console.log(x2);
console.log(y2);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var msg1 = '안녕하세요';
var msg2 = '자바스크립트';
var msg3 = msg1 + ' ' + msg2;
console.log(msg3);
console.log('------------------------');
var msg4 = "인녕하세요";
var num = 1234;
var result = msg4 + num;
console.log(result);
console.log('------------------------');
var name = '한서진';
var name2 = 'hsj';
var name3 = `일반 문자열 ${name}`;
console.log(name3);
</script>
</body>
</html>
2. 일치 연산자
- ==
- 일치 연산자로 좌항과 우항이 '엄격', '정확'하게 같을때 true, 다르면 false
- javascrop. php는 비슷한 것을 같을 것으로 간주하기도 함. 따라서 ===를 사용할 것을 권장
- !== : 정확하게 같지 않다는 의미
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(1 == 2);
console.log(1 == 1);
console.log("one" == "one");
console.log("one" == "two");
console.log("----------------");
console.log(1 == "1");
console.log(1 === "1");
console.log("----------------");
console.log(null == undefined);
console.log(null === undefined);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var numA = 11;
console.log(typeof(numA));
var numB = '안녕하세요';
console.log(typeof(numB));
console.log('----------------------');
var a;
a = a ?? 10;
console.log(a);
</script>
</body>
</html>
3. HTML의 결과 출력하기
document.write(출력 내용);- HTML 페이지의 태그 안을 javascript에서는 doucument(=문서)라고 함
- 태그 안에 새로운 내용을 출력하고자 할 경우 자바스크립트에게 "쓰다(write)라는 명령어를 전달
document.write("<h1> 출력 내용 <h1>");
- HTML 태그 안에 출력되는 내용이므로, HTML 태그를 포함하여 출력할 수 있음
