６：イベントハンドラーで画像に動きをつける。input, button、

2021.03.24

 

もっとJavaScript

ボタンを押したら、画像が大きくなったり小さくしてもらいましょう。

次のファイル形式はhtmlかjsか、区別つきますか。

<html>と書いてあるので.htmlにしましょう。

<!DOCTYPE html>
<html>
<title>ボタンをつくってブラウザを動かそう</title>
<body>
<script src='10.js'></script>

<img src='ukr.png'>

<button>ここを押してごらんなさい！</button>
</body>
</html>

これをブラウザで実行すると・・・

ボタンが出てきますね！

けど押しても何もでてきません。

ボタンを押したら何かが変化するようなしくみをJavaScriptで書きましょう！

<!DOCTYPE html>
<html>
<title>ボタンをつくってブラウザを動かそう</title>
<body>
<script>
function bigger(){
document.getElementById('ugokasu').style.width = '400px';
}
</script>

<img id='ugokasu' src='ukr.png' style='width:200px'>

<button>ここを押してごらんなさい！</button>
</body>
</html>

functionでbiggerという関数を定義します。（関数の名前はbiggerでなくともかまいません。好きな名前をつけてください）

ではこのファイルをブラウザで実行してみると。・・。。

 

うーん。まだ動かないですね。

なぜでしょうか？

function bigger(){ document.getElementById(‘ugokasu’).style.width = ‘400px’;}

このコードは

idがugokasuである要素を選んできて（取ってきて）、styleのうちwidthを400pxにしなさい

という意味です。

（idって何？という人はCSSの書き方の基本の基本、少しだけ勉強したらでてくるのでJavaScriptの前にいじってみてください。エレメントはhtmlの<p>とか<h1>とか<div>といったタグを指します）

そしてボタンにid=’ugokasu’と書いてあります。

 

ですが。上のコードでは動かない・・・なぜか。

 

ボタンに対してどのようなアクションがなされたときに、関数biggerが動くかをコンピューターに指示する必要があります。

そこで次のコードをみてください。

<!DOCTYPE html>
<html>
<title>ボタンをつくってブラウザを動かそう</title>
<body>
<script>
function bigger(){
document.getElementById('ugokasu').style.width = '400px';
}
</script>

<img id='ugokasu' src='ukr.png' style='width:200px'>

<button onClick='bigger()'>ここを押してごらんなさい！</button>
</body>
</html>

onClickは「クリックされたら」という意味です。

 

onClickのほかにも、ダブルクリックしたとき、ページをリロードしたとき、マウスが上に乗っかった時、などいろんな場合に関すを実行できます。参考サイト：https://phpjavascriptroom.com/?t=js&p=event

関数を実行するためのイベントを指定するコードを「イベントハンドラ」といいます。「イベントを処理するもの」という意味です。

あ、さっきのコードを実行しましたか？

 

大きくなりましたか？？？

 

関数を定義する時はfunctionを使い、

関数を実行させるときはイベントハンドラーを使います。

 

pythonのときはイベントハンドラーという言葉は出てきませんでしたね。

 

documentとwindow（とconsole）

document.getElementはdocumentのなかにあるelementを取ってきてもらう指示です。

documentはhtml文書（ブラウザに読み取ってもらう書式）を指します。

documentでないものはあるの？

ブラウザで表示されるのは全部documentでは？

 

ともいきや、実は今までに使っていた

alert(‘hello’)は

window.alert(‘hello’)の略記なのです。

 

たいていの指示はdocumentだから、略記はdocumentにした方がよかったのでは・・・？と思うのは僕だけでしょうか。

 

変数を使って整理整頓（定義して使い回す）

function bigger(){
 document.getElementById('ugokasu').style.width = '400px';
}

このコードを、別の書き方で表してみます。

function bigger(){
let bigbig;
bigbig = document.getElementById('ugokasu');
bigbig.style.width = '400px';
}

行が増えたな・・・とおもいますか？

増えています。

けれども、こちらの書き方、pythonにより似ていませんか？

より「短く」なってみやすくなりました。

bigger()というのは関数につけた名前です。

bigbigは変数につけた名前です。

変数とはいっても、’ugokasu’ が入っているので変数っぽくないですが・・・

let bigbigを消して実行してみました。

 

実行されました。

肝心なことはbigbig を document.getElementById(‘ugokasu’)と定義することなのです。

 

またまた別の書き方

少しコードをいじってみました。

どこが変わったかわかりますか？

<!DOCTYPE html>
<html>
<title>ボタンをつくってブラウザを動かそう</title>
<body>
<script>

function bigger(){
bigger = document.getElementById('ugokasu');
bigger.style.width = '400px';
}
</script>

<img onClick='bigger()' id='ugokasu' src='ukr.png' style='width:200px'>

</body>
</html>

ボタンを押したら、ではなく、画像を押したら画像が大きくなるようにしました。

イベントハンドラが使える要素はbuttonだけではないようです。

ではこのコードを別の書き方で表現してみます。。。。

 

大きくなるのではなく、アラートがでる関数です。

<!DOCTYPE html>
<html>
<title>別の書き方２</title>
<body>
<script>

function bigger(){
bigbig = document.getElementById('ugokasu');
bigbig.onclick = function(){
bigbig.style.width='400px'
};
}

</script>

<img id='ugokasu' src='ukr.png' style='width:200px'>

</body>
</html>

実行しましたか？
実行できましたか？？？

動かないですね・・・・

なぜか・・・動いてくれそうなのですが。

コンピューターさんに命令が伝わっていないようです。

 

次のコードをつかいます。付け足しただけです。

<script>

window.onload = function(){
bigger();
};

function bigger(){
bigbig = document.getElementById('ugokasu');
bigbig.onclick = function(){
bigbig.style.width='400px'
};
}

</script>

実行・・・できましたか？

できましたね！できていてほしい！

（実は僕は実行できずに「ど？う？し？て？」とおもっていました。<button>内ではonClickと大文字で書きましたが、タブの外でイベントハンドラーを指定するときはonclickと小文字で表すようです）

 

function bigger(){ は関数を定義するだけで、実行させるコードではないのです。

関数biggerを実行したら、イベントハンドラが発動するのですが、関数biggerを実行する命令が足りていなかったのです。

window.onload = function(){

で、「ウィンドウを読み込んだら次の関数を実行せよ」という命令を表します。

 

他にどんな動きがつくれる？いろいろなプロパティでサイトを動かす

bigbig.style.width=’400px’

の代わりに

alert(‘はわぁ’);　とかくとアラートがでる。

bigbig.src = ‘sky_blue.png’; とかくと画像がかわる

 

他にもこんなことができまっす。

<!DOCTYPE html>
<html>
<title>ほかにどんな動きがつくれる？２</title>
<body>
<script>

window.onload = function(){
change_words();
};

 function change_words(){
rewrite_btn = document.getElementById('img_btn');
rewrite_words = document.getElementById('words_changed');
rewrite_btn.onclick = function(){
rewrite_words.innerHTML = 'いえい！'
};
}

</script>

<img id='img_btn' src='ukr.png' style='width:200px'>
<p id='words_changed'>今日の天気は・・・</p>
</body>
</html>

 

rewritten.innerHTML = ‘いえい！’ は、

rewrittenのタグないにある文字を「いえい！」に変えてねという指示です。

.innerHTMLをプロパティと呼ぶことがあるそうです。

 

要素の中身を変更するプロパティは他にも『innerText』 『textContent』があるそうです。

 

たくさんのプロパティを知って入ればいるほど、コンピューターにたくさんの指示を出せるようです。

 

プログラミングは、英語や数学と同じ、語学の勉強です。

 

遊ぼう！

ところでいろんなイベントが用意されています。

Element: getElementsByTagName() メソッド - Web API | MDN
Element.getElementsByTagName() メソッドは、生きた HTMLCollection で指定されたタグ名を持つ要素を返します。
developer.mozilla.org

 

これで統一したほうがいい？addEventListenerとアロー関数で表現する。

 

addEventListenerというメソッドを使うとわかりやすい、コードが書きやすいと思えたので紹介します。というかアロー関数で表記しただけですが。

<!DOCTYPE html>
<html>
<title>ほかにどんな動きがつくれる？２</title>
<body>

<script>

let rewrite_btn = document.getElementById('img_btn');
let rewrite_words = document.getElementById('words_changed');

//引数がない関数としてclickイベントを発動。'click'はイベントタイプ。rewtite_btnはイベントターゲットといわれる。
rewrite_btn.addEventListener('click', () => {
rewrite_words.innerHTML = 'いえい！';
});
</script>

<img id='img_btn' src='ukr.png' style='width:200px'>
<p id='words_changed'>今日の天気は・・・</p>

</body>
</html>

さて、動きません。何がいけないのでしょうか？

 

こちらのコードなら動きます。

<!DOCTYPE html>
<html>
<title>addEventLiestenerなるか</title>
<body>
<img id='img_btn' src='ukr.png' style='width:200px'>
<p id='words_changed'>今日の天気は・・・</p>

<script>

let rewrite_btn = document.getElementById('img_btn');
let rewrite_words = document.getElementById('words_changed');

//引数がない関数としてclickイベントを発動。'click'はイベントタイプ。rewtite_btnはイベントターゲットのうち、エレメントといわれる。イベントターゲットは「element」、「document」、「window」の3つ
//名前を定義しないで書かれた関数を無名関数、匿名関数といいます。プログラムを書きやすく、読みやすくする工夫です。

rewrite_btn.addEventListener('click', () => {

rewrite_words.innerHTML = 'いえい！';

} );

</script>

</body>
</html>

 

さて何がかわったでしょうか。

<script></script>の前にhtmlを書きました。

<img><p> が<script>の前に書かれていますね。

実は、、、、すみません、<script>を書く場所は、</body>の直前が正しいのです。htmlを読み込んだ上で、最後にその文書に対してjsが働くようにしないといけないのです。

 

すみません・・・いままで適当にやっていました。

 

まとめ：イベントの起こし方（表現方法）三種類

イベントを起こしたいエレメント.onclickプロパティ

element.onclick = kansuName;

target.onclick = functionRef;
Element: click イベント - Web API | MDN
click イベントは、ポインターが要素の中にある状態で、ポインティングデバイスのボタン (マウスの第一ボタンなど) が押されて離されたときに要素に送られます。
developer.mozilla.org

一度に1つのオブジェクトに割り当てることができる onclick ハンドラは1つだけです。より柔軟性のある EventTarget.addEventListener() メソッドを使用することをお勧めします。

だそうです。

イベントリスナーをつかう

EventTarget.addEventListener()

EventTarget: addEventListener() メソッド - Web API | MDN
addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
developer.mozilla.org

イベントリスナーを使うことが推奨されているようです。

前述のコードで使いました。

rewrite_btn.addEventListener(‘click’, () => {

引数の一つ目がイベントのトリガー、２つ目が引き起こしたいイベントを書くスタイルでした。

引き起こしたいイベントは名前をつけずに無名関数として記述することもできます。

関数名を入れて、別の場所で函数を定義してもいいですね。

より状況にあった表現を選んでいきたいですね。

 

イベントを起こしたいエレメントの中で直接イベントを書く

<button onclick=’kansuuName();’></button>

HTMLに書き込むので、どうなのかな・・・

 

 

コメント