【初心者】JavaScriptで九九表を出力するプログラミングを解説【プログラミング初心者の入門講座】

2020年3月13日システムJavaScript,プログラミング初心者

【初心者】JavaScriptで九九表を出力するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptで九九表を出力するプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

JavaScript九九表を出力するプログラミング解説です。九九表出力のプログラミングは、2重ループを行うなどforの制御を練習する課題としてとても最適な練習問題です。

ぜひ実際にプログラミングしてforループ処理を理解しましょう。

九九表の出力プログラムのポイント

九九表JavaScriptで出力する際に、forループ2重で行います。2重ループは、"外側でループ“と"内側のループ“をしっかりと意識して"変数の値“をイメージすると、理解しやすいです。

JavaScriptで九九表を出力するプログラミングを解説

JavaScriptで九九表を出力するプログラミング


<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScriptで九九表</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	</head>
	<body>
		<h1>JavaScriptで九九表</h1>
		<table class="table table-bordered table-hover table-sm" style="text-align: center;">
			<thead class="thead-dark">
				<tr>
					<th>#</th>
					<th>1</th>
					<th>2</th>
					<th>3</th>
					<th>4</th>
					<th>5</th>
					<th>6</th>
					<th>7</th>
					<th>8</th>
					<th>9</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
		<script>
			for (var row = 1; row<=9; row++) {
				$('table').find('tbody').append('<tr><th>'+row+'</th></tr>');
				for (var column = 1; column<=9; column++) {
					var num = row * column;
					$('table').find('tbody').find('tr').eq(row - 1).append('<td>'+num+'</td>');
				}
			}
		</script>
	</body>
</html>

JavaScriptで九九表を出力するプログラミング解説

文字コードを指定

<meta charset="UTF-8">

HTMLheadタグ内にmetaタグcharset(文字コード)をUTF-8に指定します。

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

BootstrapのスタイルシートをCDNで読み込む

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

このカレンダー作成プログラムでは、カレンダーtableタグで作成します。今回は見た目を良くするためにBootstrapを使ってスタイルをあてようと思います。

あとBootstrapCDNで読み込むようにしました。

CDNとは

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

九九表を出力する要素を用意

<table class="table table-bordered table-hover table-sm" style="text-align: center;">
	<thead class="thead-dark">
		<tr>
			<th>#</th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>9</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

tableタグ九九表を出力する準備をします。JavaScripttableタグtbodyタグ九九表を出力するので、trタグなどは記述しないでおきます。

JQueryをCDNで読み込む

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

このカレンダー作成プログラムでは、JQueryを利用するので、CDNで読み込みます。

JQueryとは

JQueryJavaScriptライブラリーです。詳しくは「【初心者】JavaScriptでプログラミングを始める方法」をご覧ください。

scriptタグを用意してJavaScriptのプログラムを始める

<script>
・・・
</script>

JavaScriptプログラムコードを記述するためにscriptタグを記述します。

JavaScriptで九九表を出力する

for (var row = 1; row<=9; row++) {
	$('table').find('tbody').append('<tr><th>'+row+'</th></tr>');
	for (var column = 1; column<=9; column++) {
		var num = row * column;
		$('table').find('tbody').find('tr').eq(row - 1).append('<td>'+num+'</td>');
	}
}

JavaScript九九表を出力するために、forループしながらtableタグtbodyタグへ追加(append)します。

  • for (var row = 1; row<=9; row++) {
  • 九九表の行数が9行あるので、9回ループされるようにします。
    • $('table’).find('tbody’).append("+row+");
    • 行番号を先頭列へ出力します。
      • for (var column = 1; column<=9; column++) {
      • 九九表の列数が9列あるので、9回ループされるようにします。
        • var num = row * column;
        • 外側ループのrow値(行数)と内側ループのcolumn(列数)をかけ算して九九を算出します。
          • ※プログラミングでは、かけ算を"*"で行います。
          • $('table’).find('tbody’).find('tr’).eq(row – 1).append("+num+");
          • tableタグのtbodyタグの最終行(trタグ)へ追加(append)します。

まとめ

【初心者】JavaScriptで九九表を出力するプログラミングを解説
【初心者】JavaScriptで九九表を出力するプログラミングを解説

今回はJavaScript九九表出力をプログラミングしたサンプルコードを解説しました。

プログラミング九九表の作成は、プログラミング初心者に適したサンプルコードです。

是非みなさんも実際にプログラミングすることをオススメします。

2重ループはプログラミングにおいて重要な技術です。しっかりと理解しておきましょう!

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年3月13日システムJavaScript,プログラミング初心者

Posted by UT