next up previous contents index
: 画像を HTML ファイルにはりつけるには? : 前回の講義の補足 : 前回の講義の補足   目次   索引

説明の文章のなかのある場所をクリックすると JavaScript を実行 できるようにしたい

これを実現するにはいろいろな方法があるが, 一番単純な方法は, 説明の文章をファイル名 index.html でセーブし, JavaScript のファイルを別の名前, たとえば myprog.html でセーブする. そして, index.html の方をより myprog.html を 次のように アンカータグでリンクする.

ファイル  index.html 

<html>
<body>
1 から 10 の平方根の表を見るには
<a href="myprog.html"> ここ </a> をクリック.

<br>
<font color="red"> 表示 </font> メニューの
<font color="red"> 文書のソース </font> を選択すると,
このファイルの HTML ソースファイルを見ることができます.
<br>
<br>
数学科, 高山  (作成 2001 年 5 月 30 日)
</body>
</html>

そしてファイル myprog.html には次のように JavaScript のプログラムを書いておく.

<script language="JavaScript">

  for (i=1; i<=10; i++) {
    document.write(i," の平方根は ",
                   Math.sqrt(i),"<BR>");
  }

</script>

次に 2 番目の方法を説明しよう. この方法では, 実行したい JavaScript の一連の手続きを ``関数'' として登録して, form タグの onClick 属性を 利用する方法である.

<html>
<body>

<script language="JavaScript">
function makeAtableOfSquares() {
  var i;
  for (i=1; i<=10; i++) {
    document.write(i," の平方根は ",
                   Math.sqrt(i),"<BR>");
  }
}
</script>

<br>
<br>

下のボタンをクリックすると 1 から 10 の平方根の表がみれます.
<form>
<input type="button" onClick="makeAtableOfSquares()">
平方根の表
</form>

このように 
<font color="blue"> JavaScript </font> 
の手続きを関数として登録することにより
<font color="blue"> HTML </font> ファイルより
JavaScript を実行させることが可能です.

<br>
<font color="red"> 表示 </font> メニューの
<font color="red"> 文書のソース </font> を選択すると,
このファイルの HTML ソースファイルを見ることができます.
<br>
<br>
数学科, 高山  (作成 2001 年 5 月 27 日)
</body>
</html>

レポートの web page についての注意:
この講義では ``プログラムって何?'' というのを理解してもらうために, while ループを利用してレポートを書いてもらったが, それを web page に張り付ける場合は, ループにあたる部分が無限に実行されないように配慮しよう. たとえば, 次のようなプログラムは web page に張るには不親切であろう. 一旦 while ループに入り込むと利用者は抜ける方法がなかなかわからない.

<script langulate="JavaScript">
  n = -1;
  while (n != 0) {
     n = eval(prompt(0,"入力した数の平方根を求めます."));
     document.write(Math.sqrt(n),"<br>");     
  }
</script>
このプログラムは次のようにしておいた方がずっといい.
<script langulate="JavaScript">
    n = eval(prompt(0,"入力した数の平方根を求めます."));
    document.write(Math.sqrt(n),"<br>");     
</script>



Nobuki Takayama 平成15年12月5日