Spec Wiki JavaScript MDN DOC [fr] JavaScript (JS) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via eval), object introspection (via for...in and Object utilities), and source-code recovery (JavaScript functions store their source text and can be retrieved through toString()). This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. Looking to become a front-end web developer? Get started
Medusa - the open source Shopify alternative Utiliser les différents tests d'égalité JavaScript fournit trois opérations permettant de comparer des valeurs : Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations. En résumé, l'égalité faible effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison, l'égalité stricte effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents), enfin Object.is() se comportera comme l'égalité stricte sauf pour les valeurs NaN, -0 et +0 : pour Object.is(), -0 et +0 seront différents mais on aura Object.is(NaN, NaN) qui sera true. L'égalité stricte avec ===Edit L'égalité stricte compare deux valeurs et teste leur égalité. Ce test d'égalité stricte est presque toujours la meilleure des opérations à considérer pour ces tests. L'égalité faible avec ==Edit Le test d'égalité faible compare deux valeurs après les avoir converties en valeurs d'un même type. Égalité de valeursEdit Égalité de valeurs nullesEdit
Javascript Cheat Sheet Basic Objects Math Methods DOM Events Event Object Constant Event Object Methods initEvent() preventDefault() stopPropagation() EventTarget Object addEventListener() dispatchEvent() removeEventListener() EventListener Object handleEvent() MouseEvent/KeyboardEvent Methods initMouseEvent() initKeyboardEvent() DOM Node Node Types Element1 Attr2 Text3 CDATASection4 EntityReference5 Entity6 ProcessingInstruction7 Comment8 Document9 DocumentType10 DocumentFragment11 Notation12 nodeName Returns Element element name Attr attribute name Text #text CDATASection #cdata-section EntityReference entity reference name Entity entity name ProcessingInstruction target Comment #comment Document #document DocumentType doctype name DocumentFragment #document fragment Notation notation name nodeValue Returns RegExp Modifiers i Perform case-insensitive matching g Perform a global match (find all matches rather than stopping after the first match) m Perform multiline matching Brackets Metacharacters . Quantifiers Core DOM length
Isotope · Filter & sort magical layouts Utilisez la console JavaScript des navigateurs Concevoir un site dynamique implique de faire appel à JavaScript, langage de plus en plus populaire et puissant. Afin de donner les bons outils aux développeurs web, les navigateurs se sont peu à peu équipés de consoles de développement permettant d'entrer des instructions à la volée, avec bien souvent de l'auto-complétion, de consulter les données en mémoire ou d'explorer les fonctions et variables disponibles. Des commandes plus avancées visent à définir des points d'arrêt et d'inspecter la pile des appels. La console est un outil indispensable lorsque l'on souhaite écrire quelques lignes de JavaScript, ou bien concevoir des scripts plus évolués notamment avec des frameworks tels que jQuery. Accès La console se retrouve bien souvent dans un menu orienté pour les développeurs, à l'aide d'une touche de raccourci, ou dans des extensions spécifiques telles que Firebug pour Firefox. Aperçus Internet Explorer Google Chrome Mozilla Firefox Opera Astuces Fonctions utiles Journal console.log(fruits);
Chrome DevTools - Déboguer JavaScript Ce tutoriel présente le workflow de base pour déboguer les problèmes JavaScript dans les outils de développement. Lue ou regardez la version vidéo de ce didacticiel. Reproduire le bug Trouver une série d'actions qui reproduisent systématiquement un bug est toujours la première étape le débogage. Ouvrez cette démonstration dans un nouvel onglet.Saisissez 5 dans le champ Numéro 1.Saisissez 1 dans le champ Numéro 2.Cliquez sur Ajouter numéro 1 et numéro 2. Dans cet exemple, le résultat de 5 + 1 est 51. Se familiariser avec l'interface utilisateur du panneau "Sources" Les outils de développement fournissent de nombreux outils différents pour différentes tâches, comme la modification du code CSS, le profilage de pages les performances de chargement et la surveillance des requêtes réseau. Ouvrez les outils de développement et accédez au panneau Sources. Le panneau Sources comporte trois sections: Mettre en pause le code avec un point d'arrêt Examiner le code Vérifier les valeurs des variables
8 must-know tips for writing clean code with Javascript Javascript is an awesome programming language, however, writing clean javascript code can be a challenge, even for seasoned programmers. What does clean javascript code look like? It should be: Easy to readEasy to debugEfficient and high performing Here are the top tools and tricks you can use take your Javascript code quality to the next level: 1. Numerous things can go wrong when making api requests to fetch data, so taking care of these scenarios are a must. 2. 3. A major component of keeping your Javascript codebase clean is making it easy to track and see issues in the code itself. Get full visibility on larger issues like tech debtSee context for each codebase issueReduce context switchingSolve tech debt continuously You can use various tools to track your technical debt but the quickest and easiest way to get started is to use the free Stepsize extensions for VSCode or JetBrains that integrate with Jira, Linear, Asana and other project management tools. 4. 5. 6. 7. 8.
Coder en Javascript dans une console Depuis l’apparition des consoles Javascript, on peut debugger plus facilement des erreurs de scripts, qui à l’époque d’IE6 & co se faisait à coup de alert(). Un chose que je ne trouve pas très répandu, c’est d’utiliser ces consoles pour coder directement, de petit morceaux de code, sans se (re)taper d’ajouter du script inline, ou un fichier juste pour avoir bonne conscience. Avec une console avancée, on peut même éditer des scripts en cours d’exécution ! A quoi ça sert de coder du Javascript dans une console ? Un exemple très simple sera plus parlant : vous voyez un paragraphe de texte et vous vous demandez combien il comporte de caractères. $0 est très simple d’utilisation, et peut être très utile. Utilisation : compter le texte d’un paragraphe Admettons que vous cherchez à compter le nombre de caractères dans une <div>, inspectez là, puis dans votre console entrez-y la ligne suivante: $0.innerHTML.length Et voilà vous avez votre résultat ! Coder plus d’un ligne jQuery.noConflict();
Chrome DevTools - Analyser les performances de l'environnement d'exécution Les performances d'exécution correspondent aux performances de votre page lorsqu'elle est en cours d'exécution et non lors de son chargement. Dans ce tutoriel, vous allez apprendre à utiliser le panneau "Performances des outils pour les développeurs Chrome" afin d'analyser les performances d'exécution. En ce qui concerne le modèle RAIL, les compétences acquises dans ce tutoriel sont utiles pour analyser les phases de réponse, d'animation et d'inactivité de votre page. Commencer Dans ce tutoriel, vous allez ouvrir les outils de développement sur une page en ligne et utiliser le panneau "Performances" pour identifier un goulot d'étranglement qui affecte les performances de la page. Ouvrez Google Chrome en mode navigation privée. Figure 1 : Démonstration (à gauche) et outils de développement (à droite) Simuler un processeur mobile Les appareils mobiles ont une puissance de processeur beaucoup moins élevée que les ordinateurs de bureau et les ordinateurs portables. Configurer la démo Ouf !
Use JSDoc: @param Table of Contents Synonyms @arg @argument Overview The @param tag provides the name, type, and description of a function parameter. The @param tag requires you to specify the name of the parameter you are documenting. The parameter type can be a built-in JavaScript type, such as string or Object, or a JSDoc namepath to another symbol in your code. If you provide a description, you can make the JSDoc comment more readable by inserting a hyphen before the description. Examples Names, types, and descriptions The following examples show how to include names, types, and descriptions in a @param tag. /** * @param somebody */function sayHello(somebody) { alert('Hello ' + somebody);} /** * @param {string} somebody */function sayHello(somebody) { alert('Hello ' + somebody);} /** * @param {string} somebody Somebody's name. You can add a hyphen before the description to make it more readable. /** * @param {string} somebody - Somebody's name. Parameters with properties Callback functions
Un gros Troll de plus sur Javascript Un commentaire très pertinent de Kontre m’a interpellé dernièrement : si Javascript est si pourri, pourquoi tout le monde s’y intéresse ? TD;DR :L’inertie technique. Il faut bien comprendre que PERSONNE ne s’intéresse à Javascript directement. Les gens s’intéressent passionnément à la programmation Web. Et il se trouve que, concernant la programmation côté client, il y a QUE Javascript de disponible. Quand Ajax est arrivé, des mecs brillants ont rendu le Web plus interactif. Parce que c’était la seule solution dispo. Avant, personne ne s’intéressait à ce truc. Personne n’a réfléchi. L’heure du Web 2.0 a alors sonné, et là les business ont eu besoin de puissance de feu. Google a utilisé massivement les pages dynamiques, et devant le constat des performances misérables de la seule techno qu’il y avait a dispo, il a pondu chrome, et sa VM Javascript ultra performante. Personne. Cherche Dev Javascript pour travailler sur projet innovant dans une start up à fort potentiel de croissance. Ruby :
Webpack - Bundler At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from. Since version 4.0.0, webpack does not require a configuration file to bundle your project. Nevertheless, it is incredibly configurable to better fit your needs. To get started you only need to understand its Core Concepts: This document is intended to give a high-level overview of these concepts, while providing links to detailed concept-specific use cases. For a better understanding of the ideas behind module bundlers and how they work under the hood, consult these resources: Entry An entry point indicates which module webpack should use to begin building out its internal dependency graph. By default its value is . webpack.config.js Output Loaders Plugins Mode Environment