partie n°2: support de cours pour tp2

1. Cours TP2

2. JavaScript (partie2)
Partie I
Mohamed Mhamdi
Iset de Sousse

3. Déclarer une variable
• Pour déclarer une variable, il suffit d'écrire la ligne suivante :
– var myVariable; (1)
• Le JavaScript étant un langage sensible à la casse:
– var myVariable;
– var myvariable;
– var MYVARIABLE;
• Le mot-clé var est présent uniquement lors de la déclaration d’une variable.
– var myVariable;
– myVariable = 2;
• Il est possible de simplifier ce code en une seule ligne :
– var myVariable = 5.5;
• De même, vous pouvez déclarer et assigner des variables sur une seule et même
ligne :
– var myVariable1, myVariable2 = 4, myVariable3;
• Et enfin une déclaration et une assignation multiples:
– var myVariable1, myVariable2;
– myVariable1 = myVariable2 = 2;

4. JavaScript Hoisting
• Hoisting(Levage) est le
comportement par défaut de
JavaScript permettant de faire
passer des déclarations au
début du script.
• En JavaScript, une variable
peut être déclarée après qu'il
a été utilisé.
• Autrement dit; une variable
peut être utilisée avant
d'avoir été déclarée.
• l'exemple1 donne le même
résultat que dans l'exemple2:
Exemple1:
x = 5; // Assign 5 to x
document.write(x); // Display x
var x; // Declare x
Exemple2:
var x; // Declare x
x = 5; // Assign 5 to x
document.write(x); // Display x

5. Les Initialisations JavaScript
et le ,Hoisting(à voir ulterieurement avec les fonctions)
• Les initialisations
JavaScript ne peuvent
pas être remontées
(hoisted)
• JavaScript fait remonter
uniquement les
déclarations et non pas
les initialisations.
• Avant le hoisting:
var x = 5; // declare et Initialise x
document.write(x + " " + y); //
affiche x et y(undefined)
var y = 7; // declare et Initialise y
• Aprés le hoisting:
var x = 5; // Initialise x
var y; // declare y
document.write(x + " " + y); //
affiche x et y(undefined)
y = 7; // Initialise y

6. • Exercice n°1

7. Bonne pratique: Déclarer les variables
au début!
• le hoisting est un comportement inconnu ou
négligé à de nombreux développeurs
JavaScript.
• Si le développeur ne comprend pas le hoisting,
les programmes peuvent contenir des bugs
(erreurs).
• Pour éviter les bugs, on doit déclarer tous les
variables au début de chaque
module(fonction, script etc.).

8. Les types de variables(1)
• Le JavaScript est un langage typé dynamiquement. (1)
• on peut y mettre du texte en premier lieu puis l'effacer et y mettre un nombre
quel qu'il soit, et ce, sans contraintes.
– var i=5;
– alert(i);
– i="Salut";
– alert(i);
• les trois types principaux en JavaScript :
– Le type numérique (alias number) : il représente tout nombre, que ce soit un entier, un
nombre négatif, scientifique, etc.
• var n = 5.5; var n = 3.65e+5; var n= 0x391;
– Les chaînes de caractères (alias string) : ce type représente n'importe quel texte:
• var text1 = "Mon premier texte"; // Avec des guillemets
• var text2 = 'Mon deuxième texte'; // Avec des apostrophes
• var text = 'Ça c'est quelque chose !';// « échapper » vos apostrophes de cette façon :
• var text = "Ça c'est quelque chose !";// ou de cette façon ci
– Les booléens (alias boolean) :un type à deux états qui sont les suivants : vrai ou faux.
• var isTrue = true; var isFalse = false;

9. Les types de variables(2)
• Tester l'existence de variables avec typeof
– tester l'existence d'une variable ou d'en vérifier son type.
• 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 »
• alert(typeof nothing); // Affiche : « undefined »
– Si l'instruction typeof vous renvoie undefined, c'est soit
que votre variable est inexistante, soit qu'elle est déclarée
mais ne contient rien.
– Exercice?????

10. • Exercice n°2:

11. Les opérateurs arithmétiques
Opérateur Signe
addition + +=
soustraction - -=
multiplication * *=
division / /=
modulo % %=

12. • Exercice 3

13. Initiation à la concaténation et à la
conversion des types(1)
• La concaténation:Une concaténation consiste à ajouter une chaîne de caractères à la fin d'une
autre, comme dans ces exemples:
– var hi = 'Bonjour', name = 'toi', result;
– result = hi + name;
– alert(result); // Affiche : « Bonjourtoi »
• Ou
– var text = 'Bonjour ';
– text += 'toi';
– alert(text); // Affiche « Bonjour toi ».
• Interagir avec l'utilisateur
• La fonction prompt() s'utilise comme alert() mais a une petite particularité. Elle renvoie ce que
l'utilisateur a écrit sous forme d'une chaîne de caractères:
– var start = 'Bonjour ', name, end = ' !', result;
– name = prompt('Quel est votre prénom ?');
– result = start + name + end;
– alert(result);
– var text = 'Voici un nombre : ', number = 42, result;
– result = text + number;
– alert(result); // Affiche : « Voici un nombre : 42 » (1)

14. • Exercice 4

15. Initiation à la concaténation et à la
conversion des types(2)
• Convertir une chaîne de caractères en nombre
– var first, second, result;
– first = prompt('Entrez le premier chiffre :');
– second = prompt('Entrez le second chiffre :');
– result = first + second;
– alert(result); (1)
• vous allez avoir besoin de la fonction parseInt()
– var first, second, result;
– first = prompt('Entrez le premier chiffre :');
– second = prompt('Entrez le second chiffre :');
– result = parseInt(first) + parseInt(second);
– alert(result);
• Convertir un nombre en une chaîne de caractères
– ajoutez une chaîne de caractères vide entre les deux nombres,
– var text, number1 = 4, number2 = 2;
– text = number1 + '' + number2;
– alert(text); // Affiche : « 42 »

16. Les Méthodes Number
Les Méthodes globales
• Number () Converti la
totalité de la chaîne
argument et renvoie un
nombre en cas où la chaîne
ne contient que des
caractères numériques(à
l’exception des notifications
comme : 0x(hexa), e-3
(exponentiel) etc.)
• Elle peut retourner un
entier ou un nombre réel(1)
Les Méthodes numériques
• x = true;
Number(x); // returns 1
• x = false;
Number(x); // returns 0
• x = new Date();
Number(x); // returns 1404568027739
• x = "10"
Number(x); // returns 10
• Number("10.1e-1"); // returns 1.01
• Number("0x10"); // returns 16
• x = "10 20"
Number(x); // returns NaN
• Number("123hui")
returns NaN

17. La méthode parseInt ()
• parseInt () analyse une
chaîne et renvoie un
nombre entier. Les
espaces sont
autorisés. Seul le
premier numéro est
renvoyé.
• Si le nombre ne peut
pas être converti, NaN
(Not a Number) est
retourné.
• parseInt("10"); // returns 10
• parseInt("10.33"); // returns 10
• parseInt("10 20 30"); // returns 10
• parseInt("10 years"); // returns 10
• parseInt("years 10"); // returns
NaN (1)

18. La Méthode parseFloat ()
• parseFloat () analyse une
chaîne et renvoie un
nombre.
• Les espaces sont
autorisés.
• Seul le premier numéro
est renvoyé:
• Si le nombre ne peut pas
être converti, NaN (Not a
Number) est retourné.
• parseFloat("10"); // returns
10
• parseFloat("10.33"); // returns
10.33
• parseFloat("10 20 30"); //
returns 10
• parseFloat("10 years"); //
returns 10
• parseFloat("years 10"); //
returns NaN

19. Les Méthodes numériques(1)
La méthode toString ()
Le toExponential () Méthode
• toString () renvoie un nombre sous la forme d’une chaîne de
caractères.
• Exemple: var x = 123;
y=x.toString(); // retourne “123” à partir de la valeur de la variable x
(123).toString(); // retourne “123” à partir de la constante 123
(100+23).toString(); //retourne “123” à partir de l’expression 100+23
• toExponential (): retourne une chaîne, avec un nombre arrondi et
écrit en utilisant la notation exponentielle.
• Exemple:var x = 9.656;
x.toExponential(2); // retourne 9.66e+0
x.toExponential(4); // retourne 9.6560e+0
x.toExponential(6); // retourne 9.656000e+0

20. Les Méthodes numériques(2)
La méthode toFixed ()
La Méthode toPrecision ()
• toFixed () retourne une chaîne qui exprime une valeur arrondie et
écrite avec le nombre de chiffres après la virgule spécifiés :
• Exemple: var x = 9.656;
x.toFixed(0); // retourne 10
x.toFixed(2); // retourne 9.66 et non 9.65
x.toFixed(4); // retourne 9.6560
x.toFixed(6); // retourne 9.656000
• toPrecision () retourne une chaîne, avec un nombre écrit avec une longueur
spécifiée:
• var x = 8.656; (1)
x.toPrecision(); // retourne 8.656
x.toPrecision(1); // retourne 9 : la longueur de la valeu est 1 seul chiffre
x.toPrecision(2); // retourne 8.7:la longueur de la valeu est 2 chiffres
x.toPrecision(4); // retourne 8.656: la longueur de la valeu est 3 chiffres
x.toPrecision(6); // retourne 8.65600: la longueur de la valeur est 6 chiffres

21. • Exercice 6
• Exercice 7

22. Console API
console.clear,console.error,console.warn
• console.clear ()
– Efface la console.
– L’option « Preserve Logs » doit être désactivé.
console.error("Erreur: %? (%?)", “l’opacité a dépassé la valeur",opacity);
%?: %s(string) %i(entier) %f(float) etc.
console.warn: idem

23. Console API
• console.log (object [, objet, ...])
• Affiche un message dans la
console.
• On peut passer un ou plusieurs
objets à cette méthode, dont
chacune est évaluée et
concaténée avec les autres dans
une chaîne délimitée par
des espaces.
• Le premier paramètre de cette
méthode peut contenir
des spécificateurs de format , un
jeton de chaîne composée du
signe pour cent ( %) suivi d'une
lettre qui indique la mise
en forme à appliquer.
• Format Description
• % s Chaîne de caractère.
• % d ou % i entier.
• %F valeur en virgule
flottante.
• % o élément DOM
• % c format de styles CSS
(fournie).