SlideShare une entreprise Scribd logo
1  sur  44
Introduction
à JavaScript
M. Abdoulaye DIENG 1Juillet 2020
Objectif général
Savoir créer des pages Web interactives sans trop
solliciter le serveur et le réseau pour offrir une
meilleure expérience utilisateur
2
Objectifs opérationnels
 Stocker des données à l’aide des variables
 Traiter des données à l’aide des opérateurs.
 Communiquer avec l’internaute à l’aide des E/S de base
 Contrôler le flux d’exécution des instructions.
 Réutiliser et organiser le code en créant des fonctions
 Créer l’interactivité grâce à la gestion des évènements
 Traiter plus facilement plusieurs données connexes grâce
aux tableaux et aux objets
 Gérer les propriétés de la fenêtre avec l’objet window
 Manipuler le contenu de la page Web grâce à l’objet
document
 Contrôler la saisie d’un formulaire avec l’objet form
3
Sommaire
1. Présentation de JavaScript
2. Inclusion du JavaScript
3. Variable et types primitifs
4. Opérateurs
5. Entrée/Sortie de base
6. Structures de contrôle
7. Fonctions
8. Objets
8. Evénements
9. Objet Array
10. Objet Window
11. Objet Document
12. Objet Form
4
Qu’est ce JavaScript?
 Pb : comment interagir efficacement avec l’internaute ?
 Sol : recueillir et traiter des données côté client
 JavaScript = langage de script à incorporer dans une page Web
pour créer de l’interactivité sans trop solliciter le serveur.
 Créé en 1995 par Brendan Eich de Netscape à cette époque
 JS permet au navigateur, entre autres, de :
• traiter les saisies et frappes faites au clavier ;
• traiter les mouvements et clics de la souris ;
• réagir aux actions précitées avec des sorties
à l'écran ou des modifications dans la page ;
• effectuer des traitements en mode asynchrone .
 Last version : ECMAScript 7
en juin 2016 5
Inclusion du JavaScript
 Inclusion interne : n’importe où dans la page html en
délimitant le code avec l’élément html script comme suit :
<script type="text/javascript">
//code JS
</script>
 Inclusion externe : écrire le code JS dans un fichier .js à inclure
dans une page html comme suit :
<script type="text/javascript" src="chemin/du/fichier_inclus.js">
</script>
 Toute dépendance doit être incluse avant le code.
6
Variable
 Variable : emplacement mémoire pour le stockage
d’une donnée
 Syntaxe de déclaration :
var nomVariable;
 Avec ES6 :
let nomVar
const NOM_CONSTANTE=valeur
 Exemples
let i;
var taille, age = 26;
const PI = 3.14;
 JavaScript est un langage dont le typage est :
– faible : pas nécessaire de déclarer le type d'une variable avant
de l'utiliser
– dynamique : la même variable peut avoir différents types au
cours de son existence 7
v
a
l
e
u
r
identificateur
Types primitifs
undefined et number
 undefined : variable non initialisée
8
 number
• entier (32 bits)
Ex : 47
• réels (64 bits) :
forme décimal ou
avec exposant (e ou E).
Ex : 3.14159, 123e5, 123e-5
• +Infinity (+infini), -Infinity
et NaN (Not a Number)
Types primitifs
string et boolean
 string
• string = suite de caractères
(unicode 16 bits).
• une littérale string est délimitée
par des quotes (' ou " ).
Ex : 'Bonjour', "Bonsoir"
 boolean
– Deux valeurs uniquement :
true ou false.
– Seules les valeurs 0 et ses
variations, "" (la chaîne vide),
null, undefined donnent false
par conversion. 9
• l’anti-slash () : caractère d’échappement
', ", , n, r, t, b, …
Ex : 'Il s'appelle Toto. n Elle, Titi '
Types primitifs
conversion chaînes de caractère en nombre
 parseFloat(chaine)
• Analyse une chaîne et retourne un nombre à virgule
flottante ou retourne NaN.
• Exemples :
parseFloat("0.0314E+2"); // 3.14
parseFloat("3.14=pi"); // 3.14
parseFloat("FF2"); // NaN
 parseInt(chaine[, base=10])
• Analyse une chaîne et retourne un entier dans la base base
ou retourne NaN.
• Exemples :
parseInt("F", 16); parseInt("15.99"); // 15
parseInt("116", 2); // 3
parseInt("611", 2); // NaN
 Tout caractère de la chaîne analysée est retourné jusqu'à ce
qu’un caractère non conforme soit rencontré. 10
Opérateurs
 Opérateur : outil primitif de traitement de données
 Opérateurs arithmétiques
+, -, *, /, % (modulo), ++(incrément), --(décrément)
NB : + permet aussi de concaténer (ou fusionner) deux string
 Opérateurs d’assignation
= (affectation), += (ajouter à), *=, /=, -=, %=
NB : += permet aussi de concaténer deux string
 Opérateurs logiques
&& (et), || (ou), ! (non)
 Opérateurs de comparaison
== (égalité après une éventuelle conversion de type),
=== (égalité incluant le type), <, <=, >, >=,
!= (différent), !== (inégalité incluant le type)
NB : permettent aussi de comparer deux string
en ordre lexicographique. 11
Entrée/Sortie de base
affichage d’une fenêtre d’invite de saisie
 prompt("question" [, "texteParDéfaut"])
• Ecrit une question dans une boîte de dialogue munie d’une zone de
saisie et de deux boutons OK et Annuler;
• Le texte par défaut, s’il est mis, s’affiche dans la zone de saisie pour
aider l’internaute à répondre à la question
• Retourne la chaîne de caractères (même si c’est un nombre) saisie
par le visiteur qui appuie aussi sur OK
• Retourne null si le visiteur clique sur Annuler
• Remplacer les caractères accentués par leur code latin-1 en octal
précédé de l’anti-slash.
Ex : é (351), è (350), ê (352), à (340), â (342)
Table complète : www.pjb.com.au/comp/diacritics.html
 Exemple (à tester avec la console)
prompt("Quel est votre pr351nom SVP ?" , "Saisissez-le ici")
12
Entrée/Sortie de base
affichage d’une fenêtre de demande de confirmation
 confirm("texte")
• Ecrit une string et/ou la valeur d’une expression dans une boîte de
dialogue munie de deux boutons OK et Annuler,
• Retourne true si le visiteur clique sur Ok
• Retourne false si le visiteur clique sur Annuler ou appuie sur la
touche Echap.
• Une string et une expression sont concaténées par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère n.
• Remplacer tout caractère non-ASCII par son code latin-1 en octal
précédé de l’anti-slash.
 Exemple (à tester avec la console)
confirm("Confirmez-vous le pr351nom Toto ?")
13
Entrée/Sortie de base
affichage d’une fenêtre d’alerte
 alert("texte")
• Ecrit une string et/ou la valeur d’une expression dans une boîte de
dialogue munie d’un bouton OK.
• Retourne toujours undefined
• Une string et une expression sont concaténées par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère spécial de
retour à la ligne n.
• Remplacer tout caractère non-ASCII par son code latin-1 en octal
précédé de l’anti-slash.
 Exemple (à tester avec la console)
alert("Nous allons valider votre pr351nom comme 351tant Toto
!")
14
Entrée/Sortie de base
affichage dans la page Web
 document.write("texte")
• Ecrit une string et/ou la valeur d’une expression dans le corps
(body) du document, à la position de l'appel du script
• Une string et une expression sont concaténées par , ou par +
• Pour écrire sur plusieurs lignes, utiliser la balise <br>.
• Remplacer tout caractère non-ASCII par son code html ou par
son code latin-1 en octal précédé de l’anti-slash.
 Exemple (à tester avec la console)
document.write("Votre pr351nom est vraiment <b>Toto</b>")
15
x
Structures de contrôle
présentation
 Par défaut, les instructions d’un programme sont exécutées d’une
manière séquentielle.
Exemple :
let prenom = prompt("Quel est votre pr351nom SVP ?")
confirm("Confirmez-vous le pr351nom "+prenom)
document.write("Votre pr351nom est vraiment "+prenom)
• Parfois, il est nécessaire qu’un traitement (une ou +sieurs
instructions) ne soit pas systématiquement exécuté ou soit
exécuté plusieurs fois :
d’où l’intérêt des structures de contrôle.
• Deux grands types de structures de contrôle :
– structures conditionnelles ou tests ;
– structures répétitives (ou itératives) ou boucles.
16
Structures de contrôle
conditionnelles - Syntaxe
 if (condition) {
traitement_1
}
[else {
traitement_2
}]
17
if (condition_1){
traitement_1
}else if
(condition_2){
traitement_2
}
… // suite de else if
}else {
traitement_n
}
switch (expression){
case valeur_1 : traitement 1;
break;
case valeur_2 : traitement 2;
break;
… // suite de case
[default : traitement par défaut]
}
Structures de contrôle
exemple-if.html - exemple-switch.html
18
x
Structures de contrôle
répétitives - Syntaxe
 while(condition){
traitement
}
 do{
traitement
}while(condition);
 for(initialisation; condition; modification){
traitement
}
19
Structures de contrôle
exemple-while.html – exemple-do-while-and-for.html
20
x
Fonctions
présentation
• Fonction = ensemble d’instructions portant un nom
• Utilité :
– implémenter la décomposition d’un problème en sous-problèmes
– faciliter la lisibilité, le débogage et la réutilisabilité/factorisation
• Une fonction est définie avec un nom, un corps et d’éventuels
arguments (ou paramètres formel) lui permettant de communiquer
• Une fonction n’est exécutée que lorsqu’elle est appelée
• Lors de l’appel, tout paramètre formel est associé à une variable ou une
constante nommée « paramètre effectif » du code appelant
• Après son exécution une fonction peut retourner explicitement une
valeur
21
Fonctions
syntaxe
 Syntaxe de la définition d’une fonction
• Avec une instruction :
function nomDeLaFonction([arg_1 [, arg_2, …] ] ) {
séquence d'instructions;
[return expression]
}
• Dans une expression : le nom de la fonction est optionnel.
Exemples :
let myVar = function(){ … }
elt.onclick = function(){ alert("Pourquoi m'avez-vous cliqué
?")}
 En JS, une fonction retourne toujours une valeur
 L'appel d'une fonction qui :
• retourne undefined constitue une instruction en lui-même ;
• retourne une valeur différente de undefined est remplacé à
l'exécution par cette valeur retournée ; cet appel doit
forcément se trouver dans un calcul, une affectation, un
22
Fonctions
exemple-fonction-sans-return.html
23
Fonctions
exemple-fonction-avec-return.html
24
x
Fonction
Arrow function
 Une expression de fonction fléchée permet d'avoir une syntaxe
plus courte
 Syntaxe
– ([param] [, param]) => { instructions }
– 1 seul argument ne nécessite pas de parenthèses
– 1 seule expression ne nécessite pas d'accolades et sa valeur
est la valeur de retour implicite pour cette fonction.
 exemple-arrow-fonction.html (fonctions à définir et à appeler)
– let sayHello = nbr => {
for(let i=1; i<=nbr; i++){
console.log('Hello World');
}
}
– let multiplier = (a,b) => a*b;
Fonction
callback
 Callback (fonction de rappel) = fonction passée en paramètre à
une autre pour être exécutée plus tard
 Pas d’exécution immédiate => Pas de parenthèses « () » en
suffixe dans la syntaxe du paramètre
 Quelques usages
 setTimeout() et setInterval()
 Gestion d’évènements
 Traitement asynchrone
 exemple-callback.html
26
x
Objet
présentation
 La programmation orientée objet consiste à modéliser un
concept du monde réel en entités informatiques
 Chaque entité informatique est appelée objet et est caractérisé
par :
 son identifiant : nom qui le distingue
 ses attributs : données qui le caractérisent
 ses méthodes : fonctions qui caractérisent son
comportement et les actions qu’il peut subir
 Exemple : personne
 Attributs : nom, âge, taille, poids, …
 Opérations possibles : saluer, grandir, grossir, …
27
Objet
création avec une notation littérale
28
 Notation littérale : ensemble de couples (propriété,valeur)
 Type de valeur : primitif, tableau, objet et fonction
 Si valeur est de type fonction alors propriété = méthode
 Syntaxe
let nomObjet = { clé1:valeur1, clé2:valeur2, … }
 exemple-objet.html
this fait référence à l’objet courant (ici, personne)
Objet
accès aux membres
 Syntaxes
nomObjet.nomPropriété
nomObjet.nomMéthode()
 exemple-objet.html (suite)
29
Ces deux instructions sont à rajouter après l’accolade
fermante de la création de l’objet personne
Evénements
présentation
 Événement = changement d'état de l'environnement
qui peut être intercepté par le code JavaScript
 Un événement peut être provoqué par l'utilisateur (pression
d'une touche, ...), par le document (chargement d'une image,
...), ou même par le développeur (soumission d’un form. valide)
 Quelques évènements relatif à un document Web
– mouseover : le pointeur de la souris survole l’élément
– click : l’élément associé est cliqué
– mouseout : le pointeur de la souris quitte l’élément
– focus : l’élément associé est ciblé
– blur : l’élément associé n’est plus ciblé
– change : le contenu du champ associé est modifié
– load : la page est chargée dans le navigateur
– submit : le formulaire associé est soumis
30
Evénements
gestionnaire d’évènement DOM 2
 Gérer un événement = associer une action à un événement.
« Lorsque tel événement se produit, faire telle action »
 Principe
1) Référencer ou modéliser en objet JavaScript, le contenu
HTML sur lequel l’événement est écouté
2) invoquer addEventListener() sur le modèle objet
 Quelques syntaxes de modélisation d’un contenu HTML
• let nomObjet =
document.getElementById("id_element_html")
• let nomObjet = document.querySelector("selecteurCSS")
 Syntaxe du gestionnaire d’évènement
nomObjet.addEventListener('nomEvent', function(){
// action à faire lorsque l’événement écouté se produit
});
31
x
Evénements
exemple-gestionnaire-evenement.html
32
x
Objet Array
présentation
 Objet Array : créer et manipuler des tableaux
 Définition d’un tableau : var nomTab = new Array();
 Initialisation : nomTab[ i ]= element;
 Définition et initialisation :
– avec Array() :
var nomTab=new Array( element_1 , element_2[, …] );
– littéral : var nomTab=[ element_1 [, element_2, …] ];
– Ex : var j_tab = new Array("j", "a", "v", "a");
var s_tab=["s", "c", "r", "i", "p", "t"];
 length : propriété de l’objet Array, renvoi le nombre de valeurs
contenues dans un tableau
 Parcourt d’un tableau
for(let i in nomTab){
traitement
}
i est un indice du tableau
 NB : qd for … in parcourt un autre objet (i est une propriété)
for(let val of nomTab){
traitement
}
ES6
val est une valeur du tableau33
Objet Array
quelques méthodes
 .push(newElt1 [,newElt2, …]) ajoute 1 ou +sieurs élément(s) à
la fin et retourne la nouvelle taille
 .shift()/.pop() supprime et retourne le premier/dernier élément
 .splice(deb, n[, elem1[, élem2, ...]]) supprime n (≥0) élément(s)
à partir de l’indice deb et/ou insère tout élément spécifié. Elle
retourne un tab contenant l’(ou les) élément(s) supprimé(s).
 .slice(deb [,fin]) retourne le tableau des éléments de
l'indice deb à l'indice fin-1
 .reverse() retourne un tab en inversant l'ordre de ses éléments.
 .sort() retourne un tab en triant ses éléments par ordre
alphabétique croissant.
 .join(['sep']) joint les éléments d’un tableau avec sep (virgule,
par défaut) pour former et retourner une chaîne de caractères
 tab1.concat(tab2 [, tab3, …]) fusionne tab1 à d’autres tableaux
et retourne le tableau obtenu
34
Objet Array
quelques méthodes utilisant des fonctions de rappel
 .reduce( function(acc, val, indice, tab), val_init ) applique une
fonction qui est un « accumulateur » et qui traite chaque valeur
d'un tableau afin de le (tableau) réduire à une seule valeur. acc
est la valeur précédemment retournée par le dernier appel du
callback, ou val_init.
 .map(function(val, indice, tab) ) retourne un nouveau tableau
composé des images des éléments d'un tableau par une
fonction donnée en argument
 .filter(function(val, indice, tab) ) retourne un nouveau tableau
composé des éléments du tableau d'origine pour lesquels la
fonction de rappel retourne true.
 .forEach(function(val, indice, tab) ) exécute une fonction de
rappel sur chaque élément du tableau
 + d’infos :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
35
x
Objet window
 Objet window : gestion de la fenêtre
 Objet propriétaire, par défaut, de toute variable ou méthode
 .name : retourne ou défini le nom de la fenêtre
 .alert(), .confirm() et .prompt() : boîtes de dialogue (déjà vues)
 .setTimeout(fct, delai) : appelle la fonction fct après delai ms
et retourne un identificateur numérique
NB : définition de fct en paramètre
 .clearTimeout(id) : efface un délai défini par setTimeout()
 .setInterval(fct, delai) : appelle la fonction fct chaque delai ms
et retourne un identificateur numérique
 .clearInterval(id) : efface un délai défini par setInterval()
 exemple-window.html
(à tester puis à modifier pour ne permettre que 3 affichages)
function sayHello(){
document.write('<br>Hello World');
}
setInterval(sayHello,3000);
36
x
Objet document
arbre DOM
37
Objet document
présentation
 Objet document : gestion du contenu d’une page Web
 .write() : écrire dans un document
 .createElement("typeEltHTML") crée un élément du type
spécifié
 element.cloneNode(profond) renvoie une copie du nœud
element avec profond, une valeur booléenne obligatoire,
indiquant si la copie doit se faire en profondeur ou non
 .getElementById("nomId") retourne un élément à partir de son
id
 .getElementsByTagName("nomElement") retourne un tableau
d‘éléments HTML à partir de leur nom
 .querySelector("selecteur") retourne le 1er élément satisfaisant
au sélecteur CSS.
 .querySelectorAll("selecteur") retourne un tableau de tous les38
Objet document
quelques sélecteurs CSS
Expression Retour
Y Tout contenu désigné par l’élément HTML Y.
#nomId Tout contenu identifié par nomId
.nomClasse Tout contenu faisant partie de la classe nomClasse
[attr] Tout contenu dont l'attribut attr est spécifié.
[attr="val"] Tout contenu dont l'attribut attr vaut val.
[attr^="val"] Tout contenu dont l'attribut attr commence par val.
[attr$="val"] Tout contenu dont l'attribut attr se termine par val.
X Y Tout contenu sélectionné par Y et inclus dans un contenu sélectionné par X
X > Y
Tout contenu sélectionné par Y et inclus directement dans un contenu
sélectionné par X
X + Y
Tout contenu sélectionné par Y et suivant immédiatement un contenu
sélectionné par X
39
Objet document
méthodes d’accès (R/W) au contenu
 parentElt.appendChild(enfant) ajoute un nœud à la fin de la
liste des enfants d'un nœud parent spécifié
 parentElt.insertBefore(newElt, refElt) insère newElt juste avant
refElt parmi les enfants de parentElt.
 .innerHTML R/W tout le contenu d'un élément
 .nomAttribut R/W la valeur d’un attribut d'un élément
 .style.propriétéCSS R/W une propriété de style d'un élément
– propriétéCSS a presque le même nom qu’en CSS
– Remplacer les "-" par une majuscule sur le mot suivant
Ex : background-color → style.backgroundColor
 .classList retourne la liste des classes CSS d'un élément
 .classList.add("nom")/.remove(…)/.toggle(…) ajoute /
supprime / change l’existence d’une classe à la liste des classes
40
Objet Document
exemple-document.html
41
x
NB : onload="ajouteElement()" respecte la syntaxe DOM 0 de gestion
d’un évènement
Objet form
présentation
 Objet form : gestion d’un formulaire
 .name : nom d’accès à tout élément et au formulaire
 .length : nombre d'éléments à l'intérieur du formulaire ou
nombre d’éléments dans un groupe (radio, checkbox, option, …)
 .submit() : soumet le formulaire
 .reset() : réinitialise le formulaire
 .value : valeur en cours d’un élément
 .placeholder : indication dans un champ (text, textarea, …)
 .required : caractère obligatoire d’un champ
 .autofocus : donne le focus automatiquement
 .disabled : état d’activation d’un élément
 .checked : état (coché ou non) d’un bouton ou d’une case
 .selectedIndex : rang de l’option sélectionnée d’un menu
 .options : tableau donnant les options d’un objet select
 .text / .value : libellé / valeur d’une option 42
Objet form
exemple-form.html
43
x
Documentation
https://developer.mozilla.org/fr/docs/JavaScript/Référence_JavaScript
http://www.toutjavascript.com/reference/
http://www.w3schools.com/jsref/
http://devdocs.io/offline
44

Contenu connexe

Tendances

Présentation Flutter
Présentation FlutterPrésentation Flutter
Présentation FlutterAppstud
 
Correction Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfCorrection Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfslimyaich3
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Chapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en JavaChapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en JavaAziz Darouichi
 
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniAtelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniShellmates
 
Exercice 1 java Héritage
Exercice 1 java HéritageExercice 1 java Héritage
Exercice 1 java HéritageNadaBenLatifa
 
Formation PHP
Formation PHPFormation PHP
Formation PHPkemenaran
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Cours d’introduction à LaTeX
Cours d’introduction à LaTeXCours d’introduction à LaTeX
Cours d’introduction à LaTeXAdrien Barbaresi
 
Examen principal - PHP
Examen principal - PHPExamen principal - PHP
Examen principal - PHPInes Ouaz
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JSAbdoulaye Dieng
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correctionInes Ouaz
 
Alphorm.com Formation Laravel : Construire une Application de A à Z
Alphorm.com Formation Laravel : Construire une Application de A à ZAlphorm.com Formation Laravel : Construire une Application de A à Z
Alphorm.com Formation Laravel : Construire une Application de A à ZAlphorm
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Faycel Chaoua
 

Tendances (20)

Présentation Flutter
Présentation FlutterPrésentation Flutter
Présentation Flutter
 
Correction Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdfCorrection Examen 2016-2017 POO .pdf
Correction Examen 2016-2017 POO .pdf
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Chapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en JavaChapitre 11: Expression Lambda et Référence de méthode en Java
Chapitre 11: Expression Lambda et Référence de méthode en Java
 
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniAtelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El Hassani
 
Exercice 1 java Héritage
Exercice 1 java HéritageExercice 1 java Héritage
Exercice 1 java Héritage
 
Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
 
Formation PHP
Formation PHPFormation PHP
Formation PHP
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Cours d’introduction à LaTeX
Cours d’introduction à LaTeXCours d’introduction à LaTeX
Cours d’introduction à LaTeX
 
Examen principal - PHP
Examen principal - PHPExamen principal - PHP
Examen principal - PHP
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Java
JavaJava
Java
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Alphorm.com Formation Laravel : Construire une Application de A à Z
Alphorm.com Formation Laravel : Construire une Application de A à ZAlphorm.com Formation Laravel : Construire une Application de A à Z
Alphorm.com Formation Laravel : Construire une Application de A à Z
 
Cours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 compositeCours design pattern m youssfi partie 4 composite
Cours design pattern m youssfi partie 4 composite
 
POO
POOPOO
POO
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
 

Similaire à Introduction à JavaScript

initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascriptAbdoulaye Dieng
 
Formation java script
Formation java scriptFormation java script
Formation java scriptRomdhani Asma
 
.php1 : les fondamentaux du PHP
.php1 : les fondamentaux du PHP.php1 : les fondamentaux du PHP
.php1 : les fondamentaux du PHPAbdoulaye Dieng
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.pptMarwenJAZI
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Jean-Baptiste Vigneron
 
Developpement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfDeveloppement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfrachidimstapha
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScriptMouna Dhaouadi
 
Visual Studio 2008 Overview
Visual Studio 2008 OverviewVisual Studio 2008 Overview
Visual Studio 2008 OverviewGregory Renard
 
POO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdfPOO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdfLarbaSAWADOGO2
 
Découvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCLDécouvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCLDotNetHub
 
Mix it 2011 - Clojure
Mix it 2011 - ClojureMix it 2011 - Clojure
Mix it 2011 - Clojurelolopetit
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024YounesOuladSayad1
 
02 Spécificité du C++ COURS SYS SYSSSSSS
02 Spécificité du C++  COURS SYS SYSSSSSS02 Spécificité du C++  COURS SYS SYSSSSSS
02 Spécificité du C++ COURS SYS SYSSSSSSAyoubElmrabet6
 
PHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaPHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaMahdi Ben Alaya
 
Scripting Linux avec Python partie1.pptx
Scripting Linux avec Python partie1.pptxScripting Linux avec Python partie1.pptx
Scripting Linux avec Python partie1.pptxFrancisRUKAN
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieurFredy Fadel
 

Similaire à Introduction à JavaScript (20)

initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascript
 
Formation java script
Formation java scriptFormation java script
Formation java script
 
.php1 : les fondamentaux du PHP
.php1 : les fondamentaux du PHP.php1 : les fondamentaux du PHP
.php1 : les fondamentaux du PHP
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.ppt
 
C++ 11/14
C++ 11/14C++ 11/14
C++ 11/14
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
 
Developpement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdfDeveloppement web dynamique_Base de donnees.pdf
Developpement web dynamique_Base de donnees.pdf
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
Visual Studio 2008 Overview
Visual Studio 2008 OverviewVisual Studio 2008 Overview
Visual Studio 2008 Overview
 
POO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdfPOO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdf
 
Découvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCLDécouvrez C# 4.0 et les améliorations apportées à la BCL
Découvrez C# 4.0 et les améliorations apportées à la BCL
 
Mix it 2011 - Clojure
Mix it 2011 - ClojureMix it 2011 - Clojure
Mix it 2011 - Clojure
 
La première partie de la présentation PHP
La première partie de la présentation PHPLa première partie de la présentation PHP
La première partie de la présentation PHP
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
 
Cours php
Cours phpCours php
Cours php
 
02 Spécificité du C++ COURS SYS SYSSSSSS
02 Spécificité du C++  COURS SYS SYSSSSSS02 Spécificité du C++  COURS SYS SYSSSSSS
02 Spécificité du C++ COURS SYS SYSSSSSS
 
PHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaPHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben Alaya
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 
Scripting Linux avec Python partie1.pptx
Scripting Linux avec Python partie1.pptxScripting Linux avec Python partie1.pptx
Scripting Linux avec Python partie1.pptx
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieur
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturelAbdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API RESTAbdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchronesAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express jsAbdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 

Introduction à JavaScript

  • 2. Objectif général Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur 2
  • 3. Objectifs opérationnels  Stocker des données à l’aide des variables  Traiter des données à l’aide des opérateurs.  Communiquer avec l’internaute à l’aide des E/S de base  Contrôler le flux d’exécution des instructions.  Réutiliser et organiser le code en créant des fonctions  Créer l’interactivité grâce à la gestion des évènements  Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets  Gérer les propriétés de la fenêtre avec l’objet window  Manipuler le contenu de la page Web grâce à l’objet document  Contrôler la saisie d’un formulaire avec l’objet form 3
  • 4. Sommaire 1. Présentation de JavaScript 2. Inclusion du JavaScript 3. Variable et types primitifs 4. Opérateurs 5. Entrée/Sortie de base 6. Structures de contrôle 7. Fonctions 8. Objets 8. Evénements 9. Objet Array 10. Objet Window 11. Objet Document 12. Objet Form 4
  • 5. Qu’est ce JavaScript?  Pb : comment interagir efficacement avec l’internaute ?  Sol : recueillir et traiter des données côté client  JavaScript = langage de script à incorporer dans une page Web pour créer de l’interactivité sans trop solliciter le serveur.  Créé en 1995 par Brendan Eich de Netscape à cette époque  JS permet au navigateur, entre autres, de : • traiter les saisies et frappes faites au clavier ; • traiter les mouvements et clics de la souris ; • réagir aux actions précitées avec des sorties à l'écran ou des modifications dans la page ; • effectuer des traitements en mode asynchrone .  Last version : ECMAScript 7 en juin 2016 5
  • 6. Inclusion du JavaScript  Inclusion interne : n’importe où dans la page html en délimitant le code avec l’élément html script comme suit : <script type="text/javascript"> //code JS </script>  Inclusion externe : écrire le code JS dans un fichier .js à inclure dans une page html comme suit : <script type="text/javascript" src="chemin/du/fichier_inclus.js"> </script>  Toute dépendance doit être incluse avant le code. 6
  • 7. Variable  Variable : emplacement mémoire pour le stockage d’une donnée  Syntaxe de déclaration : var nomVariable;  Avec ES6 : let nomVar const NOM_CONSTANTE=valeur  Exemples let i; var taille, age = 26; const PI = 3.14;  JavaScript est un langage dont le typage est : – faible : pas nécessaire de déclarer le type d'une variable avant de l'utiliser – dynamique : la même variable peut avoir différents types au cours de son existence 7 v a l e u r identificateur
  • 8. Types primitifs undefined et number  undefined : variable non initialisée 8  number • entier (32 bits) Ex : 47 • réels (64 bits) : forme décimal ou avec exposant (e ou E). Ex : 3.14159, 123e5, 123e-5 • +Infinity (+infini), -Infinity et NaN (Not a Number)
  • 9. Types primitifs string et boolean  string • string = suite de caractères (unicode 16 bits). • une littérale string est délimitée par des quotes (' ou " ). Ex : 'Bonjour', "Bonsoir"  boolean – Deux valeurs uniquement : true ou false. – Seules les valeurs 0 et ses variations, "" (la chaîne vide), null, undefined donnent false par conversion. 9 • l’anti-slash () : caractère d’échappement ', ", , n, r, t, b, … Ex : 'Il s'appelle Toto. n Elle, Titi '
  • 10. Types primitifs conversion chaînes de caractère en nombre  parseFloat(chaine) • Analyse une chaîne et retourne un nombre à virgule flottante ou retourne NaN. • Exemples : parseFloat("0.0314E+2"); // 3.14 parseFloat("3.14=pi"); // 3.14 parseFloat("FF2"); // NaN  parseInt(chaine[, base=10]) • Analyse une chaîne et retourne un entier dans la base base ou retourne NaN. • Exemples : parseInt("F", 16); parseInt("15.99"); // 15 parseInt("116", 2); // 3 parseInt("611", 2); // NaN  Tout caractère de la chaîne analysée est retourné jusqu'à ce qu’un caractère non conforme soit rencontré. 10
  • 11. Opérateurs  Opérateur : outil primitif de traitement de données  Opérateurs arithmétiques +, -, *, /, % (modulo), ++(incrément), --(décrément) NB : + permet aussi de concaténer (ou fusionner) deux string  Opérateurs d’assignation = (affectation), += (ajouter à), *=, /=, -=, %= NB : += permet aussi de concaténer deux string  Opérateurs logiques && (et), || (ou), ! (non)  Opérateurs de comparaison == (égalité après une éventuelle conversion de type), === (égalité incluant le type), <, <=, >, >=, != (différent), !== (inégalité incluant le type) NB : permettent aussi de comparer deux string en ordre lexicographique. 11
  • 12. Entrée/Sortie de base affichage d’une fenêtre d’invite de saisie  prompt("question" [, "texteParDéfaut"]) • Ecrit une question dans une boîte de dialogue munie d’une zone de saisie et de deux boutons OK et Annuler; • Le texte par défaut, s’il est mis, s’affiche dans la zone de saisie pour aider l’internaute à répondre à la question • Retourne la chaîne de caractères (même si c’est un nombre) saisie par le visiteur qui appuie aussi sur OK • Retourne null si le visiteur clique sur Annuler • Remplacer les caractères accentués par leur code latin-1 en octal précédé de l’anti-slash. Ex : é (351), è (350), ê (352), à (340), â (342) Table complète : www.pjb.com.au/comp/diacritics.html  Exemple (à tester avec la console) prompt("Quel est votre pr351nom SVP ?" , "Saisissez-le ici") 12
  • 13. Entrée/Sortie de base affichage d’une fenêtre de demande de confirmation  confirm("texte") • Ecrit une string et/ou la valeur d’une expression dans une boîte de dialogue munie de deux boutons OK et Annuler, • Retourne true si le visiteur clique sur Ok • Retourne false si le visiteur clique sur Annuler ou appuie sur la touche Echap. • Une string et une expression sont concaténées par +. • Pour écrire sur plusieurs lignes, utiliser le caractère n. • Remplacer tout caractère non-ASCII par son code latin-1 en octal précédé de l’anti-slash.  Exemple (à tester avec la console) confirm("Confirmez-vous le pr351nom Toto ?") 13
  • 14. Entrée/Sortie de base affichage d’une fenêtre d’alerte  alert("texte") • Ecrit une string et/ou la valeur d’une expression dans une boîte de dialogue munie d’un bouton OK. • Retourne toujours undefined • Une string et une expression sont concaténées par +. • Pour écrire sur plusieurs lignes, utiliser le caractère spécial de retour à la ligne n. • Remplacer tout caractère non-ASCII par son code latin-1 en octal précédé de l’anti-slash.  Exemple (à tester avec la console) alert("Nous allons valider votre pr351nom comme 351tant Toto !") 14
  • 15. Entrée/Sortie de base affichage dans la page Web  document.write("texte") • Ecrit une string et/ou la valeur d’une expression dans le corps (body) du document, à la position de l'appel du script • Une string et une expression sont concaténées par , ou par + • Pour écrire sur plusieurs lignes, utiliser la balise <br>. • Remplacer tout caractère non-ASCII par son code html ou par son code latin-1 en octal précédé de l’anti-slash.  Exemple (à tester avec la console) document.write("Votre pr351nom est vraiment <b>Toto</b>") 15 x
  • 16. Structures de contrôle présentation  Par défaut, les instructions d’un programme sont exécutées d’une manière séquentielle. Exemple : let prenom = prompt("Quel est votre pr351nom SVP ?") confirm("Confirmez-vous le pr351nom "+prenom) document.write("Votre pr351nom est vraiment "+prenom) • Parfois, il est nécessaire qu’un traitement (une ou +sieurs instructions) ne soit pas systématiquement exécuté ou soit exécuté plusieurs fois : d’où l’intérêt des structures de contrôle. • Deux grands types de structures de contrôle : – structures conditionnelles ou tests ; – structures répétitives (ou itératives) ou boucles. 16
  • 17. Structures de contrôle conditionnelles - Syntaxe  if (condition) { traitement_1 } [else { traitement_2 }] 17 if (condition_1){ traitement_1 }else if (condition_2){ traitement_2 } … // suite de else if }else { traitement_n } switch (expression){ case valeur_1 : traitement 1; break; case valeur_2 : traitement 2; break; … // suite de case [default : traitement par défaut] }
  • 18. Structures de contrôle exemple-if.html - exemple-switch.html 18 x
  • 19. Structures de contrôle répétitives - Syntaxe  while(condition){ traitement }  do{ traitement }while(condition);  for(initialisation; condition; modification){ traitement } 19
  • 20. Structures de contrôle exemple-while.html – exemple-do-while-and-for.html 20 x
  • 21. Fonctions présentation • Fonction = ensemble d’instructions portant un nom • Utilité : – implémenter la décomposition d’un problème en sous-problèmes – faciliter la lisibilité, le débogage et la réutilisabilité/factorisation • Une fonction est définie avec un nom, un corps et d’éventuels arguments (ou paramètres formel) lui permettant de communiquer • Une fonction n’est exécutée que lorsqu’elle est appelée • Lors de l’appel, tout paramètre formel est associé à une variable ou une constante nommée « paramètre effectif » du code appelant • Après son exécution une fonction peut retourner explicitement une valeur 21
  • 22. Fonctions syntaxe  Syntaxe de la définition d’une fonction • Avec une instruction : function nomDeLaFonction([arg_1 [, arg_2, …] ] ) { séquence d'instructions; [return expression] } • Dans une expression : le nom de la fonction est optionnel. Exemples : let myVar = function(){ … } elt.onclick = function(){ alert("Pourquoi m'avez-vous cliqué ?")}  En JS, une fonction retourne toujours une valeur  L'appel d'une fonction qui : • retourne undefined constitue une instruction en lui-même ; • retourne une valeur différente de undefined est remplacé à l'exécution par cette valeur retournée ; cet appel doit forcément se trouver dans un calcul, une affectation, un 22
  • 25. Fonction Arrow function  Une expression de fonction fléchée permet d'avoir une syntaxe plus courte  Syntaxe – ([param] [, param]) => { instructions } – 1 seul argument ne nécessite pas de parenthèses – 1 seule expression ne nécessite pas d'accolades et sa valeur est la valeur de retour implicite pour cette fonction.  exemple-arrow-fonction.html (fonctions à définir et à appeler) – let sayHello = nbr => { for(let i=1; i<=nbr; i++){ console.log('Hello World'); } } – let multiplier = (a,b) => a*b;
  • 26. Fonction callback  Callback (fonction de rappel) = fonction passée en paramètre à une autre pour être exécutée plus tard  Pas d’exécution immédiate => Pas de parenthèses « () » en suffixe dans la syntaxe du paramètre  Quelques usages  setTimeout() et setInterval()  Gestion d’évènements  Traitement asynchrone  exemple-callback.html 26 x
  • 27. Objet présentation  La programmation orientée objet consiste à modéliser un concept du monde réel en entités informatiques  Chaque entité informatique est appelée objet et est caractérisé par :  son identifiant : nom qui le distingue  ses attributs : données qui le caractérisent  ses méthodes : fonctions qui caractérisent son comportement et les actions qu’il peut subir  Exemple : personne  Attributs : nom, âge, taille, poids, …  Opérations possibles : saluer, grandir, grossir, … 27
  • 28. Objet création avec une notation littérale 28  Notation littérale : ensemble de couples (propriété,valeur)  Type de valeur : primitif, tableau, objet et fonction  Si valeur est de type fonction alors propriété = méthode  Syntaxe let nomObjet = { clé1:valeur1, clé2:valeur2, … }  exemple-objet.html this fait référence à l’objet courant (ici, personne)
  • 29. Objet accès aux membres  Syntaxes nomObjet.nomPropriété nomObjet.nomMéthode()  exemple-objet.html (suite) 29 Ces deux instructions sont à rajouter après l’accolade fermante de la création de l’objet personne
  • 30. Evénements présentation  Événement = changement d'état de l'environnement qui peut être intercepté par le code JavaScript  Un événement peut être provoqué par l'utilisateur (pression d'une touche, ...), par le document (chargement d'une image, ...), ou même par le développeur (soumission d’un form. valide)  Quelques évènements relatif à un document Web – mouseover : le pointeur de la souris survole l’élément – click : l’élément associé est cliqué – mouseout : le pointeur de la souris quitte l’élément – focus : l’élément associé est ciblé – blur : l’élément associé n’est plus ciblé – change : le contenu du champ associé est modifié – load : la page est chargée dans le navigateur – submit : le formulaire associé est soumis 30
  • 31. Evénements gestionnaire d’évènement DOM 2  Gérer un événement = associer une action à un événement. « Lorsque tel événement se produit, faire telle action »  Principe 1) Référencer ou modéliser en objet JavaScript, le contenu HTML sur lequel l’événement est écouté 2) invoquer addEventListener() sur le modèle objet  Quelques syntaxes de modélisation d’un contenu HTML • let nomObjet = document.getElementById("id_element_html") • let nomObjet = document.querySelector("selecteurCSS")  Syntaxe du gestionnaire d’évènement nomObjet.addEventListener('nomEvent', function(){ // action à faire lorsque l’événement écouté se produit }); 31 x
  • 33. Objet Array présentation  Objet Array : créer et manipuler des tableaux  Définition d’un tableau : var nomTab = new Array();  Initialisation : nomTab[ i ]= element;  Définition et initialisation : – avec Array() : var nomTab=new Array( element_1 , element_2[, …] ); – littéral : var nomTab=[ element_1 [, element_2, …] ]; – Ex : var j_tab = new Array("j", "a", "v", "a"); var s_tab=["s", "c", "r", "i", "p", "t"];  length : propriété de l’objet Array, renvoi le nombre de valeurs contenues dans un tableau  Parcourt d’un tableau for(let i in nomTab){ traitement } i est un indice du tableau  NB : qd for … in parcourt un autre objet (i est une propriété) for(let val of nomTab){ traitement } ES6 val est une valeur du tableau33
  • 34. Objet Array quelques méthodes  .push(newElt1 [,newElt2, …]) ajoute 1 ou +sieurs élément(s) à la fin et retourne la nouvelle taille  .shift()/.pop() supprime et retourne le premier/dernier élément  .splice(deb, n[, elem1[, élem2, ...]]) supprime n (≥0) élément(s) à partir de l’indice deb et/ou insère tout élément spécifié. Elle retourne un tab contenant l’(ou les) élément(s) supprimé(s).  .slice(deb [,fin]) retourne le tableau des éléments de l'indice deb à l'indice fin-1  .reverse() retourne un tab en inversant l'ordre de ses éléments.  .sort() retourne un tab en triant ses éléments par ordre alphabétique croissant.  .join(['sep']) joint les éléments d’un tableau avec sep (virgule, par défaut) pour former et retourner une chaîne de caractères  tab1.concat(tab2 [, tab3, …]) fusionne tab1 à d’autres tableaux et retourne le tableau obtenu 34
  • 35. Objet Array quelques méthodes utilisant des fonctions de rappel  .reduce( function(acc, val, indice, tab), val_init ) applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'un tableau afin de le (tableau) réduire à une seule valeur. acc est la valeur précédemment retournée par le dernier appel du callback, ou val_init.  .map(function(val, indice, tab) ) retourne un nouveau tableau composé des images des éléments d'un tableau par une fonction donnée en argument  .filter(function(val, indice, tab) ) retourne un nouveau tableau composé des éléments du tableau d'origine pour lesquels la fonction de rappel retourne true.  .forEach(function(val, indice, tab) ) exécute une fonction de rappel sur chaque élément du tableau  + d’infos : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array 35 x
  • 36. Objet window  Objet window : gestion de la fenêtre  Objet propriétaire, par défaut, de toute variable ou méthode  .name : retourne ou défini le nom de la fenêtre  .alert(), .confirm() et .prompt() : boîtes de dialogue (déjà vues)  .setTimeout(fct, delai) : appelle la fonction fct après delai ms et retourne un identificateur numérique NB : définition de fct en paramètre  .clearTimeout(id) : efface un délai défini par setTimeout()  .setInterval(fct, delai) : appelle la fonction fct chaque delai ms et retourne un identificateur numérique  .clearInterval(id) : efface un délai défini par setInterval()  exemple-window.html (à tester puis à modifier pour ne permettre que 3 affichages) function sayHello(){ document.write('<br>Hello World'); } setInterval(sayHello,3000); 36 x
  • 38. Objet document présentation  Objet document : gestion du contenu d’une page Web  .write() : écrire dans un document  .createElement("typeEltHTML") crée un élément du type spécifié  element.cloneNode(profond) renvoie une copie du nœud element avec profond, une valeur booléenne obligatoire, indiquant si la copie doit se faire en profondeur ou non  .getElementById("nomId") retourne un élément à partir de son id  .getElementsByTagName("nomElement") retourne un tableau d‘éléments HTML à partir de leur nom  .querySelector("selecteur") retourne le 1er élément satisfaisant au sélecteur CSS.  .querySelectorAll("selecteur") retourne un tableau de tous les38
  • 39. Objet document quelques sélecteurs CSS Expression Retour Y Tout contenu désigné par l’élément HTML Y. #nomId Tout contenu identifié par nomId .nomClasse Tout contenu faisant partie de la classe nomClasse [attr] Tout contenu dont l'attribut attr est spécifié. [attr="val"] Tout contenu dont l'attribut attr vaut val. [attr^="val"] Tout contenu dont l'attribut attr commence par val. [attr$="val"] Tout contenu dont l'attribut attr se termine par val. X Y Tout contenu sélectionné par Y et inclus dans un contenu sélectionné par X X > Y Tout contenu sélectionné par Y et inclus directement dans un contenu sélectionné par X X + Y Tout contenu sélectionné par Y et suivant immédiatement un contenu sélectionné par X 39
  • 40. Objet document méthodes d’accès (R/W) au contenu  parentElt.appendChild(enfant) ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié  parentElt.insertBefore(newElt, refElt) insère newElt juste avant refElt parmi les enfants de parentElt.  .innerHTML R/W tout le contenu d'un élément  .nomAttribut R/W la valeur d’un attribut d'un élément  .style.propriétéCSS R/W une propriété de style d'un élément – propriétéCSS a presque le même nom qu’en CSS – Remplacer les "-" par une majuscule sur le mot suivant Ex : background-color → style.backgroundColor  .classList retourne la liste des classes CSS d'un élément  .classList.add("nom")/.remove(…)/.toggle(…) ajoute / supprime / change l’existence d’une classe à la liste des classes 40
  • 41. Objet Document exemple-document.html 41 x NB : onload="ajouteElement()" respecte la syntaxe DOM 0 de gestion d’un évènement
  • 42. Objet form présentation  Objet form : gestion d’un formulaire  .name : nom d’accès à tout élément et au formulaire  .length : nombre d'éléments à l'intérieur du formulaire ou nombre d’éléments dans un groupe (radio, checkbox, option, …)  .submit() : soumet le formulaire  .reset() : réinitialise le formulaire  .value : valeur en cours d’un élément  .placeholder : indication dans un champ (text, textarea, …)  .required : caractère obligatoire d’un champ  .autofocus : donne le focus automatiquement  .disabled : état d’activation d’un élément  .checked : état (coché ou non) d’un bouton ou d’une case  .selectedIndex : rang de l’option sélectionnée d’un menu  .options : tableau donnant les options d’un objet select  .text / .value : libellé / valeur d’une option 42

Notes de l'éditeur

  1. http://pigne.org/teaching/FullStackJS/
  2. PHP M. DIENG
  3. PHP M. DIENG
  4. PHP M. DIENG
  5. PHP M. DIENG
  6. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es
  7. [1,4,9].forEach( function(val){ console.log(++val) } ); [1,4,9].map( function(val){ return ++val } )
  8. [1,4,9].forEach( function(val){ console.log(++val) } ); [1,4,9].map( function(val){ return ++val } )
  9. Présenter form avec la console