Voyons à présent les concepts et outils de base qui vont vous aider à profiter au mieux de ce cours. Voici tout d'abord des outils que vous devriez utiliser ou auxquels il faudrait vous référer au cours de votre apprentissage :
Un bon éditeur de texte
Un navigateur web et des outils de développeur
La documentation jQuery
L'éditeur de texte
Un bon éditeur de texte vous fournit une coloration syntaxique qui rend votre code plus facile à lire, tout particulièrement lorsque vous travaillez avec un langage à la syntaxe complexe comme JavaScript. Si vous avez déjà travaillé avec des concepts de développement, il y a de grandes chances pour que vous utilisiez déjà un bon éditeur de texte. Je vous recommande Sublime Text, une application sans laquelle je ne peux tout simplement pas travailler. Une alternative très bonne (et gratuite) est Atom de GitHub.
JavaScript sans coloration syntaxique (mauvais) :
var listItems = document.querySelectorAll('li');
var i;
for (i = 0; i < listItems.length; i++) {
listItems[i].className = 'starred';
}JavaScript avec coloration syntaxique (bon) :
var listItems = document.querySelectorAll('li');
var i;
for (i = 0; i < listItems.length; i++) {
listItems[i].className = 'starred';
}Au sein de votre éditeur de texte, vous aurez également la possibilité d'ouvrir les fichiers JavaScript associés à votre HTML directement dans le navigateur et de les tester avec les éléments suivants : le navigateur et les outils de développeur !
Le navigateur et les outils de développeur
Dans le premier chapitre, nous avons appris que JavaScript a des différences très marquées en fonction des navigateurs. Bien que jQuery vous épargne beaucoup d'ennuis, il est toujours utile d'utiliser un navigateur puissant. Je vous recommande Google Chrome, que j'utiliserai moi-même dans les exemples du cours, mais vous pouvez aussi utiliser Firefox ou Safari.
Dans les navigateurs web les plus récents, vous avez accès à la console JavaScript. Dans cette console, vous pouvez écrire et exécuter du JavaScript sur votre page. Pour ouvrir la console, cliquez sur une combinaison de "Affichage" et "Console JavaScript", qui varie un peu selon votre navigateur. Voici comment le faire sur Chrome :
Vous pouvez écrire, visualiser et déboguer du code JavaScript dans cette console. Elle affiche même les erreurs JavaScript. Voici une ligne de JavaScript écrite en console, qui affiche un message d'alerte :
Entraînement sur la console JavaScript
OpenClassrooms utilise jQuery, vous pouvez donc écrire du jQuery dans la console et constater ses effets dans votre navigateur. Ouvrez la console JavaScript dans votre navigateur (sans quitter cette page), et entrez le code ci-dessous dans la console. Ne vous inquiétez pas, vous n'allez pas modifier notre code de base pour de vrai -- juste ce que vous voyez dans le navigateur :
$('body').css('background-color', 'orange');C'est vrai qu'on aime le orange ici ! Si c'est trop coloré pour vous, n'hésitez pas à revenir en arrière :
$('body').css('background-color', '');
Documentation jQuery
De nombreux éléments concernant jQuery peuvent sembler très difficiles à comprendre, mais vous n'êtes jamais à plus d'un clic d'une super explication. La documentation jQuery est rigoureuse et truffée d'exemples.
Sur la page principale, vous n'avez qu'à cliquer sur le nom d'une méthode (par exemple .append() ou d'une catégorie ("CSS ") pour en apprendre d'avantage sur le concept ! Souvent, vous trouverez du véritable code HTML et jQuery au sein de chaque page, qui vous permettront de tester la méthode dans un environnement d'essais. De nombreuses méthodes jQuery peuvent vous sembler abstraites ("Cette méthode fait quoi à quel élément sur ma page ?!"), et c'est un vrai plus que d'avoir des exemples interactifs. C'est également mieux que de s'agiter dans tous les sens sur Stack Overflow.
À mesure que nous progressons dans ce cours, assurez-vous donc d'avoir tous ces outils à portée de clic. Ils vous seront tous utiles très fréquemment !
