2025 / 01 / 09
오늘 수업시간에는 지금까지 배운 연산자에 대해 실습 예제를 풀어보았습니다.
특히 대입연산자 / 복합 대입 연산자 / 증감연산자 / 논리연산자를 활용했습니다.
예제 문제를 풀어보고 스크립트 외에도 HTML과 CSS로 화면을 꾸며보았습니다.
💌 실습 예제
예제 문제
- x, y, z에 숫자를 입력받는다.
- y에 x를 더한 값을 y에 재할당한다.
- x에 y를 곱한 값을 x에 재할당한다.
- z에 z를 x로 나눈 나머지 값을 z에 재할당한다.
- y에 1을 두번 더한다.
- x를 1을 뺀다.
- z에 1을 세 번 뺴고 1을 더한다.
- 두 결과를 비교하여 같으면 true, 다르면 false를 출력한다.
- 해당 결과가 모두 false라면 true가 아닌 false를 출력한다.
1. 숫자 입력 받기
x, y, z에 숫자를 입력받는다.
let x = Number(prompt("숫자를 입력해주세요.")); let y = Number(prompt("숫자를 입력해주세요.")); let z = Number(prompt("숫자를 입력해주세요."));
- 숫자형으로 값을 받기위해 Number( )을 사용해줍니다.
2. 수식 계산 - ①
y에 x를 더한 값을 y에 재할당한다.
x에 y를 곱한 값을 x에 재할당한다.
z에 z를 x로 나눈 나머지 값을 z에 재할당한다.y += x; // y에 x 더하기 x *= y; // x에 y 곱하기 z %= x; // z에 x로 나눈 나머지 대입
3. 수식 계산 - ②
y에 1을 두번 더한다.
x를 1을 뺀다.
z에 1을 세 번 뺴고 1을 더한다.
⑴ 증감 연산자로 나타내기++y; // y에 1 더하기 ++y; // y에 1 더하기 --x; // x에서 1 빼기 --z; // z에서 1 빼기 --z; // z에서 1 빼기 --z; // z에서 1 빼기 ++z; // z에 1 더하기
⑵ 반복문과 증감연산자 함께 사용하기
for (let i = 0; i < 2; i++) { ++y; } --x; // x에서 1 빼기 for (let i = 0; i < 3; i++) { --z; // z에서 1 빼기 } ++z; // z에 1 더하기
4. 논리 값 계산
두 결과를 비교하여 같으면 true, 다르면 false를 출력한다.
해당 결과가 모두 false라면 true가 아닌 false를 출력한다.// 비교 연산 결과 계산 let result1 = x >= y; // x가 y보다 크거나 같은지 비교 let result2 = y > z; // y가 z보다 큰지 비교 // 두 결과를 비교하여 참/거짓 값을 구함 let result3 = Boolean(result1 === result2); // 최종 결과 변수 let fin; // 두 결과가 같고 둘 다 false가 아니면 true 출력 if(result1 === result2 && result1 !== false && result2 !== false){ fin = true; } else if(result1 === "false" && result2 === "false"){ // 결과가 모두 "false"인 경우 fin = false; } else { // 그 외의 경우 fin = false; }
💌전체 코드
저번과는 다르게 이번에는 HTML과 CSS를 활용해서 꾸며주었습니다.
- document.getElementById를 사용해 스크립트의 값을 넣을 id를 정해주었습니다.
- 변수를 선언해 원하는 값을 담고 innerHTML을 사용하여 해당 값을 HTML파일로 넘겨주었습니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연산자 활용</title>
<style>
*{
margin: 0;
}
.box{
border: 1px solid black;
width: 960px;
margin: 0 auto;
margin-bottom: 10px;
}
#Q1{
margin: 10px;
}
.h4{
margin-bottom: 3px;
background-color: lightblue;
}
.h3{
margin-bottom: 3px;
background-color: lightpink;
}
</style>
</head>
<body>
<!-- 첫 번째 박스: 문제와 풀이를 설명하는 영역 -->
<div class="box">
<div id="Q1">
<span class="h4">문제</span>
<p>
x, y, z에 숫자를 입력받는다.
</p> <br>
<div id="dap1">
<span class="h3">풀이</span>
<p>
let x = prompt("숫자를 입력해주세요."); <br>
let y = prompt("숫자를 입력해주세요."); <br>
let z = prompt("숫자를 입력해주세요."); <br>
</p>
</div>
</div>
</div>
<!-- 두 번째 박스: 입력 값을 확인하는 영역 -->
<div class="box">
<div id="Q1">
<span class="h4">입력 값 확인</span> <br>
<span> 첫번째 입력 숫자 : </span> <span id="1"></span> <br>
<span> 두번째 입력 숫자 : </span> <span id="2"></span> <br>
<span> 세번째 입력 숫자 : </span> <span id="3"></span> <br>
</div>
</div>
<!-- 세 번째 박스: 연산 및 변경 사항 설명 -->
<div class="box">
<div id="Q1">
<span class="h4">문제</span> <br>
<p>
y에 x를 더한 값을 y에 재할당한다. <br>
x에 y를 곱한 값을 x에 재할당한다. <br>
z에 z를 x로 나눈 나머지 값을 z에 재할당한다. <br>
y에 1을 두번 더한다. <br>
x를 1을 뺀다. <br>
z에 1을 세 번 뺴고 1을 더한다.
</p> <br>
<div id="dap1">
<span class="h3">풀이</span>
<p>
y += x; <br>
x *= y; <br>
z %= x; <br>
++y; <br>
++y; <br>
--x; <br>
--z; <br>
--z; <br>
--z; <br>
++z;
</p>
</div>
</div>
</div>
<!-- 네 번째 박스: 계산된 값 확인 영역 -->
<div class="box">
<div id="Q1">
<span class="h4">계산된 값 확인</span> <br>
<span> x -> </span> <span id="4"></span> <br>
<span> y -> </span> <span id="5"></span> <br>
<span> z -> </span> <span id="6"></span> <br>
</div>
</div>
<!-- 다섯 번째 박스: 두 결과 비교 후 출력 -->
<div class="box">
<div id="Q1">
<span class="h4">문제</span> <br>
<p>
두 결과를 비교하여 같으면 true, 다르면 false를 출력한다. <br>
해당 결과가 모두 false라면 true가 아닌 false를 출력한다.
</p> <br>
<div id="dap1">
<span class="h3">풀이</span> <br>
<p>
let result1 = x >= y; <br>
let result2 = y > z; <br><br>
if(result1 === result2 && result1 !== false && result2 !== false){ <br>
document.write(true); <br>
}else if(result1 === "false" && result2 === "false"){<br>
document.write(false); <br>
}else{ <br>
document.write(false); <br>
}
</p>
</div>
</div>
</div>
<!-- 여섯 번째 박스: 비교 결과 출력 -->
<div class="box">
<div id="Q1">
<span class="h4">결과 확인</span><br>
<span> X가 y보다 큰가? </span> <span id="7"></span> <br>
<span> X가 y보다 큰가? </span> <span id="8"></span> <br>
<span> 최종1 -> </span> <span id="9"></span> <br>
<span> 최종2 -> </span> <span id="10"></span>
</div>
</div>
<script>
// 사용자로부터 x, y, z 값 입력 받기
let x = Number(prompt("숫자를 입력해주세요."));
let y = Number(prompt("숫자를 입력해주세요."));
let z = Number(prompt("숫자를 입력해주세요."));
// 입력 받은 값을 변수에 저장하여 나중에 사용
let x01 = x;
let y01 = y;
let z01 = z;
// 문제에서 제시된 연산을 적용
y += x; // y에 x 더하기
x *= y; // x에 y 곱하기
z %= x; // z에 x로 나눈 나머지 대입
/* 반복문 사용하기
for (let i = 0; i < 2; i++) {
++y;
}
--x;
for (let i = 0; i < 3; i++) {
--z; // z에서 1 빼기
}
++z; // z에 1 더하기
*/
// 증감 연산자 사용하기
++y; // y에 1 더하기
++y; // y에 1 더하기
--x; // x에서 1 빼기
--z; // z에서 1 빼기
--z; // z에서 1 빼기
--z; // z에서 1 빼기
++z; // z에 1 더하기
// 연산 후 계산된 값 저장
let x02 = x;
let y02 = y;
let z02 = z;
console.log(x); // 콘솔에 x 값 출력
console.log(y); // 콘솔에 y 값 출력
console.log(z); // 콘솔에 z 값 출력
// 비교 연산 결과 계산
let result1 = x >= y; // x가 y보다 크거나 같은지 비교
let result2 = y > z; // y가 z보다 큰지 비교
// 두 결과를 비교하여 참/거짓 값을 구함
let result3 = Boolean(result1 === result2);
// 최종 결과 변수
let fin;
// 두 결과가 같고 둘 다 false가 아니면 true 출력
if(result1 === result2 && result1 !== false && result2 !== false){
fin = true;
} else if(result1 === "false" && result2 === "false"){ // 결과가 모두 "false"인 경우
fin = false;
} else { // 그 외의 경우
fin = false;
}
// 입력 값들 표시
document.getElementById("1").innerHTML = x01;
document.getElementById("2").innerHTML = y01;
document.getElementById("3").innerHTML = z01;
// 계산된 값들 표시
document.getElementById("4").innerHTML = x02;
document.getElementById("5").innerHTML = y02;
document.getElementById("6").innerHTML = z02;
// 비교 결과들 표시
document.getElementById("7").innerHTML = result1;
document.getElementById("8").innerHTML = result2;
// 최종 결과 표시
document.getElementById("9").innerHTML = result3;
document.getElementById("10").innerHTML = fin;
</script>
</body>
</html>💌 출력 결과
6일차 후기
- 저번 시간에 작성한 코드를 리뷰하는 시간을 가졌는데 강사님께서 제 코드를 보시고 잘했다며 칭찬을 해주셔서 평소에 프로그래밍에 자신이 없었지만 희망이 생겼습니다.
- 제가 변수명을 직관적으로 작성하지 않고 그냥 a1, a2 이런식으로 간단하게 작성하는데 나중에는 문제가 된다는 것을 알게되었습니다. 저도 가끔 헷갈림..ㅎㅎㅎ
- 스크립트를 작성할 때 주의할 점을 강사님께서 알려주셨는데 강사님께서 변수명은 누구나 한번에 이해할 수 있도록 작성해야한다며 제가 작성한 변수명을 잘못 작성한 예시로 들며 저를 보고 말하셔서 조금 부끄러웠습니다 (˚ ˃̣̣̥⌓˂̣̣̥ )‧º
- 그래도 GPT 도움 없이 제 힘으로 코드를 작성하여 문제에서 원하는 결과 값을 얻을 수 있어서 기분이 좋았습니다. *✧⁺˚⁺ପ(๑・ω・)੭ु⁾⁾
૮꒰ ྀི〃´꒳`〃꒱ა