Transcription
1. Introduction: Bonjour à tous,
et merci d'avoir participé à ce nouveau projet
JavaScript. Dans ce projet, nous allons
apprendre comment créer un convertisseur de température en utilisant
HTML, CSS et JavaScript. Vous pouvez voir ici que nous
avons deux entrées, l'une pour les degrés Celsius et l'autre pour
les degrés Fahrenheit Donc, si je viens ici et que j'
ajoute des degrés Celsius, vous pouvez voir qu'ils
sont automatiquement convertis en Fahrenheit et affichés ici
dans l'entrée Fahrenheit Notez également que nous avons
ces deux flèches vers le haut et vers le bas que nous pouvons utiliser pour augmenter
ou diminuer les degrés. Nous pouvons également convertir dans l'
autre sens des Fahrenheit en degrés Celsius en saisissant une
valeur en degrés Fahrenheit ici, et vous pouvez voir qu'elle est
convertie en degrés Celsius et affichée ici dans Ce cours est idéal pour les étudiants qui ont
appris les bases de Javascript et qui souhaitent appliquer leurs connaissances de
manière pratique. En créant une application de liste de tâches simple mais
attrayante, les étudiants acquerront de
l'expérience pratique, approfondiront leur compréhension
des concepts fondamentaux de Javascript et renforceront leur confiance dans développement de projets concrets. Pour tirer le meilleur
parti de ce cours, les étudiants sont invités à créer eux-mêmes
le projet et télécharger leur travail terminé sous forme fichier zip dans la galerie de
projets.
2. Conception d'interface utilisateur en utilisant HTML et CSS: OK, tout le monde, voyons comment
nous pouvons créer ce projet. Je vais commencer ici dans mon
code HTML en ajoutant un div, lui donnant une classe de wrapper. Ensuite, à l'intérieur de celui-ci, j'ajouterai autre div avec une
classe de conteneur. Et ce conteneur
div contiendra l'entrée Celsius et l'étiquette. Je vais donc ajouter une étiquette
et dire Celsius. Ensuite, en dessous, j'
ajouterai une nouvelle entrée. Donnez-lui un type de chiffre car degrés de
température sont
évidemment des nombres, pas du texte. Je vais également lui donner
un identifiant de Celsius. Ensuite, je vais aller ici à
l'intérieur de l'étiquette et dire quatre, puis ajouter l'identifiant
du Celsius d'entrée. Ce conteneur
contiendra donc l'entrée Celsius. Afin de créer
l'entrée Fahrenheit, nous allons copier ce
conteneur dith, coller à nouveau et changer
Celsius en Et ici. Et ici aussi. Alors maintenant, vous pouvez voir que nous avons ces deux entrées ici
dans le coin supérieur gauche
du navigateur. OK, maintenant je vais passer à
mon CSS pour les styliser. Je vais d'abord cibler le corps. Et ajoutez une couleur de fond, cette couleur orange cool. Ensuite, en dessous, je vais cibler le wrapper div qui contient les deux conteneurs et définir
sa largeur à 450 pixels Ajoutez ensuite la
couleur d'arrière-plan, le blanc , le
rembourrage, 70 pixels
de haut en bas
et 40 pixels de
gauche à droite Ensuite, j'ajouterai une ombre
encadrée, zéro comme décalage horizontal, 20 pixels comme décalage vertical, 25 pixels comme valeur de flou, et cette couleur semi-transparente Ensuite, afin d'avoir
des coins arrondis, j'ajouterai
un rayon de bordure de huit pixels. Nous voulons maintenant centrer l'
enveloppe div à l'intérieur du corps. Je vais donc aller ici et ajouter de la flexibilité à l'
affichage, justifier le contenu, centrer à
centre
horizontalement, aligner les éléments, centre à centre verticalement et une hauteur de 100 VH Et maintenant, vous pouvez voir que
l'enveloppe div est centrée à l'intérieur du corps. Bien, ciblons maintenant les divs avec la
classe de conteneur Et ajoutez de la largeur, 45 %. Et maintenant, vous pouvez voir
qu'ils occupent 45 % de la division des emballages. Bien, ciblons maintenant les
entrées à l'intérieur des conteneurs et ajoutons une largeur de 100 %. Il occupera donc toute la
largeur du conteneur, soit 45 % de la plongée du rappeur. Puis hauteur, 50 pixels, rayon de
bordure, cinq pixels,
bordure, deux pixels, solide, cette
couleur gris clair, puis le contour,
aucun, puis le rembourrage,
zéro en haut et en bas, et dix pixels de
gauche à droite Et enfin, marge en haut, huit pixels pour ajouter un peu d'espacement entre les
entrées et les étiquettes Nous voulons maintenant placer les deux conteneurs
l'un à côté de l'
autre sur la même ligne. Et nous pouvons le faire
avec Flexbox. Je vais donc aller ici dans le
wrapper div et ajouter un espace de
contenu display, flex et justify entre les deux, afin que les deux conteneurs soient
séparés l'un de l'autre Et maintenant, comme vous
pouvez le constater, tout le monde, les deux entrées ressemblent
exactement à ce que nous voulons. Mais il ne
reste plus qu'à changer la couleur de la bordure de l'
entrée lorsque vous vous concentrez dessus Je vais donc aller ici et dire «
input » et en me concentrant dessus, j'ajouterai une
couleur de fond, notre couleur orange. Et maintenant, lorsque je me concentre
sur les entrées, vous pouvez voir la
couleur de leur bordure passer à l'orange. Et c'est tout, tout le monde,
pour cette leçon. Nous avons terminé le HTML
et le CSS pour ce projet, et nous allons apprendre comment le faire fonctionner dans la prochaine leçon. Alors, on s'y voit ?
3. Ajouter des fonctionnalités en utilisant JavaScript: OK, tout le monde. Après avoir terminé le HTML et le CSS de notre application de conversion de
température, dans cette leçon, nous
allons commencer à y ajouter fonctionnalités à l'
aide de JavaScript. Donc, en gros, lorsque
nous ajoutons une valeur spécifique
dans l'entrée Celsius,
nous voulons prendre cette
valeur, faire quelques calculs dessus, la
convertir en degrés Fahrenheit, convertir en degrés Fahrenheit, puis l'afficher dans
l'entrée Fahrenheit De plus, lorsque nous saisissons
une valeur Fahrenheit,
nous voulons la
convertir en degrés Celsius,
puis l'afficher dans
l'entrée saisissons
une valeur Fahrenheit,
nous voulons la
convertir en degrés Celsius, Celsius. Donc, tout d'abord, nous voulons l'équation qui convertit les degrés
Celsius en degrés Fahrenheit et l'
autre qui convertit
les degrés Fahrenheit en
degrés Celsius dans l'autre sens Et comme vous pouvez le voir ici, j'ai ajouté ces deux équations. Donc, pour convertir des
degrés Celsius en degrés Fahrenheit, nous allons utiliser cette équation Nous allons prendre le degré Celsius, le
multiplier par 9/5, puis ajouter 32 au résultat Et nous allons utiliser celui-ci ici pour
convertir les degrés Fahrenheit Nous allons prendre le degré
Fahrenheit, puis en soustraire 32
et le multiplier par 5/9 pour obtenir Incroyable Commençons maintenant à
travailler sur notre script Java. Tout d'abord, je souhaite
sélectionner les deux entrées. Je vais donc créer une nouvelle
variable, nommée Celsius. Ensuite, je dirai document
Get element by ID. Ensuite, je ciblerai l'entrée
avec l'ID de Celsius. Ensuite, je vais le dupliquer, nommer la variable Fahrenheit Et ciblez l'entrée avec
l'ID de Fahrenheit. Ensuite, en dessous, je
dirai Celsius, point d'ajouter Event Listener Et je veux que vous
réfléchissiez un peu, tout le monde, à l'événement
que nous devrions écouter. Jusqu'à présent, nous
n'avons traité que des événements de
clic sur
des boutons spécifiques, mais maintenant, nous n'avons aucun
bouton dans notre exemple. Nous voulons en fait écouter le changement de la valeur
d'entrée ici. Ainsi, chaque fois que nous modifions la
valeur contenue dans cette entrée, nous voulons la détecter et demander à JavaScript
d'agir en réponse, c'
est-à-dire, bien sûr, de
prendre la nouvelle valeur et de la convertir en
Fahrenheit pour l'afficher Et nous verrons comment
procéder dans un instant. Mais revenons maintenant à l'
événement que nous devons utiliser pour détecter
le changement dans l'entrée, et cet événement est
simplement nommé input. Je vais donc ajouter des informations ici. Ensuite, j'ajouterai notre
fonction de rappel qui devrait s' exécuter chaque fois que la valeur
d'entrée change Et pour l'instant, essayons simplement
une action simple afin de comprendre le fonctionnement de
l'événement d'entrée. Je vais juste dire console point log, et j'imprimerai la valeur
d'entrée modifiée. Ensuite, j'irai voir la console et regarder ce que nous obtenons lorsque nous
modifierons la valeur de
l'entrée Celsius. Vous pouvez voir que chaque fois
que je change la valeur, cette phrase est imprimée, et vous pouvez le savoir
grâce au chiffre sur la gauche ici. C'est bon. Supprimons maintenant cette ligne. Et maintenant, chaque fois que nous saisissons une
valeur dans l'entrée Celsius, nous voulons prendre cette valeur, multiplier par 9/5, puis ajouter 32 au résultat Je vais donc aller ici et dire valeur du point
Celsius pour saisir la valeur à l'intérieur
de l'entrée Celsius. Puis multiplié par 9/5 plus 32. Ce faisant, il est
converti en Fahrenheit. Il est donc temps de l'afficher dans
l'entrée Fahrenheit. Nous pouvons le faire en disant que valeur des points
Fahrenheit est
égale à tout cela Et maintenant, quand j'essaie d'
ajouter une valeur Celsius, vous pouvez voir qu'elle est convertie en
degrés Fahrenheit et affichée Et chaque fois que nous modifions
la valeur Celsius, la valeur Fahrenheit est
également mise Essayons d'ajouter ici moins
12 sous forme de valeur Celsius. Vous pouvez voir que nous avons dix et tous ces chiffres à
droite de la virgule décimale Mais ça n'a pas
l'air sympa du tout. Au lieu de cela, nous voulons
n'afficher que deux nombres après
la virgule décimale, et nous pouvons le faire en utilisant
la méthode à deux fixes Je vais aller ici et
ajouter deux fixes, l'exception du nombre de chiffres que nous voulons ajouter Je vais donc en ajouter deux. Et maintenant, quand je reviens en arrière et que j'
essaie le négatif 12, encore une fois, vous pouvez voir qu'il
affiche 10,40, et que tous les autres
chiffres ont été effacés Incroyable, tout le monde. Maintenant,
essayons autre chose. Supprimons simplement
cette valeur ici. Vous pouvez voir que nous en avons 32 du
côté Fahrenheit, même si nous n'avons aucune
valeur du côté Celsius. Et 32 ici
équivaut en fait à 0 Celsius. Donc, si j'ajoute zéro ici, vous pouvez voir que cela ne change pas. Maintenant, lorsque l'
entrée Celsius est vide, nous voulons que le Fahrenheit
soit également vide, et nous pouvons le faire très
facilement en Je vais aller ici et dire : je suis la valeur du point
d'exclamation en
degrés Celsius Et ce
point d'exclamation signifie simplement que non. Il nie donc tout ce
qui vient après. Ce code signifie donc essentiellement que s' il n'y a pas de valeur pour
l'entrée Celsius, cela se produit lorsqu'elle est vide. OK, à l'intérieur de cela, nous allons
ajouter une valeur de point Fahrenheit et la définir comme étant égale
à des chaînes vides. Et maintenant, lorsque je reviens en arrière
et que j'essaie une valeur, puis que je la supprime, vous pouvez voir la valeur Fahrenheit
est également supprimée Cela dit, tout le monde, nous avons terminé la première
moitié du projet. La bonne nouvelle, c'est qu'il n'y a
rien de nouveau au second semestre. Nous pouvons simplement copier ce code. Collez-le ici et commencez
à modifier certaines choses. Je vais changer le Celsius
ici en Fahrenheit. Je vais également le modifier ici. Supprimez ensuite cette formule et ajoutez la formule pour
convertir les degrés Fahrenheit J'ajouterai la
valeur Fahrenheit -32 fois 5/9. Ensuite, j'en ajouterai deux
fixes, deux également. Je vais également changer
Celsius ici Fahrenheit et Fahrenheit ici en Celsius Ainsi, lorsque le Fahrenheit n'
a aucune valeur, l'entrée Celsius
sera également vide Et maintenant, lorsque j'ajoute valeur dans l'entrée
Fahrenheit, vous pouvez voir qu'elle est convertie en degrés Celsius et affichée ici
dans l'entrée Celsius. Et voilà, tout le monde,
notre application est terminée, mais je voudrais ajouter une
petite chose ici. Lors du chargement de la page, nous voulons que l'on
se concentre sur l'entrée Celsius. Je vais donc aller ici et dire «
window dot add Event Listener ». Charger. Cet événement se déclenche donc
lorsque la page est rechargée Ensuite, j'ajouterai une fonction de
rappel. Et à l'intérieur, je
dirais « Celsius point focus ». Et maintenant, vous pouvez voir que chaque
fois que je recharge la page, l'entrée Celsius qui
est focalisée. Et ça y est. Pour la leçon, tout le monde. J'espère que ce projet
vous plaira et que vous en apprendrez quelque chose
que vous pourrez utiliser dans tous les projets que vous pourriez
réaliser à l'avenir. Et je te verrai
dans le prochain.
Ahmed Sadek, full stack web developer, freelancer & t
