こんにちは。
今回は始めてしまったJavaScriptをさわってみる企画第２回です。入門書を１冊終えるくらいはやっていきましょう。
参考にしている本はこちら。
前回は入力欄に入力した文字列をそのままHTMLに書き出すってことをしました。
実はHTMLに書き出すっていうのは本には出てきてなくてブログ内で動かせるようネットで探してそれを参考に書き加えた内容なんです。
前回のコード↓
<script>
function shutsuryoku()
{
var a = document.getElementById("i0").value;
aaa.innerHTML = a;
}
</script>
<button onclick="shutsuryoku()">出力</button>
<p>ここに書き出し→ : <i id="aaa"></i></p>
一度 ”a”っていう変数を作ってそこに入力した値を格納しているのですがaaa.innerHTMLに直接格納しても同じ結果になるハズです。
つまり
var a = document.getElementById("i0").value; と aaa.innerHTML = a; のところを１つにして aaa.innerHTML = document.getElementById("i0").value; ってこと。
なぜわざわざ ”a”を作っているかというとそれは本に続きがあるからですｗ
今回はその続きをやっていきますね。
そのまえにちょっとだけ説明。上でさらっと言った「”a” という変数を作る」 っていうのは var a の部分のことで変数の宣言っていいまして"a"っていう文字を変数として使いますよって意味。
ではやっていく内容ですが、本に演算が出てきましたのでそれをやります。まぁ足したり引いたり計算させるってことでしょうね。
今回は先にコードをお見せします↓
<script>
function tasu() {
var a = document.getElementById("i0").value;
var b = document.getElementById("i1").value;
aaa.innerHTML = a + b;
}
function hiku() {
var a = document.getElementById("i0").value;
var b = document.getElementById("i1").value;
aaa.innerHTML = a - b;
}
</script>
a:<input id="i0" value="3" />
b:<input id="i1" value="5" />
<br>
<button onclick="tasu()">a+b?</button>
<button onclick="hiku()">a-b</button>
<p>ここに書き出し→ : <i id="aaa"></i></p>
関数が"tasu"と"hiku"の２つになりました。中身の違いはa+b か、a-bかだけです。そして入力欄も２つにしてそれぞれの関数を実行するボタンを配置。
この結果、果たしてどうなるでしょうか。
a:
b:
ここに書き出し→ :
a-bはちゃんとした結果が出ますがa+bはaとbが並べて表示されるだけです。「文字列として扱ってるなー」っていうのはすぐにわかったのですが調べてみるとJavaScriptって変数の"型"の宣言ってないみたいです。
変数はよく値を入れておく箱って表現をされてまして変数の型はその箱に文字列だとか整数だとかどんなものをいれるかを決めるものだと思うのですがJavaScriptにはそれの宣言がなくて自動で型が判断されてしまうようです。
たしかに昔Javaってやつをさわったときは型がちがうってエラーが頻発したような気がするので自動のほうがありがたいのかもw
今回のケースだと.innerHTMLってのを使っててこれが基本的に文字列を扱うものなので文字列のa+bになってしまうわけですね。解決法をネットで探しました。
最初から備わっている関数のparseIntというのを使うと数値になるようです。
これを使うとこうですかね↓
<script>
function tasu() {
var a = parseInt(document.getElementById("i0").value);
var b = parseInt(document.getElementById("i1").value);
const c = a + b;
aaa.innerHTML = c;
}
function hiku() {
var a = document.getElementById("i0").value;
var b = document.getElementById("i1").value;
aaa.innerHTML = a - b;
}
</script>
a:<input id="i0" value="3" />
b:<input id="i1" value="5" />
<br>
<button onclick="tasu()">a+b?</button>
<button onclick="hiku()">a-b</button>
<p>ここに書き出し→ : <i id="aaa"></i></p>
a:
b:
ここに書き出し→ :
うまく行きました。本から脱線したことでなかなか有用な情報が得られましたねｗ ま、後から出てくるかも知れませんが。
見たらわかると思いますが変更したのはtasu関数内の変数a と b にparseInt関数を使って数値にしているところ。数値のまま足して変数 c に格納、cをaaa.innerHTMLへ格納です。変数cの宣言にvarではなくconstを使ってみました。なんかvarって古いらしいのです。ツクールMZのプラグインではconstをよく見かけたなーと思ったのでなんとなくｗ
varとconstの違いについて書かれたサイトがあったので貼っておきます↓
なんかよくわからんけどconst使っとけって下の方に書いてあるのでそうします。
ぜんぜん進んでませんが今回はここまで(;´Д｀) 演算って本だと１ページで終わってますけどねｗ
このドット絵すごくないですか！？ 8bitのピコピコゲーム音が聴こえてきそうですよね。これ、「ドット絵こんばーた」っていうのを使ってるんですよ。
単位ピクセルを変えたり色の数を変えたりもできます。
すげー(ﾟДﾟ;)
こんなことができるならこういうゲームも作ってみたくなりますね(´▽｀)
作るとは言ってません！
ランキング参加中です。下のバナーをクリックして頂けるとやる気値が増幅します!！
