() translation by (you can also view the original English article)
Apprendre quelque chose de nouveau fait peur. Pour moi, le plus gros problème lorsque je veux apprendre quelque chose, c'est de ne pas savoir ce que je ne sais pas. C'est pour ça qu'il est souvent utile de trouver un plan pour apprendre cette chose qui vous intéresse. C'est ce qu'est cet article: votre feuille de route, votre plan d'action pour apprendre JavaScript! Vous n'avez pas à vous soucier de trouver les meilleures ressources, exclure les mauvaises, déterminer quoi apprendre après. Tout est ici. Il suffit de suivre, étape par étape.
Mission 0: Comprendre ce qu'est et n'est pas JavaScript.
JavaScript est le langage du navigateur.
Avant de commencer à apprendre JavaScript, prenez une minute pour comprendre ce qu'il est et ce qu'il fait.
JavaScript n'est pas jQuery, Flash, ou Java. C'est un langage de programmation distinct de ceux-ci.
JavaScript est le langage du navigateur (mais plus exclusivement de nos jours). Son but principal est d'ajouter de l'interactivité à une page statique. Dans le navigateur, il ne va pas remplacer PHP ou Ruby. Il ne va même pas remplacer votre code HTML ou CSS; vous allez l'utiliser conjointement à eux. En outre, l'apprendre n'est pas aussi terrible que ce que vous auriez pu penser ou entendre.
Une note de plus: vous avez entendu parler de jQuery, qui est probablement la librairie JavaScript la plus utilisée. Ou vous avez peut-être entendu parler de l'un des autres frameworks JavaScript populaires, comme Mootools, YUI, Dojo, et d'autres. Comment ceux-ci s'intègrent-ils dans notre tableau? Considérez-les comme un ensemble d'utilitaires d'aide à JavaScript; vous codez toujours en JavaScript lors de leur utilisation, mais c'est du JavaScript très abstrait. Ils vous permettent d'économiser une tonne de travail.
Vous pourriez même avoir entendu quelqu'un dire que vous devriez commencer avec jQuery (ou une autre librairie) et apprendre JavaScript par après. Je suis respectueusement en désaccord total. Prenez d'abord bien en main JavaScript, et ensuite utilisez les librairies. Vous comprendrez mieux ce que vous ferez et par conséquent, vous écrirez du meilleur JavaScript.
Mission 1: Travailler avec les cours de Codecademy.com
Codecademy est un site web relativement nouveau qui se présente comme "la meilleure façon d'apprendre à coder". C'est vous qui en jugerez! Actuellement, il y a seulement deux cours: "Démarrer avec la programmation" et le "Guide de démarrage rapide pour JavaScript". C'est un outil formidable pour mettre les pieds dans JavaScript. Très semblable aux exercices de Try Ruby, vous suivrez des cours de courte durée, écrirez du code dans le navigateur et regarderez les résultats. Tout en gagnant des points et débloquant des badges de réussite.
Si vous êtes déjà familié avec un autre langage de programmation, vous pouvez probablement commencer avec le "Guide de démarrage rapide pour JavaScript". Si c'est la première fois que vous faites de la programmation (mis à part HTML et CSS), alors le cours "Démarrer avec la programmation" vous aidera énormément. Codecademy est gratuit, mais il est obligatoire de s'inscrire.
Mission 2: Les captures vidéo d'appendTo
Les gens chez appendTo ont un stock fantastique de screencasts adaptés spécialement aux débutants. Si vous voulez apprendre JavaScript de la bonne façon (et facilement), c'est clairement avec ces leçons que vous pourrez le faire. Et puis apprendre en regardant est toujours un plus!
"Augmentez vos compétences avec notre solution de formation pragmatique à la demande. Pas d'inscription requise. Pas de piège. Pas de blague."
Mission 3: Lire une bonne introduction à JavaScript
Une fois que vous travaillerez avec les cours de Codecademy, vous aurez envie d'avoir une présentation plus approfondie de JavaScript - une introduction qui vous fera découvrir l'ensemble des types, opérateurs, structures de contrôle, et plus encore.
Une poignée de bonnes introductions, si vous me le permettez:
- A Re-introduction to JavaScript - Cette introduction est sur le Mozilla Developers Network. C'est un travail dense avec presque autant d'exemples de code que de paragraphes.
- Eloquent JavaScript - Ce livre, de Marijn Haverbeke, est disponible gratuitement en ligne, mais vous pouvez aussi l'obtenir sur Amazon si vous souhaitez une copie papier. Il va au-delà de l'intro MDN, car il couvre non seulement le langage JavaScript, mais également le style de codage et l'utilisation de JavaScript dans le navigateur.
- Getting Good with JavaScript - Bon, oui, c'est mon propre livre, mais il y a une autre raison pour laquelle je l'inclus ici. C'est vraiment très différent des deux autres intros que j'ai énumérés; Je couvre seulement ce que vous aurez besoin de savoir pour démarrer et foncer aussi vite que possible. En plus, il est livré avec plus de 6 heures de screencasts, donc si ça vous botte, jettez-y un oeil. (Et oui, celui-ci est payant.)
Mission 4: Installer et apprendre Firebug (ou Developer Tools)
Une fois que vous aurez commencé à travailler avec JavaScript dans le navigateur, vous aurez envie d'installer Firebug et de devenir familier avec lui. Firebug est un plugin pour Firefox qui vous assiste dans la construction et de débugage de vos pages web: imaginez le comme un couteau suisse pour développeurs. Vous n'utilisez pas Firefox? Vous préférez Safari ou Chrome? Pas de problème: utilisez les outils de développement directement intégrés, qui sont très similaires à Firebug.
Vous pouvez ouvrir le panneau Developer Tools en appuyant sur
Option + Command + Isur Mac, ouControl + Shift + Isur PC.
Vous apprendrez beaucoup en utilisant l'outil de votre choix et en cliquant un peu partout quand vous êtes sur un de vos sites favoris. Voici quelques resources qui vous aideront à aller plus vite.
- Firebug
- Developer Tools
Mission 5: Lire un livre
Donc, maintenant vous êtes familier avec les bases. Cependant, il y a beaucoup plus à apprendre. Alors que je pourrais recommander une liste de livres qui vous ruinerait, je vais en rester à quatre des livres de la plus haute qualité que vous trouverez partout:
Les deux premiers sont des ressources qui expliquent Javascript de manière générale mais en profondeur, et qui partent de ce que vous savez de l'introduction pour aller beaucoup plus loin; Certes, il y aura un peu de chevauchement avec les introductions, mais pas beaucoup: juste assez pour que ça reste confortable.
(Note: Alors que tous ces livres sont disponibles sur Amazon, je les ai liés aux sites des éditeurs, pour que vous puissiez jetter un oeil sur les chapitres d'exemple disponibles.)
- Professional JavaScript for Web Developers - Écris par Nicolas C. Zakas, ce livre pourrait difficilement couvrir plus que ce qu'il fait. Si vous avez déjà vu un livre de Zakas avant, vous savez qu'il est incroyablement détaillé. En plus de couvrir le langage JavaScript, ce livre vous donnera une bonne prise en main de l'utilisation de JavaScript dans le navigateur.
- JavaScript 24-hour Trainer - Cette ressource impressionnante a été mis en place par Jeremy McPeak, qui écrit aussi pour Nettuts+. Ce n'est pas seulement un livre: il est livré avec plus de 4 heures de tutoriels vidéo sur DVD. Il y a 43 leçons, couvrant tout de la syntaxe aux guides de codage et l'optimisation de code.
Alors que ces livres sont parfaits pour comprendre le langage JavaScript et comment l'utiliser dans le navigateur, il y a beaucoup plus à apprendre. Et même si ils montrent plusieurs exemples et exercices, voici deux livres consacrés à ces sujets que vous trouverez, je pense, utiles.
- JavaScript Patterns - Ecrit par Stoyan Stefanov. Je viens juste de finir de lire ce livre et, croyez moi, j'aurai voulu l'avoir lu plus tôt. Après avoir lu les ressources au-dessus, vous saurez comment écrire du JavaScript, mais ce livre vous apprendra comment l'organiser, une compétence importante qui n'est pas si simple que ce que vous pourriez imaginer.
- JavaScript: The Good Parts - Ecrit par Douglas Crockford. Ce petit bijou vous expliquera ce qui est bon et ce qui est mauvais sur le langage JavaScript.
Mission 6: Construire quelque chose!
Comme vous avez travaillé à travers les ressources ci-dessus, vous devriez avoir manipulé des bouts de code, en les utilisant sur le côté et les retravaillant pour voir ce qui se passe. Mais maintenant il est vraiment temps de créer votre propre code. Il est temps de construire quelque chose.
Bon, qu'est ce que vous pourriez construire? Il y a beucoup de choses que vous pourriez faire. Voici quelques idées.
-
Une galerie photo:
Afficher un groupe de thumbnails et une photo principale. Lorsqu'un utilisateur clique sur une thumbnail, une version plus large de celle-ci (pas la thumbnail elle-même) remplace la photo principale actuelle. Points bonus si vous pouvez afficher par dessus une description qui viendrait de l'attribut
altde la thumbnail, ou faire boucler les images si l'utilisateur n'a cliqué sur aucune thumbnail depuis une minute. - Une To-do List: Ca peut paraître plus difficile que ce que c'est; je ne vous dis pas de construire une application à part entière. Juste d'avoir une zone de texte avec un bouton à côté de lui; lorsque vous cliquez sur le bouton, le texte saisi devient un élément dans une liste non ordonnée. En cliquant sur un élément de la liste, on le supprime. Là ça semble plus simple, mais il y a plusieurs pièges auxquels vous devrez penser.
-
Une boite animée: L'animation, c'est toujours délicat, mais ca n'a pas à être complexe. Vous avez une
divavec du texte à l'intérieur, et plusieurs boutons au-dessus. Un bouton permet de régler la largeur, un autre la hauteur et le dernier la couleur de fond. L'idée, c'est que les changements ne se produisent pas immédiatement mais en disons, une seconde. Rappelez-vous, Google est votre ami, surtout si vous n'avez pas fait d'animation en JavaScript jusqu'à présent.
Je suis sûr que vous pouvez penser à d'autres projets parfaits pour vous exercer. Évidemment, sortez de votre zone de confort, c'est la seule manière d'apprendre.
Assurez-vous aussi de vous référer à la catégorie JavaScript ici sur Nettuts+ pour une énorme liste de tutoriels, pour tous les niveaux.
Mission 7: Commencer à apprendre une librairie JavaScript
Si vous avez fait tout ce chemin, vous vous serez probablement rendu compte qu'il y a plusieurs choses qui sont difficiles à accomplir à travers le navigateur en JavaScript. Les causes principales sont probablement par exemple la manipulation excessive du DOM, AJAX, et l'animation. C'est là que la librairie arrive.
Comme je l'ai mentionné plus tôt, l'intérêt d'une librairie JavaScript est de sucrer les trucs pénibles. Par conséquent, il est peut-être maintenant temps d'y jetter un oeil. Il y a une tonne de choix, et je vous laisse choisir lequel expérimenter. Que ce soit jQuery ou Mootools, YUI ou Dojo, leurs sites respectifs vous donnent tout ce dont vous avez besoin pour commencer. Si vous en ressentez le besoin, faites un essai.
Les librairies les plus connues
Alors qu'il y a certainement un nombre incalculable de libraires disponibles, vous devriez en rester aux plus connues, du moins pour commencer.
Mission 8: Suivez les maîtres
Arrêtez ce que vous êtes en train de faire, et suivez ces développeurs. C'est une obligation.
Il y a une tonne de génies en JavaScript là dedans, qui font toujours des trucs cool que vous ne voudriez pas rater. Heureusement Siddartah, notre éditeur associé qui ne dort jamais, a fait une liste de ”33 développeurs que vous DEVEZ suivre en tant que JavaScript Junkie. Laissez tomber ce que vous faites, et suivez ces développeurs. C'est une obligation.
Mais vous pouvez encore faire plus. Ce site honnête poste de temps en temps des articles en rapport avec JavaScript, donc tenez le à l'oeil. Checkez aussi le JavaScript Show, un podcast qui parle des news récentes et du meilleur de JavaScript. Vous pouvez aussi vous abonner à la newsletter JavaScript Weekly.
Conclusion
Merci pour la lecture. Espérons que ce plan peut vous aider à devenir un fanatique JavaScript. Si vous êtes déjà familié avec, pourriez-vous recommander d'autres ressources dans les commentaires?
