1 00:00:00,000 --> 00:00:07,440 2 00:00:07,440 --> 00:00:08,180 >> TOMAS Reimersの：こんにちは、誰もが。 3 00:00:08,180 --> 00:00:09,250 私の名前のトーマスReimersの。 4 00:00:09,250 --> 00:00:10,500 >> MIKE RIZZO：そして、私はマイク·リッツォよ。 5 00:00:10,500 --> 00:00:12,990 >> TOMAS Reimersの：私たちは、CS50s TSの2つです。 6 00:00:12,990 --> 00:00:18,910 そして今日はセミナーをリードしている WebアプリケーションのためのJavaScriptとCSS。 7 00:00:18,910 --> 00:00:22,140 あなたが一緒にフォローしたい場合は、 リンクがすぐそこを超えている。 8 00:00:22,140 --> 00:00:25,190 そして、あなたはそれを我慢したくない コンピュータに簡単に？ 9 00:00:25,190 --> 00:00:27,460 >> リンクがあります。 10 00:00:27,460 --> 00:00:30,390 それはへのリンクがあり、小さなサイトです 我々はあることを行っているすべてのリソース 11 00:00:30,390 --> 00:00:36,490 今日あなたを指しているともたくさん持っている に私たちによって書かれた有益な情報 12 00:00:36,490 --> 00:00:39,680 あなたが戻って行くとき、深さ続きを読む あなたは覚えてしようとしているもの 13 00:00:39,680 --> 00:00:42,166 正確に私たちは、あなたが何であったか、言った エトセトラ、の話。 14 00:00:42,166 --> 00:00:43,870 >> MIKE RIZZO：すべての権利。 15 00:00:43,870 --> 00:00:44,890 それでは始めましょう。 16 00:00:44,890 --> 00:00:45,700 >> TOMAS Reimersの：だから、開始したい？ 17 00:00:45,700 --> 00:00:45,970 [OK]をクリックします。 18 00:00:45,970 --> 00:00:47,170 >> MIKE RIZZO：うん。 19 00:00:47,170 --> 00:00:51,730 だから我々は第1の広いで始めたいと思った インターネットについての概要と 20 00:00:51,730 --> 00:00:54,240 ウェブサイトを設計するときにファイルタイプ。 21 00:00:54,240 --> 00:00:57,550 このプレゼンテーションでは、我々がしたいんが JavaScriptにたくさんくらい入る 22 00:00:57,550 --> 00:01:00,320 その後、私たちは始めるしたかった ただ、ちょっと、のような鳥瞰図 23 00:01:00,320 --> 00:01:03,270 ウェブサイトが何であるかの、どのように 設計について考える 24 00:01:03,270 --> 00:01:04,800 開始のためのウェブサイト。 25 00:01:04,800 --> 00:01:08,370 >> この時点で、だからみんな、 - それに 金曜日の夜であることは - 持っている必要があります 26 00:01:08,370 --> 00:01:11,000 あなたCS50ファイナンスを提出 問題が設定されます。 27 00:01:11,000 --> 00:01:15,260 うまくいけば、それは良い味だった どのようなウェブプログラミングすることができます。 28 00:01:15,260 --> 00:01:18,261 しかし、ここで我々は、この種の、与えたい あなたが別の味だけでなく、。 29 00:01:18,261 --> 00:01:23,190 >> TOMAS Reimersの：だから何を要約する あなたにあなたのURLを入力すると、どうなる 30 00:01:23,190 --> 00:01:26,650 Webブラウザは、そのURLを取得 コンピュータ内で検索。 31 00:01:26,650 --> 00:01:28,590 そして、あなたのコンピュータの接続 別のコンピュータに、 32 00:01:28,590 --> 00:01:29,890 もののウェブサイトをホストします。 33 00:01:29,890 --> 00:01:33,150 あなたはgoogle.comに行くとき、OK、そう、あなたがしている Googleののいずれかに接続 34 00:01:33,150 --> 00:01:36,496 持ってコンピュータ、 google.com用のファイル。 35 00:01:36,496 --> 00:01:38,750 >> その後、特定のファイルを要求します。 36 00:01:38,750 --> 00:01:40,020 もしそうなら、あなたはに行く - 37 00:01:40,020 --> 00:01:41,550 私は知らない - 38 00:01:41,550 --> 00:01:48,170 example.com / index.htmlのか/ test.htmlという、 あなたが求めるつもりだ 39 00:01:48,170 --> 00:01:49,340 その特定のファイル。 40 00:01:49,340 --> 00:01:52,780 Webサーバーが起こっている それをあなたに戻ります。 41 00:01:52,780 --> 00:01:54,910 >> その後、そのファイルを通過後に - 42 00:01:54,910 --> 00:01:57,750 43 00:01:57,750 --> 00:01:59,950 あなたがしてもらった上のコンピュータを取得すること ファイル - それは開始する予定だ 44 00:01:59,950 --> 00:02:00,820 Webページを構築することができます。 45 00:02:00,820 --> 00:02:03,020 だから今では、HTMLファイルを持っている、 並べ替えのようである 46 00:02:03,020 --> 00:02:05,170 ウェブページの構造。 47 00:02:05,170 --> 00:02:08,620 HTMLファイルも参照することができ 定義のCSSファイル、 48 00:02:08,620 --> 00:02:09,889 Webページのスタイル。 49 00:02:09,889 --> 00:02:12,970 >> 定義するJavaScriptファイル、 Webページとの相互作用。 50 00:02:12,970 --> 00:02:15,200 ちょうど画像である画像ファイル、。 51 00:02:15,200 --> 00:02:19,450 おそらく、他のHTMLファイルへのリンク そのあなたが次に訪問することができます。 52 00:02:19,450 --> 00:02:22,656 53 00:02:22,656 --> 00:02:24,380 >> MIKE RIZZO：OK、素晴らしい。 54 00:02:24,380 --> 00:02:28,980 だからみんな、おそらく、すべてを持っている 苦労してローカルホストを設定 55 00:02:28,980 --> 00:02:30,810 仮想マシン上で。 56 00:02:30,810 --> 00:02:35,650 そして、ちょうど、この種の、ローカルであること お使いのコンピュータでのみホストするドメイン 57 00:02:35,650 --> 00:02:38,760 独自のIPアドレスにあるあなたがのために。 58 00:02:38,760 --> 00:02:43,300 >> だから内で、あなたは追加することができます それにあなた自身のWebページ。 59 00:02:43,300 --> 00:02:47,655 私はあなたが持つべき、CS50ファイナンスでは、平均 いくつかのHTMLページを、添加し、 60 00:02:47,655 --> 00:02:49,410 並べ替えの、PHPのラッパーに包まれた。 61 00:02:49,410 --> 00:02:54,690 しかし、最終的には、どのようなあなたのPHPページ HTMLはして出力された。 62 00:02:54,690 --> 00:02:58,210 >> しかし、非常に先頭に戻って考えて PSETのでは設定する必要がありました 63 00:02:58,210 --> 00:03:00,890 すべての権限、権利？ 64 00:03:00,890 --> 00:03:07,270 だから、これはただ、基本的に私たちが知ることができます 誰が、読み取り、書き込み、および場合によってはでき 65 00:03:07,270 --> 00:03:08,730 各ファイルを実行します。 66 00:03:08,730 --> 00:03:11,870 HM - だから我々は、迅速にやろうとしている？ 67 00:03:11,870 --> 00:03:15,660 >> TOMAS Reimersの：だから我々は行っている 簡単なデモをすることができません。 68 00:03:15,660 --> 00:03:19,560 ときに、だから、あなたを思い出させるために Googleのコンピュータへの接続 - 69 00:03:19,560 --> 00:03:20,690 誰 - 70 00:03:20,690 --> 00:03:24,060 最初、ファイルをコンピュータに尋ねる 必ずあなたが権限を持っている行う必要がある 71 00:03:24,060 --> 00:03:28,790 実際にそのファイルを表示したり、それを読んで あなただけ頼むことができないため、ファイル 72 00:03:28,790 --> 00:03:30,430 そのコンピュータ上の任意のファイルのために、右？ 73 00:03:30,430 --> 00:03:32,260 つまり、セキュリティの危険になります。 74 00:03:32,260 --> 00:03:37,020 >> のような私たちが使用しているシステム上のファイルなので、 このCS50アプライアンスは、3を持っている 75 00:03:37,020 --> 00:03:39,200 持つことができ、一般的な人々 何かへの権限。 76 00:03:39,200 --> 00:03:41,610 最初は、実際のです 言ったファイルの所有者。 77 00:03:41,610 --> 00:03:43,820 二つ目は、そのグループである ファイルが所属。 78 00:03:43,820 --> 00:03:46,090 我々は集中するつもりはない その上であまりにも多く。 79 00:03:46,090 --> 00:03:50,010 そして最後は次のように、一種の、ある 世界やだみんなと同じように 80 00:03:50,010 --> 00:03:54,130 そのファイルに固有のものではありませせず、 それ以上のいずれかの所有権を持っている。 81 00:03:54,130 --> 00:04:05,650 >> だから我々は所有者、グループがある場合、 そして、その後の世界。 82 00:04:05,650 --> 00:04:10,510 次いで、これらの基の各々については、 3のいずれかの権限ができ、 83 00:04:10,510 --> 00:04:13,010 [OK]、またはその倍数。 84 00:04:13,010 --> 00:04:15,070 あなたは、読み取り権限を持つことができます。 85 00:04:15,070 --> 00:04:16,560 あなたは正しい権限を持つことができます。 86 00:04:16,560 --> 00:04:18,880 そして、あなたは実行権限を持つことができます。 87 00:04:18,880 --> 00:04:22,060 >> だから、実際のファイルの種類の面で、読み 許可は実際に読むようです 88 00:04:22,060 --> 00:04:23,250 ファイルの内容。 89 00:04:23,250 --> 00:04:24,730 右の許可が書いている ファイルは述べている。 90 00:04:24,730 --> 00:04:28,370 実行権が実行されている 次のいずれかを実行したときにあなたが行うようなファイル 91 00:04:28,370 --> 00:04:29,620 あなたCS50プロジェクト。 92 00:04:29,620 --> 00:04:32,190 93 00:04:32,190 --> 00:04:38,820 >> だから我々は、ファイルを考えているとき 我々は、HTMLを読む必要があるときのように 94 00:04:38,820 --> 00:04:41,790 世界が必要なファイル、 読みやすいですよね？ 95 00:04:41,790 --> 00:04:44,420 おそらく、また、所有者が望んでいる そのファイルを編集できるようにする。 96 00:04:44,420 --> 00:04:46,610 だから、所有者は、必要があるだろう 読み取りおよび書き込み権限を。 97 00:04:46,610 --> 00:04:48,710 彼らは本当に実行する必要はありません。 98 00:04:48,710 --> 00:04:50,950 >> グループは、治療しようとしている 今の世界と同じ。 99 00:04:50,950 --> 00:04:54,610 そこで彼らは、読み取り権限が必要です。 100 00:04:54,610 --> 00:04:57,310 しかし、彼らは、ライトを必要としない または実行権限を。 101 00:04:57,310 --> 00:05:01,920 そして今、我々は前者に戻って思えば psetを、私たちが実現することは、これらの一種である 102 00:05:01,920 --> 00:05:03,360 バイナリのように見えるでしょ？ 103 00:05:03,360 --> 00:05:04,210 1はいの略です。 104 00:05:04,210 --> 00:05:05,040 なしの場合は0。 105 00:05:05,040 --> 00:05:06,870 そして、我々は実際に翻訳することができます このバイナリへ。 106 00:05:06,870 --> 00:05:10,478 >> そう進数で110は6になります。 107 00:05:10,478 --> 00:05:13,270 100は4になります。 108 00:05:13,270 --> 00:05:14,690 世界と同じ。 109 00:05:14,690 --> 00:05:20,846 だから、数はあなたが探しになるだろう これの権限が644になります。 110 00:05:20,846 --> 00:05:24,400 >> あなたがに戻って考えている場合：マイクRIZZO あなたが何かをchmodedとき、私は信じている 111 00:05:24,400 --> 00:05:28,980 彼らはセットの問題に与えた あなたができる場所の例 112 00:05:28,980 --> 00:05:36,470 chmodの644のようなもの して、ファイル名。 113 00:05:36,470 --> 00:05:39,980 644それから、あなたは今、直接見ることができます それはどこから来るのか。 114 00:05:39,980 --> 00:05:42,840 だから、うまくいけばそれがあることになり もう少し明確に。 115 00:05:42,840 --> 00:05:45,600 >> それから、あなたの男の明確化のために - 116 00:05:45,600 --> 00:05:48,200 そうそう、ここでこれが再びです。 117 00:05:48,200 --> 00:05:53,260 だから600は、ちょうど一例になります 所有者が持ってどこに我々はここであきらめた 118 00:05:53,260 --> 00:05:56,360 グループながら読み、適切なアクセス権 そして世界がどんな権限を持っていない 119 00:05:56,360 --> 00:05:58,145 ファイルにアクセスする。 120 00:05:58,145 --> 00:06:01,500 >> TOMAS Reimersの：そして、我々は迅速を持っている 一般的なアクセス許可の一覧。 121 00:06:01,500 --> 00:06:05,250 そうディレクトリは、あなたが欲しい 実際に711にchmodする。 122 00:06:05,250 --> 00:06:08,930 クイックさておき - 持っているディレクトリの 実行許可ができるようにすることを意味 123 00:06:08,930 --> 00:06:11,680 ディレクトリを開きます。 124 00:06:11,680 --> 00:06:15,280 画像、CSS、JavaScriptやHTMLのニーズ 644基本的には、世界では、理由 125 00:06:15,280 --> 00:06:16,400 ニーズが読み取り権限。 126 00:06:16,400 --> 00:06:20,960 >> そしてあなたたちが見てきたPHP、 我々はそれについて話されることはありませんが、 127 00:06:20,960 --> 00:06:24,880 厳密に通常でchmodedさ パーミッション600それは使用して実行だから 128 00:06:24,880 --> 00:06:26,540 所有者のアクセス権。 129 00:06:26,540 --> 00:06:27,790 アプライアンスでは、少なくとも。 130 00:06:27,790 --> 00:06:30,200 131 00:06:30,200 --> 00:06:36,870 >> MIKE RIZZO：だから、特にない場合は ファイルのタイプを指定 132 00:06:36,870 --> 00:06:39,480 実際に設定する際に必要 このプレゼンテーションまで - 133 00:06:39,480 --> 00:06:43,490 我々はこのために問題があった すべてが正しくchmodedされませんでした - 134 00:06:43,490 --> 00:06:47,550 あなたはちょっと、A、取得するつもりだ Forbiddenエラーそのウェブサイト 135 00:06:47,550 --> 00:06:49,700 実際に権限がありません どのようなファイルにアクセスする 136 00:06:49,700 --> 00:06:51,370 あなたはそれがアクセスしたい。 137 00:06:51,370 --> 00:06:54,780 そしてもちろん、それを固定することができる - 問題で設定した - 変更することにより、 138 00:06:54,780 --> 00:06:56,405 適切なアクセス許可。 139 00:06:56,405 --> 00:06:59,620 >> TOMAS Reimersの：そして、最後のコメント すぐに地元の開発である - 我々 140 00:06:59,620 --> 00:07:02,000 これを育て、私たちはただ思った 再びそれを起動するために - 141 00:07:02,000 --> 00:07:06,230 あなたは、サーバーの要求があった場合に - ので、ローカルホストを、 例えば、COM、または何でも。 - 142 00:07:06,230 --> 00:07:09,170 あなたは、特定のファイルを指定しない、 お使いのコンピュータが起こっているファイル 143 00:07:09,170 --> 00:07:11,540 を求めるためてindex.HTMLと呼ばれています。 144 00:07:11,540 --> 00:07:12,790 またはそれは、index.phpの存在しない場合。 145 00:07:12,790 --> 00:07:15,560 146 00:07:15,560 --> 00:07:16,350 >> 涼しい。 147 00:07:16,350 --> 00:07:19,560 だから何もかもの要約ですが、 うまくいけば、我々が紹介してきたこと 148 00:07:19,560 --> 00:07:22,800 セクション、および講演会、 これまでCS50中。 149 00:07:22,800 --> 00:07:26,110 そして今、我々は話を開始するつもりだ 約特にライブラリ。 150 00:07:26,110 --> 00:07:30,270 JavaScriptとCSSのライブラリ Webアプリケーションのための。 151 00:07:30,270 --> 00:07:36,350 >> だから我々は持っている理由1クイック理由 ライブラリは、プログラミングされている - 152 00:07:36,350 --> 00:07:39,000 中多くの問題があります 次々と出現して、プログラミング、 153 00:07:39,000 --> 00:07:40,570 再び、そして再び、そして再び。 154 00:07:40,570 --> 00:07:43,870 あなたは気づくことがあり、その多くのウェブサイト ドロップダウンを有する能力を必要とする 155 00:07:43,870 --> 00:07:49,100 メニューは、例えば、または機能が必要 非常に標準的なボタンを持っている 156 00:07:49,100 --> 00:07:51,400 ないかもしれないスタイル、 簡単なこと。 157 00:07:51,400 --> 00:07:54,670 今、あなたは、HTMLに入るために始めること ボタンは実際にできることを実感 158 00:07:54,670 --> 00:07:57,720 もしあれば本当に醜いに見える 何もしない。 159 00:07:57,720 --> 00:08:00,830 >> だから、多くの人々が書かれている ライブラリと呼ばれる。 160 00:08:00,830 --> 00:08:02,990 この文脈では、それらはなら また、フレームワークと呼ばれる。 161 00:08:02,990 --> 00:08:04,790 我々は使用するつもりだ 同じ意味2。 162 00:08:04,790 --> 00:08:07,360 そして、何彼らは、彼らは基本的にしているである コー​​ドの既成部分 - 163 00:08:07,360 --> 00:08:09,130 CSSやJavaScriptのいずれか - 164 00:08:09,130 --> 00:08:13,240 それの多くを奪う あなたがコーディングを持っているチーム。 165 00:08:13,240 --> 00:08:17,290 >> そこで、彼らはクラスの束を事前に定義したり、 のための機能の束を事前定義 166 00:08:17,290 --> 00:08:20,110 JavaScriptの場合、その あなたは後で呼び出すことができます。 167 00:08:20,110 --> 00:08:22,690 そして、あなたは、ソート、取得することができます このコードにアクセスせずに 168 00:08:22,690 --> 00:08:23,710 何でもすること。 169 00:08:23,710 --> 00:08:27,750 ライブラリの例は、CS50.H.た それは我々があなたに戻って与え図書館だった 170 00:08:27,750 --> 00:08:32,090 週1で、これはあなたが行うには許可 そのGetIntでとGetStringメソッドのようなもの 171 00:08:32,090 --> 00:08:35,237 書く必要はありません 任意のコードを自分。 172 00:08:35,237 --> 00:08:36,179 >> MIKE RIZZO：すべての権利。 173 00:08:36,179 --> 00:08:40,299 だからここに、同じように我々は含める必要がありました 私たちのCに異なるファイル 174 00:08:40,299 --> 00:08:46,570 ライブラリは、我々はまた、中に含まれている必要があり 私たちのHTMLは異なるライブラリを提出。 175 00:08:46,570 --> 00:08:50,310 例えば、我々は、したい場合 ここで具体的なJavaScriptライブラリ、 176 00:08:50,310 --> 00:08:52,850 おそらく、我々が書いた1 自分自身がローカルにホストされたよう 177 00:08:52,850 --> 00:08:56,000 ちょうど私達、script.jsと呼ばれる この表記法を使用しています。 178 00:08:56,000 --> 00:08:59,500 >> だから我々は、スクリプトタイプの等号を持っている JavaScriptのソースイコール 179 00:08:59,500 --> 00:09:01,260 javascript.jsを。 180 00:09:01,260 --> 00:09:05,190 そして、あなたはあなたのCS50に戻って思えば あなたが見ている場合、設定され、金融問題 181 00:09:05,190 --> 00:09:09,190 Templatesフォルダにheader.phpを、 あなたが見ている必要があります 182 00:09:09,190 --> 00:09:10,970 これらのいくつかは含まれています。 183 00:09:10,970 --> 00:09:13,250 したがって、この最初の1 - スクリプト - 184 00:09:13,250 --> 00:09:16,080 JavaScriptライブラリを含めている。 185 00:09:16,080 --> 00:09:18,760 CSSのライブラリです含む 一味違う。 186 00:09:18,760 --> 00:09:21,430 >> ここでは、代わりに、スクリプトの あなたがリンクタグが必要にタグ。 187 00:09:21,430 --> 00:09:27,110 そして、テキストCSS方式 多少異なります。 188 00:09:27,110 --> 00:09:29,270 あなたは、常に含める必要はありません RELスタイルシート。 189 00:09:29,270 --> 00:09:30,970 しかし、私は、それは一般的に、だと思う お勧め。 190 00:09:30,970 --> 00:09:35,810 >> そして最後に、HREF、どれを おそらくリンクするためのあなたのATAGsで見た 191 00:09:35,810 --> 00:09:39,440 異なるリンクだけを指定中 それがどこにあるかのリンクをクリックします。 192 00:09:39,440 --> 00:09:42,250 例えば、我々が望んでいた場合にはリンクする 異なるライブラリ - ちょうど言わせて - 193 00:09:42,250 --> 00:09:49,330 それはのstyles.cssに住んでいた。 194 00:09:49,330 --> 00:09:54,030 そして、我々は、その年代にそれをリンクしたいと思った ウェブ上でホストされている、我々はそれをコピーします。 195 00:09:54,030 --> 00:09:58,834 してから何に貼り付け 我々は、代わりに右ここにある。 196 00:09:58,834 --> 00:10:01,340 >> TOMAS Reimersの：OK、うまくいけば 男はすでによく知られている 197 00:10:01,340 --> 00:10:02,410 CSSをリンクする方法と。 198 00:10:02,410 --> 00:10:04,000 あなたはそれにしなければならなかった あなたの最後の茶色のセット。 199 00:10:04,000 --> 00:10:07,110 JavaScriptの、多分あなた方のうちの何人か といくつかの経験がある。 200 00:10:07,110 --> 00:10:07,980 皆さんの中にはいないことがあります。 201 00:10:07,980 --> 00:10:12,190 >> だから今のために、知っているJavaScriptファイル 非常にあるCSSファイルのようなものです 202 00:10:12,190 --> 00:10:15,640 あなたがそれにリンクすることができ、センスまたは あなたは、内部に含めることができる。 203 00:10:15,640 --> 00:10:17,360 そしてそれは、スクリプトの事にあなたを可能にする。 204 00:10:17,360 --> 00:10:21,820 そして、我々はを順を追ってするつもりだ JavaScriptを少し後で。 205 00:10:21,820 --> 00:10:23,560 >> だから、ライブラリを使用して - 206 00:10:23,560 --> 00:10:26,150 あなたがそれを含めたら、それは同様だ 文字通り呼び出すような単純な 207 00:10:26,150 --> 00:10:29,640 関数や追加 それへのクラス名。 208 00:10:29,640 --> 00:10:32,220 私たちが話をしたい最後のこと ライブラリの面で約 - 209 00:10:32,220 --> 00:10:34,180 これはテクニカルノートの詳細です - 210 00:10:34,180 --> 00:10:35,860 オープンソースのライセンスである。 211 00:10:35,860 --> 00:10:41,550 ですから、これらの実際のライブラリを見つけたとき、 あなたは考えるかもしれない 212 00:10:41,550 --> 00:10:47,630 それは私だけだというOKですのような質問 誰か他の人のコードを使用して、特に 213 00:10:47,630 --> 00:10:51,970 それは我々が非常に多くのものだから このコースではないためにあなたに言った。 214 00:10:51,970 --> 00:10:55,790 >> だから、オープンソースライセンスの場合には、 多くの開発者 - 215 00:10:55,790 --> 00:10:57,540 彼らはライブラリを書いたら、 彼らは可能性が考えている 216 00:10:57,540 --> 00:10:59,450 他の人に役立つ - 217 00:10:59,450 --> 00:11:02,420 ウェブに公開します それに許諾するもの。 218 00:11:02,420 --> 00:11:06,620 そしてライセンスは、基本的に私はここにいますと言う 他に許可を与える 219 00:11:06,620 --> 00:11:11,250 人々は、このソフトウェアを使用するには 次の並べ替えと 220 00:11:11,250 --> 00:11:13,230 規定。 221 00:11:13,230 --> 00:11:16,100 >> 我々は良いサイトへのリンクを含めました あなたがライセンスを理解するのに役立つ 222 00:11:16,100 --> 00:11:17,720 あなたがそれらに遭遇した場合。 223 00:11:17,720 --> 00:11:21,680 一般的な規定のようなものです あなたは私のライブラリを使用して歓迎しているので、 224 00:11:21,680 --> 00:11:23,000 あなたが私に信用を与えるように長い。 225 00:11:23,000 --> 00:11:25,670 あなたは私のライブラリを使用して歓迎している それが故障した場合などであれ 226 00:11:25,670 --> 00:11:26,790 あなたは私を責めないでください。 227 00:11:26,790 --> 00:11:30,310 あなたがいる限り、私のライブラリを使用して歓迎している あなたはお金を稼ぐためにそれを使用しないため 228 00:11:30,310 --> 00:11:31,910 あなた自身のため。 229 00:11:31,910 --> 00:11:34,130 これらは、一般的な種類である 規定。 230 00:11:34,130 --> 00:11:37,780 >> このCS50最終的なプロジェクトのために、彼ら スーパー関連してはならないので、 231 00:11:37,780 --> 00:11:41,440 皆さんが使用するプロジェクトです おそらくそうではなく、一種の、知られています。 232 00:11:41,440 --> 00:11:44,170 しかし、あなたが実際に出て行くとき 世界とライブラリを、使用を開始した 233 00:11:44,170 --> 00:11:48,100 または同様に実装されてもされなくてもよい 我々はしているより多くの人気のあるもののいくつか 234 00:11:48,100 --> 00:11:49,780 経験してするつもり。 235 00:11:49,780 --> 00:11:53,310 それは理解することができるように良いことだ これらのライセンスおよびへ 236 00:11:53,310 --> 00:11:54,560 彼らが何を意味するか理解しています。 237 00:11:54,560 --> 00:11:58,120 238 00:11:58,120 --> 00:11:58,586 そして帰る。 239 00:11:58,586 --> 00:12:00,960 >> MIKE RIZZO：わかりました。 240 00:12:00,960 --> 00:12:04,850 だから今の例に移動 実際のCSS。 241 00:12:04,850 --> 00:12:07,770 この時点で、これまでのところ、あなたは可能性がある このが発生しているわけではありません。 242 00:12:07,770 --> 00:12:10,300 しかし、あなたはそれが発生した可能性があります あなたの日常生活どこに何か 243 00:12:10,300 --> 00:12:13,160 つまり、1ブラウザ上で一つの方法を探します 同じに見えないかもしれません 244 00:12:13,160 --> 00:12:14,880 他のブラウザでの方法。 245 00:12:14,880 --> 00:12:17,400 >> これはブラウザのブラウザと呼ばれている 互換性。 246 00:12:17,400 --> 00:12:20,780 ますますそれがますますなってきて 特にとして、問題の詳細 247 00:12:20,780 --> 00:12:25,260 ブラウザでは、より多くの自由を取る 彼らが望むようなものを実装する。 248 00:12:25,260 --> 00:12:28,440 だから、それを克服するために、実際にそこにある Normalize.CSS呼ば大図書館。 249 00:12:28,440 --> 00:12:32,236 250 00:12:32,236 --> 00:12:33,770 >> TOMAS Reimersの：我々は、リンクが含まれていました。 251 00:12:33,770 --> 00:12:36,210 場合は、この時点では、それは便利です あなたはそこにあなたのラップトップを持っている 252 00:12:36,210 --> 00:12:38,740 サイトを見ている。 253 00:12:38,740 --> 00:12:42,580 そして、我々は右のあなたにこれを与えている 今だけの理由CS50決勝 254 00:12:42,580 --> 00:12:44,370 プロジェクトは、実際にしようとしている それを実装するように依頼する 255 00:12:44,370 --> 00:12:45,860 同様にしてブラウザから。 256 00:12:45,860 --> 00:12:49,250 >> だから、あなたの後ろに保つために ヘッドは、これは素晴らしいライブラリです 257 00:12:49,250 --> 00:12:51,170 それがれるため、並べ替え、 物事を標準化する。 258 00:12:51,170 --> 00:12:54,230 Firefoxでは、何かが表示される場合があります 左に1画素として。 259 00:12:54,230 --> 00:12:58,390 して、Chromeは、実際にそれを決定することができる 何を意味することは、10ピクセルだった 260 00:12:58,390 --> 00:12:59,380 左の方です。 261 00:12:59,380 --> 00:13:01,030 そして、あなたはこれを標準化したいと思います。 262 00:13:01,030 --> 00:13:05,360 ノーマライズは、実際には本当に良いを行います ていることを確認して作るの仕事をあなたのサイト 263 00:13:05,360 --> 00:13:08,070 ブラウザ間で同じに見えます。 264 00:13:08,070 --> 00:13:10,660 >> MIKE RIZZO：だから我々だけにしたい場合 本当にすぐにリンクをクリックし、ショー 265 00:13:10,660 --> 00:13:13,140 もしそれがあなた、どのようなものか 使用してそれをダウンロードすることができます 266 00:13:13,140 --> 00:13:14,670 巨人のダウンロードボタンをクリックします。 267 00:13:14,670 --> 00:13:18,520 または私はそれについての詳細をお読みになることをお勧め 下にこのリンクをクリックすることで 268 00:13:18,520 --> 00:13:19,310 右上隅。 269 00:13:19,310 --> 00:13:22,420 >> TOMAS Reimersの：そして、もしあなたが実際 もっと右がReadをクリックして - 270 00:13:22,420 --> 00:13:24,340 GitHubの上にソースをクリックしてください - 271 00:13:24,340 --> 00:13:31,720 実際には、オープンソースが表示されます すぐそこLICENSE.mdのライセンス。 272 00:13:31,720 --> 00:13:35,740 そして、あなたがここに表示されますです 非常に人気のあるMITライセンス。 273 00:13:35,740 --> 00:13:38,940 繰り返しますが、テキストを読めば、 あなたはサイト上でそれを見つけることができるでしょう 274 00:13:38,940 --> 00:13:42,550 我々は前に参照されたし、のことができるように 読まなくて、それを理解して 275 00:13:42,550 --> 00:13:45,920 法律用語を通して。 276 00:13:45,920 --> 00:13:46,850 >> MIKE RIZZO：OK、素晴らしい。 277 00:13:46,850 --> 00:13:47,940 だからノーマライズだ。 278 00:13:47,940 --> 00:13:49,190 私たちはあなたを与えたいと思った 本当にすぐにそれ。 279 00:13:49,190 --> 00:13:50,030 ああ、あなたは疑問を持っているのですか？ 280 00:13:50,030 --> 00:13:53,013 >> 観客：だから、あなたがそれをダウンロードします ちょうど彼らが持っているコードに従ってください 281 00:13:53,013 --> 00:13:54,098 [ダウンロード]ボタンの下に？ 282 00:13:54,098 --> 00:13:55,860 >> TOMAS Reimersの：はい、そう あなたがダウンロードしたとき - 283 00:13:55,860 --> 00:13:58,130 >> MIKE RIZZO：ああ、それは素晴らしい点だ。 284 00:13:58,130 --> 00:14:00,700 そこで問題は、何かあった 我々は実際にそれをダウンロードしてください 285 00:14:00,700 --> 00:14:03,260 我々はリンクをクリックするのであれば、我々が表示さ それは実際にポップアップ表示されていること 286 00:14:03,260 --> 00:14:05,030 ソースコードを。 287 00:14:05,030 --> 00:14:08,550 それでは、私たちができる、これを実行するには ただ名前を付けて保存]をクリックされます。 288 00:14:08,550 --> 00:14:10,830 名前を付けて保存し、それがすべき ファイルを起動します。 289 00:14:10,830 --> 00:14:14,160 そして、我々は、保存するかを選択できます それnormalize.CSSとして。 290 00:14:14,160 --> 00:14:15,810 そして、あなたはそれをリンクさせる必要があるだろう - 291 00:14:15,810 --> 00:14:18,660 >> TOMAS Reimersの：同じように、あなた 他のファイルにリンクします。 292 00:14:18,660 --> 00:14:22,250 あなたがそれをのリンク一度、素晴らしいものだ ノーマライズについてそれは実際になりますです 293 00:14:22,250 --> 00:14:25,920 すべてのハードの世話をする 単体で動作する。 294 00:14:25,920 --> 00:14:27,730 あなたが持っていないことを意味 すべてのクラスを追加します。 295 00:14:27,730 --> 00:14:29,690 >> あなたは奇妙な何もする必要はありません。 296 00:14:29,690 --> 00:14:34,590 それはあなたなしで正常化します さらに何もして。 297 00:14:34,590 --> 00:14:36,083 はい、あなたはそれを含める必要があります。 298 00:14:36,083 --> 00:14:38,990 299 00:14:38,990 --> 00:14:40,240 Google Chromeは応答していません。 300 00:14:40,240 --> 00:14:43,270 301 00:14:43,270 --> 00:14:44,860 >> 脇だけで簡単に - 302 00:14:44,860 --> 00:14:46,800 私たちは、この飛び込んだ気づいた。 303 00:14:46,800 --> 00:14:49,010 このプレゼンテーションの残りの部分はある 商品の概要になるだろう。 304 00:14:49,010 --> 00:14:50,380 図書館の調査。 305 00:14:50,380 --> 00:14:52,710 >> 基本的に、彼らは何ですか。 306 00:14:52,710 --> 00:14:53,350 彼らは何をすべきか。 307 00:14:53,350 --> 00:14:54,060 彼らは便利だ方法。 308 00:14:54,060 --> 00:14:56,540 どのようにそれらを実装する場合があります。 309 00:14:56,540 --> 00:14:59,730 あなたがそれらを見て開始する場合は、 に沿って、以下、および通読 310 00:14:59,730 --> 00:15:01,990 彼らは、私は非常にそれを奨励する。 311 00:15:01,990 --> 00:15:07,620 >> 別の方法としては、次の作業を行うことも歓迎している それらをダウンロードして起動するなど、 312 00:15:07,620 --> 00:15:11,400 目の前で彼らはちょうど彼らは何を見て ように見えるか、何を持っている場合、彼らが行う 313 00:15:11,400 --> 00:15:12,270 あなたの前にあなたのラップトップ。 314 00:15:12,270 --> 00:15:14,650 そうでない場合は、保管して歓迎している 私たちに聞くことは話しています。 315 00:15:14,650 --> 00:15:15,500 我々は話を続けるつもりです。 316 00:15:15,500 --> 00:15:18,680 そして、我々は、うまくいけば、最後に時間を持っている 私たちは実際にあなたを示すに買ってあげる 317 00:15:18,680 --> 00:15:20,946 どのようなこれらのライブラリの一部 のように見える。 318 00:15:20,946 --> 00:15:22,320 >> MIKE RIZZO：クール。 319 00:15:22,320 --> 00:15:25,466 大丈夫、だから今の話しましょう 驚くばかりのフォント。 320 00:15:25,466 --> 00:15:30,480 >> TOMAS Reimersの：だからフォント恐ろしいです 特にそれらのための本当にきちんとサイト、 321 00:15:30,480 --> 00:15:32,450 あまり芸術的である私たちの 才能。 322 00:15:32,450 --> 00:15:36,330 323 00:15:36,330 --> 00:15:38,880 恐ろしい名前のフォントを無視して、それが与える もしあるアイコンの束 324 00:15:38,880 --> 00:15:41,050 非常に便利。 325 00:15:41,050 --> 00:15:45,950 そう多くの時間はあなたが実装します アイコンあなたはとても素敵Xのようにすることもできます 326 00:15:45,950 --> 00:15:47,170 あなたが何かを閉じることができます。 327 00:15:47,170 --> 00:15:49,910 >> または、[編集]ボタンのいくつかの種類が必要な場合があり のような鉛筆画で 328 00:15:49,910 --> 00:15:50,940 誰もが持っています。 329 00:15:50,940 --> 00:15:53,850 あなたがいることを学ぶとき、それはだ これらのアイコンを描画することはでき 330 00:15:53,850 --> 00:15:55,510 非常に面倒で難しい。 331 00:15:55,510 --> 00:15:59,160 フォント恐ろしい - 実際にあなたの場合 サイトにアクセスしてください - 332 00:15:59,160 --> 00:16:02,892 下のあなたのアイコンの多くを提供します 上部のアイコン。 333 00:16:02,892 --> 00:16:06,980 ええ、まさにトップ。 334 00:16:06,980 --> 00:16:09,030 それはあなたに多くを与える 自由のためのアイコン。 335 00:16:09,030 --> 00:16:15,210 >> だからここにあなたが私たちのようなものを持って参照してください。 アスタリスク、バー、稲妻、 336 00:16:15,210 --> 00:16:19,750 カレンダー、バグ、本、エトセトラ。 337 00:16:19,750 --> 00:16:21,110 これは非常に便利です。 338 00:16:21,110 --> 00:16:24,290 これを含める方法は、あなたが含まれている 文字通りCSSファイル。 339 00:16:24,290 --> 00:16:29,760 そして後には、CSSファイルを用意しました あなたにできることは、作成され 340 00:16:29,760 --> 00:16:33,430 それがためにsatands I.と呼ばれるタグ クラスFAのアイコン 341 00:16:33,430 --> 00:16:34,460 素晴らしいフォント放置。 342 00:16:34,460 --> 00:16:36,330 そして、どのようなクラスを希望する。 343 00:16:36,330 --> 00:16:41,220 >> 私は、このプラスのアイコンを望んでいたので、もし 右ここ正方形、私は与えるだろう 344 00:16:41,220 --> 00:16:43,290 それクラスFA。 345 00:16:43,290 --> 00:16:46,230 してからのFAハイフンプラスハイフン広場。 346 00:16:46,230 --> 00:16:50,325 347 00:16:50,325 --> 00:16:53,710 >> MIKE RIZZO：クール、[OK]をクリックします。 348 00:16:53,710 --> 00:16:56,980 >> TOMAS Reimersの：そして、最後に、CSS 我々は我々を介して取得するライブラリアール 349 00:16:56,980 --> 00:16:59,950 CSSでの最低限のそれを維持しようとしている ライブラリは、我々は実現しないため、 350 00:16:59,950 --> 00:17:03,660 このプレゼンテーションのタイトル JavaScriptのライブラリです。 351 00:17:03,660 --> 00:17:07,089 しかし、我々は我々が同様に可能性があると考え 他のライブラリを紹介 352 00:17:07,089 --> 00:17:09,569 我々は、図書館について話している間。 353 00:17:09,569 --> 00:17:11,400 >> それは、Googleウェブフォントです。 354 00:17:11,400 --> 00:17:17,040 そして、何Googleウェブフォントを使用するとができます 行うには、あなたのウェブサイトにフォントを追加で 355 00:17:17,040 --> 00:17:22,079 それを作るために本当に簡単な方法である あなたのセットを区別することは非常にと 356 00:17:22,079 --> 00:17:24,460 それがある場合はすべての人から他の人です 素敵なフォントや、それはいいがある場合 357 00:17:24,460 --> 00:17:27,790 フォントのコレクション。 358 00:17:27,790 --> 00:17:31,410 Googleウェブフォントは、他とは違っていいです それはだという意味で、ライブラリ 359 00:17:31,410 --> 00:17:33,490 本当にガイド付きインストール。 360 00:17:33,490 --> 00:17:38,680 >> リンクをたどるのであれば、それはだ google.com /フォントは、私は信じています。 361 00:17:38,680 --> 00:17:41,100 あなたはそれをたどる場合は、 あなたのフォントを選ぶことができます。 362 00:17:41,100 --> 00:17:44,410 あなたはから左側に選択することができます 厚さ、傾斜、エトセトラ。 363 00:17:44,410 --> 00:17:48,970 そして、あなたは1を選択したら、 あなたが迅速な使用をクリックすることができます。 364 00:17:48,970 --> 00:17:49,820 すぐそこ。 365 00:17:49,820 --> 00:17:51,590 ボックスの右下。 366 00:17:51,590 --> 00:17:54,380 367 00:17:54,380 --> 00:17:56,700 >> そして、下にスクロールします。 368 00:17:56,700 --> 00:17:59,600 369 00:17:59,600 --> 00:18:02,650 まず第一に、彼らはあなたのCSSを与えること あなたが実際にそれにリンクする必要があります。 370 00:18:02,650 --> 00:18:03,330 それはすぐそこです。 371 00:18:03,330 --> 00:18:05,170 あなただけをコピーし、それをインチ貼り付けることができます 372 00:18:05,170 --> 00:18:07,250 そして、この1のいいところです あなたが実際にしてもする必要はありません 373 00:18:07,250 --> 00:18:08,340 ファイルをダウンロードします。 374 00:18:08,340 --> 00:18:11,170 >> それは何をするつもりだのは、それが起こっているのである それをGoogleのバージョンにリンクする。 375 00:18:11,170 --> 00:18:14,130 だから、戻ってそれが何を意味している。 376 00:18:14,130 --> 00:18:18,270 ときに、ユーザーことを意味 あなたのファイルをダウンロードします - 377 00:18:18,270 --> 00:18:22,300 HTMLページには、ダウンロードする - あなたのHTMLの ページには、このファイルを参照しようとしている。 378 00:18:22,300 --> 00:18:26,790 >> それでは、お使いのコンピュータが見ることになるだろう、 ああ、それはむしろgoogle.comでホストされているのは 379 00:18:26,790 --> 00:18:28,170 theirsite.comよりも。 380 00:18:28,170 --> 00:18:30,370 私は、そのファイルは、Googleに問い合わせ行きましょう。 381 00:18:30,370 --> 00:18:32,800 そして、それが含まれるようになるだろう それはほとんどそれがであるかのように 382 00:18:32,800 --> 00:18:35,584 あなた自身のサイトの一部。 383 00:18:35,584 --> 00:18:36,540 >> TOMAS Reimersの：クール。 384 00:18:36,540 --> 00:18:40,980 そして、あなたはそれを含まれれば、その後に あなたのCSSに含め、それはあなたに与えます 385 00:18:40,980 --> 00:18:41,830 実際の行。 386 00:18:41,830 --> 00:18:45,188 だから、財産フォントファミリを設定 フォントの名前と同じ。 387 00:18:45,188 --> 00:18:47,936 388 00:18:47,936 --> 00:18:50,440 >> MIKE RIZZO：わかりました。 389 00:18:50,440 --> 00:18:52,220 だから我々は単に、CSSに仕上げました。 390 00:18:52,220 --> 00:18:57,230 そして、あなたのいくつかは、まあ、考えているかもしれません 私たちは、CS50財政上のいくつかのCSSを持っていた。 391 00:18:57,230 --> 00:19:00,390 しかし、CSSのライブラリは、ブートストラップだった。 392 00:19:00,390 --> 00:19:05,190 私たちは、実際にブートストラップを少し含ま 後でJavaScriptを下にしているため 393 00:19:05,190 --> 00:19:09,660 ブートストラップCSSのライブラリも付属してい JavaScriptのことの多い 394 00:19:09,660 --> 00:19:12,060 ブートストラップやTwitter - 誰がブートストラップを作った - 395 00:19:12,060 --> 00:19:15,426 そのCSSのすべてを管理するために使用しています。 396 00:19:15,426 --> 00:19:19,592 >> TOMAS Reimersの：誰もがいずれかを持っていますか これまで一般的には、CSSに関する質問？ 397 00:19:19,592 --> 00:19:20,723 我々は良いしている？ 398 00:19:20,723 --> 00:19:21,216 素晴らしい。 399 00:19:21,216 --> 00:19:22,495 >> MIKE RIZZO：素晴らしい。 400 00:19:22,495 --> 00:19:25,136 >> TOMAS Reimersの：だから移動 JavaScriptに上。 401 00:19:25,136 --> 00:19:27,900 >> MIKE RIZZO：だから我々は話をしたい jQueryはで始まろう。 402 00:19:27,900 --> 00:19:30,780 誰もjQueryのことを聞いたしました 前またはそれを使用して？ 403 00:19:30,780 --> 00:19:32,180 ええ、夫婦？ 404 00:19:32,180 --> 00:19:36,000 だから、あなただけのネイティブで動作している場合 JavaScriptは、あなた自身を見つけることができます 405 00:19:36,000 --> 00:19:41,000 長いセレクタたくさんの多くを入力する。 406 00:19:41,000 --> 00:19:44,400 それでは、jQueryが行うことは、それが提供される JavaScriptのための素晴らしいラッパー 407 00:19:44,400 --> 00:19:48,180 あなたが簡単に選択できます言語 異なる要素を操作 408 00:19:48,180 --> 00:19:52,470 のドキュメント·オブジェクト·モデル内 Webページまたは私が思うに、DOM、 409 00:19:52,470 --> 00:19:54,290 あなたたちは、中の聞いたことが この時点での講演。 410 00:19:54,290 --> 00:19:57,550 >> TOMAS Reimersの：あなたが聞いたことがない場合 それか、あなたが見ていない場合は、講義 411 00:19:57,550 --> 00:20:01,870 まだ、ドキュメントオブジェクトモデルです 基本的に物事がどのように表現される。 412 00:20:01,870 --> 00:20:05,290 だから、HTMLは一種の木のように見える あなたが実際にそれを引き出すとき。 413 00:20:05,290 --> 00:20:06,850 あなたが上にHTML要素を持っている。 414 00:20:06,850 --> 00:20:07,560 あなたは、頭と体を持っている。 415 00:20:07,560 --> 00:20:09,500 >> そして、あなたはその内 他のすべてを持っている。 416 00:20:09,500 --> 00:20:10,660 それは、DOMと呼ばれるている - 417 00:20:10,660 --> 00:20:12,120 ドキュメントオブジェクトモデル。 418 00:20:12,120 --> 00:20:16,090 そうでオブジェクトを表すモデル 文書では、考えるのは簡単な方法です 419 00:20:16,090 --> 00:20:18,560 そのことについて。 420 00:20:18,560 --> 00:20:22,520 とjQueryの素晴らしいところの1 それは本当に横断ますです 421 00:20:22,520 --> 00:20:26,460 それと内の要素を操作する その信じられないほど簡単です。 422 00:20:26,460 --> 00:20:30,300 >> とても簡単、実際には、その大部分の JavaScriptのライブラリやそうでない場合 423 00:20:30,300 --> 00:20:34,200 大多数のものの壮大な大多数 あなたが実際にそのようにjQueryを必要と表示されます 424 00:20:34,200 --> 00:20:37,530 彼らは単に自分自身を実行できることを あなたはjQueryを持っていなかった場合ので、 425 00:20:37,530 --> 00:20:40,540 しようと多くの時間を浪費することになる 特定の選択する方法を見つけ出す 426 00:20:40,540 --> 00:20:43,660 要素とどのように他のことをすることができません。 427 00:20:43,660 --> 00:20:47,950 とjQueryに関する他の素晴らしいところ それは、クロスブラウザの互換性であるということです。 428 00:20:47,950 --> 00:20:51,550 >> 我々は言ったときので、バック覚えて すべてのブラウザで実装されてい 429 00:20:51,550 --> 00:20:53,100 物事と同じように？ 430 00:20:53,100 --> 00:20:55,120 これがあっても、JavaScriptでも同様です。 431 00:20:55,120 --> 00:20:58,220 とjQueryの素晴らしい点の1 それが検出されていることである 432 00:20:58,220 --> 00:21:00,300 ブラウザと検出 適切な方法。 433 00:21:00,300 --> 00:21:03,420 >> ですから、要素を選択する必要がある場合は、 Internet Explorerはだと言うかもしれない 434 00:21:03,420 --> 00:21:05,770 この方法を行うことになって。 435 00:21:05,770 --> 00:21:08,300 Firefoxは正しいと言うかもしれない 方法は、この方法です。 436 00:21:08,300 --> 00:21:09,710 jQueryは気にしません。 437 00:21:09,710 --> 00:21:12,550 あなたが選択するためにjQueryを指示すると 要素には、それはだ方法を見つけ出すます 438 00:21:12,550 --> 00:21:16,290 ブラウザ内でそれを行うことになって ユーザは、現在であり、次に行う 439 00:21:16,290 --> 00:21:18,584 それそのように。 440 00:21:18,584 --> 00:21:22,650 >> MIKE RIZZO：それではについて話すわけにはいきません jQueryのの使用を少し。 441 00:21:22,650 --> 00:21:27,670 PHP、jQueryは、特定のを持っていると同じように ドル記号のための溺愛。 442 00:21:27,670 --> 00:21:30,880 だから、そのいずれかのjQueryを見つけることができます - 443 00:21:30,880 --> 00:21:32,060 まあ、それはすべての。 444 00:21:32,060 --> 00:21:35,210 あなたは時々、ドルを置き換えることができます 単語jQueryを使ってサインインします。 445 00:21:35,210 --> 00:21:38,980 しかし、一般的に、それはだからといって 短い、あなたはjQueryがあること見るたびに 446 00:21:38,980 --> 00:21:41,420 それはドル記号になるでしょう使用。 447 00:21:41,420 --> 00:21:47,030 >> そこでここでは、ほんの始まりを見せている DOM内の要素のセレクタ。 448 00:21:47,030 --> 00:21:52,850 ここでは、ドル記号が続いている [開く括弧と引用符による。 449 00:21:52,850 --> 00:21:56,130 および引用符で私たちのセレクタを行く 異なる要素のため。 450 00:21:56,130 --> 00:21:59,810 ただ、CSSのように、我々は、セレクタを必要としてい 異なる要素のスタイルを設定することができる 451 00:21:59,810 --> 00:22:00,840 ページ内。 452 00:22:00,840 --> 00:22:06,555 これらの異なるセレクター翻訳する 正確にjQueryとJavaScriptに、 453 00:22:06,555 --> 00:22:07,820 ほとんどの部分。 454 00:22:07,820 --> 00:22:10,120 >> そこでここでは、ドットのfooを持っている。 455 00:22:10,120 --> 00:22:14,780 あなたが講義を思い出しそうであれば、 ドットはただのクラスを意味します。 456 00:22:14,780 --> 00:22:18,850 だから我々は要素を選択している クラスfooで。 457 00:22:18,850 --> 00:22:22,670 だから私は先に行くと、私たちを開いている場合 JavaScriptコンソールここでは本当にすぐに 458 00:22:22,670 --> 00:22:26,830 私はちょうど入力した場合だけで、それを証明する ドル記号は、我々はそれには、いくつかのことがわかります 459 00:22:26,830 --> 00:22:28,090 登場する機能。 460 00:22:28,090 --> 00:22:29,420 そして、それはただのjQueryによって定義されている。 461 00:22:29,420 --> 00:22:32,120 >> TOMAS Reimersの：あなたのそれらのため なじみのない、コンソールはツールであり、 462 00:22:32,120 --> 00:22:35,430 あなたがすることができますクロム、内、 基本的には、上でJavaScriptを実行 463 00:22:35,430 --> 00:22:36,450 現在のページ。 464 00:22:36,450 --> 00:22:39,420 これはあなたが非常に便利見つけることができたとき 実際には、デバッグしている 465 00:22:39,420 --> 00:22:42,400 のようにする必要があり、現在はどのようなものです。 いくつかのグローバル変数の値か、どのような 466 00:22:42,400 --> 00:22:43,910 何か他のものは何ですか？ 467 00:22:43,910 --> 00:22:47,620 これは、例外を除いて、GDBのようなものだ あなたが実際にできること 468 00:22:47,620 --> 00:22:51,600 ページ上の要素を操作して それがはるか​​に簡単な方法で。 469 00:22:51,600 --> 00:22:55,080 また、それは、チェック、基本的には、しない それが何かをする前にあなたと内。 470 00:22:55,080 --> 00:22:58,660 >> 一方、そのように、あなたは、同じようGDBがあるかもしれない 必ず、次の手順を実行したい？ 471 00:22:58,660 --> 00:22:59,830 リアルタイムでコンソールの。 472 00:22:59,830 --> 00:23:03,690 そのように、ウェブページがレンダリングされると それは、やって何でもやって 473 00:23:03,690 --> 00:23:05,720 理事会はまた、それと並んで走っている。 474 00:23:05,720 --> 00:23:08,330 そして、あなたはに転嫁するコードを配置することができます そのコンソール、その意志 475 00:23:08,330 --> 00:23:09,260 ページ上で実行される。 476 00:23:09,260 --> 00:23:12,190 >> MIKE RIZZO：だからコンソールに入るには、 私は簡単にする必要がありますね 477 00:23:12,190 --> 00:23:13,750 その方法を述べる。 478 00:23:13,750 --> 00:23:17,850 あなたが持つかもしれない最後の問題を 使用済みChromeの要素を検査 479 00:23:17,850 --> 00:23:20,440 機能やページのソースを表示 - 480 00:23:20,440 --> 00:23:23,870 それらはちょうどでアクセス可能 ページまたは特定のクリック 481 00:23:23,870 --> 00:23:28,430 要素と検査のいずれかを行って 要素またはビューページのソース。 482 00:23:28,430 --> 00:23:31,190 また、JavaScriptをアクセスすることができます コンソールを直接による 483 00:23:31,190 --> 00:23:33,630 要素を点検選ぶ。 484 00:23:33,630 --> 00:23:37,930 だから、あなただけのコンソールを打つ 一番右側に。 485 00:23:37,930 --> 00:23:41,900 >> 別の方法として、あなたも行っている可能性 右上隅に、 486 00:23:41,900 --> 00:23:46,820 この画面で切り取られる場所 それは3つの水平のバーを持っています。 487 00:23:46,820 --> 00:23:52,010 そして、あなたはツールに下ると それからJavaScriptコンソール 488 00:23:52,010 --> 00:23:53,240 ここに場所を確認することができます - 489 00:23:53,240 --> 00:23:54,370 少なくともWindows上で - 490 00:23:54,370 --> 00:23:59,680 ショートカットがそれではJ·シフト·コントロールです 私たちは、要素を選択したい場合 491 00:23:59,680 --> 00:24:06,060 このページにある、同じように私が示した 前に、我々はドル記号オープン括弧を行う 492 00:24:06,060 --> 00:24:08,180 してから引用している。 493 00:24:08,180 --> 00:24:11,750 >> 興味深いのは、一般的に、ある 単一引用符や二重引用符がある 494 00:24:11,750 --> 00:24:12,370 交換可能。 495 00:24:12,370 --> 00:24:16,050 だから、多くの人々はただ一回の使用 引用符彼らはタイプするより高速だから 496 00:24:16,050 --> 00:24:19,780 二重引用符よりもあなたがいないため、 Shiftキーを押しする必要があります。 497 00:24:19,780 --> 00:24:21,770 だから、僕は今のことをするつもりだ。 498 00:24:21,770 --> 00:24:24,510 >> だから私は、何かを選択したい クラスを持つ。 499 00:24:24,510 --> 00:24:27,200 コンテナは、私が知っているという理由だけでそれはです 私たちの上にあるもの 500 00:24:27,200 --> 00:24:28,740 今のWebページ。 501 00:24:28,740 --> 00:24:29,520 そして、私はEnterキーを押します。 502 00:24:29,520 --> 00:24:31,670 そして、我々はそれを選択していることがわかります。 503 00:24:31,670 --> 00:24:34,990 だから、表示されることを、それ そのオブジェクトが返されました。 504 00:24:34,990 --> 00:24:36,620 だから、基本的な選択だ。 505 00:24:36,620 --> 00:24:40,080 我々は実際にそれを操作したい場合、 あなたが何かを呼び出さなければなりません 506 00:24:40,080 --> 00:24:43,925 その選択に、どの 我々は後に取得します。 507 00:24:43,925 --> 00:24:49,030 >> TOMAS Reimersの：だからそれを見てする より深く、これは違いはありません 508 00:24:49,030 --> 00:24:52,245 我々はCで行った関数呼び出しより ここで関数の名前です 509 00:24:52,245 --> 00:24:52,580 少し奇妙。 510 00:24:52,580 --> 00:24:55,640 これは、ドル記号です。 511 00:24:55,640 --> 00:24:57,010 それだけで関数の名前です。 512 00:24:57,010 --> 00:24:58,810 それについて特別なものは何もありません。 513 00:24:58,810 --> 00:25:00,450 >> 私たちは、開き括弧を持っています。 514 00:25:00,450 --> 00:25:03,880 その後、私たちは一つの引数を持っている この場合、文字列であることを起こる、 515 00:25:03,880 --> 00:25:05,680 それのためのセレクタである。 516 00:25:05,680 --> 00:25:08,130 そして、我々は我々が持っている 括弧を閉じた。 517 00:25:08,130 --> 00:25:09,960 これだけです。 518 00:25:09,960 --> 00:25:11,500 >> それはその非常に異なるではありません。 519 00:25:11,500 --> 00:25:12,900 が、それは非常に奇妙に見えるのか。 520 00:25:12,900 --> 00:25:17,220 そして、それは、一種の、固着することができます 多くの人々のためのポイント。 521 00:25:17,220 --> 00:25:21,460 >> MIKE RIZZO：だから同様に、我々が望んでいた場合 IDを持つ要素を選択するには、 522 00:25:21,460 --> 00:25:23,470 今、私たちはによって選択したい 代わりに、クラスのID。 523 00:25:23,470 --> 00:25:28,080 それはどこで同じようなものになるだろう ただI​​Dのシャープ記号を行います。 524 00:25:28,080 --> 00:25:33,576 だから我々はすべてここに選択している IDのバーを持つ要素。 525 00:25:33,576 --> 00:25:35,400 >> TOMAS Reimersの：そしてこれが伸びている。 526 00:25:35,400 --> 00:25:36,450 そのCSSが伸びている。 527 00:25:36,450 --> 00:25:42,260 ただCSSのように、あなたはすべてを選択することができます クラスのfooを持っているリンク。 528 00:25:42,260 --> 00:25:43,420 ここでは、それは同じことだ。 529 00:25:43,420 --> 00:25:52,750 >> あなたが選択するであろうa.fooを行うことができます クラスfooでリンクがすべて表示されます。 530 00:25:52,750 --> 00:25:58,860 あなたは、鋭い棒をする可能性があるだろう IDのバーでリンクを選択し、その 531 00:25:58,860 --> 00:25:59,770 などなど。 532 00:25:59,770 --> 00:26:02,120 任意のCSSセレクタが有効である jQueryのセレクタ。 533 00:26:02,120 --> 00:26:03,370 >> MIKE RIZZO：うん。 534 00:26:03,370 --> 00:26:07,996 535 00:26:07,996 --> 00:26:11,460 [OK]を、ので、今のは少しに取得させ 私たちが行うことができます操作の 536 00:26:11,460 --> 00:26:12,870 私たちのjQueryの。 537 00:26:12,870 --> 00:26:19,280 だから、jQueryの特定の型を持っている 我々だけで使う表記 538 00:26:19,280 --> 00:26:20,170 最後に点在しています。 539 00:26:20,170 --> 00:26:23,340 そして、あなたはこのようなものと考えることができ C私たちは別の構造体を持っていたか。 540 00:26:23,340 --> 00:26:27,110 そして、それらの構造体に入るには、次のようにだろう それに入るために、ドットを使用しています。 541 00:26:27,110 --> 00:26:28,480 >> これは、一種の、同じようなことです。 542 00:26:28,480 --> 00:26:33,570 今だけ私たちは、この内の機能を持っている 我々はそれを呼び出すことができセレクター。 543 00:26:33,570 --> 00:26:38,640 だからここに、非常に最初の例 あなたが見ることができるCSSセレクタです。 544 00:26:38,640 --> 00:26:45,290 基本的に、どのようなことがないことは、それである これに最初の要素のCSSを適用します 545 00:26:45,290 --> 00:26:46,230 あなたが選択したもの - 546 00:26:46,230 --> 00:26:47,720 選択したこの要素 - 547 00:26:47,720 --> 00:26:49,290 その値を持つ。 548 00:26:49,290 --> 00:26:55,390 >> TOMAS Reimersの：のとても簡単翻訳 jQueryの場合には、基本的になり、 549 00:26:55,390 --> 00:26:57,790 ただfooのを取った。 550 00:26:57,790 --> 00:27:05,480 して、CSSで言った、 赤と近い色。 551 00:27:05,480 --> 00:27:06,670 それは同じ考えです。 552 00:27:06,670 --> 00:27:08,800 それは何を行うのは、それを選択したのはです すべてのfoo要素。 553 00:27:08,800 --> 00:27:10,170 そしてそれが適用さだ。 554 00:27:10,170 --> 00:27:15,884 並べ替えのプロパティの色 赤に等しい。 555 00:27:15,884 --> 00:27:21,070 >> MIKE RIZZO：同様に、我々はまた、変更することができます 何であるかの実際の内容 556 00:27:21,070 --> 00:27:24,870 これは、ページのHTML上に表示 それはあなたのことを意味するので、本当にクールです 557 00:27:24,870 --> 00:27:28,095 Webページでは、現在は完全に動的であることができる および静的である必要はありません 558 00:27:28,095 --> 00:27:31,660 あなたは、PHPを使用してプリントアウトすることを の先頭に 559 00:27:31,660 --> 00:27:33,320 ページがロードされている。 560 00:27:33,320 --> 00:27:36,810 だからここに、我々は変更したい場合 ページの実際のHTML、我々は今だろう 561 00:27:36,810 --> 00:27:43,550 HTMLの関数を呼び出して、その、ちょうど 我々はに指定された内容の挿入 562 00:27:43,550 --> 00:27:45,390 我々が選択した要素。 563 00:27:45,390 --> 00:27:49,810 そこでここではで要素を選択している クラスfooと、それはHTMLのだと言って 564 00:27:49,810 --> 00:27:52,200 それは今のHello Worldです。 565 00:27:52,200 --> 00:27:55,600 >> TOMAS Reimersの：そして、あなたが考える時期について の有用な用途は何ですか 566 00:27:55,600 --> 00:28:00,800 この、このCSSの1、最初にすること あなたはについて考え始めることができます 567 00:28:00,800 --> 00:28:03,070 でも、ドロップダウンメニューの観点から。 568 00:28:03,070 --> 00:28:08,350 あなたは、のようなことを行うために始めることができた ユーザーは、トップ部分の上を移動した 569 00:28:08,350 --> 00:28:11,970 ドロップダウンするのではなく、作りたい 目に見える下の部分。 570 00:28:11,970 --> 00:28:12,540 右？ 571 00:28:12,540 --> 00:28:15,610 >> そのようにCSSで、我々は、特性を有する 目に見えるものを作る。 572 00:28:15,610 --> 00:28:19,330 ディスプレイコロンなしのようなもの それは目に見えてしまいます。 573 00:28:19,330 --> 00:28:21,190 Displayブロックは、それが見えるようになります。 574 00:28:21,190 --> 00:28:25,860 またはあなたがより簡単に行きたい場合でも、 可視性の等号のようなものを持っている 575 00:28:25,860 --> 00:28:27,520 見え、視認性が隠されたに等しい。 576 00:28:27,520 --> 00:28:30,330 577 00:28:30,330 --> 00:28:34,780 >> そして、あなたは物事を実装するために始めることができた のような右のドロップダウンメニュー 578 00:28:34,780 --> 00:28:38,410 あなたはどのようにするというアイデアを介して取得した後 これが開いたときに把握することができ、 579 00:28:38,410 --> 00:28:39,850 その我々は非常に簡単にを介して取得します。 580 00:28:39,850 --> 00:28:42,160 しかし、我々は見始めることができます このアプリケーションに最適です。 581 00:28:42,160 --> 00:28:45,540 同じような意味では、あなたがいた場合は、試してみる そして、のは言わせて、チャットを実装 582 00:28:45,540 --> 00:28:48,620 エンジンとあなたは少しを作りたい あなたがしたときはいつでも吹き出しが出てくる 583 00:28:48,620 --> 00:28:52,880 あなたが得ると、新しいメッセージが表示されました 新しいメッセージ、あなたは少しを行うことができます 584 00:28:52,880 --> 00:28:55,890 吹き出しを変更することによって出てくる ページのHTML、右？ 585 00:28:55,890 --> 00:29:00,540 余分な吹き出しを追加することで、 そこに余分なテキストを持つ。 586 00:29:00,540 --> 00:29:01,140 うん？ 587 00:29:01,140 --> 00:29:07,750 >> 観客：だから内でこれを埋め込みます 並べ替えのようなHTMLコード 588 00:29:07,750 --> 00:29:10,534 [聞こえない]？ 589 00:29:10,534 --> 00:29:12,940 >> MIKE RIZZO：右。 590 00:29:12,940 --> 00:29:16,190 ええ、私たちはそれに買ってあげる 少し中。 591 00:29:16,190 --> 00:29:18,810 ええ、それは同じようなAの PHPを少し。 592 00:29:18,810 --> 00:29:21,240 正確に類似していない。 593 00:29:21,240 --> 00:29:24,730 >> 作るのは良いの区別は何であるか、この 実際に私たちが編集するときに編集している 594 00:29:24,730 --> 00:29:28,480 それがであることを行っていないため、ページ されている実際のファイルを編集する 595 00:29:28,480 --> 00:29:31,380 世界ため、サーバー上に保存 権限を持つべきではない 596 00:29:31,380 --> 00:29:32,610 あなたのファイルを編集します。 597 00:29:32,610 --> 00:29:36,080 これは単にページ上にあるもので編集されている そして何が内に表示されているのは 598 00:29:36,080 --> 00:29:36,950 ブラウザ。 599 00:29:36,950 --> 00:29:40,340 だから、後にページをリロードした場合、 我々のように、何かを削除する、と言う 600 00:29:40,340 --> 00:29:44,730 我々は削除呼び出しで行うことができます参照してください。 そのことは、その後再び表示されます。 601 00:29:44,730 --> 00:29:48,590 >> TOMAS Reimersの：だから1の方法を考えること 私は、お使いのコンピュータだとあれば、これはある 602 00:29:48,590 --> 00:29:50,170 マイクは、一種のサーバである。 603 00:29:50,170 --> 00:29:53,850 何が起こるだろうと、私はするつもりです ねえ、私はのコピーを持つことができ、マイクを尋ねる 604 00:29:53,850 --> 00:29:54,630 このWebページ？ 605 00:29:54,630 --> 00:29:56,190 そして、彼は私にそれのコピーを与えるでしょう。 606 00:29:56,190 --> 00:29:57,430 >> いいえ、それは本来のものではありません。 607 00:29:57,430 --> 00:29:58,620 それはちょうどコピーです。 608 00:29:58,620 --> 00:30:00,450 そしてそれは、ああ、のようになる JavaScriptはここにあります。 609 00:30:00,450 --> 00:30:02,450 明らかに、私が編集する必要があります ページは次のようになります。 610 00:30:02,450 --> 00:30:04,250 そして、私はあなたのコピーを編集しています。 611 00:30:04,250 --> 00:30:05,920 >> しかし、それは達成するないです 実際のコピー。 612 00:30:05,920 --> 00:30:08,480 そして、私は再び彼に聞いていた場合は、 、ページを更新 - 613 00:30:08,480 --> 00:30:10,060 ねえ、私は別のきれいなコピーを持つことができます - 614 00:30:10,060 --> 00:30:11,440 彼は私を与えるために起こっている 別のきれいなコピー。 615 00:30:11,440 --> 00:30:14,240 そして、私は同じことをするつもりだ のように、ああ、これは言っている、ここでJS 616 00:30:14,240 --> 00:30:14,866 これを編集します。 617 00:30:14,866 --> 00:30:17,460 そして、私はそれをやり続けるつもりです。 618 00:30:17,460 --> 00:30:20,930 >> MIKE RIZZO：だから本当にクールなこと あなたはjQueryを使ってできることです 619 00:30:20,930 --> 00:30:24,350 実際には異なるタイプを追加 あなたのページへのアニメーション。 620 00:30:24,350 --> 00:30:27,440 あなたが今までどこに見てきたかどうかは知りません あなたが埋めるためにフォームにしようとしている 621 00:30:27,440 --> 00:30:31,250 オンラインとあなたは記入しないでください 正しく物事。 622 00:30:31,250 --> 00:30:33,440 これほど少ない事が滑り落ちる 上部にある、あなたが言う 623 00:30:33,440 --> 00:30:34,820 これを正しく行っていない。 624 00:30:34,820 --> 00:30:36,260 もう一度やり直してください。 625 00:30:36,260 --> 00:30:37,890 そして、それも、ただ上にスライド可能性があります。 626 00:30:37,890 --> 00:30:40,710 >> jQueryの関数が組み込まれてい判明 それはすべてのことをする 627 00:30:40,710 --> 00:30:44,180 アニメーション本当に、本当に簡単。 628 00:30:44,180 --> 00:30:46,750 だから、フェードが最初にそこにある アウト機能、その 629 00:30:46,750 --> 00:30:47,710 あなたが何かに呼び出すことができます。 630 00:30:47,710 --> 00:30:55,650 そしてそれはのCSSを変更する方法です アニメーション化された方法で、その要素。 631 00:30:55,650 --> 00:30:58,480 だから、どのような要素を取り あなたは上のフェードアウトと呼んでいます。 632 00:30:58,480 --> 00:31:03,990 そして、徐々にそれの不透明度を変更する それは完全に透明になるまで。 633 00:31:03,990 --> 00:31:07,330 >> TOMAS Reimersの：他の人気1 作るとなる、下にスライドさ 634 00:31:07,330 --> 00:31:08,800 何かがそれをスライドさせて表示されます。 635 00:31:08,800 --> 00:31:12,840 だから、ドロップダウンメニューの場合には、 再び、我々は検出するために、どのように知ったとき 636 00:31:12,840 --> 00:31:15,310 これがホバーしたときに、 あなただけの、この一番下に言うことができる 637 00:31:15,310 --> 00:31:16,910 一部は現在ダウンしてスライドさせます。 638 00:31:16,910 --> 00:31:19,270 次いで、それが現れる 滑落による。 639 00:31:19,270 --> 00:31:22,042 640 00:31:22,042 --> 00:31:26,590 >> MIKE RIZZO：そして、あなただけがあれば 念頭に置いて、アニメーションの一部入力することを 641 00:31:26,590 --> 00:31:29,080 jQueryは、必ずしも用意されていません。 642 00:31:29,080 --> 00:31:32,690 たとえば、のはjQueryを言わせて スライドをご提供していますか 643 00:31:32,690 --> 00:31:33,750 ダウンとスライドアップする。 644 00:31:33,750 --> 00:31:36,740 さて、あなたはスライドしたいと思ったとしましょう 左サイドからまたはからで何か 645 00:31:36,740 --> 00:31:39,880 CS50のような適切な種類の メインページはいつ行います 646 00:31:39,880 --> 00:31:42,080 あなたは、新しいパネルに移動します。 647 00:31:42,080 --> 00:31:45,030 あなたは、おそらくしなければならない 自分で使用して実装 648 00:31:45,030 --> 00:31:49,310 jQueryの内の関数をアニメーション化。 649 00:31:49,310 --> 00:31:51,350 >> だから同様に、あなただけのアニメーション化。 650 00:31:51,350 --> 00:31:55,850 そして、その中にかかります 異なる値の辞書 651 00:31:55,850 --> 00:31:57,340 あなたが渡すことになっていること。 652 00:31:57,340 --> 00:32:06,960 だからここでは、アニメーション化したい場合 要素fooはそのようなことを、その幅のどちらか 653 00:32:06,960 --> 00:32:10,880 80ピクセルに伸縮する、 それが現在であるものに応じて。 654 00:32:10,880 --> 00:32:14,100 私たちは、同じようにそれを渡します その中の引数。 655 00:32:14,100 --> 00:32:18,060 >> 他のいくつかの引数を持っているにもアニメーション化 あなたは、たとえば、それを渡すことができますので、 656 00:32:18,060 --> 00:32:21,150 アニメーションの速度 あなたはそれを与えたいと思うことを。 657 00:32:21,150 --> 00:32:26,220 そしてそのためには、私はちょうどだと思います すぐにGoogleのjQueryはアニメーション化。 658 00:32:26,220 --> 00:32:31,710 してから、次のことができ、このページを立ち上げる それは違うの束を持って参照してください。 659 00:32:31,710 --> 00:32:33,560 あなたはそれを渡すことができるプロパティ。 660 00:32:33,560 --> 00:32:35,990 >> そして、私はなることをお勧めします - あなたが来るたびに、 そうしない何かを越えて 661 00:32:35,990 --> 00:32:40,390 知っているか、単にについての詳細を学びたい あなたが呼び出すことができ、特定のメソッド 662 00:32:40,390 --> 00:32:41,270 何かに - 663 00:32:41,270 --> 00:32:44,440 ちょうどそれをグーグル。 jQueryは非常にある 十分に文書化。 664 00:32:44,440 --> 00:32:49,140 そして、多くの場合、多くの時間がある 彼らはあなたのために提供する例を示します。 665 00:32:49,140 --> 00:32:52,470 我々は下にスクロールした場合 - 666 00:32:52,470 --> 00:32:53,720 ずっと下 - 667 00:32:53,720 --> 00:32:57,660 668 00:32:57,660 --> 00:32:59,190 我々としても、使用することができます。 669 00:32:59,190 --> 00:33:02,480 >> 繰り返しますが、開発者が実際になったとき 書き込みaの手間を 670 00:33:02,480 --> 00:33:05,810 ライブラリ、これらは典型的に欲しい それを使用する人。 671 00:33:05,810 --> 00:33:09,400 だから、横にしようとしている ドキュメントも。 672 00:33:09,400 --> 00:33:12,270 そして、そのドキュメントは、通常することができます あるプロジェクトのページ上で発見 673 00:33:12,270 --> 00:33:14,970 なぜ我々はあなたのその元のサイトを与えた にあなたをリンクし始め、 674 00:33:14,970 --> 00:33:18,080 プロジェクトページのことができますので、 そのドキュメントを参照してください。 675 00:33:18,080 --> 00:33:22,670 >> 一般的には、ケース内のプロジェクトページ [聞こえない]のではなく、あなたに言った 676 00:33:22,670 --> 00:33:23,940 クラスの名前。 677 00:33:23,940 --> 00:33:27,250 のJavaScriptの場合には、得られる あなたの関数の名前。 678 00:33:27,250 --> 00:33:35,310 ところで、我々は上までスクロールすると、 機能のクイックサイドノートです 679 00:33:35,310 --> 00:33:39,080 あなたが実現される機能を見るたびに ハードでこのような 680 00:33:39,080 --> 00:33:43,800 中央のブラケット、その手段 そのプロパティがオプションであること。 681 00:33:43,800 --> 00:33:44,750 ちょうどヘッドアップ。 682 00:33:44,750 --> 00:33:47,350 私は多くの質​​問を見てきました そのことについて。 683 00:33:47,350 --> 00:33:50,370 >> そこでここでは見ることができます アニメイト、プロパティを取る 684 00:33:50,370 --> 00:33:51,800 必要な引数として。 685 00:33:51,800 --> 00:33:54,870 そして、他のすべてはオプションです。 686 00:33:54,870 --> 00:33:56,136 サイドノート - 687 00:33:56,136 --> 00:33:58,090 あなたは、並べ替え、これと考えることができます manページのような、の。 688 00:33:58,090 --> 00:34:04,275 manページには、Cのドキュメントであり、 他の多くのもののためだけでなく。 689 00:34:04,275 --> 00:34:11,020 >> MIKE RIZZO：だから我々は学習した内容 ページ上の別のCSSを変更し、 690 00:34:11,020 --> 00:34:14,040 それをアニメーション化し、HTMLを追加、削除。 691 00:34:14,040 --> 00:34:16,889 しかし、実際に最も強力なの一つ JavaScriptの約物事 692 00:34:16,889 --> 00:34:18,270 特にjQueryの - 693 00:34:18,270 --> 00:34:22,570 何それはあなたが行うことができますことはへの対応である 起こるさまざまな要素。 694 00:34:22,570 --> 00:34:25,380 例えば、ここで我々は持っている イベントハンドラ。 695 00:34:25,380 --> 00:34:28,210 そして、それはちょうどたびに、このことを意味する イベントが発生し、我々はそれを処理する 696 00:34:28,210 --> 00:34:29,280 特定の方法。 697 00:34:29,280 --> 00:34:35,159 >> だからここに、一般的なjQueryのイベント ハンドラは、上のドットである。 698 00:34:35,159 --> 00:34:42,949 そして、まず最初にあなたが提供 どのようなイベントは、それが必要である 699 00:34:42,949 --> 00:34:43,810 のリスニングをする。 700 00:34:43,810 --> 00:34:45,610 だからここでは、そのクリックの 我々は待っている。 701 00:34:45,610 --> 00:34:49,250 >> TOMAS Reimersの：別の方法として、次のものが ホバーで、これは非常に人気の一つです。 702 00:34:49,250 --> 00:34:52,000 だから、戻ってメニューのアイデアダウン私のドロップします。 703 00:34:52,000 --> 00:34:54,239 あなたは、ホバーの一番上の1を持っているでしょう。 704 00:34:54,239 --> 00:34:56,096 それから、あなたはそれを変更することができます。 705 00:34:56,096 --> 00:34:56,830 >> MIKE RIZZO：右。 706 00:34:56,830 --> 00:35:01,680 次いで、それが起こるときに、それだけで 我々はそれを与える、この関数が実行されます 707 00:35:01,680 --> 00:35:05,080 引数としてその それはハローアラートまたはこんにちは。 708 00:35:05,080 --> 00:35:08,900 >> TOMAS Reimersの：だから例中 JavaScriptは、これは我々がする必要がある場所です 709 00:35:08,900 --> 00:35:12,970 実際に我々はできるCから自分自身を削除する 引数として関数を取る。 710 00:35:12,970 --> 00:35:15,940 との多くは実際にそこにある これを行うための複雑な方法。 711 00:35:15,940 --> 00:35:17,940 私たちは一つの方法を推進するつもりだ、 これはユーザーが定義することができます 712 00:35:17,940 --> 00:35:19,270 すぐそこに機能。 713 00:35:19,270 --> 00:35:22,540 >> だから、関数として求めているとき パラメータには、あなたは基本的にしている 714 00:35:22,540 --> 00:35:24,500 関数を定義しようとして その場で。 715 00:35:24,500 --> 00:35:27,090 そして、あなたは関数を定義する方法 JavaScriptであなたがある 716 00:35:27,090 --> 00:35:28,820 文字通り機能を言う。 717 00:35:28,820 --> 00:35:30,130 その後、通常は、名 関数の。 718 00:35:30,130 --> 00:35:32,510 しかし、我々は、参照しようとしていることはありません この関数は、再び。 719 00:35:32,510 --> 00:35:34,040 だから我々は無名のままにしておきます。 720 00:35:34,040 --> 00:35:40,440 >> その後の括弧は、括弧 括弧し、その内のコード。 721 00:35:40,440 --> 00:35:42,540 だから我々は、この缶を理解する 少し混乱する。 722 00:35:42,540 --> 00:35:45,180 だから我々はあなたの一般的な形式を与える イベントハンドラはどのようなものか 723 00:35:45,180 --> 00:35:47,790 以下に、そのイベントになります。 724 00:35:47,790 --> 00:35:50,598 そして、その中にあなたのコード。 725 00:35:50,598 --> 00:35:52,478 >> MIKE RIZZO：任意のはありますか このことについての質問？ 726 00:35:52,478 --> 00:35:54,818 これは少し混乱することができます あなたがそれを見ることは初めて。 727 00:35:54,818 --> 00:35:57,550 >> TOMAS Reimersの：あなたが実際にしたい ファイルを開いて、それらをいくつか示し 728 00:35:57,550 --> 00:35:58,155 jQueryの今？ 729 00:35:58,155 --> 00:35:59,853 >> MIKE RIZZO：うん、それをしてみましょう。 730 00:35:59,853 --> 00:36:00,256 [OK]をクリックします。 731 00:36:00,256 --> 00:36:02,490 >> TOMAS Reimersの：だから今我々はしている アプライアンス内。 732 00:36:02,490 --> 00:36:07,730 そして、私たちがやったことは我々が撮影したある てindex.HTML両方を作成する自由を 733 00:36:07,730 --> 00:36:10,100 にリンクしているファイル、 JavaScriptファイル。 734 00:36:10,100 --> 00:36:12,880 そして、我々は開くことができます - 735 00:36:12,880 --> 00:36:15,170 うん。 736 00:36:15,170 --> 00:36:16,630 まあ、それは2つのことを行います。 737 00:36:16,630 --> 00:36:18,350 >> 最初には、リンク先である JavaScriptファイル。 738 00:36:18,350 --> 00:36:21,250 そして、我々はここでそのアップ表示されます。 739 00:36:21,250 --> 00:36:25,340 我々は頭の中でそれを参照してください。 HTMLドキュメント、特に。 740 00:36:25,340 --> 00:36:28,260 だから、そこにいることがわかります 我々は、基本的には、SRCを言う、 741 00:36:28,260 --> 00:36:29,590 どのソースを表します。 742 00:36:29,590 --> 00:36:30,630 そして、それは、URLの。 743 00:36:30,630 --> 00:36:32,700 >> だからここに私たちがしたと言うことができます jQueryを含んでいた。 744 00:36:32,700 --> 00:36:34,290 そして、我々はまた、スクリプトを用意しました。 745 00:36:34,290 --> 00:36:40,630 JavaScriptを含めるために他の方法です あなたは、インラインスクリプトを含むことができること 746 00:36:40,630 --> 00:36:44,600 我々はそれ底に持っているように、タグ スクリプトタイプがテキストのJavaScriptであると言います。 747 00:36:44,600 --> 00:36:46,960 >> だから我々は我々がしている、聞いて、と言っている スクリプトを含めることについて。 748 00:36:46,960 --> 00:36:51,890 そして、そのスクリプトのタイプです テキストの一種ではJavaScript、。 749 00:36:51,890 --> 00:36:52,550 非常にシンプル。 750 00:36:52,550 --> 00:36:56,490 >> MIKE RIZZO：だから、これは、種の、に到達 我々には方法についてのご質問 751 00:36:56,490 --> 00:37:02,340 私たちのファイルにJavaScriptのときに我々のため PHPは、我々はこのような何かをしていた。 752 00:37:02,340 --> 00:37:07,570 そして、私たちのPHPの機能を持っている - それでは株式が行うとしましょう 753 00:37:07,570 --> 00:37:09,150 それと何か - 754 00:37:09,150 --> 00:37:10,490 そこに行く。 755 00:37:10,490 --> 00:37:13,860 しかし、今、私たちはスクリプトタグを持っている 我々はそれを与えることが、実際にある 756 00:37:13,860 --> 00:37:19,470 HTML自体の一部ではありませんので、 それのようなHTMLファイルであること偽造 757 00:37:19,470 --> 00:37:25,070 PHPであるあなたが実際に行く場合、以下の原因 そして、ページのソースを見て、 758 00:37:25,070 --> 00:37:28,430 あなたはそこで、これらのスクリプトタグが表示されます JavaScriptが関連付けられていると 759 00:37:28,430 --> 00:37:29,800 その中で彼ら。 760 00:37:29,800 --> 00:37:31,760 >> それでは、私たちがしたい場合 いくつかのJavaScriptを書く - 761 00:37:31,760 --> 00:37:37,110 ちょうど私たちが身体を変えたいと思ったとしましょう 今私が持っていないため、 762 00:37:37,110 --> 00:37:40,020 私は実際に可能な他のタグ 体のほかに編集します。 763 00:37:40,020 --> 00:37:42,450 ちょうど私がしたいとしましょう それのCSSを変更してください。 764 00:37:42,450 --> 00:37:46,190 だから我々は先に行くと、変更します 赤にそれの色。 765 00:37:46,190 --> 00:37:47,380 >> だから私は、ファイルを保存します。 766 00:37:47,380 --> 00:37:52,700 、リフレッシュし、私たちのWebページに戻りましょう それが自動的にそれをしない 767 00:37:52,700 --> 00:37:55,920 それは待っていたようにそれはいないようでしたので、 我々は聞いていなかった、まったくないため 768 00:37:55,920 --> 00:37:59,450 そのようなイベントか何かのために。 769 00:37:59,450 --> 00:38:02,800 >> TOMAS Reimersの：だから我々はそれに戻っている場合 特にファイル - HTML 770 00:38:02,800 --> 00:38:04,710 ファイル - あなたが行っているものを 表示するには、我々が持っているである - 771 00:38:04,710 --> 00:38:06,810 これがロードされていることを覚えて、 年代順に、一種の。 772 00:38:06,810 --> 00:38:09,910 だから我々は最初の頭を持っています。 それは、これらの2つのファイルをロードします。 773 00:38:09,910 --> 00:38:10,800 その後、我々は、体にアクセスしてください。 774 00:38:10,800 --> 00:38:11,640 そして、我々はこんにちは、世界を参照してください。 775 00:38:11,640 --> 00:38:13,030 だから我々はハローワールドをレンダリングします。 776 00:38:13,030 --> 00:38:15,240 >> そして、我々が持っている最後のもの 私たちは、スクリプトタグを持っている。 777 00:38:15,240 --> 00:38:20,880 それはだからので、スクリプトタグが実行されます 何のために待機することを語っていない。 778 00:38:20,880 --> 00:38:24,700 そして、それは最も基本的だ JavaScriptを実行する方法。 779 00:38:24,700 --> 00:38:29,200 >> ということで、スクリプトを置くことができます ヘッダーにまでタグ付けだけ 780 00:38:29,200 --> 00:38:31,240 この点を示すために？ 781 00:38:31,240 --> 00:38:34,450 782 00:38:34,450 --> 00:38:35,700 そして、それを実行します。 783 00:38:35,700 --> 00:38:38,880 784 00:38:38,880 --> 00:38:41,070 我々は、それに気づくになるだろう 色を変更しませんでした。 785 00:38:41,070 --> 00:38:44,210 そして、これは問題の一つである JavaScriptは物事がロードされていることである 786 00:38:44,210 --> 00:38:45,930 年代順に。 787 00:38:45,930 --> 00:38:49,750 >> だから、時とそのコード 実行されていた、我々は選択した - 788 00:38:49,750 --> 00:38:52,530 戻る - 789 00:38:52,530 --> 00:38:53,670 bodyタグ。 790 00:38:53,670 --> 00:38:57,560 bodyタグはまだ存在しないため JavaScriptは、HTMLに沿ったものです。 791 00:38:57,560 --> 00:39:01,790 だから、ブラウザが選択ボディのようなものです。 792 00:39:01,790 --> 00:39:02,760 まだそのようなことはありません。 793 00:39:02,760 --> 00:39:03,600 だから我々はそれを無視することができます。 794 00:39:03,600 --> 00:39:05,330 そして、我々は続ける。 795 00:39:05,330 --> 00:39:07,200 >> そして、我々は、bodyタグを定義します。 796 00:39:07,200 --> 00:39:09,670 しかし、それは更新されることは決してありません。 797 00:39:09,670 --> 00:39:12,560 だから、スクリプトを実装しているとき タグ、必ず場所にする 798 00:39:12,560 --> 00:39:15,502 bodyタグの後。 799 00:39:15,502 --> 00:39:16,820 次のスライド。 800 00:39:16,820 --> 00:39:17,830 >> MIKE RIZZO：わかりました。 801 00:39:17,830 --> 00:39:19,330 だから我々は何を変更しました。 802 00:39:19,330 --> 00:39:21,910 それが答えのように、それは見ていない 私たちはまったくそれだけの種類のため、 803 00:39:21,910 --> 00:39:24,150 とすぐにページをロードとしてそれをやった。 804 00:39:24,150 --> 00:39:27,700 だから今、代わりにこれを行うのは、なぜ 私たちは、イベントハンドラを追加しないでください。 805 00:39:27,700 --> 00:39:31,020 >> それでは、何かをやらせる 身体に再び。 806 00:39:31,020 --> 00:39:33,490 とのは、我々はそれを行うこととしましょう​​ - 807 00:39:33,490 --> 00:39:34,500 クリックしてください。 808 00:39:34,500 --> 00:39:35,750 私たちは、機能を追加します。 809 00:39:35,750 --> 00:39:38,270 810 00:39:38,270 --> 00:39:39,690 >> TOMAS Reimersの：レッツ·チェンジ それが再び赤に色です。 811 00:39:39,690 --> 00:39:40,000 なぜでしょうか？ 812 00:39:40,000 --> 00:39:41,680 >> MIKE RIZZO：ええ、みましょ変更 再び赤に '色。 813 00:39:41,680 --> 00:39:46,310 814 00:39:46,310 --> 00:39:46,900 わかりました。 815 00:39:46,900 --> 00:39:48,480 それでは、ページをリロードしてみましょう。 816 00:39:48,480 --> 00:39:49,530 [OK]を、我々が表示さ - 817 00:39:49,530 --> 00:39:52,290 予想通り、それはまだ赤く点灯しません。 818 00:39:52,290 --> 00:39:53,610 しかし、我々は先に行くと、それをクリックすることもできます。 819 00:39:53,610 --> 00:39:54,270 >> TOMAS Reimersの：それが赤色に変わりはない。 820 00:39:54,270 --> 00:39:56,090 >> MIKE RIZZO：そしてそれはありません 期待どおり赤に。 821 00:39:56,090 --> 00:39:59,010 >> TOMAS Reimersの：そして、我々はどのように見ることができます 我々は非常に基本的な構築を開始することができます 822 00:39:59,010 --> 00:40:00,170 相互作用。 823 00:40:00,170 --> 00:40:03,850 私たちがやりたいことがあります他のものであり、 私たちは、身体を作るためにしたくない場合は、 824 00:40:03,850 --> 00:40:07,230 カラーレッド、のはHTMLを作ってみよう 背景色の赤。 825 00:40:07,230 --> 00:40:08,480 ちょうどので、それは同じCSSです。 826 00:40:08,480 --> 00:40:19,960 827 00:40:19,960 --> 00:40:23,320 >> そして、我々はそれを変更するとき、私たちはこれを見ることができます 変えるのは非常に劇的な効果 828 00:40:23,320 --> 00:40:25,510 ページ全体。 829 00:40:25,510 --> 00:40:29,100 ので、もう一度、あなたが物事を実装している場合、 あなたは一つの成分を持つことができます 830 00:40:29,100 --> 00:40:30,150 その上でクリックすることを意味する。 831 00:40:30,150 --> 00:40:32,710 それでは終了]ボタンを言わせてと 全体の他の構成要素、 832 00:40:32,710 --> 00:40:33,830 これに応答することを意味する。 833 00:40:33,830 --> 00:40:35,755 だから、ウィンドウが削除される それが起こるとき。 834 00:40:35,755 --> 00:40:39,341 835 00:40:39,341 --> 00:40:40,700 >> MIKE RIZZO：わかりました。 836 00:40:40,700 --> 00:40:42,200 ほんの一例として - 837 00:40:42,200 --> 00:40:44,400 この先には見られませんでした - 838 00:40:44,400 --> 00:40:47,500 私はちょうどそれがどのようなものかを紹介します 我々は何かを隠すときのように。 839 00:40:47,500 --> 00:40:52,220 だから私は先に行くだろうと上にスライドん。 840 00:40:52,220 --> 00:40:54,440 >> TOMAS Reimersの：でそれをラップする 段落の種類、我々はそれを行う前に、？ 841 00:40:54,440 --> 00:40:55,132 >> MIKE RIZZO：わかりました。 842 00:40:55,132 --> 00:40:59,135 ええ、なぜ我々はちょうどそうそれをしないでください 我々はもう少しそれを選択することができます。 843 00:40:59,135 --> 00:41:00,490 >> TOMAS Reimersの：とletの それにクラスを与える。 844 00:41:00,490 --> 00:41:01,740 >> MIKE RIZZO：うん。 845 00:41:01,740 --> 00:41:06,575 846 00:41:06,575 --> 00:41:09,920 [OK]を、ので、見てみましょう。 847 00:41:09,920 --> 00:41:14,820 代わりに、実際のボディを選択する 今、私はちょうどですべてを選択します 848 00:41:14,820 --> 00:41:18,780 ここでは、クラスのhello、 ただ一つのことを持っている。 849 00:41:18,780 --> 00:41:20,900 だから我々はする必要はありません そのことについて心配している。 850 00:41:20,900 --> 00:41:23,080 >> だから私はそれを更新します。 851 00:41:23,080 --> 00:41:24,230 私が先に行くと、それをクリックします。 852 00:41:24,230 --> 00:41:27,890 そしてそれは、一種の、奇妙なスライドをしました それを見ていない最高のもの、 853 00:41:27,890 --> 00:41:29,580 魅力的。 854 00:41:29,580 --> 00:41:31,060 一般的に、彼らはかなりいいますか。 855 00:41:31,060 --> 00:41:32,720 いくつかのために - 私は、この推測 理由 - しませんでした。 856 00:41:32,720 --> 00:41:36,640 私はちょうどので、フェードアウトをやる あなたも、その時に見ることができます。 857 00:41:36,640 --> 00:41:38,100 非常に良く。 858 00:41:38,100 --> 00:41:41,150 >> そして、私はJavaScriptを開く場合は、 再びコンソールと我々は何を見たい 859 00:41:41,150 --> 00:41:43,900 それは我々がそれをフェードインするときのように見える 860 00:41:43,900 --> 00:41:46,920 今、私はちょうどそれにフェードインを呼び出します。 861 00:41:46,920 --> 00:41:48,830 そして、それはピンを見るにはフェード 862 00:41:48,830 --> 00:41:56,150 >> 同様に、私たちは実際にも渡すことができます フェードインやフェードアウトの引数、 863 00:41:56,150 --> 00:41:57,640 これ、ちょっと、それの速度である。 864 00:41:57,640 --> 00:42:02,220 それでは、先に行くと、私たちが望むとしましょう それはフェードインゆっくり行く 865 00:42:02,220 --> 00:42:04,250 だから私はそれはまだだったと思います かなり速い。 866 00:42:04,250 --> 00:42:06,180 しかし、それは以前よりも遅かった。 867 00:42:06,180 --> 00:42:10,340 >> TOMAS Reimersの：そして、あなたが検索したい場合は、 再び、これらの事についてのより多くの、 868 00:42:10,340 --> 00:42:13,410 ただ、jQueryの説明を見る 私たちはあなたを与えられ、読んだどの 869 00:42:13,410 --> 00:42:13,735 これらを通じて。 870 00:42:13,735 --> 00:42:15,790 彼らは、それらの機能を文書化 非常によく。 871 00:42:15,790 --> 00:42:18,622 872 00:42:18,622 --> 00:42:19,570 >> MIKE RIZZO：わかりました。 873 00:42:19,570 --> 00:42:21,560 ので、私は話を戻し、このに行こうと思います。 874 00:42:21,560 --> 00:42:23,490 そして、我々は我々の最後のページについて話すことができます。 875 00:42:23,490 --> 00:42:24,690 まあ、我々は、ブートストラップで終了することができます。 876 00:42:24,690 --> 00:42:27,140 そして、我々はそれを開くでしょう いくつかの質問について。 877 00:42:27,140 --> 00:42:30,180 そしてあなたたちは、その任意のアイデアを持っている場合 あなたが投げると見てみたい 878 00:42:30,180 --> 00:42:34,150 我々はそれらを実装することができる場合 JavaScriptを迅速。 879 00:42:34,150 --> 00:42:37,890 >> だから、本当にすぐにブートストラップについて、どの 自動的に含まれていた 880 00:42:37,890 --> 00:42:41,700 CSSのフォルダに設定され、最後の問題 そして実際にあなたににリンク 881 00:42:41,700 --> 00:42:43,190 header.phpの。 882 00:42:43,190 --> 00:42:46,740 だから、そのクラスを追加することもでき それにブートストラップ内で定義されています。 883 00:42:46,740 --> 00:42:50,490 そして、それは自動的にスタイルだろう それに応じてそれらの事。 884 00:42:50,490 --> 00:42:54,550 >> TOMAS Reimersの：だからブートストラップは非常にある 人々によって開発された魔法の事 885 00:42:54,550 --> 00:42:55,340 ツイッターで。 886 00:42:55,340 --> 00:42:57,230 とそれが何を意味されたことだった - 887 00:42:57,230 --> 00:43:00,740 ウェブサイトは、作るのは本当に難しかった前 我々が持っていた場合は特に、見栄え 888 00:43:00,740 --> 00:43:02,200 共通コンポーネントがたくさん。 889 00:43:02,200 --> 00:43:04,770 だから、上のボタンがたくさん ウェブは、同じように見えた。 890 00:43:04,770 --> 00:43:08,960 >> テキストフ​​ィールドの多くは、にすることができる 標準のテキストよりもよく見える 891 00:43:08,960 --> 00:43:13,620 あなたはおそらく本当にから知っている分野 本当に古いウェブサイトや不完全た 892 00:43:13,620 --> 00:43:18,210 まさに文字通りのように見えるウェブサイト、 テキストの任意のフォームのないテキストボックス 893 00:43:18,210 --> 00:43:21,190 影や素敵なアウトラインのあらゆる種類の。 894 00:43:21,190 --> 00:43:24,540 それでは、ブートストラップがやったことは、それはよく、と言われた 我々は多くの共通のスタイルを持っている。 895 00:43:24,540 --> 00:43:28,210 なぜ我々は、CSSの1共通セットすることはありません やJavaScriptなどの共通セット 896 00:43:28,210 --> 00:43:32,210 で、これも、それをスタイルすることができます 人々にドロップのようなものを与えることができます 897 00:43:32,210 --> 00:43:34,610 人々を与えることができ、メニュー、ダウン モーダルのようなもの。 898 00:43:34,610 --> 00:43:38,580 >> モーダルは、ページの上にポップアップ表示されものです それは厳密に言えばだときはいつでも 899 00:43:38,580 --> 00:43:41,090 さらに抑制する何か、 あなたまでの相互作用 900 00:43:41,090 --> 00:43:43,110 それと対話する。 901 00:43:43,110 --> 00:43:45,820 このようなものは、あなたが確信しているである あなたはこの事を削除しますか？ 902 00:43:45,820 --> 00:43:49,100 あなたは本当に他に何もすることはできません あなたがイエスと言うか、いいえまで。 903 00:43:49,100 --> 00:43:52,720 >> それは、このすべてを取り、それをパッケージ化 一緒にここで行く、と述べた。 904 00:43:52,720 --> 00:43:54,630 人々は今、これを使用することができます。 905 00:43:54,630 --> 00:43:56,830 そして、あなたはそれを上に見つけることができます getbootstrap.comで。 906 00:43:56,830 --> 00:44:00,480 これは、自動的に内部に含まれていた 最後の問題は、設定してください。 907 00:44:00,480 --> 00:44:04,160 そして、あなたはに大歓迎だ あなたの最終的なプロジェクトでそれを使用しています。 908 00:44:04,160 --> 00:44:06,950 そして、あなたはそれをフォローしたい場合は、 ブートストラップを入手するためのリンク。 909 00:44:06,950 --> 00:44:10,590 910 00:44:10,590 --> 00:44:15,700 >> あなたがここに表示されますです CSSのサイトをブートストラップ。 911 00:44:15,700 --> 00:44:16,860 ブートストラップが表示されます。 912 00:44:16,860 --> 00:44:20,450 あなたが下にスクロールした場合や、次のように表示されます どのようにするには、それをダウンロードする方法 913 00:44:20,450 --> 00:44:21,900 それをインストールし、エトセトラ。 914 00:44:21,900 --> 00:44:24,700 >> MIKE RIZZO：そして、あなたはすることもでき、 興味深いことに、それをカスタマイズする 915 00:44:24,700 --> 00:44:27,770 テーマのどのような種類で あなたが望むこと。 916 00:44:27,770 --> 00:44:31,270 私は私が私のためにした何かを知っている 私はクラスを取った最後のプロジェクト 917 00:44:31,270 --> 00:44:32,050 それをカスタマイズした。 918 00:44:32,050 --> 00:44:34,540 ブートストラップとは異なるバージョンという 異なるカラースキームを持っていたし、 919 00:44:34,540 --> 00:44:36,700 いくつかの異なる形状 別物。 920 00:44:36,700 --> 00:44:38,250 だから私はそれでプレイすることをお勧めします。 921 00:44:38,250 --> 00:44:39,440 それは、何が楽しいのようなものだ。 922 00:44:39,440 --> 00:44:43,230 >> TOMAS Reimersの：トップを見ると 再び、それがフォントに非常に類似してい 923 00:44:43,230 --> 00:44:44,970 すごいサイト。 924 00:44:44,970 --> 00:44:47,810 資料の多くが始まります あなたがした場合にも同様のようでする 925 00:44:47,810 --> 00:44:48,940 それを十分に見られる。 926 00:44:48,940 --> 00:44:51,260 そこでここでは、CSSを持っている このコンポーネント。 927 00:44:51,260 --> 00:44:53,540 そして、あなたはどのように表示されます 物事のスタイルを設定することができます。 928 00:44:53,540 --> 00:44:56,780 ですから、例えば、テーブルをクリックすると、 あなたは即座に行うことができます 929 00:44:56,780 --> 00:45:01,710 テーブルはかなり単純に追加することで、 それにクラス表。 930 00:45:01,710 --> 00:45:03,150 >> ボタンのと同じこと。 931 00:45:03,150 --> 00:45:12,140 あなたは、単にクラスBTNとBTNを追加した場合 デフォルトまたはBTN一次、次のことが可能 932 00:45:12,140 --> 00:45:16,240 これらのボタンのいずれかを取得 これらの既製のスタイルを持つ。 933 00:45:16,240 --> 00:45:18,570 そして、あなたが探しているなら 単によりも複雑なもの 934 00:45:18,570 --> 00:45:24,100 Wは既に以上に、持っているものをモデルチェンジ トップ私たち全体のJavaScriptのタブ 935 00:45:24,100 --> 00:45:25,120 コンポーネントの束を持っている。 936 00:45:25,120 --> 00:45:30,410 >> そこでここでは、トランジション、モーダルを持っている、 ドロップダウン、タブ、ツールチップ。 937 00:45:30,410 --> 00:45:35,530 ツールヒントは、あなたの下にポップアップ表示ものです あなたが何かにホバーマウス。 938 00:45:35,530 --> 00:45:40,280 ポップオーバー、アラート、ボタン、折りたたみ可能 アコーディオンは何ですか 939 00:45:40,280 --> 00:45:41,190 彼らは通常と呼ばれています。 940 00:45:41,190 --> 00:45:43,045 カルーセル、そのフリップ のようなイメージを通して。 941 00:45:43,045 --> 00:45:52,190 942 00:45:52,190 --> 00:45:54,840 >> ので、これらの構成要素である ブートストラップの。 943 00:45:54,840 --> 00:45:57,620 私がすることをお勧めだろう 非常にそれらを見に行く。 944 00:45:57,620 --> 00:46:01,780 JavaScriptコンポーネントがあります およびCSSコンポーネント。 945 00:46:01,780 --> 00:46:03,880 あなたがするようにそれらを使用して自由に感じる。 946 00:46:03,880 --> 00:46:06,730 我々は彼らにあまり行くつもりはない 我々は文書を感じるので、 947 00:46:06,730 --> 00:46:09,360 本当によく行われます。 948 00:46:09,360 --> 00:46:10,540 そして、ええ。 949 00:46:10,540 --> 00:46:14,500 あなたはそのことについて質問がありますか？ 950 00:46:14,500 --> 00:46:19,430 >> MIKE RIZZO：本当に速いですように 側、このWebページのデザイン、その 951 00:46:19,430 --> 00:46:21,830 我々はすぐに一緒に入れる このプレゼンテーションは、 952 00:46:21,830 --> 00:46:24,290 実際にブートストラップを使用して行う。 953 00:46:24,290 --> 00:46:27,810 ご覧のように、我々はこれらをクリックすると、 別のタブには、私たちは実際にしていること 954 00:46:27,810 --> 00:46:30,750 この電流index.htmlページを離れる。 955 00:46:30,750 --> 00:46:36,400 それでは、我々が持っていることは違うdiv要素である このindex.htmlを内。 956 00:46:36,400 --> 00:46:39,610 そして、我々は別のをクリックするたびに タブは、それだけで変更することだ 957 00:46:39,610 --> 00:46:41,590 その1の表示しています。 958 00:46:41,590 --> 00:46:47,390 >> だから、それに応じてそれらを配置し、 ページのHTMLを変更することにより、 959 00:46:47,390 --> 00:46:52,330 現在のタブをアクティブとしてマークされているので、 それは異なって表示され、ルックス 960 00:46:52,330 --> 00:46:52,820 本当に素晴らしい。 961 00:46:52,820 --> 00:46:57,260 >> TOMAS Reimersの：だから、すべて行われていた 私たちは、ほぼすべてのCSSを記述することなく。 962 00:46:57,260 --> 00:47:01,440 また、上部にヘッダーが表示され、 どの色が私たちによるものである。 963 00:47:01,440 --> 00:47:04,800 しかし、実際には上に置く ページの最上部となっ 964 00:47:04,800 --> 00:47:06,660 それスクロールはブートストラップだった。 965 00:47:06,660 --> 00:47:09,720 してからでも、他のライブラリのための - この 我々は話を1が、1ではありません 966 00:47:09,720 --> 00:47:11,580 必要に応じて、あなたは、Googleができます。 967 00:47:11,580 --> 00:47:15,130 これはprettify.jsと呼ばれています。 968 00:47:15,130 --> 00:47:20,650 そして、それはあなたのコードを構文強調表示します あなたは、CSSとJavaScriptの両方を使用するため。 969 00:47:20,650 --> 00:47:23,480 970 00:47:23,480 --> 00:47:27,070 >> 我々が話をしたい最後のこと 我々はにあなたを解放する前に、 971 00:47:27,070 --> 00:47:30,620 把握するために、ライブラリを見て、世界 うまくいけば、それらを使用してする方法、 972 00:47:30,620 --> 00:47:34,640 ドキュメントを読んで、何があな​​たを見つける 必要がライブラリを検索する方法です。 973 00:47:34,640 --> 00:47:37,000 したがって、最初は我々だけだです Googleにプッシュする。 974 00:47:37,000 --> 00:47:37,810 Googleにアクセスしてください。 975 00:47:37,810 --> 00:47:41,150 >> それは我々が何をすべきか、文字通りのときに我々 我々は、Googleで何かをする必要があります。 976 00:47:41,150 --> 00:47:44,730 JavaScriptライブラリが存在することを 私は時間を操作することができます 977 00:47:44,730 --> 00:47:45,400 便利な方法？ 978 00:47:45,400 --> 00:47:49,510 だから私はいくつかのユーザーが作成することがわかっている場合 ここでアカウントがあり、これは 979 00:47:49,510 --> 00:47:53,010 現在の時間、どのように計算することができます しなくても、それとの違い 980 00:47:53,010 --> 00:47:55,020 それを自分で計算する？ 981 00:47:55,020 --> 00:47:59,630 だから、これは実際には一般的なことですが、 JavaScriptのランタイムライブラリ。 982 00:47:59,630 --> 00:48:02,440 そしてここで我々Moment.js- - 最も人気のある1。 983 00:48:02,440 --> 00:48:06,530 >> 我々は、操作するためのライブラリが必要な場合 色ができるようにしたいもの 984 00:48:06,530 --> 00:48:08,650 ランダムな色の束を生成する - 985 00:48:08,650 --> 00:48:10,660 場合によっては、生成する スタイルや何か - 986 00:48:10,660 --> 00:48:13,480 我々は次のようにGoogleの可能性 JavaScriptのカラーライブラリ。 987 00:48:13,480 --> 00:48:15,620 そして、私は我々がポップアップ表示さだろうと思う 千、そのうちの1。 988 00:48:15,620 --> 00:48:18,290 989 00:48:18,290 --> 00:48:21,410 あなたがそれらを介して読み取ることが歓迎している。 990 00:48:21,410 --> 00:48:24,610 >> だから、ほとんどのもの - あなたがそれらを見つけるとき - 行くのはの1でホストされている 991 00:48:24,610 --> 00:48:25,920 サイトのホスト·コード。 992 00:48:25,920 --> 00:48:26,960 彼らはしている、いくつかの人気のあるものである。 993 00:48:26,960 --> 00:48:30,870 することで、最も人気のある ズーム、github.comである。 994 00:48:30,870 --> 00:48:35,300 そして、あなたはGitHubのに行けば、それが実際の ノーマライズは、ホストされた場所。 995 00:48:35,300 --> 00:48:36,950 あなたが戻って、その1へ行きたいのであれば。 996 00:48:36,950 --> 00:48:38,135 彼らにそれを表示します。 997 00:48:38,135 --> 00:48:40,516 >> MIKE RIZZO：そして、それは実際の あなたは気づいている場合、これは、あまりにもホストされています。 998 00:48:40,516 --> 00:48:41,000 >> TOMAS Reimersの：うん。 999 00:48:41,000 --> 00:48:49,078 ですから、正規化することを超えた場合 とGitHubのに移動します。 1000 00:48:49,078 --> 00:48:51,936 それはあったでしょうか？ 1001 00:48:51,936 --> 00:48:54,620 >> MIKE RIZZO：その小さな猫の事 GitHubのシンボルです。 1002 00:48:54,620 --> 00:48:56,330 >> TOMAS Reimersの：ああ。 1003 00:48:56,330 --> 00:49:02,180 だから、GitHubの呼び出されたメソッドを使用しています コー​​ドを格納するgitの。 1004 00:49:02,180 --> 00:49:05,150 あなたはそれがあるかわからないです それはそれで結構です、あなたを怖がらせる。 1005 00:49:05,150 --> 00:49:16,100 あなたは、Gitが何であるかを知っている必要はありません GitHubのは、[ダウンロード]ボタンを持っているので 1006 00:49:16,100 --> 00:49:17,200 右下の。 1007 00:49:17,200 --> 00:49:21,350 >> 知っている他の有用なこと GitHubのはほとんどの製品は約 1008 00:49:21,350 --> 00:49:23,200 私を読む必要があります。 1009 00:49:23,200 --> 00:49:25,400 そして、彼らはウェブサイトを持っていない場合、 私はどのようにして話をします読んで 1010 00:49:25,400 --> 00:49:28,310 何それ、あなたがそれを使用する方法、それをインストールする んが、エトセトラ、エトセトラ、エトセトラ。 1011 00:49:28,310 --> 00:49:31,033 私たちは基本的にしてきた あなたを歩く。 1012 00:49:31,033 --> 00:49:32,326 >> MIKE RIZZO：インターネットの辞職。 1013 00:49:32,326 --> 00:49:34,020 >> TOMAS Reimersの：それは結構です。 1014 00:49:34,020 --> 00:49:36,980 我々が望んでいた最後の二つのこと について話をする - 1015 00:49:36,980 --> 00:49:38,750 私たちは、Gitの話をしました - 1016 00:49:38,750 --> 00:49:40,290 トラブルシューティングです。 1017 00:49:40,290 --> 00:49:43,020 そして、この1は、場合とは関係ありません そのまま最終生成物 1018 00:49:43,020 --> 00:49:44,870 あなたは50を離れるとき。 1019 00:49:44,870 --> 00:49:48,310 そして、あなたは製品に実行したとき ライブラリの実装や実装 1020 00:49:48,310 --> 00:49:50,230 あなたが行っている独自のプロジェクト、 質問があるか、だために 1021 00:49:50,230 --> 00:49:51,660 質問を探しに行く。 1022 00:49:51,660 --> 00:49:53,060 >> もう一度、それをグーグル。 1023 00:49:53,060 --> 00:49:54,630 それは文字通り、私たちは何をすべきかだ。 1024 00:49:54,630 --> 00:49:56,400 これは愚かに聞こえるだろう。 1025 00:49:56,400 --> 00:49:58,310 しかし、文字通り、我々はそれをグーグル。 1026 00:49:58,310 --> 00:50:01,810 そして再び、最初のものの1 あなたが通常に実行することになるでしょう 1027 00:50:01,810 --> 00:50:06,550 素晴らしいですstackoverflow.com、 質疑応答光景。 1028 00:50:06,550 --> 00:50:10,530 >> それは素晴らしいです、両方のことができますので、 質問を投稿して探し 1029 00:50:10,530 --> 00:50:12,760 答えだけでなく、ために それは既にたくさん持っている 1030 00:50:12,760 --> 00:50:14,590 そこにコンテンツを事前に入力。 1031 00:50:14,590 --> 00:50:18,510 だから、通常、プログラミングをGOOGLEとき 最初の内の質問 1032 00:50:18,510 --> 00:50:22,620 夫婦は、すでに実行された可能性がヒット 問題のセットの間にそれに。 1033 00:50:22,620 --> 00:50:27,840 >> そして、最後には本当に簡単な事 今日はしました - あるJSFIDDLE、ある 1034 00:50:27,840 --> 00:50:32,110 と多くの仕事をしてい JavaScriptをHTML、CSS。 1035 00:50:32,110 --> 00:50:39,820 JSFIDDLEは基本的に、Webアプリケーションである あなたは、あなたのHTMLを取るすることができます 1036 00:50:39,820 --> 00:50:42,820 左下、およびJavaScript あなたのCSSの右上。 1037 00:50:42,820 --> 00:50:47,840 そしてそれは、レンダリング迅速に作成することができます それを、それをどのように相互作用するかを参照してください。 1038 00:50:47,840 --> 00:50:50,500 人々がしようとしているとき、それは非常に便利です 概念実証をしたい 1039 00:50:50,500 --> 00:50:52,910 これはどのように行うのと ドロップダウンメニューを行います。 1040 00:50:52,910 --> 00:50:54,980 多分クイックアンカバードまたは何でも。 1041 00:50:54,980 --> 00:50:56,560 >> MIKE RIZZO：だから行ってみよう 先にこれをクリックします。 1042 00:50:56,560 --> 00:50:57,820 簡単なメモ - 1043 00:50:57,820 --> 00:51:00,430 我々は前にいたのに対し、 クリックでやって。 1044 00:51:00,430 --> 00:51:04,380 JCorey韓国も組み込まれてい判明 Clickイベントハンドラでそのこと 1045 00:51:04,380 --> 00:51:07,020 それはあなたがしている数字という理由だけで使用しています たくさんのことをしたいとして 1046 00:51:07,020 --> 00:51:08,410 あなたが何かをクリックしたとき。 1047 00:51:08,410 --> 00:51:09,690 >> 同様に、それはまた、ホバーを有する。 1048 00:51:09,690 --> 00:51:12,850 しかし、の全範囲を取得する それらは、jQueryのを見て 1049 00:51:12,850 --> 00:51:15,320 ドキュメントとそれを行う。 1050 00:51:15,320 --> 00:51:18,760 私はここで愚かな何かをした。 1051 00:51:18,760 --> 00:51:21,490 >> TOMAS Reimersの：だから私は本当に迅速を持っている 右ここでプログラムは言う 1052 00:51:21,490 --> 00:51:22,640 クリックボタン。 1053 00:51:22,640 --> 00:51:23,890 その後、我々はループのために持っている。 1054 00:51:23,890 --> 00:51:26,810 私は未満404あるため。 1055 00:51:26,810 --> 00:51:29,530 それだけでポップアップするだろう これらのアラートメッセージ。 1056 00:51:29,530 --> 00:51:33,425 >> MIKE RIZZO：そして、何だった コー​​ド404は、HTMLに立っていた？ 1057 00:51:33,425 --> 00:51:34,145 誰もが覚えていますか？ 1058 00:51:34,145 --> 00:51:35,450 右、見つかりません。 1059 00:51:35,450 --> 00:51:38,640 1060 00:51:38,640 --> 00:51:40,885 Chromeはまた、これはきちんとした追加 どこにあなたができることは - 1061 00:51:40,885 --> 00:51:43,430 >> TOMAS Reimersの：人々が好きだから マイクは、このをたくさんやってスタートし、 1062 00:51:43,430 --> 00:51:47,230 ことができます迷惑なユーザーは、 あなたの情報を参照します。 1063 00:51:47,230 --> 00:51:48,286 >> MIKE RIZZO：うん。 1064 00:51:48,286 --> 00:51:50,690 >> TOMAS Reimersのは：我々はすべての質問がありますか これについては、JavaScript約 1065 00:51:50,690 --> 00:51:53,420 ライブラリ、ライブラリを見つけたり、 どのようなWeb開発ルックス 1066 00:51:53,420 --> 00:51:55,400 現実の世界で、気に入りましたか？ 1067 00:51:55,400 --> 00:51:56,880 私たちは、時間に対して、最大実行している。 1068 00:51:56,880 --> 00:52:00,400 だから私は、私たちが行っているか分からない 実装するための時間を持つこと 1069 00:52:00,400 --> 00:52:02,290 それは本当に迅速でない限り。 1070 00:52:02,290 --> 00:52:04,580 我々は良いですか？ 1071 00:52:04,580 --> 00:52:08,110 >> MIKE RIZZO：皆さんが好きなことは何 2、のような、本当に素早く確認する 1072 00:52:08,110 --> 00:52:09,556 分以内？ 1073 00:52:09,556 --> 00:52:10,870 >> TOMAS Reimersの：何でも 我々は明確にできますか？ 1074 00:52:10,870 --> 00:52:12,500 どのように書く方法 - 1075 00:52:12,500 --> 00:52:13,260 >> 観客：[聞こえない]？ 1076 00:52:13,260 --> 00:52:16,070 >> MIKE RIZZO：はい、そうthat's - 1077 00:52:16,070 --> 00:52:18,065 >> TOMAS Reimersの：あなただけヒットすることができます ウェブサイト上のコントロール-U。 1078 00:52:18,065 --> 00:52:19,275 >> MIKE RIZZO：ああ、私はそれを知りませんでした。 1079 00:52:19,275 --> 00:52:22,290 >> TOMAS Reimersの：私は思う、うん。 1080 00:52:22,290 --> 00:52:23,300 コントロール-U。うん。 1081 00:52:23,300 --> 00:52:25,970 >> MIKE RIZZO：ああ、だからです ウェブサイトのためのコード。 1082 00:52:25,970 --> 00:52:29,580 しかし、あなたが実際にダウンロードしたい場合は、当社 ファイルとすべてのもの、それがホストされています 1083 00:52:29,580 --> 00:52:32,650 github.comに 1084 00:52:32,650 --> 00:52:34,850 >> TOMAS Reimersの：私の名前をスラッシュ - 1085 00:52:34,850 --> 00:52:38,504 トーマスReimersの - スラッシュ CS50ハイフンセミナー。 1086 00:52:38,504 --> 00:52:40,710 >> MIKE RIZZO：そして、あなたができる そこにすべてを見つける。 1087 00:52:40,710 --> 00:52:42,310 >> TOMAS Reimersの：これは何GitHubのです ところで、次のようになります。 1088 00:52:42,310 --> 00:52:44,910 ので、もう一度、あなたがオープンソースを見ると このプロジェクトは、一般的に、彼らは読むことができます 1089 00:52:44,910 --> 00:52:45,950 私そこにあなたが読むことができる。 1090 00:52:45,950 --> 00:52:50,200 あなたが戻って行く場合、あなたはそのことに気付くでしょう あなたがダウンロードZIPを持って、その意志 1091 00:52:50,200 --> 00:52:52,130 あなたがソースをダウンロードすることができます インクルードするコード 1092 00:52:52,130 --> 00:52:53,666 あなた自身の事で製品。 1093 00:52:53,666 --> 00:52:56,890 >> MIKE RIZZO：ええ、私たちはただクリックした場合 本当にすぐにindex.htmlを上 - 1094 00:52:56,890 --> 00:52:59,180 >> TOMAS Reimersの：あなたがここに表示されますの 当社のウェブサイトのソースコード。 1095 00:52:59,180 --> 00:53:02,016 1096 00:53:02,016 --> 00:53:06,070 >> MIKE RIZZO：また、私は右にプッシュするのを忘れた 大きなテーブルの前にそれ 1097 00:53:06,070 --> 00:53:09,860 含まれていますが、表にはあります 我々は含まれて書き込み可にモードを変更する 1098 00:53:09,860 --> 00:53:13,210 ちょうどあなたの明確化のために。 1099 00:53:13,210 --> 00:53:16,940 しかし、我々はすべての方法を下にスクロールした場合 一番下、我々は実際には非常にしませんでした 1100 00:53:16,940 --> 00:53:21,160 JavaScriptをはるかに これとは全くもの。 1101 00:53:21,160 --> 00:53:26,610 それは、すべてのものからのみです 我々が持っていたことを、他の。 1102 00:53:26,610 --> 00:53:28,730 >> だから、来て皆さんに感謝 と聞いて。 1103 00:53:28,730 --> 00:53:29,830 我々は、これが本当に役に立ちました願っています。 1104 00:53:29,830 --> 00:53:33,020 あなたは、関連するすべてのJavaScriptを使用している場合 質問やほとんど話をしたい 1105 00:53:33,020 --> 00:53:36,240 他にどのようなクールなもののように他に何 あなたは、JavaScriptを使ってできる、私たちは大好きです 1106 00:53:36,240 --> 00:53:37,186 あなたと話をする。 1107 00:53:37,186 --> 00:53:40,010 >> TOMAS Reimersの：あなたが質問がある場合 あなたのプロジェクトについて、またはこれがあることができれば 1108 00:53:40,010 --> 00:53:42,740 関連する、我々は、おそらく固執う この後少し。 1109 00:53:42,740 --> 00:53:44,640 しかし、それ以外の、持っている 良い週末。 1110 00:53:44,640 --> 00:53:45,845 >> MIKE RIZZO：ええ、お楽しみください。 1111 00:53:45,845 --> 00:53:46,120 君たちを参照してください。 1112 00:53:46,120 --> 00:53:47,370 >> TOMAS Reimersの：じゃあね。 1113 00:53:47,370 --> 00:53:47,926