Cheats
Tutos

L'antisèche de JavaScript - Bloc 2

Le langage JavaScript

Généralités
Outils d'édition
Éditeur en ligne JS.do ou IDE PHPStorm
Java vs JavaScript
Langages qui ne partagent presque que le nom et une syntaxe inspirée du C
Types de variables
Les différents types primitifs et les objets
Conversion de types
Implicite et fonctions de conversion: parseInt, ...
Déclaration et portée
let, var, ...
Déclaration de constantes
const
Mécanisme de hoisting
L'utilisation de fonction et variable avant déclaration
Mode "strict"
Imposer de bonnes pratiques
Le mot-clef this
Ses différentes significations en fonction du contexte
Interpolation d'expression/variable
`chaine formatée contenant des ${expressions}`
PHPStorm et Babel
Transpilation du code JS
JSDoc
Documentation de fichiers, modules, classes et fonctionschsh-jsdoc
Opérateur de coalescence des nuls
opérateur "??" qui retourne la première valeur ni null ni undefined

Structures de contrôles
Conditionnelles
if, if else, opérateur ternaire "?", switch
Itératives
while, do while, for
Particulières
With (obsolète) et debugger...
Les exceptions
bloc try{}catch(){}finally{} et objet Error...

Fonctions
Déclaration
mot-clef function, déclaration par expression,...
Fonctions fléchées
Opérateur =>
Valeurs par défaut des arguments
Implicite et fonctions de conversion: parseInt, ...
Fonctions imbriquées
la déclaration d'un fonction dans une autre
Fonction de 1ier ordre
Une fonction passée en argument
Fonction d'ordre supérieur
Une fonction qui retourne une fonction
Les fonctions génératrices
Mots-clefs function*, yield et yield*
Les fermetures (closures)
L'objet fonction et son enchainement de portées à la déclaration

Tableaux
Déclaration et accès à un élément
La création de tableaux et accès au iième élément [i]
Longueur d'un tableau
Propriété tab.length
Ajout d'un élément
tab[tab.length] ou tab.push()
L'opérateur spread ...
Scinder un tableau ou un objet itérable en ses valeurs individuelles
Supprimer un élément
delete, pop, splice, ...
La méthode forEach
Appliquer une fonction à chaque élément
La méthode map
Obtenir un tableau en appliquant une fonction à chaque élément
La méthode filter
Filtrer les éléments d'un tableau
Les méthodes find et findIndex
Trouver la valeur ou la position d'un élément
Les méthodes some et every
Déterminer si un ou tous les éléments vérifient des critères
Les méthodes reduce et reduceRight
Réduire un tableau en une valeur accumulative
Le tri de tableaux
array.sort(function comparator(a,b){})

Objets
Initialisation
Affectation d'ensemble de propriété-valeur
Appel d'une propriété ou d'une méthode
obj.propriete ou obj["propriete"]
Supprimer une propriété
Fonction delete(obj.propriete)
Vérification de l'existence d'une propriété
Méthode obj.hasOwnProperty("propriete")
Accès conditionnel à une propriété
obj?.propriété retourne la valeur ou undefined si inexistante
Parcours des propriétés
Méthode Object.keys(obj)
Format JSON
Sérialisation JSON.stringify() et désérialisation JSON.parse()
Clonage d'objet
Clonage en profondeur (via JSON) ou non (Object.assign({}, obj) ou {... obj})
Affectation par décomposition
Décomposition d'un objet en ses propriétés
Invocation indirecte de méthodes
Les méthodes fct.call(obj, args...) et fct.apply(obj, [args...])

Collections
Itérateurs et itérables
 
Conversion itérable en tableau
Array.from(itérable)
Les ensembles
Objet Set
Les dictionnaires
Objet Map

Classes et modules
Instance d'objet
En JS, les objets sont liés à une chaine de prototypes
Création d'instances d'objet
Les différentes manières d'instancier des objets
Classes
Les classes depuis ES6
Propriétés et méthodes statiques
L'utilisation du mot-clef static
Héritage
L'utilisation du mot-clef extends
Accesseurs (get) et mutateurs (set)
Une méthode pour lire ou modifier une propriété ou variable locale
Modules (version ES6+)
Les mots-clefs import et export
Modules conditionnels(version ES2020+)
import() retourne une promesse
Modules (version Node.js)
La méthode module.exports et la fonction require

Fonctions asynchrones
Principes
JS est un langage monothread avec une "pile" des fonctions à exécuter
Fonctions callback
Fonctions appelées avec le résultat d'une fonction asynchrone
Promesses
Les objets Promise
Chaînage de promesses
Mise en oeuvre de promesses successives
Async/await
Écrire du code asynchrone comme du code séquentiel

La librairie jQuery

Généralités
Librairie jQuery
Importation d'une version locale ou via CDN
Déclaration des scripts
Exécution des scripts après le chargement de la page
Sélecteurs
Syntaxe similaire à CSS
Objet jQuery vs élément de DOM
un objet jQuery contient une collection d'éléments DOM
Parcours des éléments DOM d'un objet jQuery
.each()
Sérialisation d'un objet/tableau version url
$.param(objet)

DOM
Parcours du DOM
parent(), children(), find(), ...
Lire/Modifier du contenu texte
.text()
Lire/Modifier du contenu HTML
.html()
Lire/Modifier la valeur d'un champ
.val()
Ajouter des éléments dans le DOM
.append(), .preprend(), .appendTo(),...
Supprimer du contenu ou un élément
contenu: .empty(), élément: .remove()
Modifier la CSS
.css("style", "valeur"), .addClass("classe"), .removeClass("classe")
Afficher/Masquer un élément
.show(), .hide(), .toggle()
Animations
.animate({styles CSS})

Événements
Ajouter un gestionnaire d'événements
.on("event", function)
Retirer un gestionnaire d'événements
.off("event")
Propagation d'événements
stopPropagation(), ...

AJAX avec jQuery
$.load()
Placement du contenu d'une ressource HTML dans un élément du DOM
$.script()
Chargement d'un script JS distant et exécution dans la portée globale
$.getJSON()
Chargement d'une ressource distante et interprétation de son contenu au format JSON
$.get() & $.post()
Requêtes en mode GET ou POST personnalisables
$.ajax()
La méthode sur laquelle reposent les autres méthodes AJAX de jQuery
$.ajax() et promesses
L'implémentation des promesses selon jQuery
Envoi de données de formulaire
par sérialisation ou via l'objet FormData

L'API d'HTML5

Généralités
inclure du JS dans une page web
<script>, fichier externe, attribut HTML ou via URL
Contraintes de sécurité
Same Origin Policy
Par défaut, un document ne peut être lu que par un script de même origine (protocole, domaine, port...)
Cross-Origin Resource Sharing
Autoriser l'accès à un document par un script d'une autre origine (Access-Control-Allow-Origin, ...)
Synchronisation et modules
defer, async et type="module"

DOM
Objet Window
Pour un script JS exécuté dans un navigateur, le contexte global est l'onglet (objet Window)
Objet document
Objet JS représentant le DOM
Document Object Model
Représentation mémoire en arbre des balises HTML et leur contenu
Sélection d'éléments du DOM
getElementById(), getElementsByTagName(), querySelector(), ...
Lire/Modifier du contenu HTML
.html()
Ajouter des éléments dans le DOM
createElement(), createTextNode(), appendChild(),...
Supprimer du contenu ou un élément
replaceChild(), removeChild(),...
Modifier la CSS
.style.proprieteCSS, .className, ...

Événements
L'interface Event
Les informations sur l'événement généré
Ajouter un gestionnaire d'événements
.addEventListener("event", function())
Comprendre les événements
la propagation, la capture, ...

Stockage: Cookie
Les cookies
Principes d'utilisation et fonctionnement d'un cookie
Créer et modifier un cookie
document.cookie
Lecture d'un cookie
decodeURIComponent(document.cookie) ...
Suppression d'un cookie
rendre le cookie obsolète...

Stockage: SessionStorage
Les données en session
Espace, unique par onglet, de données textuelles temporaires
Créer et modifier une donnée
sessionStorage.setItem("cle", "valeur")
Lecture d'une donnée
sessionStorage.getItem("cle")
Suppression d'une donnée
sessionStorage.removeItem("cle")
Suppression de toutes les données
sessionStorage.clear()

Stockage: LocalStorage
Les données en local
Espace, unique par domaine, de données textuelles permanentes
Créer et modifier une donnée
localStorage.setItem("cle", "valeur")
Lecture d'une donnée
localStorage.getItem("cle")
Suppression d'une donnée
localStorage.removeItem("cle")
Suppression de toutes les données
localStorage.clear()

Stockage: IndexedDB
Base de données locale
Espace, unique par domaine, d'objets JS permanents
Syntaxe et utilisation
L'utilisation d'IndexedDB expliquée et illustrée

Canvas
Canvas API
Réalisation de dessins dynamiquement dans une balise <canvas>
Dessiner des rectangles
.strokeRect(), .fillRect(), .clearRect(), ...
Dessin à main levée (chemin)
.beginPath(), .closePath(), .stroke(), ...
Éléments d'un chemin
.lineTo(), .moveTo(), .arc(), .arcTo(), .quadraticCurveTo(), .bezierCurveTo(), ...
Styles de trait de dessin
.strokeStyle(), .lineWidth(), .setLineDash(), ...
Écriture de textes
.strokeText(), .fillText(), ...
Taille de textes
Objet TextMetrics, .measureText(), ...
Utilisation d'images
Objet Image, .drawImage(), ...
Changement de repère
.translate(), .rotate(), .scale(), ...
Sauvegarde et restauration de l'état du canevas
état, .save(), .restore(), ...

AJAX
Modèle AJAX
Requêtes HTTP pour mises à jour partielles de pages
XMLHttpRequest
Requêtes régulières du client
Envoi de données de formulaire
en GET ou en POST
Terminaison de requête AJAX
XMLHttpRequest.timeout, XMLHttpRequest.abort()
Requête AJAX avec <script>
Envoi au format JSONP
Requête AJAX avec API fetch
fetch(url, options) retourne une promesse

Comet
Modèle Comet
Actualisation du client à l'initiative du serveur
Polling
Requêtes régulières du client
SSE
Principes du Server Sent Event API et due côté serveur
SSE - Client
Server Sent Event côté client
WebSockets
Communication bidirectionnelle client-serveur

Rappel Bloc1: Le langage HTML5

Environnement de travail
Serveur Dartagnan
Hébergement de votre site web
FileZilla
Client FTP installé sur les machines de laboratoire
VPN
Accès à Dartagnan depuis votre domicile
UTF-8 (sans BOM!)
Codage de caractères à utiliser avec votre éditeur de fichiers HTML
Bonnes pratiques HTML5
Quelques conseils à suivre pour la rédaction de votre code HTML
Validateur W3C: HTML5
Validez chaque page de votre site

Méta-données
<!DOCTYPE html>
Document en HTML 5
HTML5 vs XHTML
Comparaison de la syntaxe HTML5 et XHTML
<head>
Conteneur des balises de méta-données
<link>
Liaison d'une feuille de styles CSS externe
<style>
Spécification de styles CSS interne

Divers
() <img alt="" >
Image
() <picture> <source srcset="" …
Image adaptative
<a href="" title="" >
Hyperlien
() <hr>
Séparateur, barre horizontale
Entités HTML
Caractères spéciaux (accents, symboles, sinogrammes,…)

Balises sémantiques
() <h1>, ...,<h6>
Titres de niveaux 1 à 6
() <main>
Contenu spécifique de la page en cours (1 seul <main> visible à la fois!)
() <article>
Contenu qui garde du sens si partagé dans un autre site
() <section>
Groupement de contenus de la page, d'un article, d'une section...
() <header>
Entête de la page, d'un article, d'une section
() <footer>
Pied de la page, d'un article, d'une section
() <nav>
Conteneur d'éléments de navigation
() <aside>
Contenu facultatif lié à la page, un article ou une section
() <figure>
Conteneur d'un élément illustratif généralement légendé (photo, graphique, ...)
() <figcaption>
Légende d'une <figure>
() <details>
Conteneur dont le contenu peut être masqué/affiché
() <summary>
Résumé qui permet de voir/masquer le contenu d'un <details>
() <div>
Conteneur en bloc sans signification sémantique (à utiliser si aucune autre balise sémantique ne convient!)

Attributs
id
identifiant (doit être unique sur une même page)
name
nom (plusieurs occurrences possibles sur une même page)
class
Classe de styles CSS
style
Règles locales de styles CSS

Contenus textuels
() <p>
Paragraphe de texte
() <br>
Saut de ligne au sein d'un paragraphe (ne pas utiliser pour espacement vertical!)
() <ul>
Liste à puces (conteneur)
() <ol>
Liste numérotée (conteneur)
() <li>
Élément de liste à puces ou numérotée
() <span>
Conteneur en ligne sans signification sémantique

Tableaux
() <table>
Tableau (ne pas utiliser pour mise en page)
<tr>
Ligne de cellules d'un tableau
<th>
Cellule d'entête d'une colonne d'un tableau
<td>
Cellule d'un tableau

Formulaires
<form>
Conteneur d'éléments de formulaire
<fieldset>
Permet le regroupement d'éléments de formulaire
() <input type="text" …
Texte court (quelques mots)
() <textarea rows="" cols="" …
Texte long (plusieurs lignes)
() <input type="password" …
Mot de passe
() <input type="url" …
Url
() <input type="email" …
Courriel
() <input type="number" …
Valeur numérique
() <input type="date" …
Date
() <input type="time" …
Heure
() <input type="hidden" …
Champ non affiché
() <input type="range" …
Valeurs par palier (curseur)
() <input type="radio" …
Boutons radio (Choix exclusif)
() <input type="checkbox" …
Cases à cocher (Choix non exclusif)
() <select>
Liste déroulante
<datalist>
Liste de valeurs pour autocomplétion d'un champ texte
() <input type="file"…
Bouton de téléversement de fichier
() <button type="button">
Bouton d'action (sans soumission)
() <button type="reset">
Bouton de réinitialisation
() <button [type="submit]">
Bouton de soumission

Formulaires: attributs
autofocus
Élément actif au chargement de la page
autocomplete
Auto-complétion
disabled
Élément inactif
pattern
Validation par expression régulière
placeholder
Indication à destination de l'utilisateur
readonly
Élément en lecture seule

Rappel Bloc1: Le langage CSS3

Généralités
Modèle Parent-Enfant
Les enfants héritent des règles de style de leurs parents
Viewport
Portion affichée de la page
Liaisons de règles de style
Différentes liaisons possibles en cascade
Le flux
Ordre d'affichage et de placement des éléments par défaut
Le Responsive Web Design
Une mise en page qui s'adapte aux dimensions du support
Validateur W3C: CSS3
Validez la feuille de styles de votre site

Sélecteurs
*
Sélection de toutes les balises
.class
.test{…} Tous les éléments avec l'attribut class="test"
.class1.class2
.test.essai{…} Tous les éléments avec l'attribut class="test essai"
#id
#test42{…} L'élément avec l'attribut id="test42"
balise
p{…} Tous les éléments <p>

Combinaison de sélecteurs
sélecteur1, sélecteur2
Tous les éléments qui sont sélectionnés par au moins un des sélecteurs
sélecteur1 sélecteur2
Tous les éléments sélectionnés par sélecteur2 contenus dans un ancêtre sélectionné par sélecteur1
sélecteur1 > sélecteur2
Tous les éléments sélectionnés par sélecteur2 contenus dans un parent direct sélectionné par sélecteur1
sélecteur1 + sélecteur2
Tous les éléments sélectionnés par sélecteur2 voisins (contenus dans le même parent) d'un élément sélectionné par sélecteur1
sélecteur ~ sélecteur
Tous les éléments sélectionnés par sélecteur2 voisins directs (contenus dans le même parent et qui suivent) d'un élément sélectionné par sélecteur1

Le modèle boite
width
largeur du contenu d'un élément
height
hauteur du contenu d'un élément
margin
marges extérieures (autour de la bordure d'un élément)
padding
marges intérieures (entre la bordure et le contenu de l'élément)
marges et espaces blancs
Effondrement des marges verticales et gestion des espaces blancs
overflow
gestion du débordement du contenu hors de l'élément
display: none;
Élément non affiché
() display: block;
Mode bloc (un élément par ligne, dimensions réglables)
() display: inline;
Mode en ligne (élément sur ligne courante si place restante, dimensions liées au contenu)
() display: inline-block;
Mode bloc en ligne (élément sur ligne courante si place restante, dimensions réglables)
box-sizing: border-box;
Dimensions "width" et "height" comprennent alors le contenu, les paddings et les bordures

Positionnement avancé
position: relative;
Positionnement relatif (décalage par rapport à la position dans le flux)
position: absolute;
Positionnement absolu (décalage par rapport au coin supérieur gauche de la page ou du conteneur parent)
position: fixed;
Positionnement fixe (décalage par rapport au coin supérieur gauche du viewport)
float: left|right;
Positionnement flottant
z-index: number;
Ordre d'affichage d'éléments superposés

Unités de dimensions
() px
en pixels
() rem
selon la taille de police par défaut (souvent 16px)
( ) em
selon la taille de police de l'élément parent
( ) %
1% = 1/100 de la hauteur/largeur de la page entière
() vw
1 vw = 1/100 de la largeur du viewport
() vh
1 vh = 1/100 de la hauteur du viewport
() vmin
1 vmin = 1/100 de la largeur(si portrait)/hauteur(si paysage) du viewport
() vmax
1 vmax = 1/100 de la hauteur(si portrait)/largeur(si paysage) du viewport
() mm
en millimètres
calc()
valeur calculée d'une propriété de taille CSS

La couleur
#rrggbb
en hexadécimal (00-FF) selon les composantes Rouge, Verte et Bleue
nom
par le nom d'une des 140 couleurs prédéfinies
rgb(rouge,vert,bleu)
en décimal (0-255) selon les composantes Rouge, Verte et Bleue
rgba(rouge,vert,bleu,alpha)
en décimal (0-255) selon les composantes Rouge, Verte, Bleue, Transparence (0-1)

La police
font-family
la police de caractères
font-weight
texte en gras
font-size
taille de la police
font-style
texte en italique
color
la couleur du texte
text-align
alignement horizontal du texte
text-decoration
texte souligné
line-height
hauteur d'une ligne de texte
list-style-type
aspect des puces d'une liste
text-shadow
ombre d'un texte
@font-face
importer une police de caractères

Les bordures
border
les bordures d'un élément
border-style
le type de trait
border-width
l'épaisseur du trait
border-color
la couleur du trait
border-radius
les coins arrondis
box-shadow
ombre d'un élément

L'arrière-plan
background-color
la couleur d'arrière-plan d'un élément (contenu+padding)
background-size
les dimensions de l'image d'arrière-plan

Pseudo-classes
:link
hyperlien non consulté
:visited
hyperlien consulté
:active
hyperlien qui a le focus (exemple: via touche du clavier "tab")
:hover
élément survolé
:focus
élément de formulaire qui a le focus
:nth-child(n)
nième élément enfant de son parent
:first-child
premier élément enfant de son parent
:last-child
dernier élément enfant de son parent

Pseudo-éléments
::first-line
première ligne d'un paragraphe
::first-letter
première lettre d'un texte
::after
insertion de contenu après un élément
::before
insertion de contenu avant un élément
::selection
éléments ou portion de textes sélectionnés

Conteneur Flex
display: flex|inline-flex;
déclaration d'un conteneur FlexBox
flex-direction
orientation de l'axe principal
flex-wrap
une seule ou plusieurs rangées d'éléments
justify-content
répartition de l'espace restant d'une rangée selon l'axe principal
align-items
répartition de l'espace restant d'une rangée selon l'axe croisé
align-content
répartition de l'espace restant du conteneur selon l'axe croisé
flex-flow
version condensée de flex-direction & flex-wrap

Élément d'un conteneur Flex
flex-basis
taille par défaut avant redimensionnement
order
ordre d'affichage des éléments au sein du conteneur
flex-grow
ordre de dilatation de l'élément en fonction de l'espace disponible
flex-shrink
ordre de réduction de l'élément
align-self
répartition de l'espace libre autour d'un élément selon l'axe croisé
flex
version condensée de flex-grow, flex-shrink et flex-basis

Media Queries
types de médias
Liste des medias
propriétés des médias
width, height, orientation, device-width, ...
combinaison de critères
NON(not), ET(and), OU(,)
@media
Media query dans une feuille de styles