Explore o guia de iniciantes do JavaScript para codificação do JavaScript | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Explore o guia de iniciantes do JavaScript para codificação do JavaScript

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

20 aulas (2 h 20 min)
    • 1. BSjavascript

      1:45
    • 2. Introdução ao curso JavaScript

      5:57
    • 3. 2 Introdução aos recursos de curso

      3:32
    • 4. 3 JavaScript colocado no HTML onde e como

      8:36
    • 5. 4 Obtenha elementos atualizados HTML via DOM

      7:22
    • 6. Modelo de objeto de documento JavaScript 5

      9:24
    • 7. 6 comentários de JavaScript

      4:29
    • 8. JavaScript interativo de 7 variáveis

      9:28
    • 9. Saída de 8 variáveis para HTML

      10:32
    • 10. 10 operadores aritméticos JavaScript

      5:29
    • 11. 11 operadores de JavaScript

      5:42
    • 12. 13 Declarações condicionais de JavaScript e declarações de comutação

      10:52
    • 13. 15 loops JavaScript

      7:16
    • 14. 17 Introdução ao JavaScript às funções

      10:51
    • 15. 19 Tornando sua página HTML interativa e dinâmica com JavaScript

      8:31
    • 16. 20 ouvintes de eventos JavaScript

      4:18
    • 17. 22 matrizes de JavaScript

      10:12
    • 18. 24 objetos JavaScript explicados

      6:34
    • 19. Função de matemática JavaScript 26

      3:47
    • 20. Conclusão de data de JavaScript

      5:03
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

358

Estudantes

1

Projeto

Sobre este curso

Aprenda a escrever JavaScript e dar vida às suas páginas da web. JavaScript está em todos os lugares e aprender JavaScript é uma habilidade em demanda que você precisa.

JavaScript é uma das tecnologias principais usadas na web. Usuários de imagem web que vêm ao seu site e podem interagir com seu conteúdo. Esse é o JavaScript. Personalize sua experiência de usuários da web!

  • Explore o que você pode fazer com o DOM (Modelo de objeto de documentos). Poder do modelo de objeto Documento DOM O DOM dá a você a capacidade de tornar seu conteúdo interativo.
  • Saiba mais sobre comentários e como escrever código JavaScript.
  • As variáveis estão no centro de programação, elas dão um contêiner para armazenar informações que podem ser acessadas e manipuladas facilmente.
  • Como distribuir conteúdo para usuários da Web consumir. Saiba como você pode produzir conteúdo para sua página da Web para todos os visitantes da Web que possam ver. Conteúdo personalizado pronto para exibir visitantes Alertas e outros objetos interativos para usuários da web.
  • Operadores com variáveis e como programação funciona. Tudo sobre operadores e o que você pode fazer com them.Arithmetic
    them.Arithmetic operadores condicionais e muito mais
  • Declarações condicionais, para verificações VERDADEIRAS e FALSO. Verifique para ver se a condição é preenchida e deixe o JavaScript responder.
  • Loops dentro do JavaScript economizando tempo e fazendo mais. Economize tempo em loop do seu código, repita e repita novamente. Ações repetitivas simplificadas com loops.
  • Explore o que você pode fazer com funções. Blocos de código que podem ser facilmente chamados e executados dentro do seu código.
  • Os ouvintes de eventos que podem ser usados para criar interação no seu site. A conexão final entre usuários e seu código. A ação e o código deles podem reagir a ela.
  • Mantenha mais dados com arrays e objetos. Vários valores dentro de uma variável. JavaScript vem pronto com tantas coisas que podem ser feitas com os dados da matriz.
  • Matemática, data e muito mais

Este curso é ministrado por um instrutor com mais de 18 anos de experiência em desenvolvimento da web.

Estou aqui para ajudar você a aprender sobre JavaScript e pronto para responder a quaisquer perguntas que você possa ter.

Quando você estiver pronto comece a codificar JavaScript hoje.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. BSjavascript: saiba como escrever JavaScript e dar vida aos seus pêssegos Web. JavaScript está em todos os lugares. Aprendendo JavaScript é um dedo do pé de habilidade na demanda. JavaScript é uma das principais tecnologias usadas na Web hoje. Imagine usuários da Web chegando ao seu site e sendo capaz de interagir com seu conteúdo. Isto é JavaScript. Personalize sua experiência de usuários da Web. Explore o que você poderia fazer com o modelo de objeto de documento do amanhecer. Use o poder do amanhecer para tornar o conteúdo interativo. Saiba mais sobre como comentar e escrever seu trabalho. Registre como as variáveis são usadas em seu programa central. Então, como eles podem ser manipulados e acessados. Colocar conteúdo para que os usuários da Web consumam. Saiba mais sobre o conteúdo. Colocá-lo em seus navegadores da Web. Veja isso personalizando esse conteúdo para realmente impressionar seus visitantes alertas e objetos interativos que são usados em operadores de programação da Web com variáveis e como a programação funciona. Instruções condicionais para cheques verdadeiros ou falsos e muito mais loops dentro do JavaScript. Poupa-te tempo. Explore também funções, que são blocos de código que podem ser facilmente executados dentro de seu tribunal. Depois ouvintes de eventos. Eles dão a você essa capacidade interativa, ouvindo determinados leilões e permitindo que você forneça reações aos seus usuários da Web puxados ainda mais dados com os raios e objetos. JavaScript dá-lhe um monte de poder que você poderia fazer com um aumento construído em funcionalidade dentro JavaScript, como matemática, data e muito mais. Este curso é ministrado por instrutor com mais de 18 anos de experiência em desenvolvimento Web. Estou aqui para ajudá-lo a saber mais sobre JavaScript e pronto para responder a quaisquer perguntas que você possa ter. Então, quando você estiver pronto, vamos começar a cortejar JavaScript hoje mesmo. 2. Introdução ao curso JavaScript: bem-vindo ao nosso curso introdutório para JavaScript, onde vamos explorar todas as funcionalidades incríveis e coisas que o JavaScript tem para oferecer. Meu nome é Lawrence, e serei seu instrutor para este curso. E eu estou tão animado para ter esta oportunidade de apresentar Javascript para vocês hoje. Eu tenho trabalhado com JavaScript por muitos anos, desenvolvendo sites e todos os tipos de aplicativos realmente legais usando JavaScript. E estou aqui para ajudá-lo a aprender mais sobre JavaScript. E eu também estou pronto para responder a quaisquer perguntas que você possa ter em relação ao JavaScript. Este curso é projetado para dar a você a base um ponto de partida para aprender sobre javascript. Ele vai demonstrar algumas das funcionalidades realmente incríveis que você poderia fazer com JavaScript. Este curso foi projetado para que você comece a escrever código rapidamente. Eu entrei demonstrar como eu estou configurado e como você, também pode configurar o seu computador local, a fim de escrever e criar algum código javascript. Então eu tenho que mostrar onde colocar esse JavaScript dentro de sua página da Web dentro de seu código HTML . Além disso, vamos apresentar o dom, então o amanhecer é super poderoso e uma parte importante da criação de interação dentro de suas páginas da Web . Ele lhe dá a capacidade de acessar qualquer elemento qualquer um dos seus elementos HTML e fazer as coisas acontecerem com ele. E este é o despejo, o modelo de objeto de documento. Então vamos explorar o que é o dom e como você também pode, via JavaScript, interagir com o amanhecer e fazer as coisas acontecerem em suas páginas da Web. Nós também vamos olhar para comentários dentro do nosso código JavaScript. Então, comentar é uma parte importante da escrita de código porque ele lhe dá a capacidade de referenciar coisas dentro do seu código e também ser capaz de voltar em um ponto posterior e ler esses comentários e entender que as variáveis de código melhores estão no coração do o que é programação. Então as variáveis nos dão estabilidade, informação segura, e então podemos acessar e manipular essa informação em um momento posterior. Variáveis são super importantes, e dentro deste curso, estaremos cobrindo todos os conceitos fundamentais e como usar variáveis dentro de sua codificação. Além disso, como o conteúdo de saída para a sua página web. Agora, é claro, JavaScript dá a você a capacidade de manipular esse conteúdo e atualizar esse conteúdo em sua página da Web, e vamos mostrar como criar essas interações diretamente com JavaScript e importando suas respostas de usuário diretamente dentro do seu código e, em seguida, usando essas respostas dentro de seu casaco para que você possa, realmente enquanto seus visitantes e personalizar seus operadores de conteúdo e experiência são outra parte importante da codificação entender os operadores, e o que está disponível é super importante. Há tudo, desde operadores aritméticos a operadores condicionais e muito mais então vamos cobrir operadores também. Dentro deste curso, então declarações. Declarações são outro conceito fundamental de programação. Você precisa ser capaz de olhar para algo e julgar se é verdadeiro ou falso, e então tomar algum tipo de ação e criar algum tipo de resposta para o usuário. E o JavaScript lhe dá a capacidade de fazer isso. Além disso, JavaScript e loop dentro JavaScript realmente lhe dá um monte de poder, porque ele lhe dá a capacidade de loop através de peças, um frio ou certas ações. E isso realmente simplifica o processo dessas ações repetitivas, dando-lhe a capacidade de executá-las várias vezes quantas vezes quiser e criar essas saídas. Além disso, outro conceito fundamental de programação são funções agora. Funções dão a você a capacidade de executar blocos de código, e você pode executar esses blocos de código a qualquer momento. E há muito mais que você pode fazer funções também, como passar valores para essas funções, fazer cálculos e enviar de volta respostas. Também ouvintes de eventos. Então, dentro do curso, vamos estar cobrindo aqueles ouvintes de eventos e ouvintes de eventos fazem parte do Dom, e eles dão a você a capacidade de tornar qualquer elemento dentro do seu código HTML interativo. É a arte. É a melhor conexão entre os usuários e seu código, sua ação dentro de seu código e, em seguida, sua reação às ações deles. Isto é o que os ouvintes de eventos conduzem para. Suas páginas da Web, matrizes e objetos também oferecem outra maneira. Toe segurar vários valores e matrizes e objetos são realmente importantes. Os contêineres dentro do JavaScript e, assim como um aumento, têm um monte de recursos criados e que você pode fazer dentro do JavaScript, e vamos demonstrar algumas das coisas realmente legais que você pode fazer quando seus dados estiverem dentro uma matriz e o que você pode fazer com ele dentro do JavaScript, bem como objetos. Além disso, também vamos estar olhando para algumas das funções integradas que estão prontas para entrar no JavaScript toe ajudar você a obter valores e tornar sua experiência de codificação muito mais fácil e jantar. E isso é com data matemática e um monte de outras funcionalidades realmente legais que já estão prontas para entrar em JavaScript e lhe dá a capacidade. Basta chamar para essas funções, retornar respostas e integrar isso dentro do seu código. Então tudo isso e muito mais está incluído neste curso. Então, quando você estiver pronto, vamos entrar, abrir nossos editores e começar a criar algum JavaScript. 3. 2 Introdução aos recursos de curso: JavaScript, juntamente com HTML e CSS são as tecnologias centrais de três cantos da Internet hoje. Isso basicamente significa que a maioria dos sites modernos hoje estão usando JavaScript dentro de seu tribunal fonte e renderizando esse código. Tudo o que você precisa fazer é ter um navegador, então ele está junto com HTML e CSS. É um navegador que realmente renderiza nesse código. Então, dentro deste curso, eu vou estar mostrando a vocês como escrever JavaScript, e você vai se surpreender com o quão fácil é criar JavaScript. Agora, a fim de escrever JavaScript, você vai precisar de alguns recursos. E as chances são que você já tenha isso no seu computador. Então, primeiro de tudo, um dos principais recursos que precisamos para uma vez que escrevemos o código para realmente ver o código em execução é um navegador. Então, neste caso, eu estou usando o Chrome como meu navegador, e eu posso ver aqui quando eu vou a um site, ele renderiza o código dentro do site e você pode ver o código-fonte de qualquer site. E aqui você pode ver que há um monte de arquivos JS. Então estes são todos arquivos JavaScript, e nós temos o script de abertura e fechamento. Então, novamente, isso é mais JavaScript e como mencionado, quase todos os sites terão JavaScript. Então aqui está um pouco mais de JavaScript, e está literalmente em todos os lugares e usado em toda a Internet. Então, a fim de escrever código JavaScript, você pode usar qualquer editor dentro deste curso Eu vou estar usando Adam S. Este é um editor livre de código aberto. Também está disponível em outras plataformas. Então eu estou em uma máquina Windows. Então é por isso que ele me pediu para baixar a versão do Windows. Então há outras plataformas também, incluindo Max. Então estes são transmitidos os arquivos de download para Max e assim por diante. Então, dependendo de qual plataforma, e se você está procurando por um editor, então você pode conferir Adam. Mas, novamente, é provável que você já tenha um editor presente em seu computador. Portanto, qualquer editor, coisa que possa escrever texto, é ideal para escrever JavaScript. E uma das razões pelas quais estou usando Autumn é que ele tem uma interface muito boa para usar, e eu tenho feito um pouco da minha programação ultimamente dentro de Adam. Então, novamente, não importa qual editor você usa. Há um número deles lá fora, bem como o sistema. São os sistemas de arquivos que já estão no seu sistema. Desde que você possa armazenar os arquivos como arquivos HTML, isso é tudo que você precisa fazer para executá-los dentro de seu navegador e renderizar JavaScript. Agora há outra opção também. Então, há vários editores online, como Code pen Io Sys, outro que eu usei com bastante frequência. E a coisa é que eu gosto sobre caneta código é que o que você digita dentro da área de corte aqui é exibido no lado direito para que você possa fazer HTML. Você pode fazer CSS e você pode fazer JavaScript, e simplesmente renderizá-lo. Então eu só vou fazer algum código HTML rápido e vemos que faz a linha quebrar, e vemos o código e a área de exibição todos sendo renderizados para que possamos ver imediatamente o que esse código está fazendo e como podemos usá-lo. Então eu vou estar usando isso dentro deste curso, bem como criar arquivos dentro do Adam e na próxima lição, vamos saltar para realmente começou a escrever algum JavaScript. Então isso está chegando na próxima lição. 4. 3 JavaScript colocado no HTML onde e como: nesta lição, vamos começar a criar algum JavaScript. Então, primeiro de tudo, precisamos de um arquivo HTML para renderizar dentro do nosso navegador. Então vá em frente e crie índice dot html assim como eu fiz aqui. E basicamente nós podemos apenas colocar um texto lá e nós vamos abrir no navegador. Então eu quero notar que se você notar lá que eu estou indo para o host local e ele está realmente renderizando o código. Eso isso apenas para notar que eu também estou executando servidor de exemplo em segundo plano e que recebe incapacidade de ir para um host local. O Eso. Se você está interessado em baixar exemplo, é mais no Apache amigos dot orig e novamente, não é necessário executar JavaScript. Só faz com que seja um bom e Niedere seu l para ir, e eu fui nomeado para este diretório JS. Então, sempre que ele é executado, host local aponta para essa rota e eu tenho o índice como meu arquivo raiz, e é por isso que eu estou renderizando dessa maneira. Então eu só quero notar que ele está sendo executado em segundo plano. É isso aí. Esse é o painel de controle. Então, se você estiver baixando e instalando-o. Então eles vão ver algo assim também. E você pode começar. Você pode iniciar seu servidor. Então, primeiro de tudo, vamos criar algum JavaScript. Agora, se você está familiarizado com HTML, é uma Siris de abertura e fechamento de tags. Então nós temos nossa tag HTML, e então nós temos uma tag HTML de fechamento. Temos à frente. Tag, temos uma etiqueta de fechamento. Temos uma etiqueta corporal e uma etiqueta de fecho. E se você está se perguntando, OK, por que eu estou passando por tudo isso? HTML é porque há uma série de lugares onde você pode colocar JavaScript dentro de seu código , e às vezes você vai ver JavaScript aqui no topo. Então você vê algo como script e, em seguida, script de fechamento, e então você tem seu JavaScript aqui no meio, então este tribunal aqui vai ser processado como JavaScript. Então essa é uma opção, e você também pode fazer isso. Você poderia fazer isso dentro da área do seu corpo. Muitas vezes as pessoas tentam evitar ter seu código misturado com seu HTML. Não é realmente uma boa prática, então entre na prática de colocá-lo no topo ou colocá-lo na parte inferior. Então só depois de todo o seu conteúdo HTML e você tem um monte de coisas aqui, talvez eso blah, blah black. E então, depois de terminar todo o seu conteúdo HTML pouco antes de fechar o corpo, você pode colocar seu JavaScript lá também. Agora há certos benefícios e para baixo sites para colocá-lo. Eso algumas pessoas vão sempre colocá-lo no topo. Uma das desvantagens que Teoh coloca no código na parte superior é que, às vezes, se o código demorar mais tempo para ser executado, então você pode ter alguma lentidão em seu script. E a outra coisa, também, é estar ciente de qual vamos falar mais tarde. Se você é JavaScript está acessando elementos de conteúdo de seu HTML. Então, se eu tenho um DIV lá e se eu estou tentando acessá-lo com meu JavaScript, se eu estou tentando acessar o que é chamado de Dom. Então este é o modelo de objeto de documento inclui todos os elementos dentro da página. Então você precisa colocá-lo na parte inferior, ou você precisa esperar que todo o código HTML para renderizar e, em seguida, acessar. É o iniciar uma vez que o dom tenha carregado. Então essa é uma das razões pelas quais muitas vezes você encontrará o código na parte inferior também , porque muitas vezes estavam interagindo com os elementos dom. E é por isso que gostamos de colocá-lo no fundo para que todos os elementos dom possam ser criados agora. Outras vezes também, você pode ver o javascript sendo vinculado a um arquivo de script. Então isso vai ser a mesma coisa que gravar o JavaScript dentro do seu código-fonte . Mas há alguns benefícios em vincular a um arquivo de script. Então, a fim de vincular Teoh script Java, então eu só vou chamar este ponto javascript Js So Js é a extensão para arquivos JavaScript e fechar esse script eso Agora ele vai procurar por um arquivo chamado javascript J s. então eu só vou chamar este ponto javascript Js So Js é a extensão para arquivos JavaScript e fechar esse script eso Agora ele vai procurar por um arquivo chamado javascript J s. e salve isso para que eu vou salvar este como Javascript GS s O. Esta é a mesma coisa que ter o script dentro da página. Mas o benefício de ter um arquivo separado executando seu JavaScript é que você pode realmente vincular a partir de várias páginas para que eu possa usar JavaScript. E se eu tiver o mesmo javascript que eu quero executar em várias páginas, eu posso simplesmente vinculado a ele. E geralmente esta é a melhor prática. Se você tem um site, é sempre uma boa idéia criar trabalhos, arquivos de script e, em seguida, simplesmente vincular a eles. Se você tem algumas coisas que estão nesta página e apenas especificamente para esta página, então você pode sair e colocá-lo dentro do script. Então, abrindo e fechando tags de script novamente. Isso depende do que você está tentando realizar com o JavaScript no que está contido no seu código-fonte. Uma maneira pode funcionar melhor do que outra, e se você estiver criando um site grande, tente criar um link para o arquivo eso. Ele só o torna muito mais limpo e torna seu código-fonte muito mais legível. Então eu vou me livrar deste aqui um para o topo porque minha preferência é usar para manter as tags de script na parte inferior porque eu gosto da idéia de que também, se eu estou ligando para arquivos Js, mesmos princípios se aplicam, então coloque-os na parte inferior antes de fechar a etiqueta do corpo. E novamente, isso nos dá a capacidade de interagir com esta div aqui dentro do nosso HTML. E vou mostrar-vos isto nas próximas lições. Vou falar mais sobre o amanhecer porque há muita energia. É super poderoso e super útil em JavaScript. Então, novamente, manter todo esse código eles são legais e cuidadosamente no fundo antes que seu corpo feche é as melhores práticas que você não quer colocar você pode. Mas você não quer colocar coisas como suas tags de script aqui no meio de seu HTML, então isso não parece certo, e não parece legal. E realmente, não é uma boa idéia mantê-lo dentro deste formato porque você quer ser capaz de acessar rapidamente seus arquivos de script. Se você tiver alterações ou erros para fazer ou erros para solucionar , é sempre uma boa ideia ter tudo em um só lugar. Então, só estou te dando uma amostra. O que? Colocar a partir de JavaScript tão significa tipo documento, certo? Olá. Você pode ver que quando eu atualizar isso eu tenho que o conteúdo escrito lá. Então essa é uma maneira de produzir conteúdo em JavaScript. Mas, novamente, há maneiras muito melhores de realmente escrever algum código ou atualizar seu HTML do que colocar seu JavaScript no meio. Então eu vou me livrar disso. Eu vou manter a taxa de documentos e apenas atualizar a página lá. Então agora ele foi transferido para o fundo, e na próxima lição, eu vou mostrar a vocês uma maneira melhor de escrever olá dentro do seu HTML do que o que estamos fazendo agora. E só queria notar que esta é a mesma coisa que se eu apenas guardei isso e eu colocá-lo aqui e talvez nós vamos atualizá-lo. Então olá, mundo. E também adicionar alguns HTML lá. Então, agora, quando eu o atualizo, é a mesma coisa. Ele processa esse código. Então, a maneira como o navegador funciona é que ele lê todo o seu HTML quando ele atinge este arquivo JavaScript. Neste ponto, linha seis. Ele leva em todo esse JavaScript como se estivesse na renderização da página então corre através do cabo, renderiza cabo, em tudo o que precisa para renderizar e, em seguida, continua. Então ele iria acertar este script primeiro, e então ele iria acertar este script a seguir para que eu possa mostrar isso quando eu atualizá-lo. Eu tenho que Olá lá, Então e renderiza-lo na ordem em que ele é apresentado dentro do HTML. Então, a próxima lição vai analisar mais profundamente o documento e mostrar-lhe como podemos fazer isso um pouco mais eficientemente. Então está chegando na próxima lição. 5. 4 Obtenha elementos atualizados HTML via DOM: Então, nesta lição, eu vou mostrar a vocês uma maneira melhor de como podemos escrever algum código dentro do nosso HTML. Então, anteriormente nós tínhamos olhado para isso. Podemos pegar as tags de script abrir e fechar e colocá-lo dentro do nosso HTML e cabina renderizar lá fora. Mas o que realmente acontece se eu tiver uma tonelada de html lá e eu estou colocando algum javascript no meio lá, então ele nunca vai ficar realmente bonito e limpo, então, idealmente, nós queremos colocar o código na parte inferior. Mas digamos, por exemplo, que eu quero colocá-lo neste mergulho particular. Então eu quero atualizar este conteúdo de contato blah. E eu queria que Teoh dissesse outra coisa. Então vamos dar este em I d. E então eu só chamo de meu e. E então aqui em baixo, o que eu vou fazer é cebola realmente obter ou talvez nós vamos nos livrar deste, e eu vou trabalhar fora desse JavaScript , então vamos fazer um pouco de viragem para frente e para trás. Então, primeiro de tudo, vamos identificar esse, uh , esse valor, então eu vou dar, então eu vou usar o documento. Objeto. Então, novamente, este é o amanhecer, e é realmente importante familiarizar-se com o Dom e como ele se parece e como ele funciona. Então vamos fazer obtém elementos por i. D. E esta é outra coisa muito legal sobre JavaScript é que ele tem um monte dessas funções construídas que realmente nos permitem criar algumas coisas realmente poderosas e legais Dedo acontecer. Então, neste que estamos fazendo get elemento por i d. Então, essencialmente, ele está passando pelo objeto de documento, que eu vou explicar chegando a inchar, e ele está recebendo elemento por i d. Então, essencialmente, ele está passando pelo objeto de documento, que eu vou explicar chegando a inchar, e ele está recebendo elemento por i d. através desse documento completo. É encontrar o elemento que tem o meu e eu vou fazer outra coisa aqui. Vamos fazer outro método construído dentro do JavaScript onde vamos fazer HTML interno . E dentro desse HTML interno, isso está vestindo um mundo estranho e se livrar deste aqui e apenas limpe isso um pouco. E eu sei que é meio que executado fora da página lá, mas vamos dar uma olhada dentro do nosso navegador e ver como isso se parece. Então vemos que temos o nosso mundo de olá. Na verdade, mudou esse conteúdo lá. Então, se eu fosse realmente ir para o código-fonte lá, não há nenhum mundo Olá lá. Então, o que aconteceu aqui quando eu inspeciono elementos? Então este é Chrome navegador me dá a capacidade de inspecionar elementos que vemos. Temos o elemento que meu e l. E vemos que ele é atualizado com o novo HTML colocado dentro dele. Então o que está acontecendo aqui é que, enquanto estamos passando pela página, eso inicialmente o que acontece quando o navegador corre para este índice dot html? Page é, ele renderiza tudo isso. Este é o código-fonte. Ele atinge o JavaScript. O JavaScript diz a ele para olhar para o documento para que todas essas informações estejam contidas dentro do objeto documento procurando o elemento com meu e l E, que está lá, e diz HTML interno. E atualiza o que o html Inter está, assim, atualizando o código visual e também, nesse ponto que o código-fonte funciona eso Isto é diferente do código-fonte, porque este é o código-fonte dinâmico que está contido dentro do amanhecer, e que nos permite atualizar o conteúdo dinamicamente. E também, quando vamos para o nosso código-fonte, isso parece muito mais limpo. Eso nós não temos um monte de JavaScript misturado aqui, e a qualquer momento podemos abrir nosso arquivo JavaScript. E se quisermos atualizar nossa mensagem aqui, podemos sempre mudar a mensagem. E a coisa boa sobre javascript, sua dinâmica. É interativo, o que vou processá-lo nas próximas aulas. Por isso, torna muito fácil atualizar mensagens e assim por diante. Então, agora, quando eu voltar aqui, eu o atualizo. Tenho uma mensagem atualizada. Então eu tenho saída totalmente nova aqui para os usuários da Web. Então você provavelmente está se perguntando, bem, o que é o amanhecer e o que está contido dentro do esterco? E esta é uma das razões pelas quais eu gosto de usar cromo. E novamente eu fui inspecionar. Você pode fazer controle, deslocar I ou clicar em qualquer lugar que esteja em branco ou ir para o seu navegador aqui e ir para as configurações, e você pode ou mais ferramentas, e você pode abri-lo lá também. Eso há várias maneiras de abrir essas ferramentas de desenvolvedor dúvida e a coisa realmente legal sobre ferramentas de desenvolvedor é que ele realmente contém todas as informações dom. Então esta é toda a informação contida no Dom. E como podemos ver aqui, temos toda uma tonelada de informações e há esse HTML interno. Então, basicamente, para este elemento em particular, ele está retirando todo o HTML que está contido dentro deste elemento particular. E enquanto procuramos por essa página inteira, tudo contido no DOM. Isso é o que temos. Todo esse texto interno e inter html. E a diferença entre inter text e Inter html é que o texto Inter é o mesmo conteúdo que está sendo produzido sem HTML. E quando mudamos para cima para inserir HTML, vemos o conteúdo com dois homens de idade. Vemos as dibs lá. Nós lixamos isso, vemos as etiquetas de script e tudo mais. Então tudo o que eu fiz foi ter passado e eu passei por todos os diferentes nós filhos, então nós vemos que há um monte de notas infantis lá e nós podemos ver que este é o que nós selecionamos. Então é um Div com o i d meu e l e s. Então não é necessariamente que tem que ser aquele particular que tem que ser um div. Então, qualquer elemento com uma ideia pode pegar isso quando criança. Nota. Podemos ver que este tem alguns nós filhos. Mas nós descemos aqui e podemos ver que o HTML interno e o texto Inter está com nosso novo valor atualizado. E é basicamente assim que o Dom funciona. E há muito que você pode fazer com o amanhecer. Se você descer um pouco mais, você pode ver todos estes no borrão no clique. Então estes transmitem os ouvintes de eventos no burro. Então, basicamente, qualquer elemento dentro da página, você pode adicionar ouvintes de eventos. Você pode pegar informações, você pode atualizar as informações com JavaScript. E é aqui que o javascript se torna tão poderoso quanto o Dom porque nos dá tanto poder nos dá acesso a todo o objeto, e o objeto é onde toda essa informação fica contida. Eso Se você realmente quiser ver mais informações sobre o objeto, podemos usar nosso registro de console e este cara realmente nos dá a capacidade de descobrir mais informações e Seymour informações detalhadas sobre o que está contido dentro do cão. Então eu vou mostrar um pouco mais sobre isso na próxima lição. 6. Modelo de objeto de documento JavaScript 5: Então, na lição anterior, eu mostrei a vocês uma maneira muito legal de atualizar conteúdo que é visível para o usuário da Web via JavaScript, tornando todos os nossos elementos HTML interativos e dinâmicos. E tudo isso estava contido na madrugada. E podemos acessar o Dom e ver realmente mais informações sobre o dom vamos usar console eso. Esta é outra maneira de depurar seu JavaScript e descobrir mais informações sobre o que está acontecendo com seu JavaScript que usamos. Usamos o console lá para fazer logout de informações no console. Você pode usar o log do console. Então, se eu fizer log console Olá. E se eu voltar para a página, posso ver que estou me passando essencialmente uma mensagem aqui dentro do JavaScript. Esta é a informação do console não será visível em nenhum lugar aqui na página de saída. Assim, o usuário da Web não vai saber a menos que eles realmente vão em seu código-fonte e ver o que realmente informações estão sendo aqui. Eu coloquei aqui s então isso é realmente bom para depurar e passar valores e variáveis e descobrir mais informações sobre o que está contido em certas variáveis e objetos em JavaScript. Eso Isto é o que vamos estar usando isso para se quisermos descobrir mais informações sobre o Dom eso Chrome realmente tem um muito bom propriedades aqui. Se eu for para elementos, posso ver minhas propriedades. Eu posso ver todos esses objetos aqui, e eu posso tipo de peneirar através disso e resolver e descobrir todas as informações que eu quero descobrir. Aqui está Oh, eu tenho a habilidade de atravessar o dom. Eu posso atualizar o meu estilo é para que haja um monte de que eu poderia fazer dentro deste console. Então, às vezes, o que você quer fazer é talvez você queira produzir esse documento, objeto diretamente dentro do console e apenas olhar através dele dessa forma você pode não ter acesso ao elemento, ou você pode querer apenas passar por este caminho porque desta forma, você realmente tem mais controle. Então deixe-me mostrar a vocês como podemos usar o cônsul para produzir informações contidas dentro de certos elementos ou dentro do amanhecer como um todo. Então você pode fazer console d r I, e podemos fazer documento. Então note que eu não tenho metade de um documento definido como qualquer coisa, enquanto olá. Eu realmente tive um valor de string que eu estava fora colocando e ter ido Cônsul D r I Então isso é me dá uma visão de diretório cônsul do documento. Objeto. Então este documento não é coincidência que eu tenha escrito documento lá em baixo, bem como porque este é o objeto, e este é o principal objeto de nível superior aqui chamado de documento, que contém um monte de informações que nós somos apenas olhando. Então, quando eu atualizá-lo, eu vejo que no JavaScript Js linha um. Estou colocando a linha de Olá ao controle remoto colocando todo o objeto do documento. E isso vai ser muito legal, porque quando eu abri o objeto do documento, há tudo o que está contido na página. Então eu tenho a mesma habilidade de ir para baixo para nós filhos. Consigo obter toda essa informação. Posso continuar a descer os nós filhos. Então eu tenho cabeça, texto, texto, corpo e assim por diante. Então, há muita informação contida aqui dentro e eu posso continuar a descer. Então eu tenho todo o meu filho. Não, é assim que eu fosse para documentos e eu fui para html e então eu fui para. Então, se eu fui documento HTML Então vamos ver o que realmente acontece aqui. Se eu for documento html, vamos fazer o corpo do documento porque estamos nos documentos. Então, não vamos retirar todo o HTML, então é fazer a atualização do corpo do documento. Tem um corpo de documento lá e vemos que temos todos esses nós filhos. Então vamos fazer isso se não corpo do documento e podemos atualizar o inter html lá. Então vamos tentar algo interessante aqui onde vamos atualizar esse html interno do corpo do documento. Então, um corpo de documento, html interno. E isso é certo. Deus. Então o que você acha que vai acontecer aqui para notar que um. Eu selecionei este elemento. Eu atualizei seu HTML interno. Temos o conteúdo que coloquei aqui. Então agora o que fizemos é que vimos que temos um documento. Nós temos corpo como um dos elementos lá, e nós tínhamos um html interno para o corpo, então nós tínhamos todo esse conteúdo aqui. Então, o que acha que vai acontecer agora quando eu atualizá-lo? E se você ver que estamos gon realmente se foi, e nós também vemos que estamos lançando um erro aqui porque agora estamos tentando acessar um elemento que não existe mais, e é aqui que estamos lançando um erro. Então este é outro bom exemplo de onde o console vem em útil. Porque se eu tivesse fechado isso, eu não saberia que estou vendo esse erro ou que estou recebendo um ar. Então é aqui que desenvolvedores da Web e desenvolvedores de JavaScript que usam o cônsul com bastante frequência porque nós somos capazes de obter um monte de informações aqui contidas dentro do console. Então vamos fazer mais uma atualização aqui, e digamos que sim. Você começa elemento por i D. E nós queremos saída que no log do console em vez de você se livrar daquele lá e faria log do console. E eu vou mostrar a vocês qual é a diferença entre o registro do console e o diretório Cônsul. E vamos abrir isso de novo. Atualizá-lo e vemos que quando fazemos log do console, então não temos essa maneira agradável e limpa de atravessar para baixo e ver todas as informações do elemento. Tudo o que recebo é o código-fonte para esse elemento em particular. Então vamos atualizar isso de volta para o diretório, e isso é novamente realmente útil. Se você tiver um monte de nós filhos filhos filhos dentro desta nota principal, você pode percorrer lá para baixo e fazer algumas atualizações e fazer seleções também. E vou mostrar-lhe mais sobre isso nas próximas lições. Mas por enquanto, temos nosso html interno lá. Então mensagem atualizada porque mais uma vez lembrar como estamos rodando através do código. Ele corre da mesma maneira em javascript como ele é executado em HTML, onde estamos indo de cima para baixo. E uma vez que atingimos o nosso javascript por isso é escreve Olá. Ele escreve o corpo do documento. Ele escreve esse elemento, e então aqui é que estamos realmente atualizando a mensagem. Você provavelmente está pensando, OK, bem, isso não faz sentido, porque estamos atualizando a mensagem aqui, mas estamos registrando essa informação aqui, e o que é realmente acontecendo é que javascript realmente faz duas passagens. Eso o 1º 1 é ah passado através de todo o código-fonte, vendo todas as variáveis diferentes e objetos I que estavam interagindo com. E, em seguida, o 2º 1 ele se lembra que fizemos esta atualização e ele atualiza-lo. Lá também. Então, e ele sabe que estamos fazendo uma atualização para este objeto em particular. Então ele sabe escrever essa atualização aqui em vez de passar aquela original. E isso é mais complexo. Esse é um tópico mais complexo dentro do JavaScript. Então também é conhecido como desperdiçar eso. Você tem a capacidade de içar determinados dados na primeira execução que você pode acessar no seu script. Eso de novo. Isso é um JavaScript mais complexo e complexo. Então nós vamos ficar longe das coisas realmente complexas porque este é um curso para iniciantes , e nós vamos apenas manter o básico e apenas Styx para que você entenda que nós somos capazes de executar através do código e atualizar o dentro do objeto de documento. Então essa parte foi muito legal. E novamente, o Dom é super poderoso e novamente tendo em mente que apenas dar-lhe exemplo aqui. Então, se eu fosse mover meu JavaScript para a cabeça apenas para mostrar a vocês o que vai acontecer aqui quando eu recarregá-lo, nós obtemos alguns erros aqui porque nós realmente não carregamos que esses objetos JavaScript do Dom realmente não carregou e não está pronto para ir. Nós pegamos isso primeiro. Olá. Sendo saída lá, mas estamos perdendo o documento. Objeto? Estamos faltando o objeto documento faltando o objeto documento porque eu fiz move-lo para cima . Então é por isso que encomendar e onde você está colocando seu javascript é importante. E novamente, se você está olhando para interagir com o Dom e você não quer lançar quaisquer erros, certifique-se de manter seu JavaScript depois que todos os elementos HTML foram carregados. Então, quando você estiver tentando acessá-los, certifique-se de que eles já foram carregados e, em seguida, você tem acesso total a eles. Então, a próxima lição vamos olhar Atmore sobre como comentar dentro do JavaScript. Então eu sei que fiz isso aqui, e vou falar mais sobre documentar e comentar na próxima lição. 7. 6 comentários de JavaScript: Então eu sei que saltamos direto para o amanhecer e o modelo de objeto do documento e mostrando como podemos interagir com o objeto do documento e atualizar nosso HTML. E isso foi porque o JavaScript é tão super excitante e há tanto poder nisso. Então eu realmente queria apenas ilustrar você o que ele pode fazer e quão poderoso ele pode ser apenas para deixar você ainda mais animado, o que com trabalhar com JavaScript. E eu geralmente acho que quando as pessoas realmente vêem algo mudando em seu site e eles vêem como é fácil fazer, então essa é uma ótima maneira de deixar as pessoas interessadas em aprender mais sobre JavaScript. Então, vamos dar alguns passos para trás e vamos rever alguns dos conceitos básicos de escrever código JavaScript e o que contribui para uma boa documentação dentro do seu código JavaScript? Então notei que aqui quando eu fiz as duas linhas aqui, na verdade não mais o Irã aquele código. Então, isso é o que podemos fazer para comentar dentro do javascript. Eso comentando é usado Teoh basicamente para manter notas. Talvez outro desenvolvedor leia quando estiver passando por seu script ou algo que você queira observar e que você queira lembrar para a próxima vez que estiver atualizando e estiver olhando para o script. E acredite em mim que uma vez que você escrever um grande script, você vai ficar muito feliz que você comentou e que você documentou isso bem porque saltar de volta para o script, é provável que você não se lembre de todas as diferentes se você a colocou em um script muito grande. Então, comentar é muito útil. Então, eu só estou escrevendo aqui. Então introdução aos cônsules. Foi por isso que escrevi isso. Olá lá e eu posso documentar este para que eu possa dizer algo como barra barra barra colocar saída . Eu colocaria o Dom aqui. Posso falar sobre o elemento e assim por diante. Então, o que acontece se você quiser comentar mais do que apenas uma linha? Há uma maneira de fazer isso também. Então isso é um corte e o Astérix. E quando você quiser abrir isso de volta para o código novamente, Slash e Asterix ou eu deveria dizer barra abstrata. Então isso está abrindo, e isso é fechá-lo e então aqui novamente você pode classificar você pode escrever seu código para documentar . E podemos ver que, uh, que eles são inteligentes o suficiente para saber que isso é comentado. Então, meio que lubrifica. Sua eso dentro daqui você pode colocar informações. Então, digamos que, por exemplo, você queira adicionar um recurso, salvar este lugar e ou você estava apenas fazendo algumas anotações sobre, uh, lugar para evento estranho ou algo assim. Assim, quando você está realmente olhando para o seu resfriado ou se você fechar isso em alguns meses mais tarde na linha você abre este arquivo, você pode dizer, OK, bem, bem, é por isso que eu adicionou no espaço ou reservou este espaço ou isso é algo que eu queria adicionar no curso ou no meu script. Então é por isso que eu tenho aquele espaço reservado lá. Portanto, sempre uma boa idéia para fazer muitos comentários e documentação. E, novamente, isso não aparece no seu navegador. Então, quando eu atualizá-lo, ele não renderiza nada disso. Você pode, no entanto, você pode vê-lo dentro dos códigos-fonte de alguém realmente foi para o seu arquivo JavaScript. Eles podem ver todas essas informações, mas eles podem ver todo o código JavaScript s. Então essa é uma das desvantagens do JavaScript é que todos podem realmente ver todo o seu código-fonte, então isso o torna realmente inseguro, é um monte de coisas que você está fazendo no script de trabalho. Certifique-se de que você está sob o entendimento de que, uh, se alguém realmente quiser entrar lá, eles podem ver todo o seu código-fonte. Então, se você tem certas chaves secretas ou qualquer tipo de conteúdo que você deseja manter oculto, certifique-se de que você não está colocando-o dentro do JavaScript. Eu tento fazê-lo dentro da extremidade do servidor do seu aplicativo. Então, na próxima lição vamos falar um pouco mais sobre alertas e colocar conteúdo em nossa página da Web que está chegando na próxima lição. 8. JavaScript interativo de 7 variáveis: nesta lição. Vamos olhar para alertas e caixas de alerta, então estes não são mais muito comuns, mas é importante entender como eles funcionam. Então eles foram originalmente a primeira maneira que muitos desenvolvedores de JavaScript fizeram contato e se comunicaram com seu público. Então alguém para ir a uma página da web e ver esta pequena caixa pop-up acontecendo. Então, esses ar o que é chamado de alerta? Então eu fiz algumas atualizações para o HTML e apenas ir colocar para cima. O JavaScript limpou nosso código anterior. Então estamos prontos para começar a trabalhar com um novo acordo de paz. Então, um alerta muito fácil. É um objeto de novo dentro do dom. Então ele está dentro do objeto windows, então ele pode ser alerta de janela, ou ele pode apenas estar alerta. Então qualquer coisa sem essa extensão de janela é apenas considerado janela para que ele possa fazer um alerta janela ou enfraquecer devido em alerta s uma janela. O objeto da janela é maior do que o amanhecer. Então talvez eu deva passar por isso muito rápido. Então, quando eu ir janelas objeto e eu vou fazer esse alerta para eso o alerta é apenas dizer olá, mundo Vamos voltar para fora, atualizar nossa página e nós vemos que temos Olá, mundo aparece. Então esta é essencialmente aquela caixa de alerta lá Olá mundo e espera que você realmente acerte bem antes de terminar de carregar a página Então nada aconteceu. Não é escrever esse html até que você realmente clique. OK, o fim de renderizar essa página. Assim como no amanhecer, a janela tem um monte de coisas. Então ele tem todos esses objetos que estão contidos dentro dele. E novamente, você tem acesso a tudo isso quando você acessa o objeto de janela. E há realmente muita coisa lá dentro para meio que passar. Mas, curiosamente, vou destacar alguns destes aqui. Então nós temos informação do Dom aqui, e isso é porque a janela é na verdade a coisa toda e o documento do cão está dentro da janela. Então há o dom ou o modelo de objeto de documento, e então isso é a mesma coisa que estamos olhando na última lição. Então eu só quero salientar que há este objeto Windows que é o pai do Dom e lá. Temos as diferentes funções. Eso a função de alerta é a que acabamos de usar eso Vemos lá e vemos que temos alguns outros aqui também. Temos outro chamado confirme eso isto. Funciona semelhante ao alerta. Então eu vou abrir isso e eu vou apenas escrever. Ou talvez eu pudesse fazer um separado. Então comente que um fora e eu uso confirmado e, em seguida, confirme nós vamos dizer botão de pressão. E a razão pela qual estou dizendo para apertar um botão é porque diferente do alerta, vamos ter o botão ok lá para que possamos ficar bem, ou podemos cancelar. É assim que esses são os dois valores diferentes que podemos fazer com a confirmação para que possamos cancelá-lo . Ou quando eu atualizá-lo, nós podemos ficar bem. Então você provavelmente está se perguntando Bem, qual é a diferença? Como posso realmente dizer se o usuário pressionou cancelar ou se ele pressionou ok e há uma maneira de dizer. Então vamos abrir nosso editor e deixe-me apresentá-los às variáveis. As variáveis estão no cerne do que a programação é tudo sobre. Eles permitem que você forneça um dedo do pé do recipiente, mantenha algum tipo de informação. Então isso vai ser assim, talvez eu só vou chamá-lo de BT end. Então a variável vai ser BT n e isso novamente onde o log do console se torna super útil. Porque eu realmente não saberia qual o valor que está contido dentro B t. N é porque eu estou usando isso com o script e a lei console me dá fora de saída. Então não faria sentido que eu colocasse dentro do meu aplicativo Web porque o usuário da Web pode não precisar saber o que, uh o quê? O valor da BT N é onde Como meu eu como desenvolvedor, eu preciso saber qual é o valor disso e como eu posso trabalhar com isso. Vamos voltar ao nosso programa. E agora que fizemos essa atualização, podemos ver que podemos cancelá-la e receber uma falsa, e sermos atingidos, certo? E nós obtemos um verdadeiro Então isso é realmente interessante porque isso nos dá ah valor booleano, então ou um verdadeiro ou falso com o qual podemos trabalhar e assim podemos aplicar condições a ele e construir nosso programa ainda mais então eu não quero saltar muito à frente de nós mesmos. Mas há uma maneira de fazer uso desses valores para que eu possa dizer algo como, se bt n, então eu posso. Ou talvez o que vamos fazer é criar outra variável. Então eu vou manter este como minha variável de saída. Então isso vai ficar em branco por enquanto. E uma vez que alguém atinge o bt n, eu vou atualizar o valor da saída e eu vou dizer confiança botão e eu também quero fazer algo onde eu tenho mais. Então esta é outra parte da condição em que podemos fazer que algo realmente aconteça, ou eu posso fazer outra coisa. - Onde? Botão. Ou talvez só escrevamos, cancelamos e cartas muito grandes. Eles são para que ele é muito visível e, em seguida, na saída ou no log do console em vez de Bt e vamos usar saída. Então vamos ver o que acontece agora. Então, quando eu atualizá-lo e eu apertei OK, vemos que temos botão pressionado e quando eu apertei cancelá-lo. Vemos que temos cancelamento. Então este é o básico de programação que usamos essas variáveis e os valores contidos nessas variáveis para promover nosso script, para aplicar lógica adicional a ele e realmente começar a construir nossas aplicações e perceber que tudo isso está acontecendo em segundo plano. Portanto, o usuário da Web não seria capaz de ver nenhuma dessas informações. Então nós podemos literalmente apenas fazer nosso cônsul toda a janela agora porque nós não estamos fazendo nada agora interagindo com ele. Mas eu prometo que você voltaria para o que olhamos nas lições anteriores sobre o Dom, e vou mostrar a vocês o que podemos fazer e como podemos atualizar o conteúdo nas próximas lições . Então, para este, é apenas importante entender que podemos pegar em informações dos leilões do usuário , e podemos produzir algo diferente, e tudo isso pode ser contido dentro de variáveis. Então, essencialmente, estamos capturando o que o usuário fez em sua ação em uma variável, e então estamos usando mais tarde dentro do código, então estamos acessando ele. As variáveis são apenas usadas como uma forma de conter dois capturados para conter algumas informações que podemos utilizar líder em. Então, só para terminar esta lição, há na verdade um outro tipo de eso que temos alertas. Temos a confirmação e temos mais uma onde podemos fazer um prompt. Então este é outro muito interessante. Então isso vai ser talvez nós apenas chamá-lo de pronto ou algo assim, e a função embutida é pronta para o baile e, em seguida, aqui dentro, quem é você e sempre fechar suas linhas de código com o semi cólon? Então isso é outra coisa que é importante notar com JavaScript notou que toda vez que eu terminar um comando uma linha de código, eu termino com um ponto semi dois pontos. E agora vamos Cônsul sair. Então, o que teríamos de sair se tivermos um aviso? Temos algumas informações mantidas dentro do prompt configurar uma variável. Então você acha que se nós consola desconectado são variáveis que contêm esta informação? Poderíamos ver o que o usuário inseriu? Vamos verificar isto e ver como funciona. Então, primeiro de tudo, vamos passar por isso e então nós temos Quem são você e eu apertei OK, e vemos que mais uma vez nós capturamos essa interação do usuário que as informações do usuário na variável e fomos capazes de produzi-las ou foram capazes de utilizá-lo dentro do nosso script tão realmente poderoso, e esta é realmente a essência do JavaScript. Então, na próxima lição, vamos aprofundar as variáveis, bem como interagir com seu conteúdo HTML. E não seria legal termos essa interação com o usuário? E então talvez pudéssemos colocar algo aqui dentro do nosso HTML. Então vamos tentar isso e ver como isso funciona na próxima lição. 9. Saída de 8 variáveis para HTML: nesta lição, vamos juntar um pouco do que aprendemos nas lições anteriores. Nós também olhamos para variáveis e vimos que podemos manter informações em uma variável. Então, com um formato de string, quando estamos perguntando aqui, vemos que se temos um valor verdadeiro ou falso, ele sai para o nosso falso. Esse é um tipo booleano de varredura booleana variável em Lee tem um ou mais verdadeiro ou falso, então apenas dois valores para um eso booleano. Talvez eu possa comentar isso Então use estão comentando booleano. Verdadeiro ou falso, este vai ser uma string e este pode ser qualquer número de caracteres ou dígitos. Pode ser qualquer coisa. Então, uma corda pode ser literalmente qualquer coisa. E por último, há um outro tipo de variável que eso essencialmente em JavaScript. Há três tipos primários realmente primitivos de tipos de dados. Eso que é touro inclinado, cordas e números. Então números. Então talvez eu possa chamá-lo de variável dormente e números são apenas dígitos, então eles podem ser definidos como valores numéricos. Eles podem ter pontos decimais e assim por diante. Então, esses serão definidos aqui para que possamos fazer algo como 100 enfraquecer o 123 ou algo assim. E, em seguida, se tivermos um valor aqui, podemos produzir esse valor entorpecido aqui no log do console. E você provavelmente está dizendo, espere um minuto, este aqui tem aspas cercadas e se estamos colocando assim para definir um valor aqui, aqui nós tínhamos aspas em torno da string Eso Por que não temos aspas em torno deste e que na resposta é que para números, você realmente não precisa de citações em torno dele. Então número é um formato diferente, um tipo diferente de variável. Então não precisamos de citações em torno disso. E a mesma coisa para o Buda se inclina assim valor boo touro vai chamá-lo e este de novo não precisamos. Não precisamos ter números ao redor ou citar. Nós escrevemos sem as citações em torno dele. E é assim que definimos bilhões para definir números. Então são apenas cordas aqui que precisam desse número que cita em torno dele. Porque se você tiver um monte de cartas lá. Se você fizer algo como Olá mundo Javascript vai totalmente não saber o que fazer com este porque eles vão olhar para ele como esta é outra variável porque nossas variáveis não têm aspas em torno dele. E há certas regras quando se trata de variáveis que quando você está nomeando variáveis que ajudam o JavaScript diferenciado do conteúdo real. E uma dessas regras é que percebemos que há algo em comum com todas as variáveis que definimos que realmente começa com uma letra. Então vamos ah, vamos citar algumas informações aqui e percorrerá as regras para criar uma variável. Então comece com a letra para que não comece com um número. Então não podemos ter algo como um entorpecido porque pense assim, que se JavaScript uma vez que encontrar isso, ele não vai saber o que fazer com ele, porque ele pode pensar que é um número. Mas isso não é um número, e não saberá o que fazer com ele. Então essa é uma das regras. Comece com a carta. A outra regra é que o conteúdo que ele continha dentro deles para notar que somos praticamente capazes de chamá-los do que quisermos. Nós podemos até colocar números lá também, então podemos colocar números lá dentro. Podemos fazer coisas como fazer sinal de dólar, enfraquecer devido no sublinhado. Então tudo isso é válido. Então, dentro do nome dele, podemos usar caracteres. Podemos usar dígitos, podemos usar cifrão. Podemos usar sublinhado, e isso é praticamente tudo. Então não, uh, personagens. Ou talvez eu devesse chamar isso de letras, letras, dígitos, cifrão. E, na verdade, pode nem precisar de cartas. Você pode fazer algo com apenas uma letra. Então? Então uma string um nome de variável pode ser simples como apenas uma letra. Havia um personagem lá. Certifique-se de que começar com a letra para que isso signifique que estamos em ordem alfabética lá. O Eso. Outra coisa é que os nomes podem realmente começar com um cifrão ou eles podem começar com um sublinhado. Então comece com a letra, comece com o cifrão ou comece com um sublinhado. Isso é outra coisa que é importante notar. Ah, muitas vezes você vai ver que dependendo do esquema de nomes, onde chamar essas variáveis algo que apenas faz sentido para o conteúdo que está sendo mantido lá. Outra coisa importante a observar com variáveis é que suas maiúsculas e minúsculas. Então seja e maiúscula. Então este é talvez um bom exemplo. Então minúsculas ser uma maiúscula ser são realmente verdadeiras. Variáveis diferentes. E talvez precisemos colocar mais algumas cartas lá porque não estava aceitando isso como um padrão. Então você não pode simplesmente fazer letras maiúsculas. Você tem que fazer várias letras. Eso sempre mantendo isso em mente também. Mas é sensível a maiúsculas e minúsculas. Então importa. Qual caso você está usando dentro de sua convenção de nomenclatura? E também, por fim, você tem que se certificar de que seu nome nomeie qualquer uma das palavras reservadas para que eu não possa ter um culto variável falso porque novamente, isso vai acabar com tudo. E há uma série de palavras reservadas. Portanto, sempre tenha cuidado quando estiver usando essas variáveis de uma palavra. Então, se eu chamar de falso, eu estou bem. Mas se eu chamar de falso, não estou bem. Portanto, certifique-se de que você está nomeando convenção, não interfere ou não substitui nenhuma das palavras reservadas. Portanto, uma palavra reservada deve ser evitada. Portanto, há as quatro regras básicas de criação de um ar de identificação variável para o seu para o seu JavaScript. Agora, eu prometi que queremos fazer algo um pouco diferente aqui. Vamos combinar algumas das informações que tínhamos na lição anterior . E talvez queiramos transmitir esse conteúdo para o nosso HTML. Então vamos voltar para aqui. Vou dar-lhe um Chuan e fechar que cada um e eu vou dar-lhe um eu d de Eu vou apenas chamar que iria colocar seu salto de volta em nosso JavaScript. E você se lembra como fizemos isso? Onde temos os elementos e fomos capazes de atualizar o HTML interno? Deixe-me mostrar-lhe outro truque dentro do javascript. Agora que introduzimos variáveis, posso definir uma variável. Já posso chamar de saída. Mande colocar aqui fora. Então nós vamos sair, então basta chamá-lo para fora, colocar conteúdo. Então, novamente , pode ser algo longo também. Então, esta variável de conteúdo de saída vai manter o documento onde estamos fazendo get elemento por i d. e, em seguida, lembre-se, temos que selecionar esse nome do elemento. Então isso foi saída. E então é isso. E então o que você acha que vai ficar contido dentro desta variável? Então o que posso fazer é consolar. Log isso para fora. E agora vamos voltar para o nosso navegador. Refresque-o. Então eu sei que nós temos que clicar em um monte de coisas lá, então nós vemos que nós não temos nada definido para imediato porque eu não adicionei nada lá, mas nós temos aquele ar lá. Mas importante notar que nós temos essa informação elemento agora sentado dentro do nome da variável, e agora nós podemos realmente fazer uso dela para que possamos fazer algo assim e depois lembrar, como nós produzimos esse HTML. Você poderia inserir html? Então, agora que este elemento que estava contido como um objeto, estamos usando-o em uma variável. Portanto, o conteúdo de saída agora armazena as mesmas informações contidas no documento. Obter elemento por comer por I d saída, e podemos utilizá-lo de forma muito mais limpa onde podemos usar prompt lá. E agora vamos ver o que acontece. Teste e tudo bem. E boom. Veja, nós temos uma saída de teste. Ainda estavam recebendo esse erro no 11. Ele está tentando fazer o prompt de logoff do console. E isso é porque eu mudei para pedir um. Então foi por isso que estamos lançando esse erro. Então, novamente, saída de teste. Vemos que obtemos a saída. Eles estão entorpecidos, não está definido. Esse é um dos problemas. Quando estou atualizando, atualizando os nomes das variáveis em Eu não estou atualizando-as todas dentro do código-fonte. Estamos recebendo um monte de erros. É de onde vem o ar. Então, novamente, vamos tentar de novo. E agora colocamos um nome lá. Então, quem é você? Atualiza o HTML e vemos isso dentro do nosso cônsul também. Então é assim que podemos começar a tornar nosso código ainda mais interativo. E podemos começar a fazer um monte de coisas realmente legais com JavaScript. E eu vou mostrar coisas ainda mais legais que você pode fazer com JavaScript chegando na próxima lição. 10. 10 operadores aritméticos JavaScript: nesta lição, vamos olhar para trabalhar com variáveis e também operadores. Agora, o que os operadores fazem é que eles realmente nos permitem fazer alguns cálculos ou olhar algumas condições novamente, dependendo de qual é o nosso código e como queremos interagir com esse casaco. Então vamos dar uma olhada. E nós vamos abrir uma caneta de código porque eu quero ter uma maneira de realmente produzir parte desse conteúdo. Uh, eu vou dar-lhe um div. Dê-lhe um I D. de saída e eu quero sair. Coloque um pouco desse conteúdo aqui dentro do meu modo de exibição HTML aqui. Eso vamos salvar isso e depois ir para a nossa área JavaScript. E a coisa realmente legal sobre a caneta código é que você pode realmente ver sempre que você está colocando qualquer coisa lá, ele aparece aqui no lado direito. Então vamos primeiro de tudo, vamos configurar nossa variável de saída. E você se lembra como fazer isso de novo? Que era documentos obter elementos por i d. E quando nós obtemos elemento por i d. Precisamos selecionar esse nome do elemento e você percebe uma ondulação. Às vezes estou usando aspas simples, às vezes divertidas, aspas duplas. Na verdade, não importa. Você pode usar simples ou duplo. Às vezes, é melhor prática usar aspas duplas. Então eu vou usar aspas duplas para este exemplo. Eu posso console logout essa saída lá se eu quisesse, mas e me dando uma mensagem aqui para ver isso. Então eu vou continuar e salvar esse trabalho. Então, agora, se eu for para o cônsul lá, eu vejo que eu tenho essa saída lá. Então, tudo está conectado e pronto para ir. E agora eu poderia apenas fazer ponto de saída html interno e igual. Olá, mundo. Podemos ver que leva oito. Coloque lá. Então, o que está acontecendo dentro da caneta de código? Ele está renderizando o html aqui dentro da área visível. E então é também é ah, em seguida, renderizando o JavaScript e executando esse código, lá está Oh, isso vai ser ideal, na verdade, para tentar fazer isso Ah, um pouco menor aqui, e eu vou mostrar-lhe mais sobre os operadores para que os operadores são tão super úteis. Eso Primeiro de tudo, vamos dar uma olhada rápida e vamos olhar para alguns muito básicos. Então variável a e vamos dar a este um número variável B e dar a este um número também . E nós vamos fazer variável ver igual a mais B. Então o que você acha que se eu fizer variável Ver é minha saída aqui? O que acha que acontece? Então, quando eu guardá-lo ou ele realmente me bater a ele. Ele já tem o 15 lá fora, então vemos que somos capazes de fazer cálculos simples usando JavaScript. Eso Vamos fazer outro aqui para que possamos mudar isso para um sinal de menos. Então acabamos com cinco negativos. Então cinco menos 10 é igual a cinco negativos. Nós também podemos fazer multiplicação eso cinco vezes 10 é 50. Nós canoamos fórmulas ainda mais complexas. Então JavaScript é super inteligente, então podemos dividi-lo por 10 e acabamos com cinco. Então, uma vez B Então é 50 dividido por B é cinco. Podemos adicionar alguns números aqui também, para que ele pudesse fazer 555. Então ele leva isso e faz toda a multiplicação e a adição e, em seguida, divisão. Então, podemos realmente fazer um pouco com todos os diferentes operadores que temos disponíveis. Então estes ar nossos operadores aritméticos. Então é isso que estamos usando aqui? Operadores aritméticos, eso mais divisão de multiplicação menos. Há um outro e este é chamado módulo ISS, então ele lhe dá a saída do restante. Então, se fizermos isso e módulo ISS B, vemos que temos um restante de cinco s, então basicamente ele está fazendo uma divisão e, em seguida, ele está nos dando o restante. Há O. Este também tem alguns usos também. Podemos fazer coisas como dio-c igual a C mais um. Então nós incremental por um s Oh, esta é a forma curta. Em vez de fazer C é igual a C mais um, podemos apenas fazer os dois sinais de mais. A mesma coisa é então estes dois são equivalentes que podemos fazer Ah menos então podemos fazer C menos um. Então você vê que o número muda para seis eso. Estes são todos operadores aritméticos e eles nos dão a capacidade de trabalhar cálculos matemáticos de algas dentro do JavaScript. Então, a próxima lição em que você olha para alguns operadores de comparação e nós fizemos brevemente olhar para as condições e com condições, declarações condicionais que você precisa para ter esses operadores de comparação, e é aqui que há valores booleanos vêm em vigor também. Então, vamos dar uma olhada neles na próxima lição. 11. 11 operadores de JavaScript: nesta lição, vamos olhar para operadores de comparação. Então, o que os operadores de comparação fazem é que nos permitem comparar valores diferentes juntos. Então, se temos um operador de comparação, se temos um e fazemos igual a B, vemos que temos um valor off false. É o nosso primeiro operador de comparação. Mas sabemos que a não é igual para ser assim. Se fizermos um não igual a ser, obtemos um valor de verdadeiro, também podemos fazer um maior do que ser, então vemos que isso é falso porque sabemos que é menor que B. Sabemos que podemos adicionar o igual a também, por isso poderia ser menor que maior do que igual a. E estes são todos operadores de comparação diferentes que usado em uma base regular e notar que a saída é valores booleanos. Portanto, estes transmitem ser valores booleanos só pode ser o verdadeiro ou falso. Então são apenas os dois valores que são retornados e vemos que nós obtemos essas palavras retornados nos. Nós temos A e B. Há também um outro operador de comparação, então vamos fazer variável d e vamos fazer algo como este cinco agora Você acha que A vai ser menor ou igual a profundo e nós apenas dar-lhe um segundo? Diz que é verdade. Então a é igual a eso profundo. Esta é a parte interessante sobre JavaScript é que vemos que mesmo que isso não seja definido como um número e este é definido como um número porque não importa que as duas variáveis tenham tipos diferentes, eles ainda estão equivalente. E isso é porque quando fazemos esse sinal de igual, podemos adicionar em ah, terceiro sinal de igual para testar para ver se o tipo é o mesmo. Então o terceiro sinal de igual está verificando se o tipo é o mesmo. Então, se você quiser ter certeza de que absolutamente a é igual a ser ou a D, então usamos os três sinais de igual para garantir que obtemos esse cheque absoluto dessa saída. Então, em seguida, queremos olhar para outro operador, e este vai ser um formulário muito curto para um operador condicional. Então é outra maneira de verificar se algo é verdadeiro ou falso, e saída de valores vamos fazer variável e carregando uma mudança esta saída toe colocar o valor de comer e vamos igualar e. e este é outro operador. Então isso é conhecido como o operador de atribuição e nós temos usado isso um pouco mais cedo também. Valores de sinal do dedo do pé para diferentes variáveis. Isso é comparação de operadores de atribuição, operador. E agora vamos fazer um operador condicional. Operador condicional Eso nos permite definir um valor para uma determinada variável para que possamos fazer algo onde temos este, uh, colchete arredondado e temos de valores. Então isso pode ser verdade e não realmente verdade, Booleano. Mas podemos fazer algo como onde temos falso também. Eso basicamente o que está acontecendo aqui é se a condição é atendida para que um está disponível, então ele volta verdade. E se o valor de e não estiver lá, então ele volta falso. Se o valor de f vamos ver lutado ou vamos lançar um erro porque não temos um valor para f ainda, se mudamos o valor de B 20 e fazemos um valor de B então estamos avaliando para ver se B está lá e ele contém o valor de zero, então é um valor nulo. Então ele está voltando como falso, e isso também nos dá a oportunidade de introduzir outro tipo de operador. E estes são os operadores condicionais. Eso estes ar usado dentro de declarações condicionais, bem para que possamos fazer e assim enfraquecer fazer se b e A ainda está chegando falso. Então precisamos mudar e para ou assim ser ou a E agora vemos que é verdade porque na verdade existe B não. Então tomou a primeira condição, que é verdade. Eso de novo. Este é um valor de string, então não é bullying. Verdade, é uma corda verdadeira, nós também podemos fazer. Uh, se B não está lá, então ele vai voltar a ser verdade porque B não está lá aqueles ar, os operadores lógicos, eles nos dão a capacidade de verificar se uma certa condição está sendo cumprida. Então temos diferentes opções para fazer essas comparações. Então eu vou voltar, e eu só vou fazer se B e A isso vai voltar falso. E, claro, esta é uma forma curta para declarações condicionais. Eso a coisa boa sobre usá-lo dentro deste tipo de formato é que é É uma maneira rápida e fácil de definir um valor válido para essa variável em particular. Mas se você tem mais código que você precisa executar dentro dessa condição, que é melhor usar uma instrução condicional, então é isso que vamos olhar na próxima lição. 12. 13 Declarações condicionais de JavaScript e declarações de comutação: nesta lição, vamos olhar para declarações condicionais. E essa é a declaração se e brevemente na já uma lição que já fizemos. Olhe para um formulário de pan curto para declaração condicional onde vimos Se esta condição for atendida, então nós fazemos algo, e se não for cumprido, nós fazemos outra coisa. Então nós podemos realmente fazer isso dentro de uma declaração condicional também. E vamos preparar um desses. Então vamos dar uma olhada e talvez criar algumas variáveis. Então eu estou mudando de volta para o editor e eu vou fazer um igual a cinco e variável B é igual a 10. E agora vamos criar uma condição. Então vamos fazer se e se um é talvez igual a ser, então queremos que algo aconteça. Então, primeiro, talvez façamos isso. Eu colocaria Então fazer conteúdo de saída. HTML interno é igual a eles iguais, então vamos, uh, na verdade vamos torná-los iguais. Então A e B são cinco. Vamos abrir nosso navegador, atualizar a página aberta. Precisa ver que agora, Quando atualizá-lo, vemos que eles são iguais porque A e B é igual a cinco eso agora Vamos também fazer algo. Bem, o que acontece se mudarmos de volta para 15 ou algo assim? Então vamos atualizá-lo e vemos que nada recebe saída. E aqui é onde podemos adicionar informações mawr a esta declaração condicional onde podemos fazer outra coisa e então podemos fazer. Talvez produza esse conteúdo novamente. Eles não são iguais. E vamos voltar para o navegador e atualizá-lo, e vemos que eles não são iguais. Se eu atualizar de volta para cinco, vemos que eles são iguais. Então, essencialmente, é assim que as instruções condicionais funcionam que podemos executar. Eu termino. O benefício disso é que podemos realmente executar um monte de código para que possamos console logout e fazer algo como feliz ou algo o que quisermos. Podemos ter um monte de coisas acontecendo aqui dentro dentro desta condição então podemos fazer isso e aquilo não e vamos apenas mostrar-lhe para que possamos executar um monte de linhas, um tribunal terminando sobre o que acontece com a condição e se a condição for cumprida. Então, o que acontece se talvez você quiser fazer uma nova opção adicional lá para que nós temos. Se essa condição for verdadeira, isso acontece e isso acontece. Mas e se quisermos ver outra coisa? Queríamos ver se talvez mais e tínhamos outra opção aqui e fomos outra se e aqui é onde teríamos outra coisa acontecendo dentro de um monte de código aqui. Então talvez aqui possamos produzir e podemos dizer que eles são menos do que um ao outro. Sei que isso provavelmente não faz muito sentido, mas isso só nos dá outra opção aqui. Então, vamos embora. A Se A for menor que B, então teremos isso por vir. Eso Agora vamos atualizar isso para 10 e fazer a é menor que B ou a é menor que B. Então seja assim apenas fazê-lo assim. Que isso colocaria agora vai dizer que a é menor que B. Se a é menor que B e fazer uma atualização rápida aqui, se eles são iguais, ele vai dizer que eles são iguais. E se a e B. B s 15 ou algum outro número que é maior, então a é menor que B, que é verdadeiro novamente Então vamos realmente fazer este olhar eso que essa afirmação não é mais verdadeira e podemos ver que eles não são iguais. Então esse é o padrão. Então, se ele correr através das primeiras 2 condições, essas primeiras 2 condições não são atendidas. Ele só corre o 3º 1 E se você tivesse um monte de coisas que você realmente está olhando? Você pode adicionar em mawr else if declarações, mas você também pode fazer outra coisa, e você pode usar o que é chamado de condição switch uma instrução switch. Isso funciona de forma semelhante à declaração if, mas na verdade limpa as coisas um pouco. Então deixe-me mostrar como isso funciona. Vamos fazer algumas atualizações para este código aqui. Vamos deixar um como cinco, e vamos adicionar em nossa instrução switch, e a instrução switch vai ser baseada na variável a que podemos usar. Podemos usar inteiros ou podemos realmente usar valores de string. Então talvez vamos nos livrar de todo o monte de coisas aqui, e eu vou apenas usar uma declaração switch. Então nós temos nossa instrução switch aqui, e talvez isso não seja cinco, mas é igual a a. Então agora estamos usando isso como a instrução switch, e a primeira coisa que precisamos na instrução switch é um caso, e o caso basicamente verifica o valor de um de A é igual a um do que vamos criar outra variável aqui. Vamos atualizar isso para ser saída e variável B vai ficar em branco. Então vamos definir. Então, se isso é verdade, então B vai ser igual a um waas encontrado e, em seguida, aqui abaixo a parte inferior eu vou fazer saída e, em seguida, HTML interno é igual a B. Então, dessa forma que o que eu fiz aqui é que eu nos dei a capacidade de definir estes vez de ter que fazer essa saída. Inter html Aqui. Toda vez que encontramos um caso, eu posso definir uma variável e eu posso fazer atualizações definir variável e então isso agora vai se tornar uma saída você. Vamos dar uma olhada em como isso funciona dentro do navegador. Então, oito foram encontrados. Vamos abrir isso de novo e fazer outro caso. Então, o que acontece se a for realmente igual a Tiu? Definir eso poderíamos adicionar em outro caso e podemos verificar se é igual a ser, e então podemos fazer B igual a v waas encontrados e assim por diante. Então vamos ver o que acontece agora. Então, refresque-o. Acabamos em branco porque esse valor para B nunca muda porque nenhum desses casos foi atendido. Então este é o lugar onde podemos adicionar em um padrão. Então o padrão será que ele é igual a não encontrado, e vamos salvar isso. E agora vamos ver o que acontece. Então eu o atualizo. Recebo o padrão de não encontrado porque ele passa. Casey não acha que é caso e não corresponde a Z, e então ele só nos mostra o padrão. Ele sobrescreve. Um valor original ser, não é? Talvez possa deixar isso em branco. Então isso agora está apenas nos poupando o problema de realmente fazer esta saída Inter html segurando um muito deixando a variável segurar esse conteúdo de saída que queremos usar. Então vamos mudar de volta para um e eu vou te mostrar uma das coisas que você precisa adicionar no caso porque nós temos um problema aqui mudar de volta para um e agora vamos ver o que acontece. Então acabamos com não encontrado ainda. Então isso é diferente do que estava acontecendo antes. E o que realmente está acontecendo aqui é que nós estamos combinando um e ele não vai ser encontrado. B não foi encontrado, e ele vai voltar para o padrão e não encontrado porque nós não estamos realmente quebrando a instrução switch. Então temos que incluir sempre uma pausa e outra pausa aqui. Então, o que isso faz é essencialmente, se um isse encontrou ele define isso sobre ele, executa este conjunto de código e, em seguida, ele quebra a instrução switch para que ele realmente não acabe no padrão, e nós acabamos com o valor adequado que estamos procurando. Dentro dessa instrução switch, vamos atualizá-lo e vemos um foi encontrado. Então isso funciona. Então, e a coisa boa sobre essas declarações switch é que você pode realmente ter um monte deles. Você pode realmente construir o seu código, você pode fazer um monte de coisas realmente legais, e isso realmente economiza muito tempo sobre a declaração condicional porque nós só temos que realmente ter esta linha de código e nós estamos realmente à procura de uma correspondência. E até encontrarmos essa correspondência, então é nesse momento em que escrevemos aquela nova atualização. Então agora temos o foi encontrado e assim por diante. Então tudo o que ele está fazendo é que ele está procurando o valor de um Então a é o valor de um é D. Ele está indo para a instrução switch e está esperando para ver se o caso corresponde. E se o caso não coincidir como ele faz nesta linha aqui, em seguida, ele define o valor de B para isso e, em seguida, ele quebra a instrução switch para que nós não acabar no padrão. E se nenhum destes ar verdadeiro do que o padrão apenas é executado e ele termina com B igual não encontrado e, em seguida, apenas aqui, nós estamos fora colocando o valor de B para o HTML interno. Então, na próxima lição, vamos olhar para loop em JavaScript, e essa é outra função muito legal dentro do JavaScript Isso vai economizar muito tempo e fornecer um monte de funcionalidade realmente incrível. Então isso está chegando na próxima lição. 13. 15 loops JavaScript: Nesta lição, vamos olhar para o loop. E esta é uma das minhas coisas favoritas sobre JavaScript e muitas linguagens de citação. Usado, looping, loop economiza seu tempo, Vamos dar uma olhada em loop. Então, primeiro de tudo, vamos ser uma variável ou apenas aquele X e vai dar-lhe um valor de 10. E para looping, precisamos realmente definir o ponto de partida. E também precisamos que Teoh defina uma condição para um ponto final. Estes são diferentes tipos de loops que você pode definir. Então este é o loop while, e basicamente ele vai continuar o loop enquanto X é menor que 10. Então, enquanto essa condição é verdadeira, ela vai continuar a fazer o loop. Então, seja qual for a quantidade de tempo que leva no dedo do pé através, ele vai continuar indefinidamente loop através do dedo até que ele finaliza que correr através. Então fora uma e outra vez, eu só vou talvez eu poderia apenas chamar este titular e agora eu vou adicionar a Holder, e eu vou igual holder plus folder e vamos ah, valor de X. E vamos dar X assim um titular igual plus titular e, em seguida, após o loop termina, vamos fazer a saída. HTML interno e vamos colocar o valor do titular dentro desse HTML interno. Então, você pode ver isso aí? Talvez haja algo faltando no nosso ciclo, então vamos dar uma olhada mais de perto. Então estamos definindo um valor extra de 10. Então sabemos que o excesso começando em 10 e estamos fazendo loop enquanto X é menor que 10. Então, agora, como está, nosso código vai continuar toe loop, e não há nada que realmente vai quebrar nosso código porque X sempre será 10. E talvez precisemos de retroceder 21, então agora o X será um. Vai continuar. Toe loop não eram realmente X incremental. Então é isso que precisamos adicionar. Precisamos adicionar de uma maneira para incrementar X e indo todo o caminho de volta para uma das lições anteriores onde podemos incrementar X por um fazendo os dois sinais de mais que abreviação para X é igual X mais um. E isso irá incrementar X por um e eventualmente sair do nosso loop uma vez que ele atinge um valor igual a 10 que a nossa quebra de Lupul. E então vamos ter valor ah para Holder, que podemos realmente produzir dentro desse HTML interno. E eu queria acrescentar mais uma coisa. Eu quero sair em algum HTML lá, então ele produz bom e ordenadamente, então lá vamos nós. Então, um loop e olhamos todo o caminho para nove, lembrando novamente que X começa como um e nós estamos fazendo loop. Continuaremos o loop até que X seja menor que 10. Então eu te disse que foi muito fácil e muito legal que podemos acabar com se você quiser escrever isso 100 vezes, nós poderíamos tão facilmente fazer isso realmente deve ser 100 e um s para que possamos escrever todo o caminho para 100. Então vamos fazer isso e ver o quão rápido ele escreve aquele oito. Então lá vamos nós. 1 a 100 Uh, agora, ele instantaneamente via javascript. Então disse que há outros tipos de loops, então há também um loop do fazer também. Então o princípio do conceito é o mesmo apenas muda a ordem. Então, sempre quando você está criando loops, você tem que pensar que você precisa desses três componentes que você precisa para definir esse valor inicial, e então você precisa ter condição. e, em seguida, você precisa ter Talvez não necessariamente incrementos, mas você precisa ter valor de mudança. Então você precisa ter esse valor mudando constantemente, a fim de eventualmente sair da condição em seguida, terminar o loop. Então vamos vê-lo dar uma olhada em como podemos fazer um loop de fazer. Então, um loop de fazer novamente, Uma idéia muito semelhante ao loop selvagem. Então nós temos que fazer e nós vamos ter X incremental aqui e, em seguida, dentro aqui nós vamos fazer parece muito semelhante e única coisa no final aqui, nós vamos fazer um tempo. Então adicionamos o tempo aqui no final. Então, o tempo é a condição, e alguns desenvolvedores preferem este tipo de saída como polícia a este. Então eu posso realmente comentar este agora e agora vamos dar uma olhada em nossa saída e talvez nós não precisamos ir todo o caminho para 101. Talvez seja um pouco extremo demais. Então atualize a página 1 a 9. A mesma coisa. A saída é a mesma. E este, Mas a diferença entre o tempo e o loop fazer às vezes os desenvolvedores gostam de se separar nessa condição. Eles gostam de mudar o valor e depois gostam de ter o código. Eles estão separados. Então, não há muita diferença. A saída e o resultado são exatamente a mesma coisa. E então há um outro tipo de loop, e este loop é super comum. E, na verdade, minha maneira mais comum que eu costumo fazer loops Eu costumo usar o for loop eso novamente a mesma coisa que precisamos para atender a um monte dessas condições e temos nosso código que corre por lá. E, na verdade, acho que este, às vezes, é um pouco mais limpo. Eso de novo. Estamos fazendo a mesma coisa onde estamos começando com o valor padrão para X, então eu poderia pegar isso aqui. Então, estamos mantendo tudo dentro de uma área. A condição é a próxima. Enquanto X é menor que 10 e, por fim, vamos incrementar X então isso nos dá a habilidade. Teoh, sério. É praticamente auto-contido, muito diferente dos outros lá, e eu não preciso mesmo definir esse valor inicial para X. Vamos dar uma olhada e ver como isso sai. Então, novamente, vemos que é a mesma coisa, mesma saída e apenas feito de uma maneira diferente, onde estamos usando o eso quatro loop dependendo novamente do que suas circunstâncias e como você está colocando seu conteúdo. Você pode escolher um sobre o outro eso na maioria das vezes que você está indo para ver os loops while. E mais comumente, eu diria, são os quatro loops. E é sempre atender a essas três condições que você precisa ter dentro de sua fórmula loop , a fim de fazer isso funcionar corretamente. Na próxima lição, vamos olhar para uma parte super poderosa do JavaScript, e essas são funções, então a programação e as funções andam de mãos dadas e permitem que você construa coisas realmente incríveis . Então esses ar, o que vamos estar olhando na próxima lição são funções 14. 17 Introdução ao JavaScript às funções: Nesta lição, vamos olhar para um dos meus favoritos, e isso são funções. Funções essencialmente dão a você a capacidade de criar alguns trechos de código reutilizáveis que você pode facilmente chamar tanto como o que fizemos com as variáveis onde tivemos manter um valor funções pode ser pensado como uma maneira de manter mais do que apenas um valor mas um conjunto de tribunal. Então, primeiro de tudo, defina uma função. Então esta é a minha diversão, e é assim que criamos uma função básica. Então agora criamos uma função chamada minha diversão. E então dentro dessa função, sempre que queremos chamá-la, nós simplesmente colocamos aqui para que possamos chamar a função. Podemos chamá-lo várias vezes, se quisermos. E talvez por enquanto, nós somos apenas, uh, função de saída do console. Corra. Vamos ver o nosso navegador, ver o que acontece. Então, refresque-o. Vemos que executamos a função uma vez, executamos a função novamente. Então eu vejo que nossa função executar seu log de console ainda está sendo executado on-line. Quatro dentro do nosso código aqui porque estamos apenas chamando sobre a função maneira tão rápida e fácil de criar um código reutilizável, e nós realmente já vimos funções quando vimos alertas. Formato é o mesmo, e esses ar apenas construído em funções dentro do JavaScript dentro dessa janela. Objeto. Lembre-se, quando estamos olhando para alertas, mesmo formato que o meu fundo e apenas uma maneira rápida e fácil de criar algum tribunal reutilizável? Há muita coisa que você pode realmente fazer com funções. E há também argumentos que você pode passar dentro de funções também. Então, digamos, por exemplo, que eu queria passar um argumento de um e, em seguida, este waas oi. E então este era o mundo. Então nós realmente os diferenciamos. E vamos, uh, como é que isso aqui? Então, o que acha que vai acontecer agora? Estamos executando a mesma função duas vezes, mas estamos enviando parâmetros diferentes. Diferentes argumentos para essa função e, em seguida, dentro dessa função estavam realmente tomando esse valor que foi passado dentro do argumento. E estamos a fazer alguma coisa com ele. Então vamos ver como isso parece. Então vemos que a primeira função é executada e obtemos função executar. Olá função, mundo executado. Então o que aconteceu aqui é que esse argumento realmente passou, ele foi definido como o valor para oito, e então nós fomos capazes de produzir. Vou colocar um dentro do nosso JavaScript, dar uma olhada mais de perto nas funções, passando valores e assim por diante. Então também podemos fazer algo onde temos o que é chamado de retorno. Então talvez nós queremos retornar esse valor de volta para a função inicial. E talvez o que queremos fazer aqui é que queremos definir outro valor detentor outra variável para holder. E agora o que queremos fazer é que queremos executar o titular e queremos fazer Holder é igual a titular, mais essa função e fazemos o mesmo aqui e vamos colocar o valor do titular lá. Então vamos ver o que acontece agora. Então vemos que temos a função de saída executar, função Olá, mundo de execução. E o que está acontecendo agora é que na verdade esta função está realmente retornando de valor , e o valor que está retornando está sendo escrito aqui. Então agora temos a capacidade de tomar uma variável ou parâmetro passando-o para a função, fazendo uso dela dentro de nossa função e, em seguida, retorná-lo. E a beleza disso é que podemos passar vários argumentos em nós podemos passar, um olhos inteiros enfraquecer gambá como boliche. Então agora temos um mais B e talvez, vamos apenas ser incrementos estarão dentro da função e farão função B mais? Vamos ver o que acontece agora e talvez definamos que ambos sejam iguais. E também devemos adicionar algum HTML. Então, apenas uma quebra de linha lá no final. Então parece mais limpo para que você possa ler melhor. Vamos atualizar isso e temos seis funções executadas. Olá seis função executar. Olá. Então o que está acontecendo aqui é que toda vez que estamos passando cinco, é tomando o ser a variável B está tomando esse valor de cinco foram incrementais nele e então nós estamos retornando que ficar como um valor de cinco. Mas o que acontece se eu quiser usar o X? Então eu fiquei animado aqui, então eu vou incrementar ex toda vez que a função é executada e em vez de retornar ser, vamos retornar fax em vez de análise. Vá dar uma olhada nisso e veja o que acontece. Então lembre-se excesso Começando como um, nós executamos os incrementos de função X para dois retorna Este valor de bat o valor de cadeia de volta para essa linha inicial Um código que chamou isso e, em seguida, acidente com o titular. E então ele executa de novo. Adiciona com Holder. E é aí que estamos recebendo toda essa saída entrando em jogo. Então eu sei o que você está pensando. Você provavelmente está pensando, bem, se eu tiver uma variável A e eu disser “olá “ou algo assim? Ou talvez não Olá, mas um novo valor. Então agora eu tenho uma variável a aqui. Eu tenho uma variável a aqui, e eu estou retornando uma variável a aqui. Então o que você acha que vai acontecer aqui porque a variável A que estamos usando dentro da função em Li vive dentro dessa função. Então variáveis que são definidas dentro da função. Então, se eu fosse definir uma variável ver e eu lhe dei um valor aqui, então defina um valor de teste e então eu vou até aqui e eu quero saída esse valor de C. Então talvez possamos fazer mais C ou algo assim. Então isso realmente vai lançar um erro porque esse valor de C é indefinido porque esse valor de C foi definido dentro da função, então ele está apenas sentado localmente dentro dessa função. Então, para resumir tudo isso, nós realmente temos diferentes escopos. Então temos o que é chamado de escopo global, e então temos a escola local. Portanto, qualquer coisa definida fora da função está contida dentro do escopo global porque temos acesso a ele dentro da função. Temos acesso a ele fora da função, mas qualquer coisa localmente dentro dessa função é auto-contido. A menos que estejamos retornando como um valor e, em seguida, pegá-lo no processo de retorno, então essa é a única maneira que nós somos realmente capazes de obter cálculos e atualizações desses valores de volta para fora para o espaço global fora do espaço local fora de a função. Então, na maior parte, se você quiser usar variáveis, use variáveis que são específicas dentro da função. Certifique-se de que você não está usando variáveis que são definidas como variáveis globais, porque dentro da função eles só estarão disponíveis dentro dessa função, e eles não serão tomados esses valores do global. Mas se você quiser usar uma variável global, então, para esta instância, se eu quisesse usar um dentro da função realmente não tem acesso a este valor de um porque eu estou redefinindo o valor de um dentro do meu argumento. Uma das coisas que eu queria anotar dentro desta função. Então, e se eu tiver algo como, veja, e eu realmente não estou passando? Talvez este, eu passe um valor de C. Então, basta colocar 100. Mas neste, não vou passar. Vês? Então o que você acha que vai acontecer aqui quando ele tentar executar esta função? Está tudo bem. Tem os três parâmetros lá. Três parâmetros aqui, tudo está bem. Podemos pegá-lo, podemos usá-lo. Mas quando se trata deste, só temos dois. Então nós temos um A e A B e C realmente não obtém um valor. Então, na verdade, estamos correndo para um problema aqui porque não vamos ser capazes ver um valor para C. Então, mesmo que ele vai ser executado até que nós realmente tentar usar See, nós não vamos correr para nenhum erro. Mas é sempre uma boa idéia que se você quiser fazer uso de todos esses argumentos e eu não sei de onde isso veio, mas isso definitivamente não deve dizer caso eso se quisermos fazer uso dele dentro do script agora, vamos jogar no erro porque estamos ficando indefinidos. Não está sendo definido dentro da nossa função. Então podemos fazer algo fácil onde podemos fazer algo assim ou apenas colocar um E agora, quando executá-lo, vemos que se não estamos passando esse argumento por padrão, ele obtém um valor de qualquer e, portanto, podemos usá-lo dentro da nossa função, até mesmo devolvê-lo se nós não estamos realmente passando como um argumento em primeiro lugar. Então eu sei que há um pouco de informação que nós cobrimos aqui dentro de funções , e é super útil para, a fim de entender como as funções funcionam. Então você pode simplesmente executar esse trecho de código. Você pode retornar código, você pode fazer ambos s Oh, isso é tudo dependente do que você quer fazer com esta função, e às vezes essas funções podem realmente ficar bastante complexas. E lembre-se que existem diferentes variáveis, variáveis fora da função, variáveis dentro da função, e elas serão tratadas de forma diferente e a função é auto-contida. Eso novamente levar algum tempo, brincar com funções, obter, conhecer funções e obter funções mais familiares, porque eles são parte importante da codificação e JavaScript. Quando você tem funções incorporadas, vai fazer o seu JavaScript funcionar muito mais suave. E você vai ser capaz de aplicar um monte de lógica mawr muito facilmente e executar snippets um código muito facilmente usando funções. Então, na próxima lição vamos olhar mais fundo sobre o que podemos fazer com JavaScript, e vamos saltar de volta para o que o dom faz e olhar para as interações que podemos pegar do usuário da Web. Então, quando alguém está chegando ao seu site interagindo com seu conteúdo, você pode escolher essas dicas em JavaScript e tornar seu conteúdo interativo. E como podemos ver, já podemos fazer uma dinâmica. Bem, uma vez que combinamos tudo isso, cria uma experiência de usuário incrível. Então tudo isso está chegando na próxima lição. 15. 19 Tornando sua página HTML interativa e dinâmica com JavaScript: Ok, eu sei que eu já disse isso antes, mas eu tenho algumas partes favoritas para JavaScript, e uma delas são as interações. Assim, quando você pode criar interações para usuários da Web, você realmente enriquece a experiência do usuário da Web. Então, esta lição vamos mostrar-lhe como você pode criar essas interações com os usuários da Web , realizando suas ações que eles estão fazendo em seu aplicativo Web e fazendo algo com eles. Então eu tenho que eu d saída aqui. Eu adicionei em Olá mundo. Há que realmente podemos ver algum conteúdo lá dentro. E eu defini essa saída variável igual ao documento get elemento por E di i d saída. Então, basicamente, saída ainda está segurando o conteúdo deste objeto elemento. E tudo o que estamos vendo aqui dentro desta saída é que olá, mundo. Então, não seria bom se pudéssemos clicar em Olá, mundo e realmente acontecer alguma coisa? E isso é o que pode ser feito com javascript e o amanhecer. Então já vimos isso dentro do dom. Temos uma tonelada de coisas que podemos ver dentro desses elementos, e vemos que temos esses ouvintes de eventos. Nós temos propriedades e vamos para a propriedade e fora de qualquer elemento que temos em Click on Change e em Borrão e todo o grupo desses ouvintes de eventos que estão disponíveis. Então eu só vou voltar aqui porque eu sei que isso está aparecendo bastante grande, tenho que ampliar. Então não quero confundir tudo com isso. Mas vamos voltar a pegar esse elemento e torná-lo clicável. Então isso vai ser surpreendentemente super fácil. E vamos, uh, vamos montar uma função. Então já vimos durar menos do que como podemos ter uma função. E então vamos chamá-lo de My Eve e, em seguida, dentro desta função irá console logouts. Uau, porque realmente, uma vez que você veja o quão fácil isso vai dizer, Uau, então agora nós precisamos ter algo para acionar essa função. Então vimos antes que tínhamos uma função que poderíamos fazer algo assim, poderíamos executar a função e assim por diante. Então vamos dar um passo adiante e criar usar esse objeto oito put e colocar um ouvinte de evento lá. Assim como fizemos quando vimos que ia voltar rapidamente para aqui. E eu sei que isso é bastante grande e distorcido aqui, mas isso está sob propriedades de elementos dentro do navegador cromado. E vemos que temos isso no objeto clique e assim como estávamos acessando que HTML interno estavam fazendo exatamente a mesma coisa para o clique. Então estamos simplesmente fazendo o clique aqui. E agora precisamos ter algo que dispare quando esse evento é clicado. Então não estamos igualando a saída como fizemos com o HTML, mas em vez disso estamos igualando a ah, função. Então nós queremos disparar a minha véspera e notar que eu não tenho que incluir esses colchetes arredondados . Então vou colocar minha véspera lá. Vamos voltar aqui, atualizar a página e agora assistir isso dentro do console. Muito legal, certo? Eu posso continuar clicando nele e ele tem aquele ouvinte de eventos lá. E sempre que eu estou clicando nele, eu estou fora colocando enquanto dentro do console. Então, basicamente, isso significa que uau, nós podemos realmente fazer algumas coisas muito legais dentro do nosso JavaScript. Então vamos fazer ah combinação de algumas coisas aqui tão variável e vamos definir X como um Toda vez que ele é clicado, vai incrementos X. E agora vamos colocar algum conteúdo Então nós temos colocar em seu html e vamos fazer rápido e vamos adicionar X a isso e ver o que acontece. Então, o que acha que vai acontecer aqui? Toda vez que clicarmos nesse elemento específico em nossa página da web, vamos disparar o ouvinte de eventos on click e vamos disparar essa função. Esta função vai incrementar X onde definimos seu valor inicial como um. Nós ainda vamos ter este registro de console, porque definitivamente nós não queremos nos livrar disso porque nós queremos ver esse wow aparecendo todas as vezes. E aqui eu peguei o mesmo objeto inicial que eu tinha aqui e fiz o que fizemos antes. Eu guiei inter html e coloquei uma mensagem lá dentro. Então vamos verificar isso. Então eu clique nele clique para clicar três clique chão, clique cinco cliques seis, clique sete, clique 10 11 e salão. É uma taxa muito legal porque agora o usuário da Web pode interagir totalmente com seu conteúdo e seu conteúdo é realmente dinâmico, dependendo se o usuário está interagindo com ele. Algo está acontecendo e algo está mudando. E isso é o que realmente está no coração do JavaScript fazendo as coisas acontecerem e tornando essas interações perfeitas e surpreendentes para os usuários da Web quando eles entram e interagem com seu conteúdo e algo acontecer para eles. E vimos o quão fácil e simples é fazer com apenas algumas linhas de frio, podemos criar algumas interações muito legais. E à medida que misturamos coisas que aprendemos nas lições anteriores, temos um monte de funcionalidades que podemos produzir aqui e podemos fazer. Podemos até fazer coisas como incluir os loops lá. Podemos incluir condições adicionais para que possamos dizer algo como se X é igual a então se X é. Ou talvez se X for maior que cinco. E aqui temos variável e mensagem é igual a clique. Então vamos apenas fazer este, também, como uma parte dinâmica da saída e capitão comer juntos, livrar-se disso. E agora quando X é maior que cinco, então vamos colocar nossa mensagem enquanto aqui. Uau, muitos cliques e salão. E agora vamos ver o que acontece quando os usuários vêm. Eles estão interagindo, clique para clicar três, clique quatro, clique cinco e agora uau! Muitos cliques. Número 6789 10 E talvez até aqui. Podemos ter algo mais acontecendo aqui para que possamos ter se, se for maior que cinco e X é menor que 10 que vamos para essa mensagem. Mas se X for 11 ou maior que 11, pare de clicar em mim. Não, temos todos os tipos de interações, e isso é o que realmente os usuários adoram. Eles adoram se envolver com conteúdo. Eles adoram ver coisas acontecendo, coisas mudando e realmente a página da Web respondendo às suas interações. Agora, é claro, você pode realmente começar a construir isso e criar algumas interações realmente legais para usuários da Web . Então nós também temos Não só temos este tipo de funcionalidade, enfraquecer fazer algumas outras coisas também dentro desses ouvintes eventos. Então não há apenas os cliques. Então, se você se lembra, quando olhamos para o amanhecer, então voltando para os elementos, entramos no corpo aqui e vimos que não tínhamos apenas no clique. Temos um monte de diferentes. Então vamos dar uma olhada naqueles na próxima lição vai dar uma olhada neles e vamos ver quais outros podemos aplicar. Então nós temos aqueles aqui onde temos boca silenciosa mouse sobre eso. Talvez queiramos fazer esse incremento com o mouse sobre, então vamos dar uma olhada nisso na próxima lição. 16. 20 ouvintes de eventos JavaScript: na última lição, analisamos os cliques e como podemos fazer as coisas acontecerem com um clique. Então, vamos ainda mais longe. E em vez de um clique, vamos levar o outro objeto lá. Então voltando para os elementos e vimos dentro de cada elemento que temos todos esses outros. Então este é outro puro no mouse sobre eso este aqui. O que é isto? Café? Aquele e passo no clique. Vamos fazer sobre nós e ficamos na minha véspera. Vamos fazer a minha Eve. Então feche isso. E talvez a mensagem aqui esteja fora da minha Helen. Então saia dos meus elementos. Sempre que o usuário está sobre ele, ele vai dizer: “ Saia do meu elemento. Vamos refrescá-lo e realmente jogar um ar lá. Então meu IVE não está definido porque, é claro, eu não defini, então ele voltou para isso. Refresque-o, e agora sempre que estamos em cima dele, vemos isso sair do meu elemento. Ainda estamos tendo esses incrementos. Pare de clicar em mim, atualize-o, saia do meu elemento. Então, há um monte de coisas realmente legais acontecendo aqui, e nós temos uma grande variedade de diferentes ouvintes de eventos que podemos escolher também. Portanto, há também outra maneira de adicionar ouvintes de eventos em seu em seus elementos. Então vou dar outra olhada nos ouvintes de eventos. E assim, desta forma vimos que podemos fazer isso em cliques no mouse overs e indo no mesmo tipo de formato. Então eu vou fazer outro aqui vestindo e usar o mesmo objeto de saída. Mas nós vamos usar a função incorporada chamada ouvinte de evento de anúncio, e este cara também nos dá a capacidade de adicionar um ouvinte de eventos assim adicionado em Click. E então aqui podemos disparar uma função. Então o meu IVE é a função que queremos disparar. Então eu posso apenas comentar esta, e eu sei que esta é meio irritante, então apenas comente essa também. Volte e atualize-o, e vemos que esta é outra maneira de adicionar um ouvinte de eventos. Eso estes ar duas maneiras diferentes de adicionar ouvintes de eventos, ea diferença aqui é quando adicionamos ouvintes de eventos dentro deste tipo de formato, podemos adicionar vários eventos para o mesmo elemento sem substituir eventos existentes e, em seguida, em ao mesmo tempo, bem como estamos adicionando ouvintes de eventos, também temos a capacidade de remover ouvintes de eventos. Então, um banco que basicamente isso nos dá ainda mais controle. Então, temos outra opção aqui onde podemos, em vez de adicionar ouvinte de eventos, podemos remover que esse ouvinte e na função clique. Então, basicamente, isso vai remover esse ouvinte de eventos. Então agora estamos adicionando. Agora vamos removê-lo. Eso nos dá mais controle, enquanto aqui, se estamos definindo um clique no botão, não temos como realmente remover esse ouvinte de eventos para mais controle. Se estamos usando as funções integradas dentro do JavaScript, a fim de controlar nossos ouvintes de eventos e essencialmente todas as coisas que você pode fazer aqui você pode fazer aqui uma ondulação. Então você só tem eles diferentes. Então você não está usando o em você está apenas usando o mouse sobre o movimento do mouse e assim por diante. Em vez de clique, podemos estranhar mais movimento e assim por diante. Então, nas lições anteriores, passamos por um monte de coisas realmente legais que você pode fazer com JavaScript e na próxima lição. Vamos apenas olhar para outras maneiras de conter e reter dados, como um raise e objetos. Então temos trabalhado com objetos porque isso é realmente um objeto, então não é apenas uma variável, então não é apenas um pedaço de conteúdo. Isso é um objeto. Então vamos ver como os objetos funcionam e como um aumento funciona na próxima lição. 17. 22 matrizes de JavaScript: nesta lição. Eu quero olhar para outro contêiner toe hold valor dentro JavaScript. Então, anteriormente nós tínhamos olhado para variáveis onde nós temos cordas, nós entramos em jurados, nós temos valores booleanos. É outra maneira de manter valores. E desta forma, podemos realmente manter vários valores é usar uma variável de matriz minha matriz. Então, novamente, parece da mesma maneira que fazemos nossas variáveis normais onde nós definimos de valor aqui. Mas precisamos definir que nós Então temos duas maneiras diferentes de configurar um aumento onde podemos definir um novo array e, em seguida, dentro daqui, podemos definir todas as informações do objeto de taxa. Então muito três e assim por diante. Ou podemos fazer variável minha matriz. E podemos simplesmente fazer os colchetes. E podemos ter todo esse conteúdo aqui contido aqui dentro também. Então, duas maneiras diferentes de criar um aumento e voltamos para cá. Então, realmente não importa para que lado estamos montando os raios. Obtemos os mesmos elementos e a mesma estrutura. Então, na maioria das vezes você vai ver que dentro do JavaScript, maioria das pessoas está usando meu Arabi este tipo de formato porque é o caminho literal e é rápido e fácil e mais legível. Então vamos ficar com este por enquanto. E agora o quê? O que acontece se você realmente quiser colocar parte desse conteúdo da corrida novamente? Vamos usar esse HTML interno. Foi ótimo para se familiarizar com o trabalho com o amanhecer e queremos. Vemos que dentro desta matriz nós realmente temos três itens aqui dentro da matriz e com um aumento. É importante notar que eles começam com zero. Então, se olharmos para o primeiro item na matriz que selecionamos como zero. Então, agora, quando voltarmos e o atualizarmos, pegamos o primeiro item do estupro. E isso é outra coisa. Esse registro de console é super útil para, porque se eu quiser ver como meu Henry realmente se parece, eu posso conectá-lo e eu posso ver a estrutura da taxa. Então eu vejo que o primeiro item é um segundo item para terceiro item três. Agora vamos ver, queremos fazer uma atualização para sua taxa dentro do JavaScript. Há várias maneiras diferentes de fazer isso. Podemos definir valores diferentes, bem como em diferentes tipos de quatro meses. Então eu poderia fazer algo em que se eu quisesse atualizar o item número zero e eu quiser configurar dois novos valores, vamos voltar, atualizá-lo, ver o que acontece. Então agora temos esse novo valor dentro de seu raio eso que vemos aqui dentro desse objeto de matriz que o valor mudou. Esta é uma maneira que você pode atualizar os valores dentro da matriz e outra coisa a observar dentro de um raise para que pudéssemos tomar valores de string. Podemos pegar uma série de valores e podemos levar valentões também. Então, tudo isso está disponível dentro da taxa, bem, tão importante notar que existem alguns métodos diferentes que podemos usar dentro para obter mais informações sobre um aumento eso se quisermos, por exemplo, queremos saber quanto tempo são as matrizes. Podemos usar o comprimento. Por isso, reparem que aqui temos dentro do raio deles. Temos todos os itens. Mas também temos um objeto aqui chamado comprimento e isso é tudo o que vamos usar para obter o comprimento real da teoria. Então, às vezes, é útil saber quantos itens você tem em sua raça. Vemos cinco novamente, começando em zero. Então isso é sempre algo para ter em mente que sempre começa. No zero. Podemos adicionar itens na corrida de quem quer adicionar um item no próximo slot disponível dentro da matriz, tomamos esse nome do Ari usamos função push. E então aqui é onde nós colocaríamos como isso voltou para fora. E agora podemos ver que dentro da matriz temos realmente seis itens agora. Nós adicionamos isso lá no final. Então você vê, nosso valor aqui subiu para seis, e com os Raios, há um monte de coisas diferentes que você pode fazer com um aumento. Então vimos como podemos adicionar coisas. Também podemos retirar do arsenal. Digamos, por exemplo, por exemplo,que adicionamos isso e agora queremos nos livrar dele. Então tudo o que temos que fazer é fazer um ray pop, e isso irá remover automaticamente o último do Ari. Então agora estamos de volta ao que começamos dentro da matriz. E há um monte de métodos diferentes que você pode utilizar dentro da preocupação. Eso você pode realmente puxar para fora esse valor uma ondulação. Vimos como podemos empurrar valores para a taxa que podemos. Além disso, retiro o primeiro e podemos mudar o estupro. Então vamos mostrar-lhe essa também. Então, novamente, é apenas dar o nome de sua taxa, o valor lá e, em seguida, a basicamente a função que queremos. Nós queremos fugir. Então, se mudarmos isso e talvez consolar log que ary novamente aqui no final. Então, vamos refrescar. E agora temos eso. Agora vemos que o raio mudou, então tiramos o primeiro item. Então o que foi um usando o turno e nós também tiramos o último usando o método pop se quisermos adicionar um item. Então vimos como podemos empurrar o item para sua taxa, então há outra maneira de fazer isso também. Então, porque podemos remover o 1º 1, também podemos adicionar e item lá na frente daquele 1º 1 para que pudéssemos fazer um unsheathed. E vamos refrescar isso de novo. Então, agora, quando não peneiramos, adicionamos um item. Então nós removemos com uma mudança e nós não peneiramos e nós fomos capazes de adicionar isso de volta em Então novamente , um monte de coisas que você pode fazer com um aumento. Nós também pode excluir certos valores para que possamos excluir elementos S então, se você quiser excluir um elementos específicos, enfraquecer, enfraquecer, fazer excluir e um raio e, em seguida, nós só precisamos especificar qual item de índice ele quer remover para fora. Então, queremos remover o que estiver em posição para, então é atualizar isso novamente. Então, agora nós removemos. Então nós temos adicionado isso para Então nós removemos este valor porque era o segundo item aqui dentro da taxa. Então removemos essa nota e eso. Essa é outra maneira que podemos escolher itens diferentes . Podemos remover elementos também com este lugar. Então eu sei que há um monte de comandos aqui que estamos fazendo um monte de métodos diferentes . Eso é importante para se familiarizar com facilidade porque um aumento ou realmente, eles têm um monte de poder dentro JavaScript. Então é muita coisa que você pode fazer com a corrida. Então, vamos tentar este. Então array e splits e o que é lugar faz é que nos permite selecionar o elemento que queremos remover e, em seguida, quantos elementos queremos remover. Então, digamos, por exemplo, que eu queira remover o primeiro item e quero remover apenas o primeiro item. Então vai ser 01 E novamente, acho que vamos imprimir um estupro para não perdermos o controle. Então, novamente, somos capazes de remover o 1º 1 Podemos atualizar esses parâmetros também, que possamos remover dois itens se quisermos, então apenas fique de olho nisso. Então nós removemos, adicionamos isso, e lembramos que adicionamos e removemos itens. Então, tudo isso é apenas trabalhar com esses arrays e manipulá-los. Então você viu como podemos remover para começar no Índice um foram capazes de remover dois itens fora da área. Nós também podemos, uh , praticamente tudo o que podemos tirar. Nós podemos realmente fazer o oposto, bem como, então nós podemos realmente apimentar na matriz. Então, se especificarmos isso, queremos começar em zero, e se realmente não queremos remover nenhum elemento, temos a capacidade de adicioná-los usando divisões também. Então vamos começar na posição um desta vez, e agora vamos especificar um e dois. E agora vamos ver como nossa matriz se parece. Bar Array agora tem um e dois porque nós adicionamos na primeira posição e começando em e nós não estamos removendo nenhum, então nós temos um zero lá. Se tivéssemos um dois, haveria remoção de dois e adição em e assim por diante. Então, muita coisa que você pode fazer. Mais uma vez. Ele pode ficar bastante complexo com o aumento, mas isso só mostra que há muito que você pode fazer com os raios. E uma vez que você tem aqui seus valores sentados dentro de uma matriz, então você pode trabalhar com esses valores muito mais facilmente, e ele abre a porta para mais possibilidades. O que você poderia fazer com seus dados. Então, falando de dados e maneiras de manter vários valores dentro de uma variável, vamos dar uma olhada em objetos, e isso está chegando na próxima lição. 18. 24 objetos JavaScript explicados: na última lição. Vimos coisas muito legais que podemos fazer com os Raios quando mantemos vários valores dentro de uma variável. Isso nos dá um monte de possibilidades, e a mesma coisa vale para objetos. Então vamos configurar um objeto. Parece da mesma forma que V.A.R V.A.R é como nós o definimos, e nós vamos apenas dar-lhe um valor aqui de um objeto e objetos vêm valores prejudicados . Então, basicamente, isso significa que temos um nome para cada item dentro. Então vamos chamá-lo de nome e é um valor emparelhado. Temos um nome e, em seguida, temos um valor de propriedade. Então, essencialmente, este é o nome da propriedade, e então temos um valor para a propriedade. Então vamos colocar um valor lá e assim como um aumento, podemos manter vários valores. Então vamos envelhecer. Então, novamente, podemos fazê-lo da mesma maneira que fizemos com variáveis, inteiros e por último, vamos fazer favorito e apenas mais um aqui, Então javascript eso isso é essencialmente um objeto, e agora temos todo o conteúdo de o objeto e vamos produzir que primeiro no consulado porque eu gosto da maneira que o console realmente exibe as informações do objeto . Vamos fazer o meu objecto. Guarde isso. Volte para o navegador aqui e podemos ver que o objeto é realmente agradável e bem exibido aqui. E agora temos acesso a toda essa informação contida no objeto e percebemos que ela se parece muito parecida com o quê? O objeto Dom da mesma maneira onde temos um monte de nomes aqui e temos acesso a eles e podemos obter acesso a eles dentro do mesmo formato como estávamos chamando esses valores para que possamos fazer algo onde temos os nomes de objetos. Este é o nome do objeto e real já o tem aqui. E então poderíamos selecionar qualquer um desses valores aqui. Então este é o nome da propriedade. Então podemos fazer algo como meu nome de objeto. E em vez de apenas retirar tudo isso, vamos nos concentrar em uma determinada informação contida no objeto. E nós poderíamos apenas colocá-lo lá apenas como um valor de string. Na verdade, há maneiras diferentes que você pode produzir conteúdo dentro como objetos. Você também poderia colchetes e, em seguida, nós só precisamos especificar o nome da propriedade. Então precisamos citar por aí e há ah, Riel. Razão para fazer assim. E eu vou te mostrar isso também. Então, quando eu atualizá-lo, vemos que ele sai da mesma coisa. Mas o que acontece ? Se eu tivesse em meu objeto, eu tinha um. E vamos apenas dar isso e então eu tenho um para e vamos apenas fazer mais um então um três. Então cite três. E aqui dentro do console eso temos os objetos e temos o nome escrito assim para que possamos fazê-lo assim e podemos obter o nome um. Podemos fazer assim e arranjar-me um. Na verdade, deve ser só um. Volte e faça essa correção. E vamos dar uma olhada nisso e ver o que isso vem à tona. Então eu tenho o nome um e o nome um. Então, quais são as coisas aqui? E vamos apenas fazer um desses quatro loops E aqui é onde o loop for podemos ver algumas das coisas realmente legais que podemos fazer com o loop for. Então novamente, lembre-se, com o loop quatro, temos que dar X iguais a valores. Vamos manter o X em um, e vamos fazê-lo enquanto X é menor que três. E vamos incrementar supera X e vamos incrementar X em vez de um. Vamos apenas adicionar X a isso e ver o que acontece agora. Então, vamos refrescá-lo. E vemos que temos um nome, também. E nós realmente precisamos fazer mais um aqui. Então, enquanto X é menor que quatro eso nome um nome para nomear três. Então você vê, o que aconteceu aqui é que nós fizemos essa dinâmica. Então nosso objeto, nós podemos realmente percorrer através dele dependendo do que demos o nome da propriedade. Podemos torná-lo dinâmico, tendo-o dentro desses colchetes. E isso é algo que não podemos fazer aqui porque não podemos ter esse valor de um. Não podemos fazer um X mais e fazer um loop através dele. Isso não faria nenhum sentido. Eso aqui É um nome estático que estamos usando dentro deste tipo de formato. Mas usando esses suportes quadrados e inventar em comê-lo junto com o mais morto. Isso nos dá estabilidade no dedo do pé através e obter um monte de informações sobre objetos. Então vamos apenas registrar isso aqui e vamos dar uma olhada mais de perto em como isso parece. Então, dentro do objeto. Nós temos um um um dois, um três, e agora nós estamos apenas looping através deles e fora colocá-los aqui. E estamos a percorrer todos os nomes de propriedades diferentes. E novamente, dependendo do que você está usando e do que você precisa. E dentro do seu roteiro a maior parte do tempo. A melhor maneira de você utilizar objetos é a maneira que temos feito isso. Então você tem o nome do objeto e o nome da propriedade de modo que corresponde a estes aqui. Mas às vezes os casos que você precisa fazer loop através dele, e é quando você pode usar este tipo de formato toe out, colocar o valor de suas informações de objeto. Então, a próxima lição vamos olhar para algumas funcionalidades adicionais que são incorporadas em JavaScript que torna as coisas muito mais fáceis e apenas vai mostrar algumas das funções básicas que estão disponíveis embutidas em JavaScript. dedo do pé ajuda você a escrever código. Ah e Teoh ajudam você a renderizar diferentes funcionalidades. Então isso está chegando na próxima lição. 19. Função de matemática JavaScript 26: e esta lista. Eu quero mostrar-lhe algumas coisas realmente legais que você pode dio com JavaScript. Então, estas são construídas em funções que já vêm dentro do JavaScript. Então vamos dizer que temos um número eso para a variável A. Temos um número 5.5. Então nós temos uma função que é embutida no script Java chamado Math, e isso nos dá a capacidade de arredondar números. Então, se eu quisesse arredondar para fora A eu posso fazer isso aqui e vemos que quando nós arredondamos para fora A, nós temos um valor de seis rodadas, 5.5 para 6. Essa é uma coisa muito legal que podemos fazer com JavaScript. Nós também temos dentro da matemática. Podemos produzir um valor de aplicar. Então, talvez aqui em cima, vamos apenas fazer matemática. Eu sei o quão bem isso vai funcionar, mas podemos fazer o valor de um lá. Então este é o valor do pie já incorporado em JavaScript. Nós também podemos arredondar para cima. Podemos arredondar para cima, podemos arredondar para baixo. Então vamos alguns que disse outro valor aqui fora B e vai dar-lhe 5.5. E quando ele esqueceu aquele sinal de igual. Então vamos Ah, em vez de arredondar a. Então é mais uma carta aqui. Então fazer o nosso ver capaz de ver um E em vez de arredondar B e arredondar ser Vamos I Vamos arredondá-lo , Vamos arredondá-lo para cima Então teto vai arredondá-lo para cima e eu acho que eu deveria estar fora colocando qualquer um. Então estamos arredondando para cima, então isso nos dá um seis. É o mesmo que redondo. Mas vamos dizer que tinha um 5.2, então ainda é acabar com seis porque estamos arredondando para cima. Podemos arredondar para baixo, então andar é para arredondar para baixo. Então você vê que isso arredonda para baixo. Isso vai anotar este também, então o teto arredonda para cima e o chão rodadas para baixo. Então eles são apenas alguns exemplos de coisas diferentes que você pode fazer com a matemática. E então há outro também, então você pode criar números aleatórios, variável G é igual a matemática e apenas aleatório e mostrar como G se parece. Então eu tenho números aleatórios aqui, então toda vez que fazemos algumas atualizações aqui , deve. Ele gera um novo número aleatório e notar a única coisa sobre números aleatórios. Eles começam no ponto zero e então eles têm um monte de números depois disso, e é assim que ele está gerando esse número aleatório. Então, se você realmente quiser, eu recebo um número aleatório. Isso é entre um certo outro número. Então podemos fazer algo onde podemos fazer matemática aleatória, e então multiplicamos pelo número que queremos. Então, se eu quiser em um número de 0 a 100 que pudéssemos ver que temos esta matemática aleatória 0 a 100 nós também precisamos fazer outro aqui, talvez fazer um andar. Então arredondamos baixos, iniciamos zero. Então, possibilidade de zeros. Não temos todos esses dígitos extras. Há então é uma maneira de gerar números aleatórios dentro do JavaScript. E a próxima lição vamos ver as datas. Eso que JavaScript também vem com datas s. Então este é outro que é uma função embutida, pronto para ir dentro JavaScript. E você pode realmente utilizar isso dentro do seu script. Então isso está chegando na próxima lição. 20. Conclusão de data de JavaScript: outra função realmente útil que o JavaScript construiu em que usamos o tempo todo como desenvolvedores está pegando a data para que pudéssemos fazer algo como New Date e poderíamos ver que a data recebe saída lá. Então a data hora e assim por diante, e nós também podemos obter mais específico com a data em que podemos dio obter batida deste objeto em particular. Então vamos fazer outro. Então talvez mudemos isso também, também, ou d A ou algo assim, e então a vai ser igual a, E aqui é onde podemos usar esse objeto de data, e podemos obter algo como se quisermos obter o mês específico para que possamos fazer para obter data para que saibamos que é o Este é o nono dia do mês, então este está recebendo o dia get. Nós também podemos fazer um mês get, então este retorna o mês que ele é. Então é o segundo assim novamente, começando em zero. Então, zero de janeiro, 1 de fevereiro e marcha também. É por isso que é também. Então não é realmente um segundo mês, mas é o terceiro mês, mas pensando no mesmo formato que fizemos com um aumento. Nós também podemos fazer obter tempo para que possamos ver a hora atual também. Este é um carimbo de hora dos milissegundos de 1º de janeiro de 1970. Muitas vezes usado dentro da programação. Podemos conseguir horas, então, se quisermos ter as horas, então sabemos que agora é às 24 horas. Então, são 10 horas 10 da tarde 22 nossa é uma grande quantidade de disponibilidade diferente aqui que podemos utilizar. Também podemos conseguir coisas como os minutos. Isso é algo que podemos atualizar para que possamos obter as atas. Podemos ter as horas assim por diante. Então é Ah, o 53º minuto eso 22h. 53º minuto e assim por diante. Então, obtemos todas essas informações do objeto date que você pode console, logout esse objeto date para que você possa ver ainda mais informações sobre ele. Então temos o objeto. Nós temos as informações de data lá, então não é muito bom sair daqui, mas sim, nós poderíamos pegar informações adicionais porque há um monte de métodos disponíveis . Podemos até fazer coisas como conseguir os segundos, então talvez feche isso. Então nós temos segundos também, onde você pode obter segundos fora desse objeto. Então talvez ele tenha removido isso, e nós temos o 1º 2º e cada vez que atualizamos, você sabe, nós temos o 5º 2º e assim por diante. Então, novamente, é importante lembrar que há muitas coisas que você pode fazer com JavaScript. Você pode obter um monte de informações. Você pode realmente quebrar essa informação e utilizá-la, dizendo, obter pedaços desse objeto e assim um. E com JavaScript, é importante experimentá-lo por si mesmo. Veja o que você pode fazer acontecer com JavaScript. Experimente coisas diferentes, faça algumas atualizações diferentes aqui e veja o que você pode fazer acontecer com JavaScript. E isso é importante para o geral, com todos os recursos e código-fonte fornecidos nas lições, experimente você mesmo e veja o que você pode fazer. Combine em conjunto várias funcionalidades combinadas em conjunto. Apenas também, nós fizemos nas lições anteriores. Nós estávamos combinando o loop quatro aqui. Estamos combinando a saída dos objetos e assim por diante. Então, experimente tudo juntos e veja o que você pode fazer uma make acontecer com JavaScript. E se você está procurando um lugar para praticar JavaScript, caneta de código é um excelente recurso porque, mais uma vez, ela lhe dá a capacidade de escrever algum código e, em seguida, ver as atualizações acontecerem imediatamente dentro desse código. Então, outro recurso realmente ótimo para praticar e experimentar JavaScript. E dentro das lições anteriores, fornecemos uma ótima visão geral da funcionalidade básica e dos fundamentos que você precisa conhecer para criar e começar a criar seus próprios aplicativos JavaScript do zero. E uma vez que você começar a criar esses aplicativos, você vai se surpreender com a facilidade de combinar diferentes funcionalidades de código e reunir tudo isso para criar aplicativos totalmente funcionais projetados e interagindo com a maneira que você quer que eles interajam e forneçam aos seus usuários da Web experiências incríveis. Obrigado novamente por assistir ao nosso curso introdutório em JavaScript, e se você tiver alguma dúvida ou comentários, por favor publique-os dentro do fórum