1. 연산자(Operator)의 정의
변수나 값의 연산을 위해 사용되는 부호
연산의 대상이 되는 것을 피연산자라 함
2. 연산자(Operator)의 유형
항이란 해당 연산을 실행하기 위해 필요한 값이나 변수를 의미
- 단항연산자 : 피연산자가 1개
a++, a-, ++a, --b, -a - 이항연산자: 피연산자가 2개
a+b, a=b, a==b, a>3 - 삼항연산자: 피연산자가 3개
condition ? valA : valB
2.1 산술연산자(arithmetic operator)
사칙연산을 다루는 가장 기본적이면서 많이 사용하는 연산자
모두 두 개의 피연산자를 가지는 이항 연산자이며, 왼쪽에서 오른쪽으로 결합
// 산술연산자
let x = 11,
y = 3; // 변수 선언 및 값 대입
document.write(x + y + "<br>") // 더하기 연산자
document.write(x - y + "<br>") // 빼기 연산자
document.write(x * y + "<br>") // 곱하기 연산자
document.write(x / y + "<br>") // 나누기 연산자
document.write(x % y + "<br>") // 나머지 연산자
document.write(parseInt(x / y) + "<br>")
// 나머지 연산자
2.2 대입연산자(assignment operator)
변수에 값을 대입할 때 사용하는 이항 연산자
산술연산자와 결합한 다양한 복합 대입 연산자가 존재
let x = 10,
y = 10,
z = 10;
x += 5; // x = x + 5
document.write(x + "<br>")
y -= 5; // y = y - 5
document.write(y + "<br>")
z *= 5; // z = z * 5
document.write(z + "<br>")
2.3 증감연산자(increment and decrement operator)
피연산자를 1씩 증가 혹은 감소 시킬때 사용하는 단항연산자
let x = 10,
y = 10;
document.write((++ x) - 3); // 8 출력
document.write(x); // 11 출력
x = 10;
document.write(x++ - 3); // 7 출력
document.write(x); // 11 출력
2.4 비교연산자(comparison operator)
피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false) 반환하는 이항연산자
document.write(10 > 5, "<br>"); // true 출력
document.write(5 == 5, "<br>"); // true 출력
document.write(5 == "5", "<br>"); // true 출력
document.write(5 === "5", "<br>"); // false 출력
document.write(5 != "5", "<br>"); // false 출력
document.write(5 !== "5", "<br>"); // true 출력
2.5 논리연산자(logical operator)
주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환하는 연산자
let x = true,
y = false;
document.write((x && y), "<br>") // false
document.write((x || y), "<br>") // true
document.write((! x), "<br>") // false
let a = 10,
b = 20,
c = 30
document.write(a < b && b >= c, "<br>") // false
document.write(a < b || b >= c, "<br>") // true2.6 비트연산자(bitwise operator)
비트연산자는 논리연산자와 비슷하지만, 비트(bit) 단위로 논리 연산을 수행
비트 단위로 전체비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용
// 비트연산자
let x = 15,
y = 8,
z = 15;
document.write((0 & 1), "<br>") // 대응되는 비트가 모두 1인 아니면 0을 반환
document.write((0 | 1), "<br>") // 대응되는 비트가 하나라도 1인면 1을 반환
document.write("왼쪽으로 1칸 이동" ,(x << 1), "<br>") // 00000000 00000000 00000000 00001111 -> 00000000 00000000 00000000 00011110
document.write("오른쪽으로 1칸 이동", (y >> 1), "<br>") // 00000000 00000000 00000000 00001000 -> 00000000 00000000 00000000 00000100
2.7 문자열 결합 연산자(+)
피연산자가 둘 다 숫자이면, 산술 연산인 덧셈을 수행
피연산자가 하나라도 문자열이면, 문자열 결합을 수행
// 문자열 결합 연산자
let x = 3 + 4;
let y = "좋은" + "하루 되세요!";
let z = 12 + "월";
document.write(x, "<br>") // 7
document.write(y, "<br>") // 좋은하루 되세요
document.write(z, "<br>") // 12월2.8 연산자 우선순위
단항연산자 > 산술연산자 > 비교연산자 > 논리연산자 > 삼항연산자 > 대입연산자
let a = 2;
let b = 3;
let c = 5;
let result = c > ++ a * b;
document.write(result) // ad에 1을 더한 후 b를 곱한다 그 값이 c 보다 큰지 비교한다
응용과제
적정 체중구하는 프로그램 작성
(변수, 연산자, 삼항연산자 응용)
1. 사용자로부터 신장과 체중을 입력받아 출력하시오.
"당신의 신장은 000, 체중은 00입니다."
2. 적정 체중을 구하고 출력하시오.(키-100)*0.9;
"적정 체중은 000입니다"
3. 사용자의 체중과 적정 체중을 비교하고 그 결과에 따라 문서에 내용을 출력하세요.(삼항연산자)
- 적정 체중을 초과할 경우 "적정 체중을 초과했습니다."
-그렇지 않을 경우 "적정 체중이거나 미달입니다."
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문제</title>
</head>
<body>
<script>
let your_height = prompt("당신의 신장을 입력하세요")
let your_weight = prompt("당신의 체중을 입력하세요")
document.write(`당신의 신장은 ${your_height}, 체중은 ${your_weight}입니다.<br>`)
let standard_weight = (your_height - 100) * 0.9
document.write(`적정 체중은 ${standard_weight}입니다<br>`)
your_weight > standard_weight ? document.write("적정 체중을 초과했습니다") : document.write("적정 체중이거나 미달입니다");
</script>
</body>
</html>
'HTML, CSS, JS' 카테고리의 다른 글
| CSS : 그레디언트 속성 (0) | 2022.08.30 |
|---|---|
| 구글 웹폰트 적용 하기 (2) | 2022.08.30 |
| CSS3 속성 (0) | 2022.08.30 |
| 공간분할태그 및 CSS 선택자 (0) | 2022.08.29 |
| 자바스크립트 기초 문법 - 변수 (0) | 2022.08.25 |