Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. JavaScript pour l'intégrateur web
  3. L’essentiel du JavaScript
Extrait - JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
Extraits du livre
JavaScript pour l'intégrateur web Créer des sites web dynamiques et interactifs
2 avis
Revenir à la page d'achat du livre

L’essentiel du JavaScript

Insérer du code JavaScript

1. Utiliser la bonne méthode

Pour ajouter de l’interaction utilisateur dans vos pages web, il faut saisir du code JavaScript, c’est une évidence. La question est donc : où insérer ce code ? En simplifiant, vous avez plusieurs solutions :

  • Vous pouvez insérer tout le code JavaScript directement dans la page web, au sein d’un élément HTML <script>.

  • Vous pouvez insérer votre code JavaScript dans un élément HTML, un bouton par exemple, qui va détecter un événement de souris l’affectant. Le code sera exécuté lors de la détection de cet événement utilisateur.

  • Vous pouvez insérer tout le code JavaScript dans un fichier .js et vous liez ce fichier aux pages HTML voulues, aussi avec un élément HTML <script>.

Les deux premières méthodes sont pratiques pour les petits scripts qui ne doivent être utilisés qu’une seule fois, dans une seule page. Les modifications à apporter aux scripts pourront se faire facilement et rapidement au sein de la page HTML.

La troisième solution est bien sûr nettement plus répandue. Elle permet de centraliser les scripts dans des fichiers .js bien distincts. Séparer les langages est toujours préférable. De plus, ces fichiers pourront être liés à plusieurs pages HTML. Ainsi, la maintenance de ces scripts sera centralisée en un même endroit, ce qui sera plus rapide et plus efficace.

2. Insérer un script dans la page HTML

Dans ce premier exemple, nous allons ajouter un script JavaScript extrêmement...

Appliquer des règles de syntaxe

Abordons quelques règles de syntaxe pour bien écrire du JavaScript.

La première règle, qui est une obligation, est de respecter la casse. JavaScript fait la différence entre les majuscules et les minuscules. Par exemple, des fonctions nommées maFonction, MaFonction et mafonction ne sont pas les mêmes pour JavaScript. En effet, elles ont des casses différentes pour les lettres M et F. Vous devez donc être très vigilant sur ce point.

La deuxième règle est moins stricte. En partant du principe que nous plaçons une instruction JavaScript par ligne, chaque fin de ligne se termine par le caractère point-virgule ;. Cette règle n’est pas absolue, mais en la respectant strictement, vous éviterez toute erreur où le point-virgule est obligatoire et vous aurez un code plus propre et plus lisible.

Une troisième règle, non obligatoire, indique qu’il vaut mieux avoir une ligne par instruction. Par exemple, nous pourrions parfaitement avoir deux fonctions alert dans la même ligne, si elles sont bien séparées par un point-virgule :


alert("Premier message");alert("Deuxième message");
 

Cette ligne sera parfaitement interprétée par les moteurs de rendu des navigateurs. Mais elle est peu lisible, et s’il y a une erreur dans cette ligne, vous ne saurez...

Placer le code JavaScript dans la page

Abordons maintenant un point très important. Dans le cas de figure où vous décidez d’insérer votre code JavaScript au sein même de la page HTML, il faut déterminer avec soin où le placer. Cela va avoir des implications importantes.

Premier point : en simplifiant, nous pouvons dire que dans un navigateur, le code, que ce soit du HTML, des CSS ou du JavaScript, est lu et interprété de haut en bas. Donc si nous voulons agir sur un élément de la page par un script, il faut d’abord que le navigateur connaisse la structure HTML de la page, avant qu’il interprète le script qui va cibler cet élément de la page. Donc si le script est chargé avant la structure HTML, le script ne pourra tout simplement pas fonctionner, car il ne connaîtra pas l’élément HTML avec lequel il doit interagir.

Deuxième point : nous pouvons parfaitement placer des scripts dans l’élément <head> des pages HTML. Mais si nous plaçons trop de scripts dans l’élément <head>, le temps de chargement de la page va s’en trouver pénalisé.

C’est pour ces deux raisons que la méthode la plus couramment utilisée consiste à placer l’élément <script> juste avant la balise de fermeture </body>...

Utiliser la console

1. Les alertes dans la console

Dans les exemples précédents, nous avons utilisé la fonction alert du JavaScript. Cette fonction peut être utilisée pour constater si nos codes fonctionnent bien en plaçant des points de contrôle affichant, par exemple, la valeur d’une donnée, ou en affichant une alerte pour noter si une fonction fonctionne correctement. Cette fonction alert, si pratique soit-elle, n’est pas la solution idéale. En effet, dans la fenêtre d’alerte qui s’affiche, cette fonction oblige l’utilisateur à cliquer sur le bouton de confirmation (OK le plus souvent) et bloque l’exécution du code tant que l’utilisateur n’a pas cliqué sur ce bouton.

Pour générer des messages dans l’exécution du code JavaScript, il est recommandé d’utiliser la console incluse dans tous les navigateurs modernes. De plus, cette console va nous permettre de tester l’exécution du code JavaScript et elle possède les outils nécessaires pour localiser les erreurs et nous aider à les résoudre.

2. Calculer dans la console

Pour appréhender la console JavaScript de votre navigateur, nous allons faire un simple calcul mathématique.

 Dans votre navigateur, affichez les outils de développement et cliquez sur l’onglet Console.

 Dans la zone...

Les données dans le code JavaScript

1. Définir les types de données

Lorsque vous allez coder en JavaScript, vous allez utiliser des données. Ces données sont des informations de différents types. Vous avez des données numériques, comme des nombres : 8, 14, 123… Vous pourrez aussi utiliser du texte, des caractères, comme : Février, Nantes, Durand… D’autres types de données sont peut-être moins parlants de prime abord, comme le type booléen qui détermine si une donnée est vraie (true) ou fausse (false).

Donc, en codant avec JavaScript, vous serez amené à utiliser ces types de données. Notez bien que JavaScript est un langage de programmation qui est "faiblement typé". Cela veut dire qu’il ne sera pas strictement nécessaire de définir le type de données avant d’utiliser celles-ci. Par exemple, si vous utilisez la donnée 8, JavaScript détermine qu’il s’agit d’un chiffre et non pas du caractère 8. De même, si vous utilisez la donnée Durand, JavaScript l’utilise en tant que chaîne de caractères. Cela facilite l’utilisation de ces données, même si les développeurs les plus "puristes" peuvent parfaitement dire que JavaScript manque de rigueur, de précision et de bases solides pour parfaire le code.

JavaScript n’utilise que cinq types de données, nommés primitifs, ce qui simplifie la création des scripts.

2. Le type Number

Le type de données Number définit les données de type numérique, quelle que soit la valeur numérique : -12  345, 123, 8.123. Attention, dans les langages de programmation, le séparateur décimal est un point et non une virgule, comme vous pouvez le voir dans le dernier exemple précédent....

Les variables

1. L’objet variable

Comme leur nom l’indique, les variables permettent de stocker des données qui peuvent varier. Au cours de l’exécution du script, la donnée, la valeur d’une variable, peut varier. Nous pouvons par exemple définir une variable qui va stocker le résultat d’un calcul. Initialement, la valeur peut être Null, car il n’y a pas de valeur. Ensuite, la variable peut prendre une première valeur, puis, quelques lignes plus loin, le script peut additionner une autre valeur à la valeur stockée dans la variable. Nous avons alors une nouvelle valeur stockée dans la variable.

2. Déclarer une variable

Pour utiliser une variable, il faut obligatoirement la déclarer. Pour ce faire, nous avons deux solutions à notre disposition.

La première méthode permet de créer rapidement une variable, avec cette simple syntaxe :


monPremon = "Christophe";
 

Décrivons cette ligne :

  • Le nom de la variable est monPrenom.

  • Le signe utilisé pour stocker une valeur dans la variable est =.

Attention, ici le signe = est le symbole de l’affectation, ou assignation, et non pas le symbole de la comparaison.

  • La valeur initiale de cette variable est indiquée, dans cet exemple, entre guillemets et est Christophe.

Dans cet exemple, la variable n’est pas typée mais, du fait des guillemets, JavaScript sait qu’il s’agit d’une variable de type String, qui contient une chaîne de caractères. Autre remarque, cette variable possède immédiatement une valeur, qui est Christophe.

Voici la saisie de cette variable dans la console et la validation qui suit avec la touche Entrée :

images/C02-056.png

Dans la console, nous pouvons visualiser que la variable est bien affectée d’une valeur :


console.log(monPrenom);
 

Voici l’affichage obtenu...

Les tests de condition

1. Créer des tests

Lorsque vous avez des variables, dont par essence même la valeur varie, il est parfois primordial de connaître la valeur d’une variable par des tests. Et en fonction de ces tests, vous devrez exécuter une action ou une autre, si la réponse à ces tests renvoie vrai (true) ou faux (false). C’est l’objectif de ces tests de condition.

Ces tests conditionnels s’utilisent avec la fonction JavaScript if(). Voici la syntaxe de base du test de condition :


if(test) { 
    réponse si vrai; 
}
 

Entre les parenthèses de la fonction if, nous avons le test qui est exécuté par le script. Ensuite, entre les accolades, nous indiquons ce qui doit être fait, si la réponse du test est vraie (true).

2. Les tests simples avec if

Dans ce premier exemple, nous allons réaliser un test simple sur une variable. Nous allons tester si une variable est supérieure à une valeur spécifiée.

Voici le code utilisé :


var a=100 ; 
if(a>20){ 
    console.log("a est plus grand que 20"); 
}
 

La réponse au test est vraie, le test if renvoie true. La valeur de la variable a, qui est égale à 100, est effectivement bien supérieure à 20. Puisque c’est vrai, nous affichons dans la console un message.

Voici l’affichage obtenu :

images/C02-012.png

Si nous changeons la valeur de la variable a à 10 par exemple, la console n’affichera rien, puisqu’il n’y a aucune instruction à exécuter si le test renvoie false.


var a=10 ; 
if(a>20){ 
    console.log("a est plus grand que 20"); 
}
 

Voici l’affichage obtenu :

images/C02-013.png

Il est donc plus judicieux d’envisager dans notre test les deux réponses possibles : soit le test renvoie vrai, soit il renvoie faux. Nous allons donc ajouter cette deuxième possibilité en insérant l’instruction else, qui se lit "sinon".

Voici le code modifié :


var a=100 ; 
if(a>20){ 
    console.log("a est plus grand que 20"); 
} else { 
    console.log("a est plus petit que 20"); 
}
 

L’insertion de l’instruction else implique l’utilisation d’un deuxième...

Les boucles

1. Les objectifs

Les boucles permettent d’exécuter du code JavaScript de manière répétitive, tout en contrôlant cette répétition, pour éviter que l’exécution du code voulu ne se répète à l’infini.

Nous allons appréhender la boucle while(), "tant que" et sa variante do while(), ainsi que la boucle for(), "pour".

2. La boucle while()

La boucle while() permet d’exécuter un code tant qu’une condition est vraie. Voici la syntaxe de base de cette boucle :


while( condition ){ 
    Exécuter le code ; 
    Evolution de la condition ; 
}
 

Étudions cette structure de base :

  • Dans les parenthèses de l’instruction while(), nous plaçons la condition qui doit être vérifiée pour que la boucle fonctionne. Vous pouvez utiliser tous les opérateurs mathématiques et logiques que nous avons vus précédemment.

  • Dans les accolades {...}, nous plaçons le code JavaScript qui doit être exécuté tant que la condition est vraie.

  • Ensuite, nous devons forcément avoir une évolution de la condition, sinon la boucle s’exécuterait indéfiniment.

Prenons un exemple simple pour comprendre le principe d’une boucle infinie :


var a=10 ; 
while ( a<100 ){ 
    console.log( "a est inférieur à 100" ) ; 
}
 

Analysons cette structure :

  • Nous déclarons une variable numérique a, affectée de la valeur 10.

  • Nous entrons dans la boucle while().

  • Dans la boucle while(), nous testons si a est inférieur à 100. Ce test renvoie true, puisque 10 est effectivement inférieur à 100.

  • Puisque le test est valide, nous exécutons le code indiqué entre les accolades {...}. Ce code affiche un message dans la console, avec console.log().

  • Mais nous...

Les fonctions

1. Les objectifs

Les fonctions vont vous permettre de créer des lignes de code que vous allez regrouper en un bloc que vous nommerez. Cela va permettre de mieux structurer votre code, de spécialiser certaines fonctionnalités et d’appeler chaque fonction plusieurs fois, dans des scripts et des pages différentes.

2. Créer une fonction

Voilà la syntaxe de base de création d’une fonction :


function ma_fonction () { 
    instruction1 ; 
    instruction2 ; 
    ... 
} 
ma_fonction ();
 

Détaillons ce code :

  • Nous utilisons le mot-clé réservé function pour créer une nouvelle fonction.

  • Cette fonction est nommée ma_fonction.

Notez bien que les fonctions sont des variables, donc vous devez respecter les règles de nommage que nous avons vues précédemment.

  • Le nom de la fonction est obligatoirement suivi par des parenthèses, qui permettront de passer d’éventuels paramètres à cette fonction.

  • Nous avons ensuite une paire d’accolades.

  • Entre ces accolades, nous indiquons toutes les instructions que doit exécuter cette fonction.

  • La dernière ligne appelle la fonction afin qu’elle soit exécutée.

Nous allons créer une fonction simple afin d’en comprendre l’utilisation. Cette fonction sera créée dans un fichier JavaScript qui sera nommé dans cet exemple ma-fonction.js.

Voici le code de cette fonction :


var a=12, b=23 ; 
function ma_fonction(){ 
    var resultat_addition = a + b ; 
    document.getElementById("resultat").innerHTML=resultat_addition;
} 
ma_fonction();
 

Détaillons le code de ce fichier :

  • Nous créons deux variables numériques, a et b, affectées de deux valeurs.

  • La fonction est nommée ma_fonction().

  • La première ligne d’instruction crée une nouvelle variable resultat_addition qui va calculer l’addition des deux variables précédentes.

  • La deuxième ligne d’instruction va rechercher dans le document HTML, document, un élément...

La portée des variables

1. Créer une variable locale

Abordons maintenant un point très important : la portée des variables. La portée des variables indique où nous pouvons utiliser les variables que nous créons.

Reprenons l’exemple précédent en nous disant que, puisque nous avons défini la variable resultat_addition, pourquoi ne pas l’utiliser dans l’affichage du résultat ?

Voici le code du fichier ma-fonction.js modifié :


function ma_fonction(nb1,nb2){ 
    var resultat_addition = nb1 + nb2 ; 
    return resultat_addition ; 
} 
var calcul = ma_fonction(12,23); 
alert("Le résultat est "+resultat_addition);
 

Dans l’instruction alert, nous utilisons directement la variable resultat_addition.

Le fichier exemple-01.html est inchangé. Voici l’affichage obtenu dans la console :

images/C02-035.png

La console nous affiche ce message : resultat_addition is not defined. Ce message indique que la variable resultat_addition n’est pas définie, elle est inconnue pour le script.

C’est un affichage parfaitement normal. En effet, la variable resultat_addition a été définie dans la fonction ma_fonction(), entre ses accolades et surtout avec le mot-clé var. De ce fait même, la portée de cette variable est limitée au bloc de code où elle a été...

Les objets du code JavaScript

1. Définir la notion d’objet

En programmation, un "objet" est une notion fondamentale de tous les langages modernes, ils sont très largement utilisés. En programmation, la définition d’un objet peut être celle-ci :

Un objet est une collection de propriétés et de méthodes.

  • Une propriété est une caractéristique d’un objet.

  • Une méthode est une fonctionnalité d’un objet.

Prenons une analogie simple : l’être humain est un objet ! Il est bien la collection de très nombreuses propriétés et de non moins nombreuses méthodes.

Pour les humains, nous pouvons avoir comme propriétés la taille, la couleur des cheveux, le sexe, le poids, le nom… Vous avez noté que ces exemples de propriétés sont tous des paramètres mesurables avec des valeurs. Comme en programmation, les propriétés sont des variables de type numérique, chaîne de caractères…

Pour les humains, nous pouvons avoir comme méthodes marcher, manger, dormir, penser… Vous avez noté que les exemples de méthodes sont tous des verbes d’action. Comme en programmation, les méthodes sont des fonctions qui exécutent des instructions.

Sachez qu’en JavaScript, presque tous les éléments que nous utilisons sont des objets. Les variables sont des objets, les fonctions sont des objets, les chaînes de caractères sont des objets, tout comme les dates et les tableaux, que n ...

Les tableaux

1. Utiliser les tableaux

Nous avons vu dans une section précédente que les variables permettent de stocker une valeur, mais pas plus. Si vous avez besoin de stocker plusieurs variables dans un même élément, vous devez utiliser un tableau. Dès lors que vous avez besoin de gérer des listes de variables, vous pouvez utiliser des tableaux. C’est le même principe dans la vie de tous les jours : liste de courses, liste des anniversaires, liste de tâches à faire, liste des livres à lire ou des disques à écouter... Et bien sûr, les tableaux sont des objets !

Notez bien que les tableaux peuvent contenir n’importe quel type de données : variables numériques, chaîne de caractères, mais aussi des fonctions et des tableaux... Les tableaux sont des conteneurs à plusieurs dimensions.

2. Créer un tableau

Nous pouvons créer un tableau avec le constructeur new appliqué sur l’objet Array().


var mesDonnees = new Array("Paul", "Valérie", "Pierre", "Julie") ;
 

Et vous pouvez aussi utiliser la syntaxe littérale :


var mesDonnees = ["Paul", "Valérie", "Pierre", "Julie"] ;
 

Ce sont les crochets qui indiquent au JavaScript qu’il a affaire à un tableau.

C’est assez usuellement cette dernière méthode...

Les chaînes de caractères

1. Créer un objet de type chaîne de caractères

Les chaînes de caractères sont des objets à part entière. Nous pourrons donc en exploiter des propriétés et des méthodes.

En JavaScript, les objets de texte, de type chaîne de caractères, sont de type String(). Pour créer un objet de type chaîne de caractères, nous devons utiliser la classique syntaxe avec var et = :


var unePhrase = "Voici une phrase" ;
 

Souvenez-vous qu’il est possible d’utiliser le caractère guillemet double " ou simple pour délimiter la chaîne de caractères. Alors pourquoi deux caractères sont-ils utilisables ? Simplement pour avoir la possibilité d’insérer dans le texte des guillemets, par exemple :


var unePhrase = 'Il a dit "Voici une phrase".' ;
 

Attention, si vous voulez insérer une apostrophe dans une phrase, vous devez utiliser le caractère d’échappement pour qu’elle soit interprétée comme du texte et non pas comme du code :


var unePhrase = 'Il a dit C\'est une phrase.' ;
 

2. Une propriété et une méthode des chaînes de caractères

Comme pour les tableaux, nous pouvons utiliser la propriété length pour connaître le nombre de tous les caractères...

Les dates

1. Créer des dates

Les dates sont très présentes dans les sites web : dates de création d’un article, date de modification, date d’un commentaire, date de réservation...

Pour créer une date, nous pouvons utiliser la syntaxe classique avec le constructeur appliqué à l’objet Date() :


var aujourdhui = new Date() ;
 

Et nous pouvons l’afficher dans la console :


var aujourdhui = new Date() ; 
console.log( aujourdhui );
 

Voici l’affichage obtenu :

images/C02-049.png

Le résultat affiché est très précis : nous avons la date, l’heure, le fuseau horaire GMT et l’indication du changement d’heure.

Nous pouvons aussi créer une variable de type date, à une date voulue :


var anniversaire = new Date(1998,04,12) ; 
console.log(anniversaire) ;
 

Voici l’affichage obtenu :

images/C02-050.png

Le mois affiché en anglais est May, soit le mois de mai. Or, nous avions indiqué le mois ayant le numéro 4 ! Pourquoi ? Tout simplement parce que le mois de janvier, qui est le premier mois de l’année, possède l’index numéroté 0, comme pour les tableaux. Donc le mois de décembre est numéroté 11.

Si nous souhaitons avoir la date au mois d’avril, il faut donc indiquer la valeur 3. Et nous pouvons aussi ajouter une heure, des minutes et des secondes.


var anniversaire = new Date(1998,03,12,15,30,23) ; 
console.log(anniversaire)...