[お題にTRY] 九九の表示 #javascript

2020年5月29日

Javascript テクノロジー プログラミング 特集

プログラム脳に言語はあまり関係がないのですが、やっぱり実績は必要と考える、ユゲタです。 あまり大それた事をやるつもりはないんですが、お題に対してプログラミングする企画を立ち上げてみました。 初心者の人にも参考になるような、お題を作って、それを、多数のプログラム言語で書いて行こう!という事をテーマに、できれば定期的なお題更新をしていこうと思います。 お題が溜まってきたら、何かしらのサービスにして、プログラム勉強サービスのようなものを立ち上げようと、目論見中!

本日のIT謎掛け

「九九の計算」と、かけまして・・・ 「マズい酎ハイ」と、ときます。 そのココロは・・・ 割ってはいけません。

今回のお題

以前に、いくつかお題を考えてみたんですが、今回は企画第一弾という事で、初心者でもできる内容を考えてみました。 「九九の表示」 どうですか?簡単でしょう。 これを、いろいろなプログラム言語でプログラミングしていきます。 そして、第一回目の今回はjavascript言語です。

簡単コンソール表示バージョン

最初は、僕のよく使うブラウザコンソールに表示するバージョンです。 for(var i=1; i<=9; i++){ for(var j=1; j<=9; j++){ console.log(j+"×"+i+"="+(i*j)); } } > responce 1×1=1 2×1=2 3×1=3 4×1=4 5×1=5 6×1=6 7×1=7 8×1=8 9×1=9 1×2=2 2×2=4 3×2=6 4×2=8 5×2=10 6×2=12 7×2=14 8×2=16 9×2=18 1×3=3 2×3=6 3×3=9 4×3=12 5×3=15 6×3=18 7×3=21 8×3=24 9×3=27 1×4=4 2×4=8 3×4=12 4×4=16 5×4=20 6×4=24 7×4=28 8×4=32 9×4=36 1×5=5 2×5=10 3×5=15 4×5=20 5×5=25 6×5=30 7×5=35 8×5=40 9×5=45 1×6=6 2×6=12 3×6=18 4×6=24 5×6=30 6×6=36 7×6=42 8×6=48 9×6=54 1×7=7 2×7=14 3×7=21 4×7=28 5×7=35 6×7=42 7×7=49 8×7=56 9×7=63 1×8=8 2×8=16 3×8=24 4×8=32 5×8=40 6×8=48 7×8=56 8×8=64 9×8=72 1×9=9 2×9=18 3×9=27 4×9=36 5×9=45 6×9=54 7×9=63 8×9=72 9×9=81 これだと、縦長でキレイな表示ではないので、マトリクス表示にしてみます。 for(var i=1; i<=9; i++){ var arr = []; for(var j=1; j<=9; j++){ var x = ('00'+i).slice(-2); var y = ('00'+j).slice(-2); var result = ('00'+(i*j)).slice(-2); arr.push(y+"×"+x+"="+result); } console.log(arr.join(" ")); } > result 01×01=01 02×01=02 03×01=03 04×01=04 05×01=05 06×01=06 07×01=07 08×01=08 09×01=09 01×02=02 02×02=04 03×02=06 04×02=08 05×02=10 06×02=12 07×02=14 08×02=16 09×02=18 01×03=03 02×03=06 03×03=09 04×03=12 05×03=15 06×03=18 07×03=21 08×03=24 09×03=27 01×04=04 02×04=08 03×04=12 04×04=16 05×04=20 06×04=24 07×04=28 08×04=32 09×04=36 01×05=05 02×05=10 03×05=15 04×05=20 05×05=25 06×05=30 07×05=35 08×05=40 09×05=45 01×06=06 02×06=12 03×06=18 04×06=24 05×06=30 06×06=36 07×06=42 08×06=48 09×06=54 01×07=07 02×07=14 03×07=21 04×07=28 05×07=35 06×07=42 07×07=49 08×07=56 09×07=63 01×08=08 02×08=16 03×08=24 04×08=32 05×08=40 06×08=48 07×08=56 08×08=64 09×08=72 01×09=09 02×09=18 03×09=27 04×09=36 05×09=45 06×09=54 07×09=63 08×09=72 09×09=81 縦横でズレが起きないように、桁数のゼロパディングを施して、 行ごとに1回の表示にするために、配列を利用しました。

HTMLで表示バージョン

次に、javascriptを使う場合は、HTMLに表示をしてナンボなので、画面表示できるようにしてみます。 var target = document.querySelector(".target"); // 横軸ラベル表示 var tr = document.createElement("tr"); target.appendChild(tr); for(var i=0;i<=9; i++){ var th = document.createElement("th"); tr.appendChild(th); if(i===0){continue;} th.textContent = i; } // 表示 for(var i=1; i<=9; i++){ var tr = document.createElement("tr"); target.appendChild(tr); // 縦軸ラベル表示 var th = document.createElement("th"); tr.appendChild(th); th.textContent = i; for(var j=1; j<=9; j++){ var td = document.createElement("td"); tr.appendChild(td); var cellValue = j+"×"+i+"="+(i*j); td.textContent = cellValue; } }
ターゲットのtableタグに対して、tr,th,tdをタグ作成して、appendChildで追加していくだけの簡単なコードです。 関数化したら、もう少しコンパクトに書けるかもしれませんが、とりあえず、わかりやすく書いてみました。

九九を99x99でも対応できるように

そういや、インド式九九って、99x99ですよね。 なんて呼ぶんだろうと考えてたら、「九九x九九」で「クククク」だろうという説が浮上してきました。 んなわけね〜だろ! ということで、HTML,CSS,JSのセットは以下のとおりです。 <input type="text" name="x" value="99"> <span> × </span> <input type="text" name="y" value="99"> <button class="update" type="button">更新</button> <hr> <table class="target"></table>   *{ font-size:12px; } table{ border-collapse:collapse; } th,td{ border:1px solid black; padding:2px 4px; text-align:center; } th{ min-width:30px; background-color:#ccc; } td{ width:60px; } input{ width:60px; height:20px; text-align:center; border-radius:4px; border:2px solid #black; } button{ border:1px solid #black; background-color:#ccc; border-radius:4px; } document.querySelector(".update").addEventListener("click" , function(e){ var x = document.querySelector("[name='x']").value; var y = document.querySelector("[name='y']").value; if(!x || !y){return;} kuku(Number(x),Number(y)); }); function kuku(x,y){ var target = document.querySelector(".target"); target.innerHTML = ""; // 横軸ラベル表示 var tr = document.createElement("tr"); target.appendChild(tr); for(var i=0;i<=x; i++){ var th = document.createElement("th"); tr.appendChild(th); if(i===0){continue;} th.textContent = i; } // 表示 for(var i=1; i<=x; i++){ var tr = document.createElement("tr"); target.appendChild(tr); // 縦軸ラベル表示 var th = document.createElement("th"); tr.appendChild(th); th.textContent = i; for(var j=1; j<=y; j++){ var td = document.createElement("td"); tr.appendChild(td); var cellValue = j+"×"+i+"="+(i*j); td.textContent = cellValue; } } } 結果表示は、おそろしい事になるので、codepenを貼り付けておきます。

See the Pen 99 by YugetaKoji (@geta1972) on CodePen.

  是非、プレビューの更新ボタンを押してみてください。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。