11548 sujets

JavaScript, DOM et API Web HTML5

[résolu]Conseil pour bien développer en Jquery !

Pages :
Bonsoir à toutes et à tous,

je commence mon auto formation en jquery. Je vais certainement utiliser souvent ce sujet pour poser toutes sortes de questions. Ainsi je vais numéroter mes question.

1) je cherche à comprendre comment je dois construire mon script.
Dois-je tout faire en Jquery ou consacrer certaines parties au Javascript.

Je prends l'exemple de la déclaration d'une fonction sous Javascript.
/*=========================*/
/*     premier exemple     */
/*=========================*/
function test()
{
	instructions;
}
$(document).ready( function()
{
	$("#bouton").click(test);
});

Voici un autre exemple en Jquery.
/*==========================*/
/*     deuxième exemple     */
/*==========================*/

$(document).ready( function ()
{
	function test ()
	{
		instructions;
	};
	$("#bouton").click(test);
});

Quels sont les différences d'utilisations entre ces deux déclarations de la même fonction ?
Existe-t-il d'autres formes de déclarations ?

@+
Modifié par Artemus24 (01 Jun 2012 - 22:55)
Bonjour,

il faut comprendre une notion importante: jQuery EST du Javascript ! Smiley smile

Concernant tes exemples, le premier est une fonction classique... tout comme le second !

La seule différence est que dans le second exemple, tu demandes au navigateur d'attendre la fin du chargement de la page pour rendre disponible (= déclarer) ta fonction.

Tu aurais pu donc tout à fait écrire ta fonction en dehors du bloc jQuery.


Bien à toi,
Monkey Monk
salut...

en complément.. jQuery est assez "puissant" au niveau JS, du coup dans le .click() tu peux tout aussi bien mettre TA fonction, sans avoir besoin de la préparer avant..

Mais bon ça c'est plus une question d'utilisation finale, que de bonne écriture Smiley cligne
Modérateur
Bonjour,

Il existe une autre manière, plus logique si la fonction n'est pas réutilisée:


$(document).ready( function () {

    $("#bouton").click(function(){
         instructions;
    });

});


edit: Bon ben c'est la même chose que la réponse précédente. Sauf que ce n'est pas la puissance de jQuery, mais bien un standard javascript… l'utilisation de la fonction anonyme comme dans setTimeout(function() { instructions; }, 1000);
Modifié par kustolovic (14 May 2012 - 10:54)
Effectivement, l'utilisation de fonction anonyme est récurrente en Javascript ! Smiley cligne

Par exemple, la fonction "test" aurait pu s'écrire comme ceci :

var test = function(){
 /*instructions*/
};


Cette notation est assez pratique lorsqu'on veut faire des "groupes" de déclaration.
Ex.:

var maVar = 2
   , maVar2 = 3
   , maFunction = function(){
       /*instructions*/
};


Au final, il n'y a qu'un chose d'importante : structurer convenablement son code en fonction des besoins !

Et c'est ce qui est le plus dur... Smiley smile
Toutefois, il existe une différence entre 
function maFonction() {
    // Code
}
Et 
var maFonction = function() {
    // Code
});
Il s'agit du fait que la deuxième est dynamique tandis que la première n'utilisera que la dernière fonction déclarée.

Par exemple :
function alert1() {
    alert(1);
}
alert1(); // Affiche 2

function alert1() {
    alert(2);
}
alert1(); // Affiche 2

var alert1 = function() {
    alert(1);
}
alert1(); // Affiche 1

var alert1 = function() {
    alert(2);
}
alert1(); // Affiche 2

Modifié par Gothor (14 May 2012 - 12:23)
Bien vu Gothor !

C'est un point important. Smiley smile

Et pour le détail, l'un est une déclaration l'autre est une assignation.

Pour bien comprendre, on pourrait aussi écrire ceci :

var test = function test(){ /*instructions*/ };


On assigne la fonction "test" à la variable "test".
monkey_monk a écrit :
Pour bien comprendre, on pourrait aussi écrire ceci :
var test = function test(){ /*instructions*/ };
On assigne la fonction "test" à la variable "test".

Ton exemple est pour le moins ambigu ! Et c'est un peu plus compliqué que cela : dans une expression du type "function functionId() {}", l'identifiant functionId n'est valable qu'à l'intérieur de la portée de la fonction elle-même (contrairement au cas de la déclaration). Exemple :
var f = function g() {
  alert((typeof f) + "|" + (typeof g)); // function|function
};
alert((typeof f) + "|" + (typeof g)); // function|undefined
f();

Il est d'ailleurs préférable d'omettre l'identifiant de la fonction dans une expression car le support de cette fonctionnalité est un peu chaotique suivant les navigateurs.
Bonsoir à toutes et à tous,

je ne m'attendais pas à autant de réponse sur les fonctions et le jquery. Merci !

a) Dans mon exemple, je croyais que la première déclaration ne pouvait accepter des instructions de types Javascript.
J'ai fait le test en introduisant du Jquery : $("bloc").html("<div>Ca marche très bien</div>");
et à ma grande surprise, ca a parfaitement fonctionné.
Je croyais que le jquery devait obligatoirement se déclarer ainsi : $(document).ready(function () { "ici mettre du jquery" });

Quelqu'un peut-il me donner une explication sur l'introduction du jquery dan un script ?

b) En fouillant, j'ai trouvé une autre forme de fonction en jquery : $.fn.appel = function () { ... };
Est-ce une vielle forme d'écriture et à quoi cela peut-il correspondre ?

J'ai fait un test en le comparant avec la déclaration classique de la fonction : function appel () { ... };
dans l'affectation d'une fonction à un sélecteur : $("#bloc").appel();

Pourquoi cela fonctionne avec la première déclaration et pas avec la seconde ?
Et quel est la bonne façon de déclarer une fonction en jquery ?

c) Si j'ai bien compris, on peut faire un panachage entre des instructions classique issues du javascript et celles provenant du jquery.
Bien sûr, il faut respecter le fonctionnement des appels du jquery.
Ainsi dans l'enchainement des méthodes .méthode1().méthode2() ... il faut transmettre la liste des adresses "$(this)" à la fonction appelante.

@+
$(document).ready c'est juste pour être sur que le DOM est prêt, si tu préfères c'est une version plus rapide de window.onload qu'on utilisait avant (le simple fait de mettre son JS en bas de page juste avant la fermeture de la balise body permet dans la plupart des cas de se passe de window.onload).

Et sinon si tu veux faire du code réutilisable avec jQuery il vaut mieux concevoir ton script sous forme de plug-in. Par la suite le $(document).ready ne servant que pour initialiser le lancement des plug-ins. Mais c'est pareil en JavaScript pur.
Modifié par jb_gfx (14 May 2012 - 18:22)
Bonjour jb_gfx,

quand j'ai commencé à lire de la documentation sur le jquery, j'ai cru comprendre que je devais utiliser $(document).ready(...) pour introduire du code. Et la plupart des exemples était structuré de cette façon. Je comprends que c'est un équivalent du window.onload() du javascript.

J'ai pris l'habitude en développant des scripts de créer un objet : monObjet = { ... }; et de tout mettre dedans avec une méthode nommé Init() pour procéder à l'initialisation et éventuellement au lancement de la fonctionnalité que je viens de créer.

J'ai encore des problèmes avec les fonctions. Entre autre celle utilisant un évènement.

Si je fais par exemple un addEventListener("mousemove", Objet.Capture, true); pourquoi ne puis-je pas accéder aux propriétés de mon objet via la méthode Capture ? De plus pourquoi je ne dois pas mettre les parenthèse à la déclaration de Objet.Capture alors que ma méthode est déclaré : Objet = { ... Capture: function (event) { ... }, ... };

@+
@Artemus: Sans être une note concernant directement jQuery, mieux vaut déclarer ses fonctions en gardant les braquettes sur la même ligne que le mot clé fonction; exemple:


// Pas bon
function allo()
{

}

// Bon code
function allo() {

}


Car en javascript il y a un système d'insertion de points virgules automatique et dans certains structures de code, ce système pourrait méprendre une indentation de ce genre avec une fin de ligne et y insérer un point virgule. Cela n'arrive pas avec les fonctions, mais cela peut arriver dans le cas d'un return par exemple:


return 
{
  a: 1,
  b: 2
}

// Interprété comme suit:
return;
{ // bloc de code
  a: 1, // erreur syntaxique
  b: 2
}


Dans tous les cas, c'est une bonne pratique de garder son "{" sur la même ligne; une histoire de consistance.
Modifié par Vaxilart (15 May 2012 - 04:38)
Une chose à comprendre sur jQuery et Javascript :

En Javascript, le "$" est considéré comme un caractère. Du coup, on peut écrire 
function $(param){ alert(param); }


jQuery() ou $() ne sont donc qu'une fonction Javascript.

Ce qui est nommé jQuery est en fait la logique de fonctionnement de cet objet (série de méthodes, etc). Par exemple : le système de chaînage, la sélection DOM via CSS, etc.

Un bon article sur Nettuts qui démystifie un peu jQuery :
http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Je pense que ça aidera à comprendre qu'il n'y a pas de jQuery et Javascript mais bien que jQuery EST du Javascript ! Smiley cligne
Modérateur
a écrit :
b) En fouillant, j'ai trouvé une autre forme de fonction en jquery : $.fn.appel = function () { ... };
Est-ce une vielle forme d'écriture et à quoi cela peut-il correspondre ?

jQuery déclare $ comme un alias de jQuery et fn comme un alias de prototype.
Ce qui donne, une fois traduit:

jQuery.prototype.appel = function(){};
Qui est la manière de déclarer appel en tant que méthode de l'objet jQuery, avec le mot clé this qui fera référence à l'instance de l'objet en cours. La POO avec javascript, à pratiquer uniquement sous drogue dure.

a écrit :
… $(document).ready(...) pour introduire du code. Et la plupart des exemples était structuré de cette façon. Je comprends que c'est un équivalent du window.onload() du javascript..

Pas vraiment équivalent, sinon on ne l'utiliserait pas. ready sera déclenché dès que le DOM est chargé en mémoire du navigateur, alors que onload seulement lorsque toute la page est chargée. La différence est de taille.

a écrit :
Si je fais par exemple un addEventListener("mousemove", Objet.Capture, true); pourquoi ne puis-je pas accéder aux propriétés de mon objet via la méthode Capture ? De plus pourquoi je ne dois pas mettre les parenthèse à la déclaration de Objet.Capture alors que ma méthode est déclaré : Objet = { ... Capture: function (event) { ... }, ... };

addEventListener ne fonctionnera pas sous ie8 et antérieurs. Il faut donc utiliser des alternatives selon ce qui fonctionne, ou se servir de jQuery, qui sert justement aussi à ça.
$('#bidule').on('mousemove',function(event) {
  instructions;
});
ou
$('#bidule').mousemove(function(event) {
  instructions;
});
Bonsoir à toutes et à tous,

@ Vaxilart : merci du conseil. Je connaissais la problématique du return. En général, je mets tout sur la même ligne.
Sinon pourquoi je ne mets pas le { sur la même ligne que la déclaration de la fonction ?
C'est une vieille habitude que j'ai et qui date du langage Pascal. J'aime bien, lorsque je pratique l'indentation, de faire en sorte que l'ouverture d'un bloc { soit sur la même colonne que la fermeture du bloc }. D'un simple coup d’œil, je vois toutes les imbrications.

@ Monkey_monk : je pense que tu as compris que j'ai des difficultés à comprendre ce que représente Jquery par rapport à Javascript.
Au départ, je croyais que c'était un langage, à cause de la syntaxe particulière du $(). Maintenant, je n'en suis plus tout à fait sûr.
Jb_gfx a dit que ce n'était pas un framework, mais plutôt une bibliothèque.
J'ai pourtant cherché la définition d'un framework, mais je n'ai pas compris en quoi cela consiste.
Frame = cadre, Work = travail, ce qui peut donner : travailler dans un cadre, dans un environnement.
Cela veut tout dire et rien dire en même temps. J'appelle ça, un mot poubelle, servant comme argument commercial.
J'ai une définition qui ressemble plutôt à "une boîte à outils".
Une bibliothèque, je veux bien. Mais si je dois me contenter de cette définition, je risque de rester sur ma faim.
Le premier exemple qui me vient à l'esprit est une bibliothèque des fonctions mathématiques.
Mais dans ce cas là, la définition du jquery ne se réduit pas à une collection de fonctions.
Mais ce qui me dérange le plus, c'est la multitude de redéfinition que nous trouvons au travers du javascript et du jquery.

Je viens de jeter un coup d’œil à ton lien que je trouve très intéressant. Je te remercie de m'avoir communiqué cette information.
J'ai regardé ma documentation papier sur le javascript et je n'ai rien trouvé sur ce sujet.
Du coup, je comprends pourquoi ils appellent cela, le javascript moderne. Je vais approfondir cette lecture.

@ kustolovic : pour la première partie de ton message, c'est exactement ce que je recherchais. Merci pour la définition de $.fn.appel.
Je ne savais pas que fn était un alias de prototype.

Pour la troisième partie, ce n'est pas la réponse que j'attendais.
Mon problème n'a rien avoir avec la fonction addEventListener (ce n'était qu'un exemple) mais avec le passage de l'argument event.
Pourquoi dois-je déclarer en javascript function analyse (event) { ... }
et ensuite appeler la function en mettant simplement analyse sans les parenthèse. Pourquoi ne puis-je pas déclarer analyse(adresse de l'objet évènement) ?

@+
Re bonsoir à toutes et à tous,

vous pouvez toujours continuer à argumenter sur les fonctions en javascript et jquery.

Voici un autre sujet.

2) je croyais que le jquery devait me simplifier la vie, voila que je tombe sur un gros bug (enfin je crois). Il s'agit des couleurs.

J'ai voulu tester une couleur pour basculer de l'une à l'autre.
Intuitivement, j'ai procédé ainsi :
$(".boutons").click(function () {
if $(this).css("color") == "red")
	$(this).css("color", "yellow");
else	$(this).css("color", "red");
});

Et à ma grande surprise, cela ne fonctionne pas sous Firefox mais sous MSIE 8.0 ?

J'ai approfondi la question et voici que sous Firefox, la couleur est définie par rgb(... , ... , ...). Bizarre non ?

J'ai refait ma déclaration en distinguant les deux types de navigateurs.
$(".boutons").click( function () {
if	($(this).css("color") == ((document.all) ? "red"    : "rgb(255, 0, 0)"))
	 $(this).css("color",	 ((document.all) ? "yellow" : "rgb(255, 255, 0)"));
else	 $(this).css("color",	 ((document.all) ? "red"    : "rgb(255, 0, 0)"));
});

N'y a-t-il pas plus simple que cela ?

@+
Modifié par Artemus24 (16 May 2012 - 00:14)
a écrit :
Au départ, je croyais que c'était un langage, à cause de la syntaxe particulière du $(). Maintenant, je n'en suis plus tout à fait sûr.

Hé bien… tout ça pour en arriver là ! Tout arrive… dans quelque temps, tu seras certain que ce n’est pas le cas.

En français framework se traduit souvent par « Cadre de travail », ce n’est pas du tout un mot poubelle ou un argument commercial mais bien un mot technique qui représente quelque chose de concret et c’est très utilisé.
Je trouve la définition de wikipedia bien faite : http://fr.wikipedia.org/wiki/Framework
On peut voir ça comme une boite à outil effectivement, mais certain framework vont un peu plus loin en te bornant volontairement dans la façon d’organiser ton code.
Je vais pas discuter sur le cas de jQuery ça risquerait de se compliquer.

a écrit :
Pourquoi dois-je déclarer en javascript function analyse (event) { ... }
et ensuite appeler la function en mettant simplement analyse sans les parenthèse. Pourquoi ne puis-je pas déclarer analyse(adresse de l'objet évènement) ?

Si tu mets les parenthèses, la fonction va être exécutée hors ce n’est pas ce que tu veux : tu veux qu’elle soit exécuté au moment de l’évènement.
Donc pour ce faire, tu passes en paramètre directement la fonction afin que le gestionnaire d’évènement puisse l’exécuter lorsque l’évènement est déclanché. Fait un alert(analyse)… tu verras apparaitre le code de ta fonction.
Ça ne marche pas qu’avec les évènements, tu peux tout à faire créer une fonction qui attends une ou plusieurs autres fonctions en paramètres.
Par exemple avec le setTimeout() : 

setTimeout(analyse, 1000);


revient à faire : 

setTimeout(function () { /* code de la fonction analyse */ }, 1000);
Pour le problème avec les couleurs c’est que les navigateurs, en interne, ne gère pas les propriétés et valeurs CSS de la même façon.

C’est bien indiqué dans la documentation :
a écrit :
Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).


Pour faire plus simple, tu pourrais jouer avec une classe CSS ça évite de trop coupler la présentation et le code.

Moi j’aurai fait : 

$(".boutons").click(function () {
    $(this).toggleClass('active');
});


en créant un style du genre :


.boutons {
    color: red;
}
.boutons.active {
    color: yellow;
}
a écrit :
voila que je tombe sur un gros bug


C'est dans la doc.

"Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255)."
Pages :
Sujet clos
Aller à