자바스크립트 연산자 p 475
1. 산술연사자 +, -, *, /, %(순환관계, 사이클이 반복될 때 사용), ++, --
2, 할당연산자(대입연산자) =, +=, -=, *=, /=, %=
변수할당(공간) 변수 = 실제 값
3. 연결연산자 : 문자열 + 문자열의 결합
4. 비교연산자 ==, !=, ===, !==, >, >=, <, <= 앞이 기준 ! NOT 부정, 반전한다는 의미 T-> F
자료형 살펴보기 typeof
5. 논리연산자 : 논리합(OR), 논리곱(AND), 부정(NOT)- 한 식으로 구성, 반전시키는 역할
비교연산자로 만든 두 식을 연결하여 하나의 식으로 만들 때 사용하는 연산자
결과값은 논리값(진리값 True/False)
|| (파이프) 논리합 : 두 조건식의 결과가 모두 false인 경우, 전체식의 결과가 false(나머지는 true)
&& 논리곱 : 두 조건식의 결과가 모두 true인 경우, 전체식의 결과가 true(나머지는 false)
| x | y | x||y(논리합) | x&&y(논리곱) |
| T | T | T | T |
| T | F | T | F |
| F | T | T | F |
| F | F | F | F |
! 부정 : 조건식의 결과를 반전시킨다.(Toggle) 같은 동작을 두 가지 상태로 바꿔 주는 효과
(비트연산자로 '|', '&'를 사용하기 때문에 논리연산자에서는 두 기호를 붙여서 사용, 기계제어, 지금은 거의 쓰지 않는다.)
단축연산 : 연산 시간을 단축하기 위해서 두 조건식 중 한 식으로만 처리
논리곱은 첫번째 식이 false면 전체 식이 false
논리합이 첫번째 식이 true면 전체 식이 true
위와 같은 경우 두 번째 식이 판별을 수행하지 않는다.
6. 조건연산자
삼항연산자
문법 ) (조건식) ? A 작업코드 : B 작업코드;
조건식이 true면 A 작업코드를, false 면 B 작업코드
비교연산자와 논리연산자로 만들어진 식을 조건식이라고 한다. if문, 반복문에서 사용
if 제어문과 유사함(조건 연산자 대신 if 문을 사용할 수 있음)
참고)
변수의 자료형이 없음. 값이 들어가야 자료형이 결정된다.
변수를 재활용하다 보면 한 변수가 다양한 자료형을 갖게 된다.
자바스크립트 순서
변수 - 연산자 - 제어문 - 함수 - 객체
논리연산자 예제
<!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>논리 연산 예제</title>
</head>
<body>
<script>
// 나이입력 : 1살 이상 140살 이하만 입력 가능
var age = prompt("나이를 입력하세요.(1~140)");
if (age >= 1 && age <= 140) {
document.write("입력한 나이는 " + age + "세 입니다.");
}
else {
document.write("나이를 잘못 입력하였습니다.");
}
document.write("<br>");
// 5세 이하의 아이이거나 여성은 여탕을 이용할 수 있다.
//var a = 5;
var gender = "남성";
if (age <= 5 || gender == "여성") {
document.write("입장가능");
}
else {
document.write("입장불가");
}
</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>조건 연산자</title>
</head>
<body>
<script>
var num = prompt("숫자를 입력하세요.");
var res = ((num % 3) == 0) ?
"3의 배수 입니다." :
"3의 배수가 아닙니다.";
document.write("입력한 숫자 : " + num + "<br>");
document.write(res);
// 2로 나누면 짝수, 홀수를 구분하는 조건식이 될 수 있다.
</script>
</body>
</html>제어문 : 명령문을 제어하자
1. 분기 제어문 : if, switch
1) if (조건식) : 조건식의 값(T/F)에 따라 선택적으로 명령어 문장을 실행
형식)
- if(조건식) {실행 문장들}
- if(조건식) {실행 문장들} else {실행 문장들}
- if(조건식1) {실행 문장들}
else if (조건식2) {실행 문장들}
[ else if (조건식3) {실행 문장들}
.......
else {실행 문장들} ]
참고) [ ] 사이의 내용은 필요에 따라서 작성할 수 있다.
제어문 예제
<!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>학점 계산기</title>
</head>
<body>
<h2>학점 계산기</h2>
<p>점수를 입력하세요.</p>
<p>점수 : <input type="number" id="score"></p>
<p><button id="btn">계산</button></p><br>
<p id="res"></p>
</body>
<script>
// 제어할 요소 변수에 저장
var sc = document.getElementById("score");
var b = document.getElementById("btn");
var r = document.getElementById("res");
var snum; //입력한 변수를 저장하는 변수
var grade; // 점수에 해당하는 등급을 저장하는 변수(결과)
//버튼 제어 EventListener 이벤트 처리기
b.addEventListener("click", function () {
//1. 입력값을 input태그에서 가져오기
snum = sc.value;
console.log(snum);
//2. 점수에 따라 계산(처리) 수행
//else if 문은 무조건 하나만 실행되면 끝난다. 선택적이다. 중간에 else가 빠지면 결과값이 달라진다. 두개의 if 문으로 인식
if (snum >= 90) {
grade = "A";
}
else if (snum >= 80) {
grade = "B";
}
else if (snum >= 70) {
grade = "C";
}
else if (snum >= 60) {
grade = "D";
}
else {
grade = "F";
}
console.log(grade);
r.innerHTML = "<h1>" + grade + "</h1>";
})
/* 계산(처리) 조건
1) 90점 이상(100점 포함) 'A'
2) 80점 이상 'B'
3) 70점 이상 'C'
4) 60점 이하 'D'
5) 나머지 'F'*/
</script>
</html>
연습문제) 점수를 입력받아서, 점수가 60점 이상이면 '합격', 미만이면 '불합격' 출력
연습문제) 윤년 계산기를 만드세요.
연도를 입력하면 윤년인지 아닌지를 출력하세요.
윤년 : 4년에 한번 씩 /4
100년 주기에 해당되는 연도는 아님 /100
400년 주기는 윤년 /400
'공부기록 > JavaScript' 카테고리의 다른 글
| 3월 9일 (1) JavaScript - 신규 표준 문법, 제어문 for문 (0) | 2023.03.09 |
|---|---|
| 3월 8일 (2) JavaScript - 분기 제어문 switch문 (0) | 2023.03.08 |
| 3월 7일 (2) JavaScript - 변수3, 제어문, 연산자 (0) | 2023.03.07 |
| 3월 7일 (1) JavaScript - 변수2 (0) | 2023.03.07 |
| 3월 6일 JavaScript - 변수 (0) | 2023.03.06 |
