Améliorez votre apprentissage JavaScript avec des expériences amusantes

Cet article a été évalué par des pairs par Mark Brown. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

L'apprentissage dans le domaine du développement Web est sans fin. Notre industrie est constamment mise à jour et améliorée, nous devrions donc! Malheureusement, suivre la tendance peut être épuisant, mais cela ne doit pas l'être. Dans cet article, je vais vous montrer à quel point les petites expériences peuvent être un moyen amusant et efficace d'apprendre de nouvelles connaissances et de m'assurer que l'apprentissage et la séjour à jour sont toujours amusants.

Points clés

• Les petites expériences peuvent être un moyen intéressant et efficace d'apprendre de nouvelles connaissances dans le développement Web et le JavaScript. L'apprentissage peut être plus agréable et moins épuisant en établissant des règles telles que la préparation du travail, la planification des tâches, l'évitement des délais et vous donner du temps pour se divertir.
• La révision de vos expériences peut vous aider à améliorer vos compétences et vos connaissances. Demandez-vous si des problèmes surviennent pendant l'exécution peuvent être évités avec une meilleure préparation ou comment améliorer la qualité des travaux qui ont été exécutés peuvent fournir des informations précieuses.
• Il existe un grand nombre de ressources et d'outils pour inspirer et apprendre. Des ressources visuelles telles que Codepen, Dribbble ou Behance, à JavaScript Runtime telles que Node.js, Electron, Cordova et React Native, aux API, aux bibliothèques, aux cadres et même aux outils du monde physique tels que Raspberry Pi, Arduino et LEGO® Mindstorms® Il existe une variété d'options pour vous aider à améliorer vos compétences en JavaScript.

Gardez le plaisir de l'expérience

Avez-vous fait un projet parallèle? Si vous l'avez fait, je crois que vous aviez un projet très intéressant au début, mais cela s'est rapidement transformé en gâchis. Être en difficulté n'est pas amusant et peut gravement nuire à la motivation des projets parallèles et du travail. La raison principale en est généralement la propagation de la portée ou du stress, et vous devez vous détendre pendant votre temps libre. En appliquant certaines règles, nous pouvons nous assurer que nous ne rencontrons pas de surprises désagréables:

1. Préparez votre travail. Assurez-vous de savoir exactement quelle est la taille de l'expérience et ce qu'elle contient. S'il y en a trop, divisez-le en morceaux faciles à gérer, chacun avec un début et une fin, ou abandonner.
2. Planifiez la tâche. Ne restez pas debout tard tous les soirs. Il suffit de planifier une à deux fois par semaine, une à deux heures à chaque fois.
3. pas de date limite. Tout le monde, y compris vous, doit se détendre. Il est normal de fixer des objectifs, et cela devrait être OK de les manquer.
4. Donnez-vous du temps de divertissement. Bien que vous ne devriez pas tergiverser, la vie est plus qu'un simple tic-tic-tar sur un tas de listes de tâches. Passez du temps pour profiter des fruits du travail.

effectuer de petites expériences ne signifie pas qu'ils ne peuvent pas faire partie d'un projet plus large. Par exemple, prenez le projet de visualisation des données comme exemple. Cela peut prendre un certain temps, mais il est facile de se diviser en tâches plus petites:

• Configurer le flux de travail de construction
• trouver et obtenir des données intéressantes (il s'agit d'une liste d'API cool qui peut vous inspirer)
• Utilisez Node.js pour obtenir et traiter les données, et utilisez les fonctionnalités ES2015
• Comparez et sélectionnez une technologie (Canvas, WebGL, DOM / SVG) ou une bibliothèque (D3.JS, P5.JS, Three.js) pour visualiser les données
• Visualiser les données avec l'outil de votre choix

J'utilise la carte Trello pour suivre toutes mes expériences. Là, je vais les énumérer et les planifier et ajouter des informations pertinentes avant de commencer l'expérience. Pour les projets plus grands, j'ai tendance à créer un nouveau tableau spécialement pour le projet et à ajouter des cartes pour chaque tâche. Toute alternative est suffisante. L'enregistrement des choses peut éliminer le bruit dans mon esprit!

Revoir l'expérience

En plus de l'apprentissage par des opérations pratiques nouvelles choses, les expériences sont également une excellente occasion de s'améliorer. Passez en revue votre expérience et posez-vous les questions suivantes:

Les problèmes peuvent-ils survenir lors de l'exécution par une meilleure préparation? Si oui, que dois-je faire?
Quelle est la qualité du travail exécuté et comment puis-je l'améliorer?
Puis-je préparer mon expérience plus efficacement?

Revoir et améliorer ce que nous faisons nous apportera une expérience - elle est inestimable dans notre industrie. Il en va de même pour la communication et l'enregistrement. De nombreuses critiques expérimentales constituent un excellent article de blog.

Bien que cela ait peu à voir avec JavaScript, l'une de mes expériences particulièrement intéressantes est de créer des graphiques vectoriels dans SASS, où je convertisse le graphique de coordonnées en un chemin et le rasteriser en une ombre de boîte à pixels unique. Non seulement j'ai appris la fonction SASS que je ne connaissais pas auparavant, mais j'ai également dû étudier certains algorithmes.

à la recherche d'inspiration

Si vous ne savez pas quoi apprendre ensuite, il est préférable de se tenir au courant de certaines ressources pour l'inspiration.

Si vous aimez les effets visuels et l'art, Codepen est un excellent point de départ. Les œuvres sélectionnées sont souvent remplies de coups de pinceau incroyables qui méritent un examen plus approfondi de leur fonctionnement. Si vous vous sentez plus aventureux, essayez Dribbble ou Behance.

SitePoint est alimenté par de nombreux auteurs d'horizons divers. Par conséquent, le canal JavaScript est plein de toutes sortes d'essences JavaScript.

Environnement d'heure d'exécution

Vous savez peut-être déjà que JavaScript peut s'exécuter dans le navigateur, mais saviez-vous que JavaScript peut également être exécuté à l'extérieur du navigateur?

• Node.js est de loin le runtime JavaScript le plus populaire le plus populaire. En utilisant, vous pouvez écrire des scripts, des interfaces de ligne de commande, des applications de bureau, etc. Il fonctionne sur Windows, OS X et Linux.
• Electron vous permet de créer des applications de bureau multiplateforme en utilisant HTML, CSS et JavaScript traditionnels.
• Cordova vous permet de créer des applications mobiles à l'aide de HTML, CSS et JavaScript.
• React Native vous permet de créer des applications mobiles à l'aide du framework React.

API du navigateur

Au cours des dernières années, de nombreuses nouvelles API ont été introduites dans le navigateur qui vous permettent de faire toutes sortes de choses intéressantes.

• L'API des travailleurs de service est une grande API qui nous permet d'effectuer diverses opérations, comme fournir un support hors ligne.
• WebBrTC est une API qui nous permet d'établir une connexion en temps réel avec un autre ordinateur et de passer des données audio et vidéo.

Certaines API nous permettent d'utiliser du matériel de périphérique, comme les capteurs de lecture ou le fait que l'appareil effectue certaines opérations (comme les vibrations).

• Le capteur de lumière ambiante fournit des informations sur la luminosité de la lumière ambiante que nous pouvons utiliser pour ajuster notre site Web ou notre application.
• L'état de la batterie est assez évident; nous pouvons demander l'état de la batterie. Les applications plus lourdes peuvent l'utiliser pour activer le mode d'économie d'énergie.
• L'emplacement géographique nous fournit des informations sur l'emplacement de l'utilisateur.
• Nous pouvons utiliser des informations réseau pour fournir des fichiers plus petits aux clients.
• Les notifications sont très utiles pour de nombreuses applications, telles que les applications de chat.
• Créez-vous un jeu qui utilise la souris pour saisir? Le verrouillage du pointeur est votre ami.
• Le capteur de proximité vous permet de comprendre la distance entre l'utilisateur et l'appareil. Peut-être que cela peut être utilisé pour détecter les câlins?
• La direction de l'appareil nous permet de détecter les changements de direction.
• La vibration nous permet de vibrer l'appareil, ce qui est idéal pour les jeux.

bibliothèques et frameworks

La plupart des bibliothèques sont conçues pour accomplir facilement des tâches, il est donc toujours avantageux d'avoir de l'expérience en les utilisant. Des bibliothèques et des cadres plus populaires tels que Angular et React peuvent même être un incontournable pour le travail. Une ou deux expériences peuvent également être un excellent moyen de se préparer à une entrevue.

Sachez que les bibliothèques et les cadres ont des durées de vie limitées. Bien qu'ils soient utiles, vous devriez être en mesure de comprendre les problèmes qu'ils résolvent et de les résoudre sans eux.

Structure

• Angular est un cadre MVC que de nombreuses équipes utilisent toujours.
• React est une bibliothèque pour le rendu des vues.
• Polymer est une bibliothèque pour créer des composants Web.
• lodash.js, sous-traitants.js et rameda.js sont toutes des bibliothèques de programmation fonctionnelle. Certaines équipes aiment les utiliser, mais beaucoup ne le font pas. Quoi qu'il en soit, une bonne compréhension de la programmation fonctionnelle est une compétence très populaire.

visuel

• d3.js est une bibliothèque de fonctionnalités graphiques et DOM qui fonctionne très bien si vous souhaitez rendre des graphiques à l'aide de SVG ou HTML.
• p5.js est une bibliothèque inspirée du traitement (un carnet de croquis de logiciel flexible et un langage pour "& gt; Apprenez à coder dans le contexte des arts visuels"). Il a une riche série de fonctions pour dessiner des formes et effectuer des calculs.
• trois.js est une API 3D de haut niveau pour abstraction des parties difficiles de WebGL.

monde physique

Personnellement, j'étais vraiment excité quand je pouvais écrire un logiciel pour faire des choses dans le monde physique. Si c'est le cas, pensez à acheter l'un des ensembles suivants:

• Raspberry Pi est un ordinateur à bord unique de la taille d'une carte de crédit et parfait pour l'enseignement ou l'apprentissage.
• L'Arduino est similaire au Raspberry Pi, mais se concentre davantage sur l'aspect électronique.
• LEGO® MINDSTORMS® est un micro-ordinateur qui peut contrôler le matériel LEGO. Qu'est-ce que tu n'aimes pas?
• Johhny-Five est un framework JavaScript pour la robotique et l'Internet des objets qui peuvent être installés sur un arduino ou un appareil similaire.

Tout ce qui précède peut être programmé en JavaScript, ou peut exécuter JavaScript.

Conclusion

Les petites expériences sont une excellente pratique pour apprendre de nouvelles choses. Un autre avantage est qu'ils peuvent vous aider à améliorer votre façon de travailler, ce qui est inestimable dans notre industrie. En appliquant certaines règles, nous pouvons garder les expériences intéressantes et nous motiver à en savoir plus et à devenir meilleure.

Pour ceux qui sont en difficulté, j'espère que cet article vous inspirera à commencer une nouvelle expérience intéressante. Pour ceux qui ne savent pas quoi gérer ensuite, j'espère que cet article vous inspirera. Ou peut-être avez-vous de bonnes idées sur l'expérimentation? Ou peut-être que je manque quelque chose? Quoi qu'il en soit, j'aimerais vous entendre dans les commentaires ci-dessous.

Les questions fréquemment posées sur les expériences d'apprentissage JavaScript

Quels projets pratiques puis-je faire pour améliorer mes compétences en JavaScript?

Il existe de nombreux projets pratiques que vous pouvez faire pour améliorer vos compétences en JavaScript. Par exemple, vous pouvez créer une calculatrice simple, une horloge numérique ou une application météo. Ces projets vous aideront à comprendre comment JavaScript interagit avec HTML et CSS pour créer des applications Web fonctionnelles. Vous pouvez également essayer de créer une application de liste de tâches, qui vous aidera à comprendre comment manipuler les modèles d'objets de document (DOMS) à l'aide de JavaScript.

Comment utiliser JavaScript dans Google Experiments?

Google Experiment est une plate-forme qui vous permet de tester et de démontrer vos compétences en JavaScript. Vous pouvez créer des expériences interactives à l'aide de JavaScript et les partager avec le monde. Pour utiliser JavaScript dans Google Experiments, vous avez besoin d'une compréhension de base du fonctionnement de JavaScript et de la façon de l'utiliser pour manipuler les éléments Web.

Quel est le rôle de JavaScript dans la création de pages Web interactives?

JavaScript joue un rôle crucial dans la création de pages Web interactives. Il vous permet de manipuler des éléments sur les pages Web en fonction des actions des utilisateurs. Par exemple, vous pouvez utiliser JavaScript pour modifier le contenu d'une page Web lorsqu'un utilisateur clique sur un bouton ou pour animer des éléments sur la page Web.

Comment créer des animations en utilisant JavaScript?

JavaScript fournit une variété de façons de créer des animations sur les pages Web. Vous pouvez créer des animations lisses à l'aide de la méthode de demandeanimationframe. Cette méthode indique au navigateur d'exécuter l'animation et demande au navigateur d'appeler la fonction spécifiée pour mettre à jour l'animation avant le prochain redessine.

Quelle est l'importance du JavaScript dans le développement Web?

JavaScript est un composant de base du développement Web. Il vous permet de créer des pages Web interactives et dynamiques en manipulant des éléments sur une page Web. Sans JavaScript, la page Web sera statique et ne répondra pas aux opérations utilisateur.

Comment améliorer mes compétences en codage JavaScript?

La meilleure façon d'améliorer les compétences en codage JavaScript est la pratique. Vous pouvez pratiquer vos compétences en réalisant divers projets, tels que la création d'une calculatrice ou d'une application de liste de tâches. Vous pouvez également participer à des défis de codage sur des plates-formes telles que Codepen pour tester vos compétences.

Quelles sont les ressources pour apprendre JavaScript?

Il existe de nombreuses ressources disponibles pour apprendre JavaScript. Des sites Web tels que CodeCademy, FreeCodeCamp et Mozilla Developer Network fournissent des tutoriels et des guides gratuits sur JavaScript. Vous pouvez également trouver de nombreux tutoriels vidéo sur YouTube.

Comment déboguer mon code JavaScript?

Vous pouvez utiliser la console dans les outils du développeur du navigateur pour déboguer le code JavaScript. La console vous permet de connecter les messages, d'afficher les erreurs et d'exécuter du code JavaScript en temps réel.

Quel est le rôle de JavaScript dans le développement frontal?

JavaScript est un élément clé du développement frontal. Il vous permet de créer des pages Web interactives et dynamiques, de vérifier l'entrée de l'utilisateur et de communiquer avec le serveur Web.

Comment interagir avec un serveur Web à l'aide de JavaScript?

Vous pouvez utiliser JavaScript pour envoyer des demandes au serveur Web et recevoir des réponses. Cela se fait à l'aide de l'API Fetch ou de l'objet XMLHttpRequest. Cela vous permet de mettre à jour les parties de la page sans recharger toute la page.

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!