SlideShare une entreprise Scribd logo
1  sur  42
Introduction
à JavaScript
M. DIENG Abdoulaye 1
Avril 2017
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
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
 Traiter des chaînes de caractères avec l’objet String
 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
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. Evénements
9. Objets du noyau
10. Objets du navigateur
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.
 En production, pour le chargement rapide d’une page :
• inclure éventuellement JavaScript après le contenu ;
• combiner plusieurs fichiers JavaScript en un seul fichier. 6
Variable
 Syntaxe de déclaration :
var nomVariable;
 Avec ES6 :
let nomVar
const NOM_CONSTANTE=valeur
 Exemples
let i;
var taille, age=26;
const TVA=0.18;
 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
Types primitifs
undifined 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"
• l’anti-slash () permet d’échapper
ou de déspécialiser les caractères
(', ", ).
Ex : 'Il s'appelle Toto'
 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
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", 10); // 15
parseInt("546", 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é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 saisie par le visiteur qui appuie
aussi sur OK
• Retourne null si le visiteur clique sur Annuler ou appuie sur la
touche Echap.
• 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 : 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 :
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.
• Une string et une expression sont concaténées par +.
• Pour écrire sur plusieurs lignes, utiliser le caractère spécial de
retour chariot n.
• Remplacer tout caractère non-ASCII par son code latin-1 en octal
précédé de l’anti-slash.
 Exemple :
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 :
document.write("Votre pr351nom est vraiment <b>Toto</b>")
15
x
Structures de contrôle
conditionnelles - Syntaxe
 if (condition) {
traitement_1
}
[else {
traitement_2
}]
16
 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
conditionnelles - Exemples
 if (nbr%2==0){
alert(nbr+" est pair")
}
else {
alert(nbr+" est impair")
}
17
 switch (jour){
case "1" : alert (" On est lundi"); break;
case "2" : alert (" On est mardi"); break;
case "3" : alert (" On est mercredi"); break;
case "4" : alert (" On est jeudi"); break;
case "5" : alert (" On est vendredi"); break;
case "6" : alert (" On est samedi"); break;
case "7" : alert (" On est dimanche"); break;
default : alert (" Entrez un chiffre compris entre 0 et 8 exclus");
}
X-debutants
Structures de contrôle
répétitives - Syntaxe
 while(condition){
traitement
}
 do{
traitement
}while(condition);
 for(initialisation; condition; itération){
traitement
}
18
Structures de contrôle
répétitives - exemples
 var nbr = ?;
while(nbr<0){
nbr = prompt("Entrez une valeur positive SVP");
}
 do{
var nbr = prompt("Entrez une valeur positive SVP");
}while(nbr<0);
 for(let i=1; i<51; i++){
document.write( i+" " );
}
19x
Fonctions
présentation
 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 :
var myVar = function(){ doSomething }
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
affichage, un test, etc.
20
Fonctions
exemples
/* Définition d’une fonction qui
retourne undefined */
function sayHello(nbr) {
for(i=1; i<=nbr; i++){
document.write('<br>Hello')
}
}
/* Appel de la fonction */
var nombre = 3;
sayHello(nombre);
/* Définition d’une fonction qui retourne une
valeur ≠ undefined */
var multiplier = function(a,b){
var prod = a*b;
return prod;
}
/* Appel de la fonction */
var nbr1 = 5, nbr2 = -7;
var produit = multiplier(nbr1,nbr2);
document.write(nbr1,' x ',nbr2,' =
',produit);
21
x
Evénements
présentation
 Événement = changement d'état de l'environnement qui peut
être intercepté par le code JavaScript
 Quelques évènements
– 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 texte associé est modifié
– load : la page est chargée dans le navigateur
– submit : le formulaire associé est soumis
22
Evénements
gestionnaire d’évènement
 Gérer un événement = associer une action à un événement.
« Si tel événement se passe, faire telle action »
 Syntaxes de la création d’un gestionnaire d'événement :
• Attribut HTML :
<balise onEvenement='Action_JS ou nomFonction();'>
Ex : <body onLoad="alert(‘la page est chargée !’);" >
• Propriété DOM 1 (Document Object Model level 1)
element.onevenement=function(){ };
Ex : <span id="clickme">Cliquez-moi !</span>
<script type="text/javascript">
var elt = document.getElementById('clickme');
elt.onclick = function() {
alert("Pourquoi m'avez-vous cliqué ?");
};
</script>
23
Evénements
gestionnaire d’évènement DOM 2
 Permet plusieurs actions pour un même évènement
 Syntaxe :
element.addEventListener('nomEvent', function(){ … }, false);
 Exemple
<span id="clickme"> Cliquez-moi pour me remplacer </span>
<script type="text/javascript">
var elt = document.getElementById('clickme');
elt.addEventListener('click', function() {
alert(" Merci de votre clic ! ");
}, false);
elt.addEventListener('click', function() {
document.write(" Merci du remplacement !");
}, false);
</script>
24
x
Objets du noyau
 Les objets du noyau proposent des propriétés et des
méthodes permettant d'effectuer facilement un grand
nombre de manipulations.
 Les objets du noyau JavaScript sont : Array, Boolean, Date,
Function, Math, Number, RegExp et String.
Objet Array
présentation
 Objet Array : créer et manipuler des tableaux
 Définition d’un tableau :
var nomTab = new Array();
 Initialisation :
nomTabl[ i ]= element;
 Définition et initialisation :
– avec Array() :
var nomTab=new Array( element_1 , element_2[, …] );
– littéral : var nomTab=[ element_1 [, element_2, …] ];
 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 tableau
Objet Array
quelques méthodes
 tab1.concat(tab2 [, tab3, …]) fusionne tab1 à d’autres tableaux
 .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
 .push(newElt1 [,newElt2, …]) ajoute des éléments à la fin et
retourne la nouvelle taille
 .shift()/.pop() supprime et retourne le premier/dernier élément
 .slice(deb [,fin]) retourne le tableau des éléments de l'indice deb
à l'indice fin-1
 .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é.
 .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.
Objet Array
quelques méthodes
 .reduce( fct(acc, val) ) applique une fonction qui est un
« accumulateur » et qui traite chaque valeur d'un tableau afin
de le réduire à une seule valeur
 .forEach( fct(val, indice) ) permet d'exécuter une fonction
donnée sur chaque élément du tableau
 .map( fct(val, indice) ) retourne un nouveau tableau composé
des images des éléments d'un tableau par une fonction donnée
en argument
 + d’infos :
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array
x
Objet String
Objet String : manipuler les chaînes de caractères
length : propriété qui stocke le nombre de caractères
.charAt(indice) retourne le caractère à la position indice
.indexOf(ssCh [,pos]) retourne la position d'une sous-chaîne en
partant de la position pos ou retourne -1 en cas d’absence
ch1.concat(ch2[, ch3, …]) fusionne ch1 à une ou +sieurs chaîne(s)
str1.localeCompare(str2) compare les chaînes str1 et str2 et
retourne -1 (str1< str2), 0 (str1= str2) ou 1.
.split(sep [, n]) retourne un tableau de n sous-chaînes de
caractères en utilisant le séparateur sep.
.replace(motif,newStr) remplace motif par newStr
motif est une expression régulière de syntaxe : /motif/[flag]
flag peut être égal à i (case insensitive) ou g (globale)
Plus d’info : http://www.w3schools.com/jsref/jsref_obj_regexp.aspx
Objets du navigateur
présentation
 Les objets du navigateur permettent d'agir sur l'état du
navigateur et des documents affichés.
 Quelques objets :
• navigator : informations sur le navigateur du visiteur
• window : propriétés concernant la fenêtre elle-même
mais aussi tous les objets-enfants contenus dans celle-ci
• location : informations sur l'adresse de la page affichée
• history : adresses des pages déjà visitées
• document : propriétés sur le contenu du document
(couleur d'arrière plan, titre, ...)
Objets du navigateur
hiérarchie
Objets du navigateur
accès à un objet
 La page du navigateur est hiérarchisée en objets
 Exemple
 objet fenêtre
 objet document
 objet formulaire
 Tout objet, après avoir été nommé, peut être désigné par
une arborescence
 Exemple
accéder au bouton radio "semaine", en écrivant :
[window.]document.formulaire.radio[0]
Objet Window
 Objet Window : gestion de la fenêtre
 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
 clearTimeout(id) : efface un delai défini par setTimeout()
 setInterval(fct, delai) : appelle la fonction fct chaque delai ms.
 clearInterval(id) : efface un delai défini par setInterval()
 open(url [, nom] [, options]) ouvre une fenêtre chargée avec la
page d'adresse url.
Exemple
myWin = open("contact.html" , "_blank", "menubar=no, status=no,
scrollbars=no, width=200, height=400");
x
Objet Location
 Objet Location : gestion de l’URL d’une page
 Forme général d’une URL :
protocol://host[:port]/pathname[?search][#hash]
Exemple :
http://www.animaux.com:8080/felins/search?q=tigre#resultat
 protocol, host, port, hostname, pathname, search, hash et href :
retournent le protocole, le nom d’hôte suivi du port, le port,
nom d’hôte, le chemin relatif, les paramètres (? inclus), le
fragment (# inclus) et l’url entière.
 assign(url) : charge le document d’adresse url
 replace(url) : idem à assign() sauf que la page remplacée ne sera
pas dans l'historique (pas de bouton « Précédent»)
 reload([forceget]): recharge le document (depuis le serveur si
forceget ou true est spécifié)
Objet History
 Objet History : gestion des pages déjà visitées
 length : nombre de pages dans l'historique
 back() : force le navigateur à réafficher la page précédente
Exemple :
<a href="javascript:history.back()">Page Précédente</a>
 forward() : force le navigateur à réafficher la page suivante.
 go(indice) : charger une page spécifique, identifiée par sa
position relative par rapport à la page en cours (d'indice 0).
indice est un nombre entier positif ou négatif.
Exemples :
history.go(0); recharge la page courante.
history.go(-2); recule de deux pages
history.go(1); charge la page suivante
Objet Document
présentation
 Objet document : gestion du contenu d’une page Web
 .title : titre du document
 .write() : écrire dans un document
 .createElement("nomElement") crée un élément du type spécifié
 .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 tous les éléments
satisfaisant au sélecteur CSS.
36
Objet Document
quelques sélecteurs CSS
Expression Retour
Y Tout contenu désigné par l’élément HTML Y.
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 une balise fermante
X).
#nomId Le 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.
37
Objet Document
méthodes d’accès (R/W) au contenu
 .appenChild("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 d'un élément38
Objet Document
exemple
<body onload="ajouteElement()">
<p> Le texte ci-dessus a été créé dynamiquement.</p>
<script type="text/javascript">
function ajouteElement() {
newDiv = document.createElement("div");
newDiv.innerHTML = "<h1>Salutations !</h1>";
para = document.querySelector("p");
document.body.insertBefore(newDiv, para);
}
</script>
</body>
39
x
Objet Form
présentation
 Objet Form : gestion d’un formulaire
 name : nom d’accès à tout élément et au formulaire
NB : tous les boutons radio doivent avoir le même nom
 length : nombre d'éléments à l'intérieur du formulaire
 submit() : soumet le formulaire
 value : valeur en cours d’un élément
 autofocus : avoir le focus automatiquement
 disabled : état d’activation d’un élément
 defaultchecked : état du bouton ou de la case cochée par défaut
 checked : état (coché ou non) d’un bouton ou d’une case
 selectedIndex : rang de l’option sélectionnée d’un menu
 defaultselected : option sélectionnée par défaut
 length : nombre d’options dans un menu
Objet Form
exemple
<p>
Entrez votre prénom : <input type="text" id="prenom">
</p>
<p>
Votre prénom est : <span class="echo"></span>
</p>
<script>
var prenomIn = document.getElementById("prenom");
var prenomOut = document.querySelector("span.echo");
prenomIn.addEventListener("keyup", function(){
prenomOut.innerHTML = prenomIn.value;
})
</script>
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
42

Contenu connexe

Tendances

Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6
Julien CROUZET
 

Tendances (20)

Servlets et JSP
Servlets et JSPServlets et JSP
Servlets et JSP
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Formation JPA Avancé / Hibernate gratuite par Ippon 2014
Formation JPA Avancé / Hibernate gratuite par Ippon 2014
 
Présentation de ECMAScript 6
Présentation de ECMAScript 6Présentation de ECMAScript 6
Présentation de ECMAScript 6
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Express node js
Express node jsExpress node js
Express node js
 
spring-api-rest.pdf
spring-api-rest.pdfspring-api-rest.pdf
spring-api-rest.pdf
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01Jsf 110530152515-phpapp01
Jsf 110530152515-phpapp01
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Développement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EEDéveloppement d'applications pour la plateforme Java EE
Développement d'applications pour la plateforme Java EE
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
 
Java 8 - collections et stream
Java 8 - collections et streamJava 8 - collections et stream
Java 8 - collections et stream
 
Support distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcastSupport distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcast
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 

Similaire à Introduction à JavaScript

Visual Studio 2008 Overview
Visual Studio 2008 OverviewVisual Studio 2008 Overview
Visual Studio 2008 Overview
Gregory Renard
 
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
DotNetHub
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieur
Fredy Fadel
 

Similaire à Introduction à JavaScript (20)

initiation au javascript
initiation au javascriptinitiation au javascript
initiation au javascript
 
introJavaScript.ppt
introJavaScript.pptintroJavaScript.ppt
introJavaScript.ppt
 
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
 
C++ 11/14
C++ 11/14C++ 11/14
C++ 11/14
 
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
 
Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6Une introduction à Javascript et ECMAScript 6
Une introduction à Javascript et ECMAScript 6
 
cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024cours developpement web javascript 2023/2024
cours developpement web javascript 2023/2024
 
POO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdfPOO_Java_BasesLangage.pdf
POO_Java_BasesLangage.pdf
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
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
 
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
 
Visual Studio 2008 Overview
Visual Studio 2008 OverviewVisual Studio 2008 Overview
Visual Studio 2008 Overview
 
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
 
Cours php
Cours phpCours php
Cours php
 
Javascript pour les Développeurs WEB
Javascript pour les Développeurs WEBJavascript pour les Développeurs WEB
Javascript pour les Développeurs WEB
 
Javascript un langage supérieur
Javascript un langage supérieurJavascript un langage supérieur
Javascript un langage supérieur
 
cour informatique niveau3 programmation en Python.pdf
cour informatique niveau3 programmation en  Python.pdfcour informatique niveau3 programmation en  Python.pdf
cour informatique niveau3 programmation en Python.pdf
 
De Java à .NET
De Java à .NETDe Java à .NET
De Java à .NET
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 

Plus de Abdoulaye Dieng

Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
Abdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

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
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
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

  • 1. Introduction à JavaScript M. DIENG Abdoulaye 1 Avril 2017
  • 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
  • 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  Traiter des chaînes de caractères avec l’objet String  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
  • 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. Evénements 9. Objets du noyau 10. Objets du navigateur 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.  En production, pour le chargement rapide d’une page : • inclure éventuellement JavaScript après le contenu ; • combiner plusieurs fichiers JavaScript en un seul fichier. 6
  • 7. Variable  Syntaxe de déclaration : var nomVariable;  Avec ES6 : let nomVar const NOM_CONSTANTE=valeur  Exemples let i; var taille, age=26; const TVA=0.18;  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
  • 8. Types primitifs undifined 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" • l’anti-slash () permet d’échapper ou de déspécialiser les caractères (', ", ). Ex : 'Il s'appelle Toto'  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
  • 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", 10); // 15 parseInt("546", 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é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 saisie par le visiteur qui appuie aussi sur OK • Retourne null si le visiteur clique sur Annuler ou appuie sur la touche Echap. • 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 : 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 : 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. • Une string et une expression sont concaténées par +. • Pour écrire sur plusieurs lignes, utiliser le caractère spécial de retour chariot n. • Remplacer tout caractère non-ASCII par son code latin-1 en octal précédé de l’anti-slash.  Exemple : 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 : document.write("Votre pr351nom est vraiment <b>Toto</b>") 15 x
  • 16. Structures de contrôle conditionnelles - Syntaxe  if (condition) { traitement_1 } [else { traitement_2 }] 16  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] }
  • 17. Structures de contrôle conditionnelles - Exemples  if (nbr%2==0){ alert(nbr+" est pair") } else { alert(nbr+" est impair") } 17  switch (jour){ case "1" : alert (" On est lundi"); break; case "2" : alert (" On est mardi"); break; case "3" : alert (" On est mercredi"); break; case "4" : alert (" On est jeudi"); break; case "5" : alert (" On est vendredi"); break; case "6" : alert (" On est samedi"); break; case "7" : alert (" On est dimanche"); break; default : alert (" Entrez un chiffre compris entre 0 et 8 exclus"); } X-debutants
  • 18. Structures de contrôle répétitives - Syntaxe  while(condition){ traitement }  do{ traitement }while(condition);  for(initialisation; condition; itération){ traitement } 18
  • 19. Structures de contrôle répétitives - exemples  var nbr = ?; while(nbr<0){ nbr = prompt("Entrez une valeur positive SVP"); }  do{ var nbr = prompt("Entrez une valeur positive SVP"); }while(nbr<0);  for(let i=1; i<51; i++){ document.write( i+" " ); } 19x
  • 20. Fonctions présentation  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 : var myVar = function(){ doSomething } 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 affichage, un test, etc. 20
  • 21. Fonctions exemples /* Définition d’une fonction qui retourne undefined */ function sayHello(nbr) { for(i=1; i<=nbr; i++){ document.write('<br>Hello') } } /* Appel de la fonction */ var nombre = 3; sayHello(nombre); /* Définition d’une fonction qui retourne une valeur ≠ undefined */ var multiplier = function(a,b){ var prod = a*b; return prod; } /* Appel de la fonction */ var nbr1 = 5, nbr2 = -7; var produit = multiplier(nbr1,nbr2); document.write(nbr1,' x ',nbr2,' = ',produit); 21 x
  • 22. Evénements présentation  Événement = changement d'état de l'environnement qui peut être intercepté par le code JavaScript  Quelques évènements – 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 texte associé est modifié – load : la page est chargée dans le navigateur – submit : le formulaire associé est soumis 22
  • 23. Evénements gestionnaire d’évènement  Gérer un événement = associer une action à un événement. « Si tel événement se passe, faire telle action »  Syntaxes de la création d’un gestionnaire d'événement : • Attribut HTML : <balise onEvenement='Action_JS ou nomFonction();'> Ex : <body onLoad="alert(‘la page est chargée !’);" > • Propriété DOM 1 (Document Object Model level 1) element.onevenement=function(){ }; Ex : <span id="clickme">Cliquez-moi !</span> <script type="text/javascript"> var elt = document.getElementById('clickme'); elt.onclick = function() { alert("Pourquoi m'avez-vous cliqué ?"); }; </script> 23
  • 24. Evénements gestionnaire d’évènement DOM 2  Permet plusieurs actions pour un même évènement  Syntaxe : element.addEventListener('nomEvent', function(){ … }, false);  Exemple <span id="clickme"> Cliquez-moi pour me remplacer </span> <script type="text/javascript"> var elt = document.getElementById('clickme'); elt.addEventListener('click', function() { alert(" Merci de votre clic ! "); }, false); elt.addEventListener('click', function() { document.write(" Merci du remplacement !"); }, false); </script> 24 x
  • 25. Objets du noyau  Les objets du noyau proposent des propriétés et des méthodes permettant d'effectuer facilement un grand nombre de manipulations.  Les objets du noyau JavaScript sont : Array, Boolean, Date, Function, Math, Number, RegExp et String.
  • 26. Objet Array présentation  Objet Array : créer et manipuler des tableaux  Définition d’un tableau : var nomTab = new Array();  Initialisation : nomTabl[ i ]= element;  Définition et initialisation : – avec Array() : var nomTab=new Array( element_1 , element_2[, …] ); – littéral : var nomTab=[ element_1 [, element_2, …] ];  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 tableau
  • 27. Objet Array quelques méthodes  tab1.concat(tab2 [, tab3, …]) fusionne tab1 à d’autres tableaux  .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  .push(newElt1 [,newElt2, …]) ajoute des éléments à la fin et retourne la nouvelle taille  .shift()/.pop() supprime et retourne le premier/dernier élément  .slice(deb [,fin]) retourne le tableau des éléments de l'indice deb à l'indice fin-1  .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é.  .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.
  • 28. Objet Array quelques méthodes  .reduce( fct(acc, val) ) applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'un tableau afin de le réduire à une seule valeur  .forEach( fct(val, indice) ) permet d'exécuter une fonction donnée sur chaque élément du tableau  .map( fct(val, indice) ) retourne un nouveau tableau composé des images des éléments d'un tableau par une fonction donnée en argument  + d’infos : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array x
  • 29. Objet String Objet String : manipuler les chaînes de caractères length : propriété qui stocke le nombre de caractères .charAt(indice) retourne le caractère à la position indice .indexOf(ssCh [,pos]) retourne la position d'une sous-chaîne en partant de la position pos ou retourne -1 en cas d’absence ch1.concat(ch2[, ch3, …]) fusionne ch1 à une ou +sieurs chaîne(s) str1.localeCompare(str2) compare les chaînes str1 et str2 et retourne -1 (str1< str2), 0 (str1= str2) ou 1. .split(sep [, n]) retourne un tableau de n sous-chaînes de caractères en utilisant le séparateur sep. .replace(motif,newStr) remplace motif par newStr motif est une expression régulière de syntaxe : /motif/[flag] flag peut être égal à i (case insensitive) ou g (globale) Plus d’info : http://www.w3schools.com/jsref/jsref_obj_regexp.aspx
  • 30. Objets du navigateur présentation  Les objets du navigateur permettent d'agir sur l'état du navigateur et des documents affichés.  Quelques objets : • navigator : informations sur le navigateur du visiteur • window : propriétés concernant la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci • location : informations sur l'adresse de la page affichée • history : adresses des pages déjà visitées • document : propriétés sur le contenu du document (couleur d'arrière plan, titre, ...)
  • 32. Objets du navigateur accès à un objet  La page du navigateur est hiérarchisée en objets  Exemple  objet fenêtre  objet document  objet formulaire  Tout objet, après avoir été nommé, peut être désigné par une arborescence  Exemple accéder au bouton radio "semaine", en écrivant : [window.]document.formulaire.radio[0]
  • 33. Objet Window  Objet Window : gestion de la fenêtre  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  clearTimeout(id) : efface un delai défini par setTimeout()  setInterval(fct, delai) : appelle la fonction fct chaque delai ms.  clearInterval(id) : efface un delai défini par setInterval()  open(url [, nom] [, options]) ouvre une fenêtre chargée avec la page d'adresse url. Exemple myWin = open("contact.html" , "_blank", "menubar=no, status=no, scrollbars=no, width=200, height=400"); x
  • 34. Objet Location  Objet Location : gestion de l’URL d’une page  Forme général d’une URL : protocol://host[:port]/pathname[?search][#hash] Exemple : http://www.animaux.com:8080/felins/search?q=tigre#resultat  protocol, host, port, hostname, pathname, search, hash et href : retournent le protocole, le nom d’hôte suivi du port, le port, nom d’hôte, le chemin relatif, les paramètres (? inclus), le fragment (# inclus) et l’url entière.  assign(url) : charge le document d’adresse url  replace(url) : idem à assign() sauf que la page remplacée ne sera pas dans l'historique (pas de bouton « Précédent»)  reload([forceget]): recharge le document (depuis le serveur si forceget ou true est spécifié)
  • 35. Objet History  Objet History : gestion des pages déjà visitées  length : nombre de pages dans l'historique  back() : force le navigateur à réafficher la page précédente Exemple : <a href="javascript:history.back()">Page Précédente</a>  forward() : force le navigateur à réafficher la page suivante.  go(indice) : charger une page spécifique, identifiée par sa position relative par rapport à la page en cours (d'indice 0). indice est un nombre entier positif ou négatif. Exemples : history.go(0); recharge la page courante. history.go(-2); recule de deux pages history.go(1); charge la page suivante
  • 36. Objet Document présentation  Objet document : gestion du contenu d’une page Web  .title : titre du document  .write() : écrire dans un document  .createElement("nomElement") crée un élément du type spécifié  .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 tous les éléments satisfaisant au sélecteur CSS. 36
  • 37. Objet Document quelques sélecteurs CSS Expression Retour Y Tout contenu désigné par l’élément HTML Y. 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 une balise fermante X). #nomId Le 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. 37
  • 38. Objet Document méthodes d’accès (R/W) au contenu  .appenChild("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 d'un élément38
  • 39. Objet Document exemple <body onload="ajouteElement()"> <p> Le texte ci-dessus a été créé dynamiquement.</p> <script type="text/javascript"> function ajouteElement() { newDiv = document.createElement("div"); newDiv.innerHTML = "<h1>Salutations !</h1>"; para = document.querySelector("p"); document.body.insertBefore(newDiv, para); } </script> </body> 39 x
  • 40. Objet Form présentation  Objet Form : gestion d’un formulaire  name : nom d’accès à tout élément et au formulaire NB : tous les boutons radio doivent avoir le même nom  length : nombre d'éléments à l'intérieur du formulaire  submit() : soumet le formulaire  value : valeur en cours d’un élément  autofocus : avoir le focus automatiquement  disabled : état d’activation d’un élément  defaultchecked : état du bouton ou de la case cochée par défaut  checked : état (coché ou non) d’un bouton ou d’une case  selectedIndex : rang de l’option sélectionnée d’un menu  defaultselected : option sélectionnée par défaut  length : nombre d’options dans un menu
  • 41. Objet Form exemple <p> Entrez votre prénom : <input type="text" id="prenom"> </p> <p> Votre prénom est : <span class="echo"></span> </p> <script> var prenomIn = document.getElementById("prenom"); var prenomOut = document.querySelector("span.echo"); prenomIn.addEventListener("keyup", function(){ prenomOut.innerHTML = prenomIn.value; }) </script> x

Notes de l'éditeur

  1. http://pigne.org/teaching/FullStackJS/
  2. Principe1. Un DOM est une description structurée d’un document HTML ou XML.2. Un DOM fournit une interface à cette structure et qui permet de modifier structure, contenuet style d’un document XML ou HTMLEn termes techniques:1. Un DOM est un arbre avec des nœuds2. Chaque nœud est un objet pour lequel il existe des méthodes et des propriétés (qu’on peut&amp;quot;lire&amp;quot; ou modifier).• Ces interfaces (classes, méthodes et propriétés) sont implémentés pour plusieurs langagescomme JavaScript, PhP 5, Java, Python, Perl, ActiveX, ... Dans ce contexte, on parle de&amp;quot;Language bindings&amp;quot;.• Les noms des interfaces, classes, méthodes et propriétés sont en principes les mêmes danstoutes ces implémentations (ce qui facilite la vie).
  3. [1,4,9].forEach( function(val){ console.log(++val) } ); [1,4,9].map( function(val){ return ++val } )
  4. [1,4,9].forEach( function(val){ console.log(++val) } ); [1,4,9].map( function(val){ return ++val } )