1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Seminar: JQUERY]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Harvard University]

3
00:00:04,790 --> 00:00:08,000
[Dies ist CS50.] [CS50.TV]

4
00:00:08,000 --> 00:00:10,640
Wenn Sie nach zusammen zu Hause sind, können Sie tatsächlich auf meine Dias Online

5
00:00:10,640 --> 00:00:13,310
indem Sie auf diesen Link.

6
00:00:13,310 --> 00:00:18,650
Es ist TjjRWj auf bit.ly.

7
00:00:18,650 --> 00:00:20,700
Sie können auch einfach die URL direkt,

8
00:00:20,700 --> 00:00:27,300
Das ist cloud.cs50.net / ~ vshekhawat, die mein Name ist,

9
00:00:27,300 --> 00:00:32,409
und jQuery.

10
00:00:32,409 --> 00:00:34,920
Ich empfehle Ihnen wärmstens zu folgen, wenn Sie zu Hause beobachten sind,

11
00:00:34,920 --> 00:00:40,650
und wenn du hier bist, auch, denn dies ist ein ziemlich interaktive Präsentation.

12
00:00:40,650 --> 00:00:43,160
>> Also heute werde ich über jQuery sprechen, und die erste Frage ist,

13
00:00:43,160 --> 00:00:45,300
was ist jQuery?

14
00:00:45,300 --> 00:00:47,090
In diesem Jahr, ich weiß, du Jungs haben JavaScript nicht abgedeckt

15
00:00:47,090 --> 00:00:51,080
so detailliert, wie wir in den vergangenen Jahren haben.

16
00:00:51,080 --> 00:00:53,150
JavaScript ist in erster Linie, nur eine Client-seitige Sprache

17
00:00:53,150 --> 00:00:58,390
die Sie verwenden, um Skripts und Code auf jeder Computer des Benutzers ausgeführt werden.

18
00:00:58,390 --> 00:01:00,660
So haben Sie einen Server, der Web-Seiten bietet, um Menschen,

19
00:01:00,660 --> 00:01:02,600
aber möchten Sie vielleicht Sachen auf ihre Maschine zu tun,

20
00:01:02,600 --> 00:01:08,060
fragen ihre Maschine, um Anfragen an den Server alle 30 Sekunden oder so etwas zu senden.

21
00:01:08,060 --> 00:01:10,420
Sie können die Verwendung von JavaScript zu tun.

22
00:01:10,420 --> 00:01:13,190
JQuery nur bietet mehr Funktionalität auf der Oberseite JavaScript

23
00:01:13,190 --> 00:01:15,680
Das bedeutet zusätzliche Sachen für Sie.

24
00:01:15,680 --> 00:01:17,710
Wenn man sich den Inhalt an der Spitze,

25
00:01:17,710 --> 00:01:21,410
Das beschreibt einige der Sachen, die Sie tun können, sind.

26
00:01:21,410 --> 00:01:23,500
Also insgesamt war es im Januar 2006 erstellt.

27
00:01:23,500 --> 00:01:26,560
Es wurde erstmals im August 2005 von konzipiert.

28
00:01:26,560 --> 00:01:31,370
Es ist schon seit ein paar Jahren, und es ist wirklich Teil der neuen Web 2.0 Bewegung

29
00:01:31,370 --> 00:01:34,330
Das ist aus dem Internet so glänzend.

30
00:01:34,330 --> 00:01:37,630
Es ist die am weitesten verbreitete JavaScript-Bibliothek.

31
00:01:37,630 --> 00:01:41,450
Mehr als 19,6 Millionen Websites nutzen es, und die Nutzung steigt weiter

32
00:01:41,450 --> 00:01:45,640
nach builtwith.com, die offenbar im letzten Jahr,

33
00:01:45,640 --> 00:01:49,710
wurde gerade ständig steigenden ziemlich linear.

34
00:01:49,710 --> 00:01:52,870
Unter den Top 10 Millionen Websites gibt es noch -

35
00:01:52,870 --> 00:01:55,180
rund 40% von ihnen sind zur Zeit als sie.

36
00:01:55,180 --> 00:01:58,540
Facebook nutzt es, viele andere Websites aktuell verwendet wird.

37
00:01:58,540 --> 00:02:01,540
Sie können an diesen Statistiken auf eigene Faust zu suchen, wenn Sie möchten.

38
00:02:01,540 --> 00:02:05,820
Und man könnte sagen, es ist legitim, weil es eine Stiftung und 13 Vorstandsmitglieder hat,

39
00:02:05,820 --> 00:02:11,910
zusammen mit einem Team von 20 Personen, die daran arbeiten auf einer regelmäßigen Basis.

40
00:02:11,910 --> 00:02:16,110
So ist es sehr breit verwendet hat, hat es eine. Org URL, es ist schick,

41
00:02:16,110 --> 00:02:21,660
es hat Spin-offs für andere Sachen, so ist es eine große Sache.

42
00:02:21,660 --> 00:02:24,510
>> Warum sollten Sie es nutzen? JQuery ist sehr leicht.

43
00:02:24,510 --> 00:02:27,270
Das heißt, es gibt nicht eine riesige Datei. Sie können

44
00:02:27,270 --> 00:02:31,540
die verkleinerte Datei ist, die ohne all den weißen Raum und Kommentare, und es ist nur 32 kB.

45
00:02:31,540 --> 00:02:33,600
So ist es einfach nur auf Ihre Web-Seite werfen

46
00:02:33,600 --> 00:02:35,910
und nur um ihn zu benutzen.

47
00:02:35,910 --> 00:02:39,630
Es ist auch sehr effizient geschrieben, so dauert es nicht sehr viel -

48
00:02:39,630 --> 00:02:42,550
es nicht verlangsamen Ihre Website viel, wenn Sie es verwenden.

49
00:02:42,550 --> 00:02:45,770
Es lässt Sie implementieren Dinge, die bisher nicht realisierbar waren.

50
00:02:45,770 --> 00:02:47,790
Es gibt einige Aspekte der Funktionalität,

51
00:02:47,790 --> 00:02:51,780
wie das Erstellen von Animationen, das normalerweise wäre sehr, sehr schwer zu tun.

52
00:02:51,780 --> 00:02:54,300
Aber in jQuery sie sind wirklich sehr einfach.

53
00:02:54,300 --> 00:02:57,040
Und es gibt einige Dinge, die ärgerlich sind zu tun,

54
00:02:57,040 --> 00:02:59,610
möglich in JavaScript, wie das Senden einer POST-Anforderung,

55
00:02:59,610 --> 00:03:02,190
aber um eine Anfrage an einen Server zu senden, müssen Sie schreiben

56
00:03:02,190 --> 00:03:04,320
fünf oder sechs oder sieben Zeilen Code.

57
00:03:04,320 --> 00:03:07,200
Jetzt können Sie tun es einfach in einer einzigen Zeile Code in einem einzigen Aufruf der Funktion.

58
00:03:07,200 --> 00:03:11,790
Das ist wirklich vereinfacht eine Menge Sachen, die du tust.

59
00:03:11,790 --> 00:03:15,950
Und all die coolen Kids werden es zu benutzen. Damit meine ich mich.

60
00:03:15,950 --> 00:03:19,270
In meinem letzten Projekt im vergangenen Jahr ist die news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
was für den Radiosender, habe ich dieses Blog

62
00:03:22,530 --> 00:03:29,750
die Gastgeber alle zeigt, dass wir getan haben und die MP3-Dateien für sie.

63
00:03:29,750 --> 00:03:32,070
Sie können durch die Vergangenheit zeigt, zu sehen,

64
00:03:32,070 --> 00:03:34,130
und es ist alles getan mit jQuery. Man kann sagen,

65
00:03:34,130 --> 00:03:37,340
wegen all dieser Animationen, im Wesentlichen.

66
00:03:37,340 --> 00:03:42,360
Also, wenn Sie - wenn Sie einen neuen Beitrag erstellen sind,

67
00:03:42,360 --> 00:03:45,980
Sie sehen diese kleinen slideDowns, das ist alles getan mit jQuery.

68
00:03:45,980 --> 00:03:49,140
Und das Fade - so solche Sachen wird alles getan mit jQuery,

69
00:03:49,140 --> 00:03:52,720
und Sie müssen nicht ständig die Seite neu laden, um die Website navigieren.

70
00:03:52,720 --> 00:03:57,220
Eine andere kühle Sache, die unter Verwendung von jQuery ist diese Präsentation.

71
00:03:57,220 --> 00:03:59,700
Ich bin mit diesem Open-Source-Ding namens scrolldeck,

72
00:03:59,700 --> 00:04:03,250
dem jemand schrieb oben auf jQuery.

73
00:04:03,250 --> 00:04:04,870
Wenn Sie an der Quelle tatsächlich anschaut, kann man sehen, dass

74
00:04:04,870 --> 00:04:07,830
sie mit diesen Dollarzeichen, Dollar-Zeichen

75
00:04:07,830 --> 00:04:12,110
werden in jQuery verwendet, um zu bedeuten, dass eine Funktion ein jQuery-Funktion ist.

76
00:04:12,110 --> 00:04:15,020
So sind sie, die einen Wrapper oben auf jQuery

77
00:04:15,020 --> 00:04:18,570
das ermöglicht es Ihnen, eine Präsentation wie diese machen,

78
00:04:18,570 --> 00:04:21,200
und man kann sehen, dass sie hier sind, einschließlich der ursprünglichen jQuery-Datei,

79
00:04:21,200 --> 00:04:24,120
das ist, was du musst zählen, wenn Sie wollen, um jQuery verwenden

80
00:04:24,120 --> 00:04:30,450
in Ihre eigenen Websites.

81
00:04:30,450 --> 00:04:32,790
>> Berühren auf, dass, wie Sie es installieren?

82
00:04:32,790 --> 00:04:36,150
Sie können gehen Sie einfach auf jQuery.com und laden Sie die Datei,

83
00:04:36,150 --> 00:04:38,320
fügen Sie es zu einem Web-Verzeichnis und schließen Sie sie.

84
00:04:38,320 --> 00:04:42,200
Also einfach am Anfang, in der head-Tag der HTML-Datei

85
00:04:42,200 --> 00:04:45,400
Ihrer wichtigsten HTML-Datei, nur haben diese Codezeile

86
00:04:45,400 --> 00:04:49,490
mit der richtigen Version für welche Version von jQuery Sie verwenden.

87
00:04:49,490 --> 00:04:51,340
Sie können es, indem Sie auf jQuery.com downloaden,

88
00:04:51,340 --> 00:04:55,130
klicken Sie auf "Download jQuery," und du hast es. Das war's.

89
00:04:55,130 --> 00:04:58,880
Und tatsächlich können wir einen Blick auf, wie es aussieht.

90
00:04:58,880 --> 00:05:01,080
Wenn Sie auf hier herunterladen, ist diese jQuery.

91
00:05:01,080 --> 00:05:05,260
Es ist nur eine große JavaScript-Datei, die den ganzen Zauber Sachen für Sie erledigt.

92
00:05:05,260 --> 00:05:09,270
Dies ist die verkleinerte Version, die ist überhaupt nicht lesbar.

93
00:05:09,270 --> 00:05:13,180
Sie können auch auf die Entwicklung Version aussehen, was lesbar ist

94
00:05:13,180 --> 00:05:15,370
aber immer noch sehr, sehr lange.

95
00:05:15,370 --> 00:05:17,980
Es ist eine Menge Zeug drin.

96
00:05:17,980 --> 00:05:20,240
Sie können auch auf gehostete Version von Googles darauf verlinken.

97
00:05:20,240 --> 00:05:23,820
Also das wird können Sie nur auf Google verlassen, um sie zu stellen.

98
00:05:23,820 --> 00:05:29,310
Sie bieten jede Version von es, jederzeit verfügbar.

99
00:05:29,310 --> 00:05:31,530
So können Sie wahrscheinlich auf Google verlassen, um es für Sie zu hosten.

100
00:05:31,530 --> 00:05:33,270
Oder Sie können auf eigene neueste jQuery-Version zu verbinden.

101
00:05:33,270 --> 00:05:36,400
Sie haben eine URL, die immer auf die neueste Version aktualisiert ist.

102
00:05:36,400 --> 00:05:40,850
Es ist jQuery-latest, und es gibt ein Problem mit dem,

103
00:05:40,850 --> 00:05:44,350
Das ist, dass, wenn die aktualisierte jQuery und einige der vorherigen Funktionalität

104
00:05:44,350 --> 00:05:47,250
hatten sie wird retrogradierte oder veraltet,

105
00:05:47,250 --> 00:05:49,620
kann es nicht - es kann beginnen, nicht mehr unterstützt zu werden.

106
00:05:49,620 --> 00:05:52,940
Also, wenn Sie schreiben, eine Website mit der Version 1.8.2,

107
00:05:52,940 --> 00:05:55,000
durch die Zeit, Version 2.7 kommt

108
00:05:55,000 --> 00:05:57,000
einige der Funktionen, die Sie schrieb nicht mehr funktionieren.

109
00:05:57,000 --> 00:05:59,930
So ist es besser, laden Sie einfach die 32 kB-Datei,

110
00:05:59,930 --> 00:06:04,100
legte sie auf Ihrer Web-Seite, und es wird immer funktionieren.

111
00:06:04,100 --> 00:06:07,450
>> Ich werde weitermachen und reden über die tatsächliche Funktionalität von jQuery.

112
00:06:07,450 --> 00:06:13,090
Die erste Sache ist Selektoren. Dies ist, was jQuery wurde ursprünglich konzipiert, um bereitzustellen.

113
00:06:13,090 --> 00:06:15,500
Und Sie können auf Dokumentation klicken zum Anschauen

114
00:06:15,500 --> 00:06:18,690
Die ausführliche Dokumentation ist für die Wähler werde ich dabei sein werde.

115
00:06:18,690 --> 00:06:24,120
Die Idee dahinter ist, dass Selektoren können Sie HTML-Elemente auf einer Seite auszuwählen.

116
00:06:24,120 --> 00:06:28,790
Elemente auf einer Seite haben IDs und Klassen und andere Aspekte zu identifizieren, um sie.

117
00:06:28,790 --> 00:06:30,500
Es gibt auch - sie sind in unterschiedlicher Reihenfolge.

118
00:06:30,500 --> 00:06:32,570
Einige der Zeit, die sie ineinander verschachtelt sind.

119
00:06:32,570 --> 00:06:38,120
JQuery ermöglicht es Ihnen, einfache Abfragen, die Elemente aus der Seite abrufen zu konstruieren.

120
00:06:38,120 --> 00:06:41,890
Dann können Sie manipulieren diese Elemente mit jQuery-Funktionen,

121
00:06:41,890 --> 00:06:43,990
das ist die Manipulation Abschnitt haben wir erhalten, werden später.

122
00:06:43,990 --> 00:06:46,040
Sie können die HTML, CSS ändern,

123
00:06:46,040 --> 00:06:50,500
Sie können auch animiert und fügen Sie Funktionen, die auf bestimmte Ereignisse zu aktivieren.

124
00:06:50,500 --> 00:06:52,710
So zum Beispiel, wenn etwas angeklickt, Sie wollen, dass etwas passiert,

125
00:06:52,710 --> 00:06:55,210
Sie können, dass mit jQuery als gut tun.

126
00:06:55,210 --> 00:06:57,380
Und es gibt eine große Anzahl von Möglichkeiten, um Elemente auszuwählen.

127
00:06:57,380 --> 00:07:00,310
Die meisten von ihnen habe ich noch nie benutzt, aber es sind die grundlegenden diejenigen,

128
00:07:00,310 --> 00:07:02,340
die sind ziemlich wichtig.

129
00:07:02,340 --> 00:07:05,750
Das Element Wähler, zum Beispiel, wenn Sie gerade etwas zu wählen

130
00:07:05,750 --> 00:07:10,640
das ist ein div - Ich habe tatsächlich den Code offen für diese Präsentation.

131
00:07:10,640 --> 00:07:13,450
So, zum Beispiel, hier ist die erste Folie.

132
00:07:13,450 --> 00:07:17,430
Hier haben wir ein div. Wenn wir tatsächlich wählen Sie alle divs auf der Seite,

133
00:07:17,430 --> 00:07:22,300
es wird nur uns ein Array aller divs die in dieser Datei existieren.

134
00:07:22,300 --> 00:07:27,040
Der ID-Selektor können Sie auswählen, was mit einer bestimmten ID.

135
00:07:27,040 --> 00:07:32,230
Also, wenn diese, zum Beispiel, hat das Ding die ID "was",

136
00:07:32,230 --> 00:07:37,160
und wenn wir das getan hat, was mit # anstatt einige ID,

137
00:07:37,160 --> 00:07:42,920
es wäre nur ein Array, das ein einzelnes Element hat und das ist, dass Element der Seite.

138
00:07:42,920 --> 00:07:45,490
Wir können auch kombinieren Selektoren auf diese Weise, indem er

139
00:07:45,490 --> 00:07:48,260
wählen Sie nur Dinge mit IDs, die divs sind.

140
00:07:48,260 --> 00:07:51,810
Also ja. Nur wählen divs, die diese ID haben.

141
00:07:51,810 --> 00:07:55,260
Für die Klasse verwenden Sie einfach einen Punkt, ist es das gleiche wie CSS.

142
00:07:55,260 --> 00:07:57,500
Nachkomme funktioniert auch, wenn Sie also etwas Klasse haben

143
00:07:57,500 --> 00:08:00,170
so zum Beispiel - und es hat Elemente darin verschachtelten

144
00:08:00,170 --> 00:08:03,260
es gibt einige Klasse und es hat eine Anker-Tag zu einer anderen Seite zu verknüpfen,

145
00:08:03,260 --> 00:08:08,510
Sie können diese Syntax verwenden, um den Link abzurufen.

146
00:08:08,510 --> 00:08:12,420
Sie können auch mehrere Dinge auf einmal, nur durch Kommas getrennt werden,

147
00:08:12,420 --> 00:08:17,360
verwenden keine Wähler die Sie möchten, und Sie werden alle von ihnen auf einmal auszuwählen, in einem einzigen Array.

148
00:08:17,360 --> 00:08:19,650
Und dann gibt es auch die Wähler nicht, so können Sie alle divs

149
00:08:19,650 --> 00:08:24,210
, die nicht über irgendeine bestimmte Klasse.

150
00:08:24,210 --> 00:08:28,790
Und das ist nur ein hilfreicher Weg, um eine Einführung, wie diese Auswahl funktioniert.

151
00:08:28,790 --> 00:08:32,270
Ich zeige einige konkrete Beispiele in einer Sekunde.

152
00:08:32,270 --> 00:08:35,480
>> Erweiterte Selektoren sind - dies sind nur einige Beispiele.

153
00:08:35,480 --> 00:08:38,840
Es gibt Dutzende von ihnen, aber wenn Sie wollen, um alle Image-Tags auswählen

154
00:08:38,840 --> 00:08:42,799
innerhalb ein Element, dann müssen Sie nur folgendes tun: Image.

155
00:08:42,799 --> 00:08:45,340
Wenn Sie die Elemente selbst wählen, zum Beispiel wollen, wenn es 20 von ihnen,

156
00:08:45,340 --> 00:08:48,290
Sie wollen auf 0, 2, 4, 6 und so weiter wählen,

157
00:08:48,290 --> 00:08:51,630
Sie tun: selbst, oder Sie können auch tun: odd.

158
00:08:51,630 --> 00:08:55,470
Das sind Pseudo-Selektoren, was bedeutet, dass sie tatsächlich berechnen

159
00:08:55,470 --> 00:09:00,960
jedes andere Element nicht nur gehen und Auswählen alle.

160
00:09:00,960 --> 00:09:05,510
Sie können auch - jedes Element kann auch Attribute.

161
00:09:05,510 --> 00:09:10,580
So, zum Beispiel, ist class = Zentrum auch ein Attribut.

162
00:09:10,580 --> 00:09:16,500
Aus diesem Anker-Tag, href, Hypertext-Referenz, ist ein Attribut auch.

163
00:09:16,500 --> 00:09:21,150
So können Sie etwas, dass Links auf eine bestimmte Seite oder einfach nur - es ist wirklich allgemein ist.

164
00:09:21,150 --> 00:09:25,410
Sie können alles mit einem Attribut, das Sie wählen möchten.

165
00:09:25,410 --> 00:09:27,470
Und dann auch, enthält Attribut.

166
00:09:27,470 --> 00:09:30,420
Wenn Sie, zum Beispiel, wollte alle input-Elemente wählen

167
00:09:30,420 --> 00:09:32,700
dass das Wort "Pass" als Name von ihnen,

168
00:09:32,700 --> 00:09:37,560
wenn eine Seite einen Eingang Textblock

169
00:09:37,560 --> 00:09:41,050
Das nennt man "vergessen", das eine Möglichkeit, dass wählen könnte würde.

170
00:09:41,050 --> 00:09:43,020
Und es gibt viele mehr. Sie können weiter gehen und schauen Sie sich in der Dokumentation

171
00:09:43,020 --> 00:09:46,950
und sehen konkrete Beispiele, wie es funktioniert.

172
00:09:46,950 --> 00:09:48,840
>> Die nächste Sache ist DOM-Manipulation.

173
00:09:48,840 --> 00:09:52,500
Nachdem wir Elemente auswählen, wollen wir tatsächlich tun Sachen mit ihnen.

174
00:09:52,500 --> 00:09:55,500
Bisher haben wir nicht, dass überhaupt sah, aber wenn man sich die Dokumentation,

175
00:09:55,500 --> 00:09:57,950
gibt es wirklich eine Menge, was wir tun konnten.

176
00:09:57,950 --> 00:10:02,900
An dieser Stelle werden wir Elemente auf dieser Präsentation wählen

177
00:10:02,900 --> 00:10:04,890
und manipulieren sie mit jQuery.

178
00:10:04,890 --> 00:10:08,290
Da dies umgesetzt mit jQuery, haben wir Zugang zu dem jQuery-Bibliothek,

179
00:10:08,290 --> 00:10:13,580
und wir können die Funktionen dieses Codes verwenden.

180
00:10:13,580 --> 00:10:16,200
Eine nützliche Sache, die Sie nicht über vielleicht wissen ist die Konsole.

181
00:10:16,200 --> 00:10:19,340
Und Google Chrome ist das, was ich verwende. Sie können die Taste alt Befehl J

182
00:10:19,340 --> 00:10:21,720
oder alt Kontrolle J um die Konsole öffnen.

183
00:10:21,720 --> 00:10:26,130
In Firefox Ich denke, es ist Befehl shift K oder Steuerschieberegister K.

184
00:10:26,130 --> 00:10:28,880
In Safari muss man gehen einige Einstellungen ändern.

185
00:10:28,880 --> 00:10:35,460
Es ist ein Link, wenn Sie möchten, es zu tun, aber ich empfehle immer Chrome oder Firefox.

186
00:10:35,460 --> 00:10:37,750
So öffnen wir die Konsole, ist es hier unten.

187
00:10:37,750 --> 00:10:41,170
Es ermöglicht Ihnen, im Grunde genau das zu tun, was Sie wollen.

188
00:10:41,170 --> 00:10:45,100
So können Sie einfach in eine Variable namens x geben,

189
00:10:45,100 --> 00:10:49,200
x = 5, mal sehen, was x + 2 ist.

190
00:10:49,200 --> 00:10:57,670
Sie können auch etwas tun, wie CS + Lassen Sie uns sehen, x + 45, das CS50 sein wird.

191
00:10:57,670 --> 00:11:00,530
Sie können nur tun, einige typische JavaScript Zeug.

192
00:11:00,530 --> 00:11:02,730
Aber man kann auch hier in jQuery.

193
00:11:02,730 --> 00:11:06,200
>> Lassen Sie uns also an diesem ersten Aspekt hier.

194
00:11:06,200 --> 00:11:09,500
Wir werden eine Variable namens HTML, die eine Zeichenfolge zu erstellen.

195
00:11:09,500 --> 00:11:15,890
Es hat einen Absatz-Tag in ihr, das ist ein paar neue Text genannt.

196
00:11:15,890 --> 00:11:19,420
Also haben wir diesen HTML haben, ist es einige neue Text, Absatz-Tags.

197
00:11:19,420 --> 00:11:21,800
Jetzt sind wir wirklich wollen, um es der Seite hinzuzufügen.

198
00:11:21,800 --> 00:11:28,310
Ich es so einrichten, dass der HTML-Code für dieses Absatzes dieser Titel hier anhängen ID ist.

199
00:11:28,310 --> 00:11:32,320
Wenn wir append ID und wählen Sie dann anhängen, um es

200
00:11:32,320 --> 00:11:34,560
die HTML-Variable I gerade erstellt haben,

201
00:11:34,560 --> 00:11:40,370
es wird, dass HTML am Ende hinzufügen, direkt nach diesem Absatz tag.

202
00:11:40,370 --> 00:11:43,730
Also, wenn wir das tun - wir empfehle dieses Absatzes

203
00:11:43,730 --> 00:11:47,590
und wir haben die append-Funktion mit dem HTML variable ich soeben genannt,

204
00:11:47,590 --> 00:11:50,960
wird es, dass neue Text genau dort auf der Seite hinzuzufügen.

205
00:11:50,960 --> 00:11:54,970
Wir können auch voranstellen, was bedeutet, dass es vor zu gehen, am Anfang dieses Elements.

206
00:11:54,970 --> 00:11:58,290
So gibt es einige neue Text am Anfang und danach.

207
00:11:58,290 --> 00:12:01,660
Ich kann gehen Sie vor und aktualisieren, um loszuwerden, diese Sachen, die ich gerade gemacht habe.

208
00:12:01,660 --> 00:12:05,280
Aber das ist ein Beispiel, wie Sie die prepend verwenden und Methoden anhängen

209
00:12:05,280 --> 00:12:08,910
Sachen auf der Seite zu manipulieren, fügen Sie einige HTML.

210
00:12:08,910 --> 00:12:11,080
>> Sie können auch Klassen.

211
00:12:11,080 --> 00:12:14,970
Zurück in diesem Stil-Datei, habe ich dies für den Sieg Klasse erstellt

212
00:12:14,970 --> 00:12:19,990
das hat Textfarbe rot, etwas Hintergrundfarbe und einen Text Schatten.

213
00:12:19,990 --> 00:12:23,810
Es sieht scheußlich, aber ich kann es tatsächlich -

214
00:12:23,810 --> 00:12:26,410
Dieser Absatz entspricht der Klasse ID.

215
00:12:26,410 --> 00:12:29,860
Also ich kann hinzufügen, die Klasse für den Sieg.

216
00:12:29,860 --> 00:12:31,870
Ich kann dies in der Konsole ausführen,

217
00:12:31,870 --> 00:12:35,480
und fügt diese Klasse, und jetzt sieht es so scheußlich, wie erwartet.

218
00:12:35,480 --> 00:12:39,680
Die CSS wird automatisch zu den Klassen, die Sie sich beworben -

219
00:12:39,680 --> 00:12:42,680
wenn es CSS für eine Klasse, es wird automatisch angelegt

220
00:12:42,680 --> 00:12:44,680
wenn Sie die Klasse eines Elements.

221
00:12:44,680 --> 00:12:49,230
Dann können wir einfach entfernen mit remove-Klasse.

222
00:12:49,230 --> 00:12:53,690
Also, wenn Sie einige vordefinierte Klassen wie rot oder hervorgehoben,

223
00:12:53,690 --> 00:12:55,990
und dann wollen Sie diejenigen Elemente gelten,

224
00:12:55,990 --> 00:12:58,230
Sie müssen nicht alle CSS Styling jedes Mal tun.

225
00:12:58,230 --> 00:13:01,510
Sie können fügen Sie einfach die Klasse auf ein Element, und dann wird es automatisch zu -

226
00:13:01,510 --> 00:13:05,580
es sucht automatisch für die entsprechende Klasse.

227
00:13:05,580 --> 00:13:07,900
Wir können auch Dinge zu entfernen, so werde ich alle divs wählen

228
00:13:07,900 --> 00:13:10,830
auf der Seite und entfernen Sie sie.

229
00:13:10,830 --> 00:13:13,990
Was soll das aussehen würde?

230
00:13:13,990 --> 00:13:16,170
Es wird wie nichts zu suchen, so gibt es eigentlich nichts mehr übrig.

231
00:13:16,170 --> 00:13:18,170
Meine Präsentation ist weg.

232
00:13:18,170 --> 00:13:21,290
Ich kann erfrischen und bringen sie zurück, zum Glück,

233
00:13:21,290 --> 00:13:24,420
weil es nur läuft einmal,

234
00:13:24,420 --> 00:13:29,460
aber das ist ein Beispiel für das Entfernen, wenn Sie vollständig zu zerstören ein Element aus der Seite wollen.

235
00:13:29,460 --> 00:13:33,180
>> Sie können auch überschreiben, und ich werde alle Absatz-Tags auf der Seite wählen

236
00:13:33,180 --> 00:13:36,850
und in ihnen zu gehen und zu ersetzen, was Text sie in ihnen haben

237
00:13:36,850 --> 00:13:39,690
nur mit dem Wort "Test".

238
00:13:39,690 --> 00:13:46,520
Wenn Sie dies tun, werden Sie jeden Absatz auf der Seite ersetzen mit diesem Test.

239
00:13:46,520 --> 00:13:49,150
Yep. Sie sind alle mit der Prüfung ersetzt.

240
00:13:49,150 --> 00:13:53,270
Also das ist ein Beispiel für den Zugriff auf den Text und überschreiben.

241
00:13:53,270 --> 00:13:57,490
Sie können auch Informationen abrufen, und das ist wirklich cool für Eingabefelder.

242
00:13:57,490 --> 00:14:00,470
Wenn Sie ein Eingabefeld tippen, dass die Menschen in Sachen,

243
00:14:00,470 --> 00:14:03,880
Menschen Eingabe Sachen hinein,

244
00:14:03,880 --> 00:14:09,030
Hier wählen wir den Eingang, einem input-Tag mit einer Art von Text.

245
00:14:09,030 --> 00:14:13,800
In diesem Fall gibt es nur ein Eingabefeld in der ganzen Präsentation

246
00:14:13,800 --> 00:14:17,260
so werden wir wählen Sie einfach die erste, und dann nennen wir die Val-Funktion auf sie.

247
00:14:17,260 --> 00:14:19,570
Das gibt den Wert, und für ein Eingabefeld,

248
00:14:19,570 --> 00:14:24,330
der Wert ist nur, was passiert mit drin sein.

249
00:14:24,330 --> 00:14:31,880
Also, wenn wir dies tun, es gibt nur die Zeichenfolge Zeug.

250
00:14:31,880 --> 00:14:36,860
Und wenn wir es wieder rufen nach dem Schreiben mehr Zeug, verwandelt es sich in mehr Zeug.

251
00:14:36,860 --> 00:14:40,760
Das ist ein guter Weg, um Elemente von einem Eingabefeld zuzugreifen, und dann zu überprüfen,

252
00:14:40,760 --> 00:14:45,060
dies ist eine gültige E-Mail-Adresse, ist dies ein gültiges Datum, zum Beispiel.

253
00:14:45,060 --> 00:14:49,600
Sie können einfach abgerufen werden Sachen sofort als Menschen Eingabe sind es,

254
00:14:49,600 --> 00:14:54,830
und dann prüfen, ob es gültig ist, schicken Sie es zurück an einen Server, zu tun, was Sie wollen mit ihm.

255
00:14:54,830 --> 00:14:57,720
Und das ist, wie Sie auf, was innerhalb dieser Boxen.

256
00:14:57,720 --> 00:15:00,090
>> Sie können auch CSS direkt ändern, so dass anstelle der Zugabe

257
00:15:00,090 --> 00:15:02,510
eine Klasse, die einige vordefinierte Eigenschaften aufweist,

258
00:15:02,510 --> 00:15:08,120
Sie kann nur hinzufügen, was CSS Sie etwas wollen.

259
00:15:08,120 --> 00:15:10,350
Also lassen Sie uns wählen Körper, der die gesamte Präsentation ist,

260
00:15:10,350 --> 00:15:14,370
und Farbe ist die Eigenschaft, die, was die Farben der Text definiert.

261
00:15:14,370 --> 00:15:19,420
Wenn wir es zu rot wechseln, wird der gesamte Text in der Seite, auf rot.

262
00:15:19,420 --> 00:15:26,310
Wir können so etwas wie Hintergrundfarbe blau zu tun,

263
00:15:26,310 --> 00:15:30,680
dort gehen wir, es ist schön.

264
00:15:30,680 --> 00:15:33,840
Sie können tun, was Sie wollen mit diesem.

265
00:15:33,840 --> 00:15:39,250
Mit dem CSS-Eigenschaft können Sie wirklich ändern, wie alles jederzeit aussieht.

266
00:15:39,250 --> 00:15:41,630
Das nächste, was ist Wirkung.

267
00:15:41,630 --> 00:15:45,710
Effekte sind im Grunde das gleiche wie Änderung der CSS,

268
00:15:45,710 --> 00:15:48,870
sondern sie tatsächlich etwas mehr Animation dazu.

269
00:15:48,870 --> 00:15:53,380
Anstatt also nur zeigen, oder etwas zu verbergen oder das Ändern der Farbe,

270
00:15:53,380 --> 00:15:56,130
Sie können tatsächlich machen es animiert.

271
00:15:56,130 --> 00:16:00,760
Hier ist die Dokumentation, wenn Sie einen Blick auf die umfangreiche Dokumentation für sie nehmen wollen.

272
00:16:00,760 --> 00:16:04,760
Aber ich werde die wichtigsten sind abzudecken.

273
00:16:04,760 --> 00:16:12,030
Es sind die ein-und ausblenden Eigenschaften.

274
00:16:12,030 --> 00:16:14,510
Anzeigen / ausblenden ID entspricht eigentlich diese ganze Feld

275
00:16:14,510 --> 00:16:18,190
also, wenn ich es zu verbergen, wird es einfach verschwinden.

276
00:16:18,190 --> 00:16:24,210
Und ich kann es wieder zu zeigen, wenn ich es wieder kommen wollen.

277
00:16:24,210 --> 00:16:26,340
Und es ist wieder da. Es hat nicht wirklich verschwinden,

278
00:16:26,340 --> 00:16:30,670
Ich habe nicht wirklich entfernen Sie sie aus der Seite, habe ich einfach die CSS-Eigenschaft der Sichtbarkeit, um versteckte

279
00:16:30,670 --> 00:16:34,030
so kann man es nicht mehr sehen.

280
00:16:34,030 --> 00:16:39,250
Es ist auch nach oben und nach unten rutschen, mit denen Sie diese Wirkung haben können.

281
00:16:39,250 --> 00:16:47,050
Es gleitet bis zu verschwinden, und nachdem es verschwindet

282
00:16:47,050 --> 00:16:53,210
Sie können nach unten schieben, um sie zurück zu kommen. Und jetzt ist es wieder da.

283
00:16:53,210 --> 00:16:57,650
Es gibt auch diese Fade-Effekt, der - Fade ID entspricht dieser Box.

284
00:16:57,650 --> 00:17:01,200
Wenn ich es ausblenden, dann wird es langsam verschwinden.

285
00:17:01,200 --> 00:17:04,490
Ich kann auch verblassen sie in, und es wird wieder kommen.

286
00:17:04,490 --> 00:17:08,930
Sie können auch fade to, was ist spezifisch für die Fade-Funktion.

287
00:17:08,930 --> 00:17:12,589
Man kann es auf eine bestimmte Deckkraft, die Sie verblassen.

288
00:17:12,589 --> 00:17:16,869
Also, wenn Sie es verblassen langsam auf 0,5, wird es sich zur Hälfte sichtbar.

289
00:17:16,869 --> 00:17:22,630
Ich kann es auf 0,1 zu gehen, und auf 1 zurück, um es vollständig wieder sichtbar.

290
00:17:22,630 --> 00:17:24,760
Das ist nur eine weitere Animation, die Sie tun können.

291
00:17:24,760 --> 00:17:26,750
>> Es gibt auch die Toggle-Effekte.

292
00:17:26,750 --> 00:17:33,410
So werde ich das Toggle-ID, die zu dieser Box entspricht, zu wählen,

293
00:17:33,410 --> 00:17:38,970
und an diesem div rufen Sie Toggle, wenn es sichtbar ist wird es unsichtbar,

294
00:17:38,970 --> 00:17:42,320
wenn es unsichtbar ist es wieder sichtbar.

295
00:17:42,320 --> 00:17:44,440
Also habe ich einfach nannte diese Toggle-Funktion zweimal, das erste war

296
00:17:44,440 --> 00:17:48,380
dasselbe wie Fell, war der zweite Anruf das gleiche wie eine Show.

297
00:17:48,380 --> 00:17:53,510
Und Sie können dies auch mit einem Fade-Toggle,

298
00:17:53,510 --> 00:17:55,730
was macht das gleiche, außer dass es tatsächlich verblasst.

299
00:17:55,730 --> 00:17:59,410
Und dasselbe mit dem Schlitten zu wechseln.

300
00:17:59,410 --> 00:18:01,460
Es gibt angekettet Effekte sowie, was bedeutet,

301
00:18:01,460 --> 00:18:05,520
Wenn Sie ein Element auswählen und rufen eine Reihe von Animations-Methoden darauf

302
00:18:05,520 --> 00:18:07,400
wenn Sie es zu verblassen wollte, dann nach unten rutschen,

303
00:18:07,400 --> 00:18:11,040
und dann verstecken und dann verblassen in, wird es ihnen in einer Reihe zu tun.

304
00:18:11,040 --> 00:18:24,920
So verschwand, kam zurück - aus irgendeinem Grund, die Haut ist nicht geschehen.

305
00:18:24,920 --> 00:18:30,030
Probieren wir es aus. Ja, so ist es ausgeblendet und dann glitt.

306
00:18:30,030 --> 00:18:32,230
Und es gibt viel mehr. Sie können die Funktion animieren

307
00:18:32,230 --> 00:18:35,370
eigene Animationen zu erstellen, ist die ziemlich komplex,

308
00:18:35,370 --> 00:18:38,790
aber es bietet Ihnen unendliche Erweiterbarkeit.

309
00:18:38,790 --> 00:18:40,630
Sie können jede Art von Animation, die Sie wollen.

310
00:18:40,630 --> 00:18:44,230
Sie können auch die Warteschlange in die Warteschlange mehrere Animationen zu einem Zeitpunkt.

311
00:18:44,230 --> 00:18:47,340
Also, wenn Sie etwas über die Seite fliegen,

312
00:18:47,340 --> 00:18:49,860
Rutsche von oben rechts nach unten links, können Sie das tun,

313
00:18:49,860 --> 00:18:55,240
und nur noch ein Bündel von Maßnahmen gehen einer nach dem anderen.

314
00:18:55,240 --> 00:18:57,490
>> Das nächste, was wir reden gerade ist Veranstaltungen.

315
00:18:57,490 --> 00:19:02,090
Events können Sie - so weit, wir haben gerade Eingabe Dinge in der Konsole

316
00:19:02,090 --> 00:19:04,870
und das ist ein Weg, um dies zu ermöglichen,

317
00:19:04,870 --> 00:19:08,020
aber auf eine tatsächliche Seite, du bist nicht in der Lage sein, um

318
00:19:08,020 --> 00:19:10,020
machen die Benutzer Art Dinge in die Konsole.

319
00:19:10,020 --> 00:19:12,050
Sie wollen die Dinge automatisch passieren.

320
00:19:12,050 --> 00:19:18,060
Dafür müssen Sie auf einige Ereignisse, die bestimmten Ereignis passiert aktivieren verwenden.

321
00:19:18,060 --> 00:19:21,340
Sie können die Dokumentation zu den Details.

322
00:19:21,340 --> 00:19:24,030
Also mal sehen. Wir wollen ein-oder ausblenden das Kontrollkästchen,

323
00:19:24,030 --> 00:19:29,340
aber jetzt diese Taste nicht tun, weil ich es nicht umsetzen es noch nicht.

324
00:19:29,340 --> 00:19:35,420
Ich werde dem eigentlichen HTML-Seite zu gehen.

325
00:19:35,420 --> 00:19:38,560
Hier ist die Rutsche. Es ist ein div für den Schlitten.

326
00:19:38,560 --> 00:19:41,230
Es hat die Klasse der Rutsche.

327
00:19:41,230 --> 00:19:46,890
Da ist der Text. Jetzt gibt es diese Box und die Box-Taste.

328
00:19:46,890 --> 00:19:52,900
Wie würden wir eigentlich machen diese verschwinden?

329
00:19:52,900 --> 00:19:58,250
Zunächst schreiben wir eine Funktion, die die Box ID verschwinden lässt.

330
00:19:58,250 --> 00:20:01,820
Dies ist die Syntax für funtion, lass uns einfach nennen es hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Es spielt keine Argumente, denn es gibt keine Argumente zu treffen sind.

332
00:20:06,130 --> 00:20:08,950
Wir können die Box-ID.

333
00:20:08,950 --> 00:20:15,020
Also mit dem jQuery wählen, können wir wählen box ID,

334
00:20:15,020 --> 00:20:17,700
und dann einfach verschwinden lassen.

335
00:20:17,700 --> 00:20:20,690
Machen wir es fade out.

336
00:20:20,690 --> 00:20:27,390
Wenn wir rannten diese Funktion in der aktuellen Konsole

337
00:20:27,390 --> 00:20:33,380
konnten wir definieren diese Funktion, können wir hideTheBox nennen, und es funktioniert.

338
00:20:33,380 --> 00:20:36,650
Aber wir wollen, dass es passiert, wenn die Taste tatsächlich gedrückt wird.

339
00:20:36,650 --> 00:20:40,950
Um das zu tun, müssen wir eine Veranstaltung nutzen.

340
00:20:40,950 --> 00:20:45,500
Um ein Ereignis zu einem gewissen bestimmten Taste oder eine Aktion Geschehen zu binden,

341
00:20:45,500 --> 00:20:50,040
müssen wir das Element, das das Ereignis auslöst wählen -

342
00:20:50,040 --> 00:20:52,650
oder dass wird das Ereignis auslösen, sorry.

343
00:20:52,650 --> 00:20:57,220
>> Also zunächst einmal, lassen Sie das Kontrollkästchen Schaltfläche ID

344
00:20:57,220 --> 00:20:59,610
denn das ist die Taste, und jetzt, für diese Schaltfläche,

345
00:20:59,610 --> 00:21:02,750
Wir wollen, um eine Animation zu erstellen, wenn es angeklickt wird.

346
00:21:02,750 --> 00:21:05,040
So gibt es diese Klick-Funktion.

347
00:21:05,040 --> 00:21:08,470
Es ermöglicht Ihnen, eine andere Funktion, um es zu binden.

348
00:21:08,470 --> 00:21:12,320
Diese Funktion übernimmt eine andere Funktion als Argument

349
00:21:12,320 --> 00:21:14,310
können wir in der hideTheBox Funktion übergeben,

350
00:21:14,310 --> 00:21:20,950
und wenn diese Taste angeklickt wird, wird diese Funktion automatisch ausgeführt werden.

351
00:21:20,950 --> 00:21:24,850
So wird dies funktionieren, wenn wir diese zu retten, werde ich aktualisieren,

352
00:21:24,850 --> 00:21:33,460
und - eine einzige Sekunde, tut mir leid.

353
00:21:33,460 --> 00:21:44,770
Let me fix dies wirklich schnell.

354
00:21:44,770 --> 00:21:50,680
Ok. Dort gehen wir. So, jetzt ist die Box verschwinden, wenn wir auf die Schaltfläche klicken.

355
00:21:50,680 --> 00:21:55,470
Wir können auch diese nur fadeToggle,

356
00:21:55,470 --> 00:22:00,020
ändern sie nur zu verstecken oder zu zeigen das Feld

357
00:22:00,020 --> 00:22:03,850
und dies wird auch zu arbeiten, wenn wir aktualisieren.

358
00:22:03,850 --> 00:22:08,550
Wir können es zu verbergen, können wir auch zeigen, und dass wird auch weiterhin funktionieren.

359
00:22:08,550 --> 00:22:12,210
Eine andere Sache, die wir tun können, ist, wissen wir eigentlich nicht haben, um diese Funktion zu definieren hideTheBox

360
00:22:12,210 --> 00:22:15,050
bevor wir rufen Sie die Klick-Funktion.

361
00:22:15,050 --> 00:22:17,640
Also statt der Definition der Funktion und Aufruf hideTheBox,

362
00:22:17,640 --> 00:22:20,310
wir nur gehen, um es nennen, wenn dieses Ding geklickt wird.

363
00:22:20,310 --> 00:22:22,310
So können wir definieren sie anonym in hier,

364
00:22:22,310 --> 00:22:25,070
Das ist ein Feature, dass JavaScript muss.

365
00:22:25,070 --> 00:22:29,720
Sie können eine Funktion definieren, in der Regel, würden wir sagen Funktion hideTheBox

366
00:22:29,720 --> 00:22:34,490
mit Argumenten, sondern können wir nur sagen, funktionieren keine Argumente,

367
00:22:34,490 --> 00:22:36,870
starten Sie die geschweiften Klammern, um die Funktion zu definieren,

368
00:22:36,870 --> 00:22:40,780
schließen, dass die geschweiften Klammern, und dann einfach definieren die Funktion hier,

369
00:22:40,780 --> 00:22:45,130
innerhalb der ersten Klammer und der letzten Klammer

370
00:22:45,130 --> 00:22:47,860
das auf die Argumente der Klick-Funktion entsprechen.

371
00:22:47,860 --> 00:22:53,320
Also haben wir in dieser Funktion auf den Weg gegeben, können wir diese Codezeile hier kopieren,

372
00:22:53,320 --> 00:22:55,450
und das wird tun genau dasselbe.

373
00:22:55,450 --> 00:22:57,290
Und jetzt haben wir nicht über diese zufällige fadeTheBox Funktion

374
00:22:57,290 --> 00:22:59,960
das ist herumsitzen ohne ersichtlichen Grund.

375
00:22:59,960 --> 00:23:02,070
Die Funktion definiert wurde, anonym, es nicht einen Namen haben.

376
00:23:02,070 --> 00:23:08,060
Es wird nur dann ausgeführt, wenn wir auf das Feld klicken.

377
00:23:08,060 --> 00:23:12,180
So erfrischend noch einmal, noch einmal, und Sie können sehen, dass es noch funktioniert.

378
00:23:12,180 --> 00:23:16,700
Und das ist, wie Sie Ereignisse erstellen.

379
00:23:16,700 --> 00:23:19,190
>> Es gibt eine Menge von verschiedenen Veranstaltungen, die wir verwenden können.

380
00:23:19,190 --> 00:23:23,540
Ich werde wieder auf die Konsole verwenden, um nur zeigen Ihnen, wie diese funktionieren.

381
00:23:23,540 --> 00:23:28,210
Die IDs für jede dieser zu jeder Box entsprechen.

382
00:23:28,210 --> 00:23:33,020
Also diese Box ist auf ID, das ist eine Schlüssel-ID, und dieses ist Maus ID.

383
00:23:33,020 --> 00:23:36,120
Eine weitere Sache ist, dass es diese Aktion Funktion, sondern als Eingabe es jedes Mal,

384
00:23:36,120 --> 00:23:41,610
Ich ging voran und definiert diese Aktion Funktion hier unten.

385
00:23:41,610 --> 00:23:46,860
Es macht das Gleiche wie die hideTheBox Funktion.

386
00:23:46,860 --> 00:23:51,340
Es wird dieses Feld und entweder blendet es aus oder blendet es in.

387
00:23:51,340 --> 00:23:54,110
Und das ist, warum wir in der Lage, um es hier zu verwenden sind.

388
00:23:54,110 --> 00:24:00,350
Also, wenn wir auf diesen auf ID, wollen wir darüber hinaus die Box verschwinden oder wieder auftauchen.

389
00:24:00,350 --> 00:24:03,610
Es ist die gleiche Sache wie die Schaltfläche, die wir in der letzten Folie hatte.

390
00:24:03,610 --> 00:24:07,450
Jetzt, nachdem wir so nennen, können wir auf diese klicken und die Box wird verschwinden,

391
00:24:07,450 --> 00:24:10,160
dann klicken Sie erneut und die Box wird erneut angezeigt.

392
00:24:10,160 --> 00:24:12,480
Das ist ziemlich einfach. Klicken Sie doppelt auf dasselbe tut,

393
00:24:12,480 --> 00:24:15,660
außer es erfordert ein Doppelklick.

394
00:24:15,660 --> 00:24:19,030
Also, wenn Sie einmal darauf klicken und klicken Sie wieder nichts passieren wird,

395
00:24:19,030 --> 00:24:21,140
aber wenn man schnell doppelt klicken, werden sie verschwinden.

396
00:24:21,140 --> 00:24:23,310
Wenn Sie wieder doppelt klicken, wird es wieder kommen.

397
00:24:23,310 --> 00:24:25,250
Also das ist ziemlich einfach.

398
00:24:25,250 --> 00:24:31,170
Tastatureingabe ist irgendwie komisch, ich glaube nicht, dass es tatsächlich funktioniert in diesem Beispiel

399
00:24:31,170 --> 00:24:37,670
weil die Taste gedrückt, Taste und Taste drücken und andere wichtige Maßnahmen

400
00:24:37,670 --> 00:24:47,190
aktivieren, egal was Sie es Element binden.

401
00:24:47,190 --> 00:24:51,410
Zum Beispiel, auch wenn ich gebunden Taste gedrückt, um Körper oder etwas komplett anderes,

402
00:24:51,410 --> 00:24:55,950
dann wäre es noch aktivieren, egal - es ist nicht spezifisch.

403
00:24:55,950 --> 00:25:00,190
Ich habe nicht auf diese werden Sie und eine Taste drücken, um alles verschwinden.

404
00:25:00,190 --> 00:25:04,470
Es wäre unabhängig davon, was Element Ich bin zurzeit in. aktiviert werden

405
00:25:04,470 --> 00:25:06,880
Also diese eigentlich gar nicht in diesem Beispiel arbeiten

406
00:25:06,880 --> 00:25:13,180
weil es erkennt mich nicht als Eingabe Eingabe in die Tastatur eingegeben div.

407
00:25:13,180 --> 00:25:15,740
>> Aber wenn man sich die Aktionen mit der Maus,

408
00:25:15,740 --> 00:25:19,620
Die erste ist, schweben, und es kann einige dies mit CSS zu tun.

409
00:25:19,620 --> 00:25:24,280
Wenn Sie CSS verwenden, können Sie es so, dass zu erstellen, wenn Sie über etwas schweben,

410
00:25:24,280 --> 00:25:28,940
dann seinen Stil ändert.

411
00:25:28,940 --> 00:25:32,170
Aber der Einsatz von jQuery können Sie die Stile der anderen Dinge auch ändern.

412
00:25:32,170 --> 00:25:37,120
So, zum Beispiel, werden wir zum Handeln aufrufen, wenn wir über diese div schweben.

413
00:25:37,120 --> 00:25:39,660
Das heißt, wenn wir über sie schweben, dann ist die Box verschwindet.

414
00:25:39,660 --> 00:25:42,430
Wenn wir von ihm weg bewegen, wird die Box wieder.

415
00:25:42,430 --> 00:25:45,090
Wenn wir diese und rufen Sie den Mauszeiger darüber, wird die Box verschwinden,

416
00:25:45,090 --> 00:25:47,050
und sobald wir weg zu bewegen, kommt es zurück.

417
00:25:47,050 --> 00:25:49,750
Wenn wir diese Funktion aufrufen hover auf der Maus-ID,

418
00:25:49,750 --> 00:25:54,380
das entspricht dieser Box, dann, wenn wir mit der Maus über das Feld,

419
00:25:54,380 --> 00:26:00,440
dann wird die Box tatsächlich verschwinden - es ist flippig gerade jetzt, aber -

420
00:26:00,440 --> 00:26:06,310
wenn wir von ihr weg bewegen, wird es wieder. Gerade jetzt ist es rückwärts aus irgendeinem Grund.

421
00:26:06,310 --> 00:26:12,720
Die Maus eingeben und Maus bewegen Funktionen sind ähnlich, aber etwas anders.

422
00:26:12,720 --> 00:26:16,470
Maus geben Sie nur aktiviert, wenn die Maus in das Feld, wie erwartet.

423
00:26:16,470 --> 00:26:19,210
Also, wenn Sie sich bewegen in sie, wird es verschwinden.

424
00:26:19,210 --> 00:26:23,210
Aber es wird nicht wieder angezeigt, wenn Sie weg, du wirst haben sich zu bewegen wieder auf, damit sie ihn wieder.

425
00:26:23,210 --> 00:26:25,590
Es gibt auch die Mausbewegung Funktion, die aktiviert

426
00:26:25,590 --> 00:26:29,300
wenn die Maus ist noch in der Box.

427
00:26:29,300 --> 00:26:32,430
Also, es wird einfach weiter, und Ausblenden.

428
00:26:32,430 --> 00:26:35,660
Und es ist tatsächlich Protokollierung - es scheint, wie es nur geht und Ausblenden,

429
00:26:35,660 --> 00:26:39,140
aber es ist tatsächlich Protokollierung viel mehr Aktionen als diese,

430
00:26:39,140 --> 00:26:43,550
so, wenn Sie weg bewegen, es wird einfach weiter, weil es wie ein tausend von ihnen angemeldet.

431
00:26:43,550 --> 00:26:46,620
Vielleicht nicht tausend. Vielleicht fünf.

432
00:26:46,620 --> 00:26:50,200
Es protokolliert mehr.

433
00:26:50,200 --> 00:26:53,280
Der Punkt ist, alle Aktionen mit der Maus, es gibt eine Menge von ihnen.

434
00:26:53,280 --> 00:26:55,480
Sie können lesen, auf die anderen, aber sie sind alle etwas anders,

435
00:26:55,480 --> 00:26:57,700
und Sie können wählen, je nachdem, welche Sie brauchen

436
00:26:57,700 --> 00:27:02,130
aus welchen speziellen Zweck Sie zu tun versuchen.

437
00:27:02,130 --> 00:27:05,060
>> Das nächste, was ich zu erzählen habe, ist AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, ich weiß, wir haben nicht decken JavaScript in so viel Tiefe in diesem Jahr,

439
00:27:09,340 --> 00:27:11,770
so ich werde einfach über AJAX im allgemeinen für eine Minute sprechen.

440
00:27:11,770 --> 00:27:15,210
AJAX steht für Asynchronous JavaScript and XML.

441
00:27:15,210 --> 00:27:19,030
Es ist im Grunde, zum Beispiel, wenn Sie auf Facebook sind und es drückt Sie eine Benachrichtigung,

442
00:27:19,030 --> 00:27:23,060
das ist, weil AJAX auf Ihrem Web-Browser ausgeführt wird.

443
00:27:23,060 --> 00:27:25,800
Alle paar Sekunden wird Ihr Web-Browser ist eigentlich

444
00:27:25,800 --> 00:27:29,420
gehen zu den Servern von Facebook und bat sie, hast du nichts Neues für mich,

445
00:27:29,420 --> 00:27:31,980
und dann kommt es zu dir zurück.

446
00:27:31,980 --> 00:27:36,320
Dies ermöglicht Ihnen, Anfragen an einen Server zu senden

447
00:27:36,320 --> 00:27:38,660
ohne tatsächlich um die Seite zu laden.

448
00:27:38,660 --> 00:27:42,040
Also normalerweise, wenn Sie gerade mit PHP und eine Datenbank,

449
00:27:42,040 --> 00:27:45,480
Sie haben, um die Seite zu aktualisieren, bevor Sie neue Informationen vom Server erhalten können.

450
00:27:45,480 --> 00:27:48,770
Aber der Einsatz von AJAX, können Sie für diese neuen Informationen ständig zu ziehen,

451
00:27:48,770 --> 00:27:52,250
oder für sie zu ziehen, wenn Sie eine Taste oder so etwas klicken.

452
00:27:52,250 --> 00:27:56,140
So ermöglicht es uns, Anfragen ohne Neuladen der Seite zu schicken,

453
00:27:56,140 --> 00:27:58,130
und wir können entweder GET oder POST-Requests.

454
00:27:58,130 --> 00:28:05,370
>> GET-Anforderungen sind, zum Beispiel, wenn Sie auf Google.com

455
00:28:05,370 --> 00:28:10,900
tun und q = test. Das ist ihnen eine Abfrage zu testen.

456
00:28:10,900 --> 00:28:15,890
Und das ist eine GET-Anfrage, weil es in diesen Parametern ist vorbei in die URL selbst.

457
00:28:15,890 --> 00:28:19,250
Eine POST-Anforderung ist, als ob man sie ihnen sind per Post.

458
00:28:19,250 --> 00:28:22,500
Es ist wie man es in einem Brief und versenden Sie sie zu ihnen:

459
00:28:22,500 --> 00:28:25,140
aber sie wissen nicht wirklich sehen Sie den Inhalt. Sie sind nicht in der URL sichtbar.

460
00:28:25,140 --> 00:28:31,040
Sie können nicht direkt geben Sie es in, man muss es fast heimlich zu senden.

461
00:28:31,040 --> 00:28:33,880
Es ist in einem Post.

462
00:28:33,880 --> 00:28:38,660
Aber der Einsatz von jQuery, können Sie GET und POST-Requests

463
00:28:38,660 --> 00:28:42,740
viel leichter, als Sie normalerweise verwenden könnte einfach nur JavaScript.

464
00:28:42,740 --> 00:28:50,140
Sie können abfragen APIs mit GET-Anforderungen, und Sie können auch für die Login-Daten zu überprüfen.

465
00:28:50,140 --> 00:28:54,400
Auf der nächsten Seite, habe ich diese, die fragt: "Was ist für das Mittagessen?"

466
00:28:54,400 --> 00:28:58,230
mit der Harvard Lebensmittel API, so dass wir anhalten.

467
00:28:58,230 --> 00:29:01,840
Dies ist nur ein Beispiel, wie Sie mit jQuery, um eine GET-Anfrage an eine API zu tun

468
00:29:01,840 --> 00:29:04,200
und erhalten Informationen von ihr zurück.

469
00:29:04,200 --> 00:29:07,090
So wollen wir das Menü für heute sehen,

470
00:29:07,090 --> 00:29:10,560
und wir wollen sehen, was es zum Mittagessen gibt.

471
00:29:10,560 --> 00:29:16,500
Hier ist die URL einer GET-Anforderung in jQuery erstellen.

472
00:29:16,500 --> 00:29:18,600
Sie verwenden die $. get-Funktion.

473
00:29:18,600 --> 00:29:22,290
Das erste Argument ist der URL, so genau, was Sie Abfragen.

474
00:29:22,290 --> 00:29:27,200
Dann wird das nächste Argument eine Funktion, wenn die GET-Anforderung abgeschlossen ist ausführt.

475
00:29:27,200 --> 00:29:29,980
So abzuschicken einige Anforderung an den Server, warten, bis es wieder zu kommen.

476
00:29:29,980 --> 00:29:33,770
Wenn es nicht wieder kommen, wirst du eine Aktion mit den Daten, zurück ist vom Server zu nehmen.

477
00:29:33,770 --> 00:29:37,520
Lassen Sie uns fortfahren und codieren diese als gut.

478
00:29:37,520 --> 00:29:42,110
Ich wusste nicht codieren diese entweder auf Zweck.

479
00:29:42,110 --> 00:29:46,660
Hier ist die TODO. Zunächst einmal verwenden wir die Veranstaltung verbindlich

480
00:29:46,660 --> 00:29:50,820
so dass, wenn diese Taste gedrückt wird, senden wir weg von einer GET-Anfrage.

481
00:29:50,820 --> 00:29:53,410
Und wenn die Anfrage GET kehrt mit einigen Daten,

482
00:29:53,410 --> 00:29:57,290
werden wir es in dieser Mahlzeit info ID div schreiben.

483
00:29:57,290 --> 00:30:02,860
Zunächst wählen wir die Lebensmittel-Taste ID.

484
00:30:02,860 --> 00:30:07,320
Wenn darauf geklickt hat, wollen wir es etwas zu tun.

485
00:30:07,320 --> 00:30:11,930
Lassen Sie uns nur machen es eine anonyme fuction, wie zuvor.

486
00:30:11,930 --> 00:30:15,550
Kann diese geschweiften Klammern wickeln,

487
00:30:15,550 --> 00:30:18,530
und wenn diese Taste gedrückt wird, wollen wir eine GET Anfrage senden

488
00:30:18,530 --> 00:30:20,750
zu überprüfen, was es zum Mittagessen gibt.

489
00:30:20,750 --> 00:30:24,970
Um dies zu tun, können wir nur in $ geben. Bekommen.

490
00:30:24,970 --> 00:30:28,850
Dies ist ein jQuery-Funktion, mit der Dollar-Zeichen.

491
00:30:28,850 --> 00:30:31,430
Es dauert ein paar Argumente. Die erste ist die URL,

492
00:30:31,430 --> 00:30:34,450
die zweite ist die Callback-Funktion, die Funktion, die nennt sich

493
00:30:34,450 --> 00:30:37,740
wenn dieser Antrag tatsächlich zurückkehrt.

494
00:30:37,740 --> 00:30:39,890
Lassen Sie uns gerade beim Aufbau der ersten URL.

495
00:30:39,890 --> 00:30:44,650
Wir können es von der API bekommen, dass David sich schrieb.

496
00:30:44,650 --> 00:30:51,360
Gehen Sie hier, können wir sehen, dass es food.cs50.net/api/1.3/menus ist,

497
00:30:51,360 --> 00:30:54,140
und dann müssen Sie nur in den Namen der Parameter, die Sie gerne weitergeben.

498
00:30:54,140 --> 00:30:57,760
So Parameter 1 Wert 1 an.

499
00:30:57,760 --> 00:31:00,910
Es sieht aus wie Standard-Datum, Start-Datum, standardmäßig heute

500
00:31:00,910 --> 00:31:03,110
Wenn Sie nichts eingeben, und das Enddatum auch Standardwerte

501
00:31:03,910 --> 00:31:05,930
bis heute, wenn Sie nichts eintragen.

502
00:31:05,930 --> 00:31:10,790
Das ist, was wir wollen. Wir wollen nur die Informationen bekommen, für heute.

503
00:31:10,790 --> 00:31:12,950
>> Wir wollen das Format in JSON sein.

504
00:31:12,950 --> 00:31:15,570
Das ist nur willkürlich, können Sie jede Form, die Sie wollen.

505
00:31:15,570 --> 00:31:18,950
Sie können CSV, JSON, aber ist JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
Es ist sehr einfach für Sie JavaScript, um zu verstehen, was es bedeutet,

507
00:31:24,150 --> 00:31:27,110
und wir können es ausdrucken leichter auf diese Weise.

508
00:31:27,110 --> 00:31:30,490
Also lasst es bitte in JSON, und lasst uns Anfrage Mittagessen.

509
00:31:30,490 --> 00:31:37,660
So Mahlzeit = Mittagessen. Einfach zu schreiben, dass die URL, gehen wir wieder hier.

510
00:31:37,660 --> 00:31:41,290
Es gibt Menüs. Der erste Parameter ist output = JSON

511
00:31:41,290 --> 00:31:44,640
denn das ist, was wir wollen, und trennen Sie die Parameter mit einem "und".

512
00:31:44,640 --> 00:31:48,940
Der zweite Parameter ist - ich kann mich nicht erinnern.

513
00:31:48,940 --> 00:31:52,170
Mahlzeit. Und wir wollen Mahlzeit = Mittagessen.

514
00:31:52,170 --> 00:31:57,390
Sie können diese URL, indem Sie es in Ihren Browser und gehen, um es zu testen.

515
00:31:57,390 --> 00:32:03,120
Es wird Ihnen eine Ausgabe. Es ist nur ein paar Sachen, die für das Mittagessen ist.

516
00:32:03,120 --> 00:32:10,410
Es ist in diesem hässlichen Format. Wir wollen es auf unsere Seite ausdrucken in einem besseren Format.

517
00:32:10,410 --> 00:32:12,580
Also die URL richtig ist, jetzt müssen wir nur noch eine Funktion schreiben

518
00:32:12,580 --> 00:32:18,300
zu rufen zurück, wenn der Antrag erfolgreich ist.

519
00:32:18,300 --> 00:32:20,430
Diese Funktion wird tatsächlich ein Argument. Es werden Daten.

520
00:32:20,430 --> 00:32:25,650
Die Daten sind, was kommt zurück von der GET-Anfrage nach der GET-Anforderung ist getan.

521
00:32:25,650 --> 00:32:28,860
Wir können die geschweiften Klammern, hier schreiben wir die anonyme Funktion

522
00:32:28,860 --> 00:32:33,900
das führt, mit, dass die Daten, wenn wir die Informationen wieder zu bekommen.

523
00:32:33,900 --> 00:32:37,840
Also Daten, wenn wir in dieser URL eingegeben haben,

524
00:32:37,840 --> 00:32:41,540
das ist, was die Daten geht aussehen. Es geht um diese riesige Zeichenfolge sein.

525
00:32:41,540 --> 00:32:48,610
Aber die gute Sache ist, kann es mit JavaScript die JSON.parse Funktion zu analysieren.

526
00:32:48,610 --> 00:32:54,950
So erstellen wir eine neue Variable namens parse Daten.

527
00:32:54,950 --> 00:32:57,060
Und parse Daten ist ein Array von Objekten.

528
00:32:57,060 --> 00:33:04,200
Jedes Objekt enthält Informationen wie - na ja, lassen Sie uns einen Blick.

529
00:33:04,200 --> 00:33:08,980
Es verfügt über ein Datum, eine Mahlzeit, Kategorie, Rezept, all das andere Zeug.

530
00:33:08,980 --> 00:33:10,860
Also lasst uns einfach drucken Sie den Namen für jeden einzelnen.

531
00:33:10,860 --> 00:33:13,790
Lassen Sie durchlaufen die ganze Reihe von Sachen, die wir bekommen von ihr zurück,

532
00:33:13,790 --> 00:33:17,570
und einfach ausdrucken jeden - drucken Sie die Namen jedes einzelnen.

533
00:33:17,570 --> 00:33:22,670
Dies ist eine for-Schleife.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript muss dies hilfreich Syntax, wo Sie eine Variable und eine Schleife über ein Array erstellen,

535
00:33:26,030 --> 00:33:30,150
und var i ist nur der Iterator, so anstatt var i = 0 do,

536
00:33:30,150 --> 00:33:40,290
Ich war weniger als die Länge, i + +, können Sie einfach tun var i in analysierten Daten.

537
00:33:40,290 --> 00:33:47,060
In diesem Beispiel wird geparsten Daten (i) an das aktuelle Element entsprechen

538
00:33:47,060 --> 00:33:49,850
der Anordnung, die tatsächliche Objekt.

539
00:33:49,850 --> 00:33:51,720
Und wir wollen den Namen aus ihm heraus.

540
00:33:51,720 --> 00:33:54,170
Also lasst uns einfach tun Namen.

541
00:33:54,170 --> 00:33:57,000
Und die letzte Sache ist, werden wir einige jQuery wieder haben.

542
00:33:57,000 --> 00:34:02,660
Eigentlich fügen Sie sie der div, diese Mahlzeit info div, die momentan leer.

543
00:34:02,660 --> 00:34:05,430
Also lassen Sie uns wählen, dass.

544
00:34:05,430 --> 00:34:13,870
Wir jQuery und wählen Mahlzeit info div ID, oder eine Mahlzeit info ID verwenden, sorry.

545
00:34:13,870 --> 00:34:16,580
Wir wollen dies anzuhängen.

546
00:34:16,580 --> 00:34:21,030
Wenn wir abgeschnitten haben, zum Beispiel, wäre es einfach überschreiben jede einzelne Zeit.

547
00:34:21,030 --> 00:34:29,190
So können wir nur diese anhängen.

548
00:34:29,190 --> 00:34:31,889
Das aktuelle Element in dem Array, dann bekommen wir den Namen aus ihm heraus,

549
00:34:31,889 --> 00:34:38,159
und wir werden es bis zum Ende der Mahlzeit info ID div anzuhängen.

550
00:34:38,159 --> 00:34:40,120
Und dann, nur um es so aussehen sauberer,

551
00:34:40,120 --> 00:34:51,550
wir auch anhängen einen Zeilenumbruch so ist es nicht alle auf einer Linie.

552
00:34:51,550 --> 00:34:55,280
Also, wenn alles gut geht, sollte das gut sein -

553
00:34:55,280 --> 00:34:57,220
vor allem, wenn diese Taste angeklickt wird,

554
00:34:57,220 --> 00:35:00,070
es wird abzuschicken eine GET-Anfrage zu dieser URL.

555
00:35:00,070 --> 00:35:02,500
Wenn die Daten wieder kommt es aus, wird es analysieren sie,

556
00:35:02,500 --> 00:35:06,950
schalten Sie ihn in JSON, Schleife über das gesamte Array bedeuten, daß Daten,

557
00:35:06,950 --> 00:35:10,310
und dann hängen Sie den Namen und einen Zeilenumbruch

558
00:35:10,310 --> 00:35:16,500
auf jeder Zeile in dieser Mahlzeit info ID, die vorher leer war.

559
00:35:16,500 --> 00:35:18,910
Also zurück zu dieser Seite, wir aktualisieren,

560
00:35:18,910 --> 00:35:23,690
Klicken Sie, um herauszufinden, - es funktioniert nicht. Das ist bedauerlich.

561
00:35:23,690 --> 00:35:25,830
Und das ist, wo Debugging kommt in.

562
00:35:25,830 --> 00:35:30,070
Index.html, Zeile 1.

563
00:35:30,070 --> 00:35:57,210
Das ist interessant.

564
00:35:57,210 --> 00:35:59,720
Alles klar, nun, anstatt verbringen viel Zeit, dies zu tun, ich bin gerade dabei,

565
00:35:59,720 --> 00:36:07,070
ziehen Sie die Datei, die ich getan habe, das ist der fertige Version.

566
00:36:07,070 --> 00:36:13,710
Ich bin mir nicht sicher, was der Unterschied ist, aber wir können nur öffnen Sie diese nach oben statt.

567
00:36:13,710 --> 00:36:19,740
Und wir gehen auf die AJAX, und dies sollte korrekt funktionieren.

568
00:36:19,740 --> 00:36:21,730
Das ist, was war heute zum Mittagessen,

569
00:36:21,730 --> 00:36:24,870
in keiner bestimmten Reihenfolge, mit Zitaten um ihn herum, so ist es nicht das schönste.

570
00:36:24,870 --> 00:36:27,090
Aber, natürlich, wenn Sie taten dies für eine endgültige Projekt,

571
00:36:27,090 --> 00:36:30,120
Sie würde es besser aussehen.

572
00:36:30,120 --> 00:36:32,530
Aber das ist nur ein einfaches Beispiel, wie Sie die GET-Anfrage.

573
00:36:32,530 --> 00:36:34,580
Und wenn wir auf den eigentlichen Code aussehen, ich vermute, ich bin ziemlich sicher, dass

574
00:36:34,580 --> 00:36:39,690
es ist immer noch so ziemlich das gleiche.

575
00:36:39,690 --> 00:37:04,990
Oh, ich will es in einen String umzuwandeln vergessen, das ist es.

576
00:37:04,990 --> 00:37:07,920
Nein, es ist immer noch nicht funktioniert. Egal, hier ist der eigentliche Code abgeschlossen

577
00:37:07,920 --> 00:37:10,300
für das, was diese aussehen soll,

578
00:37:10,300 --> 00:37:16,400
und es macht das Gleiche wie das, was ich gerade implementiert.

579
00:37:16,400 --> 00:37:22,760
Wenn Sie auf den Button klicken, verwendet es GET JSON, um automatisch die Daten analysieren.

580
00:37:22,760 --> 00:37:29,190
Es nimmt die Daten von ihr zurück und durchläuft das gesamte Array

581
00:37:29,190 --> 00:37:32,770
und druckt die - was für das Mittagessen ist heute der Name es,

582
00:37:32,770 --> 00:37:38,020
und fügt einen Zeilenumbruch nach jeder Zeile.

583
00:37:38,020 --> 00:37:41,100
Das ist, wie Sie die GET-Funktion zu verwenden.

584
00:37:41,100 --> 00:37:44,040
>> Sie können auch die Post, die ich hatte keine Zeit

585
00:37:44,040 --> 00:37:47,940
zu schreiben, ein Beispiel dafür, aber wir können an der Dokumentation.

586
00:37:47,940 --> 00:37:53,220
Wenn man sich jquery.post,

587
00:37:53,220 --> 00:37:55,510
Sie können sehen, dass es fast die gleiche Sache.

588
00:37:55,510 --> 00:38:01,650
Sie haben eine URL, aber anstatt die Übergabe von Parametern mit -

589
00:38:01,650 --> 00:38:03,990
Sie können einfach in der Zeichenfolge für die URL selbst,

590
00:38:03,990 --> 00:38:06,300
Sie müssen in dieser Daten Variable übergeben

591
00:38:06,300 --> 00:38:11,990
Das ist im Grunde ein Array, ein Wörterbuch, dass die Karten-Parameter auf Werte.

592
00:38:11,990 --> 00:38:17,690
Sie passieren, dass in und sendet sie, dass bei der Verwendung eines POST.

593
00:38:17,690 --> 00:38:20,790
Und wenn Sie das haben, dann können Sie eine Funktion haben Erfolg

594
00:38:20,790 --> 00:38:23,930
dass ausgeführt wird, wenn die Daten kommt zurück.

595
00:38:23,930 --> 00:38:26,430
Ansonsten ist es genau das gleiche. Also mit POST,

596
00:38:26,430 --> 00:38:29,970
möchten Sie vielleicht POST verwenden, zum Beispiel, wenn Sie eine Eingabemaske haben

597
00:38:29,970 --> 00:38:35,780
Sie lassen die Menschen Eingang Passwörter in sie und senden die Passwörter aus

598
00:38:35,780 --> 00:38:41,850
Ihre Back-End-Skript in der Datenbank, ob die Benutzer gültig ist oder nicht, ist zu überprüfen.

599
00:38:41,850 --> 00:38:46,700
Sie können tun, dass alle mit jQuery anstatt die Seite überhaupt zu aktualisieren.

600
00:38:46,700 --> 00:38:52,160
Das ist, wie ich in dem Blog, dass ich Sie zeigten zuvor implementiert.

601
00:38:52,160 --> 00:38:59,530
Wenn wir bis zum Ende Portal und ausloggen, abmelden,

602
00:38:59,530 --> 00:39:02,600
Logout funktioniert nicht.

603
00:39:02,600 --> 00:39:13,360
Nun, lassen Sie mich nur öffnen Sie es in einem neuen Fenster.

604
00:39:13,360 --> 00:39:16,580
Hier gibt es ein Passwort, und ich wollte in etwas zufällig eingeben.

605
00:39:16,580 --> 00:39:18,590
Es funktioniert nicht, aber man kann sehen, dass wir nicht

606
00:39:18,590 --> 00:39:20,840
tatsächlich um die Seite überhaupt zu aktualisieren.

607
00:39:20,840 --> 00:39:24,610
Der Code, wenn Sie wollen, um es zu betrachten,

608
00:39:24,610 --> 00:39:37,460
ist alles in hier erhältlich.

609
00:39:37,460 --> 00:39:45,680
Also der Code, den ich schrieb letztes Jahr irgendwann.

610
00:39:45,680 --> 00:39:47,790
Wie Sie hier sehen können, wir schicken eine POST-Anforderung.

611
00:39:47,790 --> 00:39:50,400
Ich habe eine Datei namens login.php im Backend,

612
00:39:50,400 --> 00:39:53,860
die prüft, ob das Passwort gültig ist.

613
00:39:53,860 --> 00:39:56,000
Die Parameter übergeben wir sind passwortgeschützt, zugeordnet

614
00:39:56,000 --> 00:40:00,030
der Eingang, der in diesem Eingabefeld ist aktuell.

615
00:40:00,030 --> 00:40:04,110
Und wenn die Daten zurück kommt, prüfen wir.

616
00:40:04,110 --> 00:40:07,680
Wenn die Daten falsch ist, dann können wir sagen, falsches Passwort, schieben Sie ihn nach unten,

617
00:40:07,680 --> 00:40:09,580
und es muss nur danach verschwinden.

618
00:40:09,580 --> 00:40:12,320
Ansonsten laden wir das Admin-Seite.

619
00:40:12,320 --> 00:40:15,080
Und das alles geschah mit JSON.

620
00:40:15,080 --> 00:40:18,510
In diesem viele Zeilen Code, können Sie einfach die Daten an das hintere Ende,

621
00:40:18,510 --> 00:40:21,020
überprüfen, ob es richtig ist, überprüfen Sie, ob Sie in korrekt angemeldet,

622
00:40:21,020 --> 00:40:24,200
und tatsächlich, darauf zu reagieren, das Umleiten der Person zur richtigen Seite

623
00:40:24,200 --> 00:40:29,760
oder lassen sie nicht anmelden und ihnen zu sagen, dass sie ein falsches Passwort hatte.

624
00:40:29,760 --> 00:40:33,040
Also das ist ein Beispiel, wie man jQuery POST verwenden

625
00:40:33,040 --> 00:40:37,010
um eine POST-Anforderung an Ihre Backend zu senden,

626
00:40:37,010 --> 00:40:42,400
kontrollieren, ob jemand in ist korrekt angemeldet.

627
00:40:42,400 --> 00:40:44,820
>> Alles klar, also das ist alles Beispiele, die ich hatte, und all die Sachen, die ich wollte, zu decken.

628
00:40:44,820 --> 00:40:47,110
Das sind die wichtigsten Dinge, die jQuery können Sie tun:

629
00:40:47,110 --> 00:40:52,640
Elemente auswählen, ändern Sie sie mit DOM-Manipulation,

630
00:40:52,640 --> 00:40:56,340
Sie können Effekte hinzufügen, aktivieren Sie die Dinge auf bestimmte Ereignisse,

631
00:40:56,340 --> 00:41:00,430
und auch tun AJAX Anfragen sehr nahtlos und einfach.

632
00:41:00,430 --> 00:41:02,840
Ich danke Ihnen für Ihr Kommen oder beobachten,

633
00:41:02,840 --> 00:41:06,230
und wenn Sie irgendwelche Fragen haben, lass es mich wissen. Ja?

634
00:41:06,230 --> 00:41:12,730
[Student] Zurück, wenn Sie zeigte, musste man JSON nach dem POST-Anforderung in Anführungszeichen,

635
00:41:12,730 --> 00:41:15,170
und ich habe mich nur gefragt, was das war.

636
00:41:15,170 --> 00:41:20,070
>> Ja, ich sehe. Die Frage war, dass in dem Beispiel, das ich gerade gezeigt,

637
00:41:20,070 --> 00:41:25,790
war das Wort in Anführungszeichen JSON die -

638
00:41:25,790 --> 00:41:31,690
Ich werde einfach nach oben ziehen wieder - rund um die POST-Funktion.

639
00:41:31,690 --> 00:41:43,320
Ich bin gerade dabei, es zu zeigen.

640
00:41:43,320 --> 00:41:46,890
Also hier ist das POST-Anfrage, und es ist das JSON in Anführungszeichen.

641
00:41:46,890 --> 00:41:50,280
Das ist nur definiert, was wir erwarten die Ausgabe zu sein.

642
00:41:50,280 --> 00:41:54,070
Also, wenn wir gehen in JSON als erwarteten Datentyp,

643
00:41:54,070 --> 00:41:56,070
es ist nicht erforderlich, aber wenn wir sie weitergeben in,

644
00:41:56,070 --> 00:41:58,590
dann werden die Daten automatisch als JSON analysiert werden.

645
00:41:58,590 --> 00:42:00,600
So haben wir nicht, um die JSON Parsing Funktion es nennen,

646
00:42:00,600 --> 00:42:02,620
es wird einfach automatisch passieren.

647
00:42:02,620 --> 00:42:05,150
Und wenn Sie einen Blick auf die Dokumentation für POST,

648
00:42:05,150 --> 00:42:09,850
Es ist Datentypvariable, die Art der Daten vom Server erwartet.

649
00:42:09,850 --> 00:42:12,660
Der Standardwert ist eine intelligente Vermutung, die falsch sein können,

650
00:42:12,660 --> 00:42:15,520
so können Sie leer lassen, aber es ist genau die Art von Daten

651
00:42:15,520 --> 00:42:21,680
bei der Codierung, die Sie verwenden, ob es JSON oder XML ist oder etwas anderes.

652
00:42:21,680 --> 00:42:25,280
>> Noch Fragen?

653
00:42:25,280 --> 00:42:27,300
In Ordnung. Wenn Sie irgendwelche Fragen haben, fühlen Sie sich frei, mich zu mailen

654
00:42:27,300 --> 00:42:30,830
bei vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
und die Folien und Code sollten online verfügbar sein ziemlich bald.

656
00:42:34,860 --> 00:42:42,810
Viel Glück mit Ihrem letzten Projekte, hoffe, Sie nutzen jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]