SUPPORT DE COURS JAVASCRIPT / JQUERY / AJAX Sommaire  Sommaire .............................................. 1  Les fonctions ........................................ 16  Présentation .......................................... 2 Définition .................................................................. 16 Qu’est ce que le Javascript ? ....................................... 2 Les fonctions prédéfinies........................................... 16 Historique ................................................................... 2 les fonctions utilisateur ............................................. 17 Arrivée de JQuery ........................................................ 3 les fonctions et la portée des variables ..................... 18  Mes premiers mots en Javascript ........... 4  Les tableaux de données (Arrays) ......... 20 Où écrire du code Javascript ? .................................... 4 Définition .................................................................. 20 Les outils pour pratiquer ............................................. 5 Syntaxe et utilisation ................................................ 20 Syntaxe et affichages.................................................. 5  Les Objets ............................................ 23 Les commentaires ....................................................... 6 Définition .................................................................. 23  Les variables .......................................... 7 syntaxe ...................................................................... 23 Définition .................................................................... 7 le mot clé « this » ...................................................... 24 Déclaration et Affectation .......................................... 7 parcourir un objet avec la boucle for ........................ 25 Les portées des variables ............................................ 8 Ce qu’il faut retenir sur les objets ............................. 25 Les types de variables ................................................. 8  Le DOM (Document Object Model) ....... 27  Les structures conditionnelles ................ 9 definition ................................................................... 27 Définition .................................................................... 9 utilisation du DOM .................................................... 27 Syntaxe des conditions IF, ELSE IF, ELSE ..................... 9  JQuery : write less do more .................. 29 Les opérateurs de comparaison................................ 10 les selecteurs jquery .................................................. 29 Les opérateurs logiques ............................................ 11 les événements jquery .............................................. 30 Syntaxe des conditions de choix SWITCH ................. 13 les fonctions jquery ................................................... 31  Structure itérative : les boucles ............ 14  Les Plugins JQuery ................................ 33 Définition .................................................................. 14 documentation ......................................................... 33 La boucle FOR ........................................................... 14 installation ................................................................ 34 La boucle WHILE ....................................................... 15 utilisation et parametrage ........................................ 34 La boucle DO WHILE ................................................. 15  Divers .................................................. 36 les shim et les polyfill ................................................ 36 degradation progressive………………………………...……….36 www.evogue.fr Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation  Présentation QQUU’’EESSTT CCEE QQUUEE LLEE JJAAVVAASSCCRRIIPPTT ?? Javascript est un langage de programmation qui permet d’animer et de dynamiser des pages Web. A ne surtout pas confondre avec le Java qui est un autre langage informatique. Javascript est surtout utilisé côté client, c'est-à-dire que c’est le navigateur qui lit et interprète le code que l’on écrit en Javascript (voir l’architecture client / serveur pour plus de détails). Même si Javascript est connu pour le Web, il peut être utilisé pour créer d’autres applications. Tom Tom en est un exemple. HHIISSTTOORRIIQQUUEE 1995 est l’année qui marque le début de l'histoire du Javascript. Il y a 20 ans, le leader sur le monde du Web était la société Netscape Communications avec son navigateur Web Netscape Navigator qui était utilisé par plus de 90% des internautes. Le tout premier navigateur Web s'appelait Mosaïc et vient aussi de la société Netscape. A l’époque, Netscape est partenaire d'une société informatique du nom de Sun Microsystems, un fabricant d’ordinateurs et éditeur de logiciels dont la réputation n’est plus à faire auprès des professionnels. Sun développa un langage informatique performant appelé JAVA. Encore très utilisé aujourd’hui par de nombreux systèmes, ce langage est destiné exclusivement à la conception de logiciels. Ce qui le rendait trop puissant et compliqué pour une utilisation au sein d’applications Web. Ayant flairé ce nouvel eldorado virtuel, Sun et Netscape décidèrent de créer un langage exclusivement réservé au Web. Un langage moins puissant que le JAVA mais beaucoup plus simple d'utilisation, ce qui le rendrait très accessible à qui veut l'apprendre. Cette mission fût confiée à Brendan EICH, génie technique qui rejoint l'équipe de Netscape en avril 1995. Brendan EICH Il avait 10 jours pour créer un langage qui s'adapterait à la nouvelle version du navigateur Netscape. Ce langage fût baptisé Livescript. © Tous droits réservés – Ziad JAAGOUB Page 2 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation Le Livescript était un langage révolutionnaire qui donna naissance aux premières pages web dynamiques. Par soucis marketing et voulant profiter de la notoriété de son partenaire Sun autour du langage Java, Netscape décide de renommer Livescript en Javascript durant la même année. Ainsi les clients feraient le lien entre Java de Sun et Javascript. Netscape soumet Javascript à ECMA International (European association for standardizing information and communication systems) pour une standardisation de son langage. ECMA est une organisation active de standardisation dans le monde informatique, similaire au W3C pour le HTML. AARRRRIIVVEEEE DDEE JJQQUUEERRYY JQuery est ce qu'on appel une bibliothèque ou une API (application programming interface) Javascript, c'est à dire un ensemble de fonctions qui permettent d'écrire de manière condensée, les lignes de codes les plus utilisées en Javascript. Exemple : nous allons souvent utiliser les fonctions Javascript qui permettent d'attraper les balises HTML et les animer, ainsi en Javascript nous allons écrire d'une certaine manière et en JQuery d'une manière plus condensée. Javascript : document.getElementsByTagName("LI")[0].innerHTML="Lait"; JQuery : $("LI:first").text("Lait"); Les deux codes font donc la même chose mais ne s’écrivent pas de la même façon. La version 1.0 stable de JQuery a été crée en aout 2006 par un jeune homme de 22 ans du nom de John RESIG. Aujourd’hui nous en sommes à la John RESIG 1.11. © Tous droits réservés – Ziad JAAGOUB Page 3 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation  Mes premiers mots en Javascript OOUU EECCRRIIRREE DDUU CCOODDEE JJAAVVAASSCCRRIIPPTT ?? Il est possible d’écrire du code JS à deux endroits : Soit dans un fichier .js puis en l’appelant dans notre fichier HTML comme on le ferait avec un fichier style.css Soit directement dans notre fichier HTML entre deux balises <script></script> Il n’est plus nécessaire d’indiquer le « type = ‘text/javascript’ » sous HTML 5. Mais cet attribut est obligatoire pour HTML 4 et versions antérieures. © Tous droits réservés – Ziad JAAGOUB Page 4 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation LLEESS OOUUTTIILLSS PPOOUURR PPRRAATTIIQQUUEERR Pour commencer à coder en JS, les seules applications dont nous avons besoin sont : - Un éditeur de texte (Notepad ++ fera l’affaire) - Un navigateur (Firefox est recommandé) - Le module Firebug pour Firefox (pour voir notre code source dans le navigateur) - Le module Web Developer pour Firefox (nous indique les erreurs JS) SSYYNNTTAAXXEE EETT AAFFFFIICCHHAAGGEESS Note importante : Le Javascript est sensible à la casse Exemples : <script type= « text/javascript »> alert(‘Bonjour’);</script> La fonction d’affichage alert(), permet d’écrire dans une boîte de dialogue, Ouverture de la balise <script> pour écrire du JS, Message affiché en QUOTES ou GUILLEMETS Une instruction JS se terminera TOUJOURS par un point virgule, Fermeture de la balise </script> <script type="text/javascript"> confirm('Tu commences le JS');</script> Cette fonction affiche une boîte de dialogue avec le bouton « OK » <script type="text/javascript"> prompt('Quel âge as-tu ?');</script> Affiche une boîte de dialogue avec une question et un champ pour remplir la réponse <script type="text/javascript"> console.log('Voici la console');</script> Affiche le message dans une console © Tous droits réservés – Ziad JAAGOUB Page 5 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation LLEESS CCOOMMMMEENNTTAAIIRREESS Il est possible d’écrire des commentaires dans notre code JS, les commentaires sont des lignes qui ne seront pas interprétées. Elles servent uniquement à aider le développeur à se repérez et éventuellement informer ses collègues de ce qu’il a fait. Autrement dit, documenter le code. // mon commentaire Le double slash permet d’écrire des commentaires sur une seule ligne /* mes commentaires sur plusieurs lignes */ Les commentaires sur plusieurs lignes s’écrivent entre slash étoiles. Comme en CSS © Tous droits réservés – Ziad JAAGOUB Page 6 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation  Les variables DDEEFFIINNIITTIIOONN « Emplacement de stockage nommé qui peut contenir des données pouvant être modifiées pendant l'exécution du script. Chaque variable a un nom qui l'identifie de façon unique à l'intérieur de son niveau de portée. » Plus simplement, une variable est une zone en mémoire du système, qui sert à conserver une valeur. Les variables sont des sortes de boîtes dans lesquelles on stock des données. Une fois les données stockées dans cette variable, nous pouvons manipuler le contenu de cette variable, le contenu est appelé la « valeur ». DDEECCLLAARRAATTIIOONN EETT AAFFFFEECCTTAATTIIOONN Exemple : var maBoite = 'Salut toi !'; alert(maBoite); // Affichera son contenu DONC 'Salut toi !' Pour déclarer une variable on utilise le mot clé « var ». Le signe « = » permet d’affecter la variable d’une valeur. Ainsi chaque fois que l’on manipulera une variable cela veut dire que l’on manipule son contenu, donc sa valeur. Pour faire comprendre à notre machine que l’on utilise une variable et non du texte brut on écrit la variable sans quottes ni guillemets. Exemple : var monMessage= 'Coucou !'; alert(monMessage); // Affichera son contenu DONC 'Coucou !' alert('monMessage'); // Affichera 'monMessage' car se trouve entre quottes Nous pouvons stocker plusieurs sortes de données dans les variables var monPrenom = "Pierre"; alert(monPrenom) ; // affichera Pierre var monAge = 27; //les chiffres ne prennent pas de quottes var monAge = prompt('Quel âge as-tu ?'); // Ici j’affecte la valeur que l’internaute rentrera dans le champ généré par prompt var monPrenom = "Marie"; // Ici Marie prendra la place de Pierre dans la variable alert(monPrenom) ; // affichera Marie © Tous droits réservés – Ziad JAAGOUB Page 7 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation LLEESS PPOORRTTEEEESS DDEESS VVAARRIIAABBLLEESS Lorsqu’on affecte une variable, nous pouvons manipuler la valeur affectée à cette variable. Elle nous est donc accessible. Cependant, cette accessibilité dépend de l’endroit où la variable a été affectée. On parle donc de la portée de la variable. - Une variable déclarée en dehors de toute fonction peut être utilisée n’importe où dans le script. On parle alors de VARIABLE GLOBALE. - Une variable déclarée dans une fonction aura une portée limitée à cette seule fonction, c’est- à-dire quelle est inutilisable ailleurs. On parle alors de VARIABLE LOCALE. Pour déclarer une variable à l’intérieur d’une fonction et la rendre GLOBALE donc accessible de partout dans le script, celle-ci doit être déclarée sans le mot clé var. Exemple : monMessage = 'Salut' ; Pour bien comprendre l’utilité de la portée des variables ainsi que leur utilisation, se reporter au chapitre des fonctions. LLEESS TTYYPPEESS DDEE VVAARRIIAABBLLEESS En Javascript comme dans tous les langages de programmation il existe plusieurs types de données. La fonction typeof() permet d’obtenir le type d’une donnée Les nombres : var a = 36 ; alert(typeof(a)) ; // Affichera « number » Les nombres simples sont dits « integer » et les nombres à virgule sont dits « float » ou « double ». On remarquera que lorsqu’on affecte un nombre, on ne met pas de quottes ni de guillemets. Les chaines de caractères (textes) : var a = ‘Salut !’ ; alert(typeof(a)) ; // Affichera « string » Les chaines de caractères ou textes sont appelés « string ». Les booléens : var a = true ; var b = false ; Une donnée a toujours une valeur, c'est-à-dire qu’elle est soit VRAIE soit FAUSSE (true ou false). Si var = 0, sa valeur est considérée comme FALSE, Si var = 1, ou n’importe quelle autre valeur (‘salut’ ou autre..), sa valeur est considérée comme TRUE. © Tous droits réservés – Ziad JAAGOUB Page 8 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation  Les structures conditionnelles DDEEFFIINNIITTIIOONN Nous appelons structure conditionnelle, la structure qui permet de réaliser une (ou plusieurs) instruction(s) sous certaines conditions. Elle nécessite l'utilisation des opérateurs de comparaisons et parfois des opérateurs logiques. En Javascript, comme dans tout langage de programmation, nous utilisons des conditions. Mettre une condition consiste à écrire du code Javascript, qui ne sera exécuté que si la personne rempli la condition. Par exemple, à l’aide du code JS, je demande à l’internaute quel est son sexe. Celui-ci me répond « féminin » ou « masculin ». S’il répond « féminin », j’affiche un background rose. Sinon, s’il répond « masculin », j’affiche un background bleu. Sinon s’il répond autre chose, ou ne répond pas, je lui écris « tu ne réponds pas à la question ». SSYYNNTTAAXXEE DDEESS CCOONNDDIITTIIOONNSS IIFF,, EELLSSEE IIFF,, EELLSSEE if (ma condition) // voir les opérateurs de comparaisons, sous-chapitre suivant. { // Ne pas oublier l’ouverture d’accolade alert("Mon message"); // Ce code ne sera exécuté QUE si la condition est remplie, NE PAS OUBLIER LE POINT VIRGULE } // IMPORTANT : Ne pas oublier les ACCOLADES, JAMAIS de POINT VIRGULE à la fermeture d’accolades else if (mon autre condition) { alert("mon autre message"); } else { alert("mon dernier message"); } © Tous droits réservés – Ziad JAAGOUB Page 9 sur 37 Ziad JAAGOUB | JavaScript-Jquery-Ajax | Retrouvez l’intégralité des cours sur evogue.fr/formation var question = prompt(‘De quel sexe es-tu ?’) ; // Ici la réponse de l’internaute sera stockée dans la variable « question ». if(question == ‘masculin’) //Si la valeur de la variable est « masculin » { alert("Tu es un homme"); // Ce code ne sera exécuté QUE si la réponse est « masculin » } else if(question == ‘feminin’) // Sinon si la valeur de la variable est « feminin » { alert("mon autre message"); // Le code précédent ne sera pas exécuté et CE code ci ne sera exécuté QUE si la réponse est « féminin » } else // Sinon, c'est-à-dire dans tous les autres cas. { alert("Ah .. Tu n’es ni l’un ni l’autre ?"); } LLEESS OOPPEERRAATTEEUURRSS DDEE CCOOMMPPAARRAAIISSOONN Lorsqu’on pose une condition, pour que l’ordinateur comprenne que la condition est valide ou invalide. Le résultat de cette condition est forcément true ou false. Exemple dans le cas précédent, notre condition était if(question == 'masculin') ; Si la condition est remplie, le résultat sera true. Si la condition n’est pas remplie, le résultat sera false. Le résultat est donc un booléen. Les opérateurs de comparaison permettent de tester, l’égalité ou la différence entre deux données. Tous les tests sont à placer dans la condition if entre les deux parenthèses. Égal (==) Renvoie true si les valeurs des données sont égales. if(3 == var1) if("3" == var1) if(3 == '3') Différent (!=) Renvoie true si les valeurs des données ne sont PAS égales. if(var1 != 4) if(var2 != "3") Strictement égal (===) Renvoie true si les valeurs des données sont égales ET du même type. if(3 === var1) © Tous droits réservés – Ziad JAAGOUB Page 10 sur 37