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)
Utilisation du code JavaScript
Il existe trois manières différents d'utiliser du code JavaScript dans une page web :
- Fichier externe : le code est écrit dans un fichier avec extension .js
- Code "inline" : le code est écrit directement dans la page web elle-même
- Attribut des balises (déconseillé) : le code est écrit dans des attributs des balises des éléments HTML de la page. Cette option, utilisée souvent dans le passé, est aujourd'hui fortement déconseillée et ne sera par conséquent pas illustrée dans ce tutoriel.
Les trois différents manières peuvent être utilisées en même temps, il n'est pas nécessaire de choisir une seule manière pour toute la page.
Fichier externe
Dans le cas d'utilisation d'un fichier externe, ce fichier doit être créé avec l'extension .js. Dans ce fichier doit être contenu seulement du code JavaScript. Le code peut commencer dès la première ligne, il ne faut déclarer le type de fichier par exemple à travers une balise XML.
Pour rendre disponible le code d'un fichier externe dans une page web, il faut inclure le lien au fichier dans la balise HTML script et plus précisément à travers l'attribut src. Voici un exemple :
<script src="dossier/fichier.js"></script>
Veuillez noter que la balise script doit être fermée avec la balise de clôture même si à l'intérieur d'une balise avec attribut src il ne faut pas insérer de code.
Le lien au fichier .js peut être relative ou absolu. Le mauvais pointage d'un fichier externe est une des raisons les plus communes d'erreur dans le code JavaScript et il est par conséquent la première chose à contrôler en cas de problèmes.
On utilise des fichiers externes souvent dans ces conditions :
- Le même fichier contient du code qui est utilisé dans plusieurs pages d'un site, ce qui évite la nécessité de l'écrire dans toutes les pages. De cette manière, une modification au code doit se faire à un seul endroit et sera automatiquement active dans toutes les pages.
- Le fichier est une bibliothèque JavaScript
- Il y a beaucoup de code écrit
Code inline
Une autre manière très utilisée d'inclure du code JavaScript consiste à écrire le code directement à l'intérieur de la balise script. Dans ce cas, il ne faut pas déclarer l'attribut src. Voici un exemple :
<script>
alert("Bonjour!");
</script>
La balise script peut contenir seulement du code JavaScript. Dans des exemples sur le web vous pouvez parfois trouver des balises script qui présentent aussi l'attribut type="text/javascript". Cet attribut n'est plus nécessaire car tout navigateur considère automatiquement le code inséré dans cette balise comme du code JavaScript.
On utilise du code "inline" souvent dans ces conditions :
- Le code doit être exécuté précisément à cette endroit dans la page, par exemple parce qu'il ajoute du texte ou des éléments HTML.
- Le code est spécifique à une seule page du site est le code n'a pas de probabilité d'être utilisé ailleurs
- Le code est court
- Le code sert à configurer des options ou initialiser une bibliothèque JavaScript
Placement de la balise script
Un élément auquel il faut faire attention est le placement de la balise script dans la page HTML. Il faut en effet tenir compte de la manière progressive de charger une page des navigateurs web. Avec le code JavaScript on fait souvent référence à des éléments du DOM (i.e. des balises HTML contenu dans la page). Il faut faire attention dans ces cas à ce que cet élément soit déjà disponible au navigateur. Un exemple illustre cette problématique.
Nous allons récupérer le texte d'un paragraphe avec id="mon-texte" avec la fonction document.getElementById("mon-texte").innerHTML ; et ensuite nous utiliserons la fonction document.write() pour écrire ce contenu. En d'autres termes, le comportement attendu de la page est d'obtenir deux fois exactement le même texte. Les deux exemples du code suivant sont exactement les mêmes, mais dans un cas, la balise script est positionnée avant le paragraphe, et dans l'autre cas après.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<script>
var texte = document.getElementById("mon-texte").innerHTML;
document.write(texte);
</script>
<p id="mon-texte">Bonjour!</p>
</body>
</html>
Si le code est avant le paragraphe, le script n'a pas accès à l'élément du DOM qui correspond au paragraphe. Donc aucun texte ne sera écrit par la fonction write().
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<p id="mon-texte">Bonjour!</p>
<script>
var texte = document.getElementById("mon-texte").innerHTML;
document.write(texte);
</script>
</body>
</html>
Au contraire, si le code est placé après le paragraphe, son contenu sera réécrit par le script et apparaîtra donc à l'écran.
Même s'il existe des fonctions pour déclencher le code seulement une fois que toute la structure du DOM a été chargée dans le navigateur (e.g. window.onload), il est une bonne pratique d'inclure les balises script juste avant la balise de clôture /body :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<script>
//Mon code est mieux ici!
</script>
</body>
</html>
Syntaxe de JavaScript
De suite une liste des éléments principaux du langage avec leur syntaxe.
Commentaire
Il existe deux manières de commenter le code JavaScript selon le nombre de lignes utilisés par le commentaire.
Une seule ligne :
//Si le code est limité à une seule ligne (c'est-à-dire qu'il n'y a pas de retour à la ligne
Plusieurs lignes :
/* * Si le code * est sur * plusieurs lignes */
Variables
La déclaration d'une variable se fait de cette manière :
var nomDeLaVariable = "Valeur de la variable";
Le nom des variables doit observer les règles suivantes :
- Ne peut pas être un mot réservée par le langage (voir une liste ici http://www.w3schools.com/js/js_reserved.asp)
- Peut se composer exclusivement de caractères alphanumériques, underscore (_) et signe du dollar ($)
- Le premier caractère ne peut pas être une chiffre
//Exemple de variables correctes var monWiki123 = "EduTechWiki"; var $monWiki123 = "EduTech Wiki"; var _____monWiki123 = "EduTechWiki";
//Exempel de variables non correctes var 123wiki = "Faux"; var aujourd'hui = "Faux";
Il est possible de déclarer une variable sans lui assigner une valeur. Dans ce cas la variable x sera "undefined" :
var x;
On peut associer à une variable différents types de valeurs (texte, chiffres, ...) mais également des fonctions ou des objets (voir plus bas). Dans le premier cas on parle de données primitives, et dans le deuxième d'objets.
Les types de variables acceptés sont :
- String : chaîne des caractères (e.g.
var a = "Bonjour") - Number : chiffres et décimals (e.g.
var a = 12) - Boolean : vrai/faux (e.g.
var a = true) - null et undefined
Il existe également des nombreux type d'objets dont les plus utilisés sont :
- Object
- Array
- Function
Objets
Un objet est un élément qui se compose d'une ou plusieurs associations "clé-valeur". On déclare un objet de cette manière :
var monObjet = {
clé1: "valeur",
clé2: "valuer",
clé3: "valeur"
}
On peut par la suite récupérer le contenu d'un objet à travers la notation monObjet.clé1, monObjet.clé2, etc. Ce type de notation peut être utilisé également pour associer une valeur :
monObjet.clé1 = "valeur"; monObjet.clé2 = "valeur";
Dans le langage lui-même sont présents des objets qui disposent de leurs propres associations clés-valeurs. Par exemple lorsqu'on utilise document.write() on accède à l'option (méthode) "write" de l'objet "document". Cette option correspond dans ce cas à une fonction qui ajoute du contenu au document. Les valeurs des objets peuvent en effet être représenter par des valeurs (texte, chiffres) mais également par des fonctions ou même d'autres objets.
Array
Un array (tableau) est un groupe d'éléments qui disposent d'un index pour les mettre en ordre. L'index est associé automatiquement à partir de zéro.
var mesCours = [STIC I, STIC II]; var STIC_I = mesCours[0]; var STIC_II = mesCours[1];
Fonctions
Une fonction est une sorte de processus qui détermine un résultat finale et le rend disponible. Ce processus peut être basé sur des informations initiales qui sont passées à la fonction en tant qu'arguments. L'intérêt des fonctions consiste à les réutiliser plusieurs fois.
Il existe des fonctions préétablie dans le langage, comme par exemple la fonction alert() qui affiche à l'écran une boîte contenant un message. JavaScript permet de déclarer également ses propres fonctions de cette manière :
function nomDeMaFonction() {
//Processus de la fonction
}
Si on veut ajouter des arguments à la fonction, il faut les insérer dans les parenthèses et les séparer par des virgules (arg1, arg2, arg3). Par exemple la fonction suivante affiche dans une boîte alert le nom passé dans l'argument :
function afficheLeNom(nom) {
alert(nom);
}
Pour exécuter cette fonction il faudra donc l'utiliser dans le code de notre page web de la manière suivante : afficheLeNom("Batman").
JavaScript met également à disposition des notations à travers lesquelles les fonctions sont exécutées automatiquement sans avoir à le déclarer préalablement. Ces deux codes sont équivalent et sont exécutés une fois que la page a été chargée dans le navigateur :
function pageLoaded() {
alert("La page a été chargée");
}
window.onload = pageLoaded;
window.onload = function() {
alert("La page a été chargée");
};
Pour plus d'informations sur les fonctions voir plus bas dans cette page.
Operateurs
Les opérateurs permettent de manipuler des valeurs.
//Concatenation de texte var a = "Hello"; var b = "world!"; alert(a + " " + b); //Hello world!
//Opérateurs mathématiques var a = 2 + 3; //5 var b = 2 * 3 //6
Les opérateurs logiques AND (&) et OR (|), ainsi que les opérateurs de comparaison (==, !==, ...) sont expliqués dans la partie sur les structures de contrôle.
Structures de contrôle
Les cycles conditionnels permettent d'exécuter du code si une ou plusieurs conditions s'avèrent. Les conditions sont testées à l'aide des éléments if, else if et else. Le code suivant execute un redirect (window.location) à la version du EduTech Wiki correspondante à la langue, et affiche un message si la langue n'est ni français, ni anglais.
if(lang == "Français") {
window.location = "http://edutechwiki.unige.ch/fr/Accueil";
} else if (lang == "Anglais") {
window.location = "http://edutechwiki.unige.ch/en/Main_Page";
} else {
alert("EduTech Wiki n'est pas encore disponible dans votre langue!");
}
Comme vous pouvez le voir, la variable lang est testée à l'aide de l'opérateur == qui détermine s'il y a correspondance entre la variable et la valeur. Les opérateurs de comparaison sont les suivants :
- == détermine si les deux éléments sont similaires dans leurs valeurs
- !== détermine si les deux éléments sont différents dans leurs valeurs
- === détermine si les deux éléments sont similaires dans leurs valeurs et types
- !=== détermine si les deux éléments sont différents dans leurs valeurs et types
- >, >=, <, <= déterminent le rapport des éléments en fonction d'une échelle
Parfois il est nécessaire de tester plusieurs conditions à la fois, c'est-à-dire que plus d'une condition doivent s'avérer au sein du même test. Pour ce faire, on utilise les opérateurs logiques :
- & ou AND : implique que les deux conditions liées par cet opérateurs soient vraies
- | ou OR : implique que au moins une des deux conditions liées par cet opérateur soit vraie
Souvent on utilise deux opérateurs du même type (&& ou ||) à l'intérieur de la même relation pour renforcer le lien par rapport à d'autres opérations logiques. Pour déterminer quel type d'opération logique doit être exécutée avant les autres on peut également utiliser des parenthèses.
Voici quelques exemples :
if(mois == "décembre" && jour == 25) {
alert("C'est Noël");
}
if(jour == "samedi" || jour == "dimanche") {
alert("C'est le weekend!");
}
Lorsque les conditions à tester sont plusieurs, au lieu d'utiliser plusieurs if, else if et else, on peut utiliser le cycle switch :
switch( lang ) {
case "Français":
window.location = "http://edutechwiki.unige.ch/fr/Accueil";
break;
case "Anglais":
window.location = "http://edutechwiki.unige.ch/en/Main_Page";
break;
default:
alert("EduTech Wiki n'est pas encore disponible dans votre langue!");
}
Le command break est nécessaire afin d'arrêter l'exécution du code pour la condition.
Boucles
Les boucles sont des éléments qui permettent de répéter un processus pour un nombre établie de fois (cycle for), ou jusqu'à ce que une certaine condition s'avère (cycle while).
La fonction for nécessite 3 arguments :
- Une définition d'une variable d'entrée (point de départ de la boucle)
- Une définition d'une variable de sortie (point final de la boucle)
- Une définition de l'incrémentation de la variable à chaque passage
Voici un exemple de cycle qui aura lieu 20 fois :
for(var i = 0; i < 20; i++) {
//code à exécuter à chaque fois
}
Le cycle while évalue une condition et exécute le cycle jusqu'à ce que cette condition est vraie. Ceci implique implicitement qu'un changement doit s'avérer à l'intérieur du cycle afin que cette condition soit fausse à un certain point, si non le cycle ne s'arrêterait jamais. Voici le même résultat du cycle for vu plus haut dans le texte, mais avec la notation while :
var i = 0;
while (i < 20) {
//code à exécuter à chaque fois
i++;
}
La notation i++ à la fin du code ajoute une unité à la variable i, de cette manière la condition évaluée dans le cycle while sera fausse après 20 passages, et par conséquent le cycle while s'arretra. Il existe également la possibilité d'utiliser le cycle do... while qui contrairement au simple cycle while s'exécute au moins la première fois, même si la condition évaluée est fausse. Par exemple ce code affichera une fois la boîte d'alerte :
do {
alert("Une fois seulement");
} while (1 == 2);