Pour accéder à un environnement de développement sommaire permettant de faire les exercices, cliquer ici
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.pixelDepthCela 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 {valeur=decodeURIComponent(valeur);}//UTF-8 catch (e){valeur=unescape(valeur);} //ISO-8859-1finally s'exécute même si un return ou un throw se produisent.
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.
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, ...
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';
//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
var toutes_les_saisons = saison.join('\t');
var tableau=[25, 8, 7, 41];
tableau.sort(function(a,b){return a-b});
alert(tableau.join(' ')); //7 8 25 41
obj=navigator;
for (propriete in obj)
alert (propriete +' = '+obj[propriete])
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]);
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:
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();
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 :
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'
all[] est une collection de tous les éléments
all.tags('IMG') équivalent de images[]
Caractères spéciaux (URL encodage):
escape("&") retourne "%26" (code ASCII en hexadécimal)
escape("!#") retourne "%21%23"
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();
if (top.location.href!=self.location.href) self.location.href=top.location.href
<a href="http://..." onmousedown="return clk(this)">
function clk(p_lien) { if(document.images) (new Image()).src="/util/compteur.php?url="+escape(p_lien.href); return true;}
function shake(n) { for (i = 10; i > 0; i--) for (j = n; j > 0; j--) {top.moveBy(0,i); top.moveBy(i,0); top.moveBy(0,-i); top.moveBy(-i,0);} }
Liens spéciaux
A ajouter aux "favoris" puis à appeler de la page à modifier. Recharger la page pour annuler les modifications.