happy cat image

everdevel

Web Technology, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

연산자

이번시간은 연산자에 대해서 알아봅시다.

논리 연산자

논리 연산자는 참인지 거짓인지를 나태내어 줍니다.

종류

AND(&,&&)

OR(|,||)

XOR(^)

AND 연산자는 모든 값이 참 일때 참을 뱉어냅니다.

OR 연산자는 값중에 하나라도 참 일때 참을 뱉어 냅니다.

XOR 연산자는 서로 값이 다를때 참을 뱉고 서로 값이 같다면 거짓을 뱉습니다.

아래의 표를 보면 이해가 쉽습니다.

A B AND (&, &&) OR (|, ||) XOR(^)
0 (false) 0 (false) 0 (false) 0 (false) 0 (false)
0 (false) 1 (true) 0 (false) 1 (true) 1 (true)
1 (true) 0 (false) 0 (false) 1 (true) 1 (true)
1 (true) 1 (true) 1 (true) 1 (true) 0 (false)

위의 표를 보면 A가 거짓 B가 거짓 일때 AND연산자는 거짓을 알려주고 OR도 거짓 XOR도 거짓을 알려주는 구나 이렇게 이해 하시면 됩니다.

이유는 둘다 참일때 AND연산자는 참을 알려주고 OR는 하나라도 참이면 참을 알려주고 XOR는 서로 다를때 참을 알려주기 때문입니다.

증감 연산자

증감 연산자의 종류에는 2개가 있습니다.

증가를 나타내는 ++와 감소를 나타내는 --가 있습니다.

서로 각각 1을 증가시키거나 1을 감소 시키는 기능을 하는데요.

a라는 변수가 있다고 할때

앞에 위치하거나 뒤에 위치하거나 할 때의 차이점을 나타냅니다.

예를 들어

++a, a++, --a, a--

위와 같이 사용을 하는데요.

++a 는 먼저 자신을 1증가 시키고 다른 연산을 시작하며

a++ 는 먼저 다른 연산을 한후 자신을 1 증가 시킵니다.

소스를 통하여 비교를 해봅시다.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
a = 10;
b = ++a;
document.write(b);
</script>
</head>
<body>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

소스 설명

위의 소스를 설명하면 a 에 10을 대입 한 후 b에 ++a를 대입 했습니다.

++가 앞에 붙는 다면 먼저 자신을 1증가 시키고 다른 연산을 한다고 했죠? 즉 ++a일때

a의 값이 10이었는데 먼저 자기 자신을 1증가 시켜 11이 됩니다. 그 후 다른 연산인 b에 대입 하여 즉 이미 자기 자신이 1증가하여 11인 상태에서 b로 대입이 되어서 b의 값도 11이 됩니다.

그럼 이번엔 ++가 a의 뒤에 붙는 경우인 a++에 대해서 알아 봅시다.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
a = 10;
b = a++;
document.write(b);
</script>
</head>
<body>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

소스 설명

위의 소스를 설명하면 a 에 10을 대입 한 후 b에 a++ 를 대입 했습니다.

++가 뒤에 붙는 다면 먼저 다른 연산을 하고 자신을 1증가 시킨다 햇죠 즉 a++ 일때

a의 값인 10이 먼저 b에 대입 된 후 자기 자신을 1증가 시킵니다. 그러므로

그러므로 결과는 10이 나오게 됩니다.

논리 부정 !

논리 부정 ! 연산자는 true(참)을 false(거짓)으로 반대로 false(거짓)은 true(참)으로 바꾸어 줍니다.

그럼 다음 예제를 보면서 이해를 해봅시다.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
a = true;
b = !a;
document.write(b);
</script>
</head>
<body>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

소스 설명

위의 소스는 a에 true를 대입했습니다. 문자열이 아니므로 ""에 둘러 쌓여있지 않습니다.

그리고 변수 b에 !a를 대입 했습니다. !는 반대로 값을 변경하므로 true였던 a는 false가 된후 b에 대입됩니다. 그러므로 b의 값은 false가 됩니다.


관계연산자

관계 연산자는 초등학교시절 배운거라서 쉽습니다. 부등호 아시죠? ^^

관계 연산자의 종류는 다음과 같습니다.

<크다.

<= 크거나 같다.

> 작다

> 작거나 같다

== 같다(===)

!= 같지 않다.(!==)

즉 3<4 라는 식이 있다면 거짓인 false를 출력 하게 됩니다.

그리고 4 < 3 이라는 식이 있다면 참인 true가 출력 됩니다.

같다에는 == 과 === 가 있죠. 서로 같으면 참을 보여줍니다.

같지 않다에는 !=과 !== 가 있죠 서로 같지 않으면 참을 보여줍니다.

== 과 === 의 차이 그리고 != 과 !== 의 차이는 무엇일까요?

== 은 값이 같다면 참이지만 ===은 값과 타입까지 같아야 참입니다.

!= 은 값이 다르면 참이지만 !==은 타입도 다르고 값도 달라야 참입니다.

여러 가지 식을 써서 한번 확인해보죠.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
document.write("10==1는"+(10==1));
document.write("<br />");
document.write("<br />");
document.write("10!=10는"+(10!=10));
document.write("<br />");
document.write("<br />");
document.write("20>40는"+(20>40));
document.write("<br />");
document.write("<br />");
document.write("20<40는"+(20<40));
document.write("<br />");
document.write("<br />");
document.write("50>=40는"+(50>=40));
document.write("<br />");
document.write("<br />");
document.write("20<=20는"+(20>=20));
document.write("<br />");
document.write("<br />");
document.write("40===40는"+(40===40));
document.write("<br />");
document.write("<br />");
document.write("'40'===40는"+('40'===40));
document.write("<br />");
document.write("<br />");
document.write("40==40는"+(40==40));
document.write("<br />");
document.write("<br />");
document.write("'40'==40는"+('40'==40));
document.write("<br />");
document.write("<br />");
document.write("30!==40는"+(30!==40));
document.write("<br />");
document.write("<br />");
document.write("'30'!==40는"+('30'!==40));
document.write("<br />");
document.write("<br />");
document.write("30!=40는"+(30!=40));
document.write("<br />");
document.write("<br />");
document.write("'30'!=40는"+('30'!=40));
document.write("<br />");
document.write("<br />");
document.write("30!==40는"+('40'!==40));
</script>
</head>
<body>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

조건 연산자

변수 = 조건?true:false;

변수 = 조건?true:false; 조건이 true면 true를 대입하고 false면 false를 변수에 대입하는데요.

예를 들어,

number = 10>5?"number":"string";

위의 식을 보면 10>5가 크면 number라는 문자열을 number변수에 대입하고 아니라면 string라는 문자열을 대입하라는 것입니다. 10은 5보다 크므로 number이라는 문자열을 number 변수에 대입합니다.

다른 예

number = 10>5?10:5;

위의 식은 10이 5보다 크면 10을 number에 대입 아니면 5를 대입하는 식입니다. 이제 아시겠죠?

타이핑 해가며 연습해 보세요.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
number = 10>5?10:5;
document.write(number);
</script>
</head>
<body>
</body>
</html>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 빠르게 로그인 하세요.)

로그인 하여 위의 코드를 클릭 한번에 실행하려면 여기를 클릭해 주세용.

연산자에 강좌는 이것을 끝내겠습니다. ^^

2019년 에버디벨이 제안하는 클라우드 개발환경(EEOS)이 드디어 오픈했습니다.
이제 개발환경구축없이 웹브라우저에서 웹개발하자
HTML5, CSS3, JavaScript를 넘어 MySQL, PHP까지
앞으로 지원 언어는 더 늘어날 예정 react, node, angular등
웹브라우저만 있다면 기기도 가리지 않아요. 이제 아이패드에서도 웹개발해요.!!
자기만의 클라우드 에디터, 저장공간, 데이터베이스, 접속 URL(eeosXXX.adjkl.com/eeos/)을 제공해요.
현재 웹코딩 시작하기와 PHP200 독자는 mybook(책과 관련된 기능 제공)에서 사용할 수 있습니다.

EEOS 신청하기 EEOS 알아보기

강좌로 돌아가기