[
{
"path": ".gitattributes",
"content": "* text=auto eol=lf\n*.svg binary\n"
},
{
"path": ".gitignore",
"content": "*.diff\n*.err\n*.orig\n*.log\n*.rej\n*.swo\n*.swp\n*.vi\n*~\n*.sass-cache\n\n# OS or Editor folders\n.DS_Store\n.idea\n.cache\n.project\n.settings\n.tmproj\n.nvmrc\nsftp-config.json\nThumbs.db\ntags\n\n/svgs"
},
{
"path": "1-js/01-getting-started/1-intro/article.md",
"content": "# Une Introduction à JavaScript\n\nVoyons ce qui est spécial à propos de JavaScript, ce qu'il nous permet de faire et avec quelles autres technologies il s'accorde bien.\n\n\n\n## Qu'est-ce que JavaScript ?\n\n_JavaScript_ a été initialement créé pour \"rendre les pages web vivantes\".\n\nLes programmes dans ce langage sont appelés _scripts_. Ils peuvent être écrits directement dans une page HTML et exécutés automatiquement au chargement des pages.\n\nLes scripts sont fournis et exécutés en texte brut. Ils n'ont pas besoin d'une préparation spéciale ou d'une compilation pour fonctionner.\n\nDe par cet aspect, JavaScript est très différent d'un autre langage appelé [Java]().\n\n```smart header=\"Pourquoi est-il appelé JavaScript ?\"\nQuand JavaScript a été créé, il portait initialement un autre nom : \"LiveScript\". Mais à cette époque le langage Java était très populaire, il a donc été décidé que positionner un nouveau langage en tant que \"petit frère\" de Java pourrait aider.\n\nMais au fur et à mesure de son évolution, JavaScript est devenu un langage totalement indépendant, avec ses propres spécifications appelées [ECMAScript](https://fr.wikipedia.org/wiki/ECMAScript), aujourd'hui il n'a aucun rapport avec Java.\n```\n\nAujourd'hui, JavaScript peut s'exécuter non seulement dans le navigateur, mais également sur un serveur, ou encore sur n'importe quel appareil dans lequel existe un programme appelé [le moteur JavaScript](https://fr.wikipedia.org/wiki/Moteur_JavaScript).\n\nLe navigateur a un moteur intégré, parfois il peut être également appelé \"la machine virtuelle JavaScript\".\n\nDifférents moteurs ont différents \"nom de code\", par exemple :\n\n- [V8]() -- dans Chrome et Opera.\n- [SpiderMonkey](https://fr.wikipedia.org/wiki/SpiderMonkey) -- dans Firefox.\n- … Il existe d'autres noms de code comme \"Chakra\" pour IE, \"JavaScriptCore\", \"Nitro\" et \"SquirrelFish\" pour Safari etc.\n\nLes termes ci-dessus sont bons à retenir, car ils sont utilisés dans les articles destinés aux développeurs sur Internet. Nous les utiliserons aussi. Par exemple, si \"une fonctionnalité X est prise en charge par V8\", cela fonctionne probablement dans Chrome, Edge et Opera.\n\n```smart header=\"Comment fonctionnent les moteurs ?\"\n\nLes moteurs sont compliqués. Mais le fonctionnement de base est facile à comprendre.\n\n1. Le moteur (intégré si c’est un navigateur) lit (\"analyse\") le script.\n2. Ensuite, il convertit (\"compile\") le script en langage machine.\n3. Enfin le code machine s'exécute, très rapidement.\n\nLe moteur applique des optimisations à chaque étape du processus. Il surveille même le script compilé en cours d'exécution, analyse les données qui le traversent et applique des optimisations au code machine en fonction de ces informations.\n```\n\n## Que peut faire JavaScript dans le navigateur ?\n\nLe JavaScript moderne est un langage de programmation \"sûr\". Il ne fournit pas d'accès de bas niveau à la mémoire ou au processeur, parce qu'il a été initialement conçu pour les navigateurs qui n'en ont pas besoin.\n\nLes fonctionnalités dépendent grandement de l'environnement qui exécute JavaScript. Par exemple, [Node.js](https://fr.wikipedia.org/wiki/Node.js) prend en charge les fonctions qui permettent à JavaScript de lire / écrire des fichiers arbitrairement, d'exécuter des requêtes réseau, etc.\n\nJavaScript intégré au navigateur peut faire tout ce qui concerne la manipulation des pages Web, l'interaction avec l'utilisateur et le serveur Web.\n\nPar exemple, JavaScript dans le navigateur est capable de :\n\n- Ajouter un nouveau code HTML à la page, modifier le contenu existant, modifier les styles.\n- Réagir aux actions de l'utilisateur, s'exécuter sur des clics de souris, des mouvements de pointeur, des appuis sur des touches.\n- Envoyer des requêtes sur le réseau à des serveurs distants, télécharger et envoyer des fichiers (technologies [AJAX]() et [COMET]()).\n- Obtenir et définir des cookies, poser des questions au visiteur, afficher des messages.\n- Se souvenir des données du côté client (\"stockage local\").\n\n## Qu'est-ce que JavaScript ne peut pas faire dans le navigateur ?\n\nLes capacités de JavaScript dans le navigateur sont limitées pour la sécurité de l'utilisateur. L'objectif est d'empêcher une page Web malveillante d'accéder à des informations privées ou de nuire aux données de l'utilisateur.\n\nLes exemples de telles restrictions sont :\n\n- JavaScript sur une page Web ne peut pas lire/écrire des fichiers arbitrairement sur le disque dur, les copier ou exécuter des programmes. Il n'a pas d'accès direct aux fonctions du système d'exploitation.\n\n Les navigateurs modernes lui permettent de fonctionner avec des fichiers, mais l'accès est limité et n'est fourni que si l'utilisateur effectue certaines actions, comme «déposer» un fichier dans une fenêtre de navigateur ou le sélectionner via une balise ``.\n\n Il existe des moyens d’interagir avec une webcam/microphone et d’autres périphériques, mais ils nécessitent une autorisation explicite de l’utilisateur. Ainsi, une page contenant du JavaScript ne permet pas d'activer une caméra Web, d'observer l'environnement et d'envoyer les informations à la [NSA](https://fr.wikipedia.org/wiki/National_Security_Agency).\n\n- Différents onglets / fenêtres ne se connaissent généralement pas. Parfois, ils se croisent, par exemple lorsqu'une fenêtre utilise JavaScript pour ouvrir l'autre. Mais même dans ce cas, le JavaScript d'une page ne peut pas accéder à l'autre si elle provient de sites différents (provenant d'un autre domaine, protocole ou port).\n\n C'est ce qu'on appelle la \"politique de même origine\" (“Same Origin Policy”). Pour contourner cette sécurité, _les deux pages_ doivent se mettre d'accord et contenir un code JavaScript spécial qui gère l'échange de données. Nous verrons cela plus loin dans ce tutoriel.\n\n Cette limitation concerne également la sécurité de l'utilisateur. Une page de `http://autresite.com` qu'un utilisateur a ouvert ne doit pas pouvoir accéder à un autre onglet du navigateur avec l'URL `http://gmail.com` et y voler des informations.\n\n- JavaScript peut facilement communiquer sur le net avec le serveur d'où provient la page. Mais sa capacité à recevoir des données d'autres sites / domaines est paralysée. Bien que possible, il nécessite un accord explicite (exprimé dans les en-têtes HTTP) du côté distant. Encore une fois, ce sont des limites de sécurité.\n\n\n\nDe telles limites n'existent pas si JavaScript est utilisé en dehors du navigateur, par exemple sur un serveur. Les navigateurs modernes permettent également l’installation de plug-ins / extensions susceptibles d’obtenir des autorisations étendues.\n\n## Qu'est-ce qui rend JavaScript unique ?\n\nIl y a au moins trois bonnes choses à propos de JavaScript :\n\n```compare\n+ Intégration complète avec HTML / CSS.\n+ Les choses simples sont faites simplement.\n+ Pris en charge par tous les principaux navigateurs et activé par défaut.\n```\n\nJavaScript est la seule technologie de navigateur qui combine ces trois éléments.\n\nC’est ce qui rend JavaScript unique. C’est pourquoi il l’outil le plus répandu pour créer des interfaces de navigateur.\n\nCela dit, JavaScript permet également de créer des serveurs, des applications mobiles, etc.\n\n## Les langages \"par dessus\" JavaScript\n\nLa syntaxe de JavaScript ne convient pas aux besoins de tous. Différentes personnes veulent des fonctionnalités différentes.\n\nIl faut s’y attendre, parce que besoins sont différents pour tous.\n\nDonc, récemment, une pléthore de nouveaux langages sont apparus, qui sont _transpilés_ (convertis) en JavaScript avant leur exécution dans le navigateur.\n\nLes outils modernes rendent la [transpilation](https://fr.wiktionary.org/wiki/transpilation) très rapide et transparente, permettant aux développeurs de coder dans un autre langage et de le convertir automatiquement \"sous le capot\".\n\nLes exemples de ce genre de langages :\n\n- [CoffeeScript](http://coffeescript.org/) est un \"sucre syntaxique\" pour JavaScript, il introduit une syntaxe plus courte, permettant d’écrire du code plus précis et plus clair. Habituellement, les développeurs Ruby l'aiment bien.\n- [TypeScript](http://www.typescriptlang.org/) se concentre sur l'ajout de \"typage strict des données\" pour simplifier le développement et la prise en charge de systèmes complexes. Il est développé par Microsoft.\n- [Flow](http://flow.org/) ajoute également la saisie de données, mais de manière différente. Développé par Facebook.\n- [Dart](https://www.dartlang.org/) est un langage autonome doté de son propre moteur qui s'exécute dans des environnements autres que les navigateurs (comme les applications mobiles), mais peut aussi être transpilé en JavaScript. Développé par Google.\n- [Brython](https://brython.info/) est un transpiler (ou transpileur en bon français) Python vers JavaScript qui permet d'écrire des applications en Python pur sans JavaScript.\n- [Kotlin](https://kotlinlang.org/docs/reference/js-overview.html) est un langage de programmation moderne, concis et sûr qui peut cibler le navigateur ou Node.js\n\nIl en existe évidemment bien plus, cela dit, même si nous utilisons un de ces langages transpilés, nous devrions également connaître le langage JavaScript, pour bien comprendre ce que nous faisons.\n\n## Résumé\n\n- JavaScript a été initialement créé en tant que langage de navigateur uniquement, mais il est désormais également utilisé dans de nombreux autres environnements.\n- En ce moment, JavaScript occupe une position unique en tant que langage de navigateur le plus largement adopté avec une intégration complète avec HTML/CSS.\n- De nombreux langages sont _transpilés_ en JavaScript et fournissent certaines fonctionnalités. Il est recommandé d'y jeter un coup d'œil, au moins brièvement, après avoir maîtrisé JavaScript.\n"
},
{
"path": "1-js/01-getting-started/2-manuals-specifications/article.md",
"content": "\n# Manuels et spécifications\n\nCe livre est un *tutoriel*. Il vise à vous aider à apprendre progressivement le langage. Mais une fois que vous maîtriserez les bases, vous aurez besoin d’autres ressources.\n\n\n\n## Spécification\n\n[The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) contient les informations les plus détaillées et formalisées sur JavaScript. C'est elle qui définit le langage.\n\nUne nouvelle version de la spécification est publiée chaque année. La dernière version en cours est disponible à cette adresse : .\n\nPour en savoir plus sur les fonctionnalités à venir, y compris celles qui sont \"presque standards\" (appelées aussi \"stage 3\"), vous pouvez consulter les propositions à cette adresse : .\n\nDe plus, si vous développez pour le navigateur, d'autres spécifications sont couvertes dans la [seconde partie](info:browser-environment) du tutoriel.\n\n## Manuels\n\n- **La référence MDN (Mozilla) JavaScript** est le principal manuel avec des exemples et d’autres informations. C’est une excellente source pour obtenir des informations détaillées sur les fonctions linguistiques, les méthodes, etc.\n\n On peut la trouver à cette adresse : .\n\n Cependant, il est souvent préférable d’utiliser une recherche sur Internet. Utilisez simplement \"MDN [terme]\" dans la requête, par exemple pour rechercher la fonction `parseInt`.\n\n\n## Tableaux de compatibilité\n\nJavaScript est un langage en développement, de nouvelles fonctionnalités sont ajoutées régulièrement.\n\nPour voir si elles sont supportées dans les moteurs, au sein des navigateurs et autres, voir :\n\n- - tables de prise en charge par fonctionnalité, par exemple pour voir quels moteurs supportent les fonctions de cryptographie modernes : .\n- - un tableau avec les fonctionnalités linguistiques et les moteurs qui les prennent en charge ou non.\n\nToutes ces ressources sont utiles dans le quotidien des développeurs, parce qu'elles contiennent des informations précieuses sur les fonctionnalités du langage, leur support, etc.\n\nVeuillez vous en souvenir (ou de cette page) pour les cas où vous avez besoin d'informations détaillées sur une fonctionnalité particulière.\n"
},
{
"path": "1-js/01-getting-started/3-code-editors/article.md",
"content": "# Les éditeurs de code \n\n\n\nUn éditeur de code est l'endroit où les programmeurs passent la plus grande partie de leur temps.\n\nIl existe deux archétypes: IDE et les éditeurs légers. Beaucoup de personnes se sentent à l'aise pour choisir un outil de chaque type.\n\n## IDE\n\nLe terme [IDE](https://fr.wikipedia.org/wiki/Environnement_de_développement) (Integrated Development Environment) signifie un éditeur puissant avec de nombreuses fonctionnalités qui fonctionne généralement sur un \"projet entier\". Comme son nom l’indique, ce n’est pas seulement un éditeur, mais un environnement de développement complet.\n\nUn IDE charge le projet (peut contenir de nombreux fichiers), permet la navigation entre les fichiers, fournit une auto-complétion basée sur l'ensemble du projet (pas seulement le fichier ouvert), s'intègre à un système de gestion de version (comme [git](https://git-scm.com/)), un environnement de test et d’autres éléments au niveau du projet.\n\nSi vous n'avez pas encore pensé à sélectionner un IDE, examinez les variantes suivantes :\n\n- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).\n- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, payant).\n\nPour Windows, il existe également \"Visual Studio\", à ne pas confondre avec \"Visual Studio Code \". \"Visual Studio\" est un IDE payant et puissant, disponible sur Windows et Mac, bien adapté à la plate-forme .NET. C’est aussi bon en JavaScript. Il y a aussi une version gratuite [Visual Studio Community](https://www.visualstudio.com/vs/community/).\n\nLa plupart des IDE sont payants, mais ont une période d'essai. Leur coût est généralement négligeable par rapport au salaire d’un développeur qualifié, alors choisissez le meilleur pour vous.\n\n## Les éditeurs légers\n\n\"Les éditeurs légers\" ne sont pas aussi puissants que les IDE, mais ils sont rapides, élégants et simples.\n\nIls sont principalement utilisés pour ouvrir et éditer instantanément un fichier.\n\nLa principale différence entre un \"éditeur léger\" et un \"IDE\" réside dans le fait qu’un environnement de développement intégré fonctionne au niveau du projet. Il charge donc beaucoup plus de données au démarrage, analyse la structure du projet si nécessaire, etc. Un éditeur léger est beaucoup plus rapide si nous avons besoin d'un seul fichier.\n\nEn pratique, les éditeurs légers peuvent avoir beaucoup de plug-ins, y compris des analyseurs de syntaxe au niveau des répertoires et des autocompléteurs. Il n’y a donc pas de frontière stricte entre un éditeur léger et un IDE.\n\nIl existe de nombreuses options, par exemple :\n\n- [Sublime Text](http://www.sublimetext.com) (multiplateforme, payant).\n- [Notepad++](https://notepad-plus-plus.org/) (Windows, gratuit).\n- [Vim](https://www.vim.org/) et [Emacs](https://www.gnu.org/software/emacs/) sont également cool, si vous savez comment les utiliser.\n\n\n## Ne discutons pas\n\nLes éditeurs des listes ci-dessus sont ceux que moi-même ou mes amis, que je considère comme de bons développeurs, utilisent depuis longtemps et en sont satisfaits.\n\nIl y a d'autres grands éditeurs dans notre vaste monde. Veuillez choisir celui que vous aimez le plus.\n\nLe choix d'un éditeur, comme tout autre outil, est individuel et dépend de vos projets, de vos habitudes, de vos préférences personnelles.\n\nL'avis personnel de l'auteur :\n\n- J'utilise [Visual Studio Code](https://code.visualstudio.com/) si je développe principalement du frontend.\n- Sinon, s'il s'agit principalement d'un autre langage/plate-forme et partiellement d'un frontend, envisagez d'autres éditeurs, tels que XCode (Mac), Visual Studio (Windows) ou la famille Jetbrains (Webstorm, PHPStorm, RubyMine, etc., selon le langage).\n"
},
{
"path": "1-js/01-getting-started/4-devtools/article.md",
"content": "# La console de développement\n\n\n\nLe code est sujet aux erreurs. Vous êtes susceptible de faire des erreurs … Oh, de quoi je parle ? Vous allez absolument faire des erreurs, du moins si vous êtes un humain, pas un [robot](https://fr.wikipedia.org/wiki/Bender_Tordeur_Rodr%C3%ADguez).\n\nMais dans le navigateur, un utilisateur ne voit pas les erreurs par défaut. Ainsi, si quelque chose ne va pas dans le script, nous ne verrons pas ce qui ne va pas et nous ne pourrons pas le réparer.\n\nPour voir les erreurs et obtenir beaucoup d’informations utiles sur les scripts, les navigateurs intègrent des \"outils de développement\".\n\nLe plus souvent, les développeurs se tournent vers Chrome ou Firefox pour le développement, car ces navigateurs disposent des meilleurs outils de développement. D'autres navigateurs fournissent également des outils de développement, parfois dotés de fonctions spéciales, mais jouent généralement le rôle de \"rattrapage\" pour Chrome ou Firefox. Donc, la plupart des gens ont un navigateur \"favori\" et passent à d'autres si un problème est spécifique au navigateur.\n\nLes outils de développement sont très puissants ; ils possèdent de nombreuses fonctionnalités. Pour commencer, nous allons apprendre à les ouvrir, à examiner les erreurs et à exécuter des commandes JavaScript.\n\n## Google Chrome\n\nOuvrez la page [bug.html](bug.html).\n\nIl y a une erreur dans le code JavaScript. Elle est invisible à un visiteur habituel, alors ouvrons les outils de développement pour la voir.\n\nAppuyez sur `key:F12` ou, si vous êtes sur Mac, utilisez la combinaison `key:Cmd+Opt+J`.\n\nLes outils de développement s'ouvriront sous l'onglet Console par défaut.\n\nCela ressemble un peu à ceci :\n\n\n\nL'aspect exact des outils de développement dépend de votre version de Chrome. Cela change de temps en temps, mais devrait être similaire.\n\n- Ici, nous pouvons voir le message d'erreur de couleur rouge. Dans ce cas, le script contient une commande \"lalala\" inconnue.\n- Sur la droite, il y a un lien cliquable vers le code source bug.html:12 avec le numéro de ligne où l'erreur s'est produite.\n\nSous le message d'erreur, il y a un symbole bleu `>`. Il marque une \"ligne de commande\" où l'on peut taper des commandes JavaScript et appuyer sur `key:Enter` pour les exécuter.\n\nNous pouvons maintenant voir les erreurs et c’est suffisant pour le début. Nous reviendrons plus tard sur les outils de développement et approfondirons le débogage plus loin dans le chapitre .\n\n```smart header=\"Multi-line input\"\nHabituellement, quand on met une ligne de code dans la console, puis qu'on appuie sur `key:Enter`, elle s'exécute.\n\nPour insérer plusieurs lignes, appuyez sur `key:Shift+Enter`. De cette façon, on peut saisir de longs fragments de code JavaScript.\n```\n\n## Firefox, Edge et autres\n\nLa plupart des autres navigateurs utilisent `key:F12` pour ouvrir les outils de développement.\n\nLeur apparence est assez similaire. Une fois que vous savez comment utiliser l'un d'entre eux (vous pouvez commencer avec Chrome), vous pouvez facilement passer à un autre.\n\n## Safari\n\nSafari (navigateur Mac, non pris en charge par Windows / Linux) est un peu spécial ici. Nous devons d'abord activer le menu \"Développement\".\n\nOuvrez les préférences et accédez au volet \"Avancé\". Il y a une case à cocher en bas :\n\n\n\nMaintenant `key:Cmd+Opt+C` peut activer la console. Notez également que le nouvel élément de menu supérieur nommé \"Développement\" est apparu. Il a beaucoup de commandes et d'options.\n\n\n\n## Résumé\n\n- Les outils de développement nous permettent de voir les erreurs, d'exécuter des commandes, d'examiner des variables et bien plus encore.\n- Ils peuvent être ouverts avec `key:F12` pour la plupart des navigateurs sous Windows. Chrome pour Mac nécessite la combinaison `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (doit être activé avant).\n\n\nNous avons maintenant notre environnement prêt. Dans la section suivante, nous passerons à JavaScript.\n"
},
{
"path": "1-js/01-getting-started/4-devtools/bug.html",
"content": "\n\n\n\n \n\n\n\n\n There is an error in the script on this page.\n \n\n\n\n"
},
{
"path": "1-js/01-getting-started/index.md",
"content": "# Une introduction\n\nA propos du langage JavaScript et de l'environnement pour le développeur.\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/1-hello-alert/index.html",
"content": "\n\n\n\n\n \n\n\n\n\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/1-hello-alert/solution.md",
"content": "\r\n[html src=\"index.html\"]\r\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/1-hello-alert/solution.view/index.html",
"content": "\n\n\n\n\n \n\n\n\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/1-hello-alert/task.md",
"content": "importance: 5\n\n---\n\n# Afficher une alerte\n\nCréez une page qui affiche un message \"Je suis JavaScript!\".\n\nFaites-le dans un bac à sable ou sur votre disque dur, peu importe, assurez-vous simplement que cela fonctionne.\n\n[demo src=\"solution\"]\n\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js",
"content": "alert(\"I'm JavaScript!\");"
},
{
"path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html",
"content": "\n\n\n\n\n \n\n\n\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md",
"content": "The HTML code:\n\n[html src=\"index.html\"]\n\npour le fichier `alert.js` dans le même dossier :\n\n[js src=\"alert.js\"]\n\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md",
"content": "importance: 5\n\n---\n\n# Afficher une alerte avec un script externe\n\nPrendre la solution de l'exercice précédent . Modifiez-le en extrayant le contenu du script dans un fichier externe `alert.js`, résidant dans le même dossier.\n\nOuvrez la page, assurez-vous que l'alerte fonctionne.\n"
},
{
"path": "1-js/02-first-steps/01-hello-world/article.md",
"content": "# Hello, world!\n\n\n\nCette partie du tutoriel est à propos du coeur de JavaScript, le langage lui même.\n\nMais nous avons besoin d'un environnement de travail pour exécuter nos scripts et, étant donné que ce guide est en ligne, le navigateur est un bon choix. Nous allons nous efforcer d'utiliser les commandes spécifiques au navigateur (comme `alert`) au minimum afin de ne pas y consacrer du temps si vous prévoyez de vous concentrer sur un autre environnement tel que Node.JS. Par ailleurs, les détails du navigateur sont expliqués dans [la partie suivante](/ui) du didacticiel.\n\nAlors, voyons d'abord comment intégrer un script à une page Web. Pour les environnements côté serveur, vous pouvez simplement l'exécuter avec une commande comme `\"node mon.js\"` pour Node.JS.\n\n\n## La balise \"script\"\n\nLes programmes JavaScript peuvent être insérés dans n'importe quelle partie d'un document HTML à l'aide de la balise `\n*/!*\n\n