1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD：このビデオでは、我々が望んでいました
個別の注意を呼び出します

3
00:00:07,230 --> 00:00:09,110
非常に特定の
JavaScriptを要素

4
00:00:09,110 --> 00:00:11,350
あなたは便利かもしれませんことを
あなたが起動しているとき

5
00:00:11,350 --> 00:00:15,750
Webページを操作する上で動作し、
あなたのWeb​​ページの内容を変更します

6
00:00:15,750 --> 00:00:16,460
その場で。

7
00:00:16,460 --> 00:00:19,450
そして、それはの概念です
ドキュメントオブジェクトモデル。

8
00:00:19,450 --> 00:00:23,030
だから私たちは私たちのビデオで見たように
JavaScriptは、オブジェクトは非常に柔軟性があります。

9
00:00:23,030 --> 00:00:24,750
>> そして、彼らは様々なフィールドを含めることができます。

10
00:00:24,750 --> 00:00:28,075
そして、私たちはたくさんのに行かなかったものの
詳細は、これらのフィールドまたはプロパティ、

11
00:00:28,075 --> 00:00:30,200
我々はよりおそらくだろうこと
適切にそれらを呼び出します

12
00:00:30,200 --> 00:00:33,915
オブジェクトのコンテキストであっても
これらのプロパティは、他のオブジェクトことができます。

13
00:00:33,915 --> 00:00:36,210
そして、それらのオブジェクトの内部
他のオブジェクトことができます。

14
00:00:36,210 --> 00:00:39,630
>> あなたは、この非常に大きなオブジェクトを持っています
他のオブジェクトの多くの

15
00:00:39,630 --> 00:00:43,550
その中の、どののソート
大きな木のこのアイデアを作成します。

16
00:00:43,550 --> 00:00:47,540
ここで、ドキュメントオブジェクトであります
JavaScriptで非常に特別なオブジェクト

17
00:00:47,540 --> 00:00:52,580
それはあなたのウェブ全体を整理
傘の下にこの種のページ

18
00:00:52,580 --> 00:00:53,470
オブジェクトの。

19
00:00:53,470 --> 00:00:56,770
だから、文書の内部
対象のオブジェクトが提示されています

20
00:00:56,770 --> 00:00:59,630
あなたのWeb​​ページの頭と体。

21
00:00:59,630 --> 00:01:03,760
>> それらの内部に他のあります
オブジェクト、エトセトラ、エトセトラ、

22
00:01:03,760 --> 00:01:08,411
あなたのウェブページ全体を有するまで
この大きなオブジェクトで編成されて。

23
00:01:08,411 --> 00:01:09,660
利点は右、ここには何ですか？

24
00:01:09,660 --> 00:01:12,170
まあ、我々は動作する方法を知っています
JavaScriptでのオブジェクトを持ちます。

25
00:01:12,170 --> 00:01:15,840
>> だから我々は、そのオブジェクトを持っている場合
ことを、私たちのウェブページ全体を指し、

26
00:01:15,840 --> 00:01:19,590
正しいを呼び出すことによって意味
そのオブジェクトを操作する方法

27
00:01:19,590 --> 00:01:22,360
または特定の修正
その特性のために、我々

28
00:01:22,360 --> 00:01:25,500
の要素を変更することができます
プログラムでのページ

29
00:01:25,500 --> 00:01:30,210
JavaScriptを使用しての代わりになります
HTML、言う、で物事をコーディングします。

30
00:01:30,210 --> 00:01:33,760
だからここの例です
Webページの非常にシンプルな、右？

31
00:01:33,760 --> 00:01:35,850
これは、HTMLタグ、頭を持っています。

32
00:01:35,850 --> 00:01:37,979
>> 内部のタイトル、こんにちは世界があります。

33
00:01:37,979 --> 00:01:38,770
それから私は、ボディを持っています。

34
00:01:38,770 --> 00:01:40,686
その内部では、私が持っています
三つの異なるもの。

35
00:01:40,686 --> 00:01:44,170
私は、H2ヘッダータグを持っています
段落、およびリンク。

36
00:01:44,170 --> 00:01:45,920
これは非常に単純なWebページです。

37
00:01:45,920 --> 00:01:48,590
>> さて、どのようなドキュメントかもしれません
このためオブジェクトは、次のようになり？

38
00:01:48,590 --> 00:01:50,700
まあ、それは少しです
多分最初は怖いです。

39
00:01:50,700 --> 00:01:52,510
しかし、それは実際には大きな木です。

40
00:01:52,510 --> 00:01:54,890
そして、それの非常にルートに文書です。

41
00:01:54,890 --> 00:02:00,030
>> 文書の中に、別のあります
私のページのHTMLを参照するオブジェクト。

42
00:02:00,030 --> 00:02:02,660
そして、私のページのHTMLには、このすべてです。

43
00:02:02,660 --> 00:02:06,900
そして、HTMLの内部
オブジェクト、私は頭のオブジェクトを持っています、

44
00:02:06,900 --> 00:02:09,000
これはそこにすべてのものを指します。

45
00:02:09,000 --> 00:02:11,009
>> そして、そこの内部に、
私は、タイトルオブジェクトを持っています。

46
00:02:11,009 --> 00:02:15,620
そして、そこの中に、私は別のものを持っています
ちょうどこんにちは世界のオブジェクト。

47
00:02:15,620 --> 00:02:18,020
私は私の体を持つことができます
このような表現。

48
00:02:18,020 --> 00:02:22,850
>> 私の体の内部では、私はH2を持っています
オブジェクトと段落ためのpオブジェクト

49
00:02:22,850 --> 00:02:25,270
そして、リンクの対象。

50
00:02:25,270 --> 00:02:29,660
そしてそうこの全体の階層
大きな木のように表すことができます

51
00:02:29,660 --> 00:02:31,990
小さい少しの多いです
それから出てくるもの。

52
00:02:31,990 --> 00:02:33,740
さて、もちろん、時
我々は、我々のプログラミングしています

53
00:02:33,740 --> 00:02:35,560
大きな木のようなものではないと思います。

54
00:02:35,560 --> 00:02:37,980
私たちは、実際見てみたいです
コー​​ド関連のもの。

55
00:02:37,980 --> 00:02:40,790
>> そして幸いにも、我々はできます
私たちの開発者ツールを使用します

56
00:02:40,790 --> 00:02:46,080
実際に見てみることを
このWebサイトのドキュメントオブジェクト。

57
00:02:46,080 --> 00:02:48,150
そして、のはそれをやらせます。

58
00:02:48,150 --> 00:02:49,580
だから私は、ブラウザのタブを開いてきました。

59
00:02:49,580 --> 00:02:51,540
>> そして、私は、開発者ツールを開いてきました。

60
00:02:51,540 --> 00:02:54,460
JavaScriptの私のビデオでは、私
コンソールではないと述べました

61
00:02:54,460 --> 00:02:56,770
唯一のどこか場所
我々は情報を印刷、

62
00:02:56,770 --> 00:02:59,560
それはまた、どこの場所です
我々は情報を入力することができます。

63
00:02:59,560 --> 00:03:01,380
この文脈において、どのような
私はと言うつもりです

64
00:03:01,380 --> 00:03:05,720
私は戻って取得したいと思います
ドキュメントオブジェクト、

65
00:03:05,720 --> 00:03:07,502
私はそれを見て開始することができます。

66
00:03:07,502 --> 00:03:08,460
だから私は、これをどのように行うのでしょうか？

67
00:03:08,460 --> 00:03:10,740
まあ、私がしたい場合は
本当にうまくそれを整理し、

68
00:03:10,740 --> 00:03:16,317
私はconsole.dir、D-I-Rを言うつもりです。
今、私は印刷にはconsole.logを使用

69
00:03:16,317 --> 00:03:17,400
非常にシンプルなものアウト。

70
00:03:17,400 --> 00:03:20,450
しかし、私はこれを整理したい場合
階層的にオブジェクトのように、

71
00:03:20,450 --> 00:03:23,800
私はそれが一種の構造化したいです
ディレクトリ構造などがあります。

72
00:03:23,800 --> 00:03:27,400
>> だから私は、ドキュメントをconsole.dirたいです。

73
00:03:27,400 --> 00:03:28,430
私はEnterキーを押しますするつもりです。

74
00:03:28,430 --> 00:03:32,350
そして右のそれ以下になりました、
私は、ここにズームインします

75
00:03:32,350 --> 00:03:36,000
私は、この応答文書を持っています
その隣の小さな矢印が。

76
00:03:36,000 --> 00:03:39,470
今、私はこの矢印を開くと、
多くのものがあるように起こっています。

77
00:03:39,470 --> 00:03:42,560
>> しかし、我々は多くのことを無視するつもりです
それと焦点だけの種類

78
00:03:42,560 --> 00:03:46,250
最も重要な部分に、我々はそう
この文書をナビゲートするために始めることができます。

79
00:03:46,250 --> 00:03:50,125
DOMよりにもっとたくさんあり​​ます
親ノードと子ノードだけ。

80
00:03:50,125 --> 00:03:51,500
補助的なものがたくさんあり​​ます。

81
00:03:51,500 --> 00:03:52,280
>> だから私はこれを開くつもりです。

82
00:03:52,280 --> 00:03:54,610
そして、全体の多くがあります
ポップアップするものの。

83
00:03:54,610 --> 00:03:59,000
しかし、私は気にすべてがあります
右ここで、子ノード。

84
00:03:59,000 --> 00:04:00,410
のはそれを開いてみましょう。

85
00:04:00,410 --> 00:04:03,810
>> そこの内部になるほど
HTML、おなじみの何か。

86
00:04:03,810 --> 00:04:07,670
だから、私たちのドキュメントの内部
1レベル下、HTML。

87
00:04:07,670 --> 00:04:08,550
私はそれを開きます。

88
00:04:08,550 --> 00:04:10,380
私たちは何を期待していますか？

89
00:04:10,380 --> 00:04:13,760
>> あなたが私たちの図からリコールすれば、
我々は、HTMLの内部で何を見つける必要がありますか？

90
00:04:13,760 --> 00:04:17,275
ツリーでその下に何つのノードがありますか？

91
00:04:17,275 --> 00:04:17,899
見つけるのをしてみましょう。

92
00:04:17,899 --> 00:04:18,940
我々は、HTMLを開きます。

93
00:04:18,940 --> 00:04:22,079
私たちは、その子ノードに下ります。

94
00:04:22,079 --> 00:04:23,440
>> そのオープンをポップします。

95
00:04:23,440 --> 00:04:25,990
頭と体があります。

96
00:04:25,990 --> 00:04:28,540
そして、私たちは頭を開くことができます。

97
00:04:28,540 --> 00:04:30,460
その子ノードに移動します。

98
00:04:30,460 --> 00:04:31,460
さて、タイトルがあります。

99
00:04:31,460 --> 00:04:33,293
>> そして、我々は上に行く可能性があり、
このように永遠に。

100
00:04:33,293 --> 00:04:34,770
我々としても体でこれを行うことができます。

101
00:04:34,770 --> 00:04:40,090
しかし、私たちが見るための方法があります
大きなオブジェクトとして編成文書。

102
00:04:40,090 --> 00:04:42,610
我々が見た場合、ビッグです
たくさん見えるオブジェクト

103
00:04:42,610 --> 00:04:47,480
コー​​ドのように、それは我々が開始できることを意味し
使用してこの大きなオブジェクトを操作します

104
00:04:47,480 --> 00:04:51,220
何私たちを変更するためのコード
ウェブサイトは、見て、のように感じています。

105
00:04:51,220 --> 00:04:54,920
>> だから、かなり強力なツールです
我々は今我々の処分で持っています。

106
00:04:54,920 --> 00:04:57,360
だから我々はちょうど見たように、
ドキュメントオブジェクト自体

107
00:04:57,360 --> 00:05:01,392
そしてその中のすべてのオブジェクト
ただ、プロパティとメソッドを持っています

108
00:05:01,392 --> 00:05:04,100
私たちがしたすべての他のオブジェクトのような
JavaScriptでと協力して。

109
00:05:04,100 --> 00:05:08,370
しかし、我々はこれらのプロパティを使用することができますし、
ソートのドリルダウンするこれらのメソッドを使用します

110
00:05:08,370 --> 00:05:10,900
大きな文書からと取得
下の方と低いです、

111
00:05:10,900 --> 00:05:13,360
細かいと細かい粒
詳細は、我々まで

112
00:05:13,360 --> 00:05:17,510
私たちの非常に特定の部分を取得
我々は変更したいWebページ。

113
00:05:17,510 --> 00:05:22,700
>> そして、我々はのプロパティを更新すると、
ドキュメントオブジェクトまたはそれらのメソッドを呼び出して、

114
00:05:22,700 --> 00:05:24,450
物事は私たちのウェブページ上で発生する可能性があります。

115
00:05:24,450 --> 00:05:28,420
そして、我々は任意のリフレッシュを行う必要はありません
これらの変更を有効にします。

116
00:05:28,420 --> 00:05:33,160
>> そして、それはかなりクールに能力です
私たちは、コードで作業しているときがあります。

117
00:05:33,160 --> 00:05:37,185
だから、これらのプロパティのいくつかは何ですか
ドキュメントオブジェクトの一部ですか？

118
00:05:37,185 --> 00:05:40,100
さて、あなたはおそらく見ました
それらのカップル本当にすぐ

119
00:05:40,100 --> 00:05:42,700
我々はビュンたとして
巨大な文書を通じ

120
00:05:42,700 --> 00:05:45,150
オブジェクト私たちは、Webブラウザで見ました。

121
00:05:45,150 --> 00:05:48,420
>> しかし、これらのプロパティのカップル
内部HTMLのようなものかもしれません。

122
00:05:48,420 --> 00:05:52,950
そして、あなたも私を思い出すかもしれません
JavaScriptのビデオでこれを使用して

123
00:05:52,950 --> 00:05:54,950
非常に終わりにするとき、私
イベントについて話していました。

124
00:05:54,950 --> 00:05:56,125
この内部HTMLは何でしたか？

125
00:05:56,125 --> 00:05:59,030
まあ、それはちょうど何
タグの間インチ

126
00:05:59,030 --> 00:06:01,590
>> だから内部HTML、
例えば、タイトルの

127
00:06:01,590 --> 00:06:05,390
タグ、我々は行く保っていた場合
先ほどその例、

128
00:06:05,390 --> 00:06:08,020
こんにちは、世界されていると思います。

129
00:06:08,020 --> 00:06:10,140
それが私たちのページのタイトルでした。

130
00:06:10,140 --> 00:06:12,370
その他のプロパティ
ノード名を含み、これ

131
00:06:12,370 --> 00:06:15,810
HTMLの名前です。
タイトルなどの要素。

132
00:06:15,810 --> 00:06:19,100
IDであるID、
HTML要素の属性。

133
00:06:19,100 --> 00:06:23,790
>> 我々は、特別に指示することができることを思い出してください
私たちのHTMLの特定の要素

134
00:06:23,790 --> 00:06:27,510
通常、ID属性を持ちます
CSSのコンテキストで便利です、

135
00:06:27,510 --> 00:06:29,000
具体的に。

136
00:06:29,000 --> 00:06:33,217
への参照である親ノード、
ちょうど私の上のDOMには何が。

137
00:06:33,217 --> 00:06:35,800
され、子ノード、
ダウン私の下の何を参照します。

138
00:06:35,800 --> 00:06:37,950
そして、我々はその多くのを見ました
ちょうどを通して見ます。

139
00:06:37,950 --> 00:06:42,970
我々が得た方法子ノードは、それはです
ツリーにさらに低いです。

140
00:06:42,970 --> 00:06:46,590
>> 属性、それはただの配列です
HTML要素の属性の。

141
00:06:46,590 --> 00:06:50,270
だから、属性の例は、かもしれません
あなたがイメージタグを使用している場合も、

142
00:06:50,270 --> 00:06:54,090
それは、通常、ソース属性を有し、
多分高さと幅の属性。

143
00:06:54,090 --> 00:06:57,120
そしてそうそれはちょうど配列になります
関連付けられた属性のすべての

144
00:06:57,120 --> 00:06:59,300
そのHTML要素を持ちます。

145
00:06:59,300 --> 00:07:04,140
>> スタイルは別のものであること
CSSを表しありません

146
00:07:04,140 --> 00:07:06,050
特定の要素のスタイリング。

147
00:07:06,050 --> 00:07:08,310
そして、後に、この中で
ビデオ、我々は、具体的によ

148
00:07:08,310 --> 00:07:14,592
カップルを作るためにレバレッジスタイル
当社のウェブサイトへの変更の。

149
00:07:14,592 --> 00:07:15,800
だから、それらはいくつかのプロパティです。

150
00:07:15,800 --> 00:07:17,591
>> そして、いくつかのもあります
たちができる方法

151
00:07:17,591 --> 00:07:22,450
また、より迅速多分隔離するために使用します
ドキュメントオブジェクトの要素。

152
00:07:22,450 --> 00:07:26,730
おそらく、最も汎用性
これらはgetElementByIdのの。

153
00:07:26,730 --> 00:07:31,190
だから私は、理由のようなものを言うかもしれません
それは文書の方法だ覚えています

154
00:07:31,190 --> 00:07:34,880
オブジェクト、のdocument.getElementById。

155
00:07:34,880 --> 00:07:39,820
>> そして、それらの括弧の中に、指定
特定のIDを持つHTML要素

156
00:07:39,820 --> 00:07:42,330
私は以前にしたことの属性
設定して、私はすぐによ

157
00:07:42,330 --> 00:07:46,685
その要素を右に行きます
ウェブサイト全体の。

158
00:07:46,685 --> 00:07:49,310
だから私は多分ドリルダウンする必要はありません
すべての単一の層を介してダウン。

159
00:07:49,310 --> 00:07:52,841
私はそれを見つけるために、このメソッドを使用することができ、
ソートのミサイルを求めて、熱のような、

160
00:07:52,841 --> 00:07:53,340
右？

161
00:07:53,340 --> 00:07:56,300
それはちょうど行くと見つけました
まさにそれが探しているもの。

162
00:07:56,300 --> 00:07:59,290
>> getElementsByTagNameのは、
精神に非常に似ています。

163
00:07:59,290 --> 00:08:02,500
多分これはすべてを見つけるだろう
ボールドタグまたはpタグのすべて

164
00:08:02,500 --> 00:08:05,920
そして、私はすべての配列を与えます
私はその後で仕事ができること。

165
00:08:05,920 --> 00:08:12,080
appendChildは何かを追加します
ツリー内の1レベル下。

166
00:08:12,080 --> 00:08:16,440
>> だから私は完全に新しいを追加することができます
要素1レベル低いです。

167
00:08:16,440 --> 00:08:19,700
または私はだ要素を削除することができます
同様に、私がしたい場合は、1つ下のレベル

168
00:08:19,700 --> 00:08:22,870
私のWebページから何かを削除します。

169
00:08:22,870 --> 00:08:28,480
さて、迅速なコーディングノートとクイック
頭痛がうまくいけば、ノートを保存します。

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- dは小文字です。

171
00:08:31,670 --> 00:08:36,950
私は私が持っているどのように多くの時間を伝えることはできません
中古getElementByIdのと大文字の

172
00:08:36,950 --> 00:08:38,336
そこD。

173
00:08:38,336 --> 00:08:39,460
それは本当に一般的ですので。

174
00:08:39,460 --> 00:08:42,990
私たちは、単語IDを記述する場合、それはです
通常資本Iの資本D.

175
00:08:42,990 --> 00:08:44,240
そして、私のコードだけでは動作しません。

176
00:08:44,240 --> 00:08:45,630
そして、私は理由を理解することはできません。

177
00:08:45,630 --> 00:08:49,490
これは本当に、本当に、本当にあります
誰もが行う一般的なバグ、

178
00:08:49,490 --> 00:08:51,890
持っていても専門家
永遠にこれをやって。

179
00:08:51,890 --> 00:08:55,410
だから、getElementByIdの注意してください、
そのdは小文字です。

180
00:08:55,410 --> 00:09:00,080
そして、うまくいけば、それはあなたがいくつか保存されます
心痛の少なくとも分。

181
00:09:00,080 --> 00:09:02,204
>> それでは、このすべては、私たちに教えてくれありませんか？

182
00:09:02,204 --> 00:09:03,120
我々は、これらのメソッドを持っています。

183
00:09:03,120 --> 00:09:04,161
我々は、これらの特性を有しています。

184
00:09:04,161 --> 00:09:06,610
今、私たちがから開始する場合
ドキュメント、ドキュメント。

185
00:09:06,610 --> 00:09:10,220
何でも、我々は今、任意に取得することができます
当社のウェブページの一枚

186
00:09:10,220 --> 00:09:14,870
我々はJavaScriptを使用してしたいこと
ただこれらのメソッドを呼び出すことにより、

187
00:09:14,870 --> 00:09:19,940
プロパティを活用
我々は、様々な場所で見つけること。

188
00:09:19,940 --> 00:09:24,890
>> これは、これを冗長な得ることができます
document.getElementById、

189
00:09:24,890 --> 00:09:28,560
多分長いタグ名を持っています、
多分あなたは、後に複数回呼び出しを行います。

190
00:09:28,560 --> 00:09:31,230
物事は少し冗長な得ることができます。

191
00:09:31,230 --> 00:09:34,480
そして、プログラマとして、あなたがたように
おそらく、これらのビデオの多くに見られます、

192
00:09:34,480 --> 00:09:36,600
我々は冗長なものを好きではありません。

193
00:09:36,600 --> 00:09:38,520
>> 我々はすぐに物事を行うことができるようにしたいです。

194
00:09:38,520 --> 00:09:42,640
だから我々はより多くをしたいと思います
何かを言うための簡潔な方法。

195
00:09:42,640 --> 00:09:46,270
だからへのリード線のこの種
jQueryのと呼ばれるものの概念。

196
00:09:46,270 --> 00:09:49,170
今jQueryのでは、JavaScriptではありません。

197
00:09:49,170 --> 00:09:50,350
それには、JavaScriptの一部ではないのです。

198
00:09:50,350 --> 00:09:54,790
>> それは、書かれたライブラリです
いくつかのJavaScriptのプログラマによって

199
00:09:54,790 --> 00:09:57,060
10年ぐらい前。

200
00:09:57,060 --> 00:10:01,300
そして、その目標は、この何を簡素化することです
呼ばれるクライアント側のスクリプト、どの

201
00:10:01,300 --> 00:10:04,310
私たちは何であったか、基本的に
DOM操作での話。

202
00:10:04,310 --> 00:10:11,090
そして、私は修正したいそうだとすれば
多分私のWebページの背景色、

203
00:10:11,090 --> 00:10:11,980
特定事業部。

204
00:10:11,980 --> 00:10:15,325
>> ここで、私は明らかになっています
ElementById colorDiv。

205
00:10:15,325 --> 00:10:16,950
そして私は、その背景色を設定したいです。

206
00:10:16,950 --> 00:10:20,720
私は純粋なJavaScriptを使用している場合
ドキュメントオブジェクトモデルを使用して、

207
00:10:20,720 --> 00:10:23,990
それは右、多くのものですか？
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor =緑。

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> やれやれ。

211
00:10:28,050 --> 00:10:30,110
それが言いたいことがたくさんあり​​ました。

212
00:10:30,110 --> 00:10:31,720
それはあまりにも、タイプする多くのです。

213
00:10:31,720 --> 00:10:35,760
そしてそうjQueryのでは、我々は多分言うことができます
このもう少し簡潔に。

214
00:10:35,760 --> 00:10:39,350
トレードオフそれは多分少しですされています
もう少し、突然不可解な

215
00:10:39,350 --> 00:10:39,850
右？

216
00:10:39,850 --> 00:10:43,580
>> 少なくとも、長いは、もう少しです
私たちがやっていることの説明の通り。

217
00:10:43,580 --> 00:10:49,947
このドル記号、括弧、
単一引用符、ハッシュ、colorDiv、右？

218
00:10:49,947 --> 00:10:50,780
どういう意味ですか？

219
00:10:50,780 --> 00:10:53,640
まあ、それはただ、基本的です
document.getElementById colorDiv。

220
00:10:53,640 --> 00:10:58,700
>> しかし、それは速記この種のです
jQueryのを使用してそれを行う方法。

221
00:10:58,700 --> 00:11:01,380
ちょうど今見てみましょう
いくつかの異なる方法で

222
00:11:01,380 --> 00:11:04,520
私は実際に可能性があること
このドキュメントオブジェクトを使用します

223
00:11:04,520 --> 00:11:06,807
私のサイトの作品を操作するためのモデル。

224
00:11:06,807 --> 00:11:09,140
特に、我々はつもりです
操作で作業します

225
00:11:09,140 --> 00:11:14,090
特定の色
Webページ上のdiv、colorDiv、。

226
00:11:14,090 --> 00:11:15,299
それでは、その見てみましょう。

227
00:11:15,299 --> 00:11:15,798
大丈夫。

228
00:11:15,798 --> 00:11:16,700
だから私は、ページ上です。

229
00:11:16,700 --> 00:11:20,750
あなたがダウンロードするときにtest.htmlという呼ばれています
これは、あなたがこれをいじくり回すしたい場合。

230
00:11:20,750 --> 00:11:24,730
そして私はの束を持っています
このページ上のボタン。

231
00:11:24,730 --> 00:11:27,730
そして、私は、個々の機能を言っています
背景色、緑、紫のため、

232
00:11:27,730 --> 00:11:31,330
オレンジ、赤、青、1つの関数
背景色は、イベントハンドラ

233
00:11:31,330 --> 00:11:34,360
背景色とjQueryを使用するため。

234
00:11:34,360 --> 00:11:38,147
私は何を話しています
とき、私はこれをやっていますか？

235
00:11:38,147 --> 00:11:39,230
だから我々は、ボタンを見てきました。

236
00:11:39,230 --> 00:11:41,521
さて、見てみましょう
ここでは、ソースコードの一部。

237
00:11:41,521 --> 00:11:44,770
私たちは、test.htmlという始めましょう。

238
00:11:44,770 --> 00:11:48,100
背景のため、個々の機能
色は私がここで入力したものです。

239
00:11:48,100 --> 00:11:49,350
私は少しをスクロールしてみましょう。

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> そして、あなたはその私に気付くでしょう
これらのボタンを定義しています

242
00:11:58,820 --> 00:12:03,990
このボタンをクリックすると言って、
パープルに変わり関数を呼び出します。

243
00:12:03,990 --> 00:12:06,670
このボタンがクリックされると、むしろ、
関数が緑色に変わり呼び出し、

244
00:12:06,670 --> 00:12:08,710
オレンジ色に変わり、赤く、青に変わり。

245
00:12:08,710 --> 00:12:11,880
おそらく、このことを推測することができます
おそらく最高のデザインではありません

246
00:12:11,880 --> 00:12:12,460
意味は、右？

247
00:12:12,460 --> 00:12:16,490
>> 私がするとよいでしょう
より一般的なアプローチを持っています。

248
00:12:16,490 --> 00:12:19,570
さて、最初に我々は見てみよう
これらの5つの機能が何であるかに

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background =紫、

250
00:12:24,400 --> 00:12:27,250
、緑、オレンジ、赤
それぞれ、青。

251
00:12:27,250 --> 00:12:30,930
そうではなく、特に最高のデザイン。

252
00:12:30,930 --> 00:12:33,390
>> ボタンの次のセット
私は私が書いているされています

253
00:12:33,390 --> 00:12:36,380
単一の機能
その外見上の色を変更

254
00:12:36,380 --> 00:12:38,960
引数として文字列を受け取ります。

255
00:12:38,960 --> 00:12:40,290
だから、これは少し良いです。

256
00:12:40,290 --> 00:12:43,840
パープル、グリーン、オレンジ、赤、
青は今の引数です。

257
00:12:43,840 --> 00:12:46,230
だから私は、より一般的な書きました
ケースJavaScript関数、

258
00:12:46,230 --> 00:12:47,771
これは次のようになります。

259
00:12:47,771 --> 00:12:48,680
私は渡しています。

260
00:12:48,680 --> 00:12:52,090
色はこの機能変更
色と呼ばれる引数を期待。

261
00:12:52,090 --> 00:12:54,970
そして、私は設定言っています
色に背景色。

262
00:12:54,970 --> 00:12:58,390
だからここに私がここに持っているものを表します。

263
00:12:58,390 --> 00:12:59,770
だから、少し良いです。

264
00:12:59,770 --> 00:13:02,740
>> しかし、私はすることができるかもしれません
それよりももっと良いです。

265
00:13:02,740 --> 00:13:06,140
我々は見てみることを下る場合
イベントハンドラの状況では、

266
00:13:06,140 --> 00:13:07,860
今、すべてのこれらの呼び出しは、同じように見えます。

267
00:13:07,860 --> 00:13:10,340
あなたは私たちのためにリコールした場合
イベントハンドラについての議論、

268
00:13:10,340 --> 00:13:15,770
私はのについての情報を得ることができます
これらのボタンをクリックして、それを使用しました。

269
00:13:15,770 --> 00:13:19,560
>> そしてそうevent.JavaScriptに、私はしました
書かれた変色イベント、どの

270
00:13:19,560 --> 00:13:21,110
クリックされたボタンを割り出し。

271
00:13:21,110 --> 00:13:23,250
それがトリガーオブジェクトラインです。

272
00:13:23,250 --> 00:13:25,240
そしてここに、それは本当に冗長な取得します。

273
00:13:25,240 --> 00:13:27,420
しかし、私がやっていることは私はあります
背景の設定

274
00:13:27,420 --> 00:13:30,340
triggerObject inner.HTMLの色。

275
00:13:30,340 --> 00:13:34,170
それは内のテキストです
ボタンタグの間。

276
00:13:34,170 --> 00:13:36,500
>> そして、私は明らかにしてい
小文字に設定します。

277
00:13:36,500 --> 00:13:40,780
そして、それは私が全体を変換することができる方法です
使用してJavaScriptで小文字に文字列

278
00:13:40,780 --> 00:13:42,940
小文字にそのメソッド。

279
00:13:42,940 --> 00:13:46,570
私は色を設定するときので、
私はここでやろうとしているように、

280
00:13:46,570 --> 00:13:48,260
色はすべて小文字にする必要があります。

281
00:13:48,260 --> 00:13:50,920
>> しかし、私が持っていたボタン、
私たちは別の見てみると、

282
00:13:50,920 --> 00:13:55,890
テキストがあることに気付きます
紫色のための資本Pで書かれました。

283
00:13:55,890 --> 00:13:59,140
そして、非常に
ここでは一番下、どうやら私

284
00:13:59,140 --> 00:14:02,630
同様に、この使用してjQueryのを試してみてください。

285
00:14:02,630 --> 00:14:06,000
そして、この場合には、私は実際にはありませんよ
すべてで関数を呼び出します。

286
00:14:06,000 --> 00:14:11,430
私は、私はクラスがちょうど言いました
このボタンに使用するjQのボタンです。

287
00:14:11,430 --> 00:14:12,360
それでおしまい。

288
00:14:12,360 --> 00:14:14,950
>> それでは、どのようjQueryのは、私がやって知るのでしょうか？

289
00:14:14,950 --> 00:14:18,740
まあ、これは利点の一つであります
jQueryのの欠点を大幅に削減します。

290
00:14:18,740 --> 00:14:21,560
それは私が物事を行うできるようにすることができます
非常に簡潔に、しかし、そうでないかもしれません

291
00:14:21,560 --> 00:14:22,570
直感的として。

292
00:14:22,570 --> 00:14:25,570
たぶん、それらの他の3つは作ります
私がやってより多くの意味をビット。

293
00:14:25,570 --> 00:14:29,010
ここでは、しかし、何が起こっているの？

294
00:14:29,010 --> 00:14:31,940
>> どうやら、作成
無名関数

295
00:14:31,940 --> 00:14:36,790
その負荷時はいつでも私の文書
ので、document.ready、準備ができています

296
00:14:36,790 --> 00:14:38,760
いくつかの機能が起こるしようとしています。

297
00:14:38,760 --> 00:14:40,490
基本的には、ときに、ドキュメントの準備ができているのですか？

298
00:14:40,490 --> 00:14:42,310
私のページが読み込まれたとき、それはです。

299
00:14:42,310 --> 00:14:46,540
>> だから、すぐに自分のページが読み込まれたように、
関数を以下のことは、常に準備ができています。

300
00:14:46,540 --> 00:14:54,310
タイプjQButtonの対象かどうかは、言います、
またはクラスjQButtonがクリックされた場合に、

301
00:14:54,310 --> 00:14:55,570
この機能を実行します。

302
00:14:55,570 --> 00:14:59,360
だから、ここでは2つの匿名関数です、
他の内部で定義されているもの。

303
00:14:59,360 --> 00:15:03,930
>> だから、私の全体の文脈
ここで、これまでの私のページです

304
00:15:03,930 --> 00:15:06,520
それがロードするときには、この関数を呼び出します。

305
00:15:06,520 --> 00:15:09,740
そして、この機能が待っています
ボタンのクリックします。

306
00:15:09,740 --> 00:15:14,490
また、ボタンをクリックすると、jQの
ボタンがクリックされると特に、

307
00:15:14,490 --> 00:15:17,150
それは、この他を呼び出します
起こっている機能、

308
00:15:17,150 --> 00:15:21,250
背景を設定するには
colorDivの色であることが判明しました

309
00:15:21,250 --> 00:15:25,990
どんなテキストがタグの間にあります。

310
00:15:25,990 --> 00:15:28,050
>> これは、の概念であります
どのボタンクリックされました。

311
00:15:28,050 --> 00:15:31,230
しかし、そうでなければ、これは一種のです
イベントに似て振る舞います。

312
00:15:31,230 --> 00:15:34,460
それはちょうど同じように、私です
jQueryのでこれを表現することになります。

313
00:15:34,460 --> 00:15:36,790
繰り返しますが、それはおそらくです
より多くの威圧的。

314
00:15:36,790 --> 00:15:40,840
それはのように明確ではありません
event.jsのようなもの、

315
00:15:40,840 --> 00:15:45,080
これは多分もう少しです
冗長が、少し小さいです

316
00:15:45,080 --> 00:15:46,000
威圧的。

317
00:15:46,000 --> 00:15:51,460
>> しかし、我々は、私のブラウザにかけて戻ってポップ場合
窓、私はよくclicking--起動した場合、

318
00:15:51,460 --> 00:15:52,690
それが紫色に変化しました。

319
00:15:52,690 --> 00:15:54,450
これは文字列メソッドを使用して緑です。

320
00:15:54,450 --> 00:15:56,500
これは、イベントハンドラを使用して、オレンジ色です。

321
00:15:56,500 --> 00:15:58,300
>> これは、右のjQueryを使用して赤のですか？

322
00:15:58,300 --> 00:16:01,270
それらはすべて、まったく同じように動作します。

323
00:16:01,270 --> 00:16:06,509
彼らはただそれは別の使用してください
問題を解決するために近づきます。

324
00:16:06,509 --> 00:16:08,550
にもっとたくさんあり​​ます
jQueryの後、我々は確かです

325
00:16:08,550 --> 00:16:10,050
このビデオではについて話をするつもり。

326
00:16:10,050 --> 00:16:15,410
あなたが詳細を知りたい場合でも、することができます
ドキュメントのjQueryのソートに行きます

327
00:16:15,410 --> 00:16:19,710
約かなり多くを学びます
この非常に柔軟なライブラリ、どの

328
00:16:19,710 --> 00:16:22,550
クライアント側を実行するのに最適です
そのような私たちが何をしていたかなどのスクリプト

329
00:16:22,550 --> 00:16:26,240
外観を操作します
私たちのウェブページの感触

330
00:16:26,240 --> 00:16:28,750
ドキュメントオブジェクトモデルと。

331
00:16:28,750 --> 00:16:29,650
私はダグロイドです。

332
00:16:29,650 --> 00:16:31,930
これはCS50です。

333
00:16:31,930 --> 00:16:34,022