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.writenavigator.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.writeBrowserDetect.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: Creation
//######

function Affiche_Dimensions_Ecran() {

var 
Lrg "";
var 
Htr "";

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

let Rtio devicePixelRatio;
Rtio Number.parseFloatRtio ).toFixed);

document.write"<p>DevicePixelRatio : <b>" );
document.writelnRtio "</b> - Profondeur Couleur : <b>" Colr  "</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> (<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');

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.parseFloatLrg ).toFixed);
  
Htr Number.parseFloatHtr ).toFixed);

  
span_Lrg.textContent Lrg;
  
span_Htr.textContent Htr;
  
span_Typ.textContent Typ;
}

Update_Dimensions();
window.onresize Update_Dimensions;

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

Lrg2 Number.parseFloatLrg2 ).toFixed);
Htr2 Number.parseFloatHtr2 ).toFixed);

document.write"<p>Dimensions écran : <b>" );
document.writelnLrg2 " x "  Htr2  "</b></p>" );

// >>>> 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_Cookiep_Name ) {

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

  var 
i,x,y;

  for ( 
0TabCookies.lengthi++ ) {
    
TabCookies].substr0,TabCookies].indexOf"=" ) );
    
TabCookies].substrTabCookies].indexOf"=" ) + );
    
x.replace( /^\s+|\s+$/g"" );
    if ( 
== p_Name ) {
      return 
unescape);
    }
  }
}

function 
Set_Cookiep_Namep_ValueP_Days ) {

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

  var 
c_valuec_datex;

  
c_value escapep_Value );
  
c_datex = ( ( P_Days == null ) ? "" "; expires=" exdate.toUTCString() );

  
document.cookie p_Name "=" c_value c_datex

  var 
OptionsDate_ExpirationDate_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 
0Date_Expiration.lengthn++ ) {
    if ( 
Date_Expiration.charCodeAt) != 8206 ) {
      
Date_Edge += Date_Expiration];
    }
  }

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

var 
hexcolor '#0000FF':

document.body.style.backgroundColor hexcolor;

Set_Cookie"MASi_BackGroundColor"hexcolor);

Afficher les Cookies actuellement utilisés

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

function 
Affiche_Cookiesp_NomPCp_Proxyp_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 keyval;

for ( 
let KC 0KC TabCookies.lengthKC++ ) {
  
key TabCookiesKC ].substr0TabCookiesKC ].indexOf"=" ) );
  
val TabCookiesKC ].substrTabCookiesKC ].indexOf"=" ) + );
  
key key.replace( /^\s+|\s+$/g"" );

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

let LgrTextArea TabC.length 1;
  
if ( 
TabC.length ) {
  
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 0KC TabC.lengthKC++ ) {
  
let key_val TabCKC ];

  
key TabCKC ].substr0TabCKC ].indexOf"=" ) );
  
val TabCKC ].substrTabCKC ].indexOf"=" ) + );

  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 ) {
  
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 ) {
  
document.writeln'</fieldset>' );
  
document.writeln'</form>' );
}

b_Autres false;

for ( 
let KC 0KC TabCookies.lengthKC++ ) {
  
key TabCookiesKC ].substr0TabCookiesKC ].indexOf"=" ) );
  
val TabCookiesKC ].substrTabCookiesKC ].indexOf"=" ) + );
  
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 0KC TabCookies.lengthKC++ ) {
  
key TabCookiesKC ].substr0TabCookiesKC ].indexOf"=" ) );
  
val TabCookiesKC ].substrTabCookiesKC ].indexOf"=" ) + );
  
key key.replace( /^\s+|\s+$/g"" );

  if ( 
key ) {
    if ( ( ! 
key.startsWith"MASi_" ) ) && ( ! key.startsWith"XSolver" ) ) ) {
      if ( 
val.length 80 val val.substring080 ) + " <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.writep_Proxy ' : <b><a href="https://monip.io">' p_NomPC "</a></b>&nbsp;&nbsp;-&nbsp;&nbsp;" );
}
if ( 
p_IP != undefined ) {
  
document.writep_IP );
}

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

/* Affiche_Cookies */


function Cookies_Suppression() {
  
b_Reload false;
  
  for ( 
let KC 0KC TabCookies.lengthKC++ ) {
    
key TabCookiesKC ].substr0TabCookiesKC ].indexOf"=" ) );
    
val TabCookiesKC ].substrTabCookiesKC ].indexOf"=" ) + );
    
key key.replace( /^\s+|\s+$/g"" );

    if ( 
key && ( val != "NaN" ) ) {
      if ( 
key.startsWith"MASi_" ) || key.startsWith"XSolver" ) ) {
        
NomCookie document.getElementByIdkey );
        if ( 
NomCookie.checked == true ) {
          
//console.log( ' + ' + key );
          
Set_Cookiekey'NaN');
          
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[  ] = "Dimanche";
  
TabJ[  ] = "Lundi";
  
TabJ[  ] = "Mardi";
  
TabJ[  ] = "Mercredi";
  
TabJ[  ] = "Jeudi";
  
TabJ[  ] = "Vendredi";
  
TabJ[  ] = "Samedi";

  
let TabM = Array();
  
  
TabM[  ] = "janvier";
  
TabM[  ] = "février";
  
TabM[  ] = "mars";
  
TabM[  ] = "avril";
  
TabM[  ] = "mai";
  
TabM[  ] = "juin";
  
TabM[  ] = "juillet";
  
TabM[  ] = "août";
  
TabM[  ] = "septembre";
  
TabM[  ] = "octobre";
  
TabM10 ] = "novembre";
  
TabM11 ] = "décembre";

  
let Jour TabJDH.getDay() ];
  
let Mois TabMDH.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 ( 
0document.styleSheets.lengthi++ ) {
  
    
let DocStyleSheet document.styleSheets];
  
    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 ( 
0theRules.lengthn++ ) {
    
      
RuleCSS theRules];
    
      if ( 
RuleCSS ) {
        
FStyle += "<p>" +  theRules].cssText "</p>\n";
      }
    }
  }
  
  return 
FStyle;
}

Divers Liens