|
|  |
- Learn More About JavaScript Language Programming
/////
- JavaScriptとは
JavaScript は、オブジェクトを基本とするスクリプト言語で、インタープリタにより実行されます。C++ 言語や Java言語 のような完全なオブジェクト指向言語と比べると若干機能が少ないものの、その使用目的を考えると十分な機能が用意されています。
JavaScript は、型に関する制限の緩い言語です。変数のデータ型を明示的に宣言する必要がありません。また、通常は、適切な型変換が自動的に行われます。たとえば、文字列と数値を加算しようとすると、数値が文字列に変換され、文字列の連結が行われます。
/////
- JavaScriptの記述の仕方
JavaScriptは一般のプログラミング言語と同様にテキスト形式でコードを記述します。
コードには、各種ステートメント、互いに関連する一連のステートメントが集められたブロック、およびコメントが含まれます。ステートメント内では、変数、文字列や数値などのデータ、および式を使用できます。
JavaScriptはSCRIPTタグの中に書かれなければならず、また普通はヘッダに書かれるものです。すなわち、
<![CDATA[
<HTML><HEAD><TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
</HEAD>
<BODY></BODY></HTML>
]]>
のように書かれます。そしてSCRIPTタグの内側では、
<![CDATA[
function subroutine_1 {
・・・・
}
function subroutine_2 {
・・・・
}
]]>
のように書かれます。
/////
- ステートメント
JavaScript のステートメントは、1 行で記述します。ステートメントには、1 つまたは複数の項目および記号が含まれます。新しい行に移ると、必ず新しいステートメントの開始になります。ステートメントの終わりを明示的に記述するために、ステートメントの最後にセミコロン (;) を記述します。JavaScript では、セミコロン (;) は終了文字を表します。
次のコード例では、最初のステートメントで関数定義を開始し、その後の 5 つのステートメントのブロックで関数を定義しています。中かっこで囲まれていない最後の 3 つのステートメントは、ブロックではありません。また、関数定義の一部分でもありません。 <![CDATA[
function convert(inches) {
// ここの 5 つのステートメントは、1 つのブロックに入れられています。
feet = inches / 12;
miles = feet / 5280;
nauticalMiles = feet / 6080;
cm = inches * 2.54;
meters = inches / 39.37;
}
// ここの 3 つのステートメントは、ブロックに入れられていません。
km = meters / 1000;
kradius = km;
mradius = miles;
]]>
/////
- コメント
JavaScript の単一行コメントは、2 つのスラッシュ (//) で始まります。複数行コメントは、スラッシュとアスタリスクを組み合わせた記号 (/*) で始まり、その 2 つを逆に組み合わせた記号 (*/) で終わります。
<![CDATA[
aGoodIdea = "コード全体にコメントを付けてください。";
// これは単一行コメントです。
/*
これは、1 つ前のコードのステートメントを説明する複数行コメントです。
このステートメントは、変数 aGoodIdea に値を代入しています。
このような引用符で囲まれた値は、リテラルと呼ばれます。
リテラルは、情報を間接的に参照するタイプのものではありません。
リテラルには、情報が明示的かつ直接的に入れられています
(引用符は、リテラルの一部ではありません)。
*/
]]>
/////
- 代入と等価比較
JavaScript では、等号 (=) は、値の代入という処理に使用します。たとえば、次のような JavaScript コードがあるとします。
<![CDATA[
anInteger = 3;
]]>
これは、"3 という値を変数 anInteger に代入する"、つまり "変数 anInteger の値は 3 になる" ということを意味します。2 つの値が等しいかどうかを調べる場合は、2 つの等号を続けて (==) 使用します。
/////
- 式
JavaScript では、ブール値、数式など、値を生成するものすべてを式と言います。式には、"を加えます" といった言葉ではなく、"+" のような記号文字を使用します。式は、任意の値、変数、演算子、および式を組み合わせて構成します。
<![CDATA[
var anExpression = "3 * (4 / 5)";
var aSecondExpression = "Math.PI * radius * 2";
var aThirdExpression = aSecondExpression + "%" + anExpression;
var aFourthExpression = "(" + aSecondExpression + ") % (" + anExpression + ")";
]]>
/////
- 変数の宣言
変数の宣言は必ずしも必要ではありません。ただし、使用する前に変数を宣言しておくのがよいプログラミング作法とされています。変数の宣言には、var ステートメントを使用します。var ステートメントを使用することが必須となるのは、関数に対してローカルな変数を宣言する場合だけです。ただし、その他の場合も、変数は使用前に var ステートメントで宣言しておきましょう。
<![CDATA[
var mim = "今日は祝日です。";
// 変数 mim に格納された値は文字列型です。
// ダブル クォーテーション (") に囲まれた文章
//(変数 mim に代入された値) は、文字列リテラルです。
var ror = 3;
// 変数 ror に格納された値は数値型です。
var nen = true;
// 変数 nen に格納された値はブール型です。
var fif = 2.718281828;
// 変数 fif に格納された値は数値型です。
]]>
/////
- 変数の名前付けの制限
JavaScript では、大文字と小文字が区別されます。たとえば、変数 myCounter は、変数 MYCounter と別の変数です。さらに、変数の名前は、次の名前付け規則にしたがって指定する必要があります。変数名は、どのような長さでも可能です。
<![CDATA[
有効な変数名の例を次に示します。
_pagecount
Part9
Number_Items
無効な変数名の例を次に示します。
99Balloons // 数字で始まっています。
Smith&Wesson // アンパサンド (&) は、変数名には使用できません。
]]>
変数を宣言し、特定の値を代入しないで初期化する場合は、特殊な値 null を代入します。
<![CDATA[
var zaz = null;
var notalot = 3 * zaz;
// この時点では、変数 notalot は 0 になります。
]]>
何も値を代入しないで変数を宣言することもできます。ただし、undefined の状態になります。
<![CDATA[
var godot;
var waitingFor = 1 * godot;
// 変数 godot は未定義の状態なので、
//waitingFor の値には NaN が格納されます。
]]>
変数は、値を代入することにより、暗黙のうちに (つまり var を使用しないで) 宣言することもできます。ただし、まったく宣言されていない変数を参照することはできません。参照した場合は、実行時にエラーが発生します。
<![CDATA[
lel = "";
// 変数 lel は、暗黙のうちに宣言されたことになります。
var aMess = vyv + zez;
// 変数 vyv および変数 zez は存在しないので、
//エラーが発生します。
]]>
/////
- 型の自動変換
JavaScript は、型に関する制限の緩い言語です。変数を定義するときに型を指定する必要はなく、また違う型の値を代入し直すこともできます。ただし、現在保持している値の型 (内部処理形式) を意識する必要があります。
通常、数値と文字列を加算すると文字列の結合と見なされます。逆に、文字列を数値として加算する場合は、文字列式を持つ変数の内部処理形式を数値型に変換する必要があります。そのため、明示的に内部処理形式を変換する関数 parseInt() および parseFloat() が用意されています。
<![CDATA[
var theFrom = 1;
var theTo = 10;
var doWhat = "数を ";
doWhat += theFrom + " から " + theTo + " までカウントします。";
]]>
このコードの実行後は、変数 doWhat には、"数を 1 から 10 までカウントします。" という文字列が格納されます。数値データは、文字列形式に自動変換されました。
<![CDATA[
var nowWhat = 0;
nowWhat += 1 + "10"; // この場合、"10" は文字列なので、
// "+=" 演算子は連結演算子となります。
]]>
このコードの実行後は、変数 nowWhat には、"0110" という文字列が格納されています。次に、この結果になるまでの経過を示します。
1 および "10" のデータ型を確認します。"10" は文字列型、1 は数値型なので、この場合は、数値型が文字列型に変換されます。 + 演算子の両側の値は共に文字列なので、文字列が連結されます。連結された結果、"110" となります。
+= 演算子の両側の値のデータ型を確認します。変数 nowWhat に格納される値は数値型、"110" は文字列型なので、この場合は、数値型が文字列型に変換されます。
+= 演算子のの両側の値は共に文字列なので、文字列が連結されます。連結された結果、"0110" となります。 この結果の値が変数 nowWhat に格納されます。
<![CDATA[
var nowThen = 0;
nowThen += 1 + parseInt("10");
// この場合、"+=" は加算演算子となります。
]]>
このコードの実行後は、変数 nowThen には整数の 11 が格納されています。
/////
- JavaScript のデータ型
JavaScriptには、6 種類のデータ型があります。主なデータ型は、数値型、文字列型 (String)、オブジェクト型 (Object)、およびブール型 (Boolean) です。残りの 2 つは、null および undefined です。
文字列型
文字列は、シングル クォーテーション (') またはダブル クォーテーション (") で囲みます。シングル クォーテーション (') を使用すると、ダブル クォーテーション (") を含む文字列を指定することができます。
<![CDATA[
"今日は祝日です。"
'今日は "文化の日" です。'
"42"
]]>
数値型
JavaScript では、整数および浮動小数点数がサポートされています。整数の表記には、正の値、0、および負の値が使用できます。浮動小数点数の表記には、小数点、および 10 の累乗の指数を表す "e" (大文字でも小文字でもかまいません) が使用できます。両方とも使用した表記も可能です。
<![CDATA[
NaN、または非数値
正の無限大
負の無限大
正の 0
負の 0
]]>
ブール型
ブール型 (Boolean) の値は、真 (true) と偽 (false) の 2 つです。真 (true) と偽 (false) は特殊な値で、単純に 1 と 0 に対応する値ではありません。
比較処理では、比較式の 0 は 偽 (false) と見なされ、0 以外の数値を結果として持つステートメントは、真 (true) と見なされます。 したがって、次に示す式は、真 (true) です。
<![CDATA[
(false == 0)
]]>
Undefined 型
undefined である値は、宣言した変数に指定された単なる値であり、その値は前もって指定されています。
Null 型
null 値は、値のない、または何もないことを意味する値です。
/////
- プログラムの実行を制御する
一般に、どのようなスクリプトでも実行時の条件に応じて異なる処理を行うように記述できます。たとえば、1 時間おきに時刻を調べ、1 日のうちの時間帯に応じてパラメータを適切に変更するようなスクリプトや、ユーザーからの入力を受け取って入力内容に応じて処理を行うようなスクリプトを記述できます。また、決まった処理を繰り返すようなスクリプトを記述する場合でも、繰り返し処理を終了するかどうかを判断するための条件を設定する必要があります。
条件の評価には、いくつかの種類があります。JavaScriptでは、条件はすべてブール式で表現されるため、条件を評価したときに返される値は真 (true) または偽 (false) のどちらかになります。ブール型 (Boolean)、数値型、および文字列型は自由に評価することができます。
JavaScript には、さまざまな制御構造が用意されています。これらの制御構造のうち最も単純なものが、条件ステートメントです。
/////
- 条件ステートメントを使用する
JavaScript では、条件ステートメントとして if および if...else がサポートされています。if ステートメントで条件を評価すると、評価した条件が満たされる場合にだけ、何らかの JavaScript コードが実行されます (if...else ステートメントの場合は、条件が満たされないときに別のコードが実行されます)。
単純な if ステートメントの場合、全体を 1 行に納めて記述することもできます。一般には、if ステートメントや if...else ステートメントは複数の行に渡って記述されることになります。
次に、if ステートメント、および if...else ステートメントを使用したコードの例を示します。1 つ目の例は、単純にブール値の評価しています。かっこに囲まれた部分の評価結果が真 (true) の場合にのみ、if ステートメントの後ろのブロック内に記述されたステートメントを実行します。
<![CDATA[
if (newShip)
smash(champagneBottle,bow);
// newShip が真かどうかを調べるため、ブール値を評価します。
// この例では、両方の条件が真にならなければ、
//if ステートメントが真だとは見なされません。
if (rind.color == "濃い黄色" && rind.texture == "大小のしわ付")
{
theResponse = ("それはクレンショーメロンですか ? <BR>");
}
// この例では、2 つの条件のいずれかが真であれば、
//if ステートメントが真だと見なされます。
var theReaction = "";
if ((lbsWeight > 15) || (lbsWeight > 45))
{
theReaction = ("なんてかわいいネコでしょう ! <BR>");
}
else
theReaction = ("ずいぶん大きいネコですね ! <BR>");
]]>
/////
- 条件演算子を使用する
JavaScript では、条件演算子もサポートされています。条件演算子では、疑問符の後ろにテストする条件を記述し (条件の前に if は記述しません)、その後ろに 2 種類の処理を指定します。この 2 種類の処理のうちの片方は条件が満たされる場合に使用されます。他方は条件が満たされない場合に使用されます。この 2 種類の処理は、コロンで区切ります。
<![CDATA[
var hours = "";
// このコードは、hours に theHour の値を入れるか、
// theHour - 12 の値を入れるかを調べています。
hours += (theHour >= 12) ? " PM" : " AM";
]]>
/////
- ループ (繰り返し処理) を使用する
1つのステートメントや複数のステートメントが入ったブロックを繰り返し実行する方法には、いくつかの種類があります。一般に、繰り返し実行は "ループ" と呼ばれます。通常、ループの制御は、ループ内の処理が実行されるたびに値が変化する何らかの変数を評価して行います。
JavaScript では、 for ループ、 for...in ループ、 while ループ、 do...while ループ、 switch ループなどの多くの種類のループがサポートされています。
forループ
for ステートメントには、カウンタ変数、評価する条件、およびカウンタを更新する処理を指定します。指定した条件は、ループが 1 度実行される (この実行を、ループのワン パスまたは 1 回の反復処理と呼びます) 直前に評価されます。カウンタ変数は、ループの実行後、次の反復処理が開始される前に更新されます。
ループに指定した条件がループ処理を開始する時点で満たされてない条件の場合は、ループは 1 度も実行されません。ループに指定した条件が始めのうちは適切であっても、後から不適切となる場合があるので、ループ処理を記述するときは、注意してください。
<![CDATA[
//カウンタを更新する処理 (次の例では "icount++")
//はループの最後に、つまりループ本体のステートメントの
//実行が完了し、条件が評価される直前に実行されます。
var howFar = 11;
// ループの上限を 11 に設定します。
var sum = new Array(howFar);
// 添字が 0 〜 10 の 11 個のメンバを持つ
//sum という配列を作成します。
var theSum = 0;
sum[0] = 0;
for(var icount = 1; icount < howFar; icount++) {
// このループでは、1 から 10 までカウントされます。
theSum += icount;
sum[icount] = theSum;
}
var newSum = 0;
for(var icount = 1; icount > howFar; icount++) {
// このループは 1 度も実行されません。
newSum += icount;
}
var sum = 0;
for(var icount = 1; icount > 0; icount++) {
// これは無限ループとなります。
sum += icount;
}
]]>
for...in ループ
for...in ループは、オブジェクト内のすべてのプロパティを 1 つずつ処理するために用意されたループです。for...in ループのループ カウンタには、配列内のすべての要素のインデックスが使用されます。このインデックスは、数字ではなく文字列です。
<![CDATA[
for (j in tagliatelleVerde)
// tagliatelleVerde は、複数のプロパティを持つオブジェクトです。 {
// 具体的な処理を行う JavaScript コードのステートメントです。
}
]]>
while ループ
while ループは、for ループと似ています。ただし、for ループとは異なりカウンタ変数とカウンタを更新する処理がありません。決められた回数だけ処理を繰り返すのではなく、特定の変数や状態の変化を条件としてステートメント (またはブロック) のループ処理を行う場合には、for ループより while ループの方が適しています。
<![CDATA[
var theMoments = "";
var theCount = 42; // カウンタ変数を初期化します。
while (theCount >= 1) {
if (theCount > 1) {
theMoments = "残り " + theCount + " カウントです !";
}
else {
theMoments = "あと 1 です !!";
}
theCount--; // カウンタ変数を更新します。
}
theMoments = "発射 !";
]]>
while ループには、明示的なカウンタ変数がありません。このため、ほかの種類のループと比べても、無限ループに陥る可能性が高くなります。また、while ループを使用すると、ループを制御する条件がどこで更新されるのか判断しにくいため、条件が更新されないループを記述する可能性もあります。while ループを使用したコードを記述する場合は、特に無限ループを作らないように注意してください。
break ステートメントと continue ステートメント
break ステートメントと continue ステートメントは、ループの実行を中止するために用意されているステートメントです。break ステートメントを使用すると、特別な条件が満たされたときに実行を中止できます。continue ステートメントを使用すると、コード ブロックの残りの部分を実行しないで通常どおりカウンタ変数を更新した後 (ただし、for または for...in の場合のみカウンタ変数の更新が行われます)、次の反復処理に移行できます。
<![CDATA[
var theComment = "";
var theRemainder = 0;
var theEscape = 3;
var checkMe = 27;
for (kcount = 1; kcount <= 10; kcount++)
{
theRemainder = checkMe % kcount;
if (theRemainder == theEscape)
{
break;
// 剰余が初めて theEscape の値と等しくなったところで、
//ループから抜けます。
}
theComment = checkMe + " を " + kcount + " で割ったときの余りは " + theRemainder + "です。";
}
for (kcount = 1; kcount <= 10; kcount++)
{
theRemainder = checkMe % kcount;
if (theRemainder != theEscape)
{
continue;
// theEscape の値と等しい剰余だけを選択し、
//その他の剰余は無視します。
}
// 選択された剰余を使う JavaScript コード。
}
var theMoments = "";
var theCount = 42;
// カウンタを初期化します。
while (theCount >= 1) {
// if (theCount < 10) {
// 警告
// このように continue を使用すると、無限ループに陥ります !
// continue;
// }
if (theCount > 1) {
theMoments = "残り " + theCount + " カウントです !";
}
else {
theMoments = "あと 1 です !";
}
theCount--;
// カウンタを更新します。
}
theCount = "発射 !";
]]>
/////
- JavaScript の演算子
JavaScriptには、算術演算子、論理演算子、ビット演算子、代入演算子などの演算子が用意されています。ほかにも、いろいろな演算子があります。
算術演算子 論理演算子 ビット演算子 代入演算子 その他の演算子
演算の種類 記号 演算の種類 記号 演算の種類 記号 演算の種類 記号 演算の種類 記号
単項マイナス符号 - 論理 NOT !
ビットごとのNOT ~ 代入 =
削除 delete インクリメント ++
より小さい < 左シフト <<
複合代入 OP= 型調査 typeof
デクリメント -- より大きい >
右シフト >> void void
乗算 * より小さいか等しい <=
符号なしの右シフト >>> 除算 /
より大きいか等しい >= ビットごとのAND &
剰余 % 等しい ==
ビットごとのXOR ^ 加算 +
等しくない != ビットごとのOR |
減算 - 論理 AND &&
論理 OR || 条件(三項演算子) ?:
カンマ , 識別 ===
非識別 !==
演算子の優先順位
JavaScript では、演算子はあらかじめ決められた順序で評価され、演算が実行されます。この評価の順序を演算子の優先順位と呼びます。次の表では、演算子を優先順位の評価の高い順に上から並べています。また、この表の同じ行に並べられた演算子の優先順位はすべて同等の評価です。優先順位が同等の評価の演算子が使用された式では、左から右の順に演算が実行されます。
演算子 説明
. [] () フィールド アクセス、配列のインデックス、関数の呼び出し
++ -- - ~ ! typeof
new void delete 単項演算子、データ型の取得、オブジェクトの作成、未定義の値
* / % 乗算、除算、剰余
+ - + 加算、減算、文字列の連結
<< >> >>> ビット シフト
< <= > >= より小さい、より小さいか等しい、より大きい、より大きいか等しい
== != === !== 等しい、等しくない、識別、非識別
& ビットごとの AND
^ ビットごとの XOR
| ビットごとの OR
&& 論理 AND
|| 論理 OR
?: 条件
=OP= 代入、複合代入
, 複数の評価
かっこを使用すると、演算子の優先順位と関係なく、演算の実行順序を変更できます。かっこの内側の演算は、かっこの外側の演算よりも先に実行されます。ただし、かっこの内側の演算子には通常の優先順位が適用されます。
優先順位の高い演算子は、優先順位の低い演算子よりも先に評価され、演算が実行されます。次に例を挙げて説明します。
z = 78 * (96 + 3 + 45)
この式には、=、*、( )、+、および 2 つ目の + の 5 つの演算子があります。これらの演算子は、優先順位に従うと ()、*、+、+、= という順序で評価され、演算が実行されます。
最初に、かっこの内側の演算子が評価され、演算が実行されます。ここには 2 つの加算演算子があります。どちらも同等の優先順位です。したがって、96 と 3 の加算結果に 45 が加算され、かっこの内側の演算結果は 144 になります。
次に、かっこの外側の乗算が実行されます。78 に 144 が掛けられ、演算結果は 11232 になります。
最後に代入が実行されます。z に 11232 が代入され、z の値は 11232 になります。
/////
- JavaScript の関数
関数とは
JavaScriptの関数は、何らかの処理を実行して結果を返すことができます。関数の結果は、数値計算や比較演算の結果の場合もあります。
関数とは、複数の処理がまとめられ、1 つの名前が付けられたものです。関数を使用すると、コードを簡素化することができます。一連のステートメントを記述してそれに名前を付けておくと、必要な情報を渡して関数を呼び出すだけで、いつでも一連のステートメント全体をまとめて実行できます。
関数に情報を渡す場合は、渡す情報を関数の名前の後ろにかっこで囲んで指定します。関数に渡される情報は、引数またはパラメータと呼ばれます。関数には、引数をまったく必要としないものがあります。また 1 つだけ引数を必要とするものや複数の引数を必要とするものもあります。また、用途に応じて引数の数が変わる関数もあります。
JavaScript では、あらかじめ言語に組み込まれている関数と、プログラマが自分で作成する関数の 2 種類がサポートされています。
特別に用意された組み込み関数
JavaScript 言語には、いくつかの組み込み関数が用意されています。その中には、式や特殊文字を扱える関数、および文字列を数値に変換する関数があります。
たとえば、escape() 関数や unescape() 関数を使用すると、HTML コードで特別な意味を持つためにテキストに直接指定できない文字を変換できます。たとえば、山形かっこの "<" および ">" は、HTML タグを囲むのに使用される特殊文字です。
このような特殊文字を引数に指定すると、escape() 関数は、その文字を表すエスケープ コードを返します。この関数が返すエスケープ コードは、パーセント記号 (%) とその後ろの 2 桁の数字です。unescape() 関数は、逆の処理を行います。引数としてパーセント記号 (%) と 2 桁の数字の文字列を指定すると、その数値が表す文字を返します。
このほかに、便利な組み込み関数として eval() 関数があります。この関数は、文字列形式で表されている有効な数式を評価し、その値を返します。eval() 関数では、引数に評価する式を 1 つ指定します。
<![CDATA[
var anExpression = "6 * 9 % 7";
var total = eval(anExpression);
// 変数 total に 5 の値が代入されます。
var yetAnotherExpression = "6 * (9 % 7)";
total = eval(yetAnotherExpression)
// 変数 total に 12 の値が代入されます。
var totality = eval("大量の貝...");
// エラーが発生します。
]]>
独自の関数の作成
JavaScript では、独自の関数を作成し、必要に応じて使用することができます。関数を定義するには、1 つの関数ステートメントと、一連の JavaScript ステートメントによるブロックを記述します。
次のコード例では、checkTriplet 関数は引数として三角形の 3 つの辺の長さを指定します。指定した数値がピタゴラスの三平方の定理を満たしているかどうかを調べることにより、その三角形が直角三角形かどうかを評価します (直角三角形の斜辺の長さの 2 乗は、ほかの 2 つの辺の長さの 2 乗の和に等しくなります)。checkTriplet 関数は、直角三角形かどうかを評価するときに、ほかの 2 つの関数のいずれかを呼び出します。
浮動小数点数版の評価では、評価変数として非常に小さい数値 ("epsilon") を使用している点に注目してください。浮動小数点数の計算では、丸め誤差によって正しい結果が得られない場合があります。したがって、指定された 3 つの数値のいずれかが整数ではない場合には、斜辺の 2 乗と他の 2 つの辺の 2 乗の和を直接比較しても正しい結果が得られない可能性があります。ただし、直接比較した方がより正確に直角三角形であることを確認できるため、この例のコードでは、まず直接比較することが適切かどうかを調べ、適切であれば直接比較する方法を使用しています。
<![CDATA[
var epsilon = 0.0000000000001;
// 浮動小数点数の計算に使用する非常に小さい数値です。
var triplet = false;
function integerCheck(a, b, c) {
// 整数用の評価関数です。
if ((a*a) == ((b*b) + (c*c))) {
// 評価部分です。
triplet = true;
}
} // 整数用の評価関数終わり。
function floatCheck(a, b, c) {
// 浮動小数点数用の評価関数です。
var theCheck = ((a*a) - ((b*b) + (c*c)))
// 評価する値を作成します。
if (theCheck < 0) {
// 評価する値は絶対値でなくてはならないため、
// theCheck が負の場合は符号を反転させます。
theCheck *= -1;
}
if (epsilon > theCheck) {
// 値が十分小さければ、ほぼ直角三角形であるといえます。
triplet = true;
}
} // 浮動小数点数用の評価関数終わり。
function checkTriplet(a, b, c) {
// 三角形チェック関数。まず、最も長い辺を
// "a" にします。
var d = 0;
// 一時的に数値を格納する変数を作成します。
if (c > b) {
// c > b の場合は、b と c を入れ替えます。
d = c;
c = b;
b = d;
}
// c > b でない場合は、無視します。
if (b > a) {
// b > a の場合は、a と b を入れ替えます。
d = b;
b = a;
a = d;
}
// b > a でない場合は、無視します。
// これで、辺 "a" が 1 番長い辺
// (直角三角形の場合なら斜辺) になりました。
if (((a%1) == 0) && ((b%1) == 0) && ((c%1) == 0)) {
// 3 つの数値すべてが整数であるかどうかを調べます。
integerCheck(a, b, c);
// 3 つとも整数であれば、正確な評価を行います。
}
else
floatCheck(a, b, c);
// 浮動小数点数がある場合は、適切な範囲内で可能な
// 限り正確な評価を行います。
} // 三角形チェック関数の終わり。
// 次の 3 つのステートメントでは、関数をテストする
// ために単純な値を変数に代入します。
var sideA = 5;
var sideB = 5;
var sideC = Math.sqrt(50);
checkTriplet(sideA, sideB, sideC);
// 関数を呼び出します。呼び出した後は、変数 triplet
// に結果が入っています。
]]>
/////
- JavaScript のオブジェクト
オブジェクトとは
JavaScriptでは、オブジェクトとは、プロパティとメソッドを集めたものです。メソッドとは、オブジェクトのメンバとなっている関数のことで、プロパティとは、値または一連の値 (配列やオブジェクト) がオブジェクトのメンバとなったものを指します。JavaScript では、組み込みオブジェクト、ユーザーが作成したオブジェクト、ブラウザ オブジェクト (これについては、別の場所での説明を参照してください) の 3 種類のオブジェクトがサポートされています。
配列としてのオブジェクト
JavaScript では、オブジェクトと配列はまったく同じように扱われます。オブジェクトのメンバ (プロパティやメソッド) は、配列の添字インデックスを使用して参照することも、名前を使用して参照することもできます (名前を使用する場合は、オブジェクトの名前の後ろにピリオド (.) を置き、その後ろにプロパティの名前を記述します)。JavaScript では、添字の番号は 0 から始まります。また、コードをわかりやすくするために、添字を名前で表すこともできます。
このように、プロパティはさまざまな方法で参照できます。次に示すステートメントはすべて同じ処理を行っています。
<![CDATA[
theWidth = spaghetti.width;
theWidth = spaghetti[3];
// [3] は "width" のインデックス番号です。
theWidth = spaghetti["width"];
]]>
インデックス番号は、角かっこで囲んだ表記法でプロパティの参照に使用できますが、ピリオド (.) を使用する表記法でインデックス番号を指定することはできません。次のようなステートメントを記述すると、エラーが発生します。
<![CDATA[
theWidth = spaghetti.3;
]]>
オブジェクトがほかのオブジェクトをプロパティとしている場合は、名前を指定する表記法をそのまま続けてつなげてプロパティを指定します。
<![CDATA[
var init4 = toDoToday.shoppingList[3].substring(0,1);
// shoppingList は、配列で、toDoToday のプロパティです。
]]>
オブジェクトのプロパティとしてほかのオブジェクトを使用できることにより、複数の添字を持つ配列の作成が可能になります (ただし、これは直接サポートされている機能ではありません)。次のコード例は、0 × 0 から 16 × 16 までの値の入った掛け算表を作成します。
<![CDATA[
var multTable = new Array(17);
// 表の骨格となる部分を作成します。
for (var j = 0; j < multTable.length; j++) {
// すべての行を埋めていく準備です。
var aRow = new Array(17);
// 行を作成します。
for (var i = 0; i < aRow.length; i++) {
// 1 行分を埋めていく準備です。
aRow[i] = (i + "× " + j + " = " + i*j);
// データを作成し、代入します。
}
multTable[j] = aRow;
// データの入った行を表に入れます。
}
]]>
このような配列の各要素を参照するには、次のように角かっこを複数使用します。
<![CDATA[
var multiply3x7 = multTable[3][7];
]]>
次のようなステートメントを記述すると、エラーが発生します。
<![CDATA[
var multiply3x7 = multTable[3, 7];
]]>
/////
- JavaScript のキーワード
JavaScriptには、多くの予約語があります。JavaScript の予約語には、予約キーワード、このバージョン以降で追加予定のキーワード、および使用できない単語の 3 種類があります。
キーワード
break false in this void
continue for new true while
delete function null typeof with
else if return var
追加予定のキーワード
case debugger export super
catch default extends switch
class do finally throw
const enum import try
使用できない単語には、JavaScript のオブジェクトまたは関数として既に使用されている本来の名前が含まれます。String、parseInt などの単語が、これに該当します。
予約キーワードおよび追加予定のキーワードに該当する予約語を使用した場合は、スクリプトを初めてロードしたときにコンパイル エラーが発生します。使用できない単語に該当する予約語の場合、たとえば、次に示すスクリプトの例のように、同じスクリプト内で使用できない予約語と同じ名前の変数を宣言し、さらにその使用できない予約語そのものを使用するようなスクリプト コードは、意図したようには動作しません。
<![CDATA[
var String;
var text = new String("これは文字列オブジェクトです");
]]>
この場合、String はオブジェクトではないというエラー メッセージが表示されます。ただし、既に存在する識別子を使用しても、多くの場合はこの例のようにすぐには判断できません。
/////
- 再帰法
再帰法は、重要なプログラミング手法です。再帰法では、関数がその関数自身を呼び出します。再帰法を使用した簡単な例として、階乗の計算があります。0 および 1 の階乗は、共に 1 になります。これより大きい数の階乗は、1 * 2 * ... というように階乗を求める数になるまで数字を 1 ずつ増やしながら掛けていくことにより算出できます。
次の段落は、階乗を求める関数の定義です。
"指定された数字が 0 より小さい場合は、計算しません。また、整数でない場合は、端数を切り捨てて整数にします。階乗を求める数字が 0 または 1 の場合は、階乗は 1 です。階乗を求める数字が 2 以上の場合は、その数字にその数字より 1 だけ小さい値の階乗を掛けます。"
この計算を行うために使用する関数は、既に作成している関数です。つまり、この関数は、自分自身を呼び出して 1 つ小さい数の階乗を求めることにより、目的の数の階乗を計算できるようになります。これが、再帰の一例です。
しかし、注意しなければならない点があります。再帰法を使用すると、再帰呼び出しが終了しないで永久に結果を得られない再帰関数を作成してしまうことがよくあります。このような再帰は、いわゆる "無限" ループになります。たとえば、階乗の計算の定義から最初の規則 (負の値に関する規則) を省略して関数を作成し、この関数を使用して負の値の階乗を求めようとしたとします。-24 の階乗を求めようとした場合なら、まず -25 の階乗を求めることになります。すると、次に -26 の階乗を求めることになります。このように処理が行われていくと、明らかに再帰呼び出しが終了しないことになります。このため、関数の実行は正常に終了しません。
したがって、再帰関数は、特に注意して設計する必要があります。無限再帰になる可能性がないと思われる場合でも、関数内で再帰呼び出しの回数をカウントしておけば、呼び出しの回数が非常に多くなってあらかじめ設定しておいた回数を超えたときには自動的に実行が終了するように設計することもできます。
次に、階乗を求める関数の定義を、JavaScript のコードで示します。
<![CDATA[
function factorial(aNumber) {
aNumber = Math.floor(aNumber);
// 数値が整数でない場合は、端数を切り捨てます。
if (aNumber < 0) {
// 数値が 0 より小さい場合は、計算を中止します。
return "結果を求めることはできません。";
}
if ((anumber == 0) || (anumber == 1)) {
// 数値が 0 または 1 の場合は、その階乗は 1 です。
return 1;
}
else
return (anumber * factorial(anumber - 1));
// それ以外の場合は、数値が 1 になるまで
// 再帰呼び出しを行います。
}
]]>
/////
- 変数のスコープ
JavaScriptには、グローバルとローカルの 2 種類のスコープがあります。変数を関数定義の外で宣言すると、その変数はグローバル変数になり、プログラム内のどこからでもその値を参照したり変更したりできるようになります。関数定義の中で変数を宣言した場合は、その変数はローカル変数になります。ローカル変数は、関数が実行されるたびに生成され、関数の実行完了と同時に破棄されます。その関数以外のコードからその変数にアクセスすることはできません。
ローカル変数には、グローバル変数と同じ名前を付けることができます。同じ名前を付けても、2 つの変数は完全に区別され、別の変数として処理されます。したがって、片方の値を変更しても、他方にはまったく影響はありません。このようなローカル変数を宣言した関数の中では、ローカル変数の方にしかアクセスできません。
<![CDATA[
var aCentaur = "半身半馬の怪物、";
// aCentaur のグローバル定義です。
// 簡潔に説明するため、ここに記述される
// JavaScript コードは省略します。
function antiquities() {
// この関数内でローカル変数 aCentaur
// を宣言します。
var aCentaur = "ケンタウロスは、おそらく馬に乗ったスキタイ人戦士です";
// 簡潔に説明するため、ここに記述される
// JavaScript コードは省略します。
aCentaur += "が、間違って報告されました。というのも、";
// ローカル変数に文字列を追加します。
// 簡潔に説明するため、ここに記述される
// JavaScript コードは省略します。
} // 関数はここで終わりです。
var nothinginparticular = antiquities();
aCentaur += "経験の浅い無知な兵士が遠くから見たためです。";
// 関数内では、"ケンタウロスは、おそらく馬に乗ったスキタイ人戦士ですが、
// 間違って報告されました。" というのも、" という文字列が変数に格納されます。
// 関数の外では、文の残りの "半身半馬の怪物、経験の浅い無知な兵士が遠くから
// 見たためです。" が変数に格納されます。
]]>
同一のスコープ内では、どこで変数を宣言しても、その変数がスコープ内の先頭で宣言が行われたように処理されます。このことにより、スクリプトがプログラマの意図したとおりに動作しない状況も発生します。
<![CDATA[
var aNumber = 100;
var withAdditive = 0;
withAdditive += aNumber;
// ここでは withAdditive は 100 です。
tweak();
withAdditive += aNumber;
// ここでは withAdditive は 200 です。
function tweak() {
var newThing = 0;
// 変数 newThing を明示的に宣言します。
// 次のステートメントは、コメントアウトして
// おかないとエラーが発生します。
// newThing = aNumber;
// 次のステートメントは、42 という値をローカル
// 変数 aNumber に代入することで、aNumber を
// 明示的に宣言しています。
aNumber = 42;
if (false) {
var aNumber; // このステートメントは決して実行されません。
aNumber = "Hello!";
// このステートメントは決して実行されません。
} // 条件処理の終わり。
} // 関数定義の終わり。
]]>
コメントアウトされているステートメントは、ローカル変数 aNumber の値をローカル変数 newThing に代入しようとしています。ローカル変数 aNumber は、関数内の別の場所で宣言され、関数全体を通して存在します。しかし、このステートメントはうまく実行できません。それは、このステートメントが実行される時点での変数 aNumber は、undefined の状態で何も代入されていないからです。
/////
- データのコピー、受け渡し、および比較
"値渡し" と "参照渡し"
数値およびブール値 (真 (true) や偽 (false) の値) のコピー、受け渡し、および比較は、"値渡し" で行われます。値渡しによるコピーや受け渡しでは、コンピュータのメモリ内に空間が新しく確保され、元の値がそこへ格納されます。それぞれの値は別の値と見なされるため、値渡しした後で元の値を変更しても、コピーされた値に影響は及びません (逆の場合も同様です)。
一方、オブジェクト、配列、および関数のコピー、受け渡し、および比較は、ほとんどの環境で "参照渡し" で行われます。参照渡しによるコピーや受け渡しでは、実際に作成されるのは元の項目へのポインタですが、そのポインタを、あたかもコピーされた項目であるかのように扱うことになります。この場合は、元の項目に変更を加えると、元の項目とコピーされた項目の両方が変更されます (逆の場合も同様です)。実際存在する項目は 1 つだけで、"コピーされた項目" は、データへのもう 1 つの参照に過ぎません。
演算子を使用すると、オブジェクトおよび配列も "値渡し" でコピーできます。
文字列の場合は、コピーや受け渡しは参照渡しで行われますが、比較は値渡しで行われます。
ASCII 文字セットと ANSI 文字セットでは、その構成方法から、"Zoo" は "aardvark" より小さいと評価されます。つまり、文字の順序の中で大文字は小文字よりも先に来ます。
関数へのパラメータの受け渡し
関数へ値渡しでパラメータを渡した場合は、そのパラメータの新しいコピーが作成されます。作成されたコピーは、その関数の中でだけ存在します。一方、関数へ参照渡しでパラメータを渡した場合は、渡されたパラメータの値を関数内で変更すると、スクリプト内のほかの場所で使用しているそのパラメータの値も変更されることになります。
データの比較
値渡しで比較した場合は、別々に存在する項目が互いに等しいかどうかを調べます。通常、この比較はバイトごとに比較されます。一方、参照渡しで比較した場合は、2 つの項目が同一の項目を指すポインタであるかどうかを調べます。そして同一の項目を指していた場合、両者は等しいと評価されます。同一の項目を指していなかった場合は、たとえ値渡しで比較した場合に等しくなる値が格納されても、両者は等しくないと評価されます。
文字列を参照渡しでコピーしたり受け渡したりすると、メモリを節約することができます。ただし、いったん作成した文字列は変更できないため、参照渡しでコピーまたは受け渡しした文字列どうしも比較できます。これにより、片方の文字列が他方とは別々に生成されていなかった場合でも、2 つの文字列が同じ内容を持つかどうかを調べることができます。
/////
- 配列の使用
配列のインデックス
JavaScriptで使用する配列は、"散在可能な" 配列です。たとえば、0、1、2 の番号が割り当てられた 3 つの要素を持つ配列の次の要素として、3 〜 49 の要素ではなく 50 番目の要素を作成したりできます。この場合、自動設定されるサイズ変数を持つ配列であれば、サイズ変数は 4 ではなく 51 として設定されます (配列サイズの自動監視機能については、「組み込みオブジェクト」を参照してください)。もちろん、配列要素の番号がすべて連続した配列も作成できますが、必ずしも連続した配列である必要はありません。実際、JavaScript では、必ずしも配列に番号の添字を持たせる必要はありません。
JavaScript では、オブジェクトと配列は基本的にはまったく同じものです。両者の本当の意味での違いは、データにあるのではなく、配列のメンバ、つまりはオブジェクトのプロパティとメソッドを指定する方法にあります。
配列メンバの指定方法
配列のメンバを指定するには、主に 2 とおりの方法があります。通常は、角かっこを使ってメンバを指定する方法です。角かっこの中には、数値、または 0 以上の整数値として評価される式を入れます。次のコード例では、既にスクリプト内のほかの場所で変数 entryNum を定義し、それに値を代入してあることが前提となっています。
<![CDATA[
theListing = addressBook[entryNum];
theFirstLine = theListing[1];
]]>
この指定方法は、オブジェクトのメンバを指定する方法と意味的には同じですが、オブジェクト メンバの指定では、ピリオドの後ろに記述するのは実際のプロパティの名前である必要があります。そして、指定した名前のプロパティが存在しない場合には、エラーが発生します。
配列の要素を指定する 2 つ目の方法は、番号の割り振られたプロパティを持つオブジェクト (または配列) を作成し、ループ内で番号を生成させる方法です。次のコード例では、addressBook に格納されている一覧から取得した名前と住所を格納するための 2 つの配列を作成します。各配列は、4 つのプロパティを持ちます。たとえば、theName のインスタンスは、 theListing の [Name1] 〜 [Name4] のプロパティから作成され、"G." "Edward" "Heatherington" "IV"、または "George" "" "Sand" "" といったデータが格納されます。
<![CDATA[
theListing = addressBook[entryNum];
for (i = 1; i < 4; i++) {
theName[i] = theListing["Name" + i];
theAddress[i] = theListing["Address" + i];
}
]]>
この例では配列のサイズは小さく、"ドット" スタイルの表記 (つまり、theListing、theName、および theAddress を配列ではなくオブジェクトとして扱う方法) でも簡単に記述することができます。しかし、どのような場合も常にこれが可能であるとは限りません。実行時にならなければ存在しないプロパティがある場合もあれば、どのプロパティを指定すべきかがコードの記述時にはわからない場合もあります。たとえば、通し番号ではなく名前を使って作成された配列 addressBook があり、スクリプトの実行中に、ユーザーがだれかを検索するために "その場で" 名前を入力する場合も考えられます。次のコード例では、既にスクリプト内のほかの場所で適切な関数が定義されていることが前提となっています。
<![CDATA[
theListing = addressBook[getName()];
theIndivListing = theListing[getFirstName()];
]]>
これは、配列のメンバの "連想処理" による指定です。完全に任意の文字列を使ってメンバを指定できます。JavaScript でのオブジェクトは、実際には連想処理可能な配列です。"ドット" スタイルの表記でもメンバを指定できますが (通常この方法を使用します)、必ずしもそうする必要はありません。
/////
- 高度なオブジェクト作成
コンストラクタを使ってオブジェクトを作成する
JavaScript では、オブジェクト クラスの作成にはコンストラクタを使用します。
コンストラクタを呼び出すには、new 演算子を使用します。new 演算子は作成したオブジェクトを戻り値として返します。
Function コンストラクタは特殊なコンストラクタで、これを使うと "匿名" 関数を作成できます。匿名関数とは、名前を持たない関数のことです。Function コンストラクタを使うと、たとえば、ほかの関数の中で 1 つの命令として機能するような、"その場でしか使われない" 関数を作成できます。このように 1 度しか呼び出されない関数には、名前を付ける必要はありません。
次のコードの例は、名前と電子メール アドレスの一覧の 1 行分を生成する匿名関数の例です。この匿名関数は、変数 firstNameFirst の値を調べて、姓と名のどちらを先に持ってくるかを判断し、変数 emailNameFirst の値を調べて、名前と電子メール アドレスのどちらを先に持ってくるかを判断します。この例では、変数 firstNameFirst と変数 emailNameFirst の値は既にほかの場所で設定されていることを前提としています。
<![CDATA[
for (j = 1; j < addressList[length]; j++)
{
oneListingLine = new Function( emailNameFirst,
firstNameFirst,
addressList,
j,
theName = new Function( firstNameFirst,
addressList,
j,
var theName=(addressList[j].firstName + addressList[j].lastName);
if (firstNameFirst)
{
theName=(addressList[j].firstName + addressList[j].lastName);
},);
if (emailNameFirst)
{
theListing = addressList[j].emailName+ ":\t" + theName
}
else
theListing = theName + ":\t" + addressList[j].emailName;
return theListing;)
document.write(oneListingLine + "<br>");
}
]]>
コンストラクタを記述する
独自のコンストラクタを記述する場合、コンストラクタ内で新しく作成するオブジェクトを指すには this キーワードを使用します。コンストラクタは、オブジェクトの初期化を行います。
次のコード例では、コンストラクタの処理はインデックス 0 から始まっていますが、必ずしもこれに従う必要はありません。たとえば、配列またはオブジェクトの実際の番号を表すパラメータを使いたい場合は、最初のインデックスを 1 にしてもかまいません。この例では、配列の長さを、組み込みオブジェクト Array() で自動的に管理される length パラメータと区別するために extent という名前にしています。配列にプロパティを追加するコードを記述する場合は、extent パラメータ (または、これと同等の役割を持つパラメータ) をコード内で更新する必要があります。このパラメータが、JavaScript により自動的に調整されることはありません。
ここでは、このような単純な例でさえも、現在のオブジェクトを指すのにオブジェクト スタイルの表記 (ドット) と配列スタイルの表記 (角かっこ) の両方を使用しているという点に注意してください。
<![CDATA[
function MakeStringArray(length)
{
this.extent = length;
for (iNum = 0; iNum < length; i++)
{
this[iNum] = "";
}
}
// コンストラクタを使って、配列を作成し初期化します。
myStringArray = new MakeStringArray(63);
]]>
オブジェクトの作成にプロトタイプを使う
オブジェクト定義を記述するときに "プロトタイプ" プロパティを使うと、生成したすべてのオブジェクトが共通して持つプロパティを作成できます。プロトタイプ プロパティは、同じクラスの各オブジェクトに参照渡しでコピーされるため、そのクラスに属するすべてのオブジェクトは同じ値を持つことになります。ただし、各オブジェクトでプロトタイプ プロパティの値を変更し、そのインスタンス内でデフォルト値を新しい値に変更できます。この場合、この変更によって同じクラスに属するほかのオブジェクトに影響を及ぼすことはありません。
JavaScript 言語に用意されているすべてのオブジェクトに、このプロトタイプが用意されています。この原理を使うと、これらのオブジェクトに追加プロパティを定義できます。たとえば、計算に使う必要がある特別な定数が、Math オブジェクトや Number オブジェクトの定数として用意されていない場合、その定数を自分で定義し、定義した定数を各オブジェクト プロトタイプ、または自分で作成したオブジェクト クラスのプロトタイプ プロパティに割り当てることができます。
<![CDATA[
Math.prototype.Avogadro = 6.0232E23;
function howManyMolecules(wtGrams,molWt)
{
return ((wtGrams/molWt)*Math.prototype.Avogadro);
}
document.write("その量であれば、" +
howManyMolecules(window.prompt("グラム数は？",0),
window.prompt
("分子量は？",0)) +
" 個の分子が含まれています。");
]]>
さらに、重要なことですが、関数を定義し、定義した関数をメソッドとして文字列のプロトタイプ String.prototype に割り当てると、スクリプト内のすべての文字列でそのメソッドを使用できるようになります。次のコード例では、既にスクリプト内の別の場所で、周期表を格納した "theElements" という名前の配列を定義してあることが前提となっています。この配列には、各元素の元素記号、名前、原子量、およびその他の関連情報が格納されています。
<![CDATA[
function atomName(theSymbol)
{
return(theElements[theSymbol].fullName);
}
String.prototype.atomName = atomName;
function decodeFormula(theFormula)
{
var theCurrentPiece = "";
var theDecodedFormula = "";
for (i = 1; i = theFormula.length ; i++)
if (theFormtheCurrentPiece)
// 化学式の文字列を元素記号と数字に分ける
// コード ステートメント。
// 化学式の配列にループ処理を行い、解読された文字列を
// 組み立てるコード。
// 1 回の処理は、次のようになります。
theDecodedFormula += formula[n].symbol.prototype.atomName;
theDecodedFormula += " ";
theDecodedFormula += formula[n].number;
theDecodedFormula += " 個 ";
// ループ処理終わり。
return theDecodedFormula;
}
decodeFormula(window.prompt("化学式は？","Al2O3"));
]]>
/////
- 特殊文字
特殊文字
JavaScriptには特殊文字がいくつか用意されており、直接入力することはできない文字を文字列として使用できます。特殊文字は、円記号 (\) で始まります。この円記号 (\) は、次に続く文字が特殊文字であることを JavaScript のインタープリタに知らせる "エスケープ" 文字です。
エスケープ シーケンス 文字
\b バックスペース
\f フォーム フィード
\n ライン フィード (改行)
\r キャリッジ リターン
\t 水平タブ (Ctrl + I キー)
\' シングル クォーテーション (')
\" ダブル クォーテーション (")
\\ 円記号 (\)
円記号 (\) 自体はエスケープ文字として使われるため、スクリプト内に円記号 (\) を直接入力することはできません。円記号 (\) を文字列として使うには、円記号 (\) を 2 度続けて入力 (\\) する必要があります。
<![CDATA[
document.write('イメージのパスは、C:\\gifs\\garden.gif です。');
document.write('タイトルはAfter the snow of \'Grandma\'coveredです。');
]]>
/////
- JavaScriptのトラブルシューティング
どのプログラミング言語にも、注意を怠ると陥ってしまう落とし穴が潜んでいます。また、どの言語でもその言語特有の意外な動作があります。たとえば、null 値を例に取っても、JavaScriptなどのスクリプト言語と C 言語や C++ 言語ではその意味は異なります。
ここでは、JavaScript スクリプトを記述するときに発生する可能性のあるトラブルをいくつか挙げます。
構文エラー
プログラミング言語の構文は自然言語の文法に比べるとずっと厳密であるため、スクリプトを記述するときには細心の注意を払う必要があります。たとえば、文字列を指定する必要のあるパラメータを入力するときに引用符で囲むのを忘れると、それだけで正常に動作しなくなります。
スクリプトの解釈の順序
JavaScript は、各ユーザーが使用する Web ブラウザの HTML 解析処理の一部分として解釈されます。したがって、ドキュメントの セクション内にスクリプトを記述すると、その部分はどの セクションが調べられるよりも先に解釈されます。 セクションで作成されるオブジェクトがあった場合、そのオブジェクトは が解析される時点では存在しないため、 セクションのスクリプト内では扱えません。
型の自動強制変換
JavaScript は、自動強制変換が行われる型制限の緩い言語です。このため、実際には、異なる型を持つ値どうしが等しくなることなどないにも関わらず、次に示す式の例では、真 (true) として評価されます。
<![CDATA[
"100" == 100
false == 0
]]>
演算子の優先順位
式の評価で何かの演算を行う場合、 演算子の優先順位が、式の評価での演算子の記述順序よりも優先されます。たとえば、次に示す式の例では、最初に現れる演算子は減算 (-) の演算子ですが、減算 (-) よりも先に乗算 (*) が行われます。
<![CDATA[
theRadius = aPerimeterPoint - theCenterpoint * theCorrectionFactor;
]]>
オブジェクトでの for...in ループの使用
オブジェクトの各プロパティに対し、for...in ループを使って処理を行う場合は、オブジェクトの各フィールドがどのような順序でループ カウンタ変数に代入されるかをプログラマが予測したり制御したりはできません。さらに、言語のインプリメンテーションが変われば、この順序も変わる可能性があります。
with キーワード
with ステートメントは、目的のオブジェクト内に既に存在するプロパティを扱う場合には便利ですが、このステートメントを使っても、オブジェクトにプロパティを追加できません。オブジェクト内に新しいプロパティを作成するには、オブジェクトを明示的に指定する必要があります。
this キーワード
this キーワードは、オブジェクト定義の中で定義中のオブジェクト自身を指す場合に使用するキーワードです。通常は、 オブジェクト定義ではない関数の実行中に、その関数自身を指すために this キーワードやその他の類似のキーワードは使用できません。ただし、その関数がメソッドとしてオブジェクトに割り当てられる関数であれば、割り当て先となるオブジェクトを指すために関数内で this キーワードを使用できます。
スクリプトを表示するスクリプトの記述
タグを記述すると、インタープリタがその行に達した時点で現在のスクリプトが終了します。このため、"" という文字列を表示するには、これを少なくとも 2 つの文字列 (たとえば、"") に分割して記述する必要があります。これを目的の形 ("") で表示するには、表示するステートメント内で、分割した文字列どうしを連結します。
暗黙のウィンドウ参照
ウィンドウは同時に複数個開くことができるため、暗黙的なウィンドウ参照を行うと、必ず現在のウィンドウを指していると受け取られます。その他のウィンドウを指すには、明示的な参照を使用する必要があります。
/////
- ブラウザへの情報表示
JavaScript では、ブラウザにデータを直接表示する方法として 2 とおり用意されています。1 つは、document オブジェクトの write() メソッドおよび writeln() メソッドを使用する方法です。もう 1 つは、ブラウザ内のフォームや、警告、確認、および入力のメッセージ ボックスに情報を表示する方法です。
document.write() と document.writeln() を使用する
情報を表示する最も一般的な方法が、document オブジェクトの write() メソッドを使用する方法です。このメソッドには、ブラウザに表示する文字列を受け取るための引数が 1 つあります。引数に指定する文字列は、単なるテキストでも HTML でもかまいません。
文字列を囲む引用符には、シングル クォーテーション (') もダブル クォーテーション (") も使用できます。この仕様により、文字列の中で引用符やアポストロフィを使うことができます。
<![CDATA[
document.write("πの値は、約 " + Math.PI + "です。");
document.write();
]]>
次のコードの例は、ブラウザ ウィンドウに何かを表示しようとするたびに "document.write" と入力する手間を省くための簡単な関数です。この関数では、表示しようとした内容が未定義のものであってもエラーは発生せず、"w();" を実行した場合と同じ処理 (空白行の表示) が行われます。
<![CDATA[
function w(m) {
// 関数を記述します。
m = "" + m + "";
// m を確実に文字列にします。
if ("undefined" != m) {
// 空の文字列や未定義項目でないか
// どうかを調べます。
document.write(m);
}
document.write("<br>");
}
w('<IMG SRC="horse.gif">');
w();
w("これは馬の彫刻です。");
w();
]]>
<![CDATA[
writeln() メソッドは、write() メソッドとほとんど同じですが、受け渡しした文字列
の最後に必ず改行文字を追加するという点だけが異なります。HTML では、通常はこの
改行は単なる空白文字に変換されますが、<PRE> タグや <XMP> タグを使っていれば、
そのまま改行文字としてブラウザに表示されます。
]]>
write() メソッドは、メソッドが呼び出されたとき、表示先となるドキュメントが開いて追跡しているプロセス内に存在していなければ、ドキュメントは開かれてクリアされます。これは、場合によっては危険です。次のコードの例は、1 分おきに時刻を表示するように記述したスクリプトですが、プロセス内で自分自身をクリアしてしまうため、2 回目以降の表示処理は失敗します。
<![CDATA[
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function singOut() {
var theMoment = new Date();
var theHour = theMoment.getHours();
var theMinute = theMoment.getMinutes();
var theDisplacement = (theMoment.getTimezoneOffset() / 60);
theHour -= theDisplacement;
if (theHour > 23) {
theHour -= 24
}
document.write("現在、世界協定時刻で " + theHour +
" 時 " + theMinute + " 分です。");
window.setTimeout("singOut();", 60000);
}
</SCRIPT>
</HEAD><BODY>
<SCRIPT>
singOut();
</SCRIPT>
</BODY></HTML>
]]>
document.write() の代わりに window オブジェクトの alert() メソッドを次のように使えば、このスクリプトは正常に動作します。
<![CDATA[
window.alert(" 現在、世界協定時刻で " +
theHour + " 時 " +
theMinute + " 分です。");
window.setTimeout("singOut();", 60000);
]]>
現在のドキュメントをクリアする
document オブジェクトの clear() メソッドは、現在のドキュメントの内容をクリアします。このメソッドは、ドキュメントのほかの部分と一緒にスクリプトもクリアするため、使用には十分注意する必要があります。
<![CDATA[
document.clear();
]]>
/////
- メッセージ ボックスの使用
警告、確認、および入力のメッセージ ボックスを使用する
警告メッセージ ボックス、確認メッセージ ボックス、および入力メッセージ ボックスは、ユーザーからの入力を受け取るためのボックスです。これらのボックスを表示するには、インターフェイスとなる window オブジェクトのメソッドを使用します。
window オブジェクトはオブジェクト階層構造の最上位に位置するため、実際には、どのメッセージ ボックスを表示するにも完全な名前 ("window.alert()" など) を使用する必要はありません。とはいえ、これらのボックスがどのオブジェクトに属するのかを覚えておくために完全な名前を使用することをお勧めします。
警告メッセージ ボックス
警告メッセージ ボックスを表示する alert メソッドの引数は、 1 つです。この引数には、ユーザーに対して表示するテキスト文字列を指定します。指定する文字列は、HTML ではありません。メッセージ ボックスには [OK] ボタンが表示され、ユーザーがそれをクリックするとボックスが閉じます。このボックスはモーダルなので、ユーザーは、作業を続行するには必ずメッセージ ボックスを閉じる必要があります。
<![CDATA[
window.alert("ようこそ！作業の続行は [OK] をクリックします。");
]]>
確認メッセージ ボックス
確認メッセージ ボックスでは、ユーザーに "Yes" か "No" で答える質問をすることができます。ボックスには、[OK] ボタンと [キャンセル] ボタンが表示され、ユーザーはそのどちらかをクリックできます。それに応じて、confirm メソッドから真 (true) または偽 (false) が返されます。
このメッセージ ボックスもモーダルなので、ユーザーは、作業を先に進めるためにはメッセージ ボックスに応答して (つまりボタンをクリックして) ボックスを閉じる必要があります。
<![CDATA[
var truthBeTold = window.confirm("
作業の続行は [OK]、中止は [キャンセル] をクリックします。");
if (truthBeTold) {
window.alert("私たちの Web ページへようこそ！");
}
else
window.alert("またのお越しをお待ちしています！");
]]>
入力メッセージ ボックス
入力メッセージ ボックスには、ユーザーが入力要求に応答してテキストを入力するためのテキスト フィールドが表示されます。また、[OK] ボタンと [キャンセル] ボタンも表示されます。このメソッドに 2 番目の引数 (文字列) を渡すと、その文字列がデフォルトとしてテキスト フィールドに表示されます。2 番目の引数 (文字列) を渡さなかった場合、デフォルトのテキストは "" となります。
alert() メソッドや confirm() メソッドと同様、prompt() メソッドにより表示されるメッセージ ボックスもモーダル型です。ユーザーは、作業を続行するにはボックスを閉じなければなりません。
<![CDATA[
var theResponse = window.prompt("登録","ここに名前を入力してください。");
var yetAnotherExpression = "6 * (9 % 7)";
total = eval(yetAnotherExpression)
// 変数 total に 12 の値が代入されます。
var totality = eval("大量の貝...");
// エラーが発生します。
]]>
独自の関数の作成
JavaScript では、独自の関数を作成し、必要に応じて使用することができます。関数を定義するには、1 つの関数ステートメントと、一連の JavaScript ステートメントによるブロックを記述します。
次のコード例では、checkTriplet 関数は引数として三角形の 3 つの辺の長さを指定します。指定した数値がピタゴラスの三平方の定理を満たしているかどうかを調べることにより、その三角形が直角三角形かどうかを評価します (直角三角形の斜辺の長さの 2 乗は、ほかの 2 つの辺の長さの 2 乗の和に等しくなります)。checkTriplet 関数は、直角三角形かどうかを評価するときに、ほかの 2 つの関数のいずれかを呼び出します。
浮動小数点数版の評価では、評価変数として非常に小さい数値 ("epsilon") を使用している点に注目してください。浮動小数点数の計算では、丸め誤差によって正しい結果が得られない場合があります。したがって、指定された 3 つの数値のいずれかが整数ではない場合には、斜辺の 2 乗と他の 2 つの辺の 2 乗の和を直接比較しても正しい結果が得られない可能性があります。ただし、直接比較した方がより正確に直角三角形であることを確認できるため、この例のコードでは、まず直接比較することが適切かどうかを調べ、適切であれば直接比較する方法を使用しています。
<![CDATA[
var epsilon = 0.0000000000001;
// 浮動小数点数の計算に使用する非常に小さい数値です。
var triplet = false;
function integerCheck(a, b, c) {
// 整数用の評価関数です。
if ((a*a) == ((b*b) + (c*c))) {
// 評価部分です。
triplet = true;
}
}
// 整数用の評価関数終わり。
function floatCheck(a, b, c) {
// 浮動小数点数用の評価関数です。
var theCheck = ((a*a) - ((b*b) + (c*c)))
// 評価する値を作成します。
if (theCheck < 0) {
// 評価する値は絶対値でなくてはならないため、
// theCheck が負の場合は符号を反転させます。
theCheck *= -1;
}
if (epsilon > theCheck) {
// 値が十分小さければ、ほぼ直角三角形であるといえます。
triplet = true;
}
}
// 浮動小数点数用の評価関数終わり。
function checkTriplet(a, b, c) {
// 三角形チェック関数。まず、最も長い辺を "a"
// にします。
var d = 0;
// 一時的に数値を格納する変数を作成します。
if (c > b) {
// c > b の場合は、b と c を入れ替えます。
d = c;
c = b;
b = d;
}
// c > b でない場合は、無視します。
if (b > a) {
// b > a の場合は、a と b を入れ替えます。
d = b;
b = a;
a = d;
}
// b > a でない場合は、無視します。
// これで、辺 "a" が 1 番長い辺 (直角三角形の場合なら
// 斜辺) になりました。
if (((a%1) == 0) && ((b%1) == 0) && ((c%1) == 0)) {
// 3 つの数値すべてが整数であるかどうかを調べます。
integerCheck(a, b, c);
// 3 つとも整数であれば、正確な評価を行います。
}
else
floatCheck(a, b, c);
// 浮動小数点数がある場合は、適切な範囲内で可能な限り正確な評価を行います。
} // 三角形チェック関数の終わり。
// 次の 3 つのステートメントでは、関数をテストするため
// に単純な値を変数に代入します。
var sideA = 5;
var sideB = 5;
var sideC = Math.sqrt(50);
checkTriplet(sideA, sideB, sideC);
// 関数を呼び出します。呼び出した後は、変数 triplet に
// 結果が入っています。
]]>
//////////////////////////////////////
- 上級者向け Super Sumple集!
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
msg = new Array("Practicing with your typing can greatly help your overall computer skills.",
"A new computer is sold in the US every hour!",
"When do birds migrate from North to South?",
"Perplexing phrases, like this one, are tougher to type.")
word = 10
function m() {
msg = new Array("Practicing with your typing can greatly help your overall computer skills.",
"A new computer is sold in the US every hour!",
"When do birds migrate from North to South?",
"Perplexing phrases, like this one, are tough to type.")
word = 10
}
function e() {
msg = new Array("If you can correctly, and quickly, type this perplexing sentence, you are one superb typist!",
"You are one superb typist if you can correctly, and quickly, type this long phrase.",
"I believe you're a good typist, so I believe you will correctly copy this statement!",
"Because this is not a fairly simple phrase, could you swiftly, and precisely, copy it?")
word = 15
}
function s() {
msg = new Array("Computers are the medium of the future.",
"Can you type this phrase rather quickly?",
"Who is the President of the US?",
"I believe that you can type well!")
word = 7
}
function beginIt() {
randNum = Math.floor((Math.random() * 10)) % 4
msgType = msg[randNum]
day = new Date();
startType = day.getTime();
document.theForm.given.value = msgType
document.theForm.typed.focus();
document.theForm.typed.select();
}
function cheat() {
alert("You can not change that!");
document.theForm.typed.focus();
}
function stopIt() {
dayTwo = new Date();
endType = dayTwo.getTime();
totalTime = ((endType - startType) / 1000)
spd = Math.round((word/totalTime) * 60)
if (document.theForm.typed.value == document.theForm.given.value) {
alert("\nYou typed a " + word + " word sentence in "
+ totalTime + " seconds, a speed of about " + spd + " words per minute!")
}
else {
alert("You made an error, but typed at a speed of " + spd + " words per minute.")
}
}
// End -->
</SCRIPT>
]]>
////////////////////////////////
<![CDATA[
<FORM>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<SELECT Size=5 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="blue">blue
<OPTION VALUE="aquamarine">aquamarine
<OPTION VALUE="chocolate">chocolate
<OPTION VALUE="darkred">dark red
<OPTION VALUE="gold">gold
<OPTION VALUE="red">red
<OPTION VALUE="yellow">yellow
<OPTION VALUE="hotpink">hotpink
<OPTION VALUE="lime">lime
<OPTION VALUE="darkkhaki">dark khaki
<OPTION VALUE="cadetblue ">cadet blue
<OPTION VALUE="darkgoldenrod">dark goldenrod
<OPTION VALUE="darkslateblue">dark slate
<OPTION VALUE="blue">blue
<OPTION VALUE="deeppink">deep pink
<OPTION VALUE="darksalmon">dark salmon
<OPTION VALUE="salmon">salmon
<OPTION VALUE="tan">tan
<OPTION VALUE="wheat">wheat
<OPTION VALUE="tomato">tomato
<OPTION VALUE="springgreen">springgreen
<OPTION VALUE="turquoise">turquoise
<OPTION VALUE="white" SELECTED>White
</SELECT>
</FORM>
]]>
//////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function backcolor(form) {
temp = ""
for (var i = 0; i < 16; i++) {
temp = form.color[i].value
if (form.color[i].checked){ document.bgColor = temp }
}
}
function randombackground() {
document.bgColor = getColor()
}
function getColor(){
currentdate = new Date()
backgroundcolor = currentdate.getSeconds()
if (backgroundcolor > 44)
backgroundcolor = backgroundcolor - 45
else if (backgroundcolor > 29)
backgroundcolor = backgroundcolor - 30
else if (backgroundcolor > 15)
backgroundcolor = backgroundcolor - 16
if (backgroundcolor == 0 )
return "olive";
else if (backgroundcolor == 1 )
return "teal";
else if (backgroundcolor == 2 )
return "red";
else if (backgroundcolor == 3 )
return "blue";
else if (backgroundcolor == 4 )
return "maroon";
else if (backgroundcolor == 5 )
return "navy";
else if (backgroundcolor == 6 )
return "lime";
else if (backgroundcolor == 7 )
return "fuschia";
else if (backgroundcolor == 8 )
return "green";
else if (backgroundcolor == 9 )
return "purple";
else if (backgroundcolor == 10 )
return "gray";
else if (backgroundcolor == 11 )
return "yellow";
else if (backgroundcolor == 12 )
return "aqua";
else if (backgroundcolor == 13 )
return "black";
else if (backgroundcolor == 14 )
return "white";
else if (backgroundcolor == 15 )
return "silver";
}
// End -->
</SCRIPT>
]]>
///////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function test(form) {
if (form.text.value == "")
alert("What\'s your favorite color?")
else {
document.bgColor=(""+form.text.value+"");
}
}
// End -->
</SCRIPT>
]]>
/////////////////////////////////////////////////////////////
<![CDATA[
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Click here to be alerted"
onClick='alert("There. You have been alerted.")'>
</FORM>
</CENTER>
]]>
/////////////////////////////////////////////////////////////
Mouse Over Here!
<![CDATA[
<CENTER>
<a href="" onMouseover="alert('Why are you putting your cursor here?');
alert('I did not say you could!');
alert('I think you should e-mail me and say your sorry!');
alert('Yeah you better do it before i get mad!!!');
document.bgColor='Green';
document.fgColor='White';
window.open('mailto:suzuki@kg-group.com?subject=Hello JOKER HOE')">Mouse Over Here!</a>
</CENTER>
]]>
/////////////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function openZero() {
zero=open("","zero","height=175,width=175,status=no,toolbar=no,directories=no,menubar=no,location=no,resizable=no,left=0,top=0");
zero.document.write("<html><title>Windows!</title>"
+ "<body bgcolor='white' onblur=window.close()>"
+ "<table height=100% width=100% border=0>"
+ "<tr><td align=center valign=center width=100%>"
+ "<img src=http://javascript.internet.com/img/tjsbutton.gif "
+ "alt='javascriptsource.com' align=center valign=center><P>"
+ "<b><a href='javascript:window.close()'>This window is:<br>"
+ "0 pixels from left<br>0 pixels from "
+ " top</a>.</b></td></tr>"
+ "</table></body></html><p>");
}
function openHundred() {
one=open("","one","height=175,width=175,status=no,toolbar=no,directories=no,menubar=no,location=no,resizable=no,left=100,top=100");
one.document.write("<html><title>Windows!</title>"
+ "<body bgcolor='white' onblur=window.close()>"
+ "<table height=100% width=100% border=0>"
+ "<tr><td align=center valign=center width=100%>"
+ "<img src=http://javascript.internet.com/img/tjsbutton.gif "
+ "alt='javascriptsource.com' align=center valign=center><P>"
+ "<b><a href='javascript:window.close()'>This window is:<br>"
+ "100 pixels from left<br>100 pixels from "
+ " top</a>.</b></td></tr>"
+ "</table></body></html><p>");
}
function openTwohundred() {
two=open("","two","height=175,width=175,status=no,toolbar=no,directories=no,menubar=no,location=no,resizable=no,left=200,top=200");
two.document.write("<html><title>Windows!</title>"
+ "<body bgcolor='white' onblur=window.close()>"
+ "<table height=100% width=100% border=0>"
+ "<tr><td align=center valign=center width=100%>"
+ "<img src=http://javascript.internet.com/img/tjsbutton.gif "
+ "alt='javascriptsource.com' align=center valign=center><P>"
+ "<b><a href='javascript:window.close()'>This window is:<br>"
+ "200 pixels from left<br>200 pixels from "
+ " top</a>.</b></td></tr>"
+ "</table></body></html><p>");
}
function openThreehundred() {
three=open("","three","height=175,width=175,status=no,toolbar=no,directories=no,menubar=no,location=no,resizable=no,left=300,top=300");
three.document.write("<html><title>Windows!</title>"
+ "<body bgcolor='white' onblur=window.close()>"
+ "<table height=100% width=100% border=0>"
+ "<tr><td align=center valign=center width=100%>"
+ "<img src=http://javascript.internet.com/img/tjsbutton.gif "
+ "alt='javascriptsource.com' align=center valign=center><P>"
+ "<b><a href='javascript:window.close()'>This window is:<br>"
+ "300 pixels from left<br>300 pixels from "
+ " top</a>.</b></td></tr>"
+ "</table></body></html><p>");
}
// End -->
</script>
]]>
///////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function regular() {
window.open('window-sizer.html','640x480','toolbar=yes,status=yes,scrollbars=yes,location=yes,menubar=yes,directories=yes,width=640,height=480')}
function large() {
window.open('window-sizer.html','800x600','toolbar=yes,status=yes,scrollbars=yes,location=yes,menubar=yes,directories=yes,width=800,height=600')}
// End -->
</SCRIPT>
<XMP>
<CENTER>
<FORM>
Open a window 640 x 480 pixels:
<INPUT TYPE=BUTTON VALUE="640x480" onClick="regular()">
<P>
Open a window 800 x 600 pixels:
<INPUT TYPE=BUTTON VALUE="800x600" onClick="large()"><P>
</FORM>
</CENTER>
/////////////////////////////////////////////////////////
<CENTER>
<FORM name="Keypad" action="">
<TABLE>
<B>
<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</TD>
<TD
</TD>
<TD>
<input name="btnClear" type="Button" value=" C " onclick="Clear()">
</TD>
<TD><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()">
</TD>
</TR>
<TR>
<TD>
<input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)">
</TD>
<TD>
<input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)">
</TD>
<TD>
<input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)">
</TD>
<TD>
</TD>
<TD>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</TD>
<TD>
<input name="btnPercent" type="Button" value=" % " onclick="Percent()">
</TD>
</TR>
<TR>
<TD>
<input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)">
</TD>
<TD>
<input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)">
</TD>
<TD>
<input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')">
</TD>
<TD align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')">
</TD>
</TR>
<TR>
<TD>
<input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)">
</TD>
<TD>
<input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)">
</TD>
<TD>
<input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')">
</TD>
<TD align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')">
</TD>
</TR>
<TR>
<TD>
<input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)">
</TD>
<TD>
<input name="btnDecimal" type="Button" value=" . " onclick="Decimal()">
</TD>
<TD colspan=3>
</TD>
<TD>
<input name="btnEquals" type="Button" value=" = " onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</SCRIPT>
<XMP>
<CENTER>
<FORM name="Keypad" action="">
<TABLE>
<B>
<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<TR>
<TD colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</TD>
<TD
</TD>
<TD>
<input name="btnClear" type="Button" value=" C " onclick="Clear()">
</TD>
<TD><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()">
</TD>
</TR>
<TR>
<TD>
<input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)">
</TD>
<TD>
<input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)">
</TD>
<TD>
<input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)">
</TD>
<TD>
</TD>
<TD>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</TD>
<TD>
<input name="btnPercent" type="Button" value=" % " onclick="Percent()">
</TD>
</TR>
<TR>
<TD>
<input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)">
</TD>
<TD>
<input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)">
</TD>
<TD>
<input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')">
</TD>
<TD align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')">
</TD>
</TR>
<TR>
<TD>
<input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)">
</TD>
<TD>
<input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)">
</TD>
<TD>
<input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)">
</TD>
<TD>
</TD>
<TD align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')">
</TD>
<TD align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')">
</TD>
</TR>
<TR>
<TD>
<input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)">
</TD>
<TD>
<input name="btnDecimal" type="Button" value=" . " onclick="Decimal()">
</TD>
<TD colspan=3>
</TD>
<TD>
<input name="btnEquals" type="Button" value=" = " onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value = Num;
FlagNewNum = false;
}
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
}
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
PendingOp = Op;
}
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
}
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
}
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</SCRIPT>
]]>
//////////////////////////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function MakeArray(n) {
this.length = n;
for (var i = 1; i <= n; i++) {
this[i] = 0 }
return this
}
speedVar = new MakeArray(11);
speedVar[1] = "1.1719"
speedVar[2] = "1.7578"
speedVar[3] = "3.5156"
speedVar[4] = "6.8359"
speedVar[5] = "7.8125"
speedVar[6] = "16.6250"
speedVar[7] = "187.9883"
speedVar[8] = "1220.7031"
speedVar[9] = "3295.8984"
speedVar[10] = "5493.1641"
speedVar[11] = "18920.8984"
function compute(form, mult){
for (i=1; i < 12; i++){
if (form.size.value==null||form.size.value.length==0){
form.size.value=0;}
if (form[i+"hour"].value==null||form[i+"hour"].value.length==0){
form[i+"hour"].value=0;}
if (form[i+"minute"].value==null||form[i+"minute"].value.length==0){
form[i+"minute"].value=0;}
if (form[i+"second"].value==null||form[i+"second"].value.length==0){
form[i+"second"].value=0;}
if (mult != 0 && form.size.value != 0){
with (Math){
var speed = speedVar[i];
var TotalTime = ((form.size.value*mult)/speed);
var TotalHours = floor((TotalTime/3600));
var TotalHoursMod = (TotalTime%3600);
var TotalMin = floor(TotalHoursMod/60);
var TotalMinMod = (TotalHoursMod%60);
var TotalSec = floor(TotalMinMod);
form[i+"hour"].value=TotalHours;
form[i+"minute"].value=TotalMin;
form[i+"second"].value=TotalSec;
}
}
}
return;
}
// End -->
</SCRIPT>
<FORM METHOD="POST">
<CENTER>
<TABLE BORDER="4">
<TR>
<TD>File Size?
<INPUT TYPE="TEXT" NAME="size" SIZE="10">
<INPUT TYPE="BUTTON" OnClick="compute(this.form, 1)" VALUE="KB">
<INPUT TYPE="BUTTON" OnClick="compute(this.form, 1024)" VALUE="MB">
</TD>
<TD colspan=3><center><B>It will take you ....</B></CENTER>
</TD>
</TR>
<TR>
<TH>If your modem is a ....</TH>
<TH>Hours </TH>
<TH>Minutes </TH>
<TH>Seconds</TH>
</TR>
<TR>
<TD BGCOLOR="Black">9.6 Kb</TD>
<TD><INPUT TYPE="TEXT" NAME="1hour" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="1minute" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="1second" SIZE="6"></TD>
</TR>
<TR>
<TD BGCOLOR="#Black">14.4 Kb</TD>
<TD><INPUT TYPE="TEXT" NAME="2hour" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="2minute" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="2second" SIZE="6"></TD>
</TR>
<TR>
<TD BGCOLOR="Black">28.8 Kb</TD>
<TD><INPUT TYPE="TEXT" NAME="3hour" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="3minute" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="3second" SIZE="6"></TD>
</TR>
<TR>
<TD BGCOLOR="Black">56 Kb</TD>
<TD><INPUT TYPE="TEXT" NAME="4hour" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="4minute" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="4second" SIZE="6"></TD>
</TR>
<TR>
<TD BGCOLOR="Black">ISDN (64 Kb)</TD>
<TD><INPUT TYPE="TEXT" NAME="5hour" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="5minute" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="5second" SIZE="6"></TD>
</TR>
<TR>
<TD BGCOLOR="Black">ISDN (128 Kb)</TD>
<TD><INPUT TYPE="TEXT" NAME="6hour" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="6minute" SIZE="6"> </TD>
<TD><INPUT TYPE="TEXT" NAME="6second" SIZE="6"></TD>
</TR>
<TR>
<TD BGCOLOR="Black"></TD>
<TD><INPUT TYPE="HIDDEN" NAME="7hour" SIZE="6"> </TD>
<TD><INPUT TYPE="HIDDEN" NAME="7minute" SIZE="6"> </TD>
<TD><INPUT TYPE="HIDDEN" NAME="7second" SIZE="6"></TD>
</TR>
<INPUT TYPE="HIDDEN" NAME="8hour" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="8minute" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="8second" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="9hour" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="9minute" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="9second" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="10hour" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="10minute" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="10second" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="11hour" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="11minute" SIZE="6">
<INPUT TYPE="HIDDEN" NAME="11second" SIZE="6">
</TABLE>
</FORM>
</CENTER>
]]>
///////////////////////////////////////////////////////////////////////
JavaScript Quarterly Calendar
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var flg=0;
var fs=1;
var bg="black";
M=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
D=new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
function getBgn(){
pdy=new Date();
pmo=pdy.getMonth();
pyr=pdy.getYear();
yr=(pmo==0?pyr-1:pyr);
mo=(pmo==0?11:pmo-1);
yr1="19"+yr;
bgn=new Date(M[mo]+" 1,"+yr1);
document.write('<TABLE BORDER=0><TR><TD VALIGN=TOP>');
Calendar();
document.write('</TD><TD VALIGN=TOP>');
yr=pyr;
mo=pmo;
yr1="19"+yr;
bgn=new Date(M[mo]+" 1,"+yr1);
Calendar();
document.write('</TD><TD VALIGN=TOP>');
yr=(pmo==11?pyr+1:pyr);
mo=(pmo==11?0:pmo+1);
yr1="19"+yr;
bgn=new Date(M[mo]+" 1,"+yr1);
Calendar();
document.write('</TD></TR></TABLE>');
}
function Calendar(){
dy=bgn.getDay();
yr=eval(yr1);
d="312831303130313130313031";
if (yr/4==Math.floor(yr/4)){
d=d.substring(0,2)+"29"
+d.substring(4,d.length);
}
pos=(mo*2);
ld=eval(d.substring(pos,pos+2));
document.write("<TABLE BORDER=1"
+" BGCOLOR='"+bg
+"'><TR><TD ALIGN=CENTER COLSPAN=7>"
+"<FONT SIZE="+fs+">"+M[mo]+" "+yr
+"</FONT></TD></TR><TR><TR>");
for (var i=0;i<7;i++){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE=1>"+D[i]+"</FONT></TD>");
}
document.write("</TR><TR>");
ctr=0;
for (var i=0;i<7;i++){
if (i<dy){
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">ﾝ</FONT>"
+"</TD>");
}
else{
ctr++;
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">"+ctr+"</FONT>"
+"</TD>");
}
}
document.write("</TR><TR>");
while (ctr<ld){
for (var i=0;i<7;i++){
ctr++;
if (ctr>ld){
document.write("<TD ALIGN=CENTER>"
+"ﾝ</TD>");
}
else{
document.write("<TD ALIGN=CENTER>"
+"<FONT SIZE="+fs+">"+ctr+"</FONT>"
+"</TD>");
}
}
document.write("</TR><TR>");
}
document.write("</TR></TABLE>");
}
// End -->
</SCRIPT>
<CENTER>
<P><B>JavaScript Quarterly Calendar</B>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
getBgn();
// End -->
</SCRIPT>
</CENTER>
]]>
//////////////////////////////////////////////////////////////////////
Please choose from the following selections to customize your window
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function customize(form) {
var address = document.form1.url.value;
var op_tool = (document.form1.tool.checked== true) ? 1 : 0;
var op_loc_box = (document.form1.loc_box.checked == true) ? 1 : 0;
var op_dir = (document.form1.dir.checked == true) ? 1 : 0;
var op_stat = (document.form1.stat.checked == true) ? 1 : 0;
var op_menu = (document.form1.menu.checked == true) ? 1 : 0;
var op_scroll = (document.form1.scroll.checked == true) ? 1 : 0;
var op_resize = (document.form1.resize.checked == true) ? 1 : 0;
var op_wid = document.form1.wid.value;
var op_heigh = document.form1.heigh.value;
var option = "toolbar="+ op_tool +",location="+ op_loc_box +",directories="
+ op_dir +",status="+ op_stat +",menubar="+ op_menu +",scrollbars="
+ op_scroll +",resizable=" + op_resize +",width=" + op_wid +",height="+ op_heigh;
var win3 = window.open("", "what_I_want", option);
var win4 = window.open(address, "what_I_want");
}
function clear(form) {
document.form1.wid.value="";
document.form1.heigh.value="";
}
// End -->
</SCRIPT>
<CENTER>
<h4>Please choose from the following selections to customize your window</h4>
<br>
<TABLE cellpadding=5 border><TR><TD><PRE>
<FORM name=form1 ACTION="javascript:" METHOD="POST">
<INPUT TYPE="text" NAME="url" value="http://www.kg-group.com" >: URL
<INPUT TYPE="checkbox" NAME="tool">: Toolbar
<INPUT TYPE="checkbox" NAME="loc_box">: Location
<INPUT TYPE="checkbox" NAME="dir">: Directories
<INPUT TYPE="checkbox" NAME="stat">: Status
<INPUT TYPE="checkbox" NAME="menu">: Menubar
<INPUT TYPE="checkbox" NAME="scroll">: Scrollbars
<INPUT TYPE="checkbox" NAME="resize">: Resizable
<INPUT TYPE="text" NAME="wid" value= >: Width
<INPUT TYPE="text" NAME="heigh" value=>: Height
<BR><CENTER>
<INPUT TYPE="button" VALUE="=ENTER=" OnClick="customize(this.form)">
<INPUT TYPE="reset" VALUE="=RESET=" onClick="clear(this.form)">
</PRE></TD></TR></TABLE>
</FORM>
</CENTER>
]]>
//////////////////////////////////////////////////////////////////////////
<![CDATA[
<SCRIPT language="JavaScript">
<!-- Begin
function move_in(img_name,img_src) {
document[img_name].src=img_src;
}
function move_out(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
]]>
/////////////////////////////////////////////////////////////////////////
<![CDATA[
<SCRIPT language="JavaScript">
<!-- Begin
function display_image(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=200,height=255");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +
selectionname + "</FONT></B><HR>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 HEIGHT=150 WIDTH=150 " +
"SRC='" + selection + "'>");
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
// End -->
</SCRIPT>
]]>
////////////////////////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function buildMenu() {
speed=35;
topdistance=100;
items=6;
y=-50;
ob=1;
if (navigator.appName == "Netscape") {
v=".top=",dS="document.",sD="";
}
else {
v=".pixelTop=",dS="",sD=".style";
}
}
function scrollItems() {
if (ob<items+1) {
objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y);
if (y<topdistance) setTimeout("scrollItems()",speed);
else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed);
}
}
// End -->
</SCRIPT>
]]>
一番上のページへスクロールして下さい。
メニューがトップページからスクロールダウンしています。(^^
後はみなさんのアイディア次第ですね （Suzuki談）
////////////////////////////////////////////////////////////////////
<![CDATA[
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function scrollit() {
for (I=1; I<=750; I++){
parent.scroll(1,I)
}
}
// End -->
</SCRIPT>
]]>
//////////////////////////////////////////////////////////////////////
==============================================================================
インターネットスタートページ 鈴木維一郎 石橋三重子
|
|
|
|
|
| |
 |
|
|
|
| |
|
|
| |
|
|
|
|
|
|
|
|
|
