課題

基本課題

書き込み処理の装飾

deviceWrite.cssを修正して、見た目を修正しましょう。次は例です。自分の好みに合わせて修正して下さい。

• input要素の値を中央寄せ
• inputを角丸四角

書込みデータの検証

書き込みボタンを押したときに、データ列に入力されたデータが、整数-32768～32767であることを検証します。不正なときは、ボタン要素の下に赤色で「データが不正です。」と表示します。

正しく書き込めたことを確認

要求が正常に終了すると、戻り値に「書き込んだデバイスの読み出し値」が保存されています。書き込んだデータと戻り値を比較して、同じであることを検証します。

• 書き込み成功したときは、ボタン要素の下に「書き込みに成功しました。」と表示します。
• 書き込みに失敗しているときは赤色で、「書き込みに失敗しました。」と表示します。

---

応用課題

デバイス名とデバイスタイプ

サンプルはデバイス名が固定です。デバイス名を入力できるようにします。入力したデバイス名が正しいデバイス名であることを検証します。

デバイスタイプの変更

サンプルはデバイスタイプがワード（W）に固定されています。表にタイプ列を増やして、ユーザーが選択できるようにします。ビット（B）、ワード（W）、ダブルワード（D）と浮動小数点数（F）をHTMLのselect要素で選択できるようにします。

ファイルの分割

JavaScriptのソースコードが長くなると、可読性や保守性が低下してバグの温床になります。一般的に、JavaScriptのファイルをDOM操作と、API操作（クエリパラメータやFetch APIなど）に分けると良いでしょう。さらに発展して、PLCクラスなどのオブジェクト指向の設計・実装を行うこともできます。