Variables et opérateurs arithmétiques

Variables et opérateurs arithmétiques
Table des matières
Structure d'un script Javascript.................................................................................................................... 3
Messages d'erreur de l'interpréteur.............................................................................................................. 3
Les commentaires ....................................................................................................................................... 4
Fenêtre de dialogue..................................................................................................................................... 4
Où placer le code dans la page?................................................................................................................. 5
Types élémentaires...................................................................................................................................... 6
Opérateurs arithmétiques............................................................................................................................ 7
Fenêtre de saisie d'information.................................................................................................................... 8
Formulaire interactif..................................................................................................................................... 9
Définition de classes pour certaines occurrences d’un élément.................................................................11
Exercices................................................................................................................................................... 11
Références................................................................................................................................................ 17
1
JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web
interactives. Ce langage orienté objet a été créé en 1995 par Brendan Eich pour le compte de Netscape
Communications Corporation. Le langage, actuellement à la version 1.8.2 est une implémentation de la 3 e
version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La
version 1.8.5 du langage est prévue pour intégrer la 5 e version du standard ECMA2.
Le Javascript est à ce jour utilisé majoritairement sur Internet, conjointement avec les pages Web (HTML
ou XHTML). Le Javascript s'inclut directement dans la page Web (ou dans un fichier externe) et permet
de dynamiser une page HTML, en ajoutant des interactions avec l'utilisateur, des animations, de l'aide à
la navigation, comme par exemple :
•
Valider des formulaires;
•
Afficher/masquer du texte;
•
Faire défiler des images;
•
Créer un diaporama avec un aperçu « en grand » des images;
•
Créer des infobulles.
Le Javascript est un langage dit « coté client », c'est-à-dire que les scripts sont exécutés par le
navigateur de l'internaute. Cela diffère des langages de scripts dits « coté serveur » qui sont exécutés par
le serveur Web. C'est le cas des langages comme le PHP.
C'est important, car la finalité des scripts « coté client » et « coté serveur » n'est pas la même. Un script
« coté serveur » va s'occuper de générer la page Web qui sera envoyée au navigateur. Ce dernier va
alors afficher la page puis exécuter les scripts « coté client » tel que le Javascript. Voici un schéma
illustrant ce fonctionnement :
2
Comme beaucoup d’autres langages de programmation, Javascript possède un certain nombre de types
élémentaires permettant de représenter, entre autres, les nombres entiers et les nombres réels. Bien sûr,
Javascript manipule les nombres à l’aide d’opérateurs arithmétiques. Nous allons donc, dans ce chapitre,
étudier l’ensemble des types élémentaires ainsi que les principaux opérateurs arithmétiques du langage.
Structure d'un script Javascript
Exemple 1
Écrire un script qui affiche « Bonjour à tous! » dans une page web. Avant de taper le script suivant, il faut
démarrer l'environnement de développement et créer un fichier html.
1
2
3
4
5
6
<script>
document.write("Bonjour à tous");
</script>
<noscript>
Votre navigateur n'aime pas Javascript<br />
</noscript>
Messages d'erreur de l'interpréteur
Réussir, sans erreur, l’exécution d’un script peut sembler fastidieux. En effet, une simple erreur portant
sur l’utilisation d’une parenthèse générera un message d’erreur. Ce message est affiché dans la console
d'erreur.
Exemple 2
L’erreur suivante provient de l’omission de la parenthèse à la ligne 2.
3
Les commentaires
Les commentaires sont des annotations faites par le développeur pour expliquer le fonctionnement d'un
script, d'une instruction ou même d'un groupe d'instructions. Il existe deux types de commentaires : les
commentaires de fin de ligne (//), et les commentaires multilignes (/* */).
Exemple 3
1
2
3
4
instruction_1; // Ceci est ma première instruction
instruction_2;
// La troisième instruction ci-dessous :
instruction_3;
Exemple 4
1
2
3
4
5
6
7
8
/* 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; // Fin du script
Fenêtre de dialogue
4
Exemple 5:
1
2
3
<script>
window.alert('Hello world!');
</script>
Où placer le code dans la page?
Les codes Javascript sont insérés au moyen de l'élément <script>. Cet élément possède un attribut type
qui sert à indiquer le type de langage que l'on va utiliser. En HTML 4 et XHTML 1.x, l'attribut type est
obligatoire. En revanche, en HTML5, il ne l'est pas. C'est pourquoi les exemples de ce cours, en HTML5,
ne comporteront pas cet attribut.
Dans l'exemple suivant, le code Javascript est directement placé dans votre page Web:
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
window.alert('Hello world!');
</script>
</body>
</html>
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 attribut src
qui contient le chemin du fichier .js. Voici un exemple d'un fichier hello.js:
5
1
window.alert('Hello world!');
et le fichier html utilisant le fichier hello.js.
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script src="hello.js"></script>
</body>
</html>
Types élémentaires
Comme tout langage de programmation, Javascript possède ses propres types élémentaires servant à
représenter les données. Les types élémentaires ainsi que leurs caractéristiques sont résumés dans le
tableau ci-dessous :
Type
Contenu
number
nombres entiers et décimaux
string
chaînes de caractères
boolean
booléens (vrai ou faux)
Une variable sert à mémoriser une valeur qui pourra changer. Avant l'utilisation de cette variable, il faudra
la déclarer. La syntaxe de déclaration étant tout simplement :
var nom_de_variable;
Voici trois exemples de déclaration :
1
2
3
4
5
<script>
var compteur;
var prixTotal = 12.5;
var monTexte = "ceci est une chaine de caracteres"
</script>
6
La fonction typeof() permet de connaître le type d'une variable.
1
2
3
4
5
<script>
document.write("compteur = ", compteur);
document.write("<br>", "le type de cette variable est:",
typeof(compteur));
</script>
Opérateurs arithmétiques
Pour manipuler les variables, un langage de programmation a besoin d'un jeu d'opérateurs. Certains
opérateurs de Javascript ainsi que leur intérêt sont résumés dans le tableau ci-dessous.
Opérateur
Signification
Exemple
+
Additionne deux nombres
a+b
-
Soustrait deux nombres ou rend
négatif un nombre
a-b
*
Multiplie deux nombres
a*b
/
Divise deux nombres
a/b
L’opérateur « = » n’est pas considéré comme un opérateur arithmétique. Il est considéré par Javascript
comme un opérateur d’affectation. Les opérateurs d’affectation permettent de stocker des valeurs dans
des variables. Par exemple, l’instruction
reponse = 1 + 2;
permet de stocker le résultat de l’opération arithmétique « 1 + 2 » dans la variable reponse.
Lors de l’écriture d’expressions arithmétiques, il est important de tenir compte de l’ordre de priorité des
opérateurs. Le tableau suivant présente la priorité des principaux opérateurs arithmétiques :
Nom de l’opérateur
Symbole
Priorité
Parenthèses
()
premier
Rendre négatif un nombre
-
deuxième
Multiplication et division
*/
troisième
Addition et soustraction
-+
quatrième
7
Prenons l’exemple suivant :
3 + 4 * 5
Comme la multiplication a priorité sur l’addition, l’ordinateur multipliera 4 et 5 avant d’ajouter 3. Le résultat
de cette opération sera donc 23.
Exemple:
1
2
3
4
5
6
<script>
var prixArticle1 = 45.90;
var prixArticle2 = 19.95;
var prixTotal = prixArticle1 + prixArticle2;
document.write("Prix total = ");
document.write(prixTotal);
</script>
Fenêtre de saisie d'information
1
2
3
4
<script>
var monAge = window.prompt("Quel est mon age?");
document.write("Mon age est ", monAge);
</script>
Exemple : Faire la somme de 2 nombres fournis par l'utilisateur.
1
<html>
8
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<title>Boites de dialogue : NOMBRES...</title>
</head>
<body>
<script>
var nb1 = parseFloat( window.prompt("Entrez un premier nombre :"));
var nb2 = parseFloat( window.prompt("Entrez un second nombre :"));
var somme = nb1 + nb2;
window.alert("La somme des deux nombres est : " + somme);
</script>
</body>
</html>
L'instruction parseFLoat() aux lignes 7 et 8 permet de convertir une chaîne de caractères en nombre.
En effet l'instruction prompt() fournit au programmeur une chaîne de caractères. À la ligne 2,
l'instruction alert() s'attend à recevoir une chaîne de caractères. La conversion d'un nombre en chaîne
de caractères se fait en concaténant (+) une chaîne de caractères avec le nombre.
Formulaire interactif
Toute page HTML peut être enrichie de formulaires interactifs. Le HTML ne permettant pas d'analyser les
informations que le visiteur a saisies, il faut alors traiter ces informations à l'aide d'un script Javascript.
Exemple: Écrivez un script en Javascript, utilisant les formulaires, qui permet de lire deux nombres
entiers et d'afficher la somme des deux nombres.
9
1
<html>
2
<head>
3
<title>Somme de 2 nombres</title>
4
</head>
5
<body>
6
<h1>Somme de 2 nombres</h1>
7
<form name="form1">
8
<label>Nombre 1:</label>
9
<input name="nb1" value="0" type="text"><br>
10
<label>Nombre 2:</label>
11
<input name="nb2" value="0" type="text"><br>
12
<input name="bouton" value="Calculer" onclick="controle()"
13
type="button"><br>
14
<label>Somme:</label>
15
<input name="somme" value="0" type="text"><br>
16
</form>
17
<script>
18
function controle() {
19
var nb1 = parseFloat(document.form1.nb1.value);
20
var nb2 = parseFloat(document.form1.nb2.value);
21
var somme = nb1 + nb2;
22
document.form1.somme.value = somme;
23
}
24
</script>
25
26
</body>
27 </html>
L'insertion d'un formulaire dans une page web se fait à l'aide de la balise <form> </form>. Aux lignes
8, 10 et 14, la balise <label> </label> permet d'ajouter des étiquettes au formulaire. Les zones de
texte aux ligne 9, 11 et 15 sont créées par la balise <input type="text">, l'attribut name permet
d'identifier la zone de texte afin de l'utiliser ultérieurement. Le bouton est ajouté au formulaire à l'aide de
la balise <input type="button"> (ligne 12). Les attributs:
•
name="bouton" : ...
•
value="Calculer": ...
•
onclick="controle()": ...
Une fonction, en Javascript, est un bloc d'instructions regroupées sous un même nom, dont l'exécution
n'a lieu que lorsque la fonction est « appelée ». Une fonction est créée à l'aide du mot réservé function,
suivi du nom de la fonction et d'une paire de parenthèses (ligne 18); ensuite, entre des accolades (ligne
19 à 22), on place la liste des actions qu'elle va réaliser.
10
Le Document Object Model (DOM) est l'interface utilisée pour accéder aux éléments d'un document
HTML (formulaires, images...). L'objet document représente la page web, qui est comprise entre les
balise <html> </html>. Par exemple, document.form1.nb1.value représente la valeur contenue
dans la zone de texte name="nb1" du formulaire name="form1".
Définition de classes pour certaines occurrences d’un
élément
Dans la feuille de style créée précédemment, une balise donnée, par exemple un nouveau paragraphe,
est toujours traitée de la même façon. Si l’on veut traiter différemment certaines occurrences d’une balise,
on peut créer une (ou des) classe(s) pour ces occurrences. Ainsi, les déclarations suivantes
1
2
3
4
5
6
7
8
9
10
input.text { color: red; font­size: 125%; } input.bouton{ border­width: 2px; margin­left: 4%; font­weight: bold; font­size: 150%; }
permettent d'utiliser les balises <input class = "text"> et <input class = "bouton"> afin de
mettre en forme les éléments d'un formulaire.
Exercices
Exercice 4.1
Complétez le code source de la page afficherValeursEtTypes.html pour faire afficher :
•
la valeur et le type de la variable ‘monTexte’;
•
la valeur et le type de la variable ‘valide’;
•
la valeur et le type du résultat de la division suivante : 3 / 0;
•
la valeur et le type du résultat de l’opération suivante : 3 + ″Bonjour″
•
la valeur et le type du résultat de l’opération suivante : ″Bonjour″ / 3
Votre affichage final aura cette apparence :
11
Exercice 4.2
Dans un document HTML nommé Exercices04_Q4.html, écrivez un script en JavaScript, utilisant deux
boîtes de saisie pour demander à l’utilisateur d’entrer deux nombres (un à la fois) et qui affichera ensuite
dans la page Web les deux nombres ainsi que leur somme, leur différence, leur produit et leur quotient.
12
Exercice 4.3
Déclarez les variables suivantes (en JavaScript) en leur assignant une valeur initiale, si indiquée.
Indiquez aussi le type de la variable.
13
Nom
Valeur
nb1
15
nb2
4,22
salutation
″Bonjour Monsieur″
noCours
″420-101-AH″
Déclaration
Type
Exercice 4.4
Dans un programme, on doit distinguer des quantités se rapportant à un étudiant et d’autres se rapportant
à un professeur. En respectant les normes de nommage vues en classe :
•
déclarez deux variables, l’une devant contenir l’âge d’un étudiant et l’autre l’âge d’un
professeur, et assignez-leur des valeurs initiales;
•
déclarez deux autres variables, l’une devant contenir le prénom d’un étudiant et l’autre le
prénom d’un professeur, et assignez-leur des valeurs initiales;
•
indiquez le type de vos variables
Déclaration
Type
Exercice 4.5
Copiez le fichier formulaireAddition.html dans votre dossier exercices de cette semaine et renommez-le
formulaireCalculs.html. Transformez-le ensuite et associez-lui une feuille de style (calculs.css)pour
obtenir un résultat semblable à celui-ci :
14
•
Pour les boutons d’opérations arithmétiques, associez-leur des fonctions nommées
respectivement sommeNombres, differenceNombres, produitNombres et quotientNombres;
•
Pour la feuille de style calculs.css, vous pouvez utiliser les informations suivantes :
o
pour le corps de la page : famille de police arial; marge gauche de 10 %;
o
pour les élémentinput du formulaire : couleur rose pâle;
o
pour les éléments input text du formulaire : couleur rouge, taille 125 %;
o
pour les éléments input buttondu formulaire : gras, marge gauche de 4 %, taille 150 %;
Exercice 4.6
Écrivez un script en JavaScript, utilisant un formulaire pour demander à l’utilisateur une température en
degrés Celsius. Le script convertira et affichera ensuite dans dans le formulaire la température en degrés
Fahrenheit.
15
Exercice 4.7
Déclarez en JavaScript :
Description
Code Javascript
Une variable salaire1, initialisée à
25 000,00 $
Une variable salaire2, initialisée à
30 000,00 $
Une variable sommeSalaire; et, dans
une autre instruction, assignez-lui la
somme des deux variables
précédentes
Une variable debutMessage, initialisée
à "salut"
16
Exercice 4.8
Quel est le type des variables suivantes en JavaScript :
Déclaration et initialisation
Type
var nombre1 = 48.5;
var quelqueChose;
var surnom = "Frank";
var age = prompt("Entrez votre âge : ");
var age = parseInt(prompt("Entrez votre âge : "));
Références
1. Olivier Hondermarck, JavaScript, Le guide complet, Micro Application Éditions, Paris, mai 2011,
416 pages.
2. Johann Pardanaud et Sébastien de la Marck, Dynamisez vos sites web avec Javascript !, 376
pages, http://www.siteduzero.com/tutoriel-3-309961-dynamisez-vos-sites-web-avec-javascript.html
3. JavaScript Tutorial, http://www.w3schools.com
4. Référence Netscape (p.22)
17