Codificação básica de JavaScript | Laurence Svekis | Skillshare

Velocidade de reprodução


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

Codificação básica de 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

12 aulas (1 h 12 min)
    • 1. VÍDEO PROMOCIONAL

      1:17
    • 2. 1 Introdução de conceitos básicos de JavaScript

      4:41
    • 3. 2 Introdução básica JavaScript

      3:28
    • 4. 3 Como adicionar JavaScript à sua página da Web

      8:14
    • 5. Conteúdo de saída básico de 4 JavaScript

      4:22
    • 6. 5 fundamentos de JavaScript do modelo de objeto documento

      8:01
    • 7. 6 variáveis básicas de JavaScript e operadores

      5:19
    • 8. 7 funções básicas de JavaScript

      11:08
    • 9. 9 Saída de DOM básico JavaScript

      3:31
    • 10. arrays básicos de 10 JavaScript

      8:20
    • 11. 11 condições básicas de JavaScript

      8:14
    • 12. 12 Loops básicos de JavaScript

      5:32
  • --
  • 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.

195

Estudantes

--

Sobre este curso

Codificação básica de JavaScript

Aprenda JavaScript em menores de 1 hora Conceitos básicos e fundamentos do JavaScript

Aprenda os conceitos fundamentais fundamentais do JavaScript.

Curso para iniciantes que desejam aprender sobre usar o JavaScript

Aprenda JavaScript em menos de 1 hora, todos os arquivos de origem estão incluídos.

Saiba como adicionar JavaScript às suas páginas da Web

Como aplicar
JavaScriptAccess o modelo de objeto de documento DOM
Update e interaja com código
HTML e
operatorsFunctions e como
use com
arraysAdd logic with conditionsLoop de
loop para economizar
timeJavaScript é uma parte essencial de qualquer página da Web, o usuário espera mais do seu conteúdo web. O JavaScript fornece o próximo nível de interação na web.

Desenvolva uma compreensão sólida do JavaScript com esses conceitos principais, para melhorar e avançar na codificação JavaScript adicional.

Aprenda orientação passo a passo do JavaScript para entender o que e como usar o JavaScript.

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. VÍDEO PROMOCIONAL: JavaScript é uma linguagem realmente emocionante, que permite que você crie conteúdo dinâmico e interativo para exibi-lo para seus visitantes da Web e realmente acelerar a experiência dos usuários da Web em sua Web. Eu sou um desenvolvedor Web há mais de 15 anos, e eu vou estar levando você através dos conceitos pobres do script Java, as construções básicas de acordo que você pode usar para começar a relatar JavaScript. Vou mostrar-lhe como adicionar JavaScript. Como chegar, conteúdo de pé para o usuário para ser capaz de visualizar esse conteúdo diretamente de JavaScript, como acessar dinamicamente pontos de conteúdo dentro de seu código HTML e até mesmo manipulado e alterá-lo para que seus usuários possam fazê-lo. Você também vai estar olhando para esses quatro conceitos conceitos fundamentais de JavaScript, como variáveis, operadores, função, função, storm a raise, condições, loops e, em seguida, tudo juntos. Ter tudo trabalhar de forma eficaz em conjunto para realmente construir um. Este curso é projetado para iniciantes de javascript. Um realmente aprendeu esses conceitos fundamentais. Quando você estiver pronto para mergulhar em javascript e ver o que ele pode fazer pelo seu conteúdo da Web, vamos começar a aprender JavaScript 2. 1 Introdução de conceitos básicos de JavaScript: Oi. Meu nome é Lawrence, e eu sou um desenvolvedor web e eu vou estar guiando você através do básico de JavaScript. Eu criei este curso para ajudá-lo a aprender todas as coisas realmente legais que você pode fazer com JavaScript. Agora, JavaScript é relativamente fácil de aprender. E apenas entender algumas dessas noções básicas que vou repassar neste curso pode realmente ajudar você a aprender sobre JavaScript. JavaScript permite que você tenha interação dinâmica dentro de seu conteúdo da Web e interação com seus usuários. E quando digo interação dinâmica, quero dizer que você tem a capacidade de fazer alguns cálculos, aplicar alguma lógica e até mesmo atualizar seu código HTML usando JavaScript. E isso fornece muito mais funcionalidade e uma melhor experiência de usuário para os usuários entram em sua página da Web. Você também tem a habilidade de usar, ter usuários, acionar eventos e acionar interações. Então, não só obter essa informação exibida voltando para o usuário, você tem toda a capacidade de acessar conteúdo, atualizá-lo e realmente fornecer essa incrível, incrível experiência interativa apenas com o uso de algum javascript simples e aplicação suas páginas da Web. Então eu criei este curso para realmente ajudá-lo a entender os fundamentos do JavaScript. Agora vou repassar algumas das noções básicas sobre como adicionar JavaScript à sua página web . Então há um número de maneiras diferentes de fazer isso. Podemos fazê-lo na página Weaken, vinculada a um arquivo de script. Então, vou mostrar-te como fazer isso. Adicione JavaScript em sua página da Web. Eu também vou estar passando sobre como produzir conteúdo dentro de sua página da Web e usar JavaScript para realmente ter algum conteúdo de saída e conteúdo interativo mostrando para o usuário . Nós também vamos estar olhando para o amanhecer. Então o Dom é uma daquelas coisas que realmente fornece muita informação. E todas essas informações são acessíveis via javascript. Então aqui temos uma amostra de todos os diferentes eventos que estão disponíveis no dom e todas essas coisas diferentes com as quais você pode interagir com o código do seu código HTML apenas acessando o amanhecer e interagindo com ele. Portanto, há muito que você pode fazer com isso. Além disso, vamos estar dizendo a vocês sobre como usar variáveis porque as variáveis são uma daquelas peças fundamentais do JavaScript e compreender variáveis e como manipular variáveis e interagir com variáveis é o que dá Capacidades dinâmicas JavaScript. Eso E é apenas um conceito muito simples armazenar conteúdo em. Vamos mostrar-te como fazer isso. Também trabalhando com funções, então funções outro conceito central de JavaScript e realmente fornece algumas capacidades muito legais . E então, claro, olhando para o dom. Então, o que? O amanhecer fornece dentro JavaScript, também olhando para um aumento. Então, aumente o ar realmente legal dentro do JavaScript, porque eles lhe dão a capacidade de manter vários pedaços de conteúdo. Então vamos ver as condições. Assim, as condições realmente ajudam você a aplicar essa lógica em seu JavaScript e fornecer algum tipo de resposta. De acordo com essa lógica, também, olhando para loops, saudações economizam tempo e usando todas essas funções juntas, como funções, um aumento, condições e loops podem realmente acelere o que você pode fazer com javascript. Então eu vou estar revendo tudo isso, bem como eu estou incluindo o código-fonte que eu vou estar usando ao longo deste curso. Eu também posso dizer-lhe como você pode configurar colchetes e usar isso como um editor e até mesmo ir para caneta de código, acessar os arquivos ao vivo on-line e ser capaz de manipulá-los e praticar JavaScript. Então tudo isso e muito mais com atualizações regulares, e eu estou on-line em uma base regular e pronto para responder a quaisquer perguntas que você possa ter. Então, quando você estiver pronto, vamos começar a aprender JavaScript. 3. 2 Introdução básica JavaScript: Bem-vindos aos nossos trabalhos. Tira curso introdutório dentro deste curso, vamos passar sobre como usar JavaScript agora com JavaScript e permite que você se orgulhe funcionalidade dinâmica em sua página da Web. Ele permite que você crie interação e um monte de coisas realmente legais que você pode fazer com JavaScript. Você pode criar tudo, desde jogos que você pode verificar através de formulários e até mesmo manipular conteúdo dentro do seu HTML. Manipule seu CSS. E realmente, há um monte de coisas que você pode fazer com JavaScript. Agora, uma das coisas importantes com JavaScript é entender o básico. Então vamos estar executando toda a sintaxe básica de fundação que você precisa saber para construir JavaScript dentro de suas páginas da Web. Vou usar um editor chamado colchetes. Então este é um editor de código aberto para download s. Por isso é gratuito para download. É fornecido pela Adobe, e é isso que vou usar ao longo do curso. Então está disponível apenas entre colchetes dot io, e você pode ir em frente e baixá-lo se você ainda não tem seu editor favorito que você queria usar eso. Este é um fornecido pela Adobe e é assim que parece. O Eso está aí? Claro, há algumas coisas diferentes que você poderia fazer. Você pode alterar as cores de fundo e estilizá-lo como quiser. Então este é um editor muito bom para criar JavaScript. Ele tem todas as funções embutidas dentro do JavaScript e como eu vou mostrar a vocês enquanto trabalhamos através do curso. Então, para começar e vamos saltar para isso muito rapidamente, vamos correr através de algumas das principais sintaxe, todas as diferentes lições ao longo deste curso e começar com apenas uma página html em branco . Então esta é apenas uma página html em branco realmente eso temos nossa abertura doc tipo I abrindo html cabeça fechamento cabeça. Temos um título lá para que possamos ver isso aqui em cima abrindo o corpo fechando o corpo. E então é aqui que vamos realmente colocar o script Java. Então, vamos colocá-lo na página mostra mostrando como fazer isso nas próximas lições. Então, quando você estiver pronto, e também é encorajado que você caia junto com o curso e a fim de ajudar a incentivá-lo a seguir junto com o curso. Também vou usar um editor online na Code Pen que devo. Então eu vou estar fornecendo os links para as canetas de código ao longo do curso também. Eso essencialmente O código caneta que eu o faz é que ele permite que você escreva código diretamente na página, habitar exibição no site mão direitos. Então aqui estou eu escrevendo em alerta. E é claro que vou te guiar por quê? Alertas também estão ao longo do curso, mas podemos ver isso imediatamente. Sempre que estou escrevendo algo no meu lado esquerdo, incluindo javascript, incluindo javascript, CSS ou HTML, vemos que ele está sendo exibido e executado diretamente dentro da caneta de código. Eu vou Então esta é uma daquelas ferramentas realmente boas úteis que usamos para exibir script imediatamente enquanto escrevemos. E também é um ótimo lugar para praticar e aprender o que javascript canoa. Então vou incluir links para a prisão do tribunal. Io também é durante todo o curso. Então, quando você estiver pronto, vamos começar a criar alguns javascript 4. 3 Como adicionar JavaScript à sua página da Web: nesta lição, vou cobrir como adicionar JavaScript à sua página. Então, quando vamos para o nosso exemplo de código pen dot io, vemos que o JavaScript tem uma área J s, e qualquer que seja o javascript estivesse digitando aqui, ele está realmente rodando dentro da área de exibição aqui no lado direito. Então este não vai ser o caso quando você está escrevendo seu código porque você só tem um arquivo toe trabalhar com Ah, e mesmo se s assim você tem que determinar onde você vai colocar o JavaScript eso Há uma série de opções. Você pode colocar JavaScript praticamente em qualquer lugar dentro do seu documento HTML. E a maneira como você pode fazer isso é abrindo script e fechando script. E novamente, vou usar esse exemplo de alerta. Então o alerta faz é que é ah, simples construído em função em JavaScript, e permite que você tenha aquela pequena janela pop-up que vimos na última lição. Então eu vou simplesmente colocar tags de script abrindo tags de script de fechamento para que pareça semelhante ao HTML abrir e fechá-los. E então qualquer conteúdo que esteja entre as tags de script isso vai ser o que o navegador vai entender, já que este é o JavaScript que precisa ser executado. Assim que eu salvar isso, atualize-o. Vemos que agora temos o JavaScript sendo executado, temos a janela pop-up, e até clicarmos em OK, ele não vai continuar em execução, carregando o resto da página. Então isso é uma coisa importante a ter em mente quando você está criando script de trabalho eso. Se você está tentando acessar eso, há dentro do JavaScript. Temos o que é conhecido como o Dom, e temos acesso a todas as diferentes partes do seu documento HTML em. Podemos acessar tudo isso através de JavaScript, e isso é o que é conhecido essencialmente como Dom, essa interatividade e conexão entre o HTML e JavaScript e o que é carregado e renderizado no navegador. Então, a razão pela qual eu estou trazendo isso é porque novamente, isso é sobre ordem e como as coisas são apresentadas ao navegador e quando estamos tentando acessar qualquer coisa dentro da seção do corpo de nossa página, mas estamos tentando acessá-lo antes que ele realmente carregado. Vamos encontrar alguns erros e alguns problemas. Então novamente, lembre-se, ordem é importante. E se você está tentando acessar conteúdo que vai estar disponível dentro da página, então é mais. É aconselhável colocar JavaScript na parte inferior da página. E quando olhamos para qualquer um do código-fonte em apenas vai usar colchetes como um exemplo aqui, então eles realmente têm. Eles têm algum JavaScript aqui no topo. Mas quando caminhamos até o final da página, vemos que eles têm a maior parte de seu JavaScript. E a razão mais uma vez, para isso é que é melhor para Matt. Uma série de razões para você ter acesso a todas as informações do amanhecer eso que tudo isso começa a carregar e, em seguida, você acessá-lo. Além disso, se você tiver algum problema com qualquer um desses arquivos Js, se eles não estão carregando, se eles estão levando tempo para carregar, então isso realmente afetará o tempo de carregamento de sua página da Web. Então, idealmente, você quer tê-lo na parte inferior da sua página, porque se você tem algum problema que você quer, você não quer que a experiência do usuário seja interrompida com o carregamento e renderização de JavaScript. Então, principalmente coloque no fundo. Há alguns casos em que você precisa dele no topo. É por isso que eles têm que estar no topo, não no fundo, não no fundo, como outros Js eso. Obviamente há uma razão aqui porque provavelmente tem algo a ver com os forints. Ainda não olhei para isto, mas é provável que este seja o caso. Por quê? Eles colocaram aqui no topo. E notamos aqui que eles também comentaram no HTML que ele precisa estar no topo. Então, bons lugares de prática na parte inferior. Então, mais como o que vemos neste exemplo em que estamos pegando as tags de script e estamos colocando-as na parte inferior e a mesma coisa aqui quando realmente vamos virar para cima, executar o código e apenas mostrar qual será a diferença. Então vemos que ele não é realmente ainda precisa fazer uma mudança porque quando eu estou recarregando a página, vemos que o mundo Olá ainda é Olá mundo. Não é Olá mundo para como eu mudei o código e quando eu apertei OK, vemos Olá mundo para vem até eso pegando a tag script, movendo-o para o fundo de pouco antes de estamos fechando o corpo. E eu deveria mudar isso de novo para vermos que algo está acontecendo aqui . Eso Quando eu atualizá-lo, vemos que ele já altera o código. Isso significa que ele passou e está progressivamente escaneando todo esse conteúdo . E então ele está executando o JavaScript. Então é depois. Então isso foi apenas uma amostra rápida do que, hum, e como colocar JavaScript e outra coisa sobre colocar javascript. Temos outra opção com o uso de JavaScript, e isso é mais nas linhas do que Code Pen está fazendo aqui. Então não estamos exatamente colocando-o dentro do HTML, mesmo que possamos. Se quiséssemos codificar caneta, eles têm uma seção separada em usar script de trabalho. E o que eles estão fazendo é que eles estão realmente chamando para este JavaScript então eles estão simulando chamadas para em um arquivo JavaScript externo. E esta é provavelmente a melhor maneira de usar JavaScript dentro de suas páginas da Web porque ele dá a você a capacidade de reutilizar esse código uma e outra vez. Então, o que eu quero dizer com isso é criar um novo arquivo e simplesmente ligar para ele e eu vou mostrar a vocês como isso funciona. Então eu criei uma marca que você registrou chamada meu ponto de script Js. Então este vai ser o meu arquivo JavaScript externo, e ainda temos acesso a todas essas informações, e realmente vai ser a mesma coisa que pegar isso, colocá-lo sobre o arquivo Gs script. E novamente, o benefício disso é que agora, se eu quiser várias páginas toe ter este alerta aparecendo, eu posso simplesmente vinculado a este meu script Js em qualquer uma das páginas. E a maneira que fazemos isso é apenas colocar em uma fonte aqui s então certifique-se de que você obter arquivo fonte, correto. Então meu script dot gs Então isso é só porque eu tenho dentro desse mesmo diretório e nós ainda temos que fechar isso fora das tags de script. Então eu notei que nós acabamos de ter, então nós temos apenas uma área em branco lá, e o navegador vai ser capaz de entender isso. Certo, isso é o que queremos renderizar. E eu vou dar um oi para lá e refrescá-lo. E vamos ver se algo deu errado com isso. E eu acabei de abrir o meu diretório aqui. A coisa era, eu não tinha realmente guardado no lugar certo. Então, ao meu ponto sobre ter o caminho certo para o arquivo eso Agora eu salvei. Meu script Js lá é meu índice dot html Então agora, quando eu atualizá-lo, nós devemos ficar bem, e nós devemos ver esse alerta aparecendo. Então é assim que você traz JavaScript para suas páginas da web e, novamente, provavelmente a melhor prática é vincular arquivos. E como podemos ver aqui dentro do arquivo fonte aqui, há casos em que você pode querer ter o JavaScript diretamente dentro de suas páginas da Web. E então está tudo bem para eso. Isto estaria em Lee para esta página em particular. Então, não estamos nos conectando. E então essas bibliotecas JavaScript compartilhadas ar para as quais estamos vinculando, provavelmente em mais do que apenas uma página. Você provavelmente está vinculando a eles em várias páginas 5. Conteúdo de saída básico de 4 JavaScript: quando queremos que o usuário seja capaz de ver nossa saída em JavaScript. Então eu já estou mostrando um exemplo disso, e esse é o alerta. Portanto, há uma série de maneiras diferentes que podemos realmente produzir conteúdo para a parte visível dos espectadores de sua página da Web. E esta é a parte inicial de como nós criamos interatividade porque nós estamos realmente enviando ah bit personalizado de informação diretamente para o usuário. Eso Outra maneira que podemos agir na página da Web usando JavaScript é fazer documento, certo? E assim documento. Logo quando chamamos para o documento, isso é essencialmente chamando para toda a área do documento do HTML eso em oposição às janelas. Então estamos fazendo o alerta. Esta é apenas uma função de janela padrão. Eso isso está disponível novamente dentro daquele amanhecer que temos estes construído em habilidades para executar estes construído em funções. Outro que é embutido é um documento, certo? Então, a maneira que acessamos e chamamos para ele é fazer o documento direito, e ele funciona da mesma maneira que quando estamos realmente fazendo aquele alerta janela eso Sempre que atingirmos este javascript, ele vai automaticamente escrever isso para a página da Web. Então, agora, quando atualizarmos a página, o que você acha que vamos ver na página? E eu vou apenas adicionar uma quebra de linha rápida lá para que possamos distinguir entre esses dois bits de HTML e JavaScript. Então, o que você acha que vai ser exibido aqui na página? Você acha que vai ser outra janela quando eu estiver fazendo um documento, certo? O que acha que vamos fazer aqui? E quando eu o atualizo, vemos que na verdade está apenas escrevendo lá fora. Então, essencialmente parece que é código html que acabamos de escrever aqui. Ah, e nós vemos que imediatamente aparecer dentro do nosso navegador e isso é novamente isso vai ser visível diretamente para o usuário. Portanto, há uma série de maneiras diferentes que podemos acessar o amanhecer e ter e fornecer essa interatividade do usuário. Eso Outro é o registro do console. Então eu uso isso regularmente, e isso é algo que eu uso em meu desenvolvimento para passar informações. Eso isso vai realmente ser diferente do usuário ser capaz de ver informações. Isto é estritamente mawr para quando você está desenvolvendo e passando mensagens. Então, às vezes, se você tem loops e você tem um monte de variáveis e informações e você quer ver onde estamos em um determinado ponto quando estamos executando o código JavaScript eso talvez algo que não é exatamente visível para o usuário. Ah, e eu só quero ser capaz de abrir um console e ver ah, mensagem particular que está sendo passada. Quarto, eso tudo o que fazemos é fazer a mensagem de log do console. E novamente, Quando o script de trabalho está escrevendo através do JavaScript, ele atinge este log de console. Ele realmente escreve para fora no console, e os cônsules estão disponíveis por padrão. Uma das razões pelas quais eu uso cromo é porque eles têm um realmente bom console de ferramentas surdos Web e abrir isso. Você pode apenas clicar na página e fazer inspecionar. Você pode fazer isso aqui de cima, bem como no menu suspenso e número de maneiras diferentes de abrir o console. Se você estiver usando o Firefox a mesma coisa, eles têm um ótimo cônsul e ópera eso. Todos eles construíram em cônsules. Ah, E se você não está satisfeito com o console, a maioria dos navegadores tem a capacidade de adicionar ons, que melhorou o console ou dar-lhe a mesma funcionalidade cônsul. Então vamos mostrar o que o Cônsul faz. E realmente, ele não vai fazer nada diferente do ponto de vista do usuário. Mas se você tem o cônsul aberto, você pode ver que esta mensagem passa e esta é novamente a nossa maneira de passar através informações. Isso não será visível para o usuário, mas nos permite entender melhor o que estamos fazendo com nosso código e enviar mensagens diretamentepara nós mesmos através do cônsul. Isso não será visível para o usuário, mas nos permite entender melhor o que estamos fazendo com nosso código e enviar mensagens diretamente 6. 5 fundamentos de JavaScript do modelo de objeto documento: nesta lição. Eu queria apresentá-lo brevemente ao amanhecer porque o dom é provavelmente a melhor maneira de produzir conteúdo em seu HTML s mais. Na última lição, olhamos para o documento escrever eso o que isso está fazendo. Isto é simplesmente escrever para o documento. Mas o problema aqui é que se você quiser usar o documento direito, não podemos especificar onde dentro do HTML nós realmente queremos produzir este conteúdo. Então, se quiséssemos ver a saída de conteúdo, talvez queiramos mudar como o mundo 32 Olá mundo para eso. Para fazer isso, temos que ter o documento ali mesmo teria que escrever Olá mundo dentro do documento e ele fica muito frustrante eso uma das coisas que fazemos como desenvolvedores. Este é o lugar onde essas tags HTML, dibs e spans entram porque isso nos dá a capacidade de adicionar tags específicas e realmente especificar partes específicas de conteúdo. Então eu sou apenas rapidamente copiar e colar isso sobre, e eu vou fazer Olá mundo aqui, e eu vou atualizá-lo em vão para ser três e, em seguida, também porque eu quero aplicá-lo a um span específico Divina eu vou usar I d. E eu ia chamá-lo de top e eu era igual a falar dormente ou algo assim. Então, novamente, isso depende da sua discrição. Pode chamá-lo do que quiser. Isto é apenas como nós vamos ser capazes de acessá-lo dentro do JavaScript. Então o que nós queremos fazer nesta lição é que eu quero realmente atualizar Olá, mundo 32 Olá, mundo para E eu vou mostrar a vocês como fazer isso dentro do amanhecer. Então, vamos até aqui, atualizamos. Nada mudou. Tudo ainda parece o mesmo. E novamente, vou me referir ao que você pode fazer dentro do cromo. Então, se você não estiver usando cromo, você pode não necessariamente ter a mesma capacidade de olhar para o que está dentro do Dom eso . Todos esses consoles são diferentes. Se você quiser ver o que eu vou fazer, uh, uh, certifique-se que você está usando cromo e você tem suas ferramentas de profundidade abertas quando você vai para elementos. Você tem algumas opções aqui. Então você tem essencialmente o seu código HTML aqui ou todo o seu código-fonte de código para a página da Web para que você possa abri-los e você pode inspecioná-los e verificá-los e assim por diante. Então aqui embaixo você tem uma segunda janela. Você tem algum estilo aqui dentro desta janela. Então não estamos olhando para isso porque temos os estilos abertos. Temos todos os ouvintes de eventos. Então, atualmente não temos ouvintes de eventos, e então temos algo chamado Dawn Break pontos novamente. Vamos dar uma olhada nisso. Isso é algo que você usa dentro do desenvolvimento ao configurar pontos de interrupção. E por último, temos propriedades. Então, dentro da propriedade é que temos essa divisa que podemos abrir, e podemos ver todo esse conteúdo realmente interessante aqui. Aqui é o Eso. Quando olhamos para o html dela, temos o html interno dela. Temos impostos internos e vemos que temos acesso a esses pedaços de conteúdo no HTML, e isso é o que o amanhecer é novamente. Isso nos dá toda essa capacidade de acessar esse conteúdo. Então, se formos a partir do elemento HTML superior, vemos que isso é o que está contido dentro dele, e quando abrimos html o 1º 1 que temos o primeiro fechar aquele. Então o nosso html interno para todo o elemento HTML é este Então ele apenas nos mostra todas as nossas tags HTML em nosso texto interno. Então nós temos apenas basicamente texto na diferença entre HTML e texto, claro, é que o texto é a mesma coisa que temos aqui em cima com todo o HTML despojado. E aqui em baixo temos o nosso primeiro filho, que é a cabeça. E aqui em baixo temos o nosso primeiro filho, Então podemos passar e ver o que está contido na cabeça. Então veja, dentro da cabeça. Nós só temos o título e nós não temos o mesmo texto interno porque nós estamos apenas contendo o que está dentro da cabeça aqui. Então talvez, hum, nós queiramos ir e cavar um pouco mais para não querermos ver o primeiro filho que temos , hum, último filho que podemos ver e podemos ver o que está contido lá dentro também. E talvez nem queiramos entrar no HTML. Temos algumas opções aqui para diferentes elementos HTML, e então temos todos os nossos elementos por conta própria. Então HTML interno e realmente há um monte de coisas que estão acontecendo aqui que nós temos acesso, e nós temos acesso a tudo isso dentro de nosso amanhecer. Então o que eu realmente queria é que eu quero um gancho são amanhecer em um determinado pedaço de conteúdo que sendo este mundo três e eu quero atualizar isso e mudá-lo para mundo para Então, a fim de fazer isso, eu tenho que usar uma função embutida dentro o amanhecer e acessar esta seção dormente superior do nosso código HTML, e eu vou apenas demonstrar como fazemos isso. Então, novamente, nos referimos ao documento porque tudo está dentro do amanhecer e tudo dentro do documento, e há uma maneira de realmente selecioná-lo, um i d. particular e esse método é chamado Get elemento por I D. E então nós só precisamos especificar os nomes dos elementos. Então é top Numb é o nome que eu queria acessar e, em seguida, passando pelo que vimos aqui , temos este HTML interno. Eu tenho os mesmos métodos e funcionalidade disponíveis para mim aqui para que eu possa fazer html interno e agora é apenas um simples como definir Ah marca você digitar html. Então, se eu quisesse ver o que está contido neste HTML interno, eu posso fazê-lo desta maneira. Agora vamos registrar o Cônsul. O que está contido dentro desse HTML interno, vemos que temos um valor de três. Então, se pudermos acessá-lo, isso significa que podemos mudá-lo. Então, em nosso HTML é igual a quatro, volte para fora, atualize-o e vemos agora que temos quatro. Então é assim que essa é a melhor maneira de alterar seu conteúdo HTML, usar JavaScript e acessar seu conteúdo. E como você pode ver, como estamos olhando através de tudo isso diferente, todo esse conteúdo diferente que temos aqui ao amanhecer. Nós temos todos esses ouvintes de eventos e realmente há apenas uma tonelada de informações aqui que podemos usar um acesso. Então, mesmo se quiséssemos fazer algo como redefinir esse html interno da tag HTML, poderíamos fazer isso. Então nós poderíamos simplesmente esvaziar completamente todo esse código HTML e substituí-lo por outra coisa . Então, um monte de funcionalidades diferentes que estão disponíveis para nós. E na maioria dos casos. É melhor acessar seu HTML nesse formato. E novamente, isso vai para a ordem do seu JavaScript. Então, se nós realmente colocarmos isso dentro de nossa cabeça, nós não temos essas idéias identificadas dentro do dom ainda. Ah, e então nós teríamos alguns problemas acessando. É assim, se você está fazendo isso dessa maneira, é melhor acessá-lo diretamente na parte inferior. 7. 6 variáveis básicas de JavaScript e operadores: no último. Ouça, vimos como poderíamos alterar dinamicamente o conteúdo dentro da nossa página HTML através do JavaScript. Agora, este é o início da interação dinâmica e conteúdo dinâmico via javascript. Então eu encorajo você a verificar dentro de suas taxas de editor alguns HTML básico e acesso. Ele faz algumas atualizações para ele e praticar este aspecto de javascript, a fim de começar a criar essa interatividade. Então você pode estar olhando para isso e dizendo Ok, bem, por que eu não apenas para aqui em vez de passar por todo esse problema com JavaScript? E aqui é onde eu queria introduzir variáveis. Portanto, variáveis são um peso de armazenamento de dados dentro do JavaScript. Há nossos dois tipos principais de variáveis que vamos usar e um vai ser um inteiro e outro vai ser um valor de string. Então, a fim de configurar qualquer pessoa qualquer variável, declaramos que esta é agora uma variável e A vai representar este pedaço de dados. Então, a fim de fazer uma string, temos que citar em torno dela e colocamos o conteúdo que quisermos aqui no meio. E agora, sempre que chamamos para A como o detentor de dados dessa string de valor, vamos ser capazes de ver que obtemos um valor de string, então a mesma coisa que inteiros. Então, em vez de ter um quatro aqui, se eu realmente quiser fazer uma dinâmica, eu posso definir estar segurando um valor de quatro. E em vez de ter quatro aqui, eu poderia apenas me referir à variável B e que contém o valor de quatro. Então agora, quando eu atualizo a página, nada muda porque ser agora representa um valor de quatro. Agora, com JavaScript, também podemos fazer operadores. Então temos esses operadores aritméticos. Temos mais menos multiplicar dividir. E agora nós podemos realmente tomar este valor de B. Então, se você quiser, poderia declarar uma nova variável, vê? E queríamos dar a ver, ah, valor de quatro mais um. E agora, na verdade, vou escrever. Então eu tenho uma cópia do mesmo modo que eu não estou substituindo isso. Então eu vou dar esses valores de um e dar a este um valor de um colocado em ver aqui. E o que acha que vai acontecer agora? Nós temos em nosso HTML nós temos Olá, mundo três. Olá, mundo três. Mas dentro do nosso javascript, estamos redefinindo alguns desses valores. Então, como você acha que a saída vai parecer? Então, dê um segundo antes de eu me vangloriar no navegador e atualizá-lo para dar uma olhada no código. E quando você está lendo este frio, o que você acha que vai acontecer? Então, quando eu atualizá-lo, vemos que nós obtemos esse valor fora quatro. E eu só preciso fazer uma atualização rápida. Então eu só preciso brocket em torno de lá s assim, a fim de obter esse valor absoluto lá de B mais um, que é quando você aplica os colchetes. Então C é igual, na verdade esse valor absoluto. E é apenas a maneira como os navegadores agora interpretá-lo é assim que vemos que Olá mundo para Olá Mundo Cinco e aqueles ar agora do que você calculou valores. Então o que aconteceu agora aqui é que temos um valor de B igual a quatro. Então nós estamos apenas colocando isso no espaço superior dormente no I d. E então aqui nós estamos fazendo então nós estamos tomando quatro mais um e isso é que nós estamos realmente recebendo esses cinco. E agora podemos ver o que o JavaScript conduziu porque podemos realmente fazer algo em que somos incrementais. Isso talvez até mesmo looping através dele, que nós vamos falar sobre as próximas lições e ver o quanto nós realmente podemos fazer com JavaScript com todas essas variáveis que vão conter os dados e até mesmo apenas alguns simples matemática cálculos. Assim, podemos facilmente mudar isso para menos. Então obtemos um valor de três, podemos multiplicá-lo. Então, se você quiser fazer multiplicado por dois, nós podemos fazer isso também. Então, conseguimos algo como oito, e podemos até fazer a divisão. Então isso vai nos dar, ah, valor de dois. E variáveis são uma daquelas coisas fundamentais que dentro de linguagens de programação que realmente nos fornecem todos esses cálculos posteriores que podemos fazer com todos esses valores. E enquanto dentro do código que estamos enviando nossos objetos de valor são variáveis aqui em cima, podemos manipular as variáveis dentro do tribunal, aplicar lógica a ele e ter vários resultados Resultados personalizados usando cálculosJavaScript cálculos 8. 7 funções básicas de JavaScript: Outra parte fundamental do JavaScript é o uso de funções. Então aqui temos relativamente a mesma coisa que estamos fazendo. Eso só Há algumas coisas que estão mudando aqui quando estamos fazendo o elemento get por idéia e estamos definindo que inter html. Então, primeiro de tudo, onde selecionar o i d de html e, em seguida, estamos definindo de valor. Então este é um valor que temos dentro de nossos cálculos. E é aí que as funções entram e novamente, assim como as variáveis que desempenham um papel importante sempre que você está criando JavaScript. Então eu estou apenas reformatando alguns deste código aqui s O que será melhor olhar mais apresentável quando eu trazer a função. Então, para configurar uma função, vai ser relativamente fácil. Tudo o que tenho a fazer é funcionar e dar-lhe um nome. Então eu vou apenas dar-lhe um nome fora html. E assim sempre que eu chamo a função então talvez eu possa até mesmo colocar isso dentro dessa função . E sempre que eu chamar para essa função, eu vou correr. Qualquer pedaço de código é mantido dentro dessa função então neste me dá a capacidade realmente executar em várias vezes e obter várias respostas lá. Então agora quando olhamos no console, temos 333 e tudo isso está realmente vindo diretamente da função e também com funções, temos a capacidade de retornar informações para que eu possa retornar um valor para que eu possa realmente calcular o valor. Então eu vou definir uma marca você variável, ou eu posso re calcular, ver se eu queria fazê-lo. Então, talvez realmente vai re calcular? , Então,vou definir que C tem um novo valor de sete. Então, quando eu executar essa função e eu atualizar meu html interno lá ou executar o valor de para o log do console , veja? E agora vamos definir o valor de ver como sete. E isso está sendo definido como uma string, ao contrário do que são inteiros estão aqui. Então o que eu realmente quero fazer é C mais C mais um. Então eu vou incrementar ver cada vez que executar a função e eu vou retornar o valor de C e vamos mostrar-lhe como isso vai ser. Então, usando retornos dentro da função quando eu ir e atualizá-lo. Então eu vejo que eu tenho esta linha aqui está retornando o valor de três. Mas a linha número cinco na linha número 11 tem esse valor incremental que vemos dentro do console. Então número nove e número 11 vemos que esses valores incrementais de ar. Mas sempre que executamos as próprias funções, vemos que temos C igual a C mais um e, em seguida, somos cônsul em logout que para que saída que estavam fora colocando dentro desta seção. Então talvez até faça mais sentido para console logout si eso novamente. Poderíamos fazer qualquer número de coisas aqui dentro desta função. Mas o ponto é que temos a capacidade de executar funções e eles podem fazer incrementos de nossos valores. Eles podem retornar valores. Então agora eu posso fazer algo como e para fora colocar isso nos logs do console em vez de ter essa informação. Então eu vou correr de uma vez, e isso pode ser um pouco difícil de seguir, mas inicialmente estamos fazendo uma mensagem de log do console, então eu vou me livrar disso. Vamos definir nossas variáveis aqui. Vamos executar nossa função pela primeira vez. Vai para este pedaço de código. Então ele vai tomar o valor de C igual a C mais um. Então, atualmente, o valor de C será dividido por dois. Então vai ser nós vamos estar retornando um valor para C off três e então nós vamos incrementos, ver novamente por um e estamos retornando. Veja o novo valor de C s. Oh, nada realmente vai obter saída aqui porque nós não estamos Cônsul logando para fora. Mas aqui, vamos fazer isso. Apenas remova esse. E, na próxima vez que executarmos, na verdade, vamos fazer logout do console que retornou o valor . Então vamos ver o que acontece agora. Então obtemos um valor de 35 e seis. Então, a primeira vez que passamos por ele, obtemos essa função html. Ele vai até lá para ouvi-lo. Incrementos ver por um cônsul registra como três do que incremental novamente. Então veja agora tem um valor de quatro. Ele é devolvido aqui como quatro. Então o valor atual de ver neste ponto é para então isso significa que quando executamos o log do console , e nós realmente saída esse valor. Vemos isso indo para a função. Desta vez, o valor é para incremental por um que consola, log-lo para fora. Então agora são cinco. Nós incrementamos novamente por um, nós retornamos um valor de seis. E é aqui que estamos colocando esse valor de seis. Então, se eu fosse mostrar esse valor de retorno aqui ou eu deveria fazer o console logout. Então, se eu realmente vou mostrar esse valor de retorno Então agora eu devo obter 3456 dentro da saída. Agora, outra coisa que você pode fazer com funções é que você pode passar argumentos sobre ou parâmetros sobre eso. Em vez de fazer esses cálculos aqui, eu posso realmente passar o valor através da função e fazer alguns cálculos com ele. E isso pode realmente assumir o controle do que estamos fazendo aqui em baixo. Eso eu vou apenas remover este retorno porque eu vou ter essa saída real acontecendo aqui. Eu vou fazer esta parte aqui e agora o que eu quero acontecer toda vez que eu ligar. Essa função é que eu quero que ele produza um valor particular. E como eu disse, queremos mostrar-lhe como você pode passar parâmetros. Então eu vou ter parâmetro um parâmetro para mim Bacon chamando para um para dois. E então agora esse ar vai segurar esses valores passados eso eu quero passar por este primeiro e depois este pela segunda vez, e também, eu vou definir um número para a saída. Então eu vou fazer sete e eu vou comer. E também, eu vou explicar isso em um pouco mais de detalhes chegando. Então eu só quero mostrar a vocês o que acontece aqui com a função, e então eu vou passar e explicar como tudo isso está funcionando e como javascript está traduzindo esse frio. Então um um logon de console nesses dois valores que estão sendo passados. Eu posso me livrar dessa parte lá. E agora aqui dentro. Posso usar isso como minha variável. E eu posso realmente usar isso como minha variável para o html interno Seoul. Agora que terminamos isso, o que acha que vai acontecer aqui? Estamos passando por cima dormente. Então esse é o primeiro. O primeiro i d lá que nós temos que contém o valor de três eso estavam passando isso sobre vírgula sete E quando ele atinge a função Pará um vai tomar o controle O valor armazenado de Talk Numb Pará Dois vai mundar o número da loja de sete obter um log de console fora do talk numb e sete E então aqui, quando nós temos elemento por i d nós temos este valor que está sendo mantido, então ele deve ser capaz de traduzir isso como top numb, ir para o HTML, pegar o HTML interno, e então o parágrafo dois está segurando um valor de sete, e nós vamos produzir esse valor. Então, essencialmente, o que estamos fazendo aqui é que vamos ter o primeiro mundo de olá com um valor de sete segundos. Olá. O mundo vai ter um valor de oito. E vemos isso aqui dentro do registro do console. E é por isso que queria que uma Lei Cônsul obtivesse essa informação porque é importante, entender como podemos passar valores. E então, mesmo com esses valores que passamos, eu posso redefinir alguns desses valores para que eu possa fazer algo como para dois mais dois melhores colchete trimestre por lá, modo que isso é apenas entendido que isso vai ser um Inter-juris. Bem, então agora estávamos por padrão, sempre adicionando a Intuit. Ah, outra coisa com funções é como ele lida com esses valores. Então esses valores de par a um e parte dois vão estar em Lee dentro da função, então eles só vão ser acessíveis dentro da função. Então, se eu fosse fazer algo como console log para um, nós obteríamos um ar porque não há nada nenhum valor que está sendo mantido dentro de seu eso fora da função, esses valores globais de ar e nós temos acesso a ele dentro da função também. Mas se fizermos algo como, vamos ver um E se aqui eu definir um novo valor para um novo valor, nós não vamos realmente substituí-lo. Então, quando atingimos este log de console, ainda vamos usar esse valor original de um Então temos esse valor de string lá que definimos inicialmente. Mas se nos livrarmos desta declaração da variável, fazemos um valor igual e novo. Obtemos o valor de novo valor porque agora isso está acessando essa variável global. Então leva um pouco de tempo para trabalhar através de tudo isso com funções, e eu encorajo você a verificar a caneta código. Eu postar este frio dentro deles experimentá-lo e ver o que você pode obter funções para fazer e trabalhar com isso. Veja que tipo de saída você pode obter. Então vamos praticar para as próximas lições porque é crucial para entender variáveis , é crucial entender como as funções funcionam dentro do JavaScript, a fim de construir MAWR em cálculos de profundidade e lógica. 9. 9 Saída de DOM básico JavaScript: então eu queria rever brevemente código caneta eso na última lição, nós trabalhamos um pouco com log console. E, na verdade, há uma maneira de ver o conteúdo que estamos vendo no log do console e caneta de código. É sempre para fazer é indicar Cônsul lá. E podemos ver que isso se abre e podemos ver todos esses valores que estão sendo passados . É assim que você pode trabalhar com essa caneta de código atual e atualizar e ver o que está disponível no console. Então, voltando para o nosso JavaScript, vamos nos livrar de algum desse código anterior que estivemos olhando e vamos fazer algumas atualizações aqui, então eu vou ter em vez de topo. Eu vou fazer uma saída aqui, e eu vou me livrar de muitas dessas coisas aqui. Então simplesmente eu vou ter uma maneira de produzir algum conteúdo para que seja visível para os usuários que entram na página. E eu vou fazer a mesma coisa onde eu obter elemento por eu d definir saída variável, e ele vai fazer documentos obter elemento por i d. e eu vou selecioná-lo colocar elemento. Então agora o que eu posso fazer é fazer algo como saída, HTML interno, e eu posso dizer olá ou algo assim. Vá até aqui e vamos atualizar a página. Então, o que acha que vai acontecer aqui? Eu defini a saída. Eu configurou uma variável, e ele vai conter todas as informações que estão disponíveis dentro do documento, get elemento por ID vai conter todas essas informações do elemento e, em seguida, diz simplesmente atualizar que HTML interno Uma das coisas que devo acrescentar aqui. Então, se eu fizer um log do console de saída, como fizemos com outras variáveis só vai mostrar o que acontece lá também, então eu vou para a página. Vou atualizar a página e vemos que temos o conteúdo mantido dentro da saída. Então tem toda essa informação disponível e acessível para nós. Nós também temos atualização aqui dentro da janela lá. Então, estamos atualizando essa informação e vemos que agora que ela colocou contém essa nova informação de saudação. Então, se eu tivesse algo como por, ou algo assim e atualizá-lo vemos que o novo objeto contém essa nova informação. Esta é uma daquelas coisas importantes para entender quando você está atualizando conteúdo em JavaScript. Então nós vamos acessar o DOM vai então conter essa nova informação atualizada em vez da informação original inicial. E esta é outra daquelas coisas que é importante pedir quando você está sendo apresentado. Então, se eu fosse fazer algo como obter o elemento de documento por ID e eu não atualizei o olá ainda, eu ainda teria esse valor antigo nele. Então, há uma série de fatores diferentes em jogo aqui que você deve considerar quando você está acessando o amanhecer. Então, a próxima lição vamos olhar para outra dessas coisas valiosas dentro JavaScript, a fim de fornecer alguma funcionalidade realmente legal. E isso vai ser um aumento. Então isso está chegando na próxima lição. 10. arrays básicos de 10 JavaScript: Então, nesta lição, eu queria falar sobre um aumento e como usamos um aumento em JavaScript. Agora, matrizes são diferentes das variáveis iniciais que estávamos definindo. E a maneira que eles são diferentes é que eles podem conter vários valores em vez de apenas manter um valor que eles podem conter em qualquer número de valores. E a maneira que podemos fazer isso é estabelecer lesões. Então parece tudo parecido com a maneira que estamos configurando. Esse é o objeto Dom em outras variáveis com as quais tínhamos trabalhado. Então vou chamá-lo de meu array. Então, e aqui é onde eu posso realmente colocar itens na corrida A. Eu posso ter algo como um, também. Posso até ter alguns números inteiros aqui. 79 e você notou que o formato é o mesmo que mais definir as variáveis. Então eu cito em torno das strings e eu deixo os inteiros como valores sem aspas e três e assim por diante . Então podemos definir qualquer número de valores lá. E tudo isso vai ser contido dentro da matriz de poder. E quando eu console log meu amor arranjado para copiar e colar isso para me poupar o problema de reescrever log eso console apenas para mostrar o que vai obter saída aqui dentro da matriz. Então três que, em vez de apenas ter esse valor que vemos, temos acesso a todos esses valores dentro da matriz. Há várias maneiras diferentes de fazermos um aumento. Podemos definir uma matriz dentro deste tipo de formato, ou podemos atribuir valores a ele. Se fizermos algo assim, minha matriz será, e então nós poderíamos apenas fazer você array. E aqui podemos entrar em nossos valores. Nós não precisamos necessariamente inseri-lo neste formato. Aiken entrou neste formato também e estes ar apenas maneiras diferentes. Teoh configurou sua matriz, então eu esqueci de console Log out. Então esse seria o meu árabe e mostrar-lhe como ele é apresentado novamente dentro do cônsul. Então, a mesma coisa, apenas diferentes maneiras de iniciar e configurar seu array. Então, agora, se quisermos realmente acessar esses itens na matriz e quisermos imprimi-los na saída, mostrar a vocês como podemos fazer isso Então eu vou apenas mover isso para baixo porque agora nós configuramos nossas matrizes. E se eu quisesse ter acesso a um ou dois ou qualquer um desses números, eu posso fazer assim. Onde faço a minha raça, faço-os um nome de chuva. E, em seguida, tudo o que tem a fazer é selecionar o item. Eso começando com I zero matrizes começar em zero. Então este é 01234 Então nós temos cinco itens. Podemos atribuir qualquer um desses valores. Começando com zero nos dá cinco valores diferentes. Isso ou chaves que podemos usar para determinar que parte da Serie queremos mostrar . Então eu posso fazer algo assim, fazer um aumento zero ou talvez fazê-lo um pouco mais interessante lá com um s. Então, o que você acha que vai ser na saída aqui e dar uma olhada na chuva? Então, este é o que estou acessando. E se você disse que nossa saída vai ser dois, você está correto porque este vai ser o segundo item. Eso com o valor chave de onde o valor do índice de 101234 e é assim que acessamos um aumento . E, claro, podemos até atualizar um aumento. Então, se eu quisesse atualizar esse valor do raio, isso vai funcionar da mesma forma que outras variáveis. Então podemos pegar um raio número um e valor recém-atualizado. E podemos estranhar esse valor recém-atualizado dentro dessa matriz. Então você vê que agora a saída é o valor recém-atualizado. E também olhando para aqui quando o Cônsul desligou aqueles raios, vemos que não tivemos essa mudança ocorrendo. E se eu pegar isso e colocar isso aqui, podemos ver que agora, depois e de novo, ordem é importante que depois, uma vez que atualizamos o raio, que o valor de ataque recém-atualizado está agora presente. Quando fazemos bloqueio cônsul e saída, o conteúdo de cada não dentro de um aumento. Há também alguns métodos construídos que são muito legais, e eles vão realmente permitir que você faça algumas coisas realmente legais com os raios. Eso um deles é se eu quiser saber quantos itens ar aqui dentro da matriz. Eu posso. É como um cônsul. Feche isso e eu também vou para o registro do console. É assim que se eu quiser saber quantos itens estão dentro do seu e isso vai ser importante quando estamos realmente calculando quantos itens existem, talvez nós estamos fazendo alguns loops que está chegando na próxima lição. Vamos olhar para loops e condições s. Então é aqui que o comprimento se torna importante e isso nos dará o valor total de itens que estão disponíveis dentro dessa matriz. E outro que é popular é dar a você a capacidade de realmente classificar os itens de taxa. Então veja que depois de fazer a classificação, ele vai mudar a forma como os itens da matriz são apresentados. Eso, o que aconteceu aqui? É que inicialmente, então temos o comprimento do raio. Vemos que há cinco itens em sua taxa, e então aqui temos aquela matriz inicial. Então, agora nós fizemos uma espécie de sua taxa e vemos que primeiro ele não é numérico e, em seguida, ele faz em ordem alfabética. Então 13 e também Então é classificá-lo em ordem alfabética e agora são quando acessamos esses itens específicos em sua matriz. A ordem vai ser diferente agora, então isso é uma coisa que é importante notar. Então, se eu estou colocando isso um valor de raio e eu classifiquei, vai dar as coisas ao redor. Então é um monte de coisas está recebendo saída lá, mas vemos que agora que eu movi as coisas ao redor, nossa saída ainda está acessando o item número um, que é o segundo item na matriz. E nós estamos obtendo isso e colocar dentro do nosso HTML. Então, novamente, a ordem é importante. E é assim que se trabalha com um aumento. E um aumento pode se tornar realmente poderoso porque eles podem conter um monte de informações e, em seguida ter a capacidade de classificar as coisas para calcular loop dedo através dos itens realmente adicionar esse poder adicional quando você usa um aumento e quando você está determinando como você vai definir sua lógica, é aqui que um aumento entra em vigor, e eles vão ter muito mais capacidade do que se você tivesse uma Siris de variáveis. Se eu tivesse um igual a um. B é igual a dois C igual a sete d igual a nove e igual a três. Eu não tenho toda essa capacidade onde Consort, através do comprimento eu não tenho a capacidade onde eu consorte-os alfabeticamente estavam em ordem e assim um. Então é por isso que usamos um aumento porque fora dessa capacidade adicional, quando estamos criando nossa codificação dinâmica e adicionando, aplicando nossa lógica. Então, chegando, vamos conversar. Maura isca essas coisas realmente legais funcionalidade que é construído em JavaScript que realmente acelera seu processo de atualização do código dinamicamente. Assim, ao trabalhar em uma combinação de um aumento, condições, loops e funções e variáveis, você pode obter a maior parte do que você quer feito dentro do JavaScript e a maior parte do que você quer acontecer dentro de sua página HTML. 11. 11 condições básicas de JavaScript: Então a última lição que tínhamos analisado para um aumento e outra daquelas peças realmente poderosas do JavaScript é a capacidade de fazer condições e comparações. Então eu posso realmente tomar ah, Siris de valores. E posso fazer uma comparação entre eles. Então deixe-me apenas remover em alguns desses logs de console aqui, e eu tenho que comentar thes atualizações de taxa de ar aqui porque eu realmente não quero usá-los dentro desta lição. E quando estamos fazendo condições ou comparações de valores, é aqui que começamos a aplicar essa lógica realmente poderosa no que estamos fazendo e como estamos criando nosso JavaScript. Então, se eu quiser dar uma olhada e nós vamos usar esses meus revalores eso se eu quiser ver se sete é maior ou se nove é maior que sete, eu poderia fazer algo assim onde eu poderia fazer se ou talvez nós vamos apenas manter realmente simples . E vamos ver se a minha matriz assim um ou 012 Então, se a minha taxa também, é maior, Thani, digamos cinco e eu pedi uma nova saída variável para fora. Ou talvez você devesse apenas fora não e em vez disso, apenas mantê-lo em branco lá. E aqui é quando corremos, nossa condição é comparação lá. Vou verificar se esses valores são maiores. Então, se sete é maior que cinco, vamos produzir verdadeiro e atualizar. E, na verdade, eu deveria colocar HTML de saída lá para realmente terminar isso fora. Então vemos que sete na verdade é maior que cinco. E é por isso que estamos recebendo um valor de verdade. Mas e se tivéssemos um valor de 15? Então, o que acontece agora? Na verdade, não temos nada acontecendo porque não encontramos nenhuma dessas condições. E é aqui que podemos usar outra coisa. Então outra coisa vai fazer alguma coisa se esta condição não for verdadeira. Então, para manter isso bem lógico e direto, eu vou mostrar falso para que possamos fazer uma verificação rápida. Eu só não embelezei lá para tornar o código mais legível. Eso de novo? Nós vamos ler isso e vamos ver que sete e verificar se sete é maior que 15 e que sabemos que sete não é maior que 15. A saída dolorida deve ser falsa. Refresque-se, e ficamos falsos. Agora podemos adicionar em qualquer número de critérios aqui para fazer essas condições. E isso é basicamente o que acontece é este bloco um código é o que é executado se é verdade e este é o bloco de código que é executado. Se é falso eso dentro daqui, podemos fazer qualquer número de condições lógicas e assim por diante, a fim de realmente aplicar alguma lógica realmente legal eso nós também temos menos de 15. Agora sabemos que sete serão menos de 15. Então agora devemos ver. É verdade, se fizermos alguma coisa, podemos até manter muito simples. Poderíamos nos livrar dessas variáveis e poderíamos dizer se oito é menor que 15 o que é verdade se 18 é menos de 15 falso e salão. E quando estamos olhando para isso, nós também temos a capacidade de aplicar outras declarações adicionais para que eu possa realmente fazer outra coisa se e fazer outra verificação para ver se 18 é maior que cinco e então se isso for verdade, esta lógica vai obter aplicado. Colocar HTML é igual a segunda verificação. Então, agora, se comer assim antes de tudo, ele vai vir aqui e dizer, ok, se 18 é menos de cinco. 15 se for verdade, então vamos colocar isso tem uma segunda condição aqui. Se 18 é maior do que cinco, vai fazer aquele segundo cheque, lá está Oh, que vai dar a segunda verificação. E se nenhum desses ar é verdade, vai fazer isso. Saída final de false. Então agora vemos que o segundo cheque é verdade. Você também pode fazer combinações aqui para que eu possa me livrar. Posso fazer várias verificações aqui. Então, para evitar que fique muito confuso eso eu poderia fazer algo como 18 é menos de 15 e 18 é criador do que 15. Então, o que realmente não faz muito sentido, porque uma vez que fizermos essa verificação, mas quando trabalhamos com valores dinâmicos, hum, bem, isso vai fazer mais sentido. Então, quando fazemos isso assim, ambos têm que sair para ser verdadeiro eso quando atualizamos que vemos que isso é falso porque ambos juntos não são verdade. , Podemos fazer ou assim,se qualquer um for verdade, então temos essa saída da verdade e não precisa necessariamente atender às duas condições . Eso estes ar apenas maneiras diferentes de aplicar esta lógica e trabalhar para fora o que deve ser saída quando estamos fazendo a verificação. E novamente quando estamos fazendo valores mais dinâmicos aqui, isso vai fazer muito mais sentido do que simplesmente quando podemos ter um formato legível e sabemos qual deles vai ser verdade. Então, se esses números estavam aumentando, se eles eram o valor de A ou algo assim e um contido 18 em, então aqui nós tivemos algum tipo de novo cálculo para um Então novamente, isso não vai fazer muito sentido. Então talvez eu pudesse fazer se a for menor que cinco e A for maior que 15. Então isso nos dará um valor. Então, se um realmente é um valor em qualquer lugar entre essas mudanças que e então eles são um valor de oito, devemos ver Scott para reverter aqueles eso que estamos olhando para ver. Se um é entre cinco e 15 isso vai ser verdade. E se for algo maior ou menor que isso, será falso. E agora, se tivéssemos um cálculo de um é igual a um mais. Esse é um formulário curto para fazer um incremento em um Então agora eu vou apenas redefinir um sobre 15 ou 14. Então agora ele deve sair como falso porque o valor de a é realmente vai ser 15 s. Oh, há uma série de maneiras diferentes de trabalhar com as condições do's e fazer esses cálculos. Então, a próxima lição vamos mostrar a vocês como fazer loops e loops vai ser muito legal , porque é por isso que introduziu este incremental aqui porque com loops, podemos fazer um monte de incrementos e um monte de atualizações. Eso nos poupa o problema de escrever um monte de coisas uma e outra vez. Então, se eu quiser incrementar por um, basta fazer como um monte desses incrementos por um, então há uma maneira melhor de fazer isso, e isso é o que os loops são tudo sobre. Então isso está chegando na próxima lição. 12. 12 Loops básicos de JavaScript: Então, à medida que temos trabalhado através do nosso código, há várias ocasiões em que tivemos que apenas fazer um monte de cópias e pastas e apenas escrever um monte de vezes para que possamos realmente obter o valor que estamos procurando. Então, há um batedor de distância. Então, se você quiser essencialmente loop através de um bloco de um código várias vezes e obter uma saída sobre ele, Então vamos dizer que eu queria console log A o quê? O que foi como eu sou incremental nele. E realmente, isso é um monte de escrita para conseguir isso. E novamente, é claro, provavelmente mais fácil apenas fazê-lo assim, onde eu preciso copiar e colá-lo. E agora, quando posso entrar aqui, posso ver que a está de fato, está aumentando. Então a melhor maneira de fazer isso se eu quisesse fazer um loop através dele, é que eu posso definir um valor de então vamos definir um valor de I e vamos igualá-lo a zero. Então este é o nosso valor inicial e dentro de loops, precisamos ter, uma condição que realmente nos permitirá romper esse loop porque não queremos o loop seja executado indefinidamente. Então nós queremos ter algo que realmente vai parar o nosso ciclo. Então é aqui que vamos verificar se tenho menos de 10 anos e precisamos ter uma última peça aqui dentro. E isso vai se aplicar em adição em que eu valor então isso vai incrementar que eu valorizo e nos permitir para completar o loop tem realmente algo acontecendo dentro desse loop. Então, agora quando eu me vangloriar aqui, o que você acha que vai acontecer aqui quando estivermos lá fora? Vamos produzir 10 vezes ou o que acha que vai acontecer? E talvez eu possa apenas adicionar um olho aqui é O que nós vemos o número que eu é que e novamente, lembre-se, nós estamos fazendo enquanto é menos de 10. Mas estamos começando no zero. Então, quando eu atualizá-lo, nós começamos zero e nós vemos que realmente loops através de 10 vezes e um termina fora em 24. E aqui está o nosso valor de mim como incriminador. Então isso é a mesma coisa que fazer algo assim. Então temos de 1 a 10 e salão de beleza. E a coisa realmente legal sobre loops é e um aumento é que você pode fazer algumas coisas realmente legais com, hum s para lembrar como, antes de termos olhado, nós poderíamos ver o comprimento do raio por não ter certeza para onde isso foi. Mas nós poderíamos fazer algo como minha matriz, e nós podemos obter comprimento e isso realmente nos dá o número de itens que estão disponíveis dentro dessa taxa eso Se eu começar em zero porque uma corrida começou zero, eu poderia fazer algo como saída, Minha matriz. Oy! E então vamos manter isso um incremento lá também. Então isso essencialmente nos permite olhar através de todos os itens na matriz. E essa funcionalidade é realmente útil quando estamos fazendo nossos cálculos e trabalhando com os Raios. Então, um raise e loops funcionam muito bem juntos, e ele fornece todas essas funcionalidades realmente legais. Agora podemos trabalhar em uma razão para funcionar também, hein? Então podemos chamar uma função várias vezes. Então, se nós configuramos uma função aqui e vamos dizer que esta função vai fazer alguns cálculos, minha função. E talvez possamos até fazer isso como um incremento, então não necessariamente devolva nada lá. Então veja o que acontece agora e vemos que temos a mesma coisa. Nós obtemos esse incremento de um e eu noto que nós só temos que chamar para fora para essa função uma vez no loop. Mas essencialmente todo esse código que está entre essa área em loop. Este conteúdo de loop vai ser executado através de qualquer número de vezes que estavam indicando. Então eu vou incluir todo esse código-fonte em outra caneta de código. E novamente, eu encorajo você a verificar se oito incluem o link para ele ou se você quiser usá-lo dentro de seu próprio editor, confira e veja o que você pode obter JavaScript para fazer com arrays, funções, loops e condições. E então isso é essencialmente a base do javascript e saber como todos estes como usar esta sintaxe, esta sintaxe base, conhecê-lo e usá-lo muito bem vai realmente ajudá-lo a expandir seu javascript à medida que você se familiariza com o que cada um desses métodos incorporados fazem dentro do JavaScript e o que você pode fazer e como você pode realizá-lo. Em JavaScript, ele vai ajudá-lo a construir uma base sólida para expandir e usar JavaScript e aplicativos e interações mais complexos com seu conteúdo da Web.