Javascriptで時間を足していくだけのアプリ
Javascript
の復習にドットインストール師に師事しながら
基本的なことをお勉強。ついでに
城ドラ
の武具開発時間の
合計時間を求めたいなと思ってたので、時間を足していくだけのものを作ることに。
コードを見ながらおさらいしていきます。
DOMとは
Document Object Model
のこと。
今開いているWeb
ページを指す。
DOM
を弄って動的にページを改変できるのがJavascript
の強み。
要素取得
Javascript
では、HTML
の各要素に振ったID
を利用して
要素を指定することが多いです。
ID
で要素を取得する場合は、document.getElementById(id)
もちろん他にも色々方法はあります。
[JavaScript]あらゆる要素を取得する | Rondo
詳細はこちらなどで。
要素作成
新たな要素を作成したい場合は、document.createElement(element)
を使います。
element
はp
やdiv
など使いたい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です。第一引数を解析して、第二引数の基数による
整数に変換します。
JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
ここをみるともっと簡略に変換する方法があるようですが、
今回後述するNaN
判定にそれらが引っかかったので、結局parseInt()
を使いました。
数値のNaN判定
NaN
とはNot A Number
のことで非数字を示します。
今回のアプリケーションでは、入力値を数字に変換しますので、
数値以外の不正な入力が合った場合に弾く必要があります。
Number.isNaN(number)
で判定を行います。
Number.isNaN() - JavaScript | MDN
終わりに
今までなんとなく忌避していたJavascript
ですが、Web
界隈では必須ですし、
なぜ今まで勉強しなかったんだ感。
触ってみると、それほど扱いづらい言語というわけでも無く、
C言語などで基礎ができていればなんら問題はなさそうです。
ただ、変数宣言を省略したり(ブラウザに依るかも)、型を指定しなくてもいいので、
変数の扱いには注意が必要ですねやっぱり。
今回は非常に簡単な文字列処理しか行っていないので、
詰まりやすいAjax
の非同期通信などには触れていません。
また、時間のあるときに何か作って身につけます。