Ressources et autres

Useful links and tools for the JavaScript class

---

js-ressources is an educational project, which will be used for JS courses.

Note: the school where the course is given, the HEPL from Liège, Belgium, is a french-speaking school. From this point, the instructions will be in french.

---

Ce dépôt est l’endroit destiné à lister les ressources utiles au cours de JavaScript (Développement Côté Client), tant pour la partie Travaux Dirigés (TD) que pour la partie Travaux Pratiques (TP).

Tutoriels

Voici une liste non exhaustive de quelques tutoriels que nous vous recommandons chaleureusement.

Nous vous proposeons un vaste choix en complément au cours, n'hésitez pas à choisir ce qui vous parle le plus. Nous sommes assez convaincus que votre aisance avec la programmation et le langage JavaScript viendront de pair avec l'entraînement.

Vous trouvrez ici des exercices supplémentaires qui vous permettront de vous entraîner.

Udemy plateforme d'apprentissage

• The Complete JavaScript Course 2019: Build Real Projects! sur Udemy
• Les autres cours de javascript sur Udemy en français
• Matériel de cours et instructions sur gitHub
• Page de présentation de Jonas Schmedtmann sur Udemy
• Les autres cours de javascript sur Udemy en français

Pluralsight

• HTML, CSS, and JavaScript: The Big Picture (1h28')
• JavaScript: Getting Started (2h46')
• JavaScript Fundamentals (3h)
• JavaScript: Using Variables and Working with Numbers and Strings (1h47')
• JavaScript: Using JavaScript with HTML Documents (24')

Codecademy

• Javascript
• Introduction to javascrip
• Javascript errors and debugging
• Introduction to jQuery

Khan Academy

• Introduction à JS : dessiner et animer

Scrimba

• learn modern javascript

Cours sur le debugging et l’outil de chrome

• Chrome DevTools par Kayce Basques

Frontend Masters Courses

• Mastering Chrome Developer Tools
• Introduction to JavaScript Programming
• JavaScript: From Fundamentals to Functional JS
• JS.Next: ES6 / ES2015
• Hardcore Functional Programming in JavaScript
• Debugging and Fixing Common JavaScript Errors
• Deep JavaScript Foundations
• Functional-Light JavaScript, v2
• JavaScript: The Hard Parts
• JavaScript: The Hard Parts of Object Oriented JavaScript
• JavaScript: The New Hard Parts
• TypeScript Fundamentals
• TypeScript 3 Fundamentals, v2
• JavaScript Performance
• JavaScript Testing Practices and Principles

Documentation

online

Pour les langages "communs", comme HTML, CSS & JavaScript, la meilleure source de documentation est celle du MDN. Pour les autres langages, le site officiel de chacun est souvent la meilleure référence.

Même si la quantité d'informations peut paraitre importante, c'est LA documentation du langage qui reste la référence officielle.

• LA référence JavaScript par le MDN
• Les priorités des opérateurs
• Les mots réservés en JS

offline

Il existe deux applications super utiles pour télécharger et consulter de la documentation hors-ligne. Ces applications vous permettent de rassembler en local sur votre machine les documenations de tous les langages que vous utilisez couramment.

Vous pouvez notamment y ramener la documentation du MDN concernant JavaScript.

Dash

• Site: kapeli.com/dash
• Plateformes: Mac OS
• Prix: Payant (±25$), version gratuite (avec publicité) disponible
• Sources: Fermées
• Éditeur: Kapeli

Zeal

• Site: zealdocs.org
• Plateformes: Windows, Linux
• Prix: Gratuit
• Sources: Ouvertes
• Éditeur: Oleg Shparber & contributeurs

Environnement de travail

Cette partie vient en complément au dépôt hepl-web/toolbox que vous devriez lire avant.

Vous êtes libre de choisir l’environnement de travail qui répond au mieux à vos besoins. Voici ce que nous vous proposons dans le cadre du laboratoire.

Éditeurs

1. Sublime text 3 et Atom sont des éditeurs de code assez légers, mais que l’on peut très facilement enrichir avec de nombreuses fonctionnalités telles que présentées ici.
2. Il existe aussi Visual Studio Code, qui est plus récent, et qui peut être personnalisé à souhait. Comme le montre ce tutoriel proposé par Frontend Masters Courses.
3. Enfin, il existe aussi PhpStorm. Celui-ci est payant, toutefois il est compris gratuitement dans le GitHub Student Developer Pack. Si vous venez d’un éditeur léger, la prise en main, au début, peut s’avérer un rien difficile, peut-être parce que vous ne connaissez pas encore les raccourcis clavier. Je vous invite donc à utiliser la rechercher d’actions (Ctrl+Shift+A si vous êtes sous Windows et Shift+⌘+A si vous êtes sous macOS) où vous pourrez écrire l’action que vous souhaiter exécuter, ainsi vous verrez également le raccourci qui s’y rapporte s’il existe. Voici un article qui présente cette recherche. Vous pouvez aussi installer des plug-ins qui redéfinissent tous les raccourcis clavier tels qu’ils sont présents dans Sublime text 3 ou Visual Studio Code par défaut.

Navigateur

Je vous invite à consulter hepl-web/toolbox – Navigateurs web

Vous êtes libre de choisir celui qui vous convient le plus, puisque de toute façon vous devrez fournir des applications qui fonctionnent dans la plupart de navigateurs. Notez tout de même que dans le cadre du laboratoire nous utiliserons Google Chrome et Mozilla Firefox.

Terminal

Dans le cadre du laboratoire, mais aussi dans les cours de Développement Côté Serveur, vous serez amené à utiliser cet outil extrêmement puissant => le terminal.

Rem : Si vous êtes sous Windows, je vous invite à installer Cygwin pour mimer un comportement Unix.

Même s’il est d’un grand intérêt pour vous d’être à l’aise avec la ligne de commande un simple interpréteur en ligne de commande telle que celui par défaut sur votre système exploitation peut suffire. ( Il s’agit souvent de bash.) Toutefois, je vous invite à passer sur un interpréteur plus récent qui peut vous offrir davantage de l'autocomplétion. Par exemple :

• ohmyz.sh
• fishshell.com

Enfin, pour les utilisateurs de macOS, sachez qu’il existe iTerm 3, une alternative à l’application native Terminal qui permet une configuration plus complète.