管理メニュー

naobe @ ウィキ

JavaScript

最終更新：

Bot(ページ名リンク)

- view
管理者のみ編集可
言語に戻る

はじめに

Netscape社が制定。IEのJScriptとの互換性に問題があり、ECMAの標準規格ECMA-262（JavaScript1.1がベース）が制定され、この規格がJavaScriptの標準規格となった。
2009年時点では、JavaScript1.5～1.7。JavaScript2.0が現在検証中。


文法

コメント

  • //コメント
  • /* コメント */

演算子

typeof演算子

オペランドに変数を用い、変数の型を表す文字を返す。"string","number","boolean","object","function","undefined"のどれかを返す。

等値演算子（==）と同値演算子(===)

==は型変換を行って、同じ値か確認する。===は型も含めて同じであるか判定する。
【例】 
var a = "1";
var b = 1;
if( a == b) {
	document.write("等値<br>");
} else {
	document.write("等値でない<br>");
}
document.write("<br>");
if( a === b) {
	document.write("同値<br>");
} else {
	document.write("同値でない<br>");
}
document.write("<br>");

正規表現

JavaScript1.2から正規表現に対応。

修飾子

g:マッチしたものを全て出力。
i:大文字と小文字を区別しない。

例

 <script>
 <!--
 var a = "That pen's price is 100$. this pen's price is 200$";
 var regx = /[0-9]+/g;
 var b = a.match(regx);
 document.write("検索対象文字列" + a + "<br>");
 document.write("正規表現" + regx + "<br>");
 document.write("マッチした文字：" + b + "<br>");
 
 //-->
 </script>

条件分岐

if



繰り返し処理

while() {}

while(条件) {
	ステートメント
}
条件が真の間、ステートメントを実行する。 

do {
	ステートメント
} while(条件);
条件が真の間、ステートメントを実行する。最初のステートメントは無条件で実行する。


for in

 for(プロパティ in オブジェクト)
 {
 
 }

オブジェクトのプロパティ名全てに対して処理する。
【例1】 
 for(var property in navigator)
 {
document.write(navigator[property]);
document.write("<br>");
 }

関数

機能をモジュール化して、共通化する。資源の節約、バグの低減に有効。

書式

 function 関数名(引数) {
   処理
   [return 式]
 }

関数リテラル

関数を変数（オブジェクト）に代入して使う。
【例】 
 var func = function(x,y) {
   return x * y;
 }
 func(10, 20);

変数

関数の外部で定義した変数は関数内で使える(グローバル。C言語と同じ)。
【例】 
var aaa = "aaa";


function func(x,y) {
	return aaa;
}

window.self

自身のwindowオブジェクト

window.opener

マルチウィンドウの親

windo.parent

フレーム分割の１つ親

with文

共通するオブジェクトの記述を省略するために使う。

書式

 with(オブジェクト) {

 }

例

 with(document) {
   write("aaa");
   write("bbb");
 }

配列

引数は文字列に変換され連想配列として作成される。

初期化

 a = [];

代入

 a[0] = 1;
 a[1] = 2;

削除

 delete a[0]
a[0]がundefinedになり、a[1]は残る。

先頭の抽出

 b = a.shift()
aの先頭は削除。

最後の抽出

 b = a.pop()
aの最後は削除。

指定位置の抽出

 b = a.slice(start, [end])
endがなければ最後まで。aは変化しない。bは配列になる。

オブジェクト

コンストラクタ関数を作成し、newして使う。メソッドは、クラス固有なのでprototypeプロパティに設定する。
【例】 
//長方形
function Rectangle(x, y){
	this.x = x;
	this.y = y;
}
Rectangle.prototype.area = function(){
	return this.x * this.y;
}

var rect = new Rectangle(10, 20);

document.write("x：" + rect.x + "<br>");
document.write("y：" + rect.y + "<br>");
document.write("面積：" + rect.area() + "<br>");

クラスプロパティ

コンストラクタ関数のプロパティ。定数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。
【例】 
Number.MAX_VALUE

クラスメソッド

コンストラクタ関数の関数。汎用的な関数を表すために使う。名前空間としてクラスを使い名前衝突を防ぐ。
【例】 
Date.parse()

クラスの継承

プロトタイププロパティを利用して、継承したクラスを作成する。
【例】 
// クラスの継承
function PointedRectangle(w, h, x, y) {
	Rectangle.call(this, w, h);
	
	this.x = x;
	this.y = y;
}
// メソッドを継承させる
PointedRectangle.prototype = new Rectangle();
// プロトタイププロパティを削除
delete PointedRectangle.prototype.width;
delete PointedRectangle.prototype.height;
//　コンストラクタを元に戻す
PointedRectangle.prototype.constructor = PointedRectangle;

var prect = new PointedRectangle(20, 40, 200, 400);

連想配列

プロパティのアクセス方法には以下の２とおりの方法がある。 
obj.property = 値;
obj["property"] = 値;

2番目の方法を使うとプロパティ名を変数として与えることができるので、連想配列として使える。

WEBアプリケーション

Java Scrriptの記述

<script>タグの中に本体を記述。<script>は、何回でも、どこにでも記述可能。ただし呼び出しの前に本体を記述しなければならない。<header>タグの中に記述する場合が多い。
JavaScriptに対応していないブラウザに対処するために以下の書式を使う。 

 <script>
 <!--
 ・・・
 //-->
 </script>

イベントハンドラ

onclick

リンク、ボタンの属性。JavaScriptの関数を指定する。falseを返すと、デフォルト処理をキャンセルする（フォームのときは、送信しない。）。

onload

<body>タグに指定する。ドキュメントや画像などの外部コンテンツが完全に読み込まれたときにこのイベントハンドラが呼び出される。

右クリック禁止

 <body oncontextmenu="return false"">

外部JavaScriptファイル参照

 <script type="text/javasctipt" src="XXX.js">
 </script>

組み込みメソッド

setTimeout(実行する関数, 遅れ時間(ms))

【例】 
 ar timer = false;
 
 function foo(){
if(timer == false){
	setTimeout(function() {
		timer = true;
		foo();
		timer=false;
	}, 2000);
	return;
}
alert("hello!");
 }
 foo();

【例12】 
 var isTrx      = 0;
 var delayTime  = 5000;
 //2重押下抑止
 function check() {
   if (isTrx == 1) { return false; }
   isTrx = 1;
   setTimeout('isTrx = 0;', delayTime);
   return true;
 }



テクニック

[Enter]キーでフォームの内容が送信されるのを防ぐ記述

<form action="***" method="***" onsubmit="return false;">


オブジェクトモデル


 window
  +--document
  |     +-- anchors[]
  |     +-- applets[]
  |     +-- Area
  |     +-- forms[]
  |     |     +-- elements[]  要素は、Button,CheckBox,・・・
  |     |     +-- Button
  |     |     +-- CheckBox
  |     |     +-- FileUpload
  |     |     +-- Password
  |     |     +-- Hidden
  |     |     +-- Radio
  |     |     +-- Reset
  |     |     +-- Select
  |     |     |     +-- options[]
  |     |     |  
  |     |     +-- Submit
  |     |     +-- Text
  |     |     +-- Textarea
  |     +-- images[]
  |     +-- links[]
  +-- history
  +-- location
  +-- frames[]
  +-- navigator
  +-- screen

windowは、ブラウザウィンドウまたはフレームを表す。


フォーム

フォーム全体：forms
フォームの各要素：elements

添え字によるアクセス

document.forms[1].elements[2] ・・ ２番目のformの3番目の要素(button,password,radiobox,textareaなど )

名前によるアクセス


 <html>
 <form name="f1">
  
 
 </form>
 <form name="f2">
 
 
 </form>
 
 </html>

上記例では、document.f2

イベント

イベント 発生タイミング イベントハンドラ 対象オブジェクト
blur ユーザのフォーカスが離れたとき onBlur テキストフィールド
focus フォーカスされたとき onFocus テキストフィールド
click クリックしたとき onClick ボタン、ラジオボタン、チェックボックス、サブミットボタン、リンク、リセットボタン
change 値が変更されたとき onChange テキストフィールド
load WebページがWebブラウザにロードされたとき onLoad bodyタグ
unload 別のページに移動したとき onUnLoad bodyタグ

【例 onLoad】 
 <body onLoad="alert('ロードしました')">

【例 onUnLoad】 
 <body onUnLoad="alert('移動しました')">

動作しない！！

新たにウィンドウを開く


 window.open(URL, ターゲット, フィーチャ);

URL:ロードするサイトのURL
ターゲット:

フィーチャ

何も設定しなければ、起動もとのウィンドウと同じ。一つでも設定すれば、設定した項目のみ有効。
項目 説明
height=X ウィンドウの高さ
width=X ウィンドウの幅
left=X ウインドウの画面左からの位置
top=X ウインドウの画面トップからの位置
location URL入力用のバーを表示
menubar メニューバーを表示
resizable ウィンドウのサイズを変更可能にする
status ウィンドウ下のステータスバーを表示
scrollbars スクロールバーを表示

セキュリティ

JavaScriptでできないこと

  • クライアントのファイルに対して読み書きができない。
  • ネットワーク機能自体をサポートしない（生のTCP/IPを使えない）
  • 別ブラウザを開くのは、ボタンクリックなどのユーザ操作に対してのみ。（無制限なポップアップウィンドウ表示をなくすため）
  • クローズできるのは、自分が開いたウィンドウのみ
  • 小さなウィンドウ（100ピクセル以下）を開くことはできない。
  • スクリプトをロードしたサーバと異なるサーバからロードしたドキュメントを操作することはできない。（同一出身ポリシー）






作成例

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <title>JavaScriptテスト</title>
 <style  type="text/css">
 <!--
    h1 {font-size: 14pt};
    h2 {font-size: 12pt}
 -->
 </style>
 </head>
 <body oncontextmenu="return false" onLoad="alert('ロードしました')"　onunload="alert('ページを移動しました')">
 <h1>単純な文字出力</h1>
 <script type="text/javascript">
 <!--
 document.write("Hello [[Java]] Script.");
 //-->
 </script>
 
 <h1>外部ファイル</h1>
 <script type="text/javascript" src="aaa.js">
 </script>
 
 
 <h1>正規表現</h1>
 <h2>マッチした文字を返す</h2>
 <script>
 <!--
 var a = "That pen's price is 100$. this pen's price is 200$";
 var regx = /[0-9]+/g;
 var b = a.match(regx);
 document.write("検索対象文字列" + a + "<br>");
 document.write("正規表現" + regx + "<br>");
 document.write("マッチした文字：" + b + "<br>");
 
 //-->
 </script>
 
 <h1>繰り返し処理</h1>
 <h2>for in</h2>
 <script type="text/javascript">
 <!--
 for(i in navigator)
 {
 	document.write(navigator[i]);
 	document.write("<br>");
 }
 //-->
 </script>
 
 <h1>関数の使用</h1>
 <script type="text/javascript">
 <!--
 
 function func1(a) {
   return a*2;
 }
 
 document.write("3*2=" + func1(3) + "<br>" );
 
 //-->
 </script>
 
 <h1>with文</h1>
 <script type="text/javascript">
 <!--
 
   with(document) {
     write("aaa" + "<br>");
     write("bbb" + "<br>");
   }
 
 //-->
 </script>
 
 
 <h1>マウス右クリック無効化</h1>
 
 <script language="JavaScript">
 <!--
 function RightOff(e) {
   if (document.layers && e.which == 3){    //NNの場合
     alert("右クリックメニューは機能停止しました!");
     return false;
   }else if (document.all && event.button == 2) {     //IEの場合
     alert("右クリックメニューは機能停止しました!");
     return false;
   }
   return true;
 }
 if(document.all){  //IEの場合
   document.onmousedown = RightOff;
 }
 if(document.layers){  //NNの場合
   window.onmousedown = RightOff;
   window.captureEvents(Event.MOUSEDOWN);
 }
 // -->
 </script>
 
 firefoxでは無効。
 
 <h1>onLoad</h1>
 <p>ページを開いたときに起動。bodyタグに記述。</p>
 
 <h1>onUnLoad</h1>
 <p>別のページに移動したときに起動。bodyタグに記述。</p>
 
 <a href="http://localhost/PukiWiki/index.[[php]]">ホームに移動</a>
 
 
 <h1>onBlur/onFocus</h1>
 
 <form>
   <input type="text" onblur="alert('onblur action.')" value="">
   <input type="text" onfocus="alert('onfocus action.')" value="">
 </form>
 
 <h1>別ウィンドウを開く</h1>
 
 <h1>タイマー</h1>
 <script type="text/javascript">
 <!--
 var cnt = 0;
 var ret;
 
 function rewritePg() {
   var p = document.getElementById("p1");
   if(p == null) {
     alert("p1 null.");
   }
   if( cnt % 2 == 0 ) {
     p.innerHTML = "bbb";
 /**
     p.firstChild.data = "bbb" でも良い。  
 */
   } else {
     p.innerHTML = "aaa";
   }
   cnt++;
   ret = setTimeout("rewritePg()", 2000);
 }
 
 function stopRewrite() {
   clearTimeout(ret);
 }
 
 //-->
 </script>
 
 <p>2秒ごとにパラグラフの文字を変える。</p>
 <p id="p1">aaa</p>
 
 <input type="button" value="開始" onClick="rewritePg()" /><br>
 <input type="button" value="停止" onClick="stopRewrite()" /><br>
 
 </ body>
 </html>
「JavaScript」をウィキ内検索
人気記事ランキング
  1. RFC793
  2. pthread
  3. 性能管理
  4. SpringWEBアプリケーション適用
  5. HTTP
  6. RFC6265概要
  7. RFC2581
  8. JBoss
  9. 経済
  10. クレジットカード
もっと見る
最近更新されたページ
もっと見る
ウィキ募集バナー