#author("2021-06-15T15:17:55+09:00;2021-06-08T15:24:18+09:00","default:inoue.ko","inoue.ko")
*JavaScript 入門サンプル
~
はじめに、''このページの内容を学習すると何ができるようになるか'' 、以下のサンプルで事前にご確認ください。
-事例1-6：https://koichi-inoue.github.io/JS_Sample_01
-事例7-12：https://koichi-inoue.github.io/JS_Sample_02
~
***CONTENTS
#contents2_1
~
**はじめての制御体験
ここでは、JavaScript によるページ内の要素の動的変更を体験します。
Webサイトにおける JavaScript の主な役割は「ボタンクリックで表示を変える」といった、ページ内の要素の「動的」な変更にあります。
ページ内には様々な要素（Element）がありますが、それらを制御するには、はじめに''対象を捕まえる''必要があります。
ここでは、以下の４つの事例で、対象の捕らえ方と、動作指示の仕方を体験します。やたらと長い綴りでウンザリするかもしれませんが、とりあえず、これだけあれば、対象を捕らえることができます。覚えて書くというより、コピペで貼ればいい・・と割り切りましょう。
-''document.body''
＞ ページ全体を命令の対象とする
-''document.getElementById( ID名 )''
＞ ID名が定義された要素を命令の対象とする
-''document.getElementsByClassName( クラス名 )''
＞ CLASS名が定義された要素を命令の対象とする
-''document.getElementsByTagName( タグ名 )''
＞ HTML要素（タグ）を命令の対象とする
~
ちなみに、IDとCLASS については、以下のことを再確認しましょう。
-ID：ページの中に唯一の存在。同じ名前が複数存在してはいけません。
--ID名は、HTMLの中では、<h1 id="PageTitle"> のように書きます。
--ID名は、CSSの中では、&color(red){''#''};PageTitle { } のように書きます。
-CLASS：ページの中に同じ名前が複数存在する場合に使います。
--CLASS名は、HTMLの中では、<p class="message"> のように書きます。
--CLASS名は、CSSの中では、&color(red){''.''};message { } のように書きます。
~
***準備
JavaScript の基礎体験をするために 簡単なHTMLページを準備します。
-デスクトップに ''SampleJS'' という名称のフォルダを作って下さい。
~
-以下のコードを ''index.html'' として SampleJS フォルダに保存して下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript Sample</title>
</head>
<body>
<header>
<h1>JavaScript Sample</h1>
</header>
<article>
ここに追加のコードを書き込んでいきます
</article>
<footer>
<p>https://www.example.com</p>
</footer>
</body>
</html>
この後、このファイルにHTMLのコードを追記していきます。
~
-以下の１行を 新規のファイルとして作成し、''script.js'' という名称で SampleJS フォルダに保存して下さい。
// JavaScript Sample
この後、このファイルにJavaScriptのコードを追記していきます。
~
-''HTMLファイルと JavaScript ファイルを関連付けする''
HTMLファイルの <head> 部分に以下一行を加えてください。これであなたの HTML は script.js ファイル内のスクリプトを参照できるようになります。
<script src="script.js"></script>
~
以上で、準備完了です。
JavaScript を正確に理解するには「文法」の知識が必要になるのですが、このページでは「まずは体験する」ということを目的に、細かい説明を省いています。このページの事例を一通り体験して後、以下のページで JavaScriptの文法 や BOM・DOM についてご確認ください。
-[[JavaScript/Syntax]]
-[[JavaScript/BOM]]
-[[JavaScript/DOM]]
~
'''では、簡単な体験からはじめましょう。'''
~
***事例１｜ページにアクセスする
document.body
''ボタンをクリックすると背景色が red に変わる''という簡単な事例です。
-index.html の article の中に以下のコードを追記して下さい。
<h2>事例１｜ページにアクセスする</h2>
<button onClick="MyFunction01()" >Click Me !</button>
-script.js の先頭に以下のコードを追記して下さい。
// body の背景色を変える
function MyFunction01() {
var obj = document.body;
obj.style.backgroundColor = 'red';
}
-補足解説（今は、ざっくり理解程度でOKです）
--onClick= は ''ボタンクリックで MyFunction01 を呼び出す''という意味です。
--function ではじまるこのようなスクリプトを「関数」といいます。
--JavaScriptでは''文末に [ ; ] をつけるのが基本ルールです''。
--var obj は、obj という名称の「変数（Variable）」の準備を意味します。
「変数」は「データを入れる器」とイメージするとよいでしょう。
--document.body は HTML文書の body オブジェクト を指します。
--obj = doc・・ の「=」は、右辺のデータを左辺に渡すことを意味します。
--style.backgroundColor は、スタイルプロパティ.背景色を指します。
-動作確認
このHTMLをブラウザで表示して、ボタンをクリックすると、bodyの背景色が赤に変わります。以下、動作の流れです。
--ボタンをクリック
--MyFunction01() が呼び出される
--変数 obj に body オブジェクトがセットされる（相手が捕まる）
--obj のスタイル.背景色 に red がセットされる
-補足解説：「関数」について
関数とは、function で始まるプログラムのことで、{ } の中に処理内容を記述したものです。詳細は後ほど[[JavaScript/Syntax]]で確認していただくととして、とりあえず、ここでの練習に必要な事項のみ、確認しておきましょう。
--関数はどこに書く？
関数は一般に JavaScript ファイル（xxxx.js）の中に書きます。ひとつのファイルに複数の関数を書くことができます。このページでは、事例ごとに新しい関数を用意していただきますが、それぞれ独立したものなので、ファイルの中に追記する際の順番は基本的には自由です。
--関数の名前の付け方は？
function の直後に書く関数の名前（MyFunction01など）は自由につけることができますが、半角の英字ではじまるもので、特殊記号やスペースの利用が不可・・というあたりはJavaScript でも同じです。もちろん、関数はユニーク（唯一）な存在であることが必要で、同名の関数が複数存在してはいけません。
一般に「動詞＋目的語」のパターンでネーミングします。以下例
色を変える ＞ ChangeColor
~
'''以下、続けて事例を追加しますが、ファイルを新規につくる必要はありません。既存の HTMLとJSファイルに追加して試すことが可能です。'''
~
***事例２｜ID要素にアクセスする
document.getElementById( ID名 ) ← ID要素を捕まえます。
''ボタンをクリックするとID要素の背景色が yellow に変わる''という事例です。
-HTML側に以下のコードを追加して下さい。
<h2 id="ID01">事例２｜ID要素にアクセスする</h2>
<button onClick="MyFunction02()" >Click Me!</button>
-JS側に以下のコードを追加して下さい。
// ID要素の背景色を変える
function MyFunction02(){
var obj = document.getElementById('ID01');
obj.style.backgroundColor = 'yellow';
}
~
***事例３｜CLASS要素にアクセスする
document.getElementsByClassName( クラス名 )
getElement ではなく getElement''s'' と複数形であることに注意して下さい。
''ボタンクリックで CLASS要素の背景色が green に変わる''という事例です。
ページ内に複数存在する同一の要素すべてに何らかの処理を施す場合、要素名を単純に指定するだけでは動きません。この場合、要素の数だけ処理を繰り返す必要があり、一般に for 文を用いた繰り返し制御が必要になります。
以下の例では、すべてのリスト項目の行の背景が green になります。
-HTML側に以下のコードを追記して下さい。
<h2>事例３｜CLASS要素にアクセスする</h2>
<button onClick="MyFunction03()" >Click Me !</button>
<ul>
<li class="Class01">A</li>
<li>B</li>
<li class="Class01">C</li>
<li>D</li>
<li class="Class01">E</li>
<li>F</li>
<li class="Class01">G</li>
</ul>
複数の li 要素に class="Class01" が追記されていることが重要です。
-JS側に以下のコードを追記して下さい。
// CLASS要素の背景色を変える
function MyFunction03(){
// Class01の把握（情報が line[0], line[1] ,line[2]・・に一括で入る）
var lines = document.getElementsByClassName('Class01');
// i 番目の pタグ部分の背景を green に
for( var i=0; i<lines.length; i++ ){
lines[i].style.backgroundColor = 'green';
}
}
-補足解説
--document.getElement''s''ByClassName メソッドは、クラス要素のオブジェクトを取得します。
--for( 初期条件; 繰り返し条件; ステップ ) { 処理 } は、一定回数の繰り返し処理を行う制御文です。
--lines.length は、配列 lines[ ] の要素数を意味します。
~
***事例４｜HTML要素にアクセスする
document.getElementsByTagName( タグ名 )
getElement ではなく getElement''s'' と複数形であることに注意して下さい。
''ボタンクリックで HTML要素の背景色が blue に変わる''という事例です。
p タグ部分の背景を red にするには、body の背景を赤にしたのと同じ発想で、以下のように書けるのでは？・・と思いがちですが、残念ながら、これは正常に処理されません。
document.p.style.backgroundColor = "red"; ← これは正しく機能しません。
document.body の body はページに１つだけの特別なものですが、＜p＞はページ内に複数ある前提なので、簡単に相手を特定できません。ひとつづつ掌握して、指示を出す必要があります。よってClassの場合と同様、以下のように記述する必要があります。以下事例です。
-HTML側に以下のコードを追記して下さい。
<h2>事例４｜HTML要素にアクセスする</h2>
<button onClick="MyFunction04()" >Click Me !</button>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</p>
<p>
Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book.
</p>
-JS側に以下のコードを追記して下さい。
// HTML要素の背景色を変える
function MyFunction04() {
// pタグの把握（複数の情報が obj[0], obj[1] ,obj[2]・・に一括で入る）
var obj = document.getElementsByTagName("p");
// pタグの存在する数だけ処理をくりかえす
for( var i=0; i<obj.length; i++ ) {
// i 番目の pタグ部分の背景を blue に
obj[ i ].style.backgroundColor = "blue";
}
}
~
''参考：querySelector の利用''
document.querySelector（単品セレクト） や document.querySelectorAll（複数セレクト） によって、要素を取得する方法もあります。querySelector では、セレクタ部分が、クラス名だけでなく、一般のHTML要素名や、子孫セレクタでも使える点で万能ツールと言えます。
~
~
**関数を効率的に作る
例えば R,G,B ３つのボタンで、背景色をそれぞれ変更するには・・。シンプルに考えると、以下のように３つのボタンをつくって、それぞれに対応する３つの関数を用意すれば、各ボタンで色を変えることができます。''以下、機能することが想像できればOKです。実践する必要はありません。''
-HTML側
<ul>
<li><button onClick="MyFunctionR()">RED</button></li>
<li><button onClick="MyFunctionG()">GREEN</button></li>
<li><button onClick="MyFunctionB()">BLUE</button></li>
</ul>
-JS側
function MyFunctionR(){
var obj = document.body;
obj.style.backgroundColor = 'red';
}
function MyFunctionG(){
var obj = document.body;
obj.style.backgroundColor = 'green';
}
function MyFunctionB(){
var obj = document.body;
obj.style.backgroundColor = 'blue';
}
~
ただし、この例では３つの同じようなプログラムが３回も記述されていて、明らかに効率が悪い・・。そこで以下、''引数（ひきすう）を使って改善します。''
~
***事例５｜引数を使う
function 関数名( 引数 ) { 処理 }
''ひとつの関数で複数の処理に対応する''という事例です。
''引数（ひきすう）''とは、関数実行時に呼び出し側が関数に引き渡すデータです。例えば、
背景色を変更せよ（赤色で）;
のような形式で「赤色で」の部分を変数化して、その値を処理に利用してもらうようにすれば、ひとつの関数であらゆる色に対応できるようになります。
-HTML側 に以下のコードを追加して下さい。
<h2>事例５｜引数の利用</h2>
<ul>
<li><button onClick="MyFunction05('red')">RED</button></li>
<li><button onClick="MyFunction05('green')">GREEN</button></li>
<li><button onClick="MyFunction05('blue')">BLUE</button></li>
</ul>
-JS側 に以下のコードを追加して下さい。
// 引数を用いた背景色の変更
function MyFunction05( col ){
var obj = document.body;
obj.style.backgroundColor = col;
}
例えば最初のボタンがクリックされると、関数 MyFunction05() は、'red' という文字列を引数 col に受け取ります。その結果、背景色が red に変わります。このように「引数」を渡すかたちにすれば、この関数は、どのような色名にも対応できるものになります。
~
***事例６｜汎用性のある関数を用意する
function 関数名( 引数 ){ 汎用性のある処理 };
''ボタンクリックのたびにページの背景色がランダムに変わる''事例です。
この機能は「ページの背景色を変える」という親機能（メインプログラム）と、「ランダムな色情報を作成する」という子機能（サブプログラム）の２つに分解することができます。このような場合は、汎用性のある（他のプログラムでも使える）サブプログラム部分を独立させておくと、例えば「ボタンの色をランダムに変える」という仕事にも流用することができます。関数をつくる場合は''独立性を高く''（汎用性を高く）することで、以後のプログラミング作業を効率の良いものにすることができます。
-HTML側に以下のコードを追加して下さい。
<h2>事例６｜汎用性のある関数を用意する</h2>
<button onClick="MyFunction06()" >Click Me!</button>
-JS側に以下のコードを追加して下さい。
//ランダムな16進6桁のカラーコードを生成（汎用性のある関数）
function randomColor(){
var col = Math.floor( Math.random() * 0xFFFFFF ).toString(16);
for( var i = col.length; i<6; i++ ) { col = '0' + col; }
return '#' + col;
}
// 背景色の変更
function MyFunction06( ){
var obj = document.body;
obj.style.backgroundColor = randomColor();
}
-補足解説
--Math.floor() メソッドは、引数の値以下となる最大の整数を返します。要するに、小数点以下を切り捨てて整数化する・・という意味です。
--Math.random() メソッドは、0.0 - 1.0 の範囲の乱数を発生させます。
--0xFFFFFF を乗算しているのは、最大値1.0 の乱数に色値の最大 FFFFFF を掛け算して、0からFFFFFFの範囲の乱数を得るのが目的です。
--.toString(16) は得られた 10進数を16進文字列に変換するメソッドです。
--この for文では、カラーコードの文字列を6桁にするため、計算上16進６桁に満たない値に、先頭に必要数の "0" を追加しています。
--col.length は、16進文字列の文字列長を意味します。
--col = "0" + col; は、"0" と現在の文字列col を連結したものを、新たに 文字列 col に代入するという意味です。はじめの col 文字列長が４だった場合は、i=4, i=5 と、''0''を連結する作業を２回繰り返すことになります。
--return の直前に "#" を連結しているので、最終的には以下のような文字列が生成されて、呼び出し側に戻されます。
#F32A45, #03C024, #0005F4, #004D3B ・・・など
~
''参考：rgb(r,g,b) 型の表記を生成するパターン''
「ランダムな色をつくる」部分について、rgb(r,g,b) 型の表記を生成する事例も紹介します。こちらの方が応用が効くかもしれません。
function randomColorRGB(){
var r = Math.floor( 256*Math.random() );
var g = Math.floor( 256*Math.random() );
var b = Math.floor( 256*Math.random() );
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
ちなみに以下のようにするとRGB の値にそれぞれウエイトを与えることができます。以下の数値設定では、シアン系の明るい色の範囲が出ます。
function randomColorRGB(){
var r = Math.floor( 16*Math.random() + 128 );
var g = Math.floor( 128*Math.random() + 128 );
var b = Math.floor( 128*Math.random() + 128 );
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
以上、上記で紹介した randomColor( ) と randomColorRGB( ) は独立性の高い関数です。そのまま他のプログラムでも利用が可能です。
~
~
**外部変数を理解する
JSファイルの中に書かれた関数はそれぞれ独立して動くので、別の関数の中に同じ名前の「変数」が存在しても問題はありません。「変数」はそれが属する関数の中でのみ有効・・というのが原則です。
では、''異なる複数の関数で同じ変数を参照したい''場合はどうするか？この場合は、''外部変数（グローバル変数）''と呼ばれる''関数の外でつくられる変数''を利用します。
~
***事例７｜外部変数を使う
var 変数名 = 値; （ let 変数名 = 値; ）
''拡大・縮小、２つのボタンで文字サイズを変更する''事例です。
文字の倍率を意味する scale という変数が外部変数で、拡大・縮小２つの関数によって値が更新されます。
-HTML側に以下のコードを追加して下さい。
<h2>事例７｜外部変数を使う</h2>
<!-- 拡大用と縮小用のボタンを追加 -->
<input type="button" value="LARGE" onClick="enlarge();">
<input type="button" value="SMALL" onClick="reduce();">
<!-- 拡大・縮小のターゲット要素に id="ID07" を定義 -->
<p id="ID07">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it
to make a type specimen book.
</p>
-JS側に外部変数と２つの関数を追記して下さい
//外部変数の宣言・定義（以下２つの関数で共通して利用）
var scale = 100;
// 文字を拡大する関数
function enlarge(){
scale *= 1.25; // scale = scale * 1.25 と同義（現在のscaleを1.25倍）
var obj = document.getElementById('ID07');
obj.style.fontSize = scale + '%';
}
//文字を縮小する関数
function reduce(){
scale /= 1.25; // 現在のscaleを1.25で割る
var obj = document.getElementById('ID07');
obj.style.fontSize = scale + '%';
}
~
~
**ユーザー入力を利用する
ユーザー入力には input タグ の value 属性を用います。
~
***事例８｜ユーザー入力で色を変更する
''入力された色名を背景色に反映させる''事例を紹介します。
style プロパティを利用すると、当該要素の様々なCSSプロパティを変更することができます。以下の例では、テキスト領域にアクセスして、ユーザーが入力した色名をターゲット要素の背景色に反映させています。
-HTML側に以下のコードを追加して下さい。
<h2 id="ID08">ユーザー入力で背景色を変更</h2>
<form onsubmit="return false;">
<input id="COL" type="text" placeholder="Color Name">
<input type="button" onClick="ChangeBGColor()" value="OK">
</form>
-JS側に以下のコードを追加して下さい。
// ユーザー入力でターゲット要素の背景色を変更
function ChangeBGColor() {
var obj = document.getElementById('ID08'); // ターゲット要素
var col = document.getElementById('COL'); // 入力
obj.style.backgroundColor = col.value;
}
-''補足解説''
--input type = "text"・・ とすることで、テキスト入力が可能になります。
--placeholder は、テキスト入力エリアに初期表示される文字列です。
--col.value の value は当該オブジェクトが持つ「値」、すなわちこの事例では入力された色名の文字列を意味します。
~
***事例９｜ユーザー入力で文字列を差し替える
''入力された文字列を要素の内容に反映させる''事例です。
innner.HTML プロパティーを利用すると、ユーザーが入力した文字列やHTMLコードを、現状のHTMLに動的に反映させるることがことができます。
-HTML側に以下のコードを追加して下さい。
<h2 id="ID09">ユーザー入力で文字列を変更</h2>
<form onsubmit="return false;">
<input id="NAME" type="text" placeholder="Your Name">
<input type="button" onClick="ChangeContent()" value="OK">
</form>
-JS側に以下のコードを追加して下さい。
// ユーザー入力でターゲット要素の文字列を変更
function ChangeContent(){
var m = document.getElementById('ID09'); // ターゲット要素
var n = document.getElementById('NAME'); // 入力
var res = 'こんにちは <b>' + n.value + '</b> さん';
m.innerHTML = res;
}
-補足解説
--onsubmit="return false;" は、ページをリロードさせないための記述です。
--innerHTML プロパティは、当該要素の内部の記述を意味します。シンプルなテキストのみならず、HTMLタグを含んだコードの挿入も可能です。
''付記''
ユーザーが入力した文字列を innerHTMLを使用して反映するのはセキュリティリスクを伴うので注意が必要です。
~
***事例10｜ユーザー入力で計算させる
XとYに値を入れてCALCボタンを押すと、かけ算の結果が表示されます。
-HTML側に以下のコードを追加して下さい。
<h2>掛け算フォーム</h2>
<form>
<input id="X" type="text" size="8" placeholder="INPUT X">
<input id="Y" type="text" size="8" placeholder="INPUT Y">
<p>
<input id="ANS" type="text" size="12" placeholder="RESULT">
<button type="button" onClick="Calc01()">乗算</button>
</p>
</form>
-JS側に以下のコードを追加して下さい。
// ２つの値を掛け算するプログラム
function Calc01() {
var ans = document.getElementById('ANS'); // ターゲット要素
var x = document.getElementById('X'); // 入力１
var y = document.getElementById('Y'); // 入力２
ans.value =Number( x.value ) * Number( y.value );
}
-補足解説
--Number( ) は、値を「数値データ」として扱うことを強制するものです。
-＋演算の役割（加算または文字列連結）に注意
上記の掛け算処理は、以下の形式でも実現します。
ans.value = x.value * y.value;
しかし、 乗算 [ * ]ではなく加算 [ + ] だとどうなるか・・
ans.value = x.value + y.value; → 54 + 72 = 5472
つまり２つの数値の和ではなく、数字が連結されて出てしまいます。
JavaScriptは、変数の型（数値か文字列か）の区別があいまいなので、x.value というのは、状況によって扱いが変わります。+ 記号は「文字列の連結」も意味するので、この場合は、入力されたものが 文字列とみなされて、連結処理が行われてしまうのです。
したがって、数値の和として処理したい場合は、それを数値として扱うよう、指示することが必要で、結果、Number( ) を使って数値扱いを強制するのが賢明です。
ans.value = Number(x.value) + Number(y.value);
~
***事例11｜計算処理の応用 for文を使った合計処理
''整数 xs から xe までの総和を求める''プログラムの事例です。
例えば 1 から 10 までの総和（ 1 + 2 + 3 +・・・+ 10 ）は 55
例えば 10 から 100 までの総和（10 + 11+ 12 +・・・+ 100 ）は 5005
-HTML側に以下のコードを追加して下さい。
<h2>総和を求める</h2>
<form>
最小値: <input id="XS" type="text"><br>
最大値: <input id="XE" type="text"><br>
<br>
総和 = <input id="ANS2" type="text">
<button type="button" onClick="Calc02()">総和</button>
</form>
-JS側に以下のコードを追加して下さい。
// 総和を求めるプログラム
function Calc02() {
var ans = document.getElementById('ANS2'); // ターゲット要素
var xs = document.getElementById('XS'); // 入力１
var xe = document.getElementById('XE'); // 入力２
// 変数 s に順次値を足し込む
var s = 0;
for(var i=Number(xs.value); i<=Number(xe.value); i++){
s = s + i;
}
ans.value = s;
}
-補足解説
--for 文は { } 内の処理を繰り返します。
--この例では、i の値が xs から xe まで、１つづつ増えながら繰り返します。
--s = s + i; は、直前の s に i を加えたあと、その結果を改めて s に代入することを意味します。xs が１、xe が 10 とすると、最初は 0 + 1、次は 1 + 2、次は 3 + 3・・となって、結果として 1 + 2 + 3 +・・+10 が s に得られることになります。
~
~
**JavaScript を HTML から完全に独立させる
ここまで、HTMLのタグ内に onClick() という記載をしてきましたが、これはJavaScript が HTML文書の中に混入している状態で、気持ち悪いです。
そこで、HTMLタグ内には一切スクリプトは書かない・・という''こだわり''をもって書き直してみましょう。''イベントリスナーの定義'' が必要になります。
イベントリスナーとは「御用聞き」のことで（古い日本語です）、「お声がかかったら、こんな仕事をします」ということを事前に定義するものです。
~
***事例12｜イベントリスナーを使う
addEventListener( イベント名 , 関数名 , フェーズ );
''事例10 の計算をイベントリスナーを使って書き換えた''事例です。
HTMLのタグに、onClick() を書くかわりに id="ID名''。これでスッキリ。HTMLのコードの中から JavaScript がすべて無くなりました。
-HTML側に以下のコードを追加して下さい。
<h2>イベントリスナーを使う</h2>
<form>
<input id="X3" type="text" size="8" placeholder="INPUT X">
<input id="Y3" type="text" size="8" placeholder="INPUT Y">
<p>
<input id="ANS3" type="text" size="12" placeholder="RESULT">
<button id="CALC03" type="button">乗算</button>
</p>
</form>
-JS側に以下のコードを追加して下さい。
// クリックイベントに反応するイベントリスナーを定義
window.onload = function() {
var btn = document.getElementById('CALC03');
btn.addEventListener('click', Calc03, false);
}
// イベントハンドラー
function Calc03() {
var ans = document.getElementById('ANS3');
var x = document.getElementById('X3');
var y = document.getElementById('Y3');
ans.value =Number( x.value ) * Number( y.value );
}
-補足解説
--window.onload には「HTMLの読み込みがすべて終了した後に実行する処理」を記載します。DOMが未構築の段階では、要素の把握ができず関数定義が有効にならないので、このような仕組みが用意されています。
--addEventListener("click",CalcData,true); は、''click'' で関数 CalcData() を呼び出すという意味です。
-''付記：''addEventListener() の第３引数について
addEventListener()の第３引数は、useCaptureの設定で、イベントをどのような順序で伝達するかを指定することができます。
--true: Captureフェーズ
ルートオブジェクト（HTMLだとDocumentオブジェクト）からイベントが発生したオブジェクトに向かって子孫要素をたどっていき、順にイベントハンドラに対し処理を伝達していく。
-- false: Targetフェーズ, あるいは Bubblingフェーズ
---Targetフェーズ：イベントが発生したオブジェクト上のイベントハンドラに対し処理を伝達します。
---Bubblingフェーズ：イベントが発生したオブジェクトの直接の親要素から、その子孫（ルートオブジェクト側）に向かってたどり、順にイベントハンドラに対し処理を伝達します。
//Targetフェーズが普通の感覚なので、第３引数はほとんど false です。
~
~
**サンプル
***事例1-6
-DEMO：https://koichi-inoue.github.io/JS_Sample_01/
-CODE：https://github.com/koichi-inoue/JS_Sample_01
~
***事例7-12
-DEMO：https://koichi-inoue.github.io/JS_Sample_02/
-CODE：https://github.com/koichi-inoue/JS_Sample_02
~
***BOMを含めた事例
-DEMO：https://koichi-inoue.github.io/JS_Sample_03/
-CODE：https://github.com/koichi-inoue/JS_Sample_03
~
~
//***サンプル
//以下、上記事例の一部を含んだサンプルです。
//&ref(JavaScriptSamples.zip);
~
~
