b
JavaScript を試す
JavaScript を試す
プログラム言語を試すことにより計算機の仕組みが段々わかってきて,
計算機を使うスキルも上達するものである.
さてどんな言語を試してみるかであるが, お手軽に試せる言語として
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
で実行させることができる.
Windows の場合は標準で付いて来る
メモ帳 (notepad)
でプログラムを書き, ホームページ等をみるためのブラウザである
(Microsoft) Edge
で実行させることができる.
書いたプログラムは .html を後ろにつけて保存すればダブルクリックで実行できる.
詳しくは画面ビデオ参照.
なお何も表示されない時はプログラムにエラーがあるので下記の開発者ツール, 開発メニュー
を用いてエラーの原因を探す.
Mac の場合まず
こちら の "準備作業" をやってください.
Windows でも MacOS でも
JavaScriptの書き方は同様だがテキストファイル編集用のソフトや実行するための標準的ブラウザの設定方法がちがう. その部分は下記の画面ビデオを参照.
画面ビデオ:
-
JavaScript 入門その1, Mac/Safari (YouTube) ( 上記の "準備作業" も動画で説明)
[最新版の Safari でプログラムのソースを見るには, Safari の"開発"メニューから,
"エラーコンソールを表示"
"JavaScriptコンソールを表示" を選択し,
"リソース""ソース"をクリック.]
-
JavaScript 入門その1--a, Windows/Edge (youtube) (notepad で JavaScript のプログラムを入力、実行する),
動画の要点: (0) 検索に notepad と入力してメモ帳を起動 (1) ファイルを保存する時の "ファイルの種類" で "すべてのファイル" を選択し, ファイル名には拡張子 .html を後ろにつける.
(2) ファイルを保存する時のファイルのエンコード(文字コード)を UTF-8 にする.
JavaScript 入門その1--b, Windows/Edge (YouTube) (開発者ツール),
この動画の要点のノート
Edge での開発者ツール(JavaScriptのエラー表示など)の起動方法(F12)を解説.
なおノートPCの場合は fn キーを押しながら F12 キーを押す
必要がある場合もあります. 購入機種の説明書を参照してください.
補足: Windows 11 でも Edge は同じ. メモ帳の起動は, "スタートの検索窓にnotepad と入力" です.
- 参考:
JavaScript 入門その2, canvas にグラフを描く.
(このビデオは2011年版ですので現在よく利用されてるコンピューターとはすこし違いがあります)
動画による解説
動画による以下の詳しい解説(変数, 代入の=, if, for, HTMLとは)は
こちら .
最初の例
<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 回繰り返されることとなる.
<br>
は改行せよの意味.
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 等とすること.
このように式の値を計算することも可能である.
- 計算機言語での = は等しいという意味ではない.
- まず右辺を計算し,
- その結果を左辺の変数に代入せよ.
という意味. したがって, 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)とよばれます.
document.write もプログラム言語の分野では関数とよばれていますが,
数学での関数(写像)とは異なり引数から何らかの値を計算するのではなく
引数を画面に出力する処理を行うだけ. こういった意味でより広い概念.
また下記の
例 複利計算 の function compound() は, 数学的な関数(写像)とはちょっと違ったものであり,
ひとまとまりの処理をまとめたもの.
ボタン "計算" をクリックすると呼び出されます.
さて以下は Math.sin と mysin の値を比較するプログラム.
<html> <body>
<script language="JavaScript">
function mysin(x) {
var f;
f = x-x*x*x/6;
return(f);
}
for (i=0; i<1; i = i+0.1) {
document.write(Math.sin(i)," ",mysin(i),"<br>");
}
</script>
</body> </html>
|
実行してみる
例. 関数定義, mod 5 での掛け算表
関数定義, mod 5 での掛け算表 (実行).
このプログラムの中の myadd と mymul はそれぞれ mod 5 で足し算, 掛け算をする関数.
function myadd(x,y) {
return ((x+y) % 5);
}
function mymul(x,y) {
return ((x*y) % 5)
}
document.write(myadd(mymul(2,3),myadd(4,1)));
|
myadd(mymul(2,3),myadd(4,1)) は数式の前置記法による表現になっていて,
普通の記法(中置記法)なら
2*3+(4+1) mod 5
例. 関数定義, 有限集合から有限集合への写像
英語の動物の名前を日本語の動物の名前に対応 (実行).
利用者が入力できるように (実行).
例. 複利計算 (プログラムC)
複利計算 (プログラムC) .
以下は仕組みの説明のための一部分のみのプログラム達:
- 上のプログラムでデータ入力の部分だけを取出したもの.
(プログラムのソースを見るには, Safari の"開発"メニューから,
"エラーコンソールを表示"
"JavaScriptコンソールを表示" を選択し,
"リソース""ソース"をクリックします. Windows Edge では F12. そのあと "要素" をクリック, 詳しく見たい部分の三角印をクリック)
例. sinの近似計算 (プログラムS)
sin の近似計算とそのグラフ (プログラムS) .
以下は仕組みの説明のための一部分のみのプログラム達:
- 直線を引く機能だけを取出したもの.
- sinの近似値のみを出力.
発展版: sin の近似計算. 正しい値もグラフに
(プログラムのソースを見るには, Safari の"開発"メニューから, "エラーコンソールを表示"を選択し,
"リソース" をクリックします. Windows Edge では F12. そのあと "要素" をクリック, 詳しく見たい部分の三角印をクリック)
例. sin を Taylor 展開でなく有理式近似で計算
有理式による近似計算のデモ .
簡単な有理式で驚くほど正確に近似できる!
Q and A
Q. script タグって何ですか?
<script>
タグは HTML 文書にプログラム言語を埋め込むのに用いる.
開始scriptタグと終了scriptタグに囲まれた部分にプログラムを書く.
プログラム言語とは計算機の動作手順を記述するための人造言語である.
たとえば Basic, Fortran , C , C++, Java, Python 等は有名なプログラム言語である.
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 charset="UTF-8">
のように meta タグを用いて文字コードを指定します.
utf8 コード系でファイルを保存して下さい.
Q. JavaScript で図やグラフは書けませんか?
A.
canvas を用います. 上の例2 (プログラムS) が例です. 以下にもっと本格的な例を挙げます.
(プログラムのソースを見るには, Safari の"開発"メニューから, "エラーコンソールを表示"を選択し,
"リソース" をクリックします.)
Q.数式を書きたいのですが.
A.
<sup> や <sub> タグを用いて上添字や下添え字を書くことは可能ですが,
複雑な式は書けません.
MathJax を使うと TeX 形式で本格的な数式を書く事が可能です.