Scribd
Importer
259 vues86 pages

HTML CSS Jquery

Transféré par

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

HTML CSS Jquery

Transféré par

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

HTML 5 / CSS 3 / Javascript / Jquery

2019
HTML : structure du document

CSS: style et design


HTML : langage de balisage standard

HTML signifie Hypertext markup language

HTML décrit la structure d'une page Web

HTML est constitué d'une série d'éléments

Les navigateurs ne présentent pas les balises HTML, mais les

utiliser pour rendre le contenu de la page


HTML : Syntaxe

<balise attribut = valeur> Contenue </balise>

ELEMENT HTML

Exemple :
<p> ceci est un paragraphes </p>
Structure de la page HTML
<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<p>Bienvenue dans mon site web</p>
</body>
</html>

La partie visible du document HTML est entre <body>et </body>.


HTML : les éléments de base

Les balises de titre de section La balise bouton


<h1>SOMMAIRE</h1> <button>Valider</button>
<h2>I - Introduction</h2>
<h3>I.1 - 1er élément</h3>
<h3>I.1 - 2ème élément</h3>

La balise liste


La balise paragraphe <ul>
<p>Ceci est un paragraphe</p> <li>Casablanca</li>
<li>Rabat</li>
<li>Tanger</li>
</ul>
HTML : les attributs

Tous les éléments HTML peuvent avoir des attributs


Les attributs fournissent des informations supplémentaires au sujet
d' un élément
Les attributs sont toujours spécifiés dans la balise de début

La balise image La balise lien hypertexte


<img src="logo.jpg"> <a href="liste.html">Afficher la liste</a>
Target=“_blank”
Iiens internes
HTML : Exercice 1

Préparez votre espace de travail en créant un dossier « Projet_HTML » dans


lequel vous allez créer :
 Page HTML : index.html
 un sous-dossier « data »

Créer dans le sous-dossier « data » 3 pages html que vous nommerez :


 presentation.html
 realisation.html
 contact.html
HTML : Exercice 1
La page index.html est composé d’un menu sous forme de liste qui pointe sur les pages :
presentation.html, realisation.html, contact.html
Visuel central
Slogon
HTML : element table
<table border="1">
<tr>
<th>Prénom</th> Une table HTML est définie avec l'étiquette
<th>Ville</th>
<table>
</tr>
Chaque ligne de table est définie avec l'étiquette
<tr>
<tr>.
<td>Mohamed</td>
L’en- tête de table est définie avec l' étiquette <th>
<td>Casablanca</td> Par défaut, les titres des tableaux sont en gras et
</tr> centré. Une table de données / cellule est définie
<tr> avec l' étiquette <td>.
<td>Ali</td>
<td>Fes</td>
</tr>
</table>
HTML : Exercice 1
Modifier la page presentation.html selon le modèle suivant :
HTML : element Formulaire

L’ élément <form> définit une forme qui est utilisé


pour collecter l'entrée d'utilisateur:

<form action = “” method = “”> Plusieurs types d'éléments d'entrée, comme :


les champs de texte,
les cases à cocher,
</form>
Les boutons radio,
Les boutons submit
...
HTML : element Formulaire
<form action="#" method="GET">
Prénom : <input type="text" name="prenom">
<input type="submit">
</form>
<Input type = "text"> Définit un champ de saisie de texte d'une ligne
Chaque champ d'entrée doit avoir un name à soumettre.
GET est préférable pour les données non sécurisées, comme les chaînes de requête dans Google
Toujours utiliser POST si les données de formulaire contiennent des informations sensibles ou
personnelles.
HTML : element Formulaire

<form action="#" method="GET">


<fieldset>
<legend>Infos utilisateur</legend>
Prénom : <input type="text" name="prenom">
<input type="submit">
</fieldset>
</form>
L'élément <fieldset> est utilisé pour regrouper les données du formulaires.

L'élément <select> définit une liste déroulante.

L'élément <textarea> définit un champ de saisie à plusieurs lignes ( une zone de texte )
HTML : element Formulaire

<input type="button"> <input type="image">


<input type="checkbox"> <input type="number">
<input type="color"> <input type="password">
<input type="date"> <input type="radio">
<input type="email"> <input type="range">
<input type="file"> <input type="reset">
<input type="hidden" > <input type="search" >
HTML : element Formulaire

Les attributs des formulaires


value, placeholder
readonly , disabled, required
autocomplete
Autofocus
formaction & Formmethod
min and max
pattern (regexp)
HTML : element Formulaire

Les attributs des formulaires


value, placeholder
readonly , disabled, required
autocomplete
Autofocus
formaction & Formmethod
min and max
pattern (regexp)
HTML : Exercice 1
Modifier la page contact.html selon le modèle suivant :
HTML : element inligne et bloc

<div> <a><br>
<form> <button><em>
<h1>-<h6> <img><input>
<hr> <label><script>
<table> <select><strong>
<ul> <textarea>
<video>
HTML : Guide des bonnes pratiques
Déclarer le type de document : <!DOCTYPE html>
Gardez toujours votre code propre et lisible.
Ajoutez deux espaces d'indentation au lieu de la touche de tabulation.
Ajouter des lignes vides pour une meilleur séparation des blocs de code.
Évitez les longues lignes de code (max 80 caractères)
Utilisez les noms d'élément et attributs en minuscules : <a href ="lien.html">lien</a>
Les valeurs d'attribut entre double Quote <div class ="central">
Eviter les espaces entre attribut et sa valeur. <element attribut="valeur">
Ajouter l‘ attribut alt aux images : <img src= "casa.jpg" alt= "ville de casa">
Fermer tous les éléments HTML <p>Mon premier paragraphe <p> Mon deuxième paragraphe
Ne pas Omettre les balises <html> , <head> et <body>
HTML : Guide des bonnes pratiques
L' élément <title> est nécessaire en HTML5. Mettre un titre significatif: <title>Cours HTML</title>
Pour une meilleur indexation, définir la langue et le codage au début du document: <html lang="en-
US"> <meta charset="UTF-8">
Pour supporter le responsive design utiliser : <meta name="viewport" content="width=device-width,
initial-scale=1.0">
Utilisez une syntaxe simple pour relier les feuilles de style : <link rel="stylesheet" href="styles.css">

element { Placez l'accolade ouvrante sur la même ligne que le sélecteur séparé par un
propriete1: valeur1;
propriete2: "valeur 2"; espace.
} Utilisez deux espaces d'indentation et mettre un point virgule à la fin
chaque ligne.
Utilisez uniquement des doubles quottes autour des valeurs avec des
espaces
Placez le support de fermeture sur une nouvelle ligne.
CSS 3

2019
CSS: langage de balisage standard

 CSS signifie C ascading S tyle de les euilles


 CSS est un langage qui décrit comment les éléments HTML doivent
être affichés.
 CSS peut contrôler la mise en page de plusieurs pages Web à la fois
CSS: La syntaxe

Les sélecteurs CSS sélectionnent les éléments HTML à styler.


On peut diviser les sélecteurs CSS en cinq catégories:
sélecteurs simples :
 élément HTML,
 un identifiant
 une classe
CSS: Les sélecteurs simples
Les sélecteurs de type : Cibler les éléments qui correspondent au nom indiqué.
Exemple : div { height: 50px; border: 1px solid #000; }

Les sélecteurs de classe : Cibler les éléments en fonction de la valeur de leur attribut class.
Exemple : .header { background-color: green; }

Les sélecteurs d'identifiant : Cibler un élément en fonction de la valeur de son attribut id.
Exemple : #manager { background-color: blue; }

Le sélecteur universel : Cibler tous les nœuds d'un document.


Exemple : *

Les sélecteurs d'attribut : Cibler des éléments en fonction de la valeur d'un de leurs attributs.
Exemple : [href] { color:blue; font-weight: 700; }
CSS: Les combinateurs de sélecteurs
Le combinateur '+' selection des voisins direct
Exemple : div + img : cibler <img> qui suit immédiatement <div>.

Le combinateur '~' selection de voisins ayant même parent.


Exemple : p ~ img : cibler les éléments <img> qui suivent (immédiatement ou non) <p> et qui ont le
même parent.

Le combinateur '>' selection d'éléments fils


Exemple : ul > li : cibler tous <li> qui sont directement situés sous <ul>.

Le combinateur (espace) selection d'éléments descendants


Exemple : div span: cibler <span> situé à l'intérieur de <div>.
CSS: Les pseudo-classes input:checked {
Les pseudo-classes permettent de cibler margin-left: 20px;
des éléments selon une information d'état }

p:hover { input:focus {
font-size: 1.3em; background-color: lightyellow;
} border: 2px solid lime;
}
div:active {
background-color: lightgreen; th:nth-child(2n+3) {
} background-color: tomato;
height: 60px;
li:first-child { }
color: orange;
}
<nav>
CSS: Position menu
</nav>
La propriété position définit la façon dont un élément est
positionné dans un document. <div>
Position :absolute, relative ou sticky.
<header>
propriétés : top, right, bottom et left.
entete
</header>
Un élément positionné de façon relative est un élément
dont la position est relative par rapport à sa position actuelle. <section>
contenue
Un élément positionné de façon absolue est un élément </section>
dont la position est défini par rapport à son parent
<footer>
bas de page
Un élément positionné sticky est un élément qui se
</footer>
comporte comme un élément positionné de façon relative
</div>
jusqu'à ce que son bloc englobant dépasse un seuil donné.
CSS: Backgrounds et Borders
Ce module CSS permet de mettre en forme les bordures et arrière-plans des éléments.
Les arrière-plans peuvent être dessinés avec une couleur ou une image, redimensionnés.
Les bordures peuvent être décorées avec des lignes, former des angles (droits ou courbes).
Il est également possible de décorer les boîtes des éléments avec des ombres.

 height: 400px;  background-color:


 width: 50%;  background-image: url("");
 padding: 50px;  background-repeat:
 border: 10px solid #000  background-position:
 background-attachment:
 background-origin:
 background-size:
 border-radius:
 box-shadow
<header> Exercice : Styler la page formation.html
<ul class="menu">
<li><a href="">Home</a></li>
Indication :
<li><a href="">Realisations</a></li> Display : inline-block
<li><a href="">Présentations</a></li> Float
<li><a href="">Contact</a></li>
</ul>
</header>
<section>
<div class="gauche">
<span class="titreBloc">Formation en langage HTML</span>
</div>
<div class="milieu"> </div>
<div class="droite"> </div>
</section>
<nav>
CSS: FLEX menu
</nav>
 flex est une nouvelle technique de display.
 Propriétés du contenaire : <div>
<header>
fonction propriété valeurs entete
Affichage display flex </header>
Orientation Flex-direction row / column / row-reverse /
<section>
column-reverse
contenue
Retour à la flex-wrap Wrap / wrap-reverse </section>
ligne
Ajustement Justify-content Flex-start / flex-end / center <footer>
bas de page
Alignement Align-items Flex-start / flex-end / center
</footer>
Concentration Align-content Flex-start / flex-end / center </div>
CSS: FLEX
 flex est une nouvelle technique de display.
 Propriétés de l’élément:

fonction propriété valeurs


Alignement align-self Flex-start / flex-end / center
Classement Order 1 / 2 / 3 ….
Etalement flex 1 / 2 / 3 ….
CSS: Exercice FLEX

 Déplacer les éléments graphique en utilisant les propriété


du display flex :

https://flexboxfroggy.com
CSS: Exercice de synthèse
 Appliquer les styles css sur le fichier home.html
CSS: framewok BOOTSTRAP

DIV => grille de 12 colonnes

Button : inline / block / lg

Table : striped / hover /bordered : dark

Forms : form-group / form-control


JAVASCRIPT

2019
JAVASCRIPT: Les variables primitives

 let prenom = ‘med’ //String

 let age = 20 //number

 let estRejet = true // boolean

 let adresse= undefined // variable non définie

 let salaire = null // variable vide

Javascript est un langage de typage dynamique


JAVASCRIPT: Les variables referencés

 Tableaux

 Fonctions

 Objets
JAVASCRIPT: Manipuler les tableaux

Ajouter des éléments au tableau : Fonctions de transformation du


push() / pop() tableau
shift() / unshift() map(func)
reduce(func, initial)
Fonction de recherche :
indexOf/lastIndexOf(item, pos) Fontctions de Vérifictaion:
includes(value) Arr.some(fn)/arr.every(fn)
find/filter(func)
findIndex

Fonction de Parcour du tableau


forEach(func)
JAVASCRIPT: Les variables primitives

Création simple d’un objet (objet littéral) :

const connectionSimple = {
dataBase: 'formations',
etablir: function() {
console.log('la connection simple est réussie!');
}
}
JAVASCRIPT: LES OBJETS
Création d’un objet à partir de la fonction factory :

function createConnection(dataBase) {
return {
dataBase,
etablir: function() {
console.log('la connection via factory est réussie!');
}
}
}

let connectionFactory = createConnection('formations_factory‘)


JAVASCRIPT: LES OBJETS
Création d’un objet à partir du constructeur:

function Connection(dataBase) {
this.dataBase = dataBase;
this.etablir = function() {
console.log('la connection via constructeur est réussie!')
}
}

let connectionViaConstucteur = new Connection('formations_const


ructeur');
JAVASCRIPT: LES OBJETS
Parcourir un objet :

for(key in classeur) {
console.log(key + ' : ' + classeur[key])
}

Deux manières d’atteindre la propriété de l’objet :


classeur.nom
classeur[‘nom']
JAVASCRIPT: LES OBJETS
Un objet classique hérite des méthodes et propriétés de Object.prototype.
let etudiant = {
inscription: true
}
let mohamed = Object.create(etudiant);

Cependant, on peut volontairement créer des objets qui ne descendent pas de Object
let ali = Object.create(null)
Object.setPrototypeOf(ali, etudiant)

Les modifications du prototype d'Object impactent tous ces objets via la chaîne de prototypes,

Il est possible de surcharger les propriétés.


JAVASCRIPT: LES OBJETS

Chaque objet possède la propriété "constructeur" qui retourne la


fonction qui a été utilisée pour créer cet objet

let ville = ‘Casablanca'; ƒ String() { [native code] }


console.log(ville.constructor.name)

Les objets crées avec le même prenoms = ['med', 'ali'];


constructeur auront le même prototype. liste = [1, 2 , 3];
Lister les propriétés de l’objet :
Object.keys(classeur);

Vérification si l’objet posséde une propriété


Manipulation if (‘format' in classeur)
des objets
Ajouter une propriété à un objet :
classeur.dateCreation = ’01/01/2019’

Supprimer une propriété d’un objet :


delete classeur.dateCreation;
Le prototype est un object ordinaire

Héritage : Classique ou Prototypique

Chaque objet (sauf l'objet racine) a un prototype


Les prototype (parent).
des objets

Pour obtenir le prototype d'un objet


Object.getPrototypeOf(ville);
Les prototype
des objets
Objet
global
Principe de l’héritage multi niveau

let Ville = function(id, nom) {


this.id = id;
Ville
this.nom = nom;
}

maVille = new Ville(1, 'casa');


maVille
Les prototype des objets
Description d’une propriété d’un objet

Object.getOwnPropertyDescriptor(etudiant, 'inscription')

 Value : La valeur associée à la propriété (pour les descripteurs de données uniquement).

 Writable : la possibilité de changer la valeur associée à la propriété

 Configurable : la possibilité de supprimer la propriété

 Enumerable : la possibilité de lister la propriétés

 Get : Une fonction qui joue le rôle d'accesseur (getter) pour la propriété
 Set : Une fonction qui joue le rôle de mutateur (setter) pour la propriété
Les prototype des objets
Définir une nouvelle propriété ou de modifier une propriété existante

Object.defineProperty(etudiant , 'filiere' , {
value: 'LICDA',
enumerable:true,
configurable: false,
writable: true
})


function Livrable(format) {
let codage = 'utf-8';
this.format = format;
La visibilité des this.description = function() {
console.log('Format du livrable : ' + this.format );
propriétés d’un objet }
Object.defineProperty(this, 'codage',{

Abstraction :
get: function() {
return codage;
Cacher la complexité / les détails
},
Montrer que l'essentiel.
set: function(valeur) {
codage = valeur;
}
})
}

let classeur = new Livrable('excel‘)


Le constructeurs dispose d’une
Membre d’instance propriété “prototype” qui retourne un object

& Il sera utilisé comme prototype pour tous les objets crées
par ce constructeur
Membre de prototype
Object.prototype === Object.getPrototypeOf({})
Array.prototype === Object.getPrototypeOf([])
function Client(id){
this.id = id;
this.commander = function(){
console.log('le client ' + this.id + ' lance commande ' )
Membre d’instance }
}
&
c1 = new Client(10);
Membre de prototype c1.__proto__ === Client.prototype

La méthode commander() est un membre de l’instance


Qui peut se transformer en membre de prototype

c2 = Object.create(c1);
c2.id = 20

Client.prototype.payer = () => console.log('payement')


Tous les objets crées avec le même constructeur auront le
même prototype.

const cheval = {};


Membre d’instance const oiseau = {};
Object.getPrototypeOf (cheval) ===
& Object.getPrototypeOf (oiseau);
Membre de prototype
Une seule instance de ce prototype sera stockée dans la
mémoire.

Toute modification du prototype sera immédiatement


visible par tous les objets référençant ce prototype.

De préférence déclarer les méthodes au niveau du


prototype. On aura une seule instance des méthodes dans
la mémoire.
function Vehicule(matriculle) {
this.matriculle = matriculle;
this.demarrer = function () {
console.log('ce véhicule demarre')
}
Héritage de prototype }

Vehicule.prototype.rouler = function () {
console.log('ce véhicule roule');
}

function Camion(matriculle, capacite) {


Vehicule.call(this, matriculle)
this.capacite = capacite
}

c = new Camion('A123', 200)


class Vehicule {
constructor(coleur, matricule) {
this.coleur = coleur;
this.matricule = matricule;
this.demarrer = () => console.log("ce véhicule démarre"
Les classe ES6 );
}

rouler() {
console.log("ce véhicule roule");
}
}

v = new Vehicule("vert", "N101")


class Vehicule {
constructor(coleur, matricule) {
this.matricule = matricule;
this.demarrer = () => console.log("ce véhicule démarre");
}
Héritage ES6 rouler(params) {
console.log("ce véhicule roule");
}
}

class Camion extends Vehicule {


constructor(matricule, poids) {
super(matricule);
this.poids = poids
}
}

c = new Camion("Red", "A123", 300)


Champs privés relatifs aux instances

class Vehicule {
#prix;
constructor(coleur) {
Getters et Setters ES6 this.coleur = coleur
this.#prix = 1200
}

get prix() {
return this.#prix;
}

set prix(valeur) {
this.#prix = valeur;
}
}

v = new Vehicule(‘jaune')
L'instruction try...catch regroupe des instructions à exécuter
et définit une réponse si l'une de ces instructions provoque
une exception

let surfaceRectangle = (x, y) => {


Gestion des erreurs
if (Number.isNaN(x * y))
throw Error('les valeurs ne sont pas des nombres')

console.log(x * y + ' m2')

};

let data = ['a', 6]

surfaceRectangle(...data);
Manipuler le DOM

Une page est un ensemble


de balises imbriquées les
unes dans les autres.

On peut la représenter sous


une forme hiérarchisée
appelée arborescence.

L'élément <html> en
constitue la racine et contient
deux éléments
:<head> et<body>, qui
contiennent eux-mêmes
plusieurs sous-éléments.
Objet window
 Window.alert(), Window.prompt(), Window.confirm()
Manipuler le DOM
 Window.setInterval(function () {
//CODE A EXECUTER
}, 1000)

 Window.clearInterval(id)

Window.setTimeout
Window.clearTimeout
querySelector
•let droite = document.querySelector('.droite')
•let listeDiv = document.querySelectorAll('div')

Manipuler le DOM

droite.classList
droite.classList.contains('vert')
droite.classList.add()
droite.classList.remove()
listeDiv.forEach()
L’objet CSSStyleDeclaration

•droite.style.height = '400px‘

droite.style.backgroundImage =
Manipuler le DOM "url('images/logo.png')""url('images/logo.png') «

droite.style.backgroundRepeat = "no-repeat"

La propriété innerHTML

•droite.innerText = '<strong>Bonjour</strong> tt le monde‘

droite.innerText
Exercice

•Utiliser un timer pour alterner le changement de la couleur de la


div de droite
Manipuler le DOM
•Utiliser un timer pour alterner le changement de la couleur de
toutes les div

•Utiliser un timer pour alterner le changement de la couleur de


chaque div (une à la fois)

•indication: setInterval, classList, toggle


Le parcours du DOM

•ul.firstElementChild
•ul.lastElementChild
•ul.children

•droite.previousElementSibling
•gauche.nextElementSibling

•li.parentElement.removeChild(li.nextElementSibling)
•li.parentElement.insertBefore(ul.lastElementChild , li)
Exercice 1

Colorer toutes les cellules de la table en


diagonale par selection des <tr>

let tr = document.querySelectorAll("tr");

Indication :
forEach
Tr.children[i].style.backgroundColor
Exercice 2

Ecrire un script qui demande à


l’utilisateur de saisir une nouvelle ville et
l’ajoute à la fin d’une liste existante

Indications :
Les écouteurs d’événements

Appliquer une classe à chaque evenement de click

droite.addEventListener('click', () => droite.classList.add('vert'))


Manipuler

le DOM Appliquer une classe à chaque evenement de survol

listeDiv.forEach(element => {
element.addEventListener('mouseover', () => element.classList.toggle('vert'))
})

Les evenement du formulaire


prenom.addEventListener('keyup', evenement => console.log('keyup', evenement))

prenom.addEventListener('keydown', evenement => console.log('keydown', evenement))

form.addEventListener('submit', (evenement) => console.log('submit', evenement))


Exercice

Appliquer une classe à chaque evenement de click

droite.addEventListener('click', () => droite.classList.add('vert'))


Manipuler

le DOM Appliquer une classe à chaque evenement de survol

listeDiv.forEach(element => {
element.addEventListener('mouseover', () => element.classList.toggle('vert'))
})

Les evenement du formulaire


prenom.addEventListener('keyup', evenement => console.log('keyup', evenement))

prenom.addEventListener('keydown', evenement => console.log('keydown', evenement))

form.addEventListener('submit', (evenement) => console.log('submit', evenement))


AJAX
let listeUsers = (url) => {

let XHR = new XMLHttpRequest();


XHR.open('GET', url, true);

AJAX XHR.onreadystatechange = function () {


if (this.readyState === 4) {
JSON.parse(XHR.responseText).forEach(element => {
document.querySelector('ul').innerHTML += '<li>' + element.name
});
}
}

XHR.send()
}

listeUsers('https://jsonplaceholder.typicode.com/users')
AJAX : Asynchronous JavaScript And XML

Utilisation de l’objet XMLHttpRequest pour communiquer avec des serveurs.


Il peut envoyer et recevoir des informations sous différents formats, dont JSON et texte.
Mode « asynchrone » : peut communiquer avec le serveur sans recharger la page.

Créer un nouvel objet avec le constructeur : XMLHttpRequest();

Spécifier la méthode HTTP et l'URL à utiliser : open('GET', url, true);

La propriété onreadystatechange contient le gestionnaire d'évènement appelé lorsque la propriété


readyState est modifiée.

Récupération des données : responseText

Après la configuration de la requête XHR, il faut l’appeler explicitement : XHR.send()


AJAX : Asynchronous JavaScript And XML

Exemple : Visualisation des points d’arrets

let data;
listeUser(
"https://jsonplaceholder.typicode.com/users",
function(reponse) {
data = JSON.parse(reponse);
},
function(erreur) {
data = null;
}
);
Objet promesse
L'objet Promise est utilisé pour réaliser des traitements de façon asynchrone.
Une promesse représente une valeur qui peut être disponible maintenant, dans le futur
voire jamais.

let promise = new Promise(function(resolve, reject) {


// code à exécuter
});

L'exécuteur doit effectuer une action


puis appeler la résolution ou le rejet pour modifier
l'état de l'objet de promesse correspondant.

Un objet Promise est un proxy entre l'exécuteur


et les fonctions consommatrices,
qui recevront le résultat ou l'erreur :
.then, .catch

Exercice : exécuter AJAX en utilisant les promesses


L'API Fetch est une solution moderne qui vient remplacer
XHR pour rendre les requêtes HTTP asynchrones plus
simples en JavaScript.

fetch('https://jsonplaceholder.typicode.com/users')
Objet promesse .then(reponse => reponse.json())
.then(data => {
AJAX avec fetch data.forEach(element => {
document.querySelector('ul').innerHTML += '<li>' +
element.name
});
})
1. Sélectionner une partie du document.
2. Agir dessus

Objet jQuery = ensemble de noeuds du DOM


Principe de jQuery Ensemble de balises du document
Les objets jQuery se créent avec la fonction jQuery() abrégée en $() :
prend en entrée une chaîne de caractères contenant un
«sélecteur»
renvoie en sortie un objet jQuery

Exemple :
 $("div") renvoie un objet contenant tous les "div" du document.
 $("div").hide() cache tous les "div" du document.
Masquer et afficher les éléments HTML avec : hide() et show()

$(".cacher").click(() => $("div").hide());


$(".afficher").click(() => $("div").show());

Effets de jQuery Syntaxe :


$(selector).toggle(speed,callback);

Exercice :
Utiliser l’action toggle pour maquer et afficher une div alternativement.
La durée de l’action est de 1000 ms
A la fin de chaque action une alerte est déclenché qui affiche l’un des deux
messages :
message caché
message affiché

Autres effets : fadeIn() ,fadeOut(), fadeToggle()


 Créer un effet d’ouverture/fermeture : slideDown() et slideUp()

$(".ouvrir").click(() => $("p").slideDown());


$(".fermer").click(() => $("p").slideUp());

Effets de jQuery  Créer des animations sur les éléments : animate()


L’effet animate exige que le composant soit en position relative

Syntaxe : $(selector).animate({params},speed,callback);

Exercice : Effectuer un déplacement sous forme d’escalier


function escalier(limite) {
$("div")
.animate({ left: "+=20px" }, 1000)
.animate({ top: "+=20px" }, 1000, escalier);
}
$(".annimer").click(escalier);
 Arrêter une animation ou un effet avant qu'il ne soit terminé : stop()

Syntaxe : $(selector).stop(stopAll,goToEnd);

 Créer des animations sur les éléments : animate()


Effets de jQuery
$(".annimer").click(() =>
$("div")
.animate( { height: "20px" },1000 )
.animate( { height: "200px" },1000)
.animate({ left: "+=100px" }, 1000)
);

$(".arreter").click(() => $("div").stop(false, false));


$(".arreter").click(() => $("div").stop(true, false));
$(".arreter").click(() => $("div").stop(false, true));
text() : Récupère/affecte le contenu du texte de l’élément sélectionné
html() : Récupère/affecte le contenu html de l’élément sélectionné
val() : Récupère/affecte la valeur des champs de formulaire

Methodes de jQuery Exemple :


Afficher instantanément dans un paragraphe, les données saisie dans une
zone de texte

$("#prenom").keyup(() => {
$("p").html("bonjour " + $("#prenom").val());
});
 Ajouter de nouveau éléments HTML : prepend() et append()

Methodes de jQuery

Exemple :
Ajouter un element li au début de la liste
Ajouter un element li à la fin de la liste

 Retirer ou vider un éléments HTML : remove() et empty()

Exemple :
Vider la liste ol
Supprimer la liste ol
Supprimer le premier li
$(".action").click(() => $("li").remove("li:first"));
addClass() : ajouter une classe
removeClass() : supprime une classe
toggleClass() - basculer entre Ajout / Suppression
css() - Affecte/ Recupère l'attribut de style

Manipuler CSS
Exemple :
Modifier le style d’un paragraphe a chaque hover
avec jQuery
$("p").hover(function() {
$(this).css({ "background-color": "green", "font-size": "20px" });
});
parent() : retourne le parent de l’element
parents() : retourne tout les ancêtres
children() : retourne les enfants
siblings() : retourne les elements sémilaires
next() / nextAll() : retourne l’élément suivant
Arboressance prev() / prevAll() : retourne l’element precedent

avec jQuery
Exercice :
Identifier les cellules qui seront colorées
$("table tr td:first")
.parents("tr")
.next()
.children("td:last")
.css("background-color", "red");
parent() : retourne le parent de l’element
parents() : retourne tout les ancêtres
children() : retourne les enfants
siblings() : retourne les elements sémilaires
next() / nextAll() : retourne l’élément suivant
Arboressance prev() / prevAll() : retourne l’element precedent

avec jQuery
Exercice :
Identifier les cellules qui seront colorées
$("table tr td:first")
.parents("tr")
.next()
.children("td:last")
.css("background-color", "red");
Exercice de Synthèse
Réaliser un système de génération du bulletin

Vous aimerez peut-être aussi