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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: In diesem Video, wir wollten
zu rufen separaten Aufmerksamkeit

3
00:00:07,230 --> 00:00:09,110
auf eine ganz besondere
Element JavaScript

4
00:00:09,110 --> 00:00:11,350
dass möglicherweise nützlich für Sie
wenn Sie beginnen

5
00:00:11,350 --> 00:00:15,750
auf Manipulation von Web-Seiten arbeiten und
Ändern Sie den Inhalt Ihrer Web-Seite

6
00:00:15,750 --> 00:00:16,460
im laufenden Betrieb.

7
00:00:16,460 --> 00:00:19,450
Und das ist der Begriff der
das Document Object Model.

8
00:00:19,450 --> 00:00:23,030
So wie wir in unserem Video gesehen
JavaScript, sind Objekte sehr flexibel.

9
00:00:23,030 --> 00:00:24,750
>> Und sie können verschiedene Felder enthalten.

10
00:00:24,750 --> 00:00:28,075
Und obwohl wir nicht in eine Menge zu gehen
Detail, die Felder oder Eigenschaften,

11
00:00:28,075 --> 00:00:30,200
dass wir wahrscheinlich mehr
angemessen nennen

12
00:00:30,200 --> 00:00:33,915
im Zusammenhang mit einem Gegenstand, auch
diese Eigenschaften können auch andere Objekte sein.

13
00:00:33,915 --> 00:00:36,210
Und innerhalb dieser Objekte
können auch andere Objekte sein.

14
00:00:36,210 --> 00:00:39,630
>> Sie haben dieses sehr große Objekt
mit vielen anderen Objekten

15
00:00:39,630 --> 00:00:43,550
innen von ihm, welche Art von
erstellt diese Idee von einem großen Baum.

16
00:00:43,550 --> 00:00:47,540
Nun ist das Dokument-Objekt ein
ganz besonderes Objekt in JavaScript

17
00:00:47,540 --> 00:00:52,580
daß organisiert Ihre gesamte Web-
Seite unter dieser Art von Dach

18
00:00:52,580 --> 00:00:53,470
eines Objekts.

19
00:00:53,470 --> 00:00:56,770
Und so im Inneren des Dokuments
Objekt Objekte präsentieren

20
00:00:56,770 --> 00:00:59,630
der Kopf und der Körper Ihrer Web-Seite.

21
00:00:59,630 --> 00:01:03,760
>> Innerhalb dieser anderen sind
Gegenstände, etc., etc.,

22
00:01:03,760 --> 00:01:08,411
bis Ihre gesamte Web-Seite
in dieser großen Aufgabe organisiert.

23
00:01:08,411 --> 00:01:09,660
Was ist der Vorteil hier, nicht wahr?

24
00:01:09,660 --> 00:01:12,170
Nun, wir wissen, wie man arbeitet
mit Objekten in JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Wenn wir also ein Objekt haben, dass
bezieht sich auf unsere gesamte Webseite, dass

26
00:01:15,840 --> 00:01:19,590
bedeutet, durch den Aufruf der korrekten
Methoden, um das Objekt zu manipulieren

27
00:01:19,590 --> 00:01:22,360
oder Änderung bestimmter
seiner Eigenschaften wir

28
00:01:22,360 --> 00:01:25,500
können die Elemente ändern
unsere Seite programmatisch

29
00:01:25,500 --> 00:01:30,210
mit Hilfe von JavaScript anstatt
die Dinge mit, sagen wir, HTML-Code.

30
00:01:30,210 --> 00:01:33,760
Also hier ist ein Beispiel für ein
sehr einfache Web-Seite, oder?

31
00:01:33,760 --> 00:01:35,850
Es hat HTML-Tags, einen Kopf.

32
00:01:35,850 --> 00:01:37,979
>> Innenseite gibt es ein Titel, Hallo Welt.

33
00:01:37,979 --> 00:01:38,770
Dann habe ich einen Körper.

34
00:01:38,770 --> 00:01:40,686
Innenseite, dass, ich habe
drei verschiedene Dinge.

35
00:01:40,686 --> 00:01:44,170
Ich habe eine h2 Header-Tag,
ein Absatz, und einen Link.

36
00:01:44,170 --> 00:01:45,920
Dies ist eine sehr einfache Webseite.

37
00:01:45,920 --> 00:01:48,590
>> Nun, was könnte das Dokument
Objekt für diese aussehen?

38
00:01:48,590 --> 00:01:50,700
Nun, es ist ein wenig
beängstigend vielleicht auf den ersten.

39
00:01:50,700 --> 00:01:52,510
Aber es ist wirklich nur ein großer Baum.

40
00:01:52,510 --> 00:01:54,890
Und an der Wurzel davon ist Dokuments.

41
00:01:54,890 --> 00:02:00,030
>> Innerhalb des Dokuments ist ein weiterer
Objekt für den HTML auf meiner Seite.

42
00:02:00,030 --> 00:02:02,660
Und der HTML auf meiner Seite ist alles.

43
00:02:02,660 --> 00:02:06,900
Und dann innerhalb des HTML
Objekt, ich habe ein Kopfobjekt,

44
00:02:06,900 --> 00:02:09,000
der sich auf alles, was es.

45
00:02:09,000 --> 00:02:11,009
>> Und im Inneren des dort
Ich habe ein Titelobjekt.

46
00:02:11,009 --> 00:02:15,620
Und innerhalb gibt, obwohl ich eine andere
Objekt das ist nur Hallo Welt.

47
00:02:15,620 --> 00:02:18,020
Ich konnte meinen Körper haben
vertreten wie diese.

48
00:02:18,020 --> 00:02:22,850
>> Im Inneren meines Körpers, ich habe eine h2
Objekt und eine p-Objekt für Absatz

49
00:02:22,850 --> 00:02:25,270
und ein ein Objekt für einen Link.

50
00:02:25,270 --> 00:02:29,660
Und so ist dieses gesamte Hierarchie
kann als ein großer Baum dargestellt werden

51
00:02:29,660 --> 00:02:31,990
mit viel kleineren wenig
Dinge kommen aus ihm heraus.

52
00:02:31,990 --> 00:02:33,740
Jetzt natürlich, wenn
wir programmieren wir

53
00:02:33,740 --> 00:02:35,560
nicht von Dingen wie einem großen Baum zu denken.

54
00:02:35,560 --> 00:02:37,980
Wir wollen, dass tatsächliche, um zu sehen
Code-bezogene Dinge.

55
00:02:37,980 --> 00:02:40,790
>> Und zum Glück, können wir
nutzen Sie unsere Entwickler-Tools

56
00:02:40,790 --> 00:02:46,080
um tatsächlich einen Blick auf
Dokument-Objekt dieser Website.

57
00:02:46,080 --> 00:02:48,150
Und lassen Sie uns tun.

58
00:02:48,150 --> 00:02:49,580
Also habe ich ein Browser-Tab geöffnet.

59
00:02:49,580 --> 00:02:51,540
>> Und ich habe bis Developer Tools geöffnet.

60
00:02:51,540 --> 00:02:54,460
Und in meinem Video auf JavaScript, I
erwähnt, dass die Konsole nicht

61
00:02:54,460 --> 00:02:56,770
nur irgendwo, wo
wir drucken Informationen

62
00:02:56,770 --> 00:02:59,560
es ist auch ein Ort, an dem
wir können Eingangsinformationen.

63
00:02:59,560 --> 00:03:01,380
In diesem Zusammenhang, was
Ich werde sagen,

64
00:03:01,380 --> 00:03:05,720
Ich möchte zurück zu bekommen
die Dokumentobjekte,

65
00:03:05,720 --> 00:03:07,502
so kann ich anfangen, um einen Blick auf sie haben.

66
00:03:07,502 --> 00:03:08,460
Also, wie kann ich dies tun?

67
00:03:08,460 --> 00:03:10,740
Nun, wenn ich will
organisieren, es ist wirklich schön,

68
00:03:10,740 --> 00:03:16,317
Ich werde sagen, console.dir, D-I-R.
Nun, ich benutze console.log nur Druck

69
00:03:16,317 --> 00:03:17,400
aus etwas sehr einfach.

70
00:03:17,400 --> 00:03:20,450
Aber wenn ich dies zu organisieren
hierarchisch wie ein Gegenstand,

71
00:03:20,450 --> 00:03:23,800
Ich will es irgendwie strukturiert
wie eine Verzeichnisstruktur.

72
00:03:23,800 --> 00:03:27,400
>> Deshalb möchte ich Dokument console.dir.

73
00:03:27,400 --> 00:03:28,430
Ich werde drücken Sie Enter.

74
00:03:28,430 --> 00:03:32,350
Und rechts unterhalb es jetzt,
und ich werde hier vergrößern,

75
00:03:32,350 --> 00:03:36,000
Ich habe diese Antwortdokument hat
mit einem kleinen Pfeil daneben.

76
00:03:36,000 --> 00:03:39,470
Nun, wenn ich öffnen Sie diesen Pfeil,
es geht um eine Menge Sachen zu sein.

77
00:03:39,470 --> 00:03:42,560
>> Aber wir werden eine Menge zu ignorieren
von ihm und nur irgendwie Fokus

78
00:03:42,560 --> 00:03:46,250
auf der wichtigste Teil, so dass wir
können damit beginnen, dieses Dokument zu navigieren.

79
00:03:46,250 --> 00:03:50,125
Es gibt eine Menge mehr auf das DOM als
nur Elternknoten und untergeordnete Knoten.

80
00:03:50,125 --> 00:03:51,500
Es gibt eine Menge von Neben Zeug.

81
00:03:51,500 --> 00:03:52,280
>> Also werde ich diese zu öffnen.

82
00:03:52,280 --> 00:03:54,610
Und es gibt eine ganze Menge
Zeug, das sich öffnet.

83
00:03:54,610 --> 00:03:59,000
Aber was mich interessiert ist
genau hier, geordneten Knoten.

84
00:03:59,000 --> 00:04:00,410
Lassen Sie uns zu öffnen, dass bis.

85
00:04:00,410 --> 00:04:03,810
>> Innerhalb von dort sehe ich
etwas Vertrautes, HTML.

86
00:04:03,810 --> 00:04:07,670
So Inneren unseres Dokuments
eine Ebene tiefer, HTML.

87
00:04:07,670 --> 00:04:08,550
Ich öffne, dass bis.

88
00:04:08,550 --> 00:04:10,380
Was erwarten wir?

89
00:04:10,380 --> 00:04:13,760
>> Wenn Sie von unserem Diagramm erinnern,
Was sollten wir innerhalb von HTML finden?

90
00:04:13,760 --> 00:04:17,275
Welche zwei Knoten sind darunter im Baum?

91
00:04:17,275 --> 00:04:17,899
Lass es uns herausfinden.

92
00:04:17,899 --> 00:04:18,940
Wir eröffnen HTML.

93
00:04:18,940 --> 00:04:22,079
Wir gehen bis auf die untergeordneten Knoten.

94
00:04:22,079 --> 00:04:23,440
>> Pop, geöffnet.

95
00:04:23,440 --> 00:04:25,990
Es gibt Kopf und Körper.

96
00:04:25,990 --> 00:04:28,540
Und wir eröffnen können den Kopf.

97
00:04:28,540 --> 00:04:30,460
Gehen Sie zu seiner untergeordneten Knoten.

98
00:04:30,460 --> 00:04:31,460
Nun, es gibt den Titel.

99
00:04:31,460 --> 00:04:33,293
>> Und wir konnten weitergehen und
ewig so.

100
00:04:33,293 --> 00:04:34,770
Wir konnten dies mit Körper als auch zu tun.

101
00:04:34,770 --> 00:04:40,090
Aber es gibt eine Möglichkeit für uns, zu betrachten
das Dokument als ein großes Objekt organisiert.

102
00:04:40,090 --> 00:04:42,610
Und wenn wir uns ein großes
Objekt, das eine Menge aussieht

103
00:04:42,610 --> 00:04:47,480
wie Code, das bedeutet, dass wir beginnen können
um diese große Aufgabe mit zu manipulieren

104
00:04:47,480 --> 00:04:51,220
Code, um das, was zu ändern unseren
Website aussieht und sich anfühlt.

105
00:04:51,220 --> 00:04:54,920
>> Also das ist ein ziemlich mächtiges Werkzeug
wir zur Verfügung haben jetzt.

106
00:04:54,920 --> 00:04:57,360
So, wie wir gerade gesehen haben, die
Dokument-Objekt selbst

107
00:04:57,360 --> 00:05:01,392
und alle Objekte in der es
haben Eigenschaften und Methoden, nur

108
00:05:01,392 --> 00:05:04,100
wie jedes andere Objekt, dass wir
wurde mit in JavaScript arbeiten.

109
00:05:04,100 --> 00:05:08,370
Aber wir können diese Eigenschaften zu nutzen und
verwenden Sie diese Methoden, um Art von Drill-Down

110
00:05:08,370 --> 00:05:10,900
von der großen Dokument und erhalten
tiefer und tiefer und tiefer,

111
00:05:10,900 --> 00:05:13,360
feiner Körner
Detail, bis wir

112
00:05:13,360 --> 00:05:17,510
zu erhalten, um eine ganz bestimmte Stück unserer
Web-Seite, die wir ändern wollen.

113
00:05:17,510 --> 00:05:22,700
>> Und wenn wir Eigenschaften des Updates
Document-Objekt oder rufen Sie diese Methoden,

114
00:05:22,700 --> 00:05:24,450
Dinge könnten auf unserer Web-Seite passieren.

115
00:05:24,450 --> 00:05:28,420
Und wir übernehmen keine erfrischenden tun müssen
zu haben, diese Änderungen wirksam werden.

116
00:05:28,420 --> 00:05:33,160
>> Und das ist eine ziemlich coole Fähigkeit,
haben, wenn wir es mit Code arbeiten.

117
00:05:33,160 --> 00:05:37,185
Also, was sind einige dieser Eigenschaften
die Teil eines Belegobjekt sind?

118
00:05:37,185 --> 00:05:40,100
Nun, haben Sie wahrscheinlich sah ein
einige von ihnen sehr schnell

119
00:05:40,100 --> 00:05:42,700
als wir zippen
durch den riesigen Dokument

120
00:05:42,700 --> 00:05:45,150
Objekt, das wir gerade gesehen, im Web-Browser.

121
00:05:45,150 --> 00:05:48,420
>> Aber ein paar dieser Eigenschaften
vielleicht Dinge wie Innen HTML sein.

122
00:05:48,420 --> 00:05:52,950
Und Sie vielleicht sogar mich erinnern
mit diesem in der JavaScript-Video

123
00:05:52,950 --> 00:05:54,950
am Ende, wenn ich
wurde über die Ereignisse sprechen.

124
00:05:54,950 --> 00:05:56,125
Was war diese innere HTML?

125
00:05:56,125 --> 00:05:59,030
Nun, es ist genau das, was ist
in zwischen den Tags.

126
00:05:59,030 --> 00:06:01,590
>> Und so die innere HTML,
zum Beispiel der Titel

127
00:06:01,590 --> 00:06:05,390
Tag, wenn wir behalten hatte gehen in
dass beispielsweise vor einem Augenblick,

128
00:06:05,390 --> 00:06:08,020
hätte Hallo Welt.

129
00:06:08,020 --> 00:06:10,140
Das war der Titel auf unserer Seite.

130
00:06:10,140 --> 00:06:12,370
Weitere Immobilien
sind Knotenname, der

131
00:06:12,370 --> 00:06:15,810
ist der Name eines HTML
Element wie Titel.

132
00:06:15,810 --> 00:06:19,100
ID, die die ID
Attribut eines HTML-Elements.

133
00:06:19,100 --> 00:06:23,790
>> Daran erinnern, dass wir besonders hinweisen können
spezifische Elemente unseres HTML

134
00:06:23,790 --> 00:06:27,510
mit einem ID-Attribut, das in der Regel
ist praktisch im Rahmen des CSS,

135
00:06:27,510 --> 00:06:29,000
speziell.

136
00:06:29,000 --> 00:06:33,217
Eltern-Knoten, die einen Verweis auf ist
was ist gerade über mir in der DOM.

137
00:06:33,217 --> 00:06:35,800
Und Kinderknoten, die ein
Bezug auf, was da unten unter mir.

138
00:06:35,800 --> 00:06:37,950
Und wir eine Menge, dass sah
gerade auf der Suche durch.

139
00:06:37,950 --> 00:06:42,970
Kind-Knoten, das ist, wie wir uns
tiefer und tiefer in den Baum.

140
00:06:42,970 --> 00:06:46,590
>> Attribute, das ist nur ein Array
der Attribute des HTML-Elements.

141
00:06:46,590 --> 00:06:50,270
So ein Beispiel für Attribute könnten
sein, wenn Sie ein Image-Tag haben,

142
00:06:50,270 --> 00:06:54,090
es hat in der Regel ein Quellattribut,
vielleicht eine Höhe und eine Breite Attribut.

143
00:06:54,090 --> 00:06:57,120
Und so wäre, dass nur ein Array sein
der alle Attribute zugeordnet

144
00:06:57,120 --> 00:06:59,300
mit dem HTML-Element.

145
00:06:59,300 --> 00:07:04,140
>> Stil ist eine andere,
ist Betreiber der CSS

146
00:07:04,140 --> 00:07:06,050
Entwerfen eines bestimmten Elements.

147
00:07:06,050 --> 00:07:08,310
Und später in diesem
Video, werden wir spezifisch

148
00:07:08,310 --> 00:07:14,592
Leverage-Stil, ein paar machen
Änderungen an unserer Website.

149
00:07:14,592 --> 00:07:15,800
Das sind also einige Eigenschaften.

150
00:07:15,800 --> 00:07:17,591
>> Und es gibt auch einige
Methoden, die wir

151
00:07:17,591 --> 00:07:22,450
zu verwenden, um auch schneller vielleicht isolieren
Elemente des Document Object.

152
00:07:22,450 --> 00:07:26,730
Vielleicht, das vielseitigste
dieser als getElementById.

153
00:07:26,730 --> 00:07:31,190
So könnte ich so etwas sagen, weil
erinnern, es ist eine Methode des Document

154
00:07:31,190 --> 00:07:34,880
Objekt, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Und innerhalb dieser Klammern geben
ein HTML-Element mit einer bestimmten ID

156
00:07:39,820 --> 00:07:42,330
Attribut, das ich vorher haben
gesetzt, und ich werde sofort

157
00:07:42,330 --> 00:07:46,685
Recht auf das Element gehen
der gesamten Website.

158
00:07:46,685 --> 00:07:49,310
So dass ich nicht haben, um vielleicht zu bohren
nach unten durch jede einzelne Schicht.

159
00:07:49,310 --> 00:07:52,841
Ich kann diese Methode verwenden, um es zu finden,
wie eine Art Wärme suchenden Rakete,

160
00:07:52,841 --> 00:07:53,340
Recht?

161
00:07:53,340 --> 00:07:56,300
Es geht einfach und findet
genau das, was er sucht.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName ist
sehr ähnlich im Geiste.

163
00:07:59,290 --> 00:08:02,500
Vielleicht würden alle die finden
bold-Tags oder alle der p-Tags

164
00:08:02,500 --> 00:08:05,920
und geben Sie mir eine Reihe von alles
dass ich dann mit zu arbeiten.

165
00:08:05,920 --> 00:08:12,080
appendChild fügt etwas
eine Ebene tiefer in den Baum.

166
00:08:12,080 --> 00:08:16,440
>> So kann ich eine ganz neue hinzufügen,
Element eine Stufe tiefer.

167
00:08:16,440 --> 00:08:19,700
Oder ich kann ein Element, das es zu entfernen
eine Stufe tiefer als auch, wenn ich will

168
00:08:19,700 --> 00:08:22,870
etwas von meiner Web-Seite zu löschen.

169
00:08:22,870 --> 00:08:28,480
Jetzt eine schnelle Kodierung Note und eine schnelle
Kopfschmerzen sparen note, hoffentlich.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- die d Kleinbuchstaben.

171
00:08:31,670 --> 00:08:36,950
Ich kann Ihnen nicht sagen, wie oft ich haben
gebrauchte getElementById und aktivierten

172
00:08:36,950 --> 00:08:38,336
die d gibt.

173
00:08:38,336 --> 00:08:39,460
Weil es wirklich häufig.

174
00:08:39,460 --> 00:08:42,990
Schreiben wir das Wort ID, ist es
in der Regel Kapital I Kapital D.

175
00:08:42,990 --> 00:08:44,240
Und mein Code funktioniert einfach nicht.

176
00:08:44,240 --> 00:08:45,630
Und ich kann nicht herausfinden, warum.

177
00:08:45,630 --> 00:08:49,490
Dies ist ein wirklich, wirklich, wirklich
gemeinsame Fehler, dass jeder macht,

178
00:08:49,490 --> 00:08:51,890
selbst Experten, die haben
tut dies immer.

179
00:08:51,890 --> 00:08:55,410
Also einfach bewusst sein, getElementById,
daß d Kleinbuchstaben.

180
00:08:55,410 --> 00:09:00,080
Und hoffentlich, dass erspart Ihnen mehrere
Minuten mindestens der Herzschmerz.

181
00:09:00,080 --> 00:09:02,204
>> Was bedeutet all dies sagt uns das?

182
00:09:02,204 --> 00:09:03,120
Wir haben diese Methoden.

183
00:09:03,120 --> 00:09:04,161
Wir haben diese Eigenschaften.

184
00:09:04,161 --> 00:09:06,610
Nun, wenn wir von
Dokument, Dokument.

185
00:09:06,610 --> 00:09:10,220
was auch immer, können wir jetzt zu einem erhalten
Einzelstück unserer Webseite

186
00:09:10,220 --> 00:09:14,870
dass wir wollen, mit Hilfe von JavaScript
nur durch den Aufruf dieser Methoden

187
00:09:14,870 --> 00:09:19,940
und die Nutzung der Eigenschaften
daß wir an verschiedenen Standorten.

188
00:09:19,940 --> 00:09:24,890
>> Dies kann wortreich zu erhalten, diese
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
vielleicht haben eine lange Tag-Namen,
vielleicht haben Sie mehr Anrufe später zu tun.

190
00:09:28,560 --> 00:09:31,230
Dinge können sich ein wenig wortreich.

191
00:09:31,230 --> 00:09:34,480
Und als Programmierer, als Sie haben
wahrscheinlich in vielen dieser Videos zu sehen,

192
00:09:34,480 --> 00:09:36,600
wir nicht wie wortreich Dinge.

193
00:09:36,600 --> 00:09:38,520
>> Wir möchten in der Lage, die Dinge schnell zu tun.

194
00:09:38,520 --> 00:09:42,640
So würden wir gerne eine weitere
prägnanten Weg, um etwas zu sagen.

195
00:09:42,640 --> 00:09:46,270
Also diese Art von führt zum
Vorstellung von so etwas wie jQuery.

196
00:09:46,270 --> 00:09:49,170
Jetzt jQuery ist kein JavaScript.

197
00:09:49,170 --> 00:09:50,350
Es ist nicht Teil des JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Es ist eine Bibliothek, die geschrieben wurde,
von einigen JavaScript-Programmierer

199
00:09:54,790 --> 00:09:57,060
vor etwa 10 Jahren.

200
00:09:57,060 --> 00:10:01,300
Und ihr Ziel ist es, das, was ist zu vereinfachen
genannte Client-Side-Scripting, die

201
00:10:01,300 --> 00:10:04,310
ist im Grunde, was wir gerade waren
reden mit DOM-Manipulationen.

202
00:10:04,310 --> 00:10:11,090
Und so, wenn ich wollte das ändern
Hintergrundfarbe meiner Web-Seite, vielleicht

203
00:10:11,090 --> 00:10:11,980
eine spezifische Div.

204
00:10:11,980 --> 00:10:15,325
>> Hier bin ich anscheinend immer
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Und ich möchte die Hintergrundfarbe gesetzt.

206
00:10:16,950 --> 00:10:20,720
Wenn ich mich nur mit reinem JavaScript
Verwendung des Document Object Model,

207
00:10:20,720 --> 00:10:23,990
das ist eine Menge Zeug, nicht wahr?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = grün.

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

210
00:10:27,260 --> 00:10:28,050
>> Puh.

211
00:10:28,050 --> 00:10:30,110
Das war eine Menge zu sagen.

212
00:10:30,110 --> 00:10:31,720
Es gibt eine Menge zu geben, auch.

213
00:10:31,720 --> 00:10:35,760
Und so in jQuery, können wir vielleicht sagen,
diese ein wenig mehr prägnant.

214
00:10:35,760 --> 00:10:39,350
Die Trade-off sein, es ist vielleicht ein wenig
etwas kryptischen ganz plötzlich,

215
00:10:39,350 --> 00:10:39,850
Recht?

216
00:10:39,850 --> 00:10:43,580
>> Mindestens die lange ist ein wenig
erklärend, was wir tun.

217
00:10:43,580 --> 00:10:49,947
Das Dollarzeichen, Klammern,
Apostroph, hasch, colorDiv, nicht wahr?

218
00:10:49,947 --> 00:10:50,780
Was bedeutet das?

219
00:10:50,780 --> 00:10:53,640
Nun, das ist im Grunde nur
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Aber es ist diese Art Kurzschrift
Weg es zu tun mit jQuery.

221
00:10:58,700 --> 00:11:01,380
Lassen Sie uns einfach einen Blick jetzt
auf ein paar verschiedene Möglichkeiten,

222
00:11:01,380 --> 00:11:04,520
damit ich wirklich
Mit dieser Document Object

223
00:11:04,520 --> 00:11:06,807
Modell, um Stücke von meiner Website zu manipulieren.

224
00:11:06,807 --> 00:11:09,140
Insbesondere werden wir
auf Manipulation arbeiten

225
00:11:09,140 --> 00:11:14,090
die Farbe eines bestimmten
Div, colorDiv, auf einer Web-Seite.

226
00:11:14,090 --> 00:11:15,299
Werfen wir also einen Blick auf, dass.

227
00:11:15,299 --> 00:11:15,798
Gut.

228
00:11:15,798 --> 00:11:16,700
So bin ich auf einer Seite.

229
00:11:16,700 --> 00:11:20,750
Es test.html, wenn Sie downloaden genannt
dies, wenn Sie mit diesem basteln möchten.

230
00:11:20,750 --> 00:11:24,730
Und ich habe einen Haufen bekam
Tasten auf dieser Seite.

231
00:11:24,730 --> 00:11:27,730
Und ich sage einzelnen Funktionen
für die Hintergrundfarbe, lila, grün,

232
00:11:27,730 --> 00:11:31,330
orange, rot, blau, eine einzige Funktion
für die Hintergrundfarbe, Event-Handler

233
00:11:31,330 --> 00:11:34,360
für die Hintergrundfarbe und mit jQuery.

234
00:11:34,360 --> 00:11:38,147
Was rede ich da
wenn ich das tue?

235
00:11:38,147 --> 00:11:39,230
Also haben wir die Buttons zu sehen.

236
00:11:39,230 --> 00:11:41,521
Lassen Sie uns nun einen Blick auf
etwas von dem Source-Code hier.

237
00:11:41,521 --> 00:11:44,770
Wir werden mit test.html starten.

238
00:11:44,770 --> 00:11:48,100
So einzelnen Funktionen für den Hintergrund
Farbe ist, was ich hier eingegeben.

239
00:11:48,100 --> 00:11:49,350
Lassen Sie mich ein wenig zu blättern.

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

241
00:11:56,170 --> 00:11:58,820
>> Und Sie werden feststellen, dass ich merke,
haben diese Tasten definiert

242
00:11:58,820 --> 00:12:03,990
zu sagen, wenn Sie diese Taste angeklickt wird,
rufen Sie die Funktion auf lila.

243
00:12:03,990 --> 00:12:06,670
Wenn diese Schaltfläche klicken, und nicht,
rufen Sie die Funktion auf grün,

244
00:12:06,670 --> 00:12:08,710
drehen orange, rot, blau.

245
00:12:08,710 --> 00:12:11,880
Sie können sich wahrscheinlich vorstellen, dass diese
ist vielleicht nicht das beste Design

246
00:12:11,880 --> 00:12:12,460
Sinn, nicht wahr?

247
00:12:12,460 --> 00:12:16,490
>> Es wäre schön, wenn ich könnte
haben einen allgemeineren Ansatz.

248
00:12:16,490 --> 00:12:19,570
Nun, zunächst werden wir einen Blick nehmen
auf das, was diese fünf Funktionen

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

250
00:12:24,400 --> 00:12:27,250
grün, orange, rot,
bzw. blau.

251
00:12:27,250 --> 00:12:30,930
Also, nicht besonders das beste Design.

252
00:12:30,930 --> 00:12:33,390
>> Die nächste Gruppe von Schaltflächen
Ich habe ist, die ich geschrieben habe

253
00:12:33,390 --> 00:12:36,380
eine einzelne Funktion namens
Farbe ändern, die offenbar

254
00:12:36,380 --> 00:12:38,960
akzeptiert einen String als Argument.

255
00:12:38,960 --> 00:12:40,290
Das ist also ein bisschen besser.

256
00:12:40,290 --> 00:12:43,840
Lila, grün, orange, rot,
blau ist jetzt ein Argument.

257
00:12:43,840 --> 00:12:46,230
Also habe ich eine allgemeine schriftliche
Bei JavaScript-Funktion,

258
00:12:46,230 --> 00:12:47,771
die wie folgt aussehen könnte.

259
00:12:47,771 --> 00:12:48,680
Ich bin vorbei an.

260
00:12:48,680 --> 00:12:52,090
Diese Funktion ist die Farbe ändern
erwartet ein Argument aufgerufen Farbe.

261
00:12:52,090 --> 00:12:54,970
Und ich sage, setzen die
Hintergrundfarbe auf Farbe.

262
00:12:54,970 --> 00:12:58,390
Also hier steht, was ich hier habe.

263
00:12:58,390 --> 00:12:59,770
Also das ist ein bisschen besser.

264
00:12:59,770 --> 00:13:02,740
>> Aber ich vielleicht in der Lage zu sein,
besser machen als die.

265
00:13:02,740 --> 00:13:06,140
Wenn wir nach unten gehen, um einen Blick zu nehmen
an der Event-Handler-Situation,

266
00:13:06,140 --> 00:13:07,860
jetzt alle diese Anrufe gleich aussehen.

267
00:13:07,860 --> 00:13:10,340
Wenn Sie sich für unseren erinnern
Diskussion über Event-Handler,

268
00:13:10,340 --> 00:13:15,770
Ich kann Informationen darüber, welche der zu bekommen
diese Tasten angeklickt wurde und verwendet diesen.

269
00:13:15,770 --> 00:13:19,560
>> Und so in event.JavaScript, ich habe
schriftlichen Änderungsfarbe Veranstaltung, die

270
00:13:19,560 --> 00:13:21,110
findet heraus, welche Schaltfläche geklickt wurde.

271
00:13:21,110 --> 00:13:23,250
Das ist das Triggerobjekt Linie.

272
00:13:23,250 --> 00:13:25,240
Und dann hier, wird es richtig wortreich.

273
00:13:25,240 --> 00:13:27,420
Aber was ich tue, ist, ich bin
Einstellen der Hintergrund

274
00:13:27,420 --> 00:13:30,340
Farbe triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Das ist der Text in
zwischen den Taste-Tags.

276
00:13:34,170 --> 00:13:36,500
>> Und dann habe ich offenbar
um es einzurichten in Kleinbuchstaben.

277
00:13:36,500 --> 00:13:40,780
Und das ist, wie ich eine ganze konvertieren
String in Kleinbuchstaben mit JavaScript

278
00:13:40,780 --> 00:13:42,940
dass Verfahren in Kleinbuchstaben.

279
00:13:42,940 --> 00:13:46,570
Denn wenn ich eine Farbe,
wie ich versuche, hier zu tun,

280
00:13:46,570 --> 00:13:48,260
die Farbe muss in Kleinbuchstaben sein.

281
00:13:48,260 --> 00:13:50,920
>> Aber die Schaltfläche, die ich hatte,
wenn wir noch einen Blick,

282
00:13:50,920 --> 00:13:55,890
feststellen, dass der Text gibt es
mit einem Kapital P für purple geschrieben.

283
00:13:55,890 --> 00:13:59,140
Und dann bei der sehr
Boden hier, ich anscheinend

284
00:13:59,140 --> 00:14:02,630
versuchen und tun dies mit jQuery als auch.

285
00:14:02,630 --> 00:14:06,000
Und in diesem Fall, ich bin nicht wirklich
Aufruf einer Funktion überhaupt.

286
00:14:06,000 --> 00:14:11,430
Ich habe gerade gesagt, die Klasse, die ich
Hilfe für diese Taste ist eine jQ-Taste.

287
00:14:11,430 --> 00:14:12,360
Das ist es.

288
00:14:12,360 --> 00:14:14,950
>> Wie funktioniert jQuery wissen, was ich tue?

289
00:14:14,950 --> 00:14:18,740
Nun, das ist einer der Vorteile dieser
Slash Nachteile jQuery.

290
00:14:18,740 --> 00:14:21,560
Es kann mir erlauben, Dinge zu tun
sehr kurz, aber vielleicht auch nicht

291
00:14:21,560 --> 00:14:22,570
als intuitiv.

292
00:14:22,570 --> 00:14:25,570
Vielleicht jene anderen drei machen einen
etwas mehr spüren, was ich tue.

293
00:14:25,570 --> 00:14:29,010
Hier aber, was ist los?

294
00:14:29,010 --> 00:14:31,940
>> Offenbar, die Schaffung
eine anonyme Funktion

295
00:14:31,940 --> 00:14:36,790
dass Belastungen, wenn mein Dokument
ist bereit, so document.ready,

296
00:14:36,790 --> 00:14:38,760
eine Funktion passieren wird.

297
00:14:38,760 --> 00:14:40,490
Grundsätzlich, wenn ein Dokument bereit?

298
00:14:40,490 --> 00:14:42,310
Es ist, wenn meine Seite geladen wurde.

299
00:14:42,310 --> 00:14:46,540
>> Also, sobald meine Seite geladen wurde, die
Folgende Funktion ist immer bereit.

300
00:14:46,540 --> 00:14:54,310
Er sagt, wenn ein Objekt vom Typ jQButton,
oder wenn Klasse jQButton angeklickt wurde,

301
00:14:54,310 --> 00:14:55,570
führen Sie diese Funktion.

302
00:14:55,570 --> 00:14:59,360
Also hier ist zwei anonyme Funktionen,
eine innerhalb des anderen definiert.

303
00:14:59,360 --> 00:15:03,930
>> Also meine gesamten Kontext
hier so weit ist meine Seite

304
00:15:03,930 --> 00:15:06,520
wenn es lädt es diese Funktion aufruft.

305
00:15:06,520 --> 00:15:09,740
Und diese Funktion wartet
für eine Schaltfläche angeklickt werden.

306
00:15:09,740 --> 00:15:14,490
Und wenn eine Taste angeklickt wird, jQ
Button speziell angeklickt wird,

307
00:15:14,490 --> 00:15:17,150
es diesen anderen ruft
Funktion, die gehen,

308
00:15:17,150 --> 00:15:21,250
um den Hintergrund gesetzt
Farbe colorDiv zu sein

309
00:15:21,250 --> 00:15:25,990
was Text ist in zwischen den Tags.

310
00:15:25,990 --> 00:15:28,050
>> Dies ist der Begriff der
welche Schaltfläche geklickt wurde.

311
00:15:28,050 --> 00:15:31,230
Aber ansonsten ist diese Art von
Verhalten ähnlich eines Ereignisses.

312
00:15:31,230 --> 00:15:34,460
Es ist nur die genauso wie ich
würde dies in jQuery auszudrücken.

313
00:15:34,460 --> 00:15:36,790
Auch hier ist es wahrscheinlich eine
viel mehr einschüchternd.

314
00:15:36,790 --> 00:15:40,840
Es ist nicht so klar, wie
so etwas wie event.js,

315
00:15:40,840 --> 00:15:45,080
die vielleicht ein bisschen mehr ist
verbose, aber ein bisschen weniger

316
00:15:45,080 --> 00:15:46,000
einschüchternd.

317
00:15:46,000 --> 00:15:51,460
>> Aber wenn wir knallen zurück zu meinem Browser
Fenster, wenn ich starten clicking-- gut,

318
00:15:51,460 --> 00:15:52,690
das änderte sich bis violett.

319
00:15:52,690 --> 00:15:54,450
Dies ist grün mit dem String-Methode.

320
00:15:54,450 --> 00:15:56,500
Dies ist Orange mit dem Event-Handler.

321
00:15:56,500 --> 00:15:58,300
>> Dies ist rot mit jQuery, nicht wahr?

322
00:15:58,300 --> 00:16:01,270
Sie alle verhalten sich genau das gleiche.

323
00:16:01,270 --> 00:16:06,509
Sie tun nur, dass es mit verschiedenen
Ansätze zur Lösung des Problems.

324
00:16:06,509 --> 00:16:08,550
Es gibt noch viel mehr zu
jQuery dann sind wir sicher

325
00:16:08,550 --> 00:16:10,050
werde über in diesem Video sprechen.

326
00:16:10,050 --> 00:16:15,410
Aber wenn Sie mehr erfahren möchten, können Sie
finden Sie auf der jQuery Art von Dokumentation

327
00:16:15,410 --> 00:16:19,710
und lernen, ein bisschen mehr zu
Dieses sehr flexible Bibliothek, die

328
00:16:19,710 --> 00:16:22,550
ist für tun Clientseite
Scripting, wie, was wir taten

329
00:16:22,550 --> 00:16:26,240
um das Aussehen zu manipulieren
und fühlen sich von unserer Web-Seite

330
00:16:26,240 --> 00:16:28,750
mit dem Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Ich bin Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Dies ist CS50.

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