屋内から：高年パソコン教室    

JavaScript 入門

JavaScript　レファレンス
　次項の　HTML＆JavaScript 例　は、ホームページで実行してみた或いは実行を計画した JavaScript 例である。これらを試みるに当たって、Script　を納得するために調べた事柄を抜き書きした。

（１）オブジェクト、プロパティ、メソッド

	文書オブジェクト、イメージオブジェクト、フォームオブジェクト、
		document
		document.image[ ]
		document.form
	ウインドウオブジェクト
		window
	イベントオブジェクト
		event
			プロパティ　：clientX　clientY　srcElement
	タイマー設定
		setInterval( )
		setTimeout( )

（２）ビルトインオブジェクト

	日付オブジェクト、文字列オブジェクト、画像オブジェクト、配列オブジェクト、
		Date( )
		String( )　：文字列オブジェクト
			メソッド　：charAt　slice　split　substr　substring
		Image( )
		Array( )

（３）DOMのオブジェクト

	all コレクション（全タグ集合）からオブジェクト取得
		document.all[ ]
	Id コレクション（全Ｉｄ集合）からオブジェクト取得
		document.getElementById[ ]
	Ｉｄ　名でオブジェクト取得（ＨＴＭＬタグを Ｉｄ でオブジェクトに設定）
		idName.###
	文書オブジェクト　書き出し：document.write()でHTMLタグ操作を行う
		document.write()

（４）イベントハンドラー

	ページ読み込み完了
		onLoad
	マウスイベント、
		onClick
		onMouseOut
		onMouseOver
		onMouseMove

（５）命令文

	条件分岐、選択処理、繰り返し処理、オブジェクト、関数
		if else
		? :
		for
		while
		do while
	変数、定数
		var
		const
	オブジェクト参照 　　オブジェクトに関する　new：オブジェクトの生成　this：オブジェクトの参照　がわかりにくい。 　this は、命令といわれるものの、あるオブジェクトそのものを指し示している。
		new
		this
	関数
		function
		return

（６）演算

	加減乗除、インクリメント、条件演算、論理演算
		＋, -、=
		*,/
		++,--
		==、!=
		==、!=
		!, ||

（７）変換

	式評価
		eval        ：数式から変換（式評価）・・・文字列の式の評価をして書き出す。
		toString

−−−−−−−−−−−−−−−−−−
（１）オブジェクト、プロパティ、メソッド            

オブジェクト	オブジェクト プロパティ メソッド	説明
文書オブジェクト document 書式 オブジェクト．プロパティ＝”値” document.###="cValue" 　　###：プロパティ＝例　bgColor 　　cValue：値＝red など色の名前、値。 　　オブジェクトのプロパティ に値を入れる オブジェクト．メソッド（値） document.###(Str1,Str2.Str3,) 　　###：メソッド＝例 write()など。 　  Str1,Str2,・・：値＝例 "文字列"、式の値 　　オブジェクトがメソッドを実行する（値を書く） 例 document.fgColor="blue" document.write("青色です。") document.write("1+2=",1+2)	オブジェクト images[ ] area applet(s) form(s) /	・ ・イメージオブジェクトの配列（下記） ・エリアオブジェクト ・アプレット配列 ・フォームオブジェクトおよび配列
	プロパティ bgColor fgColor alinkColor linkColor vlinkColor / lastModified	・ ・背景色 ・前景色＝文字色 ・リンク中の文字色 ・リンク文字色 ・リンク済み文字色 ・ ・文書が変更された日付を返す。
	メソッド write() writeln() /	・ ・書き出す ・書き出す（改行付き） 例：HTML＆JavaScript例[011]
イメージオブジェクト（文書オブジェクト） document.images[ ] 書式 イメージオブジェクト．プロパティ＝”値” document.images[0].###="img1" 　###：プロパティ＝例　src 　img1：値＝”イメージのＵＲＬ ex .image1.gif” 　イメージオブジェクトは、ページ上の画像、すなわち （<IMG SRC=## >,<IMG SRC=### >,<IMG SRC=#### >・・・）について、 ページ上に現れた順に、要素の番号が[0]から始まる配列を作成する。 （images[0].images[1].・・・） 　images[0]は、ページの上で最初の<IMG SRC= >	プロパティ src length height width	・ ・画像ファイルのＵＲＬ（所在地） ・画像の数 ・画像の高さ ・画像の幅 例：HTML＆JavaScript例[032]
フォームオブジェクト（文書オブジェクト） document.form	・	・
ウインドウオブジェクト window （wdwNameという名前の）新しいウインドウを開く 書式 オブジェクト＝オブジェクト．メソッド（ ） wdwName=window.open() （wdwNameという名前の）ウインドウを閉じる wdwName.close	プロパティ outerWidth	・ ・ウインドウの幅
	メソッド open close	・ ・ウインドウを開く ・ウインドウを閉じる 例：HTML＆JavaScript例[061]

オブジェクト	オブジェクト プロパティ メソッド	説明
イベントオブジェクト event マウスやキーの状態を保持するオブジェクト 書式 値＝オブジェクト．プロパティ x=event.### 　x：値 　###：プロパティ 例　clientX x=event.clientX	プロパティ clientX clientY	・ ・イベント発生時のｘ座標 ・イベント発生時のｙ座標 ・ 例：HTML＆JavaScript例[071]
	プロパティ srcElement	・イベント発生時のオブジェクト
.	.	.

　タイマーの設定および解除を行う。windowオブジェクト、frameオブジェクトに設定できる。

オブジェクト	オブジェクト プロパティ メソッド	説明
ウインドウオブジェクト (window・)setInterval("funcName",iTime) 　タイマーを設定し、関数（funcName）を一定時間毎（iTime ミリ秒単位）に呼び出す。 書式 タイマー変数＝（オブジェクト．）メソッド（ ） timerID=setInterval("funcName",iTime) 　timerID：タイマー変数＝省略可 　funcName：:関数名 　iTime:：時間　mmSec	メソッド setInterval( )	・ ・タイマーを設定し、実行する。 　上位オブジェクトは、window 。必ずしも記述はされない。 例：HTML＆JavaScript例[055]
ウインドウオブジェクト (window・)setTimeout("funcName",iTime) 　タイマーを設定し、関数（funcName）を一定時間後（iTime ミリ秒単位）に１回呼び出す。 書式 タイマー変数＝（オブジェクト．）メソッド（ ） timerID=setTimeout("funcName",iTime) 　timerID：タイマー変数＝省略可 　funcName:：関数名 　iTime:：時間　mmSec	メソッド setTimeout( )	・ ・タイマーを設定し、実行する。 　上位オブジェクトは、window 。必ずしも記述はされない。 例：HTML＆JavaScript例[056] 例：HTML＆JavaScript例[071]

−−−−−−−−−−−−
（２）ビルトインオブジェクト          
　ブラウザー自身が本来持っているオブジェクトのほかに、JavaScript が、独自にブラウザーに組み込んでいるオブジェクト。
　new演算子（命令）でインスタンス（具体的なオブジェクトの例）を作成して使用する。

オブジェクト	オブジェクト プロパティ メソッド	説明
日付(Date)オブジェクト 書式 　new　で、オブジェクトを作って使用。 objName＝new Date() objName：オブジェクト （日付に関する） ()内引数：なし＝現在時 　　　　："March 3,2003"＝設定日時 　　　　：document.LastModified＝ 　　　　　図書更新日 例 date=new Date(document.lastmodified) year=date.getYear()	メソッド getYear() getDate() getMonth() getHours() getMinutes() getSeconds / getDay()	・ ・年を返す。（１９００年代は 下２桁の年号だった。 今２００３年は、103 を返す。） ・日を返す。（１〜３１） ・月を返す。（０〜１１） ・時を返す。（０〜２３） ・分を返す。（０〜５９） ・秒を返す。（０〜５９） ・ ・曜日を返す。（０〜６） 　例：HTML＆JavaScript例[012]
文字列（string)オブジェクト 書式 　new　で、オブジェクトを作って使用。 strObj＝new String() 生成オブジェクト strObj：文字列オブジェクト  string（　）を文字列を扱うオブジェクトを作成する特に使用（文字列として明示的に変数を定義する時に使用）  strObj=new string("事例" ) 　　事例（文字列）をstrObj　に収納  strObj=new string( 12345) 　　数値12345を文字列として、strObj　に収納 　−−−−−−−−−−−−− 生成文字列オブジェクトの書式と例 strObj strObj　書式 オブジェクト．メソッド（値） strObj.###( ,) 　strObj：文字列オブジェクト 　###()：メソッド 例 strObj.big( ,) 　「strObj：文字列オブジェクト」を大きくする。 例　charAt strObj.charAt(point) strObj：文字列、point：0,1,-n番目文字 例　split spstr=strObj.split("") 文字列strObjを一文字ずつ分割し、配列spstr に格納する。 例 strObj.fontcolor(red,) 　fontcolor()：メソッド 　引数color：色名 　　オブジェクトがメソッドを実行する（値を書く）	プロパティ length メソッド big() small() substring(stt,ct) charAt(point)	・ ・文字の数 ・ ・ ・大きくする。 ・小さくする。 ・文字列抜き出し 　　stt：開始文字位置 　　ct：文字数 ・１文字抜き出し 　　point：文字位置（point番目） 例：HTML＆JavaScript例[056] 例：HTML＆JavaScript例[057]
	メソッド split(str,limit ) fontcolor(color)	・ ・ ・ ・ ・文字列を、指定文字で分割 　　str：分割文字、 　　　(""：文字無し＝各文字で分割） 　　limit：最大分割数 　　　（無し：無制限） 例：HTML＆JavaScript例[071] ・文字色指定　color：色名
画像（Image)オブジェクト 書式 　new　で、オブジェクトを作って使用。 imgObj＝new Image() imgObj：画像オブジェクト	プロパティ src length	・ ・画像ファイルのＵＲＬ（所在） ・画像の数 例：HTML＆JavaScript例[032]
配列（Array）オブジェクト 書式 　new　で、オブジェクトを作って使用。 　　newが無くても要素数を指定して 　　配列オブジェクトを作る。 arrayObj＝new Array() arrayObj＝Array(2) arrayObj：配列オブジェクト ()内引数：要素の数 　　　　：0〜n　番目の要素	プロパティ length / メソッド	・ ・配列要素の数 例：HTML＆JavaScript例[032] 　　HTML＆JavaScript例[042]

−−−−−−−−−−−−
（３）DOMオブジェクト

オブジェクト	オブジェクト プロパティ メソッド	説明
all コレクション からオブジェクト取得 all( )：全タグの集合からのオブジェクト取得メソッド 書式 document.all["objName" ] 　ドキュメント(document)のすべてのエレメント(all)の中の特定のオブジェクト（objName）を取得する。 １．document.all["objName" ]．###．***＝ｚ objName：オブジェクト名 ###、***：オブジェクト、プロパティ、メソッド 例　プロパティ：フィルター document.all["objName" ].filters["alpha"].opacity=n 　n：値＝0〜100の数値 ２．ｄＯｂｊ=document.all["objName" ] ｄＯｂｊ：オブジェクト 例　プロパティ：innerText,innerHTML txt=document.all["objName" ].innerText myObj=document.all["objName" ]. myObj.innerHTML 　−−−−−−−−−−−−−−−−−　 Ｉｄ コレクション からオブジェクト取得 getElementById（ )：全IDの集合からのオブジェクト取得メソッド 書式 document.getElementById["idName" ] 　ドキュメント(document)の中の全IDの中から特定の要素（idName）をオブジェクトとして取得する。 例 dObj=document.getElementById["idName" ] 　要素（idName）をdObj と定義する。 例 dObj.innerHTML="objV" 　−−−−−−−−−−−−−−−−−　 ID名でオブジェクトの取得 書式 <###　id="idName"> 　　###：タグ名 　　id：id＝識別名idName オブジェクト．プロパティ idName.*** 　　***：プロパティ: 例 <P id="idName">事例です idName.className="###" <IMG  src="***" id="imName"> imName.style.posLeft=100	メソッド filters["alpha"] フィルタプロパティ .opacity= style.color=	フィルターメソッド document.all["objName"].filters["alpha"].opacity=n 　n：値＝0〜100の数値 ・ ・透明度 ・文字色 ・ 例：HTML＆JavaScript例[055]
	プロパティ innerText innerHTML	プロパティ：innerText,innerHTML ・ innerText：指定したオブジェクトの内側に含まれるテキストを指す。 ・innerHTML：指定したオブジェクトの内側に含まれるタグを含んだ全要素 ・ 例：HTML＆JavaScript例[042] 　　HTML＆JavaScript例[056] ・ ・getElementById[+++]：ドキュメントの中のId名が、Id="+++" の要素をオブジェクトとして取得する。 例：HTML＆JavaScript例[042]
	プロパティ color background-color font-size font-style font-weight	値 色名："red","green","blue" etc RGB値：#FFFFFF,#000000, 絶対値指定 pt ：10pt etc (1pt=1/72 in) normal：通常　italic：イタリック　oblique：斜体 bold：太字 例：HTML＆JavaScript例[057]
	プロパティ style.posTop style.posLeft className	上端からの距離 左端からの距離 　##.style.Top=n 　n：数値 クラス名

文書オブジェクト	表示	備考
DHTML(DynamicHTML) あるいは DOM(DocumentObjectModel)　の操作。 スクリプト　　 document.write()
基本形 document.write(1+2); document.write("1+2=",1+2); tValue=5+"a"+"です。";document.write(tValue);	3 1+2=3 5aです。	・
ＨＴＭＬタグ操作　HTMLコードの書き出し document.write("<BR>"); mes="元の文字色";document.write('<SPAN>'+mes+'</SPAN>'); document.write('<div>'+mes+'</div>'); mes1="青い文字色"; document.write("<font color='blue'>" + mes1 + "</font>"); tVa=5+"a"+"です。";document.write(tVa);	（改行） 元の文字色 元の文字色 青い文字色 5aです。	HTMLをスクリプトで操作するもの。・ タグをクォーテーションで囲んでいることに注意。

−−−−−−−−−−−
（４）イベントハンドラー              

イベントハンドラー	書式	説明
	イベントハンドラーを記述した要素（タグ）でイベントが発生し、そこで命令（関数）が実行される。
○	書式 ＜要素名　イベントハンドラー="javascriptの命令"＞ <# :**="inst"> 　　#　 ：タグ名　例　A、B、P・・・ 　　**　：イベントハンドラー　例　onLoad・・・ 　　inst：javascriptの命令..
○	書式 オブジェクト．イベントハンドラー=javascriptの命令 # :**=inst 　　#　 ：オブジェクト名　例　document.body 　　**　：イベントハンドラー　例　onLoad・・・ 　　inst：javascriptの命令..
onLoad onload	指定要素が完全に読み込まれた時のイベント処理 例 ページが完全に読み込まれた時のイベント <BODY onLoad="inst"> <BODY onLoad="alert('ページの読み込みが完了しました')"> 画像が完全に読み込まれた時のイベント <IMG onLoad="inst">	指定要素が完全に読み込まれた時に発生し、javascriptの命令を実行する。 例：HTML＆JavaScript例[055]
onClick onclick	指定要素をクリックしたときのマウスイベント 処理 例 <P onClick="inst">	マウスボタンをクリックした時に発生する。
onMouseOut onmouseout	指定領域から離れたときのマウスイベント処理 例 <A HREF="profile.htm" onMouseOut="SetIcon(0)" onMouseOver="SetIcon(1)"> <TD onMouseout ="this.style.backgroundColor=''">	マウスポインタが指定領域から離れた時に発生する。 例：HTML＆JavaScript例[041] 　　HTML＆JavaScript例[054]
onMouseOver onmouseover	指定領域に乗ったときのマウスイベント処理 例 <A HREF="profile.htm" onMouseOut="SetIcon(0)" onMouseOver="SetIcon(1)"> <TD onMouseover="this.style.backgroundColor='ffcc00'" >	マウスポインタが指定領域に重なったときに発生する。 例：HTML＆JavaScript例[041] 　　HTML＆JavaScript例[054]
onMouseMove onmousemove	マウスが移動したときのマウスイベント処理 例 document.onmousemove=handlerMouseMove; マウスが動いたら、関数　handlerMouseMove;　を駆動する。	マウスポインタが移動したときに発生する。

−−−−−−−
（５）命令文                  

命令	書式	説明
条件分岐
if else	条件分岐 書式 if(cond)｛inst1｝;else{inst2} 　cond：条件式　例　a==0 　inst1：処理命令１　例　b=1 　inst2：処理命令２　例　b=2 例 if(a==0)b=1;else b=2	条件分岐処理を行う。 条件式を満たすと処理命令１を、満たさないと処理命令２を、行う。 例：HTML＆JavaScript例[042]
選択処理
?:	条件演算　 書式 （condition）?val1:val2 　condition：:条件式 　val1：値１ 　val2：値２ 例 status=(x>10)?"高":"低" 　変数ｘが10を超えれば（true真ならば）、変数statusに「高」、そうでなければ「低」の文字を入れる。	・条件式が真なら、val1を 　偽ならval2の値を参照する。 例：HTML＆JavaScript例[055]
繰り返し処理
for	繰り返し演算 書式 for(iniValue; cond; count;)｛inst1;inst2;;｝ 　iniValue：初期値　　例　i=0 　cond：（終了）条件式　例　i<10 　count;：増減式　i++  inst1：処理命令１　例　document.write(i,"<BR>") 、inst2：処理命令２ 例 for(i=0;i<=10;i++)document.write(i,"<BR>")	・
while	繰り返し演算 書式 while(cond)｛inst1;inst2;｝ 　cond：条件式　例　i<=10 　inst1：処理命令１　例　document.write("第"+i+"回目<BR>") 　inst2：処理命令２　例　i++ 例 var i=1 while(i<=10){document.write("第"+i+"回目<BR>");i++;}	.
do while	繰り返し演算 書式 do ｛inst1;inst2;｝ while(cond) 　cond：条件式　例　i<=10 　inst1：処理命令１　例　document.write("第"+i+"回目<BR>") 　inst2：処理命令２　例　i++ 例 var i=1 do{document.write("第"+i+"回目<BR>");i++} while(i<=10)	・
変数、定数
var	変数宣言 書式 var  varName 　varName：変数名	..
const	定数宣言 書式 const  cName=value 　cName：定数名 　value：値	..
オブジェクト
new	オブジェクト作成 書式 instance1＝new Date() 　instance1：オブジェクトの実体（具体化例）の名前 　Date()：日付オブジェクトの設計図　他にもArraay()等の設計図あり。 例 date=new Date()	新しいオブジェクトを作る。 例：HTML＆JavaScript例[012]
this	オブジェクト参照 書式 this.### 　###:プロパティ 例 <TD onMouseover="this.style.backgroundColor='ffcc00'" > 　this で、TD　を指す。	自分自身をオブジェクトであると指し示す。 例：HTML＆JavaScript例[041] 　　HTML＆JavaScript例[054]
関数
function	関数定義 書式 function fName (arg１、arg２、・・){inst１，inst２・・} 　fName：関数名 　arg1、arg2・・：引数１，引数２・・ 　inst1、inst2：処理命令１、２・・	..
return	関数から戻る 書式 return retValue 　retValue：戻り値	..

−−−−−−
（６）演算               

演算子	用法	説明
＋, -、=	例１．z=x+y　　z=x-y 例２．document.write("今日は、"+"赤ちゃん") 　　　上記の出力　「今日は、赤ちゃん」	+：加算、-：減算、=：代入
*,/	.	*：乗算、/：除算
++,--	インクリメント演算　例．y=x++ 　　　　　　　　　　例．x++ デクリメント演算　例．y=x--	・yに値を代入してから 　xに１を加える ・xが1づつ上がるカウンター 例：HTML＆JavaScript例[056] ・yに値を代入してから 　xから１を引く
==、!=	・	==：等しい　!=：等しくない
?:、	条件演算　（条件式）?（x）:（y）	・条件式が真なら、xを 　偽ならyの値を参照する。 例：HTML＆JavaScript例[055]
!, ||	論理演算　否定　例．!iniMsgVal 　　　　　　　　例．x||y	!：否定（ではない）、 　iniMsgValがない ||：論理和（または） 　xまたはy 例：HTML＆JavaScript例[042]

−−−−−−
（７）変換               

（変換子）	用法	説明
eval	数値から変換（式評価） 　文字列式を式として評価、計算しHTMLに書き出す。 書式 eval(theStr) 　theStr：演算記号を含む文字列	.・数式の評価だけではなく、HTML文書の書き出しも行う。
toString	.	..
eval　動作	eval　動作 例1 var t=eval("1"+"3"); document.write(t); 例２ var tw=eval("1+3"); document.write(tw); 例３ eval("document.write('fgh')");	eval　動作の画面表示 例１ 13 例２ 4 例３ fgh
.	例４ eval(document.all.write	.

.	.	..
.	.	..

　　　　　　　　　　　　　　　　　　　　　　　　　 　 　 (2003.7.20 rev)
　　　　　　　　　　　　　　　　　　　　　　　　　 　 　 (2003.5.28 rev)
　　　　　　　　　　　　　　　　　　　　　　　　　 　 　 (2003.4.13)