JavaScript 3

イベントとイベントハンドラ
フォームとイベント
選択リスト(select)
主要なオブジェクト
課題3

参照

イベントハンドラ

ウィンドウシステムのような GUI(Graphical User Interface) を利用するプログラムでは，
マウスクリック，ドラッグ，キー入力などの操作の事象(イベント)を監視し，
イベントが発生すると，それに対応した処理を行う仕組みが組み込まれている．

マウスクリックなどの事象をイベントと呼び，イベント発生に対応して行う処理コードをイベントハンドラと呼ぶ．

例1

上のHTMLファイルで表示されるページ

上の例では，head部分を省略し，body部分のみを示している．
imgタグに

このイメージ内でマウスが押された場合 (onmousedown)
マウスがイメージの外へ出た場合(onmouseout)
マウスがイメージの上にきた場合(onmouseover)

に対するイベント処理を定義している．

onmousedown="clickAction(event)"
この画像がクリックされると，関数 clickAction を呼び出す

引数として，イベント情報が保持されているオブジェクト event を渡す
onmouseout="document.bgColor='white'"
マウスカーソルがこの画像の外に出ると document の背景色を白にする
onmouseover="document.bgColor='green'"
マウスカーソルがこの画像領域内に入ると document の背景色を緑にする

関数 clickAction の定義

      function clickAction(e) {
         alert("押されたボタンのコード： "+ e.button);
      }

イベント属性

例２

上のHTMLファイルで表示されるページ

上の例では，head部分を省略し，body部分のみを示している．

HTMLタグ
- <body onmousemove="mouseEvent(event)">
  このページ内でマウスを動かした場合に発生するイベントに対して，関数 mouseEvent を呼び出すことを定義している．
- <div id="labelDiv">カーソルを動かして下さい</div>
  JavaScript内より参照する目的で， divタグに識別子名を設定している．
  次の getelementById で参照
関数 mouseEvent
```
      function mouseEvent(e) {
         var label = document.getElementById("labelDiv");
         var textNode = label.childNode.item(0);
         textNode.nodeValue = "x="+e.clientX+", y="+e.clientY;
      }
```
- label = document.getElementById("labelDiv");
  getElementByIdにより，boby内のタグ
```
      <div id="labelDiv"> ～ </div>
```
  を参照している
- label = document.getElementById("labelDiv");
  変数 label に divタグ(labelDiv)のオブジェクトを格納している．
  この変数を介して，labelDivの属性にアクセスが可能となる
- textNode = label.childNodes.item(0);
  labelのchildNodes 属性より，配列で与えられるノードリストより，メソッド item(0) を介して子ノードであるテキスト領域を取得し，そのオブジェクトを変数 textNode に格納している．
- textNode.nodeValue = "x="+e.clientX+", y="+e.clientY;
  nodeValue 属性よりテキストにアクセスして，その値を変更している．
```
      <div id="labelDiv"> ～ </div>
```
  で表示されるページの内容(文字列)が変更される
- textNode.nodeValue = "x=" + e.clientX + ", y=" + e.clientY;
  e.clientX, e.clientYは発生したイベント(mouseMove)が保持するマウス位置
  
  onmousemoveイベント
  
  divタグ内のテキストの変更

同様の動作をFORM内に表示するページ：

上のHTMLファイルで表示されるページ

上の例では，head部分を省略し，body部分のみを示している．

フォームとイベント

フォーム(FORM)はWebページへのデータの入力に使用される．

FORMはHTMLと利用者との対話を可能とするためのもので，テキストなどの入出力，ボタン，リスト選択などの機能を提供する．

次はフォームの例である．

上のHTMLファイルで表示されるページ

Form
- <form name="フォーム名"> ... </form>
  FORMタグ
```
      <form name="myForm">
         ...
      </form>
```
- JavaScript内から「document.フォーム名」または、「フォーム名」でアクセス
textボックス
- name = "textBox"
  name属性をtextBoxとしている．
  JavaScriptからはこの名前でアクセス可能
ボタン
- onclick="alert(myForm.texBox.value)">
  このボタンが押されたときにalertダイアログが開く．
  ダイアログ内に表示される内容は，属性値 myForm.texBox.value (myFormフォーム内のtextBoxの持つvalue属性の値)

次はフォームとイベントの例である． BODY部のみを示す．

上のHTMLファイルで表示されるページ

FORM

textボックス

      <input type="text" name="inch" size="10">

ボタン

      <input type="button" name="calcButton" value="変換"
             oncllick="calc(this.form)">

このボタンが押されたときに関数 calc(this.form) が呼び出される．

ラジオボタン
- 排他的なボタン
- ボタンが選択されているかは，「document.myForm.color[n].checked」により調べることができる． (n:番号)

変更ボタンが押されたときの動作

   <input type="button" name="colorButton" value="変更" onclick="changeColor()">

   function changeColor() {
      var n;
      var colors = document.myForm.color;     //  ラジオボタン color (配列)
      for(n=0; n<colors.length; n++) {
         if(colors[n].checked) {              //  このボタンがチェックされているか?
            if(confirm("背景色を"+colors[n].value+"にしますか?"))
               document.bgColor = colors[n].value;
            break;
         }
      }
   }

変換ボタンが押されたときの動作
- onclick="calc(this.form)"により，ボタンが押されると関数 calc が呼び出される．
- theForm.inch.value = ...により， form内のinchテキストエリアの値が更新される．

チェックボックス

複数選択可能

   <form name="question1">
      好きなたべものを選んで下さい(複数選択可)<br>
      <input name="f" type="checkbox" value="ラーメン">ラーメン<br>
      <input name="f" type="checkbox" value="そば">そば<br>
      <input name="f" type="checkbox" value="うどん">うどん<br>
      <input name="f" type="checkbox" value="カレー">カレー<br>
      <input name="f" type="checkbox" value="牛丼">牛丼<br>
      <input name="f" type="checkbox" value="ハンバーガー">ハンバーガー<br>
   </form>

上のHTMLファイルで表示されるページ

イベント

イベント属性	イベントの発生	オブジェクト
onClick	マウスクリック
onDblClick	マウスをダブルクリック
onMouseDown	マウスボタンが押された
onMouseUp	マウスボタンが離された
onMouseOver	マウスカーソルが入った
onMouseOut	マウスカーソルが出た
onMouseMove	マウスカーソルが動いた
onKeyDown	キーが押された
onKeyUp	キーが離された
onKeyPress	キーが押された
onLoad	ページがロードされた	<body>
onUnLoad	他のページに切り替わる	<dody>
onReset	リセットボタンが押された	<form>
onSubmit	サブミットボタンが押された	<form>
onChange	値が変化した	<input>, <select>, <textarea>
onSelect	テキストが選択された	<input>, <textarea>
onFocus	選択された	<a>, <area> 他
onBlur	Focusが解除された	<a>, <area> 他

shiftキーやcontrolキーが押された場合，onKeypDownイベントは発生するが， onKeyPressイベントは発生しない．

上のリストでは<body>～</body>のみを示す

上のHTMLファイルで表示されるページ

主要なオブジェクト

いくつかのオブジェクトについて，メソッドと属性の抜粋を以下に示す．

document

メソッド内容

write() HTML文章にテキストを出力する

getElementById(ID値) 指定したID値を持つ要素(Element)を返す

getElementsByTagName(タグ名) 「タグ名」に一致する要素のリスト(NodeList)を返す

createTextNode(文字列) 「文字列」を値として持つテキストノードを生成する

createElement(タグ名) 要素を生成する

メソッド	内容
write()	HTML文章にテキストを出力する
getElementById(ID値)	指定したID値を持つ要素(Element)を返す
getElementsByTagName(タグ名)	「タグ名」に一致する要素のリスト(NodeList)を返す
createTextNode(文字列)	「文字列」を値として持つテキストノードを生成する
createElement(タグ名)	要素を生成する

属性内容

title titleタグの内容(変更可能)

referre 直前のページのURL

domain サーバのドメイン名

URL このページのURL

NodeList

属性内容

length NodeListの要素数

parentNode 親ノード

childNodes 子ノードのリスト

nodeValue ノードの値

メソッド内容

item(n) n番目の要素(Node)を返す
- HTML文章内の最初のtableを取り出す
```
       var list = document.getElementsByTagName("table");
       var firstTable = list.item(0);
       
```

属性	内容
title	titleタグの内容(変更可能)
referre	直前のページのURL
domain	サーバのドメイン名
URL	このページのURL

属性	内容
length	NodeListの要素数
parentNode	親ノード
childNodes	子ノードのリスト
nodeValue	ノードの値

メソッド	内容
item(n)	n番目の要素(Node)を返す

Node

属性内容

nodeName 要素名、あるいは、属性名

nodeType node型に対応した整数値

属性	内容
nodeName	要素名、あるいは、属性名
nodeType	node型に対応した整数値

メソッド内容

appendChild(ノード) ノードを追加する

removeChild(ノード) ノードを削除する

メソッド	内容
appendChild(ノード)	ノードを追加する
removeChild(ノード)	ノードを削除する

Node型

定数値 Node型

ELEMENT_NODE 1 Element

ATTRIBUTE_NODE 2 Attr

TEXT_NODE 3 Text

CDATA_SECTION_NODE 4 CDATASection

ENTITY_REFERENCE_NODE 5 EntityReference

ENTITY_NODE 6 Entity

定数値 Node型

PROCESSING_INSTRUCTION_NODE 7 ProcessingInstruction

COMMENT_NODE 8 Comment

DOCUMEN_NODE 9 Document

DOCUMENT_TYPE_NODE 10 DocumentType

DOCUMENT_FRAGMENT_NODE 11 DocumentFragment

NOTATION_NODE 12 Notation

Element

ElementはNodeを継承しており，

    getElementsByTagName(タグ名).item(番号)

で返される Node を Element として扱うことができる．

属性内容

tagName タグ名

属性	内容
tagName	タグ名

メソッド内容

getAttribute(属性名) 指定した属性の値を返す

setAttribute(属性名, 属性値) 指定した属性の値をセットする

メソッド	内容
getAttribute(属性名)	指定した属性の値を返す
setAttribute(属性名, 属性値)	指定した属性の値をセットする

HTML文章内での div タグの属性表示と変更

<body>
   
   <div>first</div>
   
   <div align="right"  style="background-color:yellow;">second</div>
   
   <script type="text/javascript">
      var elements=document.getElementsByTagName("div");
      var n;
      alert("divの総数"+elements.length);
      for(n=0; n<elements.length; n++) {
         var element = elements.item(n);
         document.write("<p>", n, "<br>");
         document.write("タグ名 = ",element.tagName,"<br>");
         document.write("align = ", element.getAttribute("align"),"<br>");
         document.write("style = ", element.getAttribute("style"),"<br>");
         document.write("</p>");
         element.setAttribute("align","center");
      }
   </script>
</body>

上のHTMLで表示されるページ

上の例では，head部分を省略し，body部分のみを示している．