Tip:
Highlight text to annotate it
X
>> 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.