Web

へーほーなるほどね。

クラスとコンストラクタとプロトタイプ

JavaScriptクラスのサブクラス化

function Rectangle(w, h) {
 this.width = w;
 this.height = h;
}
Rectangle.prototype.area = function() {return this.width * this.height; }

//サブクラスの定義
function PositionedRectangle(x, y, w, h){
 //width/heightプロパティを初期化
 //callメソッドを使ってこのオブジェクトのメソッドとしてコストラクタを呼び出す = コンストラクタチェーン
 Rectangle.call(this, w, h);
 this.x= x;
 this.y = y;
}
PositionedRectangle.prototype = new Rectangle();

//Rectangleオブジェクトのwidth/heightプロパティは継承したくないので、削除
delete.PositionedRectangle.prototype.width;
delete.PositionedRectangle.prototype.height;

//PositionedRectangleオブジェクトはRectangleコンストラクタを参照しているので、 
//PositionedRectangleコンストラクタを参照するようにconstructorプロパティを変更
PositionedRectangle.prototype.constructor = PositionedRectangle;

//プロトタイプオブジェクトにインスタンスメソッドを追加
PositionedRectangle.prototype.contains = function(x, y) {
 return (x > this.x && x < this.x + this.width && y > this.y && y < this.ty + this.height);
}

var r = new PositionedRectangle(2,2,2,2);
print(r.contains(3,3)); //インスタンスメソッドを呼び出す
print(r.area()); //継承したインスタンスメソッドを呼び出す
print(r.x + ", " + r.y + " , " + r.width + ", "+ r.hegith);

コンストラクタチェーン

//スーパークラスのコン素トラクタの参照を保存する
PositionedRectangle.prototype.superclass = Rectangle;
//1レベルのサブクラスしかない場合は、サブクラスのプロトタイプオブジェクトに
//superclassという名のプロパティを追加すればよい
// =>superclassプロパティは継承階層中で一度しか使えない
//call()やapply()を使う必要はない
function PositionedRectangle(x,y,w,h){
 this.superclass(w,h);
 this.x = w;
 this.y - y;
} 

オーバーライドされたメソッドを呼び出す

//元
Rectangle.prototype.toString = function() {
 return "["+this.wdith+","+this.height+"]";
}
//拡張その1
PositionedRectangle.prototype.toString = function () {
 return "("+this.x+","+this.y+")"+ //このクラスのフィールド
          Rectangle.prototype.toString.apply(this); //スーパークラスとチェーン
}
//拡張その2(superclassプロパティを追加していた場合(Rectangleを明示的に記述しなくてもよい)
PositionedRectangle.prototype.toString = function () {
 return "("+this.x+","+this.y+")"+ //このクラスのフィールド
          this.superclass.prototype.toString.apply(this); //スーパークラスとチェーン
}

継承以外でクラス拡張する場合は、元クラスの全メソッドを別クラスのプロトタイプオブジェクトにcopyする事で使う事が出来る。
他のクラスから利用されるメソッドを定義するクラスの事をミックスイン(mixin)クラスと言うらしい…

オプジェクトクラスの判定

任意の型の判定について valueof演算子の問題点は valudof null -> object/ valueof 関数(オブジェクトなのに) -> functionとなる

instanceof

関数ではくオブジェクトだったらinstanceof演算子がよいらしい
未知のobjectには使えない ->Object.toString()

instanceof f == "function" // true
x instanceof Array // true
f instanceof Function // true
f instanceof Object // true

Object.toString()で型判定

Object.toString()は[object class]という形で返してくれる [object class->内部クラスの文字列=オブジェクトのコンストラクタ関数の名前]
例: DataオブジェクトだとDate
ユーザーが定義したクラスのオブジェクトはObjectという文字列になるので、調査対象のオブジェクトを引数にしてapply()を使って呼び出す

duck typing

あるオブジェクトがクラスXで定義されるプロパティを持てば、たとえX()コンストラクタ関数で生成されたものではなくてもそのオブジェクトをクラスXのインスタンスとして扱う事が出来る

モジュールと名前空間

生成

ルール

  • 名前が衝突しないように名前空間を使う
  • global変数を定義しない ->モジュール用に特別に生成した名前空間内にモジュール用のメソッドやプロパティをすべて定義する事
  • モジュールがグローバルな名前空間にシンボルと追加する場合は、どのシンボルを追加するのかをドキュメントに明記する
    • シンボル名とモジュールのファイル名に明確な関係を持たせる

Webブラウザ

  • HTMLドキュメントに対応する->documentオブジェクト
  • ドキュメントを表示するウィンドウ(フレーム)に対応する->Windowオブジェクト ->グローバルオブジェクトの役割になる

windowオブジェクト: web ブラウザによって表示されるウィンドウ、またはウィンドウ内の1つのフレームを表す

クライアントサイドオブジェクトの階層構造とDOMレベル0

Documentオブジェクト以下をDOMと呼ぶ

現在のウィンドウ

  • self/window/parent/topなどのさまざまなWindowオブジェクト
  • navigator/Navigatorオブジェクト
  • frames[]/Windowオブジェクトの配列
  • location/Locationオブジェクト
  • history/Historyオブジェクト
  • document/Documentオブジェクト
    • forms[]/Formオブジェクトの配列
      • elements[]/HTMLフォーム要素 オブジェクトの配列: Input/Select/Textarea
      • >options[]/Optionオブジェクトの配列
      • anchros[]/Anchorオブジェクトの配列
      • links[]/Linkオブジェクトの配列
      • images[]/Imageオブジェクトの配列
      • applets[]/亜アップレットの配列
  • screen/Screenオブジェクト

HTMLドキュメントへのJavaScriptコードの埋め込み

  • <script></script>タグの間に記述する
  • <script>タグ、src属性またはarchive属性に指定した外部ファイルから読み込む
  • イベンドハンドラとしてonclickなどHTML属性の値として記述する
  • JavaScriptファイルの拡張子は.js
  • すべてのスクリプトがJavaScriptで記述されている場合はHTMLドキュメント内に<head>部分に
    <meta http-equiv="Content-Script-Type" content="text/JavaSript">
    と書ける
  • text/JavaScriptJavaScriptのMIMEタイプ

<script>タグ

HTMLなどの場合

<script>
 //script
</script>

XHTMLの場合

<script><![CDATA[//script...]]></script>

scriptタグは何個でも書いてよい、現れた順に実行される

イベントハンドラ

  • onclick
    このハンドラは<a></areaタグを含め、ボタンタイプのフォーム要素をサポートする
  • onmousedown/onmouseup
    onclickとほぼ同じ。
  • onmouseover/onmouseout
    マウスカーソルがある要素が移動した時、要素の上から離れた時
  • onchange
    このハンドラは<input><select><textarea>要素でサポートされる。要素内に表示している値をユーザーが変更し、タグをキーなどを津かって要素からフォーカスを動かした時に呼び出される
  • onload
    このハンドラは<body>タグ中のみ。

実行方法

  1. <script>タグの中にある物を順番に実行する
  2. onloadイベントを生成し、windowオブジェクトのonloadイベントハンドラとして登録されたJavaScriptコードを実行する(onloadハンドラはドキュメントの解析が完了した後で呼び出されるので、onloadでdocument.write()を呼び出してはいけない)
  3. スクリプトされたものが非同期で稼働
  4. ユーザーがページから移動しようとする時にブラウザからonunloadイベントハンドラ呼び出される

セキュリティ

クライアントサイドJavaScriptではクライアント側のコンピューター上のファイルやディレクトリに対して、読みだし、書き込み、作成、削除、表示などが出来ない

ブラウザウィンドウの制御

タイマー

グローバル関数

  • setTimeout() ->関数と時間(ミリ単位)を指定すると、指定された時間が経過すると指定された関数が実行される
  • clearTimeout()
  • setInterval() ->関数と時間を指定すると、指定した時間が経過すると関数が何度も繰り返し実行される
  • clearInterval()

Windowオブジェクトとは関係ないが、windowsオブジェクトがクライアントサイドでのグローバルオブジェクトになるため、これらの関数がメソッドになる

URL解析

Locationオブジェクトのhrefプロパティには完全なURLが文字列として格納される。 LocationオブジェクトのtoString()はhrefを返すので、location.hrefでもlocationでもよい

Locationオブジェクト

  • href
  • protocol
  • host
  • pathname
  • search

Navigatorオブジェクト

ブラウザーのバージョンやブラウザで表示可能なデータ形式などの情報が格納される。windowオブジェクトのnavigatorプロパティで参照出来る

  1. appName
    Webブラウザの名前
  2. appVersion
    ブラウザのバージョン/ブラウザ内部で管理している番号
  3. userAgent
    ブラウザがHTTPのUSER-AGENTヘッダで送る文字列。appName/appVersionの両方の情報が含まれるのが普通。
  4. appCodeName?
    ブラウザのコード名
  5. platform
    ブラウザが実行されるハードウェア情報
<script language="JavaScript">
 function browserinfo(){
  var browser = "Browser info \n";
  for(var i in navigator){
   browser += i + ":" + navigator[i] + "<br />";
  }
 document.write(browser);
 }
</script>
<script language="JavaScript">
browserinfo(){
</script>

ウィンドウのオープン制御

aに入っていた時だけ。

  • open()
    function openpage(){
    var w = window.open("http://popowa.com", "Hey!this is open up",  "width=400,height=300,status=yes,resizeable=no");
    }
    <a href="javascript:void();" onclick="openpage()">open..</a><br />
  • close()
    <a href="javascript:void();" onclick="w.close()">closed..</a>
    とか
    <a href="javascript:void();" onclick="window.close()">closed..</a>
  • moveTo()
  • resizeTo()
  • resizeBy()

キーボード系

  • focus() -> ウィンドウにキーボードフォーカスを与える
  • blur() -> キーボードフォーカスを外す
  • scrollBy() -> ウィンドウに表示されたドキュメントを指定されたピクセル数だけ上下左右に移動させる

コード

metaにあるdescription/keywordsを取得する

<script type="text/javascript">
   var nodes = document.getElementsByTagName('meta');
       for (var i = 0, I = nodes.length; i < I; i++)
           if ('keywords' == nodes[i].name) {
               alert(document.title + '\n\n' +nodes[i].content);
           }
</script>

Last-modified: 2012-03-12 (月) 17:05:28 (166d)