Comment le Framework JavaScript jQuery peut Simplifier votre Développement

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Suite à votre nombreuses demandes, voici une nouvelle formation dédiée au Framework JavaScript jQuery !

Vous allez découvrir la Puissance de jQuery pour accélérer et simplifier votre développement.

C’est parti pour la première vidéo de cette série.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Comment le Framework JavaScript jQuery peut Simplifier votre Développement

Bonjour à tous et bienvenu sur Développement Facile.

A partir de ce premier cours on va passer au niveau supérieur ensemble, dans le développement JavaScript, HTML 5, CSS 3, avec PHP, MySQL, donc là, voici une nouvelle série dédiée aux frameworks JavaScript qui vont littéralement vous simplifier votre développement, votre développement d’applications étonnantes, grâce à des effets, des formulaires beaucoup plus sympas, donc vous allez découvrir, apprendre à utiliser les frameworks jQuery et Dojo, durant les prochaines semaines, dans ce nouveau cours, je vais vous présenter le Framework jQuery, comment il fonctionne, qu’est-ce que vous allez pouvoir faire avec. Bien sûr, toujours accompagné d‘exemples de code source.

Présentation

jQuery c’est un Framework JavaScript libre et open source, qui est installé côté client, côté internaute, donc jQuery s’occupe de l’interaction avec le DOM pour récupérer des balises, modifier le style CSS, du JavaScript également, d’effectuer des requêtes en Ajax et de l’HTML. C’est une librairie JavaScript qui simplifie énormément la manipulation commune du JavaScript, get-element balise div, par exemple et donc la devise de jQuery c’est « write less do more », excusez-moi pour mon accent anglais, ce qui veut dire en français « écrivez moins pour faire plus ».

Donc les particularités de jQuery c’est la souplesse justement, qu’il apporte pour accéder à tous les éléments du document HTML, pour accéder à des balises, modifier le style CSS, il y a une multitude de sélecteurs, c’est des raccourcis jQuery qui lui permette d’accéder à ces éléments directement. L’avantage de ce Framework c’est qu’il est compatible avec la majorité des navigateurs que ce soit sur les PC de bureau, les PC portables, les smartphones, ou les tablettes jQuery est compatible. jQuery, son nom vient de j pour JavaScript, et Query requête comme requête pour aller chercher ou accéder à des éléments HTML. Il faut savoir jQuery est en constante évolution, il y a des mises à jour régulières, toujours des nouvelles fonctionnalités qui sont intégrées, il s’améliore. jQuery c’est une bibliothèque JavaScript très petite, de mémoire il me semble qu’elle fait 17Ko, et il faut savoir que la qualité du Framework jQuery a été reconnue par les leaders du Web comme Google, Mozzilla, IBM, WordPress et bien d’autres encore. jQuery en ce moment, connait une croissance exponentielle, très rapide, et il y a des concurrents comme prototype, Dojo, Scriptaculo, tout en sachant que vous allez également recevoir des cours sur Dojo.

Installation

Alors déjà, pour l’installer, là sur votre écran s’affiche l’URL, jQuery.com/download je vous conseille de prendre la version compressée, pour votre site Internet, comme ça pour l’internaute ça chargera beaucoup plus vite les fichiers JavaScript, ensuite il suffit d’ajouter à votre ligne l’appel vers le script jQuery.js, donc suivant comment l’endroit où vous l’avez implémenté dans votre arborescence chez votre hébergeur, je vous conseille de créer un répertoire js pour JavaScript, sinon vous avez la possibilité d’utiliser Google Hosted Librairies, je vous en ai déjà parlé dans les précédents cours, c’est Google qui hébergent des librairies communes JavaScript, des polices de caractères également, ça permet un chargement plus rapide et optimisé donc il suffit de renseigner cette URL qui correspond à la version de jQuery que vous utilisez, comme ça vos sites s’afficheront beaucoup plus rapidement, en tout cas le script jQuery se chargera beaucoup plus rapidement sur l’ordinateur de votre visiteur.

Utilisation

Pour l’utiliser c’est très simple, vous pouvez utiliser soit jQuery et après votre fonction, votre appel, ou le raccourcis dollars, votre fonction, votre appel. Globalement, la majorité des développeurs utilisent bien évidemment, le raccourci dollars pour accéder directement aux méthodes de la bibliothèque jQuery. Donc pour charger les éléments du DOM dès qu’ils sont disponibles, donc bien avant le chargement complet de la page, vous avez une fonction $document.ready, dès que tous les éléments du DOM sont disponibles, en gros vous n’avez pas besoin d’attendre que la page se charge entièrement pour commencer à accéder aux éléments de jQuery et à faire des manipulations du DOM, du CSS, et de votre page HTML.

Exemple d’application

Je vais vous montrer un exemple de code source, c’est un script très court qui permet de créer un menu assez sympathique, en deux temps trois mouvements. On passe tout de suite au code source. Alors le code source est ici, comment on fait ? Justement bien avant le chargement complet de la page, on appel document.ready, et là on récupère les balises HTML, donc regardez les balises HTML qui sont créées avec la classe menu, pour le menu, menu principal, et des div avec des classes sous menu, bien évidemment, il y a un style CSS qui est associé à chacun de ces éléments donc sous menu, menu principal, vous remarquez, et le menu. Donc j’ai mis des couleurs de textes, des couleurs de fond, une taille bien précise, alors comment ça se passe ? div.sous-menu ça va accéder à la balise div, qui a une classe sous-menu, ici, balise div classe sous-menu, j’aurais pu mettre p classe = sous-menu, jQuery n’aurait pas accédé à cette balise-là, parce que j’ai spécifié ici, div. Là pareil, je dis que c’est un paragraphe, balise paragraphe avec la classe menu principal, pour accéder directement ici, et ensuite on ouvre le menu enfant, bien évidemment, je vais revenir dans les prochains cours sur ces commandes jQuery pour que ce soit plus simple, et on fait un petit effet de descente slideDown à une vitesse de 300, pour faire un effet d’ouverture de menu avec sibkings et slideUp pour remonter. Donc qu’est-ce que ça donne en réel ? Tout simplement, ceci, vous cliquez et le sous menu apparaît, pareil l’autre sous menu se referme et le nouveau apparaît. Donc ça permet de créer un menu très sympa, et vraiment très rapidement regardez, il y a votre div que vous êtes obligé de créer dans tous les cas, votre CSS et trois lignes de codes avec jQuery pour créer un menu vraiment très sympathique, avec des petits effets sympas.

Votre plan d’actions !

Maintenant c’est partit, donc c’est à vous, commencez par télécharger le Framework jQuery, à l’installer, téléchargez le code source disponible sous cette vidéo, comme d’habitude, si vous avez des questions, posez-les, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple jQuery

Et voici un exemple d’application développée avec jQuery.

Downloads

  • Application jQuery
    Application jQuery

    Code source commenté d'une application jQuery.
    Il y a également la version jquery-1.11.0.min.js.

Connaissez-vous le Framework jQuery ?

Dans quelles types d’applications avez-vous déjà utilisé jQuery ?
Dites-moi tout dans les commentaires ci-dessous.

Créez Rapidement des Sites Hyper-Interactifs avec vos utilisateurs grâce à la Formation Gratuite jQuery Facile !

Recevez les Stratégies pour utiliser le Potentiel des Frameworks jQuery et Dojo
+
Logo jQuery
+
Des Tutoriels Gratuits Supplémentaires pour utiliser toute la "Richesse" du Framework de Google : AngularJS