Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de JavaScript

Comprendre le lien entre JavaScript et CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez les principes de base qui unissent JavaScript au langage CSS. Apprenez à modifier les styles CSS de manière programmatique.

Transcription

Le JavaScript entretient, également, des relations privilégiées avec le CSS. Nous l'avons déjà constaté dans la vidéo précédente. Dans cette vidéo-ci, nous allons découvrir quelques spécificités de cette relation. Je suis, ici, sur une simple page HTML, le code HTML de cette page est très simple également et remarquez que j'ai, ici, un bloc « script ». Un bloc « script » dans lequel je fais déjà une première opération, je vais rechercher dans le DOM, un élément qui porte l'identifiant « unordered », c'est-à-dire cette balise « ul », ici, cette liste non-ordonnée et puis, je stocke cet élément dans une variable que j'appelle « myList ». Alors, je vais directement faire un « console.log », d'une propriété de cet objet « myList », donc je vais écrire « myList.» et la propriété qui m'intéresse, c'est la propriété « style », alors, quand je sauvegarde cette page, que je reviens dans mon navigateur et que je rafraîchis ma page, vous voyez, dans la console, qu'il y a un objet qui contient des tas de propriétés. Alors, si vous regardez ces propriétés de plus près, vous allez reconnaître probablement plein de choses, ici. Il s'agit de toutes les propriétés possibles en CSS. Vous retrouvez, par exemple, « border », que vous connaissez probablement, vous retrouvez, plus bas, « color », la propriété « color » du CSS, donc c'est la propriété qui me permet de changer la couleur du texte, vous allez retrouver, également, plus bas, la propriété « display » que nous avons manipulée dans la vidéo précédente, « displayNone », « displayBlock ». Vous allez retrouver plein de choses et vous allez remarquer que certaines de ces propriétés ne sont pas orthographiées exactement de la même façon que dans le CSS. C'est le cas, par exemple, de la propriété « fontFamily », qui est ici. Dans le CSS, on écrit « font-Family ». Et puis, ici, dans le JavaScript, on écrit « fontFamily » en un mot, avec un F majuscule. Alors, maintenant que l'on sait tout cela, on va revenir dans le code, et nous allons manipuler cet objet. Donc, je vais faire « myList.style », pour accéder au style CSS de cet élément, et puis, dans cet objet « style », j'ai envie d'accéder à la propriété « color », par exemple, pour changer la couleur du texte, et je vais rendre cette propriété égale à « red », alors, on va voir si cela fonctionne et si le texte de ma liste non-ordonnée est bien en rouge. Je vais revenir dans mon navigateur, rafraîchir ma page. Eh bien oui ! Cela marche ! Vous voyez que le texte, ici, et les trois éléments de la liste non-ordonnée sont bel et bien en rouge. Je reviens dans mon code pour vous parler un petit peu de la valeur, ici, la valeur « red ». Tout ce qui est permis en CSS est également permis, ici, en JavaScript. Donc, « red » est une des façons, en CSS, d'exprimer le rouge, une autre façon, c'est la notation hexadécimale : « FF0000 », par exemple, si c'est permis en CSS, c'est permis également en JavaScript, la preuve, si je rafraîchis, ça marche toujours tout aussi bien qu'avant. Puis, encore une autre notation possible en CSS, qui est donc, évidemment, permise également en JavaScript, c'est la notation RGB, ou je peux exprimer le rouge en notant 255,0,0. Remarquez que dans Brackets, quand vous passez la souris sur un tel code, eh bien Brackets vous donne la couleur à laquelle ce code fait référence. C'est très pratique. Si je sauvegarde et que je reviens dans mon navigateur, que je rafraîchis encore, pour contrôler, vous voyez que cela marche toujours, mon texte est toujours en rouge, donc toutes les valeurs possibles en CSS sont également permises, ici, en JavaScript. On va changer maintenant de propriété. Plutôt que d'utiliser « color », je vais utiliser, par exemple « background-color ». Voilà comment j'écris « background-color » en CSS : « background-color ». C'est comme ça que l'on fait, en CSS. Si vous regardez bien dans le code, vous voyez que « color » n'a pas la même couleur, justement, que « background ». Et cela devrait déjà vous mettre la puce à l'oreille. Je sauvegarde, je reviens dans mon navigateur, je rafraîchis, et, bien sûr, cela ne marche pas. Je n'ai plus de rouge dans ma page, par contre, j'ai du rouge dans ma console, puisque j'ai une erreur, maintenant : « Invalid left-hand side in assignment ». Alors, qu'est-ce que cela veut dire ? Je vais revenir dans mon code, et rappelez-vous que ce tiret, en JavaScript, ce n'est pas un tiret. Il a une signification particulière, il s'agit de l'opérateur de soustraction, c'est un moins. Donc, le JavaScript, ici, essaie de faire « background » « moins » « color », et cela n'a aucun sens. Donc, il perd les pédales et m'envoie une erreur. Alors, comme ce tiret a une signification particulière en JavaScript, je ne peux pas l'utiliser. À la place, je vais mettre un C majuscule à « color », c'est-à-dire que je vais remplacer le tiret par une majuscule à chaque mot que le tiret du CSS était sensé séparer. Donc, je vais maintenant sauvegarder ceci, refaire l'expérience dans le navigateur, et là, vous voyez non seulement que je n'ai plus d'erreur, mais en plus que mon « background » est bien rouge. Et c'est le cas pour toutes les propriétés CSS qui utilisent un tiret. Prenons, par exemple, une autre propriété, mettons : « myList.style », pour accéder à l'objet « style » «.font-weight ». Alors, « font-weight » en CSS, ça s'écrit comme ceci, avec un tiret, et en JavaScript, je ne peux pas utiliser le tiret, et, à la place, je vais mettre un W majuscule. Pour le reste, cela ne change pas, la valeur de « fontWeight » est tout à fait la même que celle que j'utilise en CSS, je vais mettre « bold », et quand je sauvegarde et que je reviens dans ma page web, je rafraîchis, voyez que le texte est bien mis en gras. Dernière petite chose, au niveau du CSS, quand vous mettez : « fontWeight:bold », eh bien vous avez l'habitude de mettre un « ; » ici, à côté du « bold ». Eh bien, ici, en JavaScript, ce « ; » n'est pas obligatoire. En fait, vous avez un « ; », mais il se met en dehors des guillemets, et c'est le « ; » du JavaScript qui marque la fin d'une instruction JavaScript. Le « ; » du CSS, que l'on trouverait ici, dans la feuille de style CSS, juste après le D de « bold », eh bien, celui-là, vous pouvez l’omettre, ici, dans le JavaScript. Donc voilà quelques unes des spécificités de cette relation étroite entre le JavaScript et le CSS, vous avez vu que toutes les propriétés du CSS, sont accessibles en JavaScript, mais que certaines d'entre elles sont orthographiées un petit peu différemment, et vous avez vu, aussi, au niveau des valeurs, que toutes les valeurs possibles en CSS, sont également possibles, ici, dans le JavaScript.

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
Date de parution :26 avr. 2016

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 !