Maison des Arts et des Sciences Informatiques

HTML et JavaScript

Plan

Connaître le nom de la page qui a précédé la page courante en JavaScript

var PrevPage = document.referrer;
if ( PrevPage != "" ) {
  document.writeln( "<p>Vous êtes arrivé sur cette page grâce à la page :</p>" );
  document.writeln( "<p><b>" + PrevPage + "</b></p>" );
}

Connaître la plateforme du navigateur utilisé en JavaScript

document.write( navigator.platform );

Ce qui donne comme résultat :

Connaître le navigateur utilisé en JavaScript

  • Déclarer l'utilisation du script « BrowserDetect.js » dans la partie HEAD du fichier HTML :
<script type="text/javascript" src="JavaScript/BrowserDetect.js"></script>

  • L'objet « BrowserDetect » permet de connaître le nom du navigateur et sa version
  • Il permet aussi de connaître le système d'exploitation utilisé
document.write( "Votre Navigateur : <b>" );
document.write( BrowserDetect.browser + " " + BrowserDetect.version + "</b>" );
document.write( "&nbsp;&nbsp; - &nbsp;&nbsp;" );
document.write( "Votre Système : <b>" + BrowserDetect.OS + "</b></p>" );

Ce qui donne comme résultat :

  • Le script « BrowserDetect.js » utilise les attributs de la variable navigator :
document.writeln( "<p style='color:blue;'>Attribut navigator.appName" );
document.writeln( " &nbsp;&rArr;&nbsp; <b>" + navigator.appName + "</b></p>" );
document.writeln( "<p style='color:blue;'>Attribut navigator.userAgent &nbsp;&rArr;</p> " );
document.writeln( "<p><b>" + navigator.userAgent + "</b></p>" );

Ce qui donne comme résultat :

  • Navigateur déduit du UserAgent :

Afficher le nom du domaine et l'URL en JavaScript

document.writeln( "<p style='color:blue;'>Attribut window.location.hostname" );
document.writeln( " &nbsp;&rArr;&nbsp; <b>" + window.location.hostname + "</b></p>" );
document.writeln( "<p style='color:blue;'>Attribut window.location.href &nbsp;&rArr;</p>" );
document.writeln( "<p><b>" + window.location.href + "</b></p>" );

Ce qui donne comme résultat :

Dimensions de l'écran et de la fenêtre du navigateur

//######
//## Ex-Dimensions.js
//## ==========================
//## http://www.quirksmode.org/js/detect.html pr detection Browser (16 octobre 2012)
//##
//## 23.01.2023: Création
//## 14.12.2024: 
//######

function Affiche_Dimensions_Ecran() {

var Lrg = "";
var Htr = "";

let devicePixelRatio = window.devicePixelRatio || 1;
let Colr = screen.colorDepth;

let Rtio = devicePixelRatio;
Rtio = Number.parseFloat( Rtio ).toFixed( 2 );

let Lrg2 = screen.width  * devicePixelRatio;
let Htr2 = screen.height * devicePixelRatio;

Lrg2 = Number.parseFloat( Lrg2 ).toFixed( 0 );
Htr2 = Number.parseFloat( Htr2 ).toFixed( 0 );

document.write( "<p>Dimensions écran : <b>" );
document.writeln( Lrg2 + " x "  + Htr2  + "</b></p>" );

document.write( "<p>Dimensions de votre fenêtre : <b>" );
document.write( "<span id='id_Lrg' ></span> x <span id='id_Htr' ></span></b> &nbsp;(<span id='id_Typ' ></span>)</p>" );

let span_Lrg = document.querySelector('#id_Lrg');
let span_Htr = document.querySelector('#id_Htr');
let span_Typ = document.querySelector('#id_Typ');

document.write( "<p>DevicePixelRatio : <b>" );
document.writeln( Rtio + "</b> - Profondeur Couleur : <b>" + Colr  + "</b></p>" );

function Update_Dimensions() {
  let Lrg = "";
  let Htr = "";
  let Typ ="";

  if ( document.all ) {
    Lrg = document.body.clientWidth;
    Htr = document.body.clientHeight;
    Typ = "clientWidth x clientHeight";
  } else {
    Lrg = window.innerWidth;
    Htr = window.innerHeight;
    Typ = " innerWidth  x innerHeight ";
  }

  Lrg = Lrg * devicePixelRatio;
  Htr = Htr * devicePixelRatio;

  Lrg = Number.parseFloat( Lrg ).toFixed( 0 );
  Htr = Number.parseFloat( Htr ).toFixed( 0 );

  span_Lrg.textContent = Lrg;
  span_Htr.textContent = Htr;
  span_Typ.textContent = Typ;
  
} // >>>> Update_Dimensions

Update_Dimensions();
window.onresize = Update_Dimensions;

}// >>>> Affiche_Dimensions_Ecran

L'appel à la fonction Affiche_Dimensions_Ecran() donne :

Changer le style de la couleur de fond

Le changement de couleur sera effectif pendant deux jours pour les pages du site.

La nouvelle couleur est mémorisée dans le cookie « MASi_BackGroundColor »

En cliquant sur le bouton « Changer », vous acceptez d'utiliser les cookies sur le site assomasi.org


function Get_Cookie( p_Name ) {

  var TabCookies = document.cookie.split( ";" );

  var i,x,y;

  for ( i = 0; i < TabCookies.length; i++ ) {
    x = TabCookies[ i ].substr( 0,TabCookies[ i ].indexOf( "=" ) );
    y = TabCookies[ i ].substr( TabCookies[ i ].indexOf( "=" ) + 1 );
    x = x.replace( /^\s+|\s+$/g, "" );
    if ( x == p_Name ) {
      return unescape( y );
    }
  }
}

function Set_Cookie( p_Name, p_Value, P_Days ) {

  var exdate = new Date();
  exdate.setDate( exdate.getDate() + P_Days );

  var c_value, c_datex;

  c_value = escape( p_Value );
  c_datex = ( ( P_Days == null ) ? "" : "; expires=" + exdate.toUTCString() );

  document.cookie = p_Name + "=" + c_value + c_datex; 

  var Options, Date_Expiration, Date_Edge;
  
  Options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

  Date_Expiration  = exdate.toLocaleDateString( 'fr-FR', Options );
  Date_Expiration += " " + exdate.toLocaleTimeString( 'fr-FR' );

  Date_Edge = "";
  for ( var n = 0; n < Date_Expiration.length; n++ ) {
    if ( Date_Expiration.charCodeAt( n ) != 8206 ) {
      Date_Edge += Date_Expiration[ n ];
    }
  }

  document.cookie = p_Name + "_Date_Expiration=" + Date_Edge  + c_datex;
}

var hexcolor = '#0000FF':

document.body.style.backgroundColor = hexcolor;

Set_Cookie( "MASi_BackGroundColor", hexcolor, 2 );

Afficher les Cookies actuellement utilisés

var TabCookies = document.cookie.split( ";" );
var TabC = [];

function Affiche_Cookies( p_NomPC, p_Proxy, p_IP ) {

  document.write( "<p><b>Cookies utilisés</b> " );
  
  document.write( " par le site <b>" +  window.location.hostname + "</b>" );
  document.write( " et avec le navigateur <b>" + BrowserDetect.browser + " " + BrowserDetect.version + "</b>");
  document.writeln( " " + BrowserDetect.OS  + "</p>" );

let key, val;

for ( let KC = 0; KC < TabCookies.length; KC++ ) {
  key = TabCookies[ KC ].substr( 0, TabCookies[ KC ].indexOf( "=" ) );
  val = TabCookies[ KC ].substr( TabCookies[ KC ].indexOf( "=" ) + 1 );
  key = key.replace( /^\s+|\s+$/g, "" );

  if ( key ) {
    if ( key.startsWith( "MASi_" ) || key.startsWith( "XSolver" ) ) {
      let key_val = key + "=" + val;
      if ( TabC.includes( key_val ) === false ) {
        TabC.push( key_val );
      }
     }
  }
}
  
TabC.sort();

let LgrTextArea = TabC.length + 1;
  
if ( TabC.length > 0 ) {
  document.writeln( '<form>' );
  document.writeln( '<fieldset>' );
  document.writeln( '<legend>&nbsp;Sélection des Cookies MASi à supprimer&nbsp;</legend>' );
}

let NbCookies = TabC.length;

for ( let KC = 0; KC < TabC.length; KC++ ) {
  let key_val = TabC[ KC ];

  key = TabC[ KC ].substr( 0, TabC[ KC ].indexOf( "=" ) );
  val = TabC[ KC ].substr( TabC[ KC ].indexOf( "=" ) + 1 );

  if ( val == "NaN" ) {
    NbCookies = NbCookies -1;
  } else {
    document.writeln( '<div>' );
    document.write  ( '  <input type="checkbox" autocomplete="off"' );
    document.writeln( ' id="' + key + '" name="' + key + '" value="' + val + '" />' );
    document.writeln( '  <label for="' + key +'">' + key + ' : ' + val + '</labl>' );
    document.writeln( '</div>' );
  }
}

if ( TabC.length > 0 ) {
  document.writeln( '<div class="p-plus">' );
  document.writeln( '<button type="button" onclick="Cookies_Suppression();">Suppression</button>' );
  document.writeln( '<button type="button" onclick="window.location.reload();">Refresh</button>' );
  document.writeln( '</div>' );
}
 
if ( TabC.length > 0 ) {
  document.writeln( '</fieldset>' );
  document.writeln( '</form>' );
}

b_Autres = false;

for ( let KC = 0; KC < TabCookies.length; KC++ ) {
  key = TabCookies[ KC ].substr( 0, TabCookies[ KC ].indexOf( "=" ) );
  val = TabCookies[ KC ].substr( TabCookies[ KC ].indexOf( "=" ) + 1 );
  key = key.replace( /^\s+|\s+$/g, "" );

  if ( key ) {
    if ( ( ! key.startsWith( "MASi_" ) ) && ( ! key.startsWith( "XSolver" ) ) ) {
      b_Autres = true;
    }
  }
}

if ( b_Autres ) {
  document.writeln( '<form>' );
  document.writeln( '<fieldset>' );
  document.writeln( '<legend>&nbsp;Autres Cookies&nbsp;</legend>' );
}

for ( let KC = 0; KC < TabCookies.length; KC++ ) {
  key = TabCookies[ KC ].substr( 0, TabCookies[ KC ].indexOf( "=" ) );
  val = TabCookies[ KC ].substr( TabCookies[ KC ].indexOf( "=" ) + 1 );
  key = key.replace( /^\s+|\s+$/g, "" );

  if ( key ) {
    if ( ( ! key.startsWith( "MASi_" ) ) && ( ! key.startsWith( "XSolver" ) ) ) {
      if ( val.length > 80 ) val = val.substring( 0, 80 ) + " <b>...</b>";
      document.writeln( '<p style="text-align:left;margin-left:8px">' + key + ' : ' + val + '</p>' );
    }
  }
}

if ( b_Autres ) {
  document.writeln( '</fieldset>' );
  document.writeln( '</form>' );
}

document.write( "<p>" );

if ( p_NomPC != undefined ) {
  document.write( p_Proxy + ' : <b><a href="https://monip.io">' + p_NomPC + "</a></b>&nbsp;&nbsp;-&nbsp;&nbsp;" );
}
if ( p_IP != undefined ) {
  document.write( p_IP );
}

document.write(  "</p>" + "\n" );

} /* Affiche_Cookies */


function Cookies_Suppression() {
  b_Reload = false;
  
  for ( let KC = 0; KC < TabCookies.length; KC++ ) {
    key = TabCookies[ KC ].substr( 0, TabCookies[ KC ].indexOf( "=" ) );
    val = TabCookies[ KC ].substr( TabCookies[ KC ].indexOf( "=" ) + 1 );
    key = key.replace( /^\s+|\s+$/g, "" );

    if ( key && ( val != "NaN" ) ) {
      if ( key.startsWith( "MASi_" ) || key.startsWith( "XSolver" ) ) {
        NomCookie = document.getElementById( key );
        if ( NomCookie.checked == true ) {
          //console.log( ' + ' + key );
          Set_Cookie( key, 'NaN', 0 );
          b_Reload = true;
        } else {
          //console.log( ' - ' + key );
        }
      }
    }
  }
  
  if ( b_Reload )  {
    //console.log( 'Appel : window.location.reload()' );
    window.location.reload();
  }
} /* Cookies_Suppression */

Changer le contenu, l'intérieur d'une balise en JavaScript

Ci-après on a codé un élément (ici un div) avec un identificateur

La classe ne sert qu'à définir le style du div; c'est l'identificateur qui est utilisé pour mettre à jour l'élément

00:00:00

Le codage est le suivant :

On utilise le script « DateHeure.js » suivant pour mettre à jour l'élément :

//######
//## DateHeure.js
//## ================
//## 09.03.2019: Creation @TL@
//## 20.03.2019:
//######

function Affiche_DateHeure() {
  let DH = new Date();

  let TabJ = Array();

  TabJ[  0 ] = "Dimanche";
  TabJ[  1 ] = "Lundi";
  TabJ[  2 ] = "Mardi";
  TabJ[  3 ] = "Mercredi";
  TabJ[  4 ] = "Jeudi";
  TabJ[  5 ] = "Vendredi";
  TabJ[  6 ] = "Samedi";

  let TabM = Array();
  
  TabM[  0 ] = "janvier";
  TabM[  1 ] = "février";
  TabM[  2 ] = "mars";
  TabM[  3 ] = "avril";
  TabM[  4 ] = "mai";
  TabM[  5 ] = "juin";
  TabM[  6 ] = "juillet";
  TabM[  7 ] = "août";
  TabM[  8 ] = "septembre";
  TabM[  9 ] = "octobre";
  TabM[ 10 ] = "novembre";
  TabM[ 11 ] = "décembre";

  let Jour = TabJ[ DH.getDay() ];
  let Mois = TabM[ DH.getMonth() ];
  let Year = DH.getFullYear();

  let str = "";

  str += Jour;
  str += ' ' + DH.getDate();
  str += ' ' + Mois;
  str += ' ' + Year;

  str += '&nbsp; ' + DH.getHours();
  str += ':' + (DH.getMinutes()<10?'0':'') + DH.getMinutes();
  str += ':' + (DH.getSeconds()<10?'0':'') + DH.getSeconds();

  if ( document.getElementById ){
    document.getElementById( "DateHeure" ).innerHTML = str;
  }
}

Ce programme contient des accents et est codé en UTF-8, il faut rajouter dans le dossier qui le contient un fichier « .htaccess » avec le contenu suivant :

Après l'élément à changer on lance le script suivant dans le HTML :

Le script est lancé régulièrement toutes les 1000 millisecondes

Récupération d'une feuille de style

function Recup_Feuille_de_Style_print() {
  
  let theRules = new Array();
  let RuleCSS;
  let FStyle = "";
  
  for ( i = 0; i < document.styleSheets.length; i++ ) {
  
    let DocStyleSheet = document.styleSheets[ i ];
  
    if ( ! DocStyleSheet.media ) {
      continue;
    }
  
    if ( DocStyleSheet.media != "print" ) {
      continue;
    }
  
    if ( DocStyleSheet.rules ) {
      theRules = DocStyleSheet.rules;
    } else if ( DocStyleSheet.cssRules ) {
      theRules = DocStyleSheet.cssRules;
    }
  
    if ( DocStyleSheet.href ) {
      document.write( "<p><b>" + DocStyleSheet.href + "</b></p>\n" );
    } 
    if ( DocStyleSheet.title ) {
      document.write( "<p>" + DocStyleSheet.title + "</p>\n" );
    }
    if ( DocStyleSheet.media ) {
      document.write( "<p>media = " + DocStyleSheet.media + "</p>\n" );
    }
    
    document.write( "<p>Nombre de règles : " + theRules.length + "</p>\n" );
    
    for ( n = 0; n < theRules.length; n++ ) {
    
      RuleCSS = theRules[ n ];
    
      if ( RuleCSS ) {
        FStyle += "<p>" +  theRules[ n ].cssText + "</p>\n";
      }
    }
  }
  
  return FStyle;
}

Divers Liens