Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
formations:devweb_4 [05/11/2019 13:37] – [Utilisation avec les formulaires] rgrondin | formations:devweb_4 [03/09/2021 13:30] (Version actuelle) – [Les variables] fjiang | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Devweb 104 : Initiation au Javascript & à JQuery ====== | ||
+ | Le Javascript permet d' | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | Sur une application comme MyCentraleAssos, | ||
+ | * Affichage/ | ||
+ | * Préformatage des champs (date de naissance XX/XX/XXXX) | ||
+ | * Chargement dynamique de l' | ||
+ | * Génération de QR codes contact | ||
+ | |||
+ | Mais le JS est utilisé aussi sans qu'on le voit forcément, notamment avec Bootstrap pour les modals, les tabs... | ||
+ | |||
+ | ===== Comment utiliser le JS ===== | ||
+ | Le JS peut se mettre à divers endroits : | ||
+ | |||
+ | ==== Dans des attributs (JS inline) ==== | ||
+ | <code html> | ||
+ | <div id=" | ||
+ | <button id=" | ||
+ | </ | ||
+ | |||
+ | Ce bout de code affichera le block #cache lors du clic sur le bouton. | ||
+ | |||
+ | ==== Dans une balise script ==== | ||
+ | <code html> | ||
+ | <div id=" | ||
+ | <button id=" | ||
+ | |||
+ | <script type=" | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | Même action que le code précédent. | ||
+ | |||
+ | ==== Dans un script à part ==== | ||
+ | <code html mapage.html> | ||
+ | <div id=" | ||
+ | <button id=" | ||
+ | <script type=" | ||
+ | </ | ||
+ | |||
+ | <code javascript script.js> | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | C'est la façon recommandée : séparer les différents codes. | ||
+ | |||
+ | ===== Tester des codes JS ===== | ||
+ | Pour tester des bouts de codes html, css & js il existe un outil très pratique : JSFiddle. Il s'agit d'un outil pour éditer du code très rapidement et le tester, parfait dans le cadre de cette formation, et pour d' | ||
+ | |||
+ | Un exemple : le code précédent : https:// | ||
+ | |||
+ | ==== Un outil pratique en plus : La console JavaScript ==== | ||
+ | Pour l' | ||
+ | |||
+ | Sur Windows on peut utiliser le raccourci clavier **Ctrl + Shift + I** | ||
+ | |||
+ | Dans un code javascript, pour afficher le contenu d'une variable ou un texte dans la console, on utilise l' | ||
+ | <code javascript> | ||
+ | console.log(' | ||
+ | console.log(4); | ||
+ | console.log({' | ||
+ | console.log([' | ||
+ | </ | ||
+ | |||
+ | **Application :** pourquoi ce script ne fonctionne pas : https:// | ||
+ | |||
+ | ==== Utilisation recommandée de JSFiddle ==== | ||
+ | Il y a 4 cases sur JSFiddle : HTML, CSS, JS & preview. Il est pratique de séparer le code sur le site, pas besoin de marquer d' | ||
+ | |||
+ | Le même exemple, avec les codes dans les bonnes cases : https:// | ||
+ | |||
+ | ===== Les bases du JS ===== | ||
+ | ==== Les variables ==== | ||
+ | Les variables ne sont pas typées et peuvent contenir tout types d' | ||
+ | <code javascript> | ||
+ | // Les chaines de caractère | ||
+ | let chaine1 = " | ||
+ | let chaine2 = ' | ||
+ | |||
+ | // Les nombres | ||
+ | let nombre = 440; | ||
+ | let flottant = 4.1; | ||
+ | |||
+ | // Plusieurs déclaration avec un seul let | ||
+ | let nombre1 = 3, nombre2 = 5, | ||
+ | nombre3 = 8; | ||
+ | |||
+ | // Les tableaux | ||
+ | let tableau1 = [1, 2, 3, 4], | ||
+ | tableau2 = [1, ' | ||
+ | tableau3 = [[111, 112], [" | ||
+ | | ||
+ | // Les tableaux sont indexés à 0 comme dans la plupart des vrais langages | ||
+ | console.log(tableau1[0]); | ||
+ | console.log(tableau2[2]); | ||
+ | console.log(tableau3[1][2][0]); | ||
+ | |||
+ | // Les dictionnaires | ||
+ | let dict = { | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | ' | ||
+ | }, | ||
+ | ' | ||
+ | }; | ||
+ | |||
+ | // On y accède comme avec les tableaux ou en faisant dict.cle : | ||
+ | console.log(dict.cle1); | ||
+ | console.log(dict[' | ||
+ | console.log(dict.cle3[' | ||
+ | console.log(dict[' | ||
+ | </ | ||
+ | |||
+ | Pour voir les résultats : https:// | ||
+ | |||
+ | ==== Le JSON ==== | ||
+ | Le JSON (JavaScript Object Notation) est la manière dont on note les objets en JS. Ce format permet l' | ||
+ | |||
+ | <code javascript> | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | ], | ||
+ | " | ||
+ | } | ||
+ | </ | ||
+ | Ici par exemple les informations renvoyées par MyCentraleAssos lorsqu' | ||
+ | |||
+ | ==== Structures de base ==== | ||
+ | === les conditions === | ||
+ | <code javascript> | ||
+ | let value = 4, value2 = 6; | ||
+ | |||
+ | if(value == 4){ | ||
+ | | ||
+ | | ||
+ | }else if(value2 < 6){ | ||
+ | |||
+ | } | ||
+ | }else if(value == 3 && value2 == 6){ | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | |||
+ | === Les boucles === | ||
+ | <code javascript> | ||
+ | let i, nb = 0; | ||
+ | |||
+ | // Ces 2 boucles font la même chose | ||
+ | while(nb < 10){ | ||
+ | | ||
+ | nb++; | ||
+ | } | ||
+ | |||
+ | for(i = 0; i < 10; i++){ | ||
+ | | ||
+ | } | ||
+ | |||
+ | // Itérer sur un tableau | ||
+ | let tab = [1, 12, 13, 14]; | ||
+ | for(i in tab){ | ||
+ | | ||
+ | | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== JQuery ===== | ||
+ | Il est rare aujourd' | ||
+ | |||
+ | {{ https:// | ||
+ | |||
+ | **Ainsi le code précédent passe de ça : ** | ||
+ | <code javascript script.js> | ||
+ | document.getElementById(' | ||
+ | document.getElementById(' | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | **à ça : ** | ||
+ | <code javascript script.js> | ||
+ | $('# | ||
+ | | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | Et le petit fiddle : https:// | ||
+ | |||
+ | <note tip> | ||
+ | |||
+ | ==== Les sélecteurs ==== | ||
+ | JQuery marche sur le principe des sélecteurs DOM. On sélectionne des éléments dans la page et on interagit avec. Lorsqu' | ||
+ | |||
+ | Quelques exemples : | ||
+ | <code javascript> | ||
+ | $(' | ||
+ | $(' | ||
+ | |||
+ | $(' | ||
+ | $('# | ||
+ | |||
+ | $(' | ||
+ | $(' | ||
+ | |||
+ | $(' | ||
+ | $(' | ||
+ | $(' | ||
+ | </ | ||
+ | |||
+ | Quelques exemples : https:// | ||
+ | |||
+ | ==== Altérer le contenu ==== | ||
+ | Pour modifier le contenu d'une page, on peut utiliser les méthodes .text(valeur) ou .html(valeur) de JQuery. La différence est que **.text** va échapper le html, alors que **.html** non. | ||
+ | |||
+ | Comme vu précédemment, | ||
+ | |||
+ | Exemple : https:// | ||
+ | |||
+ | ==== Utilisation avec les formulaires ==== | ||
+ | on change | ||
+ | |||
+ | === Le comptage des feuilles === | ||
+ | On veut un input qui contient un nombre de feuilles et qui affiche un widget avec le poids associé. (Indice : une feuille fait à peu près 5g) | ||
+ | <code html> | ||
+ | <input type=" | ||
+ | <button id=" | ||
+ | <div id=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Corrigé : https:// | ||
+ | |||
+ | === La validation d'un nom d' | ||
+ | Cette fois ci on ne veut pas une actualisation à chaque caractère mais une fois la saisie finie. On veut s' | ||
+ | |||
+ | <code html> | ||
+ | <div id=" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | |||
+ | Corrigé : https:// | ||
+ | |||
+ | === Le focus === | ||
+ | focus | ||
+ | blur | ||
+ | |||
+ | === Les différents éléments du formulaire === | ||
+ | |||
+ | |||
+ | === Récupérer le contenu d'un formulaire entier === | ||
+ | <code html> | ||
+ | <form action="" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | console.log($('# | ||
+ | </ | ||
+ | ==== Les plugins JQuery ==== | ||
+ | Beaucoup de fonctionnalités proviennent de plug-ins JS qui sont fait pour fonctionner avec JQuery (tous les plugins liés à bootstrap notamment : tooltip, popover, modal...). | ||
+ | |||
+ | ===== AJAX ===== | ||
+ | AJAX est la technologie qui permet d' | ||
+ | |||
+ | //On retrouvera cette technologie aussi sous les noms de **XMLHttpRequest**, | ||
+ | |||
+ | ==== Principe ==== | ||
+ | Pour un chargement de page normal, le navigateur effectue la requête au site, et le site renvoie la page en HTML et le navigateur effectue le rendu. | ||
+ | |||
+ | Pour une requête AJAX, la page est déjà chargée comme précédemment, | ||
+ | |||
+ | {{ : | ||
+ | ([[https:// | ||
+ | |||
+ | Sur ce schéma, la partie **données XML** peut représenter un bout de code HTML, du code JSON (ou en effet du XML, tout dépend des choix des développeurs : nous utiliserons du JSON dans notre cas). | ||
+ | |||
+ | ==== Utilisation avec JQuery ==== | ||
+ | Comme pour la plupart des choses en javascript, les requêtes AJAX sont lourdes en javascript pur. Mais JQuery rend cela plus facile. | ||
+ | |||
+ | < | ||
+ | |||
+ | Un exemple de requête ajax se fait de cette façon : | ||
+ | <code javascript> | ||
+ | $.ajax({ | ||
+ | success: function(data){ | ||
+ | console.log(data); | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | Ce code est le plus simple possible. Il effectue une requête sur la page courante et logue dans la console le résultat de celle-ci. Bien évidemment il est possible de faire bien plus avancée : | ||
+ | |||
+ | <code javascript> | ||
+ | $.ajax({ | ||
+ | url: '/ | ||
+ | method: ' | ||
+ | data: { | ||
+ | username: ' | ||
+ | password: ' | ||
+ | }, | ||
+ | success: function(data){ | ||
+ | console.log(data); | ||
+ | }, | ||
+ | error: function(){ | ||
+ | console.log(' | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | ==== Exemple : un compteur en temps réel ==== | ||
+ | Pour cet exemple on veut un compteur de visiteurs sur la page, qui s' | ||
+ | |||
+ | Pour l' | ||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <h2 id=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Ou ici le h2#compteur sera modifié pour afficher la valeur via le javascript. | ||
+ | |||
+ | Le code suivant montre la requête AJAX pour récupérer la valeur du fichier et l' | ||
+ | <code javascript> | ||
+ | $.ajax({ | ||
+ | url: ' | ||
+ | success: function(data){ | ||
+ | $('# | ||
+ | } | ||
+ | }) | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | Il ne manque plus que le code php pour incrémenter la valeur : | ||
+ | <code php> | ||
+ | <?php | ||
+ | $compteur = file_get_contents(' | ||
+ | file_put_contents(' | ||
+ | ?> | ||
+ | </ | ||
+ | |||
+ | Ce qui nous donne au final : | ||
+ | <file html index.php> | ||
+ | <?php | ||
+ | $compteur = file_get_contents(' | ||
+ | file_put_contents(' | ||
+ | ?> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | < | ||
+ | <h2 id=" | ||
+ | |||
+ | <script src=" | ||
+ | < | ||
+ | function getNumber(){ | ||
+ | $.ajax({ | ||
+ | url: ' | ||
+ | success: | ||
+ | $('# | ||
+ | } | ||
+ | }) | ||
+ | } | ||
+ | getNumber(); | ||
+ | let interv = setInterval(getNumber, | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <note important> | ||
+ | |||
+ | ---- | ||
+ | Cette formation a été réalisée par [[user: | ||