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)

Console des erreurs en Google Chrome

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);

Les fonctions en JavaScript

Comme on l'a vu brièvement dans la syntaxe de base, les fonctions sont des ensembles d'instructions qui forment un processus. Toutes les instructions qui se trouvent à l'intérieur de la fonction seront exécutées lorsque la fonction sera utilisée. La "vie" d'une fonction se caractérise par deux phases :

Une phase de définition dans laquelle le fonctionnement interne de la fonction est établi (i.e. ce que la fonction est censée faire)
Une phase d'invocation (i.e. d'utilisation) de la fonction dans un contexte où son fonctionnement interne est utile à la logique de programmation

Il existe néanmoins la possibilité en JavaScript de combiner les deux phases, dans ce cas on parle de fonction anonyme ou immédiate (voir plus bas dans la section).

Définition d'une fonction

Pour définir une fonction il faut la nommer. On peut définir une fonction une seule fois, donc chaque fonction doit avoir un nom unique. La syntaxe pour définir une fonction est la suivante :

function nomDeLaFonction(arguments) {
    //Instructions
}

Une fonction accepte pas d'arguments, un ou plusieurs arguments. Les arguments sont des références à des valeurs qui externes à la fonction qui seront utilisées à son intérieur. Si la fonction nécessite de plusieurs arguments, il faudra les séparer avec une virgule.

À l'intérieur d'une fonction on peut utiliser tout le code JavaScript qu'on peut utiliser en dehors. Il faut juste faire attention au "scope" des variables. En effet, les variables qu'on définit à l'extérieur d'une fonction seront disponibles aussi à l'intérieur d'une fonction, mais les variables déclarées à l'intérieur d'une fonction seront disponibles seulement à l'intérieur de la fonction elle-même. Voici un exemple :

var dispoPartout = "Je suis disponible aussi dans les fonctions";

function alertMesVariables() {
     var dispoIci = "Je suis disponible seulement dans cette fonction";
     alert(dispoPartout + " " + dispoIci);
}

var executerFonction = alertMesVariables();//boite avec les deux messages affichées

console.log(dispoPartout); //Le message de la variable dispoPartout sera affiché dans la console
console.log(dispoIci);//La variable dispoIci n'est pas définie à l'extérieur de la fonction

Invocation d'une fonction

Pour invoquer une fonction, c'est-à-dire exécuter les instructions contenu à l'intérieur de la fonction à un moment donnée dans le code, il faut simplement écrire le nom de la fonction et éventuellement passer les arguments nécessaire à son fonctionnement interne.

var maFonction = nomDeMaFonction(arguments);

Retour d'une fonction

Les instructions d'une fonction sont censée aboutir à un certain résultat qui peut être une action, telle qu'afficher une boîte d'alerte, mais également fournir le résultat d'une manipulation des données dans l'endroit du code où cette fonction a été invoquée. Pour renvoyer un résultat on utilise l'instruction return. Cette fonction détermine que la fonction a exécuter son "rôle" et que le processus à son intérieur est terminé.

function addition(a, b) {
    var total = a + b;
    return total;
}

Cette fonction renvoie le résultat d'une addition entre les deux arguments de la fonction. On peut utiliser plusieurs notation return dans la même fonction, par exemple dans le cadre d'un cycle conditionnel. On exploite dans ce cas le fait que cette instruction termine l'exécution du code à l'intérieur d'une fonction.

function controlerMoyenne(note) {
    var message = "Examen réussi";
    if(note >= 4) {
         return message;
    } else {
         message = "Examen échoué";
    }
    alert(message);
}

L'alerte de cette fonction sera déclenchée seulement si la note est inférieur à 4 même si elle se trouve en dehors de la structure de contrôle, parce que si la note est supérieur à 4, le return arretra l'exécution de la fonction et donc l'alerte ne sera pas prise en compte.

Objets disponibles de base dans le langage

JavaScript met à disposition du développeurs des objets qui sont déjà définit à la base par le langage lui-même. Ces objets disposent d'options, méthodes, et événements qui peuvent être utilisé pour créer la logique de programmation souhaitée par le développeur.

Chaque objet mis à disposition par le langage peut avoir trois types de caractéristiques associées :

Propriétés : il s'agit très souvent d'une valeur de texte ou numérique qui confère à l'objet une certaine caractéristique. Les propriétés peuvent être utilisées comme valeur à l'intérieur d'un processus, c'est-à-dire qu'on utilise la valeur existante ; ou bien changées, c'est-à-dire qu'on attribue une nouvelle valeur (e.g. innerHTML, innerWidth, ...).
Méthodes : il s'agit de fonctions dont la logique a déjà été déclarée à l'intérieur du langage et peuvent donc être utilisées directement (e.g. alert(), getElementById(), ...).
Événements : il s'agit de "listeners" qui détectent des changements dans l'état d'un objet et permettent donc de déclencher des processus en réponse à ce changement (e.g. onload, onclick, ...)

Chacune de ses caractéristique est invoquée par la notation à point :

Objet.propriété
Objet.méthode()
Objet.événement

Cette notation peut être "enchaînée", par exemple la notation suivante permet d'associer à la variable monTexte le contenu d'une balise HTML avec id="mon-id" :

var monTexte = document.getElementById("mon-id").innerHTML

Liste d'objets principaux

De suite une liste non exhaustive des objets mis à disposition par le langage lui-même. Pour chaque objet une brève description est présenté ainsi qu'un petit exemple de son utilisation. Un lien à une référence plus approfondie est également disponible.

Console

L'objet Console est particulièrement utile dans la phase de développement et debug (voir plus haut dans la page les instructions pour activer la Console JavaScript des erreurs). Grâce à cet objet on peut communiquer avec la Console JavaScript. Par exemple la notation console.log() permet d'écrire un message dans la Console. Pour ceux qui ont utilisé Flash, cette instruction est similaire à la fonction trace() de Flash. Voici un exemple :

<script>
window.onload = function() {
  for(var i = 0; i < 5; i++) {
       console.log("Cycle actuel : " + i);
  }
}
</script>

Le résultat de ce script dans la console JavaScript est le suivant :

La méthode log() de l'objet Console permet d'afficher des messages dans la console JavaScript.

Une fois terminé la partie de développement, il est mieux d'enlever toute référence à la Console.

Window

L'objet window représente la fenêtre du navigateur. JavaScript met à disposition plusieurs méthodes pour contrôler la fenêtre d'un navigateur, mais il faut néanmoins être attentifs à ne pas abuser de cette possibilité avec des comportements qui ne sont pas directement déclenchés par l'utilisateur (e.g. ouverture de fenêtres pop-up, changement de la taille de la fenêtre, etc.).

L'objet window représente une sorte d'objet "global", car toutes les propriétés, méthodes et variables deviennent automatiquement des éléments qui font partie de l'objet window. Par exemple l'objet document (voir la section JavaScript et le DOM) est un objet de window, donc sa notation complète serait window.document. Ou encore la fonction alert() est une méthode de window, donc sa notation complète serait window.alert("Je suis une méthode de l'objet window"). Pour cette raison "globale" on peut éviter de spécifier l'objet window dans ce cas.

Une notation qui est par contre très utilisée et qui nécessite de déclarer explicitement l'objet window concerne l'événement onload :

window.onload : est l'événement plus utilisé, déjà vu dans plusieurs exemple dans cette page, qui permet de déclencher du code une fois que la page a été chargée dans le navigateur. Il faut être attentif au fait que cette fonction peut être déclarée seulement une fois dans chaque page. Si plusieurs déclarations de window.onload sont disponibles dans la même page, seulement celle déclarée en dernière sera exécutée.

<script>
window.onload = alert("Je ne serais pas affiché");
window.onload = alert("Je serais affiché");
</script>

Un autre problématique relative à cette fonction concerne le fait que l'événement onload s'avère lorsque tous les éléments du DOM ont bien été chargés, y compris images, feuilles de style, etc. Ceci peut parfois retarder le déclenchement de l'événement et par conséquent toutes les éléments interactifs associés à cet événements ne seront pas disponibles.

Voir les référence de l'objet Window

String

L'objet String permet d'exécuter des manipulations sur des chaînes de caractères. Voici un exemple pour la méthode toUpperCase() qui transforme les lettres en majuscules.

var msg = "Bonjour";
msg.toUpperCase(); //BONJOUR

Voir les références de l'objet String

Number

L'objet Number permet d'exécuter des manipulations sur des nombres. Voici un exemple pour la méthode toFixed() qui transforme une chiffre en caractère avec une précision décimale fixée.

var num = 6.749737898732;
var numPrint = num.toFixed(2); //6.75

Voir les références de l'objet Number

Math

L'objet Math permet d'exécuter des manipulations mathématiques sur des chiffres. Voici un exemple pour trouver un nombre aléatoire entre 1 et 100 :

var randomNumber = Math.floor((Math.random() * 100) + 1);

Voir les références de l'objet Math

Date

L'objet Date permet d'exécuter des manipulations sur les dates. La gestion des dates n'est pas simple en JavaScript. Par exemple la méthode getMonth() qui identifie le mois de l'année en chiffres ne propose pas les mois de 1 à 12, mais plutôt de 0 à 11. Donc le mois 10 n'est pas octobre comme on pourrait s'imaginer, mais plutôt novembre. Voici un exemple pour obtenir le jour du mois (de 1 à 31) :

var d = new Date();
var aujourdhui = d.getDate();

Voir les références de l'objet Date

JavaScript et le DOM

Une des fonctionnalités plus utilisées de JavaScript est sa capacité d'interagir dynamiquement avec le DOM, c'est-à-dire la structure hiérarchique des balises HTML d'une page web. C'est notamment grâce à la manipulation des éléments du DOM qui s'avèrent les interactions sur une page : apparition d'un message, déplacement d'un élément d'un endroit à l'autre, changement de la taille d'une police, du couleur, etc.

Ces manipulations sont possibles grâce à l'objet document qui fait partie de l'objet global window (voir plus haut dans la page). Les propriétés, méthodes ainsi que les événements associés à cet objet permettent de manipuler le DOM.

Voir les références de l'objet Document

Manipulation des éléments du DOM

Trouver un élément

Trois méthodes permettent d'identifier un élément dans la structure du document :

document.getElementById() : identifie un élément avec l'attribut id="..."
document.getElementsByTagName : identifie un ou plusiuers éléments avec le nom de la balise
document.getElementsByClassName() : identifie un ou plusieurs éléments avec l'attribut class="..."

Une méthode plus générale est également disponible à travers la méthode :

document.querySelector() : cette méthode accepte des identifiants plus complexes par rapports aux trois méthodes vus plus haut dans la page, mais elle est également plus flexible.

Voici quelques exemples d'utilisation :

document.querySelector("a.external") //cette méthode identifie toutes les balises a avec classe "external"
document.querySelector("h1,h2,h3") //cette méthode identifie toutes les titres de h1 à h3

Cette fonction peut également être utilisée à l'intérieur des éléments du DOM :

var monParagraphe = document.getElementById("monTexte");
monTexte.querySelector("span").innerHTML = "Nouveau texte du span";

Ce code identifie le premier élément span à l'intérieur du paragraphe avec id="monTexte" et change le contenu textuel.

Modifier un élément

On peut modifier différents caractéristiques d'un élément une fois identifié dans le document par exemple à travers ces propriétés :

element.innerHTML : modifie le contenu de la balise de l'élément sélectionné
element.attribute : modifie un attribue de la balise de l'élément sélectionné
element.style.property : modifie les propriétés de style de la balise de l'élément sélectionné

Ajouter ou supprimer un élément

On peut ajouter des éléments qui n'existe pas dans la structure de base du document ou supprimer des éléments existants. Exemples :

document.createElement() : définit un nouveau élément HTML
document.appendChild() : ajoute un élément à la structure existante
document.replaceChild() : remplace un élément existant avec un autre élément
document.removeChild() : supprime un élément présent dans la structure

Exemples de manipulation

Dans cette page, 4 types de manipulation ont lieu lorsque la page a été chargée :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript - exemple de manipulation du DOM</title>
</head>
<body>
 
<h1>JavaScript - exemple de manipulation du DOM</h1>

<p id="p1">Premier paragraphe.</p>
<p id="p2">Deuxième paragraphe.</p>
<p id="p3">Troisième paragraphe</p>
<p>Quatrième paragraphe.</p>
<div>Je ne suis pas un paragraphe!</div>

<script>

window.onload = function() {
  //1. On remplace le texte du premier paragraphe
  var p1 = document.getElementById("p1");
  p1.innerHTML = "Le texte du premier paragraphe a été modifié par JavaScript";
 
  //2. On ajoute une image au deuxième paragraphe
  var p2 = document.getElementById("p2");
  var image = document.createElement("img");
  image.src = "http://lorempixel.com/200/200/abstract";
  p2.appendChild(image);
 
  //3. On supprime le troisième paragraphe
  var p3 = document.getElementById("p3");
  document.getElementsByTagName("body")[0].removeChild(p3);
 
  //4. On change la couleur du texte des paragraphes
  var pp = document.getElementsByTagName("p");
  for(var i = 0; i < pp.length; i++) {
    document.getElementsByTagName("p")[i].style.color = "#F00";
  }
}
</script>
</body>
</html>

Les manipulations 1. et 2. ne nécessitent pas d'explication supplémentaires, tandis que la 3. et la 4. sont un peu plus complexes. Il faut considérer en effet que la méthode getElementsByTagName() renvoie un array d'éléments, c'est-à-dire un groupe d'éléments avec un indice (voir plus haut dans la page pour les Array). On identifie un élément d'un Array avec la notation nomDuArray[indice].

Dans la manipulation 3. nous avons identifié d'abord la balise body car il s'agit de la balise "parent" du paragraphe 3 qu'on veut supprimer. Bien qu'il n'y ait généralement qu'une seule balise body, la méthode getElementsByTagName() renvoie néanmoins un Array, dont le premier et seul élément est notre balise body. Vu que les indices des Array commence à 0, pour identifier notre élément body nous devons ajouter l'indice [0] à la méthode getElementsByTagName("body").

Le même principe concerne la manipulation 4., dans laquelle le Array contient par contre plusieurs éléments. Pour changer chaque élément, il faut par conséquent un cycle. Nous avons créé ce cycle à l'aide de la fonction for et nous avons déclaré en tant que fonction de sortie la propriété length de l'Array lui-même. Cette propriété identifie le nombre d'éléments présents dans l'Array.

Ce type de manipulation est plutôt complexe, raison pour laquelle des bibliothèques JavaScript (e.g. jQuery) offrent des méthodes plus faciles pour accéder aux éléments du DOM.

Événements du DOM

Les événements du DOM permettent d'identifier l'interaction de l'utilisateur avec la page, par exemple à travers les mouvements de la souris, les touches du clavier, etc. Les événements concernent également les éléments eux-mêmes, par exemple dans le cas de l'événement onload qu'on a vu associé à l'objet window (voir plus haut dans cette page), ou encore des éléments d'un formulaire.

Voir les références des Événements du DOM

Événements liés à la souris

Parmi les événements plus utilisés dans l'interaction avec le DOM il y a sans doute les événements liés aux mouvements et clicks de la souris. Voici une liste non exhaustive de ces événements :

onclick : l'événement est déclenché avec un click de la souris
onmouseover : l'événement est déclenché lorsque la souris passe sur l'élément
onmouseout : l'événement est déclenché lorsque la souris quitte un élément

Pour attribuer un événement à un élément il faut procéder ainsi :

Identifier l'élément dans la structure du DOM (voir plus haut dans cette page)
Spécifier un événement déclencheur à travers la notation element.événement (e.g. document.getElementById("mon-bouton").onclick)
Associer à cet événement un "event handler" (gestionnaire d'événement), c'est-à-dire le processus qui doit se mettre en marche lorsque l'événement se produit. Pour associer l'événement on utilise la notation élément.événement = eventHandler.

Le gestionnaire d'événement peut être une fonction déjà définie ou anonyme. Il faut cependant faire attention au fait qu'un gestionnaire d'événement est une référence à la fonction est non pas l'exécution de la fonction elle-même. En d'autres termes, il ne faut pas utiliser les parenthèses dans un gestionnaire d'événement :

function faireQuelqueChose() {
    //code
}
mon-element.mon-evenement = faireQuelqueChose; //OK!
mon-element.mon-evenement = faireQuelqueChose(); //Faux, de cette manière la fonction sera exécutée de toute manière, sans attendre l'événement déclencheur

On peut également utiliser une fonction anonyme en tant que gestionnaire d'événement :

mon-element.mon-evenement = function() {
    console.log("L'événement a eu lieu");
}

Enfin, il est possible d'utiliser la fonction élément.addEventListener(événement, gestionnaire) au lieu de la notation élément.événement = gestionnaire.

Voici un exemple avec des commentaire pour résumer les différentes utilisation des événements lié à la souris :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript - événements liés à la souris</title>
</head>
<body>
  <h1>JavaScript - événements liés à la souris</h1>
  <button id="mon-bouton">Cliquez ici</button>
  <span id="feedback"></span>
  <script>
    function showFeedbackClick() {
      document.getElementById("feedback").innerHTML = "J'ai cliqué sur le bouton";
    }
    function showFeedbackOver() {
      document.getElementById("feedback").innerHTML = "La souris se trouve sur le bouton";
    }
    var monBouton = document.getElementById("mon-bouton");
    //Événement click
    monBouton.onclick = showFeedbackClick;
    //Événement mouseover
    monBouton.addEventListener("mouseover", showFeedbackOver);
    //Événement mouseout
    monBouton.onmouseout = function() {
      document.getElementById("feedback").innerHTML = "La souris n'est plus sur le bouton";
    } 
  </script>
</body>
</html>

Pour annuler un gestionnaire d'événement il suffit de l'annuler : mon-élément.mon-événement = null.