Transcription
1. Introduction du cours: Salut, voilà.
Bienvenue sur les partitions JavaScript pour Absolute Bgners Et je suis ravi de vous
guider dans
le
monde de JavaScript, qui est l'un des langages de
programmation les plus essentiels et les plus populaires en
matière de développement
Web. Maintenant, en parlant de JavaScript,
JavaScript est partout. Il alimente les sites Web dynamiques, les applications
interactives
et même le backend actuel Que vous débutiez dans le domaine de la programmation ou que vous cherchiez à
améliorer vos compétences, ce cours est conçu pour offrir une expérience d'
apprentissage
pratique et conviviale qui vous aidera à maîtriser Javascript
de fond Qui suis-je ? Je suis un entrepreneur chevronné
et
un éducateur prêt à partager avec vous
les connaissances que j'
ai acquises au cours de toutes
mes carrières Commençons donc par
parler de ce que nous allons couvrir. Nous aborderons donc d'abord les bases
de JavaScript, où nous comprendrons
ce qu'est Jascript, où il est utilisé,
comment pouvez-vous l'utiliser configurer
l'environnement et tout le Ensuite, nous découvrirons les
principes fondamentaux de JavaScript, où nous
parlerons de variables, d'
opérateurs, d'expressions, de tableaux, d'
objets et de tout C'est donc ici que nous allons en apprendre davantage sur les
éléments constitutifs de JavaScript. Ensuite, nous réaliserons des
projets pratiques dans le cadre desquels nous renforcerons
tous les apprentissages que nous avons acquis jusqu'à présent et nous élaborerons
quelques projets pour comprendre comment les choses
fonctionnent lorsque vous passez d'apprentissage à
un environnement basé sur des projets À la fin de ce
cours, vous disposerez d'une base solide en JavaScript,
ce qui vous permettra
de créer
en toute confiance des applications Web et des pages
Web
interactives et de poursuivre
votre parcours de codage Désormais, ce cours est parfait
pour les développeurs de tous niveaux. Donc, que vous soyez un débutant, qui cherche simplement à
explorer JavaScript et à l'apprendre manière très structurée
étape par étape, que vous soyez également un
développeur de niveau intermédiaire ou avancé qui souhaite
se rafraîchir certains des concepts
de base
de JavaScript , vous pouvez suivre ce
cours car nous
n' utilisons pas beaucoup de diapositives
dans ce cours. J'adore enseigner
sur l'ID lui-même, et je crois que les
ingénieurs logiciels adorent travailler sur des IDE et faire
ce qu'ils apprennent. Alors, êtes-vous prêt à
faire vos premiers pas dans le monde de
JavaScript ? Je suis. Plongons dans le vif du sujet et
commençons à coder ensemble, et je vous
verrai suivre le cours.
2. JavaScript en action: Alors maintenant, ce que nous
allons faire, c'est voir
JavaScript en action. Je vous recommande donc d'ouvrir le navigateur
de votre choix. Je suis ici sur Google Chrome. Vous pouvez même utiliser
Firefox si vous le souhaitez. Il suffit de cliquer avec le bouton droit de la souris et de se
rendre sur place pour inspecter Et ici, vous aurez la
possibilité d'ouvrir la console. OK ? Vous pouvez le redimensionner
comme vous le souhaitez Maintenant, cette console est
la console du navigateur, qui est intégrée, et c'est
ici que nous pouvons exécuter nos instructions
JavaScript. Donc, bien sûr, la première
instruction que nous allons
exécuter ici
est le journal des points de la console. Vous pouvez voir la suggestion automatique, et je vais vous
dire bonjour à tout le monde. OK. Quelque chose comme ça. OK, je vais mettre des W
caps et ici, je vais appuyer sur Endo. Vous pouvez voir que Hello World est imprimé
sur la console. OK ? Donc, si vous souhaitez imprimer
quelque chose sur la console, vous pouvez utiliser ce
journal de points de la console d'
instructions, qui fait partie de Ja Script. Nous pouvons même en imprimer
d'autres ici. Je peux donc dire Console point Log, et je peux dire que j'adore Jascript OK, quelque chose comme ça. Cela
me donnera donc cette sortie, que j'adore. OK. J'aurais dû le
fermer avec un seul code, et vous verrez le résultat. J'adore JavaScript, d'accord ? Je l'ai donc ouvert avec un code unique et j'ai essayé de
le fermer avec un double code. C'est pourquoi cette erreur, d'accord ? Mais le traitement fonctionne
parfaitement bien. J'adore Jar Script. OK ? Vous pouvez même utiliser cette console comme calculatrice. Vous pouvez donc dire deux plus quatre et vous verrez six
sorties ST 16 plus 16. Vous verrez une sortie 32 SE. Il peut donc être utilisé
comme calculatrice. Vous pouvez même
utiliser la console
pour afficher des boîtes d'alerte
ou des fenêtres contextuelles. Et vous devez avoir
vu de nombreuses boîtes
contextuelles d'alerte lorsque vous utilisez
ces applications Web. Alors laissez-moi vous montrer comment
vous pouvez le déclencher. Je vais d'abord effacer la console de
mon navigateur à l'aide de cette fonction d'effacement. OK ? Tout est effacé, ou vous pouvez même cliquer avec le bouton droit de la souris
et dire « Effacer la console ». D'accord, ça devrait
aussi faire l'affaire. Maintenant, je vais
apporter une boîte d'alerte. Je peux donc dire « alerte » ici. OK. Et je peux dire que
c'est une boîte d'alerte. OK. Maintenant, je dois le fermer
et si j'appuie sur Entrée, vous verrez qu'il s'agit d'une boîte d'alerte. Maintenant, quel que soit le message que vous tapez ou le message que
vous ajoutez ici. Il s'agit d'une nouvelle boîte d'alerte. Laisse-moi voir. OK, laisse-moi
créer de nouveaux embouts. OK. Vous le verrez entrer sous forme de. Ici, dans le Pop. Donc,
quel que soit le message que
vous
transmettez ici, il arrive ici. Donc oui, c'est ainsi que vous pouvez exécuter du code Jascript
dans votre navigateur Web, et voici certaines
des
instructions Jascript que nous avons
3. Obtenir les outils logiciels: Salut, tout le monde.
Donc, pour exécuter JavaScript, nous allons effectuer une configuration sur notre machine locale, n'est-ce pas ? Maintenant, bien sûr, vous pouvez exécuter JavaScript
en cliquant avec le bouton droit de la souris comme ceci dans le navigateur
, en vous dirigeant vers la console et en écrivant des traitements
JavaScript ici. Mais cela n'est pas idéal si
vous souhaitez écrire des scripts longs et volumineux pour des applications Web
destinées à la production. Maintenant, c'est là que vous avez besoin d'une installation sur
votre machine locale. Donc, ce que nous
allons
faire, c'est utiliser un IDE. Si vous ne connaissez
pas ce terme IDE, il signifie environnement de
développement intégré, qui vous donne l'ensemble des outils nécessaires pour écrire du code et l'exécuter. Je vais donc rechercher du code
Visual Studio
car c'est ce que nous allons
utiliser. Maintenant, si un code Visual Studio est
déjà installé sur votre système, ou si vous savez comment l'
installer, c'est très bien. Mais je suppose que vous
ne l'avez pas installé
sur votre système au profit des étudiants qui ne sont pas au courant
de ce processus. Je vais donc me rendre sur ce site Web en particulier,
code.visualstudio.com OK ? Un peu de zoom. Maintenant, la capture d'écran
que vous voyez montre à
quoi ressemble le code de Visual Studio, d'accord ? Et vous pouvez voir qu'il y a un surlignage syntaxique
que vous pouvez voir. L'interface est donc surlignée
dans une couleur différente. Les accessoires des boutons sont surlignés
dans une couleur différente. Voici donc tous les
avantages de l'IDE, d'accord ? Vous pouvez voir la belle structure de dossiers
sur le côté gauche. Il y a un terminal ci-dessous avec tout le
code couleur et tout ça. Il offre de nombreux
avantages au développeur. Donc, si vous faites défiler la page vers le bas, vous pouvez voir les supports de code de Visual Studio. Au moment où j'enregistre cette vidéo, elle prend en charge de nombreux langages de
programmation, d'accord ? Vous pouvez même ajouter des extensions.
Maintenant, que sont les extensions ? Les extensions
étendent ou étendent essentiellement les capacités du code
Visual Studio par défaut. OK ? Donc, si vous souhaitez ajouter un support pour Python, d'accord ? Donc plus de support pour Python. Vous pouvez donc ajouter cette extension. Si vous souhaitez ajouter un support pour GeucPiloto, vous souhaitez
utiliser l'IA lors de la programmation, vous pouvez ajouter Get up
Copilot Vous pouvez voir qu'il existe des
tonnes d'extensions, et qu'il existe un
marché d'extensions sur lequel vous pouvez télécharger et installer tout
cela, et c'est gratuit. Vous pouvez voir Git up
Copilot, un peu. Tout cela met donc en évidence
différentes fonctionnalités. Vous pouvez personnaliser les
thèmes de couleurs, les paramètres et les profils. Il y a beaucoup de choses, d'accord ? Il a une très bonne intégration avec le
système de contrôle des mouvements et tout ça OK ? Vous pouvez donc consulter ce site Web et parcourir ce
qu'il a à offrir. Mais si vous faites défiler l'écran vers le haut, vous
verrez
ici ce bouton de téléchargement pour Windows, d'accord ? Maintenant, si vous êtes sur Mac ou Linux, vous allez voir
l'option de téléchargement correspondant
à votre système
d'exploitation approprié. Ou si vous ne le voyez pas
pour une raison ou une autre, vous pouvez accéder à d'autres
plateformes et vous pouvez voir quelles sont toutes les plateformes
prises en charge ici. OK ? J'ai donc déjà installé le code Visual Studio sur mon système, donc je ne vais pas l'installer, mais l'installation est
très simple. C'est comme n'importe quelle application que
vous installez sur le système. Il n'y a pas de
configuration complexe même
pour Mac, c'est plus facile, et vous pouvez le voir
ici, il existe plusieurs versions, par exemple si
vous utilisez
une puce Intel,
vous pouvez installer celle-ci vous utilisez
une puce Intel, . Apple Silicon, tu as
celui-ci ici. Et aussi pour les systèmes
basés sur Linux Ubuntu ici, vous avez la possibilité de
télécharger et d'installer. OK ? Maintenant, je l' ai définitivement installé
sur mon système, d'accord ? Alors voilà, je l'ai
installé comme vous pouvez le voir. OK ? Donc, si vous l'installez et que vous
l'ouvrez pour la première fois, voici
ce que vous
allez voir. C'est ainsi qu'il va vous
mettre en valeur. Votre point de vue peut être légèrement
différent car je suis déjà un utilisateur de
Visual Studio Code Je vois
donc les
projets récents que j'ai utilisés. Donc je vais juste fermer ça, d'accord ? Et voilà qu'il
me demande : « Hé, tu n'as encore ouvert
aucun dossier. Oui, vous pouvez ouvrir des dossiers
ici dans la barre latérale gauche, et cela
vous montrera l'arborescence. Vous pouvez créer des fichiers et
les gérer à partir d'ici même, ou vous pouvez même
cloner un dépôt. Et comme je l'ai dit, il s'
intègre très bien aux systèmes de
contrôle Git of Ocean. Vous pouvez donc également
en faire usage. D'accord ? Maintenant, ce que je vous
demanderais à tous de faire, c'est de vous rendre dans
votre structure et de créer un dossier, lorsque vous allez
pratiquer Jascript OK ? C'est donc mon
dossier dans lequel je vais m' entraîner
à Ja Script, d'accord ? Et ouvrez simplement ce dossier ici dans le code Visual Studio. Ouvrez le dossier, vous pouvez
dire « ouvrir un dossier » et vous pouvez accéder au dossier que
vous venez de créer. Ou bien, si
vous êtes sous Windows, vous avez le choix.
Vous pouvez cliquer avec le bouton droit de la souris. Vous pouvez dire Afficher plus d'options, et vous pouvez dire ouvrir avec le code
Visual Studio ici. Ouvrez avec le code ici.
Voilà ce que c'est. Il s'agit donc de Visual Studio, qui n'est pas
du code Visual Studio, c'est différent. Vous devez donc jeter un œil à
ce logo. OK ? Celui-ci. OK ? Et si vous dites « ouvert », vous verrez le dossier s'
ouvrir ici. OK. Maximisez-le. OK ? Tu peux voir. Maintenant, j'ai deux instances ou deux fenêtres ou du code Visual Studio ici. OK ? Il s'agit du dossier que j'ai créé et qui
s'appelle JavaScript. Et c'est ici que je vais
créer tous mes fichiers
liés au script Ja et tout ce que je vais apprendre. Donc c'est à peu près tout. J'espère que
vous avez également réussi à effectuer
cette configuration
sur votre système.
4. Notre premier programme JavaScript: Il est donc temps de commencer à écrire du code en JAScript J'espère donc que dans Visual Studio code open, vous avez pu ouvrir ce dossier
de votre choix, accord, où vous voulez
écrire les programmes Ja Script. J'ai donc ouvert ce dossier, et à côté de ce nom de dossier, vous verrez cette icône
appelée Nouveau fichier. Le premier fichier que nous
allons créer sera un fichier HTML. D'accord ? Je vais donc appeler
cela index point HTML. Maintenant, pourquoi est-ce que je crée
un fichier HTML ? C'est parce que nous
allons utiliser HTML pour charger Ja Script et l'
exécuter dans le navigateur. Oui, nous allons
exécuter Ja Script dans le navigateur et voir
le résultat. OK. Vous pouvez donc voir ici
ce point d'index HTML et noter qu'ici,
dans le code de Visual Studio, vous voyez également cette balise
apa, cette icône de balise, qui représente le type de
fichier que vous créez. D'accord ? Maintenant, ce fichier est créé. Ce que je vais faire, c'est dire exclamation. D'accord ? Donc, au moment où
vous dites exclamation, code
Visual Studio
supporte bien le HTML, n'est-ce pas ? Je le vois
constamment. Cela va donc nous
aider à générer un
code standard, et pour cela, vous devez appuyer sur Exclamation
et appuyer sur Entrée et Vous verrez donc du
code standard être généré. Tu peux le voir, d'accord. Je vais donc simplement le réduire en
cliquant sur cette icône. Et ici, vous pouvez le personnaliser. Je vais donc appeler
ce
titre Jascript Course, quelque chose comme ça Et ici, je peux
écrire du code. Maintenant, ce fichier n'est pas enregistré. Comment le sais-tu ?
Vous pouvez donc voir ce point apparaître ici. Si vous avez terminé, une
croix apparaîtra, mais vous pouvez voir ce point blanc apparaître à côté de la voie du fichier. Cela signifie que le
fichier n'est pas enregistré, assurez-vous d'enregistrer les modifications
que vous apportez
dans le code de Visual Studio. Si vous voyez cette icône, cela
signifie qu'elle n'est pas enregistrée et que vous ne verrez pas les modifications que
vous avez apportées au fichier.
Vous continuerez à l' actualiser et voir pourquoi vous n'
obtenez pas le résultat souhaité. Mais en réalité, vous n'avez pas
enregistré le code. D'accord ? Cela se produit
donc plusieurs fois, donc vous devez simplement dire Control et vous verrez que
je peux m'en aller. Pour l'
instant, ce que je
ferais, c'est dans le corps, je vais ajouter H un, d'accord ? Et je vais dire JavaScript. Bien sûr, par ici. OK. Je vais également
ajouter le journal de la console ici. D'accord ? Désormais, le journal de la console est
un traitement JavaScript. Alors, comment est-ce que je vais m'y prendre ? Je ne peux donc pas l'écrire
dans une balise HTML, d'accord ? Donc pour cela, je vais
devoir utiliser une balise spéciale
appelée balise script. D'accord ? Donc ici, après
le corps, je vais dire script. OK. Et ici, je
dirais console point log. Et ici, je vais dire bonjour à tout
le monde, quelque chose comme ça. D'accord ? C'est donc Ja Script, et je l'ai enregistré. Donc, en gros, la façon dont vous
écrivez du JavaScript HTML se fait à l'aide
de balises de script, n'est-ce pas ? Maintenant, ce que nous devons faire, c'est
voir le résultat, si nous sommes capables
de l'exécuter correctement. Je vais donc faire un
clic droit ici et je vais dire Révéler
dans l'explorateur de fichiers. OK, cela va
ouvrir l'explorateur de fichiers. Sur Mac, vous verrez
Reveal dans le Finder. Cela ouvre donc l'explorateur de fichiers. Vous pouvez voir ce
point d'index HTML créé. Ce que vous pouvez faire, c'est l'
ouvrir dans le navigateur. Assurez-vous donc d'avoir un navigateur, votre navigateur préféré ou navigateur préféré
de votre choix, ouvert ici, et
le dossier s'ouvre également. Et ce que vous pouvez faire, c'est que vous
pouvez glisser-déposer
ce fichier ici dans le
navigateur. OK. Donc, ce que cela va faire, c'est ouvrir
ce fichier ici. Vous pouvez voir qu'il s'agit
d'un chemin du fichier et vous pouvez voir le
cours Ja Script affiché ici. Maintenant, pourquoi vient-il ici ? C'est parce que vous l'avez ajouté
dans le headrotax. Vous pouvez
cliquer avec le bouton droit, dire inspecter, et vous pouvez accéder à
la console et vous
verrez Hello world en haut, n'est-ce pas ? Voici donc le journal de la console que nous avons montré ici, d'accord ? Je vais juste minimiser
cela ici, et ce que je ferais, c'est avoir
cette vue côte à côte, d'
accord, que je préfère chaque fois que je code ou que je fais du développement
Web, d'accord ? est donc cette vue côte à côte que je vais utiliser, et vous aurez également
une bonne idée résultat que vous obtenez modifications que nous
apportons et pourquoi
voyez-vous ce résultat ? OK. Ainsi, quelle que soit la
modification que vous apportez, si vous ajoutez quelques exclamations
supplémentaires, si vous cliquez sur Enregistrer et si
vous actualisez ici, vous verrez le résultat
se refléter D'accord ? Mais veillez
à enregistrer le fichier. D'accord ? Cela ne devrait pas être comme si
vous ne l'aviez pas enregistré et que vous ne voyiez pas le résultat, vous continuerez simplement à l'
actualiser et vous vous demanderez pourquoi je ne reçois pas le résultat ? D'accord ? Assurez-vous également
d'utiliser la syntaxe exacte que j'
écris ici. Vous pouvez voir la console.
Tout est petit. Log aussi, tout est petit. Si vous essayez d'écrire
en majuscules ici, si je l'enregistre et
si vous actualisez,
vous verrez que ce n'est pas défini. Cela n'est pas défini. Ça ne marchera pas. Cela vous indique également où se trouve
l'erreur, d'accord ? Je vais donc également
vous montrer comment vous pouvez lire
les erreurs ici. Vous pouvez voir une erreur de référence, la console n'est pas définie
et l'erreur se situe sur 12. D'accord ? Donc c'est la ligne
numéro 12, ici, non ? Et c'est la cinquième position c'est ce que cela
vous indique. La cinquième position. Si je change cela en petit C, et si je dis rafraîchissement, cela devrait me montrer le résultat OK. Nous ajoutons également un
point-virgule à la fin, car cela marque la fin de l'instruction de script
Ja. C'est bon. Donc oui, c'est votre premier programme
Jascript que vous avez écrit et vous l'avez chargé à
l'aide du HTML J'espère donc que cela vous a été utile.
5. Structure d'un fichier JavaScript: Permettez-moi donc de vous parler un peu plus
de Ja Script ici. Donc, si vous
regardez ce fichier en particulier, il s'
agit d'un fichier TREML contenant le script
Ja, n'est-ce pas ? Maintenant, ces éléments
sont connus
sous le nom de balises et pour JavaScript, c'est
ce qu'on appelle une déclaration. Jascript ne possède pas
ce que l'on appelle des balises. Les balises sont présentes en HTML, mais Jascript contient ce que l'on appelle des instructions, et Statement
n'est qu'une seule ligne de code qui peut être exécutée Maintenant, vous remarquerez également que code
Jascript est écrit
dans la balise script Nous l'avons ajouté à
la fin du fichier. Maintenant, je voudrais souligner
une chose ici. Vous pouvez vous en débarrasser à partir d'ici et vous pouvez également l'ajouter en haut dans
la tête. C'est également
possible si vous l'enregistrez et si vous l'exécutez
ici. OK. Si vous le voyez fonctionner, vous verrez que le résultat est le même. OK ? Si j'essaie d'apporter une
quelconque modification, d'accord, comme ça et si je
rafraîchis, vous verrez le résultat
arriver comme ça. OK ? Il
n'y a donc aucun problème en tant que tel, mais c'est toujours une
bonne pratique d'
avoir cette balise de script à la fin, ce qui signifie que vous
devez charger Jascript à la fin une fois que tous les
éléments HTML ont été chargés Maintenant, il y a des raisons à cela. La raison numéro un est d'éviter
toute sorte d'erreur inconnue. Le script Ja, comme nous le savons, ajoute du comportement à nos pages Web, ce qui signifie qu'il fonctionne avec les éléments définis
sur la page HTML. Maintenant, il est possible
que le script Ja
essaie même de modifier les éléments
en fonction de l'état, n'est-ce pas ? Si vous cliquez sur un bouton, il peut vouloir afficher
des informations ou
faire quelque chose avec les éléments de la page. Maintenant, si vous ajoutez ce script dans l'en-tête, ici,
dans les balises d'en-tête. Le problème est que ce
script peut être exécuté avant
même que toutes les balises
du code HTML ne soient chargées. Il est donc possible
que Ja Script ne trouve pas les
balises qu'il souhaite, et ce par erreur. Cela peut donc entraîner une erreur, et c'est pourquoi il est
toujours recommandé de placer
la balise de script à
la fin du fichier HTML. Et la raison en est
assez claire :
toutes les balises HTML
ont été chargées. OK ? La seule raison. Une autre raison est d'
accélérer le site Web. Donc, si la balise script est ajoutée en
haut de la section d'en-tête, que se passerait-il s'
il y avait beaucoup de script, pour
le moment, nous n'avons qu'
une seule ligne de code, n'est-ce pas ? Donc c'est bon. Mais si un grand nombre de scripts
sont écrits, leur exécution ou leur chargement peuvent prendre
un certain temps. OK ? Et les éléments HTML
situés sous le script ou après la balise head ne se chargent qu'une fois le
script complètement chargé, ce qui peut ralentir le temps de
réponse de la page Web. Et ce n'est pas bon du point de vue de
l'expérience utilisateur, et c'est pourquoi il est toujours recommandé de
charger
le script Ja en fin de page afin d'éviter
ces problèmes. les programmes Ja Script peuvent également avoir Bien entendu, les programmes Ja Script peuvent également avoir
plusieurs instructions. Je peux ajouter une autre
ligne de code
ici et je peux dire « rafraîchir », et vous verrez le
résultat ici. C'est bon. Donc oui, c'est plus d'informations sur le programme Jascript
6. Améliorer votre environnement de développement: Voyons maintenant
comment
améliorer votre environnement de développement. accord ? Maintenant, ce qui
se passe actuellement, c'est que
nous avons
ce fichier HTML. Dans ce cadre, nous
chargeons Jascript et ce code Jascript
est disponible dans le navigateur Maintenant, ce que nous avons fait, c'est que
nous avons ouvert ce fichier HTML pour voir le résultat ici dans la console du
navigateur, n'est-ce pas ? Maintenant, il existe de meilleurs moyens. Maintenant, ce qui se passe, c'est si
vous apportez un quelconque changement ici. Par exemple, j'ajoute un
autre point complet ici. D'accord ? Si j'enregistre le fichier, cette modification ne sera pas
reflétée ici. Je dois faire une mise
à jour pour voir le changement, d'accord ? Si vous apportez constamment
des modifications et que vous les
testez constamment,
cela peut être un
peu fastidieux, et si vous travaillez
sur de grands projets, cela peut être irritant, vous savez choses peuvent donc être
beaucoup plus simples, et il existe de bons outils que vous pouvez
configurer dans code de
Visual Studio et qui peuvent vous faciliter la vie en tant que développeur
ou programmeur. Maintenant, laissez-moi vous
expliquer quelques étapes que vous pouvez suivre pour améliorer votre environnement de développement. Donc, dans la barre
latérale gauche, vous
verrez cette option
appelée extensions. Désormais, dans le code Visual Studio, vous pouvez ajouter ou
installer des extensions qui peuvent étendre les capacités
par défaut du code Visual Studio. D'accord ? J'ai donc déjà
beaucoup d'extensions installées. D'accord ? Je vais
parler de ceux que je recommande pour Ja Script HTML
ou le développement Web, d'accord ? Maintenant, vous pouvez voir ici
que j'ai cette extension pour les conteneurs de
développement, d'accord ? Je travaille donc beaucoup avec
Docker également. D'accord ? J'ai donc installé cette
extension, mais elle n'est pas nécessaire pour le développement
Web, d'accord ? Je vais donc juste parler de ceux qui
le sont. Donc, cette première
extension que vous
voyez est une
balise de renommage automatique ici D'accord ? Maintenant, si vous
voyez ce fichier TML, il se compose d'une balise, d'accord ? L'une est l'étiquette d'ouverture, l'
autre est la balise de fermeture. Donc, si vous souhaitez
renommer le tag. Donc disons que si c'est H un, je veux que ce soit H deux. Donc, si je fais H deux ici, vous pouvez voir que le
tag de fermeture a également été renommé automatiquement. Comment
est-ce géré ? Cela est géré en
raison de cette extension. Donc, si je le
désactive ici, d'accord ? Et si je viens ici, maintenant si je le renomme, laisse-moi juste le
réduire un peu Si je le renomme en
H un ici maintenant, cela fonctionne toujours, je crois que les modifications
n'ont pas été prises en compte. OK. Mais permettez-moi de renommer
ce H deux. OK. Maintenant, après avoir
redémarré les extensions, si vous voyez, si je le
renomme en H deux, cela
ne sera pas D'accord ? Donc, si vous travaillez
sur un gros fichier HTML, et disons que vous avez
renommé cette balise, vous
devez également renommer
la balise correspondante, sinon vous
allez obtenir une erreur Donc, si je l'actualise, d'accord. Aucune erreur n'
est générée, d'accord, mais le résultat n'est pas
ce que vous souhaiteriez. OK. Cela pourrait donc probablement
être indiqué dans H deux ou H un. D'accord ? Ce n'est donc pas
ce que vous souhaiteriez. Idéalement, une étiquette d'ouverture devrait également
avoir une étiquette de fermeture. C'est donc ce que cette balise de
renommage automatique vous aide. OK, j'ai réalisé que je n'avais
pas enregistré le fichier, donc je vais juste enregistrer le fichier
et le rafraîchir. OK. C'est donc ce que cette balise de renommage automatique vous
permet de faire Je l'ai donc installé ici pour
des raisons de commodité. OK, donc je l'ai activé en
ce moment, et si je le renomme en H
one, je l'enregistrerai simplement D'accord ? C'est ce à quoi ce tag autor
nim vous aide D'accord ? Il y a une description ici que vous
pouvez parcourir. D'accord ? Il s'agit donc d'une étiquette, d'une colorisation par paire de
crochets Alors, à quoi sert cette extension ? Donc, si vous travaillez
sur un gros fichier, d'accord, vous pourriez avoir
ces accolades pour séparer un
bloc de Maintenant, vous voudrez peut-être
voir le code couleur. Cela vous permet donc de vous donner le code couleur de la paire
d'ouverture et de fermeture. Vous pouvez le voir
ici dans l'icône elle-même. C'est donc
ce que cela fait. D'accord ? J'ai
d'autres extensions comme DV container, jango,
talker, certaines liées à Python, les blocs-notes
Jupiter, blocs-notes
Jupiter Ensuite, il y a cette
autre extension, appelée Live Server. Ceci est également installé
sur mon système. Vous pouvez donc rechercher
une extension ici. J'ai donc oublié de
mentionner toutes ces
extensions . S'il vous en manque
une, vous pouvez effectuer une recherche
ici sur le marché. Vous pouvez les sélectionner
et dire « installer ». C'est ça. C'est assez simple. D'accord ? Live Server est donc une
extension qui permet d'intégrer un serveur
petit ou léger à votre
environnement de développement. OK. Donc, en installant cette extension, vous obtenez ce truc ici. Vous pouvez le voir en bas, activez ce bouton. Si je le désactive et si je redémarre, ce
bouton disparaît. OK, si je l'active, vous verrez ce bouton ici. Donc,
si je dis « passer
en ligne », cela me donnera un serveur en direct. Vous pouvez voir le port 50 50. Cela m'a donc donné un serveur
léger sur 5500. Ce n'est pas 50 50. C'est 5500.
OK, c'est un port. Et si vous pouvez l'exécuter
sur votre machine locale, si vous essayez d'y accéder, le fichier que vous avez
sera exécuté sur le serveur local. Vous pouvez le voir. Cela
fonctionne maintenant sur le serveur local. Et maintenant, si j'essaie d'apporter des modifications
ici, d'accord ? Donc, si j'ajoute, disons,
deux ou quatre points d'interrogation. OK. Et je vais ouvrir
la console avant d'enregistrer le fichier afin que vous puissiez tous voir
ce qui se passe. OK, ça ne grossit
pas le tissu. Si je l'enregistre, vous verrez que juste après avoir
enregistré les modifications, vous les verrez
se refléter en direct. C'est donc très utile.
C'est vraiment pratique. Vous n'avez donc pas besoin d'appuyer encore et encore sur le bouton d'actualisation. Il se chargera de
vous montrer le résultat sans que vous
ayez à le rafraîchir. Il recharge donc automatiquement les
modifications que vous apportez. D'accord ?
Cette extension de serveur live est donc très utile, oui, je l'utilise tout le temps. Plus jolie. Il s'agit donc d'un format de code qui vous
aidera à formater votre code. C'est donc ce qu'il fait.
Je l'ai installé ici. Alors c'est tout. C'est tout pour le code HTML
et JAScript. Ce sont les extensions. J'ai beaucoup d'autres extensions
comme Tailwind, Python OK, donc je fais toutes
sortes de programmes. Vous trouverez donc de nombreuses extensions dans mon code
Visual Studio, et je continue de les supprimer, de les réinstaller ou d'
installer les nouvelles, d'en essayer de nouvelles, tout
ce que je fais. C'est bon. Donc oui, il s'agit des extensions qui peuvent vous
aider à améliorer votre
environnement de développement. Je
vous recommande donc de passer à un serveur live si
vous utilisez un fichier HTML pour voir
votre code Jascript car il peut vous aider à voir
vos modifications en temps réel
7. JS dans le même fichier ou dans un fichier séparé: Il est donc temps que
nous comprenions
comment écrire du JavaScript de
manière évolutive ? Maintenant, ce que je veux dire par méthode
évolutive, c'est que nous sommes en train
d'écrire du
JavaScript dans les balises du
script, n'est-ce pas ? Désormais, chaque fois que vous travaillez dans un scénario réel ou dans des applications de production
, vous n'aurez pas accès à
du JavaScript de deux lignes, n'est-ce pas ? Il se peut que les fichiers
soient très longs, car il y a
beaucoup de Javascript impliqué dans certains projets. Dans ce cas,
il n'est donc pas bon d'écrire votre
JavaScript de cette façon. Il est préférable de
séparer le code JavaScript du code HTML. C'est donc ce que je
vais vous montrer. Donc, ce que vous pouvez faire, c'est ce que nous allons faire ici,
c' créer un nouveau fichier Ja Script, et je vais l'appeler
point d'index Gs. Vous pouvez donc voir qu'au moment où
j'ai tapé le point JS, vous pouvez voir l'
icône du fichier ici Il s'agit d'un fichier JS et d'un fichier HTML. Il s'agit donc d'une représentation
par code Visual Studio qui vous
aide à identifier
le type de fichier. D'accord ? Donc, ce que je vais faire, c'est couper ces deux
lignes de code. Je vais le déplacer ici. OK. Et pour le moment, si je sauvegarde ceci, vous ne verrez aucune sortie. D'accord, parce qu'il n'y
a aucun script Ja écrit ici dans
le fichier eSTIML
ou qui écrit ici dans
le fichier eSTIML ne soit même pas lié ici Donc, si vous n'écrivez pas de
JavaScript dans le fichier eSTIML, vous pouvez le lier et l'
écrire dans un fichier externe, qui est le fichier E tot JS, qui signifie Ja script Donc, ce que je peux faire, c'est que je peux essentiellement prendre cela sur la même ligne et ajouter
ici un attribut. Il existe donc un attribut
appelé SRC pour la balise de script, qui vous permet de
spécifier le nom du fichier D'accord ? Je peux donc dire index, et vous pouvez voir la
suggestion automatique ici, point d'index Q. Il s'agit
donc d'une suggestion automatique
à partir du code Visual Studio. Et je peux dire « Save ». dès que vous dites Enregistrer,
vous pouvez voir ici, bonjour Old, et ça
vient de l'index JS Et vous pouvez réellement apporter
des modifications ici si vous le souhaitez et voir les modifications se
refléter ici. D'accord ? Donc oui, c'est à peu près tout. Maintenant, une chose
que je veux mentionner
ici concerne le serveur en direct. Donc, si vous souhaitez
fermer le serveur, vous devez cliquer
sur ce bouton. Cela va donc
détruire ce serveur. Et si vous l'actualisez
, alors d'accord, il ne se
rechargera tout simplement pas. Tu peux voir. Et si vous
voulez le remettre en ligne, vous pouvez le démarrer et
il l'ouvrira. Hein ? Donc, oui,
c'est ainsi que vous pouvez séparer le
code JS du code HTML.
8. Commentaires dans JavaScript: Parlons maintenant des biens communs. Que sont les biens communs ? Les commentaires sont donc comme des nœuds dans votre code Maintenant, il s'agit
d'un ensemble d'instructions qui ne
sont pas exécutées
et qui sont ignorées, et elles ne sont que
des références pour vous. Donc, si vous utilisez un
autre langage de programmation comme Java ou Python, il est probable que
vous connaissiez
ce concept de communs et que
vous sachiez ce qu'il est. Désormais, en JavaScript, deux types de commentaires sont
pris en charge. L'un est un commentaire d'une seule ligne et l'autre un
commentaire de plusieurs lignes. Je peux donc avoir deux barres
obliques ici et je peux dire qu' il
s'agit d'un
commentaire d'une seule ligne, quelque chose comme ça OK ? Maintenant, si je sauvegarde ceci, il n'y a littéralement aucun impact sur la sortie car cela n'
est jamais exécuté. Je peux même commenter
cette ligne de code. Et si je sauvegarde ceci, cette ligne
est commentée
et elle n'est pas exécutée. Donc oui, voici comment vous pouvez utiliser un commentaire sur
une seule ligne. Vous pouvez également venir ici dans le code
Visual Studio
sous Modifier ici. Vous verrez un commentaire sur la ligne à bascule. C'est donc un raccourci ici. Le raccourci pour moi est donc
Control plus forward slash. OK. Comme je suis sous Windows, je peux garder mon
curseur sur cette ligne, et je peux dire Ctrl
et barre oblique, et vous pouvez voir que je suis capable de
basculer entre les commentaires d'
une seule ligne OK, je peux même sélectionner l'intégralité de
ce bloc de code et je peux voir Control
et Forward Slash Maintenant, si vous êtes sur Mac ou Linux, ce raccourci peut être différent, mais je vous
montre simplement comment vous pouvez l'obtenir
vous-même. C'est bon. Il existe également ce
que l'on appelle bloquer les commentaires, comme vous
pouvez le voir ici. Maintenant, je vous ai dit qu'il s'agit commentaire d'
une seule ligne ou qu'il est
également connu sous le nom de commentaire de ligne. Maintenant, il existe ce qu'
on appelle un commentaire bloqué ou également un commentaire
multiligne. OK ? Vous pouvez donc commenter
plusieurs lignes de code de cette façon, en ayant ces deux barres
obliques sur chaque ligne Mais il y aurait des situations où vous voudriez
suivre cette voie. C'est à ce moment-là que vous pouvez
utiliser le commentaire multiligne. Donc, pour faire un commentaire sur plusieurs lignes, nous allons regarder la
capture d'écran ou, désolé, pas la capture d'écran, le raccourci Vous pouvez donc voir shift lt et A, ou vous pouvez même sélectionner
cette option ici. Vous pouvez donc voir que les deux
lignes de code que j' avais sélectionnées sont maintenant conformes
à cette syntaxe, qui est destinée aux commentaires multilignes, et elles ne seront pas exécutées Donc, si je sauvegarde ce
fichier, vous ne verrez littéralement aucune sortie
sur la console. OK ? Il s'agit donc d'un commentaire
multiligne OK, et je peux changer ça. Il y avait donc Control
Shift et E ici. Oups, j'ai fait une erreur. Qu'est-ce qu'un raccourci ?
C'était donc Shift Old et E. Je suis désolée. OK, donc je
peux sélectionner ceci et je peux dire de déplacer l'ancien
et le E sur mon système. Oups. OK, ça
ne marche pas pour moi. Passez de l'âge à un A. Je devrais travailler idéalement.
Mais oui, je ne sais pas. Le raccourci ne fonctionne pas
pour une raison quelconque. Laisse-moi essayer encore une fois, passer à l'
ancienne et A. OK, ça a marché. Je ne le faisais
probablement pas correctement
sur le clavier. OK ? Cela a fonctionné. Et je vais enregistrer ça pour que tu puisses
voir que les files d'attente sont bondées. OK ? Donc c'est
un commentaire d'une seule ligne, et si je
passe à une nouvelle ligne et si je vois quelque chose comme
ça ici, d'accord ? Il s'agit de commentaires multilignes. Je vais donc ajouter cette ligne ici. OK ? Il s'agit donc d'un commentaire sur
plusieurs lignes. OK. Maintenant, il existe une autre façon d'améliorer
la façon dont vous commentez, connue sous le nom de commentaires sur
les documents, d'accord ? Il est donc également appelé documentation
ou commentaires de document, et il se compose d'annotations. OK ? Maintenant, ce qui se passe normalement, c'est que vous aurez
beaucoup de code, comme des fonctions , des
classes, des objets
créés dans le code, et vous voudriez
avoir une description du type de paramètres
que
toute personne utilisant cette fonction particulière est
censée transmettre et pourquoi ces paramètres sont
nécessaires et tout ça. OK ? Donc, en gros, à
l'aide des commentaires du document, vous pouvez utiliser des annotations et spécifier toutes
ces informations Je vais donc simplement ajouter
un exemple simple de commentaires de discussion
ici, d'accord ? Donc ici, vous pouvez voir que nous
avons une fonction, d'accord ? Si vous n'êtes pas au courant de
ce concept de fonction ou méthode, ne vous inquiétez pas. Mais si vous venez d'un
autre langage de programmation, vous devez être conscient de
choses comme les fonctions, les
méthodes, etc., n'est-ce pas ? Je l'utilise donc simplement
pour montrer cet exemple. Maintenant, vous pouvez voir ici que
c'est faire un commentaire. C'est la syntaxe, d'accord ? Et vous pouvez voir ici que cette fonction ajoute
essentiellement deux nombres, et j'ai également spécifié
le paramètre. J'utilise donc at
the rate para
annotation ici. L'annotation commence par un débat publicitaire. OK ? C'est donc
ce qu'est l'annotation. Et je précise qu'il s'agit d'un nombre et que le nom est A, et que c'est le premier chiffre. Et encore une fois, je décrit
le deuxième paramètre ,
puis quel est le
type de retour de cette fonction. Maintenant, si vous passez la souris dessus, si
vous survolez cette fonction, vous verrez que cette documentation
est réellement affichée, comme vous pouvez le voir dans cette fenêtre contextuelle Ainsi, si vous essayez d'utiliser cette fonction dans
un autre fichier, vous pouvez voir ce que
vous avez écrit ou bien plus d'informations sur
cette fonction particulière. C'est ce que cela signifie, d'accord ? Maintenant, la question est la suivante : si
vous regardez la syntaxe, vous serez un
peu inquiet Vous allez dire : « Hé, je dois ajouter ces astérisques sur chaque
ligne. La réponse est donc non. C'est généré automatiquement pour vous. Donc, ce que vous pouvez faire, c'est avoir une barre oblique, et vous pouvez avoir deux
fois astérix ici. Donc, si vous ajoutez deux fois un astérix, l'IDE sait que
vous souhaitez ajouter les commentaires de style doc et vous pouvez réellement ajouter les éléments
dont vous avez besoin. OK ? Et vous
pouvez utiliser l'
annotation ici. Tu peux voir. OK ? Désormais, chaque fois que vous appuyez sur Entrée, un
nouvel astérisque est ajouté D'accord, vous n'avez donc pas à vous
soucier de l'ajouter à chaque ligne. OK. C'est donc la raison pour laquelle les gens utilisent l'identification. C'est
une autre raison. OK. Vous pouvez également faire tout
ce que nous faisons
dans le Bloc-notes, mais vous n'aurez pas accès à toutes ces fonctionnalités, vous savez, à
ces suggestions et à la génération
automatique d' astérisques. Tout cela n'
arrivera pas dans le bloc-notes, et c'est pourquoi les gens
utilisent des identifiants, d'accord Un autre cas d'utilisation de cette façon de documenter le code
aura donc lieu demain si vous souhaitez
générer une documentation EPA Supposons donc que vous ayez
écrit un EPI en JavaScript ou une
bibliothèque en JavaScript, et que vous souhaitiez générer une
documentation pour celui-ci Vous pouvez donc utiliser
les outils disponibles. Il existe des outils externes, comme
un outil, c'est Jstok, trois. OK ? Et vous pouvez
vous en servir et générer
la documentation. Et la documentation est
générée à partir de cela. Donc, si vous l'avez ajouté comme toutes les fonctions
et tous les EPI, peu importe ce que vous aurez trouvé, cela vous donnera la
documentation que vous pourrez partager avec vos développeurs
frontaux ou avec
qui vous voulez la
partager, d'accord ? Maintenant, je voudrais également vous demander si
vous souhaitez en savoir plus sur ce style
de documentation. Je vous demande de vous référer à ce site web jsto dot app OK. Et c'est essentiellement un style
standard,
je dirais, pour
documenter votre code Jascrit Et ici, si vous voyez,
vous verrez une liste de plusieurs annotations ou de
plusieurs balises ici Vous pouvez voir que nous
utilisions Param, que vous devriez
voir quelque part ici OK ? Vous pouvez voir le
paramètre. C'est bon. Et il y a plein de choses
que vous pouvez utiliser. Si vous cliquez dessus,
vous aurez accès à
plus de détails sur la façon dont
ils peuvent être utilisés. OK ? Et oui, c'est ce que c'est. Vous pouvez cliquer ici sur
le côté droit, en haut, et vous pouvez également vous rendre sur leur référentiel Github pour
en savoir plus OK ? Donc oui, il s'agit action
GS que vous pouvez explorer davantage si cela vous
intéresse, d'accord ? Mais oui, c'est une
question de commentaires, et je vais m'
en débarrasser ici pour le moment. C'est bon. J'espère donc que vous avez
pu me suivre, et j'espère que cela vous a été utile.
9. JavaScript dans Nodejs: Salut, quoi de neuf, tout le monde. Permettez-moi donc de vous montrer
comment vous pouvez utiliser nœud Gus pour exécuter
votre code Jar Script. Jusqu'à présent, nous avons exécuté
notre script Jar directement
depuis le navigateur lui-même, et ici j'utilise du code
VS avec une extension de
serveur live,
et je n'ai pas
besoin d'extension sauf pour les rechargements en direct, mais oui, les
rechargements en direct me facilitent la vie , vous savez, en
tant que développeur, vous pouvez même ouvrir
ce fichier d'estimation directement dans le
navigateur et consultez la sortie dans la console. Mais vous devrez actualiser chaque fois que vous
apporterez des modifications, ce qui n'est pas pratique
à mon avis. Alors, qu'est-ce que NodeJS ? NodeJS fournit un environnement d'exécution Donc, si vous recherchez simplement NodeJS sur Google, vous allez venir, ou vous verrez ce
lien nogs.org, qui est le lien du Maintenant, comment NodeJS est
entré en scène. Ce qui s'est passé,
c'est qu'un
ingénieur du nom de Ryan Dahl a pris
le moteur V 8 De Google qui permet à Ja
Script de s'exécuter dans Google Chrome. Donc, dans Google Chrome, vous
voyez que Ja Script est exécuté, comment il est exécuté à
l'aide de huit moteurs. Ryan a donc pris ce
moteur Vet et a créé NodeJS. NodeJS est donc essentiellement ce huitième moteur qui
vous permet d' exécuter Ja Script
n'importe où. D'accord ? Maintenant, pour l'obtenir ou pour exécuter NodeJS sans l'aide
de Oh, sorry, Nod Donc, si vous souhaitez exécuter Ja Script sans l'aide de navigateurs, vous devez installer
Nojs sur votre système C'est vrai. Et vous pouvez simplement
accéder à ce site Web. Vous pouvez accéder à
Télécharger ou vous verrez ce lien de téléchargement
ici sur la page d'accueil. OK ? Cliquez simplement sur ce bouton de
téléchargement et il sera téléchargé
sur votre système. Ou bien, vous pouvez accéder à Télécharger et
sélectionner la version. Assurez-vous de sélectionner
le plus récent. Quel
système d'exploitation vous utilisez, accord, et
installez-le simplement sur votre système. Vous pouvez donc même l'
installer en utilisant ces utilitaires en
ligne de commande, d'accord ? Ou vous pouvez également avoir un
programme d'installation prédéfini. D'accord, il existe donc différentes options
d'installation. Je recommande l'installateur. Vous devez
utiliser le programme d'installation, il suffit
donc de le télécharger et de l'exécuter. C'est donc assez
simple à installer. C'est comme n'importe quel
autre logiciel que vous
installeriez normalement sur votre système. accord ? Maintenant, une fois
l'installation terminée, je ne vais pas vous montrer
les étapes d'installation. C'est assez standard. suffit donc de vous rendre sur le terminal ou tout autre terminal en dehors du code
Visual Studio si vous souhaitez préférer le terminal de votre système d'exploitation
natif. Tu peux le faire aussi. Mais comme j'utilise
le code Visual Studio, il possède une fonctionnalité de
terminal intégrée, qui m'aidera à ouvrir
ce terminal ici. OK ? Maintenant, dans le terminal, vous pouvez exécuter ce trait d'union du nœud de
commande, qui imprimera la version du nœud que
vous avez sur votre système Il est donc très probable
que vous voyiez un
numéro de fils différent
imprimé ici selon le moment où
vous regardez cette vidéo. Mais si vous avez un
numéro de fils en cours d'impression, c'est très bien,
tant qu'il est imprimé. OK, il devrait être imprimé.
Sinon, il y a un problème avec l'
installation de nodejs sur votre système Soit il n'a pas été installé correctement, soit il
ne l'est pas du tout. OK ? Donc, avant l'installation
ou avant de le télécharger, je vous
recommande également d'exécuter cette commande et de vérifier si le nœud existe
sur votre système, n'est-ce pas ? Il existe donc sur mon système. Je sais que je l'ai
installé très tôt. Maintenant, une fois
que le nœud existe, je vais
effacer cela en disant NP ou en disant nœud ici. Il s'agit donc d'une commande,
et je
transmettrais le nom du
fichier Ja Script. Cet indice point chg. Mais avant d'exécuter cette commande, assurez-vous que vous êtes dans
le bon répertoire. Je vais donc consulter mon
répertoire ici. Donc, en ce moment, je suis
dans ce répertoire, et c'est un répertoire où réside également
mon fichier Ja Script. OK ? Je vais donc
dire nœud ici. Et je vais
dire le point d'index Gs. Et si je dis Entrée, vous verrez le résultat
arriver ici, d'accord ? Donc, avec cette approche, vous pouvez utiliser
le terminal et vous n'avez pas besoin de la console du navigateur
ici, d'accord ? Et vous n'avez même pas besoin
du serveur live, n'est-ce pas ? Donc, en gros,
vous écrivez du code ici, qui est du
JavaScript ordinaire et vous le voyez s'exécuter sur
la console comme ceci. OK ? Aucun fichier TML, aucun serveur en direct ou
aucun des deux n'est nécessaire serveur en direct ou
aucun Le navigateur aussi, d'accord ? Parce que vous exécutez maintenant Ja Script en dehors du navigateur. J'ai expliqué ce qu'est le nœud JS
et comment il est apparu. OK ? Vous
utilisez donc NodeJS ici. Mais je souhaite juste vous
montrer cette méthodologie
à tous, d'accord ? Je ne
l'utiliserai pas personnellement, d'accord, car je veux vous montrer comment
Ja Script fonctionne avec le HTML. Nous allons donc nous en tenir à cette méthode. Mais oui, j'aurais aimé que vous connaissiez également les
autres méthodes. C'est pourquoi j'ai
décidé de vous le montrer. Bien, j'espère que vous avez
pu me suivre, et j'espère que cela vous a été utile
10. Manipulation de DOM en utilisant JavaScript: Parlons de la manipulation de
Dom. Maintenant, qu'entendez-vous
par manipulation du destin ? Maintenant, si vous
parlez de JavaScript, vous devez avoir entendu parler de
ce terme appelé Dom. Maintenant, Dom est l'abréviation de
document object model. Désormais, chaque fois que vous affichez
une page Web dans le navigateur, elle est
convertie en une structure, droite, que la page
Web affiche. Et cette structure
est ce que l'on appelle le d'objet de document ou de
modèle, n'est-ce pas ? Maintenant, JavaScript
peut interagir avec ce Dom et peut même le modifier. C'est la puissance de JavaScript. Lorsque nous disons que Ja Script ajoute
des comportements aux pages Web, c'est la capacité que
cela apporte. Il peut donc interagir avec le
Dom et il peut même le modifier. Maintenant, je vais juste
vous montrer quelques fonctionnalités sur façon dont il peut modifier les choses à partir de
Ja Script lui-même, d'accord ? Nous avons donc ici le titre du cours
JAScript, d'accord ? Ici, vous voyez
H one Jascript Cure. Donc, ce que je vais faire, c'est ajouter probablement
un PTAC ici. OK, disons que c'est un tag P. Je n'ajouterai rien.
Je vais ajouter un identifiant, d'accord ? Et je dirais que c'est
le nom ici, d'accord ? donc ajouté une balise P, et je lui ai donné un
attribut appelé ID, qui a une
valeur de nom. OK ? Maintenant, pourquoi lui ai-je donné un identifiant ? Comme nous voulons accéder à
cette balise P depuis Ja Script et accéder à n'importe quelle balise depuis HTML, Jascript doit la récupérer à l'aide d'un identifiant Et l'identifiant est cet identifiant
unique. Donc, si vous passez la souris dessus, vous
verrez qu'il définit un identifiant unique, qui doit être unique
dans l'ensemble du document Il s'agit donc du document complet, et celui-ci devrait être unique pour que
Ja Script puisse le récupérer correctement. OK ? Maintenant, ce que
je vais faire c'est tout d'abord,
si vous actualisez ceci, vous verrez qu'il
n'y a aucune sortie ici parce que nous n'avons littéralement rien
ajouté, n'est-ce pas ? Il s'agit d'une balise MTP. Donc ici, je peux dire « document point
get element by ID ». OK ? Nous voyons
donc dans le document qu'il faut obtenir cet élément par identifiant. Maintenant, quel élément
demandons-nous ? OK ? Nous demandons donc un nom. C'est le nom de
notre élément ici. OK ? Maintenant, en utilisant d'ici, je peux accéder à sa propriété. Je peux donc dire que
le texte intérieur est égal à, je peux ajouter bonjour
ici, quelque chose comme ça. OK. Et je vais ajouter un
point-virgule et je vais Maintenant, vous allez voir bonjour
ici. OK ? Donc, ce hello est
ajouté dans le document HTML ou dans le code HTML à l'
aide de CHAVscript, vous pouvez voir que c' est la ligne de code
qui fait cela OK ? Et c'est assez
simple également. Nous disons que document,
ou à partir du document, obtenez cet élément par son identifiant,
qui est l'élément. Vous devez donc saisir
le nom ici. OK, vous pouvez voir ici. Cet élément get by ID
renvoie ou fait référence
au premier objet avec la valeur spécifiée de l'attribut ID.
C'est ce que ça passe. Et puis nous voyons un texte
intérieur, d'accord ? Nous modifions donc le texte
intérieur ici et nous ajoutons
bonjour là-bas. OK ? C'est donc ce que nous
faisons, d'accord. Maintenant, je vais vous montrer
quelques autres exemples. Donc, ce que je vais faire, c'est ici,
donc dans
ce code HTML, ce que je
peux faire, c'est venir ici. J'ai ce tag P. Je peux changer cette balise
P en H un, afin qu'elle soit mieux visible. OK ? La taille est plus grande. Maintenant, ce que je vais faire c'
est afficher le
bonjour ici. OK. Je peux à nouveau dire « document point get
element by ID », d'accord ? Je vais chercher cet élément, dont le nom est ici, d'accord ? Et puis je peux dire «
On click » ou « Tout le texte intérieur », d'accord ?
Ou 1 seconde. Permettez-moi également d'ajouter un
bouton ici. OK ? J'ai raté l'ajout d'un bouton, je vais
donc en ajouter un ici. Donc ce que nous allons
faire, c'est ce que j'essaie de
montrer, c'est qu'en cliquant sur ce bouton, je vais changer
le texte, changer le texte. Bouton. OK. Et c'est juste un bouton avec le changement
de texte ici. Tu peux voir. Je vais juste le minimiser un peu. OK. Donc, au lieu du
nom, je vais me faire changer. Alors quel était l'identifiant, c'est le bouton de changement de texte. Je vais juste le donner ici. OK ? Et puis ici, je vais dire point sur clic sur
ce bouton. OK. Vous pouvez le voir en
cliquant ici. En cliquant sur ce
bouton, je dois
avoir une fonction. OK ? Il s'agit d'une fonction
et de l'état de la fonction. Oups. OK, donc j'ai clarifié
cela et ici, quelques
éloges, OK, je vais vous dire ce qui devrait se passer en
cliquant sur ce OK ? Donc, en cliquant
sur ce bouton, ce texte devrait changer. Je vais donc copier
cette ligne ici parce que c'est la ligne qui nous
aide à changer le texte, et je peux dire bonjour, je peux dire bonjour encore une fois ici, quelque chose comme ça. OK. J'espère donc que cela a du sens. Ce que nous essayons de
faire ici. C'est bon. Nous disons en fait que le document
ne reçoit pas l'élément par identifiant. Nous obtenons cet
élément. Il s'agit d'un bouton. Et en cliquant sur ce bouton, nous disons d'exécuter
cette fonction. Que sont les fonctions, au
cas où vous ne le sauriez pas, les
fonctions ne sont
rien d'autre
qu'un bloc de code conçu pour
effectuer une tâche particulière. Et la tâche que
nous essayons de faire ici
est simplement de changer le texte de cet élément en
particulier ici, et cet élément en particulier
est une balise H one, d'accord ? Nous obtenons donc
cette balise H one, et nous changeons à nouveau le texte
intérieur en bonjour. Alignez-le avec un
point-virgule. Je vais enregistrer ça. Et maintenant, si vous dites « changement »,
vous verrez à nouveau bonjour. OK ? C'est donc une puissance
de JavaScript, d'accord ? Vous pouvez voir à quel point il est puissant. Nous venons d'ajouter un écouteur
onclick, et à l'aide de la fonction, nous
sommes en mesure de mettre
à jour le nom Ou plutôt, je dois dire que nous ne mettons tout simplement pas
à jour le nom. Nous sommes en train de modifier un élément ou
un tag préexistant sur la page. OK ? C'est donc
là une puissance de JavaScript que vous pouvez sentir. Il ne s'agit donc pas simplement de
modifier le texte, mais vous pouvez même mettre à jour
les styles à la volée. OK ? Et pour démontrer cela, disons que si je clique sur
modifier, je clique sur modifier, je souhaite changer la couleur de fond d'un
élément pour autre chose, je peux même le faire
avec JavaScript. Je vais donc simplement dupliquer
cette ligne ici. Et ici, disons que je
veux changer le style de cet élément en
particulier rouge, par exemple. Je peux donc dire qu'après avoir obtenu cet élément en particulier,
au lieu du texte intérieur, je peux voir le style, tout, je peux voir l'arrière-plan. Vous pouvez voir qu'il y a
tellement de propriétés
auxquelles vous avez accès, d'accord ? Vous avez également accès à la couleur
du texte ici. OK. Aucune couleur de texte. Désolée pour
ça. C'est juste la couleur. OK ? Nous
parlons donc de couleur d'arrière-plan, donc je vais juste vous donner la couleur d'
arrière-plan ici, et ici je peux dire rouge. Et je vais voir si c'est le cas.
Maintenant, en cliquant sur le bouton de modification, vous verrez que le texte
a également été modifié et que la
couleur de fond est désormais rouge. Si vous le souhaitez, vous pouvez
même changer
la couleur du texte en blanc. Je peux simplement dupliquer
cette ligne et je peux dire que la couleur peut être le blanc. OK. Et vous pouvez dire,
par ici, non ? Donc blanc parce que sur le rouge, le
noir ne me semblait pas très beau. OK, c'est ma préférence. Mais c'
est possible avec JavaScript. Vous pouvez voir comment cela
peut ajouter beaucoup de comportement aux éléments HTML, et une page HTML statique
possède désormais des comportements et des
éléments qui se mettent à jour dynamiquement en
fonction des événements que vous effectuez
sur la page Web, d'accord ? J'espère donc que vous avez
pu me suivre, et j'espère que cela vous a été utile.
11. Variables dans JavaScript: Commençons par parler de
ce qu'est une variable. Maintenant, si vous venez d' un autre langage de programmation, il est fort probable
que vous
connaissiez les variables en tant que concept. Une variable est comme une
boîte de rangement dans laquelle vous pouvez conserver une information pour utilisation ultérieure. Maintenant, qu'
est-ce que cela signifie ? Maintenant, si vous créez gros programmes dans n'
importe quel langage de programmation, il est très probable que vous
souhaitiez stocker des informations. Par exemple, si vous
créez une calculatrice, vous souhaiterez peut-être stocker des chiffres et le résultat afin de
pouvoir les afficher à l'utilisateur. Vous souhaiterez peut-être également
enregistrer des numéros. La raison en est que vous voulez faire des calculs sur
ces chiffres, n'est-ce pas ? Vous voudrez peut-être le
stocker quelque part, et ces numéros doivent
être accessibles, n'est-ce pas ? C'est donc là qu'intervient le concept
de variable. Il permet de stocker les informations pendant l'
exécution du programme. C'est donc ce que dit la
définition. Une variable est comme
une boîte de rangement. Une boîte de rangement parce qu'elle permet de stocker
des informations, non ? Donc, la partie suivante indique où
vous pouvez conserver l'
information pour qu'ils puissent
l'utiliser plus tard, n'est-ce pas ? Vous pouvez le considérer comme une étiquette que vous collez sur quelque chose dont
vous voulez vous souvenir. Imaginez donc cette
boîte ici et disons que vous avez une boîte nommée
ou étiquetée avec un nom ici. Au lieu d'une étiquette, vous
voyez un nom ici. Et à l'intérieur de la boîte, tu as
mis le nom Alice. Désormais, chaque fois que vous
souhaitez utiliser le nom Alice, vous pouvez simplement vous référer
à la zone de nom et vous pouvez l'utiliser au lieu de
taper Alice à chaque fois. Maintenant, il s'agit d'un exemple très
simple. Bien sûr, les variables peuvent également stocker beaucoup de choses complexes, comme des phrases et tout le reste, que vous pouvez utiliser
au cours de l' exécution
du
programme, n'est-ce pas ? Maintenant, la création d'une variable en JavaScript est assez
simple. Nous allons donc créer notre
première variable, d'accord, et nous verrons comment
nous pouvons
l'utiliser maintenant, commençons à
créer une première variable. Je vais dire comment vous
créez des variables en JavaScript et vous ajoutez le nom de variable que
vous souhaitez avoir. Supposons que je veuille enregistrer le nombre pour
compter quelque chose. J'ai créé cette
variable nommée count. Maintenant, après cette instruction, si je sauvegarde le programme, j'
ai effectivement
créé une variable, mais je ne l'utilise pas réellement. C'est pourquoi je ne vois
rien dans la sortie, n'est-ce pas ? Maintenant, je peux dire point de console, me
connecter ici, et je peux immédiatement imprimer
ou utiliser la variable Donc, je l'utilise, cela signifie que je suis
simplement en train de l'imprimer en ce moment. OK, je n'
effectue aucune opération sur les variables. Je vais donc enregistrer ceci et vous verrez que undefined est
imprimé ici Cette variable
ne contient donc rien. Vous pouvez donc penser
que la boîte que vous avez avec
l'étiquette ne contient
aucune information. Pourquoi ? Parce que vous ne
lui avez attribué aucune information. Vous pouvez donc attribuer
des informations de cette façon, sorte que vous puissiez dire que le nombre est
égal à zéro ici. Et si vous l'enregistrez, vous verrez zéro s'imprimer sur
la console, n'est-ce pas ? Vous pouvez rendre ce code beaucoup plus concis en combinant
ces deux instructions. Il s'agit donc de la déclaration et de la
partie initialisation de la création de variables Donc, ce que je peux faire, c'
est combiner
les deux, d'accord ? Alors laissez-moi appuyer sur Backspace et laissez-moi combiner ça, d'accord,
quelque chose comme ça Maintenant, si je sauvegarde ceci, le résultat sera le même. Je ne changerai pas. Mais pour le moment, au lieu
de trois lignes de code, j'en ai deux. Voici donc comment vous pouvez créer
et utiliser une variable. Bien sûr, l'utilisation
que j'ai
montrée ici est assez basique. J'imprime juste
la variable. OK ? Et vous pouvez l'utiliser autant
de fois que vous souhaitez au cours de
l'exécution du programme. Cela dépend entièrement de vous.
Vous pouvez donc voir ici, non ? Et vous pouvez même l'
utiliser dans des opérations arithmétiques. Je peux donc dire « console
point log » ici, et je peux dire « compte
plus dix » ici. Vous pouvez voir dix sorties de base. OK. Maintenant, si le nombre est de dix, vous verrez 1010, puis en cours d' impression et vous pouvez
voir une sortie de 20 bases Vous pouvez même modifier la
valeur de la variable. Donc, quelque part au
milieu des énoncés, je peux dire que le nombre est égal
à 40, par exemple OK. Et je peux enregistrer
ceci et vous pouvez voir trois fois que le
décompte est de dix ici, puis le nombre
est de 40, 40, 50, non ? 50 parce que j'en ajoute dix. C'est donc l'
explication la plus simple pour les variables. Donc, pour retenir quelques points, une variable est comme une
boîte de rangement dans laquelle vous pouvez conserver ou stocker l'information que vous souhaitez
utiliser ultérieurement. Vous pouvez le
considérer comme une étiquette que vous collez sur quelque chose vous voulez vous souvenir, n'est-ce pas ? Je me souviens donc du comte. Je stocke la valeur de count, et je l'utilise en
fait au cours de
l'exécution du programme. La création de variables
comporte deux étapes. Il y a d'abord la partie déclaration, puis la partie
initialisation, n'est-ce pas ? Maintenant, je combine l'
initialisation
et la déclaration
en une seule, d'accord ? Et vous pouvez utiliser, euh, des variables autant
de fois que vous souhaitez pendant l'exécution
du programme, vous pouvez même réaffecter
la valeur à une variable autant
de fois que vous le souhaitez Je peux donc même le
réattribuer à nouveau. Au lieu de 40, je peux en faire, disons, 80 et je peux le sauvegarder. Vous verrez le changement
dans le résultat. OK ? Ce sont donc des
variables pour vous, et j'espère que c'était une explication assez claire et la plus simple
possible.
12. Noms de variables: Maintenant, ce n'est pas comme si vous
ne pouviez créer qu'une seule
variable dans un programme. Vous pouvez créer autant de variables que vous le souhaitez dans un programme. Donc, si je veux, disons, stocker un
compteur ici, compteur est cinq, je peux le faire et je peux m'en servir n'
importe où dans le programme. À la fin du programme,
je peux dire journal des points de la console, et je peux imprimer la valeur. Oups. Je suis désolée Vous pouvez imprimer la valeur
du compteur ici. OK. Et vous en verrez
cinq être imprimés. Maintenant, s'il y a
quelque chose qui est autorisé à créer
beaucoup de choses à cause des variables, vous pouvez en créer autant que vous
le souhaitez dans les programmes, d'accord ? Donc, s'il y a
quelque chose comme ça, il est essentiel que la création de ces objets soit régie
par des règles, n'est-ce pas ? De même, pour les variables, vous devez
suivre un ensemble de
règles lorsque vous créez
et nommez des variables. Il existe donc maintenant
un certain nombre de règles, pas beaucoup, mais quelques règles que
vous devez garder à l'esprit lorsque vous
utilisez des variables. Maintenant, vous n'êtes pas
censé suivre ces règles par cœur, mais en général, avec de la pratique, vous les
maîtriserez, n'est-ce pas ? Et les identifiants, si vous
utilisez un identifiant moderne, tel que
le code Visual Studio, ils garantissent également
qu'ils signalent
toute sorte d'erreur
que vous commettez ou que vous vous écartez de la règle D'accord ? Donc, si vous essayez de nommer une variable
qui n'est pas autorisée, je vous aiderai également à mettre en
évidence
le problème. D'accord ? Nous allons donc parler des
règles une par une. Donc, la règle numéro un que
j'ai ici à l'écran
est que les noms de variables doivent
commencer par une lettre, un dollar ou un trait de soulignement OK. Vous pouvez donc avoir
un nom de variable. Alors laissez-moi clarifier un peu
les choses, d'accord. Donc je vais juste me débarrasser
de tout ça, d'accord ? Je vais juste garder les choses propres. Donc ici, cette
variable
commence en fait par une lettre, d'accord ? Vous pouvez avoir une variable commençant par
quelque chose comme ceci. D'accord ? Il s'agit d'un nom de
variable valide. D'accord ? Vous pouvez avoir une variable
appelée trait de soulignement Ici, le
nom est égal
à, vous pouvez dire élevé OK. Cela est également valable. Ce sont donc tous des noms de variables
valides. Désormais, vous ne pouvez
pas
utiliser de nom de variable commençant par une lettre. Vous pouvez donc prononcer un
nom ici. Ce n'est pas valide, d'accord ? Si vous essayez de le faire,
un message d'erreur s'affichera. Vous pouvez voir, comme je l'ai
souligné, que les identifiants vous aident. Vous pouvez voir que c'est comme si vous disiez « identifier », vous n'arrivez pas à obtenir
ce que vous essayez de faire. D'accord ? Maintenant, pourquoi voudriez-vous
nommer une variable de cette façon ? Un seul nom n'a
aucun sens, n'est-ce pas ? Ce n'est donc pas autorisé. Je vais
juste commenter, d'accord ? C'est donc l'une des règles que vous êtes censé garder à l'esprit. Et, bien sûr, si vous
ne vous en souvenez pas, ne vous inquiétez pas, car les identifiants
modernes, comme je l'
ai dit, si vous utilisez un identifiant moderne, vous aideront à identifier tout
écart par rapport aux règles, n'est-ce pas ? C'est donc la règle numéro
un. Maintenant, la règle numéro deux dit qu'elle peut
contenir des lettres, des
chiffres, un dollar et un trait de soulignement après le premier caractère. D'accord ? Vous pouvez donc avoir une variable. Vous ne pouvez donc pas avoir de
variable appelée user. Cela n'est pas autorisé. Oups. Il a donc détecté l'activation de l'utilisateur. OK. Vous ne pouvez pas avoir variable appelée user,
quelque chose comme ça, non ? Cela n'est pas autorisé car
cela commence par un chiffre. Mais vous pouvez avoir une
variable appelée user one. Ceci est autorisé car ici, le numéro vient à la fin ou après
le premier caractère. Vous pouvez également avoir un numéro après
le premier caractère. D'accord ? Cela est également autorisé. Maintenant, vous pouvez même avoir un dollar, donc vous pouvez avoir un dollar ici ou vous pouvez également avoir
un trait de soulignement Maintenant, le soulignement est utile si vous souhaitez
séparer deux mots Donc, si je veux avoir le
premier nom de soulignement, c'est ici que le trait de
soulignement peut être utilisé D'accord ? Donc oui, c'est la deuxième règle qui mentionne
que les noms des variables, non vous,
peuvent contenir des lettres, des
chiffres, des dollars et un trait de soulignement
après le premier caractère Maintenant, la troisième règle dit que les noms de
variables sont sensibles à
la clé, d'accord ? Donc, cela signifie que si vous avez
deux noms de variables, laissez-moi vous dire que si
c'est le nom ici, accord, le nom est,
disons, Alice ici. Oups. Si c'est Alice ici, et disons que vous avez
un autre nom de variable qui est name ici. OK et c'est Tom, disons. Ce sont donc deux noms de variables
différents, et je peux vous les montrer. Vous pouvez donc dire Console point log, et vous pouvez imprimer
le nom ici. OK. Et vous pouvez dire Console, point log, et vous pouvez dire nom ici,
quelque chose comme ça. OK. Si vous voyez la sortie, vous verrez Alice et
Tom comme sortie. OK, c'est donc la règle numéro trois selon laquelle les noms de variables distinguent
les majuscules et minuscules. La règle suivante indique
que les noms de variables ne peuvent pas utiliser
un mot clé réservé. Maintenant, que sont les mots clés réservés ? Or, dans les langages de programmation , il existe
généralement des mots
ayant une signification prédéfinie. Par exemple, let est un mot clé. Il a une signification prédéfinie, et il est utilisé pour créer des
variables, n'est-ce pas ? Donc, si vous essayez de créer une variable avec le
nom laissé ici, accord, ce n'est pas
autorisé. Tu peux voir. Donc, si vous passez la souris dessus,
cela indiquera que let n'est pas autorisé à être utilisé dans un nom dans les déclarations let ou
contre OK, donc ce
n'est pas autorisé, d'accord, donc je vais juste faire un commentaire. Vous ne pouvez donc pas utiliser
de mots clés réservés. D'accord ? Maintenant, vous allez dire : « Oh, je dois mémoriser tous les mots clés réservés,
pas
du tout, car
avec de l'entraînement, au fur et à mesure que vous commencerez à créer des programmes, vous saurez ce que sont les mots clés
réservés. OK, try est un mot clé réservé, catch est un mot clé réservé. Vous saurez tout cela au fur et à mesure que
vous apprendrez de nouveaux concepts, et cela s'acquiert avec
la pratique. Même moi, je n'ai pas par cœur la
liste des mots clés réservés. D'accord ? Au fur et à mesure que vous vous entraînez, vous apprendrez que ce sont tous des mots clés
réservés, et aux endroits où vous les
oubliez ou que vous ne vous en souvenez pas, les identifiants vous aideront, n'est-ce pas ? Mais c'est une règle
à garder à l'esprit. La règle suivante indique que les noms de
variables ne
doivent pas avoir d'espèces. Si vous essayez d'ajouter un espace entre
le nom de la variable,
cela n'est pas autorisé. Si j'essaie d'ajouter un nom de
variable car prénom est égal
à dix, vous pouvez voir que ce n'
est pas autorisé. Cela n'est pas autorisé.
Il faut les combiner. C'est un seul mot.
Vous devez le combiner de cette façon. Cette convention,
où vous avez deux mots dans un seul
nom de variable et le deuxième mot majuscule, est
connue sous le nom de camel case OK. Nous transformons
donc N en capital, mettant N en majuscule ici pour que ce soit lisible.
Il y a deux mots. C'est ce que nous
soulignons. Le premier est un mot et le nom est un mot. C'est une bonne
pratique de dénomination ici. Le nom d'une variable ne doit pas comporter d'espace
. Aucun espace n'est donc autorisé. La dernière chose à faire ici
est d'utiliser des noms descriptifs. Ce n'est en fait pas une règle, mais plutôt une bonne pratique d' avoir des noms de variables
descriptifs. Par exemple, disons que si
j'ai un nom de variable, si je veux l'enregistrer,
disons H ici. Et si je crée un
nom de variable A ici et que je stocke H comme disons 22. Je n'ai pas 22 ans, mais je ne fais que donner un exemple D'accord ? Supposons donc que j'essaie de stocker H et que j'ai créé
ce nom de variable. Maintenant, quiconque lit
ce code ne sait pas A, quelle est la valeur que contient A. Bien sûr, il en contient
22, mais qu'est-ce que c'est ? C'est en fait un H, non ? est donc préférable
d' avoir un nom de
variable approprié où
le nom de la variable lui-même indique le type de valeur que contient la
variable. Donc, ici, il est assez clair que cette variable est créée
pour stocker l'âge d'un utilisateur. Hein ? Donc, si vous élaborez un projet de gestion des employés ou quelque chose comme ça, d'accord ? Et si quelqu'un qui lit votre code tombe sur
cette variable d'âge, il sait que cela
représente l'âge
de l'employé, d'accord ? Il est donc toujours préférable d'avoir noms de
variables, des noms de
variables descriptifs, je dirais, contrairement à et c'est une meilleure
pratique d'avoir descriptifs, car
avoir des noms de variables tels que X, A, B, C, X un, X deux, ce n'est pas du tout une bonne
pratique, d'accord ? Je suis totalement contre
. Donc oui, c'est la règle
ici ou ce n'est pas
vraiment une règle. Vous n'obtiendrez aucune
erreur si
vous la déclarez sous la forme A ou X,
mais il s'agit d'une bonne pratique
à suivre. C'est bon. autre chose que je voulais souligner
à propos la création de
variables ici est que vous pouvez également
déclarer plusieurs variables
sur une seule ligne. Donc je peux en avoir un. OK. Un deux, et je
peux en avoir un trois. Ce sont donc trois
variables
créées sur une seule ligne, d'accord ? Et vous les avez séparés par des
virgules. Vous pouvez même
les initialiser ici. Je peux donc
leur initialiser différentes valeurs,
cinq, dix, et je n'ai pas
initialisé A trois ici Je peux même initialiser
A 3 à 15, d'accord ? Et je peux ajouter le
journal de la console ici. Permettez-moi donc d'ajouter rapidement le journal de la
console et de
vous montrer le résultat. D'accord ? C'est un. OK. C'est un deux, et c'est pour un trois. OK. Et si je sauvegarde ceci, vous en verrez cinq, dix et 15. Maintenant, si je me débarrasse de A
deux par ici. D'accord ? Et si je sauvegarde ceci, un deux n'est pas défini, d'accord ? Je ramène donc
la valeur A deux, qui est dix ici. Vous pouvez donc absolument créer,
déclarer et initialiser
plusieurs variables sur une seule ligne Mais normalement, ce
n'est pas comme ça que les gens font, d'accord ? Avec JavaScript, la convention
générale est de procéder de cette façon. Vous voudriez donc en avoir
un, quelque chose comme ça. D'accord ? Et puis mettez A deux sur une ligne séparée
, puis A trois sur une ligne séparée,
quelque chose comme ça. C'est donc ce qui est préféré
à ce type de syntaxe car elle est beaucoup plus
claire et facile à lire, d'accord ? Maintenant, vous voyez toutes les marques
rouges ici. Pourquoi ? Parce que les noms de variables d'un seul programme
doivent être uniques, ou du moins dans une portée. OK. Ainsi, dans une portée, le nom de la variable
doit être unique. Vous pouvez donc voir ici que j'
essaie de créer une
variable nommée A un, et vous pouvez voir ici
qu'une variable existe déjà, n'est-ce pas ? Donc, si j'ajoute A 11 ou e22e3,
je suis autorisé à créer. OK. Donc oui, assurez-vous d'
avoir des noms de variables uniques. Et c'est aussi une
convention ou une chose, une règle, je dois dire que vous devez connaître à propos
des variables. Vous pouvez même enchaîner les assignations, afin que je puisse créer
des variables comme X, Y et Zt ici. D'accord et je peux avoir X
égal à Y égal à Z égal à
30, par exemple. OK. Et ils
auront tous une valeur de 30. Donc, si tu veux, je
peux te le montrer. D'accord ? Donc c'est X. D'accord. Et puis ici c'est Y, et là c'est s. D'accord, si
je garde ceci, vous
verrez 30, 30, 30. D'accord ? Ils
ont tous la même valeur. D'accord ? Donc oui, il s'
agit de variables façon dont vous pouvez les nommer et des règles que vous êtes
censé garder à l'esprit. Gardez donc à l'esprit ces règles
générales en tant que telles, vous n'avez pas besoin de les durcir. C'est tout à fait normal.
Ne vous inquiétez pas à ce sujet. Mais une fois que vous aurez commencé à
programmer, d'accord, je ne veux pas être
surpris que cela ne me permette pas de créer des
variables portant ce nom. Bien sûr, ce ne sera pas le cas,
car c'est une règle que vous devez
connaître. D'accord ? Et les identifiants modernes, comme je l'ai dit, vous aident
toujours et sont là pour vous envoyer des
messages d'erreur détaillés J'espère donc que cela a été utile.
13. var vs let vs const: Il est donc temps
de parler différentes manières de créer des
variables en JavaScript. En JavaScript, vous pouvez donc créer des variables à l'aide de ces mots clés. Tu as appelé Const et nous
sommes là, d'accord ? Ou cela se prononce également comme guerre. Donc War over here est une ancienne façon de créer des
variables, d'accord ? Vous pouvez donc utiliser War et dire que le
compteur est égal à 100 et vous pouvez dire Console ou Log ici et vous pouvez voir le
compteur ici. OK, je vais ajouter un point-virgule. Vous pouvez maintenant le voir
s'imprimer. Mais il s'agit d'une ancienne méthode
de création de variables. D'habitude, à partir d'
aujourd'hui, nous n'utilisons plus que
la location ici. Donc, si vous voulez utiliser si vous voulez stocker le
compteur ici, vous pouvez dire 100 et
vous pouvez dire Console, point log et un nouveau compteur. D'accord ? C'est ainsi que vous créez des variables aujourd'hui.
Maintenant, qu'est-ce que const ? Donc, si vous venez d'un langage de
programmation différent, vous connaîtrez les constantes. Const est donc le mot clé qui permet de déclarer
ou de créer des constantes Maintenant, une constante est quelque chose
dont la valeur ne change jamais. Par exemple, ici,
pour un nouveau compteur, je peux réattribuer une valeur, non ? Je peux dire que le compteur est
égal à 200. D'accord ? Et si j'imprime à nouveau le compteur, je verrai 200
en sortie. Vous
pouvez le voir ici. D'accord. Mais il y aura des moments ou des scénarios auxquels vous serez confronté lorsque vous ne voudrez pas que la valeur
d'une variable change. D'accord ? Et dans ce cas
particulier, vous pouvez utiliser const. Vous pouvez donc dire const
ici et disons
une valeur de Pi Vous pouvez donc dire 3,14. C'est la valeur
de Pi, n'est-ce pas ? Maintenant, je vais juste le copier. Et vous pouvez imprimer
la valeur de Pi. Vous pouvez voir 3.14. Maintenant, si j'essaie de changer
cette valeur ici, si je dis que Pi est égal à 400. D'accord. Et si j'essaie de le sauvegarder, vous verrez un
message d'erreur indiquant que l'affectation à une variable constante n'
est pas autorisée, d'accord ? Et vous ne voyez pas le résultat. Et vous voyez également. Donc, ici, vous pouvez également voir comment
vous pouvez déboguer votre erreur. Vous voyez donc que le
point d'index porte le numéro de ligne 17. Et il s'agit de la ligne 17, comme vous pouvez le voir dans le code de
Visual Studio, elle met en évidence
votre numéro de ligne. Alternativement, vous pouvez
même cliquer dessus, afin de cliquer sur Ceci est un lien. Si vous cliquez dessus, vous
serez redirigé vers le code ici. Vous pouvez voir que c'est la
ligne où se trouve l'erreur. Et si vous passez la souris dessus, vous
verrez que c'est une ligne qui
est à l'origine de l'erreur Affectation d'une erreur de type non détectée à une
variable constante. C'est bon. Revenons donc à la console ici. Donc, si tu te
débarrasses de cette ligne, oui. Et si vous sauvegardez, vous obtenez le résultat comme
prévu. C'est bon. Donc, constante est l'endroit où vous ne voulez pas que la valeur de la
variable soit modifiée. Et il existe de nombreux
scénarios dans lesquels vous devrez
créer des constantes. Par exemple, si vous travaillez
sur une application bancaire, vous souhaiterez peut-être
créer une variable ou stocker
une valeur de taux d'intérêt. Maintenant, le taux d'intérêt ne
change pas, n'est-ce pas ? C'est réparé. Donc, à condition que ce soit
réglé pour votre banque, l'
ensemble ou pour le projet sur lequel
vous travaillez. S'il est fixe,
vous voudrez peut-être avoir une constante parce que
vous ne voulez pas que vous-même ou vous-même modifiez
accidentellement la valeur du taux d'intérêt
dans le programme ultérieurement. De plus, si vous
travaillez en équipe, vous ne voulez pas que quelqu'un
d'autre modifie cette valeur. C'est pourquoi
vous
mentionnez explicitement const
là-bas, d'accord ? Et cela indique à
tous les autres que, hé, c'est constant
et ne doit pas être modifié. De plus, une convention ici est que chaque fois que vous
déclarez une constante, vous
verrez normalement des constantes être déclarées en
majuscules. D'accord. Ainsi, par exemple, Pi
ici est en majuscules. D'accord ? Donc oui, il s'
agit de let const and where D'accord ? N'oubliez donc pas que vous pouvez créer des variables à l'aide de ces
trois mots clés. Vous devez utiliser let
lorsque vous souhaitez
créer une variable normale
dont vous pouvez modifier la valeur. R est une ancienne méthode de
création de variables.
Il n'est pas utilisé aujourd'hui. D'accord ? Je n'ai pas vu de développeurs les
utiliser autour de moi, n'est-ce pas ? C'est une méthode plus ancienne.
Alors oublie ça. Mais c'est bon à savoir,
car si vous travaillez sur ancienne base de code, si
vous rejoignez une entreprise, si vous travaillez
sur un bit de code existant, il vaut mieux le savoir, d'accord, afin de pouvoir effectuer une mise à niveau, n'est-ce pas ? Const, bien sûr, si tu
ne veux pas que la valeur
change pour rester la même, je veux dire, d'accord, tu devrais
utiliser ce gardien J'espère donc que cela vous a été utile.
14. Types de données: Bonjour, bienvenue, et
maintenant il est temps de
commencer à parler des
types de données en JavaScript Le type de données
n'est donc rien, mais les types de données définissent le type de valeur que
contient une variable particulière. Maintenant, si vous venez d' une autre
formation en programmation comme Java, Python ou quelque chose comme ça, vous
devez savoir
quels sont les types de données, n'est-ce pas ? Et pour ceux qui ne le
savent pas, il s'agit d'une définition. Il définit simplement le type de valeur qu'une variable contient. Désormais, les types de données
en JavaScript sont généralement classés
en deux types. L'un concerne les types primitifs, puis nous avons les types de
référence. Commençons donc par
parler des types primitifs. Il s'agit maintenant des types
de données
primitifs en JavaScript. Vous avez donc un nombre, vous avez
une chaîne, booléenne, indéfinie. Oui, undefined est également un
type de données, et vous avez une valeur nulle. Donc, comme on dit, Number représente à la fois des nombres entiers
et des nombres à virgule flottante D'accord ? Donc, si vous voulez des nombres,
nous sommes tous,
un, deux, trois et même des nombres à virgule flottante, les nombres avec des
décimales comme 1,1, 1,2, ils entrent tous dans
la catégorie des nombres Ensuite, vous avez des
ficelles. Maintenant, la chaîne n'
est rien d'autre qu'une séquence de caractères comme votre nom
et tout le nom de la ville, le nom du pays, tout
cela est inclus dans une chaîne. Booléen, qui n'a que
deux valeurs, vrai ou faux, puis nous avons undefined, ce qui signifie qu'aucune
valeur n'est assignée, et puis vous avez null Désormais, null indique que la valeur est absente
intentionnellement. Maintenant, permettez-moi de vous montrer le
chiffre ici. Donc ici, ce que je peux faire, c'est créer une variable appelée H. Je peux lui attribuer un numéro. D'accord ? Disons que H est ou disons que H est 70
ici, n'importe quel nombre. Et vous pouvez vous
connecter à la console ici, non , et vous pouvez imprimer dans chacune d'elles. D'accord. Et vous verrez
le résultat ici. Vous pouvez voir que 70 est le résultat. D'accord ? Maintenant, si vous souhaitez imprimer de quel type de
variable il s'agit, vous pouvez utiliser type
off. Je peux donc dire « tape off ». Vous pouvez voir le à suggérer. Ajoutez un espace,
puis cliquez sur Enregistrer. Vous pouvez donc voir que le type de
cette variable est un nombre. D'accord ? Maintenant, si je change
cela en décimal, donc si je dis 70,5 ici, bien
sûr, H ne peut pas être
exprimé en décimal, mais je vais quand même le faire à des fins de
démonstration, vous verrez que le type de
H est toujours un nombre Ainsi, contrairement à d'autres
langages de programmation tels que Java, en Java, vous disposez de types de données distincts pour les valeurs à virgule
flottante
et pour les valeurs entières. Mais en JavaScript, cela
n'existe pas, d'accord ? Selon le type
de valeur qu'il contient, d'
accord, il peut s'agir d'un nombre, non d'une
valeur décimale ou même d'un nombre entier Donc, ici, ce nombre entier, ce sera aussi un
nombre comme nous l'avons vu. D'accord ? Voici donc ce qu'est le nombre. Et puis nous avons les ficelles. Donc ici, si vous faites défiler , je vais vous montrer
ce que sont les chaînes. Vous pouvez donc dire « laisser le nom
» ici et ajouter,
disons, John ou
Alice, peu importe, puis vous pouvez dire « Console », Tot og » ici, et je
peux dire « nom » ici. D'accord. Maintenant, bien sûr, cela va être imprimé dans John, mais vous pouvez dire type de, vous pouvez l'enregistrer et vous verrez
une chaîne s'imprimer. Et c'est parce que le type de John n'est rien d'autre qu'une chaîne. D'accord ? Maintenant, je vais créer une
autre variable ici. D'accord. Je peux créer une ville
ici et vous pouvez également attribuer ou même créer une chaîne
en utilisant un code unique. Donc, ici, j'utilise le
double de, vous allez voir. Vous pouvez même utiliser
un seul code ici. Maintenant, la ville dit que
Jose est ici, d'accord. Et je vais juste copier
ceci ici, cette partie. Et au lieu d'un nom, vous pouvez avoir une ville
et vous pouvez l'enregistrer, vous verrez quand même que vous êtes
en train de créer une chaîne. D'accord ? La chaîne peut donc être créée
de plusieurs manières, d'accord ? Vous pouvez voir utiliser des codes
doubles et également
utiliser un code unique. Maintenant, vous pouvez même
concaténer une chaîne, d'accord ? Vous pouvez donc dire Console. Désolé, c'est le journal des points de confirmation de la
console ici, et vous pouvez dire que vous
pouvez dire le nom, d'accord. Et je dirais « plus », et vous pouvez voir beaucoup
d'espace entre les deux, et vous pouvez dire « ville » comme ça. Tu vas voir John San Jose. D'accord ? John Sin Jose
n'a aucun sens, mais si vous avez des variables
distinctes pour le
prénom et le nom de famille, vous pouvez bien
sûr les concaténer de
cette façon pour obtenir un Maintenant, je vois que de nombreux développeurs préfèrent les codes
uniques pour créer des chaînes lorsqu'ils travaillent
avec JavaScript. Le type de données suivant est booléen. D'accord ? Désormais, Boolean représente simplement deux valeurs,
vrai ou faux Je peux donc créer un
booléen ici est ou je peux dire a
obtenu son diplôme ici, et cela peut être vrai ici
et je peux dire Console, point,
log, et je peux dire tapez off
et je peux dire a Maintenant, vous verrez Boolean comme
résultat ici, d'accord ? Vous pouvez également simplement taper en
tant que gradué, et vous verrez une véritable sortie
AE. D'accord ? Maintenant, les types de données booléens
sont en fait
beaucoup utilisés lorsque vous prenez des
décisions, d'accord ? prise de décision signifie que si
un étudiant a obtenu son diplôme, vous pouvez probablement
lui délivrer un certificat, n'est-ce pas ? Ou vous pouvez arrêter de calculer
les présences. Si l'utilisateur est admin, vous pouvez
donc avoir un
booléen appelé I Si un utilisateur est administrateur,
accordez-lui l'accès à certaines
fonctionnalités de l'application. S'il n'est pas administrateur,
empêchez-le d'accéder à toutes
ces choses. Ainsi, en fonction de la valeur de la variable, l'
administrateur est diplômé, les décisions sont prises,
et cela est beaucoup
utilisé dans la prise de
décision. D'accord ? C'est donc un
cas d'utilisation du booléen. Il représente simplement le
vrai ou le faux. Vous avez alors indéfini. Donc, indéfinie signifie que la
variable a été déclarée mais qu'aucune valeur n'a encore été attribuée,
d'accord ? Vous pouvez donc dire « console
point log » ici. Et laissez-moi d'abord créer
une variable. D'accord. Je vais donc avoir une
variable, soit la zone. Et disons que cela ne
me convient pas. D'accord ? Je vais ajouter une zone ici, d' accord, et vous verrez l'
indéfini être imprimé D'accord ? Maintenant, si je dis type de, vous verrez
alors
undefined être imprimé D'accord ? Cela n'est donc pas
défini et aucune valeur n'est réellement affectée à la
variable créée Maintenant, le suivant est nul, ce qui représente
l'absence intentionnelle d'une valeur. Supposons donc que vous ayez
créé une
variable et que vous ne
souhaitiez pas encore lui attribuer de valeur. Je peux donc créer une variable
appelée valeur vide. Appelons-la
valeur vide elle-même. D'accord. Et je vais lui assigner une
valeur nulle. Maintenant, si je dis journal des points de la console, et si je dis valeur vide, je vais voir une valeur nulle être
imprimée sur la console. D'accord ? Maintenant, je peux dire type de objet et enregistrer ceci et vous verrez le type
de cet objet. Donc, null est en fait
de type objet, d'accord ? Mais il s'agit en fait d'un type de
données en JavaScript. D'accord ? Donc oui, il s'
agit de Null ici. D'accord ? Je vais juste m' en débarrasser et nous
le ferons imprimer. Maintenant, avant
de passer au type de référence, je veux juste souligner
une petite chose ici. Lorsque nous avons indiqué le type de valeur
vide ici, qui est nulle, nous avons vu
un objet être imprimé. Mais en fait, ce
truc contient un zéro, non ? Il devrait donc idéalement imprimer null si null est un type de données. D'accord. Maintenant, je voudrais simplement mettre en évidence un
article sur le débordement de pile ici, qui dit : « Pourquoi un type
d'objet nul, n'est-ce pas Maintenant, ici, cela a été
proposé idéalement. Donc, si vous allez sur ce
lien ici, cela a été proposé pour le changer,
cela a pris 1 seconde ,
pas celui-ci, mais
c'est celui-ci. D'accord. Il a donc été proposé de le changer en null ici. D'accord ? Voici donc l'article
complet ici, et c'est le truc avec Stack
Overflow D'accord. Il a donc été
proposé de le modifier, mais il a en fait été rejeté. Donc, si vous exécutez ce
code ici, vous verrez toujours l'objet
o en sortie. Mais peu importe, d'accord ? N'oubliez pas que vous pouvez avoir des valeurs
nulles en JavaScript. Vous pouvez avoir des variables
avec des valeurs nulles. C'est ce qui compte. Passons maintenant aux types de référence. Nous allons donc en parler de
deux. L'un est l'objet, puis nous avons
ce qu'on appelle Rs. Maintenant, qu'est-ce qu'un objet ?
Désormais, l'objet est en fait utilisé pour stocker des données complexes sous forme de paires clé-valeur. D'accord ? Maintenant, pourquoi avons-nous besoin
de stocker des données complexes ? Disons que je suis en train de créer
une application et que, dans mon application, je souhaite suivre un utilisateur. C'est bon. Maintenant, je vais dire « laisser l'utilisateur ». Supposons donc que je
souhaite suivre les utilisateurs H. Supposons que
les utilisateurs H aient 22 ans, et je souhaite également suivre le nom
d'utilisateur ici. D'accord ? Et
disons que le nom est John, disons,
par exemple, d'accord. Maintenant, j'ai deux variables
qui représentent un seul utilisateur. Maintenant, disons que si mon application évolue et que j'ai des centaines
et des milliers d'utilisateurs, que feriez-vous dans
ce cas ? Est-ce que vous créeriez
ces nombreuses variables ? Absolument pas D'accord ? Alors une bonne chose
est de les regrouper. Ces deux propriétés ou
ces deux variables appartiennent donc à un seul utilisateur, n'est-ce pas ? Alors pourquoi ne pas les regrouper et les
stocker sous forme d'objet ? Donc, ce que vous pouvez faire ici, c'est une meilleure approche,
c'est d'avoir une personne, parce qu'au lieu d'une personne, je vais avoir un utilisateur parce que nous
parlons d'utilisateur
ici, d'accord ? Je vais avoir la même
chose ici, ce que je vais faire,
c'est avoir deux endroits bouclés,
quelque chose comme ça Et dans ce cadre, je vais
avoir des paires clé-valeur, qui seront les attributs
de cet utilisateur en particulier. D'accord ? Donc je peux dire
le prénom, d'accord. Il s'appelle John ici. D'accord. Et puis je peux avoir H et H
vaut 22. C'est bon. Maintenant, ce que je peux faire, c'est que
si vous faites défiler la page vers le bas, je peux dire que je peux
accéder à des propriétés individuelles. D'accord ? Je peux dire point utilisateur, et vous pouvez voir le nom et H.
J'ai accès au nom et à H, donc je peux y accéder de cette façon. D'accord ? Une erreur
que j'ai commise ici, j'ai dit que c'était une paire clé-valeur, mais j'ai en fait l'équivalent d' être utilisée là-bas.
Ce n'est pas correct. Donc je vais juste
le remplacer par Colin et vous verrez par
ici, OK, Console. DotLog m'a également manqué. Qu'est-ce que je fais ? Alors maintenant, vous pouvez en
voir 22 imprimés
sur la console, n'est-ce pas ? Point utilisateur H. Vous pouvez également imprimer le nom et y accéder ici. C'est un nom, non ? Si vous souhaitez changer le nom, vous pouvez le remplacer par le point d'utilisateur et vous pouvez le remplacer par Alice, par exemple. D'accord. Ensuite, si vous essayez
d'y accéder à nouveau, vous verrez Alice sous un nouveau nom. Vous pouvez le voir ici, non ? Voici maintenant ce que vous
pouvez faire avec l'objet. Vous pouvez regrouper
les attributs associés. Maintenant, c'est légèrement
différent des langages de programmation tels que Java. En Java, il n'est pas possible de créer
un objet directement. Vous devez d'abord
avoir un cours, non ? Vous définissez donc d'abord une classe
qui agit comme un modèle, puis vous instanciez la classe et vous
créez un objet,
puis vous pouvez
avoir des variables ou membres de
classe au sein de
cette classe particulière Mais ce n'est pas ainsi que cela
fonctionne dans Ja Script. En Javascript, vous pouvez
créer directement des objets comme ceux-ci, et ils peuvent avoir des
paires clé-valeur, ce qui est très pratique. Hein ? Maintenant, voyons ce qui se passe si vous essayez d'imprimer
, donc je vais prendre le contrôle. Et je vais juste essayer d'imprimer
en utilisateur ici. D'accord. Maintenant, si vous
essayez d'imprimer en mode utilisateur, vous verrez que l'
objet est imprimé dans son intégralité. Elle s'appelle Alice, elle a 22 ans. D'accord ? Et vous pouvez même accéder
aux propriétés individuelles. Maintenant, une autre chose que je voudrais souligner
ici, c'est que, comme je l'ai dit, vous pouvez accéder à
des propriétés individuelles comme celle-ci, n'est-ce pas ?
C'est ce que nous avons vu. Maintenant, cette façon d'accéder aux propriétés
individuelles est connue sous le nom de notation par points parce que vous
utilisez un point ici, un point ici,
le symbole, d'accord ? Et vous l'utilisez
avec l'objet, et vous essayez d'
accéder à son attribut. C'est donc ce que vous
essayez de faire, n'est-ce pas ? Et cette syntaxe est simplement connue sous le
nom de notation par points. C'est bon. Il y a donc quelque chose que
vous pouvez garder à l'esprit, n'est-ce pas ? Mais oui, l'essentiel reste que vous pouvez créer des objets
comme celui-ci dans Ja Script Vous pouvez également avoir
plus d'attributs, comme je peux avoir des attributs
comme une ville ici, je peux dire San Francisco.
OK, quelque chose comme ça. D'accord. Et vous pouvez le voir
ici, en cours d'impression. Et je peux
également accéder à la ville en utilisant la notation par points. D'accord ? Il s'agit donc d'
objets en JavaScript. Passons à la
discussion sur les tableaux. Maintenant, des tableaux Wata. Désormais, les tableaux sont un type de référence en JavaScript utilisé pour contenir
plusieurs valeurs Supposons que vous
créez un programme et que
vous souhaitiez stocker
une liste de valeurs, ou plusieurs valeurs, par exemple. Maintenant, si vous êtes prêt à
stocker une liste de fruits, par
exemple, je
prends juste un exemple. Alors, comment le
faites-vous avec les variables ? Vous aurez une
variable, celle des fruits. Et vous allez lui
attribuer une valeur ici, n'est-ce pas ? Si vous souhaitez stocker dix fruits, vous allez créer dix variables. Mais ce n'est pas censé être comme
ça. Ce n'est pas pratique, non ? Gérer dix variables. Au lieu de cela, si vous souhaitez stocker dix valeurs ou
plusieurs valeurs, plus d'une, vous pouvez
créer une seule variable. Vous pouvez appeler cela un tableau. Vous pouvez l'appeler comme vous
voulez, fruit, et il
sera de type array. Donc, ici, je vais utiliser des
crochets ici. Et entre crochets, j'aurai la liste des
valeurs une par une. Donc tout d'abord, disons Apple, je peux avoir oups Je peux manger une banane ici. OK, et je peux avoir, disons, de la fraise OK,
quelque chose comme ça. Donc c'est un tableau
ici, d'accord ? Et je peux dire « console
point log » ici. Je peux dire « fruit ». Et si je l'imprime, vous verrez des pommes, des
bananes, des fraises. D'accord. Et jetons un coup d'
œil au type de fruit. D'accord. Vous verrez qu'il s'
agit d'un objet ici. D'accord ? Alors oui,
voici comment créer et utiliser des
tableaux en JavaScript
15. Typographie statique ou dynamique: Parlons maintenant du langage de programmation à
typage statique et à typage dynamique. Maintenant, nous allons d'abord
parler de typage statique. Alors, qu'est-ce qu'un langage de
programmation à typage statique ? Ainsi, dans ce type de langage de
programmation, vous devez déclarer explicitement le type
de chaque variable. Et une fois que vous avez déclaré
le type de la variable, le type de variable ne peut pas être modifié au cours
de l'exécution du programme. Java en est un très bon exemple
. Donc, si vous avez
programmé en Java, vous le saurez ou même si
vous n'avez pas programmé, je vais juste vous donner un exemple
très simple. Imaginons que vous souhaitiez
enregistrer chacun des utilisateurs. OK ? Donc, à 30 ans, c'est un code Java que
j'essaie d'écrire, d'accord ? Maintenant, ici, vous ne pouvez pas simplement déclarer des variables de cette façon. Vous devez spécifier
le type ici. OK ? Vous allez donc dire entier, chacun étant égal à 30. Maintenant, vous ne pouvez pas assigner de chaîne à cette variable particulière. C'est bon. Ce n'est tout simplement
pas acceptable en Java. OK ? Cela vous
donnera immédiatement une erreur indiquant que « Hey, H a été déclaré comme entier et qu'il
attend un Ainsi, au cours de
l'exécution du programme, vous ne pouvez pas modifier le type. Cela n'est pas autorisé. Même s'il s'agit d'une chaîne
quelconque, d'accord, si vous ajoutez Java
ici comme ça,
ce n'est pas autorisé car il
s'agit toujours d'une chaîne. Voici donc un exemple du
comportement des langages de
programmation typés statiquement Si vous essayez de faire
quelque chose comme ça, ils vous donneront une erreur de
compilation. D'accord ? Maintenant, lorsque vous
parlez de JavaScript,
JavaScript est un langage de programmation
typé dynamiquement Maintenant, qu'est-ce que cela signifie ? Ainsi, en JavaScript,
les variables peuvent changer de type pendant l'
exécution du programme. D'accord ? Maintenant, tout d'abord, reconnaissons
qu'en JavaScript, vous n'avez pas besoin de
déclarer le type de la variable que
vous créez. Donc disons que si j'
ai une variable nommée ma variable et laissez-moi dire, d'
accord, je dirais pour le
moment que je ne
lui ai attribué aucune sorte
de valeur, d'accord ? Je vais donc dire console
point log ici. Je vais dire ma variable, on peut la voir imprimée.
Ce n'est pas défini, non ? Maintenant, si j'utilise le type
d'opérateur, et si j'essaie d'imprimer le
type de cette variable, vous verrez que le type
n'est pas défini. D'accord ? Maintenant, permettez-moi d'attribuer cette variable
particulière. Alors attends une minute. Je vais simplement le dupliquer, o. Maintenant, permettez-moi d'attribuer à cette variable
particulière un entier. OK ? Je vais donc faire défiler la
page vers le bas pour une meilleure visibilité, et disons lui en attribuer une.
Maintenant, le type de cette
variable est un nombre parce qu'elle
contient un nombre, n'est-ce pas ? Le type est donc
devenu un nombre. Maintenant, laissez-moi vous montrer
une autre magie. Si je le change ici, o, et si je le modifie pour en
faire une chaîne, vous verrez que le type
est désormais une chaîne, ce qui signifie qu'il contient maintenant
une séquence de caractères. Et la ficelle peut être n'importe quoi. Il peut s'agir d'une chaîne comme
Jascript ici. OK. Et tu vas voir ça. Et si je duplique cette ligne, permettez-moi de la dupliquer également. OK. Donc, si je m'en
débarrasse, d'accord. Et si je le sauvegarde, vous
verrez Ja Script s'imprimer. OK. Et il
imprimera également le numéro, comme une chose normale. OK ? Vous pouvez donc voir comment
le type de ma variable, qui est une variable que nous
avons créée, change dynamiquement au cours de l' exécution
du programme, n'est-ce pas ? Et c'est une fonctionnalité du
langage dactylographié dynamiquement, n'est-ce pas ? Et le JavaScript est classé comme un langage à typage dynamique Et ceci est un exemple ou une
preuve de son comportement. Maintenant, laissez-moi vous donner un autre exemple au lieu
d'une chaîne et d'un nombre, si j'essaie de lui attribuer un
booléen, disons, Si je l'enregistre, vous verrez que
c'est booléen et que c'est vrai. Maintenant, un point à noter ici est que je ne crée pas de
nouvelles variables. C'est la même variable,
qui a été créée une fois, et elle est réutilisée et lui attribue différents
types de valeurs, n'est-ce pas ? Cela change donc à la volée au cours
de l'exécution. C'est donc du Javascript. Vous devez donc vous rappeler qu'en JavaScript, les variables peuvent changer de type pendant l'exécution du
programme, d'accord ? Et lorsque
vous déclarez une
variable en JavaScript, il n'est pas nécessaire d'en
spécifier le type. Il s'agit donc d'un langage
dactylographié dynamiquement. Maintenant, nous avons utilisé ce
type d'opérateur. C'est avant tout un opérateur. D'accord, nous avons utilisé
ce type de mot-clé, je dirais, plusieurs fois. Et l'utilisation du type
de mot-clé, vous savez, comme on l'utilise pour obtenir le
type d'une variable ici. C'est pour cela que nous
l'utilisons, non ? Une chose que je voudrais
souligner ici, s'agit d'un opérateur. Dans le script Ja, d'accord ?
C'est donc un opérateur. J'ai utilisé ce terme comme si nous utiliserions le type
d'opérateur et tout. Je ne veux pas que
les étudiants soient confus. C'est pourquoi je mentionne
explicitement qu'il s'agit d'un opérateur
en JavaScript, n'est-ce pas ? Et j'espère que cet exemple
montre assez clairement en quoi Ja
Script est un langage de programmation à typage dynamique, et j'espère qu'il est utile
16. Expressions et opérateurs: Il est donc temps de parler de
quelques autres concepts
tels
que les expressions, les littéraux et les opérateurs
en JavaScript Maintenant, que sont les expressions ? Désormais, une expression
est une unité
de code valide qui produit
une valeur unique. Par exemple, ici, si j'écris sur la console, si je dis trois plus trois, j'obtiens un résultat de six. Maintenant, c'est une expression, cause de cette déclaration, elle a produit une valeur unique, n'est-ce pas ? Il s'agit donc d'une expression. Qu'est-ce qu'un littéral ? Un littéral est une valeur fixe que vous
écrivez directement dans le code Donc, ici, trois est
un littéral. D'accord ? Donc, quand je dis que
A est égal à 30, par
exemple, 30
ici est un littéral, et tout cela est
une expression, n'est-ce pas ? Parce que c'est une
question de mission ici. D'accord ? Donc, ce qui se passe
ici, c'est que la valeur sur le côté droit est
assignée à la variable
sur le côté gauche. D'accord ? Voilà
ce qu'est un littéral Maintenant, il existe plusieurs
types de littéraux. Par exemple, il y a
quelque chose qui s'appelle comme je peux le dire, il y a quelque chose qui s'appelle comme si
je zoomais ici. Il existe un littéral numérique, s'agit
donc d'un littéral numérique Il existe un littéral basé sur une chaîne, donc je peux dire
JavaScript ici C'est une ficelle ici, non ? Vous pouvez même avoir des littéraux
booléens. D'accord ? Je peux donc dire que c'est vrai ici. Il s'
agit d'un littéral booléen D'accord. Les littéraux peuvent donc
être de plusieurs types, littéral numérique, littéral, littéral booléen, et cela
dépend du type de valeur que vous ajoutez
dans le code, d' accord ? Maintenant, je l'ajoute
dans la console, mais en fait, vous
l'utiliseriez dans le code. Donc, si vous dites que A
est égal à vrai, alors vrai ici est
un littéral booléen A. J'espère que cela a
du sens, non ? C'est donc ce qu'est un littéral. Maintenant, nous sommes clairs
sur l'expression, l'expression est tout ce qui est
évalué à une valeur unique Ainsi, par exemple, si vous
effectuez une sorte de calcul
arithmétique ou si vous initialisez quelque chose, toute sorte de calcul ou d' initialisation qui vous
donne une valeur, c' est ce
qu'est une expression Maintenant, que sont les opérateurs ? Désormais, les opérateurs en JavaScript sont des symboles qui effectueraient
des opérations sur les opérations. D'accord. Donc, quelques
terminologies ici. En plus, il y a un opérateur
ici, d'accord ? La division est un opérateur,
moins un opérateur. La multiplication, qui
est représentée de cette façon par un astérisque,
est également un opérateur Ce sont donc tous des
opérateurs que nous utilisons également dans la
vie réelle pour effectuer des additions, des
abstractions, des divisions et des
multiplications, n'est-ce pas ? Ce sont donc également des opérateurs dans des langages
de programmation
tels que JavaScript. Maintenant, chaque fois que
vous voulez utiliser ces opérateurs, vous devez dire
trois plus trois, n' est-ce pas ? Ou vous pourriez utiliser
une variable, n'est-ce pas ? Vous pouvez donc dire A plus B, où A et B ont respectivement des
valeurs. D'accord. Donc, ici, ce qui se passe c'est que vous utilisez
cet opérateur, donc votre avantage est l'opérateur. Mais ces deux valeurs sur lesquelles l'opération est
effectuée sont appelées Opernt. OK, je répète ici. Voici donc un opérateur. C'est un symbole. Il s' agit du type d'
opération que vous souhaitez effectuer. Vous voulez ajouter
deux choses, n'est-ce pas ? Maintenant, les deux éléments que
vous ajoutez trois ici, trois, et
ici, A et B, sont des impressions
car l'opération d'addition est effectuée
sur ces deux valeurs J'espère que cela a du
sens. C'est bon. Donc ici, si vous voyez que trois
plus trois en produisent six. Trois et trois sont donc des impressions
et le plus un opérateur. Hein ? C'est donc
ce que cela dit. Les opérateurs en JavaScript sont des symboles qui exécutent des opérations. Quelle est l'opération
en cours ? Ajout. Il effectue
l'opération sur les opérnes. Quels sont les opérnes ? Trois
ici dans ce cas, et A et B dans ce cas, non ? Et ce sont des symboles, dit-on. C'est donc un symbole plus une division
moins une multiplication. Ce sont tous des symboles, non ? Maintenant, c'est ce que sont
les opérateurs, n'est-ce pas ? Et selon
le langage de programmation
que vous apprenez, les opérateurs seront
classifiés. Il existe donc différents types d'
opérateurs en JavaScript. D'accord ? Le premier type est celui des opérateurs
arithmétiques Maintenant, bien sûr, opérateur, les opérateurs sont
essentiellement utilisés pour effectuer des
calculs arithmétiques, n'est-ce pas ? Comme l'addition, la soustraction,
la multiplication, la division, vous avez un module,
vous avez un incrément, une Ce sont tous des
opérateurs arithmétiques, d'accord ? Opérateurs d'assignation, d'accord ? Les opérateurs d'assignation sont donc égaux à. Si vous assignez quelque chose,
vous effectuez une assignation d'
addition,
une assignation soustraction, une assignation multiplication ou une assignation basée sur des
divisions Maintenant, après
les opérateurs d'assignation, viennent les opérateurs de comparaison, n'est-ce pas ? Maintenant, que sont les opérateurs de
comparaison ? Les opérateurs de comparaison,
comme leur nom l'indique, sont utilisés pour
comparer deux choses, n'est-ce pas ? Ou comparez les opérnes. Vous avez donc l'égalité,
l'égalité stricte, inégalité,
puis l'inégalité stricte,
supérieure à inférieure , supérieure à égale,
inférieure à égale. D'accord ? Ce sont les quelques opérateurs de
comparaison qui existent, n'est-ce pas ? Opérateurs logiques. Maintenant, ils sont utilisés pour
effectuer des opérations logiques, et/ou des nœuds, n'est-ce pas Vous avez des opérateurs uniaires, à
savoir l'incrémentation, le type de
décrémentation d'un nœud
logique, etc. Et puis vous avez les opérateurs
ternaires, o, qui ont ce
type de syntaxe D'accord ? Donc, si vous venez d' un autre
langage de programmation comme Java, vous savez
ce qu'est un opérateur ternaire, et vous en avez
un similaire dans Ja Script Mais si vous ne
connaissez aucun autre langage de programmation,
c'est tout à fait normal. Nous allons couvrir tout
cela. C'est bon. Maintenant, il s'agit de la
classification, c'est vrai, et c'est ce qu'était le concept d'expression, de littéral
et d'opérateurs J'espère donc que vous avez pu me
suivre jusqu'ici, et j'espère que cela vous a été utile.
17. Opérateurs arithmétiques: Il est donc temps de passer en revue les opérateurs arithmétiques
en JavaScript Il s'agit donc d'une liste d' opérateurs classés en
tant qu'opérateurs arithmétiques Bien sûr, vous devez
connaître bon nombre
d' entre eux : gradation, soustraction,
multiplication, division Comme si nous l'avions également utilisé
dans notre vie réelle. Je vais donc coller un exemple ici
, d'accord, qui nous donnera une
idée de la façon dont l'addition, soustraction, la multiplication et la division peuvent
donner le résultat Donc, si je garde ça, tu verras ici. OK, permettez-moi de faire un petit
zoom arrière. D'accord, vous pouvez donc voir
le résultat correctement. Vous pouvez donc voir que le résultat de l'addition est la soustraction sept, la multiplication 24 et
la division cinq. OK ? Maintenant, si je change cela comme
suit, bien sûr, c'est clair,
résultat de l'addition, cinq plus trois. OK, dix moins trois,
ça donne sept. OK ? Si je change ce paramètre à 13, vous verrez le résultat devenir négatif. C'
est donc également possible. OK ? Si vous faites
défiler la page vers le bas, résultat de la
multiplication
est simple, d'
accord, ce sera un
nombre positif à moins que vous n'essayiez de multiplier par zéro, le résultat
serait zéro. OK ? Si vous faites
défiler le résultat de la division vers le bas, vous obtenez un
chiffre ici, d'accord ? B 20 est divisible par quatre. Maintenant, si je change cela à sept, disons que le résultat
de la division ici est en
décimales. C'est bon. Donc, s'il ne s'agit pas d'un nombre entier, vous obtiendrez un résultat décimal la
suite de la
division. C'est bon. Maintenant, il s'agit de multiplication, de
soustraction, d'addition. Ce sont les opérations
arithmétiques standard que nous effectuons également dans notre vie de tous les
jours. Qu'est-ce que le module ? Donc, si vous utilisez un langage de
programmation comme Java, vous devez connaître le modulus Mais juste au cas où vous
ne sauriez pas ce qu'est le module, je vais juste vous faire une démonstration, d'accord, donc je vais avoir le module ici
. OK. Et l'opérateur de module
est représenté à
l'aide d'un
symbole de pourcentage ici OK. Et ici, je vais
écrire le module OK, quelque chose comme
ça. Voyons maintenant quel est
le module, d'accord ? Donc Modulus est ici et je vais imprimer la
sortie sous forme de résultat du module Maintenant, au lieu de la division, je vais
changer cela en pourcentage. D'accord, parce que
nous utilisons l'
opérateur de module ici arrive aussi que certaines personnes Il arrive aussi que certaines personnes le
prononcent comme modulus modulo, o Il existe différentes
manières de le dire Vous pouvez donc voir que le
résultat du module est nul en ce moment. OK ? Donc, le module vous
donnera le reste après avoir
effectué la division C'est la division qui le fait, elle divise
et vous donne le résultat. Mais le module effectuera la division et vous donnera le reste. C'
est ce qu'il demande. Disons donc que si vous dites que 20 est
clairement divisible par quatre, le résultat sera nul Il est également divisible par cinq, donc la sortie sera
nulle, vous pouvez le voir Mais avec six, vous obtiendrez un résultat
de deux, d'accord ? Parce que 18 est divisible
par six, non ? Six trois font 18,
puis deux c'est le reste. Par conséquent, vous aurez
le reste , deux ici. OK ? Si vous essayez de le
diviser par sept, vous devriez obtenir six
en sortie. Vous pouvez voir six parce que 14 est
divisible par 772 14, n'est-ce pas ? Et puis six c'est le
reste, non ? Donc, six est ce que vous
obtenez en sortie. Donc, en gros, ce que fait
Modulus, c'est qu'il
vous donne le reste après avoir effectué la
division. C'est bon. Maintenant, vous me demanderiez pourquoi vous voudriez un
tel opérateur. exemple, pourquoi vous voulez un reste après avoir effectué le di Okay, il existe plusieurs cas d'utilisation scénarios ou exigences
dans lesquels vous souhaitez effectuer ou obtenir le
reste du résultat. Un exemple que je peux vous donner ici est l'identification du nombre
pair et impair. OK ? Supposons donc que vous
écriviez du code ou un programme dans lequel vous
souhaitez identifier si le
nombre donné est pair ou impair. Ce que vous feriez normalement,
c'est utiliser
cet opérateur de reste ici
, modulus, d'accord ? Donc sept modulo et
tu le feras avec deux. OK. Vous obtiendrez donc la sortie en une seule fois. Il s'
agit donc d'un nombre impair. OK ? Six modulo deux, vous obtiendrez zéro pour
le reste OK. Donc, cela signifie que six est un nombre pair. OK ? Ainsi, vous
pouvez utiliser modulo et obtenir le résultat Il s'agit donc de modulo. Vous avez aussi quelque chose
appelé incrément, d'accord ? Je vais donc m'en débarrasser. OK ? C'est
incorrect maintenant. OK. Maintenant, je vais vous montrer ce que l'
on appelle incrément. Maintenant, l'opérateur d'incrémentation est utilisé ou représenté
comme ceci, plus plus OK ? Alors laissez-moi faire défiler la page vers le bas. Et disons que si vous
avez une valeur, disons que j'ai une variable X
égale à cinq, d'accord ? Et je peux dire journal des
points sur la console ici, je peux imprimer la sortie
de X, ou la valeur de X. Vous verrez cinq comme sortie. OK ? Maintenant, permettez-moi également de le
faire venir ici. OK ? Je vais comprendre cela et je peux le
dire sous forme de résultat incrémenté. OK ? Maintenant, cela
n'est pas encore incrémenté. Vous en attribuez
cinq et vous obtenez cinq en sortie OK ? Mais ce que vous pouvez
faire, c'est augmenter la valeur de
disons si vous
voulez augmenter la
valeur de X d'un. Il existe donc deux
approches : vous pouvez soit dire que X est égal à X plus un. OK ? C'est faisable.
Si vous l'enregistrez, vous obtiendrez un résultat de six, d'accord ? Mais il existe une autre méthode qui vous permet d'utiliser
simplement
cet
opérateur d' incrément et d'
obtenir le même résultat de
manière abrégée Il s'agit donc d'une version abrégée de cette déclaration ici. Vous dites que X est
égal à X plus un, mais en fait, vous
augmentez simplement la valeur de X. Alors pourquoi ne pas le faire de
cette façon ? C'est bon. Et vous pouvez l'incrémenter
autant de fois que vous le souhaitez. Je peux donc l'incrémenter encore une fois, et vous verrez le résultat
comme sept. C'est bon. Voici donc ce qu'est
l'opérateur d'incrémentation. Il s'agit d'une version abrégée de l'
incrémentation de la
valeur accord ? C'est une
question d'incrémentation, alors vous avez ce qu'
on appelle la décrémentation Maintenant, la décrémentation fonctionne également
de la même manière, d'accord ? Alors voilà, si je me permets de
simplement copier ceci. OK. Donc, au lieu de X, je vais
prendre un exemple de Y ici. OK ? Et laissez-moi vous en donner la version
longue. OK ? Donc, ce que je ferais, c'est m'en débarrasser
et je dirais que Y est égal à Y moins un. OK ? Donc ce n'est pas une version
abrégée, d' Et ici, je dirais un résultat
décrémenté. OK, et j'imprime la
valeur sous forme de Y. D'accord. Maintenant, si je sauvegarde ceci, vous verrez que le résultat décrémenté
est quatre, n'est-ce Maintenant, je peux utiliser l'opérateur de
décrémentation ici. OK, et je peux dire
ici, y moins moins. Cela me donnera le même résultat. Je peux le faire deux fois ou
autant de fois que je veux, d'accord. Donc, essentiellement, c'est similaire
à l'opérateur d'incrémentation, d'accord, mais il est utilisé pour décrémenter la valeur.
C'est bon. Maintenant, l'opérateur d'incrémentation
est utilisé pour incrémenter la valeur de
manière abrégée, comme nous l'avons vu, et
l'opérateur de décrémentation est utilisé pour décrémenter la valeur de manière abrégée,
comme la valeur de
manière abrégée, comme nous l'avons vu,
et
l'opérateur de décrémentation est utilisé pour
décrémenter la valeur de manière abrégée,
comme nous le voyons ici.
C'est bon. Ce sont donc les opérateurs
arithmétiques qui existent en JavaScript. C'est bon. J'espère que c'est clair, et que tout
cela est important, vous comprenez. Les autres opérateurs
sont donc simples, mais je dirais qu'il est important que vous
compreniez comment cela fonctionne. Et je
vous recommande également d'essayer quelques exemples dans la console du
navigateur. Vous pouvez saisir directement. Vous n'avez pas besoin de code Visual
Studio pour cela. Vous pouvez donc taper
directement ici et voir comment cet opérateur se comporte avec différents
ensembles de valeurs OK ? J'espère donc que cela vous sera utile et que vous avez
pu suivre.
18. Opérateurs de mission: Ce sont les opérateurs
d'assignation que nous avons dans Ja Script, et commençons à
parler de chacun d'entre eux. Ce premier
est donc quelque chose que nous avons vu
plusieurs fois jusqu'à présent. Il est utilisé pour
attribuer la valeur
du côté droit à la variable du côté
gauche. J'ai maintenant ajouté un exemple
très simple illustrant en quoi consiste
cette mission D'accord, cela devrait être très facile et pas du tout difficile à comprendre
pour vous. D'accord ? J'assigne donc simplement une valeur de cinq à
cette variable A, et nous
imprimons simplement cette valeur accord ? Ensuite, nous avons
une mission supplémentaire. D'accord ? Cela permet donc d'
effectuer également l' ajout en
même temps que l'assignation. Permettez-moi donc de vous
en donner un exemple. Je vais donc ajouter du code ici. Vous pouvez voir l'
assignation supplémentaire ici dans la pratique. J'ai créé une nouvelle
variable, appelée B. Et ce que je fais ici,
c'est que je veux en ajouter trois à B. Donc, une façon est de faire
quelque chose comme ça. D'accord ? Alors laissez-moi d'abord
vous montrer ceci. D'accord. Et je vais faire un commentaire à ce sujet. Maintenant, si je sauvegarde ceci, vous
verrez le résultat sous la forme 13. Il a été initialisé à dix, mais la sortie est
maintenant 13. C'est bon. Maintenant, si je commente ceci,
et si je le décommente,
cela revient à écrire ceci.
Le résultat serait le même. Donc, cela
équivaut à B
égal à B plus trois. Hein ? Il ajoute donc d'abord
trois à B, puis il affecte
la valeur totale ou le résultat à la variable
B. D'accord ? Ensuite, nous l'
imprimons pour voir le résultat. C'est ainsi que l'addition et l'
assignation fonctionnent ensemble. Il s'agit essentiellement
d'un raccourci ou d' un moyen pratique,
devrais-je dire, effectuer une addition ou
d'ajouter un nombre dans une variable
particulière Maintenant, comme nous avons une assignation d'
addition, nous avons également une assignation de
soustraction Cela fait essentiellement le même travail que celui d'
Addition Assignment. Disons si nous
avons cette variable 15 et si vous voulez en
soustraire cinq Vous pouvez avoir une attestation
comme celle-ci, d'accord. Je vais enregistrer ceci et vous en
verrez dix ici, d'accord, ou vous pouvez le commenter, et vous verrez le même
résultat ici en utilisant
cette assignation de
soustraction abrégée Il effectue donc essentiellement
la soustraction d'abord de la variable, puis il attribue la valeur
à la variable,
et nous l' imprimons ensuite, n'est-ce pas ? C'est donc ce qu'est l'assignation par
soustraction. Vient ensuite l'
assignation à la multiplication. D'accord. comme une version abrégée de la
multiplication d' une valeur en elle-même C'est aussi une version
similaire,
comme une version abrégée de la
multiplication d'une valeur en elle-même, d'accord ?
Ou pas lui-même. Essentiellement, vous
multipliez une valeur une variable, puis
vous attribuez cette valeur à la même D'accord ? Cela équivaut à, comme vous pouvez le voir ici dans les
commentaires que j'ai écrits, D est égal à D sur deux, donc je vais d'abord le
démontrer. D'accord. Vous verrez que la
réponse est 12. D'accord ? Mais si je le commente
et si je le décommente, vous verrez à
nouveau la sortie sous la forme 12 elle-même. Cela
fait donc qu'il s'étend jusqu'à ce que D soit égal à D en deux. D'accord. Et ce n'est qu'une autre version abrégée de l'exécution de la même chose, mais de manière courte et concise Vous avez ce
qu'on appelle une affectation de division, si vous voyez par ici. D'accord ? Il s'agit d'une méthode
similaire qui vous permet de diviser une valeur ou de diviser une variable ou une valeur d'une
variable par quelque chose, puis d'attribuer le résultat
à la variable elle-même. D'accord ? Donc, si je sauvegarde ceci, vous verrez le résultat comme cinq, d'accord ? Ce sont donc tous les opérateurs
d'assignation qui existent en JavaScript.
19. Opérateurs de comparaison: Il est donc temps de
parler des opérateurs de comparaison en JavaScript et de voir ce que signifie
chaque opérateur. Nous allons donc parcourir la liste et voir quelques exemples. Nous allons donc d'abord parler de
l'opérateur d'égalité. Maintenant, qu'est-ce qu'un opérateur d'égalité ? Bien entendu, l'
opérateur d'égalité compare deux opérnes et renvoie
une sortie Pollan Maintenant, une chose que je
souhaite souligner ici, tous les opérateurs de comparaison vous
donneront un résultat booléen , car ils sont
utilisés pour effectuer des comparaisons, n'est-ce pas ? C'est ce que
dit la catégorie, les opérateurs de comparaison. Donc, que la comparaison
soit vraie ou fausse. C'est ce que sera le résultat. Maintenant, à titre d'exemple, je peux dire « console point log » ici, d'accord ? Et je peux dire que cinq est
égal à cinq ici. Vous pouvez voir que la valeur est vraie. Maintenant, si je le fais avec six, bien
sûr, cela va me
donner une fausse impression. Maintenant, cela peut même
fonctionner avec des variables. Disons donc si nous avons A
et si nous avons B ici, et que P en a six. D'accord ? Et si je
duplique cette ligne, cela peut également fonctionner avec
les variables ici. Je peux donc dire P ici, et cela peut être A. Vous verrez
donc que le
résultat est faux. D'accord ? Mais si je change cela en Pi, bien
sûr,
le résultat sera vrai. D'accord ? Voici comment fonctionne un opérateur de
comparaison. Maintenant, que se passe-t-il si vous avez
une chaîne en comparaison ? Disons que si je fais le journal des points de
la console, cinq est égal à six. Si je le convertit en chaîne, disons que ce n'est pas un entier, mais en fait c'
est une chaîne, n'est-ce pas ? Maintenant, laissez-moi également vous montrer
que c'est aussi une chaîne. Donc, connectez-vous à la console ici. Je vais
utiliser le type d'elle. Vous pouvez voir que c'est
une chaîne, n'est-ce pas ? Donc, si je fais une
comparaison de cette façon, vous verrez que j'ai des
chutes ici. OK. Maintenant, que se passe-t-il si je le convertit essentiellement
en cinq comme ceci ? Cela va me donner la vérité. D'accord ? Je vais juste déplacer
ça jusqu'à la fin. C'est donc plus facile à
voir sur la console. Le résultat est donc vrai
ici. Maintenant, pourquoi est-ce vrai ? Parce qu'ici, vous
utilisez le chiffre Oups. Ici, vous
utilisez un nombre, et ici c'est une
chaîne. Pourquoi est-ce vrai ? Parce que ce qui se passe
est interne, il y a une conversion d'une
chaîne en un nombre, et c'est ainsi que cela
est géré.
D'accord ? Ce serait donc
le résultat, non ? J'espère que cela a du sens. C'est donc une question d'égalité, d'accord. Vous avez maintenant ce
qu'on appelle une égalité stricte. Maintenant, c'est différent des autres
langages de programmation comme Java. Si vous venez
après avoir appris Java, il y a quelque
chose de nouveau pour vous. D'accord ? Donc, nous avons dit que si Phi est égal à
une version chaîne de cinq,
cela signifie que l'impression est vraie, n'est-ce pas ? Maintenant, que se passe-t-il si j'utilise un opérateur d'
égalité strict, ce qui signifie égal à
trois fois ? D'accord ? Maintenant, si je sauvegarde ceci, vous allez obtenir une
fausse sortie SE. OK. Donc, ce qui se passe, c'
est que l'égalité stricte
fonctionne, c'est qu'elle
vérifiera également qu'elle comparera la valeur et qu'elle vérifiera également le type, ce qui signifie qu'aucune
conversion de type n'est effectuée. Et si les valeurs sont
de types différents, la comparaison renverra
immédiatement la valeur false. D'accord ? Parce que
même si les valeurs sont identiques, le type est différent. Cela va donc
échouer. D'accord ? Maintenant, si c'est six,
pour une raison ou une autre, cela vous donnera également un faux. Pour que cela soit vrai, si c'
est le cas, pour que cela soit vrai, cela doit être du même type, et c'est à ce moment-là que vous devenez
vrai ici. C'est bon. Maintenant, gardez ceci à l'esprit, accord, cette égalité, cette égalité
stricte comme ici, la conversion implicite ici
ou la conversion automatique
ici d'une chaîne en un nombre. OK, gardez ces points à
l'esprit, car lorsque vous écrivez de
vrais programmes Jascript,
du code de script Ja,
vous utiliserez
beaucoup
ces opérateurs de comparaison dans les conditions,
et c'est là que cela
importe, n'est-ce pas
? code de script Ja, vous utiliserez
beaucoup
ces opérateurs de comparaison dans les conditions, et c'est là que cela
importe, n'est-ce pas Il s'agit donc d'une stricte égalité. N'oubliez pas que l'égalité stricte
est stricte. D'accord ? Le nom indique que c'est strict et il vérifie le type
ainsi que la valeur. Donc, si le type est le même
ici parce que les deux sont des chaînes, si je change la valeur, je
vois que c'est faux maintenant. D'accord ? J'espère donc que cela
a du sens. OK, qu'est-ce que l'égalité stricte ? Et l'égalité
n'est pas stricte, d'accord ? Parce que son nom n'est pas
strict. Donc, il va réellement
en voir la valeur. Et si les valeurs sont de
type différent, elles seront converties. Je vais faire une conversion, puis
le résultat s'affichera, n'est-ce pas ? Voilà donc la
différence entre deux. Ensuite, il y a l'inégalité. Aujourd'hui, l'inégalité est
assez simple. OK. Je vais donc
vous donner un exemple. D'accord ? Je ne créerai pas de variables, mais je vais tout de suite
vous donner un exemple ici. Cinq est donc égal à trois ? Quel en
serait le résultat, selon vous ? Cinq est égal à trois. La sortie serait
fausse, bien sûr, vous voyez des chutes ici.
Cinq n'est pas égal à trois. Pas égal à trois,
pas trois. Je suis désolée Donc, si vous convertissez cela
en inégalité ici, o et si vous l'enregistrez, vous obtiendrez deux en sortie car c'est juste l'
inverse de l'égalité. D'accord ? Nous
vérifions donc ici si les deux valeurs ne sont pas
égales. S'ils sont égaux les
uns aux autres, cela
va entraîner des
chutes ici. C'est vrai. J'espère que cela a
du sens maintenant, d'accord ? Il s'agit donc d'une inégalité. Il y a alors ce que l'
on appelle l'inégalité stricte. Maintenant, qu'est-ce que l'inégalité stricte ? Bien entendu, nous avons vu une
version stricte de l'égalité. Il s'agit d'une
aversion stricte pour l'inégalité. C'est simple. OK. Donc voilà, si vous voyez, d'accord, laissez-moi
dupliquer cette ligne, d'accord ? Donc, si je duplique cette ligne, maintenant, cela va nous
donner une fausse, bien sûr. OK. Mais s'il s'agit d'une chaîne ,
alors aussi, cela va nous
donner un faux. D'accord ? Parce que les deux ne sont pas
égaux. D'accord ? Maintenant, que se passera-t-il si je à l'
inégalité stricte, d'accord ? Si je fais quelque chose comme ça, vous verrez que cela redeviendra
vrai. C'est bon. Maintenant, bien sûr, alors que nous agissions de
la manière normale en matière d'inégalité,
sans utiliser le strict. OK. Donc, ici, ce qui se
passait, c'est que seule la valeur était
comparée et non le type. Mais ici, le type est
également comparé. La valeur est donc la même, mais
le type n'est pas égal, c'est pourquoi elle
renvoie vrai. C'est ainsi que cela fonctionne. J'espère que
cela a du sens, non ? Et si je
le duplique ici, vous allez voir si je remplace par cinq, bien sûr. OK, tu verras la
vérité à nouveau, d'accord ? Mais si c'est cinq maintenant, d'accord, si je le remplace par cinq, quelque chose comme ça, vous
verrez des chutes ici. OK. C'est donc une
inégalité stricte, d'accord ? C'est la version stricte, et c'est une version souple. Donc, normalement, sur Internet, vous verrez différents termes
utilisés pour désigner « perte d'égalité »,
« perte inégalité », « égalité
stricte », inégalité
stricte ». D'accord ? Alors vous avez
plus que moins. D'accord ? Donc, plus qu'une leçon
, c'est assez simple. Laissez-moi copier ces houblons. Permettez-moi de les copier tous les deux. OK. Je vais venir ici et j'ajouterai un Je vais le convertir
en commentaires, d'accord ? Maintenant, jetons un coup d'
œil à ça, d'accord ? Il s'agit donc d'un journal de points de
console assez simple. OK. J'ai cinq
de plus que trois. Est-ce que c'est le cas ? Donc, après comparaison, cet opérateur
supérieur renverra un résultat
booléen Donc cinq est
supérieur à trois, oui. Cela reviendrait donc à vrai dire, non ? Vous pouvez voir la vérité ici. OK. Maintenant, si j' ajoute un plus grand nombre sur
le côté droit. D'accord ? Disons donc que
nous en avons sept. Et si je le sauvegarde,
il retournera des plis car cinq n'est
plus supérieur à sept. C'est supérieur à. Bien sûr, moins que c'est exactement l'
inverse, d'accord ? Et je vais juste en ajouter un
peu plus ici. OK, vous pouvez voir que la
situation est maintenant inversée. La première
condition est donc fausse, puis elle est vraie parce que
sept est supérieur à cinq. Est-ce que trois est supérieur à cinq ? Non Désolé, j'ai trois de
plus que cinq ? Oui, donc ce n'est pas le
cas, non ? C'est donc moins qu'en fait. C'est pourquoi il
donne une fausse sortie SE. C'est bon. J'espère donc que
cela a du sens. Maintenant, ici, c'est une version de supérieur
et inférieur à, d'accord ? Il s'agit donc en fait d'un symbole
égal à un. Je vais également comparer
pour l'égalité. Si vous prenez cet
exemple ici, si vous en avez cinq des deux
côtés. D'accord ? Quel est le résultat
auquel vous pouvez vous attendre ? Vous pouvez voir ici que vous obtenez résultat faux ici. D'accord ? Faux car les deux
sont en fait égaux. Cette condition
ne correspond donc pas. Mais si vous mettez à jour ce paramètre
égal à ici, ou inférieur ou égal à. Cela va redevenir vrai. Tu peux voir. OK. Vous pouvez même vous en servir ici, vous pouvez voir que cela
se vérifie. OK. J'espère donc que cela a du sens quant à la
façon dont cela fonctionne, et j'espère que vous comprenez bien les opérateurs de
comparaison. Gardez donc à l'esprit que les
opérateurs de comparaison renverront une valeur booléenne après avoir effectué la comparaison
des opérants Maintenant, il existe plusieurs opérateurs de
comparaison tels que l'égalité, l'inégalité. Nous en avons une
version plus stricte, qui prend également
en compte le type car la version normale ne prend
pas en
compte le type, n'est-ce Vous avez alors
plus que moins que
supérieur à égal ou
inférieur à égal à. D'accord ? J'espère donc que
cela avait du sens, et j'espère que cela a été utile.
20. Opérateurs logiques: Il est donc temps de commencer à parler des opérateurs
logiques. Maintenant, il existe trois
opérateurs logiques, et c'est ce que nous
allons explorer. Alors, que sont
les opérateurs logiques, tout d'abord ? Les opérateurs logiques sont donc utilisés
pour travailler avec les valeurs de Pollan, qui sont vraies et fausses, et ils vous permettent de combiner ou d'invoquer ces valeurs, Il y en a donc trois. Vous pouvez voir ce qui est logique et qui est représenté à l'aide de ce symbole
particulier. Vous avez une logique ou, ce qui
est représenté de cette façon, rien de
logique,
représenté par
une exclamation C'est bon.
Parlons donc de logique et d'opérateur. Maintenant, qu'est-ce que la logique
et l'opérateur ? Neuf commentaires, j'ai ajouté
quelques points sur la logique La logique
et l'opérateur vérifient donc si les deux conditions sont vraies. OK ? Tout d'abord, cela fonctionne à deux
conditions, c'est ce que vous
devez noter ici. Les deux conditions, ce qui signifie que
cela fonctionne sous deux conditions, et si les deux sont vraies,
alors le résultat est vrai. OK ? Vous pouvez donc voir qu'il renvoie vrai que
si les deux sont vrais. Dans le cas contraire, il renverra la valeur false. OK ? Maintenant, si je dois le
démontrer sous forme d'exemple, je dirais console point
log ici. OK ? Vrai. Et vous pouvez utiliser la logique et
ici et vous pouvez simplement coder en dur les valeurs
booléennes OK. Je peux voir que le résultat est
vrai. OK ? Maintenant, si je duplique cette ligne et si l'une d'entre elles
est fausse ici, dans ce cas, vous verrez la
valeur false en sortie. Donc, pour que cela soit vrai,
les deux doivent être vrais. OK ? Maintenant, l'une ou
l'autre d'entre elles est fausse, le résultat sera ,
genre, faux. OK ? Donc, si je dis faux ici, vous verrez que cela devient faux
parce que les deux sont faux, n'est-ce pas ? Maintenant, si le premier est faux, même si vous
obtiendrez une fausse sortie SA. Nous ne devenons donc vrais que dans un cas où les deux sont vrais. OK ? Maintenant, c'est
très utile si vous voulez évaluer deux
conditions, d'accord ? Maintenant, ces deux valeurs ou ces deux opérants sur lesquels
nous opérons peuvent être n'importe quelle sorte d'expression qui donne
une valeur booléenne OK ? Maintenant, permettez-moi de vous
donner un exemple. Imaginons que vous
créez un programme, et qu'il s'agisse d'un site Web destiné à gérer
un concert. OK ? Imaginez donc que pour vous connecter
au concert, vous deviez avoir à la fois
vos billets et votre identifiant. OK ? Donc, ce que je vais
faire, c'est ici, je vais avoir un exemple
écrit ici. OK. Exemple. OK. Supposons maintenant que nous ayons des tickets comme
l'une des variables booléennes OK. Supposons que sa
valeur initiale soit vraie. OK. Et disons que j'ai une autre
variable qui a un identifiant. Donc, que l'utilisateur
ait un identifiant ou non, et qu'il
ait des tickets ou non, c'est ce
que cela
nous aide à suivre, n'est-ce pas ? Maintenant, je vais dire console
point log ici. OK. Je veux avoir un mandat selon lequel l'utilisateur
doit avoir les deux. Donc, s'il existe un mandat, les deux conditions doivent être vraies ou si les deux conditions doivent exister pour que l'expression
soit valorisée comme vraie, c'est à ce moment-là
que vous utilisez
et opérez ici. Donc je vais dire qu'il a des billets et une pièce d'identité. Et je
vais enregistrer ça. Maintenant, vous allez voir true en sortie
C ici
parce que les deux sont vrais. Maintenant, si l'une
d'entre elles est fausse, alors permettez-moi de mettre à jour son identifiant avec
celui de falls over here. OK ? Je dirais qu'il
n'a pas d'identifiant, disons, et j'
imprimerai à nouveau le résultat. Vous verrez donc des chutes par ici. OK ? Voici donc comment cela fonctionne. Maintenant, nous
utilisons des variables, d'accord ? Maintenant, cela peut être n'importe quelle sorte
d'expression ici. OK ? Il peut s'agir de n'importe quel type d'
expression qui correspond, bien entendu, à une valeur
de A
Pollan. OK ? Si je dois vous donner
un exemple, d'accord, disons qu'au lieu d'
avoir des billets, disons que j'en ai cinq,
plus de trois. OK. Est-ce que cinq est
supérieur à trois ? Oui OK. Et
disons que si j'ai un autre exemple ici ou une autre expression ici, cinq est supérieur à six. Est-ce que cinq est supérieur à
six ? Absolument pas. OK ? Cela va donc
donner une valeur fausse en sortie car cette deuxième expression renvoie
une valeur fausse. Et si je sauvegarde ceci, vous
verrez une sortie false. OK ? Cette méthode est donc
logique et peut être utilisée dans des expressions et des
prises de décision complexes. C'est bon. Maintenant, lorsque vous commencerez à
écrire des programmes complexes, vous
utiliserez bien sûr beaucoup ces opérateurs
logiques. OK ? Il est donc préférable de
comprendre le concept. Logique et nous avons terminé, ce qui est logique et
pour résumer la logique nous vérifierons si
les deux conditions sont vraies, cela fonctionne sur deux
valeurs booléennes au fur et à mesure, et ces valeurs booléennes peuvent également être dérivées des
expressions OK ? Maintenant, il s'
agit d'une question de logique. Parlons maintenant de logique.
Maintenant, qu'est-ce qui est logique ou pas ? Je vais ajouter quelques commentaires
ici en tant que définition de la logique ou donc de l'
opérateur ou de l'opérateur logique, accord, le logique
ou l'opérateur dit qu'il vérifiera si au moins une
condition est vraie, d'accord ? Donc, l'opéran sur lequel
il travaille doit
au moins être vrai
pour qu'il redevienne vrai Donc, j'ai été très strict, d'accord, et j'ai dit que les deux
devraient être vrais. Mais je suis un peu indulgent. Il dit qu'au moins une
condition doit être vraie, et je suis d'accord avec ça, d'accord ? Il renvoie donc vrai si au moins l'une des
conditions est vraie. Si les deux sont faux, la
valeur renvoyée est fausse. C'est bon. Maintenant, pour le démontrer, je vais copier cet
exemple ici, cette saisie que j'ai faite. OK, et nous remplacerons
tout par ou par ici. Maintenant, il s'agit essentiellement de
deux symboles en forme de pipe. Vous pouvez voir ces symboles en forme de pipe. Je vais ajouter ceci Oups
OK, et c'est fait. Maintenant, cette première chose sera vraie. Cela sera également vrai pour le cadeau. Cela sera également vrai pour le cadeau. Maintenant, ces trois affirmations
vont nous donner la vérité parce qu' au moins un des points
est vrai ici dans ce Et cela va nous
donner du faux parce que les deux sont faux. OK ? Donc, si je sauvegarde
ceci, vous verrez, vrai, vrai, vrai, puis
cela nous donne du faux. Maintenant, comment cela peut-il être utilisé ? Imaginez donc que vous êtes en train de
créer un programme qui
vous aide à décider si vous devez jouer à l'extérieur ou non. OK ? Et disons que
vous irez jouer dehors s'il fait beau ou si vous avez un imperméable.
Un exemple très simple. OK ? Maintenant, nous utilisons ou opérons
ici
parce que cette déclaration indique que je peux jouer dehors s'il fait beau
ou si j'
ai un imperméable, n'est-ce pas ? Cela ne veut pas dire si le temps est ensoleillé
et si j'ai un imperméable S'il est indiqué et, alors seulement,
nous utiliserons un opérateur. Mais pour le moment, c'est l'un
ou l'autre. Donc, bien entendu, le choix
est l'opérateur logique. Donc je dois dire qu'il fait beau
à Let ici. OK. Est-ce qu'il fait beau dehors ? Je vais dire faux,
et désolé, il n'y a pas d'imperméable OK. Alors je vais
dire « vrai » ici, quelque chose comme ça. OK. Et je vais faire un journal des points sur
la console ici. OK. Et je dirais qu'il
fait beau et qu'il fait aussi beau qu'un imperméable OK, c'est assez simple. Quel en
serait le résultat ? Le résultat doit être vrai. Je peux aller jouer parce que
la condition était soit qu'il fasse beau,
soit que j'aie besoin d'
un imperméable Le résultat est donc vrai. OK, je peux voir si je change la valeur
de has raincoat, disons, par celle de false Maintenant, je n'en ai plus. Il
n'y a pas d'imperméable et il
ne fait même pas beau Dans ce cas, la valeur renvoyée
sera fausse. OK ? Donc, en cas de
prise de décision, cela va être beaucoup
utilisé, non ? J'espère que c'est amusant. Le troisième
opérateur logique que nous
avons et dont nous devrions
parler est le néant logique Maintenant,
l'opérateur logique zéro inverse essentiellement la valeur d'un booléen par un booléen Donc, si c'est vrai, cela
le changera en faux, et si c'est faux, cela le
changera en vrai, comme le dit la déclaration. OK ? Laissez-nous le tester. Donc, si je dis console
point log, ici. OK. Maintenant, si je dis
vrai ici, cela va s'imprimer en vrai, comme vous pouvez le voir, n'est-ce pas ? Il sera imprimé en vrai. Mais disons que je veux imprimer je veux inverser cela
en utilisant un opérateur logique, donc ça va dire
faux ici, d'accord ? Une autre question est de savoir pourquoi
voudriez-vous utiliser cet opérateur no ? Quels sont les cas d'utilisation ? Je vais vous
donner un exemple, non ? Il existe de nombreux scénarios dans lesquels cet opérateur peut être utilisé. Supposons donc que vous vouliez rester à
l'intérieur s'il ne pleut pas, ou que vous vouliez
sortir s'il pleut Disons qu'il y
a
une décision que vous voulez
prendre, d'accord ? Et je vais laisser pleuvoir parce que tout
dépend de la pluie, non ? C'est ma décision. Je vais donc
créer une variable. Je vais l'attribuer à une valeur booléenne. OK ? Et je dirais qu'il
faut rester à l'intérieur. OK, quelque chose comme ça. Maintenant, cela ne vaudrait
pas la peine de pleuvoir. Quelque chose
comme ça. OK. Et je peux avoir un journal des points sur la console, et je devrais rester à l'intérieur. OK ? Alors, est-ce qu'il pleut ? Non, ce n'est pas parce que
cette valeur est fausse. Alors, dois-je rester à l'intérieur ? Oui, tu devrais. Tu peux voir. Maintenant, s'il pleut ici. Devrais-tu rester à l'intérieur ? Tu peux voir. C'est
donc ainsi que booléen n'est
pas un nœud logique, devrais-je L'opérateur de nœud logique
fonctionne, c'est vrai, et il fonctionne
d'une manière qui vous aide à inverser
une condition particulière Ceci est également beaucoup utilisé
dans la prise de décision, et lorsque vous commencerez à
écrire du code Ja Script, vous en verrez plusieurs cas d'
utilisation. D'accord ? Maintenant, il s'
agit de l'opérateur du nœud Je tiens également à souligner
un autre concept ici. Maintenant, le concept concerne les expressions
booléennes. Que sont donc les expressions booléennes ? Une expression booléenne est
une expression dont l'évaluation correspond
à une valeur booléenne OK ? Donc, si vous
faites défiler la page vers le haut. OK, c'est une expression
booléenne. OK. Vous l'avez sous forme d'expression booléenne, d'expression
booléenne Tout cela est une
expression booléenne car elle est à une seule
valeur
booléenne Ce sont donc toutes des
expressions booléennes
construites à l'aide
d'opérateurs logiques et/ou non C'est bon. J'espère donc que vous avez
pu me suivre, et j'espère que cela vous a été utile.
21. Opérateurs ternaires: Il est donc temps de
commencer à parler d'opérateur
ternaire Maintenant, qu'est-ce qu'un opérateur ternaire ? Vous pouvez donc voir ici l'opérateur
conditionnel. C'est donc une façon très abrégée de prendre des décisions rapides ou choisir entre
deux valeurs, Et ici, vous pouvez voir que
c'est sa syntaxe. Alors laissez-moi vous le démontrer à l'aide d'un exemple, d'accord ? Disons que j'ai une variable. Disons,
appelons-le X, d'accord. X a donc une valeur de dix. OK ? Et disons que j'ai
une expression Pullen. OK ? Je peux donc parler de
pollen ici et ne pas créer
une expression de Pollan J'aurai tout de suite
un message ici. OK ? Donc disons que si X est supérieur à
cinq, je veux imprimer,
X est supérieur à cinq, donc,
je veux imprimer X n'est pas
supérieur à cinq, n'est-ce pas ? Donc ce que je ferais, c'est que j'aurais un
problème ici, d'accord ? Nous suivrons la même syntaxe.
OK ? Je vais le copier. OK, quel est le problème ? La condition est X
supérieure à cinq. C'est ce que nous sommes
en train de vérifier, n'est-ce pas ? Donc, si X est supérieur à cinq, cette partie indique que si cette
condition est vraie, elle sera évaluée
ou utilisée. Si cette condition est fausse, sera traitée. Ou cela sera utilisé. OK ? Peu importe ce
qu'il y a là-bas. OK ? La condition est donc quelque chose que nous
avons ajouté ici. La condition est ajoutée.
Qu'est-ce que Value One ? Si X est supérieur à cinq, je voulais imprimer un message. X est supérieur à
cinq, d'accord pour le moment. Et si c'est faux, je dirais que X est inférieur à
cinq, quelque chose comme ça. Oups. Donc oui. OK. Et ce que je
vais faire, c'est dire journal des points de la
console et j' imprimerai le
message ici. OK. À votre avis, quel en
serait le résultat ? X est dix, donc
X doit être supérieur à cinq. Si je sauvegarde ceci, vous verrez que
X est supérieur à cinq. OK ? Maintenant, si la valeur de
X est réduite à quatre, vous verrez que X est inférieur à cinq. OK ? Nous prenons donc des
décisions ici, d'accord ? Nous sommes Altstspace ici. Nous prenons des décisions
ici avec l'aide de l'opérateur ternaire. OK. Maintenant, dans
toute cette expression, je n'ai pas besoin que cela soit enfermé dans une
paire d'accolades rondes Vous pouvez donc voir
ici que c'est également très bien. Mais c'est normalement
une bonne pratique d'avoir à condition que vous écriviez entre parenthèses ou, devrais-je dire,
entre crochets ici OK ? Si vous l'enregistrez, vous verrez qu'il s'agit de la sortie et que la sortie n'est pas
affectée. C'est bon. Ici, au lieu d'une
expression booléenne, vous pouvez même avoir une
valeur booléenne OK. Je peux donc simplement
taper vrai ici et vous pouvez voir que X
est supérieur à cinq. Et si je dis faux ici, vous voyez que X est inférieur à cinq. OK ? Je vais juste faire le set
Control et nous retrouverons
l'expression pollinique que nous avions. OK ? C'est donc ce qu'est un opérateur
ternaire Donc, si la condition est vraie, la
valeur vraie est
renvoyée. C'est une vraie valeur. Et si la condition est fausse, est renvoyée. OK ? Et tout
cela se situe entre un point d'interrogation et deux points. Vous pouvez voir la
syntaxe ici. OK. Donc oui, c'est ce qu'est
un opérateur ternaire Maintenant, permettez-moi de
vous donner un exemple. OK. Écrivons un
programme simple qui vérifiera si la valeur est booléenne ou
non ou, désolé, pas une La valeur O est paire ou non, ou un nombre est pair
ou non. C'est bon. C'est donc là que nous pouvons
utiliser l'opérateur ternaire. Disons que j'ai
ce numéro quatre. OK. Et ce que je
ferais, c'est obtenir des résultats ici.
Maintenant, quel est le résultat ? OK, donc le résultat
aura le reste
après division par deux. OK ? Alors, qu'est-ce qu'un nombre pair ? Un nombre pair est un nombre divisible par deux,
n'est-ce pas ? Je vais donc simplement
dire un chiffre ici. OK ? Le pourcentage deux
est égal à zéro. Et je fais usage
de l'égalité stricte. OK ? Cela devient donc
maintenant un booléen ici. OK ? Je ne vais pas entreposer
le reste ici pour le moment. Je stocke simplement
une valeur booléenne, qui est le résultat
de cette expression OK ? Et 1 seconde. Alors voilà, je peux dire de
laisser EX P venir ici. OK ? Voilà ce que c'est. OK. Et maintenant, ce que je peux faire,
c'est dire que si EXP est vrai, alors vous pouvez donner
la sortie paire, ou vous pouvez donner la sortie
impaire, quelque chose comme ça Et vous pouvez le sauvegarder
et il devrait revenir. D'accord, nous n'imprimons pas le
résultat ici, donc je dois également imprimer le
résultat. Oups, je dois prendre les
choses sur une nouvelle ligne, accord, et je dois
obtenir des résultats Maintenant, la sortie est paire, et si c'est cinq ici, par
exemple, la
sortie sera impaire. OK ? Maintenant, au lieu d'
avoir EXP comme variable, vous pouvez en fait couper toute
cette expression ici et vous pouvez l'
apporter ici D'accord, c'est également faisable.
Je vais m'en débarrasser. OK. Maintenant c'est
faisable. C'est bon. Vous pouvez voir comment cette
sortie fonctionne correctement. OK ? Donc oui, c'est
ce qu'est le programme. Nous sommes en train d'évaluer si le chiffre
est vrai ou non. OK ? La prise de décision est donc une partie
très importante du programme. Vous savez, disons
si vous créez une boutique en ligne
et si vous souhaitez une réduction ne soit applicable qu'à certains membres privilégiés. Vous pouvez donc avoir ce
type de prise de décision. Si le membre est privilégié,
il s'agit d'une valeur de réduction. Si ce n'est pas le cas, il s'
agit d'une valeur de réduction. Tous ces types de
prise de décision constituent donc une grande partie de votre programmation
Jascript, et pas simplement du Jaw Script, de n'
importe quelle programmation OK, la prise de décision
tourne autour de ça, d'accord ? J'espère donc que vous connaissez bien l'opérateur
conditionnel ou l'
opérateur ternaire. Je dois dire qu'il est également connu sous le nom d'
opérateur conditionnel, d'ailleurs, accord, à certains endroits, mais je préfère l'appeler ternaire D'accord ? Maintenant, une dernière
chose dont je voudrais parler ici
à propos du ternaire c'est que vous pouvez même avoir un opérateur
ternaire imbriqué Alors, qu'est-ce qu'un opérateur
ternaire imbriqué, d'accord ? Je vais donc ajouter un
exemple ici. Supposons donc que nous créions
une application et que nous voulions évaluer
l'âge à plusieurs niveaux. OK ? Donc, si l'âge
est inférieur à 13 ans, d'accord, nous disons que la
personne est un enfant. OK ? Si l'âge
est inférieur à 20 ans, accord, alors nous disons que la
personne est adolescente, non. Et si l'âge est inférieur à ce que vous pouvez
dire ou supérieur à 20 ans. D'accord, nous disons qu'il est adulte. OK. Donc ici, en fait, ce ne sera pas moins de 20, mais ce sera 13-20. OK ? Donc, si l'âge est de 13 à 20 ans, c'est un adolescent, et s' il est supérieur à
20 ans, c'est un adulte Comment feriez-vous cela
avec l'aide de l' opérateur
Turnary ?
Laisse-moi te montrer. OK ? Donc, d'abord, je
vais dire que l'âge est égal à, je vais avoir une valeur d'âge. Disons que c'est 16.
OK ? Maintenant, quelle est la syntaxe de l'opérateur
ternaire ? Il s'agit d'une syntaxe. Je vais
chercher la syntaxe, d'accord ? Et je vais donc appeler cela une catégorisation,
enfant, adolescent, adulte OK ? Je dirais donc que la catégorie ici est égale à,
et c'est de la syntaxe. Donc, la première condition est d'
avoir moins de 13 ans, non ? L'âge est donc inférieur à 13 ans, il vaut mieux l'avoir
entre crochets. C'est ce que je vais faire. Si l'âge est inférieur à
13 ans, que disons-nous ? C'est ce que nous appelons ici quand nous étions
enfants. OK. Donc c'est un enfant, non ? Maintenant, je vais juste
combler cette lacune et voici T. D'accord ? Maintenant, qu'est-ce que la valeur deux ? OK ? Valeur deux,
au lieu de la valeur deux, vous pouvez en fait démarrer un autre
opérateur ternaire ici OK. Laissez-moi vous montrer comment faire. Donc, vous pouvez dire qu'il une autre condition
ici, j'ai moins de 20 ans. Donc, une chose est confirmée si vous exécutez
cette partie du code, il n'a pas moins de 13 ans, n'est-ce pas ? Cette partie est confirmée, n'est-ce pas ? Si cette partie est exécutée, il a moins de 13 ans, non ? Donc, ce que vous feriez, c'est
de venir ici, tomber s'il a
plus de 13 ans, vérifier s'
il est inférieur à 20 ans. C'est moins de 20 ?
Si c'est moins de 20, vous dites que c'est un adolescent.
Quelque chose comme ça. Et si ce n'est pas le cas, vous
diriez qu'il est adulte. Compris. Cela
a du sens, laissez-moi voir si je peux apporter
une nouvelle orientation. Cela est donc désormais
lisible en un seul clic. Permettez-moi de vous montrer la
catégorie ici. OK. OK, je vais donc
ajouter la catégorie ici. OK ? Maintenant, il a 16 ans, donc vous pouvez voir que c'est un adolescent. OK. Laisse-moi
fixer l'âge à dix ans. C'est un enfant.
Laisse-moi porter l'âge à 22 ans. C'est un adulte. Comment est-ce que
cela fonctionne ? Nous vérifions donc
d'abord l'âge ici. Si l'âge est inférieur à
13 ans, d'accord ? C'est un enfant. OK ? Et si c'est faux, si l'âge est supérieur à 13 ans, alors nous vérifions si l'âge est inférieur à 20 ans ou supérieur à 20 ans ? OK ? Parce que maintenant cette
condition est terminée, non ? C'est faux. Donc, s'il entre dans
la fourchette des chutes, nous vérifierons s'il a
plus de 20 ans ou moins de 20 ans. S'il a moins de
20 ans, on dit adolescent ,
sinon on
dit qu'il est adulte. C'est ainsi que cela fonctionne. Et
cet exemple ici est un exemple d'opérateur
ternaire imbriqué Vous pouvez également continuer à
nicher ici. Il vous permet également
d'ajouter un opérateur ternaire supplémentaire, et vous pouvez simplement continuer à
le faire correctement Mais ce n'est pas une bonne pratique d'
imbriquer un grand nombre d'opérateurs ternaires Un ou deux, c'est bien, d'accord ? L'un d'eux est parfait. En fait, je dirais que c'est bon. C'est bon. Mais au-delà de cela, je dirais que n'est pas lisible et que
ce n'est pas une bonne pratique. C'est bon. Mais oui, s'agit d'opérateurs ternaires
ou d'opérateurs conditionnels, et j'espère que vous êtes clair Les opérateurs ternaires nous
aident à évaluer les conditions et à effectuer
certaines actions dans notre code J'espère donc que vous avez
pu me suivre, et j'espère que cela vous a été utile.
22. Tableaux dans JavaScript: C'est bon. Il est donc temps
de parler de l'un des
sujets intéressants appelés tableaux Maintenant, il y aura des scénarios
où vous
écrirez des programmes dans lesquels vous ne voulez tout simplement pas stocker une seule valeur, mais plutôt plusieurs valeurs d'une chose
similaire, d'accord ? Maintenant, permettez-moi de vous donner un exemple. Vous pouvez créer une variable pour
stocker les informations d'un étudiant. Par exemple, vous pouvez créer une variable appelée numéro de rôle pour stocker le numéro de
rôle d'un étudiant. Et si vous souhaitez enregistrer le numéro de rôle d'un
millier d'étudiants ? Allez-vous créer
1 000 variables ? Absolument pas. Et c'est à ce
moment-là que vous pouvez créer des tableaux. Les tableaux vous permettent donc de stocker plusieurs valeurs dans une
seule variable, d'accord ? Et vous pouvez créer des tableaux à l'aide de
crochets comme celui-ci Nous allons donc parler
beaucoup plus des tableaux. Laissez-moi donc créer
un tableau pour vous. Je vais créer un tableau appelé numéro. chiffres ici et
je vais en avoir un, deux, trois et quatre ici. D'accord. Et vous pouvez l'
imprimer de cette façon. D'accord. Tu peux dire des chiffres. D'accord. Cela vous donnera le résultat sous forme de un,
deux, trois, quatre. Désormais, vous pouvez même créer des tableaux directement
sur la console. Il s'agit d'une console JavaScript. Vous pouvez donc dire que num est
égal à ce que je peux ajouter. D'accord. Et vous pouvez imprimer
dans Num ici, quelque chose comme ça,
vous pouvez le voir, n'est-ce pas ? C'est donc aussi une
façon de le faire, d'accord, mais nous nous en tiendrons au code de
Visual Studio. Voici comment vous pouvez créer des nombres OK, tableau de nombres. Et vous pouvez même créer
un tableau de chaînes. Je peux donc dire « laissez les fruits ». Prenons un exemple de fruits, et vous pouvez avoir des pommes ou une banane. Tu peux avoir une orange. accord. Et vous pouvez choisir
de verrouiller la console ici. D'accord. Je vais donc créer le
journal de la console et imprimer des fruits. Oups. Et je vais enregistrer ceci, vous pouvez le voir, comme le
résultat ici. Maintenant, le fait est que vous
avez créé des tableaux, et la création de tableaux est
relativement simple, Maintenant, comment accéder aux éléments
d'un tableau ? D'accord ? Maintenant, si vous avez
ces nombreux éléments, d'accord ? Il s'agit d'une liste d'
éléments du tableau. Maintenant, je tiens à mentionner
ici que les éléments des tableaux sont
accessibles à
l'aide de ce qu'
on appelle un index D'accord ? Donc index, c'est-à-dire la
position de l'élément. On est donc en position zéro, car les index
commencent toujours à zéro D'accord ? Vous avez donc zéro, un, deux, puis trois dans le tableau. D'accord ? Maintenant, comment
pouvez-vous utiliser ces index ou ces positions ? C'est en fait la position, c'est vrai, qui part de zéro. D'accord, ils sont nuls, ils suivent zéro. L'indexation Beast est
ce qu'ils appellent, d'accord Mais la question est, d'accord, c'est la position,
c'est l'indice que j'ai, d'accord ? Comment puis-je m'en servir ? Vous pouvez donc dire « Console
point log » ici. D'accord ? Et disons que si je
veux accéder aux numéros, et que je veux accéder au numéro position ou
à l'index trois, d'accord ? Vous pouvez donc en voir quatre
en cours d'impression. D'accord ? Je peux en avoir des fruits.
Je peux le sauvegarder. OK, donc il n'y a pas de
fruit en
troisième position parce que 01 et deux. OK, c'est pourquoi nous
sommes de plus en plus mal définis, mais vous pouvez en avoir un ici et vous verrez
Panana D'accord ? JavaScript a donc
une indexation basée sur zéro, ce qui est courant dans
de nombreux langages de programmation Si vous venez de Java, vous serez au courant de
l'indexation ici D'accord. Vous pouvez même modifier les éléments
du tableau à
l'aide d'index. D'accord ? Ainsi, par exemple,
comme je vous l'ai montré, vous pouvez accéder aux éléments du tableau
à l'aide d'index. Vous pouvez donc dire fruits et
disons le fruit à l'index 1, je souhaite avoir à la
place de la banane, je souhaite avoir des cerises,
disons, par exemple. D'accord. Et puis si vous
essayez de l'imprimer ici, vous verrez une cerise
en sortie. Tu peux voir. Nous avons donc modifié l'élément au premier index ici, qui est la deuxième
position dans le tableau. D'accord ? Il s'agit donc d'un tableau. Vous pouvez même avoir un tableau au sein d'un tableau. Vous pouvez donc créer une sorte
de matrice ici. Je peux donc dire Matrix.
Appelons-la matrice elle-même. Vous créez un tableau entre crochets, à droite. Maintenant, à l'intérieur de celui-ci,
vous allez à nouveau avoir des
crochets et
vous pouvez dire un, deux, trois. Vous pouvez en avoir
encore un, quatre, désolé, quatre, cinq, six, d'accord. Et tu peux en avoir six ou
sept, désolé, pas six. Il devrait y en avoir sept,
huit et neuf. D'accord. Et tu peux l'imprimer. OK, nous avons une
erreur, je ne peux pas lire, d'accord ? OK, c'est probablement parce que
j'ai oublié une virgule, donc elle doit être séparée par des
virgules, et vous pouvez voir que le
problème a disparu N'oubliez donc pas la virgule
si vous essayez de créer un tableau
inestd et que vous pouvez imprimer en matrice ici,
quelque chose Et vous verrez le résultat ici. D'accord ? Vous pouvez donc voir que c'est un tableau de tableaux Vous pouvez donc l'
imprimer de cette façon, zéro. Et vous verrez, comme le tableau du premier
index imprimé. Vous pouvez même imprimer
le premier élément. Vous pouvez donc utiliser
quelque chose comme ça, double indexation, et vous pouvez en
obtenir une ici. D'accord. Si vous dites « un », « oups », pas « Q », vous en verrez
deux s'imprimer D'accord ? C'est donc 00, zéro virgule un, zéro virgule deux D'accord ? Donc, ce zéro
représente d'abord la ligne, et celui-ci représente
la colonne. C'est bon. Ce
sera donc deux virgules C'est bon. J'espère que cela a
du sens. C'est bon. C'est ainsi que vous
pouvez utiliser des tableaux
imbriqués, également
appelés tableaux multidimensionnels Parlons maintenant certaines méthodes qui nous sont fournies lorsque nous
travaillons avec des tableaux Maintenant, parlons
de certaines des méthodes disponibles
pour
les développeurs comme nous pour
mieux utiliser les tableaux
en JavaScript, n'est-ce pas ? Vous pouvez donc voir qu'il
existe plusieurs méthodes comme push qui est utilisé pour ajouter un élément à
la fin du tableau, pop, qui est utilisé pour supprimer
le dernier élément, qui est utilisé pour supprimer l'élément
forcé, et shift, qui peut être utilisé pour ajouter un élément au
début du tableau. Tranche qui copie une
partie d'un tableau, puis nous avons une tranche qui peut ajouter ou supprimer les éléments
à l'index spécifique. Jetons donc un coup d'œil à chacun d'eux individuellement, n'est-ce pas ? Nous allons donc commencer par
pousser ici. OK, alors pousse. D'accord. Maintenant, qu'est-ce que Push ? Il dit qu'il ajoute un
élément à la fin. C'est bon. Maintenant, avant de parler de push, permettez-moi également de vous rappeler une
propriété intéressante du tableau, qui est la longueur. D'accord ? Vous pouvez donc obtenir la longueur du tableau et le script
Ja ici comme ceci. Vous pouvez en voir trois imprimés, ce qui signifie que les fruits contiennent
trois éléments. D'accord ? Vous pouvez voir qu'il
comporte trois éléments. D'accord. Alors maintenant, si vous voulez insérer un
élément dans un tableau, vous pouvez dire fruits,
point, pousser. D'accord, je peux placer
n'importe quel élément ici. OK, je peux probablement dire
orange. OK, comme ça. D'accord. Et je peux dire «
console point log » ici, et je peux dire « fruits ». D'accord. Maintenant, si vous l'imprimez, vous verrez une pomme, une
cerise, une orange, une orange. Orange a été ajouté
deux fois ici. D'accord ? Si j'ajoute de la banane ici, vous verrez des pommes, des cerises, oranges, des bananes.
C'est ce que c'est. D'accord. Vous insérez
donc un élément la fin du tableau. Et si vous prenez la longueur
du tableau ici, après avoir poussé l'élément,
la longueur est désormais de quatre. Plus tôt, c'était
trois. C'est bon. Cela nous indique donc que les tableaux en JavaScript sont
dynamiques, n'est-ce pas ? Vous pouvez ajouter et
supprimer des éléments et la taille du tableau peut
changer dynamiquement. D'accord ? Et la longueur est une propriété étonnante
qui peut
nous aider à obtenir la longueur
du tableau. D'accord ? Il s'agit donc de pousser.
C'est assez simple. Il est utilisé pour placer un élément
à la fin du tableau. accord ? C'est ce que cela
dit. Ensuite, il y a papa. Maintenant, qu'est-ce que la pop ? C'est bon. Donc, la définition dit de supprimer
le dernier élément, c'est vrai. Voyons maintenant comment cela
nous aide à supprimer le dernier élément. D'accord ? Je peux donc dire que je vais copier ce journal de
points de la console ici. Et avant le point log de la console, je dirais fruits, point, je peux dire pop by here. D'accord. Et auparavant, il
comportait quatre éléments. Maintenant, il y en aura trois. Vous pouvez donc voir des pommes, des
cerises et des oranges. D'accord ? Vous pouvez même insérer cet élément dans une variable,
afin que vous puissiez dire « dernier
fruit », par exemple.
D'accord. Et tu peux même imprimer le
dernier fruit que tu as reçu, d'accord ? C'est également possible. Il est donc possible d'attraper
le dernier élément. Vous pouvez voir des pommes, des cerises, des
oranges, et vous avez des bananes
comme dernier fruit ici. Vous pouvez voir la
définition ici, supprimer le dernier élément
du tableau et le renvoyer. D'accord ? Il revient donc également. Si le tableau est vide, undefined est renvoyé et le
tableau n'est pas modifié D'accord ? Il s'agit donc de pop, et la prochaine chose que
vous avez, c'est Shift. Maintenant, qu'est-ce que Shift ? D'accord ? Shift supprime donc
l'élément forcé. D'accord ? Donc, comme pop supprime
le dernier élément, il supprime l'élément forcé. Donc je vais juste l'apporter ici. OK, ou je vais juste
envoyer cette partie ici. D'accord. Et
je vais commenter ce truc pour le moment et vous pouvez dire «
passez par ici ». Maintenant, si vous l'exécutez, vous
verrez qu'Apple a été le premier. Maintenant, vous n'avez que deux
cerises et deux oranges. OK ? Vous pouvez même acheter les
premiers fruits ici. Comme si nous avions eu le dernier fruit, laissons les premiers fruits ici.
OK, quelque chose comme ça. Et laissez-moi imprimer les premiers
fruits, d'accord, ici. Vous voyez, la pomme est le premier
fruit. C'est bon. Donc, comme pop renvoie
le dernier élément, shift si vous passez la souris dessus, il supprime le premier élément
et le renvoie également C'est ce que fait Shift. D'accord. Ensuite, vous avez ce qu'
on appelle unshift away, qui est utilisé pour ajouter un
élément au début OK ? Permettez-moi donc de présenter
cette méthode ici. OK. Passons à la vitesse supérieure. Tu viens ici et tu
nous laisses découvrir l'unhetto ici. OK ? Donc, ce que je peux faire, c'est
dire que j'ai des fruits. Voilà ce que contiennent
les fruits, d'accord ? Ce que je peux faire, c'est
dire fruits point et shift, et je peux ajouter,
disons, je peux ajouter Apple. Encore une fois, Apple,
quelque chose comme ça. OK. Et imprimons. Faisons un journal de console. Vous pouvez voir Apple
à nouveau être ajoutée. OK ? Donc tout à l'heure, Apple
a été supprimée, d'accord ? Et puis nous avons à nouveau Apple. Tu peux voir ? Par ici. OK ? Donc, ceci est
ajouté sans décalage. Cet élément particulier a
été ajouté au début, d'accord ? Et vous pouvez voir insère un
nouvel élément au début
du tableau et renvoie la
nouvelle longueur du tableau. Il renvoie donc en fait
la nouvelle longueur du tableau. OK ? Si tu veux, tu peux dire « nouvelle
longueur » ici. OK. Et vous pouvez dire « Console », point log » ici,
et vous pouvez imprimer dans une nouvelle longueur,
quelque chose comme ça. OK. Vous verrez la nouvelle longueur du tableau. OK, par ici. Auparavant, c'était une longueur de deux. Il a maintenant une longueur de
trois. C'est bon. Donc c'est du unshift. Maintenant, il ne reste plus
qu'à trancher. Slice copie maintenant une
partie du tableau. Voyons
ce que cela signifie, d'accord ? C'est donc une
solution pour nous, d'accord. Supposons maintenant que nous ayons un tableau. OK, c'est donc le tableau
de quatre éléments. C'est bon. Laisse-moi trancher ça, d'accord ? Supposons donc que je veuille
découper les éléments
de l'index un à deux, donc de la cerise à l'orange, d'accord ? Parce qu'il y a trois
éléments, pas quatre, d'accord ? Permettez-moi donc de trouver un tableau de
quatre éléments ici. OK ? Je peux donc
redéclarer ce tableau ici, recréer ou me OK, ton orange, je peux voir cerise ou une fraise,
quelque chose comme ça. OK. Nous avons donc maintenant des éléments un tableau de quatre
éléments. C'est bon. Ce que je peux faire, c'est que je peux
vraiment avoir laissé, je peux avoir une gamme découpée, et je peux dire des points de fruits. Je peux dire, donc ici vous pouvez voir, S. Si vous tapez
S, vous avez une tranche. Nous allons utiliser la
tranche 1, la virgule 3. OK. Et vous pouvez dire console point log ici et
vous pouvez dire tableau découpé. Oups. Il dit donc : OK, cela a déjà été déclaré et nous
ne pouvons pas l'utiliser à nouveau. Je peux donc vous parler de nouveaux
fruits ici. OK. J'aurais dû utiliser
le nouveau nom, d'accord. De nouveaux fruits, de nouveaux fruits, je vais garder ça et vous
pourrez voir une banane orange. C'est bon. Il s'agit donc de l'index 1, puis de l'index deux, et vous pouvez voir comment
il est découpé à partir d'ici. OK ? Il s'agit donc de copier l'élément de l'
index un à l'index deux. C'est ce qui se passe. OK ? Nous voyons donc
une virgule trois Donc ce qu'il fait c'est
1 à 2 par ici, d'accord ? Les deux sont
découpés en tranches. C'est bon. Et si vous passez la souris dessus,
vous verrez qu'il renvoie une copie d' une section d'un tableau
pour le début et la fin Et un indice négatif
peut être utilisé pour indiquer un décalage par rapport à
la fin du tableau. Donc, moins deux, si
vous dites moins deux, fait référence à
l'avant-dernier élément
du tableau. D'accord ? Ce qui veut dire avant-dernière. Donc, moins deux sera
orange ici. OK ? C'est une avant-dernière. C'est bon. C'est
ainsi que Slice peut être utilisé. Il est essentiellement utilisé pour découper
un tableau. Et puis vous avez
une tranche ici, qui peut être utilisée pour supprimer ou ajouter un élément à
un index spécifique. OK ? Alors laisse-moi essayer
cette tranche ici. OK. Maintenant tu as
des fruits ici. Donc ce que je vais
faire, c'est dire fruits point, épissage par ici OK. Et ce que nous
allons faire, c'est supprimer un
élément à l'index 1. OK ? Vous pouvez donc
dire un élément. OK ? Donc, si vous passez la souris dessus, vous verrez de
la documentation. D'accord. Il accepte donc quelques paramètres. Commencez par indiquer le nombre de valeurs que
vous souhaitez supprimer, OK, et la chaîne de caractères ici. Vous pouvez donc voir que le début signifie l'emplacement de base zéro dans un tableau à partir duquel vous souhaitez commencer
à supprimer des éléments. nombre de
suppressions indique le nombre d'éléments que
vous souhaitez supprimer
de ce nombre. Donc, si vous dites à partir de la
première position, je veux en supprimer deux, vous devez
donc ajouter une virgule deux ici,
quelque chose comme ça Je vais retirer deux éléments
de la première position, d'accord ? Et troisièmement, il renvoie un élément contenant
ce qu'il renvoie. Elle renvoie le tableau contenant les éléments
qui ont été supprimés. OK ? Alors essayons
ça ici. Donc, ce que je ferais, c'est ici, je dirais d'abord
enregistrer les points sur la console, et je vais imprimer des fruits. OK ? Maintenant, nous
supprimons deux éléments, commençant par la
première position, d'accord ? Donc, si je l'enregistre, vous
verrez à nouveau Apple
uniquement en cours d'impression. OK ? C'est donc
un tableau que nous avions. Nous supprimons donc deux éléments, en partant de la première position. OK, donc vous pouvez
voir qu'il y avait
à nouveau Apple , cerise et orange. Il ne
reste donc qu'Apple, car deux éléments à partir de la position 1 signifient que les
deux éléments sont finalement
supprimés. D'accord ? Maintenant, la documentation
indique qu'elle renvoie un tableau contenant les éléments qui ont été supprimés. OK ? Vous pouvez donc
réellement les obtenir. Vous pouvez dire « Autoriser
les éléments supprimés » ici. OK. Et je peux imprimer des éléments supprimés,
essentiellement ici. OK ? Je peux donc dire des éléments
supprimés. Oups ici, je peux
enregistrer ceci et vous pouvez voir sont les éléments qui
ont été supprimés ici. D'accord ? Maintenant, quelle est la magie après la suppression, nous avons utilisé Slice
pour supprimer l'élément. OK. Désormais, cela peut
également être utilisé pour supprimer et ajouter des
éléments en même temps. Maintenant, si je spécifie un
élément ici. OK, vous pouvez voir les objets. Il s'agit donc d'éléments à insérer dans le tableau à
la place des éléments supprimés. Vous pouvez le voir apparaître
automatiquement. Vous avez donc commencé, vous
aviez le nombre de
suppressions, et maintenant vous avez
une liste d'éléments. Je peux donc dire nouvel article ici, et je peux l'enregistrer et vous
verrez un nouvel article ajouté. D'accord. Permettez-moi d'ajouter un autre
élément ici. OK. Je peux à nouveau ajouter un nouvel article. Et vous verrez qu'à la place
des éléments supprimés, vous pouvez même ajouter de nouveaux éléments à l'
aide de
Slice. Tu peux voir. C'est ainsi que cela fonctionne
, en gros, et il est essentiellement utile de modifier le tableau
selon vos besoins accord ? Voici certaines des méthodes auxquelles
vous avez accès. J'espère que vous avez
pu me
suivre et j'espère que
cela vous a été utile.
23. Objets dans JavaScript: Il est maintenant temps de commencer à
parler d'objets. Maintenant, que sont les objets ? Les objets en
JavaScript vous permettent donc de regrouper des données connexes et
même des fonctions. Oui, nous en arrivons
à la partie des fonctions. Mais pour l'instant, nous allons
parler de la partie données. Les objets vous permettent donc de regrouper des données et des
fonctions connexes. Un objet est créé à l'aide
d'une paire de brises frisées. Donc, si vous devez
créer un objet, vous devez créer
quelque chose comme celui-ci. Vous diriez « laissez-moi », disons, si je souhaite stocker des données
relatives à une personne, n'est-ce pas ? Je peux donc dire que quelqu'un d'ici peut avoir une paire de brises
frisées comme celle-ci, puis je pourrais y avoir des paires clé-valeur,
où chaque
clé est également connue sous propriété et a une valeur qui lui est
associée C'est bon. Je peux donc dire
qu'est-ce qu'une personne aurait ? Donc, une personne peut avoir
beaucoup d'informations, d'accord ? Supposons que je
développe un programme et que je souhaite stocker les informations d'
une personne. Donc, soit je peux créer
plusieurs variables, comme je peux dire « laisser une personne », et je peux dire « âge,
personne, un nom ». Alors, pour la deuxième personne,
je peux dire la personne deux, chacune, etc., mais ce
n'est pas la façon idéale de
procéder, n'est-ce pas ? Donc, au lieu vous voudriez avoir un objet dans lequel vous pouvez regrouper données
associées à une personne
en particulier. Donc, pour la première personne,
je pourrais dire son nom, et je pourrais avoir le nom Alice, par
exemple, non, je pourrais
avoir H et chacun peut avoir 25 ans. OK ? Maintenant, prenez une
note ici. C'est une ficelle ici,
non ? Il s'agit d'une chaîne. Ce n'est pas un chiffre. C'
est un nombre ici, et je peux aussi avoir un
booléen ici. Je peux donc dire qu'
une personne est étudiante et je peux dire que la
vraie tombe ici. OK.
Notez donc que vous pouvez avoir plusieurs
types de données ici. OK. Pour en revenir ici, un objet est créé à
l'aide d'une paire de phrases de requête, comme
nous le faisons ici, il contient des paires clé-valeur. Il s'agit donc d'une clé
et d'une valeur. OK ? Chaque clé est
également appelée propriété. Il s'agit donc également d'une
propriété de l'objet. La personne a donc trois
propriétés, à savoir le nom. Vous pouvez voir si vous passez la
souris
dessus, il est écrit « propriété » ici, d'accord ? Et cela s'appelle name et
le type de données est chaîne. Si vous placez le pointeur dessus,
si je le survole,
c' est la propriété H et
le type est Si vous passez la souris ici, la propriété est étudiante et elle est booléenne Et si vous passez la souris dessus
, vous pouvez voir la définition complète
d'une personne, n'est-ce pas ? Et vous verrez le type de
données ici au
lieu des valeurs. C'est bon. Chaque clé
est donc appelée propriété et une
valeur lui est associée, n'est-ce pas ? C'est ce que nous avons
fait en créant une personne. Et bien sûr, pour l'
imprimer ici, vous pouvez également l'imprimer quelque chose
comme ça. D'accord ? Et vous le verrez s'imprimer sur la
console. D'accord ? désormais accéder aux propriétés de
l'objet de plusieurs manières Vous pouvez désormais accéder aux propriétés de
l'objet de plusieurs manières. C'est bon.
Nous sommes donc en train d'imprimer l'objet
dans son intégralité, n'est-ce pas ? Mais si vous souhaitez accéder à
une propriété spécifique, vous pouvez même le faire, et il existe plusieurs
façons de le faire. Disons que je peux dire
console point log. Vous pouvez maintenant utiliser ce que l'
on appelle la notation par points. Donc, la personne ne vieillit pas ici. Nous imprimons donc H sous la forme 25. C'est une façon de faire les choses. Une autre solution est de le dupliquer Une autre méthode consiste à
utiliser ce type de syntaxe. Par exemple, vous avez des crochets, et à l'intérieur de ceux-ci, vous avez
le nom de la propriété. Tu peux voir. Ensuite, vous pouvez même y accéder de cette façon et vous verrez la sortie
sur la console. C'est bon.
Voici donc les deux manières d'accéder aux propriétés des objets
en JavaScript. Maintenant, si vous regardez
le code source en ligne, vous verrez la plupart du temps que c'est
ce qui est
utilisé, d'accord ? Comme partout dans votre application de
production, sur votre lieu de travail ou
dans n'importe quel type de code source que
vous lisez en ligne, vous verrez que cette convention est utilisée à plusieurs endroits. C'est très rare, et la raison
évidente en est
que ce n'est pas si facile à regarder et
même à taper, n'est-ce pas ? C'est donc beaucoup plus simple que
la notation par points, et c'est pourquoi elle est couramment
utilisée. D'accord ? Maintenant, nous avons parlé de
la création d'un objet. Nous avons parlé de
l'accès aux propriétés. Vous pouvez même ajouter ou
mettre à jour les propriétés. OK ? Maintenant,
parlons d'abord de la mise à jour. Nous allons donc d'abord mettre à jour l'âge. Vous pouvez donc voir que le point H est égal à 66 ici. OK ? Et puis si vous l'
imprimez ici, et si vous sauvegardez, vous verrez que âge de
la personne est
passé à 66 ans. Et même si j'imprime l'objet
dans son intégralité, vous verrez que
la valeur qu'il contient est 66. accord ? Maintenant, il s' agit de mettre à jour.
Voici comment procéder à la mise à jour. C'est assez simple. Vous utilisez la notation par points ou vous pouvez même utiliser ce type de syntaxe ici avec
les crochets, et vous pouvez mettre à jour la propriété en lui
attribuant une nouvelle valeur Maintenant, comment
ajouteriez-vous une nouvelle propriété ? Supposons que je souhaite ajouter une nouvelle propriété
dans laquelle je souhaite enregistrer le
travail de la personne. Je peux donc dire Person
Dot Job ici, et je peux dire ingénieur. Quelque chose comme ça. C'est bon. Et je peux imprimer
cet objet ici. Et maintenant, si vous imprimez
, vous verrez qu'il contient une nouvelle propriété appelée JOB. Donc, tout d'abord, cette propriété n'
existait pas lorsque nous avons
créé la personne, vous pouvez le voir. Il n'existait pas. Il
n'y avait que trois propriétés : nom, âge et étudiant, vous pouvez le voir, n'est-ce pas ? Mais plus tard,
nous avons ajouté une propriété qui
disait « person dot JOB ». Et nous lui avons attribué une
valeur appelée ingénieur. L'ajout d'une nouvelle propriété est
aussi simple que d'accéder à cette nouvelle
propriété à l'aide de la notation par points. Donc, si vous ajoutez un nouveau
nom de propriété en utilisant la notation par points, vous pouvez l'attribuer à une
valeur et celle-ci sera ajoutée à l'objet ici. OK ? Vous pouvez même y
accéder en utilisant la notation par points si
vous le souhaitez ici, comme si vous accédiez
aux autres propriétés. Vous pouvez voir le
moteur ici. C'est bon. Tout cela est donc possible
ici avec ou quand vous voulez créer ou quand vous voulez ajouter ou mettre à jour les
propriétés. D'accord ? Vous pouvez désormais ajouter une
propriété à un objet. Vous pouvez même supprimer une propriété.
Comment ferais-tu ça ? Jetons donc un coup d'œil à la
suppression de propriétés. OK ? Disons que je
souhaite supprimer, je souhaite supprimer son
étudiant ici. OK ? Donc, pour le moment, je peux utiliser le mot clé Dell, supprimer le mot clé, désolé, ne pas le dire. Il s'agit de supprimer le mot clé. Vous
pouvez voir par ordre de suggestion, vous pouvez voir la personne enseignée et vous aurez la liste
des propriétés ici. Lequel souhaitez-vous supprimer ? Je souhaite supprimer son étudiant ? OK. Et puis si vous essayez d'
accéder à cet étudiant ici, et si vous l'enregistrez, vous
verrez qu'il ne sera pas défini C'est bon. Et si vous
inscrivez simplement la personne, vous ne verrez pas son étudiant participer à
tout cela. Vous pouvez voir plus tôt que l'étudiant était là dans cet objet en
particulier, mais plus tard, vous n'
avez plus sa personne ici. Cette propriété
est donc effectivement
supprimée à l'aide
du mot clé delete. C'est bon. Il est donc
possible d'ajouter des propriétés de manière dynamique après
la création de l'objet, et vous pouvez également supprimer les propriétés une fois l'
objet créé. Tout est donc
possible, d'accord ? Maintenant, il est également
possible de vérifier si une propriété particulière
existe réellement dans un
objet donné, d'accord ? Maintenant, il y aura des
scénarios, bien sûr, dans lesquels vous souhaiterez peut-être mettre à jour une propriété si cette
propriété existe. Supposons donc que si un emploi
existe chez cette personne, vous souhaiterez peut-être le
mettre à jour. Si vous n'ajoutez pas cette vérification, si poste n'existe pas en personne, il sera ajouté, il
sera créé récemment, et vous ne voulez pas
que cela se produise. Vous souhaitez effectuer la mise à jour
uniquement si elle existe. OK ? Donc, tout d'abord, ce que nous pouvons faire, c'est
d'accord, vérifier une seconde. Nous vérifierons si la propriété existe. OK ? Comment le faites-vous ? Je vais donc simplement faire
défiler la page vers le bas. OK. Et je dirais, journal à points sur
console, et je
pourrais voir le nom en personne. OK ? Maintenant, cela va donner
une valeur booléenne Vous pouvez voir la vérité ici.
Pourquoi est-ce vrai ? Parce que le nom
existe réellement en personne. Vous pouvez voir que nous avons
ajouté un nom ici. Si vous jetez un
œil aux précédentes déclarations du journal à points de la
console, vous constaterez que le nom est présent. OK ? C'est une
façon de le vérifier. Il existe un autre moyen, vous pouvez
donc dire « console
point log » ici. OK. Et vous pouvez dire personne, point et vous pouvez dire qu'
il possède ses propres biens, quelque chose comme ça, puis
vous pouvez dire âge ici. OK. Tu vas redevenir
honnête ici, d'accord ? Donc, cette
propriété possédée détermine, vous pouvez voir la
documentation ici, détermine si un objet a une propriété avec le nom
spécifié, d'accord ? Maintenant, si je change
cela en un an, si je le change pour en
nommer un ici. Bien sûr, ces
deux-là n'existent pas. Donc si je garde ça,
tu vas
te tromper ici, non ? Parce que ces deux-là
n'existent pas. Je vais juste faire Control Z
ici et je vais l'
enregistrer pour que le vrai soit
imprimé sur la console. accord ? Maintenant, c'
est vraiment utile. Comme je l'ai dit, si vous souhaitez effectuer une mise à jour des propriétés, selon que
la propriété existe ou non dans un objet, vous pouvez utiliser n'importe laquelle
de ces syntaxes, d'accord ? Et vous l'utilisez normalement
avec des instructions conditionnelles, et si c'est vrai, vous mettrez probablement
à jour la propriété. Hein ? Et ce truc
que vous voyez ici est un opérateur ici. OK ? Et avec l'aide de
cela, cela vous permet de vérifier, essentiellement, que vous
voyez quel est le cas d'utilisation de
in ici. C'est bon. Donc oui, il s'agit de vérifier
si la propriété existe. Maintenant, il y a ce qu'on appelle
des objets imbriqués, d'accord ? Cela signifie qu'un objet peut contenir un autre objet
ou également d'autres objets. Maintenant, la
définition de l'objet que nous avons vue contient des paires
clé-valeur, n'est-ce pas ? Il n'y a rien d'
imbriqué dedans. Il y aura donc des scénarios
dans lesquels vous souhaiterez peut-être stocker des données complexes, dans lesquels vous voudrez peut-être avoir un objet dans
un objet, n'est-ce pas ? Maintenant, permettez-moi de vous donner un exemple. Supposons que vous créez des objets pour
suivre les étudiants et que vous construisiez
une académie en ligne dans laquelle un
étudiant s'inscrit à des cours Donc, ce que vous
feriez, c'est avoir un étudiant ici. OK ? J'aurais pour objet de stocker les informations sur les étudiants, et j'aurais le
nom de l'étudiant. Quel est le nom ? Le nom est
disons « pop » ici. OK. Maintenant, je
veux avoir une liste des cours auxquels l'étudiant
s'est inscrit. Je peux donc parler de cours ici. OK. Et dans ce cadre, ce cours est un objet
parce que ce sera une liste, n'est-ce pas ? Donc tu peux avoir Mat ici. OK. Maintenant, ici, tu
peux dire vrai, OK. Tu peux avoir des signes. Vous pouvez faire des chutes
ici et ainsi de suite. C'est bon. Maintenant, si vous
souhaitez l'imprimer, vous pouvez dire Console point Log, et vous pourrez voir l'
étudiant ici. Quelque chose comme ça.
Vous pouvez donc voir le nom , puis le cours est à nouveau
imbriqué ici, que vous pouvez étendre le
nom et le signer Désolé, les maths et les sciences sont
ici. C'est bon. Maintenant, la question est de savoir s'il y a
un objet dans un objet. C'est un objet imbriqué, non ? Comment accèderiez-vous
aux mathématiques de la propriété ? Alors laissez-moi vous
le montrer également. C'est bon. Donc,
ici, vous avez un étudiant. Vous pouvez dire « point étudiant », et vous pouvez voir la suggestion. Alors nommez si vous
voulez accéder à l'âge, bien sûr, vous pouvez
utiliser le point ici. OK, l'âge n'existe pas. Je peux donc utiliser le nom
ici et vous
aurez accès à pop. OK. Maintenant, si vous voulez accéder
à des cours, vous pouvez dire cours
ici, tout de suite, et vous aurez accès
à ce Jason, qui est l'objet
imbriqué ici. Vous pouvez
voir les mathématiques, c'est vrai. La science est fausse. C'est bon. Et si vous voulez avoir accès à l'une de ces propriétés, vous pouvez
utiliser
davantage la notation par points et vous pouvez dire
maths ici et vous serez sûr. OK ? Vous pouvez donc enchaîner ces notations par
points de cette manière Vous pouvez dire que les cours par
points pour étudiants pointent les mathématiques. OK ? Vous parlez donc de cours par points pour
étudiants, mathématiques par
points ici. C'est bon. Et cela
vous donne le résultat comme étant vrai. accord ? Maintenant, comme
l'objet extérieur, l' objet
intérieur peut également avoir des propriétés avec
différents types de données. À l'heure actuelle, nous
utilisons le booléen. Bien entendu, vous pouvez
stocker des chaînes de caractères. Tu peux avoir des chiffres. C'est bon. C'est à vous de décider
ce que vous voulez stocker, et cela
dépend également entièrement de vos besoins. C'est bon. J'espère donc que cela a du sens. Il s'agit donc d'objets. Et avant de terminer,
je voudrais vous montrer une chose intéressante lorsque
vous travaillez avec un objet, connue sous le nom de structuration d'
objets D. Structuration. C'est bon. Alors, qu'est-ce que la structuration de l'objet D ? Maintenant, la structuration de l'objet D est un concept ou un moyen
pratique, je dois dire, d'extraire
plusieurs propriétés
d'un objet et de les attribuer à des variables Maintenant, jetez un œil à
cet objet ici. Il a plusieurs
propriétés, non ? Tout objet que vous créez en JavaScript
aura plusieurs propriétés. Il peut donc arriver que
vous souhaitiez extraire ces
propriétés et
les attribuer à des variables individuelles. Maintenant, cela est possible grâce à la déstructuration
d'objets. Nous avons donc un objet ici. Essayons-le là-dessus. Vous avez donc deux propriétés,
comme le nom et les cours. C'est bon. Ce que je
vais faire, c'est que je veux un
nom Je veux avoir une variable
appelée name ici, qui aura une valeur
de nom ici pour cet objet, et les cours auront
la valeur des cours. OK ? Donc, ce que je vais
faire, c'est dire « laissez-le faire ». Je vais utiliser ce
type de syntaxe ici. Je vais donner le nom
et les cours ici. OK ? Ensuite, je vais l'
assigner à un étudiant. C'est bon. Que
croyez-vous qu'il se passerait ? C'est tout à fait
valable ici. OK. Mais ce qui se
passe réellement ici, c'est cet objet est en fait
décomposé et que les propriétés
sont attribuées. La valeur
des propriétés est affectée à ces variables. C'est bon. Donc, si je veux imprimer dans le journal des points de la
console ici, je peux dire le nom. Vous verrez le nom
imprimé sous le nom de Bob ici. D'accord, qui est en fait le
nom que vous avez attribué, puis vous pouvez avoir
au lieu du nom, vous pouvez avoir des cours
et vous pouvez les enregistrer, vous verrez le résultat ici. OK. J'espère donc que cela
a du sens. Maintenant, si vous remplacez
le nom
de la variable par le nom deux ici,
supposons, par exemple, que
si vous l'enregistrez,
vous verrez que le nom n'est pas défini Maintenant. Pourquoi n'est-il pas défini Parce que pour que la
déstructuration fonctionne parfaitement, donc le nom doit être attribué
au nom ici, alors ce nom doit
correspondre au nom
du nom contenu dans cette propriété dans
cet objet, je suis désolée OK. Ainsi, par exemple, si je change également le nom des
cours en cours, vous
verrez qu'il n'est pas défini OK, donc le nom doit être similaire à celui de la propriété. Le nom de la
variable doit être
identique à celui de la propriété
pour que la déstructuration fonctionne Si vous ignorez l'une des
variables ici, si je saute des cours, vous verrez que les cours ne sont pas
déstructurés. C'est bon. Donc, oui, c'est ce qu'est la déstructuration d'
objets. Et tout cela concerne les
objets en Jascript. J'espère que cette
vidéo vous aidera à comprendre tout
code que vous verrez, qui utilisera
des objets Jascript à l'avenir. Bonne chance.
24. Conversion de type: Il est donc temps
de parler conversion
de type en JavaScript. Maintenant, qu'est-ce que
la conversion de type, tout d'abord ? Ainsi, chaque fois que vous
créez une variable, vous y stockez des valeurs. La variable a un type, non ? Donc, soit vous pouvez
stocker une chaîne, un booléen ou un nombre, Maintenant, la conversion de type est
un processus dans lequel vous convertissez une valeur d'
un type à un autre. OK ? Donc, si vous convertissez
une chaîne en nombres, des nombres en chaîne,
c'est ce que l'on appelle la conversion
de type. Maintenant, une chose que vous
devez savoir, c'est
que vous
savez déjà, bien sûr, JavaScript est un langage mal
typé, ce qui signifie que
vous n'avez pas besoin de
déclarer le type d'
une variable, Et le type de
variable peut changer manière dynamique en fonction des valeurs
que vous stockez. OK. Une autre chose
est que JavaScript prend en charge les conversions
implicites et explicites. Donc, ce que signifie implicitement la conversion implicite
est un type
dans lequel JavaScript lui-même
convertit
automatiquement la valeur d'
un type à un autre. Un explicite est l'endroit où, en tant que programmeur,
vous demandez de convertir une valeur d'un
type à un autre accord ? Jetons donc un coup d'
œil à la conversion de type. Maintenant, laissez-moi vous donner
un exemple ici. Disons donc que j'aurai X, o et disons que j'en
aurai cinq plus un. OK. Maintenant, je vais faire le journal des
points sur la console ici. OK. Et je vais imprimer la
valeur de X. Très bien. Je vais également faire le journal des
points sur la console ici. OK, et je vais dire « tape off ». Je vais dire X ici. Si je sauvegarde ceci, vous verrez que
la sortie est six, bien sûr, et que la sortie est
également un nombre
car il contient la
valeur du type number. Maintenant, laissez-moi expérimenter
un peu, non ? Supposons maintenant que je
convertisse cette valeur cinq en une chaîne en
ajoutant un code unique. Vous pouvez même ajouter des codes doubles. C'est tout à fait normal. sera le résultat selon
vous ? Y en aura-t-il six ? Et si
vous pensez que c'est six, alors que pensez-vous que cela nous
donnera un résultat ? Quel sera le résultat
du type d'opérateur ici ? Si je sauvegarde ceci, vous
verrez que la sortie est 51, puis vous avez
une chaîne ici. OK ? Donc, ce qui se passe
ici, c'est que vous avez cinq, qui est une chaîne, vous avez l'opérateur plus. Vous utilisez l'
opérateur plus sur deux opérateurs. Ainsi, un opérent est une chaîne et l'autre est un nombre Donc, ce qui se passe, c'est que ce
n'est pas un ajout valide, n'est-ce pas ? Donc, ce que JavaScript fait implicitement
ou en interne,
c'est qu'il en convertit une en chaîne OK ? Il en résulte donc que cette équation devient essentiellement
p. J'en ai cinq ici plus
un ici sous cette forme. OK ? Alors, qu'est-ce que cinq
plus un ici ? Dans ce cas ? Cela devient 51 parce que les deux
sont des cordes, non ? Et une concaténation de chaînes
est en cours d'exécution. Donc, si vous avez loué ou si je dis
console point log ici, et si je dis bonjour, d'accord ici, et bonjour. Je vais donc obtenir le
résultat high hello car une concaténation de chaînes est en cours d'exécution ici OK ? C'est ainsi que
l'opérateur plus se comporte avec les chaînes Et pour ce qui est des chiffres, il va additionner
ces deux chiffres. OK ? Il s'agit donc d'un exemple
de conversion de type implicite. accord ? Je vais juste le
commenter. OK ? Maintenant, laissez-moi vous donner
un autre exemple, d'accord ? Disons que j'ai le
deuxième exemple ici, d'accord ? Et permettez-moi d'en donner un
exemple ici, d'accord ? Donc, quelque chose comme ça. OK ? Oups, quelque chose OK, donc cette déclaration n'
est pas encore complète. C'est pourquoi je reçois un message d'erreur. OK ? Disons donc le deuxième exemple. Quel est le deuxième exemple, au lieu d' avoir cinq sous forme de
chaîne plus un. OK ? Laissez-moi donc d'abord l'avoir
sous forme de nombre entier. Je vais donc avoir moins
cinq moins un. OK. Je vais copier ces
deux lignes de déclaration. Je vais les reconstituer ici.
Et cela devient le deuxième exemple, bien
entendu. OK ?
Il y en a deux également. Maintenant, si je sauvegarde ceci, vous verrez la sortie est quatre parce que
cinq moins un est, bien sûr ,
quatre, et la sortie
est un nombre ici, en raison du
type d'opérateur. OK ? C'est ce que vous voyez. Alors maintenant, permettez-moi de changer ces deux points. Une ficelle. Maintenant, quel en serait le résultat,
selon vous ? OK ? Parce qu'ici, si
vous changez cette chaîne,
elle devient 51, non ? Vous pouvez voir qu'il en imprime 51. Quel sera, selon vous,
le résultat ici, d'accord ? Des suppositions ? Donc, si je sauvegarde ceci, le résultat est toujours quatre
et le type de l'exemple deux est toujours un nombre.
Maintenant pourquoi en est-il ainsi ? Donc, ici, si vous
utilisez l'opérateur plus, d'
accord, cela a été converti. C'était ASIS, et cela a été
converti en chaîne, en fait, et
le résultat obtenu était une chaîne. Vous pouvez voir le
résultat ici. Mais en cas de problème,
cela a changé, non ? Ce n'est pas le cas, ce n'est pas comme ça qu'il se comporte lorsque vous utilisiez Plus
avec la mer ou les prins Donc, le comportement, la réponse
à cette question est le comportement des opérateurs
plus et moins avec des chaînes et
des nombres, est différent, et c'est pourquoi vous
constatez un changement de comportement dans la sortie. Alors
laissez-moi vous expliquer cela. Lorsque vous utilisez
des opérateurs plus avec des chaînes, d'accord ? Avec les chaînes, JavaScript a la possibilité
d'
effectuer une concaténation OK ? JavaScript peut effectuer une
concaténation avec des chaînes et JavaScript peut effectuer des ajouts lorsque l'opérateur
plus est
utilisé OK ? Donc, si vous l'utilisez
avec des chiffres, il sait, d'accord, je
dois effectuer un ajout. Si vous l'utilisez
avec des chaînes, il sait que je dois
effectuer une concaténation Mais lorsque vous
utilisez un type mixte, il
convertit le nombre en chaîne. OK ? Maintenant, dans ce cas, minus n'
a pas de rôle ni de comportement
lorsqu'il est utilisé avec des chaînes. Pouvez-vous imprimer en
haut moins bonjour ? OK ? Cela n'a aucun
sens, n'est-ce pas ? Donc, comme cette conversion d'un en chaîne
n'avait aucun sens, Ja Script a
converti cinq en nombre, n'est-ce pas ? Et cela vous a donné l'
opération arithmétique
qui en a résulté, soit quatre, et le type de sortie finale
était également supérieur à quatre OK. Et c'est
quelque chose de similaire. Et c'est ainsi
que cela fonctionnera si vous
utilisez également la multiplication
, n'est-ce pas ? Alors laissez-moi vous
le montrer également. OK ? Je vais donc simplement le
dupliquer ici. Voici notre exemple
trois, l'exemple trois et l'exemple trois, et
j'en ai cinq en un. Quel en
sera le résultat selon vous ? chaîne comme cinq
dans une chaîne multipliée par
un dans une chaîne a-t-elle du sens ? Non Donc, bien sûr,
ce sera un chiffre. OK. Donc oui, c'
est comme ça que les choses fonctionnent. Et comme vous pouvez l'
imaginer, en interne, JavaScript effectue une conversion
implicite ici dans ce cas, laquelle il
convertit automatiquement la valeur
de cinq ici, qui est une représentation sous forme
de chaîne en nombre ici. OK ? Et comme vous pouvez le voir, vous
recevez un résultat ici. Maintenant, bien sûr, si
vous dupliquez ceci, laissez-moi le dupliquer et laissez-moi vous montrer
un autre exemple. Si je fais défiler l'écran vers le bas,
si je le remplace par l'exemple quatre,
désolé, pas cinq. Ça fait quatre. C'est aussi
quatre, et c'est aussi quatre. OK. Maintenant, au lieu
de cinq ici, disons que c'est le cas,
laissez-moi m'en débarrasser. Disons que vous avez une
vérité. OK. Et tu peux dire « vrai » plus un. OK. Quel en
sera le résultat, selon vous ? La sortie serait donc de
deux ici car true est considéré comme un. Donc, si je sauvegarde ceci, vous en
verrez deux et le
résultat sera un nombre. OK ? Si je dis que c'est faux, vous verrez que la sortie est un
parce que false est zéro. OK. Je vais donc m'en tenir
à la vérité ici. OK, et vous pouvez
voir le résultat. D'accord, c'est
ainsi que les choses fonctionnent, et vous pouvez très bien voir comment
se comporte la conversion implicite ici C'est bon.
Parlons maintenant des conversions explicites. C'est bon. Je vais donc
venir ici. OK. Et nous parlerons de la
conversion de valeurs de manière explicite. C'est bon. Maintenant, il y aura d'
abord des scénarios, d'accord. Il y aura des scénarios
dans lesquels la conversion implicite ne sera pas suffisante et où vous voudrez
faire les choses de manière explicite, n'est-ce pas ? Supposons que vous
demandiez à l'utilisateur de saisir un H, par
exemple, ou de saisir des marques. Maintenant, ces choses sont toujours
saisies sous forme de chiffres, n'est-ce pas ? Et votre programme de script de travail
obtient cela à partir du HTML. OK ? Donc, ce que vous feriez, c'est vous voudriez l'
utiliser pour
certains calculs. Maintenant, disons que vous
avez NUM ici, d'accord ? Un, deux, trois, d'accord ? Donc, dans l'exemple dont
je parlais,
où vous acceptez des
éléments tels que l'âge et les notes, vous voudrez peut-être effectuer une
conversion explicite dans laquelle vous savez que le nombre saisi
est en fait un nombre, mais il se peut qu'il soit donné en entrée dans votre
programme sous forme de chaîne. Vous voudrez peut-être le convertir explicitement,
n'est-ce pas ? Permettez-moi donc de vous donner un exemple. Disons que vous avez un numéro ici et disons que vous
avez une piscine ici. Ceci. J'ai deux variables. OK. Maintenant, afin d'effectuer une conversion
de type de manière explicite, Ja Script propose un ensemble de fonctions
que vous pouvez voir ici. Ainsi, lorsque vous travaillez avec des chaînes, voici
les fonctions. Vous avez deux cordes
et deux cordes ici. Vous avez également un nombre, un parsent et un parse float si
vous travaillez avec des nombres Et si vous souhaitez travailler
avec le type de données booléen, vous pouvez utiliser le
booléen Voyons donc comment vous pouvez
les utiliser individuellement. Donc d'abord, nous allons parler
des cordes ici, d'accord ? Maintenant, j'ai déjà créé quelques
chaînes. Donc, ce que je ferais,
c'est simplement les
déplacer dans ce
bloc ici, pas les bloquer après les commentaires. OK ? Maintenant, laissez-moi convertir ou laissez-moi vous montrer comment
utiliser la fonction de chaîne. Je peux donc dire let num
à chaîne ici, et je peux dire une chaîne comme celle-ci, et je peux dire Num. OK ? Donc, il suffit de passer le
paramètre ici, d'accord ? Et je peux dire « console
point log » ici. Peut voir un engourdissement dans une chaîne.
Je peux ajouter un coma. Et puis ici, je peux dire type de et imprimer le
type de num sur une chaîne. OK. Si je l'enregistre, vous verrez un, deux, trois
et une chaîne en sortie. OK ? Donc oui, c' est
en fait en nombre et c'est en train d'être
converti en chaîne. Maintenant, la valeur est la
même, un, deux, trois, mais elle est au format
chaîne pour le moment. OK ? Maintenant, c'est une chose. Comment pouvez-vous utiliser
le booléen ici ? Donc, vous
pouvez également convertir le booléen, d'accord ? Permettez-moi donc de créer une
nouvelle variable ici. Disons Bool pour
une chaîne ici, et je peux dire chaîne OK, je peux dire « bool »
ici, quelque chose comme ça. Et laissez-moi le copier. Et vous pouvez dire bool à chaîne et tirer à
chaîne du type de Vous pouvez voir vrai et il est maintenant représenté sous forme de chaîne. Voici donc comment fonctionne cette
chaîne ici. Tu peux voir, non ? Il s'agit donc d'une question de chaîne. Maintenant, vous avez
également deux cordes que vous
voyez ici. Donc, vous pouvez vraiment dire « laissez faire ». Alors permettez-moi de dire engourdissement à chaîne ou laissez-moi le
copier en fait C'est bon. Je vais juste copier tout
ça en fait. OK. Et ici,
je vais l'appeler comme tel. Il y en a aussi un
ici. Cela en a également un. J'en ajouterai un à la fin. OK. Et au lieu d'
une chaîne ici, je peux dire numb, tot, to string OK. Comme ça. Et pour Bool aussi, je dirais bool, tot,
à une chaîne comme celle-ci Et je vais voir si c'est le cas. Vous
pouvez donc voir que le résultat est le même. OK. Donc, soit vous pouvez
utiliser deux chaînes ici, soit simplement une
chaîne de cette façon. accord ? Maintenant,
parlons de chiffres, d'accord ? Donc, si vous avez une
valeur dans une chaîne, disons, SDR num. D'accord, tu ne peux pas l'
utiliser pour les calculs. Disons que vous en avez
quatre, cinq, six ici. OK ? Vous ne pouvez pas l'utiliser
pour des calculs. Vous voudrez peut-être le convertir explicitement en nombre
afin de pouvoir l'utiliser. C'est bon. Supposons que vous ayez
également huit valeurs de tartes
décimales Je dirais que le SDR flotte ici. OK, ou tu peux dire, appelle-le décimal, comme tu veux Et disons que c'est
12h55, par exemple. C'est bon. Vous pouvez prendre
n'importe quel nombre aléatoire. OK. Jetons donc d'abord un
coup d'œil au chiffre. OK ? Vous pouvez donc dire « Let
SDR to num over here ». OK ? Tu peux dire un chiffre. Vous pouvez voir le nombre, et vous
pouvez transmettre SDR num Sorry,
not float, STR, num. OK. Comme ça. OK. Maintenant, laissez-moi imprimer la valeur ici
ainsi que le type. OK. Je vais donc le copier
et le coller ici. Et si je sauvegarde ceci, vous
verrez que 456 est le résultat, et celui-ci est de type
numéro maintenant. C'est bon. Cela a donc été
converti en nombre, comme vous pouvez le voir. OK ? Maintenant, je peux
dupliquer cette ligne, dupliquons cette
ligne et voyons un exemple avec
parse int ici Donc, si j'utilise parse int, vous pouvez dire int ici, d'accord, STR à int et je le remplacerai par parsint
et je l'enregistrerai Maintenant tu peux voir que c'est
à nouveau un chiffre, d'accord ? Il s'agit donc en fait de convertir cette chaîne en un entier. OK ? Maintenant, que se passe-t-il si vous
ajoutez du SDR, que vous flottez ici ? OK. Si vous ajoutez STR float, vous verrez qu'il tronque
cette partie décimale Vous pouvez voir que seulement 12
sont en cours d'impression. La version 12.55 n'est pas imprimée. OK ? C'est donc utile si vous voulez un
nombre entier, non ? Mais à quoi ressembleraient les choses si vous vouliez également
conserver les
décimales vouliez également convertir en nombre et conserver les
décimales pour OK ? Parce qu'il y a
une perte de données, non ? La valeur décimale est perdue. C'est donc là que le
flotteur clairsemé entre en scène. Donc, ce que vous pouvez faire, c'est me
laisser dupliquer ceci ici, STR pour flotter. Par ici. Et je vais le reconstituer ici,
et je vais voir si c'est le cas. Au lieu de parse end, je dirais parse, float Si je le sauvegarde,
vous verrez 12h55. La valeur décimale est donc également préservée et elle est
imprimée sous forme de nombre OK ? Il y a donc trois
choses à retenir : le nombre, qui est utilisé pour convertir
une chaîne en nombre, analyse int, qui est utilisé pour convertir toute valeur que vous
avez en un entier Ensuite, vous avez parse float, qui peut vous aider à obtenir la valeur complète ou stocker la valeur entière
avec le nombre décimal OK. Maintenant, il y a une chose
que je veux mentionner ici, si vous essayez de convertir une chaîne en nombre,
cela ne fonctionnera pas. Vous pouvez donc dire SDR ou
non valide ou num non valide. Non valide, num. Disons que parce que cela va
être invalide, je le sais. Disons que je dis un chiffre. Je ne créerai pas de variable ici, mais j'aurai directement un
numéro et je pourrai dire bonjour. OK. Maintenant, ce n'est pas du tout
valide, d'accord ? Vous pouvez donc le prendre et
l'imprimer ici. Mais ce n'est pas valide, d'accord ? Si je sauvegarde ceci, vous
verrez que ce n'est pas un nombre, NN ne signifie pas un chiffre, NN, et le type
est un nombre, d'accord ? Mais la valeur est perdue. C'est NAN. C'est bon. Donc oui, si vous effectuez un typage ou une
conversion de type en nombre, assurez-vous que la source contient réellement
un numéro valide OK ? Si j'y ajoute des caractères en quatre, cinq, six, je dis quatre, cinq, six, alors
ce sera à
nouveau NN parce que ce n'est pas
un nombre valide, n'est-ce pas ? J'espère que cela a du sens. OK ? Maintenant,
parlons de booléen ici. Nous allons donc créer zéro OK. Et je vais aussi laisser une chaîne
booléenne non vide ici
ou supprimer une chaîne booléenne d'ici.
C'est de plus en plus long. OK. Ensuite, je passerai le bonjour. OK. Et voyons comment vous
pouvez utiliser le booléen Vous pouvez dire « laissez zéro » à « booléen ». Convertissons donc d'abord zéro
en booléen. Je vais dire booléen ici, et je dirais zéro. OK. Quel en
sera le résultat selon vous ? Permettez-moi de comprendre cette déclaration,
le verrouillage de la console. Je vais remplacer ce nombre invalide par un
booléen zéro, et vous verrez faux Donc, zéro se
traduit en fait par faux lorsqu'il est converti en booléen Et maintenant, d'accord, j'ai ajouté zéro accidentellement,
ça devrait être zéro. OK ? Le résultat sera le même. Mais si vous convertissez
le zéro en un, cela vous donnera la vérité. OK ? Si vous dites un, cinq, six, n'importe quel nombre aléatoire,
cela restera vrai. Il n'y en a donc que 40 par ici. OK. J'espère que cela a
du sens. C'est bon. Maintenant, si vous avez cette
chaîne ici, que se passera-t-il si vous essayez de la
convertir en Poulin, d'accord ? Alors permettez-moi de le copier ici. OK. Je vais passer à la ligne suivante. Et au lieu de zéro à booléen, je dirais chaîne à chaîne booléenne à booléen Et ici, je vais avoir une chaîne
non vide. OK. Et je vais copier la chaîne en booléen et
je l'ajouterai ici. Voyons quel en
est le résultat. Tu verras que c'est vrai. OK ? Donc, toute chaîne non vide que vous avez et si vous essayez de la
convertir en booléen, vous verrez
true comme sortie OK ? Ainsi, les valeurs telles que zéro
ou chaîne vide, null, undefined et NN sont fausses, ce qui signifie qu'elles sont
converties en Donc, même à la place de zéro, si vous avez une chaîne vide, chaîne
vide. OK,
ce sera faux. Tu peux voir. Si c'est une fin, disons, une fin. Et si je le sauvegarde,
ce sera faux. OK ? S'il est nul, il
redeviendra faux. OK. Mais je vais m'en tenir à zéro. OK. Et tout
le reste, sauf zéro, chaîne
vide, null, NN
non défini, ce sont toutes de fausses valeurs Si elles sont converties, elles
se traduiront en faux dans Bolin, et tout le reste
est vrai, n'est-ce pas ? J'espère donc que cela a
du sens quant à la façon dont les conversions
de type
fonctionnent explicitement dans Jascript OK. OK. C'était
une erreur ici. J'espère que cela vous sera utile.
25. Projet : créer un générateur de couleurs: Construisons donc un générateur de couleurs en utilisant JavaScript en HTML, n'est-ce pas ? Je suis donc ici sur le point d'index HTML, j'ai
donc ce fichier point d'index HTML et
point d'index Hs. Il s'agit d'un fichier JavaScript dans lequel résidera notre
code Ja Script. Je vais ajouter un autre fichier, que j'appellerai «
styles point Nous allons donc embellir un
peu,
pas grand-chose,
mais nous allons donner à notre page Web un
aspect un peu décent, n'est-ce pas ? pas grand-chose, mais nous allons donner à notre page Web un
aspect un peu décent, n'est-ce pas Alors maintenant,
ici en HTML à points d'index , je
vais taper exclamation, et je vais juste
obtenir le code standard d'une page HTML C'est bon. Maintenant,
vous pouvez voir que j'ai un appareil et tout le reste
ici, d'accord. Et ici, je vais
ajouter le titre du document ou
le titre de la page Web, non ? Et ce titre sera un générateur de couleurs
aléatoires. Quelque chose comme ça. C'est bon. Maintenant, ici sous le corps, je vais avoir la balise H one parce que c'est là que je vais commencer
à écrire le code. Je vais donc dire générateur de couleurs
aléatoires. Et en fait, au lieu de taper, je peux directement l'obtenir. OK. Ceci est fait, et le fonctionnement de cette application
est nous aurons un bouton qui
générera des couleurs aléatoires chaque
fois que vous cliquerez sur le bouton. C'est bon. Nous avons donc
besoin de ce bouton. Je vais donc ajouter un bouton ici. Vous pouvez voir cet
élément de bouton. C'est bon. Je vais le fermer et j'
appellerai ce bouton « générer
de la couleur ». OK. OK. C'est fait. Et puis nous devons également
afficher les codes couleur, d'accord. Maintenant, la couleur générée
sera en code xassimol Ce sera un code Exad
assimil que
nous pourrons également afficher à
l'utilisateur. C'est bon. Nous allons donc afficher le code couleur. Je vais dire Ptag ici. OK. Et nous allons faire imprimer un code
couleur ici. C'est fait, non ? Maintenant, nous devons également charger
le JavaScript. Donc, ce que je peux faire ici, c'est charger le fichier JavaScript. Nous avons donc le fichier Ja Script
créé sous la forme index point qs. Je vais donc sortir de
la balise body ici et je vais dire script SRC, et je vais dire
index point s ici Et je vais fermer la pile. C'est bon. Aucun
lien n'a encore été créé pour le CSS, mais nous l'
examinerons sous peu. C'est bon. Je vais
fermer cette console. Nous n'avons plus besoin de voir la
console, non ? Maintenant, si je vois ceci, d'
accord, cela devrait réellement afficher
ce code HTML en particulier ici. Vous pouvez voir le générateur de couleurs
aléatoires et générer de la couleur. C'est bon. Maintenant, nous allons
passer au point d'index JS, à droite. C'est ici que nous allons
écrire le script Java qui fonctionnera avec ces éléments HTML
et y ajoutera de la vie. Donc, si vous cliquez sur Générer la
couleur comme je l'ai dit, cela devrait générer un nouveau code
couleur et l'arrière-plan de cette page Web entière devrait être défini
sur ce code couleur
particulier, et nous devrions également
afficher le code couleur et nous devrions également
afficher le code couleur ici à l'utilisateur. C'est bon. Donc, ce que je vais
faire, c'est ici si tu viens. Voilà, nous avons ce PTAC. Nous avons certains
éléments et nous
devons également afficher le code
couleur ici. Ce que je vais faire, c'est lui attribuer un identifiant, car je dois le référencer
à partir du JavaScript. OK ? Je vais donc le coder
sous forme de code couleur ici. Quelque chose comme ça. OK,
et je vais le sauvegarder. OK. Et laissez-moi simplement supprimer
ce code d'ici. OK ? Je vais juste prendre de la couleur.
Je vais venir ici. OK. Et ce que je vais faire,
c'est dire document. J'ai donc besoin de cette balise P là où nous voulons
afficher la couleur. Je vais donc dire document
point get element by ID. Je récupère donc l'élément
par identifiant à partir du document. Maintenant, je vais évoquer
l'idée de l'élément. L'idée de l'élément est donc une
couleur ou un code de trait d'union de couleur, peu importe ce que vous avez
ajouté là-bas OK ? Et nous pouvons l'attribuer
à une variable, d'accord ? Je peux donc dire couleur et paragraphe, d'accord, par. Et je vais enregistrer ça. OK ? Nous avons donc maintenant accès
au tag P, d'accord ? Et si vous le souhaitez, vous pouvez choisir d'enregistrer les points sur console ici. Ou au lieu de faire un journal des points sur la
console, je dirais que
vous pouvez dire Color para Tot du contenu du texte, et vous pouvez ajouter un test
ici. OK. Et si vous sauvegardez
ceci, vous devriez voir test être ajouté
ici, d'accord ? Cela signifie que vous pouvez
accéder à la balise de paragraphe, qui est une balise P
en utilisant cet identifiant, d'accord ? Et si vous survolez ce
document point get element by ID, vous pouvez voir les renvois faisant référence
au premier objet avec la valeur spécifiée
de l'attribut ID L'attribut ID est donc
la couleur dans ce cas. OK ? Et nous sommes en mesure
d'accéder à l'élément D. Maintenant, vous pouvez
également avoir un code couleur
par défaut affiché ici. OK ? Je peux donc ajouter un code
couleur sous forme de hachage Les codes couleurs commencent donc par le hachage, et je peux dire FF FF, FF OK. Vous pouvez donc ajouter un code couleur
par défaut qui s'affiche réellement lors
du chargement de la page. C'est bon. Maintenant, une fois
que vous avez fait cela, vous devez cliquer sur ce bouton. Donc, en cliquant sur
ce bouton, le
code couleur devrait être généré, et la façon dont nous
allons le générer est d'avoir une génération aléatoire. C'est bon. Donc, ce que je vais faire, c'est venir ici
et nous devons avoir accès au bouton, car en cliquant
sur ce bouton,
du code devrait s'exécuter, n'est-ce pas ? Donc, ce que je vais faire
ici, c'est dire que je vais lui attribuer
un identifiant ici, et un identifiant peut être généré. OK. E n'y sera pas. OK. C'est là
et je vais venir. Je vais le copier et je vais voir le document point Get element
by ID se générer ici. OK. Maintenant, une fois que nous aurons
accès au bouton, je vais dire qu'il suffit de
cliquer sur ce bouton. OK. Nous devons donc indiquer de cliquer
sur ce bouton. Je dois ajouter une
fonction ici. OK. Voici maintenant la syntaxe pour définir une
fonction en JavaScript. OK. Et nous allons
définir une fonction. Maintenant, dans ce cadre, ce qui se passe,
c'est ce bloc de code. Cette fonction signifie que bloc de code que nous
définissons ici est exécuté
lorsque l'on clique sur le bouton OK ? C'est assez simple. Je vais dire « laisser » et une
couleur aléatoire sera générée. Maintenant, comment allons-nous
générer une couleur aléatoire ? Parce qu'il s'agit d'une couleur
aléatoire que nous afficherions également. Maintenant, pour générer
cette couleur aléatoire, nous allons
utiliser une formule. Maintenant, chaque fois que vous
représentez des codes couleur, cela commence par un hachage, puis vous avez une valeur
hexadécimale comme FF, CC, FF, quelque chose comme ça OK ? Nous devons donc obtenir
cette valeur hexadécimale. Au hasard, hachage, vous pouvez l'
ajouter manuellement, non ? Donc, ce que je ferais, c'est de venir ici. Nous allons utiliser la formule,
d'accord ? Et nous allons utiliser ce l'on
appelle un objet mathématique. OK ? Je vais donc
dire mathématiques ici et je vais
dire qu'un point maintenant dans mathématiques ou un objet mathématique en
JavaScript donne accès à de nombreuses fonctions
en JavaScript. L'une des fonctions est aléatoire. Maintenant, en utilisant cette fonction, vous
pouvez générer des nombres aléatoires. OK ? Donc, si vous passez la souris dessus, vous verrez un résultat
pseudo-aléatoire de 0 à 1 OK ? Maintenant, chaque fois que
cela est exécuté, il génère un nombre aléatoire. Alors laisse-moi te
montrer ça ici. OK ? Donc, Alco to Console, vous pouvez voir des calculs tendus et
aléatoires ici. Oups, Mt taut, random, quelque chose comme ça, et vous pouvez générer un nombre aléatoire Donc, chaque fois que vous l'exécutez, il va générer
un nombre aléatoire. OK ? Maintenant, ce que nous allons faire, c'est utiliser cela et
générer un nombre hexadécimal. Comment ? Je vais donc générer ce
nombre aléatoire, d'accord ? Permettez-moi donc de copier ce
nombre aléatoire qui est généré. Il s'agit donc d'un nombre aléatoire
qui est généré. Je vais vider la console, et je vais multiplier ce
nombre aléatoire par un nombre. Maintenant, ce nombre est de 1627 à 15. Maintenant, pourquoi est-ce que je le multiplie par
ce nombre ? Si je le multiplie par ce nombre,
c'est parce qu'il s'agit de
la valeur maximale OK ? Ce nombre représente
la valeur la plus élevée possible ou
maximale pour une couleur 24
bits, ou en hexadécimal. C'est donc avec cela que je vais
le multiplier. OK. Et puis, une fois la multiplication terminée
,
nous obtenons un résultat. Ensuite, je
vais utiliser Math Dot Floor. Maintenant, qu'est-ce que Math Dot Floor ? J'ai donc copié cette valeur
après multiplication. Qu'est-ce que Math Floor ? Matt Floor est une
fonction de sol qui vous
donnera donc si j'ai une valeur
décimale de un, quatre, cinq, six, le
résultat sera un OK ? Maintenant, si vous en avez un, quel que soit le nombre que vous avez,
il vous donnera la plus faible valeur décimale OK ? Donc, si vous avez 1,4 4636, il va
éradiquer ou ignorer cette valeur ici.
L'un d'eux est donc le résultat. Maintenant, si je le colle
ici, cela me donnera,
bien sûr, huit
fois deux, 8937 ici D'accord ? Ensuite, je vais
prendre cette valeur, cette valeur ici et
je vais la convertir
en représentation hexadécimale d'une chaîne de caractères. Pour une chaîne hexadécimale, c'est
ce que je peux dire. C'est bon. Je vais donc dire que ce
nombre est un point de deux chaînes, et je vais passer 16
comme argument, ce qui signifie que j'ai besoin d'
une valeur décimale exa D'accord ? Cela m'a donc donné une erreur ici.
OK. Laisse-moi voir. OK, donc pour que cela fonctionne,
il
faut que ce soit sous forme de chaîne. Je vais donc le copier à nouveau. Je vais dire « hash »
ici. Je vais le reconstituer. OK. Ensuite, je vais dire à string et laissez-moi essayer
ce 16 ici. Voyons voir. OK, jeton non valide
ou inattendu. 1 seconde Laisse-moi réessayer. Cela devrait donc fonctionner idéalement.
OK, donc ça marche. Vous pouvez le voir, pour une raison ou une autre, cela ne fonctionne pas sur
la console, d'accord. Mais laissez-moi vous le montrer
sur la carte d'identité elle-même, non ? Nous avons donc dit que nous allions
obtenir un nombre aléatoire. Je vais le multiplier
par 16777,
OK, à un, cinq Oups, ça doit
être cinq. C'est bon. Et tout ça, tout
ça doit être
dans une paire de bretelles rondes, puis je vais le passer
au sol ici. OK. Nous obtenons donc la
valeur du flux. C'est bon. Maintenant, permettez-moi de passer au journal par
points de la console ici. Au lieu d'un journal de console, ce que nous pouvons réellement
faire, c'est afficher dans Coal Para. La couleur du contenu du texte
est égale à la couleur aléatoire. D'accord ? Nous pouvons donc voir le résultat
ici même. C'est bon. Maintenant, si je rafraîchis, laissez-moi voir ce
qui se passe ici. Il sera donc déclenché si
vous cliquez sur Générer la couleur. Vous pouvez donc voir que ces numéros
sont générés. OK. Mais pour le moment, ce n'est pas la
représentation exadimale, Donc, ce que je ferais ici,
c'est de venir ici. Je dirais qu'on a appris à faire des
chaînes ici, et je dirais une valeur de
16, quelque chose comme ça. Et je garderais ça. OK ?
Je dirais générer de la couleur. Vous pouvez maintenant voir que ces
valeurs sont générées. Vous pouvez voir ces valeurs
d'examen. D'accord ? Vous devez le
préfigurer avec du hachage D'accord ? Donc je vais dire « oui » ici, quelque chose comme ça,
et je vais dire « OK ». Alors maintenant, vous avez des
codes couleur générés ici. Je ne suis pas sûr que le blanc ne
fonctionne pas sur la console. Si tu le sais, merci de
me le faire savoir. C'est bon. Mais cela fonctionne
parfaitement ici , comme vous pouvez le voir, d'accord. Maintenant c'est fait, d'accord ? Et ce que nous devons faire, c'est afficher
la couleur aléatoire. Ce que nous devons également
faire, c'est changer l'arrière-plan en fonction
de la couleur générée. Je peux donc dire document, tot body, et je peux dire tot style, tot, et je peux obtenir
la couleur de fond. Oups.
Couleur de fond ici. Et la couleur de fond
sera une couleur aléatoire. Et si je garde ça, tu
peux voir Fun, non ? Donc, avec du JavaScript
simple, combien de lignes de
script Java avez-vous écrites ? Même pas une, deux,
trois, quatre, cinq, cinq, six lignes de code,
vous êtes capable générer autant de magie.
C'est bon, tu peux voir. Ainsi, avec cette formule,
nous générons un code couleur que nous
affichons à l'utilisateur, et nous le
définissons également comme couleur d'arrière-plan. Maintenant vient le style point CSS, non ? Donc ce que je vais faire, c'est que
nous allons venir ici. OK, et commencez à
vous coiffer ici. OK. Je vais donc dire
famille de polices ici. Et j'ajouterai Found
Familia en tant qu'Aerial. OK. Et on peut dire alignement du texte. Je vais aligner le texte au centre. OK, marge ici, marge, on peut la mettre à zéro. Oups. Et puis, par
ici, je vais prendre du rembourrage Je vais avoir un rembourrage de 20 pixels. OK, et j'ai la couleur de
fond. Je peux avoir une
couleur de fond à hacher
ici et iFiFi
quelque chose OK. Donc oui,
c'est le premier CSS. D'accord, mais nous devons également
lier le CSS au fichier HTML. Ce n'est qu'alors que cela reflétera, vrai, ce que nous n'avons pas fait. Donc, ce que je peux faire, c'est ajouter un lien ici. RL est égal aux feuilles de style. OK. Feuille de style ici, et je peux avoir HRF. Et ce sera styles point css, et je vais le fermer.
Quelque chose comme ça. D'accord ? Vous allez donc maintenant voir le CSS
appliqué ici, d'accord ? Maintenant, le corps est prêt, d'accord. Nous pouvons le styliser un peu plus. OK. Il a une étiquette. Ce que je peux faire, c'est
ajouter de la couleur ici. La couleur peut être, d'accord,
au lieu de cela, je peux en ajouter 333 ici. OK. Ensuite, nous
devons styliser le bouton. Quel style peut-on donc
donner au bouton ? OK. Donnons-lui
donc une couleur bleutée. J'ai donc un code couleur en tête, donc je peux dire que je peux
avoir du bleu ici, une sorte de couleur
bleue, vous pouvez voir. OK. Faites maintenant défiler l'écran vers le bas. Couleur : Oups. La couleur est le blanc, 55. OK. Et une frontière, je ne peux pas
dire qu'il n'y en a aucune ici. OK, Boter est parti. Nous pouvons maintenant ajouter du rembourrage
pour lui donner un aspect décent, donc je peux dire dix pixels et 20 pixels, enregistrez-le. OK ? Ça a l'air décent. Vous pouvez également réduire le
rembourrage si vous le souhaitez. OK. Marge. Je peux avoir
dix pixels de marge. OK. Et je peux avoir une taille
de police de 16, disons. OK. Ou nous pouvons avoir
Cursor, pointeur ici. OK, rayon frontalier. OK, le rayon de la bordure peut
être de cinq pixels ici. OK. Et puis je peux avoir une
transition ici, une transition de couleur de fond. 0,3 seconde OK. OK. Donc ça y est. Vous pouvez voir le CSS
s'appliquer, d'accord ? Et si tu zoomes un peu. Vous devrez donc
zoomer un peu, d'accord. Voici donc le bouton CSS. Ou vous pouvez aussi faire
survoler le bouton, d'accord ? Donc, bouton. D'accord, H. D'accord. Et ici, vous pouvez dire la couleur de
fond, et vous pouvez ajouter du bleu foncé. OK. Vous pouvez voir que le CS
est en action. C'est bon. C'est donc chose faite. Vous pouvez
même avoir l'écran sur lequel vous affichez, vous affichez
réellement
ce code couleur, n'est-ce pas ? Vous pouvez donc également obtenir ce
style. Donc, j'
appuie accidentellement sur autre chose. OK, donc nous l'
affichons ici, en couleur. OK. Donc, ce que je
ferais, c'est de venir ici. Couleur Asta. Je vais comprendre, je vais faire
référence à cet identifiant, et je dirais que la taille de police de
vous pouvez dire 24 ici. OK, le poids de la police
est en gras ici. Vous avez accès au gras. OK. Et tu peux dire couleur ici. Couleur, tu peux ajouter, OK. Tu peux juste en garder 333.
Vous pouvez le voir ici. OK. Et puis vous pouvez avoir une marge et une marge de
20 pixels et 100. OK. C'est fait. Maintenant, oui, c'est ce que c'est. Je ne pense pas que nous devrions ajouter
« OK, donc c'est
fait, et nous pouvons avoir plus si vous le souhaitez ». Mais pour le moment, nous allons nous
arrêter ici, d'accord ? C'est à peu près ça, non ? Et c'est un générateur de
couleurs très simple. Vous pouvez voir comment, à l'aide d'un simple JavaScript, à
peine cinq ou
six lignes de code, nous avons
pu donner beaucoup de vie à notre page
Web statique, n'est-ce pas ? Donc oui, vous pouvez même choisir d'utiliser le vent arrière si vous le souhaitez Mais oui, j'ai juste choisi d'écrire un peu de CSS
brut, d'accord J'espère donc que cela vous donnera
un aperçu de la façon dont vous pouvez utiliser les
sélecteurs ici Et comment ajouter des écouteurs aux boutons et
comment exécuter un morceau de code après avoir ajouté écouteur à votre code
JavaScript C'est bon. Donc oui, j'espère que cela vous sera utile, et j'espère que vous avez
pu suivre.
26. Projet : construire un convertisseur de température: Voyons donc comment vous pouvez créer une
application de conversion de devises.
C'est bon. Nous allons donc travailler
sur
trois fichiers ici, comme index point has, index point HTML et style
point CSS. C'est bon. Nous allons donc commencer à écrire le
code dans le fichier HTML. Maintenant, toute cette
application
va
avoir une liste déroulante, qui aidera les
utilisateurs à sélectionner endroit où ils le souhaitent ou
dans quelle unité souhaitent convertir la
température, n'est-ce pas ? Ensuite, nous
aurons également une zone de texte dans laquelle l'utilisateur pourra entrer la
température qu'il souhaite convertir. Et en plus de cela, nous
aurons un bouton de conversion, lequel l'utilisateur pourra cliquer pour convertir
la température. Alors allons-y. Je vais juste
avoir une exclamation ici et je vais juste préparer
un code standard ici C'est bon. Maintenant, une fois que nous
aurons le code standard, je mettrai à jour le titre, donc je parlerai Convertisseur ici. OK. Et puis, dans le corps, j'aurai à nouveau l'étiquette Hone. Je vais donc simplement le copier entièrement, et je vais simplement le renommer
en H one C'est bon. Vous avez donc un convertisseur
de température. OK. Oui, tu peux voir. Alors maintenant, ce que nous devons faire,
c'est ajouter une entrée. D'accord ? L'entrée est donc
de type texte ici. OK, alors tapez du texte, et j'aurai également un
espace réservé Je dirais d'entrer la température. OK. Et nous allons fermer ça. Ajoutons
également un élément d'identification ici. Donc, l'identifiant pour cela peut être
Oups ici,
donc l'identifiant pour cela peut être la température ou la température, comme vous
le souhaitez Je vais juste faire
court pour ce qui est de la température. OK. Si vous voyez, vous avez ce champ de
texte sur les températures intercalaires ici. C'est bon. Maintenant c'est fait. Nous avons maintenant besoin d'une sélection, qui est une liste déroulante.
Je vais appeler ça. Je vais attribuer
cet identifiant d'unité. Et dans ce cadre,
je vais avoir choix. Par ici. OK. Maintenant, l'option sera de type
value et la valeur est C. Maintenant, l'affichage est Celsius.
Quelque chose comme ça. Et si tu viens ici, tu vas voir
Celsius là-haut. Je vais essayer de le
dupliquer ici. Au lieu de C, je
vais avoir F ici et je vais prendre Farin Fahrenheit,
quelque chose D'accord ? Donc, si vous
venez ici maintenant, vous allez voir des
degrés Celsius et Fahrenheit, ce qui est suffisant C'est bon. Maintenant, en
fonction de la sélection, C et F seront transmis
à l'application
ou à n'importe quel sélecteur ou endroit où vous
passez la valeur Maintenant, ici, tu
peux avoir un bouton. OK. Je vais ajouter un bouton
de conversion ici, l'ID est converti et le
texte Aad est converti ici D'accord ? Ensuite, nous devons également afficher la valeur convertie, donc je dirais
la température convertie ici. Quelle est donc la température
convertie ? Je vais ajouter une plage pour
afficher la température. D'accord ? Je vais donc dire span over here et nous aurons
zéro au départ, et je peux ajouter un identifiant, convertir
quelque chose comme ça. OK. C'est fait, vous
pouvez donc voir ici. Voici à quoi
ressemble l'interface en ce moment. C'est bon. Maintenant, nous pouvons rapidement
le lier à notre application, donc je vais parler de script ici. Je vais dire SRC et je dirais
index s, et je vais le fermer. Nous allons également lier la partie CSS. Je vais donc dire Link RL et
je dirais feuille de style. OK. Et je dirais que
je vais ajouter le HRF ici car les styles parsèment le
CSS et LCLoss. D'accord ? Donc c'est fait jusqu'à présent tellement bien, vous pouvez voir l'application. Nous devons maintenant commencer par
la partie JavaScript, c'est vrai. Alors maintenant, ce que nous devons faire,
c'est d'abord
au clic que le code
doit être exécuté, n'est-ce pas ? Nous devons donc obtenir ce bouton. D'accord ? Nous pouvons donc dire «
document point get element by ID »,
car nous utilisons l'identifiant ici. D'accord ? Et je peux vous dire de vous
convertir ici, non ? Et que devrait-il se passer ? Donc, en cliquant dessus, nous
voulons exécuter quelque chose. Je vais donc dire qu'il suffit de cliquer ici pour
exécuter une fonction. Une fonction n'a pas de nom, elle n'a aucun
type de paramètre, et je l'aligne d'abord avec
un point-virgule Et maintenant, dans cette fonction, nous pouvons ajouter ce que nous voulons, le
code que nous voulons afficher ou le
code que nous voulons exécuter simplement en cliquant sur
un bouton. Je vais donc
d'abord créer quelques variables ici,
la température, et je vais également
obtenir l'unité. Maintenant, nous devons d'abord obtenir la température ainsi que l'unité. OK. Je vais donc dire
document, taut, get element by ID, et nous devons obtenir une valeur
temp taut Maintenant, pourquoi Temp dot value. Donc voilà, c'est Temp. Nous obtenons donc d'abord la valeur saisie par l'utilisateur. Et puis nous devons également obtenir l'unité sélectionnée par l'utilisateur,
n'est-ce pas ? Donc, ce que je ferais,
c'est de le copier ici ou
d'attendre une minute, nous
devons le terminer. La valeur que nous
recevrons ici sera au format chaîne. Je ne veux pas
utiliser de chaîne, nous devons
donc également préserver les valeurs
décimales Alors, quel est le bon
choix ici ? Oui, comme vous pouvez le voir,
j'utilise parse float. Pourquoi est-ce que j'utilise parse float ? Parce que l'utilisateur peut
entrer une valeur décimale. J'ai aussi besoin de la
valeur décimale. Pour plus de précision. C'est bon. Je vais envoyer ce document point Get
Element ID ici, et je vais faire venir l'unité ici. OK, donc ça doit être dans
Ça doit être sous forme de chaîne. Je vais donc dire unité,
quelque chose comme ça. OK. C'est fait,
jusqu'ici tout va bien. OK. Et une fois que nous avons l'
unité et la température, nous
pouvons réellement écrire du code sur la base
duquel la conversion
aura lieu, n'est-ce pas ? Maintenant, quel devrait être ce code ? Nous devrons donc utiliser la prise de décision
ici, non ? Donc, si l'utilisateur
sélectionne farenhight. Une formule est appliquée. Si l'utilisateur sélectionne Celsius
et clique sur Convertir, une autre formule est appliquée. Ainsi, en fonction de ce qui
est sélectionné ici, l'application de la formule change. C'est bon. Alors laissez-moi d'abord
vous montrer la formule, d'accord ? La formule est donc de convertir les
degrés Celsius en degrés Fahrenheit, nous dirons la température en
9/5 ici plus 32 C'est une formule que
nous allons utiliser
pour convertir C
en F. Ensuite, pour convertir les degrés
Fahrenheit en degrés Celsius, nous allons dire température -32, et nous allons dire 9/5.
C'est bon. Ces deux formules sont les suivantes. Permettez-moi également de
le mentionner ici. Cela convertira F
en C. D'accord ? Maintenant, comment savoir quelle formule nous voulons
exécuter, n'est-ce pas ? Donc je vais le dire. Donc, ce que je vais faire, c'est
dire si l'unité est égale à C. Donc l'unité I est C, n'est-ce pas ? Donc, si l'utilisateur a sélectionné Celsius ici
en haut vers le bas, il devrait se passer pour convertir C en F, n'est-ce pas ? Parce qu'alors nous devrions l'
exécuter, non ? Ou si ce n'est pas vrai
, nous pouvons l'exécuter
. C'est bon. Et nous pouvons avoir cette partie dans
la paire de bretelles rondes et même cette partie dans la paire d'accolades
rondes pour plus de clarté. D'
accord ? Quelque chose comme ça. OK. Et puis je peux assigner la sortie de celui-ci à convertir. La température ici,
qui est une variable. OK. Et si je viens ici. Oups. Donc, si je viens ici, je le peux pour que nous ayons
cette température convertie. Nous pouvons afficher cette température
convertie. Alors, comment vais-je l'afficher ? Je vais copier ce texte, et nous devons l'afficher
dans ID converti, non ? Est-ce l'identifiant que nous donnons ? OK, donc l'identifiant est
converti, oui, nous devons
l'afficher dans le span, non ? Donc point converti. Je parlerai du contenu du texte et du point temporaire converti Je peux simplement afficher la température
convertie. Voyons quelle est la
valeur que nous voyons. Disons que la
température est de 100, je sélectionne Celsius. C'
est Celsius, non ? Je dois donc le convertir en
Fahrenit. Donc ça fait 21, deux. OK. Maintenant, si vous
voulez vérifier cela, vous pouvez simplement rechercher Celsius
à Fahrenit sur Google et vous trouverez cette calculatrice sur
Google lui-même, Google Search Vous pouvez donc entrer 100 et vous pouvez voir le résultat
comme un, deux. C'est bon. Nous pouvons
faire de même pour Fahrenit si vous sélectionnez
Fahrenit La température en
degrés Celsius est de 122,4, et vous pouvez
le vérifier ici J'ai Google maintenant
Fahrenit à Celsius. C'est donc de Celsius à Fahrenit. C'est de loin Celsius. Donc, si je dis 100, je comprends, accord, donc il y a
quelque chose d'une seconde. Il y a donc 100 degrés Fahrenit
et je suis en train de convertir OK,
donc ma conversion semble fausse, donc il devrait faire
37 degrés Celsius, Mais j'en ai 122. Donc,
si vous venez ici, il y peut-être quelque chose
qui ne va pas dans la formule. OK, donc c'est impossible. OK, donc ça ne devrait pas
être neuf par cinq, ça devrait être cinq
par neuf ici. Maintenant, si vous venez, vous trouvez une conversion de
100 degrés Fahrenheit, vous pouvez voir 37,77 78 OK. Alors maintenant c'est
correct. C'est bon. Il y a eu une erreur
dans la formule, alors assurez-vous
d'utiliser cette formule, n'est-ce pas ? Alors maintenant, ça ne s'annonce
pas bien, non ? C'est 7777, un lot de
sept, puis huit. Je voudrais donc le déplacer vers décimales
fixes ou une
position fixe de deux places Donc, ce que je peux faire ici,
c'est que je peux dire convertir une température, tendue, en fixe, et
je peux dire deux Vous pouvez voir, le nombre de chiffres. Cela vous permet donc de mentionner le nombre de chiffres
après la virgule décimale et doit être compris entre 020 et 20, je suis désolée, inclus Donc, si je sauvegarde ceci,
et si vous venez ici, si je saisis 100 degrés Celsius, c'est bien. OK. Je vais donner zéro, zéro. Si vous ajoutez Fahrenheit,
vous verrez 37,78. C'est bon. C'est ainsi que fonctionne
le convertisseur
de température de manière
assez simple, d'accord. Mais avec l'aide de JavaScript, nous pouvons faire beaucoup de choses, n'est-ce pas ? Maintenant, jetons un coup d'œil
au style ici. OK. Nous garderons
le style très simple ici. Je vais juste en taper quelques-unes. Je vais juste taper
quelques styles, d'accord, comme style, je vais juste taper
quelques éléments de style. Je vais donc simplement ajouter quelques éléments de
style ici. Donc, pour la famille, disons
comme celui-ci. OK, ligne de texte. Je vais garder le centre
et la marge à zéro. Et je dirais que le rembourrage est de 20. Probablement. OK. Et j'ajouterai probablement de la couleur de
fond. Nous pouvons ajouter un arrière-plan
sous la forme, disons, d'Azure. Voyons à quoi ça ressemble. OK. Est-ce que ça a l'air bien ? C'est bon. Azure
a l'air décent. Courier a également l'
air décent, d'accord ? Ou vous pouvez mettre à jour
la famille de polices si cela ne vous plaît pas, d'accord ? Ainsi, la famille de polices peut être, vous pouvez sélectionner le capteur Alvita
aérien Tu peux voir. Cela va également. En fonction de votre choix, vous
pouvez choisir la famille de polices. Viens voir H one
par ici. OK. Maintenant, pour H one, je vais
voir la couleur. Quelle est la couleur ? Vous pouvez sélectionner probablement
descendre et vous pouvez avoir une couleur noirâtre. Je peux aussi le mettre à jour, donc vous pouvez le mettre à jour avec
quelque chose comme ça. C'est à vous de
décider ou vous pouvez vous en tenir au
noir ici. Je vais
juste m'en débarrasser. Je vais juste rester simple. OK. OK. C'est chose faite. Maintenant, ici, nous pouvons voir la
sélection et l'entrée. Je peux donc dire saisie
pour taper sous forme de texte. OK. Et pour sélectionner
ici. Il s'agit d'un CSS. Maintenant, ici, je peux dire un
rembourrage de zéro pixel. OK. Je peux dire qu'il y a une
taille de police ici de 16. OK. Alors vous pouvez avoir une marge de
dix pixels par ici, d'accord ? Vous pouvez avoir un rayon de puissance
de cinq pixels. C'est bon. Vous pouvez avoir une largeur
ici d'un pixel, solide, et je dirais hashtg alors vous pouvez avoir une largeur
ici de 200 Laissez-nous enregistrer et
voir, vous pouvez voir. Cela a un peu changé, non ? Ça a l'air plutôt
décent, non ? Vous pouvez ajouter plus de
rembourrage si vous le souhaitez. OK. Je peux augmenter le
rembourrage à dix, disons. OK. Le rembourrage n'était pas
très beau, mais maintenant il a l'air
décent, vous pouvez le voir OK. Et maintenant,
passons à autre chose, le suivant est le modèle ici. Jetons donc un coup d'œil au
modèle, à tout ce que nous pouvons ajouter. D'accord ? Donc, pour le bouton, je vais dire motif
ici et faire défiler la page un peu vers le bas. OK. Donc, pour le bouton, nous pouvons
dire la couleur de fond, euh, laissez-moi ajouter du bleu. OK. Je peux dire la couleur du blanc, la bordure n'en est pas une. Et je peux ajouter du rembourrage ici, dix pixels, 20 pixels,
quelque chose comme ça Et vous pouvez dire police, d'accord, pas police, taille de police. La taille de police peut être de 16 et
devrait sembler décente. Nous modifierons
cela si ce n'est pas le cas. OK, pointeur du
curseur ici. Je peux dire que le rayon de poudre est de cinq pixels,
quelque chose comme ça. Et oui, je pense que c'est ça. Si tu viens ici, d'accord,
ça a l'air plutôt sympa. Vous pouvez ajouter un effet de survol
si vous le souhaitez, d'accord ? Je peux donc dire survoler le bouton. OK, donc le survol du bouton
peut être une couleur d'arrière-plan, et je peux dire bleu foncé Viens ici. Vous pouvez voir
cet effet, non ? C'est à peu près ça. C'est bon. Et maintenant, vous pouvez ajouter
un style pour le PTAC. D'accord ? Je peux dire que la taille de la police et les pixels DIN sont un peu
plus grands que ceux du bouton. Et le poids de la police est en gras. Et puis la couleur est 333. Marge de je peux dire
20 pixels et zéro. Si tu viens ici, d'accord ? Maintenant, ajoutons donc
ce que nous avons, qui est converti, nous allons
ajouter quelque chose à cela. OK. Je vais venir ici
et là, le convertir. Donc pour cela, je vais dire couleur. Couleur de « we can say
I can a it blue ». OK. Selon
vos préférences, vous pouvez indiquer la taille de police. Je dirais gros et
solide, audacieux. Voyons à quoi ça ressemble. Donc, vous pouvez voir assez
bien, se démarquer.
Tu peux le convertir. OK. Voici donc notre convertisseur de
température, et la façon dont il a fonctionné est que nous l'avons construit ou
que nous avons écrit du HTML, du HTML
simple, des balises simples que nous avons utilisées,
nous avons créé des liens, comme du
JavaScript et du CSS. Dans JavaScript, nous
obtenons le bouton de conversion, et nous l'ajoutons
au clic Lissner, qui se déclenche
lorsque vous cliquez dessus, puis vous obtenez ces valeurs que vous allez récupérer car
sur cette base,
vous allez
effectuer la vous allez
effectuer Assurez-vous de le faire, obtenez la
valeur de température sous forme de flotteur. Huit. Ensuite, nous convertissons la
température à l'aide de vous pouvez voir ici à
l'aide d'un
opérateur ternaire, n'est-ce pas ? Vous êtes donc en train de vérifier d'abord.
C'est une condition. D'accord, vous vérifiez d'abord
si l'unité est égale à Celsius. S'il est égal à Celsius, vous devez convertir
Celsius en ferrenit Si l'unité actuelle n'est pas le
Celsius, si c'est le ferrenit, vous devez convertir
le ferrenit Celsius, et voici
les formules Et puis vous affichez
le résultat converti en
coupant les
décimales jusqu'à Et puis vous avez
ajouté
un style de base pour l'embellissement. J'espère donc que vous avez
pu me suivre, et j'espère que cela vous a été utile.
27. Littérature de modèle: Il est maintenant temps de
commencer à parler modèles littéraux et de
comprendre ce qu'ils sont Donc, chaque fois que vous
travaillez avec des chaînes, d'
accord, comment
créez-vous une chaîne, accord ? Désolée pour les casquettes. Vous pouvez créer une chaîne de
cette façon pour pouvoir dire, et le nom est égal
à W doubles codes, vous pouvez attribuer un nom ici. OK ? Désormais, au lieu
de codes doubles, vous pouvez même
utiliser un code unique. D'accord, je peux sélectionner le texte et
taper un seul code. Donc c'est aussi une
chaîne valide ici, d'accord ? Maintenant, c'est une façon
de créer des chaînes et une autre méthode consiste
à utiliser des modèles littéraux. Maintenant, que sont les littéraux des modèles ? Ils vous permettent donc de
travailler avec des chaînes de
manière plus flexible et
plus lisible. Maintenant, que signifie « plus flexible »
et « plus lisible » ? C'est également flexible, non ? Mais c'est une bonne solution pour les cas d'utilisation
simples. Maintenant, il y aura des cas d'utilisation dans lesquels vous voudrez peut-être
créer, disons, une variable supplémentaire. OK ? Je souhaite créer
une autre variable, et je souhaite vous dire bonjour. OK ? Et j'aimerais avoir un
nom ici, non ? Je vais donc devoir dire
quelque chose comme ça. OK. OK. Maintenant, si je fais un journal par points sur la
console ici, je peux dire bonjour. OK. Vous verrez donc Hello
Alice ici. C'est bon. Donc, si vous voulez
concaténer deux chaînes, vous utiliserez
plus ici Maintenant, c'est une solution,
mais si vous voulez faire plusieurs sortes
de choses, si vous voulez
créer une chaîne à la volée
et si vous voulez utiliser plusieurs variables lors
de la
construction d'une chaîne, parce qu'ici nous n'utilisons qu'une seule variable, n'est-ce pas ? Nous n'utilisons pas plusieurs variables. Donc
ça va toujours. Mais si vous avez plusieurs
variables dans lesquelles vous utilisez plusieurs variables pour construire
une chaîne de manière dynamique, cette approche n'est pas du
tout facile et elle n'est pas du
tout flexible ou lisible. C'est bon. Donc, dans ce cas, vous pouvez utiliser le
modèle littéral Je vais donc vous montrer ce que sont les
modèles de litière. Nous utilisons
donc ici une seule citation, d'accord ? Et nous utilisions le signe plus ici pour ajouter
la variable à la fin. Mais ici, lorsque vous utilisez syntaxe littérale d'un
modèle, vous pouvez dire
bonjour, et j'
utiliserai plus haut ici parce que je veux ajouter un
nom ici, n'est-ce Et je vais dire mon nom. OK. Le modèle
littéral est donc essentiellement une syntaxe que vous utilisez pour créer des
chaînes à la volée accord ? Maintenant, ça ne marchera pas. Je n'ai pas enregistré le
fichier. Cela ne fonctionnera pas car il s'agit
toujours de codes uniques. Donc, pour que le modèle fonctionne
littéralement. OK, laisse-moi faire le set de contrôle. Donnez-moi la même syntaxe. OK ? Si je le sauvegarde, vous verrez le nom de Hello Dollar. Cette valeur n'est donc pas
remplacée. Pour remplacer cette
valeur, je devrai ajouter Bates au lieu d'
utiliser un code unique Vous pouvez voir des backticks. Vous avez maintenant une sorte de surlignage
syntaxique ici, et vous pouvez voir le nom ici. OK ? Maintenant, cela fonctionne avec
n'importe quel type de variable. Si j'ai une variable
appelée nom de l'étudiant, d'accord, je peux avoir le
nom de l'étudiant ici, et ici je peux dire que
chacun est égal à 17. Disons, par exemple.
Bonjour étudiant, d'accord ? Et je peux dire que tu l'es. Je peux utiliser So I want
to print in age now, non ? Je peux donc dire dollar, âge. OK. Et tu es vieux. OK. Vous verrez donc ici. Bonjour, Alice,
tu as 17 ans. Tu peux voir ça ? OK. Si je fais un petit
zoom arrière par rapport à l'éditeur, vous verrez ceci s'
imprimer. C'est bon. C'est ainsi que les
littéraux des modèles peuvent être utiles. Imaginez maintenant que vous
fassiez cela à l'aide de l'opérateur de
concaténation, l'opérateur plus que
nous utilisions D'accord ? Ce n'est pas bien si
la chaîne est un peu complexe. Il est construit de manière un
peu complexe. OK ? Et ce n'est pas
simple. Si vous utilisez
plusieurs variables, il n'est pas pratique de créer des chaînes sans l'aide de modèles
littéraux OK ? Vous pouvez donc voir à quel point la syntaxe est
pratique. Il est également lisible. Donc, la définition ici
dit que c'est lisible, non ? Et c'est lisible.
Ainsi, toute personne lisant votre code saura ce que
vous essayez de faire ici. OK ? Et ID fait également un excellent travail en
surlignant la syntaxe ici. Ainsi, dès que vous ajoutez un dollar
et ces accolades, cela est mis en évidence dans
une syntaxe différente accord ? Alors, modèle, que
sont les littéraux du modèle Les littéraux de modèles sont une
syntaxe à l'aide de laquelle vous pouvez construire des chaînes
et les utiliser de
manière plus flexible et, je dirais, plus lisible Et qu'est-ce qu'une
syntaxe ? Donc normalement, vous pouvez créer une chaîne en utilisant des codes simples ou des
guillemets, n'est-ce pas ? Et vous pouvez concaténer en utilisant l'opérateur plus,
n'est-ce pas ? Mais ici, vous utilisez des
chauves-souris. Ainsi, lorsque vous
utilisez des textes antérieurs, vous dites à
Jascript que « Hé, je veux utiliser
des modèles littéraux et que cette chaîne peut
contenir des expressions Hein ? Maintenant, il s'agit d'une
expression dans laquelle la valeur est
substituée ici. D'accord ? Il s'agit donc d'une chaîne d'une seule ligne. Maintenant, il existe également
des scénarios dans lesquels vous souhaitez créer une chaîne
multiligne OK. Permettez-moi donc de
vous donner un autre exemple. OK. Je vais ajouter un commentaire ici. Jetons un coup d'œil à
Multiline. String par ici. OK ? Je vais donc avoir plusieurs
lignes et d'accord, 1 seconde. Je vais avoir une
chaîne multiligne, comme ça. OK. Et je peux dire que c'est
une chaîne multiligne. OK. Maintenant, au
moment où vous faites cela, vous allez avoir des erreurs. Ce n'est pas correct.
OK ? Parce que vous ne pouvez pas créer une chaîne
comme celle-ci dans le script Ja. Même si vous ajoutez des codes uniques, cela ne fonctionnera pas. Maintenant, comment créer
une chaîne multiligne, est-ce pas ? Dans le script Ja. Vous pouvez donc utiliser
des modèles littéraux, comme je l'ai dit, et
utiliser des backticks Cela ne donnera donc aucune
sorte d'erreur, n'est-ce pas ? Et vous pouvez simplement
dire Console point log, et vous pouvez imprimer sous forme de chaîne
multiligne Vous pouvez donc voir qu'il s'agit d'une chaîne
multiligne, n'est-ce pas ? Maintenant, d'accord, maintenant je peux même prendre chaque mot d' une nouvelle ligne, ce qui est
également faisable ici Si je l'enregistre, vous
pouvez voir qu'il s'agit d'une chaîne multiligne, n'est-ce pas ? C'est donc le pouvoir de, des littéraux
de modèles. Et la syntaxe
est essentiellement que vous aurez des backticks
ici, d'accord, quelque chose comme ça, et
vous aurez une chaîne normale, et il peut y avoir des
expressions ici OK, donc tu peux dire
une expression comme celle-ci. C'est donc une syntaxe, OK, et laissez-moi taper. C'est la syntaxe ici. OK. Voici donc comment
nous pouvons l'utiliser. Maintenant, laissez-moi vous montrer
plusieurs cas d'utilisation, d'accord. Alors maintenant, nous ne faisons que
substituer des variables, n'est-ce pas ? Mais tu peux même avoir des
expressions, d'accord ? Vous pouvez donc dire des expressions, et vous pouvez
utiliser des expressions
dans des littéraux de modèles Huit. Laisse-moi voir. Disons que j' ai laissé E égal
à cinq ici. J'ai que B soit égal à dix, par
exemple, je dirais que
le résultat est ici. OK. Maintenant, je vais faire des backticks Je vais dire la somme de tout, et je vais dire A, et je dirais que B est. Maintenant, quelle est la somme ? OK, nous devons
imprimer la somme, non ? Je vais donc dire A plus P. D'accord. Ensuite, je dirai
Console point log, et je dirai résultat. Vous verrez donc que la somme de
cinq et dix est 15. OK ? Nous intégrons donc maintenant des expressions dans le
modèle littéral, Cela fonctionne donc
parfaitement, et vous pouvez voir comment les
expressions sont également évaluées à la volée et comment
la chaîne est construite. accord ? C'
est donc également possible. Nous pouvons même utiliser des modèles littéraux avec des objets de script
Ja Supposons que j'ai un objet
utilisateur ici, qui porte un prénom, et que j'aie John
comme prénom. OK. Je vais juste avoir deux
propriétés et mon nom de famille. OK. Désolé, au lieu
d'être égal à, il s'
agira de paires
clé-valeur. D'accord, donc John et
moi allons en dire deux par ici. Maintenant, c'est un
objet JavaScript, non ? Donc, ce que je peux faire, c'est
dire « laissez les informations sur les utilisateurs ici ». Laissez les informations utilisateur être des informations utilisateur, et je vais passer à la ligne suivante. Je dirais que le nom est. Maintenant,
quel est le nom ? Je dirais plus grand et je
dirais utilisateur Tt, prénom. OK. Et je vais dire plus grand, utilisateur tot, nom de famille,
quelque chose comme ça Et puis je peux dire
console point log. Vous pouvez indiquer des informations sur l'utilisateur. Quelque chose comme ça. C'est bon. Et vous verrez les informations de l'utilisateur, Colin, il s'appelle John Doe. Maintenant, si vous avez plus
d'informations sur l'utilisateur, par
exemple, vous pouvez
indiquer l'âge ici. OK. Disons que c'est
33, par exemple, non ? Vous pouvez toujours ajouter une
autre ligne ici. Vous pouvez dire que l'âge est plus grand
et que l'utilisateur vieillit,
quelque chose comme ça Vous pouvez voir que l'âge est de 33 ans. OK. Donc oui, cela peut également fonctionner avec des objets
tels que des objets. C'est bon. Maintenant, si c'est le cas, comment travailleriez-vous avec des chaînes
déjà cochées B ? OK ? Alors laissez-moi
créer une chaîne. Supposons que vous
ayez une chaîne E, qui indique qu'il
s'agit d'un backtick OK. OK, j'aime bien qu'il s'agisse
simplement d'imprimer un message, et qu'il soit écrit, c'est
un backtick, d'accord ? Vous allez maintenant voir que cette coche arrière
est imprimée ici. OK. Mais maintenant,
dès que je l'aurai converti
en chaîne littérale ou, désolé, modèle littéral, vous
verrez qu'il y a un problème OK ? Il pense donc que
c'est le point final. Comment travaillerais-tu avec
ce type de chaîne ? Donc, dans ce cas, vous devez
échapper au sens de cela. Donc, pour échapper, vous pouvez ajouter une
barre oblique inversée ici. OK ? Et une fois que vous l'aurez enregistré, vous verrez qu'il s'agit
d'un backtick. Hein ? Cette barre oblique inversée n'
est donc pas prise en compte, mais elle annule le sens
du backtick Et ce truc ici
est connu sous le nom d'évasion. OK ? Vous êtes donc en train d'
échapper au tic arrière ici, ce qui signifie que vous
échappez à la signification du tic
Bac et que vous en faites partie de la
ficelle. D'accord ? donc cette coche arrière qui est
prise en compte et non celle-ci lors de la fermeture
latérale du gabarit ici. C'est bon. Donc oui, il s'agit de modèles littéraux. Si vous travaillez
avec JavaScript, vous verrez de nombreux
modèles littéraux dans le code Si vous lisez ou si vous créez
vos propres projets, vous
utiliserez beaucoup ce concept. Bien, si
vous travaillez avec des chaînes en JavaScript, n'est-ce pas ? Donc oui, ce sont des modèles
littéraux pour vous.
28. En faire plus avec console.log: Salut, voilà. Il est donc
temps de commencer à parler de console point
log. C'est bon. Maintenant, nous avons utilisé ou si vous avez vu un quelconque type
de code JavaScript, vous devez déjà avoir
vu ou devez savoir ce qu'est le journal des points de
la console. Très bien, il est donc utilisé pour
imprimer des choses sur la console. Donc, si je dis bonjour tout le monde,
et si
je l'enregistre, je vais voir Hello world
over here en sortie. Donc, peu importe ce que je cède ici entre ces deux codes
ou un seul code, je peux également utiliser un seul code. Je vais voir ce truc comme une
sortie ici, d'accord ? Et je peux aussi, donc si je dis
console point log, un, deux, trois, et si je sauvegarde l'impression de ce
RC 123. OK ? Il s'agit donc d'une forme de
journalisation de base que vous
utilisez et la journalisation est l'une des
méthodes ou fonctions disponibles
sur cet objet de console. Donc, la console est un
objet, en fait, d'accord ? Et vous utilisez le journal pour
obtenir des valeurs et les
imprimer sur la console. C'est bon. Maintenant, ce que nous voyons
ici est une journalisation de base, n'est-ce pas ? Vous pouvez bien entendu
enregistrer plusieurs valeurs. Alors, comment enregistreriez-vous
plusieurs valeurs ? OK, prenons donc
plusieurs valeurs. Vous pouvez donc dire « console
point log » ici. OK. Et je peux imprimer le nom. OK. Et je peux dire ici, je peux ajouter Alice, puis je peux avoir chacune, quelque chose comme ça
et je peux dire 25. OK. Maintenant, cela peut également être
remplacé par des variables. OK, tu peux voir le
nom d'Ale, 25 ans. OK. Et je sépare tout à
l'aide d'une virgule Je peux même utiliser
Plus ici. Donc, si je copie ceci, d'accord, vous pouvez ajouter un avantage. Donc, au lieu de cela,
vous pouvez dire « plus ». D'accord, cela va donner un résultat
similaire. Tu peux voir. Donc oui, c'est une façon d'
imprimer plusieurs valeurs. Et, bien sûr,
ces valeurs peuvent également être remplacées à l'aide de
variables, n'est-ce pas ? Vous pouvez donc
utiliser des variables, comme je l'ai dit, d'accord, vous pouvez
donc dire que X
est égal à dix ici et que Y est égal à 20. OK. Et si je dois imprimer, je peux dire « journal des
points de console » ici, la valeur
D de X est, et je peux ajouter X. D'accord. Vous pouvez voir que c'est
une variable qui arrive ici. C'est bon. Tu peux même,
genre, avoir des expressions. Vous pouvez donc dire que la somme
est OK, X plus Y. Vous verrez 30. Tu peux voir. C'est ainsi
que fonctionnent les différentes choses. Vous pouvez également utiliser des
modèles littéraux ici. OK, donc je peux littéralement
venir ici. Au lieu d'
utiliser des codes doubles, je peux le rendre beaucoup
plus lisible ici, et je peux dire plus grand, quelque chose comme ça, et je
peux avoir ceci. Tu peux voir. La somme est de 30. D'accord, vous
utilisez donc des modèles littéraux et vous obtenez les
valeurs. C'est bon. Maintenant, si vous avez créé
un objet, vous pouvez
également l'enregistrer. Laissez-moi vous le montrer. OK ? Donc, enregistrer des objets, non ? Maintenant, permettez-moi de créer un objet
appelé personne ici. OK ? Et je vais dire mon nom. Je vais dire Charlie. OK. Et je dirais que l'âge est, disons, 28 ans, et je peux dire que le
métier est développé. OK. OK. C'est donc une personne qui s'appelle Charlie 28 ans et le métier est développeur. OK. Maintenant, je peux simplement
dire console point log. OK, je peux dire le nom,
désolé, le nom de la personne à point. Et le nom sera imprimé
, non ? Tu peux voir Charlie. Maintenant, je peux simplement me débarrasser
du nom
ici et je peux simplement imprimer
l'objet de la personne dans son intégralité. C'est également possible
avec Console Log, non ? Vous pouvez même avoir un style C ou
même une sortie formatée OK ? Donc, ce type
de sortie formatée, vous devez l'avoir vu
si vous êtes familier avec la programmation en C, d'accord ? Donc, si je dis console point log, d'accord, et laissez-moi comprendre. OK. Donc, si je dis
la valeur de X ici. X est le pourcentage D. D'accord ? Et si je sauvegarde ceci, vous
verrez que la valeur de la valeur est, cela devrait être le fait que l'énoncé n'
est pas correctement encadré, donc la valeur
doit être le pourcentage D, ou vous pouvez avoir la valeur
de X ici, pourcentage D. Vous
utilisez le pourcentage D, qui agit
comme un espace réservé pour remplacer les valeurs. Hein ? Maintenant, si vous
utilisez cet espace réservé, un
seul espace réservé Et si vous ajoutez plusieurs valeurs de
substitution
ici, d'accord ? Et si vous lancez ceci, vous verrez qu'il est juste ajouté
à la fin, d'accord ? Et oui, c'est comme ça que ça marche. Maintenant, vous pouvez également avoir
plusieurs espaces réservés ici D'accord, vous pouvez donc dire
console point log. Et je peux dire bonjour,
pourcentage S. Maintenant, le pourcentage S est pour la chaîne. Le pourcentage D correspond aux valeurs
décimales. Pourcentage D parce que H est pourcentage D et
je dirais plusieurs années. Vous pouvez voir le pourcentage S de Hello et le pourcentage D
datent d'il y a des années. Maintenant, je peux avoir Ale ici, et je peux en avoir 22 ici. Si je garde ceci, tu
verras Bonjour Alice, tu as 22 ans accord ? C'est ainsi que journal de
console peut être
utilisé de plusieurs manières. Ce journal est une méthode ou une
fonction, je vous l'ai dit, non ? C'est une méthode disponible
avec Console Object. Maintenant, il existe plusieurs
autres méthodes, d'accord ? Donc, les méthodes de la console. OK ? Il existe maintenant plusieurs autres
méthodes. Quels sont-ils ? Nous avons donc le journal de la console
, que nous avons vu. Vous avez une
erreur de point de console ici, vous pouvez voir que l'erreur
est aussi une méthode, et je peux voir que c'est une erreur. Vous pouvez transmettre n'importe quel
message d'erreur, et vous verrez qu'il s'agit d'une erreur. Vous pouvez voir comment ça
arrive, non ? Je peux le copier et
au lieu d'une erreur, je peux avoir un avertissement ici. Il s'agit d'un avertissement. Et si je sauvegarde ceci, vous
verrez que c'est un avertissement, non ? Et si je le duplique, vous pouvez également avoir un message
d'
information ici, afin que je puisse dire des informations. Ce sont donc des informations. C'est informatif.
Et si je sauvegarde ceci, vous verrez que c'est
informatif, non ? L'avertissement est donc
affiché de cette façon. Les messages d'information sont affichés de cette façon et les erreurs s'
affichent de cette façon, n'est-ce pas ? Donc oui, il existe plusieurs manières d'
utiliser les méthodes de console. Maintenant, vous pouvez également
utiliser la table de console. OK ? C'est donc une autre chose
étonnante. C'est bon. Maintenant, disons que cet
objet s'appelle « personne », d'accord ? Et si je dis, d'accord, disons
console point log. Si j'utilise le journal de la console
et si je dis personne, vous verrez que l'affichage n'
est pas très bon. Il affiche sous forme JCN paires clé-valeur,
qui sont extensibles Je veux l'avoir sous forme de
sortie sous forme de tableau. Je peux voir la console, le tableau
ici et je peux passer en personne ici et
je peux avoir un point-virgule Si je sauvegarde ceci, vous verrez que l'index est le nom, la valeur est Charlie. Indice H, la valeur est 28, l'indice est la profession, la valeur est développeur. Vous pouvez également le
trier. OK. Donc, il y a aussi un
peu de fonctionnalité ici, et
c'est l'objet, juste au cas où vous souhaiteriez
le voir sous forme Json ou
sous forme d'objet. Hein ? C'est donc la
fonctionnalité du tableau qui vous permet d'imprimer éléments
complexes tels que la structure de données d'
un objet
ou une variable d'objet
sur la console. C'est bon. Et vous pouvez voir que
c'est ainsi que cela apparaît. C'est bon. Donc, en effet,
la console est très précieuse. Vous pouvez utiliser le journal. Vous l'utiliserez
très fréquemment. Vous pouvez l'utiliser pour imprimer
des objets, des modèles littéraux, des valeurs de
substitution
, créer des chaînes la
volée à afficher
en sortie Vous pouvez utiliser un format de sortie
formaté si vous venez d'un environnement de
programmation comme C, C plus plus, d'accord ? Vous pouvez également faire en sorte que cette sortie
formatée existe également en Java OK ? Vous pouvez également
obtenir ce type de sortie
formatée en
Java, n'est-ce pas ? Ensuite, vous pouvez avoir
différentes méthodes de console pour imprimer des messages d'erreur, des messages d'avertissement, des messages d'information. Et au final, vous avez un tableau, pour afficher des objets tels que des objets sous forme
de tableau, n'est-ce pas ? J'espère donc que cela vous sera
utile et que vous avez apprécié l'exploration de
Console Object.
29. Conclusion du cours: C'est la fin de cet incroyable voyage dans
le monde de JavaScript. Tout au long de ce cours, vous avez acquis une base solide en JavaScript tout en apprenant les principes fondamentaux de
JavaScript tels que les tableaux,
les opérateurs, les objets et les
différents types de données Vous avez également compris
le
fonctionnement de JavaScript dans
des environnements réels. Nous avons également parlé
de certaines applications pratiques et de certains projets que
nous avons réalisés en classe. J'espère que ce cours vous
a aidé à envisager Jascript un
angle complètement différent Mais n'oubliez pas que l'apprentissage de Jascript ne
doit pas et
ne s'arrête pas là La meilleure façon de grandir en tant que programmeur est
de continuer à pratiquer, construire des choses
et même à expérimenter Parce qu'en élaborant des projets, vous appliquerez tous les
concepts que vous avez appris, et cela
vous aidera également à prendre confiance en vous
avant de passer à des projets
concrets. Maintenant, je voudrais
vous demander de continuer à pratiquer, à explorer et
à expérimenter ce cours en particulier, vous trouverez un projet de classe
dans la section des projets, que je vous encourage à compléter et à partager
avec l'ensemble de la classe. Merci de
m'avoir rejoint dans ce voyage. J'espère que ce cours
vous a aidé à prendre confiance en JavaScript et
vous a donné envie de continuer à apprendre Bon codage et
tout le meilleur.