1.JavaScriptとは [もくじへ] [トップページへ]
JavaScriptは、C言語をベースに開発された言語で、HTML内に記述し
ます。
HTMLは文章や図をどのように表示するかを指示することが主な目的
なので、一般のプログラム言語のようなプログラムの流れを制御する
ことはできません。HTMLでできないことを補うものとして、JavaScript
やVBScriptがあります。
JavaScriptの特徴は以下の通りです。
・For や If などの制御命令によるプログラムの効率化
・柔軟な配列管理
・Dateオブジェクト、Mathオブジェクト、文字列オブジェクトのサポート
・エラー処理のサポート
・onClick, onChange イベントなどによるイベント処理
・タイマー処理
・入出力ダイアログによるデータの入力と出力
用語
HTML・・・・・・・ブラウザで表示するファイルを作るためのテキスト編集
用言語
VBScript・・・・Microsoft社が開発したスクリプト言語。
JavaScriptは、HTML内に記述する関係上、最低限のHTMLの知識が
必要です。初めての方のために、少し触れておきます。
HTMLのページ全体は <HTML> </HTML> タグで囲まれ、その中が
2つの部分に分れます。1つ目の <HEAD> </HEAD> タグに囲まれ
た部分では、このページ固有の情報(タイトル)などを記述します。次
の<BODY> </BODY> タグで囲まれた部分には、ページの内容その
ものを記述します。
<HTML>
<HEAD>
<TITLE>例</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>
また、ほとんどのタグは開始タグ < > と終了タグ </ > で囲みます。
例)
<CENTER> </CENTER> 囲まれた部分を中央に揃える
<PRE> </PRE> 囲まれた部分をそのまま表示
<P> 改行して、さらに一行あける。終了タグ
</P> は、通常いらない
<BR> 改行する。終了タグ </BR> はいらない
など、いろいろなタグがありますが、HTMLのハンドブックを手元に置
いておき、必要なときに参照すればいいでしょう。これから、初めて出
てくるタグについては、なるべく説明を加えます。
3.JavaScriptの記述方法 [もくじへ] [トップページへ]
JavaScriptは、InternetExplorerで処理されますが、記述するのはメ
モ帳のようなテキスト編集できるものであれば、何でもいいのです。
ここでは、メモ帳に次のプログラムを書いてみます。タグ(<>)や命令
は、半角で入力します。
プログラム例題1
<HTML>
<HEAD>
<TITLE>例題1</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("こんにちは、田中です");
// -->
</SCRIPT>
</BODY>
</HTML>
このプログラムを、メモ帳に書き込み(上記のプログラムをコピーし
て張り付けでもいいです。)、 test.html という名前をつけて保存し
てください。保存先は、どこでもかまいませんが、とりあえずデスクト
ップに保存します。
デスクトップに test.html というアイコンができるので、あとはそのア
イコンをダブルクリックすれば、実行できます。
プログラムの記述手順
(1)メモ帳にプログラムを書く(タグや命令は半角で)
↓
(2)プログラム名(test.html)を付けてデスクトップに保存
↓
(3)デスクトップ上の
test.html
のアイコンをダブルクリックする(実行)
JavaScriptはこのように、<SCRIPT> </SCRIPT> ブロックで囲み
ます。さらに、<SCRIPT>タグに対応しないブラウザでは、ブロック内
の文字はそのまま文字として出力されますので、<!-- と // --> で
囲み、ブロック内の文字を出力しないようにします。
<!-- --> は、コメント(注釈)を入れるタグです。
<SCRIPT
LANGUAGE="JavaScript">
<!--
JavaScript プログラム
// -->
</SCRIPT>
もうひとつ、プログラムを入力してみましょう。
プログラム例題2
<HTML>
<HEAD>
<TITLE>例題2</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<H1>こんにちは、田中です</H1>")
// -->
</SCRIPT>
</BODY>
</HTML>
" "の中にタグを書くことができます。
<H1> </H1> は囲まれた部分を大見出しにするタグです。
===================================================
プログラム例題3
変数Aの値が8、Bの値が4であるとき、和A+B、差A−B、積A×B、
商A÷B、べき乗A^Bを求めよ。
=========================================================
<HTML>
<HEAD>
<TITLE>例題3</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var
a;
var
b;
var
wa;
var
sa;
var
seki;
var
syo;
var
beki;
a = 8;
b = 4;
wa = a + b;
sa = a - b;
seki = a * b;
syo = a / b;
beki =
Math.pow(a,b);
document.write
("<br>");
document.write
("A=",a,"<br>");
document.write
("B=",b,"<br>");
document.write
("和=",wa,"<br>");
document.write
("差=",sa,"<br>");
document.write
("積=",seki,"<br>");
document.write
("商=",syo,"<br>");
document.write
("べき乗=",beki);
// -->
</SCRIPT>
</BODY>
</HTML>
var a;
変数 a の使用を宣言します。なくてもエラーにはなりませんが、
宣言してから使った方が安全です。次の変数宣言をまとめて
var a, b, wa, seki; などとしても同じです。また、JavaScript
では、変数にデータ型はなく、数値でも文字列でも格納できま
す。変数名はなるべく分かりやすい名前にしておくと便利です。
変数名は自由に付けることができますが、JavaScriptの予約
語( for とか if など)は使用できません。また、変数名は変
数の宣言をしない場合、大文字と小文字は区別されます。 a
と A は異なる変数になります。
JavaScriptでは、各行の最後に「;」(セミコロン)を付けます。
これは一つ一つのプログラムの終わりを示すためのものです。
これには例外があって、「{」や「}」のあとには付けません。
a = 8;
8 を変数 a に代入することを表します。これと、変数の宣言
var a; をまとめて var a = 8; としても同じです。
wa = a + b;
変数 a に格納されている数値と、変数 b に格納されている数
値の和を、変数 wa に代入します。
× は *、 ÷ は /、べき乗は pow を用います。
beki = Math.pow(a,b);
a の b 乗をもとめて beki に代入します。Math は数学関数を
扱うオブジェクトです。pow(a,b) は a の b 乗をもとめる関数で
す。
document.write "<br>";
document はHTMLファイルというオブジェクトを示し、write
はそのあとに書かれた内容(引数)を、document オブジェク
トに出力するメソッドです。
オブジェクトとメソッドという専門用語がでてきましたが、これら
については、後で詳しく解説します。ここでは、画面に表示する
には、document.write ・・・ と書くものだと、覚えてください。
したがって、この文は改行タグ <BR> を画面に表示する、つま
り、改行しているだけです。
document.write "A=",a,"<br>";
ダブルクォテーション(”)に囲まれた文字 A= を表示し、続け
て a の内容を表示した後、タグ <BR> で改行します。
このように、文字をそのまま表示するには、”表示させる文字”
のようにします。変数の内容を表示するには、変数をそのまま
記述します。
===================================================
プログラム例題4
X=5のときY=aX^3 + bX^2 + cX + d の値を求めよ。
ただし、a = 2, b = 3, c = 4, d = 5 である。
=========================================================
<HTML>
<HEAD>
<TITLE>例題4</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var
a, b, c, d;
var
X, Y1, Y2, Y3;
a = 2;
b = 3;
c =
4;
d =
5;
X =
5;
Y1
=a*Math.pow(X,3) + b*Math.pow(X,2) + c*X + d;
Y2 = ((a*X + b)*X + c)*X +
d;
Y3
= a*X*X*X + b*X*X + c*X + d;
document.write
("<br>");
document.write
("Y1=", Y1, "<BR>");
document.write
("Y2=", Y2, "<BR>");
document.write
("Y3=", Y3, "<BR>");
// -->
</SCRIPT>
</BODY>
</HTML>
Y1 = a*Math.pow(X,3) +
b*Math.pow(X,2) + c*X + d;
Y2 = ((a*X + b)*X + c)*X + d;
Y3 = a*X*X*X + b*X*X + c*X + d;
Y = aX^3 + bX^2 + cX + d を、異なった文(ステートメント)で表して
みました。
実行結果は、次のようになります。
Y1=350
Y2=350
Y3=350
どの文も同じ結果を与えます。JavaScriptの演算命令には、優先順位
がついています。 a*Math.pow(X,3) は、「X を3乗したものに a を掛
ける」ことを表します。また、c*X + d は、「cX + d」であり、「c(X + d)」
ではありません。( + )より( * ) が優先されます。
演算の優先順位をまとめると、
( ) → 関数 → *,/ → +,−
の順になります。
もう一つ、例を示します。
===================================================
プログラム例題5
A=5のとき,
の値を求めよ。
=========================================================
<HTML>
<HEAD>
<TITLE>例題5</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var
A, P, Q, R, S;
A =
5;
P =
A + A/A + A;
Q = (A + A)/(A + A);
R =
(A + A)/A + A;
S =
A + A/(A + A);
document.write
("<br>");
document.write
("P=", P, "<BR>");
document.write
("Q=", Q, "<BR>");
document.write
("R=", R, "<BR>");
document.write
("S=", S, "<BR>");
// -->
</SCRIPT>
</BODY>
</HTML>
実行結果は、次のようになります。
P = 11
Q = 1
R = 7
S = 5.5
このように、分数式で、分母分子に式を含むときは、( )が必要です。
===================================================
プログラム例題6
変数Xの値が 1.345 であるとき、
を求めよ。
=========================================================
<HTML>
<HEAD>
<TITLE>例題6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 組み込み関数
var y1, y2, y3, y4,
y5, y6;
var
x;
// 代入(データ入力)
x =
1.345;
// 計算
y1
= Math.abs(x);
y2
= Math.sin(x);
y3 = Math.cos(x);
y4
= Math.tan(x);
y5
= Math.atan(x);
y6
= Math.sqrt(x);
// 出力
document.write
("<br>");
document.write
("y1=",y1,"<br>");
document.write
("y2=",y2,"<br>");
document.write
("y3=",y3,"<br>");
document.write
("y4=",y4,"<br>");
document.write
("y5=",y5,"<br>");
document.write
("y6=",y6,"<br>");
// -->
</SCRIPT>
</BODY>
</HTML>
実行結果は、次のようになります。
y1=1.345
y2=0.974616132437264
y3=0.223882545976745
y4=4.35324749495434
y5=0.931471804694676
y6=1.15974135047432
// 組み込み関数
注釈(コメント、リマーク)文です。プログラムが長くなると、また時間
が経つと、どこでどのような処理をするのか、作った本人でさえも解ら
なくなることがあります。そこで、このようにコメントを入れておくので
す。(// )は半角で入力します。( // )から行末までの文は、何を書
いてもプログラムとしては実行されません。また、(/* 〜 */)は囲ま
れた範囲すべてがコメントになります。複数行に渡ってコメントをした
い場合に便利です。
y1 = Math.abs(x);
x の絶対値を求め、y1 に代入します。
y2 = Math.sin(x);
sin x の値を y2 に代入します。x はラジアンです。x が度の単位の
場合、y2 = Math.sin(x*Math.PI/180); のように、度をラジアンに
変換します。PI は円周率です。
数値演算によく使われる関数を、次に示します。
関数名 機能
atan
アークタンジェント
cos コサイン
sin サイン
tan タンジェント
exp 指数
ln 自然対数
sqrt ルート
abs 絶対値
chr 文字に変換
ceil 整数部指定
floor
そのデータを超えない最大の整数
この中で、ceil と floor の違いがはっきりしないので、それぞれ例で
示します。
ceil(1.5) = 1 floor(1.5) = 1
ceil(0) = 0 floor(0) = 0
ceil(-1.5) = -1 floor(-1.5) = -2
最後の負のデータのみが、異なります。ceil は単に整数部を取り出
すだけですが、floor はそのデータ(‐1.5)を超えない最大の整数で
すから、それより小さい整数(‐2)が得られます。
===================================================
プログラム例題7
角度 x = 12°20’30” を 12.2030 として与え、その正弦
(sin)の値を求めよ。
=========================================================
考え方
まず、x = 12.2030 から度分秒の値を取り出します。
doo = Math.floor(x) ・・・ 度
fun = Math.floor((x - doo)*100) ・・・ 分
byo = ((x - doo)*100 - fun)*100 ・・・ 秒
となります。
さらに、その値をラジアンに変換します。
r = (doo + fun/60 + byo/3600)*PI/180
r に x をラジアンに変換した値が入ります。ただし、PIは円周率です。
そして、正弦を求めます。
y = Math.sin(r)
<HTML>
<HEAD>
<TITLE>例題7</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 角度の変換
var
doo, fun, byo;
var
r, y;
// 代入(データ入力)
var x =
12.2030;
// 計算
doo =
Math.floor(x);
fun =
Math.floor((x - doo)*100);
byo = ((x - doo)*100 -
fun)*100;
r = (doo + fun/60
+ byo/3600)*Math.PI/180;
y = Math.sin(r);
// 出力
document.write
("<br>");
document.write
("度=",doo,"<br>");
document.write
("分=",fun,"<br>");
document.write
("秒=",byo,"<br>");
document.write
("sin(",doo,"°",fun,"'",byo,"''",")","=",y,"<br>");
// -->
</SCRIPT>
</BODY>
</HTML>
実行結果は、次のようになります。
度=12
分=20
秒=29.99999999999403
sin(12°20'29.99999999999403'')=0.21374085747415603
document.write ("sin(",doo,"°",fun,"'",byo,"''",")","=",y,"<br>");
文字をそのまま表示するには、ダブルクォーテーション(”)で囲みます。
変数をそのまま書くと、変数の内容が表示されます。また、いくつかの
データを続けて表示するには、コンマ(,)かプラス(+)でつなぎます。
このプログラムでは、秒の値がきれいに変換されていません。これは
コンピュータの変換誤差によるものです。変換誤差を完全になくするこ
とはできませんが、四捨五入によりある程度見やすくすることはできま
す。
次に、四捨五入のプログラムを作成します。
===================================================
プログラム例題8
プログラム例題7において、
秒=29.99999999999403 を四捨五入により整数に丸めよ。
=========================================================
考え方
次のように関数 floor を使えば、簡単に四捨五入できます。
r = Math.floor(x + 0.5)
例えば、x = 2.3 を四捨五入すると 2 になりますが、この式で考えると
2.3 + 0.5 = 2.8 floor(2.8) = 2
となり、okです。
次に、x = 3.5 の場合、
3.5 + 0.5 = 4.0 floor(4.0) = 4
となり、四捨五入する桁の数値がちょうど 5 の場合もokです。
次に、x = 5.8 の場合どうでしょう。
5.8 + 0.5 = 6.3 floor(6.3) = 6
となり、この場合も四捨五入されています。
ついでに、小数第2位を四捨五入するには次のようにします。適当な
データを与えて、考えてみてください。
r = Math.floor(x*10 + 0.5)/10
<HTML>
<HEAD>
<TITLE>例題8</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
// 角度の変換と四捨五入
var
doo, fun, byo;
var
r, y;
// 代入(データ入力)
var x =
12.2030;
// 計算
doo =
Math.floor(x);
fun =
Math.floor((x - doo)*100);
byo = ((x -
doo)*100 - fun)*100;
// byoの四捨五入
byo =
Math.floor(byo + 0.5);
r = (doo + fun/60
+ byo/3600)*Math.PI/180;
y = Math.sin(r)
// 出力
document.write
("<br>");
document.write
("度=",doo,"<br>");
document.write
("分=",fun,"<br>");
document.write
("秒=",byo,"<br>");
document.write
("sin(",doo,"°",fun,"'",byo,"''",")","=",y,"<br>");
// -->
</SCRIPT>
</BODY>
</HTML>
実行結果は、次のようになります。
度=12
分=20
秒=30
sin(12°20'30'')=0.21374085747415605
今度はきれいに表示されました。
byo = Math.floor(byo + 0.5);
右辺の byo を四捨五入し、左辺の byo に代入し直します。