Les pièges du JavaScript

Concaténer au lieu d'additionner

Cliquez sur l'image pour l'agrandir

Le code HTML de correspondant

... <h1>Les pièges du JavaScript</h1> <img width = "200" height = "150" src ="../images/toucan.jpg" style = "margin : auto ; " > <p><i>Cliquez sur l'image pour l'agrandir</i></p> ...

Le code JavaScript imaginé

var image = document.querySelector('img'); var X = image.getAttribute("width"); var Y = image.getAttribute("height"); image.onclick = function() { X+=20; Y+=15; if (X==400) alert('taille maxi'); image.setAttribute('width',X); image.setAttribute('height',Y); }

Le code ci-dessus est faux !

Avec le code cité ci-dessus l'image atteindrait au premier clic une taille incroyable ...
En effet la méthode getAttribute retourne non pas un entier mais une chaîne numérique c'est à dire une suite de chiffres mais le type de la donnée est string.
Donc suite au premier clic sur l'image les deux opérations effectuées seraient : "200" + 20 et "150"+ 15.
Comme dans chacune des deux opérations l'un des termes est une chaîne il y aurait concaténation (et non pas addition).
Donc après le premier clic, X vaudrait "20020" et Y vaudrait "15015" !

C'est en effet un inconvénient du langage JavaScript : utilisation du même caractère (+) pour deux opérations totalement différentes : addition et concaténation.
Donc dans le cas qui nous intéresse il suffit d'insérer (avant toute tentative d'incrémentation) deux instructions convertissant les chaînes numériques en entier.

X = parseInt(X); Y = parseInt(Y);

Délimiter une chaîne

Si une chaîne contient le caractère apostrophe elle ne peut pas être délimitée par des simples quotes mais par des doubles quotes ou alors il faut échapper la simple quote dans la chaîne : faire précéder la simple quote du caractère \

Attention en JavaScript (comme dans beaucoup de langages) il y a un caractère pour l'opération d'affectation(=) et un autre pour l'égalité (==).
Ainsi pour affecter une valeur initiale à une variable il faut écrire, par exemple : X = parseInt(X)
Pour tester si une variable est égale à une certaine valeur il faut écrire, par exemple : if (X==400)

La syntaxe des propriétés de style

En JavaScript il est interdit d'utiliser le tiret dans un mot car ce caractère signifie soustraction.

Imaginons que vous vouliez via le JavaScript changer la valeur de la propriété CSS background-color d'un noeud noeud ciblé par la variable objet titre.
Syntaxe incorrecte : titre.style.background-color = 'yellow'
Syntaxe correcte : titre.style.backgroundColor = 'yellow' ;

La règle est simple : pour écrire dans un script une propriété de style il faut supprimer le tiret éventuel et remplacer la lettre qui suit par son équivalent en majuscule.

Simplifications syntaxiques

Il y a peut être deux instructions qui vous laissent dubitatif(ve) : x+=20 ; y+=15 ;
En effet au lieu d'écrire : x = x + 20 on peut écrire plus simplement : x+=20
De même au lieu de : x = x - 20 on peut écrire : x-=20
Et si vous voulez changer le signe de delta vous pouvez écrire: delta*=-1 qui remplace : delta = delta * -1
Retour menu