JS 120522

Le langage JavaScript
3ème Sciences de l’informatique
Systèmes &Technologies Informatiques
Lycée Habib Thamer Bizerte

I- Introduction
• Le JavaScript est un langage de programmation pour le web
• C’est un langage front-end (coté client) : il est interprété et exécuté par le

navigateur.
• Utilisé pour créer de l’interaction entre l’utilisateur et la page web:

 Animation, mobilité d’un élément sur la page, résultat instantané d’un calcul, rafraichissement instantanée du
contenu ...
 Dans le cas d’un formulaire, de faire vérifier si les informations sont correctement saisies.
Le navigateur rempli la page web avec le HTML, la met en forme avec le CSS et rend la page
interactive avec les manipulations de l’utilisateur avec le code JS
II- Les différents emplacements du code JavaScript
TP1 : Activité 1
La balise <script>
 En HTML, le code JavaScript est inséré entre les balises <script>et </script>.
 Les scripts peuvent être placés dans <body>, ou dans <head>, ou dans les
deux.
Fichier externe
 Les fichiers JavaScript ont l'extension de fichier .js .
 Pour utiliser un script externe, placez le nom du fichier de script dans l' src
attribut (source) d'une <script>balise : <script src="myScript.js"></script>
III- Les entrées/sortie en Javascript
TP1 : Activité 2
JavaScript peut "afficher" les données de différentes manières:
 Écriture dans la sortie HTML en utilisant document.write().

 Ecrire dans une boîte d'alerte, en utilisant window.alert().
 Ecriture dans la console du navigateur, en utilisant console.log(). (f12)
JavaScript peut "saisir" les données de différentes manières:
 Prompt
 Formulaire
• Remarque :
 La console est un outil très important pour tester et afficher les erreurs du
script.
 Le code JS doit être exécuté après le chargement complet de la page c'est
pourquoi :
 S'il est inséré dans le Head, ajouter l'attribut defer : <script src="Monscript.js" defer> </script>
 Soit le placer à la fin du Body.
IV- Les Variables
TP1 : Activité 2
Pour déclarer une variable en JS, on utilise les mots clés : var, let et const,
 var : déconseillé depuis la version JS(ES6 2015). Il faut privilégier let et const.
 let : permet de déclarer une variable qui peut être réaffectée en cours d’exécution.
 const : permet de déclarer une constante ou une variable qui ne doit pas être réaffectée.
Exemple :
Remarque :
 les variables ou les constantes déclarées avec
let ou const ont une portée locale au bloc.
 Typage dynamique : on ne précise pas le type
lors de la déclaration. le type d'une variable
peut changer en cours d'exécution
V- Les Types
TP1 : Activité 3
Les types primitifs
 String : chaine
 Number: pas de distinction entre réel ou entier
 Boolean
 Undefined : variable déclarée mais pas initialisée. Exp : let y; // y vaut undefined
Les types structurels

 Array : tableau [] : const tab = ['a','b','c’]; le premier élément est d'indice 0.
 Object : {} tel que les enregistrement. const personne = { nom: "ben foulen" , age:18 ,
adresse:"bizerte" }
 Date
 function
Les Types
L'opérateur typeof
Retourne une chaine indiquant le type de la variable : x = 4; console.log (typeof x) ; //return number
Conversion automatique de types
JavaScript applique « automatiquement » certaines conversions de type sur les valeurs lorsque le contexte le
nécessite. Par exemple :
 Les opérateurs mathématiques convertissent les valeurs en nombre
 le "+" convertit en string et fait une concaténation
Exemple :
"6" / "2" // retourne le nombre 3
"5" + 4 + 3 // retourne la chaine "543"
Les Types
 Conversions numériques
4 fonctions :
▪ isNaN : détermine si une valeur donnée n’est pas un nombre (NAN : not a number)
▪ Number: effectue une conversion en nombre
▪ parseInt : effectue une conversion en valeur entière
▪ parseFloat : effectue une conversion en valeur réelle
alert(isNaN(10)); // false
alert(isNaN("10")); // false - peut être convertie
alert(isNaN("blue")); // true - ne peut être convertie
let num1 = Number("hello world"); // NaN
Exemples
let num2 = Number("00001"); // 1

let num3 = Number(true); // 1
let num3 = parseInt(""); // NaN
let num4 = parseInt(22.5); // 22
let num5 = parseInt("70"); // 70
let num6 = parseFloat("22.5"); // 22.5
Les Types
 Conversion en chaine
La fonction String(valeur).
Exemples
String (12 ) // retourne "12"

String (true ) // retourne "true"
String (false) // retourne "false"
Les Types
 Conversion en booléen
La fonction Boolean(valeur).
les valeurs "vide" comme une chaine vide, 0, null, undefined et NaN est convertit en false, les autres valeurs
en true.
Exemples
Boolean(1) ; // true
Boolean(0) ; // false
Boolean("hello") ; // true
Boolean("") ; // false
Boolean("0") ; // true
VI- Les opérateurs
Les opérateurs arithmétiques

Opérateur Description
+ Addition
- Soustraction
* Multiplication
** Puissance
/ Division
% Modulo
++ Incrémentation
-- Décrémentation
Les opérateurs
Les opérateurs de comparaison

== Égalité
=== Égalité de valeur et de type
!= Différence
!== Différence de valeur et de type
<
>
<=
>=
Les opérateurs
Les opérateurs logique

&& ET (and)
|| Ou (or)
! Non (not)
Les opérateurs d'affectation : =,+=,−=,*=,/=,%=
Exemples
X = y;
X += y // l'équivalent de x = x + y
Les structures
conditionnelles
La structure conditionnelle -- if --
L'instruction if est utilisée pour spécifier un bloc de code à exécuter si une condition est vraie.
Syntaxe :
if ( condition ) {
// bloc d'instructions à exécuter si la condition est vraie
}
La structure conditionnelle -- if – else --
L'instruction else est utilisée pour spécifier un bloc de code à exécuter si la condition est fausse.
Syntaxe :
If ( condition ) {
// bloc d'instructions à exécuter si la condition est vraie
} else {
// bloc d'instructions à exécuter si la condition est fausse
}
La structure conditionnelle -- if – else if --
L'instruction else if est utilisée pour spécifier une nouvelle condition si la première condition est fausse.
Syntaxe :
If ( condition 1) {
// bloc d'instructions à exécuter si la condition 1 est vraie
} else if (condition 2) {
// bloc d'instructions à exécuter si la condition1 est fausse
et la condition 2 est vraie
} else {
// bloc d'instructions à exécuter si la condition1 et la
condition 2 sont fausses
}
La structure conditionnelle -- switch--
L'instruction switch est utilisée pour sélectionner l'un des nombreux blocs d'instructions à exécuter en
fonction de différentes valeurs de l'expression.
Syntaxe : switch ( expression ) {

case valeur_1 : instruction_cas_1;
break;
break;
break;
default : // Si aucune valeur n'a été trouvée
instruction_default;
}
Remarque : Le branchement par défaut n’est pas obligatoire.

L'opérateur ternaire -- ? --
L’opérateur ternaire ? : permet de remplacer une instruction if...else simple.

Syntaxe :
variable = condition ? valeur_si_true : valeur_si_false ;
C'est l'équivalent de :
if (condition) { variable = valeur_si_true }
else { variable = valeur_si_false }
Les structures
itératives
.
La structure itérative – For--
Dans la boucle for il faut :

1. Initialiser la valeur du compteur.
2. Ecrire une condition pour fixer la valeur maximale à ne pas dépasser.
3. Faire évoluer la valeur du compteur par incrémentation
Syntaxe :
for ( initialisation_du_compteur ; condition ; incrémentation ) {
un_bloc_instructions;
}
 L'initialisation : est exécutée (une seule fois) avant l'exécution du bloc d'instructions
 La condition : pour fixer la valeur maximale à ne pas dépasser.
 L'incrémentation : est exécutée à chaque itération
.
La structure itérative – while--
On répète la boucle tant que la condition est vraie.

Syntaxe :
while (condition ) {
//un_bloc_instructions;
}
Remarque : le bloc d'instructions peut être exécuté 0 fois au moins .

.
La structure itérative – Do … while--
Est utilisée dans les cas où on a besoin d'exécuter la boucle une première fois avant d'évaluer la condition
Syntaxe :
Do {
//un_bloc_instructions;
} while (condition )
Remarque : le bloc d'instructions peut être exécuté 1 fois au moins.

Les Fonctions
.
Les Fonctions
Une fonction correspond à un bloc de code nommé et réutilisable et dont le but est d’effectuer une tâche
précise.
Déclaration
Pour déclarer une fonction en JavaScript, on utilise la syntaxe suivante:
function function_name (param1, param2, …) {
// bloc de code à exécuter

return résultat
}
Pour invoquer une fonction:
function_name(param1, param2, …)
.
Les Fonctions
Exemple Information en entrée

Définition de la fonction multiplication
Information en sortie
Appel de la fonction
Remarque : l'instruction return permet de retourner le résultat renvoyé par la fonction

.
Les Fonctions anonymes
Une fonction anonyme est une fonction sans nom.
Exemple :
Déclaration de la fonction
appel
Remarque : Les fonction anonymes sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une
autre fonction
var tab=new Array();
.
Les Tableaux
Un tableau est un objet Array
Déclaration :
le premier élément du tableau commence à l'indice 0

Tableau peut donc contenir des données de types différents.
La console du navigateur permet d'afficher un tableau directement avec console.table(tableau)
Le DOM
1- Introduction
• DOM : Document Object Model
• Interface de programmation intégré dans tous les navigateurs.
• Permet de représenter la page web chargée en une arborescence d'objets
• Avec javascript, on peut accéder ou parcourir cet arborescence pour:
• La modification du contenu ou du style d'un élément
• La création ou la suppression d'un élément
• L'interaction avec l'utilisateur (évènement souris, formulaire)
• Agit sur une copie du code source chargée par le navigateur.

2- Dom & arborescence
• Dans le document HTML tout est un nœud (arborescence de nœuds) :
• L'ensemble du document est un nœud de document
• Chaque élément HTML est un nœud d'élément
• Le texte dans des éléments HTML sont des nœuds de texte
• Chaque attribut HTML est un nœud d'attribut
• Les commentaires sont les nœuds de commentaires
• Racine (root): Le nœud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il
s'agit toujours du nœud html
2- Dom & arborescence
Exemple d'arborescence
 Nœud de texte
meta
 Nœud d'attribut
head  Nœud d'élément
title Ma page
html
id
body section
h1 Mon titre
p Paragraphe 1 …
a href
Lien 1
3- hiérarchie des nœuds
• Les nœuds ont une relation hiérarchique entre eux
Child Nodes Nœud parent

Parent Node
First child Nœud enfant 1 Nœud enfant 2 Nœud enfant 3 Last child
Sibiling (frère)
4- Les méthodes d'accès
L'objet document représente l'ensemble de l'arborescence du document analysé. Il possède de nombreuses
propriétés et méthodes. Cinq de ces dernières permettent de « pointer » directement un ou plusieurs
éléments dans le document.
 getElementById(id): sélectionner un élément en utilisant son id.

getElementsByTagName(tag)
Sélectionner une liste d'éléments en utilisant le nom d'une balise bien précis. Exemple tous les paragraphe
<p>, tous les liens <a>.
getElementsByClassName(class)
Sélectionner une liste des éléments d'une classe spécifiée.

querySelector(selector)
Sélectionner un nœud avec un sélecteur CSS.

querySelectorAll(selector)
Sélectionner une liste de nœuds qui correspond au sélecteur CSS.
Remarque :
- getElementById et querySelector retourne le premier élément trouvé.
- getElementsByTagName, getElementsByClassName et querySelectorAll : Retourne un tableau de
nœuds (NodeList).
5- Gestion des évènements
Les évènements
Un évènement est un signal envoyé au JavaScript par l'interface DOM tel que :
 Un clic de la souris
 Curseur qui survole une zone
 Chargement de page…
Pour écouter et répondre à un évènement , il faut implémenter un gestionnaire d'évènement.
3 méthodes pour implémenter un gestionnaire d'évènement :

 Utiliser des attributs HTML de type évènement
 Utiliser des propriétés JavaScript liées aux évènements (Event Handler)
 Utiliser la méthode addEventListener (Event Listner)
Gestion évènement en ligne
Le gestionnaire d'évènement est placé en ligne en tant qu'attribut HTML.

Code Js ou appel d'une fonction
<img src="img1.jpg" onclick = "zoomimg()">

Évènement HTML
Mauvaise pratique :
 code javascript dans le code HTML
 un seul abonnement possible par type d’évènement
Propriétés du gestionnaire d'évènement (event Handler)
document.queryselector('img') . onclick = zoomimg;
Propriéte js Invoquer la fonction ‘zoomimg’ sans les ( )

.

Méthode addEventListner
La méthode addEventListener() attache un gestionnaire d'événements à l'élément spécifié sans remplacer les gestionnaires
d'événements existants.
 Permet d'ajouter plusieurs gestionnaires d'événements à un élément.
 Permet d'ajouter plusieurs gestionnaires d'événements du même type à un élément, c'est-à-dire deux événements
"clic" par exemple.
element.addEventListener ( event , function )
event : le type de l'évènement : click , mouseover , keydown… les évènement HTML mais sans le On
function : invoquer une fonction (c'est pas un appel donc sans les ( )) ou ajouter le code d'une fonction anonyme.
Méthode 1 : Invoquer la fonction Méthode 2 : Fonction anonyme

.

Supprimer un gestionnaire d’évènements avec removeEventListener()
La méthode removeEventListener() permet de supprimer un gestionnaire d’évènement déclaré avec addEventListener().

Passer en argument le type d’évènement ainsi que le nom de la fonction
element.removeEventListener ( event , function )

L’objet Date
.
.
L’objet Date
Créer un objet de type date
1) Let d = new Date( ) // sans paramètres

Lorsqu'aucun paramètre n'est fourni, le nouvel objet Date ainsi créé représente la date et heure courante du moment de
l'instanciation
2) Let d = new Date ( value)

Value est une valeur entière qui représente le nombre de millisecondes depuis le premier janvier 1970 00:00:00
3) Let d = new Date(ch); // ch est une chaine représentant la date

.
.
L’objet Date
Créer un objet de type date
4) Let d = new Date(year, monthIndex, day, hours, minutes, seconds)

 Year : Une valeur entière représentant l'année.
 monthIndex : Une valeur entière représentant le mois, en commençant à 0 pour janvier
 day (Facultatif): Une valeur entière pour le jour du mois. La valeur par défaut est 1.
 hours (Facultatif ) : Une valeur entière entre 0 et 23, représentant l'heure du jour. La valeur par défaut est 0.
 minutes (Facultatif) : Une valeur entière représentant le nombre de minutes écoulées dans l'heure. La valeur par défaut
est 0.
 seconds (Facultatif ) : Une valeur entière représentant le nombre de secondes écoulées dans la minute. La valeur par
défaut est 0.
.
.
L’objet Date
Les méthodes de l’objet Date
Voir Annexe TP 5
Objet Méthode/Propriété Description

Permet de récupérer la valeur de l'année sur 4 chiffres pour la date passée en
getFullYear() paramètre
getMonth() Permet de récupérer le numéro du mois (un entier entre 0 et 11)
getDate() Permet de récupérer la valeur du jour du mois, (retourne un entier entre 1 et 31)
Date
getDay(); Permet de récupérer la valeur du jour de la semaine (retourne un entier entre 0 et 6)

getHours() Permet de récupérer la valeur de l'heure (retourne un entier entre 0 et 23)
getMinutes(); Permet de récupérer la valeur des minutes (retourne un entier entre 0 et 59)
getSeconds() Permet de récupérer le nombre de secondes (retourne un entier entre 0 et 59)
getTime() Permet de récupérer le nombre de millisecondes depuis le 1er janvier 1970

JS 120522

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JS 120522

Transféré par

Droits d'auteur :

Formats disponibles

Le langage JavaScript

3ème Sciences de l’informatique

Systèmes &Technologies Informatiques

Lycée Habib Thamer Bizerte

• Le JavaScript est un langage de programmation pour le web

• C’est un langage front-end (coté client) : il est interprété et exécuté par le

• Utilisé pour créer de l’interaction entre l’utilisateur et la page web:

 Écriture dans la sortie HTML en utilisant document.write().

JavaScript peut "saisir" les données de différentes manières:

Les types structurels

Conversion automatique de types

let num2 = Number("00001"); // 1

String (12 ) // retourne "12"

Les opérateurs arithmétiques

Les opérateurs de comparaison

Les opérateurs logique

Les opérateurs d'affectation : =,+=,−=,*=,/=,%=

Syntaxe : switch ( expression ) {

Remarque : Le branchement par défaut n’est pas obligatoire.

L’opérateur ternaire ? : permet de remplacer une instruction if...else simple.

variable = condition ? valeur_si_true : valeur_si_false ;

La structure itérative – For--

Dans la boucle for il faut :

La structure itérative – while--

On répète la boucle tant que la condition est vraie.

Remarque : le bloc d'instructions peut être exécuté 0 fois au moins .

La structure itérative – Do … while--

Remarque : le bloc d'instructions peut être exécuté 1 fois au moins.

function function_name (param1, param2, …) {

// bloc de code à exécuter

Pour invoquer une fonction:

Exemple Information en entrée

Remarque : l'instruction return permet de retourner le résultat renvoyé par la fonction

Les Fonctions anonymes

Une fonction anonyme est une fonction sans nom.

le premier élément du tableau commence à l'indice 0

• Agit sur une copie du code source chargée par le navigateur.

• L'ensemble du document est un nœud de document

• Chaque élément HTML est un nœud d'élément

• Le texte dans des éléments HTML sont des nœuds de texte

• Chaque attribut HTML est un nœud d'attribut

• Les commentaires sont les nœuds de commentaires

Child Nodes Nœud parent

 getElementById(id): sélectionner un élément en utilisant son id.

Sélectionner une liste des éléments d'une classe spécifiée.

Sélectionner un nœud avec un sélecteur CSS.

Sélectionner une liste de nœuds qui correspond au sélecteur CSS.

Pour écouter et répondre à un évènement , il faut implémenter un gestionnaire d'évènement.

3 méthodes pour implémenter un gestionnaire d'évènement :

Le gestionnaire d'évènement est placé en ligne en tant qu'attribut HTML.

<img src="img1.jpg" onclick = "zoomimg()">

document.queryselector('img') . onclick = zoomimg;

Propriéte js Invoquer la fonction ‘zoomimg’ sans les ( )

5- Gestion des évènements

element.addEventListener ( event , function )

Méthode 1 : Invoquer la fonction Méthode 2 : Fonction anonyme

5- Gestion des évènements

La méthode removeEventListener() permet de supprimer un gestionnaire d’évènement déclaré avec addEventListener().

element.removeEventListener ( event , function )

1) Let d = new Date( ) // sans paramètres

2) Let d = new Date ( value)

3) Let d = new Date(ch); // ch est une chaine représentant la date

4) Let d = new Date(year, monthIndex, day, hours, minutes, seconds)