Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1. Introduction 2. Présentation de jQuery 3. Rappel Javascript i. Les variables

1. Introduction 2. Présentation de jQuery 3. Rappel Javascript i. Les variables ii. Les types iii. Les opérateurs arithmétiques iv. La concaténation v. Les conditions vi. Les boucles vii. Les fonctions 4. Installation 5. Éviter les conflits 6. Premiers pas 7. Le DOM 8. Sélectionner des éléments 9. Notions indispensables 10. Parcourir le DOM i. Les ancêtres ii. Les descendants iii. Les frères iv. Les filtres 11. Manipuler le DOM i. Manipuler le texte ii. Supprimer iii. Manipuler le CSS iv. Les dimensions 12. Gestion des événements i. Événement de navigateur ii. Gestionnaire d'attachement d'événement iii. Les méthodes d'événements iv. La propagation d'événements 13. Les effets i. Cacher / Afficher ii. Les fondus iii. Plier / Déplier iv. Animation v. Stopper une animation / un effet vi. Ajouter un délais 14. Ajax i. La méthode .load() ii. La méthode .get() iii. La méthode .post() iv. La méthode .ajax() 15. Créer un plugin 16. jQuery UI i. Installation jQuery UI 17. Glossary Table of Contents Ce cours est destiné à des personnes ayant déja de bonnes connaissances HTML/CSS. Nous ne traiterons pas de toutes les méthodes de jQuery, mais des plus utilisées. w3schools : http://www.w3schools.com/jquery/default.asp Openclassrooms : http://fr.openclassrooms.com/informatique/cours/jquery-ecrivez-moins-pour-faire-plus jQuery : Simplifiez et enrichissez vos développements JavaScript http://www.pearson.fr/livre/?GCOI=27440100609080 Simplifiez vos développements JavaScript avec jQuery http://boutique.fr.openclassrooms.com/boutique-614-1061-simplifiez-vos-developpements-javascript-avec-jquery.html jQuery-Ajax avec PHP http://www.eyrolles.com/Informatique/Livre/jquery-ajax-avec-php-9782212137200 Ressource en anglais référence en JS : Eloquent Javascript CodeSchool : https://www.codeschool.com/courses/try-jquery Apprendre jQuery Pré-requis Autres références en ligne Livres sur le sujet Autres références en ligne jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML. La première version est lancée en janvier 2006 par John Resig (un petit génie du JavaScript). La bibliothèque contient notamment les fonctionnalités suivantes : Parcours et modifications du DOM ; Gestion des événements ; Effets visuels et animations ; Manipulation des CSS ; Ajax ; Plugins ; Utilitaires Pour vous faire un rapide comparatif d'écriture, voici des exemples comparant jQuery à JavaScript. Évènements // jQuery $(document).ready(function() { // vos scripts }) // Javascript document.addEventListener('DOMContentLoaded', function() { // vos scripts }) // jQuery $('a').click(function() { // vos scripts }) // Javascript [].forEach.call(document.querySelectorAll('a'), function(el) { el.addEventListener('click', function() { // vos scripts }) }) Sélecteurs // jQuery var divs = $('div') // Javascript var divs = document.querySelectorAll('div') Extrait de code issu de l'article : http://putaindecode.fr/posts/js/de-jquery-a-vanillajs/ Présentation de jQuery jQuery est un framework JavaScript, il est donc essentiel de comprendre un minimum ce langage pour progresser plus facilement. Rassurez-vous, rien de bien compliqué à l'horizon. Nous verrons uniquement les bases nécessaires à tout bon intégrateur web désireux de progresser. Voici un bref aperçu de ce que nous aborderons dans cette partie : 1. Les variables 2. Les types 3. Les opérateurs arithmétiques 4. La concaténation 5. Les conditions 6. Les boucles 7. Les fonctions Vous trouverez sur le site de "Mozilla developer" une bonne documentation en français sur JavaScript : https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide Rappels JavaScript Une variable est un objet repéré par son nom, pouvant contenir tout type de données, qui pourront être modifiées lors de l'exécution du programme. En JavaSript les noms de variables peuvent être aussi long que l’ont le souhaite, mais doivent répondre à certains critères : 1. un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un _ underscore. 2. un nom de variable peut comporter des lettres, des chiffres et les caractères _ et & . 3. les espaces ne sont pas autorisés 4. Les noms de variables ne peuvent pas être les noms suivants, qui sont des noms réservés : abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, infinity, instanceof, int, interface, label, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with. Nous déclarons notre variable. var maVariable; Le mot clé var indique que vous déclarez une variable, ; indique que l'instruction est terminée. Une fois déclarée, var n'est plus nécessaire, vous pouvez stoker ce que vous souhaitez. var maVariable; maVariable = "J'aime JavaScript"; Nous pouvons modifier la valeur de la variable. var maVariable; maVariable = "J'aime JavaScript"; maVariable = "Je n'ai pas peur de JavaScript"; // maVariable vaut "Je n'ai pas peur de JavaScript Nous pouvons déclarer notre variable et lui attribuer une valeur sur la même ligne. var maVariable_2 = 7; Nous pouvons déclarer plusieurs variables sur une ligne, mais attribuer une valeur seulement à maVariable_2. Puisque l'ont délare le même type d'élément, le mot clé var peut éviter d'être répété en séparant les déclarations par des virgules. var maVariable_1, maVariable_2 = 7, maVariable_3; Vous pouvez afficher votre 1ère variable dans la console de votre navigateur. var maVariable = "J'aime JavaScript"; Les variables Création de notre première variable console.log(maVariable); Ce type représente n’importe quel texte. On peut l'assigner de deux façons différentes. Avec des guillemets maVariable = "J'aime JavaScript"; Avec des apostrophes maVariable = 'J\'aime JavaScript'; Attention, si vous voulez des apostrophes pour déclarer votre variable et que vous utilisez des apostrophes dans le texte vous devez échapper les derniers avec le caractère \ (antislash). Dans le cas contraire, JavaScript pensera que le code s’arrête à la première apostrophe et produira une erreur. Ce type de variable représente tout nombre que ce soit un entier, un négatif, un nombre scientifique, etc. maVariable = 3; Un chiffre décimal se déclare avec un point comme séparateur et non une virgule. maVariable = 3.5; Attention, si vous écrivez le nombre entre guillemets ou avec apostrophes, il sera reconnu comme une chaîne de caractères. maVariable = '3'; // Chaîne de caractères Désigne un paramètre qui peut avoir comme valeur true ou false. Lorsque : aucune valeur n'est passée ; la valeur est égale à 0 ; une chaîne de caractères est vide, null, undefined ou NaN la valeur de l'objet est initialisée à False . Dans tous les autres cas, l'objet Boolean possédera la valeur True . Les types Les chaînes de caractères ou "string" Le type numérique ou "number" Les booléens Ces deux états s'écrivent de la façon suivante : var isTrue = true; var isFalse = false; Nous pouvons vérifier le type de variable avec l’instruction typeof. La fonction console.log() affiche le résultat dans la console du navigateur. var myVariable = 2; console.log(typeof myVariable); // Affiche : « number » var myVariable = 'Mon texte'; console.log(typeof myVariable); // Affiche : « string » var myVariable = false; console.log(typeof myVariable); // Affiche : « boolean » Nous pouvons tester l’existence de variable avec la même instruction. console.log(typeof otherVariable); // Affiche : « undefined » Dans certains cas de figure, nous pouvons avoir besoin de convertir une chaîne de caractères en nombre. La méthode parseInt() convertie une chaîne de caractères en nombre. var myVariable = '2', n = parseInt(myVariable); console.log(typeof n); // Affiche : « number » Pour convertir une chaîne de charactères en nombre, nous pouvons utiliser la méthode .toString() . var myVariable = 2, n = myVariable.toString(); console.log(typeof n); // Affiche : « string » Test de type La convertion de type Convertion type "string" en" number" Convertion type "number" en "string Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une variable de type number. Ils sont à la base de tout calcul et sont au nombre de 5 : Opérateurs Signe Effet Exemple Résultat (avec x valant 7) Addition + Ajoute deux valeurs x + 3 10 Soustraction - Soustrait deux valeurs x - 3 4 Multiplication * Multiplie les valeurs x * 3 21 Division / Divise deux valeurs x / 3 2.3333333 Modulo % Retourne le reste de la division entière de l'opérant de gauche par celle de droite x % 2 1 Faire des calculs avec JavaScript s'avère très simple. var result = 7 + 2; console.log(result); // Affiche : 9 Nous pouvons faire des calculs avec des variables contenant des valeurs de type numérique. var number_1 = 7, number_2 = 2, result; result = number_1 + number_2; console.log(result); // Affiche : 9 Nous pouvons faire des calculs plus complexes comprenant plusieurs opérateurs. var result = (((3 + 4) - 1) / 2) * 3; console.log(result); // Affiche : 9 Il est fréquent d’écrire ce type de calcul. var maVariable = 7; maVariable = maVariable + 2 console.log(maVariable); // Affiche : 9 Il existe une façon plus concise permettant d'éviter la redondance de variables. var maVariable = 7; maVariable += 2; console.log(maVariable); // Affiche : 9 Les opérateurs arithmétiques Calculs simples Simplification des calculs On procèdera de la même manière pour chaque opérateur. maVariable += 2; maVariable -= 2; maVariable *= 2; maVariable /= 2; maVariable %= 2; Pour ajouter +1 nous pouvons utiliser l'opérateur d'incrémentation ++ var maVariable = 7; maVariable++; console.log(maVariable); // Affiche : 8 Pour supprimer -1 nous pouvons utiliser l'opérateur de décrémentation -- var maVariable = 7; maVariable--; console.log(maVariable); // Affiche : 6 L’opérateur arithmétique + permet de faire des concaténations entre plusieurs chaînes uploads/Litterature/ apprendre-jquery.pdf