Spur 趣味から得た知識【JavaScript設置講座】

Spur 趣味から得た知識【JavaScript設置講座】　　JavaScriptの基本　

JavaScriptは２種類の書き方があります。
簡単に説明すると、HTMLファイルの中で、使いたいところで書く方法と、前もって用意しておいて、使いたいところで呼び出す方法です。
HTMLファイルの中でJavaScriptをとにかく書くと、そのHTMLファイルがブラウザに呼び出された時に実行されます。
これが前者の方法です。
ところが、例えば、「マウスを当てた時に」とか「マウスをクリックした時に」動作させたいのであれば、それでは困りますので、後者の方法を選びます。

　基本的な書き方　
JavaScriptは<SCRIPT>タグで使って書く方法と、<A>タグなどの中で、いきなり書く方法があります。

(1)<SCRIPT>タグで使って書く方法

<SCRIPT LANGUAGE="JAVASCRIPT">  </SCRIPT>

　簡単に説明すると、
　１行目：ここから</SCRIPT>までの間に書かれているのがJavaScriptであることの宣言
　２行目：JavaScriptのソースをブラウズしないように、HTMLとしてはコメントアウトする。
　３行目：実際のJavaScriptのソースコードを書くところ。
　４行目：JavaScriptの終了で、HTMLのコメントアウトも終了
　５行目：JavaScriptの終了

※注意：終了前の「HTMLのコメントアウト終了」はJavaScriptのコメントマークである「//」が必要です。さもないと、「HTMLのコメントアウト終了」である「-->」もJavaScriptの一部として理解しようとし、エラーになってしまいます。

(2)<A>タグなどの中で、いきなり書く方法

<a href="#" onclick="JavaScript:window.open('■■■.htm','○○○',')">●●●</A>

　●●●にマウスをあて、クリックした時にJavaScriptを起動して、「window.open('■■■.htm','○○○',')」を実行する。
　このような書き方でJavaScriptが起動できるのは、一部のタグを除くほとんどで可能です。

タグの中でJavaScriptを起動するには、次の種類があります。

onclick="..." マウスをクリックした時に実行

onmousedown="..." マウスのボタンをクリックした時に実行

onmousemove="..." マウスを移動した時に実行

onmouseout="..." マウスを対象から離した時に実行

onmouseover="..." マウスを対象に当てた時に実行

onmouseup="..." マウスのボタンを離した時に実行

ondblclick="..." ダブルクリックされた時に実行

onkeydown="..." キーを押して離した時に実行

onkeypress="..." キーを押した時に実行

onkeyup="..." キーを離した時に実行

onload="..." ドキュメントを読み込んだ時に実行

onunload="..." 現在開いているドキュメントから別のページに移動したりブラウザを閉じようとした時に実行

(3)オブジェクト

ブラウザの各部品や情報を扱うものを「オブジェクト」といいます。

ナビゲータオブジェクト：ブラウザ自身が持っている部品や情報を扱う。
ブラウザのバージョン、ブラウザに表示されるドキュメント・画像など

ビルトインオブジェクト： JavaScriptが独自にブラウザに組み込むオブジェクト
日付・時間を取り扱うオブジェクトや文字列操作を行うオブジェクトなど

オブジェクト名＝new　オブジェクトの型(値)
でユーザが独自にオブジェクトを作ることもできます。

(4)プロパティ

オブジェクトは多くの属性を持っており、この属性のことを「プロパティ」といいます。
プロパティもまた、オブジェクトであり、例えば「document」はそれ自体がオブジェクトでもあると同時に、「window」オブジェクトのプロパティでもある。
プロパティはオブジェクトの後に「.」で区切って設定します。
オブジェクト.プロパティ　　または　　オブジェクト.プロパティ=値

(5)メソッド

オブジェクトに対して動作を指定するものが「メソッド」です。
メソッドはオブジェクトの後に「.」で区切って設定します。
オブジェクトに値を設定するときは、「()」内に値を設定します。
オブジェクト.メソッド(値)

(6)イベントハンドラ

ユーザやスクリプトによって、特定の動作（イベント）が発生したときに実行を開始するための取得を行うものを、イベントハンドラといいます。
HTMLタグ内に次の要領で設定します。
イベントハンドラ名 = スクリプト　または　値
「(2)<A>タグなどの中で、いきなり書く方法」がそれにあたります。

(7)イベントタイプ

JavaScript1.2以降にはイベントをオブジェクトとして扱う、「event」オブジェクトが追加されました。
オブジェクトに対してイベントのタイプを設定することで、イベントの発生を取得できます。
オブジェクト.イベントタイプ = 関数名　または、スクリプト

(8)関数

一定の処理手順をまとめて名前をつけたものです。
関数名はビルトイン関数で既に名前が使われているもの以外、ユーザがある程度自由に定義することができます。
イベントハンドラでこの関数を指定しておけば、イベントが発生したときの処理としてまとめておくことができます。
function　関数名(引数,引数,・・・) { 処理 }

(9)ビルトイン関数

JavaScriptには最初から定義されている関数があり、それを「ビルトイン関数」といいます。

parseInt() 文字列を整数に変更する JavaScript1.0

parseFloat() 文字列を浮動小数点に変更する JavaScript1.0

escape() 文字列をASCII形式に変更する JavaScript1.0

unescape() ASCII形式を文字列に変更する JavaScript1.0

isNaN() 値が数値かどうか判断する JavaScript1.0

taint() データ参照を許可しないようにする JavaScript1.1

untaint() taint()漢数を無効にする JavaScript1.1

Number() オブジェクトを数に変換する JavaScript1.2

String() オブジェクトを文字列に変換する JavaScript1.2

isFinite() 有限数かどうか判断する JavaScript1.3

(10)変数・常数

変数として扱えるものは、次のものです。
文字列、数値、オブジェクト・プロパティ・メソッド、条件式などで設定する式や変数
var 変数名　=　値

(11)オブジェクト、関数、変数の名前

オブジェクト名、関数名、変数名は以下の条件でユーザが自由に定義することができます。

アルファベットまたはアンダースコア"_"で始まる文字列と数値
１byte文字に限る（日本語など２bytes文字は使用できない）
スペース、カンマ、引用符、疑問符は使用できない
アルファベットの大文字／小文字は区別される
予約語は使用できない。（予約語を途中に含むのは可）
【予約語】

abstract boolean break byte case

catch char class const continue

default delete do double elese

extends false final finally float

for function goto if implements

import in instanceof int interface

long native new null package

private protected public return short

static super switch synchronized this

throw throws transient true try

typeof var void while with

(12)演算子

算術演算子意味

y = x 変数に値を代入する。

x + a 加算

x - a 減算または負の値表す。

x * a 乗算

x / a 除算

x % a 乗除、除算で余りを求める。

x ++ , ++ x 値に1を増やす（インクリメント）

x -- , -- x 値から1を引く（デクリメント）

※インクリメント、デクリメントは演算子の位置で動作が変わる。
　y=x++　：yに代入してから1を加える
　y=++x　：xに1を加えてから代入する

比較演算子意味

x == y xとは等しい

x != y xとyは等しくない

y < x xはyより小さい

y <= x xはyより小さいか等しい

y > x xはyより大きい

y >= x xはyより大きいか等しい

論理演算子意味

x && y AND

x || y OR

x ! y NOT

代入演算子意味

y += a 左辺に右辺の値を加算した結果を左辺に代入（x=x+yと同じ）

y -= a 左辺に右辺の値を減算した結果を左辺に代入（x=x-yと同じ）

y *= a 左辺に右辺の値を乗算した結果を左辺に代入（x=x*yと同じ）

y /= a 左辺に右辺の値を除算した結果を左辺に代入（x=x/yと同じ）

y %= a 左辺に右辺の値を除算し、余りを左辺に代入（x=x%yと同じ）

文字列演算子意味

"文字列A"+"文字列B" 「文字列A」と「文字列B」を連結する

a += "文字列B" aの後に「文字列B」を追加する

ビット演算子意味

a ~ b ビットの反転

a & b ビットの論理積(AND)

a | b ビットの論理和(OR)

a ^ b ビットの排他的和(XOR)

a << b ビットの左シフト

a >> b ビットの右シフト

a >>> b ビットの論理右シフト

a <<= b ビットごとの左シフトの代入

a >>= b ビットごとの右シフトの代入

a >>>= b 論理右シフトの代入

(13)基本の整理

JavaScriptの宣言
　<SCRIPT>...</SCRIPT>
コメントアウト
　//　....　　　この１行をコメントとする
　/*　....　*/　囲まれた区間をコメントとする。複数行をコメントにする時に使用。
文の区切り
　;　　　　　　　１文の終了を意味する。
　

←前へ 次へ→

onclick="..."	マウスをクリックした時に実行
onmousedown="..."	マウスのボタンをクリックした時に実行
onmousemove="..."	マウスを移動した時に実行
onmouseout="..."	マウスを対象から離した時に実行
onmouseover="..."	マウスを対象に当てた時に実行
onmouseup="..."	マウスのボタンを離した時に実行
ondblclick="..."	ダブルクリックされた時に実行
onkeydown="..."	キーを押して離した時に実行
onkeypress="..."	キーを押した時に実行
onkeyup="..."	キーを離した時に実行
onload="..."	ドキュメントを読み込んだ時に実行
onunload="..."	現在開いているドキュメントから別のページに移動したりブラウザを閉じようとした時に実行

ナビゲータオブジェクト：	ブラウザ自身が持っている部品や情報を扱う。ブラウザのバージョン、ブラウザに表示されるドキュメント・画像など
ビルトインオブジェクト：	JavaScriptが独自にブラウザに組み込むオブジェクト日付・時間を取り扱うオブジェクトや文字列操作を行うオブジェクトなど

parseInt()	文字列を整数に変更する	JavaScript1.0
parseFloat()	文字列を浮動小数点に変更する	JavaScript1.0
escape()	文字列をASCII形式に変更する	JavaScript1.0
unescape()	ASCII形式を文字列に変更する	JavaScript1.0
isNaN()	値が数値かどうか判断する	JavaScript1.0
taint()	データ参照を許可しないようにする	JavaScript1.1
untaint()	taint()漢数を無効にする	JavaScript1.1
Number()	オブジェクトを数に変換する	JavaScript1.2
String()	オブジェクトを文字列に変換する	JavaScript1.2
isFinite()	有限数かどうか判断する	JavaScript1.3

abstract	boolean	break	byte	case
catch	char	class	const	continue
default	delete	do	double	elese
extends	false	final	finally	float
for	function	goto	if	implements
import	in	instanceof	int	interface
long	native	new	null	package
private	protected	public	return	short
static	super	switch	synchronized	this
throw	throws	transient	true	try
typeof	var	void	while	with

算術演算子	意味
y = x	変数に値を代入する。
x + a	加算
x - a	減算または負の値表す。
x * a	乗算
x / a	除算
x % a	乗除、除算で余りを求める。
x ++ , ++ x	値に1を増やす（インクリメント）
x -- , -- x	値から1を引く（デクリメント）

比較演算子	意味
x == y	xとは等しい
x != y	xとyは等しくない
y < x	xはyより小さい
y <= x	xはyより小さいか等しい
y > x	xはyより大きい
y >= x	xはyより大きいか等しい

代入演算子	意味
y += a	左辺に右辺の値を加算した結果を左辺に代入（x=x+yと同じ）
y -= a	左辺に右辺の値を減算した結果を左辺に代入（x=x-yと同じ）
y *= a	左辺に右辺の値を乗算した結果を左辺に代入（x=x*yと同じ）
y /= a	左辺に右辺の値を除算した結果を左辺に代入（x=x/yと同じ）
y %= a	左辺に右辺の値を除算し、余りを左辺に代入（x=x%yと同じ）

文字列演算子	意味
"文字列A"+"文字列B"	「文字列A」と「文字列B」を連結する
a += "文字列B"	aの後に「文字列B」を追加する

ビット演算子	意味
a ~ b	ビットの反転
a & b	ビットの論理積(AND)
a \| b	ビットの論理和(OR)
a ^ b	ビットの排他的和(XOR)
a << b	ビットの左シフト
a >> b	ビットの右シフト
a >>> b	ビットの論理右シフト
a <<= b	ビットごとの左シフトの代入
a >>= b	ビットごとの右シフトの代入
a >>>= b	論理右シフトの代入