File tree Expand file tree Collapse file tree 5 files changed +10
-10
lines changed
docs/2-browser-apps/04-anonymous-function Expand file tree Collapse file tree 5 files changed +10
-10
lines changed Original file line number Diff line number Diff line change 55 < title > 通常のイベントハンドラ</ title >
66 </ head >
77 < body >
8- < button id ="strange -button "> Click me</ button >
8+ < button id ="greet -button "> Click me</ button >
99 < script src ="./script.js "> </ script >
1010 </ body >
1111</ html >
Original file line number Diff line number Diff line change 1- function onStrangeButtonClick ( ) {
1+ function onGreetButtonClick ( ) {
22 alert ( "こんにちは!" ) ; // ダイアログボックスを表示
33}
44
5- document . getElementById ( "strange -button" ) . onclick = onStrangeButtonClick ;
5+ document . getElementById ( "greet -button" ) . onclick = onGreetButtonClick ;
Original file line number Diff line number Diff line change 55 < title > 無名関数を用いる場合</ title >
66 </ head >
77 < body >
8- < button id ="strange -button "> Click me</ button >
8+ < button id ="greet -button "> Click me</ button >
99 < script src ="./script.js "> </ script >
1010 </ body >
1111</ html >
Original file line number Diff line number Diff line change 1- document . getElementById ( "strange -button" ) . onclick = ( ) => {
1+ document . getElementById ( "greet -button" ) . onclick = ( ) => {
22 alert ( "こんにちは!" ) ;
33} ;
Original file line number Diff line number Diff line change @@ -9,25 +9,25 @@ title: 無名関数
99しかしながら、通常の記法で関数を記述することが煩わしい場合があります。イベントハンドラを登録する場合を考えてみましょう。
1010
1111``` html title="index.html"
12- <button id =" strange -button" >Click me</button >
12+ <button id =" greet -button" >Click me</button >
1313```
1414
1515``` javascript title="script.js"
16- function onStrangeButtonClick () {
16+ function onGreetButtonClick () {
1717 alert (" こんにちは!" ); // ダイアログボックスを表示
1818}
1919
20- document .getElementById (" strange -button" ).onclick = onStrangeButtonClick ;
20+ document .getElementById (" greet -button" ).onclick = onGreetButtonClick ;
2121```
2222
2323<ViewSource url = { import .meta .url } path = " _samples/normal-event-handler" />
2424
25- この場合、関数 ` onStrangeButtonClick ` は、イベントハンドラとして登録されるためだけに利用されており、` onStrangeButtonClick ` という名前自体はあまり重要ではありません。こういった場合、関数オブジェクトの生成をするための式(関数式)を用いることができます。このようにして生成された関数は、名前を持たないため、** 無名関数** と呼ばれます。
25+ この場合、関数 ` onGreetButtonClick ` は、イベントハンドラとして登録されるためだけに利用されており、` onGreetButtonClick ` という名前自体はあまり重要ではありません。こういった場合、関数オブジェクトの生成をするための式(関数式)を用いることができます。このようにして生成された関数は、名前を持たないため、** 無名関数** と呼ばれます。
2626
2727先ほどのプログラムを関数式を用いて書き換えると、次のようになります。
2828
2929``` javascript title="script.js"
30- document .getElementById (" strange -button" ).onclick = () => {
30+ document .getElementById (" greet -button" ).onclick = () => {
3131 alert (" こんにちは!" );
3232};
3333```
You can’t perform that action at this time.
0 commit comments