さて、戻ってきます。
戻るJavaScriptの紹介では、JavaScriptを学ぶ重要な理由の1つは、ページをインタラクティブにするために使うことができるということです。
ユーザーがボタンをクリックしたり、何かを入力したり、矢印キーを押したり、何かをしたりしたときにコードを実行する方法です。
特定の時点で実行される、対応するコードをページの先頭で実行するだけでなく、実行することもできます。
だから我々はDomイベントについて話をする必要があります。
このビデオはDomイベントの紹介です。
概念的には、それらを設定するためのプロセス、次に構文も含まれます。
だから私が言及したように、イベントはどこにでもあります。
ウェブページとやりとりしたときに、リンク上にマウスを置いてポップアップすることができるボタンのようなものをクリックすることができます。
特定のページに要素をドラッグアンドドロップすることができます。
ユーザーのダブルクリックから実行するコードを使用したり、実際にこのWebページにいくつかの例があります。
このスライドドットコムはWebサイトです。左右の矢印キーを押してスライドを変更しています。
そこで、左矢印キーまたは右矢印キーを押すか、ここをクリックするとコードが実行されます。
これもイベントであり、現在のスライドを変更しているコードを実行している何かをしている。
だからこそ、イベントはあらゆる場所にあり、彼らは本当にエキサイティングです。
インタラクティブにウェブページをインタラクティブにすることができるようになりました。テキストの変化する色を変えることについて学んだ操作材料を取り上げて、実際に何かが起こったときに実際に行うことができるからです。
だから、これは実際に寮を操作する可能性を広げます。
ゲームを作る方法は、フォームバリデーターを作る方法です。本当にクールなカラーピッカーゲームを作り、そのすべてがこれらのイベントに由来しています。
したがって、これらのイベントの仕組みは実際に特定の要素にアタッチして、最初のボタンや2番目のH-1などの要素を選択するか、タイプがテキストと等しい入力を選択してからイベントリスナーをアタッチします選択された要素。
例として、ボタンのクリックを聞いているかもしれませんが、H1上のホバーイベントを聞くかもしれません。テキスト入力でキープレスイベントを聞くかもしれません。そして、それらのイベントの違いについてもっと話します。
JavaScriptにはさまざまな種類のイベントがありますが、重要なことは、特定の要素で聴いているイベントを持たなければならないということです。
だから前と同じように、私が選択して話をしてから、それを操作してもなお適用されます。
私たちは何かを選択する必要があります。そして操作は、私たちが選択したものにイベントリスナーを追加することです。
特に、イベントリスナーの追加と呼ばれる、常に使用する方法があります。
だから、イベントリスナーでは、最初のボタンや入力タイプのような要素をパスワードで選択した後、何かを選択してイベントリスナーを追加し、2つの引数を渡すと、使用するものです。
最初のものは、私たちが聴きたいイベントのタイプです。
2番目の引数は、そのイベントが発生したときに実行したいコードです。
ここに例があります。
私はページ上の最初のボタンを選択していますが、ボタンの位置や見た目など、実際のボタンとは関係ありません。
そして、私はevent listener clickでボタンを呼び出しています。そして、2番目の引数は、ここまで来ている関数です。
そして、このコードはすぐに実行されません。
これはコールバックと呼ばれます。
このコードはすぐには実行されません。
このイベントが発生したときにのみ実行されます。
だから一度ボタンをクリックするとjavascriptが呼び出されてコールバックされます。
この機能は、光るあなたの瞬間だと言います。
そして、そのコードが実行され、私たちは相談して、誰かがボタンをクリックするのをログしないようにします。
そのため、この機能は、クリックされた特定のボタンでボタンがすぐに実行されるたびに実行されます。
ここに別の例があります。
このケースでは、ここにボタンと段落をマークして、両方をKeryセレクタで選択して変数に保存した後、クリックリスナを追加してイベントリスナをクリックしてから2番目の引数はそのコールバック関数です。
そのボタンがクリックされたときに何をするかは、誰かがボタンをクリックすると段落のテキストコンテンツが変更され、そのボタンをクリックすると誰も私がクリックされずに誰かがボタンをクリックしたことがわかります。
だからここで私たちのDomデモページを使って簡単にデモンストレーションをしようと思います。ここでこのH-1を作成しましょう。
ユーザーがクリックすると色が変わります。
そうするためには、H-1を選択することによって常に始める必要があります。
だから私たちにはたくさんのオプションがあります。
クエリーセレクターH-1が持っていることを確認するクエリーセレクター文書を使用します。
大丈夫。
次に、イベントリスナを追加するH-1を記述します。
覚えておいてください。
最初のものは、私たちが聞いているイベントです。
そして、私たちは、さまざまなオプションについてさまざまなイベントについて話しています。
今のところクリックをしているだけで、もう1つはユーザーがクリックしたときに実行するコードです。
だから機能とちょうど本当に簡単に開始し、ユーザーがクリックしたときに警告をしてください。
だから、私たちはそれぞれがこのようにクリックされたという警告を出します。
そして、エンターを押しましょう。
すぐには何も変わらない。
しかし、今私は1つをクリックするので、私はこれを閉じます。
私がページのどこかをクリックすると。
H-1以外に何も起こらない。
私がH-1をクリックするとすぐに、H-1が正しいことがわかります。
それは重要です。
それはH-1にしか当てはまりませんが、私がここを調べてクリックすることができるということは、H-1が画面全体にわたっているかどうかを調べれば覚えているからです。
だからこそ、このケースではうまくいくと思いますが、時には物事がちょっと違うところでポップアップして、あなたが望むかもしれないものとは異なる場合があります。また、CSSAを使用してステージ1を短くするか、とにかくリスナー。
ただ単に警告するのではなく、何か他のことをやろうとしましょう。
上向きの矢印をクリックしてイベントリスナーのクリックを追加すると、ここでコードが変更され、スタイルの背景が等しく、オレンジ色のオレンジ色の背景を作り、H-1のようなことをします。
再び何も変わりませんが、何が起こったのかを注意を払ってクリックすると、最初にH-1がクリックされたという警告が表示されます。
そしてそれを閉じるとオレンジ色に変わります。
したがって、ここで道徳的なのは、特定の要素に複数のリスナーを持つことができることです。
そのH-1をクリックすると、追加した最初のリスナーがクリックをリッスンしてアラートを実行した後、リスナーを追加してクリックを聞いたが、背景色が変わった。
だから両方をクリックすると実行されます。
そして、それは、私が再びクリックすると、今はいつも起きるでしょう。私はアラートを取得し、オレンジ色に変更しました。それは、まだオレンジ色だったので、あなたはそれを見ませんが、あなたは私を信頼しなければなりません。
それは、それをオレンジ色に何度も変え続ける。
私はリフレッシュしてそのすべてを取り除くつもりです。
また、リスナーをULに追加して簡単なデモンストレーションをしたいと思っています。
だからドキュメントダンプのクエリセレクタULを行い、ulが1つではなく3つの味方を持つことを思い出してください。
だから私はそれを親要素に設定するときに何が起こるかを見せてくれるでしょう。
まあ、私はここでこれを行うつもりの変数を使用するつもりはありません。
アダマントリスナー。
クリック。
それが最初の議論です。
2つ目は、このように実行したい機能です。
そして、私は始めるつもりです。
ちょうどよいログがクリックであり、あなたが何を知っているのかを見てみましょう。
それは受身の声です。
悪いアイデア。
やろう。
はるかに良いULをクリックしました。
OK。
では、コンソールを開いたままにして、ULをクリックしましょう。
しかし、どうやってオイルをクリックしますか？
井戸の中に3人の味方がいるから。
ULはここの全体のことです。
だから早急にどんな味方でも、私がどこの井戸にいるかは問題ではありません。
ここで数字が増えています。
井戸をすばやく操作すると、このコンソールのドットログが実行されます。
ですからもう一度リフレッシュしましょう。今回は、味方自身を変えたいとしましょう。
個人の同盟国をクリックすると何か起こりたい。
これを行うにはいくつかの方法があります。
そして、我々はヘッドアップとして各味方に1人のリスナーを付けている最も単純なものから始めようとしています。
最終的には、1つのリスナをULに接続し、次にそのリスナの内部に接続します。
私たちは、特にUL内のどの嘘が1人のLessnerでクリックされたのかを検出します。
今のところはすべての嘘に別のリスナーを追加するつもりですので、同盟国を選択することから始める必要があります。そのため、同盟国は文書ドット・クエリー・セレクターと等しくなります。
さて、私たちはforループを行う必要があります。
だからvar Iはゼロに等しい。
私はいつもこれをやっていると言いました。
だから、私は長さが私の同盟者よりも少なく、プラスちょうどそれに似ています。
そして、ここで私たちは実際に、それぞれの味方にリスナーを追加しようとしています。
それはこのように見える。
エリーゼ私はそれをちょうどそのような特定の味方とイベントリスナーのクリック機能を与え、これを少し行いました。
そして、私たちが実行したいコード。
クリックした味方の色を変更して、紫色に変更しましょう。
だから私たちはいくつかのオプションがあります。
私がする必要があるのは、クリックされた同盟国を指しています。
だから私はこの味方をすることができましたが、それは実際には素晴らしい解決策ではありません。なぜなら、このキーワードを使用するより簡単な方法があるからです。
したがって、リスナーの内部では、これがクリックされたアイテムまたはホバリングされたアイテムを参照するキーワード、またはatイベントの直前にあるエレメントがどこで選択されたものであってもキープレスが発生したアイテムを指す。
だから私は色が紫色に等しいこのドットスタイルを書くことができます。
実際、それはもっと明白なことです。
それは小さなフォントです。
ですから、ピンク色でやってみましょう。
私はエンターを押した。
すぐには何も起こりませんが、私が同盟国をクリックすると、それがピンクに変わることがわかります。
そして、私がクリックをピンクに変え続けると、あなたは告げることができません。
だから、このパターンは、個々にループしてイベントリスナーをそれぞれに追加するという、実際には本当に一般的なものです。
私たちは次のいくつかのプロジェクトでいつもそれを見るつもりです。
最後に私がここで言及するのは、括弧付きの関数を書いたところでここでやったような無名関数を使う必要はないということです。
あなたはそれをする必要はありません。
私がここで行ったのとは別に、名前付き関数を宣言することができます。
関数のテキストを変更してから、イベントリスナーを追加するボタンをクリックするか、クリックしてテキストを変更します。
私が望むものではない関数を直ちに実行するので、後に括弧がないことに注意してください。
この関数の値を渡すだけで、コンテンツを基本的にこのクイックリスナーに渡して、ユーザーがこのボタンをクリックしたときに実行する関数をここに指定します。
しかし、まだそれを実行しないでください。
したがって、これらの2つはまったく同じように動作します。
それは好みの問題です。
ほとんどの場合、後で遭遇するかもしれないいくつかの違いがあります。
私はこれを使うのが好きです。
私が匿名関数を使用しない唯一の時間は、クロックリスナーの外のどこかで再びそのコードを使用する必要がある場合です。
だから私はそれを個別に実行したいのであれば、この関数を複製するのではなく、別のクイックリスナーの代わりにそれを実行したいのですが、名前を付けて、それを2回使用する名前を複製します。
OKだから、次は、Wisnerの素早い使い方と、最後のいくつかのビデオで学んだことのいくつかを使って、簡単なエクササイズをする機会を得るでしょう。