Cocopop a écrit:

Je suis aussi partant pour le JS (enfin via librairie Jquery car une fois utilisée on ne peut plus s'en passer :D) !

Un challenge intéressant pourrait être d'adopter précisément comme règle le point de vue contraire en interdisant le recours à jQuery.

Celui-ci est souvent une facilité pour le programmeur, mais pas une mesure d'économie globale ; comme je l'ai écrit ailleurs, cela revient parfois "à utiliser une tronçonneuse pour casser une allumette".

Voir les liens que je donnais ici développant cette réflexion: 

http://openclassrooms.com/forum/sujet/groupe-de-checkbox-dont-l-un-est-requis#message-87882897

il peut y avoir plusieurs ateliers, un en vanilla JS et un avec librairie/framework, mais effectivement, les regles doivent être clairs et connus de tous

(et si c'est vanilla JS, ça peut etre "modern browser only" pour s'épargner de gérer IE8 ou des vieux browsers android :))

-
Edité par nicolas.challeil@openclassrooms.com 2 juin 2015 à 10:00:37

Oui, bien sûr, tout est intéressant, mais pour les choses simple, le réflexe jQuery est parfois trop automatique:

un exemple repris de ce fil: http://openclassrooms.com/forum/sujet/afficher-cacher-une-div-article-sectio-par-un-clic

pour faire une simple bascule ON/OFF :

HTML

<button id="Bouton">Press me !</button>
<div id="tonDiv">Hello !</div>

• version jQuery:

$(function(){
   $('#tonBoutton').click(function(){
      $('#tonDiv').toggle() // AFFICHE ET CACHE A CHAQUE CLIQUE SUR LE BOUTTON
   });
});

• version pur JS développée:

document.querySelector("#Bouton").onclick = function() {
if (window.getComputedStyle(document.querySelector('#tonDiv')).display=='none'){
document.querySelector("#tonDiv").style.display="block";
} else {
document.querySelector("#tonDiv").style.display="none";
}
}

• version pur JS compactée:

document.querySelector("#Bouton").onclick = function() { 
document.querySelector("#tonDiv").style.display=(window.getComputedStyle(document.querySelector('#tonDiv')).display=='none') ? "block" : "none"; 
}

• version pur JS extrêmement compactée (1 ligne contre 5 en jQuery):

Bouton.onclick=function(){tonDiv.style.display=(window.getComputedStyle(tonDiv).display=='none')?"block":"none";};

Cette dernière syntaxe utilisant directement l'ID est sujette à débat (voir: http://openclassrooms.com/forum/sujet/document-getelementbyid-est-il-utile ), mais elle fonctionne parfaitement et est "technically safe to use in the latest version of all major browsers" (cf. lien ci-dessus.)

-
Edité par philiga 2 juin 2015 à 10:19:52

Personnellement, je pense qu'on peut autoriser les deux, c'est à dire from sratch et  avec utilisation d'une librairie, je comprends tout à fait ton point de vue philiga, mais pour avoir réaliser quelques stages dans le domaine du web, généralement la plupart utilise jquery sans se poser de questions pratique qui j'en conviens et un peu dommage. Tout ça pour dire, si j'avais pratiquer un peu avant j'aurai été plus efficace. Je trouve ça donc dommage de restreindre l'atelier. 

Voila c'était mon magnifique avis

-
Edité par Lud0v1c 2 juin 2015 à 10:27:40

d'ailleurs j'ai une question concernant le jQuery

je vois souvent la même chose écrite différemment :

$('document').ready(function() {
    $('div').click(function() {
       // le script
    });
});

et :

$('document').ready(function() {
    $('div').on(click, function() {
       // le script
    });
});

c'est quoi la différence entre .click(function()) et .on(click, function())  ?

@philiga

ya bcp de sujets a débat dans ton code

le premier code en jquery peut aussi tenir en 1 ligne de code, compter le ligne de code n'est donc pas pertinent pour juger de la qualité ou pas

même si on compare la version js développée, il y a pas mal a redire

1) elle est beaucoup plus verbeuse, et bien moins "lisible"

2) tu repetes 2 fois un selecteur (#tonDiv) alors qu'on ne le repete pas avec Jquery

3) tu utilise directement .onclick, ce qui implique que tu ne peux accrocher qu'un seul event comme ça sur ton bouton. Il faudrai utilise addEventListener, mais du coup tu perds la compat avec I8 (ce que jQuery conserve avec .click, tout en gardant la possibilité d'accrocher plusieurs event)

4) sur les 5 lignes de js de la version jquery, il y a aussi l'attente a domReady (le $(function) que tu n'as pas toi (qui reste useless si tu mets ton script en bas de page, mais c'est un autre pb :))

5) la tu utilises directement le style display none/block, ce qui peut avoir deux problemes : si jamais ton element etais pas block au départ, tu vas avoir des surprises... Si tu veux utiliser autre chose, genre changer l'opacité, avec style.display, tu vas avoir des problèmes sur IE8 (spa grave, tu me diras, ok :p)

Donc en fait, ouais, tu évites d'utiliser jQuery dans ce cas particulier, et c'est ce qu'il faut probablement faire si tu as juste ces 5 lignes de codes sur ton site. Mais tu tombes trés rapidement dans des cas un peu galere a gérer sans jquery, et qui t'amene a faire bcp de code supplémentaires, et au finale réinventer la roue

Par mis les trucs un peu touchy a faire a la main, on peut parler de :

- délégation d'event

- requete ajax

- divers opération sur les tableaux/objet ($.merge, $.extend)

Pour conclure, et pour parler d'openclassrooms un peu :p, jQuery est utilisé, massivement, dans sa derniere version, qui exclue donc IE8 par exemple. Une fois minimifié et gzipé, en provenance d'un CDN, le fichier fait 30ko, soit le poids d'une image relativement petite. Ca vaut clairement pas le coup de s'en passer (ça vaut pour d'autre librairies équivalente, hein, jsuis pas jquery fan boy non plus)

Le code est plus lisible, par plus de gens (plutôt que d'inventer des solutions qui réinventes des choses...) et la lib s'occupe de lisser les petites diff entre les browsers

@stefde3

les deux syntax sont équivalentes (enfin, pour la deuxiement, c'est 'click' entre guillement, pas directement comme ça, et elle permet d'avoir plus d'options si tu veux)

-
Edité par nicolas.challeil@openclassrooms.com 2 juin 2015 à 10:40:25

ok donc .on(click = une seule option et .click( = plusieurs options dedans) compris merci

@STuFF:

Merci pour ces précisions ; on est d'accord: ce que j'en dis est valable pour les sites simples personnels qui n'ont souvent pas besoin de sortir la grosse artillerie (même si elle n'est pas si grosse que ça: 30ko, ok...) et ne souffriront guère de ne pas vérifier le document.ready à chaque clic sur un bouton.

ce qui est, reconnaissons le, largement moins élégant que la version jQuery

@Wake_Up:

• ok pour le getElementById à la place du querySelector (le 1er + optimisé, je crois) ; 
• Pour l'addEventListener: 1+ & 1- (IE8) d'après les précisions techniques de STuFF ci-dessus
• pour la variable, peut-être ai-je tort, mais n'est-ce pas une étape supplémentaire totalement inutile ici ?
• j'avoue que j'aime bien ma version hypercompacte en une seule ligne, même si elle n'est pas 100% orthodoxe !

En tous cas, ce genre d'échange autour des avantages et inconvénients respectifs de chaque façon de procéder est très formateur ;

ça pourrait faire l'objet d'un concours intéressant avec par exemple des règles du type:

• donnez deux versions: A) la plus complète et orthodoxe et B) la plus courte possible pour remplir la même fonction.

Même si personnellement, mon petit niveau en JS me permettrait plus d'être observateur intéressé que participant à un tel concours !

-
Edité par philiga 2 juin 2015 à 17:52:21

Si je puis me permettre, le plus propre serait d'ajouter et d'enlever une classe plutôt que modifier style d'autant que comme ça on peut utiliser un moyen plus complexe et plus pertinent pour cacher, comme une hauteur à 0 avec overflow: hidden etc. display: none s'pas cool pour les lecteurs d'écran. Et il serait bon aussi de modifier l'attribut aria-hidden. Mais bon, c'est qu'un exemple, je sais, je pinaille

Personnellement aujourd'hui j'ai totalement délaissé le JS "traditionnel" barbant à écrire (surtout pour sélectionner des éléments) et devient vite moins lisible.

Le Jquery c'est beaucoup plus simple, ergonomique et compréhensible.

Quand on reprend un code écrit il y a plusieurs mois, on se le réapproprie hyper rapidement avec une structure basée sur Jquery.

Tant qu'on est là, je vais pas créer un topic pour ça. Il existe le hover, qui va vers un autre code CSS au survol. Il y a une propriété au clic?

Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.

Histoire de jouer sur les mots, une librairie serait encore plus juste, dixit jquery.com : "jQuery is a fast, small, and feature-rich JavaScript library"

xdNoliv > jouons, jouons ! C'est "bibliothèque", dans ce cas

Lamecarlate a écrit:

Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.

@Lamecarlate: Là oui, tu pinailles ! 

Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

@Quentin: non, malheureusement, pas de :clic en CSS ; il y a des ruses avec checked, mais c'est un peu lourd (mais utile quand même).
Il y a en fait 2 façons de simuler le clic en CSS ; avant que tu ne le demandes, voici un double exemple :

http://openclassrooms.com/forum/sujet/affichage-dynamique-css-pure?page=1#message-87745841

-
Edité par philiga 2 juin 2015 à 18:25:46

philiga a écrit:

Lamecarlate a écrit:

Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.

@Lamecarlate: Là oui, tu pinailles ! 

Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

@Quentin: non, malheureusement, pas de :clic en CSS ; il y a des ruses avec checked, mais c'est un peu lourd (mais utile quand même).

Oh zut :/ Bon, bah tant pis. Merci quand même!

-J'espère qu'il le mettront dans un CSS4 ;)-

-
Edité par Anonyme 2 juin 2015 à 18:19:26

Bravo aux gagnants.
Félicitations

philiga a écrit:

Lamecarlate a écrit:

Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.

@Lamecarlate: Là oui, tu pinailles ! 

Tu codes "en PHP" ou "en Symphony" ? Non, tu codes "en PHP avec Symphony". Ben là, c'est pareil.

Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

Comme je l'explique juste après, display: none pour masquer/afficher une pop-up c'est pas fameux, ça pose des problèmes d'accessibilité.

Lamecarlate a écrit:

Comme je l'explique juste après, display: none pour masquer/afficher une pop-up c'est pas fameux, ça pose des problèmes d'accessibilité.

Peux-tu préciser lesquels ? En quoi cela change pour les lecteurs d'écran?

@Quentin: J'ai complété ma réponse ; je ne sais pas si tu as vu ?

-
Edité par philiga 2 juin 2015 à 18:35:00

philiga > suis un peu pressée, désolée, tu trouveras je pense pas mal de bonnes réponses avec cette recherche : https://duckduckgo.com/?q=display none accessibility

Ah non, je vais voir Merci!

Quentin Saison a écrit:

philiga a écrit:

Lamecarlate a écrit:

Cocopop > "le jQuery" ça n'existe pas. C'est pas un langage. Dis "la syntaxe jQuery", s'il te plaît.

@Lamecarlate: Là oui, tu pinailles ! 

Et sinon, est-ce vraiment "plus propre d'ajouter et d'enlever une classe plutôt que modifier style" ?

Pour des choses complexes ok, mais pour afficher/masquer une pop-up, par exemple, display:none; me semble très bien non ?

@Quentin: non, malheureusement, pas de :clic en CSS ; il y a des ruses avec checked, mais c'est un peu lourd (mais utile quand même).

Oh zut :/ Bon, bah tant pis. Merci quand même!

-J'espère qu'il le mettront dans un CSS4 ;)-

Comment ça pas de clic en CSS ?

Et :target ?

Pas de véritable :clic comme il y a un :hover en CSS, oui Frogweb, mais  j'ai complété ma réponse avec un exemple qui illustre les deux façons de le simuler: target et checked

 http://openclassrooms.com/forum/sujet/affichage-dynamique-css-pure?page=1#message-87745841

philiga a écrit:

Pas de véritable :clic comme il y a un :hover en CSS, oui Frogweb, mais  j'ai complété ma réponse avec un exemple qui illustre les deux façons de le simuler: target et checked

 http://openclassrooms.com/forum/sujet/affichage-dynamique-css-pure?page=1#message-87745841

Ah ok

Pour la peine un exemple au clic et tout en CSS d'une "modalbox" fait avec mes petits doigts
Je le mets parce qu'un peu mieux styliser ça pouvait être dans le sujet de l'atelier : créer votre galerie.

L'image se referme soit en cliquant sur le lien fermer, soit en cliquant en dehors.

http://www.frogweb.fr/modal-css.html

Personnellement je dis "je code sous Symphony" ou "je code en Jquery".

Certes c'est pas le terme "puriste" adapté mais c'est plus simple à dire et à la fin tout le monde comprend

"Je code avec jQuery". Comme ça tout le monde comprend et en plus c'est correct.

nightmat a écrit:

"Je code avec jQuery". Comme ça tout le monde comprend et en plus c'est correct.

Oui c'est encore mieux ainsi