ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





【Javascript】「イベント」情報を取得する方法



イベント情報は、
プログラムの関数を呼び出すきっかけ「トリガー」になることが多いので、
比較的よく使われるAPIです。






Event(イベント)関連のメソッド


主に、イベントハンドラーの中に記述し、値を参照するオブジェクト。
押されたボタンによって、条件分岐するブログラムに仕える。



Event(イベント)メソッドの一覧

イベントオブジェクト
window.eventonClick="..." などのイベントハンドラの中で参照できるイベントオブジェクト。
window.event.keyCodekeyCode は、イベントが発生した時に、キーボード上のどのキーが押されていたかを示す値(ASCIIコード)。
window.event.shiftKeyshiftKeyは、イベントが発生した時に、Shiftキーが押されていたかどうかを示す真偽値。
window.event.ctrlKeyctrlKeyは、イベントが発生した時に、Ctrlキーが押されていたかどうかを示す真偽値。
window.event.altKeyaltKey は、イベントが発生した時に、Altキーが押されていたかどうかを示す真偽値。
window.event.buttonbutton は、イベントが発生した時に、マウスのどのボタンが押されていたかを示す値。
1 は左ボタン
2 は右ボタン
4 は真中ボタン
2 つ以上のボタンが押された場合はその合計値。
window.event.screenXscreenX、screenY はスクリーン上でイベントが発生した場所
window.event.screenY screenX、screenY はスクリーン上でイベントが発生した場所
window.event.clientXclientX、clientY はクライアント領域(ウィンドウ)上の座標でイベントが発生した場所
window.event.clientYclientX、clientY はクライアント領域(ウィンドウ)上の座標でイベントが発生した場所
window.event.xx、y は配置された親要素(通常は BODY 要素)上の座標でイベントが発生した場所
window.event.yx、y は配置された親要素(通常は BODY 要素)上の座標でイベントが発生した場所
window.event.offsetXoffsetX、offsetY は、イベントが発生した場所のクリックした要素上の座標
window.event.offsetYoffsetX、offsetY は、イベントが発生した場所のクリックした要素上の座標
window.event.srcElementsrcElement は、このイベントが発生した要素を示すオブジェクト。
window.event.fromElementfromElement は、onMouseOver および onMouseOut イベントが発生した際の、マウスの移動元の要素を示すオブジェクト。
window.event.srcFilteronFilterChange イベントが発生した際の、発生元フィルタオブジェクト。
window.event.cancelBubbleこのイベントを上位の要素のイベントハンドラに渡すかどうかを示す真偽値。
window.event.returnValue = valueこのイベントハンドラの戻り値を設定。「return value;」と同等。
false を代入することは、クリック時のイベント本来の動作を抑制する。
window.event.reasonデータソースオブジェクトにおけるデータ転送の状態。
0 は成功。
1 は中断。
2 は失敗。



記述例


<input type="button" value="Click Me!!" onclick="javascript:alert(window.event.type)">



<input type="text" onkeypress="javascript:alert(window.event.keyCode)">
<input type="button" value="Click Me!!"
onclick="javascript:alert(window.event.button)">



<img src="xxx.gif" alt="xxx" onclick="javascript:alert(
'screen=' + event.screenX + ',' + event.screenY +
', client=' + event.clientX + ',' + event.clientY +
', xy=' + event.x + ',' + event.y +
', offset=' + event.offsetX + ',' + event.offsetY)">


<img src="xxx.gif" alt="xxx" onclick="javascript:alert(event.srcElement.src)">



<script type="text/javascript">
<!--
function child() {
alert("child");
event.cancelBubble = true;
}
function parent() {
alert("parent");
}
// -->
</script>
<div style="background-color:red; width:200; height:200;"
onclick="javascript:parent()">
<div style="background-color:blue; width:100; height:100;"
onclick="javascript:child()">
</div>
</div>



Back



発生したイベント情報を取得する方法


発生したイベント情報を取得する方法のメモ。
マウスをクリックしたり、動かしたり、右クリックしたりなど、
Web上で行われた動作を検知することで、
イベントに対してプログラムを記述することができる。



IE

IEの場合、引数などに何も指定しなくても「window.event」オブジェクトを参照することで、イベントにアクセスできるようになっている。


サンプルコード

window.event.プロパティ名;




Gecko系のブラウザ

ブラウザ:「FireFox」「Netscape」

イベントは、自動的に第一引数に格納されて関数に渡される。



引数がイベントのみの場合

関数の記述のときに、引数に「e」(イベント)を記述するだけ。
関数を呼び出すときには、引数を記述しなくても、「e」にイベントオブジェクトが格納されるので、関数内で「e」を参照することができる。


関数の記述
function 関数名(e){
var GetPropaty=e.プロパティ;
}


呼び出し方法
関数名(event);




イベント以外に引数を渡したい場合

イベント以外に引数を指定したい場合、関数の記述時に、下記のように複数の引数を記述する必要がある。
イベント「e」は、第一引数にする。

ポイントは、関数を呼び出すときの「引数」の指定方法。
イベントの場所には「event」と記述しなければならない。


関数の記述
function 関数名(e,変数名,変数名,・・・){
var GetPropaty=e.プロパティ;
}


呼び出し方法
関数名(event,引数,引数,・・・・);




Back



ページ読み込み完了時にJavascriptを実行させる方法


Webページを読み込んだ直後に、「Javascript」を実行させたい時のメモ。
Webページを読み込んだ直後に「Javascript」を実行させには、イベントハンドラの「onload」を利用する。
「onload」は、ページの読み込みが完了した直後に「Javascript」を実行するためのイベントハンドラ。
比較的よく利用されるイベントハンドラです。

Webページを読み込んだ直後には、取得できない値などがあるので、
最初は、「alert」関数を使用して、「onload」が機能するか確認する方が無難。



ページ読み込み時に実行するjavascriptの指定方法

  • 「onload」イベント
  • jQueryの「ready」メソッド


「onload」イベント

「onload」イベントを利用して、ページ読み込み時に、「javascript」を実行させる方法。


window.onload = function(){
// ページ読み込み時に実行したい処理
}


<body onload="javascript:関数名();">


jQueryのreadyメソッド

ライブラリとしてjQueryを使用している場合、「ready」メソッドで、ページ読み込み時に「javascript」を実行する方法がある。

$(document).ready( function(){
// ページ読み込み時に実行したい処理
});


jQueryのreadyメソッドの省略表記

$(function(){
// ページ読み込み時に実行したい処理
});


onloadイベントとjQueryのreadyメソッドの違い


ただし、onloadイベントとjQueryのreadyメソッドは
全く同じ動きをするというわけではありませんので、使用する際には注意が必要です。


処理を実行するタイミングの違い

jQueryのready()メソッド DOMツリーの構築が完了した時点で処理を実行する。
onloadイベント DOMツリーの構築の完了に加え、画像などの関連データの読み込みなど、すべてが完了した後に処理を実行する。



処理の順序の注意点

指定順序に関わらず、「jQuery」の処理が先に実行され、すべての読み込みが完了した後に、「javascript」が実行される。

下記のようにコードを記述しても、「jQuery」の処理が先に実行される。
window.onload = function(){
alert('javascript');
}

$(document).ready( function(){
alert('jQuery');
});


指定が複数ある場合の違い

「onload」イベントは最後に指定したものだけが実行される。
jQueryの「ready」メソッドは、定したもの全てが、指定順に実行される。



Back



マウスの位置を確認する方法


マウス位置に何かを表示する時などに、マウス位置を取得する時に使える方法。
「イベントオブジェクト」を利用するので、関数を呼び出す時に、引数に、イベントオブジェクトを格納する「e」「event」という引数を、最初に記述する。
そうすると、関数内で、マウスイベントの情報を取得することができる。
引数は、他の引数も渡せるので、「イベントオブジェクト」の引数を先頭にして、その後に、複数の引数を記述することも可能。


イベントオブジェクトの取得方法。


javascriptで、マウスの位置を確認するには、イベントオブジェクトを利用して確認する。

IEは、「window.event」でイベントオブジェクトを取得できる。
他のブラウザは、「関数(e){プログラム}」で、「e」引数にイベントオブジェクトが代入される。

IEと他のブラウザに対応させるために、「if (!e) e = window.event;」でイベントオブジェクトを「e」に代入させることで、IEブラウザに対応させる。


イベントのみで引数なしの関数


function 関数名(e){
if (!e) e = window.event;

var Screen_Width=e.screenX;
var Screen_Height=e.screenY;
var Browzer_Width=e.clientX;
var Browzer_Height=e.clientY;
}



イベントのみで引数なしの関数呼び出し

関数名(event);

//クリックしたときに実行される
document.onmousedown = 関数名;

//マウスを移動させると実行される
document.onmousemove = 関数名;


イベントと複数引数の関数

function 関数名(e,変数名,変数名,・・・・){
if (!e) e = window.event;

var Screen_Width=e.screenX;
var Screen_Height=e.screenY;
var Browzer_Width=e.clientX;
var Browzer_Height=e.clientY;

}


イベントと複数引数の関数の呼び出し

関数名(event,引数,引数,・・・・);

//クリックしたときに実行される
document.onmousedown = 関数名(event,引数,引数,・・・・);

//マウスを移動させると実行される
document.onmousemove = 関数名(event,引数,引数,・・・・);


イベントのプロパティ

プロパティ名説明
screenXNumberモニタのスクリーン領域の左上を原点(0)とした水平位置( x 座標)
screenYNumberモニタのスクリーン領域の左上を原点(0)とした垂直位置( y 座標)
clientXNumberブラウザのクライアント領域の左上を原点(0)とした水平位置( x 座標)
clientYNumberブラウザのクライアント領域の左上を原点(0)とした垂直位置( y 座標)
offsetXNumberイベントが発生した要素上のX座標
offsetY Numberイベントが発生した要素上のY座標



Back



スクロール位置を確認する方法


スクロール位置を確認するとは

画像などを大きくして表示させたい時などに、スクロール位置を取得して、画像表示の位置を指定する時に使われる。
使える手法なので覚えておくと便利。



サンプルコード


画面をクリックした時に、実行されるJavascriptコード。

function MouseAction(e) {

標準モード
var ScrollTop_A=document.documentElement.scrollTop;
var ScrollLeft_A=document.documentElement.scrollLeft;

互換モード
var ScrollTop_B=document.body.scrollTop;
var ScrollLeft_B=document.body.scrollLeft;


var Get_ScrollTop=document.documentElement.scrollTop;
window.document.getElementById('id名').innerHTML=Get_ScrollTop+"px";
var Get_ScrollLeft=document.documentElement.scrollLeft; window.document.getElementById('id名').innerHTML=Get_ScrollLeft+"px";

}
document.onmousedown = MouseAction;



ブラウザ対応
FireFoxdocument.documentElement
IE ver.11document.documentElement
Chromedocument.body
Safaridocument.body




Back