데이터 타입에는 Number 숫자, String 문자, Boolean 불리언이 있습니다. 여기서 Boolean 불리언은 숫자 타입, 문자 타입의 관계에 대해 참 true 또는 거짓 false 등 논리 값을 다룹니다. 영국의 수학자 George Boolean의 이름을 따와서 만든 용어입니다.
Boolean은 다양한 비교 연산자를 활용하여 데이터 타입의 논리 값을 출력합니다.
예시를 테스트하기 위해 기본 코드를 작성합니다. 웹 문서의 제목은 Sample로 합니다.
<! DOCTYPE>
<html>
<head>
<title> Sample </title>
<meta charset="utf-8">
</head>
이제 아래 body 태그에 자바스크립트 <script> 태그를 사용해 연산을 하는 코드를 작성합니다. 본문의 <h1> 제목은 Comparison operators & Boolean으로 합니다. <h1> 태그 소제목에는 각 Comparison 비교 연산자를 적습니다. 그 아래 어떤 연산을 했는지 <h2> 태그 소제목으로 작성합니다.
엄격한 동등 비교 연산자 ===
동등 비교 연산자 ===는 서로 다른 두 자리에 있는 값 혹은 타입이 같은지 비교합니다. 아래 예시에서 왼쪽에 있는 숫자 타입 12345와 오른쪽에 있는 12345를 비교합니다. 비교 연산을 위해 <script> 태그로 자바스크립트 명령어 document.write를 작성합니다. 참일 경우 true를 출력합니다. 두 값의 타입과 숫자 값이 모두 일치하기 때문에 true가 출력됩니다.
<body>
<h1> Comparison operators & Boolean </h1>
<h2> operator ===</h2>
<h3>12345===12345 </h3>
<script>
document.write(12345===12345);
</script>
왼쪽에 있는 숫자 타입 12345와 오른쪽에 있는 숫자 타입 54321 두 값을 비교하겠습니다. 동일하게 코드를 작성합니다. 두 값의 타입은 숫자로 동일하지만 값이 다르기 때문에 false가 출력됩니다.
<h3>12345===54321 </h3>
<script>
document.write(12345===54321);
</script>
왼쪽에 있는 문자 타입 "12345"와 오른쪽에 있는 숫자 타입 12345 두 값을 비교하겠습니다. 두 값은 12345로 동일하지만 왼쪽은 문자이고 오른쪽은 숫자로 타입이 다릅니다. 비교 연산자 ===는 이때, false로 인식합니다.
<h3>"12345"===12345 </h3>
<script>
document.write("12345"===12345);
</script>
느슨한 동등 비교 연산자 ==
동등 비교 연산자 ==는 기본적으로 ===와 동일하게 작동합니다. 그러나 값이 동일하고 타입이 다를 경우에 true 참으로 인식합니다. 왼쪽에 문자 타입 "12345"와 오른쪽에 숫자 타입 12345의 값은 값은 일치하나 타입은 일치하지 않습니다. ==를 사용해 연산을 하면 true가 출력됩니다.
<h2> operator ==</h2>
<h3>"12345"==12345 </h3>
<script>
document.write("12345"==12345);
</script>
비교 연산자 < 와 >
<와 >는 숫자 값의 크기를 비교하는 연산자입니다. 각 값의 크기에 따라 true 또는 false 값을 출력합니다.
<h2> operator < </h2>
<h3>77777 <88888 </h3>
<script>
document.write(77777 <88888);
</script>
<h3>77777>88888 </h3>
<script>
document.write(77777>88888);
</script>
</body>
</html>
body 태그를 닫고 최종적으로 html태그를 닫아서 코드를 마무리합니다.
'코딩' 카테고리의 다른 글
| html onclick 속성과 자바스크립트를 활용해 서식 변경 버튼 만들기 (0) | 2020.09.06 |
|---|---|
| JavaScript 자바스크립트 조건문 if else 기본 원리 (0) | 2020.09.06 |
| 자바스크립트로 웹페이지 버튼 클릭했을 때 배경색, 글자색 바꾸기 (0) | 2020.09.04 |
| 자바스크립트 JavaScript alert 이용해 경고창 만들기 (0) | 2020.09.03 |
| html script 스크립트 태그로 자바스크립트 JavaScript 사용하기 (0) | 2020.09.03 |
댓글