電気工学実験のTAで共振回路の共振周波数を計算させることがあるのですが、毎回Excelシートで計算させるのは可愛そうだなあって思ったのでブラウザで計算できるようなものを作っていました。
また、HTML/CSS/JSでなにか作ったことがなかったのでそれらで作っていました。とりあえずHTML/JSで計算結果を出力するところまで作りました。
GitHubレポジトリ:experimentTA
1. コード全体
1-1. HTML
1-2. JavaScript
2. 書いてるときに調べていたこと
2-1. 外部のJavaScriptファイルを読み込む
ヘッダー部に次のコードを書いてスクリプトをインポートさせます。
<script src="javascript.js"></script>
2-2. 入力を受け取る
HTMLのinput要素を使います。inputの動作はtype属性の値で大きく変わるのでそれぞれ確認する必要があります。
2-3. 入力欄にラベルを付ける
label要素を使います。
2-4. 下付き文字
2-5. 変数の名前をいい感じにしたい
変数要素を使います。普通はイタリック体で表示されます。
2-6. HTMLにコメントを付けたい
<!--コメント-->
2-7. イベント
すごい量があります。
2-8. クリックしたときにイベントを発行させたい
onclickを用います。HTMLに埋め込むときは、onclick属性に実行したいスクリプト名を指定します。
2-9. HTMLのフォームで入力された値をJavaScriptでも使いたい
Document.getElementById()などを用います。要素にIDが指定してあれば、特定の要素に素早くアクセスできます。
let element = document.getElementById(id);
戻り値はElementオブジェクト、またはnullです。そのため値を使いたい場合はvalueプロパティを用います。
let value = document.getElementById(id).value; //valueプロパティで値をしゅ
2-10. DOMを調査したい
getElementByIdではDOMに記述されたidを探索するので、DOMの中を覗きたいことがあります。
私はFireFoxユーザなので説明はFireFoxになります。
- ページをブラウザで開く
- F12を押すなどしてウェブ開発ツールを起動する
- ウェブ開発ツールの右上(バツ印の左側)の三点リーダー(ミートボールメニュー)をクリック
- 設定をクリック
- 標準の開発ツールのDOMにチェックを入れる
これでDOMのタブが表示できます。標準状態ではDOMは非表示なので注意。
2-11. DOMの見方
私も初めて使ってるので怪しいですが、idやvalueを確認できる場所はわかったのでそれを書いています。
DOM→Document→body→children(以下childrenを選択し続ける)
2-12. 有効数字を指定したい
Numberオブジェクトに対してtoPrecision()を用います。
numberObject.toPrecision(6); //有効数字6桁
2-13. 指数計算したい
Math.pow()を用いるか、べき乗演算子(**)を用います。
3. おわりに
これを作るのに3時間ぐらいかかりました。ずっとgetElementByIdで値が取得できずに悩んでいたのが殆どですが。さらにwindow.onloadなどを使って問題をさらに混乱させていました。
明日CSSでキレイにする予定です。
大腸ポリープ切除で家で安静しないといけないから開発が捗る・・・。