Premier site en local sur wordpress

JavaScript (introduction)

Posted on by yannick

Le JavaScript est un langage de programmation interprété, c’est-à-dire qu’il a besoin d’un interpréteur pour pouvoir être exécuté.

Tout comme le HTML, le JavaScript est généralement exécuté par le navigateur de l’internaute : on parle d’un comportement client-side, par opposition au server-side lorsque le code est exécuté par le serveur.

La syntaxe du JavaScript

Les instructions

Les instructions doivent être séparées par un point-virgule que l’on place à la fin de chaque instruction:

instruction_1;
instruction_2;
instruction_3;

Le JavaScript n’est pas sensible aux espaces.

Commentaires de fin de ligne

instruction_1; // Ceci est ma première instruction
instruction_2;
// La troisième instruction ci-dessous :
instruction_3;

Commentaires multilignes

/* Ce script comporte 3 instructions :
– Instruction 1 qui fait telle chose
– Instruction 2 qui fait autre chose
– Instruction 3 qui termine le script
*/
instruction_1;
instruction_2;
instruction_3;

 

Les fonctions

Une fonction se compose de deux choses : son nom, suivi d’un couple de parenthèses (une ouvrante et une fermante). Entre les parenthèses se trouvent les arguments, que l’on appelle aussi paramètres. Ceux-ci contiennent des valeurs qui sont transmises à la fonction. Dans le cas duHello world!, ce sont les mots « Hello world! » qui sont passés en paramètre :

alert(‘Hello world!’);

Le JavaScript « dans la page »

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

<script>
alert(‘Hello world!’);
</script>

</body>
</html>

Le JavaScript externe

Il est possible, et même conseillé, d’écrire le code JavaScript dans un fichier externe, portant l’extension.js. Ce fichier est ensuite appelé depuis la page Web au moyen de l’élément<script>et de son attributsrcqui contient l’URL du fichier.js. Voici tout de suite un petit exemple :

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>

<body>

<p>
<!–

Contenu de la page Web

…

–>
</p>

<script>
// Un peu de code JavaScript…
</script>

<script src= »hello.js »></script>

</body>
</html>

Déclarer une variable

Le mot-clévarest présent pour indiquer que vous déclarez une variable.

Le signe = sert à attribuer une valeur à la variable ; ici nous lui avons attribué le nombre 2.

var myVariable = 2;

Vous pouvez déclarer et assigner des variables sur une seule et même ligne :

var myVariable1, myVariable2;

On peut ce servir de la variable let pour donner une valeur à une variable uniquement dans un bloque spécifique.

{
let c=a;
a=b;
b=c;
}

Le type numérique (alias number) :

var number = 5.5;

Les chaînes de caractères (alias string) :

Entouré de ‘ ou « :

<script>
alert(‘Hello world!’);
</script>

Les booléens (alias boolean) :

var isTrue = true;
var isFalse = false;

Il se peut que vous ayez un jour ou l’autre besoin de tester l’existence d’une variable ou d’en vérifier son type. Dans ce genre de situations, l’instructiontypeofest très utile, voici comment l’utiliser :

var number = 2;

alert(typeof number); // Affiche : « number »

var text = ‘Mon texte’;
alert(typeof text); // Affiche : « string »
var aBoolean = false;
alert(typeof aBoolean); // Affiche : « boolean »
Simple non ? Et maintenant voici comment tester l’existence d’une variable :
alert(typeof nothing); // Affiche : « undefined »
Voilà un type de variable très important ! Si l’instructiontypeofvous renvoieundefined, c’est soit que votre variable est inexistante, soit qu’elle est déclarée mais ne contient rien.

Quelques calculs simples

var result = 3 + 2;
alert(result); // Affiche : « 5 »

var number1 = 3, number2 = 2, result;
result = number1 * number2;
alert(result); // Affiche : « 6 »

Simplifier  vos calculs

var number = 3;
number = number + 5;
alert(number); // Affiche : « 8 »

Ce code a exactement le même effet

var number = 3;
number += 5;
alert(number); // Affiche : « 8 »

ceci ne s’applique pas uniquement aux additions mais fonctionne avec tous les autres opérateurs arithmétiques :

  • +=

  • -=

  • *=

  • /=

  • %=

La concaténation

Une concaténation consiste à ajouter une chaîne de caractères à la fin d’une autre, comme dans cet exemple :

var hi = ‘Bonjour’, name = ‘toi’, result;
result = hi + name;
alert(result); // Affiche : « Bonjourtoi »

var text = ‘Bonjour ‘;
text += ‘toi’;
alert(text); // Affiche « Bonjour toi ».

Interagir avec l’utilisateur

grâce à la fonctionprompt(). Voici comment l’utiliser :

var userName = prompt(‘Entrez votre prénom :’);
alert(userName); // Affiche le prénom entré par l’utilisateur

Elle renvoie ce que l’utilisateur a écrit sous forme d’une chaîne de caractères. ex:

var text = ‘Voici un nombre : ‘, number = 42, result;

result = text + number;
alert(result); // Affiche : « Voici un nombre : 42 »

Convertir une chaîne de caractères en nombre

Maintenant, écrire deux fois le chiffre 1, pour obtenir 2 comme résultat et non 11.

var first, second, result;

first = prompt(‘Entrez le premier chiffre :’);
second = prompt(‘Entrez le second chiffre :’);
result = parseInt(first) + parseInt(second);

alert(result);

tout ce qui est écrit dans le champ de texte deprompt()est récupéré sous forme d’une chaîne de caractères, que ce soit un chiffre ou non. Pour cela, vous allez avoir besoin de la fonctionparseInt()qui s’utilise de cette manière :

var text = ‘1337’, number;

number = parseInt(text);
alert(typeof number); // Affiche : « number »
alert(number); // Affiche : « 1337 »

Convertir un nombre en chaîne de caractères

Pour clore ce chapitre, nous allons voir comment convertir un nombre en chaîne de caractères. Il est déjà possible de concaténer un nombre et une chaîne sans conversion, mais pas deux nombres, car ceux-ci s’ajouteraient à cause de l’emploi du +. D’où le besoin de convertir un nombre en chaîne. Voici comment faire :

var text, number1 = 4, number2 = 2;
text = number1 +  » + number2;
alert(text); // Affiche : « 42 »

Nous avons juste ajouté une chaîne de caractères vide entre les deux nombres, ce qui aura eu pour effet de les convertir en chaînes de caractères.

Les conditions

La base de toute condition : les booléens

Les opérateurs de comparaison

Opérateur

Signification

==

égal à

!=

différent de

===

contenu et type égal à

!==

contenu ou type différent de

>

supérieur à

>=

supérieur ou égal à

<

inférieur à

<=

inférieur ou égal à

var number1 = 2, number2 = 2, number3 = 4, result;

result = number1 == number2; // On spécifie deux variables avec l’opérateur de comparaison entre elles
alert(result); // Affiche « true », la condition est donc vérifiée car les deux variables contiennent bien la même valeur

result = number1 == number3;
alert(result); // Affiche « false », la condition n’est pas vérifiée car 2 est différent de 4

result = number1 < number3;
alert(result); // Affiche « true », la condition est vérifiée car 2 est bien inférieur à 4

var number = 4, text = ‘4’, result;

result = number == text;
alert(result); // Affiche « true » alors que « number » est un nombre et « text » une chaîne de caractères

result = number === text;
alert(result); // Affiche « false » car cet opérateur compare aussi les types des variables en plus de leurs valeurs

Les opérateurs logiques

Opérateur

Type de logique

Utilisation

&&

ET

valeur1 && valeur2

||

OU

valeur1 || valeur2

!

NON

!valeur

L’opérateur ET

Cet opérateur vérifie la condition lorsque toutes les valeurs qui lui sont passées valent true. Si une seule d’entre elles vaut false alors la condition ne sera pas vérifiée.

L’opérateur OU

Cet opérateur est plus « souple » car il renvoietruesi une des valeurs qui lui est soumise contienttrue, qu’importent les autres valeurs.

L’opérateur NON

Cet opérateur se différencie des deux autres car il ne prend qu’une seule valeur à la fois. S’il se nomme « NON » c’est parce que sa fonction est d’inverser la valeur qui lui est passée, ainsitruedeviendrafalseet inversement.

Combiner les opérateurs

Tout d’abord un petit résumé (lisez attentivement) : les opérateurs de comparaison acceptent chacun deux valeurs en entrée et renvoient un booléen, tandis que les opérateurs logiques acceptent plusieurs booléens en entrée et renvoient un booléen.

var result = 2 > 8 && 8 > 2;
alert(result); // Affiche « false »

Combiner les opérateurs

Tout d’abord un petit résumé (lisez attentivement) : les opérateurs de comparaison acceptent chacun deux valeurs en entrée et renvoient un booléen, tandis que les opérateurs logiques acceptent plusieurs booléens en entrée et renvoient un booléen.

var result = 2 > 8 && 8 > 2;
alert(result); // Affiche « false »

La structure if pour dire « si »

Comme vous pouvez le constater, le code d’une condition est exécuté si le booléen reçu est true alors que false empêche l’exécution du code.

La structure else pour dire « sinon »

confirm() on lui passe en paramètre une chaîne de caractères qui sera affichée à l’écran et elle retourne un booléen en fonction de l’action de l’utilisateur

if (confirm(‘Pour accéder à ce site vous devez avoir 18 ans ou plus, cliquez sur « OK » si c\’est le cas.’)) {
alert(‘Vous allez être redirigé vers le site.’);
}

else {
alert(« Désolé, vous n’avez pas accès à ce site. »);
}

La structure else  if pour dire « sinon si »

  • Une première condition est à tester ;

  • Une deuxième condition est présente et sera testée si la première échoue ;

  • Et si aucune condition ne se vérifie, la structure else fait alors son travail.

var floor = parseInt(prompt(« Entrez l’étage où l’ascenseur doit se rendre (de -2 à 30) : »));

if (floor == 0) {

alert(‘Vous vous trouvez déjà au rez-de-chaussée.’);

} else if (-2 <= floor && floor <= 30) {

alert(« Direction l’étage n° » + floor + ‘ !’);

} else {

alert(« L’étage spécifié n’existe pas. »);

}

Le cas de l’opérateur OU

En plus de sa fonction principale, permet de renvoyer la première variable possédant une valeur évaluée à true!

var conditionTest1 =  », conditionTest2 = ‘Une chaîne de caractères’;

alert(conditionTest1 || conditionTest2);

Ce code nous retourne la valeur « Une chaîne de caractères » parce que l’opérateur OU va se charger de retourner la valeur de la première variable dont le contenu est évalué à true.

La condition « switch »

  • On écrit le mot-clé switch suivi de la variable à analyser entre parenthèses et d’une paire d’accolades ;

  • Dans les accolades se trouvent tous les cas de figure pour notre variable, définis par le mot-clé case suivi de la valeur qu’il doit prendre en compte (cela peut être un nombre mais aussi du texte) et de deux points ;

  • Tout ce qui suit les deux points d’un case sera exécuté si la variable analysée par le switch contient la valeur du case;

  • À chaque fin d’un case on écrit l’instruction break pour « casser » le switch et ainsi éviter d’exécuter le reste du code qu’il contient ;

  • Et enfin on écrit le mot-clé default suivi de deux points. Le code qui suit cette instruction sera exécuté si aucun des cas précédents n’a été exécuté. Attention, cette partie est optionnelle, vous n’êtes pas obligés de l’intégrer à votre code.

var drawer = parseInt(prompt(‘Choisissez le tiroir à ouvrir (1 à 4) :’));

switch (drawer) {
case 1:
alert(‘Contient divers outils pour dessiner : du papier, des crayons, etc.’);
break;

case 2:
alert(‘Contient du matériel informatique : des câbles, des composants, etc.’);
break;

case 3:
alert(‘Ah ? Ce tiroir est fermé à clé ! Dommage !’);
break;

case 4:
alert(‘Contient des vêtements : des chemises, des pantalons, etc.’);
break;

default:
alert(« Info du jour : le meuble ne contient que 4 tiroirs et, jusqu’à preuve du contraire, les tiroirs négatifs n’existent pas. »);
}

Les ternaires

Ex:

reponse=prompt(‘voulez-vousallez en pause?’);
console.log(reponse==’oui’ ? « on y va! »: « Etes vous sur de ne pas vouloir y allez? »);

  • La variable reponse qui va être analysée par la ternaire ;

  • Un point d’interrogation suivi d’une valeur (un nombre, du texte, etc.) ;

  • Deux points suivis d’une deuxième valeur et enfin le point-virgule marquant la fin de la ligne d’instructions.

si la variable reponse vaut true alors la valeur retournée par la ternaire sera celle écrite juste après le point d’interrogation, si elle vaut false alors la valeur retournée sera celle après les deux points.

Un petit exercice

fournir un commentaire sur quatre tranches d’âge différentes qui sont les suivantes :

Tranche d’âge

Exemple de commentaire

1 à 17 ans

« Vous n’êtes pas encore majeur. »

18 à 49 ans

« Vous êtes majeur mais pas encore senior. »

50 à 59 ans

« Vous êtes senior mais pas encore retraité. »

60 à 120 ans

« Vous êtes retraité, profitez de votre temps libre ! »

Le déroulement du code sera le suivant :

  • L’utilisateur charge la page Web ;

  • Il est ensuite invité à taper son âge dans une fenêtre d’interaction ;

  • Une fois l’âge fourni l’utilisateur obtient un petit commentaire.

Correction:

var age = parseInt(prompt(‘Quel est votre âge ?’)); // Ne pas oublier : il faut « parser » (cela consiste à analyser) la valeur renvoyée par prompt() pour avoir un nombre !

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 (50 <= age && age < 60) {

alert(‘Vous êtes senior mais pas encore retraité.’);

} else if (60 <= age && age <= 120) {

alert(‘Vous êtes retraité, profitez de votre temps libre !’);

} else if (age > 120) { // Ne pas oublier les plus de 120 ans, ils n’existent probablement pas mais on le met dans le doute

alert(« Plus de 120 ans ?!! C’est possible ça ?! »);

} else { // Si prompt() 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 ! »);

}

Autre exercice:

Quelle heure sera-t-il dans une seconde?