L'essentiel de JavaScript

Travailler avec les nœœuds et les éléments

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Utilisez la console de Chrome pour inspecter les nœœuds et les éléments du DOM sur une vraie page web.

Transcription

Les derniers types de données à étudier sont les chaînes de caractères, ou strings, en anglais. J'ai à l'écran une chaîne de caractères, stockée dans la variable phrase. J'exécute un consol.log Je retrouve donc la phrase dans la console. Remarquez que j'ai utilisé les doubles guillemets pour délimiter ma chaîne de caractères. Le JavaScript permet aussi l'utilisation des simples guillemets pour délimiter une chaîne de caractères. Après l'avoir rafraîchie, ma page reste inchangée. Mettre des simples ou doubles guillemets n'a pas d'importance. Pourquoi le JavaScript me donne le choix ? Imaginez la situation suivante. C'est une simple phrase. Dans ce cas, l'apostrophe est considérée comme un simple guillemet qui ferme la chaîne ouverte juste avant le C. Je ne veux pas du tout ça! Le JavasScript me permet heureusement l'utilisation des doubles guillemets. Grâce à eux, je peux faire comprendre au JavaScript qu'il s'agit d'un C', et non un caractère qui délimite une fin de chaîne. Comme nous le voyons dans la console, JavaScript a compris ce qu'il en est. Parfois, cela n'est pas suffisant. Imaginez la situation suivante: Il a dit : "C'est une simple phrase". Dans ce cas, le double guillemet devant le C est compris par Javascript comme la fin de la chaîne de caractères. L'apastrophe du C est comprise comme le début d'une chaîne suivante. Ce n'est évidemment pas ça que je veux dire ici! Je dois faire comprendre au Javascript que le double guillemet devant le C est un caractère normal, sans signification en JavaScript. A ce but, je vais devoir l'échapper, grâce au caractère d'échappement. Ce caractère est la "\", appelée backslash ou barre oblique inverse. En Javascript, le caractère suivant le backslash perd toute signification spéciale qu'il aurait dans le JavaScript. Il redevient un caractère tout à fait classique. Je réalise la même opération pour le second guillemet. J'écris un backslash devant pour l'échapper. Et nous avons: Il a dit : C'est une simple phrase. Voilà comment je peux faire comprendre au JavaScript que la phrase de ma variable contient des simples et doubles guillemets, qui n'ont aucune signification particulière pour le JavaScript. C'est grâce à ce caractère d'échappement. Je reviens à une phrase plus simple. Me voici de retour à ma situation de départ pour vous montrer qu'une chaîne de caractères est un objet en JavaScript. Comme tous les objets du monde, il a des propriétés et des méthodes. Une propriété très intéressante est .length Vous anticipez probablement ce que cela va donner : un nombre dans la console et dans ce cas-ci, 18. Il s'agit de la longueur de la chaîne, soit le nombre de caractères, espace et point compris, évidemment. Parlons des méthodes et fonctionnalités de la chaîne. En écrivant le phrase. entre les parenthèses apparaît la liste de toutes les fonctionnalités associées aux chaînes. L'une des méthodes est toUpperCase Elle est facile à comprendre. Comme c'est une méthode, j'ai besoin des parenthèses. toUpperCase met ma chaîne de caractères en majuscule. Vous devinez sans doute que je peux faire l'inverse avec toLowerCase qui permet de mettre la chaîne en minuscule. Le u devient minuscule alors que la chaîne originale avait un U majuscule. Voilà deux premières méthodes de l'objet string. Je vais vous en montrer une troisième. C'est la méthode split qui sépare ma chaîne en morceaux plus petits. Avec split, je précise le caractère que je veux utiliser comme caractère pour séparer la chaîne. Je tape un espace entre guillemets. A chaque espace dans la chaîne, split sépare la chaîne de caractères. Cela donne une raie avec trois éléments : "une", "simple", "phrase". A chaque fois que je rencontre un espace dans la phrase originale, j'obtiens un nouvel élément de ma raie. A quoi cela peut-il servir? Imaginez la chaîne de caractère que je copie-colle ici La chaîne s'appelle path et représente le chemin d'accès vers un fichier. Si j'écris path.split et que j'utilise la barre oblique comme caractère plutôt que l'espace, j'obtiens une raie des éléments séparés de mon chemin d'accès vers mon fichier. de ma raie, c'est bien plus utile sous cet angle. Je peux comparer différentes chaînes de caractères. Je crée ici deux variables. Une variable a, égale à "Bonjour" avec une majuscule et une deuxième variable b, égale à "bonjour" en minuscules. Je crée ensuite un "if" et lui demande de vérifier si la variable a est égale à la variable b. Si c'est égal, j'utilise console.log pour dire: c'est égal. Après sauvegarde, rien n'apparaît dans la console. On pouvait s'y attendre. Comme nous avons "Bonjour" et "bonjour" les chaînes de caractères ne sont pas égales. La comparaison des chaînes est sensible à la casse. Pour la rendre insensible à la casse, vous pouvez utiliser les méthodes toUpperCase ou toLowerCase, comme ceci. vous obtenez la même casse, les deux chaînes sont alors égales. La comparaison ne tient plus compte des majuscules et minuscules puisqu'avant de comparer, nous mettons tout en majuscule. Je peux aussi vérifier si des chaînes sont plus grandes les unes que les autres. Voyons voir comment cela fonctionne. Je crée deux chaînes de caractères, que j'appelle Anguille et Saumon. J'utilise if pour savoir si la variable a est supérieure à la variable b. Si oui, j'écris c'est supérieur et dans le cas inverse, j'utilise else et console.log et écris c'est inférieur. Comme cela. Je sauvegarde et rafraîchis ma page. Il apparaît que c'est inférieur. En effet, je tiens compte de l'ordre alphabétique. le "A" de Anguille vient avant le "S" de Saumon. C'est donc bien Saumon qui vient après et est supérieur. et Anguille qui est inférieure. Par contre, si j'écris anguille avec un "a" minuscule, elle devient supérieure puisque ce type de comparaison considère que les majuscules viennent avant les minuscules. Le "S" majuscule de Saumon vient avant le "a" d'anguille. L'anguille vient donc plus tard que Saumon dans l'ordre alphabétique. anguille est donc supérieure à Saumon. Voilà quelques caractéristiques des strings en JavaScript. Nous sommes loin d'avoir épuiser le sujet. Je vous invite à consulter une référence JavaScript en ligne. Je vous recommande w.3schools.com La référence a l'inconvénient d'être en anglais mais a l'avantage d'être complète, bien mise à jour et facile à lire. J'ai ici l'objet String. En allant voir, vous trouverez toutes les propriétés et les méthodes de l'objet String. En cliquant sur une méthode, comme split, vous obtenez une explication complémentaire sur la méthode, avec la possibilité de faire des essais directement dans le navigateur. Vous avez sur le côté d'autres références pour différents objets comme ici, les nombres dont je peux aller voir les différentes propriétés et méthodes. On retrouve par exemple isNan dont nous avons déjà parlé plus tôt. Vous avez les objets dates, l'objet Math avec ses différentes méthodes. Voici une référence que je vous conseille et que j'utilise quand j'ai besoin d'explications sur le JavaScript. Et oui, on a tous besoin d'explication quelque soit notre niveau d'expérience. www.3schools est une référence complète, utile, et agréable à utiliser. Vous pouvez bien sûr utiliser une autre référence, si vous le désirez.

L'essentiel de JavaScript

​Ajoutez des fonctionnalités interactives à vos pages web avec JavaScript. Découvrez la syntaxe, le DOM, l'utilisation des bibliothèques JavaScript populaires, etc.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 avr. 2016
Durée :5h09 (47 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !