[Java Script] 이중 for문을 이용한 구구단 만들기 + 해설

최근에 자바스크립트를 이용해서 구구단을 만들어볼 일이 있었다.

제대로 이해했는지 보는 방법은?

내용을 설명할 수 있는가!

조건은 다음과 같다.

1. html 안에 작성해야한다!

2. table을 이용하는 방법 등 여러 방법 중 for문을 이용한다.

3. 각 곱셈이 끝날 때마다 개행을 해줄 것이다. (<br>)

4. 각 구구단이 끝날 때마다 문단을 나눠줄 것이다. (<hr>)

1) 개행은 했으나 (<br>), 문단 나누기가 없는 경우

<!doctype html>
<html>
<head>

  <meta charset="utf-8">

  <title>구구단 (이중for문)</title>

  <script>

  for(var i = 2; i<=9; i++) {

  for(var j = 1; j<=9; j++) {

  document.write(i + " * " + j + " = " + (i*j), "<br>");

}

}

  </script>

</head>

<body>

</body>

</html>

결과 :

2) 개행(<br>) 및 문단 나누기(<hr>)가 들어간 경우

<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>구구단 (이중for문)</title>

  <script>

  for(var i = 2; i<=9; i++) {

  for(var j = 1; j<=9; j++) {

  document.write(i + " * " + j + " = " + (i*j), "<br>");

}

  document.write("<hr>");

}

  </script>

</head>

<body>

</body>

</html>

결과 :

3) 개행 및 문단 나누기가 들어가고, 첫 줄에 제목이 들어가며 깔끔한 코드

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>구구단</title>

</head>

<body>

  <script>

  var i = 2;

  var j = 1;

  document.write("for문 구구단", "<br>");

  for (i = 2; i < 10; i++) {

  for (j = 1; j < 10; j++) {

  document.write(i + " * " + j + " = " + (i * j) + "<br>");

}

  document.write("<hr>");

}

  </script>

</body>
</html>

결과 :

코드에 대한 해설

(3번 코드 기준)

먼저 head에서

<html lang="en"> : 언어는 영어

<title>구구단</title> : 홈페이지 탭에 뜨는 제목

그 다음 body에서

var i = 2; : i라는 변수에 2를 설정 (곱하는 구구단 2단부터 시작)

var j = 1; : j라는 변수에 1을 설정 (곱해지는 수는 1부터 시작)

document.write("for문 구구단", "<br>"); : 처음 들어가는 구구단의 제목 설정하고 개행한다.

for (i = 2; i < 10; i++) { : 1번째 for문 , i는 2부터 9까지 (10이하이므로)

for (j = 1; j < 10; j++) { : 2번째 for문, j는 1부터 9까지 (10이하)

document.write(i + " * " + j + " = " + (i * j) + "<br>"); : 출력값은 i*j = (i*j) 로 나타내고, 개행한다.

}

document.write("<hr>"); : 각 구구단이 끝날 때마다 가로로 선 긋기 (문단 나누기). hr은 닫는 태그가 필요없다.

}

</script>

이렇게 코드 설명하기 완료.

한 번 이해하면 참 쉬운 구구단!

저작자표시 비영리 변경금지

'[IT] 🐦기초 쌓기' 카테고리의 다른 글

[Redux] 순수 Redux (JS)에 대한 설명 (0)	2023.01.26
[Forever 서버 끄기] (0)	2023.01.05
[코딩테스트와 꿀팁] 코테, 프로젝트 팁 (0)	2023.01.03
[HTML, JavaScript] Input 속성 & Toggle, JS 함수 만드는 방식 차이, 컴파일에 대한 이해 (0)	2022.11.12
[Java Script] for문과 if문을 통한, 배수의 합계 구하기 (0)	2022.11.01

깁고+고치다