Lancer une fusée : apprendre les bases de JavaScript Basics en s'amusant !

1. Une introduction: Salut, bonjour. m'appelle Rich Armstrong, et j'ai créé des sites Web, des applications et des choses interactives depuis une dizaine d'années. Cette classe consiste à apprendre à écrire du JavaScript de base. Je vais t'apprendre une théorie. Je vais vous apprendre comment JavaScript se rapporte au HTML et au CSS, puis je vais enseigner à partir de l'écrire. Être capable d'écrire du JavaScript vous permet de créer des sites Web, des applications et des jeux interactifs qui sont dynamiques, qui bougent et qui peuvent même penser par eux-mêmes. JavaScripts est super amusant. Lorsque vous les combinez avec HTML et CSS, vous serez en mesure de prendre le dessus du monde. À la fin de cette classe, vous serez une ceinture blanche JavaScript ninja, et aurez une compréhension de base de JavaScript. Vous avez lancé quelques roquettes. Tes amis penseront que tu es incroyable. Tu es maman va te croire du futur, et tu seras en mesure de faire des choses plus interactives. Je croyais vraiment que savoir coder faisait une telle différence dans le monde moderne, surtout si vous êtes un designer, surtout si vous êtes créatif. Je suis vraiment excité de vous apprendre à coder, alors rejoignez-moi et soyez excité. 2. Qu'allons faire ?: Qu' est-ce qu'on va faire ? Qu' est-ce que je vais t'apprendre ? Eh bien, nous allons faire une séquence de lancement de fusée dont Elon Musk serait fier. On va prendre une fusée pour passer de l'arrêt à la cicatrice, peut-être même exploser. Je vais vous emmener à travers les clics de boutons et les animations CSS, et les fonctions , et les variables et si les déclarations vous allez apprendre beaucoup, mais pas trop, votre cerveau n'explosera pas. Je vais vous montrer comment utiliser Sublime Text, je vais vous montrer comment utiliser les outils de développement Google Chrome et comment utiliser le bureau GitHub et comment utiliser les pages GitHub et comment partager votre création avec le reste du monde. Nous commençons petit et facile, puis nous entrons dans les fondamentaux de JavaScript. C' est léger, c'est amusant. Je raconte tout visuellement et je vous fournit des métaphores simples à comprendre. Venez rejoindre ce cours et lançons une fusée ensemble. Oui. 3. Téléchargez ces 3 applications gratuites: Donc, pour commencer à écrire JavaScript, nous avons besoin de trois choses. Le premier est un éditeur de code, utilisera Sublime Text 3. La prochaine application que nous devons télécharger est Google Chrome qui est un navigateur. La troisième application que nous devons télécharger est GitHub Desktop, qui se synchronise avec GitHub en ligne et en utilisant cela, vous pouvez partager votre code et vous pouvez le sauvegarder et le synchroniser. Ouvrez Safari ou Internet Explorer et recherchons Sublime Text 3. Cliquez sur ce lien, puis téléchargez le lien approprié pour votre système d'exploitation. Pour moi, c'est OS X. La prochaine chose que nous devons faire est de rechercher Google Chrome, cliquez sur ce premier lien. Parfois, cette page prend un certain temps à charger et parfois elle change. Il suffit d'obtenir celui pour les ordinateurs personnels et télécharger Chrome, accepte et installer et tôt ou tard Chrome sera l'installation. Le dernier est GitHub Desktop. Recherchez cela, ouvrez ce premier lien, puis cliquez simplement sur le bouton Télécharger GitHub Desktop. Il est disponible pour Mac ou Windows. Ils ont l'air un peu différents, mais ça ne devrait pas trop vous déranger. La prochaine chose que vous devez faire est que vous devez aller sur github.com et vous devez créer un nouveau compte. Inscrivez-vous, si vous n'avez pas obtenu de compte GitHub. Vous choisissez un nom d'utilisateur, entrez votre adresse e-mail et vous créez un mot de passe. Ce qui est vraiment important ici, c'est que vous devez vérifier compte avant de pouvoir réellement commencer à utiliser GitHub Pages. Pour ceux d'entre vous qui en ont déjà un, connectez-vous et entrez vos coordonnées. Tout est prêt, alors connectez-vous. Ce que nous allons faire ici, c'est que nous voulons réellement créer un nouveau projet. C' est ce qu'on appelle un dépôt dans GitHub. Tout ce que je veux faire ici, c'est que vous voulez revenir en arrière et créer un nouveau dépôt, et nous allons appeler ça des fusées JS. Nous pouvons mettre une description des fusées de lancement avec JavaScript. Gardons-le public. Il est toujours utile d'initialiser un référentiel avec un fichier README. D'accord. Créons ce référentiel, et à partir d'ici, vous serez en bonne voie pour commencer. 4. Installez, inscrivez-vous et écrivez quelques JS: Donc, une fois que toutes vos applications ont été téléchargées, vous suffit de faire glisser votre application GitHub Desktop dans le dossier applications. J' en ai déjà un, donc je vais juste le remplacer, fantastique. Votre Google Chrome, vous aurez besoin d'ouvrir parce que c'est un DMG, pas tout à fait sûr de ce qui se passe sur Windows, mais juste faire le processus normal d'installation d'une application. Pour Google Chrome, il vous suffit de le faire glisser directement dans votre dossier Applications. Texte sublime. Double-cliquez sur ce fichier DMG et faites-le glisser dans votre dossier d'applications. Je l'ai déjà. Cool, je vais le remplacer. C' est votre processus d'installation. Vous pouvez ensuite supprimer ces applications. Donc, ce que vous pouvez faire est, vous pouvez aller dans votre Finder, vous pouvez aller dans le dossier applications et vous pouvez le trouver là. La première chose que nous voulons faire est d'ouvrir notre application GitHub Desktop. Donc je l'ai déjà dans mon bar en bas ici. Alors tu l'ouvres. Alors bien sûr, ouvrons ça. Si vous avez déjà des projets dans votre GitHub, cela vous montrera que, hé, il y a un tas de changements si vous avez besoin de changements. Mais ce que nous voulons faire ici, c'est si vous ne vous êtes pas déjà connecté, allez dans vos préférences et vous savez quel est votre nom d'utilisateur et quel est votre mot de passe. Alors connectez-vous. Ensuite, à partir d'ici, vous pouvez réellement aller Clone, donc je veux dire cool, je veux cloner ce js-rocket, cloné js-rocket. Là où je vais mettre ça, je vais le mettre sur mon bureau. Alors je choisis mon bureau, et maintenant ça va dire cool, clonage. Ce que nous devons faire ici, c'est que nous avons réellement besoin de créer une nouvelle branche. Je vais appeler ça GH pages. Je vais cloner à partir du maître, et puis ici nous allons travailler sur cette branche parce qu'alors nous pouvons y accéder en tant que site web en ligne. Créer une branche. Donc, vous verrez que vous avez votre js-fusée et peut-être quelques autres que vous pouvez choisir, mais maintenant vous avez votre dossier js-rocket sur le bureau avec rien. Alors ouvrons js-rocket dans texte sublime et vous verrez qu'il y a un tas de fichiers et de dossiers sur la gauche et ensuite votre carte sera sur la droite. Alors allons Fichier, Nouveau Fichier, et appelons-le index.html. Alors sauvegardons ça. Je vais aller sur mon bureau, enregistrez-le sous index.html. Merci, les batteries de souris sont faibles. Ici. Écrivons juste bonjour js-rocket et orthographions correctement, puis enregistrez. Ce que nous devons faire maintenant est juste vérifier que cela fonctionne, donc nous revenons à notre finder, nous faisons glisser notre fichier index.html dans Google Chrome. Fantastique. Ouvrez ça aussi. Bonjour Js-fusée. Ça marche. Je vais aller sur GitHub Desktop, ça dit, hé, tu as fait quelque chose. Donc tout ce que nous devons faire ici, c'est juste dire que nous avons ajouté notre fichier d'index. Vous pouvez donner une description plus détaillée si vous le souhaitez. Vous vous engagez ensuite à GH Pages. Ce que vous faites, c'est que vous le publiez ensuite. Donc, cela synchronise réellement votre version locale de js-rocket avec la version en ligne de js-rocket. Donc, dans Chrome, ce que nous faisons est que nous devons aller github.com et nous allons nous connecter à notre compte. Le mien est mrra-screencast et mon mot de passe est mon secret. Veuillez vous souvenir de votre mot de passe. Nous voulons ensuite naviguer vers notre dépôt js-rocket, nous voulons aller à la branche master et la changer en branche GH Pages, et puis vous verrez qu'il y a un fichier ici, il dit lire, il dit index.html. Les fichiers qui se trouvent dans votre site Web GitHub doivent être les mêmes que ceux de votre application GitHub Desktop. Vous pouvez voir notre histoire ici. Donc, ce que nous voulons faire maintenant, c'est que nous voulons réellement entrer dans les comptes de ces pages. Donc, ce que nous allons faire est, nous allons aller mrra-screencast et utiliser votre nom d'utilisateur ici. Donc, si vous êtes Bob, utilisez bob.github.io, et ensuite nous allons aller mettre notre projet ici. Donc le dernier que j'ai fait avec un dessin animé ici. Donc ce que nous allons faire ici, c'est que nous allons aller js-rocket, appuyer sur Entrée et nous y allons. Donc, si tu vois ça, ça marche. Si vous ne voyez pas cela, vous devez le synchroniser et vous devez vous assurer que vous travaillez sur la branche de la page GH. La prochaine chose que nous voulons faire est juste d'écrire un peu de JavaScript. Ce que nous faisons ici, c'est que nous ouvrons la balise de script et voyons ce que fait Sublime Text. Ça fait beaucoup de travail pour nous. Il va à la balise de script, est du texte de type en JavaScript et même le fermer pour nous. Ici, nous allons aller console.log bonjour là amis. Alors on va le sauver. Oh, je ne sais pas ce que j'ai fait là-bas. J' essaie de fermer ça. Tu devrais dire « Sauvegarder ». Vous remarquerez que lorsque vous retournerez à GitHub Desktop, il vous dira hey, il y a eu un peu de changement ici. Vous allez juste dire Ajout d'un code ou ajouté quelques JS, Commit to GH-pages. Donc, il valide le changement, puis nous synchronisons. Il en fait la même chose sur notre ordinateur local qu'en ligne. Parfois, la synchronisation peut prendre un certain temps. Nous allons ensuite à Google Chrome, nous naviguons ensuite vers notre projet js-rocket ou repo, nous pouvons ensuite aller à l'onglet commits ici, c'est assez important parfois, et nous pouvons voir qu'il a ajouté quelques JS. Si vous actualisez ici, vous ne verrez peut-être rien de différent, mais si vous cliquez avec le bouton droit de la souris et parfois cela pourrait être en bas, ou parfois cette chose pourrait être sur le côté. Ce qu'on doit faire ici, c'est qu'on doit aller à la console. Si vous avez un message qui dit bonjour là amis, votre JavaScript fonctionne, votre GitHub fonctionne, et vous êtes prêt à rock and roll. Pompé. Oui. 5. Qu'est-ce que le Javascript ?: Qu' est-ce que Javascript exactement ? Eh bien, JavaScript est un langage de programmation vraiment cool et intelligent utilisé principalement sur le web, sur Internet. Javascript aime HTML, il aime CSS, et aime vraiment les humains. Il peut également communiquer avec un serveur, donc je suppose que c'est comme le meilleur ami de tout le monde. Cool. Alors, où l'utilisons-nous ? Nous l'utilisons principalement dans le navigateur, mais nous pouvons l'utiliser dans d'autres endroits aussi. Javascript est également utilisé comme langage de serveur, ce qui signifie que vous avez potentiellement seulement besoin de connaître un seul langage de programmation pour tout faire sur le web, mais ne vous inquiétez pas, nous n'allons pas entrer dans les choses de serveur dans cette classe. Je vais le garder léger, amusant et facile. Alors, que peut faire JavaScript ? Eh bien, JavaScript peut faire beaucoup, il peut compter prêt rapidement, il peut compter jusqu'à 1000 plus vite que vous pouvez, il peut compter jusqu'à un million de chemin plus rapide que n'importe quel humain, c'est incroyable, c'est vraiment bon en maths, il peut faire bouger les choses, ce qui est incroyable, il peut parler au serveur, il peut changer les mots, il peut faire glisser des choses sur l'écran, il peut vous alerter, il peut être programmé pour faire n'importe quoi, et il sait beaucoup, il stocke beaucoup d'informations sur le navigateur et la page Web sur laquelle il se trouve. Vous pouvez à peu près lui demander, genre, quelle est la taille de l'écran ? Ou quel navigateur utilisent-ils ? Ou de quelle couleur est l'arrière-plan ? Ou quelle est l'URL ? Où sommes-nous ? Il en sait beaucoup, ce qui est vraiment cool. 6. Propriétés et méthodes: Qu' est-ce que JavaScript vraiment ? Eh bien, c'est assez simple, en fait. JavaScript est une liste d'objets auxquels il a accès et une liste d'actions que vous pouvez lui demander d'effectuer. Les premiers sont appelés les propriétés. C' est la liste des objets qu'il a trop à, ils sont appelés propriétés. La liste des actions que vous pouvez lui demander d'effectuer, elles sont appelées méthodes. Il y a un tas de propriétés et de méthodes par défaut, puis il y a celles que vous pouvez écrire vous-même et ajouter à JavaScript. Si nous devions voir JavaScript comme une voiture, par exemple. Une voiture aurait des propriétés comme la couleur de peinture, sièges, pneus , moteur, marque, modèle, est allumé, année faite, vitesse actuelle. Alors peut-être qu'il aurait des méthodes comme allumer, changer de vitesse, montrer à quelle vitesse nous allons, ouvrir le capot, ouvrir le toit ouvrant, montrer le voyant d'avertissement. Les propriétés peuvent varier à l'intérieur. Donc la propriété activée aurait pu être oui ou non. La propriété color est un mot, il pourrait être rouge, il pourrait être bleu. La propriété du moteur, eh bien, c'est une chose réelle, c'est un autre objet. Sièges, c'est une liste de sièges, et chacun de ces sièges est un objet. Maintenant, chaque objet a également son propre ensemble de propriétés et de méthodes. La propriété de siège est une liste, et donc il pourrait avoir sa propre propriété de nombre de sièges et avoir sa propre méthode de me donner le siège numéro un et une fois que vous avez le siège numéro un, vous pouvez accéder à ses propriétés et méthodes, comme la couleur, est le fonctionnement de la ceinture de sécurité, et la méthode comme réchauffer les sièges ou incliner. Eh bien, comment écrivez-vous JavaScript ? Donc, pour accéder à toutes ces propriétés et méthodes d'un objet, nous devons utiliser .syntax ou .notation. On peut dire voiture.sièges et ça nous donnerait les sièges. Ou nous pouvons dire car.isturnedon et il dirait oui ou non. On pourrait dire voiture.currentspeed ou voiture.color ou voiture.make ou voiture.turnon. Maintenant, c'est une méthode. Une instruction, nous pourrions dire voiture.popthehood, ou vous pourriez dire voiture.opensunroof. Vous pouvez voir comment ce sont des instructions et les instructions sont différentes parce qu'elles ont les parenthèses après elles. Pour en profiter, il y a une langue que nous pouvons commencer à apprendre, et c'est une langue que je vais commencer à vous enseigner. Faisons-le. 7. Variables: La première chose que je veux faire est d'expliquer ce qu'est une variable. Une variable est quelque chose qui fait référence à autre chose. Si je dis favColor, et je donnerai à mon favColor une valeur de rouge. Vous pouvez voir ici qu'il y a ce mot-clé var suivi d'un espace, suivi d'un nom, suivi d'un signe égal, puis d'une valeur. Ça se termine par le point-virgule qui dit simplement, « Ok, nous avons fini avec cette ligne. » Ce mot-clé var est spécial, vous devez l'épeler de cette façon. Vous devez laisser un espace entre le mot-clé var et le nom de votre variable. Ce nom peut avoir des traits de soulignement, il ne peut tout simplement pas avoir d'espaces et ne peut pas avoir de tirets. Je préfère utiliser CamelCase qui est une petite première lettre, puis chaque fois qu'il y a un autre mot, au lieu d'un espace ou d'un trait de soulignement, j'utilise juste une grande lettre ou une lettre majuscule. Autour du signe égal, vous n'avez pas besoin d'espaces, mais pour moi, cela rend beaucoup plus facile à lire. Ensuite, nous lui attribuons une valeur. La raison pour laquelle nous lui attribuons une valeur est parce que cela peut changer, cela peut changer en vert, il peut changer en bleu, et donc quand nous travaillons dans notre code, nous n'avons pas besoin de garder une trace de ce que cette valeur est réellement, nous avons juste besoin d'avoir la couleur préférée. Je vais copier ceci et vous montrer comment ça marche. Si je dis bleu, ou peut-être que je vais juste copier tout cela, je vais aller à Google Chrome et je vais dire « View », « Developer », « Developer Tools », ou vous pouvez simplement cliquer avec le bouton droit de la souris et dire « Inspecter », puis aller à votre console. Ce que je voudrais faire ici est juste coller ceci et dire var favColor est égal au bleu. Je peux alors dire FavColor et ça me donne du bleu. Maintenant, je peux changer cela et dire que favColor est égal au vert. Alors je peux dire FavColor et ça me donnera du vert. Je n'ai pas besoin de garder une trace de ce JavaScript, personne ne garde une trace de cela. Que pouvons-nous stocker ici ou à quoi pouvons-nous faire référence ? Eh bien, il y a quelques choses que nous pouvons faire référence. Le premier est le texte. En JavaScript et dans la plupart des langages de programmation, vous l'appelez une chaîne. Vous pouvez mettre des guillemets doubles ou vous pouvez mettre des guillemets simples. Sublime Text est vraiment cool parce que s'il n'y a rien là-bas et que vous appuyez sur une citation, il vous donne normalement deux d'entre eux. Si je fais ça, ça vous donne deux, alors vous écrivez votre morceau de texte et ensuite vous terminez avec un point-virgule. Maintenant, un autre type est un tableau. Maintenant, tableau est fondamentalement une liste. Ce que vous pouvez faire ici est de garder n'importe quelle sorte de liste. Vous pouvez garder du texte, vous pouvez garder des nombres, vous pouvez garder des variables, vous pouvez garder des objets, vous pouvez garder des fonctions, vous pouvez garder et stocker et lister ce que vous voulez. Par exemple, je peux dire myArray ou appelons-le mon favColors. Je peux dire bleu, rouge, vert. Donc, cela devient une liste. Je n'ai pas à avoir la couleur préférée numéro 1, couleur préférée numéro 2, couleur préférée numéro 3. Je peux alors dire, var NumoffavColors est égal à 3. Maintenant, c'est un numéro. Vous voyez que je n'ai pas de guillemets autour elle parce que si je le faisais comme ça, ce serait en fait une chaîne maintenant ou du texte, mais nous voulons que ce soit un nombre afin que nous puissions effectuer des opérations mathématiques dessus. Le type d'objet suivant est un booléen. Il s'agit d'une valeur true ou false ou d'une valeur oui/non. Je peux dire vrai ou faux. C' est fondamentalement la même chose que de dire zéro ou un, zéro est faux, un est vrai. Vous pouvez dire vrai en majuscules et dire vrai ou faux en majuscules aussi. Sublime aime juste en minuscules, comme ça. Nous avons ces quatre types de base. Il y en a un autre qui est un objet, qui peut combiner toutes ces choses. Un objet est comme un tableau, mais vous pouvez lui donner un nom pour chaque élément de liste. Je peux dire Prénom, et au lieu de dire égaux comme ça, je fais un deux-points, et ensuite je dirai Rich. Ensuite, je vais virgule, et je peux dire LastName, et je peux dire, Armstrong. Ensuite, je peux dire FavColors, et je vais juste copier ceci, et je peux mettre un tableau là-dedans. Je peux dire, Année 103, et c'est un nombre. Je peux dire, IsMale, vrai. Vous pouvez voir que tout cela est à l'intérieur d'un objet qui est très cool. Cela signifie que vous pouvez accéder à tous ces détails avec la notation de points. Donc RichObject.ismale et ça me donnera vrai. Alors copions ceci et je vais vous montrer comment cela fonctionne dans Google Chrome. Allons juste effacer cette console. Je vais dire des objets riches, et maintenant, je veux dire RichObject.FirstName. Ça dira Rich. C'est très cool parce qu'on n'a pas besoin de le savoir. Je peux maintenant changer cela et dire FirstName est égal à Bob. Maintenant, quand je demanderai RichObject.Prénom, ce sera Bob. Donc, ce sont des variables en un mot. 8. Fonctions: D' accord. Alors, qu'est-ce qu'une fonction ? Maintenant, une fonction est quelque chose qui peut être réutilisé. Donc, c'est un peu comme une variable et peut réellement être stocké dans une variable, ou une variable peut se référer à une fonction. Donc, nous devons dire fonction, lui donner un nom de fonction, WhatisMyFavColor. Donc, c'est quelque chose qui en fait une fonction, ces deux parenthèses, parenthèses, tout ce que vous voulez les appeler. Ensuite, le truc qui se passe à l'intérieur de la fonction ou de la méthode est à l'intérieur de ces deux crochets ou à l'intérieur de cette fermeture. Maintenant, nous pouvons appeler cela fonctionnel ou le taper comme ceci, et alors nous pouvons très facilement le taper comme ceci, ce que je préfère beaucoup parce que cela signifie que cela ne nécessite que variables au lieu de variables et de fonctions. Mais il est légèrement différent car il a ces parenthèses. Alors, quelle est ma couleur préférée ? D'accord. Donc, c'est une question et vous voulez qu'elle rende quelque chose. Donc je vais copier ça et dire quelque chose. D'accord. Maintenant, DoSomething pourrait faire un console.log faire quelque chose. D' accord. Maintenant, si nous copions ceci et nous et maintenant je dis juste Coller, entrons dans Chrome, et maintenant je dis juste Coller, maintenant j'entre, et maintenant je dis faire quelque chose sans les parenthèses, ça va dire, cool, il y a la fonction à laquelle vous faites référence. Mais si je dis DoSomething et que je mets ces parenthèses après ça, ça va le consigner, ça va faire quelque chose. Donc, mettre ces parenthèses après une fonction est vraiment, vraiment important, surtout si vous voulez l'appeler ou seulement si vous voulez l'appeler ou l'appeler. Quelle est ma couleur préférée ? Eh bien, je veux savoir quelle est ma couleur préférée, donc ici on peut dire retour bleu. Donc, si je veux me demander quelle est ma couleur préférée, et je peux mettre tout un tas de code et de logique dans cette fonction pour déterminer ce qu'elle est, je veux qu'elle retourne en bleu. Je ne veux pas qu'il consigner quelque chose ou faire quelque chose, je veux l'avoir. Donc, c'est assez cool parce que c'est un peu comme une fonction intégrée. Je vais juste essayer d'éclaircir ça. Donc, quand vous dites Math.Round et que vous lui donnez une valeur de 4.568, cela va vous donner cinq. Tu ne veux pas que ça fasse quelque chose et ne te le dise pas. Donc, quand je colle WhatismyFavColor, je vais dire, WhatismyFavColor, et ça va dire bleu. Fantastique. Alors que cet autre, ce doSomething, vous verrez qu'il retourne indéfini. Il ne nous rend rien en fait, il fait juste des choses. Il y a donc deux types de fonctions différentes. Vous pouvez également retourner true, vous pouvez retourner des tableaux, vous pouvez retourner tout ce que vous voulez. Mais si vous renvoyez quelque chose, il ne revient pas ou n'arrive à rien d'autre, cela arrête littéralement cette fonction juste là. Donc, si nous copions ceci, effacons simplement cette console, et collez-la, quand je dis WhatisMyFavColor maintenant, ça va dire faux. Tu vois qu'il ne retourne rien d'autre. Donc c'est assez important de se rappeler, que tout ce qui suit ne fonctionne pas réellement. Il y a encore une chose que je dois te montrer sur les fonctions. Donc, si nous voulions faire quelque chose comme connaître la zone, donc à l'intérieur de ces parenthèses, nous pouvons dire, eh bien, largeur et hauteur. Ensuite, nous pouvons dire la largeur de retour multipliée par la hauteur, et vous pouvez voir que je fais des calculs ici. Donc, si nous copions ceci, et effacons la console, collez-la, et je dis zone, pas un nombre. C' est comme, que se passe-t-il ? Si je passe en cinq et quatre, on y va, ça va me donner 20. Donc, nous pouvons le faire à nouveau et dire var fullname égal à la fonction, et ici nous pouvons dire prénom, deuxième nom. Donc, nous pouvons alors retourner prénom plus second, mais nous pouvons mettre un espace entre les deux. Vous pouvez voir ici ce sont aussi presque comme des variables, sauf ce sont des paramètres. Donc, ce prénom, bien que nous ne savons pas ce que c'est, sera combiné avec un second nom avec un espace entre les deux. Donc si nous copions ceci et collons ceci, puis nous disons fullname et nous passons dans Rich, et qu' il veut des cordes maintenant, ça va revenir avec Rich Armstrong. Si on dit Rich et Armstrong comme ça, ça va dire, qu' est-ce qui se passe vraiment ? C' est assez important, mais ce que nous pourrions faire ici est dire, var myName est égal à Richard. Ensuite, nous pouvons dire fullname et nous pouvons copier myName et mettre un chèque parce que cela fait maintenant référence à Richard. Quand on appuie sur Entrée, après que j'ai fait de celui-ci une chaîne, on voit qu'il revient avec Richard Armstrong. D' accord. Ce sont donc des fonctions en un mot. Vous n'avez pas besoin d'en avoir deux, vous pouvez en avoir autant que vous le souhaitez. Parfois, vous n'en avez besoin qu'un pour faire ce que vous devez faire à l'intérieur de la fonction. Rappelez-vous, vous pouvez retourner des choses avec ces fonctions, sorte qu'elles deviennent vraiment utiles, et vous pouvez simplement faire des choses avec eux sans revenir. 9. L'instruction If-else: Maintenant, je veux vous dire ce qu'est une déclaration IF. Fondamentalement, nous pouvons dire si quelque chose, alors faire quelque chose. Si ce qui est entre ces parenthèses est vrai, alors faites quelque chose. Ce que je vais dire, c'est juste alerter le mâle. Maintenant, si c'est vrai, alertez le mâle. Je vais juste copier ça et coller ça, mâle. C' est vrai parce que nous disons explicitement que c'est vrai. Mais maintenant, nous voulons rendre cela un peu plus dynamique. Nous pouvons dire que si le mâle est égal, égal à mâle, alerte mâle. Homme, fantastique. Mais ça peut être un peu obscure pour toi. Pourquoi ne pas utiliser un égal ? Eh bien, parce que l'un est égal attribue une valeur. Ça ne marchera pas. Nous testons si c'est vrai ou faux. C' est une déclaration de comparaison. Nous pouvons dire que des choses comme un est égal à deux, ce que vous direz clairement faux. Super. Bien joué. Mais si on dit qu'on est égal à un, c'est vrai. Ou on peut dire que 10 est plus grand qu'un, vrai. Ou on peut dire que 10 est plus petit qu'un, faux. On peut aussi dire que 10 est plus grand que ou égal à un, ce qui est vrai. Ou on peut dire que 10 est plus petit ou égal à un, faux. Ceux-ci deviennent assez puissants lorsqu'ils sont combinés avec des variables. Nous pouvons dire que le numéro 1 est égal à un nombre, et le numéro 2 est un autre nombre. Nous pouvons le faire avec des chaînes, nous pouvons le faire avec des tableaux, nous pouvons faire n'importe quelle sorte de chose ici. Rappelez-vous, nos fonctions, ils peuvent également retourner vrai ou faux. Ici, nous recherchons une valeur vraie ou fausse. On peut dire que le numéro 1 est plus grand que le numéro 2. Maintenant, si nous copions et collons tout cela avec les variables incluses, rien ne s'est passé parce que le numéro 1 n'est pas plus grand que le numéro 2. Mais si on fait ça, on peut sortir les vars parce qu'ils sont déjà là et dire mâle. Peut-être qu'on ne devrait pas dire mâle, mâle qu'on devrait juste dire, vrai. Ça ne marche pas, mais ça marche. On peut dire, si quelque chose arrive, si c'est vrai, faire les choses ici, ce qui est génial. Mais maintenant, nous pouvons aussi dire, sinon. Si ce n'est pas vrai, alors alertez ceci. On va faire quelque chose ici. Si vous voulez toujours effectuer une action, ce soit vrai ou faux, c'est génial d'utiliser une instruction if-else. Mais maintenant, c'est une valeur par défaut. Avec les chiffres, c'est bon. Mais maintenant, si on voulait dire que le nom 1 est Rich et que le nom 2 est Bob. Si le nom 1 est égal à Rich, alertes true, else-if, nom 2 est égal à Rich, alerte true, sinon, alerte false. Allons juste éclaircir ça. Si le nom 1 est Rich, alerte vraie, et ce que je vais faire ici est vrai 1 et je dis vrai 2, juste pour que nous sachions lequel est lequel. Il suffit de copier ceci et de le coller pour plus de référence. Vrai 1. On s'y attendait. Si nous devons changer le nom 1 en Gareth, et ensuite nous avons dû le relancer, c'est faux. Parce que maintenant le nom 1 est Gareth. Nom 1 être riche, et nom 2 n'est pas riche. Maintenant, nous pouvons dire que le nom 2 est égal à Rich, et voilà. Si nous disons alors, cette déclaration IF à nouveau, c'est vrai. Fantastique. Maintenant, nous pouvons dire si, et Else-si, et autrement. Nous pouvons dire, si c'est vrai, faites-le, else-si, c'est vrai, faites-le, sinon, par défaut faites-le, ce qui est génial. Maintenant, une autre grande chose avec les déclarations IF est que vous pouvez dire et, ou vous pouvez dire ou. Vous pourriez dire que le nom 1 est Rich et que le nom 2 est égal à Bob. Ce que nous faisons ici, c'est que nous disons que cela doit être vrai et que cela doit être vrai. Ce que nous disons avec celui-ci, ceci ou, est assez difficile à retenir, c'est que nous disons que si c'est vrai, ou si c'est vrai, alors continuez. Ce sont des déclarations if-else. 10. Écrivez quelques Javascript de base: Glissons dans le dossier js-rocket vers notre application Sublime Text, et faisons exactement la même chose à Chrome, sauf ouvrons index.html. On y va. C'est à peu près là où nous nous sommes laissés dernière fois et maintenant commençons à écrire du JavaScript. Nous avons la balise de script qui est destinée à tenir dans notre HTML. Vous voyez ce que fait Sublime Text, c'est incroyable. Il complète juste des trucs pour vous. Je vais couper ceci et je vais le mettre juste à l'intérieur de la balise head ici et l'indenter un peu, et donner à la page HTML un titre de JS Rocket. Je vais le sauver après avoir mis bonjour js fusée dans le corps, et nous pouvons le mettre dans une balise h1. Retirons cela, et maintenant, sauvegardons. Là où nous nous sommes arrêté la dernière fois, nous avons inspecté la page et à l'intérieur de notre onglet Console ici, nous pouvons voir qu'il a dit, bonjour là amis. C' est vraiment cool car cela signifie que nous pouvons communiquer et voir ce qui se passe même si l'utilisateur ne le voit pas. Si nous inspectons à nouveau, nous voyons ça, bonjour là amis. C' est parce que vous écrivez console.log. Commençons juste à écrire du JavaScript, et je vais expliquer les choses au fur et à mesure que je vais. Ce que je veux faire, c'est que je veux créer mon propre objet. Je veux dire voiture var. Quand je dis var, c'est une variable, est quelque chose qui peut changer. La voiture est un objet. Maintenant, cet objet, nous allons dire égal, donnez-lui un nom appelé voiture est égal à un objet. C' est une chose très bizarre. Appuyez sur « Entrée » et à l'intérieur, nous allons lui donner quelques propriétés. Je vais dire faire, et je vais dire VW. Alors je vais dire « taper », et je vais dire « Polo ». C' est un Polo VW, et je peux dire couleur : bleu. En fait, j'ai un Polo VW bleu. On y va, on commence par trois propriétés. Ma voiture est un objet. Vous signifiez un objet avec ces accolades, puis vous avez une propriété et une valeur, clé clé. Ce que nous pouvons également faire ici, c'est que vous pouvez voir que ce ne sont que du texte. Ce que nous pouvons alors faire, c'est que nous pouvons dire, quels autres types de propriétés avons-nous ? iTurnedon, vrai, ou on peut dire faux. Vous pouvez voir ici qu'il s'agit d'une valeur oui-non, d'une valeur vraie-fausse. C' est ce qu'on appelle un booléen, un nom si bizarre. Il porte le nom de quelqu'un. L' autre chose que nous pouvons avoir est un nombre, donc NumberOfWheels. C' était un bon sifflet, le nombre de roues, et quatre. Vous pouvez voir que ce ne sont pas du texte, ce sont en fait des nombres. Alors on peut dire des sièges. Ensuite, ici, nous pouvons effectivement avoir le siège 1, siège 2, le siège 3 et le siège 4. Vous pouvez voir que ce sont en fait encore du texte et JavaScript n'est pas précieux sur la façon dont vous disposez cela. Oh, ce n'est pas trop précieux, je dois dire. Mais rendons cela plus facile à lire et mettons-le en retrait. Vous pouvez voir que je mets des virgules après chaque ensemble de paire de valeur clé. C' est vraiment une bonne pratique. C' est ma voiture, pour l'instant, je vais juste sauver ça. Ensuite, je vais aller dans Google Chrome, rafraîchir ici, et je vais voir si la voiture est là. La voiture est là. On peut voir que, c'est la couleur bleue, iTurnedon faux, faire VW, NumberOfWheels quatre, sièges, c'est un tableau. Un tableau est en fait une liste. On y va, type Polo. On a d'autres choses ici. Vous pouvez voir que les sièges ont une propriété de longueur et c'est quatre. On va voiture.sièges. Vous pouvez voir qu'il nous renvoie un tas de sièges ou la liste des sièges. Si j'appuie sur la console et que je vais voiture.seats.length, ça dit quatre. Vous pouvez voir ici que, wow, voiture.seats, c'est une propriété. Ça me donne un tas de trucs. Voiture.Seats.Longueur, je fais en fait notation point, je vais de plus en plus bas, mais la voiture est toujours la chose à laquelle je fais référence. Je ne vais pas faire place, parce que si j'y vais, ça va dire, ah, rabat. Les sièges n'est pas là. Maintenant, créons une méthode. A l'intérieur de cette voiture, on peut dire TurnON, et on va l'appeler une fonction. Maintenant, c'est une méthode et c'est comme ça que vous l'écrivez. On pourrait passer une valeur ici, mais on y arrivera tout de suite. Mais fondamentalement ce que cela fait est que je peux dire, iTurnedon est vrai ou faux. On va dire, copiez ça, et je vais dire ça. Iturnedon est vrai. C'est comme ça que nous l'écrivons. Cette fonction ou cette propriété est en fait une méthode, que toutes les méthodes sont vraiment, mais cette propriété est une fonction, c'est une méthode. On va dire ça, et ça fait référence à la voiture, iTurnedon, qui est ce gars ici, est vrai. Vous voyez que c'est faux, au départ. Sauvons ça. Rafraîchissons. Car.Iturnedon, faux. Maintenant, disons Car.Turnon, et maintenant on ne peut pas faire ça parce que ça va dire, cool, il y a la fonction. C' est ce que c'est. Ce que nous devons faire est de dire voiture.Turnon et puis mettre ces parenthèses après lui pour dire, faire cela. Ça dit, indéfini. Mais c'est parce que ça ne nous rend rien, et je vais vous montrer comment ça rend quelque chose. Mais maintenant ce que nous pouvons faire est de dire car.Iturnedon, c'est vrai. Vous pouvez voir ce qui s'est passé ici. Vous avez fait quelque chose, vous l'avez allumé et il a changé la propriété sans que vous ayez à la changer. Vous pouvez dire que lorsque l'utilisateur clique sur ce bouton, faire quelque chose, changer quelque chose. Un autre exemple de ceci est, écrivons une autre fonction. Disons voler. On pourrait dire Alerte voler. Vous pouvez voir ici que quand on dit voler, ce n'est pas seulement une fonction normale, vous y transmettez quelque chose. Vous verrez ce qui se passe ici maintenant. On dit « Sauver ». Revenons à Google Chrome, rafraîchir, et nous pouvons dire car.Iturnedon, c'est faux. Mais pourquoi ? Eh bien, c'est parce qu'on a rafraîchi la page. Lorsque vous actualisez la page, tout le reste commence dès le début, et nous commençons par false. Ce que j'essayais vraiment de te montrer ici, c'est Car.fly. Parce que c'est une méthode et que nous voulions exécuter cette méthode, nous mettons ces parenthèses après. Il vient avec cette petite boîte irritante qui dit, voler. Ce qui est vraiment cool, c'est qu'on peut dire, eh bien, on peut faire ça ? Essayons-le, et créons une nouvelle propriété, qui est une méthode appelée switch. Switch est un mot réservé en fait. Allons SwitchCar, fonction, parenthèses, et accolades, et là nous allons mettre un paramètre, iSon. On a dit SwitchCar. Nous pouvons dire que si iSon, nous copions cela, est égal à vrai. Si nous utilisons juste un égal, nous disons en fait iSon est vrai, ce qui ne l'est pas. Nous disons que si iSon est vrai, alors nous posons une question, alors nous allons faire quelque chose. Je vais juste copier ça ici, et ensuite je dirai autre, faux. Si je vais dire SwitchCar, je vais dire ceci, iSon est vrai, et dire que iTurneDon est vrai, sinon, si ce n'est pas faux, et je vais dire que iTurnedon est égal à faux. C' est un peu de logique pour vous. Vous pouvez commencer à faire différentes choses en fonction de ce que vous traversez. Allons sauver. Allons juste console.log, et ici je vais dire tourner voiture. Je vais mettre un espace ici, puis je dirai plus iSon. Ce que cela fait, c'est que ça va, je vais enregistrer « tour voiture » et puis je vais ajouter sur iSon à ce morceau de texte. Sauvons ça. Google Chrome pour rafraîchir et allons-y la voiture.Iturnedon est faux. Je peux dire voiture.Switchcar et on peut dire vrai. Tournez la voiture, c'est vrai. Maintenant, on peut dire voiture iTurnedon et c'est vrai. On peut dire voiture.Switchcar, faux Turn voiture, faux. Ensuite, on dit voiture iTurnedon, c'est faux. Là, nous pouvons réellement mettre à travers un tas d'arguments et vous pouvez voir chaque fois que la console va tourner la voiture faux ou tourner la voiture vrai, il va et changer ce qu'il fait en fonction de ce que nous analysons. Nous pouvons analyser vrai ou faux ou nous pourrions analyser un tas d'autres choses, mais nous allons, si c'est vrai, faire ça, sinon, faire ça. C' est vraiment puissant. Vous pouvez commencer à mettre différentes choses à une fonction et obtenir différentes choses en fonction de ce que vous mettez dans. Nous n'avons pas beaucoup de JavaScript ici. Je n'ai pas beaucoup de HTML. Nous avons un peu de JavaScript ici. Si cela devient vraiment lourde, beaucoup et beaucoup de HTML, nous ne voulons pas avoir à écrire notre JavaScript ici. La meilleure chose qu'on puisse faire est littéralement de couper tout ça. Ensuite, au lieu d'avoir tout cela, nous allons littéralement source égale et puis ici nous allons js, script.js et sauvegardons cela. Ce que nous devons faire ici, dans notre finder, c'est que nous devons créer un nouveau dossier appelé js. Dans Sublime Text, nous devons aller Fichier, Nouveau Fichier, et coller. Remettons-le ici. Ensuite, s'il ne le ramasse pas automatiquement, ce qu'il ne le fera probablement pas parce qu'il est sans titre, vous pouvez toujours le changer en JavaScript. Vous pouvez voir que les couleurs reviennent. Enregistrez-le maintenant et enregistrez-le sous script.js. Enregistrer et puis voyons si cela fonctionne. Bonjour, amis. Voiture iTurnedon faux, SwitchCar à vrai. Fantastique iTurnedon vrai. Maintenant, nous pouvons également utiliser voiture TurnON et cela peut toujours être vrai. Là, vous l'avez, nous avons maintenant notre JavaScript dans un fichier séparé. Tout comme nous avons mis nos images dans un fichier séparé, tout comme nous avons mis notre CSS dans un fichier séparé, désolé, dossiers séparés. Nous avons notre JavaScript dans un dossier séparé, je suppose et dans un fichier séparé. Maintenant, nous avons notre HTML. Nous référençons nos JavaScript ici. Si nous voulions référencer notre CSS, nous dirions, cool, allons-y « css/style.css » et vous pouvez voir que c'est légèrement différent. Votre balise de script JavaScript ressemble un peu à une balise d'image et votre balise CSS semble vraiment différente et elle a ce href, mais c'est à peu près la même chose. Nous n'avons pas de dossier CSS pour le moment, alors créons un. Dans votre dossier CSS permet de créer un nouveau fichier. On va juste dire corps et dire couleur de fond, gris. Enregistrez ceci dans CSS comme style.css. Si jamais vous obtenez une de ces fenêtres contextuelles, dites simplement annuler. N' achetez pas Sublime Text. J' ai une licence mais pas sur le profil de diffusion d'écran. Enregistrez-le et index.html, et sauvegardons celui-ci. Ensuite, vous revenez à Google Chrome, actualisez, et maintenant vous avez CSS fonctionnant et JavaScript fonctionnant. Mais maintenant, je veux une interaction de l'utilisateur. N' oubliez pas que l'utilisateur ne sera pas en mesure d'accéder à tout cela via sa console. Amusons-nous un peu maintenant. Si nous créons un lien ici et laissons définir son href sur hachage, et je vais vous montrer pourquoi c'est important. Cliquez sur Moi, Fichier Enregistrer. Actualiser. Si nous allons Cliquez sur moi, vous pouvez voir qu'il met juste ce hachage sur. Il ne rafraîchit pas toute la page. C' est vraiment important et cela peut vous sauver beaucoup de maux de tête. La prochaine chose que nous voulons faire est d'aller à href. Cool, c'est ça. Mais qu'en est-il du clic ? Faisons quelque chose. On peut peut-être dire « voiture.fly ». C' est assez intéressant, nous exécutons JavaScript en HTML. Attribut onclick. Qu' est-ce que c'est que ça ? Eh bien, il y en a un tas qui se rapportent à JavaScript. Sauvons ça. Voyons si ça marche. Cliquez sur Moi. C' est fondamentalement JavaScripts. Vous pouvez à peu près mettre en place un site entier comme celui-ci. Vous avez votre script, qui a une voiture et il a cette méthode de mouche. Quand vous l'appelez, il alerte voler. Maintenant ce que nous pouvons faire aussi bien que nous pouvons dire, SwitchCar à quelque chose. Peut-être qu'on n'a pas de voiture pour voler, on peut dire, « SwitchCar, c'est vrai. » On peut l'allumer. Sauvegarde. Retournons ici. Maintenant, si nous voyons est la voiture TurneDon faux, Cliquez sur moi, Car iTurnedon, vrai. Maintenant, vous pouvez voir que lorsque vous interagissez sur l'interface, choses commencent à changer là où vous ne pouvez pas le voir. Vous pouvez faire apparaître les choses, vous pouvez changer les couleurs, vous pouvez animer les choses. Amusez-vous ici et essayez des choses, des expériences. C' est une façon vraiment agréable de faire les choses. Vous pouvez même écrire des choses pas avec des points de voiture. Vous pouvez écrire quelque chose comme var et vous pouvez simplement faire une fonction comme SayMyName est égal à la fonction et ici vous pouvez dire nom et vous pouvez dire console ou peut-être que vous voulez dire, alerte, « Mon nom est plus nom. » Enregistrer le fichier. Ce qui est vraiment important pour n'importe quel texte et en JavaScript, nous les appelons une chaîne, nous utilisons des virgules inversées, donc des guillemets doubles ou des guillemets simples. Assurez-vous qu'ils sont les mêmes des deux côtés. SaymyName. Si nous copions ça et le mettons ici, SayMyName et moi mettrons « Rich » là-dedans. Fais juste attention ici. Si vous utilisez des guillemets doubles ici, utilisez des guillemets simples ici, si vous utilisez des guillemets simples ici, utilisez des guillemets doubles ici. Sauvegardez ça. Cliquez sur Moi. Je m'appelle Rich. On y va. Amuse-toi bien, fais des trucs incroyables. Mais maintenant, si vous voulez partager cela avec vos amis, et je vous encourage vraiment à partager dans la galerie de projets, juste pour montrer ce que vous avez fait et vous pouvez également poser des questions. Si les choses ne fonctionnent pas, postez-le, mettez-le sur GitHub, postez un lien et dites : « Rich, je suis coincé, ça ne marche pas. » Ensuite, je peux entrer ici et dire, « On dirait qu'il y a des erreurs. » Je peux regarder votre code et je peux dire, « Cela ne fonctionne pas. » D' autres peuvent aussi le faire. Dans le bureau GitHub, il suffit de valider vos modifications, disons, « Des trucs de voiture se sont produits. » S' engager dans gh-pages. S' assure qu'il est sur les pages gh-pages et non sur les pages gh-master. Cool. Ensuite, vous synchronisez. Pendant que c'est la synchronisation, allons sur github.com. Ici, nous voulons juste naviguer vers notre dépôt de fusée JS et regarder nos commits. Allez à la branche gh-pages. a fait arriver des trucs de voiture. Ouvrons un nouvel onglet, et nous allons aller à votre nom d'écran ou à votre nom d'utilisateur.github.io/js-rocket. Vous pouvez voir que les choses sont changées. Cliquez sur Moi, je m'appelle Rich. Si vous inspectez ici et allez à votre console, vous pouvez aller en voiture. Si vous appuyez sur Entrée, vous verrez un tas de choses que votre voiture peut faire. Fantastique. Partagez vos projets. 11. Commencez à tester CSS et JS !: Oui. Mais Rich, je ne veux pas juste avoir du texte à venir et apparaître et du texte dans la console. Je veux qu'il arrive des trucs cool. Laisse-moi te montrer des trucs cool alors. Onclick, disons DoCoolStuff. Et ça ? Ensuite, nous allons mettre un div, et il va avoir une classe de cool. À l'intérieur, il va y avoir des textos comme : « Bonjour, je suis cool. » Mettons ça en retrait. Maintenant, ce que vous allez voir ce qui se passe ici, assurez-vous que vous êtes sur votre hôte local, c'est que lorsque vous dites cliquer sur moi, il est dit, « Quelque chose ne fonctionne pas ». C' est vraiment cool d'avoir votre console ouverte car elle vous indique quand il y a des erreurs. Il peut également vous dire une erreur. Si vous cliquez là, et il dira, « C'est là que l'erreur est, s'il vous plaît aidez-moi. » Bonjour, je suis cool ! Super. Ce que nous voulons faire ici, c'est que nous voulons juste styler un peu cet élément cool. Je vais juste copier ça, j'ai besoin de le coiffer. Je vais lui donner une largeur de 100 pixels. Je vais lui donner une hauteur de 100 pixels, puis je vais lui donner une couleur de fond de vert. Alors ce que je vais faire, c'est que je vais dire .cool.red, couleur de fond rouge, puis je vais définir une transition. Laissez taper celui-là. Transition de la couleur de fond, je vais dire, faisons 1 000 millisecondes. Eh bien, peut-être juste une seconde. Sauvons ça. Maintenant ce que nous pouvons voir se passer ici, c'est cool, c'est vert. Mais si vous inspectez ce type, et que vous le faites, si je dis rouge. Tu as vu ça ? Eh bien, il y a des trucs cool qui se passent là-bas. Je vais juste aller à la pomme Zed et à la pomme changer de classe. Si je remets ça à cool, tu diras qu'il change en vert. C' est ce qu'on va faire. Je vais cliquer sur le bouton « Cliquez sur moi » faire maintenant. Il y a quelques façons de le faire. L' une des façons les plus simples est d'aller et de lui donner un identifiant de quelque chose d'unique, et nous allons juste l'appeler cool, puis Enregistrer. Je vais copier ça. Puis à l'intérieur, je vais dire var. Comment j'ai appelé ça ? DoCoolStuff, et ça va être une fonction. Par ici, je vais dire document.getElementById. Je vais mettre ça là-dedans. Le document est votre chose principale, comme la fenêtre, le document. Je pense que c'est plus principal, ou peut-être que ce n'est pas le cas. Mais ça n'a pas d'importance pour l'instant. Depuis un document getElementById.cool, et maintenant nous allons changer le nom de la classe. Un document.getElementById.ClassName est égal à cool et rouge, rouge froid. On peut changer l'emballage de ça, je pense que quelque part. Sublime Text, modifions les paramètres Par défaut. Je vais juste chercher de la pellicule. Word_wrap auto, Fichiers, Préférences, Paramétrage utilisateur, Word_ wrap. Vous pouvez voir que même dans Sublime, c'est JavaScript, vérifiez ceci. Word_wrap, true, Enregistrer cela. ClassName est égal au rouge froid. Sauvegardons ceci, et nous pouvons fermer les valeurs par défaut. Fantastique. Allons dans Google Chrome, Actualiser, Cliquez sur moi. Whoa, tu as vu ça ? Les choses sont devenées réelles. C' est vraiment cool. Tu peux faire des trucs cool maintenant. Quelques autres choses que j'aimerais juste vous montrer, c'est d'y aller, si vous voulez faire un commentaire, c'est comme ça que vous le faites. Si vous voulez le faire sur plusieurs lignes, vous le faites comme ça. Tout ce qui se trouve entre ici est commenté, le navigateur quand vous le regardez. Mais c'est très utile quand on dit quelque chose comme ça. Cette fonction le fait. Lorsque vous dites document.getElementById cool, le className. Vous pouvez juste dire comme changer le nom de la classe. C' est vous faire des commentaires. Ils sont plutôt gentils. Ce qui serait cool, c'est de le changer. Maintenant fais des trucs cool. Ce que nous pouvons faire, c'est que nous pouvons dire var currentClassName est égal à cela. Nous ne l'obtenons pas vraiment, le ClassName. Nous pouvons dire si currentClassName est égal à cool. Ensuite, nous pouvons dire, et nous allons le rendre rouge cool, ou nous pouvons dire autre espace, et juste le nommer cool. Fermons ceci, Fichier, Enregistrer. S' il est frais, change en rouge frais. Si ce n'est pas le cas, changez-le pour refroidir. La façon dont il fait la transition est sa couleur d'arrière-plan de transition. Nous pouvons changer cela en deux secondes, et quand vous l'ajoutez, c' est la transition. Super cool. Rafraîchissons, cliquez sur moi. Fantastique. Ça change en rouge. Cliquez à nouveau sur moi, est-ce que ça a changé ? Non, ça ne l'a pas fait. Je me demande pourquoi ça ne change pas. On y va. On a des déclarations « if else », mais on l'a en bas, on l'envoie juste au rouge de toute façon. Je vais juste enlever ça. Sauvegardons à nouveau. Actualiser, cliquez sur moi. Va au rouge, super. Cliquez sur Me, redevient vert, et vous pouvez voir ce qui se passe ici. Le nom de la classe est en train de changer. Maintenant, vous pouvez changer les classes avec JavaScript auquel nous sommes, et cette clause peut simplement faire des quantités incroyables de choses. Il peut changer de taille, il peut changer votre capacité, il peut tourner. Ça peut faire des choses dingues. Vous allez de gauche à droite. Il peut s'afficher, puis il peut se cacher. C' est juste ridicule. Il suffit de vérifier ça. On peut dire, ok cool. Mettons un affichage de rien. Cool. Bloc d'affichage. Cool. Sauvons ça. Voyons ce qui se passe. Il est parti. C'est là. Il est parti. C'est là. C'est plutôt cool. Vous pouvez voir qu'il ne fait pas de transition, et c'est parce qu'il affiche simplement le bloc et n'affiche aucun. Ce que nous pouvons faire, c'est que nous pouvons définir la visibilité sur caché, puis la visibilité sur visible. Sauvons ça, et puis plutôt cool. C' est comme ça que tu peux faire des trucs assez cool. Mais ensuite, il est temps de construire notre fusée, et notre séquence de lancement de fusée. Je suis excité. 12. La planification d'abord :): Ce que j'aimerais faire, c'est faire un peu de planification. Je veux faire une séquence de lancement de fusée avec JavaScript. Fondamentalement, je veux que la fusée aille partir de là quand l'utilisateur clique sur le bouton, lance cette fusée en l'air, et il obtient un peu de flammes en dessous et ça va. Donc, ce que je fais est de créer comme un peu de storyboard. Fondamentalement, commencez ici, les fusées à droite et l'interface à gauche, puis ils cliquent sur « Go » et puis il commence à compter à rebours. Il existe un lien d'abandon ou un bouton d'abandon pour ramener l'utilisateur à la première étape. La fusée est encore assez stationnaire. Ensuite, il arrive à zéro et il dit « décollage ». Les roquettes se mettent sous les flammes et commencent à décoller, et à un moment donné, on dit : « Bravo. et m'offre une chance de le refaire. La fusée sur cette étape est en croisière, elle est hors de l'atmosphère. Ça va si bien. Il n'y a aucune chance d'échec. Mais entre cette étape, quelque chose pourrait mal tourner. Il pourrait y avoir une explosion, il pourrait y avoir toutes sortes de choses qui se passent. Encore une fois, nous devons le refaire. Donc ce bouton nous ramènera alors comme avec celui-ci tout le chemin pour recommencer à le faire. Très bien et c'est mon plan. 13. Écrivons les codes HTML et CSS de base pour notre fusée: Maintenant que nous savons comment nous voulons que notre séquence de lancement de fusée se déroule, ouvrons le projet et faites-le glisser dans un texte sublime. Maintenant, ce que je vais faire est de créer un nouveau fichier, ou Fichier Nouveau, puis je vais l'enregistrer sous rocket.html. Je vais l'enregistrer dans le dossier JS-Rocket. Rocket.html, et ils vont rapidement taper du HTML ici. Fantastique. Ensuite, nous disons séquence de lancement de fusée. J' espère que c'est comme ça que vous épelez la séquence. Mais ce n'est pas ce qu'on fait ici. Nous ne faisons pas de leçon d'orthographe, nous faisons une classe JavaScript. Maintenant, ce que je vais faire ici, c'est que je vais commencer à écrire mon HTML pour cette séquence de fusée. J' ai en gros deux divs. L' un est à gauche, l'autre à droite. Je vais appeler celui-là à gauche, et je vais appeler le prochain à droite. Donnons à celui-ci un peu d'espace aussi. Ensuite, la gauche va être différentes quantités de divs différents, et à droite va être une fusée et peut-être un peu de terrain. Ce qu'on va faire, c'est dire, allons diviser avec une classe de fusées. Ensuite, par ici, nous allons dire div avec une classe de state1. Je vais fermer cette div. Maintenant à l'intérieur, je vais lui donner une rubrique 1, et dire JS Rocket Launch. Ensuite, nous allons avoir un bouton, href, dites Launch. Je vais lui donner une classe de bouton, et ce que je vais faire ici, c'est que je vais dire sur le compte à rebours de démarrage de clic . On y va. Nous avons notre premier état 1, et voyons à quoi ça ressemble. Je vais enregistrer cela, et je vais ouvrir fusée HTML à l'intérieur de Google Chrome, cliquez sur Lancer. Ouvrons notre console. C' est assez agréable de l'avoir en bas, parfois sur le côté, c'est génial aussi. Mais il ne commence pas à compter sur nous. C'est bon. Je vais juste commencer à coiffer cette page. J' ai ma gauche, j'ai ma droite, c'est là que ma fusée va être, c'est là que mon interface va être. D' accord. À l'intérieur de mon CSS, j'ai besoin de créer un dossier CSS, donc je vais définir mon href comme lien vers CSS/rocket.css. Enregistrez ceci, et dans mon CSS, je vais dire « Fichier ». Nouveau fichier, et allons juste à gauche. Je vais enregistrer ce rocket.css. Point à droite. Alors à quoi va ressembler le bouton ? Alors à quoi ressemblera l'autre A ? Nous n'avons pas d'autres As, mais nous savons qu'ils arrivent. Ce que je veux faire, c'est, à gauche, que je veux définir cette position pour être corrigée. Corrigé, c'est génial. Je vais te montrer ce que ça fait. Je vais définir la couleur de fond sur, laissez-moi chercher une couleur de fond vraiment cool. Arrière-plan HTML. Mettons-le en aigue-marine. Position fixe, et je vais lui donner une largeur de 50 pour cent et je vais dire hauteur, je veux qu'il soit 100 pour cent. Alors je vais dire « top zéro », « left zero ». Cela signifie que cela va être 50 pour cent de la largeur de la fenêtre de mon navigateur, hauteur va être 100 pour cent. Le sommet sera zéro et la gauche sera zéro aussi. Sauvons ça, voyons ce qui se passe. Fantastique. On y va. Vous voyez, je ne peux pas vraiment faire défiler autant, et c'est ce qui arrive quand vous définissez quelque chose à réparer. Donc je vais juste copier ceci et le coller dans le bon. Au lieu de la gauche, je vais mettre la droite à zéro donc ça va rester à droite. Je veux une autre couleur pour celle-là, alors laissez-moi changer cette couleur. Je veux un bleu, alors peut-être que le signe marchera. bleu d'Alice a l'air sympa. Donc je vais changer ça en bleu Alice et me rafraîchir. Vous voyez que j'ai mes deux panneaux maintenant, gauche, droite, interface ici, fusée ici. La prochaine que je veux faire est, coiffons mes fusées. Je vais mettre ce gars en position fixe à, peut-être que je devrais dire position absolue. Maintenant absolu est vraiment cool parce que ça va, où est mon parent ? Alors la fusée, qui est là, ira, où sont mes parents ? Et ça va bien, c'est mon parent. Puis ça se passe, cool, je me positionnerai en fonction de l'endroit où se trouve ce type. C' est la mauvaise feuille de style. Ma fusée est en position absolue, je vais mettre sa gauche à 50 pour cent et je vais mettre son fond à 20 pixels. Alors ce que je vais faire, c'est que je vais lui donner une largeur de 20 pixels et une hauteur de 100 pixels avec une couleur de fond de bleu. Parce que les fusées fraîches sont bleues. Rafraîchissez, et voilà ma fusée. Ce petit crayon bleu. Ce que je veux faire, c'est en fait que je veux mettre du terrain là-dessus. Va juste la classe div de terrain, et je vais sauver ça, et puis ma feuille de style, et je vais mettre un peu de terre. Je dirai que la couleur de fond est verte, et dire la position absolue, et puis je vais dire zéro inférieur et zéro gauche, et la largeur je vais dire 100 pour cent, et la hauteur, 20 pixels. Je vais sauver ça. Voyons à quoi ça ressemble. Fantastique. Maintenant, nous avons une fusée lançable. Nous pouvons le faire paraître encore mieux en ce moment, mais c'est une leçon JavaScript, la classe JavaScript. Donc nous ne sommes pas trop préoccupés par ce que ça a l'air, mais nous pouvons le rendre plutôt cool tout de suite. D' accord. Maintenant, ce que je veux faire, c'est les fusées, et une fois que vous ajoutez une clause, je veux dire rockets.flying, et je veux dire en bas, 1000 pixels. Je vais alors mettre une transition sur cela de fond, disons 1000 millisecondes. On y va. Je vais le sauver, donc Rocket.voler. Alors on pourra inspecter ça ici. J' ai le sol, les fusées. Maintenant, si nous mettons ce vol, que se passe-t-il, rien. C' est parce que nous ne nous sommes pas rafraîchis. Alors actualisons et refaisons-le. Volant. Tu as vu cette fusée voler ? Nous devrons peut-être ralentir un peu ça. Alors mettons un zéro supplémentaire là-dedans, File Save. Volant. On y va. La fusée est en train de tourner. 14. Ajoutons le Javascript pour notre fusée: Donc ce qu'on va faire maintenant, c'est qu'on doit mettre différents états pour faire voler cette fusée. Nous allons appuyer sur Launch, nous voulons le compte à rebours, quand le compte à rebours est terminé, nous voulons dire « décoller », nous voulons que la fusée continue à monter et ensuite nous voulons dire, bien joué, ou nous voulons dire échec et essayez à nouveau. Donnons un coup d'envoi à ça. Donc nous avons nos cinq états que nous devons mettre ici. Je vais juste copier et coller ceci et juste dire state2. Je vais lui donner un identifiant de compte à rebours et ça va commencer à 10 heures. Ensuite, nous allons dire bouton, StartCountdown et nous pouvons dire Abandonner. On peut voir à quoi ça ressemble. Semble assez similaire, state1, state2 ils viennent en dessous de l'autre donc si nous regardons à gauche ici state1, state2 ils viennent en dessous de l'autre. Donc on en veut un autre, ça s'appelle State3. Nous ne voulons pas compter à rebours ce que nous voulons maintenant, c'est que nous voulons dire « Lifting Off ». Il n'y aura pas de boutons là-bas. Le prochain que nous voulons, c'est que nous voulons un État4 et cela va dire : Bien joué sans assurance. Au lieu d'abandonner, nous allons dire, faites-le encore. Alors notre dernier, il devrait être état5. Je vais te dire, Oh non, fais-le encore, fantastique. Alors je veux juste dire « Réessayez ici ». Sauvegardons cette commande S, contrôle S, ou vous allez simplement dans Fichier, Enregistrer. Maintenant, ce que nous avons ici, c'est que nous avons un tas d'états différents, mais je veux que chacun soit là quand il doit y avoir. Pas tous là à la fois. Donc ce que je vais faire est ici, je vais dire .state1 et je vais juste copier ça quelques fois 2, 3, 4, 5. Je vais dire « display » : « none ». Donc ce que ça va faire, c'est que ça va juste les cacher jusqu'à ce que j'en ai besoin. Donc File, Save et on y va. Ils sont partis jusqu'à ce que j'en ai besoin. Alors ce que je peux faire ici, c'est que je peux dire quand la classe du corps change en autre chose, alors on peut commencer à le changer. Lorsque le corps va body.state1, nous pouvons alors dire state1, display, block. Je vais juste écrire sur un seul, ce sera plus facile. Utilisation comme state2, state3, state4, state5. Nous avons donc l'état 2, l'état 3, l'état 4, l'état 5. 2, 3, 4, 5. Sinon, nous pouvons dire tous ces en fait juste afficher : aucun. Affichage : aucun, affichage : aucun, affichage : aucun, affichage : aucun. Au lieu d'avoir un affichage interactif : aucun tant de fois je vais juste y aller, tous s'affichent : aucun. Alors conservez-le là. Voyons ce qui se passe. n'y a rien là-bas qui va bien. Ce que nous devons faire, c'est que nous devons changer notre classe corporelle en état 1. On sauve ça, on se rafraîchit, et quelque chose s'est cassé. Ce qui s'est passé ici, c'est que state1 est display : none. Donc, c'est maintenant problématique. Ce que nous devons faire, c'est que nous devons réfléchir à cela, comment pouvons-nous réellement changer cela ? On peut changer ça en état de corps1. On peut copier ça. Nous devrions sauver ceci et changer cet état de corps1. Fichier, Enregistrer. Les choses reviennent comme elles s'éloignent. Maintenant, on peut y aller. Classe de l'état du corps 2. On y va, l'état du corps-3, ascenseur, l'état du corps-4 fantastique, l'état du corps-5. C' est génial. Mais maintenant, je pense, wow. Ces états donc que se passe-t-il si ces clics peuvent simplement changer un état ? Donc, je peux aller à ChangeState à deux, ça sonne plutôt bien. Le bouton d'abandon changeState retour à un, cool. Fais-le à nouveau, ChangeState retour à un parce que nous allons revenir à l'état1. Ensuite, faites-le à nouveau, ChangeState retour à un. Mais comment pouvons-nous en arriver à trois distincts ? Eh bien, nous n'avons pas encore écrit de JavaScript. Donc, vous verrez ici rappelez-vous que vous avez une console ChangeState n'est pas défini. Nous n'avons même pas de JavaScripts inséré ici. Mettons du JavaScript ici. Scénario, fantastique. Quelle sera la source ? La source sera js/rocket.js, fantastique. Maintenant, sur notre dossier JavaScript, passons à nouveau, gardons ceci comme rocket.js fantastique. Alors maintenant on peut, je vais fermer ça. Nous pouvons commencer à interagir avec les choses alors faisons quelques trucs JavaScript rapides. Nous pouvons aller var ChangeState est une fonction. Alors on peut dire, état. Qu' est-ce qu'on va faire ici ? Je vais juste sauver ça, mais maintenant je ne sais pas comment faire ça. Je veux aller et changer la classe de corps à ce que je vais dire, cherchons ceci, JavaScript comment changer la classe de corps. Voyons cela, document.body.ClassName est égal à quoi que ce soit. Cool. Je vais juste copier ceci, et je vais aller ici et le coller, document.body.ClassName est égal à body-state1. Je vais faire une pause à travers les chiffres. Si je vais copier ça, et je vais dire, « Cool, changeons-le en état corporel plus état. » On y va. Voyons si ça marche. Donc Fichier, Enregistrer, Actualiser ici, Lancer, voilà. Ça a changé de l'état. Abandonnez, revenez à un, Lancer. Fantastique. On a des trucs qui se passent. Ensuite, comment sommes-nous passés du compte à rebours au compte à rebours ? Faisons ça. Si l'état est égal à 2, nous allons commencer à compter à rebours. La façon dont on fait ça c'est qu'on a l'identifiant du compte à rebours, donc je vais juste copier ça. Je vais dire, document.getElementsById ('compte à rebours') .innerHTML. Ça n'a pas l'air droit. Ce que je peux faire ici juste pour tester, c'est que je vais copier ceci, et aller ici et je vais coller ça ('compte à rebours') .innerHTML. On y va. Je ne sais pas pourquoi Sublime ne l'a pas ramassé. InnerHTML est égal, et je lance une fonction peut-être mais c'est en fait juste une propriété, et nous allons dire, neuf. Sauvegardons ceci, et voyons si ça marche. Nous Rafraîchissons ici, nous appuyons sur « Launch », il va à neuf. Mais je veux vraiment compter à rebours, donc ce que je vais faire, c'est que je vais créer un minuteur ; var minuteur est égal à null. Je vais juste le mettre à null, ce qui ne signifie rien d'entre-temps, juste pour que je sache que j'ai une minuterie ici. Donc, je vais copier ceci et puis je vais dire que timeout est égal à setInterval, et puis je vais mettre une fonction ici. On dira aller toutes les 1000 millisecondes. Ce que c'est, c'est une minuterie. Dans un intervalle donné, 1 000 millisecondes, il exécute une fonction. Il passe essentiellement dans les états ou en passant le paramètre, sauf que je passe dans une fonction entière et je dis, faites cela toutes les 1000 millisecondes, ce qui est une seconde. Ensuite, je vais dire document.getElementById innerHTML égal, et maintenant que vais-je faire ? Maintenant, je vais dire que var CountDownNumber est égal à 10. Je dirai égal à CountdownNumber. Ensuite, nous dirons que CountDownNumber est égal à CountDownNumber moins 1. Ça veut dire que la prochaine fois qu' il sera exécuté, ce sera un de moins. Voyons si cela fonctionne. On se rafraîchit ici, Launch. On y va 10, 9, 8, 7. Vous voyez qu'il y a un peu de retard, mais c'est bon. Ensuite, il va en moins. On va régler ça ensuite. Ce que j'aimerais faire ici, c'est d'y aller, si CountDownNumber est plus petit ou égal à zéro, et alors vous allez dire ClearInterval. Je vais arrêter la minuterie. Je vais alors dire ChangeState à trois. Mais maintenant, aussi, peut-être que je ne devrais pas mettre le ClearInterval ici, car que se passe-t-il si nous voulons importer le minuteur ? Ce que je vais faire, c'est que je vais mettre la minuterie ici. S' il y a un intervalle sur la minuterie, il va l'effacer. Alors je vais aller autrement si l'état est égal, égal à trois, faire autre chose. Mais voyons si cela fonctionne. Eh bien, c'est bon à 79 déjà, prendre du temps pour expliquer ça. On cliquerait sur « Lancer », 8, 7, 6 , 5, 4, 3, 2, 1, décoller. Cool. Donc ça marche. Mes fusées ne montent pas, alors nous allons devoir les changer [inaudible] ou je peux, donc Rocket.voler. Peut-être que ce que nous devons faire est de dire body.body-state3, fusée. Cool. Sauvons ça. Ce que je vais faire, c'est que je vais juste augmenter ça à 500, juste pour que ce soit un peu plus rapide. Actualisez-le, cliquez sur « Lancer », et voyons ce qui se passe. On a une fusée. Si vous avez suivi et tapé avec, félicitations, vous venez de lancer votre première fusée. Fantastique flippant. Ensuite, nous allons dire : « Si c'est bon, alors montrez le message de réussite. Si ce n'est pas bon, montrez le, oh, pas de message. » Nous allons dire, le succès var est égal à setTimeout, ce qui est le manque d'intervalle défini, sauf qu'il exécute la fonction dans un certain temps, pas encore et encore. À l'intérieur, je vais dire, cool, exécutez-le en 2 000 millisecondes, donc dans deux secondes. Ensuite, je vais dire, var RandomNumber est égal à Math.Random. Montons que la méthode aléatoire est réelle. On peut toujours aller ici et aller à Math.Aléatoire. Refaisons-le pour voir si c'est vraiment aléatoire. Cool. Ce n'est pas ce que je voulais définir la méthode aléatoire, je veux juste un nombre de 0-10. Donc ce que je vais faire, c'est que je vais dire, multiplier ça par 10, ce qui est génial. Mais alors aussi nous voulons l'arrondir, donc je vais dire Math.Round. Je vais essentiellement l'analyser dans un nombre. J' arrondit un nombre ; ce nombre va être un nombre aléatoire et le multiplier par 10. On y va. Je vais juste copier et coller ça. Le nombre aléatoire est ce nombre. Alors je vais dire, si RandomNumber est plus grand que cinq, faites autre chose. Ce que j'aimerais faire si c'est plus grand que cinq, c'est que ce serait un succès. Puis sur le [inaudible], je dirai ChangeState à quatre, sinon, ChangEstate à cinq. Voyons ce qui se passe ici. J' aime aussi enregistrer ceci, juste pour m'assurer que c'est le bon numéro. Donc console.log, RandomNumber, donc disons texte plus RandomNumber. Je peux aussi juste dire RandomNumber, RandomNumber. Maintenant, ce texte de nombres aléatoires et cela va réellement mettre la valeur de cette variable ici. Sauvons ceci et voyons ce qui se passe. Lancement, 10, 9, 8, 7, 6, 5. Eh bien, je ne peux pas compter aussi vite. Woo, monte. Ok, bien joué. Fais-le encore. Mais pourquoi notre fusée tombe ? Le RandomNumber était neuf, fantastique. Refaisons-le. La clé ici est que ça change réellement l'état du corps. Donc, si c'est quatre, il y a un peu de problème. Donc, ce que je vais faire ici, c'est juste aller, Contrôle C, Contrôle V, et changer ça en 4,2, sorte qu'il va toujours continuer à monter s' il est temps de monter ou si c'est un succès. Sauvons ça. Rafraîchissez, lancez, et il descend. Si on va avorter, ça va retourner là-bas, mais pourquoi es-tu retourné à deux ? On doit couvrir ça. Oh non, essayez encore. Donc, RandomNumber était cinq. Est-ce exact ? Si c'est plus grand que cinq, c'est du succès. Donc, si c'est cinq, on va le laisser échouer. Ce que je veux faire ici maintenant est de partir, CountdownNumber est 10. Quoi qu'il arrive, ça doit être 10. Si c'est l'état 2, on peut compter à rebours. Aussi si c'est l'état 3, nous pouvons dire, voyons si c'est un succès ou un échec. Essayons encore ça. Lancement. Bravo, refais-le et on y va. Nous avons un lancement de fusée réussi. La fusée redescend. Vous voyez cela comme une transition là-bas, nous pouvons changer ça si nous le voulons. Donc, si nous disons l'état du corps 1, fusée. On peut dire transition, aucun. Sauvons ça. Revenons à Chrome, actualisez, lancez, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, retirez. Fantastique, essayez à nouveau. Vous voyez ce qui se passe lorsque je clique sur « Réessayer » ? Il est revenu tout droit en arrière. Lancement, il y avait quelque chose d'un peu bizarre. Ça n'a pas commencé tout de suite. Donc, ce qui s'est passé là, c'est que même si le CountdownNumber est allé à 10, le HTML réel ne l'a pas fait. Donc je vais juste copier et coller ça juste là. Alors ce que je vais faire ici, c'est que je vais mettre ce CountdownNumber avant que le HTML ne change, juste pour qu'il ne colle pas trop sur 10. Rafraîchissons ceci, lancez à nouveau. Vous pouvez voir combien de fois vous allez et venez et changez les choses. Ce n'est pas juste comme clair, comme le faire une fois, ne plus jamais le toucher, recommencer. Donc ça se sent beaucoup mieux. Maintenant, bien sûr, nous pouvons rendre cette chose incroyable. À quoi va ressembler votre fusée ? Oh, je ne sais pas, réessayez. Je suppose que si tu faisais ça, ta fusée exploserait et reviendrait au fond. Mais ouais, comment va avoir l'air ta fusée ? Comment va ressembler votre interface ? A quoi ça ressemble ? Enlevez. Oh non. Vous pouvez voir ici, 7, 5, 2. Essayons encore. Retirez, oh non, encore. Essayons une fois de plus, voyons si la chose est un succès. Vous pouvez voir que c'est comme si c'était aléatoire. JavaScript génère des nombres aléatoires. Terrible. Mais de toute façon, ouvrez, allez sur le bureau et vous allez vouloir vous assurer que vous êtes sur gh-pages et ensuite vous direz, « J'ai fait ma fusée. » Venez dans gh-pages et puis vous voulez synchroniser. Toute cette synchronisation. Allons à GitHub, github.com. Allons dans notre dépôt js-rocket, assurez-vous que nous sommes sur la branche gh-pages. Allez à nos commits, faites mes fusées. Maintenant, ce que nous voulons faire est d'aller à mrra-screencasts.github.io/js-rocket. Mais si on va juste ici, ça va nous emmener à cette vieille page. Donc, en fait, nous voulons aller à rocket.html et ta-da. Est-ce que ça va marcher ? Oui, en ligne pour que tout le monde le voie. Oh non, essayez encore, perdu un. Voyons si ça marche. Dernier. Oh non, notre chance n'est pas bonne. Donc tu peux changer ce numéro en autre chose si tu veux vraiment. Donc vous pouvez dire que si c'est plus grand qu'un, alors c'est un succès. Il a une très petite chance d'échec. C' est notre fusée, tu peux t'arrêter ici, tu peux la partager. La prochaine vidéo, je vais vous montrer comment j'ai rendu ma fusée cool. 15. Et maintenant, rendons la fusée jolie !: Nous avons notre fusée à lancer, et maintenant nous allons la rendre cool. J' ai quelques éléments que je vais mettre. J' ai fait un tas d'images. Voici mon sol et voici ma fusée. Voici ma fusée dans l'état 2 avec un peu de poussée, et ceci est ma fusée en plein arc avec beaucoup de poussée, beaucoup de ness. Alors c'est ce qui arrive si les choses ne marchent pas, ça va boum. Ensuite, j'aimerais aussi ajouter un « Je ne peux pas attendre » et un « Je suis nerveux » au petit gars qui est dans la fusée. Voyez-le sourire. Ouvrons la fusée JS. Ce que je vais faire ici, c'est que je vais créer un nouveau dossier et je vais l'appeler IMG, et c'est là que je vais mettre toutes mes images dans. Donc, j'essaie juste de créer un nouveau fichier dans la fenêtre, aller dans les documents, aller sur le bureau. Je vais juste faire glisser une de ces images dans IMG. Fantastique. Ok, je ne me souviens pas vraiment à quoi ressemble notre fusée. Voyons voir. Glissons rocket.html dans Google Chrome. Pendant que nous attendons cela, ouvrons simplement GitHub desktop 2. D' accord. C'est très ennuyeux. Je vais voir si le CSS fonctionne. Alors faisons en sorte que ça ressemble un peu mieux. Je vais commencer par la fusée et ensuite je veux me concentrer sur l'interface. Ok, alors allons là-dedans. Ouvrons notre fusée CSS. Je vais juste diminuer un peu la taille de la police. Donc nous avons la fusée dans les petits états fusionnés, mais je veux juste voir quelle taille sont ces images. Donc état de fusée 1, 143 par 272, et je les ai tous faits de même, donc ce sera plus facile de travailler avec. Si vous le copiez, et je vais y aller, et je vais régler la largeur à 143 pixels et des hauteurs de 272 pixels. Très bien, et voyons à quoi ça ressemble. Alors sauvegardons ça, rafraîchir. Oui, ça a l'air bien, mais ce n'est pas au milieu. Ce que j'aime faire ici, c'est juste mettre une marge négative, donc je vais juste dire marge gauche, et je vais dire négatif 272 divisé par 2, 136. Fantastique. Ce qu'il fait, c'est qu'il le met au milieu, mais alors vous avez toujours toute la largeur d'un côté. Donc, vous avez besoin d'une marge à gauche de la moitié de la largeur. Maintenant, j'ai fait la marge gauche de la moitié de la hauteur. Essayons donc encore une fois, 143 divisé par 2 est 71,5. C' est ce que je vais faire, 71,5 pixels. Couleur d'arrière-plan. En fait, je ne veux plus de couleur de fond. Donc, ce que je vais faire est juste d'utiliser l'arrière-plan, et oui, je veux une URL, puis ici je veux mon dossier d'image. Parce que le CSS a un petit sous-dossier, je vais aller en haut et puis je vais aller chercher les images dans le dossier image. D' accord. Alors comment j'ai appelé ça ? État de fusée 1, state1.png. Ce qui est vraiment agréable à propos de cette propriété d'arrière-plan, c'est que nous pouvons dire, « Pas de répétition », ce qui signifie que l'arrière-plan ne se répète pas, et je voulais que 0-0, ce qui signifie que la position x est zéro, la position y est zéro. Vous pouvez définir cela sur 10 pixels, moins 10 pixels, tout ce que vous voulez. Vous pouvez également dire haut et bas ou centre et centre. Pour moi, cela ne fait pas vraiment de différence parce que ma largeur et ma hauteur sont exactement les mêmes que la largeur et la hauteur de mon arrière-plan. Donc je vais juste garder ça à zéro et zéro. Fichier Enregistrer. Voyons à quoi ça ressemble. Ok, donc on a ma petite fusée, ça a l'air incroyable. Est un peu hors du sol cependant, ce qui me frustre. Donc ce que je vais faire ici, c'est au lieu d'avoir un fond à 20 pixels, je vais avoir le bas à zéro. Je pense que je devrais avoir un fond négatif. Ok, alors voyons ce que je dois faire pour que ça marche. Nous pourrions aller et venir de l'éditeur à Chrome et rafraîchir tout le temps, mais wow, ça pourrait devenir vraiment laborieux. Donc, ce que j'aimerais faire ici est juste aller au bas moins 10 pixels. Est-ce que ça marche ? On y va, moins 13. Moins 13. Fantastique. Garde ça, cool. Rafraîchissement. On y va. Ok, maintenant la prochaine chose que nous devons faire est de changer notre image de fond quand elle commence à se lancer. Ce que je vais faire ici, c'est que je vais dire [inaudible], je vais faire des commentaires. Maintenant, commentez en CSS, vous devez utiliser ces commentaires. Alors que JavaScript, vous pouvez utiliser des commentaires comme ça, et CSS ne fonctionne pas. Donc, je vais dire ici est l'image de fusée BG. Donc état 1 nous avons trié, mais maintenant état 2. À quoi va ressembler l'état 2 ? Ensuite, je veux aussi l'état 3 et plus. Alors l'état 3, l'état 4, puis l'état 5, c'est , oh, non, je vais devoir faire quelque chose d'un peu différent là-bas. D' accord. Allons juste sortir celui-là pour l'instant. Je vais juste couper ça pour que les couronnes soient au-dessus, juste pour qu'il y ait une différence claire. Ok, donc état 2, je vais changer ça en image de fond, et je vais juste copier et coller ça. Parce que c'est l'image d'arrière-plan, je ne peux pas mettre « no repeat », et je ne peux pas définir la position d'arrière-plan. Tout ce que je change, c'est l'image de fond. J' étais l'état 2 que, je vais le changer en état 2 et je vais m'assurer que c'est un GIF ou JIF, mais vous préférez le dire. Ok, je vais me rafraîchir, lancer ça. Donc vous voyez que les petits propulseurs sortent. Fantastique. Puis il s'enlève. D' accord. Pour l'état 3 et l'état 4, nous allons changer ceci en état 3. Fantastique. Voyons comment cela fonctionne. Voila. On a une fusée. Alors, si on recommence, ça recommence. C' est fantastique. Maintenant, nous devons faire l'état5. Je vais juste copier et coller ceci à nouveau, et les états. Comment est-ce que j'ai appelé ça ? boom.png. Maintenant, il a une largeur et une hauteur différentes donc ce que je vais faire est de copier ceci, je vais le changer, largeur 209 pixels, avec une hauteur de 200 pixels. Maintenant, parce que j'ai cette marge à gauche de 71,5, je veux toujours la centrer, donc ce que je vais faire ici, c'est qu'il a une largeur de 209 donc ça devrait être négatif 104,5. Je pourrais arranger celui-là. Allons « Enregistrer » ceci et ouvrons notre rocket.js. On va aller aux RandomNumbers, si c'est plus grand qu'un, ça va être un succès. Quelles sont les chances que ça échoue ? Plutôt mince pour le moment, donc je veux dire si c'est plus grand que neuf, ce qui veut dire qu'il a de grandes chances d'échec. Mais c'est génial pour l'instant parce que je voulais tester mon image de boom. Je vais « Enregistrer » ceci, revenir à Chrome, « Actualiser » ceci. Qu' est-ce que Sublime ? Non, je ne veux pas l'acheter maintenant, merci. Nous « Rafraîchissons » ceci, « Lancer ». Fantastique. Boum. Tout droit, donc ça marche. « Essayez à nouveau ». Vous pouvez voir comment on s'amuse un peu ici. C' est sur mes images, mes images de fusée. Je voudrais revenir à deux, peut-être parce qu'il a encore de bonnes chances de succès. Je vais « sauver » ça. Alors ce que j'aimerais faire est de changer le sol, de la couleur, alors changez cela en arrière-plan et l'url. Je vais dire, allons trouver dans le répertoire des images. Je pense que je l'appelle ground.png. Allons voir ce ground.png, et c'est 723 par 15. La largeur est bonne. Mais ce que nous allons faire ici, c'est que nous allons dire, pas de répétition, mais le x va être au centre. Je ne peux pas épeler centre, désolé , centre centre, et le Y va aussi être centre. Il sera toujours au centre pour que la fusée s' asseoir dessus exactement au milieu. Hauteur 20, c'est bon, mais passons à 15, ça fonctionnera probablement mieux, et « Sauvegardons » ça. Ça a l'air assez sympa, mais je voulais qu'il soit encore un peu plus haut, donc x sera au centre, y je vais changer ça à zéro, donc ça va s'asseoir en haut, puis je vais changer ça à 20. Voyons voir à quoi ça ressemble. Toujours pas génial, alors modifions la position inférieure du sol à 10 pixels. Je vais copier ça. Puis le fond, je vais mettre 10 pixels. « Sauver ». Maintenant, nous avons le sol, nos fusées sont vraiment belles. Ça a l'air cool, un petit gars. Mais maintenant, je veux qu'il dise des choses pendant le compte à rebours. Nous devrons changer de JavaScripture et changer certains CSS. C' est à l'intérieur de notre rocket.js quand le compte à rebours va par ici. Je peux dire, si CountDownNumber est quelque chose, vous pouvez changer les états. Ce que nous pouvons faire ici, c'est que nous pouvons dire, si CountdownNumber est égal à cinq, faisons quelque chose. Peut-être qu'on peut dire, être nerveux. Ensuite, nous pouvons aussi dire, CountdownNumber est égal à trois, nous pouvons dire, je ne peux pas attendre. Ce que j'aimerais faire ici, c'est que j'aimerais changer certaines classes. Si vous voyez ici, je veux qu'il apparaisse quelque part ici et quelque part ici, donc je vais devoir mettre un nouveau morceau de HTML. C' est à gauche, celui à droite, les fusées ici, donc je vais dire, div je veux lui donner une classe de « nerveuse », et je veux faire une autre div avec une classe de « ne pas attendre ». Je vais « Sauver » ceci et je vais copier nerveux et je ne peux pas attendre. Copions ça. Cela va à rocket.css. Ici, disons nerveux, je veux lui donner une position absolue à nouveau. Juste pour l'instant, je vais dire top 100 pixels et gauche 100 pixels. L' arrière-plan, ce ne sera pas une couleur d'arrière-plan, ce sera à nouveau une image, alors disons url, et nous disons img/, je vais l'appeler nervous.png. Ça ne va pas se répéter, et il va être positionné x à zéro et la position y à zéro. Maintenant, la largeur va être de 223, la hauteur va être de 100. Fantastique. Désolé, j'ai fait quelque chose de mal là-bas. Nous verrons comment cela fonctionne. Je vais sauver ça. Rocket JS, je vais aussi sauver. Vous verrez que même s'il n'y a rien ici, ça n'affectera rien. Je suis nerveuse, ça a l'air vraiment bien, selon où c'est. Mais pour l'instant, il est probablement préférable d'être au fond. Donc je vais inspecter ça et je vais déplacer ça sur le côté, juste pour qu'on comprenne bien où c'est. Voyez s'il n'y a pas beaucoup d'espace ici, mais c'est bon. Ce que je vais faire, c'est que je vais dire cette div nerveuse en fait je veux que ce soit du bas. Donc je vais changer de haut en bas, et je vais le changer à 100 pixels. Ça a l'air juste. Donc en bas 220. Je retournerai ici et je changerai ce fond en 220. Sauvons ça. Nous aurions besoin de régler la position de gauche. La gauche, 100, on peut repartir à 50 pour cent. Cinquante pour cent, c'est génial. Ensuite, je vais aller à Margin-gauche. Donc je fais plus, ou je peux juste appuyer sur Entrée ici. Margin-gauche, ce sera une valeur négative, donc négatif 20 pixels. Donc négatif 180 a l'air droit. Donc, Margin-gauche, collez ça. Cool. Sauvons encore ça. Vous pouvez appuyer sur ceci, actualiser. Fantastique. Ça veut dire qu'il sera probablement au même endroit, peu importe où nous sommes à l'écran. C'est génial. C' est une chose incroyable à propos du positionnement absolu. La prochaine chose dont j'ai besoin, c'est que je ne peux pas attendre. Nous ferons exactement la même chose. Là où il est dit ne pas attendre, je vais juste copier ceci et je vais coller ça. Je vais littéralement copier et coller tout cela et changer cela pour ne pas attendre. Je veux voir à quel point c'est grand. Donc 206 par 65. Maintenant, nous allons juste devoir voir comment cela fonctionne exactement. Le fond sera probablement la même chose, à gauche, 50 pour cent. Je vais juste commenter ça. Nous pouvons aller commande barre oblique, qui sera votre commentaire, ou vous pouvez taper vos commentaires manuellement. Donc Fichier, Enregistrer. Voyons à quoi ça ressemble. Je ne peux pas attendre. En fait, ça a l'air vraiment bien. Je vais supprimer cette marge à gauche. Alors on a une attente et je suis nerveuse. Ce que j'aimerais faire maintenant est d'afficher ceci comme aucun et d'afficher ceci comme aucun. Lorsque j'ajoute une clause de cant-wait.show, je veux l'afficher en bloc, qui est son type d'affichage naturel. Si nous ajoutons une clause et montrons à chacun d'entre eux, cela devrait fonctionner. Rafraîchissons ici. Inspectez l'élément. On voit à droite, je suis nerveuse. Si on ajoute une clause de show, ils seront, « Hey, je suis nerveux », et si on ajoute une clause show sur cant-wait, ils diront, « Hey, je ne peux pas attendre. » Si on l'enlève encore, tu verras que ça disparaît. C' est donc ce que nous allons faire avec JavaScript. Nous allons ajouter dynamiquement ces clauses de show. Si CountdownNumber est égal à cinq, nous allons dire, obtenez cet élément. Alors donnons ça un identifiant nerveux et un identifiant de cant-attendre. Laisse-moi sauver ça. Je vais dire document.GetElementById. Nous allons ensuite passer, laissez-moi dire, .ClassName = spectacle nerveux. Copiez et collez ceci ici. Faisons juste attendre et copions ça comme ça. Sauvons ceci et voyons ce qui se passe. Cinq, trois, fantastique. Mais maintenant, nous ne voulons pas que ces choses soient là pour toujours. Ce qu'on peut faire ici, c'est dire autre, le copier, juste changer pour devenir nerveux, et sinon, juste changer pour attendre. Maintenant, ce que nous pouvons dire est, si c'est CountdownNumber est plus grand que trois, et CountdownNumber est plus petit que cinq ou plus petit que six, mais nous pouvons dire plus petit ou égal à cinq. Qu' est-ce que ça veut dire ? C'est plus grand que trois, donc ça serait quatre ou cinq. Donc peut-être qu'on peut faire ce six et CountdownNumber, laissons-le pour trois. On devrait se rafraîchir ici. Lancement. Je suis nerveux apparaît, s' va, je ne peux pas attendre, c'était très, très rapide. Alors, changeons encore ça. Peut-être qu'on peut changer ça en sept et ça en quatre. Cela nous donne une gamme de cinq, six et sept. Faisons exactement la même chose ici, sauf qu'il doit être plus grand qu'un et il devrait être quatre ici. Donc c'est trois, deux et quatre. Quatre ou trois, deux. Sauvons ça. Revenez à Chrome, actualisez. Lancez-le. Eh bien, oui, on y va. C' est notre fusée. Notre fusée dans le style, nous avons quelques éléments supplémentaires basés sur le compte à rebours. Donc, j'ai une journée amusante. C' est vraiment cool ce que tu peux faire. En fait, je veux juste faire en sorte que ça paraisse bien. Donc, le HTML fusée, tous sont du code, état 1, état 2, état 3, état 4, état 5. Ils ont tous l'air à peu près pareils. Donc ce que je vais faire ici, c'est que je vais juste appeler ça une interface. Je vais lui donner une classe d'interface, juste pour que je puisse les styliser pour qu'ils soient tous exactement les mêmes. Je vais enregistrer ceci, commande S, ou Control S ou juste l'enregistrer là. Maintenant, cette interface, bien que tout soit sur la gauche, donc je vais juste mettre juste maintenant, .interface. Maintenant, comment voulons-nous que ça ressemble ? Je veux que tout soit aligné au centre d'abord. Donc je vais dire text-align, centre. Je veux alors lui donner un rembourrage, disons de 20 pixels. Génial. Maintenant, vous voyez ce qui se passe ici. C'est assez intéressant. Si vous pouvez comprendre comment les enlever quand je clique sur Abandonner, bon pour vous, mais je vais styler le côté gauche pour l'instant. Je veux que les gros boutons soient gros. Vous pouvez voir ici où il est dit bouton. Le reste d'entre eux sont en fait tous les boutons. Je ne veux pas qu'ils soient tous des boutons, je veux que le lancement soit le bouton, et peut-être qu'ils essaient à nouveau d'être un bouton. Fais-le encore, c'est cool. Enlevez juste le bouton sur l'avortement et sauvegardez ceci. C' est notre interface. Maintenant, je veux changer le bouton, donc je peux mettre un .button ou je peux juste le laisser comme bouton, mais faisons un .button. Je vais dire display inline-block, et je vais dire background-color nous allons le rendre blanc, faisons la couleur du texte noir, et voyons à quoi cela ressemble pour l'instant. Je vais juste le sauver, rafraîchir. Ça a l'air bien pour l'instant. Je vais lui donner un rembourrage de 40 pixels. Je vais dire text-transform, majuscules. Cool. Jetons un coup d'oeil et voyons à quoi ça ressemble. C' est un bouton assez bizarre, donc je vais dire 20 pixels en haut et 40 pixels sur les côtés. Ça a l'air bien. Je vais dire text-decoration, aucun, parce que je n'aime pas souligner, et ensuite je vais lui donner un rayon de bordure de 10 pixels pour le faire ressembler à un bouton. Voyons voir à quoi ça ressemble. Beaucoup mieux. Mais je n'aime pas le fait que ce soit toutes les polices serif, je veux une police sans empattement. Je vais changer ça et dire corps, famille de police, et changeons ça en Helvetica ou Arial ou sans empattement. Sauve ça. Ça a l'air beaucoup mieux maintenant. L' interface, le bouton est par ici. Je veux maintenant ajouter un survol pour mon bouton, et ici je vais juste changer la couleur d'arrière-plan. De quelle couleur dois-je le changer ? Peut-être que je changerai juste la couleur en rouge. Je veux qu'il ait l'air pas si fou, donc je vais dire transition, puis dire couleur, 300 millisecondes. On y va. Cliquez dessus. L' avortement est toujours là. Enlevez. Vous pouvez voir que mon bouton est là, toujours au centre. Essayons encore. C'est comme ça que vous stylisez votre page. Rendez-le aussi incroyable que vous le souhaitez. Si vous voulez essayer des choses différentes, si vous voulez essayer des choses étonnantes et cool, donnez-lui un coup d'envoi. Je serai là pour t'aider. Mais c'est comme ça que vous rendez les choses cool, c'est ainsi que vous rendez les choses interactives. J' espère que vous avez beaucoup appris. Il y a une autre chose que je dois vous montrer, ce qui me semble assez cool, et ensuite nous allons la synchroniser avec GitHub. Quand quelqu'un se met sur js-fusée sur mon hôte local, ça me donne ce truc, qui est comme, « Oh mon Dieu, ce qui se passe ici C'est juste un tas de fichiers. Vous pouvez réellement cliquer sur l'index ou les fusées. Si on va à l'index, c'est à ça que ça ressemble. Mais rappelez-vous, sur votre URL GitHub, cela vous emmène directement là. Vous n'êtes même pas à index.html. En cela, je voudrais ajouter un lien qui redirige vers rockets.html ou y va automatiquement en fonction d'un minuteur. Allons à notre index.html, et ce que nous allons faire ici, c'est que nous allons dire un, aller à rocket.html, aller à la page fusée. Sauvegardons ceci et voyons si cela fonctionne. Oui, c'est vrai. C'est une chose. Ce que nous allons faire ici, c'est juste dire p, vous serez redirigé bientôt. Je dépose, sauve. Allons dans notre script.js et disons, haut ici, définissez timeout. Je vais mettre une fonction ici, et on va dire, je ne sais pas, deux secondes. Ce que nous allons faire ici, c'est que nous allons réellement changer l'emplacement, donc si nous devions tester cela dans notre console, nous pouvons dire location.href est égal à rocket.html. Juste comme ça, et ça changera ça. Ce que nous allons faire, c'est que nous allons régler ça dans les délais d'attente, donc après deux secondes, ça va nous rediriger. Location.href est égal à rocket.html. Sauvons ça. Retournons ici, rafraîchissez-vous, et après deux secondes, ça nous amène à notre lancement de fusée où nous pouvons nous amuser. Oh non. Ensuite, une fois que vous avez terminé avec cela, vous ouvrez vos pages GitHub, assurez-vous que vous êtes sur le dépôt de js-rocket, assurez-vous que vous sur la branche gh-pages, pas la branche master, la branche gh-pages, et puis dites, a rendu notre fusée cool avec des dessins etc. » Vous le validez et ensuite vous le synchronisez. Alors que sa synchronisation, ce qui peut prendre un peu de temps. Ouvrons un nouvel onglet et allons sur github.com. Si vous n'êtes pas connecté, connectez-vous, puis vous allez au dépôt js-rocket, vous allez à votre branche gh-pages, allez à vos commits. Rend notre fusée cool avec des dessins etc Une fois que cela est arrivé, actualisons cette page GitHub et voyons si cela fonctionne. Fantastique, ça marche. Voyons si tout est greffé ici. On dirait que c'est le cas. Vous verrez qu'il y a quelques flashs au fur et à mesure que les images changent, c'est tout à fait normal, mais c'est parce que votre navigateur ne l'a pas mis en cache. Si nous essayons à nouveau, vous verrez probablement moins clignotant. Oui, pas de clignotement. Partagez vos créations de fusée dans la galerie de projets. J' espère que vous avez beaucoup appris. 16. Remerciements et prochaines étapes: C' est la fin des projets. J' espère que vous avez beaucoup appris. Je sais que cela peut être assez écrasant en essayant d'apprendre HTML, CSS et JavaScript. Ils sont tous si énormes, et je pense que JavaScript est probablement le plus grand parce qu'il peut manipuler HTML et changer CSS en même temps. J' espère que tu t'es bien amusé. J' espère que vous l'avez apprécié, et j'espère vraiment que vous continuez à écrire JavaScript, HTML et CSS, et même si vous faites deux lignes ou cinq ou 10 minutes chaque jour, votre cerveau commencera à s'en souvenir. Ce ne sera pas une telle surcharge, alors donne-le un coup d'envoi, essaye-le. Nous avons compris ce que sont les propriétés, quelles sont les méthodes. Nous avons compris comment écrire JavaScript, la syntaxe. On a construit une fusée, on a lancé une fusée. Nous avons appris un tas de petites choses comme, si des déclarations, nous avons appris sur les fonctions que nous avons appris sur les variables, les broyeurs. Il y a tellement d'autres choses à apprendre sur JavaScript. Nous avons également appris à utiliser Sublime Text avec JavaScript. Nous avons appris à utiliser la console dans Google Chrome. Nous avons appris à utiliser les pages GitHub. Nous avons appris à utiliser GitHub, comment créer des référentiels ou des projets. J' aimerais vraiment que vous partagiez vos projets avec des gens que vous connaissez. Donnez-lui une part, allez dans votre galerie de projets, poster des liens, et rappelez-vous que Google, est votre ami. Si vous êtes coincé, si vous avez un problème et que vous ne pouvez pas le comprendre, Google. Il y a tellement de choses là-bas. L' ensemble du Web est construit par des gens qui connaissent HTML et JavaScript et CSS. Ils seront en mesure de vous aider. Si ça n'aide pas, demandez à un vrai humain. Je suis un vrai humain, alors demandez dans le forum sur School Share. D' autres personnes pourront peut-être vous répondre, mais je serai certainement en mesure de vous aider si personne d'autre ne peut le faire. J' espère que vous avez apprécié. Au revoir pour l'instant.