1 00:00:00,000 --> 00:00:03,840 >> [Musikwiedergabe] 2 00:00:03,840 --> 00:00:05,770 3 00:00:05,770 --> 00:00:08,690 >> DOUG LLOYD: So jetzt wir alt Profis bei Web-Programmierung, oder? 4 00:00:08,690 --> 00:00:12,140 Und wir haben mehrere überdachte Sprachen in den einzelnen Videos. 5 00:00:12,140 --> 00:00:14,690 Und jetzt machen wir einen weiteren, JavaScript. 6 00:00:14,690 --> 00:00:17,370 >> Zuerst die gute Nachricht, JavaScript ist eine moderne Programmier 7 00:00:17,370 --> 00:00:21,410 Sprache ähnlich wie PHP, deren Syntax wird abgeleitet von C, 8 00:00:21,410 --> 00:00:22,830 so dass es ein guter Ort, um zu starten. 9 00:00:22,830 --> 00:00:25,880 Es ist ungefähr so ​​alt wie PHP, als auch, mit rund 20 Jahren. 10 00:00:25,880 --> 00:00:28,600 Es wurde um erfundene zur gleichen Zeit wie PHP. 11 00:00:28,600 --> 00:00:32,240 Und Javascript ist eigentlich ziemlich wesentlich für die Benutzererfahrung 12 00:00:32,240 --> 00:00:32,740 der Bahn. 13 00:00:32,740 --> 00:00:34,448 In der Tat gibt es drei Sprachen, die ich 14 00:00:34,448 --> 00:00:38,480 würde Art sagen, machen den Benutzererfahrung zu interagieren 15 00:00:38,480 --> 00:00:42,650 mit der Website, html, CSS und JavaScript. 16 00:00:42,650 --> 00:00:46,030 Und jetzt reden wir ein wenig über JavaScript. 17 00:00:46,030 --> 00:00:50,301 >> Die schlechte Nachricht, aber mit JavaScript ist dass es setzt eine Menge von Regeln für die selbst, 18 00:00:50,301 --> 00:00:51,300 und dann bricht es ihnen. 19 00:00:51,300 --> 00:00:54,010 Und Javascript tatsächlich sein kann Art von Herausforderung zu lernen, 20 00:00:54,010 --> 00:00:57,000 weil es im Gegensatz zu C und PHP, die sehr strukturiert sind 21 00:00:57,000 --> 00:01:00,270 und haben sehr strenge Regeln für wie Dinge funktionieren kann. 22 00:01:00,270 --> 00:01:03,690 JavaScript muss Art der so flexibel bekommen 23 00:01:03,690 --> 00:01:06,650 dass vielleicht die Dinge nicht zu gehen so funktionieren, wie wir erwarten, dass sie, 24 00:01:06,650 --> 00:01:09,830 und vielleicht werden wir wirklich nicht lernen können, unsere erste Programmiersprache 25 00:01:09,830 --> 00:01:10,769 als JavaScript. 26 00:01:10,769 --> 00:01:12,810 Vielleicht, weil es nicht der Fall ist setzte sich irgendwelche Regeln, 27 00:01:12,810 --> 00:01:15,754 und es nicht wirklich zusetzen gute Codierung Gewohnheiten. 28 00:01:15,754 --> 00:01:18,170 Aber jetzt haben wir hoffentlich entwickelt einige gute Programmiergewohnheiten, 29 00:01:18,170 --> 00:01:21,470 und so können wir beginnen, Beutezug in JavaScript ein wenig. 30 00:01:21,470 --> 00:01:25,750 >> JavaScript, ähnlich wie bei Öffnung schreiben up einer C-Datei mit einem Punkt C Verlängerung 31 00:01:25,750 --> 00:01:29,770 oder eine PHP-Datei mit einem Punkt PHP-Erweiterung, alles, was wir tun müssen, ist öffnen, eine Datei 32 00:01:29,770 --> 00:01:31,764 mit dem Punkt js Dateierweiterung. 33 00:01:31,764 --> 00:01:34,430 Wir brauchen keine besonderen Person haben Trennzeichen, wie wir in PHP taten. 34 00:01:34,430 --> 00:01:36,750 Diese Art von Winkel Halterung Fragezeichen PHP 35 00:01:36,750 --> 00:01:40,300 dass wir aus, dass die Art und Weise verwendet werden, Wir sagen unseren Browser, dass das, was wir haben, ist 36 00:01:40,300 --> 00:01:43,502 JavaScript ist, indem es in ein HTML-Tag, 37 00:01:43,502 --> 00:01:46,210 und wir werden ein wenig über zu sehen wie man das in nur einem Augenblick zu tun. 38 00:01:46,210 --> 00:01:48,210 >> Die andere Sache, die macht JavaScript anders, 39 00:01:48,210 --> 00:01:50,580 ist jedoch, dass es läuft Client-Seite. 40 00:01:50,580 --> 00:01:53,430 So erinnern, dass mit PHP wir nie wirklich sehen konnte, 41 00:01:53,430 --> 00:01:57,041 Die PHP, die eine Website unterstrichen. 42 00:01:57,041 --> 00:01:59,040 Wenn wir jemals gesehen die Seite Quelle, nur würden wir 43 00:01:59,040 --> 00:02:02,830 Link zu den HTML, das war von diesem PHP generiert. 44 00:02:02,830 --> 00:02:04,900 Aber JavaScript läuft Client-Seite. 45 00:02:04,900 --> 00:02:06,710 Ihr JavaScript auf Ihrem Computer ausgeführt. 46 00:02:06,710 --> 00:02:09,050 Und das ist, warum Sie tun können Dinge wie hinzuzufügen Blocker. 47 00:02:09,050 --> 00:02:09,550 Recht? 48 00:02:09,550 --> 00:02:12,704 Werbeblocker in der Regel durch getan alle von der JavaScript töten 49 00:02:12,704 --> 00:02:14,370 , dass auf einer bestimmten Website läuft. 50 00:02:14,370 --> 00:02:19,000 Und da sie zu haben, auf Ihrem Computer Client-Seite ausgeführt wird, 51 00:02:19,000 --> 00:02:21,910 können Sie einfach aufhören die JavaScript vollständig läuft. 52 00:02:21,910 --> 00:02:27,030 Das bedeutet auch, dass, wenn Sie verwenden, eine Website, die JavaScript enthält, 53 00:02:27,030 --> 00:02:32,450 Sie die JavaScript-Quellcode zu schicken Code als Teil Ihrer HTTP-Antwort 54 00:02:32,450 --> 00:02:34,159 an den Kunden, wenn sie fordern es. 55 00:02:34,159 --> 00:02:35,950 Und so könnten Sie nicht möchte Java- 56 00:02:35,950 --> 00:02:38,395 um wirklich sensible Dinge zu tun wie Weitergabe von Informationen 57 00:02:38,395 --> 00:02:41,020 über die Kennwörter der Benutzer zurück und her, weil sie tatsächlich 58 00:02:41,020 --> 00:02:45,610 gehen, um all den Quellcode zu erhalten, nicht nur die html, die erzeugt wird, 59 00:02:45,610 --> 00:02:49,030 wie es der Fall mit sagen PHP sein. 60 00:02:49,030 --> 00:02:51,620 >> Wie können wir also schließen JavaScript in unserem html, mit zu beginnen? 61 00:02:51,620 --> 00:02:54,520 Nun, ähnlich wie CSS, eigentlich, ist eine Art, wie wir es hier tun. 62 00:02:54,520 --> 00:02:56,190 Mit CSS haben wir zur Stil-Tags. 63 00:02:56,190 --> 00:03:00,760 Und innerhalb dieser Stil-Tags, können wir ein CSS-Stylesheet zu definieren. 64 00:03:00,760 --> 00:03:03,450 Ähnlich ist es mit JavaScript können wir eröffnen Script-Tags, 65 00:03:03,450 --> 00:03:06,660 ein weiteres HTML-Tag haben wir nicht reden über in unserem HTML-Video-, 66 00:03:06,660 --> 00:03:09,720 und schreiben Sie in zwischen den Script-Tags. 67 00:03:09,720 --> 00:03:13,960 Auch wenn, wie CSS, wir könnte außerhalb CSS-Dateien zu verknüpfen in 68 00:03:13,960 --> 00:03:15,900 und ziehen Sie sie in unser Programm auf diese Weise. 69 00:03:15,900 --> 00:03:18,280 Mit CSS können wir auch, entschuldigen Sie mich, mit JavaScript 70 00:03:18,280 --> 00:03:23,240 Wir können auch die Quelle angeben Attribut des Script-Tag 71 00:03:23,240 --> 00:03:25,720 in JavaScript zu verbinden getrennt, so dass Sie nicht tun, 72 00:03:25,720 --> 00:03:27,680 haben, um es in zu schreiben zwischen Script-Tags, die wir 73 00:03:27,680 --> 00:03:29,600 kann er sich mit der Verknüpfung dass Script-Tag als auch. 74 00:03:29,600 --> 00:03:33,230 Und so, wie mit dem Fall, wo mit CSS Wir empfehlen, dass es wahrscheinlich 75 00:03:33,230 --> 00:03:36,090 in Ihrem besten Interesse zu schreiben Ihre CSS in einer separaten Datei für den Fall, 76 00:03:36,090 --> 00:03:38,500 Sie es ändern müssen, in ähnlicher Weise zu tun, empfehlen wir 77 00:03:38,500 --> 00:03:40,720 dass Sie schreiben Sie Ihre JavaScript in separaten Dateien 78 00:03:40,720 --> 00:03:45,460 und verwenden Sie die Script-Tags Quelle zuschreiben, sie JavaScript binden 79 00:03:45,460 --> 00:03:49,520 in Ihre html, Ihre Web-Seite. 80 00:03:49,520 --> 00:03:52,610 >> So JavaScript-Variablen, werden wir zu sprechen beginnen, über die Syntax hier. 81 00:03:52,610 --> 00:03:53,600 Und wir durchmachen Diese Art von schneller, 82 00:03:53,600 --> 00:03:56,640 denn wir haben dies in PHP gemacht, so sollte dies alles ziemlich vertraut sein. 83 00:03:56,640 --> 00:03:59,490 So Variablen in JavaScript sind Variablen sehr ähnlich PHP. 84 00:03:59,490 --> 00:04:03,270 Es gibt keine Typangabe, und wenn Sie eine Variable einzuführen, 85 00:04:03,270 --> 00:04:05,070 Sie Präfix mit dem Schlüsselwort var. 86 00:04:05,070 --> 00:04:07,750 In PHP würde wir etwas tun wie diese, Dollar-Zeichen x. 87 00:04:07,750 --> 00:04:09,950 Das ist, wie wir gezeigt eine Variable, aber nein, wir 88 00:04:09,950 --> 00:04:12,060 nicht die Art erwähnen, der Variablen überhaupt. 89 00:04:12,060 --> 00:04:15,124 Wir würden uns etwas sagen Dollar-Zeichen x gleich 44 in PHP. 90 00:04:15,124 --> 00:04:17,040 Wenn wir taten das Gleiche in JavaScript, 91 00:04:17,040 --> 00:04:19,589 wir würden sagen var x gleich 44. 92 00:04:19,589 --> 00:04:22,780 So var ist sozusagen unsere Art der Einführung eines variabel. 93 00:04:22,780 --> 00:04:26,850 Das ist vielleicht ein bisschen mehr intuitive als nur Dollarzeichen variabel. 94 00:04:26,850 --> 00:04:29,080 >> Auch da gibt es keinen Datentypen, könnten wir dies tun 95 00:04:29,080 --> 00:04:34,490 mit einem beliebigen Datentyp, Zeichenketten, alles andere wäre all var sein. 96 00:04:34,490 --> 00:04:37,260 Conditionals, alle unsere alte Freunde aus C und PHP 97 00:04:37,260 --> 00:04:41,640 sind immer noch verfügbar, so haben wir, wenn, else if, else, Schalter und Frage 98 00:04:41,640 --> 00:04:42,240 Zeichen Doppelpunkt. 99 00:04:42,240 --> 00:04:45,890 Schalter übrigen ebenso flexibel wie war in PHP, aber alle diese sind Sie 100 00:04:45,890 --> 00:04:46,930 vertraut mit mittlerweile. 101 00:04:46,930 --> 00:04:49,900 Und in ähnlicher Weise mit Schlaufen die alten Favoriten aus, während, 102 00:04:49,900 --> 00:04:52,700 zu tun, während, und nach wie vor zur Verfügung zu uns. 103 00:04:52,700 --> 00:04:55,880 So wissen wir schon eine Menge der Grund JavaScript Art von Fundamentaldaten 104 00:04:55,880 --> 00:05:01,800 nur durch mit ziemlich viel Wissens jetzt zu C und PHP. 105 00:05:01,800 --> 00:05:03,670 >> Was ist mit Funktionen in JavaScript? 106 00:05:03,670 --> 00:05:08,199 Nun, ähnlich wie PHP jede Funktion ist mit dem Schlüsselwort function eingeführt. 107 00:05:08,199 --> 00:05:10,740 Sie sagen, Funktion, und dann beginnen, Ihre Funktion zu definieren. 108 00:05:10,740 --> 00:05:12,531 Was ist ein wenig anders, über JavaScript, 109 00:05:12,531 --> 00:05:15,700 ist jedoch die Fähigkeit zu haben, was heißt eine anonyme Funktion. 110 00:05:15,700 --> 00:05:18,880 So können Sie Funktionen definieren dass nicht über einen Namen. 111 00:05:18,880 --> 00:05:21,222 Dies ist etwas, was wir wirklich noch nicht gesehen habe. 112 00:05:21,222 --> 00:05:23,430 Wir werden wirklich nutzen das Konzept einer anonymen Funktion 113 00:05:23,430 --> 00:05:27,880 etwas später in dieser Video, denn es wird 114 00:05:27,880 --> 00:05:31,530 ein wenig mehr Sinn, in Zusammenhang wenn wir sie in einer bestimmten Situation zu sehen 115 00:05:31,530 --> 00:05:33,120 dass ich hier in Handarbeit gemacht. 116 00:05:33,120 --> 00:05:35,710 Aber lassen Sie uns nur einen Blick was eine einfache JavaScript- 117 00:05:35,710 --> 00:05:37,850 Funktion aussehen könnte. 118 00:05:37,850 --> 00:05:40,610 >> Also habe ich weitergemacht und meine CS50 IDE geöffnet 119 00:05:40,610 --> 00:05:43,690 und ich habe schon laufen Apache zu meinem Server laufen beginnen. 120 00:05:43,690 --> 00:05:46,800 Und ich diese Datei haben offen genannt Home.html. 121 00:05:46,800 --> 00:05:48,330 Und ich werde in ein wenig hier zu vergrößern. 122 00:05:48,330 --> 00:05:52,090 Und im Grunde können Sie das sehen, Home.html ist nur ein Haufen von Schaltflächen. 123 00:05:52,090 --> 00:05:55,291 Und ich bin an der Spitze behauptet sich hier dass dies die JavaScript Abschnitt 124 00:05:55,291 --> 00:05:55,790 Materialien. 125 00:05:55,790 --> 00:05:59,490 Es gibt also eine Reihe von Tasten, die hier, aber was diese Tasten eigentlich? 126 00:05:59,490 --> 00:06:03,662 >> Nun, wir werden zu meinem IED Kopf, und ich habe Home.html hier öffnen. 127 00:06:03,662 --> 00:06:05,620 Ganz am Anfang, Hier ist, wo ich die Verknüpfung 128 00:06:05,620 --> 00:06:07,500 in allen meinen JavaScript-Quelldateien. 129 00:06:07,500 --> 00:06:08,000 Recht? 130 00:06:08,000 --> 00:06:12,440 So habe ich anonymous.js, clock.js, Ich bin mit dem Quellattribut 131 00:06:12,440 --> 00:06:14,440 des script-Tags in Datei. 132 00:06:14,440 --> 00:06:18,660 So habe ich nicht geschrieben, jede JavaScript direkt in dieser Datei, 133 00:06:18,660 --> 00:06:21,790 aber ich habe in gezogen alle JavaScript Ich habe separat geschrieben. 134 00:06:21,790 --> 00:06:24,540 Und wenn wir hier, diese unten scrollen sollten alle sehen ein wenig vertraut 135 00:06:24,540 --> 00:06:27,090 mit ein wenig neue Syntax. 136 00:06:27,090 --> 00:06:32,655 Wir haben hier Header-Tag für Funktionen und dann eine Taste. 137 00:06:32,655 --> 00:06:35,530 Ich habe einen Eingang, der ein Typ-Taste ist, und anscheinend, wenn ich auf sie, 138 00:06:35,530 --> 00:06:38,130 Ich werde einige nennen funktionieren Alarm Datum. 139 00:06:38,130 --> 00:06:41,792 Und das ist, wie wir irgendwie mischen ein bisschen von JavaScript und HTML. 140 00:06:41,792 --> 00:06:44,500 Sie tatsächlich spielen ziemlich gut zusammen, und so offensichtlich, wenn 141 00:06:44,500 --> 00:06:48,730 Ich auf diese Schaltfläche klicken, werde ich einige Funktionsalarm Datum nennen. 142 00:06:48,730 --> 00:06:53,660 Und in ähnlicher Weise habe ich definiert Verhaltensweisen für alle anderen Tasten, 143 00:06:53,660 --> 00:06:56,440 sind auf dieser Seite home.html, was wir immer wiederkommen 144 00:06:56,440 --> 00:06:59,172 im Verlauf dieses Videos. 145 00:06:59,172 --> 00:07:00,880 Aber lassen Sie uns gehen Sie zurück nach oben hier und werfen Sie einen Blick 146 00:07:00,880 --> 00:07:03,850 bei clock.js, der das ist, JavaScript-Datei, die ich 147 00:07:03,850 --> 00:07:07,370 schrieb, hat diese erste Funktion werden wir einen Blick auf zu nehmen. 148 00:07:07,370 --> 00:07:11,630 Wie Sie sehen können, beginne ich meinen JavaScript Funktion mit dem Schlüsselwort-Funktion, 149 00:07:11,630 --> 00:07:14,560 und ich habe dieses eine bestimmte Name, es heißt Alarm Datum. 150 00:07:14,560 --> 00:07:18,710 Innerhalb von dort, ich anscheinend erstellen neue lokale Variable namens aktuellen Datum. 151 00:07:18,710 --> 00:07:21,500 Und ich werde ordnen ein gleich ein neues Datum. 152 00:07:21,500 --> 00:07:24,430 Und wir könnten in eine Menge zu bekommen detailliert dar, was ein Tag ist, 153 00:07:24,430 --> 00:07:27,060 und wirklich JavaScript ist so groß, dass wir unmöglich 154 00:07:27,060 --> 00:07:28,330 decken alles in einem Video. 155 00:07:28,330 --> 00:07:32,220 Aber es genügt zu sagen, das wird um mir ein Datenelement Rendite, 156 00:07:32,220 --> 00:07:35,470 kapselt das aktuelle Datum und die Uhrzeit. 157 00:07:35,470 --> 00:07:39,100 Ich Speichern dieser in einer Variablen, die ich offenbar werde aktuelle Datum zu alarmieren. 158 00:07:39,100 --> 00:07:41,300 >> Nun, was hat alert aktuelle Datum aus? 159 00:07:41,300 --> 00:07:46,460 Werfen wir einen Blick auf die Datei selbst über dem Rücken im Browser-Fenster. 160 00:07:46,460 --> 00:07:49,551 Also noch einmal, das ist die Taste, die ich haben, diesem benannte Funktion gebunden. 161 00:07:49,551 --> 00:07:51,800 Und ich dort klicken Sie darauf und schauen Sie, was es tat, alarmiert es. 162 00:07:51,800 --> 00:07:56,140 Es tauchte diese Art von Box erzählen mir, dass die aktuelle Zeit, offenbar 163 00:07:56,140 --> 00:07:59,370 es ist am 4. November 10.43.43 in den Morgen. 164 00:07:59,370 --> 00:08:02,345 Und wenn ich noch einmal klicken, jetzt Es ist ein paar Sekunden später, nicht wahr? 165 00:08:02,345 --> 00:08:03,720 Also das ist alles, diese Funktion tut. 166 00:08:03,720 --> 00:08:07,670 Wenn ich auf diese Schaltfläche, es erscheint eine Warnmeldung an mich. 167 00:08:07,670 --> 00:08:13,806 168 00:08:13,806 --> 00:08:15,690 Es gibt also wirklich nicht zu viel, um Funktionen 169 00:08:15,690 --> 00:08:19,110 Das ist anders als PHP, nur ein wenig an neuer Syntax 170 00:08:19,110 --> 00:08:22,500 das kommt mit der Arbeit mit JavaScript. 171 00:08:22,500 --> 00:08:24,650 >> Arrays in JavaScript ziemlich einfach. 172 00:08:24,650 --> 00:08:27,200 Um ein Array zu deklarieren, verwenden Sie Die eckigen Klammern Syntax 173 00:08:27,200 --> 00:08:30,090 dass wir mit PHP vertraut. 174 00:08:30,090 --> 00:08:33,432 Und ähnlich wie PHP, wir können auch Datentypen mischen. 175 00:08:33,432 --> 00:08:35,140 Also das Array, sowohl dieser Arrays würden 176 00:08:35,140 --> 00:08:36,960 ist vollkommen legitim JavaScript. 177 00:08:36,960 --> 00:08:42,500 Eine, die alle ganzen Zahlen ist, und eine, wird verschiedene Datentypen gemischt. 178 00:08:42,500 --> 00:08:45,020 >> Was ist etwas ganz anderes, in JavaScript, obwohl? 179 00:08:45,020 --> 00:08:47,020 Das ist die Vorstellung von einem Objekt. 180 00:08:47,020 --> 00:08:50,240 Also vielleicht Sie gehört haben, Objektorientiertes Programmieren. 181 00:08:50,240 --> 00:08:53,370 Wir haben nicht viel davon in CS50 zu tun, aber wir werden ein bisschen zu tun 182 00:08:53,370 --> 00:08:55,670 hier im Kontext von JavaScript. 183 00:08:55,670 --> 00:08:59,100 Jetzt JavaScript hat die Fähigkeit, verhalten, als einer objektorientierten Programmiersprache 184 00:08:59,100 --> 00:09:02,615 Sprache, aber sie nicht selbst ausschließlich eine objektorientierte 185 00:09:02,615 --> 00:09:03,490 Programmiersprache. 186 00:09:03,490 --> 00:09:05,281 Und dies wiederum kommt zurück nach, warum ich sagte, es 187 00:09:05,281 --> 00:09:10,610 kann sehr herausfordernd sein zu erfahren, JavaScript als Ihre erste Programmierung 188 00:09:10,610 --> 00:09:13,890 Sprache, weil es nicht der Fall ist wirklich für einen bestimmten Paradigma. 189 00:09:13,890 --> 00:09:16,430 >> C auf der anderen Seite ist ein funktionale Programmiersprache. 190 00:09:16,430 --> 00:09:22,270 Wenn wir wollen, sind Funktionen Art der Big Boss Man, nicht wahr? 191 00:09:22,270 --> 00:09:24,410 Sie diktieren, was geschieht alles andere. 192 00:09:24,410 --> 00:09:26,600 Wir wollen die Variablen ändern, wir nennen Funktionen. 193 00:09:26,600 --> 00:09:28,220 Wir Dinge tun, um Funktionen. 194 00:09:28,220 --> 00:09:31,250 Objekte stattdessen in eine objektorientierte Sprache, 195 00:09:31,250 --> 00:09:35,937 Objekte Art der Star zu werden und Funktionen geworden Art von Sekundär. 196 00:09:35,937 --> 00:09:38,270 Aber was ist ein Ziel, was ist diese Vorstellung von einem Objekt? 197 00:09:38,270 --> 00:09:40,880 Nun, wenn es hilft, denken darüber über zuerst sortieren 198 00:09:40,880 --> 00:09:44,540 der wie eine C-Struktur oder einer Struktur dass wir zu, bevor gelernt haben. 199 00:09:44,540 --> 00:09:47,430 In C, enthält eine Struktur, eine Anzahl von Feldern, 200 00:09:47,430 --> 00:09:51,174 und vielleicht könnten wir jetzt zu starten rufen Sie diese Felder Eigenschaften. 201 00:09:51,174 --> 00:09:53,590 Aber die Eigenschaften nie wirklich stehen für sich selbst, nicht wahr? 202 00:09:53,590 --> 00:09:56,410 Wenn I definiert eine Struktur für ein Fahrzeug wie dies mit der folgenden zwei 203 00:09:56,410 --> 00:10:00,750 Felder oder Eigenschaften eines ein ganze Zahl für das Jahr des Autos 204 00:10:00,750 --> 00:10:04,290 und ein anderer 10 Zeichen String für das Modell des Autos, 205 00:10:04,290 --> 00:10:07,150 Ich kann so etwas wie das zu sagen, Ich kann eine neue Variable deklarieren 206 00:10:07,150 --> 00:10:10,080 vom Typ struct Auto herbie. 207 00:10:10,080 --> 00:10:13,730 Und dann kann ich etwas sagen, wie herbie.year gleich 1963, 208 00:10:13,730 --> 00:10:15,850 und herbie.model gleich Beetle. 209 00:10:15,850 --> 00:10:17,000 Das ist ok. 210 00:10:17,000 --> 00:10:19,680 Ich bin mit den Feldern in der Zusammenhang mit der Struktur, 211 00:10:19,680 --> 00:10:22,290 aber ich konnte es nie nur sagen, so etwas wie dieses. 212 00:10:22,290 --> 00:10:22,790 Recht? 213 00:10:22,790 --> 00:10:26,836 Ich kann nicht mit den Feldnamen unabhängig von der Struktur. 214 00:10:26,836 --> 00:10:28,210 Es ist irgendwie eine grundlegende Sache. 215 00:10:28,210 --> 00:10:32,990 >> So Felder wobei von grundlegender Bedeutung für C-Strukturen 216 00:10:32,990 --> 00:10:39,050 sind sehr ähnlich zu Eigenschaften wobei von grundlegender Bedeutung für JavaScript-Objekte. 217 00:10:39,050 --> 00:10:42,080 Aber was sie macht Besonders interessant 218 00:10:42,080 --> 00:10:46,230 ist, dass Objekte können auch, was werden als Methoden, die wirklich sind 219 00:10:46,230 --> 00:10:50,730 nur eine Phantasie Wort für Funktionen, inhärent zu dem Objekt als gut. 220 00:10:50,730 --> 00:10:55,340 Es ist also eine Funktion, die nur sein kann im Zusammenhang mit einem Objekt aufgerufen. 221 00:10:55,340 --> 00:10:59,200 Nur ein Objekt, das festgelegt hat diese Funktion innerhalb seiner, 222 00:10:59,200 --> 00:11:02,020 Wenn Sie über einen denken, Struktur, die Funktion 223 00:11:02,020 --> 00:11:05,720 innerhalb diejenigen definiert, definiert geschweiften Klammern der Struktur. 224 00:11:05,720 --> 00:11:07,980 So bedeutet es nur, etwas der Struktur. 225 00:11:07,980 --> 00:11:10,960 Und das ist eine Art, was wir tun hier mit Objekten und Methoden. 226 00:11:10,960 --> 00:11:13,580 Es ist im Grunde, wie wir sind Definition einer Funktion, dass 227 00:11:13,580 --> 00:11:16,670 nur sinnvoll, auf eine besondere Aufgabe, und so haben wir 228 00:11:16,670 --> 00:11:19,440 rufen, dass eine Methode des Objekts. 229 00:11:19,440 --> 00:11:23,180 Und wir haben nie anrufen können, dass Funktion unabhängig von dem Objekt, 230 00:11:23,180 --> 00:11:29,260 wie können wir nicht sagen, Jahr oder Modell unabhängig von der Struktur in C. 231 00:11:29,260 --> 00:11:32,300 >> So funktionalen Programmierung Paradigmen in etwa so aussehen. 232 00:11:32,300 --> 00:11:35,450 Funktion und dann, wenn Sie weitergeben in dem Objekt als Parameter. 233 00:11:35,450 --> 00:11:38,650 In einer objektorientierten Programmiersprache Sprachen, diese Art der bekommt 234 00:11:38,650 --> 00:11:43,464 umgedreht, und wir würden zu denken es so, object.function. 235 00:11:43,464 --> 00:11:45,380 So ist es Art von diesem Punkt Betreiber wieder was bedeutet, 236 00:11:45,380 --> 00:11:49,540 dass es irgendeine Art von Immobilie oder ein Attribut des Objekts selbst. 237 00:11:49,540 --> 00:11:53,240 Aber das ist, was ein Objekt orientierten Programmiersprache 238 00:11:53,240 --> 00:11:57,150 tun könnte, um eine Funktion zu machen rufen Sie auf einer Methode, wieder, die 239 00:11:57,150 --> 00:12:00,260 ist nur ein besonderes Wort für eine Funktion daß inhärent auf ein Objekt. 240 00:12:00,260 --> 00:12:03,440 Dies ist, was das Syntax aussehen könnte. 241 00:12:03,440 --> 00:12:09,360 Und so werden wir beginnen, einige sehen Dies im Zusammenhang mit JavaScript. 242 00:12:09,360 --> 00:12:12,470 >> Sie können auch über ein Objekt zu denken ein bisschen wie ein assoziatives Array, 243 00:12:12,470 --> 00:12:14,160 die wir mit PHP vertraut. 244 00:12:14,160 --> 00:12:17,720 Denken Sie daran, ein assoziatives Array erlaubt uns, Schlüssel-Wert-Paare müssen, statt 245 00:12:17,720 --> 00:12:23,040 der mit Indizes 0, eins, zwei, drei, und so weiter, als ob wir von C verwendet 246 00:12:23,040 --> 00:12:23,940 Arrays. 247 00:12:23,940 --> 00:12:27,472 Assoziative Arrays abbilden Wörter, wie zum Beispiel in den PHP-Video, 248 00:12:27,472 --> 00:12:29,180 wir sprachen Belag von Pizzas. 249 00:12:29,180 --> 00:12:31,180 Und so hatten wir ein Array genannt Pizzas, und wir 250 00:12:31,180 --> 00:12:36,670 hatten Käse war ein wichtiger und 8,99 $ war die Wert und dann pepperoni war ein wichtiger, 251 00:12:36,670 --> 00:12:39,190 $ 9,99 war ein Wert, und so weiter. 252 00:12:39,190 --> 00:12:43,300 Und so können wir auch über einen denken, Objekt Art ähnlich einem assoziativen 253 00:12:43,300 --> 00:12:43,840 Array. 254 00:12:43,840 --> 00:12:47,020 Und so diese Syntax hier würde ein neues Objekt erstellen 255 00:12:47,020 --> 00:12:50,950 genannt herbie mit zwei Objekte darin. 256 00:12:50,950 --> 00:12:57,310 Jahr, die den Wert 1963 zugeordnet ist, und Modell, das die Zeichenfolge zugewiesen ist 257 00:12:57,310 --> 00:12:58,140 Käfer. 258 00:12:58,140 --> 00:13:01,770 >> Und hier bemerken, dass ich mit einfache Anführungszeichen in JavaScript. 259 00:13:01,770 --> 00:13:05,570 Sie können einfache oder doppelte Anführungszeichen verwenden wenn Sie über Saiten sprechen. 260 00:13:05,570 --> 00:13:07,772 Es ist nur konventionell der Fall, dass die meisten Zeiten 261 00:13:07,772 --> 00:13:10,230 wenn Sie Schreiben von JavaScript, Sie gerade einfache Anführungszeichen. 262 00:13:10,230 --> 00:13:15,050 Aber ich konnte doppelte Anführungszeichen hier zu verwenden, und das wäre auch völlig in Ordnung zu sein. 263 00:13:15,050 --> 00:13:17,470 >> Also denken Sie daran, wie in PHP hatten wir diese Vorstellung 264 00:13:17,470 --> 00:13:22,730 der eine für jede Schleife, die uns erlauben würde, überlaufen alle der Schlüsselwert 265 00:13:22,730 --> 00:13:25,270 Paaren eines assoziativen Array, weil wir 266 00:13:25,270 --> 00:13:29,050 nicht diese Fähigkeit, durchlaufen haben bis 0, ein, zwei, drei, vier, 267 00:13:29,050 --> 00:13:30,710 und so weiter? 268 00:13:30,710 --> 00:13:35,010 JavaScript muss etwas sehr ähnlich, aber es ist nicht genannt für jede Schleife, 269 00:13:35,010 --> 00:13:38,960 es in Schleifen genannt wird a. 270 00:13:38,960 --> 00:13:42,890 Also, wenn ich sagte zu mir, wie Diese, zum var Schlüssel in Objekt, 271 00:13:42,890 --> 00:13:48,670 dass ist irgendwie ähnlich sagen für jeden etwas als etwas. 272 00:13:48,670 --> 00:13:53,850 Aber alles, was ich hier mache ist Iteration durch all die Schlüssel meines Objekts. 273 00:13:53,850 --> 00:13:56,070 Und im Inneren des lockigen Hosenträger gibt, würde ich 274 00:13:56,070 --> 00:14:03,410 benutzen Objekt eckigen Klammern Schlüssel zu beziehen zu dem Wert an dieser Schlüsselstelle. 275 00:14:03,410 --> 00:14:05,400 >> Alternativ gibt es auch ein anderer Ansatz. 276 00:14:05,400 --> 00:14:10,880 Wenn ich einfach nur kümmern uns um die Werte, kann ich für Schlüssel des Objekts sagen, 277 00:14:10,880 --> 00:14:12,360 und verwenden Sie nur Schlüssel innen. 278 00:14:12,360 --> 00:14:17,240 Also für var Schlüssel in Objekt, ich habe Objekt eckigen Klammern verwenden 279 00:14:17,240 --> 00:14:19,340 Schlüssel in der Schleife. 280 00:14:19,340 --> 00:14:24,580 Für var Schlüssel des Objektes, kann ich benutzen Sie einfach Schlüssel in der Schleife, 281 00:14:24,580 --> 00:14:29,040 denn ich bin nur spezifisch Gespräch über die Werte gibt. 282 00:14:29,040 --> 00:14:32,630 >> Lassen Sie uns also vielleicht einen sehen Sie den Unterschied 283 00:14:32,630 --> 00:14:35,670 nur um schnell zeigen, der Unterschied zwischen den vier 284 00:14:35,670 --> 00:14:40,730 in und aus mit einem sehr spezifischen Array, das wir hier haben, Woche Array. 285 00:14:40,730 --> 00:14:43,616 Also muss ich ein neues Array zu finden dass ich mit sieben Saiten gefüllt, 286 00:14:43,616 --> 00:14:46,240 Montag Dienstag Mittwoch, Donnerstag, Freitag, Samstag, Sonntag. 287 00:14:46,240 --> 00:14:50,530 Und ich möchte jetzt laufen Durch diese Anordnung, 288 00:14:50,530 --> 00:14:53,090 Ausdrucken bestimmte Informationen. 289 00:14:53,090 --> 00:14:58,780 Wenn ich einen für die in der Schleife zum Ausdrucken Informationen 290 00:14:58,780 --> 00:15:00,710 was denken Sie, werde ich bekommen? 291 00:15:00,710 --> 00:15:01,710 Nun, lassen Sie uns einen Blick. 292 00:15:01,710 --> 00:15:05,300 Und bevor wir über springen Zu meinen Browser-Fenster, 293 00:15:05,300 --> 00:15:08,090 weiß nur, dass console.log ist sozusagen ein 294 00:15:08,090 --> 00:15:10,630 Weise des Tuns einen Druck F in JavaScript. 295 00:15:10,630 --> 00:15:12,040 Aber was ist die Konsole? 296 00:15:12,040 --> 00:15:14,940 Nun, das ist, was wir gehen Sie einen Blick auf jetzt. 297 00:15:14,940 --> 00:15:16,850 >> OK, so dass wir hier sind wieder da in meinem Browserfenster, 298 00:15:16,850 --> 00:15:19,410 und ich werde zu öffnen meine Entwickler-Tools. 299 00:15:19,410 --> 00:15:22,290 Wieder, ich bin nur schlagen F12 zu öffnen, Entwickler-Tools. 300 00:15:22,290 --> 00:15:25,670 Und feststellen, dass hier bei der top Ich habe Konsole ausgewählt. 301 00:15:25,670 --> 00:15:28,480 Das ist also der Vorstellung, einer Entwicklerkonsole 302 00:15:28,480 --> 00:15:30,500 und es wird uns erlauben, Drucken Informationen aus, 303 00:15:30,500 --> 00:15:33,000 Art wie des Terminals, aber wie Sie ein wenig später sehen werden, 304 00:15:33,000 --> 00:15:37,720 wir können auch Typinformationen in mit unserer Webseite interagieren. 305 00:15:37,720 --> 00:15:42,320 Ich werde in ein wenig hier zu vergrößern, und ich werde nun auf die in Prüfung. 306 00:15:42,320 --> 00:15:45,230 Und vier in test-- Ich werde nicht zeigen Sie den Code für die es jetzt, 307 00:15:45,230 --> 00:15:47,479 aber Sie werden es, wenn erhalten Sie Laden Sie die Quellcode, 308 00:15:47,479 --> 00:15:50,380 mit dieser assoziiert video-- ist nur, dass für die in der Schleife 309 00:15:50,380 --> 00:15:52,610 dass wir sahen nur eine zweiten vor auf der Folie. 310 00:15:52,610 --> 00:15:54,810 >> So ich werde Klick, der Taste, und hier, 311 00:15:54,810 --> 00:15:58,440 ist hier, was hat sich in der gedruckten Konsole, 0, ein, zwei, drei, vier, fünf, 312 00:15:58,440 --> 00:15:58,940 sechs. 313 00:15:58,940 --> 00:16:02,490 Ich habe nicht die Informationen auszudrucken innerhalb dieser Array-Standorten, 314 00:16:02,490 --> 00:16:05,180 weil ich ein für die in der Schleife. 315 00:16:05,180 --> 00:16:10,670 Und im Inneren des Körpers der Schleife I gerade aus-Taste ausgedruckt keine Objektschlüssel. 316 00:16:10,670 --> 00:16:18,600 Aber wenn ich jetzt klar meine Konsole, und ich wechseln Sie zur der Test, und vier von Test 317 00:16:18,600 --> 00:16:22,500 Ich sage, die ich für Schleifen statt und ausdrucken Schlüssel, 318 00:16:22,500 --> 00:16:28,079 wenn ich Sie auf, dass, jetzt bin ich der tatsächlichen Elemente innerhalb meines Objekts 319 00:16:28,079 --> 00:16:29,120 oder meine Anordnung in diesem Fall. 320 00:16:29,120 --> 00:16:31,760 Meine Auswahl an Wochentagen. 321 00:16:31,760 --> 00:16:33,480 Ich druckte Montag, Dienstag Mittwoch. 322 00:16:33,480 --> 00:16:36,930 Also das ist die Differenz zwischen a für in-Schleife, die ausdruckt 323 00:16:36,930 --> 00:16:43,410 nur die Tasten, wenn Sie nur verwenden Schlüssel innerhalb des Körpers der Schleife, 324 00:16:43,410 --> 00:16:46,850 und eine für die der Schleife, die Drucke aus den Werten, wenn Sie nur verwenden, 325 00:16:46,850 --> 00:16:48,870 Schlüssel in den Körper der Schleife. 326 00:16:48,870 --> 00:16:52,380 >> Also gut, wie wir jetzt zu starten verketten Zeichenfolgen und vielleicht verwechseln 327 00:16:52,380 --> 00:16:57,220 einige Variablen mit Interpolation als wären wir in der Lage, in PHP zu tun? 328 00:16:57,220 --> 00:16:59,410 Nun, wir sind ziemlich vertraut mit diesen Eintrag von PHP. 329 00:16:59,410 --> 00:17:04,109 Dies ist, wie wir es mit dem zu tun Punkt-Operator, um Zeichenfolgen zu verketten. 330 00:17:04,109 --> 00:17:06,260 In JavaScript, obwohl, wir tatsächlich etwas verwenden 331 00:17:06,260 --> 00:17:09,290 so genannte Plus-Operator, der ist vielleicht sogar ein bisschen mehr 332 00:17:09,290 --> 00:17:10,470 intuitive, nicht wahr? 333 00:17:10,470 --> 00:17:12,609 Wir fügen eine Reihe von Strings zusammen. 334 00:17:12,609 --> 00:17:14,520 Also lassen Sie den Kopf nach hinten vorbei und sehen, was diese 335 00:17:14,520 --> 00:17:18,693 gedruckt wird, wenn wir versuchen, ausdrucken alle Informationen, die in der Woche Array. 336 00:17:18,693 --> 00:17:20,859 In Ordnung, so unter hier unter String-Verkettung, 337 00:17:20,859 --> 00:17:24,822 Ich habe zwei Möglichkeiten, string Gebäude V1 und V2 String Gebäude. 338 00:17:24,822 --> 00:17:26,530 Und wir werden sehen, warum wir benötigen V2 in einer Sekunde. 339 00:17:26,530 --> 00:17:28,610 Aber ich werde Sie auf String Gebäude V1, die 340 00:17:28,610 --> 00:17:30,360 ist der Code, wir waren nur einen Blick auf, 341 00:17:30,360 --> 00:17:32,980 die console.log mit allen Pluspunkte. 342 00:17:32,980 --> 00:17:35,910 Lassen Sie uns, wenn diese Drucke zu sehen Sie heraus, was wir erwarten. 343 00:17:35,910 --> 00:17:39,939 >> Montag ist der Tag Nummer 01 der Woche, Dienstag ist Tag der Nummer 11 der Woche. 344 00:17:39,939 --> 00:17:41,730 Nun, was ich versucht habe zu tun, es zu bekommen 345 00:17:41,730 --> 00:17:46,280 es auszudrucken Montag Tagesnummer eine, Dienstag ist heute die Nummer zwei. 346 00:17:46,280 --> 00:17:50,140 Aber es scheint, als wäre ich immer Ausdruck einer. 347 00:17:50,140 --> 00:17:51,260 Nun, warum ist das so? 348 00:17:51,260 --> 00:17:55,600 Nun, es stellt sich heraus, noch einen Blick in diesem kleinen Code-Snippet hier. 349 00:17:55,600 --> 00:18:00,160 Beachten Sie, dass wir mit dem Plus Betreiber in zwei unterschiedlichen Kontexten. 350 00:18:00,160 --> 00:18:03,221 >> Und so ist hier, wo vielleicht Dinge dass wir Art gesagt, 351 00:18:03,221 --> 00:18:03,970 Oh, es ist so toll. 352 00:18:03,970 --> 00:18:05,910 Wir arbeiten nicht mit Datentypen mehr beschäftigen. 353 00:18:05,910 --> 00:18:08,220 Aber hier ist, wo die Tatsache, dass wir verlieren, Datentypen 354 00:18:08,220 --> 00:18:10,960 kann tatsächlich ein wenig sein ein Problem für uns. 355 00:18:10,960 --> 00:18:16,260 Nun, da der Plus-Operator wird verwendet, verketten Zeichenfolgen und fügen Nummern 356 00:18:16,260 --> 00:18:19,550 zusammen, ist Javascript seine beste Schätzung zu machen 357 00:18:19,550 --> 00:18:22,030 , was ich will, dass es für mich tun. 358 00:18:22,030 --> 00:18:23,900 Und in diesem Fall, Sie ahnen es falsch. 359 00:18:23,900 --> 00:18:29,340 Es ist einfach verketteten Tag, das wäre 0, eins, zwei, drei, vier, fünf oder sechs, 360 00:18:29,340 --> 00:18:32,060 und dann ist es nur verkettet dass und dann verkettet ein. 361 00:18:32,060 --> 00:18:35,020 Es hat nicht wirklich sie zusammen fügen. 362 00:18:35,020 --> 00:18:37,320 Und so sind diese Sprachen, PHP und JavaScript, 363 00:18:37,320 --> 00:18:39,196 dass abstrahiert dieser Begriff der Typen, 364 00:18:39,196 --> 00:18:40,820 Sie müssen nicht mehr, damit umzugehen. 365 00:18:40,820 --> 00:18:43,600 Sie haben noch Typen unter der Haube. 366 00:18:43,600 --> 00:18:46,780 Und wir können, in Situationen, wie diese, nutzen diese Tatsache 367 00:18:46,780 --> 00:18:49,240 indem er sagte etwas, wie vielleicht dieser, die 368 00:18:49,240 --> 00:18:53,210 sagt JavaScript, um die So behandeln Sie dies als eine ganze Zahl, 369 00:18:53,210 --> 00:18:57,100 nicht behandeln es als eine Zeichenfolge, auch wenn wir zusammen mischen Saiten 370 00:18:57,100 --> 00:18:58,940 und Zahlen hier. 371 00:18:58,940 --> 00:19:02,204 >> Es ist nur eines der Dinge, dass es scheint, so groß, in Zusammenhang 372 00:19:02,204 --> 00:19:04,120 dass wir nicht haben, befassen sich mit mehr Arten, 373 00:19:04,120 --> 00:19:05,828 aber manchmal werden Sie in eine Situation führen 374 00:19:05,828 --> 00:19:09,110 genau wie dieser, wo die Tatsache, dass Sie haben nicht die Kontrolle über Typen 375 00:19:09,110 --> 00:19:11,220 können Sie nach hinten losgehen wenn Sie nicht vorsichtig sind. 376 00:19:11,220 --> 00:19:18,285 Und so, wenn wir knallen zurück über den IDE, ich bin gehen, um wieder klar aus meiner Konsole, 377 00:19:18,285 --> 00:19:20,660 und ich werde String klicken Gebäude-Version zwei, die 378 00:19:20,660 --> 00:19:23,052 ist, wo ich verwende diesen Parse-int-Funktion. 379 00:19:23,052 --> 00:19:25,260 Jetzt ist es auszudrucken Informationen, die ich erwarte. 380 00:19:25,260 --> 00:19:29,330 Montag Tag Nummer eins, Dienstag ist heute die Nummer zwei, und so weiter. 381 00:19:29,330 --> 00:19:31,170 >> Lassen Sie uns also über die Funktionen wieder zu sprechen. 382 00:19:31,170 --> 00:19:34,790 Ich habe versprochen, wir würden über anonyme sprechen Funktionen, und jetzt ist der Kontext für die 383 00:19:34,790 --> 00:19:36,360 ist endlich da. 384 00:19:36,360 --> 00:19:39,980 Also, bevor wir das tun, lassen Sie uns wieder sprechen über Arrays nur für eine Sekunde. 385 00:19:39,980 --> 00:19:42,120 So Arrays sind eine spezielle Bei einem Objekt. 386 00:19:42,120 --> 00:19:45,180 In der Tat, alles in JavaScript ist eigentlich ein Objekt. 387 00:19:45,180 --> 00:19:47,190 So funktioniert ein Spezialfall eines Objekts, 388 00:19:47,190 --> 00:19:49,770 ganze Zahlen sind eine spezielle Bei einem Objekt, 389 00:19:49,770 --> 00:19:52,152 aber Arrays spezifisch haben eine Reihe von Verfahren. 390 00:19:52,152 --> 00:19:55,110 Denken Sie daran, weil sie Objekte sind, sie Eigenschaften und Methoden haben. 391 00:19:55,110 --> 00:19:58,600 Sie haben eine Reihe von Methoden, kann auf die Objekte angewendet werden. 392 00:19:58,600 --> 00:20:01,197 Es gibt eine Methode namens Größe, array.size, 393 00:20:01,197 --> 00:20:03,030 was wird die Rückkehr Sie wie man erwarten könnte 394 00:20:03,030 --> 00:20:05,120 die Anzahl der Elemente im Array. 395 00:20:05,120 --> 00:20:08,480 Array.pop, Art wie unsere Vorstellung von Abspringen 396 00:20:08,480 --> 00:20:11,110 aus einem Stapel, wenn Sie sich erinnern, von unserem Stapel Video, 397 00:20:11,110 --> 00:20:13,810 Entfernt das letzte Element aus dem Array. 398 00:20:13,810 --> 00:20:17,110 Array.push fügt ein neues Element am Ende eines Arrays. 399 00:20:17,110 --> 00:20:20,910 Array.shift ist eine Art wie DQ, Spleiße it out 400 00:20:20,910 --> 00:20:23,610 das erste Element in einem Array. 401 00:20:23,610 --> 00:20:27,549 >> Aber es gibt auch eine andere Sonder Verfahren eines Arrays namens Karte. 402 00:20:27,549 --> 00:20:29,340 Und das ist eine Art von interessantes Konzept. 403 00:20:29,340 --> 00:20:30,930 Also, was ist die Idee einer Karte? 404 00:20:30,930 --> 00:20:33,880 Sie werden tatsächlich sehen diese in verschiedenen anderen Sprachen, 405 00:20:33,880 --> 00:20:38,550 und wir reden hier nicht über ein Gespräch Art Kartographen Karte hier, 406 00:20:38,550 --> 00:20:41,480 wir über eine Mapping-Funktion sprechen. 407 00:20:41,480 --> 00:20:44,110 Im Zusammenhang sind wir reden hier eine Karte 408 00:20:44,110 --> 00:20:47,950 ist eine spezielle Operation, die wir können auf einem Array durchzuführen 409 00:20:47,950 --> 00:20:51,630 um eine bestimmte Funktion gelten zu jedem Element des Arrays. 410 00:20:51,630 --> 00:20:55,190 und so würden wir sagen, dass in Dieser Fall, vielleicht Array.map, 411 00:20:55,190 --> 00:21:00,330 und nach innen von ihm, wir sind vorbei in der Karte ist eine Funktion, die wir wollen 412 00:21:00,330 --> 00:21:02,430 auf jedem einzelnen Element angewendet werden. 413 00:21:02,430 --> 00:21:07,299 Es ist also eine Art analog zu verwenden eine Schleife, um jedes Element zu iterieren 414 00:21:07,299 --> 00:21:09,340 und Anwendung einer bestimmten Funktion an jedem Element, 415 00:21:09,340 --> 00:21:14,830 nur JavaScript ist diese eingebaut Vorstellung einer Zuordnung, die angewendet werden können. 416 00:21:14,830 --> 00:21:19,700 Und das ist ein großer Zusammenhang zu reden über eine anonyme Funktion. 417 00:21:19,700 --> 00:21:22,370 >> Also lassen Sie uns sagen, wir haben Diese Anordnung von Zahlen. 418 00:21:22,370 --> 00:21:25,370 Es heißt nums, und es hat fünf Dinge darin, eins, zwei, drei, vier, 419 00:21:25,370 --> 00:21:26,410 fünf. 420 00:21:26,410 --> 00:21:30,620 Jetzt möchte ich einige Karte Funktion auf diesem Array. 421 00:21:30,620 --> 00:21:34,337 Ich möchte eine Funktion haben, gelten zu jedem Element des Arrays. 422 00:21:34,337 --> 00:21:37,420 Nun, lassen Sie uns sagen, dass das, was ich will zu tun ist einfach doppelt alle Elemente. 423 00:21:37,420 --> 00:21:42,520 Was ich tun konnte, ist nur eine Schleife verwenden für var I gleich 0 ist, ist kleiner als ich 424 00:21:42,520 --> 00:21:47,390 oder gleich 4, I und, und, und doppelklicken Sie dann jede einzelne Nummer. 425 00:21:47,390 --> 00:21:49,580 Aber ich kann auch etwas tun. 426 00:21:49,580 --> 00:21:53,420 Ich kann sagen, nums war früher eins zwei drei vier fünf, 427 00:21:53,420 --> 00:21:58,310 Jetzt aber, würde ich mag dich tragen Sie eine Abbildung auf diesem Array 428 00:21:58,310 --> 00:22:00,400 wo ich möchte, dass Sie jede Zahl zu verdoppeln. 429 00:22:00,400 --> 00:22:02,540 Und das ist genau Was passiert hier. 430 00:22:02,540 --> 00:22:06,870 Aber beachten Sie, was ich vorbei in wie das Argument zur Karte. 431 00:22:06,870 --> 00:22:09,080 Dies ist eine anonyme Funktion. 432 00:22:09,080 --> 00:22:11,140 Und beachten Sie, ich habe nicht angegeben diese Funktion ein Name, 433 00:22:11,140 --> 00:22:13,290 Ich habe es nur bei einer Parameterliste. 434 00:22:13,290 --> 00:22:16,370 Und so ist dies ein Beispiel einer anonymen Funktion. 435 00:22:16,370 --> 00:22:21,270 >> Wir in der Regel nie nennen würde dies Funktion außerhalb des Kontexts der Karte. 436 00:22:21,270 --> 00:22:24,110 Wir definieren es als Parameter auf der Karte, und so haben wir nicht wirklich 437 00:22:24,110 --> 00:22:27,910 müssen Sie einen Namen für sie haben, wenn die einzige Sache, die kümmert sich um ist Karte 438 00:22:27,910 --> 00:22:30,339 und es ist richtig definiert es Innenseite der Karte. 439 00:22:30,339 --> 00:22:31,880 Und dies ist eine anonyme Funktion. 440 00:22:31,880 --> 00:22:34,680 Wir waren nicht in der Lage , dies vorher zu tun. 441 00:22:34,680 --> 00:22:38,400 Karte einige Funktion, übernimmt einen Parameter, num, 442 00:22:38,400 --> 00:22:41,890 und was das Funktion tut ist Renditen nummer mal 2. 443 00:22:41,890 --> 00:22:45,330 Und so nach dieser Mapping angewendet wurde, 444 00:22:45,330 --> 00:22:50,090 das ist jetzt, was nums Aussehen dergleichen, mit zwei, vier, sechs, acht, 10. 445 00:22:50,090 --> 00:22:52,090 Und wir werden über den Pop Meine Browser-Fenster und nur 446 00:22:52,090 --> 00:22:55,240 Schau dir das an sehr schnell als gut. 447 00:22:55,240 --> 00:22:58,000 >> So habe ich eine andere Taste hier in meine Homepage genannten Doppel. 448 00:22:58,000 --> 00:23:03,570 Und wenn ich einen Doppelklick auf, und es sagt me, bevor es ein, zwei, drei, vier, 449 00:23:03,570 --> 00:23:07,250 fünf nach zwei, vier, sechs, acht, 10. 450 00:23:07,250 --> 00:23:11,930 Und wenn ich zurück und doppelklicken Sie auf wieder, zwei, vier, sechs, acht, 10. 451 00:23:11,930 --> 00:23:17,400 Und dann nach, vier, acht, 12, 16, und 20. 452 00:23:17,400 --> 00:23:20,440 Und was mache ich in dieser Funktion? 453 00:23:20,440 --> 00:23:25,210 Nun, wenn wir nur Pop über zu IDE, und Ich ziehe meine anonyme Funktion, hier 454 00:23:25,210 --> 00:23:28,780 on line sieben bis 13, ich bin denn hier ein wenig Phantasie Arbeit, 455 00:23:28,780 --> 00:23:32,240 aber ich bin einfach nur auszudrucken was ist derzeit in der Anordnung. 456 00:23:32,240 --> 00:23:36,580 Dann auf der Linie 16, 17, und 18, da ist meine Karte. 457 00:23:36,580 --> 00:23:40,930 Dies ist, wo ich die Anwendung dieser Verdoppelung Funktion, um jedes einzelne Element. 458 00:23:40,930 --> 00:23:43,530 Und dann ein wenig weiter unten, Ich bin einfach nur das gleiche tun 459 00:23:43,530 --> 00:23:46,640 Ich war vor Abgesehen jetzt bin ich Ausdrucken der Inhalte des Arrays 460 00:23:46,640 --> 00:23:48,167 danach. 461 00:23:48,167 --> 00:23:50,500 Aber alles, was ich hier getan wird nur eine anonyme Funktion verwenden 462 00:23:50,500 --> 00:23:53,640 für eine ganze Array abzubilden. 463 00:23:53,640 --> 00:23:58,466 >> Also noch ein großes Thema, über im Gespräch JavaScript ist die Vorstellung eines Ereignisses. 464 00:23:58,466 --> 00:24:01,590 Ein Ereignis ist etwas, das passiert einfach Wenn ein Benutzer mit Ihrem Web interagiert 465 00:24:01,590 --> 00:24:04,715 Seite, so dass sie vielleicht etwas, klicken Sie auf, oder vielleicht die Seite fertig geladen ist, 466 00:24:04,715 --> 00:24:07,200 oder vielleicht umgezogen ihre Maus über etwas, 467 00:24:07,200 --> 00:24:09,290 oder sie haben etwas eingegeben haben in einem Eingabefeld. 468 00:24:09,290 --> 00:24:14,260 All diese Dinge sind Ereignisse , die auf unserer Webseite auftreten. 469 00:24:14,260 --> 00:24:17,460 Und Javascript muss der Fähigkeit, etwas zu unterstützen, 470 00:24:17,460 --> 00:24:21,760 rief eine Ereignisbehandlungsroutine, die ist eine Callback-Funktion, 471 00:24:21,760 --> 00:24:23,329 reagiert auf eine HTML-Ereignis. 472 00:24:23,329 --> 00:24:24,620 Und was ist ein Callback-Funktion? 473 00:24:24,620 --> 00:24:27,328 Nun, in der Regel ist es nur ein weiterer Name für eine anonyme Funktion. 474 00:24:27,328 --> 00:24:30,170 Es ist eine Funktion, auf ein Ereignis reagiert. 475 00:24:30,170 --> 00:24:34,130 Und das ist, wo wir die kommen Idee der Bindung bestimmter Funktionen 476 00:24:34,130 --> 00:24:38,060 auf eine bestimmte HTML-Attribut. 477 00:24:38,060 --> 00:24:41,420 Die meisten HTML-Elemente haben Unterstützung für ein Attribut 478 00:24:41,420 --> 00:24:45,170 dass wir nicht darüber reden im html Video für so etwas wie bei Klick 479 00:24:45,170 --> 00:24:50,540 oder auf schweben oder auf Last, alle diese Ereignisse 480 00:24:50,540 --> 00:24:53,120 dass man dann schreiben Funktionen , die sich mit diesen Ereignissen 481 00:24:53,120 --> 00:24:56,090 wenn diese Ereignisse treten auf Ihrer Webseite ein. 482 00:24:56,090 --> 00:24:59,170 >> Und so vielleicht Ihre html sieht ungefähr so ​​aus. 483 00:24:59,170 --> 00:25:02,240 Und ich habe zwei Buttons, Taste ein und Button zwei, 484 00:25:02,240 --> 00:25:04,620 und hier habe ich noch definiert nichts, 485 00:25:04,620 --> 00:25:11,170 aber das ist, wo das Attribut Klick ist offenbar Teil meiner HTML-Tag. 486 00:25:11,170 --> 00:25:15,220 So offensichtlich, wenn ich definieren, was ist geht in dieses Attributs, 487 00:25:15,220 --> 00:25:18,590 es geht um einige JavaScript sein Funktion, die auf das Ereignis reagiert 488 00:25:18,590 --> 00:25:24,360 vermutlich von einem Klick auf Taste eine Taste oder zwei. 489 00:25:24,360 --> 00:25:28,580 >> Was ist irgendwie cool daran ist, wir kann eine generische Ereignishandler zu schreiben. 490 00:25:28,580 --> 00:25:32,370 Und dieses Ereignis Handler erstellen Sie eine Ereignisobjekts. 491 00:25:32,370 --> 00:25:37,000 Und das Ereignisobjekt wird uns sagen, welche der beiden Schaltflächen geklickt wurde. 492 00:25:37,000 --> 00:25:38,064 Nun, wie geht das? 493 00:25:38,064 --> 00:25:39,730 Nun, es könnte in etwa so aussehen. 494 00:25:39,730 --> 00:25:44,860 So werden wir zuerst definieren unsere Knöpfe um eine Antwort auf den Rückruf haben 495 00:25:44,860 --> 00:25:47,470 Funktion, die aufgerufen wird, wenn die Schaltfläche geklickt wird, 496 00:25:47,470 --> 00:25:49,520 wir werden Ereigniswarnung Namen zu nennen. 497 00:25:49,520 --> 00:25:53,320 Und in beiden Fällen sind wir feststellen, Bestehen in diesem Ereignisparameter. 498 00:25:53,320 --> 00:25:55,460 Also haben wir diese Funktion aufrufen oder, wenn diese Funktion 499 00:25:55,460 --> 00:26:00,330 wird durch das Ereignis ausgelöst passiert, es geht um dieses Ereignis-Objekt zu erstellen 500 00:26:00,330 --> 00:26:03,300 und übergeben Sie es als ein Parameter, um den Namen zu alarmieren. 501 00:26:03,300 --> 00:26:07,270 Und das Ereignisobjekt ist gehen, um Informationen enthalten 502 00:26:07,270 --> 00:26:09,800 über die Schaltfläche angeklickt wurde. 503 00:26:09,800 --> 00:26:11,580 Und wie funktioniert sie das tun? 504 00:26:11,580 --> 00:26:13,654 Nun, es könnte in etwa so aussehen. 505 00:26:13,654 --> 00:26:15,570 So, jetzt in mein eigenes JavaScript-Datei, könnte ich 506 00:26:15,570 --> 00:26:17,420 haben, dies zu finden, Funktion Alarmname, der 507 00:26:17,420 --> 00:26:19,500 wieder übernimmt, dass die Ereignisparameter. 508 00:26:19,500 --> 00:26:24,640 Und dann ist hier, wo ich Erkennung welche Taste ausgelöst wurde, 509 00:26:24,640 --> 00:26:28,100 var Triggerereignis entspricht Punktquellenelement. 510 00:26:28,100 --> 00:26:33,150 Was war die Quelle, die erstellt Dieses Ereignisobjekt, das in übergeben wurde? 511 00:26:33,150 --> 00:26:36,390 War es eine Taste, oder war es Knopf zwei? 512 00:26:36,390 --> 00:26:40,710 >> Und dann ist hier alles, was ich tue, ist Ausdrucken trigger.innerhtml. 513 00:26:40,710 --> 00:26:43,860 Nun, in diesem Fall in diesem Zusammenhang trigger.innerhtml 514 00:26:43,860 --> 00:26:45,940 ist genau das, was Sie auf den Button geschrieben. 515 00:26:45,940 --> 00:26:48,830 Es passiert einfach so, wenn wir springen zu einem zweiten, würde das 516 00:26:48,830 --> 00:26:51,670 sein, was in zwischen diesen Schaltfläche Tags. 517 00:26:51,670 --> 00:26:54,150 Es wird eine Taste oder die Taste zwei sein. 518 00:26:54,150 --> 00:26:57,320 Und lassen Sie uns einen Blick auf wie dieser Event-Handler würde 519 00:26:57,320 --> 00:27:01,080 freuen, wenn wir sie in der Praxis ausgeführt werden. 520 00:27:01,080 --> 00:27:03,850 >> Also zunächst einmal, Sie haben eröffnet events.js, 521 00:27:03,850 --> 00:27:06,517 , die die JavaScript-Datei, wo ist Ich habe diese Funktion definiert. 522 00:27:06,517 --> 00:27:08,558 Und wie Sie sehen können, ist es so ziemlich genau das, was 523 00:27:08,558 --> 00:27:10,230 wir gerade auf dem Objektträger sah, vor einer Sekunde. 524 00:27:10,230 --> 00:27:14,890 Und ich will hinübergehen zu der Homepage die wir benutzt haben. 525 00:27:14,890 --> 00:27:17,660 Und ich habe hier Taste ein und zwei Button. 526 00:27:17,660 --> 00:27:19,820 Und ich werde auf die Schaltfläche mit einem Klick. 527 00:27:19,820 --> 00:27:23,930 Sie klickte auf den Button ein, wenn Sie können hier in der Warnmeldung angezeigt. 528 00:27:23,930 --> 00:27:25,810 OK. 529 00:27:25,810 --> 00:27:28,980 Klicken Sie auf die Schaltfläche zwei, die Sie auf eine Schaltfläche geklickt zwei. 530 00:27:28,980 --> 00:27:32,150 >> So dass beide Tasten haben die gleichen Funktionsaufruf, nicht wahr? 531 00:27:32,150 --> 00:27:35,840 Sie waren beide Alarmname Ereignis, aber das Ereignisobjekt 532 00:27:35,840 --> 00:27:41,900 dass wird erstellt, wenn wir Sie auf es sagt uns, welche Schaltfläche geklickt wurde. 533 00:27:41,900 --> 00:27:44,650 Wir hatten nicht zwei separate schreiben Funktionen oder befassen sich mit mit 534 00:27:44,650 --> 00:27:46,470 um zusätzliche Informationen weiterzugeben. 535 00:27:46,470 --> 00:27:48,220 Wir sind nur unter Berufung auf was JavaScript wird 536 00:27:48,220 --> 00:27:53,772 für uns zu tun, was zu schaffen ist Art von Event-Objekt in unserem Namen. 537 00:27:53,772 --> 00:27:56,730 Es gibt noch viel mehr zu JavaScript als was wir in diesem Video behandelt haben, 538 00:27:56,730 --> 00:27:58,521 aber mit diesen Grund sollten Sie 539 00:27:58,521 --> 00:28:00,690 eine recht lange Wege, Lernen alles, was Sie 540 00:28:00,690 --> 00:28:04,030 müssen Sie darüber wissen interessante Sprache. 541 00:28:04,030 --> 00:28:05,000 Ich bin Doug Lloyd. 542 00:28:05,000 --> 00:28:07,010 Dies ist CS50. 543 00:28:07,010 --> 00:28:09,181