Scribd
Importer
2K vues12 pages

Le Langage Java Script

Le document présente JavaScript comme un langage de programmation incontournable pour le développement web. Il décrit brièvement l'historique de JavaScript, ses caractéristiques principales comme étant un langage dynamique, interprété et fonctionnant du côté client. Le document compare également JavaScript à Java et explique pourquoi ils ont des noms similaires.

Transféré par

Lila BOUSNINA
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
2K vues12 pages

Le Langage Java Script

Le document présente JavaScript comme un langage de programmation incontournable pour le développement web. Il décrit brièvement l'historique de JavaScript, ses caractéristiques principales comme étant un langage dynamique, interprété et fonctionnant du côté client. Le document compare également JavaScript à Java et explique pourquoi ils ont des noms similaires.

Transféré par

Lila BOUSNINA
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 12

08/05/2023

Motivation :
Faculté de génie électrique et informatique L2  Java script est un langage incontournable du développement web.
Département d’informatique Année : 2022/2023
Module : Développement Web
 Le JavaScript est aujourd’hui l’un des langages de programmation les plus populaires et il
fait partie des langages web dits « standards » avec le HTML et le CSS.

Les bases du langage  Il a été crée Par Brendan Eich, en 1995, à Netscape Communication Corporation (éditeur de
Netscape Navigator) ;
JavaScript  Son premier nom était LiveScript, il est inspiré du Langage Java

Responsable du module : Mme Bousnina Lila 2

JavaScript Java
Pourquoi le nom JavaScript? • Créé par la société Netscape • Créé originellement par Sun
(dec 1995) Microsystems (mai 1995);
JavaScript Comparaison entre Syntaxe dérivée du C/C++ Syntaxe dérivée du C/C++
Et  Concepts fondamentaux complètement différents et servent à
JavaScript et Java
Java effectuer des tâches totalement différentes.
Langage interprété : Langage compilé :
 Java créé originellement par Sun Microsystems; Partenaires + •Pas de compilation. •Compilation vers du ByteCode.
le Java était de plus en plus •Exécution directe dans un •Exécution nécessite machine
 JavaScript créé par la société Netscape.
populaire interpréteur virtuelle Java.
•Typage dynamique. •Type statique.
•Plus de souplesse mais moins de •Contrôles à la compilation,
Des raisons marketing contrôles. moins souple mais plus robuste.
•Modèle objet à base de •Modèle objet à base de Classes.
Prototypes •Un langage impératif.
•Un vrai langage fonctionnel. •lambda expressions introduites
•Les fonctions sont des objets de dans java 8 (2014)
3
1er ordre. 4

Caractéristiques

Langage client-side :
 Le JavaScript est un langage dynamique qui permet de dynamiser une page HTML, en ajoutant des
interactions avec l'utilisateur, des animations, de l'aide à la navigation.
 Le JavaScript est un langage (principalement) côté client ;
 Le JavaScript est un langage interprété :
Il peut également s’utiliser côté serveur à condition
 L’interpréteur est inclus dans votre navigateur Web! qu’on mette en place un environnement favorable (en
utilisant Node.js par exemple)
 Internet Explorer  JScript ;
Langage interprété : exécution directe sans passage
 Mozilla Firefox  SpiderMonkey ; par une forme intermédiaire;
Langage compilé : exécution avec passage par une
 Google Chrome  V8. forme intermédiaire;

 Donc, le code JavaScript s’exécute sur le navigateur.

5 6

1
08/05/2023

Pourquoi le JavaScript? Il sert à quoi? Où écrire le code JavaScript ?

 La balise <script> délimite code JavaScript.


 Peut être insérée soit dans l'entête (<head>) soit dans le corps (<body>) de la
 Afficher des informations variables telles que la date, l'heure, etc.;
page HTML; 1 dans l’exemple de la diapo 10
 Interagir avec les utilisateurs par le biais de boîtes de dialogue personnalisées;
 Soit dans un fichier séparé contenant exclusivement du JavaScript et portant
 Créer des menus dynamiques;
l’extension .js. 2 dans l’exemple de la diapo 10
 Etc.
 Et chargé à l’aide de la balise script et de son attribut src :
<script src="unFichier.js" type="text/javascript">
.
Javascript : un langage pour écrire des scripts intégrés à un document web et qui
.
permettent une interaction avec le document, lui ajoutant de la dynamicité. .
</script>
 Les scripts sont exécutés dans leur ordre d'apparition dans la page.
7 8

Où écrire le code JavaScript ? (suite)


Placer les scripts dans l'en tête pour qu'ils soient Exemple :
chargés et exécutés avant la construction et
l'affichage de la page A noter que :
Le fonctionnement de 2 est équivalent à une intégration
Par défaut, les scripts placés dans le body sont
exécutés au fur et à mesure que celui-ci est chargé directe du code JavaScript à cet endroit.
et que le DOM est construit. met en attente le
moteur d'analyse HTML/CSS
Attention :
Quand l'attribut src est utilisé il ne faut rien écrire entre
Souvent les scripts sont placés à la fin du corps de la
page (juste avant </body>) améliorer la vitesse de les balises <script src="…"> et </script>
chargement de la page.

Images et css en provenance de différents sites peuvent


être téléchargées simultanément (en parallèle) mais une
fois que le navigateur a rencontré une balise script ce n'est
plus possible (par défaut) les scripts bloquent les
téléchargements parallèles.
9 10

Inconvénients de mélange des codes : Commentaires, indentation et syntaxe de base en JavaScript

Mélanger les codes html, css et JavaScript est déconseillé est considéré comme une mauvaise pratique.
 En JavaScript, il existe deux types de commentaires :
Car le web est de plus en plus complexe;
1. Les commentaires mono-ligne : on utilisera un double slash // qui sera suivi du texte de notre
commentaire.
2. Les commentaires multi-lignes : entourer le texte du commentaire avec la syntaxe /* */.
Nous devons être de plus en plus rigoureux pour exploiter cette complexité.

 L’indentation en JavaScript sert à rendre son code plus lisible et donc plus simple à comprendre.

1. Plus propre;
Séparer html, css et javascript 2. Plus compréhensible;  Le point virgule à la fin de chaque instruction en JavaScript : obligatoire ou non ?
3. Plus facilement maintenable.

11 12

2
08/05/2023

Variables : Règles de nommage des variables :

Utilisées pour stocker temporairement des données dans la mémoire de l'ordinateur.


 Une variable doit être désignée avec un nom unique (dans sa portée) : identifiant
 Règles similaires à celles de la plupart des langages :
En JavaScript deux types de valeurs  Noms ne peuvent contenir d'espace, d'opérateurs arithmétiques (+, -, /, *) ou de
 Valeurs primitives : caractère de ponctuation (.,;)
 Notation littérales
• de nombres (14, 3.14159, 3.25e-6)  Noms peuvent contenir des lettres, chiffres, _ ou $.
• de chaînes de caractères ('Ceci est une
chaîne', "cela c'est aussi une chaîne")  Noms ne peuvent commencer par un chiffre.
 Valeurs natives (built-in) (true, false,
 Noms sensibles à la casse (case sensitive) : mavariable ≠ mavariable.
undefined, null, NaN, Infinity)
 Objets :  Noms doivent être différents des mots réservés (par ex. Var, if, while,
 c’est-à-dire des conteneurs (par exemple un
tableau), la valeur de la variable dans ce cas
function…).
est l'adresse (référence) du conteneur. 13 14

Règles de nommage des variables :


Déclaration des variables :
 Comment regrouper plusieurs mots dans un identifiant ?
Exp : variable représentant l’âge du capitaine.  Historiquement déclaration par var nomDeVariable;
 Conventions d’écriture couramment utilisées :  Mais depuis ES6 la bonne pratique et d'utiliser let au lieu de var.

On peut même utiliser une variable


sans la déclarer !

15 16

Déclaration des variables : Constantes :

 JavaScript langage avec typage dynamique :  Parfois il peut être intéressant d'empêcher la modification d'une variable.

 Type d'une variable défini qu'au moment de  Possibilité de déclarer des constantes en javascript.
l'exécution ;
 Utiliser const au lieu de let.
 Possibilité de changer le type d'une variable
à l'exécution.  Utiliser des majuscules pour les noms de constantes.
 Pas obligation d'initialiser une variable à sa
Exp : const TAUX_TVA = 0.2;
déclaration.
 Obligation d'initialiser la variable à sa déclaration.
 Une variable non initialisée a la valeur
undefined. Une tentative de modification de la constante va provoquer une erreur d'exécution
 Possibilité d'initialiser une variable à sa
avec un message explicite sur la console
déclaration à l'aide d’expressions littérales.
17 18

3
08/05/2023

Types de base :
Type d'une variable :
Types primitifs : définissent des valeurs primitives (simples) (nombres, chaînes de
caractères, booléens) qui sont stockées dans une variable.
 JavaScript est un langage
dynamique : le type d'une variable  number: permet de représenter les nombres
peut changer au cours de (nombre flottants double précision sur 64 bits)
l'exécution d'un programme.
 NaN (Not a Number)
 L’opérateur typeof permet de
 Valeur rencontrée quand le résultat d’une
déterminer le type d'une variable.
opération arithmétique ne peut pas être
représentée par un nombre.
 C’est la seule valeur en JavaScript qui n’est pas
19 égale à elle-même. 20

Types primitifs (suite) : Types primitifs (suite)


Pas de type char!
 string  boolean : Deux valeurs littérales : true (vrai) et false (faux).
 Représente des données textuelles (chaînes de caractères) .  null : null est une valeur d’affectation. Il peut être affecté à une variable en tant que
 Chaque lettre de la chaîne occupe une position définie par une position (index) : 0 pour la première lettre, 1
représentation sans valeur.
pour la deuxième, …
Exp :
 La longueur de chaîne (length) est le nombre d’unités de codes UTF-16 (mots de 2 octets).
var test = null;
 Ce n’est pas nécessairement le nombre de caractères Unicode (certains caractères exotiques peuvent être codés alert(test ); //affiche null
sur plus de 2 octets). alert(typeof test); //affiche object

 Expressions littérales pour les chaînes délimitées par des guillemets (quotes) : "ou 'ou `(backticks)  undefined : undefined signifie qu’une variable a été déclarée mais qu’aucune valeur n’a
let nom = "DUPONT"; encore été attribuée.
let prenom= 'Marie Louise'; ${ … } permet d’inclure des variables et
let s1 = "Voilà l'automne";  Exp :
let s2 = 'Il a dit : "Ah bon !"'; expressions dans une chaîne
var test;
let nbHeures = 3; La valeur de l’expression est évaluée et
let s3 = `durée en secondes : ${nbHeures* 60} s`; alert(test); //affiche undefined
 "durée en secondes : 180 s" son résultat devient partie de la chaîne alert(typeof test); //affiche undefined
21 22

Remarque : Les opérations sur les chaînes de caractères

• La concaténation : • Extraction d’une partie de la chaîne :


Bien que les types number, string et boolean définissent des valeurs primitives directement  var chaine = « bonjour » + « toi »; • var dateDuJour = « 04/04/03 »
 Bonjour toi • var mois = datteDuJour.substring(3, 5);
stockées dans une variable, ils possèdent néanmoins des propriétés et méthodes (on parle • 3: est l’indice du premier caractère de la
• Déterminer la longueur d’une chaîne : sou-chaîne à extraire
• var ch1 = « bonjour »; • 5 : indice du dernier caractère à prendre en
parfois de pseudo objets) considération ; ce caractère ne fera pas
• var longueur = ch1.length;
partie de la sous-chaîne à extraire.
• résultat= 7
Car JavaScript possède les objets natifs String, Number et Boolean qui contiennent des • Découper une chaîne en un tableau :
• const str = "Le langage javascript ";
• Identifier le nième caractère d’une chaîne : • const words = str.split(' ');
propriétés et des méthodes. • var ch1 =« Rebonjour ! »; • console.log(words[2]);//  " langage"
• var carac = ch1.charAt(2); • const chars = str.split('');
let nombre = 114;
• résultat = b • console.log(chars[8]);// " a"
let chaine = nombre.toString();
Séparateur
let nbreChiffres= chaine.length;
23 24

4
08/05/2023

Convertir une chaîne de caractères en nombre : en utilisant des fonctions


Opérateurs d'égalité :

Exemple 1 : JavaScript possède deux jeux d'opérateurs d'égalité :


var txt = '12';
nbr =  == et != :
 === et !==
parseInt(text); Égalité et différence avec conversion
égalité de valeur ET de type
implicite des valeurs si les opérandes
Conversion automatique : différence de valeur OU type
sont de type différent.
Exemple 2 : let x = 3;
let x = 3;
var text, number1 = 4, number2 = 2; x === 3  true
x == 3  true
x === '3'  false
text = number1 + ' ' + number2; x == '3'  true

typeof(text) ;
25 26

Opérateurs et instructions de contrôle :


Type objet : Exp :
 JavaScript propose les opérateurs et instructions standards de C++/Java :
Object : let etudiant = {
matricule : ‘Inf0214', 1. Opérateurs :
 Variable ne contient plus une valeur mais une référence nom =‘Souki’,
prenom: ’Linda '; a) Arithmétiques :+, -, *, /, %, ++, --, **
(adresse) vers un objet complexe (valeur non }
b) Comparaisons :==, !=, <, >, <=, >=, ===, !==
primitive).
etudiant * c) Logiques : &&, ||, !
 Un objet est défini par un ensemble de propriétés qui
2. Instructions :
peuvent être soit des valeurs primitives, soit elles même
matricule : ‘Inf0214'
a) Conditionnelles : if, if-else, switch
des objets.
nom =‘Souki’ b) Itératives : for, while, do… while
 En plus de propriétés, des fonctions spécifiques
prenom: ’Linda '
(méthodes) peuvent être définies pour un objet.

27 28

Interagir avec l’utilisateur


Autres opérateurs de comparaison :
Les boites de dialogue :
1. prompt() : ouvre une boîte de dialogue avec une zone de saisie et 2 boutons : OK et
Opérateur Définition
Annuler, rend l’information lue.
< Permet de tester si une valeur est strictement inférieure à une autre Valeur par défaut

> Permet de tester si une valeur est strictement supérieure à une autre Exemple:
<script>
<= Permet de tester si une valeur est inférieure ou égale à une autre
var prenom = prompt("insérer votre Prénom " , "Prénom" );
>= Permet de tester si une valeur est supérieure ou égale à une autre </script>

L’information lue
(saisie) sera stockée Boite de dialogue
dans cette variable « prompt »

29 30

5
08/05/2023

Les boites de dialogue (suite) :


Les boites de dialogue (suite) :
2. confirm () : Cette méthode ouvre une boîte de dialogue avec 2 boutons : OK et Annuler.
Elle permet d'envoyer une information, de recevoir un booléen. 3. alert () : permet d’écrire un message dans une fenêtre.

Exemple: Exemple:
<script> <script>

var ok=confirm('Confirmez Votre Prénom? '); if (ok==true)


alert('Bonjour'+ prenom);
</script>
</script> Boite de dialogue « alert »
 Si on clique sur OK cette
variable ok aura la valeur true
 Et si on clique sur Annuler la
variable ok aura la valeur false
Boite de dialogue « confirm »
31 32

Les structures de contrôle


La méthode write pour écrire sur une page web : 1. Les structures conditionnelles

document.write : Permet d’écrire directement dans la fenêtre de la page web. a. if et else

Exemple : Exemple:

var etage = parseInt (prompt ("Entrez l'étage où l'ascenseur doit se rendre (de -2 à 30) :"));
<html>
<head> if (etage == 0) {
<title>Ecrire dans la fenêtre </title> alert('Vous vous trouvez déjà au rez-de-chaussée.');
</head> } else if (-2 <= etage && etage <= 30) {
<body>
alert('Direction l'étage n°" + etage + ' !');
<script language="JavaScript">
document.write('Vous avez le bonjour de JavaScript <br>'); } else {
</script> alert("L'étage spécifié n'existe pas.");
</body> }
</html>
33 34

b. switch 2. Les structures itératives : Les boucles(1)

Cette instruction permet de réaliser des branchements conditionnels. pour :


for (var i = inf ; i < max ; i=i+1) { // i=i+1 s’écrit aussi i++
switch (choix) séquence d’instructions
{ }
case 1: Exemple :
alert("Vous avez fait le premier choix") ; var sommeEntiers = function ( borneMax ) {
break ; var somme = 0;
for ( var i = 0 ; i < borneMax ; i=i+1)
case 2:
alert("Vous avez fait le deuxième choix") ; {
break ; somme = somme + i;
}
case 3: return somme ;
alert("Vous avez fait le troisième choix") ; }
break ; sommeEntiers (100) ; // somme vaut 4950

default :
alert("Vous avez fait un choix au moins égal à 4") ;
}
35 36

6
08/05/2023

2. Les structures itératives : Les boucles(2) Les fonctions :


tant que :  Les fonctions sont des blocs de code nommés et réutilisables et dont le but est d’effectuer une tâche précise.
while ( condition ) {
séquence d’instructions  En JS, les fonctions peuvent êtres sans nom (anonumes).
}
Exemple :  Il existe deux grands types de fonctions en JavaScript :
 Les fonction natives ou prédéfinies (qui sont en fait des méthodes) qu’on n’aura qu’à appeler ;
var index = 0;
 Les fonctions personnalisées qu’on va pouvoir créer ;
while (index < 10) {
alert('Passage dans la boucle numéro ' + (index + 1));  Pour exécuter le code d’une fonction, il faut l’appeler.
index++;  En JS, une fonction peut s’exécuter sans qu’elle soit appelée, les fonctions auto invoquées.
}
 En JS , on peut créer des fonctions avec ou sans (les fonctions fléchées) le mot clef function ;
Autre forme :
 Une fonction en JS peut être sans paramètres.
do { séquence d’instructions } while (condition )
 L’instruction return permet à la fonction de retourner une valeur qu’on va ensuite pouvoir
37 38
manipuler, en JS cette instruction est facultative.

Exemples de déclarations de fonctions : Fonction fléchées (Arrow functions) :


Fonction avec un paramètre :
Fonction sans paramètres :  Introduites avec ES6 (EcmaScript2015) ;
function hello(nom) {
function helloWorld() { console.log("Hello "+ nom);  Permettent une écriture plus directe (compacte) de fonctions simples.
console.log("Hello World"); }
} Fonction fléchée sans paramètres : Fonction fléchée avec un paramètre :

let helloWorld = () => let hello = (nom) =>


Fonction avec deux paramètres : Fonction avec deux paramètres et qui renvoie une valeur : console.log("Hello World"); console.log("Hello "+ nom);

function helloN(n, nom) { function nbreOccurrencesLettre(lettre, mot) {


let nbreOccurences= 0; Fonction fléchée avec deux paramètres et qui
let i = 0; Fonction fléchée avec deux paramètres :
for (let i= 0; i< mot.length; i++) { renvoie une valeur :
while(i < n) {
console.log("Hello "+ nom); if(mot[i] === lettre) { let helloN = (n, nom) =>
let nbreOccurrencesLettre = (lettre, mot) => {
i++; nbreOccurences++; { let nbreOccurences= 0;
} } let i = 0; for (let i= 0; i< mot.length; i++) {
} } while(i < n) { if(mot[i] === lettre) {
return nbreOccurences; nbreOccurences++;
console.log("Hello "+ nom); }
} i++; }
var x = nbreOccurrencesLettre(″a″, ‘blabla’); } return nbreOccurences;
Apple de la fonction console.log(« Le nbre d’occurrences de la lettre } }
var x = nbreOccurrencesLettre(″a″, ‘blabla’);
a est : "+ x); 39 40

Les fonctions anonymes : Les fonctions auto invoquées : Portée (scope) d’une variable :

 Les fonctions anonymes sont utilisées lorsqu’on  Une fonction auto invoquée va s’invoquer (ou  Portée (scope) d’une déclaration : la région du programme où l’entité déclarée (variable,
n’a pas besoin d’appeler notre fonction. s’appeler ou encore s’exécuter) elle-même dès sa objet, fonction) peut être accédée via son identifiant.
création.
 En JavaScript 3 portées :
<script>
 Globale: un identifiant défini dans la portée globale est accessible dans tout le script où il
var carre = function(x){ <script>
(function(x){ est déclaré.
alert('le carré de '+x+' est : '+x*x) var x=prompt('Taper un nombre : ', '5');
}; alert('le carré de '+x+' est : '+x*x)  Locale: un identifiant défini localement est accessible dans tout le corps de la fonction où il
var y=prompt('Taper un nombre : ', '5'); })(); est déclaré.
carre(y); </script>
 Bloc: un identifiant de variable déclarée avec let ou const défini dans un bloc ({ }) est
</script>
accessible uniquement dans le bloc (et dans tous les blocs imbriqués) où il est déclaré.

41 42

7
08/05/2023

Portée (scope) d’une variable (suite) : Portée (scope) d’une variable (suite) :
 Une variable déclarée à l’intérieur d’une fonction est une variable locale à cette fonction :
Une variable déclarée à l'extérieur d’une fonction et en dehors de tout bloc est une variable globale
 Créée au début de l’exécution de la fonction, détruite à la fin de son exécution ;
 Toutes les fonctions du script peuvent y accéder (et y modifier).
 Ne peut être accédée qu’à l’intérieur de la fonction ;
function hello1() {
 Des variables avec le même nom peuvent être utilisées dans des fonctions différentes. console.log("Hello1 " + x);
}
// le code ici ne peut accéder à x // x est une variable globale elle est accessible partout
function hello1() { Variable globale let x = "World";
let x= "World";
hello1(); Hello1 World
console.log("Hello1 " + x);
} si présente cette instruction provoquerait une erreur
// le code ici ne peut accéder à x d'exécution et le reste du script ne serait pas exécuté hello2(); Hello2 3
C'est la variable x globale
console.log("Hello " + x); ReferenceError: x is not defined
console.log("x : " + x); x: 3 qui est utilisée.
Hello1 World hello1();
function hello2() { Elle a été modifiée par
Hello1 3 hello2(); Modification hello2.
x = 3;
function hello2() { Variables locales de x
console.log("Hello2 " + x);
let x= 3;
}
console.log("Hello2 " + x);
} 43 44
// le code ici ne peut accéder à x

Portée (scope) d’une variable (suite) : Portée (scope) d’une variable (suite) :

 Quand une variable locale a le même nom qu'une variable globale, la déclaration locale masque la  Si une valeur est affectée à une variable non déclarée, celle-ci devient automatiquement

déclaration globale. une variable globale. x n'a pas été déclarée, une
variable globale de nom
x est automatiquement créé
function hello1() { Variable function hello1() {
console.log("Hello1 " + x); globale x = 2;
} automatique console.log("Hello1 " + x);
// x est une variable globale elle est accessible partout }
Variable globale let x = "World"; // x est une variable globale elle est accessible partout
la variable locale a hello1(); Hello1 2
hello1(); Hello1 World masqué la variable
globale console.log("x : " + x); x: 2
hello2(); Hello2 3 hello2(); Hello2 3
console.log("x : " + x); x: World C'est la variable x console.log("x : " + x); x: World
function hello2() { globale qui est utilisée. function hello2() {
Variable locale let x = 3; x = x + 1;
console.log("Hello2 " + x); console.log("Hello2 " + x);
} x = "World";
}
45 46

Portée (scope) d’une variable (suite) : Portée (scope) d’une variable (suite) :

 Si une variable non déclarée est lue avant d’avoir été initialisée, une erreur d’exécution est  Variable not defined ≠ variable undefined
provoquée C'est la variable x
globale qui est utilisée.
Variable function hello1() {
globale x = 2;
console.log("x : " + x); ReferenceError: x is not defined
automatique console.log("Hello1 " + x);
}
console.log("x : " + x); ReferenceError: x is not defined
let x;
console.log("x : " + x); undifined
let y = 1;
Tentative de lecture alors que console.log("y : " + y); 1
la variable n’a pas été
initialisée.

x déclarée, mais pas


initialisée

47 48

8
08/05/2023

Portée (scope) d’une variable (suite) : Portée (scope) d’une variable (suite) :

 En JavaScript plusieurs manières de définir des variables : var x; x déclarée, mais pas initialisée let x;
var y = 1; let y = 1;
 Variables globales automatiques ; console.log("x : " + x); undefined console.log("x : " + x);
console.log("y : " + y); 1 console.log("y : " + y);
 Déclaration explicite avec le mot clé var ;
 Déclaration explicite avec les mots clé let et const (ES6+). ReferenceError: can't access
console.log("x : " + x); undefined console.log("x : " + x); lexical declaration `x'
console.log("y : " + y); undefined console.log("y : " + y); before initialization
var x; let x;
var y = 1; let y = 1;
var unTexte= "Hello World" ;
? let unTexte= "Hello World" ;
 Les variables déclarées avec var peuvent être utilisées
avant leur déclaration ce qui n’est pas le cas avec let.
Quelle différence ? var x, y;  JavaScript fait remonter les déclarations (hoist= hisser) de
console.log("x : " + x); undefined
variables faites avec var au début de la portée (scope)
console.log("y : " + y); undefined
var y = 1; courante (le script ou la fonction courante).
 Seules les déclarations sont remontées, pas les
49 initialisations. 50

Portée (scope) d’une variable (suite) : Les tableaux :


var
let ou const  array en anglais est un ensemble ordonné de valeurs appelées items accessibles par un
 Déclaration «historique».
 Nouvelle déclaration ES6+ indice (index en anglais) numérique commençant à partir de 0.
 Hoisting.
 Pas de hoisting,  En Javascript, un tableau est un objet. Il peut contenir des entrées du même type ou de
 Si déclaration à l’intérieur d’une fonction le nom est
 La portée d’une variable est limitée types différents. Il peut même contenir d'autres tableaux. On parle alors d'un tableau à 2
rangé (hissé) au niveau de la portée de la fonction.
 Si déclaration au niveau global le nom est hissé en
au bloc où elle est déclarée. dimensions, à 3 dimensions etc...
tête de la portée globale (attachée à l’objet window  Interdiction d’utiliser la variable
 Création : soit avec
dans le cas d’un navigateur). avant son instruction de déclaration.
1. Constructeur Array()
 Possibilité d’utiliser la variable avant son instruction  Interdiction de déclarer deux fois le
let tab = new Array("Javascript","Coté client",40);
de déclaration. même nom dans un même bloc .
2. Expression littérale
 Possibilité de déclarer plusieurs fois le même nom
let tabVide = [];
dans une même portée, cela ne définit qu’une seule
let couleur = [" trefle ", " carreau ", " coeur ", " pique "];
variable. 51 52

Les tableaux associatifs Parcourir un tableau (itérer sur les éléments)

 Permettent de repérer les éléments par une clé (qui est souvent un texte) au lieu  À l’aide d’une boucle for :
let tabNombres = [1 , 3, 12 , -4, 7];
d’un index numérique.
let sommeElements = 0;
Exemple:
for (let i = 0; i < tabNombres.length ; i ++) {

let tableau = new Array(); // déclaration d'un tableau vide sommeElements = sommeElements + tabNombres [i];
tableau['nom'] = 'Moilek'; }
tableau['prenom'] = ‘Amina';  Utilisation des boucles « for .. in » :

alert(tableau['nom']); // affiche Moilek let tabNombres = [1 , 3, 12 , -4, 7];

alert(tableau.lenght) // affiche 0 let sommeElements = 0;


for (let index in tabNombres ) {

Remarque : la propriété length ne peut pas être utilisée pour un tableau associatif. sommeElements = sommeElements + tabNombres [ index ];
}
53 54

9
08/05/2023

Ce qui est moins classique... Ce qui est moins classique...(suite)

 Les éléments d’un tableaux ne sont pas typés :  Itération avec for in

let tablo = [12 , " timoleon ", true , 0, " autre "];  Ne parcourt que les éléments « définis »
let monTablo = [1 ,2]; // éléments d’indice 0 et 1 " définis "
 Les tableaux sont dynamiques monTablo [3] = 4; // on " ajoute " l’élément d’indice 3
 Leur Taille n’est pas figée. let somme = 0; // l’élément d’indice 2 n’existe pas
 L’utilisation d’un indice suffit à définir l’élément associé.
for (let index in monTablo ) {
let monTablo = []; // monTablo est vide somme = somme + monTablo [ index ];
} // somme vaut 1+2+4 = 7
monTablo.length ; //  0
 La propriété length
monTablo [0] = 1; // on " ajoute " l’élément d’indice 0
 Ne correspond pas au nombre d’éléments si clairsemé
monTablo [1] = 33; // on " ajoute " l’élément d’indice 1
 Est plus grand que le dernier indice « défini » vaut généralement cet indice + 1
monTablo.length ; //  2 monTablo . length ; //  3
 pas de contrainte de continuité des indices, ils peuvent être « clairsemés » (sparse) (≠ « dense ») monTablo [10] = -4;
monTablo . length ; //  11
monTablo [12] = -5; // on " ajoute " l’élément d’indice 12
2 in monTablo ; // -> false ceux d’indice 2 ,... ,11 n’existent pas 55 56

Tableaux multi-dimensionnels

Il s’agit de tableaux de tableaux chacun des tableaux éléments peut avoir sa propre « taille »
 Tableaux et chaînes de caractères let tt = [[1 , 2] , [3 , 4] , [5 ,6]];
tt.length ; // 3
 Les chaînes de caractères se comportent comme des tableaux non mutables tt [2][0]; //  5
tt [1].length ; //  2
let s = " timoleon "; tt [0]; //  [1 ,2]
s.length ; //  8 let ttt = [[ true ], ["a", "b", "c"] , [10 , -4]];
let tabMult = new Array (10) ; // 10 " lignes "
s[2]; //  "m" , équivalent de s.charAt (2)
for (let i = 0; i < tabMult . length ; i ++) {
tabMult [i] = new Array (10) ; // 10 " colonnes "
for (let j = 0; j < tabMult [i].length ; j ++) {
Attention : les méthodes de l’objet Array ne sont pas accessibles. tabMult [i][j] = i*j; }
}
alert ("7 x 8 = "+ tabMult [7][8]) ; // -> "7 x8 = 56"
57 58

Les propriétés et les méthodes des tableux :

 Les tableaux ne possèdent qu’une seule propriété : length. Les méthodes des tableaux (suite) :

 Les méthodes :  Ajouter des items à la fin du tableau : shift().

 Concaténation : concat  Ajouter des items au début du tableau : unshift().


 Trier un tableau : sort()  Retirer respectivement le premier et le dernier élément du tableau : shift() et pop().
 Inverser : reverse()
 Tri du tableau par ordre alphabétique : sort(). Exemple :
 Extraire une partie d'un tableau : slice() let myArray = ['Sébastien', 'Laurence'];

 Remplacer une partie d'un tableau : splice() myArray.push('Ludovic'); // Ajoute « Ludovic » à la fin du tableau myArray.push('Pauline',
'Guillaume'); // Ajoute « Pauline » et « Guillaume » à la fin du tableau
 Tester l'existence d’une valeur dans tableau : includes()
 Aide à parcourir les éléments du tableau : forEach()

59 60

10
08/05/2023

Deux types d’objets L'objet window : le parent de tous les objets de la page

 L'objet window est un objet global qui représente la fenêtre du navigateur dans laquelle le
1. Objets natifs
document (la page Web) contenant les objets élémentaires de la page (champs de
a) Types prédéfinis : Array, String, Date, Math…
formulaire, images...) est chargé.
b) Objets liés à l'environnement d'exécution :
 C'est à partir de cet objet (window) que le Javascript est exécuté.
i. window, document… dans le navigateur
ii. process… dans NodeJs Exp :
2. Objets personnalisés :  Si on suppose que nous disposons d'un formulaire du nom de fo qui contient une zone de texte

 Types définis par l'application. nommée login, alors le nom complet de l'objet zone de texte vu par Javascript est:
window.document.fo.login
 On peut faire abstraction de l'objet window, afin de réduire la syntaxe, car le navigateur sait qu'il est là :
document.fo.login

61 62

Méthodes de l’objet window :


Propriétés (attributs) de l’objet window :
 Méthodes de boites de dialogue: alert(), confirm() et prompt() : leur syntaxe complète
1. Redirection: attribut location
est window.alert(), window.confirm() et window.prompt(), mais on préfère ne pas
 Si on veut rediriger le navigateur vers une nouvelle page sans cliquer sur aucun lien (suite à
déclarer window puisque le navigateur est conscient de sa présence.
un événement ou un traitement spécial par exemple). Il faut utiliser l'attribut location
 Pop-Up: open(), et close() : permettent l'ouverture et la fermeture de fenêtres.
Exp :
 Temporisateur: setTimeout() et clearTimeout() : la méthode setTimeout() est largement utilisée
window.location="contact.html";
en Javascript, surtout pour les animations et les effets.
 La méthode setTimeout() permet de retarder l’exécution d'un bout de code (ou une fonction).
2. Ecrire dans la barre d'état: attribut status
 Permet de personnaliser le message à afficher sur la barre d'état. Exp :

t=setTimeout("Fonction ou code déclaré directement",Durée en ms");


Exp :

window.defaultStatus = "Ma page d'accueil";


 Pour annuler le temporisateur avant l'écoulement de la durée d'attente fixée, on fait appel à la
63 méthode clearTimeout() 64

L’objet document Méthodes et sous-objets

 L'objet document est un sous-objet de window, l'un des plus utilisés. document.write : Permet d’écrire directement dans la fenêtre HTML
 Il représente la page Web et plus précisément la balise <html>. Exemple :
 Il permet de manipuler tous les objets qui sont inclus dans le documents HTML (images,
<html>
textes, formulaires...). <head>
 Nous aurons à notre dispositions des outils qui permettent de changer de fond en comble le <title>Ecrire dans la fenêtre </title>
</head>
contenu et le design d'une page d'une manière dynamique. <body>
<script language="JavaScript">
document.write('Vous avez le bonjour de JavaScript <br>');
</script>
</body>
Cet objet document et ses outils forment le DOM. </html>

65 66

11
08/05/2023

Écriture dans une fenêtre : open() + document.write

 Permet d’ouvrir une fenêtre et d’écrire dedans


Exemple : lire-ecrire-open.html

<script>
fille=open('', '', 'height=50, width=300, status=yes');
fille.document.write('<title>' + 'Titre fenetre fille' + '</title>');
fille.document.write('Texte dans la fenêtre fille');
</script>

67

12

Vous aimerez peut-être aussi