☆JavaScript
┌──┐
│目次│
├──┘
│◆JavaScriptの利用 usage
│◆HTMLファイル内への記述方法 html
│◆JavaScriptのオブジェクト指向プログラミング objprog
│◆オブジェクト obj
│◆イベント event
│◆文法 gram
│◆部品 parts
│◆ブラウザ環境サンプル browser
│◆Ajax ajax
│◆サーバサイドJavaScript sside
│◆Aptana Jaxer aptana
＿◇クライアントサイドJavaScript
Internet Explorer/Mozilla Firefox/Apple Safariなどのブラウザの中で実行される。典型的にはサーバに保存されていて、クライアントに呼び出される
※もともとの利用方法
│ Webページに変化をつける
│ Webページの中でユーザ操作に応答する
⇒データをサーバにリクエストして結果を表示するにはWebページの再ロードが必要
※Java Scriptをサーバとの対話につかう
│ JavaScriptでクライアントの表示の一部を更新する
⇒代表的なものがAjax
＿◇Ajax
Asynchronous JavaScript + XML
Webページを再ロードせずにサーバとの対話結果で表示を更新できる
非同期通信（レスポンスが返るのを待たずに通信できる）
※XML HTTPリクエスト
※prototype.js
純粋 JavaScript のAjaxフレームワーク
＿◇サーバサイドJavaScript
サーバ側でJavaScriptを実行するためにJavaScriptエンジンが必要
│ Aptana Jaxer
サーバ側では、クライアント側からのリクエストに答える形でスクリプトが実行される
※開発環境
Aptana STUDIO (Eclipseベース）
Visual Studio
│ Visual Web Developer Express Edition
│ (C#, VBでなくJavaScriptだけの開発にも使える）
│ (一応、C#かVBでプロジェクトを始める必要あり）
＿◇組み込みJavaScript
◆HTMLファイル内への記述方法
①<script>タグによりスクリプト言語を規定
②JavaScript未対応のブラウザでスクリプトが表示されることを防ぐためにソース本体はコメントアウトする。
<script language="JavaScript1.3"> <!-- JavaScript1.3ソース //--> </script>
※HTML4.0標準形式
language属性が不適切となっているが、language属性を記述すれば言語のバージョンに対応していないブラウザで発生するエラーを回避できる
<head> ... <meta http-equiv="Content-Script-Type" content="text/javascript"> ... </head> <script type="text/javascript"> <!-- JavaScriptソース //--> </script> ※<script>タグ <script type="MIMEタイプ" language="言語名" src="URL"> ～ </script>
│ srcでurl指定することで別ファイルを読み込ませることができる。
│ 外部読み込みが動作するためにはHTTPサーバにMIMEタイプの設定がなされていなければならない。
│ AddType application/x-javascript .js
※<noscript>タグ
JavaScriptを無効にしているか、対応していないブラウザにメッセージを出すために使う。<script>の外で使う
<noscript>メッセージ</noscript>
＿◇input要素からJavaScriptを呼び出す例
<input type=”button” value=”Show text” onclick=”ShowText(‘Hello XHTML’);” />
＿◇外部におかれたJavaScriptの読み込み
<script src=”URL”></script>
＿◇クラスの代わり
他のＯＯＰ言語のクラスの代わりにオブジェクトを定義
※functionを使う
例）
<script type="text/javascript">
var Dog = function(name, age){
this.name = name;
this.age = age;
}
</script>
※functionの中のfunctionをメソッドと呼ぶ
⇒そのままだと、インスタンス毎にメソッドが作られ、無駄にメモリを消費する
※prototypeプロパティ
無駄にメモリを消費しないように、クラスに似た別のオブジェクトを作成するための元のオブジェクトを定義できる
⇒動的にprototypeの内容を変更可能
例）
Dog.prototype = {
bark : function() {
document.write("xxx");
}
};
※動的メソッド
インスタンスに対して定義したメソッド。特定のオブジェクトに定義されたものなので、クラスの概念からは外れる
※プロトタイプチェーン
継承の代わり
子にあたるオブジェクトの定義の中で、親にあたるオブジェクトをプロトタイプのメンバとしてつなぐ
例)
var Retriever = function() {};
Retriever.prototype = new Dog();
Retriever.prototype.swim = function() {
│ …子の独自のメソッド…
＿◇プロパティ
オブジェクトの持つ属性をプロパティとよぶ
オブジェクトの後の「.」で記述する
│ オブジェクト.プロパティ
プロパティへの値の設定は
│ オブジェクト.プロパティ = 値
＿◇メソッド
オブジェクトに対して動作を指定する
│ オブジェクト.メソッド(値)
＿◇ナビゲータオブジェクト
ブラウザがあらかじめ持っている部品を取り扱うオブジェクト
window
│ Frame
│ location
│ history
│ document
│ Layer
│ Link
│ Image
│ Area
│ Anchor
│ Applet
│ Form
│ Textarea
│ Text
│ FileUpload
│ Password
│ Hidden
│ Submit
│ Reset
│ Radio
│ Checkbox
│ Button
│ Select
│ Option
screen
event
navigator
│ Plugin
│ MimiType
※階層の上から「.」で区切って記述する。
※一番上位のwindowオブジェクトは省略可。
＿◇navigator
※navigator.appName
│ ブラウザ名を取得する
例）
│ document.write(“ブラウザ名:”,navigator.appName)
※navigator.appCodeName
│ ブラウザのコード名を取得する
※navigator.appVersion
│ ブラウザのバージョンを返す
※navigator.userAgent
│ ブラウザのユーザーエージェントを返す
※navigator.platform
│ ユーザのプラットフォームのタイプを返す
※navigator.language
│ LANG属性を返す
※navigator.javaEnabled()
│ Javaが使えるかどうか返す
※使用可能なMIMEのタイプを取得する
│ navigator.mimeTypes
│ オブジェクト配列
│ .lengthで総数が分かる
│ navigator.mimeTypes[n].type
│ MIMEのタイプ
│ navigator.mimeTypes[n].description
│ 詳細
│ navigator.mimeTypes[n].suffixes
│ 拡張子
＿◇document
documentオブジェクトには、読み込まれたXHTML(HTML)ドキュメントが格納される
documentオブジェクトには、その操作のためのメソッドが容易されている(DOM仕様に準拠、サブセット)
※主要DOMメソッド
createAttribute(name)
│ 名前がnameの属性を作成
│ 例）
│ var alignAttr = document.createAttribute(“align”);
createComment(cmnt)
│ コメントを作成
createElement(name)
│ nameで指定した新しいDOMノードを作成
│ 例）
│ var label = document.createElement(“p”)
│ ※<p>タグを作成
getElementById(id)
│ idで指定した要素を取得
│ 例）
│ <p id=”p1″>aaa</p>というパラグラフがドキュメント内
│ にあったとしてその参照を変数p1に代入
│
│ var p1 = document.getElementById(“p1”);
│
getElementsByName(name)
│ nameで指定した名前の要素をすべて取得
getElementsByTagName(tagname)
│ tagnameで指定したタグの要素をすべて取得
│ （複数の要素はインデックスで識別される）
│ 例）
│ var p0 = document.getElementsByTagName(“p”)[0];
insertBefore(elm)
│ この要素に新しい子要素elmを挿入
removeChild(child)
│ 既存の子要素childを削除
replaceChild(newChild, oldChild)
│ 既存の子要素oldChildを新しい子要素newChildと交換
※主要DOM属性
firstChild
│ 最初の子要素
lastChild
│ 最後の子要素
nodeName
│ ノードの名前
nodeType
│ ノードの型
nodeValue
│ ノードの値
※メソッド
document.write(“文字列”);
│ 書き出した文字列内にHTMLタグがあれば、評価される。
│ また、文字列に修飾メソッドを適用してdocument.writeすれば、修飾が効く
│
例）
│ document.write(“文字列”.bold());
document.writeln(“文字列”);
│ 改行つきで文字を書き出す。<pre>タグの中でのみ意味を持つ。
document.title = “文字列”;
⇒タイトルバーに文字列を設定
document.open()
document.close()
ドキュメントストリームのオープンとクローズ。
例）
│ DW1=window.open(“”, “DocWin1”);
│ DW1.document.open();
│ …
│ DW1.document.close();
※document.open()により表示されている文字を消去できる
document.cookieプロパティ
クッキーファイルに書き込み、読み出す
例）
Time = new Date()
document.cookie=Time.toLocalString();
document.write(“AccessTime:”+document.cookie);
document.getSelection()
マウスで選択された文字を返す
＿◇element
※主要DOMメソッド
applendChild(element)
│ 要素にelementで指定した要素を追加
cloneNode(include_child)
│ 要素を複製. include_childにはtrue/falseを指定
│ trueなら子要素複製
getAttribute(name)
│ 属性名nameの属性値を取得
getAttributeNode(name)
│ 属性名nameをもつ属性のノード取得
getElementsByTagName(tagname)
│ tagnameで指定したタグの要素をすべて取得
hasChildNodes()
│ 子ノードがあればtrue
insertBefore(elm)
│ この要素に新しい子要素elmを挿入
removeChild(child)
│ 既存の子要素childを削除
replaceChild(newChild, oldChild)
│ 既存の子要素oldChildを新しい子要素newChildで交換
setAttributeNode(attrNode)
│ 属性ノードattrNodeを要素に設定
※主要DOM属性
firstChild
│ 最初の子要素
lastChild
│ 最後の子要素
nodeName
│ ノードの名前
nodeType
│ ノードの型
nodeValue
│ ノードの値
※属性
childNodes
│ 要素の子ノードのリスト
className
│ クラス名
＿◇配列としてのHTMLアクセス
リンクやフォームなどのHTMLのタグはオブジェクトとして取り扱えるだけでなく、配列としてもアクセスできる。
＿◇ビルトインオブジェクト
JavaScriptに組み込まれているオブジェクト
※ビルトインオブジェクトやユーザー独自のオブジェクトを呼び出すときは、new 演算子による。
オブジェクト名 = new オブジェクト型(値)
＿◇Array
Arrayオブジェクトの生成
arrayオブジェクト名 = new Array(要素の数)
※要素へのアクセス
arrayオブジェクト名[添え字]
添え字は０から始まる。
※定義時の値の初期化
arrayオブジェクト名 = new Array(要素0,要素1,…);
①arrayオブジェクト.join()
配列要素を結合し、文字列として返す。join(“文字列”)とすると文字列を間に挟んで結合する。デフォルトは「,」
②arrayオブジェクト.reverse()
配列要素を逆順にする
③arrayオブジェクト.sort(比較関数)
配列要素をソートする。比較関数を与えないと、文字列として、辞書順にソートされる。⇒比較関数は、２引数の無名関数 functionを引数として与えるか
戻り値は -1, 0, 1 最初の引数を前にするならば-1
⇒外側で定義された２引数の通常の関数の関数名を与える
※数値昇順
function xxx(a,b) { return a – b}
※数値降順
function yyy(a,b) { return b – a}
④arrayオブジェクト.lengthプロパティ
配列要素数を返す。
※ソートの例＜連想配列＞
<html>
<head>
<script type="text/javascript">
<!--
//Array
var targetArray = [
{a:"A", b:2000}
,{a:"B", b:1000}
,{a:"C", b:3000}
,{a:"D", b:4000}
];
//Sort
targetArray.sort(
function(x, y) {
var bX = x["b"];
var bY = y["b"];
if (bX < bY) return -1;
if (bX > bY) return 1;
return 0;
}
// function(x,y) {return (x["b"] <y["b"])? -1: 1;}
);
for (var i=0; i < targetArray.length; i++) {
document.write(
i + ":" + targetArray[i]["a"] + "," + targetArray[i]["b"] + "<br>"
);
}
// -->
</script>
</head>
<body>
</body>
</html>
＿◇Math
Math.E
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
Math.PI
Math.SQRT1_2
Math.SQRT2
Math.abs(n)
Math.round(n)
Math.min(n,m)
Math.max(n,m)
Math.floor(n)
Math.ceil(n)
Math.pow(n,m)
Math.atan2(x,y)
Math.sqrt(n)
Math.exp(n)
Math.log(n)
Math.sin(n)
Math.cos(n)
Math.tan(n)
Math.asin(n)
Math.acos(n)
Math.atan(n)
Math.random()
＿◇文字列
string.toLowerCase()
string.toUpperCase()
string.split(分割文字列)
指定した文字列を分割し、配列を返す
string.charAt(n)
n番目の文字を抜き出す
string.substring(n,m)
０スタートのn文字目からm文字目の直前まで抜き出す
string.substr(n,m)
０スタートのn文字目からm個の文字を抜き出す
string.indexOf(検索対象文字列 [,検索開始位置])
０スタートの文字位置を返す。みつからなければ-1
string.lastIndexOf(検索対象文字列 [,検索開始位置])
文字列を後ろから検索し、０スタートの文字位置を返す。みつからなければ-1
string.charCodeAt(n)
n番目の文字をISO-Latin-1の文字コードに変換する
String.fromCharCode(要素1,…)
ISO-Latin-1の文字コードを文字列にする
＿◇正規表現 RegExpオブジェクト
※簡略化した記法
/検索文字列/フラグ
※オブジェクトとしての記法
var re = new RegExp(“検索文字列”, “フラグ”);
※フラグ
g 全て置換、無ければ一つだけ置換
i 大文字小文字の区別なし、無ければ区別あり
m ^や$の一致を各行に適用。mがなければ文字列の先頭と末尾のみ
※マッチ
A+ 1個以上のA、可能な限り長く
A* 0個以上のA、可能な限り長く
A+? 1個以上のA、可能な限り短く
A*? 0個以上のA、可能な限り短く
A{3} 3個のA
A{3,} 3個以上のA
A{3,5} 3~5個のA
A|B AまたはB
※部分文字列の取り出し
() ⇒ $1, $2で参照
※記号
\d 数値[0-9]
\D 数値以外[^0-9]
\w 英数[A-Za-z0-9_]
\W 英数以外[^A-Za-z0-9_]
※グループ化
aaa(?=bbb) aaaにbbbが続く場合に一致するがbbbは検索結果に含めない
aaa(?!bbb) aaaにbbbが続かない場合に一致
※正規表現を引数にとる文字列メソッド
①s = s.replace(/検索文字列/g, “置換文字列”);
⇒置換文字列として関数オブジェクトを指定できる
関数には、
第１引数として検索に一致した文字列
第２引数以下に$1以下の部分文字列
が渡される。
②s.match(RegExp)
一致した部分を返す。一致しなければnull
③s.search(RegExp)
一致した位置を返す。一致しなければ-1
※RegExpのプロパティ
RegExp.input
RegExp.lastMatch
RegExp.leftContext
RegExp.rightContext
RegExp.$1
RegExp.lastParen
＿◇Date
日付オブジェクト
①引数なしでオブジェクトを作成すると現在時刻でオブジェクトを作成
例）
var d = new Date();
②引数(年、月、日、時、分、秒）を指定すればその時刻のオブジェクトが得られる
例）
var d = new Data(1999, 11, 31);
③getHours()などのメソッドで必要な値を取り出すことができる。
※getMonth()で取得する月は１月が０。
※getYear()で取得する年はブラウザによっては１９００年起点となっているので修正して用いる。
あるいはgetFullYear()を用いる。
⇒var fullYear = d.getFullYear();
例）
var d = new date();
var year = d.getYear();
if (year<2000) year+= 1900;
var month = d.getMonth() + 1;
＿◇イベントハンドラ
※HTMLタグ内での指定
イベントハンドラが設定可能なオブジェクトのHTMLタグ内で設定する。
│ 例)
<form>
<input type=”button” value=”CALC” onClick=”関数名()”>
</form>
※イベントの発生を取得して、スクリプトの実行を開始できる。
※イベントの取得を行うものをイベントハンドラと言う。
※イベントオブジェクト
オブジェクトの持つイベントに関数名またはスクリプトを設定することで<HTML>タグ内で記述しなくともイベントを取得することができる。
オブジェクト.イベント = 関数名またはスクリプト
＿◇HTMLオブジェクト別イベントハンドラ例
①button
<input type=”button” name=”名前” value=”xxx” onClick=”イベントハンドラ”>
②text
<label for=”nm”> ラベル：</label>
<input type=”text” name=”名前” size=”文字数” id=”nm” onCahnge=”イベントハンドラ”>
＿◇文の区切り
①;
│ 文は「;」で区切る。改行では文の区切りとならない。ただし、「;」を省略しても適当に処理される。
＿◇コメント
①//
│ 以降の１行がコメントとなる。
②/* ～ */
│ 囲まれた内部がコメントとなる。
＿◇命名法
オブジェクト、関数、引数、変数、対数名
①アルファベット大、小文字とアンダースコアで始まる
②２バイト文字は不可
③スペース、コンマ、疑問符、引用符は不可
④数値で始まってはならない
⑤大文字、小文字は区別される
⑥予約語は使用できないが、予約語を含む文字列は可
＿◇データ型
①文字列
│ ”文字列”
│ ’文字列’
│ 特殊文字
│ \n 改行
│ \t タブ
│ \r キャリッジリターン
│ \b バックスペース
│ \f フォームフィード
│ \\ バックスラッシュ
│ \XXX XXX=0~337[8進] Latin-1文字コード
│ \xXX XX=00~FF[16進] Latin-1文字コード
│ \uXXXX ユニコード[16進]
②整数
│ 123
│ 0514 (８進）
│ 0xAA（１６進）
③浮動小数点数
│ 3.14
│ 1.73E+4
④論理値
│ true
│ false
⑤null値
│ null
＿◇変数
※変数宣言
var 変数名 = 値;
=値は省略可能。
例）
var a = 5;
│ 変数名は英字と「_」で始まる英数字記号（スペース、カンマ、疑問符、引用符除く）文字列
│ 2バイト文字不可。大文字小文字は区別、予約語は使用不可。
│ ⇒変数には数値、文字列など型宣言なく代入できる（が、型は存在する）
※変数には関数も代入できるので無名関数を変数に代入することもできる
例）
var func = function () {
...
}
＿◇変数型の判定と型
typeof(変数名)
⇒型名が返される
①boolean
②number
③string
④object
⑤function
＿◇配列の生成
例）
var nArray = new Array(30);
nArray[0] = …;
例）普通の配列の配列の定義
var tArray = [ ["a", 1000] ,["b", 1010] ,["c", 1011] ];
＿◇連想配列（ハッシュ）
{名前 : 値, ……}
オブジェクトと連想配列は同一の概念である。
⇒配列では[]で参照するが、オブジェクトでは.で参照する
⇒配列の場合、要素と唱え、オブジェクトではプロパティと呼ぶ
⇒配列ではキーと呼び、オブジェクトではプロパティ名と呼ぶ
⇒配列要素の値は、オブジェクトではプロパティの値
※等価
obj.x と obj[“x”]
ただし、ブランケット構文ではキー名は文字列として扱われるが、ドット演算子では識別子として扱われる。よって、ブランケットの中に数字だけをいれてもＯＫだが、.の後では不可。
例）連装配列の生成
var targetArray = [
{a:"A", b:2000}
,{a:"B", b:1000}
,{a:"C", b:3000}
,{a:"D", b:4000}
];
※連装配列の要素へのアクセス
targetArray[0][“a”]
※配列に関数を代入した場合の呼び出し
aArray[0]=func;
aArray[0]();
※連装配列に関数を入れてプロパティとして実行
aArray[“xxx”]=func;
aArray.xxx();
＿◇Arrayオブジェクトを使わない配列の生成
関数で配列の要素を入れる器を作り、つくった入れ物をnew演算子で流し込み配列を生成する
例）
function MakeArray(n) {
this.length = n;
for (var i = 0; i<= n; i++) {
this[i] = 0;
}
return this;
}
～
要素名 = new MakeArray(要素数);
※以下
要素名[添番]でアクセスできる。
＿◇定数
JavaScript 1.5以降
const 定数名 =値;
＿◇演算子
①算術演算子
=
+ 加算
– 減算
* 乗算
/ 除算(5/2=2.5)
% 剰余
++
—
②比較演算子
==
!=
<
<=
>
>=
※文字型と数値型はJavaScript 1.2では明確に区別されたが、1.3以降は区別されない。よって
│ ”2″ == 2
は true となる
※文字型と数値型を区別したいときは
===
!==
を使う
③論理演算子
&&
||
!
⑤代入演算子
+=
-=
*=
/=
%=
⑥文字列演算子
“str1” + “str2” 連結
a += “str_append” 追加
⑦ビット演算子
~ 反転
& 論理積
| 論理和
^ XOR
<< 左シフト
>> 右シフト
>>> 論理右シフト
<<= ビット左シフト代入
>>= ビット右シフト代入
>>>= 論理右シフト代入
⑧条件演算子
条件式 ? x : y
⑨typeof演算子
変数型を返す
例）
│ typeof(mozi)
⑩void演算子
値を返さずに式を評価する
例）
│ void(Kansu())
⑪カッコ他
[] 配列添番
() 数式をくくる
. オブジェクト、プロパティ、メソッド区切り
, ,の両側の評価
⑫in演算子
オブジェクト内に指定した値が含まれているかどうかを調べ、含まれていればtrueを返す
│ プロパティ名(もしくは数値) in オブジェクト名
※他に
new, this, instanceof, delete, functionも演算子である
＿◇instanceof 演算子
オブジェクトが指定したオブジェクトタイプの場合、真を返す。
オブジェクト名 instanceof オブジェクトタイプ
＿◇delete演算子
オペランドとして指定された配列要素やプロパティ／メソッドを削除する
例）
delete a1.name;
＿◇制御ステートメント
①for
│ for (初期値; 条件式; 増減式) { }
例）
for (var i = 1; i<=1000; i++) {
...
}
②for in
│ for (変数 in オブジェクト) { }
⇒連装配列を舐めるときはこちらを使う
例）aryのメンバを列挙する。
for (name in ary) { window.alert(name); }
例)
for (var key in nAry) {
... nAry[key] ...
}
③if
│ if (条件式) { } else { }
④while
│ while (条件式) { }
⑤with
│ with (オブジェクト) { }
{}内でオブジェクトで指定したオブジェクトを明示的に指定せずに使えるようにする。
⑥return
値を返す。
⑦break
│ 一番内側のループを抜ける
⑧continue
│ 以下のループ処理を飛ばして、ループ先頭に戻る
⑨ラベル
ラベル:
でラベルを定義しておくことにより、breakやcontinueでラベルを指定することで飛び先を制御できる。
⑩do while
do 処理 while (条件式);
⑪switch
switch (値) {
case ラベル:
...
break;
default:
...
}
⑫export
Signed Scriptが、他のスクリプトに関数、プロパティ、オブジェクトの使用を許す。
⑬import
exportにより使用可能になったオブジェクトを受け取る
⑭try catch
try {
...
}
catch (例外の値) {
}
finally {
}
⑮throw
例外の値を投げる
例)
│ throw “Error2”;
│ throw 42;
│ throw true;
＿◇関数の定義と呼び出し
①関数定義
function 関数名(引数,引数,…) {処理}
※html内では<head>内で関数を定義するようにし、関数定義の前に関数が呼び出されることのないようにする。
例）
function xxx(a) {
var y = a / 2;
return y;
}
②関数呼び出し
関数名(実引数,…);
※<body>内で呼び出す。
③関数オブジェクトの生成
オブジェクト = new Function (引数1,…, ボディ)
例)
myFunc = new Function(“x”, “y”, “return x * y”);
④関数の呼び出し元の参照
オブジェクト.caller
＿◇クラス
※コンストラクタに相当する無名関数の中で、メンバを定義する
メンバは this. に引き続いて定義する。変数でも関数でも同じ。
※コンストラクタの無名関数を変数に代入する⇒変数名がクラス名となる
※インスタンスを生成するときは new クラス名(コンストラクタに渡す引数)として生成したオブジェクトをインスタンス変数に代入する。
⇒以後、インスタンス変数.メンバ名 でアクセスできる
例）
var ClassA = function(a, b) {
this.xxx = a;
this.yyy = b;
this.show = function() {
alert("xxx="+this.xxx+" yyy="+this.yyy);
};
};
var instA = new ClassA(3, 4);
...
instA.show();
＿◇インスタンスの作成
関数オブジェクトがクラスとしての役割も持ちえる。関数として呼び出すのか、それともnew演算子によってコンストラクタとして呼び出すかによって、関数の振る舞いが変わる。
※一般的にはコンストラクタ（クラス）名は大文字で始めるのが好ましい。
※コンストラクタとなる関数に戻り値は不要。
例）
var Animal = function(name, sex) {
this.name = name;
this.sex = sex;
this.toString = function() {
window.alert(this.name + " " + this.sex);
};
}
var anim = new Animal("トラ", "オス");
anim.toString(); // 「トラ オス」
※thisキーワードにより生成されたオブジェクトを指す。
※インスタンスの生成は以下のようにする。
│ オブジェクト名 = new オブジェクト型(値)
※プロパティ
│ 代入)
│ オブジェクト.プロパティ = 値
│ 参照)
│ オブジェクト.プロパティ
※メソッド
値として関数オブジェクトが渡されたプロパティがメソッドと見なされる
│ 定義）
│ プロパティ = function() {
│ …
│ };
│ 参照）
│ オブジェクト.メソッド(値)
※インスタンスに対して、後から動的にプロパティやメソッドを追加することができる。⇒インスタンスに固有のプロパティやメソッドとなる。
＿◇prototype
すべてのオブジェクトにはprototypeという名前のプロパティが公開されている。prototypeにメンバを追加すると、インスタンス化された先のオブジェクトにも引き継がれる。
オブジェクト.prototype.プロパティ = …;
のようにアクセス可能。
例）オブジェクト・リテラルを使うことで、.prototypeを繰り返し使用しないでも済むようになる。
var Animal = function(name, sex){
this.name = name;
this.sex = sex;
}
Animal.prototype = {
getVoice : function() {
window.alert(this.name + "「チュウ！」");
},
toString : function() {
window.alert(this.name + " " + this.sex);
}
};
var anim = new Animal("トラ", "オス");
anim.toString(); // 「トラ オス」
※プロトタイプ・チェーン
プロトタイプにインスタンスを設定することで、インスタンス間の継承関係が形成される。あるインスタンスでメンバが発見されない場合、順に階層をさかのぼって、最上位のObject.prototypeに行き当たるまでメンバの検索が行われる。
＿◇メンバの内部属性
DontDelete
│ delete演算子による削除の禁止
DontEnum
│ for…inループによる列挙の対象外
Internal
│ 内部メンバ（直接のアクセスを禁止）
ReadOnly
│ 読み取り専用（値の設定を禁止）
＿◇ビルトイン関数
ビルトイン関数は、オブジェクトに依存せず、スクリプトのどこからでもしようできる。
①Number()
│ オブジェクトを数に変換する
②String()
│ オブジェクトを文字列に変換する
③isNaN()
│ オブジェクトが数値かどうか判断する
④escape()
│ 文字をASCII形式に変換する
⑤unescape()
│ ASCII形式を文字に変換する
＿◇ダイアログボックスの表示
alert(“文字列”);
＿◇ブラウザ設定
「.js」ファイルを置くWebサーバにはMIMEタイプの設定をしておく必要がある
例）Apacheの.htaccessファイルによる設定
AddType application/x-javascript .js
＿◇オブジェクトとイベント
<HTML>
<HEAD>
<TITLE>home page</TITLE>
<LINK REL="XXX" HREF="mailto:xxx">
<script language="JavaScript">
<!--
var testObj = function(name) {
this.name = name;
this.browser = function() {
document.write("ブラウザ名:",navigator.appName);
document.write("<BR>");
document.write("コード名:",navigator.appCodeName);
}
this.go = function() {
document.write("<form>");
document.write("<input type=\"button\" value=\"GO\" onClick=\"obj.browser()\">");
documnet.write("</form>");
}
}
var obj = new testObj("TEST");
document.onLoad = obj.go();
//-->
</script>
</HEAD>
<BODY>
<ADDRESS>
Please send your comment to
<A HREF = "XXX">xxx</A>
</ADDRESS>
</BODY>
</HTML>
※WebブラウザのもつJavaScriptのHTTP通信機能を使う
※データはプレインテキストもしくはXML
※通信は操作や表示とは非同期
※サーバ側ではサーバサイドJavaScriptに限らず、Perl, PHPなどのさまざまな言語が使われる
※Ajaxをクライアント側で利用するにはブザウザに組み込まれている
│ window.ActiveXObject
│ window.XMLHttpRequest
のどちからのオブジェクトが必要になる
⇒ActiveXObjectは主にWindowsブラウザ
＿◇prototype.js
純粋Java Scriptのファイル
OS, ブラウザ固有の機能を使っていない。ブラウザの互換性の問題も吸収。
※functionを集めたライブラリ
※XHTMLにロードして利用する
※機能
基本クラスの拡張
│ Object, Number, Function, String, Array, document,
│ DOM, Event
ユーティリティ関数
│ $(), $$(), $F(), $A(), $H(), $R(),
│ Try.these(), 文字列操作関数
Ajaxオブジェクト
│ Ajax.Base, Ajax.Request, Ajax.Updater,
│ Ajax.Responders, Ajax.PeriodicalUpdater
Form
│ Form, Form.Element, Form.Element.Serializers,
│ Abstract.TimeObserver, Form.Element.Observer,
│ Form.Observer, Abstract.EventObserver,
│ Form.Element.EventObserver,
│ Form.EventObserver, Position
※prototype.jsのロード
①XHTMLと同じディレクトリに配置する場合
<script type=”text/javascript” src=”prototype.js”></script>
②サブディレクトリに配置
<script type=”text/javascript” src=”jalib/prototype.js”></script>
③別なURL
<script type=”text/javascript”
src=”http://xxx.co.jp/prototype.js”>
</script>
＿◇prototype.js関連ライブラリ
①Accordion
│ アコーディオン形式での表示
│ （通常は内容が表示されておらず、パネルをクリックすると表示される）
│ accordion.js + effects.js
│ http://stickmanlabs.com/accordion/
②DatePicker
│ カレンダー表示
③JSValidate
│ 入力したデータの検証
│ scriptaculous.js + jsvalidate.js
│ http://www.jsvalidate.com/
│
│ inputのclass属性に指定
│ 入力必須 jsrequired
│ 数字 jsvalidate_number
│ 負数含む jsvalidate_digits
│ 英字 jsvalidate_alpha
│ 英数字と_ jsvalidate_alphanum
│ メールadr jsvalidate_email
③Lightbox2
│ 画像表示
④LightView
│ 画像表示
⑤LightWindow
│ 画像、ムービー表示
⑥ModelBox
│ ダイアログボックス
⑦plotr
│ グラフの表示
│ http://solutoire.com/plotr/
│ +
│ ExplorerCanvas (excanvas.js)
│ http://excanvas.sourceforge.net/
│
│ 棒グラフ Plotr.BarChart(target, options)
│ 折れ線 Plotr.LineChart(target, options)
│ 円 Plotr.PieChart(target, options)
⑧protocalendar
│ カレンダー
⑨Prototabs
│ タブ表示
⑩Prototip
│ ツールチップ表示
⑪RefValidation
│ 入力チェック
＿◇prototype.js Ajaxオブジェクト
①PeriodicalUpdater()
│ 非同期通信で読み込んだデータを一定周期で更新
②Request()
│ Ajaxのリクエストを行う
③Updater()
│ 非同期通信で読み込んだデータを表示する
④activeRequestCount
│ 非同期通信のリクエスト数を表すプロパティ
＿◇Ajax.Updater
非同期通信で読みこんだデータを表示
new Ajax.Updater(“id0”, “abc.txt”, {method: “get”});
id0:
│ 更新する要素(idが”id0″である<p>や<div>)
abc.txt:
│ ロードするURL
│ （セキュリティ上、XHTMLと同じドメイン内)
{method: “get”}
│ methodだけでなく、パラメータ、イベント等を指定
│ 例）
│ {
│ method: ‘get’,
│ onFailure: reportError
│ }
※イベント
onComplete 通信が完了した
onLoading 読み込みを開始した
onLoaded 読み込みを終了した
onSuccess 通信に成功した
onFailure 通信に失敗した
onException 例外が発生した
on403 HTTP 403エラー発生
on404 HTTP 404エラー発生
※apacheの場合、ファイルが不在の検出はon404による
IISはonFailureでも可
＿◇Ajax.Request
非同期通信のリクエストを行う
パラメータとして任意の文字列を追加できる
例）
var ajax = new Ajax.Request(
url,
{
method: 'get',
onComplete: Success
}
};
※エラー処理
onFailureイベントが発生したときに呼び出す関数を定義する
...
onFailure: Failure
...
function Failure(o) {
$("d0").innerHTML = "Error.";
}
※レスポンスの取得
onSuccessイベントが発生したときに呼び出す関数を定義する
...
onSuccess: Success,
...
function Success(o) {
$("d0").innerHTML = o.responseText;
}
※responseText
│ XMLファイルのテキスト要素だけを表示
※responseXML
※パラメータ
パラメータとして任意の文字列を指定できる
解釈はアプリケーション依存
parameters: “xxx”
※ブラウザのキャッシュが働いて表示が更新できないトラブルの回避
⇒リクエスト毎にtimeの値を変えてリクエストする
parameters: “time = ” + msec,
＿◇Ajax.PeriodicalUpdater
データを一定時間の間隔で更新する
※サーバ側でも処理が必要になる
※書式
Ajax.PeriodicalUpdater( "d0", url, {
options
});
※時間間隔の指定オプション
│ ”frequency”: 秒
＿◇Ajax.activeRequestCount
同時に複数送ることができる非同期通信のリクエストの現在のリクエスト数を調べるためのプロパティ
＿◇伝統的 Ajax プログラミング
※Webブラウザの違いを吸収し、XML HTTPリクエストオブジェクトを生成する
※生成したオブジェクトにopenメソッドを呼び出して通信条件を指定
※sendメソッドでデータ送信
※readyStateプロパティを監視
※responseTextまたはresponseXMLプロパティでデータ取得
＿◇ActiveXObject
＿◇XMLHttpRequest
JavaScriptオブジェクト
※メソッド
abort()
│ 実行中の送受信を停止する
getAllResponseHeaders()
│ すべてのHTTP応答ヘッダを取得する
getResponseHeader()
│ 指定したHTTP応答ヘッダを取得する
open()
│ HTTP通信を確立する
│ 例）
│ httpobj.open(method, url, true);
│ method:通信方法 GET,POST,PUT,PROPFIND
│ url:通信先、XHTMLと同ドメイン
│ true:非同期通信,falseなら同期
send()
│ サーバーにHTTPリクエストを送信する
│ 例）
│ httpobj.send(data)
│ dataが空文字列だと、パラメータを含むヘッダのみ
setRequestHeader()
│ HTTPリクエストの際に送られるヘッダに情報を追加
※プロパティ
onreadystatechange
│ readyStateが変化するたびに呼び出されるイベント
readyState
│ XMLHttpRequestオブジェクトの状態を表す
│ 0 （読み込み開始前の）初期化完了
│ 1 読み込み中
│ 2 読み込み完了
│ 3 読み込んだデータを解析中
│ 4 処理の終了
responseText
│ 応答で返されたテキストを表す
responseXML
│ 応答で返されたXMLドキュメントオブジェクトを表す
status
│ HTTPステータスコードを表す
statusText
│ HTTPステータの詳細メッセージを表す
※サーバから送られてくる情報を受け取るための方法
ステータス変更イベント監視メソッド
│ onreadystatechange
この中でreadyStateの変化をチェックする
例）
httpobj.onreadystatechange = function() {
if (httpobj.readyState == 4)
{
Load(httpobj);
}
}
※通信ヘッダ
ヘッダの利用についてはアプリケーションにまかされている
※ヘッダラベル名
Content-Type
│ 値例）text/plain
Content-Length
│ 値例）内容の長さの数値
Server
│ 値例）ASP.NET Development Server/9.0.0.0
Last-Modified
│ 値例）Mon, 15 Dec 2008 08:52:14 GMT
Date
│ 値例）Mon, 15 Dec 2008 08:52:14 GMT
X-AspNet-Version
│ 値例）2.0.50727
Cache-Control
│ 値例）private
Connection
│ 値例）Close
※すべてのヘッダの取得
getAllResponseHeaders()
│ 例)
│ var rheader = oj.getAllResponseHeaders();
│ 全てのヘッダラベルとその値を接続した文字列が返る
※特定のヘッダの取得
getResponseHeader(“headerLabel”)
│ 見つからないと空文字列が返る
＿◇XMLレスポンス
通信のレスポンスで返されたオブジェクトに対してresponseXMLプロパティによりXMLオブジェクトを取得できる
※Content-Typeが text/xml である必要がある。
要求例）
│ httpoj.open(“GET”, “sample.xml”, true);
│ …
│ var xmldoc = httpoj.responseXML;
※XMLの内容へのアクセス
DOMのプロパティやメソッドによる
＿◇DOM操作サンプル
①要素の追加
<!-- docmethods.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScriptDOM</title>
<script language="JavaScript" type="text/javascript">
<!--
function ShowText(f){
var p0 = document.getElementsByTagName("p") [0];
var label = document.createElement("p");
var text = document.createTextNode("[Hello]");
label.appendChild(text);
p0.appendChild(label);
var p1 = document.getElementById("p1");
label = document.createElement("span");
text = document.createTextNode("香織");
label.appendChild(text);
p1.appendChild(label);
}
// -->
</script>
</head>
<body>
<form action="">
<p>DOM sample</p>
<input type="button" value="Do it"
onclick="ShowText(this.form); " />
<p id="p1">天井</p>
</form>
</body>
</html>
②属性ノードの設定
<!-- createAttr.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScriptDOM</title>
<script language="JavaScript" type="text/javascript">
<!--
function SetRight(){
var p1 = document.getElementById("p1");
var alignAttr = document.createAttribute("align");
alignAttr.nodeValue = "right";
p1.setAttributeNode(alignAttr);
}
// -->
</script>
</head>
<body>
<form action="">
<p>DOM sample</p>
<input type="button" value="Do it" onclick="SetRight(); " />
<p id="p1">天井香織</p>
</form>
</body>
</html>
③既存の子要素の削除
④既存の子要素の置き換え
◆サーバサイドJavaScript
サーバ側ではクライアント側のリクエストに応じてWebページをクライアントに送る。このときサーバーは、Webページの中でサーバ側で実行するように指定されているスクリプトを実行する。
＿◇<script>タグとrunat属性
<script>タグ中でrunat属性に”server”としていすることで、スクリプトはサーバで実行される。このタグの内容は、そのページがクライアントに送られるときに削除される。
例）
│ <script runat=”server”>…</script>
※runat属性値
client
│ クライアントで実行（省略時デフォルト）
server
│ サーバで実行
both
│ クラアントとサーバの両方で実行
server-proxy
│ サーバ上の関数を実行するためのプロキシを生成
│ （クライアントから呼び出したいサーバ側の関数）
ApacheにサーバーサイドJavaScriptを実行する機能を付加するもの
│ http://www.aptana.com/jaxer
＿◇Fileオブジェクト
サーバでのファイル操作を行うもの