共振周波数を計算するツールを作ってた

投稿者: | 2021年11月20日
0件のコメント

電気工学実験のTAで共振回路の共振周波数を計算させることがあるのですが、毎回Excelシートで計算させるのは可愛そうだなあって思ったのでブラウザで計算できるようなものを作っていました。

また、HTML/CSS/JSでなにか作ったことがなかったのでそれらで作っていました。とりあえずHTML/JSで計算結果を出力するところまで作りました。

GitHubレポジトリ:experimentTA

1. コード全体

1-1. HTML

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="Author" content="Jago39">
<meta name="Description" content="共振周波数を計算するページ">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<script src="js/calculateFq.js"></script>
<title>[電気工学実験1]共振回路の共振周波数を計算する</title>
</head>
<body>
<h1>共通項目</h1>
<div>
<!--実験回路の選択-->
<div>
<label for="circuit-select">実験回路:</label>
<select name="circuit" id="circuit-select">
<option value="A">実験回路A</option>
<option value="B">実験回路B</option>
</select>
</div>
<!--抵抗R1の値の入力-->
<div>
<label for="r1Value">抵抗R<sub>1</sub>の値</label>
<input id="r1Value" type="number" name="r1Value" step="0.01" min="0">
<label for="r1Value">Ω</label>
</div>
<!--抵抗RLの値の入力-->
<div>
<label for="rlValue">抵抗R<sub>L</sub>の値</label>
<input id="rlValue" type="number" name="rlValue" step="0.01" min="0">
<label for="rlValue">Ω</label>
</div>
<!--コンデンサ容量の入力-->
<div>
<label for="cValue">コンデンサCの値:</label>
<input id="cValue" type="number" name="cValue" step="0.01" min="0">
<label for="cValue"><var>nF</var></label>
</div>
<!--直列共振回路の場合-->
<div>
<h1>直列共振回路</h1>
<input type="button" value=" 計算" id="seriesCalButton" onclick="calculateSeriesFq()">
<!--結果を表にして表示-->
<table>
<tr>
<td>共振周波数f<sub>0</sub></td>
<td id="seriesResult"></td>
</tr>
</table>
</div>
<!--並列共振回路の場合-->
<h1>並列共振回路</h1>
<!--可変抵抗の値の入力-->
<label for="r2Value">可変抵抗R<sub>2</sub>の値:</label>
<input id="r2Value" type="number" name="r2Value" step="0.01" min="0">
<label for="r2Value">Ω</label>
</div>
<div>
<input type="button" value=" 計算" id="parallelCalButton" onclick="calculateParallelFq()">
<!--結果を表にして表示-->
<table>
<tr>
<td>共振周波数f<sub>0</sub></td>
<td id="parallelF0Result"></td>
</tr>
<tr>
<td>共振周波数f<sub>min</sub></td>
<td id="parallelFminResult"></td>
</tr>
</table>
</div>
</body>
</html>
view raw calculatefq.html hosted with ❤ by GitHub

1-2. JavaScript

const pi = 3.14159265358979;
//共通の値を取得する関数
function getValues() {
// 実験回路の選択を取得(getLは関数リテラル)
let getL = () => {
let circuit = document.getElementById("circuit-select").value;
return circuit == "A" ? 29.2 : 31.1;
};
let l = getL() * Math.pow(10, -3);
//抵抗r1の値を取得
let r1 = document.getElementById("r1Value").value;
//抵抗rlの値を取得
let rl = document.getElementById("rlValue").value;
//コンデンサ容量を取得
let c = document.getElementById("cValue").value * Math.pow(10, -9);
//リストで返す
return [l, r1, rl, c];
}
function calculateSeriesFq() {
//共通の値を取得
const [l, r1, rl, c] = getValues();
//直列回路の共振周波数を計算する
const seriesFq = 1 / (2 * pi * Math.sqrt(l * c));
//innerTextでHTMLに表示する
target = document.getElementById("seriesResult");
target.innerText = seriesFq.toPrecision(6) + "Hz";
}
function calculateParallelFq() {
//共通の値を取得
const [l, r1, rl, c] = getValues();
//可変抵抗の値を取得
const r2 = document.getElementById("r2Value").value;
//Rの計算
const R = rl + r2;
//f0の計算
const parallelf0 = Math.sqrt(1 / (l * c) - (R * R) / (l * l)) / (2 * pi);
const parallelfmin =
Math.sqrt(
Math.sqrt(1 + (2 * c * R * R) / l) / (l * c) - (R * R) / (l * l)
) /
(2 * pi);
target1 = document.getElementById("parallelF0Result");
target2 = document.getElementById("parallelFminResult");
target1.innerText = parallelf0.toPrecision(6) + "Hz";
target2.innerText = parallelfmin.toPrecision(6) + "Hz";
}
view raw calculatefq.js hosted with ❤ by GitHub

2. 書いてるときに調べていたこと

2-1. 外部のJavaScriptファイルを読み込む

ヘッダー部に次のコードを書いてスクリプトをインポートさせます。

<script src="javascript.js"></script>

Copy

2-2. 入力を受け取る

HTMLのinput要素を使います。inputの動作はtype属性の値で大きく変わるのでそれぞれ確認する必要があります。

<input>:入力欄(フォーム入力)要素

2-3. 入力欄にラベルを付ける

label要素を使います。

<label>

2-4. 下付き文字

<sub> – 下付き文字

2-5. 変数の名前をいい感じにしたい

変数要素を使います。普通はイタリック体で表示されます。

2-6. HTMLにコメントを付けたい

<!--コメント-->

Copy

2-7. イベント

すごい量があります。

イベントレファレンス

2-8. クリックしたときにイベントを発行させたい

onclickを用います。HTMLに埋め込むときは、onclick属性に実行したいスクリプト名を指定します。

2-9. HTMLのフォームで入力された値をJavaScriptでも使いたい

Document.getElementById()などを用います。要素にIDが指定してあれば、特定の要素に素早くアクセスできます。

let element = document.getElementById(id);

Copy

戻り値はElementオブジェクト、またはnullです。そのため値を使いたい場合はvalueプロパティを用います。

let value = document.getElementById(id).value;  //valueプロパティで値をしゅ

Copy

2-10. DOMを調査したい

getElementByIdではDOMに記述されたidを探索するので、DOMの中を覗きたいことがあります。

私はFireFoxユーザなので説明はFireFoxになります。

  1. ページをブラウザで開く
  2. F12を押すなどしてウェブ開発ツールを起動する
  3. ウェブ開発ツールの右上(バツ印の左側)の三点リーダー(ミートボールメニュー)をクリック
  4. 設定をクリック
  5. 標準の開発ツールのDOMにチェックを入れる

これでDOMのタブが表示できます。標準状態ではDOMは非表示なので注意。

2-11. DOMの見方

私も初めて使ってるので怪しいですが、idやvalueを確認できる場所はわかったのでそれを書いています。

DOM→Document→body→children(以下childrenを選択し続ける)

2-12. 有効数字を指定したい

Numberオブジェクトに対してtoPrecision()を用います。

numberObject.toPrecision(6);    //有効数字6桁

Copy

2-13. 指数計算したい

Math.pow()を用いるか、べき乗演算子(**)を用います。

3. おわりに

これを作るのに3時間ぐらいかかりました。ずっとgetElementByIdで値が取得できずに悩んでいたのが殆どですが。さらにwindow.onloadなどを使って問題をさらに混乱させていました。

明日CSSでキレイにする予定です。

大腸ポリープ切除で家で安静しないといけないから開発が捗る・・・。

4. 参考文献

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.