Tutoriel JavaScript de base
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
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
Debug de JavaScript
Pour contrôler la présence d'erreurs d'une page directement dans un navigateur web, vous pouvez utiliser les Console d'erreurs des navigateurs.
- Internet Explorer : Menu Outils > Outils de développement (ou F12)
- Firefox : via l'extension Firebug
- Chrome : Menu Outils > Console JavaScript (ou F12)
- Safari : D'abord dans les Options > Avancées cocher la case "Afficher le menu Développement dans la barre des menus", puis CTRL+Alt+I ou CTRL+Alt+C
- Opera: Menu Page > Outils de Développement > Opera Dragonfly (ou CTRL+Shift+I)
