Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 14 sur 14
  1. #1
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 748
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 748
    Points : 41 865
    Points
    41 865

    Par défaut Le frameworks MooTools



    Je n'ai pas trop attendu, me doutant bien que les gens ne se bousculeraient pas au portillon. J'ai relu, corrigé, adapté, amélioré la FAQ MooTools. Merci de me donner votre avis et de me corriger si nécessaire.

    J'ai parfois scindé des Q/R et en ai déplacé certaines. Voici un exemple de question avec une partie devenue obsolète. Que pensez-vous de la présentation ?

    D'ici quelques jours je demanderai une relecture orthographique et puis je passerai en production.


  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 592
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 592
    Points : 14 379
    Points
    14 379

    Par défaut

    Bonsoir,
    j'essaierais de regarder cela...

  3. #3
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 601
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 601
    Points : 6 765
    Points
    6 765

    Par défaut

    Citation Envoyé par vermine Voir le message
    J'ai parfois scindé des Q/R et en ai déplacé certaines. Voici un exemple de question avec une partie devenue obsolète. Que pensez-vous de la présentation ?
    moi ça me convient.

    Puisque tu as mis un lien vers cette bibliothèque, une Q/R m'a interpelé :
    Comment connaitre le type d'un objet ?
    typeOf est une fonction native de javascript ? Elle ne fait donc pas doublon en étant implémentée dans cette bibliothèque ?

  4. #4
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 748
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 748
    Points : 41 865
    Points
    41 865

    Par défaut

    typeOf est effectivement natif de JavaScript. La version de MooTools est plus détaillée dans la valeur de retour. Là où le JavaScript retourne "object", MooTools retourne "array" ou bien "function" ou bien "textnode", ...

  5. #5
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 601
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 601
    Points : 6 765
    Points
    6 765

    Par défaut

    Citation Envoyé par vermine Voir le message
    typeOf est effectivement natif de JavaScript. La version de MooTools est plus détaillée dans la valeur de retour. Là où le JavaScript retourne "object", MooTools retourne "array" ou bien "function" ou bien "textnode", ...
    Merci pour ce complément Je viens de voir le code de MooTools et j'ai pu voir que la fonction instanceOf a également été redéfinie.

    Je pense ta remarque devrait avoir sa place dans cette Q/R (en listant les types retournés). L'autre intérêt que je vois dans ce complément d'information c'est qu'ainsi on voit moins MooTools comme une grosse boite noire. On peut par exemple expliqué que
    typeOF est une fonction native de javascript mais a été redéfinie dans MooTools pour palier le manque d'information dans le type d'objet retourné par la fonction native
    (je pense que l'on peut dire ça d'une manière plus élégante car il y a répétition de fonction native dans ma phrase ).

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 592
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 592
    Points : 14 379
    Points
    14 379

    Par défaut


    concerne la relecture des §1 à 8 compris

    Comment bien utiliser cette FAQ ?
    Les réponses
    Les réponses peuvent être complétées de liens vers d'autres réponses, vers la documentation en ligne de Microsoft ou vers un autre site en rapport.
    pourquoi Micrsoft ???

    Comment ajouter des évènements ?
    2) Ajouter plusieurs évènements

    Naturellement, nous pouvons ajouter plusieurs évènements en même temps avec addEvents :
    Je parlerais plus d'une écriture simplifié et accessoirement plus lisible.

    Comment supprimer des évènements ?
    Code :
    1
    2
    //Suprrimer le mouseenter lorsqu'on clique
    ma_div.addEvent('click', supprime);
    j'en ai vu une !!!! supprimer dans le commentaire

    Comment gérer la propagation d'un évènement ?

    je mettrais un lien vers le tuto Présentation des évènements du DOM

    Comment obtenir les coordonnées x et y lors d'un clic ?

    je pense que l'on peut détailler les deux, par rapport à la page et par rapport à la fenêtre, peut être même faire 2 Q/R, mais là je pinaille .

    Comment ajouter un élément à un tableau s'il n'y existe pas ?
    ...l'élément dans le tableau que s'il ne s'y trouve pas encore.
    que s'il ne s'y trouve pas déjà, me semble plus approprié.

    Comment reconnaitre la plate-forme ?
    On récupère directement la nature de la plate-forme :
    On utilise la propriété name pour récupérer directement le nom de la plateform



    Remarque d'ordre général
    Ne serait-il pas opportun d'indiquer la partie du more qui doit être utilisé/intégré.

    Voilà pour une première étape...

  7. #7
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 748
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 748
    Points : 41 865
    Points
    41 865

    Par défaut

    Merci beaucoup !


    Citation Envoyé par NoSmoking Voir le message
    Comment bien utiliser cette FAQ ?
    pourquoi Micrsoft ???
    Étrange. Tu as une partie des modifications mais pas la totalité. Attention que je n'ai pas mis la vraie FAQ à jour. Je passe par un répertoire de travail (voir URL).

    Citation Envoyé par NoSmoking Voir le message
    Comment ajouter des évènements ?
    Je parlerais plus d'une écriture simplifié et accessoirement plus lisible.
    Fait.

    Citation Envoyé par NoSmoking Voir le message
    Comment supprimer des évènements ?
    j'en ai vu une !!!! supprimer dans le commentaire
    Bien vu.

    Citation Envoyé par NoSmoking Voir le message
    Comment gérer la propagation d'un évènement ?
    je mettrais un lien vers le tuto Présentation des évènements du DOM
    Bonne idée !

    Citation Envoyé par NoSmoking Voir le message
    Comment obtenir les coordonnées x et y lors d'un clic ?
    je pense que l'on peut détailler les deux, par rapport à la page et par rapport à la fenêtre, peut être même faire 2 Q/R, mais là je pinaille .
    Moui je préfère laisser ainsi.

    Citation Envoyé par NoSmoking Voir le message
    Comment ajouter un élément à un tableau s'il n'y existe pas ?
    que s'il ne s'y trouve pas déjà, me semble plus approprié.
    Exact.

    Citation Envoyé par NoSmoking Voir le message
    Comment reconnaitre la plate-forme ?
    On utilise la propriété name pour récupérer directement le nom de la plateform
    Fait.

    Citation Envoyé par NoSmoking Voir le message
    Remarque d'ordre général
    Ne serait-il pas opportun d'indiquer la partie du more qui doit être utilisé/intégré.
    Voilà pour une première étape...
    Et bien... il n'y a que le core dans les codes et les exemples donnés.


  8. #8
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 592
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 592
    Points : 14 379
    Points
    14 379

    Par défaut Réponses

    Étrange. Tu as une partie des modifications mais pas la totalité. Attention que je n'ai pas mis la vraie FAQ à jour. Je passe par un répertoire de travail (voir URL).
    Aucun doute que j'ai dû me planter ayant ouvert la version actuelle pour suivre le sommaire.

    Moui je préfère laisser ainsi.
    pas de soucis.

    Et bien... il n'y a que le core dans les codes et les exemples donnés.
    je voulais parler du core attendu qu'il y a moyen de customiser celui ci.

    J'aime le son du Cor, le soir, au fond des bois
    Soit qu'il chante les pleurs de la biche aux abois,

  9. #9
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 592
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 592
    Points : 14 379
    Points
    14 379

    Par défaut Commentaires

    9 Les formulaires HTML et autres objets
    le mot formulaire peut prêter à confusion.

    9.11 Les champs des formulaires

    Comment ajouter du texte à un élément div, span... ?
    Je ferais glisser dans le § Manipulation du DOM

    Comment ajouter/supprimer une classe ou vérifier qu'elle existe ?
    RAS

    Comment récupérer la taille d'un élément ?
    RAS

    Comment gérer les styles CSS ?
    RAS

    Comment récupérer la nature d'un élément ?
    RAS

    Comment récupérer la valeur sélectionnée d'une liste déroulante ?
    RAS

    Comment récupérer les valeurs des checkbox sélectionnées ?
    RAS

    9.2 Les autres objets

    Comment créer une IFrame ?
    Je ferais glisser dans le § Manipulation du DOM


    10 La manipulation du DOM
    Le titre n'est pas forcément judicieux, il y a également des manipulations d'attributs...

    Comment sélectionner un élément de l'arbre DOM ?
    Reste à faire, j'ai eu un peu de mal

    Comment récupérer/modifier/supprimer un attribut ?
    3) Pour supprimer, on utilise la méthode erase :
    Pour supprimer une propriété...

    Comment modifier un attribut CSS de plusieurs éléments ?
    RAS

    Comment supprimer un élément HTML ?
    préciser que l'élément est supprimé du DOM mais le garde en mémoire contrairement à la méthode destroy()

    Comment déplacer un élément dans la page ?
    Reste à faire, j'ai eu un peu de mal

    Comment créer un élément HTML ?
    mettre un lien vers -> Comment déplacer un élément dans la page ? qui traite de inject

    Comment obtenir la position d'un élément ?
    On remarque un décalage (ici de 2px) qui varie selon le navigateur par rapport à la position que nous avions demandé. Est-ce qu'on prend le contour externe ou bien interne de l'élément...
    on observe pas de différence si un DOCTYPE valide est mis en tête de page, je supprimerais d'autant que le résultat dépend des valeurs des navigateurs...

    Comment récupérer les éléments HTML qui gravitent autour d'un élément ...
    Il est peut être utile de (re)definir var ma_div = $('id_div1'); pour plus de clarté

    3) Si l'on désire récupérer les enfants, nous disposons de plusieurs possibilités.
    ...retour à la ligne
    Tout d'abord, récupérer le premier enfant avec la méthode getFirst :

    De même, on récupère le dernier enfant avec getLast.
    ...retour à la ligne
    Si maintenant on veut tous les enfants, alors on se sert de getChildren :

    Je ferais une autre Q/R
    Comment récupérer le(s) parent(s) d'un élément avec le 4)
    4) Si on sait récupérer les enfants, pourquoi ne pas récupérer les parents ?...

    Comment remplacer un élément HTML par un autre ?
    RAS

    Comment implémenter du scrolling automatique ?
    RAS

    Comment obtenir une position dans un élément avec des barres de défile..
    RAS


    11 Les technologies de l'AJAX

    Quelle est la différence entre Request, Request.HTML et Request.JSON ?
    Cependant, force est de constater que deux types de réponses sont généralement reçues lors d'une requête AJAX : des balises HTML et un objet JSON
    un code HTML ou un objet JSON

    Comment faire une requête AJAX ?
    peut être préciser que method est 'post' par défaut

    Comment faire une requête de type HTML ?
    url : le chemin vers le code serveur à contacter.
    url vers laquelle est envoyée la requête

    Comment faire une requête de type JSON ?
    update: $('idDiv'), n'est pas utilisée en cas de JSON on traite le résultat dans onSuccess

    12 Divers scripts utiles

    Comment vérifier si une variable est définie ou si sa valeur est vide ?
    RAS

    A quoi sert la méthode toQueryString ?
    RAS

  10. #10
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 748
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 748
    Points : 41 865
    Points
    41 865

    Par défaut

    Bonjour cher ami poète,

    Pour le core, j'ai rajouté un paragraphe dans la première Q/R : Comment bien utiliser cette FAQ ?


    le mot formulaire peut prêter à confusion
    Préfères-tu "les champs HTML" ? Ou bien "les éléments HTML" ? Autre ?


    Comment ajouter du texte à un élément div, span... ?
    Je ferais glisser dans le § Manipulation du DOM
    Mmm... Je comprends ton intention. Cependant j'estime que nous jouons avec une valeur et non un élément (même si au final on joue avec un noeud de l'arbre). Et que ce n'est donc pas une "manipulation" du DOM.


    Comment créer une IFrame ?
    Je ferais glisser dans le § Manipulation du DOM
    L'idéal serait d'avoir plus de Q/R dans cette section. Je préfère le laisser ici malgré tout pour l'instant. :$


    10 La manipulation du DOM
    Le titre n'est pas forcément judicieux, il y a également des manipulations d'attributs...
    J'ai alors mis "10 La manipulation du DOM et des attributs".


    3) Pour supprimer, on utilise la méthode erase :
    Pour supprimer une propriété...
    Ajouté.


    Comment supprimer un élément HTML ?
    préciser que l'élément est supprimé du DOM mais le garde en mémoire contrairement à la méthode destroy()
    Précision ajoutée. Il est vrai que je n'étais pas du tout prolixe sur cette Q/R.


    Comment créer un élément HTML ?
    mettre un lien vers -> Comment déplacer un élément dans la page ? qui traite de inject
    Judicieuse proposition.


    on observe pas de différence si un DOCTYPE valide est mis en tête de page, je supprimerais d'autant que le résultat dépend des valeurs des navigateurs...
    Remarque supprimée.


    Comment récupérer les éléments HTML qui gravitent autour d'un élément ...
    Il est peut être utile de (re)definir var ma_div = $('id_div1'); pour plus de clarté
    Ajouté, ainsi que les retours à la ligne.


    Je ferais une autre Q/R
    Comment récupérer le(s) parent(s) d'un élément avec le 4)
    4) Si on sait récupérer les enfants, pourquoi ne pas récupérer les parents ?...
    Scission effectuée.


    Cependant, force est de constater que deux types de réponses sont généralement reçues lors d'une requête AJAX : des balises HTML et un objet JSON
    un code HTML ou un objet JSON
    Modifié.


    Comment faire une requête AJAX ?
    peut être préciser que method est 'post' par défaut
    Rajouté (deux fois).


    url : le chemin vers le code serveur à contacter.
    url vers laquelle est envoyée la requête
    Modifié (trois fois).


    Comment faire une requête de type JSON ?
    update: $('idDiv'), n'est pas utilisée en cas de JSON on traite le résultat dans onSuccess
    Ouf'ti, oui.


  11. #11
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 592
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 592
    Points : 14 379
    Points
    14 379

    Par défaut Commentaires

    Bonjour,
    10. La manipulation du DOM et des attributs

    Comment sélectionner un élément de l'arbre DOM ?

    2) Le premier enfant selon son type, son id ou sa classe
    Il manquerait un exemple pour la récupération grâce au type...
    grâce à son type:
    Code :
    1
    2
    var mon_input = ma_div.getElement('input');
    //Résultat : mon_input.value = "Premier Input"
    grâce à son id:
    Code :
    1
    2
    var mon_input = $('id_div').getElement('#deux');
    //Résultat : mon_input.value = "Second Input"
    grâce à sa classe:
    Code :
    1
    2
    var premier_input = $('id_div').getElement('.ma_classe');
    //Résultat : premier_input.value = "Premier Input"
    Peut être préciser que dans le cas du type et de la classe SEUL le premier élément est retourné, pour l'ID comme elle doit être unique la question ne se pose pas.


    3) Plusieurs éléments par leur type ou leur classe
    Cependant, nous pouvons récupérer tous les éléments du même type ou d'une même classe avec getElements :
    Cependant, nNous pouvons récupérer tous les éléments du même type ou d'une même classe avec getElements :


    4) Plusieurs éléments
    Nous pouvons également récupérer dans un tableau plusieurs éléments selon différentes conditions.
    ...retour à la ligne
    C'est une option du sélecteur $$() :

    nota: Préciser que cette méthode s'applique au document et non à un élément du document, ce qui peut servir à la compréhension du 6)


    5) En filtrant sur certains attributs
    Pour aller plus loin, MooTools permet de filtrer plus précisement ce que l'on désire ramener récupérer(...)
    Pour aller plus loin, MooTools permet de filtrer plus précisément ce que l'on désire ramener récupérer comme éléments grâce aux opérateurs : égal à (=), commence par (^=), termine par ($=), différent de (!=).
    ...retour à la ligne
    Ces conditions se font sur un attribut :


    7) Récupérer le parent
    devient redondant avec le new Comment récupérer le(s) parent(s) dans un élément HTML ?



    Bon si je ne m'abuse il doit me rester Comment déplacer un élément dans la page ?.

    Juré avant Noël!

  12. #12
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 748
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 748
    Points : 41 865
    Points
    41 865

    Par défaut

    Salut,

    Le premier enfant selon son type, son id ou sa classe
    Il manquerait un exemple pour la récupération grâce au type...
    Avais-je bu cette fois-là ?

    Peut être préciser que dans le cas du type et de la classe SEUL le premier élément est retourné, pour l'ID comme elle doit être unique la question ne se pose pas.
    C'était (mal) précisé dans la première phrase "Nous pouvons récupérer le premier élément...". J'ai ajouté une explication pour la classe et le type.


    nota: Préciser que cette méthode s'applique au document et non à un élément du document, ce qui peut servir à la compréhension du 6)
    Remarque ajoutée.


    7) Récupérer le parent
    devient redondant avec le new...
    Supprimé. Et j'ai mis un lien vers la nouvelle Q/R.


    Courage pour la dernière, on y est presque. Merci beaucoup en tout cas.

  13. #13
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 592
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 592
    Points : 14 379
    Points
    14 379

    Par défaut The ultimate


    Comment déplacer un élément dans la page ?
    là j'ai pas mal de petits trucs à dire, c'est surtout sur la forme mais c'est un sujet plus délicat dans la finesse de compréhension...

    MooTools fournit une méthode très simple permettant de positionner un élément dans la page en vis-à-vis d'un autre et ce selon quatre possibilités :
    remarque: on évoque quatre possibilités et il y a 6 repères qui suivent.

    MooTools fournit une la méthode, inject, très simple permettant de positionner déplacer un élément dans la page en vis-à-vis d'un autre par rapport à un autre et ce selon suivant quatre possibilités emplacements :
    1. Avant l'élément (inject before) ;
    2. Après l'élément (inject after) ;
    3. Dans le bas de l'élément (inject bottom) ;
    4. Dans le haut de l'élément (inject top) ;

      D'autres déplacements peuvent ce faire via les méthodes grab, adopt et wraps :

    5. En tant qu'enfant de l'élément (méthodes différentes : grab et adopt) ;
    6. En tant que parent de l'élément (méthodes différentes : wraps).

    (cela reste moyen il me semble)

    dans Imaginons les éléments suivants : il serait plus "moderne" de supprimer les espaces insécables qui se gèrent plutôt via le CSS ( margin-left:1em;)

    1) Avant l'élément (before)
    Nous allons positionner déplacer l'input avant la div pour qu'il devienne le frère positionné immédiatement avant la div:

    2) Après l'élément (after)
    Nous allons positionner déplacer l'input après la div pour qu'il devienne le frère positionné immédiatement après la div:

    3) Dans le bas de l'élément (bottom), cette valeur est la valeur par défaut
    Nous allons positionner déplacer l'input dans le bas la div pour qu'il devienne le dernier enfant de celle ci:
    Code :
    1
    2
    3
    mon_input.inject(ma_div, 'bottom');
    // écriture simplifiée est dont le résultat est le même
    mon_input.inject(ma_div);
    4) Dans le haut de l'élément (top)
    Nous allons positionner déplacer l'input dans le haut la div pour qu'il devienne le premier enfant de celle ci:

    5) En tant qu'enfant de l'élément
    Nous allons positionner déplacer l'input dans la div :

    Peut être préciser que le déplacement peut se faire en 'top', 'bottom', 'after' et 'before' et que...
    Code :
    1
    2
    3
    ma_div.grab(mon_input);
    // écriture équivalente
    mon_input.inject( ma_div, 'bottom');
    6) En tant que parent de l'élément
    Nous allons positionner déplacer la div autour de l'input, celle ci devient le parent de l'input :

    Peut être préciser que le déplacement peut se faire en 'top' et 'bottom' uniquement qui correspond à la place qu'occupera l'input dans la div, la valeur par défaut étant une fois encore 'bottom'.

    7) D'autres exemples
    Mettre l'input à la fin du span :

    même si cet exemple est une réplique du 3) je pense qu'il est utile d'apporter la précision qu'il est important de considérer la nature des éléments, un input ne pouvant avoir d'enfant ( sans aucun mauvais esprit)

    Je crois que j'en ai fini avec un morceau qu'il est vrai n'est pas facile à bien appréhender au premier abord.


  14. #14
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 748
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 748
    Points : 41 865
    Points
    41 865

    Par défaut

    Merci NoSmoking. Tu as abattu un travail énorme ! Je t'en remercie.

    Je vais passer en relecture orthographique et puis j'annoncerai la mise à jour.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •