Apprenez la bonne posture de JavaScript

N'apprenez pas JavaScript de cette façon

Ne vous plongez pas dans des tonnes de didacticiels en ligne JavaScript dès le début. C'est la pire façon d'apprendre. Cela sera peut-être efficace après avoir regardé d'innombrables didacticiels, mais il est très inefficace d'apprendre quelque chose sans hiérarchie. Vous resterez toujours bloqué lorsque vous utilisez JavaScript pour créer un site Web ou une application Web. Dans l’ensemble, cette approche de l’apprentissage conduit à une confusion quant à la manière d’utiliser la langue comme un outil – comme un outil personnel.

De plus, certaines personnes peuvent suggérer de commencer à apprendre JavaScript à partir de « The Essence of JavaScript Language » écrit par Douglas Crockford, le parrain respecté de JavaScript. Cependant, bien que M. Crockford sache tout sur JavaScript et soit connu comme l'Einstein du monde JavaScript, son "JavaScript Language Essence" ne convient pas aux débutants. Ce livre n'explique pas les concepts fondamentaux de JavaScript de manière approfondie, claire et concise. Mais pour un parcours d’apprentissage plus avancé, je recommanderais de regarder les vidéos de M. Crockford.

De plus, ne vous contentez pas d'apprendre JavaScript sur des sites Web comme Codecademy, car même si vous savez écrire de nombreux petits extraits de code JavaScript, vous n'apprendrez toujours pas à créer une application Web. Même ainsi, je recommanderai toujours Codecademy comme ressource d’apprentissage supplémentaire plus tard.

• Inscrivez-vous gratuitement sur Stack Overflow, un forum de questions/réponses dans le domaine de la programmation. Poser des questions ici obtiendra de meilleures réponses que Codecademy, même si votre question est très basique et semble idiote (rappelez-vous, il n'y a jamais de questions stupides).

• Inscrivez-vous gratuitement à Codecademy, une plateforme d'apprentissage en ligne où vous pouvez écrire du code directement dans le navigateur.

• Quelques articles de blog sur JavaScriptIsSexy, y compris les objets, les fermetures, la portée et la promotion des variables, les fonctions, etc.

Parcours d'apprentissage JavaSctipt

Il faudra 6 à 8 semaines pour terminer l'intégralité du programme de cours et vous apprendrez le langage JavaScript complet ( y compris jQuery et du HTML5). Si vous n'avez pas le temps de terminer tous les cours en 6 semaines (ce qui est nettement plus difficile), essayez de ne pas prendre plus de 8 semaines. Plus cela prendra de temps, plus il sera difficile de maîtriser et de mémoriser divers points de connaissances.

1~2 semaines (introduction, types de données, expressions et opérateurs)

1. Si vous ne connaissez pas encore très bien HTML et CSS, complétez les bases du Web sur Tâche de la Codecademy.

2. Lisez la préface et les chapitres 1 à 2 de "Le guide définitif de JavaScript" ou "Programmation avancée avec JavaScript".

3. Très important : Chaque exemple de code que vous rencontrez dans le livre doit être tapé à la main et exécuté dans la console du navigateur Firefox ou Chrome. Essayez de le piétiner (. faire toutes sortes d'expériences). Vous pouvez également utiliser jsfiddle, mais n'utilisez pas Safari. Je recommande d'utiliser Firefox avec le plug-in Firebug pour tester et déboguer le code. La console du navigateur est l'endroit où vous pouvez écrire et exécuter du code JavaScript.

4. Complétez la section Introduction to JavaScript de la piste JavaScript de Codecademy.

5. Lisez les chapitres 3 à 4 du « Le guide définitif de JavaScript ». Ou lisez les chapitres 3 à 4 de « Programmation avancée avec JavaScript ». Vous pouvez ignorer la partie 位操作, car vous n'en aurez généralement pas besoin dans votre carrière JavaScript.

   Encore une fois, n'oubliez pas de vous arrêter et de taper le code du livre dans la console du navigateur (ou JSFiddle) de temps en temps pour effectuer divers tests. Vous pouvez changer quelques variables ou modifier la structure du code.

6. Lisez le chapitre 5 du Guide définitif de JavaScript. Quant à "JavaScript Advanced Programming", il n'y a pas de tâches de lecture pour le moment, car les connaissances pertinentes ont été couvertes précédemment.

7. Terminez les parties 2 à 5 sur la piste JavaScript de Codecademy.

3~4 semaines (objet, tableau, fonction, DOM, JQuery)

1. Choisissez l'un des éléments suivants trois :

   Les deux livres impliqueront plus de détails, mais tant que vous lisez mon article de blog, vous pouvez ignorer ces détails en toute confiance.

• Lisez mon article de blog Les objets JavaScript expliqués.

• Lisez le chapitre 6 du « Le guide définitif de JavaScript ».

• Lisez le chapitre 6 de « Programmation avancée avec JavaScript ». REMARQUE : il suffit de consulter la section « Comprendre les objets ».

Lisez les chapitres 7 à 8 de « Le guide définitif de JavaScript » ou les chapitres 5 et 7 de « Programmation avancée avec JavaScript ».

À ce stade, vous devriez passer beaucoup de temps à écrire du code sur la console du navigateur, à tester les instructions if-else, les boucles, les tableaux, les fonctions, les objets, etc. Plus important encore, vous devez pratiquer et maîtriser l’écriture de code de manière indépendante sans utiliser Codecademy. Lorsque vous répondez à des questions sur Codecademy, chaque tâche doit être facile pour vous et ne nécessitera aucune aide ni invite. Si vous êtes toujours bloqué sur Codecademy, revenez au navigateur pour vous entraîner. C'est la meilleure façon d'apprendre. Tout comme James s'entraînait sur le terrain de basket de son voisin lorsqu'il était jeune, Bill Gates a appris la programmation dans son sous-sol.

Continuez à pratiquer, et l'effet cumulatif de ce petit progrès sera incroyable. Il faut voir la valeur de cette stratégie, croire qu’elle est réalisable et s’y consacrer.

Codecademy crée l'illusion de maîtrise.
Le plus gros problème avec l'utilisation de Codecademy est que ses invites et ses petits extraits de code permettent aux gens de trouver facilement des réponses, créant l'illusion qu'ils maîtrisent ce point de connaissance. Vous ne le voyez peut-être pas pour le moment, mais ce faisant, votre code n'est plus indépendant.

Mais jusqu'à présent, Codecademy reste une bonne aide pour apprendre la programmation. En particulier, il vous guidera à travers certaines structures de code de base telles que les instructions if, les boucles for, les fonctions et les variables pour comprendre le processus de développement de petits projets et de petites applications.

Retournez à Codecademy pour terminer le parcours JavaScript. Remplissez les parties 6 à 8 (la structure de données doit être l'objet 2).

Cinq projets de base (Basic Projects) pour mettre en œuvre le parcours Projets sur Codecademy. Une fois que vous avez terminé, vous n'avez plus besoin de Codecademy. C’est une bonne chose car plus vous le faites vous-même, plus vite vous apprendrez et mieux vous serez préparé à commencer à programmer de manière indépendante.

Lisez les chapitres 13, 15, 16 et 19 du Guide définitif de JavaScript. Ou lisez les chapitres 8, 9, 10, 11, 13 et 14 de Programmation avancée avec JavaScript. Ce livre ne couvre pas jQuery et les connaissances jQuery sur Codecademy ne sont pas suffisamment couvertes. Vous pouvez consulter le tutoriel officiel de jQuery, qui est gratuit : http://try.jquery.com/

Vous pouvez également en apprendre davantage sur jQuery dans le chapitre 19 de "Le guide définitif de JavaScript".

Terminez tous les didacticiels jQuery http://try.jquery.com/.

L'éditeur JavaScript ultime : WebStorm

• Avant de mettre en œuvre votre premier projet, si vous prévoyez d'utiliser du JavaScript dans l'avenir Si vous êtes un développeur susceptible d'utiliser fréquemment JavaScript, il est préférable de télécharger dès maintenant la version d'essai de WebStorm. Ici, vous pouvez apprendre à utiliser WebStorm (écrit spécifiquement pour ce cours). Il ne fait aucun doute que WebStorm est le meilleur éditeur (ou IDE) pour la programmation JavaScript. Cela coûte 49,00 $ après un essai de 30 jours, mais en tant que développeur JavaScript, cela devrait être l'investissement le plus judicieux en plus d'acheter un livre.

• Assurez-vous que JSHint est activé dans WebStorm. JSHint est un outil qui vérifie le code JavaScript pour détecter les erreurs et les problèmes potentiels, obligeant votre équipe à écrire du code conformément aux spécifications. La meilleure partie de l'utilisation de WebStorm est que JSHint affichera automatiquement une ligne rouge sous le code erroné, tout comme un correcteur orthographique dans un programme de traitement de texte. JSHint affichera toutes les erreurs de code (y compris HTML), vous invitant à développer de bonnes habitudes et à devenir un meilleur programmeur JavaScript. C'est important, vous reviendrez me remercier lorsque vous réaliserez vraiment à quel point WebStrom et JSHint vous ont aidé.

• De plus, WebStorm est un IDE de classe mondiale à usage professionnel pour écrire des applications Web JavaScript professionnelles, vous l'utiliserez donc souvent à l'avenir. Il s'intègre également à Node.js, Git et d'autres frameworks JavaScript, donc même si vous devenez un développeur JavaScript vedette, vous l'utiliserez toujours. À moins que d’autres IDE JavaScript n’apparaissent à l’avenir.

• Par souci d'équité, je mentionnerai ici Sublime Text 2, qui est le deuxième meilleur éditeur JavaScript après WebStorm. Ce n'est pas aussi riche en fonctionnalités et complet que WebStorm (même avec l'ajout de nombreux plugins). Lorsque j'effectue de petites modifications, j'utilise Sublime Text 2, qui prend en charge de nombreux langages, dont JavaScript, mais je ne l'utilise pas pour créer des applications Web entièrement JavaScript.

Le premier projet - application dynamique de questions et réponses

À ce stade, vous maîtrisez suffisamment de connaissances pour créer une application Web stable et maintenable. Ne lisez pas les chapitres suivants avant de terminer l'application que j'ai conçue pour vous. Si vous êtes bloqué, posez des questions sur Stack Overflow et relisez les éléments pertinents du livre jusqu'à ce que vous compreniez parfaitement les concepts.

Ensuite, commencez à créer une application de questions et réponses JavaScript (HTML et CSS seront également utilisés) avec les fonctions suivantes :

• Il s'agit d'un ensemble de questions de test à choix unique, les résultats de l'utilisateur seront affichés une fois terminés.

• L'application Q&A peut générer autant de questions que vous le souhaitez, et chaque question peut avoir autant d'options que vous le souhaitez.

• Affichez les résultats de l'utilisateur sur la dernière page. Cette page affiche uniquement les résultats, supprimez donc la dernière question.

• Utilisez un tableau pour stocker toutes les questions. Chaque question, y compris ses options et ses réponses correctes, est encapsulée dans un objet. Le tableau de questions devrait ressembler à ceci :

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

• Lorsque l'utilisateur clique sur "Suivant", utilisez document.getElementById ou jQuery pour ajouter dynamiquement le suivant une question et supprime la question actuelle. Dans cette version, « Suivant » est le seul bouton de navigation.

• Vous pouvez commenter sous cet article pour obtenir de l'aide. Il est préférable de poser des questions sur Stack Overflow, où vous obtiendrez des réponses rapides et précises.
  

  5 à 6 semaines (expressions régulières, objets Window, événements, JQuery)

  Quelques mots d'encouragement

  Je vous souhaite de réussir dans vos études et de ne jamais donner en haut! Lorsque vous vous sentez stupide de ne pas pouvoir le faire (et vous le ferez de temps en temps), rappelez-vous que d'autres programmeurs débutants et même expérimentés du monde entier ressentent cela de temps en temps.

  Si vous êtes un débutant complet, surtout si vous avez dépassé l'adolescence, il peut être difficile de commencer à coder. Les jeunes n’ont rien à craindre et aucun fardeau. Ils peuvent passer beaucoup de temps à faire ce qu’ils veulent. Les différents défis ne sont donc pour eux que des obstacles temporaires.

  Mais après votre adolescence, vous souhaiterez voir des résultats rapidement. Parce que vous n’avez pas beaucoup de temps pour passer des heures juste à comprendre quelques détails. Mais vous devez comprendre ces choses en profondeur. Ne soyez pas frustré par cela. Tenez-vous-en à terminer les tâches du cours et trouvez tous les bugs jusqu'à ce que vous les compreniez parfaitement. Lorsque vous atteindrez l’autre côté de la victoire, vous saurez que tout cela en valait la peine, vous constaterez que la programmation est très intéressante et que le temps passé dessus sera largement récompensé.

  Il faut ressentir et comprendre le plaisir intense de construire des programmes. Lorsque vous maîtriserez les points de connaissance étape par étape et construirez le programme petit à petit, vous serez inspiré et affirmé, et apporterez un merveilleux sentiment de satisfaction.

  Un jour, vous vous rendrez compte que toutes les difficultés que vous avez endurées en valaient la peine. Parce que vous êtes sur le point de devenir un glorieux programmeur et que vous savez également qu’en tant que développeur JavaScript, votre avenir est radieux. Comme des milliers de programmeurs avant vous, vous avez vaincu les bugs les plus difficiles, vous n'avez pas régressé, vous n'avez pas lâché prise, vous n'avez trouvé aucune excuse pour abandonner.

  Lorsque vous avez appris quelque chose, n'hésitez pas à partager vos résultats avec nous, même s'il s'agit d'un projet trivial trop petit pour être vu au microscope.
  
  Texte original : http://javascriptissexy.com/how-to-learn-JavaScript-properly/

• Ajouter la validation des données client : garantir la réponse de l'utilisateur Ce n'est qu'après avoir répondu à la question actuelle que vous pourrez passer à la question suivante.

• Ajoutez un bouton "Retour" pour permettre aux utilisateurs de revenir en arrière et de modifier les réponses. Vous pouvez tout au plus revenir à la première question. Notez que pour les questions auxquelles l'utilisateur a répondu, le bouton de sélection doit apparaître sélectionné. De cette façon, les utilisateurs n'ont pas à répondre à nouveau aux questions auxquelles on a déjà répondu.

• Utilisez jQuery pour ajouter une animation (fondu sur la question actuelle, fondu sur la question suivante)

• Testé sous IE8 et IE9, correction du bug, ça devrait être ici. Vous serez occupé. ;D

• Exporter la question vers un fichier JSON

• Ajouter une authentification utilisateur, autoriser les utilisateurs à se connecter et enregistrer les informations d'authentification utilisateur dans 本地存储 (stockage local, stockage du navigateur HTML5).

• utilise des cookies pour se souvenir de l'utilisateur et affiche "Bienvenue 用户名 de retour" lorsque l'utilisateur se reconnecte.
  

  7 semaines, extensible à 8 semaines (classe, héritage, HTML5)

  Continuer à améliorer

• Utiliser Twitter Bootstrap pour la mise en page , Donnez à l'élément questions-réponses un aspect professionnel. En prime, utilisez le contrôle d'étiquette de Twitter Bootstrap (Note du traducteur : l'adresse d'origine n'est pas valide et a été modifiée) pour afficher les questions, chaque étiquette affichant une question.

• Apprenez Handles.js et utilisez le modèle Handles.js dans l'application Q&A. Il ne devrait plus y avoir de code HTML dans votre code JavaScript. Notre application Q&A devient de plus en plus avancée.

• Enregistrez les résultats des utilisateurs qui ont participé aux questions-réponses et affichez la comparaison du classement de l'utilisateur avec d'autres utilisateurs dans l'application Q&A.

1. Maîtrise de backbone.js

2. JavaScript avancé, intermédiaire et avancé

3. Maîtriser Node.js sans rien laisser de côté

4. Démarrer avec Meteor.js (à venir)

5. Les trois meilleurs front JavaScript -end frameworks (à venir) Sortie)

1. Lisez les chapitres 9, 18, 21 et 22 du « Le guide définitif de JavaScript ".

   Ou lisez mon article de blog JavaScript orienté objet à savoir absolument

   Ou lisez les chapitres 6, 16, 22, 24 de "JavaScript Advanced Programming", le chapitre 6 en lecture seule "Création d'objets" ” (Création d'objet) et « Héritage ». Remarque : Cette partie est la lecture la plus techniquement intensive de ce cours. Vous devez déterminer si vous devez la lire en entier en fonction de votre propre situation. Vous devez au moins connaître le modèle de prototype (Prototype Pattern), le modèle d'usine (Factory Pattern) et l'héritage de prototype (Prototypal Inheritance), les autres ne sont pas requis.

2. Continuez à mettre à niveau votre application Q&A :

3. Après avoir appris Backbone.js et Node.js, vous utiliserez ces deux derniers frameworks JavaScript pour refactoriser le code de votre application Q&A en une application Web moderne complexe d'une seule page. Vous devez également enregistrer les informations d'authentification et les notes de l'utilisateur dans la base de données MongoDB.

4. Suivant : Concevez un projet et développez-le rapidement pendant que le fer est chaud. Lorsque vous êtes bloqué, reportez-vous au « Guide définitif de JavaScript » ou à « Programmation avancée avec JavaScript ». Bien sûr, vous devez également être un utilisateur actif de Stack Overflow, poser plus de questions et essayer de répondre aux questions des autres.

1. Lisez les chapitres 10, 14, 17 et 20 du « Le guide définitif de JavaScript ».

   Ou lisez les chapitres 20 et 23 de « Programmation avancée avec JavaScript ».

2. N'oubliez pas de saisir l'exemple de code dans la console du navigateur, de jouer avec autant que possible et d'effectuer divers tests jusqu'à ce que vous compreniez parfaitement comment il fonctionne et ce qu'il peut faire.

3. À ce stade, vous devriez être très à l'aise avec JavaScript, un peu comme un maître d'arts martiaux sur le point de sortir. Mais vous ne pouvez pas encore devenir un maître. Vous devez utiliser les connaissances nouvellement acquises à plusieurs reprises et continuer à apprendre et à vous améliorer.

4. L'application de questions-réponses que j'ai créée avant la mise à niveau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!