[FAQ] Le frameworks MooTools [Fait]

[vermine]

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.

[NoSmoking]

Bonsoir,
j'essaierais de regarder cela...

[Auteur]

Envoyé par vermine

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 ?

[vermine]

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", ...

[Auteur]

Envoyé par vermine

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 ).

[NoSmoking]

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 :

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...

[vermine]

Merci beaucoup !

Envoyé par NoSmoking

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).

Envoyé par NoSmoking

Comment ajouter des évènements ?
Je parlerais plus d'une écriture simplifié et accessoirement plus lisible.

Fait.

Envoyé par NoSmoking

Comment supprimer des évènements ?
j'en ai vu une !!!! supprimer dans le commentaire

Bien vu.

Envoyé par NoSmoking

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 !

Envoyé par NoSmoking

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.

Envoyé par NoSmoking

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.

Envoyé par NoSmoking

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

Fait.

Envoyé par NoSmoking

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.

[NoSmoking]

É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,

[NoSmoking]

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

[vermine]

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".

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.

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 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.

[NoSmoking]

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!

[vermine]

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.

[NoSmoking]

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.

[vermine]

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.