Langages JavaScript

et JQuery
 Objectifs

• Faire un tour d’horizon du langage javascript, ses

propriétés et ses règles
• Prise en main du langage JQuery
• Appliquer JavaScript et JQuery sur des pages web
Plan
➢La syntaxe
➢DOM
➢Variable et types
➢Fonctions et objets
➢Blocs de contrôle
➢Événements et interactions
➢JQuery
Introduction
Langages de script
• 1995 : invention du JavaScript
• Langage de script exécuté dans le navigateur (client) et permettant un
dynamisme des pages
• Un langage de script permet d'écrire des programmes pour un environnement
d’exécution spécialisé qui interprète et automatise l’exécution de tâches qui
pourraient être exécutées une à la suite de l’autre dans l'environnement.
• Il est encapsulé dans la page HTML (ou dans un fichier lié) pour être exécuté sur
le client.
• Les environnements qui peuvent être automatisés par des scripts sont
• des applications logiciels,
• des pages web,
• des navigateurs web,
• les shell d’un SE, …
• Un langage de script est un langage appliqué à un domaine spécifique dans un
environnement particulier. On parle souvent de langage de très haut niveau: ils
opèrent d’une façon abstraite.
 Pourquoi JavaScript ?
• HTML est un langage statique
• Les capacités dynamiques de CSS sont très limitées
• Ne répondent pas à certains besoins : répondre aux
interactions, traitement, boucles,…
• JavaScript a été proposé dans ce contexte
• JS est un langage interprété par le navigateur
• JS a été créé par Netscape Communications
Que peut faire JS ?
• Afficher des messages
• Valider les formulaires
• Faire des calculs
• Faire des animations
• Détecter le navigateur et son potentiel
• Interagir avec les serveur à travers les services web et AJAX
Intégrer du JS dans une page web
• Intégrer le code Javascript directement dans les tags de script <script>
et </script>.
• Déclarer le code Javascript dans un fichier JS et appeler celui ci dans
la balise <script> à l'aide de l'attribut src
• Les fichiers JavaScript ont généralement l’extension « js »
Déclarations JavaScript
Les langages du web : JavaScript
Avantages et Inconvénients
• Avantages :
– Plus grande convivialité coté client
• Inconvénients :
– Compatibilité entre les navigateurs
– Problème de sécurité
– Désactivation du JavaScript (~10% des navigateurs)
Introduction au DOM
• JS interagit avec la page à travers une structure appelée « DOM »
accessible via une variable appelée « document »
• À travers le DOM, on peut accéder à un ou plusieurs éléments. Pour
accéder à un élément par son « id », utiliser « GetElementById »
• Si un élément HTML a un « id », alors, une variable est
automatiquement créée pour lui
Syntaxe
Instructions
• La syntaxe JavaScript ressemble à la famille C, C++, Java ou C# avec
des spécificités
• Un script JS est composé de plusieurs instructions
• Les instructions peuvent être des déclarations, des opérations,
• Les instructions se terminent par « ; »
• Une instruction peut se trouver sur plusieurs lignes
 Variables
• Les variables sont déclarées avec le mot clé var
var a;
var a=5;
var a= "hello";
var a=3.14;
• Le type est automatiquement déduit par l’interpréteur
• Quand c’est possible, le moteur JS effectue automatiquement les
conversions
• Pour convertir une variable, utiliser parseInt et parseFloat
Fonctions

• Les fonctions sont déclarées avec le mot clé function

• Les instructions sont délimitées par des accolades
• Le type de retour est automatiquement déduit par le mot
clé « return » sinon pas de type de retour
• Pour passer l’instance de l’objet concerné, utiliser « this »
Exemple
DOM
DOM (Document Object Model)
• Un document HTML est structuré sous forme d’une arborescence
appelée DOM
• Chaque élément de cette arborescence est appelé « nœud »
• Quand un nœud est un sous-élément d’un autre nœud, il est appelé «
enfant » et son conteneur « parent »
• Deux nœuds de même niveaux sont appelés « frères » (siblings)
• Le texte est une forme de nœud appelé « texte simple »
DOM - Exemple
document

html

head body

Title h1 P

HTML Bienvenue
Test DOM
DOM dans TDW
DOM – Exemple (2)
Propriétés / Méthodes des nœuds
Fonction Description
nodeName Nom du nœud
nodeType 1 balise normale, 3 texte simple, 9
document
nodeValue Valeur d’un nœud texte
innerHTML HTML à l’intérieur du nœud
innerText Texte brut à l’intérieur du noeud
Id Id de l’élément
className Nom de la classe de l’élément
firstChild Premier enfant
lastChild Dernier enfant
style Accède au style de l’enfant
 Propriétés / Méthodes des nœuds
Fonction Description
childNodes Tableau contenant tous les enfants
previousSibling Frère précédent
nextSibling Frère suivant
appendChild(elt) Ajoute un nouvel enfant au parent
insertBefore(elt, eltAvant) Insère un élément avant un autre élément
replaceChild(nouveau, ancien) Remplace un élément par un nouvel
élément
removeChild(enfant) Supprime l’enfant
hasChildren() Indique si l’élément possède des enfants
ou non
cloneNode() Clone un élément
attributes Tableau des attributs de l’élément
Style d’un noeud
• Toutes les propriétés CSS sont accessibles via la
propriété « style » d’un nœud
• Par exemple : [Link] = 'yellow';
Propriétés / Méthodes de l’objet document
Fonction Description
getElementById(id) Renvoie un élément par son id
getElementsByTagNam e(balise) Renvoie la liste des éléments du document
dont la balise est « balise »
createTextNode(texte) Crée une balise texte
createElement(balise) Crée une balise HTML
getElementsByClassName(className) Renvoie la liste des éléments par nom de
classe
Fonctions et Objets
Fonctions
• Une fonction est déclarée par le mot clé « function »
• Une fonction peut avoir 0,1 ou plusieurs paramètres
• Si une fonction renvoie un résultat, on utilise le mot
clé « return »
• L’implémentation de la fonction se fait en mettant les
instructions entre accolades
Appel de Fonctions

• L’appel d’une fonction se fait en utilisant son nom et

les paramètres entre parenthèses
• Si un paramètre n’est pas fournir, l’interpréteur lui
donne la valeur « undefined »
• Utiliser le paramètre || pour affecter des valeurs par
défaut
Exemple
Objets
• Tout dans JavaScript est objet : nombre, chaine et tout autre élément
• Quoique l’objet est tout le temps utilisé, JS n’est pas orienté objet, la
notion de classe n’existe pas
• Un objet est caractérisé par un état représenté par ses propriétés
• Un objet est caractérisé par son comportement représenté par ses
méthodes
Déclaration d’objets
• JS permet de déclarer les objets de 3 manières
• Une déclaration en utilisant « new Object() »
• Une déclaration directe
• Une déclaration en utilisant les fonctions
Déclaration des objets avec
l’opérateur « new »

• Créer une instance d’un objet en utilisant « new

Object »
• Affecter les propriétés de l’objet
• Affecter les méthodes de l’objet
Déclaration des objets avec l’opérateur «
new », Exemple
Déclaration directe des objets

• JS permet de déclarer directement des objets sans

passer par l’opérateur « new »
• Cette syntaxe décrit un objet sous forme d’accolades,
de propriétés et de méthodes
Déclaration directe des objets, Exemple

var employe = {
nom: « siham »,
prenom: « boukhalfa »,
echelon: 1,
salaire: function (section) {
return [Link] * section * 15000;
}
};
Déclaration des objets en utilisant les
fonctions

• Une fonction permet de déclarer un objet

• L’objet peut ensuite être directement instancié en
utilisant l’opérateur « new »
Déclaration des objets en utilisant les
fonctions, exemple
Utilisation des objets

• Pour accéder à une propriété ou une méthode d’un

objet, utiliser le nom de l’objet et le nom de la
propriété / méthodes séparés par « . »
• Le mot clé « with » permet de simplifier l’utilisation
d’un objet en accéder directement à ses propriétés
Utilisation des objets - exemple
var e = new Etudiant(« siham", 18, 11);
[Link] = 16;
alert([Link]());
with (e) {
noteIGL = 11;
noteTDW = 19.5;
alert(Moyenne());
}
Extension d’un objet
• JS permet d’étendre des définitions d’objets ou des types déjà existants
en ajoutant de nouvelles propriétés ou de nouvelles méthodes
• Pour étendre un objet, utiliser le mot clé « prototype »
Extension d’un objet - Exemple
Objets prédéfinis
• L’objet « Math » fournit des utilitaires mathématiques
• L’objet « String » gère les chaines de caractères
• L’objet « Date » gère la date et l’heure
Blocs de contrôle
L’instruction conditionnelle
• L’instruction conditionnelle est « if »
• La condition est une expression booléenne entre parenthèse
• Un bloc « else » exprime le sinon. Il est facultatif.
Syntaxe
if (condition)
{
I1();
I2();
}
Else
{
I3();
I4();
}
Conditions multiples

• Lorsque plusieurs conditions sont requises, il est

nécessaire de faire plusieurs combinaisons de if/ else
qui réduit la lisibilité du code.
• JS dispose de l’instruction « switch » qui permet de
simplifier le multi-branchement conditionnel
Syntaxe switch
 Boucles for
• Une boucle « for » est utilisée lorsque le nombre d’itérations est à
priori connu
• Elle est composée de trois compartiments : déclaration et valeur
initiale, condition et instruction d’incrément
Syntaxe for
Boucles while et boucles do/while
• Une boucle « while » est utilisée lorsqu’on ne connaît pas à priori le
nombre d’itérations. Elle est définie par une seule condition.
• La boucle « do/while » est similaire à while sauf que les instructions
sont exécutée au moins une fois.
Syntaxe while
Syntaxe do/while
Instructions spéciales « boucles »
• L’instruction « break » permet de sortir d’une boucle avant que la
condition de terminaison ne soit satisfaite.
• L’instruction « continue » permet d’interrompre l’exécution de la
boucle pour l’incrément en cours et passe au prochain incrément
Parcourir un objet
• L’instruction « for ..in » permet de parcourir un objet en obtenant
toutes les propriétés de cet objet
• Pour obtenir la valeur d’un objet, utiliser l’opérateur d’indexation
for..in Syntaxe
Evènements et interactions
Introduction aux évènements
• Les évènements représentent des fonctions appelées en réaction à une
action de l’utilisateur : souris, clavier,….
• La fonction répondant à un évènement est appelée « gestionnaire
d’évènement »
• Les évènements sont par convention préfixés par « on ».
Par exemple : « onclick »
Affectation d’un gestionnaire d’évènement

• L’affectation d’un gestionnaire d’évènement à un objet

se fait en renseignant certains attributs de cet objet
correspondant à l’évènement
• La valeur de l’attribut correspond à l’appel d’une
fonction JS
Affectation de Gestionnaire - Exemple
Affectation dynamique de gestionnaire
d’évènements

• Les gestionnaires d’évènement peuvent être affectés

dynamiquement (par code)
• Ceci se fait simplement en affectant une fonction au
gestionnaire en utilisant l’opérateur d’affectation
Affectation dynamique de Gestionnaire
Exemple
L’objet « évènement »

• Lorsqu’un évènement a lieu, un objet de type « event

» est passé au gestionnaire
• L’objet contient des propriétés relative au contexte de
l’évènement (par exemple coordonnées)
L’objet « event » - Propriétés
Propriété Description
modifiers Touches spéciales (Par exemple Ctrl ou Alt)
button Bouton gauche ou droit de la souris (0 ou 2)
pageX, pageY Coordonnées cancelable Indique si l’évènement peut
être annulé
target Objet relatif à l’évènement
charCode Relatif aux évènements clavier, code caractère
keyCode Relatif aux évènements clavier, code touche
altKey Indique si la touche « alt » est pressée
ctrlKey Indique si la touche « ctrl » est touchée
preventDefault() Annule l’évènement s’il est annulable
Evènements de la souris
Evènement Description
onclick Clic simple de la souris
Ondblclick Clic double
onmousedown Clic de la souris sur un élément
onmouseup Quand l’utilisateur relache la souris
onmousemove Quand la souris est déplacée sur un élément

onmouseover Quand la souris entre dans l’espace d’un élément

onmouseout Quand la souris sort de l’espace d’un élément

Evènements des formulaires
Evènement Description
onchange Est provoqué au fur et à mesure que le
contenu d’un contrôle est changé
oninput Provoqué au fur et à mesure du
changement du contenu dans une zone de
texte
onfocus Provoqué lorsqu’un contrôle reçoit le
focus
onblur Provoqué lorsqu’un contrôle perd le focus
onsubmit Lorsque le formulaire est envoyé au
serveur
Evènements du clavier
Evènement Description
onkeydown Une touche est entrain d’être appuyée
onkeypress Une touche est appuyée
onkeyup Une touche est relachée
Evènements de la fenêtre
Evènement Description
onload Appelé lorsque la page est chargée
Onresize Lorsque la fenêtre est redimensionnée
onerror Lorsqu’une erreur se produit lors du
chargement d’une image
onabort Lorsque le chargement d’une image est
annulé
Interaction avec les fenêtres
Méthode Description
open() Ouvre une nouvelle fenêtre
close() Ferme la fenêtre
moveTo() Déplace la fenêtre
resizeTo() Redimensionne la fenêtre
moveBy() Déplace la fenêtre par rapport à la position
en cours
resizeBy() Redimensionne par rapport à la taille
actuelle
 Boîtes de dialogue

Méthode Description
alert(msg) Affiche un message sous forme de dialogue
confirm(msg) Message de confirmation. Renvoie true or false
selon la réponse de l’utilisateur (oui / non)
prompt(msg,val_defaut) Demande à l’utilisateur d’entrer une valeur
JQuery
Introduction
• Bibliothèque JavaScript adoptée par la majorité des
industriels : IBM, Netflix, Amazon, Dell, Twitter et
Microsoft
• JQuery facilite la manipulation du DOM en appliquant
des connaissances HTML, CSS ou JS
• JQuery permet de créer des scripts non obstrusifs
Avantage
• Economie de code (écrire moins, faire plus)
• Code non obstrusif (séparation de la structure du traitement);
• Compatibilité avec tous les navigateurs;
• Taille insignifiante du code;
• Manipulation HTML, CSS, évènements, animations, AJAX…etc.
Ajout JQuery aux pages HTML
Syntaxe
• La syntaxe de base de JQuery est sous la forme : $
(sélecteur). action ().
• un signe $ pour définir JQuery
• un (sélecteur) afin de trouver les éléments HTML
• une action() JQuery a effectuer
Syntaxe-exemple

• $(a).hide() : pour cacher les liens dans une pages HTML.

• $("#ID").hide() : pour cacher l'élément HTML dont l‘identifiant est «
ID ».
• $(".MaClass").hide() ; pour cacher tous les éléments appartenant à la
classe « MaClass »
• $(« this").hide() : pour cacher l’élément HTML courant.
Fonction Ready
• Permet d'éviter d'exécuter du code JQuery avant le chargement
complet de la page (erreurs de sélection d’éléments non encore
charger)
Exemple
Conflit d’Alias
• Plusieurs librairies JavaScript utilisent l’alias $ pour leurs fonctions.
• La fonction noConflict() spécifie une variable pour remplacer le $.
Sélecteurs JQuery
Syntaxe des sélecteurs JQuery
• La sélection des éléments se fait selon la syntaxe du langage CSS.
Exemple:
• $("p") sélectionne tous les éléments p
• $(" [Link]") sélectionne les éléments h1 appartenant à la classe
titre
• $(" span#ID") sélectionne le span ayant pour identifiant « ID »
• La sélection des attributs se fait selon la syntaxe XPATH.
Exemple:
• $("[name=‘par']") sélectionne tous les éléments possédant un
attribut href ayant pour valeur « par »
• $("[src$='.jpg']") sélectionne tous les éléments possédant un attribut
src dont la valeur se termine par « .jpg ».
• La sélection HTML se fait par la fonction html() et celle de CSS par la
fonction CSS().
Sélecteurs JQuery
Sélecteur Exemple Description

* $(" * ") Tous les éléments

Élément $(" p ") Tous les éléments « p »
#ID $(" #ID ") L’éléments avec l’identifiant « ID »
.Class $(" .MaClass ") Les éléments appartenant à la classe « Maclass »
Div p $(" div p ") Les « p » qui descendent de div
Div>p $(" div>p ") Les « p » qui descendent directement de « div »
:eq(index) $(" a:eq(2) ") Le deuxième élément « a »
:gt(index) $(" p:gt(4) ") Les « p » dont la position est supérieure strictement à 4
:lt(index) $(" li:lt(4) ") Les « li » dont la position est inférieure strictement à 4
:even $(" div:even ") Les « div » en position impaire
:odd $(" li:odd ") Les « li » en position paire
:not(s) $(" not(p) ") Tous les éléments sauf les « p »
Sélecteurs JQuery
sélecteur Exemple Description

:first $(" tr:first ") Le premier élément « tr »

:last $(" td:last ") Le dernier élément « td »
:animated $(" a:animated ") Les éléments « a » animés
:empty $(" input:empty ") Les « input » qui sont vides
:hidden $(" h2:hidden ") Les « h2 » qui sont cachés
:visible $(" img:visible ") Les « img » qui sont visibles
:contains(v) $(":contains(.dz)") Tous les éléments contenant la chaîne « .dz »
:input $(" :input ") Les éléments « input »
:text $(" :text ") Les éléments « text »
:radio $(" :radio ") Les éléments « radio »
Sélecteurs JQuery
Sélecteur Exemple Description

:selected $(" :selected ") Tous les éléments ayant l’attribut selected à
vrai
:checked $(" :checked ") Tous les éléments ayant l’attribut checked à
vrai
:enabled $(" :enabled ") Tous les éléments ayant l’attribut enabled à
vrai
[attribute] $(" [src] ") Les éléments ayant un attribut « src »
[attribute=val] $(" [src=[Link]] ") Les éléments ayant un attribut « src » qui a
une valeur « alger,jpg »
[attribute!=val] $(" [src!=[Link]] ") Les éléments ayant un attribut « src » qui a
une valeur différente de « alger,jpg »
[attribute$=val] $(" [src$=.jpg] ") Les éléments ayant un attribut « src » qui a
une valeur qui se termine par « .jpg »
Évènements et effets
sous JQuery
Introduction
• JQuery permet de simplifier l’affectation des évènements
aux éléments et élimine tous les problèmes
d’incompatibilité
• JQuery permet d’affecte un évènement de plusieurs façons
et de le désaffecter
• JQuery peut même affecter des évènements à des éléments
qui n’existent pas encore
Syntaxe
Fonctions de gestion des évènements
Fonction Description
click, Clic de la souris
hover Survol de la souris
bind(nom, fonction) Associe une fonction à un évènement
unbind(nom) Supprime un gestionnaire d’évènement
one(nom, fonction) Gestionnaire d’évènement qui ne
s’exécute qu’une seule fois
on(evt,selecteur,fonction) Attache un évènements aux éléments
sélectionnés (s’applique aussi aux
éléments créés dynamiquement)
trigger(evt,donnees) Déclenche manuellement un évènement

off(evt) Supprime le gestionnaire des éléments

Effets jQuery
Fonction Description

show() Affiche les éléments sélectionnés

hide() Cache les éléments sélectionnés

fadeto(val) Change l’opacité des éléments jusqu’à une certaine valeur
fadeIn() Rendre les éléments plus visible
fadeOut() Rendre les éléments plus invisible
animate() Anime les éléments à l’aide de propriétés CSS
delay() Définit un delai
stop() Arrête une animation
toggle() Donne un effet clignotant
slideup() Diminue la hauteur des éléments jusqu’à les rendre invisible
Slidedown() Augmente la hauteur des éléments
Manipulation HTML
• La fonction html() permet de changer le contenu d'un
élément qui est l’équivalent au innerHTML de
JavaScript.
• La syntaxe est la suivante : $(selector).html(contenu)

Sélecteur Description

appendTo(elt) Ajoute des éléments à un ensemble

insertAfter(elt) Insère un élément après un sélecteur
insertBefore(elt) Insère un élément avant un sélecteur
html(elt) Change le HTML interne d’un élément
Manipulation CSS
• La fonction CSS() permet de manipuler les propriétés
CSS à l’aide de jQuery
• .css(name,value) : fixe la valeur d'une propriété identifié
par name
• .css({properties}) : pour en fixer plusieurs propriétés.
Exemple:
• $("p").css("color", "black");
• $(“div").css({"background-color":“beige","font-
size":“150%"});
Fonction callback
• Une ligne de code peut être exécuté par le navigateur même si
l’actions liée à la ligne précédente n’est pas encore terminé. Cela peut
créer des erreurs. Pour éviter cela, vous pouvez créer une fonction dite
Callback.
• Une fonction Callback est une fonction qui est lancée après la fin de
l'action en cours d'exécution.
• La syntaxe est la suivante : $(selector).action(valeur,callback).
• Exemple:
AJAX sous JQuery
Introduction à AJAX

• AJAX ou Asynchronous Javascript And XML permet

d’interroger le serveur sans avoir à rafraîchir toute la
page
• Le web 2,0 est techniquement basé sur AJAX
• Écrire du code AJAX directement est un peu
fastidieux
AJAX avec JQuery
• JQuery facilite l’intégration d’AJAX dans les applications web
• La fonction AJAX est une fonction utilitiaire ($.ajax)
• Les deux alias $.get et $.post permettent de faire des requêtes AJAX
en mode GET ou POST
 Fonctions ajax
Fonction Description
$(selecteur).load(url,data,callback) Requête de chargement partiel d’éléments
distant à l’intérieur des éléments sélectionnés.
$.ajax(options) Fonction détaillée qui gère tous les paramètres
AJAX
$.get(url,data,callback,type) Requête AJAX en mode GET
$.post(url, data,callback,type) Requête AJAX en mode POST
$.getJSON(url, data, callaback) Requête de données en format JSON à parti du
serveur

(url) : l'URL des éléments à charger

(data) : les données à envoyer au serveur sous la forme clé/valeur
(callback) : fonction Callback à exécuter lorsque les données sont totalement chargées
(type) : valeur de retour de la requête (html, xml, json, script,text)
(options) : toutes les options (sous la forme clés/valeur)
Exemple