東京大学2023数学[3] part-10: javascriptを組み込む

前回のあらすじ

問題[3]で登場する放物線と円の交点、接点がどのようになるかを、javascriptによって動的に表現し、調べられるようにしようという試みを行い、その準備としてスライダーとパラメータ表示窓をはてなブログに貼り付けるところまでやった。今回はいよいよjavascriptを組み込んでみる。

javascriptを組み込む

スライダーのidを使って、スライダーの値を読み込むコードをまずは埋め込む。まずは、インスタンスsbとして登録する。

 var sb = document.getElementById('slb1');

そしてsbの属性であるvalueをつかって、html内のspanを書き換える。パラメータを表示させているのは、val-aなので、次のようにして実行する。

 var sb = document.getElementById('slb1');
 val-a.innerHTML = sb.value;

ところがこれだけだとスライダーを動かしても値が変化しない。インスタンスに変化があった時に、javascriptを呼び出すように仕組む必要があるからだ。そのためには、スライダーにoninputという要素を加え、そこにjavascriptで実現したい機能を関数の形で書き込む。今回はdisp()にした。

以上をまとめると、次のようなプログラムを「はてなブログ」に書き込むのである。

<form id="sb1" method="POST" action="<URL>">
 <input type='range' id='slb1' value='1.25' min='-1.5' max='2.5' step='.01' var oninput='disp()' style='width:90%;'/>
</form>

<div style="border: solid green;width: 200px; height:40px;">
 .. value of [a]: <span id='val_a'>0.00</span>
</div>

<script>
 var sb = document.getElementById('slb1');
 function disp(){
   val_a.innerHTML = sb.value;
 }
</script>

.. value of [a]: 0.00