[Musikwiedergabe] 

DOUG LLOYD: So jetzt wir alt Profis bei Web-Programmierung, oder? Und wir haben mehrere überdachte Sprachen in den einzelnen Videos. Und jetzt machen wir einen weiteren, JavaScript. 

Zuerst die gute Nachricht, JavaScript ist eine moderne Programmier Sprache ähnlich wie PHP, deren Syntax wird abgeleitet von C, so dass es ein guter Ort, um zu starten. Es ist ungefähr so ​​alt wie PHP, als auch, mit rund 20 Jahren. Es wurde um erfundene zur gleichen Zeit wie PHP. Und Javascript ist eigentlich ziemlich wesentlich für die Benutzererfahrung der Bahn. In der Tat gibt es drei Sprachen, die ich würde Art sagen, machen den Benutzererfahrung zu interagieren mit der Website, html, CSS und JavaScript. Und jetzt reden wir ein wenig über JavaScript. 

Die schlechte Nachricht, aber mit JavaScript ist dass es setzt eine Menge von Regeln für die selbst, und dann bricht es ihnen. Und Javascript tatsächlich sein kann Art von Herausforderung zu lernen, weil es im Gegensatz zu C und PHP, die sehr strukturiert sind und haben sehr strenge Regeln für wie Dinge funktionieren kann. JavaScript muss Art der so flexibel bekommen dass vielleicht die Dinge nicht zu gehen so funktionieren, wie wir erwarten, dass sie, und vielleicht werden wir wirklich nicht lernen können, unsere erste Programmiersprache als JavaScript. Vielleicht, weil es nicht der Fall ist setzte sich irgendwelche Regeln, und es nicht wirklich zusetzen gute Codierung Gewohnheiten. Aber jetzt haben wir hoffentlich entwickelt einige gute Programmiergewohnheiten, und so können wir beginnen, Beutezug in JavaScript ein wenig. 

JavaScript, ähnlich wie bei Öffnung schreiben up einer C-Datei mit einem Punkt C Verlängerung oder eine PHP-Datei mit einem Punkt PHP-Erweiterung, alles, was wir tun müssen, ist öffnen, eine Datei mit dem Punkt js Dateierweiterung. Wir brauchen keine besonderen Person haben Trennzeichen, wie wir in PHP taten. Diese Art von Winkel Halterung Fragezeichen PHP dass wir aus, dass die Art und Weise verwendet werden, Wir sagen unseren Browser, dass das, was wir haben, ist JavaScript ist, indem es in ein HTML-Tag, und wir werden ein wenig über zu sehen wie man das in nur einem Augenblick zu tun. 

Die andere Sache, die macht JavaScript anders, ist jedoch, dass es läuft Client-Seite. So erinnern, dass mit PHP wir nie wirklich sehen konnte, Die PHP, die eine Website unterstrichen. Wenn wir jemals gesehen die Seite Quelle, nur würden wir Link zu den HTML, das war von diesem PHP generiert. Aber JavaScript läuft Client-Seite. Ihr JavaScript auf Ihrem Computer ausgeführt. Und das ist, warum Sie tun können Dinge wie hinzuzufügen Blocker. Recht? Werbeblocker in der Regel durch getan alle von der JavaScript töten , dass auf einer bestimmten Website läuft. Und da sie zu haben, auf Ihrem Computer Client-Seite ausgeführt wird, können Sie einfach aufhören die JavaScript vollständig läuft. Das bedeutet auch, dass, wenn Sie verwenden, eine Website, die JavaScript enthält, Sie die JavaScript-Quellcode zu schicken Code als Teil Ihrer HTTP-Antwort an den Kunden, wenn sie fordern es. Und so könnten Sie nicht möchte Java- um wirklich sensible Dinge zu tun wie Weitergabe von Informationen über die Kennwörter der Benutzer zurück und her, weil sie tatsächlich gehen, um all den Quellcode zu erhalten, nicht nur die html, die erzeugt wird, wie es der Fall mit sagen PHP sein. 

Wie können wir also schließen JavaScript in unserem html, mit zu beginnen? Nun, ähnlich wie CSS, eigentlich, ist eine Art, wie wir es hier tun. Mit CSS haben wir zur Stil-Tags. Und innerhalb dieser Stil-Tags, können wir ein CSS-Stylesheet zu definieren. Ähnlich ist es mit JavaScript können wir eröffnen Script-Tags, ein weiteres HTML-Tag haben wir nicht reden über in unserem HTML-Video-, und schreiben Sie in zwischen den Script-Tags. Auch wenn, wie CSS, wir könnte außerhalb CSS-Dateien zu verknüpfen in und ziehen Sie sie in unser Programm auf diese Weise. Mit CSS können wir auch, entschuldigen Sie mich, mit JavaScript Wir können auch die Quelle angeben Attribut des Script-Tag in JavaScript zu verbinden getrennt, so dass Sie nicht tun, haben, um es in zu schreiben zwischen Script-Tags, die wir kann er sich mit der Verknüpfung dass Script-Tag als auch. Und so, wie mit dem Fall, wo mit CSS Wir empfehlen, dass es wahrscheinlich in Ihrem besten Interesse zu schreiben Ihre CSS in einer separaten Datei für den Fall, Sie es ändern müssen, in ähnlicher Weise zu tun, empfehlen wir dass Sie schreiben Sie Ihre JavaScript in separaten Dateien und verwenden Sie die Script-Tags Quelle zuschreiben, sie JavaScript binden in Ihre html, Ihre Web-Seite. 

So JavaScript-Variablen, werden wir zu sprechen beginnen, über die Syntax hier. Und wir durchmachen Diese Art von schneller, denn wir haben dies in PHP gemacht, so sollte dies alles ziemlich vertraut sein. So Variablen in JavaScript sind Variablen sehr ähnlich PHP. Es gibt keine Typangabe, und wenn Sie eine Variable einzuführen, Sie Präfix mit dem Schlüsselwort var. In PHP würde wir etwas tun wie diese, Dollar-Zeichen x. Das ist, wie wir gezeigt eine Variable, aber nein, wir nicht die Art erwähnen, der Variablen überhaupt. Wir würden uns etwas sagen Dollar-Zeichen x gleich 44 in PHP. Wenn wir taten das Gleiche in JavaScript, wir würden sagen var x gleich 44. So var ist sozusagen unsere Art der Einführung eines variabel. Das ist vielleicht ein bisschen mehr intuitive als nur Dollarzeichen variabel. 

Auch da gibt es keinen Datentypen, könnten wir dies tun mit einem beliebigen Datentyp, Zeichenketten, alles andere wäre all var sein. Conditionals, alle unsere alte Freunde aus C und PHP sind immer noch verfügbar, so haben wir, wenn, else if, else, Schalter und Frage Zeichen Doppelpunkt. Schalter übrigen ebenso flexibel wie war in PHP, aber alle diese sind Sie vertraut mit mittlerweile. Und in ähnlicher Weise mit Schlaufen die alten Favoriten aus, während, zu tun, während, und nach wie vor zur Verfügung zu uns. So wissen wir schon eine Menge der Grund JavaScript Art von Fundamentaldaten nur durch mit ziemlich viel Wissens jetzt zu C und PHP. 

Was ist mit Funktionen in JavaScript? Nun, ähnlich wie PHP jede Funktion ist mit dem Schlüsselwort function eingeführt. Sie sagen, Funktion, und dann beginnen, Ihre Funktion zu definieren. Was ist ein wenig anders, über JavaScript, ist jedoch die Fähigkeit zu haben, was heißt eine anonyme Funktion. So können Sie Funktionen definieren dass nicht über einen Namen. Dies ist etwas, was wir wirklich noch nicht gesehen habe. Wir werden wirklich nutzen das Konzept einer anonymen Funktion etwas später in dieser Video, denn es wird ein wenig mehr Sinn, in Zusammenhang wenn wir sie in einer bestimmten Situation zu sehen dass ich hier in Handarbeit gemacht. Aber lassen Sie uns nur einen Blick was eine einfache JavaScript- Funktion aussehen könnte. 

Also habe ich weitergemacht und meine CS50 IDE geöffnet und ich habe schon laufen Apache zu meinem Server laufen beginnen. Und ich diese Datei haben offen genannt Home.html. Und ich werde in ein wenig hier zu vergrößern. Und im Grunde können Sie das sehen, Home.html ist nur ein Haufen von Schaltflächen. Und ich bin an der Spitze behauptet sich hier dass dies die JavaScript Abschnitt Materialien. Es gibt also eine Reihe von Tasten, die hier, aber was diese Tasten eigentlich? 

Nun, wir werden zu meinem IED Kopf, und ich habe Home.html hier öffnen. Ganz am Anfang, Hier ist, wo ich die Verknüpfung in allen meinen JavaScript-Quelldateien. Recht? So habe ich anonymous.js, clock.js, Ich bin mit dem Quellattribut des script-Tags in Datei. So habe ich nicht geschrieben, jede JavaScript direkt in dieser Datei, aber ich habe in gezogen alle JavaScript Ich habe separat geschrieben. Und wenn wir hier, diese unten scrollen sollten alle sehen ein wenig vertraut mit ein wenig neue Syntax. Wir haben hier Header-Tag für Funktionen und dann eine Taste. Ich habe einen Eingang, der ein Typ-Taste ist, und anscheinend, wenn ich auf sie, Ich werde einige nennen funktionieren Alarm Datum. Und das ist, wie wir irgendwie mischen ein bisschen von JavaScript und HTML. Sie tatsächlich spielen ziemlich gut zusammen, und so offensichtlich, wenn Ich auf diese Schaltfläche klicken, werde ich einige Funktionsalarm Datum nennen. Und in ähnlicher Weise habe ich definiert Verhaltensweisen für alle anderen Tasten, sind auf dieser Seite home.html, was wir immer wiederkommen im Verlauf dieses Videos. Aber lassen Sie uns gehen Sie zurück nach oben hier und werfen Sie einen Blick bei clock.js, der das ist, JavaScript-Datei, die ich schrieb, hat diese erste Funktion werden wir einen Blick auf zu nehmen. Wie Sie sehen können, beginne ich meinen JavaScript Funktion mit dem Schlüsselwort-Funktion, und ich habe dieses eine bestimmte Name, es heißt Alarm Datum. Innerhalb von dort, ich anscheinend erstellen neue lokale Variable namens aktuellen Datum. Und ich werde ordnen ein gleich ein neues Datum. Und wir könnten in eine Menge zu bekommen detailliert dar, was ein Tag ist, und wirklich JavaScript ist so groß, dass wir unmöglich decken alles in einem Video. Aber es genügt zu sagen, das wird um mir ein Datenelement Rendite, kapselt das aktuelle Datum und die Uhrzeit. Ich Speichern dieser in einer Variablen, die ich offenbar werde aktuelle Datum zu alarmieren. 

Nun, was hat alert aktuelle Datum aus? Werfen wir einen Blick auf die Datei selbst über dem Rücken im Browser-Fenster. Also noch einmal, das ist die Taste, die ich haben, diesem benannte Funktion gebunden. Und ich dort klicken Sie darauf und schauen Sie, was es tat, alarmiert es. Es tauchte diese Art von Box erzählen mir, dass die aktuelle Zeit, offenbar es ist am 4. November 10.43.43 in den Morgen. Und wenn ich noch einmal klicken, jetzt Es ist ein paar Sekunden später, nicht wahr? Also das ist alles, diese Funktion tut. Wenn ich auf diese Schaltfläche, es erscheint eine Warnmeldung an mich. Es gibt also wirklich nicht zu viel, um Funktionen Das ist anders als PHP, nur ein wenig an neuer Syntax das kommt mit der Arbeit mit JavaScript. 

Arrays in JavaScript ziemlich einfach. Um ein Array zu deklarieren, verwenden Sie Die eckigen Klammern Syntax dass wir mit PHP vertraut. Und ähnlich wie PHP, wir können auch Datentypen mischen. Also das Array, sowohl dieser Arrays würden ist vollkommen legitim JavaScript. Eine, die alle ganzen Zahlen ist, und eine, wird verschiedene Datentypen gemischt. 

Was ist etwas ganz anderes, in JavaScript, obwohl? Das ist die Vorstellung von einem Objekt. Also vielleicht Sie gehört haben, Objektorientiertes Programmieren. Wir haben nicht viel davon in CS50 zu tun, aber wir werden ein bisschen zu tun hier im Kontext von JavaScript. Jetzt JavaScript hat die Fähigkeit, verhalten, als einer objektorientierten Programmiersprache Sprache, aber sie nicht selbst ausschließlich eine objektorientierte Programmiersprache. Und dies wiederum kommt zurück nach, warum ich sagte, es kann sehr herausfordernd sein zu erfahren, JavaScript als Ihre erste Programmierung Sprache, weil es nicht der Fall ist wirklich für einen bestimmten Paradigma. 

C auf der anderen Seite ist ein funktionale Programmiersprache. Wenn wir wollen, sind Funktionen Art der Big Boss Man, nicht wahr? Sie diktieren, was geschieht alles andere. Wir wollen die Variablen ändern, wir nennen Funktionen. Wir Dinge tun, um Funktionen. Objekte stattdessen in eine objektorientierte Sprache, Objekte Art der Star zu werden und Funktionen geworden Art von Sekundär. Aber was ist ein Ziel, was ist diese Vorstellung von einem Objekt? Nun, wenn es hilft, denken darüber über zuerst sortieren der wie eine C-Struktur oder einer Struktur dass wir zu, bevor gelernt haben. In C, enthält eine Struktur, eine Anzahl von Feldern, und vielleicht könnten wir jetzt zu starten rufen Sie diese Felder Eigenschaften. Aber die Eigenschaften nie wirklich stehen für sich selbst, nicht wahr? Wenn I definiert eine Struktur für ein Fahrzeug wie dies mit der folgenden zwei Felder oder Eigenschaften eines ein ganze Zahl für das Jahr des Autos und ein anderer 10 Zeichen String für das Modell des Autos, Ich kann so etwas wie das zu sagen, Ich kann eine neue Variable deklarieren vom Typ struct Auto herbie. Und dann kann ich etwas sagen, wie herbie.year gleich 1963, und herbie.model gleich Beetle. Das ist ok. Ich bin mit den Feldern in der Zusammenhang mit der Struktur, aber ich konnte es nie nur sagen, so etwas wie dieses. Recht? Ich kann nicht mit den Feldnamen unabhängig von der Struktur. Es ist irgendwie eine grundlegende Sache. 

So Felder wobei von grundlegender Bedeutung für C-Strukturen sind sehr ähnlich zu Eigenschaften wobei von grundlegender Bedeutung für JavaScript-Objekte. Aber was sie macht Besonders interessant ist, dass Objekte können auch, was werden als Methoden, die wirklich sind nur eine Phantasie Wort für Funktionen, inhärent zu dem Objekt als gut. Es ist also eine Funktion, die nur sein kann im Zusammenhang mit einem Objekt aufgerufen. Nur ein Objekt, das festgelegt hat diese Funktion innerhalb seiner, Wenn Sie über einen denken, Struktur, die Funktion innerhalb diejenigen definiert, definiert geschweiften Klammern der Struktur. So bedeutet es nur, etwas der Struktur. Und das ist eine Art, was wir tun hier mit Objekten und Methoden. Es ist im Grunde, wie wir sind Definition einer Funktion, dass nur sinnvoll, auf eine besondere Aufgabe, und so haben wir rufen, dass eine Methode des Objekts. Und wir haben nie anrufen können, dass Funktion unabhängig von dem Objekt, wie können wir nicht sagen, Jahr oder Modell unabhängig von der Struktur in C. 

So funktionalen Programmierung Paradigmen in etwa so aussehen. Funktion und dann, wenn Sie weitergeben in dem Objekt als Parameter. In einer objektorientierten Programmiersprache Sprachen, diese Art der bekommt umgedreht, und wir würden zu denken es so, object.function. So ist es Art von diesem Punkt Betreiber wieder was bedeutet, dass es irgendeine Art von Immobilie oder ein Attribut des Objekts selbst. Aber das ist, was ein Objekt orientierten Programmiersprache tun könnte, um eine Funktion zu machen rufen Sie auf einer Methode, wieder, die ist nur ein besonderes Wort für eine Funktion daß inhärent auf ein Objekt. Dies ist, was das Syntax aussehen könnte. Und so werden wir beginnen, einige sehen Dies im Zusammenhang mit JavaScript. 

Sie können auch über ein Objekt zu denken ein bisschen wie ein assoziatives Array, die wir mit PHP vertraut. Denken Sie daran, ein assoziatives Array erlaubt uns, Schlüssel-Wert-Paare müssen, statt der mit Indizes 0, eins, zwei, drei, und so weiter, als ob wir von C verwendet Arrays. Assoziative Arrays abbilden Wörter, wie zum Beispiel in den PHP-Video, wir sprachen Belag von Pizzas. Und so hatten wir ein Array genannt Pizzas, und wir hatten Käse war ein wichtiger und 8,99 $ war die Wert und dann pepperoni war ein wichtiger, $ 9,99 war ein Wert, und so weiter. Und so können wir auch über einen denken, Objekt Art ähnlich einem assoziativen Array. Und so diese Syntax hier würde ein neues Objekt erstellen genannt herbie mit zwei Objekte darin. Jahr, die den Wert 1963 zugeordnet ist, und Modell, das die Zeichenfolge zugewiesen ist Käfer. 

Und hier bemerken, dass ich mit einfache Anführungszeichen in JavaScript. Sie können einfache oder doppelte Anführungszeichen verwenden wenn Sie über Saiten sprechen. Es ist nur konventionell der Fall, dass die meisten Zeiten wenn Sie Schreiben von JavaScript, Sie gerade einfache Anführungszeichen. Aber ich konnte doppelte Anführungszeichen hier zu verwenden, und das wäre auch völlig in Ordnung zu sein. 

Also denken Sie daran, wie in PHP hatten wir diese Vorstellung der eine für jede Schleife, die uns erlauben würde, überlaufen alle der Schlüsselwert Paaren eines assoziativen Array, weil wir nicht diese Fähigkeit, durchlaufen haben bis 0, ein, zwei, drei, vier, und so weiter? JavaScript muss etwas sehr ähnlich, aber es ist nicht genannt für jede Schleife, es in Schleifen genannt wird a. Also, wenn ich sagte zu mir, wie Diese, zum var Schlüssel in Objekt, dass ist irgendwie ähnlich sagen für jeden etwas als etwas. Aber alles, was ich hier mache ist Iteration durch all die Schlüssel meines Objekts. Und im Inneren des lockigen Hosenträger gibt, würde ich benutzen Objekt eckigen Klammern Schlüssel zu beziehen zu dem Wert an dieser Schlüsselstelle. 

Alternativ gibt es auch ein anderer Ansatz. Wenn ich einfach nur kümmern uns um die Werte, kann ich für Schlüssel des Objekts sagen, und verwenden Sie nur Schlüssel innen. Also für var Schlüssel in Objekt, ich habe Objekt eckigen Klammern verwenden Schlüssel in der Schleife. Für var Schlüssel des Objektes, kann ich benutzen Sie einfach Schlüssel in der Schleife, denn ich bin nur spezifisch Gespräch über die Werte gibt. 

Lassen Sie uns also vielleicht einen sehen Sie den Unterschied nur um schnell zeigen, der Unterschied zwischen den vier in und aus mit einem sehr spezifischen Array, das wir hier haben, Woche Array. Also muss ich ein neues Array zu finden dass ich mit sieben Saiten gefüllt, Montag Dienstag Mittwoch, Donnerstag, Freitag, Samstag, Sonntag. Und ich möchte jetzt laufen Durch diese Anordnung, Ausdrucken bestimmte Informationen. Wenn ich einen für die in der Schleife zum Ausdrucken Informationen was denken Sie, werde ich bekommen? Nun, lassen Sie uns einen Blick. Und bevor wir über springen Zu meinen Browser-Fenster, weiß nur, dass console.log ist sozusagen ein Weise des Tuns einen Druck F in JavaScript. Aber was ist die Konsole? Nun, das ist, was wir gehen Sie einen Blick auf jetzt. 

OK, so dass wir hier sind wieder da in meinem Browserfenster, und ich werde zu öffnen meine Entwickler-Tools. Wieder, ich bin nur schlagen F12 zu öffnen, Entwickler-Tools. Und feststellen, dass hier bei der top Ich habe Konsole ausgewählt. Das ist also der Vorstellung, einer Entwicklerkonsole und es wird uns erlauben, Drucken Informationen aus, Art wie des Terminals, aber wie Sie ein wenig später sehen werden, wir können auch Typinformationen in mit unserer Webseite interagieren. Ich werde in ein wenig hier zu vergrößern, und ich werde nun auf die in Prüfung. Und vier in test-- Ich werde nicht zeigen Sie den Code für die es jetzt, aber Sie werden es, wenn erhalten Sie Laden Sie die Quellcode, mit dieser assoziiert video-- ist nur, dass für die in der Schleife dass wir sahen nur eine zweiten vor auf der Folie. 

So ich werde Klick, der Taste, und hier, ist hier, was hat sich in der gedruckten Konsole, 0, ein, zwei, drei, vier, fünf, sechs. Ich habe nicht die Informationen auszudrucken innerhalb dieser Array-Standorten, weil ich ein für die in der Schleife. Und im Inneren des Körpers der Schleife I gerade aus-Taste ausgedruckt keine Objektschlüssel. Aber wenn ich jetzt klar meine Konsole, und ich wechseln Sie zur der Test, und vier von Test Ich sage, die ich für Schleifen statt und ausdrucken Schlüssel, wenn ich Sie auf, dass, jetzt bin ich der tatsächlichen Elemente innerhalb meines Objekts oder meine Anordnung in diesem Fall. Meine Auswahl an Wochentagen. Ich druckte Montag, Dienstag Mittwoch. Also das ist die Differenz zwischen a für in-Schleife, die ausdruckt nur die Tasten, wenn Sie nur verwenden Schlüssel innerhalb des Körpers der Schleife, und eine für die der Schleife, die Drucke aus den Werten, wenn Sie nur verwenden, Schlüssel in den Körper der Schleife. 

Also gut, wie wir jetzt zu starten verketten Zeichenfolgen und vielleicht verwechseln einige Variablen mit Interpolation als wären wir in der Lage, in PHP zu tun? Nun, wir sind ziemlich vertraut mit diesen Eintrag von PHP. Dies ist, wie wir es mit dem zu tun Punkt-Operator, um Zeichenfolgen zu verketten. In JavaScript, obwohl, wir tatsächlich etwas verwenden so genannte Plus-Operator, der ist vielleicht sogar ein bisschen mehr intuitive, nicht wahr? Wir fügen eine Reihe von Strings zusammen. Also lassen Sie den Kopf nach hinten vorbei und sehen, was diese gedruckt wird, wenn wir versuchen, ausdrucken alle Informationen, die in der Woche Array. In Ordnung, so unter hier unter String-Verkettung, Ich habe zwei Möglichkeiten, string Gebäude V1 und V2 String Gebäude. Und wir werden sehen, warum wir benötigen V2 in einer Sekunde. Aber ich werde Sie auf String Gebäude V1, die ist der Code, wir waren nur einen Blick auf, die console.log mit allen Pluspunkte. Lassen Sie uns, wenn diese Drucke zu sehen Sie heraus, was wir erwarten. 

Montag ist der Tag Nummer 01 der Woche, Dienstag ist Tag der Nummer 11 der Woche. Nun, was ich versucht habe zu tun, es zu bekommen es auszudrucken Montag Tagesnummer eine, Dienstag ist heute die Nummer zwei. Aber es scheint, als wäre ich immer Ausdruck einer. Nun, warum ist das so? Nun, es stellt sich heraus, noch einen Blick in diesem kleinen Code-Snippet hier. Beachten Sie, dass wir mit dem Plus Betreiber in zwei unterschiedlichen Kontexten. 

Und so ist hier, wo vielleicht Dinge dass wir Art gesagt, Oh, es ist so toll. Wir arbeiten nicht mit Datentypen mehr beschäftigen. Aber hier ist, wo die Tatsache, dass wir verlieren, Datentypen kann tatsächlich ein wenig sein ein Problem für uns. Nun, da der Plus-Operator wird verwendet, verketten Zeichenfolgen und fügen Nummern zusammen, ist Javascript seine beste Schätzung zu machen , was ich will, dass es für mich tun. Und in diesem Fall, Sie ahnen es falsch. Es ist einfach verketteten Tag, das wäre 0, eins, zwei, drei, vier, fünf oder sechs, und dann ist es nur verkettet dass und dann verkettet ein. Es hat nicht wirklich sie zusammen fügen. Und so sind diese Sprachen, PHP und JavaScript, dass abstrahiert dieser Begriff der Typen, Sie müssen nicht mehr, damit umzugehen. Sie haben noch Typen unter der Haube. Und wir können, in Situationen, wie diese, nutzen diese Tatsache indem er sagte etwas, wie vielleicht dieser, die sagt JavaScript, um die So behandeln Sie dies als eine ganze Zahl, nicht behandeln es als eine Zeichenfolge, auch wenn wir zusammen mischen Saiten und Zahlen hier. 

Es ist nur eines der Dinge, dass es scheint, so groß, in Zusammenhang dass wir nicht haben, befassen sich mit mehr Arten, aber manchmal werden Sie in eine Situation führen genau wie dieser, wo die Tatsache, dass Sie haben nicht die Kontrolle über Typen können Sie nach hinten losgehen wenn Sie nicht vorsichtig sind. Und so, wenn wir knallen zurück über den IDE, ich bin gehen, um wieder klar aus meiner Konsole, und ich werde String klicken Gebäude-Version zwei, die ist, wo ich verwende diesen Parse-int-Funktion. Jetzt ist es auszudrucken Informationen, die ich erwarte. Montag Tag Nummer eins, Dienstag ist heute die Nummer zwei, und so weiter. 

Lassen Sie uns also über die Funktionen wieder zu sprechen. Ich habe versprochen, wir würden über anonyme sprechen Funktionen, und jetzt ist der Kontext für die ist endlich da. Also, bevor wir das tun, lassen Sie uns wieder sprechen über Arrays nur für eine Sekunde. So Arrays sind eine spezielle Bei einem Objekt. In der Tat, alles in JavaScript ist eigentlich ein Objekt. So funktioniert ein Spezialfall eines Objekts, ganze Zahlen sind eine spezielle Bei einem Objekt, aber Arrays spezifisch haben eine Reihe von Verfahren. Denken Sie daran, weil sie Objekte sind, sie Eigenschaften und Methoden haben. Sie haben eine Reihe von Methoden, kann auf die Objekte angewendet werden. Es gibt eine Methode namens Größe, array.size, was wird die Rückkehr Sie wie man erwarten könnte die Anzahl der Elemente im Array. Array.pop, Art wie unsere Vorstellung von Abspringen aus einem Stapel, wenn Sie sich erinnern, von unserem Stapel Video, Entfernt das letzte Element aus dem Array. Array.push fügt ein neues Element am Ende eines Arrays. Array.shift ist eine Art wie DQ, Spleiße it out das erste Element in einem Array. 

Aber es gibt auch eine andere Sonder Verfahren eines Arrays namens Karte. Und das ist eine Art von interessantes Konzept. Also, was ist die Idee einer Karte? Sie werden tatsächlich sehen diese in verschiedenen anderen Sprachen, und wir reden hier nicht über ein Gespräch Art Kartographen Karte hier, wir über eine Mapping-Funktion sprechen. Im Zusammenhang sind wir reden hier eine Karte ist eine spezielle Operation, die wir können auf einem Array durchzuführen um eine bestimmte Funktion gelten zu jedem Element des Arrays. und so würden wir sagen, dass in Dieser Fall, vielleicht Array.map, und nach innen von ihm, wir sind vorbei in der Karte ist eine Funktion, die wir wollen auf jedem einzelnen Element angewendet werden. Es ist also eine Art analog zu verwenden eine Schleife, um jedes Element zu iterieren und Anwendung einer bestimmten Funktion an jedem Element, nur JavaScript ist diese eingebaut Vorstellung einer Zuordnung, die angewendet werden können. Und das ist ein großer Zusammenhang zu reden über eine anonyme Funktion. 

Also lassen Sie uns sagen, wir haben Diese Anordnung von Zahlen. Es heißt nums, und es hat fünf Dinge darin, eins, zwei, drei, vier, fünf. Jetzt möchte ich einige Karte Funktion auf diesem Array. Ich möchte eine Funktion haben, gelten zu jedem Element des Arrays. Nun, lassen Sie uns sagen, dass das, was ich will zu tun ist einfach doppelt alle Elemente. Was ich tun konnte, ist nur eine Schleife verwenden für var I gleich 0 ist, ist kleiner als ich oder gleich 4, I und, und, und doppelklicken Sie dann jede einzelne Nummer. Aber ich kann auch etwas tun. Ich kann sagen, nums war früher eins zwei drei vier fünf, Jetzt aber, würde ich mag dich tragen Sie eine Abbildung auf diesem Array wo ich möchte, dass Sie jede Zahl zu verdoppeln. Und das ist genau Was passiert hier. Aber beachten Sie, was ich vorbei in wie das Argument zur Karte. Dies ist eine anonyme Funktion. Und beachten Sie, ich habe nicht angegeben diese Funktion ein Name, Ich habe es nur bei einer Parameterliste. Und so ist dies ein Beispiel einer anonymen Funktion. 

Wir in der Regel nie nennen würde dies Funktion außerhalb des Kontexts der Karte. Wir definieren es als Parameter auf der Karte, und so haben wir nicht wirklich müssen Sie einen Namen für sie haben, wenn die einzige Sache, die kümmert sich um ist Karte und es ist richtig definiert es Innenseite der Karte. Und dies ist eine anonyme Funktion. Wir waren nicht in der Lage , dies vorher zu tun. Karte einige Funktion, übernimmt einen Parameter, num, und was das Funktion tut ist Renditen nummer mal 2. Und so nach dieser Mapping angewendet wurde, das ist jetzt, was nums Aussehen dergleichen, mit zwei, vier, sechs, acht, 10. Und wir werden über den Pop Meine Browser-Fenster und nur Schau dir das an sehr schnell als gut. 

So habe ich eine andere Taste hier in meine Homepage genannten Doppel. Und wenn ich einen Doppelklick auf, und es sagt me, bevor es ein, zwei, drei, vier, fünf nach zwei, vier, sechs, acht, 10. Und wenn ich zurück und doppelklicken Sie auf wieder, zwei, vier, sechs, acht, 10. Und dann nach, vier, acht, 12, 16, und 20. Und was mache ich in dieser Funktion? Nun, wenn wir nur Pop über zu IDE, und Ich ziehe meine anonyme Funktion, hier on line sieben bis 13, ich bin denn hier ein wenig Phantasie Arbeit, aber ich bin einfach nur auszudrucken was ist derzeit in der Anordnung. Dann auf der Linie 16, 17, und 18, da ist meine Karte. Dies ist, wo ich die Anwendung dieser Verdoppelung Funktion, um jedes einzelne Element. Und dann ein wenig weiter unten, Ich bin einfach nur das gleiche tun Ich war vor Abgesehen jetzt bin ich Ausdrucken der Inhalte des Arrays danach. Aber alles, was ich hier getan wird nur eine anonyme Funktion verwenden für eine ganze Array abzubilden. 

Also noch ein großes Thema, über im Gespräch JavaScript ist die Vorstellung eines Ereignisses. Ein Ereignis ist etwas, das passiert einfach Wenn ein Benutzer mit Ihrem Web interagiert Seite, so dass sie vielleicht etwas, klicken Sie auf, oder vielleicht die Seite fertig geladen ist, oder vielleicht umgezogen ihre Maus über etwas, oder sie haben etwas eingegeben haben in einem Eingabefeld. All diese Dinge sind Ereignisse , die auf unserer Webseite auftreten. Und Javascript muss der Fähigkeit, etwas zu unterstützen, rief eine Ereignisbehandlungsroutine, die ist eine Callback-Funktion, reagiert auf eine HTML-Ereignis. Und was ist ein Callback-Funktion? Nun, in der Regel ist es nur ein weiterer Name für eine anonyme Funktion. Es ist eine Funktion, auf ein Ereignis reagiert. Und das ist, wo wir die kommen Idee der Bindung bestimmter Funktionen auf eine bestimmte HTML-Attribut. Die meisten HTML-Elemente haben Unterstützung für ein Attribut dass wir nicht darüber reden im html Video für so etwas wie bei Klick oder auf schweben oder auf Last, alle diese Ereignisse dass man dann schreiben Funktionen , die sich mit diesen Ereignissen wenn diese Ereignisse treten auf Ihrer Webseite ein. 

Und so vielleicht Ihre html sieht ungefähr so ​​aus. Und ich habe zwei Buttons, Taste ein und Button zwei, und hier habe ich noch definiert nichts, aber das ist, wo das Attribut Klick ist offenbar Teil meiner HTML-Tag. So offensichtlich, wenn ich definieren, was ist geht in dieses Attributs, es geht um einige JavaScript sein Funktion, die auf das Ereignis reagiert vermutlich von einem Klick auf Taste eine Taste oder zwei. 

Was ist irgendwie cool daran ist, wir kann eine generische Ereignishandler zu schreiben. Und dieses Ereignis Handler erstellen Sie eine Ereignisobjekts. Und das Ereignisobjekt wird uns sagen, welche der beiden Schaltflächen geklickt wurde. Nun, wie geht das? Nun, es könnte in etwa so aussehen. So werden wir zuerst definieren unsere Knöpfe um eine Antwort auf den Rückruf haben Funktion, die aufgerufen wird, wenn die Schaltfläche geklickt wird, wir werden Ereigniswarnung Namen zu nennen. Und in beiden Fällen sind wir feststellen, Bestehen in diesem Ereignisparameter. Also haben wir diese Funktion aufrufen oder, wenn diese Funktion wird durch das Ereignis ausgelöst passiert, es geht um dieses Ereignis-Objekt zu erstellen und übergeben Sie es als ein Parameter, um den Namen zu alarmieren. Und das Ereignisobjekt ist gehen, um Informationen enthalten über die Schaltfläche angeklickt wurde. Und wie funktioniert sie das tun? Nun, es könnte in etwa so aussehen. So, jetzt in mein eigenes JavaScript-Datei, könnte ich haben, dies zu finden, Funktion Alarmname, der wieder übernimmt, dass die Ereignisparameter. Und dann ist hier, wo ich Erkennung welche Taste ausgelöst wurde, var Triggerereignis entspricht Punktquellenelement. Was war die Quelle, die erstellt Dieses Ereignisobjekt, das in übergeben wurde? War es eine Taste, oder war es Knopf zwei? 

Und dann ist hier alles, was ich tue, ist Ausdrucken trigger.innerhtml. Nun, in diesem Fall in diesem Zusammenhang trigger.innerhtml ist genau das, was Sie auf den Button geschrieben. Es passiert einfach so, wenn wir springen zu einem zweiten, würde das sein, was in zwischen diesen Schaltfläche Tags. Es wird eine Taste oder die Taste zwei sein. Und lassen Sie uns einen Blick auf wie dieser Event-Handler würde freuen, wenn wir sie in der Praxis ausgeführt werden. 

Also zunächst einmal, Sie haben eröffnet events.js, , die die JavaScript-Datei, wo ist Ich habe diese Funktion definiert. Und wie Sie sehen können, ist es so ziemlich genau das, was wir gerade auf dem Objektträger sah, vor einer Sekunde. Und ich will hinübergehen zu der Homepage die wir benutzt haben. Und ich habe hier Taste ein und zwei Button. Und ich werde auf die Schaltfläche mit einem Klick. Sie klickte auf den Button ein, wenn Sie können hier in der Warnmeldung angezeigt. OK. Klicken Sie auf die Schaltfläche zwei, die Sie auf eine Schaltfläche geklickt zwei. 

So dass beide Tasten haben die gleichen Funktionsaufruf, nicht wahr? Sie waren beide Alarmname Ereignis, aber das Ereignisobjekt dass wird erstellt, wenn wir Sie auf es sagt uns, welche Schaltfläche geklickt wurde. Wir hatten nicht zwei separate schreiben Funktionen oder befassen sich mit mit um zusätzliche Informationen weiterzugeben. Wir sind nur unter Berufung auf was JavaScript wird für uns zu tun, was zu schaffen ist Art von Event-Objekt in unserem Namen. Es gibt noch viel mehr zu JavaScript als was wir in diesem Video behandelt haben, aber mit diesen Grund sollten Sie eine recht lange Wege, Lernen alles, was Sie müssen Sie darüber wissen interessante Sprache. Ich bin Doug Lloyd. Dies ist CS50.