JavaScript を MacOS で試す

画面ビデオ:

JavaScript 入門その1, Mac/Safari (YouTube) ( 以下の "準備作業" を動画で説明)
JavaScript 入門その2, canvas にグラフを描く. (このビデオは2011年版ですので現在よく利用されてるコンピューターとはすこし違いがあります)

プログラム言語を試すことにより計算機の仕組みが段々わかってきて, 計算機を使うスキルも上達するものである. プログラム言語を試してみて, メニューボタンを押すだけの毎日からバイバイしよう.
さてどんな言語を試してみるかであるが, お手軽に試せる言語として JavaScript を紹介しよう.

JavaScript って何?

HTML だけでは書きにくいホームページ (web ページ)を記述するのに利用される. たとえば, ページを見た人に何かを入力してもらい, その入力にしたがって表示を変化させたい場合に利用する.
変化する web ページの記述用の (専門用語ではダイナミックコンテンツを書くための)言語だが, 数値計算をやらせたりすることも可能で, 標準的なプログラム言語の能力ももつ.
JavaScript は C 言語風の文法を持つ. Java言語に似てる部分が全然ない訳ではないが JavaScript は Java 言語ではない. JavaScript はホームページの記述に補助として利用されてる言語. 最近の進化は著しく, JavaScript で書かれたゲーム等も多数.
特別なソフトを入手しなくても, 試すことができる. 実行結果をwebブラウザの画面で見ることができる.
JavaScript って何? か理解するには, とりあえず下の例を試てみよう. [説教] 計算機関連はよくわからない用語がでてきたりするが以下の (1)(2)(3)(4) を実践すればだんだん理解がすすんでいくものである. (1) 例を入力して試す. (2) 例をすこし変更して試す. 失敗してみて何がおこるか見る. (3) あれができないか? これができないか? を考えてみて実現方法を本や web で調べる. (4) 全ては数字で処理されている. 計算機内部でどのように処理されるのか常に考える (想像しようと努力する).

プログラム言語 JavaScript は Mac の場合は標準で付いて来るテキストエデイットでプログラムを書き, ホームページ等をみるためのブラウザである Safari で実行させることができる.

まずこちらの "準備作業" をやってください.

<html> <body>
<script language="JavaScript">
  for (i=0; i<5; i++) {
    document.write("Hello<br>");
  }
</script>
</body> </html>

この JavaScript プログラムを実行するにはこちらをクリックして下さい.

  <html> <body>
  <script ... >

の行と

  </script> 
  </body> </html>

の行はきまり文句である. プログラムとして実行される文ではない. このscript開始タグと終了タグの間に JavaScript のプログラムを書くとブラウザがそのプログラムを実行する.
Q. script タグの意味を詳しく説明して下さい. A. 説明はこちら

document.write(...) は ... を画面に表示しなさいという意味. for の部分は {...} の部分を 5回繰り返せという意味. したがって document.write が 5 回繰り返されることとなる. <html> は改行せよの意味.

Q. for 文の働きをくわしく説明して下さい. A. 説明はこちら

JavaScript の参考書

Google で JavaScript を検索してみて下さい. いろいろなページがあります.
Amazon (本屋さん) で JavaScript を検索してみて下さい. いろいろな本があります.

なお日本語を使うには meta を含む最初の3行を書いておかないと表示の時に文字化け等をおこす.

課題

JavaScript にはさまざまな数学関数が組み込まれている. Math.sqrt(x) は平方根, Math.sin(x) は sin 関数など. これらの関数または関数を組み合わせて作った式の数表を JavaScript で作製してみよう.

解答例

<script language="JavaScript">
  for (i=0; i <10; i = i+0.5) {
    document.write(i," : ", Math.sqrt(i),"<br>");
  }
</script>

課題のヒント

JavaScript でどのような数学関数が使えるかについては, JavaScript のマニュアルを参照. ビルトインオブジェクトの Math を見て下さい.
上のプログラムで Math.sqrt(i) の部分を i*Math.sin(1/i) に置き換えれば, 関数 x sin(1/x) の数表を作れる. ここで 1/x は "x ぶんの 1" を意味する. また * は "かける" を意味する. なお i を上の例のように 0 と初期化すると 1/0 を計算してしまうので, i=0.01 等とすること. このように式の値を計算することも可能である.
計算機言語での = は等しいという意味ではない.
1. まず右辺を計算し,
2. その結果を左辺の変数に代入せよ.
という意味. したがって, i = i+0.5 は (1) i + 0.5 を計算して (2) その結果を変数 i へ代入せよ, の意味.

次のステップへ.

ひとまとまりの処理は function (関数)としてまとめます. プログラミング言語における function は数学での関数や写像より広い概念と思って下さい.
数学における関数と同じような例としては,

function mysin(x) {
  var f;
  f = x-x*x*x/6;
  return(f);
}

mysin(x) を呼び出すと, x-x*x*x/6 を計算して値を "戻し" ます. var で使う変数を宣言. return の後の変数や式がこの関数 mysin の値となります. mysin(x) の x は引数(argument)とよばれます.
次の例1の function compound() は, 数学的な関数とはちょっと違ったものであり, ひとまとまりの処理をまとめたもの. ボタン "計算" をクリックすると呼び出されます.

例 1. 複利計算 (プログラムC)

複利計算 (プログラムC) .
以下は仕組みの説明のための一部分のみのプログラム達:

上のプログラムでデータ入力の部分だけを取出したもの.

(プログラムのソースを見るには, Safari の"開発"メニューから, "エラーコンソールを表示"を選択し, "リソース" をクリックします.)

例 2. sinの近似計算 (プログラムS)

sin の近似計算とそのグラフ (プログラムS) .
以下は仕組みの説明のための一部分のみのプログラム達:

発展版: sin の近似計算. 正しい値もグラフに
(プログラムのソースを見るには, Safari の"開発"メニューから, "エラーコンソールを表示"を選択し, "リソース" をクリックします.)

Q and A

Q. script タグって何ですか?

<script> タグは HTML 文書にプログラム言語を埋め込むのに用いる. 開始scriptタグと終了scriptタグに囲まれた部分にプログラムを書く. プログラム言語とは計算機の動作手順を記述するための人造言語である. たとえば Basic, Fortran , C , C++, Java 等は有名なプログラム言語である.

language 属性で埋め込んだプログラム言語の種類を指示する. たとえば

 <script language="JavaScript">

の場合には JavaScript 言語のプログラムが埋め込まれていることを意味する. なお Java 言語と JavaScript 言語は異なるプログラム言語である. JavaScript 言語はお手軽で簡単である.

ブラウザにより処理可能な言語の種類はことなる. JavaScript 言語はよく利用されている全てのブラウザで利用可能である. たとえば

 <script language="VBScript">

を処理できるブラウザもある. VBScript はマイクロソフト社の Visual Basic Script 言語を意味する.

Q. for 文の意味について説明して下さい.

for 文の文型は以下のとおり.

for ( [1]初期化 ; [2]終了判定 ; [3]繰り返し毎にやること ) { 処理1; 処理2; ... }

for 文では [2]の終了判定が真である限り, 処理1; 処理2; ... を繰り返す. [3] は 処理1; 処理2; ... が一回終る毎に実行される.

i++ は i=i+1 を意味する. i-- は i=i-1 を意味する.

例 1

for ( i=0 ; i<10 ; i++  ) {
     処理
}

と書くと i = 0, 1, 2, ..., 8, 9 に対して順番に "処理" を実行する. "処理" は総計 10 回実行される.

例 2

for ( i=3 ; i<10 ; i=i+2  ) {
     処理
}

と書くと i = 3, 5, 7, 9 に対して順番に "処理" を実行する.

例 3

for ( i=10 ; i >= 0 ; i--  ) {
     処理
}

と書くと i = 10, 9, 8, ..., 2, 1, 0 に対して順番に "処理" を実行する.

Q. 下図のように文字化けがおきます.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

のように meta タグを用いて文字コードを指定します. utf8 コード系でファイルを保存して下さい.

Q. JavaScript で図やグラフは書けませんか?

A. canvas を用います. 上の例2がそのための簡単な例です. 以下にもっと例を挙げます.

canvas で 2次関数を描画する例 .
canvas で cos のテイラー展開のグラフを表示する例この例はプロンプトを使わずにユーザがパラメータの入力をできるようにしてあります.