Javascript: introdução amigável para iniciantes

1. Boas-vindas e o que vamos construir: Oi, meu nome é Chris e um grande recebe minhas chamadas JavaScript para iniciantes. Se você estava olhando em jogo suas habilidades HTML e CSS para o próximo nível, então você vem ao lugar certo. Este curso lhe dará o conhecimento e a confiança para adicionar interatividade e recursos interessantes aos seus sites. Junto com a capacidade de criar aplicativos autônomos, começaremos com os conceitos básicos, incluindo a compreensão de JavaScripts e para que ele é usado, onde incluir JavaScript em seus sites, tipos de dados e como obter JavaScript exibido em suas páginas da web. Em seguida, passaremos para cobrir fundamentos JavaScript, como variáveis, matrizes, funções, strings e métodos de string, e objetos JavaScript. Todas as seções terão vários desafios para colocar as mãos na experiência e certificar-se de que você entende exatamente o que estamos fazendo antes de seguir em frente. Uma vez que você tenha uma compreensão do básico, vamos então apresentá-lo a mais técnicas como JavaScript, matemática e datas, fluxo de controle e loops, como JavaScript pode manipular o DOM e, claro, muitos desafios ao longo do caminho. Então, finalmente, no final deste curso, você vai construir neste projeto completo emocionante, você terá a chance de construir um aplicativo de cartão de visita totalmente funcional que leva as entradas do usuário e cria um negócio usando JavaScript. No final do curso, você terá todas as habilidades necessárias para completar isso sozinho. Este curso é projetado para ser amigável para iniciantes. No entanto, o JavaScript geralmente funciona junto com HTML e CSS. Portanto, o conhecimento básico dessas línguas é definitivamente recomendado. Obrigado pelo seu interesse e estou ansioso para que você se junte a mim nesta causa emocionante. 2. O que é o Javascript e para que usamos ele?: Neste vídeo, eu só queria dar-lhe uma visão geral do que é JavaScript e o que exatamente JavaScript pode fazer. Primeiro de tudo, vamos dar uma olhada no que é JavaScript? JavaScript é uma linguagem de programação que tradicionalmente usamos para tornar páginas web interativas. Quando você está navegando em um site e coisas como uma caixa pop-up aparecem ou se você passar o mouse sobre um menu e você recebe um menu suspenso com diferentes links de menu, basicamente muitos dos recursos que acontecem sem atualizar a página, isso é tudo JavaScript. JavaScript também pode ser usado para criar aplicativos autônomos. Tradicionalmente, usamos JavaScript em navegadores da web e sites. Agora JavaScript está se tornando um cada vez mais popular, encontrando mais usos. JavaScript agora está sendo usado para criar aplicativos completos, tanto a frente quanto o backend. Hoje em dia é muito fácil fazer um aplicativo de pilha completa apenas conhecendo uma linguagem de programação. Eu mencionei que o JavaScript é usado para tornar as páginas da web interativas e a razão que pode acontecer é porque o JavaScript é incorporado e é executado em todos os principais navegadores. JavaScript até funciona quando o usuário está off-line. O fato de que o JavaScript é construído nos principais navegadores e é um script e linguagem padrão para navegadores web significa que o JavaScript está aqui para ficar e não parece que ele está indo em qualquer lugar em breve. A linguagem de programação Java é uma linguagem completamente separada e não está relacionada ao JavaScript. Esse é o básico do JavaScript. Agora vamos dar uma olhada no que o JavaScript pode fazer. Sabemos que o JavaScript pode tornar as páginas web interativas. Ele também pode alterar os elementos HTML e CSS em uma página da web. Ele pode mudar as cores, ele pode mudar o tamanho da fonte, ele pode mudar o texto em um clique, várias coisas assim. Isto é o que se chama manipular o DOM. Vamos olhar para o DOM mais adiante neste curso, mas por enquanto, basta entender que o JavaScript pode mudar elementos em uma página da web, e é exatamente isso que estamos fazendo agora com essa demonstração. Estamos manipulando o DOM clicando em um botão à esquerda, que é adicionar algum texto em uma tag de parágrafo vazia. Em seguida, JavaScript também pode validar dados. Como exemplo, se você preencher um formulário com seu nome e endereço, JavaScript pode verificar se as informações fornecidas estão corretas, como, ele pode verificar se não há letras em um número de telefone, ele pode verificar se o seu endereço de e-mail é formatado corretamente antes de ser enviado, e pode até restringir quantos caracteres são inseridos em um campo de texto. Tudo isso é feito no navegador sem qualquer ajuda do servidor. JavaScript também pode ser usado para criar aplicativos de pilha completa. Por pilha completa queremos dizer o front-end que o usuário pode ver e interagir com e também o lado do servidor que é o backend do aplicativo. Historicamente, JavaScript está apenas sendo usado no front-end no navegador, mas agora mais e mais aplicativos estão sendo escritos com JavaScript para a pilha completa, graças a Node.js. Além de sites e aplicativos, JavaScript também é popular para criar jogos multiplataforma. Podemos escrever jogo uma vez em JavaScript e usar algo como PhoneGap para implantar seu jogo em diferentes dispositivos, como Android ou iOS. Podemos usar JavaScript para corrigir buracos em pontos do navegador, que possamos fornecer polyfills e detecção de recursos para verificar se um navegador mais antigo suporta um determinado recurso. Se não acontecer, podemos fornecer uma maneira alternativa de lidar com isso. JavaScript e HTML5 trabalham lado lado e JavaScript alimenta muitos dos novos recursos HTML5, como o Canvas e, claro, muito, muito mais. JavaScript está se tornando tão popular agora que há novos usos sendo criados todos os dias. Há também novas bibliotecas e frameworks sendo criados o tempo todo para JavaScript. Então é realmente uma grande habilidade para ter. Obrigado por assistir e aproveitar o resto da aula. 3. Onde incluir o Javascript: Bem-vinda de volta. Para este curso, eu recomendaria criar uma nova pasta em sua área de trabalho ou em algum lugar onde você possa acessá-la. Eu vou criar o meu na área de trabalho, e eu só vou chamar isso de JavaScript. Dentro dessa pasta, podemos salvar todos os exemplos que criamos neste curso, e então você os coloca à mão se precisar deles para referência. Dentro da pasta JavaScript, eu vou criar uma nova pasta, e isso vai ser chamado de entender-javascript. Esse é o nome da seção no curso. A primeira coisa que vamos olhar é onde incluir JavaScript, então eu vou criar uma nova pasta chamada where to-include-javascript e salvar isso. Então, se você for para o editor de texto, eu vou usar Colchetes, arraste na pasta que você acabou de criar. Queremos criar uma nova página, por isso, ou Ctrl+N, salve isso como index.html. Para começar, eu vou colocar na estrutura HTML básica, e eu vou usar um plug-in chamado Emmet. Emmet está disponível para a maioria dos editores de texto populares. Se você estiver usando colchetes como eu, vá para as extensões e, em seguida, procure por Emmet, E-M-M-E-T. Eu já tenho o Emmet instalado, mas se você não o fizer, basta clicar no botão “Instalar”. Emmet é um ótimo plug-in que permite que você use atalhos como html:5, e, em seguida, pressione tab, e que cria uma nova estrutura para você. Mas se você não está usando, não é um problema. Basta pausar o vídeo e digitar isso, e podemos duplicá-lo para vídeos futuros. No título, eu só vou chamá-lo de Onde incluir JavaScript, em seguida, apenas criar um pouco de espaço após o título. Eu só vou incluir as folhas de estilo Bootstrap, que nos permitirá fazer nossas páginas da web parecer mais agradável. Basta procurar Bootstrap e, em seguida, ir para getbootstrap.com, e, em seguida, ir para Começar, e eu vou apenas incluir o Bootstrap CDN, que é o link hospedado para a folha de estilo. Eu só vou copiar a seção superior, que é a folha de estilo. Vou copiar isso, e depois colar isso na seção da cabeça logo abaixo do título. Agora está tudo configurado, podemos dar uma olhada em algumas maneiras diferentes incluir JavaScript em nosso projeto. JavaScript pode ser colocado na seção de cabeça ou corpo. Vou começar, e precisamos começar por incluir algumas tags de script, então digite as tags de script de abertura e fechamento. Todo o JavaScript que digitamos precisa ir entre esses dois. Para verificar se tudo está funcionando bem, vou começar com um alerta simples (). Um alerta () é uma caixa pop-up que aparece no navegador e alerta uma mensagem para o usuário. Entre aspas você pode usar aspas simples ou duplas, não importa. Eu só vou alertar, Javascript está funcionando, e adicionar um ponto-e-vírgula no final dessa declaração. Se salvarmos isso e depois passarmos para o navegador, você pode ver uma caixa de alerta aparecerá dizendo: “Javascript está funcionando”. Esta é sua primeira vez escrevendo JavaScript. Parabéns, você acabou de ter seu primeiro trabalho no Scripter. Basta clicar no botão “OK” para se livrar disso por enquanto, e voltar para a próxima página. Mencionamos antes que o JavaScript funciona tanto na seção da cabeça quanto na seção do corpo, então se cortarmos a seção, fora com a cabeça, e depois colamos na seção do corpo, e imediatamente, temos uma mudança. Estamos sendo levados para o navegador, e novamente, exatamente a mesma coisa aconteceu. Temos a caixa de alerta aparecendo dizendo, “JavaScript está funcionando”, então está tudo bem. Às vezes, quando temos muito JavaScript na página, queremos que ele seja separado do HTML apenas para torná-lo mais legível e fácil de manter. Podemos fazer isso adicionando o JavaScript em um arquivo externo, então crie uma nova página no projeto e salve isso. Vou chamar meu alerta de arquivo, e ele precisa ter a extensão of.js para JavaScript. Em seguida, volte para a página de índice, e podemos vincular este JavaScript externo na seção principal. Novamente, abrimos as tags de script, então precisamos dizer ao navegador onde encontrar o arquivo JavaScript usando o atributo src. Como nosso arquivo está no mesmo nível que a página de índice, podemos apenas digitar o nome do arquivo, modo que é alert.js. Agora, podemos nos livrar das tags de script porque vamos colocá-las em um arquivo separado, então vá para o alert.js. Quando estamos trabalhando em um arquivo JavaScript externo, não precisamos incluir as tags de script. Podemos começar a digitar o JavaScript. Crie um novo alerta. Entre os colchetes e as citações, poderíamos colocar em nossa mensagem novamente, Javascript está funcionando, e o ponto-e-vírgula no final. Salve isso e salve a próxima página, vá para o navegador e, em seguida, atualize. Lá vamos nós. Ótima. O alerta também está funcionando no arquivo externo. Arquivos JavaScript externos são úteis para armazenar JavaScript que você pode querer usar em diferentes páginas da Web para que você não precise digitar o mesmo script repetidamente. Você pode simplesmente vincular o arquivo que deseja usar em cada página da Web. Como mencionado anteriormente, ele também separa o HTML do JavaScript, e torna seu código mais legível e sustentável. O link JavaScript externo que colocamos na seção head também pode ser colocado na seção body na parte inferior da sua página logo acima da tag body de fechamento. Desta forma, o HTML não é bloqueado carregando scripts para que possamos melhorar os tempos de carregamento da página. Basta salvar isso e atualizar o navegador novamente, e você pode ver que tudo ainda está funcionando. Então, essas são três maneiras diferentes de incluir JavaScript em nosso projeto. Obrigado por assistir, e nos vemos no próximo vídeo. 4. Exibindo páginas da web e comentários em Javascript: Bem-vinda de volta. No último vídeo, analisamos como podemos usar alertas para alertar os usuários sobre uma determinada mensagem na página da Web. Neste vídeo, vamos dar uma olhada em alguns métodos diferentes de como podemos incluir Javascript em nossas páginas web. Também vamos dar uma olhada em como podemos incluir comentários em JavaScript para fazer anotações, e também comentar nosso código quando não precisamos mais dele. Se você entrar na pasta JavaScript e ainda na seção de compreensão JavaScript, vou apenas selecionar o primeiro que criamos e seguida, pressionar Command ou Control D para duplicar. Ou, se preferir, você pode copiar e colar. Vou chamar isso de comentários e exibir em JavaScript. Em seguida, abra colchetes ou seu editor de texto. Em seguida, arrastando o novo arquivo que acabamos de criar. Em seguida, abra a página de índice. Temos a caixa de alerta que criamos no último vídeo. Se você apenas se livrar disso por enquanto, então nós não temos isso aparecendo toda vez que entramos navegador e, em seguida, mudamos o título, para comentários e exibição em JavaScript. Na verdade, não precisamos usar esse arquivo de alerta externo. Podemos nos livrar disso. Abra suas tags de script na seção head ou body. Isso não importa. No último vídeo, vimos adicionar um alerta para alertar o usuário para uma mensagem. Não tem que ser mensagens que possamos alertar para o usuário. Também podemos usar números e massa. Podemos alertar às 10, tirar de graça. Então, se formos para o navegador, você pode ver que o cálculo foi realizado e obtemos os resultados de sete. Assim como a caixa de alerta é diferentes métodos que podemos usar para exibir JavaScript. Outro método é o log do console. Em vez do alerta, podemos digitar no console e podemos enviar um log para o console da mesma mensagem. Se você passar para o seu navegador da web. Se você estiver usando o Chrome, basta clicar com o botão direito do mouse e acessar Inspecionar elemento e alternar entre a parte inferior e o lado clicando nesses três pontos e, em seguida, clicando no lado da doca que você preferir. Se você descer até o fundo, apenas crie um pouco mais de espaço. Você pode ver que há a guia Console. Então, selecione a guia Console e você pode ver que o resultado que acabamos de criar de sete está aparecendo no console. O console geralmente é usado para depuração em vez de exibir alertas para o usuário na tela. Podemos apenas mantê-lo confinado ao console. Podemos imprimir coisas para o console, como mensagens de erro. Isso é muito bom para depuração. Se voltarmos para colchetes, bem como os alertas e o registro do console. Também podemos usar o que é chamado document.write. À medida que você percorre o curso, você verá o documento do Word com bastante frequência. O documento é a página web completa que estamos direcionando. Vou escrever para a página o que estiver entre estes colchetes. Salve e atualize. Agora, aparecendo na página da web, temos os resultados de sete. Mas precisamos ter cuidado ao usar document.write. Se ele for usado após a página ter sido totalmente carregada, ele irá substituir a página inteira com o resultado. Então precisamos ter cuidado ao usar isso. Novamente, assim como mapas, podemos incluir texto como Olá e que aparecerá na página são exatamente os mesmos. A última coisa que quero mostrar é como podemos manipular o HTML atual que está na página web. Então eu só vou para baixo para a seção de corpo e criar algum HTML. Vou criar um cabeçalho h1 e deixar o conteúdo em branco por enquanto. O h1 eu vou dar um ID de título e média, copiar a tag script. Lá em baixo. Então vamos usar JavaScript agora para manipular o HTML que está atualmente lá. Na verdade, não há texto no cabeçalho h1 no momento. Mas você pode usar JavaScript para colocar algum texto lá. Assim como antes, vamos direcionar o documento completo para começar e, em seguida, usar o ponto. Em seguida, vamos restringir o documento completo para o elemento que queremos alterar, que tem o ID do título. JavaScript tem uma maneira de fazer isso chamado getElementsByID. Observe que todas as palavras, exceto a primeira, começam com uma letra maiúscula para torná-la mais legível. Isso é bastante padrão em muitas linguagens de programação. É o que se chama caso de camelo. O documento completo está sendo reduzido a um elemento que vamos deslizar por seu id. Entre parênteses e, em seguida, citações, podemos adicionar o id que queremos segmentar, no nosso caso aqui seu título, e Depois Nova Dot. Queremos selecionar o HTML interno e, em seguida, é igual e, em seguida, podemos colocar entre aspas o texto que queremos substituir. Então, queremos exibir na tela o texto. No meu caso, quando eu coloco exibindo JavaScript em páginas da Web e ponto-e-vírgula no final dessa instrução. Espero que isso faça sentido. Nós dissemos em um elemento HTML que não tem texto mais um minuto. Em seguida, selecionaremos no documento completo ou na página da Web completa. Então reduzimos a identificação do título. Em seguida, definimos innerHTML, que é a seção entre. Nós definimos em nosso valor para ser igual a este texto aqui. Vamos guardar isso. Se você atualizar o navegador da Web, agora temos o texto que definimos no cabeçalho h1. Portanto, este método é muito mais comumente usado e pode ser um pouco mais seguro do que usar document.write. Agora vamos analisar quatro métodos diferentes de, incluindo JavaScript, em nossas páginas da Web. Quando eu voltar para o editor de texto e dar uma olhada nos comentários JavaScript. Comentários estão disponíveis em JavaScript, assim como muitas outras linguagens de programação. Se você quiser adicionar algumas notas. Com JavaScript, queremos que essas notas não sejam lidas pelo navegador. Podemos adicionar uma barra dupla. Isto é para os comentários de linha única. Podemos fazer algumas notas, como definir InnerHTML. Adicionar comentários pode ser útil se você tirar uma separação da codificação e você voltar depois mesmo de apenas uma semana ou duas, isso pode realmente ajudá-lo a lembrar o que você estava fazendo. Além de adicionar notas para si mesmo, você também pode comentar o código real da mesma maneira. Você pode ver que fica cinza. Esta seção de código agora não será lida pelo navegador. É útil se você quiser apenas remover temporariamente uma seção do código sem realmente excluí-la. Assim, as duas barras dianteiras são usadas para linhas simples. Se você tem muitas linhas diferentes ou um bloco de código sobre o qual deseja comentar, você pode usar um comentário de várias linhas, que começa com uma barra e seguida, a estrela e, em seguida, termina com a estrela e a barra direta. Esse é o fim deste vídeo em comentários em exibição em JavaScript. Obrigado por assistir, e nos vemos no próximo vídeo. 5. Variáveis do Javascript e projeto: Bem-vindo de volta a esta nova seção chamada conceitos básicos do JavaScript. Vou começar criando uma nova pasta em nossa seção JavaScript, vou chamar essa pasta javascript-basic. Você pode salvar todas as partes da seção dentro de lá. Então desativa um monte de digitação. Se voltarmos para o último vídeo que fizemos em entender-javascript e, em seguida, copiar os comentários e exibir na pasta JavaScript e, em seguida, colar isso na seção básica JavaScript e renomeá-lo. Eu quero manter o meu em ordem, fazendo o número 1, eu chamo isso de variáveis e atribuições. Em seguida, coloque isso entre parênteses. Lá vamos nós. Agora temos a página de índice do último vídeo. Eu só vou me livrar desses comentários por enquanto, mas manter o código no lugar e, em seguida, mudar o título da página para variáveis e atribuições. Podemos reutilizar o código que fizemos no último vídeo. Esta seção do JavaScript, ele leva o cabeçalho de nível 1 vazio e substitui por algum texto. Neste vídeo, vamos dar uma olhada nas variáveis e como podemos usá-las em JavaScript. Uma variável é um recipiente para informações que podemos dar um nome e o conteúdo dessa variável, como o nome sugere, pode mudar. Vamos dar uma olhada em como podemos usar variáveis. Declaramos uma variável usando a palavra-chave var e, em seguida, colocamos o nome da variável seguinte. Eu quero chamar minha variável pageTitle e , em seguida, o sinal de igual e, em seguida, entre aspas, definimos o conteúdo da variável. Vou reutilizar este texto. Corte esse texto lá e, em seguida, se nós colá-lo dentro da variável e o ponto-e-vírgula no final, então nós estamos atribuindo o texto sobre uma variável chamada pageTitle. Agora podemos voltar para o nosso InnerHTML e ao invés de definir que igual ao texto, podemos colocar no lugar o nome da variável, que é PageTitle, e salvar isso. Agora, quando voltarmos para o navegador e atualizar, devemos receber a mesma mensagem. Mas desta vez a mensagem é armazenada em uma variável e você pode mudar isso para ser qualquer coisa que você quiser. Nós mudamos para variáveis e depois damos uma olhada e quando atualizamos, há uma mudança. Vamos dar uma olhada em mais alguns exemplos. Eu só vou comentar esta seção. Entre parênteses, você pode pressionar o comando na barra e ele irá comentar em toda a seção. Nós olhamos para a criação de variáveis com texto ou strings. Também podemos criar variáveis com diferentes tipos de dados, como números. Vamos criar uma variável com um nome de número1 e definir isso para um número como 10. Você sabe quando estamos lidando com números em vez de strings, nós não precisamos colocar quaisquer aspas em torno do valor. Podemos simplesmente deixá-lo como está e uma segunda variável chamada número2, e o valor desta vez de 20, e assim como certos valores para variáveis. Nós também podemos criar uma variável que é composta de variáveis adicionadas em conjunto. Neste caso, podemos criar um total e definir esse total para ser a soma da variável número1 mais variável número2, e o ponto-e-vírgula no final e, em seguida, para verificar se todos estão funcionando bem, podemos criar um alerta e então podemos simplesmente Alerte o total. Vamos ver, isso é trabalhar com a atualização. Ótima. Temos o total de 30 aparecem lá, que é a soma das duas variáveis adicionadas juntas. Como mencionamos antes e como o nome sugere, um valor de uma variável pode mudar. Depois de declarar uma variável com a palavra-chave var, não precisamos usar a palavra-chave var novamente para alterar o valor. Se quiséssemos alterar o valor de número1, desta vez apenas digitamos número1, e podemos alterar seu valor para ser algo como cinco. Agora número1 é igual a cinco e número2 é 20. Devemos agora obter os resultados de 25. Quando estamos criando variáveis, podemos realmente declarar a variável primeiro sem definir um valor inicial para ela. Se nós apenas definir a variável e dar-lhe um nome, ele não precisa ter um valor inicial. Então um pouco mais tarde no código, podemos então atribuir um valor a essa variável assim e isso ainda funcionará como antes. Agora temos o número 1 5 e o número 2 definido para 10. Devemos obter o total de 15, e temos 15, isso é bom. Vamos voltar ao exemplo original. Quando estamos criando variáveis, há certas regras que precisamos seguir ao criar nomes de variáveis. Quando nomeamos uma variável, ele precisa começar com uma letra, um sublinhado, ou um cifrão, ou um cifrão, e nomes de variáveis também são sensíveis a maiúsculas e minúsculas. Tivemos uma variável com o nome do número1 e então tivemos uma variável com o nome de Number1, para começar com um maiúsculo. Estas são tratadas como variáveis diferentes. Vamos apenas mudar o exemplo, começar com um capital, ainda devemos obter a soma de 5 mais 10. Lá vamos nós. A última coisa que eu queria falar neste vídeo é o operador de atribuição, que é este símbolo igual. Em JavaScript, o símbolo atribui um valor ao nome da variável e na verdade não verifica se é igual a. Em JavaScript, se quisermos verificar se algo é igual, usamos um duplo igual. Por exemplo, cinco é igual a cinco e isso significa igual a, e também podemos usar os três símbolos iguais. Se cinco e três símbolos iguais a cinco, desta forma verifica se os valores são igual valor e igual tipo. Neste caso, o cinco é igual a cinco em valor e o tipo, porque ambos são números. Mas cinco, os três símbolos iguais e, em seguida, os cinco entre aspas. Isso deve ser falso porque eles são igual valor, mas eles não são igual tipo, porque o cinco à esquerda é um número e o cinco à direita, porque ele está entre aspas, é uma string e é considerado como um texto. Vamos olhar para muitos mais exemplos para estes à medida que percorremos o curso, mas é isso por enquanto. Obrigado por ouvir, e veremos você no próximo vídeo. 6. Números e aritmética: Bem-vinda de volta. Neste vídeo, vamos dar uma olhada nos números JavaScript na aritmética básica. Se você entrar na pasta de conceitos básicos do JavaScript e duplicar a pasta de variáveis do último vídeo, eu quero chamar a mina número 2, números e aritmética, em seguida, abrir isso em parênteses. Lá vamos nós. Em JavaScript até agora, já analisamos como podemos atribuir um número a uma variável, mas o JavaScript pode fazer muito mais com números. Quando criamos uma variável, vamos apenas excluir a última seção lá e também o título, não precisamos mais disso. Até agora nós olhamos para atribuir um número a uma variável, como esta, mas além de atribuir o número 10 ao valor de x, nós também podemos colocar uma soma lá, então 10 mais 5, e então nós podemos alertar a variável de x e abrir no navegador, então obtemos a soma de 15. Além disso, também podemos tirar, devemos obter o valor de 5. Nós também podemos usar divisão, multiplicação, então nós mudamos a subtrair para uma barra para dividir, e devemos agora obter o valor de 2. Em JavaScript, quando fazemos uma multiplicação, o valor que precisamos para isso é a estrela, 10 multiplicar por 5 deve ser o valor de 50. Outro interessante para olhar para cima é o símbolo percentual. Isso realmente fornece o restante, então 10 dividido por 5 seria 2, e não haveria realmente nenhum restante, modo que o valor será 0. No entanto, se alterarmos o valor para ser 9 dividido por 5, 5 só entraria em 9 uma vez e deixaria um restante de 4, então obtemos o valor de 4 alertá-lo lá. Além de fazer os cálculos dentro da variável, podemos definir uma variável separada, e podemos fazer os cálculos dentro do alerta. O alerta pode ser x multiplicado por y, e ainda devemos obter o mesmo resultado. Atualize, e teremos 45. Uma coisa que realmente vale a pena lembrar ao lidar com números e cálculos é que a ordem do cálculo é realmente importante. Dê uma olhada nisso como um exemplo. Variável x vamos definir para 10 mais 5, que é 15, multiplicar por 2. Vamos ler isso da esquerda para a direita, pensando que 10 mais 5 é 15, multiplicado por 2 é igual a 30, mas isso não é realmente o caso, então vamos apenas alertar x e ver o que acontece. Vamos conseguir 20. A razão pela qual obtemos 20 em vez de 30 é porque a multiplicação e divisão têm uma precedência maior ou maior prioridade do que a adição e subtração, modo que a multiplicação é realizada primeiro. 2 vezes cinco é 10, mais 10 é igual a 20, então é por isso que estamos recebendo o valor de 20 aparecendo no alerta. Mas se quiséssemos ter o valor de 30, uma maneira de resolver isso é adicionando os colchetes em torno da primeira seção. Isso irá adicionar 10 mais 5 para começar, então 15 e depois multiplicar por 2, salvar isso e depois atualizar, e agora, vamos obter o valor de 30. A última coisa que quero mostrar neste vídeo é como incrementar e diminuir números. Vamos dar uma olhada atribuindo a variável x a 10. Atualmente, se deixarmos o valor de x, obteremos 10, mas se quisermos incrementar x, poderíamos usar x mais, e isso incrementa o valor por um a cada vez. Agora, se atualizarmos nosso navegador, devemos obter o valor de 11. Se fôssemos fazer isso novamente e duplicar essa linha, x seria agora 12. Isso é realmente útil para coisas como aumentar a pontuação de um jogador cada vez que eles recebem um ponto, nós teríamos uma variável chamada pontuação, e então cada vez que eles obtêm um ponto, seria pontuação mais mais. Assim como plus plus, também podemos decrementar a pontuação em um, assim. Agora, estamos tirando um de 10 e devemos pegar 9. Isso será útil para situações como um jogador perder a vida em um jogo ou reduzir a pontuação do jogador em uma cada vez. Obrigado por assistir, e esse é o fim deste vídeo sobre números e aritmética. 7. Strings do Javascript: Estamos indo bem agora nesta seção chamada cordas. Se formos para a pasta JavaScript que criamos e, em seguida, para o básico JavaScript. Assim como antes, duplicar o último vídeo e, em seguida, renomeá-lo meu vai ser número 3 strings JavaScript e, em seguida, salvar isso e abri-lo em seu editor de texto. Em seguida, o título apenas como strings e, em seguida, você pode excluir a seção entre as tags de script. Nos vídeos anteriores, analisamos brevemente strings e uma string é basicamente uma seção de texto. Pode ser um personagem, pode ser uma palavra, ou pode ser um parágrafo. Vamos começar com o primeiro exemplo e vamos criar uma variável. O primeiro vai ser FirstName e atribuir FirstName no meu caso é Chris, o ponto-e-vírgula no final. Em seguida, uma segunda variável de segundo nome e atribuir este para ser o meu segundo nome que é Dixon. Podemos usar aspas simples ou duplas que não importa e podemos então juntar as cordas. Eu quero exibir estes para o console assim console.log. Poderíamos juntar-nos a eles juntando os nomes das variáveis. Então FirstName e, em seguida, o mais e, em seguida, o segundo nome da variável com o ponto-e-vírgula no final. Em seguida, abra no navegador e, em seguida, vá para o console e você pode ver o nome está apenas lá. É impresso tanto o primeiro quanto o segundo nome, por isso não importa sobre as aspas simples ou duplas. As citações, no entanto, começam a se tornar importante se incluí-los realmente dentro da string. Se tivéssemos uma citação e a citação tivesse textos como “meu nome é Chris”, e quiséssemos que o nome estivesse entre aspas, não poderíamos realmente fazer isso. Então você muda o nome da variável para citar e vamos ver o que acontece com isso. Em seguida, entre no console e você pode ver que recebemos um erro de sintaxe. Podemos corrigi-lo passando para a string e, em vez disso, as aspas duplas podemos usar um tipo diferente de aspas. Mude isso para solteiro e depois atualize e lá vamos nós. Novamente, meu nome é Chris e ele realmente imprimiu as aspas simples. Você também pode fazer o mesmo se você tiver aspas simples no lado de fora, você pode definir as aspas internas como duplas. Salve e atualize e há uma aspas duplas que tudo funciona bem, então vamos apenas nos livrar disso. de unir cordas, também podemos juntar strings com variáveis e coisas como números. Por exemplo, se tivéssemos um nome definido como Chris, vamos documentar.write desta vez. Neste exemplo, eu vou juntar uma variável com uma string e em seguida, com um número e imprimir as palavras Chris é 31. Eu já tenho o nome da variável para que possamos adicionar isso. Em seguida, podemos usar o plus para adicionar ou concatenar. Temos Chris e então precisamos adicionar “é” entre aspas, então isso é uma string. Em seguida, um número mais para adicionar o número para que possamos digitar a idade que é 31. Salve e, em seguida, pressione atualizar, vamos obter a palavra Chrisis31, mas não há espaços no meio e isso é fácil de corrigir. Se entrarmos na string, podemos adicionar um espaço antes e depois, e isso irá imprimir o espaço no documento para lá você vai. Essa é uma forma bastante simples de forma e uma string, mas se tivéssemos uma string longa, como um parágrafo. Há muitos formatos e opções diferentes e escapes que podemos fazer para que pareça melhor. Se você for ao Google e procurar por Lorem Ipsum e nós vamos apenas obter alguns exemplos de texto. Na verdade, eu vou apenas copiar o primeiro parágrafo que se parece com texto suficiente sua. Mude a variável e chame o meu parágrafo. Em seguida, entre as cotações colar no texto de exemplo, e, em seguida, como você ir para baixo e vamos imprimir isso para o console, console.log. No texto que queremos imprimir é o parágrafo, então vá para o navegador e, em seguida, vá para o console. Há todo o texto falso que colocamos no lugar. É um pedaço grande e ilegível de texto lá. Podemos querer adicionar alguma formatação a esse texto, como quebras de linha, cotações ou guias. Podemos fazer isso com algum JavaScript, se procurarmos uma seção que queremos criar uma nova linha. Vou começar o meu lá. Se você fizer uma barra invertida e, em seguida, um, então nós devemos obter uma nova linha após a palavra indústria. Refresque-se e lá vamos nós. Essa é a primeira linha que quebra depois da palavra indústria. Podemos colocar um ou dois desses antes. Há um, guarde e dê uma olhada. Bom, há outra quebra de linha logo ali. Há algumas coisas diferentes que você também pode fazer, nós também podemos colocar aspas duplas ou simples dentro do texto, e nós também podemos escapar deles usando a barra invertida, então use uma barra invertida e, em seguida, as aspas. Então fazemos o mesmo depois então barra invertida e uma cotação e depois atualizar. Você pode ver se você olhar para a palavra que acabamos de destacar, nós temos as aspas antes e depois. Você também pode fazer da mesma maneira para uma única citação. Se você realmente queria incluir uma barra invertida você apenas fazer isso duas vezes então incluir duas barras invertidas. Como a barra invertida aparecem lá e também as aspas simples e também podemos adicionar uma guia. Se você quiser adicionar um no início é uma barra invertida e um t e você tem o recuo lá. Há algumas maneiras úteis de escapar e formatar texto usando JavaScript e alguns pequenos exemplos, incluindo a planilha fornecida no início do curso. A última coisa que eu quero mostrar neste vídeo é como encontrar o comprimento de uma string usando a propriedade length. Vamos nos livrar do texto Lorem ipsum e podemos reutilizar essa variável. Vou usar o exemplo de nome novamente, então nome igual a Chris e, em seguida, vamos criar uma nova variável para armazenar o comprimento do nome. Variável chamada NameLength ea maneira que temos o comprimento para o nome é definindo não para o name.length. Então, finalmente, podemos registrar para o console o novo nome da variável. Salve isso e atualize. Lá vamos nós, então o comprimento do meu nome é de cinco caracteres. Esse é o fim deste vídeo e se você se juntar a mim no próximo vídeo, vamos colocar isso em prática em um mini desafio. 8. Minidesafio: exibir a pontuação de um usuário: Bem-vinda de volta. Agora é hora de fazer uma pequena pausa no aprendizado e colocar em prática o que você aprendeu até agora em seu primeiro mini-desafio. O que eu gostaria que você fizesse é criar uma página web simples, que exibe a pontuação de um usuário. Crie um par de variáveis para o nome do jogador e também a pontuação e, em seguida, exiba essa pontuação em uma página da Web em uma string. Ele não precisa ser nada extravagante, tudo que você precisa fazer é exibir o usuário, e em seguida, adicionar uma string no final dele para pontuação é, e em seguida, adicionar na variável para o número de pontos, e, em seguida, finalmente adicionar a string para o fim. Sinta-se livre para fazer isso um pouco diferente do meu exemplo. Mas para dar uma chance, é uma boa maneira de colocar em prática o que aprendemos até agora. Se você não se sente 100% confiante em fazer isso ainda, não é um problema. Basta seguir junto com o resto deste vídeo, e eu vou te mostrar como eu vou fazer isso. Espero que tenha conseguido fazer isso sozinho, se não, não se preocupe, vou te mostrar como se faz agora. Se você simplesmente ir para a pasta de conceitos básicos do JavaScript e, em seguida, duplicar o último vídeo. Vou ligar para o meu número 4 desafio-display-users-score. Em seguida, abra o editor de texto e altere o título, Exibindo a pontuação do usuário. Vou começar do zero nisto. Entre as tags de script, eu vou criar uma variável chamada jogador é igual a Chris, e então uma variável para manter o valor da pontuação. Então pontuação é igual a zero, só para começar. Em seguida, mais uma variável para manter a exibição ou a string, então DisplayScore. Só para tornar o meu ecrã um pouco maior, vou começar com algumas etiquetas h3. Eu realmente não olhei para eles neste curso ainda, mas você pode realmente adicionar tags HTML ao cercar as citações. Começamos com o h3 e, em seguida, vamos adicionar o jogador ou a variável player. Então, no final do jogador, Eu quero colocar o apóstrofo e, em seguida, o s. Então é pontuação de Chris é. Podemos adicionar isso como uma string. Então o apóstrofo e o s e, em seguida, um número mais. Até agora, temos a do Chris. Então queremos colocar a string de pontuação é, então abra as aspas. Lembre-se de colocar um espaço antes e depois para que as palavras não se toquem. Então a pontuação de Chris é, e então precisamos adicionar ao final a variável de pontuação. Então a pontuação de Chris é zero, e então a palavra pontos, então espaço, e depois pontos. Então, no final, quando está fechado, a etiqueta h3, exatamente assim com um ponto-e-vírgula no final. Agora temos nossos conjuntos variáveis de pontuação de exibição, vamos apenas agora imprimir isso para a página. Documentamos a gravação, e o nome da variável, e um ponto-e-vírgula, e vamos dar uma olhada. Então a pontuação do Chris é zero pontos. Se quiséssemos aumentar a pontuação toda vez que o usuário recebe um ponto extra, poderíamos adicionar pontuação ++ se você se lembrar disso de mais cedo. Então, agora, se atualizarmos, devemos fazer com que a pontuação do Chris seja um ponto. Você pode fazer isso quantas vezes quiser e os pontos vão subir de acordo. Esse é o fim do desafio. Espero que tenha conseguido fazê-lo e espero que tenha gostado. Obrigado e eu vou vê-lo no próximo vídeo. 9. Métodos de string: Até agora, neste curso, analisamos o básico de strings, como armazenar uma string em uma variável e também unir strings, mas há muito mais que podemos fazer com strings. Agora vamos dar uma olhada em alguns métodos de string muito úteis. Se você entrar em sua pasta JavaScript e, em seguida, para o básico JavaScript. Quero duplicar a última pasta que criamos. Eu vou nomear este número 5 métodos string, em seguida, abrir em seu editor de texto. Eu só vou torná-lo um pouco maior, e em seguida, mudar o título para métodos de cadeia de caracteres, e então ir para baixo. Vou apagar o código que escrevemos no último vídeo. Métodos de string nos permite fazer muito mais com strings. O primeiro exemplo que vou mostrar é converter uma string em maiúsculas. Vamos começar criando uma variável chamada string e eu vou apenas definir isso para aprender JavaScript adicionar um ponto-e-vírgula, e então eu vou criar uma segunda variável. Vou chamar essa nova corda. Vamos definir o valor da nova string igual à string original. Esse é o nome da variável e, em seguida, ponto e, em seguida, duas maiúsculas, em seguida, os colchetes e ponto-e-vírgula. Não se esqueça do par de camadas em cada palavra depois da primeira. Agora nós convertemos a string para ser maiúscula. Vamos agora alertar a nova string. Podemos verificar se está funcionando bem. Alerta, o que precisamos alertar? Esse é o valor da nova string. Coloque isso entre parênteses e, em seguida, abra no navegador. Lá vamos nós, ótimo. Aqui está a nossa string original e está tudo a ser mudado para letras maiúsculas. Podemos fazer uma coisa semelhante, mas podemos converter em minúsculas. Você provavelmente pode adivinhar como fazer isso, nós só precisamos mudar o ponto da string para minúsculas, e, em seguida, abrir isso e verificar se está funcionando. Lá vamos nós, então todas as maiúsculas foram mudadas para minúsculas agora. O próximo método que eu vou mostrar é o que é chamado de substituição de cadeia. Isso é quando procuramos uma determinada seção ou uma certa palavra na string. Podemos substituir essa palavra. Vamos fazer uma corda um pouco mais longa. Quero aprender JavaScript para construir sites. Novamente, estamos tomando o valor da string original, e o método que vamos usar é string.replace, e então dentro dos colchetes, vamos colocar em dois parâmetros. A primeira será a palavra que queremos substituir. Vou mudar sites e separá-lo por uma vírgula. Colocamos a palavra que queremos colocar em seu lugar, então vou mudar isso para jogos. Agora, quando damos uma olhada no alerta, devemos ver sites foi alterado para jogos. Então vá para o navegador e atualize, e isso é exatamente o que queremos. Quero aprender JavaScript para construir jogos. Além de substituir palavras individuais, podemos dividir a cadeia em caracteres individuais, ou podemos dividir todas as palavras individuais. A maneira de fazer isso é usando o método split. Eu só vou voltar para a string original de aprendizagem JavaScript e, em seguida, excluir o conteúdo dentro dos colchetes. Desta vez vamos usar string.split, e então o que vamos colocar dentro dos suportes, determina exatamente onde a divisão está na corda. Se você apenas colocar uma string vazia ou aspas sem nada nela, a string será dividida em caracteres individuais. Basta atualizar a página, e você pode ver com a vírgula, que a string foi dividida, e agora é tudo caracteres individuais. Se quiséssemos dividi-lo em palavras individuais em vez de caracteres, podemos colocar um espaço. O espaço na string será o marcador para onde dividir essa string. Agora devemos ter duas palavras separadas. Refresque. Agora temos a palavra, o aprendizado e a palavra, JavaScript separados por uma vírgula, então agora eles são strings individuais. Agora temos duas palavras separadas. Podemos acessar as palavras individuais pelo número de índice dentro dos colchetes. Se quisermos acessar a primeira palavra, seria a posição 0. Salve e atualize. Agora, nós temos o aprendizado de palavras, e se quisermos a palavra JavaScript, mude isso para a segunda palavra, que é a posição 1. Agora temos a palavra JavaScript. Então agora nós dividimos a string em duas palavras separadas. Podemos juntá-los novamente usando o método concat. Agora temos duas palavras separadas. Vamos criar uma nova variável. Eu vou apenas adicionar isso acima do alerta, então eu vou chamar essa string unida, e em seguida, para adicionar as duas strings juntos, nós vamos selecionar a primeira palavra. Isso estava na nova variável string, e então, assim como fizemos com o alerta, vamos definir isso para posição 0, que é a aprendizagem de palavras e, em seguida, ponto e concat, e, em seguida, dentro dos colchetes, vamos adicionar a segunda string que queremos nos juntar. Espero que você tenha descoberto o que é isso. Essa é nova string e, em seguida, os colchetes, e posição 1, e então agora precisamos alertar a string unida. Vamos apenas nos livrar disso e colar juntou string e depois atualizar. Lá vamos nós. Você pode ver que a string foi unida em uma string e não há vírgula entre elas. Isso é bom. O último método que vou mostrar a vocês é a fatia de corda. Vamos apenas nos livrar da variável de string unida. Novamente, vamos manipular a string original, mas desta vez queremos usar a fatia de ponto. Coloque os colchetes novamente, e o método de fatia, ele tem uma posição inicial e uma posição final. Você pode cortar uma determinada seção da string. O primeiro valor é obrigatório, e essa é a posição inicial. Vou começar com o número 2 e depois separado por uma vírgula, e o segundo valor é opcional, que é a posição final. Vou usar o número 6 e, em seguida, alertar a nova string. Vamos dar uma olhada nisso. Temos a palavra arni lá, que é esta parte da corda. Essa é a posição 2, então 0, 1 , 2, e depois todo o caminho até seis. É o fim deste vídeo. Espero que agora você tenha uma idéia melhor de como você pode manipular strings usando métodos de string. Dê uma olhada na folha de truques, que foi fornecida no início do curso. Há mais um ou dois métodos de string lá que você pode achar útil. Brincar um pouco com eles. Por enquanto, obrigado, e nos vemos no próximo vídeo. 10. Minidesafio: formatar corretamente o nome de usuários: Bem-vindo a outro mini desafio. Esta é a parte emocionante do curso onde você começa a colocar em prática o que você tem aprendido até agora. Neste mini desafio, vamos formatar o nome de um usuário. Todos nós fizemos isso, todos nós colocamos o capital em acidentalmente ou no lugar errado ao digitar. Às vezes recebia um par de cartas onde não deveriam estar em nossos nomes. Eu só vou começar e então você pode fazer isso sozinho. Formatador de nome de desafio número 6, em seguida, abra esta pasta. Vou alterar o título para Formatador de nome e, em seguida, excluir esta seção. Eu só vou começar. Vou criar uma variável chamada nome, então você precisa colocar seu nome dentro das citações. Mas com algumas letras maiúsculas extraviadas, assim. O que eu gostaria que você fizesse é usar alguns dos métodos de string que vimos no último vídeo e formatar seu nome. A primeira letra é uma maiúscula do seu primeiro segundo nome e, em seguida, todo o resto para ser minúscula. Então, pause o vídeo e dê uma chance, experimentá-lo você mesmo é realmente a melhor maneira de aprender. Se você ficar preso ou tiver algum problema, eu vou passar exatamente como eu teria feito isso. Isto é o que eu teria feito. Como acontece com muitas coisas na programação, há várias maneiras diferentes de você abordar isso. Mas vou dividi-lo em algumas variáveis para começar. Vou começar com uma variável chamada split. Vou dividir o nome em duas palavras separadas para que possa funcionar individualmente. Para dividir o primeiro e o segundo nome, queremos usar o método de divisão que vimos no último vídeo, então nome.split. Espero que se lembre de como fazer isso. Basta criar um espaço e eu reconhecerei onde está a divisão. Agora temos as duas palavras individuais armazenadas em uma variável chamada split. Não vai criar uma variável para cada uma dessas palavras. Então variável name1 é igual a dividir na posição zero. Então essa é a primeira palavra. Nome2 é igual a dividir e, em seguida, número um, que é a segunda posição. Agora temos o primeiro nome em uma variável. Agora vou formatar esse nome, então eu vou chamar essa variável formattedName1, então isso é igual a name1. Então precisamos fazer do primeiro personagem uma maiúscula. Vou cortar a primeira letra. Os dois parâmetros que precisamos colocar é a posição zero para começar no início, e depois terminar uma posição um. Só vai cortar o primeiro personagem. Então, para fazer disso um capital, vamos colocá-lo em maiúsculas, e não se esqueça dos parênteses. Como está, esta variável contém apenas um C maiúsculo, então precisamos adicionar no final do mesmo o resto dos caracteres em minúsculas. Depois desse name1.slice, vamos cortar a seção restante, mas vamos apenas colocar um parâmetro lá. Ele vai começar na posição um e, em seguida, ser todo o caminho até o final da string, .ToLowerCase. Vamos apenas criar alerta, só para ver se está funcionando bem. Depois de alertar FormattedName1; ótimo, está tudo funcionando. Podemos fazer o mesmo com o segundo nome. Eu só vou copiar esta seção e, em seguida, alterá-la para FormattedName2. Este método funcionará exatamente da mesma forma, mas só precisamos mudar nome1 para nome2 e verificar se está funcionando novamente. Ótima. Temos os dois nomes individuais que estão corretamente formatados. Só precisamos juntar-nos a eles. Vou criar uma variável chamada NewName. Isso vai ser igual ao formattedName1 mais formattedName2, e isso é alertar o novo nome. Nós precisávamos disso. Temos o nome formatado aparecendo, só precisamos colocar um espaço no meio. Podemos fazer isso entre FormattedName1 e 2. Basta adicionar um espaço lá e outro símbolo de adição. Espero que seja isso agora. Lá vamos nós. Então esse é um nome formatado corretamente. Espero que tenha dado uma chance e trabalhado sozinho. Se não, não se preocupe. Com sorte, agora você sabe como fazer isso. Mais mini desafios à medida que avançamos ao longo do curso. Obrigado por assistir, e nos vemos no próximo vídeo. 11. Matrizes do Javascript: Até agora, neste curso, temos analisado variáveis e como elas são usadas para armazenar um valor. No entanto, se precisarmos armazenar mais de um valor, precisaríamos usar o que é chamado de Array. Arrays podem conter vários valores sob um único nome, e podemos acessar esses valores por sua posição ou seu número de índice. Vamos passar para a nossa pasta javascript e em uma seção javascript-basics, duplicar a última pasta. Isto vai ser número 7.arrays e, em seguida, vamos abrir essa pasta para cima. Em seguida, altere o título para Arrays. Podemos simplesmente apagar esta seção. Há algumas maneiras diferentes de criar um Array. Começa de forma semelhante às variáveis. Usamos a palavra-chave var e, em seguida, atribuímos um nome para a matriz. Como exemplo, eu vou criar uma matriz para usuários e, em seguida, vamos criar uma nova matriz e, em seguida, os colchetes logo depois. Isso cria uma nova matriz chamada usuários e podemos adicionar usuários diferentes ou valores diferentes a esta matriz usando o nome da matriz e, em seguida, os colchetes. A primeira posição em uma matriz é 0. Eu vou definir a primeira posição para ser igual a Chris e então eu vou apenas adicionar um par mais, então os usuários e, em seguida, Posição 1, eu vou chamar este usuário Mike. Em seguida, os usuários e depois um terceiro, vamos inserir Paul lá. Agora nossa nova matriz deve ter três valores diferentes, então vamos apenas verificar se tudo está trabalhando com um document.write e em seguida, dentro dos colchetes, podemos colocar o nome da matriz que é usuários. Vamos dar uma olhada. Óptimo, diz os nossos três valores que inserimos na matriz. Outra maneira que podemos criar um Array, possivelmente uma maneira mais popular, é usar o método literal. Começando da mesma maneira e em vez de usar a nova palavra-chave, podemos colocar o valor diretamente nos colchetes. Assim como antes, podemos colocar o primeiro usuário e depois separar por uma vírgula. Podemos adicionar o resto de nossos valores e assim como variáveis quando ele puxa strings entre aspas, mas estamos bem para colocar números exatamente como eles são. Agora, você pode salvar isso e depois atualizar e teremos os mesmos três usuários que tínhamos antes. Além de exibir o conteúdo completo da matriz, podemos apenas exibir valores individuais de uma matriz dependendo de sua posição de índice, então Chris é Posição 0, Mike é 1 e Paul é 2. Se você apenas ir para document.write e, em seguida, em vez de exibir todos os usuários entre os colchetes, podemos colocar o número do índice. Se quisermos que ele exiba Mike, isso seria 1, e vamos ter apenas um valor aparecendo e se quiséssemos Paul poderíamos mudar isso para 2. Ao lidar com Arrays, também podemos usar diferentes tipos de dados. Assim como cordas, podemos colocar em números, por exemplo, e isso funcionará exatamente da mesma forma. Se apenas salvarmos isso e depois atualizarmos, teremos o número aparecendo no final da matriz. Uma coisa útil a saber com Arrays é que podemos usar a propriedade length para descobrir quantos valores estão dentro da matriz e a maneira de fazer isso é com a propriedade o.length. Agora ele deve exibir o comprimento da matriz, então devemos obter o valor de três. Vamos dar uma olhada e atualizar. Lá vamos nós, então obtemos o valor de três. Vamos deixar isso de fora e no próximo vídeo vamos dar uma olhada em algumas maneiras realmente poderosas e interessantes de manipular Arrays usando métodos Array. 12. Métodos de matriz: Assim como com strings que olhamos para alguns vídeos atrás, arrays também têm vários métodos de matriz e podemos usar, o que pode ser realmente útil. Então vamos começar com uma nova pasta. E este é o número oito, e este é o método de matriz. Então renomeie os métodos de matriz de pastas e abra a abertura entre colchetes. Então vamos renomear isso. Então métodos de matriz, e então podemos realmente reutilizar esta matriz que criamos antes. Então, se você quiser adicionar um valor extra a esta matriz, podemos usar o método push. A maneira de fazer isso, é usar o nome do array, que é o usuário dot push, com os colchetes depois, e um ponto-e-vírgula. Então, dentro dos colchetes, colocamos o valor que queremos adicionar. Então, eu vou criar um novo usuário chamado, Tom, e, em seguida, apenas remover a propriedade length lá. Então, vamos salvar e abrir isso no navegador. Então agora você pode ver que temos quatro valores agora, e Tom foi colocado no final da matriz. Mas se quisermos adicionar Tom ao início da matriz, podemos usar um método chamado unshift, e então salvar isso, e atualizar. Agora Tom é adicionado ao início da matriz, e também podemos remover valores da matriz de um tipo semelhante de maneira. Então, em vez de unshift, podemos usar o método Shift e isso irá remover o primeiro elemento de uma matriz. Basta deixar os colchetes vazios e, em seguida, atualizar. Agora você pode ver que o valor de Chris, que é o primeiro valor, foi removido. Também podemos remover o último valor de uma matriz, com o método pop. Então, os usuários ponto pop, e isso deve remover Paul, fora do final do array, e atualizar, e agora nós apenas ficamos com Chris, e Mike. Ok, e nós também podemos reverter a ordem dos valores na matriz, usando o método inverso. Agora devemos fazer Paul, Mike e Chris aparecerem nessa ordem. Ok, então antes de olharmos para adicionar valores, e remover valores desde o início, e o fim da matriz. Nós também pode usar o método fatia, que irá remover um valor de uma matriz entre um determinado ponto. Então vamos fazer isso, vai realmente criar uma nova variável. Vamos chamar isso de Slice, e isso vai ser igual a, usuários dot slice. Então, dentro dos colchetes, colocamos dois valores. Então, o primeiro valor que queremos inserir é a posição inicial. Então, se quisermos remover o Mike, essa é a nossa posição um. Se você se lembrar, o primeiro índice é zero, e depois separado por uma vírgula, colocamos o segundo valor, que é a posição final. Então nós queremos que isso termine pouco antes de um Paul, que é o valor dois. Em seguida, documente à direita, a variável de fatia, e salve isso. Agora, quando verificamos isso no navegador, devemos ver que o valor de Mike será exibido, então salve, e atualize, e lá vamos nós. Então temos o valor de Mike aparecendo na tela. Podemos usar as posições inicial e final para retirar qualquer valor que queremos dentro da matriz. Se você verificar a folha de truques fornecido, eles são alguns métodos de matriz mais adicionais que você pode ter um jogo ao redor com. Vejo você no próximo vídeo, onde vamos dar uma olhada nas funções JavaScript. 13. Funções do Javascript: Bem-vindos de volta, rapazes. Este vídeo é tudo sobre funções JavaScript. Então vamos começar da maneira usual. Então crie uma pasta Funções, que é o número 9. Em seguida, abra a pasta Funções dentro do editor de texto. Em seguida, altere o título para funções e, em seguida, basta excluir o código de exemplo lá. Uma função é basicamente um bloco de código que podemos chamar quando necessário. Então, ao invés de repetir o mesmo código mais do que uns, podemos escrevê-lo uma vez e colocá-lo dentro de uma função. Então podemos chamar uma função pelo seu nome para executá-la. Então, uma função se parece um pouco com isso. Então use a palavra-chave function e, em seguida, dê um nome à função. Vou chamar-lhe a minha função. Então precisamos usar os colchetes depois. Então o código que vamos colocar dentro da função, vai entre chaves assim. Vou começar com um alerta simples. Então eu só vou alertar algum texto, a função está funcionando. Então, uma vez que criamos uma função, então precisamos chamá-la, ou chamá-la pelo nome da função. Então, no nosso caso, é MyFunction. Vou precisar escrever para os colchetes depois, e um ponto-e-vírgula. Guarde isso. Então, há nossa função funcionando. Praticamente qualquer código que queremos entre as chaves, e ele será executado toda vez que for chamado. Então, se criarmos um par de variáveis, então variável A pode executar alguns cálculos dentro da função. Em seguida, variável B, e defina como 10. Em seguida, podemos acessar essas variáveis dentro da função. Nós vamos criar uma variável C, e isso vai ser a soma de A, multiplicada por B. Então A, e então uma estrela e B. seguida, exibir o valor de C com um document.write. Então agora, toda vez que chamamos MyFunction, devemos obter o cálculo que está sendo executado, e então o resultado do cálculo sendo impresso na tela. Então salve e atualize e, em seguida, obtemos o valor que aparece na tela. Então, para ajudá-lo a entender as funções um pouco melhor e exatamente o que elas fazem, vamos criar um exemplo real de como poderíamos usar uma função em um jogo. Então tivemos um jogo e tivemos uma variável que define a pontuação. Em seguida, a variável chamada Vidas, que define o número de vidas que o jogador tem, e, em seguida, a variável de GameOver. Isso é definido como um valor de compilação, que é verdadeiro ou falso. Então, enquanto o jogo está em execução, quero que seja falso para começar. Assim, neste caso, um bom uso de uma função pode ser reduzir o número de vidas que o jogador tem. Então, ao invés de escrever esse código toda vez que o jogador perdeu uma vida, poderíamos simplesmente chamar a função. Então crie a função, e vamos chamar isso de LifeLost. Então, toda vez que o jogador perde uma vida, nós reiniciamos a pontuação de volta para zero. Poderemos também diminuir o número de vidas por um. Também definimos o GameOver para ser igual a true. Então, quando o jogo terminar, talvez queiramos enviar uma mensagem na tela. Então documente. Escreva. Vamos colocar isso entre os títulos de nível 2. Então, o jogo acabou. Então diremos ao usuário quantas vidas eles ainda têm. Então mostraremos o número de vidas. [ inaudível] que barra lateral para dar-lhes mais espaço. Então, para imprimir o número de vidas, podemos adicionar a variável vidas. Então, após o número, vamos adicionar a string, vive à esquerda, e depois, fechar o título de nível 2. Na verdade, vou precisar de espaço. Então vamos salvar isso, então vamos chamar a função, LifeLost. Vamos dar uma olhada. Ótimo. Então agora temos a mensagem aparecendo, e as 10 vidas com as quais começamos agora foram reduzidas para nove. Podemos fazer isso de novo. Deve reduzir em um a cada vez. Espero que esse exemplo tenha lhe dado uma idéia melhor de como podemos usar funções em JavaScript. No próximo vídeo, vamos continuar dando uma olhada nos parâmetros da função. 14. Parâmetros de função: Bem-vindo de volta. No último vídeo, analisamos como definir uma função e como invocar essa função usando o nome das funções e, em seguida, os colchetes. Neste vídeo, vamos levar isso um pouco mais longe. Vou dar uma olhada em passar parâmetros para esses colchetes. Vamos começar com a pasta. Abra sua pasta JavaScript. No básico, duplique as funções. Este é o Número 10, parâmetros de função. Em seguida, abra a pasta de parâmetros de função e altere o nome. Vamos dar uma olhada em como isso funciona. Podemos apagar a seção do último vídeo. Uma nova função, e vamos chamar este AlertMessage. Desta vez vamos deixar os suportes vazios. Vou passar uma mensagem para lá. Então a função é você simplesmente vai alertar, a mensagem que você estava passando. Isso atua de forma semelhante a uma variável. De onde tiramos essa mensagem? Bem, colocamos isso nos parênteses quando a chamada funciona. AlertMessage. Desta vez, em vez de deixar os parênteses vazios, vamos passar uma mensagem que queremos alertar. Estou aprendendo Javascript. Esta mensagem é o que quer que esteja aqui. Então nós simplesmente vamos alertar essa mensagem. Vamos dar uma olhada. Aí está a mensagem, estou aprendendo Javascript. Nós também pode passar em mais de um parâmetro para a função. Se quiséssemos ter uma função, acabamos de realizar um cálculo. Vou criar uma nova função chamada MultiplyNumbers. Então podemos passar em dois parâmetros; número1 e também número2. Em seguida, podemos alertar o cálculo do número1 multiplicar pelo número2. Então, como antes, quando invocamos essa função, passamos os dois números que queremos calcular. Por exemplo, cinco e quatro. Agora devemos alertar o cálculo, que é o resultado de 20. Certo, então está tudo funcionando. Espero que tudo faça sentido e obrigado por assistir e espero que agora você tenha uma melhor compreensão de como passar parâmetros em funções. Vejo você no próximo vídeo, onde vamos dar uma olhada no escopo JavaScript. 15. Escopo do Javascript: Bem-vinda de volta. Neste vídeo, vamos dar uma olhada no escopo JavaScript. Escopo basicamente define quais variáveis temos acesso. Vamos criar uma nova pasta, e vamos dar uma olhada nisso. Então duplique o último vídeo. Este é o vídeo número 11, e vamos chamá-lo de Âmbito. Abra como de costume. Dentro do editor de texto e, em seguida, altere o título para Escopo Javascript e, em seguida, você deve remover esta seção. Vamos começar com uma função. Vamos chamar essa função multiplicar, e não precisamos de nenhum parâmetro lá apenas por agora. Então, dentro desta função, eu quero criar um par de variáveis, então variável a e definir que para dois, e variável b, dar um valor de cinco, e, em seguida, criar um alerta de uma multiplicação por b. eu quero criar um par de variáveis, então variável a e definir que para dois, e variável b, dar um valor de cinco, e,em seguida, criar um alerta de uma multiplicação por b. esta função multiplicar, e devemos obter o resultado de 10 aparecendo na tela. Então está tudo funcionando bem. Então nós criamos duas variáveis dentro desta função, e isso é o que é chamado escopo local. O que significa que essas duas variáveis só podem ser acessadas dentro desta função. Então, se estivéssemos tentando alertar uma das variáveis, então tentamos alertar, por exemplo, variável b, que foi declarada dentro da função, e então, se formos para o navegador, você pode ver que quando atualizamos essa Nada realmente acontece. Se entrarmos nas ferramentas de desenvolvedor, recebemos a mensagem de erro dizendo, b não está definido. Então apenas crie uma variável dentro de uma função, se você quiser usar dentro dessa função. Se você quiser usar essa variável fora da função, o que eu preciso para tirá-los, e colocá-los fora da função. Então agora essas duas variáveis têm escopo global, então elas podem ser acessadas não apenas dentro da função, mas também em qualquer lugar no resto do código. Agora, se alertarmos b, temos acesso a essa variável, que é o número cinco. Além disso, se usarmos a função multiplicar, se apenas remover os comentários e, em seguida, atualizar a página, que a função também tem acesso às duas variáveis também. Então lá vamos nós. Comece a olhar para o escopo das variáveis, espero que isso ajude. Obrigado por assistir, e te vejo na próxima seção. 16. Objetos do Javascript: Olá pessoal, e bem-vindos de volta. Neste vídeo, vamos dar uma olhada em objetos JavaScript. Os objetos JavaScript são partes realmente importantes do JavaScript. Tanto que quase tudo em JavaScript é classificado como um objeto. Objetos são uma coleção de pares nome-valor. Então vamos dar uma olhada em como os usamos. Então vamos criar o vídeo número 12. Isso é chamado de objetos. Então vamos abrir isto. Então arraste, insira colchetes. Vamos alterar isso para objetos JavaScript e começar com uma tag de script vazia. Lá vamos nós. Então, quando queremos criar um objeto, começamos de uma maneira semelhante a uma variável, que olhamos anteriormente. Então, usamos a palavra-chave var e, em seguida, queremos dar um nome ao objeto. Vou usar um telefone como um bom exemplo para o nosso objeto. Então vamos dar um nome de telefone. Uma maneira de criar um objeto é usando a nova palavra-chave. Então, novo objeto. Quando criamos um novo objeto, precisamos usar os colchetes depois. Este layout deve parecer bastante familiar a partir da seção de matriz, onde criamos uma nova matriz e, em seguida, adicionamos certos valores ou propriedades a essa matriz. Então agora temos nosso objeto de telefone. Podemos começar a adicionar algumas propriedades diferentes, como o fabricante do telefone, o modelo e a cor. Então, para adicionar propriedades ao nosso objeto de telefone, digitamos o nome do objeto. Em seguida, para adicionar propriedade ao objeto de telefone, podemos usar os colchetes. Em seguida, dentro das cotações, podemos adicionar o nome da propriedade. Assim, o fabricante pode ser a primeira propriedade. Vamos dar o nosso exemplo para a Apple. Em seguida, um ponto-e-vírgula no final. Podemos continuar exatamente da mesma maneira para mais propriedades. Então podemos adicionar o modelo, e isso pode ser configurado para o iPhone. A cor do telefone, então eu vou definir isso para prata. Então, definimos um novo objeto de telefone. Isso vai ter as propriedades do fabricante, definido como Apple. O modelo, definido como iPhone e a cor do telefone a ser definida como prata. Então estes são os pares nome-valor. Então este é um nome. Este é o valor atribuído com o operador igual. Os objetos são ideais para qualquer coisa que tenha um número de propriedades, como um objeto de pessoa pode ter propriedades, como um nome, uma idade, endereço e número de contato. Tão realmente útil de manter todas as nossas informações contidas em uma palavra-chave. Então agora temos nosso novo objeto de telefone criado, e adicionamos três propriedades diferentes. Nós adicionamos todos os nossos valores. Agora podemos fazer um log de console. Então podemos registrar para o console o objeto do telefone. Então vamos salvar isso e dar uma olhada, e ir para as ferramentas de desenvolvedor. Então lá vamos nós. Assim, podemos ver nosso objeto está sendo criado nos logs. Se você abrir isso, podemos ver todos os pares nome-valor. Temos a cor, o fabricante e o modelo. Então esse é o conteúdo do objeto completo. Se quiséssemos acessar apenas uma dessas propriedades, isso funciona de forma semelhante a uma matriz. Em vez de registrar o objeto de telefone, usamos um objeto de telefone e, em seguida, os colchetes. Em seguida, dentro das citações, basta colocar o nome da propriedade. Então agora devemos pegar o modelo, que é o iPhone. Cabeça e refresque-se. Então lá vamos nós. Então, há o valor do iPhone. Em nosso exemplo que acabamos de procurar, acessamos e adicionamos propriedades ao nosso objeto usando os colchetes e geralmente uma maneira mais popular e simples de adicionar propriedades a um objeto é usar a notação de pontos. Parece um pouco mais simples. Então, usando o exemplo que criamos acima, vamos fazer isso novamente com o objeto de telefone. Então vamos definir isso para um novo objeto, e vamos apenas comentar esta seção. Agora queremos adicionar propriedades. Podemos começar com o objeto do telefone. Mas desta vez, em vez dos colchetes, podemos usar o ponto. Então, um fabricante de pontos igual à Apple. O phone.model é igual ao seu iPhone e, por último, o phone.color. Então vamos definir isso para prata. Então isso funciona exatamente da mesma forma que a notação de colchetes que usamos acima, mas eu acho que isso parece um pouco mais simples e é apenas um pouco mais fácil de digitar. Então, apenas para verificar se ele está funcionando, vamos fazer um console, log do console e que irá exibir nos logs o objeto do telefone. Então salve e atualize. Então há o nosso objeto mais uma vez com o fabricante, o modelo e as propriedades de cor. Então obtemos exatamente os mesmos resultados, mas acho que parece um pouco mais limpo. Então, se você se lembra de quando criamos uma matriz, também fizemos a versão literal onde não precisávamos usar a nova palavra-chave array. Podemos fazer exatamente da mesma maneira na criação de objetos. Então, ao invés de criar o objeto, como acabamos de fazer lá, que é uma maneira, podemos usar o objeto literal. Então, é um pouco mais simples criar um objeto dessa maneira. Então vamos começar com a palavra-chave var e, em seguida, novamente dar-lhe o nome do objeto, e, em seguida, desta vez é para definir um novo objeto. Definimos o objeto de telefone para ser igual a todos os pares nome-valor, que colocamos entre as chaves. Então podemos definir dentro da cinta as propriedades. Então fabricante e, em seguida, usar um cólon. Então, Apple. O modelo, por isso vai ser separado com uma vírgula. O modelo, de novo, o iPhone. A cor de prata. Então, uma das grandes coisas sobre o uso de objetos é porque eles são apenas coleções de pares nome-valor. Também podemos aninhar um objeto dentro de outro objeto. Por exemplo, se nosso telefone tivesse muitos recursos diferentes, também poderíamos criar um objeto de recursos. Em vez de adicionar um valor, podemos usar as chaves e, em seguida, dentro das chaves, podemos adicionar mais pares nome-valor. Então, por exemplo, se o nosso telefone tivesse recursos como Bluetooth. Então vamos definir isso para um valor booleano de true e Wi-Fi. Então isso deve ser uma vírgula novamente, e então Wi-Fi, o que também pode ser verdade. GPS, vamos definir isso para ser falso, e você pode aninhar quantas propriedades quiser. Então, agora, se quisermos acessar qualquer uma dessas propriedades que estão aninhadas, é muito simples de fazer. Então, fazemos um registro de console. Então comece com o nome do objeto. O nome do objeto é telefone e, em seguida, use o ponto para acessar as propriedades. Você pode ver os colchetes já nos deu uma lista das várias propriedades. Assim, com as características de cor, fabricante e modelo. Se quisermos ir mais fundo, podemos selecionar os recursos e, em seguida, usar o ponto novamente. Então você pode ver dentro dos recursos, temos as três propriedades de Bluetooth, GPS e Wi-Fi. Então vamos guardar isso e verificar isso. Então devemos obter o valor do Bluetooth, o que é verdade. Então atualize e há o nosso verdadeiro valor, e isso muda para GPS e então devemos obter um valor de false. Lá vamos nós. Então agora temos o nosso objeto de telefone toda a configuração. Eu só vou criar um exemplo usando uma função, que nós olhamos nesta seção. Então crie uma função. Vamos apenas exibir os recursos do seu telefone em uma função. Vamos apenas fazer um alerta para o navegador. Em seguida, dentro do alerta, podemos exibir o fabricante do telefone agarrando a propriedade fabricante do objeto. Vamos começar com uma corda. Então um fabricante e, em seguida, um espaço. Podemos usar a vantagem para adicionar ao final. Vamos selecionar nosso objeto de telefone e usar a notação de pontos. Então telefone.fabricante e, em seguida, para exibir isso quando ele é chamado a função YourPhone. Então cole isso e salve isso, e então vá para o navegador e atualize. Então lá vamos nós. Há a nossa cadeia de fabricantes, e então nós puxamos o fabricante do objeto, que é a Apple. Então lá vamos nós. É assim que criamos um objeto em JavaScript, e esse é o fim desta seção. Então, obrigado. Vejo-te na próxima secção. 17. Matemática no Javascript: Bem-vindo de volta a esta nova seção chamada JavaScript Math e datas. Felizmente, agora estamos começando a entender melhor o que é JavaScript e o que JavaScript pode fazer. As coisas devem parecer mais familiares agora para você. Vamos começar olhando para JavaScript Math. JavaScript Math nos permite realizar tarefas matemáticas complexas ou simples, como criar números aleatórios, encontrar o menor ou mais alto valor em uma matriz, por exemplo, arredondar números para cima e para baixo, entre outros. Então, vamos dar uma olhada na data JavaScript. O objeto data JavaScript nos permite trabalhar com a data atual. Podemos fazer isso de algumas maneiras diferentes. Vamos dar uma olhada nisso enquanto passamos por esta seção. Vamos começar como de costume em nossa pasta JavaScript. Vou criar uma nova pasta lá dentro e chamar isso de matemática e datas. Então, eu vou apenas copiar uma pasta das seções anteriores e colá-la lá apenas para começar. Vou chamar o primeiro de matemática JavaScript. Então, vamos abrir isso no seu editor de texto. Em seguida, como de costume, altere o título para JavaScript Math. Em seguida, exclua qualquer código de vídeos anteriores. Lá vamos nós. Vamos começar com o Pi. Espero que se lembre da escola o que é Pi. Se não o fizer, pi é 3,14. Podemos encontrar isso em JavaScript usando o objeto Math, e, em seguida, ponto e, em seguida, PI. Podemos exibir Math.pi em qualquer um dos métodos habituais. Vou criar um alerta e, em seguida, colocar o Math.pi dentro dos colchetes com um ponto-e-vírgula no final. Devemos fazer isso um pouco maior para que você possa ver. Em seguida, abra o navegador e vamos ver como isso está parecendo. Aí está o nosso alerta. O valor de pi é 3.141 e muitos mais números depois disso não precisamos nos preocupar com este vídeo. Se você está feliz com isso, apenas comente isso. Em seguida, vamos dar uma olhada em como gerar um número aleatório em JavaScript. A maneira de fazer isso é com o objeto Math mais uma vez, mas desta vez use.random. Mas desta vez precisamos colocar os suportes lá dentro. Novamente, podemos apenas alertar isso para o navegador. Alerta e, em seguida, cerque o Math.Random dentro dos colchetes com o ponto-e-vírgula. Então, vamos dar uma olhada no que é exibido. Ok. Alerta no navegador é 0.85. Você pode estar se perguntando por que este é um número aleatório. Bem, em JavaScript, um número aleatório é gerado entre zero e um. Zero está incluído neste número aleatório, mas um não está, então tenha cuidado com isso. Se queremos gerar um número aleatório, por exemplo, entre um e 10, ainda precisamos fazê-lo da mesma maneira, mas então só precisamos multiplicar o resultado, por exemplo, por 10. Até agora, nos dois exemplos que acabamos de mostrar, os números têm muitas casas decimais como esta ali. Mas às vezes queremos arredondar para o número inteiro mais próximo. Com JavaScript, podemos arredondar para cima ou arredondar para baixo. A maneira de arredondar para cima. Criamos um alerta para começar. Então, dentro dos suportes de alerta, precisamos usar Math.Ceil, que é curto para teto. Então, dentro dos suportes depois disso, precisamos colocar o número que queremos arredondar para cima. Se criarmos um número de 4.5, isso deve arredondar esse número para o número inteiro mais próximo, que é cinco. Então atualize. Temos o valor de cinco na caixa de alerta. Isso funciona com qualquer número. Ainda devemos pegar cinco agora. Arredondar para baixo é realmente muito semelhante. Em vez de Math.Ceil, usamos Math.Floor. Então, novamente, passamos o número que queremos arredondar para baixo. Para um número agora de 7.6, devemos agora obter o valor de sete dentro da caixa de alerta. Ótimo. Novamente, isso funciona com qualquer número. Não importa quão alto ou quão baixo é o número, você ainda vai sempre arredondar para baixo para o número inteiro mais próximo. Vamos comentar isso e, em seguida, continuar abaixo disso. É uma maneira de arredondar um número para cima ou arredondar um número para baixo. Mas se quiséssemos arredondar para o número inteiro mais próximo em vez de todos arredondar para cima ou para baixo, podemos fazer isso com Math.round. Criar a caixa de alerta e, em seguida, Math.round. Agora, por exemplo, um valor de 7,2, isso deve ser arredondado para o número mais próximo de sete, que chegamos lá. Se estiver acima de cinco, como 7.6, deve arredondar para oito agora. Se o número que passamos estava no meio, então era 7,5, esse valor sempre será arredondado para cima. Ainda devemos colocar oito na caixa de alerta. Vou apenas comentar este e depois passar a olhar para os números mínimos e máximos. Se tivéssemos mais de um valor e queríamos verificar qual é o número mais baixo ou qual é o número mais alto, podemos usar Math.min e Math.max. Vamos alertar desta vez Math.min. Então, dentro dos colchetes desta vez, podemos passar em mais de um valor. Vamos colocar alguns números separados por vírgulas. Oito, 15, 3 e 63. Agora, devemos ser capazes de descobrir qual é o número mais baixo. É por isso que com [inaudível] devemos obter o valor de três dentro do alerta, o que fazemos. Então, tudo o que precisamos fazer para encontrar o valor mais alto é apenas mudar.min para.max, e agora devemos obter o valor de 63. Lá vamos nós. Diz 63 dentro da caixa de alerta. Há mais um ou dois exemplos para ver na sua folha de truques e todos eles funcionam de forma semelhante aos exemplos que acabamos de passar por lá. Agora temos uma melhor compreensão de como funciona o JavaScript Math. No próximo vídeo, vamos colocar isso em prática em um mini desafio. 18. Minidesafio: gerar um número inteiro aleatório entre 1 e 100: Bem-vinda de volta. Espero que tenha tido a chance de brincar com algumas das matemática JavaScript que vimos no último vídeo. Então agora temos toda a teoria chata fora do caminho. Vamos agora colocar tudo isso em prática e criar outro mini desafio. Vai ser bem simples, embora você precise pensar em uma ou duas coisas ao longo do caminho. Tudo o que eu queria fazer neste desafio era gerar um número aleatório entre um e 100. É algo que deve ser capaz de fazer. É algo que vimos em vídeos anteriores, e é algo que não deve causar problemas. Bem, se isso acontecer, não se preocupe, apenas siga com o que eu faço no final deste vídeo e eu vou te mostrar exatamente como fazer isso. Então vá para sua pasta JavaScript e, em seguida, a matemática e data, seção. Duplicar o último vídeo, e chamá-lo do que quiser, mas eu vou chamar um desafio de número aleatório, e então abrir isto no seu editor de texto. Por último, altere o título e remova o código do último vídeo, então Mini desafio: Gerar um número aleatório entre 1-100. Não precisamos mais disso, então podemos removê-lo. Se não achar que precisa de ajuda, pare o vídeo agora e tente. Se você sentir que ainda precisa de mais uma ou duas dicas, dê uma olhada no último vídeo novamente e dê uma olhada na seção Math.Random nesse vídeo, e isso deve lhe dar todas as pistas que você precisa para completar o desafio. Então dê uma chance, e se você não se sentir confiante, não se preocupe. Eu vou passar por como eu faria isso agora. Vamos começar entre as tags de script. Vou começar criando uma variável para armazenar o número aleatório dentro. Vou chamar esse número arredondado variável, e então isso vai ser definido como Math.Random, que vimos no último vídeo. Não se esqueça dos colchetes e, em seguida, do ponto e vírgula. Se você se lembrar que o Math.Random gerou um número aleatório entre zero e um, mas porque queremos que o valor seja entre um e 100, precisamos multiplicar o valor por 100. Então vamos manipular essa variável. Então copie isso e cole. Então o número arredondado é agora igual ao número arredondado, multiplicar por 100, e então vamos imprimir isso para a tela. Vou usar um document.write, e depois passar dentro da variável, que é o número arredondado. e vamos ver como isso está procurando agora, e atualizá-lo algumas vezes. Você deve verificar se está funcionando bem. Então, precisamos também arredondar esse número para o número inteiro mais próximo. Eu vou realmente arredondar o número para baixo. Novamente, basta ir para o código e, em seguida, alterar a variável número arredondado, então Math.Floor. Então dentro dos colchetes desta vez, em vez de apenas digitar um número que você acabou de colocar em nós mesmos, vamos passar na variável número arredondado, e então dar uma olhada nisso. Espero que tenha conseguido fazer isso. Mas há um pequeno obstáculo com isso. Se você se lembrar que o número aleatório que geramos começou em zero, mas na verdade não incluiu o número 1, portanto, o maior número que podemos possivelmente ir será 99. Para aumentar isso, vamos usar mais um. Se você continuar atualizando ele deve finalmente obter os valores de um e 100, mas pode demorar um pouco. Então agora está tudo funcionando. Só quero mostrar mais uma coisa antes de terminarmos este vídeo. Então, o código que criamos neste desafio, é bastante passo a passo e tudo está em linhas separadas. A maneira que podemos realmente combinar isso para ser um pouco mais limpo e tudo em uma linha, eu vou apenas comentar isso. Se você estiver usando colchetes como eu, você pode destacar todo o código e, em seguida, comando na barra. Para colocar tudo isso em uma linha, podemos começar com a mesma variável. Eu só vou copiar isso e colar isso. Mas desta vez vamos começar com Math.Floor, então o resultado é arredondado para baixo. Em seguida, dentro dos suportes, você pode colocar na matemática.Aleatório, modo a colar que dentro de lá. O número aleatório que geramos, queremos que seja multiplicado por 100. Então, vamos nos livrar da barra lateral para que possamos ver tudo em uma linha lá, exemplo , multiplicar 100, e certifique-se de que toda esta seção existe entre a matemática. Então, fora dos colchetes, podemos adicionar o nosso mais um, assim como fazemos lá acima. Salve isso e ainda podemos usar o mesmo document.write, e então espero que, se formos para o navegador e atualizar, ainda devemos obter o mesmo resultado. Mas desta vez, está tudo em uma linha e parece um pouco mais limpo. Lá vamos nós. Então, espero que consiga isso sozinho. Se não, não se preocupe. Siga com o exemplo que acabei de fazer e tente entender exatamente o que estamos fazendo, e eu vou vê-lo no próximo vídeo. Vamos dar uma olhada em datas JavaScript e métodos de data. 19. Datas e métodos de data: Neste vídeo, vamos dar uma olhada em datas JavaScript. Vamos começar da maneira usual e criar uma nova pasta. Eu só vou duplicar os mini-desafios do último vídeo e chamá-lo de Datas. Em seguida, abra o editor de texto e arraste a pasta de datas para lá. Agora o título vai ser datas JavaScript. Podemos apagar o código do último vídeo entre as tags de script. Para começar, vamos começar com uma maneira simples de criar um novo objeto de datas, e vamos armazenar isso dentro de uma variável. Comece criando uma variável, e você pode chamá-la do que quiser. Vou ligar para o meu encontro. Então precisamos definir isso igual a uma nova data. Você precisa colocar colchetes depois disso. Em seguida, podemos usar um document.write ou qualquer outro método que você preferir para mostrar a variável de show date, então coloque isso entre os colchetes e, em seguida, um ponto-e-vírgula. Lá vamos nós, então agora temos a data completa impressa no navegador e você obviamente terá uma data diferente lá dependendo do dia em que você está assistindo este vídeo, e seu fuso horário. Usando este objeto dia, ele nos dá o dia atual, o mês, o dia do mês, o ano, a hora atual e, em seguida, o fuso horário. Esta fórmula é bastante longa e muitas vezes não queremos toda essa informação. Vou mostrar-lhe a seguir, obter e definir métodos. Eles são praticamente o que eles soam, um método get é usado para obter um certo caminho da data. Então podemos obter as horas individuais, podemos ter o dia individual, ou os segundos, ou a hora. Em seguida, também podemos usar métodos de conjunto que são usados para definir um caminho da data, como definir a hora atual ou definir a data atual. Vamos começar por dar uma olhada nos métodos get. Cada um desses métodos get que eu vou mostrar a vocês, eu vou armazená-lo dentro de uma variável. Para começar, vou definir a variável chamada data e, em seguida, definir que igual a uma nova data, começando com um D maiúsculo e, em seguida, os colchetes. Agora temos a data atual. Podemos dividir isso no dia do mês. Novamente, não importa o que você chama essas variáveis, apenas torná-las descritivas. Vou definir que igual à variável de data que criamos e, em seguida, colar isso em, e, em seguida, usar ponto e, em seguida, obter data. Você pode realmente ver o autocomplete lá. Isso lhe dará uma idéia do que estamos prestes a fazer. Obtenha datas e ponto-e-vírgula no final. Estamos criando um novo objeto de datas, e então nós apenas obter uma propriedade individual cada vez. Eu só vou duplicar essa linha. Desta vez eu vou chamá-lo de o dia da semana, então desta vez é a data.GetDay. Então, para obter o mês, vamos criar uma nova variável de mês. Você provavelmente poderia adivinhar o que estamos prestes a fazer aqui. É um encontro. GetMonth. Você também pode obter o ano atual. Precisamos de um ano. By the way, você pode ter que apenas copiar e colar estes, ou eu estou usando comando ou controle D para duplicar entre parênteses. Se o editor de texto que você está usando não duplicar, basta copiar e colar. Após o ano, podemos obter as horas e, em seguida, minutos, date.GetMinutes. Então o último que eu quero mostrar a vocês são os segundos, então Date.GetSeconds. Vamos comentar essas duas linhas, não precisamos delas. Agora temos todas essas variáveis criadas e podemos querer apenas usar certas partes da data. Por exemplo, podemos querer criar uma cadeia de caracteres, como a data de hoje é, e, em seguida, inserir o dia, o mês e o ano. Vamos dar uma chance. Vamos fazer um documento.escreva. Então, entre as citações, eu vou criar uma seqüência de data de hoje é e, em seguida, dois pontos. Vou colocar isto em linhas separadas para que seja um pouco mais legível. Queremos mostrar o dia e depois o mês, e depois o ano. Queríamos exibir isso no navegador, exatamente como está. Podemos colocar algumas tags HTML break lá e, em seguida, terminar a string lá, e então precisamos concatenar para juntar as strings, basta usar o símbolo de adição. Porque cada uma dessas palavras é uma string, rodee-as entre aspas. O mesmo com o ano. É muito simples de fazer isso, então temos a cadeia do dia com um espaço e depois mais. Em seguida, o dia é a variável chamada dia da semana. Podemos nos juntar agora até o final do mês. Precisamos nos juntar no nome da variável do mês. Em seguida, o ano, basta adicionar o ano. Podemos ver que nosso código é bastante legível agora porque usamos nomes de variáveis descritivas. Certifique-se de fazer isso quando puder. Então, por último, nós só precisamos adicionar no final uma tag break apenas para que eles estejam em linhas separadas e, em seguida, outra junção no final. A tag break precisa ser exibida assim. Então faça na próxima linha também. Entendido, e isso nos leva à próxima linha, como podem ver. Não precisamos disso. Em seguida, termine com um ponto e vírgula. Começamos com uma string lá, a data de hoje é, colocamos a marcação de intervalo para entrar na próxima linha, e então teremos três linhas separadas que exibem o dia, o mês e o ano atual. Vamos salvar isso e ver se funciona bem no navegador. Refresque isso. Então temos o dia de hoje é, o número do dia, o número do mês, e o ano é 116, então precisamos mudar isso. Fizemos o ano. Precisamos colocar o ano inteiro lá dentro. Lá vamos nós. Então é 2016 agora. Espero que isso faça sentido. Eu só vou comentar esta seção agora. Estes são os métodos get, e eu quero passar agora para definir métodos que são usados para definir a data. Vamos começar com uma nova variável chamada set date, e assim como acima, vamos definir que igual a uma nova data. Então agora podemos definir algumas partes da data. Então, se quiséssemos definir o mês da coluna, poderíamos usar a variável do nome do conjunto, em seguida, ponto, e então precisamos definir o mês e, em seguida, colocar o mês que você deseja definir dentro dos colchetes. Podemos definir isso como 11, por exemplo. Então, se quisermos definir o ano, novamente, use a variável de data definida e, em seguida, ponto definir ano inteiro. Você pode definir isso para o que quiser. Vou colocar em 2020. Você pode ver que estes são bastante semelhantes aos que usamos acima, estamos apenas substituindo get com set. Vamos verificar se ele está funcionando com a gravação do documento. Em seguida, dentro do documento escrever vamos usar a variável de data definida. Então, olhamos mais de perto, vocês podem ver que temos o mês de dezembro. Nós colocamos no 11º mês, que é na verdade o último valor porque o mês definido vai de 0-11, então 11 seria dezembro. Nós definimos o ano inteiro para 2020, e você pode ver isso dentro do navegador lá. Não tocamos na hora, então esse é o fuso horário atual. Lá vamos nós. Espero que isso faça sentido. Ter um pouco de brincadeira com o que acabamos de olhar. Obrigado por assistir, e veremos você no próximo vídeo. 20. Declarações “if” e comparação: Parabéns por ter chegado tão longe. Esta é uma nova seção chamada Controle Fluxo e Loops. Nesta seção, vamos dar uma olhada em alguns novos métodos, como instruções if else e vamos dar uma olhada em operadores, instruções switch, e vários tipos de loops. Como de costume, vamos lançar um ou dois muitos desafios lá, para possamos colocar em prática o que você tem aprendido e ver como ele funciona em exemplos da vida real. O primeiro vídeo que vamos começar com é chamado if declarações e comparação. Em JavaScript, e muitas de nossas linguagens de programação, muitas vezes podemos lidar com muitos dados, como números e valores. Muitas vezes precisamos de uma maneira de comparar mais de um valor com outro e decidir sobre um resultado. JavaScript nos fornece uma maneira de comparar os chamados operadores de comparação. Em seguida, se teste declaração para ver se uma condição é verdadeira. Se essa condição for verdadeira, então ele executa algum código. Vamos dar uma olhada em alguns exemplos. Como estamos em uma nova seção, queremos criar uma nova pasta. Vou chamar esse fluxo de controle de pasta e loops. Então queremos ir para um dos vídeos anteriores e apenas copiar qualquer um desses, e depois colar apenas para termos um ponto de partida. Em seguida, renomeie este if declarações e comparação. Em seguida, abra isso entre parênteses ou seu editor de texto. Basta arrastá-lo para lá e, em seguida, mudar o título na página de índice. Meu caso é, se declarações e comparação, e, em seguida, remover o código entre as tags de script. Lá vamos nós. Também não precisamos disso. Para começar, vamos dar uma olhada em uma comparação simples apenas para comparar duas variáveis. Variável igual a 10 e também variável b igual a 20. Vamos começar com uma simples instrução if apenas para verificar se o valor de a e b é o mesmo. Para começar, usamos a palavra-chave if e, em seguida, um conjunto de colchetes, e depois disso, um par de chaves. Com uma declaração if entre os colchetes aqui, colocamos uma condição para testar. No nosso caso, queremos testar se a é igual a b, então vamos apenas colocar isso lá, então a, e então três iguais e, em seguida, b. Se você se lembrar, os três iguais verificar se os valores são igual valor e também igual tipo. Vamos verificar se a é igual a b, e, em seguida, se for, queremos fazer uma gravação de documento e, em seguida, imprimi-los para o navegador apenas para nos informar que a condição é verdadeira. Eu só vou escrever condição é verdade e apenas torná-lo um pouco maior. Vamos colocar algumas tags de título de nível 2 lá. Então h2 antes e depois, e então vamos abrir o aplicativo no navegador e ver o que acontece. Novamente, nada está mostrando no navegador porque a condição não é verdadeira, porque a não é igual a b. Se nós apenas alterar ambos os valores para ser o mesmo e, em seguida, atualizar, devemos agora obter a condição da mensagem é verdadeira. A instrução if está funcionando corretamente. Assim como os três iguais, há muitas outras comparações diferentes que podemos usar. Mencionamos anteriormente em que o uso de dois símbolos iguais irá verificar se a e b é igual valor, mas não igual tipo. Por exemplo, um pode ser uma string e outro pode ser um número. Se quisermos verificar se os valores não são iguais, usamos um ponto de exclamação e, em seguida, um símbolo igual. Vamos apenas mudar isso para não ser igual e nós ainda devemos obter a condição é verdadeira, o que nós fazemos lá. Isso verifica o valor. Se você quisesse verificar o valor e o tipo, poderíamos usar dois iguais e o ponto de exclamação. Isso significa não igual valor ou tipo. Também podemos usar menos ou maior que. Se a é maior que b, o que é, a condição ainda é verdadeira. Se a foi menor que b, ele agora deve estar em branco porque a condição é falsa. Combinando o menor que e maior que com um símbolo igual significa se a é menor ou igual a b, em seguida, executar este código entre as chaves, e exatamente o mesmo com o maior que. Se a for maior ou igual a b, a condição é verdadeira. Vamos refrescar isso. Isto é verdade porque a é maior do que b. Se b também era 20, então eles eram iguais, devemos também obter condição é verdadeira. Bom. Espero que isso faça sentido. Eu só vou mostrar a vocês um exemplo rápido de como isso pode ser usado em um programa da vida real. Vou apenas verificar se um usuário está logado e também verificar o nome do usuário. Uma instrução if poderia verificar se um usuário está conectado e , em seguida, imprimir para o navegador uma mensagem de boas-vindas para o usuário conectado. Com uma variável como logado, eu quero definir isso como um valor booleano de true. Isso pode ser verdadeiro ou falso. Em seguida, uma variável que armazena o nome do usuário. Quero colocar o meu para Chris. Então, assim como antes, vamos criar uma declaração if. Se você quiser apenas verificar se um usuário está logado, podemos apenas verificar se está logado. Não precisamos usar nenhum operador de comparação, como igual, porque isso já está definido como true. Abra a variável. Se o usuário estiver conectado, vamos criar uma mensagem para esse usuário com uma gravação de documento. Isso pode ser tão simples, ou tão complicado quanto você quiser. Vou apenas criar uma mensagem de boas-vindas para esse usuário e, em seguida, adicionar no final dessa mensagem de boas-vindas o nome da variável do usuário. Isto deve dizer, bem-vindo Chris. Em seguida, vamos abrir o navegador. Lá vamos nós. Recebemos a mensagem de boas-vindas porque o usuário está definido para logado. Se você alterar isso para ser falso e, em seguida, atualizar o navegador novamente, devemos perder a mensagem porque esta condição não é mais atendida. Espero que tudo faça sentido para você agora. Se isso não acontecer, basta dar uma olhada em alguns dos exemplos que acabamos de usar e tentar colocar sua cabeça em torno dele antes de passar para o próximo vídeo, onde vamos construir sobre as declarações if, dando uma olhada em if else declarações. 21. Declarações “else” e “else if”: Bem-vindos de volta, pessoal. No último vídeo, nós demos uma olhada em se declarações. Se as instruções verificam se uma condição é atendida e, em seguida, se essa condição for verdadeira, então executamos algum código. Embora se tivéssemos mais de um resultado, precisamos de uma maneira de lidar com isso. Podemos lidar com isso usando uma declaração else ou uma declaração else-if. Vamos colocar isso em uma nova pasta. Duplicar o último vídeo, na verdade, quando eu numerar isso, eles estão em ordem. Número 1, e então este vai ser o número 2, este é outro e else-if. Em seguida, abra o editor de texto e altere o nome na parte superior. Isso vai ser mais declarações, e else-if, apenas movendo-se para baixo entre as tags de script. Em vez de excluir, isso que podemos realmente fazer é construir sobre o último vídeo para começar. Fazemos o check-in se um usuário estiver logado. Se esse usuário estiver conectado, enviaremos uma mensagem para o usuário, mas isso não fornecerá backup caso o usuário não esteja conectado. Este é o lugar onde uma instrução else pode ser usado. Logo após a chave, podemos então digitar outro e, em seguida, fornecer um segundo conjunto de chaves, e isso é para a condição se o usuário não estiver conectado. Podemos copiar o documento, colar entre as chaves. Desta vez, se o usuário não estiver logado, vamos apenas enviar uma mensagem para esse usuário apenas para conectá-los. Por favor, faça login para ver a página. Ainda temos a variável de logado definido como false, então agora devemos obter a mensagem de login. Lá vamos nós. Por favor, faça login para ver a página, isso é usado como um fallback caso a declaração original não seja verdadeira. IF-else declarações são usados regularmente em linguagens de programação. É um conceito muito útil para se acostumar. [ inaudível] if-else declaração, e você pode estar se perguntando o que fazer se houver uma terceira opção ou uma terceira condição para atender, e isso é bem simples. Podemos apenas construir em geral, e entre as declarações if-e as declarações else onde você simplesmente usa um else-if. Vamos criar um novo exemplo. Apenas apague tudo isso. Vou criar um exemplo apenas para mostrar como isso é usado. Isso é baseado na velocidade de um carro. Vamos verificar uma variável, que é o limite de velocidade. Por exemplo, eu vou definir os limites de velocidade para 70, e então uma segunda variável que é a sua velocidade, e também definir isso para 70 apenas para começar. Por exemplo, vamos imprimir uma mensagem no visor do carro. Crie um if-statement, e o if-statement quer verificar se a sua velocidade, colocar essa variável dentro de lá, é menor que o limite de velocidade. Cole lá dentro, portanto, se a sua velocidade que você está fazendo é menor do que os limites de velocidade atuais, podemos criar uma mensagem com direitos de documento, como, obrigado por dirigir com segurança. Basta remover a barra lateral para obter um pouco mais de espaço lá, e então nós podemos criar um else-if e, em seguida, os colchetes e, em seguida, as chaves. Se a sua velocidade é maior, nós apenas copiamos esta condição com base no else-if, e ele muda para maior que. Se você ultrapassar o limite de velocidade, vamos colocar um documento sobre lá dentro, e desta vez dizer, por favor, abrandar. Então nós vamos apenas terminar isso com um outro declarações como o backup. Você pode colocar mais de um else-if declarações lá, se você quiser, ele só precisa ir direto após a última chave, mas certifique-se de que uma instrução else está no final. Como um fallback, se a velocidade é igual ao limite de velocidade, basta colocar uma mensagem simples lá, como, cuidado, você está dirigindo nos limites de velocidade. Nós não precisamos colocar colchetes dentro de lá com uma condição, apenas para este tempo porque há apenas uma [inaudível] condições para atender. Nós cobrimos se a velocidade é menor ou maior do que o limite de velocidade, o único resultado possível que podemos obter é se as velocidades são iguais, e isso é coberto pela outra declaração lá. Vamos dar uma olhada. Atualmente você tem o limite de velocidade para ser igual à sua velocidade, devemos receber a mensagem cuidadosa no final lá. Vamos abrir isto. Teremos cuidado que você está dirigindo nos limites de velocidade. Vamos mudar as variáveis. Nós colocamos sua velocidade em 60, devemos obter, obrigado por dirigir com segurança. Refresque isso, e lá vamos nós, diz a mensagem de agradecimento. No último a verificar é se sua velocidade é maior do que o limite de velocidade, que você recebe a mensagem por favor abrandar, que nós fazemos isso, então isso é ótimo. Obrigado por assistir, e este é o fim do vídeo sobre outras declarações e declarações else-if. No próximo vídeo, vamos colocar estes em prática com um pequeno mini desafio. 22. Minidesafio: verificador de idade: Bem-vinda de volta. Agora, é a sua chance de dar mais declarações para ir com um mini desafio. É um desafio bastante simples, se você entendeu os últimos vídeos. No entanto, dá-lhe a oportunidade de escrever sozinho sem me ver, e assim deve ficar na sua memória um pouco melhor. Basta duplicar o último vídeo em declarações else-if, e então este é o número 3, e o mini desafio vai ser chamado de verificador de idade. Em seguida, abra o aplicativo no editor de texto, arraste a pasta e, em seguida, abra a página de índice, altere o título para Verificador de idade e exclua esse código, para que não trapaceemos. Ok, então isso é bastante simples. Tudo o que eu quero que você faça é criar algumas variáveis, uma para uma idade mínima e outra para a sua idade atual.Then crie uma declaração if-else, assim como usamos no último video.Then fazer algumas verificações. Primeiro de tudo, verifique se sua idade está abaixo da idade mínima e, em seguida, crie uma mensagem para o navegador. Quando nos revistarmos, por favor, volte quando tiver 18 anos. Em seguida, mais algumas condições, como se você tem idade suficiente ou se você tem uma certa idade para verificar sua identificação. Dê o Ago que apenas usa coisas que aprendemos no último vídeo. Não há nada extra que você precisa para tentar pesquisar ou Google. Tente isso e veja como fica. Se você ficar preso ou se você não se sentir confiante o suficiente para tentar isso aqui, apenas me acompanhe. Vou criar uma variável de idade mínima. Quero definir isso para 18. Então uma variável, que é a sua idade e vai ser 15, por exemplo. Em seguida, crie a sua declaração if abaixo. Se você preferir colocar tudo isso vazio primeiro só para ter certeza que você tem tudo no lugar certo. Assim como isso, pode ser útil apenas para garantir que não perca nenhum aparelho ou suporte. Ok. Então, primeiro de tudo, queremos verificar se você é menor de idade. Verificamos a variável, YourAge. Se YourAge for menor que o MinAge, criaremos uma mensagem para o usuário com o document.write. Dentro dos suportes, “Desculpe, por favor volte quando tiver 18 anos”. Então eu vou criar uma declaração else-if. Vou verificar se sua idade é de 25 anos ou menos, e depois criar uma mensagem para fornecer alguma identificação. Se a sua idade atual é maior ou igual a 18, então os dois símbolos e comercial também verificar a segunda condição. Em seguida, o YourAge é menor ou igual a 25. Queremos que seja um símbolo maior que. Então, se você tiver mais de 18 anos, mas menos de 25, criaremos uma nova mensagem para fornecer alguma identificação. Desta vez, a mensagem é “Por favor, forneça a identificação”. Temos todas as condições importantes, uso [inaudível] é igual a 25. A instrução else no final fornece o fallback se o usuário tiver mais de 25. Nesse caso, vamos apenas criar um document.write apenas permitindo que o usuário entre. Por favor, insira e salve isso. Vamos testar isso no navegador e ver tudo isso funciona. Atualmente, o usuário é menor de idade. Devemos receber a mensagem triste da declaração If, que fazemos: “Desculpe, por favor volte quando tiver 18 anos.” Se o usuário agora está entre 18 e 25 anos, devemos obter a mensagem de identificação por favor responda. Então, por último, se o usuário tiver mais de 25 anos, deve ser permitido entrar no site. Então, refresque-se, e lá vamos nós. Recebemos a mensagem final de, por favor, entre. Tão bem feito se você conseguir fazer isso por conta própria, se foi algo que você fez luta com, não se preocupe. Agora você seguiu junto comigo, pode ser fazer um salto um dia ou dois e tentar novamente mesmo e ver se você pode malhar na próxima vez. Ambos agora, obrigado. Vejo você no próximo vídeo. 23. Operadores lógicos: Então, nós olhamos para usar as declarações if else. Temos operadores de comparação como maior que, menor ou igual a. Neste vídeo, vamos dar uma olhada nos operadores lógicos. Operadores lógicos também são frequentemente usados com instruções if else. Vamos dar uma olhada em como podemos usá-los. Vamos começar com uma pasta. Este é o número 4. Isso é chamado de operadores lógicos. Em seguida, abra essa pasta entre colchetes. Basta deixar isso aí dentro. Então, novamente, comece da mesma maneira que de costume com um novo título de operadores lógicos e, em seguida, exclua tudo entre as tags de script que não precisamos. Então, para começar, vou criar um par de variáveis com as quais podemos trabalhar. Então simplesmente vamos chamar este número 1 e definir que seja 10, e então uma segunda variável, número 2. Vou definir este para ser 20. Então, o que vamos estar olhando neste vídeo é usando o e qual são os dois comerciais. Vamos olhar em tudo, que são as duas barras verticais ou os tubos, e olhando para o ponto de exclamação, o que significa que não. Então vamos começar com e. Vou combinar isto com uma declaração “if”. Então vamos criar uma simples declaração if. Vamos criar document.write apenas dizendo condição é verdadeira, e na verdade vamos colocar algumas tags h2 em torno destes, então apenas um pouco maior. Então vamos começar com uma condição que é verdadeira. Então, se o número 1 é igual a 10, então essa é a condição correta é verdadeira para o navegador. Lá vamos nós. Então isso é verdade. Se quiséssemos verificar se mais de uma condição era verdadeira, podemos usar o operador lógico e. Então podemos testar uma segunda condição. Então isso é se o número 1 é igual a 10, e também se o número 1 é menor que 20, e ambas as condições são verdadeiras. Então, se apertarmos atualização, olhamos para a condição é verdadeira afirmação. Então essa é uma boa maneira de verificar se mais de um valor precisa ser verdadeiro para acionar uma ação. Assim como e, se quiséssemos apenas verificar se uma dessas afirmações era verdadeira, podemos usar as duas barras verticais ou os dois tubos. Agora, apenas um desses lados precisa ser verdadeiro para acionar este documento corretamente. Se o número 1 for igual a 10, ou o número 2 for igual a 10. Então agora apenas o número 1 é verdadeiro e o número 2 é falso. Então, refresque-se, e lá vamos nós. Então obter condição é verdade. Mas se mudarmos isto para duas condições falsas, esse texto desaparece agora. No próximo vamos olhar para não. Se você se lembrar do início do curso, analisamos alguns dos operadores que você poderia usar, como menor e maior que. Estes podem ser combinados com o ponto de exclamação, que faz exatamente o oposto. Então, em vez do símbolo inferior, isso significaria simplesmente não menos do que. Então vamos testar isso em nossa declaração se e dar uma olhada. Então vamos deletar um pouco disso. Então vamos começar com uma afirmação verdadeira. Então, se o número 1 for menor que o número 2, o que é devemos receber o texto lá, mas se quisermos fazer exatamente o oposto, eu faria essa condição falsa. Simplesmente combinaremos isso com o símbolo “não”. Então, se o número 1 não é inferior a 2. Então, agora, se atualizarmos, devemos ver que o texto desaparece, e não precisa ser o símbolo menor ou maior que. Também podemos usar o símbolo de igual. Então, se o número 1 não for igual a 20, imprima esta declaração. Lá vamos nós. Então isso é apenas queria mais dois operadores para procurar, que você pode achar útil, e eu vou vê-lo no próximo vídeo onde vamos dar uma olhada no uso de instruções switch, e vamos dar uma olhada em como podemos usá-los em JavaScript para lidar com múltiplos resultados ou múltiplos casos. Por isso, obrigado e vemo-nos lá. 24. Declarações “switch”: Neste vídeo, vamos dar uma olhada nas declarações do switch. Switch instruções funcionam de forma semelhante às instruções if else, que analisamos anteriormente na seção. Na declaração comutada, nós fornecemos vários resultados ou casos. Então, quando uma expressão corresponde a um desses casos, uma ação é executada. Vamos dar uma olhada em como as instruções switch funcionam em JavaScript. Vamos criar uma nova pasta, e é o número 5, e é chamado switch-statements. Em seguida, ele foi aberto em nosso editor de texto, e, em seguida, arrastar para dentro da pasta switch-statement e, em seguida, abrir a página de índice. Vou torná-lo um pouco maior para que você possa ver. Em seguida, mudaremos o título novamente para mudar de instruções. Em seguida, remova tudo isso entre as tags de script. Com instrução switch quando estamos comparando uma declaração, ou no nosso caso, vamos criar uma variável. Vou chamar essa variável de mês e, em seguida, quando eu definir isso para janeiro, e, em seguida, para criar uma instrução switch, usamos a palavra-chave switch e, em seguida, abrir alguns colchetes e, em seguida, as chaves. Basicamente, parece um pouco como uma declaração se fora do palco. Como as declarações if, passamos dentro dos colchetes, a condição que queremos verificar. No nosso caso, queremos verificar a variável do mês. Então vamos fornecer vários casos com os quais queremos verificar, e usamos a palavra-chave caso. Então começamos a dar-lhe alguns resultados que queremos verificar. Se verificarmos se o valor de janeiro, e então usar dois pontos, e se for janeiro, podemos fornecer um resultado. Eu vou em torno de algum código. Só vou fazer um documento. escrever, e agora ele está passando uma mensagem lá, como feliz ano novo. Em seguida, você deseja usar a palavra-chave break, e quando uma expressão é correspondida ao caso particular, neste exemplo, janeiro corresponde ao caso, porque isso é correspondido, então usamos a palavra-chave break, e colocar isso após cada caso, e assim que a condição é atendida, ele quebra as instruções switch. Mas dissemos anteriormente que as declarações switch são úteis para verificar muitos resultados diferentes. Simplesmente fazemos isso com mais casos. Vamos colocar mais alguns meses que adicionamos lá. Vamos colocar em julho lá e depois um documento.write. Desta vez eu deveria colocar uma metade do ano. Em seguida, a palavra-chave break novamente, logo após o document.write, apenas no caso de esta condição ser correspondida, certifique-se de que todos os casos entre as duas chaves de por que começam a ter problemas. Podemos continuar com quantos quiser. Eu vou criar um para dezembro, e então dois pontos, na verdade, vamos apenas copiar este documento.write, e depois colá-lo. Desta vez, para dezembro, vamos colocar, quase o ano novo e depois o intervalo, logo depois. Isto é essencialmente como uma instrução switch funciona. Ele vai passar pelos casos individuais até que a instrução é correspondida e, em seguida, ele vai quebrar fora da instrução switch. Mas, se um resultado não puder ser encontrado, precisamos fornecer um caso padrão. Este é um código padrão para ser executado, é sabido que os casos são correspondidos. Padrões e dois pontos, e então ele está colocando o código padrão lá. Eu só vou colocar o mês é, e então eu vou apenas colocar a variável mês lá. Se contarmos muito uma das declarações para cima, e se não puder imprimir a mensagem, vai apenas obter o padrão, o mês é, e, em seguida, no nosso caso em janeiro. Então salve isso, e então ele é aberto no navegador. Porque temos o mês como Janeiro, definimos o caso para ser feliz ano novo, que é apenas o primeiro a chegar. Se mudarmos o mês para Julho, devemos passar a metade da mensagem aérea. Atualize isso, e metade do ano aparece. Vamos tentar dezembro. Quanto obter o terceiro caso de quase o ano novo e atualizar. Eles ficam ótimos, e se colocarmos em um mês, o que não é um desses casos, então vamos tentar março. Felizmente, devemos obter o caso padrão, que é o mês, e depois março. Lá vamos nós. Nós também podemos colocar em quantos casos você quiser, e você pode até fornecer mais de um caso com o mesmo pedaço de código para executar. Por exemplo, se você quiser, outro caso lá, e queremos que ele diga quase o ano novo para novembro e dezembro, isso não é um problema. Podemos apenas fazer nossos casos assim, e então este documento.write, será executado se o caso for novembro ou dezembro. Vamos tentar isso. Então mude a variável para novembro. Quase o ano novo, e isso deve funcionar o mesmo para dezembro também. Ainda quase o ano novo, vamos tentar mais um. Então, outubro, não temos um caso para outubro, então devemos obter o padrão, que é baixo na parte inferior, atualizar, e lá vamos nós. Então, o mês é outubro. Espero que isso faça sentido e espero que você entenda que as declarações switch são realmente úteis para quando queremos verificar uma condição contra muitos possíveis resultados diferentes. No próximo vídeo, vamos nos afastar da teoria. Vou passar para um mini desafio onde você pode começar por suas habilidades que você aprendeu, na seção em prática. 25. Minidesafio: jogo de maior ou menor: Bem-vinda de volta. Neste vídeo, vamos fazer uma pausa da teoria e criar um mini desafio, que vai ser umjogo simples, maior ou menor, jogo simples, maior ou menor, e basicamente vai consistir em um número aleatório gerado por computador entre um e 10. Então precisamos adivinhar se o número que o computador irá gerar é maior ou menor que cinco. Vamos criar uma página web simples com um par de botões em que é maior ou menor e, em seguida, precisamos criar um display que mostra se o palpite está correto ou não. A maioria das coisas que você precisa para este desafio já foi abordada nesta seção. A única coisa que ainda não olhamos é eventos onclick e isso é basicamente quando um usuário clica no botão na página web e isso aciona uma função ou um evento. Esta função conterá o código que compara nosso palpite com o número gerado pelo computador. Então, se você quiser dar a chance você mesmo, fique à vontade para fazer isso. Ou eu vou começar e começar com o HTML e mostrar-lhe os eventos onclick. Então, se você preferir, você pode acompanhar comigo, abrir SoloLearn, e então dar o JavaScript para ir no final ou seguir junto comigo até o fim, se você preferir. Então vamos começar com sua própria pasta. Na seção de fluxo de controle e loop, podemos duplicar o último vídeo e é o número 6. Jogo mais alto, mais baixo. Em seguida, abra o editor de texto e, em seguida, altere seu título, jogo superior ou inferior. Não precisamos da declaração do último vídeo. Então, basta excluir isso e voltar para uma página básica de índice HTML. Vou começar criando a página da web da interface do usuário. Vou começar com um div. Eu vou ter essa aula, bem, esta é uma classe Bootstrap que vai segurar todas as divs que estamos trabalhando. Isso fará com que se destaque com uma cor de fundo. Além disso, eu quero usar a classe de centro de texto, e isso vai puxar todo o texto para o meio da página. Vou colocar algumas instruções na página que você começa. Então é o título primeiro, mais alto ou mais baixo e, em seguida, um título de nível 2, que são as instruções sobre como jogar. Assim como o meu número 5 ou menos ou superior a cinco. Em seguida, algumas tags p abaixo. Isso só vai mostrar o alcance. O intervalo para o número aleatório é 1-10. Então, abaixo disso, precisamos de uma div vazia. Então eu só vou colocar um nível 3 indo lá. Inicialmente não haverá conteúdo entre essas tags porque vamos colocar isso no uso do JavaScript. Este seria o lugar onde o texto é exibido para dizer se você ganhou ou perdeu. Vamos dar-lhe um ID para que possamos marcar isso com o JavaScript mais tarde. Então eu vou chamar o meu TextField. Vamos dar uma olhada nisso e ver como está. Temos o nome nas instruções. Agora precisamos criar alguns botões abaixo. Um com mais alto, e outro com mais baixo. Vamos colocar isso em uma entrada. Então o tipo de entrada é botão. Vamos adicionar algumas aulas Bootstrap para isso apenas para torná-lo um pouco mais agradável. Então btn e btn-info, e isso vai criar um bom botão azul para nós. O valor que precisamos, este será o texto que aparece dentro de um. Vamos colocar este como mais alto. Então mencionamos no início deste vídeo que vamos dar uma olhada nos eventos onclick. Vamos olhar para eles com um pouco mais de detalhes mais tarde neste curso. Mas por enquanto só precisamos saber se adicionamos os atributos ou onclick. Então podemos passar em nome de uma função. Quando este botão é pressionado, ele então aciona a função. Vamos colocar o nome da função. Embora ainda não tenhamos criado a função, ainda podemos colocá-la. Então, porque é uma função, coloque os colchetes depois, da mesma forma que normalmente chamaríamos ou invocamos uma função. Criaremos nossa função em breve. Esse é o botão mais alto. Copie e cole ou duplique nossas entradas e que fará com o botão inferior e altere a função desta vez para diminuir. Então vamos dar uma olhada. Ótima. Aí estão os nossos botões mais altos e inferiores. Apenas a última coisa que eu quero colocar na interface do usuário é um terceiro botão, que é apenas um botão Play Again. Depois de cada caso, podemos pressionar “Play Again” e a página será recarregada. Vou colocar isso em sua própria div, então aparece abaixo. O div, nós também vamos dar a este a classe de bem text-center, assim como este div acima e, em seguida, uma entrada com um tipo de botão e, em seguida, algumas classes Bootstrap de btn btn-info. O valor é Reproduzir Again. Em seguida, os eventos onclick e, em seguida, vamos chamar este um reset com os colchetes depois. Vamos atualizar o navegador e dar uma olhada. Isso parece melhor agora. Agora chegamos ao estágio em que o HTML ou a interface do usuário está completa. Se você gosta de dar uma chance e terminar sozinho, sinta-se livre para fazer isso. Tudo o que você precisa fazer é criar um número aleatório e, em seguida, criar algumas funções que são acionadas cada vez que esses botões são pressionados e, em seguida, verificar contra o número gerado aleatoriamente. Então dê uma chance, se não, apenas me acompanhe. Vamos voltar para o editor de texto. Vou começar a trabalhar entre as tags de script porque só precisamos fazer o JavaScript agora. Para começar, vamos obter o número gerado aleatoriamente. Então vamos colocar isso dentro de uma variável chamada ComputerGuess e isso vai ser um math.random. Se você se lembra de alguns vídeos atrás, math.random gera um número aleatório entre zero e um. Porque queremos 10, vamos multiplicar esse valor por 10. Então precisamos arredondar esse número. Então vamos mudar o ComputerGuess agora para ser igual a math.ceil. Isto irá arredondar para cima e, em seguida, passar dentro dos colchetes, a variável que queremos arredondar para cima, que é ComputerGuess. Agora vamos apenas imprimir isso para o console e verificar se tudo está funcionando corretamente com um log de console, e eu vou colocar dentro do ComputerGuess, e espero que devemos obter um número aleatório entre um e 10. Então vá para as Ferramentas do Desenvolvedor e lá vamos nós. Temos o valor de sete dentro do console e, em seguida, atualizar e como um 4, 9, 9, 9 novamente e um 1, um 2. Isso parece estar funcionando bem. Vamos nos livrar das Ferramentas do Desenvolvedor e podemos seguir em frente. Podemos remover o log do console agora não precisamos disso. Dentro do HTML, criamos os eventos onclick. Vou começar com a função superior porque chamamos a função, mas ainda não a declaramos. Voltar entre as tags de script. Espero que você possa se lembrar como criar uma função usando a palavra-chave function, em seguida, o nome da função com os colchetes. O que queremos que esta função faça? Bem, nós queremos que ele verifique se o palpite do computador é maior que cinco. Vamos criar uma instrução if lá, se o palpite do computador for maior que cinco. Agora queremos exibir uma mensagem. Se você se lembrar, criamos uma tag h3 vazia com um ID de TextField. Então, podemos usar JavaScript para pegar este div vazio ou cabeçalho vazio e, em seguida, inserir algum texto lá. Então document.getElementById, e o ID que queremos é TextField e, em seguida, queremos usar o InnerHTML. Então selecione InnerHTML, vou definir que seja igual a You Win. Se o usuário clicar mais alto e o palpite for maior do que cinco, o usuário ganha. Então senão, vamos copiar este document.getElementById, else e, em seguida, as chaves. Então, se o palpite for inferior a cinco ou cinco em si, podemos então pegar o cabeçalho TextField e desta vez imprimir um texto, Você Perde. Isso também criará a função mais alta e agora precisamos criar a função se o botão inferior for pressionado. Como isso vai ser bastante semelhante, podemos copiar a função que acabamos de criar e, em seguida, vamos mudar isso para menor. Desta vez, se o palpite do computador for menor ou igual a cinco , o usuário ganha. Caso contrário, o usuário perde e a mensagem será exibida. Agora temos a funcionalidade se o palpite for maior ou menor. Agora só precisamos trabalhar com o botão de reset apenas para limpar a tela ou atualizar a tela toda vez que o usuário quiser jogar novamente. Esta vai ser uma função simples, mas é algo que ainda não analisamos neste curso. Então função redefinir e, em seguida, para recarregar a página da Web, recortamos a window.location.reload e, em seguida, os colchetes depois. Toda vez que este botão de reinicialização é pressionado, a página da Web será atualizada com esta linha de código. Vamos salvar isso e dar uma olhada e atualizar o navegador. Vamos começar com mais alto, então você ganha, joga de novo, mais baixo, você perde. Vamos tentar mais algumas vezes para você perder. Você ganha, você ganha, você perde. Isso parece estar funcionando bem. Essa é a funcionalidade básica ou trabalhar para o jogo. Se você gostaria de levar um pouco mais longe, quando o palpite do usuário estiver incorreto e você perder, você pode então colocar algum texto lá, que exibe o número aleatório gerado pelo computador, apenas para que você possa Verifique o que era isso. Mas, por enquanto, estou tentando deixar esse jogo lá, e obrigado. Espero que você tenha conseguido fazer pelo menos um pouco mais você mesmo e se juntar a mim no próximo vídeo onde vamos dar uma olhada em loops e como eles são usados em JavaScript. 26. Loop “while”: Loops são realmente populares em muitas linguagens de programadores, e JavaScript não é exceção. Nesses próximos vídeos, vamos ver loops For, While loops e Do While loops. Não se preocupe se isso não é familiar. Vamos dar uma olhada exatamente como cada um funciona, começando com o loop While neste vídeo. Loops pode ser realmente útil e pode nos poupar um monte de digitação repetitiva. Vamos começar com sua própria pasta, e este é o número 7. Vou chamar este, enquanto loops. Vamos abri-lo entre colchetes e arrastá-lo e renomear esses loops While. Deixe-me me livrar de todos esses do último vídeo, e também todo o HTML abaixo. Vamos começar com um loop While básico. Usamos a palavra-chave while e, em seguida, os colchetes e, em seguida, as chaves. Isso pode começar a parecer um pouco familiar para você. Este é basicamente o mesmo layout que as instruções switch e as instruções if/else que olhamos anteriormente. Espero que não seja muito estranho. Os colchetes depois também funcionam da mesma maneira if-declarações como em nós passamos uma condição para os colchetes, e enquanto esta condição é verdadeira, e então nós executar algum código no meio, e este código continua em loop ou repetindo até que esta condição não seja mais atendida. Enquanto isso é verdade, precisamos fazer isso ou o que quer que esteja entre as chaves. Vamos colocar um exemplo básico dentro deste loop While e começar. Vamos precisar criar uma variável. Esta variável, eu vou chamar i, que é um nome de variável bastante comum para usar com o loop. Mas pode chamá-lo do que quiser. Vou definir o valor inicial de i para ser igual a um. Enquanto eu tiver menos de 10 anos, queremos fazer algo dentro do aparelho. Vamos apenas manter isso simples com uma gravação de documento. Nós queremos escrever para o navegador o valor de i toda vez que nós loop, e então apenas para que o valor de i apareça em sua própria linha, eu vou colocar uma tag break lá dentro, e então i++. Isso pode parecer um pouco estranho, mas o que você estava fazendo? É que estamos definindo o valor de i para ser um, e então enquanto i é menor que o valor de 10, que é atualmente, nós vamos então imprimir para a tela o valor de i. para começar, o número 1 será impresso e, em seguida, vez que percorremos este código, será i++. Da próxima vez que o loop for girar, porque estamos fazendo um i++, eu vou ser então definido como dois e então nós vamos loop round novamente e imprimir dois. Então isso será incrementado novamente para três e isso vai continuar acontecendo até que eu seja menor que 10, ou no nosso caso vamos conseguir o número 9. Então devemos ver na tela impressa o número 1 até o número 9. Vamos dar uma olhada no navegador. Ok, lá vamos nós. Nós temos o valor de 1-9, e porque ele vai quebrar a linha alvo bem, cada um desses valores está em sua própria linha. Mas apenas uma pequena palavra de aviso ao usar While loops, é que pode ser muito fácil travar o navegador se não os fizermos corretamente. Se tirarmos o i++ de lá, então toda vez que esse loop While é executado, o valor de i será sempre um. Então vamos criar um loop infinito que nunca terminará porque eu sempre serei menor que 10 e isso fará com que o navegador ou seu programa falhe. Tenha muito cuidado que incrementamos em cada loop. Outra maneira popular de usar loops é fazer loop através de uma matriz e, em seguida, imprimir todos os valores da matriz. Vamos mostrar um exemplo disso agora. Crie uma matriz chamada alimentos e vamos definir isso da maneira literal. Basta adicionar alguns alimentos dentro da matriz, separados por vírgulas, então macarrão, pizza e peixe. Porque o índice de matrizes começa na posição zero, eu só vou mudar a variável de i para ser zero. Se você se lembrar da seção de matriz, podemos imprimir o valor da matriz. Vamos fazer uma gravação rápida do documento e, em seguida, passamos o nome da matriz. Se quiséssemos imprimir um item individual dentro da matriz, poderíamos selecionar o índice de bytes numéricos. Se quiséssemos imprimir macarrão, isso é índice zero. Vou apenas comentar isso e depois imprimir. É assim que obtemos o valor de uma matriz. Mas se quiséssemos imprimir todos os valores da matriz na tela, vamos apenas descomentar isso por enquanto. Porque estamos usando um loop, queremos passar para o loop o número do índice, então vamos tirar isso de lá. Cole isso nos colchetes. Nós não queremos apenas selecionar a posição zero, queremos definir que seja i, porque queremos fazer loop through e aumentar isso em um a cada passo do loop. Em vez de imprimir o valor de i, queremos imprimir o conteúdo da matriz. Queremos imprimir os alimentos e o número de alimentos é o valor de i. O que acontecerá lá é que o loop será executado e o loop começará com o valor de zero, que é macarrão. Então vamos imprimir para a tela o valor da massa e então eu vou ser incrementado para um, modo que muda para um, que é o segundo índice, então esse é o valor da pizza. Em seguida, pizza será impresso para a tela e que irá loop em torno de novo, e eu será incrementado para o número 2 que é peixe, então 0, 1, 2 e, em seguida, peixe será impresso para a tela. Em seguida, o loop terminará porque esses são todos os valores da matriz. Vamos começar de novo com zero, salve isso e atualize o navegador. Lá vamos nós, então há nossos valores livres da matriz, e é assim que um loop While funciona. Obrigado por assistir, e vamos passar agora para o próximo vídeo. Vamos dar uma olhada em uma pequena variante do loop While, e isso é chamado de loop Do While. 27. Loop “do while”: No último vídeo, demos uma olhada em loops while. Este vídeo é tudo sobre uma ligeira variante do loop while, e isso é chamado de fazer while loop. Funciona de forma semelhante, mas com apenas algumas diferenças sutis. Vamos criar uma nova pasta. Nós duplicamos enquanto loops. Este é o número oito e é chamado de fazer while loops. Em seguida, abra qualquer editor de texto e crie um novo título. Então faça enquanto loops. Deixe esse código por enquanto, podemos reutilizar algumas dessas partes. Considerando que o loop while do último vídeo sempre será executado enquanto essa condição for verdadeira, um loop do-while sempre será executado pelo menos uma vez primeiro e, em seguida, verificar se a condição é verdadeira antes de continuar. Temos a palavra-chave do e, em seguida, dentro das chaves. O código aqui dentro é sempre, executado uma vez no início, antes de verificar se alguma condição é verdadeira. Faça com este código e, em seguida, verificamos a condição usando o loop while. Então, se esta condição for verdadeira, o código continuará a ser executado e se for falso este código só será executado uma vez e ele irá parar depois disso. Vamos apagar o código do último vídeo. Vamos criar um exemplo. Vamos começar com uma variável, então vamos usar o nome da variável de i novamente. Variável i é igual a um. Então vamos fazer um documento. Não escreva lá dentro, vamos apenas imprimir o valor de i. Novamente as etiquetas de quebra. Então, assim como o loop while, vamos incrementar em um. Então, dentro da seção de tempo, dentro dos suportes, vamos colocar a condição. Enquanto i é menor que 10, vamos continuar a fazer loop through e imprimir o valor de i. Vamos salvar isso. Essa condição é verdadeira, então isso continuará imprimindo os valores até nove, que você obtém no lado esquerdo lá. Vamos voltar, se a condição for realmente maior que 10, devemos obter o valor de i impresso, que é um, mas não retornará um segundo valor porque a condição é falsa. Agora vamos apenas obter um impresso para o navegador, porque um loop do fazer while sempre é executado uma vez. Isso é tudo o que há para ele. Um loop do-while é bastante simples de entender se você já tem o conceito de loops while. Obrigado. No próximo vídeo vamos passar para outro tipo de loops, que é o loop for. Obrigado e te vejo lá. 28. Loop “for”: Bem-vindos de volta, rapazes. Este vídeo é tudo sobre o JavaScript para loop, e este é o terceiro e último tipo de loop que estaremos olhando nesta seção. Se você entendeu como o loop while funciona e o loop do fazer while funciona a partir de vídeos anteriores, você não deve ter problemas para entender como funciona um loop for. Vamos começar com sua própria pasta na seção Fluxo de Controle, e este é o vídeo número 9: para loops, e então vamos abri-lo em Brackets e, em seguida, mudar o título para For loops e podemos deixar esse loop para uma referência. Para loops são úteis quando sabemos quantas vezes queremos repetir esse loop. Considerando que um loop while, será executado até que uma condição não seja mais verdadeira. Em um loop for, precisamos dizer quantas vezes ele será executado. Vamos começar um loop for com a palavra-chave for e, em seguida, parecer inicial bastante familiar do resto dos vídeos. Usamos os colchetes e, em seguida, um conjunto de chaves. Em um loop while ou um loop do while, definimos a variável e isso é definido fora do loop. Ao usar um loop for, precisamos colocar três valores diferentes entre os colchetes. O primeiro é o valor inicial da variável. Eu quero usar, i mais uma vez e os três valores precisam ser separados com um ponto-e-vírgula. O segundo valor é uma condição contra a qual queremos testar. Como exemplo, queremos executar o loop enquanto i é menor que 10, e então um ponto e vírgula, e assim como loops anteriores, podemos usar praticamente o que está aqui, podemos usar iguais ou qualquer um dos operadores. O terceiro valor será o nosso incrementer. Novamente, eu vou usar i plus para incrementar o valor em um em cada loop. Também podemos usar o mesmo documento escrever a partir do último vídeo. Então coloque isso dentro das chaves, podemos apagar isso por enquanto. É assim que um loop for parece. Inicialmente definimos o valor para ser um e o loop continuará em execução enquanto o valor de i é menor que 10 e com cada loop possível, i é incrementado por um. Então devemos obter os valores de um direto até nove impressos quando abrirmos isso no navegador. Lá vamos nós. Temos um até nove, estão funcionando corretamente. Assim, assim como os loops while, nós também podemos usar um loop for para percorrer os valores de uma matriz. Vamos dar uma olhada em como podemos fazer isso em um loop for. Vamos usar nosso exemplo de alimentos que nós olhamos que no loop while. Novamente, eu vou colocar em massa, pizza e, em seguida, peixe, e, em seguida, criar o loop for exatamente como nós usamos acima. Vamos declarar o valor de i inicialmente, então i é definido como zero porque o índice de zero é o primeiro valor de uma matriz. Então, uma vez que começa em zero, e, em seguida, o número de vezes que queremos loop através é igual ao número de valores dentro da matriz. Então, enquanto i é menor que foods.length, e você pode estar se perguntando por que estamos usando menos do que igual ao comprimento da matriz, bem que simplesmente porque a propriedade length começa em um em vez de zero, então é por isso que precisamos fazer isso, e, em seguida, um ponto e vírgula e o terceiro valor é o nosso incrementer, então i plus e, em seguida, vamos definir documento escrever e, em seguida, queremos imprimir o valor da matriz de alimentos, e, em seguida, dentro dos colchetes Uma passagem em i. Inicialmente i é definido como zero, que é o valor da massa, e então nós vamos loop através e eu será incrementado e então será o valor de um, que é pizza, e então o terceiro e último loop, eu serei definido como dois, que é o terceiro valor do peixe. Vamos apenas executar isso agora com a tag break, então eles estão todos em linhas separadas. Quebre a etiqueta lá e depois vamos atualizar isso no navegador, e há nossos três valores de macarrão, pizza e peixe. Lá vai você. É assim que um loop for funciona em JavaScript. No próximo vídeo, vamos dar uma olhada em usá-los em um mini desafio. 29. Minidesafio: lista telefônica: Bem-vinda de volta. Neste vídeo, vamos dar uma olhada em um mini desafio, que vai colocar em prática os loops for que usamos no vídeo anterior. Neste mini desafio vai ser sobre a criação de uma lista telefônica simples. A lista telefônica vai imprimir os valores de todos os nomes de seus amigos em uma matriz. Vai classificá-los em ordem alfabética. Mais uma vez, eu gostaria que você pudesse experimentar você mesmo e ver até onde você vai antes de seguir junto comigo. Tente fazer isso funcionar, se possível, sem a minha ajuda. Mas não se preocupe se é algo com que você luta. Você pode me acompanhar no final, e eu vou te mostrar uma maneira de fazer isso. Vamos criar a pasta para este projeto. Este é o número 10. Quero chamar-lhe o desafio da lista telefónica. Em seguida, abra isto entre parênteses. Em seguida, defina o título, desafio da lista telefônica e comece com uma tag de script em branco. Neste desafio, vou começar com a criação de um array. O array vai manter os valores de seus amigos. Porque queremos usar JavaScript para classificar estes em ordem alfabética. Quando você coloca os valores dentro da matriz, tente não colocá-los em ordem alfabética. Porque queremos JavaScript para fazer isso segue. Comece com uma matriz. Vou começar com Chris, vou colocar valores de quantas pessoas quiser. Vou começar com cinco valores. Só para começarmos. Simplesmente assim. Então eu vou usar um loop for, que nós olhamos no último vídeo para percorrer todos os valores e, em seguida, imprimi-los para a tela. Vamos começar com o loop for e, em seguida, simplesmente imprimir os valores da matriz para o navegador. I vai ser inicialmente definido como zero, que é o primeiro valor da matriz. Então queremos que o loop continue. Enquanto eu é menor do que os nomes array.length. Então, em cada passagem do loop, queremos incrementar I por um. Vamos tentar e ver se funciona. Vamos fazer uma gravação de documento para o navegador. Então vamos dar uma olhada nos nomes, e depois eu. Vamos ver o que temos agora. Aí temos, Chris, Paul, Mike, Andrew e Dave. Há todos os cinco valores da nossa matriz, o que é bom, mas não parece muito bom e nós também queremos classificar estes para ser em ordem alfabética. Vamos começar por classificá-los em ordem alfabética. Atualmente temos todos os nossos nomes armazenados na variável de nomes. Precisamos definir isto para ser alfabético. Fazemos isso com nomes. Em seguida, usamos o método de classificação. Agora vai estar usando uma ordem alfabética quando atualizarmos, lá vamos nós. Isso funciona bem. Temos Andrew, Chris, Dave, Mike e Paul. Está tudo em ordem alfabética. Só para dar um pouco de estilo a este projeto, vou adicionar algumas tags pré. Eu vou adicionar estes pouco antes e, em seguida, também eu quero adicionar um pouco depois. Não se esqueça dos símbolos mais entre nós vamos definir a barra para a frente. Vamos ver como isso parece agora. Isso agora é um pouco mais legível. Temos todos os nossos nomes impressos em ordem alfabética e com um pouco de fundo para cada valor. Se você chegou até aqui, muito bem. Só quero acrescentar mais uma coisa para acabar com isto. Só quero adicionar um número ao lado do nome de cada pessoa. 1, 2, 3, 4, 5, então sabemos quantos nomes temos dentro da lista telefônica. Logo após o pré tag, podemos obter esse número com o valor de i, porque vai ser incrementado com cada loop. Em seguida, também dois pontos apenas para separar o nome com o número. Refresque. Agora temos 0, 1, 2, 3, 4. Só porque o primeiro valor é zero, eu vou adicionar i mais 1, então ele começa em um em vez de zero e atualizar. Isso é melhor agora. Começamos com o valor de um e, em seguida, podemos ver quantos nomes diferentes temos em nossa matriz, ou nossa lista telefônica. Espero que você conseguiu fazer isso, ou pelo menos dar uma chance e ver o quão longe você chegou e que é o fim do mini desafio e o final da seção. Vejo vocês na próxima seção, que se chama JavaScript e DOM. 30. O que é o DOM: Bem-vindo de volta e bem-vindo a esta nova seção chamada JavaScript e o DOM. Neste vídeo, vamos fazer uma breve visão geral do que é exatamente o DOM. O DOM é abreviação para o Modelo de Objeto Documento e eu estou apenas na página Wikipédia para o Modelo de Objeto Documento, e você pode descobrir pequenas informações apenas lá. Começa dizendo que o DOM é uma convenção independente de várias plataformas e linguagem para representar e interagir com objetos em documentos HTML, XHTML e XML. Você pode estar se perguntando exatamente o que isso significa. Para mantê-lo simples, todas as seções ou elementos, ou todos os nós em cada documento ou página da web é organizado em uma estrutura semelhante a árvore. Se formos para a seção W3Schools no DOM, você provavelmente pode ter uma idéia melhor do que está acontecendo. Podemos ver um diagrama visual de toda a árvore HTML DOM de objetos. Esta é a nossa página web básica, que começa com os documentos no topo. Já usamos antes neste curso quando selecionamos elementos por ID. Começamos com documento e, em seguida, obter elemento por ID. Temos o documento no topo da árvore e, em seguida, todos os elementos diferentes na página web, uma ramificação abaixo do documento. Nós temos a seção principal e, em seguida, temos a seção corpo, que são os dois principais elementos dentro do elemento raiz HTML, e isso tudo deve parecer bastante familiar a partir da página HTML. Dentro da seção principal, temos um título. Dentro da seção do corpo, temos os atributos, os elementos, como os títulos as âncoras e, em seguida, todo o texto contido dentro deles. Você pode estar se perguntando o que isso tem para lidar com JavaScript. Bem, basicamente, JavaScript pode tornar páginas web dinâmicas porque JavaScript pode controlar ou manipular todos os elementos na árvore DOM. Podemos pegar qualquer um desses elementos e podemos substituí-lo, podemos manipulá-lo, podemos adicionar, podemos adicionar certos atributos ou elementos, podemos alterar estilos CSS ou até mesmo remover qualquer um desses elementos. Nos próximos vídeos, vamos dar uma olhada mais profunda em como podemos acessar esses elementos e como podemos manipular esses elementos. Mas antes de fazermos isso, eu só queria dar-lhe uma breve visão geral de exatamente como podemos fazer isso e por que o DOM é importante para JavaScript. Mas, por enquanto, a principal coisa a entender é como um documento HTML é definido e também entender que JavaScript pode acessar ou manipular todos os elementos na árvore DOM. Vamos agora passar para o próximo vídeo e vamos dar uma olhada em como podemos acessar todos os elementos dentro desta árvore DOM. 31. Acessando elementos: Agora sabemos que o JavaScript pode interagir com DOM. Neste vídeo, vou mostrar alguns métodos de seleção de elementos em uma página web. Vamos começar com uma nova pasta para a nova seção e, em seguida, chamar esta seção de DOM. Precisamos de uma pasta de qualquer um dos vídeos anteriores. Apenas o modelo inicial. Copie qualquer um desses e cole-os. Este é o número 1, e isso é chamado de acessar elementos. Em seguida, abra no seu editor de texto. Arrastá-lo assim. Precisamos começar com um novo título, acessando elementos. Em seguida, podemos excluir todo o código de baixo entre as tags de script. Em vídeos anteriores, olhamos para document.getElementByID e, em seguida, podemos selecionar um elemento da página da Web. Se adicionarmos um título de nível 1 e inserir um ID, por exemplo, de título. Podemos então pegar este título de nível 1 por seu ID de título, e então podemos fazer várias coisas, como definir o HTML interno para ser igual a qualquer coisa que você quiser. Então vamos definir isso para exibir Javascript em páginas da web. Quando isso é aberto no navegador, o cabeçalho vazio do nível 1 deve ter o texto que você colocou na parte inferior. Então vamos abrir. Lá vamos nós, lá está o nosso nível 1. Há também outros métodos que podemos usar para selecionar elementos em uma página web. O próximo método que eu quero mostrar-lhe de agarrar elementos em páginas da web usando o QuerySelector. de selecionar elementos por seu ID, também podemos selecionar elementos da mesma maneira que seria no CSS usando o seletor CSS. Vamos criar um exemplo com algum texto. Então vamos criar três tags P com alguns nomes de classe. Este pode ser o primeiro e, em seguida, o conteúdo pode ser a primeira linha, e você tem que copiar isso duas vezes. Com a segunda e a classe da terceira. Deixe este terceiro em branco por enquanto. Agora sabemos como acessar um elemento por seu ID. Em seguida, eu quero passar para acessar um elemento por seu seletor CSS. Podemos fazer isso com Document.QuerySelector. Vamos dar uma olhada nisso. Document.QuerySelector. Dentro dos colchetes, queremos passar no seletor CSS. No nosso caso, vamos colocar na aula. Então vamos colocar a classe de segundo lá dentro. Então podemos fazer algumas mudanças. Vamos adicionar style.BackgroundColor e, em seguida, definimos que seja igual a qualquer valor que queremos. Vamos definir isso para ser vermelho. Agora, a segunda linha deve ter uma cor de fundo de vermelho. Vamos guardar isso. Na verdade, podemos apenas comentar esta seção e, em seguida, atualizar dentro do navegador. Agora selecionamos a segunda linha por seu ID e substituímos a cor de fundo. Se fôssemos mudar isso para ser o primeiro, poderíamos apenas mudá-lo pelo seu nome de classe e que iria selecionar a primeira linha. Isso pode ser muito útil para selecionar elementos em uma página web. Assim, além de selecionar elementos pelo seu nome CSS, também podemos selecionar elementos pelo seu nome de classe. Vamos apenas excluir este exemplo. Podemos usar o texto do parágrafo de antes. Vamos criar uma variável chamada seletor. Isso será definido como documents.getElementsByClassName. Apenas tenha cuidado que, isso tem um S no final dos elementos onde getElementByID não tem o S no final porque estamos selecionando apenas um ID específico. Considerando getElementsByClassName retornará todos os elementos nessa página com um nome de classe particular. Em seguida, queremos selecionar o nome da classe para destino. Então, vamos adicionar uma classe ao cabeçalho de nível 1 do título e, em seguida, colocamos isso dentro dos colchetes, e, em seguida, um ponto e vírgula no final. Isso selecionaria todos os elementos com um nome de classe de cabeçalho. Se houvesse mais de um, precisaríamos então declarar qual elemento queremos atingir pelo seu número de índice. No nosso caso, queremos ir um na classe de direção. Então esse será o número de índice 0. Se tivéssemos uma segunda linha com a mesma classe, este seria o índice número 1. Vamos mudar o HTML interno e definir isso para algum texto. Nome da classe selecionado. Vamos rodar isso dentro do navegador. Lá vamos nós. Esse é o nosso título de nível 1 com o nome da classe selecionado. Outro que você pode achar realmente útil é document.getElementsByTagName. Funciona de forma bastante semelhante ao último exemplo. O nome da tag é o H1 ou o P, ou pode ser qualquer um dos elementos na página da web. Pode até ser um GIF ou uma imagem. Desta vez, o seletor será igual a document.getElementsByTagName. Vamos selecionar as tags P. Então, exatamente o mesmo que antes, podemos então colocar um número de índice. Então 0, 1 e 2. Número 1 é a segunda linha de texto lá. Desta vez, para que saibamos que está funcionando, vamos simplesmente imprimir o nome da etiqueta selecionada. Salvar. Lá vai você. Agora, a linha 2 foi alterada para o nome da marca selecionada. Se ele mudar para zero, o nome da tag selecionado agora deve ser a primeira linha. Lá vai você. O último exemplo que vou mostrar neste vídeo é selecionar o número de imagens dentro dos documentos com document.images. Para fazer isso, precisamos criar algumas imagens dentro da página web. Você realmente não precisa ter nenhuma imagem fisicamente lá, nós podemos apenas inventar alguns nomes de imagem. Então imagem 1, imagem 2, imagem 3 e, em seguida, imagem 4. Então, se quisermos saber quantas imagens estão nessa página da web, poderíamos criar uma variável chamada número de imagens. O número de imagens vai ser igual a document.images.length, e então podemos imprimir para a tela o número de imagens em uma string. Então vamos criar um elemento vazio para exibir estes em. Uma tag H1 com ID de exemplo. Em seguida, vamos fazer um document.getElementById e, em seguida, selecione o exemplo. Então cole isso. Podemos definir o texto com o HTML interno. Vamos definir isso para esta página tem e, em seguida, um espaço, mais a variável, que vai conter o número de imagens na página, em seguida, mais, e, em seguida, queremos as imagens da palavra dentro de uma string. Ok, se isso funcionar bem, devemos obter o texto exibido desta página tem, e então quatro imagens. Vamos guardar isso e dar uma olhada. Ótima. Isso está funcionando bem. Se apagássemos uma dessas imagens, isso deveria ser mudado para vocês três. Lá vamos nós. Há muitos métodos diferentes que você pode usar para acessar elementos em uma página da Web. Eu recomendo que você dê uma olhada no site da Mozilla, para o qual eu fornecerei um link. Há muitos outros exemplos lá. Felizmente, agora entendemos que podemos acessar praticamente qualquer parte de um documento ou de uma página web que queremos. No próximo vídeo, vamos passar para como podemos manipular ou alterar esses elementos. Obrigado por assistir, e te vejo no próximo vídeo. Obrigado por assistir e te vejo lá. 32. Como manipular elementos: Bem-vinda de volta. Este vídeo é chamado de Elementos Manipuladores. Como de costume, vamos começar com nossa própria pasta, então este é o número dois, Manipulando Elementos. Então vamos abrir isto. Em seguida, deixe-o começar com seu próprio título e uma tag de script vazia, então desta vez manipulando elementos, em seguida, basta limpar tudo isso. Começamos com a nossa página de índice em branco. Sabemos desde o último vídeo como acessar elementos, então agora vamos dar uma olhada em como podemos alterar esses elementos usando JavaScript. Então vamos criar um título de nível um como um exemplo, e vamos dar-lhe um ID de título e, em seguida, algum texto entre o cabeçalho de nível um de alteração de elementos HTML. Analisamos a manipulação de um valor usando o em HTML. Isso foi document.getElementById. Então sabemos que precisamos pegar o ID do elemento que você deseja alterar, que é o título. Em seguida, usamos HTML interno para alterar o conteúdo dos elementos para qualquer coisa que queremos. Vamos colocar qualquer mensagem aí que quisermos. Assim como o HTML interno, também podemos alterar o CSS ou os estilos de um determinado elemento, e vamos fazer isso com.style. Então, uma vez que selecionamos o estilo, podemos ir mais longe para o CSS usando o ponto. Você pode ver usando colchetes que assim que usamos um ponto, obtemos uma lista de todas as propriedades CSS disponíveis que podemos selecionar. Então eu vou começar selecionando a cor. Então vamos definir isso igual a, eu vou começar com vermelho. Vamos agora abrir isso no navegador e dar uma olhada. Nós temos o título de nível um de alteração de elementos HTML. Então, bem adicionar em um estilo CSS, e então vamos definir na cor do texto para ser vermelho. Então vamos lá para cima. Agora é sobre o texto todo vermelho na página. Podemos adicionar muitas propriedades CSS diferentes lá, podemos alterar o tamanho da fonte, e vamos fazer este texto realmente grande para que possamos verificar o seu funcionamento. Para 100 pixels, então tenha um pouco de brincar com isso e tente selecionar alguns dos diferentes valores CSS e veja o que você pode conseguir com eles. Mas eu não vou passar para obter e definir os nomes de classe ou os IDs de elementos HTML. Vamos começar com o nome da classe ou a identificação. Então, para fazer isso, precisamos adicionar uma classe ao nosso título de nível um. Então vamos apenas adicionar uma classe de vermelho e, em seguida, podemos descobrir o que este nome de classe deste elemento em particular é. Vamos selecionar o document.getElementById, então vamos deixar o ID do título e o nome then.class, com o ponto-e-vírgula no final. Então, porque estamos pegando um ClassName. Eu quero armazenar isso dentro de uma variável para que possamos acessar facilmente. Então variável do nome da classe é igual a document.getElementById. Vamos pegar em um título, e então vamos selecionar no nome da classe, vamos agora fazer um documento direito e, em seguida, verificar. Temos o nome da classe corretamente armazenado dentro da variável. Vamos colocar isso dentro dos suportes e depois atualizar. Você pode apenas quase ver que nós temos o nome da classe vermelho aparecendo na parte inferior. Isso também funciona com ID. Você só precisa alterar className para.ID e, em seguida, apenas exibir os resultados mais uma vez dentro de uma variável, então ID nome, salve isso. Temos o ID definido como título neste caso. É assim que podemos agarrar ou como podemos obter o nome da classe ou o ID de um elemento. Às vezes você deseja adicionar um ID ou outra classe ou até mesmo uma classe adicional a um elemento. Vamos dar uma olhada em como podemos adicionar classes e elementos. Eu quero adicionar alguns estilos e criar algumas novas classes que podemos para este elemento. Vamos usar a nossa classe vermelha. Vamos definir a cor para ser vermelha e torná-la um pouco mais legível, vamos definir o tamanho da fonte para 2 ems. Então é também criar uma segunda classe de azul, e então podemos adicionar isso aos nossos elementos e mudar a cor para azul. Então vamos adicionar um ID adicional que podemos adicionar o elemento dois. Só vou definir a família das fontes para ser fantasia. Abaixo temos o ID e também a classe dos elementos particulares. Mas se quisermos definir o ID, simplesmente usamos o.ID e, em seguida, definimos que igual ao nome do ID que deseja adicionar, então, no nosso caso, é ID1. Se isso for adicionado corretamente, devemos agora obter a mudança font-family para fantasia. Então salve isso, e então vá para o navegador e atualize, lá vamos nós. Ótima. Temos a família de fontes diferente, então o ID está sendo adicionado ao elemento. Adicionar uma classe funciona exatamente da mesma maneira, então vamos apenas duplicar essa linha e, em seguida, vamos definir o ClassName. Pegue o elemento pelo ID do título e, em seguida, .className. Então, em vez da classe vermelha, vamos adicionar a classe de azul que criamos, e então salve isso, e vamos nos livrar do nome do ID, então salve isso e depois atualize, e agora vamos obter a cor azul, de modo que tudo está funcionando corretamente. Agora sabemos como adicionar IDs e classes a elementos, também sabemos como acessar a classe ou ID particular. Em seguida, vou mostrar-lhe como criar e adicionar novos elementos a uma página. Vamos começar com uma tag de script em branco, e eu vou armazenar essas em variáveis. Eu vou criar uma variável chamada um novo elemento. O novo elemento que queremos criar será igual a documents.createElement. Então, dentro dos colchetes, precisamos colocar o nome do elemento que queremos criar. Vou criar uma nova div. Isto irá criar uma nova div e armazená-la dentro da variável chamada Novos Elementos. Dentro desta div, eu quero criar algum texto para colocar lá dentro, então vamos criar uma nova variável chamada addText. A maneira como podemos adicionar texto a uma div ou a um documento é usando document.createTextNode. Em seguida, dentro do colchete eu vou colocar dentro da string que queremos criar , nova cadeia de texto. Temos as nossas mensagens, e também temos a nossa nova div. Então, para adicionar o texto à div, selecionamos a nova variável de elemento, que é a div, e então.appendChild. O filho que queremos acrescentar ou adicionar é a variável addText. Então coloque isso dentro dos suportes. Agora adicionamos o novo texto à nova div. Vamos agora adicionar isso aos documentos, então document.body.insert Antes. Aqui dizemos ao navegador exatamente onde gostaríamos que o conteúdo fosse adicionado. InsertBefore leva dois parâmetros. Então o primeiro é necessário, e este é o conteúdo ou o objeto que queremos adicionar. Queremos adicionar a nova variável de elemento que acabamos de criar, modo que entra em primeiro lugar. O segundo valor é opcional, e este é o marcador em HTML onde o novo elemento será adicionado pouco antes. Se quiséssemos adicionar novos elementos antes de nosso título de nível um, vamos criar uma nova variável chamada novo conteúdo e, em seguida, vamos definir o conteúdo para ser igual a este cabeçalho na parte superior. Então document.getElementByID. Nós queremos pegar o ID do título, então basta colocar isso entre os colchetes, apenas assim nós queremos ter certeza de que isso é uma variável. Então, há um pouco acontecendo lá, então vamos dar uma olhada nisso novamente. Estamos criando um novo elemento, ou uma nova div. Em seguida, adicionará uma nova string de texto a essa div usando AppendChild. Agora temos essa informação armazenada em uma variável chamada elemento novo. Em seguida, adicionaremos isso ao documento usando inserir antes. A seção de código que queremos adicionar é este novo elemento que contém a nova div e nova string de texto. Em seguida, o segundo valor do novo conteúdo é onde queremos adicionar este novo elemento dois, e queremos adicioná-lo pouco antes do nosso cabeçalho de nível um e, em seguida, ir para o navegador e atualizar. Lá vamos nós, lá está a nossa nova cadeia de texto. Se você quiser dar esse div e ID específicos, você pode fazer isso com novos elementos ou a variável Newelement. ID. Como usamos no último exemplo, vamos definir o ID para ser igual a qualquer coisa que você quiser. Eu quero definir o meu para o meu ID, e, em seguida, salvar isso, e agora, quando atualizar a página, se você entrar nas ferramentas de desenvolvedor, e, em seguida, se selecionar a nova texturização. Você pode ver o interior do corpo que temos uma nova div com um ID da minha div, e o conteúdo é uma nova cadeia de texto. É assim que você pode adicionar novos elementos ao HTML usando JavaScripts. Então, obrigado por assistir e no próximo vídeo vamos passar para um mini desafio, que é criar um conversor de temperatura e vai colocar em prática o que você aprendeu nos últimos vídeos. Obrigado e nos vemos no próximo vídeo. 33. Minidesafio: conversor de temperatura — parte 1: Bem-vinda de volta. Neste mini desafio, vamos criar um aplicativo de conversor de temperatura. Pode ser um simples ou tão criativo quanto você gostaria, mas isso é o que eu inventei, apenas como um exemplo. É forma HTML simples que leva as entradas do usuário, e então podemos convertê-lo para Celsius ou para Fahrenheit usando JavaScript, então tente e veja o que você pode vir acima com, caso contrário, siga comigo e eu vou mostrar-lhe como eu criei isto. Vamos começar criando uma pasta para o projeto na seção dom. Este é o número 3 e este é o conversor de temperatura. Agora vamos abrir entre parênteses e podemos começar. O título é conversor de temperatura, e vamos colocar todo o código de exemplo dos vídeos anteriores. Eu vou começar com a seção HTML 1 Então eu vou apenas criar um formulário HTML Bootstrap. Vamos começar fora das tags de script. Vamos criar um contêiner, que é o código Bootstrap, e então vamos criar uma linha Bootstrap, e então vamos usar a grade Bootstrap, então col-sm-6. Se você estiver usando o plugin Emmet como eu, você deve ser capaz de obter a esta grade muito rápido, se não, você vai precisar digitar isso com as classes e também para enviar esta div, vamos adicionar o col-sm-offset, que deslocar a grade por três e colocá-lo no centro. A classe Bootstrap de text-center que vai manter tudo bem alinhado no meio e, em seguida, por último, eu criei uma classe de conteúdo, e isso você vai ser usado para estilizá-lo no CSS. Vamos começar com um título de nível 2, que é apenas o título do nosso aplicativo que é Temperature Converter, e então vamos criar nosso formulário. Porque estamos usando Bootstrap, vamos criar uma div com uma classe de grupo de formulários e isso vai garantir que tudo está bem definido. Dentro do grupo de formulários, vamos criar uma entrada com o tipo de número e esta é uma seção onde o usuário pode inserir o número que deseja converter para Celsius ou Fahrenheit. Então o ID, eu vou definir como UserInput, e na verdade vamos dar a este um rótulo, então rótulo 4, para o ID UserInput, e vamos fechar a barra lateral. Vamos economizar e verificar se está funcionando bem. Lá vamos nós, lá está o nosso rumo na entrada. Vamos completar o rótulo agora. Vamos colocar em Digite seu número para converter. Assim mesmo, e depois refresque-se e lá vamos nós. Aí está o texto do rótulo. Agora vou colocar mais dois botões dentro do formulário, que é para o Celsius ou Fahrenheit. Vamos colocá-los lá dentro agora. Vou colocá-los dentro de um novo div ou grupo de formulário e, em seguida, a primeira entrada é o tipo de botão, e depois o texto dentro. Adicionamos isso com o valor de To Celsius, e então queremos que este botão realmente faça algo quando o usuário o pressiona. Queremos criar um evento onclick que irá acionar a função e vamos olhar para os eventos mais no próximo vídeo, mas por enquanto, basta criar um onclick eventos com a palavra-chave onclick e, em seguida, dentro das citações, adicionamos o nome do que queremos acionar uma vez que este botão é pressionado. Vou criar uma função chamada ToCelsius, e então precisamos dos colchetes depois disso. Então copie e cole ou duplique isso. Este é To Farhenheit, e então a função é tofarenheit, e vamos apenas dar uma olhada. Diz que havia dois botões lá. A última coisa que precisamos fazer é criar uma div vazia, que você deseja exibir o texto da conversão de temperatura. Assim como a versão final, vamos criar campo de texto na parte inferior onde a conversão aparece. Fora do formulário, eu só vou colocar isso em uma tag p vazia com o id de resultados. Vamos abrir se agora em HTML. Vamos agora passar para o topo e vamos adicionar um pouco de estilo ao nosso formulário. De volta, abra a seção da cabeça. Vamos criar nossas próprias tags de estilo. Se você se lembrar do para baixo na div que contém todo o conteúdo, nós adicioná-lo uma classe de conteúdo. Vamos adicionar isso agora dentro das tags de estilo e, em seguida, vamos adicionar alguns estilos simples. Vamos adicionar uma borda, 1px sólido. Vamos adicionar alguns cantos arredondados com um raio de borda. Vou ter menos 10px. Margem superior apenas para mantê-lo longe da parte superior da tela ou 30px e, em seguida, uma cor de fundo ou da cor cinza, que é eee e, em seguida, vamos dar uma olhada. Então eu só quero adicionar a cor de fundo, que você pode ver na versão final lá. Vamos voltar para o CSS e vamos estilizar a seção do corpo. Para obter o fundo, vou apenas adicionar um gradiente linear ao fundo. Então gradiente linear e, em seguida, dentro dos colchetes , podemos adicionar dois, e então vamos adicionar as duas cores, para misturar. Em primeiro lugar, é vermelho e, em seguida, a segunda cor é azul. Começará com vermelho e, em seguida, à medida que vai para a direita, mudará para azul. Vá para o navegador e lá está o nosso gradiente no fundo. Isso parece melhor. Não se esqueça se este é um local de produção ao vivo. Você pode querer adicionar alguns prefixos do navegador ao gradiente linear apenas para compatibilidade entre navegadores. Agora, isso é o CSS HTML tudo terminado para a interface do usuário. Eu só vou deixar este vídeo lá e vai terminar no próximo vídeo onde vamos adicionar o JavaScript e tornar o nosso conversor de temperatura totalmente funcional. 34. Minidesafio: conversor de temperatura — parte 2: Bem-vinda de volta. Então, agora temos a interface de usuário concluída para o nosso aplicativo conversor de temperatura. Então, neste vídeo, vamos terminar tudo adicionando as funções JavaScript para garantir que as entradas do usuário sejam convertidas para Celsius ou para Fahrenheit. Então vamos voltar para o seu editor de texto e então vamos trabalhar dentro das tags de script. Então criamos duas funções. O primeiro foi para Celsius e depois um para Fahrenheit, que vai pegar a entrada inserida no campo de entrada e depois convertê-lo para Celsius ou para Fahrenheit. Então vamos exibir os resultados dentro desta tag p lá. Então vamos criar a função para Celsius para começar. Então crie a função, para Celsius. Então, para criar isso, eu vou criar uma variável chamada Celsius e, em seguida, dentro desta variável, eu quero armazenar o valor da entrada do usuário. Então document.getElementById e o ID que queremos pegar é a entrada do usuário do formulário. Então coloque isso dentro dos colchetes e, em seguida, queremos pegar o valor desta entrada do usuário. Então agora temos o valor da entrada do usuário. Queremos criar um cálculo para converter isso em Celsius. Então começa com o valor menos 32 e, em seguida, porque vamos multiplicar esse valor, vamos colocar isso dentro dos colchetes e então vamos multiplicar esse valor por 5 e então precisamos dividi-lo por 9. Este é o cálculo que precisamos converter para Celsius. Então agora temos o valor do Celsius armazenado dentro desta variável. Vamos agora arredondar para o número inteiro mais próximo. Então Celsius agora será igual a Math.round. O número que queremos arredondar é a variável Celsius. Então coloque isso dentro dos suportes. Então agora vamos exibir o valor de Celsius dentro dos resultados. Então document.getElementByID. Então vamos pegar os results.innerHTML e, em seguida, queremos definir isso para a variável Celsius. Então vamos salvar isso e verificar isso no navegador. Então vamos colocar um número lá dentro. Então vamos colocar um valor de 40. Então 40 Fahrenheit, e então vamos convertê-lo para Celsius. Então a conversão é quatro. Então vamos tornar este rótulo um pouco melhor dizendo que 40 Fahrenheit é igual a quatro Celsius. Então, dentro do HTML interno. Então, primeiro de tudo, vamos pegar a input.value do usuário. Portanto, este é o valor que o usuário insere no campo. Então mais, então, vamos adicionar uma string, digamos em um Fahrenheit é, e então vamos adicionar no final a variável Celsius. Então, por exemplo, se o usuário colocar o valor de cinco, isso diria cinco Fahrenheit é, e então a conversão correta e, em seguida, vamos querer adicionar uma string no final para dizer Celsius. Então vamos guardar isso e dar uma olhada. Então cinco Fahrenheit e, em seguida, clique para Celsius. Então isso será igual a cinco Fahrenheit é menos 15 Celsius e vamos dar isso um ir com outro valor. Então oito é menos 13, 30. Agora que esse lado está funcionando, podemos criar a função Fahrenheit. Então vamos tornar a vida mais fácil. Vamos copiar esta função e, em seguida, podemos fazer algumas pequenas alterações. Então este quer ser dois Fahrenheit. Então, a variável de Fahrenheit. Então quero começar fazendo a mesma coisa. Então, queremos criar o document.getElementById. Então, ainda queremos pegar a entrada do usuário e o valor de entradas do usuário. Mas desta vez o cálculo é ligeiramente diferente, então vamos multiplicá-lo por 9 dividido por 5 mais 32. Então vamos apenas mudar a variável Celsius de volta para Fahrenheit e também no Math.round. Nós ainda queremos pegar o rótulo de resultado e alterar o HTML interno. Mas desta vez, isso precisa ser Celsius e então isso precisa ser a variável Fahrenheit e a string novamente precisa ser Fahrenheit. Ok, então vamos guardar isso e dar uma olhada. Então vamos colocar um valor lá dentro e ver se isso funciona. Então isso não está funcionando, então vamos voltar e verificar o porquê. Então temos a função Fahrenheit. Não, tudo parece bem então vamos verificar as entradas, temos um erro ortográfico. Tem de haver H dentro do, por isso guarde isso e vamos tentar de novo. Então 30 Celsius deve ser igual a 86 Fahrenheit e vamos tentar mais um. Então 10 Celsius é 50 Fahrenheit. Ok, ótimo, então tudo está funcionando agora e esse é o fim deste vídeo. Então, espero que tenha conseguido isso sozinho e que tudo funcione corretamente, e espero que tenha gostado deste desafio. Vejo você no próximo vídeo onde vamos dar uma olhada em eventos JavaScript. 35. Eventos no Javascript: Bem-vinda de volta. Neste vídeo, vamos dar uma olhada nos eventos JavaScript. Vamos começar com nossa própria pasta. Dentro da seção dom, vamos criar uma nova pasta, que é o número 4. Vou chamar isto de eventos, e depois vamos abrir. Vamos abrir dentro de Brackets. Em seguida, adicione um título, eventos JavaScript. Então não precisamos das etiquetas de estilo para este. Agora também podemos limpar HTML, e também as tags de script. Lá vamos nós. JavaScript é muito usado em páginas da Web para adicionar interatividade, e precisamos de uma maneira para JavaScript detectar as ações de um usuário, a fim de saber como reagir. Este é o lugar onde eventos ou manipulação de eventos entra. Você também pode pensar em um evento como um gatilho. Como exemplo, o navegador pode esperar que um evento aconteça, como um usuário clicando em um botão, que você já olhou em vídeos anteriores, onde o clique no botão é acionado uma função. Então, analisamos brevemente o manipulador de eventos onclick para acionar uma função. JavaScript também pode reagir a coisas como quando uma página termina de carregar, quando as teclas são pressionadas no teclado, quando um mouse passa sobre um elemento ou mesmo quando você envia um formulário. Vamos criar uma entrada para trabalhar com, o tipo de entrada de botão, e então vamos dar a isso um ID de botão, e então vamos adicionar algumas classes bootstrap. Podemos alterá-los usando eventos JavaScript. Adicione uma classe, a classe bootstrap de btn e, em seguida, btn sucesso. Vamos adicionar um valor a este botão de saudação e, em seguida, como procuramos anteriormente, podemos adicionar o evento onclick para acionar uma função. Vou citar o nome da função de mudança, e depois até as tags de script, podemos criar essa função dentro de lá, então a função de mudança. Isto deve parecer bastante familiar agora, porque já o usamos algumas vezes. Então, queremos fazer um document.getElementById. Agora eu vou pegar o ID do botão, e então uma vez que este botão é pressionado, eu só quero que isso para acionar um novo nome de classe. Isso pode ser igual a classes bootstrap novamente, ou btn, btn-danger. Começaremos com o sucesso do botão. Então, uma vez clicado, isso mudará para perigo de botão. Vamos abrir isto e verificar se isto está a funcionar bem. Isso é um sucesso de botão que é o fundo verde, e então uma vez clicado, temos o nome da classe de botão ou btn-danger adicionado, que é o fundo vermelho. Esse é o evento onclick. Nós também podemos fazer um tipo semelhante de coisa quando passamos o mouse sobre o botão em vez de clicar nele. Para fazer isso, basta mudar onclick para ser onmouseover. Quando passarmos o mouse sobre o botão, devemos mudar de classe, assim mesmo. Então isso ocorre uma vez que o mouse passa por cima do botão. Se você quiser que isso ocorra quando o cursor deixar o botão, podemos mudar onmouseover para onmouseout, e há uma única diferença. Uma vez que passamos por cima do botão, a classe não muda, mas assim que o mouse deixa o botão, então obtemos a mudança para o fundo vermelho. Todos esses eventos estão acontecendo nos bastidores em muitas páginas da Web que você visita todos os dias. O próximo evento útil que eu quero ver é onkeyup e onkeydown, e isso é praticamente o que parece toda vez um botão no teclado é pressionado, ou toda vez que ele é lançado. Isso pode acionar um evento. Vamos criar um formulário de exemplo para ver isso em ação. Vamos apenas comentar a entrada, e vamos criar um formulário. Em seguida, o tipo de entrada de texto, um ID para pegar um JavaScript de campo de entrada, e, em seguida, assim como nós usamos com os eventos onclick, nós podemos mudar isso para onkeyup, e isso pode acionar uma função também. Vamos chamar a função keyPressed. Então, com este exemplo, eu vou criar uma função simples que vai ser acionada toda vez que um botão de teclado é pressionado. Vou criar um cabeçalho de nível 2 vazio, e quero que a função exiba o texto. Então, toda vez que um botão é pressionado dentro deste formulário, eu quero que o cabeçalho de nível 2 para conter o valor do que foi inserido dentro das entradas. Então deixe o conteúdo vazio por enquanto, e vamos adicionar um ID de exibição. Então vamos criar nossa função de keyPressed. Primeiro de tudo, eu quero pegar a tela com um document.getElementByID, que é o ID de exibição. Em seguida, queremos definir o HTML interno da exibição para ser igual ao valor deste InputField. Então eu preciso de InputField.value. Então vamos subir no cabeçalho de nível 2 vazio e, em seguida, definimos o conteúdo do HTML interno para ser igual ao que os usuários digitam dentro desses campos de entrada. Isso será acionado toda vez que um botão do teclado for pressionado. Vamos dar uma olhada nisso em ação. Há o formulário no canto superior. Toda vez que você pressiona uma tecla, isso aciona uma função, e então teremos o conteúdo preenchido dentro do cabeçalho de nível 2. Portanto, esta função é acionada toda vez que uma chave é liberada com onkeyup. Nós também pode ter onkeydown, e isso é acionado assim que o botão é pressionado para baixo. Então, dois eventos são bastante semelhantes, mas apenas com uma pequena diferença sutil. Depois, quero ver o evento onchange. Isso é acionado quando uma alteração é detectada. Podemos usar o mesmo formulário, mas desta vez em vez de onkeydown, queremos alterá-lo para onchange. Então vamos criar uma função. Então, toda vez que há uma alteração detectada, eu quero aumentar a fonte. Vamos criar essa função na parte inferior. Então, quando uma alteração é detectada, queremos pegar o campo de entrada, que é esta seção, e então aceitar o CSS para ser um pouco maior. Então document.getElementByID. Novamente, vamos soltar o InputField e, em seguida, .Style.FontSize. Então, para que possamos ver que está funcionando, vamos definir o tamanho da fonte para ser muito maior, então 50 pixels, e então vamos salvar isso. Na verdade, é suposto ser FontSize. Salve isso e vá para o navegador. Vamos digitar algo lá dentro. Assim que tivermos um clique fora dele, vou pressionar uma tecla de retorno, e ela deve acionar a função. Lá vamos nós. Agora temos o texto alterado para 50 pixels. Então é assim que o manipulador de eventos onchange funciona. O último manipulador de eventos que vou mostrar neste vídeo está usando onsubmit, que é acionado quando um formulário é enviado. Então vamos criar um formulário de exemplo ou podemos usar o de um pouco antes. Para que isso funcione, precisamos colocá-lo dentro dos elementos do formulário, então onsubmit. Então, novamente, precisamos colocar uma função para executar, então RunValidation, e, em seguida, vamos adicionar um script dentro desta função para fazer alguma validação de formulário quando este é enviado. Para isso funcionar, precisamos criar uma entrada que é o tipo de enviar, e obtemos um valor de Enviar formulário. Salve isso e, em seguida, vá para o script e, em seguida, crie uma função que é RunValidation. Podemos colocar qualquer validação de formulário que você quiser aqui. Então, só para verificar se está funcionando, eu vou criar um alerta e apenas criar um texto, apenas a validação de nosso formulário e, em seguida, atualizar o navegador. Agora, quando enviamos o formulário, isso aciona a função onsubmit e há o nosso texto para abrir antes da validação do formulário. Isso é realmente útil para fazer algumas verificações dentro do navegador para verificar se o usuário preencheu todos os campos, ou digitou as coisas corretamente. Então esse é o fim deste vídeo sobre eventos JavaScript. Vejo vocês no próximo vídeo onde vamos dar uma olhada em um mini desafio, que envolve reagir a eventos onclick para fazer um animador de nomes. Te vejo lá. 36. Minidesafio: animador de nomes: Bem-vinda de volta. Neste vídeo vamos dar uma olhada em outro mini-desafio chamado Nome-Animator. Se você entendeu como funcionam os eventos onclick, especialmente a maneira como mudamos um elemento quando um botão é clicado, você não deve ter problemas para concluir este desafio. Tudo o que eu quero que você faça é adicionar seu nome para o topo da página e, em seguida, criar alguns botões que, em seguida, manipulam esses elementos. Então, no meu caso, eu criei um que torna o texto grande. Podemos mudar a cor, podemos dizer que todos os caracteres são letras maiúsculas e então podemos esconder o nome e depois mostrá-lo novamente. Então é apenas uma boa chance de colocar algumas coisas em prática, e colocá-las na memória. Você deve ser capaz de dar uma chance, e se não, apenas me acompanhe enquanto eu crio isso. De volta à seção Dom, vamos criar uma nova pasta que é o número cinco, e este é o nome animador. Abra isso e altere o título, e então vamos começar com uma página em branco. Neste vídeo, eu quero lidar com os cliques de uma maneira ligeiramente diferente. Você pode acionar uma função se quiser, mas vou mostrar-lhe uma maneira ligeiramente diferente de fazer isso. Dentro do corpo, vamos criar o nosso nome. Eu só vou colocar isso em tags p, então o Id igual ao nome, e, em seguida, colocar o seu nome dentro disso, e em seguida, vamos criar os cinco botões que são todos os tipos de entrada de botão. Você pode criar mais botões ou menos botões, se preferir. Então o tipo é botão e, em seguida, apenas para torná-lo um pouco mais agradável, vamos adicionar algumas classes Bootstrap, então, btn btn-info, o valor que é apenas um texto que aparece dentro do botão de big, e então um evento onclick. Onclick é igual a, e então desta vez, em vez de acionar uma função, eu vou realmente colocar o JavaScript dentro das citações. Então document.getElementByID e, em seguida, dentro dos colchetes, precisamos colocar o Id, que no nosso caso é o nome. Coloque isso dentro de lá e, em seguida, espero que você possa lembrar como adicionar estilos CSS do manipulador em elementos de vídeo, Isso foi estilo ponto e, em seguida, ponto tamanho da fonte igual a 100 pixels, e isso na verdade quer ser entre aspas simples, porque temos as aspas duplas do lado de fora. Esta é apenas uma maneira ligeiramente diferente de colocar isso para fora, e deve funcionar exatamente da mesma forma, então, enquanto você está salvando, verifique dentro do navegador. Então, há o nosso nome e então você clicou grande, devemos obter a mudança de texto para 100 pixels. Antes de seguirmos em frente, vou adicionar alguns estilos na seção da cabeça. Só para colocar isso no centro, o corpo, vamos definir a largura para 100 por cento e, em seguida, alinhar texto no centro, e então apenas alguns estilos para o nosso nome. Então adicione um ID de nome, vamos criar o tamanho da fonte de 60 pixels, e então a cor, eu quero que o meu seja azul. [ inaudível] empurrou tudo para o centro, e acabou de adicionar um pouco de cor ao nosso nome, e você pode mudar isso para o que quiser, então seja tão criativo quanto quiser. Esse é o nosso primeiro botão, todos funcionando corretamente, então, agora é apenas o caso de criar mais botões com vários estilos CSS. Nós podemos digitar tudo isso, ou você pode simplesmente copiar e colar, ou duplicar. Então eu vou apenas copiar isso, e depois colar isso abaixo. Eu quero que meu segundo botão mude a cor do texto, então, vamos dar a isso um valor de mudança de cor, [inaudível] na cor do ponto de estilo para ser igual a vermelho, ou qualquer cor que você gosta, então o meu vai ser vermelho. Se atualizarmos e clicarmos em mudar de cor, há o estilo vermelho. Agora vamos criar um botão para transformar o texto em maiúsculas. Então o valor do botão é maiúsculas, e então desta vez o texto do ponto de estilo se transforma, e então isso vai ser igual a maiúsculas, e então mais dois botões. Este é para esconder o botão, e para esconder o botão fazemos a visibilidade do ponto de estilo. Portanto, a visibilidade é igual a oculta. O último é fazer com que os elementos apareçam novamente, isso é show, e depois estilo ponto visibilidade mais uma vez, então isso é igual a visível. Aqui estão os nossos cinco botões, então guarde isso. Está bem. Vamos tentar todos os botões e ver que eles estão todos trabalhando, grande está trabalhando, mudar de cor é, todos mudando para maiúsculas, esconder, e depois mostrar. Lá vamos nós. Espero que consiga fazer isso sozinho. É um desafio bastante simples, mas dá-te a oportunidade de pôr em prática o que tens estado a aprender, por isso é muito útil dar-te isso sozinho. Obrigado, e agora passaremos para o projeto final. Vamos criar um aplicativo de cartão de visita. Obrigado e te vejo na próxima seção. 37. Criando a interface do usuário: parte 1: Parabéns por chegar ao final deste curso, e agora vamos entrar em uma parte muito divertida onde vamos começar a criar um aplicativo de cartão de visita. Este é um exemplo do que eu gostaria que você construísse. É algo que criei para mostrar como se faz. No entanto, eu intencionalmente deixei bastante básico, então eu gostaria que você realmente fosse criativo e mostrasse o que você pode fazer. Então eu sugiro nos dar atrás como de costume, e então obter todo o layout básico criado, e, em seguida, obter todas as funcionalidades funcionando usando JavaScript. Na minha versão, criei duas seções. O lado esquerdo são entradas de um usuário onde eles podem colocar em nome de sua empresa, e eles também podem adicionar vários textos, como nomes, títulos de trabalho e informações de contato. Eles também podem adicionar um pouco de estilo no cartão de visita usando as cores de fundo e também alterar a cor do texto e o alinhamento do texto, e então há uma div à direita que inclui um cartão de visita de amostra, e todos os alterações que são colocadas dentro da div esquerda e, em seguida, inseridas dinamicamente no cartão de visita. Você pode ver assim que você colocar qualquer informação no lado esquerdo, ela é então replicada no cartão de visita. Você pode alterar qualquer um desses valores, e tudo mudou imediatamente. Vá replicar isso você mesmo e veja o que você pode criar e, em seguida, faça o upload no final. Eu adoraria ver o que você pode inventar, e espero, você pode conseguir tudo isso por si só. Se não, siga-me comigo, e eu mostro-te como criei isto. Vamos começar com sua própria pasta. Vamos apenas copiar qualquer um dos vídeos que tem o esqueleto HTML e, em seguida, renomear a pasta, business cartão-projeto, e arrastá-lo para colchetes e alterar o título. Essa é agora a página limpa, então eu vou me livrar das tags de estilo e qualquer outra coisa está dentro do HTML ou do JavaScript. O exemplo que copiei tem as fotos da página de índice e também precisamos de um arquivo JavaScript externo. Eu já tenho o alert.js, então eu vou apenas mudar isso para custom.js e, em seguida, também criar uma nova página para a folha de estilo. Este é um style.css e, em seguida, vamos adicioná-los na próxima página. Vamos adicionar a folha de estilo para começar, e isso está apenas no diretório raiz. O link é o seu style.css, e, em seguida, a tag de script, eu vou adicionar bem na parte inferior do corpo. Em seguida, a fonte, novamente, está no diretório raiz para que possamos apenas ir para custom.js. Vamos arranjar espaço lá. Para começar, vou criar algumas divs e vou usar a grade Bootstrap para nos ajudar nisso. Vamos começar com o título da página. Vamos criar uma div com uma classe de contêiner fluido, e vamos fazer disso um projeto responsivo. Em seguida, a div com a classe de linha, e, em seguida, para tornar esta a largura total da página, vamos criar uma div com o col, uma classe de col-sm-12, e, em seguida, o título de nível 1, que é Cartão de visita Designer, e depois um segundo fluido recipiente, que vai ser o recipiente tanto para a div esquerda quanto para a div direita. Uma nova div com a classe de contêiner fluido, e vamos criar algum espaço lá. Então, haverá duas seções para esta parte. Haverá a entrada, que é onde o usuário insere as informações do formulário. Vamos apenas criar um comentário da seção de entrada, e então vamos criar a grade para isso. Vamos criar uma div com a classe, a classe Bootstrap de col-sm-12. É grade de 12 colunas para largura nos dispositivos menores. Os dispositivos de tamanho médio tornarão metade da largura da página, então col-md-6. Então, para que possamos estilizar isso nós mesmos, eu vou adicionar nossa própria classe personalizada de fundos, e vamos usar isso em apenas um pouco no CSS. Agora, precisamos criar nosso formulário HTML para todas as entradas do usuário, e vamos dar a este formulário um ID de CardInfo. Pode chamar isso do que quiser. Isso realmente não importa. Então vamos adicionar algumas classes, então uma classe Bootstrap de forma horizontal. Então, dentro deste formulário, vamos criar alguns grupos de formulários Bootstrap. O primeiro grupo de formulários em sua própria div. Dentro desta classe de form-group, vamos criar algumas seções do formulário. Vamos criar os rótulos no lado esquerdo e, em seguida, as entradas à direita. Queremos que o rótulo do lado esquerdo use uma grade Bootstrap. Isso vai ocupar três colunas, que vai deixar um restante nove colunas para a entrada. Vamos criar o rótulo agora. Este rótulo é para a entrada, que dará um ID de InputCompany. A maneira como eu vou organizar os IDs neste projeto é qualquer coisa no lado esquerdo, que é a entrada do usuário vai ter um ID começar com entrada. O primeiro é InputCompany e nível de mensagem de entrada, por exemplo, e, em seguida, no lado direito no cartão de visita, vou criar o ID, então esta seção, para começar com a saída. Isto será OutputCompany e OutputMessage, por exemplo. Só para ficar claro, uma vez que chegamos à seção JavaScript, qual ID estamos usando atualmente. Agora, temos o rótulo para InputCompany. Vamos adicionar as classes Bootstrap. Este é col-sm-3 e também control-label, e o texto é Nome da Empresa e, em seguida, dois pontos e, em seguida, a entrada seguinte. A entrada que queremos é apenas texto e, em seguida, a classe, novamente, uma classe Bootstrap de controle de formulário e, em seguida, o ID. É apenas a identificação que colocamos dentro da etiqueta. O ID é igual a InputCompany e, em seguida, a última coisa é o onkeyup. Toda vez que uma chave é liberada, queremos que ela acione a função de PrintCompany. Então isto irá imprimir o nome da empresa para o lado do cartão de visita. Vamos salvar isso e vamos abrir o navegador. Está um pouco confuso agora. Acho que só precisamos colocar a entrada dentro de uma div. Vamos criar uma div Bootstrap com a classe de col-sm-9 e, em seguida, mover a div de fechamento para após a entrada. O rótulo tem as três partes. A entrada permaneceu nove colunas. Isso parece um pouco melhor agora. Vamos passar para a mensagem da empresa. Você pode digitar tudo isso de novo ou você pode simplesmente copiar esta seção div, e então basta colar isso abaixo, e então apenas um simples caso de alterar alguns dos valores. Este é o InputMessage. O nome da empresa agora é nossa Mensagem da Empresa, e então precisamos alterar o ID e, em seguida, também o nome da função para ser PrintMessage, e isso deve ser tudo o que precisamos para a mensagem. Vamos apenas atualizar e aí está a mensagem. Agora, precisamos passar para o fundo na cor do texto. Vamos voltar para o editor de texto e, em seguida, podemos colar no grupo de formulários novamente. As entradas, eu vou chamar meu InputBG para segundo plano e, em seguida, alterar o ID. Altere o rótulo para a cor de fundo. Devido à seleção de uma cor, queremos alterar o tipo de entrada para ser cor. O ID está correto, e então precisamos adicionar um valor, e este será o valor inicial. Eu só vou adicionar um valor a isso, um valor hexadecimal ou ffb74d. Vamos usar um manipulador de evento diferente desta vez. Desta vez vou usar o Onchange. Toda vez que a cor é alterada, ele irá então acionar a função chamada changeBG, e nós também podemos reutilizar esta parte porque a próxima é mudar a cor do texto. Isso também precisa ter o tipo de entrada de cor, mas só precisamos mudar InputBg para InputText. Alterar o id de entrada e, em seguida, desta vez, precisamos alterá-lo para cor de texto. Vou mudar o erro de ortografia lá. A cor do texto, eu tenho o tipo de entrada de cor. O ID está correto. O valor, eu vou mudar o meu para 262626. Em seguida, a função, onchange novamente. Vai para ChangeText. Vou guardar isso e ver como está tudo no navegador. Atualizar, então agora temos o nome da nossa empresa, mensagem da empresa, e então também temos o seletor de cores aparecendo quando selecionamos a cor de fundo, e também uma vez que selecionamos a cor do texto. Nós também temos a cor padrão mostrando lá dentro. Deixaremos esse vídeo lá e continuaremos no próximo vídeo. Vamos começar a adicionar os alinhamentos de texto e vamos terminar a seção do formulário. Obrigado e te vejo no próximo vídeo. 38. Criando a interface do usuário: parte 2: Bem-vinda de volta. Vamos continuar de onde paramos no último vídeo. Vamos passar a partir das cores do texto e, em seguida, vamos adicionar todo o resto da seção do formulário, que inclui o Alinhamento de Texto e também vários nomes e informações de contato. Agora, vamos passar para a seção Alinhar texto. Vamos para o editor de texto e, em seguida, logo abaixo da seção ChangeText, vamos apenas copiar esta seção e colar isso em baixo. Este vai funcionar um pouco diferente dos últimos que olhamos porque eles vão ser três entradas diferentes. Toda vez que uma dessas entradas é clicada, queremos pegar o ID e, em seguida, passar esse JavaScript para determinar se o CSS deve ser alinhado à esquerda, à direita ou ao centro. Podemos reutilizar o rótulo, e desta vez só queremos dar-lhe um rótulo chamado Alinhar texto. Então ainda dentro da seção col-sm-9, vamos criar três entradas diferentes. O primeiro vai ser o tipo de botão e, em seguida, a classe de btn btn-info. O valor que vamos passar será o texto dentro do botão, então este é o botão esquerdo. Então vamos passar um ID para o texto à esquerda. Esta é na verdade uma aula de bootstrap, mas vou mostrar exatamente o que vamos fazer em apenas um segundo. Nós vamos criar um manipulador de eventos onclick e quando o botão é pressionado, ele vai terminar função gatilho chamado TextAlign. Então, dentro dos colchetes, vamos passar em um parâmetro de this.id. Esta parte fará mais sentido quando passarmos para a seção JavaScript. Mas basicamente o que estamos fazendo é toda vez que o botão é clicado, vamos então acionar a função TextAlign e dependendo de qual dos três botões é pressionado, ele irá então pegar o id. Neste caso, é texto- esquerda. Em seguida, usando JavaScript, vamos adicionar este ID text-left e, em seguida, vamos adicioná-lo como um nome de classe. No momento em que for pressionado, o texto dentro do cartão de visita terá o alinhamento texto-esquerdo e o mesmo para o centro de texto e o texto direito. Mas deve fazer mais sentido quando chegarmos à seção JavaScript. Basta duplicar este botão mais duas vezes e vamos usar exatamente a mesma função TextAlign. Mas nós só precisamos mudar o id. O meio vai ser text-center com o valor de Center, e então o terceiro botão tem o valor de Right e, em seguida, o id de text-right. Todos os três botões acionam a mesma função, mas nós apenas passá-lo em um id diferente dependendo de qual botão é pressionado. Vamos dar uma olhada nisso e atualizar. Diz que tenho três botões. Agora, podemos passar para o nome do usuário, o título do trabalho, e-mail e número de telefone para que seja uma seções bastante simples. Podemos simplesmente copiar os grupos de formulários que já criamos e colá-los abaixo dos botões. O primeiro é o InputName, o valor do rótulo do seu nome, altere o id. Vou remover o valor porque não estamos usando a cor. Vamos remover o tipo de cor e alterá-lo novamente para texto. Então precisamos que isso seja “onkeyup”. Quando a tecla é pressionada, então, acionará uma função chamada PrintName. Então vamos fazer o mesmo para o título do trabalho, então copie isso e cole. InputJob, o id é InputJob também e em seguida, o rótulo é Job Title e, em seguida, onkeyup PrintJob e, em seguida, a seção de e-mail. Vamos criar um novo grupo de formulários, mais uma vez. Colar logo abaixo para que este precisa ser o InputEmail e, em seguida, alterar o id. O rótulo é simplesmente E-mail e desta vez precisamos alterar o tipo de entrada para ser e-mail para JavaScript pode fazer alguma validação sobre isso. Em seguida, a função PrinteMail onkeyup. Então o último que precisamos fazer é para o número de contato. Vamos apenas copiar este último grupo de formulários para o número de telefone, que é InputTelephone, alterar o id, o título de Número de Telefone e, em seguida, o tipo de entrada de tel e, em seguida, onkeyup PrintTelephone. Salve isso e confira isso no navegador e que deve ser todos os tipos de entrada todos concluídos agora. Nós só precisamos adicionar o botão Enviar e, em seguida também um botão para limpar o formulário, então vamos adicioná-los agora. Podemos colocá-los dentro de seu próprio grupo de formulários também. Crie uma nova div com a classe de form-group. Então vamos adicionar a grade bootstrap para uma div, vamos dar a isso uma classe de col-sm-3 para que ele ocupe três colunas e em seguida, também um offset-col-sm-offset-3. Então, dentro da div, podemos colocar a entrada. O primeiro que precisamos adicionar é o tipo de entrada de botão. Isto é para o botão Enviar e, em seguida, onclick. Vamos criar a função FormSubmit e, em seguida, o valor do botão é igual a Enviar. Em seguida, por último, o botão para a reposição do formulário ou Limpar. Eu crio esta div completa do acima e apenas remova o deslocamento desta vez. Mais uma vez, precisamos do tipo de entrada de botão. Onclick irá criar a função FromReset com o valor de Clear. Vamos dar uma olhada no navegador e verificar se está tudo funcionando bem. Então atualize isso e lá vamos nós. Há o nosso cartão de visita e todos os formulários, o botão Enviar e também o botão Limpar na parte inferior. Vamos terminar o HTML, só precisamos criar a div no lado direito, que é para o cartão de visita. Isso vai ter todas as informações que o usuário insere no formulário. Vamos criar um comentário apenas para torná-lo um pouco mais legível. Esta é a seção de saída. Eu só quero ter certeza que temos isso na seção certa, então eu vou clicar nisso. É o fim de todas as formas. Vamos arrumar isso um pouco. Trazendo forma até o topo. Então este deve ser o recipiente de fechamento para o fluido do recipiente. Lá vamos nós. Agora podemos manter tudo isso dentro do fluido do recipiente, então certifique-se de que a div de fechamento está abaixo da seção de saída. Agora, vamos criar a seção de cartões de visita. Vamos criar uma grade de bootstrap para este lado. A classe precisa ser col-sm-12. Assim como a seção esquerda, será a largura total da tela em dispositivos menores. Então, uma vez que você chegar a um dispositivo maior, podemos adicionar um col-md-6 e isso vai ocupar seis partes ou metade da largura da tela. A seção da mão esquerda e a seção da direita ficarão lado a lado. Então uma nova div, e isso vai ter o id igual ao cartão porque esta é a seção do cartão de visita. Usamos esse id para o estilo e também para a interseção JavaScript. Vamos colocar o nome da empresa em um título de nível três, então vamos colocar Nome da Empresa. Vamos apenas colocar isso como um espaço reservado até que o usuário adicione algumas informações no formulário, e então isso irá substituir o texto do nome da empresa. Precisamos dar-lhe um id. Porque estamos agora na seção de saída, podemos adicionar o id de OutputCompany. Em seguida, precisamos fazer a mensagem de saída, que é esta seção aqui. Abaixo do título de nível três, vamos colocar isso em tags p e, em seguida, o id de OutputMessage e isso vai ter uma classe bootstrap de small, apenas para que seja um pouco menor do que o resto do texto, e então o texto da Mensagem da Empresa e, em seguida, duplique esta seção. Isso será para o seu nome ou o nome do usuário, então o texto é Seu nome. Podemos manter a classe bootstrap de pequeno, mas desta vez alterar a saída para ter um id de OutputName e duplicar isso novamente. Este é o OutputJob. Novamente, a classe é pequena e o nome de Job Title. Vamos dar uma olhada. Está feito, agora se juntou. Após o título do trabalho, precisamos também adicionar o e-mail e o número de telefone. Vamos duplicar isso duas vezes mais para OutputEmail e o texto pode ser de Email:. Por último, OutputTelephone e o nome de Tel: com dois pontos no final. Eu deveria trazer isso um pouco mais perto e economizar. Deve ser isso, uma vez que você atualize. Se você for até o projeto, e há todas as nossas informações no cartão de visita do lado direito. Essa é a seção de interface de usuário completa. No próximo vídeo, vamos passar a adicionar alguns CSS e também passar para os JavaScripts. 39. Adicionando funções em CSS e Javascript: Ok, então agora a seção de interface de usuário está terminada para o nosso projeto de cartão de visita. Vamos agora passar para o estilo e também adicionar um pouco de JavaScript para fazer isso funcionar. Então, volte para Brackets, e então precisamos começar no style.css. A primeira coisa que eu quero fazer é mover o Nível 1 indo para o centro e apenas torná-lo um pouco mais espaçado. Então h1 e, em seguida, adicione alguns alinhamentos de texto para o centro e também algum preenchimento. Então 20 pixels na parte superior e inferior e zero na esquerda e direita. Então vamos adicionar um pouco de estilo ao cartão de visita. Na página de índice, daremos ao cartão de visita um ID do cartão, para que possamos usá-lo em estilos do CSS. Então vamos dar a ele alguma largura de 400 pixels, uma altura de 250 pixels, e então uma borda para ir ao redor do cartão de visita de 1 pixel e uma linha sólida, e então apenas um pouco de preenchimento de 10 pixels, e isso vai manter todos o texto dentro da borda externa. Agora, parece um pouco mais com um cartão de visita. Na verdade, vamos colocar uma regra horizontal logo acima do seu nome. Então de volta para a página de índice. Vamos colocar o HR depois da Mensagem da Companhia. Então, há a sua regra horizontal [inaudível] fraca, apenas para separar o nome da empresa com as informações da pessoa. Agora vamos adicionar alguns estilos à seção de fundo do formulário. Então vamos dar a esta seção formulário uma classe personalizada de fundo. Então vamos usar isso no style.css. Então vamos dar-lhe uma cor de fundo de uma cor cinza claro, que é eee, e um pouco de preenchimento de 30 pixels, e então alguma margem na parte inferior e isso, você vai ser definido para 30 pixels. Isto é apenas para a visualização móvel. Então, quando o formulário é empilhado em cima do cartão de visita, ele vai apenas manter um pouco de distância entre os dois. Então guarde isso. Então agora temos uma pequena cor de fundo para separar a seção de formulário do cartão de visita. Isso parece um pouco melhor agora. Nós temos a interface de usuário completa, e nós adicionamos algum estilo para torná-lo um pouco mais agradável. Então agora vamos passar a adicionar algum JavaScript, para realmente fazer isso funcionar. Portanto, queremos que as entradas do usuário da esquerda apareçam no lado direito e, em seguida, preencha o cartão de visita para o usuário possa ver exatamente como seu cartão será semelhante. Então vamos para o custom.js. Podemos criar as funções que criamos dentro da página de índice. Então o primeiro que precisamos fazer é PrintCompany. Esta é a primeira função a criar. Então basta copiar isso e, em seguida, passar para o custom.js, função PrintCompany. Certo, o que exatamente queremos que essa função faça? Bem, se dermos uma olhada em nossa página de índice, o que queremos que a função faça é pegar os elementos HTML no lado direito. Então precisamos fazê-lo com document.getElementByID. Então este é OutputCompany, e então precisamos alterar o InnerHTML para ser o conteúdo da InputCompany no lado esquerdo. Então vamos fazer isso agora. Então document.getElementByID. Então, precisamos pegar o OutputCompany e, em seguida, precisamos definir o innerHTML para, em seguida, ser igual ao InputCompany.value. Então vamos guardar isso e ver se está funcionando bem. Atualizar, então agora devemos ser capazes de digitar um nome de empresa dentro de lá e porque nós usamos no keyup como o manipulador de eventos, agora podemos ver o conteúdo exibido no lado direito, e isso aciona uma função cada vez que uma tecla é pressionado. Então vamos passar agora para a Mensagem da Companhia. Basta copiar esta função, e então podemos colá-lo abaixo. A função foi chamada PrintMessage e, em seguida, o elemento que queríamos pegar era OutputMessage. Então, estamos definindo o innerHTML de OutputMessage para ser InputMessage. seguida, em vez do innerHTML, precisamos alterar o CSS para alterar a cor de fundo e também a cor do texto. Então função, e o nome da função era ChangeBG. Claro, se você usar qualquer nome de função diferente na página de índice, basta alterá-los de acordo dentro do arquivo JavaScript. Ok, então para começar, precisamos pegar o valor ou o valor de entrada do usuário, e eu vou armazenar isso dentro de uma variável chamada BGColor. Então, o BGColor é igual a document.getElementById e o ID que queremos pegar é o InputBg e, em seguida, .value. Então agora temos o valor de entrada do usuário armazenado dentro de uma variável chamada BGColor. Agora podemos definir o lado do cartão de negócios. Então document.getElementByID e o ID que queremos pegar. Então a cor de fundo que queremos mudar é a seção completa do cartão de visita, e isso tinha o ID do cartão. Então adicione cartão para lá e, em seguida, .style.color, e, em seguida, vamos definir isso igual à entrada do usuário, que é armazenado dentro desta variável. Então cole isso aí com um ponto-e-vírgula. Vamos verificar se está funcionando bem. Vá para a Cor de Fundo e selecione o plano de fundo desejado. Isso está mudando a cor do texto, então só precisamos mudar nosso estilo. Então guarde isso. Então agora, quando mudamos a cor, ela deve mudar a cor de fundo em vez do texto, então lá vamos nós. Aquele pequeno erro deveria ter te dado uma pista sobre como vamos fazer a cor do texto a seguir. Então copie esta função e cole. A função é changeText. Assim como antes, esta pode ser uma variável chamada TextColor. Em seguida, a entrada que queremos pegar é InputText. Então isso está pegando o valor que o usuário selecionou. Novamente, document.getElementByID, e vamos selecionar o cartão de visita completo e, em seguida, o estilo precisa ter a propriedade de cor. Isso vai ser igual à variável de TextColor. Vamos verificar isso. A Cor de Fundo está funcionando bem e, em seguida, a cor do Texto, ok, bom, tudo isso está mudando. Então vamos refrescar isso. Ok, então agora essas cores estão funcionando. Vamos deixar este vídeo lá antes que ele fique muito longo e voltar no próximo vídeo onde vamos terminar todo o resto do JavaScript para o projeto. 40. Finalizando o projeto: Bem-vinda de volta. Este é o último vídeo do projeto Designer de cartões de visita. Vamos continuar de onde deixamos no último vídeo. Vamos começar definindo a propriedade “Alinhar texto”. Se você se lembrar, dentro da página de índice, se procurarmos a seção “Alinhar texto”, que está apenas lá, colamos em alguns valores e onclick criamos uma função ou vamos criar uma função chamada “TextAlign”. Isso vai levar em um parâmetro e o parâmetro que vamos usar é o id deste botão. Definimos o id para ser o mesmo que a classe Bootstrap de “text-left”, “text-center” e “text-right”. Toda vez que o botão é clicado, o id será alterado para um desses três valores, e então podemos pegar este id e, em seguida, alterá-lo para ser uma “classe” e, em seguida, que irá aplicar os estilos Bootstrap e alinhar o texto em conformidade. Vou mostrar-lhe como fazer isso agora dentro do arquivo JavaScript. Vamos criar uma função. Esta função foi chamada TextAlign. Vou dar ao parâmetro um nome de selected_id. Em seguida, dentro da função, vamos fazer um document.getElementById. Então queremos selecionar o cartão mais uma vez, mas então queremos adicionar um nome de classe igual ao selected_id. Espero que isso faça sentido. Selected_ID irá puxar o id do vínculo e, em seguida, uma vez que ele tem o id, como text-right, você irá então usar o id e defini-lo como um nome de classe. Efetivamente, será assim. ClassName é igual à direita de texto. Essa é uma classe Bootstrap, que fará com que todo o texto apareça no lado direito, e o mesmo para text-left e text-center. Vamos guardar isso e verificar se está funcionando bem. Texto Alinhar centro, direita e esquerda. Agora precisamos passar para o seu nome, e seu nome tinha uma função chamada PrintName. Então vamos criar isso agora no custom.js. Uma nova função, PrintName. Poderíamos fazer isso da mesma maneira que anteriormente com document.getElementByID. O Id que queremos pegar está na seção de saída. Precisamos pegar nome de saída e, em seguida, definir o HTML interno para ser o mesmo que a seção de entrada. InputName. Em seguida, quando você esfregar o valor e salvar isso. Agora, na seção de nome impresso, vamos apenas adicionar algo a isso. Você pode ver como estamos digitando que está sendo impresso no lado do cartão de visita. PrintJob é praticamente o mesmo também. Vamos copiar a função. Desta vez PrintJob. O nome de saída é OutputJob e nome de entrada muda para InputJob. Em seguida, e-mail e seção de telefone. PrinteMail, pegue o OutputEmail e, em seguida, InputEmail.value. Mas em vez de apenas imprimir o e-mail, queremos que a seqüência de e-mail apareça logo antes dele. Basta adicionar isso com dois pontos e um espaço e, em seguida, adicionar na entrada que o usuário inseriu dentro do formulário. Então o mesmo para o número de telefone. Copie essa função. Esta função é PrintTelephone. O elemento que queremos agarrar é OutputTelephone. O InnerHTML é InputTelephone. Em seguida, altere o e-mail na string para ser Tel e, em seguida, salve isso. Então vamos atualizar o navegador e, em seguida, podemos adicionar alguns valores no resto do formulário e verificar se tudo está funcionando. Companhia 1. Vou adicionar um texto e verificar se está tudo funcionando. Alterar a cor do plano de fundo. Isso está funcionando e o imposto também está mudando. O Alinhamento de Texto, que está funcionando corretamente. Seu nome, o cargo, o e-mail está funcionando corretamente. Há uma string que vamos colocar na frente do e-mail e devemos obter o mesmo para o número de telefone. Vou acrescentar isso aí. Temos o sinal na frente do número. Ótima. Isso tudo está funcionando. Só há mais uma coisa a fazer e que são os botões na parte inferior. Vou começar com o Formulário de Envio. Tudo o que eu quero fazer com o FormSubmit. Tudo o que eu quero fazer com o botão Enviar é criar um alerta para alertar o usuário se determinados valores foram deixados em branco ou, em outras palavras, podemos colocar nos campos obrigatórios e, em seguida, criar uma função para o botão Limpar para redefinir todos os seções do formulário. Vamos começar com o botão Enviar. Vamos criar uma função chamada FormSubmit. Este é o nome da função que usamos dentro da página de índice. Se nós rolar para baixo até a parte inferior e, em seguida, olhar para o botão Enviar, que é apenas aqui, e há o botão FormSubmit, que eu escrevi incorretamente, então FormSubmit e, em seguida, vamos criar isso agora, então ele vai fazer um declaração if. Então “se” e um ponto de exclamação, o que significa não, então inputName.value. Isto é verificar se não há um valor dentro do nome de entrada. Então precisamos criar um alerta para o usuário. “ Preencha todas as seções necessárias.” Guarde isso. Agora colocamos o InputName e verificamos se não há nenhum valor. Agora, se não colocarmos um nome dentro dos campos de entrada e clicarmos em Enviar, teremos a caixa de alerta, que é, “Por favor, complete todas as seções obrigatórias”. Mas se tivéssemos um nome lá dentro e, em seguida, clicar , Enviar, não teremos o alerta aparecendo. Eu só usei a seção de nome como um campo obrigatório. Você pode colocar quantos quiser dentro da instrução “if” para testar se há algum valor ou se ele está sendo deixado em branco. Bem, eu só vou deixar agora como o nome e depois seguir em frente para criar o FormReset. Uma nova função na parte inferior e vamos chamar isso de FormReset. A maneira como eu vou atualizar a página é selecionando o window.location.reload e isso irá limpar todas as informações dentro do cartão de visita e também o formulário fazendo uma atualização de página. Nós guardamos isso. Apenas para adicionar algumas informações no cartão de visita e, em seguida, clique no botão Limpar e que deve recarregar a página. Vamos apenas verificar se há erros ortográficos, então FormReset, página de índice. Isso só precisa ser FormReset. Então guarde isso e isso deve resolver o nosso problema e atualizar. Adicione mais informações lá. Então agora espero que quando clicarmos, Limpar, isso limpa o formulário. É isso. Esse é o fim deste projeto. Eu realmente espero que você consiga chegar ao fim sozinho ou pelo menos completar uma parte dele. Sinta-se livre para personalizar isso o quanto quiser. Mas por enquanto, muito obrigado, e espero que tenham gostado do projeto. 41. Obrigado: Então, um grande parabéns por chegar ao final deste curso. Eu realmente espero que você tenha gostado e aprendido muitas coisas com ele. Você cobriu bastante neste curso. Começamos com conceitos básicos de JavaScript e entendendo coisas que tem variáveis, strings e arrays. Nós também olhamos para outros fundamentos, como funções JavaScript, escopo e objetos. Em seguida, passamos a olhar para matemática e datas e como eles são usados em JavaScript. Vamos então intensificar as coisas um pouco e vamos dar uma olhada no fluxo de controle e loops, que envolveu muitas declarações, como instruções switch e vários tipos diferentes de loops. Em seguida, apresentamos o JavaScript e o DOM, e demos uma olhada em como podemos acessar elementos em uma página da web e como podemos manipular os elementos, e concluímos vários mini desafios ao longo do caminho para testar suas habilidades e nós realmente esperamos que você consiga chegar a algo criativo para o projeto final. Então é isso. Então esse é o fim do curso. Muito obrigado. Se você gostou, por favor deixe um comentário. Isso realmente ajudaria outros alunos, e espero que eu te veja em breve em um dos meus outros cursos. 42. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Então obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.