Apprenez le HTML, le CSS, le JavaScript/jQuery et les API : Créer un site météo !

1. Introduction: Bonjour. Je m'appelle Joan Marie Verba. Et bienvenue dans cette classe et le développement Web. Nous allons créer un site météo en utilisant un A P. J'appelle au temps ouvert un P I A p yeux, plaisir de l' air et vous pouvez trouver un large éventail de sujets parmi eux pour créer toutes sortes de pages Web intéressantes. Je suis programmeur informatique et développeur Web depuis de nombreuses années. J' ai recouvert un certain nombre de sites web. Ce site Web particulier que vous voyez maintenant est ma page de portefeuille. C' est une page qui montre mes projets. Ceci est une page qui est mon CV en ligne. C' est une autre page que j'ai développée et celle-ci est ma page get hub où je stocke mon code. Tout au long de cette classe, je vais vous apprendre à créer une application météo en utilisant HTML, CSS et JavaScript dans un p j'appelle. Vous pouvez utiliser ces compétences pour créer votre propre site météo ou un site Web en utilisant un autre p i. Cette classe pourrait être prise par ceux qui ont une certaine connaissance du HTML, CSS et javascript. Mais il s'adresse aux étudiants n'ayant aucune expérience dans le développement web. Cette classe est idéale pour les pigistes. Côté brouillards ou même les amateurs, parce que vous pouvez utiliser ces compétences pour obtenir une variété de sites Web en utilisant un oeil P. À la fin de cette classe, vous aurez le code pour déployer votre propre site météo. 2. Éditeur de code: Avant de commencer à coder, nous allons avoir besoin d'un éditeur de code. Un texte clair. Des éditeurs tels que No Tad ont très bien fonctionné. Bien que je recommande de ne pas utiliser un traitement de texte, il est préférable d'utiliser un éditeur de code spécialisé, et j'utilise le code Visual Studio, qui est un téléchargement gratuit et fonctionne pour Windows, Mac et autres plates-formes. Tu pourrais. Aussi, il était Adam, ce qui est un autre téléchargement gratuit. Si vous avez un éditeur de code tel que Sublime Text ou un autre éditeur de code qui fonctionne déjà, c'est très bien aussi. Mais je recommande de télécharger un éditeur de code avant de passer à l'étape suivante. 3. Configuration du fichier: Maintenant, nous allons créer nos fichiers. La première chose dont nous avons besoin est un dossier. Je suis sur un Mac, mais le processus dans Windows est similaire. Il suffit d'utiliser un nouveau dossier. Et donc nous allons créer un dossier. Je vais l'appeler Weather, et maintenant nous allons entrer dans notre code de studio visuel et nous allons ouvrir le dossier. Si c'est déjà créé, comme je l'ai fait avant. Vous pouvez le faire ou vous pouvez utiliser le dossier ouvert. Mais en ce moment, nous allons prendre la météo et par temps, nous allons créer des fichiers. Nous pouvons appuyer sur ce bouton ici pour créer des fichiers. Le premier fichier est un fichier HTML d'index qui contiendra le code qui va directement à l' écran. Notre deuxième fichier que nous allons créer est le style CSS et qui aura un fichier qui indique au code comment le mettre à l'écran. Et puis nous allons créer notre travail, un fichier de script, et nous allons l'appeler Weather J s. Et ce fichier donnera les données, récupérera les données et mettra les données sous une forme que nous pouvons mettre à l'écran. Donc, tout d'abord, ils veulent mettre en place l'index. Fichier Html. Si vous êtes sur un code de studio visuel, il existe un moyen vraiment facile d'obtenir un modèle. Vous faites un point d'exclamation de décalage, puis vous faites un retour et cela vous donne ce modèle vraiment sympa . Le code qui va aller à l'écran se trouve entre les deux balises de corps ici. Euh, ce code ici est pour suivre le navigateur. Comment Toe Interpreter code. Le titre ici est le titre que vous verrez en haut de l'écran pour les navigateurs. Nous allons appeler ça la météo d'aujourd'hui et l'utiliser, puis nous allons sauver ça et passer au style. Voyez, évaluez maintenant le style. Voir évaluer. Nous n'avons pas besoin de faire quoi que ce soit pour le moment pour le fichier de script Java. Nous allons vous mettre strict, ce qui est juste une, um, commande standard pour le script Java, et maintenant nous allons revenir à l'index html parce que le fichier html d'index doit savoir que le style CSS et les fichiers météo Js sont là et il doit communiquer avec eux . Donc, nous allons le faire par une commande froide et vous pouvez simplement copier cela ainsi que copier le reste du modèle. Si vous n'avez pas de fichier de modèle dans votre navigateur, même juste copié à partir de mon écran ici. Bon style. Tu vois, Assis. Vous allez faire rail égal feuille de style parce que c'est ce qu'il est. C' est une feuille de style, et on va mettre pour clore ça. On fait ça maintenant, ce n'est pas comme vous le remarquez. C' est entre les deux textes de tête, pas dans la balise de corps, et c'est la dernière chose avant la dernière balise de tête. Et donc nous disons d'indexer HTML ici que vous allez obtenir quelques commandes à partir du style. CSS. C' est ce que nous disons maintenant pour le fichier JavaScript. Le fichier de script Java va en bas. Donc, nous allons mettre le fichier de script Java en bas, et la façon qui va comme nous l'indiquons est avec ceci maintenant à nouveau, vous pouvez juste copier ceci à partir de l'endroit où je fais cela, il s'appelle Weather J s puis script. Maintenant, comme vous pouvez le voir,l' un des avantages de l'utilisation du code Visual Studio est que le code Visual Studio vous donnerale um, labalise de script de fin. comme vous pouvez le voir, un des avantages de l'utilisation du code Visual Studio est que le code Visual Studio vous donnera le um, la Une fois que vous avez fait ces balises de script de démarrage, vous n'avez pas besoin de taper cela. On va sauver ça. Et, euh, maintenant vous avez vos fichiers mis en place. Si vous voulez stocker votre code, vous pouvez utiliser le stockage cloud comme Dropbox ou iCloud ou autre, ouvous pouvez le copier sur, vous savez, euh,une clé flash. Si vous voulez stocker votre code, vous pouvez utiliser le stockage cloud comme Dropbox ou iCloud ou autre, ou vous pouvez le copier sur, vous savez, euh, euh, Ou vous pouvez obtenir un hub cadeau, um, dépôt, ce qui dépasse le cadre de ce cours, et y copier votre code. Mais je recommande de sauvegarder votre code à peu près à chaque étape car il est facile de perdre votre code et alors vous êtes alors c'est, euh Ensuite, vous devez le recréer à nouveau. Donc, c'est juste les bases mises en place pour le code, et nous allons commencer à partir d'ici 4. Page HTML de base: maintenant, remplissons la page HTML en ce moment, il n'y a rien là-bas. Si vous voulez voir la page à tout moment, nous pouvons faire un clic droit et ouvrir le navigateur par défaut et voir qu'il n'y a rien sur la page. Quoi que vous regardiez en haut, il dit la météo d'aujourd'hui. C' est parce qu'on a mis ça dans le titre. Retournons en arrière et commençons à mettre les choses sur la page. La première chose que nous allons faire sur la page est de mettre dans un titre ou la page. Nous allons utiliser la balise H one, qui est le plus grand lettrage. Le temps d'aujourd'hui maintenant H un, comme je l'ai dit, est le plus grand tag. Il y a des étiquettes plus petites, chacune à un plus petit que H un H trois, une plus petite que H deux et H six est très petite, sorte que vous pouvez ajuster la taille du lettrage. De cette façon, c'est l'une des nombreuses façons d'ajuster la taille du lettrage. Alors gardons ceci et voyons ce qui se passe. Vous pouvez juste rafraîchir la page ici, et il y a la météo d'aujourd'hui. Ok, maintenant commençons à remplir la page avec d'autres choses que nous voulons avec des lettrages plus petits. On va faire H 2 et on va mettre à l'endroit. Donc, euh, météo pour l'emplacement et nous allons remplir l'emplacement plus tard, et ensuite nous allons vouloir la température. Donc nous avons mis la température et nous avons juste mis des espaces réservés maintenant pour ça. Et puis nous mettrons dans la vitesse du vent et nous mettrons dans les conditions du ciel en voulant sur sa qualité de pluie claire, quelles que soient les conditions du ciel. Donc, ces espaces réservés pour ce que nous allons entrer plus tard. Alors maintenant, voyons, une fois que nous l'avons sauvé, quoi ça ressemble pour qu'on puisse juste rafraîchir la page ici et là ils sont, soit pour l'emplacement, hum, la température, vent, conditions du ciel, faisons cela 'll météo actuelle pour l'emplacement. Maintenant, il y a une raison à cela, et ce sont les données. Nous allons obtenir des changements toutes les 10 minutes, donc nous allons obtenir la météo actuelle pour n'importe quel endroit où nous lui disons pour obtenir la météo. instant, nous voulons juste avoir quelque chose sur la page, et nous le faisons. Nous avons la météo actuelle pour l'emplacement. Nous y sommes. Donc c'est notre truc de base. Et c'est notre page HTML de base. Et, euh, dans la prochaine leçon ira et abordera quelques problèmes de style 5. Styling CSS: Maintenant, nous allons styliser la page en utilisant C. S CSS signifie feuille de style en cascade. La première chose va essayer est un fond de couleurs. Donc, nous allons à la page CSS de style et écrire corps parce que nous voulons que la couleur soit pour toute la page qui correspond à cette balise body dans cette balise body. Donc on va le faire et dire que tu veux la couleur de fond ? Comme vous pouvez le voir, code Visual Studio m'invite ici, donc je sélectionne la couleur d'arrière-plan. Cela me donne aussi une gamme de couleurs à choisir. Essayons le bleu ciel. Notez que la balise body est appelée un sélecteur. Le sélecteur est suivi d'une accolade ouverte, suivie de toutes les instructions que vous voulez et se termine par une accolade bouclée de fin. Alors qu'est-ce qui sauve ça et retournez ici et rafraîchissez et nous avons le fond bleu. Super. Maintenant, c'est une police par défaut, alors voyons si nous pouvons nous battre avec un autre. Pour faire ça. Nous allons aux polices dot google dot com et nous faisons défiler les polices et nous voyons s'il y a quelque chose que nous voulons vous. Donc celui-ci a l'air bien, alors essayons celui-ci, vous cliquez sur le plus, puis vous cliquez sur le moins ici et il a deux lignes de code. C' est la première ligne de code qui va dans le h t m l. Donc nous allons copier et coller ce qui vend le HTML que nous avons une police que nous voulions utiliser et ensuite la seconde est de mettre dans le CSS. Donc, nous copions et collons cela et cela va au-dessous de cela. Essayez-le encore. C' est là. Et puis nous sauvegardons cela et revenons ici et actualisons la page à nouveau. Et la police a changé. Merveilleux. Maintenant, on va essayer autre chose. On va voir si on peut centrer l'en-tête. Nous ne voulons que le centre de la première ligne. Donc, nous allons revenir au HTML et nous allons séparer la première ligne en utilisant ce qu'on appelle le diff. Maintenant. Le code de studio visuel me rappelle que si j'ai un Divi de départ doit le faire correspondre avec div sans fin. Donc je prends ça et nous allons entourer la première ligne parce que nous recevons la première ligne et je vois que je n'ai pas copié ça. Bon, donc on va aller ici et c'est là. Et emmène ça là-bas. Maintenant, nous avons cette séparation, ce qui est génial, mais nous voulons, euh, centrer la ligne d'en-tête. Donc on a mis un cours là-dessus. La classe est égale et donnez-lui un nom. Je vais l'appeler mieux. Il peut s'agir de n'importe quel nom, mais c'est bon d'avoir un nom descriptif. Quand nous utilisons une classe en CSS, nous mettons point devant lui pour pouvoir la frapper. Nous avons mis ça et puis nous allons voir si nous pouvons déterminer quelle, euh, commande utiliser pour CSS. Donc nous avons mis, euh, c S texte central. Ok, ça a l'air bien. Donc, nous allons ici et nous voyons le texte s'aligner. Propriété semble être ceci et w trois écoles est un très bon endroit pour aller trouver de l' information. Et nous voyons qu'il y a une commande appelée centre d'alignement de texte à utiliser dans le CSS. Maintenant, sur le côté gauche de la page, vous pouvez voir qu'il y a tout un tas de commandes CSS, et vous pouvez les rechercher à tout moment si vous en avez besoin. Mais en ce moment, nous cherchons quelque chose pour centrer le texte, et c'est tout. Donc, nous copions et collons que vous enregistrez cela et nous retournons à notre page là-bas. Maintenant, c'est au centre. Ok, on va bien. Maintenant, nous allons mettre plus d'espace entre la ligne supérieure et ceci. Maintenant, pour ce faire, nous devons avoir une marge. Il suffit de le mettre en bas parce que la marge est pour, vous savez, la marge. Marge supérieure, marge droite, gauche, marge inférieure. Nous aurons besoin du fond de marge parce que nous allons augmenter cet espace ici. Donc, nous commençons cela avec marge et encore, le code Visual Studio me demande, et nous allons mettre ah, 100 pixels. Maintenant, Pixel est un très petit, um longueur ou avec sur la page, vous pouvez Google pixel si vous voulez plus d'informations. Mais en ce moment, on va juste le faire. Et si nous avons cela, nous retournons ici et nous rafraîchissons la page. Tu vois, il y a plus d'espace, leur orteil le décalé. C' est merveilleux. C' est ce qu'on veut. Ah, Maintenant, déplacons les données sur le côté gauche du rythme, nous voulons le déplacer juste un peu. Encore une fois. On va entourer tout ça d'un div. Les quatre lignes que nous voulons séparées par les dips que nous allons donner et ensuite le code visuel studio nous rappelle que nous devons avoir une fin. Donc on prend ça et on le met à la fin. Nous y sommes. OK, et maintenant nous avons besoin d'un autre cours. Nous appellerons ces données de classe et retournerons au CSS. Mettez une donnée de canard. D' accord. Et maintenant, nous allons faire une marge à gauche. Maintenant, cette fois au lieu de pixels, allaient utiliser quelque chose appelé une vue avec Et la raison pour laquelle nous allons le faire est donc si vous affichez la page sur un smartphone ah ou sur une tablette ou un autre appareil autre qu'un ordinateur portable ou écran de bureau, qui réduira automatiquement vos dimensions pour vous et effectuera les ajustements. C' est là qu'on va faire ça. Donc, faisons 20 vue avec et voyons ce que cela fera pour si 20 vue avec des données. Vous actualisez la page. Pas mal. Ok, ça a l'air bien. Ok, donc , euh, ça semble être un petit avion, alors Mitt met tout ça dans une boîte. Donc, pour ce faire, nous allons par ici Maintenant, il y a deux façons de le faire. Ah, mais ce que nous allons faire parce que nous voulons chacun séparément dans une boîte, nous allons mettre une classe sur la balise H 2 au lieu d'une balise div. Et tu peux le faire. Donc, utilisez la boîte de classe égale, et puis nous allons simplement copier et coller pour les autres. Et ça veut dire qu'on aura la même boîte pour chacun d'entre eux, accord ? Et cela Et maintenant, nous allons aller au style CS s et le style, Les blocs de la boîte euronews. Et ce que nous allons faire en premier, c'est que nous allons créer une boîte littérale en utilisant ce qu' on appelle une commande de frontière. Donc bordure de trois pixels, pourpre solide. , Ce que cela veut dire,c'est qu'on va avoir une boîte autour du texte. Les lignes de la boîte seront de trois pixels, um, avec et il sera solide au lieu d'une ligne pointillée, par exemple, et la ligne sera violette. Donc, une fois que nous avons fait cela, nous retournons en arrière et nous rafraîchissons la page. Et nous voilà, sauf que les boîtes d'air vont plus longtemps que nous ne le voulons. Alors faisons autre chose. Tu veux une marge, non ? droite. Et encore une fois, nous allons utiliser la vue avec et nous allons essayer une vue 50 avec et voir ce que cela fait. Donc une marge, n'est-ce pas ? 50 vue avec en ce que les rétracteurs sont des boîtes pour nous. Merveilleux. Sauf que les boîtes sont en quelque sorte en train de toucher le texte. Et on veut peut-être un peu d'espace là-bas. Voyons si on peut avoir un peu d'espace. Donc, pour faire le peu d'espacement, utilisez la commande padding et voulez que cela voulait être tout autour du texte afin que nous n'utilisions pas le haut en bas à gauche, droite, Bien que nous puissions. Donc on va utiliser 10 pixels pour celle-là parce que c'est une petite longueur. Donc nous allons utiliser des pixels et ensuite nous le faisons, et comme vous pouvez voir les boîtes ou plus grandes, merveilleuse apparence, assez bonne jusqu'à présent, c'est merveilleux. Nous allons donc décaler les boîtes avec une couleur d'arrière-plan afin que les boîtes semblent un peu différentes de l'arrière-plan. Alors faisons ça. On va faire une couleur de couleur de fond. Maintenant, vous remarquez que c'est différent de la couleur de fond supérieure parce que cela pour l' ensemble du corps. Mais ce fond de couleur sur Lee pour la boîte. C' est ce que ça veut dire. Alors, petite fille, essayez beige si ça et sauvegardez ça. Et nous actualisons la page et voyons ce qui se passe. Et là, euh, ça a l'air plutôt bien. Donc maintenant, nous sommes prêts à faire le fichier javascript. 6. Configurer l'appel API: Maintenant, nous sommes prêts à commencer avec JavaScript, mais avant d'utiliser n'importe quel javascript, nous devons être en mesure d'obtenir des données pour travailler avec. Donc, nous allons aller à l'air libre, si un p i, qui est la barre oblique de l'organisation de point de la carte météo ouverte et nous allons voir quel genre de données nous voulons récupérer la météo. Ap. J' offre toutes sortes de données pour les données météorologiques actuelles, trois sont prévisions, 16 jours prévisions et toutes sortes d'autres données que nous pouvons utiliser. En ce moment, nous allons juste utiliser les données météorologiques actuelles. Donc, nous allons regarder le A P. I, doc et en cela nous voyons que nous pourrions obtenir les données météorologiques actuelles par nom de ville Ville I D coordonnées géographiques, code postal et toutes sortes d'autres façons d'obtenir les données. Pour obtenir les données, vous devez avoir ce qu'on appelle une clé huit p I. Donc, ce que vous devez faire pour obtenir une clé A p I, c'est de vous inscrire. Donc, vous créez un compte et remplissez le compte de créature blanc. Une fois que vous avez créé votre compte, vous vous connectez, puis vous pouvez cliquer sur une touche P I et obtenir votre clé A P I. Je ne vais pas faire ça ici, mais tu auras ta clé A P i. Je vais te le montrer. Ce sera une très longue chaîne de lettres et de chiffres. Ensuite, retournez à l'A p I et nous devons savoir quel format nous devons utiliser pour reculer. Maintenant, nous allons récupérer par nom de ville. Voici donc notre format A P I call. Et donc nous allons copier ceci et nous allons le coller ici maintenant, Afin de faire un A P j'appelle avec un script Java, nous devons avoir un besoin d'avoir ceci. Nous devons avoir un u r l que nous pouvons utiliser qui a la clé dedans. Maintenant, pour cela, nous allons créer une variable. Maintenant, les variables sont des choses que vous pourriez vous souvenir de la classe mathématique. Vous avez peut-être vu X égal à Y plus Z où X variables plus weinplus en javascript me déclarer des variables. Nous pouvons le faire de l'une des trois façons suivantes. Utilisez const. Vous pouvez utiliser un ascenseur. Nous pouvons utiliser une foire, et le Const signifie simplement que nous n'attendons pas de changement supplémentaire. Pourquoi signifie que nous attendons Let signifie que nous nous attendons à ce que nous puissions changer Et il y en a un. Dans ce cas, nous allons utiliser Const parce que nous ne nous attendons pas à ce que cela change. Ce sera le même appel à chaque fois. Et nous allons appeler ça quelque chose de descriptif appelé u R l. et nous allons faire un égal. Et maintenant, nous voulons l'utiliser. Donc nous allons le faire et nous allons fermer les espaces, ce qui est toujours une bonne idée. Maintenant, ce sera un, hum, appel à une adresse web. Donc, pour une adresse web, nous avons besoin de http et nous l'avons presque ici. On doit choisir un nom de ville. On va choisir Chicago juste à des fins d'illustration. Et maintenant, nous devons mettre notre thé. Maintenant, la façon dont nous le faisons est d'utiliser une esperluette avec AP. Je suis égal et puis après c'est la clé. Maintenant avoir un faux constructif ici encore, il va être une chaîne de lettres et de chiffres. Nous allons mettre cela là et ensuite nous allons mettre cela entre guillemets. Et maintenant avec ça, on pourrait faire ce qu'on appelle un A P. J'appelle sur la carte météo ouverte pour obtenir nos données, et on en discutera dans la liste suivante. 7. Récupérer des données: Maintenant, nous allons travailler avec les appels de script Java et pour utiliser les appels JavaScript, nous allons utiliser quelque chose appelé Jake Weary. Nous devons donc alerter l'index html que nous utilisons J Query. Donc, nous allons à G Weary CD dans et cliquez sur le CD fr, et vous voulez utiliser le premier 1 J requête core 3.3 point un un comprimé utilisé que nous faisons une copie sur ce, en fait, dans le h t. Et maintenant et le mettre ici et le JavaScript va en bas et nous allons juste le mettre sur l'appel à la météo J s. Et maintenant nous allons aller au temps J s et commencer à travailler avec ça. Alors, que devons-nous faire pour récupérer les données de la météo ? Huit p. i. Et en passant, un P I. P signifie interface de programmation d'application. C' est une interface. Donc nous allons utiliser ce qu'on appelle Ajax call. Et c'est le format poussins et, comme d'habitude, code de studio visuel le remplit dans son Ajax avec le front de départ, la saison ouverte, euh, vraiment accolade et puis fermeture bouclée accolade parenthèses, et nous allons faire toute l'action ici. Donc nous allons commencer par vous R l Vous êtes malade maintenant. Ce u r l dit que nous allons l'envoyer un u r l et ce u R l correspond à cela. On aurait pu l'appeler n'importe quoi. On aurait pu mettre le nom ici et le nom ici. C' est bon, mais on a mis u r l Donc c'est ce que c'est. Et maintenant, nous allons dire en cas de succès, c'est-à-dire que les données ont été récupérées avec succès. Nous allons mettre toutes les données dans une variable appelée résultat. Et encore une fois, nous avons utilisé la fermeture ouverte, vraiment accolades. Nous allons fermer ça, et toute l'action va dans les accolades ici. Alors, quel genre d'action voulons-nous en premier ? , Au début,nous voulons juste confirmer que nous avons des données, donc nous allons faire le résultat de la console. Et donc ce que cela signifie est de mettre le contenu du résultat, c' mettre les données que nous avons récupérées de l'AP I en résultat et de mettre tout cela sur la page Web. Et maintenant, nous allons regarder la page Web. Une fois que nous avons enregistré notre code sur si point J s, nous retournons à notre page et nous actualisons. Et où sont nos données ? Eh bien, c'est dans la page, mais nous devons faire un clic droit, inspecter et regarder ce qu'on appelle les outils de développement afin de voir si ces air appelés outils de développement et cela a le HTML pour la page. Mais on n'a pas consolé les journaux. On va cliquer sur Consul et il y a un objet qui est nos données. Maintenant, si vous obtenez un message d'erreur, assurez-vous de vérifier et de voir que Jay Query est sur la page HTML. Assurez-vous que votre clé est au bon endroit. Assurez-vous que tout est orthographié correctement et que vous avez le bon nombre d' accolades . Vérifiez toutes ces choses si vous obtenez une erreur. Mais nous n'avons pas d'Arabe. Nous avons nos données. Donc, les données sont dans un objet et l'objet est simplement un orteil de chemin. Organisez vos données. Si vous voulez en savoir plus sur les objets, vous pouvez aller à W trois écoles dot com et rechercher des objets JavaScript, et il expliquera tout sur ce qu'est un objet et comment il est organisé. Mais je vais vous montrer ce que nous devons obtenir de l'objet juste ici. On doit cliquer sur la flèche, et maintenant on a des données. C' est génial. Il dit le nom de la ville de Chicago, ce qui est merveilleux. On a une température. Super. Vous avez une vitesse de vent juste ici. Nous n'avons pas encore de conditions de ciel, donc nous allons commencer à cliquer sur les flèches. Et je sais que c'est cette flèche juste ici. Et nous avons une description, ciel clair. Nous avons donc les données avec lesquelles nous devons travailler. Maintenant, nous devons interpréter ces données. Donc, nous devons retourner à la page de données météo actuelle sur la carte météo ouverte et faire défiler vers le bas , et nous voyons qu'il y a une place. Les discussions au-dessus de Jason et Jason sont la façon dont l'objet est organisé. Jason signifie notation d'objet JavaScript sans emploi, et c'est ce que nous voulons parce que nous travaillons en JavaScript. Donc, nous descendons et regardons les paramètres et voyons ce que nous avons ici. raffinage de la température est la température principale des points et il est en degrés Kelvin. Donc, nous allons devoir faire quelques calculs, entrer dans Fahrenheit. La vitesse du vent est de mètres par seconde, donc on va devoir faire quelques calculs. Il n'a pas souris à l'heure, et vous avez un nom, un nom de ville. Et nous avons, hum, conditions , description, description au sein du groupe. Donc, nous avons toutes nos données, et c'est comme ça que nous disons ce que nous avons. Alors ce que nous allons faire, pour le temps d'aujourd'hui, c'est que nous allons prendre le nom en premier. Et le nom est Chicago ici. C' est le plus facile à attraper. Donc, nous allons retourner à notre page et nous allons voir si nous pouvons récupérer ces données. Maintenant, il dit son nom. Écrivez votre nom, mais nous devons mettre quelque chose en face parce que rappelez-vous, les données ont été mis un objet appelé Result. Et rappelez-vous que dans les données météorologiques électroniques, tout est pointillé. Donc, nous retournons ici à notre code et nous allons ici et nous ne voulons pas juste voir si nous pouvons obtenir le nom. Donc, nous allons aux résultats du journal de la console. C' est le nom des objets dans et le nom, qui est l'endroit dans l'objet qu'il iss. Nous le faisons, sauvegardons cela, revenons ici, nous actualisons la page et nous refaisons le journal de la console. Et voici notre objet en haut. Et puis voici notre nom. Chicago. Donc on a notre nom. Nous savons que nous pouvons obtenir le nom du point de résultat et nous pouvons partir d'ici. 8. Placez des données sur une page Web: Maintenant, ce que nous voulons faire, c'est que nous voulons mettre toutes les données sur la page Web. Commençons par le nom de la ville. C' est l'endroit. Donc, pour mettre ça sur la page web, nous allons utiliser J fatigué pour le faire. Faire l'homme comme cet endroit. J' ai reçu un SMS pour mettre un texte et obtenir le nom. Souviens-toi, Résultat Ce nom est Chicago. Donc, dans l'endroit appelé Location, on va mettre Chicago. C' est ce que veut dire le commandement. Donc, nous revenons à l'index html et nous avons besoin d'emplacement, et nous avons quelque chose comme ça. Mettons-le ici à Chicago à la place de l'emplacement ici. Mais nous devons le faire pour que Jake où vous le reconnaissiez ? Donc nous allons mettre Span span est juste un support. I d est égal à l'emplacement. Et puis nous devons fermer span, qui est ce que le code de studio visuel nous dit de faire. Donc, cela signifie le temps actuel pour tout ce qui était dans l'emplacement et le I d. Correspond dent hashtag juste ici. Ok, si vous avez une idée, ce sont les signaux de hashtag pour indexer un TML que c'est l'emplacement idéal. Revenons donc à notre page Web et rafraîchissons la météo actuelle pour Chicago. On l'a eu. On fait des progrès. Bien. La prochaine chose que nous allons essayer est l'état du ciel. Donc on va faire de la place ici. Et nous avons vu sous ça que c'est dans la description de la météo. Donc on va essayer ça. Sauf quand on a fait ça. On inspecte ici. Objet Console. Il y a du temps. Il y a une description. Mais il y a ce zéro ici. Alors qu'est-ce que c'est ? Zéro. Le zéro là nous signale que dans l'objet il y a un tableau. Un tableau est simplement une séquence d'éléments. Vous pouvez rechercher le script Java, une augmentation sur W trois écoles et il vous dira maintenant que c'est zéro indice, ce qui signifie que ce tableau de voitures ici c'est l'indice zéro. C' est l'index un, et c'est l'index même s'il a trois éléments, il 012 Donc ce que cela signifie ici, c'est que c'est le premier élément parce que l'élément zéro et le tableau ici il nous dit que vous avez obtenu un tableau avec un seul élément et le premier élément est zéro. Donc, nous allons dire la description de point zéro météo. Ok, donc c'est là que se trouve l'état du ciel. Le chemin entier, par conséquent, est résultat point météo description point de résultat Maintenant, nous devons mettre ceci dans. J requête formée. Mettez-le sur la page. Cette fois, je vais appeler ce type et c'est sous forme de texte. Fermez. Imprimez l'index cessez et anti virgule. Vous pouvez utiliser la formation de travée que j'ai égale cette fois. C'est le ciel qui va fermer la travée. Retourne ici. Ici. Allons le maïs Saidiya ici. Ça pourrait l'être. Et donc nous le rafraîchissons à nouveau. Ciel état ciel clair Merveilleux. On fait du fantastique. Ok, voyons si on peut faire la température. Donc, nous avons encore inspecté. Console, objet. Ok, Température. Il y a la température maintenant les températures et Kelvin C'est dans le Maine et son temp, donc nous devons faire quelques calculs avec la température. Donc javascript est merveilleux pour faire des calculs. Il y a plusieurs façons de calculer une température Fahrenheit à partir de Kelvin et vous pouvez les rechercher sur Google. Je vais utiliser une formule particulière qui fonctionne pour moi. Donc, déclarons une variable F pour représenter Fahrenheit. Donc, laissez si égale et nous savons que la température est en résultat. C' est notre objet. Et c'était dans le Maine point Kemp et nous remplissons le reste de la formule ici et moins je point 67 Donc c'est notre formule pour la température qui nous donnera la température à Fahrenheit. Les opérateurs mathématiques pour le script Java sont les mêmes que ceux que vous connaissez. Moins signifie moins plus signifie plus slash signifie division et étoile signifie multiplication. Cependant, nous allons obtenir plusieurs décimales si nous faisons ce calcul et nous voulons un bon nombre rond. Donc, il y a des fonctions dans le script Java que nous pouvons utiliser et vous pouvez rechercher des fonctions. Mais cette fois, nous allons utiliser une fonction. Il s'appelle Math Round, et cela nous donnera un bon nombre rond de maths autour de tout entre parenthèses et utilisé cela pour nos calculs. Maintenant, on va avoir un joli numéro rond. Cependant, quand JavaScript fait des calculs mathématiques, il met les nombres en binaire, transforme les nombres à l'écran en binaire, et donc nous devons le transformer à partir de Brian Eri toe un nombre que nous pouvons afficher sur l' écran. Donc, en ce qui concerne l'utilisation d'une méthode de script Java et vous pouvez rechercher beaucoup de méthodes sur Google. Mais je vais utiliser un juste et appelé deux chaînes donc f point à chaîne transformera le nombre d'un binaire à une forme que nous pouvons mettre sur la page et parler de le mettre sur la page. On doit utiliser RJ Curry à nouveau. Donc, cette fois, nous allons tirer le sang-froid. Bien sûr, il va être le prochain, et notre numéro est dans Fahrenheit 19 et cela et donc nous allons indexer html et ce que nous faisons à nouveau est que nous re type. J' ai déjà tapé ça pour toi. C' est la durée I d égale la température de la plage avant de la mettre sur la page. Alors faisons un peu de style ici. Mettons un deux-points ici, quelques espaces, puis un espace, puis des degrés et sauvegardons ça. Revenons donc à la page et rafraîchissons la température. Neuf degrés se débrouillaient bien. La prochaine chose que nous faisons, c'est que nous obtenons le vent. Alors on retourne ici. Tu regardes notre objet. Nous voyons que le vent est là et ça va être un aigle de seuil de vitesse à point de vent retour à notre script Java ici et nous commençons à penser au vent maintenant que le vent est donné en mètres par seconde. Nous devons donc transformer ça en MPH. Et la formule que nous allons utiliser pour cela va laisser la vitesse du vent égale la masse ronde et sa vitesse du vent résultat et celle divisée par 0.44704 Cela devrait nous donner où nous voulons aller maintenant. Quelque chose que je veux que vous notiez ici. Vitesse du vent. Tu as une lettre majuscule au milieu. C' est une variable écrite dans ce qu'on appelle l'affaire Camel. C' est ça. Vous combinez deux ou plusieurs mots et majusculez chaque mot après le 1er 1 C'est assez standard dans le script Java. Pas besoin d'utiliser la requête J pour l'obtenir sur la page. Donc nous allons mettre dans Jaqui réforme vent froid, prochaine vitesse du vent, sauf que ce n'est pas du texte. C' est en binaire. Nous devons donc nous rappeler que nous devons le mettre dans une forme de chaîne. Donc nous allons utiliser la vitesse du vent pour ficeler et ensuite nous allons faire cette victoire, donc ça devrait nous mener là où nous voulons aller maintenant. Nous allons à indexer le point html et le mettre là et faire la travée à nouveau, et l'idée est le vent. Et voyons si nous avons ça, gagnez sept mi/h. C' est génial. Maintenant, nous avons une page Web complète. Vous pouvez vous arrêter à ce stade et avoir une page Web parfaitement adéquate. Si tu veux faire de ça ton projet, c'est bon. Si tu veux faire de ça ton projet, Hum, il est parfaitement de trouver que vous pourriez apporter des modifications à ça. Mais je veux vous montrer comment nous pourrions améliorer même sur ce point, donc ce sera notre prochaine liste. 9. Nettoyer des codes: Voyons maintenant. Cela rendrait le code plus efficace. Tout d'abord, nous pouvons ajouter des commentaires. Les commentaires apparaissent sur le code, mais pas sur la page Web. Leurs différentes formes pour l'index, le style et les fichiers Js. Voici donc pour le fichier HTML. Tu vois, ce sont les remerciements. C' est un commentaire. La façon la plus simple de le faire, pour le mettre en évidence, puis sur une barre oblique de commande Mac ou sur une barre oblique de contrôle de machine Windows. Ou vous pouvez simplement les taper. Mais c'est ainsi que vous désignez un commentaire dans le h t m l dans le, um, CSS. C' est un peu différent. Alors vous dites, mettez 18 horloges, Dega et si haut comme ça. Et encore une fois, vous pouvez simplement taper ou simplement utiliser le raccourci clavier, selon ce que vous préférez, puis en JavaScript c'est toujours différent. Alors mettons ceci l'endroit. C' est donc ceux des commentaires dans le script Java. Maintenant, alors que notre code est parfaitement adéquat pour la page, il existe des moyens plus efficaces d'ajouter le texte à la page avec Jake fatigué, et c'est en utilisant quelque chose appelé le format E. S six, que vous pouvez rechercher sur Google si vous voulez plus d'informations, mais laissez-moi vous montrer comment le faire ici. Au lieu d'écrire le Fahrenheit ici, nous allons écrire quelque chose d'autre allaient dire ascenseur, affichage. Tim, c'est encore notre affaire de chameau, égal. Et maintenant, nous avons utilisé le coup de touche en haut gauche qui et nous disons signe de dollar de température. Oui. Et ce que c'est, c'est que f correspond à ce f ici, donc nous n'avons plus besoin de ça. Et ce que signifie le signe du dollar et les crochets, c'est que la température est un littéral et c'est un nombre, et donc vous n'avez pas à transformer le nombre en un numéro de texte. Vous pouvez simplement l'utiliser et cela le fera automatiquement. Et maintenant, nous voulons un signe de diplôme. Alors, comment faites-vous signe un diplôme ? Il y a des façons de le faire. Et les symboles de signe de degré en html, ce qui est ce que nous allons mettre sur la page est esperluette. Hashtag 176 semi deux-points. Que vous pourriez le faire, mais nous voulons ajouter notre propre f. Hum, mais donc nous allons juste utiliser le symbole de degré, et c'est juste ici. C' est que tous les codes point net et vous pouvez le chercher là-bas. Donc, nous allons revenir en arrière et nous allons mettre le symbole du degré, balise de hachage 176 demi-côlon. Et puis on va mettre notre propre f. Ok, donc maintenant on a ça. Et ici, nous devons changer cela pour que nous allons devoir changer ce html parce que nous ne sommes plus en train de mettre juste du texte. Route mettant HTML, c'est HTML. Cela sera transformé en html et c'est HTML. Et au lieu de Fahrenheit, nous allons mettre la température affichée de la tente d'affichage, et nous pouvons ajouter un commentaire à cet effet. Afficher la température. D' accord. Et que nous avons sauvé ça. Et tu retournes ici et on se rafraîchit. Comme vous pouvez le voir, nous avons la température deux fois. Maintenant. Pourquoi c'est ça ? Quoi ? Nous devons retourner au code et nous voyons que nous mettons la température ici pour mettre sur la page, mais nous avons oublié de le sortir ici. Donc on va sortir, arriver ici, et on va ajouter une température égale. On pourrait avoir une idée dans la même classe, donc on n'a vraiment besoin d'autre chose que la classe et moi sommes ici. Et les balises qui vous montrent à quel point le lettrage va être grand. Alors je reviens à ça. Vérifie ça. D' accord ? Et il y a la température pour laquelle on a mis le I D. Donc, on retourne à l'là-bas. Maintenant, nous l'avons. Ok, c'est bien. Maintenant, nous pouvons faire la même chose pour l'emplacement, le vent et les conditions du ciel. Alors commençons par ça. Donc, l'emplacement éclairé ville d'affichage refroidit le temps actuel dans Alors que Oh, n'importe quel jour. Donc, le nom et donc Michael fin et l'emplacement est égal C'est html J'ai obtenu la fin accolade html et c'est html ville d'affichage maintenant jouer ville, et puis nous devons revenir ici et prendre tout cela. Changer le i d en. Ok, alors vérifions ça. Ok, ça marche. Alors maintenant, essayons le vent. Ok, donc ça reste le même, et au lieu de ça, on a du vent à la place de ça qui équivaut vraiment à la vitesse. Il casse vraiment MPH, et cela devient vent d'affichage, et cela devient html Retour à l'index html vent sur et fermer ceci. Tout ce dont nous avons besoin, c'est que l'ID est le vent Vérifie ça. Toujours en train de travailler. Bien. Dernier état du ciel. Maintenant, nous faisons la même chose pour l'état du ciel d'affichage du ciel ciel refroidit l'état du ciel, signe du dollar, accolade bouclée. Et nous voulons ceci et Curly accolade et ligne. D' accord. Et puis cela remonte, M. Knorr. Et puis cela revient au html et cela va à l'affichage. Scott, retournez ici et tout ce qu'il nous faut, c'est le I d pour le ciel et y retourner et vérifier ça. D' accord ? Tout fonctionne merveilleux. Donc, cela nettoie considérablement le code et rend plus efficace et plus lisible. 10. Ajouter des images: Donc, obtenons un arrière-plan plus intéressant pour la page Web. Alors regardons les photos obéir. C' est un de mes endroits préférés pour obtenir, hum, des images. Ils sont libres de redevances, et vous pouvez les utiliser à des fins commerciales. Voyons si on peut avoir des couchers de soleil bruns pour les couchers de soleil. Celui-ci permet de prendre celui-ci, et c'est un téléchargement gratuit gratuit pour un usage commercial, aucune attribution n'est requise. Donc c'est bien. Nous pouvons l'utiliser et le téléchargement gratuit. Et c'est une bonne taille. Donc, nous prenons juste le téléchargement et nous l'obtenons. Mais je l'ai déjà téléchargé, et je l'ai mis sur mon bureau et renommé à quelque chose qui était un nom plus court. Et donc ce que je dois faire, c'est que je dois mettre cette image dans le dossier. Rappelez-vous, nous avons un dossier qui est appelé si le Teczar Index HTML ou CSS style et si CSS nous avons besoin de mettre cela dans ce dossier une copie de leur et il est là. Donc, ce que nous faisons maintenant c'est que nous revenons au code pour cela, et nous revenons au style C s. Et nous allons le faire au lieu de ça 'll. On va faire une image d'arrière-plan et ce qu'on a besoin de voir que tu es l Et comme ça va, et puis on prend ça parce qu'on n'utilisera plus l'arrière-plan de l'avion, va utiliser l'arrière-plan de l'image. On sauve ça. On rafraîchit ça. Et maintenant nous avons notre merveilleux terrain, même si ce n'est n' pas blanc comme nous l'avions imaginé. Nous devons donc faire quelques ajustements. Alors faisons ces ajustements ici. Les ajustements que je veux faire que la taille du sol soupire 100% ce qui signifie que nous voulons que l' arrière-plan couvre toute la page Web. Hauteur minimale. 100 %. C' est un autre ajustement à faire et avec 100%. Donc nous voulions remplir tout l'écran. C' est pourquoi nous faisons tous ces ajustements CSS ici. Donc on y retourne et on y est frais. C' est maintenant que nous avons toute l'image sur la page. Ah, l'autre chose est que ce n'est pas contrasté Eh bien, donc nous devons faire quelque chose avec ça. La façon dont nous améliorons le contraste du texte est ceci Tout d'abord, nous savons que nous avons déjà l'en-tête avec sa propre classe, ce qui nous permet d'économiser du codage. Donc, nous revenons au style CSS et il y a l'en-tête et il y a quelque chose appelé couleur et la couleur signifie la couleur du texte. Donc, utilisons-nous cela et rendons la couleur égale blanc colon politicals. Sauvegardez ça. Retournez ici, rafraîchissez leur Maintenant, vous avez un contraste amer. Ok, on va bien. Disons maintenant que nous voulons ajouter une image ici. On a l'image de fond. Qu' est-ce que nous voulons ajouter une autre image là-dedans, donc nous voulons ajouter, disons, un fils. Donc j'ai un fils déjà sauvé. Laisse-moi mettre le soleil et j'ai eu ça à partir de picks un appât pour Sun Tiantian. Il y a le soleil. Maintenant que nous avons l'image de notre fils, où voulons-nous la mettre ? Eh bien, nous le mettons dans l'index html. Nous ne le mettons pas en arrière-plan parce que ce n'est pas un arrière-plan. Nous le mettons dans l'index html. Donc, disons que nous voulons quitter le soleil au-dessus de l'en-tête. Alors voilà ce qu'on fait. Nous disons que la source de l'image est égale au nom du fils de l'image PNG et qu'il est toujours bon d' avoir un autel, qui signifie que si l'image n'apparaît pas pour une raison quelconque, nous avons un texte à mettre à sa place. Ce fils la ferme, le sauve , retourne en arrière et le met ici. Sauf que c'est un peu grand. Voyons ce qu'on peut faire à ce sujet. On retourne ici et on met les bons refroidissements et ce n'est pas des pixels. Nous mettons la hauteur de 50 pixels et nous voulons avec 50 pixels. Dormez avec papa, sauvegardez ça, retournez et rafraîchissez-vous. Ok, c'est bien par ici. On peut l'avoir ici si on le veut. C' est parfaitement bien si vous voulez avoir l'image là-bas. Mais mettons-le au milieu et il y a un moyen vraiment facile de le mettre au milieu parce que le temps d'aujourd'hui est déjà centré. Nous pouvons simplement déplacer cette ligne vers ici et elle sera automatiquement centrée parce que l' en-tête de classe est centré dans tout dans la Div. Alors fais ça et on l'a. Donc maintenant, nous avons un beau site Web à la recherche 11. Conclusion: Maintenant, nous avons un ensemble complet de fichiers pour faire notre site. Nous avons l'index HTML, qui est-ce ? Nous avons notre style CSS, qui est-ce ? Et nous avons notre javascript, qui est ceci et tout ce que vous devez faire avec le script Java est de mettre votre, um, clé ici votre propre clé, et de mettre un ensemble de guillemets après cela et un demi-deux-points après cela et c'est fait, vous pouvez changer la ville. Si vous vivez dans une autre ville et que vous voulez avoir vos propres prévisions météo personnelles, vous pouvez dire Denver, sauvegardez cela. Retournez ici et prenez le temps pour Denver. Si vous vivez dans une ville comme San Francisco, je dois mettre un ami plus sable plus. Je pense que et mettre ça là pour que nous ayons le temps actuel à San Francisco va le remettre. Chicago ici faire ça pour vous montrer que si vous voulez ajouter des choses telles que l'humidité ou le e um, le temps ou tout ce que les nuages, tout est ici, et vous pouvez simplement cliquer sur ceux-ci et ajouter les et aussi aller dentés. Temps libre AP. Je découvre dans quel format ils sont affichés. Celles, si tu veux. Il y a donc beaucoup de choses que vous pouvez faire ici. Vous pouvez modifier les styles parce que vous connaissez CSS maintenant vous pouvez changer l'arrière-plan. Vous pouvez changer les images, changer les polices. Si vous voulez faire une page qui va droit sur le web au lieu de juste sont la page simulée, vous pouvez obtenir un site d'hébergement, utiliser leur panneau de visualisation, et tout ce que vous auriez à faire là est de copier tous ces fichiers, ces trois plus ces deux images à l'intérieur. Et vous auriez votre propre page web personnelle qui a votre propre météo actuelle pour votre propre ville. Hum, que vous puissiez en faire votre projet, vous pouvez poster votre projet, vous pouvez écrire des commentaires et vous pouvez suivre mon profil. Donc vous avez maintenant tout pour tout mettre ensemble. Et je vous souhaite bonne chance. Et je vous remercie de votre attention. Ok,