基礎プログラミング演習 第５回 関数とイベントを使ったプログラム

今日の目標 テキストボックスとボタンを使ったインタラクティブなプログラムを書け るようになる 関数とイベントを使ったプログラムを書けるようになる 関数を定義する イベントと組み合わせて関数を呼び出す document.getElementById().valueを使ってテキストボックスへの入力を受け 取るプログラムを書けるようになる BMI算出プログラムを作ろう document.getElementById().innerHTMLを使ってページを書き換えることがで きるようになる ボタンをクリックすると写真が切り替わるようにしよう

課題 1から4まであります ex05.htmlとex05.jsに全てまとめて提出してください どの課題か一目で分かるようにページを工夫すること（「課題１」など 適当な見出しタグをつける等）

イベントとは？ 先週のHello, World!のプログラムは、ブラウザがhtmlファイルを読み 込んだタイミングで実行される これに対して、マウスクリックなどをしたタイミングでプログラムを実 行する仕組みがあり、これをイベント駆動型プログラムと呼ぶ プログラムを実行するきっかけをイベントと呼ぶ 様々なイベントがある マウスクリック、ダブルクリック、マウスオーバー、テキストボックスの書き換え・・ あるイベントが発生した時に何かプログラムを実行して欲しい場合には、 HTMLのタグ内に対応するイベントハンドラを書く

イベントハンドラ 例えば、ボタンがクリックされた際にアラートを表示したい場合、以下 のようにHTMLファイルのinputタグ（ボタン）にonclickイベントハンドラ を記述する “”内には、イベントが発生した際に実行するJSプログラムを書く（”” と’’に注意せよ） <input type=“button” value=“Click” onclick=“alert(‘Hello!’);>

課題1 h1タグで適当な見出しを作り、見出しのところをマウスクリックする とHello!と表示されるようにしなさい（見出しや段落にイベントハンド ラを設定しても見た目分からないので、CSSで下線や色を変えて「こ こをクリックして」と訴えるようにして下さい） 下の参考資料を調べ、マウスを移動した時にメッセージが表示さ れたり、テキストボックスに入力した文字が変更された時にアラー トが表示されるようにしなさい http://phpjavascriptroom.com/?t=js&p=event http://akiok-jp.hatenablog.com/entry/2013/04/24/212730

関数1 HTMLファイルのイベントハンドラの部分にはJavaScriptのプログラム を書くが、長いと大変 そこで、イベントが発生した時に実行させたいプログラムの一かたま りに名前を付けて、イベントハンドラの部分にはその名前だけ書くよ うにする そのようなプログラムの一かたまりを関数と呼ぶ。名前をつけておけ ば、どこからでも呼び出して実行することができる

関数2 alert()やMath.sqrt()はJSがあらかじめ用意している関数 それらを組み合わせて独自の関数を定義することができる よく行う処理は関数として定義しておけば便利 炊飯器みたいなもん？

関数3-関数の定義- function 関数名(){ 処理・・・ } 例） //単にアラートを2つ表示するだけの関数を定義 function sayhello(){ alert(“Hello!”); alert(“Good-Bye!”);

関数4-関数の呼び出し- 定義した関数はHTMLファイルが読み込まれてもすぐには実行され ない イベントハンドラに関数名を記述しておけば、イベントが発生したタイ ミングで実行させることができる（関数を「呼び出す(call)」と言う） <input type=“button” value=“OK” onclick=“sayhello();”>

課題2 2の平方根と3の平方根の和を求め、結果をアラート表示する処理を addRt()という関数として定義しなさい。ボタンをクリックすると実行さ れるようにすること。

テキストボックスへの入力を受け取る1 2つのテキストボックスに入力された任意の数値の平方根をそれぞ れ求め、その和を表示したい テキストボックスへの入力を受け取るには、 テキストボックスを作る際、inputタグ内にid属性を書く。idは被ってはいけ ない id属性は、テキストボックスを見分けるための目印となる プログラム側で、document.getElementById(‘id名’).valueを使ってidで指定 したテキストボックスの内容を取得する （）内に指定したid名が付与されたテキストボックスを見つけ出し、そこに入力された値 を文字列として取得する

テキストボックスへの入力を受け取る2 document.getElementById().valueとは・・ getElementById(‘id名’)：指定したid名を持つタグを探し出す value：タグのvalue要素（テキストボックスなら入力蘭の文字列）

テキストボックスへの入力を受け取る3 例として、テキストボックスに入力された名前をオウム返しにアラート表示する関数 parrot()を定義し、ボタンをクリックすると実行されるようにしたいとする -HTML- <input type=“text” id=“input1”> <input type=“button” value=“オウム返しする” onclick=“parrot();”> -JS- function parrot(){ var name = document.getElementById(‘input1’).value; alert(name); }

課題3 前ページのparrot()を、「こんにちは、○○さん！」と丁寧にアラート 表示するように改良しなさい 2つのテキストボックスを作り、入力された任意の数値の平方根を それぞれ求め、それらの和をアラート表示する関数addRt2()を定 義しなさい。ボタンをクリックすると実行されるようにすること 2つのテキストボックスに入力された身長と体重からBMI指数を算 出し、「あなたのBMI値は○○です」とアラート表示する関数 calc_BMI()を定義しなさい。ボタンをクリックすると実行されるように すること。できる人は名前もテキストボックスから入力させ、「ＸＸさ んのBMI値は○○です」と表示するようにしなさい

JSによるページの変更1 表示しているWebページの内容をJSで読み取ったり、内容を変更す ることができる HTML内のどの部分を変更したいのか目印をつける。ここでは、id属性を用 いる JSプログラムで、document.getElementById(‘id名’).innerHTMLを使って該当 部分を変更する

JSによるページの変更2 document.getElementById(‘id名’).innerHTMLには、指定したidがついてる HTMLタグのタグを除いた部分が入っている -HTML- <p id=“p_1”>ああああ</p> -JS- function show_innerHTML(){ var result = document.getElementByid(‘p_1’).innerHTML; alert(result); }

JSによるページの変更3 innerHTMLの中身を書き換える -HTML- <p id=“p_1”>ああああ</p> <input type=“button” value=“change” onclick=“changeHTML();”> -JS- function changeHTML(){ document.getElementById(‘p_1’).innerHTML = “いいいい”; }

課題4 ボタンをクリックすると表示されている画像が切り替わるようにしなさい 画像ファイルを2枚用意し、HTML/jsファイルと同じディレクトリに置く(例えば、 img01.jpegとimg02.jpegという名前にしておく) imgタグでimg01.jpegを表示させる imgタグをid属性付きのdivタグで囲んで、<div id=“…”><img…></div>という形にし なさい divタグは、それ自体では意味がなく、ページの一部にidやclass属性を付与するために使わ れます jsファイルを作り、divタグの中身（img01.jpegを表示するimgタグ）をimg02.jpegを 表示するimgタグに書き換える関数を作りなさい 写真の下にボタンを作り、クリックされたら関数が実行されるようにすること 元の写真（img01.jpeg）に戻すボタンと関数も作りなさい