JavaScript
1. 変数
1.1. 宣言
var <任意の名称>;
var <任意の名称> = 0;
var <任意の名称> = “text”;
特に型を指定する必要は無い。
1.2. 型
number型、string型、boolean型、object型、undefined型、null型…
宣言後、何も値を入れないとundefined型になる。null型でないことに注意。
typeof <変数名>
で変数の型を取得できる。
2. 配列
2.1. 宣言
var <任意の名称> = [0, 1, 2, 3];
配列だということを明記せずに[ ]で囲われた値を代入すれば配列になる。配列と動的配列の区別もなさそう。
var imgArray(任意の名称) = [];
imgArray[“a”] = 0;
imgArray[“b”] = 1;
imgArray[“c”] = 2;
連想配列の宣言。
Arrayオブジェクトについて詳しくは後述する。
2.2. for in 構文
for(var v(任意の名称) in <参照するのオブジェクト名>){
}
指定したオブジェクトの持つプロパティの値をvに代入し、{ }内の処理が完了すると、vに次のプロパティの値を代入する。
全てのプロパティを参照すると繰り返しから抜け出す。
連想配列の全ての要素を参照したいときなどに使える。
3. 構文
3.1. for 文
for(var i=0; i }
3.2. while 文
var i = 0;
while(i < 10){
i++;
}
3.3. if 文
if(x > 0){
} else {
}
3.4. switch 文
switch(x){
case 0:
break;
case 1:
break;
case 2:
break;
}
4. イベントハンドラ
4.1. イベントリスナー
window.onclick = eventFunc;
function eventFunc(event){
}
もしくは
window.addEventListener('click', eventFunc, false);
function eventFunc(event){
}
の形でイベントリスナーを登録する
IE8以前のバージョンはaddEventListenerに対応していない。そこで、代わりにattachEventを使う。また、リスナー登録を解除するときにはIE8以前ではdetachEvent、それ以外ではremoveEventListenerを使う。
if(elem.addEventListener){
elem.addEventListener('click', eventFunc, false);
(elem.removeEventListener('click', eventFunc, false);)
} eles {
elem.attachEvent('click', eventFunc);
(elem.detachEvent('click', eventFunc);)
}
4.2. イベント一覧
| on〜 | addEventListener | 意味 |
|---|---|---|
| onclick | click | クリックされた |
| oncontextmenu | contextmenu | 右クリックされた |
| ondblclick | dblclick | ダブルクリックされた |
| onkeypress | keypress | キーが押して放された |
| onkeydown | keydown | キーが押し下げられた |
| onkeyup | keyup | キーが放された |
| onmousedown | mousedown | マウスボタンが押し下げられた |
| onmouseup | mouseup | マウスボタンが放された |
| onmouseover | mouseover | カーソルが領域内に入った |
| onmouseout | mouseout | カーソルが領域外に出た |
| onmousemove | mousemove | カーソルが移動した |
| onscroll | scroll | スクロールされた |
| onfocus | focus | フォーカスされた |
| onblur | blur | フォーカスを失った |
| onresize | resize | ウィンドウがリサイズされた |
| onchange | change | 変更された |
5. 関数
5.1. 宣言と利用
function <任意の名称>(<任意の名称>, <任意の名称>, …){
return 0;
}
型を明記する必要は無い。返り値がなければreturnも必要ない。
<利用する関数名>(<引数1>, <引数2>, …);
<利用する関数名>;
引数が必要ない場合は( )を書く必要も無い。
5.2. 無名関数
イベントリスナーなど一度しか行わない処理は、名前をつけない無名関数として定義することが出来る。
window.addEvent('load',
function(event){
}
, false);
ここに文章を入れてください
6. オブジェクト
6.1. 独自オブジェクト
var originalObj = {
name:'text'
num:0
};
上記のようにして、独自のオブジェクトを作成できる。
originalObj.name
originalObj.num
originalObj.func();
6.2. 無名オブジェクト
配列に入れるなどして、特定の名称以外でそのオブジェクトを指定できるときは、オブジェクト名を設定する必要はない。これを無名オブジェクトと言う。
var noNameObj = [
{name:'aaa', num:1},
{name:'bbb', num:2},
{name:'ccc', num:3}
];
(--利用方法----------)
noNameObj[0].name
noNameObj[1].num
6.3. Elements オブジェクト
getElementById()などで取得されるオブジェクト
| className | クラスの名前 |
| innerHTML | 内包するHTML。内容の書き換えなどに使う |
| insertBefore(elmA, elmB) | 子ノードelmBの直前に、新規のElementオブジェクトelmAを挿入する |
| appendChild(elmA) | 新規のElementオブジェクトelmAを子ノードの最後に追加する |
| replaceChild(elmA, elmB) | elmBをelmAに置き換える |
| removeChild(elmA) | 子ノードelmAを削除する |
6.4. document オブジェクト
ページ全体を表すオブジェクト
| write('<p>xxx</p>') | 書かれた場所に「<p>xxx</p>」と記述する |
| getElementById('xxx') | idがxxxのエレメントを取得する |
| getElementsByName('xxx') | nameがxxxのエレメントを取得し、配列に格納する |
| getElementsByClassName('xxx') | classがxxxのエレメントを取得し、配列に格納する |
| getElementsByTagName('xxx') | <xxx>のエレメントを取得し、配列に格納する |
| createElement('xxx') | <xxx>のエレメント（タグ）を生成する |
6.5. Math オブジェクト
ここに文章を入れてください
ここに文章を入れてください
6.6. Array オブジェクト
ここに文章を入れてください
ここに文章を入れてください
6.7. window オブジェクト
ここに文章を入れてください
ここに文章を入れてください
6.8. Date オブジェクト
| getFullYear() | 4桁の数値で年を返す | getMonth() | 0〜11の数値で月を返す |
| getDate() | 1〜31の数値で日にちを返す | getDay() | 0〜6の数値で曜日を返す |
| getHours() | 0〜23の数値で時間を返す | getMinutes() | 0〜59の数値で分を返す |
| getSeconds() | 0〜59の数値で秒を返す | getMilliseconds() | 0〜999の数値でミリ秒を返す |
6.9. Event オブジェクト
発生したイベントに関する情報をまとめたオブジェクト
| キーボード関連 | |||
|---|---|---|---|
| altKey | altが押されていたらtrue | ctrlKey | ctrlが押されていたらtrue |
| shiftKey | shiftが押されていたらtrue | isChar | 文字入力関連イベントならtrue |
| charCode | 押された文字キーのUnicode値 | keyCode | 文字以外のキーを含む全てのUnicodeを返す |
| マウス関連 | |||
| screenX | スクリーン上のマウスのX | screenY | スクリーン上のマウスのY |
| clientX | ブラウザの座標から相対したマウスのX | clientY | ブラウザの座標から相対したマウスのY |
| pageX | ページの座標から相対したマウスのX | pageY | ページの座標から相対したマウスのY |
| layerX | レイヤーの座標から相対したマウスのX | layerY | レイヤーの座標から相対したマウスのY |
| button | どのマウスボタンに関するものか | ||
| その他 | |||
| currentTarget | イベントが登録されてるオブジェクト | target | IE8以前ではこっちを使う |
| その他（よくわからない。。） | |||
| timeStamp | イベントが生成された時刻を返す | detail | イベントの詳細情報を返す |
| eventPhase | イベントの流のうちどの段階にあるかを返す | type | イベントの名前を返す |
| bubbles | イベントが浮上中ならtrue | canselable | イベントの規定のアクションがキャンセル可能ならtrue |
| preventDefault() | イベントの規定のアクションをキャンセルする | stopPropagation() | イベントの伝播を中止する |
参考文献
下位ページ
| aaa | bbb | |
|---|---|---|
| ccc | 111 | 222 |
| ddd | 333 | 444 |