> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트는 곱셈표를 구현합니다.

자바스크립트는 곱셈표를 구현합니다.

王林
풀어 주다: 2023-05-09 18:08:08
원래의
605명이 탐색했습니다.

구구단은 초보자가 구구단의 기초를 익히는 데 중요한 도구이자 프로그래머가 프로그래밍 기술을 연습하기 위한 일반적인 프로젝트이기도 합니다. 이 기사에서는 JavaScript를 사용하여 간단한 구구단을 구현하는 방법을 보여 드리겠습니다.

먼저 구구단의 기본 구조를 명확히 해야 합니다. 구구단은 일반적으로 1부터 10까지의 숫자가 포함된 정사각형 테이블입니다. 각 행과 열은 이 숫자로 시작하고 해당 제품에 따라 테이블의 격자를 채웁니다.

중첩 루프를 사용하여 이 테이블을 생성할 수 있습니다. 외부 루프는 테이블의 행 수를 제어하는 ​​데 사용되며 내부 루프는 각 행에 열을 생성하는 데 사용됩니다. 구체적인 코드는 다음과 같습니다.

for (let i = 1; i <= 10; i++) {
  let row = '';
  for (let j = 1; j <= 10; j++) {
    row += (i * j) + '    ';
  }
  console.log(row);
}
로그인 후 복사

이 코드에서는 먼저 외부 루프를 사용하여 1부터 10까지 반복하면서 테이블의 행 수를 제어합니다. 외부 루프가 한 번 실행될 때마다 내부 루프를 사용하여 행을 생성합니다.

내부 루프는 1부터 10까지 반복됩니다. 실행될 때마다 현재 행과 열의 수를 곱하고 그 결과를 해당 행의 문자열에 추가합니다. 여기서는 ES6의 템플릿 문자열을 사용하여 문자열을 구성했으므로 문자를 사용하여 결과를 다음 결과와 구분할 수 있습니다.

마지막으로 console.log() 함수를 사용하여 각 줄을 콘솔에 출력합니다.

결과를 HTML 페이지로 인쇄하려면 이 코드를 약간 수정하면 됩니다. 특히 document.createElement() 함수를 사용하여 페이지에 테이블 요소를 만든 다음 innerHTML 속성을 사용하여 테이블에 각 행을 추가할 수 있습니다. 코드는 다음과 같습니다.

const table = document.createElement('table');
for (let i = 1; i <= 10; i++) {
  let row = '<tr>';
  for (let j = 1; j <= 10; j++) {
    row += '<td>' + (i * j) + '</td>';
  }
  row += '</tr>';
  table.innerHTML += row;
}
document.body.appendChild(table);
로그인 후 복사

이 코드에서는 document.createElement() 함수를 사용하여 table이라는 테이블 요소를 생성합니다. 외부 루프에서는 각 행을 HTML 요소로 구성하고 내부 루프를 사용하여 각 제품을 셀의 콘텐츠로 사용하여 요소를 생성합니다.

마지막으로 이러한 HTML 요소를 body 요소에 추가하여 문서의 일부로 만듭니다.

요약하자면, 이 글에서는 JavaScript를 사용하여 간단한 구구단을 생성합니다. 콘솔에서 출력하든 웹 페이지에서 생성하든 이는 좋은 사례 프로젝트입니다. 동시에 중첩 루프를 사용하여 복잡한 데이터 구조를 생성하는 방법도 배웠습니다.

위 내용은 자바스크립트는 곱셈표를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿