LogoMark.png

JavaScript/Sample の変更点


#author("2020-06-30T16:01:48+09:00","default:inoue.ko","inoue.ko")
*JavaScript Sample
[[JavaScript]]|[[JavaScript/Syntax]]|[[JavaScript/BOM]]|[[JavaScript/DOM]]
~

***CONTENTS
#contents2_1

~

**はじめての制御体験
JavaScript によるページ内要素の制御を体験します。

HTMLはページ内に要素を記述し、CSSは当該要素の表示スタイルを定義します。しかし例えば「ボタンクリックで表示が変わる」といった、ページ要素の「動的」な変更は、HTML・CSSにはできません。そこで、JavaScript を使った「命令」の記述が必要になります。

命令というものは、一般に「誰かに対して、何らかの動作を指示する」というかたちになりますが、JavaScript も同じで、例えば「ページの中の ID = ”XXX”の部分(命令の対象)に、背景色の変更(命令の内容)を指示する」といった手続きを記述することになります。

ページ内には様々な要素(Element)がありますが、それらを制御するには、はじめに''相手を捕まえる''、つまり命令の対象を捉える必要があります。

ここでは、以下の4つの事例で、対象の捉え方と、動作指示の仕方を体験します。やたらと長い綴りでウンザリするかもしれませんが、とりあえず、これだけあれば、対象を捉えることができます。覚えて書くのではなく、コピペで貼ればいい・・と割り切りましょう。

-''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のコードを追記していきます。
~

-以下の1行を 新規のファイルとして作成し、''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]]
~

'''では、簡単な体験からはじめましょう。'''


~

***事例1|ページにアクセスする
 document.body

''ボタンをクリックすると背景色が red に変わる''という簡単な事例です。

-index.html の article の中に以下のコードを追記して下さい。
 <h2>事例1|ページにアクセスする</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ファイルに追加して試すことが可能です。'''

~

***事例2|ID要素にアクセスする
 document.getElementById( ID名 )   ← ID要素を捕まえます。

''ボタンをクリックするとID要素の背景色が yellow に変わる''という事例です。

-HTML側に以下のコードを追加して下さい。
 <h2 id="ID01">事例2|ID要素にアクセスする</h2>
 <button onClick="MyFunction02()" >Click Me!</button>

-JS側に以下のコードを追加して下さい。
 // ID要素の背景色を変える
 function MyFunction02(){
   var obj = document.getElementById('ID01');
   obj.style.backgroundColor = 'yellow';
 }

~


***事例3|CLASS要素にアクセスする
 document.getElementsByClassName( クラス名 )
getElement ではなく getElement''s'' と複数形であることに注意して下さい。

''ボタンクリックで CLASS要素の背景色が green に変わる''という事例です。

ページ内に複数存在する同一の要素すべてに何らかの処理を施す場合、要素名を単純に指定するだけでは動きません。この場合、要素の数だけ処理を繰り返す必要があり、一般に for 文を用いた繰り返し制御が必要になります。

以下の例では、すべてのリスト項目の行の背景が green になります。

-HTML側に以下のコードを追記して下さい。
 <h2>事例3|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 メソッドは、ID要素のオブジェクトを取得します。
--for( 初期条件; 繰り返し条件; ステップ ) { 処理 } は、一定回数の繰り返し処理を行う制御文です。
--lines.length は、配列 lines[ ] の要素数を意味します。
~

***事例4|HTML要素にアクセスする
 document.getElementsByTagName( タグ名 )
getElement ではなく getElement''s'' と複数形であることに注意して下さい。

''ボタンクリックで HTML要素の背景色が blue に変わる''という事例です。

p タグ部分の背景を red にするには、body の背景を赤にしたのと同じ発想で、以下のように書けるのでは?・・と思いがちですが、残念ながら、これは正常に処理されません。
 document.p.style.backgroundColor = "red";  ← これは正しく機能しません。

document.body の body はページに1つだけの特別なものですが、<p>はページ内に複数ある前提なので、簡単に相手を特定できません。ひとつづつ掌握して、指示を出す必要があります。よってClassの場合と同様、以下のように記述する必要があります。以下事例です。

-HTML側に以下のコードを追記して下さい。
 <h2>事例4|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 3つのボタンで、背景色をそれぞれ変更するには・・。シンプルに考えると、以下のように3つのボタンをつくって、それぞれに対応する3つの関数を用意すれば、各ボタンで色を変えることができます。''以下、機能することが想像できれば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';
 }
~

ただし、この例では3つの同じようなプログラムが3回も記述されていて、明らかに効率が悪い・・。そこで以下、''引数(ひきすう)を使って改善します。''

~

***事例5|引数を使う
 function 関数名( 引数 ) { 処理 }

''ひとつの関数で複数の処理に対応する''という事例です。

''引数(ひきすう)''とは、関数実行時に呼び出し側が関数に引き渡すデータです。例えば、
 背景色を変更せよ(赤色で);
のような形式で「赤色で」の部分を変数化して、その値を処理に利用してもらうようにすれば、ひとつの関数であらゆる色に対応できるようになります。

-HTML側 に以下のコードを追加して下さい。
 <h2>事例5|引数の利用</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 に変わります。このように「引数」を渡すかたちにすれば、この関数は、どのような色名にも対応できるものになります。

~

***事例6|汎用性のある関数を用意する
 function 関数名( 引数 ){ 汎用性のある処理 };

''ボタンクリックのたびにページの背景色がランダムに変わる''事例です。

この機能は「ページの背景色を変える」という親機能(メインプログラム)と、「ランダムな色情報を作成する」という子機能(サブプログラム)の2つに分解することができます。このような場合は、汎用性のある(他のプログラムでも使える)サブプログラム部分を独立させておくと、例えば「ボタンの色をランダムに変える」という仕事にも流用することができます。関数をつくる場合は''独立性を高く''(汎用性を高く)することで、以後のプログラミング作業を効率の良いものにすることができます。

-HTML側に以下のコードを追加して下さい。
 <h2>事例6|汎用性のある関数を用意する</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進6桁に満たない値に、先頭に必要数の "0" を追加しています。
--col.length は、16進文字列の文字列長を意味します。
--col = "0" + col;  は、"0" と現在の文字列col を連結したものを、新たに 文字列 col に代入するという意味です。はじめの col 文字列長が4だった場合は、i=4, i=5 と、''0''を連結する作業を2回繰り返すことになります。
--return の直前に "#" を連結しているので、最終的には以下のような文字列が生成されて、呼び出し側に戻されます。
 #F32A45, #03C024, #0005F4, #004D3B ・・・など
~

''参考:rgb(r,g,b) 型の表記を生成するパターン''
「ランダムな色をつくる」部分について、rgb(r,g,b) 型の表記を生成する事例も紹介します。こちらの方が応用が効くかもしれません。
 function RandomColor2(){ 
      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 RandomColor2(){
      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( ) と RandomColor2( ) は独立性の高い関数です。そのまま他のプログラムでも利用が可能です。

~
~

**外部変数を理解する
JSファイルの中に書かれた関数はそれぞれ独立して動くので、別の関数の中に同じ名前の「変数」が存在しても問題はありません。「変数」はそれが属する関数の中でのみ有効・・というのが原則です。

では、''異なる複数の関数で同じ変数を参照したい''場合はどうするか?この場合は、''外部変数(グローバル変数)''と呼ばれる''関数の外でつくられる変数''を利用します。
~

***事例7|外部変数を使う
 var 変数名 = 値; ( let 変数名 = 値; )

''拡大・縮小、2つのボタンで文字サイズを変更する''事例です。

文字の倍率を意味する scale という変数が外部変数で、拡大・縮小2つの関数によって値が更新されます。

-HTML側に以下のコードを追加して下さい。
 <h2>事例7|外部変数を使う</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側に外部変数と2つの関数を追記して下さい
 //外部変数の宣言・定義(以下2つの関数で共通して利用)
 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 属性を用います。
~

***事例8|ユーザー入力で色を変更する
''入力された色名を背景色に反映させる''事例を紹介します。

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 は当該オブジェクトが持つ「値」、すなわちこの事例では入力された色名の文字列を意味します。 

~

***事例9|ユーザー入力で文字列を差し替える

''入力された文字列を要素の内容に反映させる''事例です。

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側に以下のコードを追加して下さい。
 // 2つの値を掛け算するプログラム
 function Calc01() {
     var ans = document.getElementById('ANS'); // ターゲット要素
     var x = document.getElementById('X'); // 入力1
     var y = document.getElementById('Y'); // 入力2
     ans.value =Number( x.value ) * Number( y.value );
 }

-補足解説
--Number( ) は、値を「数値データ」として扱うことを強制するものです。
-+演算の役割(加算または文字列連結)に注意
上記の掛け算処理は、以下の形式でも実現します。
 ans.value = x.value * y.value; 
しかし、 乗算 [ * ]ではなく加算 [ + ] だとどうなるか・・
 ans.value = x.value + y.value;  → 54 + 72 = 5472
つまり2つの数値の和ではなく、数字が連結されて出てしまいます。
 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 s = 0;
   var xs = Number(XS.value);
   var xe = Number(XE.value);
 
   // 変数 s に順次値を足し込む
   for(var i=xs; i<=xe; i++){
     s = s + i;
   }
   ANS2.value = s;
 }

-補足解説
--for 文は { } 内の処理を繰り返します。
--この例では、i の値が xs から xe まで、1つづつ増えながら繰り返します。
--s = s + i; は、直前の s に i を加えたあと、その結果を改めて s に代入することを意味します。xs が1、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() の第3引数について
addEventListener()の第3引数は、useCaptureの設定で、イベントをどのような順序で伝達するかを指定することができます。
--true: Captureフェーズ
ルートオブジェクト(HTMLだとDocumentオブジェクト)からイベントが発生したオブジェクトに向かって子孫要素をたどっていき、順にイベントハンドラに対し処理を伝達していく。
-- false: Targetフェーズ, あるいは Bubblingフェーズ
---Targetフェーズ:イベントが発生したオブジェクト上のイベントハンドラに対し処理を伝達します。
---Bubblingフェーズ:イベントが発生したオブジェクトの直接の親要素から、その子孫(ルートオブジェクト側)に向かってたどり、順にイベントハンドラに対し処理を伝達します。
//Targetフェーズが普通の感覚なので、第3引数はほとんど 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

~
~


**補足:インタラクティブな「動き」の実現

***インタラクティブ1 [[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_BoxControl]]
マウスの位置情報を用いたインタラクティブなサンプルを紹介します。この事例では、画面上のクリックした位置にBOXが移動します。

-''index.html''
 <!DOCTYPE html>
 <html lang="ja">
 
     <head>
         <title>Basic Sample</title>
         <script type="text/javascript" src="script.js"></script>
         <link rel="stylesheet" type="text/css" href="style.css">
     </head>
 
     <body >
          <div id="container">
              <div id="box">
                  BOX
              </div>
          </div>
      </body>
 
 </html>

-''style.css''
 #container{
     position:relative;
     width:100%; height:100%;
     background-color:maroon;
 }
 
 #box {
     position:absolute;
     width:100px; height:100px;
     background-color:silver;
 }

-''script.js''
 window.onload = function(){
     var field = document.getElementById('container');
     field.addEventListener('click', FitElement, false);
 }
 
 function FitElement(event){
     var obj = document.getElementById('box');
     obj.style.top = (event.clientY - 50) + "px";
     obj.style.left = (event.clientX - 50) + "px";
 }

~

***インタラクティブ2 [[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_BoxAnimate]]
先の事例の応用で、クリックした場所へBOXがアニメーションします。まずはアニメーションする仕組みをソースコードから読み取って下さい。

-''index.html''
 事例1と同様

-''style.css''
 事例1と同様(Boxのサイズが異なるだけ)

-''script.js''
 var dx = 0;
 var dy = 0;
 var x = 100;
 var y = 100;
 
 window.onload = function(){
     var timer = setInterval(AnimateElement, 5);
     var field = document.getElementById("container");
     field.addEventListener("click", InitPosition, false);
 }
 
 function InitPosition(event){
     dx = ( event.clientX - x )/50;
     dy = ( event.clientY - y )/50;
 }
 
 function AnimateElement(){
     var obj = document.getElementById('box');
     if( x < 0 || window.innerWidth - 40  < x ) dx *= -1;
     if( y < 0 || window.innerHeight - 40 < y ) dy *= -1;
     x += dx;
     y += dy;
     obj.style.left = x + 'px';
     obj.style.top = y + 'px';
 }

-''付記:''パフォーマンスを意識したアニメーションを実装する場合は、setInterval ではなく requestAnimationFrame を利用します。
~

***インタラクティブ3 [[→DEMO>https://design.kyusan-u.ac.jp/SampleSite/JS_BoxAnimate2]]
上の事例を配列変数を使ってさらに応用します。
-<li>タグに書かれた複数の要素をアニメーションさせます。
-画面をクリックと、すべての要素が一旦その位置に初期化されます。

-''index.html''
 <!DOCTYPE html>
 <html lang="ja">
 
     <head>
         <title>Basic Sample</title>
         <script type="text/javascript" src="script.js"></script>
         <link rel="stylesheet" type="text/css" href="style.css">
     </head>
 
     <body >
          <div id="container">
               <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li>F</li>
                    <li>G</li>
                    <li>H</li>
                    <li>I</li>
                    <li>J</li>
                    <li>K</li>
               </ul>
          </div>
     </body>
 
 </html>

-''style.css''
 *{
     margin:0;
     padding:0;
 }
 
 #container{
     position:relative;
     width:100%; height:100%;
     background-color:maroon;
 }
 
 li {
     position:absolute;
     width:20px; height:20px;
     list-style-type:none;
     background-color:silver;
 }

-''script.js''
 // GLOBAL VALUE
 var dx = new Array(100);
 var dy = new Array(100);
 var x = new Array(100);
 var y = new Array(100);
 var obj;
 
 window.onload = function(){
     var timer = setInterval(AnimateElement, 10);
     var field = document.getElementById('container');
     field.addEventListener('click', InitPosition, false);
     obj = document.getElementsByTagName('li');
     // initialize
     for( i=0 ; i<obj.length ; i++){
          x[i] = 100;
          y[i] = 100;
          dx[i] = i;
          dy[i] = i;
     }
 }
 
 function InitPosition(event){
     for( i=0 ; i<obj.length ; i++){
          x[i] = event.clientX;
          y[i] = event.clientY;
          dx[i] = Math.floor ( Math.random()*21 - 10 );
          dy[i] = Math.floor ( Math.random()*21 - 10 );
     }
 }
 
 function AnimateElement(){
     for( i=0 ; i<obj.length ; i++){
          if( x[i] < 10 || window.innerWidth - 30  < x[i] ) dx[i] *= -1;
          if( y[i] < 10 || window.innerHeight - 30 < y[i] ) dy[i] *= -1;
          x[i] += dx[i];
          y[i] += dy[i];
          obj[i].style.left = x[i] + 'px';
          obj[i].style.top = y[i] + 'px';
     }
 }

-''付記:''パフォーマンスを意識したアニメーションを実装する場合は、setInterval ではなく requestAnimationFrame を利用します。
~
~



//***サンプル
//以下、上記事例の一部を含んだサンプルです。
//&ref(JavaScriptSamples.zip);
~
~