ホームページ  >  記事  >  ウェブフロントエンド  >  Javascriptで九九を実装する

Javascriptで九九を実装する

王林
王林オリジナル
2023-05-09 18:08:08572ブラウズ

九九は、初心者が乗算の基礎を学ぶための重要なツールであり、プログラマーがプログラミング スキルを練習するための一般的なプロジェクトでもあります。この記事では、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 回実行されるたびに、内側のループを使用して行を生成します。

内部ループは 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 の a34de1251f0d9fe1e645927f19a896e8 要素として構築し、内側のループを使用して、各製品をセルのコンテンツとして取得して b6c5a531a458a2e790c1fd6421739d1c 要素を生成します。

最後に、これらの HTML 要素を body 要素に追加して、ドキュメントの一部にします。

要約すると、この記事では、JavaScript を使用して単純な九九を生成します。コンソールで出力する場合でも、Web ページで生成する場合でも、これは良い実践プロジェクトです。同時に、ネストされたループを使用して複雑なデータ構造を生成する方法も学びました。

以上がJavascriptで九九を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。