JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで「#」を使った三角形を出力する方法

JavaScriptで「#」の三角形を出力するには？

「#」記号で構成される三角形を画面に出力するには、入れ子（ネスト）になったforループを使用します。仕組みはシンプルで、外側のループが行数を制御し、内側のループがその行に表示する「#」の個数を制御します。各行の出力が終わるごとに改行タグ（<br>）を出力することで、段階的に増えていく三角形の形が完成します。

サンプルコード

以下のコードを実行すると、三角形が出力されます。

<html>
   <head>
      <body>
         <p>三角形の出力</p>
         <script>
            var i, j;
            // 外側のループ：行数を制御
            for(i = 1; i < 5; i++) {
               // 内側のループ：「#」の個数を制御
               for(j = 1; j <= i; j++) {
                  document.write('#');
               }
               document.write('<br/>');
            }
         </script>
      </body>
</html>

実行結果

三角形の出力
#
##
###
####

コードの解説

  • 外側のループ：変数 i が1から4まで繰り返され、三角形の行数を決定します。
  • 内側のループ：変数 j が1から i まで繰り返され、その行に表示する「#」の個数を決定します。例えば3行目では「#」が3つ表示されます。
  • 改行処理：内側のループが終わるたびに <br/> を出力し、次の行へ移ります。

補足：モダンな開発での注意点

document.write() は手軽ですが、ページの読み込み完了後に呼び出すとドキュメント全体が上書きされてしまうため、現在ではあまり推奨されていません。実際の開発では console.log() やDOM操作（textContent など）を使って出力するのが一般的です。ただし、ループの動作を視覚的に確認する学習用途としては、この方法でも十分に理解できます。

  1. JavaScriptでCookieを読み取る方法を解説！サンプルコード付き

    JavaScriptでは、document.cookieプロパティを使用することで、ブラウザに保存されているCookieを簡単に読み取ることができます。本記事では、実際に動作するサンプルコードをもとに、Cookieの読み取り方法をわかりやすく解説します。 注意：このサンプルを実行するには、ローカルサーバー環境が必要です。HTMLファイルを直接ブラウザで開いた場合、Cookieが正しく機能しないことがあります。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  2. JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

    JavaScriptで画像をBlobに変換するには？Webアプリケーション開発では、画像などのファイルデータを「Blob（Binary Large Object：バイナリラージオブジェクト）」として扱いたい場面が多くあります。たとえば、画像のアップロード処理やCanvasへの描画、サーバーへのデータ送信などがその代表例です。JavaScriptでは、fetch()メソッドとBlobオブジェクトを組み合わせることで、URLから取得した画像を簡単にBlobへ変換できます。以下に実際のサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang=&q