introduction à javascript

1. JavaScript

2. Introduction
• HTML est un langage statique, Les capacités
dynamiques de CSS sont très limitées ne
répondent pas à certains besoins : répondre
aux interactions, traitement, boucles,…donc
JavaScript a été proposé dans ce contexte
• JavaScript est un langage interprété par le
navigateur, il a été créé par Netscape
Communications.

3. Définition de JavaScript
JavaScript est un langage de programmation
principalement utilisé sur Internet, en
complément de HTML et CSS. Il utilise des
scripts pour créer du contenu dynamique.
JavaScript permet de :
• Afficher des messages
• Valider les formulaires
• Faire des calculs
• Faire des animations

4. Comment intégrer du JS dans une page
web ?
• JS script est intégré à travers la balise «script »
• Le script peut être à l’intérieur du corps de la
page, dans l’entête ou dans un fichier externe.
• Les fichiers JavaScript ont généralement
l’extension « js »

5. Comment intégrer du JS dans une
page web ?
• cas1 : script interne
Une première manière d’insérer un script
JavaScript dans un fichier HTML est de mettre le
code JavaScript dans une balise
<script></script>.

6. Comment intégrer du JS dans une
page web ?
• cas1 : script interne

7. Comment intégrer du JS dans une
page web ?
• cas2 : script externe
Il est aussi possible de placer le script dans un fichier .js séparé, qui est
inclus dans le HTML au niveau du header par une balise <script
src=''...''></script>.

8. Comment intégrer du JS dans une
page web ?
• intégrer du code JavaScript dans une page
HTML

9. LES COMMENTAIRES
• En JavaScript, on peut utiliser les deux
commentaires habituels, à savoir :
• // Sur une seule ligne.
• /* et */ pour créer un bloc commentaire
(pour commenter plusieurs lignes).

10. La casse
• Le JavaScript est sensible à la casse (Case
Sensitive).il fait donc la différence entre las
majuscules et les minuscules
• Par exemple :
var=nombre n’est pas égale à Nombre ou NOMBRE

11. Les variables
• Les variables ne sont pas typées en JavaScript,
l’interpréteur reconnait le type ou l’adapte en
fonction du contexte. JavaScript réserve alors la
mémoire pour les nombres ou les chaines de
caractères, au moment où il rencontre la
déclaration

12. Les variables
• Une variable doit avoir un nom. Il s'agit d'une suite
de caractères alphanumériques (a-z, A-Z, 0-9 et
quelques symboles comme – ou _ ). Généralement,
il est interdit de commencer un nom de variable par
un chiffre et une variable ne contient jamais
d'espace.

13. Déclaration des variables
Il existe trois types de déclarations de variable en
JavaScript.
• Var : On déclare une variable, éventuellement en
initialisant sa valeur.
• Let : On déclare une variable dont la portée est
celle du bloc courant, éventuellement en
initialisant sa valeur.
• Const : On déclare une constante nommée, dont
la portée est celle du bloc courant, accessible en
lecture seule.

14. La différence entre Let/Var
• Lorsqu'une variable est déclarée avec var en dehors
des fonctions, elle est appelée variable globale car elle
est disponible pour tout le code contenu dans le
document.
• Lorsqu'une variable est déclarée dans une fonction,
elle est appelée variable locale car elle n'est
disponible qu'au sein de cette fonction.
• La déclaration let, introduite avec ECMAScript 2015,
ajoute un nouveau comportement, elle permet de
limiter la portée de la variable au bloc.
• var quant à lui, permet de définir une variable globale
ou locale à une fonction (sans distinction des blocs
utilisés dans la fonction).

15. La différence entre Let/Var
• Exemple:

16. Les types de variables
Une variable peut être de type :
• numérique,
• une chaîne de caractères :
• Booléen (boolean), avec deux états
possibles : vrai ou faux (true ou false).

17. Les types de variables
Exercice
On a deux variables nombre1 =3 et nombre2 = 5.
Ecrivez un script en JS permettant de faire :
• l’addition des deux variables nombre1 et nombre2
et d’afficher le résultat dans la console
• la multiplication des deux variables nombre1 et
nombre2 et d’afficher le résultat sous forme d’une
alerte.

18. Les types de variables

19. Conversion de variables
Pour convertir une chaine en nombre, il suffit d'utiliser les fonctions
parseInt() et parseFloat().
Pour transformer un nombre en chaine de caractères, c'est la
fonction toString() ;
Exemple :
• let nombreTexte = "1.24"
• let nombre = parseFloat(nombreTexte) + 5
• let Texte = "La température est de " + nombre.toString() + "°C"

20. Récupération d'une saisie clavier dans
une variable Javascript
On a besoin parfois de demander à l'internaute de
saisir à l'aide du clavier des données afin de les
récupérer sous forme de variable javascript, pour cela
le langage javascript est doté d'une méthode
nommée prompt()

21. Récupération d'une saisie clavier dans
une variable Javascript
Exemple:
Si vous exécutez ce code vous allez voir apparaitre une fenêtre
comme celle-ci :

22. Exercice:
• Écrire un script en JavaScript qui permet de calculer l'âge
d'une personne à partir de l'année de naissance saisie par
l'utilisateur.
• Remarque: on peut récupérer l’année actuelle de cette façon
const anneeActuelle = (new Date()).getFullYear();

23. La solution:

24. Les tableaux
I. Tableaux simples
JavaScript sait gérer des tableaux de valeurs, ce qui est extrêmement
utilise en informatique.
1. Création d'un tableau
Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser
l'instruction new : tab=new Array(); Ou tab = [] ;
• Remarque : la première cellule commence à l'index zéro !

25. Les tableaux
I. Tableaux simples
1. Création d'un tableau
Exemple :
• tab=new Array( "Lundi", "Mardi", "Mercredi",
"Jeudi", "Vendredi","Samedi","Dimanche");
ou
tab=["Lundi","Mardi","Mercredi","Jeudi","Vendredi
","Samedi","Dimanche"];

26. Les tableaux
I. Tableaux simples
2- Écrire ou modifier des cellules
Pour placer une valeur dans les premières cellules s'écrira :
var listeEtudiants=new Array();
listeEtudiants[0] = "BATMAN";
listeEtudiants[1] = "SUPERMAN";
listeEtudiants[5] = "CATWOMAN";
listeEtudiants[10] = "AQUAMAN";
Remarque : La variable longueur, obtenue par la propriété length.
Si on accède à un élément dont l'indice n'existe pas, JavaScript retourne undefined.
Par exemple, listeEtudiants [11] n'existe pas, cet élément vaut undefined.

27. Les tableaux
I. Tableaux simples
3- Afficher un tableau dans la console
La console du navigateur permet d'afficher un tableau directement avec
console.table(tableau) :
console.table(listeEtudiants);
Le tableau est directement affiché dans la console dans un format lisible.

28. Les tableaux
I. Tableaux simples
Exercice :
Ecrire un script en js qui permet de :
1- Créer un tableau ,nommé le Tab;
2- Demander à l’utilisateur de saisir 3 valeurs (v1, v2, v3)
3-
✓ Insérer v1 dans la cellule 0 du tableau;
✓ Insérer v2 dans la cellule 2 du tableau;
✓ Insérer v3 dans la cellule 5 du tableau;
4- Afficher le tableau dans la console;
5- Afficher la taille du tableau sous forme d’une Alert,

29. • Solution:
Les tableaux

30. Les tableaux
I. Tableaux simples
4- Ajouter ou supprimer des éléments au début ou à la fin d'un tableau
• Ajouter des éléments
1. tableau.push(element) ajoute un élément après le plus grand index.
2. tableau.unshift(element) ajoute un élément avant le plus petit index.
• Supprimer des éléments
1. tableau.pop() supprime l'élément qui a le plus grand index.
2. tableau.shift() supprime l'élément qui a le plus petit index.
• Supprime 'nombre' cellules à partir de 'position'
tableau.splice(position, nombre)
• Insère 'valeur' dans une nouvelle cellule après 'position'
tableau.splice(position, 0, valeur)
• Insére 'valeur' à la place d’une autre valeur
tableau.splice(position, 1, valeur)

31. Les tableaux
I. Tableaux simples
Exercice:
Créer un fichier tableau.html .
•Déclarez un tableau vide en utilisant une paire de crochets. Appelez ce tableau
couleur.
•Maintenant déclarez à nouveau le tableau en mettant les trois chaînes de caractères
"rouge", "orange" et "jaune" à l'intérieur des crochets et séparez les par des virgules.
•Faites un push de la chaîne "vert". Visualisez le tableau couleur.
•Faites un unshift de la chaîne "marron". Visualisez le tableau couleur.
•Faites un pop sans paramètre d'appel. Visualisez le tableau couleur.
•Faites un shift sans paramètre d'appel. Visualisez le tableau couleur.
•Supprimer la couleur "orange" puis insérer la couleur "bleu" à sa position en utilisant
splice

32. Les tableaux
II. Tableaux à deux dimensions
JavaScript permet de traiter des tableaux ayant plus d'une dimension. Prenons un
tableau à deux dimensions, contenant la marque d'une voiture et le nombre de voitures
vendues dans le mois : la déclaration du tableau reste identique et ne prend pas en
compte les dimensions.
En revanche,
vente = []
vente[0] = ["Peugeot",80]
vente[1] = ["Fiat",110]
vente[2] = ["Renault",105]
vente[3] = ["Citroen",180]
La cellule numéro 0 contient maintenant un tableau de deux éléments : Peugeot et 80.

33. Les tableaux
II. Tableaux à deux dimensions
On peut aussi déclarer le même tableau sur une seule ligne :
vente =[["Peugeot",80], ["Fiat",110], ["Renault",105], ["Citroen",180]]
La structure du tableau est en réalité celle d'un tableau de 4 cellules, contenant chacune 2 cellules :
Cependant, le fonctionnement est similaire a un tableau a deux dimensions :
L'accès aux données se fera avec les indices habituels : le premier paramètre correspond a l'indice de
la cellule qui contient le mini-tableau, le deuxième argument est l'indice dans le "sous-tableau".
Exemple pour la troisième vente :
venteMarque = vente[2][0] // renvoie Renault
venteNombre = vente[2][1] // renvoie 105

34. • Créez un tableau à deux dimensions (une matrice)
de 3 par 4 qui contient des nombres entiers
aléatoires compris entre 1 et 12.
• Afficher ce tableau dans la console;
Les tableaux
II. Tableaux à deux dimensions
Exercice:

35. Les tableaux
II. Tableaux à deux dimensions

36. Les tableaux
II. Tableaux à deux dimensions
Le tableau associatif est une association d'une clé de chaîne de caractères au lieu
d'indice numérique et d'une valeur (donc 2 dimensions). Ici la clé doit être unique et
la paire clé-valeur séparée par une virgule.
Le séparateur entre la clé et la valeur est le symbole' : ‘.
Voici un exemple de tableau associatif en JavaScript:
CodePostal = {"Paris":75000, "Lyon":69000, "Grenoble":38000}

37. Les tableaux
II. Tableaux à deux dimensions
Exemple 1:

38. Les tableaux
II. Tableaux à deux dimensions
Exemple 2: Les tableaux associatifs sont également appelés objets dans JavaScript.