お元気そうで残念です

仕事とか趣味のメモを残します

Javascriptで時間を足していくだけのアプリ

github.com

Javascriptの復習にドットインストール師に師事しながら
基本的なことをお勉強。ついでに 城ドラ の武具開発時間の
合計時間を求めたいなと思ってたので、時間を足していくだけのものを作ることに。

コードを見ながらおさらいしていきます。

DOMとは

Document Object Modelのこと。
今開いているWebページを指す。
DOMを弄って動的にページを改変できるのがJavascriptの強み。

要素取得

Javascriptでは、HTMLの各要素に振ったIDを利用して
要素を指定することが多いです。
IDで要素を取得する場合は、document.getElementById(id)
もちろん他にも色々方法はあります。
[JavaScript]あらゆる要素を取得する | Rondo
詳細はこちらなどで。

要素作成

新たな要素を作成したい場合は、document.createElement(element)を使います。 elementpdivなど使いたいHTMLタグを入力します。

要素追加

作成した要素や取得した要素を、Webページに追加したい場合は
document.body.appendChild(element)を使います。
これにより、指定した要素の子要素の末尾にelementを追加します。 document.body.appendChild(element)の場合は、body内の末尾に追加します。

target = document.getElementById('result');のように要素を取得後、
targetの子要素に追加するには、target.appendChild(element)です。

value取得

取得した要素の持つ文字列などのvalueを弄りたいときは、
value = document.getElementById(element).valueで取得できます。

値設定

取得した要素に値を設定したい場合は、
document.getElementById(id).innerTextでできます。

文字列連結

文字列連結はJavaなどと同様に+でできます。

hours = 6;
minutes = 30;
target = document.getElementById('result');
target.innerText = hours + ':' + minutes;

とすると、target要素には6:30と表示されます。

文字列分割

文字列を指定した文字で分割したいときは、
values = document.getElementId(element).value.split(':')で分割できます。
※ここでは:で分割しています。
分割した各文字列は配列要素としてvaluesに格納されます。

文字列から数値に変換

文字列から、数値に変換したい場合は、
parseInt(target, 10)を使います。
10は10進数の10です。第一引数を解析して、第二引数の基数による
整数に変換します。

parseInt() - JavaScript | MDN

JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();

ここをみるともっと簡略に変換する方法があるようですが、
今回後述するNaN判定にそれらが引っかかったので、結局parseInt()を使いました。

数値のNaN判定

NaNとはNot A Numberのことで非数字を示します。
今回のアプリケーションでは、入力値を数字に変換しますので、
数値以外の不正な入力が合った場合に弾く必要があります。
Number.isNaN(number)で判定を行います。

Number.isNaN() - JavaScript | MDN

終わりに

今までなんとなく忌避していたJavascriptですが、Web界隈では必須ですし、
なぜ今まで勉強しなかったんだ感。
触ってみると、それほど扱いづらい言語というわけでも無く、
C言語などで基礎ができていればなんら問題はなさそうです。
ただ、変数宣言を省略したり(ブラウザに依るかも)、型を指定しなくてもいいので、
変数の扱いには注意が必要ですねやっぱり。

今回は非常に簡単な文字列処理しか行っていないので、
詰まりやすいAjaxの非同期通信などには触れていません。
また、時間のあるときに何か作って身につけます。