Fundamentos de desenvolvimento web: Javascript

1. Introdução: Olá e bem-vindo ao Web Development Fundamentals: JavaScript. Eu sou Chris, eu sou um desenvolvedor web autodidata e criador de três das aulas aqui em Skillshare, Compreendendo o desenvolvimento Web, Como construir Eficientemente sites Wordpress com Divi e, mais recentemente, Fundamentos de Desenvolvimento Web: HTML e CSS. Esta classe é o próximo passo em nossa série Fundamentos de Desenvolvimento Web. Na classe anterior, abordamos como criar páginas da Web com HTML e, em seguida, estilizá-las com CSS. Nesta aula, vamos aprender como adicionar mais recursos interativos aos nossos sites e aplicativos web com JavaScript. JavaScript, é claro, é uma das três principais tecnologias da web mundial. Diz-se que é a linguagem de programação mais popular do mundo e é a linguagem de programação para desenvolvimento web front-end desde o início da web. Portanto, independentemente do caminho que você escolher seguir, como um desenvolvedor web, você precisará de alguma compreensão do JavaScript e, especificamente, como ele se conecta às suas páginas da Web para criar sites interativos e web como muitos dos que você usa hoje. Então, se você está pronto para mergulhar e aprender os fundamentos do desenvolvimento para a web com JavaScript, continue assistindo e eu o verei no próximo vídeo. 2. O que você vai precisar: Então, antes de começarmos, é importante falarmos sobre o conhecimento necessário. Como mencionei no último vídeo, este curso é o próximo passo em nossa série de fundamentos de desenvolvimento web. Então, se você é novo no desenvolvimento web, eu definitivamente recomendo que você vá pegar minha última classe Web Development Fundamentals: HTML & CSS. Caso contrário, se você já sabe como construir páginas da Web, então você está no lugar certo para aprender como torná-las interativas. Agora, para aqueles de vocês que fizeram minha última aula sobre HTML e CSS, eu não quero me repetir muito em relação às duas ferramentas essenciais, que são um navegador web e um editor de código. provável que, se você já fez algum HTML e CSS antes, você entenda o que essas ferramentas são e como usá-las. Caso contrário, eu recomendo ir para a última classe em HTML e CSS, e revisar a lição “o que você precisa” sobre essa classe. Basicamente, além de algum conhecimento de HTML e CSS, um navegador da web e um editor de código, você está pronto para começar a aprender JavaScript. Vemo-nos no próximo vídeo. 3. Introdução ao Javascript: Então, antes de começar a trabalhar com algum JavaScript, vamos falar um pouco sobre o que é JavaScript e como ele se encaixa no desenvolvimento web. Em primeiro lugar, JavaScript é simplesmente uma linguagem de programação. O que é uma linguagem de programação? Bem, de acordo com a Wikipédia, uma linguagem de programação é uma linguagem formal que especifica um conjunto de instruções que podem ser usadas para produzir vários tipos de saída. Por que eu menciono isso? Bem, é importante diferenciar uma linguagem de programação do que as outras duas linguagens que compõem o frontend são: HTML e CSS. HTML é uma linguagem de marcação, e CSS é uma linguagem de estilo. Eu sei que isso pode soar abstrato, mas há certas coisas que linguagens de programação todas fazem que HTML e CSS não. Estou falando de cálculos explícitos, loops e funções. Para os nossos propósitos de desenvolvimento web, tudo o que você precisa saber sobre linguagens de programação é que precisamos delas para tornar nossos sites interativos. Então, a fim de compartilhar com vocês alguns exemplos do que o JavaScript pode fazer, eu tenho uma página básica da Web aberta aqui, que nós vamos realmente criar em um vídeo posterior. Mas por enquanto, temos apenas um título, temos um botão, e temos um div vazio. O que eu tenho no meu arquivo de texto aqui são algumas declarações JavaScript que eu preparei anteriormente que podemos usar para manipular esta página. Então, se eu entrar no Console aqui, eu posso executar essas instruções JavaScript diretamente no Console, e podemos ver essas mudanças acontecendo instantaneamente. Então, o primeiro vai ter o botão Pokemon, que é este, e ele vai escondê-lo. Então, eu vou colocar isso no meu console, apertar Enter, e você pode ver que ele se foi. Outra coisa que podemos fazer é mudar o HTML interno, que é apenas o conteúdo dentro de um elemento particular, então este vai realmente nos dar algum texto para nossa div vazia. Como podem ver, agora diz: “Bem-vindos à turma”. Se olharmos para os elementos e olharmos para o nosso Inspetor, ele está atualizando lá também. A próxima, também podemos adicionar qualquer número de estilo a essa div. Vou adicionar uma margem de 20 pixels. Agora, você pode ver, nós temos uma margem de 20 pixels. Finalmente, eu vou pegar o cabeçalho tag, e eu vou mudá-lo de Pokemon para Digimon. Se eu apertar Enter nisso, a mudança acontece instantaneamente. Então, vamos entrar em tudo isso na classe de como isso está funcionando, mas por enquanto, isso são alguns exemplos de coisas que você pode fazer com JavaScript. Agora, a razão pela qual devemos usar JavaScript para fazer esse tipo de coisa é porque o software que usamos para executar JavaScript é nossos navegadores. Lembre-se, o navegador é o programa que você está usando agora para navegar na Internet. Atualmente, há 90% de chance de que o navegador que você está usando agora seja Firefox, Safari, Internet Explorer ou Edge. Portanto, se um site vai funcionar em todos esses navegadores, todos eles precisam concordar sobre qual linguagem de programação eles estão indo para executar. Isso realmente aconteceu no final dos anos 90, se você está interessado em história. Mas realmente, por que devemos usar JavaScript não é tão importante. Nós só precisamos saber que temos que usá-lo para desenvolvimento web frontend. Isso é diferente das linguagens de programação de back-end, pois todas elas são executadas no lado do serviço. Lembre-se, HTML, CSS e JavaScript são executados em seu navegador e o back-end é executado em um servidor. Então, para nossos propósitos, só precisamos pensar em JavaScript como uma linguagem de programação para o frontend. Sempre que você quiser que algo aconteça sem recarregar uma página totalmente nova, JavaScript é o que você precisa usar. Um exemplo que eu gosto de usar é o aplicativo Web Planilhas Google. Veja como eu clico e arrasto através de várias colunas aqui, há comentários acontecendo na página sem que eu recarregue a página. Sou capaz de mudar a cor de fundo das células. Eu sou capaz de colocar texto em células, e mudar a cor desse texto, tudo sem recarregar a página. Agora, isso só é possível usando JavaScript. Se eu fosse para ir até aqui para este plug-in que eu tenho, e desativar JavaScript na página, e então eu recarregar esta página, agora você vai ver que o Google não vai me permitir usar este aplicativo porque é simplesmente não pode funcionar sem JavaScript. A única coisa que realmente funciona nesta página são links, que, claro, não precisam de JavaScript. Mas se eu fosse clicar na minha página inicial para folhas, isso me dá esse aviso novamente. “ JavaScript não está habilitado, portanto, ele não pode ser aberto. Ativar e recarregar.” Então, como você pode ver aqui, não é muito possível nesta página sem JavaScript. Então, agora, nós abordamos como JavaScript é uma linguagem de programação, como é predominantemente uma linguagem de programação frontend e, finalmente, que JavaScript é a única opção ao criar sites interativos. Se você ainda não está bem claro sobre o que o JavaScript faz, não se preocupe, vamos usar todo esse curso para passar por muitas das coisas que você pode alcançar com JavaScript. Então, sem mais delongas, vamos começar com JavaScript no próximo vídeo. 4. Primeiros passos com o JS: Então, parecendo que nos serviu tão bem na classe anterior sobre HTML e CSS, eu vou mais uma vez referir-me a w3schools.com como o currículo para esta classe. Então, o que eu vou fazer é abrir uma nova janela, e digitar w3schools.com. Agora que estamos no w3schools.com, podemos ver menus aqui e aqui para HTML, CSS, JavaScript, Server Side. Lembre-se, na última aula, abordamos HTML e CSS usando este currículo. Mas vamos clicar para JavaScript e clicar em Aprender JavaScript. Então, em seguida, o que eu quero que você faça é abrir suas Ferramentas de Desenvolvedor, e no navegador da Web que estou usando atualmente, que é o Google Chrome no Mac OSX, eu posso pressionar Option Command I para exibir as ferramentas de desenvolvedor. Esse é um atalho que me ajuda a abrir as ferramentas do desenvolvedor muito rapidamente, mas caso contrário, eu posso encontrar desenvolvedor acessando Exibir, Desenvolvedor e clicando em Ferramentas do desenvolvedor. Então, como eu disse na última aula, você pode estar usando o Firefox ou você pode estar usando o Safari. É uma coisa semelhante em cada um desses programas. No Firefox, eu acredito que você vai para Ferramentas, em seguida, você vai para Web Developer, em seguida, você pressionar Web Console e você é capaz de obter uma interface bastante semelhante aqui. No Safari, você só precisa ir para qualquer página primeiro. Uma vez que você está em uma página, você pode clicar em Desenvolver e, em seguida, você pode clicar em Mostrar Inspetor da Web e, em seguida, obter uma interface semelhante aqui também. Então, nesta classe vamos trabalhar principalmente com o console JavaScript, então é a guia final no Safari, mas no Google Chrome é na verdade a segunda guia. Então, se eu exibir as Ferramentas do Desenvolvedor novamente, nós temos o Console aqui. Se você se lembra da última classe, trabalhamos muito com essa guia Elementos para inspecionar nosso HTML e ver quais estilos estamos aplicando aqui em nossas regras CSS. Agora, a razão pela qual eu pulei para o console imediatamente é porque ele é muito útil para nos ajudar a executar JavaScript e também depurar o JavaScript que está sendo executado em nossa página. Então, o console, basicamente, nos permite interagir com uma página web, mais uma vez, executando expressões JavaScript no contexto desta página ou tendo nosso JavaScript saída algo para este console para que possamos realmente vê-lo e descobrir o que está acontecendo. Isso provavelmente é difícil de conceituar agora se você não tem nenhuma experiência com JavaScript, mas você verá muito logo que começarmos a construir algum JavaScript que você começará a usar o console aqui. Então, o que eu poderia fazer é quebrar isso em uma nova janela. Então, eu posso fazer isso clicando aqui e pressionando Desacoplar em uma janela separada, então agora eu tenho isso fora para o lado. Agora, o que podemos fazer neste console JavaScript, apenas como um exemplo, é que podemos executar qualquer JavaScript. Então, digamos, por exemplo, que queríamos 5 vezes 5, e pressionamos Enter, isso nos dá 25. Então isso é um simples problema matemático. Podemos criar uma variável chamada x e chamar que 5, e então podemos, vezes 5 por x, e ver o que acontece, e obtemos o mesmo resultado. Então, nós somos capazes de executar JavaScript bem aqui. Como você verá, usaremos parte da página da Web para realmente afetá-la usando esse console também. Você pode clicar aqui para limpar e, em seguida, você está de volta para onde começou. Agora, o console é ótimo para descobrir coisas e testar coisas, mas assim que recarregamos a página, perdemos tudo o que fizemos aqui. Então, se eu fosse definir uma variável de x e torná-la 10, como você viu antes, podemos usar variáveis agora para fazer qualquer matemática para problemas aqui. Mas se eu recarregar a página e voltar para aquela janela, primeiro, terei que limpar toda essa bagunça aqui. Mas se eu digitar x, ele vai aparecer com um erro, x não está definido. Então, o que precisamos é ter um arquivo JavaScript onde possamos armazenar todas as nossas linhas JavaScript. Agora, isso será uma coisa futura que faremos quando começarmos a implementar em nosso projeto. Se você tomou compreensão do desenvolvimento web, você veria como podemos incorporar um arquivo JavaScript em nosso projeto. Se você pegou a última classe em HTML e CSS, você saberia como trazer uma folha de estilo externa. É basicamente o mesmo conceito de uma folha de estilo externa, nós apenas colocar todo o nosso código em outro arquivo e, em seguida, trazê-lo para o nosso projeto. Mas novamente, por enquanto, vamos usar o que está em nosso navegador. Então, vamos direto para alguns exemplos agora. Então, aqui em baixo, diz “Aprender por Exemplos”. Então, podemos clicar neste link para ver alguns exemplos de Javascript, e podemos clicar em Exemplos explicados. Então, aqui estão algumas das coisas que o JavaScript pode fazer. Ele pode alterar o conteúdo HTML. Então, um dos muitos métodos JavaScript no contexto de HTML é getElementByID (). O que estamos fazendo aqui é pegar o documento, estamos encontrando um elemento pelo id de demonstração, e estamos alterando esse atributo aqui, que é innerHTML para Olá JavaScript. Ok? Então, vamos clicar em Experimente você mesmo para ver o resultado. Se eu clicar neste botão que diz Clique em mim, de repente, isso foi alterado. Agora, se eu clicar em Executar para atualizar aqui, você verá que esta tag de parágrafo tem um id de demonstração. Então, o que eu estou fazendo neste botão, usando este atributo, e não se preocupe vamos cobrir o que está acontecendo aqui em um vídeo posterior. Mas essencialmente, no exemplo aqui, temos este botão acionando um método onclick deste, que irá definir qualquer elemento que tenha um id de demo para ter um innerHTML de Olá JavaScript, e innerHTML apenas basicamente significa tudo dentro dessas duas tags. Então, você pode ver, quando clicamos no botão, tudo entre essas duas tags agora se torna Olá JavaScript, e você pode ver isso acontecendo ao vivo na página. Isso é o que é ótimo sobre JavaScripts, as mudanças acontecem imediatamente sem que você tenha que recarregar outra página. Então, voltando para os exemplos, também podemos alterar valores de atributo. Agora, para este, o que eu quero que você faça é trazer o console do desenvolvedor. Nós vamos limpar, e eu quero que você inspecione esta imagem, e veja o que está acontecendo aqui. Esta é a coisa boa sobre o Inspetor, podemos ver quais atributos estão mudando quando estamos fazendo algo. Então, eu vou precisar correr estes lado a lado para que possamos realmente ver o que está acontecendo. Mas dê uma olhada na luz e aqui quando eu clicar nesses botões. Então, se eu acender a luz, a luz acende. Desligue a luz, a luz se apaga. Mas como você pode ver aqui, o que realmente está acontecendo no código real é que os arremessos mudam aqui. Então, eu quero que você olhe para aqui quando eu clicar em desligar a luz, lá vai você. Agora, você pode ver que é Pic_ Bulboff. Então, ele está completamente trocando o campo SRC que lhe diz, desculpe eu tenho que clicar nisso, e então você pode ver as imagens completamente alteradas. Na verdade, ele está trocando o atributo SRC aqui para colocar em outra imagem. Então, isso é muito legal. Podemos alterar valores de atributo também. Então, também podemos mudar o estilo HTML, então CSS basicamente. Vou expandir para este exemplo e clicar em Experimente você mesmo. Se eu clicar aqui, você pode ver que o tamanho da fonte foi alterado, e nós fizemos isso colocando novamente o id de demo em uma tag p e estamos mudando o atributo de estilo e o sub-atributo do tamanho da fonte para 35 pixels. Isso acontece assim que clicamos no botão Clique em mim por causa desse atributo onclick. Novamente, vamos cobrir isso que é chamado de manipulador de eventos em um vídeo posterior. Mas agora, apenas pelo exemplo, é bom saber o que o JavaScript pode fazer. Você também pode ocultar e mostrar elementos, então isso é bastante básico. Você clica no botão e ele pode ocultar certos elementos, e isso é apenas definindo a propriedade de exibição de estilo como nenhum. Então, aqui está o exemplo para mostrar apenas para torná-lo completo. Lá vai você. Isso é exatamente o oposto. Então, definimos o atributo de exibição para bloquear em vez de nenhum. Agora, se você se lembrar de volta para a classe HTML e CSS, eu estava falando sobre por que nós definiríamos um determinado elemento para exibir nenhum, e esta é a situação perfeita por quê. Então, temos este p, está disponível, está no documento, mas não está aparecendo. A razão pela qual queremos fazer isso é para termos alguma situação em que mudamos seu estilo de exibição para que ele apareça. Então, aqui mesmo, quando a página é carregada, ela não vai aparecer porque o estilo está definido para exibir nenhum, mas assim que clicamos nesse botão, a exibição foi alterada para bloquear. Então, isso é bom para a última aula. Se você não sabia por que estávamos fazendo isso ou você só precisa ver um exemplo, aí está ele. Legal. Então, esses são os exemplos básicos de JavaScript e eu acho que é uma boa introdução ao que JavaScript pode fazer. No próximo vídeo, vamos cobrir as coisas importantes. Vamos cobrir sintaxe e declarações. Então, vamos entrar em todas as coisas diferentes nesta lista, não necessariamente todas essas, mas todas as coisas importantes a fazer com o básico do JavaScript. Então, obrigado por assistir, te vejo no próximo vídeo. 5. Sintaxe e declarações do JS: No último vídeo, abordamos uma introdução ao JavaScript. Também compartilhamos alguns exemplos comuns do que o JavaScript pode fazer. Agora, neste vídeo, vamos abordar algo que é muito importante ao aprender qualquer linguagem de programação, e isso é sintaxe. Então, eu vou clicar sobre este item de menu para a sintaxe JS, e vamos olhar para algumas das sintaxe para JavaScript. Se você não está familiarizado com a palavra sintaxe, basicamente, é o conjunto de regras que determina como você escreve código JavaScript, ou sintaxe em geral, é basicamente a gramática de como você escreve código em uma determinada linguagem. Há certas coisas que são comuns em todas as linguagens de programação, como declarar variáveis, atribuir valores e valores de computação. Aqui estão alguns exemplos de como ele ficaria em JavaScript. Mas vamos nos aprofundar agora mesmo. Em termos de tipos de dados, temos alguns comuns aqui, números e strings. Numbers, você não precisa colocar aspas simples ou duplas. Você apenas literalmente colocar em alguns dígitos e não importa se é um decimal ou um número inteiro que também é chamado inteiro. Ainda é considerado um número em JavaScript. Para strings, e strings, eu acho que como um termo de programação, mas não é tão difícil de entender. Basicamente, é só texto. Sempre que você escreve uma string, para que você possa diferenciá-la de palavras-chave como em seu código, você sempre tem aspas duplas ou aspas simples em torno dela. Então, rolando para baixo podemos ver variáveis, e podemos ver como primeiro de tudo, declarar uma variável e, em seguida, também atribuir um valor a ela. Normalmente, isso é feito de uma só vez. Se eu clicar, Tente você mesmo, você pode ver aqui nós temos declarando uma variável aqui. Então, nós temos a palavra-chave de var, espaço e depois um X. Então, nós primeiro declaramos que queremos ter uma variável chamada X, e então nós estamos pegando essa variável e nós estamos atribuindo um valor de seis nesta operação. Então estamos colocando o valor de X para fora na tela através deste elemento chamado demo. Agora, geralmente isso é feito de forma abreviada, e podemos apenas retroceder lá, clicar em Executar, e ambos podemos declarar e atribuir uma variável em uma linha. Isso é o suficiente frequentemente o caso a menos que quiséssemos declará-lo em um escopo diferente e, em seguida, atribuí-lo em um escopo diferente, que eu mostrarei mais tarde quando cobrirmos escopo JavaScript. Então, temos operadores que são bastante comuns. Você só tem mais, menos o asterix para multiplicação e você tem a barra para divisão. Então, você pode ver aqui como você escreveria um problema de matemática para o resultado de cinco mais seis vezes por 10. Agora, uma coisa que você pode se confundir com linguagem de programação, é este sinal de igual. Isso não significa que X é igual a cinco. Significa que cinco é atribuído à variável X. Agora, não é a mesma coisa que você pode estar perguntando? Bem, não. Se fôssemos escrever uma declaração if, que é basicamente apenas uma declaração que irá executar código. Se algo for o caso, usamos o dobro igual ou o triplo igual. Mas vamos para isso na lição sobre operadores de comparação, mas por enquanto, quando você vê isso igual, isso significa que estamos atribuindo uma variável ou um valor a uma variável. Aqui estamos cobrindo expressões. Isto é bastante auto-explicativo. Estamos recebendo um cinco e estamos cronometrando por 10, estamos pegando o valor de X e estamos cronometrando em 10. Mas aqui talvez não seja tão óbvio, e é assim que podemos unir cordas. Então, se quiséssemos construir uma string, talvez quiséssemos colocar uma variável aqui, somos capazes de usar o operador plus. Então, você pode fazer uma string de John mais uma string de um espaço em branco mais uma string de Doe, e isso irá avaliar para John Doe espaço. Neste momento, isso não faz sentido, mas se colocássemos certas variáveis, isso poderia ser substituído por uma determinada variável. Na verdade, posso demonstrar isso agora para vocês. Como você pode ver aqui, John mais espaço mais Doe, avalia como John Doe. Mas digamos, por exemplo, que eu posso entrar aqui e fazer variáveis X iguais, e eu estou digitando uma string, então lembre-se que eu tenho nossas aspas de abertura e fechamento, e talvez seja uma inicial, então nós colocamos em J. Então aqui, em vez de um espaço em branco, nós colocaríamos em X. Agora, se executarmos isso, você verá que o valor de X, e deve ser uma string porque estamos montando strings, é J, e então ele o coloca entre elas. Esse é um bom exemplo de quando você deseja montar como strings literais que você define aqui e outras variáveis que contêm strings. É assim que você faria. Eles também estão falando de palavras-chave que surgem neste contexto como azuis. Nós já olhamos para a palavra-chave var, que diz ao navegador para criar variáveis. O que você faz é colocar var, espaço e, em seguida, o nome da variável a declarar. Deseja declarar várias variáveis ao mesmo tempo? Você pode apenas usar uma vírgula e, em seguida, colocar outra variável lá. Então aqui, depois de termos declarado, estamos agora atribuindo valores a essas variáveis diferentes. Como você pode ver aqui, estamos usando uma variável que já declaramos e atribuímos estamos colocando o resultado disso contra 10 aqui, e estamos recebendo uma nova variável que é Y. Outra coisa que você verá com bastante frequência é comentários. Isto é se você está usando HTML, CSS, JavaScript ou qualquer outra linguagem. Às vezes, você quer escrever coisas no código que você não quer ser executado. Por exemplo, você pode querer explicar o que está acontecendo nesta linha. Você pode querer dizer, isto atribui cinco à variável X. Você normalmente não teria que escrever um comentário tão básico, porque esta é uma função tão básica. Na verdade, há um erro aqui. Vou certificar-me de que este ponto e vírgula não está no comentário. Se eu fizer isso, nada muda. É apenas um comentário no código. Como você pode ver aqui, também podemos usar comentários para manter o código que escrevemos, mas não executá-lo. Se eu apenas remover esse comentário, e eu parei o comentário de lá, você verá X torna-se seis agora e ele vai pegar o último valor atribuído de X e colocá-lo lá. Mas se vamos colocar alguns comentários lá, vai voltar para cinco. Agora, basta ter em mente que isso vai começar o comentário logo após ele em uma linha separada. Então, se formos para uma nova linha e digitar em var y, você pode ver que não está verde agora porque estamos começando uma nova linha. Mas se você quiser fazer um comentário sobre várias linhas, o que você pode fazer é, abrir com uma barra e um asterix e, em seguida, fechar com asterix e uma barra. Então, podemos escrever qualquer número de código de várias linhas e tudo será um comentário. Então, não será executado. Se eu disser, Y é igual a sete e então, na verdade, vamos mover isso para baixo aqui, e digamos que X é igual a sete. Vamos executar isso. Você verá que ele não está sendo executado porque está dentro de um comentário. Considerando que se eu remover estes, e executá-lo, você verá que x é agora sete. Na verdade, isso é sintaxe ruim porque eu estou re-declarando a variável. Eu posso colocar assim e X agora será o valor de sete. Então, seguindo em frente, existem algumas outras coisas em JavaScript que são realmente importantes. Uma é que o JavaScript diferencia maiúsculas e minúsculas Como você pode ver aqui, Sobrenome com N maiúscula é diferente do sobrenome, tudo em minúsculas. Se você escrevesse esta variável em maiúsculas completamente, seria uma variável totalmente diferente. Isso pode ser confuso para alguns que vieram linguagens de programação que não diferenciam maiúsculas de minúsculas. Mas na minha opinião, é uma característica muito boa de ter e isso é porque podemos usar algo chamado Camel Case. Então Camel Case, para aqueles de vocês que podem não ter feito um monte de programação antes, é uma ótima maneira para nós criar nomes de variáveis quando temos várias palavras em um único nome. Então, como você pode ver aqui nós podemos ser tentados a fazer primeiro nome e nós vamos apenas dividir as palavras, mas isso não é permitido em JavaScript. Uma coisa que podemos fazer é usar sublinhados para separar palavras, mas uma maneira muito mais limpa que muitos desenvolvedores preferem é Camel Case. Então, isso é capitalizar a primeira letra de uma das palavras ou ambas as palavras. Então, neste exemplo estamos capitalizando todas as primeiras letras de cada palavra, mas mais comumente é menor Camel Case que está começando com minúsculas e, em seguida, uma vez que chega a uma nova palavra a primeira letra dessa palavra é maiúscula. Então esse é o Camel Case. Então, agora chegamos ao final da página e é hora de ir para instruções JavaScript. Então, apenas clicando em instruções JS, podemos ter uma olhada em uma instrução JavaScript e podemos dividi-lo pelas diferentes partes que é composto de. Então, temos operadores de valores, expressões, palavras-chave e comentários. Então aqui embaixo, podemos ver que esta declaração específica diz ao navegador para escrever “Hello Dolly” dentro de um elemento HTML com o ID de demonstração. Então, passando por esta declaração, começamos com um objeto no topo que é documento e que apenas visa todo o documento, então podemos ir um passo mais fundo obtendo um elemento por ID de demonstração dentro desse documento, então podemos alterar um atributo com base nesse elemento particular. Estamos atribuindo um valor, então usamos um operador de atribuição e, em seguida, colocamos em um valor. Então, voltando para o outro lado, estamos pegando um valor, estamos atribuindo-o a um atributo que está em um elemento particular, que usamos para encontrar tomando o contexto do documento e, em seguida, cavando mais fundo. Novamente, vamos rever essa parte específica do código em vídeos posteriores, então não se preocupe muito em entender isso. Mas basicamente, estamos apenas quebrando o que está acontecendo em uma única declaração agora. Parte muito importante das declarações é ponto e vírgula. Então, ponto-e-vírgula são necessários para terminar uma instrução executável. Então, se você está para dizer por exemplo, declarar um monte de variáveis e, em seguida, atribuir algumas variáveis, uma vez que você terminar uma instrução, você tem que colocar um ponto-e-vírgula. Então, com algumas linguagens se você colocar algo em uma nova linha, então a linguagem de programação sabe que é uma nova instrução e executa-los separadamente. Porque temos que usar ponto-e-vírgula com JavaScript, podemos realmente colocar todas essas instruções na mesma linha. Normalmente, essa não é a melhor idéia porque ainda queremos colocar um código bem, com aninhamento e novas linhas para que possamos ver diferentes declarações, mas essa é uma opção disponível para nós. A outra coisa a observar sobre JavaScript, é que ele ignora vários espaços, que você possa adicionar tanto espaço em branco quanto quiser ao seu projeto ou ao seu código, a fim de entendê-lo melhor. Então, essas duas linhas são equivalentes, mas eu acho que a maioria de nós concordará que isso é um pouco mais agradável porque nos dá um pouco mais de espaço em branco, um pouco mais de espaço para respirar em torno do operador de atribuição, o valor e a variável. Então, como diz aqui, é uma boa idéia colocar espaços em torno de operadores. Mas poderíamos essencialmente remover todos os espaços aqui, aqui, aqui e aqui. Não conseguimos remover este espaço porque esta é uma palavra-chave e precisa terminar com um espaço em branco, mas em termos disso aqui, poderíamos remover todo o espaço em branco e ainda funcionará, mas vai parecer feio. Portanto, recomenda-se colocar espaço em torno dos operadores, mas não essencial. Então, novamente, cada instrução é terminada por um ponto e vírgula e isso significa que podemos colocar várias instruções na mesma linha como fizemos aqui, ou alternativamente, podemos quebrar uma declaração muito longa, colocando-a em várias linhas. Enquanto quebrarmos com um ponto-e-vírgula quando estiver pronto, tudo bem dividi-lo em várias linhas. A próxima coisa é blocos de código, que se estamos definindo uma função ou um loop, vamos iniciar um bloco que é executado como parte dessa função ou parte desse loop. Fazemos isso usando ponto-e-vírgula. Então, em algumas linguagens de programação, só precisamos de uma nova linha ou temos uma palavra-chave que dirá final no final, mas em JavaScript começamos um colchete e, em seguida, terminamos com um colchete encaracolado. Então, tudo dentro desses dois colchetes é parte dessa função. Dito isto, também podemos usar palavras-chave para encerrar um bloco. Então, você não precisa usar esses colchetes o tempo todo, podemos realmente usar palavras-chave, mas podemos ver alguns exemplos disso em um vídeo posterior. Por enquanto, a maneira padrão de fazer isso é apenas adicionar esses colchetes e, em seguida, tudo dentro dos colchetes é o que faz parte desse bloco de código. Tudo bem. Então, nós cobrimos um monte de coisas para fazer uma sintaxe neste vídeo. Muitas das coisas que estamos falando aqui são lições que ainda não aprendemos em JavaScript, então não fique muito preocupado se você não entender tudo o que está acontecendo aqui. É importante cobrir essas coisas sintáticas diretamente para cima porque digamos, por exemplo, que você faz um erro sintático mais abaixo da pista talvez porque você tenha experimentado em uma linguagem de programação diferente e não é o mesmo que em JavaScript, você pode ficar frustrado em não saber do que está falando. Então, quando se trata de sintaxe, é melhor seguir os exemplos e não tentar mudar demais o sistema e dessa forma você terá menos chances de ter quebras em seu código. Então, isso é sintaxe, no próximo vídeo vamos cobrir a saída. 6. Saída do JS: Então, neste vídeo, vamos cobrir as possibilidades de exibição com JavaScript. Então, se eu clicar na saída JS no menu aqui, podemos ver que JavaScript pode “exibir” dados de maneiras diferentes. Então, temos visto isso com HTML interno, para que possamos escrever diretamente no elemento HTML usando HTML interno. Também podemos escrever em uma saída HTML usando document.write. Então, como vimos antes, este é um objeto chamado “documento”, que representa o documento inteiro. Então estamos chamando um método sobre o de “escrever”. Então aqui, podemos colocar em alguma saída. Vamos chegar a esse exemplo em apenas um segundo, podemos usar o alerta e este é realmente básico que você vê muito em um treinamento em JavaScript, mas se eu for para o meu console e eu apenas limpar o que está lá, eu posso começar um alerta direito Agora. Então, eu posso dizer “Olá Skillshare!” Agora, você pode ver, um alerta aparece dizendo: “Olá Skillshare!” Então, essa é uma maneira, alerta está meio desatualizado agora, geralmente só é usado para se você está prestes a excluir algo, e é realmente importante chamar sua atenção, então você pode ter visto isso antes. Se executarmos isso, ele pode dizer, “Oh, você tem certeza que deseja excluir?” e, em seguida, pressione “OK” e você terminou de excluir. O comum que estou usando muito para depurar é console.log. Isso nos permite escrever no console do navegador. Não vai necessariamente fazer sentido agora. Fazendo isso aqui porque já estamos no console, mas dentro do código que criamos, posso fazer com que ele registre algo no console. Então, vamos apenas dizer, “Olá Console.” Se eu executar isso, ele vai voltar com Hello Console. Não é um exemplo muito prático porque estamos dando importação e estamos pegando diretamente de volta. Mas o que você pode fazer dentro seu código em seu JavaScript que está realmente em execução na página, você pode definir um console.log e para que você possa obter feedback sobre o que está acontecendo, em sua página para o seu console aqui. Então você pode ver, “Oh, isso é o que essa variável é, ok. Preciso mudar isso.” Mas novamente, vamos mais tarde para como depurar código mais tarde nesta classe. Então, o primeiro exemplo é usar InnerHTML e eu não quero gastar muito tempo nisso porque, nós já cobrimos isso em alguns dos exemplos básicos. Podemos basicamente colocar em algum HTML entre essas duas tags p. Então, se eu usar o exemplo aqui, JavaScript é realmente bastante inteligente, percebe que estamos tentando colocar em uma string aqui, mas temos uma operação com números aqui. Ele leva o resultado do cálculo aqui, converte-o em uma string para que ele seja exibido como texto em nossa tag p aqui. Então, se inspecionarmos aqui, eu coloquei isso para que possamos realmente ver. Você pode ver que é o nosso p id=demo e dentro, temos o resultado dessa equação que é 11. Então, o próximo exemplo é document.write. Então, podemos usá-lo para fins de teste, eu nunca me encontro usando gravações de documentos pessoalmente porque eu estou sempre usando console.log, mas podemos experimentar o exemplo aqui. Você pode ver aqui, que nós já executamos. Mas você pode ver que agora estamos escrevendo os resultados de cinco mais seis para a página. Então, a diferença entre este e o último se eu entrar e inspecionar, colocar isso para baixo e inspecionar aquele 11, está sentado apenas no documento. Ele não tem uma tag p ou qualquer coisa porque nós estamos basicamente escrevendo na seção do documento onde o código é especificamente escrito se isso faz sentido. Então, em vez de no exemplo anterior, encontrar um determinado elemento, e, em seguida, mudar um atributo para colocar o resultado diretamente em um elemento HTML que existe em qualquer lugar na página, estamos simplesmente dizendo, onde quer que isso seja executado, escreva-o na tela. Talvez possamos colocar esta tag de script aqui. Novamente, este não é um código muito limpo, mas talvez funcione. Podemos ver aqui que se eu for inspecionar isso, agora você verá que 11 está escrito dentro dessa tag p porque temos um script dentro dessa tag p. Mas isso não é um código muito bom, isso não é muito limpo, então eu não recomendaria que se você quisesse que ele saísse para esse p, devemos usar o exemplo anterior usando HTML interno. Nesse caso, é por isso que eu nunca realmente me encontro usando document.write, mas essa é uma opção lá. Então, nós cobrimos o alerta pouco antes, e console.log é o que eu estou usando com tanta frequência para depurar. Como você vê aqui, ele diz: “Você aprenderá sobre depuração em um capítulo posterior.” Definitivamente para nossos propósitos, estaremos aprendendo sobre depuração de JavaScript mais tarde também. Tudo bem. Então, isso cobre a saída, este é o que você usará com mais frequência, ou você estará alterando o conteúdo na página, não se preocupe muito com alerta de janela ou document.write. No próximo vídeo, vamos falar sobre variáveis. Então, estou ansioso para vê-lo na próxima. 7. Variáveis do JS: Neste vídeo vamos cobrir variáveis. Se eu for para variáveis JS aqui, podemos ver alguns exemplos de coisas que já vimos a partir das lições sobre sintaxe. Mas vamos rolar para baixo e cobrir algumas das coisas que ainda não vimos. Eu definitivamente recomendo voltar a esta página e lê-la para que você entenda tudo o que você realmente precisa saber sobre variáveis. Mas se você entendeu, quando passamos por variáveis na introdução e vídeo na sintaxe, então você deve saber o suficiente para continuar. Nós cobrimos como você pode criar muitas variáveis em uma instrução usando uma vírgula, e essa declaração pode abranger várias linhas, desde que terminemos essa instrução com um ponto-e-vírgula. Algo que ainda não discutimos é o valor do indefinido. Se eu declarar uma variável de carName aqui, e eu realmente não atribuir qualquer valor a ela, qual é o valor dela? Então essa é uma boa pergunta. Se você realmente não definir um valor para algo, ele acaba tendo um valor indefinido. Para ver que em nosso console, se eu fosse fazer var CarName e, em seguida, eu apenas saída CarName, ele vem como indefinido. Se eu fosse atribuir um valor de Mazda, que é o carro que eu dirijo, ele vai resolver para Mazda lá. Mas, em seguida, se eu digitar o meu CarName novamente e pressionar Enter, ele vem com uma seqüência de Mazda. Antes de atribuir um valor a ele, ele é apenas indefinido, e vai ver mais tarde por que isso realmente é importante. Outra coisa importante a observar aqui é que se você declarar novamente uma variável JavaScript, ela não perderá seu valor. A variável carName, ainda teremos o valor de vulvar após a execução das instruções. Ao colocar nesta instrução, depois de definir um valor em uma variável, ele realmente não limpa-lo e defini-lo de volta para indefinido. Como você pode ver aqui, podemos fazer aritmética. Nós também podemos adicionar strings juntos. O termo técnico para isso é chamado de concatenação. Eu não iria falar mais sobre isso porque nós já fizemos isso no exemplo anterior, mas você também pode usar esses operadores, não só para adicionar números juntos, mas também para adicionar strings juntos. Agora JavaScript é realmente muito inteligente e o fato de que ele não vai errar quando você tenta e colocar uma string e uma variável juntos. Se nós rolar para baixo a partir daqui, podemos ver que você pode realmente usar o operador mais em uma única instrução com strings e números. Agora, algumas linguagens de programação não permitiriam que você fizesse isso porque ele veria que este é um tipo de dados de string e este é um tipo de dados de número, e ele não saberia o que fazer. Talvez você queira adicionar cinco e dois juntos para fazer sete, nesse caso, você trataria isso como um número, não uma string, ou r talvez você queira adicionar a string de dois à string de cinco, e nesse caso você obteria 52. Em JavaScript, ele irá tratá-los como strings porque o primeiro valor é uma string. Então, se clicarmos aqui e experimentá-lo, você pode ver que o resultado de adicionar cinco como uma string e, em seguida, dois e três como um número é cinco, dois, três. É a mesma coisa que se nós fomos para aqui, e nós explicitamente chamado essas strings apontando aspas duplas onde o valor real está sendo atribuído a x, você vai obter os mesmos resultados porque é apenas tomar esses dois números e alterando-os para strings com base no tipo de dados do primeiro número que é realmente declarado como uma string. Se eu fosse remover as aspas duplas do primeiro número, ele voltaria a ser um número de tipo de dados. Se eu correr, então você ganha cinco mais dois mais três, e o resultado disso é 10. Isso pode levar algum tempo para enrolar sua cabeça e isso é legal. Geralmente, você não deve misturar tipos de dados para menos operações. Se você quiser fazer uma operação aritmética com números, não coloque as aspas. Se você quiser adicionar strings juntos, certifique-se de usar aspas duplas. Se você quiser combiná-lo assim, é quando ele começa a ficar um pouco complicado, e muitas vezes você não vai se encontrar fazendo isso a menos que seja um erro. Você realmente não precisa se preocupar. O outro lado disso é alterando a ordem. Se tentarmos isso, podemos ver que os dois primeiros números somados juntos, mas então porque ele está adicionando uma string no final, ele adiciona cinco como uma string, se isso faz sentido. É a mesma coisa que se colocássemos estes entre parênteses e clicássemos em Executar. Todos nós colocamos os resultados de que explicitamente como um cinco, nós obteríamos o mesmo resultado. O que está fazendo é resolver esses dois números, adicionando-os juntos em uma operação aritmética e, em seguida, transformando isso em uma string e concatenando-o com essa string. Novamente, essas são coisas que eu não tenho que lidar regularmente porque eu apenas sigo a regra geral. Se estou fazendo aritmética, uso números. Se estou concatenando strings, eu uso strings, simples assim. Mas se você tentar combinar cordas e números, é quando você começa a ver um pouco desse comportamento estranho. Essas são variáveis JavaScript. No próximo vídeo, vamos falar um pouco mais sobre operadores. Então, vemo-nos na próxima. 8. Operadores do JS: Neste vídeo vamos cobrir Operadores JavaScript. Isso é realmente importante porque, como mencionamos aqui, isso não significa igual, significa atribuição. Esse é um dos erros comuns com os operadores, mas vamos aprofundar isso agora. Este sinal de igual significa atribuição e que é o operador mais comum que você verá em JavaScript ou praticamente qualquer linguagem de programação é que precisamos atribuir valores a variáveis. O sinal de igual é o operador de atribuição e atribui um valor a uma variável. O operador de adição adiciona a números dados, mas também como vimos antes que ele pode adicionar para dar um strings bem ou um termo adequado seria concatenação. Ele combina cordas em conjunto para formar uma corda maior. O operador de multiplicação multiplica números, isto é algo que você deve saber tomando qualquer classe matemática básica, adição, subtração , multiplicação e divisão, você também pode fazer algo chamado módulo, que lhe dá o restante depois de dividir dois números. Há dois outros operadores aqui, o operador de incremento e decremento em JavaScript. Como você pode ver aqui, esses operadores aritméticos são totalmente descritos no capítulo sobre JS Aritmética, que vamos abordar brevemente no final desta lição. Indo para operadores de atribuição JavaScript, operadores de atribuição atribuem valores a variáveis JavaScript. O mais fácil é igual, mas na verdade há alguns diferentes. Há esses operadores abreviados que nos permitem economizar espaço. Eles obviamente não são tão essenciais, quero dizer, a diferença entre escrever isso e escrever isso não é enorme mas se você quiser economizar tempo e basicamente adicionar y a x, você pode fazer isso com isso. Se você queria subtrair y de x e , em seguida, x ser a diferença entre aqueles que você pode usar esse operador. Como vimos antes, temos operadores de string JavaScript também. Podemos concatenar strings usando o plus, e também podemos usar o abreviado mais igual a concatenar strings para que o que podemos fazer é ter uma string aqui para o texto 1, e então podemos adicionar a ele usando este operador de atribuição de concatenação . Vamos mostrar isso como um exemplo. Nós temos “o que é muito “espaço e então nós estamos adicionando a esse “bom dia”. Quando saímos de texto 1, obtemos a string completa. Isso é o equivalente a fazer isso, que é colocar no texto 1 novamente e, em seguida, colocar um plus para que você obtenha exatamente o mesmo resultado, é apenas uma abreviação. Voltando para a página, podemos adicionar strings e números juntos como vimos antes. Estes são exemplos que abordamos em uma das lições anteriores, eu não vou passar por isso novamente, mas a coisa importante a notar aqui é operadores de comparação. Como eu disse antes, uma das coisas que mesmo como um programador experiente que você às vezes pode esquecer e especialmente como um novato, é que o operador de atribuição, o único igual, não representa igual a e para isso é ou duplo igual ou triplo igual. Duplo igual é o comum, mas há uma ligeira diferença entre estes dois. Este irá avaliar como verdadeiro se o lado esquerdo é igual valor para o lado direito. Este só irá avaliar como verdadeiro se o lado esquerdo é igual ao lado direito e eles são do mesmo tipo. Isso é um pouco mais técnico e podemos entrar nisso tarde, mas, por enquanto, isso deve ser suficiente para você fazer a comparação de se duas variáveis são iguais. Este não é igual, então você apenas coloca um ponto de exclamação e um sinal de igual e isso irá avaliar como verdadeiro se o lado esquerdo não é o mesmo que o lado direito, e isso é o mesmo que isso, mas o oposto, nós também podemos fazer maior que, menor que, maior ou igual a, menor ou igual a e então há também este operador ternário. Eu não sei se vamos entrar em operadores ternários nesta classe particular, mas se você gostaria de aprender mais sobre operadores ternários, definitivamente procure. É apenas uma maneira mais curta de fazer “se-então” declarações basicamente. Também temos operadores lógicos. Se fôssemos verificar se duas afirmações eram verdadeiras, poderíamos fazer. Esperemos que haja um exemplo aqui. Não há. Vamos criar nosso próprio exemplo aqui. Vamos testar algo. Vamos colocar em uma declaração, cinco é igual a cinco. Volta a ser verdade. Vamos colocar quatro igual a cinco, falso, isso é o que esperávamos. Usando um não é igual, se eu fizer quatro não é igual a cinco, devemos ser verdade. Isso é o oposto. Você pode estar pensando, Chris, é óbvio que cinco e cinco são iguais e quatro e cinco não são iguais, por que estamos fazendo isso? Podemos substituir esses valores explícitos por variáveis. Se eu fosse declarar uma variável de x igual a 10 e declarar uma variável de y igual a 20. Se eu colocasse em um depoimento como este, ele volta falso. Se eu colocasse em uma declaração como esta, ela volta a verdade porque eles não são os mesmos. Agora, onde os operadores lógicos entram é que eu posso combinar duas declarações. Vamos combinar os dois primeiros. Temos cinco igual a cinco, que sabemos que vai ser verdade, mas queremos que a afirmação só seja verdadeira se x for igual a y também. Se colocarmos x é igual a y, ele vai voltar falso porque a primeira parte é verdadeira, mas a segunda parte é falsa. É só se ambos forem verdadeiros, mas também podemos usar tubos para todos. Se eu fosse fazer a mesma declaração e colocar em canos em vez disso, isso acontece como verdade porque qualquer um desses lados precisa ser verdade para que tudo seja verdade, porque é O. Isso é verdade, isso não é verdade, mas apenas um deles precisa ser verdade para que tudo seja verdade. Também podemos usar nós lógicos, que é um ponto de exclamação. Pode não estar claro do que usaríamos isso para agora, mas se eu fosse colocar no ponto de exclamação verdadeiro, ele vai voltar como falso e se eu colocar no ponto de exclamação falso, ele vai voltar como verdadeiro porque ele está basicamente dizendo que o oposto. Está dizendo que não é verdade e aqui está dizendo que não é falso. Se eu colocar entre parênteses aqui, cinco é igual a cinco, isso vai aparecer como falso porque isso é verdade e isso é perguntar se não é verdade. É basicamente o oposto. Aqui podemos ver o tipo de operadores e eu só realmente uso isso, o exemplo mais comum que eu posso pensar em usar isso seria verificar se algo é indefinido. Vamos usar nomes de variáveis diferentes, mesmo que já usamos x antes. Eu só vou chamá-lo provavelmente não o melhor nome, mas variável. Se eu fizer um tipo de aqui e abrir colchetes colocar entre colchetes de fechamento variáveis terminar a instrução com o ponto-e-vírgula, você verá que ele volta como indefinido. Considerando que se eu atribui a variável um valor de um que é apenas um número e, em seguida, nós digitamos no tipo de variável, volta número e se fôssemos mudar isso para uma string, vamos apenas dizer olá e nós digitamos no tipo de variável, você diria que agora é uma string porque nós atribuímos uma string a ela. Tipo de operador é útil às vezes para descobrir qual tipo de dados sua variável é. Aqui em baixo temos um operador bitwise. Honestamente, eu praticamente nunca tenho que usar isso. Eu não vou cobri-los, se você quiser saber mais sobre eles, há um capítulo inteiro sobre Bitwise. Essa é uma visão geral dos operadores, há também alguns menus diferentes aqui para aritmética e atribuição. Lembre-se que falamos sobre o incremento e o decremento. Eu só vou rolar para baixo até isso agora. Como você pode ver, à medida que chegamos a ele, há o restante que você pode tentar, se você quiser incrementar um número por apenas um, nós não temos que escrever a forma longa x igual a x mais 1. Podemos apenas fazer x mais. É uma maneira muito mais curta de fazer isso. Por exemplo, se eu fosse remover isso colocando em um comentário, será apenas cinco e eu posso fazer exatamente o mesmo que fazendo x igual x mais 1, e eles voltarão como seis. Este x é igual a x mais 1 é exatamente o mesmo que usar isso. É só uma taquigrafia. Vamos apenas comentar isso novamente e se eu fosse fazer um menos, agora você verá que é 5 menos 1, mas também podemos usar a abreviação para isso também, então eu vou remover isso. Em vez de usar mais no x, eu vou fazer um menos menos e você verá que obtemos exatamente o mesmo resultado. Muitas vezes vemos este operador com loops como uma abreviação que não temos que digitar x é igual a x mais 1 quando podemos apenas colocar neste operador abreviado. Voltando para a página, podemos olhar para a precedência do operador, mas tenho certeza que isso segue a mesma ordem que a matemática padrão. Se você entende sua matemática, então você deve estar bem com isso. Aqui você pode ver um pouco mais técnico mumbo-jumbo. Honestamente, provavelmente você não precisa olhar muito para isso. O item de menu final entrará em é um resumo dos operadores de atribuição. Como você pode ver aqui, existem todas essas maneiras diferentes de atribuir variáveis e elas basicamente abreviam. Aqui você pode ver que isso é o mesmo que isso. Estes são provavelmente mais os comuns que você vai usar se em tudo e que é exatamente o mesmo que o que está nesta coluna. Nós já cobrimos a atribuição um pouco, mas se você quiser ver alguns desses abreviados você pode ir para este menu, honestamente não é tão importante. Se você colocar em seu código isso, realmente não importa. É só que se você quiser ser um pouco mais complicado e economizar algum espaço, você pode fazê-lo dessa maneira. Isso é tudo o que eu queria falar sobre os operadores. A maior coisa e o maior erro iniciante é pensar que este é um operador de comparação. Não é, é atribuição e você pode ver que ele está sendo usado para atribuição com muita frequência, mas às vezes quando chega a criar uma instrução if then ou uma declaração de comparação, as pessoas são muitas vezes tentadas a dizer algo como isto, cinco é igual a cinco, mas como você pode ver aqui, ele acha que você está atribuindo cinco a cinco e cinco é apenas um número que você não pode atribuir algo a apenas um número explícito, tem que ser uma variável. Se você quisesse comparar esses dois, você teria que colocar no sinal de igual extra e é assim que você começa igual operador comparação. Essa era a principal coisa que eu queria passar, você pode ver alguns outros exemplos de operadores aqui. Tudo isso está disponível na Internet para que você possa voltar e fazer referência se você tiver alguma coisa. No próximo vídeo, vamos abordar mais sobre tipos de dados. Vejo-te no próximo. 9. Tipos de dados do JS: Neste vídeo, vamos falar mais sobre tipos de dados. Novamente, nós já abordamos um pouco sobre tipos de dados nas lições introdutórias, mas vamos mergulhar um pouco mais fundo. Vamos para o item de menu J, S tipos de dados aqui e você pode ver aqui uma vez que falamos sobre antes, um número e uma string, mas também é muito comum em JavaScript ter objetos. Objetos podem ser uma coisa difícil de colocar sua cabeça ao redor, mas se formos até aqui no item de menu J, S objetos, podemos ver que objetos se espelham na vida real. Na vida real, um carro é um objeto e um carro tem propriedades como peso e cor, e métodos como iniciar e parar. Você pode começar a ver aqui que em JavaScript poderíamos ter a mesma coisa, poderíamos ter um objeto chamado carro e dentro que poderíamos ter todas essas propriedades, e como nós definimos ou como nós referenciamos essas propriedades é com um ponto e então seu nome para que possamos atribuir um nome de Fiat a um carro, podemos dar um modelo de 500, assim por diante, assim por diante. Então também podemos atribuir métodos a um objeto, bem como, que possamos ter uma função basicamente, no carro que quando chamamos car.start algo acontece. Mas novamente, eu estou pulando um pouco longe, à minha frente, vamos voltar para o menu em tipos de dados, como definimos um objeto, eu vou pular à frente de números e strings e ir para baixo para alguns outros códigos Booleans. Basicamente Booleans só pode ter dois valores, então lembre-se antes quando estamos avaliando essas declarações, como cinco é igual a cinco? Sim, isso é verdade, verdadeiro é um booleano, então podemos realmente atribuir um booleano como um valor a uma variável. Em vez de apenas dizer cinco é igual a cinco e colocar isso para fora e dizer que é verdade, nós podemos realmente atribuir uma variável aqui e vamos apenas dizer que o código da variável, é verdade, nós podemos realmente atribuir os resultados do operador de comparação aqui, então podemos dizer é cinco o mesmo que cinco, caso afirmativo, atribuir verdadeiro, é verdade? Se não atribuir falso, é verdade. Agora, quando eu digitar, é verdade, ele vai voltar como verdade. Como você vai ver, isso provavelmente, não faz muito sentido agora, mas na verdade me ajuda a criar uma operação show à frente, nós não entramos em se então declarações antes, mas essencialmente, se eu quiser criar um aqui com se, eu poderia apenas dizer, é verdade e então executar algum código em vez de digitar a comparação explícita que tínhamos antes de cinco é igual a cinco. Agora, para isso, é muito pequeno, então realmente não importa, mas talvez você tenha uma declaração enorme e você queira salvar a instrução grande como outra variável, você pode fazer isso e então esse tipo de dados seria booleano. Se verificarmos agora, tipo de é verdade, e vai voltar booleano. Número um é arrays, e arrays pode levar um pouco de tempo se acostumando com isso mas eles são comuns em cada linguagem de programação, podemos atribuir um grupo de valores a uma variável e, em seguida, chamá-los com base em índices. Para demonstrar isso agora, vamos limpar meu console e fazer o exemplo aqui. Em vez de reinventar o que fiz aqui, acho que este é um bom exemplo. Agora temos carros, se colocamos carros, vamos ter como o console representa um array, é assim e o primeiro número realmente nos diz quantos valores estão na matriz ou quantos itens estão em lá e, em seguida, podemos clicar nisso para ver os diferentes itens em seu índice. Este exemplo é bastante simples, é muito fácil ver que, que é o primeiro, Saab é o primeiro valor, que é o segundo valor, que é o terceiro e, na verdade, uma das coisas confusas aqui é que o primeiro é realmente representado por zeros, então não se confunda. Se eu digitar em carros com um colchete, em seguida, zero, em seguida, terminar o colchete quadrado e, em seguida, colocar um ponto-e-vírgula e bater enter, ele irá surgir com Saab. Isso é confuso, você seria desenvolvedores também, é que o primeiro valor em um array é zero, é claro, se quiséssemos o próximo, nós apenas digitamos um e então nós temos Volvo. O mais poderoso sobre isso é que se tivermos valores de um rifle, podemos realmente percorrer eles e fazer coisas semelhantes em todos os valores e você verá isso em um vídeo posterior, mas uma matriz é o que poderíamos dar a um loop, para percorrer todos estes e criar algum HTML na página. Arrays são muito comuns e muito poderosos, então definitivamente uma coisa boa para aprender. Agora estamos voltando ao nosso bom amigo, o objeto JavaScript. Este provavelmente levará um pouco mais de tempo para explicar porque é o tipo de dados mais complexo que existe, e a razão é porque temos um nome pares de valor separados por vírgulas, então foi armazenar um monte de coisas em a uma variável ou o potencial de armazenar muitas coisas na única variável. Aqui temos um objeto e um objeto que podemos definir com esses colchetes e como você pode ver aqui, temos pares de valor de nome ou pares de valores-chave, e semanticamente isso é muito mais agradável. Se voltarmos ao exemplo ele e objetos, você vê aqui como somos capazes de pegar o nome de um carro ou atribuir o nome deste carro como Fiat. Bem, se formos até aqui e vermos o exemplo, eu vou copiar isso para o meu console, limpar isso, se eu executar isso, agora eu posso chamar car.type e ele aparece um Fiat. Eu posso executar car.color e ele vem acima com branco, e isso é muito mais agradável do que o que tínhamos antes com o uso de números de índice, porque talvez haja uma variedade de propriedades diferentes e não faz sentido alinhá-los. Você não está necessariamente indo para percorrer através deles de uma forma iterativa, você só quer ser capaz de cavar em um carro particular e obter certos atributos, que é onde os objetos são muito bons. O que podemos fazer aqui sem redefinir todo o objeto é que podemos mudar o valor de alguns desses, então eu poderia ir carro.cor é igual, vamos dizer preto em vez de branco. Agora, se eu saída carro novamente, você pode ver isso é como o seu console irá representar um objeto para você, e se eu clicar nisso como ele fez com arrays, em vez desses números de índice, nós temos nomes. Temos cor preta, modal 500 tipo Fiat, e por isso é uma boa maneira que podemos trabalhar com objetos em JavaScript. Estou voltando entre tipos de dados em objetos, mas objetos são um tipo de dados muito importante, então estes andam de mãos dadas e há algumas informações aqui sobre objetos e, em seguida, ele vai mais detalhes sobre isso. Nós temos tipo de que falamos sobre indefinido, que nós falamos sobre valores vazios então se nós apenas colocar em uma string vazia, vamos tentar isso agora. Você pode estar pensando que ele pode ser indefinido porque a string está vazia mas na verdade é definida ainda como uma string porque colocamos essas aspas. É uma string vazia mesmo assim, mas ainda é uma string. Outro valor é nulo, e null é basicamente nada. Como diz aqui, infelizmente em JavaScript o tipo de dados nulo é na verdade um objeto. Pode ser um pouco confuso e você pode considerar até mesmo um bug em JavaScript que um tipo de nulo é um objeto, ele deve ser apenas nulo, mas basicamente você pode esvaziar um objeto definindo-o como nulo. Se fôssemos usar este exemplo, temos uma pessoa que é obviamente um objeto porque temos colchetes aqui e temos pares de valor de nome, mas então podemos atribuir um valor de null a este objeto, e se pegar o tipo dele, ainda é um objeto. Isso é apenas alguns quarks dentro do JavaScript, isso não seria o mesmo na maioria das outras linguagens de programação, mas é apenas uma pequena coisa para cobrir com JavaScript. É importante notar que você também pode esvaziar um objeto definindo-o como indefinido, e a diferença entre indefinido e nulo é um pouco matizada, mas basicamente, o tipo de indefinido será indefinido, mas o tipo de null vai ser um objeto, como falamos aqui em cima. Aqui em baixo lembre-se que aprendemos sobre o uso dos operadores de comparação que têm dois sinais de igual neles e três sinais de igual neles. Agora, se olharmos para eles valor em relação a um valor, ele é avaliado como verdadeiro, mas se olharmos para eles, eles são o mesmo tipo de dados? Enquanto eles definitivamente não são porque nós acabamos verificar o tipo aqui em cima e o diferente, então ele vai sair como falso. Isso está se tornando um pouco difícil e honestamente, você não precisa estar muito familiarizado com isso, mas é apenas algo para cobrir e há alguns exemplos mais complexos aqui, mas agora está começando a entrar em coisas mais complexas. Basicamente, é importante saber o que são objetos e é importante ser capaz de chamar métodos em objetos e também entender as propriedades em objetos e é por isso que vamos apenas cavar um pouco mais fundo em objetos aqui. Como você pode ver, nós temos uma decoração do carro aqui que nós trabalhamos antes, nós também podemos dividir isso em várias linhas como esta, então em vez de carro, nós temos uma pessoa aqui e nós podemos definir atributos dessa pessoa. Novamente, como mostramos antes, podemos usar um ponto e, em seguida, o nome da propriedade para acessar uma propriedade nesse objeto, podemos atribuir valores a ele ou apenas produzir os resultados, também podemos fazê-lo desta forma através um quadrado e, em seguida, colocar o nome em uma string, que também é uma opção, então este é o mesmo que este e também podemos colocar em métodos como este. Nós não cobrimos funções ainda, mas é assim que você declararia função, podemos colocá-la dentro de um objeto e atribuí-la ao nome de algo. Eu não vou aprofundar isso porque nós não cobrimos funções ainda, mas é isso que está acontecendo aqui. Aqui está um exemplo comum que você vai encontrar muito em treinamentos JavaScript, é o exemplo de nome completo, esta é apenas uma função simples que irá retornar a concatenação de duas das propriedades do objeto. Temos primeiro nome e sobrenome, e talvez não queiramos especificar um nome completo porque é baseado nos valores desses atributos anteriores. O que podemos fazer é definir um método que leva o primeiro nome, adiciona um espaço entre e, em seguida, produz o sobrenome, e podemos usar essa palavra-chave para fazer referência ao objeto atual em que estamos. Quando estamos dentro deste objeto, ele ainda não foi totalmente definido, então não queremos usar a palavra pessoa agora, então enquanto estamos definindo-o, nos referimos a este objeto que estamos usando atualmente a palavra-chave isto. Quando mudamos o HTML interno deste P para os resultados deste método que definimos aqui, vamos obter o primeiro nome com um espaço e, em seguida, sobrenome. Espero que isso não seja muita informação, novamente, vamos entrar em funções, eu acho que pode até ser o próximo vídeo, mas definitivamente vamos entrar nele muito em breve. Rolando para baixo até o final da página, podemos ver algumas coisas mais complexas aqui, não tão importantes com a cobertura do básico agora. Esses são os principais tipos de dados, novamente, nós cobrimos número e string na lição anterior e Booleans não deve ser muito difícil de entender, há apenas dois valores possíveis, true ou false, objetos podem levar algum tempo para obter a sua cabeça em torno e arrays são muito comuns. Se você precisar, volte para esta página ou qualquer outra página aqui há um menu inteiro em arrays aqui e nós podemos ir mais fundo em uma lição posterior. Se você precisa ficar claro sobre qualquer um desses, os principais, é claro, um número, string, objeto e array. Isso é um pouco sobre os tipos de dados, no próximo vídeo, nós realmente vamos mergulhar direito em funções, que é bom porque eu atirei você para o fundo com colocar em uma função aqui. No próximo vídeo, vamos cobrir funções. Vamos explicar mais sobre o que está acontecendo aqui e levá-lo para fora do contexto de um objeto. Vejo você no próximo vídeo. 10. Funções do JS: Tudo bem, então neste vídeo vamos cobrir algo que é super importante em JavaScript, e que é Functions. Então, se eu clicar no item Menu para Funções aqui, podemos aprender o que é uma função e o que ela faz. Assim, uma função é apenas um bloco de código projetado para executar uma determinada classe e é executado quando algo o chama. Basicamente, o que podemos fazer é colocar um monte de código em uma função e então podemos codificá-lo em diferentes lugares do nosso projeto. Agora isso é importante se precisarmos reutilizar código, então temos uma função comum. Lá vou eu usando a palavra naturalmente. Mas sim, se temos algo comum que precisamos executar regularmente, não faz sentido escrevê-lo toda vez que precisamos fazê-lo. É melhor defini-lo uma vez e, em seguida, executá-lo várias vezes apenas chamando essa função. A outra coisa que podemos fazer é enviar coisas através da função para que possamos colocar variáveis através deste tipo. Então aqui está um exemplo muito básico. Vamos tentar nós mesmos. Estamos basicamente tomando o que o primeiro argumento que colocamos através desta função e o segundo argumento que colocamos através desta função, e estamos retornando o produto de ambos, e o produto significa que estamos multiplicando os dois juntos. Então, de que vêm esses dois números? Bem, quando nós realmente chamamos a função, nós podemos colocar no que é chamado de argumentos aqui. Então o primeiro argumento, o quatro, irá aqui, no p1 e o segundo argumento será três e vai bem aqui. Então, basicamente, o que esta função faz é que leva o primeiro número e o segundo número e os vezes juntos e produz o que é o resultado disso. Então, se colocarmos quatro e três, obtemos 12, porque é isso que definimos essa função para fazer. Então leva entrada aqui. Então eu vou colocar 10 lá em vez disso, executar isso, e agora você vai ver que são 30. Mas é claro que estamos ficando um pouco à frente de nós mesmos. Alguns de vocês podem não ter visto uma função antes, e então vamos apenas cobrir a sintaxe brevemente. Então, definimos uma função primeiro afirmando a função da palavra, e então colocamos o nome dessa função, se não houver argumentos que estão entrando. Então talvez nós apenas explicitamente declarar esses números. Vai sempre voltar 10 vezes três. Então nós não precisamos desses argumentos, e então o que nós faríamos é que nós ainda precisamos ter um espaço aberto e fechado, mas nós não temos que colocar nada lá dentro. Então temos um colchetes para abrir o bloco de código. Lembrando a lição de sintaxe que estávamos falando sobre blocos de código. Tudo dentro desses dois colchetes será parte da função. Então você pode colocar em tudo o que você quer coisas complexas aqui, definir variáveis e todas essas coisas. Mas no final, ele retornará um conjunto de valor e podemos retornar isso usando a palavra-chave Return. Então agora vamos obter o mesmo resultado, mas não podemos mais colocar em argumentos dinâmicos. Então, se eu colocar em cinco e dez, nada vai acontecer, e se nós verificarmos nosso console, pode até haver um erro porque nós não estamos realmente aceitando nenhum argumento aqui. Então isso é basicamente a sintaxe de uma função, e se você quiser aprender mais sobre a sintaxe aqui, você pode ver aqui é um exemplo. Você tem a função de palavra-chave, você tem o nome da função, você tem um fechamento aberto e um fechamento final e você tem quantos parâmetros quiser aqui. Você pode colocar uma quantidade infinita eu tenho certeza, você provavelmente não iria querer colocar um 100 parâmetros em, mas eu acho que você não pode fazer isso se você realmente quiser. Então é claro que este é o código a ser executado entre esses colchetes. Nós aprendemos sobre a declaração de retorno nesse exemplo, e aqui ele fala sobre por que eu uso a função. Então, como mencionei antes, talvez queiramos reutilizar o código. Então, definimos o código uma vez e o usamos muitas vezes. No exemplo acima, poderíamos facilmente ter feito isso em vez de ter uma função e poderíamos ter feito facilmente quatro vezes três, e o mesmo resultado sairia. Não temos que escrever tudo isso, mas talvez estejamos fazendo algum tipo de cálculo complexo. Talvez estejamos verificando um modelo de banco de dados quando precisamos fazer uma conexão com o banco de dados, talvez possamos, mas não queremos colocar tudo isso aqui. Então talvez nós só queremos colocar, MyFunction e colocar em algumas variáveis e seguida, quaisquer cálculos complexos que acontecem nesta função, tudo o que ele faz é retornar algo e ele vai direto para aqui. Mas novamente, é difícil demonstrar isso sem um exemplo complicado agora. Mas saiba que essas funções podem ficar muito grandes, e por isso faz muito sentido que precisamos colocar todo o código em uma função e, em seguida, somos capazes de reutilizá-lo um monte de vezes e também usá-lo muito mais facilmente, sabendo o que ele vai voltar para nós. Então aqui está outro exemplo. Podemos criar uma função simples chamada ToCelsius, e quando isso acontecer, será preciso um parâmetro, um argumento, que será a temperatura em Fahrenheit, e então tomará a temperatura Fahrenheit e executará o cálculo necessário para transformá-lo em Celsius. Então tudo o que temos que fazer aqui é chamar uma função de Celsius passar por um perímetro da temperatura em Fahrenheit e então ele vai nos enviar de volta a temperatura equivalente em Celsius. Isso pode ser um exemplo mais prático para vocês, mas pode ficar muito mais complexo. É importante notar que o colchete de abertura e fechamento é essencial para invocar a função. Bem aqui, se eu apenas colocar ToCelsius sem colocar o aberto e fechar, mesmo se você está colocando nada dentro dele, você ainda precisa colocá-lo lá, porque caso contrário ele vai apenas retornar que a definição da função em vez do que o resultado da função. Isso é talvez um pouco de uma diferença de nuance para desenvolvedores iniciantes. Mas sim, saiba que não vai funcionar a menos que você coloque suportes de abertura e fechamento. Você também pode usar funções para atribuir variáveis a valores. Então o que podemos realmente fazer é pegar os resultados desta função ou que quer que esta função retorne e atribuí-lo diretamente a uma variável aqui. Então isso vai levar 77 graus Fahrenheit e convertê-lo para Celsius e, em seguida, colocá-lo diretamente nesta variável. Em seguida, podemos colocá-lo em uma string aqui e obter o resultado, e nós também podemos apenas pular este passo onde nós atribuí-lo e apenas colocá-lo em linha. Essa é também uma opção. Isso é basicamente funções. Ele fica um pouco mais complexo como você começa a usar retornos de chamada e coisas diferentes. Mas, por enquanto, esse é o funcionamento básico de uma função. Você tem parâmetros ou talvez nem mesmo parâmetros, e você tem um bloco de código reutilizável no meio, e então você chamá-lo usando esse nome novamente, mas certificando-se de usar esses colchetes de abertura e fechamento. Então isso são funções. No próximo vídeo, vamos cobrir Scope, que agora sabemos como funcionam as funções. É importante olhar para o que acontece quando definimos variáveis, irá declarar variáveis em vez de fora das funções e dentro delas, e não apenas funções, mas blocos de código em geral. Vemo-nos no próximo vídeo. 11. Escopo do JS: Então, neste vídeo vamos cobrir algo que talvez não tão óbvio enquanto você está desenvolvendo JavaScript, mas muito importante e pode realmente tropeçar você às vezes enquanto você está desenvolvendo para JavaScript, e isso é a idéia de escopo. Então vamos para o item de menu para escopo, e vamos ver aqui em JavaScript há dois tipos de escopo, escopo Local e Global. Agora nenhuma dessas teorias vai fazer muito sentido sem um exemplo. Então vamos mergulhar diretamente em um exemplo aqui. Variáveis JavaScript locais são variáveis declaradas dentro de uma função JavaScript. Então eles se tornam locais para essa função e eles têm um escopo local. Assim, eles só podem ser acessados dentro da função. S Este é um exemplo bem explícito. Se eu colocar em um código para CarName aqui em cima, ele não vai funcionar, não é declarado nesse escopo. Mas eu posso usá-lo aqui porque está no escopo deste bloco de código. A alternativa é global, e agora estou fazendo uma variável. Então eu estou declarando e atribuindo um valor a uma variável em vez de Volvo para o nome do carro, e em seguida, na minha função, ele é declarado no escopo global. Então eu posso realmente ir para a minha função e alterá-la, e isso vai mudar a variável no escopo global. Isso pode parecer óbvio agora, mas uma vez que começamos a usar ambos no mesmo contexto, então você pode começar a ver como isso pode te enganar. Então aqui embaixo, você pode ver que se você atribuir um valor a uma variável que não foi declarada, ela se tornará automaticamente uma variável global. Então este é um interessante dentro do JavaScript. Se nós realmente não declarar isso primeiro usando a palavra-chave var, esta será realmente uma variável global, mesmo que não tenhamos realmente declarado isso, mesmo no escopo local ou no escopo global. Agora, há um modo que você pode usar em JavaScript chamado Strict Mode. No modo estrito, você sempre precisa declarar suas variáveis, mas não precisamos nos preocupar muito com isso. É sempre uma boa idéia declarar suas variáveis. Então, se você quiser algo assim, a melhor maneira de fazer isso seria colocar em uma declaração para a variável no escopo global já. Isso vai poupar você para ser atingido em estrita, mas também é bom notar, como se fosse uma boa oportunidade para tornar sua declaração e seu escopo explícito. Então aqui é óbvio que estavam em nosso escopo global, estamos declarando essa variável no escopo global. Então agora ele está acessível globalmente, mas então nós estamos atribuindo um valor a ele nesta função, mas nós também podemos alterar esse valor e ter esse valor sair dessa função, bem como porque é global. Essa é também uma razão pela qual, lembre-se, nós olhamos para como você pode definir uma variável como esta, e então em uma nova linha, dar-lhe um valor como este. Muitas vezes você está sempre atribuindo um valor a uma nova variável. Então muitas vezes não faz sentido porque você iria declará-lo e atribuí-lo em um passo diferente, mas quando você quer colocar explicitamente algo no escopo global como este, isso faz muito sentido. Então, se o declarássemos aqui, estaria disponível apenas no escopo local, mas se eu tirar isso e colocá-lo aqui, agora, estamos declarando no escopo global e capaz de modificá-lo na função, mas ainda é global. Espero que isso esteja começando a fazer sentido novamente, medida que você ganha mais experiência com isso, ele vai começar a solidificar um pouco mais. Isto é algo sobre o contexto do HTML. O Escopo Global em HTML é o objeto de janela, não é importante que você precise entender isso. Mas essencialmente a coisa com escopo é se, digamos, por exemplo, você tem este exemplo e somente na função você está atribuindo um valor, mas você queria usar esse valor fora dessa função. Então digamos, por exemplo, que eu queria, vamos apenas fazer o documento. Eu sei que eu disse que não uso isso muitas vezes, mas neste contexto nos permitirá obter algo na página imediatamente. Se eu fizer o documento certo CarName, você verá que nada sai, e a razão é porque ele está no escopo local. Então, se eu fosse colocar isso de volta aqui e executar a função, você verá que o CarName obtém saída. Se nós colocá-lo de volta para aqui em nosso exemplo que tínhamos antes, que não funcionava, e em vez de declarar a variável aqui, nós apenas removemos a declaração dessa parte da atribuição e nós a declaramos fora da função no escopo global, agora, somos capazes de fazer isso. Então, é um detalhe muito pequeno, eu acho que em JavaScript, mas é importante notar porque não saber algo como isso e ficar preso aqui com tipo, “Bem, por que não posso gerar esse nome de variável?” Pode te enganar se não entender o escopo. Então, é importante saber. Isso é praticamente o que eu vou dizer no escopo. No próximo vídeo, vamos cobrir Eventos. Então, vemo-nos no próximo. 12. Eventos do JS: Neste vídeo, vamos apresentar brevemente EventListeners. EventListeners é algo que entrar em maior detalhe uma vez que vamos para a seção HTML DOM. Esta é a maneira mais comum de declarar um EventListener. Mas você já viu um exemplo de um EventListener em linha, então pensei em entrar e apresentá-lo agora mesmo. Agora, se você não está claro sobre quais são os eventos, são basicamente coisas que acontecem na página e eu sei que isso é vago, mas basicamente você precisa configurar um EventListener sempre que quiser que algo aconteça, quando algo mais acontece. Para um exemplo aqui, quando uma página da Web terminar de carregar, você pode fazer algo acontecer. Quando um campo de entrada é alterado, você pode fazer algo acontecer, e quando um botão HTML é clicado, você pode executar algum código também. Em HTML, você tem permissão para colocar um EventHandler em linha usando um atributo. A sintaxe ou a maneira como você faz isso, é colocando o nome do evento em como um atributo é igual e, em seguida, você coloca como uma string a instrução que você deseja executar. Aqui está um exemplo que já vimos algo semelhante antes, somos facilmente capazes de ver que queremos que esta linha de código executada no evento onclick neste botão específico. É muito explícito porque o código é indicado diretamente no botão. Esta nem sempre é a melhor maneira de fazer as coisas, como vimos na classe anterior em HTML e CSS, há uma razão pela qual você gostaria de colocar seu código em outro arquivo em vez de inline em seu elemento real, especialmente se você quiser que ele execute certo JavaScript em vários elementos. Geralmente é mais limpo ter um arquivo separado e configurar um EventListener. À medida que entramos neste vídeo aqui, quando falamos sobre EventListeners no contexto do DOM, você verá que somos capazes de direcionar um botão ou qualquer número de elementos e, em seguida, executar uma instrução baseada em determinados eventos. Então, se rolarmos para baixo, podemos ver alguns eventos HTML comuns. Às vezes, se você tem apenas um evento na página e talvez você não queira escrever um documento JavaScript inteiro, você pode apenas ter um botão e clicar nele apenas para obter um certo resultado. Mas à medida que seu código se torna mais complexo, é melhor movê-lo para seu próprio arquivo. Então breve pequena lição aqui sobre eventos JavaScript, eu queria explicar rapidamente o que vimos anteriormente com este método onclick, mas essencialmente, o que você precisa saber é mais nesta seção que vamos abordar uma vez que entrar em HTML DOM. Isso é tudo que eu queria cobrir neste vídeo em particular. No próximo vídeo, vamos analisar mais profundamente os arrays e como podemos iterar através de arrays, através de loops. Vemo-nos no próximo vídeo. 13. Matrizes do JS: Nesta lição, vamos mergulhar mais profundamente em um dos tipos de dados que descobrimos anteriormente, que era arrays. Aprenderemos mais sobre como os arrays funcionam e também aprenderemos sobre looping, porque o looping e os arrays costumam andar de mãos dadas. Então, para começar, vamos clicar no item de menu JS arrays aqui. Como você pode ver, já vimos esse exemplo antes. Podemos rolar para baixo e podemos ver que podemos definir uma nova matriz não apenas colocando colchetes e os diferentes valores separados por vírgulas, mas também podemos colocá-lo em como uma nova matriz de tipo de dados e, em seguida, como parâmetros dentro dessa função. Agora, se eu descer, você pode ver aqui como nós direcionamos os diferentes itens em uma matriz, lembre-se zero é o primeiro. Se quiséssemos colocar o primeiro item da matriz de carros no HTML interno de um elemento do ID de demonstração, faríamos isso assim. Aqui está novamente, zero é o primeiro elemento na matriz, um é o segundo. Os índices de matriz começam em zero. Isso pode te perturbar um pouco porque não é a coisa mais intuitiva para alguém que não é programador. Aqui embaixo, nós também podemos acessar o array completo e vamos ver como isso ficaria. Aqui você pode ver que JavaScript é inteligente o suficiente para saber que é um conjunto de três strings, e ele apenas produz todas as strings juntas como uma string. Ele sai como Saab vírgula Volvo BMW sem qualquer espaço de palavras. A outra coisa que é interessante sobre JavaScript é arrays são objetos. Se estamos a usar o tipo de operador em JavaScript, ele retorna um objeto para matrizes. Isso levanta a questão de, qual é a diferença entre um array e um objeto? Você deve pensar em arrays como usando números para acessar seus elementos. Pessoa zero aqui irá retornar John, pessoa entre colchetes um irá retornar Doe, e pessoa entre colchetes dois irá retornar 46. Considerando que objetos usam nomes para acessar seus “membros”. No caso de arrays, o que você está usando é algo que segue um fluxo linear. Como veremos, à medida que vamos mais para baixo e falamos sobre looping, você não necessariamente gostaria de percorrer tudo isso, talvez você só queira pegar uma vantagem, não há nenhuma ordem linear específica para esses campos. Mas talvez com isso haja, eu sei que provavelmente soa um pouco abstrato, mas você verá à medida que entramos em loops, faz muito mais sentido fazer um loop através de uma matriz do que faz um objeto. A outra coisa que é grande sobre matrizes em JavaScript, é que eles são construídos em propriedades de matriz e métodos, por isso, se quisermos encontrar o comprimento de qualquer matriz, podemos usar a propriedade de length, e se quisermos classificar nossa matriz, podemos fazê-lo usando o método de classificação. Aqui podemos ver um exemplo da propriedade length, e temos uma matriz com obviamente quatro itens aqui, podemos chamar o comprimento do ponto nessa matriz e obtemos o comprimento dessa matriz. Como eu disse, nós íamos falar sobre loop como ele se relaciona com arrays, e a melhor maneira de percorrer um array é um loop “for”. Eu vou abrir isso, e você pode ver aqui, talvez nós queiramos formatar esta lista como uma lista HTML, para que possamos usar um loop “for”. Agora o que está acontecendo aqui, eu quero separar o loop aqui, o que acontece é a primeira instrução no loop “for” define um ponto de partida para este iterador, então zero, e então esta é a instrução booleana, que, contanto que seja verdadeiro, o loop continuará, e isso é o que você quer que aconteça toda vez que o loop for executado. Parece muito complicado, mas na verdade é bastante simples. É apenas dizer que iniciar o marcador em zero, aumentar o marcador em um cada vez que o loop vai, e continuar correndo enquanto esse número é menor que FleN, e FleN aqui é apenas o comprimento da matriz. Basicamente dizendo, sem o Mumbo Jumbo, é adicionar este item de lista para cada fruta nesta matriz de frutas. Aqui, você pode ver que podemos substituir o número do índice por uma variável que está fazendo loop. No primeiro loop ele vai ser zero, e produz o valor na posição zero, que se lembra é a primeira posição, e então ele faz um segundo loop e esse número se torna um, então ele emite laranja, e, em seguida, ele se torna três, produz a Apple, e a razão pela qual ele incrementa em um cada vez é porque nós usamos este operador aqui. A declaração aqui pode ser confusa para programadores novatos, mas é uma convenção semelhante cada vez que você faz isso, é basicamente começar o marcador fora do caminho que você quer, isso é bastante padrão no final, e apenas ter um booleano para determinar por quanto tempo você deseja executá-lo. Aqui, se você se lembrar, está o operador de concatenação, então estamos iniciando uma lista não ordenada, e estamos terminando em uma lista não ordenada aqui, e no meio estamos adicionando tantos itens de lista quanto precisamos para percorrer o lista completa de frutas aqui em uma matriz. Agora você pode ver como matrizes e loops funcionam bem juntos. Agora, se isso fosse um objeto, talvez não fizesse sentido percorrer uma lista inteira, e é aí que os objetos e matrizes, a diferença entre eles se torna um pouco mais óbvia. Voltando para a nossa página em matrizes JavaScripts, podemos usar alguns métodos para adicionar elementos de matriz. Um dos mais comuns é empurrar. Podemos adicionar Lemon a esta matriz, ele vai para a direita no final. Podemos usar o método de push e, em seguida, o valor que queremos colocar em. Se nós apenas dar uma olhada aqui, estamos adicionando Lemon para a matriz, e então nós estamos saída toda a matriz para a tela, eu vou apenas executar isso novamente. Como você pode ver aqui, temos uma função ligada a um evento em um botão, então sempre que clicarmos neste botão ele irá executar esta função, e se nós formos para baixo aqui, o que acontece com a função, ele leva esta matriz que dividimos aqui, que são frutos. Ele empurra um elemento extra no final, e então ele muda o HTML interno do nosso elemento com o ID de demo, que está bem aqui, para o array completo que acabou de ser alterado. Muita coisa está acontecendo lá, mas espero que isso faça sentido. Voltando aqui, podemos ver que há outra maneira de fazê-lo, que é usando um valor dinâmico para o índice. Eu recomendaria que apenas mantê-lo simples, e nós também podemos indicar exatamente qual posição na matriz queremos colocar o nosso elemento. Por exemplo, se quiséssemos mudar apenas Banana, poderíamos fazer isso colocando em zero aqui. Vamos demonstrar isso agora. O que temos aqui, é que temos uma matriz e se contarmos aqui como posição 0, 1, 2, 3, e como eu estava dizendo na posição 6, queremos Lemon, e então estamos calculando o comprimento de toda essa matriz, estamos criando uma variável de texto vazia apenas para começar, e então nós estamos percorrendo os diferentes frutos, colocando-os em texto, e, em seguida, adicionando uma tag break após ela. Então, uma vez que o loop “for” é feito, estamos colocando esse texto como o HTML interno de um elemento pelo ID de demonstração que está bem aqui. Agora a coisa interessante que você verá aqui, é que ele cria essas outras duas posições porque basicamente como eu mostrei a vocês aqui, estamos contando para obter o número do índice. Se você começar a colocar na posição 6, que é na verdade a posição 7, então há uma lacuna óbvia aqui. Essa é a posição 0, 1, 2, 3, 4. Cinco e depois seis. O que vai acontecer é, você verá que sua matriz será indefinida nesses dois índices que não foram definidos. Eu não me preocuparia muito com isso, porque eu não costumo ver isso. Se você quiser, apenas para adicionar limão ao final de uma matriz, tudo que você vai fazer é apenas mudar isso para empurrar, livrar-se dos iguais, e então qualquer índice que venha a seguir, ele irá atribuir esse elemento a ele. Se eu fizer isso, então você não terá o indefinido. Mas se você quiser indicar especificamente para onde deseja que ele vá na matriz, então qualquer coisa antes que não tenha sido definida aparecerá como indefinido. A outra coisa a demonstrar aqui é que se você quiser mudar qualquer um desses, você só precisa saber que é o número do índice. Digamos, por exemplo, que queríamos mudar de laranja para limão. Isso está na posição 1, e se eu rodar isso, agora você verá que nossa laranja foi mudada de limão antes de eu começar a colocar a matriz na tela. Voltando à página, há outra coisa chamada Arrays Associativos. Mas em JavaScript, ele não suporta arrays com índices nomeados. Se você fizer algo assim onde você colocar o nome como o índice, JavaScript irá redefinir a matriz para um objeto padrão. Isso não é algo que você deve ficar preso se você é novo na programação. Basicamente, outra linguagem é que há algo chamado uma matriz associativa, e essa matriz associativa permite que você escolha itens em uma matriz por um nome. Considerando que em JavaScript, se você estiver fazendo uma matriz, é apenas por índice, caso contrário, você apenas usa um objeto. Digamos, por exemplo, aqui, que definimos uma matriz de pessoas e demos a ela valores em três posições diferentes, e se obtivermos o comprimento, ele retornará três, e se olharmos para a posição 0, é óbvio que será John porque nós definimos isso bem aqui. Mas se fizermos a mesma coisa e não usarmos índices numerados, mas nomes strings em vez disso, então não podemos usar esse índice numerado, e ele vai realmente acabar sendo um objeto. Vamos apenas demonstrar isso em nosso console. Tenho o meu console aberto aqui. Se eu fosse definir uma matriz, e então dar seus valores com base em índices que são baseados em uma string, não um número, e eu pressionar isso. Agora, se eu digitar Pessoa, ele aparecerá se comportando como um objeto, e nós não podemos realmente direcionar o primeiro atributo usando zero. Se eu fiz isso, e vai aparecer como indefinido. Basicamente, tudo o que você precisa saber com isso é que JavaScript não suporta arrays com índices nomeados. Se está tentando fazer isso, o que está fazendo é um objeto. Isso, claro, levanta a questão de qual é a diferença entre matrizes e objetos? Aqui está uma maneira muito simples de entendê-lo ou resumir a diferença, em matrizes JavaScript usam índices numerados e objetos usam índices nomeados. No exemplo do carro antes, o nome, a marca do carro, nós os direcionamos pegando seu nome, e produzindo isso. Vou voltar para a lição, podemos obter o nome do carro. Mas se você quiser que ele faça um loop através de uma forma linear usando índices numerados, então você usaria uma matriz. Aqui está dizendo a mesma coisa de uma maneira diferente. Aqui ele fala sobre como você pode usar o novo construtor para criar uma matriz, você provavelmente deve evitar fazer isso. Tente fazer desta maneira, não desta maneira. Se formos mais abaixo, entraremos em território ainda mais complicado. Se o tipo de operador retorna um objeto para uma matriz, então como você sabe que é uma matriz? Há realmente um método aqui que você pode usar para descobrir se uma matriz é realmente uma matriz ou um objeto. Mas novamente, você não precisa usar isso com muita frequência. O que eu quero que vocês entendam é o que é uma matriz? Como atualizar um array? Como produzir um array? Como fazer um loop através de um array? Qual é a diferença entre um array e um objeto? Tecnicamente, arrays são objetos, mas a diferença entre o que mostramos antes nesta lição JavaScript Objects, o que estamos fazendo agora com arrays. Finalmente, antes de encerrar em matrizes, existem alguns outros itens de menu que você pode querer verificar. Nesta página, você pode descobrir sobre outros métodos que você pode aplicar em arrays para string. Você pode pop em vez de empurrar, que remove um elemento, empurrar que vimos antes. Podemos mudar, que é o mesmo que pop, que o remove da frente. Não tem mudança, e vimos como ele mudou os elementos. Se você quiser saber mais sobre isso, há um monte de maneiras diferentes que podemos afetar arrays, mas eu tenho medo que eu vou gastar muito tempo nisso se eu passar completamente por esta página, há também o método de classificação de arrays. Se você quiser saber como pegar sua lista aqui que você armazenou em um array, e classificá-lo de várias maneiras, por formas numéricas, comparando-o a um certo booleano, fazendo todos os tipos de cálculos complexos, definitivamente voltar aqui e confira esses menus. Mas por enquanto, tudo o que quero que saibam sobre arrays é que eles são apenas uma maneira de armazenar vários valores em uma única variável. Você pode acessar essas variáveis diferentes usando um índice numerado. Pessoal, isso era tudo o que eu queria falar sobre matrizes em termos de tipos de dados que temos em JavaScript, temos strings, números, objetos, matrizes, esses são provavelmente os mais comuns, mas temos datas, matemática , booleanos, que cobrimos anteriormente. Eu não quero entrar em muitos detalhes sobre isso, vocês podem verificá-los na referência aqui. Mas basicamente, eu sinto que estamos todos bem no básico dos principais tipos de dados, e no próximo vídeo, vamos finalmente cobrir condicionais. Vejo-te naquele vídeo. 14. Condicionais do JS: No último vídeo, terminamos de falar sobre os principais tipos de dados dentro do JavaScript. Agora neste vídeo, vamos falar sobre algo que é realmente importante em JavaScript e muito comum. Você pode ter visto uma declaração “se então”, basicamente o que isso é, é uma condicional. Então vamos para este item de menu aqui para condições JS e aprender sobre “se então else”. Muitas vezes, quando você escreve código, você deseja executar ações diferentes com base em decisões diferentes. Como você pode fazer isso é usando instruções condicionais. Sempre que há algo que você quer que aconteça, se algo é verdade, então você vai usar uma declaração condicional. É como se dissesse ao seu amigo : “Vou ao cinema se assistirmos a este filme. Mas se não o fizermos, então eu não irei.” Essa é uma afirmação “se então else”. Então, sempre que você se pega querendo fazer algo em JavaScript ou na programação em geral, onde você quer que algo aconteça somente se algo for verdadeiro ou falso, então você vai precisar de uma declaração condicional. Deve ser muito fácil para nós entender o que uma declaração “se” faz. Tudo o que acontece é que usamos a palavra-chave de “if”, colocamos em uma condição em alguns colchetes como este, e então usamos os colchetes, lembre-se, como um bloco de código para executar código baseado se essa condição é verdadeira. Vejamos o exemplo aqui. Diz: “Se a hora é menor que 18, então queremos atribuir a string de “Bom dia” para a variável de saudação.” Vamos experimentá-lo nós mesmos. Como você pode ver, temos um novo objeto de data que não cobrimos anteriormente porque é algo que você não usa com frequência, mas data é outro tipo de dados que você pode usar. Podemos usar esta parte aqui para determinar quantas horas se passaram no dia. Então, se o número de horas passadas no dia é menor que 18, então o que vamos fazer é colocar “Bom dia” no HTML interno do elemento com o ID de demonstração, que está bem aqui. Então, em vez de “Boa noite”, ele vai dizer “Bom dia” porque agora são 10:00 da manhã no meu fuso horário, então esse é um exemplo bem simples. Indo para baixo, podemos ver que também podemos executar uma instrução alternativa ou bloco de código se essa condição é realmente falsa. No caso de a hora ser inferior a 18, podemos dizer “Bom dia”, caso contrário podemos dizer “Boa noite”. Eu acho que isso é muito simples de entender, e nós também podemos ir um passo adiante e entre o nosso “se” e o nosso “else”, podemos colocar um “else if” e colocar outra condição em. Vamos dar uma olhada neste exemplo. Basicamente, o que temos aqui, é que temos um tempo em que obtemos as horas atuais passadas no dia e atribuímos a uma variável de tempo, e então mudamos a saudação com base no tempo. Se for menor que 10, será “Bom dia” senão, se o tempo for inferior a 20, então, obviamente, se não for inferior a 10, então será entre 10 e 20. Se for esse o caso, então diremos “Bom dia”. Então, se esse não for o caso de nenhum desses dois, então vamos dizer “Boa noite”. Então, essencialmente, o que estamos dizendo aqui, se o tempo for igual ou maior que 20, então diremos, “Boa noite.” O importante a notar aqui é que tudo isso acontece em ordem, primeiro olhamos se o tempo é 10 e se não, então passamos para este. Então, se este gatilho, isso significa que isso não é verdade. Ele vai passar por cima dessas instruções “if” “else if”, e assim que for verdade, ele irá executar qualquer bloco de código que está nesse nível, então ele não vai para o próximo. Eu só estou mencionando isso para ter certeza que você sabe, estes não estão em isolamento. Então, se eu fosse mover isso fora em sua própria declaração “se” e me livrar do “else”, e executar isso. Agora temos os mesmos resultados porque acabou de passar 10. Mas vamos apenas dizer 11 em vez disso, e eu clico em “Executar” e clique em “Experimente” para ver como diz “Bom dia”. Isso é porque ambos são verdadeiros e porque este acontece em segundo lugar, ele vai sobrescrever o valor que definimos aqui. Se voltarmos a definir o que era antes e, novamente, alterá-lo para 11, clique em “Executar” e clique em “Experimentar”. Ele vai dizer “bom dia” porque ele atinge este primeiro, e então, assim que uma dessas condições for verdadeira em toda esta declaração “i”, ele vai executar esse código e nada disso vai sequer dar uma olhada. Espero ter deixado isso bem claro, a diferença entre colocar “else if” e uma declaração completamente nova “se”. Se você começar a colocar em um monte de diferentes “else ifs”, então se fizéssemos “else if” o tempo é menor que 25, e então nós colocaríamos em outro “else if”. Isso deve ser um sinal de que você precisa mudar seu código, e o que você provavelmente está procurando fazer é usar uma instrução switch. Vamos voltar para este documento aqui, e vamos descer para o próximo item de menu para “Switch”. Como você pode ver aqui, a instrução switch é usada para executar diferentes ações com base em condições diferentes, e realmente é a alternativa para “se então” se você tem um monte de casos diferentes. Ao invés de escrever um “se isso” muito longo, “então isso” “else if” “this then this” “else if”, e apenas ter uma declaração muito longa, “if” com muitos “else ifs”, é muito mais eficiente usar esse switch e também permite que você defina um padrão. É assim que funciona: você começa com a palavra-chave “Switch” e coloca a variável ou a coisa que deseja verificar dentro do primeiro conjunto de colchetes. Em seguida, você abre colchetes e faz um bloco de código e, em seguida, usar a palavra-chave “Caso” para verificar se esse valor aqui é igual ao que está no seu caso. Em seguida, você executa seu código e, em seguida, você usa a palavra-chave de “Break”. Muita coisa acontecendo lá. Mas basicamente, uma vez que você entende isso, isso é muito simples. Estamos apenas olhando para o dia se é domingo, segunda-feira, terça-feira, e isso é representado por esses números. Então domingo é 0, segunda é 1. Se estamos falando do caso 0, queremos que o dia seja igual ao domingo. Se for o caso 1, queremos que o dia seja igual a segunda-feira. Você pode ver se nós escrevemos isso em uma declaração “se então” ou uma declaração “se então else se”, nós teríamos tantos “else ifs” e seria apenas confuso. Então esta é uma maneira muito mais limpa de fazer uma condicional onde há vários casos que você precisa verificar. Aqui em baixo, você pode aprender mais sobre a palavra-chave break. Basicamente, só nos ajuda a sair de um bloco de código. Em vez de ter colchetes para cada caso, temos dois pontos e, em seguida, usamos a palavra-chave “Break” para terminar esse bloco de código específico. Rolando para baixo, há também a palavra-chave padrão. Basicamente, se não houver correspondência, ele irá apenas padrão para o que está no padrão aqui. Isso é sempre bom ter no sentido de que talvez você tenha algum código baseado no texto mais tarde em seu arquivo. Se o caso não fosse seis ou zero, então você pode ter um texto indefinido e isso causaria problemas mais tarde em seu código. Portanto, é sempre bom ter um padrão lá, apenas no caso de franja ou no caso em que ele não corresponde a seis ou zero ou qualquer outra coisa que você definiu na sua instrução switch. Há mais alguns exemplos aqui. Uma coisa a notar é que casos comutados usam comparação rigorosa. Se você lembrar o que este sinal de três iguais significa, os valores devem ser do mesmo tipo e valor para corresponder. Lembre-se, a comparação estrita é o mesmo tipo final de valor. Considerando que, se você se lembrar, o duplo igual é apenas o mesmo valor, mas não necessariamente o mesmo tipo. Isso é algo importante para observar, mas não necessariamente algo que não virá à mente até que você realmente comece a ter alguns problemas com seu código e queira que algo seja alterado. Acho que é o suficiente em condicionais. Condicionais são como na vida real, como se você desse um ultimato a alguém, é exatamente a mesma coisa. Não deve levar muito tempo para envolver sua cabeça em torno de instruções “if then” “if else”, muito comuns em JavaScript e um dos blocos de código mais comuns que você verá quando estiver desenvolvendo JavaScript. No próximo vídeo, vamos aprofundar outro bloco de código comum que você verá e que são loops. Se você se lembra no vídeo em arrays, cobrimos um pouco sobre um loop for, para percorrer um array, mas vamos aprofundar os loops e mostrar alguns outros loops no próximo vídeo. Vejo-te nessa. 15. Loops do JS: Muito bem pessoal, estamos quase acabando com o aprendizado de JavaScript geral. Lembre-se, JavaScript é uma linguagem de programação autônoma em seu próprio direito, mas a maneira como ele interage com a web é através do DOM. Vamos aprender mais sobre HTML DOM na próxima seção da classe. Mas para terminar nosso aprendizado sobre JavaScript geral e como a linguagem de programação funciona, vou falar um pouco mais sobre loops. Se você se lembra, quando falamos sobre matrizes, cobrimos um loop JavaScript para e aqui está um exemplo perfeito do que você usaria um loop para. Lembre-se que vimos um loop for antes, e esta é a convenção padrão para ele. Por que precisaríamos usar um loop? Bem, talvez não queiramos escrever isto. O problema com isso na verdade é que talvez a matriz maior do que seis itens e queremos que seja dinâmico. Então gostaríamos de percorrer toda a lista de carros e não queremos ter que repetir o mesmo código uma e outra vez. Bem, um loop for é perfeito para isso como vimos antes. Mas também há diferentes tipos de loops. Se aprendermos mais sobre o loop for aqui, esta é uma boa referência para aqueles de vocês que talvez se perderam um pouco com o loop for. Esta primeira instrução é executada uma vez antes da execução do bloco de código, ea segunda instrução define a condição para executar o bloco de código, e instrução 3 é executado toda vez que o bloco de código foi executado. Um exemplo comum é definir um marcador i, iniciá-lo em zero, e enviar uma condição que ele deve ser executado até que um determinado número seja atingido, e aumentar esse número cada vez. É uma maneira complicada de olhar para isso, mas nos dá muito controle sobre como queremos que o loop seja executado. Nesta página, você aprenderá tudo sobre loops, mas já cobrimos essa convenção padrão antes. Então, o que quero mostrar a vocês foi para entrar. Vimos como com para loops, fomos capazes de loop através de uma matriz, mas também podemos loop através de um objeto usando isso para in declaração. Se quiséssemos fazer loop através das propriedades de um objeto, como nós faria loop através de uma matriz, podemos usar esta instrução aqui. Como você pode ver, ele tira todos os nomes das chaves, todos os índices nomeados e produz apenas os valores. Então é uma maneira para nós percorrer um objeto como faríamos em uma matriz. Vamos para o loop while, que é um loop diferente que provavelmente é um pouco mais fácil de entender. O loop while continua e, portanto, esta afirmação não é verdadeira. Agora isso pode ser um pouco de perigo às vezes porque você quer ter certeza de que em algum momento isso não é verdade caso contrário, ele vai continuar em loop em um loop infinito e às vezes pode travar seu código. Como diz aqui, se você esquecer de aumentar o valor da variável usada na condição, o loop nunca terminará e irá falhar seu navegador. No exemplo de loop for, você está sempre colocando em uma condição aqui para torná-lo mais longo para que você geralmente não tenha esse problema, mas porque enquanto é mais simples e ele apenas usa uma única condição, você tem a chance de que se você não iterar seu número ou alterar essa condição, ele pode entrar em um loop infinito. Isto é essencialmente uma coisa semelhante ao loop for, é apenas estruturado um pouco diferente. Em vez de iterá-lo como um parâmetro real na instrução, estamos colocando-o no bloco de código. Há também o loop de fazer while, que é na verdade bastante semelhante. A diferença entre while e fazer while é, ele irá executar o bloco de código uma vez antes de verificar se a condição é verdadeira. Em seguida, ele irá repetir enquanto a condição for verdadeira. O fazer sempre fará, mas não continuará a não ser que esta condição seja verdadeira. Eu não me encontro muitas vezes usando fazer tempo, então eu não me preocuparia muito com isso. Aqui você pode ver uma comparação lado a lado de para e enquanto e isso é sobre isso. Essa foi provavelmente uma pequena lição sobre loops porque já cobrimos um pouco sobre isso na lição arrays. Mas os loops nos permitem repetir algo uma e outra vez e fazê-lo de forma mais dinâmica. Como você pode ver aqui, exemplo perfeito. Em vez de escrever que queríamos adicionar dois carros para cada índice, podemos escrever um loop em vez disso. Também que nos permite verificar o comprimento da matriz e fazer isso para tantos itens na matriz quanto há. Isso cobre JavaScript geral. No próximo vídeo, vamos direto para como o JavaScript funciona com o DOM. Nós já vimos isso um pouco, mas é aqui que o JavaScript se conecta à sua página web existente e faz o que é conhecido por fazer, criar páginas interativas da web. Vejo você no próximo vídeo. 16. Introdução ao JS HTML DOM: Muito bem pessoal, espero que estejam entusiasmados porque na próxima seção, vamos entrar em como o JavaScript interage com HTML e cria páginas interativas da Web. Vamos rolar para baixo até este menu aqui para JavaScript HTML DOM, e vamos clicar na introdução aqui. Se você não estiver familiarizado com o modelo do objeto de documento, sempre que uma página da Web é carregada, o navegador cria um modelo de objeto de documento da página e é criado como uma árvore de objetos, basicamente a estrutura HTML. Se entrarmos em “Ferramentas do desenvolvedor” e entrarmos em “Elementos”, todos esses HTML, todos esses elementos e como eles são estruturados se tornam o modelo de objeto do documento. Como você pode ver, como eu estou pairando sobre diferentes elementos, ele destaca esse elemento e então eu posso clicar e ir mais abaixo na árvore. Uma maneira mais fácil de ver isso, eu encontrei um ótimo exemplo online. Se você quiser apenas copiar este endereço para o seu navegador, caso contrário, você pode apenas dar uma olhada na minha tela. Basicamente, esta é uma versão simplificada do que vimos antes com todos os detalhes diferentes dentro desses diferentes elementos. Aqui você pode ver que nós começamos com, na parte superior do modelo de objeto do documento é o corpo, e então nós temos qualquer coisa que nós configuramos. Isso vai ser diferente dependendo da página que você tem. Mas a grande coisa sobre este exemplo é que se eu clicar sobre isso, ele vai destacar a parte correspondente da página. Não sei o que Div5 e Div6 são, mas nada está aparecendo. Se eu clicar no corpo, leva todo o corpo da página. Se eu for mais fundo em div, você pode ver que ele está destacando um sub-div dessa div. Então você pode ver os diferentes elementos diretamente dentro disso. Como você pode ver, há uma árvore aqui, então podemos ter nidificação por toda a linha. Podemos ter no final, primeiro cabeçalho e segundo cabeçalho para tabelas. Como eu clicar através destes, você pode vê-los destacados na página aqui. Se começarmos no topo, temos o corpo e depois temos este div. Então vamos para esta div menor, então vamos para esta div para outras informações e podemos ir para o recipiente da lista, olhar para o parágrafo no topo, e então a lista real, e então a lista real, olhar para os itens da lista individual e, em seguida, que acaba com a árvore. Ou podemos começar a partir daqui novamente e ir para este filho desse elemento e então ir para outro filho do que, que é uma tabela tbody. Em seguida, podemos olhar para as linhas individuais, e, em seguida, dentro dessas linhas, podemos ver as células da tabela. Espero que esta representação visual torne isso um pouco mais fácil para você. Mas basicamente HTML que configuramos na página, se olharmos para esta página específica, isso cria um modelo de objeto de documento. Agora isso é uma coisa realmente conceitual, mas essencialmente o que o modelo de objeto de documento nos permite fazer é navegar através de um documento HTML movendo-se através desta árvore de objetos. Talvez este exemplo seja muito complexo, mas se eu trazer uma página Web simples e clicar neste link aqui. Esta é uma página web simples que eu literalmente apenas encontrei então. Se entrarmos em nossas ferramentas de desenvolvedor para este clique em “Inspecionar”, podemos ver aqui um exemplo mais simples. Você pode ver aqui nós podemos recolher e expandir as diferentes partes do nosso modelo de objeto de documento aqui. A grande coisa sobre usar a seção de elementos de suas ferramentas de desenvolvedor é que você também pode ver as tags HTML e todas as informações neles contidas. Podemos ver aqui que temos corpo e se expandirmos isso e entrarmos nesta tabela, este não é o melhor exemplo porque este site é configurado como apenas uma tabela, que não é a maneira moderna de fazê-lo, mas bem, podemos ver aqui que todos os este aninhamento acontecendo em uma estrutura semelhante a árvore. À medida que passamos o mouse sobre esses diferentes elementos, podemos ver o equivalente aparecer na página da web. Talvez seja uma coisa difícil de conceituar, mas basicamente, ter essa estrutura de árvore nos permite dizer, bem, por exemplo, eu quero que a primeira div que é uma criança deste td tenha um atributo de algo. Ou eu quero adicionar um método on-click para o primeiro filho deste td, que é o primeiro filho deste td. Ele permite que você escreva seletores que funcionam todo o caminho até a árvore e abaixo da árvore. Você começará a ver isso um pouco mais quando começarmos a usar seletores. Mas se você quiser aprender mais sobre o modelo de objeto de documento e a teoria por trás dele, você pode querer lê-lo aqui, mas é importante apenas apresentá-lo. Sempre que estou falando sobre o modelo de objeto de documento, é disso que estou falando. É a página web representada como uma árvore de objetos que nos ajuda a conceituar nossa página HTML e também a segmentar elementos dentro dessa página. Essa é a introdução ao HTML DOM. Novamente, se você quiser ler mais sobre isso, aqui está a página. No próximo vídeo, vamos aprender tudo sobre segmentação com HTML DOM. Vejo você no próximo vídeo. 17. Navegação do DOM: No último vídeo, apresentamos o Document Object Model e você pode estar se perguntando, bem, isso é tudo ótimo em teoria, mas o que ele realmente faz e por que o Document Object Model é importante? Essa é uma boa pergunta e uma pergunta que esperamos responder nesta lição enquanto discutimos como realmente direcionar elementos HTML e alterar coisas diferentes na página com base no Modelo de Objeto de Documento. Se eu ir para DOM elementos item de menu aqui, podemos encontrar elementos HTML por ID, tag, nome da classe, seletores CSS, e coleções de objetos. Se você se lembrar na última classe em HTML e CSS, podemos segmentar elementos HTML usando uma variedade de meios e alguns desses que você teria visto antes a partir disso. Então, podemos definitivamente segmentar elementos por lá classe e ID e o tipo de elemento que eles são, assim como podemos fazer com CSS. Aqui podemos ver um exemplo que descobrimos no início da nossa aula que estamos tomando o documento, lembre-se que está no topo da árvore. Então nós estamos colocando em um ponto para colocar um método sobre isso e nós estamos encontrando um elemento com o ID de introdução. Apenas para demonstrar que novamente, este parágrafo aqui é introdução e queremos direcionar esse elemento específico usando seu ID. Então não há nada de novo lá. Se descermos aqui, também podemos segmentar elementos pelo nome da tag. Assim como quando fizemos seletor de nível de um elemento em CSS, podemos fazer uma coisa semelhante em JavaScript para direcionar todos os elementos com um nome de tag de P. Também podemos encontrá-lo por classe. O método que usamos para isso é getElementsByClassName. Todos eles funcionam de maneiras semelhantes. Não vou gastar muito tempo com eles. Aqui está uma maneira que podemos encadear diferentes seletores como faríamos em CSS e colocá-lo em JavaScript. Usando o seletor de consulta todos, podemos encontrar todos os P com a classe de introdução. Parecendo que você deve ter uma compreensão dos seletores CSS e CSS já antes de tomar esta classe, eu não vou mergulhar profundamente no que está acontecendo aqui. Se você é sobre isso, definitivamente voltar e assistir os fundamentos de desenvolvimento web, HTML e CSS. Essas são maneiras diferentes que você pode segmentar elementos HTML. Se eu entrar no próximo menu, vamos pegar o que selecionamos e alterar o conteúdo. Uma maneira comum de fazer isso é com dot InnerHTML. Então isso é alterar uma propriedade neste elemento específico que visamos por ID e dando-lhe algum novo valor. Então, já vimos isso de novo antes. Isso é apenas a extensão de selecionar primeiro um elemento e, em seguida, atribuir um novo valor a ele. Se eu rolar para baixo, não é apenas em um HTML que podemos mudar. Podemos alterar um atributo como o SRC de uma imagem. Podemos mudar basicamente o que a imagem aparece em uma tag de imagem específica. Basicamente é isso para essa lição. Então, se eu entrar em CSS, também podemos mudar estilos usando JavaScript. Podemos mudar a cor das coisas. Podemos mudar o tamanho da fonte, todas essas coisas. Isso seria, naturalmente, ser comumente usado com eventos. Se clicarmos em um botão, queremos que algo fique vermelho. Vamos dar uma olhada no exemplo. Se eu clicar no botão, cabeçalho fica vermelho. Estamos mirando esse elemento pelo seu ID, pegando seu estilo. Em seguida, dentro do estilo, agarrando sua cor e alterando-a para vermelho. Então, isso deve ser bastante simples agora se o seu entendimento de JavaScript. Vamos um pouco mais fundo e olhar para a navegação. Todos esses elementos diferentes aqui podem ser considerados nós no modelo de objeto de documento. Portanto, todo o documento é um nó de documento. Cada elemento HTML é um nó de elemento. O texto dentro dos elementos HTML são nós de texto. Cada atributo HTML é um nó de atributo. Na verdade, isso está obsoleto agora. Ignore essa. Comentários são nó de comentário. Basicamente, há todos esses nós e eles estão todos inter-relacionados e podemos usar o Document Object Model e a relação entre esses nós para direcionar coisas diferentes e reorganizá-los. Só um aviso, vamos voltar um pouco teórico e cobrir um pouco sobre relacionamentos de nós. Se olharmos para este HTML básico, M um, dois visualizam a relação entre todos esses elementos que são nós no modelo de objeto documento. Podemos dar uma olhada aqui. Nós temos o elemento raiz, que está no topo, que é a nossa tag HTML. Então temos cabeça, que é o primeiro filho. Então é o primeiro elemento que é um sub-elemento disso. Então o corpo é o segundo filho. Também é a última criança. Podemos apontar para a cabeça como o primeiro filho. Nós também podemos atingir o corpo como o último filho porque é a criança que é a última, obviamente. Por outro lado, a relação de HTML para este primeiro nó filho da cabeça é um nó pai e, em seguida, a relação entre cabeça e corpo é um irmão. É como uma estrutura familiar. Se você tem este dar à luz estes dois, então estes são crianças e como você deve saber, se você tem dois filhos com os mesmos pais, então eles são irmãos. A partir do HTML acima, você pode ler que HTML é o nó raiz porque ele está no topo. Ele não tem pais, mas cabeça e corpo têm um pai de HTML. Cabeça é o primeiro filho de HTML e corpo é o último filho de HTML. Agora você pode ver que podemos dar mais um passo a fundo, e é aqui que começamos a formar árvores complexas dentro do Modelo de Objeto Documento. Podemos ver que a cabeça tem um filho também, apenas um filho e podemos ver que isso tem dois filhos. Por que isso é tão importante? Bem, é importante para navegar entre nós. Vamos dar uma olhada em um exemplo aqui. Fizemos o exemplo em que mudamos o HTML interno de um elemento, direcionando-o por seu ID. Mas e se quiséssemos segmentar um elemento por seu ID, encontrar seu primeiro filho e, em seguida, alterar seu valor. Bem, você pode atravessar a árvore usando uma propriedade como o primeiro filho. Você também pode direcionar o primeiro filho, indicando explicitamente o índice que você deseja direcionar. Isso realmente permite que você meta o segundo filho colocando um aqui. O terceiro trabalho colocando um dois aqui. Lembre-se, os índices de matrizes começam em zero. Você sempre tem que subtrair um em sua mente apenas para trazê-lo de volta ao que você acha que é o primeiro índice. Seguindo este exemplo, podemos ver aqui que não podemos apenas pegar o HTML interno de um elemento com o ID deste e atribuir um valor a ele. Mas também podemos atribuir um valor que é baseado em outro valor dentro do nosso DOM. Então, estamos basicamente copiando o HTML interno do elemento com o ID de ID 01, que está aqui para isso. Deve ser bastante óbvio o que vai acontecer aqui. Mas você pode ver aqui que nós copiamos o HTML interno do H1 nesta tag P. Voltando para a página, podemos ver aqui como podemos percorrer o Document Object Model. Se tentarmos isso, podemos ver que obtemos o mesmo resultado usando a palavra-chave do valor do nó. O valor do nó não é algo que eu uso frequentemente e vamos falar sobre uma maneira mais intuitiva de segmentar elementos usando jQuery. Então, não fique muito preso com essas palavras-chave aqui. Mas o que eu quero que você entenda aqui é que nós somos capazes de segmentar não apenas fornecendo, digamos, por exemplo, este exemplo fornecendo um ID e direcionando-o lá. Mas também somos capazes de segmentar elementos ou nós em relação a um determinado elemento ou nó. Novamente, eu não vou demonstrar isso em um vídeo posterior, então não fique muito preocupado. Uma das coisas que você está vendo muitas vezes é o documento. Estamos iniciando cada seletor com documento porque é o nó raiz. Então, estamos começando pela raiz. Se apenas escrevermos documentos. Se eu entrar no console e digitar o documento, há apenas um documento na página HTML e é o documento inteiro. Então você não precisa especificar onde esse documento está porque é a raiz, se isso faz sentido. Então a convenção que você usaria é documento que é o elemento raiz e, em seguida, um sub-elemento disso. Então, essencialmente, um nó filho. Está ficando um pouco complexo agora e estou me repetindo muitas vezes. Mas essencialmente o que eu quero que você entenda neste vídeo é como podemos segmentar diferentes elementos dentro da árvore. Ele não precisa ser getElementByID e só podemos segmentar esse elemento, mas podemos segmentar elementos que cercam isso. Podemos ter como alvo um pai disso. Podemos atingir qualquer número de filhos desse elemento. Então podemos mover para cima e para baixo um modelo de objeto de documento. Vamos mergulhar mais em que nas lições jQuery usando o que é chamado de JavaScript Vanilla, que é o que estamos usando agora. Estamos usando JavaScript sem qualquer framework. Podemos tornar isso muito mais simples usando jQuery. Não fiques muito apanhado. Eu só queria apresentar a vocês a idéia de DOM Navigation e deixar que vocês saibam que podemos direcionar elementos em qualquer relacionamento para algo que visamos com ID ou classe ou seja lá o que for. Esperemos que quando chegarmos à seleção com jQuery, vocês tenham um conhecimento bem fundamentado do que está acontecendo e nós podemos basicamente correr com ele e vocês saberão o que estão fazendo. Isso fala um pouco sobre navegação e descobrir como podemos mirar. Se voltarmos para aqui, como podemos segmentar diferentes elementos ou diferentes nós por seu nome de tag, ID, nome da classe. No próximo vídeo, vamos para os ouvintes de eventos. Lembre-se que fizemos eventos anteriormente em uma lição quando estávamos falando sobre JavaScript geral. Mas no próximo, vamos aprender como configurar um ouvinte de eventos em nosso código JavaScript. Vejo-te no próximo vídeo. 18. Ouvintes de eventos DOM: Se você se lembrar de volta aqui na lição sobre eventos JavaScript, nós abordamos como colocar um ouvinte de evento diretamente em um elemento usando um atributo. Mas há uma maneira melhor de fazer isso, e é isso que vamos aprender neste vídeo. Vamos para “DOM Events” antes de tudo. Como você pode ver aqui estão alguns exemplos de eventos, o mouse sobre o evento e o evento clique. Como você pode ver, enquanto eu passo o mouse sobre, algo está acontecendo enquanto eu cliquei sobre isso, um monte de coisas aconteceu. Vimos antes que pudéssemos adicionar um atributo de evento, mas outra maneira que podemos fazer isso é atribuindo eventos usando o HTML DOM. O HTML DOM nos permite atribuir elementos a HTML usando JavaScript e isso é algo que podemos colocar em uma seção separada do nosso documento. Não tem que ir na fila. Basicamente, podemos segmentar o elemento como seria normalmente por ID ou por um nó particular e, em seguida, podemos definir o clique no para fazer uma determinada coisa. É basicamente apenas a mesma palavra-chave que usamos quando estamos usando um atributo, mas estamos colocando-o na cadeia aqui para selecionar o elemento e, em seguida, colocar o evento no ouvinte de evento on click. Há também em carga e em troca. Eu não quero necessariamente rever todos os diferentes eventos que você pode fazer. Você pode definitivamente procurá-los através desses exemplos e aprender mais sobre os específicos. O que eu quero abordar é como configurar esses ouvintes de eventos usando o DOM. Vimos o exemplo aqui em cima, mas há outra maneira de fazê-lo e se entrarmos no ouvinte de eventos DOM, podemos ver o método add event ouvinte. Podemos adicionar um ouvinte de eventos no clique, e quando o clique é acionado, ele vai fazer essa função. Experimentando isso. Temos uma função chamada data de exibição, e agora estamos anexando o que é chamado de ouvinte de evento, que escuta para um determinado evento acontecer. Estamos definindo o evento que é e estamos definindo a função que queremos que aconteça quando esse evento acontece. Se tentarmos clicando no botão, podemos ver que o ouvinte de eventos que anexamos ao nosso botão no clique está fazendo o que pretendemos fazer fazendo esta função. Isso não é nada de novo que abordamos eventos na lição anterior, mas todo esse método de ouvinte de evento adicionar talvez seja um novo conceito. Se formos até aqui, podemos ver a sintaxe. Podemos apenas dizer em qualquer elemento particular, configurar um ouvinte evento para ouvir eu clique e executar o bloco de código aqui. A outra coisa que você deve observar é que você pode adicionar muitos manipuladores de eventos para o mesmo elemento. Temos adicionar event-ouvinte duas vezes aqui, e somos capazes de anexar um ouvinte de eventos ao mesmo elemento, mas com funções diferentes. Há muito mais coisas que você pode fazer aqui, incluindo remover o ouvinte de eventos para que você possa usar os mesmos argumentos ou parâmetros de antes, mas desta vez você apenas usa o método remove ouvinte de eventos e assim você pode remova o ouvinte de eventos que você adicionou. Há mais coisas que você pode fazer com ouvintes de eventos, mas essencialmente o que eu queria passar neste vídeo é como adicionar um ouvinte de eventos, não necessariamente em linha como vimos antes, mas em um JavaScript em outra página ou até mesmo na parte inferior da página. Eu mencionei antes que j-query nos permite colocar em ouvintes eventos de uma maneira mais intuitiva. Portanto, não é muito importante ser apanhado nisto. Vamos entrar em ouvintes de eventos novamente assim que entrarmos em JavaScript. Eu só queria dar um passo adiante e mostrar a vocês como podemos anexar ouvintes de eventos a objetos depois de segmentá-los através do modelo de objeto de documento. 19. Introdução ao Ajax: Neste ponto eu sinto que temos todo o conhecimento essencial no lugar em termos de JavaScript geral e como JavaScript se relaciona com o DOM para passar para jQuery, que é aqui em cima, jQuery é uma biblioteca JavaScript que vamos cobrir em apenas um segundo. Mas antes de fazermos isso, eu acho que há um tópico de nível avançado aqui que nós temos que pelo menos introduzir, e que é AJAX. Se você clicar em “AJAX Intro” aqui, AJAX é um sonho de desenvolvedores, acordo com W3Schools porque ele pode ler dados de um servidor web depois que a página é carregada, atualizar uma página web sem recarregar a página, e enviar dados para um servidor web em segundo plano. Basicamente, AJAX nos permite trabalhar com dados em uma página já carregada sem ter que recarregar a página. Nesta pequena lição, eu só queria apresentar a idéia de AJAX para vocês, porque sempre que você quiser interagir com dados, usando JavaScript, AJAX é realmente importante. Mas em termos de implementação de código real, jQuery nos ajuda a agilizar isso muito mais. No próximo vídeo, quando entramos em jQuery e os vídeos restantes, vamos aprender como realmente fazer uma chamada AJAX com jQuery. Mas por enquanto, eu só quero desenhar para casa o que é AJAX e para que você pode usá-lo. Aqui mesmo, se eu clicar em “Alterar conteúdo”, você verá que o conteúdo da página foi alterado. Mas de onde veio isso? Na verdade, se clicarmos em “Experimente você mesmo”, veremos aqui, e isso parece uma bagunça. É por isso que eu estou lhe dizendo para esperar até chegarmos ao jQuery porque isso é apenas um pouco confuso demais para o meu gosto, jQuery, eu sinto que torna isso muito mais simples. Mas, essencialmente, o ponto que eu quero ver aqui é quando você clica neste “Alterar conteúdo”, você não vê nenhum desses conteúdos no código real ou na página. O que está acontecendo é que você está carregando de outro arquivo, e esse arquivo está aqui. É ajax_info.txt. Toda essa informação está armazenada lá. O que você é capaz de fazer com AJAX é trazer se são dados, se é conteúdo de outra página, você é capaz de abrir uma solicitação e pegar em algum outro conteúdo que não está nesta página atual e trazê-lo para dentro sem ter que recarregar a página. Sempre que você estiver em uma página da Web, e estiver enviando dados ou trazendo novos dados, e a página da Web não precisa recarregar, você está usando AJAX porque você é capaz de carregar dados e enviar dados através de JavaScript. Voltando para aqui, podemos ver uma função aqui chamada LoadDoc. Aqui está a função LoadDoc. Isso não é algo que eu ficaria muito preso em como nós estamos indo para cobri-lo em jQuery. Mas, essencialmente, podemos definir um ouvinte de evento para executar esta chamada AJAX quando, obviamente, o botão é clicado. Se rolarmos para baixo, podemos aprender mais sobre a teoria do AJAX. É JavaScript assíncrono e XML. Não é uma linguagem de programação. Ele só usa uma combinação deste objeto XMLHttpRequest e o HTML DOM, e JavaScript para exibir ou usar os dados. Basicamente, é um pouco técnico, e você não precisa saber todo o funcionamento interno dele. Mas normalmente quando você está em um site, e você clica em algo novo, digamos, por exemplo, se clicarmos em um novo item de menu aqui, eu vou apenas clicar sobre isso, ver como toda a página web recarrega. Bem, no exemplo que mostramos antes, quando mudamos o conteúdo, ele trouxe conteúdo de outra página ou de outro arquivo sem que tenhamos que recarregar a página. Isso é essencialmente o que o AJAX faz. Ele também, como eu mencionei antes, se fôssemos enviar alguns dados em vez de ter novos dados aparecem na página, nós também podemos fazer isso sem recarregar a página ou carregar uma nova página. Voltando ao diagrama, isso é o que acontece em segundo plano quando você faz uma chamada AJAX. Um evento ocorre, ele cria um objeto XMLHttpRequest, e ele o envia através da Internet para o servidor, e o servidor cria uma resposta, envia de volta e tudo isso acontece sem você ter que recarregar a página. Honestamente, você não precisa saber o funcionamento interno disso ainda. Mas essencialmente eu queria apresentá-lo ao AJAX antes de entrar em jQuery porque a maioria dos sites hoje em dia usam dados e usam um backend. Às vezes, não é melhor para a experiência do usuário recarregar uma página totalmente nova sempre que você quiser fazer algo. AJAX é algo que eu me encontro comumente usando, e você provavelmente vai encontrar-se usando também. Mas novamente, vamos cobrir como fazer uma consulta AJAX ou chamada AJAX na seção jQuery. Sem mais delongas, vamos saltar para jQuery na próxima lição. Tudo o que você aprendeu aqui, todas as palavras-chave, agora vamos tornar isso muito mais fácil com uma estrutura JavaScript muito legal. Vejo você no próximo vídeo. 20. Introdução ao jQuery: Bem-vindos de volta, rapazes. Neste vídeo, estamos cobrindo uma introdução ao jQuery. Se todos esses comandos diferentes que aprendemos anteriormente, pareciam longos e irritantes, onde eles estão? Se tudo isso parece um pouco longo e irritante, bem, você está com sorte porque no jQuery, vamos aprender uma maneira muito mais fácil de fazer algumas das coisas que aprendemos no que é chamado de JavaScript Vanilla, que é JavaScript sem qualquer estrutura ou biblioteca. Para cobrir o básico, jQuery é uma biblioteca JavaScript. É basicamente apenas um conjunto de código que trazemos para o nosso projeto, e então somos capazes de usar esses métodos jQuery. Simplifica muito a programação JavaScript e é fácil de aprender. Aqui está um exemplo clássico de jQuery. Basicamente, você seleciona algo e que agarra o objeto e você pode executar um método ou você pode encontrar um atributo dentro dele. Aqui você pode ver que somos capazes de segmentar o documento como um todo. Mas então também aqui você vai ver como uma string que temos p e o que isso faz é que ele tem como alvo todas as tags p. Agora, o que é ótimo sobre jQuery é que ele tem como alvo exatamente a mesma maneira que CSS. Se quiséssemos colocar em um seletor descendente aqui, poderíamos, se você se lembra do CSS. Vamos tentar isso agora. Só temos três parágrafos. Mas digamos, por exemplo, se tivéssemos dentro desse parágrafo uma extensão para a frente, então poderíamos usar um seletor descendente para atingir apenas o span. Se nos afastarmos, ele desaparecerá. Enquanto que se removermos a extensão e voltarmos para apenas p, você pode clicar fora a coisa toda. A razão pela qual é a coisa toda é porque estamos usando a palavra-chave “isto”. Desculpa, saltei um pouco à frente. Em termos de seletores, jQuery é realmente bom porque você pode selecionar qualquer número de maneiras como você faria usando CSS. Mas vamos dar uma olhada no que está acontecendo aqui. Primeiro de tudo, estamos selecionando o “documento” através deste seletor jQuery e usando este método chamado ready. Você verá isso com bastante frequência em jQuery. Só executamos o código quando o documento está pronto. Aqui nós adicionamos uma função e, em seguida , dentro deste colchete é o que nós vamos estar executando. Agora, certifique-se porque há um suporte de abertura aqui que você fechá-lo também. E então você termina a declaração como você faria em JavaScript com um ponto-e-vírgula. Você verá isso muitas vezes em jQuery. Você pode vê-lo lá também. Esperamos até que a página ou o documento esteja pronto e, em seguida, estamos colocando em um ouvinte de eventos. Isto é, como eu disse, em jQuery, há uma maneira jQuery de fazê-lo no ouvinte evento e é isso. Podemos simplesmente colocar “.click” e, em seguida, adicionar uma função, e também podemos usar a palavra-chave de “this” para direcionar qualquer que seja a coisa que selecionamos é. Se tivermos “p”, “on click”, “this” .hide”, isso é o que estamos selecionando, então para ocultar a tag p, e lembre-se antes quando tínhamos span e colocamos um span em torno do “away” e clicamos em “Run”. Agora isso não vai se esconder, vai afetar apenas a extensão que é um descendente de p. Não precisa ser necessariamente o primeiro filho. Pode ser um neto ou mais abaixo da cadeia. Nesse exemplo, eu sei que jogamos uma tonelada de coisas novas em você, mas essencialmente o que temos no jQuery é um seletor e, em seguida, um método e com o seletor, é super poderoso porque em vez de escrever um documento. GetElementsByTagName e, em seguida, indo 'p' , assim, podemos em vez disso apenas fazer $ ('p'), e isso não vai funcionar a menos que jQuery está na página. Na verdade é, e por isso podemos atingir a mesma coisa. Ele vem como uma saída diferente porque isso vai nos pegar um HTMLCollection. Isso nos pega o HTML real por padrão. Mas, essencialmente, você pode ver que isso é muito mais longo do que isso. Então jQuery simplifica a programação JavaScript para nós e torna um pouco mais fácil de aprender. Na verdade, para terminar esta introdução no jQuery porque este foi um exemplo bastante pesado, eu quero passar pelo site jQuery. Se você apenas tal jQuery no Google, você pode ver alguns exemplos do que jQuery faz muito bem. As principais coisas que o jQuery agiliza para nós é DOM Traversal and Manipulation. Podemos usar select como faríamos em CSS, para escolher um botão com a cláusula de continuar, e podemos alterar o seu HTML para uma determinada cadeia de texto. Você verá isso em breve. Podemos usar seus próprios ouvintes de eventos, e podemos fazer Ajax de uma maneira muito mais agradável. Se você se lembra do que vimos antes com a chamada do Ajax, foi muito mais confuso do que a chamada do Ajax aqui. Essas são três das principais características do jQuery. Você não vai entender completamente o quão mais fácil é usar jQuery até que você realmente usá-lo. Mas agora que introduzimos jQuery para você, é hora de entrar em algumas das características do jQuery e eventualmente leva você a fazer algumas de suas próprias funções também. Vejo-te no próximo vídeo. 21. Efeitos e eventos do JQuery: Bem-vindos de volta, rapazes. Neste vídeo, vamos trabalhar com jQuery para produzir efeitos e vamos falar sobre eventos. Como eu mencionei anteriormente quando cobrimos eventos pela primeira vez e depois cobrimos ouvintes de eventos em relação ao DOM, eu disse que iria saltar à frente para jQuery em algum momento e aprender a configurar ouvintes de eventos lá. Vocês já sabem o que são eventos e já viram no ouvinte de eventos antes, mas com jQuery, podemos simplesmente definir um ouvinte de eventos através desta sintaxe. Essencialmente, tudo o que você faz é colocar no método de Clique no elemento ou grupo de elementos que você deseja o ouvinte de evento para ir em e, em seguida, você inserir uma função como a primeira propriedade desse evento. Agora, aqui você verá um método de evento jQuery muito comumente usado, e que é o método pronto documento. Isso nos permite executar uma função quando o documento está totalmente carregado. Se formos para a explicação na seção de sintaxe jQuery, que nós realmente não passar por cima, mas você pode voltar e se referir a isso. Você pode notar que muitos dos exemplos que você verá on-line e incluindo todos os exemplos que você vê neste site começarão com document.ready. Isso é bom para evitar que qualquer código jQuery seja executado antes que o documento termine o carregamento. É apenas uma prática recomendada esperar que o documento termine de carregar e, em seguida, executar o código. Alguns exemplos de ações que falhariam se tentassem executar antes que o documento fosse totalmente carregado, tentando ocultar um elemento que ainda não foi criado, ou tentar obter o tamanho de uma imagem que ainda não foi carregada, tentando fazer qualquer coisa com qualquer elemento que ainda não tenha carregado irá causar problemas, então você deve usar document.ready e, em seguida, definir uma função aberta aqui e você pode colocar todo o seu jQuery lá. Você verá isso uma e outra vez, então não se preocupe em memorizar isso, você aprenderá isso ao longo do tempo. Como você pode ver, podemos apenas substituir no caso em que estamos atrás, e como vimos antes, podemos usar a palavra-chave this dentro do seletor jQuery para fazer referência ao que está sendo clicado. Neste caso, se clicarmos duas vezes em um determinado p, o p particular no qual clicamos duas vezes é representado por isso. Temos exemplos de mais eventos, mouseenter, mouseleave, mousedown, mouseup, assim por diante. Também podemos anexar um manipulador de eventos usando o método on. O método on anexa um ou mais manipuladores de eventos para elementos selecionados. É basicamente apenas outra maneira de colocar em um manipulador de eventos, e assim usando este método específico, é apenas sobre, e então dois parâmetros, o primeiro parâmetro é o nome do evento, que é Clique neste caso, e, em seguida, o segundo parâmetro é a função na qual você coloca o bloco de código. Praticamente a mesma coisa, apenas um método e propriedades ligeiramente diferentes. Como você pode ver aqui, o que podemos fazer é definir vários eventos na mesma chamada de método usando esses colchetes e dividindo-os usando vírgulas. Mas não vejo isso na maior parte do tempo. Tudo bem fazer isso ou fazer isso. Isso é um pouco na sintaxe sobre como definir seus ouvintes de eventos em jQuery. Vamos falar um pouco sobre o que são algumas das coisas que você pode fazer quando algo é clicado. Como você pode ver aqui, há um exemplo, esconder e mostrar. Vamos dar uma olhada no esconderijo e mostrar antes de tudo. Se eu clicar neste painel, ele vai ocultar e mostrar esta parte aqui. Esse é um método jQuery muito comum e é muito fácil. Tudo o que está acontecendo aqui é sempre que você clicar em um elemento que tem o ID de ocultar, ele vai esconder todos os Ps, e sempre que você clicar em um elemento que tem o ID de show, ele vai mostrar todos os Ps. Agora o que está acontecendo nos bastidores aqui é que o estilo de exibição está mudando. Vamos dar uma olhada nisso agora. Esta é a parte que procuramos. Está bem aqui no código, mas se nós realmente clicar com o botão direito sobre ele e clicar em “Inspecionar” para vê-lo em nosso Inspetor. Infelizmente, está bloqueando agora, então vou colocá-lo aqui. Mas se clicarmos em “Inspecionar” novamente, podemos ver aqui que temos um P. Vamos ver o que acontece. Na verdade, vamos precisar mover a janela do navegador para cá. Vamos dar uma olhada no que acontece quando clicamos em “Ocultar”. Você pode ver aqui a partir do flash que algo está mudando e essa é a propriedade de estilo. Agora a propriedade style tem display none. Se clicarmos em “Mostrar”, a propriedade display de none desaparece, então ocultar adiciona uma propriedade display de none e mostrar que remove essa propriedade display. Lá você pode ver como usando um método nós somos capazes de alterar a propriedade nesse método, que seria essencialmente o mesmo que sedissemos especificamente para ir para essa propriedade estilo, ir para exibir e defini-lo como dissemos especificamente para ir para essa propriedade estilo, nenhum, mas no jQuery, é realmente fácil, tudo que você precisa fazer é colocar o método hide lá. show funciona sobre o mesmo. Outra coisa que você pode fazer é adicionar um parâmetro para ocultar e que irá determinar a velocidade que você quer que ele esconda, então se você quiser um pouco de atraso, você pode colocar em uma velocidade, é em milissegundos, de modo que seria 1 segundo. Você também pode usar um método de alternância que permite que você basicamente use o mesmo botão ou use a mesma entrada para mostrar e ocultar. Podemos clicar no mesmo botão e ele vai mostrar ou esconder. Se ele estiver sendo exibido no momento e você clicar nele, o botão de alternância irá chutar e ocultá-lo, e se ele estiver sendo exibido no momento e você clicar nele, toggle irá atuar como o equivalente ao ponto show. Ocultar e mostrar é um efeito jQuery comum. Também podemos desaparecer neste exemplo, o painel, mas em qualquer elemento, podemos desaparecer e definir a rapidez com que queremos que isso aconteça. Novamente, eu não quero ir muito tempo em todos os efeitos diferentes porque vocês podem apenas navegar em seu próprio tempo, mas nós também podemos deslizar assim. O que quer que você tenha fantasia, tudo tem a convenção similar. Você só precisa procurar o nome do método e você pode ter algumas animações com seu esconderijo e mostrar. Vamos ver o que a animação faz. Se eu clicar em “Iniciar animação”, você verá que ele anima e altera o estilo desse elemento. O que está acontecendo aqui é que temos um método de animação e nesse método colocamos em um objeto onde definimos todos os estilos que queremos fazer efeito no final desta animação. Se clicarmos e tentarmos nós mesmos, isso vai animar essa div para que ela seja deixada por 250 pixels, ela terá uma opacidade de 50% no final, ela vai mudar sua altura e largura. Se eu clicar em “Iniciar Animação”, repente ele vai do que era originalmente para isso agora. Isso é muito legal. Como você pode ver, há uma gama de efeitos que você pode fazer em jQuery. Você também pode interromper a animação como ela está acontecendo com este método stop. Nunca usei esse antes. Outra coisa que você pode fazer é um retorno de chamada. O negócio com callbacks é que instruções JavaScript são executadas linha por linha, mas com efeitos a próxima linha de código pode ser executada mesmo que o efeito não esteja terminado. Essencialmente, você pode ter várias linhas de código em execução ao mesmo tempo. Nem sempre vai ser linear com efeitos. Uma coisa que você pode fazer, e isso não é apenas com efeitos jQuery, mas conceito de programação em geral, especialmente com JavaScript, é ter um retorno de chamada. Aqui você pode ver que temos esconderijo e temos o primeiro parâmetro como lento, mas então também podemos definir um retorno de chamada. Esta função é o que é chamado de retorno de chamada e ela só será executada uma vez que isso tenha terminado. Na verdade, existem algumas situações diferentes nas quais você usaria um retorno de chamada, mas nessa situação, é óbvio que só queremos que esse alerta dizendo o parágrafo está oculto apareça quando o parágrafo terminar de ser ocultado. Se executarmos isso, agora você pode ver que isso só aparecerá quando o parágrafo estiver oculto. Podemos realmente anexar o que é chamado de retorno de chamada no final e ele vai dizer quando isso terminar de executar, executar esta instrução. Isso ajuda com a temporização em JavaScript. Neste item de menu final, temos jQuery encadeamento e podemos essencialmente encadear um monte de métodos juntos, o que é muito legal. Por exemplo, este mudaria a cor de qualquer elemento com um ID de p1 para vermelho, em seguida, deslize para cima, em seguida, deslize para baixo. Se dermos uma olhada nisso, se clicarmos, ele deslizará para cima e deslizará para baixo depois mudar a cor vermelha e um acontecerá após o outro. Não é um exemplo muito prático, mas um exemplo de como você pode encadear métodos da mesma forma. Isso é muito bonito para eventos jQuery e efeitos. Espero que você possa ver aqui agora como jQuery é legal e como podemos combinar ouvintes de eventos e efeitos para obter alguma interatividade acontecendo em nossa página web e como eu mostrei a você quando fomos para a página jQuery, se eu voltar para a página aqui, manipulação de eventos e afeta é uma das coisas mais comuns que você pode fazer com jQuery e uma de suas principais características. No próximo vídeo vamos falar sobre Traversal e Manipulação, e então no vídeo depois disso, vamos falar sobre Ajax. Dessa forma, estaremos cobrindo as três principais características do jQuery. Vejo você no próximo vídeo. 22. Travessia do jQuery: Tudo bem caras, então neste vídeo vamos continuar aprendendo sobre jQuery e vamos cobrir o próximo conjunto de características importantes no jQuery, que é atravessar e manipular. Isso soa muito chique, mas o que é realmente atravessar? Bem, isso significa mover através de diferentes elementos HTML com base em sua relação com os outros. É basicamente por isso que passei tanto tempo falando sobre o DOM e falando sobre nós e como tudo funciona. Aqui você pode ver outra ilustração da árvore DOM e com jQuery atravessando, somos facilmente capazes de mover para cima, para baixo e para os lados, partir de um elemento selecionado e isso é chamado de passagem. Agora eu realmente não posso explicar para vocês o quão importante isso é ser capaz de fazer isso até você realmente ficar preso e tentar configurar um monte dessas coisas com um documento ao vivo. Mas às vezes você não pode realmente afetar esse intervalo ou você deseja segmentar todos os vãos de uma classe de lista de algo. Você precisa ser capaz de ser flexível em como você é capaz de segmentar elementos e coleções de elementos. Se esta ilustração não faz sentido para você, você pode ler mais aqui. Por exemplo, os elementos div é um pai de ul e é o ancestral de tudo dentro dele. Todos estes são descendentes deste ul. Como atravessamos o DOM? Bem, nós temos todo esse cardápio aqui. Vamos falar de antepassados. Então, a maneira que podemos atravessar a árvore é usando pais ou pais, ou parentSuntil. Um comum é pai e então o que isso vai fazer é que ele vai começar selecionando qualquer intervalo e ele vai retornar quaisquer pais imediatos de um span. Vamos dar uma olhada no exemplo deles aqui. Agora estamos começando a ficar um pouco mais complicado, mas essencialmente você vai ver que temos vãos aninhados aqui dentro de um p nesta instância e temos um aninhado dentro de uma tag li aqui. O que podemos fazer é, em vez de abrangência de segmentação para cada um deles, podemos direcionar o pai de qualquer span. Podemos ir span e, em seguida, podemos usar o pai método e, em seguida, quaisquer pais de span. Vamos agora aplicar esta regra de estilo dois. Dê uma olhada aqui. Aqui está uma representação visual do que está acontecendo. Nós temos esses dois vãos que estamos mirando através disso e estamos dizendo que todos os pais imediatos de um span, nós queremos aplicar a borda vermelha também. Você pode ver aqui nesta instância que é um li, neste caso é um p. Não importa qual tipo de tag particular é apenas desde que seja o pai imediato desse elemento que estamos direcionando ou grupo de elementos neste caso. Nós também pode retornar pais, que retorna todos os elementos ancestrais de um elemento seletor todo o caminho até o elemento raiz do documento. Ele não apenas seleciona o pai imediato, ele seleciona todos os antepassados. Você pode ver aqui que estamos fazendo uma coisa parecida. Estamos começando com todos os vãos e, em seguida, estamos mirando todos os pais de todos os vãos. Como você pode ver aqui, nós temos uma extensão e, em vez de aplicar um estilo diretamente a essa extensão, estamos aplicando-o a todos os seus antepassados. Você tem li, ul, div e corpo, todos terão essa borda vermelha. Tudo bem? Voltando, temos um outro e que é parentSuntil, então com parentSuntil ele irá retornar todos os elementos ancestrais entre dois argumentos dados. O que isso nos permite fazer é dar um ponto de corte, que ele não vá até a árvore porque todo o caminho até a árvore, nós poderíamos ir tão longe quanto todo o corpo e muitas vezes isso não é muito prático. O que estamos fazendo aqui é que estamos novamente selecionando todos os vãos e então estamos aplicando qualquer método que temos aqui, que é, neste caso, aplicar uma borda vermelha, queremos que ela se aplique a todos os pais até atingir div. Estamos começando aqui e atravessando o DOM, lembra da palavra “travessia”? e assim estamos olhando para todos os pais. Aqui está o primeiro pai. Ainda não atingimos o Div, então aplique a borda vermelha. Em seguida, não é um div aplicado uma borda vermelha, e este é também um pai é também um ancestral, mas não queremos aplicar o estilo porque temos atingido o ponto até que é div. Porque isso é uma div, não estamos mais alcançando através dos antepassados. Muito legal, certo? A alternativa é descendentes e isso é um pouco mais comum. Podemos segmentar todas as crianças, ou podemos usar este método de achados realmente legal para pesquisar através dos filhos de um determinado elemento baseado em um seletor. Aqui, somos capazes de mirar todas as crianças de Div. Vamos dar uma olhada no exemplo, aqui onde usando o ponto de partida de todos os divs e seguida, estamos mirando todos os filhos de todos os divs. Aqui temos uma div e estamos mirando todas as crianças diretas desta div. Usar crianças, é diferente dos pais. Estamos mirando apenas os filhos imediatos, não os netos, ou mais para baixo, então não está mirando todos os descendentes. Alternativamente, se quisermos atingir todos os descendentes e também podemos filtrar todos os descendentes por um seletor particular como aqui, podemos usar o método find e então o que isso faz é que ele começa com div e em seguida, ele encontra todos os vãos dentro todos divs e, em seguida, podemos aplicar um método sobre isso. Então vamos olhar para o exemplo para isso. Novamente, estamos aplicando a borda vermelha de dois pixels sólidos e então o que estamos fazendo aqui é que estamos encontrando todos os divs e, em seguida, dentro de divs onde encontrar todos os vãos. Isso afetará todos os vãos que estão dentro de uma div, o que é bastante comum. Agora você pode ver todos os vãos estão dentro de divs, mas se fôssemos colocar e agora a extensão do lado de fora de uma div. Então, como você pode ver, esse span não está dentro de uma div e nós clicamos em executar. Isso não terá uma borda de vermelho, dois pixels sólidos. Tem que estar dentro de um div. Você quase pode pensar nisso como todos os vãos com antepassados de div. Voltando para aqui, também podemos retornar todos os descendentes de um div usando este asterisco. Tentando isso nós mesmos, se quisermos atingir tudo o que é descendente de uma div, podemos usar este asterisco. Agora eu disse que queria voltar aqui e o que podemos fazer é usar este pequeno filtro aqui que usamos no find e podemos colocá-lo como uma propriedade no método de crianças também e então o que isso faz, muito semelhante ao encontrar. Ele vai encontrar descendentes que são apenas filhos imediatos de todos os divs e se encaixam nesta regra de seleção particular. Lembre-se de CSS, isso irá selecionar todos os p com uma classe de primeiro. Temos um p com uma classe de primeiro aqui e tem um ancestral imediato de div, basicamente div é seu pai. Estamos aplicando esse estilo enquanto podemos descer até aqui e podemos ver que isso não tem a classe de primeiro, então não afeta aqui. Se eu fosse remover esta parte, que filtra por classe e executar novamente, você verá cada criança imediata que é uma tag p de um div terá esta borda. Mas se fôssemos remover este filtro por classe e não pudéssemos realmente colocar um p dentro um p. Digamos que estamos procurando por crianças div de div e lembre-se que isso é apenas crianças imediatas. Se eu colocasse outra div, digamos aqui e depois esta div, eu vou dizer, “Olá.” Vamos executar isso e você pode ver aqui que agora estamos mirando crianças imediatas divs de uma div. Então lá vamos nós, esses são dois métodos que podemos usar para atingir descendentes e atravessar a árvore DOM. Nós também podemos atravessar lateralmente na árvore DOM usando todos esses seletores irmãos diferentes. Novamente, não quero entrar em grandes detalhes aqui. Se você entende antepassados e descendentes, então você será capaz de entender irmãos muito facilmente. Isso vai ter como alvo todos os irmãos de qualquer h2 e isso vai atingir todos os irmãos de h2 que têm uma etiqueta de p. Tudo bem, então praticamente a mesma convenção de antes. Em vez de crianças, agora estamos mirando irmãos. Então, se você pode entender isso, você pode entender isso muito bem, eu acho. Mas está tudo aqui para referência se você precisa se referir a ele, temos NextUntil assim como o ParentUntil, conceitos muito semelhantes. Finalmente, temos filtragem jQuery e podemos usar isso para encontrar o primeiro filho usando o primeiro método, o último filho usando o último método, eo método eq, que irá selecionar um elemento filho com esse índice. Vou mostrar-lhe isso brevemente. Você pode ver aqui que temos um monte de tags p e, neste caso, o primeiro p seria o primeiro filho, segundo filho, terceiro filho, quarto filho e assim, neste caso, podemos pegar o segundo p. Lembre-se que estamos usando números de índice aqui, então um realmente representa o segundo índice. Podemos segmentar o segundo índice usando eq aqui. Então, se quiséssemos atingir a primeira tag de parágrafo, apenas colocando um zero para atingir a terceira tag de parágrafo, coloque os dois e lá vai você. Podemos aplicar uma cor de fundo a isso. Tudo bem, nós também podemos usar este método de filtro que coloca outra condição neste seletor para que nós queremos todos os p, mas então nós só queremos filtrar por p é que tem a classe de introdução. Não sei por que esse existe, porque provavelmente poderíamos conseguir a mesma coisa apenas colocando no seletor assim. Vamos ver se isso funciona. Sim, então isso tem o mesmo efeito não sei qual é a diferença lá e nós também podemos fazer o oposto que é alvo ou p's e, em seguida, filtrar tudo o que é classe de introdução em nossa seleção. Isso faz muito mais sentido. Todos os p, exceto aqueles com a classe de introdução, vamos aplicar isso a. Tudo bem, então isso cobre muitas das coisas que você pode fazer se atravessar. No caso de manipulação, quero dizer, você tem uma variedade de opções diferentes aqui. Vamos dar uma olhada em jQuery get. Há tantos métodos diferentes aqui que você pode mudar, HTML é um comum. Em termos de manipulação, eu acho que este vídeo em travessia já passou o tempo suficiente. Eu vou cobrir manipulação no próximo vídeo, e nós vamos passar por este menu então eu vou vê-lo no próximo. 23. Manipulação do jQuery: Tudo bem todo mundo. Lembre-se no último vídeo, acabamos de atravessar em jQuery. Agora sabemos como obter um ponto de partida, direcionar um determinado elemento ou grupo de elementos e, em seguida, atravessar para cima e para baixo a árvore DOM. Mas agora, uma vez que somos capazes de selecionar qualquer elemento específico do grupo de elementos, quais são algumas das coisas que podemos fazer para manipulá-los? Neste menu para jQuery HTML, temos alguns exemplos e informações sobre manipulação DOM. Alguns comuns aqui, texto, HTML e val, estes fazem coisas diferentes dependendo do contexto. Neste contexto particular em que estamos tentando concatenar uma string, e estamos apenas colocando texto aqui sem argumento, o que estamos fazendo é que estamos pedindo jQuery para nos dar o texto deste elemento em particular. Então, qualquer elemento com o ID de teste, queremos trazer o texto disso, e aqui, assim como o texto, há outro chamado HTML, que inclui a marcação HTML não apenas texto. Por exemplo, se este elemento com um ID de teste tivesse elementos aninhados, ele traria isso também. Vamos dar uma olhada no exemplo. Como você pode ver aqui, temos dois ouvintes evento configurar botão 1 no clique vamos executar esta função que nos dará um alerta. Ele vai começar com o texto string e, em seguida, adicionar o valor de texto de teste, que neste caso é este porque este é o elemento com um ID de testes. Vamos mostrar texto. Lá vamos nós e podemos ver aqui texto. Este é um texto em negrito no parágrafo que é exactamente o que temos aqui. Se fôssemos clicar em mostrar HTML, podemos ver a diferença. Podemos ver que ele inclui nossa marcação HTML lá também. Então, voltando para aqui, aqui embaixo, você pode ver que você também pode pegar o valor. O valor é frequentemente usado com entradas. Então, quando você está fazendo um formulário, você pode ver aqui nós temos Mickey Mouse como o valor, mas nós podemos mudar isso, e quando nós clicamos neste botão, pegue o valor dessa entrada, e nós podemos ver aqui Mickey Rato. Se mudássemos isso para Mickey e mostrássemos valor, chegaria ao Mickey. Lembrem-se, eu disse que depende do contexto. Ao colocá-lo aqui, no contexto de um alerta de saída, tudo o que ele faz é produzir algum texto na tela concatenando esta string com o resultado disso, estamos simplesmente recebendo o texto. Mas se entrarmos no menu de configuração aqui, podemos dizer que podemos usar exatamente o mesmo método em um contexto diferente, e ele vai realmente definir algum texto. Em vez de receber o texto em um elemento que tem um ID de test1, podemos definir o texto em um elemento que tem o ID de test1. Vamos dar uma olhada no exemplo. Aqui temos três ouvintes de eventos e três botões. Se clicarmos no primeiro botão, ele irá executar esta função que define o texto deste parágrafo aqui que tem um ID de test1 para “Olá mundo”. Se eu clicar em definir texto, lá você verá que nós somos capazes manipular o texto naquele para ser o que nós declaramos que ele é. Aqui podemos inserir algum HTML em test2. Vamos clicar em definir HTML e ver que somos capazes de colocar em que HTML, e você vê que ele já pausa o HTML para nós. Na verdade, não vemos essas tags, mas vemos o resultado do HTML. Finalmente, podemos definir o valor deste campo de entrada para Dolly Duck, como dissemos aqui, e Wallah, lá vai você. Essa é uma lição importante a observar, esses três métodos significarão coisas diferentes com base no contexto e isso é algo que você pode ver ao longo do jQuery recebendo e configuração muitas vezes têm os mesmos métodos, mas o contexto mudará o que eles realmente fazem. Isso é tudo por isso, além do método attr. Attr vai pegar o valor de um determinado atributo, para que possamos pegar o atributo href de um elemento particular. Este provavelmente será um link neste caso porque ele tem href. Aqui você pode ver que temos uma etiqueta. E se quiséssemos obter o valor desse atributo? Bem, podemos obtê-lo usando este método aqui, usando A-T-R e, em seguida, colocando no nome do atributo que queremos agarrar. Se clicarmos nisso, podemos ver que o valor href agora é emitido em nossa tela. Se voltarmos e ir para o menu definido, você verá que podemos fazer a mesma coisa com atributo, mas configurá-lo. Em vez de um parâmetro, agora temos dois, então pegamos qualquer nome do atributo que queremos alterar, e colocamos o valor que queremos que seja. Nós também vamos abrir um colchetes com atributo e definir vários ao mesmo tempo. Podemos dizer href, queremos ser isto e título, queremos ser isto. Vamos dar uma olhada no que isso realmente faz. Se clicarmos nisso para alterar o href e o título, não podemos realmente ver nada mudando em nossa página aqui, mas se clicarmos em inspecioná-lo e dar uma olhada no código, podemos ver que href é agora o que definimos. Se eu mover isso para o lado, podemos ver que o href é agora isso porque nós definimos esse valor aqui usando attr, e nós também definimos o atributo title para W3Schools jQuery Tutorial aqui. Se eu fosse mudar isso para título um link incrível, vamos executar isso, e então vamos inspecionar esse elemento. Você verá aqui que o título é algum título até clicar no botão e, em seguida, agora é um link incrível. Nós dois podemos começar e definir com attr também. Descendo o menu, podemos ver adicionar aqui. Para adicionar elementos e conteúdo, temos append, prepend, after e before. A diferença entre todos estes é append irá inserir conteúdo no final dos elementos selecionados. Prepend irá colocá-lo no início, depois vamos colocar o conteúdo após os elementos selecionados, e antes vamos inseri-lo antes dos elementos selecionados. Então dê uma olhada nisso aqui. Nós temos uma tag p, e nós vamos anexar algum texto para essa tag p. Se eu entrar no exemplo aqui e clicar em acrescentar texto, temos ouvintes de eventos neste botão e assim que eu clicar neste botão1, ele vai encontrar todos ps e anexar esta string particular de HTML. Temos dois ps aqui e agora se clicarmos com o botão direito e inspecionarmos sobre isso, veremos que temos um pedaço de texto anexado com as tags b lá para torná-lo em negrito dentro que p. Mais uma vez, há um monte de maneiras que podemos fazer isso. Também podemos antecipar antes e depois. Encorajo-vos a ir ler esta referência. Não vamos entrar em todos os exemplos agora, mas você também pode remover certos elementos, esvaziar os elementos filho de um elemento selecionado. Você também pode manipular CSS adicionando classes, removendo classes, alternando classes e você pode usar a propriedade CSS para alterar o valor das propriedades de configuração. Como você pode ver, eu só estou correndo até o fim aqui. Você tem a referência aqui se precisar. Mas essencialmente, o que eu queria mostrar a vocês eram esses comuns para obter e definir coisas comuns que você precisará fazer quando atravessar o DOM, selecionar o que você quer selecionar, e depois vir aqui para manipular. Isso cobre praticamente a segunda característica principal do jQuery, travessia e manipulação. No próximo vídeo, vamos cobrir a terceira maior característica do jQuery e que é AJAX, e depois disso você vai entrar em seus projetos de classe. Não muito tempo até você estar pronto para sair pelo mundo e fazer isso sozinho. Estou ansioso para pegá-lo no próximo vídeo sobre AJAX. Te vejo então. 24. jQuery AJAX: Certo pessoal, então em nosso vídeo final sobre jQuery, vamos cobrir AJAX. Vamos mergulhar direto e cobrir a introdução. Como você pode ver aqui, ele usa o mesmo exemplo antes que vimos quando cobrimos uma introdução ao AJAX e JavaScript, já cobrimos o que o AJAX faz. Mas em termos de jQuery, o que podemos fazer com AJAX é criar uma chamada AJAX usando jQuery é métodos, que aqui você pode ver sem jQuery, codificação AJAX pode ser um pouco complicado. É complicado porque como navegadores diferentes com sintaxe diferente, e como você viu antes, se eu apenas trazer esse exemplo AJAX de quando estávamos fazendo JavaScript baunilha, isso é o que você está lidando quando você está fazendo uma chamada AJAX usando JavaScript sem jQuery. Aqui na próxima página, você pode ver como somos capazes de usar jQuery para carregar em algum conteúdo usando AJAX. Aqui mesmo, o exemplo mais simples é carregar. Carga de ponto é simples, mas muito poderoso como ele afirma aqui e nos permite carregar dados de um servidor e coloca os dados de retorno em um elemento selecionado. Esta é uma dádiva de Deus, então vamos tentar nós mesmos, e como você vê aqui, podemos simplificar toda essa chamada AJAX complexa apenas usando.load, e isso irá carregar qualquer conteúdo que está neste arquivo para o que está selecionado aqui. Estamos selecionando todos os elementos com um ID de div, que porque estamos usando ID, deve ser apenas um na página, e está bem aqui. Agora, se eu clicar neste botão, agora, você verá que tudo dentro desta div agora mudou porque ele está carregado em algum conteúdo externo. Muito fixe. Você também pode adicionar um seletor jQuery ao parâmetro URL. Aqui você vai carregar o conteúdo do elemento com um ID de p dentro do arquivo demo test.txt em um div. Basicamente permite filtrar. Eu só quero elementos com um ID de p1 deste arquivo específico para carregar neste elemento específico que está em nossa página. Se olharmos e tentarmos nós mesmos. Novamente, não podemos ver o conteúdo desta página específica, mas podemos imaginá-lo. Se eu clicar sobre isso, você pode ver que nós só vamos obter a parte do arquivo de texto que é um elemento do ID de p1. Aqui só obtemos o elemento com um ID de p1. Provavelmente mais comum do que carregar na minha experiência, é obter e postar AJAX. Novamente, você precisa de um backend para esta ou alguma fonte de dados para se conectar, então é difícil mostrar um exemplo concreto, mas podemos chegar a isso no projeto de classe, o jQuery GetMethod irá solicitar dados de um servidor com uma solicitação GET. No desenvolvimento web e programação back-end, há esses pedidos, código, gets e posts. Isso está falando mais sobre desenvolvimento web de back-end. Mas, essencialmente, o que estamos fazendo aqui é obter dados quando fazemos uma solicitação get. Aqui mesmo, se eu usar esse GetMethod, eu posso direcionar o endereço específico, então eu começo uma função com dois parâmetros, dados e status, e eu posso recuperar os dados e o status. Vamos dar uma olhada no que isso parece. Se eu clicar neste botão, eu vou receber um alerta e ele vai voltar com os dados que ele retorna deste endereço, e ele vai voltar com um status também. Se eu clicar nesses dados, este é alguns textos daqui para arquivo ASP externo, status, sucesso. Obviamente, o status é sucesso porque recuperamos os dados. Isso é muito bom. Se eu for inspecionar isso e entrar na rede, espero poder mostrar o que está acontecendo aqui. Vamos mover isto para o lado, e vamos limpar este console. Se eu clicar nisso, você verá que fizemos uma chamada para demonstração sublinhado test.ASP, e agora podemos realmente entrar e inspecionar o que aconteceu. Fizemos uma solicitação para esse URL em particular, e o código de status é 200, que é verde e tão bom, e temos um monte de outras informações todas aqui. Mas eu só queria demonstrar, você não precisa entender completamente como usar este painel, mas eu estou apenas demonstrando que um pedido aconteceu em segundo plano, e nós recuperamos alguns dados com sucesso. Se eu voltar aqui, podemos postar dados usando o método jQuery post, então os parâmetros para isso será o lugar que queremos enviá-lo, os dados a enviar, e o parâmetro callback, o que queremos que aconteça no final. Temos uma coisa parecida aqui. Vai confirmar que fomos capazes de enviar estes dados para este endereço em particular. Se eu clicar sobre isso, ele diz, Data: Caro Pato Donald. Espero que você viva bem em Duckburg” e o status é bem sucedido. Em vez de recuperar essa informação, nós realmente temos a informação aqui e estamos enviando para esse endereço. Novamente, não faz sentido perfeito, sentido prático perfeito até que tenhamos um backend ou ponto de dados para enviar ou obter, mas isso é AJAX. Essencialmente, esta é a interface do JavaScript com o backend. e assim você precisará entender o que está acontecendo nesses endereços específicos também que terá que ser transmitido para você por seu próprio conhecimento do backend que você mesmo tratou ou por alguém que é um back-end ou se você estiver usando uma API, talvez seja necessário verificar a documentação deles e ver o que você precisa fazer sua solicitação. Mas é claro, AJAX é provavelmente um dos tópicos mais complexos em jQuery. Você pode ler mais sobre isso. Mas, na verdade, você não entenderá totalmente AJAX até ter uma compreensão de backend também, porque backend é onde você vai obter os dados. Isso cobre jQuery para nós. Estou animado agora, pessoal, porque é hora do seu projeto de aula. Nós cobrimos todas as bases que você precisa para começar a trabalhar com JavaScript. No próximo vídeo, vamos começar com o projeto de classe, e realmente fazer você escrever algum código. Estou animada por isso. Vejo-te no próximo vídeo. 25. Projeto do curso: introdução: Nos próximos vídeos, vamos falar sobre seus projetos de aula. Como o JavaScript é bastante amplo no que é capaz de alcançar, seu projeto de classe também é bastante amplo. Tudo o que eu quero que você faça é usar seu novo conhecimento de JavaScript para criar um novo projeto web ou melhorar um projeto web existente que você tem. Se você está confiante o suficiente para fugir e criar seu próprio projeto, então vá em frente. Caso contrário, o que eu fiz foi criar este projeto de exemplo, que vamos rever no próximo vídeo. Minha idéia para esta pequena aplicação simples é uma página que fornece uma lista de Pokemon. Só há dois passos para isto. Nós vamos ter um botão que irá carregar em uma lista de Pokemon de uma fonte externa, e então, vamos permitir que o usuário esconda cada um deles com um clique de um botão. Honestamente, há tantas coisas diferentes que você pode fazer com JavaScript e eles dependem de outros elementos e outras fontes de dados, então ele meio que fica no meio. Ele funciona melhor quando você deseja incluir recursos em um aplicativo já existente. Este é um exemplo bastante básico, mas mesmo assim, você vai aprender muito sendo capaz de fazer algo assim. Novamente, você pode simplesmente executar com esta pequena descrição aqui, criar seu novo projeto, ou melhorar um já existente. No entanto, se você é ignorante ou não sabe o que fazer, você pode acompanhar nosso projeto de classe. Uma vez que tenhamos isso como ponto de partida, você pode ter mais idéias sobre como melhorá-lo, e isso pode lhe dar um pouco de confiança para expandir este projeto, ou trazer esse conhecimento de volta para seus próprios projetos. Mais uma vez, sinta-se à vontade para pular o próximo vídeo se você quiser apenas criar seu próprio projeto. Depois do próximo vídeo, vamos para a conclusão. Sinta-se livre para pular em frente a isso. Caso contrário, se você quiser se juntar a mim como eu construir este pequeno aplicativo, então fique ligado para o próximo vídeo. Te vejo lá. 26. Projeto do curso: acompanhe comigo: Neste projeto de classe de exemplo, vamos usar algumas das coisas que aprendemos nas lições anteriores, como Ajax, como ouvintes de eventos e um pouco de travessia do DOM também. O primeiro passo, carregando uma lista de Pokemon de uma fonte externa. Nós vamos, claro, usar o Ajax para isso. E a fonte externa é o que é chamado de API. Eu não quero entrar em uma grande quantidade de detalhes sobre APIs, porque para mim pelo menos eu acho muito mais fácil de entender uma vez que eu começar a usar uma em vez de ter isso explicado para mim. Nós vamos apenas mergulhar direto nisso, e então a segunda parte é que vamos permitir que o usuário esconda cada um deles com um clique de um botão. Honestamente, poderíamos adicionar uma lista de dez coisas diferentes aqui, mas isso é apenas para você começar, e os primeiros passos serão os mesmos para qualquer projeto JavaScript em termos de criação de uma página web, trazendo jQuery, e começar com a execução de alguns ouvintes de eventos e funções diferentes. A primeira coisa que vou fazer é abrir uma janela de busca. Vou para a minha área de trabalho e criar uma nova pasta para o nosso projeto. Eu só vou chamá-lo projeto JS, não o nome mais inventivo, e assim como eu fiz na classe anterior em HTML e CSS, eu vou apenas copiar o exemplo em escolas W3 para o HTML. Se você quiser fazer a mesma coisa e ir para w3schools.com, basta clicar em HTML e eles lhe dão um exemplo básico. Vou copiar isso. Vou abrir um editor de código. O meu é átomo, e eu vou criar um novo arquivo, colar esse código e salvá-lo imediatamente sem alterar nada. Vou entrar no meu projeto e vou chamá-lo de Index.html, assim como fizemos na classe anterior. Indo para fazer algum recuo aqui, eo que eu vou fazer é mudar o título da página para Pokemon, mudar o primeiro título para Pokemon, e em vez desta tag parágrafo com um parágrafo aleatório lá, eu vou substitua isso por uma div, na qual vamos colocar o conteúdo. Eu vou abrir e fechar primeiro, deixar um espaço para a identificação, e eu vou chamar isso de lista de poke-list. Antes disso, eu vou criar um botão que eu posso usar para clicar em, e então eu vou trazer a lista de Pokemon da fonte externa. Eu vou dar a este um ID de obter botão Pokemon, e então eu vou escrever esse texto lá, legal. Vou colocar isso de lado. O que você deseja fazer agora é carregá-lo em seu navegador. Vou pegar isso, arrastá-lo aqui, e agora nada vai acontecer porque ainda não temos JavaScript. Duas coisas que eu quero entrar no projeto antes de realmente começar a escrever algum código nós mesmos é Bootstrap e jQuery. Você teria visto bootstrap na classe anterior em HTML e CSS. Caso contrário, o Bootstrap é apenas uma estrutura CSS. É a biblioteca HTML, CSS e JavaScript mais popular do mundo de acordo com seu próprio site, o que eu vou fazer é apenas clicar em download aqui, e ele vai dar-lhe todos os diferentes arquivos dentro do bootstrap, mas estamos apenas interessados nos arquivos CSS. Vou baixar isso. Ele vai baixar muito rapidamente. Indo para abrir uma nova janela do localizador para navegar no meu download. Eu vou expandir esse diretório, excluir o diretório antigo para o lixo, e eu vou para CSS e apenas pegar bootstrap.css e, em seguida, arrastá-lo para aqui. Eu não vou usar nenhuma das outras coisas, então eu fico feliz em apenas apagar a pasta toda, e lá vai você. Temos bootstrap em nosso projeto. A próxima coisa que temos que baixar é jQuery. Se nós apenas procurar por jQuery e ir para seu site, nós podemos novamente baixar jQuery aqui e nós podemos obter o comprimido ou o desenvolvimento, não importa. Eu só vou ficar comprimido porque esse foi o primeiro elo. Eu vou para o nosso projeto novamente e eu vou clicar em Salvar. Legal. Temos os dois arquivos lá dentro. A próxima etapa é ligar, e você deve se lembrar disso da classe anterior, ou se você já sabe um pouco de HTML, vamos fazer isso na cabeça. Eu vou ligar a folha de estilo dizendo link rel="stylesheet”, e então eu acredito que o atributo é href, e é apenas bootstrap.css. Então eu vou trazer o script jQuery. Vou criar duas tags de script. Vou colocar um endereço aqui. Eu só vou copiar e colar o nome exato do arquivo, colocá-lo lá. Agora o que eu quero fazer enquanto estamos aqui é colocar em nosso próprio arquivo JavaScript, que ainda não construímos, e um nome comum para isso é app.js ou index.js ou main.js. Eu só vou chamá-lo de app.js. Não importa o que você chama. Para verificar se isso está tudo funcionando bem, eu vou clicar em novo arquivo, e eu vou colocar em um log de console do arquivo js carregado. Então eu vou salvar isso e entrar no meu projeto e usar exatamente o mesmo nome que eu coloquei no atributo fonte. Isso foi app.js, como você pode ver aqui, app.js, app.js. Vamos colocar um ponto-e-vírgula nisso para ter certeza que é o fim da declaração, e agora eu posso atualizar a página. Agora, uma coisa que você vai notar é que o estilo mudou completamente e isso é porque estamos usando bootstrap. Apenas para bootstrap um arquivo, HTML um pouco mais antes de continuarmos, eu vou dar ao botão uma classe de BTN e, em seguida, BTN primário, e isso vai nos dar algum estilo de Bootstrap, e então a outra coisa é, Vou colocar tudo isso em um div com o contêiner da classe. Isso vai torná-lo um pouco mais agradável. Você verá em apenas um segundo o que isso faz. Agora, quando atualizo a página, ela está em um contêiner que responde. Legal. A última coisa para verificar se está tudo funcionando é entrar no meu console. Vou fazer isso com o comando Alt I no Mac, e voila, diz aqui js arquivo carregado, o que significa que estamos carregando isso. Podemos dizer que ele está carregando no Bootstrap porque estamos recebendo esses estilos. Podemos dizer que ele está carregando nosso arquivo app.js porque ele está executando esse código não estamos confirmados ainda se ele está executando jQuery. Podemos realmente executar algo diretamente dentro do navegador usando um seletor jQuery. Vou selecionar o documento. Eu vou rodar isso, e você pode ver que ele está selecionando o documento. Sabemos que temos jQuery trabalhando. Sabemos que temos nosso arquivo JavaScript vinculado, e sabemos que Bootstrap também está vinculado. Agora estamos prontos para começar a escrever algum código. Agora, a API para obter o Pokemon é @pokeyapi .co. Eu vou para essa página da web, e como você pode ver aqui, você pode colocar coisas diferentes nesta caixa, clicar em “Enviar”, e ele vai lhe dizer qual é a resposta. Eu experimentei com isso de antemão, e para obter a lista de Pokemon, nós só precisamos executar esse endereço, e você pode literalmente apenas copiar o todo, ele realmente não deixa você copiar a partir daqui. Mas se eu fosse para ir para um ponto diferente no meu navegador e apenas copiar isso através, você vai ver aqui, ele vai aparecer assim. Na verdade, eu tenho um plug-in que vai fazer os dados olhar um pouco mais agradável. A sua vai parecer como tinha antes, antes de começar. Então, será só um monte de mensagens como foi por um segundo. O plug-in que eu uso para que, se você estiver interessado, é vista JSON. Sim, se você quiser que seu JSON apareça bem assim, com a capacidade de expandir e contrair. Definitivamente confira a vista JSON. De qualquer forma, chega dessa tangente. Vou manter este endereço exato à mão porque na nossa chamada Ajax, vamos chamar esta API em particular. Voltando para aqui, o que eu vou fazer é remover este log console, e eu vou começar com um documento jQuery, e ele sempre começa com a função pronto documento. Não se envolva com o que estou fazendo aqui. É uma função bastante padrão, sempre vai parecer praticamente a mesma. É apenas uma questão de memorizá-lo, e dentro desta função, você vai colocar todas as outras funções que você deseja executar na página. Isso só garante que o documento esteja pronto antes de começar a executar essas funções. A primeira coisa que eu quero fazer é configurar um ouvinte de eventos, eo ouvinte de eventos que eu quero configurar é verificar se este botão é clicado, e no clique vamos carregar na lista Pokemon. Eu vou iniciar um seletor jQuery. Lembre-se que chamamos o botão, pegue o botão Pokemon. Eu vou abrir isso, colocar um # em porque é assim que nós segmentamos IDs, e eu vou usar este método de criação de um ouvinte de evento. Função e, em seguida, qualquer coisa que colocamos dentro deste bloco de código será o que acontece quando clicamos no botão Pokemon. Poderíamos testar isso e colocar no botão log console clicado, e agora se eu voltar para esta página com o meu console aberto, se eu clicar no botão, você pode ver e este número vai subir. Na verdade, não vai repetir. Só vai colocar um número ao lado. Se for exatamente o mesmo, você verá esse número subir e o texto sair, botão clicado. Sabemos que este ouvinte de eventos está funcionando. Mas o que eu quero que aconteça é que eu quero fazer um pedido Ajax para que API e trazer aqueles Pokemon. O que eu vou fazer é fazer uma solicitação get usando jQuery, eo primeiro parâmetro vai ser a URL. Este é o URL aqui. O segundo parâmetro vai ser uma função. Só para lembrar como criamos esta função get, eu vou voltar para escolas W3 e ir para a seção jQuery e ir para o jQuery obter mensagens menu. Como você pode ver aqui, o primeiro parâmetro é o URL eo segundo parâmetro é o callback, e, em seguida, o callback, podemos colocar uma função com dois parâmetros. Um será os dados e o outro será o status. Eu vou colocar esses parâmetros em, colocando meus colchetes, e eu sempre gosto de terminar cada instrução com um ponto-e-vírgula imediatamente para que eu não fique confuso. Vou criar um espaçamento aqui só para nos dar espaço para respirar, facilitar a leitura. Agora que temos essa função get escrita, o que podemos fazer é pegar os dados. Novamente, isso é algo que eu faço com bastante frequência. Vou apenas consolar o registro em vários estágios para ver onde estamos. Se eu clicar em “Obter Pokemon”, e vai demorar um pouco de tempo porque ele está pegando de uma fonte externa. Você verá que temos este objeto entrar em nosso console agora. Estes são os dados que estão sendo retornados a partir deste URL. Como você pode ver, há itens diferentes neste objeto. Um deles é um array chamado resultados com todos os diferentes resultados aqui. Esta é a lista que estamos procurando para colocar na tela. O que eu vou fazer é usar um loop para percorrer tudo isso e construir uma string que irá então colocar naquela div que criamos aqui, mas não tem nada nele. Tenha paciência comigo enquanto eu faço isso. Isso será um pouco de código, mas essencialmente o que vamos fazer é criar a string primeiro. Vou chamá-lo de string var. Para começar, vou abrir uma UL, então uma etiqueta de lista não ordenada. Você pode ver aqui o operador de concatenação, isso irá adicionar à string. Na verdade, devemos configurar isso com uma string vazia para começar. Vou colocar na UL porque queremos isso antes do loop. Vou colocar algo para depois do loop, que será a etiqueta de fechamento. Então eu vou fazer o loop. Nós definitivamente cobrimos como fazer loops, mas não mostramos a maneira jQuery de fazer um loop. A maneira jQuery de fazer um loop é com este ponto cada método. Vamos apenas ir para a documentação jQuery e digite jQuery cada. Aqui você pode ver uma descrição. Ele pode ser usado para iterar sobre ambos os objetos e matrizes. Uma pequena função muito legal. Como você pode ver aqui, colocamos o objeto ou a matriz como um primeiro argumento, e então temos a função ou a chamada de volta como o segundo argumento ou parâmetro nesta função. Podemos colocar parâmetros aqui para índice e valor. Com isso em mente, vou pegar os resultados dos dados. Lembre-se que era onde a lista de Pokemon estava. Então eu vou colocar no meu valor de índice de retorno de chamada. Vou colocar um ponto-e-vírgula lá. O que eu vou fazer aqui é adicionar um item de lista a esta lista aqui que acabamos de criar. Vou colocar a etiqueta LI. Vou fechar a etiqueta LI e colocar um ponto-e-vírgula só para deixar claro que terminamos. Então eu vou colocar no valor. O último passo é colocar isso na tela. Como eu disse, vamos colocá-lo nesta div de lista de poke-list. O primeiro passo é selecionar que div usando um seletor jQuery. Eu vou usar o hash para selecionar qualquer elemento com um ID de lista de poke, que é apenas este. Então eu vou usar o método HTML no contexto definido para colocar na string que acabamos de gerar. Se eu pressionar “Salvar” sobre isso, volte para o projeto, clique em “Obter Pokemon”. Você pode vê-lo vir acima com apenas objeto, objeto, objeto. A razão pela qual ele está fazendo isso é porque dentro de cada um desses resultados, há outro objeto. Você pode ver aqui no primeiro resultado, temos um objeto com dois atributos, um nome e um URL. Precisamos realmente quebrá-los e usá-los separadamente. O que eu vou fazer é aparentemente nós temos um link lá, eu vou configurar um link tag. Vou colocar um href aqui. Isso pode ser um pouco confuso porque eu estou usando interpolação de cordas aqui. Mas o que está acontecendo aqui é que precisamos usar aspas para abrir a definição de string. Então aqui estamos tentando realmente colocar em uma citação para o atributo. Nós só precisamos ter certeza de que estamos alternando entre aspas duplas e aspas simples, e nós devemos ficar bem. Isso significa que estamos iniciando uma string, em seguida, estamos colocando entre aspas que vai ser uma parte da string. Então vamos fechar essa corda. Usando vantagens podemos concatenar e então isso significará que estamos reabrindo e, em seguida, colocando e terminando lá. Na verdade, temos que colocar uma etiqueta de encerramento lá. Aqui, vou colocar o URL. Na verdade, é um valor dentro desse valor, que é um objeto ponto. Isso será value.url. Então aqui ele vai ser valorado.name. Acho que o valor não faz sentido neste contexto. Podemos alterar esse nome de parâmetro. Eu vou voltar e vou chamá-lo de item. Acho que isso é um pouco mais descritivo. É o item.url e o item.name. Se eu salvar isso, atualize a página, clique em “Obter Pokemon”, você pode ver uma lista agora aparece. Eu posso clicar em qualquer um destes e ele vai me levar para o núcleo API mais detalhado para este Pokemon particular onde você pode olhar para suas habilidades, você pode olhar para suas estatísticas e outros bits de dados relacionados a este Pokemon específico. O que você gostaria de fazer é construir uma página específica para isso, puxando os dados. Neste vídeo, não vamos para o segundo passo, mas sinta-se à vontade para fazê-lo. O que eu vou fazer em vez disso é demonstrar mais um onclick EventListener, e usando esse onclick EventListener, podemos ocultar diferentes itens desta lista. Se eu entrar aqui, não quero mais listar. Quero transformar isto numa mesa. O que eu vou fazer é mudar UL para mesa. Vou mudar LI para TR para uma linha de tabela. Claro, isso vai precisar se tornar uma célula de mesa, então eu vou colocar uma célula de mesa aberta e fechada lá. Então eu vou criar outra célula de tabela. Dentro desse TD, eu vou colocar em outro botão para abrir e fechar tags. Dentro deles o rótulo para o botão. Aqui para que eu possa segmentá-lo, Eu vou colocar em um nome de classe de botão Ocultar. Lembre-se que já estamos usando aspas duplas para definir a string, então temos que usar aspas simples aqui se quisermos que essas aspas sejam parte da string. Se eu clicar em salvar isso e eu executar isso, você pode ver que nós temos uma tabela agora, ou talvez não seja tão óbvio, mas esta é uma tabela com botões Ocultar. Novamente, estamos usando Bootstrap para que possamos fazer isso parecer muito mais agradável muito rapidamente. O que eu vou fazer é colocar em algumas aulas para torná-lo mais bonito. Primária e aqui eu vou dar à mesa uma classe de mesa. Agora, se eu clicar executar Pokemon, você pode ver o estilo mudou um pouco. Há mais espaçamento, há linhas entre as linhas e os botões são um pouco mais agradáveis. Legal. O próximo e último passo será ligar esses botões Ocultar e realmente levá-los a esconder a linha em que eles estão. Para fazer isso, eu vou configurar outro EventListener e eu vou usar o ponto porque eu estou direcionando uma classe. Vou encontrar todos os botões de ocultar e colocar um EventListener neles. Botão ocultar. Vou usar a mesma convenção de antes. Nós clicamos, em seguida, função, abrindo bloco de código. O que eu quero acontecer dentro deste EventListener, eu só vou expandir aqui para que você possa ver toda a linha na página. Basicamente, eu sou capaz de encontrar qual botão foi clicado usando o seletor deste. Mas não quero esconder só o botão, quero esconder toda a fila. Se usarmos nosso conhecimento de DOM Traversal para subir a árvore, temos este botão e o pai desse botão é uma célula de mesa. O pai dessa célula da tabela é a linha. Nós somos capazes de segmentar a linha pai do botão iniciando primeiro um seletor jQuery usando a palavra-chave this, e, em seguida, movendo para cima o DOM usando pai uma vez e depois pai uma segunda vez para obtê-lo aqui. Então, a partir desse ponto, podemos apenas executar a função que queremos executar nele. Vou clicar em “Salvar” e vamos voltar e ver se isso funciona. Estou a clicar e não está a funcionar. Há uma razão clara para isso. Eu realmente queria fazer isso errado para começar, porque eu acho que esta é a maneira intuitiva de fazer isso. Por que não conseguimos esconder os botões? Esta é a coisa que é um problema com JavaScript que você provavelmente não obtém em outras linguagens de programação, é realmente assíncrona. Em JavaScript, isso não vai terminar e então ele vai executar isso, isso vai começar a correr e enquanto isso está em execução, isso vai acontecer. Especialmente com a obtenção de dados de fontes externas, isso pode levar qualquer número de tempo. Enquanto isso estiver sendo executado, ele não deseja atrasar o resto do código. O que isso significa para nós é que precisamos colocar isso em um lugar onde ele só vai funcionar quando isso terminar. A maneira de fazer isso é usar o status aqui. Vou colocar uma declaração “se”. Se houver um status que significa se houve uma chamada bem-sucedida, eu vou entrar e colocar o EventListener aqui. Não se preocupe, podemos aninhar EventListeners dentro um do outro, é totalmente legal. Coloque um pouco de espaço lá. Vamos clicar em “Obter Pokemon”. Agora, quando clicarmos no botão Ocultar, ele deve se esconder. Você pode ver que é. É encontrar o pai do botão que clicamos, que é TD. Então é encontrar o pai do que vai ser a fileira dos pais e está escondendo-a. Eu posso fazer isso para todos os Pokemon na lista. Eu posso pegar a lista completa novamente clicando em “Obter Pokemon”. Você pode ver aqui em baixo, nós ainda temos o registro do console. Posso me livrar disso agora. Agora temos um console limpo e um aplicativo de trabalho limpo. Espero que isso ajude você a ver em um ambiente prático como você traria seu conhecimento de scripts Java. Espero que não tenha sido muito confuso para vocês. Mais uma vez, você vai aprender fazendo. O que eu sugiro que você faça para aprender isso é criar seus próprios projetos, pesquisar como fazer essas coisas, e então vá em frente e experimentá-los. Se não funcionar, comece a depurar, que é realmente o que vamos cobrir no próximo vídeo, que será nossa lição bônus. Vamos aprender a depurar coisas na próxima lição. Se você estiver preso e quiser depurar, confira esse ou talvez você queira verificar imediatamente. Cabe a você. Mas isso é basicamente o início do nosso pequeno projeto de classe de exemplo. Estou animado para ver o que você vem acima com e eu vou vê-lo no próximo vídeo. 27. Bônus: depuração com o console.log: Agora nós vimos um pouco disso na lição anterior quando criamos este aplicativo Pokemon. Mas eu queria entrar em um pouco mais de detalhes sobre como você iria descobrir quais são os problemas com seu código e depois depurá-los. Antes da mão, havia um bom exemplo onde não funcionava se eu tivesse esse ouvinte de evento fora desta chamada AJAX. Se eu apenas tirar isso e eu vou apagar isso também, só para que ele não esteja flutuando lá vazio. Vá aqui, e aqui é onde estava antes, eu acho que não, na verdade, estava aqui. De qualquer forma. Não importa, sido o lugar errado de qualquer forma. Vou clicar em “Obter Pokemon”. Agora, como vejo, não está funcionando, eu poderia estar pensando, bem, por que isso? Eu poderia voltar e eu poderia olhar para este código e eu poderia ver que, sim, não há erros de digitação. Devia estar a disparar. Isto não é esconder esse botão. Uma coisa que eu uso com bastante frequência é o log do console, porque em JavaScript, ele não vai seta quando ele não consegue encontrar isso.parent. Só não vai fazer nada. Isso é frustrante quando você quer saber qual é o problema. Uma ferramenta realmente útil é console.log. Eu vou comentar isso para que ele não seja executado mais, e eu vou usar um console.log apenas para verificar se o ouvinte de eventos está realmente funcionando. Eu vou apenas colocar o botão de palavras clicado em, pressione “Salvar”, indo para obter Pokemon, e eu vou clicar nestes botões. O texto não está saindo em nosso console, que significa que isso não está realmente em execução, há algo errado com essa parte do código. Não é necessariamente essa parte do código porque ainda não está acontecendo mesmo quando nos livramos disso. Então temos que pensar no que está errado com essa parte e uma das coisas com JavaScript, como eu disse no último vídeo, esse é um problema é o timing. Para isso realmente funcionar, tem que haver um monte de botões de ocultar na página já. Assim que esse código é executado, o ouvinte de evento é configurado e não é atualizado quando novos elementos chegam na página com essa classe. Você precisa ter certeza de que todos os botões ocultos que você deseja que o ouvinte de eventos aplique já foram carregados na página antes de começar a executar esse ouvinte de eventos. Isso é algo que até viaja até desenvolvedores experientes. Você deve levar em consideração quando o ouvinte de eventos está sendo executado porque ele não leva em conta novos elementos à medida que eles chegam na página. Uma das maneiras de corrigir isso era certificando-se de que esperávamos até que a chamada AJAX fosse concluída antes de executarmos isso. Vou colocar isso de volta aqui e ver se o botão clicado aparece agora, o que acontece. Podemos nos livrar do log do console agora, ver se esta linha de código está funcionando, o que deve ser. Sim, é. A outra área onde eu posso ver console.log ajudando aqui é descobrir o que essas coisas diferentes são. Você tem esta API e você pode vê-la aqui. Estes são os dados, mas para navegá-los, você pode estar direcionando diferentes partes da resposta, que é uma resposta JSON. Você pode estar procurando nos lugares errados. Como tínhamos antes, talvez eu só tenha o item aqui e eu não vou aprofundar o item para extrair o URL e o nome. Se eu entrar no aplicativo novamente e eu clicar em “Obter Pokemon”, ele vai ter objeto de classe. Se você olhar no real, Eu não posso mostrar-lhe ao mesmo tempo, mas logo acima do console aqui, se você olhar enquanto eu estou passando o mouse sobre, o endereço do link é objeto objeto também. Se você clicar nisso, isso obviamente vai ser um link quebrado. Pegando Pokemon de novo. Neste caso, estamos tipo, ok, isso não é muito descritivo. Como faço para obter o nome real disso? Uma das maneiras que podemos fazer isso é usar o log do console. Eu vou entrar no log do console e eu vou apenas saída do item. Então eu vou clicar em “Obter Pokemon”, e você pode ver aqui ele emite o item para cada item da lista. Como você pode ver aqui, nós temos esses objetos. Você deve ser capaz de entender que este é um objeto, é um colchete com um par de valor de nome. Se eu clicar em “Expandir” isso, eu tenho nome e URL dentro disso. Neste ponto, você deve ser como, eu vejo, eu tenho um objeto aqui. Não admira, como eu estou colocando-o para fora como uma string que não está funcionando e ele está apenas chegando com este texto aleatório. Eu preciso realmente ir para o objeto, onde há cordas, bem aqui e bem aqui. Voltando ao nosso projeto, vou reverter essas duas mudanças e voltamos para onde começamos. Nós também podemos inspecionar índice e talvez queremos usar índice em nosso projeto. Eu só vou usar o registro do console novamente. Agora, quando eu clico em “Obter Pokemon”, você pode ver que ele tem o número de índice, que é apenas zero para quantos existem. Outra coisa que podemos fazer se formos um console registrando várias coisas, porque talvez queiramos verificar várias coisas, é que podemos realmente combinar uma string com uma variável. Eu posso colocar índice, dois pontos e, em seguida, colocar em uma vírgula, e em seguida, colocar no índice real. Podemos ver aqui que ele nos diz Index e nos diz o valor que estamos puxando. Esses são alguns exemplos de como usar o log do console para inspecionar coisas dentro do código e descobrir onde estão os problemas e solucionar um pouco, depurar um pouco. Conforme você constrói um projeto mais complexo, você vai ter que resolver problemas mais complexos e isso é apenas a natureza da besta. Espero que este vídeo embora compartilhe com você um processo completo em JavaScript quando você tem um problema e você não está recebendo nenhum erro de volta, como você realmente descobrir o que está realmente acontecendo no cartão e descobrir o que certas coisas estão usando o log do console. Esse foi o episódio bônus. Eu tenho que era valioso. No próximo vídeo, vamos encerrar a aula e você vai começar seu projeto de classe se você ainda não fez isso. Vejo-te no próximo vídeo. 28. Conclusão: Espero que você esteja pronto para começar a trazer alguns JavaScript para seus próprios projetos web. Novamente, como eu mencionei nesta aula, é um pouco complicado trazer tudo o que aprendemos aqui hoje em um único projeto, mas espero que você pegue o que aprendemos aqui e construa algumas de suas próprias idéias de site. Ou talvez apenas adicionar alguma interatividade ao seu site existente. Lembre-se, se você precisar de alguma dica ou orientação, certifique-se de deixar um comentário na caixa de discussão, e eu farei o meu melhor para apontá-lo na direção certa. Isso conclui esta classe em JavaScript. Como aprendemos nesta classe, JavaScript é uma das três principais linguagens que usamos para desenvolver no front-end, agora com esta classe e a classe anterior, você deve estar muito confortável com o desenvolvimento para o frontend. Claro, ele fica mais complicado à medida que você traz estruturas JavaScript mais complexas, como React, Angular ou Backbone. Mas esse é um tópico totalmente diferente em si e talvez um tópico para futuras aulas. De qualquer forma, obrigado por assistirem, e espero vê-los de novo em outras aulas.