Aide-Mémoire JavaScript

Structures

Tag Javascript

Inclusion du script dans le code HTML.

<script type="text/javascript">
   ...
   ...
</script>

Appel d'un fichier script.

<script type="text/javascript" src="xxxxx.js"></script>

Structures Conditionnelles

Les condition IF .. ELSE de base.

if (condition)
{  ... ;
   ... ;
}

if (condition)
{  ... ;
   ... ;
}
else
{  ... ;
   ... ;
}

if (condition)
{  ... ;
   ... ;
}
else if (condition)
{  ... ;
   ... ;
}
else
{  ... ;
   ... ;
}

Les cas de valeurs de variable.

switch (variable)
{  case valeur1 :
   {  ... ;
      ... ;
      break ;
   }
   case valeur2 :
   {  ... ;
      ... ;
      break ;
   }
   default :
   {  ... ;
      ... ;
      break ;
   }
}

Les ternaires : Il s'agit d'une condition en une ligne.

rep = (age >= 18) ? 'oui' : 'non' ;

Les Boucles

Boucle While.

var i = 0;
while (i <= 10)
{  ... ;
   ... ;
}

Boucle Do.

var i = 0;
do
{  ... ;
   ... ;
}
while (i <= 10) ;

Boucle de 1 à 10.

var i
for (i = 1; i <= 10; i++)
{  ... ;
   ... ;
}

Boucle sur un tableau.

for (indice in UnTableauOuUnObjet)
{  ... ;
   ... ;
}

Gestion des Exception : En cas d'erreur catch est executé. Finally est toujours executé (erreur ou pas).

// -- cas simple
try
{  ... ;
}
catch
{  ... ;
   ... ;
}

// -- cas complet
try
{  ... ;
}
catch
{  ... ;
   ... ;
}
finally
{  ... ;
   ... ;
}

Les Opérateurs Conditionnels

Opérateur	Description
==	Egal à
!=	Différent
<	Inférieur
<=	Inférieur ou égal
>	Supérieur
>=	Supérieur ou égal
&&	Et
||	Ou
===	Identique en type et valeur
!==	Différent en type et valeur
!	Négation de la condition suivante
undefined	Valeur indéfinie
null	Valeur absente

Les Fonctions et objets

Fonction avec retour de valeur.

function ZeFonction(arg1, arg2)
{  ... ;
   ... ;
   return reponse
}
..
var = ZeFonction(1, 2) ;

Objet déclaré en tant que fonction.

function ZeFonction(arg1, arg2)
{  this.prop1 = arg1 ;
   this.prop2 = arg2 ;
}
..
var ZeObj = new ZeFonction(1, 2) ;
alert(ZeObj.prop1) ;

Contrôle de la navigation

Débranchement direct

window.location.replace('http://mfay.free.fr/BorakHTML') ;

Page précédente

window.history.back() ;

Les Variables et Tableaux

Affectation de variables

Une variable déclaré avant les premières fonctions est globale. Si elle est déclarée dans une fonction (avec var) elle est locale.

var VariableNumerique = 128, LeTexte = 'toto' ;
var VariableAlphab1 = "Oh le beau texte" ;
var VariableAlphab2 = 'Oh le beau texte avec un retour chariot. \n' ;
var VariableAlphab4 = 'Oh le beau texte avec une variable ' + LaVariable + ' concaténée.' ;
var VariableBool = false ;
var VariableFloat = 3.141592 ;

Opérations simple

// --- Attribution ---
var i = 5 ;

// --- Ajout de 1 ---
i += 1;

// --- Ajout de 1 ---
i++ ;

// --- Concaténation de chaine ---
var ZeTXT = 'Debut' ;
ZeTXT += '-Fin' ;

Gestion de tableaux

Ajouter des valeurs à partir de 0 (compris).

// Création de tableau
var LeTablo = new Array() ;
var LeTablo = new Array('valeur 1', 2, false) ;

// Affectation
LeTablo[0] = 'valeur 0' ;
LeTablo[3] = 3 ;

// Nombre de lignes
var NbPoste = LeTablo.length ;

Méthodes de tableau

// -- Convertir une chaine avec séparateur en un tableau
var LeTablo = LaChaine.split(',') ;

// -- Pour concaténer trois tableaux en un seul :
var result = LeTablo1.concat(Tablo2, Tablo3) ;

// -- Pour concaténer tous les éléments en une chaine :
var result = LeTablo.toString() ;

// -- Pour concaténer tous les éléments en une chaine avec le séparateur " - " :
var result = LeTablo.join(" - ") ;

// -- Gestion de pile : Ajout d'une valeur à la fin et retrait de la valeur :
LeTablo.push("val") ;
var result = LeTablo.pop() ;   // Retrait à la fin de la pile
var result = LeTablo.shift() ; // Retrait en début de la pile

// -- Inversion du tableau
LeTablo.reverse() ;

// -- Tri
LeTablo.sort() ;
LeTablo.sort(fonctionDeTri) ;

Ouverture d'une fenetre

Ouverture d'une fenetre.

var zefen = window.open("xxx.html", "PopUpWindows", "location=yes,directories=yes,menubar=no,statusbar=no,toolbar=no");
zefen.focus() ;

Fonctions d'affichage

Ecriture de base.

document.write('<p>un texte</p>') ;
document.writeln('<p>un texte</p>') ;

Debuggage.

alert('test') ;

Indéfinition

Variables d'indéfinition.

if (ZeVar == null)
{  alert('Variable non renseignée') ;
}
if (ZeVar == undefined)
{  alert('Variable non définie') ;
}

Debuggage.

alert('test') ;

Fonctions utiles

Fonctions texte.

// --- Calcul de longueur ---
LongueurTexte = ZeVar.length ;

// --- Caractère en position n ---
ZeCar = ZeVar.charAt(n) ;

// --- Recherche de chaine ---
if (ZeVar.indexOf('toto', 0) > -1)
{  res = 'trouvé' ; }

// --- Remplacement de chaine ---
res = ZeVar.replace('old', 'new') ;

// --- Extraction de chaine ---
res = ZeVar.substring(posDeb, posFin) ;
res = ZeVar.substr(posDeb, longueur) ; // Non recommandé

// --- Majucule / Minuscule ---
res = ZeVar.toLowerCase() ;
res = ZeVar.toUpperCase() ; // Non recommandé

Fonctions date.

Date du jour ou date choisie

ZeDate = new date() ;
ZeDate = new date(nbMilliSec) ;
ZeDate = new date(an, mois, jour) ;
ZeDate = new date(an, mois, jour, heure, minute, sec, msec) ;

Différentes fonctions de récupération :

// --- récup Jour, mois, annee, ++ ----
ZeJour  = ZeDate.getDate() ;
Zemois  = ZeDate.getMonth() +1 ;
ZeAnnee = ZeDate.getFullYear() ;
ZeHeure = ZeDate.getHours() ;
ZeMinut = ZeDate.getMinutes() ;
ZeSecon = ZeDate.getSeconds() ;

Transformation en nb de millisecondes écoulée

ZeNbMillisec = ZeDate.getTime() ;

Alimentation des données d'une date :

// --- récup Jour, mois, annee, ++ ----
ZeDate.setDate(LeJour) ;
ZeDate.setMonth(Zemois -1) ;
ZeDate.setFullYear(ZeAnnee) ;
ZeDate.setHours(ZeHeure) ;
ZeDate.setMinutes(ZeMinut) ;
ZeDate.setSeconds(ZeSecon) ;

Jour de la semaine (0 = dimanche)

ZeJour = ZeDate.day() ;

Appel d'une fonction après 5 secondes

setTimeout("ZeFonction()"; 5000);

Fonctions Document.

Ecriture dans le document courant

document.write('<p>un texte</p>') ;

Récupération d'un objet à partir d'un identifiant

var ZeObj = document.getElementById('ZeID') ;

Fonctions Element.

Récupération d'un objet à partir d'un identifiant

var ZeElt = document.getElementById('ZeID') ;

Propriétés d'un élément

// --- Contenu de la classe ---
var ZeClass = ZeElt.className ;

// --- Contenu du Style ---
ZeElt.style.display = 'none' ;

// --- Tag de l'élement (Majuscule en HTML, minuscule en XHTML) ---
var ZeVar = ZeElt.tagName ;

// --- Contenu de l'élement ---
var ZeVar = ZeElt.innerHTML ;

// --- Position de l'élement ---
var posY = ZeElt.offsetTop ;
var posX = ZeElt.offsetLeft ;

Fonctions Mathématique.

// --- PI ---
var ZeVar = Math.PI ;

// --- conversion texte en nombre ---
var nb = number(ZeText) ;

// --- Valeur Absolue, ou arrondi ---
var ZeVar = Math.abs(ZeNb) ;
var ZeVar = Math.floor(ZeNb) ;
var ZeVar = Math.ceil(ZeNb) ;
var ZeVar = Math.round(ZeNb) ;

// --- Maximum / Minimum ---
var ZeVar = Math.max(1, 2, ...) ;
var ZeVar = Math.min(1, 2, ...) ;

// --- Position de l'élement ---
var posY = ZeElt.offsetTop ;
var posX = ZeElt.offsetLeft ;

Fonctions GET

Récupération des variables en GET

// --- Récupération des variables en GET ---
var var01 = "" ;
var var02 = "" ;
if (location.search.length > 1)
{  var zeget = location.search.split("?")[1] ;
   if (zeget != undefined)
   {  var tabi ;
      var tabget = zeget.split("&") ;
      for (tabi in tabget)
      {  // -- Récupération variable : var01 --
         if (tabget[tabi].split("=")[0] == 'var01')
         {  var01 = tabget[tabi].split("=")[1] ;
         }
         // -- Récupération variable : var02 --
         if (tabget[tabi].split("=")[0] == 'var02')
         {  var02 = tabget[tabi].split("=")[1] ;
         }
}  }  }

// --- Récupération des variables en GET dans un tableau "recupGET" ---
var recupGET = new Array() ;
if (location.search.length > 1)
{  var zeget = location.search.split("?")[1] ;
   if (zeget != undefined)
   {  var tabi ;
      var tabget = zeget.split("&") ;
      for (tabi in tabget)
      {  recupGET[tabget[tabi].split("=")[0]] = tabget[tabi].split("=")[1] ;
}  }  }

// --- Affichage variable
if (recupGET('var01') != undefined)
{ alert(recupGET('var01')) ; }

Fonctions Hauteur / Largeur de la page.

Il faut un doctype valide, pour cette fonction

// ----- Recuperation de la taille de la fenetre
function largeur_fenetre() 
{  var t1 = 0 ;
   var t2 = 0 ;
   if (document.documentElement && document.documentElement.clientWidth)
      {  t1 = document.documentElement.clientWidth; }
   if (document.body && document.body.clientWidth)  
      {  t2 = document.body.clientWidth; }
   if (t2 > t1) 
      {t1 = t2; }
   if (t1 > 0) 
      {return t1 ;}
   if (typeof(window.innerWidth) == 'number')
      {  t1 = window.innerWidth; } 
   return t1 ;
}
function hauteur_fenetre() 
{  var t1 = 0 ;
   var t2 = 0 ;
   if (document.documentElement && document.documentElement.clientHeight)
      {  t1 = document.documentElement.clientHeight; }
   if (document.body && document.body.clientHeight)  
      {  t2 = document.body.clientHeight; }
   if (t2 > t1) 
      {  t1 = t2; }
   if (t1 > 0) 
      {  return t1 ;}
   if (typeof(window.innerHeight) == 'number')
      {  t1 = window.innerHeight; } 
   return t1 ;
}

Fonctions DOM

Déplacement dans le DOM

// --- Récupération d'un objet par son identifiant ---
var obj = document.getElementById(identifiant) ;

// --- Récupération de tous les DIV dans un tableau ---
var tabdiv = document.getElementsByTagName('div') ;

// --- Récupération de tous les tr d'un tableau dans un tableau ---
var tabtr = UnTableau.getElementsByTagName('tr') ;

// --- Récup de l'attribut ---
var zeattr = obj.getAttribute("style") ;

// --- Récupération de l'objet parent ---
var papa = obj.parentNode ;

// --- Récupération du premier/dernier fils ---
var fiston = obj.firstChild ;
var fiston = obj.lastChild ;

// --- Récupération des frangins suivants / précédents ---
var freresuiv = obj.nextSibling ;
var frereprec = obj.previousSibling ;
// null si on ne trouve pas l'objet.

// --- Type de l'objet (minuscule en xhtml, sinon maj.)
var zetype = obj.tagName ;

Gestion d'un objet

// --- Ajout d'un style ---
obj.style.display = "non" ;

// --- Test d'une classe ---
if (obj.className.indexOf('zeclass') > -1) { ... }


// --- Test d'un attribut ---
if (obj.hasAttribute("style") { ... }

// --- Retrait d'une classe ---
obj.className = obj.className.replace('zeclass', '')

// --- Ajout d'un contenu ---
obj.innerHTML = "coucou" ;

// --- Ajout d'une action de click ---
obj.onclick = function() { this.style.display = "none" ; }

// --- Ajout d'un attribut ---
obj.setAttribute("zeattribut", "valeur") ;

// --- Retrait d'un attribut ---
obj.removeAttribute("zeattribut") ;

// --- Retrait du dernier fils / d'un objet ---
zeparent.removeChild(zeparent.lastChild) ;
obj.parentNode.removeChild(obj) ;

// --- Création d'un element en fin de liste ---
var newobj = document.createElement("div") ;
zeparent.appendChild(newobj) ;

// --- Création d'un element en début de liste ---
var newobj = document.createElement("div") ;
zeparent.insertBefore(newobj, zeparent.firstChild) ;

// --- Ajout d'un texte dans un element créé ---
var newobj = document.createElement("div") ;
var newtxt = document.createTextNode("un ptit texte pour le div") ;
newobj.appendChild(newtxt) ;

// --- Fonction d'insertion à la suite ---
function insertApres(newobj, cible)
{  var objaft = cible.nextSibling ;
   if (objaft == null)
   {  cible.parentNode.appendChild(newobj) ; }
   else
   {  cible.parentNode.insertBefore(newobj, objaft ) ; }
}

// --- Insertion à la suite d'un contenu ---
obj.insertAdjacentHTML('afterEnd','<li>Hiver</li>') ;

// --- Fonction d'ajout/retrait d'une classe 
function ajoutClasse(id, cl)
{  var ob = document.getElementById(id) ;
   var avant = ob.className ; 
   if (avant.indexOf(cl) < 0)
   {  ob.className = cl + ' ' + avant ;}
}
function retraitClasse(id, cl)
{  var ob = document.getElementById(id) ;
   var avant = ob.className ; 
   ob.className = avant.replace(cl + ' ','').replace(cl,'') ; 

Fonctions Image

Mise en cache d'une image.

var t = new image() ;
t.src = url ;

Position d'un objet

Comment récupérer la position d'un objet pour en placer un autre en absolute.

var posT = ZeSource.offsetTop ;
var posL = ZeSource.offsetLeft ;
var zeprt = ZeSource.offsetParent ; // on remonte jusqu'au bout.
while (zeprt != undefined && zeprt != null)
{  posT += zeprt.offsetTop ;
   posL += zeprt.offsetLeft ;
   zeprt = zeprt.offsetParent ;
}
ZeCible.style.left = posL + 'px';
ZeCible.style.top = posT +'px' ;

Comment récupérer la position d'un objet pour en placer un autre en absolute (limite au 1er div).

var posT = ZeSource.offsetTop ;
var posL = ZeSource.offsetLeft ;
var zeprt = ZeSource.offsetParent ; // on remonte jusqu'au div préc.
while (zeprt != undefined && zeprt != null && zeprt.nodeName != 'DIV')
{  posT += zeprt.offsetTop ;
   posL += zeprt.offsetLeft ;
   zeprt = zeprt.offsetParent ;
}
ZeCible.style.left = posL + 'px';
ZeCible.style.top = posT +'px' ;

Timer

Pour activer un timer de 5 secondes.

Var ZeTimer = setTimeout("ZeFonctionCible()", 5000);

Pour désactiver le timer.

window.clearTimeout(ZeTimer) ;

Programmation Objet

Création d'une classe.

Technique de création

// --- Création type 1 ---
function MaClass(c1, c2)
{  // -- Propriété 1
   this.prop1 = c1 ;
   // -- Propriété 2
   this.prop2 = c2 ;
   // -- Méthode 1
   this.getProp1 = function()
   {  return this.prop1 ;
   }
   // -- Méthode 2
   this.setProp1 = function(val)
   {  this.prop1 = val ;
   }
}

Utilisation d'une classe.

// --- Création d'une itération ---
ZeObj = new MaClass('toto', 'tutu') ;

// --- Modification d'une propriété
ZeObj.prop1 = "Coucou" ;

// --- Appel de méthodes
ZeObj.setProp1('Ca marche');
var recup = ZeObj.getProp1() ;

Utilisation d'un Prototype.

Le fait d'alimenter la propriété "prototype" d'une classe avec une fonction, va permettre d'ajouter à cette classe tous les elements de la fonction. Ca marche avec des classes existantes comme "Date".

// --- Création d'une classe 1 et 2 ---
function MaFonctionProto()
{  return this.prop1 + ' ' + this.prop2 ;
}
function MaClass(c1, c2)
{  // -- Propriété 1
   this.prop1 = c1 ;
   // -- Propriété 2
   this.prop2 = c2 ;
}
MaClass.prototype.concat = MaFonctionProto ;

// --- Création de l'itération
ZeObj = new MaClass('toto', 'tutu') ;

// --- Appel de la fonction du prototype
var recup = ZeObj.concat() ;