Tutoriel JavaScript de base
Introduction
Rappel de la structure d'une page web
Avant d'aborder JavaScript, il est utile de rappeler la structure d'une page web qui se compose généralement de trois éléments :
- HTML : cet élément détermine le contenu de la page, c'est-à-dire les éléments textuels et graphiques affichées à l'écran
- CSS : cet élément détermine la mise en page, la manière de présenter les éléments HTML de la page. On peut déterminer à travers les CSS les couleurs, les polices, l'alignement des éléments, etc.
- JavaScript : cet élément ajoute des interactions et des comportements (ou effets) au contenu et/ou à la présentation de la page. Ces phénomènes permettent de modifier la page sans la nécessité d'actualiser le navigateur.
Présentation de JavaScript
JavaScript est une langage de scripting qui a vécu plusieurs évolutions dans le temps, ce qui complique de quelque sorte son apprentissage parce que le code et les tutoriels présents dans le web varient fortement en fonction de leur date. Non seulement le code a changé dans le temps, mais aussi la "philosophie" de JavaScript. Au début, JavaScript était considéré un outil utilisé principalement dans les formulaires web. Aujourd'hui, grâce à l'évolution des navigateurs web, JavaScript est devenu l'outil plus utilisé pour les interactions client-side des pages web, mais il est également utilisé dans le développement d'application pour les dispositifs mobiles, dans le développement de logiciel desktop et même dans le développement server-side. Malgré la similarité du nom, Java et JavaScript sont deux langages différents.
Outils pour le développement et le debug
Pour développer en JavaScript seulement deux outils sont strictement nécessaires :
- Un navigateur web
- Un éditeur de texte
Des outils supplémentaires peuvent sans doute rendre le développement plus aisé. Voici une liste de ces outils :
- Brackets : éditeur de texte open-source qui support la syntaxe et le complètement automatique du code JavaScript
- Google Chrome Developer Tools : outils de développement et debug du navigateur Google Chrome
- Firefox Developer Tools : outils de développement et debug du navigateur Firefox