[お題にTRY] 九九の表示 #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.

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