[Powered by Google Translate] [Seminar: JQUERY]
[Vipul Shekhawat, Harvard University]
[Dies ist CS50.] [CS50.TV]
Wenn Sie nach zusammen zu Hause sind, können Sie tatsächlich auf meine Dias Online
indem Sie auf diesen Link.
Es ist TjjRWj auf bit.ly.
Sie können auch einfach die URL direkt,
Das ist cloud.cs50.net / ~ vshekhawat, die mein Name ist,
und jQuery.
Ich empfehle Ihnen wärmstens zu folgen, wenn Sie zu Hause beobachten sind,
und wenn du hier bist, auch, denn dies ist ein ziemlich interaktive Präsentation.
>> Also heute werde ich über jQuery sprechen, und die erste Frage ist,
was ist jQuery?
In diesem Jahr, ich weiß, du Jungs haben JavaScript nicht abgedeckt
so detailliert, wie wir in den vergangenen Jahren haben.
JavaScript ist in erster Linie, nur eine Client-seitige Sprache
die Sie verwenden, um Skripts und Code auf jeder Computer des Benutzers ausgeführt werden.
So haben Sie einen Server, der Web-Seiten bietet, um Menschen,
aber möchten Sie vielleicht Sachen auf ihre Maschine zu tun,
fragen ihre Maschine, um Anfragen an den Server alle 30 Sekunden oder so etwas zu senden.
Sie können die Verwendung von JavaScript zu tun.
JQuery nur bietet mehr Funktionalität auf der Oberseite JavaScript
Das bedeutet zusätzliche Sachen für Sie.
Wenn man sich den Inhalt an der Spitze,
Das beschreibt einige der Sachen, die Sie tun können, sind.
Also insgesamt war es im Januar 2006 erstellt.
Es wurde erstmals im August 2005 von konzipiert.
Es ist schon seit ein paar Jahren, und es ist wirklich Teil der neuen Web 2.0 Bewegung
Das ist aus dem Internet so glänzend.
Es ist die am weitesten verbreitete JavaScript-Bibliothek.
Mehr als 19,6 Millionen Websites nutzen es, und die Nutzung steigt weiter
nach builtwith.com, die offenbar im letzten Jahr,
wurde gerade ständig steigenden ziemlich linear.
Unter den Top 10 Millionen Websites gibt es noch -
rund 40% von ihnen sind zur Zeit als sie.
Facebook nutzt es, viele andere Websites aktuell verwendet wird.
Sie können an diesen Statistiken auf eigene Faust zu suchen, wenn Sie möchten.
Und man könnte sagen, es ist legitim, weil es eine Stiftung und 13 Vorstandsmitglieder hat,
zusammen mit einem Team von 20 Personen, die daran arbeiten auf einer regelmäßigen Basis.
So ist es sehr breit verwendet hat, hat es eine. Org URL, es ist schick,
es hat Spin-offs für andere Sachen, so ist es eine große Sache.
>> Warum sollten Sie es nutzen? JQuery ist sehr leicht.
Das heißt, es gibt nicht eine riesige Datei. Sie können
die verkleinerte Datei ist, die ohne all den weißen Raum und Kommentare, und es ist nur 32 kB.
So ist es einfach nur auf Ihre Web-Seite werfen
und nur um ihn zu benutzen.
Es ist auch sehr effizient geschrieben, so dauert es nicht sehr viel -
es nicht verlangsamen Ihre Website viel, wenn Sie es verwenden.
Es lässt Sie implementieren Dinge, die bisher nicht realisierbar waren.
Es gibt einige Aspekte der Funktionalität,
wie das Erstellen von Animationen, das normalerweise wäre sehr, sehr schwer zu tun.
Aber in jQuery sie sind wirklich sehr einfach.
Und es gibt einige Dinge, die ärgerlich sind zu tun,
möglich in JavaScript, wie das Senden einer POST-Anforderung,
aber um eine Anfrage an einen Server zu senden, müssen Sie schreiben
fünf oder sechs oder sieben Zeilen Code.
Jetzt können Sie tun es einfach in einer einzigen Zeile Code in einem einzigen Aufruf der Funktion.
Das ist wirklich vereinfacht eine Menge Sachen, die du tust.
Und all die coolen Kids werden es zu benutzen. Damit meine ich mich.
In meinem letzten Projekt im vergangenen Jahr ist die news.whrb.org,
was für den Radiosender, habe ich dieses Blog
die Gastgeber alle zeigt, dass wir getan haben und die MP3-Dateien für sie.
Sie können durch die Vergangenheit zeigt, zu sehen,
und es ist alles getan mit jQuery. Man kann sagen,
wegen all dieser Animationen, im Wesentlichen.
Also, wenn Sie - wenn Sie einen neuen Beitrag erstellen sind,
Sie sehen diese kleinen slideDowns, das ist alles getan mit jQuery.
Und das Fade - so solche Sachen wird alles getan mit jQuery,
und Sie müssen nicht ständig die Seite neu laden, um die Website navigieren.
Eine andere kühle Sache, die unter Verwendung von jQuery ist diese Präsentation.
Ich bin mit diesem Open-Source-Ding namens scrolldeck,
dem jemand schrieb oben auf jQuery.
Wenn Sie an der Quelle tatsächlich anschaut, kann man sehen, dass
sie mit diesen Dollarzeichen, Dollar-Zeichen
werden in jQuery verwendet, um zu bedeuten, dass eine Funktion ein jQuery-Funktion ist.
So sind sie, die einen Wrapper oben auf jQuery
das ermöglicht es Ihnen, eine Präsentation wie diese machen,
und man kann sehen, dass sie hier sind, einschließlich der ursprünglichen jQuery-Datei,
das ist, was du musst zählen, wenn Sie wollen, um jQuery verwenden
in Ihre eigenen Websites.
>> Berühren auf, dass, wie Sie es installieren?
Sie können gehen Sie einfach auf jQuery.com und laden Sie die Datei,
fügen Sie es zu einem Web-Verzeichnis und schließen Sie sie.
Also einfach am Anfang, in der head-Tag der HTML-Datei
Ihrer wichtigsten HTML-Datei, nur haben diese Codezeile
mit der richtigen Version für welche Version von jQuery Sie verwenden.
Sie können es, indem Sie auf jQuery.com downloaden,
klicken Sie auf "Download jQuery," und du hast es. Das war's.
Und tatsächlich können wir einen Blick auf, wie es aussieht.
Wenn Sie auf hier herunterladen, ist diese jQuery.
Es ist nur eine große JavaScript-Datei, die den ganzen Zauber Sachen für Sie erledigt.
Dies ist die verkleinerte Version, die ist überhaupt nicht lesbar.
Sie können auch auf die Entwicklung Version aussehen, was lesbar ist
aber immer noch sehr, sehr lange.
Es ist eine Menge Zeug drin.
Sie können auch auf gehostete Version von Googles darauf verlinken.
Also das wird können Sie nur auf Google verlassen, um sie zu stellen.
Sie bieten jede Version von es, jederzeit verfügbar.
So können Sie wahrscheinlich auf Google verlassen, um es für Sie zu hosten.
Oder Sie können auf eigene neueste jQuery-Version zu verbinden.
Sie haben eine URL, die immer auf die neueste Version aktualisiert ist.
Es ist jQuery-latest, und es gibt ein Problem mit dem,
Das ist, dass, wenn die aktualisierte jQuery und einige der vorherigen Funktionalität
hatten sie wird retrogradierte oder veraltet,
kann es nicht - es kann beginnen, nicht mehr unterstützt zu werden.
Also, wenn Sie schreiben, eine Website mit der Version 1.8.2,
durch die Zeit, Version 2.7 kommt
einige der Funktionen, die Sie schrieb nicht mehr funktionieren.
So ist es besser, laden Sie einfach die 32 kB-Datei,
legte sie auf Ihrer Web-Seite, und es wird immer funktionieren.
>> Ich werde weitermachen und reden über die tatsächliche Funktionalität von jQuery.
Die erste Sache ist Selektoren. Dies ist, was jQuery wurde ursprünglich konzipiert, um bereitzustellen.
Und Sie können auf Dokumentation klicken zum Anschauen
Die ausführliche Dokumentation ist für die Wähler werde ich dabei sein werde.
Die Idee dahinter ist, dass Selektoren können Sie HTML-Elemente auf einer Seite auszuwählen.
Elemente auf einer Seite haben IDs und Klassen und andere Aspekte zu identifizieren, um sie.
Es gibt auch - sie sind in unterschiedlicher Reihenfolge.
Einige der Zeit, die sie ineinander verschachtelt sind.
JQuery ermöglicht es Ihnen, einfache Abfragen, die Elemente aus der Seite abrufen zu konstruieren.
Dann können Sie manipulieren diese Elemente mit jQuery-Funktionen,
das ist die Manipulation Abschnitt haben wir erhalten, werden später.
Sie können die HTML, CSS ändern,
Sie können auch animiert und fügen Sie Funktionen, die auf bestimmte Ereignisse zu aktivieren.
So zum Beispiel, wenn etwas angeklickt, Sie wollen, dass etwas passiert,
Sie können, dass mit jQuery als gut tun.
Und es gibt eine große Anzahl von Möglichkeiten, um Elemente auszuwählen.
Die meisten von ihnen habe ich noch nie benutzt, aber es sind die grundlegenden diejenigen,
die sind ziemlich wichtig.
Das Element Wähler, zum Beispiel, wenn Sie gerade etwas zu wählen
das ist ein div - Ich habe tatsächlich den Code offen für diese Präsentation.
So, zum Beispiel, hier ist die erste Folie.
Hier haben wir ein div. Wenn wir tatsächlich wählen Sie alle divs auf der Seite,
es wird nur uns ein Array aller divs die in dieser Datei existieren.
Der ID-Selektor können Sie auswählen, was mit einer bestimmten ID.
Also, wenn diese, zum Beispiel, hat das Ding die ID "was",
und wenn wir das getan hat, was mit # anstatt einige ID,
es wäre nur ein Array, das ein einzelnes Element hat und das ist, dass Element der Seite.
Wir können auch kombinieren Selektoren auf diese Weise, indem er
wählen Sie nur Dinge mit IDs, die divs sind.
Also ja. Nur wählen divs, die diese ID haben.
Für die Klasse verwenden Sie einfach einen Punkt, ist es das gleiche wie CSS.
Nachkomme funktioniert auch, wenn Sie also etwas Klasse haben
so zum Beispiel - und es hat Elemente darin verschachtelten
es gibt einige Klasse und es hat eine Anker-Tag zu einer anderen Seite zu verknüpfen,
Sie können diese Syntax verwenden, um den Link abzurufen.
Sie können auch mehrere Dinge auf einmal, nur durch Kommas getrennt werden,
verwenden keine Wähler die Sie möchten, und Sie werden alle von ihnen auf einmal auszuwählen, in einem einzigen Array.
Und dann gibt es auch die Wähler nicht, so können Sie alle divs
, die nicht über irgendeine bestimmte Klasse.
Und das ist nur ein hilfreicher Weg, um eine Einführung, wie diese Auswahl funktioniert.
Ich zeige einige konkrete Beispiele in einer Sekunde.
>> Erweiterte Selektoren sind - dies sind nur einige Beispiele.
Es gibt Dutzende von ihnen, aber wenn Sie wollen, um alle Image-Tags auswählen
innerhalb ein Element, dann müssen Sie nur folgendes tun: Image.
Wenn Sie die Elemente selbst wählen, zum Beispiel wollen, wenn es 20 von ihnen,
Sie wollen auf 0, 2, 4, 6 und so weiter wählen,
Sie tun: selbst, oder Sie können auch tun: odd.
Das sind Pseudo-Selektoren, was bedeutet, dass sie tatsächlich berechnen
jedes andere Element nicht nur gehen und Auswählen alle.
Sie können auch - jedes Element kann auch Attribute.
So, zum Beispiel, ist class = Zentrum auch ein Attribut.
Aus diesem Anker-Tag, href, Hypertext-Referenz, ist ein Attribut auch.
So können Sie etwas, dass Links auf eine bestimmte Seite oder einfach nur - es ist wirklich allgemein ist.
Sie können alles mit einem Attribut, das Sie wählen möchten.
Und dann auch, enthält Attribut.
Wenn Sie, zum Beispiel, wollte alle input-Elemente wählen
dass das Wort "Pass" als Name von ihnen,
wenn eine Seite einen Eingang Textblock
Das nennt man "vergessen", das eine Möglichkeit, dass wählen könnte würde.
Und es gibt viele mehr. Sie können weiter gehen und schauen Sie sich in der Dokumentation
und sehen konkrete Beispiele, wie es funktioniert.
>> Die nächste Sache ist DOM-Manipulation.
Nachdem wir Elemente auswählen, wollen wir tatsächlich tun Sachen mit ihnen.
Bisher haben wir nicht, dass überhaupt sah, aber wenn man sich die Dokumentation,
gibt es wirklich eine Menge, was wir tun konnten.
An dieser Stelle werden wir Elemente auf dieser Präsentation wählen
und manipulieren sie mit jQuery.
Da dies umgesetzt mit jQuery, haben wir Zugang zu dem jQuery-Bibliothek,
und wir können die Funktionen dieses Codes verwenden.
Eine nützliche Sache, die Sie nicht über vielleicht wissen ist die Konsole.
Und Google Chrome ist das, was ich verwende. Sie können die Taste alt Befehl J
oder alt Kontrolle J um die Konsole öffnen.
In Firefox Ich denke, es ist Befehl shift K oder Steuerschieberegister K.
In Safari muss man gehen einige Einstellungen ändern.
Es ist ein Link, wenn Sie möchten, es zu tun, aber ich empfehle immer Chrome oder Firefox.
So öffnen wir die Konsole, ist es hier unten.
Es ermöglicht Ihnen, im Grunde genau das zu tun, was Sie wollen.
So können Sie einfach in eine Variable namens x geben,
x = 5, mal sehen, was x + 2 ist.
Sie können auch etwas tun, wie CS + Lassen Sie uns sehen, x + 45, das CS50 sein wird.
Sie können nur tun, einige typische JavaScript Zeug.
Aber man kann auch hier in jQuery.
>> Lassen Sie uns also an diesem ersten Aspekt hier.
Wir werden eine Variable namens HTML, die eine Zeichenfolge zu erstellen.
Es hat einen Absatz-Tag in ihr, das ist ein paar neue Text genannt.
Also haben wir diesen HTML haben, ist es einige neue Text, Absatz-Tags.
Jetzt sind wir wirklich wollen, um es der Seite hinzuzufügen.
Ich es so einrichten, dass der HTML-Code für dieses Absatzes dieser Titel hier anhängen ID ist.
Wenn wir append ID und wählen Sie dann anhängen, um es
die HTML-Variable I gerade erstellt haben,
es wird, dass HTML am Ende hinzufügen, direkt nach diesem Absatz tag.
Also, wenn wir das tun - wir empfehle dieses Absatzes
und wir haben die append-Funktion mit dem HTML variable ich soeben genannt,
wird es, dass neue Text genau dort auf der Seite hinzuzufügen.
Wir können auch voranstellen, was bedeutet, dass es vor zu gehen, am Anfang dieses Elements.
So gibt es einige neue Text am Anfang und danach.
Ich kann gehen Sie vor und aktualisieren, um loszuwerden, diese Sachen, die ich gerade gemacht habe.
Aber das ist ein Beispiel, wie Sie die prepend verwenden und Methoden anhängen
Sachen auf der Seite zu manipulieren, fügen Sie einige HTML.
>> Sie können auch Klassen.
Zurück in diesem Stil-Datei, habe ich dies für den Sieg Klasse erstellt
das hat Textfarbe rot, etwas Hintergrundfarbe und einen Text Schatten.
Es sieht scheußlich, aber ich kann es tatsächlich -
Dieser Absatz entspricht der Klasse ID.
Also ich kann hinzufügen, die Klasse für den Sieg.
Ich kann dies in der Konsole ausführen,
und fügt diese Klasse, und jetzt sieht es so scheußlich, wie erwartet.
Die CSS wird automatisch zu den Klassen, die Sie sich beworben -
wenn es CSS für eine Klasse, es wird automatisch angelegt
wenn Sie die Klasse eines Elements.
Dann können wir einfach entfernen mit remove-Klasse.
Also, wenn Sie einige vordefinierte Klassen wie rot oder hervorgehoben,
und dann wollen Sie diejenigen Elemente gelten,
Sie müssen nicht alle CSS Styling jedes Mal tun.
Sie können fügen Sie einfach die Klasse auf ein Element, und dann wird es automatisch zu -
es sucht automatisch für die entsprechende Klasse.
Wir können auch Dinge zu entfernen, so werde ich alle divs wählen
auf der Seite und entfernen Sie sie.
Was soll das aussehen würde?
Es wird wie nichts zu suchen, so gibt es eigentlich nichts mehr übrig.
Meine Präsentation ist weg.
Ich kann erfrischen und bringen sie zurück, zum Glück,
weil es nur läuft einmal,
aber das ist ein Beispiel für das Entfernen, wenn Sie vollständig zu zerstören ein Element aus der Seite wollen.
>> Sie können auch überschreiben, und ich werde alle Absatz-Tags auf der Seite wählen
und in ihnen zu gehen und zu ersetzen, was Text sie in ihnen haben
nur mit dem Wort "Test".
Wenn Sie dies tun, werden Sie jeden Absatz auf der Seite ersetzen mit diesem Test.
Yep. Sie sind alle mit der Prüfung ersetzt.
Also das ist ein Beispiel für den Zugriff auf den Text und überschreiben.
Sie können auch Informationen abrufen, und das ist wirklich cool für Eingabefelder.
Wenn Sie ein Eingabefeld tippen, dass die Menschen in Sachen,
Menschen Eingabe Sachen hinein,
Hier wählen wir den Eingang, einem input-Tag mit einer Art von Text.
In diesem Fall gibt es nur ein Eingabefeld in der ganzen Präsentation
so werden wir wählen Sie einfach die erste, und dann nennen wir die Val-Funktion auf sie.
Das gibt den Wert, und für ein Eingabefeld,
der Wert ist nur, was passiert mit drin sein.
Also, wenn wir dies tun, es gibt nur die Zeichenfolge Zeug.
Und wenn wir es wieder rufen nach dem Schreiben mehr Zeug, verwandelt es sich in mehr Zeug.
Das ist ein guter Weg, um Elemente von einem Eingabefeld zuzugreifen, und dann zu überprüfen,
dies ist eine gültige E-Mail-Adresse, ist dies ein gültiges Datum, zum Beispiel.
Sie können einfach abgerufen werden Sachen sofort als Menschen Eingabe sind es,
und dann prüfen, ob es gültig ist, schicken Sie es zurück an einen Server, zu tun, was Sie wollen mit ihm.
Und das ist, wie Sie auf, was innerhalb dieser Boxen.
>> Sie können auch CSS direkt ändern, so dass anstelle der Zugabe
eine Klasse, die einige vordefinierte Eigenschaften aufweist,
Sie kann nur hinzufügen, was CSS Sie etwas wollen.
Also lassen Sie uns wählen Körper, der die gesamte Präsentation ist,
und Farbe ist die Eigenschaft, die, was die Farben der Text definiert.
Wenn wir es zu rot wechseln, wird der gesamte Text in der Seite, auf rot.
Wir können so etwas wie Hintergrundfarbe blau zu tun,
dort gehen wir, es ist schön.
Sie können tun, was Sie wollen mit diesem.
Mit dem CSS-Eigenschaft können Sie wirklich ändern, wie alles jederzeit aussieht.
Das nächste, was ist Wirkung.
Effekte sind im Grunde das gleiche wie Änderung der CSS,
sondern sie tatsächlich etwas mehr Animation dazu.
Anstatt also nur zeigen, oder etwas zu verbergen oder das Ändern der Farbe,
Sie können tatsächlich machen es animiert.
Hier ist die Dokumentation, wenn Sie einen Blick auf die umfangreiche Dokumentation für sie nehmen wollen.
Aber ich werde die wichtigsten sind abzudecken.
Es sind die ein-und ausblenden Eigenschaften.
Anzeigen / ausblenden ID entspricht eigentlich diese ganze Feld
also, wenn ich es zu verbergen, wird es einfach verschwinden.
Und ich kann es wieder zu zeigen, wenn ich es wieder kommen wollen.
Und es ist wieder da. Es hat nicht wirklich verschwinden,
Ich habe nicht wirklich entfernen Sie sie aus der Seite, habe ich einfach die CSS-Eigenschaft der Sichtbarkeit, um versteckte
so kann man es nicht mehr sehen.
Es ist auch nach oben und nach unten rutschen, mit denen Sie diese Wirkung haben können.
Es gleitet bis zu verschwinden, und nachdem es verschwindet
Sie können nach unten schieben, um sie zurück zu kommen. Und jetzt ist es wieder da.
Es gibt auch diese Fade-Effekt, der - Fade ID entspricht dieser Box.
Wenn ich es ausblenden, dann wird es langsam verschwinden.
Ich kann auch verblassen sie in, und es wird wieder kommen.
Sie können auch fade to, was ist spezifisch für die Fade-Funktion.
Man kann es auf eine bestimmte Deckkraft, die Sie verblassen.
Also, wenn Sie es verblassen langsam auf 0,5, wird es sich zur Hälfte sichtbar.
Ich kann es auf 0,1 zu gehen, und auf 1 zurück, um es vollständig wieder sichtbar.
Das ist nur eine weitere Animation, die Sie tun können.
>> Es gibt auch die Toggle-Effekte.
So werde ich das Toggle-ID, die zu dieser Box entspricht, zu wählen,
und an diesem div rufen Sie Toggle, wenn es sichtbar ist wird es unsichtbar,
wenn es unsichtbar ist es wieder sichtbar.
Also habe ich einfach nannte diese Toggle-Funktion zweimal, das erste war
dasselbe wie Fell, war der zweite Anruf das gleiche wie eine Show.
Und Sie können dies auch mit einem Fade-Toggle,
was macht das gleiche, außer dass es tatsächlich verblasst.
Und dasselbe mit dem Schlitten zu wechseln.
Es gibt angekettet Effekte sowie, was bedeutet,
Wenn Sie ein Element auswählen und rufen eine Reihe von Animations-Methoden darauf
wenn Sie es zu verblassen wollte, dann nach unten rutschen,
und dann verstecken und dann verblassen in, wird es ihnen in einer Reihe zu tun.
So verschwand, kam zurück - aus irgendeinem Grund, die Haut ist nicht geschehen.
Probieren wir es aus. Ja, so ist es ausgeblendet und dann glitt.
Und es gibt viel mehr. Sie können die Funktion animieren
eigene Animationen zu erstellen, ist die ziemlich komplex,
aber es bietet Ihnen unendliche Erweiterbarkeit.
Sie können jede Art von Animation, die Sie wollen.
Sie können auch die Warteschlange in die Warteschlange mehrere Animationen zu einem Zeitpunkt.
Also, wenn Sie etwas über die Seite fliegen,
Rutsche von oben rechts nach unten links, können Sie das tun,
und nur noch ein Bündel von Maßnahmen gehen einer nach dem anderen.
>> Das nächste, was wir reden gerade ist Veranstaltungen.
Events können Sie - so weit, wir haben gerade Eingabe Dinge in der Konsole
und das ist ein Weg, um dies zu ermöglichen,
aber auf eine tatsächliche Seite, du bist nicht in der Lage sein, um
machen die Benutzer Art Dinge in die Konsole.
Sie wollen die Dinge automatisch passieren.
Dafür müssen Sie auf einige Ereignisse, die bestimmten Ereignis passiert aktivieren verwenden.
Sie können die Dokumentation zu den Details.
Also mal sehen. Wir wollen ein-oder ausblenden das Kontrollkästchen,
aber jetzt diese Taste nicht tun, weil ich es nicht umsetzen es noch nicht.
Ich werde dem eigentlichen HTML-Seite zu gehen.
Hier ist die Rutsche. Es ist ein div für den Schlitten.
Es hat die Klasse der Rutsche.
Da ist der Text. Jetzt gibt es diese Box und die Box-Taste.
Wie würden wir eigentlich machen diese verschwinden?
Zunächst schreiben wir eine Funktion, die die Box ID verschwinden lässt.
Dies ist die Syntax für funtion, lass uns einfach nennen es hideTheBox.
Es spielt keine Argumente, denn es gibt keine Argumente zu treffen sind.
Wir können die Box-ID.
Also mit dem jQuery wählen, können wir wählen box ID,
und dann einfach verschwinden lassen.
Machen wir es fade out.
Wenn wir rannten diese Funktion in der aktuellen Konsole
konnten wir definieren diese Funktion, können wir hideTheBox nennen, und es funktioniert.
Aber wir wollen, dass es passiert, wenn die Taste tatsächlich gedrückt wird.
Um das zu tun, müssen wir eine Veranstaltung nutzen.
Um ein Ereignis zu einem gewissen bestimmten Taste oder eine Aktion Geschehen zu binden,
müssen wir das Element, das das Ereignis auslöst wählen -
oder dass wird das Ereignis auslösen, sorry.
>> Also zunächst einmal, lassen Sie das Kontrollkästchen Schaltfläche ID
denn das ist die Taste, und jetzt, für diese Schaltfläche,
Wir wollen, um eine Animation zu erstellen, wenn es angeklickt wird.
So gibt es diese Klick-Funktion.
Es ermöglicht Ihnen, eine andere Funktion, um es zu binden.
Diese Funktion übernimmt eine andere Funktion als Argument
können wir in der hideTheBox Funktion übergeben,
und wenn diese Taste angeklickt wird, wird diese Funktion automatisch ausgeführt werden.
So wird dies funktionieren, wenn wir diese zu retten, werde ich aktualisieren,
und - eine einzige Sekunde, tut mir leid.
Let me fix dies wirklich schnell.
Ok. Dort gehen wir. So, jetzt ist die Box verschwinden, wenn wir auf die Schaltfläche klicken.
Wir können auch diese nur fadeToggle,
ändern sie nur zu verstecken oder zu zeigen das Feld
und dies wird auch zu arbeiten, wenn wir aktualisieren.
Wir können es zu verbergen, können wir auch zeigen, und dass wird auch weiterhin funktionieren.
Eine andere Sache, die wir tun können, ist, wissen wir eigentlich nicht haben, um diese Funktion zu definieren hideTheBox
bevor wir rufen Sie die Klick-Funktion.
Also statt der Definition der Funktion und Aufruf hideTheBox,
wir nur gehen, um es nennen, wenn dieses Ding geklickt wird.
So können wir definieren sie anonym in hier,
Das ist ein Feature, dass JavaScript muss.
Sie können eine Funktion definieren, in der Regel, würden wir sagen Funktion hideTheBox
mit Argumenten, sondern können wir nur sagen, funktionieren keine Argumente,
starten Sie die geschweiften Klammern, um die Funktion zu definieren,
schließen, dass die geschweiften Klammern, und dann einfach definieren die Funktion hier,
innerhalb der ersten Klammer und der letzten Klammer
das auf die Argumente der Klick-Funktion entsprechen.
Also haben wir in dieser Funktion auf den Weg gegeben, können wir diese Codezeile hier kopieren,
und das wird tun genau dasselbe.
Und jetzt haben wir nicht über diese zufällige fadeTheBox Funktion
das ist herumsitzen ohne ersichtlichen Grund.
Die Funktion definiert wurde, anonym, es nicht einen Namen haben.
Es wird nur dann ausgeführt, wenn wir auf das Feld klicken.
So erfrischend noch einmal, noch einmal, und Sie können sehen, dass es noch funktioniert.
Und das ist, wie Sie Ereignisse erstellen.
>> Es gibt eine Menge von verschiedenen Veranstaltungen, die wir verwenden können.
Ich werde wieder auf die Konsole verwenden, um nur zeigen Ihnen, wie diese funktionieren.
Die IDs für jede dieser zu jeder Box entsprechen.
Also diese Box ist auf ID, das ist eine Schlüssel-ID, und dieses ist Maus ID.
Eine weitere Sache ist, dass es diese Aktion Funktion, sondern als Eingabe es jedes Mal,
Ich ging voran und definiert diese Aktion Funktion hier unten.
Es macht das Gleiche wie die hideTheBox Funktion.
Es wird dieses Feld und entweder blendet es aus oder blendet es in.
Und das ist, warum wir in der Lage, um es hier zu verwenden sind.
Also, wenn wir auf diesen auf ID, wollen wir darüber hinaus die Box verschwinden oder wieder auftauchen.
Es ist die gleiche Sache wie die Schaltfläche, die wir in der letzten Folie hatte.
Jetzt, nachdem wir so nennen, können wir auf diese klicken und die Box wird verschwinden,
dann klicken Sie erneut und die Box wird erneut angezeigt.
Das ist ziemlich einfach. Klicken Sie doppelt auf dasselbe tut,
außer es erfordert ein Doppelklick.
Also, wenn Sie einmal darauf klicken und klicken Sie wieder nichts passieren wird,
aber wenn man schnell doppelt klicken, werden sie verschwinden.
Wenn Sie wieder doppelt klicken, wird es wieder kommen.
Also das ist ziemlich einfach.
Tastatureingabe ist irgendwie komisch, ich glaube nicht, dass es tatsächlich funktioniert in diesem Beispiel
weil die Taste gedrückt, Taste und Taste drücken und andere wichtige Maßnahmen
aktivieren, egal was Sie es Element binden.
Zum Beispiel, auch wenn ich gebunden Taste gedrückt, um Körper oder etwas komplett anderes,
dann wäre es noch aktivieren, egal - es ist nicht spezifisch.
Ich habe nicht auf diese werden Sie und eine Taste drücken, um alles verschwinden.
Es wäre unabhängig davon, was Element Ich bin zurzeit in. aktiviert werden
Also diese eigentlich gar nicht in diesem Beispiel arbeiten
weil es erkennt mich nicht als Eingabe Eingabe in die Tastatur eingegeben div.
>> Aber wenn man sich die Aktionen mit der Maus,
Die erste ist, schweben, und es kann einige dies mit CSS zu tun.
Wenn Sie CSS verwenden, können Sie es so, dass zu erstellen, wenn Sie über etwas schweben,
dann seinen Stil ändert.
Aber der Einsatz von jQuery können Sie die Stile der anderen Dinge auch ändern.
So, zum Beispiel, werden wir zum Handeln aufrufen, wenn wir über diese div schweben.
Das heißt, wenn wir über sie schweben, dann ist die Box verschwindet.
Wenn wir von ihm weg bewegen, wird die Box wieder.
Wenn wir diese und rufen Sie den Mauszeiger darüber, wird die Box verschwinden,
und sobald wir weg zu bewegen, kommt es zurück.
Wenn wir diese Funktion aufrufen hover auf der Maus-ID,
das entspricht dieser Box, dann, wenn wir mit der Maus über das Feld,
dann wird die Box tatsächlich verschwinden - es ist flippig gerade jetzt, aber -
wenn wir von ihr weg bewegen, wird es wieder. Gerade jetzt ist es rückwärts aus irgendeinem Grund.
Die Maus eingeben und Maus bewegen Funktionen sind ähnlich, aber etwas anders.
Maus geben Sie nur aktiviert, wenn die Maus in das Feld, wie erwartet.
Also, wenn Sie sich bewegen in sie, wird es verschwinden.
Aber es wird nicht wieder angezeigt, wenn Sie weg, du wirst haben sich zu bewegen wieder auf, damit sie ihn wieder.
Es gibt auch die Mausbewegung Funktion, die aktiviert
wenn die Maus ist noch in der Box.
Also, es wird einfach weiter, und Ausblenden.
Und es ist tatsächlich Protokollierung - es scheint, wie es nur geht und Ausblenden,
aber es ist tatsächlich Protokollierung viel mehr Aktionen als diese,
so, wenn Sie weg bewegen, es wird einfach weiter, weil es wie ein tausend von ihnen angemeldet.
Vielleicht nicht tausend. Vielleicht fünf.
Es protokolliert mehr.
Der Punkt ist, alle Aktionen mit der Maus, es gibt eine Menge von ihnen.
Sie können lesen, auf die anderen, aber sie sind alle etwas anders,
und Sie können wählen, je nachdem, welche Sie brauchen
aus welchen speziellen Zweck Sie zu tun versuchen.
>> Das nächste, was ich zu erzählen habe, ist AJAX.
AJAX, ich weiß, wir haben nicht decken JavaScript in so viel Tiefe in diesem Jahr,
so ich werde einfach über AJAX im allgemeinen für eine Minute sprechen.
AJAX steht für Asynchronous JavaScript and XML.
Es ist im Grunde, zum Beispiel, wenn Sie auf Facebook sind und es drückt Sie eine Benachrichtigung,
das ist, weil AJAX auf Ihrem Web-Browser ausgeführt wird.
Alle paar Sekunden wird Ihr Web-Browser ist eigentlich
gehen zu den Servern von Facebook und bat sie, hast du nichts Neues für mich,
und dann kommt es zu dir zurück.
Dies ermöglicht Ihnen, Anfragen an einen Server zu senden
ohne tatsächlich um die Seite zu laden.
Also normalerweise, wenn Sie gerade mit PHP und eine Datenbank,
Sie haben, um die Seite zu aktualisieren, bevor Sie neue Informationen vom Server erhalten können.
Aber der Einsatz von AJAX, können Sie für diese neuen Informationen ständig zu ziehen,
oder für sie zu ziehen, wenn Sie eine Taste oder so etwas klicken.
So ermöglicht es uns, Anfragen ohne Neuladen der Seite zu schicken,
und wir können entweder GET oder POST-Requests.
>> GET-Anforderungen sind, zum Beispiel, wenn Sie auf Google.com
tun und q = test. Das ist ihnen eine Abfrage zu testen.
Und das ist eine GET-Anfrage, weil es in diesen Parametern ist vorbei in die URL selbst.
Eine POST-Anforderung ist, als ob man sie ihnen sind per Post.
Es ist wie man es in einem Brief und versenden Sie sie zu ihnen:
aber sie wissen nicht wirklich sehen Sie den Inhalt. Sie sind nicht in der URL sichtbar.
Sie können nicht direkt geben Sie es in, man muss es fast heimlich zu senden.
Es ist in einem Post.
Aber der Einsatz von jQuery, können Sie GET und POST-Requests
viel leichter, als Sie normalerweise verwenden könnte einfach nur JavaScript.
Sie können abfragen APIs mit GET-Anforderungen, und Sie können auch für die Login-Daten zu überprüfen.
Auf der nächsten Seite, habe ich diese, die fragt: "Was ist für das Mittagessen?"
mit der Harvard Lebensmittel API, so dass wir anhalten.
Dies ist nur ein Beispiel, wie Sie mit jQuery, um eine GET-Anfrage an eine API zu tun
und erhalten Informationen von ihr zurück.
So wollen wir das Menü für heute sehen,
und wir wollen sehen, was es zum Mittagessen gibt.
Hier ist die URL einer GET-Anforderung in jQuery erstellen.
Sie verwenden die $. get-Funktion.
Das erste Argument ist der URL, so genau, was Sie Abfragen.
Dann wird das nächste Argument eine Funktion, wenn die GET-Anforderung abgeschlossen ist ausführt.
So abzuschicken einige Anforderung an den Server, warten, bis es wieder zu kommen.
Wenn es nicht wieder kommen, wirst du eine Aktion mit den Daten, zurück ist vom Server zu nehmen.
Lassen Sie uns fortfahren und codieren diese als gut.
Ich wusste nicht codieren diese entweder auf Zweck.
Hier ist die TODO. Zunächst einmal verwenden wir die Veranstaltung verbindlich
so dass, wenn diese Taste gedrückt wird, senden wir weg von einer GET-Anfrage.
Und wenn die Anfrage GET kehrt mit einigen Daten,
werden wir es in dieser Mahlzeit info ID div schreiben.
Zunächst wählen wir die Lebensmittel-Taste ID.
Wenn darauf geklickt hat, wollen wir es etwas zu tun.
Lassen Sie uns nur machen es eine anonyme fuction, wie zuvor.
Kann diese geschweiften Klammern wickeln,
und wenn diese Taste gedrückt wird, wollen wir eine GET Anfrage senden
zu überprüfen, was es zum Mittagessen gibt.
Um dies zu tun, können wir nur in $ geben. Bekommen.
Dies ist ein jQuery-Funktion, mit der Dollar-Zeichen.
Es dauert ein paar Argumente. Die erste ist die URL,
die zweite ist die Callback-Funktion, die Funktion, die nennt sich
wenn dieser Antrag tatsächlich zurückkehrt.
Lassen Sie uns gerade beim Aufbau der ersten URL.
Wir können es von der API bekommen, dass David sich schrieb.
Gehen Sie hier, können wir sehen, dass es food.cs50.net/api/1.3/menus ist,
und dann müssen Sie nur in den Namen der Parameter, die Sie gerne weitergeben.
So Parameter 1 Wert 1 an.
Es sieht aus wie Standard-Datum, Start-Datum, standardmäßig heute
Wenn Sie nichts eingeben, und das Enddatum auch Standardwerte
bis heute, wenn Sie nichts eintragen.
Das ist, was wir wollen. Wir wollen nur die Informationen bekommen, für heute.
>> Wir wollen das Format in JSON sein.
Das ist nur willkürlich, können Sie jede Form, die Sie wollen.
Sie können CSV, JSON, aber ist JavaScript Object Notation.
Es ist sehr einfach für Sie JavaScript, um zu verstehen, was es bedeutet,
und wir können es ausdrucken leichter auf diese Weise.
Also lasst es bitte in JSON, und lasst uns Anfrage Mittagessen.
So Mahlzeit = Mittagessen. Einfach zu schreiben, dass die URL, gehen wir wieder hier.
Es gibt Menüs. Der erste Parameter ist output = JSON
denn das ist, was wir wollen, und trennen Sie die Parameter mit einem "und".
Der zweite Parameter ist - ich kann mich nicht erinnern.
Mahlzeit. Und wir wollen Mahlzeit = Mittagessen.
Sie können diese URL, indem Sie es in Ihren Browser und gehen, um es zu testen.
Es wird Ihnen eine Ausgabe. Es ist nur ein paar Sachen, die für das Mittagessen ist.
Es ist in diesem hässlichen Format. Wir wollen es auf unsere Seite ausdrucken in einem besseren Format.
Also die URL richtig ist, jetzt müssen wir nur noch eine Funktion schreiben
zu rufen zurück, wenn der Antrag erfolgreich ist.
Diese Funktion wird tatsächlich ein Argument. Es werden Daten.
Die Daten sind, was kommt zurück von der GET-Anfrage nach der GET-Anforderung ist getan.
Wir können die geschweiften Klammern, hier schreiben wir die anonyme Funktion
das führt, mit, dass die Daten, wenn wir die Informationen wieder zu bekommen.
Also Daten, wenn wir in dieser URL eingegeben haben,
das ist, was die Daten geht aussehen. Es geht um diese riesige Zeichenfolge sein.
Aber die gute Sache ist, kann es mit JavaScript die JSON.parse Funktion zu analysieren.
So erstellen wir eine neue Variable namens parse Daten.
Und parse Daten ist ein Array von Objekten.
Jedes Objekt enthält Informationen wie - na ja, lassen Sie uns einen Blick.
Es verfügt über ein Datum, eine Mahlzeit, Kategorie, Rezept, all das andere Zeug.
Also lasst uns einfach drucken Sie den Namen für jeden einzelnen.
Lassen Sie durchlaufen die ganze Reihe von Sachen, die wir bekommen von ihr zurück,
und einfach ausdrucken jeden - drucken Sie die Namen jedes einzelnen.
Dies ist eine for-Schleife.
>> JavaScript muss dies hilfreich Syntax, wo Sie eine Variable und eine Schleife über ein Array erstellen,
und var i ist nur der Iterator, so anstatt var i = 0 do,
Ich war weniger als die Länge, i + +, können Sie einfach tun var i in analysierten Daten.
In diesem Beispiel wird geparsten Daten (i) an das aktuelle Element entsprechen
der Anordnung, die tatsächliche Objekt.
Und wir wollen den Namen aus ihm heraus.
Also lasst uns einfach tun Namen.
Und die letzte Sache ist, werden wir einige jQuery wieder haben.
Eigentlich fügen Sie sie der div, diese Mahlzeit info div, die momentan leer.
Also lassen Sie uns wählen, dass.
Wir jQuery und wählen Mahlzeit info div ID, oder eine Mahlzeit info ID verwenden, sorry.
Wir wollen dies anzuhängen.
Wenn wir abgeschnitten haben, zum Beispiel, wäre es einfach überschreiben jede einzelne Zeit.
So können wir nur diese anhängen.
Das aktuelle Element in dem Array, dann bekommen wir den Namen aus ihm heraus,
und wir werden es bis zum Ende der Mahlzeit info ID div anzuhängen.
Und dann, nur um es so aussehen sauberer,
wir auch anhängen einen Zeilenumbruch so ist es nicht alle auf einer Linie.
Also, wenn alles gut geht, sollte das gut sein -
vor allem, wenn diese Taste angeklickt wird,
es wird abzuschicken eine GET-Anfrage zu dieser URL.
Wenn die Daten wieder kommt es aus, wird es analysieren sie,
schalten Sie ihn in JSON, Schleife über das gesamte Array bedeuten, daß Daten,
und dann hängen Sie den Namen und einen Zeilenumbruch
auf jeder Zeile in dieser Mahlzeit info ID, die vorher leer war.
Also zurück zu dieser Seite, wir aktualisieren,
Klicken Sie, um herauszufinden, - es funktioniert nicht. Das ist bedauerlich.
Und das ist, wo Debugging kommt in.
Index.html, Zeile 1.
Das ist interessant.
Alles klar, nun, anstatt verbringen viel Zeit, dies zu tun, ich bin gerade dabei,
ziehen Sie die Datei, die ich getan habe, das ist der fertige Version.
Ich bin mir nicht sicher, was der Unterschied ist, aber wir können nur öffnen Sie diese nach oben statt.
Und wir gehen auf die AJAX, und dies sollte korrekt funktionieren.
Das ist, was war heute zum Mittagessen,
in keiner bestimmten Reihenfolge, mit Zitaten um ihn herum, so ist es nicht das schönste.
Aber, natürlich, wenn Sie taten dies für eine endgültige Projekt,
Sie würde es besser aussehen.
Aber das ist nur ein einfaches Beispiel, wie Sie die GET-Anfrage.
Und wenn wir auf den eigentlichen Code aussehen, ich vermute, ich bin ziemlich sicher, dass
es ist immer noch so ziemlich das gleiche.
Oh, ich will es in einen String umzuwandeln vergessen, das ist es.
Nein, es ist immer noch nicht funktioniert. Egal, hier ist der eigentliche Code abgeschlossen
für das, was diese aussehen soll,
und es macht das Gleiche wie das, was ich gerade implementiert.
Wenn Sie auf den Button klicken, verwendet es GET JSON, um automatisch die Daten analysieren.
Es nimmt die Daten von ihr zurück und durchläuft das gesamte Array
und druckt die - was für das Mittagessen ist heute der Name es,
und fügt einen Zeilenumbruch nach jeder Zeile.
Das ist, wie Sie die GET-Funktion zu verwenden.
>> Sie können auch die Post, die ich hatte keine Zeit
zu schreiben, ein Beispiel dafür, aber wir können an der Dokumentation.
Wenn man sich jquery.post,
Sie können sehen, dass es fast die gleiche Sache.
Sie haben eine URL, aber anstatt die Übergabe von Parametern mit -
Sie können einfach in der Zeichenfolge für die URL selbst,
Sie müssen in dieser Daten Variable übergeben
Das ist im Grunde ein Array, ein Wörterbuch, dass die Karten-Parameter auf Werte.
Sie passieren, dass in und sendet sie, dass bei der Verwendung eines POST.
Und wenn Sie das haben, dann können Sie eine Funktion haben Erfolg
dass ausgeführt wird, wenn die Daten kommt zurück.
Ansonsten ist es genau das gleiche. Also mit POST,
möchten Sie vielleicht POST verwenden, zum Beispiel, wenn Sie eine Eingabemaske haben
Sie lassen die Menschen Eingang Passwörter in sie und senden die Passwörter aus
Ihre Back-End-Skript in der Datenbank, ob die Benutzer gültig ist oder nicht, ist zu überprüfen.
Sie können tun, dass alle mit jQuery anstatt die Seite überhaupt zu aktualisieren.
Das ist, wie ich in dem Blog, dass ich Sie zeigten zuvor implementiert.
Wenn wir bis zum Ende Portal und ausloggen, abmelden,
Logout funktioniert nicht.
Nun, lassen Sie mich nur öffnen Sie es in einem neuen Fenster.
Hier gibt es ein Passwort, und ich wollte in etwas zufällig eingeben.
Es funktioniert nicht, aber man kann sehen, dass wir nicht
tatsächlich um die Seite überhaupt zu aktualisieren.
Der Code, wenn Sie wollen, um es zu betrachten,
ist alles in hier erhältlich.
Also der Code, den ich schrieb letztes Jahr irgendwann.
Wie Sie hier sehen können, wir schicken eine POST-Anforderung.
Ich habe eine Datei namens login.php im Backend,
die prüft, ob das Passwort gültig ist.
Die Parameter übergeben wir sind passwortgeschützt, zugeordnet
der Eingang, der in diesem Eingabefeld ist aktuell.
Und wenn die Daten zurück kommt, prüfen wir.
Wenn die Daten falsch ist, dann können wir sagen, falsches Passwort, schieben Sie ihn nach unten,
und es muss nur danach verschwinden.
Ansonsten laden wir das Admin-Seite.
Und das alles geschah mit JSON.
In diesem viele Zeilen Code, können Sie einfach die Daten an das hintere Ende,
überprüfen, ob es richtig ist, überprüfen Sie, ob Sie in korrekt angemeldet,
und tatsächlich, darauf zu reagieren, das Umleiten der Person zur richtigen Seite
oder lassen sie nicht anmelden und ihnen zu sagen, dass sie ein falsches Passwort hatte.
Also das ist ein Beispiel, wie man jQuery POST verwenden
um eine POST-Anforderung an Ihre Backend zu senden,
kontrollieren, ob jemand in ist korrekt angemeldet.
>> Alles klar, also das ist alles Beispiele, die ich hatte, und all die Sachen, die ich wollte, zu decken.
Das sind die wichtigsten Dinge, die jQuery können Sie tun:
Elemente auswählen, ändern Sie sie mit DOM-Manipulation,
Sie können Effekte hinzufügen, aktivieren Sie die Dinge auf bestimmte Ereignisse,
und auch tun AJAX Anfragen sehr nahtlos und einfach.
Ich danke Ihnen für Ihr Kommen oder beobachten,
und wenn Sie irgendwelche Fragen haben, lass es mich wissen. Ja?
[Student] Zurück, wenn Sie zeigte, musste man JSON nach dem POST-Anforderung in Anführungszeichen,
und ich habe mich nur gefragt, was das war.
>> Ja, ich sehe. Die Frage war, dass in dem Beispiel, das ich gerade gezeigt,
war das Wort in Anführungszeichen JSON die -
Ich werde einfach nach oben ziehen wieder - rund um die POST-Funktion.
Ich bin gerade dabei, es zu zeigen.
Also hier ist das POST-Anfrage, und es ist das JSON in Anführungszeichen.
Das ist nur definiert, was wir erwarten die Ausgabe zu sein.
Also, wenn wir gehen in JSON als erwarteten Datentyp,
es ist nicht erforderlich, aber wenn wir sie weitergeben in,
dann werden die Daten automatisch als JSON analysiert werden.
So haben wir nicht, um die JSON Parsing Funktion es nennen,
es wird einfach automatisch passieren.
Und wenn Sie einen Blick auf die Dokumentation für POST,
Es ist Datentypvariable, die Art der Daten vom Server erwartet.
Der Standardwert ist eine intelligente Vermutung, die falsch sein können,
so können Sie leer lassen, aber es ist genau die Art von Daten
bei der Codierung, die Sie verwenden, ob es JSON oder XML ist oder etwas anderes.
>> Noch Fragen?
In Ordnung. Wenn Sie irgendwelche Fragen haben, fühlen Sie sich frei, mich zu mailen
bei vshekhawat@college.harvard.edu,
und die Folien und Code sollten online verfügbar sein ziemlich bald.
Viel Glück mit Ihrem letzten Projekte, hoffe, Sie nutzen jQuery.
[CS50.TV]