Modernes JavaScript für Anfänger: Teil 1

1. Boas-vindas ao curso!: Ei. Bem-vindo a esta aula. Como todos sabemos, aprender qualquer nova habilidade pode ser um desafio, e o JavaScript não é exceção. O JavaScript tem uma ampla gama de recursos e coisas que podem ser úteis, e isso muitas vezes pode deixar os iniciantes em uma situação difícil se perguntando por onde começar. É por isso que criei essa classe. Trabalhando desde o início, mostrarei o que é JavaScript, o que ele pode fazer e por que o usamos. Esta classe abrange tudo o que você precisa saber para se tornar um desenvolvedor JavaScript competente. Se você não fez uma das minhas aulas antes, meu nome é Chris, e eu construo sites há mais de 20 anos, e também tenho ensinado essas habilidades há mais de sete anos, ambas as videoaulas juntamente com os principais bootcamps de desenvolvimento web também. Esta é a Parte 1 de 2, e lhe dará uma ótima base em JavaScript de todos os conceitos básicos, incluindo matrizes, funções, objetos, eventos e o DOM, APIs da Web e todos os detalhes que você precisa saber no meio. Todos esses tópicos são abordados de forma clara e estruturada, enquanto constrói projetos práticos à medida que avançamos, incluindo exemplos de casos de uso do mundo real, e também alguns mini-desafios também. No final, também reunimos todas essas habilidades construindo um player de vídeo de trabalho, incluindo controles totalmente personalizados, incluindo controles totalmente personalizados, mas também um divertido jogo de soltar formas também, usando a API de arrastar e soltar. 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. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para terminar 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 na 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. 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 da turma. Com isso em mente, estou ansioso para ver o que você cria e carrega aqui no Skillshare. 3. Vamos ver o que o Javascript pode fazer!: Compreender o lado da teoria do JavaScript é realmente importante, e chegaremos a isso muito em breve, mas não há nada como ver exatamente o que ele pode fazer bem na sua frente. Para ver algumas das coisas que o JavaScript pode fazer, vamos abrir uma página da Web. Aqui, estou na Mozilla Developer Network. Este é developer.mozilla.org. Isso também funcionará em qualquer outra página da web, para que você possa escolher outra, se quiser. Não vou mostrar como o JavaScript pode ser usado para controlar ou fazer alterações em qualquer site. Agora, apenas uma palavra rápida antes de avançarmos neste vídeo. Pode haver uma ou duas coisas que parecem complexas ou desconhecidas, então, se você não está acostumado a codificar ou JavaScript, parte disso pode parecer um pouco intimidante, mas esteja ciente, isso é apenas para fornecer alguns guias sobre o que o JavaScript pode fazer. Não esperamos que você se lembre de nada disso, e abordaremos tudo o que passamos à medida que você progride no curso. Pense nisso como um pequeno provador para deixar você animado com o que o JavaScript pode fazer em uma página da web. Para ver o que o JavaScript pode fazer, vou abrir ferramentas do desenvolvedor dentro do Google Chrome, que é clicar com o botão direito do mouse e, em seguida, descer para Inspecionar. Vamos fazer isso um pouco maior para que fique mais visível. Se você estiver usando um navegador diferente, como Safari ou Firefox ou Edge, maioria das ferramentas do desenvolvedor é muito semelhante, então você deve ficar bem se quiser usar um navegador diferente também. Mas se você quiser as coisas exatamente iguais, eu acompanharia o Google Chrome. A primeira coisa que vemos aqui é esta guia Elementos, que tem acesso a toda a estrutura HTML que compõe esta página da web. Podemos passar o mouse sobre qualquer uma dessas linhas de código, e ele destacará à esquerda em qual seção estamos trabalhando atualmente, ou também podemos clicar nesta seta, que é o inspetor, e selecione qualquer uma dessas seções ou elementos na página. Por exemplo, vamos para esse cabeçalho de nível 1 e clique nisso. Isso realçará instantaneamente esse título de nível 1 dentro do código e, quando ele for selecionado, você notará à direita que você tem isso é igual a US $0 e, em seguida, vemos esse pop-up logo abaixo do qual diz usar $0 dentro do console para se referir a esses elementos. Podemos usar $0 dentro desta guia Console para selecionar qualquer um de nossos elementos ou seções e, em seguida, podemos aplicar algum JavaScript também. Vamos apenas confirmar que temos os elementos certos selecionados com $0 e, em seguida, recuperamos nosso título de nível 1. Selecionamos esse elemento, mas o que podemos fazer com ele? Bem, a lista é enorme, e só vamos arranhar a superfície aqui, e vamos cobrir muito mais durante este curso. Se selecionarmos novamente $0 para apontar para o nosso cabeçalho de nível 1 e, em seguida, um ponto, podemos ver abaixo temos acesso a muitas opções diferentes que podemos usar neste elemento. Um comum, que usaremos muito neste curso, é algo chamado texto interno. O texto interno é uma maneira de simplesmente alterar o conteúdo entre a etiqueta de abertura e fechamento. Ele terá esse texto de recursos para desenvolvedores. Se quisermos, podemos definir isso igual a qualquer nova cadeia de texto. Abra as cotações. Podemos usar aspas simples ou duplas, mesmo uma está bem, e então podemos definir esse texto qualquer outra coisa que você queira. Vamos, eu mudei e, imediatamente, recuperamos o texto recém-retornado no console, e também podemos ver que a página da Web também foi atualizada. Antes de prosseguirmos, não se preocupe em fazer nenhuma dessas alterações. Isso não está atualizando o site ao vivo. Isso está apenas dentro do nosso próprio navegador. Tudo o que precisamos fazer é simplesmente atualizar o navegador e isso será reintegrado de volta à versão original. Além disso, estamos fazendo isso, agora redefinimos nossos US $0, e isso agora retornará indefinido. Vamos olhar para indefinido mais detalhes ao longo deste curso. Mas, por enquanto, podemos pensar nisso como simplesmente nenhum elemento foi atribuído a esse $0. Assim como antes, precisamos voltar para a guia Elementos para selecionar qualquer uma dessas seções ou elementos com os quais você deseja trabalhar. Vamos buscar um desses links no topo. Novamente, use a seta e podemos passar o mouse sobre qualquer um desses botões. Clique sobre isso. Temos esse botão com o botão ID do Feedback, que agora deve ser atribuído a US$0. Vamos selecionar isso e vemos que nosso botão agora é retornado. Novamente, $0 e, em seguida, o ponto nos dará acesso a uma variedade de recursos que podemos aplicar a esse elemento. Uma delas é a propriedade de estilo e, a partir daqui, também podemos adicionar uma propriedade de estilo adicional que queremos aplicar a este botão específico. Assim como no CSS normal, se você usou CSS no passado, todas as mesmas propriedades de estilo estão disponíveis para uso dentro do console. Um exemplo para isso pode ser a cor do texto, que podemos definir para qualquer valor que seja uma cor CSS válida. Pressione “Enter”. No entanto, atualize imediatamente dentro do navegador. Pressione para cima e também podemos adicionar uma segunda propriedade. Let's go para a família de fontes. Novamente, podemos mudar isso dentro das aspas para ser uma família de fontes diferente de cursivos. Como esperado, isso atualizará automaticamente o navegador. Apenas uma coisa a observar ao trabalhar com estilos é, aqui vemos que temos a propriedade de cor definida como rosa quente, e isso funciona como uma folha de estilo comum. No entanto, quando temos duas palavras, como fonte e família, em CSS regular, manteríamos tudo isso em minúsculas e separamos isso com um hífen, então vamos escrever assim como duas palavras com o traço dentro. Mas, ao usar JavaScript, se tivermos duas ou mais palavras, precisamos mudar isso para o que é chamado CamelCase, e cada palavra após a primeira começa com uma letra maiúscula. Essa é praticamente a única coisa que você precisa se lembrar nesta fase. Temos acesso a todas as mesmas propriedades CSS, mas precisamos digitá-las como CamelCase ao usar JavaScript. Outra coisa que vamos ver agora são os eventos. vez, temos uma seção de eventos dedicada mais tarde no curso. Mas, por enquanto, eu só quero deixar você um pouco animado com o que o JavaScript pode fazer ao interagir com o usuário. Para ver um exemplo disso, podemos pedir ao navegador para ouvir um evento do mouse como quando um mouse paira sobre esse elemento específico. Podemos fazer isso novamente selecionando nosso botão com $0 e, em seguida, podemos usar um evento chamado onmouseover. Isso detectará quando o mouse mouse sobre esse elemento específico. Então vamos acionar o que é chamado de função. Uma função é como uma tarefa que será executada quando o mouse passar o mouse sobre esse botão específico. Não se preocupe se isso parecer desconhecido, temos muito mais detalhes sobre as funções que surgem. Mas, por enquanto, tudo o que vamos fazer é selecionar esse elemento específico. Mais uma vez, acesse a propriedade style e, desta vez, vamos para que o plano de fundo seja igual a qualquer cor, como laranja. Clique em “Enter”, e este evento mouseover agora será ativado. Se agora colocarmos o mouse sobre esses elementos específicos, o plano de fundo agora é alterado para ser laranja. Essa é uma maneira de testar rapidamente as coisas no navegador. Mas quando se trata de escrever código JavaScript real dentro do nosso editor de texto, $0 não funcionará, $0 só funciona dentro das ferramentas do desenvolvedor do navegador. Em vez disso, precisamos de uma maneira de acessar qualquer desses elementos da página de fora. Por exemplo, volte para a página do elemento, e o que vamos fazer é selecionar uma seção diferente. Vamos para o principal, que tem o ID do conteúdo. É claro que poderíamos acessar US$0 já que estamos nas ferramentas do desenvolvedor, mas precisamos nos acostumar a acessar esses elementos de um editor de texto. A maneira como fazemos isso é começando do nível mais alto, e isso é acessando os documentos. Podemos ver imediatamente que a página inteira será destacada. Isso ocorre porque o documento é essa página da Web real. Depois de selecionarmos a página inteira assim, precisamos de uma maneira de filtrar esta página até o elemento específico que queremos. O JavaScript nos fornece certos métodos que podemos usar para filtrar esta página. Como podemos ver aqui com este preenchimento automático, podemos selecionar um elemento pelo ID, pelo nome da classe e também pelo nome do elemento também, mas mais do que eles mais tarde. Vou buscar GetElementById e, em seguida, dentro dos colchetes podemos passar o ID do elemento que queremos selecionar. Olhando para a guia Elementos, vemos que esta seção principal tem o ID igual ao conteúdo como uma string. Passe isso, e também observe aqui que isso também é CamelCase também. Assim como a família de fontes acima, cada palavra após a primeira começa com uma letra maiúscula. Pressione “Enter”. Em seguida, isso retorna nossa principal com o ID do conteúdo. Estamos exatamente na mesma posição de quando usamos US $0. Se pressionarmos, obteremos a mesma linha de código. Podemos então usar o ponto para acessar qualquer um dos mesmos recursos que usamos antes. Por exemplo, defina o estilo e, em seguida, vamos para a opacidade CSS igual a 0,3. Isso não é aplicado, ainda podemos fazer qualquer outra coisa que tínhamos antes, como o plano de fundo. Isso é igual a qualquer coisa. Vamos para o vermelho. Lá vamos nós. O plano de fundo da seção principal agora foi transformado em vermelho. Vamos apenas atualizar e restabelecer isso de volta ao estado original. O JavaScript não se limita a alterar apenas os elementos em nossa página. Também podemos usá-lo para fazer muito mais. Temos acesso a recursos de data, podemos acessar temporizadores e também algumas funcionalidades matemáticas também. Vamos, por exemplo, adicionar dois números. Vamos dizer que 5 mais 11 é 16, 7 takeaway 2 é 5. Temos muitos outros recursos matemáticos também, para que possamos selecionar o objeto matemático e, em seguida, pontuar e depois rolar. Podemos ver que temos muitas opções diferentes, mas uma popular é Math.Random. Adicione os colchetes logo depois e pressione “Enter”, e isso gerará um número aleatório entre zero e um. Se continuarmos tentando isso, obteremos um valor diferente a cada vez. Isso é apenas um pouco do que o JavaScript pode fazer e como podemos usá-lo para interagir com uma página da web. Há muito mais para aprender, e descobriremos mais desses recursos à medida que avançarmos neste curso. 4. Faça o download dos arquivos iniciais: Ao longo deste curso, escreveremos muitos códigos JavaScript. Para nos ajudar ao longo do caminho, forneci uma pasta chamada arquivos iniciantes javascript modernos. Se você for para github.com/chrisdixon161 e, em seguida, para o repositório que é modern-javascript-starter-files. A partir daqui, você pode baixar esse conjunto completo de arquivos, que são os arquivos iniciais que você precisará para cada lição neste curso. Por exemplo, quando você entrar na primeira seção, e então encontraremos uma lista de todas as lições dentro desta seção. Cada uma dessas pastas contém o mínimo muito simples que você precisará começar com cada uma dessas lições. O objetivo dessas pastas é nos dar um ponto de partida, que possamos simplesmente pular diretamente para aprender sobre JavaScript sem, por exemplo, precisar escrever todo o código HTML necessário. Outro benefício de todos esses arquivos é que ele também nos dá uma referência para todas as lições que fizemos no passado. À medida que assinalamos cada uma dessas lições, temos uma referência que você pode olhar para trás se você ficar preso no futuro. Isso é tudo o que precisamos fazer. Basta ir em frente e baixar a pasta. Você pode fazer isso nos pontos de entrada da pasta principal. Clique no botão “Código” aqui e você pode baixar o arquivo ZIP completo, que vamos abrir dentro do nosso Visual Studio Code. Depois que isso for baixado, você deve ter um arquivo ZIP que você pode extrair, geralmente clicando duas vezes na pasta e arraste-o para o editor de texto. Estou usando o Visual Studio Code e você deve ver todas as seções disponíveis à esquerda. É isso, este é o nosso arquivo inicial completo. Agora podemos aprender tudo sobre JavaScript. 5. Onde adicionar Javascript: Bem-vindo ao início desta seção. Agora vamos dar uma olhada no JavaScript e vamos passar do navegador e, na verdade, para nossos próprios arquivos JavaScript. Na seção anterior, baixamos os arquivos iniciais que acompanham este curso. Se você não tiver baixado, faça para voltar ao vídeo e baixá-los do GitHub. Assim que isso for feito, você precisará descompactar o pacote e arrastá-lo para o Visual Studio Code para abrir isso. À direita, abri o Google Chrome como navegador. O que vamos fazer agora é começar logo no início e dar uma olhada exatamente onde podemos adicionar JavaScript em nossos arquivos. Anteriormente, digitamos código diretamente no console do navegador, mas, realisticamente, quase sempre é escrito em nossos próprios arquivos. Por onde começamos? Bem, dentro do Visual Studio Code em nossos arquivos iniciais, vá para nossa primeira seção, que é o básico do JavaScript e você notará que os números distantes começam em 02. Isso ocorre porque, para esta lição em particular, vamos começar logo no início e configurar as coisas nós mesmos, e então, para todas as outras lições, elas terão alguma placa de caldeirinha disponível para acessarmos. Podemos simplesmente pular diretamente para escrever nosso código JavaScript. Para este com os conceitos básicos de JavaScript selecionados, clique neste ícone aqui, que é criar uma nova pasta, e então isso pode ser 01. Vou chamar isso de onde adicionar JavaScript. Novamente, verifique se isso está dentro da pasta básica do JavaScript e seguida, com esta primeira pasta selecionada, clique neste ícone aqui, que é um novo arquivo, e isso será aberto dentro daqui. Vamos chamar isso de HTML de ponto de índice. Pressione Enter. Ele deve estar dentro da nossa nova pasta. Dentro dele, adicione alguma estrutura HTML básica para abrir isso dentro do navegador e o Visual Studio Code vem com um plug-in ou reconstruído chamado Emmet. Isso nos dará algum preenchimento de código e alguns atalhos simples. Um dos mais úteis é o HTML dois pontos cinco. Pressione Enter. Isso nos dará todo o código inicial HTML básico que precisamos. Novamente, tudo isso estará disponível em todas as outras pastas, então isso é apenas para esta lição. O título, onde adicionar JavaScript. Então, precisamos que os elementos funcionem como um cabeçalho de página. Colocar qualquer coisa como h1 e algum texto dentro daqui. Ter esses elementos no lugar aqui significa que podemos usar algum JavaScript para acessar esses elementos, assim como vimos no console anteriormente. Tudo o que você precisa para abrir isso dentro do navegador é salvar este arquivo com Command ou Control S. Então, se clicarmos com o botão direito do mouse neste nome de arquivo aqui, vá até Copiar caminho e, em seguida, podemos colar isso dentro do navegador. Como alternativa, se você quiser, você pode entrar na pasta principal aqui. Em seguida, você pode seguir até a pasta atual e clicar duas vezes nesta página de índice. Isso abrirá isso em seu navegador padrão. Para poder acessar esses elementos usando JavaScript, uma das maneiras de fazer isso é adicionar AID. Vou nos dar uma identificação do título. Lembre-se de que cada ID específico deve ser exclusivo para esta página HTML. Certifique-se de que só temos um ID de título dentro desse arquivo HTML. Isso torna agradável e fácil para o nosso JavaScript poder selecionar os elementos específicos que você deseja. Então, abaixo disso e logo acima da nossa tag de corpo de fechamento, podemos inserir nossas tags de script. Temos uma etiqueta de abertura e também uma tag de fechamento também. Este é o local onde podemos colocar nosso código JavaScript. Logo acima do corpo, há um local onde podemos adicionar JavaScript e também está acima dos locais que veremos em breve. Mais cedo, quando estávamos dentro do console, lembre-se de que olhamos para selecionar cada elemento específico com o símbolo de dólar zero. Lembre-se também que dissemos que isso é exclusivo para o console. Precisamos de uma maneira diferente de selecionar nossos elementos dentro do editor de texto. Bem, aqui dentro vamos fazer exatamente a mesma coisa que olhamos no console. Primeiro selecionaremos o documento. O documento é este documento HTML completo no qual estamos trabalhando atualmente. Ele selecionará isso e, em seguida, precisamos filtrar esses documentos para o elemento específico que queremos selecionar. Lembre-se de que analisamos um método chamado get elements por ID. Mais uma vez, aqui é CamelCase. Cada palavra após a primeira começa com uma maiúscula dentro dos colchetes, e as cotações passarão em um ID exclusivo que você deseja selecionar. No nosso caso, vamos pegar o título. Mova isso aqui. Analisamos alterar o conteúdo interno ou o texto interno desse elemento com.innertext. Esta é uma propriedade em que podemos adicionar uma nova cadeia de texto entre as aspas simples ou duplas. Vamos mudar isso para JavaScript por enquanto e salve esse arquivo. Então, se passarmos para o navegador e recarregarmos, isso agora selecionou nosso cabeçalho de nível 1 e alterou o HTML interno. Vamos fechar a barra lateral para obter um pouco mais de espaço. Todas as mesmas propriedades que observamos no vídeo do console ainda se aplicam, como adicionar estilos diferentes. Novamente, podemos acessar os mesmos elementos com get element by ID, e também podemos alterar os estilos desse elemento específico também. Vamos mudar a cor do texto para ser igual a laranja. Atualize e tudo isso se aplicará. Outra maneira de adicionar JavaScript é adicionar esse embutido. Adicionar esse embutido significa que o adicionamos diretamente dentro de nossos elementos e adicionamos isso dentro da tag de abertura de elementos. Adicionaremos isso assim como adicionaríamos algum CSS embutido. Em um vídeo anterior, analisamos os eventos muito brevemente, onde analisamos o evento on-mouse-over. Aqui, vamos dar uma olhada no evento ao clicar, que será acionado quando o usuário clicar nesse elemento específico. Tudo o que vamos fazer dentro desse manipulador de eventos ao clicar é acionar um alerta. Um alerta é um pop-up dentro do navegador. Vamos adicionar isso com o texto clicado. Dê a isso um salve e atualize o navegador. Mova o mouse para os elementos e clique em. Agora verei um alerta de página. Isso provavelmente é algo que você já viu ao navegar na web no passado. Tudo o que precisamos fazer para remover isso é clicar no botão Ok e isso será fechado. Vamos apenas remover isso. Também esteja ciente de que geralmente é desencorajado manter nosso JavaScript alinhado assim, porque ele mistura nosso HTML e nosso JavaScript e torna as coisas menos legíveis e organizadas. Se possível, mantenha tudo separado, assim como temos aqui, e também veremos como podemos adicionar isso em um arquivo separado em apenas um momento. Isso está contido dentro de uma tag de script e podemos adicionar quantas tags de script você quiser. Ele também pode estar localizado em qualquer lugar desta página também, inclusive dentro da seção principal. Isso funciona exatamente da mesma forma se pegarmos toda essa seção de script e, em seguida, Comando ou Controle X para cortar isso fora do lugar. Coloque isso dentro da seção head com o comando ou controle V para colar isso e também no navegador. Aqui, podemos ver o título da página original foi restabelecido. Agora, como movemos a tag de script para a seção principal, nenhum desses JavaScript parece estar se aplicando. Então, vamos dar uma olhada dentro do console e ver se conseguimos detectar algum erro. Clique com o botão direito e verifique. Clique na guia Console na parte superior. Vemos que não podemos definir a propriedade innertext de null. Quando recebemos um erro, muitas vezes é uma boa ideia entrar no console e muitas vezes nos dá um ponteiro para exatamente qual é o problema. O problema atual é causado porque página HTML é carregada de cima para baixo. Portanto, o script dentro da seção head é carregado antes mesmo de saber que esse elemento de título existe, o que está causando um erro. Se precisarmos adicionar um script dentro da seção head como este, isso geralmente pode causar problemas se precisarmos acessar qualquer um dos nossos elementos DOM. É por isso que muitas vezes vemos JavaScript no final da seção do corpo. Ele permite que os elementos sejam carregados rapidamente e não impede que o HTML seja carregado na página. No entanto, você verá algumas bibliotecas JavaScript de terceiros que precisam que o script seja carregado dentro da seção principal para que a biblioteca funcione corretamente. Além disso, essas bibliotecas de terceiros, juntamente com nosso próprio código, geralmente são separadas em seu próprio arquivo de script. Mover todo esse JavaScript para seu próprio arquivo tornará esses documentos HTML muito mais legíveis e fáceis de manter. Para fazer isso primeiro, abra a barra lateral e, em seguida, dentro da pasta onde adicionar JavaScript, clique no ícone do novo arquivo e, em seguida, podemos dar a isso um nome de nossa escolha. Vou para o roteiro 1. Então ele precisa ter a extensão dot js. Pressione Enter. De volta à nossa página de índice, podemos copiar o conteúdo entre as tags de script. Pegue essas duas linhas de código, coloque essas saídas. Cole-os em nosso novo arquivo de script. Este arquivo de script não precisa das tags de script ao redor, pois já sabemos que este é um arquivo JavaScript da extensão dot js. Mas o que precisamos fazer é vincular esses dois arquivos juntos. Atualmente, esses são dois arquivos separados independentes um do outro. No arquivo de índice, precisamos apontar para esse novo arquivo de script. Podemos fazer isso dentro das tags de script em vez de ter o código localizado dentro, como fizemos antes. O que podemos fazer é adicionar os atributos de origem. O atributo source é basicamente o local desse arquivo em relação ao local onde estamos atualmente. Isso funciona exatamente da mesma forma que adicionar uma folha de estilos. Como esse arquivo está ao lado um do outro, podemos apontar para isso com a fonte do script 1 ponto js. Se isso estiver localizado dentro de uma pasta JavaScript, por exemplo, precisaremos entrar na pasta JavaScript e, em seguida, encaminhar a barra em nosso script. Nós não temos isso, então é simplesmente roteiro de um ponto js. Certifique-se de que ambos os arquivos estejam salvos e , em seguida, para o navegador, atualize. vemos o mesmo problema dentro do navegador. Não podemos definir a propriedade innertext de null. Isso faz sentido porque ainda estamos carregando a tag de script dentro da seção head. Estamos tentando aplicar isso a um elemento antes mesmo de ele ser carregado. Poderíamos escrever algum código personalizado para esperar que o HTML seja carregado primeiro ou podemos ver algumas técnicas mais modernas no próximo vídeo. 6. Async e Defer: Dentro de nossos arquivos iniciais, vamos fechar esse arquivo do último vídeo para que não haja confusão. Em seguida, vá para a lição 2, que é assíncrona e adiada. Clique duas vezes na página de índice para abrir isso. Como estamos agora em um novo arquivo, precisamos copiar este ou copiar o caminho para isso e depois colá-lo dentro do navegador. Vemos imediatamente que ainda temos o mesmo erro que o vídeo anterior. Isso ocorre porque esse é praticamente o mesmo arquivo ou o mesmo código final que tínhamos no último vídeo. Temos nosso script e também temos nosso cabeçalho de nível 1 e o mesmo conteúdo dentro do arquivo de script. Você precisará fazer isso para cada vídeo que vamos. Precisamos abrir a página de índice e também garantir que este seja o título certo da página. No último vídeo, descobrimos um problema ao carregar nossos arquivos JavaScript muito cedo. Isso pode causar dois problemas. Primeiro, talvez precisemos acessar o elemento HTML antes mesmo de ele ser criado, assim como vemos aqui e, em segundo lugar, podemos ter muito código JavaScript localizado dentro desse arquivo. Isso pode realmente diminuir o carregamento do resto da nossa página. Se o script 1 fosse um arquivo realmente enorme, o usuário não veria nenhum HTML carregado na página até que esse script tivesse terminado de ser executado. Agora vamos analisar duas maneiras que podemos usar para corrigir todo esse assíncrono e adiar. Assíncrono e adiado são atributos que podemos adicionar dentro dos elementos do script. Primeiro, vamos dar uma olhada no assíncrono e fechar a barra lateral para mais espaço. Certifique-se de que esse arquivo esteja salvo e atualize o navegador. Logo, vemos que o erro desapareceu. O JavaScript foi aplicado ao nosso elemento e não vemos nenhum erro dentro do console. Vamos tentar adiar. Coloque isso e atualize o navegador e temos exatamente o mesmo resultado. Tudo está funcionando perfeitamente bem. Com esses dois funcionando, qual é exatamente a diferença? Bem, primeiro temos assíncrono, e assíncrono é a abreviação de assíncrono. Este é um termo que voltaremos mais tarde. Mas para esse caso de uso específico, assíncrono baixará esse script junto com o resto do nosso conteúdo HTML. Mas para entender o que assíncrono está realmente fazendo, precisamos olhar um pouco mais adiante. Agora imagine, em vez de ter nosso script em nossa página de índice dentro do editor de texto como fazemos aqui, imagine que este era um site ao vivo. Se este fosse um site ao vivo, nossos scripts e nossa página de índice serão armazenados em um servidor web. Quando o usuário visitar nossa página pela primeira vez, o conteúdo desses arquivos precisará ser baixado. Quando marcamos isso como um script assíncrono, esse código JavaScript será baixado junto com nosso conteúdo HTML. Isso significa que, em vez de bloquear nosso código HTML, o HTML ainda é baixado e renderizado dentro do navegador, por isso não deve causar muita desaceleração com nosso conteúdo. Em seguida, ele executará o conteúdo do nosso script assim que tudo terminar o download. Isso tem suas vantagens. É realmente útil, pois não está bloqueando o carregamento do nosso conteúdo, mas há uma desvantagem. Você vê isso, vou vincular a três scripts separados. Vamos copiar e colar isso mais duas vezes. Isso pode ser o script 2 e o script 3 e, claro, precisamos criar dois novos arquivos dentro da nossa pasta Async and Defer. Segundo, scripts2.js. Também o roteiro 3 em nosso roteiro 1. Para maior clareza aqui, podemos alterar isso para o número 1 e, em seguida, salvar esse arquivo e copiar essa linha de código em nosso script 2. Cole isso aqui dentro e podemos mudar isso para o número 2. Salve isso no mesmo para o número 3. Agora, com nossos três scripts vinculados aqui, em teoria, o que devemos esperar que aconteça? Bem, provavelmente esperaríamos que este fosse o número 3 dentro daqui, porque carregamos o script número 1, que mudará o conteúdo para o número 1. Em seguida, o script 2 que alteraremos isso para ser o número 2 e, em seguida, o número 3 substituirá isso para ser o número 3. Bem, vamos verificar isso. Podemos salvar esse arquivo e também o navegador, atualizar. Vemos o número 3 como esperado. Vamos tentar atualizar mais algumas vezes. Se continuarmos atualizando várias vezes, eventualmente veremos um número diferente. Eventualmente vemos esse valor de 2 porque estamos solicitando todos esses três scripts em ordem. Mas mesmo que estejamos solicitando esses três scripts em ordem, isso não significa que você sempre voltará do servidor nesta ordem específica. Mas você pode estar pensando, por que eu deveria me importar com isso? Da mesma forma que o script1.js dependia do conteúdo do HTML para estar presente, às vezes um script também pode confiar em outro script. Por exemplo, nosso terceiro arquivo JavaScript pode contar com algum código dos dois primeiros arquivos disponíveis primeiro, e se isso for baixado antes dos dois anteriores, isso causará um erro. Certas bibliotecas JavaScript de frameworks também terão vários scripts que precisamos baixar, e eles precisarão ser baixados em ordem. Por exemplo, em versões anteriores da estrutura Bootstrap, costumávamos sempre confiar na estrutura jQuery também. Para o primeiro script, precisaríamos baixar a biblioteca jQuery. Então, somente depois de terminar o carregamento, baixaríamos a biblioteca Bootstrap, que estava fazendo uso dos recursos do jQuery. Quando precisamos que nossos arquivos de script sejam executados em uma ordem específica, assíncrono pode nem sempre ser a melhor opção para ir. O adiamento, por outro lado, executará os scripts na ordem em que eles aparecem e fará isso depois que todos os scripts na página e também o conteúdo da página tiver sido carregado. Vamos mudar isso para ser adiado em todos os nossos três scripts. Se continuarmos atualizando quantas vezes quisermos, só devemos ver o último valor de três. Se você é novo no JavaScript, não espero que você se lembre de tudo isso, e talvez você não precise deles com tanta frequência. Mas você também terá este vídeo e também o código do projeto aqui se precisar disso como referência no futuro. Também lembre-se mais comumente também, também temos a opção de colocar esse script no final da seção do corpo, para que ele não bloqueie o carregamento do restante do HTML. Assim como uma recapitulação antes de seguirmos em frente, temos as palavras-chave assíncronas e adiadas que você pode adicionar como atributos aos nossos scripts. Ao usar assíncrono, isso baixará os scripts junto com o restante do conteúdo HTML e o navegador tentará renderizar a página enquanto faz o download dessa página. Uma das vantagens é que ele não bloqueará a renderização do resto do conteúdo e, assim que o arquivo terminar de baixar, ele executará o script dentro. Também precisamos lembrar que se estamos usando vários scripts assíncronos, não há garantia de que eles serão executados na ordem em que esperamos que eles façam. assíncrono ainda é uma boa opção se tivermos vários scripts que não dependem uns dos outros para serem carregados em uma ordem específica. O adiamento, por outro lado, carregará vários scripts e sabemos que a ordem será preservada. Se nossos scripts forem executados assim que o conteúdo da página, como o HTML e esses scripts, terminarem o download, isso significa que devemos preferir usar scripts adiados quando tivermos vários scripts que precisariam ser executados em ordem. Essa é a principal vantagem que o assíncrono pode ser usado quando temos vários scripts que não precisam ser executados em uma ordem específica. Devemos usar defer quando precisamos que esses scripts sejam executados em uma ordem específica. Novamente, talvez você não precise usar essas duas palavras-chave com muita frequência, mas também é muito importante estar ciente de todas essas partes do JavaScript caso você se depare com elas no futuro. Em seguida, vamos nos afastar do carregamento do JavaScript e dar uma olhada em como podemos trabalhar com strings. 7. Trabalhando com cadeias de caracteres: Vamos agora entrar na Lição 3 desta seção que está Trabalhando com Strings. Devemos saber o que fazer agora. Podemos abrir a página Índice. Então, se abrirmos isso dentro do navegador, copie o caminho para isso e, em seguida, substitua o atual dentro do navegador. Até agora, quando estivermos configurando o texto interno, e vamos dar uma olhada neste exemplo aqui, que é exatamente como os que vimos no passado. Selecionamos este título, logo acima, definimos o InnerText como igual a outra coisa que não estava originalmente lá. Aqui começamos trabalhando com strings e depois substituímos isso por outra coisa, que vemos dentro do navegador. Até agora, estamos adicionando essas aspas simples e em JavaScript, isso é o que é conhecido como uma string. Uma string é basicamente algum texto, pode ser um único caractere, como uma única letra como A, pode ser uma única palavra, pode ser uma frase ou até mesmo um parágrafo. Também podemos colocar isso dentro das aspas simples ou duplas, não importa, ambas funcionarão perfeitamente bem para um exemplo assim. No entanto, haverá um problema se uma das palavras dentro contiver o mesmo caractere, como aspas simples ou duplas. Se revertermos isso de volta para aspas simples, assim, e então podemos mudar isso para ser talvez, vamos. Isso também tem um apóstrofo que é o mesmo símbolo que as citações circundantes, imediatamente podemos ver que o editor de texto destacou isso e mudou a cor para nos informar que há um problema. O que está efetivamente acontecendo aqui é que estamos combinando uma string das duas primeiras cotações. Podemos ver que esta é a cor original, e depois vemos um erro. Podemos ver isso se salvarmos esse arquivo e atualizarmos o navegador, podemos ver no console que teremos um identificador inesperado, já que está esperando que toda a nossa string esteja apenas contida no meio essas citações. Há algumas maneiras de lidar com isso. Primeiro, poderíamos mudar as citações externas para serem o oposto e fazê-las dobrar. Então adicione o duplo no final e também no início também. Agora, essa string estará contida entre as citações duplas e o apóstrofo será completamente válido. Salve e atualize, e agora veremos o apóstrofo dentro da string e não vemos erros dentro do console. Alternativamente, podemos usar o que é chamado de escapar. Se mudarmos isso de volta para as cotações simples que estavam causando um erro, poderemos fazer uso de uma barra invertida na frente e isso escapará do caractere que você deseja exibir. Isso dirá ao navegador para renderizar isso como parte da string. Vamos tentar isso. Isso funciona exatamente da mesma forma também. Escapar assim também funciona para outros personagens, como aspas duplas. Se escaparmos assim, não veremos nenhum problema. Digamos isso, e tudo bem. Mas e se realmente quiséssemos exibir essa barra invertida como parte da string também. Para isso, precisamos adicionar uma barra invertida dupla para escapar disso. O primeiro é renderizado como parte do texto, mas a segunda barra invertida é usada para escapar dessa cotação dupla. Se tivermos muito texto em vez de apenas algumas palavras como temos aqui, às vezes queremos dividi-lo em várias linhas. Para ver um exemplo disso, podemos sair do nosso script e podemos gerar alguns exemplos de texto dentro do nosso Visual Studio Code. Para fazer isso, digite a palavra Lorem, L-O-R-E-M, clique em “Enter”, e isso nos dará algum texto de amostra para trabalhar. Vamos copiar tudo isso, na verdade, cortamos isso fora do lugar e vamos colar isso entre nossas citações. Agora, se salvarmos isso e verificarmos isso no navegador, já que temos muito texto aqui, o navegador irá envolver isso automaticamente novas linhas, dependendo da largura do navegador. No entanto, como desenvolvedor, se quiséssemos controlar exatamente quando isso invadiu uma nova linha, como esta palavra aqui, podemos querer que isso comece em uma nova linha. Para fazer isso, podemos usar uma barra invertida seguida da letra n quantas vezes quisermos dentro daqui. Vamos encontrar a palavra que estávamos procurando qual é esta aqui e podemos usar a barra invertida seguida n. Dê a isso um salve e atualize o navegador. Isso então dividirá isso em uma nova linha, e você pode usar isso dentro dessa string quantas vezes quiser. Algo que deve ser cuidadoso é não podemos ter uma string sobre várias linhas. O que quero dizer com isso é, em vez usar essa barra invertida e n, se for apenas clicar em “Enter” e colocar isso em uma nova linha. Podemos fazer isso quantas vezes quisermos , assim aqui. Podemos ver que o editor de texto está nos avisando de um problema. Para sequência de textos como esse, não podemos dividir isso várias linhas e podemos ver isso no navegador se atualizarmos isso, vemos um token inválido ou inesperado. Temos algumas maneiras diferentes de abordá-lo para corrigir isso. Uma das maneiras mais longas de fazer isso é converter cada uma de nossas linhas de texto em sua própria string. Podemos fazer isso assim e você pode ver que este é um caminho muito longo fazendo isso. Então também precisaríamos usar o símbolo de mais entre cada linha para juntar isso na próxima. Para simplificar, vamos apenas fazer isso como linhas livres, atualizar e tudo isso funcionar como antes. Ou há uma maneira mais moderna que é usar o que é chamado de string de modelo. Isso substitui as aspas por backticks. Vamos apenas desfazer isso e restabelecer isso de volta ao erro original. O que podemos fazer em vez de ter aspas únicas no início e no final, poderíamos substituí-las pelo que é chamado de backtick. O backtick está localizado no seu teclado e é um símbolo aqui. No meu teclado específico, ele está localizado ao lado da tecla Shift esquerda. Imediatamente, o editor de texto agora removerá os erros e podemos salvar isso, e tudo isso deve funcionar perfeitamente dentro do navegador. Você pode ver que você também preserva as quebras de linha, então logo após Lorem ipsum, temos uma pausa, então temos nossa segunda linha que é esta aqui, e depois temos cada linha preservada logo abaixo disso. Esses modelos literais foram introduzidos ao JavaScript no ES6 ou ES2015, e nos permitem escrever cadeias de caracteres de várias linhas junto com alguns outros benefícios como inserir variáveis, que vamos tirar um veja mais tarde. Após este curso, examinaremos mais profundamente as strings também e descobriremos algumas das propriedades e métodos disponíveis que podemos usar. 8. Armazenando dados com variáveis: Isso acabou para este vídeo, indo para a próxima pasta. Vamos examinar o número 4, que está armazenando dados com variáveis. Então, vamos abrir esse arquivo e também copiar o caminho para o navegador também, colar isso. Veremos o título das variáveis colocado no topo. Opa. Agora, neste curso, estamos configurando ou alterando valores, como atualizar este título aqui. Em JavaScript, a maioria dos outros idiomas também, temos regularmente a necessidade de armazenar nossos dados. O JavaScript nos fornece três formas principais de fazer isso. Vamos começar analisando a maneira tradicional de armazenar dados em JavaScript, que é a variável. Podemos criar uma variável usando a palavra-chave var, assim, seguida de um nome para essa variável. Então, vamos chamar meu novo texto. Essa é uma maneira de fazer referência a essa variável no futuro. Adicionar um nome como esse é chamado de declaração, pois estamos declarando uma nova variável. Você pode pensar em uma variável como um contêiner de armazenamento e esse nome que damos a ela, é como o rótulo na frente para que possamos encontrá-lo facilmente no futuro. Também faz sentido ser descritivo ao nomear variáveis. Ele deve refletir os dados que ele contém. Além disso, esse nome não pode conter espaços como esse. Ele também deve começar com uma letra, um sublinhado ou um símbolo $. Se adicionarmos algo que não é permitido, como uma barra direta, geralmente um editor de texto moderno como este irá pegar isso e nos avisar sobre esse erro. Podemos então usar esse símbolo igual para adicionar um valor que você deseja armazenar dentro dessa variável, como nossa cadeia de texto. Como esta é uma string, adicionamos isso nas citações, digamos que novo texto da variável. Então, o que fizemos aqui é que usamos isso igual para atribuir esse valor à direita para esse nome de variável à esquerda. Adicionar um valor à nossa variável assim é chamado de inicialização. Você não precisa se lembrar dessas palavras-chave, mas eu só quero deixar você ciente de que elas existem. Então isso está inicializando uma variável e antes de termos apenas a declaração da variável. Então, para fazer uso desse texto, tudo o que precisamos fazer é passar o nome da variável, assim, você poderia dizer salvar e atualizar. Há nosso novo texto que armazenamos dentro da variável. Bem, e se também quiséssemos alterar esse valor que está armazenado dentro dessa variável. Também podemos fazer isso facilmente. Como nossa variável já foi criada. O que precisamos fazer desta vez é acessar o nome da variável sem a palavra-chave var. O programa já sabe que essa é uma variável, já que declaramos o acima, então a palavra-chave var não é necessária. Novamente, usando os iguais, podemos atualizar isso com um novo valor. Digamos que texto atualizado. Salve isso e confira isso no navegador. Há nosso texto atualizado agora mostrando. Portanto, o pedido aqui também é importante, já que o código é lido de cima para baixo para baixo. Então, na primeira linha, criamos nossa linha variável até atualizá-la. Em seguida, o título é alterado para nosso novo texto atualizado. Se fôssemos fazer algo assim e mover a atualização para estar acima de onde declaramos nossa variável. Vamos ver o que acontece quando salvamos e atualizamos. Não vemos mais a versão atualizada dentro do navegador. Muitas vezes, é por isso que veremos declarações de variáveis na parte superior do script. Portanto, isso não causará nenhum problema se começarmos a atualizar isso mais tarde em nosso arquivo. As variáveis também podem conter outros tipos de dados também, não apenas strings, e descobriremos mais tipos de dados muito em breve. Mas, por enquanto, há mais dois tipos de variáveis ao lado dessa palavra-chave var, que vamos ver. Ambos foram introduzidos com o ES2015. A primeira delas é a palavra-chave let. Na superfície, deixe trabalhar da mesma forma que var. Ele pode conter um valor e também podemos atualizar esse valor quando necessário. Então, se mudarmos var para ser deixado, salve e atualize. Agora vemos o texto atualizado, assim como fizemos com a palavra-chave var. Ainda há uma diferença entre a palavra-chave let e var. Tudo isso se resume a algo chamado escopo. escopo está relacionado a como podemos acessar essas variáveis e você adiciona algumas restrições sobre como podemos acessar os valores armazenados dentro. Há mais informações sobre escopo posteriormente no curso, onde você aprenderá tudo sobre isso com mais detalhes. Mas precisamos aprender um pouco mais sobre JavaScript antes que isso se torne realmente claro. Em seguida, temos a palavra-chave const, que é a abreviação de uma constante. Você pode pensar nisso como mantendo um valor constante que não mudará. Se salvarmos isso e atualizarmos o navegador, veremos que isso lançará um erro dentro do console. Vemos a mensagem de atribuição para variável constante. Nós conseguimos isso porque, assim como var e let, isso também pode armazenar um valor, mas é mais um valor somente leitura. O conteúdo interno não se destina a ser atualizado, o que estamos fazendo aqui. Então, se removermos essa linha assim e depois atualizássemos o navegador, isso agora se livra do erro e ainda vemos nosso conteúdo variável. Portanto, a mensagem de erro do console antes era atribuída a uma variável constante. Então, pouco antes de tentarmos atualizar isso, vimos que a mensagem era atribuição à variável constante. É uma palavra-chave de atribuição aqui, que é a chave. Atribuição é apenas uma palavra extravagante que chegamos a uma variável sobre passá-la um valor assim. Teremos essa era porque estamos tentando reatribuí-la com esse valor logo abaixo e ter essa const agora introduzida na linguagem JavaScript é uma coisa muito boa porque significa que nós pode armazenar nossos valores, que sabemos que nunca pretendemos mudar. Isso pode interromper quaisquer erros ou bugs em nosso código. Se alguém mudar acidentalmente um valor posteriormente no código. Mas há algo que pode ser confuso para iniciantes e envolve criar algo chamado objeto usando const. Se removermos essas duas linhas de código, poderemos criar uma nova constante chamada Pessoa. Teremos mais detalhes sobre objetos muito em breve. Mas, por enquanto, você pode pensar um objeto como uma coleção de dados. Portanto, uma pessoa pode ter vários dados, como uma idade, um nome, uma altura. Todos eles podem ser armazenados dentro desses aparelhos encaracolados. Todos esses dados são armazenados dentro de várias propriedades chamadas pares de valores-chave. Portanto, a chave é o nome dos dados, como o nome de uma pessoa. O valor é o nome real. Separados por uma vírgula, podemos adicionar uma segunda chave chamada likes e, em seguida, um valor de uma comida favorita. Podemos continuar com quantos valores aqui quisermos. Podemos então acessar qualquer uma dessas propriedades acessando primeiro o nome da constante e, em seguida, usando o ponto para selecionar qualquer uma de nossas propriedades, como nome ou curtidas. Vamos tentar isso, atualizar vemos o nome de Chris e em seguida, a pessoa que gosta é uma maneira de acessar a segunda propriedade da pizza. Portanto, embora esse objeto seja uma constante, não é estritamente imutável, o que significa que nunca mudará. Na verdade, podemos atualizar a propriedade assim. Podemos acessar a constante pessoa e acessar a chave chamada likes. Eu defini isso para qualquer coisa como bananas. Vamos salvar isso e ainda temos a pessoa em ponto gosta de renderizar para o navegador, atualizar. Agora podemos ver que atualizamos nossas constantes com um valor de bananas. Também podemos adicionar propriedades adicionais. Então, uma vez que já não existe, podemos dizer que a pessoa pontilha o cabelo e defini-lo para uma cor e, em seguida, exibir isso dentro do navegador. Assim, podemos ver aqui que podemos atualizar as propriedades dentro de um objeto. Mas e se tentássemos mudar completamente a pessoa para ser um tipo de dados diferente, como uma string. Vamos mudar isso para ser um nome como Chris. Atualize isso. Agora vemos a mesma mensagem de erro que tínhamos antes, que é atribuição a uma constante. Então, como você pode ver, uma constante segurando um objeto como esse ainda pode ter seus valores mutados no interior. Nós simplesmente não podemos reatribuir seu valor original para talvez um número ou uma string. Por esse motivo, muitas vezes é aconselhável evitar a confusão usando apenas const para valores simples , como uma string ou um número. Então, sabemos com certeza que esse valor nunca mudará. Então, apenas para recapitular com tudo o que aprendemos neste vídeo, temos três palavras-chave diferentes chamadas var, let e const, que nos permitem declarar uma nova variável que é gentil como uma contêiner de armazenamento para nossos dados. Ao usar as palavras-chave var e let, podemos, opcionalmente, atribuir um valor a esses nomes. Os valores internos também podem ser atualizados ou reatribuídos com um novo valor. Há também algumas considerações de escopo e hospedagem que abordaremos mais tarde no curso quando tivermos um pouco mais de compreensão. Ao usar a palavra-chave const, isso também criará uma nova variável ou contêiner de armazenamento, mas o valor não pode ser reatribuído. Como iniciante, também pode ser confuso ao usar const e um objeto porque as propriedades do objeto podem ser atualizadas, ou também podemos adicionar novas também. Também mencionamos algumas palavras-chave neste vídeo também. Você não precisa se lembrar de tudo isso no momento. Primeiro de tudo, tivemos uma declaração. É quando criamos ou declaramos uma nova variável sem passar um valor. Por exemplo, poderíamos dizer var name. Em seguida, inicializamos essa variável quando passamos um valor como igual a Chris. Atribuições. É quando passamos ou atribuímos um valor a uma variável, como este exemplo na parte inferior, onde atribuímos o valor de 37 à variável de idade. Então, essas variáveis serão algo que usamos muito. Então você terá muita prática com isso através deste curso. Em seguida, vamos ficar com variáveis e dar uma olhada em como podemos misturá-las com strings. 9. Misturando cadeias de caracteres com variáveis: Agora entendemos o que é uma string em JavaScript e também sabemos como armazená-las em contêineres chamados variáveis. Mas e se quiséssemos combinar essas duas coisas adicionando uma variável em uma string? Isso é completamente possível usando JavaScript e há maneiras diferentes de fazer isso. Vamos até nossos arquivos, que é o número 5, misturando strings com variáveis. Vou abrir isso dentro do navegador. Dentro desta página de índice, temos nosso nível 1 no topo com o ID do título. Em seguida, temos duas constantes abaixo, temos esse nome e também uma constante de curtidas também. Por fim, selecionamos nosso título e atualizamos o texto interno. E se quiséssemos atualizar esse título e também misturar essas duas variáveis? A maneira de fazer isso, podemos querer que a cadeia de texto diga que meu nome é. Depois disso, digamos que também quiséssemos inserir essa variável de nome. Se salvarmos isso e atualizarmos, veremos que meu nome é nome, então veremos o texto do nome em vez do conteúdo interno dessa variável. A razão pela qual isso acontece é porque, como tudo isso está dentro das citações, tudo é considerado parte da mesma cadeia de texto, não lido como uma variável. Precisamos sair dessa string e adicionar ou anexar o nome da variável à string. Fazemos isso exatamente como vimos em um vídeo anterior com o símbolo de mais. O que precisamos fazer é remover o nome da variável do final, usar o símbolo de mais e, em seguida, fora da string, podemos adicionar esse nome de variável. Também podemos deixar um espaço no final da string, então temos um espaço entre a string e também a variável, depois para o navegador e atualizamos. Podemos ver que nosso nome agora foi atualizado com o valor da variável. Também podemos adicionar a segunda variável a essa string também, assim como fizemos aqui. Mas, em seguida, use o símbolo de mais, abra a string em um espaço, e diremos e eu gosto, eu tenho um espaço no final e, em seguida, o símbolo de mais para adicionar a variável de curtidas. Vamos verificar isso. Meu nome é Chris e eu gosto de pizza. Tudo isso está funcionando perfeitamente bem, temos nossas variáveis misturadas em uma string. Há também outra maneira de fazer isso também, que foi introduzida no ES 2015. Isso é para usar as strings do modelo. Strings de modelo são exatamente como o que usamos em um vídeo anterior quando combinamos o texto em várias linhas. O que preciso fazer é substituir essas cotações pelos backticks. Vamos remover todas essas citações e também podemos remover os símbolos de mais, deixando apenas o texto dentro. Então o que precisamos fazer é colocar tudo isso dentro dos backticks. O segundo passo é marcar qual parte da string é variável. Sabemos anteriormente, se apenas salvarmos isso e atualizarmos, não vemos o conteúdo dessas duas variáveis, mas o que precisamos fazer é colocar na frente disso um símbolo $ e, em seguida, o nome da variável dentro do curly chaves, o mesmo para nossos gostos, símbolo $, e envolva isso dentro dos aparelhos encaracolados. Agora isso deve ser lido como o conteúdo de nossas duas variáveis. Essas strings de modelo entre as aspas também podem ser armazenadas em sua própria variável também. Se fôssemos cortar isso fora do lugar, criar uma nova variável, digamos que a string seja igual a esse valor que acabamos de cortar. Poderíamos então passar o nome da variável da string. Tudo isso funciona como antes, mas desta vez, tudo combinado em uma única variável de string. 10. Tipos de dados: números: Em qualquer linguagem de programação, temos o que é chamado de tipos de dados. Os tipos de dados, como soam, referem-se ao tipo de dados com os quais estamos lidando. Até agora, nos concentramos principalmente no tipo de dados de string. Mas também há outros também, o JavaScript é uma linguagem vagamente digitada ou dinâmica, que basicamente significa que nossas variáveis não se importam com o tipo de dados que elas contêm, elas podem conter uma string ou como iremos veja durante este vídeo, outra coisa, como um número, e também podemos alterar o tipo de dados de uma variável para quando reatribuímos um novo valor. Isso é diferente de algumas outras linguagens de programação , como Java, onde precisamos especificar que tipo de dados nossa variável conterá primeiro. Dentro desta lição atual, temos os tipos de dados, números, vídeo, que é o Número 6. Também certifique-se de abrir isso dentro do navegador também. Ao lidar com uma linguagem como Java, talvez seja necessário declarar uma variável como essa. Podemos dar à nossa variável um nome chamado número e definir isso igual a uma string de cinco. Quando escrevemos código assim, este é o código Java, isso é o que é chamado de linguagem fortemente tipada, já que esse tipo de dados deve ser declarado antecipadamente. No entanto, embora usemos em JavaScript, o que não se importa com o tipo de dados que essa variável contém. Ao contrário do Java, não declaramos que tipo de dados vamos conter, simplesmente dizemos que tipo de variável essa será. Dizemos que o número seja igual a 5, e isso é claro que é uma string porque está cercado dentro das citações. Mas e se fôssemos fazer isso? Digamos que na próxima linha, reatribuímos esse valor de número para ser igual a um número real, como cinco. É assim que definimos um número em JavaScript. Nós não cercamos em nenhuma das citações. Agora podemos usar esse número dentro daqui. Agora podemos colocar o número na tela. Vamos dizer isso e ver o que acontece. Atualize e agora o valor disso é cinco. Essa variável numérica mudou mesmo que usemos em um tipo de dados completamente diferente. Esse tipo de dados de número pode ser um número inteiro assim, e podemos escrever isso com ou sem casas decimais. Podemos produzir isso. Se você vem de uma linguagem de programação diferente, onde pode haver vários tipos de números, como duplo flutuador ou inteiro, esse não é o caso aqui. Os números JavaScript são sempre armazenados como um formato de ponto flutuante de precisão dupla. Se você quiser saber mais sobre os detalhes técnicos por trás disso, você pode encontrar o link aqui na página. Ao trabalhar com números, o JavaScript também pode calcular o valor e armazená-lo dentro de uma variável também. Por exemplo, se atribuíssemos a esse número o valor de 5 mais 10, agora você deve gerar o valor de 15. Faremos o cálculo primeiro e depois atribuiremos isso à variável. Mas o que você acha que acontecerá se juntarmos um número e uma string? Bem, vamos descobrir. Vamos dizer que o Número 1 seja igual a ser uma string e, em seguida, deixe o Número 2, isso pode atribuir o valor de 15. Agora, em vez de gerar o valor do número, vamos gerar o valor de Número 1, adicioná-lo à variável Número 2, sobre o navegador. Vemos nossas duas variáveis, temos a cadeia de 5 e, em seguida, o número de 15. Isso é um número ou é uma string? Bem, quando eu descubro um número e uma string, em JavaScript o resultado é uma string. Mesmo que tenhamos um número aqui, isso é classificado como uma string completa. Podemos provar isso usando o operador chamado typeof, colocá-los fora de lugar e usamos typeof. Em seguida, dentro dos suportes, cole-os de volta. Veremos que tipo de dados são retornados de dentro desses colchetes. Podemos usar isso com qualquer outro tipo de dados 2 e ele nos informará com que tipo de dados estamos lidando. Salve e atualize e vemos que esse é um tipo de dados de string. No entanto, se fôssemos apenas produzir o Número 2, o resultado ainda é um número. Esse tipo de é uma ferramenta realmente útil se não tivermos certeza com que tipo de dados estamos trabalhando. Também tenha em mente, mesmo que tenhamos um número armazenado dentro de aspas como esta, que tem um Número 5, isso também será classificado como uma string 2. Portanto, qualquer coisa entre aspas é uma string, qualquer número que não esteja entre aspas, é classificado como um número. Tanto o tipo de dados da string quanto o número são considerados como o que é chamado de tipo primitivo JavaScript. Primitivas são tipos de dados que não são classificados como um objeto. Eles também não têm métodos que são ações que podem ser executadas em um objeto. Mas não se preocupe com objetos e métodos ainda, teremos muito mais detalhes sobre eles ao longo deste curso. A principal coisa a entender por enquanto é que as primitivas são os tipos de dados mais simples em comparação, e isso inclui coisas como a string e também números. Assim como uma recapitulação do que vimos neste vídeo, temos tipos de dados que é o tipo de dados com os quais estávamos trabalhando, e atualmente analisamos o tipo de dados de string e também o número. Também mencionamos fortemente o tipo, que é um tipo de dados que precisamos declarar antecipadamente ao criar uma variável. Em outras linguagens, como Java, precisaríamos declarar que uma variável é um determinado tipo de dados, como uma string ou um número quando a criamos. O JavaScript, por outro lado, é digitado vagamente, então as variáveis não se importam com o tipo de dados que elas contêm, e também podemos reatribuir esses dados com um tipo de dados diferente. Por exemplo, poderíamos criar uma variável que é uma string e, em seguida, alterá-la ou reatribuí-la posteriormente com um tipo de número de dados. Primitivas, isso é o que acabamos de ver antes, que é um tipo de dados que não é classificado como um objeto. primitivas geralmente são um tipo de dados mais simples, e descobriremos o outro tipo de objeto em alguns vídeos posteriores. Esta é uma introdução básica aos números JavaScript, eles são uma parte importante e fundamental do JavaScript. 11. Tipos de dados: booleano, nulo e indefinido: No vídeo anterior, cobrimos tipos de datas JavaScript um tanto primitivos que incluem o número e também a string. Agora vamos analisar alguns tipos de dados mais primitivos disponíveis em JavaScript. Isso será um booleano em valor nulo e também indefinido. Certifique-se de ir para a pasta de lições atual , que é o número 7, e os tipos de dados booleanos, nulos e indefinidos. Já tenho isso aberto e também abro no navegador também. Ao brincar com códigos como este, temos algo disponível para testes chamado log do console. Entre as tags de script, tudo o que você precisa fazer é digitar console.log e, em seguida, abrir os colchetes, assim. Trabalhamos brevemente no console anteriormente e esse registro nos permitirá gerar um certo valor para o console dentro do navegador. Por exemplo, podemos dizer que é 10 maior que cinco e, se salvarmos isso e seguida, clicar com o botão direito do mouse e inspecionar para abrir as Ferramentas do Desenvolvedor, clique na guia Console, atualize. Isso retorna o valor de true. O registro do console produzirá qualquer valor dentro desta imagem do console, ótimos testes e descobrindo rapidamente o resultado ou o valor. Também temos um novo operador que é menor que, salve isso. Isso seria o oposto, o que é falso. Esses valores verdadeiro e falso são o tipo de datas booleano. Com o booleano um verdadeiro e um falso são os dois únicos resultados, então é realmente útil para verificar coisas assim. Por exemplo, no projeto Speedy Chef que você está chegando, teremos uma variável chamada GameStarted. Antes do início do jogo, este booleano será definido como falso e, quando começarmos o jogo, reatribuímos essa variável para ser verdadeira. Isso nos permite, em qualquer momento do jogo, verificar se o jogo foi iniciado e ter certos recursos disponíveis. Por exemplo, teríamos algo assim, poderíamos configurar uma variável. Vou dar-nos nomes como GameStarted, isso é igual iniciar para ser falso e, em seguida, dentro do nosso log do console, antes de tudo, podemos verificar o tipo de dados dessa variável usando o tipo de propriedade. Atualize e veremos booleano logo dentro daqui. Como podemos usar isso em uma situação real? Bem, valores booleanos são frequentemente usados em conjunto com uma instrução if. Uma instrução if se parece com isso, teremos a palavra-chave if, abriremos os colchetes assim e, em seguida, abriremos algumas chaves. Agora você verá esse padrão seguido muito dentro do JavaScript. Temos algumas palavras-chave, temos alguns colchetes redondos e, em seguida, teremos algumas chaves onde queremos executar nosso código, então você verá isso muito medida que avançarmos no curso. Mas, em particular, para isso, se declarar o que vamos fazer, vamos verificar se algo é verdadeiro ou falso. No nosso caso, queremos verificar se o GameStarted é igual a verdadeiro ou falso. O que fazemos, passamos isso para dentro daqui e se esse resultado for verdadeiro, o código dentro daqui será executado. No meu caso, vou colocar em um simples registro de console com o texto do GameStarted. Agora, se salvarmos isso, depois atualizarmos o navegador, não veremos nada dentro do console porque isso não é verdade. No entanto, vamos virar isso para ser verdade, atualizar e nosso log do console agora está sendo executado. Claro, abordaremos as declarações if com mais detalhes em breve , mas é assim que elas podem trabalhar com um simples valor booleano. Mas se também tivermos uma segunda variável, bem, PlayerName. Digamos que o PlayerName seja igual a Chris e, em seguida, alteramos nossa declaração if para verificar o nome do jogador. Temos um PlayerName definido, vamos fazer login no console. A mensagem de nome de usuário está definida. Vamos dar um passo atrás e pensar sobre o que estamos fazendo aqui. Nós verificamos. Primeiro de tudo, última vez, verificaremos se o GameStarted é igual a verdadeiro. Este era um valor booleano simples, no entanto, para este PlayerName, isso é igual a uma string. Você acha que isso resultará em verdadeiro ou falso? Bem, vamos salvar isso e verificar isso no navegador e vemos que isso é executado dentro do console. Bem, a razão pela qual vemos isso dentro do console é porque geralmente uma instrução if ou um booleano resultará em verdadeiro se existir um valor. Aqui temos um valor de Chris, então isso definitivamente existe. Vamos ver o que acontece se removermos esse nome e deixarmos isso como uma string vazia, salvamos e atualizamos. Agora, isso deve estar resultando em falso. Uma coisa a observar aqui que ter um valor vazio como nossa string vazia, assim como esta, não deve ser confundido com não ter um valor algum. Uma variável sem um valor é outro tipo de dados primitivo chamado indefinido. Se não tivermos nenhum valor atribuído a essa variável e se removermos essa string assim e, em vez disso, faremos um log de console para o PlayerName e também removeremos essas instruções if, para que não pudéssemos executar este log do console pela primeira vez, salvar e mais no navegador, vemos esse valor indefinido. Como mencionado anteriormente, esse é outro tipo primitivo, como string, number e booleano, e isso indefinido é exibido porque temos uma variável que não tem um valor atribuído a ela. Isso foi como antes quando olhamos para US $0 dentro do navegador. Se inicialmente digitarmos $0, quando não tivermos nenhum elemento selecionado na página, recuperaremos o valor de indefinido. O tipo de dados final que vamos ver neste vídeo também é primitivo e esse é o valor de nulo. Null também indica que algo está faltando também. Se definirmos nossa variável de PlayerName como igual a null e depois atualizarmos o navegador, como esperado, recuperaremos esse valor de null. Demos uma breve olhada nos objetos em um vídeo anterior, e null está relacionado a esses objetos. Ele indica que esse objeto está vazio e muitas vezes, ao trabalhar com bancos de dados ou serviços de back-end, um exemplo comum disso é ao solicitar alguns dados do usuário. Se o usuário estiver conectado, retornaremos um objeto contendo todas essas informações dos usuários. No entanto, se eles não estiverem conectados, muitas vezes veremos nulo pois o objeto do usuário estará vazio. Analisamos três tipos de dados diferentes neste vídeo, analisamos booleano para começar que é um simples valor verdadeiro ou falso. Esse tipo de dados primitivo é realmente útil e muitas vezes visto combinado com uma instrução if. Temos indefinido, novamente um tipo de dados primitivo que indica que algo está faltando. Em nosso exemplo, analisamos uma variável que tem valor nulo atribuído a ela. Finalmente, também descobrimos null, que é novamente um tipo de dados primitivo e é mais específico do que indefinido e se refere a um objeto que é ausência de valores. Você pode ver na parte inferior aqui que indefinido é um resultado mais genérico e nulo é mais específico para um objeto. 12. Comentários, ponto e vírgula e ASI: Se você já trabalhou em JavaScript antes, ou se estiver procurando por exemplos de código on-line, você pode notar que ponto e vírgula às vezes são usados e às vezes não. Os programas JavaScript são compostos de várias instruções, que são lidas de cima para baixo do arquivo. A instrução é basicamente uma instrução, como criar uma declaração variável do código a ser executado dentro de uma instrução if. Embora seja necessário ponto e vírgula em programas JavaScript, se optarmos por não escrevê-los manualmente, o analisador JavaScript as adicionará em fotos automaticamente, onde forem necessárias, os ponto-e-vírgula são adicionados no final de cada instrução, e o processo é chamado de inserção automática de ponto-e-vírgula. Isso não significa que podemos simplesmente esquecer de usá-los completamente. Há casos em que ainda precisamos adicioná-los manualmente. Por exemplo, vamos adicionar algumas variáveis e verificar os resultados. Você notará que estou no vídeo número 80, que é comentários, ponto e vírgula e ASI, e também tenho isso aberto dentro do navegador. Vá até a seção de script. O que vamos fazer é criar duas constantes. As constantes realmente não importam no momento. Vou apenas adicionar um nome, depois uma segunda constante, que pode ser aprendida em JavaScript. Este é um valor booleano verdadeiro. Em seguida, dentro do registro do console, produzimos variáveis únicas no passado. Mas também podemos adicionar uma vírgula e gerar o valor de ambas as variáveis. Salve o arquivo e vá para o console. Atualize e vemos nossos dois valores variáveis. Nada inesperado aqui, temos provavelmente o que esperávamos, que são nossas duas variáveis. Vamos registrá-los no console. Mas e se adicionarmos essas variáveis na mesma linha? Vamos tentar isso. Coloque-os na mesma linha e certifique-se de que qualquer ponto e vírgula seja removido do final de cada instrução. Primeiro de tudo, podemos ver que o editor de texto destacou um problema aqui assim que você fizer isso. Se salvássemos isso e atualizássemos o navegador, veremos um erro de sintaxe dentro do console. Temos um token inesperado de const, porque o analisador JavaScript não espera chegar a esse estágio aqui e, em seguida, ver uma nova declaração const. Se você tiver várias instruções na mesma linha como esta, precisamos declarar que essas são duas instruções separadas, separando-as com um ponto e vírgula. Coloque o ponto e vírgula no meio. Agora, o editor de texto não está destacando nenhum problema. Podemos testar isso. Salve e atualize. Agora tudo está funcionando bem. Você também pode ver que meu editor de texto os colocou automaticamente em linhas separadas, pois são duas instruções separadas. Junto com o ponto e vírgula, algumas outras pegadinhas são quando começamos uma nova linha com colchetes, ou muitas vezes referidas como parênteses. Vamos dar uma olhada em um exemplo logo após essas duas constantes. Crie uma nova variável, vamos chamar a pontuação. Você diria números aleatórios como 97,34, uma constante de dano e, novamente, um número aleatório, 10,42. Assim como uma nota lateral, criei isso como um let. Como uma pontuação geralmente pode ser atualizada, podemos produzir o resultado da pontuação com o dano retirado. Agora, se salvarmos isso e atualizarmos, esse é o valor correto dentro do console. Sabemos que ele pode realizar um cálculo dentro desses colchetes, como acabamos de ver dentro do registro do console. Mas e se tirarmos esse log do console e fizéssemos outra coisa com esse cálculo? Por exemplo, em vez de resultar em 86,92, se quiséssemos arredondar isso para dizer 86 ou 87? Bem, para fazer isso, o JavaScript tem um método embutido que podemos usar chamado toPrecision. Podemos mudar isso no final com o ponto, minúsculo para, e esta é caixa de camelo, então a precisão começa com um P. Para usar isso dentro da análise do valor de comprimento dois para torná-lo com dois dígitos de comprimento. Agora vamos ver o efeito do que aconteceria se esquecêssemos de colocar qualquer ponto e vírgula. Agora, o Visual Studio Code os inserirá automaticamente quando necessário. Mas se deixássemos esses de fora assim e pressionássemos “Salvar”, veríamos instantaneamente o que aconteceria quando o mecanismo JavaScript lesse esse código. Podemos ver que essa linha foi inserida diretamente após a declaração aqui, porque não temos nenhum ponto e vírgula para separar. Vamos salvar isso e atualizar. Vemos um erro, não podemos acessar dano antes da inicialização, e isso ocorre porque essa linha aqui começa com esses colchetes. Agora, isso pode não significar muito se você for completamente novo no JavaScript. Mas se você já fez um pouco de JavaScript no passado, é assim que declaramos um certo tipo de função. Em vez de interpretar essa seção de código e essa seção de código como duas linhas, ela está realmente lendo da esquerda para a direita e continuando isso como uma linha completa de código. Para corrigir isso, como você pode esperar, precisamos separá-los com um ponto e vírgula. Então, se atualizarmos, isso agora se livrará do erro, e tudo ficará claro no console. Também podemos ver diretamente os resultados desse cálculo cortando essa linha de código. Crie um registro de console e cole-o novamente dentro. Salve isso e atualize o navegador e nosso valor agora foi arredondado para duas casas decimais. Há também funções matemáticas que veremos mais tarde, que podem arredondar esses valores cima e também arredondá-los para baixo também. Apenas para recapitular, usar ponto e vírgula em JavaScript é opcional. É completamente para você se você quiser usá-los ou confiar neles para serem inseridos automaticamente. Mas esteja ciente de que há alguns casos em que iniciamos uma nova linha de código com os colchetes onde precisamos ter certeza de que os inserimos manualmente, que isso não cause nenhum erro. Para completar este vídeo, vamos dar uma olhada rápida no uso de comentários. Comentários são simplesmente uma maneira de fazermos anotações dentro do nosso código, que não será lido como nenhum código JavaScript. Também podemos usá-lo para comentar nosso código também. Isso significa que uma linha de código específica ainda está lá em nosso programa, mas não é lida quando o script é executado. Para inserir um comentário ou uma nota, começamos em JavaScript com as duas barras. Em seguida, poderíamos digitar uma nota como, deve ter ponto-e-vírgula nas instruções acima. Se salvarmos isso e atualizarmos o navegador, não veremos nenhuma referência ao comentário dentro daqui. Mas e se tivéssemos um comentário mais longo que se espalhou em várias linhas? Por exemplo, se você tivesse um comentário aqui e disse, controle o comprimento do número usando ToPrecision. Bem, como na maioria das vezes, o editor de texto nos dará uma pista de onde quer que estejamos fazendo algo certo ou errado. Imediatamente essas mudanças de cor e temos esse sublinhado vermelho abaixo. Podemos ver que essa não é a maneira como se espera que seja escrita. Para isso, podemos até começar cada nova linha de código com as barras duplas ou, em vez disso, poderíamos converter isso para um comentário de várias linhas, que é uma barra para frente e, em seguida, uma estrela. Podemos então remover o comentário da segunda linha e, em seguida, ir até o final do nosso comentário aqui, e podemos terminar isso com o oposto, que é uma estrela e uma barra para frente. Como mencionado anteriormente, também podemos comentar linhas de código também. Se quiser deixar um determinado código no lugar para referência, ou se quisermos restabelecê-lo mais tarde, ou quando for devido é exatamente o mesmo. Por exemplo, se quisermos remover essa constante de Chris, apenas adicionamos as duas barras na frente, essa linha de código ficará cinza e não estará mais disponível para acesso dentro do nosso programa. 13. Operadores: atribuição e comparação: Os operadores são algo que usamos o tempo todo em JavaScript. Na verdade, já usamos alguns deles já durante este curso. Você notará para este vídeo que já estou no arquivo correto, que é a lição número 9, Operadores: Atribuição e Comparação. Abra também isso dentro do navegador. Rolando para baixo até nossa seção de script, já temos algumas variáveis simples já configuradas. Você notará que a coisa comum entre todas essas quatro variáveis é que todas elas usam o operador igual. Este é o operador de atribuição porque atribuímos o valor à direita ao nome da variável à esquerda. Mas há outros operadores de atribuição também, que você pode ver aqui neste comentário. Nós olhamos para isso igual. Vamos agora passar para este símbolo de mais igual. Digamos que quiséssemos adicionar o valor do número 1 e também o valor do número 2 e, em seguida, armazenar o valor recém-retornado. Bem, poderíamos fazer isso assim. Vamos chamar isso de novo número. Defina isso igual ao valor do número 1 mais o número 2. Se eu rolar para baixo um pouco mais, temos esse GetElementById, que já está configurado, que é apenas esse nível 1 indo para cima. O que vamos fazer aqui é colocar o valor do novo número. Adicione isso aqui, dê a isso um “Salvar”, e agora podemos “Atualizar” o navegador. Vemos esse valor recém-retornado de 20, que é o 15 e os cinco somados. Não há surpresa com este. Mas o JavaScript também nos fornece algumas maneiras mais curtas de fazer isso, em vez de adicionar o número 1 nas variáveis número 2 juntas e depois atribuir isso a uma variável. Em vez disso, podemos fazer isso assim. Podemos remover nosso comentário desta linha com as duas barras. Além disso, se você estiver usando o Visual Studio Code em um Mac, poderá usar o comando e a barra. Isso alterna isso automaticamente. Se você estiver usando o Windows, isso será controle com barra direta. Isso fará exatamente o mesmo. Em vez disso, uma opção curta. Se você quiser alterar a variável número 1 ou atualizá-la, podemos usar o operador plus igual e, em seguida, passar o número 2. O que isso fará, ele adicionará ambos os números juntos e atribuirá um novo valor à variável à esquerda. Ambas as mesmas linhas ainda virão com o mesmo resultado de 20. A diferença sendo a superior está sendo armazenada dentro de uma nova variável, e a inferior está atualizando essa existente. Podemos verificar isso atualizando isso para ser o número um. “Salvar” e “Atualizar”. Ainda vemos o mesmo valor de 20. Também no topo com nossas variáveis, temos esse nome prévio e o sobrenome. Se quiséssemos exibir o nome completo na tela, podemos criar algo assim. Primeiro de tudo, poderíamos definir o nome prévio e, em seguida, usar o Comando ou Controle C para copiar e, em seguida, Comando ou Controle V para colar. Também podemos produzir o valor do sobrenome. “Salve” isso e, no navegador, vemos apenas o valor do nosso sobrenome. Essa abordagem não funciona porque o sobrenome é último código conhecido e, portanto, substitui o nome prévio. Em vez disso, o que podemos fazer é usar o operador plus igual para adicionar isso aos nossos elementos, em vez de substituir o existente. Se “Salvar” isso e “Atualizar”, veremos o valor de ambas as variáveis. Também poderíamos adicionar um espaço vazio entre cada uma dessas palavras usando algumas das técnicas que usamos no passado, passar em uma string vazia com um espaço. Em seguida, o operador plus para adicionar isso antes do nosso sobrenome. “Salvar” este arquivo. Agora temos um espaço entre nossos dois nomes de variáveis. Isso está adicionando valores e, em seguida, reatribuindo o novo valor. Mas também podemos fazer o oposto com a subtração. Podemos ver que está aqui em cima. Isso funciona exatamente da mesma forma, mas usamos o símbolo negativo em vez do mais. Podemos usar isso com nosso exemplo de número abaixo fazendo o oposto com uma subtração. Vamos remover esse segundo, GetElementById. Substitua o nome prévio pelo valor do número 1. “Salvar” e “Atualizar”, e agora temos o novo valor de 10. Só para recapitular, o que fizemos aqui é que pegamos o número 1, que é 15. Em seguida, tiramos o valor de cinco para nos dar 10, e o novo valor de 10 foi reatribuído para o número 1. Também multiplicamos exatamente o mesmo. Podemos alterar isso, “Atualizar”, e temos o valor de 75. Também podemos usar o divide, que é a barra para frente. Isso é 15 dividido por 5, o que reatribuirá o número 1 para ser igual a 3. Um interessante é este último que podemos ver aqui, que é o símbolo de porcentagem. Esse símbolo de porcentagem são as atribuições restantes após a divisão. O que isso está fazendo aqui, temos nosso número 1 e nosso número 2, que é um resultado de 15 dividido por 5. Cinco entra em 15 três vezes e, portanto, não há restante. Se salvássemos isso, deveria haver um valor restante de zero. Mas e se mudarmos um desses números? Digamos que quatro. Quatro entra em 15 três vezes com o restante de três. Outro tipo de operador que temos é a comparação. Atualmente sabemos quando estamos definindo variáveis como esses vínculos, quando usamos um único igual, atribuímos o valor à direita para o valor à esquerda. Aqui, o número 1 era originalmente 15, e agora se definirmos isso igual ao número 2, agora deve ser o valor de quatro. Mas às vezes isso pode parecer um pouco estranho para iniciantes. Porque se lêssemos isso como iniciante, pode parecer que estamos verificando se o número 1 é igual ao número 2. Como sabemos, esse não é o caso. Isso atribuirá o número 2 para ser igual ao número 1. Mas se quiséssemos comparar se esses dois valores são os mesmos, fazemos isso com os iguais duplos. Vamos instalar isso dentro do nosso valor, digamos que os resultados. Em seguida, imprima isso para o navegador, “Salvar” e “Atualizar”. Vemos que o valor é um booleano de falso. Sabemos que isso é falso porque o número 1 é igual a 15 e o número 2 é igual a 4. Também podemos fazer exatamente o oposto, que é adicionar um ponto de exclamação dentro daqui. Isso verificará se os valores não são iguais. Você encontrará isso muitas vezes com JavaScript, se usarmos o ponto de exclamação, isso fará o oposto do caso original. “Salve” isso, “Atualizar”. O oposto, é claro, é verdade. Algo, no entanto, a ser cuidado é se estivermos comparando dois tipos de dados diferentes. Por exemplo, se ambos fossem cinco, mas um desses cinco estava cercado dentro das citações para transformar isso em uma string. Para este exemplo, não importa se estamos usando as aspas simples ou duplas. Ele muda de volta para os iguais. Vamos ver qual é o resultado dentro do navegador. Se “Atualizarmos” isso, veremos que esse é um valor verdadeiro. Mesmo que tenhamos uma cadeia de cinco e um número de cinco, os iguais duplos verificarão apenas os valores e não os tipos de dados. O número 1 e o número 2 são considerados iguais, mesmo que um seja uma string e um seja um número. No entanto, se quiséssemos também verificar o valor no tipo de dados, há uma maneira de fazer isso usando os triplos iguais. O triplo igual significa igualdade estrita. “Salve” isso, “Atualizar”. Agora, como eles têm tipos de dados diferentes, isso agora retorna um valor falso. Se estivermos usando a igualdade estrita assim, também podemos usar o ponto de exclamação como antes para retornar exatamente o oposto. Altere isso para um ponto de exclamação. Agora, se “Atualizarmos” o navegador, esse é o valor oposto de true. Comparação como essa geralmente é combinada com instruções if, que abordaremos novamente mais tarde. Mas alguns outros operadores de comparação incluem os símbolos menores que e maiores que, que são as setas esquerda e direita. Nós olhamos brevemente para eles em um vídeo anterior. Tudo o que precisamos fazer é mudar nossos dois valores para serem diferentes. Vamos primeiro verificar se o número 1 é maior que o número 2. Sabemos que isso é verdade, então esperamos ver isso dentro do navegador. O oposto é o símbolo menor que, que, é claro, retornará o valor de false. Finalmente, a última coisa que queremos dar uma olhada neste vídeo é que também podemos combinar esses símbolos menores que e maiores que com os iguais. Podemos verificar se o número 1 é menor ou igual ao número 2. Este será falso. Mas não podemos alterar essas variáveis para serem as mesmas. Ambos são iguais. Isso deve ser um valor verdadeiro. Também temos acesso à versão maior ou igual à versão também. Operadores como esses são úteis para coisas como jogos, onde podemos verificar se a saúde de um jogador é zero ou menos, que terminará o jogo. Em seguida, vamos ficar com o assunto dos operadores, mas desta vez vamos dar uma olhada em lógica e aritmética. 14. Operadores: lógica e aritmética: Bem-vindo de volta. Junto com as atribuições e os operadores de comparação, também existem operadores lógicos e aritméticos, dos quais podemos aproveitar em JavaScript. Como sempre, entramos na pasta desta lição, que é o número 10, e também abrimos isso dentro do navegador. Assim como no vídeo anterior, temos alguns comentários, que tem uma lista de todos os operadores disponíveis. O primeiro conjunto são os operadores aritméticos. Vamos entrar nos lógicos logo depois. Com os operadores aritméticos, muitos deles são apenas senso comum, como a adição e a subtração. Muitos deles também são muito semelhantes ao vídeo anterior, simplesmente não combinados com o operador igual. Por exemplo, este é um que procuramos anteriormente. Este plus é igual, adicionará ambos os números e reatribuirá o novo valor para ser o número 1. Sabemos que são 15 e também cinco. Esses resultados do número 1 seriam então iguais a 20. No entanto, se nós removêssemos isso, é igual e apenas temos o símbolo de mais por conta própria, como você pode esperar, isso simplesmente adicionará esses dois valores juntos, o que significa que poderíamos produzir isso diretamente no console, ou também podemos armazenar isso dentro de uma variável para fazer uso em qualquer lugar dentro do nosso código. Logo abaixo [inaudível] desta linha de código onde pegamos o título desta página. Em seguida, podemos definir o texto interno para ser igual ao nosso resultado. Vamos experimentar isso no navegador. Recarregue isso. Obteremos o valor de 20 porque adicionamos o número 1 e o número 2. Isso funciona para não apenas adicioná-lo para obter as variáveis assim. Por exemplo, vamos fazer um log do console. Podemos adicionar números simples assim, então 5 mais 3. Abra o console e há nosso valor aqui. Também podemos usá-lo para adicionar strings também. Acima, temos uma constante de nome prévio e também sobrenome. Podemo