You are on page 1of 9
‘21072020 La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud Menu La concaténation et les littéraux de gabarits en JavaScript Cours complet JavaScript INTRODUCTION AU cours JAVASCRIPT introduction au Javascript 2 Lenvironnement, de travail pour ce cours JavaScript 30u écrire Ie code JavaScript ? 4, Commentaires, indentation et syntaxe de base en JavaScript LES VARIABLES ET TYPES DE VALEURS JAVASCRIPT 5 Présentation des variables, Javascript Les types de données en Javaseript 7. Présentation des opérateurs arithmétiques et affectation JavaScript ala site utilise o cook! Dans cette nouvelle lecon, nous allons expliquer en détail ce quest la nation et comment fonctionne 'opérateur de concaténation qu'on a déja pu voir dans les legons précédentes concat Nous allons également voir une autre facon d’entourer nos données en JavaScript avec les littéraux de gabarits (appelés en anglais « template literals » ou « template strings »), La concaténation en JavaScript Concaténer signifie littéralement « mettre bout 4 bout ». La concaténation est un, mot généralement utilisé pour désigner le fait de rassembler deux chaines de caractéres pour en former une nouvelle, En JavaScript, lopérateur de concaténation est le signe +. Faites bien attention ici lorsque le signe + est utilisé avec deux nombres, il sert a les additionner. Lorsqu'il est utilisé avec autre chose que deux nombres, il sert dlopérateur de concaténation La concaténation va nous permettre de mettre bout-d-bout une chaine de caractéres et la valeur d'une variable par exemple. Sans opérateur de concaténation, on ne peut pas en effet utiliser une chaine de caractéres et une variable cOté 8 c6té car le JavaScript ne saurait pas reconnaitre les différents éléments. Notez une chose intéressante relative a la concaténation en JavaScript ici : si on utilise 'opérateur + pour concaténer une chaine de caractéres puis un nombre, alors le JavaScript va considérer le nombre comme une chaine de caractéres, ies pour vous ‘ourni’ la meilleure exoérience de navigation possible. En continuant sur ce vous accepiez [utilisation des cookies 2601 ACCEPTE -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart 19 sa1072020 39, Ajouter, modifier ou supprimer des éléments du DOM avec JavaScript 40, Manipuler les attributs et les styles des éléments via le Dom en JavaScript Ala gestion dévenements en JavaScript et la méthode addEventListener ata propagation des €venements en Javaseript 43. Empécher_un événement de se propager et annuler son par défaut en Javascript UTILISATION DES EXPRESSIONS: REGULIERES EN JAVASCRIPT 44, Introduction aux expressions régulieres ou rationnelles en, Javaseript 48, Utliser les réguligres pour effectuer des recherches et remplacements en Javascript 46 Les classes de caractéres. et classes abrégées des expressions regulieres site utilise o -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart cook! La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud HTML Js et x let y /rcode connenté pour éviter 1'apparition intenpestive des boites d'alerte. & déconnenter alert("x contient © +x + Any contient ° + y+ "\nleur some vaut "+ (+ ¥))s slere(“x content $<) y contient $(y) +s ” Comme vous pouvez le remarquer, les deux instructions alert() renvoient un résultat équivalent. Notez également que Tutilisation des littéraux de gabarits conserve les retours & la ligne et les décalages dans le résultat final En effet, dans le premier alert() utilisant la concaténation, vous pouvez voir qu'on a Utilisé des \n qui servent & matérialiser un retour & la ligne en JavaScript. ies pour vous ‘ournir la meilleure exnérience c vous acceptez [utilisation Ges cookies. ravigation possible, En continuant sur ce sa1072020 La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud 57. Les promesses en JavaScript, 58 Utiliser async fet await pour er des promesses plus Isibles en JavaScript 59.le chemin critique du rendu et les attributs HTML async et defer SYMBOLES, TTERATEURS ET CENERATEURS. EN JAVASCRIPT 60.Les _symboles et objet Symbol en Javascript Si Les protocoles: et objets Iterable et Iterateur en JavaScript 62 Les générateurs en Javascript STOCKAGE DE DONNEES DANS LE NAVIGATEUR EN JAVASCRIPT 68. Les cookies en Javaseript 64 UAPL Web: Storage localstorage et sessionstorage en JavaScript 65.Utlliser TAPI de stockage IndexedDB en. Javascript ELEMENT HTML CANVAS ET LAPI CANVAS: 66, Présentation de___lélement Cesite utilise o cookies pour vous fournir la meilleure exoérience de navigat site, vous accepiez l'utilisation des cookies -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart n possible. En continuant sur ce 119 sa1072020 La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud 67. Dessiner des rectangles dans un élément HTML Javaseript 68. Définir des. traces pour dessiner des formes dans un JavaScript 69.Création de dégradés ou de motifs dans un Javascript 170. ajout dombres et utilisation de la transparence dans un canevas en JavaScript TiAjouter du texte ou une mage dans un Javascript 72.Appliquer des sransformations Javascript Les MODULES: JAVASCRIPT. 73.Les modules Javascript Import et export JSON, AJAX ET FETCH EN JAVASCRIPT 76, Présentation de JSON et utilisation en JavaScript 75. Introduction & ajax en JavaScript 7e.créer des Cesite utilise o n possible. En continuant sur ce cookies pour vous fournir la meilleure exoérience de navigat site, vous accepiez l'utilisation des cookies -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart sa1072020 La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud 71. Présentation et utilisation de TAP] Fetch en fascript CONCLUSION DU” cours COMPLET JAVASCRIPT 78.Conclusion du cours complet 2 réflexions au sujet de “La concaténation et les littéraux de gabarits en JavaScript” Youssef75 6 novembre 2019 a 11 h 41 min Bonjour Pierre, Je tenais 8 vous signaler une petite erreur de francais dans la toute premiére ligne du cours. » nous allons expliquer en detail ((et}) qu’est la concaténation », il faut remplacer le « et » Cordialement ‘Connectez-vous pour répondre Pierre GIRAUD 6 novembre 2019 8 12 h 22 min Corrigé, merci! Connectez-vous pour répondre Laisser un commentaire Vous devez étre connecté pour publier un commentaire. site utilise des cookies pour vous fournir la meilleure exnérience c site, vous accepiez lutilisation des cook' -ntps:maww piorre-graud.comJavascriot-apprendre-coder-cours/concatonationsi sa1072020 La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud Q.Les constantes en JavaScript, Les iT LES oars pe Earn $6 Per Hr by Typing ‘CONTROLE JAVASCRIPT Home based work Apply now, Worldwide Openings To,Structures de contréle, conditions et opérateurs de Javascript siineinto OPEN Regardez les exemples suivants pour bien comprendre V.Les conditions #. i.else et if.else else en Javaseript 12. Opérateurs logiques,, précédence et ragles dassociativité des opérateurs en Javascript 15 Utilser Toperateur temaire pour écrire des. conditions Javascript condensées 14, instruction switch en Javaseript 1s Prssontation Vow oowcks ees opereeurs incarnation décrémentation #1 PMP® Exam Sim ee T6.Les —_boucles Get Access To 1800 white, do. white Realistic Test Questions & for et for. in et les instructions break Feel 100% Ready To Take et continue en Your Exam! Javaseript SP Intemational LES FONCTIONS EN JAVASCRIPT site utilise des cookies pour vous fournir la meilleure exnérience de navigation possible. En continuant sur ce site, vous accepiez lutilisation des cook' ACCEPTE -ntps:maww piorre-graud.comJavascriot-apprendre-coder-cours/concatonationsi sa1072020 ya Portée des variables et valeurs de retour des fonctions en JavaSeript 19, Fonetions anonymes, auto- Javascript LORIENTE ogver EN JAVASCRIPT 20. Introduction & Torienté objet en Javaseript 2.Création dun objet JavaScript ral et manipulation de 22.Définition et création dun constructeur objets en Javascript 25. Constructeur Object, prototype et héritage en Javaseript 24, Les classes en JavaScript VALEURS PRIMITIVES ET OBUETS CLOBAUX JAVASCRIPT 25, Valeurs primitives et objets prédéfinis en Javascript 26. Lobjet global JavaScript String, propriétés ot méthodes Z7.Lobjet_ global ‘avaseript Number. site utilise o cook! La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud Let x= 28 + 15 //Le signe “#7 est Set un opérateur arithnésique let y = ‘Bonjour’ let 2 =x +" ans"; //Le signe “#* est Lek un opérater de coneaténation /-Code connenté pour éviter ‘apparition intenpestive de la boite d'alerte alert(y +", Je #\*appelle Pierre, j\'ai * + 2)3 ” Ici, le + utilisé dans la valeur de let x est un opérateur arithmétique qui sert & additionner car les deux opérandes (les deux éléments situés 4 gauche et a droite de l'opérateur) sont des nombres. Dans let z, en revanche, le signe + est utilisé pour concaténer, c’est-a-dire pour mettre bout a bout la valeur de let x, c'est-a-dire 29 et le mot « ans ». La variable let zstocke ainsi « 29 ans ». #1 PMP® Exam Sim Get Access To 1800 Realistic Test Questions & Feel 100% Ready To Take Your Exam! OSP International Finalement, on utilise des signes » au sein de notre instruction alert pour pouvoir afficher cété & céte le contenu de nos variables et du texte Pour étre tout & fait précis, vous pouvez retenir que lorsau‘on utilise le signe +, le JavaScript va considérer tout ce qui se situe aprés une chaine de caractéres comme des chaines de caractéres. Ainsi, si on écrit ‘un' + 2+ 4, le JavaScript concaténera en ‘un2«' tandis que si on écrit 2+ 4+ un) la valeur finale sera ‘6un ies pour vous ‘ourni’ la meilleure exoérience de navigation possible. En continuant sur ce vous accepiez [utilisation des cookies 2601 -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart a9 sa1072020 28. Vobjet JavaScript Math, propriétés et méthodes: 29.les tableaux en JavaScript et Tobjet global Array 30.Les dates en JavaScript et Tobjet global Date MANIPULATION DU BOM EN JAVASCRIPT SL JavaScript API, Browser Object, Model et interface Window 32. Uinterface et Tobjet_ Navigator et bb géolocalisation en Javascript 3B Linterface et Tobjet History en Javascript 54, Uinterface et Tbjet Location en. JavaScript 35.Linterface et Tobjet Screen en JavaScript MANIPULATION DU DOM EN JAVASCRIPT 36, Présentation du DOM HTML et de ses APIS accessibles en JavaScript B7.Aceéder aux elements dans un document avec JavaScript et modifier leur contenu 38 Naviguer ou se La concaténaton tle itéraux de gabarts en JavaScript - Piere Giraud chaines de caractéres (nos textes) avec des apostrophes ou des guillemets droits. Il existe en fait une troisiéme maniére introduite récemment dientourer des chaines de caractéres en JavaScript qui va utiliser des accents graves * La grande différence entre [utilisation d'accents graves ou utilisation dapostrophes ou de guillemets est que toute expression placée entre les accents graves va étre interprétée en JavaScript. Pour le dire simplement : tout ce qui renvoie une valeur va étre remplacé par sa valeur. er eet ean ene ©) Beaufort Lig Cela signifie notamment qu'on va pouvoir placer du texte et des variables ensemble sans avoir besoin diutiliser dlopérateur de concaténation puisque les variables vont étre interprétées, c’est-&-dire remplacées par leur valeur. Pour que cela fonctionne bien, il va cependant falloir respecter une certaine syntaxe :il va falloir placer les expressions entre $( et ) Prenons immédiatement un exemple pour bien comprendre. Pour cela, je vais créer deux variables et ensuite utiliser une boite d'alerte pour afficher leur valeur et la somme des valeurs avec un texte. On va faire ¢a de deux facons différentes : en utilisant la concaténation d'abord puis en utilisant les littéraux de gabarits. Ce site utilise des cookies pour vous fournir la meilleure exoérience de navigation possible. En continuant sur ce site, vous accepiez lutilisation des cookies -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart ACCEPTER ‘aior020 La conalénation ot es ira cde gba on Java - Pee Giraud PEE TAS ox quantiicateurs des expressions : Sone Earn $6 Per Hr by Typing Javaserit Home based work Apply now, Worldwide Openings 48,créer des sous mmasques et des Bsertions dans Tes expressions cineina OPEN requires Savaseript Cela n'est pas nécessaire lorsqu‘on utilise les littéraux de gabarits : les retours & la 49.Les drapeaux, g aan . ligne et décalages sont conservés. C'est la raison pour laquelle les deuxigme et options ou marqueurs des troisiéme ligne de instruction alert{) sont décalées dans ce cas (indentation du expressions: code est conservée) réguiiéres Jovaseript Les littéraux de gabarits vont donc pouvoir s'avérer utiles lorsqu’on doit manipuler NOTIONS des chaines et des variables voire des fonctions. Pour des raisons de clarté, AVANCEES SUR cependant, je ne les utiliserai que trés peu dans la suite de ce cours (leur usage est, LES FONCTIONS Geng, 5 5 | Savascnibe généralement conseillé pour des développeurs relativement avancés) 50.Paramatres du Précfdent reste et opérateur de décomposition des fonctions davaSeript Sk.Les fonctions ‘iéchées JavaScript 52 Les closures en Javascript 53.Gestion du délai dexécution en JavaScript avec setTimeout) et setintervall) GESTION DES: ERREURS ET MODE STRICT EN JAVASCRIPT 54,Gestion des JavaScript Le mode strict en Javascript LASYNCHRONE EN JAVASCRIPT. site utilise des cookies pour vous fournir la meilleure exnérience de navigation possible. En continuant sur ce site, vous accepiez l'utilisation des cookies -ntpsuww piorre-graud.comJavascrit-apprendre-coder-coursiconcatenaton itteraux-gabart a9

You might also like