[音楽再生] 

DOUG LLOYD：だから今では、私たちは古いです Webプログラミングでのプロ、右？ そして、我々はいくつか紹介してきました 個々のビデオで言語。 そして今のはもう一つは、JavaScriptを実行してみましょう。 

まず良いニュースは、JavaScript 最新のプログラミングで PHPのような多くの言語 構文はCから派生し、 そのためには、開始するには良い場所です。 それだけでなく、PHPと同じくらい古いです、 約20年の周りされました。 それは周りの発明されました PHPと同じ時間。 そして、JavaScriptが実際にはかなりあります ユーザーエクスペリエンスの基本 ウェブの。 実際には、あります その私が3つの言語 ソートの作ると言うでしょう 相互作用のユーザーエクスペリエンス ウェブサイトで、HTML、 CSS、およびJavaScript。 そして、今の話をしましょう JavaScriptのについて少し。 

悪いニュースは、しかし、ではJavaScriptがあります それは自身のためのルールの多くを設定していること、 そしてそれは、それらを破壊します。 そして、JavaScriptが実際にすることができます 学ぶために挑戦の種類、 それは、Cと違っだからと 非常に構成されているPHP、 非常に厳格なルールを持っています 物事が働くことができる方法について。 JavaScriptは種類があり 以下のように柔軟頂い それ多分物事はするつもりはありません 、我々はそれらを期待するように動作 多分私たちは本当に学ぶことができません 私たちの最初のプログラミング言語 JavaScriptなど。 だから多分それはしていませんので、 自身の任意のルール設定、 それは本当にありません 適切なコーディング習慣を強制します。 しかし、今、私たちはうまくいけば開発しました いくつかの良いコーディング習慣、 そして私たちは進出を開始することができます JavaScriptの中に少し。 

開口部に似たJavaScriptを、書き込むには ドットC拡張子を持つCフ​​ァイルアップ またはドットPHPの拡張子を持つPHPファイル、 私たちが行う必要があるのは、ファイルを開いています ドットJSファイル拡張子を持ちます。 我々は、特別なを持っている必要はありません 我々のような区切り文字は、PHPでやりました。 角度のその種 ブラケット疑問符PHP 我々はそれから、道に慣れていること 我々が持っているものであることを私たちはブラウザを教えて JavaScriptは含めることです それhtmlタグで、 我々はについて少し表示されます 一瞬でそれを行う方法について説明します。 

なります他の事 JavaScriptの異なります、 しかし、これはクライアント側を実行することです。 だから、PHPでリコール 私たちは本当に参照することができませんでした ウェブサイトを強調したPHP。 私たちが今まで見た場合 ページのソースは、我々は唯一の希望 たHTMLをご覧ください そのPHPによって生成されます。 しかし、JavaScriptはクライアント側を実行します。 あなたのJavaScriptがお使いのコンピュータ上で実行されます。 そして、あなたが行うことができます理由です 物事はブロッカーを追加したいです。 右？ 広告ブロックは通常によって行われます JavaScriptのすべてを殺します それは、特定のウェブサイト上で実行されています。 そして、それはしなければならないので、 あなたのマシンのクライアント側で実行、 あなただけ停止することができます 完全に実行するためのJavaScript。 それはまた、使用時にあることを意味 JavaScriptを含み、ウェブサイト、 あなたは、JavaScriptのソースを送信する必要があります あなたのHTTP応答の一部としてコード 彼らはそれを要求するクライアントに。 そして、あなたはしない場合があります JavaScriptを使用したいです 本当に敏感なことを行います 情報を渡すように ユーザーのパスワードについての背中と など、彼らが実際にしているので、 すべてのソースコードを受け取るために行きます、 生成されただけでなく、HTML、 などは、たとえば、PHPの場合であろう。 

それでは、どのよう我々はJavaScriptを含みません 私たちのHTML内で開始するには？ CSSに似て、まあ、実際には、 我々はここでそれを行う方法の一種です。 CSSで、私たちは、スタイルのタグを持っています。 そして、それらのスタイルタグの内側に、 我々は、CSSスタイルシートを定義することができます。 同様にJavaScriptを使用 私たちはスクリプトタグを開くことができ、 別のHTMLタグ我々はしませんでした 私たちのHTMLビデオで話、 とでJavaScriptを書きます これらのスクリプトタグの間。 また、我々は、CSSのような、しかし CSSファイルの外でリンクできます そしてそのように私たちのプログラムにそれらを引きます。 CSSを使用した我々は、することもできます JavaScriptで、恐れ入り 我々はまた、ソースを指定することができます スクリプトタグの属性 JavaScriptでリンクします 別にので、あなたはしないでください でそれを記述する必要があります スクリプトタグの間に、我々 使用して、それをリンクすることができます そのスクリプトタグとしても。 そして、ちょうどどこにCSSを使用した場合と同様に 我々は、それはおそらくだったことをお勧め あなたの最善の利益に書き込みます 場合には別のファイルにあなたのCSS あなたはそれを変更する必要があり、 同様に、私たちはお勧めですか あなたが書くこと 別々のファイル内のJavaScript スクリプトタグのソースを使用 あなたJavaScriptを結ぶために属性 あなたのHTMLは、Webページに挿入します。 

だからJavaScriptの変数、我々はよ ここで構文について話し始めます。 そして、我々は通過します すぐにこのような、 私たちはそのように、PHPでこれをやったので、 これはすべて、かなり精通している必要があります。 だから、JavaScriptで変数であります PHP変数に非常に類似しています。 何の型指定は、ありませんし、 あなたは、変数を導入したときに、 あなたは、varキーワードを前に付け。 PHPでは、私たちは何かをするだろう このように、ドル記号は、X。 それは我々が示されている方法です 変数、ない、我々 タイプを言及していません 変数のすべてで。 私たちは次のように言うだろう ドル記号xは、PHPで44に等しいです。 私たちがやっていた場合 JavaScriptで同じこと、 我々はのvar xが44に等しいと言うでしょう。 だから、VaRは、我々の方法の一種であります 変数を導入します。 それはおそらく、もう少し直感的です ただ、ドル記号の変数より。 

ここでも、ありますので、 データ型は、我々はこれを行うことができ 任意のデータ型、文字列 何か他のものはすべてVARであろう。 条件文、私たちのすべての CとPHPの古い友人 まだ利用可能であるので、我々は持っている場合は、 それ以外の場合は、他に、スイッチと質問 コロンをマーク。 これほど柔軟で、残りのスイッチ PHPであったが、これらのすべてのあなたがしています 今では精通。 そして、ループがあり、同様に しばらくの古いお気に入り、 しばらく、と私たちにまだ使用可能のために行います。 だから、すでに私たちはをたくさん知っています 基本の基本的なJavaScriptのソート ただかなり持つのおかげで 今CとPHPについての知識。 

どのようなJavaScriptでの機能は？ まあ、PHPに似たすべての関数であります functionキーワードで導入。 あなたは、関数を言うし、その後 あなたの関数を定義し始めます。 少し違う何 JavaScriptの程度、 持っている能力ですが、 無名関数何と呼ばれています。 だから、関数を定義することができます それは名前がありません。 これは何かであります 本当に前に見たことがありません。 私たちは本当に概念を使用します 無名関数の 少し後、この中に ビデオ、それはだろうから 文脈に少しより多くの意味を作ります 私たちは、特定の状況でそれを見るとき、 私はここに細工されたこと。 しかし、ちょうど見てみましょう どんな簡単なJav​​aScriptのでは 関数は、次のようになります。 

だから私は先に行ってきたと 私CS50 IDEを開きました そして、私はすでにApacheの実行しました 私のサーバーの実行を開始します。 そして私は、このファイルを持っています Home.htmlと呼ばれるオープン。 そして、私はここで少しズームインます。 そして、基本的に、あなたが見ることができます Home.htmlは、ボタンのちょうど束です。 そして、私はここで上部に主張しています これは、JavaScriptのセクションがあること 材料。 そこでここではボタンの束があります、 しかし、これらのボタンは、実際には何をしますか？ 

さて、私たちは私のIEDに向かうだろう、 そして、私はここで開きHome.htmlいます。 非常に開始時に、 私はリンクてるのはここです 私のJavaScriptのソースファイルのすべてです。 右？ だから私は、anonymous.js、clock.jsを持っています 私は、ソース属性を使用しています スクリプトタグのファイルにリンクします。 だから私は書いていない任意の 直接このファイルにはJavaScript、 私はすべてに取ってきました JavaScriptの私は別々に書きました。 そして、我々はここで、この下にスクロールした場合 すべてのややお馴染みのはずです 新しい構文を少しと。 ここでのヘッダータグを持っています 機能して、ボタンを押します。 私はタイプのボタンの入力を持っています、 どうやら、私はそれをクリックすると、 私はいくつかを呼び出すつもりです 警告日付機能。 そして、これは私達が一種のアップミックスすることができます方法です JavaScriptとHTMLを少し。 彼らは実際にはかなりうまくプレイ 一緒に、など明らかにするとき 私には、このボタンをクリックして私は行きますよ いくつかの機能アラート日を呼び出します。 そして、同様に、私は行動を定義されています 他のボタンのすべてのためのもの そのhome.htmlのページにあります、 我々は戻っておこうています このビデオの過程に。 しかし、それでは、バックアップ手放します ここに見てみましょう あるclock.js、で JavaScriptファイルその私 つまり、この第一の機能を有している書い 我々は見てみるつもりです。 あなたが見ることができるように、私はJavaScriptを始めます キーワード機能を持つ関数、 そして私はこの1つのA与えてくれました 名前には、警告の日付と呼ばれています。 そこの内部では、私は明らかに作成します 現在の日付と呼ばれる新しいローカル変数。 そして、私は割り当てするつもりです 新しい日付に等し​​いです。 そして、私たちはたくさんのに得ることができます 日付が何であるかについての詳細、 そして実際にJavaScriptがそうです 我々はおそらくできないことが大きな 1ビデオ内のすべてをカバーしています。 しかし、これが起こっていると言って、それだけで十分 データ項目は私に戻っています 現在の日付と時刻をカプセル化します。 私は、私は変数にそれを格納しています 明らかに現在の日付を警告するために行きます。 

さて、どのようなアラートがありません 現在の日付は次のように？ それでは、ファイル自体を見てみましょう ブラウザウィンドウに渡ってバックします。 そう再度、このボタンは、そのI 、この名前の関数に結び付けられています。 そして、私はそこにそれをクリックして、 それが何をしたか見て、それが警告しました。 それは伝えるボックスのこの種のポップアップ 私は、現在の時刻は明らかであること それはで11月4日です 朝の午前10時43分43秒。 そして私は今、もう一度それをクリックした場合 それは右、数秒後には？ だから、すべてこの機能がないのです。 私は、このボタンをクリックすると、 私に警告メッセージをポップアップ表示されます。 だから、実際にそこにはありません 関数への多すぎます それは、PHPとは異なります 新しい構文の少しだけ それには、JavaScriptでの作業が付属しています。 

JavaScriptで配列があります かなり簡単。 配列を宣言するには、使用 角括弧構文 私たちは、PHPから精通していること。 そして、PHPと同様に、我々 また、データ型を混在させることができます。 したがって、この配列は、両方の これらの配列のだろう 完全に合法的なJavaScriptのです。 すべての整数のOne、および1 異なるデータ型を混合しました。 

非常に異なるものは何ですか JavaScriptで、しかし？ つまり、オブジェクトの概念です。 だから、おそらくあなたは聞きました オブジェクト指向プログラミング。 我々は、CS50での多くをしません しかし、我々はそれの少しを行います ここではJavaScriptのコンテキストインチ 今JavaScriptがする能力を持っています オブジェクト指向プログラミングとして振る舞います 言語が、それ自体ではありません 排他的にオブジェクト指向します プログラミング言語。 そして、これは再び来ます バック私は、それを言った理由 学ぶことは非常に挑戦することができます あなたの最初のプログラミングとしてのJavaScript 言語、それはしませんので、 本当に特定のパラダイムに合います。 

一方、Cがあります 関数型プログラミング言語。 私たちがしたい場合は、機能があります 大ボスの男のようなものですよね？ 彼らは何を決定 他のすべてを発生します。 私たちは、変数を変更したいです、 我々は関数を呼び出します。 私たちは、関数に物事を行います。 で、代わりにオブジェクト オブジェクト指向言語、 オブジェクトは、ソートのスターになると 関数は、二次のようなものになります。 しかし、どのようなオブジェクトがあり、どのような オブジェクトのこの概念はありますか？ まあ、それは場合に役立ちます、と思います それについての最初のソートで C構造体または構造体のような 我々の前に、約学んだこと。 Cでは、構造が含まれています フィールドの数、 そして多分私達は今に開始する可能性があります これらのフィールドのプロパティを呼び出します。 しかし、プロパティが決して本当に 右、自分の上に立ちますか？ 私は車のための構造を定義した場合 次の二つで、このような フィールドまたはプロパティ、1 AN 車の年を表す整数 別の10文字 車のモデルのための文字列、 私はこのような何かを言うことができ、 私は、新しい変数を宣言することができます タイプstructカーハービーの。 そして、私が何かを言うことができます 以下のようなherbie.year、1963等しいです そして、herbie.modelはビートルに等しいです。 それで大丈夫です。 私は内のフィールドを使用しています 構造に関して、 私はちょうど決して可能性 このような何かを言います。 右？ 私は、フィールド名を使用することはできません 構造とは無関係。 これは基本的なものの一種です。 

フィールドがされそう C言語の構造体の基本 性質があることに非常に類似しています JavaScriptオブジェクトの基本。 しかし、それらを作ります 特に興味深いです オブジェクトはまた、何を持つことができるということです 実際にあると呼ばれている方法、 その機能のためだけの派手な言葉 同様に、オブジェクトに固有です。 だから、唯一の可能な機能です オブジェクトのコンテキストで呼び出されます。 定義されたオブジェクトのみ その内、この機能、 あなたが考える場合 構造体、関数 定義それらの中に定義されています 構造体の中括弧。 だから、それだけで何かを意味します 構造に関する。 そして、それは我々がやっていることのようなものです ここにオブジェクトとメソッドを持ちます。 私たちがしているようそれは基本的です その関数を定義します だけで理にかなっています 特定のオブジェクト、およびので、 そのオブジェクトのメソッドを呼び出します。 そして、我々はそれを呼び出すことはできません オブジェクトの独立した機能、 私たちは年またはモデルと言うことはできません同じように Cの構造体の独立しました 

だから、関数型プログラミング パラダイムは、次のようになり。 あなたは合格後、機能と パラメータとしてオブジェクトインチ オブジェクト指向プログラミングで 言語、これは一種の取得 反転し、私たちは考えるだろう それは、object.functionこれを気に入っています。 だから、ドットのそれの並べ替え オペレータは再び暗​​示します それはプロパティのいくつかの並べ替えだと またはオブジェクト自体の属性。 しかし、これはどのようなオブジェクトであります 指向プログラミング言語 関数を作るために行う可能性があります これは、再び、メソッドを呼び出します 機能のためだけの特別な単語であります それは、オブジェクトに固有のものです。 これはどのようなものです 構文は次のようになります。 そして、私たちはいくつかのを見てから始めましょう JavaScriptを文脈で、この。 

また、オブジェクトを考えることができます ソートの連想配列のように、 私たちは、PHPからに精通しています。 連想配列ができます忘れないでください 私たちではなく、キーと値のペアを持っています インデックス0の1つ、2つ、3つ有します ように、我々は、Cとの間で使用されているように 配列。 連想配列はマッピングすることができます このようなPHPのビデオのような言葉、 私たちは話していました ピザのトッピング。 だから、我々は配列を持っていました ピザと呼ばれ、我々 チーズが鍵となったと$ 8.99でした 値、その後、ペパロニは鍵となりました、 $ 9.99値であった、というように。 だから我々はまた考えることができます 連想に類似のオブジェクトのソート アレイ。 ここので、この構文 新しいオブジェクトを作成します 2と呼ばれるハービー その中のプロパティ。 値1963が割り当てられている年、 文字列が割り当てられ、モデル、 甲虫。 

そして、私が使用していることをここに気づきます JavaScriptで単一引用符。 あなたは、単一または二重引用符を使用することができます あなたは、文字列の話をしているとき。 それはちょうど、従来のです ケースほとんどの時間 あなたはJavaScriptを書いているとき、 あなただけの一重引用符を使用します。 しかし、私は、ここでは二重引用符を使用することができますし、 それは同様に完全に大丈夫だと思います。 

それでは、どのようで覚えています PHP我々はこの概念を持っていました 私たちを可能にする各ループのための キー値のすべてを反復処理します 連想の組 配列、我々理由 反復するこの能力を持っていませんでした 0から、一つ、二つ、三つ、四つ、 等々？ JavaScriptは、非常に似た何かを持っています それは、各ループの呼び出されていません それはループ内のために呼ばれています。 だから私は次のように私に言った場合 この、オブジェクト内のvarキーの、 それは言うのと、ソートの似ています 何かのように各何かのため。 しかし、私がここでやっているすべてが反復されます 私のオブジェクトのすべてのキーを介して。 そして、カーリーの内部 私は、そこだろうブレース 参照するオブジェクトの角括弧キーを使用します そのキーの場所にある値に設定します。 

また、あります でも別のアプローチ。 私はちょうどだけに関心があるのであれば 値は、私は、オブジェクトのキーのために言うことができます ちょうど内部キーを使用します。 だから、オブジェクト内のvarキーに、私が持っています オブジェクトの広場ブラケットを使用します ループ内でのキー。 オブジェクトのVARキーのため、私がすることができます ちょうどループ内でのキーを使用して、 私は特にだから そこ値の話。 

それでは、多分みましょう 違いを見て ちょうどすぐにあなたを表示します 4の違い で、非常に特定でのための 私たちはここにある配列、週配列。 だから私は新しい配列を見つける必要があり 私は7文字列で埋めていることを、 月曜日、火曜日、水曜日、 木曜日、金曜日、土曜日、日曜日。 そして、私は今、反復したいです この配列を介して、 特定の情報をプリントアウトします。 私は、ループ内で使用する場合 情報を印刷するには、 私は取得するつもりだ何だと思いますか？ さて、見てみましょう。 そして、我々は飛び越える前 私のブラウザウィンドウに、 ちょうどそれを知っています console.logは1の一種であります JavaScriptで印刷Fを行う方法。 しかし、コンソールは何ですか？ まあ、それは我々が行っているものです 行くために今を見てみましょう。 

[OK]をので、私たちはここに戻っています 私のブラウザウィンドウで、 私は開くつもりです 私の開発者ツールまで。 繰り返しますが、私はF12キーを打ちますよ 開発者ツールを開きます。 そして予告ことをここに トップ私はコンソールを選択しました。 だから、これは概念であります デベロッパーコンソールの、 そして、それは私たちができるようになります 、情報を印刷 ソートの端子等が挙げられるが、 あなたは、少し後に表示されますように、 我々はまたに情報を入力することができます 当社のウェブページと対話します。 私はここで少しズームインするつもりです、 そして、私は今テスト中のためにクリックするつもりです。 そしてtest--の4つの私はつもりはありませんよ 今あなたにそれのためのコードを示し、 あなた場合しかし、あなたはそれを取得します そのソースコードをダウンロード このvideo--に関連付けられています ちょうどそのループ内のためであります 私達はちょうど見ました スライド上秒前。 

だから私はそれをクリックするつもりです ボタンを押すと、こっち、 ここでプリントアウトしたものです コンソール、0個、1個、2個、3個、4個、5個 6。 私は情報を出力しませんでした これらのアレイ位置の内部には、 私は、ループ内に使用​​するため。 そして、ループの本体内部に、私 ただキーを反対しないキーをプリントアウト。 しかし、私は今、私のコンソールをクリアし、私ならば テストのために切り替えて、テストの4 私は、ループのために使用しますと言います 代わりに、キーをプリントアウトし、 私はそれをクリックすると、今私は取得しています 私のオブジェクトの内部に実際の要素 または、この場合の私の配列。 平日の私の配列。 私は、月曜日プリントアウト 火曜日、水曜日。 だから、の違いです プリントアウトするループ内のため、 あなただけのキーを使用している場合だけ、キー ループの本体の内部に、 ループ、プリントのための 値アウトあなただけを使用する場合 ループの本体内部キー。 

すべての権利、どのように我々は今に始めますか 文字列を連結し、多分ミックス 補間といくつかの変数 私たちはPHPで行うことができたような？ さて、私たちはかなり精通しています PHPからこれで。 これは、我々が使用してそれを行うだろう方法です ドット演算子は、文字列を連結します。 JavaScriptでは、しかし、 私たちは実際に何かを使用します これは、プラス演算子と呼ばれます 多分もう少しです 直感的な、右？ 私達は束を追加しています 文字列の一緒に。 それでは、引き返すてみましょう 超えると何がこれを見ます 私たちがプリントアウトしようとしている場合に出力されます 週配列内のすべての情報。 ここでは下のように、すべての権利 文字列の連結の下で、 私は2つのオプションがあり、文字列の建物 V1とその後の文字列の建物のV2。 なぜ我々と我々が表示されます 第二に、V2が必要です。 しかし、私はつもりだ上でクリック 文字列の建物V1、どの 私たちがしたコードです ちょうどを見てみると、 プラスのすべてではconsole.log。 これは印刷する場合を見てみましょう 私たちが期待するものを。 

月曜日は、曜日番号01であります 火曜日曜日番号11です。 まあ、私は何をしようとしていました 取得があった行うには それは月曜日をプリントアウトする日の数です 1、火曜日は日番号2です。 しかし、それは私はのように思えます 常に1をプリントアウトします。 まあ、それはなぜですか？ まあ、それは結局のところ、別のを見てみましょう ここでは、コードのこの小さなスニペットで。 我々は、プラスを使用していることに注意してください 二つの異なる文脈でオペレータ。 

ので、ここでどこに多分ものです 我々は種類の言ってきたことを、 ああ、それはとても素晴らしいことです。 私たちは、もはやデータ型を扱いません。 しかし、ここでどこ事実です 我々は、データ型を失うこと 実際にビットすることができます 私たちにとっての問題の。 今プラス演算子をするために使用されること 文字列を連結し、番号を追加 一緒に、JavaScriptは持っています その最良の推測を作るために 以下のように私はそれが私のために何をしたいのか。 この場合には、間違った推測しました。 それだけ連結日であろう 0個、1個、2個、3個、4個、5個、または6個 そしてそれはちょうど連結します そのとは、一つの連結しました。 それは実際にそれらを一緒に追加しませんでした。 だからこれらの言語、 PHPやJavaScript、 それは抽象化 タイプのこの概念、 あなたはもうそれに対処する必要はありません。 彼らはまだフードの下型を持っています。 そして、我々は状況では、することができます このように、その事実を活用 何かを言って これは、多分このような によって、JavaScriptを語っています 方法は、整数として扱います、 でも、それを文字列として扱いません。 私たちは一緒に文字列を混合しているものの ここと整数。 

それはちょうどそれらのものの一つです それは文脈でとても素晴らしい思われること 我々はする必要がないこと もう種類を扱います、 時には、あなたはよ 状況に陥ります まさにこのような場合は事実 あなたはタイプを制御できません。 あなたに裏目に出ることができます あなたが注意しないなら。 私たちは、IDEへの上に戻ってポップ場合だから、私はよ 再び私のコンソールをクリアしようとして、 私は、文字列をクリックするつもりです 建物のバージョン2、どの 私はその解析int型の関数を使用する場所です。 今ではプリントアウトしています 私は期待していた情報。 月曜日の日番号1、火曜日 ように日番号2、とあります。 

それでは、再び機能について話しましょう​​。 私たちは、匿名の話を約束しました 機能、そして今そのためのコンテキスト ついに到着しました。 私たちはそうする前に、それでは、再び話をしましょう ちょうど秒アレイに関する。 だから、配列は特別です オブジェクトの場合。 実際には、何事においても JavaScriptが実際にオブジェクトです。 だから、機能があります オブジェクトの特殊なケース、 整数は特別です オブジェクトの場合、 しかし、配列特異的に 多くの方法を有しています。 彼らはオブジェクトだから覚えておいて、 彼らは、プロパティとメソッドを持つことができます。 これらは、多くの方法を持っています これらのオブジェクトに適用することができます。 呼ばれる方法があります サイズ、array.size、 これに戻ります あなたご想像のとおり あなたの配列の要素数。 array.pop、ソートのような 飛び出しの私たちの考え方 スタックの、あなたが思い出す場合 私たちのスタックビデオから、 配列から最後の要素を削除します。 Array.pushを使用新しい要素が追加されます 配列の最後に。 array.shiftは一種のです DQのように、それが出てスプライス 配列の最初の要素。 

しかし、また別の特別な存在です マップと呼ばれる配列の方法。 そして、これは一種のです 面白いコンセプト。 だから、マップのアイデアは何ですか？ あなたは実際にこれを参照してくださいよ いくつかの他の言語で、 私たちは話していません 地図製作者のようなものがここにマッピングし、 我々は、マッピング機能の話をしています。 文脈において、我々はしています ここで話し、地図 特殊動作我々は、 アレイ上で実行することができます 特定の関数を適用します その配列の各要素に。 そして私たちはで言います この場合は、多分、array.map そしてその中に、私たちは渡しています マップに私たちが望む機能です すべての単一の要素に適用されます。 だから、使用するソートの類似です すべての要素を反復処理するループ 特定の適用 すべての要素に機能し、 ちょうどJavaScriptは、この中に組み込まれています 適用することができるマッピングの概念。 そして、これはに大きなコンテキストです 無名関数について話しています。 

それでは、私たちは持っているとしましょう 整数のこの配列。 これはNUMSと呼ばれる、そしてそれは5を持っています その中のもの、一つ、二つ、三つ、四つ、 5。 今、私はいくつかをマップします この配列への機能。 私は、関数を適用させたいです 配列の各要素に。 さて、私が何をしたいとしましょう やるだけの二重のすべての要素のです。 私はループを使用している何ができますか VARのために私はより小さく、0に等しいです または4に等しい、私プラス、プラス、および その後、すべての単一の数を2倍。 しかし、私はまた、このような何かを行うことができます。 私はNUMSが以前あったと言うことができます 一つ、二つ、三つ、四つ、五つ、 今、しかし、私はにあなたを好きになります このアレイ上にマッピングを適用 私はあなたを好きになる場所 すべての数を2倍にします。 そして、それはまさに ここで何が起こっています。 しかし、私が渡しているものに気づきます マップする引数としてインチ これは匿名関数です。 そして、私は与えられていない気付きます この関数名、 私はそれをパラメータリストを与えてくれました。 そして、これは一例です 無名関数の。 

当社は通常、これを呼び出すことはありません マップのコンテキストの外で機能。 私たちは、それをパラメータとして定義しています マップし、私たちは本当にない行うには もしその名前を持っている必要があります 気に唯一のものは、マップです それは右の定義されています そこにマップの内部。 そして、これは匿名関数です。 私たちはできていません 以前にこれを実行します。 いくつかの機能をマップします NUM、一つのパラメータを受け入れ、 その関数が何をしますか リターンは2倍にNUMています。 だからこの後 マッピングが適用されています、 これは今何NUMSのルックスです 以下のような、2個、4個、6個、8個、10。 そして、私たちは私にオーバーポップます ブラウザのウィンドウとだけ これを見てください 本当にすぐにも。 

だから私はここに別のボタンを持っています 私のホームページの2と呼ばれます。 そして、私はダブルクリックして、それが伝える時 私それは、1つ、2つ、3つ、4つであった前 2個、4個、6個、8個、10後5。 そして、私は戻って、ダブルをクリックすると 再び、2個、4個、6個、8個、10。 そしてその後、4つ 8、12、16、次に20。 そして、私は、この関数で何をやっていますか？ さて、私たちはIDEにオーバーポップ場合、および 私はここで、私の無名関数をプルアップ 13を通る線7上で、私はよ ここで少し派手な仕事をして、 しかし、私はプリントアウトしています 配列内の現在のものです。 次に16行目、17日、 そして18、私のマップがあります。 私はこの倍増を適用しているところです 一つ一つの要素に機能しています。 そしてさらに少し下に、 私はちょうど同じことをやっています 私は今、私は除いて、前にやっていました 配列の内容を印刷 その後。 しかし、私がここでやったすべてがあります ただ、匿名関数を使用します アレイ全体マップします。 

だから、もう一つの大きな話題は、約話をします JavaScriptは、イベントの概念です。 イベントはただ起こるものです ユーザーは、Webを操作したとき ページ、ので、多分彼らは何かをクリックして、 または多分ページは、読み込みが完了しています または多分彼らが移動しました 何かの上にマウス、 または、彼らは何かを入力しました 入力フィールドに入力します。 これらの事のすべてはイベントです それが私たちのウェブページ上で発生しています。 そして、JavaScriptが持っています 何かをサポートする機能 これは、イベントハンドラと呼ばれます そのコールバック関数であります HTMLイベントに応答します。 そして、コールバック関数は何ですか？ まあ、それは一般的にちょうど別です 無名関数の名前。 これは、その関数の イベントに応答します。 我々はどこに来て、これはあります 特定の機能を結合するという考え 特定のHTML属性に。 ほとんどのHTML要素を持っています 属性のサポート 我々は、HTMLの話はなかったこと クリックでのようなもののためのビデオ またはホバー上または負荷に、 これらのすべてのイベント あなたがして関数を記述することができます これらのイベントでその契約 ときにこれらのイベント あなたのWeb​​ページで発生します。 

そしてそう多分あなたのhtml このようになります。 そして、私はここでは2つのボタンがあり、 ボタン1とボタン2、 ここで私は現在持っています 何も定義されていません、 これはある属性に クリックどうやら私のhtmlタグの一部です。 だから、明らかに私は何を定義するときに その属性の内部で起こって、 それはいくつかのJavaScriptになるだろう イベントに応答する機能 おそらく上でクリックします ボタン1またはボタン2。 

どのような種類のクールな、これは私たちですについてです 一般的なイベントハンドラを記述することができます。 そして、このイベントハンドラはなります イベントオブジェクトを作成します。 そして、イベントオブジェクトには、私たちに教えてくれます 二つのボタンのどちらがクリックされました。 今どのように動作しますか？ まあ、それはこのようになります。 だから我々は最初の私達のボタンを定義します コー​​ルバックへの応答を持っています 呼び出される関数 ボタンがクリックされたとき、 我々は、イベントアラート名を呼ぶことにします。 そして、私たちがしている両方のケースに気づきます このイベントパラメータを渡します。 だから我々は、この関数を呼び出します またはときに、この機能 開催イベントによってトリガーされ、 それは、このイベントオブジェクトを作成するために起こっています そして、として渡します 名前を警告するためのパラメータ。 そのイベント・オブジェクトであります 情報を含むつもり どのボタンがクリックされました。 そして、どのようにそれを行うのですか？ まあ、それはこのようになります。 だから今、私の中で独立しました JavaScriptのファイル、私は可能性があります これを見つけなければなりません これは、アラート名機能 再びそのイベントパラメータを受け付けます。 私は検出よどこそして、ここにあります どのボタンがトリガされました、 VARトリガはイベントに等しいです ドットソース要素。 作成したソースは何でした に渡されたこのイベントオブジェクト？ それは、ボタン一つであったか、それはボタン2でしたか？ 

そして、ここで私がやっているすべてがあります trigger.innerhtmlをプリントアウト。 さて、この場合には、この中で コンテキスト、trigger.innerhtml ボタンの上に書かれているものだけです。 我々はジャンプ場合、それはちょうどそう起こります バック秒、それがあろう これらのボタンのタグの間には何も。 これは、ボタン1またはボタン2になります。 そしてのは、見てみましょう どのようにこのイベントハンドラがあろう 私たちは実際にそれを実行していた場合に見えます。 

だから、最初にすべての、あなたがきました events.jsを開きました、 JavaScriptファイル場所はあります 私は、この関数を定義しています。 あなたが見ることができるように、それはです かなり正確に何を 私達はちょうど秒前のスライドで見ました。 そして、私はオーバーになります ホームページ私達が使用してきました。 そして、私はここにボタンがあります 1とボタン2。 そして私は、ボタンのいずれかをクリックします。 あなた場合は、ボタン1をクリック アラートに右ここで見ることができます。 OK。 、ボタン2であなたをクリックしてください ボタン2をクリックしました。 

だから、両方のボタンを持っています 同じ関数呼び出し、右？ 彼らは両方のアラート名でした イベントが、このイベントオブジェクト 私たちがクリックしたときに、そのが作成されます それがクリックされたボタンを教えてくれる。 私たちは別々の2を記述する必要はありませんでした 持つ機能や取引 追加情報を渡すことができます。 私達はちょうどに頼っています 何JavaScriptの意志 それを作成することである、私たちのために行います 私たちに代わってイベントオブジェクトの一種。 よりJavaScriptにもっとたくさんあり​​ます 私たちはこのビデオでカバーしてきたこと、 これらを持ちます 基本的にはあなたを取得する必要があります かなり長い方法へ あなたはすべてを学習します このことについて知っておく必要があります 興味深い言語。 私はダグロイドです。 これはCS50です。