TOMAS Reimersの：こんにちは、誰もが。 私の名前のトーマスReimersの。 MIKE RIZZO：そして、私はマイク·リッツォよ。 TOMAS Reimersの：私たちは、CS50s TSの2つです。 そして今日はセミナーをリードしている WebアプリケーションのためのJavaScriptとCSS。 あなたが一緒にフォローしたい場合は、 リンクがすぐそこを超えている。 そして、あなたはそれを我慢したくない コンピュータに簡単に？ リンクがあります。 それはへのリンクがあり、小さなサイトです 我々はあることを行っているすべてのリソース 今日あなたを指しているともたくさん持っている に私たちによって書かれた有益な情報 あなたが戻って行くとき、深さ続きを読む あなたは覚えてしようとしているもの 正確に私たちは、あなたが何であったか、言った エトセトラ、の話。 MIKE RIZZO：すべての権利。 それでは始めましょう。 TOMAS Reimersの：だから、開始したい？ [OK]をクリックします。 MIKE RIZZO：うん。 だから我々は第1の広いで始めたいと思った インターネットについての概要と ウェブサイトを設計するときにファイルタイプ。 このプレゼンテーションでは、我々がしたいんが JavaScriptにたくさんくらい入る その後、私たちは始めるしたかった ただ、ちょっと、のような鳥瞰図 ウェブサイトが何であるかの、どのように 設計について考える 開始のためのウェブサイト。 この時点で、だからみんな、 - それに 金曜日の夜であることは - 持っている必要があります あなたCS50ファイナンスを提出 問題が設定されます。 うまくいけば、それは良い味だった どのようなウェブプログラミングすることができます。 しかし、ここで我々は、この種の、与えたい あなたが別の味だけでなく、。 TOMAS Reimersの：だから何を要約する あなたにあなたのURLを入力すると、どうなる Webブラウザは、そのURLを取得 コンピュータ内で検索。 そして、あなたのコンピュータの接続 別のコンピュータに、 もののウェブサイトをホストします。 あなたはgoogle.comに行くとき、OK、そう、あなたがしている Googleののいずれかに接続 持ってコンピュータ、 google.com用のファイル。 その後、特定のファイルを要求します。 もしそうなら、あなたはに行く - 私は知らない - example.com / index.htmlのか/ test.htmlという、 あなたが求めるつもりだ その特定のファイル。 Webサーバーが起こっている それをあなたに戻ります。 その後、そのファイルを通過後に - あなたがしてもらった上のコンピュータを取得すること ファイル - それは開始する予定だ Webページを構築することができます。 だから今では、HTMLファイルを持っている、 並べ替えのようである ウェブページの構造。 HTMLファイルも参照することができ 定義のCSSファイル、 Webページのスタイル。 定義するJavaScriptファイル、 Webページとの相互作用。 ちょうど画像である画像ファイル、。 おそらく、他のHTMLファイルへのリンク そのあなたが次に訪問することができます。 MIKE RIZZO：OK、素晴らしい。 だからみんな、おそらく、すべてを持っている 苦労してローカルホストを設定 仮想マシン上で。 そして、ちょうど、この種の、ローカルであること お使いのコンピュータでのみホストするドメイン 独自のIPアドレスにあるあなたがのために。 だから内で、あなたは追加することができます それにあなた自身のWebページ。 私はあなたが持つべき、CS50ファイナンスでは、平均 いくつかのHTMLページを、添加し、 並べ替えの、PHPのラッパーに包まれた。 しかし、最終的には、どのようなあなたのPHPページ HTMLはして出力された。 しかし、非常に先頭に戻って考えて PSETのでは設定する必要がありました すべての権限、権利？ だから、これはただ、基本的に私たちが知ることができます 誰が、読み取り、書き込み、および場合によってはでき 各ファイルを実行します。 HM - だから我々は、迅速にやろうとしている？ TOMAS Reimersの：だから我々は行っている 簡単なデモをすることができません。 ときに、だから、あなたを思い出させるために Googleのコンピュータへの接続 - 誰 - 最初、ファイルをコンピュータに尋ねる 必ずあなたが権限を持っている行う必要がある 実際にそのファイルを表示したり、それを読んで あなただけ頼むことができないため、ファイル そのコンピュータ上の任意のファイルのために、右？ つまり、セキュリティの危険になります。 のような私たちが使用しているシステム上のファイルなので、 このCS50アプライアンスは、3を持っている 持つことができ、一般的な人々 何かへの権限。 最初は、実際のです 言ったファイルの所有者。 二つ目は、そのグループである ファイルが所属。 我々は集中するつもりはない その上であまりにも多く。 そして最後は次のように、一種の、ある 世界やだみんなと同じように そのファイルに固有のものではありませせず、 それ以上のいずれかの所有権を持っている。 だから我々は所有者、グループがある場合、 そして、その後の世界。 次いで、これらの基の各々については、 3のいずれかの権限ができ、 [OK]、またはその倍数。 あなたは、読み取り権限を持つことができます。 あなたは正しい権限を持つことができます。 そして、あなたは実行権限を持つことができます。 だから、実際のファイルの種類の面で、読み 許可は実際に読むようです ファイルの内容。 右の許可が書いている ファイルは述べている。 実行権が実行されている 次のいずれかを実行したときにあなたが行うようなファイル あなたCS50プロジェクト。 だから我々は、ファイルを考えているとき 我々は、HTMLを読む必要があるときのように 世界が必要なファイル、 読みやすいですよね？ おそらく、また、所有者が望んでいる そのファイルを編集できるようにする。 だから、所有者は、必要があるだろう 読み取りおよび書き込み権限を。 彼らは本当に実行する必要はありません。 グループは、治療しようとしている 今の世界と同じ。 そこで彼らは、読み取り権限が必要です。 しかし、彼らは、ライトを必要としない または実行権限を。 そして今、我々は前者に戻って思えば psetを、私たちが実現することは、これらの一種である バイナリのように見えるでしょ？ 1はいの略です。 なしの場合は0。 そして、我々は実際に翻訳することができます このバイナリへ。 そう進数で110は6になります。 100は4になります。 世界と同じ。 だから、数はあなたが探しになるだろう これの権限が644になります。 あなたがに戻って考えている場合：マイクRIZZO あなたが何かをchmodedとき、私は信じている 彼らはセットの問題に与えた あなたができる場所の例 chmodの644のようなもの して、ファイル名。 644それから、あなたは今、直接見ることができます それはどこから来るのか。 だから、うまくいけばそれがあることになり もう少し明確に。 それから、あなたの男の明確化のために - そうそう、ここでこれが再びです。 だから600は、ちょうど一例になります 所有者が持ってどこに我々はここであきらめた グループながら読み、適切なアクセス権 そして世界がどんな権限を持っていない ファイルにアクセスする。 TOMAS Reimersの：そして、我々は迅速を持っている 一般的なアクセス許可の一覧。 そうディレクトリは、あなたが欲しい 実際に711にchmodする。 クイックさておき - 持っているディレクトリの 実行許可ができるようにすることを意味 ディレクトリを開きます。 画像、CSS、JavaScriptやHTMLのニーズ 644基本的には、世界では、理由 ニーズが読み取り権限。 そしてあなたたちが見てきたPHP、 我々はそれについて話されることはありませんが、 厳密に通常でchmodedさ パーミッション600それは使用して実行だから 所有者のアクセス権。 アプライアンスでは、少なくとも。 MIKE RIZZO：だから、特にない場合は ファイルのタイプを指定 実際に設定する際に必要 このプレゼンテーションまで - 我々はこのために問題があった すべてが正しくchmodedされませんでした - あなたはちょっと、A、取得するつもりだ Forbiddenエラーそのウェブサイト 実際に権限がありません どのようなファイルにアクセスする あなたはそれがアクセスしたい。 そしてもちろん、それを固定することができる - 問題で設定した - 変更することにより、 適切なアクセス許可。 TOMAS Reimersの：そして、最後のコメント すぐに地元の開発である - 我々 これを育て、私たちはただ思った 再びそれを起動するために - あなたは、サーバーの要求があった場合に - ので、ローカルホストを、 例えば、COM、または何でも。 - あなたは、特定のファイルを指定しない、 お使いのコンピュータが起こっているファイル を求めるためてindex.HTMLと呼ばれています。 またはそれは、index.phpの存在しない場合。 涼しい。 だから何もかもの要約ですが、 うまくいけば、我々が紹介してきたこと セクション、および講演会、 これまでCS50中。 そして今、我々は話を開始するつもりだ 約特にライブラリ。 JavaScriptとCSSのライブラリ Webアプリケーションのための。 だから我々は持っている理由1クイック理由 ライブラリは、プログラミングされている - 中多くの問題があります 次々と出現して、プログラミング、 再び、そして再び、そして再び。 あなたは気づくことがあり、その多くのウェブサイト ドロップダウンを有する能力を必要とする メニューは、例えば、または機能が必要 非常に標準的なボタンを持っている ないかもしれないスタイル、 簡単なこと。 今、あなたは、HTMLに入るために始めること ボタンは実際にできることを実感 もしあれば本当に醜いに見える 何もしない。 だから、多くの人々が書かれている ライブラリと呼ばれる。 この文脈では、それらはなら また、フレームワークと呼ばれる。 我々は使用するつもりだ 同じ意味2。 そして、何彼らは、彼らは基本的にしているである コー​​ドの既成部分 - CSSやJavaScriptのいずれか - それの多くを奪う あなたがコーディングを持っているチーム。 そこで、彼らはクラスの束を事前に定義したり、 のための機能の束を事前定義 JavaScriptの場合、その あなたは後で呼び出すことができます。 そして、あなたは、ソート、取得することができます このコードにアクセスせずに 何でもすること。 ライブラリの例は、CS50.H.た それは我々があなたに戻って与え図書館だった 週1で、これはあなたが行うには許可 そのGetIntでとGetStringメソッドのようなもの 書く必要はありません 任意のコードを自分。 MIKE RIZZO：すべての権利。 だからここに、同じように我々は含める必要がありました 私たちのCに異なるファイル ライブラリは、我々はまた、中に含まれている必要があり 私たちのHTMLは異なるライブラリを提出。 例えば、我々は、したい場合 ここで具体的なJavaScriptライブラリ、 おそらく、我々が書いた1 自分自身がローカルにホストされたよう ちょうど私達、script.jsと呼ばれる この表記法を使用しています。 だから我々は、スクリプトタイプの等号を持っている JavaScriptのソースイコール javascript.jsを。 そして、あなたはあなたのCS50に戻って思えば あなたが見ている場合、設定され、金融問題 Templatesフォルダにheader.phpを、 あなたが見ている必要があります これらのいくつかは含まれています。 したがって、この最初の1 - スクリプト - JavaScriptライブラリを含めている。 CSSのライブラリです含む 一味違う。 ここでは、代わりに、スクリプトの あなたがリンクタグが必要にタグ。 そして、テキストCSS方式 多少異なります。 あなたは、常に含める必要はありません RELスタイルシート。 しかし、私は、それは一般的に、だと思う お勧め。 そして最後に、HREF、どれを おそらくリンクするためのあなたのATAGsで見た 異なるリンクだけを指定中 それがどこにあるかのリンクをクリックします。 例えば、我々が望んでいた場合にはリンクする 異なるライブラリ - ちょうど言わせて - それはのstyles.cssに住んでいた。 そして、我々は、その年代にそれをリンクしたいと思った ウェブ上でホストされている、我々はそれをコピーします。 してから何に貼り付け 我々は、代わりに右ここにある。 TOMAS Reimersの：OK、うまくいけば 男はすでによく知られている CSSをリンクする方法と。 あなたはそれにしなければならなかった あなたの最後の茶色のセット。 JavaScriptの、多分あなた方のうちの何人か といくつかの経験がある。 皆さんの中にはいないことがあります。 だから今のために、知っているJavaScriptファイル 非常にあるCSSファイルのようなものです あなたがそれにリンクすることができ、センスまたは あなたは、内部に含めることができる。 そしてそれは、スクリプトの事にあなたを可能にする。 そして、我々はを順を追ってするつもりだ JavaScriptを少し後で。 だから、ライブラリを使用して - あなたがそれを含めたら、それは同様だ 文字通り呼び出すような単純な 関数や追加 それへのクラス名。 私たちが話をしたい最後のこと ライブラリの面で約 - これはテクニカルノートの詳細です - オープンソースのライセンスである。 ですから、これらの実際のライブラリを見つけたとき、 あなたは考えるかもしれない それは私だけだというOKですのような質問 誰か他の人のコードを使用して、特に それは我々が非常に多くのものだから このコースではないためにあなたに言った。 だから、オープンソースライセンスの場合には、 多くの開発者 - 彼らはライブラリを書いたら、 彼らは可能性が考えている 他の人に役立つ - ウェブに公開します それに許諾するもの。 そしてライセンスは、基本的に私はここにいますと言う 他に許可を与える 人々は、このソフトウェアを使用するには 次の並べ替えと 規定。 我々は良いサイトへのリンクを含めました あなたがライセンスを理解するのに役立つ あなたがそれらに遭遇した場合。 一般的な規定のようなものです あなたは私のライブラリを使用して歓迎しているので、 あなたが私に信用を与えるように長い。 あなたは私のライブラリを使用して歓迎している それが故障した場合などであれ あなたは私を責めないでください。 あなたがいる限り、私のライブラリを使用して歓迎している あなたはお金を稼ぐためにそれを使用しないため あなた自身のため。 これらは、一般的な種類である 規定。 このCS50最終的なプロジェクトのために、彼ら スーパー関連してはならないので、 皆さんが使用するプロジェクトです おそらくそうではなく、一種の、知られています。 しかし、あなたが実際に出て行くとき 世界とライブラリを、使用を開始した または同様に実装されてもされなくてもよい 我々はしているより多くの人気のあるもののいくつか 経験してするつもり。 それは理解することができるように良いことだ これらのライセンスおよびへ 彼らが何を意味するか理解しています。 そして帰る。 MIKE RIZZO：わかりました。 だから今の例に移動 実際のCSS。 この時点で、これまでのところ、あなたは可能性がある このが発生しているわけではありません。 しかし、あなたはそれが発生した可能性があります あなたの日常生活どこに何か つまり、1ブラウザ上で一つの方法を探します 同じに見えないかもしれません 他のブラウザでの方法。 これはブラウザのブラウザと呼ばれている 互換性。 ますますそれがますますなってきて 特にとして、問題の詳細 ブラウザでは、より多くの自由を取る 彼らが望むようなものを実装する。 だから、それを克服するために、実際にそこにある Normalize.CSS呼ば大図書館。 TOMAS Reimersの：我々は、リンクが含まれていました。 場合は、この時点では、それは便利です あなたはそこにあなたのラップトップを持っている サイトを見ている。 そして、我々は右のあなたにこれを与えている 今だけの理由CS50決勝 プロジェクトは、実際にしようとしている それを実装するように依頼する 同様にしてブラウザから。 だから、あなたの後ろに保つために ヘッドは、これは素晴らしいライブラリです それがれるため、並べ替え、 物事を標準化する。 Firefoxでは、何かが表示される場合があります 左に1画素として。 して、Chromeは、実際にそれを決定することができる 何を意味することは、10ピクセルだった 左の方です。 そして、あなたはこれを標準化したいと思います。 ノーマライズは、実際には本当に良いを行います ていることを確認して作るの仕事をあなたのサイト ブラウザ間で同じに見えます。 MIKE RIZZO：だから我々だけにしたい場合 本当にすぐにリンクをクリックし、ショー もしそれがあなた、どのようなものか 使用してそれをダウンロードすることができます 巨人のダウンロードボタンをクリックします。 または私はそれについての詳細をお読みになることをお勧め 下にこのリンクをクリックすることで 右上隅。 TOMAS Reimersの：そして、もしあなたが実際 もっと右がReadをクリックして - GitHubの上にソースをクリックしてください - 実際には、オープンソースが表示されます すぐそこLICENSE.mdのライセンス。 そして、あなたがここに表示されますです 非常に人気のあるMITライセンス。 繰り返しますが、テキストを読めば、 あなたはサイト上でそれを見つけることができるでしょう 我々は前に参照されたし、のことができるように 読まなくて、それを理解して 法律用語を通して。 MIKE RIZZO：OK、素晴らしい。 だからノーマライズだ。 私たちはあなたを与えたいと思った 本当にすぐにそれ。 ああ、あなたは疑問を持っているのですか？ 観客：だから、あなたがそれをダウンロードします ちょうど彼らが持っているコードに従ってください [ダウンロード]ボタンの下に？ TOMAS Reimersの：はい、そう あなたがダウンロードしたとき - MIKE RIZZO：ああ、それは素晴らしい点だ。 そこで問題は、何かあった 我々は実際にそれをダウンロードしてください 我々はリンクをクリックするのであれば、我々が表示さ それは実際にポップアップ表示されていること ソースコードを。 それでは、私たちができる、これを実行するには ただ名前を付けて保存]をクリックされます。 名前を付けて保存し、それがすべき ファイルを起動します。 そして、我々は、保存するかを選択できます それnormalize.CSSとして。 そして、あなたはそれをリンクさせる必要があるだろう - TOMAS Reimersの：同じように、あなた 他のファイルにリンクします。 あなたがそれをのリンク一度、素晴らしいものだ ノーマライズについてそれは実際になりますです すべてのハードの世話をする 単体で動作する。 あなたが持っていないことを意味 すべてのクラスを追加します。 あなたは奇妙な何もする必要はありません。 それはあなたなしで正常化します さらに何もして。 はい、あなたはそれを含める必要があります。 Google Chromeは応答していません。 脇だけで簡単に - 私たちは、この飛び込んだ気づいた。 このプレゼンテーションの残りの部分はある 商品の概要になるだろう。 図書館の調査。 基本的に、彼らは何ですか。 彼らは何をすべきか。 彼らは便利だ方法。 どのようにそれらを実装する場合があります。 あなたがそれらを見て開始する場合は、 に沿って、以下、および通読 彼らは、私は非常にそれを奨励する。 別の方法としては、次の作業を行うことも歓迎している それらをダウンロードして起動するなど、 目の前で彼らはちょうど彼らは何を見て ように見えるか、何を持っている場合、彼らが行う あなたの前にあなたのラップトップ。 そうでない場合は、保管して歓迎している 私たちに聞くことは話しています。 我々は話を続けるつもりです。 そして、我々は、うまくいけば、最後に時間を持っている 私たちは実際にあなたを示すに買ってあげる どのようなこれらのライブラリの一部 のように見える。 MIKE RIZZO：クール。 大丈夫、だから今の話しましょう 驚くばかりのフォント。 TOMAS Reimersの：だからフォント恐ろしいです 特にそれらのための本当にきちんとサイト、 あまり芸術的である私たちの 才能。 恐ろしい名前のフォントを無視して、それが与える もしあるアイコンの束 非常に便利。 そう多くの時間はあなたが実装します アイコンあなたはとても素敵Xのようにすることもできます あなたが何かを閉じることができます。 または、[編集]ボタンのいくつかの種類が必要な場合があり のような鉛筆画で 誰もが持っています。 あなたがいることを学ぶとき、それはだ これらのアイコンを描画することはでき 非常に面倒で難しい。 フォント恐ろしい - 実際にあなたの場合 サイトにアクセスしてください - 下のあなたのアイコンの多くを提供します 上部のアイコン。 ええ、まさにトップ。 それはあなたに多くを与える 自由のためのアイコン。 だからここにあなたが私たちのようなものを持って参照してください。 アスタリスク、バー、稲妻、 カレンダー、バグ、本、エトセトラ。 これは非常に便利です。 これを含める方法は、あなたが含まれている 文字通りCSSファイル。 そして後には、CSSファイルを用意しました あなたにできることは、作成され それがためにsatands I.と呼ばれるタグ クラスFAのアイコン 素晴らしいフォント放置。 そして、どのようなクラスを希望する。 私は、このプラスのアイコンを望んでいたので、もし 右ここ正方形、私は与えるだろう それクラスFA。 してからのFAハイフンプラスハイフン広場。 MIKE RIZZO：クール、[OK]をクリックします。 TOMAS Reimersの：そして、最後に、CSS 我々は我々を介して取得するライブラリアール CSSでの最低限のそれを維持しようとしている ライブラリは、我々は実現しないため、 このプレゼンテーションのタイトル JavaScriptのライブラリです。 しかし、我々は我々が同様に可能性があると考え 他のライブラリを紹介 我々は、図書館について話している間。 それは、Googleウェブフォントです。 そして、何Googleウェブフォントを使用するとができます 行うには、あなたのウェブサイトにフォントを追加で それを作るために本当に簡単な方法である あなたのセットを区別することは非常にと それがある場合はすべての人から他の人です 素敵なフォントや、それはいいがある場合 フォントのコレクション。 Googleウェブフォントは、他とは違っていいです それはだという意味で、ライブラリ 本当にガイド付きインストール。 リンクをたどるのであれば、それはだ google.com /フォントは、私は信じています。 あなたはそれをたどる場合は、 あなたのフォントを選ぶことができます。 あなたはから左側に選択することができます 厚さ、傾斜、エトセトラ。 そして、あなたは1を選択したら、 あなたが迅速な使用をクリックすることができます。 すぐそこ。 ボックスの右下。 そして、下にスクロールします。 まず第一に、彼らはあなたのCSSを与えること あなたが実際にそれにリンクする必要があります。 それはすぐそこです。 あなただけをコピーし、それをインチ貼り付けることができます そして、この1のいいところです あなたが実際にしてもする必要はありません ファイルをダウンロードします。 それは何をするつもりだのは、それが起こっているのである それをGoogleのバージョンにリンクする。 だから、戻ってそれが何を意味している。 ときに、ユーザーことを意味 あなたのファイルをダウンロードします - HTMLページには、ダウンロードする - あなたのHTMLの ページには、このファイルを参照しようとしている。 それでは、お使いのコンピュータが見ることになるだろう、 ああ、それはむしろgoogle.comでホストされているのは theirsite.comよりも。 私は、そのファイルは、Googleに問い合わせ行きましょう。 そして、それが含まれるようになるだろう それはほとんどそれがであるかのように あなた自身のサイトの一部。 TOMAS Reimersの：クール。 そして、あなたはそれを含まれれば、その後に あなたのCSSに含め、それはあなたに与えます 実際の行。 だから、財産フォントファミリを設定 フォントの名前と同じ。 MIKE RIZZO：わかりました。 だから我々は単に、CSSに仕上げました。 そして、あなたのいくつかは、まあ、考えているかもしれません 私たちは、CS50財政上のいくつかのCSSを持っていた。 しかし、CSSのライブラリは、ブートストラップだった。 私たちは、実際にブートストラップを少し含ま 後でJavaScriptを下にしているため ブートストラップCSSのライブラリも付属してい JavaScriptのことの多い ブートストラップやTwitter - 誰がブートストラップを作った - そのCSSのすべてを管理するために使用しています。 TOMAS Reimersの：誰もがいずれかを持っていますか これまで一般的には、CSSに関する質問？ 我々は良いしている？ 素晴らしい。 MIKE RIZZO：素晴らしい。 TOMAS Reimersの：だから移動 JavaScriptに上。 MIKE RIZZO：だから我々は話をしたい jQueryはで始まろう。 誰もjQueryのことを聞いたしました 前またはそれを使用して？ ええ、夫婦？ だから、あなただけのネイティブで動作している場合 JavaScriptは、あなた自身を見つけることができます 長いセレクタたくさんの多くを入力する。 それでは、jQueryが行うことは、それが提供される JavaScriptのための素晴らしいラッパー あなたが簡単に選択できます言語 異なる要素を操作 のドキュメント·オブジェクト·モデル内 Webページまたは私が思うに、DOM、 あなたたちは、中の聞いたことが この時点での講演。 TOMAS Reimersの：あなたが聞いたことがない場合 それか、あなたが見ていない場合は、講義 まだ、ドキュメントオブジェクトモデルです 基本的に物事がどのように表現される。 だから、HTMLは一種の木のように見える あなたが実際にそれを引き出すとき。 あなたが上にHTML要素を持っている。 あなたは、頭と体を持っている。 そして、あなたはその内 他のすべてを持っている。 それは、DOMと呼ばれるている - ドキュメントオブジェクトモデル。 そうでオブジェクトを表すモデル 文書では、考えるのは簡単な方法です そのことについて。 とjQueryの素晴らしいところの1 それは本当に横断ますです それと内の要素を操作する その信じられないほど簡単です。 とても簡単、実際には、その大部分の JavaScriptのライブラリやそうでない場合 大多数のものの壮大な大多数 あなたが実際にそのようにjQueryを必要と表示されます 彼らは単に自分自身を実行できることを あなたはjQueryを持っていなかった場合ので、 しようと多くの時間を浪費することになる 特定の選択する方法を見つけ出す 要素とどのように他のことをすることができません。 とjQueryに関する他の素晴らしいところ それは、クロスブラウザの互換性であるということです。 我々は言ったときので、バック覚えて すべてのブラウザで実装されてい 物事と同じように？ これがあっても、JavaScriptでも同様です。 とjQueryの素晴らしい点の1 それが検出されていることである ブラウザと検出 適切な方法。 ですから、要素を選択する必要がある場合は、 Internet Explorerはだと言うかもしれない この方法を行うことになって。 Firefoxは正しいと言うかもしれない 方法は、この方法です。 jQueryは気にしません。 あなたが選択するためにjQueryを指示すると 要素には、それはだ方法を見つけ出すます ブラウザ内でそれを行うことになって ユーザは、現在であり、次に行う それそのように。 MIKE RIZZO：それではについて話すわけにはいきません jQueryのの使用を少し。 PHP、jQueryは、特定のを持っていると同じように ドル記号のための溺愛。 だから、そのいずれかのjQueryを見つけることができます - まあ、それはすべての。 あなたは時々、ドルを置き換えることができます 単語jQueryを使ってサインインします。 しかし、一般的に、それはだからといって 短い、あなたはjQueryがあること見るたびに それはドル記号になるでしょう使用。 そこでここでは、ほんの始まりを見せている DOM内の要素のセレクタ。 ここでは、ドル記号が続いている [開く括弧と引用符による。 および引用符で私たちのセレクタを行く 異なる要素のため。 ただ、CSSのように、我々は、セレクタを必要としてい 異なる要素のスタイルを設定することができる ページ内。 これらの異なるセレクター翻訳する 正確にjQueryとJavaScriptに、 ほとんどの部分。 そこでここでは、ドットのfooを持っている。 あなたが講義を思い出しそうであれば、 ドットはただのクラスを意味します。 だから我々は要素を選択している クラスfooで。 だから私は先に行くと、私たちを開いている場合 JavaScriptコンソールここでは本当にすぐに 私はちょうど入力した場合だけで、それを証明する ドル記号は、我々はそれには、いくつかのことがわかります 登場する機能。 そして、それはただのjQueryによって定義されている。 TOMAS Reimersの：あなたのそれらのため なじみのない、コンソールはツールであり、 あなたがすることができますクロム、内、 基本的には、上でJavaScriptを実行 現在のページ。 これはあなたが非常に便利見つけることができたとき 実際には、デバッグしている のようにする必要があり、現在はどのようなものです。 いくつかのグローバル変数の値か、どのような 何か他のものは何ですか？ これは、例外を除いて、GDBのようなものだ あなたが実際にできること ページ上の要素を操作して それがはるか​​に簡単な方法で。 また、それは、チェック、基本的には、しない それが何かをする前にあなたと内。 一方、そのように、あなたは、同じようGDBがあるかもしれない 必ず、次の手順を実行したい？ リアルタイムでコンソールの。 そのように、ウェブページがレンダリングされると それは、やって何でもやって 理事会はまた、それと並んで走っている。 そして、あなたはに転嫁するコードを配置することができます そのコンソール、その意志 ページ上で実行される。 MIKE RIZZO：だからコンソールに入るには、 私は簡単にする必要がありますね その方法を述べる。 あなたが持つかもしれない最後の問題を 使用済みChromeの要素を検査 機能やページのソースを表示 - それらはちょうどでアクセス可能 ページまたは特定のクリック 要素と検査のいずれかを行って 要素またはビューページのソース。 また、JavaScriptをアクセスすることができます コンソールを直接による 要素を点検選ぶ。 だから、あなただけのコンソールを打つ 一番右側に。 別の方法として、あなたも行っている可能性 右上隅に、 この画面で切り取られる場所 それは3つの水平のバーを持っています。 そして、あなたはツールに下ると それからJavaScriptコンソール ここに場所を確認することができます - 少なくともWindows上で - ショートカットがそれではJ·シフト·コントロールです 私たちは、要素を選択したい場合 このページにある、同じように私が示した 前に、我々はドル記号オープン括弧を行う してから引用している。 興味深いのは、一般的に、ある 単一引用符や二重引用符がある 交換可能。 だから、多くの人々はただ一回の使用 引用符彼らはタイプするより高速だから 二重引用符よりもあなたがいないため、 Shiftキーを押しする必要があります。 だから、僕は今のことをするつもりだ。 だから私は、何かを選択したい クラスを持つ。 コンテナは、私が知っているという理由だけでそれはです 私たちの上にあるもの 今のWebページ。 そして、私はEnterキーを押します。 そして、我々はそれを選択していることがわかります。 だから、表示されることを、それ そのオブジェクトが返されました。 だから、基本的な選択だ。 我々は実際にそれを操作したい場合、 あなたが何かを呼び出さなければなりません その選択に、どの 我々は後に取得します。 TOMAS Reimersの：だからそれを見てする より深く、これは違いはありません 我々はCで行った関数呼び出しより ここで関数の名前です 少し奇妙。 これは、ドル記号です。 それだけで関数の名前です。 それについて特別なものは何もありません。 私たちは、開き括弧を持っています。 その後、私たちは一つの引数を持っている この場合、文字列であることを起こる、 それのためのセレクタである。 そして、我々は我々が持っている 括弧を閉じた。 これだけです。 それはその非常に異なるではありません。 が、それは非常に奇妙に見えるのか。 そして、それは、一種の、固着することができます 多くの人々のためのポイント。 MIKE RIZZO：だから同様に、我々が望んでいた場合 IDを持つ要素を選択するには、 今、私たちはによって選択したい 代わりに、クラスのID。 それはどこで同じようなものになるだろう ただI​​Dのシャープ記号を行います。 だから我々はすべてここに選択している IDのバーを持つ要素。 TOMAS Reimersの：そしてこれが伸びている。 そのCSSが伸びている。 ただCSSのように、あなたはすべてを選択することができます クラスのfooを持っているリンク。 ここでは、それは同じことだ。 あなたが選択するであろうa.fooを行うことができます クラスfooでリンクがすべて表示されます。 あなたは、鋭い棒をする可能性があるだろう IDのバーでリンクを選択し、その などなど。 任意のCSSセレクタが有効である jQueryのセレクタ。 MIKE RIZZO：うん。 [OK]を、ので、今のは少しに取得させ 私たちが行うことができます操作の 私たちのjQueryの。 だから、jQueryの特定の型を持っている 我々だけで使う表記 最後に点在しています。 そして、あなたはこのようなものと考えることができ C私たちは別の構造体を持っていたか。 そして、それらの構造体に入るには、次のようにだろう それに入るために、ドットを使用しています。 これは、一種の、同じようなことです。 今だけ私たちは、この内の機能を持っている 我々はそれを呼び出すことができセレクター。 だからここに、非常に最初の例 あなたが見ることができるCSSセレクタです。 基本的に、どのようなことがないことは、それである これに最初の要素のCSSを適用します あなたが選択したもの - 選択したこの要素 - その値を持つ。 TOMAS Reimersの：のとても簡単翻訳 jQueryの場合には、基本的になり、 ただfooのを取った。 して、CSSで言った、 赤と近い色。 それは同じ考えです。 それは何を行うのは、それを選択したのはです すべてのfoo要素。 そしてそれが適用さだ。 並べ替えのプロパティの色 赤に等しい。 MIKE RIZZO：同様に、我々はまた、変更することができます 何であるかの実際の内容 これは、ページのHTML上に表示 それはあなたのことを意味するので、本当にクールです Webページでは、現在は完全に動的であることができる および静的である必要はありません あなたは、PHPを使用してプリントアウトすることを の先頭に ページがロードされている。 だからここに、我々は変更したい場合 ページの実際のHTML、我々は今だろう HTMLの関数を呼び出して、その、ちょうど 我々はに指定された内容の挿入 我々が選択した要素。 そこでここではで要素を選択している クラスfooと、それはHTMLのだと言って それは今のHello Worldです。 TOMAS Reimersの：そして、あなたが考える時期について の有用な用途は何ですか この、このCSSの1、最初にすること あなたはについて考え始めることができます でも、ドロップダウンメニューの観点から。 あなたは、のようなことを行うために始めることができた ユーザーは、トップ部分の上を移動した ドロップダウンするのではなく、作りたい 目に見える下の部分。 右？ そのようにCSSで、我々は、特性を有する 目に見えるものを作る。 ディスプレイコロンなしのようなもの それは目に見えてしまいます。 Displayブロックは、それが見えるようになります。 またはあなたがより簡単に行きたい場合でも、 可視性の等号のようなものを持っている 見え、視認性が隠されたに等しい。 そして、あなたは物事を実装するために始めることができた のような右のドロップダウンメニュー あなたはどのようにするというアイデアを介して取得した後 これが開いたときに把握することができ、 その我々は非常に簡単にを介して取得します。 しかし、我々は見始めることができます このアプリケーションに最適です。 同じような意味では、あなたがいた場合は、試してみる そして、のは言わせて、チャットを実装 エンジンとあなたは少しを作りたい あなたがしたときはいつでも吹き出しが出てくる あなたが得ると、新しいメッセージが表示されました 新しいメッセージ、あなたは少しを行うことができます 吹き出しを変更することによって出てくる ページのHTML、右？ 余分な吹き出しを追加することで、 そこに余分なテキストを持つ。 うん？ 観客：だから内でこれを埋め込みます 並べ替えのようなHTMLコード [聞こえない]？ MIKE RIZZO：右。 ええ、私たちはそれに買ってあげる 少し中。 ええ、それは同じようなAの PHPを少し。 正確に類似していない。 作るのは良いの区別は何であるか、この 実際に私たちが編集するときに編集している それがであることを行っていないため、ページ されている実際のファイルを編集する 世界ため、サーバー上に保存 権限を持つべきではない あなたのファイルを編集します。 これは単にページ上にあるもので編集されている そして何が内に表示されているのは ブラウザ。 だから、後にページをリロードした場合、 我々のように、何かを削除する、と言う 我々は削除呼び出しで行うことができます参照してください。 そのことは、その後再び表示されます。 TOMAS Reimersの：だから1の方法を考えること 私は、お使いのコンピュータだとあれば、これはある マイクは、一種のサーバである。 何が起こるだろうと、私はするつもりです ねえ、私はのコピーを持つことができ、マイクを尋ねる このWebページ？ そして、彼は私にそれのコピーを与えるでしょう。 いいえ、それは本来のものではありません。 それはちょうどコピーです。 そしてそれは、ああ、のようになる JavaScriptはここにあります。 明らかに、私が編集する必要があります ページは次のようになります。 そして、私はあなたのコピーを編集しています。 しかし、それは達成するないです 実際のコピー。 そして、私は再び彼に聞いていた場合は、 、ページを更新 - ねえ、私は別のきれいなコピーを持つことができます - 彼は私を与えるために起こっている 別のきれいなコピー。 そして、私は同じことをするつもりだ のように、ああ、これは言っている、ここでJS これを編集します。 そして、私はそれをやり続けるつもりです。 MIKE RIZZO：だから本当にクールなこと あなたはjQueryを使ってできることです 実際には異なるタイプを追加 あなたのページへのアニメーション。 あなたが今までどこに見てきたかどうかは知りません あなたが埋めるためにフォームにしようとしている オンラインとあなたは記入しないでください 正しく物事。 これほど少ない事が滑り落ちる 上部にある、あなたが言う これを正しく行っていない。 もう一度やり直してください。 そして、それも、ただ上にスライド可能性があります。 jQueryの関数が組み込まれてい判明 それはすべてのことをする アニメーション本当に、本当に簡単。 だから、フェードが最初にそこにある アウト機能、その あなたが何かに呼び出すことができます。 そしてそれはのCSSを変更する方法です アニメーション化された方法で、その要素。 だから、どのような要素を取り あなたは上のフェードアウトと呼んでいます。 そして、徐々にそれの不透明度を変更する それは完全に透明になるまで。 TOMAS Reimersの：他の人気1 作るとなる、下にスライドさ 何かがそれをスライドさせて表示されます。 だから、ドロップダウンメニューの場合には、 再び、我々は検出するために、どのように知ったとき これがホバーしたときに、 あなただけの、この一番下に言うことができる 一部は現在ダウンしてスライドさせます。 次いで、それが現れる 滑落による。 MIKE RIZZO：そして、あなただけがあれば 念頭に置いて、アニメーションの一部入力することを jQueryは、必ずしも用意されていません。 たとえば、のはjQueryを言わせて スライドをご提供していますか ダウンとスライドアップする。 さて、あなたはスライドしたいと思ったとしましょう 左サイドからまたはからで何か CS50のような適切な種類の メインページはいつ行います あなたは、新しいパネルに移動します。 あなたは、おそらくしなければならない 自分で使用して実装 jQueryの内の関数をアニメーション化。 だから同様に、あなただけのアニメーション化。 そして、その中にかかります 異なる値の辞書 あなたが渡すことになっていること。 だからここでは、アニメーション化したい場合 要素fooはそのようなことを、その幅のどちらか 80ピクセルに伸縮する、 それが現在であるものに応じて。 私たちは、同じようにそれを渡します その中の引数。 他のいくつかの引数を持っているにもアニメーション化 あなたは、たとえば、それを渡すことができますので、 アニメーションの速度 あなたはそれを与えたいと思うことを。 そしてそのためには、私はちょうどだと思います すぐにGoogleのjQueryはアニメーション化。 してから、次のことができ、このページを立ち上げる それは違うの束を持って参照してください。 あなたはそれを渡すことができるプロパティ。 そして、私はなることをお勧めします - あなたが来るたびに、 そうしない何かを越えて 知っているか、単にについての詳細を学びたい あなたが呼び出すことができ、特定のメソッド 何かに - ちょうどそれをグーグル。 jQueryは非常にある 十分に文書化。 そして、多くの場合、多くの時間がある 彼らはあなたのために提供する例を示します。 我々は下にスクロールした場合 - ずっと下 - 我々としても、使用することができます。 繰り返しますが、開発者が実際になったとき 書き込みaの手間を ライブラリ、これらは典型的に欲しい それを使用する人。 だから、横にしようとしている ドキュメントも。 そして、そのドキュメントは、通常することができます あるプロジェクトのページ上で発見 なぜ我々はあなたのその元のサイトを与えた にあなたをリンクし始め、 プロジェクトページのことができますので、 そのドキュメントを参照してください。 一般的には、ケース内のプロジェクトページ [聞こえない]のではなく、あなたに言った クラスの名前。 のJavaScriptの場合には、得られる あなたの関数の名前。 ところで、我々は上までスクロールすると、 機能のクイックサイドノートです あなたが実現される機能を見るたびに ハードでこのような 中央のブラケット、その手段 そのプロパティがオプションであること。 ちょうどヘッドアップ。 私は多くの質​​問を見てきました そのことについて。 そこでここでは見ることができます アニメイト、プロパティを取る 必要な引数として。 そして、他のすべてはオプションです。 サイドノート - あなたは、並べ替え、これと考えることができます manページのような、の。 manページには、Cのドキュメントであり、 他の多くのもののためだけでなく。 MIKE RIZZO：だから我々は学習した内容 ページ上の別のCSSを変更し、 それをアニメーション化し、HTMLを追加、削除。 しかし、実際に最も強力なの一つ JavaScriptの約物事 特にjQueryの - 何それはあなたが行うことができますことはへの対応である 起こるさまざまな要素。 例えば、ここで我々は持っている イベントハンドラ。 そして、それはちょうどたびに、このことを意味する イベントが発生し、我々はそれを処理する 特定の方法。 だからここに、一般的なjQueryのイベント ハンドラは、上のドットである。 そして、まず最初にあなたが提供 どのようなイベントは、それが必要である のリスニングをする。 だからここでは、そのクリックの 我々は待っている。 TOMAS Reimersの：別の方法として、次のものが ホバーで、これは非常に人気の一つです。 だから、戻ってメニューのアイデアダウン私のドロップします。 あなたは、ホバーの一番上の1を持っているでしょう。 それから、あなたはそれを変更することができます。 MIKE RIZZO：右。 次いで、それが起こるときに、それだけで 我々はそれを与える、この関数が実行されます 引数としてその それはハローアラートまたはこんにちは。 TOMAS Reimersの：だから例中 JavaScriptは、これは我々がする必要がある場所です 実際に我々はできるCから自分自身を削除する 引数として関数を取る。 との多くは実際にそこにある これを行うための複雑な方法。 私たちは一つの方法を推進するつもりだ、 これはユーザーが定義することができます すぐそこに機能。 だから、関数として求めているとき パラメータには、あなたは基本的にしている 関数を定義しようとして その場で。 そして、あなたは関数を定義する方法 JavaScriptであなたがある 文字通り機能を言う。 その後、通常は、名 関数の。 しかし、我々は、参照しようとしていることはありません この関数は、再び。 だから我々は無名のままにしておきます。 その後の括弧は、括弧 括弧し、その内のコード。 だから我々は、この缶を理解する 少し混乱する。 だから我々はあなたの一般的な形式を与える イベントハンドラはどのようなものか 以下に、そのイベントになります。 そして、その中にあなたのコード。 MIKE RIZZO：任意のはありますか このことについての質問？ これは少し混乱することができます あなたがそれを見ることは初めて。 TOMAS Reimersの：あなたが実際にしたい ファイルを開いて、それらをいくつか示し jQueryの今？ MIKE RIZZO：うん、それをしてみましょう。 [OK]をクリックします。 TOMAS Reimersの：だから今我々はしている アプライアンス内。 そして、私たちがやったことは我々が撮影したある てindex.HTML両方を作成する自由を にリンクしているファイル、 JavaScriptファイル。 そして、我々は開くことができます - うん。 まあ、それは2つのことを行います。 最初には、リンク先である JavaScriptファイル。 そして、我々はここでそのアップ表示されます。 我々は頭の中でそれを参照してください。 HTMLドキュメント、特に。 だから、そこにいることがわかります 我々は、基本的には、SRCを言う、 どのソースを表します。 そして、それは、URLの。 だからここに私たちがしたと言うことができます jQueryを含んでいた。 そして、我々はまた、スクリプトを用意しました。 JavaScriptを含めるために他の方法です あなたは、インラインスクリプトを含むことができること 我々はそれ底に持っているように、タグ スクリプトタイプがテキストのJavaScriptであると言います。 だから我々は我々がしている、聞いて、と言っている スクリプトを含めることについて。 そして、そのスクリプトのタイプです テキストの一種ではJavaScript、。 非常にシンプル。 MIKE RIZZO：だから、これは、種の、に到達 我々には方法についてのご質問 私たちのファイルにJavaScriptのときに我々のため PHPは、我々はこのような何かをしていた。 そして、私たちのPHPの機能を持っている - それでは株式が行うとしましょう それと何か - そこに行く。 しかし、今、私たちはスクリプトタグを持っている 我々はそれを与えることが、実際にある HTML自体の一部ではありませんので、 それのようなHTMLファイルであること偽造 PHPであるあなたが実際に行く場合、以下の原因 そして、ページのソースを見て、 あなたはそこで、これらのスクリプトタグが表示されます JavaScriptが関連付けられていると その中で彼ら。 それでは、私たちがしたい場合 いくつかのJavaScriptを書く - ちょうど私たちが身体を変えたいと思ったとしましょう 今私が持っていないため、 私は実際に可能な他のタグ 体のほかに編集します。 ちょうど私がしたいとしましょう それのCSSを変更してください。 だから我々は先に行くと、変更します 赤にそれの色。 だから私は、ファイルを保存します。 、リフレッシュし、私たちのWebページに戻りましょう それが自動的にそれをしない それは待っていたようにそれはいないようでしたので、 我々は聞いていなかった、まったくないため そのようなイベントか何かのために。 TOMAS Reimersの：だから我々はそれに戻っている場合 特にファイル - HTML ファイル - あなたが行っているものを 表示するには、我々が持っているである - これがロードされていることを覚えて、 年代順に、一種の。 だから我々は最初の頭を持っています。 それは、これらの2つのファイルをロードします。 その後、我々は、体にアクセスしてください。 そして、我々はこんにちは、世界を参照してください。 だから我々はハローワールドをレンダリングします。 そして、我々が持っている最後のもの 私たちは、スクリプトタグを持っている。 それはだからので、スクリプトタグが実行されます 何のために待機することを語っていない。 そして、それは最も基本的だ JavaScriptを実行する方法。 ということで、スクリプトを置くことができます ヘッダーにまでタグ付けだけ この点を示すために？ そして、それを実行します。 我々は、それに気づくになるだろう 色を変更しませんでした。 そして、これは問題の一つである JavaScriptは物事がロードされていることである 年代順に。 だから、時とそのコード 実行されていた、我々は選択した - 戻る - bodyタグ。 bodyタグはまだ存在しないため JavaScriptは、HTMLに沿ったものです。 だから、ブラウザが選択ボディのようなものです。 まだそのようなことはありません。 だから我々はそれを無視することができます。 そして、我々は続ける。 そして、我々は、bodyタグを定義します。 しかし、それは更新されることは決してありません。 だから、スクリプトを実装しているとき タグ、必ず場所にする bodyタグの後。 次のスライド。 MIKE RIZZO：わかりました。 だから我々は何を変更しました。 それが答えのように、それは見ていない 私たちはまったくそれだけの種類のため、 とすぐにページをロードとしてそれをやった。 だから今、代わりにこれを行うのは、なぜ 私たちは、イベントハンドラを追加しないでください。 それでは、何かをやらせる 身体に再び。 とのは、我々はそれを行うこととしましょう​​ - クリックしてください。 私たちは、機能を追加します。 TOMAS Reimersの：レッツ·チェンジ それが再び赤に色です。 なぜでしょうか？ MIKE RIZZO：ええ、みましょ変更 再び赤に '色。 わかりました。 それでは、ページをリロードしてみましょう。 [OK]を、我々が表示さ - 予想通り、それはまだ赤く点灯しません。 しかし、我々は先に行くと、それをクリックすることもできます。 TOMAS Reimersの：それが赤色に変わりはない。 MIKE RIZZO：そしてそれはありません 期待どおり赤に。 TOMAS Reimersの：そして、我々はどのように見ることができます 我々は非常に基本的な構築を開始することができます 相互作用。 私たちがやりたいことがあります他のものであり、 私たちは、身体を作るためにしたくない場合は、 カラーレッド、のはHTMLを作ってみよう 背景色の赤。 ちょうどので、それは同じCSSです。 そして、我々はそれを変更するとき、私たちはこれを見ることができます 変えるのは非常に劇的な効果 ページ全体。 ので、もう一度、あなたが物事を実装している場合、 あなたは一つの成分を持つことができます その上でクリックすることを意味する。 それでは終了]ボタンを言わせてと 全体の他の構成要素、 これに応答することを意味する。 だから、ウィンドウが削除される それが起こるとき。 MIKE RIZZO：わかりました。 ほんの一例として - この先には見られませんでした - 私はちょうどそれがどのようなものかを紹介します 我々は何かを隠すときのように。 だから私は先に行くだろうと上にスライドん。 TOMAS Reimersの：でそれをラップする 段落の種類、我々はそれを行う前に、？ MIKE RIZZO：わかりました。 ええ、なぜ我々はちょうどそうそれをしないでください 我々はもう少しそれを選択することができます。 TOMAS Reimersの：とletの それにクラスを与える。 MIKE RIZZO：うん。 [OK]を、ので、見てみましょう。 代わりに、実際のボディを選択する 今、私はちょうどですべてを選択します ここでは、クラスのhello、 ただ一つのことを持っている。 だから我々はする必要はありません そのことについて心配している。 だから私はそれを更新します。 私が先に行くと、それをクリックします。 そしてそれは、一種の、奇妙なスライドをしました それを見ていない最高のもの、 魅力的。 一般的に、彼らはかなりいいますか。 いくつかのために - 私は、この推測 理由 - しませんでした。 私はちょうどので、フェードアウトをやる あなたも、その時に見ることができます。 非常に良く。 そして、私はJavaScriptを開く場合は、 再びコンソールと我々は何を見たい それは我々がそれをフェードインするときのように見える 今、私はちょうどそれにフェードインを呼び出します。 そして、それはピンを見るにはフェード 同様に、私たちは実際にも渡すことができます フェードインやフェードアウトの引数、 これ、ちょっと、それの速度である。 それでは、先に行くと、私たちが望むとしましょう それはフェードインゆっくり行く だから私はそれはまだだったと思います かなり速い。 しかし、それは以前よりも遅かった。 TOMAS Reimersの：そして、あなたが検索したい場合は、 再び、これらの事についてのより多くの、 ただ、jQueryの説明を見る 私たちはあなたを与えられ、読んだどの これらを通じて。 彼らは、それらの機能を文書化 非常によく。 MIKE RIZZO：わかりました。 ので、私は話を戻し、このに行こうと思います。 そして、我々は我々の最後のページについて話すことができます。 まあ、我々は、ブートストラップで終了することができます。 そして、我々はそれを開くでしょう いくつかの質問について。 そしてあなたたちは、その任意のアイデアを持っている場合 あなたが投げると見てみたい 我々はそれらを実装することができる場合 JavaScriptを迅速。 だから、本当にすぐにブートストラップについて、どの 自動的に含まれていた CSSのフォルダに設定され、最後の問題 そして実際にあなたににリンク header.phpの。 だから、そのクラスを追加することもでき それにブートストラップ内で定義されています。 そして、それは自動的にスタイルだろう それに応じてそれらの事。 TOMAS Reimersの：だからブートストラップは非常にある 人々によって開発された魔法の事 ツイッターで。 とそれが何を意味されたことだった - ウェブサイトは、作るのは本当に難しかった前 我々が持っていた場合は特に、見栄え 共通コンポーネントがたくさん。 だから、上のボタンがたくさん ウェブは、同じように見えた。 テキストフ​​ィールドの多くは、にすることができる 標準のテキストよりもよく見える あなたはおそらく本当にから知っている分野 本当に古いウェブサイトや不完全た まさに文字通りのように見えるウェブサイト、 テキストの任意のフォームのないテキストボックス 影や素敵なアウトラインのあらゆる種類の。 それでは、ブートストラップがやったことは、それはよく、と言われた 我々は多くの共通のスタイルを持っている。 なぜ我々は、CSSの1共通セットすることはありません やJavaScriptなどの共通セット で、これも、それをスタイルすることができます 人々にドロップのようなものを与えることができます 人々を与えることができ、メニュー、ダウン モーダルのようなもの。 モーダルは、ページの上にポップアップ表示されものです それは厳密に言えばだときはいつでも さらに抑制する何か、 あなたまでの相互作用 それと対話する。 このようなものは、あなたが確信しているである あなたはこの事を削除しますか？ あなたは本当に他に何もすることはできません あなたがイエスと言うか、いいえまで。 それは、このすべてを取り、それをパッケージ化 一緒にここで行く、と述べた。 人々は今、これを使用することができます。 そして、あなたはそれを上に見つけることができます getbootstrap.comで。 これは、自動的に内部に含まれていた 最後の問題は、設定してください。 そして、あなたはに大歓迎だ あなたの最終的なプロジェクトでそれを使用しています。 そして、あなたはそれをフォローしたい場合は、 ブートストラップを入手するためのリンク。 あなたがここに表示されますです CSSのサイトをブートストラップ。 ブートストラップが表示されます。 あなたが下にスクロールした場合や、次のように表示されます どのようにするには、それをダウンロードする方法 それをインストールし、エトセトラ。 MIKE RIZZO：そして、あなたはすることもでき、 興味深いことに、それをカスタマイズする テーマのどのような種類で あなたが望むこと。 私は私が私のためにした何かを知っている 私はクラスを取った最後のプロジェクト それをカスタマイズした。 ブートストラップとは異なるバージョンという 異なるカラースキームを持っていたし、 いくつかの異なる形状 別物。 だから私はそれでプレイすることをお勧めします。 それは、何が楽しいのようなものだ。 TOMAS Reimersの：トップを見ると 再び、それがフォントに非常に類似してい すごいサイト。 資料の多くが始まります あなたがした場合にも同様のようでする それを十分に見られる。 そこでここでは、CSSを持っている このコンポーネント。 そして、あなたはどのように表示されます 物事のスタイルを設定することができます。 ですから、例えば、テーブルをクリックすると、 あなたは即座に行うことができます テーブルはかなり単純に追加することで、 それにクラス表。 ボタンのと同じこと。 あなたは、単にクラスBTNとBTNを追加した場合 デフォルトまたはBTN一次、次のことが可能 これらのボタンのいずれかを取得 これらの既製のスタイルを持つ。 そして、あなたが探しているなら 単によりも複雑なもの Wは既に以上に、持っているものをモデルチェンジ トップ私たち全体のJavaScriptのタブ コンポーネントの束を持っている。 そこでここでは、トランジション、モーダルを持っている、 ドロップダウン、タブ、ツールチップ。 ツールヒントは、あなたの下にポップアップ表示ものです あなたが何かにホバーマウス。 ポップオーバー、アラート、ボタン、折りたたみ可能 アコーディオンは何ですか 彼らは通常と呼ばれています。 カルーセル、そのフリップ のようなイメージを通して。 ので、これらの構成要素である ブートストラップの。 私がすることをお勧めだろう 非常にそれらを見に行く。 JavaScriptコンポーネントがあります およびCSSコンポーネント。 あなたがするようにそれらを使用して自由に感じる。 我々は彼らにあまり行くつもりはない 我々は文書を感じるので、 本当によく行われます。 そして、ええ。 あなたはそのことについて質問がありますか？ MIKE RIZZO：本当に速いですように 側、このWebページのデザイン、その 我々はすぐに一緒に入れる このプレゼンテーションは、 実際にブートストラップを使用して行う。 ご覧のように、我々はこれらをクリックすると、 別のタブには、私たちは実際にしていること この電流index.htmlページを離れる。 それでは、我々が持っていることは違うdiv要素である このindex.htmlを内。 そして、我々は別のをクリックするたびに タブは、それだけで変更することだ その1の表示しています。 だから、それに応じてそれらを配置し、 ページのHTMLを変更することにより、 現在のタブをアクティブとしてマークされているので、 それは異なって表示され、ルックス 本当に素晴らしい。 TOMAS Reimersの：だから、すべて行われていた 私たちは、ほぼすべてのCSSを記述することなく。 また、上部にヘッダーが表示され、 どの色が私たちによるものである。 しかし、実際には上に置く ページの最上部となっ それスクロールはブートストラップだった。 してからでも、他のライブラリのための - この 我々は話を1が、1ではありません 必要に応じて、あなたは、Googleができます。 これはprettify.jsと呼ばれています。 そして、それはあなたのコードを構文強調表示します あなたは、CSSとJavaScriptの両方を使用するため。 我々が話をしたい最後のこと 我々はにあなたを解放する前に、 把握するために、ライブラリを見て、世界 うまくいけば、それらを使用してする方法、 ドキュメントを読んで、何があな​​たを見つける 必要がライブラリを検索する方法です。 したがって、最初は我々だけだです Googleにプッシュする。 Googleにアクセスしてください。 それは我々が何をすべきか、文字通りのときに我々 我々は、Googleで何かをする必要があります。 JavaScriptライブラリが存在することを 私は時間を操作することができます 便利な方法？ だから私はいくつかのユーザーが作成することがわかっている場合 ここでアカウントがあり、これは 現在の時間、どのように計算することができます しなくても、それとの違い それを自分で計算する？ だから、これは実際には一般的なことですが、 JavaScriptのランタイムライブラリ。 そしてここで我々Moment.js- - 最も人気のある1。 我々は、操作するためのライブラリが必要な場合 色ができるようにしたいもの ランダムな色の束を生成する - 場合によっては、生成する スタイルや何か - 我々は次のようにGoogleの可能性 JavaScriptのカラーライブラリ。 そして、私は我々がポップアップ表示さだろうと思う 千、そのうちの1。 あなたがそれらを介して読み取ることが歓迎している。 だから、ほとんどのもの - あなたがそれらを見つけるとき - 行くのはの1でホストされている サイトのホスト·コード。 彼らはしている、いくつかの人気のあるものである。 することで、最も人気のある ズーム、github.comである。 そして、あなたはGitHubのに行けば、それが実際の ノーマライズは、ホストされた場所。 あなたが戻って、その1へ行きたいのであれば。 彼らにそれを表示します。 MIKE RIZZO：そして、それは実際の あなたは気づいている場合、これは、あまりにもホストされています。 TOMAS Reimersの：うん。 ですから、正規化することを超えた場合 とGitHubのに移動します。 それはあったでしょうか？ MIKE RIZZO：その小さな猫の事 GitHubのシンボルです。 TOMAS Reimersの：ああ。 だから、GitHubの呼び出されたメソッドを使用しています コー​​ドを格納するgitの。 あなたはそれがあるかわからないです それはそれで結構です、あなたを怖がらせる。 あなたは、Gitが何であるかを知っている必要はありません GitHubのは、[ダウンロード]ボタンを持っているので 右下の。 知っている他の有用なこと GitHubのはほとんどの製品は約 私を読む必要があります。 そして、彼らはウェブサイトを持っていない場合、 私はどのようにして話をします読んで 何それ、あなたがそれを使用する方法、それをインストールする んが、エトセトラ、エトセトラ、エトセトラ。 私たちは基本的にしてきた あなたを歩く。 MIKE RIZZO：インターネットの辞職。 TOMAS Reimersの：それは結構です。 我々が望んでいた最後の二つのこと について話をする - 私たちは、Gitの話をしました - トラブルシューティングです。 そして、この1は、場合とは関係ありません そのまま最終生成物 あなたは50を離れるとき。 そして、あなたは製品に実行したとき ライブラリの実装や実装 あなたが行っている独自のプロジェクト、 質問があるか、だために 質問を探しに行く。 もう一度、それをグーグル。 それは文字通り、私たちは何をすべきかだ。 これは愚かに聞こえるだろう。 しかし、文字通り、我々はそれをグーグル。 そして再び、最初のものの1 あなたが通常に実行することになるでしょう 素晴らしいですstackoverflow.com、 質疑応答光景。 それは素晴らしいです、両方のことができますので、 質問を投稿して探し 答えだけでなく、ために それは既にたくさん持っている そこにコンテンツを事前に入力。 だから、通常、プログラミングをGOOGLEとき 最初の内の質問 夫婦は、すでに実行された可能性がヒット 問題のセットの間にそれに。 そして、最後には本当に簡単な事 今日はしました - あるJSFIDDLE、ある と多くの仕事をしてい JavaScriptをHTML、CSS。 JSFIDDLEは基本的に、Webアプリケーションである あなたは、あなたのHTMLを取るすることができます 左下、およびJavaScript あなたのCSSの右上。 そしてそれは、レンダリング迅速に作成することができます それを、それをどのように相互作用するかを参照してください。 人々がしようとしているとき、それは非常に便利です 概念実証をしたい これはどのように行うのと ドロップダウンメニューを行います。 多分クイックアンカバードまたは何でも。 MIKE RIZZO：だから行ってみよう 先にこれをクリックします。 簡単なメモ - 我々は前にいたのに対し、 クリックでやって。 JCorey韓国も組み込まれてい判明 Clickイベントハンドラでそのこと それはあなたがしている数字という理由だけで使用しています たくさんのことをしたいとして あなたが何かをクリックしたとき。 同様に、それはまた、ホバーを有する。 しかし、の全範囲を取得する それらは、jQueryのを見て ドキュメントとそれを行う。 私はここで愚かな何かをした。 TOMAS Reimersの：だから私は本当に迅速を持っている 右ここでプログラムは言う クリックボタン。 その後、我々はループのために持っている。 私は未満404あるため。 それだけでポップアップするだろう これらのアラートメッセージ。 MIKE RIZZO：そして、何だった コー​​ド404は、HTMLに立っていた？ 誰もが覚えていますか？ 右、見つかりません。 Chromeはまた、これはきちんとした追加 どこにあなたができることは - TOMAS Reimersの：人々が好きだから マイクは、このをたくさんやってスタートし、 ことができます迷惑なユーザーは、 あなたの情報を参照します。 MIKE RIZZO：うん。 TOMAS Reimersのは：我々はすべての質問がありますか これについては、JavaScript約 ライブラリ、ライブラリを見つけたり、 どのようなWeb開発ルックス 現実の世界で、気に入りましたか？ 私たちは、時間に対して、最大実行している。 だから私は、私たちが行っているか分からない 実装するための時間を持つこと それは本当に迅速でない限り。 我々は良いですか？ MIKE RIZZO：皆さんが好きなことは何 2、のような、本当に素早く確認する 分以内？ TOMAS Reimersの：何でも 我々は明確にできますか？ どのように書く方法 - 観客：[聞こえない]？ MIKE RIZZO：はい、そうthat's - TOMAS Reimersの：あなただけヒットすることができます ウェブサイト上のコントロール-U。 MIKE RIZZO：ああ、私はそれを知りませんでした。 TOMAS Reimersの：私は思う、うん。 コントロール-U。うん。 MIKE RIZZO：ああ、だからです ウェブサイトのためのコード。 しかし、あなたが実際にダウンロードしたい場合は、当社 ファイルとすべてのもの、それがホストされています github.comに TOMAS Reimersの：私の名前をスラッシュ - トーマスReimersの - スラッシュ CS50ハイフンセミナー。 MIKE RIZZO：そして、あなたができる そこにすべてを見つける。 TOMAS Reimersの：これは何GitHubのです ところで、次のようになります。 ので、もう一度、あなたがオープンソースを見ると このプロジェクトは、一般的に、彼らは読むことができます 私そこにあなたが読むことができる。 あなたが戻って行く場合、あなたはそのことに気付くでしょう あなたがダウンロードZIPを持って、その意志 あなたがソースをダウンロードすることができます インクルードするコード あなた自身の事で製品。 MIKE RIZZO：ええ、私たちはただクリックした場合 本当にすぐにindex.htmlを上 - TOMAS Reimersの：あなたがここに表示されますの 当社のウェブサイトのソースコード。 MIKE RIZZO：また、私は右にプッシュするのを忘れた 大きなテーブルの前にそれ 含まれていますが、表にはあります 我々は含まれて書き込み可にモードを変更する ちょうどあなたの明確化のために。 しかし、我々はすべての方法を下にスクロールした場合 一番下、我々は実際には非常にしませんでした JavaScriptをはるかに これとは全くもの。 それは、すべてのものからのみです 我々が持っていたことを、他の。 だから、来て皆さんに感謝 と聞いて。 我々は、これが本当に役に立ちました願っています。 あなたは、関連するすべてのJavaScriptを使用している場合 質問やほとんど話をしたい 他にどのようなクールなもののように他に何 あなたは、JavaScriptを使ってできる、私たちは大好きです あなたと話をする。 TOMAS Reimersの：あなたが質問がある場合 あなたのプロジェクトについて、またはこれがあることができれば 関連する、我々は、おそらく固執う この後少し。 しかし、それ以外の、持っている 良い週末。 MIKE RIZZO：ええ、お楽しみください。 君たちを参照してください。 TOMAS Reimersの：じゃあね。