プログラム脳に言語はあまり関係がないのですが、やっぱり実績は必要と考える、ユゲタです。
あまり大それた事をやるつもりはないんですが、お題に対してプログラミングする企画を立ち上げてみました。
初心者の人にも参考になるような、お題を作って、それを、多数のプログラム言語で書いて行こう!という事をテーマに、できれば定期的なお題更新をしていこうと思います。
お題が溜まってきたら、何かしらのサービスにして、プログラム勉強サービスのようなものを立ち上げようと、目論見中!
本日の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.
是非、プレビューの更新ボタンを押してみてください。
0 件のコメント:
コメントを投稿