JavaScriptで数字パターンを表示する方法【初心者向けサンプルコード】
本記事では、テキスト入力欄とボタンを備えたJavaScript・HTMLプログラムの作成方法を解説します。ユーザーが入力欄に任意の数値(例：5)を入力してボタンをクリックすると、画面に以下のような数字パターンが表示される仕組みです。
(n = 5 の場合の出力例)
01 01 02 01 02 03 01 02 03 04 01 02 03 04 05
仕組みのポイント
このパターンは二重ループ(ネストしたforループ)を使うことで実現できます。外側のループが「行」を制御し、内側のループがその行に表示する「数字の個数」を制御します。i 行目には 1 から i までの数字が順番に出力されるため、行が進むごとに表示される数字が1つずつ増えていきます。
サンプルコード
実際のコードは以下の通りです。
<html>
<head>
<title>JavaScript Number Patterns</title>
<script type="text/javascript">
const printPattern = () => {
const num = document.getElementById("rows").value;
for(let m=1; m <= num; m++){
for(let n=1; n <= m; n++){
document.write("0"+n+" ");
}
document.write("<br />");
}
}
</script>
</head>
<body>
<p>行数を入力してPrintボタンを押してください</p>
<input type="number" placeholder="行数" id="rows">
<button type="button" onclick="printPattern()">Print</button>
</body>
</html>コードの解説
document.getElementById("rows").value: 入力欄からユーザーが指定した行数を取得します。- 外側のループ(m): 1から入力された行数まで繰り返し、各行の生成を担当します。
- 内側のループ(n): 各行において、1から現在の行番号mまでの数字を「01」「02」のように2桁形式で出力します。
document.write("<br />"): 1行分の出力が終わるごとに改行を挿入し、階段状のパターンを作ります。
実行結果
ブラウザでこのHTMLファイルを開き、行数を入力してボタンをクリックすると、以下のようにパターンが表示されます。
値を入力する前：
最終的な実行結果：
まとめ
二重ループの考え方を理解すれば、ピラミッド型や逆三角形など、さまざまなパターン出力にも応用できます。まずはこのシンプルな数字パターンでループ処理の基礎をしっかり身につけましょう。
-
JavaScriptのNumber()関数とは？使い方とサンプルコードを解説
JavaScriptのNumber()関数は、引数として渡された値やオブジェクトを、それに対応する数値へ変換するための関数です。真偽値や文字列型の数字、さらにはDateオブジェクトなども数値に変換できるため、データ型の変換処理において非常に便利な組み込み関数の一つです。例えば、Number(true)は「1」、Number(false)は「0」を返します。また、数字のみで構成された文字列「149」を渡せば数値の149に変換され、new Date()で生成した日付オブジェクトを渡すと、1970年1月1日からの経過ミリ秒数が返されます。以下に、Number()関数の動作を確認できるサンプルコードを
-
JavaScriptで数値の各桁の数字を一つずつ分割表示する方法
はじめに この記事では、ユーザーが入力した数値を検証し、有効な数値であればその各桁の数字を画面に一つずつ表示するJavaScriptプログラムの作り方を解説します。 動作イメージ ページ上のボタンをクリックすると入力ダイアログが開き、そこに数値を入力してOKを押すと、入力された数値の各桁が一行ずつ画面に出力される仕組みです。 例えば、入力が次のような場合—— 43354 画面には次のように表示されます。 4 3 3 5 4 完成コード HTML <!DOCTYPE html> <html> <head> &n