💻 1. 웹개발_Front end/1-4 Javascript
[Javascript] 02-3 연산자
달님🌙
2021. 9. 5. 16:45
반응형
연산자란 ?
- 종류 : 산술, 문자 결합, 대입, 복합대입, 증감, 비교, 논리, 삼항 조건 연산자
-우리가 아는 사칙연산의 +, -, ×, ÷ 를 할 수 있게 해줌
산술 연산자
문자 결합 연산자
- 더하기 연산에 문자형 데이터가 한 개라도 들어있으면 다른 데이터들은 자동으로 문자형 데이터로 형변환된다.
<!DOCTYPE html>
<html lang="ko">
<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>operator</title>
</head>
<body>
<script>
var num1 = 15;
var num2 = 2;
var result;
var str1 = "java";
var str2 = "script";
var strResult;
var number1 = "100";
var number2 = "200";
result = num1 + num2;
document.write(num1 + " + " + num2 + " = " + result + "<br>"); // 15 + 2 = 17
result = num1 - num2;
document.write(num1 + " - " + num2 + " = " + result + "<br>"); // 15 - 2 = 13
result = num1 * num2;
document.write(num1 + " x " + num2 + " = " + result + "<br>"); // 15 * 2 = 30
result = num1 / num2;
document.write(num1 + " ÷ " + num2 + " = " + result + "<br>"); // 15 / 2 = 7.5
result = num1 % num2;
document.write(result + "<br>"); // 15 % 2 = 1
strResult = str1 + str2;
document.write(strResult + "<br>"); // java + script = javascript
strResult = num1 + str1;
document.write(strResult + "<br>"); // 15 + java = 15java
document.write(number1 + number2 + "<br>"); // "100" + "200" = "100200"
</script>
</body>
</html>
대입 연산자
- 연산된 데이터를 변수에 저장할 때 사용
복합 대입 연산자
- 산술 연산자와 대입 연산자가 복합적으로 적용
<!DOCTYPE html>
<html lang="ko">
<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>dboperator</title>
</head>
<body>
<script>
var num1 = 10;
var num2 = 3;
num1 += num2; //num1 = 10 + 3
document.write(num1, "<br>");
num1 -= num2; //num1 = 13 - 3
document.write(num1, "<br>");
num1 *= num2; //num1 = 10 * 3
document.write(num1, "<br>");
num1 /= num2; //num1 = 30 / 3
document.write(num1, "<br>");
num1 %= num2; //num1 = 10 % 3
document.write(num1, "<br>");
</script>
</body>
</html>
<script>
var str = "<table border='1'>";
str += "<tr>";
str += "<td>1</td><td>2</td><td>3</td>";
str += "</tr>";
str += "</table>";
document.write(str);
</script>
증감 연산자
<!DOCTYPE html>
<html lang="ko">
<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>growthoperator</title>
</head>
<body>
<script>
var num1 = 10;
var num2 = 20;
var result;
num1--; // num1 = 10 - 1 = 9
document.write("num1 = " + num1, "<br>");
num1++; // num1 = 9 + 1 = 10
document.write("num1 = " + num1, "<br>");
result = num2++; // result = 20, num2 = 21
document.write("num2 = " + num2, "<br>");
document.write("result = " + result, "<br>");
result = ++num2; // num2 = 22, result = 22;
document.write("num2 = " + num2, "<br>");
document.write("result = " + result, "<br>");
</script>
</body>
</html>
비교 연산자
- 두 데이터를 크다, 작다, 같다와 같이 비교할 때 사용하는 연산자
- 결과값은 true 또는 false로 반환한다.
<!DOCTYPE html>
<html lang="ko">
<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>comparison</title>
</head>
<body>
<script>
var a = 10;
var b = 20;
var c = 10;
var d = "10";
var e = 10;
var f = "20";
var result;
result = a > b; //false
document.write(result + "<br>");
result = a < b; //true
document.write(result + "<br>");
result = a <= b; //true
document.write(result + "<br>");
result = b <= d; //false 문자형과 숫자형 비교
document.write(result + "<br>");
result = b <= f; //true 문자형과 숫자형 비교
document.write(result + "<br>");
result = b == f; //true 문자형과 숫자형 비교
document.write(result + "<br>");
result = a != b; //true
document.write(result + "<br>");
result = b === f; //false 변수형까지 동일해야 true
document.write(result + "<br>");
result = c != d; //false 값만 같아도 false
document.write(result + "<br>");
result = c !== d; //true 변수형까지 동일해야 false
document.write(result + "<br>");
result = c !== e; //false 변수형이 달라야 true
document.write(result + "<br>");
</script>
</script>
</body>
</html>
논리 연산자
연산자 우선순위
<!DOCTYPE html>
<html lang="ko">
<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>operator prior</title>
</head>
<body>
<script>
var a = 10;
var b = 20;
var m = 30;
var n = 40;
var result;
result = a > b || b >= m || m > n; // false
// 하나만 true여도 true리턴 false || false || false
document.write(result, "<br>");
result = a > b || b >= m || m <= n; // true
// 하나만 true여도 true리턴 false || false || true
document.write(result, "<br>");
result = a<= b && b >= m && m <= n; // false
// 모두 true여야 true리턴 true && false && true
document.write(result, "<br>");
result = a<= b && b < m && m <= n; // true
// 모두 true여야 true리턴 true && true && true
document.write(result, "<br>");
result = !(a > b);
// true면 false, false면 true리턴 !(false)
document.write(result, "<br>"); // true
</script>
</body>
</html>
삼항 조건 연산자
<!DOCTYPE html>
<html lang="ko">
<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>three condi</title>
</head>
<body>
<script>
var a = 10;
var b = 3;
// a > b true면 "javascript" 리턴
var result = a > b ? "javascript" : "hello";
document.write(result, "<br>");
// a <= b false면 "hello" 리턴
var result = a <= b ? "javascript" : "hello";
document.write(result, "<br>");
</script>
</body>
</html>
총정리 실습 - 적정 체중 구하는 테스트기 만들기
<!DOCTYPE html>
<html lang="ko">
<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>weight</title>
</head>
<body>
<script>
var userHeight = 159;
var userWeight = 52;
var normal_w = (userHeight - 100) * 0.9;
document.write(normal_w);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<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>weight</title>
</head>
<body>
<script>
// prompt의 ,뒤 값은 초기 표출되는 값
var username = prompt("이름은?", "");
var userHeight = prompt("신장은?", "0");
var userWeight = prompt("몸무게는?", "0");
var normal_w = (userHeight - 100) * 0.9;
//정상체중에서 오차범위인 -5, +5 사이 일때 true 리턴
var result = userWeight >= normal_w - 5 && userWeight <= normal_w + 5;
// result 값이 true 면 "적정 체중입니다." 아니면 "적정 체중이 아닙니다." 리턴
// javascript는 변수형을 지정하지 않아서 boolean값을 담았다가 다시 string값을 담을 수 있다.
result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
document.write(username + "님은 " + result, "<br>");
// 알림창으로 팝업 띄우기
</script>
</body>
</html>
반응형