Cookies

getCookie() :

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  var i, taille = ca.length;
  for(i = 0; i<taille; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

setCookie() :

function setCookie(cname, cvalue) {
  var d = new Date(); d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

  /*
  var msg="Vos préférences ont été enregistrées dans un cookie valable durant 365 jours.";
  alert(msg);
  */
}

deleteCookie(cname) :

        document.cookie = cname+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Code dans 2 fichiers

Le code JS peut être placé dans 2 fichiers JS.

a.js :

var a=2;

b.js :

var b=3;

function afficher(){alert(a+b)} /* affiche 5 */

Afficher la somme

typeof()

Il est parfois utile de travailler avec 2 fichiers JS. Par exemple, lorsqu'un fichier JS (latin.js) permet de modifier la couleur des éléments de toutes les pages du site et qu'un autre (myColors.js) est utilisé dans la page (myColors.htm) qui permet d'enregistrer dans un cookie le code des couleurs préférés.

En effet, la page myColors.htm fera aussi appel au fichier latin.js pour présenter les éléments communs à toutes les pages du site (entête, fond de page, ...) avec les couleurs actuellement enregistrées dans le cookie.

Extrait de latin.js :

/* Affectation des variables nécessaires au cas où il n'existerait pas de cookie.
Le code de la couleur ne peut pas être un nom de couleur à cause des contraintes
de l'attribut value lorsque l'attribut "type" de la balise input est : color */
var bodyBackgroundColor = "#808080";    /* [0] #808080 */
var bodyColor = "#000000";              /* [1] #000000 */
/*...*/

/* fonction appelée par myColors() */
function getCookie(cname) {...}

/* Cette fonction va coloriser la page web */
function myColors() {

  var colors = getCookie("colors");
  var i, taille, tableau;

  if (colors.length>0) {
    var acolors = colors.split("-"); /* n couleurs */
    bodyBackgroundColor=acolors[0];
    bodyColor=acolors[1];
    /*...*/
  }

  if( typeof setCookie() === "function" ){
    document.body.style.backgroundColor = bodyBackgroundColor; /* [0] */
    document.body.style.color = bodyColor;                     /* [1] */
  }else{

    try {
document.getElementById("bodyBackgroundColor").value = bodyBackgroundColor;
document.getElementById("bodyColor").value = bodyColor;
/*...*/    }
    catch(err) {}

  }/* fin du else */

  /*...*/
}

myColors(); /* appel de myColors() au chargement de la page web */

L'instruction d'appel d'une fonction au chargement de la page web est située dans le fichier JS commun à toutes les pages. La fonction appelée contient l'appel à la fonction typeof() dont son paramètre est le nom d'une fonction définie dans le second fichier JS. La valeur de retour de typeof() indique si ce second fichier JS est chargé ou non.

Extrait de myColors.js :

function setCookie() {...}

typeof est un opérateur et non une fonction. Toutefois, on peut mettre entre parenthèses son unique opérande.

L'opérateur typeof() retourne une chaîne qui indique le type de son opérande. : number, string, boolean, undefined, bigint, function, symbole, object

Cet opérateur n'est pas un opérateur de comparaison.

Utilisé dans une comparaison -  pratiquement, c'est son seul usage - l'opérateur de comparaison est === et la string comparée est mise entre apostrophes ou guillemets.

if( typeof setCookie() === "function"" ){...}

Objet : navigator

.clipboard

Il est possible de copier du texte dans le presse-papier ou d'y lire du texte.

navigator.clipboard.writeText("Thibaut PIGNÉ");

Si le code JS est sur internet, le protocole utilisé doit être sûr => forcer le protocole https.

.onLine

Il est parfois nécessaire de savoir si une page web est sur un serveur ou pas. C'est notamment le cas si le code JavaScript doit appeler un fichier (cfr AJAX).

if(navigator.onLine) {...}

navigator.onLine

Objet : window

.location

.protocol

Pour forcer le navigateur à choisir le protocole https :

if(window.location.protocol=="http:")  window.location.protocol="https:" 

Plusieurs scripts

Il est parfois plus pratique de scinder le code JavaScript en deux fichiers. C'est notamment le cas lorsque le code contient des données et des fonctions. Il faut alors veiller à l'ordre d'appel des scripts.

*.htm appelant

Un fichier HTML peut appeler plusieurs fichiers JS. L'ordre d'appel est important.

Typiquement, des fichiers JS contiennent des fonctions (et/ou des données) qui sont utilisées par un fichier JS (appelé en dernier)

*.js appelant

Un fichier JS peut appeler plusieurs fichiers (PHP, JS ...). L'ordre d'appel est important.

Cfr w3js_http

*.js appelant *.php

Typiquement, un fichier JS qui appelle un fichier PHP s'attend à recevoir des données.

*.js appelant *.js

Les données peuvent être stockées dans un fichier JS.

Un fichier JS qui appelle un fichier JS reçoit des données plus rapidement. Les données reçues sont statiques (car elles ne varient pas d'un appel à l'autre)

Ces données peuvent être, par exemple, mensuelles. Le fichier JS les contenant pourrait alors s'appeler : 2022-12.js, 2023-01.js,  ...

Le moyen le plus simple d'appeler dynamiquement un fichier JS est :

let script = document.createElement("script");
script.src = nom_js; document.body.appendChild(script);

Une balise script est créée (dans la mémoire du navigateur).
La valeur de son attribut src est donné (nom_js est le nom du fichier JS).
La balise créée est placée juste avant la balise </body> (en mémoire).