Menu des catégories

Articles de la catégorie jQuery

le à 00h00

Structurer le JavaScript d'un site sans Framework

On me demande souvent quelle est la structure JavaScript que j'utilise pour développer mes sites web. C'est une question à laquelle je ne sais jamais si un simple « jQuery » suffit ou si l'on s'attend à m'entendre répondre « MooTools », « jQuery UI », « Backbone », « Knockout », « AngularJs » ou je ne sais quelle autre composant/librairie/framework JavaScript Front-end extraordinaire !

Au delà du fait que l'utilisation de ses ressources précédemment citées dépend du fait que l'on souhaite réaliser un site web ou un outil web ou une application web etc. je finis toujours par expliquer que j'utilise ma propre architecture JavaScript à travers toutes les différentes pages d'un site web.

Je vais donc vous livrer à travers cet article l'architecture JavaScript que j'ai adopté. Afin de la comprendre pas à pas, j'utiliserai comme fil conducteur la réalisation d'un site vitrine. Ma façon de structurer le JavaScript client n'est pas absolue mais elle vous permettra de comprendre la logique derrière mes différents sites dont vous trouverrez les sources sur GitHub ou même du moteur NodeAtlas.

0 Commentaire

le à 10h00

Classes, héritage, encapsulation vs Prototype en JS

Posons le décors, le JavaScript ne possède nativement : ni classe, ni héritage, ni encapsulation... et alors ? C'est probablement le langage le plus incompris, car je vous assure que JavaScript est un puissant langage orienté objet et qu'il permet :

  • la création de nouveaux contextes d'exécution autonomes instanciés (new) avec un constructeur, des propriétés et des méthodes personnelles internes (this...) à partir d'un gabarit de construction (classe),
  • de dupliquer les propriétés/méthodes dans un autre gabarit (héritage) pour ajouter ou modifier des comportements (polymorphisme) le tout depuis différents endroits dans le code (partielle et virtuelle),
  • de limiter l'accès aux propriétés/méthodes au contexte d'exécution (encapsulation privée) ou les promouvoirs (encapsulation publique)...

avec effectivement d'autres mots clés et mécanismes que ceux dont vous avez l'habitude, et nottament grâce au Prototypage.

En ce qui concerne ceux qui ont déjà un bon pied dans le JavaScript, même si jusqu'à présent vous n'avez jamais réellement vu l'intérêt de créer des structures avancées (l'équivalent de classes) pour un développement côté client, il est indéniable que côté serveur (en Node.js par exemple) cela est nécessaire. Et si vous êtes plus d'un développeur Front-end sur vos sites : ça s'avère nécessaire également. Bien qu'en utilisant des bibliothèques JavaScript comme Prototype ou Mootools vous puissiez assez facilement créer des classes, je vais vous apprendre ici à comprendre la roue, vous en créer une sans l'utilisation du prototypage très simplement et cerise sur le gâteau : de jouer avec vos classes en les remplissant/appelant de la même manière qu'en jQuery !

Pour finir nous verrons en quoi le prototypage peut vous simplifier la vie et en quoi donc JavaScript n'a finalement besoin d'aucune classe, d'aucun héritage et d'aucune encapsulation.

2 Commentaires

le à 10h43

Utiliser jQuery avec Node.js sous Windows

Utiliser jQuery pour du développement côté serveur serait vraiment formidable ! C'est possible avec Node.js. Nous y sommes enfin, l'une des parties très intéressante qui peut justifier l'utilisation de Node.js à la place de vos développements PHP et Cie. C'est le moment de travailler de la même façon côté client et côté serveur sur vos processus de contrôle (vos Contrôleurs en MVC) et donc de développer vos sites avec un unique langage de programmation : JavaScript. Cependant, sous Windows, il y a une petite difficulté en plus liée aux modules développés en code natif que nous allons surmonter ! C'est parti pour manipuler le DOM côté Back-end !

À la découverte de Node.js sous Windows

3 Commentaires

le à 13h40

Une Callback pour vos fonctions JS asynchrones

Vous est-il arrivé d'utiliser une fonction JavaScript en maudissant son concepteur parce qu'il avait oublié un détail important... vous permettre de faire quelque chose après l'exécution de son code ! Ça m'arrive trop souvent ces derniers temps et ça ne serait pas non plus la fin du monde si les concepteurs n'avaient pas en plus eu la bonne idée de ne fournir que la version minifiée de leur développement ! Merci pour le partage « Dude » ;)

Je vais vous raconter une histoire.

1 Commentaire

le à 11h49

jQuery 2.0 ne supporte plus IE6, IE7 et IE8

Alors que certains s'en réjouissent et que d'autres le craignent, le support des vieux navigateurs tel que Internet Explorer 6, Internet Explorer 7 et Internet Explorer 8 est terminé pour jQuery...

...et cela dès aujourd'hui puisque jQuery 2.0 est arrivé. Alignons quelques faits pour aider à juger l'utilité de la chose.

3 Commentaires

le à 16h49

La navigation interne dans une page web

La navigation interne à une page web d'un site consiste à utiliser une ancre et y faire référence pour forcer l'affichage du navigateur sur la zone en question. Penchons nous d'abord sur l'utilisation « légacy* » de ce mécanisme et ensuite sur les améliorations ergonomiques envisageables avec du JavaScript (et du jQuery).

* tel qu'il fonctionne de manière standard depuis sa création.

5 Commentaires

le à 18h06

L'animation et le survol souris avec CSS3 ou jQuery

Les ergonomes s'accordent à dire qu'un des moyens pour informer l'utilisateur qu'il peut interagir avec un élément est de changer son apparence au survol de la souris. On peut réaliser cela rapidement en CSS avec plus ou moins d'effets et de complexité ou utiliser JavaScript pour faire quelque chose de plus poussé. Il va être question ici d'étudier une autre possibilité du survol de la souris qui consiste en l'apparition et l'animation d'éléments autres que l'objet survolé. En outre cet article va vous présenter la manière de gérer des menus contextuels en passant par jQuery et même CSS3.

4 Commentaires

le à 09h02

Jeu du Taquin en jQuery sur vos sites !

Démonstration du jeu du taquin

Vous connaissez probablement ce jeu ou l'on mélange une image composée de 4 fois 4 carrés dans le seul but de la remettre en ordre une fois celle-ci mélangée. Il peut s'agir de la reconstituer de mémoire ou à partir d'un modèle. Ce jeu c'est le Taquin et je vous le propose sous la forme d'un plugin jQuery pour votre site.

3 Commentaires

le à 13h12

Comment cibler un id qui contient un point

En CSS, tout comme avec le librairie JavaScript jQuery, il faut utiliser des sélecteurs pour cibler une balise ou un ensemble de balise :

  • on utilise le sélecteur # si l'on désire accéder à l'élément par la valeur de son attribut id ou,
  • on utilise le sélecteur . si on désire accéder à l'élément par une des valeurs de son attribut class.

En combinant les deux sélecteurs précédent on peut sélectionner une balise par son attribut id et son attribut class.

On peut donc cibler la balise HTML suivante

<div id="main" class="example"></div>

avec le sélecteur CSS suivant

div#main.example { /* ... */ }

0 Commentaire

Quelques #IDet beaucoup de .CLASS

Année
Mois
http://blog.haeresis.fr default fr FR Janvier Février Mars Avril Mai Juin Juillet Août Septembre Octobre Novembre Décembre