React를 공부하다가 왜 갑자기 JS로 구구단을 만드나 싶겠지만,
사실 내가 부트캠프를 하차하고 혼자서 독학을 결정 한 이유이기도 하다.
나는 내 스스로 JS 코드를 처음부터 끝까지 칠 수가 없었다.
항상 구글링이나 GPT의 도움을 받아서 해냈고, 그 결과로 내가 JS를 잘 한다고 생각했다. 점점 기초가 사라지고 점점 더 의존하게돼서 다시 JS를 복습한다.
구구단 만들기
🤓2 - 3 단
💚학습 목표💚
- 4칙 연산자 사용
- 프로그램을 실행해 콘솔에 값이 출력되는 것을 경험
- 프로그램을 실행해 html에 값이 출력되는 것을 경험
- github에 업로드하고 웹에서 확인
- 영어 타이핑 연습
💚요구 사항💚
- 구구단에서 2단부터 9단까지 계산하고 화면에 출력한다.
- 예를 들어 2단은 2 곱하기 1 계산후 계산 값을 출력, 2 곱하기 2 계산 후 계산 값을 출력 ... 2곱하기 9까지 반복. 3단은 같은 과정을 반복
- 프로그램 1: 처음에는 콘솔에 출력하는 프로그램을 작성한다.
- 프로그램 2: 두번째는 html 화면에 출력하는 프로그램을 작성한다.
각 프로그램 작성후 커밋을 한다.
(( 사실 엄청 간단한 과제이다. 하지만 내 스스로가 내 코드를 칠 수 있기위해 돌아가보이지만 기초 기본에 기반해서 다시 코드를 써보려고 한다❗))
프로그램을 실행해 콘솔에 값이 출력되는 것을 경험
<script>
console.log("2단");
console.log("2 * 1 =", 2 * 1);
console.log("2 * 2 =", 2 * 2);
console.log("2 * 3 =", 2 * 3);
console.log("2 * 4 =", 2 * 4);
console.log("2 * 5 =", 2 * 5);
console.log("2 * 6 =", 2 * 6);
console.log("2 * 7 =", 2 * 7);
console.log("2 * 8 =", 2 * 8);
console.log("2 * 9 =", 2 * 9);
console.log("3단");
console.log("3 * 1 =", 3 * 1);
console.log("3 * 2 =", 3 * 2);
console.log("3 * 3 =", 3 * 3);
console.log("3 * 4 =", 3 * 4);
console.log("3 * 5 =", 3 * 5);
console.log("3 * 6 =", 3 * 6);
console.log("3 * 7 =", 3 * 7);
console.log("3 * 8 =", 3 * 8);
console.log("3 * 9 =", 3 * 9);
</script>
이렇게 적어주면 당연히 콘솔창에는 내가 해준대로 출력이 잘 된다.
프로그램을 실행해 html에 값이 출력되는 것을 경험
<script>
document.write("2단","<br>" );
document.write("2 * 1 =", 2 * 1,"<br>" );
document.write("2 * 2 =", 2 * 2,"<br>" );
document.write("2 * 3 =", 2 * 3,"<br>" );
document.write("2 * 4 =", 2 * 4,"<br>" );
document.write("2 * 5 =", 2 * 5,"<br>" );
document.write("2 * 6 =", 2 * 6,"<br>" );
document.write("2 * 7 =", 2 * 7,"<br>" );
document.write("2 * 8 =", 2 * 8,"<br>" );
document.write("2 * 9 =", 2 * 9,"<br>" );
document.write("3단","<br>" );
document.write("3 * 1 =", 3 * 1,"<br>" );
document.write("3 * 2 =", 3 * 2,"<br>" );
document.write("3 * 3 =", 3 * 3,"<br>" );
document.write("3 * 4 =", 3 * 4,"<br>" );
document.write("3 * 5 =", 3 * 5,"<br>" );
document.write("3 * 6 =", 3 * 6,"<br>" );
document.write("3 * 7 =", 3 * 7,"<br>" );
document.write("3 * 8 =", 3 * 8,"<br>" );
document.write("3 * 9 =", 3 * 9,"<br>" );
</script>
콘솔창이 아닌 브라우저에 html 요소로도 화면에 보이게 해주기 성공 😊
🤓4 - 5단
💚학습 목표💚
- 변수를 경험한다.
- 영어 타이핑을 연습한다.
- 사용자의 입력을 받는 방법을 알아본다.
💚요구 사항💚
- 구구단에서 4단과 5단을 계산한 결과 값을 변수에 저장한 후 저장한 변수 값을 출력한다.
- 4와 5는 결정하면 바뀌지 않는 값이다. 따라서 4단과 5단에 해당하는 상수 값으로 만든 후 프로그램을 구현한다.
- 예를 들어 4단은 4 곱하기 1 계산 결과 값을 i라는 변수에 저장하고, i라는 변수에 저장한 결과 값을 출력한다.
- 사용자가 입력한 숫자 값에 해당하는 단을 출력한다.
- 예를 들어 사용자가 4라는 숫자를 입력하면 4단 전체를 계산해 출력한다.
- 콘솔 버전과 웹 버전 두 개를 작성한다.
구구단에서 4단과 5단을 계산한 결과 값을 변수에 저장한 후 저장한 변수 값을 출력
<script>
const m = 4;
console.log(m +" * 1 = "+ m * 1);
console.log(m +" * 2 = "+ m * 2);
console.log(m +" * 3 = "+ m * 3);
console.log(m +" * 4 = "+ m * 4);
console.log(m +" * 5 = "+ m * 5);
console.log(m +" * 6 = "+ m * 6);
console.log(m +" * 7 = "+ m * 7);
console.log(m +" * 8 = "+ m * 8);
console.log(m +" * 9 = "+ m * 9);
const z = 4;
console.log(z +" * 1 = "+ z * 1);
console.log(z +" * 2 = "+ z * 2);
console.log(z +" * 3 = "+ z * 3);
console.log(z +" * 4 = "+ z * 4);
console.log(z +" * 5 = "+ z * 5);
console.log(z +" * 6 = "+ z * 6);
console.log(z +" * 7 = "+ z * 7);
console.log(z +" * 8 = "+ z * 8);
console.log(z +" * 9 = "+ z * 9);
</script>
m과 z라는 변수에 담아서 출력을 하게되면 콘솔창에 잘 출력됐다!
사용자가 입력한 숫자 값에 해당하는 단을 출력
<body>
<h1 id="title">구구단 x단 구현</h1>
<script>
let strN = prompt("몇 단을 출력할까요?");
//n에는 문자열 변수가 들어가기 때문에
//숫자로 바꿔줘야 한다!
let m = Number(strN);
document.querySelector('#title').innerHTML = `구구단 ${m}단 구현`;
console.log(m +" * 1 = "+ m * 1);
console.log(m +" * 2 = "+ m * 2);
console.log(m +" * 3 = "+ m * 3);
console.log(m +" * 4 = "+ m * 4);
console.log(m +" * 5 = "+ m * 5);
console.log(m +" * 6 = "+ m * 6);
console.log(m +" * 7 = "+ m * 7);
console.log(m +" * 8 = "+ m * 8);
console.log(m +" * 9 = "+ m * 9);
</script>
</body>
내가 20이라고 입력하니까 20단이 출력되는 걸 볼 수 있다 🤗
그리고 document.querySelector()를 사용해서 사용자가 입력한 단수를 h2태그 안에 넣어주고 있다
🤓6 - 7단
💚학습 목표💚
- 반복문을 경험한다
💚요구 사항💚
- 지금까지 2 ~ 5단까지 구현하기 위해 단순, 반복적인 작업이 많았다.
- 이 같은 단순, 반복적인 작업을 변수와 반복문을 활용해 제거하면서 6단과 7단을 구현한다.
반복문을 경험 먼저 while
<body>
<h1>반복문을 사용한 구구단</h1>
<script>
let strN = prompt("몇 단을 출력할까요?");
let n = Number(strN);
let i = 1;
while (i <= 9) {
console.log(`${n} * ${i} = ${n * i}`);
i++;
}
</script>
</body> 이렇게 while문을 사용해줘서 구구단을 출력 할 수 있게 해줄수도 있고
<body>
<h1>반복문을 사용한 구구단</h1>
출력할 단수 : <input type="number" id="inputNum" />
<button type="submit" onclick="runTimesTable()">확인</button>
<div id="output"></div>
<script>
function runTimesTable() {
let n = Number(document.querySelector("#inputNum").value);
let outputDiv = document.querySelector("#output");
outputDiv.innerHTML = `<b>구구단 ${n}단<br>`;
for (let i = 1; i <= 9; i++) {
outputDiv.innerHTML += `${n} * ${i} = ${n * i}<br>`;
}
}
</script>
</body>for문을 사용해서 만들어줬는데 input태그와 버튼을 만들어줘서 입력을 받는 방식으로 변경도 했다 👍
🤓8 - 9단
💚학습 목표💚
- 사용자가 값을 입력 받는 방법을 경험한다.
- 데이터 타입을 이해한다.
- 조건문을 이해한다.
💚요구 사항💚
- 사용자가 2 이상, 9 이하가 아닌 값을 입력하는 경우 "2이상, 9이하의 값만 입력할 수 있습니다."라는 메시지를 출력한다.
<body>
<h2>if문 사용해보기</h2>
<script>
let strN = prompt("출력할 단을 입력해주세요");
let n = Number(strN);
if (n < 2 || n > 9) {
document.write("2이상 9이하의 숫자를 입력해주세요.");
} else {
for (let i = 1; i <= 9; i++) {
document.write(`${n} * ${i} = ${n * i}<br>`);
}
}
</script>
</body>여기서 강의 선생님이 while, break를해서 만들어보라고 하셔서 만들기!
//TODO: while, break사용해서 만들어보기
while (true) {
let strN = prompt("출력할 단을 입력해주세요");
let n = Number(strN);
if(n >= 2 && n <= 9){
break;
} else {
document.write("2이상 9이하의 숫자를 입력해주세요.");
}
}
let i = 1;
document.write(`구구단 ${n}단<br>`);
while(i <= 9){
document.write(`${n} * ${i} = ${n * i}<br>`);
i++;
}이렇게 조건문과 반복문 연산자를 사용해서 구구단을 만들어 주었다❗
다 안다고 생각했고, 너무 쉽다고 생각했다가 내가 잊은 부분도 많았고,
다시 복습이 제대로 돼서 좋았다 👍🤗👍
다음에는 함수나 객체 배열을 통해서 구구단을 다시 만들어 볼 것^-^💚
끄적 끄적 배운 걸 적습니다 / FRONT-END STUDY VELOG