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
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
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
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 !
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
Des ressources Javascript pour mieux comprendre et domestiquer le DOM Aujourd'hui, le blog du Webdesign vous propose une liste de ressources Javascript qui vous permettons de mieux vous occuper de votre DOM ! Au programme : Modification, diff, détection de fonctionnalités, et bien d'autres choses ! Bonne découverte Qu'est-ce que le DOM ? Le Document Object Model (ou DOM) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents HTML3 et XML4. Source : Wikipedia En clair, le DOM est la vision qu'a votre navigateur du code source HTML du site où vous êtes en train de visiter, et c'est à travers la modification de ce DOM que vous pourrez interagir avec votre page en Javascript. Le plus important à retenir est que le DOM n'est pas votre code HTML, mais une interprétation de ce dernier. Détecter les fonctionnalités disponibles Modernizr Feature.js Interagir avec le DOM
Fun with code Automatisez votre workflow front-end Il était une fois un webmaster Jadis, par des temps lointains datant de l'époque où l'on comptait encore les mégahertz des processeurs, il existait des gens qui concevaient, développaient, et alimentaient des sites Internet. Tout seuls ! Enfin tout ça, c'était avant. Petit à petit, avec le temps, la pratique, l'évolution d'Internet, les webmasters, surchargés par la masse de travail à réaliser pour s'occuper d'un site, se sont scindés en différents groupes. Certains sont restés sur la conception. De part ma position dans ce milieu, je vais vous parler du poste de développeur, et plus précisément du développeur d'interface. Le webmaster c'est un peu comme l'agriculteur qui s'occupe d'aller au marché vendre ses produits. Après j'en aime bien une autre, celle du gardien de foot. Mais je m'égare, parlons automatisation. Pourquoi automatiser ? C'est sûr que là comme ça, quand on résume notre façon de faire, on voit mal comment automatiser tout ça. Bon courage. Comment automatiser ? Premier pas
PureScript