>> ROGER ZURAWICKI: Hallo an alle.
Kann ich Ihre Aufmerksamkeit?
Danke, Jungs.
Heute möchte ich über Meteor sprechen.
Es ist ein JavaScript-Framework.
Wir werden es schon gehen, wie Sie machen wirklich coole Web-Anwendungen.
>> Bevor wir in JavaScript zu bekommen, ich habe gerade möchte euch sagen, dass dieser Wille
- Sie werden einen später Stück dieses Semester.
Es sollte etwa JavaScript sein.
Ich denke, zuerst [unverständlich] werde decken das Web HTML PHP Zeug, bevor wir
bewegen JavaScript.
Und in CS50, JavaScript wird als wie eine Client-Code.
So wird es nur in laufen der Web-Browser.
>> Aber dank der jüngsten Fortschritte in der Technologie haben wir jetzt geschafft, laufen
JavaScript-als Server als auch.
Also das ist eine wirklich coole erstellt Rahmen, denn jetzt können Sie schreiben
legitim derselbe Code für der Client und der Server.
Und wenn Sie in Funktionen definieren Sie Ihre Server, Ihr Kunde kann die nennen
gleichen Funktionen.
Und es macht es viel einfacher.
Während vor, wenn Sie mit PHP arbeiten an der Server, JavaScript auf der Vorderseite
Ende, müssen Sie eine PHP-Funktion schreiben und dann eine JavaScript-Version des
gleiche Funktion zu tun, die gleiche Art von Arbeit.
>> Also, bevor wir loslegen, möchte ich Sie eine Demo zu zeigen, was
Meteor für Sie tun können.
Ich werde Ihnen die Demo, das ist, was ist Sie werden in der Lage, durch das zu schaffen
Ende dieses Seminars.
Wir gehen hier genau richtig.
Dies ist eine Rangliste-App.
Es ist tatsächlich aus der beispielsweise auf Basis Meteor, dass euch gibt.
>> Meteor ist sehr schön, denn wenn man installieren Sie es als Paket, können Sie
im Grunde spielen, um mit diese vier Demos.
Und der Rangliste ist die erste dieser Demos.
Nach dem Seminar, ermutige ich Sie alle nur erkunden Sie die anderen Demos
weil ich denke, sie sind wirklich cool, und sie zeigen die Macht der Meteor.
>> Also, was das ist, das ist auf Rang gehostet.
Dies ist nur ehrlich gesagt eine Liste von Namen.
Und Sie können die Menschen wählen.
Sie drehen sich gelb.
Und dann kann Ihnen sie fünf Punkte.
Und Sie werden feststellen, dass die Liste sortierten weil, wie ich mich selbst mehr zu geben
und mehr Punkte, ich bin jetzt an der Spitze.
Also das ist, wo wir starten.
>> Und was Sie in der Lage, sich zu nehmen aus diesem Seminar ist ein paar mehr
Funktionen, die ich habe hinzugefügt der Rangliste.
Wir werden dabei, wie man, wie auch fügen Sie fünf Punkte, um einen Spieler, wir können
Spieler löschen, können wir neue Spieler hinzufügen und wir können wählen, wie wir wollen,
um sie zu sortieren.
Und das sind alles sehr einfach API-Aufrufe dass Meteor bietet für Sie.
Sie haben auch eine Funktion, hier zufällig auf die Noten.
>> Also, was ist wirklich cool zu dieser ist euch kann tatsächlich
alle gehen auf die Website.
Ich werde es in größeren Text hier setzen.
Eine Radikal-Blei-erboard.meteor.com.
Und wenn du Jungs gehen auf die Website, die Sie sollte in der Lage, die Website bearbeiten zu können, und
alle Bearbeitungsschritte werden sichtbar auf alle anderen.
So können Sie - sind Sie alle Jungs in der Lage, Verbindung zu der Website?
So spielen Sie mit ihm.
Gehen und einige Namen zu löschen.
Sehen Sie, was passiert.
>> So sehen Sie alle spielen können.
Dies ist nur die Standardsicherheits Modus für Meteor.
Sie sehen, dass jeder kann Ändern des jeweils anderen Daten.
Mach dir keine Sorgen.
Meteor hat zwar Sicherheit.
Dies ist eine sehr einfach zu realisieren Funktion, wo man Benutzer einrichten
und Logins.
Aber jetzt jeder, der besucht die Website können sich so viele geben
zeigt, wie sie wollen.
Also habe ich immer so, weil diese ist eine tolle Möglichkeit, um loszulegen.
Und dann haben wir nur reden werde über die Details, wie
Meteor macht dies möglich.
>> So werde ich zu decken, was Meteor ist, und dann werden wir brauchen nur zur Deckung der
zwei Voraussetzungen, die CS50 wurde nicht ausreichend abgedeckt.
Aber am Ende der Laufzeit, sollten Sie bequem mit HTML und
JavaScript, um wirklich die Hände schmutzige Arbeit mit Meteor.
Und ich denke, es ist einfach eine großartige Möglichkeit für noch weniger komfortabel Studenten zu tun
Abschlussarbeiten, weil sie kann wirklich Aufenthalt in einer Sprache, und sie bekommen
sehen die Änderungen ihrer Arbeit sofort.
>> Also diese Folie zeigt nur einige der wichtigen Technologien, die Meteor JS
gibt Ihnen.
Meteor ist keine neue Technik für sich allein.
Es ist wirklich ein Konglomerat von all diese verschiedenen Dinge
haben wir über das Internet.
Ebenso wie HTML, CSS, JavaScript, wir haben einige Technologien wie Node.js,
was ist das, was Sie ausführen JavaScript am hinteren Ende auf
Server sowie einige JavaScript Bibliotheken, wie jQuery, Strich.
>> All dies wird vertraut zu sein Sie am Ende des Semesters.
Und wir erhalten auch eine Datenbank namens verwenden mongoDB, die eine wirklich
jetzt für beliebte Datenbank diese neuen Startups.
Sie können es als wie MySQL denken, aber es funktioniert sehr gut mit JavaScript.
Und es gibt einige andere Technologien hier und viele mehr ich nicht aufgeführt haben
dass alle wirklich Schnittstelle schön mit Meteor.
>> Ich muss diese Folie zu setzen, weil manchmal bekomme ich Verwirrung über diese.
Meteor ist nur JavaScript.
Es ist nicht PHP.
Es ist nicht Ruby on Rails.
Also, wenn Sie Code schreiben, wenn du willst einen Meteor-Projekt, die Sie wirklich
nicht verwenden können, Ruby-Code.
Sie wirklich nicht mit PHP.
>> Während wir werden sehen, dass die Unterschiede in der Code und Syntax vielleicht nicht, dass sein
anders, ich möchte Sie darauf hinweisen, dass Meteor, alles, was Sie Code
nur in JavaScript.
Und alles, was Sie zu zeigen, der Benutzer HTML CSS sein.
Aber du bist nicht wirklich mit einer der die anderen Sprachen, dass andere
Seminare können zu decken.
Was Meteor ist auch ein Web-Server.
Also selbst wenn Sie keine haben JavaScript und Sie wollen einfach nur, um zu dienen
CSS-und HTML-Dateien, Meteor kann das für Sie tun.
>> Und hier ist der Link wieder auf die Demo, die ich habe euch
begann das Spiel mit.
Aber lassen Sie uns nun in HTML.
Wie viele Menschen hier haben, Keine Ahnung, was HTML ist?
OK toll.
Und das ist völlig in Ordnung.
Sie haben wirklich nicht zu viel wissen es, weil wir über die gehen
Nutzung sehr einfach.
>> Dies ist, was die einfache HTML-Seite aussieht.
Dies kann wie Ihre hallo, Welt für sein HTML, während wir in C begann mit
hallo, Welt.
Ich glaube nicht, dass du auf den Stress Details von dem, was HTML, was Kopf, was
Körper, welche Titel dort macht.
Ich will einfach nur, um die Struktur zu betonen, wie Sie Tags.
Und das ist die spitzen Klammern.
Und das ist, wo man Ihre Deskriptoren.
>> So haben Sie vielleicht das HTML-Dokument.
Und dann wirst du das HTML-Dokument zu schließen mit Backslash elbe.
Und Sie haben verschiedene Arten von Tags.
Und feststellen, dass sie alle aufeinander abgestimmt.
Du wirst wie ein Body-Tag haben und dann ein enger Body-Tag.
Und innerhalb des Body-Tag, das wird sein die Inhalte Ihrer Web-Seite.
So würde diese Web-Seite zeigen einfach in einem weißen Hintergrund und schwarzem Text
hallo, Welt.
Ist das sinnvoll?
OK.
>> Jetzt werde ich zu schnell decken JavaScript.
In den Worten eines früheren TF, "JavaScript ist die beste Programmierung
Sprache noch in der Existenz.
Andere Menschen werden, um zu versuchen sagen Sie nichts.
Sie sind falsch. "JavaScript ist ziemlich nett, und ich werde Ihnen zeigen, warum.
>> Also das ist das klassische Beispiel beginnen wir mit in C. Wir haben hallo, Welt.
Und Sie merken, dass selbst wenn Sie schrumpfen es können, müssen Sie mindestens zwei haben
Zeilen Code hier.
Ich habe mehrere Zeilen Code.
Dies kann sehr einfach durchgeführt werden.
Eine Zeile in JavaScript mit console.log, und dann die Zeichenfolge,
hallo, Welt.
>> Nun, obwohl wir zu einer neuen beweglichen Sprache JavaScript, fast alle der
Fähigkeiten, die Sie durch die Codierung gelernt haben in C sind direkt tragbar.
So Saiten, die Idee der Zeichenfolgen in Anführungszeichen, das ist das gleiche.
Das Semikolon, das ist das gleiche.
>> Ein nettes Feature zu JavaScript tatsächlich ist, dass Sie
müssen nicht das Semikolon.
Es kann vermuten, dass Sie sollten setzen Sie ein Semikolon gibt.
Aber das sagte, sollten Sie immer versuchen, um Ihre Semikolons dort setzen.
Es gilt als guter Stil.
Und auch, es gibt keine Hauptfunktion.
Sie müssen nur an der Spitze der Datei starten und lesen Sie die Dinge Zeile für Zeile.
>> Dann ist das, was es braucht, um dass hallo, Welt-Programm.
Und dann feststellen, dass Sie zu haben, hallo machen und dann laufen hallo.
Mit JavaScript ist es als eine interpretierte Sprache.
Was Sie wissen müssen, ist, dass es gibt keine Herstellung.
>> Es gibt keine Kompilierung.
Sie führen nur Knoten.
Und denken Sie daran Knoten ist das Programm, Ihre JavaScript auf einer Konsole laufen,
auf einem schwarzen Kasten, nicht die Website.
Sie haben also nur geben es die Datei, und es ist Drucklegung hallo, Welt.
>> Ich werde tatsächlich ein wenig Demo dass für euch hier.
Also gehen wir zu meinem Node.js-Terminal.
OK.
Lassen Sie uns hier bewegen.
So werde ich zu Knoten zu starten.
Und ich werde euch in nur zeigen eine Sekunde, wie das zu bekommen
installiert, wenn Sie nicht zu tun.
Lassen Sie mich noch ein bisschen größer.
OK.
Ich hoffe, euch zu sehen.
>> So kann ich Code schreiben, wie ich es tat bevor in console.log.
Hallo, Roger.
Und merke ich nicht zu tun haben, die Semikolon, aber dann bekomme ich diese seltsame
undefined Sache.
Naja, eigentlich egal über die undefinierte Sache.
Dinge, die ich möchte, dass Sie bemerken, ist, dass Sie nicht die Hauptfunktion hier nicht brauchen
Ausführen von Code zu starten.
Und es gibt keine Backslash Ende.
Es gibt einige kleine Features, die JavaScript für Sie tun können.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Oh ja.
Ich bin mir leid.
Und das bedeutet nur, Pfeil Knoten ist bereit für einen weiteren Befehl.
So können Sie es tun, einfach Mathematik, wie 1 plus 1.
Und genau wie in C, diese Mathematik Symbole sind genau das gleiche.
Ich kann console.log einer Zahl zu tun.
Und dann druckt es zwei.
JavaScript ist schön, in diesem Sinne, weil obwohl zwei ist ein int,
wie in C, wenn Sie nicht mit printf zwei, können Sie eine Fehlermeldung erhalten würde.
>> Aber JavaScript kennt, oh, du bist Druck etwas.
Ich werde einen String müssen.
Also lassen Sie mich zu bekehren, dass zwei in einen String für Sie.
Und Sie können auch einige seltsame Dinge zu tun wie hallo und dann plus zwei.
Dies ist nur ein weiteres Beispiel, wie zwei kann auch dort umgesetzt werden.
>> Also mit diesem aus dem Weg, lassen Sie uns decken nur ein bisschen JavaScript.
So in C, haben wir Typen.
Immer, wenn wir eine neue Variable erstellt, die wir muss sagen, dass es ist oder char *
String im Fall CS50.
Oder wenn wir eine Dezimalzahl, wir mussten Schwimmer sagen.
Wenn wir brauchten einen Boolean, wir mussten b sagen.
Und dann, wenn wir etwas, das hatte b wurde, musste es ein bool bleiben.
Wir konnten nicht magisch, es zu ändern ein int, wenn wir nicht in die geschrieben
Klammern, int b.
>> In JavaScript gibt es keine Typen.
Sie, daran zu denken wie var.
Und var ist, wie Sie eine neue Art zu erstellen.
Also es haben kann var s ein String, var n eine float,
var und b wahr.
Und eine Sache, die Sie nicht tun, ist in C Ich kann jetzt sagen, nach dieser Zeile, b
gleich einer ganzen Zahl.
Und das funktioniert prima.
Während in C, würde es so sagen: Ihre ganze Zahl ist kein bool.
Ich kann nichts für Sie tun.
Oder [unverständlich] einen Fehler werfen würde.
>> Und ich kann schnell wieder in den Knoten gehen und zeigen, dass einige der Funktionalität.
So kann ich ein var ein.
Nennen Sie es "von Apple." Also wenn ich jetzt drucken a, Ich meine Schnur, 'Apfel. " Aber ich kann
jetzt auch sagen, eine gleich 3 ist.
Und feststellen, es gibt keine Fehler.
Und nun gleich 3 ist.
Haben Sie Fragen so weit?
Ja.
>> ZIELGRUPPE: Warten Sie, so console.log ist im Grunde printf, oder?
>> ROGER ZURAWICKI: console.log ist Ihr printf.
>> ZIELGRUPPE: Richtig.
Also, wie kommen, wenn Sie nur geben in acht oder [unverständlich], was bedeutet, dass
[Unverständlich]?
>> ROGER ZURAWICKI: Richtig.
So ist es -
der Stoff in grün gedruckt wird an der Konsole.
Und was wir sehen, ist neben wenn wir auf die Bahn zu bewegen
Seite, werden wir nicht tun -
JavaScript wird mit einer HTML- Vorlage, die ich in der Deckung
Meteor Teil des Seminars.
Und das ist, wo man sagen kann, mir zu geben der Wert von a, und es wird eine in gesetzt
Ihre Website.
Weil jeder Web-Browser tatsächlich hat eine kleine Konsole.
Und wenn Sie sehr sorgfältig geprüft, können Sie würden einige Informationen zu bekommen, wie Ihre
printf ist es mit Erscheinen jeder Web-Seite zu laden.
>> ZIELGRUPPE: Wie haben Sie an die Shell-Bildschirm?
>> ROGER ZURAWICKI: Also es gibt einen Befehl genannt Knoten, und es kommt mit Meteor.
Also werde ich nur von dort zu beenden.
Node ist das Programm, das läuft JavaScript.
Wenn Sie gehen, um meteor.com Sie können Meteor installieren und
Meteor kommt mit Knoten.
Da Meteor ist nur eine Sammlung all dieser Softwarepakete.
Als wir zu unserem Beispiel, werde ich gehen alle durch die Installation
Meteor, und dann können Sie spielen Knoten mit sich.
OK, toll.
>> Also ein weiteres großartiges Feature über die Arbeit mit JavaScript Schleifen gleich sind.
So ziemlich genau das gleiche.
For-Schleifen, while-Schleifen, tun while-Schleifen, wenn anderes.
Es ist alles das gleiche mit den Hosenträger.
Es ist die gleiche Syntax.
Im Falle einer for-Schleife, die kleine Details, die Sie zu achten haben
um anstelle von int i gleich 0 ist, wir sagen var i gleich 0 ist.
Aber das ist, weil der Variablen Typen, die wir vorher gesprochen haben.
>> Beachten Sie, dass die printf wird ein Protokoll, eine console.log.
Und wir wissen nicht, um die prozentuale tun müssen p n Backslash und dann in i geben.
Sie können einfach sagen, ich.
Und es würde die Zahlen drucken von null bis vier.
Wenn ihr wollt, dieses zu versuchen, denn Sie einen guten Punkt gebracht.
Wenn Sie diesen Code auf Ihre laufen wollte eigenen Browser, würde ich empfehlen, dass
jedermann öffnet Google Chrome.
Google Chrome Web-Browser oder ein wirklich, aber Ich mag Google Chrome
weil es sehr standardisiert.
>> Sie können gehen, glaube ich, wenn Sie mit der rechten klicken Sie auf eine Website, nur in der
Leerzeichen, werden Sie sehen, eine Option Inspect Element genannt.
Es ist in der Regel der letzte.
Und wenn Sie darauf klicken, erhalten Sie sollte eine Sache auf den Grund werden hier angezeigt.
Lassen Sie mich hier zoomen.
Und wir haben ein paar Tabs hier.
Der, den du interessiert, ist Konsole.
>> Und das ist eine JavaScript-Konsole dass Sie jetzt mit zu arbeiten.
Große.
So kann ich geben die gleichen Sachen Ich war zuvor in Knoten eingeben.
Eins plus eins ist zwei.
Var a gleich "Apfel".
Und dann würde ich ein zu drucken, und a 'von Apple.
So in jedem Web-Browser, Firefox, Chrome, Safari, was auch immer Sie verwenden, wie
Solange Sie Zugang zu einem JavaScript haben Konsole, die gleiche Art von
Code, den ich in Knoten ausgeführt wurde Sie können in Ihrer eigenen Konsole ausführen.
>> ZIELGRUPPE: [unverständlich]?
>> ROGER ZURAWICKI: Wie bekommen, um die Konsole?
Sie müssen der rechten Maustaste auf eine freie Stelle auf der Seite, und dann zu gehen
Inspect Element.
Also eigentlich, würde Ich mag euch nur stellen Sie sicher, Sie können
Inspect Element in Chrome.
Und sehen Sie, wenn Sie in irgendeiner Art Code in der Konsole
dass es richtig läuft.
Fühlen Sie sich frei, Fragen zu stellen, wenn etwas ist nicht hier klar.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Jede Art, richtig.
Es gibt nur einen Typ für alle Variablen in JavaScript.
Und wenn Sie zu verzollen eine Variable, sagen Sie, Var.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Ja.
Es tut, aber in JavaScript, ist es sehr smart über das Zuweisen von Speicher.
Es gibt keine malloc.
Es gibt keinen freien.
So brauchen Sie keine Sorgen zu machen.
Das ist ein weiteres nettes Feature, dass JavaScript bietet Ihnen.
>> So würde Ich mag zu bewegen.
Wäre das in Ordnung sein?
OK.
Große.
>> ZIELGRUPPE: Ich bin nur mit Mühe Suche nach der [? Inspect Element. ?]
>> ROGER ZURAWICKI: Also Safari Looks ein bisschen anders, aber glauben Sie
haben Chrome oder Firefox?
Das sind die einfachere diejenigen, mit zu arbeiten.
Und für Ihre Projekte, empfehle ich Kleben mit einem Browser, weil
finden Sie eine Reihe von Fehlern fast bekommen weil alle Browser Leckereien
JavaScript-Datei ein wenig anders.
Also ich denke, dein Leben wird eine Menge sein einfacher, wenn Sie bleiben, weil Chrome
es verfügbar ist auf allen Maschinen.
Und es ist eine ziemlich beliebte Browser.
OK?
>> Also das nächste Thema, dass wir decken in JavaScript -
Ich bin traurig über die Formatierung hier.
Ich hatte, um die Folien zu entsprechen strecken das Breitbild-Projektor.
Aber ich würde jetzt gerne sprechen wie Sie Funktionen zu tun.
In C müssen wir erklären, jede Funktion.
Wie int hinzufügen, und es in einen int nimmt x, y und ein int, und dann werden wir sie hinzufügen
und gibt es zurück.
>> In JavaScript sind Funktionen tatsächlich ein weiterer Variablentyp.
Also haben wir nur sagen var hinzufügen und es entspricht einer Funktion.
Eine Funktion, die eine x-und eine y erfolgt.
Und was bedeutet das-Funktion?
Es gibt x und y in der exakt gleichen Syntax wie in C. Und Sie feststellen, dass in
JavaScript, werden Sie nicht gesagt werden, was die Funktion gibt, weil da
Variablen nicht Typen haben trotzdem, es es ist nicht wirklich produktiv, ich denke,
werden, um alle Ihre Angabe Typen in Ihrer Funktionen.
Und dann, wenn Sie eine Funktion aufrufen, ist es genau die gleiche Syntax wie C. Sie
nur passieren in der zwei Argumente.
Ich möchte in meinem Knoten versuchen.
Kann ich die Folie zu ändern?
>> ZIELGRUPPE: [unverständlich].
Werden wir eine Kopie der Folien zu bekommen?
>> ROGER ZURAWICKI: Ja.
Also lassen Sie uns zurück zu Knoten zu gehen.
OK.
Also werde ich sagen, gleich var Add-Funktion.
Unter einem x, y, die ein.
Und dann weiß er, dass die Aussage der nicht abgeschlossen.
So in Knoten oder in der Konsole, Sie dot dot dot bemerken.
So können Sie Ihren Code eingeben.
Und jetzt werde ich sagen return x sowie y.
Und dann schließen Sie die Klammer.
Und in dem Moment schließe ich die Schiene, es sieht, dass die Anweisung ist beendet.
>> Und jetzt kann ich sagen hinzuzufügen eins und zwei.
Und ich werde drei zu bekommen.
Beachten Sie, dass, wenn ich nur wollte hinzufügen, wird es sagt mir, es ist eine Funktion.
Und eine Sache, nur um Aufmerksamkeit zu widmen ist, wenn Sie die falsche Anzahl von geben
Argumente, es zu machen.
Es wird laufen, aber Sie vielleicht einige wirklich seltsame Ergebnisse.
Wie eine Art Müll-Wert, Sie daran denken können.
Also bitte gehen Sie vor und versuchen dies in Ihrem Browser.
>> OK, also im Interesse der Zeit, werde ich nun zu den nächsten Features in
JavaScript.
Also haben wir über Funktionen gesprochen.
Wir haben darüber gesprochen Schleifen, wenn Aussagen zu.
Die Syntax ist die gleiche als C und Variablen.
Und jetzt will ich über Arrays zu sprechen.
Es tut mir leid, dass die Folien habe ein bisschen abgeschnitten.
Aber tatsächlich in dem ersten Abschnitt, alles, was Sie brauchen, funktionieren wird.
>> So haben wir eine andere Art für Variablen genannt Arrays.
Und wir eckige Klammern um sie zu bezeichnen.
So in dem ersten Beispiel, var arr, leeres Array.
Dies ist die Liste leer, so ein Array enthält keine Elemente.
Und Sie können auch ein Array mit drei Saiten.
In C, jedes Element im Array musste vom selben Typ sein.
>> Sondern weil es nur JavaScript eine Art, können Arrays tatsächlich
haben verschiedene Arten von Werten.
Wie hier, haben wir ein Array mit ein Schwimmer, ein bool, und ein Int.
Die Art, wie Sie eine Länge eines Arrays zu erhalten, Sie eigentlich nicht haben, um Größe zu verwenden
oder nichts.
Sie müssen nur sagen, Array und dann dot Länge.
Und dieser Punktlänge, können Sie denken es eine Struktur Art mögen, wie jeder
Array hat ein Feld, eine zusätzliche Variable in der es heißt Länge, die
verfolgt, wie lange Ihr Array ist.
>> Also ich bin einfach nur schnell gehen, um in zu gehen Knoten-und Show euch die gleiche Sache.
So kann ich ein Array.
Es kann die leere Liste sein.
Und es wird mir zu drucken sichern eine leere Liste.
Große.
Ich kann jetzt sagen, dass das Array hat 1, und 2.3, und wahr.
So alle verschiedenen Arten.
Und Sie merken es funktioniert prima.
Das Array bekomme ich Rückenstützen alle Werte habe ich es.
>> Wenn ich wollte, das erste Element zu erhalten das Array, ist die Syntax tatsächlich
die gleichen wie in C. Sie Array kann null zu sagen.
Und Sie erhalten ein.
Ich kann sagen das gleiche Array zwei, und ich bekomme richtig.
Wenn ich etwas tun, außerhalb des Feldes, JavaScript ist eine sichere Sprache
weil ich nicht einen Segmentation Schuld.
Ich werde nicht definiert.
>> Und das nicht definiert ist, können Sie Art denken darüber wie null.
Aber es ist wirklich ärgerlich sein kann, wenn Sie Code, weil Sie, dass der Check werden
fast alles, was Sie tun, werden Sie arbeiten mit nicht definiert ist.
Und wir werden einige Beispiele zu sehen dies, wenn wir in Meteor.
>> Obwohl vier Array undefiniert ist, Ich kann es einen Wert zuweisen.
Also werde ich sagen, es ist gleich ein.
Und dann, wenn ich auf Array, ich haben den Mehrwert gibt.
Und feststellen, dass Array drei, die auch wurde nicht definiert ist, bleibt undefiniert.
So habe ich jetzt ein Array mit ein Loch in der Mitte.
Aber wenn ich gedruckt Array vier, Ich würde eine zu bekommen.
Wenn ich drei Array, bekomme ich nicht definiert.
>> Also die nette Eigenschaft, dass Javascript können Sie tun, ist, dass die Listen können
Größe ändern.
Arrays, Arrays als Listen, sie Größe zu ändern.
Und Sie können einen beliebigen Ort angeben in ihnen.
Und all die Lücken gefüllt werden mit diesen undefinierte Werte.
>> Also haben wir über Arrays gesprochen.
Nun, das letzte, was ich möchte in Deckung JavaScript und dies ist sehr wichtig,
zum Verständnis der Code, Ich werde Ihnen zeigen,
wird sich Objekte sein.
Und Objekte sind ein Begriff in der -
Grundsätzlich sind sie im vorliegenden viele Programmiersprachen.
Und jeder Programmiersprache gerne von ihnen denken, ein bisschen anders.
>> Aber ich denke, für Meteor, ein gutes Analog ist die C-Struktur.
In C, wenn wir wollen, um die Struktur zu finden Student, müssten wir geben alles
Dinge darin.
So hat es einen Namen haben.
Es muss ein Jahr.
Es muss ein Geschlecht haben.
Aber wir haben auch, um ihm die Arten von all diesen Dingen.
>> Und jetzt, da wir diese Form für die Struktur namens Student, wir können eine
neue Struktur, und dann können wir manuell sagen, was die einzelnen Felder sind.
Und das ist, wo wir Punkt Name, dot Jahr dot Geschlecht.
Und dann haben wir nur in der letzten Zeile der Code hier, ich bin nur der Ausdruck
Name des struct Student.
>> In der JavaScript-Welt, gibt es nicht so etwas wie Struktur Student.
Sie erzeugen keine voreingestellten Struktur.
Sie eigentlich nur in diesen Klammern, Sie sagen, was alles ist.
Und es ist diese seltsame Schreibweise mit der Doppelpunkt und dann das Komma, aber Sie werden
schnell genug, um daran zu gewöhnen.
>> Und es ist eigentlich eine wirklich einfache, flexibel von nur
Manipulieren von Objekten.
Sie bemerken, dass, wenn ich jetzt bekommen Namen von s, ich habe gerade zu tun s.name.
Haben Sie Fragen dazu?
Dies hat in der Regel eine sehr verwirrende gewesen Thema, wenn wir Menschen vorstellen
JavaScript.
Ich werde ein paar Beispiele in Knoten zu tun.
Ja?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Also wollen Sie habe ein Beispiel, mehrere
Variablen dieses Typs.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: OK.
Also ich denke, die Art und Weise, die Sie über zu gehen ist Sie Objekte in einem Array setzen,
und jetzt werden Sie eine haben Array von Objekten.
Heißt das, Ihre Frage zu beantworten?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Ja.
S ist ein Objekt.
So können wir in den Knoten gehen und einfach spielen, um ein kleines bisschen.
>> ZIELGRUPPE: [unverständlich]?
>> ROGER ZURAWICKI: Oh, OK.
Also, wenn Sie fragen, was Klassen sind, Klassen sind sehr unterschiedlich behandelt,
und sie haben eine wirklich seltsame Regelung haben Prototyping genannt, die Sie nicht tun
zum Thema wissen müssen.
Es gibt keine festgelegten Weg, es zu tun.
Also, wenn Sie mehrere, die Sie erzeugen wollen würde nur irgendwie haben eine Funktion
oder so etwas.
Sie erzeugen Ihre eigene Funktion.
Und Sie würden ein Objekt zurückgeben.
Das wäre die einfachste sein Weg, es zu tun.
Heißt das Sinn?
OK.
Große.
Also noch haben wir ein Verständnis von JavaScript-Objekte, sind sie -
oh, ja.
>> ZIELGRUPPE: [unverständlich]
Beispiel, was ist der Unterschied zwischen "Roger" mit Anführungszeichen im Vergleich
[Unverständlich] mit einfachen Anführungszeichen.
>> ROGER ZURAWICKI: OK.
Also das ist in C, haben wir die einzelnen Zitate, die Zeichen, und doppelklicken
Zitate, die Saiten.
JavaScript wirft tatsächlich diese weg da kann man Strings mit haben
einfache oder doppelte Anführungszeichen, und es gibt nicht so etwas wie einen einzelnen Char.
Aber wenn Sie nur kopiert den gleichen C-Code, JavaScript würde
behandeln sie einfach gut.
Welches ist, warum ich es so behandelt -
das ist, warum kann ich buchstäblich Port der Code in diesem Sinne.
>> Und ich will Ihnen ein Beispiel, um zu zeigen einer komplizierteren Objekt.
So können Sie feststellen, dass ein Objekt können Zeichenfolgen als Werte.
Es kann eine weitere Liste von Werten haben.
Es könnte eine Liste haben Objekte als Werte.
Es gibt wirklich keine Grenze für diese.
So, hier ist es nur eine gute Demonstration wie Sie eine Menge bekommen
verschiedene Typen los alles in einem Objekt.
Macht das Sinn?
>> Nun können Sie auch Objektarrays.
Und hier ist eine Art ähnlich, was Sie gefragt, ob Sie können Objekte haben
elben Typs.
Aber das Problem ist, gibt es keinen festen Format für Objekte in JavaScript.
So müssen Sie sie selbst festlegen.
Und Sie müssen sicherstellen, dass sie einheitlich.
Also hier, wenn ich ein Objekt zu erstellen, habe ich um sicherzustellen, dass jeder hat eine
nennen, und jeder hat ein Haus.
>> Und dann habe ich eine Reihe von Personen, und das kann meiner Hütte sein.
Und dann können Sie hier Art von siehe die for-Schleife geht.
Die for-Schleife, nur ein wirklich gemeinsamen Weg zu durchqueren über ein Array
in JavaScript.
Beachten Sie, dass sich dieses Muster sehr ähnlich ist zum C Äquivalent, in dem Sie
haben int i gleich Null ist. ich kleiner ist als die Länge.
Und dann habe ich plus plus.
>> Es ist fast der gleiche Code, bis auf ein paar Details.
So kann jeder verstehen was für ein Objekt?
Nur über sie denken, wie eine C-Struktur.
Und so, wie Sie auf die Felder ist nur mit dem Punkt.
Und so lange wie Sie sich erinnern, wie man verwenden Sie den Punkt, werden Sie in Ordnung sein.
>> OK, so jetzt kann jeder Lesen Sie diesen Link?
Hier ist der Link zum Projekt.
Ist jemand Probleme sehen den Link?
OK, ändern wir es dann.
Es ist nicht -
Ja, das ist wahrscheinlich, dass die einfachste Weg, es zu tun.
Große.
>> Also, wenn Sie auf diese Seite gehen, es sollte werden einige Anweisungen, dass ich
übergehen, wie wir Meteor installieren und erhalten Sie unsere Beispielprojekt läuft.
Ich möchte sicherstellen, dass jeder hat der Link, bevor ich mich bewege.
Kann ich auf?
OK, toll.
>> Also bin ich hier auf der Website.
Sie werden in der Readme-Datei bemerken, wir haben einige Anweisungen, wie
zu bekommen th eingerichtet.
Sie müssen entweder in der CS50 sein Gerät oder einfach nur auf einem Mac.
Windows wird nicht funktionieren.
Aber im Grunde alles, was nicht ist Windows sollte damit arbeiten
Anweisungen prima.
Aber ich kann es ein bisschen zu machen größer als gut.
>> So werden Sie der erste Lauf Paar von Befehlen.
Diese Jungs werden einfach installieren Meteor.
Ich kann in meinem Terminal zu gehen.
Und wenn ich die gleiche Sache jetzt, Ich habe bereits installiert ist.
So ist es ein bisschen kürzer.
Es könnte etwas länger dauern für euch.
Aber ich möchte Sie zunächst sicher, dass wir Meteor läuft.
Nach Meteor installiert hat, sollten Sie in der Lage, in der Konsolen zu bekommen.
>> ZIELGRUPPE: Sie sind gefragt nach einem Passwort.
>> ROGER ZURAWICKI: Das wäre Ihr Benutzer-Passwort, wenn Sie auf einem Mac arbeiten.
Es muss nur die Erlaubnis, einige Systemdateien ändern.
So war die Frage, ob es fragt Sie nach ein Passwort, es ist nur gefragt,
Ihren Benutzernamen vergessen, wenn Sie in Ihrem Mac anmelden.
Und das ist, so dass Sie Systemdateien ändern.
>> Und wenn Sie fertig sind, können Sie bewegen sich zu dem nächsten Schritt, der kopiert werden soll
Beispielcode habe ich von der Website.
Und Sie werden ein neues Verzeichnis in erhalten Sie Ihre Home-Verzeichnis genannt Rangliste und
können wir anfangen zu arbeiten von dort aus.
Also ich bin einfach nur kopieren und einfügen diese Befehle in meinem Terminal.
Und für mich ist, ich es bereits geklont.
So kann ich gerade jetzt bewegen in der Bestenliste.
Und ich sollte ein paar haben Dateien dort.
Haben Sie Fragen?
>> ZIELGRUPPE: [unverständlich] funktioniert nicht.
>> ROGER ZURAWICKI: Ach, könnten Sie müssen git installiert als auch.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Sorry?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Oh, OK.
OK.
Das ist, weil Sie brauchen, um sein bei GitHub eingeloggt, um diesen Link zu bekommen.
Wenn euch das sehe, ist die einfachste Weg, es zu tun, dann würde ich sagen, ist
laden Sie die zip.
Und das wird einfach herunterladen alle Dateien.
Und dann, wenn Sie es in Ihrem herunterladen oder Ihr Home-Verzeichnis -
Ich empfehle Sie sie in Ihr Home-Verzeichnis, so können wir alle
laufen die gleichen Befehle.
Solange wir die Dateien, werden wir der Lage sein, mit ihnen zu arbeiten.
Lassen Sie mich wissen, wenn die Menschen mit Probleme beim Herunterladen der Dateien.
>> ZUSCHAUER: Mit dem Home-Verzeichnis, Sie meinen -
>> ROGER ZURAWICKI: Also Home-Verzeichnis würde John Harvard sein, wenn Sie in sind
das CS50-Appliance.
Um zu Ihrem Home-Verzeichnis zu bekommen, nur in C geben
>> ZIELGRUPPE: [unverständlich]
CS50 Gerät [unverständlich].
>> ROGER ZURAWICKI: Ja.
Sie möchten die Befehle ausführen in Ihrem Terminal.
>> ZIELGRUPPE: [unverständlich].
Ich eine Fehlermeldung, dass nicht bekam Datei oder Verzeichnis.
>> ROGER ZURAWICKI: Wir können eine schnelle nehmen brechen und so stellen Sie sicher, dass
jeder hat Meteor installiert, und ich werde gehen Sie einfach versuchen, Menschen zu helfen.
Bitte versuchen sich gegenseitig zu helfen, wenn Sie Probleme laufen.
Es tut uns leid, ja.
Sind Sie beide in das Gerät?
>> ZIELGRUPPE: Ja.
Ich habe die RISA
>> ROGER ZURAWICKI: OK.
Wenn Sie zurück auf die Website zu gehen, gehen nach oben an die Spitze.
Und es ist das HTTPS.
>> ZIELGRUPPE: Kopieren Sie das?
>> ROGER ZURAWICKI: Ja.
Und dann wollen geben git clone.
Also, wenn Sie Kontrolle A drücken -
>> ZIELGRUPPE: Hier?
Und tun [unverständlich]?
>> ROGER ZURAWICKI: G-I-T.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Git und dann zu klonen.
So ist es sehr ähnlich zu dem Befehl hatte oben, aber die URL geändert.
Also, bevor es war diese, jetzt ist es diese.
Lassen Sie mich zu aktualisieren, die -
ja.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Dies wird heruntergeladen.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Oh, so ist es nicht richtig zu klonen.
Ich werde das beheben.
Es ist ein Fehler, mit dem Versuch, um die Dateien herunterladen.
Lassen Sie mich den Befehl aktualisieren für euch so kann ich sicherstellen, dass es funktionieren wird.
Ich bin mir leid.
Es sollte das gleiche für sein Macs oder CS50-Appliance.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Ich habe die aktualisierte Befehl für die Nummer zwei, wenn
Sie die Seite aktualisieren.
Und mit diesem, URL, sollten Sie sich in der Lage, die Dateien herunterzuladen.
>> ZIELGRUPPE: Also, wenn wir noch Download [unverständlich].
>> ROGER ZURAWICKI: Wenn Sie noch heruntergeladen Meteor?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Ja, wenn Sie wollen, auf Ihrem Mac zu entwickeln.
Aber Sie müssen die Xcode Entwickler Tools installiert.
Ich habe diese Befehle auf dem CS50 getestet Gerät, so kann ich garantieren
dass es funktionieren wird.
Ja. lassen Sie mich gehen und dir helfen.
>> ZIELGRUPPE: [unverständlich].
Ich mein Passwort zu geben.
Das ist Mac.
Und dann muss ich [unverständlich].
>> ROGER ZURAWICKI: OK.
Ich würde versuchen, laufen alle Befehle ausschließlich im CS50-Appliance-Terminal.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Ich würde es arbeiten erste auf dem Endgerät, auf das
CS50 Gerät und dann die Mac-Terminal.
>> ZIELGRUPPE: Also, wenn Sie es auf dem CS50 tun Appliance so, [unverständlich].
>> ROGER ZURAWICKI: Ich würde gerne umziehen auf, aber wenn die Menschen immer noch mit
Probleme beim Einrichten Meteor, ist Kevin mehr als glücklich, euch zu helfen,
Kevin im grauen T-Shirt.
Was wir haben, ist, wir sollten zu gehen führen Sie den letzten Befehl, Nummer drei, in
unserem Terminal.
Wenn wir das tun, werden wir Meteor laufen.
>> Und Sie sollten -
oh, ich habe bereits Meteor läuft.
So wird es nicht zu lassen - lassen Sie mich schließen Sie einfach meine anderen Meteor.
Wenn ich Meteor, Sie sollten jetzt sehen, dass -
sollten Sie das aktuelle Verzeichnis zu sehen dass es dient.
Und jetzt wird es, den Server zu sagen, auf http://localhost läuft.
Das ist die URL, die Sie setzen wollen in in Ihrem Web-Browser.
>> Und auf dieser URL, sollten Sie in der Lage zu sein, Zugriff auf eine nette kleine Liste.
Also feststellen, dass dies auf localhost, was bedeutet, dass, wenn Sie eines tun
Änderungen, werden Sie nicht auf sehen jedes andere Änderungen.
Während auf der Website, die ich Ihnen gezeigt, am Anfang, wir könnten
jedermanns Veränderungen, weil jeder wurde auf das gleiche Website.
>> Also lassen Sie mich nur auf [gehen? Wort?]
3000.
So sollten Sie in der Lage, nur bestätigen dass die Funktionalität arbeitet.
Sie können verschiedene Menschen zu wählen, und Sie können sie verschiedene Punkte zu geben.
Also gebe ich jemand Punkten.
Sie können auch sehen, dass sie steigen im Rang.
>> Nun, im Interesse der Zeit gab sind drei Eigenschaften, die ich habe
umgesetzt.
Und wir werden das Löschen implementieren Benutzer als unsere erste Funktion.
Aber bevor wir weiterziehen, sind noch Fragen?
Du hattest deine Hand auf.
Ja?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Können Sie überprüfen dass Meteor ist installiert?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Local Host 3000?
Und Sie in der CS50 Gerät sind?
Ich tun kann -
Sie müssen nicht auf einem Mac sein.
Dies wird in dem Gerät zu arbeiten.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: In der normalen Web-Browser, ja.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Ist Meteor läuft?
So OK, es gibt hier eine Unterscheidung.
Wenn Sie in die Lauf es sind Gerät, zu tun haben, die Sie
localhost in das Gerät.
Wenn Sie in Ihrem Mac mit dabei sind, wie ich bin, dann kann ich tun
mein Mac Google Chrome.
Aber wenn Sie das Gerät CS50 sind, Sie, alles zu tun haben
im Gerät.
Also, Google zu nutzen müssen Sie Chrome im Gerät.
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Es ist immer noch nicht funktioniert?
>> ZIELGRUPPE: [unverständlich].
>> ROGER ZURAWICKI: Also nur zu wiederholen, wie wollen Sie jetzt auf die Website zugreifen.
Sie haben hier eine URL auf localhost 3000.
Wenn Sie in der CS50 Gerät sind, Sie haben CS50 öffnen
Appliance Google Chrome.
Und in diesem Google Chrome innerhalb der Gerät, können Sie in dieser URL eingeben,
und Sie sollten eine Rangliste zu sehen.
Also werde ich nur ihn weg auf die Seite hier ein wenig.
Und jetzt werde ich öffne meine Texteditor hier.
Lassen Sie mich also nur sicherstellen, dass der Code ist in Ordnung.
OK.
Große.
>> Ich möchte nun zu Fuß durch der Code ein wenig.
Und die erste Datei, die ich damit beginnen wollen, mit leaderboard.html heißt.
Sie werden nach der Lage, diesen Code zu erhalten das Seminar, so möchte ich nur um zu zeigen
Sie auf dem Computer, was los ist.
Ich hoffe also, jeder kann das sehen.
So dass am Anfang der Datei, die wir haben unseren Kopf und den Titel, die
ist ähnlich zu dem, was wir sahen in jedem HTML-Dokument.
Und dann werden wir haben der Body-Tag hier.
>> Was ich gewählt habe, ist die Haupt Körper, im Grunde, was
gehen, um angezeigt zu bekommen.
Aber es gibt einige neue Nicht-HTML- Dinge, und das ist in der
doppelten spitzen Klammern.
Und das sind Template-Tags.
So werden Sie hier sehen diese Klammer Klammer neue Leaderboard.
Und dies ist eine Art - man denke an sie als Aufruf einer Funktion für HTML.
>> Dies ist eine spezielle Version von HTML.
Es ist die Version, die Meteor verwendet, die ist, warum Sie anders darstellen kann
Dinge, wie die Rangliste Namen und Tasten.
Aber Rangliste sagt Ihnen, die gehen Vorlage mit dem Namen Liste.
Also Vorlage nicht angezeigt durch zu bekommen selbst, sondern es ist eine Funktion, so dass es
wird aufgerufen.
Und Sie werden in all das ersetzen Code direkt hier in der Bestenliste.
>> Der interessante Teil der Rangliste hier ist nur diese Tabelle.
Wenn Sie nur lesen, lesen Sie diesen Code laut sollte intuitiv sein
Leaderboard, weil alles, was wir hier haben ist ein Tisch.
Diese ID-Klasse Sachen, die Sie nicht tun sich Sorgen machen müssen.
Genau wissen, dass es eine Tabellenkopf.
Das ist das thead.
>> Und er findet einen Namen und eine Partitur.
Alle diese Tags, wie thtable, thead, Sie müssen nur lernen, wie Sie gehen.
Es ist nicht wichtig, dass Sie merken, diese, weil man einfach die Wartung
Referenz online.
Oder bis zum Ende des Semesters, diese wird gerade sehr vertraut mit dir sein.
>> Nachdem die Kopfzeile der Tabelle, die Teil, möchte ich ziehen Sie Ihre
Aufmerksamkeit ist diese h-Tag.
Weil es in doppelte eckige Klammern, es ist eine Schablone.
Das heißt also, für jeden der Spieler, was auch immer die Spieler ist, müssen wir
anzeigen.
Und wir gehen auf den Player-Vorlage.
>> Wenn wir nach unten scrollen, ein bisschen mehr -
Ich hoffe, jeder kann das sehen.
Wir haben die Player-Vorlage.
Und diese Vorlage definiert im Grunde ein Tabellenzelle, wo Sie in den Namen setzen
hier und die Punktzahl.
Verkleinern jetzt können wir sehen, dass dieses Stück Code -
und das war unser Spieler dort unten -
definiert eine dieser Zellen.
Jede Sache, die ich auf wird gelb.
>> Ein einfacher Weg, ich könnte es jetzt zu ändern.
Stellen Sie sicher, Meteor läuft noch.
Meteor sollte ein Server-Prozess sein, so dass Sie nur lassen Sie es
laufen, wenn Sie entwickelt.
Sagen wir, ich wollte ändern alle Namen oder die Punktzahl.
Und ich würde sagen, ich werde Punkte hier hinzufügen.
So ist die Veränderung, die ich hier gemacht wurde, statt nur Gäste, ich
Kerb Raumpunkte.
>> Ich werde zu verkleinern, und ich bin werde meine Datei zu speichern.
Und nachdem ich meine Datei zu speichern, muss ich um sicherzustellen, dass Meteor läuft.
Tut mir leid.
Ich möchte Ihnen zeigen, Bearbeitungen wurden in Echtzeit.
Also werde ich nur einen Text zu ändern.
Klicken Sie auf einen Spieler.
Ich setze es in Großbuchstaben.
Und sollte es sein, dass, wenn diese Arbeits richtig, wenn ich es zu retten, ist es
würde zu aktualisieren.
>> Oh, ich glaube, jetzt ist das Problem Ich bin nicht im richtigen Verzeichnis.
OK.
Ich bin mir leid.
So, hier, was Sie bemerken ist, meinen Wechsel ging durch.
Jetzt sagen, ich will, um die Änderung zurück.
Ich will zurück zu dem, was ich hatte.
Ich bin gerade dabei, es in der Regel eingeben.
Klicken Sie auf einen Spieler.
>> Der Moment, als ich speichern, die Website aktualisiert, für mich.
Und ich sehe meinen Wechsel auf die Seite sofort.
Dies ist ein wirklich hilfreiches Feature bei der Fehlersuche, denn jetzt
Ich weiß nicht -
wenn wir C-Code zu schreiben, haben wir nicht nur haben, um die Datei zu speichern, aber wir hatten
machen es und führen Sie es noch einmal.
Meteor ist sehr schön, denn im Gegensatz zu C, sobald Sie Ihre HTML-oder speichern
JavaScript-Datei, die Änderung zeigt sofort auf.
>> Eine Frage ist, in diesen Vorlagen, wie bekomme ich die Werte wie Spieler
oder wählen Sie einen Namen?
Wenn ich Bilder in hier in meinen Code, Ich sehe das für jeden Spieler.
So ist die Vorlage, weiß, dass Ich habe die Spieler irgendwie.
Und sie weiß, dass es eine ausgewählte Namen.
Wo kommt das her?
Das kommt von der JavaScript.
>> Und wenn Sie gehen, um leaderboard.js, diese Datei, wenn ich jetzt hier gehen, haben wir eine
paar Befehle definiert.
Dies ist eine spezielle Syntax Meteor.
Beachten Sie, dass Sie nicht brauchen, vars oder nichts.
Aber das sind nur auf Strukturen Structs Strukturen oder auf diese Objekte.
Und alles, was ich definieren, ist die Vorlage genannt Liste.
>> Rangliste sollte eine bekommen Ding namens Spieler.
Und was die Spieler?
Es ist, was dieser Ausdruck zurück.
Und was ist ausgewählt Name?
Es ist etwas mehr Code.
Die Details der Code wir werden decken ein bisschen später.
Aber jetzt möchte ich Sie zu verstehen, dass in diesem Code nehmen wir
Spieler, und wir geben sie einen Wert.
In diesem Fall ist es eine Funktion dass wird ausgeführt.
So können wir den Wert zurück wenn wir führen Sie die Funktion.
Dies ist ein Protokoll.
Heißt das Sinn?
>> Ich kann das so, wie es sortiert ändern.
Hier gibt es eine Art Objekt.
Und was das ist, sagt, ich werde zu sortieren nach Punkten absteigend ersten und
nennen aufsteigend.
Wenn ich dies für eine ändern, es geht um Gäste aufsteigend zu sortieren.
Also Null sollte auf der Spitze.
Und wenn ich in meine Website zu vergrößern, haben wir jetzt sehen, dass die Website aktualisiert.
Und die Punktzahl steigen.
>> Die nächste Funktion möchte ich nur zu decken ist, klicken Sie Schritt.
Aus dem Interesse der Zeit, ich will nicht in der Lage sein, mehr von der Meteor decken
Code, aber es gibt viele Ressourcen zur Verfügung, und ich werde sein
hier nach dem Seminar.
Aber ich will nur decken die Rangliste Veranstaltungen.
Diese Syntax lernen Sie ein Etwas später in der Vorlesung.
Dies ist kein JavaScript.
>> Wir sagen nur, wenn wir einen Klick und es ist auf den Zuwachs, diese
Hash bedeutet nur, ID.
Auf der Zuwachs ID-Tag, dann möchten wir zu aktualisieren - die Schlüsselbegriffe möchte ich Sie
zu beobachten ist und Update auswählen und Spieler.
Also je nachdem, welcher Spieler ausgewählt, Wir aktualisieren.
Und was wir tun ist, wir erhöhen seine Punktzahl durch fünf.
Und das wird die Funktionalität beschreiben wir hier haben.
>> Nach dem Ende des Seminars werden wir in der Lage sein, etwas mehr Code zu sehen.
Aber zurück zu meinem Ziel, das möchte ich ändern Sie den Ort, hier wollte ich über
um ein Entfernen-Button hinzufügen, damit Ich kann den Player zu löschen.
So, das zu tun, muss ich zwei Dinge tun.
Ich muss die Datei zu aktualisieren, aktualisieren Sie die zu sehen, was wird dem Benutzer angezeigt, und
dann haben einige JavaScript dass, wenn die -Taste gedrückt wird, wird Meteor gehen
etwas zu tun.
Es geht um diesen Spieler zu entfernen.
>> So gibt es eine Menge von Codeteile , die im Grunde bereits
wurde für mich getan.
Wenn ich mir hier, ich habe bereits einen Weg bekommen den ausgewählten Spieler.
Das ist das Zeug, wenn man es sehen können.
Also, wenn ich nur -
Ich werde eine andere Veranstaltung.
So werde ich zu kopieren, was ich habe.
Da es sich um eine Liste, Ich brauche nur ein Komma.
>> So, jetzt werde ich auf Löschen.
Und dann anstatt der Spieler-Update Ich werde tun, Spieler zu löschen.
Und alle Spieler löschen Bedürfnisse ist eine ausgewählte Spieler.
Also diese Funktion ist alles was wir brauchen.
Ich muss einige hinzufügen HTML hier aber.
Also, wenn ich hier unten zu scrollen, Hier ist die HTML-Ansicht.
Wir hatten eine Sache hier, das war ein ein Tag.
Sie brauchen keine Sorgen zu machen.
>> Was ist für Sie ist diese ID-Schrittweite.
Und dies ist es, was uns erlaubt, zu sagen, wenn wir geklickt Schritt, wir müssen
geben fünf Punkte.
Und Sie werden sehen, dass dies eine Taste.
Das ist, was das bedeutet, btn.
Und der Text in der Taste ist fünf Punkte geben.
Also, was ich zu tun ist, bin ich gehen, um diese Zeile zu kopieren.
Ich werde, um die ID zu löschen ändern.
Und ich werde das ändern Text hier, um zu löschen.
>> So stellen Sie sicher, dass alles gespeichert.
Ich will zurück zu meinem JavaScript gehen , um sicherzustellen, dass ich
löschen hier gefüttert.
Gut.
Also werde ich die beiden Dateien zu speichern.
Nach dem Speichern Sie beide Dateien, die wir kann wieder auf den Boden zu gehen.
Und nun sehen wir, dass wir ein Löschen-Taste.
Und noch ein Schritt.
Man merkt, man könnte eine bekommen Fehler, weil, wenn ich auf
löschen, nichts passiert.
>> Ein Weg, dies zu prüfen, ist zu gehen zurück zum Element Untersuchen.
Ich mache das mit Absicht so können Sie sehen, wie Sie etwas zu debuggen.
In Inspect Element, haben wir alle unsere Text hier unten.
Ich will zurück auf die Konsole zu gehen.
Und was passiert, wenn ich hier gehen ist bekomme ich eine Art von Fehler.
Es sagt, es gibt keine Methode zu löschen.
>> Also, was es sagt, ist, wenn ich gehe, zurück zum Code, rief ich Spieler
hier löschen.
Löschen ist eigentlich nicht der richtige Befehl.
So erfahren Sie, was die richtige Befehl wird, da ist der Meteor-API.
Die Dokumentation möchte ich Sie darauf hinweisen Jungs ist nur bei meteor.com.
So habe ich es hier oben.
Das ist nur, damit Sie wissen, Jungs wo um mehr zu erfahren.
>> Es ist ein Link auf die Dokumentation.
Und im Grunde, kann ich nur Sie finden zum Löschen.
Und was Sie sehen, löschen tatsächlich zu entfernen.
Das ist der Befehl, Ich muss anrufen.
So, jetzt wissen wir, dass, ich werde dies zu ändern, zu löschen, um zu entfernen.
So, jetzt, wenn ich zurück zu meiner Rangliste gehen Ort, ich werde Sie
zu löschen, und jetzt bin ich weg.
Es ist nicht mehr Roger.
Und ich kann weitermachen Löschen jeder einzigen Namen, bis ich nichts mehr übrig.
>> Das war also eine kleine Vorschau , wie die Meteor zu verwenden.
Sie werden lernen, viel mehr JavaScript HTML und notwendig, um
es schöner aussehen, die wir behandeln in dieser Woche [? Stück?] für HTML gesetzt
und JavaScript in den nächsten [? Stück?] eingestellt.
>> So erhalten Sie nicht besorgt, wenn nicht alle das Zeug kommt einfach zu Ihnen.
Es wird die Zeit von By das endgültige Projekt.
Vielen Dank für die Ansicht auf.
Der Link, den ich bald nach Aktualisierung der Seminar so dass Sie etwas mehr zu sehen
Beispiele, die ich auf geführt, wie um die erweiterte Leaderboard
dass ich auf dieser Webseite hier bei ein Radikal-leaderboard.meteor.
Danke.
>> [Applaus]