JavaScript moderno para iniciantes: Parte 2

1. Apresentação: [MÚSICA] Ei, bem-vindo a esta aula. Como todos sabemos, aprender qualquer nova habilidade pode ser desafiador e JavaScript não é exceção. O JavaScript tem uma ampla gama de recursos e coisas para as quais pode ser usado, e isso muitas vezes pode deixar os iniciantes em uma situação difícil se perguntando por onde começar, então é por isso que criei isso classe. Esta é a Parte 2 da classe que se baseia na fundação que você aprendeu na Parte 1. Se você não participou da Parte 1, se esqueça de passar por esta aula primeiro, a menos que você já tenha alguma experiência em JavaScript e queira abordar os tópicos desta seção. Se você não fez uma das minhas aulas antes, meu nome é Chris e eu construo sites há mais de 20 anos. Também tenho ensinado essas habilidades há mais de sete anos, ambas as aulas de vídeo ao lado dos principais campos de inicialização de desenvolvimento web também. Esta classe tem muitos assuntos JavaScript, incluindo loops e instruções condicionais, uma aparência profunda de objetos, matemática, data e temporizadores, juntamente com ela desenhando para a tela. Todos esses tópicos que abordei de forma clara e estruturada ao mesmo tempo em forma clara e estruturada que criamos projetos práticos à medida que avançamos, incluindo exemplos de casos de uso do mundo real e também alguns mini desafios ao longo com a construção um jogo de chef de pizza para combinar muitas partes do que você aprendeu. Este projeto será razoavelmente grande, mas vamos dividi-lo, para que você possa ver como todas as peças se encaixam. Mais tarde, descobriremos algumas das partes mais complicadas, como JavaScript assíncrono, escopo, içamento e fechamentos. Antes de terminar com mais dois projetos finais , vamos um pequeno aplicativo chamado Deixando tão cedo, que é um pop-up de intenção de saída, que é usado para atrair visitantes com uma oferta quando eles tentam sair do seu site. Se tudo estiver concluindo a classe funcionando fielmente o carrossel de imagens JavaScript. Ele inclui uma pasta de projeto que adicionaremos à medida que progredirmos ao longo desta classe e também se desenvolverá como uma referência útil no futuro também. Obrigado pelo seu interesse nesta aula e te vejo na primeira lição. 2. Baixar a pasta de projeto: Se você já concluiu a primeira parte desta classe, você pode continuar com os mesmos arquivos iniciais que usamos na parte 1. Nesta parte 2 da aula começaremos na Seção número 6, até o fim. Começarei na primeira lição que é para loops. Se você tiver isso, você está completamente pronto para a próxima lição. Se você estiver pulando para a parte 2 sem tomar a parte 1, o que também é completamente bom, mas você precisará ir até github.com e baixar os arquivos iniciais que vamos usar ao longo disso classe. Siga o link que você pode ver na tela aqui. Depois de chegar a esta página, clique no botão de carvão verde e faça o download como um arquivo zip. Abra esta pasta do projeto dentro do seu editor de texto favorito. Vou usar o Visual Studio Code, mas você pode usar o que preferir. Isso é tudo o que você precisa para começar , e eu te vejo em seguida. Começaremos dando uma olhada em para-loops. 3. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 4. Para Loops: Bem-vindo de volta. Esta seção será sobre loops. Vamos começar as coisas com um loop for-loop. Quando começamos a trabalhar com matrizes anteriormente, analisamos algumas maneiras diferentes de repetir determinadas tarefas usando esses loops. Os tipos de loop que observamos foram map, e forEach, ambos eram métodos de matriz. Loops significam que podemos repetir tarefas com muito mais facilidade. Mesmo que existam diferentes tipos de loops, eles geralmente continuam repetindo uma tarefa várias vezes. Muitas vezes, a principal diferença é como dizemos ao loop para interromper esse mapa, e os loops forEach eram métodos de matriz, mas os loops não são exclusivamente para matrizes. Há também diferentes tipos de loops que podemos usar para poder fazer loop sobre praticamente qualquer coisa que precisemos. Este vídeo vai se concentrar em um loop for-loop. É assim que um loop básico se parece. Ele define um pouco como uma função ou uma instrução if. Observe dentro dos suportes que são dois ponto-e-vírgula. Eles são usados para passar as expressões livres que configuram como nosso loop funcionará. Um exemplo muito simples aqui é apenas usá-lo para aumentar o número e veremos alguns exemplos melhores em apenas um momento. Mas, para a primeira expressão, ela contém o valor inicial ou inicial do nosso loop. Se quisermos apenas começar com um número zero ou aumentar a cada vez, configuramos uma variável como zero, assim. Em segundo lugar, temos uma condição e aqui veremos que temos o número é menor que 10. Essa condição determina se o loop deve continuar. Se isso for verdade, o loop continua. Se for falso, o loop terminará. Por fim, se não fizermos algo em cada loop, a segunda condição sempre será verdadeira. Aqui aumentamos o valor do número em um em cada loop. Portanto, podemos verificar a condição após cada uma dessas alterações. Para percorrer este exemplo após cada loop ser executado, o número será aumentado um até atingir o número 10, fazendo com que a segunda instrução seja então resultando em false, fazendo com que o loop em seguida, termine. Ou seja, este exemplo específico, registraremos 10 valores, que serão zero até o número nove. Se você tiver a variável já declarada fora do loop for-loop, você pode deixar de fora e apenas incluir a segunda e a terceira instruções, e as coisas ainda serão executadas da mesma forma que antes. Além disso, vale a pena notar que você verá muitos exemplos com o nome da variável, a letra i, que é abreviação de inicializador ou valor inicial. Isso geralmente ocorre se estivermos usando essa variável apenas para os propósitos do loop e não precisarmos de nomes de variáveis descritivas em outro lugar. Observe que ainda devemos manter o ponto e vírgula no lugar para que possamos separar claramente esses três valores em alguns exemplos. Vamos pular para nossos arquivos iniciais. Para esta seção, vá para a Seção número 6, que é loops e condicionais. A primeira lição, que é para-loops, salta para a página de índice, que está praticamente vazia por enquanto. Em seguida, copiaremos o caminho para isso e, em seguida, colaremos isso dentro do navegador. Não temos conteúdo no momento, apenas o título for-loops e, em seguida, o script vazio na parte inferior para trabalharmos. Vamos pular para dentro da seção de script e podemos começar a criar nosso primeiro for-loop. Como olhamos antes, usamos a palavra-chave for, o suporte iniciamos nossas declarações livres e, em seguida, as chaves. Para este exemplo, vamos simular alguém comendo uma pizza com 10 fatias diferentes. Então vamos deduzir uma fatia de pizza após cada um desses loops. Primeiro de tudo, nosso inicializador ou nossa variável, que chamaremos de fatias. Definiremos que este seja o valor inicial de 10 e no próximo manteremos o loop em execução, desde essas fatias sejam iguais ou maiores que o valor de um, adicione um ponto-e-vírgula. Em seguida, deduziremos o valor das fatias pelo valor de uma a cada vez. Agora só para recapitular, vamos começar com 10 fatias ou o valor de 10. Depois que o loop for concluído, isso deduzirá uma fatia para então ser igual a nove, nove é maior ou igual a um, portanto, o loop continuará funcionando. Em seguida, ele será executado pela segunda vez. Então isso deduzirá as fatias de pizza para oito e depois sete, depois seis. Ele continuará funcionando até que o valor seja maior ou igual a um. Dentro das chaves, adicionamos o código que você deseja executar. Veja um exemplo simples, podemos fazer um log de console com o valor de fatias. Isso será deduzido de 10 até um. Depois disso, um segundo log do console com o texto de cada fatia. Também podemos adicionar coisas como instruções condicionais dentro daqui também. Essa instrução condicional verificará se as fatias são iguais ao valor de uma. Se for, estaremos no lugar em um registro de console com o texto sem fatias restantes. Vamos salvar isso e entrar nas Ferramentas do Desenvolvedor. clique com o botão direito do mouse e “Inspecione” no console. Vemos que o valor de 10 no primeiro loop é então deduzido pelo valor de um de cada vez. Nós chegamos até o valor de um e, em seguida, ele toma uma nota das fatias restantes. Algo que você pode ver, mas provavelmente não tanto está faltando um segundo valor, que é essa condição. Precisamos sair no ponto e vírgula no lugar e antes de testarmos isso, você já pode estar detectando um problema. Se você não tiver condição. Não temos como parar um loop. Isso continuará funcionando infinitamente. Isso é algo que precisamos ter cuidado ao criar loops. Devemos garantir que a condição dos loops eventualmente se torne falsa. Caso contrário, acabaríamos em um loop infinito, o que, portanto, faria com que o navegador falhasse. Não faça isso e não acompanhe esse exemplo. Mas vou mostrar o que acontece dentro do navegador. Se salvarmos isso, atualize. Vemos que o loop é executado milhares de vezes, o que ocupa todos os recursos do navegador, fazendo com que ele eventualmente falhe. Para evitar esse esmagamento ou esse loop infinito, precisamos usar manualmente a palavra-chave break dentro do loop quando queremos que ela pare. Por exemplo, se formos para esta seção inferior, saberemos dentro da instrução if este é o último loop. O que podemos fazer é adicionar a palavra-chave break. Isso então sai do loop e seguida, impede que o código seja executado. Podemos testar isso abrindo o navegador mais uma vez. Abra a Página Índice e, em seguida, entre nas Ferramentas do Desenvolvedor e no console e nosso loop, agora funciona conforme o esperado. Outra coisa útil que podemos fazer com for-loops é criar vários elementos, como itens de lista. Usando um loop, podemos criar, digamos, 10 elementos com muito menos código do que faríamos se escrevêssemos isso 10 vezes. Vamos fazer isso dentro do script, criaremos uma constante chamada ul, onde criaremos uma nova lista não ordenada. Fazemos isso com Document.createElement. Passando os elementos ul que você deseja criar. Pouco antes de saltarmos para a criação dos itens da lista, anexaremos nossa lista não ordenada ao corpo. Pegue o corpo com Document.body.appendChild, passando nossa variável ul. Só voltando ao que olhamos antes, vamos modificar nosso exemplo de pizza e substituí-lo pelo nome da variável i. Lembre-se que eu é uma convenção de nomenclatura comum para uma variável dentro de um loop. Inicialmente, definiremos isso como um valor de um. Vamos fazer isso da maneira inversa de antes. Começaremos com o valor inicial de um e, em seguida, manteremos o loop em execução enquanto i for menor ou igual ao valor de 10. Portanto, precisamos aumentar isso pelo valor de um em cada loop, que fará com que o loop seja executado 10 vezes. Podemos mover todo o conteúdo de dentro daqui e, em seguida, criar nossos itens de lista. Vamos criar nosso item de lista, selecionaremos o documento.CreateElement passar no item da lista. Armazene isso dentro de uma constante chamada li. Isso nos dará um item de lista vazio. Precisamos então colocar o conteúdo dentro da tag de abertura e fechamento. Podemos fazer isso com documentos.CreateTextNode, e podemos colocar em qualquer exemplo de texto que quisermos dentro daqui. Em vez de uma string normal, vou inserir uma variável usando os backticks. Diremos que o item de lista colocado em nossa variável com o símbolo $ e as chaves. Sabemos de cima que temos uma variável chamada i, que é igual ao valor de um. Então, se você continuar aumentando pelo valor de um para cada loop. Podemos verificar isso colocando isso dentro daqui. Isso deve começar com o valor do item da lista um, item de lista dois e assim por diante. Tudo isso dentro de uma constante, digamos texto. Em seguida, podemos mesclar esses dois acessando o pai, que é o item de lista que usa appendChild. Em seguida, coloque nosso texto dentro do elemento de lista. Finalmente, quando criamos cada um desses itens da lista, queremos nos empurrar para nossa lista não ordenada. Da mesma forma que fizemos com o item da nossa lista. Selecionamos nossa lista não ordenada AppendChild, onde passamos nosso item de lista. Vamos verificar isso, atualizar o navegador. Isso só precisa ser i para corresponder à atualização da variável. Agora vemos o valor do item de lista um todo o caminho até listar o item 10. Como você pode imaginar, se criássemos essas 10 vezes separadas, isso resultaria em muito mais código. Usar esse loop faz dele um exemplo muito mais curto. 5. ...em & For... de: Agora vamos cobrir mais dois tipos de loops, que é chamado for-in e também for-of. Eles são muito parecidos e ambos passam por cima de algo como você esperaria, mas a principal diferença é o que eles podem fazer um loop. Vamos abrir os arquivos iniciais e ver o que temos. Na barra lateral, pulando para a lição Número 2 nesta seção, que é for-in e for-of, e então abra isso dentro do navegador. Primeiro de tudo, vemos uma seção for-in que tem um objeto de produto com várias propriedades aninhadas no interior. Como você pode esperar, é assim que funciona um loop for-in. Usamos esse tipo de loop para fazer loop sobre as propriedades dentro de um objeto, como o nome e o tamanho. Agora, isso terá a seção for-of, e isso é usado para fazer loop sobre objetos iteráveis. Um objeto iterável é basicamente alguns deles sobre o loop, como uma matriz ou uma lista de nós. Vamos começar no topo com nosso loop for-in, e vamos usar isso para fazer um loop sobre nossos objetos de produto. Podemos fazer isso logo abaixo. Isso se parece um pouco com o nosso for-loop do vídeo anterior, configuramos a palavra-chave for, os colchetes e, em seguida, as chaves curly. Saltando para o primeiro conjunto de colchetes, e é assim que funciona um loop for-in. Configuramos uma variável e chamaremos essa propriedade, pois estamos fazendo loop sobre todas as propriedades dentro desse objeto, que está em nosso objeto de produto. É daí que vem o termo for-in, temos a palavra-chave for e, em seguida, a palavra-chave in dentro dos colchetes. Estamos fazendo um loop sobre esse objeto de produto completo e, em seguida, estamos armazenando o valor da propriedade dentro dessa constante. Vamos ver como é com um log de console do valor da nossa variável, que é propriedade, atualização, e vemos o valor do SKU, o nome, o tamanho e a cor. Isso nos dá o valor da chave, mas e o valor real da propriedade como camisa legal, média e azul? Bem, também podemos fazer isso acessando nosso produto e, em seguida, usando os colchetes. Vamos dar uma olhada em como isso fica dentro de um registro de console. Podemos usar os ticks traseiros para inserir uma variável e começaremos inserindo o valor da propriedade. Estas são apenas as teclas que veremos já dentro do console, mas depois adicione dois pontos para separar isso e, em seguida, insira nossa segunda variável. A segunda variável será cada um desses produtos. Vamos pegar o produto e, em seguida, podemos usar os colchetes, para restringir isso a uma determinada propriedade. Estamos passando o valor de SKU, nome, cor ou tamanho. Se salvarmos isso e atualizarmos, agora criamos uma nova string para cada uma dessas propriedades, que inclui a chave e também o valor da propriedade. É assim que um loop for-in funciona para fazer loop sobre um objeto. Vamos agora dar uma olhada em for-of. Quero comentar esta seção e, em seguida, descer para baixo abaixo de nossas permissões. Novamente, isso começa com a palavra-chave for, os colchetes e as chaves curly, e também leva uma variável. Digamos que o valor const, que será definido para cada um dos valores dentro da matriz. Desta vez, em vez de usar a palavra-chave in que usamos e, em seguida, passe exatamente o que queremos fazer um loop over. No nosso caso, é a matriz de permissões logo acima. Isso está em permissões e, em seguida, dentro das chaves, podemos acessar nosso valor. No primeiro loop, o valor é usuário, o segundo loop é editor e, em seguida, administrador, salve e atualize, e há nossos três valores dentro do console. Como você pode ver dentro de seus comentários no topo, coisas como uma lista de nós também podem ser colocadas em loop. Lembre-se, quando usamos algo como seletor de consulta para obter vários elementos, uma lista de nós é o que recebemos de volta. Para experimentar isso, também precisamos de alguns elementos para fazer loop. Vou pular para fora desses scripts, criar uma lista não ordenada com alguns itens de lista de amostra dentro. Vamos duplicar isso mais duas vezes em vez de girar Número 2 e 3, e então podemos fazer um loop sobre nossos três itens da lista, que retornarão uma lista de nós, portanto, podemos usar o loop for-of. A etapa 1 é acessar todos esses três itens da lista. Vou logo acima do nosso loop for, criar links de chamada constantes, pegá-los com Document.QuerySelector, na verdade, precisamos de QuerySelectorAll já que estamos acessando vários elementos e uma vez que você pega nossa lista itens. Agora, em vez de acessar nossas permissões, o que vamos fazer é acessar todos os links, que são nossos três itens da lista e, em seguida, alterar o nome da variável para o link. O valor do link em nosso primeiro loop é o primeiro item da lista, o segundo item da lista e, em seguida, o terceiro. Podemos fazer o que quisermos com esses links. Para este exemplo, vou acessar nossos links e, em seguida, usar addEventListener. Ouça para um clique em qualquer um desses. Em seguida, isso executará uma função, passaremos as informações do evento , criaremos um alerta. Para acessar o conteúdo dentro de cada um desses itens da lista, como 1, 2 e 3, podemos fazer isso acessando as informações de eventos, selecione e. target, que são as informações sobre isso item de lista específico que foi clicado e, em seguida, exibe o innerHTML desse elemento. Vamos experimentar isso. Agora, se atualizarmos, temos nossos links gratuitos na parte superior, vamos clicar no Número 2, há o InnerHTML. O Número 3 e também o Número 1 também funciona corretamente. Essa é uma variação realmente útil no for-loop, que podemos usar para fazer loop sobre coisas como matrizes e lista de nós, e também objetos também. 6. O que você achou desta tradução?: Na minha opinião, enquanto os loops parecem um pouco mais simples do que os quatro loops que procuramos antes. A configuração básica parece novamente semelhante a muitas outras coisas em JavaScript, como uma função básica e instruções if e até mesmo o loop for também. Um loop while continuará funcionando enquanto uma condição estiver definida como true. Para este exemplo, temos uma variável numérica simples e, em seguida, o loop continuará em execução enquanto o número for menor que 30. Essa verificação é executada antes que o código no loop seja executado, portanto, se for falso, o loop será interrompido. Assim como no loop for, também precisamos de uma maneira de realmente parar as coisas para que ele não se transforme em um loop infinito. Fazemos isso dentro do loop incrementando o valor do número em um em cada loop. O que significa que ele será executado 30 vezes antes de parar. Vamos aos nossos arquivos iniciais e experimentar isso. A próxima lição que precisamos é a número 3. É a seção loop while. Abra isso e também dentro do navegador também. Como você pode ver, temos um arquivo inicial vazio com o script na parte inferior. O que faremos dentro daqui é configurar algumas variáveis. Primeiro de tudo, uma constante chamada StadiumCapacity, e defina isso igual a um valor de 100. Esta é a capacidade do estádio e, em seguida , configuraremos uma segunda variável, que será para o número de fãs que entramos atualmente. Como isso pode ser aumentado, precisamos usar a palavra-chave e definir isso igual a um valor de currentlyEnter, que começará no valor de zero. O que queremos fazer é continuar executando um loop enquanto o valor de CurrentlyEnter é menor que o StadiumCapacity. Um loop while é ideal para isso. Configuramos nossa palavra-chave while, os colchetes e, em seguida, as chaves curly logo depois. O que vamos fazer é manter esse loop em execução enquanto o valor de CurrentlyEnter, que é zero, é menor que o StadiumCapacity. Basicamente, se zero for menor que 100, o código dentro daqui será executado. Colocando um registro de console com um texto de enter, e devemos ser capazes de ir até o console e verificar isso. Mas pouco antes de fazermos isso, vamos dar um passo atrás e dar uma olhada nesse loop. Se pensarmos sobre isso, queremos dar uma olhada em nossa condição que eles entraram atualmente é menor do que a capacidade do estádio. No momento, não temos como alterar esses dois valores variáveis. Basicamente, esse sempre será o valor verdadeiro. Isso resultará em um loop infinito e novamente causará uma falha dentro do navegador. Para executar esse loop while apenas uma certa quantidade de vezes, precisamos de uma maneira de aumentar o valor de CurrentlyEnter em cada loop. Isso é bem simples. Nós apenas acessamos nosso valor e, em seguida, usamos plus plus, o que aumentará isso pelo valor de um em cada loop até o valor de 100. Uma vez que isso chegue ao valor de 100, essa condição não será mais verdadeira, o que significa que isso fará com que nosso loop seja interrompido. Vamos verificar isso dentro do navegador, atualizar e pular para o console. Bom e vemos que nosso texto de entrada foi repetido 100 vezes. A variação desse loop while é do-while. Esta é uma versão comutada deste loop while. Antes de dentro dos slides, mencionei que o código dentro desse loop sempre será executado depois que essa condição for verificada. Basicamente, se isso resultar em falso, o código dentro desse loop nunca será executado nem uma vez. Podemos inverter isso e garantir que o código seja executado pelo menos uma vez e depois executar a verificação depois. Isso é útil se quisermos sempre garantir que o código seja executado pelo menos uma vez antes que o loop seja interrompido. Para fazer isso, logo acima nossa seção while, criaremos uma seção do. Vamos dizer que sim, abra as chaves encaracoladas, e como sempre queremos que isso funcione uma vez, apenas pulamos diretamente para as chaves encaracoladas, não precisamos adicionar nenhuma condição. Em seguida, podemos pegar nosso código do loop while. Corte isso fora do lugar. Adicione isso à seção do. Vou remover as chaves encaracoladas do loop while. Como você pode ver, o código agora fica dentro da seção do, o que significa que isso sempre será executado pelo menos uma vez antes mesmo de realizarmos nossa verificação. Nosso cheque ainda é verdade, isso continuará funcionando pela segunda vez, no nosso caso, até 100. Vamos verificar isso. Podemos salvar isso e atualizar o navegador. Ainda obtivemos exatamente os mesmos resultados de antes. Podemos testar isso definindo o valor de currentlyEnter como 100, o que então define isso como falso. Se agora salvarmos isso e atualizarmos, veremos nosso valor de log de console único de enter porque nosso código é executado primeiro e, em seguida, ele executará a verificação dentro do loop while. Essa é apenas uma alternativa, dependendo se sempre queremos que o código seja executado primeiro ou primeiro teste a condição antes de executar qualquer código dentro do nosso loop. 7. Se / Else Declarações & Nidificação: Para este vídeo, vá para a seção de instruções if-else e também abra isso dentro do navegador. Você pode ver na parte superior que temos um objeto de usuário já configurado e também if instrução logo abaixo. Então, usamos instruções if algumas vezes já durante exemplos anteriores. Não há muito mais para adicionar a eles do que o que já abordamos. Eles simplesmente executam algum código entre essas chaves. Se a condição dentro daqui estiver definida como verdadeira. Usando este exemplo, temos um objeto de usuário na parte superior. Isso resultaria em verdade, já que temos um objeto presente, o que significa que nosso log do console funcionará. Se o usuário fosse desconectado, talvez definisse nossa variável nula, assim, para que o usuário seja igual a nulo, que resultaria em um valor falso e o código dentro do if declaração não seria executada. Então, aqui estamos lidando se a condição for verdadeira. Mas e se também quisermos lidar se a condição for falsa? Bem, é aqui que outras declarações entram em jogo. Nós os colocamos imediatamente após a instrução if e esse bloco de código será executado em todos os casos que não são cobertos pela seção if. Temos esses exemplos semelhantes configurados dentro dos arquivos iniciais e aqui só lidamos com a condição se o usuário estiver logado. Você pode estar pensando, por que não apenas lidar com a condição de logout abaixo disso. Ou poderíamos fazer algo assim. Poderíamos fazer um log de console ou qualquer código que você queira, onde podemos dizer que o usuário está desconectado. Bem, vamos testar isso e ver o que acontece se atualizarmos e pular para o console. Aqui podemos ver que o log do console foi executado duas vezes. Temos o usuário conectado e também o usuário está desconectado. Portanto, obviamente, para algo sensível à segurança, como um usuário que está sendo logado ou desconectado, queremos apenas uma dessas condições ser executada. Isso, podemos configurar nossas declarações if, que temos acima, seguidas pela declaração else. Vamos remover o registro do console. Estou colocando a seção else e adiciono nosso código dentro daqui. Vamos atualizar e vemos que o usuário está logado, pois temos um objeto de usuário presente na parte superior. Se também mudarmos isso para ser o oposto e definirmos que o usuário seja igual a um valor falso de nulo. Em seguida, isso deve ser o usuário desconectado. Se quiséssemos, também poderíamos adicionar várias instruções if para e vamos apenas empurrar nossa declaração else para baixo. Então, no meio, podemos adicionar uma segunda declaração if, assim como fizemos acima. Podemos verificar uma segunda condição , como um usuário ou função, que está atualmente definida como admin. Podemos verificar se este é um valor específico e se ele está dentro das chaves, faremos um registro de console, digamos, Ei administrador, teste isso, atualize. Agora vemos que o usuário está logado e eles também são a função de administrador. Isso funciona, mas isso também apresenta um problema também, precisamos ter muito cuidado com esse tipo de configuração. Porque essa declaração else, que teremos na parte inferior imediatamente segue a segunda instrução if. Isso significa que agora a seção else só será executada se a função do usuário não estiver definida como admin, o que não faz sentido. Então, tínhamos um usuário como nulo, então com o não estamos conectados. Atualizar. Isso agora lançará um erro, pois estamos tentando acessar a função de ponto do usuário, que não está mais disponível porque não temos mais nossos objetos de usuário. Para esse tipo de uso desse exemplo para torná-lo um pouco mais sentido e para ser mais viável, só queremos verificar se a função do usuário é igual ao administrador, eles realmente se conectaram. Para fazer isso, podemos aninhar nossas declarações if cortando a segunda declaração if. Podemos colar isso dentro do primeiro. Isso nos traz de volta ao primeiro exemplo. Temos duas verificações de nível superior. Temos a instrução if, o usuário está logado seguido da seção else logo abaixo. Em seguida, a instrução if que está aninhada dentro, só será arruinada se o usuário realmente tiver efetuado login. Se o usuário estiver conectado, esse log do console será executado. Então, se eles também estiverem logados como função de administrador, o segundo log do console também será executado também . Vamos experimentar isso. Atualize e o erro agora está apagado. Vemos que o usuário está desconectado porque o usuário está definido como nulo. Vamos restabelecer isso, o nome para ser igual a qualquer coisa na função de volta ao administrador. Com isso agora em vigor, agora temos um usuário. Portanto, o primeiro log do console deve ser executado. Também temos uma função de usuário que é igual a admin. Agora devemos ver dois registros de console dentro daqui. É assim que podemos usar instruções if else de nível superior e também como podemos aninhar uma instrução if dentro também. Se você quisesse, você também poderia ir ainda mais longe logo após a seção if aninhada, também poderíamos colocar em uma seção else também para que possamos fazer um log do console. Para esta seção, sabemos que o usuário está realmente logado, mas também queremos verificar se ele não é o administrador. Então, aqui, isso será executado se eles forem o administrador. Caso contrário, vamos apenas dizer, Ei usuário, atualize. Ainda vemos hey admin, já que a função está definida para isso. Mas se mudarmos isso para ser assinante, a instrução if aninhada agora é falsa, o que significa que a seção hey user agora será executada. Se você quiser. Você também poderia ir tão fundo quanto quiséssemos aninhando várias seções se else dentro das aninhadas também. Mas devemos ter cuidado para não exagerar e tornar o código difícil de ler e também entender para outros desenvolvedores também. Como regra geral, geralmente podemos cobrir a maioria dos casos de uso sem precisar ir ao fundo. Então, se você achar que talvez tenha três ou quatro níveis de profundidade com declarações ou verificações if, geralmente há uma maneira melhor de fazer as coisas. 8. Se não: Dentro da pasta desta lição, que é a seção else if, você encontrará logo abaixo dentro do script, temos o mesmo exemplo do vídeo anterior. Aqui estamos lidando com duas condições de nível superior que verificamos. Primeiro de tudo, se o usuário estiver conectado e, em seguida, seção captura o que acontece se o usuário não estiver conectado. Dentro da seção logado, também temos uma seção if else aninhada também. Adicione uma saudação diferente se o usuário for igual ao administrador. Temos duas opções no nível superior e também duas opções aninhadas também. Mas e se quiséssemos uma terceira opção também? Para isso, também temos mais if. Vamos dar uma olhada nisso, vamos simplificar esse exemplo removendo as instruções aninhadas. Dentro daqui, removeremos o aninhado se mais nos deixar com um simples login ou desconectado. Se você se lembra do vídeo anterior, demos uma olhada em como lidar brevemente com uma terceira condição adicionando uma segunda declaração if, assim como esta. Mas o problema que isso nos dá é que a seção else agora está conectada à nossa segunda declaração if. Essencialmente, o que significa que nossa primeira declaração if agora está desconectada. Se ainda quisermos manter todos os três conectados sem relação entre si, podemos transformar este segundo em outro caso se, em outro lugar. Pouco antes da seção if , podemos adicionar uma segunda condição dentro daqui. Primeiro de tudo, queremos verificar se o usuário está logado e, em seguida, usando o comercial duplo, também podemos fornecer uma segunda verificação. Podemos verificar se o user.role é igual ao assinante e, se for, executaremos o código dentro daqui. Agora vamos colocar em um registro simples do console dizendo que a seção else se foi executada, salve isso e depois no navegador e veremos o que acontece dentro daqui. Vemos o texto do usuário conectado. Você pode estar se perguntando por que vemos o texto de apenas usuário conectado e não também a seção else se foi executada porque depois de todo o usuário está presente e também o user.role é igual ao assinante. Bem, o motivo é porque apenas uma dessas seções será executada. Se a condição tiver sido atendida, o código interno será executado e não irá mais longe no resto dessas seções. Efetivamente, somente a primeira partida será executada. Se quisermos que seja mais específico com a primeira seção, também podemos copiar este user.role solte isso na primeira seção e também podemos verificar se isso é igual a admin. Como nossa função de usuário é igual ao assinante, agora eles devem ser falsos. Porque em nenhum outro lugar se a seção for executada agora. Vamos salvar isso e testar isso no navegador. A seção else if agora será executada. Como esta é a nossa primeira seção que resulta, então agora podemos fazer o que quisermos em cada uma dessas seções, podemos mostrar e ocultar conteúdo dependendo da função do usuário. Podemos redirecioná-los para uma área de conta. Podemos desativar recursos que o usuário pode não ter permissão para acessar ou qualquer outra coisa que você possa pensar. Também podemos usar várias outras seções if também. Se quiséssemos verificar mais do que essas três condições, também poderíamos fazer o mesmo logo após a seção else if, colocada em uma segunda. Provavelmente está condicionado de cima. Desta vez, verificaremos se o user.role é igual ao autor. Se ele for colocado em um log de console, salve isso e, como seria de esperar, veremos o mesmo resultado de antes já que temos o assinante definido, que é uma correspondência para esta seção. Mas se agora mudarmos esta para ser a oferta, a seção if agora é falsa e, em seguida a primeira seção se também for falsa e nosso novo log de console com o texto do autor, agora será executado dentro do console. Finalmente, se nenhuma dessas seções, se ou então se as seções forem verdadeiras, então mudamos para ser algo como usuário, agora devemos voltar para usar a seção else na parte inferior. 9. A condicional switch: A instrução Switch é uma maneira de fornecer quantos resultados precisarmos com base em uma única condição. Também podemos fornecer vários resultados com declarações if e if else , como vimos anteriormente. Mas, como descobrimos, precisamos adicionar algo para verificar para cada uma dessas condições, como quando verificamos coisas como a função do usuário para cada uma dessas condições. Com uma instrução switch, no entanto, apenas testamos contra a mesma condição para cada um. Apenas aqui com nossa variável de pizza favorita. A instrução switch logo abaixo, novamente, parece semelhante em sua configuração a coisas como instruções if vazias e também for-loops. Em seguida, passamos o que queremos verificar, como nossa variável de pizza favorita. Então, lá dentro, configuramos os diferentes casos para lidar com o que é a pizza favorita. Aqui teremos três casos separados para lidar com o que fazer para cada valor. Podemos ter quantos desses casos quisermos. Vejamos o primeiro. Verificamos se a pizza favorita é igual a pepperoni. Se for, então executamos algum código dentro, como este log do console. Em seguida, fornecemos a palavra-chave break para sair da instrução switch assim que tivermos uma correspondência e isso impedirá que todo o resto do código e todas as demais verificações abaixo sejam executadas. Esta é a mesma palavra-chave break que usamos anteriormente nesta seção para evitar que o navegador crie um loop infinito. Isso continuará sendo executado até que uma correspondência seja encontrada, mas se não puder ser encontrada, também podemos adicionar uma cláusula padrão também. Isso sempre será executado se não houver outras correspondências. Para o projeto e vamos dar uma chance a isso. Desta vez, estamos na seção de instruções switch e dentro do arquivo inicial, teremos apenas um objeto de usuário simples com a propriedade name e também a função. Podemos configurar uma instrução switch para verificar a função do usuário e decidir se o usuário pode editar algo em nosso site. Isso, podemos iniciá-lo em uma variável chamada CANEdit. Portanto, o CanEdit será inicialmente definido como um valor de false, para que o usuário não receba nenhuma permissão de edição por padrão. Em seguida, podemos usar uma instrução switch para verificar a função específica do usuário. Se o papel específico do usuário for igual a um nível mais alto, como o administrador ou até mesmo um editor, podemos definir CanEdit como igual a true. Assim como vimos nos slides, configure nossas instruções switch e, em seguida, passaremos a condição que é user.role. Abra os aparelhos encaracolados, então podemos adicionar nossos estojos dentro daqui. O primeiro caso será o usuário. Este é apenas um usuário conectado regularmente. Adicione o cólon. Depois, adicionamos o que queremos fazer para este caso específico. Bem, no nosso caso, queremos manter o CANEdit como igual a false, já que eles não têm permissões de administrador ou editor. Se esse caso específico for verdadeiro, não quero usar a palavra-chave break para sair do restante dessas instruções switch. Essa é a primeira seção. Então vamos para o segundo caso e este será um assinante. Isso apenas espelharia a mesma condição acima. Podemos definir CANEdit ser igual a false. Adicione as palavras-chave de quebra. Esse é o nosso segundo caso agora completo. O próximo, adicionaremos um caso para o editor. E, como parece, o editor é um caso em que queremos permitir que o usuário possa editar. Para isso, definiremos nossa variável canEdit como igual a true e, em seguida, sairremos da instrução switch. Finalmente, o último caso será para o administrador. No Admin, queremos fornecer todas as permissões necessárias para editar nosso site. Assim como acima, definiremos CanEdit para ser também igual a true e, em seguida, sair da instrução switch. Como vimos nos slides, também precisamos adicionar um caso padrão, que será executado se nenhum dos casos acima for uma correspondência. Exemplo muito simples, basta colocar em um log de console e diremos que a função do usuário não pode ser encontrada. Também definiremos CANEdit como igual a false. Agora só precisamos fazer um teste a isso. Quando começamos aqui, temos a função de usuário igual ao usuário. Isso deve definir CANEdit como igual a false. Vamos testar isso indo até o fundo, vamos colocar em um registro de console, colocar no valor de CANEdit. Veremos se isso muda para cada um de nossos casos. Como sabemos, nenhum CANEdit será igual a false, já que atualmente temos a função de usuário igual ao usuário. Vamos entrar nas ferramentas do desenvolvedor para o console. É falso como esperado. Vamos verificar nossa segunda condição mudando a função para assinante, atualize e, como seria de esperar, isso é falso. O terceiro é o editor, agora isso deve ser verdade. Finalmente, podemos testar o administrador. Isso também é verdade. Apenas para capturar a condição padrão na parte inferior, devemos ver o log do console e eles podemEdit ser igual a false se não tivermos uma correspondência para nenhuma dessas quatro condições. Vamos transformar isso para algo completamente aleatório. Vamos apenas digitar qualquer papel aleatório dentro daqui. Atualizar. Isso é falso e o log do console agora é executado conforme o esperado. Apenas uma coisa a ter cuidado se tivermos vários casos correspondentes. Se eu tiver dois ou mais casos que correspondam, o primeiro caso correspondente será usado. Também como um atalho se tivermos vários casos, assim como temos aqui, que executam o mesmo código dentro. O usuário definirá, podeEditar para ser igual a false e também o assinante. Esta é uma seção duplicada, a mesma para os dois últimos casos. Ambos os conjuntos podemEdit para ser igual a true. Podemos encurtar esse código um pouco para torná-lo um pouco mais simples. Para os dois primeiros, que são exatamente os mesmos, o que podemos fazer é remover o código do primeiro. Ambos os casos se seguem imediatamente. Então esse código logo depois será executado para cada um desses casos. O mesmo para esses dois na parte inferior. Podemos mover o canEdit e também o intervalo. Esses dois estão essencialmente agora agrupados. Podemos apenas testar isso e, se atualizarmos, ainda veremos a cláusula padrão sendo executada na parte inferior. Vamos tentar o editor. Isso deve ser verdade. O administrador também é verdadeiro. O usuário deve ser falso. Finalmente, o assinante. É isso para as instruções switch. Só uma coisa rápida antes de seguirmos em frente. Se esquecermos de colocar uma palavra-chave break em qualquer um desses casos, todos os casos a seguir também serão executados até que uma pausa seja finalmente encontrada. Por exemplo, se tivéssemos perdido uma cláusula break dentro desta seção, podemos removê-la. Se tivermos uma correspondência para o usuário ou o assinante, o CANEdit ainda será igual a false, mas executaria o código logo abaixo e, em seguida, substituiria o CANEdit para ser igual a true. Vamos tentar isso. Temos o papel igual ao assinante. Atualizar. Agora, o assinante canEdit entrou em vigor, mas o programa continuou indo para o editor e também a seção de administração e causou uma substituição, então CANEdit agora é igual a true. 10. Operador Condicional (ternário): Como alternativa às declarações if-else que vimos, o Javascript também tem um operador condicional, muitas vezes chamado de operador ternário, já que é composto por três partes. Como funciona, assim como if-else, as principais razões pelas quais ele é usado é oferecer uma alternativa simples de linha única. Olhando para esse objeto de usuário, podemos querer verificar a idade do usuário antes de permitir a entrada. O operador condicional pode ajudar com isso. Está definido como uma pergunta. Aqui estamos perguntando se a idade do usuário é maior ou igual a 18 usando o ponto de interrogação. Antes, eu disse que o ternário é composto de três partes. A questão é apenas esta primeira parte. A segunda e terceira partes são o que queremos fazer se a questão for verdadeira ou falsa. Se for verdade, podemos fazer qualquer coisa, mas este exemplo simples só tem o texto de enter. Se for falso, o que é correto para este exemplo, o código após os dois pontos será executado em vez disso. Vamos agora ir para os arquivos iniciais e podemos dar uma olhada no exemplo dentro de lá. Aqui temos um exemplo de como podemos usar uma instrução if para verificar se um usuário é administrador que pode editar algo em nosso site. O objeto de usuário tem o papel de administrador e, atualmente, definimos a funcionalidade CANEdit igual a false. A instrução if está verificando se a função do usuário, que está aqui, é igual a admin. No nosso caso, podemos definir a variável CANEdit como true, permitindo que o usuário vá em frente e publique algo como uma postagem no blog. Caso contrário, CANEdit será igual a false, removendo todas as permissões que eles possam ter. O que vamos fazer é converter esse exemplo para fazer uso do operador ternário, o que simplificará esse exemplo em uma única linha. Assim como vimos nesses slides, a primeira parte é realmente fazer a pergunta. A pergunta que queremos fazer é se o user.role é igual à string de admin. Use um ponto de interrogação, seguido por nossos resultados verdadeiros e falsos. Se o usuário for igual a admin, queremos definir que este canEdit seja igual a true, assim como fazemos na seção true na instrução if-else. Defina CANEdit como igual a true e, em seguida, separado por dois pontos, adicionamos a declaração false onde dizemos que canEdit seja igual a false. Às vezes, dependendo das configurações ou dos plugins do editor de texto, você também pode ver essas duas instruções encaixadas dentro dos colchetes. Isso é completamente bom. O que eu quero fazer agora é comentar ou remover as instruções if-else originais, e então podemos salvar isso e ir até o navegador, atualizar, e vemos que este exemplo está definido como true. Isso é verdade porque o user.role é igual a admin. Mas se mudarmos isso para ser outra coisa, vamos tentar assinante, você deve atualizar isso para ser o valor de false. Também podemos encurtar esse exemplo ainda mais atribuindo diretamente o resultado desse operador ternário a essa variável. O que queremos dizer com isso é, em vez atribuir podeEditar para ser igual a verdadeiro ou falso, quando cortar o operador condicional completo daqui, podemos remover a atribuição inicial de false, colar isso em. Agora, em vez de definir nossa variável, o que fazemos é simplesmente definir o valor verdadeiro como verdadeiro e o valor falso como igual a false. Agora, o resultado verdadeiro ou falso para isso será atribuído diretamente à nossa variável CANEdit. Vamos testar isso mais uma vez. Atualmente, temos esse conjunto como falso, mas se mudarmos isso de volta para ser o administrador, isso agora é igual a ser verdadeiro. Tanto o operador condicional quanto a versão if-else são perfeitamente válidos para uso. O operador condicional, como acabamos de ver, geralmente é mais curto e colocado em uma única linha. Alguns argumentam que uma declaração if-else é mais clara e mais legível, mas no final, é sua escolha que você deseja usar e qual você prefere. 11. Tipo Coersão & Conversão: Nos próximos vídeos, vamos cobrir algum tipo e também algumas coisas verdadeiras ou falsas relacionadas, o que pode lhe dar alguns resultados estranhos ou inesperados. Estar ciente disso pode ajudá-lo a entender coisas como por que e se instrução não está sendo executada corretamente, e também economizar muito tempo na depuração. A primeira é a coerção do tipo. Já sabemos sobre tipos como objetos, cordas e booleanos. coerção de tipos está relacionada à forma como os valores dos tipos de dados são convertidos para outros tipos de dados. Olhando dentro da pasta de lições, que é coerção de tipo e comparação, salte para o index.html, onde temos um exemplo simples. Temos duas variáveis no topo com números e , em seguida, vamos adicionar ambas juntas e armazená-las dentro do total. Uma coisa a notar entre esses dois números é que o primeiro é enrolado dentro dessas cotações então, tecnicamente, isso é uma string. O segundo é um número, como você esperaria. Mas o que você acha que acontece quando adicionamos ambos juntos? Se estivéssemos adicionando strings, talvez saibamos o que esperar, porque isso pode ser combinado para fazer uma frase ou uma palavra. Se também estivermos adicionando dois números, esses dois números seriam adicionados para obter um novo total. Mas aqui, como estamos adicionando uma string e um número, o que você acha que acontecerá? Bem, em vez de causar um erro, o JavaScript foi projetado para escolher um tipo de dados para converter automaticamente. Isso é chamado de coerção. Mas este exemplo pode optar por converter para que sejam ambas cadeias de caracteres ou ambos números. Bem, não vamos adivinhar. Vamos salvar isso e entrar no console e ver exatamente o que vai acontecer. Entre na guia do console e atualize e vemos o valor de 72. O valor de 72 significa que isso está sendo convertido em uma string porque temos o valor de sete seguido pelo valor de dois, em vez do valor de nove, que aconteceria se estes fossem convertido para ambos para números. Essa conversão aconteceu automaticamente para nós e isso pode ser referido como implicitamente e essa conversão implícita é o que é coerção. Não deve ser confuso, mas algo semelhante é a conversão de tipo. Isso funciona de forma semelhante à coerção convertendo um valor de um tipo de dados para outro. Mas também podemos fazer isso sozinhos manualmente. Se quiséssemos que isso fosse convertido em um número manualmente, temos uma função numérica disponível. A maneira como podemos usar isso é cortar nosso número um, que é uma string. Podemos acessar uma função numérica e, em seguida, colocar dentro do que queremos converter em um número. Aqui nós convertemos uma string para ser um número. Agora, se salvarmos isso, devemos ver o valor de nove no console, o que significa que ambos atraem como números. Para recapitular, a coerção acontece de forma implícita ou automática. conversão de tipos também pode acontecer manualmente, assim como estamos vendo com essa função numérica. Às vezes, essas palavras são usadas de forma intercambiável, mas essa é a linha oficial em ambas. Se você quisesse, também poderíamos fazer o contrário. Em vez de converter este em um número, poderíamos converter o segundo para ser uma string. Fazemos isso com a função string. Passe o número que você deseja converter