PragmaMémoCode

Quelques ressources...

L'éditeur VSCode

Installation et aide

Aide à la saisie

Presser "!" et Entrée pour afficher une structure de page.
Saisir "div" et Entrée pour obtenir <div></div>.
Saisir "div.maclasse" puis Entrée pour obtenir <div class='maclasse'></div>.
Saisir div.maclasse1.maclasse2 puis Entrée pour obtenir <div class="maclasse1 maclasse2"></div>.
Saisir "div#monid" puis Entrée pour obtenir <div id='monid'></div>.
Saisir "ul>li*3" puis Entrée pour obtenir
<ul> <li></li> <li></li> <li></li> </ul>
Pour définir la taille des tabulations, cliquer sur dans la barre inférieure.
Pour générer un texte de X mots de lorem ipsum, saisir "lorem" suivi du nombre de mots, puis Entrée. Par exemple, lorem10 pourrait générer "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, blanditiis?".

Raccourcis clavier de VSCode

Dupliquer la ligne où se trouve le curseur : Maj Alt Flèche bas
Gérer le retour automatique à la ligne : Alt + Z
Indenter le code : Ctrl + K + F
Commenter le code : Maj + Alt + A
Tous les raccourcis : Roue dentée > Raccourcis clavier

Extension Live Server

L'extension "Live Server" permet d'afficher (à chaque enregistrement) les modifications opérées dans le code, en direct sur son navigateur par défaut.
Pour l'installer, cliquer sur , saisir "live serveur", etc...
Pour utiliser Live Server, il faut impérativement ouvrir un dossier.
On lance l'extension, soit en cliquant sur "Go live" dans la barre inférieure, soit en faisant un clic droit > Open with Live Server.
Astuce : sous Windows, pour afficher 2 fenêtres côte à côte, sélectionner la 1ère, et presser les touches Windows + Flèche gauche, puis sélectionner la seconde, et presser les touches Windows + Flèche droite.
Pour fermer Live Server, cliquer sur "Port:" dans la barre inférieure, ou faire un clic droit > Stop Live Server.
Live Server est adapté aux sites statiques. Pour des sites PHP, installer l'extension "PHP Server".

Contrôle du code et débogage

CSS

Quelques ressources...

L'ordre des styles en cascade et les priorités (poids)

Les sélecteurs et combinateurs CSS

Les pseudo-classes

Les pseudo-éléments

Le positionnement en CSS

Flexbox et Grid : la révolution de la mise en page Web !

Les variables CSS

Les animations CSS

Tutoriels et packs d'animations

Les transformations (exemples sur W3School)

Les transformations CSS permettent de déplacer, faire pivoter, mettre à l'échelle et incliner des éléments.

transform: translate(50px, 100px); => Modifier les coordonnées d’un élément (axe horizontal,axe vertical)
transform: rotate(20deg); => Faire une rotation (dans le sens des aiguilles d'une montre si nombre positif, et dans le sens inverse si nombre négatif)
transform: scale(2, 3); => Agrandir ou réduire sur l'axe horizontal et vertical (déformation si les coefficients sont différents)
transform: scaleX(2); => Agrandir ou réduire sur l'axe horizontal (X)
transform: scaleY(2); => Agrandir ou réduire sur l'axe vertical (Y)
transform: skew(20deg, 10deg); => Étirer un objet en direction d’un angle calculé sur l'axe X et Y
transform: skewX(20deg); => Étirer un objet en direction d’un angle calculé sur l'axe horizontal =>
transform: skewY(20deg); => Étirer un objet en direction d’un angle calculé sur l'axe vertical
transform: matrix(1, -0.3, 0, 1, 0, 0) => Combiner plusieurs transformations : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
transform: rotateX(150deg); => Faire une rotation autour de l'axe horizontal
transform: rotateY(150deg); => Faire une rotation autour de l'axe vertical
transform: rotateZ(90deg); => Déplacer un élément autour de l'axe Z sans le déformer

Les transitions (exemples sur W3School)

Les transitions CSS permettent de modifier les valeurs des propriétés en douceur, sur une durée donnée.

La propriété transition est une propriété raccourcie pour les propriétés transition-property, transition-duration, transition-timing-function et transition-delay.

transition-delay: 3s; => Paramètre qui indique la durée à attendre avant de débuter la transition qui s'applique pour un changement de propriété
transition-duration: 3s; => Paramètre qui définit le nombre de secondes ou de millisecondes que doit durer une animation (La valeur par défaut, 0s, indique qu'il n'y aura aucune animation.)
transition-property: margin-right, color; => Paramètre qui désigne les noms des propriétés CSS sur lesquelles un effet de transition sera appliqué (all pour toutes les propriétés et none pour aucune)
transition-timing-function: linear; => Paramètre qui décrit la façon dont les valeurs intermédiaires des propriétés CSS affectées par un effet de transition sont calculées
- ease => La transition Css accélère très vite au début et ralentit à la moitié de la transition. (valeur par défaut)
- linear => La transition CSS est jouée de façon linéaire.
- ease-in => La transition CSS démarre lentement et accélère progressivement avant la fin
- ease-out => La transition CSS démarre rapidement et ralentit progressivement avant la fin.
- ease-in-out => Dans la moitié de la transition CSS, elle se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.
- step-start => La transition CSS comporte une seule étape et elle est jouée au début de l'étape. (équivalent à steps(1, start))
- step-end => La transition CSS comporte une seule étape et elle est jouée à la fin de l'étape. (équivalent à steps(1, end))
- steps(n, mot cle) => La transition CSS est divisée en n étape(s) et elle est jouée au début de l'étape si start ou en fin si end. (n nombre positif et start ou end)
- cubic-bezier(0.25, 0.1, 0.25, 1.0) => Les 4 valeurs spécifient les points P1 et P2 de la courbe de bezier.

Les animations via les @keyframes

Elles permettent à un élément de passer progressivement (via des paliers indiqués en %) d'un style à un autre, en modifiant ses propriétés CSS. Chaque animation porte un nom de façon à pouvoir être utilisée sur différents sélecteurs.

Code de l'animation

@keyframes nomdelanimation {
                
                  0%   {background-color: red;}

                  25%  {background-color: yellow;}

                  50%  {background-color: blue;}

                  100% {background-color: green;}
                
                }

Élément à animer

selecteur {
                
                   animation-name: nomdelanimation;

                   animation-duration: 4s;

                   background-color: red;
                
                }

Les propriétés de l'animation

animation-name: nomdelanimation; => Nom de l'animation
animation-duration: 4s; => Durée d'un cycle de l'animation
animation-delay:2s; => Durée d'attente avant de démarrer une animation une fois qu'elle a été appliquée à un élément
animation-direction:normal; => Paramètre qui indique si les cycles de l'animation doivent être joués dans le sens inverse et/ou de façon alternée (normal, reverse, alternate, alternate-reverse)
animation-fill-mode:none; => Paramètre qui indique la façon dont une animation CSS doit appliquer les styles à sa cible avant et après son exécution (none, forwards, backwards, both)
animation-iteration-count:2; => Nombre qui indique le nombre de cycles utilisés pour répéter une animation avant que celle-ci s'arrête
animation-play-state:paused => Paramètre qui définit si une animation est en cours d'exécution ou si elle est en pause (paused, running)
animation-timing-function:linear; => Paramètre qui définit la façon dont une animation CSS doit se dérouler au fur et à mesure de chaque cycle (ease, ease-in, ease-out, ease-in-out, linear, step-start, step-end, etc...)

Javascript

Quelques ressources...

Fonctions liées aux textes

Quelques fonctions courantes

let caractere = chaine[0]; => Récupérer un caractère d'après son indice (W3S)
let code = chaine.charCodeAt(1); => Récupérer le code Unicode d'un caractère (W3S)
let chaine = chaine1 + chaine2 => Concaténer plusieurs chaines
let test = chaine.endsWith("souschaine"); => Vérifier si une chaîne se termine par une sous-chaîne (W3S)
let chaine = String.fromCharCode(72, 69, 76, 76, 79); => Construire une chaîne à partir de ses codes Unicode (W3S)
let test = chaine.includes("souschaine"); => Vérifier si une chaîne contient un sous-chaîne (W3S)
let position = chaine.indexOf("souschaine"); => Récupérer la position de la 1ère occurence d'une sous-chaîne (W3S)
let position = chaine.lastIndexOf("souschaine"); => Récupérer la position de la dernière occurence d'une sous-chaîne (W3S)
let nombreCar = chaine.length; => Récupérer le nombre de caractère d'une chaîne (W3S)
let result = chaine1.localeCompare(chaine2); => Comparer 2 chaînes (W3S)
chaine.match(souschaine); => Rechercher une sous-chaîne dans une chaîne (fonctionne aussi avec des expressions régulières) (W3S)
let chaineCompletee = chaine.padEnd(10,"-"); => Compléter une chaîne en ajoutant des caractères en fin, jusqu'au nième caractère (W3S)
let chaineCompletee = chaine.padStart(10,"-"); => Compléter une chaîne en ajoutant des caractères en début, jusqu'au nième caractère (W3S)
let chaineCompletee = chaine.repeat(4); => Répéter n fois une chaîne (W3S)
let chaine = chaineOrigine.replace("132", "456"); => Remplacer une expression par une autre dans la 1ère occurence trouvée (fonctionne aussi avec des expressions régulières) (W3S)
let chaine = chaineOrigine.replaceAll("132", "456"); => Remplacer une expression par une autre poru toutes les occurences trouvées (fonctionne aussi avec des expressions régulières) (W3S)
let position = chaine.search(souschaine); => Retourner la position d'une sous-chaîne dans une chaîne (W3S)
let result = chaine.slice(0, 5); => Extraire une partie d'une chaîne à partir de tel indice, le 1er nombre étant l'indice et le second le nombre de caractère à conserver (W3S)
const monTableau = chaine.split(""); => Créer un tableau à partir d'une chaîne, en définissant dans les parenthèses le ou les caractères qui le fractionnent (W3S)
let result = chaine.substr(1, 4); => Extraire une partie d'une chaîne à partir de tel indice, en précisant le nombre de caractère à conserver (W3S)
let result = chaine.substring(1, 4); => Extraire une partie d'une chaîne entre 2 indices (W3S)
let result = chaine.toLowerCase(); => Convertir en minuscules (W3S)
let result = chaine.UpperCase(); => Convertir en majuscules (W3S)
let result = chaine.trim(); => Supprimer les espaces en début et fin de chaîne (W3S)

Copier le contenu d'un input ou d'un textarea dans le presse-papiers (V1)

/* Copier le contenu d'un input ou d'un textarea dans le presse-papiers (v1)*/
function copierTexte(id) {
  var copyText = document.getElementById(id);
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices
  navigator.clipboard.writeText(copyText.value);
}

Copier le contenu d'un input ou d'un textarea dans le presse-papiers (V1)

/* Copier le contenu d'un input ou d'un textarea dans le presse-papiers (V2) */
function copierChamp(selecteur) {
  const element = document.querySelector(selecteur);
  if (!element) {
    console.warn("Élément non trouvé :", selecteur);
    return;
  }
  const texte = element.value || element.textContent;
  navigator.clipboard.writeText(texte)
    .then(() => {
      //console.log("Texte copié :", texte);
      infoFlashTop("Texte copié",2000);
    })
    .catch(err => console.error("Erreur de copie :", err));
}

Décoder en base 64 en gérant les caractères spéciaux

/* Décoder en base 64 en gérant les caractères spéciaux */
function b64DecodeUnicode(str) {
  // Going backwards: from bytestream, to percent-encoding, to original string.
  return decodeURIComponent(atob(str).split('').map(function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

Encoder en base 64 en gérant les caractères spéciaux

/* Encoder en base 64 en gérant les caractères spéciaux */
function b64EncodeUnicode(str) {
  // first we use encodeURIComponent to get percent-encoded UTF-8,
  // then we convert the percent encodings into raw bytes which
  // can be fed into btoa.
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
  function toSolidBytes(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

Copier le contenu d'un input ou d'un textarea

/* Importer un fichier en cliquant sur un bouton */
// <input type='file' accept="application/json, .json" id='gruge_bt_a_cliquer' style='display:none;' />
// autres valeurs pour accept = text/plain, text/html
$('#bt_a_cliquer').click(function() {
  $('#gruge_bt_a_cliquer').click();
});
$('#gruge_bt_a_cliquer').change(function() {
  var reader = new FileReader();
  reader.onload = function (e) {
    let ctnImporte = e.target.result;
    // si le contenu (un tableau par exemple) a été converti en Json => montableau = JSON.parse(ctnImporte);
  };
  reader.readAsText($('#gruge_bt_a_cliquer').prop('files')[0], 'utf-8');
});

Récupérer le nom du fichier via le chemin, sans l'extension

/* Récupérer le nom du fichier via le chemin, sans l'extension */
function nomFic(chemin) {
  chemin = chemin.replace(/\.([a-z]+)$/, '');
  return chemin.split('/').pop();
}

Supprimer les accents d'une chaine

/* Supprimer les accents d'une chaine */
function sansAccent(str) {
  str = str.replace(/à|â|ä|À|Â|Ä/g, 'a');
  str = str.replace(/é|è|ê|ë|É|Ê|È|Ë/g, 'e');
  str = str.replace(/î|ï|î|Ï/g, 'i');
  str = str.replace(/ô|ö|Ô|Ö/g, 'o');
  str = str.replace(/ù|û|ü|Ù|Û|Ü/g, 'u');
  str = str.replace(/ç|Ç/g, 'c');
  return str;
}

Supprimer les caractères interdits dans les noms de fichier

/* Supprimer les caractères interdits dans les noms de fichier */
function supCarInterdit(str) {
var accent = [
/[\300-\306]/g, /[\340-\346]/g, // A, a
/[\310-\313]/g, /[\350-\353]/g, // E, e
/[\314-\317]/g, /[\354-\357]/g, // I, i
/[\322-\330]/g, /[\362-\370]/g, // O, o
/[\331-\334]/g, /[\371-\374]/g, // U, u
/[\321]/g, /[\361]/g, // N, n
/[\307]/g, /[\347]/g, // C, c
];
var noaccent = ['A','a','E','e','I','i','O','o','U','u','N','n','C','c'];
for (var i = 0; i < accent.length; i++){
str = str.replace(accent[i], noaccent[i]);
}
str = str.replace(/&/g, '');
str = str.replace(/_amp;/g, '');
str = str.replace(/</g, '');
str = str.replace(/_lt;/g, '');
str = str.replace(/>/g, '');
str = str.replace(/_gt;/g, '');
str = str.replace(/\||(\)|\(| |#|"|@|:|\.|,|;|'|%|!|²|=|÷|\+|\?|\/|\[|\]|\{|\}|\*|\^|\$|\\|`|"|'|¨|€|£|¤|µ|§|~|ƒ|„|©|°)/g, '');
return str;
}

Supprimer les crochets

/* Supprimer les crochets */
function supCro(str) {
return str.replace(/(\]|\[)/g, '');
}

Supprimer les crochets, les barres obliques et les underscores

/* Supprimer les crochets, les barres obliques et les underscores */
function supBarEtCro(str) {
return str.replace(/(\]|\[|\/|_)/g, '');
}

Télécharger un fichier texte

/* Télécharger un fichier texte */
function download(text,filename){
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=Windows-1252,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

Trouver le nombre d'occurrences

/* Trouver le nombre d'occurrences http://www.developpez.net/forums/d1051530/webmasters-developpement-web/javascript-ajax-typescript-dart/javascript/comptage-nombre-d-occurrence-d-caractere-chaine/ */
function nbChar(chaine,lettre) {
  return chaine.split(lettre).length-1;
}

Fonctions liées aux tableaux

Quelques fonctions courantes

const children = arr1.concat(arr2, arr3); => Concaténer des tableaux (W3S)
const result = tableau.filter(checkAdult); => Filtrer un tableau selon une fonction (W3S)
const result = tableau.find(checkAdult); => Récupérer le 1er élément d'un tableau que teste une fonction (W3S)
const result = tableau.findIndex(checkAdult); => Récupérer le 1er index d'un tableau que teste une fonction (W3S)
const result = tableau.findLast(checkAdult); => Récupérer le dernier index d'un tableau que teste une fonction (W3S)
tableau.forEach(myFunction); => Appliquer une fonction à chaque élément d'un tableau (W3S)
Array.from("ABCDEFG") => Créer un tableau à partir d'une chaîne (W3S)
tableau.includes("élément"); => Vérifier si un élément appartient à un tableau (W3S)
let index = tableau.indexOf("élément"); => Récupérer le 1er index d'un élément d'un tableau (W3S)
let index = tableau.lastIndexOf("élément"); => Récupérer le dernier index d'un élément d'un tableau (W3S)
let result = Array.isArray(tableau); => Vérifier si un objet est un tableau (W3S)
let text = tableau.join(" and "); => Créer un chaîne à partir d'un tableau en définissant le séparateur (W3S)
let nombreElements = tableau.length; => Récupérer le nombre d'éléments d'un tableau (W3S)
let elementSupprime = tableau.pop(); => Supprimer (et retourner) le dernier élément d'un tableau (W3S)
let elementSupprime = tableau.shift(); => Supprimer (et retourner) le 1er élément d'un tableau (W3S)
tableau.push("élément"); => Ajouter un ou plusieurs éléments à la fin d'un tableau (W3S)
tableau.unshift("élément"); => Ajouter un ou plusieurs éléments au début d'un tableau (W3S)
let nouveauTableau = tableau.slice(1, 3); => Créer un nouveau tableau à partir d'un tableau, le 1er nombre étant l'indice de début et le second l'indice à partir duquel exclure (W3S)
tableau.sort(); => Trier un tableau dans l'ordre alphabétique ou croissant (W3S)
tableau.splice(2, 0, "élément 1", "élément 2"); => Ajouter ou supprimer des éléments d'un tableau, le 1er nombre précise à partir de quel indice ajouter des éléments, et le second nombre précise à le nombre d'éléments à supprimer (W3S)
let tableau2 = tableau.toReversed(); => Créer un nouveau tableau en inversant l'ordre des éléments (W3S)
let text = tableau.toString(); => Convertir un tableau en chaîne (W3S)

Cloner un tableau via Json

/* Cloner un tableau via Json */
function cloneViaJson(obj){
  try{
      var copy = JSON.parse(JSON.stringify(obj));
  } catch(ex){
      alert("Vous utilisez un vieux navigateur obsolète qui n'est pas pris en charge par ce site.");
  }
  return copy;
}

Mélanger les éléments d'un tableau

/* Mélanger les éléments d'un tableau https://css-tricks.com/snippets/javascript/shuffle-array/ */
function shuffle(o) {
  for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

Supprimer les doublons d'un tableau

/* Supprimer les doublons d'un tableau https://www.unicoda.com/?p=579 */
function cleanArray(array) {
  var i, j, len = array.length, out = [], obj = {};
  for (let i = 0; i < len; i++) {
    obj[array[i]] = 0;
  }
  for (j in obj) {
    out.push(j);
  }
  return out;
}
// var nbr = [42, 101010, 7, 42, 7, 42, 101010];
// var newNbr = cleanArray(nbr);

Trier un tableau sans tenir compte de la casse

/* Trier un tableau sans tenir compte de la casse https://delicious-insights.com/fr/articles/le-piege-de-array-sort/ */
Array.prototype.localeSort = function localeSort() {
  return this.sort(function(a, b) {
    return a.localeCompare(b);
  })
};

Fonctions liées aux nombres

Fonctions liées aux dates

Quelques fonctions courantes

const time = new Date(); => Récupérer la date et l'heure courantes (W3S)
let jourMois = d.getDate(); => Récupérer le jour du mois, de 1 à 31 (W3S)
let jourSemaine = d.getDate(); => Récupérer le jour de la semaine, 0 étant dimanche (W3S)
let annee = d.getFullYear(); => Récupérer l'année (W3S)
let heure = d.getHours(); => Récupérer l'heure (W3S)
let ms = d.getMilliseconds(); => Récupérer les millisecondes (W3S)
let minutes = d.getMinutes(); => Récupérer les minutes (W3S)
let mois = d.getMonth(); => Récupérer le mois, janvier étant 0 (W3S)
let secondes = d.getSeconds(); => Récupérer les secondes (W3S)
let temps = d.getTime(); => Récupérer le nombre de millisecondes écoulées depuis le 1er janvier 1970 (W3S)
let dateTexte = d.toLocaleDateString(); => Récupérer la date sous forme locale : 25/10/2020 (W3S)
let heureTexte = d.toLocaleTimeString(); => Récupérer l'heure sous forme 13:55:26 (W3S)
let dateHeureTexte = d.toLocaleString(); => Récupérer la date et l'heure sous forme 25/10/2020 13:55:26 (W3S)

Afficher la date avec - comme séparateur

/* Afficher la date avec - comme séparateur */
function dateDuJour() {
  var ladate=new Date();
  var lannee = ladate.getFullYear() - 2000;
  return (ladate.getDate().toString().replace(/^(\d)$/,'0$1')+"-"+(ladate.getMonth()+1).toString().replace(/^(\d)$/,'0$1')+"-"+lannee);
}

Convertir des millisecondes

/* Convertir des millisecondes (Date.now()) */
function convertirMillisec(valeur) {
  let ms = valeur;
  let sec = Math.floor(ms/1000);
  let secR = sec%60;
  let min = Math.floor(sec/60);
  let minR = min%60;
  let heure = Math.floor(min/60);
  let heureR = heure%24;
  let jour = Math.floor(heure/24);
  return (jour>0 ? jour+" j " : "")+(heureR>0 ? heureR+" h " : "")+(minR>0 ? minR+" min "  : "")+(secR > 0 ? secR+" sec" : "");
}

Fonctions liées aux durées

Fonctions liées à l'affichage

Afficher une boîte de dialogue (W3s)

alert("ligne 1\nligne 2") => boîte d'alerte
confirm("mon texte"); => boîte de confirmation
prompt("mon texte","texte par défaut"); => boîte de prompt

Mettre le focus dans un champ input text

document.getElementById("id_input").focus();
Activer le focus pour tel input d'une modale de Bootstrap

/* Activer le focus pour tel input d'une modale */
function activerFocusModal(idModal,idInput) {
  const lamodale = document.getElementById(idModal);
  const linput = document.getElementById(idInput);
  lamodale.addEventListener('shown.bs.modal', () => {
    linput.focus();
  });
}

Créer un message Flash

/* Créer un message Flash (nécessite jQuery) */
// Ce bricolage nécessite les styles :
//.boite_message {position: fixed; top:50%; left:50%; width: 400px; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-size:18px; opacity: 1; text-align: center; z-index:9999;}
//.calque_ecran {position:fixed; top:0; bottom:0; left:0; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index:9998;}
function messageFlash(texte,look,duree) {
  $('body').append("<div class='el_a_supprimer calque_ecran'></div><div class='el_a_supprimer boite_message alert alert-"+look+"'>"+texte+"</div><input id='input_bidon' type='text' style='position:fixed; top:0; left:0;'>");
  document.getElementById("input_bidon").focus();// pour gérer la touche Entrée !
  $(".boite_message").fadeOut(duree);
  const delai = setTimeout(function(){
    clearTimeout(delai);
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
  }, duree);
  $("#input_bidon").keypress(function(){
    clearTimeout(delai);
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
  });
}

Créer un message de simulation d'alerte

/* Créer un message de simulation d'alerte (nécessite jQuery) */
// Ce bricolage nécessite les styles :
//.boite_message {position: fixed; top:50%; left:50%; width: 400px; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-size:18px; opacity: 1; text-align: center; z-index:9999;}
//.calque_ecran {position:fixed; top:0; bottom:0; left:0; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index:9998;}
function messageAlert(texte,look) {
  $('body').append("<div class='el_a_supprimer calque_ecran'></div><div class='el_a_supprimer boite_message alert alert-"+look+"'><div>"+texte+"</div><button id='id_alert' class='btn btn-primary mt-3'>OK</button></div><input id='input_bidon' type='text' style='position:fixed; top:0; left:0;'>");
  document.getElementById("input_bidon").focus();// pour gérer la touche Entrée !
  $("#id_alert").click(function() {
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
  });
  $("#input_bidon").keypress(function(){
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
  });
}

Créer un message de simulation d'alerte, avec choix du focus

/* Créer un message de simulation d'alerte, avec choix du focus (nécessite jQuery) */
// Ce bricolage nécessite les styles :
//.boite_message {position: fixed; top:50%; left:50%; width: 400px; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-size:18px; opacity: 1; text-align: center; z-index:9999;}
//.calque_ecran {position:fixed; top:0; bottom:0; left:0; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index:9998;}
function messageAlertFocus(texte,look,idFocus) {
  $('body').append("<div class='el_a_supprimer calque_ecran'></div><div class='el_a_supprimer boite_message alert alert-"+look+"'><div>"+texte+"</div><button id='id_alert' class='btn btn-primary mt-3'>OK</button></div><input id='input_bidon' type='text' style='position:fixed; top:0; left:0;'>");
  document.getElementById("input_bidon").focus();// pour gérer la touche Entrée !
  $("#id_alert").click(function() {
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
    document.getElementById(idFocus).focus();
  });
  $("#input_bidon").keypress(function(){
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
    document.getElementById(idFocus).focus();
  });
}

Créer un message de simulation d'alerte, avec interruption et... (si jeu multijoueurs)

/* Créer un message de simulation d'alerte, avec interruption et reprise de setInterval et lancement de la fonction joueurSuivant ou focus sur le champ de saisie (nécessite jQuery) */
// Ce bricolage nécessite les styles :
//.boite_message {position: fixed; top:50%; left:50%; width: 400px; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-size:18px; opacity: 1; text-align: center; z-index:9999;}
//.calque_ecran {position:fixed; top:0; bottom:0; left:0; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index:9998;}
function messageAlertStoptemps(texte,look,suivantOuNon) {
  $('body').append("<div class='el_a_supprimer calque_ecran'></div><div class='el_a_supprimer boite_message alert alert-"+look+"'><div>"+texte+"</div><button id='id_alert' class='btn btn-primary mt-3'>OK</button></div><input id='input_bidon' type='text' style='position:fixed; top:0; left:0;'>");
  document.getElementById("input_bidon").focus();// pour gérer la touche Entrée !
  arreterTemps();
  $("#id_alert").click(function() {
    reprendreTemps();
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
    if (suivantOuNon == "suivant") joueurSuivant();
    if (suivantOuNon == "focus") document.getElementById("saisie_ordre_"+rangEC).focus();
  });
  $("#input_bidon").keypress(function(){
    reprendreTemps();
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
    if (suivantOuNon == "suivant") joueurSuivant();
    if (suivantOuNon == "focus") document.getElementById("saisie_ordre_"+rangEC).focus();
  });
}

Créer un message de simulation de Confirm

/* Créer un message de simulation de Confirm (nécessite jQuery) */
// Ce bricolage nécessite les styles :
//.boite_message {position: fixed; top:50%; left:50%; width: 400px; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; font-size:18px; opacity: 1; text-align: center; z-index:9999;}
//.calque_ecran {position:fixed; top:0; bottom:0; left:0; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index:9998;}
function messageConfirm(texte,look,nomFonction) {
  $('body').append("<div class='el_a_supprimer calque_ecran'></div><div class='el_a_supprimer boite_message alert alert-"+look+"'><div>"+texte+"</div><button id='id_confirm_non' class='btn btn-warning mt-3'>Annuler</button> <button id='id_confirm_oui' class='btn btn-success mt-3'>OK</button></div><input id='input_bidon' type='text' style='position:fixed; top:0; left:0;'>");
  document.getElementById("input_bidon").focus();// pour gérer la touche Entrée !
  $("#id_confirm_non").click(function() {
    $(".el_a_supprimer").remove();
    return false;
  });
  $("#id_confirm_oui").click(function() {
    nomFonction();
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
  });
  $("#input_bidon").keypress(function(){
    $(".el_a_supprimer").remove();
    $("#input_bidon").remove();
    return false;
  });
}

Afficher une info flash en haut de page

/* Afficher une info flash en haut de page (nécessite jQuery) */
function infoFlashTop(message,duree) {
  $("body").append(`<div id="info_flash_top" class="bg-warning-subtle text-warning-emphasis p-2 text-center" style="position:fixed; top:0; left:0; right:0; z-index:100000"><b>`+message+`</b></div>`)
  $("#info_flash_top").fadeOut(duree);
  setTimeout(function(){ $("#info_flash_top").remove(); }, 3000);
}

Créer une boîte de confirmation

/* Créer une boîte de confirmation */
if (confirm("texte du message")) {
  // code...
}

Fonctions liées à la navigation et aux URL

window.location.href => Récupérer l'URL courante
window.location.hostname => Récupérer le nom de domaine
window.location.pathname => Récupérer le chemin et le nom de fichier
window.open("https://toto.fr","_blank"); => Ouvrir un lien dans une nouvelle fenêtre
window.print(); => Imprimer la page courante

Changer d'onglet

/* Changer d'onglet (nécessite jQuery) */
function changerOnglet(selecteur) {
  $(".nav-link").removeClass("active");
  $(selecteur+"_tab").addClass("active");
  $(".tab-pane").removeClass("active show");
  $(selecteur).addClass("active show");
}

Gérer la flèche de retour en haut de page

/* Gérer la flèche de retour en haut de page (nécessite jQuery) */
function retourHaut() {
  $(window).scroll(function() {
    //	Afficher le bouton si absence d'ascenseur
    if ( $(window).scrollTop() == 0 ) $('#returnOnTop').fadeOut();
    else $('#returnOnTop').fadeIn();
  });
}
/* Pour que cela fonctionne, ajouter aussi :
- dans document.ready
$('body').append('<div id="returnOnTop" title="Retour en haut"> </div>');
  $('#returnOnTop').click( function() {
  $('html,body').animate({scrollTop: 0}, 'slow');
});
retourHaut();
- dans les css
#returnOnTop {background: url('img/return_on_top.png') no-repeat; bottom: 1%; cursor: pointer; display: none; filter: alpha(opacity = 50); height: 48px; opacity: 0.5; position: fixed; right: 1%; width: 48px;}
#returnOnTop:hover {filter: alpha(opacity = 100); opacity: 1;}
- l'image img/return_on_top.png
*/}

Modifier l'URL

/* Modifier l'URL */
function changeUrl(page, url) {
  if (typeof (history.pushState) != "undefined") {
    var obj = { Page: page, Url: url };
    history.pushState(obj, obj.Page, obj.Url);
  } else {
    alert("Le navigateur ne supporte pas HTML5.");
  }
}

Récupérer certaines parties de l'URL

/* Récupérer certaines parties de l'URL */
var cheminComplet = document.location.href;
var cheminRepertoire = cheminComplet.substring( 0 ,cheminComplet.lastIndexOf( "/" ) );
var nomDuFichierURL = cheminComplet.substring(cheminComplet.lastIndexOf( "/" )+1 );
if (cheminComplet.indexOf("?") == -1) {
  var cheminCompletSansParametre = cheminComplet;
  var nomDuFichierSansParametre = nomDuFichierURL;
} else {
  var cheminCompletSansParametre = cheminComplet.substring( 0 ,cheminComplet.lastIndexOf( "?" ) );
  var nomDuFichierSansParametre = nomDuFichierURL.substring( 0 ,nomDuFichierURL.lastIndexOf( "?" ) );
}
var urlPartage = cheminCompletSansParametre;

Fonctions liées aux sons et à la synthèse vocale

LocalStorage

Qu'est-ce que c'est ?

Le localStorage permet de sauvegarder des informations dans la mémoire du navigateur afin de faire persister les informations même si l'utilisateur quitte la page ou ferme son navigateur.
Ce stockage étant propre à un nom de domaine, il n'est donc pas partagé entre plusieurs sites.
Les navigateurs appliquent une limite sur la quantité de données allouée au stockage, cette limite est de 5 méga-octets.
Dans l'onglet "Stockage" de la console, on peut visualiser les données enregistrées.
Un autre système de stockage existe, le sessionStorage, qui a une durée de vie limité à la session de navigation (l'onglet courant) et qui utilise les mêmes méthodes.

Ses méthodes

localStorage.setItem("cle", "valeur"); => Enregistrer la valeur "valeur" avec pour clé "cle"
let maVariableLS = localStorage.getItem("cle"); => Récupérer la valeur de la clé "cle" dans la variable "maVariableLS"
localStorage.removeItem("cle"); => Supprimer la clé "cle"
localStorage.clear(); => Vider le localStorage
Pour sauvegarder un objet ou un tableau, utiliser le format Json :
- localStorage.setItem("cle", JSON.stringify("monObjet")); => Enregistrer l'objet (au format Json) avec pour clé "cle"
- let maVariableLS = localStorage.getItem("cle"); => Récupérer la valeur de la clé "cle" (l'objet au format Json) dans la variable "maVariableLS"
- let monObjet = cle ? JSON.parse(maVariableLS) : []; => Récupérer l'objet dans sa version originale, ou un tableau vide si "maVariableLS" n'existe pas

Fonctions utilisées dans le Texte Mystère v2

/* Avant le document.ready */
// l'item lsTCatPerso du webstorage n'existe pas => on crée le tableau tCatPerso (tableau catégories locales)
if (localStorage.getItem("lsTCatPerso") === null) var tCatPerso = [];
else var tCatPerso = JSON.parse(localStorage.getItem("lsTCatPerso"));
// l'item lsTPerso du webstorage existe =>  on remplit le tableau tCatPerso avec les données de lsTPerso (tableau textes locaux)
if (localStorage.getItem("lsTPerso") === null) var tPerso = [];
else var tPerso = JSON.parse(localStorage.getItem("lsTPerso"));
/* Dans les fonctions */
// Mettre à jour le local storage pour la sélection personnalisée
function majLocalStorage() {
    localStorage.setItem("lsTCatPerso", JSON.stringify(tCatPerso));// on met à jour l'item lsTCatPerso avec les données de tCatPerso
    localStorage.setItem("lsTPerso", JSON.stringify(tPerso));// on met à jour l'item lsTPerso avec les données de tPerso
}
});

jQuery

Quelques ressources...

Exécuter le code après le chargement de la page

Déclencher un événement au clic (entre autres)

Déclencher un événement en pressant une touche

Sélectionner un objet

Parcourir le DOM

Montrer, cacher, masquer, envelopper des éléments

Autres effets...

Manipuler des contenus

Récupérer un contenu ou une valeur

let ctn = $("selecteur").html(); => Récupérer le contenu html (avec les balises) dans la variable "ctn".
let ctn = $("selecteur").text(); => Récupérer le contenu txt (sans les balises) dans la variable "ctn".
let ctn = $("selecteur").val(); => Récupérer la valeur (d'un input, d'un textarea, d'un select) dans la variable "ctn".
Astuce : ajouter .trim() supprime les espaces éventuels en début et fin de chaîne.

Ajouter un contenu ou affecter une valeur

$("selecteur").html("<div>mon contenu</div>"); => Remplir la balise spécifiée avec le contenu html (avec les balises)
$("selecteur").text("<div>mon contenu</div>"); => Remplir la balise spécifiée avec le contenu textuel (sans les balises)
$("selecteur").val("ma valeur"); => Affecter la valeur "mavaleur" à l'attribut "value" d'un input ou d'une option de select, ou à un textarea.
$("selecteur").append("<div>mon contenu</div>"); => Insérer le contenu html à la fin du contenu de "selecteur".
$("selecteur").prepend("<div>mon contenu</div>"); => Insérer le contenu html au début du contenu de "selecteur".
$("selecteur").after("<div>mon contenu</div>"); => Insérer le contenu html après "selecteur".
$("selecteur").before("<div>mon contenu</div>"); => Insérer le contenu html avant "selecteur".

Supprimer un élément et son contenu

$("selecteur").remove(); => Supprimer l'élément "selecteur" et son contenu.
$("selecteur").remove(".classe1, .classe2"); => Supprimer l'élément "selecteur" qui a la classe "classe1" ou "classe2", et son contenu.
$("selecteur").remove(".classe1.classe2"); => Supprimer l'élément "selecteur" qui a la classe "classe1" et "classe2", et son contenu.

Manipuler des attributs

Manipuler select, checkbox et radio

Manipuler des classes et des styles CSS

Vérifier l'état d'un élément

Exploiter des plugins

Bootstrap 5

Quelques ressources...

Démarrage et composants essentiels

Installation (télécharger la version 5.3)

Bootstrap peut être utilisé :
- soit en téléchargeant les fichiers CSS et JS (indispensable en local),
- soit en insérant les CDN.
Il est préférable de charger "bootstrap.bundle.min.js" plutôt que "bootstrap.min.js" car il inclut "Popper".

Icônes pour Bootstrap

Conteneur et colonnes responsives

Pour que son contenu s'adapte à la taille de l'écran, le placer dans une div "container".
Observer cet exemple pour comprendre comment Bootstrap gère la responsivité sur sa grille de 12 colonnes, en fonction des différents breakpoints.
Pour centrer une div qui n'occupe que 8 colonnes, ajouter la classe "offset-2" (2 colonnes de chaque côté) ou la classe "mx-auto".
Pour une meilleure mise en forme, ajouter la classe "form-control" aux select et input, et la classe "form-select" aux select.
Bootstrap gère également les marges avec des classes (m-3, p-2, mx-1, etc...). En savoir plus...

Modales (doc W3School)

<div class="modal fade" id="id_modal" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary">Autre</button>
      </div>
    </div>
  </div>
</div>

Ouverture via html :
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#id_modal">Ouvrir</button>
Ouverture via JS :
const modale = new bootstrap.Modal(document.getElementById('id_modal')); modale.show();
La taille par défaut de la modale est de 500px. Pour la modifier, ajouter dans la div .modal-dialog la classe modal-sm (300px), modal-lg (800px), modal-xl (1400px), ou modal-fullscreen (plein écran).
Pour que la modale ne se referme pas si l'on clique en dehors ou sur la touche [Echap], ajouter dans la div .modal data-bs-backdrop="static" data-bs-keyboard="false".
Si le header est sombre, on ne verra pas la croix : placer le bouton ayant la classe btn-close dans une div ayant l'attribut data-bs-theme="dark".
modal-header et modal-footer sont facultatifs.

Navbar (doc W3School)

<!-- Navbar de PragmaMémoCode -->
<nav id="navbar_espace" class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
  <div class="container-fluid">
    <div style="display:inline-block" class="navbar-brand mb-0 h1">
      <img src="images/logo_pragmameocode_32.png" alt="Logo PragmaMémoCode">
      <span style="color:red; margin-left:10px;">P</span>ragma<span style="color:blue;">M</span>émo<span style="color:yellow;">C</span>ode
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_pmc" aria-controls="collapse_pmc" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapse_pmc">
      <ul class="navbar-nav ms-auto mb-2 mb-md-0">
        <li id="bts_section" class="nav-item mt-2 mt-md-0">
          <img src="images/bt_texte_cache.png" class="effet_bt_zoom bt_fermer_volets mb-1 mb-sm-0 me-1" alt="Fermer tous les volets des textes" title="Fermer tous les volets des textes">
          <img src="images/bt_texte_visible.png" class="effet_bt_zoom bt_ouvrir_volets mb-1 mb-sm-0 me-1" alt="Ouvrir tous les volets des textes" title="Ouvrir tous les volets des textes">
          <button class="btn btn-light mb-1 mb-sm-0" data-s="accueil"><i class="bi bi-house-door"></i></button>
          <button class="btn btn-outline-light mb-1 mb-sm-0" data-s="html">HTML</button>
          <button class="btn btn-outline-light mb-1 mb-sm-0" data-s="css">CSS</button>
          <button class="btn btn-outline-light mb-1 mb-sm-0" data-s="js">JS</button>
          <button class="btn btn-outline-light mb-1 mb-sm-0" data-s="jquery">jQuery</button>
          <button class="btn btn-outline-light mb-1 mb-sm-0" data-s="bootstrap">Bootstrap</button>
          <button class="btn btn-outline-light mb-1 mb-sm-0" data-s="php">PHP</button>
        </li>
      </ul>
    </div>
  </div>
</nav>

Onglets (doc W3School)

<!-- onglets de PragmAMAP -->
<ul class="nav nav-tabs" id="adherent_tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="adh_accueil_tab" data-bs-toggle="tab" data-bs-target="#adh_accueil" type="button" role="tab" aria-controls="adh_accueil" aria-selected="true">Accueil</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="adh_coordonnee_tab" data-bs-toggle="tab" data-bs-target="#adh_coordonnee" type="button" role="tab" aria-controls="adh_coordonnee" aria-selected="false">Coordonnées</button>
  </li>
</ul>
<div class="tab-content tab_content" id="adherent_content">
  <div class="tab-pane active" id="adh_accueil" role="tabpanel" aria-labelledby="adh_accueil_tab">
    contenu onglet accueil
  </div>
  <div class="tab-pane fade" id="adh_coordonnee" role="tabpanel" aria-labelledby="adh_coordonnee_tab">
    contenu onglet coordonnées
  </div>
</div>
<!-- css => .tab_content {background-color: #FFF; padding:0.5em; margin-bottom:1em;} -->

Quelques ressources...

L'éditeur VSCode

Installation et aide

Aide à la saisie

Raccourcis clavier de VSCode

Extension Live Server

Contrôle du code et débogage

HTML

Quelques ressources...

Utiliser les balises HTML

Afficher un favicon

CSS

Quelques ressources...

L'ordre des styles en cascade et les priorités (poids)

Les sélecteurs et combinateurs CSS

Les pseudo-classes

Les pseudo-éléments

after et before

D'autres pseudo-éléments

Le positionnement en CSS

Flexbox et Grid : la révolution de la mise en page Web !

Les variables CSS

Les animations CSS

Tutoriels et packs d'animations

Les transformations (exemples sur W3School)

Les transitions (exemples sur W3School)

Les animations via les @keyframes

Code de l'animation

Élément à animer

Les propriétés de l'animation

Javascript

Quelques ressources...

Fonctions liées aux textes

Quelques fonctions courantes

CopierCopier le contenu d'un input ou d'un textarea dans le presse-papiers (V1)

CopierCopier le contenu d'un input ou d'un textarea dans le presse-papiers (V1)

CopierDécoder en base 64 en gérant les caractères spéciaux

CopierEncoder en base 64 en gérant les caractères spéciaux

CopierCopier le contenu d'un input ou d'un textarea

CopierRécupérer le nom du fichier via le chemin, sans l'extension

CopierSupprimer les accents d'une chaine

CopierSupprimer les caractères interdits dans les noms de fichier

CopierSupprimer les crochets

CopierSupprimer les crochets, les barres obliques et les underscores

CopierTélécharger un fichier texte

CopierTrouver le nombre d'occurrences

Fonctions liées aux tableaux

Quelques fonctions courantes

CopierCloner un tableau via Json

CopierMélanger les éléments d'un tableau

CopierSupprimer les doublons d'un tableau

CopierTrier un tableau sans tenir compte de la casse

Fonctions liées aux nombres

Quelques fonctions courantes

CopierObtenir un nombre aléatoire

CopierObtenir un nombre aléatoire différent de tel nombre

Fonctions liées aux dates

Quelques fonctions courantes

CopierAfficher la date avec - comme séparateur

CopierConvertir des millisecondes

Fonctions liées aux durées

Exécuter une fonction après un délai défini

Exécuter une fonction à intervalles réguliers

Fonctions liées à l'affichage

Afficher une boîte de dialogue (W3s)

Mettre le focus dans un champ input text

CopierCréer un message Flash

CopierCréer un message de simulation d'alerte

CopierCréer un message de simulation d'alerte, avec choix du focus

CopierCréer un message de simulation d'alerte, avec interruption et... (si jeu multijoueurs)

CopierCréer un message de simulation de Confirm

CopierAfficher une info flash en haut de page

CopierCréer une boîte de confirmation

Fonctions liées à la navigation et aux URL

CopierChanger d'onglet

CopierGérer la flèche de retour en haut de page

CopierModifier l'URL

CopierRécupérer certaines parties de l'URL

Fonctions liées aux sons et à la synthèse vocale

CopierLire en synthèse vocale

Copier le contenu d'un input ou d'un textarea dans le presse-papiers (V1)

Copier le contenu d'un input ou d'un textarea dans le presse-papiers (V1)

Décoder en base 64 en gérant les caractères spéciaux

Encoder en base 64 en gérant les caractères spéciaux

Copier le contenu d'un input ou d'un textarea

Récupérer le nom du fichier via le chemin, sans l'extension

Supprimer les accents d'une chaine

Supprimer les caractères interdits dans les noms de fichier

Supprimer les crochets

Supprimer les crochets, les barres obliques et les underscores

Télécharger un fichier texte

Trouver le nombre d'occurrences

Cloner un tableau via Json

Mélanger les éléments d'un tableau

Supprimer les doublons d'un tableau

Trier un tableau sans tenir compte de la casse

Obtenir un nombre aléatoire

Obtenir un nombre aléatoire différent de tel nombre

Afficher la date avec - comme séparateur

Convertir des millisecondes

Créer un message Flash

Créer un message de simulation d'alerte

Créer un message de simulation d'alerte, avec choix du focus

Créer un message de simulation d'alerte, avec interruption et... (si jeu multijoueurs)

Créer un message de simulation de Confirm

Afficher une info flash en haut de page

Créer une boîte de confirmation

Changer d'onglet

Gérer la flèche de retour en haut de page

Modifier l'URL

Récupérer certaines parties de l'URL

Lire en synthèse vocale

Ecouter un son MP3

Fonctions utilisées dans le Texte Mystère v2

Exécuter le code après le chargement de la page

Avec la méthode "click"

Avec la méthode "on"

Déclencher en sélectionnant une option d'un select

Détecter la touche Echap

Valider un input en détectant la touche Entrée

Valider un input avec la fonction change

Exécuter un script à chaque entrée dans un champ input

Générer dynamiquement un QRCode avec jQuery QRCode (Télécharger)

Trier, naviguer et rechercher dans des tableaux html avec Datatables (Télécharger)

Modales (doc W3School)

Navbar (doc W3School)

Onglets (doc W3School)