Aprenda HTML, CSS, JavaScript/jQuery, e APIs: construa um site de previsão de tempo!

1. Introdução: Olá. Meu nome é Joan Marie Verba. E bem-vindo a esta classe e desenvolvimento Web. Nós vamos criar um site meteorológico usando um A P. Eu chamo para o tempo aberto um olhar P I A p, ar divertido e você pode encontrar uma ampla gama de tópicos entre eles para criar todos os tipos de páginas web interessantes. Eu tenho sido um programador de computador e desenvolvedor Web por muitos anos. Eu revestiu uma série de sites. Este site em particular que você vê agora é a minha página de portfólio. Esta é uma página que mostra meus projetos. Esta é uma página que é o meu currículo online. Esta é outra página que eu desenvolvi e esta é a minha página de hub get onde eu armazenar meu código. Ao longo desta classe, eu vou ensiná-lo a criar um aplicativo meteorológico usando HTML, CSS e JavaScript dentro de um p eu chamo. Você pode usar essas habilidades para criar seu próprio site meteorológico ou um site usando outro a p i. Esta classe pode ser tomada por aqueles que têm algum conhecimento de HTML, CSS e javascript. Mas é destinado a estudantes sem experiência em desenvolvimento web. Esta aula é ótima para freelancers. Lado hustlers ou até mesmo amadores, porque você pode usar essas habilidades para obter uma variedade de sites usando um olhos P. No final desta aula, você terá o código para implantar seu próprio site meteorológico. 2. Editor de código: Antes de começarmos a codificar, vamos precisar de um editor de código. Um texto simples. Editores como No Tad trabalharam muito bem. Embora eu recomendo contra o uso de um processador de texto, é melhor usar um editor de código especializado, e eu uso o código Visual Studio, que é um download gratuito e funciona para Windows, Mac e outras plataformas. Você poderia. Além disso, ele era Adam, que é outro download gratuito. Se você tem um editor de código como Sublime Text ou outro editor de código já funcionando, tudo bem também. Mas eu recomendo baixar um editor de código antes de passar para o próximo passo. 3. Configuração do arquivo: Agora vamos criar nossos arquivos. A primeira coisa que precisamos é de uma pasta. Estou em um Mac, mas o processo no Windows é semelhante. Basta usar uma nova pasta. E então nós estamos indo para a criação de pasta. Vou chamar-lhe “Tempo”, e agora vamos para o nosso código de estúdio visual e vamos abrir a pasta. Se já foi criado, como eu fiz antes. Você pode fazer isso ou você pode usar pasta aberta. Mas agora vamos pegar o tempo e com o tempo, vamos criar arquivos. Podemos pressionar este botão aqui para criar arquivos. O primeiro arquivo é um arquivo HTML de índice que manterá o código que vai diretamente na tela. Nosso segundo arquivo que vamos criar é estilo CSS e que terá um arquivo que diz ao código como colocá-lo na tela. E então vamos criar nosso trabalho, um arquivo de script, e vamos chamá-lo de Tempo J S. E esse arquivo dará os dados e recuperará os dados e colocará os dados em uma forma que possamos colocá-los na tela. Então, antes de tudo, eles querem configurar o índice. Arquivo Html. Se você estiver usando um código de estúdio visual, há uma maneira muito fácil de obter um modelo. Você faz um ponto de exclamação turno e, em seguida, você faz um retorno e dá-lhe este modelo realmente agradável . O código que vai para a tela está entre as duas tags corporais aqui. Este código aqui é para seguir o navegador. Como código Toe Intérprete. O título aqui é o título que você verá na parte superior da tela para os navegadores. Vamos chamar isso de tempo de hoje e usar isso e então vamos salvar isso e continuar com estilo. Veja, avalie agora estilo. Ver avaliação. Não precisamos fazer nada com no momento para o arquivo de script Java. Nós vamos colocar você strict, que é apenas um, um, comando padrão para script Java, e agora vamos voltar para o índice html porque o arquivo html index precisa saber que o estilo CSS e os arquivos do tempo Js estão lá e ele precisa se comunicar com eles . Então vamos fazer isso por um comando frio e você pode simplesmente copiar isso, bem como copiar o resto do modelo. Se você não tiver um arquivo de modelo no seu navegador, até mesmo copiado da minha tela aqui. Bom estilo. Veja, Assis. Você vai fazer trilho é igual a folha de estilo porque é isso que é. É uma folha de estilo, e vamos colocar para fechar isso. Se fizermos isso agora, não é como você percebe. Isto é entre as duas mensagens de cabeça, não na etiqueta de corpo, e é a última coisa antes da última etiqueta de cabeça. E então estamos dizendo para indexar HTML aqui que você está indo para obter alguns comandos de estilo. CSS. Isso é o que estamos dizendo agora para o arquivo JavaScript. O arquivo de script Java fica na parte inferior. Então vamos colocar o arquivo de script Java na parte inferior, e o caminho que vai da maneira que indicamos é com isso agora novamente, você pode simplesmente copiar isso de onde eu estou fazendo isso, é chamado de Tempo J s e então script. Agora, como você pode ver, uma das vantagens de usar o código do Visual Studio é que o código do Visual Studio lhe daráatag do script final. como você pode ver, uma das vantagens de usar o código do Visual Studio é que o código do Visual Studio lhe dará a Uma vez que você tenha feito essas tags de script iniciais, você não precisa digitar isso. Nós vamos salvar isso. E, uh, agora você tem seus arquivos configurados. Uh, se você quiser armazenar seu código, você pode usar armazenamento em nuvem como Dropbox ou iCloud ou qualquer outra coisa, ou você pode copiá-lo para, você sabe, uh, pen drive. Ou você pode obter um hub de presentes, um , repositório, que está além do escopo deste curso, e copiar seu código lá. Mas eu recomendo fazer backup do seu código praticamente em todos os estágios porque é fácil perder seu código e então você é, um Então você tem que recriá-lo novamente. Então este é o apenas o básico configurado para o código, e vamos começar a partir daqui 4. Página de HTML básico: agora vamos preencher a página HTML agora, não há nada lá. Se você quiser ver a página a qualquer momento, podemos clicar com o botão direito do mouse e abrir e navegador padrão e ver que não há nada na página. Não importa o que você olha para o topo, diz o tempo de hoje. Isso é porque nós colocamos isso no título. Vamos voltar e começar a colocar as coisas na página. A primeira coisa que vamos fazer na página é colocar um título ou a página. Vamos usar a etiqueta H 1, que é a maior letra. O tempo de hoje agora H um, como eu disse, é a maior etiqueta. Há tags menores, cada uma para um menor que H um H três, um menor que H dois e H seis é muito pequeno, então você pode ajustar o tamanho da letra. Dessa forma, essa é uma das muitas maneiras de ajustar o tamanho das letras. Então vamos salvar isso e ver o que acontece. Você pode apenas atualizar a página aqui, e há o tempo de hoje. Ok, agora vamos começar a preencher a página com outras coisas que queremos com letras menores. Vamos fazer H dois e vamos colocar no local. Então, uh, tempo para localização e nós vamos preencher o local mais tarde, e então nós vamos querer a temperatura. Então colocamos a temperatura e colocamos alguns espaços reservados agora para isso. E então vamos colocar na velocidade do vento e, em seguida, vamos colocar em condições do céu querendo sobre sua qualidade clara chuvosa, quaisquer que sejam as condições do céu. Então, aqueles espaços reservados para o que vamos conseguir mais tarde. Então, agora vamos ver, uma vez que o salvamos, como isso parece, então podemos apenas atualizar a página aqui e ali estão eles, seja para localização, hum, temperatura, vento, condições do céu, vamos fazer isso'll tempo atual para localização. Agora há uma razão para isso, e esses são os dados. Vamos receber mudanças a cada 10 minutos, então vamos ter o tempo atual para qualquer local que lhe digamos para obter o tempo. Neste momento, só queremos ter algo na página, e fazemos isso. Temos tempo atual para localização. Lá estamos nós. Então esse é o nosso material básico. E essa é a nossa página HTML básica. E, uh, na próxima lição irá e abordar alguns problemas de estilo 5. Estilização de CSS: Agora vamos estilizar a página usando C. S s CSS significa folha de estilo em cascata. A primeira coisa vai tentar é um fundo cores. Então vamos para a página CSS estilo e escrever corpo porque queremos que a cor seja para toda a página que corresponde a esta tag body nesta tag body. Então vamos fazer isso e dizer “Você quer cor de fundo”? Como você pode ver, código do estúdio visual está me avisando aqui, então eu seleciono a cor de fundo. Ele também está me dando uma variedade de cores para selecionar. Então vamos tentar o azul do céu. Observe que a tag body é chamada de seletor. O seletor é seguido por uma chave de abertura, seguida por quaisquer instruções que você deseja e termina com uma chave de extremidade. Então o que salva isso e voltar aqui e atualizar e nós temos o fundo azul. Ótima. Agora esta é uma fonte padrão, então vamos ver se podemos obter outra luta. Para fazer isso. Vamos para fontes dot google dot com e rolamos pelas fontes e vemos se há algo que queremos para você. Então este parece bom, então vamos tentar este, você clica no mais e, em seguida, você clica no menos aqui e ele tem duas linhas de código. Esta é a primeira linha de código que vai para o h t m l. Então vamos copiar e colar que vende o HTML que temos uma fonte que queríamos usar e, em seguida, o segundo é colocar no CSS. Então copiamos e colamos isso e isso vai abaixo disso. Tente de novo. Lá está ele. E então salvamos isso e voltamos aqui e atualizamos a página novamente. E a fonte mudou. Maravilhoso. Agora vamos tentar outra coisa. Vamos ver se podemos centralizar o cabeçalho. Só queremos o centro da primeira linha. Então vamos voltar para o HTML e vamos separar a primeira linha usando o que é chamado de diff. Agora. O código do estúdio visual está me lembrando que se eu tiver um Divi começando tem que combiná-lo com div interminável. Então eu pego isso e nós vamos cercar a primeira linha porque nós estamos recebendo a primeira linha e eu posso ver que eu não copiei isso. Certo, então vamos para aqui e lá está. E leve isso lá para fora. Agora nós temos isso separado, o que é ótimo, mas nós queremos, hum, hum, centralizar a linha de cabeçalho. Então nós colocamos uma aula sobre isso bem aqui. Classe é igual e dê um nome a ele. Vou chamá-lo de melhor. Pode ser qualquer nome, mas é bom ter um nome descritivo. Quando usamos uma classe em CSS, colocamos ponto na frente para que pudéssemos acertá-la. Colocamos isso e depois passamos por cima e vemos se podemos determinar qual, uh, comando usar para CSS. Então nós colocamos, hum, C S s texto central. Ok, isso parece bom. Então vamos até aqui e vemos o texto alinhar. Propriedade parece ser este e w três escolas é um lugar muito bom para ir para encontrar informações. E vemos que há um comando chamado centro de alinhamento de texto para usar no CSS. Agora, no lado esquerdo da página, você pode ver que há um monte de comandos CSS, e você pode procurá-los a qualquer momento se precisar deles. Mas agora estamos procurando algo para centralizar o texto, e é isso. Então nós copiamos e colamos que você salve isso e voltamos para a nossa página lá. Agora é o centro. Certo, estamos indo bem. Agora vamos colocar mais espaço entre a linha superior e isso. Agora, para fazer isso, precisamos de uma margem. Então só precisamos colocá-lo no fundo porque a margem é para, você sabe, a margem. Margem superior, margem direita, esquerda, margem inferior. Vamos precisar de margem inferior porque vamos aumentar este espaço aqui. Então começamos isso com margem e novamente, código do Visual Studio está me pedindo, e vamos colocar ah, 100 pixels. Agora, Pixel é um muito pequeno, um comprimento ou com na página, você pode Google pixel se quiser mais informações. Mas agora, vamos fazer isso. E se tivermos isso, voltamos aqui e atualizamos a página. Você vê, há mais espaço, seu dedo do pé compensa. Isso é maravilhoso. Isso é o que queremos. Ah, Agora vamos mover os dados sobre um pouco dizendo o lado esquerdo do ritmo, queremos movê-lo um pouco mais. Então, de novo. Vamos cercar tudo isso com um div. As quatro linhas que queremos separadas com as quedas que vamos dar e, em seguida, o código do estúdio visual está nos lembrando que temos que ter um final. Então pegamos isso e colocamos no final. Lá estamos nós. Certo, e agora precisamos de outra aula. Vamos chamar esses dados de classe e voltar para o CSS. Coloque um dado pato. Está bem. E agora vamos fazer uma margem esquerda. Agora, desta vez em vez de pixels, vamos usar algo chamado vista com E a razão pela qual vamos fazer isso é que se você visualizar a página em um smartphone ah ou em um tablet ou outro dispositivo que não seja um laptop ou tela da área de trabalho, que irá diminuir automaticamente suas dimensões para você e fazer os ajustes. Então é aí que vamos fazer isso. Então vamos fazer 20 ver com e ver o que isso vai fazer para então 20 ver com dados. Você atualiza a página. Nada mal. Está bem, isso parece bom. Ok, então, uh, este parece ser um pequeno avião, então vamos Mitt colocar todos estes em uma caixa. Então, para fazer isso, vamos até aqui Agora, há algumas maneiras de fazer isso. Ah, mas o que vamos fazer porque queremos cada um deles separadamente em uma caixa, vamos colocar uma classe na tag H dois em vez de uma tag div. E você pode fazer isso. Então use classe igual caixa, e então vamos apenas copiar e colar para os outros. E isso significa que teremos a mesma caixa para cada um desses, ok? E isso E agora vamos para o estilo CS S e estilo, a caixa euronews blocos. E o que vamos fazer primeiro é criar uma caixa literal usando o que é chamado de comando de fronteira. Então borda três pixels, roxo sólido. Agora, o que isso significa é que vamos ter uma caixa ao redor do texto. As linhas da caixa serão de três pixels, , com e será sólida em vez de uma linha pontilhada, por exemplo, e a linha será roxa. Assim que fizermos isso, voltamos e atualizamos a página. E lá estamos nós, exceto as caixas de ar indo mais tempo do que queremos. Então vamos fazer outra coisa. Você quer uma margem, certo? Certo. E novamente, vamos usar a vista com e vamos tentar uma visão de 50 com e ver o que isso faz. Então, uma margem, certo? 50 vista com em que os psiquiatras são caixas para nós. Maravilhoso. Exceto que as caixas de ar meio que tocando o texto. E nós queremos talvez um pouco de espaço lá. Então vamos ver se conseguimos um pouco de espaço. Então, para fazer o pequeno espaçamento, use o comando de preenchimento e quero que queria ser todo em torno do texto para que não usamos parte superior inferior esquerda, direita, Embora pudéssemos. Então vamos usar 10 pixels para este porque é um comprimento pequeno. Então vamos usar pixels e então fazemos isso, e como você pode ver as caixas ou maiores, maravilhosas, muito boas até agora, isso é maravilhoso. Então vamos deslocar as caixas com uma cor de fundo para que as caixas pareçam um pouco diferentes do plano de fundo. Então vamos fazer isso. Vamos fazer uma cor libra de fundo. Agora você percebe que isso é diferente da cor de fundo superior porque isso para todo o corpo. Mas esta cor de fundo em Lee para a caixa. Isso é o que isso significa. Então, garotinha, tente bege se isso e guarde isso. E atualizamos a página e vemos o que acontece. E lá, uh, isso está parecendo muito bom. Então agora estamos prontos para fazer o arquivo javascript. 6. Configurar a chamada de API: Agora estamos prontos para começar com JavaScript, mas antes de usar qualquer javascript, precisamos ser capazes de obter alguns dados para trabalhar. Então nós vamos para o aberto, se um p i, que é a barra do mapa meteorológico aberto dot org ap I e vamos ver que tipo de dados queremos recuperar o tempo. Ap. Eu oferece todos os tipos de dados para o tempo atual dados meteorológicos três são previsão, previsão de 16 dias e todos os tipos de outros dados que podemos usar. Agora, vamos usar os dados meteorológicos atuais. Então vamos olhar para o A P. I, doc e ver que podemos obter os dados meteorológicos atuais pelo nome da cidade City I D coordenadas geográficas, CEP e todos os tipos de outras formas de obter os dados. Para obter os dados, você tem que ter o que é chamado de chave oito p I. Então o que você precisa fazer para obter uma chave A p I é se inscrever. Então você cria uma conta e preenche a conta de criatura em branco. Depois de criar sua conta, você entra e, em seguida, você pode clicar em uma chave P I e obter sua chave A P I. Eu não vou fazer isso aqui, mas você vai ter a sua chave A P i. Eu mostro-te. Será uma longa cadeia de letras e números. Então você volta para o A P I e nós precisamos descobrir o formato que precisamos usar para recuar. Agora vamos recuperar pelo nome da cidade. Então aqui está o nosso formato A P que eu chamo. E então nós vamos copiar isso e vamos colá-lo aqui agora, a fim de fazer um A P que eu chamo com script Java, precisamos ter uma necessidade de ter isso. Precisamos ter um u r l que possamos usar que tenha a chave nele. Agora, para isso, vamos criar uma variável. Agora, variáveis são coisas que você pode se lembrar da aula de matemática. Você pode ter visto X é igual a Y mais Z onde X variáveis weinsier em javascript me declarar variáveis. Podemos fazer isso de três maneiras. Use const. Você pode usar um elevador. Podemos usar uma feira, e o Const simplesmente significa que não esperamos trocos extras. Por que significa que esperamos Let significa que esperamos por que mudar. E há qualquer um deles. Neste caso, vamos usar Const porque não esperamos que isso mude. Será sempre a mesma chamada. E nós vamos chamar isso de algo descritivo chamado U R L. E nós vamos fazer um igual. E agora queremos usar isso. Então vamos fazer isso e vamos fechar os espaços, o que é sempre uma boa idéia. Agora, isto vai ser uma isto vai ser uma chamada para um endereço web. Então, para um endereço web, precisamos de http e quase o temos aqui. Precisamos escolher nomes de uma cidade. Vamos escolher Chicago apenas para fins de ilustração. E agora temos que colocar o nosso chá. Agora, a maneira como fazemos isso é usar um e comercial com AP. Eu era igual e depois disso é a chave. Agora tenha fakey construtiva aqui novamente, ele vai ser uma cadeia de letras e números. Vamos colocar isso lá e então vamos colocar isso entre aspas. E agora com isso, podemos fazer o que é chamado de “A P. Eu chamo para o mapa do tempo aberto, a fim de obter nossos dados, e discutiremos isso na próxima lista. 7. Recupere dados: Agora vamos trabalhar com chamadas de script Java e para usar chamadas JavaScript, vamos usar algo chamado Jake Weary. Então precisamos alertar html índice que estamos usando J Query. Então vamos para G Weary CD em e clique no CD en, e você quer usar o 1º 1 J núcleo de consulta 3.3 ponto um un comprimido usado que nós fazemos uma cópia sobre isso, na verdade, no h t. E agora e colocá-lo aqui e o JavaScript vai para baixo e nós vamos apenas colocá-lo sobre a chamada para o tempo Js. E agora vamos para o tempo J s e começar a trabalhar com isso. Então, o que precisamos fazer para recuperar os dados do tempo? Oito p i. E, a propósito, um P I. P significa interface de programação de aplicativos. É uma interface. Então vamos usar o que é chamado de chamada Ajax. E este é o formato de garotas e, como de costume, código do estúdio visual está preenchendo em seu Ajax com a frente inicial, a temporada aberta, uh, verdadeiramente cinta e, em seguida, fechando a chave encaracolada e fechando parênteses, e nós vamos fazer toda a ação aqui. Então nós vamos começar com você R l Você está doente agora. Este u r l diz-lhe que vamos enviar-lhe um u r l e este u R l combina com isto. Poderíamos ter chamado de qualquer coisa poderia chamá-lo de nome. Podíamos ter colocado o nome aqui e o nome aqui. Tudo bem, mas nós colocamos você r l Então é isso que é. E agora vamos dizer que após o sucesso, isto é, os dados foram recuperados com sucesso. Vamos colocar todos os dados em uma variável chamada resultado. E novamente, nós usamos o fechamento aberto, verdadeiramente aparelhos. Vamos fechar isso, e toda a ação vai dentro das chaves aqui. Então, que tipo de ação queremos primeiro? Bem, no começo só queremos confirmar que temos dados, então vamos fazer o resultado do console. E então o que isso significa é colocar o conteúdo do resultado que é, colocar os dados que recuperamos do tempo aberto ap I em resultado e, em seguida, colocar todas essas coisas na página da Web. E agora vamos olhar para a página da Web. Depois de salvarmos nosso código sobre se o ponto J s, voltamos para a nossa página e fazemos a atualização. E onde estão os nossos dados? Bem, está na página, mas temos que fazer um clique direito, inspecionar e olhar o que é chamado de Ferramentas de Desenvolvimento, a fim de ver se este ar chamado Ferramentas de Desenvolvimento e este tem o HTML para a página. Mas não consomamos os registos. Vamos clicar no Cônsul e há objeto que são nossos dados. Agora, se você receber uma mensagem de erro, certifique-se de verificar e ver se Jay Query está na página HTML. Certifique-se de que sua chave está no lugar certo. Certifique-se de que tudo está escrito corretamente e que você tem o número certo de chaves . Verifique todas essas coisas se você receber um erro. Mas não temos um árabe. Temos os nossos dados. Assim, os dados estão em um objeto e o objeto é simplesmente uma maneira toe. Organize seus dados. Se você quiser saber mais sobre objetos, você pode ir para W três escolas dot com e procurar objetos JavaScript, e ele vai explicar tudo sobre o que um objeto é e como ele é organizado. Mas vou te mostrar o que precisamos pegar do objeto aqui. Precisamos clicar na seta, e agora temos alguns dados. Isso é ótimo. Diz o nome da cidade de Chicago, que é maravilhoso. Temos uma temperatura. Ótima. Você tem uma velocidade do vento bem aqui. Ainda não temos condições do céu, então vamos começar a clicar nas setas. E acontece que eu sei que é esta flecha bem aqui. E nós temos uma descrição, céu claro. Então temos os dados com os quais precisamos trabalhar. Agora precisamos interpretar esses dados. Então precisamos voltar para a página atual de dados meteorológicos no mapa do tempo aberto e rolar para baixo , e vemos que há um lugar. As conversas acima de Jason e Jason é a forma como o objeto é organizado. Jason significa notação de objeto JavaScript sem emprego, e é isso que queremos porque estamos trabalhando em JavaScript. Então descemos e olhamos para os parâmetros e vemos o que temos aqui. Refinar a temperatura é a temperatura principal ponto e está em graus Kelvin. Então vamos ter que fazer alguns cálculos, entrar em Fahrenheit. A velocidade do vento é metros por segundo, então vamos ter que fazer alguns cálculos. Ele não rato por hora, e então você tem um nome, nome da cidade. E nós temos, hum, condições, se descrição, se descrição dentro do grupo. Então temos todos os nossos dados, e é assim que dizemos o que temos. Então o que vamos fazer, para o tempo de hoje, é pegar o nome primeiro. E o nome é Chicago aqui. Essa é a mais fácil de pegar. Então vamos voltar para a nossa página e vamos ver se podemos pegar esses dados. Agora diz o seu nome. Escreva seu nome, mas temos que colocar algo na frente dele porque lembre-se, os dados foram colocados um objeto chamado Resultado. E lembre-se que nos dados meteorológicos, tudo é pontilhado. Então voltamos aqui para o nosso código e vamos para aqui e não vamos querer apenas ver se conseguimos o nome. Então vamos fazer o log dos resultados do console. Esse é o nome dos objetos em e nome, que é o lugar dentro do objeto que ele está. Fazemos isso, salvamos isso, voltamos aqui, atualizamos a página e fazemos o log do console novamente. E aqui está o nosso objecto no topo. E aqui está o nosso nome. Em Chicago. Então temos o nosso nome. Sabemos que podemos obter o nome do nome do ponto resultado e podemos ir a partir daqui. 8. Colocar dados na página web: Agora o que queremos fazer é colocar todos os dados na página da Web. Então vamos começar com o nome da cidade. Esse é o local. Então, a fim de colocar isso na página web, nós vamos fazer uso de J cansado, a fim de fazer isso. Faça um homem como este local. Eu tenho um texto que vai colocar um texto e resultar o nome. Lembrem-se, Resultado, esse nome é Chicago. Então, em um lugar chamado Localização, vamos colocar Chicago. Isso é o que o comando significa. Então voltamos ao índice html e precisamos de localização, e temos algo assim. Então vamos colocá-lo aqui em Chicago no lugar de localização aqui. Mas temos de o fazer para que o Jake o reconheça? Então vamos colocar Span span é apenas um suporte. Eu é igual a localização. E então temos que fechar o espaço, que é o que o código do estúdio visual está nos dizendo para fazer. Isso significa que o tempo atual para o que estava no local e o ID corresponde a hashtag dentada bem aqui. Ok, se você tem uma idéia, são os sinais de hashtag para indexar um TML que é idee localização. Então vamos voltar para nossa página da Web e atualizar o tempo atual para Chicago. Nós temos isso. Estamos progredindo. Bom. A próxima coisa que vamos tentar é a condição do céu. Então vamos abrir espaço aqui. E pudemos ver que vimos sob isso que está na descrição do tempo. Então vamos tentar isso. Exceto quando fizemos isso. Nós inspecionamos aqui. Objeto de console. Há tempo. Há uma descrição. Mas há este zero aqui. Então, o que é isso? Zero. O zero lá está sinalizando para nós que dentro do objeto há uma matriz. Uma matriz é simplesmente uma sequência de itens. Você pode olhar para cima script Java, um aumento em W três escolas e ele vai dizer-lhe agora este é zero índice, que significa que esta matriz de carros aqui este é índice zero. Este é o índice um, e este é índice para mesmo que ele tem três elementos que 012 Então o que isso significa aqui é que ele é o primeiro elemento porque o elemento zero e a matriz aqui está nos dizendo que você obteve matriz com apenas um item nele e o primeiro item é zero. Então nós vamos dizer tempo zero ponto descrição. Certo, então é aí que está a condição do céu. O caminho inteiro, portanto, é resultado resultado ponto tempo descrição Agora precisamos colocar isso em. J consulta formada. Ponha na página. Desta vez vou ligar para esse cara e está em forma de texto. Fechar fora. Imprima o índice cessar e anti vírgula. Você pode usar a formação de extensão que eu d igual desta vez é o céu vai fechar fora do espaço que. Volte aqui. Aqui. Vamos Saidiya milho aqui. Isso pode ser. E então nós o atualizamos novamente. Céu condição céu claro Maravilhoso. Estamos indo fantásticos. Ok, vamos ver se conseguimos fazer a temperatura. Então inspecionamos novamente. Console, objeto. Certo, Temperatura. Há a temperatura agora as temperaturas e Kelvin está no Maine e sua temperatura, então temos que fazer alguns cálculos com a temperatura. Então javascript é maravilhoso para fazer cálculos. Há muitas maneiras de calcular uma temperatura Fahrenheit de Kelvin e você pode procurá-los no Google. Vou usar uma fórmula específica que funciona para mim. Então vamos declarar uma variável F para representar Fahrenheit. Então deixe se é igual e sabemos que a temperatura está em resultado. Esse é o nosso objeto. E foi em Maine dot Kemp e nós preenchemos o resto da fórmula aqui e menos eu ponto 67 Então essa é a nossa fórmula para a temperatura que nos dará a temperatura em Fahrenheit. Os operadores matemáticos para o script Java são os mesmos que você está familiarizado. Menos significa menos mais significa mais barra significa divisão e estrela significa multiplicação. No entanto, vamos obter várias casas decimais se fizermos este cálculo e queremos um bom número redondo. Então, existem funções no script Java que podemos usar e você pode procurar funções. Mas desta vez em particular vamos usar uma função. Chama-se Math Round, e isso nos dará um bom número redondo matemática arredondando tudo entre parênteses e usou isso para nossos cálculos. Agora vamos ter um bom número redondo. No entanto, quando JavaScript faz cálculos matemáticos, ele coloca os números em binário, transforma os números na tela para binário, e então precisamos transformá-lo de volta de Brian Eri para um número que podemos exibir tela. Então, considere usar um método de script Java e você pode procurar muitos métodos no Google. Mas eu vou usar um justo e chamado duas cordas para f ponto para string vai transformar o número de um binário para uma forma que podemos colocar na página e falar sobre colocá-lo na página. Precisamos usar RJ Curry de novo. Então, desta vez vamos puxar o temperamento. Claro, vai ser o próximo, e nosso número está em Fahrenheit 19 e que e assim vamos indexar html e o que fazemos novo é nós re digitar. Eu já digitei isso para você. É a extensão I d é igual a temperatura perto do espaço antes de colocá-lo na página. Então vamos fazer um pouco de estilo aqui. Vamos colocar dois pontos aqui, um par de espaços e, em seguida, um espaço e, em seguida, graus e salvar isso. Então vamos voltar para a página e atualizar a temperatura. Nove graus estavam indo muito bem. A próxima coisa que fazemos é apanhar o vento. Então voltamos aqui. Você olha para o nosso objeto. Vemos que o vento está aqui e vai ser águia do parapeito da velocidade do ponto do vento de volta ao nosso script Java aqui e começamos a pensar no vento agora que o vento é dado em metros por segundo. Então precisamos transformar isso em MPH. E a fórmula que vamos usar para isso vai deixar a velocidade do vento ser igual à massa redonda e sua velocidade do vento resultante e que dividido por 0,44704 Isso deve nos dar onde queremos ir agora. Algo que quero que anote aqui. Velocidade do vento. Você tem uma letra maiúscula no meio. Esta é uma variável escrita no que é chamado caso Camel. Isso é. Você combina duas ou mais palavras e capitalizar cada palavra após o primeiro 1 Isso é bastante padrão no script Java. Não há necessidade de usar consulta J para obtê-lo na página. Então vamos colocar na reforma de Jaqui vento frio, próxima velocidade do vento, exceto que isso não é texto. Está em binário. Então precisamos lembrar que precisamos colocá-lo em uma forma de corda. Então nós vamos usar a velocidade do vento para corda e então nós vamos fazer esta vitória, então isso deve nos levar para onde nós queremos ir agora. Vamos para indexar dot html e colocá-lo lá e fazer span novamente, ea idéia é vento. E vamos ver se temos isso fora, ganhar sete MPH. Isso é ótimo. Agora temos uma página web completa. Você pode parar neste ponto e ter uma página da Web perfeitamente adequada. Hum, se você quer fazer deste seu projeto, tudo bem. Está perfeitamente achando que você poderia fazer modificações nisso. Mas quero mostrar-vos maneiras de melhorarmos até mesmo nisto, modo que essa será a nossa próxima lista. 9. Limpeza de código: Agora vamos ver. Tornaria o código mais eficiente. Primeiro, podemos adicionar comentários. comentários aparecem no código, mas não na página da Web. Suas diferentes formas para o índice, o estilo e os arquivos Js. Então aqui está para o arquivo HTML. Veja, estes são os agradecimentos. Isso é um comentário. A maneira mais fácil de fazer isso, para destacar isso e, em seguida, em uma barra de comando Mac ou em uma barra de controle de máquina Windows. Ou você poderia apenas digitar isso. Mas é assim que você designa um comentário no h t m l no, hum, CSS. É um pouco diferente. Então você diz, colocar 18 relógios, Dega e tão alto assim. E, novamente, você pode apenas digitar o ou apenas usar o atalho de teclado, que você preferir, e em JavaScript ainda é diferente. Então, vamos colocar isto no local. Então esse é o dos comentários no script Java. Agora, enquanto nosso código é perfeitamente adequado para a página, há maneiras mais eficientes de adicionar o texto à página com Jake cansado, e isso é usar algo chamado formato E. S 6, que você pode procure no Google se quiser mais informações, mas deixe-me mostrar-lhe como fazê-lo aqui. Em vez de escrever o Fahrenheit aqui, vamos escrever outra coisa que iria dizer levantar, exibir. Tim, este é o nosso caso de camelo de novo, igual. E agora usamos o golpe de tecla mais superior esquerda que e dizemos sinal de dólar de temperatura. - Sim. E o que isso é é este f corresponde a este f aqui, então não precisamos mais disso. E o que o cifrão e os colchetes significam é que a temperatura é literal e isso é um número, e então você não precisa transformar o número em um número de texto. Você pode usar isso e isso fará isso automaticamente. E agora queremos um sinal de graduação. Então, como você faz um sinal de graus? Hum, há maneiras de fazer isso. E os símbolos de sinal de grau em html, que é o que vamos colocar na página é comercial e. Hashtag 176 semi cólon. Que você poderia fazer isso, mas nós queremos adicionar nosso próprio f. Hum, mas então nós vamos apenas usar o símbolo do grau, e isso é bem aqui. Isto é que todos os códigos ponto net e você pode olhar lá em cima. Então nós vamos voltar e nós vamos colocar no símbolo do grau, hash tag 176 semi cólon. E então nós vamos colocar em nosso próprio f. Ok, então agora nós temos isso. E aqui em baixo, nós temos que mudar isso para nós vamos ter que mudar este html porque nós não estamos fora colocando apenas texto mais. Route colocando HTML, isto é HTML. Isto será transformado em html e este é HTML. E em vez de Fahrenheit, vamos colocar a temperatura exibida de tentação, e podemos adicionar um comentário a esse efeito. Exiba a temperatura. Está bem. E que salvámos isso. E você volta aqui e nós nos refrescamos. Como pode ver, temos temperatura duas vezes. Agora. Por que é isso? O que? Temos que voltar ao código e vemos que colocamos a temperatura aqui para colocar na página, mas esquecemos de tirá-la aqui. Então nós vamos tirar, chegar aqui, e nós vamos adicionar um I d igual a temperatura. Poderíamos ter uma aula e uma ideia na mesma, então não precisamos de nada além da aula e eu aqui. E as etiquetas que mostram o quão grande será a letra. Então eu volto a isso. Verifique isso. Está bem? E há a temperatura que colocamos o I D para. Então voltamos para lá. Agora já o temos. Ok, isso é bom. Agora podemos fazer o mesmo para a localização, o vento e as condições do céu. Então vamos começar com isso. Então localização iluminada cidade de exibição esfria o tempo atual em que Oh, qualquer dia. Então o nome e assim Michael terminar e, em seguida, localização é igual É html Tenho a chave encaracolada final html e é html cidade de exibição agora jogar cidade, e então nós temos que voltar aqui e tirar tudo isso. Mude o i d para. Ok, então vamos verificar isso. Ok, isso funciona. Então, agora vamos tentar o vento. Ok, então isso permanece o mesmo, e em vez disso, temos vento splay em vez de que é igual a realmente cinta em velocidade. Ele realmente quebra MPH, e isso se torna vento de exibição, e isso se torna html Voltar para indexar html vento em e fechar isso. Tudo o que precisamos é identificação igual ao vento. Verifica isso. Continua a trabalhar. Bom. Última condição do céu. Agora fazemos o mesmo para a condição do céu Sky exibir céu esfria condição do céu, cifrão, cinta encaracolada. E nós queremos isso e Curly cinta e linha. Está bem. E então isso sobe, Sr. Knorr. E então isso volta para html e isso vai para exibição. Scott, volta aqui e tudo o que precisamos é da ajuda para o céu e volta e verifica isto. Está bem? Tudo funciona maravilhosamente. Então isso limpa o código consideravelmente e torna mais eficiente e torna mais legível. 10. Adicione imagens: Então vamos obter um fundo mais interessante para a página da Web. Então vamos olhar para as fotos obedecer. É um dos meus lugares favoritos para obter imagens. Eles são livres de royalties, e você pode usá-los para fins comerciais. Então vamos ver se conseguimos pôr do sol castanho para pôr do sol. Este vamos levar este, e é um download gratuito para cometer uso comercial, sem atribuição necessária. Então, isso é bom. Podemos usá-lo e download gratuito. E este é um bom tamanho. Então, só pegamos o download e pegamos. Mas eu já tenho isso baixado, e eu colocá-lo na minha área de trabalho e renomeado para algo que era um nome mais curto. E então o que eu preciso fazer é colocar essa imagem na pasta. Lembre-se, temos uma pasta que é chamada se o Índice Teczar HTML ou estilo CSS e se CSS precisamos colocar isso nessa pasta uma cópia do seu e lá está. Então o que fazemos agora é voltar para o código para isso, e vamos voltar para o estilo C s. E vamos fazer em vez disso. Nós vamos fazer uma imagem de fundo e o que precisamos ver você é l E já que tudo bem, e então nós tiramos isso porque nós não vamos mais usar o plano de fundo do plano, vamos usar o fundo da imagem. Nós guardamos isso. Nós atualizamos isso. E agora temos o nosso maravilhoso terreno, embora não seja embora não sejabranco do jeito que imaginamos. Então precisamos fazer alguns ajustes. Então vamos fazer esses ajustes aqui. Os ajustes que eu quero fazer que o tamanho do solo suspira 100% o que significa que queremos que o fundo cubra toda a página da Web. Altura mínima. 100%. Isso é outro ajuste a fazer e com 100%. Então queríamos preencher a tela inteira. É por isso que estamos fazendo todos esses ajustes CSS aqui. Então voltamos e estamos frescos lá. É agora que temos toda a imagem na página. Ah, a outra coisa é que isso não é contrastado Bem, então precisamos fazer algo com isso. A maneira como fazemos o contraste de texto melhor é isso Primeiro de tudo, sabemos que já temos o cabeçalho com sua própria classe, modo que nos poupa algum código. Então voltamos para o estilo CSS e há o cabeçalho e há algo chamado cor e a cor significa a cor do texto. Então vamos usar isso e fazer com que a cor seja igual ao cólon branco político branco. Guarde isso. Volte aqui, refresque o seu Agora você tem um contraste amargo. Certo, estamos indo bem. Agora vamos dizer que queremos adicionar uma imagem para aqui. Temos a imagem de fundo. Que tal nós queremos adicionar alguma outra imagem lá, então nós queremos adicionar, digamos, um filho. Então, já tenho um filho salvo. Então deixe-me colocar o sol e eu peguei isso de picareta uma isca para Sun Tiantian. Ali está o sol. Agora que temos a imagem do nosso filho, onde queremos colocá-la? Bem, nós colocamos no índice html. Não colocamos no fundo porque não é um fundo. Nós colocamos no índice html. Então vamos dizer que queremos sair do sol acima do cabeçalho. Então aqui está o que fazemos. Nós dizemos fonte de imagem é igual ao nome com a imagem filho PNG e é sempre bom ter um altar, o que significa que se a imagem por algum motivo não aparecer, temos um texto para colocar em seu lugar. Aquele filho fecha-o, salve-o, volte e coloque-o aqui. Exceto que é meio grande. Então vamos ver o que podemos fazer sobre isso. Voltamos aqui e colocamos resfriados e isso não é pixels. Colocamos altura de 50 pixels e queremos com 50 pixels. Durma com o papai, guarde isso, volte e se refresque. Está bem, é bem aqui. Podemos tê-lo aqui, se quisermos. Isso é perfeitamente bom se você quiser ter a imagem lá. Mas vamos colocá-lo no meio e há uma maneira muito fácil de colocá-lo no meio, porque o tempo de hoje já está centrado. Podemos apenas mover esta linha para aqui e ele será automaticamente centrado porque o cabeçalho da classe é centrado em tudo no Div. Então faça isso e nós conseguiremos. Então agora temos um site bonito 11. Conclusão: Agora temos um conjunto completo de arquivos para fazer o nosso site. Temos o índice HTML, qual é este? Temos o nosso estilo CSS, qual é este? E nós temos nosso javascript, que é isso e tudo que você precisa fazer com o script Java é colocar em sua, hum, chave aqui sua própria chave, e colocar um conjunto de aspas depois dele e um semi dois-pontos depois dele e está feito, Você pode mudar a cidade. Se você mora em outra cidade e quer ter sua própria previsão do tempo pessoal, você pode dizer Denver, guarde isso. Volte aqui e pegue o tempo para Denver. Se você mora em uma cidade como San Francisco, eu preciso colocar um amigo mais areia mais. Eu acho que isso e colocá-lo lá para termos o tempo atual em São Francisco vai colocá-lo de volta. Chicago aqui fazer isso para mostrar que se você quiser adicionar coisas como a umidade ou o e um, tempo ou qualquer que seja as nuvens, está tudo aqui, e você pode apenas clicar sobre estes e adicionar os e também ir dentado. Tempo aberto AP. Descubro em que formato eles estão em exibição. Aqueles, se você quiser. Então, há muitas coisas que você pode fazer aqui. Você pode alterar os estilos porque você sabe CSS agora você pode alterar o plano de fundo. Você pode alterar as imagens, alterar as fontes. Se você quiser fazer uma página que vai para a direita na web em vez de apenas são página simulada, você pode obter um site de hospedagem, usar seu painel ver, e tudo que você teria que fazer lá é copiar todos esses arquivos, esses três arquivos mais essas duas imagens diretamente para lá. E você teria sua própria página pessoal que tem seu próprio tempo atual para sua própria cidade. Então você pode fazer deste seu projeto, você pode postar seu projeto, você pode escrever comentários e você pode seguir meu perfil. Então você pode fazer deste seu projeto, você pode postar seu projeto, Então agora você tem tudo para juntar tudo. E desejo-lhe boa sorte. E agradeço-vos pela vossa atenção. Ok,