2. 논리 연산자
<h1>논리 연산자</h1>
<script>
/*
2. 논리(boolean) 연산자
- 논리 값을 연산해주는 연산자
*/
// 문자열을 입력받아서
const inputStr = prompt("임의의 정수를 입력하세요");
// 숫자로 바꾸기
const inputNum = Number(inputStr);
// 입력한 수가 0보다 큰 수인지 확인한다.
if(inputNum>0){
console.log("입력한 수는 0보다 큰 수입니다.");
}
// 입력한 수가 짝수인지 확인한다.
if(inputNum%2==0){
console.log("입력한 수는 짝수입니다.");
}
/*
&& 는 and operator이고 읽을때는 "그리고" 라고 읽는다.
연산의 법칙은
연산에 참여하는 모든 boolean type data가
true일 때만 결과값이 true가 된다.
*/
// 입력한 수가 0보다 큰 수이고 동시에 짝수인지 확인한다.
if(inputNum>0, inputNum%2==0){
console.log("입력한 수는 0보다 큰 짝수입니다.");
};
/*
||는 or 연산자이고 읽을 때는 "또는" 이라고 읽으면 된다.
연산의 법칙은
연산에 참여하는 모든 boolean type data가
어느 하나만 true여도 결과는 true가 된다.
*/
if(inputNum>0 || inputNum%2==1){
console.log("입력한 수는 0보다 크거나 짝수입니다.")
}
let result1=false&&false; //false
let result2=false&&true; //false
let result3=true&&false; //false
let result4=true&&true; //true
//연산에 참여하는 boolean 값이 어느 하나만 true 면 결과는 true 이다.
let result5=false||false; //false
let result6=false||true; //true
let result7=true||false; //true
let result8=true||true; //true
//boolean 값을 반전시킨다.
// !는 논리값을 반전시키는 not operator이다.
// 읽을 때는 "~가 아니면" 이라고 읽으면 된다.
let result9=!true; //false
let result10=!false; //true
/*
1. 만일 isRun이 false 라면
2. 만일 isRun이 true가 아니라면
3. 만일 달리지 않을 것이라면
*/
if( !isRun ){
}
// 만일 isRun이 true가 아니거나 isWait이 true라면
// 만일 isRun이 아니거나 isWait인 경우
if ( isRun == false){}
if ( !isRun || isWait){}
</script>
- prompt(msg) : msg에 입력한 메시지와 함께 사용자 입력창을 띄워준다.
- if문의 조건 안에는 여러 개의 조건을 넣는 것이 가능하다. ( && 와 || 를 이용한다.)
- && 와 || (and / or 연산자)
&& : '그리고' / 'and' 에 해당한다. 이어진 모든 조건이 true일 경우에 true를 반환한다. (교집합의 개념)
&& 대신 , (쉼표) 도 된다고 했다. 선생님도 그때 당시 몰랐다고 언급했었다.
|| : '또는' / 'or' 에 해당한다. 이어진 모든 조건 중에 하나만 true여도 true를 반환한다. (합집합의 개념)
- a && b && c와 같이 3개 이상도 가능하다. 왼쪽부터 하나씩 차례로 true/false 여부를 확인한다고 했다.
- ! (not 연산자) : boolean type value를 반전시켜준다. (true -> false, false -> true
example.1
<h1>논리 연산자 테스트 예제</h1>
<input type="text" id="height" placeholder="키를 입력하세요... (cm)">
<input type="text" id="weight" placeholder="몸무게를 입력하세요...(kg)">
<button id="checkBtn">놀이기구를 탈 수 있는지 확인하기</button>
<p id = "result"></p>
<script>
/*
키가 너무 작거나 몸무게가 너무 크면 탈 수 없는 놀이기구가 있다.
키는 150cm 이상, 몸무게는 100kg 미만이 기준이다.
키와 몸무게를 입력하고 확인하기 버튼을 누르면
해당 놀이기구를 탈 수 있는지 없는지 메세지를
p element의 innerText로 출력하는 프로그래밍을 해보세요.
"탈 수 있습니다." or 탈 수 없습니다.
*/
document.querySelector("#checkBtn").addEventListener("click", function(){
let height = Number(document.querySelector("#height").value)
let weight = Number(document.querySelector("#weight").value)
if(height >= 150 && weight < 100){
document.querySelector("#result").innerText = "탈 수 있습니다.";
}
else{
document.querySelector("#result").innerText = "탈 수 없습니다.";
}
});
</script>
example.2
<h1>논리 연산자 테스트 중...</h1>
<input type="text" id="inputId" placeholder="아이디 입력..."/>
<input type="text" id="inputPwd" placeholder="비밀번호 입력..."/>
<button id="authBtn">인증하기</button>
<button id="authBtn2">인증하기2</button>
<p id="result"></p>
<!-- 미리 준비된 외부 javascript loading하기-->
<script src="js/selector.js"></script>
<script>
/*
아이디는 "gura" 비밀번호는 "1234" 가 맞는 정보이다.
아이디 와 비밀번호를 입력하고 인증하기 버튼을 눌렀을때
해당 정보가 일치하는지 판별해서 일치하면
p 요소의 innerText 로 "인증 되었습니다." 를 출력하고
일치하지 않으면 "아이디 혹은 비밀번호가 틀려요" 를 출력하도록
프로그래밍 해 보세요.
[ hint ]
같은지 비교하는 비교 연산자 ==
*/
document.querySelector("#authBtn").addEventListener("click", function(){
let id = document.querySelector("#inputId").value;
let pwd = document.querySelector("#inputPwd").value;
let result = document.querySelector("#result");
if(id == "gura" && pwd == "1234"){
result.innerText = "인증되었습니다.";
} else {
result.innerText = "아이디 혹은 비밀번호가 틀려요";
}
});
/*
// 인증 버튼을 눌렀을 때 실행할 함수 등록
document.querySelector("#authBtn").addEventlistener("click", function(){
// 1. 입력한 아이디 읽어오기
const id = document.querySelector("#inputId").value;
// 2. 입력한 비밀번호 읽어오기
const pwd = document.querySelector("#inputPwd").value;
// 3. 유효한 정보인지 비교하기
const isValid = id == "gura" && pwd=="1234";
// 4. 유효한 정보인지 여부에 따라서 다른 내용 출력하기
if(isValid){
document.querySelector("#result").innerText = "인증되었습니다.";
} else {
document.querySelector("#result").innerText = "아이디 혹인 비밀번호가 틀려요.";
}
});
*/
- 대입 연산자보다 비교 연산자가 우선이다.
- 코드의 우선 순위도 한 번 생각해보는 것도 좋다.
- 그런데 document.querySelector("#id") 에서 id만 계쏙 바뀌는데, 번거롭고 길다.
이것들을 함수에서 할 수는 없을까? -> 그래서 나오는 것들이 library이다.
library 란 프로그래머에게 도움을 주기 위해서 누군가 미리 프로그래밍해둔 도구이다.
/*
function $(selector){
const result = document.querySelector(selector);
return result;
}
*/
$("#authBtn2").addEventListener("click", function(){
const id = $("#inputId").value;
const pwd = $("#inputPwd").value;
const isValid = id=="gura" && pwd=="1234";
if(isValid){
$("#result").innerText="인증되었습니다."
} else {
$("#result").innerText="아이디 혹은 비밀번호가 틀려요."
}
});
</script>
---------------------------------------------------------------------
/*
js/selector.js file의 내용
- web page에 loading할 javascript를 따로 준비해놓을 수 있다.
*/
function $(selector){
const result = document.querySelector(selector);
return result;
}
- 주석으로 되어있는 것처럼 함수를 직접 짜 놓을 수도 있다.
- 그리고 그 함수 자체를 js file로 만들어두고, 다른 곳에서 import 해서 사용하는 것도 가능하다.
댓글