Lernen Sie die korrekte Haltung von JavaScript

Lernen Sie JavaScript nicht auf diese Weise

Vertiefen Sie sich nicht von Anfang an in unzählige JavaScript-Online-Tutorials. Das ist die schlechteste Art zu lernen. Vielleicht ist es effektiv, nachdem man sich unzählige Tutorials angesehen hat, aber es ist sehr ineffizient, etwas ohne Hierarchie zu lernen. Wenn man JavaScript tatsächlich zum Erstellen einer Website oder Webanwendung verwendet, bleibt man trotzdem häufig stecken. Insgesamt führt dieser Lernansatz zu Verwirrung darüber, wie Sprache als Werkzeug – als persönliches Werkzeug – eingesetzt werden soll.

Darüber hinaus schlagen einige Leute möglicherweise vor, mit dem Erlernen von JavaScript aus „The Essence of JavaScript Language“ zu beginnen, das von Douglas Crockford, dem angesehenen Paten von JavaScript, geschrieben wurde. Obwohl Herr Crockford alles über JavaScript weiß und als Einstein der JavaScript-Welt bekannt ist, ist seine „JavaScript Language Essence“ nicht für Anfänger zum Erlernen geeignet. Dieses Buch erklärt die Kernkonzepte von JavaScript nicht ausführlich, klar und prägnant. Aber für einen fortgeschritteneren Lernweg würde ich empfehlen, sich die Videos von Herrn Crockford anzusehen.

Außerdem lernen Sie JavaScript nicht nur von Websites wie Codecademy, denn selbst wenn Sie wissen, wie man viele kleine JavaScript-Codeausschnitte schreibt, werden Sie immer noch nicht lernen, wie man eine Webanwendung erstellt. Trotzdem werde ich Codecademy später weiterhin als ergänzende Lernressource empfehlen.

• Registrieren Sie sich kostenlos bei Stack Overflow, einem Frage-und-Antwort-Forum im Bereich Programmierung. Wenn Sie hier Fragen stellen, erhalten Sie bessere Antworten als bei Codecademy, auch wenn Ihre Frage sehr einfach ist und albern erscheint (denken Sie daran, es gibt nie dumme Fragen).

• Registrieren Sie sich kostenlos bei Codecademy, einer Online-Lernplattform, auf der Sie Code direkt im Browser schreiben können.

• Einige Blog-Beiträge zu JavaScriptIsSexy, einschließlich Objekten, Abschlüssen, Variablenbereich und -förderung, Funktionen usw.

JavaSctipt-Lernroute

Es wird 6–8 Wochen dauern, den gesamten Lehrplan zu absolvieren, und Sie werden die komplette JavaScript-Sprache lernen ( einschließlich jQuery und etwas HTML5). Wenn Sie nicht die Zeit haben, alle Kurse in 6 Wochen zu absolvieren (was definitiv anspruchsvoller ist), versuchen Sie, sich nicht mehr als 8 Wochen Zeit zu nehmen. Je länger es dauert, desto schwieriger wird es, verschiedene Wissenspunkte zu beherrschen und sich einzuprägen.

1~2 Wochen (Einführung, Datentypen, Ausdrücke und Operatoren)

1. Wenn Sie HTML und CSS noch nicht sehr gut kennen, absolvieren Sie die Web-Grundlagen auf Codecademy-Aufgabe.

2. Lesen Sie das Vorwort und die Kapitel 1–2 von „The Definitive Guide to JavaScript“ oder „Advanced Programming with JavaScript“.

3. Sehr wichtig: Jeder Beispielcode, den Sie im Buch finden, muss von Hand eingegeben und in der Firefox- oder Chrome-Browserkonsole ausgeführt werden. Versuchen Sie, ihn zu trampeln (. alle Arten von Experimenten durchführen). Sie können auch jsfiddle verwenden, aber nicht Safari. Ich empfehle, Firefox mit dem Firebug-Plug-in zu verwenden, um den Code zu testen und zu debuggen. In der Browserkonsole können Sie JavaScript-Code schreiben und ausführen.

4. Vervollständigen Sie den Abschnitt Introduction to JavaScript im Codecademy JavaScript Track.

5. Lesen Sie die Kapitel 3–4 von „The Definitive Guide to JavaScript“. Oder lesen Sie die Kapitel 3–4 von „Erweiterte Programmierung mit JavaScript“. Sie können den 位操作-Teil überspringen, da Sie ihn in Ihrer JavaScript-Karriere im Allgemeinen nicht benötigen.

   Denken Sie auch hier daran, von Zeit zu Zeit anzuhalten und den Code aus dem Buch in die Browserkonsole (oder JSFiddle) einzugeben, um verschiedene Tests durchzuführen. Sie können einige Variablen ändern oder die Codestruktur modifizieren.

6. Lesen Sie Kapitel 5 des Definitive Guide to JavaScript. Für „JavaScript Advanced Programming“ gibt es vorerst keine Leseaufgaben, da die entsprechenden Kenntnisse bereits behandelt wurden.

7. Schließen Sie die Teile 2–5 auf dem Codecademy JavaScript Track ab.

3~4 Wochen (Objekt, Array, Funktion, DOM, JQuery)

1. Wählen Sie eine der folgenden Optionen Drei:

   Die beiden Bücher werden mehr Details enthalten, aber solange Sie meinen Blog-Beitrag lesen, können Sie diese Details getrost überspringen.

• Lesen Sie meinen Blog-Beitrag „JavaScript Objects Explained“.

• Lesen Sie Kapitel 6 von „The Definitive Guide to JavaScript“.

• Lesen Sie Kapitel 6 von „Erweiterte Programmierung mit JavaScript“. HINWEIS: Schauen Sie sich einfach den Abschnitt „Objekte verstehen“ an.

Lesen Sie die Kapitel 7–8 von „The Definitive Guide to JavaScript“ oder die Kapitel 5 und 7 von „Advanced Programming with JavaScript“.

An diesem Punkt sollten Sie viel Zeit damit verbringen, Code auf der Browserkonsole zu schreiben, if-else-Anweisungen, For-Schleifen, Arrays, Funktionen, Objekte usw. zu testen. Noch wichtiger ist, dass Sie das selbstständige Schreiben von Code üben und beherrschen müssen, ohne Codecademy zu verwenden. Wenn Sie Fragen zur Codecademy beantworten, sollte Ihnen jede Aufgabe leicht fallen und keine Hilfe oder Aufforderungen erfordern. Wenn Sie bei Codecademy immer noch nicht weiterkommen, kehren Sie zum Üben zum Browser zurück. Dies ist der beste Weg, um zu lernen. So wie James in jungen Jahren auf dem Basketballplatz seines Nachbarn trainierte, lernte Bill Gates das Programmieren in seinem Keller.

Üben Sie weiter, und die kumulative Wirkung dieses kleinen Fortschritts wird erstaunlich sein. Sie müssen den Wert dieser Strategie erkennen, glauben, dass sie machbar ist, und sich ihr widmen.

Codecademy erzeugt die Illusion der Meisterschaft.
Das größte Problem bei der Verwendung von Codecademy besteht darin, dass die Eingabeaufforderungen und kleinen Codeausschnitte es den Menschen leicht machen, Antworten zu finden, wodurch die Illusion entsteht, dass sie diesen Wissenspunkt beherrschen. Möglicherweise sehen Sie es im Moment nicht, aber dadurch ist Ihr Code nicht mehr unabhängig.

Aber bisher ist Codecademy immer noch ein guter Helfer beim Erlernen des Programmierens. Insbesondere führt es Sie durch einige grundlegende Codestrukturen wie if-Anweisungen, for-Schleifen, Funktionen und Variablen, um den Entwicklungsprozess kleiner Projekte und kleiner Anwendungen zu verstehen.

Gehen Sie zurück zur Codecademy, um die JavaScript-Route abzuschließen. Vervollständigen Sie die Teile 6 bis 8 (die Datenstruktur muss Objekt 2 sein).

Fünf Basisprojekte (Basic Projects) zur Implementierung der Projects-Route auf Codecademy. Sobald Sie fertig sind, benötigen Sie Codecademy nicht mehr. Das ist eine gute Sache, denn je mehr Sie es selbst machen, desto schneller lernen Sie und desto besser sind Sie darauf vorbereitet, selbstständig mit dem Programmieren zu beginnen.

Lesen Sie die Kapitel 13, 15, 16 und 19 des Definitive Guide to JavaScript. Oder lesen Sie die Kapitel 8, 9, 10, 11, 13 und 14 von „Erweiterte Programmierung mit JavaScript“. In diesem Buch wird jQuery nicht behandelt, und das jQuery-Wissen über Codecademy wird nicht ausreichend behandelt. Sie können sich das offizielle Tutorial von jQuery ansehen, das kostenlos ist: http://try.jquery.com/

Mehr über jQuery erfahren Sie auch in Kapitel 19 von „The Definitive Guide to JavaScript“.

Beenden Sie alle jQuery-Tutorials http://try.jquery.com/.

Der ultimative JavaScript-Editor: WebStorm

• Bevor Sie Ihr erstes Projekt implementieren, wenn Sie planen, JavaScript zu verwenden die Zukunft Wenn Sie ein Entwickler sind, der möglicherweise häufig JavaScript verwendet, laden Sie am besten jetzt die Testversion von WebStorm herunter. Hier erfahren Sie, wie Sie WebStorm verwenden (speziell für diesen Kurs geschrieben). Es besteht kein Zweifel, dass WebStorm der beste Editor (oder die beste IDE) für die JavaScript-Programmierung ist. Nach einer 30-tägigen Testversion kostet es 49,00 $, aber als JavaScript-Entwickler sollte dies neben dem Kauf eines Buches die klügste Investition sein.

• Stellen Sie sicher, dass JSHint in WebStorm aktiviert ist. JSHint ist ein Tool, das JavaScript-Code auf Fehler und potenzielle Probleme überprüft und Ihr Team dazu zwingt, Code gemäß den Spezifikationen zu schreiben. Das Beste an der Verwendung von WebStorm ist, dass JSHint automatisch eine rote Linie unter fehlerhaftem Code anzeigt, genau wie eine Rechtschreibprüfung in einem Textverarbeitungsprogramm. JSHint zeigt alle Codefehler (einschließlich HTML) an und fordert Sie auf, gute Gewohnheiten zu entwickeln und ein besserer JavaScript-Programmierer zu werden. Das ist wichtig Sie werden zurückkommen und sich bei mir bedanken, wenn Sie wirklich erkennen, wie sehr Ihnen WebStrom und JSHint geholfen haben.

• Darüber hinaus ist WebStorm eine erstklassige, professionell einsetzbare IDE zum Schreiben professioneller JavaScript-Webanwendungen, sodass Sie sie in Zukunft häufig verwenden werden. Es lässt sich auch in Node.js, Git und andere JavaScript-Frameworks integrieren, sodass Sie es auch dann verwenden werden, wenn Sie ein Star-JavaScript-Entwickler werden. Sofern in Zukunft keine weiteren JavaScript-IDEs erscheinen.

• Der Fairness halber erwähne ich hier Sublime Text 2, den zweitbesten JavaScript-Editor nach WebStorm. Es ist nicht so funktionsreich und vollständig wie WebStorm (selbst mit der Hinzufügung einer Reihe von Plugins). Wenn ich kleine Änderungen vornehme, verwende ich Sublime Text 2, das viele Sprachen unterstützt, einschließlich JavaScript, aber ich verwende es nicht, um vollständige JavaScript-Webanwendungen zu erstellen.

Das erste Projekt – dynamische Frage- und Antwortanwendung

An diesem Punkt verfügen Sie über genügend Kenntnisse, um eine stabile und wartbare Webanwendung zu erstellen. Lesen Sie die folgenden Kapitel nicht, bevor Sie die von mir für Sie entworfene Anwendung fertiggestellt haben. Wenn Sie nicht weiterkommen, stellen Sie Fragen zu Stack Overflow und lesen Sie das relevante Material im Buch noch einmal, bis Sie die Konzepte vollständig verstanden haben.

Als nächstes beginnen Sie mit dem Erstellen einer JavaScript-Frage- und Antwortanwendung (HTML und CSS werden ebenfalls verwendet) mit den folgenden Funktionen:

• Dies ist eine Reihe von Bei Single-Choice-Testfragen werden die Ergebnisse des Benutzers nach Abschluss angezeigt.

• Die Q&A-Anwendung kann so viele Fragen generieren, wie Sie möchten, und jede Frage kann so viele Optionen haben, wie Sie möchten.

• Zeigen Sie die Ergebnisse des Benutzers auf der letzten Seite an. Auf dieser Seite werden nur Ergebnisse angezeigt. Entfernen Sie daher die letzte Frage.

• Verwenden Sie ein Array, um alle Fragen zu speichern. Jede Frage, einschließlich ihrer Optionen und richtigen Antworten, ist in einem Objekt gekapselt. Das Fragenarray sollte wie folgt aussehen:

// 这里只演示一个问题，你要把所有问题都添加进去 var allQuestions = [ { question: "Who is Prime Minister of the United Kingdom?", choices: [ "David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], correctAnswer: 0 } ];

• Wenn der Benutzer auf „Weiter“ klickt, verwenden Sie document.getElementById oder jQuery, um das dynamisch hinzuzufügen Nächste Frage und entfernt die aktuelle Frage. In dieser Version ist „Weiter“ die einzige Navigationsschaltfläche.

• Sie können unterhalb dieses Artikels einen Kommentar abgeben, um Hilfe zu erhalten. Stellen Sie Ihre Fragen am besten auf Stack Overflow, wo Sie zeitnahe und genaue Antworten erhalten.
  

  5 bis 6 Wochen (reguläre Ausdrücke, Fensterobjekte, Ereignisse, JQuery)

  Einige aufmunternde Worte

  Ich wünsche dir viel Erfolg im Studium und gebe niemals auf hoch! Wenn Sie sich dumm fühlen, weil Sie es nicht können (und das wird Ihnen von Zeit zu Zeit passieren), denken Sie daran, dass andere Anfänger und sogar erfahrene Programmierer auf der ganzen Welt von Zeit zu Zeit so denken.

  Wenn Sie ein absoluter Anfänger sind, insbesondere wenn Sie über das Teenageralter hinaus sind, kann es schwierig sein, mit dem Programmieren zu beginnen. Junge Menschen haben nichts zu befürchten und keine Belastungen. Sie können viel Zeit damit verbringen, das zu tun, was sie wollen. Verschiedene Herausforderungen sind für sie daher nur vorübergehende Hindernisse.

  Aber nach Ihren Teenagerjahren möchten Sie schnell Ergebnisse sehen. Weil Sie nicht so viel Zeit haben, Stunden damit zu verbringen, nur ein paar Details herauszufinden. Aber Sie müssen diese Dinge gründlich verstehen. Seien Sie nicht frustriert, indem Sie die Kursaufgaben erledigen und alle Fehler finden, bis Sie sie vollständig verstanden haben. Wenn Sie die andere Seite des Sieges erreicht haben, werden Sie wissen, dass sich das alles gelohnt hat, Sie werden feststellen, dass das Programmieren sehr interessant ist und die dafür aufgewendete Zeit reichlich belohnt wird.

  Man muss die große Freude am Erstellen von Programmen spüren und verstehen. Wenn Sie die Wissenspunkte Schritt für Schritt beherrschen und das Programm Stück für Stück aufbauen, werden Sie inspiriert und bestätigt und bringen ein wunderbares Gefühl der Zufriedenheit mit.

  Eines Tages wirst du erkennen, dass sich all die Schwierigkeiten, die du erduldet hast, gelohnt haben. Denn Sie sind dabei, ein großartiger Programmierer zu werden, und Sie wissen auch, dass Ihre Zukunft als JavaScript-Entwickler rosig ist. Wie Tausende von Programmierern vor Ihnen haben Sie die härtesten Fehler besiegt, Sie sind nicht zurückgefallen, Sie haben nicht losgelassen, Sie haben sich keine Ausreden ausgedacht, um aufzugeben.

  Wenn Sie etwas gelernt haben, teilen Sie Ihre Ergebnisse gerne mit uns, auch wenn es sich um ein triviales Projekt handelt, das zu klein ist, um mit einem Mikroskop gesehen zu werden.
  
  Originaltext: http://javascriptissexy.com/how-to-learn-JavaScript-properly/

• Client-Datenvalidierung hinzufügen: Benutzerantwort sicherstellen Erst nachdem Sie die aktuelle Frage beantwortet haben, können Sie mit der nächsten Frage fortfahren.

• Fügen Sie eine Schaltfläche „Zurück“ hinzu, damit Benutzer zurückgehen und Antworten ändern können. Sie können höchstens zur ersten Frage zurückkehren. Beachten Sie, dass bei Fragen, die der Benutzer beantwortet hat, die Auswahlschaltfläche ausgewählt erscheinen sollte. Auf diese Weise müssen Benutzer Fragen, die bereits beantwortet wurden, nicht erneut beantworten.

• Verwenden Sie jQuery, um Animationen hinzuzufügen (aktuelle Frage ausblenden, in die nächste Frage einblenden)

• Getestet unter IE8 und IE9, behoben Fehler, hier sollte es sein. Sie werden beschäftigt sein. ;D

• Exportieren Sie die Frage in eine JSON-Datei

• Fügen Sie eine Benutzerauthentifizierung hinzu, erlauben Sie Benutzern die Anmeldung und speichern Sie Benutzerauthentifizierungsinformationen in 本地存储 (lokaler Speicher, HTML5-Browserspeicher).

• verwendet Cookies, um sich an den Benutzer zu erinnern und zeigt „Willkommen 用户名 zurück“ an, wenn sich der Benutzer erneut anmeldet.
  

  7 Wochen, erweiterbar auf 8 Wochen (Klasse, Vererbung, HTML5)

  Weitere Verbesserung

• Seitenlayout verwendet Twitter Bootstrap, Sorgen Sie dafür, dass das Q&A-Element professionell aussieht. Als zusätzlichen Bonus können Sie das Label-Steuerelement von Twitter Bootstrap verwenden (Anmerkung des Übersetzers: Die ursprüngliche Adresse ist ungültig und wurde geändert), um Fragen anzuzeigen, wobei jedes Label eine Frage anzeigt.

• Lernen Sie „Lenkers.js“ und verwenden Sie die Vorlage „Lenkers.js“ in der Q&A-Anwendung. Ihr JavaScript-Code sollte keinen HTML-Code mehr enthalten. Unsere Q&A-App wird jetzt immer fortschrittlicher.

• Zeichnen Sie die Ergebnisse der Benutzer auf, die an der Frage-und-Antwort-Runde teilgenommen haben, und zeigen Sie den Ranking-Vergleich des Benutzers mit anderen Benutzern in der Frage-und-Antwort-Anwendung an.

1. Kompetent in backbone.js

2. Fortgeschrittenes mittleres und fortgeschrittenes JavaScript

3. Beherrscht Node.js ohne Lecks

4. Erste Schritte mit Meteor.js (bald verfügbar)

5. Drei beste JavaScript-Frontend-Frameworks (bald verfügbar) Veröffentlicht)

1. Lesen Sie die Kapitel 9, 18, 21 und 22 von „The Definitive Guide to JavaScript“.

   Oder lesen Sie meinen Blog-Beitrag „JavaScript Object-Oriented Must Know“

   Oder lesen Sie die Kapitel 6, 16, 22, 24 von „JavaScript Advanced Programming“, Kapitel 6 (schreibgeschützt) „Creating Objects“ ” (Objekterstellung) und „Vererbung“. Hinweis: Dieser Teil ist die technisch aufwändigste Lektüre in diesem Kurs. Sie sollten sich überlegen, ob Sie ihn aufgrund Ihrer eigenen Situation vollständig lesen möchten. Sie müssen mindestens Prototypmuster (Prototype Pattern), Fabrikmuster (Factory Pattern) und Prototypvererbung (Prototypal Inheritance) kennen, andere sind nicht erforderlich.

2. Fahren Sie mit der Aktualisierung Ihrer Q&A-Anwendung fort:

3. Nachdem Sie Backbone.js und Node.js gelernt haben, werden Sie verwenden Nutzen Sie diese beiden neuesten JavaScript-Frameworks, um den Code Ihrer Q&A-Anwendung in eine komplexe einseitige moderne Webanwendung umzuwandeln. Sie müssen außerdem die Authentifizierungsinformationen und Noten des Benutzers in der MongoDB-Datenbank speichern.

4. Als nächstes: Konzipieren Sie ein Projekt und entwickeln Sie es schnell, während das Eisen heiß ist. Wenn Sie nicht weiterkommen, lesen Sie „The Definitive Guide to JavaScript“ oder „JavaScript Advanced Programming“. Natürlich müssen Sie auch ein aktiver Benutzer von Stack Overflow sein, weitere Fragen stellen und versuchen, die Fragen anderer Leute zu beantworten.

1. Lesen Sie die Kapitel 10, 14, 17 und 20 von „The Definitive Guide to JavaScript“.

   Oder lesen Sie die Kapitel 20 und 23 von „Erweiterte Programmierung mit JavaScript“.

2. Denken Sie daran, den Beispielcode in die Browserkonsole einzugeben, so viel wie möglich damit zu spielen und verschiedene Tests durchzuführen, bis Sie vollständig verstanden haben, wie er funktioniert und was er kann.

3. An diesem Punkt sollten Sie mit der Verwendung von JavaScript sehr vertraut sein, ein bisschen wie ein Kampfkunstmeister, der kurz vor seinem Coming-out steht. Aber man kann noch kein Meister werden, man muss das neu erworbene Wissen immer wieder anwenden und weiter lernen und sich verbessern.

4. Fragen und Antworten wurden vor dem Upgrade gestellt

Das obige ist der detaillierte Inhalt vonLernen Sie die korrekte Haltung von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!