Validateur JS

Bonjour à tous et bonne soirée!
Existe t-il l'équivalent du validateur w3c pour javascript? C'est a dire un outil qui permettrais d'inserer un script et de savoir quelle fonctions sont déconseillées ou carréments invalides.
Edit: Oups j'ai pas verifié si la question a été déja posée, je vais voir...
Modifié par matmat (12 Jan 2007 - 20:35)

Salut,

Tu peux utiliser JsLint, qui te permettra déjà de valider ta syntaxe. Pour ce qui est des fonctions déconseillées, pas à ma connaissance.

Merci, c'est super ce site, par contre je n'ai pas compris une des réponses qu'il me donne: j'apelle une fonction comme ça: MaFunction(); et il me dit :
"missing "new" for new declaration of constructor".
Sinon pour les fonctions déconseillées existe t-il des sites qui les réferencient, et question associée, est ce qu'en utilisant uniquement ECMAscript, on peu avoir des problémes quand même selon les navigateurs (aprés IE4 et NS4).
Modifié par matmat (12 Jan 2007 - 20:58)

matmat a écrit :
Merci, c'est super ce site, par contre je n'ai pas compris une des réponses qu'il me donne: j'apelle une fonction comme ça: MaFunction(); et il me dit :
"missing "new" for new declaration of constructor".

Ah... Est-ce que tu as un exemple de code plus complet qui cause cet avertissement ? Peut-être qu'il considère qu'une fonction commençant par une majuscule est un constructeur.

matmat a écrit :
Sinon pour les fonctions déconseillées existe t-il des sites qui les réferencient, et question associée, est ce qu'en utilisant uniquement ECMAscript, on peu avoir des problémes quand même selon les navigateurs (aprés IE4 et NS4).

Tu peux trouver pas mal d'infos dans les tables de compatibilité de Quirks Mode.

Je ne sais pas exactement où est la limite entre ECMAScript et JavaScript. IE 5 ne supporte pas Array.push et Array.pop.
Modifié par Julien Royer (14 Jan 2007 - 19:00)

a écrit :
Peut-être qu'il considère qu'une fonction commençant par une majuscule est un constructeur

C'est exactement ça, sans les majuscules ça marche. Pourquoi js attribut-il des propritées differentes aux fonctions celon si elle sont en minuscule ou en majuscule?

matmat a écrit :
C'est exactement ça, sans les majuscules ça marche. Pourquoi js attribut-il des propritées differentes aux fonctions celon si elle sont en minuscule ou en majuscule?

Un code valide JavaScript peut générer des erreurs avec JsLint. C'est un outil qui vérifie entre autres certaines conventions d'écriture (dont le fait que seuls les constructeurs commencent pas une majuscule, apparemment). Après, ces conventions peuvent être discutables, de toute façon cet outil est développé par un développeur "indépendant" (Douglas Crockford).

Ok, donc ça veut dire qu'il n'y aucun souci a mettre des majuscules au nom des fonctions? Ou alors il s'appui sur des conventions établies ou qui vont s'établir et qu'il faut mieux prendre l'habitude de respecter? Ceci dit il m'a corrigé d'autre trucs qui m'ont bien aidé.

Apparament ça dépent des cas, pour d'autres scripts qui ont des fonctions en majuscules il ne me sort pas la même erreur. mystére...

A mon avis, c'est plutôt à l'appel de la fonction qu'il voit si c'est un constructeur (d'ailleurs, c'est le seul endroit où il peut le voir, grâce au mot-clé new).

Le fait de mettre une majuscule aux constructeurs est une convention d'écriture assez répandue, pour répondre à ta question.

Je vais dévié un peu le sujet mais j'ai fait par curiosité le test suivant:
Voilà un le même code (un peu foireux je sais)en mode fonction:

function GetCursor(e) {
  if (navigator.appName.indexOf("Explorer") > -1) {
    curY = event.clientY;
    curX = event.clientX;
  }
  else{
    curY = e.clientY;
    curX = e.clientX;
  }
}

et en mode constructeur:

function GetCursor(e) {
  if (navigator.appName.indexOf("Explorer") > -1) {
    this.curY = event.clientY;
    this.curX = event.clientX;
  }
  else{
    this.curY = e.clientY;
    this.curX = e.clientX;
  }
}

et voici le code qui a besoin de GetCursor (pour récuperer la position de la souris, vous l'avez compris). Dans un cas:

function OpenOrClose(e){
if (Move == 1){
    Speed = 0;
    Cursor = new GetCursor(e);
    if ((largeur-Cursor.curX)<50 && Cursor.curY>50){
        d = new Date().getTime();
        setTimeout(SlideOpen,80);
        Move = 0;
    } 
    if ((largeur-Cursor.curX)>SizeZone){
        d = new Date().getTime();
        setTimeout(SlideClose,80);
        Move = 0;
    }
    
  }
} 

et dans l'autre:

function OpenOrClose(e){
if (Move == 1){
    Speed = 0;
    GetCursor(e);
    if ((largeur-curX)<50 && curY>50){
        d = new Date().getTime();
        setTimeout(SlideOpen,80);
        Move = 0;
    } 
    if ((largeur-curX)>SizeZone){
        d = new Date().getTime();
        setTimeout(SlideClose,80);
        Move = 0;
    }
    
  }
} 

Quelle est la meilleur methode, dans quelle cas utiliser un constructeur et dans quel cas un fonction?
Modifié par matmat (12 Jan 2007 - 21:49)

En tout cas, je te déconseille la solution avec les variables globales. Si tu n'as pas lu les tutoriels JavaScript d'Alsacréations, je te les conseille.
Modifié par Julien Royer (12 Jan 2007 - 22:03)

Si effectivement j'ai lu quelques passages dont l'un sur le sujet, mais par exmple dans ce cas c'est difficile de faire autrement. Enfin plutot je n'ai pas su faire autrement comme dans pas mal d'autre cas d'ailleur. Mais peut-être que justement en utilisant les constructeurs cela peut-être une solution.

Une autre solution :

function getCursor(e) {
  e = e || window.event;
  return [e.clientX, e.clientY];
}

ou

function getCursor(e) {
  e = e || window.event;
  return {"x": e.clientX, "y": e.clientY};
}

Modifié par Julien Royer (12 Jan 2007 - 22:06)

Je ne serais pas te dire pourquoi mais ça ne marche que comme ça (sur IE):

function getCursor(e) {
  Ev = e || window.event;
    curY = Ev.clientY;
    curX = Ev.clientX;
  return [curY, curX];
}

Par contre ça ne marche pas dutout.

function getCursor(e) {
  e = e || window.event;
  return {"x": e.clientX, "y": e.clientY};
}

Modifié par matmat (12 Jan 2007 - 22:45)

Les deux solutions marchent bien chez moi :

function getCursor(e) {
  e = e || window.event;
  return [e.clientX, e.clientY];
}

document.onclick = function(e) {
  var cursor = getCursor(e);
  alert(cursor[0] + "|" + cursor[1]);
};

function getCursor(e) {
  e = e || window.event;
  return {"x": e.clientX, "y": e.clientY};
}

document.onclick = function(e) {
  var cursor = getCursor(e);
  alert(cursor.x + "|" + cursor.y);
};

Modifié par Julien Royer (12 Jan 2007 - 23:00)

Pardon, c'est moi qui ne connais pas bien ce genre de raccourcis, ça marche effectivement trés bien.
Modifié par matmat (12 Jan 2007 - 23:17)

matmat a écrit :
Pardon, c'est moi qui ne connais pas bien ce genre de raccourcis, ça marche effectivement trés bien.

Ca permet de simplifier le code, je trouve.

Dans le même etat d'esprit est ce que tu aurais une idée pour améliorer celui ci:

function getWindow() {

pageWidth = window.innerWidth;
pageWidth = (pageWidth)? pageWidth: document.documentElement.clientWidth;
pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;

pageHeight = window.innerHeight;
pageHeight = (pageHeight)? pageHeight: document.documentElement.clientHeight;
pageHeight = (pageHeight)? pageHeight: document.body.clientHeight;

return [pageWidth, pageHeight];
}

C'est deux fonctions qui sont généralement un peu prise de tête, récuperer le curseur et la dimension, d'ailleur a ce sujet, tres interressant le tableau du lien que tu as mis précedement.
Modifié par matmat (12 Jan 2007 - 23:31)

celle là aussi est asser pratique:

function setOpacity(obj){
    obj.style.opacity = xOpacity;
   obj.style.MozOpacity = xOpacity;
   obj.style.filter = 'alpha(opacity=' + (xOpacity*100) + ')';
}

Ce pourrait être pratique de faire une listes de fonctions pour simplifier l'adaptation aux différents navigateurs.
Modifié par matmat (12 Jan 2007 - 23:37)

Salut,

function GetCursor(e) {
  if (navigator.appName.indexOf("Explorer") > -1) {
    this.curY = event.clientY;
    this.curX = event.clientX;
  }
  else{
    this.curY = e.clientY;
    this.curX = e.clientX;
  }
}

matmat a écrit :
Quelle est la meilleur methode, dans quelle cas utiliser un constructeur et dans quel cas un fonction?

Le constructeur est plus souple d'utilisation. Généralement, c'est préférable dans le cadre d'une bibliothèque que tu souhaites agrandir malgré que ça puisse augmenter légérement le volume de code (dans un premier temps)... sauf que...

Opera comprend ceci :

if(navigator.appName.indexOf("Explorer") > -1)

et ce n'est généralement pas une bonne idée que de tester par rapport au nom d'un navigateur (il vaut mieux tester les codes propriétaires) donc il vaudrait mieux écrire :

if(document.attachEvent)

par exemple ou, au pire, ajouter à ton code précédent :

if(!window.opera && navigator.appName.indexOf("Explorer") > -1)

Par ailleurs, si tu mets this, le jour où tu passes avec des événements de type DOM-2, ça ne fonctionnera plus pour IE. Le mieux, c'est de créer un paramètre (argument) supplémentaire pour ta fonction et de le mettre à la place du this.

Pour les variables globales, je ne comprends pas ici en quoi elles te seraient utiles.

Et dans ta dernière fonction, tu peux mettre :

function setOpacity(obj, xOpacity)
{
   var objStyle = obj.style;
   objStyle.opacity = objStyle.MozOpacity = objStyle.KhtmlOpacity = xOpacity;
   objStyle.filter = 'alpha(opacity=' + xOpacity * 100 + ')';
}

Modifié par koala64 (13 Jan 2007 - 00:03)