JavaScript

Le JavaScript, c’est quoi ?

Vous le savez, c’est un langage de programmation qui ajoute de l’interactivité et des comportements personnalisés à nos sites. C’est un langage de programmation côté client, c’est à dire qu’il est exécuté par le navigateur de l’utilisateur, et pas par le serveur. Il est donc très dépendant du navigateur, de sa configuration ou même de sa prise en charge.

Qu’est-ce que ce n’est pas ?

Cela n’a rien à voir avec Java. Et il a une mauvaise réputation, notamment à cause de l’usage qu’il en a été fait, à savoir des redirections intempestives, des fenêtres surgissantes et autres joyeusetés. Ce n’est pas la faute de JavaScript lui-même, qui présente de nombreux intérêts.

Ce que c’est ?

JavaScript est un langage de programmation léger et incroyablement puissant.

Ce qu’il peut faire

Le plus communément : ajouter de l’interactivité. Tandis que la structure de la page est gérée par votre code HTML, et sa présentation par vos CSS, la troisième couche qui va gérer les comportements sera votre JavaScript.

Tous les éléments HTML, les attributs, les contenus eux-même peuvent être modifiés par un programme qui accède au DOM, comme JavaScript. On peut aussi écrire des programmes qui réagissent aux actions de l’utilisateur, modifier le contenu de la page ou les styles css, à la volée, sans avoir besoin de recharger la page.

Ajouter du JavaScript à une page

Script embarqué

Pour embarquer du JavaScript dans une page, ajoutez simplement le code suivant :

<script>
    Le JavaScript vient ici
</script>

Script externe

L’autre méthode consiste à utiliser l’attribut « src » de l’élément « script » pour pointer un fichier externe. Dans ce cas l’élément « script » n’a pas de contenu.

<script src="mon_script.js"></script>

Position du script

L’élément script peut être positionné partout dans le document, mais la place la plus commune est dans la partie head de votre page, ou à la toute fin du body. L’avantage de le reléguer à la fin, c’est que e DOM est chargé avant le JavaScript et qu’il peut être restitué à l’écran avant que les scripts ne soient chargés. A moins bien sur que vous ne souhaitiez que vos script effectuent des opérations avant le chargement de la page (comme Modernizr par exemple), auquel cas il sera préférable de le mettre dans le head.

Anatomie d’un script JavaScript

Les bases

Il est important de savoir que le JavaScript est sensible à la casse, aussi une variable nommée maVariable, une variable nommée mavariable, et une variable nommée MAVariable seraient traitées comme trois objets différents.

Les espaces ou les caractères tabulation sont ignorés, à moins qu’ils ne fassent partie d’une chaîne de caractères et soient compris entre deux guillemets.

Les déclarations

Un programme, ou script, est composé d’une série de déclarations. Une déclaration est une commande qui dit au navigateur quoi faire. Ici une simple déclaration qui fera apparaître sur votre navigateur une alerte avec la phrase « merci » :

alert("Merci");

Le point virgule à la fin de la déclaration signale la fin de la commande.

Les variables

Une variables est comme un conteneur d’information. Vous lui donnez un nom et vous lui assignez une valeur, qui peut être un nombre, une chaîne de caractères, un élément du DOM, ou une fonction, un peu tout en fait. Cela nous permet d’accéder à la valeur par son nom. La valeur elle même peut être modifiée.

La déclaration suivante crée une variable nommée foo et lui assigne la valeur 5 :

var foo = 5;

Sachez cependant que le nom de vos variable :

• doit commencer par une lettre ou un sous-ligné (underscore)
• doit contenir des lettres, des chiffres, et des underscores,
• ne doit pas contenir de caractère espace
• ne doit pas contenir de caractère spécial (! . , / \ + * =)

 

Types de variables

Les variables peuvent avoir les types suivants :

Variable	Explanation	Example
String	A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks.	var myVariable = 'Bob';
Number	A number. Numbers don’t have quotes around them.	var myVariable = 10;
Boolean	A True/False value. The words true and false are special keywords in JS, and don’t need quotes.	var myVariable = true;
Array	A structure that allows you to store multiple values in one single reference.	var myVariable = [1,'Bob','Steve',10]; Refer to each member of the array like this: myVariable[0], myVariable[1], etc.
Object	Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn.	var myVariable = document.querySelector('h1'); All of the above examples too.

Commentaires

Vous pouvez ajouter des commentaires dans vos scripts, tout comme en CSS :

/*
Everything in between is a comment.
*/

Si votre commentaire ne contient pas de saut de ligne, vous pouvez utiliser :

// This is a comment

Opérateurs

Operator	Explanation	Symbol(s)	Example
Addition	Used to add two numbers together or glue two strings together.	+	6 + 9; "Hello " + "world!";
Subtraction, Multiplication, Division	These do what you’d expect them to do in basic math.	-, *, /	9 - 3; 8 * 2; // multiply in JS is an asterisk 9 / 3;
Assignment	You’ve seen this already: it assigns a value to a variable.	=, +=, -=, *=, /=	var myVariable = 'Bob';
Equality	Does a test to see if two values are equal to one another and returns a true/false (Boolean) result.	===	var myVariable = 3; myVariable === 4;
Not, Does-not-equal	Returns the logically opposite value of what it precedes; it turns a trueinto a false, etc. When it is used alongside the Equality operator, the negation operator tests whether two values are not equal.	!, !==	The basic expression is true, but the comparison returns false because we’ve negated it: var myVariable = 3; !(myVariable === 3); Here we are testing « is myVariable NOT equal to 3″. This returns false because myVariable IS equal to 3. var myVariable = 3; myVariable !== 3;
Comparison	These do what you’d expect them to do in basic math.	<, >, <=, >=	10 > 20

Les boucles

Les boucles de programmation ont toutes à voir avec le fait de répéter la même chose – ce que l’on appelle itération.

Une boucle présente généralement une ou plusieurs des caractéristiques suivantes:

• Un compteur , qui est initialisé avec une certaine valeur – c’est le point de départ de la boucle.
• Une condition de sortie , qui est le critère sous lequel la boucle s’arrête – généralement le compteur atteignant une certaine valeur.
• Un itérateur , qui incrémente généralement le compteur d’une petite quantité sur chaque boucle successive, jusqu’à atteindre la condition de sortie.

La boucle standard for

for (initializer; exit-condition; final-expression) {
  // code to run
}

Pa exemple :

const cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
let info = 'My cats are called ';
const para = document.querySelector('p');

for (let i = 0; i < cats.length; i++) {
  info += cats[i] + ', ';
}

para.textContent = info;

qui donnera la sortie suivante : My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

Sortir d’une boucle avec break

Si vous souhaitez quitter une boucle avant que toutes les itérations soient terminées, vous pouvez utiliser l’instruction break.

Ignorer les itérations avec continue

L’instruction continue fonctionne de manière similaire à break , mais au lieu de sortir complètement de la boucle, elle passe à la prochaine itération de la boucle.

while et do … while

La syntaxe de cette boucle ressemble à ceci:

initializer
while (exit-condition) {
  // code to run
}

Par exemple :

let i = 0;

while (i < cats.length) {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
}

La boucle do … while est très similaire, mais fournit une variation de la structure while :

initializer
do {
  // code to run
} while (exit-condition)

Par exemple :

let i = 0;

do {
  if (i === cats.length - 1) {
    info += 'and ' + cats[i] + '.';
  } else {
    info += cats[i] + ', ';
  }

  i++;
} while (i < cats.length);

Conditions

Dans tout langage de programmation, le code doit prendre des décisions et mener des actions en conséquence, en fonction de différents critères. Par exemple, dans une partie, si le nombre de vies du joueur est 0, la partie est terminée.

Les conditions sont des structures de code qui permettent de tester de vérifier si une condition est vérifiée pour exécuter du code, ou exécuter du code alternatif sinon. Par exemple :

if … else

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

Notez qu’il n’est pas obligatoire d’inclure l’élément else.

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
}

Si vous n’avez qu’une instuction à réaliser, vous pouvez vous passer des accolades :

var iceCream = 'chocolate';
if (iceCream === 'chocolate') alert('Yay, I love chocolate ice cream!');    
else alert('Awwww, but chocolate is my favorite...'); 

else if

<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>

var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);

function setWeather() {
  var choice = select.value;

  if (choice === 'sunny') {
    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
  } else if (choice === 'rainy') {
    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
  } else if (choice === 'snowing') {
    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
  } else if (choice === 'overcast') {
    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
  } else {
    para.textContent = '';
  }
}

Note sur les opérateurs de comparaison

• === et !== — teste si une valeur est identique ou non identique.
• < et > — teste si une valeur est inférieure ou supérieure à une autre.
• <= et >= — teste si une valeur est inférieure ou égale ou supérieure ou égale à une autre.

Un mot sur les tests des valeurs booléennes ( true / false ). Toute valeur qui n’est pas false , undefined , null , 0 , NaN ou une chaîne vide ( '' ) renvoie true lorsqu’elle est testée en tant qu’instruction conditionnelle. Vous pouvez donc simplement utiliser un nom de variable pour vérifier si elle est true, ou même pour vérifier qu’elle existe.

var cheese = 'Cheddar';

if (cheese) {
  console.log('Yay! Cheese available for making cheese on toast.');
} else {
  console.log('No cheese on toast for you today.');
}

Imbrication de if … else

Il est parfaitement correct d’en insérer une if...else dans une autre – pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévision météorologique pour afficher un ensemble supplémentaire de choix en fonction de la température :

if (choice === 'sunny') {
  if (temperature < 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
  } else if (temperature >= 86) {
    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
  }
}

Opérateurs logiques : AND, OR et NOT

Si vous souhaitez tester plusieurs conditions, les opérateurs logiques peuvent vous aider.

• && – AND; vous permet d’enchaîner deux expressions ou plus afin que chacune d’entre elles soit évaluée individuellement à true pour que l’expression entière renvoie true .
• || – OU; vous permet d’enchaîner deux expressions ou plus afin qu’un ou plusieurs d’entre elles soient évaluées individuellement à true pour que l’expression entière renvoie true .

if (choice === 'sunny' && temperature < 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
} else if (choice === 'sunny' && temperature >= 86) {
  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
}

if (iceCreamVanOutside || houseStatus === 'on fire') {
  console.log('You should leave the house quickly.');
} else {
  console.log('Probably should just stay in then.');
}

Le dernier type d’opérateur logique, NOT, exprimé par le ! opérateur, peut être utilisé pour nier une expression. Combinons-le avec OR dans l’exemple ci-dessus:

if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('Probably should just stay in then.');
} else {
  console.log('You should leave the house quickly.');
}

L’instruction switch

Dans les cas où vous souhaitez définir un test sur avec un grand nombre de choix, la syntaxe peut être un peu lourde.

L’instruction switch prennent une expression / valeur unique en entrée, puis parcourent plusieurs choix jusqu’à ce qu’elles en trouvent une qui corresponde à cette valeur, en exécutant le code correspondant.

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;
    
  // include as many cases as you like

  default:
    actually, just run this code
}

Par exemple :

<label for="weather">Select the weather type today: </label>
<select id="weather">
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p></p>

var select = document.querySelector('select');
var para = document.querySelector('p');

select.addEventListener('change', setWeather);


function setWeather() {
  var choice = select.value;

  switch (choice) {
    case 'sunny':
      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
      break;
    case 'rainy':
      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
      break;
    case 'snowing':
      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
      break;
    case 'overcast':
      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
      break;
    default:
      para.textContent = '';
  }
}

L’opérateur ternaire

Juste pour économiser de la place :

( condition ) ? lancez ce code: lancez ce code sinon

var greeting = ( isBirthday ) ? 'Joyeux anniversaire, Mme Smith - nous espérons que vous passez une bonne journée!' : 'Bonjour Mme Smith.';

Autre exemple :

<label for="theme">Select theme: </label>
<select id="theme">
  <option value="white">White</option>
  <option value="black">Black</option>
</select>

<h1>This is my website</h1>

var select = document.querySelector('select');
var html = document.querySelector('html');
document.body.style.padding = '10px';

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.onchange = function() {
  ( select.value === 'black' ) ? update('black','white') : update('white','black');
}

Les fonctions

Une fonction est une portion de code qui effectue une tâche mais qui n’est pas exécutée tant qu’elle n’a pas été appelée. Cela permet d’écrire des bouts de programmes réutilisables sans avoir à les ré-écrire.

Les fonctions natives

Il existe des centaines de fonctions natives à JavaScript, citons par exemple :

• alert(), confirm(), ou prompt() qui fournissent une boite de dialogue au niveau du navigateur.
• Date() qui fournit la date et l’heure courante
• parseInt(« 123 »); convertir une chaîne de caractères contenant des nombres en variable de type nombre
• setTimeout(functionName, 5000); qui exécute une fonction après un délai donné en millisecondes

Liste de toutes les fonctions natives : Index des méthodes JavaScript

Exercice

Débuter

Faites les exercices proposés par le site w3schools.

Création de fonction

Écrivez une fonction appelée « absolu » qui retourne la valeur absolue du nombre qui lui est donné en argument. La valeur absolue d’un nombre négatif est la version positive du même nombre, et la valeur absolue d’un nombre positif (ou zéro) est le nombre lui-même.

Manipulez les opérateurs arithmétiques

Définissez une variable qui est égale à 7 + 8 et utilisez la fonction alert() pour afficher la valeur de la variable (résultat de l’addition).

<script>
var dmc = 7+8;
alert(dmc);
</script>

Maintenant mettez entre guillemets 7+8. Affichez la valeur de la variable. Pourquoi un tel résultat ?

<script>
var dmc = "7+8";
alert(dmc);
</script>

Changer une image

Récupérez les images image1 et image2 et déposez-les dans un répertoire « images » situé dans votre répertoire web.

Créez une page HTML index.html et attachez-y un fichier JavaScript main.js.

Ajoutez à votre page un élément image permettant d’afficher l’image nommée image1.png du répertoire « images »

Éditez votre fichier main.js pour y ajouter :

var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/image1.png') {
      myImage.setAttribute ('src','images/image2.png');
    } else {
      myImage.setAttribute ('src','images/image1.png');
    }
}

Ajouter un message personnalisé à l’utilisateur

Nous allons ajouter un autre bout de code qui va changer le titre de la page avec un message de bienvenue personnalisé.

Dans votre page, ajoutez le bouton suivant :

<button>Change user</button>

Dans le fichier main.js, placez ces lignes de code :

var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');

Puis ajoutez la fonction suivante :

function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}

Cette fonction contient une fonction prompt() qui ouvre une boite de dialogue qui demande à l’utilisateur de saisir des données. Nous utilisons ensuite un appel localStorage qui nous permet de stocker des données dans le navigateur. Nous utilisons la fonction setItem pour créer et stocker un élément de données appelé « name » en définissant sa valeur sur la variable myName qui contient les données saisies par l’utilisateur. Enfin nous définissons le textContent de l’élément titre sur une chaîne de caractère suivie du nom stocké de l’utilisateur.

Ajoutez ensuite ce bloc if ... else qui va structurer l’application dès son prmier chargement :

if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}

Ce bloc commence par utiliser l’opérateur de négation représenté par le ! pour vérifier si les données du nom existent. Sinon la fonction setUserName() est exécutée pour les créer.

Enfin, placez le gestionnaire d’événements onclick sur le bouton ci-dessous.

myButton.onclick = function() {
  setUserName();
}

Les événements

Nom de l’événement	Action pour le déclencher
click	Cliquer (appuyer puis relâcher) sur l’élément
dblclick	Double-cliquer sur l’élément
mouseover	Faire entrer le curseur sur l’élément
mouseout	Faire sortir le curseur de l’élément
mousedown	Appuyer (sans relâcher) sur le bouton gauche de la souris sur l’élément
mouseup	Relâcher le bouton gauche de la souris sur l’élément
mousemove	Faire déplacer le curseur sur l’élément
keydown	Appuyer (sans relâcher) sur une touche de clavier sur l’élément
keyup	Relâcher une touche de clavier sur l’élément
keypress	Frapper (appuyer puis relâcher) une touche de clavier sur l’élément
focus	« Cibler » l’élément
blur	Annuler le « ciblage » de l’élément
change	Changer la valeur d’un élément spécifique aux formulaires (input,checkbox, etc.)
input	Taper un caractère dans un champ de texte (son support n’est pas complet sur tous les navigateurs)
select	Sélectionner le contenu d’un champ de texte (input,textarea, etc.)

Toutefois, ce n’est pas tout, il existe aussi deux événements spécifiques à l’élément <form> , que voici :

Nom de l’événement	Action pour le déclencher
submit	Envoyer le formulaire
reset	Réinitialiser le formulaire

Comme attributs HTML

<body onclick="maFonction();">

Même si cela fonctionne, c’est un vestige de l’antiquité et cela doit être proscrit de vos développements. N’oublions pas que nous faisons de l’enrichissement progressif, qui nous invite à bien séparer le contenu dans le HTML, sa présentation dans les CSS, et les interactions dans le JavaScript.

Comme une méthode (ou fonction)

<script>
window.onclick = maFonction;
</script>

Vous pouvez aussi déclarer directement votre fonction :

<script>
window.onclick = function() {
    /* le code placé ici sera exécuté au clic sur n'importe quelle partie de la fenêtre */
};
</script>

Écouteur d’événement

<script>
window.addEventListener("click", maFonction);
</script>

Et comme précédemment, vous pouvez déclarer votre fonction directement :

<script>
window.addEventListener("click", function(e) {
    /* le code placé ici sera exécuté au clic sur n'importe quelle partie de la fenêtre */
});
</script>

Rappels #2

Gestion des erreurs

Types d’erreurs

En règle générale, lorsque vous codez en JavaScript, vous rencontrez deux types d’erreurs.

• Les erreurs de syntaxe : ce sont des fautes d’orthographe dans votre code qui empêchent complètement le programme de s’exécuter ou qui le bloque à en cours d’exécution. Généralement vous disposerez de messages d’erreurs suffisamment explicites pour réparer, à condition de connaître les bons outils et de savoir ce que signifie les messages d’erreurs.
• Les erreurs logiques : il s’agit d’erreurs dans lesquelles la syntaxe est correcte mais le code ne produit pas ce que vous vouliez. Celles-ci sont souvent plus difficiles à corriger car il n’y a généralement pas de message d’erreur correspondant pour vous guider dans la résolution.

Bon ce n’est pas tout à fait aussi simple, mais c’est un bon début.

Résoudre les erreurs de syntaxe

Nous avons déjà utilisé la console JavaScript du navigateur.

Ce qui est très utile c’est que la console vous envoie des messages d’erreur chaque fois qu’une erreur de syntaxe existe dans le code.

Par exemple, rendez-vous sur la page présentant une erreur de syntaxe et observez le message d’erreur dans la console pour identifier l’anomalie dans la partie JavaScript du code suivant :

<!doctype html>
<html lang="fr-FR" >
<head>
  <meta charset="utf-8">
  <title>Une erreur de syntaxe JavaScript</title>
</head>
<body>
<h1>Une erreur de syntaxe JavaScript</h1>
<script>
var multiple = 7; 
document.write('<ul>');
for( var i = 1; i < 10; i++ ) { 
  write('<li>' + multiple +'x' + i + ' = ' + (multiple*i) + '</li>');
}
document.write('</ul>');
</script>
</body>
</html>

• Une croix rouge indique qu’il y a une erreur.
• Un message d’erreur indique qu’est-ce qui ne va pas : « ReferenceError: write is not defined« .
• Un lien « en savoir plus » qui mène vers une page qui détaille ce à quoi correspond ce message d’erreur.
• Le nom du fichier incriminé. Il est représenté par un lien qui mène vers l’onglet « Débogueur » des outils de développements du navigateur, présentant la ligne de code incriminée surlignée et mise en exergue.
• Le numéro de la ligne où se situe l’erreur, et le numéro du premier caractère où l’erreur a été vue.

Vous pouvez voir que la ligne 15 présente une erreur :

write('<li>' + multiple +'x' + i + ' = ' + (multiple*i) + '</li>');

Que vous pourriez corriger ainsi :

document.write('<li>' + multiple +'x' + i + ' = ' + (multiple*i) + '</li>');

Manipulations des chaînes de caractères

Tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :

var string = 'Ceci est ma chaîne';

votre variable devient une instance d’objet de chaîne et dispose ainsi d’un grand nombre de propriétés et de méthodes.

Vous n’avez vraiment pas besoin de connaître la plupart de ces choses, mais il y en a quelques-uns que vous utiliserez potentiellement assez souvent que nous examinerons ici.

Entrons quelques exemples dans une nouvelle console.

Trouver la longueur d’une chaîne de caractères

C’est facile – vous utilisez simplement la propriété length . Essayez d’entrer les lignes suivantes:

var ecole = 'ecv';
ecole.length;

Cela devrait renvoyer le nombre 3, car « ecv » comporte 3 caractères. Ceci est utile pour de nombreuses raisons. Par exemple, vous pouvez rechercher la longueur d’un nom afin de pouvoir informer un utilisateur que sa saisie dépasse une certaine longueur. .

Récupération d’un caractère spécifique dans une chaîne

Vous pouvez récupérer n’importe quel caractère d’une chaîne en utilisant la notation entre crochets . Cela signifie que vous incluez des crochets ( [] ) à la fin du nom de votre variable. A l’intérieur des crochets, vous insérez le numéro du caractère que vous souhaitez retourner. Ainsi, par exemple, pour récupérer la première lettre, procédez comme suit:

ecole[0];

Les ordinateurs comptent à partir de 0, et pas 1 !

Pour récupérer le dernier caractère d’ une chaîne, nous pourrions utiliser la ligne suivante, en combinant cette technique avec la propriété length nous avons examinée ci-dessus :

ecole[ecole.length-1];

La longueur de « ecv » est 3, mais comme le compte commence à 0, la position du caractère est 2, nous avons donc besoin de length-1 . Vous pouvez utiliser ceci pour, par exemple, trouver la première lettre d’une série de chaînes et les classer par ordre alphabétique.

Trouver une sous-chaîne dans une chaîne et l’extraire

Parfois, vous aurez envie de savoir si une chaîne plus petite est présente dans une plus grande. Cela peut être fait en utilisant la méthode indexOf() , qui prend un seul paramètre – la sous-chaîne que vous souhaitez rechercher. Essayez le code suivant :

ecole.indexOf('cv'); 

Cela nous donne un résultat de 1, car la sous-chaîne « cv » commence à la position 1 (0, 1 – donc 2 caractères) à l’intérieur de « ecv ».

Cela peut être fait d’une autre manière, ce qui est peut-être encore plus efficace. Essayez ce qui suit :

ecole.indexOf('vanille'); 

Cela devrait vous donner un résultat de -1, qui est renvoyé lorsque la sous-chaîne, dans ce cas ‘vanille’, n’est pas trouvée dans la chaîne principale.

Lorsque vous savez où une sous-chaîne commence dans une chaîne et que vous savez à quel caractère vous voulez qu’elle se termine, slice() peut être utilisé pour l’extraire.

ecole.slice(0,2);

Cela renvoie « ec » – le premier paramètre est la position du caractère à partir duquel l’extraction est effectuée, et le second paramètre est la position du caractère suivant le dernier à être extrait.

Si vous savez que vous voulez extraire tous les caractères restants d’une chaîne après un certain caractère, vous n’avez pas à inclure le second paramètre :

ecole.slice(1);

Cela renvoie « cv » – car la position du caractère 1 est la lettre c et, comme vous n’avez pas inclus de second paramètre, la sous-chaîne renvoyée était composée de tous les caractères restants de la chaîne.

Changer la casse

Les méthodes de chaîne toLowerCase() et toUpperCase() prennent une chaîne et convertissent tous les caractères en minuscules ou majuscules, respectivement. Cela peut être utile par exemple si vous souhaitez normaliser toutes les données saisies par l’utilisateur avant de les stocker dans une base de données.

Essayons d’entrer les lignes suivantes pour voir ce qui se passe :

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase(); 

Modifier des parties d’une chaîne

Vous pouvez remplacer une sous-chaîne d’une chaîne par une autre en utilisant la méthode replace().

Il faut deux paramètres: la chaîne que vous souhaitez remplacer et la chaîne par laquelle vous souhaitez remplacer.

ecole.replace('cv','ndive'); 

Notez que pour obtenir réellement la valeur mise à jour reflétée dans la variable ecole dans un programme réel, vous devez définir la valeur de la variable comme étant le résultat de l’opération;  Il faut donc écrire ceci :

ecole = ecole.replace('cv','ndive');

Les tableaux

Créer un tableau

Les tableaux sont constitués de crochets, qui contiennent une liste d’éléments séparés par des virgules.

var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles']; 
shopping;

Dans ce cas, chaque élément du tableau est une chaîne, mais gardez à l’esprit que vous pouvez stocker n’importe quel élément dans un tableau: chaîne, nombre, objet, autre variable, voire même un tableau :

var sequence = [1, 1, 2, 3, 5, 8, 13]; 
var random = ['tree', 795, [0, 1, 2]]; 

 

Accéder à et modifier des éléments de tableau

Vous pouvez ensuite accéder à des éléments individuels du tableau en utilisant la notation entre crochets, de la même manière que vous avez accédé aux lettres d’une chaîne .

Entrez ce qui suit dans votre console :

shopping[0]; // returns "bread" 

Vous pouvez également modifier un élément d’un tableau en donnant simplement une nouvelle valeur à un seul élément du tableau :

shopping[0] = 'tahini'; 
shopping; 
// shopping va maitenant afficher : [ "tahini", "milk", "cheese", "hummus", "noodles" ]

Notez qu’un tableau à l’intérieur d’un tableau s’appelle un tableau multidimensionnel. Vous pouvez accéder à un élément à l’intérieur d’un tableau qui est lui-même à l’intérieur d’un autre tableau en enchaînant deux ensembles de crochets. Par exemple, pour accéder à l’un des éléments du tableau qui est le troisième élément du tableau random (voir la section précédente), nous pouvons procéder de la manière suivante :

random[2][2]; 

Trouver la longueur d’un tableau

Vous pouvez connaître la longueur d’un tableau (le nombre d’éléments qu’il contient) exactement de la même manière que pour la longueur (en caractères) d’une chaîne – en utilisant la propriété length :

var sequence = [1, 1, 2, 3, 5, 8, 13];
sequence.length; // devrait retourner 7

Cela a d’autres utilisations, mais il est le plus souvent utilisé pour indiquer à une boucle de continuer jusqu’à ce qu’elle ait parcouru tous les éléments d’un tableau. Donc par exemple:

 

var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {
console.log(sequence[i]);
}

Conversion entre des chaînes et des tableaux

Certaines données brutes contenues dans une chaîne longue et longue vous sont souvent présentées. Vous souhaiterez peut-être séparer les éléments utiles dans un formulaire plus utile, puis les manipuler, comme par exemple les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode split() . Dans sa forme la plus simple, cela prend un seul paramètre, le caractère sur lequel vous souhaitez séparer la chaîne, et renvoie les sous-chaînes entre les séparateurs en tant qu’éléments d’un tableau.

Commencez par créer une chaîne dans votre console :

var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

Maintenant divisons-le à chaque virgule :

var myArray = myData.split(',');
myArray; 

Enfin, essayez de trouver la longueur de votre nouveau tableau et d’en extraire quelques éléments :

myArray.length;
myArray[0]; // le premier élément du tableau
myArray[1]; // le deuxième élément du tableau
myArray[myArray.length-1]; // le dernier élément du tableau

Vous pouvez également aller dans le sens inverse en utilisant la méthode join() :

var myNewString = myArray.join(',');
myNewString; 

Une autre façon de convertir un tableau en chaîne consiste à utiliser la toString() . toString() est sans doute plus simple que join() car il ne prend pas de paramètre, mais avec join() vous pouvez spécifier différents séparateurs

var dogNames = ['Rocket','Flash','Bella','Slugger'];
dogNames.toString(); // Rocket, Flash, Bella, Slugger

Ajouter et enlever des éléments d’un tableau

var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle']; 

Pour ajouter ou supprimer un élément à la fin d’un tableau, nous pouvons utiliser respectivement push() et pop() .

Commençons par push() :

myArray.push('Cardiff');
myArray;
myArray.push('Bradford', 'Brighton');
myArray; 

Supprimer le dernier élément du tableau est aussi simple que d’exécuter pop() dessus :

myArray.pop(); 

L’élément supprimé a été renvoyé à la fin de l’appel de la méthode. Pour enregistrer cet élément dans une nouvelle variable, vous pouvez procéder comme suit :

var removedItem = myArray.pop();
myArray;
removedItem; 

unshift() et shift() fonctionnent exactement de la même manière que push() et pop() , à la différence près qu’ils travaillent au début du tableau, pas à la fin.

myArray.unshift('Edinburgh');
myArray; 

var removedItem = myArray.shift();
myArray;
removedItem; 

Exercice

Exemple : Devinez le nombre

Dans cet exercice, nous allons voir comment construire le jeu simple que vous pouvez essayer ci-dessous:

Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.

Imaginons que vous disposiez des consignes suivantes pour créer ce jeu :

Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s’il a deviné ou non le bon nombre — si ce n’est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s’il a épuisé ses 10 chances. A la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.

La première chose à faire en regardant ce résumé, est de le décomposer en tâches simples et codables comme le ferait un programmeur :

1. Générer un nombre aléatoire entre 1 et 100.
2. Stocker le nombre de tours déjà joués. Commencer par 1.
3. Fournir au joueur le moyen de saisir un nombre.
4. Stocker l’ensemble des propositions de nombres pour que le joueur puisse les consulter.
5. Vérifier si le nombre saisi par le joueur est correct.
6. S’il est correct :
   1. Afficher un message de félicitations.
   2. Empêcher que le joueur saisisse de nouveau un nombre.
   3. Afficher un contrôle pour que le joueur puisse rejouer.
7. S’il est faux et que le joueur a encore des tours à jouer :
   1. Informer le joueur que sa proposition de nombre est fausse.
   2. Lui permettre d’entrer une nouvelle proposition de nombre.
   3. Incrémenter le nombre de tours de 1.
8. S’il est faux et que le joueur n’a plus de tours à jouer :
   1. Informer le joueur qu’il a perdu et que la partie est finie.
   2. Empêcher que le joueur saisisse de nouveau un nombre.
   3. Afficher un contrôle pour que le joueur puisse rejouer.
9. Une fois le jeu redémarré, s’assurer que la logique du jeu et l’interface utilisateur sont complètement réinitialisées, puis revenir à l’étape 1.

Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.

Configuration initiale

Pour commencer cet exercice, copiez le code suivant dans un fichier local :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">

    <title>Devinez le nombre - Exercice JavaScript</title>

    <style>
      html {
        font-family: sans-serif;
      }
      body {
        width: 50%;
        max-width: 800px;
        min-width: 480px;
        margin: 0 auto;
      }
      .lastResult {
        color: white;
        padding: 3px;
      }
    </style>
  </head>

  <body>
    <h1>Deviner un nombre</h1>

    <p>Nous avons généré un nombre aléatoire entre 1 et 100, tentez de le deviner en 10 tours maximum. Pour chaque tentative, nous vous dirons si votre estimation est trop ou pas assez élevée.</p>

    <div class="form">
      <label for="guessField">Entrez votre proposition: </label><input type="text" id="guessField" class="guessField">
      <input type="submit" value="Submit guess" class="guessSubmit">
    </div>

    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>

    <script>

      // Votre JavaScript vient ici

    </script>
  </body>
</html>

Ouvrez-le dans votre éditeur de texte et votre navigateur web. À ce moment, vous verrez un simple en-tête, un paragraphe d’instructions et un formulaire pour entrer une estimation, mais le formulaire ne fera actuellement rien.

L’endroit où nous allons ajouter tout notre code se trouve dans l’élément <script>au bas du code HTML.

Ajouter des variables pour stocker les données

Commençons. Tout d’abord, ajoutez les lignes suivantes dans l’élément <script> :

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

let guesses = document.querySelector('.guesses');
let lastResult = document.querySelector('.lastResult');
let lowOrHi = document.querySelector('.lowOrHi');

let guessSubmit = document.querySelector('.guessSubmit');
let guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé let suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égale (=) suivi de la valeur que vous voulez lui donner.

Dans notre exemple :

• La première variable — randomNumber — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique.
• Les trois variables suivantes sont chacune faites pour stocker une référence aux paragraphes des résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code:

  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>

• Les deux variables suivantes stockent des références à l’entrée de texte de formulaire et au bouton de soumission et sont utilisées pour contrôler l’envoi de la supposition (guess)  plus tard.

  <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
  <input type="submit" value="Submit guess" class="guessSubmit">

• Nos deux dernières variables stockent un nombre de tentatives qui vaut 1 (utilisé pour garder une trace du nombre de suppositions que le joueur a faites) et une référence à un bouton de réinitialisation qui n’existe pas encore (mais plus tard).

Fonctions

Ensuite, ajoutez ce qui suit ci-dessous votre code JavaScript précédent :

function checkGuess() {
  alert('Je suis un espace réservé');
}

Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, ce qui évite d’avoir à répéter le code tout le temps. C’est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l’instant nous allons nous concentrer sur un type simple. Ici nous avons défini une fonction en utilisant le mot-clé function accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades ({ }). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.

Quanf nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.

Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les dans la console javascript des outils de développement et entrez la ligne suivante

checkGuess();

Après avoir pressé Entrée ou Retour, vous devriez voir apparaître une alerte disant « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l’appelons.

Structures conditionnelles

Continuons avec cette fonction checkGuess(). Nous ne souhaitons pas qu’elle renvoie un message d’emplacement réservé. Nous voulons qu’elle vérifie si la supposition du joueur est correcte ou pas et qu’elle fasse une réponse appropriée.

Donc, remplacez l’actuelle  fonction checkGuess() par cette version :

function checkGuess(){
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent ='Propositions précédentes : ';
    }
  guesses.textContent += userGuess + ' ';
 
  if (userGuess === randomNumber) {
    lastResult.textContent ='Bravo, vous avez trouvé le nombre !';
    lastResult.style.backgroundColor ='green';
    lowOrHi.textContent ='';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!! PERDU !!!';
    setGameOver();
  } else {
    lastResult.textContent ='Faux !';
    lastResult.style.backgroundColor = 'red';
    if (userGuess < randomNumber) {
      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
    }
}
 
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

Pas mal de code ! Passons en revue chaque section et expliquons ce qu’elle fait.

• La première ligne de la fonction (ligne 2) déclare une variable nommée userGuess et définit sa valeur à celle qui vient d’être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  Number() , juste pour nous assurer que la valeur est bien un nombre.
• Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5 ci‑dessus). Un bloc de code conditionnel permet d’exécuter du code de manière sélective, selon que certaines conditions sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n’est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé if, puis quelques parenthèses, puis des accolades { }.

  A l’intérieur des parenthèses, nous mettons le test. S’il renvoie true , nous exécutons le code à l’intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant.

  Dans ce cas, le test vérifie si la variable guessCount est égale à 1 (c’est-à-dire s’il s’agit de la première supposition du joueur) :

  guessCount === 1

  Si c’est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas.

• La ligne 6 ajoute la valeur courante userGuess à la fin du paragraphe guesses, plus un espace vide de sorte qu’il y aura un espace entre chaque supposition faite.
• Le bloc suivant (lignes 8-24 ci-dessus) effectue quelques vérifications:
  • Le premier if(){ } vérifie si la supposition de l’utilisateur est égale au nombre aléaotire randomNumber situé en haut de notre JavaScript. Si c’est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations de belle couleur verte à l’adresse du joueur, effaçons le contenu de la boîte d’information sur la position de l’estimation et exécutons une fonction appelée setGameOver(), dont nous reparlerons plus tard.
  • Ensuite, nous chaînons un autre test à la fin du précédent avec une structure else if(){ }. Cette structure vérifie si l’utilisateur a épuisé toutes ses tentatives possibles. Si c’est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d’un message de félicitations.
  • Le dernier bloc chaîné à la fin de ce code (else { }) contient du code qui n’est exécuté que si aucun des deux autres tests n’a renvoyé vrai (c’est-à-dire que le joueur n’a pas deviné juste, mais qu’il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible.

• Les trois dernières lignes de la fonction (ligne 26-28 ci-dessus) préparent à une nouvelle proposition. Nous ajoutons 1 à la variable guessCount qui décompte les tours (++ est une opération d’incrémentation — ajout de 1), puis purgeons le champ texte du formulaire et lui redonnons le focus, prêt pour la saisie suivante.

Evénements

À ce stade, nous avons un bien mis en œuvre la fonctioncheckGuess() , mais ça ne fera rien parce que nous ne l’avons pas encore appelée.

Idéalement, nous voulons l’appeler lorsque le bouton « Soumettre » est activé, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d’une page ou la lecture d’une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l’événement en cours s’appellent écouteurs d’événements, et les blocs de code exécutés en réponse à l’événement déclencheur sont appelés gestionnaires d’évenements.

Ajoutez la ligne suivante sous l’accolade de fermeture de votre fonction checkGuess() :

guessSubmit.addEventListener('click', checkGuess);

Ici, nous ajoutons un écouteur d’événement au bouton guessSubmit . C’est une méthode qui prend deux valeurs d’entrée (appelées arguments) – le type d’événement que nous écoutons (dans ce cas, click) qui est une chaîne, et le code que nous voulons exécuter quand l’événement se produit (dans ce cas, la fonction checkGuess()  — notez que nous n’avons pas besoin de spécifier les parenthèses lors de l’écriture dans addEventListener()).

Essayez d’enregistrer et d’actualiser votre code maintenant, votre exemple devrait maintenant fonctionner, jusqu’à un certain point. Le seul problème est maintenant que si vous devinez la bonne réponse ou si vous n’avez plus de suppositions, le jeu va se casser parce que nous n’avons pas encore défini la fonction setGameOver()qui est supposée être exécuté une fois le jeu terminé. Ajoutons maintenant notre code manquant et complétez l’exemple de fonctionnalité.

Finir les fonctionnalités du jeu

Ajoutons la fonction setGameOver() au fond de notre code en descendant. Ajoutez ceci maintenant, ci-dessous le reste de votre JavaScript:

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Démarrer une nouvelle partie';
  document.body.appendChild(resetButton);
  resetButton.addEventListener('click', resetGame);
}

• Les deux premières lignes désactivent l’entrée de texte et le bouton en définissant leurs propriétés désactivées sur true.  Ceci est nécessaire, car si nous ne le faisons pas, l’utilisateur pourrait soumettre plus de suppositions après la fin du jeu, ce qui gâcherait les choses.
• Les trois lignes suivantes génèrent un nouvel élément <button>, définissent son libellé de texte sur « Démarrer une nouvelle partie » et ajoutez-le au bas de notre code HTML existant.
• La dernière ligne définit un écouteur d’événement sur notre nouveau bouton de sorte que quand il est cliqué, une fonction  resetGame()est appellée.

Maintenant, nous devons définir cette fonction aussi! Ajoutez le code suivant, à nouveau au bas de votre JavaScript:

function resetGame() {
  guessCount = 1;

  let resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

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

Ce bloc de code assez long réinitialise complètement tout ce qu’il était au début du jeu, de sorte que le joueur peut faire un autre tour. Il peut :

• Remettre le compteur guessCount à 1.
• Effacer tous les paragraphes d’information.
• Supprimer le bouton de réinitialisation de notre code.
• Activer les éléments de formulaire et vide et met au point le champ de texte, prêt à entrer une nouvelle estimation.
• Supprimer la couleur d’arrière-plan du paragraphe lastResult.
• Génère un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre!

À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel – félicitations!

Gestion d’un formulaire de contact

Nous souhaitons réaliser un formulaire de contact comprenant les champs suivant.

• nom
• prénom
• adresse email
• message

Nous souhaitons autoriser l’envoi du formulaire seulement si tous les champs sont remplis.

1. Ecrivez une fonction JavaScript « controleFormulaire() » assurant la vérification des champs et retournant « true » si tous les champs sont remplis, ou « false » sinon.
2. Cette fonction sera appelée sur l’événement de la soumission du formulaire.
3. Ajoutez, dans la fonction de contrôle, une variable (chaîne de caractères) contenant le message. Cette variable sera complétée avec les messages correspondant à chaque erreur. Avant de quitter la fonction, affichez le message s’il y a une ou plusieurs erreurs dans le paragraphe ayant l’id= »message_erreur ».
4. Mettre en évidence les champs en erreur : modifier l’apparence d’un champ en erreur en affectant une classe css spécifique au champ, qui modifie alors son apparence.

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Gestion d'un formulaire en JavaScript</title>
	<meta charset="utf-8" />
</head>
<body>

	<p id="message_erreur"></p>
	<form method="post" action="#" enctype="multipart/form-data" id="myForm">
		<p><label for="nom">Nom<span class="alerte" title="champ obligatoire">*</span></label> 
		  <input name="nom" id="nom" value="" type="text"></p>
		<p><label for="prenom">Prénom<span class="alerte" title="champ obligatoire">*</span></label> 
		  <input name="prenom" id="prenom" value="" type="text"></p>
		<p><label for="email" lang="en">Adresse mail <span class="alerte" title="champ obligatoire">*</span></label> 
		  <input name="email" id="email" value="" type="text"></p>
		<p><label for="message">Message <span class="alerte" title="champ obligatoire">*</span></label> 
		  <textarea name="message" rows="10" id="message"></textarea></p>
		<p class="alerte"><strong>* champs obligatoires </strong></p>
		<p class="actions"><input name="envoyer" value="Envoyer" class="submit" type="submit"></p>
	</form>

</body>
</html>

 

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Gestion d'un formulaire en JavaScript</title>
<meta charset="utf-8" />
<style>
.erreur {border-color:red;}
</style>
</head>
<body>
<p id="message_erreur"></p>
<form method="post" action="#" enctype="multipart/form-data" id="myForm">
<p><label for="nom">Nom<span class="alerte" title="champ obligatoire">*</span></label> 
  <input name="nom" id="nom" value="" type="text"></p>
<p><label for="prenom">Prénom<span class="alerte" title="champ obligatoire">*</span></label> 
  <input name="prenom" id="prenom" value="" type="text"></p>
<p><label for="email" lang="en">Adresse mail <span class="alerte" title="champ obligatoire">*</span></label> 
  <input name="email" id="email" value="" type="text"></p>
<p><label for="message">Message <span class="alerte" title="champ obligatoire">*</span></label> 
  <textarea name="message" rows="10" id="message"></textarea></p>
<p class="alerte"><strong>* champs obligatoires </strong></p>
<p class="actions"><input name="envoyer" value="Envoyer" class="submit" type="submit"></p>
</form>

<script>
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
  var erreur = false;
  var messageErreur = '';

  var nom = document.getElementById('nom');
  if (nom.value.length < 1) {
    erreur = true;
    messageErreur = messageErreur + 'Le nom est obligatoire. ';
    nom.className = "erreur";
  }
  else nom.className = "";

  var prenom = document.getElementById('prenom');
  if (prenom.value.length < 1) {
    erreur = true;
    messageErreur = messageErreur + 'Le prénom est obligatoire. ';
    prenom.className = "erreur";
  }
  else prenom.className = "";

  var email = document.getElementById('email');
  if (email.value.length < 1) {
    erreur = true;
    messageErreur = messageErreur + 'Merci de renseigner votre mail. ';
    email.className = "erreur";
  }
  else email.className = "";

  var message = document.getElementById('message');
  if (message.value.length < 1) {
    erreur = true;
    messageErreur = messageErreur + 'Vous devez saisir un message. ';
    message.className = "erreur";
  }
  else message.className = "";

  e.preventDefault();
  document.getElementById('message_erreur').innerHTML = messageErreur;
  return erreur;
}, false);
</script>

</body>
</html>

Manipulez les opérateurs logiques et les comparaison

Créez une variable « age », et affichez :

1. « Vous n’êtes pas encore majeur. » si l’age est inférieur à 18 ans
2. « Vous êtes majeur mais pas encore senior » si l’age est compris entre 18 et 49 ans
3. « Vous êtes senior » si l’age est supérieur ou égal à 50 ans.

var age = 25;

if (age <= 0) {
    // Il faut bien penser au fait que l'utilisateur peut rentrer un âge négatif
    alert("Oh vraiment ? Vous avez moins d'un an ? C'est pas très crédible =p");
} else if (1 <= age && age < 18) {
    alert("Vous n'êtes pas encore majeur.");
} else if (18 <= age && age < 50) {
    alert('Vous êtes majeur mais pas encore senior.');
} else if (age >= 50) {
    alert('Vous êtes senior.');
} else { 
    // Si "age" contient autre chose que les intervalles de nombres ci-dessus alors l'utilisateur a écrit n'importe quoi
    alert("Vous n'avez pas entré d'âge !");
}

Manipulez les boucles « for » : table de multiplication

Affichez une table de multiplication comme celle-ci, en utilisant une boucle « for » :

• 7×1 = 7
• 7×2 = 14
• 7×3 = 21
• 7×4 = 28
• 7×5 = 35
• 7×6 = 42
• 7×7 = 49
• 7×8 = 56
• 7×9 = 63

<script>
document.write('<ul>');
for (i=1;i<10;i++) {
    document.write('<li>'+i+' x '+7+' = '+7*i+'</li>');
};
document.write('</ul>');
</script>

Actions utilisateur et DOM

À un document HTML, ajouter des alertes :

1. au chargement de la page,
2. quand on quitte la page,
3. quand on passe sur une image,
4. quand on clique sur un bouton,
5. quand on appuie sur une touche.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Actions utilisateur et JavaScript</title>
<meta charset="utf-8" />

</head>
<body onload="alert('bienvenue...');"
      onunload="alert('au revoir !');"
      onkeydown="if (event.key=='ArrowRight') {alert('au suivant !');}">

<div class="illustration">
<img src="images/chat.jpg" alt="un chat" width="200"
     onmouseover="alert('ron ron...');" />
</div>

<button onclick="alert('clic !');">cliquez ici !</button>

</body>
</html>

Avec des boutons :

1. changer la couleur de fond quand on clique sur un bouton,
2. changer aussi l’apparence du bouton,
3. ajouter un bouton qui permette de revenir à la normale.

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Actions utilisateur et JavaScript</title>
<meta charset="utf-8" />
<script>
function retournormal () {
  document.documentElement.style.backgroundColor='white';
  document.documentElement.style.color='black';
  document.getElementById('bnuit').style.color='black';
}
</script>
</head>
<body>

<button id="bnuit"
   onclick="document.documentElement.style.backgroundColor='black';
            document.documentElement.style.color='white';
            document.getElementById('bnuit').style.color='red';">
nuit</button>

<button onclick="retournormal();">jour</button>

</body>
</html>

 

Pour prolonger…

• mozilla : animations JavaScript
• openclassroom : animations et effets
• mozilla : la doc JavaScript
• codecombat : jeu pour apprendre la programmation