HTML CSS Jquery

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>
<td>Mohamed</td>
<tr>.
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
...
<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.
<form action="#" method="GET">
<fieldset>
<legend>Infos utilisateur</legend>
Prénom : <input type="text" name="prenom">
L'élément <fieldset> est utilisé pour regrouper les données du formulaires.

<input type="submit">
L'élément <select> définit une liste déroulante.
</fieldset>
L'élément <textarea> définit un champ de saisie à plusieurs lignes ( une zone de texte )
</form>
<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" >
Les attributs des formulaires

value, placeholder
readonly , disabled, required
autocomplete
Autofocus
formaction & Formmethod
min and max
Pattern : tél, url, email, date
HTML : Exercice 1
Modifier la page contact.html selon le modèle suivant :
HTML : Exercice 2
Créer un formulaire HTML composé des champs obligatoires suivants :
 CIN : une zone de saisie pour un identifiant dont la valeur saisie devra impérativement
commencer par une ou deux lettre suivi par un espace ou un tiret et se termine par 4 ou
5 chiffres
 Password : présente une zone de saisie pour un mot de passe contenant impérativement
plus de 6 caractères contenant impérativement au moins un chiffre, une lettre
majuscule, une lettre minuscule.
 Une dataliste de services qui propose les valeurs suivantes : invité, client, fournisseur,
administrateur, manager, controleur.
 Un bouton de validation
HTML : element bloc et inline
<div> <a><br>
<form> <button><em>
<h1>-<h6> <img><input>
<hr> <p> <label><script>
<table> <select><strong>
<ul> <textarea>
<video> <span>
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
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; }
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 {
margin-left: 20px;
Les pseudo-classes permettent de cibler
}
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>
Un élément positionné sticky est un élément qui se bas de page
comporte comme un élément positionné de façon relative </footer>
jusqu'à ce que son bloc englobant dépasse un seuil donné. </div>
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 /
column-reverse <section>
contenue
Retour à la flex-wrap Wrap / wrap-reverse </section>
ligne
Ajustement Justify-content Flex-start / flex-end / center <footer>
Alignement Align-items Flex-start / flex-end / center bas de page
</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: Objet Date
Création d’une date:
let d1 = new Date()
let d2 = new Date(year, month, day, hours, minutes, seconds, milliseconds)
console.log(d1) => Fri Jan 31 2020 09:21:25 GMT+0100 (UTC+01:00)
Les getters de l’objet date :

getFullYear(), getMonth(), getDate()
getHours(), getMinutes(), getSeconds()
getTime(), Date.now()
Les setters de l’objet date :

setFullYear(), setMonth(), setDate()
Exercice: Manipulation de l’objet date
Création d’une date:

Créer une classe javascript nomée Visionner.
Définir les méthodes suivantes :
 play : enregistre l’instant de début
 pause : enregistre l’instant de la pause et affiche la durée entre pause et play
 reset : initialise les différents compteurs
A chaque fois qu’on appel la méthode Pause, le système calcule la somme cumulative des
durées de visionnage.
Attacher les methodes de cette classe à des bouttons

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‘)
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');
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']
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.

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

fonction qui a été utilisée pour créer cet objet
let pays = new String(‘maroc’);
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',{
get: function() {
Abstraction :
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 propriété
Membre d’instance “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 }
}
&
let 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
Let 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.coleur = coleur;
this.demarrer = () => console.log("ce véhicule démarre");
Héritage ES6 }
rouler() {
console.log("ce véhicule roule");
}
}
class Camion extends Vehicule {
constructor(coleur, matricule, poids) {
super(coleur, matricule);
this.poids = poids;
}
}
c = new Camion("Red", "A123", 300);
Champs privés relatifs aux instances
class Vehicule {
#prix;
constructor(coleur) {
this.coleur = coleur
Getters et Setters ES6 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
Appliquer une classe à chaque evenement de survol
le DOM
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);
XHR.onreadystatechange = function () {
AJAX 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>' + e
lement.name
});
})
1. Sélectionner une partie du document.
2. Agir dessus
Objet jQuery = ensemble de noeuds du DOM

Ensemble de balises du document
Principe de jQuery 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());
Créer des animations sur les éléments : animate()

Effets de jQuery
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
Exemple :
Methodes de jQuery 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
prev() / prevAll() : retourne l’element precedent
Arboressance
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
prev() / prevAll() : retourne l’element precedent
Arboressance
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

HTML CSS Jquery

Transféré par

Informations du document

Description :

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Description :

Droits d'auteur :

HTML CSS Jquery

Titre original :

Transféré par

Description :

Droits d'auteur :

HTML 5 / CSS 3 / Javascript / Jquery

CSS: style et design

HTML signifie Hypertext markup language

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

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

pour rendre le contenu de la page

<balise attribut = valeur> Contenue </balise>

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

Les balises de titre de section La balise bouton

La balise liste

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

La balise image La balise lien hypertexte

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

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

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

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

Prénom : <input type="text" name="prenom">

L'élément <fieldset> est utilisé pour regrouper les données du formulaires.

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

Les attributs des formulaires

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

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

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

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

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

 height: 400px;  background-color:

fonction propriété valeurs

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

DIV => grille de 12 colonnes

Button : inline / block / lg

Table : striped / hover /bordered : dark

Forms : form-group / form-control

 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

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

Fonction de Parcour du tableau

console.log(d1) => Fri Jan 31 2020 09:21:25 GMT+0100 (UTC+01:00)

Les getters de l’objet date :

Les setters de l’objet date :

Création d’une date:

Attacher les methodes de cette classe à des bouttons

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

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

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

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

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

Supprimer une propriété d’un objet :

Héritage : Classique ou Prototypique

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

Pour obtenir le prototype d'un objet

 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

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

const cheval = {};

Toute modification du prototype sera immédiatement

Une page est un ensemble de