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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

プログラム脳に言語はあまり関係がないのですが、やっぱり実績は必要と考える、下駄です。
 

あまり大それた事をやるつもりはないんですが、お題に対してプログラミングする企画を立ち上げてみました、
 

初心者の人にも参考になるような、お題を作って、それを、多数のプログラム言語で書いて行こう!という事をテーマに、できれば定期的なお題更新をしていこうと思います。
 

お題が溜まってきたら、何かしらのサービスにして、プログラム勉強サービスのようなものを立ち上げようと、目論見中!
 

本日のIT謎掛け

「九九の計算」と、かけまして、
 

「マズい酎ハイ」と、ときます。
 

そのココロは・・・
 

割ってはいけません。

今回のお題

以前に、いくつかお題を考えてみたんですが、今回は企画第一弾という事で、初心者でもできる内容を考えてみました。
 

「九九の表示」
 

どうですか?簡単でしょう。
 

これを、いろいろなプログラム言語でプログラミングしていきます。
 

今回はjavascript言語で、プログラミングしてみたいと思います。
 

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

最初は、僕のよく使うブラウザコンソールに表示するバージョンです。
 

 

これだと、縦長でキレイな表示ではないので、マトリクス表示にしてみます。
 

 

縦横でズレが起きないように、桁数のゼロパディングを施して、
行ごとに1回の表示にするために、配列を利用しました。
 

HTMLで表示バージョン

次に、javascriptを使う場合は、HTMLに表示をしてナンボなので、画面表示できるようにしてみます。
 


 

ターゲットのtableタグに対して、tr,th,tdをタグ作成して、appendChildで追加していくだけの簡単なコードです。
 

関数化したら、もう少しコンパクトに書けるかもしれませんが、とりあえず、わかりやすく書いてみました。

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

そういや、インド式九九って、99×99ですよね。
 

なんて呼ぶんだろうと考えてたら、「九九x九九」で「クククク」だろうという説が浮上してきました。
 

んなわけね〜だろ!
 

ということで、HTML,CSS,JSのセットは以下のとおりです。
 

 

 

結果表示は、おそろしい事になるので、codepenを貼り付けておきます。
 

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


 

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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です