본문 바로가기
프로그램언어/HTML&부트스트랩

연산자

eduview 2021. 7. 5. 19:01

산술 연산자

산술 연산자설명

연산자 설명
+ 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함.
- 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌.
* 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함.
/ 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔.
% 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 반환함.

 

<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h3>산술연산</h3>
<hr>
<script>
  var x=32;
  var total = 100 + x*2/4 - 3; // total은 113
  var div = x / 10; // div는 3.2
  var mod = x % 2; // x를 2로 나눈 나머지, 0
 
  document.write("x : " + x + "<br><br>");
  document.write("100 + x*2/4 - 3 = " + total + "<br>");
  document.write("x/10 = " + div + "<br>");
  document.write("x%2 = " + mod + "<br>");
</script>
</body>
</html>		 실행 결과]
x : 32

100 + x*2/4 - 3 = 113
x/10 = 3.2
x%2 = 0

 

 

증감 연산자

 

증감 연산자설명

연산자 설명
++x 먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함.
x++ 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴.
--x 먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함.
x-- 먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴.

 

 

<!doctype html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script type="text/javascript">
<!--
  var a = 7, b = 7;
  document.write(++a + "<br>");
  document.write("a의 값 : " + a + "<br>");
  document.write(a++ + "<br>");
  document.write("a의 값 : " + a + "<br>");

  document.write(--b + "<br>");
  document.write("b의 값 : " + b + "<br>");
  document.write(b-- + "<br>");
  document.write("b의 값 : " + b + "<br>");
//-->
</script>
</body>
</html>		 실행결과]
8
a의 값 : 8
8
a의 값 : 9
6
b의 값 : 6
6
b의 값 : 5

 

대입 연산자

 

 

대입 연산자설명

연산자 설명
= 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입함.
+= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후, 그 결괏값을 왼쪽 피연산자에 대입함.
-= 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후, 그 결괏값을 왼쪽 피연산자에 대입함.
*= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후, 그 결괏값을 왼쪽 피연산자에 대입함.
/= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 결괏값을 왼쪽 피연산자에 대입함.
%= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눈 후, 그 나머지를 왼쪽 피연산자에 대입함.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>대입 연산</h3>
<script>
  var x=3, y=3, z=3;
  document.write("x=" + x + ", y=" + y);
  document.write(", z=" + z + "<br><br>");
 
  x += 3; // x=x+3 -> x=6
  y *= 3; // y=y*3 -> y=9
  z %= 2; // z=z%2 -> z=1
 
  document.write("x += 3; 실행 후, x=" + x + "<br>");
  document.write("y *= 3; 실행 후, y=" + y + "<br>");
  document.write("z %= 2; 실행 후, z=" + z);
</script>
</body>
</html>		 실행결과]

대입 연산

x=3, y=3, z=3

x += 3; 실행 후, x=6
y *= 3; 실행 후, y=9
z %= 2; 실행 후, z=1

 

 

비교 연산자

 

비교 연산자설명

연산자 설명
== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함.
=== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함.
!= 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함.
!== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함.
> 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함.
>= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함.
< 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함.
<= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>비교 연산</h3>
<script>
  var x=13, y=7;
  document.write("x=" + x + ", y=" + y + "<br><br>");
  document.write("x == y : " + (x == y) + "<br>");
  document.write("x != y : " + (x != y) + "<br>");
  document.write("x >= y : " + (x >= y) + "<br>");
  document.write("x > y : " + (x > y) + "<br>");
  document.write("x <= y : " + (x <= y) + "<br>");
  document.write("x < y : " + (x < y) + "<br>");
</script>
</body>
</html>		 실행결과]

비교 연산

x=13, y=7

x == y : false
x != y : true
x >= y : true
x > y : true
x <= y : false
x < y : false

 

 

논리 연산자

 

논리 연산자설명

연산자 설명
&& 논리식이 모두 참이면 참을 반환함. (논리 AND 연산)
|| 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산)
! 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산)

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<h3>논리 연산</h3>
<script>
  var x=true; y=false;
  document.write("x=" + x + ", y=" + y + "<br><br>");
  document.write("x && y : "+ (x&&y) +"<br>");
  document.write("x || y : "+ (x||y) +"<br>");
  document.write("!x : " + (!x) +"<br>");
  document.write("(3>2) && (3<4) : " + ((3>2)&&(3<4)) + "<br>");
  document.write("(3==-2) || (-1<0) : " + ((3==2)||(-1<0)));
</script>
 </body>
</html>		 실행결과]

논리 연산

x=true, y=false

x && y : false
x || y : true
!x : false
(3>2) && (3<4) : true
(3==-2) || (-1<0) : true

 

 

조건 연산자

삼항 연산자는 유일하게 피연산자를 세 개나 가지는 조건 연산자입니다.

물음표(?) 앞의 표현식에 따라 결과값이 참이면 반환값1을 반환하고, 결과값이 거짓이면 반환값2를 반환한다.

표현식? 반환값1 : 반환값2

 

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<h3>조건 연산</h3>
<script>
var a=3, b=5;
document.write("a=" + a + ", b=" + b + "<br><br>");
document.write("두수의 차이 : " + ((a>b)?(a-b):(b-a)));
</script>
 </body>
</html>		 실행결과]

조건 연산

a=3, b=5

두수의 차이 : 2

 

 

비트 연산자

 

비트 연산자설명

연산자 설명
& 대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산)
| 대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산)
^ 대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산)
~ 비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산)
<< 지정한 수만큼 비트를 전부 왼쪽으로 이동시킴. (left shift 연산)
>> 부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산)
>>> 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨.

 

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
  function digit8(v) { // 숫자 v를 8비트 2진수로 변환
var str="";
for(i=0; i<8; i++, v<<=1) {
if((v & 0x80)) str += "1";
else str += "0";
}
return str;
  }
  </script>
 </head>
 <body>
<h3>비트 논리 연산과 시프트 연산</h3>
<hr>
<script>
  var x=10, y=3;
  document.write("<pre>");
  document.write("x=" + x + ", y=" + y + "<br>"); // x, y 값 출력
  document.write("x :  " + digit8(x) + "<br>"); // x 값 출력
  document.write("y :  " + digit8(y) + "<br>"); // y 값 출력

  document.write("x & y  :  " + digit8(x&y) + "<br>");
  document.write("x | y  :  " + digit8(x|y) + "<br>");
  document.write("x ^ y  :  " + digit8(x^y) + "<br>");
  document.write("~x     :  " + digit8(~x) + "<br>");

  document.write("x << 1 :  " + digit8(x<<1) + " (" + (x<<1) + ")<br>");
  document.write("x >> 1 :  " + digit8(x>>1) + " (" + (x>>1) + ")<br>");
  document.write("x >>> 1:  " + digit8(x>>>1) + " (" + (x>>>1) + ")");
  document.write("</pre>");
</script>
 </body>
</html>		 실행결과]

비트 논리 연산과 시프트 연산

x=10, y=3
x : 00001010
y : 00000011
 
x & y : 00000010
x | y : 00001011
x ^ y : 00001001
~x : 11110101
 
x << 1 : 00010100 (20)
x >> 1 : 00000101 (5)
x >>> 1: 00000101 (5)

 

문자열 연산자

+, += 문자열 연산자이다.

피연산자가 하나라도 문자열이면, 문자열 결합을 수행한다.

 

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
<h3>문자열 연산</h3>
<script>
  document.write("abc" + 23 + "<br>");
  document.write(23 + "abc" + "<br>");
  document.write(23 + "35" + "<br>");
  document.write(23 + 35 + "<br>");
  document.write(23 + 35 + "abc" + "<br>");
  document.write("abc" + 23 + 35 + "<br><br>");

  var name = "kitae";
  document.write(name == "kitae");
  document.write("<br>");
  document.write(name > "park");
</script>
 </body>
</html> 		실행결과]

문자열 연산

abc23
23abc
2335
58
58abc
abc2335

true
false

'프로그램언어 > HTML&부트스트랩' 카테고리의 다른 글

그누보드5설치  (1) 2023.01.30
xampp 설치하기  (0) 2023.01.30
MySql Workbench에 DB생성, 사용자생성하고 연동  (0) 2022.02.21
제어문  (0) 2021.07.07
자바스크립트  (0) 2021.07.05

'프로그램언어/HTML&부트스트랩' Related Articles

티스토리툴바