Sommaire Javascript

Eléments avancés de JavaScript

Pour accéder à un environnement de développement sommaire permettant de faire les exercices, cliquer ici

Gestion d'erreur

Détection d'objet

On peut vérifier si un navigateur supporte telle ou telle propriété ou méthode avec un code du genre:

if (document.getElementById) //IE 5+ et tous navigateurs modernes
	var divobj=document.getElementById("test")

if (window.screen && window.screen.pixelDepth) //Evite erreur si objet screen non défini
	var screenDepth=screen.pixelDepth
Cela permet aussi de détecter quel navigateur est employé.

Pour vérifier si un élément HTML est supporté, on le crée puis on vérifie l'existence d'une méthode de cet objet.

var test_video= document.createElement("video") 
alert (test_video.play)

try catch

L'exemple ci-dessous permet de traiter une QueryString que l'encodage soit UTF-8 ou ANSI
 try {valeur=decodeURIComponent(valeur);}//UTF-8
 catch (e){valeur=unescape(valeur);} //ISO-8859-1
finally s'exécute même si un return ou un throw se produisent.

onError

Evenement rattaché à l'objet window. Il doit donc être défini dans un élément <SCRIPT> qui lui est propre et au début de la page.
window.onerror=function(msg,url,ligne){
 alert('Erreur '+msg+'\n'+url+':'+ligne)
 return true //supprime le message d'erreur standard
}

Astuce: on peut ainsi rediriger ces messages vers une page dynamque (PHP) pour recevoir les avis d'erreur par email ou les logger. Cela permet de s'aider des surfeurs pour tester sa page avec divers navigateurs.

Caractères accentués

encodages UTF-8 et ISO-8859-1

Expressions régulières

chaine=chaine.replace(/[éèêë]/g,"e");

texte=texte.replace(/=([0-9A-F][0-9A-F])/g , "\&\#x$1;")
enClair="=43=6F=6D=6D=75=6E".replace(/=([A-F0-9]{2})/gi, function(m, g1) { return String.fromCharCode(parseInt(g1, 16)) })
texte=texte.replace(/ =\s/g , ""); // \s = \t ou \n ou espace

msg.substring(debut,fin) msg.length msg.charAt(2) msg.indexOf("jo",[debut]) (position de la première occurence)

resultat=original.replace(rgExp, replaceText)

position=texte.search(rgExp) //-1 si pas trouvé

bool=rgExp.test(texte) //true si trouvé

stringObj.match(rgExp) retourne un tableau dont les éléments de 1 à n correspondent aux sous-chaînes entre parenthèses dans rgExp.

var lNumeroDansNom=nomFichier.match(/[0-9]+/); 
alert(lNumeroDansNom[0]);
Une expression régulière est de la forme: /pattern/gim (pas de guillemets!) Sans le g on ne recherche que la première occurence. Le i permet de signifier que la recherche n'est pas sensible à la casse. Le m permet d'utiliser ^ et $ comme signes de début et fin de lignes.

La méthode split() créé un tableau qui contient tous les éléments trouvés entre le séparateur défini par l'expression régulière
tabNom=chaine.split(/[, ;]+/g); Attention aux éléments vides non pris en compte!

On peut aussi utiliser

var regularexpression = /pattern/[switch]
ou
var regularexpression = new RegExp("pattern",["switch"])

Les +*.?[]^$\n classiques des expressions régulières sont disponibles.

En plus: [.\n] permet de spécifier n'importe quel caractère.
.*? permet de spécifier un mode de sélection "non gourmand".

Voir syntaxe des expressions régulières (ms)

On peut rappeler les éléments capturés par () par \1 dans l'expression régulière et par $1 dans la chaîne de remplacement. $& = élément complet.

On peut utiliser comme second paramètre de replace une fonction. Seront passés en argument: 0: la chaîne complète, 1: la première parenthèse, ...

Tableaux

Array permet de definir des tableaux. Pour créer un tableau nommé mon_tableau il suffit de le déclarer:

var mon_tableau = new Array (); //mon_tableau=[]

On peut aussi remplir directement le tableau lors de sa création, en séparant les éléments par des virgules.

var saison = new Array ('printemps','été','automne');

nom_tableau.length permet de retrouver taille

Pour ajouter un élément au tableau il suffit d'indiquer le rang où l'on veut ajouter l'élément.

saison[3] = 'hiver';

On peut aussi utiliser des indices qui sont des chaînes de caractères (fonctionnement similaire aux objets)
//les notations par [''] et . sont interchangeables
matable=new Array();
matable["nom"]="Toto";
matable.prenom="Tata";
alert(matable.nom +' '+matable["prenom"]);

Les methodes d'Array sont

join(séparateur) pour concaténer tous les éléments du tableau en un seule chaîne de caractères
Rassembler toutes les saisons en les séparants par une tabulation:
var toutes_les_saisons = saison.join('\t');

sort() pour trier un tableau.
Classer les mois par ordre alphabétique:
var mois = mois.sort();
sort(fonction) pour trier un tableau de 0 à 9
var tableau=[25, 8, 7, 41];
tableau.sort(function(a,b){return a-b});
alert(tableau.join(' ')); //7 8 25 41
for (mavariable in [monobjet | montableau]): mavariable prendra tous les indices successivement
obj=navigator;
for (propriete in obj)
	alert (propriete +' = '+obj[propriete])
Tableaux à plusieurs dimensions
var M=[10,[20,30]] //M[1][0] vaut 20
var multTable = new Array(17);
for (var i = 0; i < multTable.length; i++)  { 
    var aRow = new Array(17);  
    for (var j= 0; j < aRow.length; j++)  aRow[j] = (i + " x " + j + " = " + i*j);  
    multTable[i] = aRow; 
}
alert(multTable[3][7]);

Dates

today = new Date() //SYSDATE
noel95 = new Date(1995,11,25,9,30,0) //3 derniers paramètres facultatifs
ATTENTION: 11 = Décembre!!!

toLocaleString() permet de générer une chaîne dont la syntaxe (devrait) dépendre du système.

Méthodes pour obtenir (get) ou changer (set) une partie d'un objet date getDate() jour du mois: 1-31, getDay() 0: Dimanche, getMonth() (0-11), getHours (0-23), getMinutes (0-59), getSeconds (0-59),getMilliseconds (0-999), getFullYear (2001)
On peut insérer UTC après le "get" de chacune des ces méthodes pour travailler en heures TU.
On peut remplacer le "get" par "set" pour chacune des ces méthodes pour modifier une partie de la date.
getTime() retourne format interne: le nombre de millisecondes depuis January 1, 1970, 00:00:00 +0 (comme pour Java)

maDate.getTimezoneOffset() retourne le nb de minutes à ajouter pour obtenir l'heure TU (ex: -120 en été)

millisecondes = maDate.getTime() retourne le nb de millisecondes écoulées depuis le 1/1/70

Date dernière modification à la française:

<SCRIPT> var yann = new Date(document.lastModified); maChaineDate=yann.getDate()+"/"+(yann.getMonth()+1)+"/"+yann.getFullYear(); document.write(maChaineDate); </SCRIPT>

Dates ISO (JSON)

Objets utilisateurs

On peut définir ses propres objets.



//Définition de la classe vecteur au moyen du constructeur
function vecteur(x,y,nom) 
{
  this.x=x;
  this.y=y;
  this.nom=nom;
  this.affiche=affiche;
}

//Méthode de la classe vecteur
function affiche(){alert(this.nom+'='+this.x+'i+'+this.y+'j')}

u=new vecteur(10,-3,'u');
v=new vecteur(4,3,'v');
u.affiche();

 

Les objets pré-définis

Un objet est un regroupement de variables (appelées attributs ou propriétés), fonctions (méthodes) et évènements.
Un évènement se produit en fonction de l'action d'un utilisateur.
Exemple: l'objet fenêtre a pour attributs sa largeur et sa hauteur, il a pour méthodes open() et close() et comme évènement onResize, onFocus, onLoad (liste non exhaustive!)
Un bouton aura pour attribut la valeur qu'il affiche et comme évènement onClick.
Les objets peuvent être non graphiques: l'objet Math a pour attributs les constantes PI, LN2, LN10 et E et pour fonctions cos(x), sqrt(x), pow(x,y), min(a,b), floor(x), round(x), random()...
On accède aux attributs ou aux méthodes des objets en utilisant la syntaxe : nom_objet.nom_attribut et nom_objet.nom_methode()

Exemples: Math.PI, Math.cos(3.1416) Math.floor(Math.random()*6+1)

Note: pour calculer le modulo on utilise "%" (reste=nombre % diviseur)

Des objets peuvent avoir des attributs qui sont d'autres objets.

Dans une page HTML, un certain nombre d'objets pré-définis sont accessibles sans que vous ayez à les créer; ce sont :

On peut lister les propriétés d'un objet et leurs valeurs en utilisant la boucle "for .. in" //essayer aussi navigator, document.body, document obj=location; for (v in obj) alert (v+' '+obj[v]); //essayer aussi navigator, document.body, document

Ainsi pour la page HTML en cours, nous aurons les propriétés suivantes :

Exemples de variables lues dynamiquement

Il y a possibilité en JavaScript de définir dynamiquement une nouvelle valeur pour le fond de votre document ou le contenu de vos formulaires.

 Le schéma suivant illustre la hiérarchie de toutes les classes présentes dans le Navigateur :

Exercice: Changer la couleur de fond en rouge (attribut document.bgColor) le code de la couleur rouge est 'red'

Collections

Il existe un certain nombre de collections:
forms, images, anchors, applets, embeds, areas, links, elements, options (pour un SELECT), frames, anchors, rows, cells (pour un élément <TR>), filters,...

all[] est une collection de tous les éléments
all.tags('IMG') équivalent de images[]

URLs

Caractères spéciaux (URL encodage):
escape("&") retourne "%26" (code ASCII en hexadécimal)
escape("!#") retourne "%21%23"

Minuterie

Déclenchement par: var minuterie=setTimeout('fonctionAAppeler()',tempsEnMs)
Arrêt par: clearTimeout(minuterie);
Le premier argument de setTimeout() est une chaîne de caractères qui sera évaluée au bout de la période indiquée. (Les objets qui y sont mentionnés ne doivent pas avoir été créés "à la volée"). De même pour la persistance, passer par des propriétés d'objet et non par des variables.

Pour avoir une boucle "asynchrone", fonctionAAppeler() sera récurrente:

function fonctionAAppeler() {
...actions...
minuterie=setTimeout('fonctionAAppeler()',tempsEnMs);
}

fonctionAAppeler();

Identifier le navigateur

var is_firefox = /firefox/i.test(navigator.userAgent) if (is_firefox) ... netscape = (navigator.appName == "Netscape"); //Chrome, FF et Safari n4 = netscape && (parseInt(navigator.appVersion) >= 4); explorer = (navigator.appName == "Microsoft Internet Explorer"); ie4 = explorer && (parseInt(navigator.appVersion) >= 4); javascript:void(0) if (n4 || ie4) { ... }

Astuces

Liens spéciaux
A ajouter aux "favoris" puis à appeler de la page à modifier. Recharger la page pour annuler les modifications.

  • niveaux de gris
  • enlever images images sans ALT
  • enlever style
  • Solutions