見出し画像
Photo by golchiki

【JavaScript】ドキュメント関連一覧

関野泰宏

文書ドキュメント

document     文書オブジェクト

文章(ドキュメント)を扱うオブジェクトです。

例

document.write("OpenSpace")
ページにOpenSpaceの文字を出力する

document.bgColor = "red"
背景色を赤色(red)にする

docTitle = document.title
文章のタイトルを読み出す

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<p>ドキュメントオブジェクト</p>
<script language="JavaScript">
<!--
   for(i in document) {
       document.write(i + "=" + document[i] + "<br />");
   }
//-->
</script>
</body>
</html>

リンクの文字の色

alinkColor     リンクの中野文字色
linkColor      リンク文字色
vlinkColor     リンク済みの文字色

リンクの文字の色を指定します。

例

mCol = document.alinkColor
変数mColにリンク中の色コードを代入する

document.linkColor = "red"
リンク文字の色を赤色(red)にする

document.vlinkColor = "#FFFFFF"
リンク済みの文字の色を白色(#FFFFFF)にする

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<a href="https://google.com">google</a><br />
<script language="JavaScript">
<!--
   document.linkColor = "red";
   document.vlinkColor = "#808080";
   document.alinkColor = "#404040";
//-->
</script>
</body>
</html>

アンカー

anchors     アンカーオブジェクト

アンカーオブジェクト。
<a name="#～">で指定したアンカーのデータを格納していますが、実際にはアンカー数を求めることしかできません。

例

len = document.anchors.length
変数lenにアンカー数を代入する

アンカー数を求める場合に使います。
アンカーを書き換える場合はlinks配列を作成します。

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script language="JavaScript">
<!--
   for( i = 0 ; i < 5 ; i++ ) {
       str = "Number" + i;
       str = str.anchor("No" + i);
       document.write(str , "<br />");
   }
   
   function check() {
       alert("アンカー数:" + document.anchors.length);
   }
   
   function check2() {
       alert("アンカー数:" + document.anchors[0].name);
   }
//-->
</script>

<input type="button" value="アンカーチェック!" onclick="check()">
<br />
<input type="button" value="最初のアンカー名チェック!" onclick="check2()">
</body>
</html>

文字色/背景色

bgColor    背景色の参照/設定
fgColor    文字色の参照/設定

背景色、文字色を参照/設定します。読み出すこともできます。

例

mCol = document.bgColor
変数mColに背景色を代入する

document.bgColor = "blue"
背景色を青色に設定する

document.fgColor = "#FFFF00"
文字色を黄色("#FFFF00")にする。

サンプル

<html>
<head>
<title>サンプル</title>
</head>
<body>

<input type="button" value="赤色" onclick="document.bgColor='red'">
<br />
<input type="button" value="青色" onclick="document.bgColor='blue'">
<br />
<input type="button" value="黄色" onclick="document.bgColor='yellow'">


</body>
</html>


イベント設定

captureEvents      取得イベント指定
handleEvent        イベントハンドリング
releaseEvents      イベント解除

イベント処理を定義します。
captureEventは取得するイベントを指定します。
handleEventは指定したオブジェクト(リンク)に対してイベントを送りします。
releaseEventはcaptureEventsで指定しtイベントを解除します。
routeEventは発生したイベントを消失せず元の状態にします。

例

document.captureEvent(Event.CLICK)
クリックイベントを強制取得する。

window.document.links[1].handleEvent(eEvent)
2番目のリンクに対してイベンを送信する。

document.releaseEvents(Event.KEYDOWN)
キーダウンイベントを解除する。

document.routeEvent(eEvent)
イベントを元の状態にする。

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--
   function mDown(eEvent) {
   
       alert("マウスダウン");
   }
   
   function clr() {
       document.relaseEvents(Event.MOUSEDOWN);
       return false;
   }

document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = mDown;

//-->
</script>
</head>
<body>
<p>マウスボタンを押して！</p>
<input type="button" value="イベント解除" onclick="clr()">

</body>
</html>


ドキュメントオープン/クローズ

clear     ドキュメント消去
close     ドキュメントクローズ
open      ドキュメントオープン

clearはドキュメントを消去します。
必ずサブウィンドウ/フレームなどに対して行ってください。

例

mFrame.document.clear()
mFrameという名前のフレームの文書を消去する

mLayer.document.open("text/html")
mLayerという名前のレイヤーにhtml文章を出力するように設定する

mLayer.document.close()
mLayerという名前のレイヤーの出力を終了する

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

function wrt(str) {
     document.open();
     document.write(str);
     document.close();

}

//-->
</script>
</head>
<body>
<input type="text" name="data" id="data" value="ここに文字を入れて!"><br />
<input type="button" value="出力!" onclick='wrt(document.getElementById("data").value)'>

</body>
</html>


ドメイン名

domain     ドメイン名

ドメイン名を返します

例

alert(document.doman)

サンプル
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script language="JavaScript">
<!--

document.write("ドメイン名：" + document.domain);

//-->
</script>
</body>
</html>


ページの選択文字

getSelection     ページ上で選択された文字

ユーザがページ上で選択した文字を返します

例

alert(document.getSelection())
選択されている文字をアラートログインに表示する

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

   function check() {
       alert("選択した文字:" + document.getSelection());
   }
//-->
</script>
</head>
<body>
<p>ここの文字を適当に選択してしたのボタンを押してください</p>
<br />
<input type="button" value="選択文字を調べる" onclick="check()">
</body>
</html>

マウスイベント

onclick         マウスクリック
ondblclick      マウスダブルクリック
onmousedown     マウスダウン
onmouseup       マウスアップ

マウスボタンの押下状態を示すイベントです。

例

document.onclick = fClck
クリックされたfClick関数を実行

document.ondblclick = fDBLCLICK
ダブルクリックされたらfDBLCLICK関数を実行

document.onmousedown = fDOWN
ボタンが押されえたらfDOWN関数を実行する

document.onmouseup = fUP
ボタンが離されたらfUP関数を実行する

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

var n = "";
   function mCLICK(tEvent) {
       n +="|CLICK";
   }
   
   function mDBLCLICK(tEvent) {
       n += "|DOUBLECLICK";
   }
   
   function mDOWN(tEvent) {
       n += "|DOWN";
   }
   
   function mUP(tEvent) {
       n += "|UP";
   }
   document.onclick = mCLICK;
   document.ondblclick = mDBLCLICK;
   document.onmousedown = mDOWN;
   document.onmouseup = mUP;
//-->
</script>
</head>
<body>
<p>マウスボタンを押して！</p>
<br />
<a href="javascript:alert(n);n=''">Click</a>
</body>
</html>

キーイベント

onkeydown     キーダウン
onkeypress    キープレス
onkeyup       キーアップ

キーイベントです。押されたキーをチェック

例

document.onkeydown = keyDown
キーが押されたらkeyDown関数が実行する

document.onkeypress = keyPress
キーが押され続けていたらkeyPress関数を実行する

document.onkeyup = keyUP
キーが離されたらkeyUP関数を実行する

ゲームのキー入力などに使います

サンプル
<html>
<head>
<title>サンプル</title>
<script language="JavaScript">
<!--

   function keyDown(tEvent) {
       alert("キーダウン！");
   }
   
   function keyPress(tEvent) {
       alert("キープレス！");
   }
   
   function keyUp(tEvent) {
       alert("キーアップ！");
   }

document.onkeydown = keyDown;
document.onkeypress = keyPress;
document.onkeyup = keyUp;

//-->
</script>
</head>
<body>
<p>キー押して！</p>
</body>
</html>


この記事が気に入ったらサポートをしてみませんか？