Starte eine Rakete: Lerne JavaScript-Grundlagen auf unterhaltsame Weise!

1. Eine Einleitung: He, hallo. Mein Name ist Rich Armstrong, und ich habe Websites, Apps und interaktive Dinge für die letzten 10 oder so Jahre. In dieser Klasse geht es darum, grundlegende JavaScript zu schreiben. Ich werde dir etwas Theorie beibringen. Ich werde Ihnen beibringen, wie JavaScript sich auf HTML und CSS bezieht, und dann werde ich aus dem Schreiben lehren. Sie JavaScript schreiben können, können Sie interaktive Websites, Apps und Spiele erstellen, die dynamisch sind, bewegen und die sogar für sich selbst denken können. JavaScripts macht super Spaß. Wenn Sie sie mit HTML und CSS kombinieren, werden Sie in der Lage sein, die Welt zu übernehmen. Am Ende dieser Klasse werden Sie ein weißer Gürtel JavaScript-Ninja sein und ein grundlegendes Verständnis von JavaScript haben. Sie haben ein paar Raketen abgeschossen. Deine Freunde werden dich für erstaunlich halten. Du bist Mutter wird dich aus der Zukunft denken, und du wirst in der Lage sein, mehr interaktive Dinge zu machen. Ich glaubte wirklich, zu wissen, wie man kodiert, macht einen so großen Unterschied in der modernen Welt, besonders wenn man ein Designer ist, besonders wenn man kreativ ist. Ich bin wirklich aufgeregt, dir beizubringen, wie man kodiert, also schließe dich mir an und freue dich. 2. Was werden wir machen???: Was werden wir machen? Was soll ich dir beibringen? Nun, wir werden eine Raketenstart-Sequenz machen, auf die Elon Musk stolz sein würde. Wir kriegen eine Rakete, die vom Stillstand bis zur Narbe geht , vielleicht sogar explodiert. Ich werde Sie durch Knopfklicks und CSS-Animationen und Funktionen und Variablen nehmen und wenn Anweisungen, werden Sie viel lernen, aber nicht zu viel, Ihr Gehirn wird nicht explodieren. Ich zeige Ihnen, wie Sie Sublime Text verwenden, ich zeige Ihnen, wie Sie Google Chrome-Entwicklertools verwenden und wie Sie GitHub-Desktop verwenden und wie Sie GitHub-Seiten verwenden und wie Sie Ihre Kreation mit dem Rest der Welt teilen können. Wir beginnen klein und einfach und kommen dann in die Grundlagen von JavaScript ein. Es ist leicht, es macht Spaß. Ich erzähle alles visuell und stelle Ihnen einfache Metaphern zur Verfügung, die Sie verstehen können. Kommen Sie zu dieser Klasse und lassen Sie uns gemeinsam eine Rakete starten. - Ja. 3. Lade diese 3 kostenlosen Apps herunter.: Um also mit dem Schreiben von JavaScript zu beginnen, brauchen wir drei Dinge. Die erste ist ein Code-Editor, wird Sublime Text 3 verwenden. Die nächste App, die wir herunterladen müssen, ist Google Chrome, die ein Browser ist. Die dritte App, die wir herunterladen müssen, ist GitHub Desktop , der mit GitHub online synchronisiert und mit diesem, können Sie Ihren Code teilen und Sie können ihn sichern und synchronisieren. Öffnen Sie Safari oder Internet Explorer und suchen Sie nach Sublime Text 3. Klicken Sie auf diesen Link, und laden Sie dann den richtigen Link für Ihr Betriebssystem herunter. Für mich ist es OS X. Das nächste, was wir tun müssen, ist die Suche nach Google Chrome, klicken Sie auf den ersten Link. Manchmal dauert diese Seite eine Weile, bis sie geladen wird, und manchmal ändert sie sich. Holen Sie sich einfach die für PCs und laden Sie Chrome herunter, akzeptiert und installieren Sie und früher oder später Chrome wird installiert. Die letzte ist GitHub Desktop. Suchen Sie danach, öffnen Sie ersten Link und klicken Sie dann einfach auf die Schaltfläche GitHub Desktop herunterladen. Es ist für Mac oder Windows verfügbar. Sie sehen ein bisschen anders aus, aber es sollte Sie nicht zu sehr stören. Das nächste, was Sie tun müssen, ist, dass Sie zu github.com gehen müssen und Sie ein neues Konto erstellen müssen. Melden Sie sich an, wenn Sie noch kein GitHub-Konto haben. Sie wählen einen Benutzernamen aus, geben Ihre E-Mail-Adresse ein und erstellen ein Passwort. Was hier wirklich wichtig ist, ist, dass Sie das Konto überprüfen müssen , bevor Sie tatsächlich mit GitHub Pages beginnen können. Für diejenigen unter Ihnen, die bereits einen haben, melden Sie sich an und geben Sie Ihre Daten ein. Alles bereit, also melden Sie sich an. Was wir hier tun werden, ist, dass wir tatsächlich ein neues Projekt erstellen wollen. Es wird in GitHub ein Repository genannt. Alles, was ich hier tun möchte, ist, dass Sie zurückgehen und ein neues Repository erstellen möchten, und wir werden diese JS-Raketen nennen. Wir können eine Beschreibung in der Startraketen mit JavaScript setzen. Lassen Sie es uns öffentlich halten. Es hilft immer, ein Repository mit einer README-Datei zu initialisieren. In Ordnung. Lassen Sie uns dieses Repository erstellen, und von hier an sind Sie auf dem besten Weg zu den ersten Schritten. 4. Installiere, registriere und schreibe etwas in JS: Sobald alle Ihre Apps heruntergeladen wurden, müssen Sie nur Ihre GitHub Desktop-App in den Anwendungsordner ziehen. Ich habe bereits eine, also werde ich es einfach ersetzen, fantastisch. Ihre Google Chrome, Sie müssen sich öffnen, weil es eine DMG ist, nicht ganz sicher, was unter Windows passiert, aber tun Sie einfach den normalen Prozess der Installation einer Anwendung. Google Chrome ziehen Sie es einfach direkt in Ihren Applications Ordner. Erhabener Text. Doppelklicken Sie auf diese DMG-Datei und ziehen Sie diese auch in Ihren Anwendungsordner. Ich habe es schon. Cool, ich werde es ersetzen. Das ist Ihr Installationsprozess. Sie können diese Apps dann löschen. Also, was Sie tun können, ist, Sie können zu Ihrem Finder gehen, Sie können in den Anwendungsordner gehen und Sie können es dort finden. Das erste, was wir tun wollen, ist tatsächlich unsere GitHub Desktop App zu öffnen. Also habe ich es schon in meiner Bar unten hier. Also öffnest du es auf. Also sicher, lass es uns öffnen. Wenn Sie bereits einige Projekte in Ihrem GitHub haben, wird es Ihnen zeigen, dass, hey, es gibt eine Reihe von Änderungen, wenn Sie Änderungen benötigen. Aber was wir hier tun wollen, ist, wenn Sie sich noch nicht angemeldet haben, gehen Sie zu Ihren Einstellungen und Sie wissen, was Ihr Benutzername ist und Sie wissen, was Ihr Passwort ist. Also melden Sie sich an. Dann von hier aus können Sie tatsächlich klonen, also möchte ich sagen cool, ich möchte diese JS-Rakete klonen, geklonte JS-Rakete. Wo ich das hinstellen werde, werde ich es auf meinen Desktop stellen. Also wähle ich meinen Desktop, und jetzt wird es cool sagen, Klonen. Was wir hier tun müssen, ist, dass wir tatsächlich einen neuen Zweig erstellen müssen. Ich werde diese GH Seiten nennen. Ich werde vom Master klonen, und dann hier werden wir an diesem Zweig arbeiten, weil wir dann als Website online zugreifen können . Zweig erstellen. Sie werden also sehen, dass Sie Ihre JS-Rakete und vielleicht ein paar andere haben , aus denen Sie wählen können, aber jetzt haben Sie Ihren JS-Rocket Ordner auf dem Desktop mit nichts viel drin. Also lassen Sie uns js-rocket in erhabenem Text öffnen und Sie werden sehen, dass es eine Reihe von Dateien und Ordnern auf der linken Seite und dann wird Ihre Karte auf der rechten Seite sein. Also gehen wir Datei, Neue Datei, und nennen wir es index.html. Also lasst es uns retten. Ich gehe zu meinem Desktop und speichere es als index.html. Danke, Maus-Batterien sind niedrig. Hier. Lass uns einfach Hallo js-rocket schreiben und das richtig buchstabieren und dann speichern. Was wir jetzt tun müssen, ist nur doppelt zu überprüfen, ob dies funktioniert, also gehen wir zurück zu unserem Finder, wir ziehen unsere index.html Datei in Google Chrome. Fantastisch. Öffnen Sie das auch. Hallo JS-Rocket. Das funktioniert. Ich gehe zu GitHub Desktop, es geht, hey, du hast etwas getan. Also alles, was wir hier tun müssen, ist nur sagen, dass wir unsere Indexdatei hinzugefügt haben. Sie können eine detailliertere Beschreibung geben, wenn Sie möchten. Sie verpflichten sich dann zu GH Pages. Was Sie tun, ist, dass Sie es dann veröffentlichen. Dies synchronisiert also Ihre lokale Version von js-rocket mit der Online-Version von js-rocket. In Chrome müssen wir also auf github.com gehen und uns bei unserem Konto anmelden. Meiner ist mrra-Screencast und mein Passwort ist mein Geheimnis. Bitte merken Sie sich Ihr Passwort. Wir wollen dann zu unserem js-rocket Repository navigieren, wir wollen zum Master-Zweig gehen und es in GH Pages Zweig ändern, und dann werden Sie sehen, dass es hier eine Datei gibt, es sagt lesen Sie mich, es sagt index.html. Die Dateien, die sich auf Ihrer GitHub-Website befinden, sollten mit den Dateien in Ihrer GitHub Desktop-App identisch sein. Hier können Sie unsere Geschichte sehen. Also, was wir jetzt tun wollen, ist, dass wir tatsächlich in diese Seiten Accounts bekommen wollen. Also, was wir tun werden, ist, wir gehen mrra-screencast und verwenden Sie Ihren Benutzernamen hier. Also, wenn dein Bob ist, benutze bob.github.io, und dann gehen wir und stellen unser Projekt hier. Also die letzte, die ich mit einer Karikatur hier gemacht habe. Also, was wir hier tun werden, ist, dass wir JS-Rocket gehen, Enter drücken und da gehen wir. Also, wenn du das siehst, funktioniert es. Wenn Sie das nicht sehen, müssen Sie es synchronisieren und Sie müssen sicherstellen , dass Sie am Zweig der GH Page arbeiten. Das nächste, was wir tun möchten, ist nur ein wenig JavaScript zu schreiben. Was wir hier tun, ist, dass wir Skript-Tag öffnen und sehen, was Sublime Text tut. Es macht eine Menge Arbeit für uns. Es geht zum Skript-Tag, ist vom Typ Text in JavaScript und sogar schließen Sie es für uns. Hier drüben werden wir gehen console.log hallo dort Freunde. Dann werden wir es retten. Oh, ich weiß nicht, was ich dort gemacht habe. Ich versuche, das zu schließen. Du solltest Save sagen. Sie werden feststellen, dass, wenn Sie zurück zu GitHub Desktop gehen, es wird sagen, hey, es gab eine kleine Änderung hier. Sie werden nur sagen, etwas Code hinzugefügt oder einige JS hinzugefügt, Commit zu GH-Seiten. Also begeht es die Änderung, und dann synchronisieren wir. Es macht es auf unserem lokalen Computer genauso wie online. Manchmal kann es eine Weile dauern, bis die Synchronisierung erfolgt. Wir gehen dann zu Google Chrome, wir navigieren dann zu unserem js-rocket Projekt oder Repo, wir können dann zum Commits Tab hier gehen, es ist manchmal ziemlich wichtig, und wir können sehen, dass es einige JS hinzugefügt hat. Wenn Sie hier aktualisieren, sehen Sie vielleicht nichts anderes, aber wenn Sie mit der rechten Maustaste klicken und manchmal könnte dies unten sein, oder manchmal könnte dieses Ding an der Seite sein. Was wir hier tun müssen, ist, dass wir tatsächlich zur Konsole gehen müssen. Wenn Sie eine Nachricht haben, die hallo dort Freunde sagt, Ihr JavaScript funktioniert, Ihr GitHub funktioniert, und Sie sind bereit zu rocken und zu rollen. Gepumpt. - Ja. 5. Was ist Javascript??: Was ist Javascript genau? Nun, JavaScript ist eine wirklich coole und clevere Programmiersprache hauptsächlich im Web, im Internet verwendet wird. Javascript liebt HTML, es liebt CSS und liebt wirklich Menschen. Es kann auch mit einem Server kommunizieren, also denke ich, es ist wie jeder beste Freund. Cool. Also, wo benutzen wir es? Wir verwenden es meistens im Browser, aber wir können es auch an einigen anderen Orten verwenden. Javascript wird auch als Serversprache verwendet, was bedeutet, dass Sie möglicherweise nur eine Programmiersprache kennen müssen , um alles im Web zu tun, aber keine Sorge, wir werden nicht in Server-Sachen in dieser Klasse kommen. Ich werde es leicht, lustig und leicht halten. Also, was kann JavaScript dann tun? Nun, JavaScript kann viel tun, es kann schnell zählen, es kann bis 1000 schneller zählen, als Sie können, es kann auf eine Million viel schneller zählen als jeder Mensch, es ist erstaunlich, es ist wirklich gut in Mathematik, es kann Dinge bewegen, was erstaunlich ist, es kann mit dem Server sprechen, es kann Wörter ändern, es kann Dinge auf dem Bildschirm herumziehen, es kann Sie warnen, es kann programmiert werden, um alles zu tun, und es weiß viel, Es speichert viele Informationen über den Browser und die Webseite, auf der es sich befindet. Sie können es so ziemlich einfach fragen, wie, wie groß ist der Bildschirm? Oder welchen Browser verwenden sie? Oder welche Farbe ist der Hintergrund? Oder wie lautet die URL? Wo sind wir? Es weiß viel, was wirklich cool ist. 6. Eigenschaften und Methoden: Was ist JavaScript wirklich? Nun, eigentlich ist es ganz einfach. JavaScript ist eine Liste von Objekten, auf die es Zugriff hat , und eine Liste von Aktionen, die Sie anfordern können. Die ersten werden die Eigenschaften genannt. Es ist die Liste der Objekte, die es überschüssig hat, sie werden Eigenschaften genannt. Die Liste der Aktionen, die Sie beantragen können, werden sie Methoden genannt. Es gibt eine Reihe von Standardeigenschaften und -methoden, und dann gibt es diejenigen, die Sie selbst schreiben und JavaScript hinzufügen können. Wenn wir JavaScript als Auto sehen würden, zum Beispiel. Ein Auto hätte Eigenschaften wie Farbe Farbe, Sitze, Reifen, Motor, Marke, Modell, eingeschaltet, Jahr gemacht, aktuelle Geschwindigkeit. Dann hätte es vielleicht Methoden wie einschalten, Gang wechseln, zeigen, wie schnell wir gehen, die Haube knallen, das Sonnendach öffnen, das Warnlicht zeigen. Eigenschaften können im Inneren variieren. So könnte die eingeschaltete Eigenschaft ja gewesen sein oder es könnte nein sein. Die Farbeigenschaft ist ein Wort, es könnte rot sein, es könnte blau sein. Die Motoreigenschaft, na ja, das ist eine eigentliche Sache, es ist ein anderes Objekt. Sitze, es ist eine Liste von Sitzen, und jeder dieser Sitze ist ein Objekt. Jetzt verfügt jedes Objekt auch über einen eigenen Satz von Eigenschaften und Methoden. Die Sitzeigenschaft ist eine Liste, und so könnte es seine eigene Eigenschaft der Anzahl der Sitze haben und eigene Methode haben, mir Platz Nummer eins zu geben und sobald Sie Sitz Nummer eins haben, können Sie auf seine Eigenschaften und Methoden zugreifen, wie Farbe, ist der Sicherheitsgurt arbeitet, und die Methode wie die Sitze erwärmen oder zurücklehnen. Nun, wie schreibst du JavaScript? Um also auf alle diese Eigenschaften und Methoden eines Objekts zugreifen zu können, müssen wir die.syntax oder.notation verwenden. Wir können sagen, car.seats und es würde uns die Sitze geben. Oder wir können sagen, car.isturnedon und es würde sagen, ja oder nein. Wir könnten sagen, car.currentspeed oder car.colour oder car.make oder car.turnon. Nun, das ist eine Methode. Einige Anweisungen, könnten wir sagen, car.popthehood, oder Sie könnten sagen, car.opensunroof. Sie können sehen, wie diese Anweisungen sind und die Anweisungen unterschiedlich sind, weil sie die Klammern hinter ihnen haben. Um diese zu nutzen, gibt es eine Sprache, die wir lernen können, und es ist eine Sprache, die ich Ihnen beibringen werde. Lass es uns tun. 7. Variablen: Das erste, was ich tun möchte, ist zu erklären, was eine Variable ist. Eine Variable ist etwas, das sich auf etwas anderes bezieht. Wenn ich FavColor sage, und ich gebe meiner FavColor einen Wert von rot. Sie können hier sehen, dass es dieses var Schlüsselwort gefolgt von einem Leerzeichen, gefolgt von einem Namen, gefolgt von einem Gleichheitszeichen und dann einem Wert. Es endet mit dem Semikolon, das im Grunde nur sagt: „Okay, wir sind mit dieser Zeile fertig.“ Dieses var Schlüsselwort ist etwas Besonderes, Sie müssen es auf diese Weise buchstabieren. Sie müssen ein Leerzeichen zwischen dem Schlüsselwort var und Ihrem Namen Ihrer Variablen lassen. Dieser Name kann Unterstriche haben, er kann einfach keine Leerzeichen haben und keine Bindestriche haben. Ich bevorzuge CamelCase, das ein kleiner erster Buchstabe ist, und dann verwende ich jedes Mal, wenn es ein anderes Wort gibt, anstelle eines Leerzeichens oder eines Unterstrichs, anstelle eines Leerzeichens oder eines Unterstrichs,einfach einen großen Buchstaben oder einen Großbuchstaben. Um das Gleichheitszeichen herum müssen Sie keine Leerzeichen haben, aber für mich macht es nur viel einfacher zu lesen. Dann weisen wir ihm einen Wert zu. Der Grund, warum wir ihm einen Wert zuweisen, ist, weil sich dies ändern kann, dies zu grün ändern kann, es kann sich zu blau ändern kann, es kann sich zu blauändern, und wenn wir in unserem Code arbeiten, müssen wir nicht verfolgen, was dieser Wert tatsächlich ist, wir müssen nur Lieblingsfarbe haben. Ich werde das kopieren und Ihnen zeigen, wie das funktioniert. Wenn ich blau sage, oder vielleicht werde ich einfach diese ganze Sache kopieren, gehe ich zu Google Chrome und ich sage „Ansicht“, „Entwickler“, „Entwicklertools“, oder Sie können einfach mit der rechten Maustaste klicken und „Inspect“ sagen und dann zu Ihrer Konsole gehen. Was ich hier gerne tun würde, ist, fügen Sie dies einfach ein und sagen, var FavColor gleich blau ist. Ich kann dann FavColor sagen und es gibt mir blau. Jetzt kann ich das ändern und sagen, dass FavColor gleich grün ist. Dann kann ich FavColor sagen und es wird mir grün geben. Ich muss dieses JavaScript nicht im Auge behalten, niemand behält dies im Auge. Was können wir hier speichern oder worauf können wir verweisen? Nun, es gibt ein paar Dinge, auf die wir verweisen können. Der erste ist Text. In JavaScript und den meisten Programmiersprachen nennen Sie es eine Zeichenfolge. Sie können doppelte Anführungszeichen setzen oder einfache Anführungszeichen setzen. Sublime Text ist wirklich cool, denn wenn es nichts gibt und Sie ein Zitat drücken, gibt es normalerweise zwei von ihnen. Wenn ich das tue, gibt es Ihnen zwei, also schreiben Sie Ihren Text und beenden Sie ihn mit einem Semikolon. Nun, ein anderer Typ ist ein Array. Nun, Array ist im Grunde eine Liste. Was Sie hier tun können, ist jede Art von Liste zu behalten. Sie können Text behalten, Sie können Zahlen behalten, Sie können Variablen behalten, Sie können Objekte behalten, Sie können Funktionen behalten, Sie können behalten und speichern und auflisten, was Sie wollen. Zum Beispiel kann ich MyArray sagen oder nennen wir es meine FavColors. Ich kann sagen, blau, rot, grün. Das wird also zu einer Liste. Ich muss dann nicht Lieblingsfarbe Nummer 1, Lieblingsfarbe Nummer 2, Lieblingsfarbe Nummer 3. Ich kann dann sagen, var NumoFFavColors gleich 3. Nun, das ist eine Nummer. Sie sehen, dass ich keine Anführungszeichen habe denn wenn ich es so mache, wäre es jetzt tatsächlich eine Zeichenfolge oder ein Text, aber wir wollen, dass es eine Zahl ist, damit wir mathematische Operationen darauf ausführen können. Der nächste Objekttyp ist ein boolescher Wert. Dies ist ein True oder False oder ein Ja/Nein-Wert. Ich kann entweder wahr sagen, oder ich kann falsch sagen. Es ist im Grunde das gleiche wie Null oder eins zu sagen, Null ist falsch, man ist wahr. Sie können true mit Großbuchstaben sagen und auch true oder false mit Großbuchstaben sagen. Sublime mag es einfach in Kleinbuchstaben, so. Wir haben diese vier Grundtypen. Es gibt noch einen, der ein Objekt ist, das all diese Dinge kombinieren kann. Ein Objekt ist wie ein Array, aber Sie können ihm einen Namen für jedes einzelne Listenelement geben. Ich kann Vorname sagen, und anstatt gleich zu sagen, mache ich einen Doppelpunkt, und dann werde ich Rich sagen. Dann gehe ich Komma, und ich kann Nachname sagen, und ich kann sagen, Armstrong. Dann kann ich FavColors sagen, und ich werde das nur kopieren, und ich kann dort ein Array einfügen. Ich kann sagen, YearsAlive 103, und das ist eine Nummer. Ich kann sagen, IsMale, wahr. Sie können sehen, dass dies alles in einem Objekt ist, das sehr cool ist. Es bedeutet, dass Sie auf alle diese Details mit Punktnotation zugreifen können. Also RichObject.ismale und es wird mir wahr geben. Also lassen Sie uns das kopieren und ich zeige Ihnen, wie es in Google Chrome funktioniert. Lassen Sie uns einfach diese Konsole löschen. Ich werde reiche Objekte sagen, und jetzt möchte ich RichObject.FirstName sagen. Es wird Rich sagen. Das ist sehr cool, weil wir das nicht wissen müssen. Ich kann das jetzt ändern und sagen, dass FirstName gleich Bob ist. Nun, wenn ich nach RichObject.FirstName frage, wird es Bob sein. Also, das sind Variablen auf den Punkt gebracht. 8. Funktionen: In Ordnung. Also, was ist eine Funktion? Nun, eine Funktion ist etwas, das wiederverwendet werden kann. Es ist also ähnlich wie eine Variable und kann tatsächlich in einer Variablen gespeichert werden, oder eine Variable kann sich auf eine Funktion beziehen. Also müssen wir Funktion sagen, geben Sie ihm einen Funktionsnamen, WhatSmyFavColor. Das ist also etwas, das es zu einer Funktion macht, diese zwei Klammern, Klammern, was immer Sie sie nennen möchten. Dann ist das Zeug, das innerhalb der Funktion oder der Methode passiert , innerhalb dieser beiden Klammern oder innerhalb dieser Schließung. Jetzt können wir diese Funktion aufrufen oder so eingeben, und dann können wir es sehr einfach so eingeben, was ich sehr bevorzuge, weil es bedeutet, dass dies nur Variablen anstelle von Variablen und Funktionen benötigt . Aber es ist etwas anders, weil es diese Klammern hat. Also, was ist meine Lieblingsfarbe? In Ordnung. Das ist also eine Frage und Sie möchten, dass es etwas zurückgibt. Also werde ich das kopieren und sagen, „DoSomething“. In Ordnung. Nun, DoSomething könnte eine console.log tun etwas. In Ordnung. Nun, wenn wir das kopieren und wir in Chrome, und jetzt sage ich einfach Einfügen, jetzt I Enter, und jetzt sage ich etwas ohne die Klammern tun, es wird sagen,, cool, da ist die Funktion, auf die Sie sich beziehen. Aber wenn ich „DoSomething“ sage und diese Klammern danach setze, wird es einloggen, es wird etwas tun. ist also wirklich wichtig, diese Klammern nach einer Funktion zu setzen , besonders wenn Sie sie aufrufen möchten oder nur, wenn Sie sie aufrufen oder aufrufen möchten. Nun, was ist meine Lieblingsfarbe? Nun, ich möchte wissen, was meine Lieblingsfarbe ist, also hier können wir tatsächlich sagen, Rückkehr blau. Wenn ich also fragen möchte, was meine Lieblingsfarbe ist, und ich eine ganze Reihe von Code und Logik in diese Funktion einfügen kann, um zu bestimmen, was es ist, möchte ich, dass es blau zurückgibt. Ich will nicht nur, dass es etwas protokolliert oder etwas tut, ich will es bekommen. Das ist also ziemlich cool, weil es ähnlich wie eine eingebaute Funktion ist. Ich werde nur versuchen, das zu klären. Also, wenn Sie Math.round sagen und Sie ihm einen Wert von 4.568 geben, wird es Ihnen fünf geben. Du willst nicht, dass es etwas tut und es dir nicht sagt. Also, wenn ich WhatSmyFavColor einfüge, werde ich sagen, WhatisMyFavColor, und es wird blau sagen. Fantastisch. Während dieses andere, dieses DoSomething, werden Sie sehen, dass es undefiniert zurückgibt. Es gibt uns gar nichts zurück, es tut nur Dinge. Es gibt also zwei verschiedene Arten von Funktionen. Sie können auch true zurückgeben, Sie können Arrays zurückgeben, Sie können alles zurückgeben, was Sie wollen. Aber wenn Sie etwas zurückgeben, es nicht zurück oder kommt zu etwas anderem, es stoppt buchstäblich diese Funktion direkt dort. Wenn wir das also kopieren, lassen Sie uns einfach diese Konsole löschen und einfügen, wenn ich jetzt WhatSmyFavColor sage, wird es falsch sagen. Siehst du, dass es nichts anderes zurückgibt. Das ist also ziemlich wichtig, sich daran zu erinnern, dass alles nach der Rückkehr nicht wirklich läuft. Jetzt gibt es noch eine Sache, die ich Ihnen über Funktionen zeigen muss. Also, wenn wir etwas tun wollten, wie die Gegend kennen, so in diesen Klammern, können wir tatsächlich sagen, gut, Breite und Höhe. Dann können wir sagen, Rückgabebreite multipliziert mit der Höhe, und Sie können sehen, dass ich hier etwas Mathematik mache. Also, wenn wir das kopieren und die Konsole löschen, fügen Sie es ein, und ich sage Bereich, keine Zahl. Es ist wie, was ist los? Wenn ich jetzt fünf und vier einsteige, da gehen wir, wird es mir 20 geben. So können wir dies wieder tun und sagen, var fullname gleich Funktion, und hier können wir Vorname, second name sagen. So können wir dann Vorname plus Zweitname zurückgeben, aber wir können ein Leerzeichen dazwischen setzen. Sie können hier sehen, dass diese auch fast wie Variablen sind, außer dass sie Parameter sind. Also dieser Vorname, obwohl wir nicht wissen, was es ist, wird mit Secondname mit einem Leerzeichen dazwischen kombiniert. Also, wenn wir das kopieren und einfügen, und dann sagen wir Fullname und wir übergeben Rich, und es will jetzt Strings, wird es mit Rich Armstrong zurückkommen. Wenn wir Rich und Armstrong so sagen, wird es sagen, nun, was ist wirklich los? Das ist ziemlich wichtig, aber was wir hier tun könnten, ist zu sagen, var myName ist gleich Richard. Dann können wir Fullname sagen und wir können MyName kopieren und einen Scheck setzen, weil dies jetzt auf Richard bezieht. Wenn wir die Eingabetaste drücken, nachdem ich diese zu einer Schnur gemacht habe, können Sie sehen, dass sie mit Richard Armstrong zurückkommt. In Ordnung. Das sind also Funktionen auf den Punkt gebracht. Du musst nicht zwei haben, du kannst so viele haben, wie du willst. Manchmal brauchen Sie nur einen, um alles zu tun, was Sie innerhalb der Funktion tun müssen. Denken Sie daran, Sie können Dinge mit diesen Funktionen zurückgeben, so dass sie wirklich nützlich werden, und Sie können einfach Dinge mit ihnen machen, ohne zurückzukehren. 9. Die If-else-Anweisung: Jetzt möchte ich Ihnen sagen, was eine IF-Anweisung ist. Grundsätzlich können wir sagen, wenn etwas, dann tun Sie etwas. Wenn das, was in diesen Klammern steht, wahr ist, dann tun Sie etwas. Was ich sagen werde, ist nur ein alarmierter Mann. Nun, wenn wahr, alarmiert Männchen. Ich kopiere das einfach und füge es ein, männlich. Es ist wahr, weil wir nur explizit sagen, dass das wahr ist. Aber jetzt wollen wir das tatsächlich ein bisschen dynamischer machen. Wir können sagen, wenn männlich gleich ist, gleich männlich, alarmiert männlich. Männlich, fantastisch. Aber das ist vielleicht ein bisschen obskur für dich. Warum nicht einfach eins gleich verwenden? Nun, weil man gleich einen Wert zuweist. Es wird einfach nicht funktionieren. Wir testen tatsächlich, ob dies wahr oder falsch ist. Es ist eine Vergleichsaussage. Wir können sagen, Dinge wie eins ist gleich zwei, was Sie eindeutig falsch sagen würden. Großartig. Gut gemacht. Aber wenn wir sagen, dass man gleich eins ist, ist es wahr. Oder wir können sagen, 10 ist größer als eins, wahr. Oder wir können sagen, 10 ist kleiner als eins, falsch. Wir können auch sagen, 10 ist größer als oder gleich eins, was wahr ist. Oder wir können sagen, 10 ist kleiner als oder gleich eins, falsch. Diese werden sehr mächtig, wenn sie mit Variablen kombiniert werden. Wir können sagen, Nummer 1 entspricht einer Zahl, und Nummer 2 ist eine andere Zahl. Wir können das mit Strings machen, wir können das mit Arrays machen, wir können jede Art von Sache hier drinnen machen. Denken Sie daran, unsere Funktionen, können sie auch wahr oder falsch zurückgeben. Hier sind wir auf der Suche nach einem wahren oder falschen Wert. Wir können sagen, Nummer 1 ist größer als Nummer 2. Wenn wir nun all dies mit den enthaltenen Variablen kopieren und einfügen, ist nichts passiert, weil Nummer 1 nicht größer ist als Nummer 2. Aber wenn wir das tun, können wir jetzt die Vars rausnehmen, weil sie schon da sind und männlich sagen. Vielleicht sollten wir nicht männlich sagen, männlich, wir sollten einfach sagen, wahr. Es funktioniert nicht, aber das funktioniert. Wir können sagen, wenn etwas passiert, wenn das stimmt, führen Sie das Zeug hier aus, was großartig ist. Aber jetzt können wir auch sagen, sonst. Wenn das nicht wahr ist, dann alarmieren Sie das. Wir werden hier etwas tun. Wenn Sie immer eine Aktion ausführen möchten, sei es wahr oder falsch, ist es toll, eine if-else-Anweisung zu verwenden. Aber jetzt ist dies ein Standard. Mit Zahlen ist es in Ordnung. Aber jetzt, wenn wir sagen wollten, Name 1 ist reich und Name 2 ist Bob. Wenn Name 1 gleich Rich ist, Alarme true, else-if, name 2 gleich Rich, alert true, else, alert false. Lassen Sie uns das klar machen. Wenn Name 1 reich ist, wachsam wahr, und was ich hier tun werde, ist wahr 1 und ich sage wahr 2, nur damit wir wissen, welcher ist was. Ich kopiere das einfach und füge es für weitere Referenz ein. Wahre 1. Das haben wir erwartet. Wenn wir jetzt den Namen 1 in Gareth ändern müssen, und dann mussten wir das erneut ausführen, ist es falsch. Denn jetzt ist Name 1 Gareth. Name 1 sei reich, und Name 2 ist nicht reich. Jetzt können wir sagen, dass Name 2 gleich Rich und voila ist. Wenn wir dann sagen, dass IF-Aussage wieder, ist es wahr. Fantastisch. Jetzt können wir sagen, ob, und else-if, und sonst. Wir können sagen, wenn das wahr ist, tun Sie dies, else-wenn, das ist wahr, tun Sie dies, sonst, als Standard, tun Sie dies, was großartig ist. Nun eine andere tolle Sache mit IF-Anweisungen ist, dass Sie sagen können und, oder Sie können sagen oder. Man könnte sagen, Name 1 ist reich und Name 2 gleich Bob. Was wir hier tun, ist, dass das wahr sein muss und das muss wahr sein. Was wir mit diesem sagen, dieses oder, ist ziemlich schwer zu erinnern, ist, dass wir sagen, ob das wahr ist, oder das wahr ist, dann machen Sie weiter. Dies sind if-else-Anweisungen. 10. Schreibe etwas grundlegendes mit JavaScript: Lassen Sie uns in js-rocket Ordner zu unserer Sublime Text App ziehen, und lassen Sie uns genau das gleiche tun, um Chrome, außer lassen Sie uns öffnen index.html. Da gehen wir. Es ist ziemlich genau dort, wo wir das letzte Mal aufgehört haben und jetzt fangen wir an, etwas JavaScript zu schreiben. Wir haben das Skript-Tag, das in unseren HTML passen soll. Sie sehen, was Sublime Text tut, es ist erstaunlich. Es vervollständigt einfach automatisch Sachen für Sie. Ich werde das schneiden und ich werde es nur in das Head-Tag hier einfügen und es ein wenig einrücken und der HTML-Seite einen Titel von JS Rocket geben. Ich werde es speichern, nachdem ich hallo js Rakete in den Körper gesetzt habe, und wir können das in ein h1-Tag setzen. Lassen Sie uns das einrücken, und jetzt speichern. Wo wir das letzte Mal aufgehört haben, inspizierten wir die Seite und in unserer Konsolen-Tab hier, wir können sehen, dass es sagte, hallo dort Freunde. Das ist wirklich cool, weil es bedeutet, dass wir kommunizieren und sehen können , was vor sich geht, obwohl der Benutzer das nicht sieht. Wenn wir nochmal inspizieren, sehen wir das, hallo dort Freunde. Dies liegt daran, dass Sie console.log schreiben. Lassen Sie uns einfach anfangen, etwas JavaScript zu schreiben, und ich werde Dinge erklären, wie ich gehe. Was ich tun möchte, ist, dass ich mein eigenes Objekt erstellen möchte. Ich möchte Var Auto sagen. Wenn ich var sage, ist es eine Variable, ist etwas, das sich ändern kann. Auto ist ein Objekt. Nun dieses Objekt, wir werden gleich sagen, geben Sie ihm einen Namen namens Auto entspricht einem Objekt. Das ist eine sehr seltsame Sache. Lassen Sie uns „Enter“ drücken und hier drinnen werden wir ihm einige Eigenschaften geben. Ich werde sagen, Make, und ich werde VW sagen. Dann sage ich „Typ“, und ich werde Polo sagen. Es ist ein VW Polo, und ich kann sagen Farbe: blau. Ich habe eigentlich einen blauen VW Polo. Da gehen wir, wir beginnen mit drei Eigenschaften. Mein Auto ist ein Objekt. Sie kennzeichnen ein Objekt mit diesen geschweiften Klammern, und dann haben Sie eine Eigenschaft und einen Wert, Schlüsselwert. Was wir auch hier tun können, ist, dass Sie sehen können, dass dies nur Text sind. Was wir dann tun können, ist, dass wir sagen können, welche anderen Arten von Eigenschaften haben wir? Isturnedon, wahr, oder wir können falsch sagen. Sie können hier sehen, dass dies ein Ja-Nein-Wert ist, ein wahr-falsch-Wert. Dies wird als Boolean bezeichnet, so ein seltsamer Name. Es ist nach jemandem benannt. Die andere Sache, die wir haben können, ist eine Zahl, also NumberOfWheels. Das war eine gute Pfeife, NumberOfWheels und vier. Sie können sehen, dass es sich nicht um Text handelt, das sind tatsächlich Zahlen. Dann können wir Sitze sagen. Dann können wir hier tatsächlich Platz 1, Sitzplatz 2, Sitzplatz 3 und Sitzplatz 4 haben . Sie können sehen, dass dies tatsächlich noch Text sind und JavaScript ist nicht wertvoll darüber, wie Sie dies auslegen. Oh, ist nicht zu kostbar, sollte ich sagen. Aber lassen Sie es uns einfacher zu lesen und lassen Sie es uns einrücken. Sie können sehen, dass ich Kommas nach jedem Satz von Schlüsselwertpaaren setze. Das ist wirklich eine gute Praxis. Das ist mein Auto, im Moment werde ich nur das retten. Dann werde ich in Google Chrome gehen, hier aktualisieren, und ich werde sehen, ob Auto hier ist. Das Auto ist hier. Wir können sehen, dass, es ist Farbe blau, isturnedon falsch, machen VW, NumberOfWheels vier, Sitze, es ist ein Array. Ein Array ist eigentlich eine Liste. Hier gehen wir, tippen Sie Polo. Wir haben noch ein paar andere Dinge hier drin. Sie können sehen, dass Sitze eine Eigenschaft der Länge hat und es ist vier. Wir gehen Auto.seats. Sie können sehen, dass es uns eine Reihe von Sitzen oder die Liste der Sitze zurückgibt. Wenn ich in der Konsole nach oben drücke und ich gehe car.seats.length, heißt es vier. Sie können hier sehen, dass, wow, car.seats, es ist eine Eigenschaft. Gibt mir einen Haufen Zeug. Auto.Seats.Length, ich mache eigentlich Punktnotation, ich gehe weiter und weiter nach unten, aber Auto ist immer noch das, was ich beziehe. Ich werde nicht sitzen. Länge, denn wenn ich Sitze gehe, wird es sagen, ah, Klappe. Sitze sind nicht hier. Lassen Sie uns nun eine Methode erstellen. In diesem Auto können wir dann TurnOn sagen, und wir werden es eine Funktion nennen. Jetzt ist dies eine Methode und so schreiben Sie es. Wir könnten hier einen Wert übergeben, aber wir kommen gerade dazu. Aber im Grunde, was das tut, ist, kann ich sagen, isturnedon ist wahr oder falsch. Wir werden sagen, kopieren Sie das, und ich werde sagen, diese.Isturnedon ist wahr. So schreiben wir es. Diese Funktion oder diese Eigenschaft ist tatsächlich eine Methode, die alle Methoden wirklich sind, aber diese Eigenschaft ist eine Funktion, es ist eine Methode. Wir werden das sagen, und das bezieht sich auf das Auto, Isturnedon, das dieser Typ hier ist, ist wahr. Du siehst, dass es falsch ist, anfänglich. Lasst uns das retten. Lassen Sie uns auffrischen. Auto. Isturnedon, falsch. Nun sagen wir Car.turnon, und jetzt können wir das nicht einfach tun, weil es sagt, cool, da ist die Funktion. Das ist es, was es ist. Was wir tun müssen, ist sagen Car.Turnon und dann setzen Sie diese Klammern nach ihm zu sagen, tun Sie das. Es steht, undefiniert. Aber das ist, weil es uns nichts zurückgibt, und ich zeige dir, wie es etwas zurückgibt. Aber jetzt, was wir tun können, ist sagen Auto.Isturnedon, es ist wahr. Sie können sehen, was hier passiert ist. Sie haben etwas getan, Sie haben es eingeschaltet und es hat die Eigenschaft geändert, ohne dass Sie es ändern müssen. Sie könnten sagen, wenn der Benutzer auf diese Schaltfläche klickt, etwas tun, etwas ändern. Ein weiteres Beispiel dafür ist, lassen Sie uns eine andere Funktion schreiben. Sagen wir, fliegen. Wir könnten sagen, Alarmfliege. Sie können hier sehen, dass, wenn wir fliegen sagen, es ist nicht nur eine normale Funktion, du übergibt etwas in sie. Sie werden sehen, was hier passiert. Wir sagen „Speichern“. Gehen wir zurück zu Google Chrome, aktualisieren, und wir können sagen, car.isturnedon, es ist falsch. Aber warum? Nun, es liegt daran, dass wir die Seite aktualisiert haben. Wenn Sie die Seite aktualisieren, beginnt alles andere von Anfang an, und wir beginnen bei false. Was ich wirklich versucht habe, dir hier zu zeigen, ist Car.fly. Da es sich um eine Methode handelt und wir diese Methode ausführen wollten, setzen wir diese Klammern danach. Es kommt mit dieser kleinen irritierenden Box, die sagt, fliegen. Was wirklich cool ist, ist, dass wir sagen können, nun, können wir das tun? Versuchen wir es, und lassen Sie uns eine neue Eigenschaft erstellen, die eine Methode namens switch ist. Switch ist eigentlich ein reserviertes Wort. Gehen wir SwitchCar, Funktion, Klammern und geschweifte Klammern, und dann werden wir einen Parameter setzen, iSon. Wir sagten SwitchCar. Wir können sagen, wenn , wir kopieren das, gleich wahr ist. Wenn wir nur eins gleich verwenden, sagen wir tatsächlich, iSon ist wahr, was nicht ist. Wir sagen, wenn iSon wahr ist, also stellen wir eine Frage, dann werden wir etwas tun. Ich werde das hier kopieren, und dann werde ich sonst sagen, falsch. Wenn ich SwitchCar sagen werde, werde ich dies sagen, ISon ist wahr, und sagen, diese isturnedon ist wahr, sonst, wenn es nicht falsch ist, und ich werde sagen, dass diese isturnedon gleich falsch ist. Das ist ein bisschen Logik für Sie. Sie können beginnen, verschiedene Dinge zu tun, basierend auf dem, was Sie passieren. Lass uns retten gehen. Lass uns einfach console.log gehen, und hier drüben werde ich sagen, Auto drehen. Ich werde hier einen Platz setzen und dann sage ich plus iSon. Was das tut, ist es geht, ich werde „Auto drehen“ anmelden und dann werde ich auf iSon zu diesem Stück Text hinzufügen . Lasst uns das retten. Google Chrome zu aktualisieren und lassen Sie uns das Auto.Isturnedon ist falsch. Ich kann sagen, Auto.Switchcar und wir können wahr sagen. Drehen Sie das Auto, wahr. Jetzt können wir sagen, Auto isturnedon und es ist wahr. Wir können sagen, Auto.Switchcar, falsche Turn-Auto, falsch. Dann sagen wir Auto isturnedon, es ist falsch. Dort können wir tatsächlich durch eine Reihe von Argumenten setzen und Sie können jedes Mal sehen , wenn die Konsole dreht Auto falsch oder drehen Auto wahr, es geht und ändern, was es tut basierend auf dem, was wir es analysieren. Wir können in wahr oder falsch analysieren oder wir könnten in eine Reihe von anderen Dingen analysieren, aber wir gehen, wenn es wahr ist, tun Sie dies, sonst, tun Sie das. Das ist wirklich mächtig. Sie können beginnen, verschiedene Dinge in eine Funktion zu setzen und verschiedene Dinge zu bekommen, je nachdem, was Sie in setzen. Wir haben hier nicht viel JavaScript. Ich habe nicht viel HTML. Wir haben hier einiges JavaScript. Wenn das wirklich heftig, viel und viel HTML wird , wollen wir hier nicht unser JavaScript schreiben müssen. Das Beste, was wir tun können, ist buchstäblich all das zu schneiden. Dann, anstatt all das zu haben, gehen wir buchstäblich quals und dann gehen wir js, script.js und speichern das. Was wir hier in unserem Finder tun müssen, ist, dass wir einen neuen Ordner namens js erstellen müssen. Innerhalb Sublime Text, müssen wir gehen Datei, Neue Datei, und einfügen. Lassen Sie es uns hier nochmals einrücken. Wenn es dann nicht automatisch aufnimmt, was es wahrscheinlich nicht wird, weil es unbetitelt ist, können Sie es immer in JavaScript ändern. Sie können sehen, dass die Farben zurückkommen. Speichern wir es jetzt und speichern Sie es als script.js. Speichern und dann mal sehen, ob es funktioniert. Hallo, Freunde. Auto isturnedon falsch, SwitchCar zu wahr. Fantastische isturnedon wahr. Jetzt können wir auch Auto TurnOn verwenden und das kann immer noch wahr sein. Da haben Sie es, wir haben jetzt unser JavaScript in einer separaten Datei. Genau wie wir unsere Bilder in eine separate Datei legen, so wie wir unser CSS in eine separate Datei, sorry, separate Ordner. Wir haben unser JavaScript in einem separaten Ordner, denke ich, und in einer separaten Datei. Jetzt haben wir unseren HTML. Wir verweisen auf unsere JavaScripts hier. Wenn wir auf unser CSS verweisen wollten, würden wir sagen, cool, lass uns „css/style.css“ gehen und Sie können sehen, dass es etwas anders ist. Ihr JavaScript-Tag sieht ein wenig wie ein Bild-Tag aus und Ihr CSS-Tag sieht wirklich anders aus und es hat diese href, aber es ist ziemlich dasselbe. Wir haben derzeit keinen CSS-Ordner, also lassen Sie uns einen erstellen. In Ihrem CSS-Ordner können Sie eine neue Datei erstellen. Wir sagen nur Körper und sagen Hintergrundfarbe, grau. Speichern Sie diese in CSS als style.css. Wenn Sie jemals eines dieser Pop-ups bekommen, sagen Sie einfach abbrechen. Kaufen Sie keinen Sublime Text. Ich habe eine Lizenz, aber nicht auf dem Bildschirm Casting-Profil. Speichern wir es und index.html, und lassen Sie uns diese speichern. Dann gehen Sie zurück zu Google Chrome, aktualisieren, und jetzt haben Sie CSS arbeiten und JavaScript arbeiten. Aber jetzt möchte ich einige Benutzerinteraktion. Denken Sie daran, dass der Benutzer nicht auf all dies über seine Konsole zugreifen kann. Lass uns jetzt etwas Spaß haben. Wenn wir hier einen Link erstellen und seine href auf Hash setzen lassen, und ich werde Ihnen zeigen, warum dies wichtig ist. Klicken Sie auf Me, File Save. Aktualisieren. Wenn wir Click Me gehen, können Sie sehen, dass es nur diesen Hash auf. Es wird nicht die gesamte Seite aktualisiert. Das ist wirklich wichtig und es kann Ihnen viele Kopfschmerzen ersparen. Das nächste, was wir tun wollen, ist zu href gehen. Cool, das ist es. Aber was ist mit Klick? Lass uns etwas tun. Vielleicht können wir Car.fly sagen. Das ist ziemlich interessant, wir betreiben JavaScript in HTML. Lassen Sie uns onclick Attribut. Was zum Teufel ist das? Nun, es gibt eine Reihe von denen, die sich auf JavaScript beziehen. Lasst uns das retten. Mal sehen, ob es funktioniert. Klicken Sie auf mich. Das sind im Grunde JavaScripts. Sie können so ziemlich eine ganze Website einrichten. Sie haben Ihr Skript, das ein Auto hat und es hat diese Methode des Fliegens. Wenn du es nennst, warnt es fliegen. Nun, was wir tun können, so gut wir sagen können, SwitchCar zu etwas. Vielleicht haben wir kein Auto zum Fliegen, wir können sagen: „SwitchCar, wahr.“ Wir können es einschalten. Lasst uns speichern. Gehen wir zurück. Nun, wenn wir sehen, ist Auto TurneDon falsch, Klicken Sie mich, Auto isturnedon, wahr. Jetzt können Sie sehen, dass, wenn Sie auf der Schnittstelle interagieren, Dinge tatsächlich beginnt sich zu ändern, wo Sie es nicht sehen können. Sie können Dinge auftauchen lassen, Sie können Farben ändern, Sie können Dinge animieren. Viel Spaß hier und versuchen Dinge, Experimente. Es ist eine wirklich schöne Art, Dinge zu tun. Sie können sogar Dinge schreiben, die nicht mit Auto-Punkt. Sie könnten etwas wie var schreiben und Sie können einfach eine Funktion wie SayMyName gleich der Funktionmachen wie SayMyName gleich der Funktion und dann hier können Sie Name sagen und Sie können Konsole sagen oder vielleicht möchten Sie sagen, Alarm: „Mein Name ist plus Name.“ Datei speichern. Was für jeden Text wirklich wichtig ist und in JavaScript nennen wir sie eine Zeichenfolge, wir verwenden umgekehrte Kommas, also doppelte Anführungszeichen oder einfache Anführungszeichen. Stellen Sie sicher, dass sie auf beiden Seiten gleich sind. SayMyName. Wenn wir das kopieren und hier hineinlegen, SayMyName und ich „Rich“ dort reinlegen. Sei hier nur vorsichtig. Wenn Sie hier doppelte Anführungszeichen verwenden, verwenden Sie hier einfache Anführungszeichen, wenn Sie hier einfache Anführungszeichen verwenden, doppelte Anführungszeichen verwenden. Speichern Sie das. Klicken Sie auf mich. Mein Name ist Rich. Da gehen wir. Viel Spaß, machen Sie erstaunliche Sachen. Aber jetzt, wenn Sie das dann mit Ihren Freunden teilen möchten, und ich ermutige Sie wirklich, in der Projekt-Galerie zu teilen, nur um zu zeigen, was Sie getan haben, und Sie können auch Fragen stellen. Wenn die Dinge nicht funktionieren, posten Sie es, setzen Sie auf GitHub, posten Sie einen Link und sagen „Reich, ich stecke fest, es funktioniert nicht.“ Dann kann ich hier reingehen und sagen: „Sieht so aus, als gäbe es Fehler.“ Ich kann dir deinen Code ansehen und sagen: „Das funktioniert nicht.“ Andere Menschen können das auch tun. GitHub Desktop einfach Ihre Änderungen, sagen Sie: „Es hat einige Autosachen geschehen lassen.“ Commit zu gh-Pages. Stellt sicher, dass es auf gh-Seiten und nicht master-gh-Seiten ist. Cool. Dann synchronisieren Sie. Während das synchronisiert wird, gehen wir zu github.com. Hier wollen wir nur zu unserem JS-Raketen-Repository navigieren und unsere Commits betrachten. Gehen Sie zum gh-pages Zweig. Ich habe ein paar Autosachen passieren lassen. Lassen Sie uns einen neuen Tab öffnen, und wir gehen zu Ihrem Bildschirmnamen oder Ihrem Benutzername.github.io/js-rocket. Sie können sehen, dass sich die Dinge verändert. Klicken Sie auf Me, mein Name ist Rich. Wenn Sie hier inspizieren und zu Ihrer Konsole gehen, können Sie Auto fahren. Wenn Sie die Eingabetaste drücken, sehen Sie eine Menge Dinge, die Ihr Auto tun kann. Fantastisch. Teilen Sie Ihre Projekte. 11. Fange an, mit CSS und JS herumzuspielen!!: Ja. Aber Rich, ich möchte nicht nur Text kommen und auftauchen und Text in der Konsole schreiben. Ich will, dass ein paar coole Sachen passieren. Dann zeig ich dir ein paar coole Sachen. Onclick, sagen wir DoCoolStuff. Wie wär's damit? Dann werden wir in ein div setzen, und es wird eine Klasse von cool haben. Darin wird es einige Texte wie „Hallo, ich bin cool.“ Lassen Sie uns das einrücken. Jetzt sehen Sie, was hier passiert, und stellen Sie sicher, dass Sie auf Ihrem lokalen Host sind, dass, wenn Sie sagen, klicken Sie auf mich, es heißt: „Etwas funktioniert nicht.“ Es ist wirklich cool, Ihre Konsole geöffnet zu haben, weil sie Ihnen sagt, wenn es Fehler gibt. Es kann Ihnen auch einen Fehler sagen. Wenn Sie dort klicken, und es wird sagen: „Hier ist der Fehler, bitte helfen Sie mir.“ Hallo, ich bin cool! Großartig. Was wir hier tun wollen, ist, dass wir dieses coole Element nur ein wenig stylen wollen. Ich werde das nur kopieren, ich muss es stylen. Ich werde ihm eine Breite von 100 Pixeln geben. Ich werde ihm eine Höhe von 100 Pixeln geben, und dann werde ich ihm eine Hintergrundfarbe von Grün geben. Dann werde ich sagen.cool.red, Hintergrundfarbe rot, und dann werde ich einen Übergang setzen. Lassen Sie das herausklopfen. Übergang der Hintergrundfarbe, werde ich sagen, machen wir es zu 1.000 Millisekunden. Na ja, vielleicht nur eine Sekunde. Lasst uns das retten. Was wir hier sehen können, ist cool, grün. Aber wenn du diesen Kerl inspizierst und ihn machst, was ist, wenn ich rot sage. Hast du das gesehen? Nun, da ist ein paar coole Sachen passiert. Ich gehe nur Apfel Zed und Apfel verschieben, um die Klasse zu ändern. Wenn ich das zurück zu nur cool ändere, wirst du sagen, es ändert sich zu grün. Das ist es, was wir machen werden. Ich klicke auf „Click Me“ -Taste jetzt tun. Es gibt ein paar Möglichkeiten, dies zu tun. Eine der einfachsten Möglichkeiten ist es, diesem eine ID von etwas Einzigartigem zu geben, und wir werden es nur cool nennen, dann Speichern. Ich werde das kopieren. Dann hier drinnen werde ich Var sagen. Wie habe ich es genannt? DoCoolStuff, und es wird eine Funktion. Hier drüben werde ich document.getElementById sagen. Ich werde das da reinlegen. Das Dokument ist Ihre Hauptsache, wie das Fenster, das Dokument. Ich denke, es ist wichtiger, oder vielleicht nicht. Aber jetzt spielt es keine Rolle. Seit einem Dokument getElementById.cool, und jetzt werden wir den Klassennamen ändern. Ein document.getElementById.ClassName entspricht cool und rot, kühl rot. Wir können die Verpackung ändern, denke ich irgendwo. Sublime Text, lassen Sie uns die Einstellungen ändern Standard. Ich werde nur nach Wrap suchen. Word_wrap auto, Dateien, Voreinstellungen, Einstellung-Benutzer, word_ wrap. Sie können sehen, dass selbst in Sublime es JavaScript ist, überprüfen Sie dies. Word_wrap, true, Speichern Sie das. ClassName ist gleich kühles Rot. Speichern wir das, und wir können die Standardwerte schließen. Fantastisch. Gehen wir in Google Chrome, Aktualisieren, Klicken Sie auf mich. Whoa, hast du das gesehen? Dinge wurden einfach echt. Das ist echt cool. Du kannst jetzt coole Sachen machen. Ein paar andere Dinge, die ich Ihnen nur zeigen möchte, ist zu gehen, wenn Sie einen Kommentar machen wollen, so machen Sie es. Wenn Sie es in mehreren Zeilen tun möchten, tun Sie es so. Alles, was dazwischen liegt, wird auskommentiert, der Browser, wenn man es ansieht. Aber es ist sehr hilfreich, wenn man so etwas sagt. Diese Funktion tut dies. Wenn Sie document.getElementById cool sagen, wird der ClassName. Sie können einfach sagen, wie Klassennamen zu ändern. Das ist, dass du Kommentare machst. Die sind ziemlich nett. Nun, was cool wäre, ist, es wieder zu ändern. Jetzt mach cooles Zeug. Was wir tun können, ist, dass var currentClassName dem entspricht. Wir bekommen es nicht wirklich, den ClassName. Wir können sagen, ob currentClassName gleich cool ist. Dann können wir sagen, und wir machen es cool rot, oder wir können sonst sagen Raum, und nennen es einfach cool. Schließen wir das, Datei, Speichern. Wenn es cool ist, ändert sich in kühles Rot. Wenn nicht, änderte es zu kühlen. Die Art und Weise, wie es übergeht, ist seine Übergangshintergrundfarbe. Wir können dies auf zwei Sekunden ändern, und wenn Sie es hinzufügen, wird es übergehen. Super cool. Lassen Sie uns aktualisieren, klicken Sie auf mich. Fantastisch. Es ändert sich in Rot. Klicken Sie erneut auf Me, hat es sich geändert? Nein, hat es nicht. Ich frage mich, warum es sich nicht ändert. Los geht's. Wir haben wenn sonst Aussagen, aber dann haben wir es hier unten, wir schicken es sowieso nur in kühles Rot. Ich werde das einfach entfernen. Speichern wir es nochmals. Aktualisieren, Klicken Sie auf mich. Geht zu rot, großartig. Klicken Sie auf Me, geht wieder grün, und Sie können sehen, was hier passiert. Der Klassenname ändert sich. Jetzt können Sie Klassen mit JavaScript ändern, an dem wir uns befinden, und diese Klausel kann einfach unglaubliche Mengen an Dingen tun. Es kann die Größe ändern, es kann Ihre Kapazität ändern, es kann sich drehen. Es kann verrückte Dinge machen. Du gehst von links nach rechts. Es kann angezeigt werden, und dann kann es sich verstecken. Es ist einfach lächerlich. Sieh dir das einfach an. Wir können sagen, okay cool. Lassen Sie uns eine Anzeige von keiner setzen. Cool. Block anzeigen Cool. Lasst uns das retten. Mal sehen, was passiert. Es ist weg. Es ist da. Es ist weg. Es ist da. Es ist ziemlich cool. Sie können sehen, dass es nicht übergeht, und das liegt daran, dass es nur Block anzeigt und keinen anzeigt. Was wir dort tun können, ist, dass wir die Sichtbarkeit auf ausgeblendet und dann die Sichtbarkeit auf sichtbar einstellen können . Lass uns das speichern, und dann ziemlich cool. So kannst du ein paar ziemlich coole Sachen machen. Aber als nächstes ist es Zeit, unsere Rakete und unsere Raketenstart-Sequenz zu bauen . Ich bin aufgeregt. 12. Planung zuerst :): Was ich gerne tun würde, ist nur ein bisschen Planung zu machen. Ich möchte eine Raketenstartsequenz mit JavaScript erstellen. Grundsätzlich möchte ich, dass die Rakete von dort aus geht, wenn der Benutzer auf den Knopf klickt, die Rakete in die Luft schleudert, und es wird ein bisschen Flammen darunter und es geht. Also, was ich mache, ist, wie ein bisschen ein Storyboard zu erstellen. Grundsätzlich starten Sie hier von vorne, die Raketen auf der rechten Seite und die Schnittstelle auf der linken Seite, dann klicken sie auf „Go“ und dann beginnt es zu zählen. Es gibt einen Abbruch-Link oder Abbruch-Button, um den Benutzer zurück zur ersten Stufe zu bringen. Die Rakete ist immer noch ziemlich stationär. Dann wird es auf Null und es steht Liftoff. Die Raketen bekommen einige Flammen darunter und beginnen zu starten, und irgendwann steht es: „Gut gemacht. und bietet mir eine Chance, es wieder zu tun. Die Rakete über diese Etappe kreuzt, sie ist aus der Atmosphäre. Es geht so gut. Es besteht keine Chance auf Scheitern. Aber dazwischen könnte etwas schief gehen. Es könnte eine Explosion geben, es könnte alle möglichen Sachen passieren. Wieder, wir müssen es wieder tun. Dieser Knopf bringt uns dann zurück wie bei diesem einen den ganzen Weg, um es wieder zu tun. Alles klar, und das ist meine Planung. 13. Lass uns das grundlegende HTML und CSS für unsere Rakete schreiben: Jetzt, da wir wissen, wie wir wollen, dass unsere Raketenstart-Sequenz läuft, öffnen wir das Projekt und ziehen es in erhabenen Text. Nun, was ich tun werde, ist eine neue Datei zu erstellen, oder Datei neu, und dann werde ich es als rocket.html speichern. Ich werde es im JS-Rocket Ordner speichern. Rocket.html, und sie werden hier schnell etwas HTML eingeben. Fantastisch. Dann sagen wir Raketenstart Sequenz. Ich hoffe, das ist, wie Sie die Reihenfolge buchstabieren. Aber es ist nicht das, was wir hier tun. Wir machen keine Rechtschreibstunde, wir machen eine JavaScript-Klasse. Nun, was ich hier tun werde, ist, dass ich anfangen werde, mein HTML für diese Raketensequenz zu schreiben. Ich habe im Grunde zwei Divs. Einer ist auf der linken Seite, einer auf der rechten Seite. Ich rufe das hier links an, und ich rufe die nächste rechts an. Lassen Sie uns diesem auch ein wenig Platz geben. Dann wird die linke wird verschiedene Mengen von verschiedenen divs sein, und auf der rechten Seite wird eine Rakete und vielleicht etwas Boden sein. Was wir tun werden, ist, dass wir sagen, lasst uns div mit einer Klasse von Raketen gehen. Dann hier drüben sagen wir div mit einer Klasse von state1. Ich werde das Div schließen. Jetzt hier drinnen werde ich ihm eine Überschrift 1 geben und JS Rocket Launch sagen. Dann werden wir einen Knopf haben, href, sagen Launch. Ich werde ihm eine Klasse von Button geben, und was ich hier tun werde, ist, dass ich auf Klick Start Countdown sagen werde auf Klick . Da gehen wir. Wir haben unseren ersten Zustand 1, und mal sehen, wie das aussieht. Ich werde das speichern, und ich werde Rakete HTML in Google Chrome öffnen , klicken Sie auf Starten. Öffnen wir unsere Konsole. Es ist ziemlich schön, es unten zu haben, manchmal an der Seite, das ist auch toll. Aber es beginnt nicht jetzt, auf uns zu zählen. Das ist in Ordnung. Ich werde nur anfangen, diese Seite zu stylen. Ich habe meine Linke, ich habe mein Recht, hier wird meine Rakete sein, hier wird meine Schnittstelle sein. In Ordnung. In meinem CSS muss ich einen CSS-Ordner erstellen, also werde ich meinen href als meinen Link zu CSS/rocket.css setzen. Speichern Sie das, und in meinem CSS werde ich sagen, Datei. Neue Akte, und gehen wir einfach nach links. Ich werde diese rocket.css speichern. Punkt rechts. Wie wird dann der Knopf aussehen? Wie wird dann der andere A aussehen? Wir haben keine anderen As, aber wir wissen, dass sie kommen. Was ich tun möchte, ist, auf der linken Seite, ich möchte diese Position so einstellen, dass sie fixiert wird. Behoben ist genial. Ich zeige dir, was es tut. Ich werde die Hintergrundfarbe auf einstellen, lassen Sie mich nach einer wirklich coolen Hintergrundfarbe suchen. HTML-Hintergrund. Setzen wir es auf Aquamarin. Position fest, und ich werde ihm eine 50 Prozent Breite geben und ich werde sagen Höhe, ich will, dass es 100 Prozent ist. Dann werde ich Top Null sagen, links Null. Dies bedeutet, dass das 50 Prozent der Breite meines Browserfensters sein wird, die Höhe wird 100 Prozent sein. Die Spitze wird Null sein und die linke wird auch Null sein. Lass uns das retten, mal sehen, was passiert. Fantastisch. Da gehen wir. Du siehst, dass ich nicht wirklich so viel scrollen kann, und das passiert, wenn du etwas fixiert feststellst. Also werde ich das einfach kopieren und es in die richtige einfügen. Statt der linken, werde ich das Recht auf Null setzen, so dass es nach rechts bleiben wird. Ich möchte eine andere Farbe für diese eine, also lassen Sie mich diese Farbe ändern. Ich will ein Blau, also wird das Zeichen vielleicht funktionieren. Alice blau sieht schön aus. Also werde ich das in Alice blau ändern und aktualisieren. Sehen Sie, ich habe jetzt meine beiden Panels, links, rechts, Schnittstelle hier, Rakete hier. Die nächste, die ich machen möchte, ist, lasst uns meine Raketen stylen. Ich werde diesen Kerl auf Position fixiert setzen, vielleicht sollte ich sagen, Position absolut. Jetzt ist absolut wirklich cool, weil es geht, wo ist meine Eltern? Also wird die Rakete, die hier ist, hingehen, wo sind meine Eltern? Und es geht richtig, richtig ist meine Eltern. Dann geht es, cool, ich werde mich so positionieren, wo der Kerl ist. Das ist das falsche Stylesheet. Meine Rakete ist in Position absolut, ich werde ihre linke auf 50 Prozent setzen und ich werde ihren Boden auf 20 Pixel setzen. Dann werde ich ihm eine Breite von 20 Pixeln und eine Höhe von 100 Pixeln mit einer Hintergrundfarbe von Blau geben . Weil coole Raketen blau sind. Erfrischen Sie sich, und da ist meine Rakete. Dieser kleine blaue Bleistift. Nun, was ich tun möchte, ist eigentlich, dass ich etwas auf diese Sache legen möchte. Gehen Sie einfach div Klasse von Boden, und ich werde das speichern, und dann mein Stylesheet, und ich werde etwas Erdung setzen. Ich werde sagen, Hintergrundfarbe ist grün, und sagen Position absolut, und dann werde ich sagen unten Null und links Null, und Breite werde ich sagen 100 Prozent, und Höhe, 20 Pixel. Ich werde das retten. Mal sehen, wie das aussieht. Fantastisch. Jetzt haben wir eine abschussfähige Rakete. Wir können es gerade noch besser aussehen lassen, aber das ist eine JavaScript-Lektion, die JavaScript-Klasse. Also sind wir nicht allzu besorgt darüber, wie es aussieht, aber wir können es gerade ziemlich cool aussehen lassen. In Ordnung. Nun, was ich tun möchte, sind die Raketen, und sobald Sie eine Klausel hinzufügen, möchte ich rockets.flying sagen, und ich möchte sagen unten, 1000 Pixel. Ich werde dann einen Übergang auf diese von unten setzen , sagen 1000 Millisekunden. Da gehen wir. Ich werde es retten, also rocket.flying. Dann können wir das hier oben untersuchen. Ich habe den Boden, die Raketen. Wenn wir das fliegen, was passiert, nichts. Weil wir uns nicht erneuert haben. Also lasst uns auffrischen und das noch einmal tun. Fliegen. Hast du die Rakete fliegen gesehen? Vielleicht müssen wir das etwas verlangsamen. Also lassen Sie uns eine zusätzliche Null setzen, File Save. Fliegen. Da gehen wir. Die Rakete flippt fliegen. 14. Lass uns das JavaScript für unsere Rakete hinzufügen: Also, was wir jetzt tun werden, ist, dass wir verschiedene Staaten anbringen müssen, um diese Rakete fliegen zu lassen. Wir werden Launch drücken, wir wollen den Countdown, wenn der Countdown beendet ist, wollen wir sagen, heben Sie ab, wir wollen, dass die Rakete weitergeht und dann wollen wir sagen, gut gemacht, oder wir wollen sagen, fehlschlagen, und versuchen Sie es erneut. Lasst uns das mal ausprobieren. Also haben wir unsere fünf Staaten, die wir hier reinbringen müssen. Ich werde das nur kopieren und einfügen und nur state2 sagen. Ich werde dem einen Countdown geben und es wird bei 10 beginnen. Dann sagen wir Button, StartCountDown und wir können sagen Abort. Wir können sehen, wie das aussieht. Sieht ziemlich ähnlich aus, state1, state2 kommen sie untereinander, also wenn wir hier links nach state1, state2 schauen , kommen sie untereinander. Also wollen wir ein anderes, es heißt „state3“. Wir wollen nicht Countdown, was wir jetzt wollen, ist, dass wir „Abheben“ sagen wollen. Da wird es keine Knöpfe geben. Der nächste, den wir wollen, ist, dass wir einen Zustand4 und das wird sagen, Gut gemacht ohne eine Zusicherung. Anstatt abzubrechen, werden wir sagen, DoitAgain. Dann unser letztes sollte es state5 sein. Ich werde sagen, Oh nein, doitagain, fantastisch. Dann möchte ich nur noch einmal versuchen sagen. Lassen Sie uns diesen Befehl speichern S, steuern S, oder Sie gehen einfach zu Datei, Speichern. Nun, was wir hier haben, ist, dass wir eine Reihe verschiedener Staaten haben, aber ich möchte nur, dass jeder da ist, wenn er dort sein muss. Nicht alle auf einmal da. Also, was ich tun werde, ist hier drin, ich werde sagen.state1 und ich werde nur kopieren dass ein paar Mal 2, 3, 4, 5. Ich werde sagen, Anzeige: keine. Also, was das tun wird, ist, dass es sie nur verstecken wird, bis ich sie brauche. Also Datei, Speichern und da gehen wir. Sie sind weg, bis ich sie brauche. Was ich dann hier tun kann, ist, dass ich sagen kann, wenn die Klasse des Körpers zu etwas anderem ändert, dann können wir anfangen, es zu ändern. Wenn der Körper body.state1 geht, können wir dann state1, display, block sagen . Ich schreibe einfach auf einem, es wird einfacher. Verwendung als state2, state3, state4, state5. Also haben wir state2, state3, state4, state5. 2, 3, 4, 5. Ansonsten können wir sagen, dass alle diese tatsächlich nur anzeigen: keine. Anzeige: keine, Anzeige: keine, Anzeige: keine, Anzeige: keine Anstatt interagieren Display: keine so oft werde ich einfach gehen, alle von ihnen anzeigen: keine. Also speichern Sie es dort. Mal sehen, was passiert. Da ist nichts, was okay ist. Was wir tun müssen, ist, dass wir unsere Körperklasse in Zustand1 ändern müssen. Wir speichern das, wir erfrischen uns, und etwas ist kaputt. Was hier passiert ist, ist, dass Zustand1 Display ist: keine. Das ist also jetzt problematisch. Was wir tun müssen, ist, dass wir darüber nachdenken müssen, wie können wir das tatsächlich ändern? Wir können dies tatsächlich in Körperstate1 ändern. können wir kopieren. Wir sollten das speichern und diesen Körperstate1 ändern. Datei, Speichern. Die Dinge sind zurück, wie sie weg sind. Jetzt können wir gehen. Klasse Körper-Zustand2. Da gehen wir, körper-state3, Lift Off, body-state4 fantastisch, body-state5. Das ist großartig. Aber jetzt denke ich, wow. Diese Zustände also was passiert, wenn diese Klicks nur einen Zustand ändern können? Also kann ich ChangeState auf zwei gehen, klingt ziemlich gut. Die Abbruch-Taste ChangeState zurück zu eins, cool. Tun Sie es noch einmal, ändern Sie den Status zurück zu eins, weil wir zurück zu Zustand1 gehen. Dann tun Sie es erneut, ändern Sie den Status zurück zu eins. Aber wie kommen wir zu den drei? Nun, wir haben noch kein JavaScript geschrieben. So sehen Sie hier denken Sie daran, dass Sie eine Konsole ChangeState ist nicht definiert. Wir haben hier nicht einmal irgendwelche JavaScripts eingefügt. Lassen Sie uns hier etwas JavaScript einfügen. Drehbuch, fantastisch. Was wird die Quelle sein? Die Quelle wird js/rocket.js sein, fantastisch. Jetzt auf unserem JavaScript-Ordner lassen Sie uns zu neuen gehen, speichern wir dies als rocket.js fantastisch. Dann, jetzt können wir es wirklich, ich werde das schließen. Wir können anfangen, mit Dingen zu interagieren, also lasst uns ein paar schnelle JavaScript-Sachen machen. Wir können var gehen changeState ist eine Funktion. Dann können wir sagen, Staat. Was machen wir hier drin? Ich werde das nur retten aber jetzt weiß ich nicht, wie ich das machen soll. Ich möchte die Körperklasse zu allem ändern, was ich sagen werde, lassen Sie uns das suchen, JavaScript, wie man die Körperklasse ändert. Mal sehen, Document.body.ClassName ist gleich was auch immer. Cool. Ich werde das nur kopieren, und ich gehe hierher und füge es ein, document.body.ClassName entspricht body-state1. Ich werde durch Zahlen pausieren. Wenn ich das kopiere, und ich werde sagen: „Cool, ändern wir es in Körperzustand plus Zustand.“ Da gehen wir. Mal sehen, ob das funktioniert. Also Datei, Speichern, Aktualisieren Sie hier, Starten, da gehen wir. Das hat sich gerade vom Staat geändert. Abbruch, zurück zu eins, Start. Fantastisch. Wir haben ein paar Sachen vor sich. Als Nächstes, wie sind wir vom Countdown zum Countdown gekommen? Lass uns das machen. Wenn Staat gleich 2 ist, werden wir anfangen zu zählen. Die Art und Weise, wie wir das tun, ist, dass wir die Countdown-ID haben, also werde ich das einfach kopieren. Ich werde sagen, document.getElementsById ('countdown') .innerHTML. Sieht nicht richtig aus. Was ich hier tun kann, nur um zu testen, ist, dass ich das kopieren werde und hier reingehe und ich werde das einfügen ('countdown') .innerHTML. Da gehen wir. Ich weiß nicht, warum Sublime es nicht aufgenommen hat. InnerHTML ist gleich, und ich wirft vielleicht eine Funktion, aber es ist eigentlich nur eine Eigenschaft, und wir werden sagen, neun. Lass uns das speichern und mal sehen, ob das funktioniert. Wir Aktualisieren hier, wir drücken „Launch“, es geht zu neun. Aber ich möchte tatsächlich Countdown, also was ich tun werde, ist, dass ich einen Timer erstellen werde; var timer gleich null ist. Ich werde es nur auf null setzen, was nichts von der Zwischenzeit bedeutet, nur damit ich weiß, dass ich hier oben einen Timer habe. Also werde ich das kopieren und dann werde ich sagen Timeout gleich setInterval, und dann werde ich eine Funktion hier einfügen. Wir sagen, gehen alle 1.000 Millisekunden. Was das ist, es ist ein Timer. In einem gegebenen Intervall, 1.000 Millisekunden, führt es eine Funktion aus. Es übergibt im Grunde die Zustände oder übergibt den Parameter, außer ich übergebe eine ganze Funktion und ich sage, mach dies alle 1.000 Millisekunden, was eine Sekunde ist. Dann werde ich sagen, document.getElementById innerHTML gleich, und was werde ich jetzt tun? Jetzt werde ich sagen var CountDownNumber gleich 10. Ich werde sagen, gleich CountDownNumber. Dann sagen wir CountDownNumber gleich CountDownNumber minus 1. Das heißt, wenn es das nächste Mal läuft, wird es eins weniger sein. Mal sehen, ob das läuft. Wir aktualisieren hier, Launch. Da gehen wir 10, 9, 8, 7. Siehst du, es gibt eine kleine Verzögerung, aber das ist okay. Dann geht es in Minus. Wir werden das als Nächstes klären. Was ich hier gerne tun würde, ist zu gehen, wenn CountDownNumber kleiner oder gleich Null ist, und dann werden Sie ClearInterval sagen. Ich werde den Timer stoppen. Ich werde dann ChangeState zu drei sagen. Aber jetzt, auch, vielleicht sollte ich das ClearInterval nicht hier setzen, denn was passiert, wenn wir den Timer importieren wollen? Was ich tun werde, ist, dass ich den Timer hier oben stellen werde. Wenn auf dem Timer ein Intervall vorhanden ist, wird es gelöscht. Dann werde ich anders gehen, wenn Staat gleich ist, gleich drei, etwas anderes tun. Aber mal sehen, ob das funktioniert. Nun, es ist gut, 79 schon, dauert lange, um das zu erklären. Wir würden auf „Start“ klicken, 8, 7, 6, 5, 4, 3, 2, 1, heben Sie ab. Cool. Das funktioniert also. Meine Raketen gehen aber nicht hoch, also müssen wir sie [unhörbar] ändern, oder ich kann, also Raketen.fliegen. Vielleicht müssen wir Body.body-state3 sagen, Rakete. Cool. Lasst uns das retten. Was ich tun werde, ist, dass ich das auf 500 erhöhen werde, nur damit es ein bisschen schneller ist. Aktualisieren Sie es, klicken Sie auf „Starten“ und lassen Sie uns sehen, was passiert. Wir haben Raketen. Wenn Sie mitgefahren sind und tippen, herzlichen Glückwunsch, haben Sie gerade Ihre erste Rakete gestartet. Verflippt fantastisch. Dann sagen wir: „Wenn es gut ist, dann zeigen Sie die Erfolgsbotschaft. Wenn es nicht gut ist, zeig die, oh, keine Nachricht.“ Wir werden sagen, var success entspricht setTimeout, was Mangel an festgelegtem Intervall ist, außer es führt die Funktion in einer bestimmten Zeit, nicht immer und immer. Hier drinnen werde ich sagen, cool, führe es in 2.000 Millisekunden, also in zwei Sekunden. Dann werde ich sagen, var randomNumber gleich Math.random. Lassen Sie uns zeigen, Methode zufällig ist real. Wir können immer hier gehen und zu Math.Random gehen. Machen wir es noch einmal, um zu sehen, ob es wirklich zufällig ist. Cool. Es ist nicht das, was ich die Methode zufällig festlegen wollte, ich möchte nur eine Zahl von 0-10. Also, was ich tun werde, ist, dass ich sagen werde, multipliziere das mit 10, was großartig ist. Aber dann wollen wir es auch runden, also werde ich Math.round sagen. Ich gehe im Grunde und analysiere es in einer Zahl. Ich runde eine Zahl; diese Zahl wird eine Zufallszahl sein und sie mit 10 multiplizieren. Da gehen wir. Ich werde das nur kopieren und einfügen. Zufallszahl ist diese Zahl. Dann werde ich sagen, wenn RandomNumber größer als fünf ist , tun Sie etwas anderes. Was ich gerne tun würde, wenn es größer als fünf ist, wäre das ein Erfolg. Dann werde ich auf der [unhörbar] ChangeState zu vier sagen, sonst ChangeState zu fünf. Mal sehen, was hier passiert. Ich mag es auch, das zu protokollieren, nur um sicherzustellen, dass es die richtige Nummer ist. Also console.log, RandomNumber, also sagen wir Text plus RandomNumber. Ich kann auch einfach RandomNumber, RandomNumber sagen. Nun, dieser Zufallszahlen-Text und das wird tatsächlich den Wert dieser Variablen hier einfügen. Lass uns das speichern und sehen, was passiert. Start, 10, 9, 8, 7, 6, 5. So schnell kann ich nicht zählen. Woo, geht hoch. Okay, gut gemacht. Tun Sie es nochmal. Warum kommt unsere Rakete runter? Die RandomNumber war neun, fantastisch. Lass es uns nochmal machen. Der Schlüssel hier ist, dass es tatsächlich den Körperzustand verändert. Also, wenn es vier ist, gibt es ein bisschen ein Problem. Also, was ich hier tun werde, ist einfach zu gehen, Control C, Control V, und ändern Sie das auf 4,2, so dass es immer weiter geht, wenn es Zeit ist, nach oben zu gehen oder wenn es ein Erfolg ist. Lasst uns das retten. Aktualisieren, starten, und es kommt runter. Wenn wir abbrechen, wird es dorthin zurück gehen, aber warum bist du zurück zu zwei gegangen? Das müssen wir abdecken. Oh nein, versuchen Sie es noch einmal. Also RandomNumber war fünf. Ist das richtig? Wenn es größer als fünf ist, ist es Erfolg. Also, wenn es fünf ist, lassen wir es zum Scheitern. Was ich hier jetzt tun möchte, ist zu gehen, CountdownNumber ist 10. Was auch immer passiert, es muss zehn sein. Wenn es Zustand2 ist, können wir herunterzählen. Auch wenn es Zustand3 ist, können wir sagen, mal sehen, ob es ein Erfolg oder ein Misserfolg ist. Versuchen wir es noch einmal. Starten. Gut gemacht, mach es wieder und da gehen wir. Wir haben einen erfolgreichen Raketenstart. Die Rakete kommt wieder runter. Du siehst es als Übergang dort, wir können das ändern, wenn wir wollen. Also, wenn wir Body-Zustand1 sagen, Rakete. Wir können Übergang sagen, keiner. Lasst uns das retten. Gehen wir zurück zu Chrome, aktualisieren, starten, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, heben Sie ab. Fantastisch, versuchen Sie es noch einmal. Sehen Sie, was passiert, wenn ich auf „Erneut versuchen“ klicke? Es ging gerade zurück. Launch, da war etwas seltsam. Es hat nicht sofort angefangen. Was also passiert ist, ist, dass, obwohl die CountDownNumber auf 10 ging, der eigentliche HTML nicht tat. Also werde ich das einfach kopieren und einfügen. Dann, was ich hier tun werde, ist, dass ich diese CountDownNumber setzen werde bevor sich die eigentliche HTML ändert, nur damit es nicht auf 10 zu viel bleibt. Lassen Sie uns das aktualisieren, starten Sie es erneut. Sie können sehen, wie oft Sie hin und her kommen und Dinge ändern. Es ist nicht nur wie klar, wie es einmal tun, nie wieder berühren, es wieder tun. Das fühlt sich also viel besser an. Natürlich können wir das Ding fantastisch aussehen lassen. Wie sieht deine Rakete aus? Oh, ich weiß nicht, versuchen Sie es noch einmal. Ich schätze, wenn du das tust, würde deine Rakete explodieren und irgendwann wieder auf den Grund kommen. Aber ja, wie wird deine Rakete aussehen? Wie wird Ihre Schnittstelle aussehen? Wie sieht das aus? Heben Sie ab. Oh nein. Sie können hier sehen, 7, 5, 2. Versuchen wir es nochmal. Heben Sie ab, oh nein, nochmal. Versuchen wir es noch einmal, sehen, ob die Sache ein Erfolg ist. Sie können sehen, dass es zufällig ist. JavaScript erzeugt Zufallszahlen. Schrecklich. Aber jedenfalls, mach auf, geh auf den Desktop und du wirst sicherstellen wollen, dass du auf gh-Seiten bist und dann sagst: „Meine Rakete gemacht.“ Kommen Sie in gh-Pages und dann wollen Sie synchronisieren. All das Synchronisieren. Gehen wir zu GitHub, github.com. Gehen wir zu unserem js-rocket Repository, stellen Sie sicher, dass wir auf dem gh-Pages Zweig sind. Geh zu unseren Commits, machte meine Raketen. Nun, was wir tun wollen, ist, zu mrra-screencasts.github.io/js-rocket zu gehen. Aber wenn wir hier sind, wird es uns zu dieser alten Seite bringen. Also eigentlich wollen wir zu rocket.html und ta-da gehen. Wird es funktionieren? Ja, online für alle zu sehen. Oh nein, versuch es nochmal, verlor einen. Mal sehen, ob es funktioniert. Letzter. Oh nein, unser Glück ist nicht gut. So können Sie diese Zahl in etwas anderes ändern, wenn Sie wirklich wollen. Man kann also sagen, wenn es größer als eins ist, dann ist es ein Erfolg. Es hat eine sehr kleine Chance auf Scheitern. Das ist unsere Rakete. Sie können hier anhalten, Sie können sie teilen. Das nächste Video werde ich Ihnen zeigen, wie ich meine Rakete cool aussehen ließ. 15. Und jetzt machen wir die Rakete hübsch!!: Wir haben unsere Rakete zu starten, und jetzt werden wir sie cool aussehen lassen. Ich habe ein paar Elemente, die ich einbauen werde. Ich habe ein paar Bilder gemacht. Hier ist mein Boden und hier ist meine Rakete. Hier ist meine Rakete in Zustand 2 mit ein bisschen Schub, und das ist meine Rakete im vollen Bogen mit viel Schub, viel Ness. Dann passiert das, wenn es nicht klappt, es wird boom. Dann möchte ich dem kleinen Kerl, der in der Rakete ist, auch ein „Ich kann nicht warten“ und ein „Ich bin nervös“ hinzufügen . Sehen Sie, wie er lächelt. Öffnen wir JS-Rakete. Was ich hier tun werde, ist, dass ich einen neuen Ordner erstellen werde, und ich werde es IMG nennen, und dort werde ich alle meine Bilder hineinlegen. Also versuche ich nur, eine neue Datei im Fenster zu erstellen, zu Dokumenten zu gehen, zum Desktop zu gehen. Ich werde nur eines dieser Bilder in IMG ziehen. Fantastisch. Okay, ich kann mich nicht erinnern, wie unsere Rakete aussieht. Mal sehen. Ziehen wir rocket.html in Google Chrome. Während wir darauf warten, öffnen wir einfach GitHub Desktop 2. Ok. Es ist sehr langweilig. Ich werde sehen, ob das CSS funktioniert. Lass es uns ein bisschen besser aussehen. Ich werde mit der Rakete beginnen und dann möchte ich mich auf die Schnittstelle konzentrieren. Okay, also gehen wir hier rein. Öffnen wir unsere CSS-Rakete. Ich werde nur die Schriftgröße ein wenig verringern. Also haben wir die Rakete in den verschmolzenen kleinen Zuständen, aber ich will nur sehen, welche Größe diese Bilder haben. Also Raketenzustand 1, 143 mal 272, und ich habe sie alle gleich gemacht, damit es einfacher ist, mit zu arbeiten. Wenn Sie das nur kopieren, und ich werde hierher gehen, und ich werde die Breite auf 143 Pixel und Höhen von 272 Pixeln einstellen. Alles klar, und mal sehen, wie das aussieht. Also lasst uns das retten, Auffrischung. Ja, es sieht ziemlich gut aus, aber es ist nicht in der Mitte. Was ich hier gerne mache, ist nur eine negative Marge, also werde ich nur sagen, Marge links, und ich werde sagen negativ 272 geteilt durch 2, 136. Fantastisch. Was es tut, ist es in der Mitte, aber dann hat man immer noch die ganze Breite auf der einen Seite. Dann brauchen Sie einen Rand links von der Hälfte der Breite. Jetzt habe ich tatsächlich den Rand links von der Hälfte der Höhe gemacht. Also lassen Sie uns das noch einmal versuchen, 143 geteilt durch 2 ist 71,5. Also, das werde ich tun, 71,5 Pixel. Hintergrundfarbe. Ich möchte eigentlich keine Hintergrundfarbe mehr. Also, was ich tun werde, ist nur Hintergrund zu verwenden, und ja, ich möchte eine URL, und dann hier möchte ich meinen Bildordner. Da das CSS einen kleinen Unterordner hat, werde ich einen nach oben gehen und dann werde ich die Bilder im Bild-Ordner finden. Ok. Wie habe ich es dann genannt? Raketenzustand 1, state1.png. Was wirklich schön an dieser Hintergrundeigenschaft ist, dass wir sagen können: „Keine Wiederholung“, was bedeutet, dass der Hintergrund sich nicht wiederholt, und ich wollte, dass 0-0, was bedeutet, dass die x-Position Null ist, die y-Position Null ist. Sie können das auf 10 Pixel, minus 10 Pixel einstellen , was immer Sie wollen. Sie können auch oben und unten oder Mitte und Mitte sagen. Für mich macht es keinen großen Unterschied, weil meine Breite und Höhe genau die gleiche wie die Breite und Höhe meines Hintergrunds sind. Also werde ich das einfach bei Null und Null behalten. Datei Speichern. Mal sehen, wie es aussieht. Okay, da haben wir meine kleine Rakete, sie sieht toll aus. Ist aber ein bisschen vom Boden, was mich frustriert. Also, was ich hier tun werde, ist, anstatt einen Boden bei 20 Pixeln zu haben, ich werde den Boden bei Null haben. Ich glaube, ich muss vielleicht einen negativen Boden haben. Okay, also mal sehen, was ich tun muss, damit das funktioniert. Wir könnten hin und her gehen von Editor zu Chrome und aktualisieren die ganze Zeit, aber wow, Das könnte wirklich mühsam werden. Also, was ich hier gerne tun würde, ist nur nach unten minus 10 Pixel zu gehen. Funktioniert das? Da gehen wir, minus 13. Minus 13. Fantastisch. Speichern Sie das, cool. Auffrischung. Los geht's. Okay, jetzt ist das nächste, was wir tun müssen, unser Hintergrundbild zu ändern , wenn es beginnt zu starten. Was ich hier tun werde, ist, dass ich sagen werde [unhörbar], ich werde Kommentare machen. Kommentieren Sie nun in CSS, Sie müssen diese Kommentare verwenden. Während JavaScript, können Sie Kommentare wie diese verwenden, und CSS funktioniert nicht. Also werde ich sagen, hier ist Rakete bg Bild. Also Zustand 1, den wir sortiert haben, aber jetzt Zustand 2. Wie wird Zustand 2 aussehen? Dann will ich auch den Zustand 3 und nach oben. Also Zustand 3, Staat 4, und dann Staat 5 ist, oh, nein, ich muss dort etwas etwas anderes machen. Ok. Lass uns das vorerst rausnehmen. Ich werde das nur so schneiden, dass die Kronen hier oben sind, nur damit es eine klare Differenzierung gibt. Okay, also Zustand 2, ich werde das in Hintergrundbild ändern, und ich werde das einfach kopieren und einfügen. Da es sich um ein Hintergrundbild handelt, kann ich „keine Wiederholung“ aktivieren und die Hintergrundposition nicht festlegen. Alles, was ich ändere, ist das Hintergrundbild. Ich war Zustand 2, dass ich es in Zustand 2 ändern werde und ich werde sicherstellen, dass das ein GIF oder JIF ist, aber Sie bevorzugen es zu sagen. Okay, ich werde mich auffrischen, starten Sie das. Du siehst also, dass kleine Triebwerke rauskommen. Fantastisch. Dann hebt es ab. Ok. Für Staat 3 und Staat 4 werden wir dies in Zustand 3 ändern. Fantastisch. Mal sehen, wie das funktioniert. Voila. Wir haben eine Rakete. Wenn wir es wieder machen, fängt es wieder da drüben an. Das ist fantastisch. Jetzt müssen wir den Zustand5 machen. Ich werde das nur noch einmal kopieren und einfügen, und Staaten. Wie habe ich es genannt? boom.png. Nun, es hat eine andere Breite und Höhe, also was ich tun werde, ist das zu kopieren, ich werde es ändern, Breite 209 Pixel, mit einer Höhe von 200 Pixel. Nun, weil ich diese Margin-links von 71,5 habe, möchte ich es immer noch zentrieren, also was ich hier tun werde, ist, es eine Breite von 209 hat, so dass es negativ sein sollte 104,5. Ich könnte das ausarbeiten. Lassen Sie uns das „Speichern“ und öffnen Sie uns unsere rocket.js. Wir gehen hier rüber zu den RandomNumbers, wenn es größer als eins ist, wird es ein Erfolg werden. Wie hoch sind die Chancen, dass es scheitern wird? Im Moment ziemlich schlank, also möchte ich sagen, ob es größer als neun ist, was bedeutet, dass es eine hohe Chance auf Scheitern hat. Aber das ist vorerst großartig, weil ich mein Boom-Image testen wollte. Ich gehe zu „Speichern“ dies, gehe zurück zu Chrome, „Aktualisieren“ dies. Was bedeutet Sublime? Nein, ich will es jetzt nicht kaufen, danke. Wir „Aktualisieren“ diese, „Launch“. Fantastisch. Bumm. Alles in Ordnung, so dass funktioniert. „ Versuchen Sie es erneut“. Sie können sehen, wie wir hier ein bisschen Spaß haben. Das ist auf meinen Bildern, auf meinen Raketenbildern. Ich möchte dies vielleicht auf zwei ändern , da es immer noch gute Erfolgschancen hat. Ich werde das „Speichern“. Dann möchte ich den Boden ändern, etwas Farbe, also ändere das in Hintergrund und die URL. Ich werde sagen, lasst uns gehen, um im Bilderverzeichnis zu finden. Ich denke, ich nenne es ground.png. Lassen Sie uns einfach sehen, dass ground.png, und es ist 723 von 15. Die Breite ist in Ordnung. Aber was wir hier tun werden, ist, dass wir sagen werden, keine Wiederholung, aber das X wird in der Mitte sein. Ich kann einfach nicht Zentrum buchstabieren, sorry , Zentrum Zentrum, und das y wird auch Zentrum sein. Es wird immer in der Mitte sein, so dass die Rakete genau in der Mitte darauf sitzt. Höhe 20, das ist okay, aber lasst uns es auf 15 ändern, es wird wahrscheinlich besser funktionieren, und lasst uns das „Speichern“. Es sieht ziemlich schön aus, aber ich wollte, dass es wieder ein bisschen höher ist, also x wird Mitte sein, y ich werde dies auf Null ändern, also wird es an der Spitze sitzen, dann werde ich das wieder auf 20. Mal sehen, wie das aussieht. Immer noch nicht toll, also lasst uns die untere Position des Bodens auf 10 Pixel ändern. Ich werde das kopieren. Dann unten, werde ich in 10 Pixel setzen. „ Speichern“. Jetzt haben wir den Boden, unsere Raketen sehen wirklich schön aus. Es sieht cool aus, ein kleiner Kerl. Aber jetzt will ich ihn dazu bringen, Dinge zu sagen, während der Countdown läuft. Wir müssen von Javascripture wechseln und einige CSS ändern. Es ist in unserer rocket.js, wenn der Countdown hier rüber geht. Ich kann sagen, wenn CountDownNumber was auch immer ist, können Sie die Zustände ändern. Was wir hier tun können, ist, dass wir sagen können, wenn CountDownNumber gleich fünf ist, lasst uns etwas tun. Vielleicht können wir sagen, seien Sie nervös. Dann können wir auch sagen, CountDownNumber gleich drei, können wir sagen, kann nicht warten. Was ich hier gerne tun würde, ist, dass ich tatsächlich einige Klassen ändern möchte. Wenn du hier drüben siehst, möchte ich, dass es irgendwo hier und irgendwo hier drüben erscheint, also muss ich ein neues Stück HTML einfügen. Dies ist auf der linken Seite, die eine auf der rechten Seite, die Raketen hier drüben, also werde ich sagen, div Ich möchte ihm eine Klasse von „nervös“ geben, und ich möchte ein anderes div mit einer Klasse von „can't-wait“ machen . Ich werde das „Speichern“ und ich werde nervös kopieren und kann nicht warten. Lassen Sie uns das kopieren. Das geht zu rocket.css. Hier drüben, sagen nervös, ich will ihm wieder eine absolute Position geben. Nur für den Moment werde ich sagen, oben 100 Pixel und links 100 Pixel. Der Hintergrund, es wird keine Hintergrundfarbe sein, es wird wieder ein Bild sein, also sagen Sie url, und wir sagen img/, ich werde es nervous.png nennen. Es wird keine Wiederholung sein, und es wird x bei Null positioniert und y bei Null positioniert werden. Nun, die Breite wird 223 sein, die Höhe wird 100 sein. Fantastisch. Tut mir leid, ich habe da etwas falsch gemacht. Wir werden sehen, wie das funktioniert. Ich werde das retten. Rocket JS, ich werde auch sparen. Sie werden sehen, dass, obwohl hier nichts drin ist, nichts beeinflusst. Ich bin nervös, das sieht wirklich gut aus, je nachdem, wo das ist. Aber im Moment ist es wahrscheinlich am besten, unten zu sein. Also werde ich das inspizieren und ich werde das zur Seite bringen, nur damit wir ein gutes Verständnis davon haben, wo das ist. Sehen Sie, ob hier nicht viel Platz ist, aber das ist okay. Was ich tun werde, ist, dass ich dieses nervöse Div sagen werde , eigentlich will ich, dass es von unten ist. Also werde ich von oben nach unten wechseln, und ich werde es auf 100 Pixel ändern. Das sieht gut aus. So unten 220. Ich gehe zurück hierher und ändere den Boden auf 220. Lasst uns das retten. Wir müssten klären, dass die linke Position ist. Die Linke, 100, wir können wieder 50 Prozent gehen. Fünfzig Prozent, das ist großartig. Dann gehe ich zum Rand links. Also tue ich Plus, oder ich kann einfach die Eingabetaste hier drücken. Margin-links, dies wird ein negativer Wert sein, also negativ 20 Pixel. So negativ 180 sieht richtig aus. Also margin-links, fügen Sie das ein. Cool. Lasst uns das nochmal retten. Sie können dies drücken, aktualisieren. Fantastisch. Es bedeutet, dass es wahrscheinlich am selben Ort sein wird, egal wo wir auf dem Bildschirm sind. Das ist großartig. Das ist eine erstaunliche Sache an der absoluten Positionierung. Das nächste, was ich brauche, ist, dass ich nicht warten kann. Wir machen genau das Gleiche. Wo es Cant-Warte steht, werde ich das einfach kopieren und ich werde das einfügen. Ich werde buchstäblich all dies kopieren und einfügen und dies in Cant-Wait ändern. Ich will sehen, wie groß das ist. So 206 von 65. Jetzt müssen wir nur sehen, wie das genau funktioniert. Der Boden wird wahrscheinlich das Gleiche sein, links, 50 Prozent. Ich werde das nur aussagen. Wir können gehen Befehl Vorwärts Schrägstrich, die Ihr Kommentar sein soll, oder Sie können Ihre Kommentare manuell tippen. Also Datei, Speichern. Mal sehen, wie das aussieht. Ich kann nicht warten. Es sieht wirklich gut aus. Ich werde diesen Rand links entfernen. Dann haben wir eine Warte und ich bin nervös. Was ich jetzt tun möchte, ist, dies als keine anzuzeigen und dies als keine anzuzeigen. Wenn ich eine Klausel von cant-wait.show hinzufüge, möchte ich sie als Block anzeigen , der sein natürlicher Anzeigetyp ist. Wenn wir eine Klausel hinzufügen und jedem von ihnen zeigen, sollte es funktionieren. Lassen Sie uns hier erfrischen. Untersuchen Sie das Element. Wir können auf der rechten Seite sehen, hier ist ich nervös. Wenn wir eine Klausel der Show hinzufügen, werden sie „Hey, ich bin nervös“ sein, und wenn wir eine Klausel Show auf Cant-Wait hinzufügen, sagen sie: „Hey, ich kann es kaum erwarten.“ Wenn wir das wieder wegnehmen, wirst du sehen, dass es verschwindet. Das ist also, was wir mit JavaScript machen werden. Wir werden diese Klauseln der Show dynamisch hinzufügen. Wenn countDownNumber gleich fünf ist, werden wir sagen, erhalten Sie dieses Element. Also lassen Sie uns diesem eine ID von nervös und ID von Cant-Wait geben. Lass mich das retten. Ich werde document.getElementById sagen. Wir gehen dann vorbei, lassen Sie mich sagen, .className = nervöse Show. Lassen Sie uns das hier kopieren und einfügen. Lassen Sie uns einfach warten und kopieren Sie das so. Lass uns das speichern und sehen, was passiert. Fünf, drei, fantastisch. Aber jetzt wollen wir nicht, dass diese Dinger immer da sind. Was wir hier tun können, ist anders zu sagen, es zu kopieren, einfach zu nervös zu wechseln und sonst einfach zu Cant-Wait zu wechseln. Nun, was wir sagen können, ist, wenn es CountDownNumber ist größer als drei, und CountdownNumber ist kleiner als fünf oder kleiner als sechs, aber wir können sagen, kleiner oder gleich fünf. Was bedeutet das? Es ist größer als drei, also wären es vier oder fünf. Also vielleicht können wir diese sechs und CountdownNumber machen, lassen wir es einfach für drei. Wir sollten uns hier erfrischen. Starten. Ich bin nervös erscheint, geht weg, kann nicht warten, das war sehr, sehr schnell. Also lasst uns das noch einmal ändern. Vielleicht können wir das auf sieben und das zu vier ändern. Es gibt uns eine Reihe von fünf, sechs und sieben. Machen wir genau das Gleiche hier, außer es muss größer als eins sein und es sollte vier sein. Also sind es drei, zwei und vier. Vier oder drei, zwei. Lass uns das retten. Gehen Sie zurück zu Chrome, aktualisieren. Starten Sie es. Nun, ja, da gehen wir. Das ist unsere Rakete. Unsere Rakete mit Stil, wir haben einige zusätzliche Elemente, die auf der Countdown basieren. Also habe ich einen lustigen Tag. Es ist wirklich cool, was du tun kannst. Ich möchte das eigentlich nur gut aussehen lassen. Also die Rakete HTML, alle diese sind Code, Zustand 1, Zustand 2, Zustand 3, Zustand 4, Zustand 5. Sie sehen alle so ziemlich gleich aus. Also, was ich hier tun werde, ist, dass ich es nur eine Schnittstelle nennen werde. Ich werde ihm eine Klasse von Schnittstelle geben, nur damit ich sie so gestalten kann, dass sie alle genau gleich aussehen. Ich werde das speichern, Befehl S oder Control S oder einfach dort speichern. Jetzt ist diese Schnittstelle, obwohl es alles auf der linken Seite ist, also werde ich gerade jetzt, .interface setzen. Wie wollen wir, dass das aussieht? Ich möchte, dass alles zuallererst zentriert ist. Also werde ich sagen, text-ausrichten, zentrieren. Ich möchte es dann eine Polsterung geben, sagen wir von 20 Pixeln. Ehrfürchtig. Jetzt siehst du, was hier passiert. Das ist ziemlich interessant. Wenn Sie herausfinden können, wie Sie diese wegnehmen, wenn ich auf Abort klicken, gut auf Sie, aber ich werde die linke Seite für jetzt zu stylen. Ich will, dass die großen Knöpfe groß sind. Sie können hier sehen, wo es steht Button. Der Rest von ihnen sind eigentlich alle Tasten. Ich möchte nicht, dass sie alle Knöpfe sind, ich möchte, dass der Start der Knopf ist, und vielleicht versuchen sie erneut, ein Knopf zu sein. Mach es noch mal, das ist cool. Lassen Sie uns einfach abnehmen Taste auf dem Abbruch und speichern Sie das. Das ist unsere Schnittstelle. Jetzt möchte ich die Schaltfläche ändern, also kann ich entweder eine.button setzen oder ich kann es einfach als Schaltfläche belassen, aber lasst uns eine.button machen. Ich werde sagen, Anzeige Inline-Block, und ich werde sagen, Hintergrundfarbe lassen Sie es weiß machen, machen Sie die Textfarbe schwarz, und lassen Sie uns sehen, wie das für jetzt aussieht. Ich werde es nur speichern, aktualisieren. Sieht vorerst gut aus. Ich werde es eine Polsterung von 40 Pixeln geben. Ich werde sagen, Text-Transform, Großbuchstaben. Cool. Schauen wir uns mal an und sehen, wie das aussieht. Es ist eine ziemlich seltsam aussehende Taste, also werde ich 20 Pixel oben und 40 Pixel an den Seiten sagen. Das sieht gut aus. Ich werde Textdekoration sagen, keine, weil ich nicht unterstreichen möchte, und dann werde ich ihm einen Grenzradius von 10 Pixeln geben, damit es wie eine Schaltfläche aussieht. Mal sehen, wie das aussieht. Viel besser. Aber ich mag die Tatsache nicht, dass es alle Serifen-Schriften sind, ich will serifen-Schrift. Ich werde das ändern und sagen Körper, Schriftfamilie, und lassen Sie uns das in Helvetica oder Arial oder Sans-Serif ändern . Speichern Sie das. Sieht jetzt viel besser aus. Die Schnittstelle, der Knopf ist hier drüben. Ich möchte jetzt einen Hover für meine Schaltfläche hinzufügen, und hier werde ich nur die Hintergrundfarbe ändern. Welche Farbe soll ich ändern? Vielleicht ändere ich nur die Farbe in Rot. Ich will, dass es nicht so jary aussieht, also werde ich sagen Übergang, und dann sagen Farbe, 300 Millisekunden. Da gehen wir. Klicken Sie darauf. Der Abbruch ist noch da. Heben Sie ab. Sie können sehen, dass mein Knopf hier ist, immer noch in der Mitte. Versuchen wir es nochmal. So gestalten Sie Ihre Seite. Machen Sie es so erstaunlich, wie Sie wollen. Wenn Sie ein paar verschiedene Dinge ausprobieren möchten, wenn Sie einige erstaunliche und coole Dinge ausprobieren möchten, dann gehen Sie es los. Ich werde hier sein, um dir zu helfen. Aber so lässt man die Dinge cool aussehen, so macht man die Dinge interaktiv. Ich hoffe, Sie haben viel gelernt. Es gibt noch eine Sache, die ich Ihnen zeigen muss, was ich für ziemlich cool halte, und dann werden wir es mit GitHub synchronisieren. Wenn jemand auf JS-Rocket auf meinem lokalen Host schaukelt, gibt es mir dieses Ding, das heißt: „Oh meine Güte, was hier vor sich geht, das sind nur ein Haufen Akten. Sie können tatsächlich auf Index oder Raketen klicken. Wenn wir zum Index gehen, sieht es so aus. Aber denken Sie daran, dass Sie auf Ihrer GitHub-URL direkt dorthin gelangen. Du bist nicht mal bei index.html. In diesem möchte ich einen Link hinzufügen, der zu rockets.html umleitet oder automatisch basierend auf einem Timer dorthin geht. Gehen wir zu unserer index.html, und was wir hier tun werden, ist, dass wir sagen, a, gehen Sie zu rocket.html, gehen Sie auf die Raketenseite. Lass uns das speichern und mal sehen, ob das funktioniert. Ja, tut es. Das ist eine Sache. Was wir hier tun werden, ist nur sagen p, Sie werden bald umgeleitet werden. Ich Akte, Speichern. Lassen Sie uns in unsere script.js gehen und sagen wir, oben hier, setzen Sie Timeout. Ich werde hier eine Funktion setzen, und wir werden sagen, ich weiß nicht, zwei Sekunden. Was wir hier tun werden, ist, dass wir tatsächlich den Standort ändern werden. Wenn wir dies also in unserer Konsole testen müssten, können wir sagen location.href gleich rocket.html. Genau so, und es wird es ändern. Was wir tun werden, ist, dass wir das in die Timeouts setzen, also nach zwei Sekunden wird es uns umleiten. location.href entspricht rocket.html. Lass uns das retten. Gehen wir zurück, erfrischen wir uns, und nach zwei Sekunden bringt es uns zu unserem Raketenstart, wo wir Spaß haben können. Oh nein. Sobald Sie damit fertig sind, öffnen Sie Ihre GitHub-Seiten, stellen Sie sicher, dass Sie sich im Projektarchiv der js-rocket befinden, stellen Sie sicher, dass Sie auf dem gh-Pages-Zweig, nicht dem Master-Zweig, dem gh-Pages-Zweig, und sagen Sie dann: machte unsere Rakete cool mit Zeichnungen usw.“ Sie verpflichten es und synchronisieren es dann. Während der Synchronisierung, die ein wenig Zeit in Anspruch nehmen kann. Öffnen wir einen neuen Tab und gehen Sie zu github.com. Wenn Sie nicht angemeldet sind, melden Sie sich an, dann gehen Sie zum js-rocket Repository, gehen Sie zu Ihrem gh-Pages Zweig, gehen Sie zu Ihren Commits. Macht unsere Rakete cool mit Zeichnungen usw. Sobald das passiert ist, lasst uns diese GitHub-Seite aktualisieren und mal sehen, ob das funktioniert. Fantastisch, es funktioniert. Mal sehen, ob hier alles gepfropft wird. Sieht so aus, als wäre es. Sie werden sehen, dass es ein paar Blitze gibt, wenn sich die Bilder ändern, das ist völlig normal, aber es liegt daran, dass Ihr Browser es nicht zwischengespeichert hat. Wenn wir es noch einmal versuchen, werden Sie wahrscheinlich weniger blinkend sehen. Ja, kein Blinken. Teilen Sie Ihre Raketen Kreationen in der Projektgalerie. Ich hoffe, Sie haben viel gelernt. 16. Vielen Dank und die nächsten Schritte: Es ist das Ende der Projekte. Ich hoffe, du hast viel gelernt. Ich weiß, dass es ziemlich überwältigend sein kann, um HTML, CSS und JavaScript zu lernen. Sie sind alle so riesig, und ich denke, JavaScript ist wahrscheinlich das größte, weil es HTML manipulieren und CSS gleichzeitig ändern kann . Ich hoffe, du hattest eine Menge Spaß. Ich hoffe, Sie haben es genossen, und ich hoffe wirklich, dass Sie weiterhin JavaScript, HTML und CSS schreiben, und selbst wenn Sie zwei Zeilen oder fünf oder 10 Minuten jeden Tag machen, wird sich Ihr Gehirn daran erinnern. Es wird nicht so eine Überlastung sein, also gib es mal, probiere es aus. Wir haben verstanden, was Eigenschaften sind, welche Methoden sind. Wir haben verstanden, wie man JavaScript, die Syntax schreibt. Wir haben eine Rakete gebaut, wir haben eine Rakete gestartet. Wir haben eine Reihe von kleinen Dingen gelernt, wie, if-Anweisungen, wir haben über Funktionen gelernt, die wir über Variablen, Häcksler gelernt haben. Es gibt so viel mehr über JavaScript zu erfahren. Wir haben auch gelernt, wie Sublime Text mit JavaScript zu verwenden. Wir haben gelernt, wie Sie die Konsole in Google Chrome verwenden. Wir haben gelernt, wie GitHub-Seiten zu verwenden. Wir haben gelernt, wie GitHub zu verwenden, wie man Repositories oder Projekte erstellt. Ich möchte, dass Sie Ihre Projekte mit Leuten teilen, die Sie kennen. Geben Sie es eine Freigabe, gehen Sie zu Ihrer Projektgalerie, posten Sie Links, und denken Sie daran, dass die Google, ist Ihr Freund. Wenn Sie stecken, wenn Sie ein Problem haben und Sie es nicht herausfinden können, Google es. Da draußen gibt es so viel Zeug. Das gesamte Web wird von Leuten gebaut, die HTML und JavaScript und CSS kennen. Sie werden Ihnen helfen können. Wenn das nicht hilft, fragen Sie einen echten Menschen. Ich bin ein echter Mensch, so fragen Sie im Forum auf School Share. Andere Leute können Ihnen vielleicht antworten, aber ich werde Ihnen sicher helfen können, wenn niemand sonst kann. Ich hoffe, Sie haben genossen. Tschüss für jetzt.