JavaScript1

１．JavaScriptとは　　　　　　　　　　　　　　[もくじへ] [トップページへ]

JavaScriptは、C言語をベースに開発された言語で、HTML内に記述し

ます。

HTMLは文章や図をどのように表示するかを指示することが主な目的

なので、一般のプログラム言語のようなプログラムの流れを制御する

ことはできません。HTMLでできないことを補うものとして、JavaScript

やVBScriptがあります。

JavaScriptの特徴は以下の通りです。

・For や If などの制御命令によるプログラムの効率化

・柔軟な配列管理

・Dateオブジェクト、Mathオブジェクト、文字列オブジェクトのサポート

・エラー処理のサポート

・onClick, onChange イベントなどによるイベント処理

・タイマー処理

・入出力ダイアログによるデータの入力と出力

用語

HTML・・・・・・・ブラウザで表示するファイルを作るためのテキスト編集
　　　　　　　　　用言語
VBScript・・・・Microsoft社が開発したスクリプト言語。

２．HTMLについて　　　　　　　　　　　　　[もくじへ] [トップページへ]

JavaScriptは、HTML内に記述する関係上、最低限のHTMLの知識が

必要です。初めての方のために、少し触れておきます。

HTMLのページ全体は <HTML> </HTML> タグで囲まれ、その中が

２つの部分に分れます。１つ目の <HEAD> </HEAD> タグに囲まれ

た部分では、このページ固有の情報（タイトル）などを記述します。次

の<BODY> </BODY> タグで囲まれた部分には、ページの内容その

ものを記述します。

<HTML>

　　　<HEAD>

　　　</HEAD>

　　　<BODY>

　　　　　　本文

　　　</BODY>

</HTML>

また、ほとんどのタグは開始タグ < > と終了タグ </ > で囲みます。

例）

<CENTER> </CENTER> 囲まれた部分を中央に揃える

<PRE> </PRE> 　　　　　囲まれた部分をそのまま表示

<P>　　　　　　　　　　　　　改行して、さらに一行あける。終了タグ

　　　　　　　　　　　　　　　</P> は、通常いらない

<BR>　　　　　　　　　　　　改行する。終了タグ </BR> はいらない

など、いろいろなタグがありますが、HTMLのハンドブックを手元に置

いておき、必要なときに参照すればいいでしょう。これから、初めて出

てくるタグについては、なるべく説明を加えます。

３．JavaScriptの記述方法　　　　　　　[もくじへ] [トップページへ]

JavaScriptは、InternetExplorerで処理されますが、記述するのはメ

モ帳のようなテキスト編集できるものであれば、何でもいいのです。

ここでは、メモ帳に次のプログラムを書いてみます。タグ（<>）や命令

は、半角で入力します。

プログラム例題１

</HTML>

このプログラムを、メモ帳に書き込み（上記のプログラムをコピーし

て張り付けでもいいです。）、 test.html という名前をつけて保存し

てください。保存先は、どこでもかまいませんが、とりあえずデスクト

ップに保存します。

デスクトップに test.html というアイコンができるので、あとはそのア

イコンをダブルクリックすれば、実行できます。

　　　　　　　　　　　　プログラムの記述手順

（１）メモ帳にプログラムを書く（タグや命令は半角で）
　　　　　　　　　　　　　　　↓
（２）プログラム名（test.html)を付けてデスクトップに保存
　　　　　　　　　　　　　　　↓
（３）デスクトップ上の test.html のアイコンをダブルクリックする（実行）

JavaScriptはこのように、<SCRIPT> </SCRIPT> ブロックで囲み

ます。さらに、<SCRIPT>タグに対応しないブラウザでは、ブロック内

の文字はそのまま文字として出力されますので、 で

囲み、ブロック内の文字を出力しないようにします。

 は、コメント（注釈）を入れるタグです。

<SCRIPT LANGUAGE="JavaScript">
<!--

JavaScript プログラム

// -->
</SCRIPT>

もうひとつ、プログラムを入力してみましょう。

プログラム例題２

<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>

</HTML>

" "の中にタグを書くことができます。

<H1> </H1> は囲まれた部分を大見出しにするタグです。

４．四則演算

４・１加減乗除　　　　　　　　　　　　　　　　[もくじへ] [トップページへ]

===================================================

プログラム例題3

変数Ａの値が８、Ｂの値が４であるとき、和Ａ＋Ｂ、差Ａ－Ｂ、積Ａ×Ｂ、

商Ａ÷Ｂ、べき乗Ａ＾Ｂを求めよ。

=========================================================

<HTML>
<HEAD>
　　　<TITLE>例題３</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</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 はＨＴＭＬファイルというオブジェクトを示し、write

はそのあとに書かれた内容（引数）を、document オブジェク

トに出力するメソッドです。

オブジェクトとメソッドという専門用語がでてきましたが、これら

については、後で詳しく解説します。ここでは、画面に表示する

には、document.write ・・・　と書くものだと、覚えてください。

したがって、この文は改行タグ <BR> を画面に表示する、つま

り、改行しているだけです。

document.write "A=",a,"<br>";

ダブルクォテーション（”）に囲まれた文字 A= を表示し、続け

て a の内容を表示した後、タグ <BR> で改行します。

このように、文字をそのまま表示するには、”表示させる文字”

のようにします。変数の内容を表示するには、変数をそのまま

記述します。

４・２演算の優先順位　　　　　　　　　　　[もくじへ] [トップページへ]

===================================================

プログラム例題４

Ｘ＝５のときＹ＝aX^3 + bX^2 + cX + d の値を求めよ。

ただし、a = 2,　b = 3, 　c = 4,　d = 5 である。

=========================================================

<HTML>
<HEAD>
　　　<TITLE>例題４</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</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 を３乗したものに a を掛

ける」ことを表します。また、c*X + d は、「cX + d」であり、「c(X + d)」

ではありません。（ + ）より（ * ）が優先されます。

演算の優先順位をまとめると、

（　）　　→　　関数　　→　　＊，／　　→　　＋，－

の順になります。

もう一つ、例を示します。

===================================================

プログラム例題５

A＝５のとき,

の値を求めよ。

=========================================================

<HTML>
<HEAD>
　　　<TITLE>例題５</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

実行結果は、次のようになります。

P = 11
Q = 1
R = 7
S = 5.5

このように、分数式で、分母分子に式を含むときは、（　）が必要です。

５．組み込み関数

５・１数値演算関数 　　　　　　　　　　　　[もくじへ] [トップページへ]

===================================================

プログラム例題６

変数Xの値が 1.345 であるとき、

を求めよ。

=========================================================

<HTML>
<HEAD>
　　　<TITLE>例題６</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</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);

ｘの絶対値を求め、y1 に代入します。

y2 = Math.sin(x);

sin x の値を y2 に代入します。ｘはラジアンです。ｘが度の単位の

場合、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)　=　１
ceil(0)　　=　0　　　　　　　　 floor(0) 　 =　0
ceil(-1.5) =　-1　　　　　　　 floor(-1.5) = -2

最後の負のデータのみが、異なります。ceil は単に整数部を取り出

すだけですが、floor はそのデータ（‐1.5）を超えない最大の整数で

すから、それより小さい整数（‐2）が得られます。

５・２関数計算例 1　　　　　　　　　　　　[もくじへ] [トップページへ]

===================================================

プログラム例題７

角度　ｘ = １２°２０’３０”　を　１２．２０３０　として与え、その正弦

（sin）の値を求めよ。

=========================================================

考え方

まず、ｘ = 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>例題７</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

実行結果は、次のようになります。

度=12
分=20
秒=29.99999999999403
sin(12°20'29.99999999999403'')=0.21374085747415603

document.write ("sin(",doo,"°",fun,"'",byo,"''",")","=",y,"<br>");

文字をそのまま表示するには、ダブルクォーテーション（”）で囲みます。

変数をそのまま書くと、変数の内容が表示されます。また、いくつかの

データを続けて表示するには、コンマ（，）かプラス（+）でつなぎます。

このプログラムでは、秒の値がきれいに変換されていません。これは

コンピュータの変換誤差によるものです。変換誤差を完全になくするこ

とはできませんが、四捨五入によりある程度見やすくすることはできま

す。

次に、四捨五入のプログラムを作成します。

５・３関数計算例２　　　　　　　　　　　　[もくじへ] [トップページへ]

===================================================

プログラム例題８

プログラム例題７において、

秒=29.99999999999403　を四捨五入により整数に丸めよ。

=========================================================

考え方

次のように関数 floor を使えば、簡単に四捨五入できます。

　　r = Math.floor(x + 0.5)

例えば、x = 2.3 を四捨五入すると 2 になりますが、この式で考えると

2.3 + 0.5 = 2.8　　　floor(2.8) = 2

となり、ｏｋです。

次に、x = 3.5 の場合、

3.5 + 0.5 = 4.0　　　floor(4.0) = 4

となり、四捨五入する桁の数値がちょうど 5 の場合もｏｋです。

次に、x = 5.8 の場合どうでしょう。

5.8 + 0.5 = 6.3　　　floor(6.3) = 6

となり、この場合も四捨五入されています。

ついでに、小数第２位を四捨五入するには次のようにします。適当な

データを与えて、考えてみてください。

　　r = Math.floor(x*10 + 0.5)/10

<HTML>
<HEAD>
　　　<TITLE>例題８</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

実行結果は、次のようになります。

度=12
分=20
秒=30
sin(12°20'30'')=0.21374085747415605

今度はきれいに表示されました。

byo = Math.floor(byo + 0.5);

右辺の byo を四捨五入し、左辺の byo に代入し直します。

[もくじへ] [トップページへ] [次ページへ]