JavaScript 3

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

メソッド

数値を文字列に変換[toString()]

	  time = date.getHours().toString() + "時"

文字列に対してサイズを指定[fontsize(n)]

	                  getTime().fontsize(i),

文字列に対して色を指定[fontcolor(color)]

	                  getTime().fontsize(i).fontcolor("red"),

主なHTMLで文字列の表現を指定するメソッド，その他

メソッド	内容
blink()	点滅させる
bold()	強調文字にする
fontcolor(色名)	色を指定
fontsize(n)	文字サイズ(n: 1～7)
strike()	消去線
sub()	下付き
toLowCase()	小文字にする
toUpperCase()	大文字にする
length()	文字数を返す
link(url)	urlへのリンク
replace(str1,str2	文字列中の str1をstr2に変換する

数値の操作

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

Numberオブジェクト

       p.toString(2)

pの値を2進表記の文字列に変換して返す

Numberオブジェクトのメソッド

メソッド	機能
toExponential(n)	n で指定した小数点以下の桁数で指数表示した文字列を返す
toFixed(n)	n で指定した小数点以下の桁数で固定小数点表示した文字列を返す
toPrecision(n)	n で指定した精度で表した文字列を返す
toString(n)	n で指定した基数で表した文字列を返す( n 進表記)

イベントハンドラ

ウィンドウシステムのような 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);
      }

イベント属性

イベント属性
onmousedown

onclick	マウスボタンをクリックした
ondblclick	マウスボタンをダブルクリックした
マウスボタンを押した
onmouseup	マウスボタンを離した
onmouseover	マウスカーソルが入った
onmouseout	マウスカーソルが外に出た
onmousemovet	マウスカーソルが移動した
onkeypress	キーボードのキーを押し続けている
onkeydown	キーを押した
onkeyup	キーを離した

onmousedownイベント処理の例

例２

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

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

 
      <body onmousemove="mouseEvent(event)">

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

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

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

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

フォームとイベント

フォームとイベントの例として，次のHTMLを例示する．以下では，HTMLファイル全体ではなく，HEAD部は省略して，BODY部のみを示す．

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

FORM
FORMはHTMLと利用者との対話を可能とするためのもので，テキストなどの入出力，ボタン，リスト選択などの機能を提供する．
- FORMタグ
```
        <form name="フォーム名">  ...  </form>
```
```
      <form name="myForm">
         ...
      </form>
```
- JavaScript内から「document.フォーム名」でアクセス

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部分のみを示している．

課題3

ディレクトリ ~/public_html/acss2/ 内に次のウェブページを作成しなさい．作成するページは指定された名前( ex3-1.html, ex3-2.html, ex3-3.html ) のファイルに作成すること．

ex3-1.html
マウスの右ボタンを押すとページの背景色が赤に変わり，左ボタンを押すと背景色が黄色に変わるページを作りなさい．
ex3-2.html
マウスボタンが押されてからそれが放されるまでの時間を alertダイアログに表示するページを作りなさい．
ただし，時間はミリ秒単位で表示すること．
[ヒント] ボタンが押されたときと放されたときの時間 (Dateオブジェクト)を取得すれば，その差から経過時間を求めることができる．

イベント意味

onmousedown マウスボタンが押された

onmouseup 押された状態にあったボタンが放された
ex3-3.html
フォームを利用して，入力された数式を文字列として受け取り，その計算結果を表示するページを作りなさい．

イベント	意味
onmousedown	マウスボタンが押された
onmouseup	押された状態にあったボタンが放された

アップロードの確認ページへ

学部> 学科> 研究室> 授業