Javascript : introduction douce pour les débutants

1. Bienvenue et ce que nous allons construire.: Salut, mon nom est Chris et un grand accueille mes appels JavaScript pour les débutants. Si vous regardiez mettre vos compétences HTML et CSS au niveau suivant, alors vous venez au bon endroit. Ce cours vous donnera les connaissances et la confiance nécessaires pour ajouter de l'interactivité et des fonctionnalités intéressantes à vos sites Web. En plus de la possibilité de créer des applications autonomes, nous commencerons par les bases, y compris la compréhension de JavaScripts et de quoi il est utilisé, où inclure JavaScript dans vos sites Web, types de données, et comment afficher JavaScript sur vos pages Web. Nous allons ensuite couvrir les éléments essentiels de JavaScript tels que les variables, les tableaux, les fonctions, les chaînes et les méthodes de chaîne, et les objets JavaScript. Toutes les sections seront confrontées à de nombreux défis pour acquérir de l' expérience pratique et vous assurer que vous comprenez exactement ce que nous faisons avant de passer à autre chose. Une fois que vous avez une connaissance des bases, nous allons ensuite vous présenter d'autres techniques telles que JavaScript, maths et dates, contrôle-flux et boucles, comment JavaScript peut manipuler le DOM, et bien sûr de nombreux défis en cours de route. Puis enfin, à la fin de ce cours, vous allez construire dans ce projet complet passionnant, vous aurez la chance de construire une application de carte de visite entièrement fonctionnelle qui prend les entrées de l'utilisateur et crée une entreprise en utilisant JavaScript. À la fin du cours, vous aurez toutes les compétences requises pour le compléter par vous-même. Ce cours est conçu pour être convivial pour les débutants. Cependant, JavaScript fonctionne souvent avec HTML et CSS. connaissance de base de ces langues est donc certainement recommandée. Merci de votre intérêt et j'ai hâte de vous joindre à moi pour cette cause passionnante. 2. Qu'est-ce que Javascript et à quoi sert-il ?: Dans cette vidéo, je voulais juste vous donner un aperçu de ce que JavaScript est et ce que JavaScript peut faire exactement. Tout d'abord, jetons un oeil à ce qui est JavaScript ? JavaScript est un langage de programmation que nous avons traditionnellement utilisé pour rendre les pages web interactives. Lorsque vous naviguez sur un site Web et que des choses telles qu'une fenêtre contextuelle apparaissent ou si vous passez le curseur sur un menu et que vous obtenez une liste déroulante avec différents liens de menu, essentiellement beaucoup de fonctionnalités qui se produisent sans rafraîchir la page, c'est tout JavaScript. JavaScript peut également être utilisé pour créer des applications autonomes. Traditionnellement, nous avons utilisé JavaScript dans les navigateurs Web et les sites Web. Maintenant JavaScript est devenu un de plus en plus populaire, trouver plus d'utilisations. JavaScript est maintenant utilisé pour créer des applications complètes, la fois le front et le backend. De nos jours, il est vraiment facile de faire une application de pile complète avec juste connaître un langage de programmation. J' ai mentionné que JavaScript est utilisé pour rendre les pages Web interactives et la raison qui peut arriver est parce que JavaScript est intégré et fonctionne sur tous les principaux navigateurs. JavaScript fonctionne même lorsque l'utilisateur est hors ligne. Le fait que JavaScript est intégré dans les principaux navigateurs et est un script et un langage par défaut pour les navigateurs Web signifie que JavaScript est là pour rester et il ne semble pas aller nulle part bientôt. Le langage de programmation Java est un langage complètement séparé et n'est pas lié à JavaScript. C' est les bases de JavaScript. Maintenant, jetons un oeil à ce que JavaScript peut faire. Nous savons que JavaScript peut rendre les pages web interactives. Il peut également modifier les éléments HTML et CSS sur une page Web. Il peut changer les couleurs, il peut changer les tailles de police, il peut changer le texte en un clic, diverses choses comme ça. C' est ce qu'on appelle la manipulation du DOM. Nous allons regarder le DOM plus tard dans ce cours, mais pour l'instant, comprenez simplement que JavaScript peut changer des éléments sur une page web, et c'est exactement ce que nous faisons maintenant avec cette démonstration. Nous manipulons le DOM en cliquant sur un bouton à gauche, qui ajoute du texte dans une balise de paragraphe vide. Ensuite, JavaScript peut également valider les données. Par exemple, si vous remplissez un formulaire avec votre nom et votre adresse, JavaScript peut vérifier que les informations que vous fournissez sont correctes, par exemple, il peut vérifier qu'il n'y a pas de lettres dans un numéro de téléphone, il peut vérifier si votre adresse e-mail est correctement formaté avant qu'il ne soit soumis, et il peut même restreindre le nombre de caractères entrés dans un champ de texte. Tout cela est fait dans le navigateur sans aucune aide du serveur. JavaScript peut également être utilisé pour créer des applications de pile complète. Par pile complète, nous entendons le front-end avec lequel l'utilisateur peut voir et interagir et aussi le côté serveur qui est le backend de l'application. Historiquement, JavaScript est juste utilisé sur le front-end dans le navigateur, mais maintenant de plus en plus d'applications sont écrites avec JavaScript pour la pile complète, grâce à Node.js. En plus des sites Web et des applications, JavaScript est également populaire pour la création de jeux multi-plateformes. Nous pouvons écrire un jeu une fois en JavaScript et utiliser quelque chose comme PhoneGap pour déployer votre jeu sur différents appareils tels que Android ou iOS. Nous pouvons utiliser JavaScript pour corriger les trous dans les spots du navigateur, sorte que nous pouvons fournir des polyfills et détection de fonctionnalités pour vérifier si un navigateur plus ancien prend en charge une certaine fonctionnalité. Si ce n'est pas le cas, nous pouvons fournir une autre façon de faire face à cela. JavaScript et HTML5 fonctionnent main dans la main et JavaScript alimente beaucoup des nouvelles fonctionnalités HTML5, telles que le Canvas et bien sûr, beaucoup, beaucoup plus. JavaScript devient tellement populaire maintenant qu'il y a de nouvelles utilisations en cours de création quotidienne. Il y a aussi de nouvelles bibliothèques et frameworks en cours de création tout le temps pour JavaScript. Donc, c'est vraiment une grande compétence à avoir. Merci de regarder et profiter du reste de la classe. 3. Où inclure Javascript: Bienvenue de retour. Pour ce cours, je vous recommande de créer un nouveau dossier sur votre bureau ou quelque part où vous pouvez y accéder. Je vais créer le mien sur le bureau, et je vais juste appeler ce JavaScript. Dans ce dossier, nous pouvons enregistrer tous les exemples que nous créons sur ce cours, puis vous les mettez à portée de main si vous en avez besoin pour référence. Dans le dossier JavaScript, je vais créer un nouveau dossier, et cela va s'appeler compréhension-javascript. C' est le nom de la section sur le parcours. La première chose que nous allons examiner est où inclure JavaScript, donc je vais créer un nouveau dossier appelé where-to-include-javascript et enregistrer cela. Ensuite, si vous allez dans votre éditeur de texte, je vais utiliser des crochets, faites glisser dans le dossier que vous venez de créer. Nous voulons créer une nouvelle page, donc ou Ctrl+N, enregistrez ceci sous index.html. Pour commencer, je vais mettre dans la structure HTML de base, et je vais utiliser un plug-in appelé Emmet. Emmet est disponible pour la plupart des éditeurs de texte populaires. Si vous utilisez des crochets comme moi, allez dans les Extensions, puis recherchez Emmet, E-M-M-E-T. J' ai déjà installé Emmet, mais si vous ne le faites pas, cliquez simplement sur le bouton « Installer ». Emmet est un excellent plug-in qui vous permet d'utiliser des raccourcis tels que html:5, puis appuyez sur onglet, et qui crée une nouvelle structure pour vous. Mais si vous ne les utilisez pas, ce n'est pas un problème. Il suffit de mettre la vidéo en pause et de taper ceci, et nous pouvons la dupliquer pour de futures vidéos. Dans le titre, je vais juste l'appeler Où inclure JavaScript, puis juste faire un peu d'espace après le titre. Je vais juste inclure les feuilles de style Bootstrap, ce qui nous permettra de rendre nos pages Web plus agréables. Recherchez simplement Bootstrap, puis allez sur getbootstrap.com, puis allez dans Commencer, et je vais juste inclure le CDN Bootstrap, qui est le lien hébergé pour la feuille de style. Je vais juste copier la section supérieure, qui est la feuille de style. Je vais copier ça, puis coller ça dans la section de tête juste en dessous du titre. Maintenant, tout est configuré, nous pouvons jeter un oeil à différentes façons inclure JavaScript dans notre projet. JavaScript peut être placé dans la tête ou dans la section du corps. Je vais commencer, et nous devons commencer par inclure des balises de script, donc tapez les balises de script d'ouverture et de fermeture. Tout le JavaScript que nous tapons doit aller entre ces deux. Pour vérifier que tout fonctionne bien, je vais commencer avec une alerte simple (). Une alerte () est une fenêtre contextuelle qui apparaît dans le navigateur et alerte un message à l'utilisateur. Entre les guillemets, vous pouvez utiliser des guillemets simples ou doubles, peu importe. Je vais juste alerter, Javascript fonctionne, et ajouter un point-virgule à la fin de cette déclaration. Si nous sauvegardons cela et puis passons au navigateur, vous pouvez voir une boîte d'alerte apparaît en disant, « Javascript fonctionne. » C' est la première fois que vous écrivez JavaScript. Félicitations, vous venez d'avoir votre premier travail dans Scripter. Il suffit de cliquer sur le bouton « OK » pour se débarrasser de cela pour l'instant, et revenez à la page suivante. Nous avons déjà mentionné que JavaScript fonctionne à la fois dans la tête et dans la section du corps, donc si nous coupons la section, dehors avec la tête, puis la coller dans la section du corps, et tout de suite, nous avons eu un changement. Nous sommes pris en charge sur le navigateur, et encore une fois, exactement la même chose s'est produite. Nous avons la boîte d'alerte qui apparaît disant, « JavaScript fonctionne », donc tout va bien. Parfois, quand nous avons beaucoup de JavaScript sur la page, nous voulons qu'il soit séparé du HTML juste pour le rendre plus lisible et facile à maintenir. Nous pouvons le faire en ajoutant le JavaScript dans un fichier externe, alors créez une nouvelle page dans le projet et enregistrez cela. Je vais appeler mon alerte de fichier, et il a besoin de l'extension of.js pour JavaScript. Ensuite, revenez à la page d'index, et nous pouvons lier ce JavaScript externe dans la section de tête. Encore une fois, nous ouvrons les balises de script, puis nous devons dire au navigateur où trouver le fichier JavaScript en utilisant l'attribut src. Parce que notre fichier est au même niveau que la page d'index, nous pouvons simplement taper le nom du fichier, donc c'est alert.js. Maintenant, nous pouvons nous débarrasser des balises de script parce que nous allons les mettre dans un fichier séparé, alors passez au alert.js. Lorsque nous travaillons dans un fichier JavaScript externe, nous n'avons pas besoin d'inclure les balises de script. Nous pouvons juste commencer à taper le JavaScript. Créez une nouvelle alerte. Entre les crochets bouclés et les citations, nous pourrions mettre à nouveau notre message, Javascript fonctionne, et le point-virgule à la fin. Enregistrez cela, et enregistrez la page suivante, puis passez dans le navigateur, puis actualisez. On y va. Super. L'alerte fonctionne également dans le fichier externe. Les fichiers JavaScript externes sont utiles pour stocker JavaScript que vous pouvez utiliser sur différentes pages Web, de sorte que vous n'avez pas besoin de taper le même script encore et encore. Vous pouvez simplement créer un lien dans le fichier que vous souhaitez utiliser sur chaque page Web. Comme mentionné précédemment, il sépare également le HTML du JavaScript, et rend votre code plus lisible et maintenable. Le lien JavaScript externe que nous avons placé dans la section head peut également être placé dans la section body tout en bas de votre page juste au-dessus de la balise body de fermeture. De cette façon, le HTML n'est pas bloqué par le chargement des scripts afin que nous puissions améliorer les temps de chargement des pages. Enregistrez simplement cela, et actualisez à nouveau le navigateur, et vous pouvez voir que tout fonctionne toujours. C' est donc trois façons différentes que nous pouvons inclure JavaScript dans notre projet. Merci de regarder, et nous vous verrons dans la prochaine vidéo. 4. Afficher Javascript sur les pages Web et dans les commentaires: Bienvenue de retour. Dans la dernière vidéo, nous avons examiné comment nous pouvons utiliser les alertes pour alerter les utilisateurs d'un certain message sur la page Web. Dans cette vidéo, nous allons jeter un oeil à quelques méthodes différentes de la façon dont nous pouvons inclure JavaScript sur nos pages Web. Nous allons également jeter un oeil à la façon dont nous pouvons inclure des commentaires en JavaScript pour prendre des notes, et aussi commenter notre code lorsque nous n'en avons plus besoin. Si vous allez dans le dossier JavaScript et toujours dans la section de compréhension JavaScript, je vais juste sélectionner le premier que nous avons créé, puis appuyez sur Commande ou Contrôle D pour dupliquer. Ou si vous préférez, vous pouvez copier et coller. Je vais appeler ces commentaires et afficher en JavaScript. Ouvrez ensuite les crochets ou votre éditeur de texte. Ensuite, faites glisser le nouveau fichier que nous venons de créer. Ouvrez ensuite la page d'index. Nous avons la boîte d'alerte que nous avons créée dans la dernière vidéo. Si vous venez de vous débarrasser de cela pour l'instant, donc nous n'obtenons pas que surgir chaque fois que nous allons dans le navigateur et puis changer le titre, pour les commentaires et l'affichage en JavaScript. En fait, nous n'avons pas besoin d'utiliser ce fichier d'alerte externe. On peut s'en débarrasser. Ouvrez vos balises de script soit dans la section tête, soit dans la section du corps. Ça n'a pas d'importance. Dans la dernière vidéo, nous avons regardé ajouter une alerte pour alerter l'utilisateur à un message. Il n'est pas nécessaire que nous puissions alerter l'utilisateur. Nous pouvons également utiliser des nombres et de la masse. On peut alerter à 10 heures, à emporter gratuitement. Ensuite, si nous passons au navigateur, vous pouvez voir que le calcul a été effectué et nous obtenons les résultats de sept. Ainsi que la boîte d'alerte est différentes méthodes que nous pouvons utiliser pour afficher JavaScript. Une autre méthode est le journal de la console. Au lieu de l'alerte, nous pouvons taper dans la console et nous pouvons envoyer un journal à la console du même message. Si vous passez à votre navigateur Web. Si vous utilisez Chrome, cliquez avec le bouton droit de la souris et accédez à Inspecter l'élément et vous pouvez basculer entre le bas et le côté en cliquant ces trois points, puis en cliquant sur le côté dock que vous préférez. Si vous descendez vers le bas, faites juste un peu plus d'espace. Vous pouvez voir qu'il y a l'onglet Console. Sélectionnez donc l'onglet Console et vous pouvez voir que le résultat que nous venons de créer de sept apparaît dans la console. La console est souvent utilisée pour le débogage plutôt que pour afficher des alertes à l'utilisateur à l'écran. On peut le garder confiné à la console. Nous pouvons imprimer des éléments sur la console tels que des messages d'erreur. C' est vraiment bon pour le débogage. Si nous revenons aux parenthèses, ainsi que les alertes et le journal de la console. Nous pouvons également utiliser ce qu'on appelle le document.write. Au fur et à mesure que vous suivez le cours, vous verrez le mot document assez souvent. Le document est la page Web complète que nous ciblons. Je vais écrire sur la page ce qui se trouve entre ces crochets. Enregistrez, puis actualisez. Maintenant apparaissant sur la page Web, nous avons les résultats de sept. Mais nous devons être prudents lors de l'utilisation de document.write. Si elle est utilisée après le chargement complet de la page, elle écrasera la page entière avec le résultat. Nous devons donc être prudents lors de l'utilisation de cela. Encore une fois, ainsi que des cartes, nous pouvons inclure du texte tel que bonjour et qui apparaîtra sur la page sont exactement les mêmes. La dernière chose que je veux vous montrer est comment nous pouvons manipuler le HTML actuel qui est sur la page Web. Donc, je vais juste descendre à la section du corps et créer du HTML. Je vais créer un titre h1 et laisser le contenu vide pour l'instant. Le h1 je vais donner un identifiant de titre et de moyenne, copier la balise de script. Juste en bas. Donc, nous allons utiliser JavaScript maintenant pour manipuler le HTML qui est actuellement là. n'y a pas de texte dans le titre h1 pour le moment. Mais vous pouvez utiliser JavaScript pour y mettre du texte. Comme avant, nous allons cibler le document complet pour commencer, puis utiliser le point. Ensuite, nous allons affiner le document complet à l'élément que nous voulons changer, qui a l'identifiant du titre. JavaScript a un moyen de le faire appelé getElementsById. Notez que tous les mots à l'exception du premier commencent par une majuscule pour la rendre plus lisible. C' est assez standard dans beaucoup de langages de programmation. C' est ce qu'on appelle l'affaire chameau. Le document complet est réduit à un élément que nous allons glisser par son identifiant. Entre parenthèses, puis citations, nous pouvons ajouter l'identifiant que nous voulons cibler, dans notre cas ici son titre, et puis nova dot. Nous voulons sélectionner le HTML interne, puis égal, puis nous pouvons mettre entre guillemets le texte que nous voulons remplacer. Nous voulons donc afficher à l'écran le texte. Dans mon cas, quand je mets affichage JavaScript dans les pages Web et point-virgule à la fin de cette déclaration. J' espère que cela a du sens. Nous avons dit dans un élément HTML qui n'a pas de texte une minute de plus. Ensuite, nous sélectionnerons dans le document complet ou la page Web complète. Ensuite, nous le réduisons à l'identifiant du titre. Ensuite, nous définissons innerHTML, qui est la section entre les deux. Nous définissons dans notre valeur pour être égal à ce texte ici. Sauvons ça. Si vous actualisez le navigateur Web, nous avons maintenant le texte que nous avons défini dans l'en-tête h1. Donc, cette méthode est beaucoup plus couramment utilisée et peut être un peu plus sûre que d'utiliser document.write. Maintenant, nous allons examiner quatre méthodes différentes de, y compris JavaScript, dans nos pages Web. Quand je retourne à l'éditeur de texte et jette un oeil aux commentaires JavaScript. Les commentaires sont disponibles en JavaScript, tout comme beaucoup d'autres langages de programmation. Si vous souhaitez ajouter des notes. Avec JavaScript, nous voulons que ces notes ne soient pas lues par le navigateur. Nous pouvons ajouter une double barre oblique. Ceci est pour les commentaires de ligne unique. Nous pouvons faire quelques notes telles que définir innerHTML. Ajouter des commentaires peut être utile si vous prenez une échappée du codage et que vous revenez après seulement une semaine ou deux, cela peut vraiment vous aider à vous souvenir de ce que vous faisiez. En plus d'ajouter des notes pour vous-même, vous pouvez également commenter le code réel de la même manière. Vous pouvez voir qu'il devient gris. Cette section de code ne sera plus lue par le navigateur. C' est utile si vous voulez simplement supprimer temporairement une section de code sans la supprimer réellement. Ainsi, les deux barres obliques avant sont utilisées pour les lignes simples. Si vous avez beaucoup de lignes différentes ou un bloc de code sur lequel vous souhaitez commenter, vous pouvez utiliser un commentaire multi-lignes, qui commence par une barre oblique avant, puis l'étoile, puis se termine par l'étoile et la barre oblique avant. C' est la fin de cette vidéo sur les commentaires affichés en JavaScript. Merci d'avoir regardé, et nous vous verrons dans la prochaine vidéo. 5. Variables Javascript et projet: Bienvenue dans cette nouvelle section appelée JavaScript basics. Je vais commencer par créer un nouveau dossier dans notre section JavaScript, je vais appeler ce dossier javascript-basics. Vous pouvez enregistrer toutes les parties de la section à l'intérieur. Désactive donc beaucoup de saisie. Si nous revenons à la dernière vidéo que nous avons faite dans compréhension-javascript, puis copions les commentaires et l'affichage dans le dossier JavaScript, puis collez cela dans la section de base JavaScript et renommez-le. Je veux garder le mien en ordre en faisant le numéro 1, j'appelle ces variables et affectations. Ensuite, mettez ceci entre parenthèses. On y va. Maintenant, nous avons la page d'index de la dernière vidéo. Je vais juste me débarrasser de ces commentaires pour l'instant, mais gardez le code en place, puis changez titre de la page en variables et en affectations. Nous pouvons réutiliser le code que nous avons fait dans la dernière vidéo. Cette section de JavaScript, il prend le titre vide de niveau 1 et le remplace par du texte. Dans cette vidéo, nous allons jeter un oeil aux variables et comment nous pouvons les utiliser en JavaScript. Une variable est un conteneur d' informations à qui nous pouvons donner un nom et le contenu de cette variable, comme son nom l'indique, peut changer. Jetons un coup d'oeil à la façon dont nous pouvons utiliser les variables. Nous déclarons une variable en utilisant le mot-clé var, puis nous mettons dans le nom de la variable suivante. Je veux appeler ma variable pageTitle , puis le signe égal, puis entre les guillemets, nous définissons le contenu de la variable. Je vais réutiliser ce texte. Coupez ce texte là, puis si nous le collons à l'intérieur de la variable et le point-virgule à la fin, donc nous affectons le texte à une variable appelée pageTitle. Maintenant, nous pouvons revenir à notre innerHTML et plutôt que de définir cela égal au texte, nous pouvons mettre en place le nom de la variable, qui est pageTitle, et enregistrer cela. Maintenant, quand nous retournons au navigateur et rafraîchissons, nous devrions obtenir le même message. Mais cette fois, le message est stocké dans une variable et vous pouvez le changer pour être tout ce que vous voulez. Nous le changeons en variables, puis jetons un coup d'oeil et quand nous actualisons, il y a un changement. Jetons un coup d'oeil à d'autres exemples. Je vais juste commenter cette section. Entre parenthèses, vous pouvez appuyer sur commande sur barre oblique avant et il commentera toute la section. Nous avons examiné la création de variables avec du texte ou des chaînes. Nous pouvons également créer des variables avec différents types de données, tels que des nombres. Créons une variable avec un nom de numéro1 et définissons ceci à un nombre tel que 10. Vous savez quand nous traitons de nombres par opposition à des chaînes, nous n'avons pas besoin de mettre de guillemets autour de la valeur. Nous pouvons simplement le laisser tel qu'il est et une deuxième variable appelée nombre2, et la valeur cette fois de 20, ainsi que certaines valeurs aux variables. Nous pouvons également créer une variable qui est composée de variables ajoutées ensemble. Dans ce cas, nous pouvons créer un total et définir ce total pour être la somme de la variable numéro1 plus la variable numéro2, et le point-virgule à la fin, puis pour vérifier si tout fonctionne bien, nous pouvons créer une alerte et ensuite nous pouvons simplement alerter le total. Voyons voir, ça fonctionne avec l'actualisation. Super. Nous avons obtenu le total 30 apparaissent là, qui est la somme des deux variables ajoutées ensemble. Comme nous l'avons mentionné précédemment et comme son nom l'indique, une valeur d'une variable peut changer. Une fois que nous avons déclaré une variable avec le mot-clé var, nous n'avons pas besoin d'utiliser à nouveau le mot-clé var pour changer la valeur. Si nous voulions changer la valeur de number1, cette fois nous tapons juste number1, et nous pouvons changer sa valeur pour être quelque chose comme cinq. Maintenant nombre1 est égal à cinq et nombre2 est 20. Nous devrions maintenant obtenir les résultats de 25. Lorsque nous créons des variables, nous pouvons effectivement déclarer la variable d'abord sans lui définir une valeur initiale. Si nous définissons simplement la variable et lui donnons un nom, elle n'a pas besoin d'avoir une valeur initiale. Ensuite, un peu plus tard dans le code, nous pouvons ensuite attribuer une valeur à cette variable comme ça et cela fonctionnera toujours comme avant. Nous avons maintenant le numéro 1 cinq et le numéro 2 à 10. On devrait avoir le total de 15, et on en aura 15, c'est bien. Revenons à l'exemple original. Lorsque nous créons des variables, il y a certaines règles que nous devons suivre lors de la création de noms de variables. Lorsque nous nommons une variable, elle doit commencer par une lettre, un trait de soulignement ou un signe de dollar, et les noms de variables sont également sensibles à la casse. Nous avions une variable avec le nom de numéro1 et ensuite nous avions une variable avec le nom de Numéro1, pour commencer par une majuscule. Ceux-ci sont traités comme des variables différentes. Nous allons juste changer l'exemple, le commencer avec un capital, nous devrions toujours obtenir la somme de 5 plus 10. On y va. La dernière chose dont je voulais parler dans cette vidéo est l'opérateur d'affectation, qui est ce symbole égal. En JavaScript, le symbole attribue une valeur au nom de la variable et il ne vérifie pas réellement si elle est égale à. En JavaScript si nous voulons vérifier si quelque chose est égal, nous utilisons un double égal. Par exemple, cinq est égal à cinq et cela signifie égal à, et nous pouvons également utiliser les trois symboles égaux. Si cinq et trois symboles sont égaux à cinq, cette façon vérifie si les valeurs sont égales et de type égal. Dans ce cas, les cinq sont égaux à cinq en valeur et le type, car ce sont les deux nombres. Mais cinq, les trois symboles égaux, puis les cinq entre guillemets. Cela devrait être faux car ils sont égaux mais ils ne sont pas de type égal, parce que les cinq à gauche sont un nombre et les cinq à droite, parce que c'est entre guillemets, est une chaîne et c'est considéré comme un texte. Nous allons regarder beaucoup plus d'exemples à ces cours, mais c'est tout pour l'instant. Merci d'avoir écouté, et vous verra dans la prochaine vidéo. 6. Nombres et arithmétique: Bienvenue de retour. Dans cette vidéo, nous allons jeter un oeil aux nombres JavaScript sur l'arithmétique de base. Si vous allez dans le dossier de base JavaScript et dupliquez le dossier des variables de la dernière vidéo, je veux appeler le mien numéro 2, nombres et l'arithmétique, puis ouvrez ceci dans les parenthèses. On y va. En JavaScript jusqu'à présent, nous avons déjà regardé comment nous pouvons attribuer un nombre à une variable, mais JavaScript peut faire beaucoup plus avec les nombres. Lorsque nous créons une variable, nous allons simplement supprimer la dernière section là-bas et aussi le titre, nous n'avons plus besoin de cela. Jusqu' à présent, nous avons cherché à assigner un nombre à une variable, comme celle-ci, mais en plus d'attribuer le nombre 10 à la valeur de x, nous pouvons également y mettre une somme, donc 10 plus 5, et alors nous pouvons alerter la variable de x et ouvrir sur le navigateur, donc nous obtenons la somme de 15. En plus d'ajouter, nous pouvons également emporter, nous devrions obtenir la valeur de 5. Nous pouvons également utiliser la division, la multiplication, donc nous changeons la soustraction en une barre oblique avant pour la division, et nous devrions maintenant obtenir la valeur de 2. En JavaScript, lorsque nous faisons une multiplication, la valeur dont nous avons besoin pour cela est l'étoile, 10 multiplier par 5 devrait être la valeur de 50. Un autre intéressant à rechercher est le symbole de pourcentage. Cela fournit en fait le reste, donc 10 divisé par 5 serait 2, et il n'y aurait pas de reste, donc cette valeur sera 0. Cependant, si nous changeons la valeur pour être 9 divisé par 5, 5 ne passerait en 9 qu'une fois et laisserait un reste de 4, donc nous obtenons la valeur de 4 l'alerter là-bas. En plus de faire les calculs à l'intérieur de la variable, nous pouvons définir une variable distincte, et nous pouvons faire les calculs à l'intérieur de l'alerte. L' alerte peut être multipliée x par y, et nous devrions toujours obtenir le même résultat. Rafraîchissez, et on en a 45. Une chose qui vaut vraiment la peine de se rappeler lorsque vous traitez des nombres et calculs est l'ordre du calcul est vraiment important. Jetez un oeil à ceci comme un exemple. Variable x nous allons mettre à 10 plus 5, qui est 15, multipliez par 2. Nous allons lire ceci de gauche à droite, pensant 10 plus 5 est 15, multiplié par 2 égal à 30, mais ce n'est pas vraiment le cas, alors nous allons juste alerter x et voir ce qui se passe. On en aura 20. La raison pour laquelle nous obtenons 20 plutôt que 30 est que la multiplication et la division ont une priorité plus élevée ou plus élevée que l'addition et la soustraction, sorte que la multiplication est effectuée en premier. 2 fois cinq est 10, plus 10 est égal à 20, c'est pourquoi nous obtenons la valeur de 20 apparaissant dans l'alerte. Mais si nous voulions avoir la valeur de 30, une façon de résoudre cela est d'ajouter les crochets autour de la première section. Cela va ajouter 10 plus 5 pour commencer, donc 15 puis multipliez par 2, enregistrez cela et puis actualisez, et maintenant, nous allons obtenir la valeur de 30. La dernière chose que je veux vous montrer dans cette vidéo est comment incrémenter et décrémenter des nombres. Jetons un coup d'oeil en affectant la variable x à 10. Actuellement, si nous laissons la valeur de x, nous obtiendrons 10, mais si nous voulons incrémenter x, nous pourrions utiliser x plus, et cela incrémente la valeur d'un à chaque fois. Maintenant, si nous actualisons notre navigateur, nous devrions obtenir la valeur de 11. Si nous devions le refaire et dupliquer cette ligne, x serait maintenant 12. Ceci est vraiment utile pour des choses telles que augmentation du score d'un joueur à chaque fois qu'il obtient un point, nous aurions une variable appelée score, puis chaque fois qu'ils obtiennent un point, ce serait score plus plus. En plus de plus, nous pouvons également décrémenter le score par un, juste comme ça. Maintenant, on en prend un de 10 et on devrait en avoir 9. Cela sera utile dans des situations telles qu'un joueur perd sa vie dans un jeu ou réduit le score du joueur d'un à chaque fois. Merci de regarder, et c'est la fin de cette vidéo sur les chiffres et l'arithmétique. 7. Chaînes Javascript: Nous nous en sortons bien maintenant sur cette section appelée chaînes. Si nous allons dans le dossier JavaScript que nous avons créé, puis dans les bases JavaScript. Tout comme avant, dupliquez la dernière vidéo, puis renommez-le mien va être numéro 3 chaînes JavaScript, puis enregistrez cela et ouvrez-le dans votre éditeur de texte. Ensuite, le titre comme des chaînes, puis vous pouvez supprimer la section entre les balises de script. Dans les vidéos précédentes, nous avons brièvement examiné les chaînes et une chaîne est essentiellement une section de texte. Il peut s'agir d'un caractère, d'un mot ou d'un paragraphe. Commençons par le premier exemple et nous allons créer une variable. Le premier va être FirstName et assigner FirstName dans mon cas c'est Chris, le point-virgule à la fin. Ensuite, une deuxième variable de deuxième nom et attribuez ceci à mon deuxième nom qui est Dixon. Nous pouvons utiliser des guillemets simples ou doubles, cela n'a pas d'importance et nous pouvons ensuite joindre les chaînes. Je veux les afficher sur la console donc console.log. Nous pourrions les rejoindre en joignant les noms de variables. Donc FirstName, puis le plus , puis le deuxième nom de variable avec le point-virgule à la fin. Ensuite, ouvrez dans le navigateur, puis allez à la console et vous pouvez voir que le nom est juste là. Il est imprimé à la fois le premier et le deuxième nom, donc peu importe les guillemets simples ou doubles. Les citations commencent cependant à devenir importantes si nous les incluons réellement dans la chaîne. Si nous devions avoir une citation et que la citation contenait des textes tels que « mon nom est Chris », et nous voulions que le nom figure dans des citations, nous ne pourrions pas vraiment le faire. Ensuite, vous changez le nom de la variable en citant et voyons ce qui se passe avec cela. Ensuite, allez dans la console et vous pouvez voir que nous obtenons une erreur de syntaxe. Nous pouvons réparer en passant à la chaîne et à la place les guillemets doubles, nous pouvons utiliser un type différent de guillemets. Changer cela en simple, puis rafraîchir et là nous y allons. Encore une fois, mon nom est Chris et il est en fait imprimé les guillemets simples. Vous pouvez également faire la même chose si vous aviez des guillemets simples à l'extérieur, vous pouvez définir les guillemets internes pour être doubles. Sauvegardez et actualisez et il y a des guillemets doubles qui fonctionnent bien, alors éliminons-nous de cela. En plus de joindre des chaînes, nous pouvons également joindre des chaînes avec des variables et des choses telles que des nombres. Par exemple, si nous avions un nom défini sur Chris, documentons-nous cette fois. Dans cet exemple, je vais joindre une variable avec une chaîne , puis avec un nombre et imprimer les mots Chris est 31. J' ai déjà le nom de la variable afin que nous puissions l'ajouter. Ensuite, nous pouvons utiliser le plus pour ajouter ou concaténer. Nous avons Chris et ensuite nous devons ajouter « is » entre les citations, donc c'est une chaîne. Ensuite, un nombre plus pour ajouter le nombre afin que nous puissions taper dans l'âge qui est 31. Enregistrer et puis appuyez sur Actualiser, nous obtiendrons le mot Chrisis31 mais il n'y a pas d'espace entre les deux et c'est facile à réparer. Si nous allons dans la chaîne, nous pouvons ajouter un espace avant et après, et cela imprimera l'espace dans le document afin que vous y allez. C' est un moyen assez simple de forme et d'une chaîne, mais si nous avions une longue chaîne comme un paragraphe. Il y a beaucoup de formats et d'options différents et d'évasion que nous pouvons faire pour rendre cela meilleur look. Si vous allez sur Google et recherchez Lorem Ipsum et nous allons juste obtenir un exemple de texte. En fait, je vais juste copier le premier paragraphe qui ressemble assez de texte leur. Modifiez la variable et appelez mon paragraphe. Ensuite, entre les guillemets, collez dans l'exemple de texte, puis lorsque vous descendez et nous allons l'imprimer sur la console, console.log. Sur le texte que nous voulons imprimer est le paragraphe, alors dirigez-vous vers le navigateur, puis allez à la console. Il y a tout le texte fictif que nous avons mis en place. C' est un gros morceau de texte illisible là-bas. Il se peut que nous souhaitions ajouter une mise en forme à ce texte, comme des sauts de ligne, des guillemets ou des onglets. Nous pouvons le faire avec du JavaScript, si nous recherchons une section que nous voulons créer une nouvelle ligne. Je vais commencer le mien là-bas. Si vous faites une barre oblique inverse, puis un, donc nous devrions obtenir une nouvelle ligne après le mot industrie. Rafraîchissez et on y va. C' est la première ligne qui se brise après le mot « industrie ». On peut juste mettre un ou deux d'entre eux juste avant. Il y en a un et sauve et jette un oeil. Bien, il y a une autre rupture de ligne juste là. Il y a quelques choses différentes que vous pouvez également faire, nous pouvons également mettre des guillemets doubles ou simples dans le texte, et nous pouvons également les échapper en utilisant la barre oblique inverse, alors utilisez une barre oblique inverse, puis les guillemets. Ensuite, nous faisons juste la même chose après donc barre oblique inverse et une citation, puis rafraîchir. Vous pouvez voir si vous cherchez le mot que nous venons de mettre en évidence, nous avons les citations avant et après. Vous pouvez également faire de la même manière à un seul devis. Si vous vouliez réellement inclure une barre oblique inverse, vous le faites juste deux fois afin d'inclure deux barres obliques arrière. Comme la barre oblique inverse apparaît là et aussi les guillemets simples et nous pouvons également ajouter un onglet. Si vous vouliez en ajouter un au début, c'est une barre oblique inverse et un t et vous avez le retrait là. Il y a quelques façons utiles d'échapper et de mettre en forme du texte à l'aide JavaScript et quelques petits exemples, y compris la feuille fournie au début du cours. La dernière chose que je veux vous montrer dans cette vidéo est de savoir comment trouver la longueur d'une chaîne en utilisant la propriété length. Débarrassez-vous du texte Lorem ipsum et nous pouvons réutiliser cette variable. Je vais utiliser à nouveau l'exemple de nom, donc nom égal à Chris, puis nous allons créer une nouvelle variable pour stocker la longueur du nom. Variable appelée NameLength et la façon dont nous avons obtenu la longueur du nom est en ne définissant pas le nom.length. Ensuite, nous pouvons enfin nous connecter à la console le nouveau nom de variable. Enregistrez cela, puis actualisez. Là, nous allons donc la longueur de mon nom est de cinq caractères. C' est la fin de cette vidéo et si vous vous joignez à moi dans la prochaine vidéo, nous mettrons cela en pratique dans un mini défi. 8. Mini défi : afficher le score d'un utilisateur: Bienvenue de retour. Il est maintenant temps de faire une petite pause dans l'apprentissage et de mettre en pratique ce que vous avez appris jusqu'à présent dans votre premier mini-défi. Ce que j'aimerais que vous fassiez est de créer une page Web simple, qui affiche le score d'un utilisateur. Créez quelques variables pour le nom du joueur, ainsi que le score, puis affichez ce score sur une page Web dans une chaîne. Il n'a pas besoin d'être quelque chose de fantaisie, tout ce que vous devez faire est d'afficher l'utilisateur, puis ajouter une chaîne à la fin de celui-ci pour le score est, puis ajouter la variable pour le nombre de points, puis ajouter la chaîne sur la fin. N' hésitez pas à rendre cela un peu différent de mon exemple. Mais pour le faire, c'est un bon moyen de mettre en pratique ce que nous avons appris jusqu'à présent. Si vous ne vous sentez pas encore confiant à 100 pour cent de faire cela, ce n'est pas un problème. Il suffit de suivre le reste de cette vidéo, et je vais vous montrer comment je vais le faire. J' espère que vous avez réussi à le faire par vous-même, sinon, ne vous inquiétez pas, je vais vous montrer comment le faire maintenant. Si vous allez simplement dans le dossier de base JavaScript, puis dupliquez la dernière vidéo. Je vais appeler le mien numéro 4 challenge-display-users-score. Ouvrez ensuite votre éditeur de texte, puis vous modifiez le titre, Affichage du score utilisateur. Je vais commencer à partir de zéro. Entre les balises de script, je vais créer une variable appelée player égale Chris, puis une variable pour contenir la valeur de score. Donc le score est égal à zéro, juste pour commencer. Ensuite, une variable de plus pour maintenir l'affichage ou la chaîne, donc DisplayScore. Juste pour rendre mon affichage un peu plus grand, je vais commencer avec quelques tags h3. Je ne les ai pas encore regardés dans ce cours, mais vous pouvez réellement ajouter des balises HTML en entourant les guillemets. Nous commençons par le h3, puis nous allons ajouter le joueur ou la variable joueur. Puis à la fin du joueur, je veux mettre l'apostrophe et puis le s. Donc c'est le score de Chris est. Nous pouvons ajouter cela comme une chaîne. Donc l'apostrophe et le s et puis un nombre plus. Jusqu' à présent, on a celui de Chris. Ensuite, nous voulons mettre la chaîne de score est, alors ouvrez les guillemets. N' oubliez pas de mettre un espace avant et après pour que les mots ne se touchent pas. Donc le score de Chris est, et ensuite nous devons ajouter à la fin la variable de score. Donc le score de Chris est nul, puis le mot points, donc espace, puis points. Puis à la toute fin quand il est fermé, la balise h3, comme ça avec un point-virgule à la fin. Maintenant, nous avons nos jeux variables de score d'affichage, allons juste maintenant imprimer cela sur la page. Nous documentons l'écriture, et le nom de la variable, et un point-virgule, et jetons un oeil. Le score de Chris est de zéro point. Si nous voulions augmenter le score chaque fois que l'utilisateur obtient un point supplémentaire, nous pourrions ajouter score++ si vous vous en souvenez plus tôt. Si on se rafraîchit, on devrait obtenir le score de Chris, c'est un point. Vous pouvez le faire autant de fois que vous le souhaitez et les points augmenteront en conséquence. C' est la fin du défi. J'espère que vous avez réussi à le faire et j'espère que vous l'avez apprécié. Merci et je vous verrai dans la prochaine vidéo. 9. Méthodes de chaînes: Jusqu' à présent dans ce cours, nous avons examiné les bases de la chaîne, telles que stocker une chaîne dans une variable et aussi joindre des chaînes, mais il y a tellement plus que nous pouvons faire avec les chaînes. Maintenant, nous allons jeter un oeil à quelques méthodes de chaîne très utiles. Si vous allez dans votre dossier JavaScript, puis dans les bases JavaScript. Je veux dupliquer le dernier dossier que nous avons créé. Je vais nommer ce numéro 5 méthodes de chaîne, puis ouvrir dans votre éditeur de texte. Je vais juste le rendre un peu plus grand, puis changer le titre en méthodes de chaîne, puis descendre. Je vais juste supprimer le code que nous avons écrit dans la dernière vidéo. Les méthodes de chaîne nous permettent de faire beaucoup plus avec des chaînes. Le premier exemple que je vais vous montrer est de convertir une chaîne en majuscules. Commençons par créer une variable appelée chaîne et je vais juste définir cela pour apprendre JavaScript ajouter un point-virgule, puis je vais créer une deuxième variable. Je vais appeler cette nouvelle chaîne. Nous allons définir la valeur de la nouvelle chaîne égale à la chaîne d'origine. C' est le nom de la variable, puis point, puis deux majuscules puis les crochets bouclés et point-virgule. N' oubliez pas les deux calques sur chaque mot après le premier. Maintenant, nous avons converti la chaîne en majuscules. Alertons maintenant la nouvelle chaîne. On peut vérifier que ça marche bien. Alert, qu'est-ce qu'on a besoin d'alerter ? C' est la valeur de la nouvelle chaîne. Placez cela entre parenthèses, puis ouvrez dans votre navigateur. On y va, super. Il y a notre chaîne originale et tout est changé en majuscules. Nous pouvons faire une chose similaire, mais nous pouvons convertir en minuscules. Vous pouvez probablement deviner comment faire cela, nous avons juste besoin de changer le point de chaîne en minuscules, puis ouvrir cela et vérifier que cela fonctionne. Nous y allons, donc toutes les capitales ont été changées en minuscules maintenant. La prochaine méthode que je vais vous montrer est ce qu'on appelle le remplacement de chaîne. C' est quand nous cherchons une certaine section ou un certain mot dans la chaîne. Nous pouvons remplacer ce mot. Faisons juste une chaîne légèrement plus longue. Je veux apprendre JavaScript pour construire des sites Web. Encore une fois, nous prenons la valeur de la chaîne d'origine, et la méthode que nous allons utiliser est string.replace, puis à l'intérieur des crochets, nous allons mettre deux paramètres. Le premier sera le mot que nous voulons remplacer. Je vais changer de sites Web, puis le séparer par une virgule. Nous mettons le mot que nous voulons mettre à sa place, donc je vais changer ça en jeux. Maintenant, quand nous jetons un coup d'oeil à l'alerte, nous devrions voir que les sites Web ont été changés en jeux. Alors allez dans le navigateur et actualisez, et c'est exactement ce que nous voulons. Je veux apprendre JavaScript pour construire des jeux. En plus de remplacer des mots individuels, nous pouvons réellement diviser la chaîne en caractères individuels, ou nous pouvons diviser tous les mots individuels. La façon de le faire est d'utiliser la méthode split. Je vais juste revenir à la chaîne d'origine de l'apprentissage de JavaScript, puis supprimer le contenu à l'intérieur des crochets. Cette fois, nous allons utiliser string.split, puis ce que nous allons mettre à l'intérieur des crochets, détermine exactement où se trouve la division dans la chaîne. Si vous mettez simplement une chaîne vide ou des guillemets sans rien, la chaîne sera divisée en caractères individuels. Il suffit de rafraîchir la page, et vous pouvez voir avec la virgule, que la chaîne a été divisée, et tout est maintenant des caractères individuels. Si nous voulions le diviser en mots individuels plutôt qu'en caractères, nous pouvons mettre un espace. L' espace dans la chaîne sera le marqueur où diviser cette chaîne. Maintenant, nous devrions avoir deux mots séparés. Rafraîchir. Maintenant, nous avons le mot, l'apprentissage et le mot, JavaScript séparés par une virgule, donc maintenant ce sont des chaînes individuelles. Maintenant, nous avons deux mots séparés là-bas. Nous pouvons accéder aux mots individuels par le numéro d'index entre crochets. Si nous voulons accéder au premier mot, ce serait la position 0. Enregistrez, puis actualisez. Maintenant, nous avons le mot apprentissage, et si nous voulons le mot JavaScript, changez ça pour le deuxième mot, qui est la position 1. Maintenant, nous obtenons le mot JavaScript. Maintenant, nous avons divisé la chaîne en deux mots séparés. Nous pouvons les relier ensemble en utilisant la méthode concat. Maintenant, nous avons deux mots séparés. Nous allons créer une nouvelle variable. Je vais juste ajouter ceci au-dessus de l'alerte, donc j'appellerai cette chaîne jointe, puis pour ajouter les deux chaînes ensemble, nous allons sélectionner le premier mot. C' était dans la nouvelle variable de chaîne, et puis comme nous l'avons fait avec l'alerte, nous allons mettre cela à la position 0, qui est le mot learning, puis dot puis concat, puis à l'intérieur des parenthèses, nous allons ajouter la deuxième chaîne à laquelle nous voulons nous joindre. J' espère que vous avez trouvé ce que c'est. C' est une nouvelle chaîne, puis les crochets, et la position 1, et maintenant nous devons alerter la chaîne jointe. Débarrassez-vous de cela et collez la chaîne jointe et puis actualisez. On y va. Vous pouvez voir que la chaîne a été jointe en une chaîne et qu'il n'y a pas de virgule entre eux. C'est bien. La dernière méthode que je vais vous montrer est la tranche de chaîne. Débarrassez-vous de la variable de chaîne jointe. Encore une fois, nous allons manipuler la chaîne d'origine, mais cette fois, nous voulons utiliser la tranche de points. Mettez à nouveau les crochets bouclés, et la méthode de tranche, il a une position de début et de fin. Vous pouvez découper une certaine section de la chaîne. La première valeur est requise, c'est-à-dire la position de départ. Je vais commencer par le numéro 2, puis séparé par une virgule, et la deuxième valeur est facultative, qui est la position de fin. Je vais utiliser le numéro 6, puis alerter la nouvelle chaîne. Jetons un coup d'oeil à ça. On a le mot arni là, qui est cette partie de la chaîne. C' est la position 2, donc 0, 1 , 2, et puis jusqu'à six. C' est la fin de cette vidéo. J' espère que vous avez maintenant une meilleure idée de la façon dont vous pouvez manipuler des chaînes en utilisant des méthodes de chaîne. Jetez un oeil à la feuille de triche, qui a été fournie au début du cours. Il y a une ou deux autres méthodes de chaîne que vous pouvez trouver utiles. Jouez un peu avec eux. Pour l'instant, merci, et nous vous verrons dans la prochaine vidéo. 10. Mini défi : formater correctement un nom d'utilisateur: Bienvenue dans un autre mini défi. C' est la partie passionnante du cours où vous arrivez à mettre en pratique ce que vous avez appris jusqu'à présent. Dans ce mini défi, nous allons formater le nom d'un utilisateur. Nous l'avons tous fait, nous avons tous mis le capital sur accidentellement ou au mauvais endroit en tapant. Parfois j'ai eu quelques lettres où elles ne devraient pas être à notre nom. Je vais juste commencer et tu pourras le faire tout seul. Numéro 6 challenge-name-formatter, puis ouvrez ce dossier. Je vais changer le titre en Formateur de nom, puis supprimer cette section. Je vais juste te faire commencer. Je vais créer une variable appelée nom, alors vous devez mettre votre nom dans les guillemets. Mais avec des majuscules égarées, juste comme ça. Ce que j'aimerais que vous fassiez, c'est utiliser certaines des méthodes de chaîne que nous avons consultées dans la dernière vidéo et formater votre nom. La première lettre est une majuscule de votre premier deuxième nom, puis tout le reste est en minuscules. Alors arrêtez la vidéo et donnez-la un coup d' envoi, l'essayer vous-même est vraiment la meilleure façon d'apprendre. Si vous êtes coincé ou avez des problèmes, je vais voir exactement comment je l'aurais fait. C' est ce que j'aurais fait. Comme pour beaucoup de choses dans la programmation, il existe différentes façons d'aborder cela. Mais je vais le diviser en quelques variables pour commencer. Je vais commencer par une variable appelée split. Je vais diviser le nom en deux mots séparés pour qu'il puisse fonctionner individuellement. Pour diviser le premier et le deuxième nom, nous voulons utiliser la méthode split que nous avons examinée dans la dernière vidéo, donc nom.split. Espérons que vous vous souvenez comment faire ça. Il suffit de créer un espace et je reconnaîtrai où se trouve la scission. Maintenant, nous avons les deux mots individuels stockés dans une variable appelée split. Il ne va pas créer une variable pour chacun de ces mots. Donc la variable name1 est égale à diviser sur la position zéro. Donc c'est le premier mot. Name2 est égal à split, puis numéro un, qui est la deuxième position. Maintenant, nous avons le prénom dans une variable. Je vais maintenant formater ce nom, donc je vais appeler cette variable formattedName1, donc c'est égal à name1. Ensuite, nous devons faire du premier personnage une capitale. Je vais trancher la première lettre. Les deux paramètres que nous devons mettre en place sont la position zéro pour commencer au début, puis pour terminer une position 1. Ça va seulement découper le premier personnage. Ensuite, pour en faire une majuscule, nous allons la mettre en majuscules, et n'oublions pas les crochets. En l'état actuel, cette variable ne contient qu'un C majuscule, donc nous devons ajouter à la fin le reste des caractères en minuscules. Après ce nom1.slice, nous allons couper la section restante, mais nous allons juste mettre un paramètre là-dedans. Il va commencer à la position un, puis être tout le chemin à la fin de la chaîne, .tolowerCase. Faisons juste une alerte, juste pour voir si ça marche bien. Une fois que vous alertez formattedName1 ; génial, tout fonctionne. On peut faire la même chose avec le deuxième nom. Je vais juste copier cette section, puis la changer en formattedName2. Cette méthode fonctionnera exactement de la même manière, mais nous avons juste besoin de changer name1 en name2 et vérifier que cela fonctionne à nouveau. Super. Nous avons les deux noms individuels qui sont correctement formatés. On a juste besoin de les rejoindre ensemble. Je vais créer une variable appelée NewName. Cela va être égal au formattedName1 plus formattedName2, et c'est alerter le nouveau nom. On avait besoin de ça. Nous avons le nom formaté apparaissant, nous avons juste besoin de mettre un espace entre les deux. Nous pouvons le faire entre FormattedName1 et 2. Il suffit d'ajouter un espace et un autre symbole plus. Espérons que cela devrait être maintenant. On y va. C' est donc un nom correctement formaté. J' espère que tu l'as fait et que tu as travaillé tout seul. Sinon, ne vous inquiétez pas. Espérons que maintenant vous savez comment le faire. Plus de mini-défis à mesure que nous continuons tout au long du parcours. Merci d'avoir regardé, et nous vous verrons dans la prochaine vidéo. 11. Tableaux Javascript: Jusqu' à présent, dans ce cours, nous avons examiné les variables et comment elles sont utilisées pour stocker une valeur. Cependant, si nous avons besoin de stocker plus d'une valeur, nous devrions utiliser ce qu'on appelle un tableau. Les tableaux peuvent contenir plusieurs valeurs sous un seul nom, et nous pouvons accéder à ces valeurs par leur position ou leur numéro d'index. Passons à notre dossier javascript et dans une section javascript-basics, dupliquez le dernier dossier. Ce sera le numéro 7.arrays, puis ouvrons ce dossier. Ensuite, changez le titre en tableaux. Nous pouvons simplement supprimer cette section. Il existe plusieurs façons différentes de créer un tableau. Il démarre de la même manière que les variables. Nous utilisons le mot-clé var, puis nous attribuons un nom au tableau. À titre d'exemple, je vais créer un tableau pour les utilisateurs, puis nous allons créer un nouveau tableau, puis les crochets juste après. Cela crée un nouveau tableau appelé utilisateurs et nous pouvons ajouter différents utilisateurs ou des valeurs différentes à ce tableau en utilisant le nom du tableau, puis les crochets. La première position sur un tableau est 0. Je vais définir la première position pour être égale à Chris, puis je vais juste ajouter quelques autres, donc les utilisateurs et ensuite la position 1, je vais appeler cet utilisateur Mike. Puis les utilisateurs, puis un troisième, nous allons insérer Paul là-dedans. Maintenant, notre nouveau tableau devrait avoir trois valeurs différentes, alors vérifions simplement que tout fonctionne avec un document.write, puis à l'intérieur des parenthèses, nous pouvons mettre le nom du tableau qui est des utilisateurs. Jetons un coup d'oeil. Super, il dit nos trois valeurs que nous avons insérées dans le tableau. Une autre façon de créer un tableau, peut-être un moyen plus populaire, est d'utiliser la méthode littérale. commençant de la même manière et au lieu d'utiliser le nouveau mot-clé, nous pouvons mettre la valeur directement entre crochets. Tout comme avant, nous pouvons mettre le premier utilisateur puis séparer par une virgule. Nous pouvons ajouter le reste de nos valeurs et tout comme les variables quand il tire des chaînes entre les guillemets, mais nous sommes d'accord pour mettre des nombres comme ils sont. Maintenant, vous pouvez enregistrer cela, puis actualiser et nous aurons les mêmes trois utilisateurs que nous avions auparavant. En plus d'afficher le contenu complet du tableau, nous pouvons simplement afficher les valeurs individuelles d'un tableau en fonction de leur position d'index, donc Chris est Position 0, Mike est 1 et Paul est 2. Si vous allez simplement à document.write, puis au lieu d' afficher tous les utilisateurs entre crochets, nous pouvons mettre le numéro d'index. Si nous voulons qu'il affiche Mike, ce serait 1, et nous aurons juste une valeur apparaissant et si nous voulions Paul, nous pourrions changer ça en 2. Lorsque nous traitons avec des tableaux, nous pouvons également utiliser différents types de données. En plus des chaînes, nous pouvons mettre des nombres, par exemple, et cela fonctionnera exactement de la même manière. Si nous sauvegardons cela et puis actualisons, nous obtiendrons le numéro apparaissant à la fin du tableau. Une chose pratique à savoir avec les tableaux est que nous pouvons utiliser la propriété length pour savoir combien de valeurs est à l'intérieur du tableau et la façon de le faire est avec la propriété .length. Maintenant, il devrait afficher la longueur du tableau, donc nous devrions obtenir la valeur de trois. Jetons un coup d'oeil et rafraîchissons. Nous y allons, donc nous obtenons la valeur de trois. Nous allons laisser cela dehors et dans la prochaine vidéo, nous allons jeter un oeil à quelques façons vraiment puissantes et intéressantes de manipuler les tableaux en utilisant des méthodes Array. 12. Méthodes de tableaux: Donc, comme avec les chaînes que nous avons regardé il y a quelques vidéos, les tableaux ont également diverses méthodes de tableau et nous pouvons utiliser, ce qui peut être vraiment utile. Commençons donc par un nouveau dossier. Et c'est le numéro huit, et ce sont des méthodes de tableau. Donc, renommez les méthodes de tableau de dossiers et ouvrez l'ouverture entre parenthèses. Alors renommons ceci. Donc, les méthodes de tableau, et alors nous pouvons réellement réutiliser ce tableau que nous avons créé auparavant. Donc, si vous voulez ajouter une valeur supplémentaire dans ce tableau, nous pouvons utiliser la méthode push. La façon de le faire, est que nous utilisons le nom du tableau, qui est les utilisateurs dot push, avec les crochets après, et un point-virgule. Ensuite, à l'intérieur des crochets, nous mettons la valeur que nous voulons ajouter. Donc, je vais créer un nouvel utilisateur appelé, Tom, puis juste supprimer la propriété length là. Donc, sauvegardons et ouvrons cela dans le navigateur. Donc maintenant vous pouvez voir que nous avons quatre valeurs maintenant, et Tom a été placé à la fin du tableau. Mais si nous voulions ajouter Tom au début du tableau, nous pouvons utiliser une méthode appelée unshift, puis enregistrer cela, et actualiser. Maintenant Tom est ajouté au début du tableau, et nous pouvons également supprimer des valeurs du tableau d'une manière similaire. Donc, au lieu de unshift, nous pouvons utiliser la méthode Shift et cela supprimera le premier élément d'un tableau. Laissez simplement les crochets vides, puis actualisez. Maintenant, vous pouvez voir que la valeur de Chris, qui est la première valeur, a été supprimée. Nous pouvons également supprimer la dernière valeur d'un tableau, avec la méthode pop. Donc, les utilisateurs point pop, et cela devrait supprimer Paul, la fin du tableau, et actualiser, et maintenant nous sommes juste avec Chris, et Mike. Ok, et nous pouvons également inverser l'ordre des valeurs dans le tableau, en utilisant la méthode inverse. On devrait faire comparaître Paul, Mike et Chris dans cet ordre. Ok, donc avant de regarder ajouter des valeurs, et supprimer des valeurs depuis le début, et la fin du tableau. Nous pouvons également utiliser la méthode slice, qui va supprimer une valeur d'un tableau entre un certain point. Donc, nous allons faire cela, va réellement créer une nouvelle variable. Nous allons appeler cette tranche, et cela va être égal à, utilisateurs point tranche. Ensuite, à l'intérieur des parenthèses, nous mettons en deux valeurs. Donc, la première valeur que nous voulons entrer est la position de départ. Donc, si on voulait retirer Mike, c'est notre première position. Si vous vous souvenez, le premier index est zéro, puis séparé par une virgule, nous mettons dans la deuxième valeur, qui est la position de fin. Donc, nous voulons que cela se termine juste avant un Paul, ce qui est la valeur deux. Ensuite, documentez à droite, la variable de tranche, et enregistrez cela. Maintenant, quand nous vérifions cela dans le navigateur, nous devrions voir que la valeur de Mike va afficher, donc enregistrer, et rafraîchir, et là nous allons. Donc, nous avons la valeur de Mike apparaissant à l'écran. Nous pouvons utiliser les positions de début et de fin pour extraire toute valeur que nous voulons à l'intérieur du tableau. Si vous consultez la feuille de triche fournie, sont quelques méthodes de tableau supplémentaires que vous pouvez jouer avec. Je vous verrai dans la prochaine vidéo, où nous allons jeter un oeil aux fonctions JavaScript. 13. Fonctions Javascript: Bienvenue les gars. Cette vidéo est tout sur les fonctions JavaScript. Alors commençons de la manière habituelle. Donc, créez un dossier Functions, qui est le numéro 9. Ouvrez ensuite le dossier Functions dans votre éditeur de texte. Ensuite, changez le titre en fonctions, puis, supprimez simplement l'exemple de code là. Une fonction est fondamentalement un bloc de code que nous pouvons appeler lorsque nécessaire. Donc, plutôt que de répéter le même code plus qu'un, nous pouvons l'écrire une fois et le placer dans une fonction. Ensuite, nous pouvons appeler une fonction par son nom pour l'exécuter. Donc, une fonction ressemble un peu à ceci. Utilisez donc le mot-clé function, puis donnez un nom à la fonction. Je vais l'appeler ma fonction. Ensuite, nous devons utiliser les supports bouclés après. Ensuite, le code que nous allons mettre à l'intérieur de la fonction, va entre accolades juste comme ça. Je vais commencer par une simple alerte. Donc, je vais juste alerter un peu de texte, la fonction fonctionne. Donc, une fois que nous avons créé une fonction, nous devons alors l'appeler, ou l'appeler par son nom de fonction. Donc, dans notre cas, c'est MyFunction. Je vais devoir écrire sur les parenthèses après, et un point-virgule. Sauve ça. Il y a donc notre fonction qui fonctionne. peu près n'importe quel code que nous voulons entre les accolades, et il fonctionnera à chaque fois qu'il est appelé. Donc, si nous créons quelques variables, donc la variable A peut effectuer quelques calculs à l'intérieur de la fonction. Puis variable B, et définissez cela sur 10. Ensuite, nous pouvons accéder à ces variables à l'intérieur de la fonction. Nous allons créer une variable C, et ce sera la somme de A, multipliée par B. Donc A , puis une étoile et B. Puis afficher la valeur de C avec un document.write. Donc maintenant, chaque fois que nous appelons myFunction, nous devrions obtenir le calcul en cours, puis le résultat du calcul étant imprimé à l'écran. Alors enregistrez et actualisez, puis nous obtenons la valeur apparaissant sur l'écran. Donc, pour vous aider à mieux comprendre les fonctions et exactement ce qu'elles font, créons un exemple réel de la façon dont nous pourrions utiliser une fonction dans un jeu. Donc nous avons eu un match et nous avons eu une variable qui définit le score. Ensuite, la variable nommée Lives, qui définit le nombre de vies que le joueur a, puis la variable de GameOver. Ceci est défini sur une valeur de construction, qui est true ou false. Donc, pendant que le jeu est en cours d'exécution, voulez que ce soit faux pour commencer. Donc, dans ce cas, une bonne utilisation d'une fonction peut être de réduire le nombre de vies que le joueur a. Donc, plutôt que d'écrire ce code chaque fois que le joueur perd une vie, nous pourrions simplement appeler la fonction. Donc, créez une fonction, et nous appellerons cela LifeLost. Donc, chaque fois que le joueur perd une vie, nous réinitialisions le score à zéro. Nous pourrions aussi diminuer le nombre de vies par un. Nous définirions également GameOver pour être égal à true. Ensuite, une fois le jeu terminé, nous voulons peut-être envoyer un message à l'écran. Donc document.write. Nous mettrons ceci entre les en-têtes de niveau 2. Alors jeu terminé. Ensuite, nous dirons à l'utilisateur combien de vies il lui reste. Ensuite, nous afficherons le nombre de vies. [ inaudible] cette barre latérale pour leur donner plus de place. Donc, pour imprimer le nombre vies, nous pouvons ajouter la variable vies. Donc, après le numéro, nous allons ajouter la chaîne, vies à gauche, puis, fermer le titre de niveau 2. Je vais avoir besoin d'espacer ça en fait. Alors gardons ça, alors on appellera la fonction, LifeLost. Jetons un coup d'oeil. Super. Donc maintenant, nous avons le message qui apparaît, et les 10 vies avec lesquelles nous avons commencé ont été réduites à neuf. On peut le refaire. Il devrait réduire d'un à chaque fois. J' espère que cet exemple vous a donné une meilleure idée de la façon dont nous pouvons utiliser les fonctions en JavaScript. Dans la vidéo suivante, nous allons continuer en regardant les paramètres de la fonction. 14. Paramètres de fonction: Bienvenue de retour. Dans la dernière vidéo, nous avons regardé comment définir une fonction et comment invoquer cette fonction en utilisant le nom des fonctions, puis les crochets bouclés. Dans cette vidéo, nous allons aller un peu plus loin. Je vais jeter un oeil à passer des paramètres dans ces crochets bouclés. Commençons par le dossier. Ouvrez votre dossier JavaScript. Dans les bases, dupliquez les fonctions. Ceci est le numéro 10, paramètres de fonction. Ouvrez ensuite le dossier des paramètres de fonction et changez le nom. Jetons un coup d'oeil à comment cela fonctionne. Nous pouvons simplement supprimer la section de la dernière vidéo. Une nouvelle fonction, et nous appellerons ce message AlertMessage. Cette fois, nous laissons les crochets vides. Je vais passer un message là-dedans. Ensuite, la fonction est que vous allez simplement alerter, le message que vous passez. Cela agit de la même manière qu'une variable. D' où recevons-nous ce message ? Eh bien, nous mettons ça dans les parenthèses quand nous la fonction d'appel. Message d'alerte. Cette fois, au lieu de laisser les crochets vides, nous allons passer un message que nous voulons alerter. J' apprends le Javascript. Ce message est tout ce qu'il y a ici. Ensuite, nous allons simplement alerter ce message. Jetons un coup d'oeil. Il y a le message, j'apprends Javascript. Nous pouvons également transmettre plus d'un paramètre dans la fonction. Si nous voulions avoir une fonction, nous venons d'effectuer un calcul. Je vais créer une nouvelle fonction appelée MultiplyNumbers. Ensuite, nous pouvons passer en deux paramètres ; numéro1 et numéro2. Ensuite, nous pouvons alerter le calcul de nombre1 multiplier par nombre2. Ensuite, comme avant, quand nous invoquons cette fonction, nous passons les deux nombres que nous voulons calculer. Par exemple, cinq et quatre. Maintenant, nous devrions faire alerter le calcul, ce qui est le résultat de 20. Ok, donc tout fonctionne. J' espère que tout a du sens et je vous remercie d'avoir regardé et j'espère que vous avez maintenant une meilleure compréhension de la façon de passer des paramètres dans les fonctions. Je vous verrai dans la prochaine vidéo, où nous allons jeter un oeil à la portée JavaScript. 15. Champ d'application de Javascript: Bienvenue de retour. Dans cette vidéo, nous allons jeter un oeil à la portée JavaScript. Scope définit essentiellement les variables auxquelles nous avons accès. Créons un nouveau dossier, et nous allons jeter un oeil à cela. Alors dupliquez la dernière vidéo. C' est la vidéo numéro 11, et on l'appellera Scope. Ouvrez comme d'habitude. Dans l'éditeur de texte, puis changez le titre en Javascript Scope, puis vous devez supprimer cette section. Commençons par une fonction. Nous allons appeler cette fonction multiplier, et nous n'avons pas besoin de paramètres là-dedans juste pour l'instant. Donc, à l'intérieur de cette fonction , je veux créer quelques variables, donc la variable a et la variable b, donner une valeur de cinq, puis créer une alerte d'un multiplier par b. Appelons maintenant cette fonction multiplier, et nous devrions obtenir le résultat de 10 apparaissant à l'écran. Donc tout fonctionne bien. Nous avons donc créé deux variables à l'intérieur de cette fonction, et c'est ce qu'on appelle la portée locale. Ce qui signifie que ces deux variables ne sont accessibles qu'au sein de cette fonction. Donc, si nous essayons d'alerter l'une des variables, donc nous essayons d'alerter par exemple, variable b, qui a été déclarée à l'intérieur de la fonction, et puis si nous passons au navigateur, vous pouvez voir que lorsque nous actualisons cette rien ne se passe réellement. Si nous allons dans les outils de développement, nous obtenons le message d'erreur disant, b n'est pas défini. Donc, créez seulement une variable à l'intérieur d'une fonction, si vous voulez seulement utiliser à l'intérieur de cette fonction. Si vous voulez utiliser cette variable en dehors de la fonction, ce dont j'ai besoin pour les sortir, et les mettre en dehors de la fonction. Donc maintenant, ces deux variables ont une portée globale, sorte qu'elles peuvent être accessibles non seulement dans la fonction, mais aussi n'importe où dans le reste du code. Maintenant, si nous alertons b, nous avons accès à cette variable, qui est le numéro cinq. Aussi si nous utilisons la fonction multiplier, si nous supprimons simplement les commentaires et ensuite actualisons la page, que la fonction a également accès aux deux variables aussi. Alors on y va. Commencez à regarder la portée des variables, j'espère que cela aide. Merci d'avoir regardé, et je vous verrai dans la section suivante. 16. Objets en Javascript: Salut les gars, et bienvenue. Dans cette vidéo, nous allons jeter un oeil aux objets JavaScript. Les objets JavaScript sont des parties vraiment importantes de JavaScript. Tellement que presque tout en JavaScript est classé comme un objet. Les objets sont une collection de paires nom-valeur. Jetons donc un coup d'oeil à la façon dont nous les utilisons. Alors créons la vidéo numéro 12. C' est ce qu'on appelle des objets. Alors ouvrons ça. Alors faites glisser, entrez des parenthèses. Changons ceci en objets JavaScript, et commençons par une balise de script vide. On y va. Donc, quand nous voulons créer un objet, nous commençons d'une manière similaire à une variable, que nous avons examinée plus tôt. Donc, nous utilisons le mot-clé var, puis nous voulons donner un nom à l'objet. Je vais utiliser un téléphone comme un bon exemple pour notre objet. Alors donnons-lui un nom de téléphone. Une façon de créer un objet est d'utiliser le nouveau mot-clé. Donc nouvel objet. Lorsque nous créons un nouvel objet, nous devons utiliser les crochets après. Cette mise en page devrait sembler assez familière de la section du tableau, où nous avons créé un nouveau tableau et ensuite nous avons ajouté certaines valeurs ou propriétés à ce tableau. Maintenant, nous avons notre objet de téléphone. Nous pouvons commencer à y ajouter des propriétés différentes, telles que le fabricant du téléphone, le modèle et la couleur. Donc, pour ajouter des propriétés à notre objet de téléphone, nous tapons le nom de l'objet. Ensuite, pour ajouter la propriété à l'objet de téléphone, nous pouvons utiliser les crochets. Ensuite, à l'intérieur des citations, nous pouvons ajouter le nom de la propriété. Ainsi, le fabricant peut être la première propriété. Donnons notre exemple à Apple. Puis un point-virgule à la fin. Nous pouvons continuer exactement de la même manière pour plus de propriétés. Donc, nous pouvons ajouter le modèle, et cela peut être réglé sur l'iPhone. La couleur du téléphone, donc je vais mettre ça en argent. Donc, nous avons défini un nouvel objet de téléphone. Cela va avoir les propriétés du fabricant, réglé sur Apple. Le modèle, réglé sur iPhone, et la couleur du téléphone à régler sur l'argent. Ce sont donc les paires nom-valeur. Donc c'est un nom. Il s'agit de la valeur attribuée à l'opérateur égal. Les objets sont idéaux pour tout ce qui a un certain nombre de propriétés, comme un objet de personne peut avoir des propriétés, telles qu'un nom, un âge, une adresse et un numéro de contact. Donc vraiment utile de garder toutes nos informations contenues sur le seul mot-clé. Donc maintenant, nous avons créé notre nouvel objet de téléphone, et nous avons ajouté trois propriétés différentes. Nous ajoutons toutes nos valeurs. Nous pouvons maintenant faire un journal de console. Nous pouvons donc nous connecter à la console l'objet du téléphone. Alors sauvegardons cela et jetons un coup d'oeil, et dirigez-vous vers les outils de développement. Alors on y va. Ainsi, nous pouvons voir notre objet est créé dans les journaux. Si vous ouvrez cela, nous pouvons voir toutes les paires nom-valeur. Nous avons la couleur, le fabricant et le modèle. Donc, c'est le contenu de l'objet complet. Si nous voulions accéder à une seule de ces propriétés, cela fonctionne d'une manière similaire à un tableau. Au lieu de consigner l'objet du téléphone, nous utilisons un objet téléphonique, puis les crochets. Ensuite, à l'intérieur des citations, nous mettons juste le nom de la propriété. Alors maintenant, nous devrions obtenir le modèle, qui est l'iPhone. Rendez-vous et rafraîchissez-vous. Alors on y va. Il y a donc la valeur de l'iPhone. Dans notre exemple que nous venons de rechercher, nous avons accédé et ajouté des propriétés à notre objet en utilisant les crochets et généralement une façon plus populaire et plus simple d'ajouter propriétés à un objet est d'utiliser la notation par points. Ça a l'air un peu plus simple. Donc, en utilisant l'exemple que nous avons créé ci-dessus, faisons cela à nouveau avec l'objet téléphone. Donc, définissons ceci à un nouvel objet, et commentons simplement cette section. Maintenant, nous voulons ajouter des propriétés. On peut commencer par l'objet du téléphone. Mais cette fois, au lieu des crochets, nous pouvons utiliser le point. Donc, un fabricant de points égal à Apple. Le phone.model est égal à votre iPhone, puis enfin le téléphone.color. Donc on va mettre ça à l'argent. Donc, cela fonctionne exactement la même que la notation de crochets que nous avons utilisée ci-dessus, mais je pense que cela semble juste un peu plus simple et c'est juste un peu plus facile à taper. Donc, juste pour vérifier que cela fonctionne, nous allons faire une console, journal de la console et qui affichera dans les journaux l'objet du téléphone. Donc, enregistrez, puis actualisez. Il y a donc notre objet une fois de plus avec le fabricant, le modèle et les propriétés de couleur. Donc nous obtenons exactement les mêmes résultats, mais je pense que ça a l'air un peu plus propre. Donc, si vous vous souvenez de quand nous avons créé un tableau, nous avons également fait la version littérale où nous n'avions pas besoin d'utiliser le nouveau mot-clé tableau. Nous pouvons faire exactement de la même manière dans la création d'objets. Donc, plutôt que de créer l'objet, comme nous venons de le faire, ce qui est une façon, nous pouvons utiliser le littéral d'objet. Il est donc un peu plus simple de créer un objet de cette façon. Donc, nous allons commencer par le mot-clé var, puis de nouveau lui donner le nom de l'objet, puis cette fois est de définir un nouvel objet. Nous définissons l'objet du téléphone pour être égal à toutes les paires nom-valeur, que nous mettons entre les accolades. Donc, nous pouvons définir à l'intérieur de l'accolade les propriétés. Donc fabricant et ensuite utiliser un deux-points. Alors, Apple. Le modèle, donc il va être séparé par une virgule. Le modèle, encore une fois, l'iPhone. La couleur de l'argent. Donc, l'une des grandes choses à propos de l'utilisation d'objets est qu'ils ne sont que des collections de paires nom-valeur. Nous pouvons également imbriquer un objet à l'intérieur d'un autre objet. Par exemple, si notre téléphone avait de nombreuses fonctionnalités différentes, nous pourrions également créer un objet de fonctionnalités. Au lieu d'ajouter une valeur, nous pouvons utiliser les accolades puis à l'intérieur des accolades, nous pouvons ajouter plus de paires nom-valeur. Ainsi, par exemple, si notre téléphone avait des fonctionnalités telles que Bluetooth. Donc, nous allons définir cela à une valeur booléenne de true et Wi-Fi. Donc, cela devrait être une virgule à nouveau, puis le Wi-Fi, ce qui peut également être vrai. GPS, nous allons définir cela pour être faux, et vous pouvez imbriquer autant de ces propriétés à l'intérieur que vous le souhaitez. Donc maintenant, si nous voulions accéder à l'une de ces propriétés qui sont imbriquées, c'est assez simple à faire. Donc, nous faisons un journal de console. Alors commencez par notre nom d'objet. Le nom de l'objet est téléphone, puis utilisez le point pour accéder aux propriétés. Vous pouvez voir les parenthèses nous est déjà donné une liste des différentes propriétés. Donc, avec les caractéristiques de couleur, le fabricant et le modèle. Si nous voulions aller plus loin, nous pouvons sélectionner les fonctionnalités, puis utiliser à nouveau le point. Ensuite, vous pouvez voir à l'intérieur des fonctionnalités, nous avons les trois propriétés de Bluetooth, GPS et Wi-Fi. Alors sauvegardons ça et vérifions ça. Donc, nous devrions obtenir la valeur de Bluetooth, ce qui est vrai. Donc rafraîchir et il y a notre vraie valeur, et cela change au GPS et alors nous devrions obtenir une valeur de faux. On y va. Donc maintenant, nous avons notre objet de téléphone toute la configuration. Je vais juste créer un exemple en utilisant une fonction, que nous avons examiné dans cette section. Donc, créez une fonction. Nous allons simplement afficher les fonctionnalités de votre téléphone dans une fonction. Faisons juste une alerte au navigateur. Ensuite, à l'intérieur de l'alerte, nous pouvons afficher le fabricant du téléphone en saisissant la propriété du fabricant de l'objet. Commençons par une chaîne. Donc un fabricant, puis un espace. Nous pouvons utiliser le plus pour ajouter à la fin. Sélectionnez notre objet de téléphone et utilisez la notation de points. Donc téléphone.manufacturer, puis pour afficher cela quand il est appelé la fonction YourPhone. Donc, collez cela dans, puis enregistrez cela, puis allez dans le navigateur et actualisez. Alors on y va. Il y a notre chaîne de fabricant, et puis nous avons tiré dans le fabricant d'objets, qui est Apple. Alors on y va. C'est ainsi que nous créons un objet en JavaScript, et c'est la fin de cette section. Alors merci. Je vous verrai dans la section suivante. 17. Math en Javascript: Bienvenue dans cette nouvelle section appelée JavaScript Math et dates. Espérons que nous commençons maintenant à mieux comprendre ce qu'est JavaScript et ce que JavaScript peut faire. Les choses devraient vous sembler beaucoup plus familières maintenant. Nous allons commencer en regardant JavaScript Math. JavaScript Math nous permet d'effectuer tâches mathématiques complexes ou simples telles que la création de nombres aléatoires, la recherche de la valeur la plus basse ou la plus élevée dans un tableau, par exemple, arrondir les nombres de haut en bas, entre autres. Ensuite, nous allons jeter un oeil à la date JavaScript. L' objet de date JavaScript nous permet de travailler avec la date actuelle. Nous pouvons le faire de différentes manières. Nous allons jeter un coup d'oeil à cela pendant que nous passerons dans cette section. Commençons comme d'habitude dans notre dossier JavaScript. Je vais créer un nouveau dossier à l'intérieur et appeler celui-ci maths et dates. Ensuite, je vais juste copier un dossier des sections précédentes et le coller là juste pour nous faire démarrer. Je vais appeler le premier JavaScript maths. Ensuite, ouvrons cela dans votre éditeur de texte. Ensuite, comme d'habitude, changez le titre en JavaScript Math. Ensuite, supprimez tout code des vidéos précédentes. On y va. On va commencer avec pi. Espérons que tu te rappelles de l'école ce qu'est Pi. Si vous ne le faites pas, pi est 3,14. Nous pouvons trouver cela en JavaScript en utilisant l'objet Math, puis point, puis PI. Nous pouvons afficher Math.pi dans l'une des méthodes habituelles. Je vais créer une alerte, puis mettre le Math.pi dans les parenthèses avec un point-virgule à la fin. On devrait agrandir ça un peu pour que tu puisses le voir. Ensuite, ouvrez le navigateur et voyons à quoi cela ressemble. Voilà notre alerte. La valeur de pi est 3.141 et beaucoup plus de chiffres après cela nous n'avons pas besoin de nous inquiéter pour cette vidéo. Si vous êtes satisfait de cela, il suffit de le commenter. Ensuite, nous allons jeter un oeil à la façon de générer un nombre aléatoire en JavaScript. La façon de le faire est avec l'objet Math une fois de plus, mais cette fois utiliser .random. Mais cette fois, nous devons mettre les crochets là-dedans. Encore une fois, nous pouvons simplement alerter cela au navigateur. Alerte, puis entoure le math.Aléatoire à l'intérieur des parenthèses avec le point-virgule. Ensuite, jetons un coup d'oeil à ce qui est affiché. D' accord. Alerte au niveau du navigateur est de 0,85. Vous vous demandez peut-être pourquoi il s'agit d'un nombre aléatoire. Eh bien, en JavaScript, un nombre aléatoire est généré entre zéro et un. Zéro est en fait inclus dans ce nombre aléatoire, mais un ne l'est pas, alors faites attention à cela. Si nous voulons générer un nombre aléatoire, par exemple, entre un et 10, nous devons toujours le faire de la même manière, mais nous avons juste besoin de multiplier le résultat, exemple, par 10. Jusqu' à présent, dans les deux exemples que nous venons de vous montrer, les nombres ont beaucoup de décimales comme celui-ci là-bas. Mais parfois, nous voulons arrondir au nombre entier le plus proche. Avec JavaScript, nous pouvons soit arrondir, soit arrondir. La façon d'arrondir. Nous créons une alerte pour commencer. Ensuite, à l'intérieur des supports d'alerte, nous devons utiliser Math.Ceil, qui est court pour plafond. Ensuite, à l'intérieur des parenthèses après cela, nous devons mettre le nombre que nous voulons arrondir. Si nous avons créé un nombre de 4.5, cela devrait arrondir ce nombre au nombre entier le plus proche, qui est cinq. Puis actualisez. Nous obtenons la valeur de cinq dans la boîte d'alerte. Cela fonctionne avec n'importe quel numéro. On devrait encore en avoir cinq maintenant. Arrondir vers le bas est en fait assez similaire. Au lieu de Math.Ceil, nous utilisons Math.Floor. Puis, encore une fois, nous passons le nombre que nous voulons arrondir. Pour un nombre maintenant de 7.6, nous devrions maintenant obtenir la valeur de sept à l'intérieur de la boîte d'alerte. Super. Encore une fois, cela fonctionne avec n'importe quel nombre. Peu importe à quel point le nombre est élevé ou bas, vous aurez toujours arrondi au nombre entier le plus proche. Commentons cela et continuons ensuite ci-dessous. C' est une façon d'arrondir un nombre ou d'arrondir un nombre. Mais si nous voulions juste arrondir au nombre entier le plus proche au lieu de tout arrondir vers le haut ou vers le bas, nous pouvons le faire avec Math.Round. Vous créez votre boîte d'alerte, puis Math.Round. Maintenant, par exemple, une valeur de 7,2, cela devrait être arrondi au nombre le plus proche de sept, que nous y arrivons. Si c'est au-dessus de cinq, comme 7.6, cela devrait aller jusqu'à huit maintenant. Si le nombre que nous avons passé était au milieu, donc il était 7,5, cette valeur sera toujours arrondie. On devrait toujours en avoir huit dans la boîte d'alerte. Je vais juste commenter celui-ci, puis passer à regarder les nombres minimum et maximum. Si nous avions plus d'une valeur et que nous voulions vérifier quel est le nombre le plus bas ou qui est le nombre le plus élevé, nous pouvons utiliser Math.min et Math.max. Alertons cette fois Math.min. Ensuite, à l'intérieur des parenthèses cette fois, nous pouvons passer plus d'une valeur. Mettons des nombres là séparés par des virgules. Huit, 15, 3 et 63. Maintenant, nous devrions être en mesure de déterminer quel est le nombre le plus bas. C' est pourquoi avec [inaudible] nous devrions obtenir la valeur de trois dans l'alerte, ce que nous faisons. Ensuite, tout ce que nous devons faire pour trouver la valeur la plus élevée est juste de changer .min à .max, et maintenant nous devrions obtenir la valeur de 63. On y va. Dit 63 à l'intérieur de la boîte d'alerte. Il y a un ou deux autres exemples à regarder sur votre feuille de triche et ils fonctionnent tous de la même manière que les exemples que nous venons d'examiner. Maintenant, nous avons une meilleure compréhension de la façon dont JavaScript Math fonctionne. Dans la vidéo suivante, mettons-nous cela en pratique dans un mini défi. 18. Mini défi : générer un nombre entier aléatoire entre 1 et 100: Bienvenue de retour. J'espère que vous avez une chance d'avoir un peu de jeu avec certains des calculs JavaScript que nous avons examinés dans la dernière vidéo. Donc maintenant, nous avons toute la théorie ennuyeuse hors du chemin. Mettons tout cela en pratique et créons un autre mini défi. Cela va être assez simple, mais vous pourriez avoir besoin de penser à une ou deux choses en cours de route. Tout ce que je voulais faire dans ce défi est de générer un nombre aléatoire entre un et 100. C' est quelque chose qui devrait être capable de le faire. C' est quelque chose que nous avons regardé dans les vidéos précédentes, et c'est quelque chose qui ne devrait pas causer de problèmes. Eh bien, si c'est le cas, ne vous inquiétez pas suivez ce que je fais à la fin de cette vidéo et je vous montrerai exactement comment faire ça. Alors allez dans votre dossier JavaScript, puis la section mathématique et date. Dupliquez la dernière vidéo, et appelez-la comme vous voulez, mais je vais appeler un défi de nombres aléatoires, puis ouvrez cela dans votre éditeur de texte. Enfin, changez le titre et supprimez le code de la dernière vidéo, donc Mini challenge : Générer un nombre aléatoire entre 1-100. On n'a plus besoin de ça pour enlever ça. Si vous n'avez pas l'impression d'avoir besoin d'aide, arrêtez la vidéo maintenant et donnez ça un coup de pouce. Si vous sentez que vous avez encore besoin d'un ou deux pointeurs de plus, jetez un oeil à la dernière vidéo à nouveau et jetez un oeil à la section Math.Aléatoire de cette vidéo, et cela devrait vous donner tous les indices dont vous avez besoin pour terminer le défi. Alors donnez ça, et si vous n'avez pas confiance en vous, ne vous inquiétez pas. Je vais voir comment je le ferais maintenant. Commençons simplement entre les balises de script. Je vais commencer par créer une variable pour stocker le nombre aléatoire à l'intérieur. Je vais appeler ce nombre arrondi variable, puis cela va être réglé sur Math.Random, que nous avons regardé dans la dernière vidéo. N' oubliez pas les crochets, puis le point-virgule. Si vous vous souvenez que le math.random a généré un nombre aléatoire entre zéro et un, mais parce que nous voulons que la valeur soit comprise entre un et 100, nous devons multiplier la valeur par 100. Donc, manipulons cette variable. Copiez donc cela et collez-la. Donc, nombre arrondi est maintenant égal au nombre arrondi, multipliez par 100, puis nous allons imprimer cela à l'écran. Je vais utiliser un document.write, puis passer à l'intérieur de la variable, qui est le nombre arrondi. et voyons juste comment cela est à la recherche maintenant, et actualisez cela quelques fois. Tu devrais vérifier que ça marche bien. Nous devons donc également arrondir ce nombre au nombre entier le plus proche. Je vais en fait arrondir le numéro. Encore une fois, il suffit d'aller dans le code, puis changer la variable de nombre arrondi, donc Math.Floor. Puis à l'intérieur des parenthèses cette fois, au lieu de simplement taper un nombre que vous venez de mettre en nous-mêmes, nous allons passer la variable de nombre arrondie, puis jeter un oeil à cela. J' espère que vous avez réussi à le faire. Mais il y a un petit accroc avec ça. Si vous vous souvenez que le nombre aléatoire que nous avons généré a commencé à zéro mais n'a pas réellement inclus le numéro 1, donc, le plus grand nombre que nous pouvons éventuellement aller va être 99. Pour augmenter cela, nous allons juste utiliser plus un. Si vous continuez à rafraîchir, il devrait enfin obtenir les valeurs de 1 et 100, mais cela peut prendre un certain temps. Donc maintenant, tout fonctionne. Il y a encore une chose que je veux te montrer avant de finir cette vidéo. Donc, le code que nous avons créé dans ce défi, c'est assez étape par étape et tout est sur des lignes séparées. La façon dont nous pouvons réellement combiner cela pour être un peu plus propre et tout sur une seule ligne, je vais juste commenter cela. Si vous utilisez des parenthèses comme moi, vous pouvez mettre en surbrillance tout le code, puis commander sur barre oblique avant. Pour mettre tout cela sur une ligne, nous pouvons commencer avec la même variable. Je vais juste copier ça et coller ça. Mais cette fois, nous allons commencer avec Math.Floor, sorte que le résultat est arrondi vers le bas. Ensuite, à l'intérieur des parenthèses, vous pouvez mettre dans les mathématiques.Aléatoire, afin de coller cela à l'intérieur là. Le nombre aléatoire que nous générons, nous voulons qu'il soit multiplié par 100. Donc, nous allons nous débarrasser de la barre latérale afin que nous puissions voir tout sur une ligne là, par exemple, multiplier 100, et assurez-vous que toute cette section il y a entre les mathématiques.supports de plancher. Ensuite, en dehors des crochets, nous pouvons ajouter notre plus un, comme nous le faisons là-haut. Sauvegardez cela et nous pouvons toujours utiliser le même document.write, puis espérons, si nous allons dans le navigateur et actualisons, nous devrions toujours obtenir le même résultat. Mais cette fois, tout est sur une seule ligne et ça a l'air juste un peu plus propre. On y va. Alors j'espère que vous parviendrez à y parvenir par vous-même. Sinon, ne vous inquiétez pas. Suivez l'exemple que je viens de faire et essayez de comprendre exactement ce que nous faisons, et je vous verrai dans la prochaine vidéo. Nous allons jeter un oeil aux méthodes de date et de date JavaScript. 19. Dates et méthodes de datation: Dans cette vidéo, nous allons jeter un oeil aux dates JavaScript. Commençons de la manière habituelle et créons un nouveau dossier. Je vais juste dupliquer les mini-défis de la dernière vidéo et l'appeler Dates. Ouvrez ensuite votre éditeur de texte, puis faites glisser le dossier de dates. Maintenant, le titre va être des dates JavaScript. Nous pouvons simplement supprimer le code de la dernière vidéo entre les balises de script. Juste pour commencer, nous allons commencer par un moyen simple de créer un nouvel objet dates, et nous allons stocker cela dans une variable. Commencez par créer une variable, et vous pouvez l'appeler comme vous le souhaitez. Je vais appeler le mien show date. Ensuite, nous devons fixer cela à une nouvelle date. Vous devez mettre des parenthèses après cela. Ensuite, nous pouvons utiliser un document.write ou toute autre méthode que vous préférez afficher la variable de show date, alors mettez cela entre les crochets, puis un point-virgule. Nous y allons, donc maintenant nous obtenons la date complète imprimée sur le navigateur et vous obtiendrez évidemment des dates différentes selon le jour où vous regardez cette vidéo, et votre fuseau horaire. En utilisant cet objet de jour, il nous donne le jour actuel, le mois, le jour du mois, l'année, l'heure actuelle, puis le fuseau horaire. Cette formule est assez longue et souvent nous ne voulons pas toutes ces informations. Je vais vous montrer ensuite, obtenir et définir les méthodes. Ils sont à peu près ce qu'ils ressemblent, une méthode get est utilisée pour obtenir un certain chemin de la date. Pour obtenir les heures individuelles, nous pouvons obtenir le jour individuel, ou les secondes, ou l'heure. Ensuite, nous pouvons également utiliser des méthodes set qui sont utilisées pour définir un chemin de la date, comme définir l'heure actuelle ou définir la date actuelle. Commençons par jeter un oeil aux méthodes get. Chacune de ces méthodes get que je vais vous montrer, je vais le stocker dans une variable. Pour commencer, je vais définir la variable appelée date, puis définir cette valeur à une nouvelle date, commençant par un D majuscule, puis les parenthèses. Maintenant, nous avons la date actuelle. On peut diviser ça en le jour du mois. Encore une fois, peu importe ce que vous appelez ces variables, faites-les simplement descriptives. Je vais définir cela égal à la variable de date que nous avons créée, puis coller cela dans, puis utiliser point, puis obtenir la date. Vous pouvez en fait voir la saisie semi-automatique là. Cela vous donnera une idée de ce que nous sommes sur le point de faire. Obtenez des dates et un point-virgule à la fin. Nous créons un nouvel objet dates, puis nous obtenons juste une propriété individuelle à chaque fois. Je vais juste dupliquer cette ligne. Cette fois, je vais l'appeler le jour de la semaine, puis cette fois sa date.GetDay. Ensuite, pour obtenir le mois, créons une nouvelle variable du mois. Vous pourriez probablement deviner ce qu'on va faire ici. C' est Date.GetMonth. Vous pouvez également obtenir l'année en cours. On a besoin de l'année. En passant, vous pouvez avoir à simplement copier et coller ces, ou j'utilise la commande ou le contrôle D pour dupliquer entre parenthèses. Si l'éditeur de texte que vous utilisez ne duplique pas, copiez et collez simplement. Après l'année, nous pouvons obtenir les heures puis minutes, Date.GetMinutes. Alors la dernière que je veux vous montrer est les secondes, donc Date.GetSeconds. On va juste commenter ces deux lignes, on n'en a pas besoin. Maintenant, nous avons toutes ces variables créées et nous pouvons vouloir simplement utiliser certaines parties de la date. Par exemple, nous pouvons créer une chaîne, telle que la date du jour est, puis entrer le jour, le mois et l'année. Donnons-le un coup d'envoi. Faisons un document.write. Puis entre les citations, je vais créer une chaîne de la date d'aujourd'hui est et puis un deux-points. Je vais les mettre sur des lignes séparées donc c'est un peu plus lisible. Nous voulons montrer le jour, puis le mois, puis l'année. Nous voulions afficher cela dans le navigateur, comme il est. Nous pouvons mettre des balises HTML break là-dedans, puis terminer la chaîne là-bas, et ensuite nous devons concaténer pour joindre les chaînes, suffit d'utiliser le symbole plus. Parce que chacun de ces mots est une chaîne, entourez-les entre guillemets. La même chose avec l'année. C' est assez simple à faire, donc nous avons la chaîne de jour avec un espace, puis plus. Ensuite, le jour est la variable appelée jour de la semaine. Nous pouvons nous joindre dès maintenant jusqu'à la fin du mois. Nous devons nous joindre sur le nom de variable du mois. Puis l'année, il suffit d'ajouter l'année. Nous pouvons voir que notre code est assez lisible maintenant parce que nous avons utilisé des noms de variables descriptives. Assurez-vous de le faire quand vous le pouvez. Ensuite, enfin, nous avons juste besoin d'ajouter à la fin une balise break juste pour qu'ils soient sur des lignes séparées, puis une autre jointure à la fin. La balise de rupture doit être affichée comme ça. Ensuite, faites-le sur la ligne suivante aussi. Copiez cela, et cela nous amène à notre prochaine ligne, comme vous pouvez le voir par. On n'a pas besoin de ça. Puis terminez ça avec un point-virgule. Nous avons commencé avec une chaîne là, la date d'aujourd'hui est, nous mettons le marquage de pause pour passer à la ligne suivante, puis nous allons avoir trois lignes distinctes qui affichent le jour, le mois et l'année en cours. Sauvegardons cela et voyons si cela fonctionne bien dans le navigateur. Rafraîchissez ça. Donc nous avons le jour d'aujourd'hui est, le numéro du jour, le numéro du mois, et l'année est 116, donc nous devons changer ça. On a fait l'année. Nous devons mettre l'année complète là-dedans. On y va. Donc c'est 2016 maintenant. J' espère que cela a du sens. Je vais juste commenter cette section maintenant. Ce sont les méthodes get, et je veux passer maintenant aux méthodes set qui sont utilisées pour définir la date. Commençons par une nouvelle variable appelée date fixe, et tout comme ci-dessus, nous allons définir cela égal à une nouvelle date. Ensuite, nous pouvons maintenant définir certaines parties de la date. Donc, si nous voulions définir le mois de la colonne, nous pourrions utiliser la variable de nom de jeu, puis point, puis nous devons définir le mois, puis placer le mois que vous voulez définir entre parenthèses. Nous pouvons définir cela comme 11, par exemple. Ensuite, si nous voulions définir l'année, encore une fois, utilisez la variable de date définie, puis dot set année entière. Tu peux régler ça à ce que tu veux. Je vais mettre en 2020. Vous pouvez voir que ceux-ci sont assez similaires à ceux que nous avons utilisés ci-dessus, nous remplaçons juste get avec set. Vérifions si cela fonctionne avec l'écriture du document. Ensuite, à l'intérieur de l'écriture de document, nous allons utiliser la variable de date définie. Donc nous y regardons de plus près, vous pouvez voir que nous avons le mois de décembre. Nous avons mis dans le 11e mois, qui est en fait la dernière valeur parce que le mois défini va de 0-11, donc 11 serait Décembre. Nous avons fixé l'année complète pour être 2020, et vous pouvez le voir à l'intérieur du navigateur là-bas. Nous n'avons pas touché l'heure, donc c'est le fuseau horaire actuel. On y va. J' espère que cela a du sens. Jouez un peu avec ce que nous venons de regarder. Merci de regarder, et vous verra dans la prochaine vidéo. 20. Instructions If et comparaison: Félicitations pour avoir été aussi loin. Il s'agit d'une nouvelle section appelée Contrôle du flux et des boucles. Dans cette section, nous allons jeter un oeil à quelques nouvelles méthodes telles que les instructions if else et nous allons jeter un oeil aux opérateurs, aux instructions switch et aux différents types de boucles. Comme d'habitude, nous lancerons un ou deux défis à l'intérieur, afin que nous puissions mettre en pratique ce que vous avez appris et voir comment cela fonctionne dans des exemples concrets. La première vidéo avec laquelle nous allons commencer est appelée si les déclarations et la comparaison. En JavaScript, et dans beaucoup de nos langages de programmation, nous pouvons souvent traiter beaucoup de données, telles que des nombres et des valeurs. Nous avons souvent besoin d'un moyen de comparer plus d'une valeur à une autre et de décider d'un résultat. JavaScript nous fournit un moyen de comparer les opérateurs de comparaison appelés. Ensuite, si instruction test pour voir si une condition est vraie. Si cette condition est vraie, alors il exécute du code. Jetons un coup d'oeil à quelques exemples. Parce que nous sommes dans une nouvelle section, nous voulons créer un nouveau dossier. Je vais appeler ce flux de contrôle de dossier et boucles. Ensuite, nous voulons aller dans l'une des vidéos précédentes et simplement copier l'une de ces vidéos, puis coller juste pour que nous ayons un point de départ. Renommez ensuite ceci si les instructions et la comparaison. Ouvrez ensuite ceci entre parenthèses, ou votre éditeur de texte. Il suffit de le faire glisser et de changer le titre dans la page d'index. Mon cas est, si les instructions et la comparaison, puis supprimez le code entre les balises de script. On y va. Nous n'avons pas besoin de ça non plus. Pour commencer, nous allons jeter un oeil à une comparaison simple juste pour comparer deux variables. Variable a égale à 10 et aussi variable b égale à 20. Nous allons commencer par une simple instruction if juste pour vérifier si la valeur de a et b est la même. Pour commencer, nous utilisons le mot-clé if, puis un ensemble de crochets, puis après cela, une paire d'accolades. Avec une déclaration if entre les crochets ici, nous mettons une condition à tester. Dans notre cas, nous voulons tester si a est égal à b, donc mettons cela là, donc a, puis trois égaux, puis b. Si vous vous souvenez, les trois égaux vérifient si les valeurs sont égales et aussi de type égal. Vérifions si a est égal à b, puis si c'est le cas, nous voulons faire un document écrit et ensuite il les imprime dans le navigateur juste pour nous savoir que la condition est vraie. Je vais juste écrire la condition est vraie et juste le rendre un peu plus grand. Mettons des balises de titre de niveau 2 là-dedans. Donc h2 avant et après, puis ouvrons l'application dans le navigateur et voyons ce qui se passe. Encore une fois, rien ne s'affiche dans le navigateur parce que la condition n'est pas vraie, parce que a n'est pas égal à b. Si nous changeons les deux valeurs pour être les mêmes, puis actualisons, nous devrions maintenant obtenir la condition du message est vraie. L' instruction if fonctionne correctement. En plus des trois égaux, il y a beaucoup d'autres comparaisons différentes que nous pouvons utiliser. Nous avons mentionné plus tôt que l'utilisation de deux symboles égaux vérifiera si a et b est une valeur égale mais pas un type égal. Par exemple, un pourrait être une chaîne et un autre pourrait être un nombre. Si nous voulons vérifier si les valeurs ne sont pas égales, nous utilisons un point d'exclamation puis un symbole égal. allons juste changer cela pour n'être pas égal et nous devrions toujours obtenir la condition est vraie, ce que nous faisons là. Cela vérifie la valeur. Si vous vouliez vérifier la valeur et le type, nous pourrions utiliser deux égaux et le point d'exclamation. Cela signifie que la valeur ou le type n'est pas égale. Nous pouvons également utiliser moins ou plus de. Si a est supérieur à b, ce qu'il est, la condition est toujours vraie. Si a était inférieur à b, il devrait maintenant être vide car la condition est fausse. En combinant le moins de et le plus grand que avec un symbole égal signifie si a est inférieur ou égal à b, puis exécutez ce code entre les accolades, et exactement le même avec le plus grand que. Si a est supérieur ou égal à b, la condition est vraie. Rafraîchissons ça. Cela est vrai parce que a est supérieur à b. Si b était aussi 20, donc ils étaient égaux, nous devrions aussi obtenir la condition est vraie. Bien. J'espère que cela a du sens. Je vais juste vous montrer un exemple d' utilisation rapide de la façon dont cela peut être utilisé dans un programme de la vie réelle. Je vais juste vérifier si un utilisateur est connecté et aussi vérifier le nom de l'utilisateur. Une instruction if pourrait vérifier si un utilisateur est connecté , puis imprimer sur le navigateur un message de bienvenue à cet utilisateur connecté. Avec une variable telle que connectée, je veux définir ceci à une valeur booléenne de true. Cela peut être vrai ou faux. Ensuite, une variable qui stocke le nom de l'utilisateur. Je veux mettre la mienne à Chris. Ensuite, comme avant, nous allons créer une instruction if. Si vous voulez juste vérifier si un utilisateur est connecté, nous pouvons simplement vérifier s'il est connecté. Nous n'avons pas besoin d'utiliser des opérateurs de comparaison tels que égaux, car cela est déjà défini sur true. Ouvrez la variable. Si l'utilisateur est connecté, nous allons créer un message pour cet utilisateur avec une écriture de document. Cela peut être aussi simple, ou aussi compliqué que vous le souhaitez. Je vais juste créer un message de bienvenue à cet utilisateur, puis ajouter à la fin de ce message de bienvenue le nom de la variable de l'utilisateur. Ça devrait dire, bienvenue à Chris. Puis permet d'ouvrir le navigateur. On y va. Nous obtenons le message de bienvenue car l'utilisateur est configuré pour se connecter. Si vous modifiez cette valeur pour être false, puis actualisez à nouveau le navigateur, nous devrions perdre le message car cette condition n'est plus remplie. J' espère que tout cela a du sens pour vous maintenant. Si ce n'est pas le cas, jetez un oeil à certains des exemples que nous venons d'utiliser et essayez de vous contourner avant de passer à la vidéo suivante, où nous allons construire sur les déclarations if en jetant un coup d'oeil aux déclarations if else. 21. Déclarations Else et Else if: Bienvenue, tout le monde. Dans la dernière vidéo, nous avons regardé si les déclarations. Si les instructions vérifient si une condition est remplie, puis si cette condition est vraie, nous exécutons ensuite du code. Bien que si nous avons eu plus d'un résultat, nous avons besoin d'un moyen de faire face à cela. Nous pouvons faire face à cela en utilisant une instruction else ou une instruction else-if. Mettons ça dans un nouveau dossier. Dupliquer la dernière vidéo, en fait, quand je numérote ça, ils sont en ordre. Numéro 1, et puis ce sera le numéro 2, c'est autre et else-if. Ouvrez ensuite votre éditeur de texte, puis changez le nom en haut. Ce sera des instructions else, et else-if, juste en descendant entre les balises de script. Plutôt que de supprimer, ce que nous pouvons faire est de construire sur la dernière vidéo pour commencer. Nous vérifions si un utilisateur est connecté. Si cet utilisateur est connecté, nous envoyons un message à l'utilisateur, mais cela ne fournit aucune sauvegarde au cas où l'utilisateur n'est pas connecté. C' est là qu'une instruction else peut être utilisée. Juste après l'accolade bouclée, nous pouvons ensuite taper autre et ensuite fournir un deuxième ensemble d'accolades, et ceci est pour la condition si l'utilisateur n'est pas connecté. Nous pouvons simplement copier le document, coller entre les accolades. Cette fois, si l'utilisateur n'est pas connecté, nous allons simplement envoyer un message à cet utilisateur juste pour le connecter. Veuillez vous connecter pour voir la page. Nous avons toujours la variable de logged in set sur false, donc maintenant nous devrions obtenir le message de connexion. On y va. Veuillez vous connecter pour afficher la page, ceci est utilisé comme une solution de secours dans le cas où l'instruction d'origine n'est pas vraie. IF-else sont utilisées assez régulièrement dans les langages de programmation. C' est un concept très utile pour s'y habituer. [ inaudible] if-else, et vous vous demandez peut-être quoi faire s'il y a une troisième option ou une troisième condition à remplir, et c'est assez simple. Nous pouvons simplement nous baser sur l'ensemble, et entre les déclarations if-statements et else où vous utilisez simplement un else-if. Nous allons créer un nouvel exemple. Il suffit de supprimer tout ça. Je vais créer un exemple juste pour vous montrer comment cela est utilisé. Ceci est basé sur la vitesse d'une voiture. Nous allons vérifier une variable, qui est la limite de vitesse. Par exemple, je vais définir les limites de vitesse à 70, puis une seconde variable qui est votre vitesse, et aussi définir ceci à 70 juste pour commencer. Par exemple, nous allons imprimer un message sur l'écran de la voiture. Créez une instruction if-, et l'instruction if-veut vérifier si votre vitesse, mettez cette variable à l'intérieur, est inférieure à la limite de vitesse. Collez à l'intérieur, donc si votre vitesse que vous faites est inférieure aux limites de vitesse actuelles, nous pouvons créer un message avec des droits de document, comme, merci de conduire en toute sécurité. Il suffit de retirer la barre latérale pour obtenir un peu plus d'espace là-bas, puis nous pouvons créer un else-if, puis les crochets, puis les accolades. Si votre vitesse est supérieure, nous copions simplement cette condition basée sur dans l'else-if, et elle change à supérieure à. Si vous passez la limite de vitesse, mettons un document au-dessus à l'intérieur, et cette fois disons, s'il vous plaît, ralentissez. Ensuite, nous allons juste finir cela avec une autre déclarations comme la sauvegarde. Vous pouvez y mettre plus d'une instruction else-if si vous le souhaitez, il suffit d'aller directement après la dernière accolade bouclée, mais assurez-vous qu'une instruction else est à la fin. En guise de repli, si la vitesse est égale à la limite de vitesse, il suffit de mettre un message simple comme, attention, vous conduisez aux limites de vitesse. Nous n'avons pas besoin de mettre des parenthèses à l'intérieur avec une condition, juste pour cette fois parce qu'il n'y a qu'une seule condition [inaudible] à remplir. Nous avons couvert si la vitesse est inférieure ou supérieure à la limite de vitesse, le seul résultat possible que nous pouvons obtenir est si les vitesses sont égales, et cela est couvert par l'énoncé else. Jetons un coup d'oeil. Actuellement, vous avez la limite de vitesse pour être égale à votre vitesse, nous devrions recevoir le message prudent à la toute fin là. Ouvrons ça. Nous ferons attention que vous conduisez à la limite de vitesse. Changeons les variables. Nous avons mis votre vitesse à 60 ans, nous devrions avoir, merci de conduire en toute sécurité. Rafraîchissez cela, et voilà, dit le message de remerciement. Sur le dernier à vérifier est si votre vitesse est supérieure à la limite de vitesse, que vous obtenez le message de ralentissement s'il vous plaît, ce que nous faisons, donc c'est génial. Merci de regarder, et c'est la fin de la vidéo sur les déclarations else et else-if déclarations. Dans la prochaine vidéo, nous allons les mettre en pratique avec un petit mini défi. 22. Mini défi : vérificateur d'âge: Bienvenue de retour. Maintenant, c'est votre chance de donner des déclarations si else pour aller avec un mini défi. C' est un défi assez simple, si vous avez compris les dernières vidéos. Cependant, cela vous donne la chance de taper vous-même sans me regarder, et de cette façon il devrait rester dans votre mémoire un peu mieux. Il suffit de dupliquer la dernière vidéo sur les déclarations else-if, puis c'est le numéro 3, et le mini défi va être appelé le vérificateur d'âge. Ensuite, ouvrez l'application dans votre éditeur de texte, faites glisser dans le dossier, puis ouvrez la page d'index, changez le titre en Vérificateur d'âge et supprimez ce code, afin que nous ne trichions pas. Ok, donc c'est assez simple. Tout ce que je veux que vous fassiez est de créer quelques variables, une pour un âge minimum et une pour votre âge actuel Ensuite, créez une déclaration if-else, tout comme nous l'avons utilisé dans la dernière vidéo.Ensuite, faites quelques vérifications. Tout d'abord, vérifiez si votre âge est inférieur à l'âge minimum, puis créez un message au navigateur. Quand on nous fouille, s'il vous plaît revenir quand vous avez 18 ans. Ensuite, quelques autres conditions comme si vous êtes assez vieux ou si votre un certain âge pour vérifier votre identité. Give the Ago qui utilise juste des choses que nous avons apprises dans la dernière vidéo. n'y a rien de plus que vous avez besoin d'essayer de recherche ou Google. Essayez ça et voyez comment ça se passe. Si vous êtes coincé ou si vous ne vous sentez pas assez confiant pour essayer cela ici, suivez simplement avec moi. Je vais créer une variable d'âge minimum. Je veux régler ça à 18. Ensuite, une variable, qui est votre âge et qui va être 15, par exemple. Ensuite, créez votre instruction if ci-dessous. Si vous préférez jeter tout cela vide abord juste pour vous assurer que vous avez tout au bon endroit. Tout comme ça, il peut être utile juste pour s'assurer que nous ne manquons pas d'accolades ou de supports. D' accord. Donc, tout d'abord, nous voulons vérifier si vous avez moins d'âge. Nous vérifions la variable, YourAge. Si YourAge est inférieur à la MinAge, nous allons créer un message à l'utilisateur avec le document.write. A l'intérieur des crochets, « Désolé, veuillez revenir quand vous avez 18 ans ». Ensuite, je vais créer une déclaration else-if. Je vais vérifier si votre âge est de 25 ans ou moins, puis créer un message pour fournir une pièce d'identité. Si votre âge actuel est supérieur ou égal à 18, alors les deux symboles esperluette pour vérifier également la deuxième condition. Ensuite, YourAge est inférieur ou égal à 25. Nous voulons que ce soit un symbole plus grand que. Donc, si vous avez plus de 18 ans, mais moins de 25 ans, nous allons créer un nouveau message pour fournir une identification. Cette fois, le message est « Veuillez fournir une identification ». Nous avons toutes les conditions importantes, utilisation [inaudible] est égale à 25. L' instruction else à la fin fournit le secours si l'utilisateur a plus de 25 ans. Dans ce cas, nous allons simplement créer un document.write juste permettant à l'utilisateur d'entrer. S' il vous plaît entrer, puis enregistrez cela. Testons cela dans le navigateur et voyons tout cela fonctionne. Actuellement, l'utilisateur est mineur. Nous devrions recevoir le message désolé de la déclaration If, ce que nous faisons, « Désolé, s'il vous plaît revenir quand vous avez 18 ans. » Si l'utilisateur est maintenant entre 18 et 25 ans, nous devrions recevoir le message d'identification s'il vous plaît répondre. Enfin, si l'utilisateur a plus de 25 ans, il devrait être autorisé à entrer sur le site. Alors rafraîchissez-vous, et on y va. Nous obtenons le message final de s'il vous plaît entrer. Donc bien fait si vous parvenez à faire cela sur votre propre, si c'était quelque chose avec lequel vous avez lutté, ne vous inquiétez pas.Maintenant, vous avez suivi avec moi, peut être faire un saut par jour ou deux et essayer à nouveau vous-même et voir si vous pouvez travailler la prochaine fois. Les deux maintenant, merci. Je te vois dans la prochaine vidéo. 23. Opérateurs logiques: Nous avons donc examiné l'utilisation d'instructions if else. Nous avons des opérateurs de comparaison tels que supérieur, inférieur ou égal à. Dans cette vidéo, nous allons jeter un oeil aux opérateurs logiques. Les opérateurs logiques sont également souvent utilisés avec les instructions if else. Jetons un coup d'oeil à la façon dont nous pouvons les utiliser. Commençons avec un dossier. C'est le numéro 4. C' est ce qu'on appelle les opérateurs logiques. Ouvrez ensuite ce dossier entre parenthèses. Laisse tomber ça là-dedans. Encore une fois, commencez de la même manière que d'habitude avec un nouveau titre d'opérateurs logiques, puis supprimez tout entre les balises de script dont nous n'avons pas besoin. Donc, pour commencer, je vais créer quelques variables avec lesquelles nous pouvons travailler. Donc juste nous allons simplement appeler ce numéro 1 et définir cela sur 10, puis une deuxième variable, le numéro 2. Je vais fixer celui-là à 20. Donc, ce que nous allons regarder dans cette vidéo est utiliser le et qui est les deux esperluettes. Nous allons regarder dans le tout, qui sont les deux barres verticales ou les tuyaux, et regarder le point d'exclamation, ce qui signifie pas. Donc nous allons commencer avec et. Je vais combiner cela avec une déclaration if. Donc, créons une instruction if simple. Permet de créer document.write juste en disant que la condition est vraie, et en fait, nous allons mettre quelques balises h2 autour de ceux-ci, donc juste un peu plus grand. Commençons donc avec une condition qui est vraie. Donc, si le nombre 1 est égal à 10, alors c'est la bonne condition est vraie pour le navigateur. On y va. C'est donc vrai. Si nous voulions vérifier si plus d'une condition était vraie, nous pouvons utiliser l'opérateur logique et. Donc on peut tester une seconde condition. Donc, c'est si le nombre 1 est égal à 10, et aussi si le nombre 1 est inférieur à 20, et les deux conditions sont vraies. Donc, si nous frappons rafraîchir, nous regardons la condition est vraie déclaration. C' est donc un bon moyen de vérifier si plus d'une valeur doit être vraie pour déclencher une action. Aussi bien que et, si nous voulions juste vérifier si l'une de ces déclarations était vraie, nous pouvons utiliser les deux barres verticales ou les deux tuyaux. Maintenant, un seul de ces côtés doit être vrai pour qu'il déclenche ce document correctement. Si le nombre 1 est égal à 10, ou le nombre 2 est égal à 10. Donc maintenant juste le numéro 1 est vrai et le numéro 2 est faux. Alors rafraîchissez-vous, et on y va. Donc obtenir la condition est vraie. Mais si on changeait ça pour être deux fausses conditions, ce texte disparaît maintenant. La prochaine que nous allons regarder non. Si vous vous souvenez d'un peu plus tôt sur le parcours, nous avons examiné certains des opérateurs que vous pourriez utiliser, tels que inférieurs et supérieurs à. Ceux-ci peuvent être combinés avec le point d'exclamation, ce qui fait exactement le contraire. Donc, plutôt que le symbole inférieur, cela signifierait simplement pas moins que. Alors testons ceci dans notre déclaration if et jetons un coup d'oeil. Donc, supprimons juste un peu de cela. Donc, nous allons commencer par une vraie déclaration. Donc si le numéro 1 est inférieur au numéro 2, ce qui est, nous devrions obtenir le texte là-bas, mais si nous voulions faire exactement le contraire, je rendrais cette condition fausse. Nous allons simplement combiner cela avec le symbole non. Donc, si le numéro 1 n'est pas inférieur à 2. Donc maintenant, si nous actualisons, nous devrions voir que le texte disparaît, et il ne doit pas être le symbole inférieur ou supérieur à. Nous pouvons également utiliser le symbole égal. Donc, si le nombre 1 n'est pas égal à 20, imprimez cette déclaration. On y va. Donc, cela voulait juste deux opérateurs de plus à rechercher, ce que vous pourriez trouver utile, et je vous verrai dans la prochaine vidéo où nous allons jeter un oeil à l'utilisation des instructions switch, et nous allons jeter un oeil à la façon dont nous pouvons les utiliser en JavaScript pour gérer des résultats multiples ou des cas multiples. Alors merci et je te verrai là-bas. 24. Déclarations de commutation: Dans cette vidéo, nous allons jeter un oeil aux instructions de commutation. Les instructions de commutation fonctionnent de la même manière que les instructions if else, que nous avons examinées plus haut dans la section. Dans l'énoncé commuté, nous fournissons plusieurs résultats ou cas. Ensuite, lorsqu'une expression correspond à l'un de ces cas, une action est effectuée. Jetons un coup d'oeil à la façon dont les instructions de commutation fonctionnent en JavaScript. Créons un nouveau dossier, et c'est le numéro 5, et ça s'appelle switch-statements. Ensuite, il s'est ouvert dans notre éditeur de texte, puis faites glisser dans le dossier switch-statement, puis ouvrez la page d'index. Je vais le rendre un peu plus grand pour que vous puissiez le voir. Ensuite, nous allons changer à nouveau le titre pour changer les instructions. Ensuite, supprimez tout cela entre les balises de script. Avec l'instruction switch lorsque nous comparons une instruction, ou dans notre cas, nous allons créer une variable. Je vais appeler cette variable le mois, puis quand je mets cela sur Janvier, puis pour créer une instruction switch, nous utilisons le mot-clé switch, puis ouvrons quelques crochets, puis les accolades. Fondamentalement, il ressemble un peu à un if déclarations sur la scène. Comme les déclarations if, nous passons à l'intérieur des parenthèses, la condition que nous voulons vérifier. Dans notre cas, nous voulons vérifier la variable du mois. Ensuite, nous allons fournir plusieurs cas contre lesquels nous voulons vérifier, et nous utilisons le mot clé de cas. Ensuite, nous commençons à lui donner quelques résultats que nous voulons vérifier. Si nous vérifions si la valeur a Janvier, puis utiliser un deux-points, et si elle est Janvier, nous pouvons fournir un résultat. Je vais autour d'un code. Je vais juste faire un document. écrire, et maintenant il passe un message là-dedans, comme la nouvelle année heureuse. Ensuite, vous voulez utiliser le mot-clé break, et quand une expression est appariée au cas particulier, dans cet exemple, Janvier correspond à la casse, car cela est apparié, nous utilisons ensuite le mot-clé break, et nous allons mettre ceci après chaque cas, et dès que la condition est remplie, il casse ensuite les instructions switch. Mais nous avons dit plus tôt que les instructions de commutation sont utiles pour vérifier de nombreux résultats différents. Nous le faisons simplement avec plus de cas. Mettons quelques mois de plus qu'on y ajoute. Mettons en juillet là, puis un document.write. Cette fois, je devrais mettre un peu à la moitié de l'année. Ensuite, le mot-clé break à nouveau, juste après le document.write, juste au cas où cette condition est appariée, assurez-vous que tous les cas entre les deux accolades expliquent pourquoi commencer à rencontrer des problèmes. Nous pouvons continuer avec autant de personnes que vous le souhaitez. Je vais en créer un pour décembre, puis un deux-points, en fait, nous allons juste copier ce document.write, puis le coller dans. Cette fois pour décembre, nous allons mettre en place, presque la nouvelle année, puis la pause, juste après. C' est essentiellement ainsi qu'une instruction switch fonctionne. Il passera par les cas individuels jusqu'à ce que l'instruction soit appariée, puis il sortira de l'instruction switch. Mais, si un résultat ne peut être trouvé, nous devons fournir un cas par défaut. Il s'agit d'un code par défaut à exécuter, il est connu que les cas sont appariés. Par défaut et un deux-points, puis il met le code par défaut là-dedans. Je vais juste mettre dans le mois est, et puis je vais juste mettre la variable de mois là-dedans. Si nous comptons beaucoup une des déclarations vers le haut, et si ne peut pas imprimer le message, va juste obtenir la valeur par défaut, le mois est, et puis dans notre cas en Janvier. Alors enregistrez cela, puis il est ouvert dans le navigateur. Parce que nous avons eu le mois de janvier, nous avons mis le cas pour être heureux nouvel an, ce qui est juste le premier là-bas. Si nous changeons le mois de juillet, nous devrions passer à la moitié du message aérien. Actualisez cela, et la moitié de l'année apparaît. Essayons de décembre. Combien obtenir le troisième cas de presque la nouvelle année et rafraîchir. Ils ont fière allure, et si nous mettons dans un mois, ce qui n'est pas l'un de ces cas, alors nous allons essayer Mars. Espérons que nous devrions obtenir le cas par défaut, qui est le mois est, puis Mars. On y va. Nous pouvons également mettre dans autant de cas que vous le souhaitez, et vous pouvez même fournir plus d'un cas avec le même morceau de code à exécuter. Par exemple, si vous le voulez, un autre cas là-dessus, et nous voulons qu'il indique presque la nouvelle année pour novembre et décembre, ce n'est pas un problème. Nous pouvons simplement faire nos cas comme ça, et puis ce document.write, sera exécuté si l'affaire est en novembre ou en décembre. Essayons juste ça. Changez donc la variable à Novembre. Presque la nouvelle année, et cela devrait fonctionner de la même façon pour décembre aussi. Encore presque la nouvelle année, on en essaiera une de plus. Donc Octobre, nous n'avons pas de cas pour Octobre, donc nous devrions obtenir la valeur par défaut, qui est en bas, rafraîchir, et nous y allons. Donc, le mois est octobre. J' espère que cela a du sens et j'espère que vous comprenez que les instructions de commutation sont vraiment utiles lorsque nous voulons vérifier une condition par rapport à de nombreux résultats possibles différents. Dans la prochaine vidéo, nous allons nous éloigner de la théorie. Je vais passer à un mini défi où vous pouvez commencer par vos compétences que vous avez apprises, dans la section en pratique. 25. Mini défi : jeu supérieur ou inférieur: Bienvenue de retour. Dans cette vidéo, nous allons faire une pause de la théorie et créer un mini challenge, qui va être un jeu simple, supérieur ou inférieur, et il va essentiellement consister en un nombre aléatoire généré par ordinateur entre un et 10. Ensuite, nous devons deviner si le nombre que l'ordinateur va générer est supérieur ou inférieur à cinq. Nous allons créer une page Web simple avec quelques boutons sur lesquels est plus haut ou plus bas et ensuite nous devons créer un affichage qui montre si la supposition est correcte ou non. La plupart des éléments dont vous avez besoin pour relever ce défi ont déjà été abordés dans cette section. La seule chose que nous n'avons pas encore regardé est les événements onclick et c'est essentiellement quand un utilisateur clique sur le bouton sur la page Web et qui déclenche une fonction ou un événement. Cette fonction contiendra le code qui compare notre estimation avec le numéro généré par l'ordinateur. Donc, si vous voulez donner l'a vous-même, hésitez pas à le faire. Ou je vais commencer et commencer avec le HTML et vous montrer les événements onclick. Donc, si vous préférez, vous pouvez suivre avec moi, ouvrir SoloLearn, puis donner le JavaScript pour aller à la fin ou suivre avec moi jusqu'à la fin si vous préférez. Commençons donc avec son propre dossier. Dans la section flux de contrôle et boucle, nous pouvons dupliquer la dernière vidéo et c'est le numéro 6. Plus haut, plus bas jeu. Ouvrez ensuite votre éditeur de texte, puis changez son titre, partie supérieure ou inférieure. Nous n'avons pas besoin de l'instruction switch de la dernière vidéo. Il suffit donc de supprimer cela et de revenir à une page d'index HTML de base. Je vais commencer par créer la page Web de l'interface utilisateur. Je vais commencer par un div. Je vais avoir cette classe, eh bien, c'est une classe Bootstrap qui contiendra tous les divs sur lesquels nous travaillons. Il le fera se démarquer avec une couleur de fond. En outre, je veux utiliser la classe du centre de texte, et cela tirera tout le texte au milieu de la page. Je vais juste mettre quelques instructions sur la page avec laquelle vous commencez. C' est donc le titre d'abord, supérieur ou inférieur, puis un titre de niveau 2, qui est les instructions sur la façon de jouer. Tout comme mon numéro 5 ou moins ou plus haut que cinq. Ensuite, quelques balises p ci-dessous. Cela va juste montrer la gamme. La plage pour le nombre aléatoire est de 1 à 10. Ensuite, en dessous de cela, nous avons besoin d'un div vide. Donc je vais juste mettre un cap de niveau 3 là-dedans. Initialement, il n'y aura pas de contenu entre ces balises car nous allons le mettre en utilisant le JavaScript. Ce serait là où le texte est affiché pour dire si vous avez gagné ou perdu. Donnons-lui un ID afin que nous puissions marquer cela avec le JavaScript plus tard. Donc je vais appeler mon TextField. Jetons un coup d'oeil à ça et voyons à quoi ça ressemble. On a le nom sur les instructions. Maintenant, nous devons créer quelques boutons ci-dessous. Un avec plus haut, et un avec plus bas. Mettons ça dans une entrée. Donc, le type d'entrée est bouton. Ajoutons quelques classes Bootstrap à cela juste pour le rendre un peu plus agréable. Donc btn et btn-info, et ça va créer un joli bouton bleu pour nous. La valeur dont nous avons besoin, ce sera le texte qui apparaît à l'intérieur d'un. Mettons celui-ci comme plus haut. Ensuite, nous avons mentionné au début de cette vidéo que nous allons jeter un oeil aux événements onclick. Nous les examinerons un peu plus en détail plus tard dans ce cours. Mais pour l'instant, nous avons juste besoin de savoir si nous ajoutons les attributs ou onclick. Ensuite, nous pouvons passer le nom d'une fonction. Lorsque ce bouton est enfoncé, il déclenche alors la fonction. Mettons le nom de la fonction. Bien que nous n'ayons pas encore créé la fonction, nous pouvons toujours la mettre dans. Ensuite, parce que c'est une fonction, mettez les crochets bouclés après, juste de la même manière que nous appelons ou invoquons normalement une fonction. Nous allons bientôt créer notre fonction. C' est le bouton supérieur. Copiez et collez ou dupliquez nos entrées et cela fera le bouton inférieur et changera la fonction cette fois pour baisser. Alors jetons un coup d'oeil. Super. Il y a nos boutons haut et bas. Juste la dernière chose que je veux mettre pour l'interface utilisateur est un troisième bouton, qui est juste un bouton Play Again. Après chaque cas, nous pouvons appuyer sur « Play Again » et la page sera rechargée. Je vais mettre ceci dans son propre div, donc apparaît ci-dessous. Le div, nous allons également donner à cela la classe de bien text-center, tout comme cette div ci-dessus et puis une entrée avec un type de bouton et puis quelques classes Bootstrap de btn btn-info. La valeur est Lire à nouveau. Ensuite, les événements onclick et ensuite nous appellerons celui-ci reset avec les crochets après. Rafraîchissons le navigateur et jetons un coup d'oeil. Ça a l'air mieux maintenant. Maintenant, nous avons à l'étape où le HTML ou l'interface utilisateur est terminée. Si vous aimez faire ça et finir vous-même, hésitez pas à le faire. Tout ce que vous devez faire est de créer un nombre aléatoire, puis de créer des fonctions qui sont déclenchées chaque fois que ces boutons sont pressés , puis de vérifier par rapport au nombre généré aléatoirement. Alors donne-le un coup, sinon, suivez-moi avec moi. Retournons à l'éditeur de texte. Je vais commencer à travailler entre les balises de script parce que nous avons juste besoin de faire le JavaScript maintenant. Pour commencer, nous obtiendrons le numéro généré au hasard. Donc, nous allons mettre cela dans une variable appelée ComputerGuess et ce sera un math.random. Si vous vous souvenez d'il y a quelques vidéos, math.random génère un nombre aléatoire entre zéro et un. Parce que nous voulons 10, multiplions cette valeur par 10. Ensuite, nous devons arrondir ce chiffre. Alors changeons l'ordinateur Guess maintenant pour être égal à math.ceil. Cela va arrondir puis passer à l'intérieur des parenthèses, la variable que nous voulons arrondir, qui est ComputerGuess. Maintenant, nous allons juste imprimer ceci sur la console et vérifier que tout fonctionne correctement avec un journal de console, et je vais mettre à l'intérieur de l'ordinateur Guess, et j'espère que nous devrions obtenir un nombre aléatoire entre un et 10. Alors allez dans les outils de développement et voilà. Nous avons la valeur de sept à l'intérieur de la console, puis actualiser et comme un 4, 9, 9, 9 à nouveau et un 1, un 2. Ça semble fonctionner bien. Débarrassez-vous des outils de développement et nous pouvons passer à autre chose. Nous pouvons supprimer le journal de la console maintenant nous n'en avons pas besoin. A l'intérieur du HTML, nous avons créé les événements onclick. Je vais commencer par la fonction supérieure parce que nous avons appelé la fonction, mais nous ne l'avons pas encore déclarée. Retour entre les balises de script. Espérons que vous pouvez vous rappeler comment créer une fonction en utilisant le mot-clé function, puis le nom de la fonction avec les crochets. Que voulons-nous que cette fonction fasse ? On veut qu'il vérifie si la supposition de l'ordinateur est supérieure à cinq. Créons une instruction if là-dedans, si la supposition de l'ordinateur est supérieure à cinq. Maintenant, nous voulons afficher un message. Si vous vous en souvenez, nous avons créé une balise h3 vide avec un ID de TextField. Donc, nous pouvons utiliser JavaScript pour saisir cette div vide ou en-tête vide, puis insérer du texte dedans. Donc document.getElementById, et l'ID que nous voulons est TextField et ensuite nous voulons utiliser le innerHTML. Donc, sélectionnez InnerHTML, je vais définir cela pour être égal à You Win. Si l'utilisateur clique plus haut et que la supposition est supérieure à cinq, l'utilisateur gagne. Donc, sinon, copions ce document.GetElementById, sinon et puis les accolades bouclés. Donc, si la supposition est inférieure à cinq ou cinq lui-même, nous pouvons alors saisir l'en-tête TextField et cette fois imprimer un texte, You Lose. Cela va également créer la fonction supérieure et maintenant nous devons créer la fonction si le bouton inférieur est appuyé. Parce que cela va être assez similaire, nous pouvons copier la fonction que nous venons de créer et ensuite nous allons changer cela à plus bas. Cette fois, si la supposition de l'ordinateur est inférieure ou égale à cinq, alors l'utilisateur gagne. Si ce n'est pas le cas, l'utilisateur perd et le message s'affichera. Maintenant, nous avons la fonctionnalité si la supposition est supérieure ou inférieure. Maintenant, nous avons juste besoin de travailler avec le bouton de réinitialisation juste pour effacer l'écran ou pour rafraîchir l'écran chaque fois que l'utilisateur veut jouer à nouveau. Cela va être une fonction simple, mais c'est quelque chose que nous n'avons pas encore examiné dans ce cours. Donc réinitialiser la fonction, puis pour recharger la page Web, nous recadrons le window.location.reload, puis les crochets après. Chaque fois que ce bouton de réinitialisation est enfoncé, la page Web sera actualisée avec cette ligne de code. Sauvegardons cela et jetons un coup d'oeil et actualisons le navigateur. Commençons par plus haut, sorte que vous gagnez, jouez à nouveau, plus bas, vous perdez. Essayons encore quelques fois pour que tu perdes. Vous gagnez, vous gagnez, vous perdez. Ça semble fonctionner bien. C' est la fonctionnalité de base ou de travailler pour le jeu. Si vous voulez aller un peu plus loin, lorsque la supposition de l'utilisateur est incorrecte et que vous perdez, vous pouvez alors mettre du texte là, qui affiche le nombre aléatoire généré par l'ordinateur, juste pour que vous puissiez vérifier ce que c'était. Mais pour l'instant, j'essaie de laisser ce jeu là, et merci. J' espère que vous avez réussi à en faire au moins un peu plus vous-même et rejoignez-moi dans la prochaine vidéo où nous allons jeter un oeil aux boucles et comment elles sont utilisées en JavaScript. 26. Loop While: Les boucles sont vraiment populaires dans beaucoup de langages de programmeur, et JavaScript ne fait pas exception. Dans ces prochaines vidéos, nous allons regarder For loops, While loops et Do While loops. Ne vous inquiétez pas si ce n'est pas familier. Nous allons jeter un oeil à la façon dont chacun fonctionne, en commençant par la boucle While dans cette vidéo. Les boucles peuvent être vraiment utiles et cela peut nous sauver beaucoup de typage répétitif. Commençons avec son propre dossier, et c'est le numéro 7. Je vais appeler celui-ci, tandis que les boucles. Ouvrez-le entre parenthèses et faites-le glisser et renommez ces boucles While. Permettez-moi de me débarrasser de tous ces de la dernière vidéo, et aussi de tout le HTML ci-dessous. Commençons par une boucle While de base. Nous utilisons le mot-clé while, puis les crochets, puis les accolades. Cela pourrait commencer à vous sembler un peu familier. C' est essentiellement la même mise en page que les instructions switch et les instructions if/else que nous avons examinées précédemment. Espérons que ça ne devrait pas être trop peu familier. Les crochets fonctionnent ensuite aussi de la même manière que instructions if-comme dans nous passons une condition entre crochets, et alors que cette condition est vraie, puis nous exécutons du code entre les deux, et ce code continue de boucler ou jusqu'à ce que cette condition ne soit plus remplie. Bien que cela soit vrai, nous devons le faire ou tout ce qui se trouve entre les accolades. Mettons un exemple de base à l'intérieur de cette boucle While et commençons. Nous allons avoir besoin de créer une variable. Cette variable, je vais appeler i, qui est un nom de variable assez commun à utiliser avec la boucle. Mais tu peux l'appeler tout ce que tu veux. Je vais définir la valeur initiale de i pour être égale à un. Alors que j'ai moins de 10 ans, nous voulons faire quelque chose à l'intérieur des accolades. Soyons simples avec l'écriture d'un document. Nous voulons écrire dans le navigateur la valeur de i chaque fois que nous faisons une boucle, et puis juste pour que la valeur de i apparaisse sur sa propre ligne, je vais mettre une balise de pause à l'intérieur, puis i++. Ça peut sembler un peu étrange, mais qu'est-ce que tu faisais ? Est-ce que nous définissons la valeur de i pour être un, et alors que je est inférieur à la valeur de 10, ce qu'il est actuellement, nous allons ensuite imprimer à l'écran la valeur de i. Pour commencer, le numéro 1 sera imprimé, puis fois que nous ferons une boucle à travers ce code, ce sera i++. La prochaine fois que la boucle tournera, parce que nous faisons un i++, je serai alors mis à deux et ensuite nous allons tourner à nouveau et imprimer deux. Ensuite, cela sera incrémenté à nouveau à trois et cela continuera à se produire jusqu'à ce que j'aie moins de 10, ou dans notre cas, nous aurons le numéro 9. Donc, nous devrions voir sur l'écran imprimé numéro 1 à numéro 9. Jetons un coup d'oeil dans le navigateur. Ok, on y va. Nous avons obtenu la valeur de 1-9, et comme il va briser la ligne cible aussi, chacune de ces valeurs est sur leur propre ligne. Mais juste un petit mot d'avertissement lors de l'utilisation des boucles While, est-ce qu'il peut être assez facile de planter le navigateur si nous ne les faisons pas correctement. Si nous prenons le i++ hors de là, donc chaque fois que cette boucle While s'exécute, la valeur de i sera toujours un. Donc, alors nous allons créer une boucle infinie qui ne se terminera jamais parce que je serai toujours moins de 10 et cela provoquera le plantage du navigateur ou de votre programme. Soyez vraiment prudent que nous incrémentons sur chaque boucle. Une autre façon populaire d'utiliser des boucles est de faire une boucle à travers un tableau, puis d'imprimer toutes les valeurs du tableau. Montrons un exemple de cela maintenant. Créez un tableau appelé aliments et nous allons définir cela de la manière littérale. Il suffit d'ajouter quelques aliments à l'intérieur du tableau, séparés par des virgules, donc des pâtes, des pizzas et du poisson. Parce que l'index des tableaux commence à la position zéro, je vais juste changer la variable de i pour être zéro. Si vous vous souvenez de la section du tableau, nous pouvons imprimer la valeur du tableau. Faisons une écriture rapide de document, puis nous passons le nom du tableau. Si nous voulions imprimer un élément individuel à l'intérieur du tableau, nous pourrions sélectionner l'index de nombre d'octets. Si nous voulions imprimer des pâtes, c'est l'indice zéro. Je vais juste commenter cela, puis imprimer. C' est ainsi que nous obtenons la valeur d'un tableau. Mais si nous voulions imprimer toutes les valeurs du tableau sur l'écran, décommentons simplement cela pour l'instant. Parce que nous utilisons une boucle, nous voulons passer dans la boucle le numéro d'index, donc sortons juste ça de là. Collez cela entre parenthèses. Nous ne voulons pas seulement sélectionner la position zéro, nous voulons définir cela pour être i, parce que nous voulons parcourir et augmenter ceci d'un à chaque passage de la boucle. Au lieu d'imprimer la valeur de i, nous voulons imprimer le contenu du tableau. Nous voulons imprimer les aliments et le numéro des aliments est la valeur de i. Ce qui va se passer, c'est que la boucle sera exécutée et la boucle commencera par la valeur de zéro, qui est des pâtes. Ensuite, nous allons imprimer à l'écran la valeur des pâtes et puis je serai incrémenté à un, sorte que les changements à un, qui est le deuxième indice, donc c'est la valeur de la pizza. Ensuite, la pizza sera imprimée à l'écran et cela va boucler à nouveau, et je serai incrémenté au numéro 2 qui est le poisson, donc 0, 1, 2 puis le poisson sera imprimé à l'écran. Ensuite, la boucle se terminera car ce sont toutes les valeurs du tableau. Commençons à nouveau avec zéro, enregistrez cela et actualisons le navigateur. Voilà, donc il y a nos valeurs libres du tableau, et c'est ainsi qu'une boucle While fonctionne. Merci de regarder, et nous passons maintenant à la prochaine vidéo. Nous allons jeter un oeil à une légère variante de la boucle While, et ceci est appelé la boucle Do While. 27. Loop Do While: Dans la dernière vidéo, nous avons regardé while boucles. Cette vidéo est tout sur une légère variante de la boucle while, et c'est ce qu'on appelle une boucle do while. Il fonctionne de la même manière, mais avec seulement quelques différences subtiles. Créons un nouveau dossier. Nous dupliquons while boucles. C' est le numéro huit et il s'appelle faire while boucles. Ouvrez ensuite n'importe quel éditeur de texte, puis créez un nouveau titre. Alors faites tout en boucle. Il suffit de laisser ce code pour l'instant, nous pouvons réutiliser certaines de ces parties. Attendu que, la boucle while de la dernière vidéo s'exécutera toujours alors que cette condition est vraie, une boucle do-while s'exécutera toujours au moins une fois premier, puis vérifiera si la condition est vraie avant qu'elle ne continue. Nous avons le mot-clé do, puis à l'intérieur des accolades. Le code à l'intérieur ici est toujours, exécuté une fois au début, avant de vérifier si des conditions sont vraies. Faites avec ce code, puis nous vérifions la condition en utilisant la boucle while. Ensuite, si cette condition est vraie, le code continuera à s'exécuter et s'il est faux, ce code ne sera exécuté qu'une seule fois et il s'arrêtera après cela. Supprimons le code de la dernière vidéo. Nous allons créer un exemple. Nous allons commencer par une variable, donc nous allons utiliser à nouveau le nom de variable i. La variable i est égale à un. Alors faisons un document. N' écrivez pas à l'intérieur, nous allons juste imprimer la valeur de i. Encore une fois les balises de rupture. Ensuite, comme la boucle while, nous allons incrémenter d'un. Ensuite, à l'intérieur de la section while, à l'intérieur des crochets, nous allons mettre la condition. Alors que j'ai moins de 10, nous continuerons à parcourir et à imprimer la valeur de i. Sauvegardons cela. Cette condition est vraie, donc cela continuera à imprimer les valeurs jusqu'à neuf, que vous obtenez sur le côté gauche là-bas. Revenons en arrière, si la condition est réellement supérieure à 10, nous devrions obtenir la valeur de i imprimée, qui est un, mais elle ne retournera pas une seconde valeur parce que la condition est fausse. Maintenant, nous allons simplement en faire imprimer un dans le navigateur, car une boucle do while s'exécute toujours une fois. C'est tout ce qu'il y a. Une boucle do-while est assez simple à comprendre si vous obtenez déjà le concept de boucles while. Merci. Dans la vidéo suivante, nous passerons à un autre type de boucles, qui est la boucle for. Merci et vous y verra. 28. Loop For: Bienvenue les gars. Cette vidéo est tout au sujet de la boucle JavaScript for, et c'est le troisième et dernier type de boucle que nous allons regarder dans cette section. Si vous avez compris comment fonctionne la boucle while et la boucle do while à partir des vidéos précédentes, vous ne devriez pas avoir de problèmes à comprendre comment fonctionne une boucle for. Commençons par son propre dossier dans la section Contrôle Flow, et c'est la vidéo numéro 9 : pour les boucles, puis ouvrons dans les crochets, puis changez le titre en boucles For et nous pouvons laisser cette boucle pour une référence. Pour les boucles sont utiles quand nous savons combien de fois nous voulons répéter cette boucle. Alors qu'une boucle while, s' exécutera jusqu'à ce qu'une condition n'est plus vraie. Dans une boucle for, nous devons dire combien de fois cela va fonctionner. Nous allons commencer une boucle for avec le mot-clé for, puis look initial assez familier du reste des vidéos. Nous utilisons les supports, puis un ensemble d'accolades. Dans une boucle while ou une boucle do while, nous définissons la variable et ceci est défini en dehors de la boucle. Lors de l'utilisation d'une boucle for, nous devons mettre trois valeurs différentes entre les parenthèses. Le premier est la valeur initiale de la variable. Je veux utiliser, je une fois de plus et les trois valeurs doivent être séparées par un point-virgule. La deuxième valeur est une condition que nous voulons tester. À titre d'exemple, nous voulons exécuter la boucle alors que j'ai moins de 10, puis un point-virgule, et tout comme les boucles précédentes, nous pouvons utiliser à peu près ce qu'il y a ici, nous pouvons utiliser des égaux ou n'importe lequel des opérateurs. La troisième valeur va être notre incrémentateur. Encore une fois, je vais utiliser i plus pour incrémenter la valeur d'un dans chaque boucle. Nous pouvons également utiliser le même document écrit de la dernière vidéo. Alors mettez-le à l'intérieur des bracelets bouclés. Nous pouvons simplement supprimer cela pour l'instant. C' est à quoi ressemble une boucle for. Nous définissons initialement la valeur à un et la boucle continuera à fonctionner alors que la valeur de i est inférieure à 10 et avec chaque boucle possible, i est incrémenté d'un. Donc, nous devrions obtenir les valeurs d'un droit à neuf imprimées lorsque nous ouvrons cela dans le navigateur. On y va. Nous avons un à neuf, tels fonctionnent correctement. Donc, tout comme while boucles, nous pouvons également utiliser une boucle for pour faire une boucle à travers les valeurs d'un tableau. Jetons un coup d'oeil à la façon dont nous pouvons le faire dans une boucle for. Utilisons notre exemple alimentaire que nous avons regardé cela dans la boucle while. Encore une fois, je vais mettre des pâtes, pizzas, puis du poisson, puis créer la boucle for comme nous l'avons utilisé ci-dessus. Déclarez la valeur de i initialement, donc i est mis à zéro car l'index de zéro est la première valeur d'un tableau. Donc, une fois que cela commence à zéro, puis le nombre de fois que nous voulons parcourir est égal au nombre de valeurs à l'intérieur du tableau. Donc, alors que je suis moins que foods.length, et vous pouvez vous demander pourquoi nous utilisons moins que plutôt qu'égale à la longueur du tableau, eh bien cela simplement parce que la propriété length commence à un plutôt que zéro, donc c'est pourquoi nous devons le faire, puis un point-virgule et la troisième valeur est notre incrémenter, donc je plus et puis définissons l' écriture de document et ensuite nous voulons imprimer la valeur du tableau foods, puis à l'intérieur des crochets un passage dans i. Initialement, je suis mis à zéro, ce qui est la valeur des pâtes, puis nous allons passer et je serai incrémenté et ensuite la valeur d'un, qui est la pizza, puis la troisième et dernière boucle, je serai fixé à deux, qui est la troisième valeur du poisson. Exécutons ça maintenant avec la balise break, donc ils sont tous sur des lignes séparées. Casser la balise là, puis rafraîchissons cela dans le navigateur, et il y a nos trois valeurs de pâtes, de pizza et de poisson. Voilà, tu y vas. C'est ainsi qu'une boucle for fonctionne en JavaScript. Dans la prochaine vidéo, nous allons jeter un coup d'œil à l'utilisation de ces derniers dans un mini défi. 29. Mini défi : carnet de téléphone: Bienvenue de retour. Dans cette vidéo, nous allons jeter un oeil à un mini challenge, qui va mettre en pratique les boucles for que nous avons utilisées dans la vidéo précédente. Sur ce mini défi va être sur la création d'un annuaire téléphonique simple. L' annuaire téléphonique va imprimer les valeurs de tous les noms de vos amis dans un tableau. Ça va les trier par ordre alphabétique. Encore une fois, j'aimerais que vous puissiez l'essayer vous-même et voir jusqu'où vous allez avant de suivre avec moi. Essaie juste de faire fonctionner ça si possible sans mon aide. Mais ne vous inquiétez pas si c'est quelque chose avec lequel vous vous battez. Vous pouvez suivre avec moi à la fin, et je vais vous montrer une façon de le faire. Créons le dossier pour ce projet. C' est le numéro 10. Je veux appeler ça le défi de l'annuaire téléphonique. Ensuite, ouvrez ceci entre parenthèses. Ensuite, définissez le titre, défi de l'annuaire téléphonique et commencez avec une balise de script vide. Dans ce défi, je vais commencer à créer un tableau. Le tableau va contenir les valeurs de vos amis. Parce que nous voulons utiliser JavaScript pour les trier dans l'ordre alphabétique. Lorsque vous placez les valeurs à l'intérieur du tableau, essayez de ne pas les mettre dans l'ordre alphabétique. Parce que nous voulons JavaScript pour le faire suit. Commencez par un tableau. Je vais commencer par Chris, je vais juste mettre les valeurs d'autant de gens à l'intérieur que vous voulez. Je vais commencer par cinq valeurs. Juste pour nous faire commencer avec. Juste comme ça. Ensuite, je vais utiliser une boucle for, que nous avons regardé dans la dernière vidéo pour parcourir toutes les valeurs, puis les imprimer à l'écran. Commençons par la boucle for, puis imprimez simplement les valeurs du tableau dans le navigateur. Je vais d'abord être mis à zéro, ce qui est la première valeur du tableau. Ensuite, nous voulons que la boucle continue. Alors que je suis inférieur aux noms array.length. Ensuite, à chaque passage de la boucle, nous voulons incrémenter I d'un. Donnons ça un coup de pouce et voyons si ça marche. Faisons un document écrire dans le navigateur. Jetons un coup d'oeil aux noms, et ensuite je vais voir ce qu'on a maintenant. On est là, Chris, Paul, Mike, Andrew et Dave. Il y a toutes les cinq valeurs de notre tableau, ce qui est très bien, mais il n'a pas l'air très bon et nous voulons également trier ces valeurs pour être dans l'ordre alphabétique. Commençons par les trier par ordre alphabétique. Nous avons actuellement tous nos noms stockés dans la variable de noms. Nous devons les définir par ordre alphabétique. On le fait avec des noms. Ensuite, nous utilisons la méthode de tri. Il va maintenant utiliser un ordre alphabétique quand on se rafraîchit, on y va. Ça marche bien. On a Andrew, Chris, Dave, Mike et Paul. Tout est par ordre alphabétique. Juste pour donner un peu de style à ce projet, je vais ajouter quelques balises pré. Je vais les ajouter juste avant et puis aussi je veux ajouter un juste après. N' oubliez pas les symboles plus entre les deux, nous allons définir la barre oblique avant. Voyons à quoi ça ressemble maintenant. C' est maintenant un peu plus lisible. Nous avons tous nos noms imprimés dans ordre alphabétique et avec un peu d'arrière-plan pour chaque valeur. Si tu as été si loin, bien joué. Je veux juste ajouter une chose de plus juste pour finir ça. Je veux juste ajouter un numéro à côté du nom de chaque personne. 1, 2, 3, 4, 5, donc on sait combien de noms on a dans l'annuaire. Juste après la balise pré, nous pouvons obtenir ce nombre avec la valeur de i, car il va être incrémenté avec chaque boucle. Puis aussi un deux-points juste pour séparer le nom avec le nombre. Rafraîchir. Maintenant, nous avons 0, 1, 2, 3, 4. Juste parce que la première valeur est zéro, je vais ajouter i plus 1, donc il commence à un plutôt que zéro et rafraîchir. C' est mieux maintenant. Nous commençons par la valeur d'un, puis nous pouvons voir combien de noms différents nous avons dans notre tableau, ou notre annuaire téléphonique. J' espère que vous avez réussi à le faire, ou au moins donner un coup de pouce et voir jusqu'où vous êtes arrivé et c'est la fin du mini-défi et la fin de la section. Je vous verrai dans la section suivante, qui s'appelle JavaScript et le DOM. 30. Quel est le DOM: Bienvenue et bienvenue dans cette nouvelle section appelée JavaScript et le DOM. Dans cette vidéo, nous allons prendre un bref aperçu de ce qu'est exactement le DOM. Le DOM est abrégé pour le modèle d'objet de document et je suis juste sur la page Wikipédia pour le modèle d'objet de document, et vous pouvez trouver de petites informations juste là. Il commence par dire que le DOM est une convention interplateforme et indépendante du langage pour représenter et interagir avec des objets dans des documents HTML, XHTML et XML. Vous vous demandez peut-être exactement ce que cela signifie. Pour simplifier les choses, toutes les sections ou éléments, ou tous les nœuds de chaque document ou page Web, sont organisés dans une structure arborescente. Si nous allons à la section W3Schools sur le DOM, vous pouvez probablement avoir une meilleure idée de ce qui se passe exactement. Nous pouvons voir un diagramme visuel de tous les objets DOM HTML. Ceci est notre page Web de base, qui commence par les documents en haut. Nous avons déjà utilisé ce cours lorsque nous avons sélectionné des éléments par ID. Nous avons commencé avec document, puis obtenir élément par ID. Nous avons un document en haut de l' arborescence, puis tous les différents éléments de la page Web, une branche vers le bas du document. Nous avons la section head et ensuite nous avons la section body, qui sont les deux principaux éléments à l'intérieur de l'élément racine HTML, et cela devrait tous sembler assez familier à partir de la page Web HTML. Dans la section tête, on a un titre. Dans la section du corps, nous avons les attributs, les éléments, tels que les en-têtes, les ancres, puis tout le texte contenu dans ceux-ci. Vous vous demandez peut-être ce que cela a pour traiter avec JavaScript. Eh bien, fondamentalement, JavaScript peut rendre les pages Web dynamiques car JavaScript peut contrôler ou manipuler tous les éléments dans l'arborescence DOM. Nous pouvons saisir n'importe lequel de ces éléments et nous pouvons le remplacer, nous pouvons le manipuler, nous pouvons ajouter à, nous pouvons ajouter certains attributs ou éléments, nous pouvons changer les styles CSS ou même supprimer l'un de ces éléments. Dans les prochaines vidéos, nous examinerons plus en détail comment nous pouvons accéder à ces éléments et comment nous pouvons les manipuler. Mais avant de le faire, je voulais juste vous donner un bref aperçu de la façon dont nous pouvons le faire et pourquoi le DOM est important pour JavaScript. Mais pour l'instant, la principale chose à comprendre est comment un document HTML est disposé et aussi comprendre que JavaScript peut accéder ou manipuler tous les éléments dans l'arbre DOM. Nous allons maintenant passer à la vidéo suivante et nous allons jeter un oeil sur la façon dont nous pouvons accéder à tous les éléments de cet arbre DOM. 31. Accéder à des éléments: Maintenant, nous savons que JavaScript peut interagir avec DOM. Dans cette vidéo, je vais vous montrer quelques méthodes de sélection d'éléments sur une page Web. Commençons avec un nouveau dossier pour la nouvelle section, puis appelons cette section le DOM. Nous devons obtenir un dossier de l'une des vidéos précédentes. Juste le modèle de démarrage. Copiez l'un de ceux-ci et collez-les dans. C' est le numéro 1, et c'est ce qu'on appelle l'accès aux éléments. Ouvrez-le ensuite dans votre éditeur de texte. Glissez-le comme ça. Nous devons commencer avec un nouveau titre ; accéder aux éléments. Ensuite, nous pouvons supprimer tout le code d'en bas entre les balises de script. Dans les vidéos précédentes, nous avons regardé document.getElementById, puis nous pouvons sélectionner un élément de la page Web. Si nous ajoutons un titre de niveau 1 et insérons un ID, par exemple, du titre. Nous pouvons ensuite saisir ce titre de niveau 1 par son ID de titre, et ensuite nous pouvons faire diverses choses telles que définir le HTML interne pour être égal à tout ce que vous voulez. Donc, définissons ceci pour afficher JavaScript dans les pages Web. Lorsque cela est ouvert dans le navigateur, le titre vide de niveau 1 doit contenir le texte que vous avez placé en bas. Alors ouvrons. On y va, il y a notre cap de niveau 1. Il existe également d'autres méthodes que nous pouvons utiliser pour sélectionner des éléments sur une page Web. La méthode suivante, je veux vous montrer des éléments saisissants sur les pages Web en utilisant le QuerySelector. En plus de sélectionner des éléments par leur ID, nous pouvons également sélectionner des éléments de la même manière que dans le CSS en utilisant le sélecteur CSS. Créons un exemple avec du texte. Donc, nous allons créer trois balises P avec des noms de classe. Celui-ci peut être d'abord, puis le contenu peut être la première ligne, et vous devez copier cela deux fois. Avec la deuxième et la classe de la troisième. Laisse ce troisième vide pour l'instant. Maintenant, nous savons comment accéder à un élément par son ID. Ensuite, je veux passer à l'accès à un élément par son sélecteur CSS. Nous pouvons le faire avec Document.QuerySelector. Jetons un coup d'oeil à ça. Document.QuerySelector. A l'intérieur des parenthèses, nous voulons passer dans le sélecteur CSS. Dans notre cas, nous allons mettre en classe. Alors mettons la classe de deuxième à l'intérieur. Ensuite, nous pouvons apporter quelques changements. Nous allons ajouter style.backgroundColor , puis nous définissons cela pour être égal à toute valeur que nous voulons. Réglons ça pour qu'il soit rouge. Maintenant, la deuxième ligne devrait avoir une couleur de fond de rouge. Sauvons ça. En fait, nous pouvons simplement commenter cette section et ensuite rafraîchir à l'intérieur du navigateur. Maintenant, nous avons sélectionné la deuxième ligne par son ID et remplacé la couleur d'arrière-plan. Si nous devions changer ceci pour être le premier, nous pourrions simplement le changer par son nom de classe et cela sélectionnerait la première ligne. Cela peut être très pratique pour sélectionner des éléments sur une page Web. Ainsi, en plus de sélectionner des éléments par leur nom CSS, nous pouvons également sélectionner des éléments par leur nom de classe. Supprimons simplement cet exemple. Nous pouvons utiliser le texte du paragraphe d'avant. Créons une variable appelée sélecteur. Cela va être défini sur documents.getElementsByClassName. Méfiez-vous que, cela a un S à la fin des éléments où getElementByID n'a pas le S à la fin parce que nous ne sélectionnons qu'un ID particulier. Alors que getElementsByClassName retournera tous les éléments de cette page avec un nom de classe particulier. Ensuite, nous voulons sélectionner le nom de la classe à cibler. Alors ajoutons une classe au titre de niveau 1 de titre , puis nous mettons juste ceci à l'intérieur des parenthèses, puis un point-virgule à la fin. Cela sélectionnerait tous les éléments avec un nom de classe de titre. S' il y en avait plus d'un, nous aurions alors besoin de déclarer quel élément nous voulons cibler par son numéro d'index. Dans notre cas, nous voulons aller un en classe de cap. Donc, ce sera le numéro d'index 0. Si nous avions une deuxième ligne avec la même classe, ce serait le numéro d'index 1. Changeons le HTML interne et définissons cela à un peu de texte. Nom de classe sélectionné. Laissons ça dans le navigateur. On y va. C'est notre titre de niveau 1 avec le nom de classe sélectionné. Un autre que vous pouvez trouver vraiment utile est document.getElementsByTagName. Cela fonctionne d'une manière assez similaire au dernier exemple. Le nom de la balise est soit le H1, soit le P, soit l'un des éléments de la page Web. Il peut même s'agir d'un GIF ou d'une image. Cette fois, le sélecteur sera égal à document.getElementsByTagName. Sélectionnez les balises P. Ensuite, tout comme avant, nous pouvons ensuite mettre un numéro d'index. Donc 0, 1 et 2. numéro 1 est la deuxième ligne de texte qui s'y trouve. Cette fois pour que nous sachions que cela fonctionne, nous allons simplement imprimer le nom de la balise sélectionnée. Sauvegardez. Voilà, tu y vas. Maintenant, la ligne 2 a changé pour le nom de la balise sélectionné. S' il passe à zéro, le nom de balise sélectionné doit maintenant être la première ligne. Voilà, tu y vas. Le dernier exemple que je vais vous montrer dans cette vidéo est de sélectionner le nombre d'images à l'intérieur des documents avec document.images. Pour ce faire, nous devons créer des images à l'intérieur de la page Web. Vous n'avez pas vraiment besoin d'avoir d'images physiquement là, nous pouvons juste faire quelques noms d'images. Donc image 1, image 2, image 3, puis image 4. Ensuite, si nous voulons savoir combien d'images sont sur cette page web, nous pourrions créer une variable appelée nombre d'images. Le nombre d'images va être égal à document.images.length, puis nous pouvons imprimer à l'écran le nombre d'images dans une chaîne. Donc, créons un élément vide pour les afficher dans. Une balise H1 avec un ID d'exemple. Ensuite, faisons un document.GetElementById, puis sélectionnez l'exemple. Ensuite, collez ça. Nous pouvons définir le texte avec le HTML interne. Réglons ceci à cette page a et puis un espace, plus la variable, qui va contenir le nombre d'images sur la page, puis plus, et puis nous voulons le mot images à l'intérieur d'une chaîne. Ok, si cela fonctionne bien, nous devrions obtenir le texte affiché de cette page a, puis quatre images. Sauvons ça et jetons un coup d'oeil. Super. Ça marche bien. Si nous devions supprimer une de ces images, cela devrait maintenant être changé pour vous trois. On y va. Il y a beaucoup de méthodes différentes que vous pouvez utiliser pour accéder aux éléments d'une page Web. Je vous recommande de jeter un oeil sur le site Web de Mozilla, auquel je vais fournir un lien vers. Il y a beaucoup d'autres exemples là-dedans. Espérons que nous comprenons maintenant que nous pouvons accéder à peu près à n'importe quelle partie d'un document ou d'une page Web que nous voulons. Dans la prochaine vidéo, nous allons passer à la façon dont nous pouvons manipuler ou modifier ces éléments. Merci d'avoir regardé, et je te verrai dans la prochaine vidéo. Merci d'avoir regardé et je te verrai là-bas. 32. Manipuler des éléments: Bienvenue de retour. Cette vidéo s'appelle Manipulating Elements. Comme d'habitude, commençons par notre propre dossier, donc c'est le numéro deux, Manipulating Elements. Alors ouvrons ça. Ensuite, laissez-le commencer avec son propre titre et une balise de script vide, donc cette fois manipuler des éléments, puis effacer tout cela. Nous commençons par notre page d'index vierge. Nous savons à partir de la dernière vidéo comment accéder aux éléments, alors maintenant regardons comment nous pouvons changer ces éléments en utilisant JavaScript. Donc, nous allons créer un titre de niveau 1 à titre d'exemple, et donnons-lui un ID de titre, puis du texte entre le titre de niveau 1 des éléments HTML changeants. Nous avons examiné la manipulation d'une valeur en utilisant le en HTML. C' était document.GetElementById. Ensuite, nous savons que nous devons saisir l'ID de l'élément que vous voulez changer, qui est le titre. Ensuite, nous avons utilisé HTML interne pour changer le contenu des éléments à tout ce que nous voulons. Nous allons mettre n'importe quel texte que nous voulons. Ainsi, ainsi que le HTML interne, nous pouvons également changer le CSS ou les styles d'un élément particulier, et nous le ferons avec .style. Ensuite, une fois que nous avons sélectionné le style, nous pouvons aller plus loin dans le CSS en utilisant le point. Vous pouvez voir en utilisant des parenthèses que dès que nous utilisons un point, nous obtenons ensuite une liste de toutes les propriétés CSS disponibles que nous pouvons sélectionner. Je vais donc commencer en sélectionnant la couleur. Ensuite, nous allons mettre ça égal à, je vais juste commencer par le rouge. Ouvrons maintenant cela dans le navigateur et jetez un oeil. Nous avons le titre de niveau 1 des éléments HTML changeants. Ensuite, ajoutez bien dans un style CSS, et puis nous allons définir dans la couleur du texte pour être rouge. Alors, allons-y. Il s'agit maintenant du texte tout rouge sur la page là-bas. Nous pouvons ajouter beaucoup de propriétés CSS différentes là-dessus, nous pouvons changer la taille de la police, et rendons ce texte vraiment grand afin que nous puissions vérifier son fonctionnement. Pour 100 pixels, donc avoir un peu de jeu avec cela et essayer de sélectionner certaines des différentes valeurs CSS et voir ce que vous pouvez réaliser avec eux. Mais je ne vais pas passer à l'obtention et à la définition des noms de classe ou des ID des éléments HTML. Commençons par obtenir le nom de la classe ou l'ID. Donc, pour ce faire, nous devons ajouter une classe à notre titre de niveau 1. Donc, ajoutons juste une classe de rouge et ensuite nous pouvons savoir quel est ce nom de classe de cet élément particulier. Sélectionnez le document.getElementById, alors laissons l'id de titre et le nom then.class, avec le point-virgule à la fin. Donc parce que nous saisissons un ClassName. Je veux stocker cela dans une variable afin que nous puissions y accéder facilement. Donc la variable de nom de classe est égale à document.getElementById. Nous allons saisir un titre, puis nous allons sélectionner dans le nom de la classe, faisons maintenant un document droit, puis vérifions. Nous avons le nom de classe correctement stocké dans la variable. Mettons-le juste à l'intérieur des parenthèses, puis rafraîchissons-le. Vous pouvez juste voir que nous avons le nom de classe rouge apparaissant en bas. Cela fonctionne également avec ID. Vous avez juste besoin de changer ClassName .ID, puis juste afficher les résultats une fois de plus dans une variable, donc nom d'ID, enregistrez cela. Nous avons la carte d'identité définie sur le titre dans ce cas. C' est ainsi que nous pouvons saisir ou comment nous pouvons obtenir le nom de la classe ou l'ID d'un élément. Parfois, vous voulez ajouter un ID ou une autre classe ou même une classe supplémentaire à un élément. Jetons un coup d'oeil à la façon dont nous pouvons ajouter des classes et des éléments. Je veux ajouter quelques styles et créer quelques nouvelles classes que nous pouvons à cet élément. Utilisons notre classe rouge. Réglons la couleur pour être rouge et la rendre un peu plus lisible, nous allons définir la taille de la police à 2 ems. Ensuite, il est également de créer une deuxième classe de bleu, puis nous pouvons ajouter ceci à nos éléments et changer la couleur en bleu. Ensuite, ajoutons un ID supplémentaire que nous pouvons ajouter l'élément deux. Je vais juste faire de la famille des polices un fantasme. Ci-dessous, nous avons obtenu l'ID et aussi la classe des éléments particuliers. Mais si nous voulons définir l'ID, nous utilisons simplement .id, puis définissons cela égal au nom de l'ID qui veulent ajouter, donc dans notre cas c'est ID1. Si cela est ajouté correctement, nous devrions maintenant obtenir le changement de famille de police en fantaisie. Alors sauvegardez cela, puis dirigez-vous vers le navigateur et rafraîchissez, nous y allons. Super. Nous avons la famille de polices différente, donc l'ID est ajouté à l'élément. Ajouter une classe fonctionne exactement de la même manière, alors nous allons juste dupliquer cette ligne, puis nous allons définir le className. Saisissez l'élément par ID de titre et then.className. Ensuite, au lieu de la classe rouge, ajoutons la classe de bleu que nous avons créée, puis sauvegardons cela, et débarrassons le nom de l'ID, alors sauvegardez cela et puis actualisez, et maintenant nous allons obtenir la couleur bleue, donc tout fonctionne correctement. Maintenant, nous savons comment ajouter des ID et des classes aux éléments, nous savons également comment accéder à la classe ou l'ID particulier. Ensuite, je vais vous montrer comment créer et ajouter de nouveaux éléments à une page. Commençons par une balise de script vide, et je vais les stocker dans des variables. Je vais créer une variable appelée un nouvel élément. Le nouvel élément que nous voulons créer sera égal à documents.createElement. Ensuite, à l'intérieur des parenthèses, nous devons mettre le nom de l'élément que nous voulons créer. Je vais créer un nouveau div. Cela va créer un nouveau div et le stocker dans la variable appelée New Elements. À l'intérieur de cette div, je veux créer du texte à mettre à l'intérieur, alors créons une nouvelle variable appelée addText. La façon dont nous pouvons ajouter du texte à un div ou à un document est en utilisant Document.CreateTextNode. Ensuite, à l'intérieur du crochet, je vais mettre à l'intérieur de la chaîne que nous voulons créer, nouvelle chaîne de texte. Nous avons nos textos, et nous avons aussi notre nouvelle div. Donc, pour ajouter le texte à la div, nous sélectionnons la nouvelle variable d'élément, qui est la div, et alors .appendChild. L' enfant auquel nous voulons ajouter ou ajouter est la variable addText. Alors mettez ça à l'intérieur des parenthèses. Maintenant, nous avons ajouté le nouveau texte à la nouvelle div. Ajoutons maintenant cela aux documents, donc document.body.insert Avant. Ici, nous indiquons au navigateur exactement où nous aimerions que le contenu soit ajouté. InsertBefore prend deux paramètres. Donc, le premier est requis, et c'est le contenu ou l'objet que nous voulons ajouter. Nous voulons ajouter la nouvelle variable d'élément que nous venons de créer, donc cela va en premier. La deuxième valeur est facultative, et c'est le marqueur en HTML où le nouvel élément sera ajouté juste avant. Si nous voulions ajouter de nouveaux éléments à juste avant notre titre de niveau 1, créons une nouvelle variable appelée nouveau contenu, puis définissons le contenu pour être égal à ce titre en haut. Donc document.getElementById. Nous voulons saisir l'ID du titre, alors mettez-le juste entre crochets, juste comme ça, nous voulons juste nous assurer que c'est une variable. Donc il y a un peu de choses là-bas donc nous allons juste jeter un coup d'oeil à ça. Nous créons un nouvel élément, ou un nouveau div. Ajoutera ensuite une nouvelle chaîne de texte à cette div en utilisant appendChild. Maintenant, nous avons cette information stockée dans une variable appelée nouvel élément. Nous allons ensuite ajouter ceci au document en utilisant insert avant. La section de code que nous voulons ajouter est ce nouvel élément qui contient la nouvelle div et la nouvelle chaîne de texte. Ensuite, la deuxième valeur du nouveau contenu est l'endroit où nous voulons ajouter ce nouvel élément deux, et nous voulons l'ajouter juste avant notre titre de niveau un, puis aller dans le navigateur et rafraîchir. Voilà, il y a notre nouvelle chaîne de texte. Si vous vouliez donner cette div et cet ID particuliers, vous pouvez le faire avec de nouveaux éléments ou le NewElement Variable.id. Comme nous l'avons utilisé dans le dernier exemple, nous allons définir l'ID pour être égal à tout ce que vous voulez. Je veux définir le mien sur mon ID, puis enregistrer cela, et maintenant quand nous actualisons la page, si vous allez dans les outils de développement, puis si nous sélectionnons la nouvelle texturation. Vous pouvez voir l'intérieur du corps, nous avons un nouveau div avec un ID de ma div, et le contenu est une nouvelle chaîne de texte. C' est ainsi que vous pouvez ajouter de nouveaux éléments au HTML en utilisant JavaScripts. Merci de regarder et dans la prochaine vidéo, nous passerons à un mini défi, qui est de créer un convertisseur de température et il mettra en pratique ce que vous avez appris au cours des dernières vidéos. Merci et nous vous verrons dans la prochaine vidéo. 33. Mini défi : convertisseur de température - Partie 1: Bienvenue de retour. Dans ce mini défi, nous allons créer une application de convertisseur de température. Il peut être simple ou aussi créatif que vous le souhaitez, mais c'est ce que j'ai trouvé, juste à titre d'exemple. Il est simple formulaire HTML qui prend les entrées de l'utilisateur, et ensuite nous pouvons le convertir en Celsius ou en Fahrenheit en utilisant JavaScript, alors essayez-le et voyez ce que vous pouvez trouver, sinon, suivez avec moi et je vais vous montrer comment j'ai créé ceci. Commençons par créer un dossier pour le projet dans la section dom. C' est le numéro 3 et c'est le convertisseur de température. Maintenant, ouvrons entre parenthèses et nous pouvons commencer. Le titre est le convertisseur de température, et posons tout le code de l'exemple des vidéos précédentes. Je vais commencer par la section HTML .1 Donc, je vais juste créer un formulaire HTML Bootstrap. Commençons en dehors des balises de script. Créons un conteneur, qui est le code Bootstrap, puis créons une ligne Bootstrap, puis utilisons la grille Bootstrap, donc col-sm-6. Si vous utilisez le plugin Emmet comme moi, vous devriez être en mesure d'obtenir la grille assez rapidement, sinon, vous aurez besoin de taper ceci avec les classes et aussi pour envoyer cette div, nous allons ajouter le col-sm-offset, qui décaler la grille de trois et la placer au centre. La classe Bootstrap de text-center qui gardera tout bien aligné au milieu, puis finalement, j'ai créé une classe de contenu, et cela vous allez être utilisé pour le styliser dans le CSS. Commençons par un titre de niveau 2, qui est juste le titre de notre application qui est Temperature Converter, puis créons notre formulaire. Parce que nous utilisons Bootstrap, créons un div avec une classe de groupe de formulaires et cela assurera que tout est bien disposé. Dans le groupe de formulaires, créons une entrée avec le type de nombre et ceci est une section où l'utilisateur peut entrer le nombre qu'il veut convertir en Celsius ou Fahrenheit. Donc, l'ID, je vais définir sur UserInput, et en fait, nous allons lui donner une étiquette, donc étiquette 4, pour l'ID UserInput, et fermons la barre latérale. Sauvegardons et vérifions si ça marche bien. On y va, il y a notre cap sur l'entrée. Terminons l'étiquette maintenant. Mettons dans Entrez votre numéro à convertir. Juste comme ça, puis rafraîchissez-vous et on y va. Voilà le texte de l'étiquette. Maintenant, je vais placer deux autres boutons à l'intérieur du formulaire, qui est pour le Celsius ou Fahrenheit. Mettons-les à l'intérieur maintenant. Je vais les placer dans un nouveau div ou form-group, puis la première entrée est le type de bouton, puis le texte à l'intérieur. Nous ajoutons cela avec la valeur de To Celsius, et puis nous voulons que ce bouton fasse réellement quelque chose lorsque l'utilisateur appuie dessus. Nous voulons créer un événement onclick qui déclenchera la fonction et nous allons regarder les événements plus dans la vidéo suivante, mais pour l'instant, suffit de créer un événement onclick avec le mot-clé onclick, puis à l'intérieur des citations, nous ajoutons le nom du que nous voulons déclencher une fois que ce bouton est appuyé. Je vais créer une fonction appelée toCelsius, et ensuite nous avons besoin des crochets après cela. Donc copiez et collez ou dupliquez ceci. Celui-ci est To Farhenheit, puis la fonction est toFarenheit, et jetons un oeil. Ça dit qu'il y avait deux boutons là-dedans. La dernière chose que nous devons faire est de créer un div vide, que vous voulez afficher le texte de la conversion de température. Tout comme la version finie, nous allons créer un champ de texte en bas où la conversion apparaît. En dehors du formulaire, je vais juste mettre ceci dans une balise p vide avec l'identifiant des résultats. Ouvrons si maintenant en HTML. Passons maintenant au sommet et nous allons ajouter un peu de style à notre forme. Ouvrez la partie de la tête. Créons nos propres balises de style. Si vous vous souvenez du bas dans la div qui contient tout le contenu, nous l'ajoutons une classe de contenu. Ajoutons cela maintenant dans les balises de style, puis ajoutons quelques styles simples. Ajoutons une bordure, 1px solide. Nous allons ajouter des coins arrondis avec un rayon de bordure. Je vais avoir moins 10px. Marge haut juste pour le garder loin du haut de l'écran ou 30px, puis une couleur de fond ou de la couleur grise, qui est eee et puis jetons un oeil. Ensuite, je veux juste ajouter la couleur de fond, que vous pouvez voir sur la version finale là-bas. Revenons dans le CSS et stylisons la section du corps. Pour obtenir l'arrière-plan, je vais juste ajouter un dégradé linéaire à l'arrière-plan. Donc gradient linéaire, puis à l'intérieur des parenthèses, nous pouvons en ajouter deux, puis ajoutons les deux couleurs, pour se fondre dans. Tout d'abord, son rouge, puis la deuxième couleur est bleue. Il commencera par le rouge, puis comme il va à droite, il changera en bleu. Allez dans le navigateur et il y a notre dégradé sur l'arrière-plan. Ça a l'air mieux. N'oubliez pas s'il s'agit d'un site de production en direct. Vous pouvez ajouter des préfixes de navigateur au dégradé linéaire uniquement pour la compatibilité entre les navigateurs. Maintenant, c'est le CSS HTML tout terminé pour l'interface utilisateur. Je vais juste laisser cette vidéo là et je me terminerai dans la prochaine vidéo où nous allons ajouter le JavaScript et rendre notre convertisseur de température pleinement fonctionnel. 34. Mini défi : convertisseur de température - Partie 2: Bienvenue de retour. Nous avons donc terminé l'interface utilisateur pour notre application de convertisseur de température. Donc, dans cette vidéo, nous allons terminer tout en ajoutant les fonctions JavaScript pour nous assurer que les entrées utilisateur sont converties en Celsius ou en Fahrenheit. Revenons à votre éditeur de texte et ensuite nous allons travailler à l'intérieur des balises de script. Nous créons donc deux fonctions. Le premier était en Celsius, puis un en Fahrenheit, qui va prendre l'entrée entrée entrée dans le champ d'entrée et ensuite la convertir en Celsius ou en Fahrenheit. Ensuite, nous allons afficher les résultats à l'intérieur de cette balise p là-bas. Donc, créons la fonction to Celsius pour commencer. Donc, créez la fonction, à Celsius. Donc, pour créer cela, je vais créer une variable appelée Celsius, puis à l'intérieur de cette variable, je veux stocker la valeur de l'entrée de l'utilisateur. Donc document.getElementById, et l'ID que nous voulons saisir est l'entrée de l'utilisateur à partir du formulaire. Donc, placez cela à l'intérieur des parenthèses et ensuite nous voulons saisir la valeur de cette entrée utilisateur. Donc maintenant, nous avons la valeur de l'entrée de l'utilisateur. Nous voulons créer un calcul pour le convertir en Celsius. Donc, cela commence par la valeur moins 32 et puis parce que nous allons multiplier cette valeur, mettons ceci à l'intérieur des parenthèses, puis multiplions cette valeur par 5 et ensuite nous devons la diviser par 9. C' est le calcul que nous devons convertir en Celsius. Donc maintenant, nous avons la valeur du Celsius stockée dans cette variable. Arrondisons maintenant au nombre entier le plus proche. Donc Celsius va maintenant être égal à Math.Round. Le nombre que nous voulons arrondir est la variable Celsius. Alors mettez ça à l'intérieur des crochets. Alors maintenant, affichons la valeur de Celsius dans les résultats. Donc document.getElementById. Donc, prenons le results.innerHTML et ensuite nous voulons définir cela à la variable Celsius. Alors sauvegardons cela et vérifions cela dans le navigateur. Alors mettons un numéro à l'intérieur. Alors mettons une valeur de 40. Donc 40 Fahrenheit, et puis convertisons-le en Celsius. Donc la conversion est quatre. Alors rendons cette étiquette un peu mieux en disant que 40 Fahrenheit équivaut à quatre Celsius. Donc, à l'intérieur du HTML interne. Donc, tout d'abord, prenons l'utilisateur input.value. Il s'agit donc de la valeur que l'utilisateur entre dans le champ. Ensuite, plus alors nous allons ajouter une chaîne, disons dans un Fahrenheit est, et puis ajoutons à la fin la variable Celsius. Donc, par exemple, si l'utilisateur met la valeur de cinq, cela dirait cinq Fahrenheit est, puis la conversion correcte et alors nous allons vouloir ajouter une chaîne à la fin pour dire Celsius. Alors gardons ça et jetons un coup d'oeil. Donc cinq Fahrenheit, puis cliquez sur Celsius. Donc, ce sera égal à cinq Fahrenheit est moins 15 Celsius et donnons à cela un aller avec une autre valeur. Donc huit, c'est moins 13, 30. Maintenant que ce côté fonctionne, on peut créer la fonction Fahrenheit. Alors rendons la vie plus facile. Copions cette fonction et ensuite nous pouvons faire quelques petits changements. Donc celui-ci veut être deux Fahrenheit. Donc la variable de Fahrenheit. Donc, je veux commencer par faire la même chose. Nous voulons donc créer le document.getElementById. Nous voulons donc toujours saisir l'entrée de l'utilisateur et la valeur des entrées de l'utilisateur. Mais cette fois, le calcul est légèrement différent, donc permet de le multiplier par 9 divisé par 5 plus 32. Donc, nous allons juste changer la variable Celsius à Fahrenheit et aussi dans le Math.round. Nous voulons toujours saisir l'étiquette de résultat et changer le code HTML interne. Mais cette fois, cela doit être Celsius et alors cela doit être la variable Fahrenheit et la chaîne doit à nouveau être Fahrenheit. Ok, alors sauvegardons ça et jetons un coup d'oeil. Alors mettons une valeur à l'intérieur et voyons si cela fonctionne. Donc ça ne marche pas, alors revenons en arrière et vérifions pourquoi. On a la fonction Fahrenheit. Non, tout semble bien alors vérifions les entrées, on a une erreur d'orthographe. Il doit y avoir H à l'intérieur du, alors sauvegardez cela et essayons à nouveau. Donc 30 Celsius devrait être égal à 86 Fahrenheit et essayons juste un de plus. Donc 10 Celsius, c'est 50 Fahrenheit. Ok super, donc tout fonctionne maintenant et c'est la fin de cette vidéo. J' espère donc que vous avez réussi à réaliser cela par vous-même et que tout fonctionne correctement, et j'espère que vous avez apprécié ce défi. Je vous verrai dans la prochaine vidéo où nous allons jeter un oeil aux événements JavaScript. 35. Événements Javascript: Bienvenue de retour. Dans cette vidéo, nous allons jeter un oeil aux événements JavaScript. Commençons par notre propre dossier. À l'intérieur de la section dom, créons un nouveau dossier, qui est le numéro 4. Je vais appeler ces événements, puis ouvrons. Ouvrons à l'intérieur de Brackets. Ensuite, ajoutez un titre, les événements JavaScript. Ensuite, nous n'avons pas besoin des balises de style pour celui-ci. Maintenant, nous pouvons également effacer HTML, ainsi que les balises de script. On y va. JavaScript est fortement utilisé dans les pages Web pour ajouter de l'interactivité, et nous avons besoin d'un moyen pour JavaScript de détecter les actions d' un utilisateur afin de savoir comment réagir. C' est là que les événements ou la gestion des événements interviennent. Vous pouvez également considérer un événement comme un déclencheur. Par exemple, le navigateur peut attendre qu'un événement se produise, tel qu'un utilisateur clique sur un bouton, que vous avez regardé dans les vidéos précédentes, où le clic sur le bouton déclenche une fonction. Nous avons donc brièvement examiné le gestionnaire d'événements onclick pour déclencher une fonction. JavaScript peut également réagir à des choses telles que lorsqu'une page est terminée le chargement, lorsque les touches sont pressées sur le clavier, lorsqu'une souris survole un élément, ou même lorsque vous soumettez un formulaire. Créons une entrée avec laquelle travailler, le type d'entrée du bouton, puis donnons à cela un ID de bouton, puis ajoutons quelques classes bootstrap. Nous pouvons les modifier en utilisant des événements JavaScript. Ajoutez une classe, la classe bootstrap de btn, puis btn succès. Ajoutons une valeur à ce bouton de bonjour, puis comme nous avons cherché précédemment, nous pouvons ajouter l'événement onclick pour déclencher une fonction. Je vais citer le nom de la fonction du changement, puis jusqu'aux balises de script, nous pouvons créer cette fonction à l'intérieur de là, donc la fonction de changement. Cela devrait sembler assez familier maintenant parce que nous l'avons utilisé plusieurs fois. Donc, nous voulons faire un document.getElementById. Maintenant, je vais saisir l'ID du bouton, puis une fois que ce bouton est appuyé, je veux juste que cela déclenche un nouveau nom de classe. Cela peut être égal à des classes bootstrap à nouveau, ou btn, btn-danger. Nous commencerons par le succès du bouton. Ensuite, une fois cliqué, cela changera en danger du bouton. Ouvrons ça et vérifions que ça marche bien. C' est un succès de bouton qui est l'arrière-plan vert, puis une fois cliqué, nous obtenons le nom de classe du bouton ou btn-danger ajouté, qui est l'arrière-plan rouge. C' est l'événement onclick. Nous pouvons également faire un genre de chose similaire lorsque nous survolons le bouton avec la souris plutôt que de cliquer dessus. Pour ce faire, nous changeons juste onlick pour être sur la souris. Maintenant, quand nous survolons le bouton, nous devrions obtenir le changement de classe, juste comme ça. Donc, cela se produit une fois que la souris passe sur le bouton. Si vous voulez que cela se produise lorsque le curseur quitte le bouton, nous pouvons changer onmouseover pour onmouseout, et il y a une seule différence. Une fois que nous passons sur le bouton, la classe ne change pas, mais dès que la souris quitte le bouton, nous obtenons ensuite le changement sur le fond rouge. Tous ces événements se déroulent dans les coulisses sur de nombreuses pages Web que vous visitez tous les jours. Le prochain événement utile que je veux regarder est onkeyup et onkeydown, et c'est à peu près ce que cela ressemble à chaque fois un bouton du clavier est appuyé, ou à chaque fois qu'il est libéré. Cela peut déclencher un événement. Nous allons créer un exemple de formulaire pour voir cela en action. Commentons simplement l'entrée, et créons un formulaire. Ensuite, le type d'entrée de texte, un ID pour saisir un JavaScript de champ d'entrée, puis tout comme nous l'avons utilisé avec les événements onclick, nous pouvons changer cela en onkeyup, et cela peut déclencher une fonction aussi. Nous appellerons la fonction KeyPressé. Donc, avec cet exemple, je vais créer une fonction simple qui va être déclenchée chaque fois qu'un bouton du clavier est appuyé. Je vais créer un titre vide de niveau 2, et je veux que la fonction affiche le texte. Donc, chaque fois qu'un bouton est pressé à l'intérieur de ce formulaire, je veux que le titre de niveau 2 contienne la valeur de ce qui a été entré dans les entrées. Laissez donc le contenu vide pour l'instant, et ajoutons un ID d'affichage. Ensuite, créons notre fonction de KeyPressed. Tout d'abord, je veux saisir l'affichage avec un document.getElementById, qui est l'ID d'affichage. Ensuite, nous voulons définir le HTML interne de l'affichage pour être égal à la valeur de ce InputField. J' ai donc besoin d'InputField.Value. Donc, nous allons monter dans le titre vide de niveau 2, puis nous définissons dans le contenu du HTML interne pour être égal à ce que les utilisateurs tapent à l'intérieur de ces champs d'entrée. Cela va être déclenché chaque fois qu'un bouton du clavier est enfoncé. Jetons un coup d'oeil à cela en action. Il y a la forme dans le coin supérieur. Chaque fois que vous appuyez sur une touche, cela déclenche une fonction, puis nous obtenons le contenu rempli à l'intérieur du titre de niveau 2. Donc, cette fonction est déclenchée chaque fois qu'une clé est libérée avec onkeyup. Nous pouvons également avoir onkeydown, et cela est déclenché dès que le bouton est enfoncé. Donc, deux événements sont assez similaires, mais juste avec une petite différence subtile. Ensuite, je veux regarder l'événement onchange. Ceci est déclenché lorsqu'une modification est détectée. Nous pouvons utiliser le même formulaire, mais cette fois au lieu de onkeydown, nous voulons le changer en onchange. Ensuite, créons une fonction. Donc, chaque fois qu'il y a un changement détecté, je veux augmenter la police. Créons cette fonction vers le bas. Donc, quand un changement est détecté, nous voulons saisir le champ d'entrée, qui est cette section, puis accepter le CSS pour être un peu plus grand. Donc document.getElementById. Encore une fois, laissons tomber InputField, et then.style.fontSize. Ensuite, pour que nous puissions voir que cela fonctionne, définissons la taille de la police pour être beaucoup plus grande, donc 50 pixels, et puis sauvegardons cela. En fait, c'est censé être FontSize. Enregistrez cela, puis dirigez-vous vers le navigateur. Tapons quelque chose à l'intérieur. Dès que nous avons un clic, j'appuie sur une touche de retour, et cela devrait déclencher la fonction. On y va. Maintenant, nous avons le texte modifié à 50 pixels. C' est ainsi que fonctionne le gestionnaire d'événements onchange. Le dernier gestionnaire d'événements que je vais vous montrer dans cette vidéo utilise onsubmit, qui est déclenché lorsqu'un formulaire est soumis. Donc, nous allons créer un exemple de formulaire ou nous pouvons utiliser celui d'avant. Pour que cela fonctionne, nous devons le mettre à l'intérieur des éléments de formulaire, donc onsubmit. Encore une fois, nous devons mettre une fonction à exécuter, donc runValidation, et ensuite nous allons ajouter un script à l'intérieur de cette fonction pour faire une validation de formulaire quand cela est soumis. Pour que cela fonctionne, nous devons créer une entrée qui est le type de soumission, et nous obtenons une valeur de formulaire Soumettre. Enregistrez cela, puis descendez dans le script, puis créez une fonction qui est RunValidation. Nous pouvons mettre n'importe quelle validation de formulaire que vous voulez ici. Donc juste pour vérifier que cela fonctionne, je vais créer une alerte et juste créer du texte, juste notre validation de formulaire, puis rafraîchir le navigateur. Maintenant, lorsque nous soumettons le formulaire, cela déclenche la fonction onsubmit et il y a notre texte à ouvrir avant la validation du formulaire. C' est vraiment utile pour faire quelques vérifications à l'intérieur du navigateur pour vérifier que l'utilisateur a rempli tous les champs, ou tapé les choses correctement. C' est donc la fin de cette vidéo sur les événements JavaScript. Je vous verrai dans la prochaine vidéo où nous allons jeter un coup d'œil à un mini défi, qui consiste à réagir aux événements onclick pour faire un nom d'animateur. Je te verrai là-bas. 36. Mini défi : animateur de nom: Bienvenue de retour. Dans cette vidéo, nous allons jeter un oeil à un autre mini-défi appelé Name-Animator. Si vous avez compris le fonctionnement des événements onclick, en particulier la façon dont nous modifions un élément une fois qu'un bouton est cliqué, vous ne devriez pas avoir de problèmes pour terminer ce challenge. Tout ce que je veux que vous fassiez est d'ajouter votre nom en haut de la page, puis de créer des boutons qui manipulent ensuite ces éléments. Donc, dans mon cas, j'en ai créé un qui rend le texte gros. Nous pouvons changer la couleur, nous pouvons dire que tous les caractères sont majuscules et ensuite nous pouvons cacher le nom et le montrer à nouveau. Donc, c'est juste une bonne chance de mettre certaines choses en pratique, et de les mettre en mémoire. Vous devriez être capable de donner cela un coup de pouce, et sinon, juste suivre avec moi pendant que je crée ceci. De retour dans la section Dom, créons un nouveau dossier qui est numéro cinq, et ceci est l'animateur de nom. Ouvrez cela et modifiez le titre, puis commençons par une page blanche. Dans cette vidéo, je veux gérer les clics d'une manière légèrement différente. Vous pouvez déclencher une fonction si vous voulez, mais je vais vous montrer une façon légèrement différente de le faire. À l'intérieur du corps, créons notre nom. Je vais juste mettre cela dans les balises p, donc l'ID égal au nom, puis mettre votre nom à l'intérieur de cela, et puis créons les cinq boutons qui sont tous des types de bouton d'entrée. Vous pouvez créer plus de boutons ou moins de boutons si vous préférez. Donc, le type est bouton et puis juste pour le rendre un peu plus agréable, ajoutons quelques classes Bootstrap, donc, btn btn-info, la valeur qui est juste un texte qui apparaît à l'intérieur du bouton de big, puis un événement onclick. Onclick est égal à, et cette fois, au lieu de déclencher une fonction, je vais réellement mettre le JavaScript dans les guillemets. Donc document.getElementById, puis à l'intérieur des crochets, nous devons mettre l'Id, qui dans notre cas est le nom. Placez cela à l'intérieur de là et j'espère que vous pouvez vous rappeler comment ajouter des styles CSS à partir du manipulateur dans les éléments vidéo, C'était le style point, puis la taille de la police point égale à 100 pixels, et cela veut en fait être en guillemets simples, parce que nous avons les guillemets doubles à l'extérieur. C' est juste une façon légèrement différente d'exposer cela, et cela devrait fonctionner exactement de la même manière, donc, au fur et à mesure que vous enregistrez, vérifiez à l'intérieur du navigateur. Donc, il y a notre nom et puis vous avez cliqué sur grand, nous devrions obtenir le changement de texte à 100 pixels. Juste avant de passer à autre chose, je vais ajouter quelques styles dans la section tête. Juste pour obtenir cela au centre, le corps, définissons la largeur à 100 pour cent, puis le texte aligné au centre, puis juste quelques styles à notre nom. Donc, ajoutez un ID de nom, créons la taille de police de 60 pixels, puis la couleur, je veux que le mien soit bleu. [ inaudible] a poussé tout cela au centre, et vient d'ajouter de la couleur à notre nom, et vous pouvez changer cela à ce que vous voulez, alors soyez aussi créatif que vous voulez l'être. C' est notre premier bouton, tout fonctionne correctement, donc, maintenant c'est juste le cas de créer plus de boutons avec différents styles CSS. Nous pouvons soit taper tout cela, soit vous pouvez simplement copier et coller, ou dupliquer. Donc, je vais juste copier cela, puis coller cela ci-dessous. Je veux que mon deuxième bouton change la couleur du texte, donc, donnons à cela une valeur de changement de couleur, [inaudible] à la couleur du point de style pour être égale au rouge, ou n'importe quelle couleur que vous aimez, donc le mien va être rouge. Si nous actualisons et cliquez sur changer de couleur, il y a le style rouge. Maintenant, nous allons créer un bouton pour transformer le texte en majuscules. Donc, la valeur du bouton est majuscules, puis cette fois le texte de point de style se transforme, puis cela sera égal à majuscules, puis deux autres boutons. Celui-ci est de cacher le bouton, et pour cacher le bouton, nous faisons la visibilité des points de style. Donc la visibilité est égale à cachée. La dernière consiste à faire apparaître les éléments à nouveau, c'est show, puis à nouveau la visibilité des points de style, alors c'est égal à visible. Il y a nos cinq boutons, alors sauvegardez ça. D' accord. Essayons tous les boutons et voyons qu'ils fonctionnent tous, gros fonctionnent, changer de couleur est, tout changer en majuscules, cacher, puis montrer. On y va. J'espère que tu parviendras à le faire par toi-même. C' est un défi assez simple, mais cela vous donne la chance de mettre en pratique ce que vous avez appris, donc il est vraiment utile de donner cela vous-même. Merci, et nous allons maintenant passer au projet final. Nous allons créer une application de carte de visite. Merci et je vous verrai dans la section suivante. 37. Créer l'interface utilisateur : partie 1: Félicitations pour avoir terminé ce cours, et maintenant nous allons entrer dans une partie vraiment amusante où nous allons arriver à créer une application de carte de visite. C' est un exemple de ce que j'aimerais que tu construises. C' est quelque chose que j'ai créé pour te montrer comment c'est fait. Cependant, je l'ai volontairement laissé assez basique, donc j'aimerais que vous soyez vraiment créatif et montrer ce que vous pouvez faire. Donc, je suggère de nous donner il y a comme d'habitude, puis d'obtenir toute la mise en page de base créée, puis de faire fonctionner toutes les fonctionnalités en utilisant JavaScript. Dans ma version, j'ai créé deux sections. Le côté gauche est les entrées d'un utilisateur où il peut mettre dans le nom de son entreprise, et il peut également ajouter divers textes tels que des noms, des titres de poste et des informations de contact. Ils peuvent également ajouter un peu de style dans la carte de visite en utilisant les couleurs d' arrière-plan et également changer la couleur du texte et l'alignement du texte, puis il y a un div à droite qui comprend un exemple de carte de visite, et tous les qui sont placés à l'intérieur de la div gauche, puis insérés dynamiquement dans la carte de visite. Vous pouvez voir dès que vous mettez une information dans le côté gauche, elle est ensuite répliquée dans la carte de visite. Vous pouvez modifier n'importe laquelle de ces valeurs, et tout est modifié immédiatement. Allez répliquer cela vous-même et voir ce que vous pouvez créer, puis téléchargez-le à la fin. J' adorerais voir ce que vous pouvez trouver, et j'espère que vous pouvez réaliser tout cela par vous-même. Sinon, suivez-moi avec moi, et je vous montrerai comment j'ai créé ça. Commençons par son propre dossier. Copions simplement l'une des vidéos qui a le squelette HTML, puis renommez le dossier, business-card-project, et faites-le glisser entre parenthèses et changez le titre. C' est maintenant la page propre, donc je vais me débarrasser des balises de style et tout le reste est dans le HTML ou le JavaScript. L' exemple que j'ai copié contient les photos de la page d'index et nous avons également besoin d'un fichier JavaScript externe. J' ai déjà le alert.js, donc je vais juste le changer custom.js, puis aussi créer une nouvelle page pour la feuille de style. Ceci est un style.css, puis ajoutons ceux-ci dans la page suivante. Ajoutons la feuille de style pour commencer, et ceci est juste dans le répertoire racine. Le lien est votre style.css, puis la balise de script, je vais ajouter tout en bas du corps. Ensuite, la source, encore une fois, c'est dans le répertoire racine donc nous pouvons juste aller à custom.js. Faisons de l'espace là-bas. Pour commencer, je vais créer des divs et je vais utiliser la grille Bootstrap pour nous aider à ce sujet. Commençons par le titre de la page. Créons un div avec une classe de conteneur-fluide, et nous allons en faire un projet réactif. Ensuite, la div avec la classe de la ligne, puis pour en faire la pleine largeur de la page, créons un div avec le col, une classe de col-sm-12, puis le titre de niveau 1, qui est la carte de visite Designer, puis un second liquide de conteneur, qui va être le conteneur à la fois pour le div gauche et le div droit. Une nouvelle div avec la classe de conteneur-fluide, et faisons de l'espace là. Il y aura donc deux sections à cette partie. Il va y avoir l'entrée, qui est l'endroit où l'utilisateur saisit les informations du formulaire. Créons juste un commentaire de la section d'entrée, puis créons la grille pour cela. Créons un div avec la classe, la classe Bootstrap de col-sm-12. C' est une grille de 12 colonnes pour la largeur sur les petits appareils. Les appareils de taille moyenne feront de la moitié de la largeur de la page, donc col-md-6. Ensuite, pour que nous puissions styliser cela nous-mêmes, je vais ajouter notre propre classe personnalisée d'arrière-plans, et nous allons l'utiliser dans juste un peu dans le CSS. Maintenant, nous devons créer notre formulaire HTML pour toutes les entrées utilisateur, et donnons à ce formulaire un ID de CardInfo. Tu peux appeler ça comme tu veux. Ça n'a pas vraiment d'importance. Ensuite, ajoutons quelques classes, donc une classe Bootstrap de form-horizontal. Ensuite, à l'intérieur de ce formulaire, créons des groupes de formulaires Bootstrap. Le premier groupe de formulaires dans sa propre div. À l'intérieur de cette classe de groupe de formulaires, nous allons créer des sections du formulaire. Nous allons créer les étiquettes sur le côté gauche, puis les entrées sur la droite. Nous voulons que l'étiquette sur le côté gauche utilise une grille Bootstrap. Cela va prendre trois colonnes, qui laissera les neuf colonnes restantes pour l'entrée. Créons l'étiquette maintenant. Cette étiquette est pour l'entrée, ce qui donnera un ID d'InputCompany. La façon dont je vais organiser les ID dans ce projet est quelque chose sur le côté gauche, qui est que l'entrée de l'utilisateur va avoir un ID commence par l'entrée. Le premier est InputCompany et le niveau de message d'entrée par exemple, puis sur le côté droit dans la carte de visite, je vais créer l'ID, donc cette section, pour commencer par la sortie. Ce sera OutputCompany et OutputMessage par exemple. Juste pour qu'il soit clair, une fois que nous arrivons à la section JavaScript, quel ID nous utilisons actuellement. Maintenant, nous avons le label pour InputCompany. Ajoutons les classes Bootstrap. Celui-ci est col-sm-3 et également control-label, et le texte est Nom de la société, puis un deux-points, puis l'entrée suivante. L' entrée que nous voulons est juste du texte, puis la classe, encore une fois, une classe Bootstrap de form-control, puis l'ID. C' est juste l'identification que nous avons placée dans l'étiquette. L' ID est égal à InputCompany, puis la dernière chose est le onkeyup. Chaque fois qu'une clé est libérée, nous voulons qu'elle déclenche la fonction de PrintCompany. Donc, cela imprimera le nom de la société sur le côté de la carte de visite. Sauvegardons cela et ouvrons le navigateur. C' est un peu désordonné maintenant. Je pense que nous avons juste besoin de mettre l'entrée dans un div. Créons un div Bootstrap avec la classe de col-sm-9, puis déplacons la div de fermeture après l'entrée. Le label a les trois parties. L' entrée est restée neuf colonnes. Ça a l'air un peu mieux maintenant. Passons au message de l'entreprise.Vous pouvez soit taper tout cela à nouveau ou vous pouvez simplement copier cette section div, puis il suffit de coller cela ci-dessous, et puis juste un cas simple de changer certaines des valeurs. Celui-ci est InputMessage. Le nom de la société est maintenant notre message d'entreprise, puis nous devons changer l'ID, puis aussi le nom de la fonction pour être PrintMessage, et ce devrait être tout ce dont nous avons besoin pour le message. Rafraîchissons juste et il y a le message. Maintenant, nous devons passer à l'arrière-plan sur la couleur du texte. Revenons à l'éditeur de texte et puis nous pouvons coller à nouveau dans le groupe de formulaires. Les entrées, je vais appeler mine InputBG pour l'arrière-plan, puis changer l'ID. Modifiez l'étiquette en couleur d'arrière-plan. En raison de la sélection d'une couleur, nous voulons changer le type d'entrée pour être couleur. L' ID est correct, puis nous devons ajouter une valeur, et ce sera la valeur initiale. Je vais juste ajouter une valeur à cela, une valeur hexadécimale ou ffb74d. Nous allons utiliser un handle d'événement différent cette fois. Cette fois, je vais utiliser onchange. Chaque fois que la couleur est changée, elle déclenchera alors la fonction appelée ChangeBG, et nous pouvons également réutiliser cette partie parce que la prochaine est de changer la couleur du texte. Cela doit également avoir le type d'entrée de couleur, mais nous avons juste besoin de changer InputBG en InputText. Modifiez l'ID d'entrée et puis cette fois, nous devons le changer en Couleur du texte. Je vais changer l'erreur d'orthographe. La couleur du texte, j'ai le type d'entrée de couleur. L' ID est correct. La valeur, je vais changer le mien en 262626. Ensuite, la fonction, onchange à nouveau. Il va à ChangeText. Je vais enregistrer cela et vérifier à quoi ça ressemble dans le navigateur. Rafraîchir, donc maintenant nous avons il indique le nom de notre société, le message de l'entreprise, et puis nous avons également le sélecteur de couleur apparaissant une fois que nous sélectionnons la couleur d'arrière-plan, et aussi une fois que nous sélectionnons la couleur du texte. Nous avons également la couleur par défaut qui s'affiche à l'intérieur. Nous laisserons cette vidéo là et nous continuerons dans la prochaine vidéo. Nous allons commencer à ajouter les alignements de texte et nous allons terminer la section de formulaire. Merci et je vous verrai dans la prochaine vidéo. 38. Créer l'interface utilisateur : partie 2: Bienvenue de retour. On va continuer là où on s'est arrêté dans la dernière vidéo. Nous allons passer à partir des couleurs du texte , puis nous allons ajouter tout le reste de la section du formulaire, qui inclut l'alignement du texte ainsi que divers noms et informations de contact. Maintenant, nous allons passer à la section Alignement du texte. Allons dans l'éditeur de texte, puis juste en dessous de la section ChangeText, copions simplement cette section et collez-la ci-dessous. Celui-ci va fonctionner légèrement différent des derniers que nous avons examinés parce qu'ils vont être trois entrées différentes. Chaque fois qu'une de ces entrées est cliquée, nous voulons saisir l'ID, puis passer ce JavaScript pour déterminer si le CSS doit être aligné à gauche, à droite ou au centre. Nous pouvons réutiliser l'étiquette, et cette fois nous voulons juste lui donner une étiquette appelée Text Align. Ensuite, toujours dans la section col-sm-9, nous allons créer trois entrées différentes. Le premier sera le type de bouton, puis la classe de btn btn-info. La valeur que nous allons transmettre sera le texte à l'intérieur du bouton, donc c'est le bouton gauche. Ensuite, nous allons passer un identifiant dans le texte- gauche. C' est en fait une classe de bootstrap, mais je vais vous montrer exactement ce que nous allons faire en une seconde. Nous allons créer un gestionnaire d'événements onclick et lorsque le bouton est enfoncé, il mettra fin à la fonction de déclenchement appelée TextAlign. Ensuite, à l'intérieur des crochets, nous allons passer un paramètre de this.id. Cette partie aura plus de sens lorsque nous passons à la section JavaScript. Mais fondamentalement, ce que nous faisons est chaque fois que le bouton est cliqué, nous allons alors déclencher la fonction TextAlign et selon lequel des trois boutons est enfoncé, il va alors saisir l'identifiant. il va alors saisir l'identifiant. à gauche. Ensuite, en utilisant JavaScript, nous allons ajouter cet id text-left , puis nous l'ajouterons comme un nom de classe. Dès qu'il est enfoncé, le texte à l'intérieur de la carte de visite aura alors l'alignement du texte à gauche et le même pour le centre du texte et le texte à droite. Mais cela devrait avoir plus de sens lorsque nous arrivons à la section JavaScript. Il suffit de dupliquer ce bouton deux fois de plus et nous allons utiliser exactement la même fonction TextAlign. Mais nous avons juste besoin de changer l'id. Le milieu va être text-center avec la valeur de Center, puis le troisième bouton a la valeur Right, puis l'id de text-right. Les trois boutons déclenchent la même fonction, mais nous la passons simplement dans un identifiant différent en fonction du bouton qui est enfoncé. Jetons un coup d'oeil à cela et rafraîchissons. J' ai trois boutons. Maintenant, nous pouvons passer sur le nom de l'utilisateur, le titre du poste, l'e-mail et le numéro de téléphone, donc c'est une section assez simple. Nous pouvons simplement copier les groupes de formulaires que nous avons déjà créés, puis les coller sous les boutons. Le premier est le InputName, la valeur d'étiquette de votre nom, changez l'id. Je vais supprimer la valeur parce que nous n'utilisons pas la couleur. Supprimons le type de couleur et revenons au texte. Alors on a besoin que ça soit en place. Lorsque la touche est pressée, déclenche alors une fonction appelée PrintName. Ensuite, faisons la même chose pour le titre du travail, alors copiez-le, puis collez. InputJob, l'id est InputJob aussi, puis l'étiquette est Job Title, puis onkeyup PrintJob, puis la section e-mail. Créons un nouveau groupe de formulaires, une fois de plus. Coller juste en dessous de sorte que cela doit être l'InputeMail, puis changer l'id. L'étiquette est simplement Email et cette fois nous devons changer le type d'entrée pour être email afin que JavaScript puisse faire une certaine validation à ce sujet. Puis onkeyup fonction PrintEmail. Alors la dernière que nous devons faire est pour le numéro de contact. Copions simplement ce dernier groupe de formulaire pour le numéro de téléphone, qui est InputTelephone, changez l'identifiant, le titre du numéro de téléphone, puis le type d'entrée de tel, puis onkeyup PrintTelephone. Enregistrez cela et vérifiez cela dans le navigateur et cela devrait être tous les types d'entrée tous terminés maintenant. Nous avons juste besoin d'ajouter le bouton Soumettre, puis aussi un bouton pour effacer le formulaire, alors ajoutons-les maintenant. Nous pouvons les mettre dans leur propre groupe de formulaires aussi. Créez un nouveau div avec la classe de form-group. Ensuite, ajoutons la grille bootstrap donc un div, donnons à cela une classe de col-sm-3 afin qu'il prenne trois colonnes , puis aussi un offset-col-sm-offset-3. Ensuite, à l'intérieur de la div, nous pouvons mettre l'entrée. Le premier que nous devons ajouter est le type d'entrée de bouton. C' est pour le bouton Soumettre, puis onclick. Nous allons créer la fonction FormSubmit, puis la valeur du bouton est égale à Soumettre. Puis enfin, le bouton pour la réinitialisation du formulaire ou le Effacer. Je crée ce div complet à partir de celui ci-dessus et supprime juste le décalage cette fois. Encore une fois, nous avons besoin du type d'entrée de bouton. Onclick va créer la fonction de Reset avec la valeur de Clear. Regardons le navigateur et vérifions si tout fonctionne bien. Alors rafraîchissez ça et on y va. Il y a notre carte de visite et tous les formulaires, le bouton Soumettre, et aussi le bouton Effacer en bas. Finissons le HTML, nous avons juste besoin de créer le div sur le côté droit, qui est pour la carte de visite. Cela va avoir toutes les informations que l'utilisateur saisit dans le formulaire. Créons un commentaire juste pour le rendre un peu plus lisible. Ceci est la section de sortie. Je veux juste m'assurer que nous avons ceci dans la bonne section donc je vais cliquer dessus. C' est la fin de toutes les formes. Rangons ça un peu. Apporter la forme au sommet. Ensuite, celui-ci devrait être le récipient de fermeture pour le liquide du récipient. On y va. Nous pouvons maintenant garder tout cela dans le liquide du récipient, alors assurez-vous que la div de fermeture est en dessous de la section de sortie. Maintenant, créons la section carte de visite. Créons une grille d'amorçage pour ce côté. La classe doit être col-sm-12. Tout comme la section de gauche, ce sera toute la largeur de l'écran sur les appareils plus petits. Ensuite, une fois que vous arrivez à un appareil plus grand, nous pouvons ajouter un col-md-6 et cela prendra six parties ou la moitié de la largeur de l'écran. La partie gauche et la partie droite seront assis côte à côte. Ensuite, un nouveau div, et cela va avoir l'ID égal à la carte parce que c'est la section de la carte de visite. Nous utilisons cet identifiant pour le style et aussi pour l'intersection JavaScript. Mettons le nom de la société dans un titre de niveau 3, alors mettons le nom de la société. Nous allons juste mettre cela comme un espace réservé jusqu'à ce que l'utilisateur ajoute des informations dans le formulaire, puis cela remplacera le texte du nom de la société. Nous devons lui donner un identifiant. Parce que nous sommes maintenant sur la section de sortie, nous pouvons ajouter l'id de OutputCompany. Ensuite, nous devons faire le message de sortie, qui est cette section ici. Sous le titre de niveau trois, mettons ceci dans les balises p, puis l'id de OutputMessage et cela va avoir une classe bootstrap de small, juste pour qu'il soit un peu plus petit que le reste du texte, puis le texte du message de l'entreprise, puis dupliquez cette section. Cela sera pour votre nom ou le nom de l'utilisateur, donc le texte est Votre nom. Nous pouvons garder la classe bootstrap de small, mais cette fois changer la sortie pour avoir un identifiant de OutputName et dupliquer cela à nouveau. C' est le OutputJob. Encore une fois, la classe est petite et le nom de Job Title. Jetons un coup d'oeil. C'est fait, c'est assemblé maintenant. Après le titre du poste, nous devons également ajouter l'e-mail et le numéro de téléphone. Nous allons dupliquer ce deux fois de plus afin OutputeMail et le texte peut être de Email :. Enfin, OutputTelephone et le nom de Tel : avec un deux-points à la fin. Je devrais le rapprocher un peu et économiser. Ça devrait être ça, une fois que vous rafraîchissez. Si vous passez au projet, et il y a toutes nos informations sur la carte de visite sur le côté droit. C' est la section de l'interface utilisateur complète. Dans la vidéo suivante, nous allons passer à l'ajout de CSS et passer également aux JavaScripts. 39. Ajouter les fonctions CSS et Javascript: Ok, donc maintenant la section de l'interface utilisateur est terminée pour notre projet de carte de visite. Passons maintenant au style et ajoutons également un peu de JavaScript pour que cela fonctionne. Alors revenez à Brackets, et puis nous devons commencer dans le style.css. La première chose que je veux faire est de déplacer le titre de niveau 1 au centre et de le rendre un peu plus espacé. Donc h1 et puis ajouter quelques alignements de texte au centre et aussi un remplissage. Donc 20 pixels en haut et en bas et zéro à gauche et à droite. Ensuite, ajoutons un peu de style à la carte de visite. Dans la page d'index, nous donnerons à la carte de visite un ID de carte, afin que nous puissions l'utiliser dans les styles du CSS. Donc, donnons-lui une certaine largeur de 400 pixels, une hauteur de 250 pixels, puis une bordure pour contourner la carte de visite de 1 pixel et une ligne solide, puis juste un peu de rembourrage de 10 pixels, et cela gardera tous le texte à l'intérieur du bord extérieur. Maintenant, ça ressemble un peu plus à une carte de visite. En fait, nous allons juste mettre une règle horizontale juste au-dessus de votre nom. Retournez dans la page d'index. Mettons les heures après le message de l'entreprise. Donc, il y a votre faible règle horizontale [inaudible], juste pour séparer le nom de la société avec les informations de la personne. Ajoutons maintenant quelques styles à la section d'arrière-plan du formulaire. Donc, nous allons donner à cette section de formulaire une classe personnalisée d'arrière-plan. Donc, utilisons cela dans le style.css. Alors donnons-lui une couleur de fond d'une couleur gris clair, qui est eee, et un peu de rembourrage de 30 pixels, puis une certaine marge sur le fond et ceci, vous allez être réglé sur 30 pixels. C' est juste pour la vue mobile. Ainsi, lorsque le formulaire est empilé sur le dessus de la carte de visite, il gardera juste un peu de distance entre les deux. Alors, sauvegardez ça. Maintenant, nous avons une légère couleur de fond pour séparer la section du formulaire de la carte de visite. Ça a l'air un peu mieux maintenant. Nous avons terminé l'interface utilisateur, et nous avons ajouté un style pour la rendre un peu plus agréable. Donc maintenant passons à l'ajout de JavaScript, pour réellement faire fonctionner cela. Nous voulons donc que les entrées de l'utilisateur de gauche apparaissent ensuite sur le côté droit, puis remplissent la carte de visite afin que l'utilisateur puisse voir exactement à quoi ressemblera sa carte. Donc, allons dans le custom.js. Nous pouvons créer les fonctions que nous avons créées à l'intérieur de la page d'index. Donc, le premier que nous devons faire est PrintCompany. C' est la première fonction à créer. Donc il suffit de copier cela et ensuite passer au custom.js, fonction PrintCompany. Ok, alors qu'est-ce qu'on veut que cette fonction fasse exactement ? Eh bien, si nous regardons notre page d'index, ce que nous voulons que la fonction fasse est d'attraper les éléments HTML sur le côté droit. Donc, nous devons le faire avec document.getElementById. Donc, c'est OutputCompany, et ensuite nous devons changer le InnerHTML pour être le contenu de l'InputCompany sur le côté gauche. Alors faisons ça maintenant. Donc document.getElementById. Nous devons donc saisir la OutputCompany, puis nous devons définir l'innerHTML pour être ensuite égal à l'InputCompany.Value. Alors gardons ça et voyons si ça marche bien. Rafraîchir, donc maintenant nous devrions être en mesure de taper un nom de société à l'intérieur et parce que nous avons utilisé sur keyup comme gestionnaire d'événements, nous pouvons maintenant voir le contenu affiché sur le côté droit, et cela déclenche une fonction chaque fois qu'une clé est pressé. Passons maintenant au message de l'entreprise. Il suffit de copier cette fonction, et ensuite nous pouvons la coller ci-dessous. La fonction s'appelait PrintMessage, puis l'élément que nous voulions saisir était OutputMessage. Nous définissons donc l'innerHTML de OutputMessage pour être InputMessage. Ensuite, au lieu de l'innerHTML, nous devons changer le CSS pour changer la couleur de fond et aussi la couleur du texte. Donc, la fonction, et le nom de la fonction était ChangeBG. Bien sûr, si vous utilisez des noms de fonction différents dans la page d'index, il suffit de les changer en conséquence dans le fichier JavaScript. Ok, donc pour commencer, nous devons saisir la valeur ou la valeur d'entrée de l'utilisateur, et je vais le stocker dans une variable appelée BgColor. Donc, le bgColor est égal à document.getElementById et l'ID que nous voulons saisir est le InputBg et then.value. Donc maintenant, nous avons la valeur d'entrée de l'utilisateur stockée dans une variable appelée bgColor. Maintenant, nous pouvons définir le côté carte de visite. Donc document.getElementById, et l'ID que nous voulons attraper. Donc, la couleur de fond que nous voulons changer est la section complète de la carte de visite, et cela avait l'ID de la carte. Donc, ajoutez la carte dedans et then.style.color, puis nous allons définir cela égal à l'entrée de l'utilisateur, qui est stocké dans cette variable. Alors collez ça là-dedans avec un point-virgule. Vérifions que ça marche bien. Accédez à la Couleur d'arrière-plan et sélectionnez l'arrière-plan de votre choix. C' est en fait changer la couleur du texte, donc nous avons juste besoin de changer notre style.background. Alors, sauvegardez ça. Puis maintenant, quand nous changeons la couleur, il devrait changer la couleur de fond plutôt que le texte, donc nous y allons. Cette petite erreur aurait dû vous donner un indice sur la façon dont nous allons faire la couleur du texte ensuite. Copiez donc cette fonction, puis collez. La fonction est ChangeText. Tout comme avant, cela peut être une variable appelée TextColor. Ensuite, l'entrée que nous voulons saisir est InputText. Il s'agit donc de saisir la valeur que l'utilisateur a sélectionnée. Encore une fois, document.getElementById, et nous allons sélectionner la carte de visite complète, puis le style doit avoir la propriété de couleur. Cela va être égal à la variable de TextColor. Vérifions ça. La couleur d'arrière-plan fonctionne bien, puis la couleur du texte, ok, bon, tout change. Alors nous allons juste rafraîchir ça. Ok, donc maintenant ces couleurs fonctionnent toutes. Nous allons laisser cette vidéo là avant qu'elle ne devienne trop longue et revenir dans la prochaine vidéo où nous finirons tout le reste du JavaScript pour le projet. 40. Finir le projet: Bienvenue de retour. Voici la dernière vidéo du projet Business Card Designer. Nous allons continuer d'où nous sommes partis dans la dernière vidéo. Nous allons commencer par définir la propriété « Alignement du texte ». Si vous vous souvenez, à l'intérieur de la page d'index, si nous recherchons la section « Alignement du texte », qui est juste là, nous avons collé certaines valeurs et onclick nous avons créé une fonction ou nous allons créer une fonction appelée « TextAlign ». Cela va prendre un paramètre et le paramètre que nous allons utiliser est l'identifiant de ce bouton. Nous définissons l'identifiant pour être le même que la classe Bootstrap de « text-left », « text-center » et « text-right ». Chaque fois que le bouton est cliqué, l'id sera changé à l'une de ces trois valeurs, puis nous pouvons saisir cet identifiant, puis le changer pour être une « classe », puis cela appliquera les styles Bootstrap et alignera le texte en conséquence. Je vais vous montrer comment le faire maintenant dans le fichier JavaScript. Créons une fonction. Cette fonction a été appelée TextAlign. Je vais donner au paramètre un nom de selected_id. Ensuite, à l'intérieur de la fonction, nous allons faire un document.getElementById. Ensuite, nous voulons sélectionner la carte une fois de plus, mais nous voulons ajouter un nom de classe égal au selected_id. J'espère que cela a du sens. Selected_id va extraire l'id de la liaison, puis une fois qu'il a obtenu l'id, comme text-right, vous utiliserez ensuite l'id et le définirez comme un nom de classe. Effectivement, cela ressemblera à ceci. ClassName est égal à droit textuel. C' est une classe Bootstrap, qui fera apparaître tout le texte sur le côté droit, et la même chose pour text-left et text-center. Sauvegardons ça et vérifions que ça marche bien. Texte Aligner au centre, à droite et à gauche. Maintenant, nous devons passer à votre nom, et votre nom avait une fonction appelée PrintName. Ensuite, créons cela maintenant dans le custom.js. Une nouvelle fonction, PrintName. Nous pourrions le faire de la même manière que précédemment avec document.getElementById. L' ID que nous voulons saisir est dans la section de sortie. Nous devons saisir le nom de sortie, puis définir le HTML interne pour être le même que la section d'entrée. InputName. Ensuite, lorsque vous frottez la valeur et enregistrez cela. Maintenant, dans la section du nom d'impression, ajoutons simplement quelque chose à cela. Vous pouvez voir que nous tapons, il est imprimé sur le côté carte de visite. PrintJob est à peu près exactement la même chose aussi. Copions la fonction. Cette fois PrintJob. Le nom de sortie est OutputJob et le nom d'entrée change en InputJob. Puis la section e-mail et téléphone. PrinteMail, prenez le OutputeMail, puis InputeMail.Value. Mais au lieu de simplement imprimer l'e-mail, nous voulons que la chaîne d'e-mail apparaisse juste avant. Il suffit d'ajouter cela avec un deux-points et un espace, puis ajouter à l'entrée que l'utilisateur a entrée dans le formulaire. Ensuite, la même chose pour le numéro de téléphone. Copiez cette fonction. Cette fonction est PrintTelephone. L' élément que nous voulons saisir est OutputTelephone. Le code InnerHTML est InputTelephone. Ensuite, changez l'e-mail dans la chaîne pour être Tel, puis enregistrez cela. Ensuite, rafraîchissons le navigateur et puis nous pouvons ajouter quelques valeurs dans le reste du formulaire et vérifier que tout fonctionne. Société 1. Je vais juste ajouter du texte dans ceux-ci et vérifier que tout fonctionne. Modifiez la couleur d'arrière-plan. Cela fonctionne et la taxe change aussi. Le texte Aligner, tout fonctionne correctement. Votre nom, le titre du poste, l'e-mail fonctionne correctement. Il y a une chaîne que nous allons mettre devant l'e-mail et nous devrions obtenir la même chose pour le numéro de téléphone. Je vais ajouter ça là-dedans. On a la chaîne devant le numéro. Super. C'est tout ça qui marche. Il y a encore une chose à faire, c'est les boutons en bas. Je vais commencer par le formulaire de soumission. Tout ce que je veux faire avec le formulaireSubmit. Tout ce que je veux faire avec le bouton Soumettre est de créer une alerte pour alerter l'utilisateur si certaines valeurs ont été laissées vides ou en d'autres termes, nous pouvons mettre dans les champs requis, puis créer une fonction pour le bouton Effacer pour réinitialiser tous les du formulaire. Commençons par le bouton Soumettre. Créons une fonction appelée FormSubmit. C' est le nom de la fonction que nous avons utilisé dans la page d'index. Si nous faisons défiler vers le bas et ensuite chercher le bouton Soumettre, qui est juste ici, et il y a le bouton FormSubmit, que j'ai mal orthographié, alors FormSubmit et puis créons cela maintenant, donc ça fera un si instruction. Donc « si » et un point d'exclamation, ce qui signifie pas, donc inputName.Value. Ceci vérifie s'il n'y a pas de valeur dans le nom d'entrée. Ensuite, nous devons créer une alerte à l'utilisateur. « Veuillez remplir toutes les sections requises. » Sauve ça. Maintenant, nous avons mis dans le InputName et nous avons vérifié s'il n'y a pas de valeur. Maintenant, si nous ne mettons pas de nom dans les champs de saisie et que nous cliquons sur Soumettre, nous obtiendrons la boîte d'alerte, qui est, « Veuillez remplir toutes les sections requises ». Mais si nous devions avoir un nom à l'intérieur, puis cliquez sur «  Soumettre », nous n'obtenons pas l'alerte apparaissant. Je n'ai utilisé que la section nom comme champ obligatoire. Vous pouvez en mettre autant que vous le souhaitez dans l' instruction « if » pour tester s'il y a une valeur ou si elle est laissée vide. Eh bien, je vais juste le laisser maintenant comme nom et ensuite passer à créer le FormReset. Une nouvelle fonction en bas et nous appellerons ce FormReset. La façon dont je vais actualiser la page est en sélectionnant le window.location.reload et cela effacera toutes les informations à l'intérieur la carte de visite et aussi le formulaire en faisant une actualisation de la page. On sauve ça. Juste pour ajouter quelques informations dans la carte de visite, puis cliquez sur le bouton Effacer et qui devrait recharger la page. Vérifions simplement les erreurs d'orthographe, donc FormReset, puis la page d'index. Ça a juste besoin d'être FormReset. Alors sauvegardez cela et cela devrait résoudre notre problème et rafraîchir. Ajoutez plus d'informations là-dedans. Puis maintenant j'espère que lorsque nous cliquons, Effacer, qui efface le formulaire. C' est ça. C'est la fin de ce projet. J' espère vraiment que vous arriverez à la fin par vous-même ou au moins en complétant une section. N' hésitez pas à personnaliser cela autant que vous le souhaitez. Mais pour l'instant, merci beaucoup, et j'espère que vous avez apprécié le projet. 41. Merci: Donc, une grande félicitations pour être arrivé à la fin de ce cours. J' espère vraiment que vous l'avez apprécié et que vous en avez appris beaucoup. Vous avez couvert beaucoup de choses dans ce cours. Nous avons commencé avec les bases JavaScript et la compréhension choses qui ont des variables, des chaînes et des tableaux. Nous avons également examiné d'autres principes fondamentaux tels que les fonctions JavaScript, la portée et les objets. Ensuite, nous avons passé à regarder les mathématiques et les dates et comment ils sont utilisés en JavaScript. Nous allons ensuite augmenter un peu les choses et nous allons jeter un oeil à contrôle-flux et boucles, qui impliquaient de nombreuses instructions telles que instructions switch et différents types de boucles. Nous vous présentons ensuite le JavaScript et le DOM, et nous avons examiné comment nous pouvons accéder aux éléments d'une page Web et comment nous pouvons les manipuler, et nous avons réalisé divers mini-défis en cours de route pour tester vos compétences et nous espérons vraiment que vous parviendrez à trouver quelque chose de créatif pour le projet final. Alors c'est tout. Donc c'est la fin du cours. Merci beaucoup. Si vous l'avez apprécié, veuillez laisser un avis. Cela aiderait vraiment les autres étudiants, et j'espère que je vous verrai bientôt dans un de mes autres cours. 42. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.