From fd1e2435671adf89d5a2718fc7d1454828f147ae Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 最後に、{{domxref("GlobalEventHandlers.onclick")}} イベントハンドラーを使用して、ボタンをクリックするとパネル全体をパネルから削除してメッセージボックスを閉じるようにします。
- 簡単に説明すると、onclick
ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後のイベントの記事で、これらについてさらに詳しく学びます。onclick
ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <div>
パネル) を削除することを指定します。onclick
ハンドラーはボタン (または実際にはページ上の任意の要素) で使用できるプロパティで、ボタンをクリックしたときに実行するコードを指定する関数に設定できます。後のイベントの記事で、これらについてさらに詳しく学びます。onclick
ハンドラーは、ボタンがクリックされたときに実行されるコードを含む無名関数と等しくなります。関数内の行は {{domxref("Node.removeChild()")}} DOM API関数を使用して、HTML要素の特定の子要素 (この場合は <div>
パネル) を削除することを指定します。
closeBtn.onclick = function() { panel.parentNode.removeChild(panel); @@ -238,7 +238,7 @@ displayMessage('Brian: Hi there, how are you today?','chat');
この記事の最後まで到達しましたが、最も大事な情報を覚えていますか?移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。
+この記事の最後まで到達しましたが、最も大事な情報を覚えていますか?移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions. を見てください。このテストは次の記事でカバーするスキルが必要ですので、試す前にこれを読んでおくとよいでしょう。
この記事の最後まで来ましたが、最も大事な情報を覚えていますか?先に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Conditionals を見てください。
+この記事の最後まで来ましたが、最も大事な情報を覚えていますか?先に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Conditionals を見てください。
このコードでは、btn
という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。btn
変数は<button>
要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclick
イベントハンドラプロパティに、ランダムな RGB色を生成し <body>
の background-color
を設定するコードを抱えた匿名関数を代入する事で、click
イベントが発火されるのを待ちかまえます。
このコードでは、btn
という変数に {{domxref("Document.querySelector()")}} 関数を使って取得したボタンへの参照を格納しています。それとは別にランダムな数値を返す関数も定義しています。コードの 3 つ目の部分はイベントハンドラーです。btn
変数は<button>
要素を指していますが、この種のオブジェクトにはたくさん発火し得るイベントがあるので、色々なイベントハンドラーが使えます。onclick
イベントハンドラプロパティに、ランダムな RGB色を生成し <body>
の background-color
を設定するコードを抱えた匿名関数を代入する事で、click
イベントが発火されるのを待ちかまえます。
このコードは <button>
要素でクリックイベントが発火すれば常に実行されます、要はユーザーがクリックしたらいつでも。
ここにある他のオプションは NodeList
オブジェクトの組み込みメソッドの forEach()
で使えることに注意してください:
ここにある他のオプションは NodeList
オブジェクトの組み込みメソッドの forEach()
で使えることに注意してください:
buttons.forEach(function(button) { button.onclick = bgChange; @@ -564,7 +564,7 @@ video.onclick = function() {スキルをテストしよう!
-この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — Test your skills: Events を見てください。
+この記事の最後に来ましたが、最も大事な情報を覚えていますか? 次に移動する前に、さらなるテストでこの情報を保持しているか検証できます — Test your skills: Events を見てください。
結論
diff --git a/files/ja/learn/javascript/building_blocks/functions/index.html b/files/ja/learn/javascript/building_blocks/functions/index.html index 636278ee2e..a6901fcec8 100644 --- a/files/ja/learn/javascript/building_blocks/functions/index.html +++ b/files/ja/learn/javascript/building_blocks/functions/index.html @@ -312,7 +312,7 @@ function b() {
a(); b();- 今度は
a()
と b()
の両方の呼び出しで、迷惑な "ReferenceError: variable name is not defined" エラーが返されます — これは output()
呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。a()
と b()
の両方の呼び出しで、迷惑な "ReferenceError: variable name is not defined" エラーが返されます — これは output()
呼び出しと、出力しようとしている変数が同じ関数のスコープにない、つまりこれらの関数呼び出しからは変数が参照できない状態だからです。
この記事の最後に来ましたが、最も大事な情報を覚えていますか?次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Functions を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。
+この記事の最後に来ましたが、最も大事な情報を覚えていますか?次に移る前に、この情報を保持しているか検証するテストがあります — Test your skills: Functions を見てください。このテストは次の 2 つの記事でカバーしているスキルを求めていますので、テストの前にそちらを読むほうが良いかもしれません。
btn
) にイベントリスナーを設定しています。ボタンが押されたときに検索結果が戻ってくるようになっています。searchName
という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に toLowerCase()
を実行しているのに注意してください。searchName
という変数に格納してから、次の検索に備え、入力欄をクリアし、フォーカスを設定しています。検索に大文字小文字を気にしないよう、文字列に toLowerCase()
を実行しているのに注意してください。0
から始め、contacts.length
より小さくなくなるまで、ループの繰り返しの度に i
を 1 増やしていきます。contacts[i]
) をコロンの文字で分割し、splitContact
という配列に格納します。splitContact[0]
(連絡先の名前) が入力された searchName
にまた toLowerCase()
を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、break
を使用してループを終了しています。splitContact[0]
(連絡先の名前) が入力された searchName
にまた toLowerCase()
を使って小文字化したものと等しいかを判定します。もし等しければ、連絡先の電話番号を段落 ({{htmlelement("p")}} 要素) に表示し、break
を使用してループを終了しています。(contacts.length-1)
回目の繰り返しの後に、もし連絡先の名前が入力された検索語に一致しなければ、段落に「連絡先が見つかりません。」という文字列を表示し、条件が true では無くなるまでループを継続します。admitted.textContent +=
— admitted.textContent
の後に文字を連結する開始行特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか?ヘルプのため便利な文字列メソッドの記事を見てみてください。
+
特別ボーナス問題 — 上のタスクを正常に完了すると、カンマで区切られた 2 つの名前リストが残されますが、それらは整頓されません。それぞれの末尾にカンマがあります。それぞれの場合に最後のカンマを切り取り、末尾にピリオドを追加した行をどのように書くかという問題を解決出来ますか?ヘルプのため便利な文字列メソッドの記事を見てみてください。
間違えた場合は、「リセット」ボタンを使用してこの例をいつでもリセットできます。あなたが本当に立ち往生したら、"ソリューションを表示"を押して解決策を見てください。
少なくとも最初は for
から始めることをお勧めします。すべてを覚えておくことが簡単だからです。初期化処理、条件、最後の式をすべて括弧内にきちんと入れなければならないので、それらがどこにあるかや見落としていないことの確認が簡単です。
注: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度なループと反復処理ガイドをお読みください。
+注: 高度な/特殊な状況やこの記事の範囲を超えて有用な、他のループタイプ/機能もあります。ループ学習をさらに進めたい場合は、高度なループと反復処理ガイドをお読みください。
この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Loops を見てください。
+この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Loops を見てください。
この記事の最後まで到達しましたが、最も大事な情報を覚えていますか?移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions を見てください。
+この記事の最後まで到達しましたが、最も大事な情報を覚えていますか?移動する前に、この情報を維持しているか検証するテストを見ることができます— Test your skills: Functions を見てください。
上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 let
(か var
) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは以降の記事で見ます) 。定数は変更しない値を保持するのに、 const
キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。
上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 let
(か var
) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは以降の記事で見ます) 。定数は変更しない値を保持するのに、 const
キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。
等号記号 ( =
) に続いて、与えたい値を書いて、変数や定数に値を代入できます。
Return/Enter を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。
注記: 関数についてもこのコースの後の方で詳しく学びます。
+注記: 関数についてもこのコースの後の方で詳しく学びます。
この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Arrays を見てください。
+この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているか検証するテストを見ることができます — Test your skills: Arrays を見てください。
この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか?移動する前に、この情報を取得したかのテストを見ることができます — Test your skills: Math を見てください。
+この記事の終わりまで到達しましたが、最も大事な情報を覚えていますか?移動する前に、この情報を取得したかのテストを見ることができます — Test your skills: Math を見てください。
この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているかを検証するテストを見ることができます— Test your skills: Strings を見てください。
+この記事の最後に到達しましたが、最も大事な情報を覚えていますか?移動する前に、情報を維持しているかを検証するテストを見ることができます— Test your skills: Strings を見てください。
角括弧で表示したい値の位置に応じたインデックス値を指定します。気づいたかもしれませんが JavaScript の配列は 0 始まりで、最初の要素のインデックスが 0 となります。
-配列についても先の記事にて紹介します。
+配列についても先の記事にて紹介します。