TOMAS REIMERS: Hallo, alle zusammen. Mein Name ist Tomas Reimers. 

MIKE RIZZO: Und ich bin Mike Rizzo. 

TOMAS REIMERS: Wir sind zwei von CS50s TS. Und heute sind wir die führende Seminar JavaScript und CSS für Web-Anwendungen. Wenn Sie folgen möchten, die Link ist gleich da drüben. Und wissen Sie, es zu errichten wollen auf dem Computer kurz? 

Es ist der Link. Es ist eine kleine Website, die Links zu hat alle Ressourcen, wir werden sein Sie zeigt heute und hat auch eine Menge nützliche Informationen von uns geschrieben Lesen Sie mehr in der Tiefe, wenn Sie wieder gehen, und Sie versuchen, sich daran zu erinnern, was du genau das haben wir gesagt, was du warst reden, et cetera. 

MIKE RIZZO: In Ordnung. Lassen Sie uns also beginnen. 

TOMAS REIMERS: So möchten Sie starten? OK. 

MIKE RIZZO: Ja. Also zuerst wollten wir mit einem breiten starten Übersicht über das Internet und Dateitypen bei der Gestaltung von Websites. Während dieser Präsentation wollen wir bekommen in JavaScript in viel viel später, wollten wir beginnen mit gerade, Art, wie Augenansicht des Vogels von dem, was eine Website ist und wie um über die Gestaltung ein, dass Website für den Start. 

Also Jungs, an dieser Stelle - mit ihr wird von Freitag Nacht - sollte Ihre CS50 Finanz eingereicht Problem setzt. Ich hoffe, das war ein guter Geschmack von welcher Web-Programmierung kann. Aber hier wollen wir, eine Art, geben Sie eine andere Geschmack, als auch. 

TOMAS REIMERS: Also nur zur Erinnerung, was passiert, wenn Sie in Ihrer URL zu geben Ihren Web-Browser, erhält diese URL sah in den Computer. Und Ihren Computer angeschlossen an einen anderen Computer, die Hosts, die Website. OK, also, wenn Sie google.com gehen, sind Sie zu einem der Google in Verbindung Computer, was den Dateien für google.com. 

Sie fragt dann nach einer bestimmten Datei. Also, wenn Sie gehen - Ich weiß nicht - example.com / index.html oder / test.html, Sie gehen, um zu bitten sind dass bestimmte Datei. Und der Webserver gehen um es an Sie zurück. 

Dann, wenn Sie durch diese Datei gehen - sobald Sie Computer bekommt, dass Datei - es wird starten , um eine Webseite zu bauen. So, jetzt hat es die HTML-Datei, die Art, wie das ist Struktur der Web-Seite. Die HTML-Datei könnte auch Referenz CSS-Dateien, die die Definition Stil der Web-Seite. 

JavaScript-Dateien, die definiert, Interaktion mit der Webseite. Bilddateien, die nur Bilder sind. Und möglicherweise Links zu anderen HTML-Dateien, die Sie dann besuchen. 

MIKE RIZZO: OK, toll. So euch alle, vielleicht, sorgfältig Ihre lokale Host eingerichtet auf Ihrem virtuellen Maschine. Und das nur, irgendwie ist die lokale Domain, die Ihren Computer-Hosts für Sie auf eigene IP-Adresse. 

So in das, dann können Sie hinzufügen um es zu Ihrer eigenen Web-Seiten. Ich meine, in CS50 Finanzen, die Sie haben sollten hinzugefügt einige HTML-Seiten, die sind, Art, in der PHP-Wrapper verpackt. Aber letztlich, was Ihre PHP-Seiten HTML Ausgabe wurden war. 

Aber denken zurück an den Anfang der PSET, mussten wir gesetzt die Berechtigungen für alles, oder? Also das im Grunde nur lässt uns wissen, wer lesen, schreiben und möglicherweise ausführen jede der Dateien. So werden wir eine schnelle tun - hm? 

TOMAS REIMERS: Also wir gehen um eine schnelle Demo zu tun. Also nur, um Sie daran erinnern, wenn eine Verbindung zu den Google-Computer - wer auch immer - und zuerst fragen nach einer Datei, den Computer muss sicherstellen, dass Sie berechtigt sind tatsächlich anzeigen, Datei oder gelesen, dass Datei, weil Sie nicht nur fragen kann für jede Datei auf dem Computer, oder? Das wäre ein Sicherheitsrisiko sein. 

Also Dateien auf den Systemen, die wir verwenden, wie Dieses Gerät CS50, haben drei allgemeinen Menschen, die können Berechtigungen für so etwas. Die erste ist die eigentliche Eigentümer der Datei. Die zweite ist die Gruppe, die die Datei gehört. Wir gehen nicht zu fokussieren zu viel auf die. Und die letzte Sache ist, eine Art, wie die Welt oder wie jeder andere auch, wer nicht spezifisch auf diese Datei und nicht haben keine Eigentumsrechte über sie. 

Wenn wir also Besitzer, Gruppe, und dann weltweit. Und dann wird jede dieser Gruppen können können eine von drei Berechtigungen verfügen, OK, oder mehrere von ihnen. Sie können Leseberechtigungen verfügen. Sie können Berechtigungen verfügen. Und Sie haben können Ausführungsberechtigungen. 

Also in Bezug auf tatsächliche Dateitypen lesen Erlaubnis ist wie wirklich lesen der Inhalt der Datei. Ein Recht Genehmigung ist schriftlich auf die Datei. Ein Ausführungsberechtigung läuft die Datei, wie Sie, wenn Sie eine zu tun laufen Ihre CS50-Projekte. 

Also, wenn wir über das Denken Dateien wie wenn wir, um eine HTML lesen müssen Datei, die Welt braucht lesbar, oder? Vermutlich auch der Besitzer will in der Lage sein, um die Datei zu bearbeiten. So hat der Besitzer gehen zu müssen, Lese-und Schreibberechtigungen. Sie brauchen nicht wirklich auszuführen. 

Group, werden wir behandeln die gleiche wie die Welt für den Moment. Also brauchen sie Leseberechtigungen. Aber sie brauchen Schreib oder Ausführungsberechtigungen. Und nun, wenn wir denken zurück an ehemalige Psets, was wir wissen, ist diese Art von binären aussehen, oder? 1 steht für ja. 0 für nein. Und wir tatsächlich übersetzen kann dies zu Binär. 

So würden 110 in binärer 6 sein. 100 würde 4 sein. Gleiche mit Welt. So ist die Zahl, die Sie für die bekommen würde Berechtigungen für das würde 644 sein. 

MIKE RIZZO: Und wenn Sie zurück denken, um wenn Sie etwas chmod, glaube ich, sie gaben dem Problem stellen Sie die Beispiel, wo Sie tun können so etwas wie chmod 644 und dann den Dateinamen. Die 644 dann können Sie nun direkt sehen, woher das kommt. So hoffnungsvoll das macht, dass ein wenig mehr klar. 

Und dann der Übersichtlichkeit Sie guy - oh ja, hier ist das schon wieder. Also 600 dann wäre genau das Beispiel gaben wir hier, wo der Besitzer hat Lese-und Recht-Berechtigungen während die Gruppe Welt und haben keine Rechte haben Zugriff auf die Datei. 

TOMAS REIMERS: Und dann haben wir eine schnelle Liste der häufigsten Berechtigungen. So Verzeichnisse, möchten Sie tatsächlich chmod 711. Schnell beiseite - für ein Verzeichnis zu haben, Ausführbarkeitsberechtigung bedeutet, in der Lage sein, , um das Verzeichnis zu öffnen. Bilder, CSS, JavaScript, HTML Bedürfnisse 644, weil im Grunde die Welt Bedürfnisse Leseberechtigungen. 

Und PHP, die ihr Jungs haben gesehen, auch wenn wir nicht darüber reden, streng ist typischerweise mit chmod 600 Genehmigung, weil es mit laufen die Berechtigungen des Eigentümers. Wenigstens auf das Gerät. 

MIKE RIZZO: Also, wenn Sie nicht speziell angeben, welche Art von Datei Sie wollen eigentlich die Einstellung bis dieser Präsentation - wir hatten ein Problem damit, weil alles, was nicht korrekt chmod - Sie gehen zu, eine Art, eine zu bekommen sind Fehler verboten, dass die Website eigentlich nicht über die Berechtigung zu, was Datei zugreifen Sie wollen, dass es zugreifen. Und selbstverständlich, dass festgelegt werden kann - wie in Problem-Set - durch Änderung Berechtigungen entsprechend. 

TOMAS REIMERS: Und der letzte Kommentar schnell die lokale Entwicklung ist - wir brachte diese, aber wir wollten nur , um es wieder zu bringen - wenn Sie fragen, für einen Server - so lokalen Host zum Beispiel com oder was auch immer. - und Sie nicht angeben, eine bestimmte Datei, die Datei, die Ihr Computer wird für nennt index.HTML fragen. Oder wenn das nicht vorhanden ist, index.php. 

Kühl. Also das ist nur eine Zusammenfassung von allem, hoffentlich, die wir behandelt haben in Schnitt und Vortrag und bisher in CS50. Und jetzt werden wir zu sprechen beginnen über speziell Bibliotheken. JavaScript-und CSS-Bibliotheken für Web-Anwendungen. 

Also schnell ein Grund, warum wir Bibliotheken ist die Programmierung - es gibt eine Menge von Problemen in Programmierung, die immer wieder auftauchen wieder und wieder und wieder. Sie können feststellen, dass eine Vielzahl von Websites brauchen die Fähigkeit, Dropdown haben Menüs, zum Beispiel, oder brauchen die Fähigkeit eine sehr Standardschaltfläche haben Stil, was nicht sein kann, die einfachste Sache. Jetzt, wo Sie beginnen, in HTML erhalten, können Sie erkennen, dass Tasten kann tatsächlich sehen wirklich hässlich, wenn Sie nichts zu tun. 

So viele Leute geschrieben haben genannt Bibliotheken. Und in diesem Zusammenhang, sie sind auch Rahmenbedingungen genannt. Wir werden die Verwendung der zwei austauschbar. Und was sie sind, sie sind im Grunde vorgefertigten Teile des Codes - entweder CSS oder JavaScript - dass sich eine Menge von der Team, das Sie bei der Codierung haben. 

Also vordefinieren eine Reihe von Klassen oder pre-definieren eine Reihe von Funktionen für die JavaScript ist Fall die Sie später anrufen. Und dann kann man, irgendwie, erhalten Zugang zu diesem Code ohne mit nichts zu tun. Ein Beispiel der Bibliothek war CS50.H. Das war eine Bibliothek, die wir an Sie zurück gegeben in der ersten Woche, die Sie tun müssen, erlaubt Dinge wie diese GetInt und GetString ohne zu schreiben jeder Code selber. 

MIKE RIZZO: In Ordnung. So, hier, genau wie wir mussten schließen in unserer C-Dateien der verschiedenen Bibliotheken, sollen auch wir in sind unsere HTML-Dateien verschiedenen Bibliotheken. Zum Beispiel, wenn wir wollten schließen eine bestimmte JavaScript-Bibliothek hier vielleicht eine, die wir geschrieben haben, uns, wie es lokal gehostet script.js genannt, wir haben nur Mit dieser Notation. 

So haben wir Skripttyp Gleichen JavaScript-Quelle Gleichen Javascript.js. Und wenn Sie zurückdenken, um Ihre CS50 Finanz Problem eingestellt, wenn Sie in sah header.php im Ordner Vorlagen Sie gesehen haben sollten Einige von diesen enthalten. Also das erste - die Skripte - ist mit einer JavaScript-Bibliothek. Einschließlich einer CSS-Bibliothek ist ein bisschen anders. 

Hier kann anstelle des Skripts TAG benötigen Sie den Link-Tag. Und dann der Text CSS-Typ ist ein wenig anders. Sie haben nicht immer zu schließen rel-Stylesheet. Aber ich denke, es ist, in der Regel, gute Praxis. 

Und dann schließlich die HREF, die Sie wahrscheinlich sah in Ihrem ATAGs für die Verknüpfung von in verschiedenen Links nur spezifiziert der Link, wo zu finden. Zum Beispiel, wenn wir wollten, um einen Link andere Bibliothek - sagen wir einfach - dass lebte in styles.css. Und wir wollen, dass das ist, wollte verlinken im Web gehostet, würden wir uns zu kopieren, dass. Und dann fügen Sie ihn in das, was wir hier haben, statt. 

TOMAS REIMERS: OK, hoffentlich Jungs sind bereits vertraut mit, wie man CSS verknüpfen. Sie zu tun hatte, auf Ihr letzter Satz braun. JavaScript einige von euch vielleicht habe einige Erfahrung mit. Einige von euch vielleicht nicht. 

So jetzt wissen, dass eine JavaScript-Datei ist sehr ähnlich wie in einer CSS-Datei das Gefühl, dass man, um es zu verbinden oder dass man es intern sind. Und es ermöglicht Ihnen, Skript Dinge. Und wir werden Sie durch einen Spaziergang wenig später JavaScript. 

Also mit einer Bibliothek - wenn Sie es aufgenommen haben, ist es als einfach wie buchstäblich Aufruf der Funktionen oder die Zugabe Klassennamen zu. Das letzte, was wir reden wollen etwa in Bezug auf die Bibliothek - und dies ist eher ein technischer Hinweis - ist Open-Source-Lizenzierung. Also, wenn Sie diese tatsächlichen Bibliotheken zu finden, Sie können sich denken, von Fragen mag, ist es in Ordnung, dass ich nur Verwendung von Code ist jemand anderes, vor allem denn das ist etwas, was wir sehr viel Sie sagte in diesem Kurs nicht zu tun. 

So im Fall von Open-Source-Lizenzierung, viele Entwickler - sobald sie eine Bibliothek geschrieben habe, was sie denken könnte hilfreich, um andere Menschen - wird es im Web zu veröffentlichen und geben ihm eine Lizenz. Und eine Lizenz im Grunde sagt, dass ich hiermit die Erlaubnis, andere Menschen, dieses Stück Software mit der folgenden Art Bestimmungen. 

Wir haben einen Link zu einer Website, um gut aufgenommen helfen, die Lizenzen in verstehen Falls Sie in die Arme laufen. Gemeinsame Bestimmungen sind Dinge wie Sie sind herzlich eingeladen, meine Bibliothek zu verwenden, so solange Sie mir Kredit zu geben. Sie sind willkommen, meine Bibliothek solange, wenn es bricht Sie nicht mir die Schuld. Sie sind willkommen, so lange meine Bibliothek verwenden wie Sie sie nicht benutzen, um Geld zu machen für sich. Dies sind Arten von gemeinsamen Bestimmungen. 

Aus diesem CS50 Abschlussprojekt, sie sollte nicht super relevant sein, weil die Projekte, die Sie verwenden, sind Jungs wohl eher, eine Art, bekannt. Aber wenn Sie tatsächlich gehen in die Welt und starten Sie mit Bibliotheken, die kann oder nicht, sowie umgesetzt werden einige der beliebtesten gehören wir sind sein werden, durchmachen. Es ist gut zu verstehen können diese Lizenzen und verstehen, was sie bedeuten. Und geht zurück. 

MIKE RIZZO: OK. So, jetzt bewegt auf Beispiele der eigentliche CSS. An diesem Punkt so weit, könnten Sie das nicht erlebt haben. Aber Sie könnten es in angetroffen haben Ihrem täglichen Leben, wo etwas das sieht einen Weg, auf der einen Browser vielleicht nicht gleich aussehen Weise in einem anderen Browser. 

Dies wird als Browser Browser Kompatibilität. Und immer ist es immer mehr und eher ein Problem, zumal Browser nehmen mehr und mehr Freiheiten Dinge zu implementieren, wie sie wollen. So, um das zu überwinden, es gibt tatsächlich eine große Bibliothek mit dem Namen Normalize.CSS. 

TOMAS REIMERS: Wir enthalten den Link. An dieser Stelle ist es hilfreich, wenn Sie Ihren Laptop in dort haben Suche auf der Baustelle. Und wir werden dieses Recht geben, Sie jetzt einfach, weil die letzte CS50 Projekt tatsächlich zu Sie bitten, es zu implementieren ähnlich und durch Browsern. 

Also, nur um in der Rückseite Ihrer halten Kopf, ist dies eine wunderbare Bibliothek weil es so will, eine Art, Dinge zu standardisieren. In Firefox kann etwas zeigen als ein Pixel nach links. Und dann Chrome kann, dass tatsächlich entscheiden was du gemeint war 10 Pixel nach links. Und Sie, dies zu standardisieren möchten. Normalisieren wird tatsächlich eine wirklich gute Job, dafür zu sorgen, dass Ihre Website sieht gleich in allen Browsern. 

MIKE RIZZO: Also wenn wir wollten nur klicken Sie auf den Link wirklich schnell und Show Sie, wie das aussieht, können Sie kann es mit Hilfe der Download Riesen Schaltfläche Download. Oder ich Sie ermutigen, mehr zu erfahren indem Sie auf diesen Link in der unteren rechten Ecke. 

TOMAS REIMERS: Und wenn Sie tatsächlich Mehr lesen Sie genau dort - klicken Sie auf die Quelle auf GitHub - Sie werden tatsächlich sehen die Open-Source- Lizenz auf LICENSE.md recht. Und Sie werden hier sehen, ist die sehr beliebt MIT-Lizenz. Auch, wenn Sie durch den Text zu lesen, Sie in der Lage, es auf der Website zu finden sein wir zuvor verwiesen und in der Lage, verstehen, ohne zu lesen durch den juristischen Jargon. 

MIKE RIZZO: OK, toll. Also das ist, normalisieren. Wir wollten Ihnen das ist wirklich schnell. Oh, haben Sie eine Frage haben? 

ZIELGRUPPE: Also, wenn Sie es herunterladen, können Sie folgen Sie einfach diesen Code, die sie haben unter den Download-Button? 

TOMAS REIMERS: Ja, so wenn Sie herunterladen - 

MIKE RIZZO: Oh, das ist ein großer Punkt. Also die Frage war, wie zu tun wir tatsächlich herunterladen? Wenn wir also auf den Link klicken, sehen wir dass es tatsächlich erscheint im Quellcode. Also, dies zu tun, was wir konnten nicht nur auf Speichern unter wird. Speichern unter, und das sollte bringen eine Datei. Und dann können wir entscheiden, sparen es als normalize.CSS. Und dann müsste man es in verlinken - 

TOMAS REIMERS: Die gleiche Art und Weise Sie Link in einer anderen Datei. Und wenn man es in zu verknüpfen, was ist toll zu normalisieren ist es tatsächlich kümmern sich um all die harte arbeiten für sich. Was bedeutet, dass Sie nicht haben, , alle Klassen hinzuzufügen. 

Sie haben nicht zu tun, etwas seltsam. Es wird ohne dich zu normalisieren nichts weiter zu tun. Ja, Sie haben, um es zu schließen. Google Chrome reagiert nicht. 

Nur eine schnelle beiseite - Ich habe bemerkt, wir in diese gesprungen. Der Rest dieser Präsentation ist gehen, um einen schnellen Überblick können. Eine Befragung von Bibliotheken. 

Im Grunde, was sie sind. Was sie tun. Wie sie sind nützlich. Wie Sie vielleicht diese umzusetzen. Wenn Sie beginnen, sie wollen, entlang Folgendes ein, und das Lesen durch sie, würde ich sehr empfehlen, dass. 

Alternativ können Sie gerne auch starten Sie den Download und mit ihnen sie in einer Sicht nur, was sie sehen aussehen oder was sie tun, wenn Sie Ihren Laptop vor sich. Wenn nicht, sind Sie herzlich eingeladen zu halten Hören auf uns zu sprechen. Wir werden im Gespräch zu bleiben. Und wir haben Zeit am Ende hoffentlich wir tatsächlich in welche Sie was einige dieser Bibliotheken aussehen. 

MIKE RIZZO: Kühle. Alles klar, jetzt reden lassen über Font gut. 

TOMAS REIMERS: Schrift so gut ist ein wirklich nette Ort, vor allem für diejenigen von uns, die weniger künstlerisch sind talentiert. Das Ignorieren der Name Font Awesome, gibt es Sie eine Reihe von Icons, die sind sehr nützlich. So viele Male werden Sie ein Gerät Symbol können Sie wie ein netter x so wollen dass man etwas schließen. 

Oder Sie können eine Art von Schaltfläche Bearbeiten mit einer Bleistiftzeichnung wie alle anderen hat. Und das ist, wenn Sie erfahren, dass zeichnen diese Symbole können sehr mühsam und schwierig. Font Awesome - wenn Sie tatsächlich auf die Website gehen - gibt Ihnen eine Menge von Symbolen unter die Symbole an der Spitze. Ja, nur die Besten. Es wird Ihnen eine Menge von Icons für kostenlos. 

Also hier sehen wir Dinge wie eine haben Sternchen, Bars, ein Blitz, ein Kalender, ein Fehler, ein Buch, et cetera. Dies kann sehr nützlich sein. Die Art, wie Sie diese schließen ist, Sie sind buchstäblich die CSS-Datei. Und nachdem Sie die CSS-Datei enthalten haben, was Sie tun können, ist, die Sie erstellen ein Tag namens I. Es satands für Symbol mit der Klasse FA Stehen für Font gut. Und dann, unabhängig von Klasse, die Sie möchten. 

Also, wenn ich wollte eine Ikone dieser Plus Quadratur hier, würde ich geben es die Klasse FA. Und dann FA Bindestrich und Bindestrich Platz. 

MIKE RIZZO: Cool, OK. 

TOMAS REIMERS: Und dann, die letzte CSS Bibliothek, die wir wollen, bekommen wir durch versucht, es minimal auf CSS halten Bibliotheken, weil wir erkennen, die Titel der Präsentation JavaScript-Bibliotheken ist. Aber wir dachten, dass wir können auch stellen Ihnen die anderen Bibliotheken während wir über Bibliotheken sprechen. 

Es ist Google Web Fonts. Und was Google Web Fonts können Sie zu tun ist, Schriftarten hinzufügen, um Ihre Website, die eine wirklich einfache Möglichkeit, es zu machen ist hübsch und zu Ihrem Satz unterscheiden von allen anderen ist, wenn es eine schöne Schrift oder wenn es eine schöne hat Sammlung von Schriften. Google Web Fonts ist schön, im Gegensatz zu anderen Bibliotheken in dem Sinne, dass es ein wirklich geführte Installation. 

Also, wenn Sie dem Link zu folgen, ist es google.com / fonts, glaube ich. Wenn Sie folgen, dass Sie können Sie die Schriftart auswählen. Sie können auf der linken Seite wählen Dicke, schräg, et cetera. Und dann, wenn Sie sich entschieden haben, ein, können Sie auf den schnellen Einsatz. Genau dort. Unten rechts der Box. 

Und dann, nach unten scrollen. Zunächst geben sie dir die CSS, die Sie brauchen, um tatsächlich zu verknüpfen. Es ist recht. Sie können nur kopieren und einfügen, dass in. Und das schöne an diesem ist Sie eigentlich nicht einmal zu laden Sie die Datei. 

Was es zu tun ist, es wird um die Google-Version davon zu verknüpfen. Also zurück zu dem, was heißt das. Das bedeutet, wenn ein Benutzer Ihre Datei herunterlädt - lädt Ihre HTML-Seite - Ihre HTML- Seite wird diese Datei verweisen. 

Also dann, Ihren Computer vor sich geht, um zu sehen, oh, es ist auf google.com eher gehostet als auf theirsite.com. Lassen Sie mich gehen fragen Sie Google für die Datei. Und dann, es geht um umfassen es fast, als ob es ein Teil Ihrer eigenen Website. 

TOMAS REIMERS: Kühle. Und wenn Sie, dass sind, dann auf fügen ihn in Ihre CSS, gibt es Ihnen die tatsächliche Linie. Sie haben also die Eigenschaft font-Familie eingestellt gleich der Name Ihres Schriftart. 

MIKE RIZZO: OK. Also haben wir nur mit CSS beendet. Und einige von euch vielleicht denken, na ja, wir hatten einige CSS auf CS50 Finance. Aber CSS Bootstrap-Bibliothek war. Wir sind tatsächlich ein wenig Bootstrap später unter JavaScript, weil mit die Bootstrap CSS-Bibliothek kommt auch mit viel JavaScript dass Bootstrap-oder Twitter - die Bootstrap gemacht - verwendet, um alle ihre CSS verwalten. 

TOMAS REIMERS: Hat jemand irgendwelche haben Fragen, die bisher über CSS im Allgemeinen? Wir sind gut? Ehrfürchtig. 

MIKE RIZZO: Awesome. 

TOMAS REIMERS: So bewegen auf JavaScript. 

MIKE RIZZO: Also reden wollten wir über jQuery zu beginnen. Hat jemand von jQuery gehört vor oder es verwendet? Ja, ein Paar? Also, wenn Sie nur mit einheimischen arbeiten JavaScript, werden Sie sich selbst zu finden Eingabe eine Menge von lang Selektoren viel. Also, was tut, ist es jQuery bietet eine schöne Verpackung für die JavaScript- Sprache, die Sie einfach auswählen können und zu manipulieren, verschiedene Elemente innerhalb der Dokument-Objekt-Modell der Web-Seite oder die DOM, was ich denke, Sie Jungs haben in der zu hören Vortrag an dieser Stelle. 

TOMAS REIMERS: Wenn Sie nicht gehört haben oder wenn Sie es nicht gesehen haben, Vortrag doch ist das Document Object Model im Grunde, wie die Dinge dargestellt. So HTML Art sieht aus wie ein Baum wenn Sie tatsächlich zeichnen es aus. Sie haben das HTML-Element an der Spitze. Sie haben die Kopf und Körper. 

Und dann, dass Sie innerhalb haben alles andere. Das ist als DOM genannt - Document Object Model. So ein Modell, das Objekte repräsentiert das Dokument ist eine einfache Möglichkeit, zu denken darüber. Und einer der großen Sache über jQuery ist es wirklich sinn Verfahrgeschwindigkeit und zu manipulieren, dass Elemente innerhalb dass unglaublich einfach. 

So einfach, in der Tat, dass die Mehrheit der JavaScript-Bibliotheken oder wenn nicht die Mehrheit, die große Mehrheit von Einsen Sie sehen tatsächlich benötigen jQuery so dass sie sich einfach laufen weil, wenn Sie nicht haben, jQuery, Sie würde eine Menge Zeit verschwenden, herauszufinden, wie man bestimmte auswählen Elemente und wie man andere Dinge zu tun. Und die andere große Sache über jQuery ist, dass es Cross-Browser-kompatibel. 

Also denken Sie daran zurück, als wir sagten, dass nicht alle Browser implementieren Dinge die gleiche Weise? Dies ist auch in JavaScript wahr. Und einer der großen Vorteile von jQuery ist, dass sie erkennt, das Browser und erkennen die geeignete Methode. 

Also, wenn Sie benötigen, um ein Element auszuwählen, Internet Explorer könnte sagen, du bist soll auf diese Weise zu tun. Firefox könnte die richtige sagen So ist dieser Weg. jQuery kümmert sich nicht. Wenn Sie sagen, ein jQuery wählen Element wird es herausfinden, wie es ist soll es im Browser tun das Benutzer gerade befindet, und führen Sie dann es so. 

MIKE RIZZO: Lassen Sie uns also nicht darüber reden die Verwendung von jQuery ein wenig. Genau wie PHP, jQuery hat eine besondere Vorliebe für die Dollar-Zeichen. So werden Sie feststellen, dass jede jQuery - gut, nicht alle. Sie können manchmal den Dollar ersetzen Schild mit dem Wort jQuery. Aber in der Regel, nur weil es kürzer, wenn Sie sehen, dass jQuery verwendet, es wird mit einem Dollar-Zeichen sein. 

So, hier sind wir nur die einen Beginn Wähler für ein Element im DOM. Hier haben wir das Dollarzeichen, gefolgt durch offene Klammern und Anführungszeichen. Und innerhalb der Anführungszeichen gehen unsere Selektoren für die verschiedenen Elemente. Genau wie in CSS, brauchten wir Selektoren in der Lage, verschiedene Elemente zu stylen innerhalb der Seite. Diese unterschiedlichen Selektoren übersetzen genau in jQuery und JavaScript in den meisten Fällen. 

Hier haben wir also einen Punkt foo. Also, wenn Sie von der Vorlesung erinnern, der Punkt bedeutet nur die Klasse. Also sind wir die Auswahl Element mit class foo. Also, wenn ich gehen Sie vor und öffnen unsere JavaScript-Konsole hier wirklich schnell nur nachzuweisen, dass es, wenn ich nur geben die Dollarzeichen, sehen wir, dass es einige Funktion, die angezeigt wird. Und es ist nur von jQuery definiert. 

TOMAS REIMERS: Für die von Ihnen nicht vertraut, ist die Konsole ein Werkzeug innerhalb von Chrome, die Ihnen ermöglicht, im Grunde, führen Sie JavaScript in den aktuellen Seite. Diese werden Sie unglaublich nützlich finden, wenn Sie tatsächlich Debugging und Sie müssen, wie sein, wie ist der aktuelle Wert einer globalen Variablen oder was ist etwas anderes? Es ist eine Art, wie GDB mit Ausnahme dass Sie tatsächlich manipulieren Elemente auf der Seite mit es eine viel einfachere Art und Weise. Und es auch nicht, im Grunde, überprüfen mit dir, bevor es irgendetwas tut. 

Während also könnte wie GDB sein, sind Sie sicher, dass Sie den nächsten Schritt ausführen? Die Konsole ist in real. So wie die Webseite Rendering und zu tun, was es tut, das Rats auch daneben läuft. Und Sie können impute Code kannst dass-Konsole, die auf der Seite ausgeführt werden. 

MIKE RIZZO: Also, um die Konsole eingeben, Ich denke, ich sollte kurz erwähnen, wie das zu tun. In den letzten Probleme, die Sie haben können Gebraucht Chrome inspizieren Element Funktionen oder Ansicht-Seite Quelle - und diejenigen, zugänglich nur durch das Recht sind Klicken Sie auf der Seite oder einem bestimmten Element und dabei entweder inspizieren Element oder Ansicht-Seite Quelle. Wir können auch auf die JavaScript- Konsole direkt durch Auswahl prüfen Element. Also dann einfach auf Konsole auf der rechten Seite. 

Alternativ können Sie auch gegangen sein könnte an der oberen rechten Ecke, welche aus auf diesem Bildschirm, wo geschnitten wird, es hat die drei Striche. Und Sie gehen auf Tools und dann JavaScript-Konsole hier, wo sehen können - zumindest unter Windows - die Tastenkombination Shift-Steuerung ist J. Also wenn wir ein Element auswählen wollte auf der Seite, so wie ich zeigte, vor, wir tun Dollarzeichen offen parens und dann zitiert. 

Eine interessante Sache ist, in der Regel, Apostrophe und Anführungszeichen sind austauschbar. So viele Menschen nutzen nur einzelne Anführungszeichen, weil sie schneller zu tippen sind als doppelte Anführungszeichen, weil Sie nicht tun müssen die Umschalttaste gedrückt halten. Also werde ich nur tun, dass gerade jetzt. 

Deshalb möchte ich etwas auswählen mit Klasse. Container, nur weil ich weiß, das ist ist etwas, das auf unsere Web-Seite jetzt. Und ich drücken Sie Enter. Und wir können sehen, dass es sie ausgewählt. So zeigt sich, dass es kehrte das Objekt. Also, das ist eine Grundauswahl. Wenn wir wollten eigentlich zu manipulieren, Sie müssten etwas nennen auf diese Auswahl, die werden wir in später. 

TOMAS REIMERS: Also, nur um zu sehen, dass mehr in die Tiefe, ist dies nicht anders als die Funktion Anrufe, die wir in C gemacht Der Name der Funktion ist hier ein wenig seltsam. Es ist Dollar-Zeichen. Es ist nur ein Name einer Funktion. Es ist nichts Besonderes. 

Wir haben offene Klammern. Dann haben wir unsere ein Argument, das in diesem Fall geschieht, ein String sein, Das ist ein Selektor dafür. Und dann haben wir unsere geschlossene Klammer. Das ist es. 

Es ist nicht so, dass eine völlig andere. Obwohl, es sieht sehr seltsam. Und das kann, irgendwie, ein Knack sein Punkt für eine Menge Leute. 

MIKE RIZZO: So ähnlich, wenn wir wollten um ein Element, das eine ID hat zu wählen, jetzt wollen wir auswählen, indem ID statt Klasse. Es wäre eine ähnliche Sache sein, wo wir nur die scharfe Zeichen für ID zu tun. Also werden wir hier alle Auswahl Elemente, die ID-Bar haben. 

TOMAS REIMERS: Und das erstreckt. Das CSS erstreckt. Genau wie in CSS, können Sie alle wählen Links, die die Klasse foo haben. Hier ist es das Gleiche. 

Sie könnten a.foo tun, die wählen würde alle Links mit der Klasse foo. Sie könnten eine scharfe Bar tun, was würden wählen Sie den Link mit der ID-Bar und so weiter und so fort. Alle CSS-Selektor ist ein gültiger jQuery-Selektor. 

MIKE RIZZO: Ja. OK, jetzt ist in ein wenig erhalten lassen der Manipulation, die wir tun können, unsere jQuery. So jQuery hat eine besondere Art der Notation, wo wir gerade verwenden ein Punkt am Ende. Und Sie von diesem wie in denken kann C wie wir hatten unterschiedliche Strukturen. Und um in diese Strukturen zu gehen, würden Sie Verwenden Sie einen Punkt, um in sie zu erhalten. 

Dies ist, eine Art, eine ähnliche Sache. Nur jetzt haben wir diese Funktionen innerhalb Wähler, dass wir auf es nennen. So, hier das erste Beispiel Sie sehen können, ist ein CSS-Selektor. Und im Grunde, was das tut, ist es gilt das erste Element CSS dies Sache, die Sie ausgewählt - dieses Element, das Sie ausgewählt - mit dem Wert dieser. 

TOMAS REIMERS: Also eine einfache Übersetzung von das wäre, wenn jQuery, im Grunde, nahm nur foo. Und dann in CSS, sagte, Farbe rot und schließen. Es ist die gleiche Idee. Was es gemacht wird ist es ausgewählt Alle Elemente foo. Und dann wird es angewendet wird. Art, die Eigenschaft Farbe gleich rot. 

MIKE RIZZO: Ebenso können wir auch verändern Der tatsächliche Inhalt was zeigt auf der HTML-Code der Seite, die ist wirklich cool, weil es bedeutet, dass Ihre Web-Seiten können nun vollständig dynamisch sein und müssen nicht statisch sein dass Sie mit PHP drucken am Anfang der die Seite geladen. Also hier, wenn wir verändern wollte der tatsächlichen HTML der Seite, nun würden wir rufen Sie die HTML-Funktion, die dann nur Einsätze, was wir in angeben das Element, das wir ausgewählt. So, hier sind wir mit der Auswahl Element class foo und dann sagen, es ist HTML es ist jetzt hallo Welt. 

TOMAS REIMERS: Und wenn Sie darüber nachdenken, was sind nützliche Anwendungen diese, diese CSS ein, das erste, was Sie beginnen können, ist zu denken, auch in Bezug auf Drop Down Menüs. Sie könnten beginnen, Dinge wie tun, wenn ein Benutzer über den oberen Teil schwebt von einem Dropdown, machen möchten Sie der untere Teil sichtbar. Right? 

Also in CSS, haben wir Eigenschaften , etwas sichtbar zu machen. Dinge wie Display keine Doppelpunkt wäre es unsichtbar zu machen. Anzeigeblock wäre es sichtbar zu machen. Oder noch einfacher, wenn Sie gehen, möchten Sie Dinge wie Sichtbarkeit Gleichen sichtbar und Sichtbarkeit gleich ausgeblendet. 

Und man konnte anfangen, die Dinge umzusetzen wie Dropdown-Menüs rechts nachdem Sie durch die Vorstellung davon, wie bekommen können Sie herausfinden, wenn dieser geöffnet wird, die wir durch ganz kurz bekommen. Aber wir beginnen können, um zu sehen, Anwendungen dafür. In einem ähnlichen Sinn, wenn Sie versuchen würden und umzusetzen, sagen wir mal, ein Chat Motor und Sie ein wenig machen wollen Sprechblase kommen, wann immer Sie haben bekam eine neue Nachricht, sobald Sie die neue Nachricht, können Sie ein wenig machen Sprechblase durch Veränderung kommen das HTML der Seite, oder? Durch die Zugabe, dass zusätzliche Sprechblase mit dem zusätzlichen Text drin. Ja? 

ZIELGRUPPE: Also würden Sie dies innerhalb einbetten der HTML-Code in ein bisschen wie ein [Unverständlich]? 

MIKE RIZZO: Richtig. Ja, wir dazu kommen in ein wenig. Ja, es ist ähnlich wie ein etwas zu PHP. Nicht ganz ähnlich. 

Eine gute Unterscheidung zu machen ist, was dieser tatsächlich bearbeiten, wenn wir bearbeiten die Seite, weil es nicht sein die Bearbeitung der eigentlichen Datei, die wird auf dem Server aufbewahrt, weil die Welt sollte nicht über die Berechtigung Ihre Dateien bearbeiten. Dies ist nur bearbeiten, was auf der Seite und was innerhalb angezeigt der Browser. Also, wenn Sie die Seite neu zu laden, nachdem waren, sagen, etwas zu löschen, da wir sehen wir mit dem Entfernen Anruf machen können, das Ding dann wieder. 

TOMAS REIMERS: Also eine Art zu denken das ist, wenn ich den Computer und Mike ist, sozusagen, der Server. Was passieren wird ist, dass ich zu gehen Mike fragen, hey, kann ich eine Kopie Diese Web-Seite? Und er wird mir eine Kopie davon geben. 

Nein, es ist nicht das Original Sache. Es ist nur eine Kopie. Und dann wäre es wie, oh, sein es gibt hier kein JavaScript. Klar, ich sollte das ändern Seite so sein. Und ich bin der Bearbeitung Ihre Kopie. 

Aber das ist nicht bewirken die eigentliche Kopie. Und wenn ich ihn noch einmal fragen aktualisieren Sie die Seite, - hey, ich habe noch eine saubere Kopie - er wird mir eine andere saubere Kopie. Und dann werde ich das Gleiche tun wie, oh, JS das hier, das sagt um dies zu bearbeiten. Und ich werde zu halten, das zu tun. 

MIKE RIZZO: Also eine wirklich coole Sache dass Sie tun können, ist mit jQuery verschiedenen Arten tatsächlich hinzufügen von Animationen auf Ihre Seite. Ich weiß nicht, ob Sie jemals gesehen haben, wo Sie versuchen, eine Füllung ein Formular online und Sie nicht ausfüllen die Dinge richtig. So ein kleines Ding rutscht an der Spitze und sagt, dass Sie nicht richtig getan. Bitte versuchen Sie es erneut. Und dann ist es auch nur schieben kann bis. 

Stellt sich heraus, jQuery hat eingebaute Funktionen machen, dass all das Animation wirklich, wirklich einfach. So gibt es zunächst die Fade out-Funktion, die Sie auf etwas nennen können. Und es ist ein Weg, um die CSS ändern das Element in einer animierten Weg. So ist es auch immer Element nimmt Sie nennen es ausgeblendet auf. Und dann, es ändert sich langsam die Deckkraft bis er geht völlig transparent. 

TOMAS REIMERS: Die andere beliebt wird nach unten rutschen, die machen etwas erscheinen, indem Sie sie nach unten. So im Fall von dem Dropdown-Menü, wieder, als wir erfuhren, wie zu erkennen wenn dies wurde über schwebte, Sie konnte nur sagen, dieses unten Teil schieben jetzt nach unten. Und dann erscheint es durch Schieben nach unten. 

MIKE RIZZO: Und dann, wenn Sie nur eine Art von Animation Sie daran, dass jQuery nicht notwendigerweise. Zum Beispiel, sagen wir, jQuery ist mit einer Rutsche bieten Ihnen nach unten und nach oben schieben. Nun, sagen wir, Sie zu rutschen wollte etwas von der linken oder von die richtige Art von wie der CS50 Haupt Seite tut, wenn Sie zu einer neuen Platte zu gehen. Sie würden dann wahrscheinlich Umsetzung es selbst mit der animieren Funktion in jQuery. 

So ähnlich, die Sie gerade zu animieren. Und dann, in ihr dauert es ein Wörterbuch der unterschiedlichen Werte dass man eigentlich passieren. Also hier, wenn wir zu animieren wollte der Element foo so daß seine Breite entweder ausdehnt oder zusammenzieht, um 80 Pixel, je nachdem, was es derzeit ist. Wir würden uns nur passieren, dass das Argument, in ihr. 

Animieren Sie haben auch einige andere Argumente dass man es könnte passieren, zum Beispiel, die Geschwindigkeit der Animation Sie will es geben. Und um das zu tun, würde ich einfach sagen, Google schnell jQuery animieren. Und dann, die Erziehung dieser Seite können Sie sehen, dass es eine Reihe von verschiedenen bekam Eigenschaften, die Sie es weitergeben. 

Und ich ermutige Sie - wann immer Sie kommen auf etwas, das Sie nicht tun wissen oder wollen einfach nur mehr über eine Lern besondere Methode, die Sie aufrufen können auf etwas - nur Google es. jQuery ist extrem gut dokumentiert. Und oft gibt es eine Menge von Beispiele, die sie für Sie. Wenn wir nach unten scrollen - Weg nach unten - dass wir verwenden können, wie gut. 

Auch hier tatsächlich geht, wenn ein Entwickler durch die Mühe des Schreibens ein Bibliothek, wollen sie in der Regel jemand, es zu benutzen. So wird neben gehen sein, eine Dokumentation. Und dass die Dokumentation kann in der Regel auf der Projektseite, die ist gefunden Deshalb gaben wir Ihnen die Original-Website in der Anfang, mit dem Sie die Links Projektseiten, so können Sie sehen, dass die Dokumentation. 

Typischerweise wird die Projektseite bei von [unverständlich], können Sie das gesagt, es Namen der Klassen. Im Fall von JavaScript gibt es Sie den Namen der Funktionen. By the way, wenn wir nach oben an die Spitze, eine kurze Randnotiz auf Funktionen wenn Sie eine Funktion implementiert sehen wie diese mit der Fest Klammern in der Mitte, das heißt dass diese Eigenschaft ist optional. Nur ein Heads-up. Ich habe eine Menge von Fragen gesehen darüber. 

So, hier können wir sehen, dass die animieren dauert Eigenschaften als notwendiges Argument. Und alles andere ist optional. Randnotiz - Sie davon, sortieren der, wie man-Seiten. Man Seiten Dokumentation für C-und für eine Menge anderer Dinge, wie gut. 

MIKE RIZZO: So haben wir gelernt, wie man ändern verschiedene CSS auf der Seite, animieren, und entfernen Sie fügen HTML. Aber einer der wirklich stärkste Dinge über JavaScript und vor allem jQuery - was es zu tun ist, können Sie reagieren auf verschiedene Elemente, die passieren. Zum Beispiel haben wir hier ein Event-Handler. Und das bedeutet nur, wenn dies Ereignis eintritt, erledigen wir das in ein bestimmte Weise. 

Also hier die generische jQuery Veranstaltung Handler ist der Punkt auf. Und dann, das erste, was Sie bereitgestellt Veranstaltung ist es, was es sein sollte werden für das Hören. So, hier ist es das, dass Klick wir warten. 

TOMAS REIMERS: Alternativ haben Sie auf schweben, das ist ein sehr populäres. Also zurück zu meinem Dropdown-Menü Idee. Sie müssten das oberste auf schweben. Und dann könnte man das ändern. 

MIKE RIZZO: Richtig. Und dann, wenn das passiert, es ist nur führt diese Funktion, die wir geben es als Argument und dass es warnt hallo oder hallo. 

TOMAS REIMERS: So im Fall von JavaScript ist dies ein Ort, den wir brauchen, um uns von C. Wir können tatsächlich entfernen nehmen Funktionen als Argumente. Und es gibt eine Menge wirklich komplexe Weise, dies zu tun. Wir werden einen Weg zu fördern, das ist, können Sie definieren, die genau dort zu funktionieren. 

Also, wenn Sie für eine Funktion als fragst ein Parameter, sind Sie im Grunde nur gehen, um die Funktion zu definieren auf der Stelle. Und die Art, wie Sie eine Funktion definieren Sie ist in JavaScript buchstäblich sagen Funktion. Dann, in der Regel den Namen der Funktion. Aber wir sind nie zu verweisen diese Funktion wieder. Also lassen wir es namenlos. 

Dann die Klammern, dann die geschweiften Hosenträger, und dann wird der Code innerhalb dieser. So verstehen wir, dies kann ein wenig verwirrend. So geben wir Ihnen die allgemeine Form der was für ein Event-Handler sieht aus wie unten, was auf Veranstaltungen. Und dann, im Inneren, dass Ihr Code. 

MIKE RIZZO: Gibt es Fragen zu diesem Thema? Dies kann ein wenig verwirrend sein das erste Mal, wenn Sie es sehen. 

TOMAS REIMERS: Sie wollen tatsächlich öffnen, eine Datei und zeigen ihnen einige jQuery jetzt? 

MIKE RIZZO: Ja, lass uns das tun. OK. 

TOMAS REIMERS: So, jetzt sind wir im Gerät. Und was wir getan haben, ist, dass wir genommen haben die Freiheit zu schaffen, sowohl eine index.html Datei, die verbindet eine JavaScript-Datei. Und können wir öffnen, die - ja. Nun, es tut zwei Dinge. 

Die erste ist mit ihr verknüpften die Datei JavaScript. Und wir werden sehen, dass hier oben. Wir sehen, dass in der Spitze der HTML-Dokument, besonders. So haben Sie es sehen werden, dass wir im Grunde sagen, SRC, steht für die Quelle. Und das ist die URL. 

Also hier kann man sagen, wir haben jQuery enthalten. Und wir habe auch Skripte. Die andere Möglichkeit, ist JavaScript umfassen dass Sie einen Inline-Skript enthalten Tag als wir am Boden, wo es sagt Skript-Typ ist Text JavaScript. 

Also wir sagen, hör zu, wir sind über ein Skript enthalten. Und die Art des Skripts ist JavaScript, das eine Art von Text ist. Ganz einfach. 

MIKE RIZZO: Also, irgendwie, bekommt Ihre Frage, wie wir sind JavaScript in unsere Dateien, denn wenn wir hatte PHP, wir tun etwas. Und dann haben unsere PHP-Funktionen - sagen wir, Aktien zu tun etwas mit, dass - geht dort. , Nun die Script-Tags Allerdings haben wir dass wir es geben, die eigentlich Teil der HTML selbst, weil es nicht Fälschen als eine HTML-Datei, wie es ist in PHP, denn wenn man tatsächlich gehen in und Blick auf die Quelle der Seite, Sie werden diese Script-Tags in dort zu sehen mit der JavaScript-mit verbundenen sie darin. 

Also dann, wenn wir es wollten schreiben einige JavaScript - lasst uns einfach sagen, dass wir, um Körper verändern wollte denn im Moment habe ich nicht alle anderen Tags, ich kann wirklich bearbeiten neben Körper. Sagen wir einfach, ich wollte ändern Sie die CSS davon. Also werden wir weiter gehen und Veränderung die Farbe ist rot. 

Also habe ich die Datei speichern. Gehen wir zurück zu unserer Web-Seite zu gelangen, aktualisieren, und es tut es automatisch weil es nicht scheinen, wie es gewartet überhaupt, weil wir nicht hören für eine Veranstaltung oder so etwas. 

TOMAS REIMERS: Also, wenn wir wieder nach, dass Datei im Besonderen - die HTML Datei - was wirst du zu sehen ist, wir haben - daran erinnern, dass dieser geladen ist, Art, chronologisch. Also müssen wir zunächst den Kopf. es lädt diese beiden Dateien. Dann gehen wir auf den Körper. Und wir sehen, hallo Welt. So machen wir hallo Welt. 

Und dann das letzte, was wir haben ist haben wir das Skript-Tag. So führt es das Skript-Tag, denn es ist nicht sagen, es für etwas warten. Und das ist das Grund Weg um JavaScript auszuführen. 

Mit dieser sagte, können Sie das Skript setzen markieren Sie in der Kopfzeile nur um diesen Punkt zu zeigen? Und laufen, dass. Wir werden feststellen, dass es nicht die Farbe ändern. Und dies ist eines der Probleme JavaScript ist, dass die Dinge sind geladen in chronologischer Reihenfolge. 

Also zu dem Zeitpunkt, dass die Code ausgeführt wurde, wählten wir - zurück - der Körper-Tag. Der Body-Tag ist noch nicht vorhanden, weil JavaScript ist in Einklang mit HTML. So wie der Browser wählen Körper. Es gibt nicht so etwas noch. So können wir ignorieren. Und wir weitermachen. 

Und dann definieren wir einen Body-Tag. Aber das wird nie aktualisiert. Also, wenn Sie die Umsetzung Skript sind Tags, stellen Sie sicher, dass Sie platzieren nach dem Body-Tag. Nächste Folie. 

MIKE RIZZO: OK. Also änderten wir etwas. Aber es sah nicht so aus, wie es beantwortet uns überhaupt, weil es nur irgendwie tat es, sobald es die Seite geladen. So, jetzt, statt dies zu tun, warum haben wir nicht einen Ereignishandler hinzuzufügen. 

Lassen Sie uns also etwas tun, an dem Körper wieder. Und sagen wir, wir tun es auf - klicken. Wir werden eine Funktion hinzuzufügen. 

TOMAS REIMERS: Wir ändern es ist eine rote Farbe wieder. Warum nicht? 

MIKE RIZZO: Ja, wir ändern seine "Farbe zu rot wieder. Gut. Also lassen Sie die Seite neu laden. OK, wir sehen - wie erwartet, ist es nicht ein noch rot. Aber dann können wir weitermachen und klicken Sie darauf. 

TOMAS REIMERS: Und es ist rot. 

MIKE RIZZO: Und es tut rot wie erwartet. 

TOMAS REIMERS: Und wir können sehen, wie können wir anfangen zu bauen sehr grundlegende Interaktion. Andere Dinge, die wir vielleicht zu tun ist, wenn wir nicht wollen, um den Körper zu machen Farbe rot, wir machen den HTML- Hintergrundfarbe rot. Nur so ist es das gleiche CSS. 

Und wenn wir es ändern, können wir sehen sehr dramatische Auswirkungen einer Änderung der gesamte Seite. Also noch einmal, wenn Sie Dinge, die Umsetzung, Sie können eine Komponente haben , die dazu bestimmt ist, angeklickt werden. Nehmen wir an, eine Exit-Taste und eine ganze andere Komponente, das bedeutet wird, um zu reagieren. Also würde man ein Fenster entfernen wenn das passiert. 

MIKE RIZZO: OK. Nur als Beispiel - Sie nicht bekommen, diese früher zu sehen - Ich werde nur zeigen, was es sieht gerne, wenn wir etwas zu verbergen. Also werde ich weiter gehen und nicht nach oben schieben. 

TOMAS REIMERS: Möchten Sie, dass in einer wickeln Absatz-Typ, bevor wir das tun? 

MIKE RIZZO: OK. Ja, warum machen wir nicht einfach so, dass wir können es ein wenig mehr zu wählen. 

TOMAS REIMERS: Und lassen Sie uns geben ihm eine Klasse. 

MIKE RIZZO: Ja. OK, also mal sehen. Anstelle von den tatsächlichen Körper jetzt, ich werde einfach immer alles wählen mit Klasse hallo, was wir hier nur noch eine Sache. Also sollten wir nicht zu haben, Sorgen darüber. 

Also werde ich es aktualisieren. Ich werde weitermachen und klicken Sie darauf. Und es, irgendwie, hat eine seltsame Folie bis Ding, das so aussah, dass nicht attraktiv. Generell sie sehen ziemlich nett. Ich denke, das - für manche Grund - nicht. Ich werde nur eine Fade-Out zu tun, so Sie kann das auch aussehen. Viel schöner. 

Und dann, wenn ich mich öffnen, die JavaScript Konsole wieder und wir sehen wollen, was es sieht so aus, als wir es in. verblassen Nun, ich nenne nur verblassen in auf sie. Und es verblasst heranzoomen 

Ebenso könnten wir eigentlich auch passieren ein Argument, zu verblassen oder ausgeblendet, welche, ist eine Art, die Geschwindigkeit davon. Lassen Sie uns also weiter gehen und sagen, wir wollen sie gehen langsam verblassen in. Also ich denke, es schien immer noch ziemlich schnell. Aber es war langsamer als zuvor. 

TOMAS REIMERS: Und wenn Sie finden möchten mehr über diese Dinge wieder nur auf die jQuery-Dokumentation zu gehen, die wir euch gegeben haben, und lesen durch diese. Sie dokumentieren ihre Funktionen unglaublich gut. 

MIKE RIZZO: OK. Also ich denke, wir zurück zu diesem gehen. Und wir können über unsere letzten Seite sprechen. Nun, wir können mit Bootstrap beenden. Und dann werden wir es zu öffnen für einige Fragen. Und wenn euch irgendwelche Ideen, Sie möchten, um zu versuchen, zu werfen und sehen, wenn wir sie mit zu implementieren JavaScript-schnell. 

Also wirklich schnell über Bootstrap, die wurde automatisch enthalten Ihre letzte Problem in der CSS-Ordner festgelegt und tatsächlich in Ihrem verknüpft header.php. Also könnte man Klassen hinzugefügt haben, die innerhalb Bootstrap definiert. Und es würde automatisch gestylt haben die Dinge entsprechend. 

TOMAS REIMERS: Also Bootstrap ist ein sehr magische Sache von den Menschen entwickelt bei Twitter. Und was es bedeutet wurde, um zu tun war - vor Websites waren wirklich schwer zu machen schön aussehen, vor allem, wenn wir eine Menge von gemeinsamen Komponenten. So viele Tasten auf der Web gleich aussahen. 

Viele Textfelder können gemacht werden besser aussehen als die Standard-Text Feld, das Sie wirklich wissen, wahrscheinlich aus alt Websites oder wirklich schlecht gemacht Websites, die nur aussehen wie wörtliche Textfelder ohne jegliche Form von Text Schatten und jede Art der schöne Kontur. Also, was Bootstrap tat, war es gesagt, gut, Wir haben viele gemeinsame Stile. Warum machen wir nicht einen gemeinsamen Satz von CSS und einen gemeinsamen Satz von JavaScript als gut, die sie stylen können wie und welche Dinge wie Tropfen geben den Menschen Down-Menüs, die Menschen geben kann Dinge wie Modalverben. 

Modal ist, was über die Seite öffnet wenn es streng genommen etwas, das weiter inhibiert Interaktion, bis Sie interagieren. So etwas ist, sind Sie sicher Sie, diese Sache zu löschen? Man kann nicht wirklich etwas anderes zu tun bis Sie ja oder nein sagen. 

Es hat all dies und es ist verpackt zusammen und sagte, hier gehen wir. Die Leute können jetzt diese benutzen. Und finden Sie es über bei getbootstrap.com. Es wurde automatisch innerhalb enthalten Ihre letzte Problem eingestellt. Und Sie mehr als willkommen sind verwenden Sie es auf Ihrem Abschlussprojekt. Und wenn Sie folgen möchten, dass verlinken auf Bootstrap zu bekommen. 

Sie hier sehen, ist die Bootstrap CSS Ort. Sie werden sehen, Bootstrap. Und wenn Sie nach unten scrollen, werden Sie sehen, wie man es herunterladen, wie Sie installieren Sie es, et cetera. 

MIKE RIZZO: Und Sie können auch, Interessanterweise passen sie an sein, welcher Art von Themen dass du willst. Ich weiß, dass ist etwas, was ich für meine tat Abschlussprojekt, als ich die Klasse war es besonders an. Eine andere Version der Bootstrap dass hatte ein anderes Farbschema und verschiedene Formen von einigen verschiedene Dinge. Also habe ich Sie ermutigen, mit dem zu spielen. Es ist eine Art Spaß zu tun. 

TOMAS REIMERS: Blick über den oberen wieder, es ist sehr ähnlich wie die Schrift Unglaubliche Seite. Eine Menge an Dokumentation beginnt scheinen ähnlich, wenn du hast gesehen, genug davon. So, hier haben wir die CSS Komponente davon. Und Sie werden sehen, wie es Dinge zu stylen. Also, wenn Sie auf den Tischen auf, zum Beispiel, Sie können sofort eine Tabelle recht einfach durch Hinzufügen die Klasse Tabelle, um sie. 

Gleiche Dinge für Tasten. Wenn Sie fügen einfach die Klasse und BTN BTN Verzug oder BTN primäre, können Sie bekommen eine dieser Tasten mit diesen vorgefertigten Stile. Und dann, wenn Sie suchen etwas komplexer, als einfach Neugestaltung, was w bereits haben, auf über die Lasche an der Oberseite JavaScript wir haben eine Reihe von Komponenten. 

Hier haben wir also Übergänge, Modalverben, Dropdown-Listen, Tabulatoren und Tooltips. Ein Tooltip ist, was erscheint unter Ihrer Maus, wenn Sie auf etwas zu schweben. Popovers, Warnungen, Knöpfe, zusammenklappbar Akkordeons ist das, was sie sind in der Regel genannt. Karussells, die Flip- wie durch Bilder. 

Das sind also die Komponenten von Bootstrap. Ich möchte Sie ermutigen hoch gehen sie betrachten. Es gibt einen JavaScript-Komponente und eine CSS-Komponente. Fühlen Sie sich frei, um sie, wie du willst verwenden. Wir gehen nicht zu viel in sie gehen weil wir das Gefühl, die Dokumentation ist wirklich gut gemacht. Und ja. Haben Sie Fragen dazu haben? 

MIKE RIZZO: Also als wirklich schnell Seite, das Design dieser Web-Seite, wir schnell zusammen, für diese Darstellung Verwendung Bootstrap tatsächlich getan. Wie Sie sehen können, wenn wir diese anklicken verschiedenen Registerkarten, wir sind eigentlich nie Verlassen dieses aktuelle Seite index.html. Also, was wir haben, ist verschiedenen divs innerhalb dieser index.html. Und dann, wenn wir auf einen anderen Tab, es ist nur die Änderung die eigenen Auftritt. 

So ist es entsprechend positioniert sie, ändert den HTML-Code der Seite, so dass der aktuellen Registerkarte als aktiv markiert, so es anders und sieht erscheint wirklich nett. 

TOMAS REIMERS: So, dass alles getan wurde ohne uns zu schreiben fast jedes CSS. Wir sehen auch eine Kopfzeile über der Spitze, was die Farben sind von uns. Aber die tatsächliche legt es auf die oben auf der Seite und macht es war Bootstrap blättern. Und dann auch noch für eine andere Bibliothek - das ist nicht, was wir darüber geredet, aber ein Sie googeln können, wenn Sie möchten. Dies wird prettify.js genannt. Und es wird der Code-Syntax markieren für Sie sowohl mit CSS und JavaScript. 

Das letzte, was wir reden wollen bevor wir veröffentlichen Sie heraus in die Welt, um in Bibliotheken suchen, um herauszufinden, wie man sie benutzt und hoffentlich Dokumentation lesen und zu finden, was Sie Notwendigkeit ist, wie Bibliotheken zu finden. Also das erste ist, dass wir gerade sind gehen, um Google zu schieben. Go Google. 

Das ist buchstäblich das, was wir tun, wenn wir brauchen, um etwas zu tun ist, wir Google. Gibt es eine JavaScript-Bibliothek, ermöglicht es mir, in eine Zeit zu manipulieren sinnvoller Weg? Also, wenn ich weiß, dass einige Benutzer die Erstellung angemeldet hier, und das ist der aktuelle Zeit, wie kann ich das berechnen Unterschied, dass ohne berechnen, es selbst? Also das ist eigentlich eine gemeinsame Sache, JavaScript Zeit-Bibliothek. Und hier sind wir Moment.js-- die beliebteste. 

Wenn wir eine Bibliothek zu manipulieren etwas Farbe in der Lage zu sein, erzeugen eine Reihe von zufälligen Farben - möglicherweise, um eine generieren Stil oder etwas - wir könnten etwas wie Google JavaScript-Farbbibliothek. Und ich bin sicher, dass wir Pop-up mit tausend und einer von ihnen. Sie sind willkommen, um durch sie zu lesen. 

So sind die meisten Dinge - wenn Sie sie finden - gehen auf einen der gehostet werden Websites, die Host-Code. Sie sind es ein paar beliebtesten. Die beliebtesten, von Bisher ist github.com. Und wenn Sie auf GitHub zu gehen, es ist eigentlich wo Normalisieren wurde veranstaltet. Also, wenn Sie wieder zu, dass man gehen wollen. Zeigen Sie ihnen, dass. 

MIKE RIZZO: Und das ist eigentlich, wo dies wird auch gehostet wird, wenn Sie bemerkt. 

TOMAS REIMERS: Ja. Also, wenn Sie gehen über Normalisieren und gehen auf die GitHub. Waren ist das? 

MIKE RIZZO: Das kleine Katze Sache ist die GitHub-Symbol. 

TOMAS REIMERS: Oh. So GitHub verwendet eine Methode namens Git zum Speichern von Code. Ist Sie nicht wissen, was das ist oder es Ihnen Angst, das ist in Ordnung. Sie müssen nicht wissen, was Git ist weil GitHub hat eine Download-Button unten rechts. 

Der andere nützliche Sache, zu wissen, GitHub ist über die meisten Produkte wird ein Lese mich. Und wenn sie nicht über eine Website, lies mich darüber, wie Sie sprechen installieren Sie es, wie Sie es verwenden, was es tut, et cetera, et cetera, et cetera. Was wir im Grunde schon Gehen Sie durch. 

MIKE RIZZO: Internet ist Kündigen. 

TOMAS REIMERS: Das ist in Ordnung. Die letzten beiden Dinge, die wir wollten , darüber zu sprechen - wir über Git gesprochen haben - ist die Fehlersuche. Und dieser ist nicht für so relevant das Endprodukt, wie es 50, wenn Sie verlassen. Und wenn Sie in Produkte laufen Umsetzung Bibliotheken oder Umsetzung Ihr eigenes Projekt, Sie gehen Fragen haben, oder du bist gehen, um Fragen zu suchen. 

Auch Google es. Das ist buchstäblich das, was wir tun. Das klingt jetzt albern. Aber buchstäblich wir Google es. Und wieder eines der ersten Dinge, Sie ist in der Regel in laufen stackoverflow.com, das ist eine wunderbare Frage und Antwort Sicht. 

Es ist wunderbar, denn Sie können sowohl schreiben Sie die Fragen und suchen Antworten, sondern auch, weil Es hat bereits eine Menge von vorbelegt Inhalt gibt. Also in der Regel, wenn ein Programmier googeln Frage innerhalb der ersten Paar trifft Sie bereits ausgeführt haben in sie während Ihr Problem Sets. 

Und dann der letzte wirklich kurze Sache JSFIDDLE ist, die - heute haben wir mache eine Menge Arbeit mit JavaScript HTML CSS. JSFIDDLE ist eine Web-App, die im Grunde können Sie Ihre HTML-nehmen, IHRE JavaScript-links unten, und Ihre CSS oben rechts. Und dann kann es schaffen eine schnelle machen von IT-und sehen, wie es interagiert. Es ist sehr nützlich, wenn Menschen versuchen um einen Proof of Concept zu tun wie das ist, wie Sie es tun ein Dropdown-Menü. Vielleicht ein schnell aufzudecken oder was auch immer. 

MIKE RIZZO: Also gehen wir vor und klicken Sie auf diese. Ein kurzer Hinweis - Erwägung, bevor wir Dabei auf Klick. Stellt sich heraus, JCorey Korea hat auch einen eingebauten im Click-Ereignishandler, dass es verwendet, nur weil es Zahlen Sie gehen, um eine Menge Dinge tun zu wollen wenn Sie etwas wollen, klicken Sie auf. 

Ebenso hat sie auch eine Schwebeflug. Aber den vollen Umfang zu erhalten die, an der jQuery aussehen Dokumentation und es tun. Ich habe hier etwas dumm. 

TOMAS REIMERS: Also ich habe einen wirklich schnell Programm hier, das sagt -Taste auf Klick. Dann haben wir eine for-Schleife. Für i kleiner als 404. Es ist nur los, um Pop-up diese Warnmeldungen. 

MIKE RIZZO: Und was war das Code 404 stand in HTML? Erinnert sich noch jemand? Nicht gefunden, richtig. Chrome auch diese ordentliche hinzugefügt Sache, wo Sie können - 

TOMAS REIMERS: Weil Leute wie Mike begann, dies zu tun und eine Menge Nutzer ärgerlich, die erlaubt Sie sehen Info. 

MIKE RIZZO: Ja. 

TOMAS REIMERS: Haben wir Fragen haben über dieses, über JavaScript Bibliotheken, Bibliotheken zu finden, oder welche Web-Entwicklung sieht wie in der realen Welt? Wir laufen gegen die Zeit. Also ich bin mir nicht sicher, dass wir , Zeit zu implementieren es sei denn, es ist wirklich schnell. Sind wir gut? 

MIKE RIZZO: Alles, was Sie Kerle möchten in, wie, wirklich schnell zu sehen, zwei Minuten oder weniger? 

TOMAS REIMERS: Alles können wir klären? Wie in zu schreiben - 

ZIELGRUPPE: [unverständlich]? 

MIKE RIZZO: Ja, so that - 

TOMAS REIMERS: Sie können einfach auf Ctrl-U auf der Website. 

MIKE RIZZO: Oh, ich wusste nicht, dass. 

TOMAS REIMERS: Ich denke, ja. Strg-U. Ja. 

MIKE RIZZO: Oh, das ist also die Code für die Website. Aber wenn Sie tatsächlich herunterladen möchten unsere Dateien und alles, es gehostet wird auf github.com 

TOMAS REIMERS: Slash meinen Namen - Tomas Reimers - Schrägstrich CS50 Bindestrich Seminars. 

MIKE RIZZO: Und Sie können alles, was es zu finden. 

TOMAS REIMERS: Dies ist, was GitHub aussieht, übrigens. Also noch einmal, wenn Sie eine offene Quelle zu sehen Projekt, in der Regel, sie werden ein Lese sein mich gibt, dass Sie lesen können. Und wenn Sie wieder gehen, werden Sie feststellen, dass Sie die Download-zip haben, wird die können Sie den Quellcode herunterladen Code gehören die Produkt in Ihrem eigenen Sache. 

MIKE RIZZO: Ja, und wenn wir nur auf auf die index.html wirklich schnell - 

TOMAS REIMERS: Sie sehen hier ist der Source-Code für unsere Website. 

MIKE RIZZO: Auch, ich habe vergessen, rechts zu schieben vor mit dem großen Tisch es enthalten, aber es gibt auch eine Tabelle von chmods, die wir aufgenommen nur für Ihre Klarheit. Aber wenn wir zu scrollen ganz nach unten, um die Boden, wir haben nicht wirklich sehr zu tun viel mit der JavaScript- Zeug überhaupt mit diesem. Es ist ausschließlich von allem anderes, das wir hatten. 

Ich danke euch für die kommenden und Hören. Wir hoffen, das war wirklich hilfreich. Wenn Sie einen JavaScript verwandten haben Fragen oder wollen einfach nur reden was anderes wie das, was andere coole Dinge Sie mit JavaScript tun können, freuen wir uns mit Ihnen zu sprechen. 

TOMAS REIMERS: Wenn Sie eine Frage haben über Ihr Projekt oder wenn das sein kann relevant ist, werden wir wahrscheinlich halten rund ein bisschen nach diesem. Aber anders als das, haben ein gutes Wochenende. 

MIKE RIZZO: Ja, zu genießen. See you guys. 

TOMAS REIMERS: See ya.