Javascript para iniciantes (inclui mais de 6 projetos da vida real)

1. Boas-vindas ao JavaScript para iniciantes: JavaScript, a linguagem de programação mais quente hoje em dia, de sites completos explodidos para APS móveis para programas como Slack e Spotify, o JavaScript está em todos os lugares. É a linguagem de programação moderna que todos os desenvolvedores precisam saber. Se o seu novo em desenvolvimento Web e não sabe por onde começar, não procure mais. Este curso é absolutamente para você. Neste curso, você aprenderá tudo o que precisa saber para obter uma forte compreensão dos fundamentos do JavaScript. Não importa se você já é super habilidoso em desenvolvimento Web ou sua nova decodificação. Este curso foi projetado para você. JavaScript é uma das linguagens de codificação mais populares do mundo, e é alerta Superfund. Neste curso, você vai aprender os conceitos básicos de JavaScript, variáveis, página Web, interatividade, interatividade, tipos de dados e estruturas de dados, instruções condicionais, funções, JavaScript, peculiaridades que o tornam diferente de todas as outras linguagens, objetos, objetos, classes e programação orientada a objetos. AP Eyes e Ajax pedidos e tudo o mais. Há também cinco mini-projetos para prática imediata, e um projeto final para testar seu conhecimento geral. Junte-se hoje mesmo para se tornar um desenvolvedor de JavaScript 2. 7 facts no JavaScript: Olá, fim. Bem-vindo ao Javascript para iniciantes. Certo, acho que devemos começar dizendo o que é JavaScript, onde está disponível e, além disso, o que não é. Então vamos começar com o número um. O que é Javascript? Não JavaScript não é Java. Há uma grande distinção entre Java e JavaScript. Java tem sido em torno de mais tempo do que JavaScript. JavaScript foi nomeado apenas JavaScript para que ele poderia alavancar parte da popularidade por trás Jave uma volta em 1995. E eles na verdade não estão relacionados. Na verdade, Jaffa é estritamente uma linguagem do lado do servidor, e JavaScript é quase estritamente uma fachada na linguagem, embora ele possa ser usado como uma linguagem do lado do servidor agora porque ele foi adaptado para funcionar dessa maneira. A chave que leva aqui é Java não é Java script. Então, sempre que você estiver falando sobre JavaScript, por favor, não ligue apenas para Java, porque isso vai confundir outros desenvolvedores. Número dois. Todos os navegadores da Web o usam. 100% de todos os navegadores da Web usam JavaScript. Agora você como um usuário em digamos, Chrome ou Firefox. Você pode decidir desativar o javascript se quiser, mas seu navegador vem com ele sempre que você baixar um navegador. Firefox Chrome Safari Edge. Até o Internet Explorer vem com suporte a JavaScript. Na verdade, JavaScript é na verdade a única linguagem que você pode usar no front-end. Então vamos colocar isso no JavaScript é a linguagem de codificação Onley que você pode usar no front-end. É o único. Há HTML, CSS e JavaScript, e isso compõe toda a frente e pilha de qualquer site. HTML e CSS não são linguagens. JavaScript é uma linguagem de codificação, e é a única lá fora, e isso realmente contribui para seu crescimento maciço e popularidade. Porque não há outras escolhas. Você precisa saber JavaScript para ser um desenvolvedor de frente e Web. Certo, número quatro. Como desenvolvedor, você vai ouvir muitas palavras. Você vai ouvir coisas como Jake Weary React vista, bibliotecas angulares e estruturas. Há uma diferença entre todos eles, e nós vamos começar mais sobre isso à medida que o curso continua. Mas nos bastidores por trás Jake Weary reagir vista e angular, é apenas javascript baunilha. Está tudo escrito em JavaScript simples chato. Uma biblioteca é um arquivo JavaScript ou um conjunto de funções que permite fazer atalhos. Então eu, por exemplo, J Query é uma biblioteca, e isso é porque ele realmente não vem com todas as coisas extras que ah framework completo faz. E uma estrutura é como reativa você ou angular, onde ele vem com mais do que apenas ouvintes de eventos vinculativos. Isso vem com uma certa maneira de escrever coisas que vem com um certo estilo, ah, estilo de codificação. Isso é sobre como você realmente escreve seu código, e ele faz quase tudo que você precisa. Então essa é a diferença entre uma biblioteca e uma estrutura. Mas falaremos mais sobre isso no futuro. Número cinco. Você pode usar JavaScript online ou offline? Sim, a resposta é sim. Você pode usar Js offline. Agora, por que eu digo isso? Ou como eu digo que Rather é JavaScript sempre que você acessar um site, sempre que você tem um site, seu navegador baixa um monte de HTML CSS e JavaScript juntamente com imagens e talvez alguns outros arquivos, e seu tenta descontar aqueles para que ele não tenha que recarregá-lo uma e outra vez e outra vez. Uma vez que você tenha um arquivo javascript, você pode executar esse arquivo em seu navegador, mesmo que você não tenha Internet. Então, mesmo que você não tenha internet durante todo o curso, adivinha? Você pode simplesmente abrir o seu navegador e você pode digitar o código aqui, que é algo que eu vou mostrar-lhe em apenas um pouco. E ele vai apenas dizer Hi mundo e que é JavaScript. Então você não precisa de Internet para isso. Com isso dito, muitos sites ainda têm algum tipo de um p I lá fora e você ainda vai precisar Internet para realmente alavancar o uso completo de JavaScript. No entanto, você não precisa necessariamente disso o tempo todo. Arquivos JavaScript arquivos JavaScript e em dot Js Então, assim como um HTML quando você estava aprendendo html, era dot html ou CSS era dot CSS ou dot python e ensinou torta, certo? Então é a mesma coisa, então ponto Js e você vai ver isso em todo lugar também. Então, todos os arquivos JavaScript terminam em dot Js e por último, mas não menos importante, você pode criar programas inteiros usando JavaScript nos dias de hoje, então ele começou. Era uma vez, você só podia criar programas em determinados idiomas, como C ou C plus. E então ele meio que mudou em direção a coisas como Python Recon. Faça programas python inteiros python para um sistema operacional, e agora você pode realmente fazer a mesma coisa com JavaScript. E a coisa boa sobre isso é que é uma língua para governar todos eles. Então o que você pode fazer é criar um programa inteiro, e ele pode estar em vários sistemas operacionais. Ele pode funcionar. Seu dispositivo móvel é não importa de seu IOS ou Android ou Windows ou Mac ou Lennox ou qualquer outra coisa. É um sistema para governar todos eles. E um bom exemplo disso é Spotify, Spotify e folga. Estes ar duas aplicações enormes que têm por muito tempo vem usando algo chamado Electron. E o que isso faz é que basicamente compila todo o seu JavaScript em um programa real, e então você pode ir e enviá-lo para as pessoas para baixar no Windows, Linux, Mac OS, Android, iPhone, Você diz o nome. Tem apoio para isso. E então agora JavaScript que é realmente escrever esta nota. JavaScript é usado para criar programas inteiros, modo que é uma espécie de sete fatos divertidos sobre dois JavaScript. Vamos entrar em muito mais coisas à medida que o tempo passa para terminar este vídeo à esquerda . Você vê, meu editor que eu estou usando ves codificado é feito pela Microsoft é completamente gratuito. E você pode obtê-lo simplesmente baixando-o. Você vai precisar de um editor de texto como este. Então, se você ainda não tem um, eu sugiro código V s à direita. Simplesmente tenho o Google Chrome aberto. É um navegador. E, na verdade, tudo o que fiz aqui foi ir a um barco em branco. Então nova página, clique com o botão direito inspecionar. E se você entrar no seu console aqui em cima e vamos fazer isso maior, você vai realmente escrever javascript bem aqui. Olá. Oi. Eu gosto disso e temos um pouco de javascript. Então você vai ver que minha tela está dividida em duas. Então eu tenho meu editor à esquerda, e então eu só tenho ah, navegador à direita. Algo assim. Se você tem dois monitores que você pode usar para monitores, você pode simplesmente virar entre tela cheia no código V s ou seu editor de texto e cromo ou qualquer navegador que você deseja usar. Não tem que ser o Crumb. Mas é assim que eu o configurou no vídeo para que você possa ver tudo na sua frente. Onde isso disse, vamos pular para nossa próxima lição onde vamos criar nosso primeiro script JavaScript. 3. Seu primeiro roteiro: Muito bem, vamos saltar directamente para o JavaScript. Neste momento, você deve ter um editor de texto como código V s. Adam Sublime. Algo assim. E tudo o que vamos fazer é criar um novo arquivo. E eu só vou dizer isso como um arquivo dot html e eu vou chamar isso de seu primeiro script dot html. Então, no início, parece que estamos criando um arquivo HTML, e na verdade, estamos. Então eu vou criar vai fazer isso menor. Eu sou não para criar um pouco rápido HTML cinco layout aqui, ea primeira coisa que eu quero fazer é que eu quero criar um java despojado e assim dentro do meu HTML, geralmente na parte inferior da sua página pouco antes da tag body. Você é a etiqueta final do corpo. Colocamos uma tag chamada Script no script Here e script de barra, e é assim que praticamente fazemos qualquer coisa com javascript dentro da página. Agora, se você está seguindo este curso, realmente, você não precisa disso. Você só precisa do tipo doc html head body e, em seguida, colocar script dentro do seu corpo. Vou deixar isso aí, sabe, sabe, por razões que escolta pesada coloca automaticamente lá para mim, então eu vou mantê-lo lá dentro. Vamos chamar isso de seu primeiro roteiro. E onde temos o nosso script aqui, tudo o que vou fazer é digitar alerta, citação de colchetes. O Mark. Oi. Meu nome é Caleb. E então eu coloco um fim entre aspas e colchetes intermináveis ou parênteses, e, em seguida, um ponto semi dois-pontos. Então, se eu salvar este arquivo e eu entrar no Chrome e eu simplesmente apertar comando ou controle Oh, você também pode entrar em arquivo aberto. E se eu abrir esse arquivo, ele executará automaticamente meu JavaScript para mim. E então há um alerta aqui. Essa caixa chata que aparece diz “Oi, meu nome é Caleb”. E sempre que atualizo a página, diz “Oi”. Meu nome é Caleb. Oi. Meu nome é Caleb. Vamos fazer de novo. Oi. Meu nome é Caleb. O que acontece se eu clicar nele mais uma vez? Ele vai dizer oi. Meu nome é Caleb. E isso é porque tudo entre esta tag aqui esta tag de script de abertura nesta tag de script de fechamento . Todo esse javascript vai ser executado. Agora, neste ponto, nós não sabemos sobre coisas como sintaxe, que é como a estrutura da linguagem. Por que temos um ponto-e-vírgula? Por que temos parênteses? Por que temos aspas? O que é um alerta? Ainda não sabemos essas coisas, e na verdade está tudo bem. Mas, por enquanto, o que eu gostaria que você dialogasse é apenas criar um pequeno script como este. Então, se você precisa se sentir livre de vídeo depósito e apenas criar um script diz oi, meu nome é qualquer que seja o seu nome, e apenas certifique-se que é um alerta. Certifique-se de que se pareça muito com o meu código aqui. A parte importante é mentir. 15 Reboque linha 17 aqui. Você não tem que se preocupar muito com essas coisas. Nós não estamos olhando para criar um site responsivo, que é o que basicamente isso está fazendo. Nós só queremos um pouco de javascript para executar e, em seguida, abri-lo em seu navegador. Há uma alternativa para fazer isso se você quiser. Você não tem que fazer isso no arquivo. Você também pode fazer isso diretamente no seu navegador. Então, se você abrir qualquer página clique com o botão direito do mouse em Inspetor, e você vai querer clicar nos tablets como cônsul. E aqui, este é apenas o seu console JavaScript. Seu capaz de escrever qualquer javascript que você quiser. Então, por exemplo, eu poderia dizer alerta JavaScript para iniciantes se eu pudesse soletrar direito. E lá vamos nós. Diz javascript para iniciantes, e você percebe que parece exatamente o mesmo código que eu escrevi aqui. O texto é diferente dentro dele. Falamos sobre isso mais tarde. Mas basicamente, parece exatamente o mesmo. Mas basicamente, Então você poderia fazer dessa maneira. Ou se você quisesse. Você poderia usar código caneta dot io, que é uma ferramenta para basicamente areia boxe html CSS e JavaScript. E eu vou te mostrar esse em alguns vídeos a partir de agora. Mas estas são as duas principais maneiras de executar JavaScript. Basicamente, seus roteiros grandes entram aqui. E se você precisar testar alguma coisa hey, basta abrir seu navegador. Certo. Clique, inspecione. Vá para o seu console e você pode escrever qualquer javascript que você quiser. A próxima coisa a estar ciente é como vinculamos a arquivos JavaScript? Bem, se você está familiarizado com HTML e CSS em CSS, é um link. Elementos em JavaScript. Fazemos script SRC em vez de um rascunho. SRC é igual a Vamos scripts e seu primeiro ponto de script Js que poderíamos fazer tipo é igual a qualquer tipo que queremos que ele seja. E basicamente acabamos de fechar o roteiro. E o que isso vai fazer é tentar carregar a partir da pasta de scripts e vai procurar o seu primeiro script jazz. Agora isso não existe, então isso não vai funcionar. Mas é assim que você usaria um arquivo externo. Então, se você tiver vários arquivos HTML nos quais deseja que o JavaScript seja executado, você não precisa copiá-lo e colá-lo. Você pode simplesmente usar um arquivo externo, e isso é algo que você deve ter aprendido em CSS e HTML também. Então sua tarefa para este vídeo é basicamente apenas criar um script na tag de script aberto, uma tag de fechamento despojado. Certifique-se de que está logo acima do seu corpo. Não quero isso na cabeça como escrevi lá em cima. Vamos nos livrar disso. Você quer um pouco acima da sua etiqueta de corpo de barra e você sabe, você tem todo o seu HTML aqui e, em seguida, apenas alertas para o mundo. Olá. Meu nome é. E então, qualquer que seja o seu nome, uma vez que você tenha feito isso, vamos para a próxima lição. 4. Uma breve história: Tudo bem, vamos falar sobre um breve histórico de JavaScript. Sei que não é a coisa mais importante do mundo. Também sei que isto não é a coisa mais interessante do mundo. Mas é, na minha opinião, um fundamental para aprender uma língua. Você meio que quer entender de onde ele estava vindo, a fim de projetar para onde ele está indo. E JavaScript, para mim tem uma história bastante interessante. Então, as primeiras coisas primeiro JavaScript foi ou é. Na verdade, Jeff Script é uma linguagem de programação relativamente nova. Na verdade, é chamado Você tem um Script porque era uma linguagem de script. Não era realmente uma linguagem de programação completa até recentemente. Foi desenvolvido no ano de 1995 e foi feito inteiramente em 10 dias. Agora, o JavaScript que escrevemos hoje significativamente mais complexo e levou mais de 10 dias para criar. Mas o protótipo original do JavaScript levou apenas cerca de 10 dias ao longo do final dos anos 19 . Indo para os primeiros dois milhares, muitas pessoas realmente pensaram que JavaScript era uma moda porque você tinha que escrever uma linguagem de programação para fazer um site funcionar, e você realmente tinha que escrever uma linguagem de programação no back-end, então que você poderia fazer coisas como aceitar pagamentos e você tinha que escrever uma linguagem de programação no front-end para que você pudesse ter pequenas interações e não poderia fazer muito naquela época. Então é compreensível pensar por que teria sido uma gordura. Mas então, à medida que mais pessoas ficavam online e mais pessoas queriam interações, o JavaScript realmente não decolou. Não muito bem, de qualquer maneira. Flash tornou-se a linguagem de animação padrão agora, como a maioria de nós sabe, pisca não realmente ao redor mais. E é basicamente tudo JavaScript. E isso porque o Flash tinha muitos problemas de segurança e JavaScript bem, como estava amadurecendo lentamente em segundo plano, ele era capaz de fazer mais e mais coisas que o Flash era capaz de dilatar e, eventualmente, apenas completamente substituído. Quando um dia o Google e um monte de outras pessoas disseram que não há mais flash. Este é um grande problema de segurança, e Flash basicamente recebeu uma linha do tempo dizendo: “ Ei, Ei, você tem alguns anos de vida, e então estamos cortando seu apoio. Estamos cortando seu suporte de vida, e vamos usar JavaScript para que todos estejam preparados para isso. E foi isso que acabou acontecendo. E então garganta esse período. Enquanto Flash estava em suas últimas etapas, JavaScript realmente tomou conta. As pessoas realmente começaram a adotá-lo e torná-lo melhor e fazer todos os tipos de bibliotecas e estruturas que usamos hoje. Eu mencionei alguns vídeos atrás que JavaScript é a interface Onley e linguagem de programação lá fora, e bem, isso foi verdade em um ponto. Não é inteiramente verdade. Existem outras linguagens de programação que você pode usar no front-end, mas eles não são realmente quatro sites mais do que, portanto, linguagens de programação. E as maiores ameaças aos sucessos do JavaScript é uma chamada de montagem da Web, ou florescer para abreviar. Na verdade, nem sequer obteve suporte adequado ao navegador até o final de 2017 início de 2018. Agora, montagem da Web é basicamente uma linguagem de programação real. Uma linguagem de programação riel que funciona muito, muito, muito rápido é muito mais eficiente do que JavaScript para o seu navegador. No entanto, ele realmente não decolou, e eu acho que ele não decolou porque o JavaScript cresceu tão rapidamente através de apenas alguns anos , realmente, realmente, cerca de uma década e a montagem da Web estava atrasada. Lançamento de reboque. Eles deveriam ser lançados muito antes de 2017. Originalmente, o JavaScript simplesmente cresceu muito rápido para a montagem da Web para acompanhar. Dito isto, se Webb Assembly se tornou um padrão, isso seria um grande salto em frente para basicamente cada site ou qualquer programa que está rodando através de um navegador. Mas acho que isso não vai acontecer tão cedo. Mas, ei, isso não é nem aqui nem ali porque estamos aprendendo. JavaScript e JavaScript tem enorme demanda hoje, Mas é apenas bom saber que se um dia JavaScript foi para ser substituído para desenvolvimento frontal e Web , provavelmente seria por montagem da Web e encaminhamento tão rápido um par de anos. Agora temos um JavaScript do lado do servidor, chamado nó dot Js, e é massivamente popular frameworks como React, criado pelo Facebook e ver ponto Js. Havia outro chamado angular, criado pelo Google e basicamente ver ponto Js oito até toda a comunidade angular. Ah, e React é o rei dos frameworks JavaScript. Mas voltando tocando de volta em que node.js. Basicamente, há um mecanismo que pode ler seu javascript e dividi-lo em código muito desempenho , e assim você pode escrever javascript e seu computador. Basicamente, você pode pensar nisso como uma maneira como ele compila seu JavaScript em C e, em seguida, como ele está executando seu código C, eu estou fazendo aspas aéreas aqui, mas seu código C. Na verdade, é muito mais rápido. E então este é o JavaScript do lado do servidor, o que significa que você pode realmente escrever JavaScript em uma máquina Linux e realmente tê-lo conectado a um banco de dados e todas essas coisas que são bastante novas. É bastante popular nos dias de hoje, e a coisa boa sobre isso é que você pode escrever uma linguagem de programação no front-end, uma linguagem de programação no back-end, e você pode escrever basicamente qualquer programa que você precisa que precisa estar conectado à Internet. Você tem javascript para baixo pat, e você poderia fazer tantas coisas com ele. Dito isto, quando se trata de linguagens do lado do servidor, ainda não é tão poderoso quanto linguagens como Python Python podem fazer significativamente mais. Por exemplo, muita inteligência artificial AI e ML Machine Learning é escrito em Python. Não está escrito em JavaScript, então é uma breve história sobre JavaScript. Onde é que vai? Ninguém realmente sabe. Eu meio que suspeito que JavaScript vai continuar decolando novamente. É a única linguagem de programação e front lá fora para um site. E assim, à medida que mais e mais pessoas entram online, torna-se cada vez mais popular. Não há escolha. Tem que crescer, e você pode pensar nisso assim. JavaScript é o único filho em uma família, e assim ele recebe toda a atenção. Considerando que quando você fala sobre outras linguagens de programação como C ou Cortland ou Java ou python ou qualquer outra linguagem de programação lá fora, você pode basicamente hot swap a maioria deles. Em certo sentido, você pode escrever um programa inteiro em C. Você também pode escrever o programa inteiro em Python. Onde está você realmente não tem essa escolha quando se trata de desenvolvimento Web front-end. E assim sempre usamos JavaScript. E eu acho que por causa desse JavaScript realmente vai decolar ah, muito mais do que já tem nos próximos anos. 5. Introdução a variáveis: Olá e bem-vindo de volta neste vídeo, vamos falar sobre variáveis. Agora, se você não está muito interessado em matemática, se você não gosta de matemática, talvez você não seja bom em matemática, esteja ouvindo as palavras variáveis e esteja surtando um pouco. Não se preocupe. Na verdade, não é tão complexo quanto parece. Muita gente pensa em variáveis como “Ei, “Ei, vamos estar certos no cálculo. E para ser totalmente honesto, eu, meu sento como minha pessoa. Não sei cálculo, e trabalho com variáveis todos os dias. Centenas, talvez até milhares deles. Variáveis basicamente são apenas uma maneira de armazenar pequenos pedaços de dados em seu computador e depois usá-los mais tarde. Você pode manipulá-los, você pode verificá-los. Você pode instruir seu computador para executar um determinado comando com base em um determinado tipo de variável e o valor que essa variável contém. Então vamos dar uma olhada em como uma variável se parece. E então eu vou apenas criar um site HTML 5 aqui, e você sabe o que? Eu não preciso de todas essas coisas que nos chamam de variáveis muito touros e porque nós não vamos ter nenhum melão HD aqui. Quero dizer, nós colocaríamos isso aqui geralmente, mas não vamos. Vamos apenas escrever um JavaScript básico por enquanto. Então vamos ficar com uma tag de script e aqui embaixo, vamos colocar outra tag de script. E então, quando começamos a falar sobre variáveis, realmente, tudo o que queremos dizer é um pedaço de dados que podemos trocar dentro e fora. E fazemos isso com var. E isso é muito interessante que ele está dizendo template Django. Então, deixe-me mudar rapidamente. Isso é para HTML normal. Lá vamos nós. E assim temos uma declaração VAR. Isso significa Variável e Vier basicamente diz que JavaScript. Só para você saber, estamos prestes a declarar variável e então você dá um nome, então o que você quer que esse nome seja é igual a E então há diferentes maneiras de declarar diferentes tipos de variáveis e nós entraremos nessa hora extra. Então, vamos manter as coisas simples por enquanto. Então eu vou dizer que meu nome é Caleb e vamos fazer isso um pouco maior aqui. Então eu tenho uma variável. Chama-se nome e o valor é Caleb. E assim já sabemos dessa função de alerta. Falaremos muito mais sobre isso na estrada. Se eu simplesmente disse nome de alerta e eu abrir esta página no Google Chrome, você pode realmente ver isso. Só diz Caleb. Isso é tudo o que faz. Se eu quisesse trocar isso a qualquer momento, eu recebo, digamos, digamos, Caleb, Darlene, exceto que eu vou até aqui bater Refresh diz Caleb, dizendo que você poderia até fazer mais do que isso. Então vamos criar outra variável. Vamos chamar-lhe curso. Qual é o curso que estamos tomando atualmente? Agora estamos tomando JavaScript para iniciantes, e você pode ver que ele envolveu em uma nova linha. Isso é realmente OK. É só porque meu telefone é um pouco grande demais aqui. Então por baixo, você poderia dizer curso de alerta e vamos em frente, atualizar nossa página e isso é javascript para iniciantes. E então isso é realmente tudo de variável é agora você pode reatribuir uma conta muito a qualquer momento, então não estamos usando o nome mais. Eu mencionei mais cedo. Colons semi são coisas. Geralmente, isso diz a um computador que hey, este é o fim da linha e o que quer que venha depois disso é uma nova declaração, então, apenas como um exemplo, nós não queremos colocar estes dois na mesma linha como esta, porque se fizermos isso e apertarmos a atualização, não vamos ver nada. Na verdade, você pode realmente clicar com o botão direito, inspecionar e você pode ver que nós temos um erro aqui e vamos abrir nosso cônsul e você pode ver que temos um erro aqui diz algo que é muito difícil de ler. Lá vamos nós. Uncaught, sintaxe, erro, token var inesperado E ele nos diz exatamente onde ele está. Então, se eu clicar nele e diz Linha 11 e me mostrar aqui, então isso é muito legal. Então essa é uma pequena dica profissional de depuração lá para você. E até meus editores dizendo: “ Ei, Ei, algo não está certo aqui. E então o que queremos fazer é geralmente colocamos isso em uma nova linha e colocamos um ponto semi cólon no final. Esta é a maneira mais simples de nos manter, e se clicarmos, atualizar novamente, ele nos alerta como esperado, e não há erro em nosso conselho. E, a propósito, sempre que você encontrar um JavaScript, eles sempre abrirão seu console. Dê uma olhada no que essa área é porque ele pode dizer-lhe como um desenvolvedor javascript. Qual o problema, na verdade, como talvez seja algo que o usuário fez. Talvez seja algo que o desenvolvedor fez. No final deste curso, você será capaz de saber exatamente de quem é a culpa. Normalmente são os desenvolvedores. Eles não implementaram algo corretamente. Certo, então temos o nome da variável e o curso, e estamos apenas alertando isso. Vamos em frente e sobrescrever nossa variável. Agora podemos simplesmente ter. Nosso curso é igual a Python para iniciantes. E como eu digo isso e ir para atualizar esta página, ele vai agora dizer python para iniciantes. E isso funciona. Então basicamente criamos uma variável. Nós não usamos nada. E então nós substituímos a coisa toda com um novo valor aqui Agora, porque esta variável já foi declarada a partir de nossa isto começa a içar uma coisa sobre a qual falaremos mais tarde na estrada. Não precisamos declarar bar de novo. Ele já está lá, então nós realmente só precisa declarar var uma vez em uma variável particular. E depois disso não precisamos mais fazer isso. Então vamos em frente e salvar isso e atualizar as finanças. Python for Beginners Council não reclamou. As coisas estavam bem. Tudo bem. Mais uma coisa que devemos rever é o que se passa com isto. Então você vê essas aspas por aí? Há duas outras maneiras de fazer isso. Então poderíamos fazer, por exemplo, da nossa idade. Quantos anos eu tenho? Bem, eu tenho 30 anos. Poderíamos fazer isso. E se eu alertar a idade e atualizar esta página, ela diz 30. E se eu entrar aqui e digitar a idade, parece que já existe. Também me dá 30. E se eu digitar o curso aqui, ele já existe. Meu navegador entende que há variáveis aqui que são acessíveis ao conselho . E então agora estamos meio que começando a interagir com JavaScript em uma tag de script ou um arquivo Js dot . Se o movermos para um arquivo externo, e aqui podemos acessar algumas dessas variáveis também. Então estamos começando a conectar nosso editor e nosso terminal de navegadores ou o conselho. Então vemos aqui, idade não tem citações em torno dela pode. Pode ter citações em torno dele. Ah, você também pode ver que o semi cólon era basicamente opcional. Eu não precisava, e tudo bem, porque eu estava colocando meu casaco em novas linhas. E JavaScript é inteligente o suficiente nos dias de hoje para entender que, para uma boa prática, vamos avançar com aquele cínico lá dentro e atualizar nossa página, e ainda diz que 30 não parece diferente. Mas se eu digitar a idade aqui, você pode ver que tem as citações em torno dele. Esta é uma diferença fundamental entre diferentes tipos de variáveis. Vamos falar sobre isso no caminho, mas é importante ter a ideia agora mesmo. Essa é uma variável que é chamada de variável, uma variável ações chamada var var um. Qualquer coisa que tenha uma frase ou espaços nela. Qualquer tipo de espaço é como o que você vê aqui que precisa estar entre citações, então não podemos simplesmente colocar 30 30 30 30 30 30 com espaços lá e alerta do nosso. Isso vai nos dar um erro. Lá vamos nós. Número inesperado, mas se colocarmos citações em torno dele, dar uma atualização? Funciona. Então, neste ponto, você deve estar um pouco confuso se você é novo em javascript sobre o que tudo isso trata. Então, quando usamos aspas, isso é chamado de string. Então esta é uma string, e este é um tipo de variável que basicamente diz, Ei, esta é uma frase E então nós temos Vamos salvar nossos dois aqui é igual a apenas o número 30 ou qualquer número ou 30,5, Algo assim. E isso é chamado de número. Ou em outras linguagens de programação. Às vezes é chamado de inteiro. Na verdade, neste caso, seria flutuante. Mas isso não é nem aqui nem ali. Neste momento, vamos entrar nisso um pouco abaixo da estrada. E JavaScript realmente resume isso bem é e eles dizem, como nós não nos importamos se ele tem um ponto decimal ou não. Nós só nos importamos. É um número? Não é um número? E então, quando você está lidando estritamente com um número, você não precisa de citações em torno dele. Não há espaços lá dentro. Você só tem números e pontos decimais, e é isso. Sem vírgulas, sem cifrões nada assim. São simplesmente números e um período. Então, agora, se eu for em frente e disser, vamos alertar para longe, também. E o que eu quero fazer aqui é me livrar deles. Atualize nossa página. Vai dizer 30,5, e aqui. Se eu digitar muito, você pode ver 30,5 não tem aspas ao redor. Vamos fazer que maior não tenha aspas em torno dele. Mas var um faz. E isso é porque esta é uma corda e longe, também, é um número. Então, por que isso é importante agora? Ótima pergunta. Bem, como estamos aprendendo JavaScript agora, não é importante para nós. Mas isso se tornará importante para nós muito, muito em breve. E eu acho que quanto mais cedo as pessoas entendem esse tipo de diferença em um tipo variável, melhor sua programação será no final da estrada. Então isso é tudo o que realmente há para este vídeo em particular no próximo. Vamos em frente e começar a assassinar algumas variáveis juntas para que você possa realmente ver como uma variável deve funcionar, porque agora essas variáveis e eu quero dizer que estamos duramente revesti-las, então elas não são realmente variáveis estavam apenas dizendo, Ei, atribuir cursos iguais a JavaScript para iniciantes e, em seguida, substituí-lo imediatamente. Então isso não adianta. A variável precisa ser algo que possa mudar. E, ei, se você não entende totalmente todo esse vídeo, não se preocupe com isso. Mova-se para o próximo de qualquer maneira, e eventualmente isso tudo irá apenas clicar no lugar. Torna-se muito mais fácil uma vez que realmente começamos a escrever mais JavaScript juntos. 6. Combater variáveis: Olá, End. Bem-vinda de volta. Na última lição, aprendemos um pouco sobre variáveis. Neste último, vamos aprender como podemos fundi-los juntos. Não, mesclar variáveis como combinar frases, é chamado de Concoct uma nação. Vê essa palavra aqui? Concatenação. Muitas vezes você vai vê-lo assim como a palavra vem gato também. Por que se chama “Nação Gata”? Eu não sei. Poderíamos ligar para emergir. Mas hey, desenvolvedores gostam de suas palavras extravagantes. Então, chamamos-lhe concatenação. Agora neste vídeo, eu vou realmente fazer a maior parte disso no console. Então eu vou para o console e vamos em frente e fazer o cromo maior porque nós podemos. E assim à minha esquerda, eu só tenho ah, mesclando variáveis que HTML abrem. É só o código-fonte aqui. Atualmente não há nada lá, nenhum JavaScript, e parece uma página em branco, e temos um terminal aqui. Então eu poderia dizer alerta. Oi, e isso vai funcionar. Vamos ir em frente e limpar este conselho claro e vamos criar um par de variáveis juntos e então gato pode precisar delas? Então vamos criar uma era e uma introdução a quem eu sou. Então, digamos que Var intra era igual a Oi, meu nome é Caleb, e eu sou algo algo, algo de anos de idade. Então esta é a minha introdução. E se eu digitar isso você pode ver que ele apenas cospe exatamente o que eu já tinha escrito. Agora, se eu digitar de nossa idade é igual a 30 tipo e idade novamente, podemos ver que a idade não tem citações em torno dela. Então sabemos que é na verdade um número, e queremos injetar esse número aqui. Então, como vamos fazer isso? Bem, nós meio que fomos sobre isso ao contrário porque nós definimos isso. Primeiro, definimos a introdução primeiro, e depois definimos a idade deles. Mas adivinha? Nós podemos sobrescrever variáveis para que possamos dizer introdução, e ele nos diz o que a introdução é já é igual ao invés de apenas ter este espaço em branco aqui. O que eu posso fazer é que eu posso realmente sair da frase colocando outra aspas lá, colocar um sinal de mais, e então a variável, outro sinal de mais e, em seguida, uma citação. E existem diferentes maneiras de fazer isso e javascript mais moderno. Mas vais ver isto por todo o lado. Vamos aprender assim primeiro. Então, basicamente, isso está dizendo: “ Ei, Ei, introdução, você já está desafiando, então não precisamos usar o dedo do pé. VAR diz oi, meu nome é Calvo. bom e velho Calvo tabl e in. Meu nome é Caleb e eu sou, e então ele desiste da frase e diz: “ Ei, Ei, também adicione a idade na sua, seja lá qual for esse valor. Coloque aí e então Oh, hey, comece a frase novamente com outro sinal de mais e depois outra citação e coloque o resto da frase lá dentro. Então, se entrarmos, podemos ver Hi, meu nome é Caleb e tenho 30 anos, e honestamente, isso é tudo o que há para inventar a nação. Agora o problema entra quando você tenta inventar números do Nate. Então, se eu criar outra variável chamada, uh, número dois, eu acho, e nós vamos fazer que 40.123 nós podemos ver aqui Numb a é igual a 40.123 Agora o que acontece se eu quiser dizer 30 40.123 Então o número deve olhar 3040.123 Como é que vamos poder Gabinete isso? Isso é mais complicado porque esses números de ar e quando você faz um sinal de mais com números na maioria das linguagens de programação, ele simplesmente adiciona os números juntos, e isso não é o que queremos. Então, se fizemos idade mais entorpecido para olhar para isso, ele nos dá um número que não queremos 70.12 a 99999 Esta é uma coisinha engraçada em ciência da computação onde não há realmente nenhum número de buraco em JavaScript ocasionalmente corre para Este é Na verdade, um exemplo muito legal. Mas em vez de dizer 70.123 diz 70.12 a 99. Nn nn Nn e Infinito, infinito e assim por diante. Mas isso não é o que queremos. Então, como fundimos estes juntos? O que? Podemos fazer isso contaminando uma corda aqui. Então, lembras-te da última lição? Cordas e números do lado direito são um pouco diferentes. É importante saber. Bem, já precisamos saber a diferença aqui para que possamos fazer isso e sempre disse foi, Ei, Ei, pegue o número 30 adicionado a uma string vazia e frase vazia e, em seguida, adicione o segundo número a ele. Então, se apertarmos enter, podemos ver que isso não é mais um número. Esta é uma string e podemos dizer-lhe para string porque ele tem aspas em torno dele. E então isso está dizendo que esta é uma cadeia de 3040.123 Também note como ele diz 0.123 e não 1 a 29999999 é porque não é um número. O computador não tem que trabalhar um número arredondado como esse. Só tem que dizer, Oh, isso é uma corda. Então, sim, eu entendo que há números aqui, mas nós não temos que fazer um monte de coisas de matemática nos bastidores para fazer isso funcionar. Isto é como se fossem letras inglesas regulares. Negus não tem que ser letras inglesas. Pode ser qualquer letra. Realmente? Ah, mas sim, só a diferença entre letras e números aqui. E então este agora pensa que estes ar são basicamente letras em vez de números. Então vamos em frente e adicionar uma frase com dois gatos. Então vamos dizer ah do nosso gato. O nome dele vai ser Zephyr. É que para e do nosso gato dois é igual a Henry. Então estes são os meus dois gatos. A propósito, você vai ver isso indefinido. Sempre que usar Vyron, isso entra em içar. Este é um recurso JavaScript mais complicado para tipo de abordar Agora, vamos lidar com isso um pouco mais tarde. Mas se você vê indefinido assim, não se preocupe. Nada está errado. É apenas uma espécie de JavaScript longe de registrar uma variável e, em seguida, registrar o valor da variável. Chama-se içar novamente. Vamos entrar nisso no futuro. E então agora eu quero dizer, var frase é igual a eu tenho dois gatos e o primeiro 1 vai ser gato um. E o 2º 1 vai ser gato também, e podemos deixar aqui assim. E então o que estamos dizendo aqui é: “Ei, eu tenho uma frase. Mas eu também quero colocar a variável de gato um lá, então o que quer que seja, acontece que é Zephyr. Mas pode ser qualquer outro nome no mundo. E talvez tenha sido escrito mais de 100 vezes. Nós não sabemos. Seja qual for o resultado final, vamos colocá-lo aqui, e então vamos contaminar outro pedaço da frase, apenas o fim da palavra. E então, usando o sinal de mais, vamos inventar Nate Henry. Nós somos apenas gatos, também, então vamos em frente e datilografar e você pode ver que eu tenho dois gatos, Zephyr e Henry. Além disso, poderíamos realmente nos aprofundar ainda mais neste assunto. Poderíamos ser da nossa idade um. Então, digamos que Age of Cat One vai ser quatro e da nossa idade dois. Isso é gato para qualquer idade que vai ser. Sabemos que é o Henry. Sei que a idade dele também é , então temos um gato de quatro anos e um gato de dois anos. Agora nós queremos realmente pode capitão oito em outra lata de cafeinado sentença já assim sentença já foi definida, e como você pode ver, eu posso levar isso para o meu console e ele me diz, tipo de desbotada texto fora. Tenho dois gatos, Zephyr e Henry. Vamos dizer que a sentença é igual a sentença mais, então vai pegar esse valor, e vamos precisar de algo além disso? Então nós queremos colocar ah, ponto final aqui e digamos que eles são algo de anos de idade, então algo e algo de idade, então quatro para isso é o que queremos entrar aqui. Então está sempre me ajudando quando eu estava aprendendo a inventar. Nate é apenas colocado como sublinhados lá. E então você pode simplesmente fazer o seu tipo de concatenação engraçado de estilo aqui, onde você tem cotação de fechamento mais sinal e então aqui nós poderíamos colocar uma idade de um sinal mais cotação e você pode ver que é uma ordem oposta. Então vai citação mais sinal, e então voltar para você fazer mais eu em citação, e nós vamos fazer a mesma coisa aqui. E isso é só para eu ter dois anos de idade e vamos em frente e bater. Entrar. Ah, e a propósito, podemos colocar ponto-e-vírgula no final disso. Mas não precisamos necessariamente porque nosso cônsul ou cromo neste caso sabe que cada comando é seu próprio comando, então não precisamos fazer isso como ponto e vírgula. Mas, novamente, é apenas uma boa prática para entrar. À medida que o Javascript fica mais velho, usamos ponto e vírgula muito menos e legal. Você provavelmente estava gritando na tela dizendo, Caleb, idade para não existe. Chama-se idade 1. Você pode ver isso aqui. Eu não chamei isso de dois anos. Acabei de chamar de juiz. E então vamos em frente e refazer isso. Nós também poderíamos apenas redefinir ou apenas definir uma variável chamada Idade Dois, e isso iria corrigi-lo. Vamos em frente e nos mudar para a idade. E lá vamos nós. E agora diz que tenho dois gatos, Zephyr e Henry, e eles têm quatro e dois anos de idade. E então, se eu ir em frente e limpar isso e tomar a sentença novamente para tornar isso maior, eu tenho dois gatos cujo F 100 eles têm quatro anos de idade. Então eu estou envelhecendo aqui. Sabemos que dois anos, temos idade um é porque sabemos que temos um gato um. Temos o Cat 2 e depois temos a sentença. Então nós fizemos um monte de declarações de variáveis aqui. Nós definimos variáveis e nós as fundimos em uma frase. E então emergimos nessa frase mais uma vez. Então isso é basicamente tudo o que há para inventar a nação. Agora, você vai ver isso em todo lugar porque javascript é uma linguagem onde você pode modificar sua página da Web, seu HTML e até mesmo seu CSS, e você vai querer eventualmente pegar uma variável e substituir algum texto em sua página com qualquer que seja o valor da variável vai ser. E assim é assim que podemos fazer a Nação Cat. Agora, se você está interessado em dar uma chance, você pode fazer exatamente o que eu fiz nesta variável e apenas dizer, “ Ei, meu nome é qualquer que seja seu nome. Eu tenho um gato ou um cão ou eu tenho quantos livros você tem? Talvez você tenha 1000 livros e possa fazer algo assim. É sempre bom entrar lá e nos dar uma chance. Não se esqueça. Se alguma vez tiveres perguntas, estou aqui para te ajudar. Você sempre pode deixar um comentário ou uma pergunta abaixo 7. Logging em console: Ok, bem-vindo de volta. Na última lição, falámos sobre o Livro e a Nação dos Gatos. E esta lição que vamos falar sobre a nação não descontada. Nós realmente vamos olhar para uma maneira melhor de imprimir variáveis para o nosso cônsul em vez de usar alerta. Então, até agora, temos dito teste de alerta e, em seguida, quando atualizamos nossa página, ele apenas nos irrita com isso. E toda vez que atualizamos, isso nos irrita com isso. E você sabe, no início, quando você está iniciando JavaScript, isso não é grande coisa. Mas você realmente não vê essa funcionalidade na natureza. As pessoas já não usam alertas com muita frequência. A não ser que seja como, oh, você começou a escrever um post e então você apertou o botão Voltar. Você tem certeza? Porque, tipo, você realmente quer ir embora? Isso é uma coisa totalmente diferente, na verdade. Apenas parece a mesma coisa. Então aqui, o que queremos fazer é registrar algo para nosso cônsul aqui. E assim, qualquer javascript re nós bem aqui, qualquer coisa. Pode ser literalmente qualquer coisa. Nós só queremos colocá-lo no console que podemos ver o que é, e esta é uma maneira muito, muito útil de depurar seu JavaScript. Então vamos em frente e criar uma variável. E vou colocar o meu nome é Caleb Tallinn e da nossa profissão. Sou professor de profissão. Sim, na verdade é inteiramente verdade. Também desenvolvedor Web, Então professor e desenvolvedor Web. E vamos nos livrar desse alerta. E digamos que você só tem que colocar seu chapéu de imaginação aqui por um segundo. Mas digamos que temos 10.000 linhas de JavaScript e não sabemos qual é o valor do nome atualmente. E então temos uma cidade de código, e o que vamos fazer é fingir que está aqui em algum lugar, e não podemos acessar facilmente, mas queremos ver o que é. Então, sim, poderíamos fazer o nome do alerta, e quando eu for aqui, ele vai me dizer o que é. Mas isso é irritante. E se acontecer de você estar em um loop, falaremos sobre loops mais tarde. Isso pode ser executado por 100 mil gerações. Ele só vai continuar alertando você um pouco mais e mais e mais e mais e mais e mais. Seu navegador pode até travar com ele. Quem sabe? Não é uma boa maneira de viver sua vida. Uma maneira melhor de viver sua vida como vamos entrar aqui e digamos, Cônsul Dot Log. E então poderíamos colocar o que quisermos aqui. Então vamos dizer nome e, em seguida, uma vírgula e vamos colocar a variável nome no ano para que é realmente colocar o nome Colon e assim você pode ver isso é uma string e esta é uma variável. Vamos atualizar sua página aqui, e eu vou ter que fazer isso um pouco menor. Obrigado. Então podemos ver o nome Caleb Tallinn, e ele é executado online. 29 do arquivo chamado 60 Underscore console sublinhado log dot html E se eu clicar nele, ele vai me dizer exatamente onde isso está sendo executado. Esta é uma ótima maneira de depurar seu código. Na verdade, esta é apenas uma boa maneira de descobrir o que está acontecendo em código. Em geral, vamos em frente e digitar profissão aqui e novamente. Acabei de adicionar uma vírgula e podemos ver aqui. Ele diz. Meu nome é Caleb Tallinn e professor e desenvolvedor Web é minha profissão tão progredindo? Provavelmente vamos usar o log do console com mais frequência do que vamos usar. Alerta Alerta é apenas um pouco detestável, e é uma droga tipo de ter que clicar nele o tempo todo. E é como, Ei, Ei, aqui está o alerta. Ok, aqui está outro clique de alerta. OK, aqui está outro alerta clique OK, e apenas ele fica um pouco de manana como um pouco demais, especialmente quando você começa a escrever mais e mais código. E o lado bom disso é que quando você está escrevendo código que vai em um site ativo, ele só vai aparecer em seu console. Então, se eu me livrar deste conselho aqui e me atualizar, nada acontece. Lisa parece que não está acontecendo nada. Mas se eu clicar com o botão direito, inspecionar, entrar em meu conselho, isso continua acontecendo. E assim realmente só um desenvolvedor nunca vai ver isso. Então, se você estiver testando algo em produção em um site ao vivo, você sempre pode usar esse método. Agora há alguns outros que você pode usar para que possamos fazer advertência ponto console, perigo estranho que foi para minúsculas e eu quero maiúsculas Ah, este vai amarelo aviso. Perigo estranho. E nós também poderíamos fazer. Cônsul, vamos fazer com que o conselho minúsculo erro de ponto de erro, e vamos apenas acelerar isso uma e outra vez. E como estão todas em suas novas linhas, eles não precisam de um ponto-e-vírgula. Mas vamos jogá-lo lá de qualquer maneira. E agora vamos ver um aviso, um registro regular do console e um erro. E aí está. Temos um aviso. Perigo estranho. Meu nome é Caleb, chamando-o de professor, desenvolvedor da Web, e também erro, erro, erro, erro, erro e também as respectivas linhas que estão ocorrendo on-line. 28 9 29 e linha 30. Então essa é uma maneira melhor de viver. Sua vida útil do JavaScript é usar o log do console. Você não vai usar o erro do Conselho de Guerra do console com muita frequência. Geralmente, usamos apenas o log do console. Agora, se você vem de outra linguagem de programação, isso é muito semelhante à função de impressão. Então, se você usar Python, por exemplo, isso é como impressão. Se você vem de um enorme fundo P, é como dizer eco algo e a maneira Javascript é simplesmente rejeitada. Ele fez. Ah, Cônsul Dot Log. Então, novamente avançando, vamos usar o log do console muito mais, então você vai querer ter certeza de que você sabe como abrir o Cônsul em sua página novamente. É o clique direito dele. Inspecione bem. Geralmente abra seus elementos primeiro, e você só terá que clicar. Cônsul. Às vezes você tem que entrar aqui e clicar em Cônsul, dependendo do tamanho da sua tela. Ah, mas há sempre uma guia de cônsul lá, e você sempre pode abrir isso e ver o que o código está fazendo se ele estiver dando algum aviso, registro ou erro. 8. Como selecionar elementos de HTML: Olá e bem-vindo de volta nesta lição. Nós vamos entrar em algumas das razões reais por que estamos aprendendo JavaScript e que é para modificar elementos HTML. E então a primeira coisa que queremos fazer é criar uma tag de script. Precisamos sempre que o guião esteja acima do corpo. propósito, A propósito,a razão pela qual está acima do corpo e não na cabeça dela. Bem, costumávamos colocar javascript na cabeça, mas agora colocamos javascript na parte inferior da página dela para que todo o leite HD extra descarregasse. Primeiro nós colocá-lo na parte inferior da página para que, por exemplo, se temos e h um aqui Olá mundo e nós apenas atualizar sua página, vemos Olá mundo. E basicamente, se vamos usar qualquer elemento e JavaScript, isso precisa existir primeiro. O HTML precisa estar lá antes que o JavaScript seja carregado. E em alguns casos, se você colocar javascript acima disso, o javascript será carregado. Em seguida, ele tentará procurar um H chamado Hello World ou tem um texto Olá mundo nele e ele não vai encontrá-lo porque ele não foi carregado. E, sim, uma linha pode fazer a diferença. Então, na maioria das linguagens de programação, geralmente um programa é executado de cima para baixo. JavaScript não é diferente. Ele corre de cima para baixo. E então vamos colocar o “Olá Mundo” aqui. Ah, e vamos dar a isso um I d. Então este é apenas um HTML básico e eu tenho um curso HTML se você precisar de um pequeno atualizador HTML rápido chamado o desenvolvedor de HTML final. E então vamos dar um teste a isto. Agora. Quando nos salvarmos e nos refrescarmos, isso não vai fazer nada. Não vai fazer nada por nós. E então o que precisamos fazer é aprender a selecionar esse elemento e depois ser capaz de modificá-lo um pouco. E assim JavaScript é amplamente conhecido por trabalhar com HTML e X html markup basicamente qualquer coisa que tenha tags como esta. JavaScript é muito bom em trabalhar com, quase como se tivesse sido projetado para funcionar dessa maneira. Portanto, há muitas maneiras diferentes de selecionar um elementos HTML ou um grupo de elementos ou como todos os H em uma página. Mas não vamos fazer isso. Nós só vamos ficar com algo básico chamado get element by I D. E assim que se parece com isso. Isso é Ah, mova isso para cima. Documentos ponto obter elemento por i d. e então nós apenas colocar a idéia aqui, e então este i d corresponde teste, e isso é lá em cima. E se nos salvarmos de novo, não veremos nada acontecer. Não importa quantas vezes você atualiza tudo o que está fazendo é pegar essa nota de elemento. Então isso é chamado de nó. Precisamos realmente armazenar isso em uma variável. Então vamos em frente e colocar isso em uma variável chamada teste. E novamente, se atualizarmos sua página, nada vai acontecer. Mas o que acontece se entrarmos no teste do tipo consulado? , Olha só, diz H. Um com uma ideia de testes. E na verdade está selecionando para nós. Olhe para isso. Então mudou-se para baixo. Nada se move para cima, e ele selecionou para nós. Agora podemos fazer coisas. Então, se tivéssemos ponto podemos ver todos os tipos de coisas diferentes aqui e é aqui que o JavaScript começa a ser. Um mundo muito, muito grande. Há tantas coisas na verdade, até agora estamos olhando para ouvintes de eventos, mais ouvintes de eventos, mais ouvintes de eventos, mais ouvintes de eventos. E continua indo e indo e indo. Podemos mudar este estilo. Podemos mudar a etiqueta de título. Se quiséssemos animá-lo, poderíamos dar-lhe um nome de classe ou remover um nome de classe. Podíamos fazer todo o tipo de coisas aqui. Mas vamos em frente e descobrir o que o Texas e isso é apenas texto interno ponto e isso só vai nos dar o imposto. Também podemos fazer isso com HTML. Fazemos ponto HTML interno e assim podemos ver que isso agora diz olá mundo, sabendo que agora podemos entrar aqui e dizer ponto de teste inter html e isso é se quisermos escrever HTML para que possamos dizer, uh, fazer um subjacente Embora isso seja depreciativo. Vamos fazer uma tomada subjacente de qualquer maneira já que dois quão baixo cortar seu mundo e vamos em frente e nos salvar e ver o que acontece. Maldito! Olhe para isso. Ele sublinhou isso para nós. Mas se formos e realmente visualizar a fonte da página, não há sublinhado. Isso é tudo. JavaScript. Então, o que Javascript fez foi dito: “Ei, “Ei, agarre esse nó. Pegue este elemento H um, este aqui e altere o html Inter. Agora o que poderíamos fazer é armazenar as coisas antigas, também, então poderíamos dizer que o html Inter vai ser alto. Bem-vindo aos iniciantes do piso JavaScript, mas vamos em frente e armazenar as coisas antigas. Vamos fazer o nosso texto antigo. Vamos fazer esse caso camelo é igual ao ponto de teste inter html, e isso só vai pegar que inter HTML e armazená-lo em uma variável e será capaz de acessá-lo através de um console. Então vamos em frente e salvar isso. Olá, Bem-vindo ao JavaScript para iniciantes. E se tentarmos acessar esse boliche aqui chamado texto antigo, devemos ser capazes de escrever. Vamos fazer isso maior. Bem, eu d ah, olá. Lá está ele. Essa é a coisa velha. Armazenamos o material antigo em uma variável antes de mudá-lo. E agora podemos realmente mudá-lo de volta também, porque ainda temos acesso para testar como um nó. Vamos em frente e mudar o texto interno para o texto antigo. E agora estamos usando variáveis de forma bastante eficiente neste ponto. E ao mesmo tempo, nós também estamos pegando todos esses elementos HTML este nó e nós estamos dizendo, Ei, sim, eu entendo que você queria dizer olá, mundo, mas, hey, quando a página carrega e contra o JavaScript realmente trabalhar alguma magia e mudá-lo para nós, isso é o que Javascript fez para nós. Agora, novamente, há um monte de coisas diferentes que podemos fazer em um nó HTML, então nós poderíamos digitar o ponto hit de teste e então nós poderíamos literalmente apenas percorrer isso por dias e dias e dias e dias e dias e dias. E você pode ver que esta lista continua e continua e sobre ele. E assim JavaScript é um mundo realmente grande em tudo. Honestamente, nós não vamos aprender sobre cada coisa aqui porque nós vamos ficar aqui por muito, muito tempo. Minha metodologia de ensino é ensinar você a aprender de forma eficiente para que, se você estiver trabalhando em uma empresa e eles estão usando algo chamado rolar para Bem, você sabe como acessar rolar para e você sabe como descobrir o que é isso. Mesmo que não aprendamos neste curso agora, vamos aprender muito neste curso. Mas não há nenhuma maneira possível de aprendermos tudo. Então o que eu gostaria que você fizesse como, ah, pequeno teste um pouco, um pouco de mãos na experiência criando novo arquivo html e apenas criar qualquer tag Não tem que estar em uma igreja. Um dá-lhe um ni de alguma coisa. Não importa o que essas ideias, desde que corresponda a este valor aqui. Não este. Este é o nome da nossa variável. Mas este aqui e este aqui precisam corresponder. Então criar esse elemento e, em seguida, selecione o nó com elemento get por I d Lembre-se, usamos documentos ponto obter elementos por idéia. Vamos falar mais sobre o que esse ponto significa na estrada quando entrarmos em javascript mais avançado e depois mudar o html interno, talvez dar sublinhado, talvez itálico, talvez torná-lo ousado. Você faz qualquer coisa que você gosta do que você escreve qualquer HTML que você quer lá, contanto que você use inter html. E se você está apenas indo para mudar o inter tax, você sempre pode apenas fazer texto interno. E então seu navegador não precisa analisar e processar um monte de JavaScript ou não JavaScript html. Poderia apenas fazer texto regular, o que é na verdade muito mais eficiente. Vá em frente, dê uma chance. Se você ficar preso, deixe uma pergunta abaixo e eu fico feliz em ajudá-lo. Caso contrário, vamos para a próxima lição. 9. Uma maneira de compartilhar o código: Ok, vamos falar sobre uma maneira de você compartilhar seu código. Isso é relativamente simples. Então, se você não usar se você não sabe que eu entendo ou pego Hub é que eu não vou forçar isso em você agora. É bom saber, mas agora, se você não sabe disso, apenas saiba que há uma maneira melhor de compartilhar HTML CSS e JavaScript, e que é na forma de caneta de código. Então, se você vai para o código caneta ponto io e você pode clicar de botão, isso tem apenas começar a revestimento. E realmente, tudo isso vai fazer para nós é criar três seções onde temos HTML, CSS e JavaScript, e podemos literalmente corrigir qualquer CSS HTML e JavaScript em seu que queremos. E então podemos salvar todo esse código, e então podemos compartilhá-lo com outra pessoa para que ela possa ver o código também. Então vamos em frente, e eu vou colocar cada um aqui e dizer Oi, meu nome é Caleb, e o que eu realmente vou fazer é eu vou JavaScript isso um pouco, mas I D Span é igual ao nome, então html não parece nenhum Diferente. Ah, o CSS. Vamos mudar a extensão. Vamos mudar essa extensão para ter uma decoração de texto subjacente E no JavaScript vamos em frente e selecionar o nome como um I d e mudá-lo. Vamos criar variável. Vamos chamar-lhe Nome é igual ao documento ponto Get, na verdade, vamos mudar a visão dele. Eu realmente não gosto desta vista. Vamos fazer, sim, este aqui é um pouco melhor, e também podemos fazer isso um pouco melhor, mas não precisamos mais ver os Cs. Ok, isso parece um pouco melhor. Sim. Lá vamos nós. Ok. Documento. Não pegue o elemento por i d. É caso de camelo. Então cada palavra que não é a primeira palavra tem uma letra maiúscula. Queremos obter um nome que corresponda a essa idéia aqui nome ponto texto interno é igual a e digamos que isso foi seqüestrado pelo meu gato chamado Zephyr. E vamos dar um cofre a isto. E Ono está me pedindo para entrar. Você pode fazer login totalmente criando contagem. É completamente grátis. Ok, então eu acabei de entrar, e aqui vamos nós. Nós só queremos mudar o texto para salvarmos e você pode ver no meu L diz código caneta ponto io slash Caleb Holley e caneta e então algum hash, e você pode realmente copiar e colar o código inteiro para outra pessoa. Então, se eu abrir isso em uma nova guia, ele vai salvar todo o meu código aqui. Isso é muito legal. E então essa é uma ótima maneira de compartilhar seu código. Você também pode alterá-lo. Então o nome mudou pelo meu gato. E quando um refrescante aqui, ele também mudou o nome Lá, lá está ele. Agora, se em algum momento você estiver trabalhando com Direito Cônsul, você também pode simplesmente abrir o Cônsul aqui. E você poderia contar log realmente qualquer coisa que você quiser para que pudéssemos fazer con tão novo teste de log de pontos console , e ele aparece em sua legal para que você possa coletar salvar em qualquer momento no tempo. Você pode até pegar o código de alguém e transferi-lo, que significa, basicamente, você vai criar uma cópia em sua conta do código dele para que ele não mude seu código tudo, mas ele é salvo em sua conta e você pode como ele e você faz todo tipo de coisas. Você muda sua visão, mas acima de tudo você pode tomar que você é l. e você pode copiar e colar. São dois amigos. Você pode fazer uma pergunta com uma garota com seu código de exemplo aqui como um Caleb. Por que isso não funciona? E você poderia colocar todo o seu código lá. Essa é uma ótima maneira de compartilhar código e pedir feedback e pedir ajuda. E por último, quando você está criando um projeto, se você quiser, você sempre pode usar a caneta de código e apenas compartilhar a tela final. Você pode fazer uma captura de tela da tela final e compartilhar a caneta de código que você conde em seu projeto de compartilhamento de habilidades. Claro, se você não quiser usar a caneta de código, se você não quiser criar uma conta, você não precisa. Você pode continuar a usar arquivos HTML e arquivos JavaScript e tirar capturas de tela. Tudo bem, só de novo. Não se esqueça, você sempre pode compartilhar seu projeto com o resto do grupo e, o mais importante, comigo. Vou dar uma olhada em seu código e seu produto final, e você sabe Se você quiser qualquer feedback, eu também posso dar-lhe feedback. Mas você tem que fazer esse projeto em compartilhar habilidades primeiro e seguir em frente. É definitivamente uma boa idéia colocar qualquer um dos códigos que você está escrevendo aqui. Ah, em um projeto de compartilhamento de habilidades para que eu possa realmente dar feedback sobre ele. Eu não vou usar caneta de código muito durante todo o resto deste curso. Eu só pensei que esta seria uma ótima maneira de mostrar como você pode compartilhar seu código de uma maneira agradável e limpa. 10. Mini Mini Projete 1: Certo, vamos dar uma olhada no nosso primeiro mini projeto. É hora de começar a colocar algumas das coisas que temos aprendido a praticar, porque que melhor maneira de obter as mãos na experiência do que experimentá-la? Então, aprendemos um pouco até agora, e vamos usar apenas algumas das peças que aprendemos. E o que queremos fazer é que queremos neste mini projeto, inventar uma string e uma variável juntos. E então eu quero que você saída essa string para a página da variável final. Quero que você envie isso para a página selecionando um elemento e alterando o HTML interno. Então vamos ah, vamos escrever isso rapidamente. Número um. Crie um script. Você pode pegar uma string e uma variável juntos Número dois, usando ponto inter html e obter elemento por I d. Alterar o html interno de um elemento para ser o que sua variável é. Então é isso mesmo. Não parece muito no início, mas você ia fazer isso uma e outra e outra vez em sua carreira de desenvolvimento na Web . E então este é realmente, muito bom treino logo fora do punho. Agora, se você quiser ver a solução, continue assistindo esse vídeo e eu vou te mostrar exatamente como eu faço. Caso contrário, se você quiser dar uma chance, agora é a hora de pausar o vídeo e tentar fazer isso por conta própria, que eu peço fortemente que você faça. Definitivamente tente fazer isso sozinho primeiro. Mas quer saber? Se você não sente confiança em fazer tudo isso ainda. Ei, tudo bem. Você pode assistir a minha solução, e então você pode dar uma chance depois, se quiser. Então eu vou criar um H aqui. Apenas um texto grande, e eu vou dizer que meu gato favorito é e então aqui, eu vou colocar uma extensão de nome de gato, tem uma idéia de nome de gato, e vai começar com o nome Zephyr. E quando eu atualizar minha página aqui, você pode ver que meu gato favorito é esforço. Agora, o que eu quero fazer é trocar o esforço dele por outra coisa. Agora eu vou tomar um caminho um pouco mais complicado aqui, e eu tenho que começar com o meu roteiro, certo? Então eu vou começar com uma tag de abertura e fechamento, e eu preciso selecionar o nome do gato. Então nome do gato variável é igual a documentos ponto Get elemento por ID ID nome do gato. E se eu salvar e atualizar, você verá. Ei, não aconteceu nada. Isso é esperado. Tudo o que fizemos foi colocar uma nota em uma variável. E se fizermos isso, se digitarmos o nome do gato, você pode realmente ver que ele está sendo selecionado anos. Então vamos dobradiças. Nome do gato e está apenas selecionando Zephyr. É isso. Agora o objetivo é basicamente pegar uma corda e Katyn pode oito para essa corda. Então vamos em frente e realmente fazer é um método um pouco mais complicado. E vamos chamar essa variável chamada Zephyr, e vamos obter o nome do gato ponto texto interno. E se fizermos o registro de pontos cônsul é sempre e atualizar nossa página aqui diz esforço exatamente assim . Bem ali dentro. É um pouco mole, mas hey, mas hey, tudo bem porque isso é apenas para depuração de qualquer maneira, então nós temos seu esforço lá, e esse é o texto atual. Esse é o texto interno atual. Mas para este mini-projeto queremos inventar. Precisa de uma string e uma variável. Então temos um grande bullying aqui. Então, vamos a Cat nomear a corda para ele. Então vamos realmente mudar-nos. Vamos substituí-la. Vamos fazer Zephyr é igual a Zephyr e vamos cum gabinete uma corda para ele. Então vai dizer que meu gato favorito é Zephyr é igual a Zephyr, seja lá o que for atualmente. Então acontece que é este texto aqui e Henry agora esta frase não vai fazer sentido, porque eu sou plural. Izando isso. Mas está tudo bem. Não temos que fazer sentido agora. Só precisamos fazer isso funcionar. E então vamos em frente e digite o nome do gato no texto interno do ponto ou HTML interno é igual a sofrer, e assim isso fica um pouco confuso. Mas vamos nos dar refrescante diz que meu gato favorito é sempre e Henry agora, na verdade, uma maneira melhor de fazer isso não é necessariamente sobrepor isso. Isso foi apenas um exemplo. Nós provavelmente iria querer nova variável para este chamado gatos, e nós iria mudar nós dois gatos também. Então vamos criar uma nova variável chamada “O que quer que os esforços tenham o seu nome Plus e Henry”. Então, se trabalharmos de trás para frente, temos gatos é igual a Zephyr. O que sempre zephyrs é igual ao gato chamado texto interno? Bem, isso é usar uma variável chamada nome do gato. Sabemos que é esse elemento aqui em cima e recebendo esse inter texto. Então sabemos que Zephyr é basicamente esse valor aqui. Isso é praticamente o que é. Na verdade, isso é exatamente o que é. Então é como dizer Zephyr, Katyn, oito e Henry. E quando você os junta , fica assim. E então é isso que em seus e-mails H e vai ser, seu HTML interno agora vai ser um Zephyr e Henry. E então é assim que funciona. E se você precisar substituir variáveis por duros revestidos como cordas ou outros valores, tudo bem. Honestamente, o que quer que te ajude a aprender isto à tua maneira, está tudo bem, então vamos em frente e salvar-nos. Refresque. E podemos ver que o nome do gato ainda está aqui Nome do gato e seus gostos de tudo isso legal e é assim que o substituímos. Agora. Se quiséssemos verificar isso duas vezes, poderíamos sempre visualizar o código da página. E, em nossa opinião, fontes de página dizem, meu gato favorito é Zephyr. No entanto, quando você realmente vê-lo com JavaScript habilitado, ele diz, meu gato favorito é sempre e Henry. Certo, então é assim que faríamos isso. Não se esqueça, você sempre pode criar uma caneta de código e compartilhá-la no compartilhamento de habilidades em seu projeto. Ou você pode simplesmente pegar todo o seu código. Você pode copiá-lo e colá-lo lá dentro. Você poderia fazer uma captura de tela de como isso funciona. Você pode tipo de fazer, ah, estúdio visual à esquerda e, em seguida, a saída final à direita. Você pode tirar uma foto de tela grande disso e apenas dizer isso no seu projeto, e eu posso dar uma olhada nele e dar-lhe algum feedback e ódio. Se ficares preso nisto, não te esqueças. Você sempre pode deixar perguntas, comentários e preocupações abaixo, e eu vou chegar a eles o mais rápido possível 11. Manipulação de corda: Ei aí. Espero que tenha gostado de muitos projetos. Nós vamos fazer mais alguns desses na estrada e, ah, ah, nós vamos tipo de aprender um monte de coisas entre eles para que nós possamos, você sabe, aprender um pouco de prática, aprender um pouco de prática Pouco. Acho que essa é uma boa maneira de aprender JavaScript. E então neste vídeo, vamos aprender sobre manipulação de cordas, e parece extravagante, mas realmente não é. Na verdade, é super comum em JavaScript para que manipulação de string é basicamente nós pegamos uma variável que é como uma frase ou talvez um número, e nós manipulamos. Nós mudamos isso. Nós o forçamos a ser algo diferente, e há várias maneiras diferentes de nos fazer. Mas neste vídeo, vamos apenas rever alguns deles. Então nós vamos passar para minúsculas para maiúsculas, dividir fatias unidas e sub string. Há muito mais destes, mas acho que esta é uma maneira muito boa. Você se acostuma a como podemos manipular alguns dados? Então, primeiro e acima de tudo, vamos criar um H com um i d de sentença e vamos em frente e colocar um pouco de Lauren Ipsum aqui. Então, quando eu disser isso, vai parecer muito chato. E está tudo bem. Não estamos tentando fazer isso parecer legal agora. Estamos simplesmente tentando fazer um pouco de javascript. JavaScript não significa necessariamente coisas Parece bom. CSS significa que as coisas parecem boas. JavaScript significa que as coisas estão funcionais. E então vamos em frente e criar um script aqui. E queremos pegar todo esse texto aqui. Toda essa Laura MIPs. Hum, então nós poderíamos fazer você saber de nossas frases iguais a e então nós poderíamos ritmo são mais baixos MIPs, hum lá dentro. Ou poderíamos fazê-lo a maneira javascript e dizer documentos não obter elemento elemento por i d sentença. Vamos chamar esse nó de sentença, e eu sou o suficiente para fazer isso menor. Espero que ainda seja bom ver isso. E então vamos fazer as nossas frases. Águia para o nó de sentença ponto texto interno e vamos em frente. Basta registrar este conselho ponto log A sentença vai ser sentença. E quando atualizarmos e clicarmos com o botão direito, inspecionar cada clique, inspecionar e ir ao nosso conselho. Ah, aí está. Vemos todo esse texto nojento aqui, e este pode realmente ser melhor se mudarmos a visão para Vamos mudar um para baixo. E então nós temos uma frase aqui e é um monte de coisas Lauren Ipsum para que possamos ir em frente, em frente,nos livrar do registro do console Sabemos que está funcionando e que nossa sentença é de fato, uma corda. Como sabemos que é uma corda? Bem, nós sempre podemos fazer um tipo de frase que nos diz que é uma corda que é muito legal. Nós também podemos apenas digitar sentença e porque ele tem uma citação em torno dela, você sabe, é uma string, então vamos apenas limpar isso e vamos colocar a frase de volta lá e você pode ver que é uma espécie de destacando-se lá. Mas ainda não está fazendo nada. Tão fixe. Temos o texto da sentença agora. E se você quisesse fazer tudo isso em maiúsculas? Vamos fazer var sentença superior é igual a enviar no início para maiúsculas. Isso é literalmente tudo o que temos que fazer, e nós podemos realmente testar isso em nosso cônsul, também para que pudéssemos fazer enviar o garanhão para cima, e você pode ver que é auto sentimento para mim e, em seguida, abrir e fechar o suporte. E o que isto diz é que isto é uma função. Aprenderemos mais sobre funções na estrada. Mas basicamente isso vai pegar nossa frase, o texto de Lauren Ipsum, e vai fazer algo com ele, e é isso que isso significa. Estes parênteses de abertura e fechamento ou estes parênteses significa que vai fazer algo com ele. Vamos em frente e bater, entrar e olhar para isso. Está tudo em maiúsculas agora, tudo isso. Então sabemos que funciona, e podemos simplesmente manter isso aí. Nós também podemos fazer de nossa frase inferior e vamos em frente e fazer frase ponto para minúsculas. E, a propósito, estamos criando novas variáveis aqui com base no que quer que essa string seja essa variável. Então não estamos anulando a sentença uma e outra vez. Estamos pegando a mesma frase, que é esse valor aqui, o Laure MIPs Um e estamos dizendo “Ei, faça maiúsculas”. Isso também não vai funcionar. Ei, faça em maiúsculas. E então também hey, torná-lo em minúsculas E então basicamente, estamos apenas copiando os dados uma e outra vez sem realmente substituí-los. Então, se você quiser ver isso realmente funcionar, podemos ir em frente. Vamos apenas copiar isso. Pegue essa coisa toda Copy Paste e vamos digitar a frase mais baixa. Agora podemos ver que é tudo minúsculo. O primeiro l deve ser maiúscula. Não é. É mais baixo. caso está aqui. Deve ser maiúscula. Não é. É minúscula. E isso funcionou. E se nós só quiséssemos obter, tipo, os 10 primeiros caracteres de uma frase? Por qualquer razão, nós só queremos o primeiro 10 e isso é realmente estranhamente útil. Você não pensaria que usaria algo como Basta obter o 1º 10 ou o 1º 4, mas sim, nós o usamos um pouco em JavaScript. Então vamos em frente e criar uma sub string. Então nós vamos chamar este 1º 10 Chars é igual a que significa caracteres frase sub string, e isso vai levar dois parâmetros opcionais aqui, realmente fora dos primeiros. Não é realmente uma opção. Então vamos fazer 10 e não vamos fazer isso aqui. Vamos em frente e fazê-lo aqui onde podemos experimentar para que possamos realmente ver o que está retornando aqui, diz M. Dolar. Sente-se. Omitir. Então o que isso está fazendo é dizer, comece no personagem 10 e pegue todo o resto. está fazendo é dizer, , Então temos 123456789 10. Então ele pegou aqueles 1º10 personagens e completamente ignorou-os, e começou aqui M dolar sit omitir, provavelmente massacrando aquele latim, a propósito. E podemos realmente ver isso. Isso é o que ele retorna aqui. M dolar Sente-se nele. Legal. E então é assim que usamos sub string. Isto é muito fixe. Eu não sabia realmente que o conselho faria isso, mas isso me dá de uma extensão opcional. Quantos caracteres queremos para que possamos começar no décimo caractere e digamos que só queremos os próximos 10 caracteres. Há 10 11 12 13 14 15 16 17. Poderíamos fazer o próximo. Isso é um 30. Lá vamos nós. Temos entre os personagens 11 e 30 aparecendo aqui. E então isso é o que sub string faz. E isso é realmente útil. Porque às vezes, você sabe, talvez um usuário insira que você, Earl, e eles não colocam www na frente disso. E talvez seu site exija isso ou http para transformá-lo em um link apropriado. É aqui que fazemos algo assim. Então vamos em frente. Este vai ser o 1º 10 caracteres. Vamos fazer zero e 10 e vamos fazer zero e 10 aqui porque isso é basicamente uma prévia ao vivo . Zero e 10. Vemos Laura Ipsen permite 11 Lauren Ipsum 1º 10 E porque essa variável diz 1º 10 caracteres, vamos fazer primeiro 11 caracteres. Ok, próximos dois vão introduzir um novo tipo de dados. Então nós sabemos sobre cordas e nós sabemos sobre números. Nós realmente não usamos muito números, mas nós sabemos sobre eles agora. O que acontece se quisermos ter todas as palavras individuais aqui? Bem, em javascript, temos esse método chamado Split, e basicamente podemos dizer a ele para dividir qualquer coisa. Então, dividam qualquer coisa aqui e podemos dizer o que vamos dividir. Então dizemos dividir em cada frase. O que isso vai fazer é pegar cada espaço aqui como o que temos aqui. Então ele vai apenas coincidir com o que está lá, e ele vai transformar isso em uma lista vai transformá-lo em um array. Então vamos em frente e vamos fazer um exemplo ao vivo. Não faça a separação de pontos e vamos dividi-la em cada espaço. E vamos fazer palavras é igual e olhar para isso. Nós temos todas as palavras diferentes em sua e se eu fizer isso maior, nós temos todas as palavras diferentes e nós podemos realmente abrir e fechar isso e ele vai nos mostrar todas as palavras. Então, temos uma lista agora. Agora este ar chamado um aumento e JavaScript esta chamada e um raio deixe-me digitar isso. Ele é chamado de matriz de pressa, e então, na verdade, tudo na matriz é uma lista gigante de números ou strings ou objetos, que não aprendemos sobre, ou todos os tipos de outros tipos diferentes de dados e tipos de dados que que ainda não aprendemos . E pode manter todos eles em uma lista e manterá essa ordem. Então podemos ver Florham Ipsum Dolar disse que eu conheci assim por diante e assim por diante e assim por diante. Então agora podemos entrar aqui e podemos dizer que Vier todas as palavras são iguais à frase ponto dividido e dividi-lo em cada espaço. E vamos em frente e fazer o registro de pontos do cônsul todas as palavras. Eu não dei a isso uma atualização e este registro de console para mim e isso me deu todas as palavras. Agora, onde isso é útil? Tudo bem agora, nos EUA, isso não é muito útil. Mas no final da estrada, isso pode ser muito, muito útil. Podemos usar uma coisa chamada quatro loop e loop através de cada um e executar em ação sobre eles. Nós não vamos entrar nisso ainda porque isso é um pouco mais complicado do que o que geralmente gostamos de fazer no início do JavaScript. Sinto que isso pode sobrecarregar algumas pessoas. Certamente me sobrecarregou quando eu estava aprendendo JavaScript no passado. E então eu gostaria de manter isso, você sabe, agradável e simples. Aprenda passo a passo, mas tudo bem, então temos todas essas palavras diferentes aqui e digamos, digamos , por qualquer motivo, quiséssemos acalmá-los todos juntos novamente. Mas não queríamos um pedaço dele usando um espaço simples. Não queremos que a sentença pareça mais uma frase normal. Talvez quiséssemos colocar parênteses em cada palavra. Bem, poderíamos fazer isso. Poderíamos fazer. Vamos longe. Vamos juntar as palavras aqui e juntar-nos a todos estes juntos. Então vamos tomar todas as palavras, não frases. Queremos levar este porque esta é a lista. Todas as palavras não se juntam e depois é preciso uma corda. O que queremos nos juntar a ele? Bem, se fizermos isso e isso é realmente apenas salvar isso e vamos ver o que palavras colchetes parece um olhar de que as palavras colchetes tem todos os parênteses diferentes em torno dele, exceção do 1º 1 no último. Bem, adivinha? Podemos fazer alguma nação de cordas e gatos aqui para que possamos adicionar um suporte lá e podemos fazer um suporte aqui e refrescante. Vamos fazer palavras entre colchetes e ha ha! Olhe para isso. Todas as nossas palavras têm colchetes em volta dele agora. E só por diversão. E se nós fizemos ponto nó frase em seu texto é igual a palavras colchetes. Ei, olhe isso. Então agora estamos realmente fazendo algo com nossa página. Isso é muito legal. Então eu vou remover isso porque eu não quero mudar isso ainda. E há mais uma sobre a qual quero falar. E então, realmente, quando estamos olhando para isso e isso, nós nos separamos e nos juntamos. Então Split vai pegar uma frase e dividi-la com base no que você quiser dividi-la por . Neste caso, usamos apenas um espaço regular, e então pegamos qualquer que fosse a lista de palavras e dissemos, realmente juntá-los a todos com outra coisa. E isso parece um pouco estranho. Na verdade, não precisamos usar parênteses de fechamento de abertura como este. Poderíamos se quiséssemos usar um monte de espaços, e isso é ir em frente, atualizar e digitar palavras parênteses e olhar para isso para que pudéssemos fazer isso também. E assim juntar-se e dividir geralmente trabalham em conjunto. E tem mais um aqui. E se vamos em frente, realmente nos refrescar? E vamos fazer todas as palavras. Temos uma lista de palavras aqui. E se quiséssemos apenas as 3 primeiras palavras? Então vamos em frente e digite todas as palavras dot slice e ele vai dizer que esta é uma função. Isso é o que o “F” significa. É uma função. Onde deve começar e onde deve terminar? Vamos começar em zero, porque quando se trata de computadores, começamos a contar em zero. Como humanos, começamos a contar. 12345 computadores. Os computadores não vão? 012345? Porque para um computador, zero é um número para um humano. Zero não significa nada. Não há literalmente nada lá. Então número zero e vamos para o número três. E isso vai nos dar as 3 primeiras palavras. Laura, hum, Epsom Dolar Então? E então podemos ir em frente em nosso código, e podemos dizer longe, as três primeiras palavras são iguais a sentença. Não, isso não está certo. Já me enganei. Todas as palavras ponto fatia e apenas pegue o 1º 3 Basta pegar uma fatia dele. Então, só queremos cortar isso. Dizemos: “ Se fosse uma tarte gigante, queremos três pedaços.” Se fosse uma tarte gigante, Alternativamente, nós também poderia dio palavras dot slice. E o que acontece se dissermos começar com este aqui? Então seis foram demais. Acho que nessa, porque eu não contei, Ahmed disse. Todas as palavras ponto fatia começam no número cinco e vão para o fim para que você possa ver aqui. Ah, há 20 itens nesta lista. Agora, novamente, vamos falar mais sobre listas no final da estrada. Eles são super úteis, na verdade. não é muito complicado, Tambémnão é muito complicado, mas vai começar no número cinco, por isso vai começar em 012345 e foi o que dissemos para começar. Começar em turnê consecutiva provavelmente deveria ter usado palavras que eu realmente posso ler. Uh, sim, há. Começa em turnê consecutiva, e agora o que podemos fazer é dizer, Ei, nós realmente só queremos cada palavra entre a quinta palavra e a décima palavra. Queremos todos eles e que queremos colocá-lo em uma frase. Então agora podemos realmente fazer algo legal com isso. Então vamos em frente. Vamos pegar palavras do meio longe é igual a todas as palavras ponto fatia e nós queremos pegar o número cinco para o número 10 e então nós podemos fazer do nosso eu não chamo isso faz palavras do meio frase ponto juntar-se e vamos juntá-los com um apenas um espaço regular. E então vamos em frente e fazer a sentença. O texto interno do ponto do nó é igual a fazer frase, e isso é apenas dar uma atualização e ver como ele vai tomar, provavelmente daqui até aqui ish eu estou supondo, porque eu não estou contando as palavras e ele vai substituir este texto com aqueles do meio . Tutta assim. Ele só os substituiu por nós e novamente uma última vez. Se formos para ver a fonte da nossa página Olhe para isso. Temos tudo aqui. Mas o Javascript disse que não. Pegue o nó da frase, pegue esse inter texto para que possamos trabalhar conosco como uma variável. E então nós temos uma cópia da sentença aqui. Uma cópia da frase aqui, uma cópia da sentença aqui, aqui e depois com estes, podemos fazer coisas diferentes se quisermos, e como no final onde basicamente pegamos essa frase, pegamos isso sentença. Pegamos todas essas palavras e as separamos com base no espaçamento. E então transformamos todas essas palavras em palavras parênteses. Então não havia mais espaços, apenas colchetes por todo o lado. E é aí que parte a licença porque não fizemos nada com isso. Então dissemos: “ Na verdade, pegue as 3 primeiras palavras e dissemos: “ Ok, Ok, bem, há uma lista de palavras quebradas pelo espaço.” Isso é o que Split está aqui. E nós dissemos: “ Apenas pegue o 1º 3 Então pegamos Laura Ipsum Dolar, e essas foram as 3 primeiras palavras. E então nós dissemos : “Nós não vamos realmente fazer nada com isso. Vamos pegar as palavras do meio. Vamos pegar todas as palavras de novo. São todos esses Split no espaço, pegue o número cinco. Então 012345 e, em seguida, agarre até a décima palavra. Então 12 três ou 89 e depois feito. E então dissemos: “ Ei, Ei, você sabe o que pegou essas 10 palavras e colocou de volta em uma frase para não querermos uma lista de coisas. Nós só queremos uma frase regular e depois dissemos que eu mudei o texto, mudei para ser o que quer que essas cinco palavras sejam. E aí está ele. Temos essas cinco palavras assim. Então esta é uma introdução básica na manipulação de cordas. Agora, neste momento, você provavelmente está pensando, Ei, Ei, isso não é útil em tudo. Mas nas próximas lições, vamos fazer uso de um pouco disso. Então é muito, muito bom saber que elas existem, mesmo que você não as use todos os dias é bom saber que elas existem. Agora, eu como desenvolvedor tem um desenvolvedor de pilha completa que inclui o front-end. Eu uso isso quase todos os dias. Mas, ei, se isso soar como muita pressão, você ainda está aprendendo. JavaScript. Lembre-se, você ainda está aprendendo. Você é um estudante de JavaScript. Você não precisa ser o melhor. Você não precisa saber tudo isso fora do topo. Sua cabeça sempre pode Google Pro dica. Todos os seus desenvolvedores sênior, nós meninas coisas sem parar o dia todo. Então, não se sinta mal se tiver que pesquisar no Google e, por fim, não sinta que tem que se lembrar de tudo porque, francamente, não se lembra. Você só precisa saber que esses tipos de funções existem. Então é como se você quisesse pegar todas as suas palavras e torná-lo maiúsculo, você realmente não precisa lembrar que é ponto para maiúsculas. Você só precisa se lembrar de como acessá-lo. E assim, por exemplo, nós poderíamos fazer ponto de frase e eu apenas digitar você peopie para maiúsculas e olhe para isso. Isso me dá para maiúsculas, e tudo que eu tenho que fazer é adicionar parênteses em torno dele, e ele faz isso para mim. E assim é como um pequeno lembrete o tempo todo. Está sempre lá, e você não tem que sentir a pressão de saber tudo imediatamente. Agora, eu realmente agradeceria se você pudesse dar uma chance a isso. Basta passar por cada um desses, escrever com a mão. Sei que é uma droga escrever as coisas à mão, mas se escrever à mão, vai criar memória muscular. E um dia, quando seu cérebro fica perplexo e você não consegue se lembrar de tudo, você sabe o que seus dedos iam começar a digitar e eles sabem o que estão fazendo. Você está pensando em outra coisa e seus dedos ar apenas fazendo o trabalho, e ele realmente funciona assim. Então vá em frente, dê uma chance, e então vamos passar a próxima lição quando você estiver pronto e vamos aprender sobre como aceitar alguma entrada do usuário e fazer uso disso. 12. Como aceitar a entrada do usuário: Olá, bem-vindo de volta. Espero que não te tenha perdido no vídeo de manipulação de cordas. Sei que foi um pouco longo. Há muito o que aprender lá, mas também é muito, muito importante saber neste vídeo que vamos aprender como aceitar entradas de usuários na forma de um prompt. Então, quando abrimos uma página, ela pode pedir seu nome ou uma idade ou algo assim, e então você pode realmente trabalhar com isso. E então você pode transformá-lo em maiúsculas ou minúsculas ou qualquer coisa assim. Então eu só tenho um arquivo HTML aqui, e eu vou criar um novo script. E vamos mover este tipo de no centro da tela aqui e vamos criar um novo script e vamos usar uma nova função. Parece muito com alerta, mas não está alerta. É chamado Prompt, e isso só vai pedir a alguém para alguma entrada para que possamos dizer prompt e qual é o seu nome? E quando eu atualizar isto diz: “ Qual é o seu nome? Vou digitar Caleb. Nada acontece. Isso é porque tudo o que fez foi pedir o meu nome. Eu não guardei em uma variável. Não forcei o HTML a mudar. Não atualizamos o modelo de objeto do documento. Nós não fizemos nada. Acabamos de dizer, qual é o seu nome? E é isso. Então, embora essa seja uma função legal, atualmente não é útil. Então vamos em frente e torná-lo útil. Então vamos salvar nosso nome é igual para perguntar qual é o seu nome? E então vamos em frente e log do console que o Cônsul ponto log seu nome é e atualização de nome. Coloque Caleb mais uma vez. Ha. Seu nome é Caleb assim. E é assim que se pede a alguém qualquer tipo de dados. Agora, a grande coisa a tomar nota aqui é que sempre que você usar prompt, a entrada sempre volta como uma string. Então, se você está tentando adicionar números juntos, então se você tem que prometer, como inserir o número um e, em seguida, inserir o número dois e, em seguida, talvez, inserir o número três, você pode não obter os resultados que você está procurando. E como exemplo, vamos em frente e digite nome e podemos ver que ele tem aspas em torno dele, então sabemos que é uma string, mas podemos sempre digitar tipo de nome, e isso me diz que é uma string. Então vamos em frente e nos livrar disso e vamos injetar essa mudança. Estes sublinhados aqui de entrada personalizada para qualquer valor que alguém colocou lá . Então, quando eu disser qual é o seu nome? E eu escrevo Caleb, esses sublinhados. Isso deve mudar para Caleb. Então, as primeiras coisas primeiro. Precisamos pegar este bilhete. Este é o três. Vamos em frente, criar uma nova variável. Chama-se nota H três. Eu acho que os documentos não conseguem Elham quis dizer com i d. e nós vamos usar entradas personalizadas novamente. Isso só combina aqui em cima. E então poderíamos dizer que três não sabem. O texto interno holandês é igual a qualquer que seja o nome. Vamos atualizar e dizer, qual é o seu nome? Bem, meu nome vai ser Caleb. Ah, olhe para isso. Seu nome era ou é Caleb. É mudar o que é porque não estou no passado. Estou presente. Agora. E se quiséssemos fazer algum tipo de manipulação de cordas nisso? E se eu quisesse ter certeza l a entrada tudo isso é sempre minúscula. Bem, podemos fazer duas coisas se soubermos que é sempre, sempre, sempre, sempre, sempre vai ser minúscula. Poderíamos mudá-lo imediatamente porque um nome é igual ao nome ponto para minúsculas. E sempre que fizermos referência ao nome na estrada, como aqui, será sempre minúscula. Então vamos dar um exemplo a isto. Caleb em todas as maiúsculas e eu acertei OK e ele aparece em minúsculas. É o que estamos esperando agora. Se você não quer que isso sempre seja minúsculo e você quer preservar o que o usuário e você só queria ser minúsculo, apenas uma vez que você poderia fazer ponto para minúsculas aqui, e então todos nós poderíamos cozinhar como um log de console, e podemos registrar o nome original. E então o que estamos fazendo é dizer, Ei, qual é a sua loja de nomes tão invariável. Então pegamos a nota de três anos. Essa é essa entrada personalizada e nós dizemos, Ei, vamos pegar esse texto inter e mudá-lo. Vamos alterá-lo para o que os usuários introduziram. Mas vamos nos certificar de que é sempre minúscula e, em seguida, o “Vamos Cônsul “registrou o nome. Agora, neste momento, você acha que o nome vai ficar em minúsculas quando fizermos um registro de console? Será que o nome será totalmente minúsculo? Porque dissemos que é uma minúscula aqui ou você acha que não vai ser minúscula porque só mudamos isso uma vez? Agora, isso é realmente uma boa pergunta, porque diferentes linguagens de programação operam de forma diferente a este respeito. Então vamos experimentar com isso. Vamos colocar Caleb em todas as maiúsculas e podemos ver todas minúsculas. Mas quando consolamos o registo, está tudo em maiúsculas. Então, isso realmente não mudou nada. Então o que fizemos aqui apontou para minúsculas não mudou o valor do nome. Só mudou desta vez. Só mudou o valor desta vez, mas não mudou o nome inteiro para sempre. E então é aqui que entramos em uma manipulação muito mais variável, manipulação de cordas, coisas assim. Porque agora podemos preservar a entrada do usuário. Esse é o nome. E nós podemos dizer, na verdade, você sabe, apenas neste caso, torná-lo minúsculo, mas em todos os outros casos, mantê-lo o mesmo porque nós podemos querer fazer algo com ele. Portanto, esta é uma maneira muito simples de aceitar a entrada do usuário. E no estado selvagem, em um site ao vivo você não vê isso usado, você vê campos de texto sendo usados, você vê áreas de texto caindo, coisas assim, e nós vamos chegar a tudo isso. Mas precisamos aprender a gerenciar a entrada do usuário para começar, e isso é um bom passo para isso. Então, aprendemos como aceitar as entradas de alguém, salvá-la em uma variável, pegar um nó e, em seguida, alterar o valor dessa nota para ser qualquer que fosse o prompt, qualquer que fosse a entrada do usuário. E esse tipo de nos prepara para uma coisa chamada ouvintes de eventos, ouvintes de eventos são como podemos basicamente dizer, Ei, Ei, qualquer vez que alguém digita em uma área de texto ou altera um campo de seleção, enfraquecer, fazer algo baseado nisso. E é neste ponto que nosso código realmente se torna bastante dinâmico porque até agora não temos sido capazes de aceitar entradas personalizadas. Recebemos alertas que nos dizem coisas, mas nunca fomos capazes de injetar qualquer tipo de texto ou informação variável na página. E agora podemos. E então eu acho que, para os próximos dois vídeos estavam indo para o pé, aprender como trabalhar com isso um pouco, e isso vai realmente nos preparar para o JavaScript mais futuro. Quando lidamos com os ouvintes de eventos e mais entrada do usuário e como gerenciar tudo isso. E apenas como uma atualização, vamos em frente e vamos dizer nome e vamos fazer nome de alerta. Qual é o seu nome? Meu nome é Kate Lubbe, e eles vão se encaixar. Está bem, só vai alertar. Meu nome é Caleb. Meu nome é Galeb, exatamente assim. E isso é tudo o que há para alertar e alertar. E agora você é um profissional pronto e alerta para ser totalmente honesto. Ok, então eu só desfiz isso agora o que acontece se você quiser algum padrão? Texano aqui, digamos que você está mexendo e sabe que está experimentando. Você está aprendendo seu jogo com javascript como deveria estar, mas cada vez que você atualiza a página, você tem que digitar o nome. Bem, eventualmente você vai começar a digitar e coisas assim que não são muito úteis. Vamos dar um padrão. Vamos em frente e o segundo parâmetro de prompt será. Estou só a pôr o meu nome. Qual é o seu nome? O Caleb? E quando eu atualizo, ele é automaticamente preenchido para mim. E outra coisa a observar aqui é quando atualizarmos, vamos nos livrar disso e clicar em OK, e vamos entrar aqui e dizer Qual é o nome? O nome é uma string vazia. Não há nada lá agora. O que acontece se clicar em Cancelar em vez de deixá-lo vazio enquanto diz Meu nome é nulo, então vamos em frente e ver qual é o nome. Nome é uma string chamada Não ou assim parece. Vamos verificar se você digita o nome, e é uma string, e então basicamente não há nada aqui. No próximo vídeo, vamos aprender sobre essas coisas, chamadas operadores de comparação para garantir que nossa entrada é realmente o que estamos esperando e, se não for, fazer outra coisa, e isso é como damos comandos aos computadores com base na entrada do usuário. Então vamos saltar sobre o próximo vídeo onde aprendemos sobre operadores de comparação, e é aqui que tudo o que aprendemos até agora se transforma em programação riel 13. Introdução a operadores de comparação: Ok, vamos dar uma olhada nos operadores de comparação. Os operadores são os pequenos pedaços de lógica em um programa que nos dizem para fazer uma certa coisa ou nos dizem para não fazer uma certa coisa. Basicamente, é como agimos com base em um valor variável. Este é o lugar onde as variáveis realmente se tornam super importantes, não apenas sobre alertar coisas ou registro do console, sobre dar a um programa uma tarefa específica para fazer. Ou talvez não para dió. E então um operador de comparação basicamente se parece com isso. Vamos em frente, abram espaço aqui. Basicamente diz, se seu nome é Caleb, faça algo de outra forma ou faça outra coisa que é basicamente tudo o que é. E, de fato, no mundo de Python, ele realmente se parece muito com isso. Muito, muito, muito parecida. JavaScript tem um tipo diferente de sintaxe, então, do jeito que fazemos parecer, vamos em frente e criar uma tag de script aqui. E vamos dar uma olhada na nossa primeira declaração “se”. Então vamos codificar isso e, em seguida, vamos transformá-lo em um prompt onde podemos realmente aceitar entrada do usuário. Então vamos fazer o nome distante é igual ao Caleb. Vamos ter que fazer este pequeno pequeno aqui. E então poderíamos dizer, se parênteses? Porque está fazendo ação, certo? Se ele vai fazer uma ação, você vai precisar de alguns parênteses lá se o nome é igual a Caleb Abertura Curly colchete fechando colchete assim. E esta é uma declaração “if”. Então você está dizendo, Ei, se uma variável é igual a qualquer que você está esperando que ela seja igual a alerta, faça algo e vamos em frente e atualize e ela diz: “ Faça algo agora, por que você fez isso? Porque você pode realmente ver que esse nome é igual ao Caleb. E se o nome é igual a Caleb agora, há uma advertência aqui é que estamos usando para igualar sinais. Um sinal de igual significa que esta é a variável. Variável é igual a qualquer que seja esse valor. Isso é um sinal de igual para sinais iguais. Quer dizer, hey, é o nome Caleb, que estamos verificando para ter certeza de que é realmente o nome certo. Então este é chamado de operador de atribuição, e este é um operador de comparação. Agora existem vários outros operadores de comparação lá fora, mas nós realmente vamos aprender sobre este primeiro 1 Por enquanto, para mantê-lo agradável e simples. Então agora vamos mudar isso para perguntar qual é o seu nome? E agora eu posso atualizar vai dizer qual é o seu nome? E se eu digitar qualquer outro nome, vamos ser meu gato por um momento. O nome dele é Zephyr. Vou digitar Zephyr. Nada acontece. E isso é porque se entrarmos aqui e escrevermos o nome, podemos vê-lo. Zephyr. E estamos dizendo, , se o nome é igual a Caleb, faça algo, faça algo, não é atualmente que está dizendo seu esforço, mas se atualizarmos e eu digitar Caleb com um caso maiúsculo para que corresponda ao valor certo Lá, ele diz, faça algo legal. Então agora temos algo com o que trabalhar. Aqui podemos dizer, Ei, Ei, pedir ao usuário alguma informação, e se essa informação coincidir com o que estamos esperando, Enfraquecer, faça outra coisa. Então agora vamos fazer isso um pouco divertido ou vamos fazer um H um aqui eu d é igual a apenas chamar Bem-vindo. E vamos transformar isso em oito nós de nosso nó de boas-vindas é igual a documentos ponto Obter elemento por idéia que auto preenche para mim Isso é bom nome. Torná-lo menor. Então ele se encaixa em uma linha. E agora temos isso aqui, e podemos dizer, , se o nome é Caleb, texto interno é igual a bem-vindo ao seu site, Caleb. E antes de darmos uma chance Ah, eu só notei que temos documento eu recebo l elemento por i d. Não é o nome. Bem-vinda. No meu ataque de excitação, fiquei um pouco à frente de mim e, sabe, fato divertido que acontece com todos nós. Então agora eu vou bater, atualizar e dizer, qual é o seu nome? Vou dizer que meu nome é Caleb. E agora diz: “ Bem-vindo ao seu site, Caleb. E se eu disser qualquer outro nome, se eu disser que meu nome é não, não Zephyr. Vamos ser o Batman. Meu nome é Babin não faz nada. O Batman não devia estar aqui. E Snow, temos alguma lógica e algo acontecendo baseado no fato de que meu nome é Caleb. Agora, se precisássemos que isto fosse um pouco mais aceitável? Porque agora você precisa de um K maiúsculo. Se eu digitar Caleb com R maiúsculo, K minúsculo, nada acontece. Ok, bem, agora nós precisamos realmente mudar isso. Precisamos dizer se o nome é igual a Caleb com um K minúsculo. Bem, isso não vai mudar para isso. E isso e aquilo e aquilo e aquilo. Essas são todas as variações diferentes e misturar e combiná-los, é claro. Então o que podemos fazer é dizer, se nomeado para minúsculas. Então vamos pegar qualquer que seja o nome que for transformado em minúsculas e então comparar o valor minúsculo . Vamos em frente e fazer isso. Permite que todos vocês em maiúsculas Caleb. E então vamos dizer “bem vindo ao seu site, Caleb”. E isso é porque dissemos: “ Se o nome é maiúsculo, Caleb, e então forçamo-lo a ser mais baixo. Se o nome é maiúsculo, Caleb, O maiúsculo é igual a Caleb minúsculo. E agora vai coincidir com cada um deles. Poderíamos dizer “K a L O B ” . Ainda funciona. E é aqui que a manipulação de cordas fica muito, muito útil. Então agora, neste ponto, precisamos dar uma olhada na própria afirmação se. O que está fazendo esse gatilho, enquanto não é só o fato de que combina com Caleb. Sim. Ele está procurando uma correspondência com a lógica por trás dele está dizendo, esta afirmação é verdadeira? O nome de ponto para minúsculas é igual? O Caleb? Bem, se alguém tivesse que digitar Caleb assim, isso combinaria? Não, esse ar é diferente de um computador. Mas dissemos para minúsculas, que é o mesmo que dizer: É Calebe igual a Calebe? E se sim, isso seria verdade, seu computador então diz “Sim”. Isto é verdade. Logicamente. Bip, bip, bip, bip. Sim, isto é verdade. Faça-o fazer alguma coisa. E assim suas declarações se devem sempre retornar verdadeiro. E o que acontece se não voltarmos? Verdade, como lidamos com algo que é o oposto da verdade? Como lidamos com algo que é falso, ou como lidamos com vários cenários? Bem, essas são coisas que nós vamos entrar em apenas um pouco por agora, eu acho que nós devemos apenas praticar um operador de comparação simples apenas para tipo de pegar o jeito disso, porque aqui é onde nós podemos ter muito de diversão com ele. Podemos fazer qualquer coisa com o nosso site neste momento. baseado em apenas declarações if. E então, por último, vamos dar uma olhada mais rápida na sintaxe aqui. Então nós temos se parênteses e, em seguida, dentro desses parênteses, então eu poderia realmente excluir que se o que aqui for verdadeiro, então se o valor um é igual ao valor a, então você tem alguns colchetes. Você tem abrindo colchete e fechando colchete encaracolado, faça algumas coisas aqui. E se não for verdade, se as suas declarações if não se revelarem verdadeiras, isso não será executado. Salta seu programa, diz que não há nada lá. Não vou fazer nada com isso. E isso é essencialmente o núcleo de todas as linguagens de programação do planeta. Se você quer entrar em inteligência artificial, se você quer entrar em aprendizado de máquina, adivinhe o que a maioria é uma tonelada de. Se instruções, é se um ponto de dados corresponde a um determinado valor. Se um conjunto de dados corresponder exatamente ao resultado que você está esperando. Se não for, faça outra coisa que é tudo o que é. Mesmo se você olhar para você sabe, mais filmes de fantasia como eu robô, você conhece a máquina, o sol era o nome dele. Sonny vai olhar em volta e ele vai analisar todo o quadro. E você vai dizer se há uma pessoa lá, diga olá. Se não houver ninguém lá, continue andando. Então essa é uma afirmação “if else”. E no final do dia, na programação, tudo se resume a algo chamado booleano. Ou é verdadeiro ou é falso. Isso é que não faz realmente um monte de meio termo lá. E isso é tudo o que estamos fazendo aqui é dizer: “ Ei, Ei, isso é verdade? Uma dessas afirmações? Se esta afirmação for verdadeira, faça alguma coisa. E se não for, talvez faça outra coisa. Mas aprenderemos sobre isso em uma lição futura. Então, o que eu gostaria que você fizesse é dar uma chance, pedir seu nome usando um prompt e, em seguida, verificar se esse nome corresponde a um valor que você está procurando. E se corresponder a esse valor, então faça outra coisa. Basta escrever uma declaração se e tipo de se acostumar com isso. E não se esqueça, você pode experimentar. Você não vai quebrar nada. Você sempre pode fazer, tipo, se meu nome é Nathan. Se meu nome é Zephyr, qualquer coisa assim, ele também poderia fazer. Eu duvidei que os dados em vez de em minúsculas você poderia fazer para um caso de pássaro. Você poderia fazer algo assim. Você faz todo tipo de coisas, então não se esqueça de mexer nisso. Divirta-se com uma experiência. Você tem permissão para experimentar. E mais uma vez, não há nenhuma maneira possível de quebrar qualquer coisa em seu computador apenas escrevendo isso para que você esteja totalmente seguro para experimentos com o conteúdo do seu coração. 14. Como lidar oposto: Olá e bem-vindo de volta. Na última lição, aprendemos sobre operadores de comparação. Nesta lição, nós vamos aprender sobre como lidar com o oposto de algo que é verdade. Então, por exemplo, se temos um script que pede o meu nome e diz: “ Ei, Ei, se meu nome é Caleb, dê-me as boas vindas. E se o meu nome não for Caleb? E se você estiver pedindo um curso e não for JavaScript para iniciantes? Vamos em frente e fazer isso. Agora vamos dizer que var que foi chamado de entrada é igual a prompt. Que curso você está tomando? E então poderíamos dizer com uma declaração if se o ponto de entrada para minúsculas é igual a JavaScript para iniciantes e que apenas certifique-se de que não importa se há Ah, letra maiúscula ou nenhuma letra maiúscula e então vamos fazer este chaves menores. E então poderíamos dizer, você sabe, fazer alguma coisa aqui. E então já estamos familiarizados com isso. Na verdade, nós poderíamos realmente limpar isso até poderíamos dizer, entrada mais baixa. Vamos apenas chamá-lo que de nossa entrada diminui igual a, e nós vamos apenas criar nova variável chamada em, colocar mais baixo, e que apenas corresponde a este aqui. Mas e se o curso não for JavaScript para iniciantes? E se você estiver fazendo outro curso meu chamado Javascript essencial? Bem, você precisa ser capaz de lidar com isso. Na verdade, se alguém digitar algo que não seja isso enquanto você precisa de outra declaração ? Então, se outra coisa faz outra coisa e realmente se resume a algo assim. Você pode ler isso como uma frase para abrir espaço aqui. E você poderia dizer, você sabe, se o curso é javascript para iniciantes, fazer uma coisa de outra forma ou então fazer outra coisa. E, de fato, isso é interessante, porque se dissemos isso, isso é python. A Sra. Python enviou sintaxe. E assim, aprendendo a sintaxe javascript aqui já um pouco familiarizado com a sintaxe python. Então não, suas habilidades e python ou suas habilidades e javascript estão realmente valendo a pena porque você está aprendendo a aplicar lógica em outras línguas. Parece um pouco diferente, mas sim, é assim que funciona. E assim você pode realmente ler isso como uma frase se cursos javascript para iniciantes fazer algo. Mas se não for, faça outra coisa. Isso é tudo o que é. E assim o mundo da programação é realmente apenas composto de, se else declarações. É um monte de se declarações l declarações e ah, híbrido de ambos chamados e se em outro lugar, senão f dependendo do seu idioma. Então, se isso é JavaScript para iniciantes, vamos adicionar. Ah, mensagem de boas-vindas. E se não for, digamos que está no caminho errado. Bem, precisamos de algo para fazer aqui, então é um H. Vamos dar a isso um nome de texto e i d de texto e precisamos pegar um nó aqui. Então vamos pegar esse nó. Vier texto é igual a documentos ponto get elemento por i d texto. E então, digamos que o texto dot html interno é igual a É muito forte. Bem-vinda. É tão forte para JavaScript para Vamos fazer outros iniciantes fortes. E agora estamos escrevendo alguns html dentro de seu JavaScript. E se não for? Certo? Bem, poderíamos fazer isso e copiar aquilo, porque eu não quero escrever tudo de novo. Podíamos dizer que estás no caminho errado e ver isto. Que curso você está tomando? Ok, bem, digamos que eu estou fazendo outro curso que eu chamei javascript Essentials. Sim, porque estou no caminho errado porque não estamos em JavaScript essencial. Na verdade, o que eu estou em é JavaScript para e isso é realmente bagunça uma vez que colocar tudo em letras maiúsculas ou a última palavra vai ser letras maiúsculas. JavaScript para iniciantes. Bem-vindo ao JavaScript para iniciantes. E se visualizarmos nossa fonte aqui, nós realmente não parece que ele é ousado, mas é. Temos um elemento forte lá. Temos um elemento forte aqui e um texto regular aqui. Então lá vamos nós. E é assim que você faz em, se outra declaração. Então, basicamente, você está dizendo, Ei, se isso é verdade, se estamos de fato em JavaScript para iniciantes, execute isso caso contrário não importa qual é a resposta. Estamos dizendo qualquer outra resposta no mundo, execute esta linha. Então vá em frente. Dê uma chance a isso. Você vai precisar saber como fazer isso para o nosso mini projeto que está chegando. Você definitivamente vai precisar saber como fazê-lo se outra declaração e neste momento , se você ficar preso com isso, não se esqueça, você sempre pode deixar uma pergunta abaixo. Estou sempre aqui para ajudar 15. Mini Mini Projete neste JavaScript 2: Bem-vindo ao seu segundo mini projeto. Este tem a ver com operadores de comparação. Então eu espero que você tenha assistido os dois vídeos anteriores neste projeto muitos. O que eu gostaria que você fizesse é pedir ao usuário para um você Earl, e, em seguida, verificar para ver se esse link começa com http. E se não começar com http, eu quero que você conserte esse link. Então, corrija a variável e, em seguida, injeta que como um link para a página. E assim, para a parte número um, você vai querer usar prompt para a parte número dois, você vai querer usar sub string. Parte número três é que você vai querer usar e se talvez se outra declaração ou declarações e, em seguida, parte número quatro, você vai querer pegar um nó de elementos HTML e mudar o dedo HTML interno, ter mais html dentro dele. Eu vou fazer este projeto bem na sua frente também no mesmo vídeo, mas eu acho que seria melhor se você pudesse pausar o vídeo agora e apenas dar-lhe uma chance você mesmo . Vai o mais longe possível e depois sabes que mais? Se você ficar preso, basta retomar o vídeo e você pode assistir exatamente como eu termino fazendo. Então vá em frente, clique em Pausar. Dê uma chance e eu te vejo em apenas alguns minutos quando você clicar em Currículo. Ok, então o primeiro passo foi que precisávamos pedir ao usuário a entrada. Então vamos criar um script aqui onde colocamos nosso JavaScript e isso é um incêndio. Você onde l é igual a prompt. Digite um u R l o que quer que seja. E então vamos apenas fazer este pedaço por pedaço. Aqui vou refrescar-me. Entrar, Você está fora e eu poderia fazer codificação para todos ponto com não faz nada como esperado. Só temos uma garota em uma variável, mas não fizemos nada com ela. Vamos em frente e passar para o passo número dois. Vamos ver se ele começa com http ou se ele não começa com http para que possamos dizer se você próprio dot sub strings up string 04 assim começa no caractere zero, que é um em linguagem de computador. Ir até o quarto caractere é igual a http, então é bom e podemos console log que podemos dizer Conselho não registrar o euro é bom, Caso contrário, precisamos corrigi-lo. Então Cônsul Dot Warren e tão ruim você, Earl Bad, Bad. Você está doente. Vamos em frente. Dê uma chance para que eu vá em frente de novo. Qualquer tipo de codificação para todos ponto com e não é aconselhado para fora quente se você estava gritando para a tela. Sim, Sim, é uma boa decisão. É diversão desgastada. Fato, uh, codificar para todos ponto com é tentar isso de novo e dizer, “ Você é ruim. Bem, se eu atualizar a página e dizer H T T P Golin barra barra revestimento para todos ponto com e diz que a menina é boa? Ok, então nós temos uma declaração de trabalho se outro aqui. Então, se a U.R L for boa, não precisamos fazer nada. Mas se a U.R.L é ruim, precisamos consertar. Então vamos em frente e consertar isso. U R l nós estamos agora indo para corrigi-lo dizendo que o u. R L é igual a http cólon barra barra barra e então nós estamos apenas indo para contaminar o resto da menina. Sim, podemos nos livrar desses registros do cônsul se quisermos. Será que eles não estão realmente fazendo nada sobre. O último passo foi que precisamos selecionar um elemento HTML por seu i d e alterar o HTML interno para ter um link nele. Então vamos em frente e fazer isso. Agora vamos criar um parágrafo. Digamos que este é o link e vamos apenas criar um espaço vazio aqui que se chama Link não vai haver nada lá dentro. Então, quando atualizamos a página, você a vê como cancelar. Ele só diz que este é o link que podemos realmente ver que mesmo tem um tipo de ar não capturado não pode ler propriedade sub string de Não, porque não há nada lá dentro. É o que acontece quando clicamos. Cancelar. Neste ponto, deveríamos ter um pouco de trabalho. Você está assumindo que você realmente digita algo lá, e então nós só precisamos colocá-lo aqui. Então vamos pegar esse nó. Vamos fazer var nó Link é igual a ou eu acho que é um span notas. Oh nota SPAN é igual ao documento. Eu recebo elemento por i D e apenas chamado Link e vamos em frente e colocar span nó dot HTML interno é igual ao URL, então estamos quase lá. Vamos em frente e dizer codificação para todos ponto com. Ele consertou para mim. Legal. Mas, no fim das contas, não é bem o que procuramos. Nós realmente queremos que isso seja um link para codificação para todos ponto com. Então nós precisamos colocar isso em algum HTML e aqui é onde é bebida e Cat Nation entra para que possamos fazer isso de duas maneiras diferentes. Poderíamos dizer tudo em uma linha. A h r E f é igual a e, em seguida, fechando. E então nós poderíamos ir lá e poderíamos dizer Contaminar isso e poderíamos colocar o U. R L aqui. E então também podemos contaminar aqui com a garota. E assim isso vai funcionar revestimento para todos ponto com. E quando eu clico nele e você pode realmente ver que diz, citando para todos ponto com, boom carrega o site. Isso é muito bom. Ou se você quisesse escrever algum código um pouco mais limpo, nós também poderíamos apenas dizer HTML irá criar uma nova variável chamada HTML e desta forma Nós temos nosso HTML em uma nova linha, e ele simplesmente não parece tão lotado para que possamos fazer a mesma coisa Aqui. Não podemos dizer Google Dot com e não nos levar para http Google Dot com Há realmente um atalho. Ah, nós temos atualmente uma declaração “se” vazia. Então, por que escrever isso? Então o que podemos dizer é que podemos pular essa coisa toda. Vamos nos livrar da outra afirmação e obtemos, digamos , se não é assim comparar algo para ter certeza de que é verdade, você diz para sinais de igual, para dizer que algo não é verdade ou não é o mesmo. Em vez disso, você diz, sinal de igual ponto de exclamação. E isso não diz o mesmo. Então vamos ampliar e parece que não é a mesma coisa. E então o que estamos dizendo aqui é que se a garota nos primeiros 4 caracteres não é http, certifique-se de que é http. E então nos livramos dessa outra afirmação. Então agora estamos dizendo, basicamente, se ele não começar com http, ele precisa então sobrescrever o euro. Vamos dar uma chance a isso. Vamos entrar aqui, refrescar. Da última vez, que lado queremos ir para você. Vamos ao Facebook Dot com e Bam, isso funciona. E se já pusermos http lá? Você sabe, uma cópia e colar Você é tudo o que já está em seu http YouTube Elcom. Também está funcionando, então está tudo bem. Isso está funcionando perfeitamente bem. E então esse é todo o projeto. E então o que usamos é imediato. Usamos uma declaração if. Na verdade, nós usamos uma outra afirmação tecnicamente, e então nós meio que combinamos isso em uma linha. Falaremos mais sobre isso um pouco mais tarde. Você não precisava saber isso do topo da sua cabeça. Então pegamos nosso SPEN e então injetamos HTML nele. Além disso, poderíamos realmente fazer isso. Poderíamos verificar se alguém cancelou. O que é que você está fora? Bem, que você é l é igual a saber tipo de nova URL é um objeto. E então nós sabemos que isso vai ser algum tipo de tipo de dados, e na verdade você pode não saber disso E tudo bem. Não precisas de saber que o que vou fazer é mostrar-te algo muito fixe, na minha opinião. Então poderíamos dizer que se a garota é igual a conhecer Alerta, cancele isso rapidamente porque não queremos que ele execute. Então vamos em frente. Cancele isso rapidamente porque não queremos que ele seja executado. E então nós poderíamos realmente dizer se a garota é igual a saber, então cancelar isso e então nós poderíamos envolver tudo o resto naquela declaração é agora nós estamos dizendo que, basicamente, se ninguém clicou no conselho, nós estamos bem. Mas se alguém tiver um conselho rápido, vamos dizer alerta para isso, vamos dizer, cancele isso rapidamente. Na verdade, Na verdade, o que poderíamos fazer é não fazer absolutamente nada ou podemos fazer console ponto alguma vez faltando entrada. Caso contrário, se alguém colocou algo lá, poderíamos fazer uma declaração de “se” aqui. E então poderíamos fazer o resto da nossa lógica. E então vamos em frente e nos dar um tiro. Cancele a entrada ausente da maneira que esperávamos. Então lá vai você. Esse é o seu mini-projeto número dois. Eu fiz um monte de coisas aqui que eu não esperava que você soubesse, por exemplo, se você é l é igual a saber. Sim, eu meio que tirei isso de um chapéu. Você ainda não sabia disso? A declaração se não. Você também não sabia disso. Isso está tudo bem. Estamos aprendendo coisas juntos ao mesmo tempo. Nós vamos rever todas essas coisas um pouco mais tarde na estrada para e eu gosto de apenas cair em algumas dessas. Eu os chamo de Nuggets Dourados. Só essas pequenas dicas de coisas um pouco mais avançadas dentro do código. Isso já faz sentido. Então você está constantemente se esforçando. Você não está se esforçando demais. Agora, não se esqueça, você sempre pode colocar isso em uma caneta código. Ou, você sabe, você poderia apenas tirar uma captura de tela como o que eu tenho aqui. Você tem seu editor à esquerda, e você tem seu navegador à direita, e você pode tirar screenshots e compartilhá-lo em seu projeto de compartilhamento de habilidades. 16. Tratando casos especiais: Está bem. Sabemos um pouco sobre operadores de comparação e como lidar com algo que retorna verdadeiro. E algo que retorna falso. Nós sabemos que eles são, se declarações e outras declarações. Mas e se quisermos igualar mais do que isso? O que? Poderíamos fazer algo assim. Sabe, se nosso nome é igual ao Caleb e então poderíamos dizer se o nome é igual ao Caleb, faça algo aqui, certo? E se não for o Caleb? Bem, se o nome for Zephyr? Bem, então teríamos que fazer se o nome é igual a um Zephyr. Skins sempre ação aqui e depois temos outra declaração. E se o nome não for Zephyr? E se também não for Caleb Wars? E se o nome se o nome for igual a Henry Henry Action aqui? E se o nome não for Caleb Zephyr ou Henry? E isso continua e continua e continua, e fica muito nojento. Quero dizer, mesmo olhando para isso agora, parece meio confuso a olho nu. Basta olhar para ele e ir embora. Isso é um monte de nidificação, e isso pode durar para sempre. Felizmente, há uma maneira melhor de lidar com isso. No mundo do JavaScript, há duas maneiras de fazer isso. Vou mostrar-te o caminho principal. A maneira mais comum. Eles não te mostrariam outra maneira. Isso é um pouco menos comum, mas também um super útil. Então o que podemos fazer é se o nome for igual a Caleb. Ótima. Sabe, conselho não é incrível. Ok, nós também podemos fazer outra coisa se o nome é igual a Zephyr e então nós temos, digamos, log ponto do conselho no. E então podemos dizer outra coisa se o nome é igual a Henry Cônsul, aquele tronco pequeno eu. Oh, porque ele é um gatinho. E finalmente, se não é Caleb ou Zephyr ou Henry Council Dot Warren não lidou com algo assim. E vamos em frente e dar uma atualização, e podemos ver que diz incrível em seu vamos fazer isso menor. E se mudarmos esse nome para Zephyr, eu disse. Oh, se mudarmos esse nome para Henry, sabemos que vai dizer pequeno Meo porque foi o que escrevemos. Um pequeno meo e se mudarmos para outra pessoa, vamos mudar para cão. Oh, cão, não está resolvido. E então é assim que nos afastamos de aninhamento se declarações dentro de declarações if dentro de declarações se, podemos mantê-los bonitos e planos como este. E, de fato, meu editor e a maioria dos editores permitirão que você faça isso porque você tem colchetes aqui onde você pode realmente fechá-los. E então agora ele realmente parece muito mais limpo. Você pode, na verdade, tipo de ler isso. Se o nome é igual ao Caleb, vai fazer alguma coisa. Se for igual a Zephyr, faça alguma coisa, Henry, faça alguma coisa, ou se for outra coisa, faça outra coisa. E então se você estiver olhando através de um monte de código, você pensa, Ah, o que acontece se o nome é Zephyr? Você só abre essa refeição de log do console. E é assim que nos afastamos de um aninhado. Se declarações agora em Javascript, há outra maneira de fazer isso, e muitas outras linguagens têm isso também. Chama-se “switch statement”. Você não vê isso muitas vezes mais, mas é definitivamente uma coisa que você pode se apoiar sempre que você tem um monte de, se mais se declarações. Então você só diz switch e você dá uma variável, seja lá o que for que vai ser colchetes e então você dá um caso. Então o caso vai ser Caleb. E então, se o caso for Caleb, você poderia dizer Conselho ponto log uh, Caleb. E depois dizemos “pausa”. E isso é como uma instrução if Onley em vez de usar chaves, estavam usando dois pontos. E em vez desta chave encaracolada, estamos usando a palavra quebra. Veremos a palavra quebrar muito mais quando chegarmos aos loops de fio. Quatro loops para cada loop, coisas assim lá poderíamos dar outro caso. Qualquer outro nome que possamos dizer, Nathan Cônsul Dot Log. Oi, Nathan Break. E então poderíamos dizer assim por diante e assim por diante e assim por diante. Ou se quiséssemos pegar qualquer outro cenário, poderíamos apenas dizer ponto conselho padrão aviso não tratado e quebrar. Vamos em frente e vamos mudar de nome. São mudanças no membro da família. E vamos criar Var. Membro da família é igual para começar com Caleb, eu serei eu e diz: “ Oi, Oi, Caleb. E se eu mudasse para Nathan Hi, Nathan. E se eu mudasse para Wade? Não manuseado em 9 22 assim, não lidou com a linha 22. Então esta é basicamente a mesma maneira de fazer. E se mais se outra afirmação algumas pessoas como esta maneira, algumas pessoas gostam do if else se maneira, pessoalmente, eu me inclino para o if else se else maneira, ele só parece um pouco mais explícito. E nem todo mundo sabe sobre a funcionalidade do switch. Então, pode ser um pouco mais difícil para alguém que nunca viu uma instrução switch como esta antes descobrir o que está acontecendo, enquanto que cada programador que você encontrar saberá sobre se else if e else declarações. E uma coisa a observar aqui é tentar igualar o primeiro caso e parar. Então o que estamos dizendo aqui é que se o membro da família é Caleb, consola , caleb, e depois pára. Não faça nenhum dos outros, como aqui embaixo. Se o nome é igual a Caleb, então execute este. Mas não é. Então vai tentar fazer. Este não combina? - Não. Então ele vai tentar fazer isso. Isso combina? - Não. Então ele vai fazer a declaração de outra coisa. E esta declaração L é realmente opcional. Você não precisa ter isso em sua você pode dizer se o nome é Caleb Palavras para, ou Henry tomou medidas. E se for outra coisa, não faça nada. Você poderia acertar isso, então o que eu gostaria que você fizesse por alguma experiência prática aqui é certo. E se mais se outra afirmação não tem que ser grande, não tem que ser complexo, você sabe, como algo. O que eu tenho aqui, apenas um monte de registros de console. Isso está totalmente bem. Eu só quero que você tenha alguma experiência com a sintaxe else if e realmente, quando se resume a esta intacta, apenas parece que alguém pegou uma declaração If como esta aqui em cima e em sua outra declaração, Eles só colaram. Isso é tudo o que é para dar uma chance. Não se esqueça de se divertir com isso, e quando acabar com isso, vamos para a próxima lição. 17. Comentários de código: Ok, bem-vindo de volta a outra lição sobre aprender JavaScript. Nós vamos falar sobre comentários de código agora, geralmente, em um curso, em um curso, eu coloquei comentários de código em primeiro lugar, mas francamente, eles são chatos. Infelizmente, eles também são super úteis, e faz sentido aprendê-los. E então eu meio que queria adiar isso e chegar a algumas coisas do financiador antes de entrarmos em, você sabe, você sabe, coisas que não são tão divertidas como comentários de código. Então, neste momento, se você não sabe o que é um comentário de código, você deveria perguntar ao Caleb. O que é um comentário de código? Bem, um comentário de código é basicamente uma maneira de pegar um pedaço de código que você escreveu e dizer ao seu navegador para não executá-lo. Então eu tenho um exemplo aqui. Comentário do log do console Uma extremidade para e se eu atualizar minha página, vamos apenas ver comentário. Um e dois. Na verdade, vamos fazer dois aparecerem quatro vezes para um comentário um e depois 222 e dois. Então vamos dizer que temos um monte de código aqui em uma linha e nós não queremos que ele seja executado em tudo. Nós dizemos, Ei , javascript, não executá-lo e tudo o que fazemos é colocar uma barra com outra barra juntos, e isso cria um comentário de linha única. Então, se eu salvar isso e atualizar comentário, um não aparece mais aqui. Agora, quando se trata de multi-linha comentários, a maioria dos editores que você pode bater como um comando barra shorts como CMD mais Slash. Ou se você estiver no Windows, geralmente é barra de controle algo assim, e você pode selecionar todas essas linhas e você pode comentar todas elas ao mesmo tempo. Mas isso não é um comentário multi-linha que está comentando cada linha individualmente. Então, se quiséssemos nos livrar de todos eles, faríamos barra e depois um asterisco, e então no final faríamos um asterisco e depois uma barra, e isso vai comentar tudo entre esses dois pontos. Então, se você remover o espaço, você verá que meu código fica cinza, e isso vai continuar para sempre e sempre. Então, se eu fizer conselho, você pode ver que meu código ainda é o registro de pontos do cônsul do ano cinza. Eu apareço e vamos nos livrar dessa? Oh, olhe para isso. Na verdade, há um erro de sintaxe porque o comentário nunca foi fechado. Mas se fizermos asterisco e, em seguida, um corte logo após aquele ditado, Ei, tudo entre aqui apenas comentou. Então poupe refrescante. Eu apareço? Sim, você faz. Você aparece porque todas as outras linhas Air comentaram. Então vamos ver nossa fonte de página e podemos ver que há um comentário aqui, e há um comentário, um comentário multi-linha aqui se livrar de todo o número dois. Você também pode comentar o fim de uma linha também. Então, em vez de apenas ter um comentário no início, você poderia ter um comentário depois dele para que você pudesse salvar nosso nome é igual a Caleb. E então, se você quiser fazer uma nota de código um comentário de código quando você colocar duas barras depois e dizer, este é o meu nome e isso não vai ser executado também. Mas como alguém como outro desenvolvedor olha para o seu Cohen diz nome Var. O que é que isso deveria ser? Que tipo de nome é esse para ser o nome de uma pessoa e dizer Este é o meu nome? Tudo bem, bem, eu sei que é o nome dos desenvolvedores agora, então eu posso atualizar. E só diz que sempre que me refresco, eu apareço? Sim, você aparece. E quando eu atualizar este nome var é Caleb e vamos ter certeza de que ele ainda funciona que está indo aqui e digite um nome. O nome é Caleb ha ha. Olhe para isso. E qualquer coisa aqui à direita das tuas barras duplas não vai aparecer. Isso vai ser comentado. Então, seguindo em frente, você vai me ver fazendo muito mais comentários de código. Esta é uma maneira muito boa de escrever um monte de código que realmente não precisa executar , e também é uma maneira muito boa de, assim como testar as coisas fora. Então, se você quer um cônsul longo algo e você não tem certeza se você está indo para usá-lo mais tarde , apenas comentou ou um comentário incomum para comentar sobre comentário. Isso é tudo o que há para codificar comentários não super interessantes como um tópico para aprender , mas muito, muito importante, e você vai ver isso em todos os lugares em cada linguagem de programação, você verá comentários de código em todos os lugares 18. Introdução à Aritmética: Certo, vamos falar um pouco sobre aritmética. Basicamente, essa é uma palavra chique para matemática. Você sabe, multiplicação divisão adição, subtração ligada. Então você tem coisas como módulos, que são remanescentes e expoentes, e isso é realmente tudo o que há para ele. E então, você sabe, há algumas funções extras que poderíamos entrar para, tipo, assinar e assinar. E eu só estou brincando. Não vamos fazer todas essas coisas. Vamos trabalhar com as coisas básicas por enquanto. Na verdade, é só com isso que vamos trabalhar, porque quando se trata de codificação quando se trata de programação, acontece que a maioria de nós programamos ar. Na verdade, somos meio preguiçosos, e não estamos interessados em escrever todo tipo de matemática complicada. Não queremos entrar em cálculos, algoritmos e coisas assim. Sim, algoritmos são uma palavra-chave, e é divertido falar sobre isso. Mas no final do dia, queremos passar oito horas por dia escrevendo que honestamente sabemos que a maioria de nós não sabe. E a coisa boa sobre o revestimento é que você não precisa. Você pode escapar com uma matemática simples e simples. E então neste vídeo, vamos aprender um pouco sobre isso. Você sabe, algumas das aritméticas básicas por trás do JavaScript e realmente, nós vamos apenas ficar com adição de multiplicação, subtração e divisão. Ok, então vamos em frente e vamos criar uma variável aqui. Então temos variável Número um é igual a 100, então temos variável. Dois é igual a eu não sei, digamos 33.5. Estou honestamente inventando números neste momento. Agora. Se quiséssemos fazer, digamos, dividir esses números, digamos que queríamos dividir 100 por 33. Nós poderíamos fazer dormente um dividido por dormente para e você pode realmente ver que isso vai me dar o número exato aqui em baixo. Então esta é a divisão. É só uma faixa. Isso é tudo o que é. E se quiséssemos multiplicar esses números, é apenas o asterisco. Então você faz, Ah, muda e depois o número oito e você vai ter um asterisco, embora em alguns teclados que pode ser um pouco diferente. Mas em um teclado padrão, é o turno oito para obter esse asterisco, e você vai fazer a subtração de multiplicação é apenas um traço, e a adição é apenas um sinal de mais, e isso é tudo o que há para ele. E honestamente, é muito raro usar algo mais avançado do que isso. Ocasionalmente, entraremos em algo como o Módulo ISS, que lhe dará o restante de algo. Então, se fizemos 10 módulo ISS três bem, 10 dividido por três vai três vezes e então há um restante de uns que foi 369 e depois 10. Menos nove é um. Basicamente é só lembrar da Long Division. Bem, é assim. E então esse é o restante. E então nós também temos expoentes, que é apenas para sinais de multiplicação juntos. Agora há uma regra. Quando você está trabalhando com fórmulas maiores, você também quer ter em mente. Ah, a regra da massa do leito e na verdade é um acrônimo diferente para várias áreas diferentes do mundo. Mas do jeito que me lembro é a massa da cama. Você tem colchetes, expoentes divisão e, em seguida, multiplicação, e, em seguida, adição adicional , subtração barra que vem primeiro sub. Eu não sei soletrar essa aparentemente sub-atração, e então a idéia aqui é que sempre que você tem matemática avançada, não é muito avançada, mas é um pouco mais avançada. Acho que sim. Há uma ordem de operações e é bagunça na cama. Então, sempre que você vir colchetes, faça seus colchetes primeiro, faça a matemática dentro desse primeiro, depois os expoentes dentro desses colchetes, depois divisão e multiplicação, o que vem primeiro de da esquerda para a direita e, em seguida, adição ou subtração, ocorrer primeiro da esquerda para a direita. Então, um exemplo disso seria se quiséssemos descobrir o que 30 graus Celsius está em Fahrenheit para que pudéssemos fazer Celsius é igual a 30. E depois descobrir qual é a resposta. Bem, você poderia ver o Time 1.8 mais 32 e realmente se livrar do See, que deve ser uma prévia para nós. Lá vamos nós. Então é 86 F Agora. A ordem das operações em que isso se torna importante é que fizemos isso de trás para frente mais 32 vezes , 1.8. Tínhamos um número um pouco diferente, e embora isso não seja grande coisa, é apenas 1,6 graus de diferença em, você sabe, temperaturas climáticas regulares. Se você estivesse 1,6 graus fora em um círculo, isso poderia ser significativamente diferente especialmente se você está tentando apontar um telescópio para talvez uma estrela em particular. Bem, você vai sentir falta disso por muito tempo. E então este é apenas um exemplo simples. Mas sua ordem de operações é importante. E então isso é o mesmo que, você sabe, fazer seus suportes primeiro. Então você tem C, que é 30 multiplicado por 1.8 mais 32. E então ele vai fazer isso primeiro e, em seguida, o que quer que seja, ele vai adicionar 32 em cima dele. E isso é um curso super rápido de álgebra básica. Apenas seja uma ordem simples de operações. E novamente, você realmente não precisa saber muito sobre isso porque, na maioria das vezes, nós não fazemos muita matemática até que nós entrámos, tipo, realmente nitty gritty de algo super complexo. E para a maioria de nós, isso não acontece. Então esta foi a sua introdução à aritmética. Apenas como um resumo rápido. Aqui você tem um número dividido por dormente para então você tem um sinal de divisão aqui. A multiplicação é o seu asterisco. Subtração é apenas um traço. Apenas o sinal de subtrair e, em seguida, o sinal de mais para adicionar. E se você quisesse módulo iss. Você poderia usar o sinal de porcentagem. E se você quiser isso e expoentes, eu não tenho idéia do que isso vai ser útil. Sim, como um grande número. Você usa dois asteriscos lado a lado, então parece multiplicar, multiplicar, que é expoentes. 19. Lógica boolean: Tudo bem, vamos nos apresentar a um novo tipo de dados chamado booleano, e você vê que aqui e de novo, este é apenas um termo de programadores chique para algo é verdadeiro ou falso. É isso. Ou é um ou zero, verdadeiro ou falso, dentro ou fora preto e branco dia e noite. Não há no meio. E você sabe como as pessoas sempre pensam que robôs ou máquinas só pensam em preto e branco. Bem, eles não estão totalmente errados porque muita lógica se resume a verdadeira e falsa, e não há muita doação entre o seu enfraquecimento agora. Sabe, quando se trata de aprendizado de máquina, podemos dar uma resposta como 0,6, e isso se inclina mais para verdade do que falso, e podemos trabalhar com isso. Mas isso não é o mesmo que a lógica booleana. Sabemos que 0.6 é um número, e a Lógica Booleana é verdadeira ou falsa, então podemos trabalhar conosco de algumas maneiras diferentes. Mas primeiro e acima de tudo, vamos em frente e criar um script, e neste script, vamos em frente e criar uma variável booleana. Então é criativo. Variável é cat é igual a true. Então vamos falar do meu gato Zephyr. E podemos dizer: Meu gato é um gato para verdadeiro ou falso? E assim poderíamos dizer em uma comparação Operador é gato, e assim podemos realmente fazer isso. Algumas maneiras que podemos fazer é Cat é igual a true, que é a maneira mais explícita de escrevê-lo. Mas isso é meio desnecessário, porque quando você faz qualquer tipo de operador de comparação, ele está sempre verificando se essa afirmação acaba por ser verdadeira. E enquanto isso já é verdade, então nós poderíamos cortar isso e apenas dizer é gato. Era um registro de pontos de console. Zephyr é um gato, e vamos em frente e inspetores e abrir nosso Conselho Conselho Conselho Conselho Conselho. Na verdade, é trocado na parte inferior. Aqui vamos nós, e diz que Zephyr é um gato, e se quiséssemos que isso fosse falso, poderíamos apenas dizer, “ Ei, você sabe o que é falso gato? Talvez eu tenha um cachorro e o chamei de Zephyr também. E nada vai aparecer, No entanto, porque sabemos sobre a outra declaração podemos agora dizer conselho ponto log não é um gato e lá vamos nós. E agora podemos falar sobre verdadeiro e falso é um gato não é um gato. Poderíamos até ficar muito mais complicados com isso se quiséssemos. E poderíamos pedir ao usuário um nome para que pudéssemos dizer de nosso nome é igual a prompt e seu nome Se o nome ponto para minúsculas é igual a vamos fazer que menor é sempre é gato é igual a true. Vamos em frente hoje à noite para um vírus. Bem, caso contrário, vamos salvar nosso gato é igual a falso e eu estou quase jogando ponto e vírgula aqui. Eles não são necessários, mas uma boa prática para estar de qualquer maneira porque todo JavaScript, uma vez compilado em produção fica Min ified e apertado, e tudo se torna uma linha de javascript e assim ele eventualmente coloca ponto-e-vírgula lá qualquer maneira, por isso é uma boa prática para ter, mas nem sempre necessário. E então poderíamos dizer aqui, você sabe, na verdade, na vida real teríamos alguma outra lógica e aqui, baseado na variável, é gato. E então poderíamos dizer se é alerta de gato. Você é um gato gatinho. E temos um imune a Miami agora. Alerta. Você não é um gato. Você não é uma criança. Ele conseguiu em tudo. Ok, então eu atualizo. E se passarmos por isto vai pedir-me o nome no teu nome. Ok, eu vou digitar é Zephyr. Vou soletrar, certo? Esses esforços, e vai pegar esse nome em minúsculas e verificar se combina. Em minúsculas sempre. Então eu bati. Está bem, e diz que o teu gato diz “Vai em frente”. Diz que está bem, tem variável aqui. É Cat é igual a true. Faz alguma lógica algumas outras coisas mágicas nos bastidores e, em seguida, com outra declaração If ,se é um alerta gato, , você é um gato. E então essa é a sua introdução básica na lógica booleana. Agora há outra maneira de fazermos isto. Podemos atalho no If e Ellis. Então vamos em frente. E quer saber? Sim, vamos ficar com isso. Eu gosto disso. Isso está lá dentro. Isso está tornando nossos programas um pouco mais complicados, então também podemos atalho para a declaração if else. Então, se só quiséssemos verificar se algo era falso. Nós poderíamos fazer. Se é. Cat é igual a falso alerta, não um gato. Então vamos em frente, e eu vou dar a isso um padrão também, então eu não tenho que assumir isso uma e outra vez e outra vez. Zephyr. Você é um gato que está executando a linha 21 aqui em baixo. E nada porque não era falso, então isso não funcionou. Mas e se dissermos Henry, meus outros gatos? Ele diz que você não é um gato que executa a Linha 23 também vai executar linhas 27 a 29 diz que não é um gato. Isso é bem aqui. Agora também podemos atalhos da mesma forma que fizemos. Se é gato, podemos fazer o oposto dizendo, trabalho de exclamação é gato. Isto é dizer falso. Então vamos em frente. E o que eu vou fazer aqui é ir em frente e colocar isso em linhas separadas. Vamos mover isso para que você possa realmente vê-lo. Então isso também vai ser falso. Então isso está basicamente dizendo que se o gato é falso, vamos tirar isso. Se for, gato é falso. Isso é o que isso está dizendo aqui você também poderia, se você quisesse, Você poderia dizer, Se é gato não é igual a verdade, ele só será sempre verdadeiro ou falso. Então, se isso é falso do que isso, é o bloco falso para executar, execute. E assim existem várias maneiras diferentes de fazer isso. Geralmente, a maneira mais comum que você vai ver isso na natureza é se é gato porque isso é falso. É o caminho mais curto para a direita se não for um gato, e então se formos para o nosso conselho aqui temos uma variável chamada Is Cat. É falso. E se fizermos tipo de gato, vamos ver que é um booleano agora. Uma coisa que eu pulei sobre que eu não queria pular foi quando você tem um booleano onde ouvimos VAR é, gato é igual a verdadeiro ou falso. Nós não colocá-lo entre aspas como esta porque é uma string que não é a mesma true ou false. Uma string pode ser qualquer número de caracteres letras que pode misturar e combinar espaços e caracteres especiais e tudo o que Boolean não pode ser um Booleano só pode ser verdadeiro ou falso. E então este é um, eu acho, um curso muito bom para a lógica booleana. Realmente não fica mais complicado do que isso. A parte mais complicada é quando você vê se afirmações como esta. Então, se é gato quando o seu primeiro olhar para isso, se você nunca viu uma declaração se antes, você provavelmente está pensando, o que isso significa? Bem, isso está dizendo que é verdade e se você ver se ponto de exclamação é gato, é o mesmo que dizer se o gato é falso, então você sabe, agradável e simples assim. O que eu gostaria que você fizesse, no entanto, é que você sabe, apenas mexer com isso tem uma idéia de como a lógica booleana funciona e apenas criar algumas declarações se else usando lógica booleana, você está indo para ver bilhões todos os dias. É a maneira mais rápida de obter uma resposta de sim ou não. E mais uma coisa antes de irmos. lógica booleana também pode ser representada por uns e zeros. Quase me esqueci que isso é importante aqui. Vamos descer aqui, abrir espaço. Poderíamos também dizer que longe é gato é igual a um, então este é o mesmo que verdadeiro, e Var é gato é igual a zero. Isso é falso, e isso funciona em quase todas as linguagens de programação. Se é Cata porque isso será verdade. Ou você também poderia dizer, Se é gato e isso será falso, algo ao longo dessas linhas e que vai funcionar totalmente para você. Então, talvez também dê uma chance. Tente atribuir uma variável a true ou false e, em seguida, tente atribuir a variável 21 ou zero e apenas brincar com algumas instruções if else . 20. Como criar listas com matrizes: Olá e bem-vindos de volta neste vídeo, vamos falar sobre algo chamado Array. Agora, com todas as coisas desenvolvedor relacionado e matriz é apenas um termo extravagante para ah lista. Isso é tudo o que é. Nós vamos apenas criar ah, lista de variáveis pode ser, ah, lista de cordas, ins booleanos. Poderíamos fazer uma lista de listas, se quiséssemos. E em algumas línguas, como Python, nós até chamamos de lista. Mas em JavaScript é chamado de uma matriz. Então vamos em frente e fazer isso maior porque eu acho que nós podemos fazer tudo isso sem realmente escrever qualquer código em um arquivo. E então uma matriz é muito, muito fácil de criar, então há algumas maneiras diferentes de criar uma matriz, mas poderíamos dizer como uma variável R r, um R é igual a. E então temos um suporte rígido de abertura e fechamento, e dentro dele, colocamos Talvez eu coloque meu nome e então uma vírgula e então porque é uma corda, você coloca aspas em torno dele e então coloca o nome do meu gato Zephyr e então Akama. E então, se eu quisesse, eu poderia colocar a verdade aqui como um booleano, mas falso. E há um booleano que eu poderia colocar minha idade lá. Eu poderia colocar o agente Zephyrs lá. Agora nada disso é mapeado, então não é realmente compreensível com o que todos esses dados realmente se relacionam. Mas se nós pudéssemos mudar tudo isso e dizer que eles são não, não é assim chamado de um são, vamos chamá-lo de nomes é igual a uma lista de nomes que poderíamos dizer, Caleb Zephyr, Henry e um cão Oh, não vá lá nós vamos e apenas hit, Enter. E mesmo que tentemos acessá-lo novamente, temos uma lista aqui e diz entre parênteses que há quatro. Isso significa que há quatro itens para que possamos ver. E aqui temos essas coisas chamadas Índices. Estes números de ar. É o seu valor de índice. Então começa em zero porque o computador começa a contar em zero. Então, zero Caleb um é esforço para Henry Três Dog. Oh, agora não só podemos percorrer todos esses valores diferentes e você sabe, desempenho ou inação neles, nós podemos pegar cada um individualmente também. Então poderíamos dizer var. Caleb é igual a nomes e se eu quisesse pegar um, eu poderia pegar. Digamos zero. Agora, se isso for um pouco confuso, você sempre pode testar isso em seu console também. Então são nomes, e então você tem seu suporte rígido e, em seguida, seu número de índice, então eu quero o número zero. Então este zero aqui vai coincidir com este zero aqui e vai dizer, Caleb, Caleb, e se eu quiser um cão Oh, eu usaria o índice número três e novamente computadores começam a contar no número zero para um humano, O número zero não significa nada. Não há nada lá para um computador, os computadores dizem, Oh, o número zero é na verdade um número porque um computador não entende o conceito de nada. Tecnicamente, ele só entende que há um número e é zero, então começa no número zero. Então, se quisermos um cão Oh, usaríamos o nome do suporte rígido matriz e, em seguida, o número de índice e, em seguida, um suporte rígido de fechamento. E poderíamos chamar isso se quiséssemos. Ir é igual a, e então podemos fazer o que quisermos com Douglas para fazer o cachorro maiúsculo. Oh, em todas as maiúsculas, assim. Então é assim que basicamente criamos uma matriz. Há outra maneira de criar um array. Poderíamos fazer uma série de números. Vamos chamá-lo entorpecido é igual a, e podemos apenas dar-lhe um array real. Chamamos “Array “com “A “maiúsculo e então poderíamos fazer 1 99, sei lá, 23 e você pode ver que ele criou exatamente o mesmo objeto. Então você sabe, você tem os suportes duros por aqui. Temos índices aqui para fazermos dormentes. Isto vai ficar um pouco confuso, mas dormente também. Se fizermos o nome da variável dormente e colocarmos o índice de dois lá vai mapear para o número 23 então, certeza, ele faz. Ele mapeia para o número 23 agora. Ok, vamos limpar isso e vamos trabalhar com nomes. Se pegarmos nomes, nosso conselho automaticamente nos diz que há quatro itens lá dentro. E se quisermos verificar se existem realmente quatro itens? Bem, nós poderíamos fazer nomes comprimento ponto e esta é uma propriedade sobre os nomes objeto vai falar mais sobre propriedades e objetos e métodos e todos os tipos de coisas complexas um pouco abaixo da estrada. Mas por enquanto, você pode saber que se você fizer o comprimento do ponto, você vai obter o número total de itens em sua matriz. E essa é a força que quatro aqui corresponde a que para o seu agora também temos uma variável chamada Dog. Oh, e isso é uma corda. Então isso está fora do escopo desta lição em particular. Mas também podemos usar comprimento no DA Go para obter o número total de caracteres. Então, há uma diferença aqui. A diferença sendo nomes é uma matriz, e é aqui que tipos de dados é realmente importante que saibamos com que tipo de dados estamos trabalhando. Seus nomes é uma matriz, e se usarmos o comprimento do ponto vai obter o número total de itens em seu enquanto cão oh é uma string. E se usarmos o comprimento do ponto, ele nos dá o número total de caracteres lá dentro. E só para sabermos que trabalhar com o cão deles Oh é na verdade o Dogg. Oh, então há cinco caracteres e é por isso que voltou cinco aqui agora. OK, isso é legal. Isso é uma matriz. Então você sabe, nós temos duas maneiras diferentes de criar uma matriz que poderíamos fazer. A R é igual a um array com nossos itens lá. Ou podemos fazer o caminho abreviado e usar suportes duros. Eu gosto de usar os suportes duros, mas ocasionalmente eu uso um R R K. Por que apenas para ser super explícito, dependendo do código que eu estou trabalhando por isso. Mas isso depende de você o jeito que você quer fazer. Nenhum dos dois lados é errado. De nenhum jeito, certo? Ok, vamos dar uma olhada em adicionar algo a uma matriz. Então temos uma matriz chamada nomes, e queremos adicionar mais uma pessoa aqui ou mais um nome ou talvez mais um animal de estimação. Vamos em frente e dizer nomes dot push e queremos empurrar algo para esta matriz. Vamos colocar a palavra papagaio lá, e você verá que ela retornou automaticamente o número de itens na matriz, e se pegarmos nomes novamente, podemos ver que há o cachorro Henry do Caleb. E o novo pai e o número total de itens são cinco agora, se quisermos tirar algo daqui. E o novo pai e o número total de itens são cinco agora, O que podemos cortar? Então vamos dizer que queríamos obter Ah, os 2 primeiros itens aqui poderíamos fazer dois itens é igual a nomes ponto fatia Onde começar, onde terminar começou? Zero. E isso também. E aqui vamos nós. Temos dois itens que temos, Caleb acaba com o esforço. E então ele apenas cortou a matriz e meio que disse, você sabe o que, cortá-la para baixo este tipo de linha central. Você está quase na linha central e remover Henry Dog um pai. Na verdade, o que ele está dizendo é Copiar Caleb em Zephyr e colocar isso em uma nova matriz chamada dois itens. Agora, se nós só quiséssemos obter o último item e você vai ver este muito, também, nós usamos dot pop, nós usamos dot pop, e isso é o mesmo em várias linguagens de programação. É claro que temos nomes aqui e queremos o Papagaio. Vamos em frente e criar uma nova variável chamada Parrot é igual a nomes dot pop, e isso é apenas ponto pop com parênteses em torno dele e assistir este Perritt é agora igual a papagaio. Se fizemos tipo de pai, e isso vai ser uma string porque ele não retornou uma matriz. Acabou de devolver este último item no ano. Mas, mais interessante, o que fez foi, se escrevermos nomes, ele realmente se livrou dos pais. O que ele fez foi dentro pegar o último item na matriz, na verdade removê-lo daquele array e colocá-lo em qualquer lugar. Agora, nós não necessariamente temos que armazenar isso em uma variável também. Poderíamos fazer nomes dot pop, e isso não vai armazenar o último em lugar algum. Então, o último é o cão. Oh, ele retorna, cão. Oh, mas nós não começamos e variável, então não é mais acessível para nós. E se escrevermos nomes, só temos três nomes. E então esta é uma boa introdução em um aumento A. Ficar muito, muito poderoso quando tivermos grampos Maurin. Então, por exemplo, para cada nome em nomes que recebemos dizer olá. Meu nome é Caleb. Olá. Meu nome é “Olá”. Meu nome é Henry. Nós acertamos em três linhas que uma e outra e outra vez. E se esta matriz tivesse 100 itens de comprimento ainda teríamos que escrever apenas três linhas de código versus ter que agora dizer conselho esse registro. Meu nome é Caleb, e depois o registro do consulado. Meu nome é sempre considerar log. Meu nome é Henry Constant Log. Meu nome é Dog. Oh, você entendeu o ponto. Assim por diante e assim por diante. Vamos falar muito mais sobre um aumento na estrada. Mas por enquanto, você está agora totalmente introduzido no mundo de um aumento no novo tipo de dados chamado uma matriz. E assim como uma rápida recapitulação da coisa mais importante que você pode saber sobre um array agora são os índices. Então, se fizermos isto, abrimos isto. Se quiséssemos obter o esforço dele, qual em C usaríamos? Usaríamos o número um. Não é o primeiro item, porque o primeiro é o Caleb. É o segundo item. E então nós colocamos cada número por menos um, porque o computador começa a contar em zero. Essa é a chave para tirar daqui. Então eu recomendo vivamente que você tenha um pouco de experiência escrevendo um aumento. Você não tem que fazer muito com eles. Você poderia apenas criar uma matriz simples com nomes e, em seguida, talvez apenas obter o do meio usando um índice. Caso contrário, se você já se sentir bem confortável com isso, vamos para a próxima lição. 21. Como verificar tipos variáveis: Tudo bem. Até agora, aprendemos sobre cordas, números, matrizes, entradas booleanas, e há mais algumas que vamos aprender no caminho. Mas por enquanto, eu gostaria de explicar uma função específica que eu tenho usado para mostrar se algo é um booleano ou uma string, um array ou um número. Agora, por trás de tudo isso, esses diferentes tipos de variáveis é essa coisa chamada de tipo de dados ou, em alguns idiomas, uma estrutura de dados. Então vamos em frente e olhar para alguns desses. Então é criar da nossa idade é igual a 30. Ok, nós sabemos que isso é um número, mas o que Javascript acha que é? Acha que é um número de cordas? Algo assim? Vamos criar outro em seu nome Vyron é igual a JavaScript. Quatro iniciantes. O que o JavaScript acha? Esta variável é? Var. Você sabe que já fizemos isso. Seu gato, verdadeiro ou falso? E vamos criar mais um dos nossos carros é igual a pessoas Wagon Lambeau e Audie Audio. A Audie. Algo assim. Vamos sim, vamos colocar isso em uma linha de novo. Então, quando atualizarmos sua página, não veremos nada acontecer. Declaramos um monte de variáveis, mas não estamos fazendo nada com elas. Vamos continuar e registrar cada um dos consoles. Então, a idade do registro do cônsul é. E aqui vamos usar uma função chamada Type Of e simplesmente vai dizer idades e, em seguida, o que realmente é. Vamos em frente e salvar-nos. Vamos ver idades um número que é o tipo de variável ou o tipo de dados. Vamos em frente e criar outro aqui. Digamos que o nome é o nome deste curso. Seja lá o que for, o gato vai fazer . Fazer é cata. E por último, temos carros. Os dados de dados são todos carros? Ok, então antes de eu atualizar minha página realmente vai fazer algum espaço aqui para que isso realmente parece um pouco borda uma bola, nós sabemos que idade é um número, JavaScript nos disse que é um número. O que você acha? nome é de O que você acha que gato é e o que você acha que carros são? Em algum momento, passamos por tudo isso, mas não exploramos totalmente seus tipos de dados. Quero dizer, nós meio que temos, em certo sentido, mas não completamente assim. Se eu acertar, Atualizar nesta página irá nos salvar e clicar em Atualizar. Vamos ver que a idade é um número. Nome é uma string é Cat é um booleano e carros é um array, então idade é um número. Nome é uma corda é gato é um 1.000.000.000 carros é Oh, o que é isso? Não é uma matriz. Bem, isso é interessante. Mesmo que dissemos para ser um array, é na verdade uma coisa chamada objeto. E curiosamente, mesmo se fizermos isso, fazer, fazer, fazer, fazer, fazer, fazer, fazer, fazer, vamos em frente e nos mudar para a matriz de palavras. Vamos ver que isso não muda Hit, Refresh, e ainda diz que carros são um objeto. O que há com isso? Bem, em JavaScript e em muitas outras linguagens, linguagens programação orientadas a objetos. Temos essa idéia de um objeto, e um objeto realmente é apenas uma estrutura de dados que permite que você tenha vários componentes nele . Enquanto que uma idade neste caso, um número é apenas um número. Você realmente não pode fazer muito com isso você não pode transformá-lo em maiúsculas ou minúsculas. Você não pode estourar, então você não pode se livrar, você sabe, do último item, porque só há um item aqui. Nem sequer é uma lista ou uma matriz. Não podemos fazer nada com isso. Não podemos adicionar muitas funções personalizadas a ele. É apenas um número, enquanto que com a variável chamada carros, é um objeto e podemos realmente fazer muito mais com objetos. Vamos em frente e dar uma olhada neste ponto carros rápidos reais e tudo o que eu tenho que fazer Você pode ver que ele diz, Pode matriz Cat aqui é hit ponto e, em seguida, basta rolar para baixo e você pode ver todas essas coisas diferentes que eu posso executar sobre este tipo específico de objeto. Agora vamos entrar em objetos muito mais em profundidade na estrada. Então você não precisa se preocupar em saber a diferença entre um array e um objeto agora, porque sim, bem, cobrir totalmente isso neste curso. Mas a coisa que eu queria fazer você ciente de é diferentes tipos de dados usando o tipo de função de um tipo de carros, e isso nos dá um objeto. Por que isso é importante? Bem, vamos dar uma olhada na diferença entre uma propriedade em particular. Então, se envelhecermos, pontuar o que não temos idade, querida. Isso é porque há um número. Não há comprimento para um número. Quero dizer, em termos humanos há. Mas para um computador, não há. Só diz que o número. Quero dizer, o que você quer para mim? E o número é o número, e assim os números são bastante básicos. Se dissemos nome dot length, sabemos que esta é uma string. Se nós nomeamos o comprimento do ponto sabemos que este é, em particular, uma string, então ele vai contar o número de caracteres nele. Então J a v A S e r I p t espaço para o espaço b e g i N N e. R s 22 caracteres agora o que se fizéssemos é comprimento ponto gato indefinido. Nem sequer tem uma propriedade chamada comprimento. mesma coisa com números não tem uma propriedade chamada como não podemos usar isso, mas com carros porque é um objeto ou como atualmente conhecemos como uma matriz, podemos fazer o comprimento do ponto e isso retornará três. Onde isso fica importante saber é se eu fiz isso errado, se fizemos, se fizemos carros ponto comprimento, nós vamos obter três como o número total de carros que temos. Volkswagen, Lambo e Audie. Mas se fizéssemos o nome do comprimento do ponto, ignore o que eu estraguei com o erro de digitação. Se não o comprimento do ponto do jogo, vamos obter o número total de personagens, e então isso é muito diferente. Então, se você tentar fazer o comprimento do ponto em uma string versus o comprimento do ponto em uma matriz, você vai obter respostas diferentes. E isso pode mudar sua lógica no caminho, você pode dizer, se o Array tem cinco nomes e faz alguma coisa. Mas se a sua lógica diz, se o comprimento do ponto variável é igual a cinco e alguém apenas digita uma palavra com cinco letras , isso também vai ser acionado. E então essa é uma espécie de diferença entre os tipos de dados é, você sabe, alguns deles têm certas funções ou propriedades sobre eles que podemos usar, e alguns deles não, e então você inevitavelmente vai correr para isso na estrada onde você como, oh comprimento ponto no nome é 22, mas o comprimento do ponto em carros é três. Por que é isso? Porque quando conto carros, também há. Mais cinco é sete mais quatro é 11. Então você acha que retorno 11. Mas não, não faz. Ele retorna três faz com que três itens lá. Agora você não vai precisar disso imediatamente. Mas é muito bom saber, e eu tenho sido de vez em quando mostrando a função chamada o tipo de apenas para mostrar o que é isso. Então, se você estiver preocupado com o que uma determinada variável é ou qual é o tipo de dados, você sempre pode usar o tipo de função de, colocar seu nome de variável lá com parênteses em torno dela e apenas se parece com isso. E isso vai te dizer Oh, eu sou um booleano. Oh, eu sou um objeto. Eu sou um número. Então não há nada que você tenha a ver com essa lição em particular. Eu só queria mostrar-lhe isso só para que você esteja ciente porque você vai se deparar com este assunto no caminho, e eu só queria que você estivesse preparado para isso 22. Casting variável: Tudo bem, nós olhamos para verificar tipos de variáveis. Analisamos diferentes tipos de dados ou tipos de variáveis. Sabemos sobre números, cordas booleanas, matrizes, coisas assim. Mas ocasionalmente você vai querer fazer essa coisa chamada digitação. Então, se você tem, por exemplo, ah, idade variável é igual a 30 e você quer que este seja um número bem, atualmente, este é um string. Vamos fazer conselho não registrar o tipo de idade, e ele diz que é uma string, mas na verdade é um número, apenas tem citações em torno dele. Então o que nós o que nós podemos dio é essa coisa chamada casting tipo, onde basicamente, nós pegamos uma variável particular e nós tentamos muito forçosamente transformá-la em um tipo diferente de variável. Assim, por exemplo, idade que poderíamos digitar nos lançar como um número digitando número com a extremidade maiúscula e depois idade. E se atualizarmos isso, agora diz que é um número. Então é assim que nós digitalizaríamos em número. Agora, onde isso fica importante é, digamos que você está pedindo para a idade de alguém até agora, idade é igual para alertar sua idade é, e isso é o tipo de registro do conselho ponto de idade, e nós vamos ver aqui, Vou digitar 30 e vai dizer que é uma corda. O que pegamos em um número. Nós não digitamos uma força, mas porque ele não sabe o que você vai colocar em letras ou números ou verdadeiro ou falso , ele apenas assume que vai ser uma corda. Então, se escrevermos true, ainda é uma string. Mas o que podemos fazer é digitalizar isso agora para que possamos dizer que idade é igual a idade número, e quando fizermos isso, isso funcionará. No entanto, há uma pequena ressalva aqui quando tentamos fazer isso novamente e vamos digitar a palavra horas. Mas meu nome Caleb, diz que ainda é um número que é legal. Mas qual é esse número? Vamos digitar e envelhecer, diz Nan. Este é outro tipo de dados JavaScript, e A N não significa um número. Não é um número. Ele não sabe o que fazer com ele. E se nós atualizarmos sua página e vamos apenas digitar 123 e vamos verificar a idade aqui, ele diz 123 então ou vai funcionar ou não vai funcionar E então você tem que realmente saber quais seus dados devem ser. Se você está pedindo a idade de alguém, você sempre pode dizer, a idade é realmente número? E então agora podemos realmente tentar testar isso. Podemos dizer, Se alerta de idade, você tem um número adequado. Vamos dar uma chance, então é tipo Caleb, e isso não vai funcionar para mim, certo? Mas e se fizéssemos 30? Diz que você tem um número adequado, e isso é porque esse número realmente acabou por ser um número apropriado. E então quando estávamos aprendendo sobre bilhões, basicamente qualquer número em JavaScript que não é o número zero é verdade em alguns. Outra língua é que podem ser os opostos. Mas em Javascript, a menos que seja explicitamente zero, é sempre considerado verdadeiro. Nan é considerada falsa. Não é um número, mas se você der outro número, é verdade. Então isso funciona tão bem. Agora podemos dizer que temos um número adequado aqui. Podemos detectar se é um número real. Certo, agora temos um número adequado. Então agora o que podemos fazer é detectar se o número é algo. Agora, ainda não entramos em mais operadores de comparação, e isso é um pouco de uma prévia para a próxima dúzia. Mas podemos dizer que se a idade é maior ou igual a 18 Conselho ponto log, Você pode votar. Então agora isso vai me pedir a minha idade. Eu vou colocar um agente vai lançá-lo como um número vai dizer, isso é realmente número? Oh, é na verdade alerta numérico que você tem um número adequado e então vai dizer, Ei, Ei, se sua idade é acima do número de 18 você pode votar e assim diz que você tem um número adequado. E com certeza, você pode votar e também logs de console, o tipo de idade, que é um número que também podemos tomar. Lançar para o outro lado. Ele não tem que ser de uma corda para um número. Poderíamos ir de um número dois. Digamos que da nossa idade é igual a uma corda. Não. Nancy, o caminho errado da nossa idade é um número de 30 e queríamos dizer, na verdade, a idade vai ser uma corda que nos obrigou a ser um diálogo com o cônsul. Vamos colocar a idade lá e o tipo de idade. É uma corda agora. A coisa boa sobre isso é porque agora é uma corda que podemos fazer comprimento de ponto idade. Podemos ver que há dois caracteres lá dentro, enquanto que com um número não conseguimos fazer isso antes. E assim há benefícios para a digitação. Nós também podemos fazer isso com como Boolean é e coisas assim também. Então vamos tentar isso. Isso é se var é Cat é igual a sua uma corda, Mas vamos em frente e lançar isso como um booleano. Assim é Cat é igual a booleano de Is Cat, Então nós estamos apenas substituindo-se com ele mesmo como um booleano. Vamos ver o que acontece aqui. Isso é copiar isso para baixo e incomum. Isso e vamos mudar de idade para Cat. Olhe para isso. Na verdade, é verdade, e entendia que verdadeiro como uma palavra poderia ser confirmado tão verdadeiro quanto um booleano. E agora podemos dizer, se é gato ou se não é um gato, ok, e vamos fazer mais um aqui. Vamos fazer curso Var é igual a Js para iniciantes. Agora sabemos que esta é uma string já porque bem, nós declaramos como uma string. Assim que eu tinha espaços, colocamos citações em torno dele. Digamos que queremos transformar isso em uma matriz. O que poderíamos fazer é que o curso é igual ao array. Claro que sim. Então, agora, quando eu atualizar a página e nós fazemos curso uh huh olha para isso. Agora está em uma corrida. Só tem um item nele. Ele realmente só tem um em desy ou índice para Heather. Ah, mas é uma matriz. E então agora podemos fazer, por exemplo, duração do curso e obter quantos itens estão aqui? Bem, há apenas um que não é o mesmo que obter o comprimento de uma corda que seria mais de 10 qualquer que seja o número que vai ser. E, na verdade, poderíamos fazer isso. Claro que sim. Zero não comprimento. É 16 e assim enfraquecer typecast em basicamente qualquer outro tipo de dados em javascript. Tudo o que temos que fazer é dizer Ei, isso é um booleano. Ei, isso é uma corda. Ei, este é um array ou hey, este é um número e à medida que aprendemos mais tipos de dados, podemos criar novos também. Então, basicamente, é assim que lançamos variáveis, e isso é realmente tudo o que há para ele. E isso realmente ajuda quando você está usando certas propriedades ou métodos ou tentando descobrir como trabalhar com tipos de dados específicos novamente. Isso está se tornando cada vez mais relevante à medida que passamos por este curso, e torna-se cada vez mais relevante no JavaScript moderno. Portanto, é bom saber, mesmo que você não use todos os dias agora, você acabará por usá-lo um pouco no caminho. 23. Mais operadores de comparação: já. Vamos dar uma olhada em mais alguns operadores de comparação. Até agora, nós realmente só temos trabalhado com é igual ou não é igual a. E se algo é verdadeiro ou se algo é falso, há realmente muito mais enfraquecer Dio, por exemplo, por exemplo, podemos ver se algo não é igual ao que nós meio que nos envolvemos, mas não formalmente. Então vamos dar uma olhada nesse daqui a pouco. Nós também temos é maior do que ou igual a é maior do que é menor do que é menor ou igual Teoh. E então temos, por último, um operador de comparação rigoroso, que chegará ao final deste vídeo. Então, as primeiras coisas primeiro. Vamos olhar para o não é operador. Vamos comentar isso, então precisamos ser capazes de comparar. Algo não está. Nós meio que olhamos para isso antes, mas vamos formalmente dar uma olhada nisso agora. Então temos uma variável. E digamos que o curso é igual a apenas um curso JavaScript ou algo, você sabe, simples de comparar. E poderíamos dizer se o curso é igual a Js Conselho ponto log é curso Js. E vamos em frente, tornar esse pouco menor e atualizar nossa página. E diz, é um curso J. S regular. Certo, não há problema com isso. Mas e se não for? Bem, isso não vai fazer nada. Mas vamos mudar isso. Digamos que se o curso não é um curso J s, digamos que se o curso não é um curso PHP agora, essa lógica realmente não faz muito sentido. Mas é um bom exemplo de como usar o oposto. Um operador de comparação. Basicamente, estamos dizendo aqui. JavaScript. A string JavaScript não é igual ao PHP. Eles são diferentes? Está correto. Essa afirmação está correta, então ela retorna true. E então o que o computador vê nos bastidores é Yep. Se for verdade, o que é verdade, execute isto. E então é assim que chegamos a esse ponto usando o operador não ou o operador não é igual . Em vez disso, temos mais do que isso vamos em frente e criar uma idade. Idade é igual a 17 e podemos dizer se a idade é maior do que 10, em seguida, log de pontos console você pode jogar futebol ou algo ao longo dessas linhas. Vamos em frente e refrescantes. Diz que pode jogar futebol agora. O que isto está a fazer é outra vez. Basicamente, podemos substituir este dizendo um 17 maior que o número 10. Sim, é. Então esta declaração acaba por ser verdadeira, e porque é verdade, ele irá executar este bloco de código. Agora, o que acontece se dissermos, Oh, a fim de realmente jogar futebol profissional, você precisa ter 18 anos ou mais. Você pode jogar futebol profissional de novo. Vamos fazer isso um passo menor e vamos salvar isso. Nada acontece porque isso retorna falso. Isto quer dizer, se a idade 17 é maior que 18 era 17 um número maior do que 18 anos? Não, isso acaba por ser falso, então não é executado. Lembre-se se as declarações sempre precisam que a conclusão final seja verdadeira. Em seguida, podemos fazer a mesma coisa, mas podemos dizer que é maior ou igual a. Quando é que vamos usar isto? Enquanto digamos que sua idade é 18 anos e você precisa ter pelo menos 18 anos para votar, você pode votar. Nós também podemos fazer um outro se declaração aqui. Então, se a idade for maior do que igual a 21, estou propositadamente armando para nós falharmos neste caso, e eu vou mostrar-lhe em apenas um segundo, você pode beber álcool. Diz que pode votar. Mas isso também é verdade. A idade também é maior do que 21 agora. Aprendemos sobre isso há pouco tempo, mas é sempre bom retocar os fundamentos e JavaScript. Ele corre de cima para baixo e diz: “ Sim, Sim, isso é verdade. Esta é a declaração if que queremos nos conectar e não se preocupe com mais nada abaixo dela . Então, este mais se declaração é ignorado. Mas o que podemos fazer é se nos livrarmos do outro e apenas criarmos outro. Se declaração, ainda diz, você só pode votar. Mas se fizermos isso, diz, você pode votar e beber álcool. Agora, novamente, onde você usa algo assim? Bem, se você está verificando a idade de alguém, jovens de 18 anos podem votar. Não são pessoas maiores que 18 ou pessoas maiores que 17. Na vida, dizemos que as pessoas com 18 anos ou mais têm permissão para votar em pessoas com 21 anos ou mais nos Estados Unidos estão autorizadas a beber álcool. Nós também podemos fazer basicamente exatamente o oposto, então poderíamos dizer, mas isso é uma variável. Vamos fazer algo diferente aqui. Nome longo é igual a Caleb Tallinn, então esse será o meu nome completo. Não vamos usar muito tempo porque não é um nome longo. Mas vamos fazer o nome completo. E poderíamos dizer, se o nome completo ponto comprimento é maior que 10. Diário confidente, nome longo. E diz que tenho um longo jogo. Ok, bem, nós já fizemos isso. Mas e se for menos do que poderíamos dizer Este é um nome curto, É agora que podemos dizer, Ei, Ei, se este nome tem 012345678 ou nove caracteres nele porque é menor do que o número 10 isso vai dizer Nome curto. Ele não tem isso. Vamos em frente e encurtei meu nome para apenas meu primeiro nome e ele diz nome curto. Então isso é menos do que operador. Também podemos fazer menos ou igual a se quisermos. Vamos ter que o nosso nome é igual a John Smith o que temos aqui. Temos 10 caracteres aqui. É um nome perfeito, na verdade. Deve ser usado no primeiro exemplo que poderíamos fazer. Se o comprimento do ponto do nome for menor ou igual a 10 log do Conselho, o comprimento total é menor ou igual a 10. E vamos em frente. E também vamos colocar isso em novas linhas porque podemos. JavaScript nos leva, nos dá todos os tipos de espaços em branco. Coloque isso como o segundo parâmetro aqui e, digamos nome ponto comprimento total é menor que 10 e podemos ver que o valor real aqui é 10. Quais outros temos que passar? Ah, eu acho, realmente. O principal que temos aqui é a comparação rigorosa. Então todos esses outros ar matemática realmente básica é algo maior do que menos do que igual a Realmente, isso é tudo o que é. Onde fica um pouco estranho é o sinal de igual triplo em JavaScript. Esta é uma comparação rigorosa, então isso significa que não só o valor tem que corresponder, mas o tipo de dados também tem que corresponder, e isso é realmente muito mais desempenho. Funciona muito melhor no seu computador. É um código muito mais rápido porque ele não tem que tentar determinar realmente quaisquer outros fatores . Só diz: “ Ei, Ei, esse é o tipo certo de dados? Sim. Este é o valor certo no tipo de dados? Sim, siga em frente. Ele não tem que tentar o dedo do pé, digamos , como , Oh, três é o mesmo que três? Quer dizer, JavaScript não sabe disso. Então ele tenta descobrir ou é verdade. Você sabe, o mesmo que verdade. Um é uma corda um é um booleano, e ele tem que tipo de descobrir isso. Considerando que se você pode se livrar disso usando uma comparação rigorosa, seus programas, seus scripts serão realmente muito mais rápidos. Não é visivelmente mais rápido para o olho humano. No entanto, quando você está lidando com programas grandes, talvez você esteja começando a triturar muitos dados. Como o que a Netflix faz. Talvez queiras esse tipo de actuação. Independentemente disso, você vai ver um operador rigoroso na natureza um pouco porque é bastante comum em JavaScript moderno. Então vamos dar uma olhada nisso. Este é o maior a tirar nota. Idade é igual a Digamos 30 e assista isso. Se a idade é igual a 30 log de pontos cônsul, você tem 30 anos e com certeza, ele diz que você tem 30 anos. Apesar da idade ser uma string e este ser um inteiro ou um número, esses são dois tipos de dados diferentes, e assim ainda funciona. Ele ainda entende que Ei, sim, isso ainda pode ser um número também. Então isso significa que JavaScript é uma linguagem livremente digitada. Isso significa que você pode meio que mexer com ele e sair impune com algumas das regras gerais que você encontraria em linguagens de programação como C ou Python. Então, o que acontece se fizermos uma comparação rigorosa? Se fizermos a comparação de tiras com três sinais iguais, vamos fazer com que três sinais iguais maiores. Isto não vai ser executado. Na verdade, vamos em um ponto de console de outra instrução fazer, advertir, tipo de dados errado, e vamos fazer isso menor. Vamos em frente. Salve isso e atualize a página e diz tipo de dados errado. Por que é o tipo de dados errado? Bem, é porque nós demos a ele uma string e estamos dizendo em comparação com um número, então o que isso está dizendo é, Corda 30 é igual ao número 30. Isso não é a mesma coisa no mundo dos tipos de dados. Eles não são os mesmos. O valor é o mesmo para um ser humano. É o mesmo para um computador. É diferente. E assim você pode pensar nisso como string é igual ao número. Bem, esses não funcionam da mesma forma. Você não pode comparar uma corda com um número que é como comparar uma melancia com uma pedra. Ah, sim, sua forma pode ser a mesma, mas fundamentalmente, eles são diferentes. São coisas completamente diferentes. E então você vai ver essa comparação rigorosa muito na natureza, e eu só quero que você esteja preparado para isso. Vamos em frente e retocar isso. Vamos em frente e salvar. Refresh diz. Tipo de dados errado. E se mudarmos isso para um inteiro ou um número, como é chamado, o JavaScript diz, você tem 30 anos. Mesmo que eu soubesse, 0,0 ainda diz que você tinha 30 anos. Você sabe, se você vem de outra linguagem de programação, você provavelmente está familiarizado com decimais ou floats em JavaScript, decimais, floats e inteiros são todos a mesma coisa, é igual a um número. Vamos em frente e jogar isso em uma nova linha também, para que possamos manter isso em nossas anotações. E isso é uma introdução rápida, eu acho. E então esta foi a lição mais operadores de comparação. Onde olhamos não Igual é maior do que ou igual a é maior do que é menor do que é menor ou igual a n uma comparação estrita. Estes são os operadores mais comuns que você vai encontrar é muito raro, que você nunca encontrar qualquer coisa diferente destes. E como um último exemplo aqui com a comparação estrita, vamos em frente e vamos voltar atrás. Sabe o que quero dizer? Uma cópia, essa coisa toda porque eu gosto desse exemplo do jeito que é. Então é comum ter morrido. Copie isso colado lá em vez e vamos fazer 30. Então isso vai nos dar tipo de dados errado. Bem, na última lição, falamos sobre digitação ou fundição variável. Vamos em frente e forçar-nos a ser um número Bam. Funciona. Então tivemos que tinha originalmente uma corda e dissemos, Oh, isso é uma corda. Estamos esperando que seja um número avançando. Nós sempre queremos que este seja um número. Então nós escrevemos a variável chamada Age. Nós digitamos casted como um número e o parâmetro para a função de número que vemos aqui é basicamente isso e saída 30 como um número. E agora, quando fazemos a comparação rigorosa, funciona. Portanto, isso é tudo o que temos para mais operadores de comparação. Definitivamente tirar alguns minutos do seu dia e mexer com estes, especialmente o último com comparações rigorosas. Esta é uma coisa muito importante. Todos os outros, acho que a maioria das pessoas pode pegá-los. Preeti, rápido. É só que um número é maior que o outro número? Ou uma coisa corresponde a outra? Você não precisa ser um profissional neste momento, você só precisa ser um pouco familiar para que no próximo mini projeto, quando você é solicitado a criar uma comparação rigorosa ou você é solicitado a escrever algum código para um cliente ou seu próximo empregador e você vê algo assim, você não vai. O que é isso? Você pode dizer? Oh, eu sei exatamente o que é isso. Então lá vamos nós, preparando você para o sucesso. Quando você terminar isso, vamos para a próxima lição e realmente pensar que a próxima lição será um mini projetos. Então vamos ah, vamos nos divertir um pouco com isso. 24. Mini Mini Projete neste JavaScript 3: Bem-vindo a muitos projetos. Número três neste pequeno desafio, o que eu gostaria que você fizesse é pedir ao usuário para um número e, em seguida, lançar esse número para um número real porque nós sabemos o que vai voltar como uma string. Então, converta-o como um número e, em seguida, certifique-se de que o número é válido. Não pode ser N a n e n significa não um número. Certifique-se de que é realmente um número. E então, se esse número for acima de 18 ou 21 o que você quiser, então e mudar o texto na tela para dizer sim, você está autorizado. Então, como algumas dicas aqui, Então o passo número um pediu o número de usuário. Pedi ao usuário um número que você vai usar prompt converter a entrada para um número. Você vai usar o número com um fim maiúsculo. Certifique-se de que o número é válido. Então você vai precisar de uma declaração if lá, e então se esse número é acima de 18, verifique ou altere algum texto na página para dizer parabéns. Você tem mais de 18 anos ou sim, você pode votar ou, você sabe, fazer uma ação particular. Então eu sei que este mini-projeto é um pouco seco, mas é realmente, muito bom prática porque você vai usar coisas assim o tempo todo na vida real . JavaScript. Agora, como sempre, vou fornecer-lhe a minha solução, bem como muitas coisas na vida. Há maneiras diferentes de conseguir isso, mas vou mostrar a vocês minha maneira de fazer isso. Mas eu gostaria que você pudesse, em apenas alguns segundos, pausar este vídeo e tentar por conta própria. E se você ficar preso, então você sabe, retomar o vídeo e você pode assistir a minha solução. Ou se você só quiser, você pode apenas olhar para a minha solução e, em seguida, tentar introduzi-la você mesmo. Seja qual for a maneira que o ajude a aprender o melhor. Tudo bem. Então eu vou começar com este mini projeto. As primeiras coisas primeiro. Precisamos pedir ao usuário um número, lançar a entrada para um número, certificar-se de que o número é válido, e então, se esse número é 18, diga algo como você está autorizado a votar. Então vamos em frente e escrever um pouco de javascript. Então, aqui queremos pedir ao usuário para um número de nosso número é igual a prompt. Digite um número. Passo dois. Precisamos nos lançar como um número porque se fizéssemos o tipo de log de ponto cônsul de entorpecimento, isso será uma string. Vamos fazer isso um pouco maior que vai acabar sendo uma corda. Precisamos que seja um número. Então vamos em frente e tomar o elenco como um número dormente e número. Lá vamos nós e precisamos ter certeza de que este número é realmente válido, porque se alguém digitar algo que não é um número vai retornar e A n e e não um número. Então precisamos dizer, se dormente, precisamos dizer, Ei, Ei, isso é definitivamente um número Então, se é um número, vamos em frente e executar algo aqui e então podemos dizer se dormente é igual a ou maior que 18. Na verdade, a instrução dizia mais de 18 anos. Se você quer ficar irritado com isso, amigo, amigo, você sabe vamos fazer maior do que o nosso ou igual a. Então, se você tem 18 anos ou mais, você pode pegar um elemento da página e mudar o seu vamos criar um elemento aqui do nosso Elem é igual ao documento ponto get elemento por i d. E vamos apenas chamar isso l m. Torná-lo um passo menor aqui para que possamos ver tudo em uma linha e então podemos dio l m ponto em seu texto Ou poderíamos fazer inter html e dizer que você tem 18 anos ou mais agora isso é tudo ótimo, mas obter um elemento por i d com uma idéia de elemento e l E M ainda não existe, então vamos em frente e se livrar disso. E vamos criar um H quatro com um i d de e l E m e deixá-lo assim. Então vamos atualizar sua página. Digite um número. Vamos digitar Caleb. Não com citações, embora citações não machuquem. Sim, nada acontece. E, a propósito, isso voltou como uma corda. Vamos em frente e tipo de número. Digamos que eu tenho 17. Ok, bem, ainda não vai funcionar, porque, você sabe, isso pode ter executado, mas não passou esta declaração if, e ainda está dizendo que é uma string que é suposto. Na verdade, vamos descer aqui e nos mudar de corda para número. Então isso agora vai dizer string e os números, então não aqui, ele vai dizer string e o número. Vamos refrescar mais uma vez. Vamos dar-lhe a minha idade adequada de 30 anos e o 2º 1 não apareceu porque eu não salvei o meu ficheiro. Então vamos rapidamente fazer essa idade de 30 anos. Lá está ele. Número da string. Você tem 18 anos ou mais, e esse é o mini projeto em poucas palavras. Então é só isso que estamos fazendo. Ok, então se você quiser dar um passo adiante, nós realmente não aprendemos sobre isso ainda. Mas se você quisesse, você poderia transformar nossas duas declarações “se “, porque é uma dentro da outra em uma. Se declaração. Então vamos em frente e deletar isso e trazê-lo de pé uma linha e dizer, e então o que isso está dizendo é se número é realmente número, Então, se é verdade e o número é maior que 18, então execute isso. Caso contrário, não vai fazer nada. Vamos tentar de novo. 30 bam! Simplesmente assim. Então não aprendemos sobre isso. Não espero que saiba disso agora, mas é uma coisinha legal que podemos mexer no futuro. Então isso é muitos Projeto número três tudo embrulhado. Se você não nos deu uma chance para definitivamente tentar isso por conta própria, tente não ter que referenciar o material de vídeo se você não precisar e tentou apenas fazê-lo da memória. Se você ficar preso. Ei, tudo bem. Basta retomar o vídeo novamente. Você pode cuidar disso. Não há problema, mas é bom fazer seu cérebro suar um pouco depois que você terminar com isso. Se você está feliz com sua solução, vamos para a próxima lição. E não te esqueças. Faça uma captura de tela do seu código e jogá-lo em seu projeto abaixo para compartilhar habilidades para que não, eu posso dar uma olhada em alguns de seu casaco e você pode compartilhar e inspirar outras pessoas também 25. Funções: Ei, quão baixo? Espero que o projeto de última hora tenha corrido bem para você neste vídeo. Vamos aprender um fundamental da programação, e é chamado de função. Agora. Uma função é realmente apenas uma maneira de escrever um pedaço de código para que você não tenha que escrevê-lo uma e outra e outra e outra vez e outra vez. Há um benefício e uma desvantagem para isso. Então, o benefício de escrever apenas código uma vez e depois usá-lo repetidamente é que é menos código para manter, então você não precisa se preocupar em corrigir algo. Se houver um problema, você não precisa corrigi-lo 10 vezes. Você poderia apenas corrigi-lo uma vez, e ele terá efeito 10 vezes diferentes ou onde quer que você esteja usando. Vai entrar nisso em apenas um segundo. Você realmente só precisa consertar isso em um lugar. Agora uma função tem uma desvantagem, e essa desvantagem é que é um pouco difícil de entender no início, então se você é novinho em folha na programação, isso pode machucar seu cérebro um pouco. Mas me acompanhe nisso, eu quero que você trabalhe nisso até que faça sentido, porque você vai ver funções em cada linguagem de programação. Você verá funções tão comumente quanto você vê variáveis no mundo do JavaScript, e isso realmente torna seu código mais fácil de trabalhar. Então neste vídeo, eu só vou mostrar a vocês como é uma função e nós não vamos realmente escrever uma função. Faremos isso no próximo vídeo, mas quero mostrar como é agora. Então vamos fazer isso maior. E temos uma função. Então começa com a função de palavra. Você pode ver que o código V do meu editor destacou que diz função, enquanto , você sabe, se não fosse uma palavra-chave, seria ótimo. Mas é uma palavra-chave, por isso é agradável e colorido, então começamos com a função palavra e damos um nome à função. Então vamos dar a isto o nome da saudação. E então colocamos parênteses porque é uma função e porque vai estar tomando algum tipo de ação. Geralmente, há um conjunto de parênteses depois dele, e então aqui podemos apenas dizer, cônsul dot log Olá, mundo. E assim todo o código que você deseja executar dentro de sua função vai entre essas chaves . Parece muito com uma declaração “if”, na verdade. E então para executar sua função, tudo que você tem que fazer é digitar saudação com seus parênteses, e isso vai dizer olá, mundo. Então, se eu abrir isso no cromo, você vai ver aqui em baixo Ele diz, Olá, Olá, as funções do mundo Agora podem tomar essas coisas chamadas parâmetros ou argumentos. E então você pode dizer qual é o nome de alguém para que você possa passar um nome para essa função em particular , e então você pode contaminá-la. Você pode dizer olá mais nome. E você pode usar esse nome de variável dentro desses colchetes e, em seguida, para passar um nome, você está apenas passando como uma string ou um número ou um booleano ou algo assim. Vamos passar uma string chamada Caleb e vamos atualizar nossa página. E diz aqui “Olá, Caleb”. E agora, dentro de nossa função, temos essa habilidade de usar qualquer tipo de nome. E o que isso está fazendo é dizer: “Ei, “Ei, há um parâmetro aqui. Há um parâmetro aqui. Digamos que o nome é agora igual a Caleb em basicamente o que ele está fazendo nos bastidores é dizer Nome é igual a Caleb. Agora, se você quiser vários parâmetros, absolutamente, você pode fazer isso. Digamos que há um nome e uma idade. Então vamos dizer olá Nome e idade é Vamos colocar idade lá e nós também precisamos passar em uma era. Então, há dois parâmetros aqui. Precisamos ter certeza de que temos dois parâmetros aqui. Fazemos isso separando estes com uma vírgula, e já vimos isso com registro de pontos do conselho. E então dissemos algo, e então tivemos uma vírgula e depois dissemos outra coisa. E então o que isso está dizendo é que há um objeto chamado Cônsul vai chegar a objetos mais tarde, mas basicamente há uma função chamada log. Este é o primeiro parâmetro. Este é o segundo parâmetro, e não é diferente da nossa função aqui chamada Greeting, onde temos o nosso primeiro parâmetro e, em seguida, temos o nosso segundo parâmetro. Então vamos guardar essa abertura, cromo e atualização e diz “Olá, Caleb”. A idade é de 30. Então agora nós realmente temos dois parâmetros ou dois argumentos dentro de nossa função de saudação. Há mais dois pontos aqui que devemos olhar. Um deles está em JavaScript mais moderno. Nós podemos realmente nos dar uma idade padrão, bem como um nome padrão. Então vamos em frente e talvez até fazer isso. É um nome padrão vai ser o esforço dele. Meu gato e sua idade não tem 30 anos. Ele tem quatro anos. Vamos em frente e nos livrar desses parâmetros. Então o que estamos dizendo aqui é se não há nenhum parâmetro de nome como o primeiro 1 ele costumava se parecer com isso. Se não houver nenhum parâmetro name, basta assumir que o nome é Zephyr. Se não houver um segundo parâmetro chamado idade, basta assumir as idades de quatro. Então vamos em frente. Salvar. Refrescante. Diz “Olá, Zephyr Ages”. Para isso é relativamente novo JavaScript, é realmente super útil. Muitas linguagens de programação tiveram isso por muitos, muitos, muitos, muitos anos, e finalmente é o momento para JavaScript usá-lo também é um recurso bonito. Agora, a última coisa a saber sobre funções, pelo menos para este vídeo em particular é uma função pode retornar de valor e nós fazemos isso com a palavra-chave chamada Return e isso pode retornar qualquer coisa. Então vamos em frente e retornar espaço x e isso é tudo o que vai retornar Semi. Os dois pontos são opcionais quando está em uma nova linha, mas vamos em frente por causa da continuidade. Então, quando atualizamos sua página, não vamos ver o Space X aparecer em nenhum lugar. O que isso está fazendo é dizer, Ei, se essa função é executada e ela está sendo armazenada em uma variável, esse valor de variáveis agora vai ser Espaço X, Então vamos em frente e salvar saudação em uma variável. Até agora, eu só chamei var, nome da variável é igual a saudação. Ele ainda vai executar o material de log do console porque ele ainda está executando esta função. No entanto, do nosso nome agora vai ser o que é retornado aqui e que poderia ser um array poderia ser um objeto. Pode ser uma corda Ah Booleano um número, o que quiser. Pode ser qualquer coisa que você queira devolver, mas você só tem um. Você só pode retornar uma vez, e qualquer coisa aqui em baixo não é executado. Então veja isso. registro de pontos do cônsul não funciona. Então, este próximo exemplo vamos ver que este log de console não vai funcionar. Mas var nome também vai ser Space X como uma string. Vamos em frente e dar uma chance a isso. Ok, eu atualizo o Hello de Issa é esforço de quatro anos. O log do console não funcionou. Não apareceu porque qualquer coisa abaixo da declaração de devolução não funciona. Vamos em frente e se livrar dele, uma vez que é inútil e vamos dar uma olhada no nome var. Veja isso, diz Varney MySpace, Seis do nosso nome aqui tem o valor de Espaço X, e você pode fazer qualquer coisa com variáveis para que você possa fazer idade para os expoentes da idade, que pode ficar muito perigoso se você Estou usando um grande, grande número grande. Mas neste caso vai ser quatro para o poder de quatro, e é isso que o número vai ser. Então vamos dizer novo número e tudo bem, ele fez nossos registros regulares do console. Agora vamos digitar um novo número e vemos 256. Temos isso porque quatro vezes quatro vezes quatro vezes quatro vezes quatro é 256. E, finalmente, quando se trata de usar uma função, tudo o que temos a fazer é re em Stan. Ela odiava reinicializar. Vamos dizer, Caleb e 30. Vamos em frente e criar um novo aqui e este vai ser Henry e ele vai ser então isso vai ser, você sabe, vamos mudar esse retorno para algo que faz sentido. Vamos devolver o nome. E então este vai ser o nome padrão e este vai ser Caleb e este vai ser Henry. Então veja isso enquanto eu bati, Refresh diz. Olá, Zephyr. Quatro anos. Então ele retorna. O nome o armazena em uma variável chamada nome padrão. Então você vai para a próxima linha diz, Oh, há uma função aparecer. OK, rode esse código. Demos um nome chamado Caleb, e lhe damos 30 anos. Olá, Caleb. A idade é de 30. Certo, então faz. Essa linha armazena na variável chamada Caleb. Em seguida, vai para a linha 18 diz: “Oh, “Oh, há um no seu chamado Henry. É executar uma função chamada saudação, assim como as outras duas vezes que vai dizer, OK, bem, eu vou parar aqui. Procure por uma função chamada saudação. O primeiro valor é Henry. Então não vamos usar o valor padrão da idade dele. Não vamos usar o valor padrão de quatro. E então ele vai dizer olá, Henry. A idade também é, e então ele vai retornar o nome dele. Esta parte aqui vai armazenar isso em uma variável chamada Henry. E com certeza, vemos “Olá, Henry”. Idades, também. Então, se formos em frente e dissermos cabeças de nome padrão daqui, vamos sofrer. Kayla é Caleb. Henry é Henry. Portanto, as funções são um ponto crítico quando se trata de programação em qualquer linguagem, não apenas javascript, mas em qualquer linguagem. E eles quase todos funcionam da mesma maneira. Você tem um jeito de defini-lo. Dás-lhe um nome, dás-lhe alguns parâmetros, se quiseres. Ah, você executa algum tipo de lógica aqui, ou neste caso, estamos apenas fazendo um log de console e você retorna algo, e então talvez você armazene em uma variável, e então você pode fazer algo com essa variável abaixo da linha, então isso é funções em poucas palavras. Na próxima lição, vamos em frente e colocar algumas mãos sérias em prática com funções que vamos corrigir. Um número deles vai ser bastante rápido. Mas hey, você sempre pode retardar o vídeo. Você sempre pode pausar e tentar você mesmo, e eu estou aqui para guiá-lo em cada passo do caminho. 26. Prática com funções: no mundo da programação, existem alguns obstáculos que são difíceis para a mente envolver em torno do 1º 1 Suas funções. Pode ser difícil de entender no início, e realmente, você só precisa praticar com ele uma e outra e outra vez até que ele apenas clique em seu cérebro. Simplesmente assim. O próximo é loops, e então nós trouxemos objetos e programação orientada a objetos e coisas assim. Mas o primeiro 1 é funções, e uma vez que você entende funções, as coisas realmente ficam muito mais fáceis. Mas este é o primeiro grande obstáculo mental a superar, então é muito bom para nós ter alguma prática séria com funções agora. Agora, as funções são uma parte cotidiana da vida. Na verdade, precisamos saber disso. Você não pode escrever JavaScript sem funções. Bem, na verdade, isso foi uma mentira. Você poderia, mas você não vai chegar muito longe. Seu código geral ou seu aplicativo inteiro vai ser extremamente básico e não muito dinâmico, e vai ficar muito, muito longo, e você vai copiar e colar muito. Agora há uma regra geral e programação chamada Dry, que significa não se repita, e como fazemos isso é com uma coisa chamada função, para que possamos escrever a lógica apenas uma vez, e podemos executá-la repetidamente e mais uma vez. E assim, por exemplo, se estivéssemos convertendo Celsius para Farron Heights e escrevêssemos a fórmula do longo caminho 10 vezes e percebemos que pegamos a fórmula errada e está em quatro arquivos diferentes , nós vamos ter que ir e mudar esses quatro arquivos diferentes em um achado e substituir em todos eles. Isso é uma droga, enquanto que se fosse apenas uma função, você poderia consertar a função uma vez, e ela conserta em todos os outros lugares. Agora, funções podem ser um pouco confusas se no início. Mas quer saber? Honestamente, continue trabalhando com eles porque eles ficam mais fáceis com o tempo. E eu acho que sem mais delongas, nós deveríamos realmente pular para isso. Então vamos primeiro criar uma função simples e inútil que adiciona 100 divisões por três e apenas vamos pegar um número, dividir por 100 ou melhor adicionar 100, então dividir por três e retornar qualquer que seja esse número Então começamos com a função. É uma palavra-chave e vamos chamá-lo de fazer matemática e vai levar qualquer número que lhe dermos . Nós temos algumas aberturas e colchetes para ele fazer alguma lógica aqui agora, nós não sabemos se este número vai realmente ser um número. Poderíamos ter certeza de que é um número, então poderíamos sempre dizer Numb é igual a numb e vamos ter certeza de que está escrito corretamente. Lá vamos nós e então podemos dizer se dormente é um número real, então poderíamos fazer coisas aqui, não um número de riel. E então agora nossa função é dividida em dois porque temos uma declaração se else aqui agora , poderíamos fazer uma declaração de retorno aqui embaixo. Também podemos fazer uma declaração de retorno aqui e aqui, então vamos fazer isso. Se não é um número real, vamos apenas retornar um booleano de false e se é um número real, então fazer fazer fazer fazer é um número real. Nós dissemos que queremos que este número adicione 100 dividir por três. Digamos que o nosso novo número é igual a NUM mais 100 dividir por três. E se quisermos ter certeza de que isso acaba assim, podemos usar a regra da cama, srta. Brackets, expoentes, divisão, adição de multiplicação, subtração. Então vai fazer o número mais 101 seja lá o que for. E então ele vai ser dividido por três. E vamos devolver o novo número. Então isso vai retornar falso ou ele vai retornar o novo número. E vamos fazer isso um pouco menor para que possamos ver isso em uma página. E não aqui, digamos do nosso costume, Numb é igual a fazer matemática, seja qual for o número que quisermos dar. Então vamos dar 343 porque números aleatórios salvam isso. E se você abrir isso em sua página agora, você verá que nada acontece porque nós executamos toda essa lógica e nós retornamos um booleano ou um número para essa variável particular chamada Custom Numb. Mas nós não fizemos nada com customizá-los nós não consola registrá-lo ou algo assim. Então vamos em frente e log do console agora. Cônsul ponto log personalizado entorpecido. Agora vamos abrir a página dela e clicar em Atualizar, e assim podemos ver o número. Aqui está 147 ponto 6666666666666 E se dermos algo que não seja um número? Digamos que o número é Caleb. Bem, Caleb não é um número. Sou uma pessoa, não um número. Ele retorna false porque isso não era um número. Não saiu do jeito que esperávamos. Agora, devemos querer executar esta função uma e outra e outra vez e outra vez? Poderíamos simplesmente fazer isto. Poderíamos dizer, vamos fazer com 30. Vamos mudar todos estes fazem fazer. Vamos mover isso para cima e vamos em frente e apenas registrar o console cada um desses. E então aqui está. Só vai registrar todos os números. Estamos constantemente substituindo a mesma variável aqui. Vamos em frente e ver o que isso retorna. 1º 1 é falso, e isso é porque o nome era Caleb. Sim, isso não é um número. O segundo 1 foi 30, então adicionamos 100 divididos por três e obtemos 43,3. Repetindo o próximo foi 50 então 50 mais 100 é 150 Dividir por três é 50. Isso acabou muito bem. 501 mais 100 dividido por três, 200,3 repetindo. Então temos 41 menos 90. Esta é uma interessante. Então menos 90 mais 100 é apenas 10 10. Dividido por três é 3.3 repetindo e, em seguida, três mais 101 103 dividido por três. 343. Isso foi um monte de três. Uau! E então esse é o poder por trás de uma função. E, ei, se um desses se revelar incorreto, podemos sempre voltar aqui e dizer, “ , Na verdade, isso não era suposto ser Dividir por três era suposto ser dividido por quatro. E veja isso. Todos esses números mudam. Então, se você está interessado em trabalhar comigo, aqui está o que você pode fazer. Crie sua primeira função e apenas passe um número como seu único parâmetro, e então apenas trabalhe com um número um pouco, mesmo se você apenas retornar entorpecido. Isso é melhor do que nada, então vá em frente e dê uma chance. Caso contrário, vamos passar para a próxima função, que vai ser um pouco diferente. Mas, você sabe, meio que a mesma coisa. Vamos criar outra função aqui. Mas desta vez vamos criar uma função baseada em algo que JavaScript faz. Você notou como estamos escrevendo um documento? Eu recebo elemento por i d. e, em seguida, qualquer que seja o elemento é o elemento i d Nós temos escrito isso muito. Podemos atalho para isso. Na verdade, você realmente vê isso muito em muitas bibliotecas JavaScript. Podemos escrever uma função, chamaremos de cifrão e passaremos no I.D. e depois? Enfraquecer dio é enfraquecer simplesmente retornar isso. E agora temos uma função chamada cifrão. É preciso saber o que quer que seja que ideias. E ele diz, Hey, documentos retornados ponto get elemento por i d. Nós precisamos mudar isso para a nossa variável, e ele vai olhar para este modelo de objeto documento interno, e ele é simplesmente indo Devolva. Então podemos trabalhar com um pouco mais tarde. Então vamos tentar isso. Digamos que título Var é igual a idéia de título e, em seguida, queremos mudar. O texto interno do ponto do título é igual ao texto interno personalizado, e precisamos realmente ter certeza de que isso existe. Então vamos em frente e criar cada um aqui com uma idéia de título. Não há nada nele. JavaScript preencherá isso para nós. E só para ter certeza que sabemos o que está acontecendo, seu registro de console I d. é. E isso parece uma função. Não, não funciona de log primeiro parâmetro segundo parâmetro. Vamos abrir a página dela e clicar em Atualizar, e vamos ver o texto interno personalizado. False foi deste aqui. Vamos apenas ir em frente e comentar isso por enquanto e você pode ver o título das idéias. Então o que isso está fazendo é dizer, Ei, obter o elemento pelo seu I d de título corresponde aqui em cima. Armazene isso em uma variável com suas instruções de retorno. Foi o que fizemos. Nós estávamos Nós armazenamos em uma variável chamada título, e então podemos usar isso. É exatamente o mesmo que fazer isso. Apenas tenha paciência comigo aqui. É exatamente o mesmo que está fazendo isso. Só que agora você está escrevendo muito menos. E se você quiser criar outro, você sempre pode fazer do nosso elemento personalizado. Seja qual for o seu elemento é igual ao personalizado I d. e, em seguida, personalizado Ellam dot html interno é igual a algo aqui. Você poderia fazer algo assim e agora você está curto. Agora você não está escrevendo documentos. Não obter elemento por i d parênteses. Quaisquer que sejam as suas ideias uma e outra vez e outra vez. Você só está escrevendo cifrão. Então é uma boa maneira de cortar curto. Conheci. Por fim, vamos em frente e criar uma função onde convertemos Celsius para Fahrenheit. Então começamos com a função que é chamada C para ver se consigo soletrar isso direito na primeira vez justo em ódio. É realmente fazer isso. Isso se chama, uh, sim, eu realmente não gosto disso. É assim? É só para ver dois f e podemos adicionar um comentário aqui. Ah, Celsius para a altura do ar. Agora precisamos dar um número a isto. Qual é o número Celsius? Então vê, dormente? Algo assim não precisa de uma lata de sublinhado. Se você quiser, precisamos fazer algumas contas aqui. Então vamos fazer variável do nosso Fahrenheit Fahrenheit Há igual ao que é a matemática que queremos fazer. Variável Fahrenheit é igual a qualquer Celsius é. S O. C. Numb vezes 1.8 mais 32. E então vamos colocar os suportes aqui. Então isso é sempre executado primeiro de novo, isso é apenas ordem de operações. Você não precisa necessariamente porque a multiplicação virá antes da divisão. Isso não é o aqui nem ali que é apenas matemática. E então podemos voltar uma noite justa. Agora não estamos fazendo nenhuma verificação. Você não estava datilografando. Veja entorpecido como um parâmetro como uma variável, estamos apenas assumindo que é um número de algum tipo. Então vamos em frente e criar algumas variáveis em seu nós chegamos longe. Digamos que com zero graus é tão C a F bem, para colocar o número zero lá, então seja lá o que for que vai ser e permite que você aconselhe ponto log zero. Ei, fato divertido. Você também pode colocar linhas de código na mesma linha, desde que haja um semi dois-pontos. Então seu computador vai ler isso de cima para baixo e dizer Fogo zero é igual a e eles chegar ao semi, Colon diz. Oh, hey, ok, bem, esta parte está feita, então vamos em frente e executar isso como se estivesse em sua própria linha. Então vamos fazer isso. Um. O que é a temperatura ambiente enquanto a temperatura ambiente em Celsius é 20? Vamos chamar isso de 20 e o que está fervendo tão fervendo em Celsius é de 100 graus. O que é isso numa noite justa e só por diversão? Z's Vamos fazer congelamento e vamos colocar um número de menos 40. Então, o que é menos 40 em noite justa? Vamos em frente. Atualizar página. Então nós temos que ir para log de nossa função anterior, mas podemos ver zero graus Celsius é igual a 32 graus noite justa. Isso está correto. 20 graus é 68 F e congelamento menos 40 Celsius é o mesmo em altura justa. Também é menos 40. Agora, por que isso é importante saber? Bem, porque estamos fazendo algumas contas aqui. E se quiséssemos corrigir isso manualmente? Todas as vezes? Teríamos que substituir isso por qualquer número que não esteja aqui. então zero vezes 1.8 mais 32 estavam escrevendo de novo. E então nós temos que fazer 20 e então nós temos que fazer 100 nós teríamos que escrever isso todas as vezes. E não estamos interessados em passar o dia todo digitando. Estamos interessados em escrever um bom código. Então o que fazemos é jogá-lo em uma função. E sabe qual é o pior cenário aqui? E se todos estes estiverem errados? E se ao invés de 32 houvesse um erro de digitação e fosse 31? Bem, não vai fazer uma grande diferença quando se trata de Fahrenheit, quando estamos falando de, você sabe, temperatura ambiente. Mas ainda assim o número está errado. E assim teríamos que passar e consertar todos eles ao mesmo tempo. Para isso, isso não é jeito de viver sua vida. E se não fosse uma função, enquanto o erro teria sido 31 aqui e tudo o que temos que fazer é mudá-lo de volta para 32 todos os quatro deles são corrigidos com um único toque de tecla. Então agora estamos sendo muito mais conscientes de onde estamos gastando nosso tempo. Na verdade, podemos até mesmo atalho para isso. Não precisamos colocar isso como uma variável. Podemos ir em frente e devolver o que Celsius é como um número. Vezes 1.8 mais 32. Tudo bem, são três funções diferentes em JavaScript agora. Você deve estar um pouco familiarizado, pelo menos, com a sintaxe com a aparência dela antes de passarmos para o seu próximo mini projeto. O que eu realmente gostaria que você fosse Dio é tentar escrever uma função por conta própria. Não precisa ser útil. Azul primeira função que escrevi aqui foi adiciona 100 divisões por quatro como eu nunca vou usar essa função na vida real. Mas é uma boa prática, por isso não se esqueça como um lembrete funções começam com uma função de palavra-chave. Ele tem algum tipo de nome, parênteses e então você tem argumentos thes air opcional. Você pode fazer absolutamente nada se você quiser e tem uma instrução return para armazenar os dados que você quiser em uma variável. Então retornar algo e, em seguida, para executar você poderia fazer de nosso nome é igual a nome assim. Ou se você só queria executá-lo, não armazenar nada em uma variável. Você também pode apenas fazê-lo desta maneira. Então vá em frente, nos dê uma chance. Eu não vou te dizer que tipo de função deve ser correta. Não é nem aqui nem ali. Pode ser um bom tipo de função, uma função útil na vida real ou não. Isso realmente não importa. Seja tão complicado ou simples quanto quiser. Eu só quero que você seja capaz de escrever uma função, porque em nosso mini projeto, vamos estar escrevendo uma função. Vá em frente. Dê uma chance a isso. Não se esqueça que estou aqui para ajudar. Você tem uma seção comum abaixo. Não se esqueça. Se você tiver uma pergunta, por favor, faça a sua pergunta. Estou aqui para ajudar. Quero que isto seja fácil para ti. Caso contrário, vamos em frente e começar neste próximo mini projeto, porque é aqui que as coisas começam a ficar um pouco divertidas. Acho que vai ficar muito mais divertido de agora em diante. 27. Mini Mini Projete neste JavaScript 4: Olá e bem-vindos a muitos Projeto número quatro. Vamos criar uma calculadora de dicas, e isso realmente tem a ver com funções. Funções são tão importantes. Eu estava te avisando nos últimos dois vídeos que você precisa saber funções, e eu diria apenas apenas praticar funções até você pegá-lo. E então esta é uma maneira realmente boa de praticar uma função. Então, neste projeto, o que eu gostaria que você fizesse é criar uma dica simples. Calculadora deve aceitar dois parâmetros. Seu 1º 1 deve ser o valor total da sua conta. Digamos que vai a um restaurante e sua conta chega a US$25. Precisa aceitar $25 como um parâmetro, e o segundo parâmetro é sua porcentagem de gorjetas. Quanto você quer dar gorjeta? Faça desse segundo parâmetro o seu parâmetro de ponta. Torne isso opcional. Dê a ele um valor padrão. Realmente não importa qual é o seu valor padrão se você acha que a gorjeta deve ser um mínimo de 15% ir para 15%. Se você acha que a gorjeta 15% é absurda e nunca deve ser superior a cinco, faça seu parâmetro de dica O valor padrão. Cinco. Por último, eu quero que você retorne o valor total e salve-o em uma variável e, em seguida, talvez o console registre esse valor total na sua página. Como sempre, eu vou resolver isso logo depois disso, mas eu gostaria que você desse uma chance primeiro, então sinta-se livre para pausar o vídeo. Dê-lhe um tiro. Tente o seu melhor. Se você ficar preso, basta retomar o vídeo e você pode assistir a minha solução para isso. Esta é a minha solução para a calculadora de gorjetas, então vamos em frente. Esta é a minha solução para a calculadora de gorjetas, E primeiro precisamos criar um script para script. Você também pode fazer isso em um arquivo externo. Se você quisesse. A primeira coisa que precisamos fazer é criar uma função assim função. Vamos chamar de dica, e ele precisa aceitar dois parâmetros. Então é um o valor total da conta são realmente adequado valor total e uma porcentagem de gorjeta. Essa porcentagem de ponta deve ser opcional com um valor padrão. Então, digamos 10. Esses 10% serão 10%. E vamos dar um zoom aqui, fazer isso bom e grande. Vamos em frente e trabalhar um pouco dessa matemática. Então a quantidade total da gorjeta vai ser da nossa quantidade gorjeta é igual ao montante total. Dica do Times. Bem, isso não vai funcionar, porque a nossa dica é um número completo. E então se você é Bill foi $25 você disse 25 vezes 10 isso é $250. Isso não vai dar certo. Então vamos sobrescrever a dica variável. Isso é uma dica vai ser o que está atualmente dividido por 100 que vai nos dar algo como, você sabe, você sabe, em vez de 10 vai ser 0,10 E então nossa quantidade de gorjeta aqui vai ser 0,10 Então isso é vai ser como se fosse 25 vezes 0,10 assim. Mas estamos fazendo isso na linguagem das variáveis. Então essa é a nossa quantia total de gorjeta. E poderíamos se quiséssemos devolver a quantia da gorjeta. Poderíamos dizer a quantia da gorjeta e terminaríamos. E se quisermos devolver o valor total para não nos importarmos com gorjeta 10% ou 15% ou algo assim? Nós só queremos ter certeza de que nossa conta final ou a função em vez disso é dar o valor final da conta. Então, se tivermos uma nota de 25 dólares e queremos dar uma gorjeta de 10% bem, precisamos adicionar 10% em cima de 25. Então agora nós temos nossa quantidade de gorjeta e nós poderíamos dio ah, quantidade total. Podemos até sobrescrever este porque não vamos usá-lo novamente. O valor total é igual ao valor total, mais a sua gorjeta. E então aqui, vamos fazer o valor total. É isso que vamos devolver. E vamos ver se eu tenho algum erro de digitação ou se eu fiz isso errado. Então vamos criar uma variável aqui. Então é uma quantia de ponta var. Não, vamos fazer conta total var. Não estamos fazendo gorjeta, estamos fazendo Total Bill é igual a gorjeta. Qual é a minha conta? São 25 dólares, quanto eu quero? Uma gorjeta, digamos 10% e, em seguida, o Cônsul Dot Log conta total. Vamos em frente e dar uma atualização e podemos ver que minha conta é 25,1. Isso não parece certo, não é? Porque 10% de 25 é 2,5. Então deve ser 27,5. Algo não está certo. O que poderia ser? Então agora, medida que nos depuramos, poderíamos fazer conselho ponto log quantidade é a quantidade de ponta, e então poderíamos também dio conselho ponto log O valor total é o valor total e podemos ver o que está acontecendo aqui. E então nós também podemos cônsul como esta dica de um conselho ponto log como, ah por cento é e, em seguida, qualquer dica vai ser Então vamos atualizar dica página como um percentual de 0,1. Mas o montante total não está certo. Algo não está certo aqui. Por que é isso? Oh, olhe para isso. Houve um erro de digitação que usei gorjeta e era suposto ser a quantia da gorjeta. E então lá vamos nós. Temos algumas depurações ao vivo para você. Eu só vou me livrar de todos os registros do conselho e página de atualização e olhar para aquele 27.5. E com isso, o mini projeto está completo. Agora eu sei que no passo quatro diz devolveu o valor total e salvá-lo para uma variável. Mas se você só quisesse devolver o montante da gorjeta, você poderia realmente estender isso também. Você poderia dizer que apenas a Dica de Retorno é igual a false. Mas se a dica devolvida apenas é igual a verdadeiro. Então, se devolveu a dica, Lee é igual a verdadeiro. Poderíamos devolver apenas a quantia da gorjeta e então aqui poderíamos dizer não, não vamos fazer essa. Vamos continuar e copiar isso porque está tudo bem do jeito que está. Dica total. Vamos dar a verdade. Precisamos que isso seja uma dica total também, e vamos comentar isso. E então vamos em frente e ah ha olhar para essa gorjeta total de $2,5. E vamos invulgar isso, e veremos ambos no ano. E então agora nós temos, ah, ah, função significa que esta ponta de retorno apenas parte foi extracurricular, mas nós temos um funcionamento aqui que pode retornar uma de duas coisas, ou a quantidade de gorjeta ou a quantidade total de gorjeta. Além disso, tome nota de que eu não usei uma declaração else. Eu não usei uma declaração mais porque eu não precisava estava dizendo se devolveu dica sobre Lee , em seguida, apenas devolveu a dica apenas de outra forma, em todos os outros casos, apenas devolveu o valor total. Esse é exatamente o mesmo teste. Neste cenário em particular, é exatamente o mesmo. Então, aí está. Ou seja, muitos projeto número quatro anos calculadora dica tudo descoberto. Se você quisesse fazer isso realmente extravagante, você poderia realmente consultar sua página para um elemento e alterar um monte de texto lá também . Então, sua página realmente parece que está fazendo algo em vez de simplesmente fazer login no console de qualquer coisa aqui. Porque agora, se alguém fosse tentar usar isso e não desenvolvedor não saberia dedo do pé, olhar no console. E, como sempre, se tiver dúvidas, não se esqueça, pode deixá-las abaixo. Fico feliz em ajudar a qualquer momento. Uma vez que você é feito com este projeto muitos, vamos passar sobre definir a próxima lição e aprender um pouco mais sobre consulta. Selectores 28. Selecionadores em CONSULta ios Consultores: Está bem. Olá. Espero que o último projeto tenha corrido bem. Agora é a hora em que começamos a trazer alguns fãs aqui com o nosso código. Então vamos começar a interagir com a nossa página. Até agora, temos usado documento ponto get elemento por idéia, e começamos a obter o i. D. Cada elemento único, que significa que até agora, todo HTML precisa ter um i d. E isso é honestamente, não há maneira de viver sua vida. E se você quisesse apenas selecionar o pequeno elemento ou apenas um link ou apenas um link particular ? E se você quisesse selecionar algo pela classe? E se você quisesse selecionar vários elementos que todos têm algo em comum? Podemos fazer isso com JavaScript, percebe JavaScript mais moderno, e você não verá isso um JavaScript mais antigo E isso é realmente OK, porque isso é super bem suportado. Então, para isso, você vai precisar saber um pouco sobre CSS. Então, no mundo do CSS como um curso rápido rápido que você tem, esta é uma classe, e então você tem e eu d declaração. E então você tem uma declaração de elemento e isso é apenas sobre isso. E então podemos ficar mais chiques com os dois. Então nós fazemos como classe e, em seguida, um elemento filho com o I d de I d e, em seguida, um elemento filho de um link e enfraquecer estilo dessa forma. E então dot significa classe hashtag significa i d. E se nenhum deles for apresentado, então estamos assumindo que é um elemento. Então esse é um curso rápido e rápido em seletores CSS. Isso é mais rápido. Acho que já expliquei isso. Mas hey, não vamos aprender sobre CSS. Vamos, na verdade, entrar em algumas dessas coisas, porque isso vai ser muito divertido. Então nós temos essa coisa nova chamada um seletor de consulta. Então vamos em frente e escrever um seletor de consulta e vamos apenas obter o título tal para Vire título e vamos fazer isso apenas um pouco maior aqui. Título do fogo e queremos obtê-lo por seu I D. Ok, bem, bem, nós poderíamos fazer isso para que pudéssemos fazer documentos, não obter elemento por i d título e, em seguida, título não interior texto é igual a alterado por padrão é Vou dizer olá mundo. Este é o título e é bom ter um elemento filho lá dentro, um elemento pequeno, e isso só me mudou, também. Se carregarmos isto, só mudou. Ok, então sabemos que isso está funcionando, mas não queremos que isso aconteça. Então vamos nos dar uma aula. Classe é igual ao título e vamos em frente e simplesmente abandonar essa idéia porque nós temos usado tantas vezes e honestamente, não muitos elementos têm idéias. Então vamos em frente e tentar obter isso por seu título ou sua classe chamada título. Então nós fazemos. Título do ponto do seletor de consulta Assim como é CSS. Então nós vamos pegar o primeiro 1 agora seletores de consulta, só vai pegar o 1º 1 Então, se houver outro elemento aqui com um nome de classe do título, ele só vai pegar o 1º 1 para encontrar movendo-se de cima para baixo. Portanto, certifique-se de que qualquer classe que você está usando é única. Neste caso, seria, ah, ah, melhor prática usar um I d em vez de uma classe, mas vamos em frente e dar-nos uma chance de qualquer maneira mudou usando uma classe bam mudou usando uma classe. E se fizermos este título, podemos realmente ver assim que eu digitá-lo aqui, ele está selecionando esse nó inteiro. Ok, eu tenho que falar isso porque eu quero agora selecionar o pequeno. Como faço para selecionar um elemento dentro de um elemento? Bem, se eu quisesse, poderia ir longe. Pequeno é igual ao seletor de consulta de ponto do documento e apenas digite pequeno e isso irá obtê-lo. Isso vai obtê-lo pelo seu nome elemento para que pudéssemos fazer algo ao longo das linhas de on-line. 21 pequeno ponto texto interno é igual a wow, Eu sou minúsculo texto. E lá está, enquanto eu sou pequeno imposto, tudo em maiúsculas. Mas isso não mudou o mundo do olá. Este é o título. Acabou de receber este. Então isso é muito legal. Poderíamos fazer isso também. Agora, e se em algum lugar na estrada nós temos uma grande classe, talvez seja um cartão ah de algum tipo e nós queremos obter um elemento particular dentro dele. Então vamos fingir que isso é muito mais complexo e muito maior. Então nós temos uma classe chamada título e queremos obter apenas o pequeno elemento. Lembre-se, seletor de consulta vai obter o primeiro pequeno que ele encontra. Então vamos realmente criar um exemplo aqui. Pequeno. Este é o primeiro e assista. Mudar-me para não vai mudar, mas este primeiro vai mudar e lá está. Ele selecionou o primeiro pequeno. Não selecionou o 2º 1. Acabou de ter o 1º 1. E se quiséssemos obter este? Bem, atualmente, não temos como fazer isso. Nós não sabemos como obter o 2º 1 Então vamos em frente e pegar apenas o 2º 1 Então o que podemos fazer aqui é comentar isso. Vamos criar outro aqui chamado. Também chamaremos de Vírus Pequeno. Pequeno é igual a, e então podemos fazer consulta título ponto, seletor, pequeno. E então, em vez de obter todo o documento ou modelo de objeto de documento e olhar através dele, estamos apenas olhando através do título em North Ince. Qualquer coisa que esteja dentro desse título com um elemento chamado Small agarrou o 1º 1 lá. Então agora podemos fazer um pequeno ponto no texto dela é igual a quê, o quê? O que? O que? Uau, e bam. Olhe para isso. 1º 1 está inalterado. O 2º 1 é alterado. Incrível. Então agora sabemos como selecionar um elemento por sua classe, e sabemos como selecionar um elemento que é um elemento filho desse elemento original. Neste caso, selecionamos o elemento filho do H. Ok, vou comentar e vamos mudar apenas o texto do link. Podemos fazer isso também. Nós já vimos isso, mas, ei, mais alguns exemplos nunca dói até agora. A para minha âncora de convidado é igual a documentos. Consulta holandesa, seletor A e vamos fazer um ponto texto interno é igual a codificação para todos ponto com bam codificação para todos ponto com. Então há esse exemplo é, bem, isso é apenas selecionar um elemento baseado no nome do elemento real. Não é uma aula, nem um “I d.”. Só o nome do elemento. Isso é tudo bem e bom. Vamos em frente e comentar esta ode e também esta e também esta. Vamos em frente e criar uma instância onde precisamos selecionar várias classes. Então vamos criar um nordeste de chato uma lista Norden nada chique aqui. E vamos fazer L I I aliado número um. E onde você vai mais e mais e mais. Então aqui, eu tenho um nordeste com sete elementos nele. Então vamos em frente. Número 1234567 Então temos itens da lista aqui. E se eu quisesse selecionar todos esses itens da lista? Como é que eu vou fazer isso? Bem, o que eu poderia fazer é abrir um novo script tag aqui, e você pode realmente ver que o código V vai tentar auto-completar isso para mim. Então é du var aliados. Eu gostaria de poder fazer isso apóstrofo lá. Mas aliados é igual a documentos. Em seguida, assiste Queary selector todos, e podemos dar-lhe exatamente a mesma coisa. Neste caso, nós só queremos selecionar um elemento. Não, não vamos fazer nada com isso ainda, mas vamos dar uma olhada e vamos ficar bem pequenos. E então vamos apenas atualizar e fez isso, uh, Aliados, isso vai parecer um pouco familiar para você agora. Vamos realmente fazer esse rolo de tambor maior, por favor. É um bilhete. Uma lista. Mas, ei, quando olhamos para isso, isso não parece muito com uma matriz? Então, uma vez que aprendemos a fazer loop através de uma matriz, podemos aprender a olhar através de um nó lis facilmente. E vem com todo o tipo de coisas aqui, também. Certo, então na nossa lista de aliados, temos o Índice de zero a seis ou em termos humanos, um a sete. Vamos pegar o 1º 1 e mudar esse texto. Como faríamos isso? Porque é um array com um índice. Bem, sabemos que é basicamente uma matriz. Parece uma matriz. Podemos pegar o 1º 1. Lá vamos nós. Podemos realmente ver isso. É destacado no meu modelo de objeto de documento. E então eu poderia fazer no texto dela. E eu poderia mudar isso para qualquer coisa. Eu quero o que eu quiser e olhe para isso. Funcionou. Então agora podemos mudar qualquer um desses. Digamos que queríamos o número cinco. Bem, que número é esse? Lembre-se, computador, comece a contar no número zero, não no número um. Então, queremos voltar. Um por ele. Selecionado o html interno de um ponto certo é igual a H R. Sim. Oi. Oi. Oi. Oi. Oi. Bam. Agora há uma ligação dentro de você. E, na verdade, se clicarmos com o botão direito e inspecioná-lo quando você verá que adicionamos um link para o nosso modelo de objeto de documento . Isso é novinho em folha. Isso não estava lá no código-fonte. Adicionamos isso dinamicamente. Ok, agora, isso é tudo diversão e jogos. Mas e se quiséssemos obter o valor de um campo de texto ou de uma entrada de texto? Então vamos em frente e criar um novo exemplo aqui. Mm. Vamos criar uma entrada. Vou apenas dar-lhe um tipo de estilo de texto. Vamos fazer um grande estofamento. 30 pixels. Tamanho da fonte, 30 pixels. Então, você sabe, bastante grande. Vamos dar-lhe um nome de classe. Algo que estava familiarizado. Se você já trabalhou com bootstrap chamado controle de formulário. Agora, isso não vai parecer legal, mas terá um nome de classe. Está bem, Legal. Temos uma grande área de texto aqui muito fácil. E se quisermos obter esse valor? Bem, vamos nos dar um valor padrão padrão de em Low World blah, blah, porque realmente não importa o que é. Só queremos obter esse valor. Vamos em frente e criar um seletor de consulta onde podemos realmente obter esse valor. Então nós temos um novo script aqui, e vamos chamar essa variável de entrada é igual a documentos dot queary selector, e nós só queremos selecionar o 1º 1 porque há apenas um aqui controle de forma ponto quando isso nos dará nosso 1º 1 Então poderíamos fazer entrada de log de ponto do conselho e, em seguida, simplesmente o valor. E isso é apenas valor médico. Então vamos em frente e atualizar sua página. Podemos ver Olá mundo blá, blá, blá. Isso é exatamente o que está aqui. E se mudarmos isso para oi oi, eu mudarei lá também. Tudo bem, então, como uma rápida atualização de tudo, nós apenas fomos para pegar um elemento pelo título e apenas um deles. Nós usamos seletor de consulta, e você pode usar os eleitores CSS, como você normalmente faria em CSS. E depois mudamos o imposto interno. Não é grande coisa. Então nós dissemos, na verdade, vamos apenas pegar esses pequenos, mas esse foi o primeiro 1 e nós temos que na página então ele apenas mudou o 1º 1 Então nós dissemos Vamos criar outra variável chamada small. Mas em vez de consultar o documento, consultamos apenas o título, que já selecionamos aqui. É uma nota que existe. E então há um título aqui e nós vamos dizer dentro desse título, procure por um pequeno elemento e dentro disso apenas mudou o imposto interno para Uau! Uau! Uau! Uau! Uau! E depois dissemos: “ Ei, Ei, quer saber?” Nós só queremos pegar um link regular apenas o 1º 1 na página e mudar o texto inter um revestimento para todos ponto com Não é grande coisa. E então nós dissemos, Oh, na verdade, vamos pegar vários elementos. Vamos pegar todos os Aliados Ele criou um array como objeto chamado um nó uma lista, e ele agarrou cada aliado, todos os sete deles. E então nós fomos realmente capazes de mudá-lo apenas selecionando um de cada vez com seu número de índice adequado . E por último, não temos campo de entrada aqui com uma classe de controle de formulário, que pegamos. Havia apenas um, então usamos seletor de consulta, não seletor assustador, tudo como fizemos com os aliados. Isso pegou todos os sete. Isso apenas pega o 1º 1 que você pode encontrar em uma página, e então não podemos junto com o valor de entrada. Então, seja qual for o valor na página, fomos realmente capazes de obter isso e registrar o console. Então agora estamos começando a construir alguma interatividade entre o usuário e nós. Agora, o seu maior tiro é honestamente, este aqui, provavelmente é o mais simples. Então o que eu gostaria que você fizesse como uma pequena tarefa rápida, um pouco de lição de casa dar uma chance a isso, criar uma nova entrada e, em seguida, usar documento um seletor de consulta para pegar essa entrada, Talvez usar uma classe usar um I D. Talvez basta usar o nome dos elementos regulares chamado input. Dê a ele um valor padrão e, em seguida, registre o valor padrão do console. Se você pudesse fazer isso, estamos prontos para ir para a próxima lição porque vamos começar a trabalhar com muito mais eventos, e é aqui que nosso JavaScript fica muito mais dinâmico e se torna muito mais divertido. Não que isso não fosse divertido, mas tivemos que passar por muitos dos fundamentos para chegar aqui. Mas agora podemos começar a criar páginas que têm ouvintes de eventos. Podemos acionar eventos quando alguém clica em um botão ou envia um tipo anterior em um campo de texto . Então vá em frente, nos dê uma chance. Não se esqueça. Se você tem perguntas, deixe para baixo. Sê baixa por mim. Fico sempre feliz em ajudar. Caso contrário, se você estiver sentindo confiança nesta lição, vamos passar pela próxima em que vamos aprender sobre os eventos. 29. Introdução a eventos: eventos são o que torna o javascript realmente incrível. Quando alguém faz algo como digitar em um campo de texto ou clicar em algo, clique em uma rolagem de botão, envie um formulário. Isto é o que torna o Javascript realmente interativo. Agora há realmente duas maneiras principais que podemos fazer neste fim de semana cria um ouvinte de eventos, que vamos abordar em um vídeo posterior. Ou podemos criar eventos baseados em HTML, que é o que vamos manter por enquanto porque é uma boa transição para JavaScript. Listeners de evento de ID de vinculação. Então esqueça que eu disse a última parte. Vamos começar com um simples botão. Então vamos em frente e criar um botão aqui. Temos um botão. Clássico BBT nbt n primário. Se você estiver usando bootstrap ou algo assim, vamos apenas garantir que este é um botão normal. Então tipo é igual ao botão, e isso vai dizer Clique em mim. Tudo bem. Temos um botão chato aqui. E quando eu clico, sim, não faz nada, mas o que podemos fazer é usar ao clicar. Então, se você se lembra de usar isso em HTML ou se você se lembra de aprender sobre ele, nós estamos vendo. Este é o lugar onde vamos usar no clique. Agora. Existem vários outros eventos. Há em enviar em Clique assim por diante e assim por diante e assim por diante. Há toneladas deles. Eu não poderia revisar todos eles, mas o evento on click é o que vamos usar para acionar algum JavaScript. Então vamos em frente e colocar isso em linhas separadas. Então isso é apenas olhar um pouco mais agradável. E no Click, queremos executar alguma função JavaScript. Então vamos criar uma função chamada Click Me Coloque parênteses lá, e também precisamos de algum JavaScript aqui também. Então função de script. Clique em mim e isso corresponde a este aqui em cima, e ele não vai fazer nada em tudo, e não vai tomar nenhum parâmetro em tudo. Ele só vai consolar log cozinheiro e é isso. Simpático e simples. Mas veja isso. Eu posso spam isso repetidamente, e ele continua sendo clicado. E então esta é realmente a base por trás de um evento clique é qualquer vez que alguém clica no botão vai executar algum JavaScript, uma função chamada Click Me Now nós poderíamos realmente ficar um pouco mais chique com a gente para obter. Até agora, Total de cliques é igual a zero. Vamos fazer isto. O total de cliques é igual ao total de cliques, mais um. Alternativamente, se você vem de outros idiomas, pode ser mais fácil para você fazer cliques totais mais mais, isso é a mesma coisa que está fazendo. Mais um e vamos fazer o registro de pontos do console. Você clicou neste botão Total de cliques vezes e só para que possamos ver isso em uma linha para que pareça um pouco mais agradável. Você clicou neste botão Tempo total de cliques, então você clicou nele uma vez duas vezes, três vezes, quatro vezes. Vamos nos dar uma atualização. Você clica nisso uma vez duas vezes uma vez. Eu gosto disso duas vezes três vezes quatro vezes, e continua e continua. E então isso é um evento de clique. E realmente, o que o JavaScript é tudo sobre são eventos, porque por que ter qualquer JavaScript em execução se alguém não vai ter algum evento acontecendo ? Se você não precisa de interação com o usuário, provavelmente não precisa de JavaScript. Então vamos em frente e tornar isso um pouco mais interessante. Vamos criar uma calculadora muito básica que vai ser. Basicamente, alguém adiciona um número dois, um número que já existe. Então vamos em frente e começar isso do zero. Então temos uma entrada. O tipo de campo será um número. Classe poderia ser como controle de formulário, porque vemos que muito em bootstrap. E vamos em frente e nos dar um pouco de estilo básico. Então preenchimento 30 pixels, tamanho divertido, 30 pixels, cor, borda azul, um pixel, azul sólido. E isso deve parecer bom o suficiente. Isso é muito grande. Vamos fazer isso. Será que um pouquinho menor. Lá vamos nós. Então temos um campo numérico aqui. Certo, agora precisamos de um botão. Então vamos em frente. Crie uma quebra de linha e isso em um botão para obter um botão. Classe de ano é igual a eu não sei Bt e fui derrotado Ian Primary. Assim como no bootstrap. Não estamos usando bootstrap, ainda não. Então isso não vai fazer nada, mas nós também poderíamos estilo é se quiséssemos. Eu não vamos adicionar 100 então qualquer que seja o número em número vai ser adicionado ao número 100. Então é realmente metade de uma calculadora neste ponto porque nós não estamos dando dois números. Estamos apenas dando um e dizendo, vamos adicionar 100 Agora vamos fazer isso um pouco de financiamento e vamos realmente fazer esta página fazer algo diferente. Então vamos fazer, ah, jogar cada um aqui. O total é e, em seguida, poderíamos dizer span. E então seja qual for esse total. Então. Atualmente, quando carregamos a página, não há total. Vamos ver como isso se parece. Tínhamos um campo numérico aqui, o que parece muito nojento. Então podemos adicionar 100 e o total não é nada ainda. Vamos adicionar um pouco de JavaScript para fazer este script divertido. Sempre temos que adicionar 100, porque acho que é o que estamos fazendo. Então digamos que Vyron, hum é igual a 100. É apenas uma espécie de como este exemplo está sendo lançado. Próximo. Precisamos criar algum tipo de recurso no clique, então eu no Click é igual a Vamos chamá-lo Calcular e colocamos isso no nosso botão. Agora podemos fazer função calcular que vai levar nenhum parâmetro porque ele vai pegar automaticamente valores da página. Então agora precisamos pegar este campo de entrada, que tem uma classe de controle de formulário. É o único aqui, então podemos apenas fazer um seletor Corey normal em vez de seletor de consulta. Tudo até agora, entrada é igual a documentos dot queary selector e selecionado por sua classe CSS do nosso valor vai ser valor de ponto de entrada. Mas vamos digitar isso como um número, ter certeza que é sempre um número, e então nós poderíamos fazer, você sabe, se valor. Então, se for realmente número, não vamos chegar tão longe nisso. Eu acho que isso vai poluir esta lição um pouco, mas nós também poderíamos fazer algo como o valor total longe é igual ao valor mais 100. Esses 100 já existem em um muito ousado chamado dormente bem ali. Então agora temos um valor total e temos que selecionar esse cara. Então vamos criar um seletor de consulta para pegar o H. E então vamos criar outro seletor de carreira para pegar o espaço, e nós poderíamos apenas selecionar esta banda porque é a única na página. Mas e se não fosse? Não era o único nas páginas poderia ser um pouco mais complicado. Vamos criar var. Idade um é igual a documentos dot queary selector. Sabemos que este é o único na página, então podemos apenas usar um seletor de consulta regular H um e, em seguida, poderíamos fazer muito span é igual a H um ponto span seletor de consulta. Agora que temos isso lá, podemos dizer que o texto interno do ponto gasto é igual a qualquer que seja o número. Então vamos colocar o valor total lá. E vamos ver se Caleb cometeu algum erro. O registro do console não está reclamando de nada que colocou um número aqui. Vamos colocar o número nove. Oh, sim, olhe isso. Ele não pode encontrar algo que eu não posso definir propriedade inter text de No. Oh, ele não sabe onde encontrar isso. Então agora nós depuramos, e isso é uma grande parte da codificação também. Estou realmente feliz que alguns desses erros surgirem para que você possa realmente ver como alguém faz esse tipo de depuração. Então nós temos uma função aqui e nós queremos pegar este hum. Então vamos pegar isso. E quando escrevemos H 10 olhe para isso. É porque não é a única idade na página, não é? Bem, poderíamos fazer uma de duas coisas. Poderíamos nos livrar deste, ou poderíamos fazê-lo da maneira javascript e poderíamos fazer consulta, seletor, tudo, mas porque isso retorna e uma chuva, sabemos tudo sobre indexação, e sabemos que há Pelo menos dois “H” lá dentro. Queremos o 2º 1. Pegue um, porque lembre-se, computador, computador, comece a contar em zero, não no número um. Vamos tentar de novo. Isso é apenas se livrar disso. E vamos colocar o número nove 23. Oh, olhe para isso. E agora temos uma calculadora para colocar o número que eu quiser aqui. E só vai adicionar 100. E se eu não tiver nada aí? Nada. Certo, se eu tentasse colocar o nome Caleb? Oh, é um campo numérico, então html não me permite colocar números são letras. Só quer números tão legais. Isso é um pouco de segurança lá. Então vamos fazer 01 O que acontece lá? Ainda é 101 E agora, neste momento, temos um pouco de um protótipo de calculadora funcionando. Não há nada no registro do console. Estamos fazendo tudo na página real e agora nossas páginas se tornam muito mais dinâmicas. Este é o lugar onde fica muito, não mais divertido, porque você pode realmente ver o seu progresso neste momento agora voltando para a nossa função. Não estamos devolvendo nada que pudéssemos, mas como é um ouvinte de eventos, não precisa devolver nada. Só precisa executar um monte de código. E foi isso que fizemos. Nós dissemos, “ Ei, execute essas seis linhas de código, mas , você sabe, envolva-o em um nome chamado Calculates que nós podemos apenas digitar calcular aqui. Então realmente, nós empacotamos em uma bela caixa da Amazon, e nós dissemos, Ei, esta caixa tem um adesivo chamado Calcular, e dentro desta caixa há seis comandos. Quando você abre essa caixa, a caixa de cálculo há seis comandos em seus seis itens e, portanto, essa é a base por trás de eventos JavaScript. Agora há um muito mais JavaScript você maneira de fazer isso, chamado de ouvinte de eventos. Mas este é um Segway muito bom para isso Agora, o que eu gostaria que você fizesse é experimentar isso. Crie um evento no clique que use uma função novamente. Não precisa ser super complicado. Não sinta que tem que impressionar ninguém com isso. Só precisa fazer alguma coisa, qualquer coisa. Ele poderia até mesmo console log se você quisesse. Se você ficar preso ao longo do caminho Ei, há uma seção comum lá embaixo. Não te esqueças, estou aqui para te ajudar. E se você está se sentindo um pouco confiante de que você tem esse pat baixo, vamos passar para um projeto maior. 30. Projeto de guia a calculadora de dicas de JavaScript: Ok. Olá e bem-vindos ao seu primeiro grande projeto ISH. Fizemos um monte de muitos projetos até agora, e neste ponto, vamos trabalhar em um projeto maior. Então um ponto nós realmente trabalhamos em uma calculadora de dicas, e nós apenas escrevemos o javascript para isso, mas nós realmente não escrevemos o front-end, que é um aspecto importante do JavaScript. Então, neste projeto, vamos estar criando uma calculadora de dicas e realmente exibindo os totais no modelo de objeto de documento no navegador real. Então, há algumas coisas que eu gostaria que você fizesse. Primeiro de tudo, você precisa ter um valor de conta por mais que isso vai ser. Precisamos de um campo de entrada para pegar esse valor esse número, precisamos de um percentual de gorjeta, e então vamos precisar de algum tipo de evento. Então, quando clicamos em calcular, gorjeta e conta total, ele realmente vai funcionar esses números, e então ele vai nos dizer quanto devemos dar gorjeta e quanto a conta total será com a dica. Então, para isso, vamos usar o evento on click no botão e, em seguida, nós também vamos usar um par de seletores de consulta para pegar esses valores, então deve haver um evento de cálculo e em eventos de clique. Então, sempre que você clicar neste botão, ele calcula a dica total e a conta total com a dica em cima dele. É suposto pegar os números, quaisquer números que estejam aqui no momento em que você clicar no botão e então ele vai exibir o valor total da gorjeta e o montante total da gorjeta com a conta em cima disso. Agora, como você pode ver, eu já tenho um pouco do ah, o layout construído aqui. Eu só estou usando bootstraps regulares, então não há nada extravagante acontecendo, e nós vamos usar um javascript baunilha para fazer isso. Agora você vai estar usando uma função Ah, e evento e uma série de seletores de consulta. Agora, eu gostaria que você desse uma chance por conta própria. Veja se consegue resolver isso sozinho. Neste momento, você pode pausar o vídeo aqui e dar-lhe uma foto. Não deve demorar mais do que talvez 15 ou 20 minutos no total. E ei, quer saber? Se você ficar preso, basta retomar o vídeo e eu vou mostrar-lhe exatamente como eu vou sobre a solução. Certo, vamos dar uma olhada em como eu criaria uma calculadora de dicas usando campos de entrada e um botão . Então vamos passar pelo meu você eu primeiro o html só para que você tipo de saber o que eu estou trabalhando aqui dentro. Eu tenho um rótulo para o valor da conta e eu d para o valor da conta, e isso é apenas a conta total normal. Vamos colocar um número lá. Por exemplo, 25 99. Seja o que for que a refeição vai custar, digamos que você está em um restaurante no custo de 25 99. Este é o valor da fatura, então eu vou usar um I D. Mas você pode usar uma classe se você quiser. Você poderia usar qualquer outra coisa. Seja qual for a maneira que você deseja selecionar esse elemento, isso depende de você. Mas eu vou usar um I D porque é o único que vai estar nesta página. Basicamente fiz a mesma coisa com uma gorjeta. Montante para quantidade seletiva vai ser uma porcentagem tem um I D. Nós podemos ver que aqui as idéias, quantidade gorjeta e o espaço reservado é tudo como nove ou 9% e nós vamos ter que tomar que 9% e transformá-lo em um decimal. E então temos um botão aqui. Então nós temos, você sabe, um pouco mais de formatação aqui, mas principalmente temos um botão que diz Calcular Dica e conta total. E por último, temos uma linha que não podemos ver ainda, e eu vou realmente demonstrar este 123 e então 456 E aqui é onde vamos exibir a quantidade de gorjeta e o total com a dica, então só porque eu não tenho nenhum valores em sua parece que é atualmente invisível. Então, quando isso for calculado, vamos preencher essas dibs com algum tipo de texto ou HTML nele. Vamos em frente e começar isso. Vamos dissecar isto movendo-se para trás. Queremos esta forma quando não é realmente uma forma. É um evento. Não está usando um formulário. Elementos não estavam enviando um formulário. Precisamos de um evento no botão. Então, sempre que alguém clica neste botão, ele precisa fazer algo primeiro. As coisas primeiro é que vamos para o nosso botão e usamos no clique, e então precisamos dar-lhe um nome de função. Então vamos dar-lhe, ah, função, objetivo de calcular. E nesse ponto, o projeto realmente começa a nos guiar. Então nós calculamos que eles não estão fazendo isso apenas um pouco maior. Aqui temos um funcionamento aqui chamado Calcular, e agora precisamos adicionar um script aqui, e precisamos criar uma função chamada Calcular. Agora nós não sabemos o que isso vai levar ainda, mas nós sabemos que nós temos uma função chamada Calcular e ela tem que existir. Então vamos em frente em um log de console clicado. E quando eu atualizar a página e abrir minhas ferramentas de inspeção aqui no conselho, e vamos apenas fazer isso maior, vamos clicar aqui clique, clique, clique, clique, clique como Ok, bom. O evento clique é que estamos trabalhando. Próximo. Precisamos ser capazes de pegar o valor total da conta e o montante total da gorjeta. Então, como vamos pegar esses elementos? Bem, sabemos que esses elementos são entradas, então precisamos pegar o valor deles. Atualmente, não há nenhum valor lá, mas quando digitamos, pode haver um valor lá dentro. Então vamos em frente e criar um seletor de consulta para cada um. Foi criado variável para o valor da conta e que vai ser documentos ponto Não, nós não vamos usar crítico seletor Nós vamos usar get elemento por i d. E o que foi isso? Temos a quantia da conta e a quantia da gorjeta e temos a mesma coisa aqui em baixo. Quantia da gor É perto do sul inferior. Meio difícil de ver agora. Estes são apenas os nós, estes ar, os elementos HTML. Este não é o valor real. Então nós poderíamos, neste momento, fazer algo como valor de ponto. Ou podemos colocar estes em novas variáveis ou sobrescrever as variáveis existentes com algo como quantidade de ponta é igual a quantidade de ponta que o valor. E eu não soletrei direito, porque tecnicamente é uma variável diferente. Lá vamos nós. Para que pudéssemos fazer isso de duas maneiras aqui. Vou deixar os dois aqui como um exemplo. Agora, neste ponto, não sabemos se algum desses são números, então vamos ter que trabalhar com isso. Um pouco e vamos em frente e lançar estes como números. Digamos que o valor do Bill é igual ao valor da fatura, e aqui nós só queremos nos lançar como um número e queremos fazer a mesma coisa com o montante da gorjeta. Mas nós poderíamos até fazer isso aqui assim. E, de fato, poderíamos até fazer dessa maneira. Então agora vamos em frente e log do console. Conselho de Ternos Liza. Eu pensei, conta de registro e a quantidade da gorjeta. E então quando eu atualizar a página e eu colocar um número aqui, digamos que 12 é o 1º 1 e 34 é o 2º 1 Vemos 12 e 34. Então sabemos que estão funcionando. E se fôssemos registrar o tipo de cada um, saberíamos que eles seriam um número. Então, agora podemos fazer matemática apropriada com eles. Não temos que nos preocupar com a Katyn comer? É para que o total acabe por ser 1234 Sabemos que se nós fôssemos adicionar estes juntos, seria 46 em vez de 1234 Então é uma edição real e não tomada Capitão ação, e nós certificamo-nos de que esse é o caso usando um número. Não, o valor da gorjeta é atualmente um número. O valor da gorjeta é por padrão. Bem, por padrão , são nove. Mas agora eu tenho 34 mostrando, então o padrão é nove como o texto de espaço reservado. Não é o que o padrão real é, mas ele diz que você sabe exemplo. Nove. Precisamos transformar isso em decimal, então vamos mudar. O montante da ponta é igual ao montante da ponta dividido por 100 de modo que apenas muda nove. Então vamos dizer que nove vai se transformar em 0.9 Isso é basicamente tudo o que vai didio. E agora, neste ponto, precisamos criar uma quantia total de gorjeta. Então eu tenho algumas convenções de nomenclatura muito ruins aqui porque eu estou apenas chamando de quantidade de gorjeta . Você pode querer renomear o seu para que ele seja um pouco mais detalhado, pouco mais discreto, para que você sempre saiba com o que está trabalhando. Eu só vou usar a quantidade de gorjeta aqui, e eu vou criar uma nova variável chamada total Dica da nossa gorjeta Total é igual ao valor da fatura vezes, o valor da dica e é isso. E neste momento, se eu salvar e atualizar a página, não há erros aqui. E eu sei que agora posso selecionar isso e colocar a gorjeta total lá. Então vamos em frente e fazer isso. Vamos fazer documentos. Não consultar o seletor. Queremos usar a quantia da gorjeta. CSS seletor ponto inter html. Normalmente fazemos isso em alguns passos diferentes, mas neste caso vamos fazer tudo em uma linha. E que Inter html é simplesmente vai ser a dica total que poderíamos usar HTML interno ou com uso . Inter textos não estavam usando HTML, então provavelmente deveríamos usar inter text. Mas talvez queiramos apimentar isso um pouco mais tarde. Ok, então eu coloco, digamos 50 e 10. E se isso funcionar fora do montante total da gorjeta deve ser cinco e todos dizem cinco ali . É um pouco pequeno. Vamos fazer isso maior e, de fato, porque é HTML, poderíamos dizer HD masculino, gorjeta total e então aqui podemos fazer um pequeno elemento em Katyn comeu tudo isso. E, de fato, o que eu quero fazer é dividir isso em novas linhas. Então vamos fazer var dica html, e isso apenas mantém agradável e limpo, colocando-o em duas linhas. E então eu fechei a tag pequena e a tag H três, e então eu coloquei a dica HTML aqui e vamos reexecutar isso. Então, novamente, vamos colocar algo como 100 colocar uma quantidade total de gorjeta de 25%. Então sabemos que 25 de 100 vai ser 25 sobre o total de gorjeta 25. Poderíamos colocar um cifrão lá se souber que está trabalhando com dólares e algo que não aprendemos. Mas, sabe, pode ser divertido trabalhar com ele. Se você quiser pontos decimais lá, você pode fazer para corrigir dois e isso Apenas certifique-se de que há sempre dois pontos decimais lá, então vamos em lá, frente e atualizar e dar uma chance a isso. 125 e isso vai dizer 25.0 Então eu não espero que você saiba o para corrigir as coisas, mas, hey, isso é um pequeno truque legal, e eu gosto de jogar esses pequenos truques e dicas para essas soluções de projetos também. Meio que te deixa mais familiarizado com algumas das diferentes maneiras. Podemos fazer coisas em JavaScript sem necessariamente precisar de uma lição inteira em torno dele. Então temos o nosso total tep. Agora precisamos do total das contas. Vamos fazer var valor total da conta, e tudo o que queremos fazer aqui é adicionar a dica total, a que já calculamos para o valor da fatura. Esse é o valor normal da conta. E vamos copiar esta linha aqui porque não vamos mudar muito. Então dica e-mail HD vai ser. É uma conta de conta html total com dica, e vamos precisar alterar isso para corresponder o valor total da fatura. E então essa variável agora corresponde a isso muito. Mas vamos colocar isso em linhas separadas também. Vamos fazer isto. Torná-lo agradável e fácil de ler. E então, por fim, só precisamos pegar nosso elemento de nota dos machos HD. Precisamos usar um seletores de consulta do seletor de consulta de ponto de documento. Nós não queremos a quantidade de gorjeta que queremos para o total com gorjeta. Se tão total com gorjeta e poderíamos fazer interior. HTML é igual a Bill HTML. Vamos nos atualizar e nos dar uma chance. Vamos fazer alguns números básicos para que saibamos que isso sempre vai funcionar. Então nós temos uma nota de $100 em uma gorjeta de $25,25 por cento, não $25 de 125% das centenas vai ser 25. Então o montante da gorjeta deve dizer 25 e, em seguida, o valor total da conta. Assumindo que fizemos tudo certo vai custar $125 e boom. Assim, temos gorjeta total de $25 com a gorjeta $125. E vamos em frente e fazer algo um pouco mais louco, porque as contas não são geralmente apenas $100 digamos 87 ponto 43 então ele é $7,43 e quantidade gorjeta como uma porcentagem. Então talvez você geralmente goste de dar 15% e você não quer trabalhar fora essa matemática em sua cabeça Então você basta clicar, calcular gorjeta e conta total e ele diz que para sua nova dica vai ser 13. 11 e sua conta total será de $100,54. Então lá vai você. Isso é um projeto de calculadora. É o projeto de calculadora de dicas é um maior, e estamos usando um pouco mais de funcionalidade dentro do modelo de objeto de documento. Então nós estamos realmente usando valores de entrada foram realmente calculá-lo com uma função. Nós não estamos realmente retornando nada porque isso tem mais a ver com eventos e não realmente armazenar dados como uma variável. Não precisamos devolver nada. Mas se quiséssemos, apenas para uma boa medida, poderíamos sempre retornar o valor total da conta como este. Ou se quiséssemos colocar isso em uma matriz, poderíamos dizer, Ah, a quantidade total de gorjeta, a quantidade total gorjeta vírgula o valor total da conta. Eu sei que temos acesso a esta função no console do navegador para que possamos executar, calcular, e é apenas indo para pegar os números de nossa página automaticamente e vai retornar um array com o valor da dica e o valor da conta gorjeta total na conta total. Então vamos em frente e nos dar uma atualização. E vamos fazer isso. Digamos que 92,67 e o montante total da gorjeta será oito. E aqui podemos dizer que os totais serão calculados e não leva nenhum parâmetro. Ele está pegando automaticamente os parâmetros que ele requer dos campos de entrada do seu modelo de objeto de documento. E olha para isso. Ele muda automaticamente nossa página. Além disso, ele também retorna o valor total da dica mais a conta total com a dica, embora pareça que ele retornou strings. Então, se você quisesse, você poderia realmente mudar isso em um número. Mas, uh, então isso é tudo o que há para a calculadora de gorjetas. Espero que tenha aprendido algo muito legal. E como sempre, se você tiver perguntas, preocupações, comentários, você sempre pode deixá-los abaixo. Não se esqueça, você sempre pode pegar todo o seu código. Você pode tirar uma captura de tela do seu código como eu fiz. Tenho o meu editor bem aqui, e depois tenho o meu produto final bem aqui. Você pode tirar uma captura de tela e compartilhar isso como seu projeto. Ou você pode jogá-lo em caneta de código. Se você gosta mais disso e você pode compartilhar sua caneta de código. Você é Ellen. Posso dar uma olhada no código real e funcionalidade dele para você também. 31. Funções anônimas: já. Vamos dar uma olhada em funções anônimas antes de fazer isso. Espero que o último projeto tenha corrido bem, onde você criou uma calculadora de ponta completa a partir do zero e uma espécie de transição disso para algumas coisas mais baseadas em funções. Então estes se tornam um pouco mais JavaScript e coisas onde uma idéia como uma função anônima pode não existir em todas as linguagens de programação. Mas é definitivamente uma coisa muito comum no mundo do JavaScript. Quando se trata de uma função, temos função palavra-chave, qualquer que seja o nome da sua função vai ser. Param um parâmetro para um monte de coisas. Devolva uma coisa aqui. Essa é a sua função básica. Vou em frente, comentar isso e vamos ver como é uma função anônima. Então, uma função anônima é uma função sem um nome, e isso fica um pouco mais no escopo, sobre o qual vamos falar um pouco mais abaixo da estrada. Escopo é basicamente onde as variáveis são capazes de ser usadas ou onde as funções são capazes de ser usadas. Mas falaremos sobre isso na estrada. Não precisa se preocupar com isso agora. Vamos dar uma olhada em uma função anônima para função anônima pode ser armazenado em uma variável, então temos variável get name. E então, em vez de criar um nome de função, nós apenas dar a isso uma função de função regular, e então nós poderíamos dar-lhe um parâmetro se quisermos. Mas não vamos nesse ponto e então, como uma função regular, poderíamos retornar uma coisa aqui. Então, por exemplo, eu poderia devolver meu nome Caleb transportando. E quando eu abri isso no meu navegador, se eu digitar o nome Oh, é uma função. Olhe para isso. Não é uma variável no. Se eu fizer tipo de get name, vamos ver que é uma função. Então, como é que conseguimos isto agora? Então, parece uma função. Basicamente, nós apenas armazenar para funcionar em uma variável. Agora, para realmente fazer isso funcionar, precisamos adicionar parênteses porque é uma função, não uma variável. Acontece que ele é nomeado como se fosse uma variável. Então usamos “get name” com os parênteses aqui, tornamos isso um pouco maior, e você verá Caleb contando. Também podemos armazenar isso em outra variável . Então essa é uma variável. Isso é o que vamos chamar de variável 1, porque eu sou criativo assim. E então eu poderia fazer conselho. Vamos fazer um aviso. Disparar um. Aí está, Caleb dizendo. E então isso é realmente tudo o que há para uma função anônima. Agora, neste momento, você provavelmente está pensando, bem, bem, por que eu precisaria disso se eu pudesse escrever uma função regular? Bem, uma função anônima é basicamente, se você tem um monte de lógica ou realmente qualquer lógica que você quer executar apenas uma vez, ela não precisa necessariamente ir em uma função. Funções são feitas para ser usado uma e outra vez. Mas se você tem código de grupo onde você está executando algum tipo de lógica, ou talvez você está recebendo um valor do modelo de objeto de documento do seu HTML e você só obtê-lo uma vez. Bem, então talvez colocá-lo em uma função anônima, uma função que só deve ser executada uma vez é uma boa idéia. E vamos dar um exemplo sólido aqui. Então eu já tenho bootstrap aqui, e o que eu vou fazer é apenas configurar um layout de bootstrap simples. Certo, aqui tenho uma fila de contêineres. Chame ele de nada demais. Temos um texto de entrada que tem uma classe de controle de formulário e um personalizado aqui chamado Js Custom name. Este é o que vamos querer usar aqui. Então, em nossa função anônima, o que poderíamos fazer é retornar documento dot query selector colocar nosso seletor de consulta lá, don value. E agora o nome vai ser o que dissermos para ser. Então, se eu atualizar sua página aqui, nós temos uma entrada. É realmente o topo da página foi meio difícil de ver, mas se eu disser John Smith e então eu executar obter nome? Meu nome é John Smith. Então agora eu poderia dizer isso. Agora podemos mudar para qualquer coisa, Caleb Colleen. E aqui em baixo, eu poderia executar obter nome novamente, como uma função normal. Ou eu poderia armazenar isso no nome para que eu pudesse dizer nome é igual para obter nome. E agora o nome será sempre o nome. Não importa quantas vezes eu mude. Então, se eu mudar é de volta para John Smith e eu digitar um nome, ele permanece como Caleb dizendo porque nós temos o nome original e então nós começamos como uma variável. Agora a grande coisa aqui é quando você está usando uma função anônima, verdade, você só deve estar tentando usá-lo uma vez que você tem uma ou duas ou três ou talvez mais linhas de código, e tudo é apenas suposto ir para um variável regular. Então, em vez de armazenar isso como uma variável, o que podemos fazer é usar get name como uma função quase como se fosse uma variável. Então vamos em frente e fazer o registro de pontos do conselho. Oi, meu nome é e isso pode gato obter nome aqui como uma função não como uma variável. E diz: “ Oi, Oi, meu nome é John Smith. E se eu mudar isso de volta para Caleb Tallinn e eu reexecutar, exatamente a mesma coisa vai mudar. Ele vai dizer oi, meu nome é Caleb ligando. E então há um caso de uso para isso. Nós não vamos entrar muito nisso agora, mas no final da estrada, você vai ver muito disso em javascript mais avançado. E então se quiséssemos realmente fazer isso funcionar automaticamente, então não precisamos executar isso toda vez. Podemos executá-lo assim que a página carregar. Podemos envolver isso entre parênteses em mais dois conjuntos de parênteses no final e um ponto-e-vírgula , e isso é o que chamamos de função imediatamente invocada. Falaremos mais sobre isso na próxima lição, mas basicamente isso vai correr imediatamente. Então, se eu atualizar a página aqui e eu digitar get name não como uma função, mas como uma variável podemos ver que já foi executado acontece para ser não há nada lá dentro. Então vamos em frente e alterar esse valor padrão. Vamos fazer Kylo Ren. Então o valor padrão aqui é kylo ren, e se eu me livrar deste e tipo, obter o nome diz Kylo Ren. Então agora temos uma função que executa automaticamente apenas uma vez e armazená-lo como um nome de variável chamado Get Name. E é assim que usamos funções imediatamente invocadas novamente. Falaremos mais sobre isso na próxima lição, então vou desfazer isso para sua tarefa. Nesta lição, na verdade não há tarefa. Vou manter isso de novo, isso é apenas algo que é realmente bom de saber. Você vai ver isso muito mais na estrada. Quando você começa tipo de sair para o selvagem JavaScript, você vai usá-los muito mais frequentemente, mas essencialmente ele funciona exatamente da mesma maneira que uma função para que você possa passar em um parâmetro se você quiser, e então você poderia chamá-lo como se fosse uma função regular. 32. IIFE: Ok, vamos dar uma olhada no que é chamado de uma função imediatamente invocada. Basicamente, esta é uma função que corre imediatamente. Então, no estado selvagem, em JavaScript regular, vamos ver uma função regular que se parece com isso. Temos uma palavra-chave de função regular do que o nome da função, talvez alguns parâmetros, e ele retorna algo. Não sabemos o que vai voltar. Você poderia devolver basicamente qualquer coisa. Então, Para executar essa função, temos sempre que fazer algo como este nome de função colocar no primeiro parâmetro, colocar em segundo parâmetro e talvez começar como você sabe, uma variável de algum tipo, e que o executa automaticamente na última lição. O que nós olhamos era algo um pouco diferente, uma função anônima, e nós meio que entramos e eu e imediatamente invocamos a função Expressão é realmente o que é chamado para me deixar escrever isso. Eu tenho dito que eu f e, mas eu não disse a coisa toda, então eu i f e é igual e imediatamente invocado expressão de função. E então estas são basicamente apenas funções que são executadas automaticamente. E quando fizermos isso, vamos ver que isso realmente funciona. Então vamos em frente e atualizar. Eu tenho um valor padrão no meu campo de entrada porque é isso que está pegando seletor de curry documento Js doc Custom name e ele está retornando o valor. Então eu tenho o valor padrão de kylo ren e quando eu atualizar parece que nada acontece. Mas quando você usa get nome mostra seu kylo ren, modo a criar uma função imediatamente invocada. Basicamente, tudo o que fazemos é tomar uma função. Vamos fazer este primeiro. Esta é uma função anônima, então nós apenas colocar um colchete de abertura no início do colchete de fechamento no final e, em seguida, um conjunto de parênteses ou parênteses, vez de um conjunto de parênteses no final. E isso diz Javascript. Ei, assim que você ver essa função, execute-a. E assim faz. E assim não, podemos apenas usar get name em vez do que teríamos que fazer com a função regular , que é obter nome como uma função. Você pode realmente ver que há um tipo de ar não capturado aqui diz get name não é uma função que não é. Costumava ser uma função, mas na verdade retornou de valor aqui automaticamente. Então agora get name é na verdade apenas uma variável com um valor nele. É assim que transformamos uma função anônima em uma expressão de função imediatamente invocada. Se quiséssemos uma função regular, não vamos fazer isso. Vamos fazer uma nota aqui. Na verdade, isso é um “I fi “com uma função de Nana Miss. Se quiséssemos criar uma nova função que é executada automaticamente poderia fazer literalmente qualquer coisa, poderíamos apenas criar uma função como esta. Dê um nome a ele. Então, digamos carregar aplicativo. Esse vai ser o nosso nome. E aqui vai dizer que o aplicativo Cônsul Dot Log está carregando. Vai haver algum tipo de lógica aqui. Talvez a tua página fosse fazer alguma coisa. Talvez haja uma animação. Talvez você tenha que esperar por alguma coisa. E então, no final, você poderia dizer conselho ponto log AP é carregado. Bem, momento, esta é uma função regular, então isso não vai fazer nada. Se carregarmos a página, vamos ver que nenhum desses registros do cônsul apareça e me deixe ter medo disso lá. E quando eu refresco você tem, nada disso aparece. Na verdade, eu vou ter que executar o aplicativo de carga como uma função para este trabalho do dedo do pé. Mas e se você tiver todos os tipos de lógica aqui e você não quer necessariamente executar o aplicativo de carregamento ? É suposto ser executado automaticamente. Bem, quero dizer, não há nada de errado em fazer isso assim que funcionaria. Ou você poderia apenas dizer JavaScript. Ei, basta executar isto automaticamente, não importa como é chamado. Não temos de o fazer. Em vez disso, ela comeu. Nós não temos que carregá-lo, apenas executar assim que ele está lá, Deixá-lo executar. E agora, quando eu atualizar a página, vamos ver que os logs do cônsul aparecem assim como o aplicativo está carregando está carregado. Então, de novo, apenas como uma atualização rápida. Tudo o que fazemos é colocar entre parênteses de abertura no início da função e, em seguida, um no final da função e, em seguida, um conjunto de parênteses de abertura e fechamento no final e que apenas dizer JavaScript. Ei, mesmo que esta seja uma função, execute-a automaticamente novamente. Não há lição de casa, mas sempre que você olhar para uma biblioteca JavaScript ou framework, você verá esse tipo de expressão em todo o lugar. E no começo você pensa, bem, por que há tantos parênteses em todo o lugar? E isso é tudo o que isso significa. Isto significa apenas que vamos simplesmente executar tudo o que está entre isso automaticamente. É tudo o que diz. E então isso é algum fundo fantástico com JavaScript. 33. A palavra chave `this`: Vamos falar sobre um assunto, uma palavra-chave que é meio assustador para muitos novos desenvolvedores. E essa é essa palavra-chave quando eu digo palavra-chave, quero dizer, é uma palavra reservada, então temos palavras reservadas como função de retorno, var. E agora a palavra isto. Então, geralmente você não deseja usar nenhuma dessas palavras-chave como nomes de variáveis. Então a palavra-chave this realmente se refere a um objeto com o qual está executando um lance atual de código JavaScript. Significa apenas eu mesmo, eu falando sobre si mesmo. Então, no exemplo de uma função, temos uma função get person, e poderíamos dar a isso um nome e então poderíamos fazer o nome de retorno. Então variável de função muito simples. Kayla era igual a pegar a pessoa Caleb. E então isso só vai voltar. Caleb é igual ao Caleb, e sempre que vires isto, vais ver este ponto qualquer coisa. Talvez seja uma função com parênteses. Talvez seja este ponto. Outra variável não funciona. Algo assim vai entrar em um nome apropriado um pouco abaixo da estrada. Ou talvez seja só esse nome. Sempre que você vê este ponto o que isso está se referindo é a sua função ou se você está dentro de um objeto do qual ainda não falamos, Nós não aprendemos formalmente. Ele só vai se referir a si mesmo. Então, realmente, o que isso está dizendo é este nome de ponto função atual e esta é a palavra-chave aqui. E então uma coisa legal que podemos fazer aqui é que podemos começar tipo de atribuição de variáveis dentro de uma função, e podemos atribuir uma variável normal assim, como nome de fogo é igual a nome. Mas já temos isso aqui. Em vez disso, vou mostrar-te uma coisa fixe que podemos fazer. Nós fazemos longe este nome ponto é igual ao nome. E se mudarmos o nome de retorno para retornar isso. Então apenas devolva este objeto em particular que poderíamos dizer, Caleb dot name e obter o meu nome. Então vamos em frente, nos salve e nos dê uma atualização. E isso já está sendo executado como Caleb é igual para obter pessoa até agora. Caleb Estranho. Que tipo de Caleb é esse? Oh, é um objeto, algo que não aprendemos formalmente sobre o que estamos começando a fazer a transição. Mas a coisa boa sobre esta palavra-chave é que agora eu posso fazer o nome Caleb ponto olhar para isso. Lá está ele. Eu faço. Este ponto Profissão é igual a Professor e Dev salvar Refresh, Caleb ponto profissão. Caleb é um professor e um desenvolvedor. Nome Caleb Dot. Meu nome é Caleb, e agora temos uma variável com variáveis dentro dessa variável que são acessíveis através da notação de pontos. E você vai ver isso em todos os lugares e jabs. Isto é incrivelmente comum. Esta notação de ponto basicamente, tudo o que estamos dizendo aqui é que você sabe, se nós escrevêssemos isso manualmente, e se isso fosse permitido em javascript, não é. Mas se fosse permitido em javascript, seria vier. Caleb dot name é igual a Caleb e var Caleb dot profissão é igual a Professor e Dev, e isso é essencialmente o que isso está fazendo aqui. Isso não é tecnicamente permitido assim, mas sim, é o que estamos fazendo. Isso não é tecnicamente permitido assim, mas sim, Então nós estamos dizendo, Ei, você tem variável um var um ponto um interno de são dois lados para vier interno também, e então você pode apenas referenciar o que quer que seja que vai ser tão interno. Var para. A coisa boa sobre isso agora é de repente, em vez de escrever duas variáveis por pessoa. Poderíamos estar escrevendo duas variáveis dentro de uma função, e então a variável em si poderia ser apenas uma linha. E então nós só temos que dizer isso uma vez, e então nós podemos reutilizá-lo uma e outra vez. E assim, quanto mais código você escreve, mais complexo seu código se torna mais eficiente. Torna-se porque a sua escrita real último código menos é muitas vezes melhor agora, assim como um verão rápido aqui. Uma referência rápida re sempre que você vê este ponto ele está se referindo a uma função pode ou não pode ter um parâmetro pode ser apenas uma função regular. Pode estar se referindo a um objeto, sobre o qual falaremos mais na estrada, mas essencialmente é apenas referindo o que está dentro de seus colchetes dentro deste ecossistema aqui, isso só significa em si mesmo. Isso é tudo o que é. Então, sempre que seu aprendizado javascript ou você está aprendendo PHP assim no PHP, eu acredito que é isso é igual a, e então qualquer que seja o seu nome var. Ah, se você está aprendendo Python, eu acredito que é apenas auto-dúvida. Seja qual for o seu nome var é, este sinal de dólar isso e auto em diferentes idiomas todos referem exatamente a mesma coisa. Agora, neste momento, você não precisa saber como usar isso demais. Nós vamos entrar nisso um pouco mais abaixo da estrada. Mas enquanto você está aprendendo JavaScript, você iria ver muito disso, e eu só queria que você estivesse preparado. Então, quando você vê isso, você não vai. Uh, o que é isso? Eu não entendo como isso está funcionando. Isso está totalmente bem. Porque agora você entende que isso basicamente está dizendo, Hey, get person dot Name é igual a qualquer que seja o nome, que é assim. E essa profissão dura está basicamente dizendo “Get person dot” profissão, que é uma variável dentro da função. Então ele está realmente falando sobre si mesmo agora. É uma espécie de, ah, pouco de um conceito de dobra mental no início. Então, se você não conseguir imediatamente, não se preocupe com isso. Não se martirize. Não seja muito duro consigo mesmo. Isso vem com a prática, então não há lição de casa para esta lição em particular. Eu só queria te mostrar isso, te familiarizar um pouco com isso e meio que facilitar a idéia de objetos sobre os quais vamos falar no final da estrada. E eu sei que continuo dizendo isso, mas objetos são uma grande parte da programação orientada a objetos, e nós meio que precisamos estar preparados para isso. Então, lá vai você. Essa é a palavra-chave “esta”. Isso significa apenas que seja qual for o seu código que está fazendo referência a esse conjunto específico de colchetes, isso é tudo o que significa. Espero que tenha feito sentido, e vejo-te na próxima lição. 34. Âmbito: Olá e bem-vindo de volta. Sei que temos falado muito sobre funções ultimamente. Acho que devemos dar um tempo para isso. Na maior parte, terminamos com funções, pelo menos por um pouco. Ei, então vamos falar sobre o escopo. O escopo é um assunto que eu tenho dançado propositalmente. Escopo é basicamente onde nossas variáveis vivem. Então nós temos criado um muito ousado apenas tipo de em nosso script aqui. Nome da variável, na verdade variável, claro, é igual a JavaScript para iniciantes. E podemos usar essa variável em qualquer lugar em nosso script. Então, se nós criamos uma função, fazer ah coisa que poderíamos dizer console ponto log curso. Poderíamos até retornar o curso porque definimos esta variável aqui e vamos usá-la dentro desta função. Então vamos em frente e atualizar nossa página e apenas digitar, é claro, como uma variável. Vamos ver javascript para iniciantes. Claro o suficiente, e então fazer ah, coisa é uma função que podemos ver. É apresentado por este f encaracolado Nós colocamos parênteses em torno dele ou depois que ele em vez pressione enter e nós vamos ver javascript para iniciantes é log console, e ele retorna Javascript para iniciantes. Esta é uma introdução ao escopo. Então a idéia é que se você tem uma variável que está fora de uma função, você pode usar essa variável dentro de uma função. E então, realmente, este é o seu escopo externo. Você pode pensar nisso como, como a atmosfera ao redor do nosso planeta. Não importa onde você esteja, você está praticamente acessível a algo que é encontrado na atmosfera. Oxigênio ou nitrogênio ou hidrogênio. Algo assim. E o próprio planeta seria a função. E assim porque esta variável aqui tipo de envolve todas as outras funções que são, você sabe, pensar nisso como na mesma linha aqui, tipo de envolve em torno de que você pode usá-lo dentro de uma função. Agora, o oposto não é absolutamente verdade. Isso é muito importante notar. Então, se criamos variável em sua barra, professor é igual a Caleb Tallinn e não importa o que retornamos ou o que consola log. Na verdade, podemos até nos livrar dos dois. E fizemos professor de log de pontos cônsul, Isso não vai funcionar porque essa variável é escopo para esta função. Vá em frente e nos dê uma atualização e você pode ver essa referência não capturada. Todo professor não está definido. E isso é porque mesmo que ele esteja definido aqui e nós podemos console, registrá-lo no seu relógio este registro de console, vamos em frente e vamos fazer pontos de exclamação para o 1º 1 e para o 2º 1 está fora da escola. E então vamos correr fazer uma coisa. Então nós realmente para executar esta função. Na verdade, poderíamos transformar isso em um “I F E “se quiséssemos. Poderíamos fazer algo assim. Vamos em frente, refresque-se e diz: “ Ei, Ei, professor está aqui. Está na função, mas não é acessível fora da função. E então o oposto do que eu estava dizendo originalmente não é verdade. Mas observa-nos. Ainda podemos usar o curso dentro da função, mesmo que seja uma expressão de função imediatamente invocada. Lá está ele. Aí está o meu nome. Há o nome do curso, variável local, variável global e os nomes reais que tendemos a usar. E assim quando você tem uma variável global e você pode usá-la localmente, em qualquer tipo de função que você quiser. Quando você define uma variável local dentro de uma função, você não pode usá-la globalmente. E esta coisa toda aqui não é específica para JavaScript. Embora a forma como JavaScript faz isso é um pouco peculiar. Em JavaScript. Você pode criar a variável aqui e acessá-lo imediatamente sem passá-lo através do parâmetro ah em outras línguas. Isso não é inteiramente verdade. Você tem que oferecer muitas vezes colocar curso lá e então vamos nos livrar disso. Só porque queremos manter isso simples, você passaria no curso, e então você diria algo assim, faria uma coisa e então você passaria na variável do curso e então seria capaz de usá-la aqui. E então, quando dermos uma chance, isso vai funcionar. Isto vai dizer três pontos de exclamação. Professor e depois três pontos de exclamação. O curso que está fora e, em seguida, fora do escopo, ainda não vai me dar o professor. E com certeza, sempre que eu atualizo três pontos de exclamação, professor nomeou através de exclamação marca o nome do curso porque nós passamos por ele, então muitos idiomas fazem isso assim. Mas em JavaScript você não precisa passá-lo explicitamente porque uma variável global automaticamente tem jurisdição em um ecossistema local como uma função. Então, quando eu apertar a atualização, você verá que absolutamente nada mudou. Então vamos em frente e criar alguns comentários de código. Algumas notas. Esta é, ah, variável global porque esta função pode ser aberta. Isso também é chamado de função global. Esta é uma função global, e então nós vamos apenas executar a função, executar a função e um simples log de pontos do conselho. Não há grande coisa lá, e esta variável aqui. Esta é a muito importante. Esta é uma variável local, e as variáveis locais só são acessíveis dentro de seu ecossistema ecos local. Então, isso só é acessível e é ecossistema local e, em seguida, para console logs. E então agora nós comentamos e documentamos corretamente nosso código. E assim a maneira de pensar sobre isso é que as variáveis globais podem estar em qualquer lugar. Assumindo que eles são definidos ou criados fora de um ecossistema local, eles são permitidos em qualquer outro lugar. E se eles são definidos dentro de um ecossistema local como uma função, eles não têm permissão para sair desse ecossistema local. Eles podem viver dentro da função, seu local. Mas novamente, variáveis globais têm jurisdição para basicamente estar em qualquer lugar em qualquer ponto no tempo. Então o que eu gostaria que você fizesse é dar uma chance para tentar quebrar isso o melhor que puder. Então crie uma função criativa variável global. Tente acessar essa variável global dentro da função sem passá-la, e não dê a ela um parâmetro. Basta tentar acessá-lo de dentro da função e, em seguida, criar um acesso variável local que dentro da função. Mas então, fora dela, tente acessar essa variável local fora da função. Então, crie uma variável global que funciona dentro da função e, em seguida, crie uma variável local que não funciona fora de uma função. Dê uma chance e você deve ver o mesmo ar que eu encontrei, e isso é realmente tudo o que há para examinar. Então, sempre que você está fora na natureza e você vê um erro que diz não capturado, variável de ar de referência não é definida. Isso porque provavelmente está fora do escopo ou a variável ainda não existe 35. Hoisting: Ok, vamos falar sobre uma coisa estranha que JavaScript faz. Esta é uma peculiaridade JavaScript. Chama-se içar, não mangueira, içar. Pregado em JavaScript sempre que você vê a palavra var, que temos visto em todo o lugar, Basicamente o que isso está dizendo é qualquer que sua variável está se movendo para o topo de seu escopo. Mas não dê um valor ainda. Então, por exemplo, função get person, e nós criamos uma variável local aqui. Sabemos sobre variáveis locais a partir da lição de escopo. Var nome é igual a Caleb, e então poderíamos fazer algo super simples, como um nome de log console. E então, se corrermos, colocar a pessoa dentro da nossa página aqui, obter uma pessoa com parênteses porque é uma função. Vai dizer, Caleb, Caleb, mas você percebe essa coisa indefinida. Isso é por causa do içamento variável. Vamos fazer um exemplo aqui. Sabemos que o código é executado de cima para baixo, e fazemos o nome da variável do log do ponto do conselho. Isso deve nos dar um erro porque isso ainda não está definido. O nome da variável não está definido acima deste, por isso não deve funcionar, e então nós definimos, e então nós cancelamos registrado o nome. Vamos dar uma chance a isso. Vamos ver o que acontece aqui. Obter pessoa. Vemos o Indefinido Caleb Indefinido. E assim, neste momento, sabemos que o indefinido estava lá em cima e poderíamos realmente fazer isso. Vamos tornar isto mais fácil. Var não definido ainda que rimou, e que não foi intencional. Barra está definida, e isso é atualizar e executar novamente essa função. E aqui vamos ver. Var ainda não está definido, e este é o valor indefinido em JavaScript. Indefinido é basicamente um tipo de dados. É como um número. É como uma string ou uma função booleana ou uma matriz. Este é outro tipo de dados. É indefinido. E realmente, o que isso significa é, e você vai ver isso um pouco fora da natureza To é apenas declarar variáveis. Nome do Var. É exatamente o mesmo que está fazendo isso. Então nós dissemos: “ Ei, Ei, há uma variável, mas ela não tem valor, então nenhum valor. Embora esta seja uma string que diz nenhum valor, por isso tem um valor, não é também um valor. Isso significa que não há nada nele. Você disse explicitamente que não há nada nele. Em JavaScript, indefinido significa que a variável foi definida, mas não há nenhum valor nela. Atualmente, o interpretador JavaScript não tem idéia do que isso deveria ser. E assim isso vai ser indefinido. Vamos continuar e salvar isso, e vamos ver se reexecutamos esta função. Devemos fazer isso e I F E diz Variável não está definido ainda indefinido, e então é definido. E então temos nosso indefinido regular lá dentro, que podemos ignorar. Esse último é vamos em frente e criar e imediatamente invocado função porque eu não quero continuar escrevendo isso. E vamos em frente. Lá vamos nós. Isso parece muito melhor. E então içar é essa idéia de que assim que seu navegador interpreta JavaScript assim ele está lendo o código, ele está dizendo, Ei, nesta função, há alguma variável? Diz um, deixe-me ver primeiro antes de fazer qualquer coisa e depois diz: “ Oh, Oh, sim, há uma variável aqui, ok. Ah, eu realmente não me importo qual é o valor. Só quero ter certeza de que isso está definido. Então basicamente faz. Isto leva-o para o topo, e neste momento, estamos a dizer que o nome é igual ao Caleb. Não temos que declarar Vier porque já vai estar lá em cima. Isso é essencialmente o que está fazendo agora. Não vamos fazer assim. Não necessariamente. Não exatamente desse jeito. Mas está tudo bem. Tudo bem, porque sabemos que assim que criarmos qualquer tipo de variável que vai ser içada até o topo de seu escopo, que está aqui entre esses colchetes e, em seguida, com base no escopo, diminua o lição anterior. Sabemos que não podemos acessar o nome da variável fora dessas funções. Vamos em frente e fazer o log de pontos do console e é um nome é nome. Sabemos que esta é uma variável local. Ele está sendo automaticamente içado para o topo como se tivesse sido definido automaticamente sem um valor . E então aqui em baixo, nós basicamente apenas dissemos, Oh, na verdade, nós temos Há um valor, então há um pequeno pedaço de memória alocada em seu computador para esse nome de variável. Espero que você use e dissemos: “ Sim, Sim, tudo bem, aqui está. Nós vamos usá-lo, e porque é uma variável local, ela não está acessível no escopo global Então, quando atualizamos sua página, isso é embaraçoso porque ainda diz Meu nome é Caleb. , Na verdade, a razão para isso é porque eu tenho uma história aqui. Variável chamada Caleb. Eu só fiz isso. Ele está morto. Se eu mudei este, vamos mudar todos estes. Mude aquele e aquele e aquele e aquele. E as mudanças no meu nome onde eu ainda não tenho isso armazenado no meu navegador. Então, atualize. E lá vamos nós, assim é melhor. E então ele está dizendo que meu nome não está definido e porque isso é novamente devido ao escopo esta variável é uma espécie de vinculado. Está trancado a esta área em particular. Não podemos usá-lo fora daqui. Mesmo que o içamento diga: “ Ei, Ei, o nome da variável é que vamos movê-la para o topo da mira. Ele está bloqueado a este escopo para que ele não possa sair. Agora vamos dar uma olhada rápida nos tipos de dados indefinidos, então vamos fazer de. Então vamos criar uma variável aqui e vamos chamá-la de computador, certo? Ele retornou seu valor. Seu valor é indefinido. Vamos fazer tipo de computador e vemos que ele é indefinido. E se jogarmos isso em uma declaração if Se Computador for igual a indefinido Alerta é indefinido, indefinido, não em busca. Olhe para isso. É indefinido. Nós poderíamos até fazer uma comparação rigorosa aqui, também, assim como podemos fazer se o computador fosse para três. Então, três sinais de igual é igual a alerta indefinido, estritamente indefinido. E olha para isso. Diz que é estritamente indefinido. E isso porque o computador não tem nenhum tipo de valor em um ano. Agora podemos dizer que o computador é igual a eu não sei, Mac OS , eu acho, e isso é reexecutado. E se eu fizer a comparação não rigorosa com apenas dois sinais iguais? Nada acontece. E como isso ficaria no código dela, se quiséssemos. Nós poderíamos fazer. Se o meu nome é igual a indefinido, então vamos defini-lo aqui. Meu nome é igual a Caleb. Vamos em frente. Livre-se disso agora. Se nos salvarmos e tentamos atualizar sua página, vamos ser apresentados com um erro como este, ele diz erro de referência não capturado. Meu nome não está definido. Ainda não definimos. Ele acha que deveria estar lá, mas não usamos a palavra-chave VAR. E se fizéssemos isso? Vamos jogar aqui embaixo. Vamos fazer var o meu nome. Apenas jogue no fundo. Isto está a içar no seu melhor. Atualizamos a página e lá vamos nós. Na verdade, funciona. Então o que eles disseram foi: “ Ei, Ei, mova essa variável até o topo como se vivesse aqui em cima. Meu nome está aqui em cima. Está indefinido no momento. Não há valor. Não sabemos o que é. Então diz: “ Ei, Ei, se meu nome é indefinido, se não há valor, basta reatribuí-lo. Certifique-se de que ele tem um valor de Caleb e então podemos usá-lo aqui agora para tornar isso um pouco mais complicado e apenas para ter mais algum tempo com a palavra-chave esta que sempre poderíamos fazer. Vamos mudar isso de e eu e para uma função regular. Podemos sempre verificar se um parâmetro está definido ou não. Se não houver padrão. Então poderíamos dizer, você sabe que o nome por padrão é igual a Caleb. Isso é ótimo, mas e se não houver nenhum? Muitas vezes você vai ver algo assim. E se houver um que não tenha passado? E se o fizéssemos? Nome do registro do ponto do console do cônsul. O que acontece quando guardarmos isto e tentarmos imprimir isto com o registo da consola da Sue? Seja qual for esse nome, atualize. E temos que executar esses parênteses de pessoas. Diz uma coisa. Indefinido. Ok, bem, nós não demos um nome a ele, mas agora podemos verificar se ele realmente está lá. Então podemos o quê? Não demos um nome, mas agora podemos verificar se esse nome é indefinido e definir um padrão. Podemos fazer isso do jeito manual. Então, em vez de fornecer um valor padrão como este, se você estiver usando JavaScript em um navegador antigo, como o Internet Explorer, ele pode não suportar algo assim. Então você vai querer escrever código compatível com versões anteriores que diz se nome é igual a stripped estritamente igual a indefinido, podemos defini-lo aqui. O nome é igual a Caleb. Vamos em frente e atualizar. Pegue veneno. Bam! Uma coisa, Caleb, é um registro de console aqui. Diz uma coisa. Caleb, não lhe demos um nome. Então agora o nome padrão é Caleb. Nós escrevemos isso manualmente, e podemos sempre dar-lhe um nome, também. Então poderíamos dizer que é esforço, meu gatinho, e ele vai dizer, Oh, Oh, na verdade está definido, então, você sabe, pule toda essa declaração se. E então é aqui que içamento, escopo e indefinido se unem. E como um resumo rápido, indefinido basicamente significa que não há nenhum tipo de dados associado a uma determinada variável. No entanto, sempre que você define uma variável, não importa onde você define o nosso nome é igual a qualquer que seja o nome que quer que seja, JavaScript lê-nos e diz, Oh, vamos mover isso para cima para o topo. No momento, está indefinido até que você o defina mais tarde. Isso é chamado de içamento e escopo é o fato de que esse nome não tem permissão para deixar esses colchetes que é escopo. Então, espero que tudo tenha feito sentido. Há muito para descompactar neste vídeo em particular, mas precisávamos aprender um monte de outras coisas para que isso começasse a fazer sentido. Não há lição de casa para isso. Eu realmente só quero que você seja capaz de digerir isso se você quiser se sentir livre para mexer com algum de seu próprio código e tipo de pegar o jeito disso. Mas isso no último par de lições foram fundamentos JavaScript. Estes ar não coisas super divertidas para aprender necessariamente. Mas eles são muito importantes. Você vai ter problemas no futuro onde esses assuntos como escopo e içamento vão ajudá-lo um pouco. Você entenderá por que você pode estar recebendo um erro específico. Próximo. Vamos passar para algo muito mais divertido. Vamos aprender sobre a segunda maneira de vincular eventos à nossa página. 36. Introdução a Listeners de eventos: Ok, vamos aprender sobre algo divertido. Estávamos aprendendo um núcleo de barco. JavaScript. Fundamentos, como içar funções anônimas, imediatamente invocado função, expressões, escopo, coisas assim. Tudo coisas muito importantes. Mas, reconhecidamente, não são as coisas mais engraçadas a aprender. Então vamos mudar isso. Vamos aprender sobre um evento ouvinte de evento. Ouvintes são, eu ia dizer hilariantes, mas na verdade não são hilariantes. Eles são tremendamente úteis e também divertidos. Eso Eles são chamados ouvintes de eventos, e nós tipo de mergulhar em isso em um ponto no tempo quando escrevemos Button on Click é igual a sim, algo que dissemos a ele para executar uma função particular. E então nós realmente modificamos nosso HTML. Modificar seu HTML nem sempre é possível, e às vezes você só quer que as coisas funcionem automaticamente. E então o quê? O que podemos fazer é criar um pouco de código JavaScript chamado ouvinte de eventos, e ele está ligado a um elemento de nó particular ou ah, javascript, nenhum Doran. elemento Html emergiu as duas palavras lá juntos para criar um elemento de nó. Então ouvinte de eventos é basicamente apenas uma função que está ligada ao dedo do pé da página da Web. Ouça cliques de eventos sempre que você digitar uma tecla sempre que você rolar para baixo na página. Algo assim. Agora, os dois ouvintes de eventos mais comuns lá fora, de longe são o clique e a tecla pressionada. Assim, sempre que você digitar em um campo de texto ou campo de entrada, ou sempre que você clicar em algo, ele pode ser acionado. Ah, há outro chamado Borrão. Assim, sempre que você clicar em um campo de texto e, em seguida, sair, ele pode ser capaz de executar alguma ação nesse ponto. Mas estes dois parecem ser os mais populares. Borrão ainda é muito, muito popular. E então há apenas toneladas e toneladas de ouvintes de eventos lá fora. Nós não podemos aprender todos eles, mas felizmente eles funcionam quase todos da mesma maneira, então nós realmente só temos que aprender um ou dois deles. E, em seguida, você pode usar qualquer ouvinte de eventos que você deseja. Então vamos criar um ouvinte de eventos simples que vai contar o número de vezes que um botão é clicado. Então está em uma aula aqui. Vamos fazer Bt nbt nas primárias. Este é apenas bootstrap Bt um LG, e que é dada uma classe de botão Js, e isso só vai dizer, Clique em mim. É garantir que isso fique bem na nossa página diz, clique em mim Então você sabe, um botão chato. A primeira coisa que precisamos fazer é realmente pegar este botão usando algum tipo de consultas. Eleitor obter elemento por I d. funcionaria. Ah, nós poderíamos usar um seletor de consulta regular, que é o que nós estamos indo para dio realmente não importa como você obter este elemento. Você só precisa ser capaz de selecionar este nó. Então vamos em frente e criar vier. Bt N é igual ao seletor de consulta do stud do documento. Nós não vamos usar criar seletor tudo porque há apenas um aqui que queremos selecionar. Então usamos o botão Js e isso vai nos dar um botão. Então vamos em frente, atualizar e assistir. Este tipo de BCN e destaca automaticamente o meu botão aqui, como você pode ver. Então nós temos este botão como uma nota e quando fazemos tipo de botão, você pode realmente ver que é um objeto. Estamos pegando objetos do dedo do pé, eu juro. Eu prometo que eles estão vindo agora Tudo o que temos a fazer é dizer BTM Esse é o nome desta variável aqui. Adicionar ouvinte de eventos Que tipo de ouvinte queremos? Este vai ser um clique assim como nós temos no Click, que foi no clique. Nós apenas chamamos de Clique em JavaScript E então nós damos a isso uma função e nós vamos passar no evento. E então, neste momento, estamos familiarizados com a idéia de notação de pontos. Então temos um botão aqui e sabemos que o ponto do botão no texto dela é igual a clicar em mim, por favor. Então podemos mudar uma notação de ponto que é apenas uma espécie de notação de ponto no seu melhor. Então estamos dizendo, Ei, Ei, agarre o botão no ouvinte de eventos, esta é uma função. E então o primeiro parâmetro é que tipo de evento? Ouvintes que estavam dizendo, Ei, ouvir cliques e o segundo parâmetro, nós não vimos isso ainda, mas o segundo parâmetro é realmente ah, função basicamente parece que isso só foram Escrevendo o caminho mais longo. Então temos uma função aqui, e o ouvinte de eventos sempre passará no evento para este ouvinte em particular. Então aqui está o que podemos fazer. Neste ponto, podemos dizer fazer algo aqui, mas queremos contar até o número de cliques. Então, digamos que o total de cliques é igual a zero. E como esta é uma variável global, podemos acessar isso localmente. O total de cliques é igual ao total de cliques, mais um, que é essencialmente o mesmo que fazer o total de cliques mais mais. E, em seguida, vamos criar outro elemento na página que apenas conta ou exibe o total de cliques. Então Div I d. Total cliques algo assim e vamos pegar esse elemento também. Então vamos fazer documento ponto get elemento por i d. total de cliques ponto em seu texto é igual ao total de cliques. Vamos em frente e dar uma chance a isso. Assim diz Click me e ele está contando uma e outra e outra vez. Eu vou fazer isso significativamente maior mudando isso de um div para um H. E também vou ampliar aqui. Olhe para isso. Está contando para mim. Não escrevemos nenhum HTML adicional para o ouvinte de eventos. Nós apenas escrevemos alguns JavaScript adicionar ouvinte de eventos. E você se lembra quando estávamos aprendendo sobre o escopo algumas lições atrás provavelmente entediou você até a morte com essa. Mas é aqui que se torna importante, porque se movermos o total de cliques aqui, Scope diz , Bem, isso sempre será zero. Toda vez que esta função executa este evento, ouvinte é executado. Toda vez que clicamos no botão, estamos redefinindo esse 20 e isso não funcionará. É sempre uma entrevista. Um redefine. Zero adiciona um. Mas se definirmos que é globalmente e apenas modificá-lo localmente, será zero e depois um e depois dois e depois três e depois quatro e então cinco e assim por diante e assim por diante e assim por diante. Lá vamos nós. Temos um ouvinte de eventos JavaScript. Agora, isso é muito legal, mas isso não é tão legal quanto ser capaz de pegar texto de um campo de entrada, que vamos fazer na próxima lição. Então você não tem que fazer nada neste último momento. Não há lição de casa. Só quero que dê uma olhada nesse tipo de sintaxe. Então nós temos botão ponto adicionar ouvinte evento. Seu primeiro parâmetro é o tipo de evento. Nós dissemos que vai ser um tipo de clique e como o segundo parâmetro que passamos em uma função inteira e uma última coisa a observar antes de irmos para a próxima lição, podemos realmente mover esta função inteira para fora, dar-lhe um nome de anúncio então o segundo parâmetro é simplesmente o nome da função. Então vamos em frente, atualizar, e isso funciona também. 37. Como obter valores de entrada: Ei aí. Na última lição, aprendemos sobre o ouvinte de evento de clique, que se parecia muito com aqueles anúncios de ponto de botão que o ouvinte de evento clique e, em seguida, algum nome de função. Neste vídeo, vamos realmente tentar obter o valor exato de algo de um campo de entrada. Talvez estejamos a pedir o nome de alguém e queremos pôr esse nome em todas as teclas. Podemos fazer isso antes de tudo, separar html. Então nós temos entrada de entrada ponto formulário controle nome Js, e nós vamos selecionar isso por seu nome. E, em seguida, talvez, vamos também exibir uma mensagem de boas-vindas de volta para a página. Então, dois olá, e então seja lá qual for o nome que vai ser. Então vamos querer selecionar isso no mundo do JavaScript. Vamos precisar de algum tipo de elemento para mudar isso. Poderíamos mudar tudo isso. Poderíamos dizer olá, Caleb. Olá é esforço. Olá, Henry. Ou podemos mudar o nome se quisermos fazer uma maneira em particular. Vamos mudar a extensão. Classe é igual a Js alterar o nome. E então quando iniciarmos isso na página dela e apenas como olá e há um campo de entrada aqui, ok? E, em seguida, apenas rolando para baixo para o nosso JavaScript. Agora a primeira coisa que precisamos fazer é realmente precisamos selecionar este campo de entrada. E então demos um nome de jazz. Essa é a classe. Parece que vamos pegar esse var como uma entrada e essa entrada como um fogo. Então documentos selector de consulta ponto vamos pegar apenas o 1º 1 Js, não o nome. E então agora queremos vincular um ouvinte de eventos a isso. Então nós fazemos ponto de entrada adicionar ouvinte evento. Poderíamos fazer a chave para cima, e então podemos dar-lhe uma função como seu segundo parâmetro. E este vai ser o evento que sempre vai passar no evento. Ah, muitas vezes você só vai ver a letra e que significa evento foram realmente apenas renomear a entrada variável. Não importa ser mais explícito. Eu gosto de chamar isso de evento, mas na produção, eu costumo chamá-lo de E. Mas vamos mantê-lo simples e evento universitário, e então nós poderíamos fazer o conselho dot log evento dot valor-alvo Então você acha que seria apenas o valor do ponto do evento? Mas isso não vai funcionar. Precisamos do evento real e, em seguida, para atingir esse valor. Então vamos em frente e salvar isso. E toda vez que digitamos algo aqui, vamos vê-lo aparecer no cônsul e ocasionalmente digitar muito rápido para isso é um K a L O B. Lá vamos nós. Então isso é chave para cima. Podemos fazer a chave para baixo. Há uma diferença. É como quando você pressiona a letra no teclado e seu dedo ainda não se moveu para cima. Essa é a chave para baixo. tecla para cima é quando o dedo sai da tecla pressionada. Mas vamos em frente e ficar com o manter-se regular, porque esse vai dar-nos o valor total. Assim que eu bater, Kay diz K A L O B. Assim que eu digitar, isso me dá todo o valor lá dentro. Então agora precisamos ir em frente e mudar esse nome. Então vamos consultar o nosso modelo de objeto de documento nosso HTML Para isso eles são nome, não entrada nomeada. Parece um pouco estranho nomear esse elemento de nome, eu acho, porque não? Documentos dot query Então porta trancada jazz mudar nome. E então porque não queremos redefinir isso todas as vezes. Toda vez que pressionamos uma tecla, é um pouco mais eficiente assim. Poderíamos apenas usar a variável fazer inter text é igual ao valor do ponto de destino do evento ponto. Vamos em frente e nos livrar disso. E isso vai mudar à medida que eu digitar. Olá, Caleb. Olá, Zephyr. Olá, Henry. Olá, D'Argo. Olá. Meu nome é Caleb e eu amo Coda, incluindo dois editaram códigos e aí está você. E novamente, este é apenas o segundo parâmetro e, em seguida, expandir sobre isso ainda um pouco mais. Esta função aqui como um parâmetro é tecnicamente chamada de função de retorno de chamada, uma função de retorno de chamada, ou apenas um retorno de chamada para abreviar. E o que isso significa é toda vez que você pressiona uma tecla e seu dedo se move para cima do teclado, ele executará uma função. E então o que poderíamos fazer aqui é que podemos realmente remover isso e vamos definir uma função funcional aqui chamada de volta apenas para mantê-lo simples. Damos esse nome lá dentro, e ele vai executar isso. Não importa qual é esse nome. O nome pode ser qualquer coisa não importa, mas é tecnicamente chamado de função de retorno de chamada, então eu vou chamá-lo de volta. Então, enquanto você está lendo isso, você vai entrada na chave de ouvinte de evento para cima e depois de tudo para cima, ele vai executar uma função de retorno de chamada. Então você clica, salva, atualiza sua página e ela continua funcionando. Sim, olhe para isso. Isso é bastante incrível. E isso é divertido. Então, agora, se você combinar isso com o ouvinte de eventos de clique, você pode alterar todos os tipos de coisas em sua página com base em eventos de clique ou eventos de chave, você pode fazer todos os tipos de outras coisas. Então agora, se você está interessado em, ah, pouca atividade extracurricular, o que você pode fazer é pular na máquina do Google e apenas procurar por um evento JavaScript diferente . Tipos de listener. Há muitos deles lá fora. Você não precisa saber a maioria deles para ser totalmente honesto, mas você deve saber que há um monte lá fora e eu não posso possivelmente rever cada um deles porque esta série de vídeos vai ficar muito, muito longo e inchado e eu Não quero desperdiçar seu tempo assim. Ensine uma pessoa a adicionar ouvintes de eventos, e não importa o que o ouvinte seja. Você será capaz de lidar com isso no futuro, então essa é a minha filosofia de ensino. Então isso está recebendo valores de entrada com um ouvinte de eventos JavaScript. Na próxima lição, vamos em frente e mudar algumas cores CSS com ouvintes de eventos e tornar nossa página super dinâmica. Então, não estamos apenas mudando de texto. Vamos mudar algo que realmente tem a ver com o estilo da página. 38. Como alterar CSS com Listeners de eventos: alta nas últimas duas lições que aprendemos sobre ouvintes de eventos. Usamos o ouvinte de evento de clique e usamos o ouvinte de evento de chave para cima. Mas vamos realmente fazer algo divertido, porque até agora nós apenas mudamos um pouco de HTML em um pouco de texto interno, e isso é você sabe que está tudo bem porque isso torna nossas páginas dinâmicas, mas não é tão divertido ou é visualmente atraente quanto eu acho que poderia ser. Então vamos em frente nesta lição e criar um novo ouvinte de evento que vai mudar o texto baseado nas páginas, cor e cor de fundo. Então precisamos de alguns anos de melão HD. Vamos fazer Hum. Olá Mundo Agora não vamos fazer Olá, mundo. Estamos muito além do “Hello World”. Vamos fazer a mudança de CSS com ouvintes de eventos. Agora precisamos de campos de entrada. Vamos criar um negativo com uma entrada, apenas um texto normal e eu vou estilizar isso para que você tenha algum tipo de estilo. Vamos dar um tapinha 30 pixels e também o tamanho da fonte 30 pixels. Vamos torná-lo grande, e precisamos de um rótulo aqui na cor de fundo e vamos em frente e duplicar isso. Chame essa cor de texto, mesma coisa e então vamos adicionar uma classe em ambas as classes igual a Js algo por lá. E eu acabei de ligar para Js apenas para que eu saiba que é apenas para JavaScript, JavaScript, cor BG e vamos fazer cores de texto JavaScript. E se olharmos para a página dela, vai ser bem feio. Sim, acrescenta muito nojento. Mas quer saber? É o que é. Então a idéia é que nós podemos digitar aqui exatamente assim, e ele vai mudar a cor de fundo de sua página e mudar a cor da fonte de nossa página. Então precisamos criar dois ouvintes de eventos para isso. Vamos caranguejo, o primeiro ouvinte de eventos antes da cor de fundo. Até agora, cor BG é igual a documentos seletor de consulta ponto Bom o suficiente, e vamos também pegar a cor do texto Js cor Js cor do texto, e vamos chamar essa cor de texto um. Agora precisamos adicionar nosso ouvinte de eventos, então vamos fazer ponto de cor BG adicionar chave de ouvinte de evento para cima porque estamos digitando em um campo de texto, vamos passá-lo uma função de retorno de chamada que automaticamente leva um parâmetro chamado evento. E, em seguida, vamos apenas registrar o console por enquanto. Cancelado o valor do ponto de destino do evento log, o que quer que seja, e vamos continuar e duplicar tudo isso. cópia passou. A cor do texto e vai fazer exatamente a mesma coisa. Digamos que cor BG neste log de console e que é fazer cor de texto neste log de console. Atualize a cor BG. Podemos ver isso lá e depois x cor. Podemos ver isso no cloro deles, como eu o nomeei. Não, ele quer basicamente mudar o texto das páginas, cor e a cor do fundo das páginas. Não aprendemos como fazer isso em JavaScript. Sim, isto vai ser muito divertido para isto. Vamos em frente e pegar todo o corpo do documento, e então vamos mudar o estilo do corpo, a cor de fundo. Então vamos fazer de Nosso corpo é igual a documentos ensinados consulta, seletor. Vamos pegar o corpo e então podemos fazer ponto no estilo do ponto do corpo. A cor do plano de fundo é igual a eventos que visam esse valor. E tudo o que fizemos aqui foi dizer, , vamos pegar o corpo inteiro. Esse é o elemento do corpo que vem de lá e, em seguida, o estilo nele. Então, estamos vendo essa notação de ponto muito mais vezes. Agora este estilo vai ter uma cor de fundo. Tecnicamente, é cor de traço de fundo, mas em Javascript você não pode usar um traço em um nome de propriedade ou variável. Então o que fazemos é tratá-lo de camelo. Então, sempre que você vê um traço em uma declaração CSS, não Dash C, é apenas maiúscula Ver, ou se fosse, ah, imagem de fundo, não seria imagem de fundo. Seria capital de fundo. Eu imagino um invólucro de camelo para que ela tenha uma cor de fundo. E vamos ver se isso funciona. Cor de fundo Vermelho. Oh, olhe para essa cor de fundo azul cor de fundo. Vamos fazer uma cor hexadecimal preta. Isso é muito legal. Isso é começar um trabalho. Certo, vamos fazer a mesma coisa com a cor do texto. Agora podemos ficar mais eficientes com isso porque em cada chave para cima estamos consultando a página para o elemento corpo. Agora, felizmente, só há um, por isso é fácil de encontrar. Mas você sabe, se você digitar a palavra R E. D vermelho , ele vai executar isso três vezes, e como sua página fica maior e maior, isso fica mais lento e mais lento, e então vamos basta mover isso para o escopo global, e não precisamos nos preocupar em limpá-lo mais de uma vez, porque ele estará sempre disponível para nós e em sua cor de texto. Poderíamos fazer uso disso colando aqui embaixo, e eu colei o errado. Então, uh, você não viu nada. E então aqui estamos apenas dizendo, o estilo do corpo, não a cor de fundo. Apenas a cor da fonte regular vai ser qualquer que este valor de destino do evento vai ser para a cor do texto para esta nota, vamos em frente. Atualizar a cor do texto. Digamos branco. Parece que tudo desapareceu. E se eu selecionar tudo? Ainda está lá. A cor de fundo vai ser lida ou azul ou verde que é tão difícil de ver. Ou preto e amarelo, preto e amarelo, preto e amarelo. E é assim que mudamos CSS com ouvintes de eventos. Agora, a qualquer momento, você pode até mesmo alterar um CSS enquanto suas páginas carregam inicialmente. Então, se quiséssemos. Vamos em frente e mudar a cor BG usando JavaScript para que o estilo de ponto de cor BG termine também. Cor de fundo é igual a ler, assim como o carregamento da página que vai ser lido. E ha realmente fez isso errado porque eu selecionei cor BG. Eu me antecipei. Fiquei um pouco excitado demais lá. Então eu vou fazer é desfazer isso e vamos descer. E em vez de cor BG, vamos fazer o corpo. Lá vamos nós. Isso parece melhor. Ah, nós também poderia mudar a cor padrão também fazer preto, que provavelmente já era trenós. Você espera? Lá vamos nós. E isso vai com qualquer CSS que você confinou. Então, por exemplo, BG Color. Digamos que queríamos acrescentar alguns arredondamentos. Vamos fazer o estilo de ponto de cor BG Esse raio de borda vai ser Vamos dar-lhe um raio de borda de 10 pixels . Olhe para isso. Esse ar agora em volta daqui a pouco. Vamos dar-lhe uma borda que é dada uma borda de três picaretas é pontilhado preto. Ei, olhe isso. Quero dizer, isso é bem feio. Não me entenda mal, e nós nunca queremos realmente implantar isso na vida real. Mas agora estamos realmente mudando CSS com javascript. Nós não estamos escrevendo nenhum CSS realmente. Quero dizer, isto é CSS, eu acho, mas nós não estamos escrevendo nenhum. Estilos reais estavam deixando JavaScript você, tudo isso. E à medida que escrevemos aqui, vai mudar para nós, o que é muito legal. Agora. Poderíamos dar um passo adiante. Poderíamos dizer: “ Ei, Ei, talvez as cores de fundo só possam ser de uma certa cor. Vamos em frente e adicionar isso como uma variável para que não temos que digitar evento esse valor alvo o tempo todo e vamos fazer uma instrução if. Melhor ainda, vamos fazer uma declaração de mudança. Ainda não vimos muito isso, então mude a cor. Na verdade, precisamos atribuir isso. São dois casos iguais a azul, e podemos fazer isso. Na verdade, o quê? Nós poderíamos até mesmo empilhar estes juntos. Então isso é meio interessante. Blue read, Aguarde e, em seguida, padrão. Sempre vai ser. Precisamos de uma pausa na tua pausa. A cor padrão sempre será branco e erro de sintaxe. Isso foi culpa minha. Eu só queria escrever isso. Pode-se dizer que foi um erro de sintaxe porque tudo estava se tornando eso cinza. Basicamente isso está dizendo, hey, pegue todas as cores ou qualquer cor que esta é atualmente e diz Se é vermelho, branco ou azul, em seguida, mudar a cor de fundo para vermelho, branco ou azul. Caso contrário, mude-o sempre. O branco apenas manter branco é o padrão. E agora estamos limitando a entrada do usuário. Então, se eu digitar preto, ele só vai para o dedo do pé branco como padrão. Mas se eu digitar vermelho, vai funcionar. O azul funciona. Branco, obviamente, funciona. Fato que não queremos esperar. Queremos que isso seja amarelo porque o branco já está lá em cima, então não faz sentido ter trabalhos brancos. E se eu digitar alguma coisa aqui, o padrão é amarelo. E aí vai você. Esse é um bom exemplo de como usar um ouvinte de eventos como usar seletores de consulta alterando o estilo CSS. Até usamos uma função de retorno de chamada. Usamos uma instrução switch que usamos para ouvintes de eventos e mudamos o estilo padrão quando a página foi carregada. Então nós realmente realizamos muito neste vídeo. Então o que eu gostaria que você fizesse é apenas colocar nossas mãos em experiência com basicamente tudo que eu escrevi neste vídeo. Vá em frente, crie alguns seletores cruelmente, tente alterar o estilo, crie uma entrada e tente adicionar um ouvinte de eventos com uma tecla para cima e uma função de retorno . E talvez ele não precise ter uma instrução switch que possa ser um pouco complicada para o que estamos usando atualmente. Mas você pode dizer que a cor do ponto do corpo é qualquer que seja essa cor que você está digitando no campo de entrada. Vá em frente, dê um tiro, mexa com ele de novo. Você não vai ser capaz de quebrar nada. Então faça o seu melhor e, honestamente, divirta-se um pouco com ele. Eu sempre gosto de mexer, e eu gosto de tentar quebrar as coisas e tipo de descobrir onde a borda é de todo tipo de assunto que eu aprendi, como, como, quão longe eu posso empurrar algo exatamente, e que me dá muitas mãos na experiência. Eu realmente gosto de fazer isso. Caso contrário, se você está se sentindo muito confiante com isso, acho que devemos passar para o nosso próximo mini projeto. 39. Mini Mini Projete no JavaScript 5: Olá, End. Bem-vinda de volta. Vamos começar o nosso próximo mini-projeto aqui. Agora, a idéia por trás deste projeto é toda sobre ouvintes de eventos. Então este mini projeto, o que eu gostaria que você fizesse é criar três elementos de entrada. E então eu quero que eles façam coisas diferentes com o evento diferente. Os ouvintes mudam a cor do plano de fundo, alteram a cor do texto e alteram o tamanho da fonte da página à medida Então eles devem ser campos de entrada. E você deve estar olhando para o ouvinte de eventos chave para cima, e sempre que alguém pressiona uma tecla em um desses campos de entrada, ele deve executar seu ouvinte de eventos e tentar fazer uma alteração em sua página. Agora nós basicamente fizemos isso no último vídeo onde estávamos mudando como cores CSS com ouvintes de eventos como você digitou. Você não precisa obter esse avanço, mas eu só quero que você obtenha alguma experiência com ouvintes de eventos JavaScript diretos . Então vá em frente e dê uma chance. Tente se você pode fazer tudo de memória. Se não puder, tudo bem, mas é bom fazer o cérebro suar um pouco. E como sempre, se você ficar preso, você sempre pode referenciar o outro material. Isso está totalmente bem. Ninguém vai envergonhar-te por isso. E eu sugiro agora que você pause este vídeo porque eu estou prestes a desvanecer isso para preto e então eu vou começar com a minha solução da maneira que eu iria implementá-lo. Então vá em frente, Posit Video. Dê uma chance, e então quando terminar, retome este vídeo e você pode assistir a minha solução. Não é a solução perfeita, mas é uma solução. Há tantas maneiras diferentes de fazer as coisas em linguagens de programação como Javascript e Python, todas essas outras linguagens que não há maneira perfeita de fazê-lo. Mas vou mostrar-lhe a minha solução. Então pare agora e dê uma chance. Muito bem, vou mostrar-vos a minha solução para muitos ouvintes de eventos do Projecto número cinco. As primeiras coisas primeiro. Precisamos criar três elementos de entrada. Deseja alterar a cor do plano de fundo para alterar a cor do texto e deseja alterar o tamanho da fonte da página à medida que você digita. Todos estes devem ser como você digita alguns para ir para o meu editor V s código aqui, e as primeiras coisas primeiro eu preciso de três elementos de entrada, então eu não vou fazer uma bela página olhando por qualquer meio. Vou simplesmente criar um monte de rótulos dibs e entradas. Então Div nós vamos ter um rótulo aqui, e este rótulo vai ser para cor de fundo de cor BG novamente, este é apenas um rótulo regular. E então vamos em frente e em uma entrada aqui formulário controlar alguns bootstrap básico lá e o I D vai ser cor BG. E então essa idéia vai combinar com este rótulo quatro ou quatro. Atribua aqui e paramos e atualizamos sua página. Vamos ver a cor de fundo aqui. Nada vai acontecer. Nós ainda não escrevemos nenhum JavaScript. Agora nós basicamente queremos copiar esta cor de fundo duas vezes, texto, cor e tamanho da fonte, e este vai ser um número, então ele muda para o tamanho do telefone. Vamos mudar isso para a cor do texto, e o que eu vou fazer é algo que você verá uma quantidade razoável na natureza. Mas em vez de obter esses elementos pelas suas ideias, o que nós definitivamente poderíamos ser uma maneira muito rápida de fazer isso. Vou obtê-los por seu seletor CSS usando um prefixo JavaScript. Então Js e, em seguida, cor BG vai ser o 1º 1 Js cor texto é o 2º 1 e tamanho da fonte Js é o 3º 1 Ok, vamos atualizar e você sabe que não é a melhor página olhando, mas ele faz o trabalho Agora precisamos criar alguns seletores de consulta, Precisamos pegar todos os três campos de entrada então vamos em frente e criativo são variáveis. Vamos dizer que cor BG vai ser eu vou apenas mover que aqui para cima seletor de consulta ponto documento e nós só queremos o primeiro 1 Então Js cor BG que corresponde a este aqui e, em seguida, aqui nós queremos cor de texto e este vai ser cor de texto e, em seguida, o terceiro 1 é vai ser tamanho divertido e este vai ser divertido e suspiros traço Ok, neste momento no tempo porque estamos escrevendo alguns javascript, eu vou clicar direito inspecionar, ir para o meu console atualizar E eu estou apenas usando o Firefox para isso e eu ver que não há erros em anos. Então, por exemplo, isso criaria lá. Ver referência Air SD s. D. A s não está definida. Então não tivemos nenhum erro como esse. Então podemos supor que as coisas estão indo bem. Em seguida, queremos alterar a cor do plano de fundo, o texto, texto, cor e o tamanho da fonte da página à medida que digitamos. Então precisamos de mais um seletor de consulta aqui. Precisamos ser capazes de mudar esses estilos no corpo. Vamos lá. Corpo Vier é igual ao seletor de consulta de ponto documentos. Em vez de adicionar um seletor de C s para uma classe, vamos apenas usar um seletor de coleta CSS regular para o corpo. Agora precisamos adicionar ou evento ouvintes. Então vamos dizer que ponto de cor BG adicionar ouvinte de eventos. Vamos dizer na chave para cima executar esta função em particular com o evento dentro dele, e apenas para ter certeza de que isso está de fato funcionando, vamos console registrar o valor do ponto alvo do evento ponto Atualizar sua página. Sem erros. E enquanto escrevo , aparece aqui em baixo. Ok, então isso parece bom. Isso é bom e saudável. Então, agora para a cor BG, tudo o que queremos fazer é dizer corpo, cor de fundo de ponto de estilo holandês. Lembre-se que é caso Camel como este e JavaScript. Não há traços em variáveis JavaScript, então usamos carcaça de camelo. A cor do plano de fundo é igual ao valor do ponto de destino do evento, e é isso. Não precisamos devolver nada. Não precisamos fazer nada chique. Vamos em frente e dar uma chance a isso. Bam! Assim como a cor de fundo fica vermelha enquanto escrevo a palavra vermelha. Não, sério, tudo o que temos de fazer é copiar rostos algumas vezes. Cor de fundo. Este vai ser o ponto de cor do texto Adicionar ouvinte de evento na chave para cima do corpo ponto de fundo cor do ponto de fundo do ponto do corpo. Não, queremos mudar isso para a cor do texto, que em CSS é chamado apenas de cor. E isso vai ser o valor-alvo do evento. E no último vai ser o ponto do tamanho da fonte no ouvinte de eventos novamente. Chave para cima função de retorno de chamada com um parâmetro de evento lá, e nós vamos dizer o tamanho da fonte do ponto do corpo é igual ao que quer que isto seja. Além disso, vamos Kincannon oito, talvez pixels, ou se você quiser fazer EMS ou carneiros, você pode fazer isso também. Eu vou ficar com pixels para que eu possa usar um número normal, e isso não vai tornar esta página dois ridícula mais ridícula do que já vai ser. Vamos em frente. Pressione Atualizar. Não há erros nos meus cônsules JavaScript. Vamos mover isso um pouco para baixo. A cor de fundo vai ser azul. A cor do texto será branca. O tamanho da fonte será de nove pixels. Talvez 90 pixels. Quero dizer, muito ridículo. Vamos fazer algo um pouco maior. Então temos o tamanho da fonte 25 pixels, texto da cor de fundo branco de azul, e isso muda à medida que digitamos. Podemos até usar valores hexadecimais aqui também. AB 00 Isso é vermelho F F zero que é amarelo ou amarelo ou aqua. E é assim que vamos criar uma página que irá mudar praticamente à medida que você digita em diferentes campos de entrada. Então, todos juntos, usamos o total de 369 13 linhas de JavaScript para criar uma página completamente dinâmica com base no que o usuário quiser. E isso é tudo o que há para este mini-projeto. Agora, se você está em compartilhamento de habilidades, não se esqueça de que você pode criar seu projeto de curso e compartilhá-lo através de uma caneta de código ou você pode compartilhá-lo ou você pode compartilhar seu código exato. Você pode tirar uma captura de tela do seu código e também a página realmente funcionando. Sinta-se livre para compartilhar seu projeto com o resto do grupo. Você provavelmente acaba criando um monte de inspiração para um monte de outras pessoas, o que é sempre útil para outras pessoas também. Além disso, vou te dar alguns comentários, se quiser. 40. Objetos: Ok, hoje é o grande dia. Este é o grande momento. Falamos sobre essa coisa chamada objeto tantas vezes, e eu continuo dizendo que vamos aprender sobre isso. Vamos aprender sobre isso. Eventualmente, vamos aprender sobre isso. Agora é a hora que vamos aprender sobre isso. Então, um objeto é uma idéia terrivelmente, terrivelmente nomeada para uma maneira de armazenar dados. Porque se você pensar em um objeto, bem, pense em segurar qualquer coisa em sua mão. E se alguém descrevesse esse item que está em sua mão, a palavra objeto poderia caber qualquer item físico que realmente tem qualquer tipo de massa ou peso para ele poderia ser considerado um objeto que não é muito útil. Considerando que um array basicamente, isso é um termo de desenvolvedor chique para uma lista. Apenas uma lista de coisas variável uma variável. Se eu pudesse soletrar essa variável certa é um valor que muda. Na verdade, está no nome. É variável. Em JavaScript, um número é obviamente apenas um número, e em uma função sabemos que uma função é realmente suposto fazer algo. Mas a palavra objeto é como o quê? O que é um objeto agora? objetos têm basicamente complexidade infinita. Então acho que devemos dar um passo de cada vez, e não precisamos saber de tudo agora. Isso vai ser muita informação que será sobrecarga de informação. Então o que eu vou fazer é apresentá-los aos objetos de uma maneira mais amigável. Então sabemos que quando criamos uma lista em JavaScript podemos criar em uma corrida. Digamos que, Ah, vamos criar nomes é igual a uma matriz. Caleb Nathan acaba sempre e esse era o meu tipo de capital. R. E então, quando eu digitar nomes como este, é claro que os nomes dos tipos. Se eu quisesse pegar Nathan, eu teria que digitar nomes de suporte duro, o número um e, em seguida, outro colchete, e isso vai me dar o índice aqui. Mas e se eu quisesse que Teoh armazenasse um monte de dados sobre uma pessoa em particular? Então eu disse que uma pessoa em particular o nome dele é Caleb. Sua idade é 30 anos e ele tem dois gatos. Não, isso é bom, mas não sabemos se esta é necessariamente a ordem certa, porque se eu dissesse “hey “, de todos esses números, de todas essas variáveis. Em vez disso, quantos gatos Caleb tem? Bem, você adivinharia, também. Mas pelo que você sabe, eu posso ter 30 gatos e eu só mencionei isso. E então há essa área cinza, e nós não sabemos como acessar isso corretamente com um objeto que podemos nomeá-lo. Então vamos em frente e criar um objeto. Então vamos criar um objeto de pessoa, e o objeto apenas se parece com isso. É um colchete, e depois damos algum tipo de nome. Então vamos em frente e realmente chamar este nome e você pode ver que há parênteses não são parênteses. Você pode ver que há citações em torno disso. Podem ser citações simples ou duplas. Não importa dois pontos, e, em seguida, qualquer que seja o nome é, por isso vai ser basicamente parece que uma string é igual a usar. Um sinal de dois pontos é igual a praticamente qualquer tipo de variável. Pode ser um número. Pode ser uma função. Pode ser uma matriz. Pode ser não, pode ser outro objeto. E vamos em frente e criar outro. Na sua idade. Minha idade vai ser 30 e o número de gatos que eu tenho que e para nos fechar, nós apenas dar-lhe um fechamento, parênteses ou não. Aprendizes, um hit de fechamento de colchete, Enter e lá vamos nós. Agora temos um objeto. E em vez de dizer: “ Bem, Bem, esta é uma matriz onde é igual ao Caleb, 32 é o que dentro antes disso agora diz que a idade é igual a 30 gatos para nomear Caleb. Então agora sempre que eu pego pessoa, eu posso pegar pessoa dot Idade me dá 30 pessoa nome ponto me dá o nome pessoa ponto Cats me dá o número de gatos, e agora nós realmente atribuímos um nome para basicamente uma lista ou uma matriz, e você pode quase pensar sobre isso como variáveis internas. Então temos uma pessoa muito ousada. Mas dentro disso, há uma variável chamada variável idade chamada nome e variável chamada gatos. Agora, a principal coisa a saber sobre um objeto é sim. Ele vem com ótimos nomes, então você pode citar praticamente qualquer coisa aqui. Então o nome do ponto da pessoa realmente me dá o meu nome, que é fantástico, mas você também pode adicionar a ele e usar a palavra-chave this. Então, aprendemos um pouco sobre isso. Aprendemos na lição de matriz onde poderíamos fazer o que quer que o array é chamado de ponto Push, e que na verdade empurra algo para a pessoa matriz não funciona da mesma maneira. Podemos literalmente criar qualquer coisa. Então, pessoal, vamos fazer algo muito interessante aqui. Que som essa pessoa faz? Então, para criar um novo ponto de dados dentro deste objeto, ele se parece muito com uma matriz. Nós damos a ele qualquer tipo de nome de variável que queremos lá é igual a, e então o que queremos que seja igual a neste caso, eu vou nos dar uma função e eu vou para o conselho ponto log. Que som o mata faz? O que o Caleb diz? Esse cara me diz. Oh, eu não sei por que, mas eu vou dizer como Hit Enter, Salve isso. E agora podemos realmente ver a função em si. Isso é o que ele voltou a funcionar. Chama-se “O som não tem argumentos”. Certo, então eu limpei isso. Agora, se eu realmente quisesse ver o que está dentro da pessoa objeto, eu poderia apenas digitar pessoa, e nós vamos ver que há um juiz, nome de gato e um som. Um som como uma função nos dá todos os detalhes lá agora. Eu também posso apenas fazer parênteses de som de ponto de função porque é uma função. As funções são ações, as ações precisam de parênteses. Eu bati. Entre, certifique-se de que eu tenho registros ativados aqui para que o log do console realmente apareça e ele diz que eu fora. E então não, não só minha pessoa tem uma variável dentro dela, minha pessoa também tem, ah, função dentro dela. Agora, quando se trata de variáveis e funções dentro de um objeto mais dentro de uma classe, geralmente eles têm nomes diferentes, e isso diz a outros desenvolvedores qual é o escopo. Então, tipicamente temos um nome de variável é igual a Caleb, e isso é chamado apenas variável. Já vimos isso 100 vezes. Então nós também temos uma função de algo, e ele faz algo aqui e isso É chamado de uma função quando estamos lidando com um objeto assim de nosso novo objeto é igual a, e nome vai ser Caleb, Por a maneira, não importa se estamos usando apóstrofos simples ou aspas. Isso realmente não importa. É um coma lá. Então o JavaScript sabe que vai haver outro objeto aqui. Outro pedaço de dados. Essa coisa não é mais chamada de variável. Isso é chamado de propriedade e função. Então, como quando escrevemos, som é igual a funcionar algo aqui. Isso é chamado de método, então vamos voltar para ouvir a pessoa dot Age vai ser uma propriedade. Ele age como uma variável. Basicamente, a mesma coisa é variável, mas o que estamos dizendo é que esta variável realmente pertence a um objeto, ou em alguns outros idiomas, pertence a uma classe. Da mesma forma, com som é uma função, mas está dentro de um objeto, então chamamos um método tem exatamente as mesmas propriedades, e funciona exatamente da mesma maneira que uma função. A única diferença é que agora ele está dentro de um objeto, então nós o chamamos de método, e isso é realmente apenas uma convenção de nomenclatura, modo que quando você está falando com outros desenvolvedores, eles podem entender o que está acontecendo agora. Por que isso é importante? Isso é importante porque poderíamos dizer som de ponto de pessoa. Vamos sobrescrever. Isso é igual à função e queremos registrar o nome do console. Então fazemos este nome de ponto e se fizermos o som de ponto de pessoa, ele dá-me o meu nome. Agora é aqui que a palavra-chave this realmente vem a calhar porque vamos dar uma olhada nessa pessoa. Objeto mais uma vez porque executamos uma função que está dentro de um objeto. A palavra-chave this refere-se ao objeto inteiro, não apenas à função. É o objeto inteiro e por isso dentro de uma função. Arranhar que dentro de um método podemos usar este nome ponto para começar a idade não gatos apenas no nome. Poderíamos até voltar se quiséssemos, que não vamos fazer, mas poderíamos devolver o objeto inteiro se quiséssemos comprar apenas dizendo “Devolva isso “Vamos em frente e criar um novo método aqui chamado “Pessoa Dot Get Gats”. Isso vai ser uma função e tudo isso vai fazer é alerta eo número de gatos que eu tenho alertar este ponto Gatos, Na verdade, vamos fazer isso este nome ponto Capitão E tem que parar gatos. Lá vamos nós. Então isto vai dizer que Caleb tem dois gatos. Vamos em frente e fechar essa função. Ok, isso foi definido. Se olharmos para a pessoa objeto novamente, temos uma função no seu chamado Get Cats. Poderíamos passar parâmetros lá se quiséssemos também. Tal como uma função normal. Vamos comandar essa pessoa, não pegue gatos e deixe que eu mude isso. E diz que Caleb tem dois gatos. Então, quando originalmente aprendemos sobre a palavra-chave vis, ela não foi realmente muito útil. Mas quando começamos a trabalhar com objetos, isso se torna muito mais útil. Agora, por que você usaria isso? Por que você usaria um objeto como este? Pode-se dizer que a pessoa objeto é igual ao Caleb. Faço um som. Eu tenho um agente aqui 30 e eu tenho gatos para. E vamos preencher isto completamente. Conselho não registra. - Não. Então a razão de usarmos isto é porque agora podemos usar o nome da pessoa ou como mudamos isto para o Caleb? - Eu? Usar-me-emos como exemplo. nome Caleb Dot vai ser Caleb. Talvez seja o meu nome completo. Caleb dizendo a idade do Caleb. Ao ler isso, isso faz mais sentido. Agora o Caleb, Very Buller, o objeto Caleb cenoura. Qual é a idade dele? Quantos gatos ele tem? E isso se torna muito mais detalhado. Então, enquanto você está lendo, isso realmente faz muito mais sentido, e você poderia fazer o mesmo com praticamente qualquer um. Digamos que tivéssemos outra pessoa aqui e o nome dele é Zephyr, que na verdade é o meu gato. Ele realmente me diz como é a idade dele para quantos gatos ele tem? Nenhum. Ele não tem nenhum. Na verdade, ele faz. Ele tem um irmãozinho. Então ele tem um gato. E agora eu poderia dizer que seus gatos esforço, e isso vai me dar um ou seu esforço, aquele som e que vai para o registro do console. Agora, novamente, onde isso realmente entra em jogo? Porque agora só estamos usando um objeto. Bem, isso entra em jogo porque até este ponto, nós tivemos que armazenar tudo isso em variáveis separadas para que nós teríamos uma variável que parece algo como é que seu nome é igual a qualquer que seja o nome dele. Zephyr Zephyr. Idade é igual a quatro como sempre gatos é igual a um é que para o som é igual a mim. Oh, e então teríamos que fazer o conselho não registrar. Isso é para o som? E então agora nós escrevemos quatro variáveis. E se quisermos uma cópia disso para mais alguém, temos que corrigir para mais variáveis. E se quiséssemos popularizar novamente, teríamos que adivinhar o que copiar e colar uma e outra vez e outra vez. E agora temos 12 variáveis no escopo global das coisas. Isso é realmente apenas fazer uma grande bagunça do escopo global, enquanto que com ah, um objeto bonito, obtemos apenas o nome da variável regular. Além disso, temos essas propriedades e métodos dentro dele. Agora, apenas como um pequeno refrescante aqui, eu perdi aquele ali dentro como um pequeno refrescante rápido aqui. Vamos dar uma olhada na sintaxe de um objeto. Então sintaxe objeto vai se parecer com isso. Tem variável de algum tipo e você tem que seu nome de variável é igual a um objeto. Então essa é a abertura e fechamento de colchetes aí. E então você tem um dois-chave não é justo valor. E então se você tiver mais, você joga uma vírgula lá e então você vai chave para valor para novamente. Se tens mais emoção, entra aí. Caso contrário, esse último não tem uma vírgula. E então quando você quiser acessar qualquer um de nós, você poderia apenas escrever o nome do objeto e tipo de como nós acessamos as coisas em uma matriz em vez de usar 0123456 e assim por diante. Assim por diante. Acabamos de usar o nome da chave. Então a chave vai retornar o valor e da mesma forma chave para está indo para retornar o valor para agora. Esse é o geral logo atrás de um objeto. Você provavelmente não vai usá-los com muita frequência até ter muito mais experiência com JavaScript e, de repente, eles estarão em todos os lugares. Você meio que vai de 200 em, tipo, cinco segundos. Assim que começares a vê-los, vais começar a usá-los por todo o lado. Mas como você está apenas aprendendo javascript, você não vai usar isso em todo o lugar. Ainda não. Então, o que? Eu gostaria que você fizesse uma pequena tarefa para este vídeo acabou de criar Object. Talvez seja você. Então crie variável. Seja qual for o seu nome, crie o objeto. Dê um nome, um som. Ah, uma idade, talvez sua comida favorita, talvez seu site. E então tente executar algumas coisas dentro do conselho do seu navegador. Vá em frente e dê uma chance. Não se esqueça. Se você tiver perguntas, comentários, preocupações, você pode deixá-los para baixo. Seja baixo. Estou aqui para ajudá-lo num momento de relance. Objetos são uma coisa muito interessante em JavaScript. Espero que esta explicação tenha sido boa. É Este é um desses obstáculos quando se trata de programação é entender objetos. Mas uma vez que você obtê-lo, não há como voltar atrás. Então definitivamente praticar lá vai ser muito, muito importante no final da estrada. 41. Para loops: Um final baixo Bem-vindo de volta. Vamos começar a tocar em um conceito que é realmente importante na programação, e este conceito é um loop. Então a idéia é que você tem uma função particular ou são definidos um código ou algo assim. Você quer fazer mais de uma vez uma e outra e outra vez automaticamente. Então, digamos que você tenha um monte de nomes. Então você tem Caleb, Nathan e Zephyr, e para cada um desses nomes, você quer capitalizá-lo. Você quer talvez colocar no Gmail dot com ou algo no final dele para obter um endereço de e-mail . Você quer fazer algo com os três. Este é o lugar onde um loop de quatro entraria e não tem que ser apenas três. Pode ser um item que está em uma matriz. Falaremos sobre isso em um segundo. Podem ser dois itens, três itens, 3000 itens. Isso realmente não importa. Vai continuar em loop até que, basicamente, esteja tudo feito. Então vamos dar uma olhada em um loop de quatro. Então quatro loop vai se parecer com isso. Temos a palavra-chave para o que dissemos. Uma variável I é igual a zero. Então este é o nosso intervalo. Seja lá o que for que isto vai começar, este é basicamente o nosso contador. Falaremos mais sobre isso em um segundo. Quanto tempo isso deve durar? Bem, digamos que tenho que ter menos de 10 anos. E depois de cada arejamento de tremoço apenas ing incremento I por um. Então vamos fazer eu mais conselho. Não registre I. E então o que isso está dizendo é para a variável. Eu vou começar em zero enquanto eu tiver menos de 10. Console, log, qualquer que seja esse número eu e, em seguida, no final de cada geração, é como dizer isso eu é igual a I mais um. É o que estamos fazendo aqui no final. Só que desta vez não temos que escrever isso. Então vamos nos salvar e abrir isso em nosso navegador e atualizar nossa página e vamos ver 0123456789 e você percebe que tudo está acontecendo online. 18. Então, quando eu clicar nisso e mover isso sobre mentir 18 com certeza, há o registro do conselho assim? Então, neste ponto, você provavelmente está pensando Ei, isso é legal, mas honestamente, eu não sei onde vou usar isso. Então vamos criar um exemplo da vida real aqui. Vamos criar uma corrida A. Temos variáveis de nomes, e isso vai ser um array. Temos Caleb, Nathan Sofrer e Henry. E digamos que queremos olhar através de todos estes. Como é que vamos fazer isto? Então, em vez disso, vou comentar isso só para que você possa nos consultar mais tarde, se quiser. Vamos criar um novo quatro tremoço aqui. Vamos realmente ver o que V s código quer preencher automaticamente isso com. Sim, na verdade é perfeito. Está fazendo algumas coisas aqui que ainda não aprendemos, então vou desfazer isso. Mas se estiver usando o código V s, você pode apenas apertar quatro aba. Então, seu loop for começa com sua palavra chave quatro para variável. Eu é igual a zero. Queremos olhar quantas vezes queremos loop o número de itens que estão nesta matriz. Então vamos dizer nomes de comprimento do ponto e eu é menor do que nomes comprimento do ponto. Então o que isso está dizendo é um za desde que os olhos menos de quatro continuem rolando. E então, no final de cada geração, digamos incrementos. Eu compro um que poderíamos implementar por dois. Tínhamos multiplicado por 10 se quiséssemos. Mas, mais comumente, você vai vê-lo apenas incrementa por um. E então poderíamos criar um novo boliche aqui e dizer, Ah, essa variável é o nome atual. E porque esta é uma lista que temos que acessar esses nomes, Caleb vai ser índice zero índice um índice para índice três. E agora podemos dizer nomes “I”. O 1º 1 vai ser zero. Então, na primeira iteração, e então uma vez que é feito, basicamente vai dizer nos bastidores, eu é igual a I mais um, e assim ele é executado uma segunda vez. E então aquele vai ser Nathan, depois Zephyr e Henry. Mas estamos armazenando tudo isso em uma variável chamada I Just Interval Stands for Interval. Eu é igual ao intervalo. Vamos em frente e console do Conselho de Registradores não registram o nome atual. Atualize nossa página Como temos Caleb Nathan e Henry Cool. Então agora estamos realmente fazendo algo com uma matriz porque até este ponto, um aumento para nós. Basta armazenar uma lista de dados, e não é realmente muito útil a menos que saibamos exatamente o que está nele agora. Não precisamos saber exatamente o que está nele, então vamos em frente e tornar isso um pouco mais complicado. Vamos criar uma função aqui onde vamos transformar uma entrada em minúsculas e upend no gmail dot com. Então, funciona. Vamos chamar isso para endereço de e-mail, e ele vai tomar um nome e podemos fazer tudo em uma linha agora para que possamos fazer o nome que vem deste parâmetro aqui ponto para minúsculas mais no gmail dot com. E então isso é apenas pode Capitão terminando no Gmail Dot com em seu invólucro inferior, todos os nomes Então agora podemos pegar que você pode aplicá-lo aqui. Estamos dizendo que o nome atual será qualquer que seja o nome atual em nossa matriz. É aqui que fica um pouco mais complicado. Vamos passar esse nome. Seja lá qual for esse nome. aqui como o parâmetro para endereço de e-mail, e isso vai retornar qualquer que seja o nome. Em minúsculas e gato enlatado Nate no Gmail Dot com Então agora vamos em frente e salvar isso . E olha para isso. Caleb, um genial Nathan Ojima, Zephyr Jima e Henry do Gmail Dot com. Não, estamos fazendo algo útil aqui. Agora. O bom por trás disso é que não estamos escrevendo muito código. E como seu Reagan é mais longo e mais longo, você não está escrevendo mais código, o que é muito, muito legal. Na verdade, poderíamos, se quiséssemos reduzir isso e em vez de nome, vamos usar nomes. Vou em frente e livrar-me disso. Não vamos realmente apagá-lo. Vamos apenas comentou. E então agora, em 1234 cinco linhas de código, podemos executar estas quatro. Cônsul Lux, que não parece muito, mas e se fizéssemos algo mais louco? Vamos fazer um loop de Laura Epsom, então vamos pegar Florham 50. E então nós apenas temos 50 palavras de ipsum quente aqui ponto dividido em cada espaço e o que isso vai fazer é, digamos, digamos, dividir sua divisão, sua divisão, sua divisão lá todo o caminho para baixo. E isso pode ser o usuário inserir sua bola. Poderíamos dividi-lo. E vamos mudar de nomes. Duas palavras só porque vai parecer um pouco mais agradável e mudamos de nomes. Duas palavras aqui também. Então comece Invariável zero ou intervalo zero. Continue enquanto houver palavras nesse ereto. Sabemos que isso não é array porque usamos a divisão de pontos depois de cada arejamento de tremoço ir em frente e incrementa o número. Eu compro um nome atual. Então vamos fazer este e-mail atual O que vamos dizer e o que estamos fazendo aqui é que estamos dizendo que este e-mail atual vai ser qualquer que seja a palavra para baixo Can Katyn oito no Gmail Dot com. Então isso vai levar cada palavra aqui. Em minúsculas cada um e, em seguida, adicionar gmail dot com, que é um exemplo bastante inútil. Mas isso demonstrará o poder dos loops. Olha para isto. Há agora 50 deles lá dentro. Não escrevemos nenhuma linha extra de código. Temos uma linha de código aqui. É apenas em várias linhas porque há uma longa corda lá dentro. Meu editor gosta de dividir em várias linhas. Então uma linha para linha três linha quatro linha exatamente as mesmas cinco linhas de código. Temos 50 saídas agora que não é muito útil, e você vai ver isso por todo o lado. Isso é muito popular em toda a programação, especialmente em JavaScript. Digamos que você só queria o primeiro 10. Ok, bem, o que nós poderíamos fazer é que nós podemos realmente sair deste loop em qualquer ponto no tempo ou poderíamos continuar por cima dele. Agora, o que podemos fazer é dizer, se eu for igual a 10. Então é a décima palavra. Não sei por que faríamos isso neste exemplo, já que queremos repetir cada palavra. Mas nós vamos dizer, Ei, Ei, assim que eu chegar ao 10º número incrementos até o número 10 simplesmente quebrar caso contrário continue funcionando normalmente. E então isso só vai mostrar o 1º 10 E o que podemos fazer aqui é que podemos realmente log cônsul I mais o e-mail atual para que possamos ver tudo isso E o que isso vai nos mostrar é de 0 a 9. E aí está. Temos 0 a 9, tecnicamente 10 itens porque começamos no número zero. Então, se você contar com sua mão, 0123456789 Você tem todos os 10 dedos em sua mão apontando para fora. Então aí está você. E nós dissemos: “ Ei, Ei, no intervalo 10, apenas saia do loop. Não apareça mais. Vamos em frente e comentar não ver o que acontece. Isso vai até o número 50 ou o 49º Índice. Vamos comentar isso. E vamos fazer algo um pouco mais interessante. Vamos usar matemática básica aqui. Nós vamos usar essa coisa chamada módulos, que nós realmente não aprendemos sobre, e está tudo bem. Você não precisa saber muito sobre isso. Vamos dizer que se eu módulo ISS dois é igual a zero. Então isto é dizer que o que quer que eu seja dividido por dois tem um restante de zero continuar, e isso vai pular sobre o loop. Então, o que quer que esteja aqui embaixo, por exemplo, este registro de console. Isto não vai correr. A declaração de continuação basicamente diz: “ Ei, Ei, tudo abaixo aqui. Se isso continuar, a instrução é executada. Este material não é executado. Passar para a próxima geração. Vamos salvar isso e ver o que acontece aqui. Temos cada 2º 1 Então, por exemplo, não vemos o número 10 aqui. 10 dividido por dois é cinco com o restante de zero. E por isso, porque isto é verdade, vai continuar a não ser cônsul. Então é assim que criamos rosa par e estranho e como tabelas quando você tem, como uma linha cinza estrada branca, estrada cinza, estrada branca, estrada cinza, linha branca Isto é basicamente tudo o que estamos fazendo. Então esta é a sua introdução em quatro loops. Isso é, na verdade, também introdução em loops selvagens e para cada loop para outros loops, vamos entrar imediatamente. O que eu gostaria que você fizesse antes de seguir em frente é criar um loop básico para. Então vá em frente, use a variável de quatro palavras-chave. Eu é igual a zero. Eu é menor do que, ou talvez menor e igual a ah comprimento particular. Eu mais, não se esqueça de adicionar isso e, em seguida, talvez apenas log do console, o que eu é atualmente. E isso é tudo que eu gostaria que você fizesse. Basta obter um pouco de experiência com ele. Você não precisa ser um profissional adicionado para passar para a próxima lição. Eu só quero que você fique um pouco familiarizado com essa sintaxe estranha aparência da maneira que este código é meio que descrito usando caracteres engraçados em uma ordem engraçada. 42. Enquanto o loop: Ok, vamos dar uma olhada nessa idéia de um loop selvagem um loop while. Então aprendemos sobre um loop de quatro em um loop for. Basicamente diz: “ Ei, Ei, eu vou fazer loop até você me dizer para parar de enrolar. Um loop selvagem não será um loop selvagem. Se você não tiver cuidado com isso, um continuará para sempre até que seu computador fique sem memória e seu navegador trava. Ou, se você estiver em um computador mais antigo, seu computador trava. Então, tenha muito cuidado com este laço selvagem. Este é muito, muito importante de entender antes de você realmente escrever um no pior dos casos aqui é você sabe, talvez seu computador fique sem memória e você tem que dar-lhe uma reinicialização, não é a pior coisa em o mundo, mas geralmente o seu computador apenas bloqueia. Você dá uma reinicialização. Não rode o script de novo e está pronto para ir. Então vamos olhar para um tempo. Loops, sintaxe. Então, basicamente, o que vai acontecer aqui é você ter um tempo. Algo é verdade. Faça um monte de coisas aqui. Isso realmente se resume a algo tão simples, e então o que poderíamos dizer aqui é var Numb é igual a zero. E vamos dizer que enquanto o número é menor ou igual a 1000 nós poderíamos concelho ponto log o entorpecimento . Não, não faça isso neste momento, porque isso vai durar para sempre. Não fizemos nada com o número no loop quatro. Nós fizemos. Nós implementamos automaticamente em um loop while que não fizemos. Então temos que colocar isso manualmente no final do nosso Lubar no início de um loop. Em algum lugar lá dentro, precisamos incrementar o número. Então poderíamos dizer que o número é igual ao número mais um ou poderíamos apenas fazer nenhum mais mais e isso nos dará 12345 Então por diante e assim por diante. Então vamos em frente e dar uma chance a isso. E quando eu atualizar isso, isso vai registrar o número 1000 vezes e com certeza, lá está, e eu posso continuar curling. Basta continuar rolando e você vê que há na verdade 1000 lá agora quando você iria querer usar algo assim? Bem, o que poderíamos fazer é pedir ao usuário algum tipo de entrada. Então vamos dizer var numb vai ser número e vamos pedir ao usuário para um número . Dá-me um número e depois vamos lançar esse aviso o que quer que seja para um número. E então vamos mudar isso e vamos dizer que bar começando entorpecido é igual a zero, não 90 E vamos nos livrar disso. Vamos mudar isso. Vamos começar Numb é menos que entorpecido. E então o que estamos dizendo é que sempre começou o número zero e ir até que ele alcança o que o usuário diz, talvez seja o número 10. Talvez seja o número 10 milhões vai correr até atingir esse número. Além disso, temos que ter cuidado aqui porque este é o número que estamos tentando incrementar. Então, enquanto isso é verdade, precisamos ir em frente, trocá-los. Então, basicamente, o que isso está dizendo é zero. Talvez o usuário digitado em 1000 esteja aqui menos de 1000. Sim, é. Então execute um, depois dois, depois três, depois quatro, então 5000 vezes até chegar a 1000 menos que 1000. Não é. Isto é falso. E assim ele pára de executar. Vamos em frente e dar uma chance a isso. Mova isto para que possamos pedir-me um número. Refresque. Dê-me um número. Vou rolar o meu Dyson. Eu vou dizer 89. E o cônsul registrou 89 porque eu fiz o errado aqui. Se estás a olhar para o teu ecrã a funcionar, Caleb, esqueceste-te de mudar um. Você está certo. Eu fiz este Cônsul registrado 89 porque esse era o número que eu inseri. Queria que Konta registasse o número inicial. O número que vai aumentar constantemente. Vamos em frente e dar uma chance. Vamos fingir que o 1º 1 não aconteceu e o número 89 está lá. Começa no zero. Desce para 88. Lembrem-se, o computador começa a contar no número zero. Embora se quiséssemos, poderíamos dizer que isso vai ser um é menor ou igual a. Vamos em frente e atualizar 89. E isso nos dará números um a 89. Lá está ele. Último número é 89 1º número é um. E isso é um tempo. Loop. Agora, em javascript moderno, você vê isso? Ah, muito menos do que você costumava antigamente. Estavam por todo o lado. Estes são menos populares agora porque quatro loops e o para cada loop, que vamos falar no próximo vídeo basicamente assumiu lá. Melhores formas de loops para JavaScript. Mas você ainda vai ver esse lá fora. E se você está se perguntando, Caleb, onde eu vou usar um loop selvagem? Bem, se você quisesse criar uma lista de algo então, na verdade, antes de passarmos para a próxima lição, vamos em frente e criar outro exemplo aqui. Então eu vou comentar isso para que ele não use nenhum recurso de computador meu. E vamos criar uma lista. Então nós temos aulas UL lista Eagle Js cortar você bem, e quando eu atualizar minha página, não vemos nada aqui. Na verdade, vamos fazer isso cada uma lista. Então nós temos uma listagem aqui, mas não há nenhum item de lista, então nós vamos precisar realmente criar alguns itens de lista. Então vamos usar seletor de consulta para pegar este item Até agora, lista ou melhor, você l é igual a documentos ponto queary seletores em Lecter. Só há um para que possamos usar este. Vamos em frente e criar algum HTML para isso. Então vier html é igual a uma string em branco. E então vamos percorrer isso um certo número de vezes. Enquanto algo é verdade. HTML é Eagle dois html mais Ally, qualquer que seja o número vai ser. Então vamos chamar de número, eu acho. Pode ser qualquer coisa. Ainda não fomos tão longe, então só eles estão comigo e com a Ally. E agora estamos escrevendo um monte de html aqui dizendo: “ Ei , Ei , começa com nada. Coloque um aliado lá. A segunda iteração vem, diz que há um L. Eu coloquei outro lá. terceira geração chega, está pronta para os aliados lá dentro. Ponha outro ali. Então vamos em frente e perguntar ao usuário. Para um número de nosso entorpecido é igual a Vamos lançar isso como um prompt de número. Dê-me um número e nós vamos dizer que o número inicial dormente vai ser zero. E enquanto que começar dormente é menor que o número, vamos em frente e vamos realmente começar este aquele para que possamos contar como humanos, não como computadores. Então o número inicial vai ser um. E enquanto este número for menor ou igual a qualquer que seja o número que a pessoa lhe der isto continuará a funcionar. Lembre-se, isso precisa ser implementado manualmente. Então vamos incrementar manualmente isso. E neste momento, nada vai acontecer. Acabamos de carregar esta variável chamada HTML com um monte de HTML. Agora temos que ir em frente em rul e realmente adicionar isso em nosso modelo de objeto de documento. Então vamos em frente. Digite que ul HTML interno é igual a qualquer que seja a variável HTML. Refresque. Dê-me um número. Ok, vamos fazer 42 e novamente, ele só tem 42 uma e outra vez. Vamos em frente e vamos digitar iteração em oração vai ser qualquer que seja esse número inicial . Vamos tentar de novo. Número 42 ali está. É oração. 123456789 todo o caminho até 42. E assim, enquanto Loop realmente tem um lugar no mundo JavaScript, é apenas um pouco menos popular nos dias de hoje. Mas ainda é muito bom saber sobre. Você não tem que fazer nada neste vídeo. Vamos passar para o próximo onde temos nós vamos trabalhar com alguns dos modelos de objeto de documento e vamos usar essa coisa chamada um loop de quatro h, que é muito, muito útil. 43. Para cada loop: Certo, vamos dar uma olhada na versão mais útil de um loop no universo JavaScript . Isso é chamado de quatro cada loop. E porque tendemos a camelar coisas em javascript, parece que para cada minúscula F maiúscula E. Vamos entrar na sintaxe de nós em apenas um segundo. Assim, para cada loops são relativamente novos para JavaScript. Outras línguas tiveram estes Fort Ages. O JavaScript só recebeu isso recentemente nos últimos anos, e tem sido uma grande melhoria para o ecossistema JavaScript. Então, por idades, basicamente um atalho para o loop quatro que parece algo ao longo dessas linhas. Então você tinha variável é igual a zero. Faça algo para o comprimento de uma matriz e incrementa automaticamente. O que isso vai fazer em vez disso é apenas dizer, Ei, você tem uma lista de nomes, você tem uma matriz de nomes. Há cinco deles lá dentro. Vou percorrer cada um para você. Então vamos dar um exemplo aqui. Nomes distantes é igual a uma matriz de Caleb. Nathan é sempre e Henry quase realmente escreveu a palavra final e assim anteriormente, como nós teríamos que olhar através. Estes é tipo de realmente crescer, então nós teríamos que fazer para var. Eu é igual a zero. Eu sou menor ou igual a saber. Apenas a noite passada nomes ponto comprimento I plus. E então poderíamos consolar os nomes de registro de dúvidas que eu e isso nos daremos a todos eles. Vamos atualizar sua página e veremos que isso funciona. Mas quando você está escrevendo isso, isso parece um pouco demais. Há uma maneira mais fácil de fazer isso. A maneira mais fácil de fazer isso é através de um quatro loops cada. Vamos em frente e digite nomes ponto para cada um e isso vai ter uma função, e esta função tem dois parâmetros nele como o nome e o índice. E então o nome vai ser qualquer que seja o valor aqui, então ele pode não ser realmente chamado de nome. Você pode renomear isso se quiser, mas porque esses são nomes, mas porque esses são nomes, eu vou chamar esses nomes, e isso vai ser a iteração loop, então o conselho não registre qualquer que seja o índice seja qual for o nome, e isso já parece muito mais fácil Vamos em frente e atualizar esta página. Temos o esforço de Caleb Nathan e Henry assim. Bom e fácil do jeito que deveria ser. Chega de lidar com os nossos próprios geradores e com o nosso aerador inteiro uma e outra vez e outra vez. Não temos que incrementar isso. Nem precisamos nos preocupar com isso. Só vai dizer: “ Ei, Ei, tem quatro itens aqui. Vamos passar por isso quatro vezes Agora ainda é importante saber os dois porque esta é a maneira mais antiga de fazer isso. Você vai ver isso em todos os lugares para compatibilidade com versões anteriores avançando em JavaScript. De agora em diante, você vai ver um monte de para cada loop. Agora, onde isso realmente se torna útil? Bem, se quiséssemos obter todo o texto interno de cada aliado , então, até mesmo aliado aqui , então, eu não sei, item um. Basta fazer isso uma e outra e outra vez. Ok, então eu acabei de fazer 17 itens da lista, todos com a mesma classe, e eu quero selecionar todos estes em loop através deles e obter o texto aqui. Como é que vou fazer isso? Vamos em frente, comentar isso e vamos usar um seletor de consulta tudo Então vamos fazer de nossos aliados é igual a documentos dot cree selector tudo e queremos selecionar todos os elementos de texto Js ou melhor, todos os itens da lista com uma classe de Js textos. Agora vamos passar por estes. Temos aliados ponto para cada um tem uma função. Isto vai ser o que quer que esteja aqui. Então esta vai ser a nossa nota em particular e, em seguida, ele vai nos dar o nosso índice. Agora. O que acontece se formos apenas um registro de pontos do cônsul? Certo, não exatamente. Texto interno do nó de diálogo Cônsul ponto do texto. Vá em frente e atualize sua página e com certeza, tudo aparece em seu JavaScript. Então nós conseguimos percorrer 17 itens de lista e obter o texto de cada um em 1234 linhas de código e isso também nos permite habilitar o seletor de consulta todos Nós realmente não fomos capazes de nos usar muito porque até este ponto, enquanto sabíamos sobre listas ou um aumento, mas não sabíamos realmente como passá-las agora que podemos. Você também pode usar a maneira loop da velha escola se você quiser fazê-lo dessa maneira. Mas isso é muito mais limpo agora, só por diversão. Z vamos em frente e realmente mudar o inter texto desta nota. Então vamos nó dot inter texto. E só para deixar este ultra claro, de onde temos nó foi, se eu fizer este tipo em aliados, isso me dá uma lista de notas aqui em baixo, e cada um destes é como uma consulta, seletor, seletor de consulta regular. E então nós apenas renomeamos o seletor de consulta regular para basicamente ter um nome de variável, que é chamado de Nota. E lá dentro nós temos acesso a todas essas coisas diferentes, e nós apenas dissemos, Ei, pegue esse bilhete e então pegue o texto interno. Vamos em frente e mudanças inter texto para algo diferente. Este inter Tex vai ser índice multiplicado por 12. Seja lá o que for. E vamos tentar isto. Vamos adicionar alguns colchetes em torno de lá e o gato Nate uma corda e ver se isso vai funcionar da maneira que pretendemos trabalhar. Então isso deve dizer que um número é o número, e com certeza, lá está. Zero multiplicado por 12 01 vezes 12 é 12. 16 vezes 12 é 92. Agora é basicamente de novo, com apenas quatro linhas de código. Você pode ignorar o comentário que não é mais necessário. Com quatro linhas de código, fomos capazes de percorrer cada item aqui e mudá-lo para ser o que quiséssemos que fosse. Agora vamos em frente e fazer mais uma coisa. Digamos que realmente queremos cortar essa lista. Isto vai ser divertido. Digamos que queremos cortar esta lista para apenas 10 itens os primeiros 10 itens. Então o que vamos dizer aqui é se o índice é igual a 10? Não. Isso vai ser exatamente 10. Se for maior ou igual a 10, vamos em frente e remover esta nota. Vamos apenas removê-lo do modelo de objeto de documento inteiramente. E então vamos continuar. E então isso só vai ser executado na 10ª iteração ou superior, e isso só vai ser executado. Assumindo que continuar nunca é executado, vai correr de zero para o número 10. Mas não estamos necessariamente em um loop aqui. Esta é uma função que está sendo executada a partir de cada item específico em uma lista ou em uma matriz . Como vamos continuar? Não podemos continuar porque continue é uma palavra-chave reservada para loops. Exclusivamente, estamos dentro de uma função. Então o que podemos fazer é retornar falso. E eu gostaria que você também experimentasse o retorno verdadeiro e apenas retornando em geral. Mas vamos em frente e retornar falso. E quando uma atualização da página, podemos ver aqui. 0123456789 Nós temos 10 itens lá no total, e ele se livrou de todos os outros. Vamos ir em frente e realmente comentar isso para que possamos ver esses índices corretamente. O item 1 a 10 está disponível. Nós nos livramos de 11 a 17 de modo que são quatro. Cada loop. Em poucas palavras. Isso é realmente muito bom, porque agora nós podemos realmente muito, muito facilmente pegar vários elementos de nossa página e fazer um loop através deles e fazer algo com ele. Seja lá o que for, depende de você. Mas agora você sabe como trabalhar com quatro loops, loops selvagens e para cada loop eu realmente apreciaria se você pudesse tomar alguns minutos e apenas apenas recriar o exemplo que eu criei neste vídeo. Só para que você tenha um pouco de experiência com o ponto para cada notação com uma função de retorno de chamada aqui, estes seriam incrivelmente úteis. Avançando permite que você basicamente execute um pedaço de código uma e outra e outra vez sem ter que copiar e colar uma e outra e outra vez e outra vez. Então vá em frente, dê uma chance. E quando você estiver pronto em seu sentimento de confiança, vamos passar para o próximo vídeo. 44. Projeto de jogo com orientamento no JavaScript: Está bem. Acabamos de aprender sobre objetos e looping. Essas são duas peças fundamentais de programação orientada a objetos, como javascript. Agora, o que eu gostaria que você fizesse para outro projeto ouvindo projetos maiores, na verdade, não maiores. Só vai precisar de um pouco mais de esforço para envolver sua mente. É que eu quero que você crie um jogo de adivinhação. Agora, como quer que você faça, isso é totalmente com você. Você pode fazer isso ossos muito nuos, ou você pode torná-lo realmente, muito bonito e usar o modelo de objeto de documento. Você pode torná-lo tão simples ou complexo quanto quiser. A ideia por trás deste jogo de adivinhação é que devias perguntar a alguém. Talvez seja um prompt, uma caixa de entrada ou um campo de texto. Diga, hey, digite um número. E se esse número é o número certo, então saia do loop. Caso contrário, quero que continue passando por isso. Não, parece um pouco complicado, mas basicamente o que eu quero que você faça é um. Crie um loop que sempre pede um número e, em seguida, dois. Se o número estiver incorreto, pergunte novamente e seja realmente irritante sobre isso. E então se o número estiver correto. Saia do loop. Então, vou deixar isso com você. Não vou te dar mais dicas. Quero que tente descobrir como fazer isso sozinho. Na verdade, mentiu. Vou te dar uma dica. Lembre-se de que os loops sempre continuarão enquanto uma determinada declaração for verdadeira. Então, se a lógica de loop for sempre verdadeira, ela continuará em execução. Se não for verdade, não continuará funcionando. Ele vai sair do loop. Vá em frente e nos dê uma chance. Se você ficar realmente, realmente preso, você pode apenas assistir o resto deste vídeo e eu vou te mostrar a maneira que eu faço isso posit vídeo aqui. Vou desvanecer este vídeo e desbotar de volta e verei você. Espero que em alguns minutos. Tudo bem. Eu quero criar um loop que vai pedir um número. Então a primeira coisa primeiro é que preciso pedir um número. Até agora, num é igual a prompt. Qual é o número? E eu vou fazer isso ossos muito nuos, então eu estou usando prompt. Mas você pode querer usar algo diferente e então eu vou lançar o que quer que essa entrada seja como um número real. E então eu quero dizer que se for realmente um número, eu poderia fazer algo aqui. Então eu também posso dizer se o número é igual ao número mágico, faça alguma coisa aqui. Então agora precisamos de um número mágico no seu o número mágico vai ser 42. E então o que estamos dizendo é pedir ao usuário um número se ele corresponde a 42 que nós também poderíamos codificar aqui se quiséssemos algo assim. Então você ganha. Então você ganhou e vamos em frente e fazer este registro do console. Você venceu. Vamos em frente e refresque-se. Isto vai pedir-me um número. Se eu colocar 41 nada. Se eu colocar 42 troncos, ele diz que eu ganhei. Isso é fantástico, mas não é bem fazer o que eu queria fazer. Eu disse, se os números estiverem incorretos, pergunte novamente. Ok, bem, se o número estiver incorreto, você poderia fazer aqui e me pedem de novo. Mas isso só será executado uma vez. E neste ponto, eu não preciso basicamente copiar e colar essa coisa toda aqui assim. E se estiver errado de novo, eu tenho que copiar e colar a coisa toda aqui e podemos ver como isso fica muito nojento rapidamente. Vá em frente, cole a coisa toda aqui de novo, novo e de novo e de novo e de novo e de novo. Quantas vezes você vai fazer isso? Nenhum. Não quero que faça isso várias vezes. Este é o lugar onde os loops entram. Então não vamos fazer outra declaração aqui. O que vamos fazer é fazer um loop. Então, embora seja verdade, porque sabemos que os loops sempre executam quando são verdadeiros. Vamos pedir o número todas as vezes. Vamos colocar isso no nosso ciclo. Então, para cada geração vai perguntar qual é o número. Se esse número for um número válido e esse número for igual ao número mágico, ele dirá que você ganha. Então é fazer alerta, você ganha. Caso contrário, isso não vai coincidir. Então não faça nada se este não é mesmo um número. Vai pedir novamente um número adequado, mas temos um pequeno problema aqui. Isso vai continuar perguntando uma e outra e outra vez. E então o que eu vou fazer é eu vou sair desse loop exatamente assim. Então, mesmo que haja, se declarações aqui, os loops ainda sabem que está em um loop e basicamente ainda podemos usar break, vamos em frente e dar uma chance a isso. Refresque. Qual é o número 12? Não. 32. Não, algum número louco. Não. 42. Ah ha! Eu ganhei e isso é um jogo de adivinhação. Agora há uma maneira de limparmos isso. Podemos usar declarações if adicionais, para que possamos dizer se o número é de fato um número, e isso tem que ser verdade também. Então, se é um número e o número é igual ao número mágico, ele vai alertar que temos um quebrar um loop e estamos feitos. Então, em aproximadamente oito ou nove linhas de código, conseguimos fazer um jogo de adivinhação bem nua, e se você quiser mudar esse número, você poderia mudar esse número também. Vamos nos trocar 109. Não sei se isso tem algum significado significativo na minha vida. Eu veria 108. Não, isso é errado. 110. Não, isso é errado. O 109 enviou-a por correio. Então, quando você ganhar, talvez você altere o estilo de fundo de sua página inteira. Mudar a cor de fundo para azul, adicionar algum texto a dizer que você ganhou, que, na verdade, se quiséssemos tornar isso um pouco mais chique, nós poderíamos. Então temos o nosso corpo é igual a documentos. seletor de consulta holandês agarrou o corpo. Nós não queremos colocar isso no loop porque nós só precisamos realmente agarrá-lo uma vez. Ele não precisa estar em um loop, e então poderíamos fazer Body dot Style que cor de fundo é igual a azul. Vamos fazer o corpo ponto estilo ponto Cor é igual a branco e corpo ponto inter HD milhas igual a H um. Você ganha e, em seguida, sai do loop. Vamos tentar de novo. Qual é o número 12? Não. 32. Não. 109 Eu ganhei. E daqui, eu sei que você pode realmente fazer esses fãs aqui e fãs aqui agora para entender o que está acontecendo aqui. Eu só disse, execute este laço branco para sempre. Até que digamos o contrário, vamos fugir propositadamente? Não estamos usando números específicos ou algo assim. Só estamos usando um loop que vai ser executado para sempre até dizer o contrário. E é assim que criamos um jogo de adivinhação simples. Se você tiver dúvidas, comentários ou preocupações sobre este projeto em particular, vá em frente. Deixe-os lá embaixo. E também não se esqueça que você pode atualizar seu projeto de compartilhamento de habilidades com o código mais recente que você tem. Faça uma captura de tela ou compartilhe um vídeo ou compartilhe seu casaco em caneta de código. Compartilhar seu projeto é uma ótima maneira de mostrar que você está progredindo para o resto da turma. 45. Deixe e contest: Nos últimos anos, o JavaScript fez muito progresso como uma linguagem de programação real. Começou como apenas uma linguagem de script. Assim, o script do nome. Mas ele realmente evoluiu para toda a sua própria língua ao longo dos últimos 5 a 10 anos ou mais. E com isso vem algumas mudanças muito legais. Mas algumas coisas que são um pouco diferentes de outras linguagens de programação também. E o que eu quero falar neste vídeo é deixar e const deixar e constante assim até agora temos sido definindo cada variável com var. Var nome é igual a Caleb. Nós também poderia usar let name é igual a Caleb e nós também poderia usar nome constante é igual a Caleb. Poderíamos usar qualquer um desses três agora há diferenças aqui. Sabemos sobre var e içar. Se você não se lembra o que é içar, voltar para esse vídeo içamento e apenas tomar uma rápida re assistir sobre isso apenas para se certificar que você está familiarizado com o que é içar. Sabemos sobre o escopo de novo. Há um vídeo no escopo. Você vai querer assistir aquele de novo. Certifique-se de que você está um pouco familiarizado com a idéia de escopo porque deixar e constante R Block escopo. E então o que isso significa é var nome é igual a Caleb é acessível em uma função como esta função. Obter nome conselho ponto log nome. Eu poderia até fazer isso. Eu poderia fazer nome é igual a novo nome, e então eu poderia consolar registrar o novo nome aqui em baixo. Então nome de log do console novamente e vamos em frente, comentar esses para fora. E então vamos executar esta função aqui. E assim diz Caleb e o novo nome. E então a coisa boa sobre longe é que isso está agora no escopo global e uma função pode usá-lo. Podemos até sobrescrever qualquer que fosse o valor assim que chamarmos a função. E então o nome realmente muda com let e constantemente. Não perceba isso. Na verdade, temos mais restrições. Agora. O interessante sobre boas linguagens de programação, você quer restrições. Não parece isso no início, mas na verdade você faz porque quanto menos liberdade você tem em uma linguagem de programação geralmente significa mais rápido a linguagem será executada. Meios vai ocupar menos memória em seu computador significa que mais pessoas estão indo para escrever código que parece exatamente o mesmo caminho significa melhores padrões. Basicamente, é menos uma bagunça se houver mais regras lá e o que deixar e constante fazer é introduzir mais regras. Então vamos em frente e criar exemplo aqui. Então temos uma variável, e o curso é igual a JavaScript para iniciantes. E o que podemos dizer aqui é se o curso é igual a JavaScript para iniciantes, cônsul dot lug este curso. Só quero ter certeza de que isso está funcionando. Então vamos em frente e atualizar nossa página. Com certeza, diz este curso agora. Se eu quisesse definir outra variável, eu faria longe Algo é igual a outra coisa. E então eu poderia dizer, Cônsul, não registre nada. Então veja isso. Isto ainda vai funcionar alguma coisa. O que vamos fazer é que ele diz Hey, você tem uma variável, mas eu vou aplicá-la para esses colchetes, e então quando você tenta console log algo fora desses colchetes, ele não vai funcionar. Vamos dar uma chance e ver do que ele reclama. Há um erro aqui no ar de referência. Algo não está definido Eu amo como ele usou algo como se fosse realmente parte do ar . Vamos mudar isso também . Um novo var. Lá vamos nós, um novo vírus, não definido. Isso parece um pouco mais detalhado, embora possamos ver que uma nova barra é realmente definida. Mas o que isso está dizendo é que esta variável só pode ser usada dentro desses colchetes. É um aparelho encaracolado. E então o quê? Vamos deixar nos permite usar esta variável Onley dentro daqui, por isso é escopo para esses colchetes. Mas também podemos substituí-la. Então vamos sobrescrever variáveis com escopo de ar para o seu conjunto mais próximo de colchetes . Então, se eu mover isso aqui, vamos ver que o registro do console vai cuspir outra coisa. Com certeza, diz outra coisa. E se eu tentar console, registrar isso novamente uma segunda vez, nós vamos obter tanto um log quanto um erro, então nós obtemos um log e um erro. Portanto, a principal diferença entre Var e vamos é deixar é escopo para novamente essas chaves. É importante saber que porque você está indo para ver código lá fora que diz, Deixe qualquer que seja o nome da variável é, é igual a algo, e então você não será capaz de acessá-lo fora de suas chaves Curly pai. Mas vamos dar uma olhada no Const. Então você ouve o CONST. É algo a mesma coisa. O Const. É uma variável que é escopo para suas chaves mais próximas, chamada de escopo de bloco. Mas Const significa constante. É uma variável que não pode mudar, que é uma maneira engraçada de dizer basicamente que este é um valor, e esse valor nunca, nunca, nunca, nunca,nunca, jamaismudará nunca, , , jamais . E assim não é mais uma variável mais do que um ponto de dados constante que nunca mudará e assim, com constante, não foram autorizados a substituí-la. Então, se nos livrarmos disso, isso funcionará perfeitamente. O financiamento diz alguma coisa. Se tentarmos sobrescrever isso porque já foi definido aqui. Se tentarmos redefini-lo, vai nos lançar um erro. Olhe para aquelas atribuições inválidas para Const. Um novo vírus. Você não tem permissão para reatribuir nada a um concerto, então há realmente benefício para isso ao usar uma variável regular, por exemplo, curso, ele vem com um monte de métodos basicamente funções na string objeto. Vem com um monte de coisas diferentes aqui. Podemos ver uma tonelada deles em seu também, e alguns deles nos permitem realmente alterar o valor. Claro, enquanto Const não nos permite fazer isso, Const não vem com toda a funcionalidade que uma variável regular vem com porque não pode mudar. Então, qual é o ponto de atribuir um método ou função a ele se não podemos alterar esse valor ? Então, há realmente um bastante grandes ganhos de desempenho, e porque ele é escopo de bloco, você não precisa se preocupar com isso vazando fora disso. Se declarar sua função javascript, seu programa JavaScript não precisa se preocupar em armazenar um monte de que na memória por muito tempo, e por isso é apenas uma maneira muito rápida de usar variáveis. Agora, se isso tudo soa um pouco louco demais para você, você pode pensar nisso assim. Var é basicamente uma variável que pode ser escopo para o ambiente global. Vamos bloquear escopo para os colchetes mais próximos. Na verdade, vamos fazer isso deixar e const nosso bloco com escopo para os colchetes mais próximos. Deixe pode ser mudado. Constante não pode ser alterada. E essa é a principal diferença. E você vai ver isso em todo o lugar no JavaScript moderno. Então, temos usado VAR até agora. Mas avançando, provavelmente usaremos fogo. Deixe e const você sabe o que eu gostaria que você fizesse como, Ah, pequena tarefa rápida aqui é criar uma variável let dentro de talvez uma instrução if ou um loop for ou algo assim, e então tentar acessá-lo fora do seu if e, em seguida, à direita, uma constante de variável const. E, em seguida, apenas tente alterar o valor dessa variável const e ele irá lançar um erro . Uma vez que você tenha experimentado esses erros e e como eles realmente funcionam, ele começa a fazer muito mais sentido e nós estaremos usando esses erros avançando. Você terá muito mais experiência com estes à medida que avançarmos no resto deste curso 46. Introdução ao OOP: Ok, agora estamos entrando em algumas partes divertidas. Isto é programação real. Isso tem menos a ver com o modelo de objeto de documento. Mais do que tem a ver com fundamentos de programação reais com uma coisa chamada linguagem de programação orientada a objetos em 00 P. Agora, enquanto isso soa meio complexo e no início vai parecer um pouco complexo, realmente, tudo o que é é uma maneira de agrupar suas variáveis e funções para manter seu código bem organizado e reduzir a duplicação de co. Lembra quando criamos um objeto de pessoa no vídeo do objeto? Criamos algo como este nome sequela de Kaye Love e a idade é igual a 30 Yadi Yadi Yadi em algo assim. Foi o que acabamos criando. Isto é basicamente objeto orientado programação porque temos um objeto aqui, e então temos objeto ponto propriedade em que retorna. Caleb pessoa idade ponto é igual a 30. Na verdade, há uma maneira mais agradável de escrever isso em JavaScript mais moderno, e isso é através dessa idéia de uma classe. E a coisa boa sobre uma classe é que basicamente você pode pegar todo o seu objeto de pessoa e você pode copiar e colar uma e outra vez. Você pode dar-lhe valores padrão para que ele crie basicamente este objeto para você com apenas uma única linha de código. Você só tem que escrever essa funcionalidade primeiro. Então vamos dar uma olhada nisso. Nós temos classe, pessoa, pessoa, e isso é essencialmente o que sua sintaxe se parece. É só classe de palavra-chave. Seja qual for o nome da sua turma, geralmente começa com um P maiúsculo , mas na verdade, isso depende de você. E então aqui temos funções e variáveis chamadas métodos e propriedades. Então temos uma função aqui chamada Make Sound, e tudo isso vai fazer é conselho. Não me registre. Oh, agora dois em Stan, ela comeu ou para começar uma classe como esta porque este código pode ter sido executado em segundo plano, mas na verdade não é armazenado em nenhum lugar. Agora, isso é o que seria se escrevêssemos uma função regular aqui. Vamos em frente e nos livrar disso. Nós não precisamos porque javascript é inteligente o suficiente para saber. Ei, isso não é uma variável. Isto é uma função. E agora, na verdade, em Stan. Ela comeu isto para começar a aula. Nós realmente para armazenar isso em algum tipo de variável para que pudéssemos fazer Const. Caleb é igual a uma nova pessoa. Então esta é a nossa sintaxe aqui. Temos aula de palavras-chaves. Seja qual for o nome da classe que corresponde aqui abrindo e fechando chaves. E então nós só temos uma função simples aqui. É uma função dentro de um objeto que classes são objetos. E então chamamos isso de método. E então nós dissemos: “ Ei, Ei, use const”. Kayla porque isso não vai mudar as coisas dentro dele pode mudar. Mas isso em si não vai mudar e então Caleb ponto fazer som com parênteses lá porque é uma função, é um método. Vamos em frente página de atualização, e podemos ver que ele diz que eu. Oh, agora por que isso é tão incrível? Bem, porque agora eu posso fazer outra pessoa. Posso chamá-lo de Nathan, e ambos podemos fazer o mesmo som. E tudo o que fiz foi certo. Uma linha extra de código e ele pegou tudo aqui e aplicou a uma linha extra de código iniciada em uma variável em um Nathan velho constante. E agora nós dois vamos fazer o som de Miao, então isso vai aparecer duas vezes. Miami. Você vê que para eles isso significa que apareceu duas vezes. Vá em frente e desfaça isso. Agora vamos em frente e adicionar alguns valores padrão. Então, digamos que uma pessoa precisa de um nome e idade e sua comida favorita. Então, ao contrário de uma função em que seria como nome, idade e comida, nós meio que fazemos isso. Mas temos que percorrer o caminho mais longo para isso. Então criamos uma nova função, um novo método aqui chamado Construct. Er, este é um nome mágico de função. Você pode realmente ver que é rosa. Esta é uma palavra reservada que é uma palavra-chave. E então podemos passar esses valores aqui para que possamos dizer, qual é o nome da pessoa? Qual é a idade da pessoa? Qual é a comida favorita da pessoa? Esta é uma função que não diz função na frente dela. Mas isto é uma função. E então poderíamos dizer, Cônsul, que nome de registro, comida de idade e vamos em frente e jogar os valores padrão aqui. Então meu nome será Caleb. Minha idade vai ser 30 e minha comida favorita vai ser zahk. Refresh diz Caleb. Os anos 30 são tão agora. Na verdade, colocamos valores em nossa nova classe. Poderíamos ir em frente e criar um novo. Vamos nos livrar de fazer barulho. Não precisamos dessa nova pessoa. Este vai ser Nathan e ele vai ter 28 anos sua comida favorita vai ser uma salada . E vamos ver Caleb, 30 Pizza Nathan, 28 salada. E poderíamos fazer isso uma e outra e outra vez. E sempre que adicionarmos mais código aqui, isso afetará ambos igualmente, que é muito bom. E agora estamos escrevendo um pedaço de código que pode afetar várias seções de um site ou várias partes de funcionalidade. Agora, se eu quisesse que isso dissesse que Caleb diz mm para, e então qualquer que seja a comida bem, infelizmente, porque isso é objeto, não podemos apenas dizer comida, e não podemos simplesmente dizer nome. Isso simplesmente não vai funcionar. Então vamos em frente, Caleb Dot faz som fazer barulho de Yammer. É realmente corrigir essa sintaxe lá. Guarde isso e refresque e comida não está definida. Embora a comida esteja aqui, nós a demos aqui. Até passamos por aqui e aqui. Mas, por alguma razão, o Coda diz que a comida não está definida. E é aí que entra a ideia da palavra-chave “this”. Então, em nosso método mágico de construção aqui, nós poderíamos fazer isso. Nome do ponto é igual ao nome desta idade do ponto é igual a Nós poderíamos lançá-lo se quiséssemos Idade este ponto A comida é igual a comida e poderíamos nos livrar disso. E o que isto quer dizer é, , há uma propriedade nesta classe de pessoas chamada nome. Há outro chamado idade, e há outro chamado comida. E então quando passarmos nossos parâmetros para essa pessoa classe Caleb, 30 pizza, isso vai dizer Ok, bem, sim, claro, eu entendo que tudo isso está sendo passado para a primeira função, mas também disponibilizar thes através de toda a classe. Então agora eu poderia mudar isso para este nome ponto diz comida para diz ele para este ponto comida, em vez disso. E vamos colocar isso em várias linhas porque podemos. E então agora isso vai dizer, Caleb diz MM para pizza. E mais uma vez tudo o que estou a fazer aqui a dizer, Const. Caleb é igual a uma nova classe de pessoa. O nome é Caleb. As idades 30 comida favorita é pizza, e novamente, que apenas combina aqui como uma função regular. Acontece que este tem que ser chamado de construção. Vamos atualizar isso e dizer, Caleb dizpara pizza e novamente, a chave aqui realmente é essa palavra-chave. Vamos atualizar isso e dizer, Caleb diz para pizza e novamente, Isto é o que permite transportar esta variável para qualquer outra função dentro da classe person. Mas se isso ajuda, acho que isso realmente me ajudou quando eu estava aprendendo isso no passado. Parece que este nome é igual a qualquer que seja o nome que vai ser. Esta idade dos pontos é igual a qualquer que seja a idade que vai ser, e este alimento ponto é igual a qualquer que seja a comida que vai ser. E tudo isso está dizendo é: “ Ei, Ei, há uma variável fora desse escopo de função chamada esse nome de ponto e apenas atribuí-la ao que quer que seja. Há outro chamado “idade dos pontos”. Atribuir para o que quisermos ser um juiz e esta comida de ponto. E então, basicamente, pense nisso assim. Estamos apenas pegando uma variável de um escopo mais alto e mudando o valor dela no Lee. Não temos que escrever isso. E se quiséssemos, também poderíamos vir aqui. E poderíamos dizer, Nathan Dot fazer som, fazer números soar página refrescante. Isto vai dizer, Caleb diz, mude para a pizza. O próximo também vai dizer, Nathan diz em breve para Salad, assim como agora, isso pode não parecer super útil neste momento, mas à medida que isso pode não parecer super útil neste momento, sua lógica cresce, faz sentido agrupar as coisas que estão juntos. Então, em vez de ter uma matriz, um objeto e um monte de funções para uma única pessoa em particular, e, em seguida, copiar e colar uma e outra vez por uma segunda e a terceira e quarta pessoa, poderíamos Enrole tudo isso juntos porque está tudo relacionado com uma aula e depois diga “ oi “, use uma nova pessoa. Podemos até estender isto até ao fim do caminho, se quisermos, para fazer coisas adicionais, possamos dizer que esta é a base. Mas então se quiséssemos dizer que se a pessoa é parte do exército, eles têm funções extras ou recursos extras. Não vamos entrar nisso neste vídeo. Isso basicamente encerra toda a lição da turma. O que eu gostaria que você fizesse, no entanto, é dar uma chance a isso. Criar uma classe, criar uma função er construção mágica. Podemos pegar os parâmetros que você quiser. Você vai definitivamente querer usar a palavra-chave this e, em seguida, criar uma função. Outra função não importa o que é chamado e tentar acessar. Por exemplo, este alimento ponto. Mesmo que não tenhamos passado comida para aqui, fomos capazes de obtê-lo dizendo este alimento ponto porque isso se refere a toda a classe em si. Finalmente, em vez disso, ela comeu sua classe dizendo, Const, seu nome é igual a uma nova pessoa ou qualquer que seja a sua classe vai ser e então execute o método lá dentro, que minha função foi chamada Fazer som. Você pode executar o seu com seu nome ponto seu nome de função e, em seguida, parênteses. Esta é também uma daquelas ideias que é um grande obstáculo para os programadores superarem. Mas uma vez que você aprende sobre programação orientada a objetos e começa a fazer muito mais sentido para você, vida fica muito mais fácil como desenvolvedor e você pula desse status de iniciante ou júnior para um status intermediário. Porque você começa a entender como os dados se relacionam a si mesmos para duas outras funções ou como agrupar as coisas, e tudo começa a se unir. Então, definitivamente nos dê uma chance. E, ei, se você tiver perguntas, não se esqueça que há uma seção comum abaixo. Seja baixo. Fico feliz em ajudar a qualquer momento. Por favor, faça perguntas se precisar de ajuda. 47. Como estender cursos: Tudo bem. Nessa última lição, falamos sobre uma introdução na programação orientada a objetos, e falamos sobre coisas como propriedades, métodos, construção mágica, er's e a palavra-chave this nesta lição, vamos repassar um pouco mais disso. Honestamente, se você é novo em JavaScript, isso vai ser muito teórico para você agora. Será muito mais aplicável para você como sua carreira como desenvolvedor de JavaScript na estrada . Mas a partir de hoje, se você é novo em JavaScript, honestamente, fique à vontade para assistir a este vídeo. Você não tem que fazer nada com isso. É bom saber sobre o conceito por trás dele, modo que quando você for apresentado a isso na estrada, não vai ser super assustador ou algo assim. Você estará adequadamente equipado para lidar com as aulas, e nesta lição, vamos criar uma classe, e então vamos estendê-la. E um bom exemplo disso é algo super básico. Digamos que temos uma classe de um animal, e o que todos os animais têm em comum? Então nós temos uma classe er construct ou construir o seu método aqui. E é aqui que colocamos em todos os nossos valores padrão ou parâmetros padrão. Então, digamos que todo animal tem um nome ou melhor, não um nome, mas uma espécie. Ele também tem um peso e sim, e então apenas uma altura. Então nós vamos apenas fazer esses três aqui, e então nós vamos apenas dizer que isso faz Espécies é igual a espécies, que parece muito estranho que nós estamos escrevendo isso assim, mas isso nos permite usar essas variáveis em todo o classe animal. Espere. Nós também poderíamos lançar isso como um número se quiséssemos. Nós queríamos. Poderíamos lançar isto como uma corda. Então é sempre uma corda. E então poderíamos dizer que esta altura do ponto é igual ao elenco. Isso é uma altura numérica. E então poderíamos criar um bom método. E aqui ligou, não sei, pegar informações. Então pegue informações sobre esse animal em particular. Ele não tem parâmetros porque é magicamente apenas vai pegar a espécie deste ponto. Isso não é esperar. Isso não é altura, porque é como dizer espécies de ponto animal. Seja o que for este animal, ponto animal, espera, seja lá o que for este animal, altura de ponto animal, seja lá o que for este animal. E então essa função já entende o conceito disso. É agora que podemos dizer, Cônsul, não registre este ponto Espécies maneiras. Espere, não sabemos se são quilogramas ou algo assim. Então vamos deixar este aqui sem qualquer tipo de métrica ou não sabemos se isto é libras ou quilogramas, então vamos deixar isso como é um número normal. E a altura do duto é alta? Então, por exemplo, um Tiger Ways 400 tem três metros de altura. Agora, não sabemos se são quilos ou pés ou algo assim. Então vamos ficar com números regulares por enquanto para manter isso bem simples. E eu vou fazer isso um pouco menor para que possamos ver mais na tela. Vamos em frente e estande um animal novinho em folha. Então, digamos const. Tiger é igual a um animal. Um novo animal. Vamos dizer, Tiger, Tiger, peso é 200, sua altura é 36 polegadas. Algo assim. E então nós poderíamos fazer Tiger Dot obter informações e isso vai apenas console log. É peso da espécie e altura numa frase para nós. Vamos em frente e refrescantes. Aqui Tiger pesa 200 é 36 de altura. Então não é o melhor inglês lá, mas você entende o ponto. Então esta é uma aula regular, e isso é basicamente exatamente o que fizemos no último vídeo. Agora vamos em frente e estender isso. O que isso significa é que podemos escrever outra classe que herda todos esses dados já, e podemos adicionar mais a ela se quisermos. Então vamos em frente. E o que eu vou fazer aqui é, mas tudo em uma linha só para que possamos resumir isso em uma visão um pouco mais fácil. E vamos criar uma nova classe para um animal de estimação como um gato normal. Então nós fazemos classe cat palavra-chave estende animal, e assim este gato já está indo para obter construtores como espécies, peso e altura, e ele também vai obter o método de obter informações Agora. O que podemos fazer aqui é construir um instrutor de Kamau. Vamos passar a espécie, o peso e a altura e poderíamos executar tudo isso se quiséssemos, ou poderíamos dizer que porque está se estendendo do animal, poderíamos executar exatamente essa mesma função. Você pode ver que eles são realmente destacados quando eu seleciono um. Ele seleciona ambos porque eles têm algo semelhante. Tem funcionalidade semelhante aqui para que possamos fazer essa coisa chamada Super, que é muito legal porque isso se estende porque gato estende animal. Podemos executar essa função chamada Super e ela diz, Oh, vá até o animal e execute qualquer função que seja atualmente. Vamos jogar o peso e a altura das espécies lá dentro. E também podemos adicionar algo novo para que pudéssemos fazer essa cor de ponto e digamos que eu tenha um gato laranja, o que é realmente falso. Eu tenho um grande e um gato preto. Vamos fazer isso. Portanto, nenhum animal não tem essa cor. Isso não está aqui em cima. Mas o gato sabe. Cat tem tudo isso. Estamos dizendo “Ei, corra Super “Então basicamente execute todas essas coisas com esses três parâmetros lá dentro, que é exatamente o que está fazendo, vai definir o peso e a altura da espécie. E eles estavam dizendo, Ei, também adicione a cor para. Então ele é ótimo. E assim ainda podemos manter essas coisas aqui. Se quiséssemos que ele fizesse um comentário para fora, isso tem que mudar isso lá. Vou comentar isso e criar uma nova aula de gatos. Então vamos em frente, Const. Seu esforço é igual a gato novo, não animal. Definimos uma nova classe aqui. Só se estende de espécies animais. É que ele é um gato meio inútil porque sabemos que vai ser um gato. Qual é o peso dele? Ele pesa £13. E o que é essa altura? Eu não sei. Eu acho que ele tem uns 13 ou 14 polegadas de altura, algo que é um gato bastante grande. E então poderíamos fazer o log de pontos do console Zephyr e dar uma olhada no que realmente está acontecendo nos bastidores aqui e ver se a cor aparece, então atualize. Temos um objeto aqui. A cor é ótima. Olha, lá está ele. Altura de 13 espécies é um gato e o salário 13. Agora, e se quiséssemos fazer é nunca obter informações. Na verdade, não está aqui. Está na aula dos pais. É daquele de onde estamos estendendo. E isso vai dizer que Cat pesa 13 e tem 13 de altura novamente. Inglês terrível. Mas esse não é realmente o ponto aqui. O gato pesa 13 e 13 de altura, como esperado. E é como dizer, se eu copiar tudo isso no ano e me livrar dele aqui e então dizer que esta cor de ponto é igual a cinza, é como dizer que só desta vez fomos capazes de escrever menos código. A coisa boa sobre isso é que se nós estender isso novamente, poderíamos dizer cão classe estende animal e cão também terá peso e altura da espécie, então não temos que redefinir isso. Ele terá um método aqui chamado Get Info para que não tenhamos que redefinir isso. E é apenas uma maneira fácil de copiar isso uma e outra vez e outra vez. E assim poderíamos dizer Const. Thiago é igual a novo cão Vito. Qual é a altura dele? Eu não sei. Ele é enorme. Tem uns 3 metros de altura. E isso foi na verdade é esperar então seu peso seria de cerca de £140 ele tem 3,5 pés de altura. Ele é um cão grande. Mas agora podemos comandar Zephyr. Nós poderíamos fazer Dargo dot obter informações sobre isso vai dizer Vito pesa 140 é 3.5. E então, novamente, isso é bastante teórico. Neste ponto, não vamos usar isso muito na estrada. Mas você vai ver isso na natureza e seu JavaScript cresce e cresce e cresce. Você vai ver isso muito mais. Você realmente vai ver isso em um monte de outras linguagens de programação, como Python e PHP também. Vamos fazer mais um exemplo. Você. Vamos nos livrar do cachorro. Não precisamos disso aí. E vamos criar um novo método para o nosso gato. Então vamos criar um método onde o gato está dormindo regras. Chame de Sono Cônsul Dot log este nome de ponto Bem, está tudo bem. Não há nome lá. Esta espécie de ponto está dormindo por 16 horas por dia, então Cat está dormindo por 16 horas por dia. Poderíamos ir em frente e agora usar isso. Então, em vez de zephyr dot obter informações, poderíamos usar o seu esforço ponto de sono e isso só está disponível na aula de gatos. Então, se escrevêssemos animal aqui, isso não funcionaria. Mas se escrevermos a Cat, isto vai funcionar. Então vamos em frente. Atualize nossa página. Cat está saindo por 16 horas por dia. Perfeito. Isso é o que você chamaria de aula perfeita. E por último, mais um exemplo aqui que poderíamos fazer na classe animal aqui. Vamos fazer uma função de falar, falar método conselho ponto log. Eu digo uma coisa. Não sabemos o que é este animal. Não sabemos o que vai dizer. E um gato, podemos dizer que um gato sempre me diz. Então podemos sobrescrever isso dizendo “Fale conselho “, não registre, não fale, queremos dizer “não”. Então podemos sobrescrever isso dizendo “Fale conselho “, não registre, E então, em vez de dormir, poderíamos dormir e depois falar e depois dormir e vamos dizer que está tirando um cochilo, então Cat está tendo um cochilo. Então ele vai se levantar. Ele vai falar, e depois vai ter outra soneca de novo. Refresh Cat está tirando uma soneca. Miao gato está tendo ele para cima e por isso temos sucesso sobre nos escreveu. E se isso não existisse, isso vai herdar o método de fala de sua classe pai da classe que está estendendo a classe animal. Então ele vai dizer que eu digo uma coisa que não é útil. Diz que a Cat está a dormir uma sesta. Eu digo uma coisa. Cat está tirando um cochilo. Então basicamente tudo o que fizemos foi sobrescrever o método padrão que veio com Animal. Por fim, vamos aprender a encadear funções juntas, encadear métodos juntos porque em outras partes do JavaScript, você vai ver coisas como esta onde é como seu esforço, não dormir. Não fale sobre dormir. É como, como se muda isso juntos? Isto é realmente muito fácil. Então, quando você está lidando com um objeto de algum tipo, sabemos que classes são objetos. Tudo o que você tem que fazer é dizer devolva isso. Isso vai devolver todo o objeto gato. E se você fizer isso aqui para devolver isso toda vez que você executar seu esforço, não dormir, ele vai consolar espécies de log está tendo uma soneca, então vai devolver isso que é basicamente todo esse código aqui. Vai devolver a coisa toda, o que significa que agora somos capazes de mudá-la juntos. Então você pode usar falar e porque ele está retornando basicamente todo esse código novamente, você pode então executar o sono. Então vamos em frente. Guarde essa atualização e Walla assim. Agora temos uma classe estendida e estamos mudando métodos juntos. Então nós estamos entrando em muito, muito bom JavaScript aqui e francamente, eu, junto com a maioria dos Javascript Dev preferiu apenas ter esta notação de ponto aqui. Então, em vez de seu esforço, não dormir e, em seguida, nunca falou. E então Zephyr não dormir e separar-se é uma e outra e outra vez. Podemos apenas colocar tudo isso em uma linha, modo que é estender uma classe novamente. Você não precisa saber muito sobre isso. Nós realmente não vamos praticar estender as aulas nesta classe só porque não é algo que vai ser incrivelmente útil para você agora. O que? É uma dessas habilidades que você deve apenas falar no seu bolso de trás por enquanto porque eventualmente você vai ver isso na natureza. E vai ser importante para você entender o que é isso, ou pelo menos ter uma vaga lembrança disso. Uma vez, quando Caleb falou com você por 15 minutos sobre o que significa a palavra chave estendida com métodos de construção e encadeamento juntos e coisas assim. Coloque esse vídeo no bolso de trás, e se estiver se sentindo um pouco picante, pode tentar. Pode tentar escrever isso, se quiser. Pessoalmente, acho que seria uma boa ideia. Mas se você não quiser saber de pressão, podemos ir para a próxima lição quando você estiver se sentindo bem e pronto. 48. Projeto modal do JavaScript: Ok, agora é a hora em que começamos a juntar muitas dessas habilidades. Este projeto vai ser um pouco mais difícil. Vamos criar um móvel a partir do zero. Agora, se você não sabe o que é um móvel, é você sabe, sempre que você clica em um botão e, em seguida, como o fundo da página meio que fica mais escuro ou escuro, e então você tem, tipo, uma pequena janela interna dentro de sua página. Isso é o que é um móvel. Vamos criar um desses a partir do zero. Agora, se você não sabe muito CSS, tudo bem. Você é móvel não tem que ser bonito de forma alguma. Só precisa ser funcional. Essa é a chave para o JavaScript é a funcionalidade. Então o que eu gostaria que você fizesse é criar um botão que vai abrir um motel, criar um botão que vai fechar o motile, e então eu quero que você escreva tudo isso dentro de um objeto ou uma classe. Cabe a você. Se objetos fizerem mais sentido para você neste momento, acerte-o em um objeto. Se uma aula faz mais sentido para você, acerte-a dentro de uma classe. Certifique-se de que você tem suas funções ou seus métodos dentro de seu objeto em sua classe e fazer o que você precisa fazer para fazer isso funcionar. Agora você também vai ter que escrever um pouco de HTML porque sua página requer a estrutura móvel real que eles dizem requer muito vagamente que realmente não requer. Você também pode obter javascript para criar isso dinamicamente, se você quiser. Para isso, você vai precisar escrever alguns ouvintes de eventos, e você também vai precisar escrevê-los dentro de um objeto ou uma classe. Então, se você misturar esses dois juntos, você deve ser capaz de criar um móvel com bastante facilidade. Mais uma vez, isso não é necessariamente sobre beleza. Trata-se de funcionalidade. Você sempre pode fazer algo melhor do pé. Olhe para o uso de CSS. Isso é totalmente bom. Isso é mais uma coisa CSS que queremos fazer apenas JavaScript tão focado em grande parte na funcionalidade. Dê uma chance a isso. Tente fazê-lo sozinho sem pesquisar nada no Google sem ter que fazer referência a outros vídeos . Faz o teu cérebro suar. Este projeto muitos este objeto orientado motile programação é suposto ser um pouco mais difícil. Vá o mais longe que puder com isso. Tente descobrir a solução por conta própria. Mas quer saber? Se você realmente ficar preso e você simplesmente não pode fazer mais nenhum progresso, você pode definitivamente referenciar os outros vídeos. Pule na velha máquina do Google ou apenas assista o resto deste vídeo porque eu estou prestes a mostrar-lhe como eu faria isso. Mas nos dê uma chance. Eu vou desvanecer isto para preto e então você pode bater, pausar, e então, quando você terminar ou se você ficar preso, você pode apenas retomar este vídeo e você pode ver como eu faria isso. Então vamos em frente e nos dê uma chance, ok? A primeira coisa é a primeira. Precisamos do html móvel real. Então eu vou criar um div aqui e eu vou fazer algum nojento no estilo de linha. Então, estilo de posição. Absoluto, na verdade, vamos fazer posição Fixo superior 50% esquerda, 50% borda, um pixel, vermelho sólido. Isso vai ser super feio. A cor de fundo também vai ser lida. O com vai ser 50% e nós vamos dar-lhe um preenchimento de 20 pixels Vamos ver isso se parece. - Sim. Ok, então é, você sabe, uma grande caixa vermelha e feia. Vamos transformar a tradução. Menos 50% menos 50%. E lá vamos nós. Está no centro da nossa página. Vamos em frente e mova isso. Por isso, está no centro da nossa página agora. E, por último, queremos mostrar nenhum. Certifique-se de que não apareça. Lá vamos nós. É como se nunca tivesse existido. Próximo. Precisamos ser capazes de agarrar isso. Então vamos em frente e nos dar uma classe Js motile. E enquanto estamos a fazer isto, sabes que mais? Podemos muito bem jogar isso no CSS apropriado também. Então vamos pegar isso. E vamos dar a isso uma classe de apenas um lance móvel regular nossa classe aparecer estilo ponto motile e eu vou retocar. Não fazer fazer selecionar apenas semi dois-pontos Nova linha bam assim. E só para ter certeza que isso está funcionando, vamos nos livrar do display none, e ainda não está aparecendo. E aposto que é porque tenho bootstrap instalado. Então eu vou desinstalar o bootstrap, sair daqui. Bootstrap, não precisamos de você. Sabemos como escrever nosso próprio CSS e JavaScript. Agora vá em frente e pegue o vermelho de exibição. Nenhum. Bam! Lá está ele. Está bem, fixe. Sim, era uma coisa de bootstrap, e estava usando a classe de motile. Então nos livramos desse fim. Agora temos a propriedade completa sobre ele. Ok? Precisamos criar um botão que vai abrir o motile, e precisamos criar sobre vai fechar o motile. Então vamos criar um botão aqui ele regular classe botão Js aberto motile aberto motile Isso sempre vai dizer grande botão feio e atualmente não faz nada. Agora vamos em frente e criar um ouvinte de eventos para motile aberto. Então botão aberto tão constante aberto BT N é igual a documentos selector de consulta ponto que jazz abriu motile Há apenas um para que possamos usar totalmente seletor Cree em vez de Crease Lecter tudo e poderíamos fazer abrir bt n ponto adicionar ouvinte evento é um clique vai ser o evento e tudo o que queremos é pegar o motile e exibi-lo Então agora precisamos pegar o modelo CONST. Modelo de modelo móvel é igual a documentos ponto consulta seletor ponto modelo Js. Nós vamos apenas selecionar isso e nós vamos dizer Motile que estilo não exibir é igual a Vamos apenas mudá-lo para inicial, que vai ser o que quer que fosse antes de dizê-lo para ser Display none. Atualize sua página. Ha! Funciona. Quero dizer, só abre, mas isso é muito bom. Ok, vamos realmente ir e estilizar isso. Apenas um pouco mais agradável causa que o vermelho é apenas fenomenalmente terrível com de 80% que é fora do máximo com 800 pixels para navegadores super enormes, Borda vai ser um pixel. Fundo preto sólido vai ser branco. Isso é em uma sombra de caixa. Cinco seleções esses cinco pixels preto exibem nenhuma. Remova isso. Sim, bom o suficiente de novo. Não estamos à procura de beleza. Só estamos nos certificando de que isso funciona. Vamos em frente no nosso motile. Está com um título. Este é um parágrafo modelo, Laura , 50. E se atualizarmos sua página e abrirmos, este é um motile e ele apenas camadas no topo do resto da página. Agora precisamos de um elemento próximo aqui, então vamos em frente e adicionar um botão aqui. Classe de botão é igual a Js fechar motile. Nós também poderíamos obtê-lo por sua idéia, se quiséssemos. Não importa modelo próximo. E agora precisamos adicionar o evento de fechamento. Então vamos fazer isso. E eu sei que eu disse, vamos fazer isso e objetos ou dentro de uma classe e nós vamos fazer, mas porque estamos aprendendo JavaScript vai ser mais fácil se acertarmos da maneira que sabemos e, em seguida, torná-lo mais avançado a partir daí. Então temos um botão aberto agora temos um botão de fechar e é muito, muito semelhante ao ouvinte de eventos botão aberto. Então motile dot style display ponto vai ser display None. Vamos em frente. Temos um erro. O que nunca diz botão Fechar é não. É porque não é jazz, mas motile, é jazz próximo. Se você está gritando para sua tela dizendo Caleb, você não errou Boa pegada. Ok, sem mais erros. Motile aberto fechar Motile aberto motile fechar motile Ok, estamos chegando muito perto agora. A última coisa que precisávamos fazer era escrever tudo isso dentro de um objeto ou classe. Agora novamente Porque nós somos novos em JavaScript. Nós não vamos jogar tudo isso imediatamente em um objeto ou uma classe. Vamos escrever do jeito que sabemos como escrever, e então podemos complicar mais. Então vamos em frente e criar uma classe então classe, vamos chamá-la de motile. Nós poderíamos ter uma construção aqui e poderia fazer algumas coisas e então nós poderíamos ter feito isso um pouco maior. E então nós temos um método aberto e então nós poderíamos ter um método próximo. E então vamos incomum que tudo bem, e então em sua construção, ou o que é um pedaço de dados que precisamos acessar através da construção do aberto e os métodos de roupas? Enquanto precisamos do motile cada vez que precisamos desse motile que não usamos constante aqui porque se queremos acessar o motile dentro do aberto no método de fechamento que fazemos este ponto Motile é igual ao único motel na página. Então o que acontece quando dizemos “abrir “enquanto precisamos abrir este motor. Então nós vamos pegar isso e nós vamos dizer este ponto motile Isso é este cara aqui ponto estilo ponto exibe capaz de inicial e, em seguida, vamos fechá-lo basicamente fazendo a mesma coisa. Este ponto motile dot estilo. Essa exibição é igual a nenhuma. Ok, vamos dar um rápido salvamento e atualização. Temos algum erro ou aviso no seu novo livro? Isso funciona novo porque o modelo não está mais definido. E isso é porque temos ouvintes de eventos aqui que estão procurando por isso. Então, em vez disso, o que podemos fazer é realmente fazer uma mistura aqui, então temos um móvel regular e vamos em frente e apenas acelerar as coisas aqui. Mas agora precisamos definir esse móvel. Então o que poderíamos dizer é que o motile constante é igual a um novo motile e em vez de definir isso , poderíamos fazer ponto móvel aberto e aqui poderíamos didio motile roupas escuras e na verdade poderíamos manter tudo isso juntos que faz não precisa estar acima do modelo em tudo. E então o que fizemos foi pegar nosso esconderijo do motile e abrir o motile esse tipo de funcionalidade, mais o seletor real em si. E colocamos em sua própria classe. E agora podemos fazer, como um ponto mortal abrir roupas móveis e atualizar sua página. Este é um móvel fecha o modelo. Ah, então isso é muito bom. E assim, temos uma classe trabalhadora com construct er este top model que nos permite usar este ponto móvel através de vários métodos. Quer tenhamos mudado o estilo, ele é um Vinco Lector. Ele é alguns outros seletores de carreira. Criamos um novo motile e, em seguida, adicionamos alguns ouvintes de eventos. Não, se quiséssemos nos estender? Nós poderíamos. Poderíamos estender isso facilmente. E se quiséssemos mudar o título e o texto? Bem, vamos em frente e mudar Esta classe digere a classe de título móvel Js texto motile e nós poderíamos você sabe, Phyllis com padrões regulares e nós também poderíamos mudar estes também para que pudéssemos fazer algo assim. Construct vai levar um título. Ele também vai levar algum texto e imediatamente nós poderíamos fazer este ponto motile dot query selector. Poderíamos encontrar Js mudança título motile que texto interno dois título, não texto e então poderíamos fazer a mesma coisa novamente com o texto é igual ao texto. E então o que isso está dizendo é que nós já temos o motivo. Esta é a nossa nota de elementos e, em seguida, vamos encontrar um novo aqui, apenas o 1º 1 chamado Título e no 2º 1 chamado texto texto. Lá vamos nós termina no texto Inter para o título e o texto. Mas vamos tornar isso opcional. Então, digamos que se o título não é igual a indefinido agora podemos realmente definir isso. Se o texto não for igual a indefinido agora, podemos realmente definir isso também. E assim, quando atualizamos modelo de roupas modelo aberto que funciona. E se quiséssemos abrir nosso motile com um novo título, novo título e novo texto Novo texto aqui? Então é assim que se parece atualmente. Este é um motivo, um monte de atualizações quentes do ipsum. Este é um novo título móvel novo texto aqui. Na verdade, nós poderíamos até mesmo dar um passo adiante aqui poderíamos dizer que este título de ponto é igual ao título. Este texto não é igual ao texto, e então poderíamos jogar isso em seu próprio método também. Então vamos em frente e dizer Novo método, alterar conteúdo. Não precisa tomar nada. Vamos jogar isso aqui e vamos dizer, se não for, o título não é indefinido. Este imposto não é indefinido. Então vamos pegar o móvel. Selecione também o título de dentro dele. É como detectar dentro dela. E em vez de título, queremos este título de ponto este ponto Tex. E novamente, estamos fazendo isso porque isso foi criado aqui. Temos o título. Pelo que sabemos, isso é, na verdade, indefinido. Até definimos um padrão no seu título para que ele não seja um título padrão. E vamos definir um texto padrão aqui. Texto padrão. Ok, vamos em frente. Atualizar esta página Falta um parâmetro. Onde você está perdendo alguma coisa? O texto é igual ao padrão. Lá está ele. Obrigado, advogada, por me ajudar sem o seu desgraçado. Em vez disso, vamos voltar ao conselho. Não há erros de atualização. Abra o Motile. Isto é um motel. A razão pela qual ele não mudou foi porque nós realmente não usamos o conteúdo de alteração ainda, então vamos abrir Motile temos isso. Temos um objeto com um monte de coisas aqui. Temos o título móvel e o texto. A propriedade móvel é o próprio elemento de nota real. Então vamos fazer ponto móvel e o que temos aqui temos perto se quisermos meu pequeno ponto aberto se quisermos motile dot mudar conteúdo e lá está. Ok, então isso foi um movimento divertido que fizemos lá. Fizemos algumas coisas. Nós estendemos muito mais do que eu esperava estender isso, mas eu acho que este é realmente um exercício muito bom para criar seu próprio móvel. Se você não é ótimo com CSS, não se esqueça que você sempre pode apenas copiar meu código aqui que irá criar um motile básico para você . Eu fui muito acima e além do que esta tarefa original estava pedindo, mas também acho que mostrei algumas coisas legais aqui para você também. Na verdade, há mais uma que quero te mostrar. Mais uma é que não precisamos usar o título no texto. Vamos em frente e vamos nos livrar desse título de ponto e vamos nos livrar disso, não de texto, e poderíamos dizer aqui mesmo título e texto. E, em seguida, se atualizar motile aberto, temos um modelo aqui ponto alterar conteúdo Título vai ser novo título ha motile que mudar novo título para e novo texto aqui apenas como uma função regular. Então agora nós estamos realmente passando em parâmetros para um método. E você poderia escrever esse código aqui também se quisesse. Aí você não tem. É assim que eu criaria um motile usando classes JavaScript e alguns ouvintes de eventos. Na verdade, apenas um par de ouvintes de eventos, e eu até mesmo mudar alguns dos conteúdos lá também. Sinta-se livre para replicar isso. Sinta que Frieda rouba esse código exato e mexa com ele e descubra como funciona . Se você estiver satisfeito com a sua solução ou estiver satisfeito com a minha solução, podemos passar para o próximo vídeo. E não se esqueça que você pode atualizar seu projeto de compartilhamento de habilidades com o código mais recente que você tem , ou você pode compartilhar uma captura de tela do que você está motile parece ou um vídeo ou uma caneta de código. De qualquer forma, você pode atualizar seu projeto de compartilhamento de habilidades com seu código mais recente. Uma vez que você tenha feito isso, vamos para o próximo. 49. Stretch de casa: Certo, estamos na reta final. Vamos rever alguns JavaScript mais recentes, coisas que você vai ver em todos os lugares. Alguns deles incluíram liberais modelo. Então, melhor caminho para Katyn. Oito, essas cordas nojentas que temos tentado contaminar. Há uma maneira muito melhor de fazer isso. Liberais de objeto. Vais ouvir este termo por todo o lado. E eles não são realmente um assustador como eles parecem para lá, na verdade, muito, muito, muito agradável e simples. Vamos falar sobre destruição e funções aerodinâmicas e coisas assim. Então vamos começar a adicionar e remover classes dinamicamente com JavaScript que toda a sua página possa realmente ser muito, muito dinâmica. E você pode fazer com que pareça muito dinâmico adicionando classes CSS inteiras a um elemento ou removendo-as de um elemento. Então você pode deixar CSS fazer coisas como transições e animações, o que é muito bom, porque basicamente, estaríamos descarregando nossa animação javascript geral. Então um monte de matemática nós teríamos que descobrir para apenas deixar o mecanismo CSS fazer o que ele faz. E então, finalmente, vamos ter um projeto final onde bem, eu realmente vou te dizer o que você vai ter que chegar lá e descobrir. Mas ele vai usar um monte de componentes diferentes de coisas que já aprendemos sobre. Então, uma vez que você está pronto para ir, vamos para a próxima seção e saltar para o modelo. Liberais objeto liberais de estruturação de funções aerodinâmicas e muito mais. 50. Literais de templates: Certo, vamos dar uma olhada nessa coisa chamada temporária. Tarde, literal, então modelo, literal. É uma maneira mais agradável de gato variáveis Nate com suas cordas e basicamente colocar lado colocar variáveis dentro de uma string. E então, se você quiser imprimir uma declaração, por exemplo, por exemplo, nome é igual a Caleb, e você queria dizer registro de pontos do conselho. Oi, meu nome é. Em seguida, você fecha sua string em um sinal de mais e, em seguida, sua variável. E se houver mais em um sinal de mais, eu só toco mais coisas aqui. Feche a cadeia de sinal de adição em uma variável e assim por diante e assim por diante. E assim tem uma frase terrível. Oi, meu nome é Caleb Moore. Encha seu Caleb. E assim é assim que temos feito a concatenação de strings até agora. Na verdade, é uma maneira muito melhor em JavaScript relativamente mais recente. Você pode fazer essa coisa chamada um template literal, e em vez de ter que escrever essa sintaxe grosseira, que assim que você começa a escrever como HTML e outras coisas nele, ele fica muito, muito nojento. O que poderíamos fazer em vez disso é dizer que o registro de pontos do conselho usou carrapatos traseiros. Observe que isso não é um apóstrofo. Isto não é uma citação. É um carrapato traseiro. E então você pode dizer oi. Meu nome é cifrão abrindo e fechando Curly Brace. E então você coloca o nome da variável lá assim. E isso não parece muito mais limpo? Porque isso literalmente só diz oi, meu nome é Oh, a propósito, esta é variável vindo de fora desta string. Meu nome é Caleb Bam assim. E isso é tudo o que realmente há para um modelo, literal. Agora a sintaxe por trás dele parece um pouco engraçada. Então vamos em frente e criar mais um exemplo Aqui, vamos criar uma frase. Uma frase constante porque não vamos nos mudar. Vamos usar um modelo literal, e ele vai dizer olá. Meu nome é novamente signo de dólar abrindo e fechando cinta Curly. Então você coloca seu nome de variável dentro de lá. O nome da variável vem daqui de cima. Bem-vindo ao meu curso sobre JavaScript. E então ele só tem aquele tiquetaque de fechamento e uma abertura de volta. Então não é apóstrofos não é aspas. É um tique-taque para trás. Vá em frente, bata o botão enter. Vai dizer causa indefinida Tudo o que fizemos foi definir uma variável aqui ou uma constante melhor, e vamos em frente e digitar frase e voilá, ele diz. Meu nome é Caleb. Bem-vindo ao meu curso em JavaScript e apenas por diversão, Z vamos em frente e dar uma olhada no tipo de frase. Ele ainda é uma string, e assim que é uma maneira mais agradável de inventar em variáveis ating em uma string para qualquer forma de saída. É muito, muito legal, mas eu gostaria que você fizesse um minuto rápido e tentasse escrever um desses mentores, certo? Ah, constante com uma variável. Talvez seja o seu nome. Talvez seja a sua idade. Talvez seja o número de animais de estimação que você tem e apenas jogá-lo em uma string literal modelo. Uma vez que você tem isso planejado, vamos para o próximo vídeo 51. Literais de objetos: Olá e bem-vindo. De volta ao último vídeo, aprendemos sobre um modelo literal. Neste vídeo, vamos aprender sobre uma coisa chamada um objeto literal. E assim este é um pouco mais complicado do que um modelo, literal e complicado. verdade, Na verdade,reduz a quantidade de código que temos que escrever, o que é muito bom. Então vamos em frente e criar um novo objeto aqui, apenas um objeto normal. Então digamos, CONST. A pessoa é igual a e então eu vou colocar meu nome aqui e meu nome vai ser Caleb , e então eu posso acessar isso com o nome da pessoa ponto. Então esse é um objeto normal. E se eu quisesse definir uma função aqui ou um método, como é chamado? Vamos fazer Caleb falar, e vai ser apenas uma função chamada Falar, e vai apenas gravar algo no console. Diário do console, eu digo lobo. Costumava dizer para eu sair. Agora eu digo lobo, e isso é acessível através da fala. Vamos em frente e salvar isso. E diz: “ Lobo”. Ok, bem, que objeto Literal está dizendo? Você não precisa disso porque esse nome e esse nome são exatamente os mesmos. Vá em frente e corte essas coisas aqui, e assim você só verá acima. É uma vírgula porque há um par de valores de chave lá e em vez de dizer que falar é igual a falar, estamos apenas dizendo , Ei, há uma função aqui. Chama-se “Falar”. Apenas vá em frente e salve isso e atualize. Ele também funciona, e isso é o que um objeto literal faz. É um atalho em um objeto. Então, se eu criei mais um aqui, mas desta vez eu quero fazê-lo com uma propriedade ou variável dentro de um objeto. Só vou usar uma palavra aleatória. Aqui está então vamos criar outra constante aqui. Chama-se Computador, e vai ser apenas uma string chamada Computador. Bem, agora, o que nós teríamos que didio é computador igual a computador ou isso. Essencialmente, é a mesma coisa. Mas como estes são os mesmos valores, vamos em frente, corte isso. E então, em vez de basicamente ter parênteses aqui dizendo Javascript, Ei, esta é na verdade uma função estavam dizendo, Ei , computador, a chave e o valor são exatamente os mesmos. Vamos em frente e consola. Registre isto. Vamos computador. Isso é para o Cônsul Dot Log. E lá está o computador. E agora não estamos escrevendo no caminho mais longo. Já não temos de escrever. Computador é igual a computador ou a maneira que teríamos originalmente escrito. Computador. Não temos de o fazer assim. Agora podemos fazê-lo desta forma, que é muito, muito bom. E então isso é tudo um objeto, Literal está dizendo que sua chave é o mesmo que seu valor ou quando se trata de um método, você está dizendo que a chave para o método também é o nome da função. E então é só um atalho. Escrever menos código torna a vida um pouco mais fácil. Se você se sentir picante, vá em frente e dê uma chance. Não se esqueça. Se você tiver dúvidas sobre como isso funciona, você pode deixá-las para baixo. Seja baixo. Estou aqui para ajudar. Caso contrário, quando estiver confiante, vamos para o próximo vídeo 52. Arrancamento , objetos e todos o resto: Olá. Vamos falar sobre essa ideia de estruturação. Agora. Antes mesmo de entrarmos nisso, vou dizer a vocês que há duas maneiras de basicamente extrair dados de uma matriz ou objeto. E então eu acho que a melhor maneira de realmente aprender isso é apenas fazendo isso. Então eu vou reduzir um pouco do espaçamento aqui e aquele lado, porque isso estava ficando um pouco grande. E então, se temos uma matriz, então vamos criar uma variável regular. É chamado de Are abreviação de matriz, e tem nomes aqui. Então tem Caleb, Nathan e Zephyr. Agora, se eu quisesse levar Caleb O para isso, eu teria que dizer que isso é uma constante. Caleb é igual a um RR zero e Const. Nathan é igual a R R 1. Poderíamos fazer um loop através disso e tentar atribuir isso, mas basicamente estamos apenas atribuindo-o de volta a outra variável na forma de um array ou um objeto. E assim, você sabe, se você tem, por exemplo, um array que tem 100 nomes nele, você não quer fazer isso 100 vezes. Isso é muito doloroso. E então o que podemos fazer em vez disso, é essa ideia de estruturação. E realmente tudo o que estamos dizendo é, Ei, nós queremos agarrá-los e jogá-los em suas próprias variáveis. Então vamos em frente e d estruturar esta matriz. Vamos em frente e criar. Vamos usar um let e isso vai parecer uma lista, mas no lado errado de uma variável. Então, isto é do lado esquerdo. Em vez do lado direito dos sinais de igualdade, vai parecer algo parecido com isso, o que parece um pouco bizarro, mas vamos quebrar isso. Então primeiro queremos obter Caleb, Nathan e Zephyr, e em vez de e bem aqui, vamos colocar a variável array. Vamos continuar e salvar esta atualização Nossa página parece que nada aconteceu, mas está tudo aqui agora, De repente, essas variáveis reais do ar que podem ser acessadas em seu aplicativo. Agora, este não é realmente um exemplo muito útil para ser totalmente honesto. Ok, então vamos criar um novo exemplo aqui. Algo mais útil. Vou pedir o meu nome. Prompt. Qual é o seu nome completo? E assim sabemos que isso vai retornar uma string. Então isso vai ser uma corda. Sabemos que o meu nome vai ser o transporte baseado no Caleb, e podemos dividi-lo aqui. E então nós poderíamos fazer var ou melhor, vamos primeiro nome sobrenome é igual ao nome completo ponto dividido em cada espaço. Agora há algumas falhas lógicas nisso porque e se alguém colocar vários espaços aqui ? Sim, isso vai quebrar o roteiro. No entanto, neste exemplo , não vai. Então, idealmente, quando você está trabalhando em produção ou em JavaScript mais profissional, você terá maneiras de mitigar esse problema específico em que alguém coloca em vários espaços. Talvez você tenha reduzido vários espaços em um só espaço. Vamos em frente. Registradores de console conselho ponto log Primeiro nome é o primeiro nome e sobrenome é o sobrenome . Vamos em frente, Refresh. Qual é o meu nome completo? O Caleb. Alto magro. É sobre o meu próprio nome. Eles estão errados. Caleb é o primeiro nome. Chamar é o sobrenome. E isso é estruturar de uma maneira melhor. Sem a estruturação d, teríamos que fazer isso de uma maneira diferente, então vamos em frente e comentar isso. O que teríamos que fazer era o nome completo é igual ao nome completo dot split. Então temos que dividi-lo de qualquer maneira. E então poderíamos fazer var let ou const. Vamos fazer contras, porque o meu nome não vai mudar. O primeiro nome é igual a um nome completo, e é o índice zero no 1º 1 na matriz e o sobrenome. E quando eu atualizar a página, nos dê uma chance. Não vamos usar o meu nome. Vamos usar o John Smith. John é o primeiro nome Smith, seu sobrenome, então ainda funciona. Mas desta forma nós tivemos que realmente escrever mais linhas de código nós tínhamos direito mais três linhas de código, ou, eu acho, mais duas linhas de código. Em vez de escrever apenas uma linha de código. Vai comentar isso. Mantenha isso aqui e você pode fazer referência a este código a qualquer momento. Então isso é D estruturando uma matriz. Há realmente muito mais para isso, no entanto, isso é apenas de estruturação regular. Eu vou comentar essas coisas porque eu não quero que isso corra agora. E se tivermos? Vamos voltar ao nosso primeiro exemplo aqui. E se tivermos mais do que esses nomes, mas só queremos o 1º 3 por qualquer motivo. Então eu quero pegar Caleb, Nathan e Zephyr. Mas e se houver também Prairie Henry Veto e Maya? Se fizermos isto, o que vai acontecer? E eu sempre convido as pessoas a tentar coisas que você não é Você não vai quebrar nada executando javascript localmente em seu computador. Tudo bem testar as coisas, então se quebrar, tudo bem. Vamos em frente e bater. Refresque. Certo, temos o Caleb. Temos o Nathan. Temos Zephyr. Provavelmente não temos pradaria. Não. Não temos o Henry. Não põe o outro veto. Maya, estes são todos ares de referência. Essas variáveis ainda não existem , e se quiséssemos pegar o resto delas? Bem, em JavaScript, há uma coisa chamada descanso. E então, em vez disso, o que podemos dizer é para eu realmente copiar isso porque eu não quero falar sobre tudo isso de novo. Então vamos estruturar Caleb, Nathan e Zephyr. Esses são apenas os 3 primeiros, eles não têm que ser o mesmo nome que poderia ser qualquer outra coisa. E em JavaScript olhar para esta coisa onde temos este ponto extravagante, ponto ponto de descanso, e então vamos em frente e Cônsul, não registre o que quer que seja o resto. Vamos em frente e refresque-se. Registo da consola. Temos Prairie Henry Veto e Maya que são todos os outros que estão aqui. Agora, isso é chamado de prisão. Você não precisa usar o resto do nome. Pode ser qualquer outra coisa. Ela é significada pelo ponto, ponto notação, ponto Hurley, ponto , sintaxe ponto. Digamos que todos aprovaram isso. Não precisamos chamar de descanso e voilá, funciona exatamente como esperávamos. Tudo bem, eu vou falar isso, e nós temos mais um. Nós também podemos d objetos estruturados. Então vamos em frente e criar um novo objeto. A pessoa do objeto vai ser. Vai ser mau porque as razões que eu acho que sim. O nome vai ser Caleb da minha idade. O que vai ser 30 e o número de gatos que eu tenho vai ser, também. E a minha comida favorita vai ser pizza Então novamente nós temos o mesmo problema onde se eu quisesse apenas pegar meu nome e armazenar isso em uma variável, eu teria que escrever. O nome constante é igual ao nome do ponto da pessoa. O Const. Idade é igual a pessoa dot idade Const. Katz é igual a gatos pessoa ponto. Acho que você entendeu a ideia aqui. Enfraquecer a estrutura disso e então vamos em frente e jogar tudo isso dentro Vamos fazer isso, deixe aqui. Acho que sim. Então. Vamos fazer isso. Vamos e não estamos trabalhando com uma matriz, então não vamos usar a corrida A e os impostos. Nós vamos usar a sintaxe do objeto, e ele vai se parecer com isso, basicamente, é o sinal do objeto no sinal do objeto direito à esquerda à direita. Nós podemos realmente nos substituir com a variável objeto real em si. Então isso é como dizer que tudo isso está aqui. E então digamos que eu só queria saber o nome e a comida que eu poderia fazer. Nome e conselho alimentar ponto log nome é nome e comida é comida. Vamos em frente. Dê uma chance a isso. O nome é Caleb. Comida é pizza. Este não tinha que ir em ordem. Ele fez. Com a matriz quando d estruturado uma matriz, mas com um objeto porque tudo é chamado sempre teve é hey, obter o nome. Então essa é a chave aqui. Também pegue a chave chamada comida Todos os outros agora nós não nos importamos, mas vamos dar um passo adiante. Podemos realmente ficar um pouco mais complicados com isso porque e se esse nome da chave for algo obscuro como o primeiro nome para o usuário? Por que isso aconteceria? Não sei, mas ocasionalmente coisas como esta acontecem. E então você teria que colocar esse nome lá. Isso é simplesmente terrível. E assim, mas certifique-se de que isto funcione. Vamos poupar fresco grátis. E aí está ele. Meu nome é Caleb, mas agora você tem essa variável grosseira chamada primeiro nome para o usuário. O que podemos fazer é reatribuir isso e porque basicamente, estamos criando objeto à esquerda aqui e reatribuindo a chave para um nome de variável que era um pouco confuso. Podemos basicamente dizer Ei, esta é a chave que queremos extrair. E qual é o nome da variável que queremos usar. Vamos chamá-lo primeiro nome e podemos, se isso faz mais sentido para você, coloque isso em várias linhas também. Vamos em frente. Mas há em várias linhas e isso parece um pouco mais limpo, especialmente com a minha diversão sendo tão grande. Mas isso está basicamente dizendo, Ei, pegue essa chave e então nós vamos re-atribuí-la à variável chamada primeiro nome. Vá em frente, salve e atualize. E com certeza, ainda funciona. E só para ter certeza que funciona. Definitivamente não. O Caleb. Lá está ele. O nome não é Caleb. Portanto, sabemos que isso está funcionando e tão reatribuído. Tudo o que você tem que fazer é dizer comida. Ponha um cólon aí dentro. Então, é a sua chave. Então é realmente fazer isso vai ser sua chave. E então, qualquer que seja o seu novo nome VAR, neste caso, vamos dizer que a comida vai ser remapeada para a comida favorita. E agora isso é um pouco mais detalhado no resto da nossa aplicação. Então poderíamos dizer comida favorita. Lá está ele. Poderíamos até ir tão longe quanto definir propriedades que ainda não existem, então eu vou desfazer um pouco disso. Apenas mantenha isso bonito e arrumado. Ok, então eu só desfiz um monte de códigos desse tipo. Parece bom e limpo ainda. E se houvesse uma propriedade aqui que eu procurasse? Isso não existe. Então, digamos que por qualquer motivo, eu deveria ter uma cor favorita. E digamos que essa cor é supostamente azul. Mas por qualquer motivo, essa pessoa objeto não tem isso enquanto o que temos dizendo aqui é cor e então podemos dizer é igual a azul. E quando eu faço essa comida favorita é isso muda para a cor da fé, e lá está. A cor favorita é azul, e agora estamos realmente definindo o valor padrão. Mas o que acontece se isso estiver em seu Isso já existe? Mudamos para ler. Você acha que isso vai ficar azul porque estamos assinando cores iguais a azul? Ou você acha que isso vai tentar agarrar isso? E se não existir, use a cor azul. Vamos em frente e experimentar e descobrir e, novamente, eu sempre recomendo apenas testar as coisas. Pode ser divertido. Apenas um teste para ver como eles funcionam nos bastidores. Ok, então eu apertei Refresh, e a cor favorita dele é vermelho. Apesar deste dizer azul, é porque ele realmente existe no objeto pessoa. Isso é apenas definir um valor padrão, como quando estávamos escrevendo uma função com um valor padrão para um parâmetro. Isso é exatamente o mesmo que estamos fazendo aqui agora o que eu vou deixar você fazer sozinho como um pequeno experimento aqui é que eu quero que você crie um objeto como este, e então eu quero que você estruture esse objeto. Mas o que eu quero que você faça é usar a prisão, e eu quero que você descubra o que está armazenado neste resto. Você pode precisar adicionar novas propriedades aqui para ter certeza de que este resto realmente mostra algo adicional. Ou talvez não. Depende de como você escreve. Mas eu seduzo você a dar uma chance nisso. Só mexa com ele e divirta-se um pouco. Veja o que este resto faz o ponto de log do console Rest. Então, no final do conselho, eu não registro descanso e vejo o que isso retorna, então vá em frente, dê uma chance. Se você não entende tudo neste vídeo, adivinha? Isso está totalmente bem. Não era esperado que você soubesse todas as coisas de todos os vídeos avançando permanentemente . A codificação não funciona assim. Aprenda o máximo que puder. E quando você está se sentindo um pouco cansado ou conselho de estruturação e passar para a próxima , a próxima lição. E se você alguma vez ver de estruturação fora na natureza, talvez você esteja lendo algum código-fonte e você vai como, como é, ele diz, Vamos encaracolado Nome. Cor da comida. Brace Curly é igual a algum objeto. Ou talvez você esteja vendo uma matriz estruturada em D. De qualquer forma, você vai estar preparado para qualquer código que vai ser jogado em você. 53. Tempo: Olá, End. Bem-vinda de volta. Vamos dar uma olhada nessa coisa nova chamada “tempo limite”. Então, no mundo do JavaScript, podemos realmente dizer a algum código para não ser executado por um certo período de tempo. E isso é chamado de tempo livre. Então vamos dar uma olhada na sintaxe por trás de um tempo limite. Usamos essa palavra-chave chamada Set Time out. Não é realmente uma palavra-chave como um nome de função definido tempo limite, e então poderíamos passá-lo uma função se quiséssemos. E esta é a nossa chamada de volta. E então nosso segundo parâmetro será simplesmente. Quanto tempo devemos expirar em milissegundos? Então 1000 milissegundos é igual a um segundo até escrevermos isso em milissegundos. Além disso, nós também poderíamos apenas dizer função callback, qualquer que seja essa função vai ser chamada. Então isso pareceria uma função, algo assim. E então isso é realmente tudo um tempo definido. Parece que ele vai executar uma função específica, e ele vai esperar 1000 milissegundos, ou 5000 milissegundos , ou 42 milissegundos antes de realmente ser executado. Então vamos dar uma olhada no que isso realmente parece dizer para definir o tempo limite. Estabeleça o tempo. Isso é uma função aqui? E nós estamos indo para o Conselho Dot log tempo limite e nós vamos esperar três segundos. Lembrem-se, são milissegundos. Então este é o equivalente a três segundos, e eu vou atualizar minha página aqui. Você pode realmente me ver fazer isso, e então vamos contar juntos, e aí está. Demorou três segundos. Isso é um pouco mais difícil de detectar. Então, o que podemos fazer em vez disso é atualizar nossa página, e então podemos mudar como a cor de fundo da página. Vamos fazer o corpo de const. Lembrem-se, const vai ser marcado para este bloco em particular aqui. Então corpo vai ser documentos selector de consulta ponto, corpo e, em seguida, corpo ponto estilo que cor de fundo é igual a azul. Isso também está mudando. Colorido para branco, apenas a cor do texto. Vamos em frente. Dê uma atualização e estamos esperando, cara. Lá está ele. E depois de três segundos, certeza, a página mudou. Agora, o que acontece quando colocamos um registro de console aqui? Registo da consola, primeiro registo da consola. E colocamos um aqui em baixo. Este é o terceiro log do console. E vamos apenas para a posteridade. Digamos que este é o segundo registro do console. Então, porque ele está cumprindo uma pena aqui, nós achamos que isso vai comandar isso? Esperar três segundos, depois executar isto e depois executar esta linha? Ou será que achamos que isso vai funcionar? Diga, sim, há um tempo aqui fora. Execute o terceiro log do console e, em seguida, três segundos depois que ele chegar a esta linha particular aqui , ele vai executar isso. O que você acha que vai acontecer? Vamos em frente. Salvando atualização e descubra o 1º 3º e o segundo registro do console da lança. E então esta é uma introdução leve ao mundo do código assíncrono. O que isso significa é que o seu computador vai ler este código de cima para baixo. Também vai ler esta linha . Sim. Ok, eu posso executar isso. Ele vai ler esta linha e dizer, Oh, este é um tempo fora de três segundos. Eu entendo que eu vou registrar isso, então eu vou colocar isso no fundo da minha mente, e eu vou seguir em frente. Mas a partir do milissegundo absoluto ou microssegundo que o seu computador atinge esta linha bem aqui. Vai começar a contar até três. Vai de um a três. E enquanto ele está fazendo isso em segundo plano, ele já é executado que provavelmente um monte de outro código e, em seguida, caminho para baixo depois de um monte de outro código já foi executado. Ele vai executar essa função de tempo limite definido, então ele vai executá-lo aqui em baixo. E então isso é uma introdução leve no tempo limite definido e código assíncrono. 54. Intervalos: no mundo do Javascript. Há essa idéia de que você pode executar código uma e outra e outra e outra vez até que ele é dito para parar de executar. E isso é um intervalo. E assim como definir um tempo limite, dissemos um intervalo muito da mesma maneira. Então usaríamos um intervalo definido. Ele leva uma função como uma espécie de função de retorno de chamada e, em seguida, um tempo como um segundo parâmetro . E então digamos que para cada segundo isso é novamente milissegundos como no tempo limite definido. Este é um segundo. Então vamos nos usar em milissegundos e só queremos consolar o log de pontos. Eu estou correndo. E quando atualizarmos nossa página, veremos que isso funciona a cada segundo uma e outra e outra vez. Podemos realmente ver que isso está contando aqui. Cada segundo vai continuar correndo repetidamente, e não está fazendo nada de útil, mas na natureza. Quando você está escrevendo código riel, você pode realmente querer executar uma solicitação Ajax para algum servidor a cada segundo para ver se os usuários ah registrar jantar para manter um cookie vivo ou talvez enviar dados do navegador de volta para um serviço. Há muitos usos para isso. Há também um bom caso de uso para se livrar disso. Então o que podemos fazer é colocar isso em uma variável então deve criar uma variável regular aqui. Vamos chamá-lo. É um mais longo e, portanto, ele vai apenas registrar, e quando eu atualizar a página, ele ainda vai ser executado. Ele está em uma variável, mas esta função, esta função de intervalo definido realmente é executado e ele é armazenado nesta variável. Agora vamos dizer que queríamos nos livrar disso bem, como um exemplo melhor. Vamos fazer isso direito no Cônsul. Nós vamos fazer intervalo claro, e nós apenas dar-lhe o nome da variável mais longo e você pode vê-lo parado no número 22. O número 22 não é importante. Aconteceu de ser que eu parei quando estava contando com o número 22. E então vamos em frente e criar um tempo limite com um intervalo. Vamos fazer o tempo definido. Vamos colocar uma função aqui, e vamos limpar esse intervalo claro intervalo de cerveja. E este tempo vai acontecer depois de cinco segundos. E então isso vai ser executado presumivelmente cinco vezes, e depois de cinco segundos ele vai parar de correr. Vamos atualizar e esperar até três, quatro, quatro, cinco. Não sei. Olhe para isso. Não chegou aos cinco agora, não é? Agora isso se resume ao tempo de processamento de seus computadores. E se fizéssemos 5,5 segundos? Vamos ver o que acontece aqui. Então ele vai para dois e depois três e depois quatro. E aí está ele. Cinco. E então tudo o que tínhamos que fazer lá foi realmente aumentar esse número apenas um pouco, apenas para ter certeza de que isso sempre funciona cinco vezes. Há definitivamente uma maneira melhor de fazer isso, mas isso é apenas uma maneira de misturar e combinar. Um intervalo definido, e ele definiu o tempo juntos 55. APis e Ajax usando Fetch: Ok, vamos dar uma olhada em um pedido Ajax usando a busca A p I Agora isso está ficando muito JavaScript e honestamente, isso não é super iniciante amigável, mas eu vou colocar isso lá fora de qualquer maneira porque é realmente muito importante quando se trata de fazer aplicativos de página única, por exemplo. Você sabe, quando você está no Facebook ponto com e você clica em um link e a página não pisca, apenas certas seções realmente atualizam isso está usando a busca de um p I. Então isso é basicamente criar um pedido Ajax dizendo: quando você está no Facebook ponto com e você clica em um link e a página não pisca, apenas certas seções realmente atualizam isso está usando a busca de um p I. Então isso é basicamente criar um pedido Ajax dizendo: servidor facebook dot com ou app dot facebook dot com Seja lá o que for, eu quero um monte de dados de volta, e então eu vou renderizar o que quer que esses dados estão usando JavaScript vai escrever meu próprio HTML e então eu vou atualizar a página apenas em esta seção específica Então você não precisa fazer uma solicitação http completa e limpar o banco de dados para informações do usuário e coisas assim . Só vai atualizar uma pequena seção do site. Isso é basicamente o que o Getch faz. E então vamos precisar de um A P I para isso. Então vamos fazer a Guerra das Estrelas. Um P I pantanoso bom velho, pantanoso e vamos em frente e ah, vamos pegar o AP pantanoso que ouvi. Na verdade, acho que está aqui em baixo. Sim, esta é a ligação que queremos. Então ele vai nos dizer aqui que é pantanoso. Ponto ponto c o barra ap I cortar pessoas um ou planetas três ou nave estelar nove ir com as pessoas. Um. Quem é esse Luke Skywalker? Claro que sim. Claro que é o Luke. E se quisermos pegar esse Jason Data? Como é que vamos fazer isto funcionar? Bem, o que podemos fazer é certo. Uma busca. E então vamos em frente e escrever um pouco de atração aqui. Poderíamos simplesmente usar a palavra fábrica, dar a você ou a mim, que era para fazer isso. Vocês estão todos aqui, e parece que está feito, mas na verdade não está. Então vamos usar a palavra-chave then, então basicamente, isso vai executar a solicitação Ajax. Existem outras configurações lá que você pode adicionar se você não quiser fazer um pedido de get regular , você pode fazer um post, solicitar um monte de outras coisas lá também. Não vamos rever todas essas rubricas. Então o próximo passo é usar ponto, então tudo o que fiz aqui foi colocá-lo em uma nova linha. Então é o mesmo que isso. Ele só parece um pouco mais legível desta forma função, qualquer que seja a resposta que vai ser. E eu vou retornar o ponto de resposta Jason. Então eu só estou para ter certeza que o que está voltando disso você Earl no nome da variável chamado resposta, eu vou então j sahn Se eu me certificar que não é Jason Format, você sabe, se você nunca olhou para Jason antes, ele se parece muito com um objeto JavaScript. Na verdade, é quase idêntico a um objeto javascript. Você tem sua chave de abertura encaracolado. Você tem um par de valores de chave, vírgula, par de valor de chave, vírgula, par de valor de chave. Concedido, estes provavelmente não podem ser cordas. Estes podem ser apenas números, mas podemos deixar como uma corda por enquanto. Então o que isso está fazendo é dizer Ei, espere que isso aconteça. E então quando isso acabar acontecendo, quando tivermos uma resposta nesta função em particular, vá em frente e transforme isso em Jason. Certifica-te que é o Jason, e sabemos que é o Jason, porque este é o Jason Format Hoops. Eu clico em um link lá. Sabemos que é o Jason porque isto é a formatação do Jason, e depois vamos escrever mais um aqui e depois funcionar. E podemos fazer o que quisermos com essa resposta. Realmente? Então nós colocamos nosso s e aqui para uma resposta, era apenas log console são sim. Vamos voltar para nossa página e clicar em Atualizar e você não pode ver que ele fez todas essas coisas diferentes . Mas isso criou um objeto para nós aqui. E assim temos o nosso ano de nascimento. Nós fomos criados, editou a temporada de cinema com o U R.L é que nós poderíamos então ir em hit É uma lista para que nós poderíamos ir e looped através de todos eles se quiséssemos. Gênero, cor de cabelo , mundo natal, todas essas coisas podemos ir e obter todas essas informações se quisermos também. Agora, esta é uma maneira muito simples de criar uma solicitação Ajax com JavaScript baunilha usando o fetch a p I novamente apenas toe tipo de mostrar como isso funciona. Use a palavra “buscar”. Parece que uma função tem parênteses. É preciso um parâmetro aqui. Essa é a sua UL. Existem configurações adicionais lá que você pode definir. Vou deixar isso com você se quiser ir e explorar isso agora ou talvez explorar isso em algum momento posterior da sua carreira. Assim que terminarmos de esperar que isto volte, dizemos: “ Ok, uma vez feito, então vá e faça isso. E nós dissemos, OK, bem, qualquer que seja essa resposta, nós queríamos ter certeza que é Jason não tem necessariamente que ser Jason. Talvez seja XML. Talvez você tenha que analisar algum XML, fazer outra coisa com um P I. E então, quando isso for feito, seja lá o que for retornado será essa variável aqui. Então eu chamei de “rez”. Um curto para resposta. Você vê o nosso ES um pouco. Ocasionalmente você verá algumas pessoas apenas dizer o nosso Isso também é abreviação de rez, que é abreviação de resposta. Então nós mudamos estes juntos e dizemos: “ Ei, Ei, uma vez que isso é feito, você esta e apenas conta registrá-lo. Agora podemos agrupar um monte de outras coisas que aprendemos, como o escopo e dizer: “ Ei, Ei, vamos em frente e pegar Luke Skywalker para que Luke constante seja igual a apenas um objeto vazio. E então poderíamos dizer que Luke é igual a qualquer que seja essa resposta Conselho ponto log Luke. E assim como em seu conjunto, intervalo menos. E vamos ver o que acontece aqui quando fazemos o registro do consulado antes do Cônsul Dot Log depois. E onde você acha que isso vai correr? Poderíamos até fazer um registro de console aqui Conselho ponto log, depois número um log de console, depois número dois. E assim, como humanos, lemos isso também. Este vai ser o primeiro 1, depois um, depois dois e depois. Mas é assim que funciona? Vamos em frente e atualizar a página que recebemos antes depois de um, depois dois, e então temos uma atribuição inválida para const. Porque olhe para isso. Eu disse uma constante para ser um objeto vazio. O que isto deveria ter sido uma licença. Ok, aqui, você isso funciona melhor. Então nós temos antes depois de um, dois e então todas as informações de Luke Skywalker antes, depois disso estava esperando uma resposta de outro site. Então, talvez a sensação de tomar um segundo ou cinco segundos ou 30 segundos então vai processá-lo , processá-lo uma segunda vez e, em seguida, log do console. O Luke. Agora, o que tudo isso significa? Este é basicamente o seu buscar um p I usando promessas JavaScript. E a coisa boa sobre isso é que você pode realmente dividir isso em função um. E então você poderia dividir isso em uma função para se você quisesse, e isso parece muito mais limpo. Faça isso e mantenha isso do jeito que era, embora agora o problema com o que escrevemos aqui é se você viu isso, nós deixamos Luke é igual a Justin objeto vazio, e nós estamos configurando. Luke é igual a qualquer que seja a resposta de Jason, mas como isso funciona, isso tem um tempo de espera. Então é assíncrono. Então ele está fazendo algo em segundo plano, e então isso é executado imediatamente após este. Pelo menos parece que sim. Não temos acesso para olhar ainda, então o conselho não registre Luke e vamos em frente e dizer Luke, para que possamos identificar o registro do conselho. Tínhamos um objeto vazio. Isso é porque foi o que montamos aqui. Dissemos que era um objeto vazio e Onley depois de um tempo. Conseguimos mesmo a resposta de volta e dissemos: “ Ei, Ei, anule? Tudo bem, então eu só limpei isso. Acho que devemos fazer mais uma coisa aqui. Então vamos voltar ao nosso objeto que pegamos do ponto pantanoso c o a p i e vamos pegar os filmes. Então esta é uma lista que podemos ver. É uma lista porque tem os suportes duros aqui. Luke Skywalker não é cinco filmes, então 1234 e cinco Você também pode ver que há um comprimento de cinco lá. Vamos em frente e estruturar isso e vamos apenas pegar os 3 primeiros filmes para que saibamos que isso é um array, mas está dentro de um objeto. Então, como é que conseguimos filmes? Bem, filmes vêm de um objeto chamado Bem, nós o chamamos de Luke para que pudéssemos fazer olhamos filmes e isso seria uma matriz. Agora sabemos que essa é a matriz enfraquecer agora D estrutura que os dados. Então podemos dizer, Const, que você é um. Vocês também eram, e vocês são os três. Não sabemos necessariamente o que são. Sabemos que estamos trabalhando com um array, então precisamos usar a sintaxe do tipo de taxa. Vamos também prender aqui outros filmes, então não vamos chamar de ajuda 12 e 3. Vamos fazer este filme 12 e 3 é igual a filmes de Luke Dot. Agora isso não vai fazer nada porque nós não estamos usando filme 123 ou filmes e também Constance Block escopo para isso então nós realmente não podemos usá-lo para além desta função particular. Mas poderíamos dizer qual é o segundo filme de registro do console de filmes para o que quer que seja . E aqui está. Esse é o filme. Então vamos em frente e copiar o local do link. Isto foi filmado número seis e identidade. Seria, uh, uh, nós estamos olhando para Luke Skywalker aqui filmes a fim de 6317 263 um em sete. Então filme para teve uma idéia de seis e podemos ver que bem aqui que foi filme para. Fizemos isso com um raio de estruturação, e isso nos trouxe a isso. E então poderíamos fazer um pedido de busca sobre isso se quiséssemos também, outra coisa que poderíamos fazer é vamos ah, vamos comentar isso porque isso é meio legal, mas não útil. Vou mudar isso também. Poderíamos percorrer cada filme e obter cada um deles para que pudéssemos diar luke dot filmes ponto para cada passagem de uma função. Este vai ser o URL e, em seguida, o índice conselho ponto log o índice e, em seguida , o conde , isso não vai ser em qualquer ordem particular vai ser qualquer que este um p I retorna de volta um aumento, manter a ordem deles. Então isso vai dizer para 6317 Vamos em frente, salvar atualização. E então agora temos 26317 na mesma ordem que a troca edotco nos deu. Mas no nosso ciclo, temos o índice de zero a quatro em ordem. Agora, se você realmente queria ficar chique com isso, o que você poderia fazer é você poderia pegar isso para cada um e você poderia buscar cada filme aqui e obter esses dados bem e assim por diante e assim por diante e assim por diante. E enquanto você faz isso, você estava realmente construindo sua própria forma de um aplicativo de página única. Basicamente, você está usando um A P I para pegar dados. Agora, este é um conceito bastante complexo em JavaScript. Eu não espero que você saiba disso imediatamente. Eu não espero que você saiba disso por um bom tempo. Mas é bom saber que esta opção está lá fora. Você vai ver isso um pouco, especialmente avançando nos próximos anos. Fetch está em todo lugar. É uma ótima maneira de usar pedidos Ajax e apenas para posteridade. Vamos nos certificar de que sabemos o que é Ajax. Ajax é uma estrada de pia, este javascript e XML, ou neste caso, é Jason. Então um juiz, eu acho. Idade J A. J Originalmente, foi projetado para XML. Então lá você lição rápida sobre Ajax e buscar e promessas. Usamos de estruturação. Usamos um para cada loop. Agora estamos recebendo super javascript e com um P I. Isso é super legal de novo. Eu não espero que você saiba de tudo isso, então não sinta que você deve ser esmagado por todos nós. Sinta-se livre para dar uma chance a isso para mexer com ele? Absolutamente Mas sabes que mais? Se não clicar no seu cérebro imediatamente, tudo bem. Eventualmente irá. Uma vez que você está satisfeito com isso, vamos em frente e assistir o próximo vídeo. 56. Funções de seta: em JavaScript moderno. Há essa idéia de uma função de seta e realmente, o que isso é é um tipo especial de função. Isto é relativamente novo e é um pouco diferente dos outros tipos de funções que aprendemos neste curso. Assim, apenas como uma pequena recapitulação rápida, uma função regular tem uma função de palavra-chave e, em seguida, algum nome, e, em seguida, ou nenhum parâmetro ou vários parâmetros, e então ele retorna, retorna algo, ele retorna uma coisa. Há também funções anônimas, então você pode colocar isso em, como um nome de variável. Então, como Const, Caleb é igual a função. Volte algumas coisas, Caleb. E então nós sempre poderíamos embrulhar estes em e e eu f e e imediatamente invocado função. Então isso vai ser executado automaticamente, e nós poderíamos fazer a mesma coisa aqui. Então essa é uma rápida recapitulação sobre o que já aprendemos sobre funções. Agora, em JavaScript, sempre que você direito para funcionar, assim como quando você tem um objeto, você tem acesso a essa palavra-chave mesma coisa com uma nova classe e um método dentro dela. Então você tem um basicamente um nome funk aqui você tem acesso a esta mesma coisa em um objeto, então CONST Pessoa é igual ao nome funk aqui, nome da função aqui, e você tem acesso a isso. E o que isso realmente significa é que está se referindo a essa função. Isso significa que essa classe, isso significa esse objeto. Então, o que quer que esteja definindo, isso é o que esta palavra-chave significa quando começamos a falar sobre funções aerodinâmicas que não existem mais. Então, quando usamos uma função de seta, a grande diferença entre uma função estreita e função irregular é diferente da sintaxe olhando diferente. Ele também não tem este ponto qualquer nome ou este ponto qualquer função nome não tem que isso não está vinculado. Não, A coisa boa sobre que uma função de seta é, se isso não está ligado à sua função ou o objeto definidor que significa JavaScript mais rápido. Se você não precisar reatribuir variáveis constantemente ou armazenar coisas na memória, então seu computador pode realmente executar mais rápido. Agora não é visivelmente mais rápido para um humano, mas se você tem 10 milhões de linhas de JavaScript, sim, pode ficar um pouco mais rápido, um pouco mais rápido, dependendo da lógica que você está escrevendo. Então vamos dar uma olhada em uma função de seta regular aqui, então vamos apenas cumprimentar. Vamos fazer isso um pouco maior é igual a abrir e fechar parênteses. Então nós temos nossos suportes lá. Seta gorda. É por isso que chamamos de função de seta e, em seguida, chaves. Não, você só diz “olá mundo”. E para executar isso, poderíamos apenas cumprimentar com parênteses. Vamos em frente. Carregue isso no nosso navegador. Estou usando o Firefox. Eu apertei Refresh, e não faz nada. Vamos em frente e executá-lo aqui de qualquer maneira, e ele vai dizer concordado. A razão pela qual isso não faz nada é porque está devolvendo algo. Então, se dissemos Const. Alta é igual a cumprimentar página de atualização, dizer oi e ele também diz olá mundo. Então é como uma função regular. Só parece um pouco diferente neste momento. Então isto está dizendo que esta é a sua função. Nome é igual a uma função de seta, então não há esta palavra-chave que não existe aqui este ponto o que não existe e ele só vai executar isso agora. E se você quisesse um parâmetro no seu poço, se você quisesse um parâmetro aqui, você poderia dizer algo como o nome. Olá. E então vamos em frente e usar um modelo literal. Então, carrapatos para trás. Olá, nome e registro de pontos do console. Oi página Refresher. E diz: 00 é indefinido. Embora seja porque não colocamos um nome lá. Então vamos em frente e colocar meu nome Caleb. Olá, Caleb. Olá, Zephyr. E assim por diante e assim por diante e assim por diante. Também poderíamos colocar outro parâmetro aqui chamado de lugar. Então, uh, bem-vindo e depois lugar e eles não têm que ser nome ou lugar. Podem ser o que quiserem. Vamos colocar um lugar aqui em Atlantis, um lugar onde meus gatos nunca odiariam estar porque é aguado. Mas diz olá, Zephyr. Bem-vindo a Atlantis. E assim é assim que nós iria direito em uma função fileira. Agora, vamos realmente desfazer esse último exemplo aqui. E vamos em frente e nos livrar desses suportes. Se houver apenas um parâmetro aqui, não precisamos de colchetes. É só se tivermos dois ou mais parâmetros que realmente precisamos desses parênteses em seu só temos um, então vamos dizer a função. Greet tem um parâmetro chamado nome, e então ele vai executar o que está dentro dessas chaves e então podemos ir em frente e nos livrar disso. E vamos mudar isso para Henry. E isto só vai dizer olá, Henry. Agora nós podemos realmente obter até Mawr magro com a gente. Não precisamos disso aqui. Se o que você está fazendo é apenas devolver algo imediatamente, nós podemos realmente nos livrar disso completamente. E então isso parece um pouco estranho, mas esta é uma função perde o parâmetro, e isso vai retornar o que está atualmente aqui. Então, quando atualizo minha página, ela ainda funciona. E então, para vários parâmetros novamente, poderíamos colocar lugar aqui. Olá. Não vou dizer nada legal. Lugar interessante. Faça isso um pouco menor. Então função greet tem um parâmetro nome parâmetro lugar vai dizer olá. Seja qual for o nome, seja qual for o lugar. E Henry está no Canadá. E então olá, Henry Canada. E isso é, na maior parte, tudo o que realmente existe para uma função de seta, e isso é realmente o mesmo que dizer função. Greet tem nome em um lugar. Voltar. Bem, certo. Esse é o jeito antigo. Olá, Nome, por favor. Então esta é a maneira mais antiga de escrever uma função com a antiga maneira de contaminar cordas. E esta é a nova forma de o fazer. Você vai ver esses dois métodos em todo o mundo, então é bom estar familiarizado com ambos. Mas isso é realmente tudo o que há para saber sobre a função seta. Isso e este nome de ponto é igual ao nome. E então você poderia fazer o Cônsul, não registrar esse nome se você quisesse. Isso não existe aqui. Não existe essa palavra-chave. Só não está amarrado. Agora vamos dar uma olhada em como isso vai funcionar. Talvez um quatro em cada loop. Vamos comentar isso. Eu realmente tenho que mudar isso. Vamos comentar isso e fazer uma lista de coisas aqui. Então, uh, vamos criar uma matriz. Vamos criar um const A r r. é igual a JavaScript, python PHP. E, em seguida, em V s código, eu só vou digitar para cada Nope para cada guia hit e vai dizer, Qual é a sua primeira matriz quando meu levantar um R Isso é isso aqui e, em seguida, para cada elemento . Esta é uma flecha gorda. Esta é uma função aerodinâmica gorda. Então estamos dizendo que este elemento aqui, o que quer que seja, agora podemos trabalhar com ele. Então vamos mudar de elementos para linguagem, porque ele vai ser JavaScript, python ou PHP. E vamos fazer console, não registrar idioma e atualizar sua página Transcript. Python Patri. Então lá vamos nós. Estamos começando a substituir a função regular por uma função aerodinâmica gorda. Se você não precisa da palavra-chave this, você pode muito bem apenas para usar a função de seta gordura. Tecnicamente, é menos código e também menos carga no seu computador. Vamos em frente e criar um tempo definido usando uma função de seta para definir o tempo limite. Era assim que escrevíamos antes, e vamos dizer “Espere um segundo”. Bem, não precisamos fazer isso agora porque não há parâmetros aqui. O que vamos fazer? Não podemos simplesmente fazer isto. Em vez disso, passamos um conjunto vazio de parâmetros e então dizemos, cônsul dot log yea, eu esperei Jascha Python PHP e então, sim, eu esperei. Vamos tornar isso um pouco mais dramático aqui e isso é spam. O Conselho espera por isso. Eu estou lá. Sim, esperei uma e outra e outra vez e estas são as tuas funções gordas do Errol. Ok, então eu sugiro nos dar uma chance. Você vai escrever uma quantidade razoável de funções aerodinâmicas no futuro se você estiver indo para ser um desenvolvedor de JavaScript e então você pode muito bem se acostumar com isso Agora o bom é, na verdade é muito fácil se acostumar com isso. Uma linha em vez de várias linhas é sempre muito agradável. E como sempre, não se esqueça que estou aqui. Se você tiver dúvidas, deixe suas perguntas, comentários ou preocupações para baixo Boogaloo e eu ficarei feliz em ajudar 57. Como remover cursos de CSS: Vamos agora dar uma olhada em como podemos adicionar e remover classes CSS. Dois elementos em nosso modelo de objeto de documento. Então, na frente e desenvolvimento Web nós dependemos muito desta classe é igual a, e então qualquer classe nomes ar aqui. Então talvez tenhamos um nome de classe aqui de vermelho, azul e branco, azul e branco, eu acho que onde podemos mudar a cor do texto para ler cor do texto para azul cor do texto dedo do pé branco . Como vamos realmente remover estes? Bem, primeiro as coisas, para configurar esta demonstração, vamos ter que criar um estilo CSS. Então o estilo ponto vermelho cor é igual a ler ponto Azul vai ser azul. E não vamos fazer Branco porque vai haver um fundo branco leva em vez de fazer preto. Nenhum negro não vai funcionar também, porque preto é padrão. Vamos em frente e com verde. Livre-se de nossas aulas. Vamos atualizar sua página. E ainda assim, é claro, nada acontece. Nós realmente não adicionamos essas classes. Se adicionarmos leitura, vamos ver nossa tecnologia cortar sua cor de texto se transforma em leitura. Vamos nos livrar disso e o que precisamos fazer é pegar esse elemento usando algum tipo de seletor de consulta . Digamos que temos uma const aqui. H um é igual a documentos dot query selector e nós só queremos agarrar essa idade um. Agora o que podemos fazer é H um anúncio de ponto da lista de uma classe de ponto, e podemos adicionar Isso é um azul. E assim isso vai pegar a lista de classes. Atualmente, não há nada lá, e vai adicionar azul a ele. Então vamos em frente salvar. E assim que eu apertar Refresh. Isto vai ficar azul assim. Na verdade, já temos um aqui. Temos acesso a isto. Podemos fazer H um anúncio de ponto da lista de classes Não, não vamos adicionar Vamos remover azul OK, alterações de texto. Novamente, Vamos fazer H um ponto lista classe ponto Adicionar vermelho Perfeito. Vamos em frente e adicionar azul também e podemos ver quando olhamos para o h uma nota que ele tem classe vermelho e azul nele. Agora, a razão que é azul é por causa do estilo CSS. Então vermelho veio primeiro, então azul foi o último executado. Então, naturalmente, CSS vai dizer que vou ouvir a última regra a última que me falaram. Vou usar essa. Então essa é a razão pela qual ele está fazendo isso. Se tivéssemos dito que cada um ponto lista de classe ponto adicionar verde, que é o último em sua lista aqui embaixo, ele fica verde. Tudo bem, o que acontece se você quiser adicionar várias classes? Bem, você poderia fazer H uma lista de classe ponto ponto anúncio azul, vermelho, verde, verde, assim por diante e assim por diante. Isto não vai funcionar. Isto provavelmente irá realmente lançar-lhe um erro. Vamos dar uma olhada nisso. Sim, string de erro de caractere inválido contém um caractere inválido. Basicamente, diz que há isto. Há um espaço lá e não deveria ser assim. Em vez disso, o que fazemos é passar uma lista infinita de parâmetros. O 1º 1 vai ser azul, e depois o 2º 1 vai ser lido agora. Isso não vai funcionar necessariamente porque eles já estão prontos. Então vamos em frente e remover estes. Vamos remover verde e azul e deve ficar vermelho novamente. Verde azul. E lá está o nosso CSS. O nosso H fica vermelho e assim. E é assim que você adiciona e remove. E se você quisesse remover, apenas como um exemplo rápido, mais uma vez lista de classe ponto um parâmetro azul segundo parâmetro verde. CSS vai dizer que o que vier por último, eu vou honrar mais, Então isso vai ficar verde, como esperado. 58. Projeto final em JavaScript: Tudo bem. É a hora de trabalharmos em nosso projeto final, e este projeto final vai usar não tudo o que aprendemos, mas um bom pedaço de todas as coisas realmente importantes. Então seu projeto final deve fazer isso. Sempre que você colocar o mouse sobre uma dessas letras, ele vai apenas animar um pouco. Isso vai ser uma mistura entre CSS e JavaScript. Se você não é super forte e CSS, tudo bem. Você não tem que fazê-la animar necessariamente assim. Você poderia fazê-lo ter ah, borda ou mudar a cor da fonte ou algo assim. Não tem que ser como fantasias. Eu fiz isso aqui. Agora, para começar com isso, eu gostaria que você criasse um título. Então crie algum texto em sua página. Acabei de escrever o Projeto Final para o meu. Selecione o título usando o seu javascript e, em seguida, você vai se perguntar. Divida o título por todos os seus personagens. Você vai querer pegar cada caractere aqui, e então você vai querer basicamente rejuntar todos esses caracteres com um pouco de HTML em torno deles e então você pode selecionar cada caractere pela classe que está em torno dele e adicionar um ouvinte de eventos para cada um. Então você vai ter que usar um par de loops aqui. E então sempre que você colocar o mouse sobre um, você deve ser capaz de mudar o estilo da classe. Então adicione ou remova uma classe novamente. Isso vai exigir um pouco de CSS. Mas ei, quer saber? Se você não é super forte com CSS , não precisa ser chique. Só tem que ser funcional. Isso é o que o javascript é. Disfuncionalidade JavaScript. CSS é beleza, então eu misturei os dois aqui, mas nós realmente só precisamos estar focando na funcionalidade. Então esta é a minha exibição final. Isso é exatamente o que eu tenho aqui, e eu gostaria que você tentasse escrever isso sozinho para isso porque isso é bastante complexo. Definitivamente sinta-se livre para referenciar os outros vídeos novamente, ou qualquer um do código-fonte definitivamente usado Google ou Stack Overflow ou Mozilla Developer Network, MD final como qualquer tipo de referência. Você precisa fazer isso, tomar muito tempo que você precisa e tentar trabalhar através dele sozinho. Então, em apenas um momento eu vou deixar a tela preta. E eu gostaria que você pausasse o vídeo e desse uma chance. Tente o seu melhor para fazer isso sozinho. Agora, obviamente, se você ficar preso, você pode apenas apertar o currículo no vídeo e você pode ver como eu faço isso. Vou mostrar-te exactamente como cheguei a este ponto para poder fazer isto. Então vá em frente, pausar o vídeo agora e dê uma chance a isso. Muito bem, a começar com a minha opinião sobre esta solução em particular. Então a primeira coisa que precisamos fazer é criar um título. Só vou usar o “H “aqui chamado “Projeto Final”. Então esse está feito. Vamos em frente, livrem-se disso da nossa lista. Em seguida, selecione o título usando JavaScript, então teremos que selecionar este título. Então vamos em frente e criar uma constante. Cada um é igual a documentos ponto consulta seletor se porta trancada, e eu só vou selecionar o H. É o único H na página para que eu possa fazer isso. Então eu quero pegar todos os personagens título. Então eu quero pegar tudo isso. Então vamos em frente e criar uma nova constante aqui chamada texto e que vai ser 81 ponto texto interno sobre isso. Eu quero dividir todo o personagem título, então eu quero pegar cada um. E então o que eu quero fazer aqui é transformar isso em um array. Então eu vou usar dot split e nós vamos dividir em absolutamente nada. E vamos nos livrar desse e daquele. E agora precisamos nos juntar a cada letra com uma aula. E então precisamos percorrer todo esse texto e para cada um aqui, precisamos colocar algum tipo de classe em torno dele. Então o que eu estou pensando é estendido classe J s letra para que eu possa selecioná-lo com javascript algo assim, e vai passar por cada um deles. Então vai haver uma extensão em torno da extensão F A em torno do olho e um l p r o j E C T. eu também vou querer não incluir o espaço. Então, como vamos fazer isso? Bem, vamos precisar criar um novo HTML para colocar aqui. Alguns criariam uma nova variável chamada HTML, e ele só vai ser uma string em branco por enquanto. Então eu quero olhar através de todo o texto. Então isso não é realmente texto essas nossas letras e vamos fazer letras ponto para cada letra que temos, temos uma única letra e vamos usar uma seta gorda aqui. E poderíamos trabalhar com esta carta. Então agora podemos dizer HTML é igual a HTML mais span. Classe é igual a qualquer classe que vai ser. Ainda não sabemos. Seja qual for a carta aberta, vou encher com L por enquanto. E isso é o que ele precisa para se parecer com algo assim. Agora precisamos realmente colocar os dados aqui. Não quero fazer muita concatenação aqui. Eu quero usar um modelo literal, e a letra pode ser apenas a letra variável. Agora a turma aqui vai ser letra e letra Js. Então carta vai ser o que eu uso CSS para selecionar e letra J s vai ser apenas um seletor JavaScript, Então eu sou uma espécie de manter esses dois mundos separados. Agora, neste ponto, eu posso selecionar meu H um novamente e fazer ponto interno html é igual a html. Vamos abrir a página dela e refrescar o nosso cônsul e onde está o nosso H? Olhe para isso. Temos uma extensão em torno de cada um com letras e classes de letra J s nele. Então isso é muito bom. Isso é exatamente o que queremos. Infelizmente , também tem espaço lá dentro. Então temos que detectar isso. Então, se a letra não é igual a um espaço vazio, então podemos definir algum tipo de classes. As aulas são iguais a você algo. E também vamos definir classe aparece classes é igual a por padrão vai ficar em branco. E, em seguida, se a letra é algo diferente de um espaço que é também adicionar essas classes e você mesmo a letra J s letra e nós só queremos substituir isso por classes. E isso é escopo de bloco também. Estes colchetes aqui Então eu não tenho que me preocupar com este vazamento fora do meu escopo para o para cada loop. Vamos em frente, atualize nossa página. E lá vamos nós. Não temos aulas lá agora. Há outras maneiras de fazer isso também. Você poderia basicamente dizer isso com alguns ajustes extras, mas nós não vamos fazer isso. Certo, o que vem a seguir na lista? Precisamos adicionar um ouvinte de eventos a cada um deles. Certo, antes de fazermos isso, precisamos selecionar cada um desses. Agora, todos estes têm uma coisa em comum que é esta classe. O que? Terão ambas as classes em comum, mas usaremos o seletor de letras Js, então vamos em frente. Um verde novo const Js letras é igual a documentos, holandês seletor de consulta tudo porque queremos todos eles e vamos selecionar R Js letra . Agora precisamos percorrer cada um destes e adicionar dois ouvintes de eventos um para quando colocamos nossas bocas sobre uma letra e um para quando removemos o nosso máximo da carta. Então vamos criar um para cada loop, então letras Js ponto para cada que vamos passar no nó, e a nota que estamos recebendo aqui é cada elemento letra Js. Então isto é um bilhete. Isso é um nó. É um nó de nó. Não estamos selecionando esse nó de nó de um nó. Não, não, não. E sem dúvida. Então estamos dizendo para cada um desses nós pegou a nota individual e fazer algo com ela. E é neste ponto que podemos adicionar nossos ouvintes de eventos. Vamos rolar isso para cima, sem ponto adicionar ouvinte de eventos e qual deles queremos? Queremos passar o mouse sempre que colocarmos nossas bocas sobre o ouvinte de eventos, e ele vai ter um funcionamento aqui com o evento, e isso é apenas console. Registre este console, registre este ponto intertek, então ele vai consolar. Registrar a letra agora a razão pela qual estamos usando a função aqui em vez de uma função aerodinâmica Bem, estamos usando uma função de seta aqui, mas estamos usando uma função regular aqui é porque precisamos disso. Precisamos disso para se referir ao nó, que está vindo daqui. Vamos em frente, economize, nos dê uma atualização. Abra. Nosso cônsul e seletor de consultas não é uma coisa. Seletor de consulta é uma coisa. Lá vamos nós e vamos colocar o nosso projeto final e você pode ver que está começando a soletrar no meu conselho. Então isso é perfeito. Isso é o que queremos. Agora precisamos adicionar outro aqui para o mouse para fora, mouse para fora. Então, sempre que movemos nosso mouse para fora desse elemento em particular e vamos apenas dizer para fora, vamos em frente, atualizar e colocá-lo sobre o P out p out de f out out out. Então isso está funcionando perfeitamente. Então agora temos ouvintes de eventos em cada um. A última coisa que precisamos fazer é em nossas bocas. A letra deve animar usando CSS, então precisamos adicionar e remover classes aqui. Então, aqui podemos fazer este anúncio de ponto da lista de classes de pontos, e eu vou adicionar uma classe chamada Ativo e no mouse para fora. Vamos remover esta aula e vamos dar uma olhada em como isso funciona. Vamos abrir nossa página de atualização do inspetor, e sempre que eu coloco meu mouse aqui, você pode realmente ver que as aulas estão mudando de fato. Então agora a última coisa que precisamos fazer é fazer o mouse sobre a letra realmente animar usando algum CSS. Neste momento, podemos usar a classe chamada letra, e se passarmos por cima dela, há também uma classe lá chamada Ativo, então podemos usar ambos juntos. Então eu vou me livrar disso porque isso não é mais necessário. E vamos escrever algumas coisas CSS primeiro. Vou querer mudar algumas coisas do corpo. Eu quero mudar a cor de fundo para que não seja apenas um branco reto. Vamos fazer isso fora de branco. Então vamos enviar um texto para o centro da linha porque eu quero que todo o texto na página seja centralizado. Próximo. Vamos em frente e selecione a letra e vamos adicionar algum estilo padrão para cada letra. Digamos que o tamanho da fonte será muito grande economizaria 90 pixels. A família forint. Eu já tenho uma frente personalizada carregada aqui, e é Pacific. Então, digamos que a família das fontes vai ser a Pacific. Oh, ou cursivo. Se ele não carregar a partir do Google, é apenas vai carregar algo maldição de exibição em blocos de linha que poderíamos fazer algumas dessas animações funcionar corretamente. Vamos mudar a cor, também 999 Refresh. Está bem, está bem. Está indo bem agora. Precisamos adicionar uma classe ativa, então a letra ponto ativo. E vamos apenas transformar essa escala de transformação 1.5 fazer a letra apenas 50% maior. E isso também é girado, eu acho que girar 20 graus. Agora, vamos mudar a cor para algo como verde. Oh, olhe isso está chegando lá. Ok, então isso parece um pouco agitado, mas nós poderíamos nos consertar muito facilmente com alguns CSS. Vamos em frente e adicionar um trans ish em transição. Nós vamos dizer tudo porque eu vou ser um pouco preguiçoso aqui. Digamos que todos eles vão levar 250 milissegundos para entrar e sair. Ele está dentro e fora. Atualize nossa página. Eu sou. Olhe para o projeto final completo. Então vamos dar uma olhada rápida no que eu fiz. Mais uma vez, peguei o hum. É esse cara aqui, pegou todas as letras dentro dele, e então eu dividi com base em absolutamente nada. Então eu quebrei todas as letras aqui em uma matriz. Eu então disse para cada letra na matriz, vamos percorrer e vamos uma caneta, alguns html dedo uma corda. Agora poderíamos ter usado um array e usado ponto joint também. Essa é outra maneira de fazer isso. Eu só usei uma corda normal. Usamos um modelo literal aqui com um par de variáveis que fizeram nossa nação cap olhar agradável e suave. Então eu disse: “ Ei, Ei, quando você terminar, essa mudança que cada um tem o dedo interno html, seja qual for o que for que saiu do loop. E então eu disse, OK, bem, porque há uma carta Js lá dentro para cada letra. Vamos em frente, pegue todos esses. Então vamos percorrer cada um deles e lá dentro temos cada nota. Cada elemento que tem letra Js como uma classe é sua própria nota. E então este nó agora tem um ouvinte de eventos para passar o mouse. E sempre que passamos o mouse sobre como a classe de ativo e há outro ouvinte de eventos. Então, sempre que tiramos nossas bocas, ele remove a classe de ativos. Por último, eu fiz parecer bonito com alguns CSS. Então, apenas um pequeno estilo de fundo do corpo lá. A letra em si tem um tamanho de fonte maior Ah, exibição da família de ponto personalizado no bloco de linha porque estamos usando um span. Então precisamos usar isso em ordem. Teoh usar transformar corretamente, mudar a cor do telefone, a cor da fonte padrão e deu-lhe uma transição. Então vai levar 0,25 segundos para fazer a transição dentro e fora de sua animação, e sua animação vem de seu estado ativo. Então, sempre que a letra, sempre que há um elemento que tem a classe de letra e também tem uma classe de ativo ao mesmo tempo, nós vamos transformá-lo para ser 50% maior, girado 20 graus e mudar o cor da fonte para verde, feito e feito. Por último, verificamos o nosso conselho. Garantimos que não haja mais registros, então não estamos registrando nada, porque isso não é necessário. E também não há avisos. Não há erros. Não há informação ou depuração. Tudo parece saudável e feliz. Terminamos o nosso projecto final juntos, e esta é a minha opinião sobre a solução. Há novamente várias maneiras diferentes de fazer isso, mas isso está usando um monte de peças maiores de javascript que aprendemos garganta neste curso e, por último, para todos os desenvolvedores de compartilhamento de habilidades lá fora? Eu realmente gostaria se você pudesse compartilhar seu código, tirar uma captura de tela disso e colocá-lo em um projeto de compartilhamento de habilidades. Será ótimo para mim ver o tipo de progresso que você está fazendo, mas também posso ajudá-lo com dicas e feedback em suporte. Então não se esqueça de atualizar seu projeto JavaScript e então eu vou dar uma olhada nele. 59. Resumo para iniciantes: Tudo bem. Você fez isso. Você tem todo o caminho através deste curso. Isso é realmente um grande negócio. Certifique-se de parabenizar a si mesmo. Compre algo legal para você. Compre uma boa refeição. Faça algo para realmente se recompensar porque você conseguiu através de mais de 50 vídeos de JavaScript e, ah, vale a pena recompensar-se por isso. Agora. Nós aprendemos muito JavaScript, mas honestamente, isso é apenas uma introdução ao JavaScript. Há um mundo JavaScript muito maior lá fora, incluindo coisas como NPM gerenciador de pacotes de nó ou frameworks como reagir e ver dot Js ou bibliotecas como slick dodge. Quanto à criação de células de cuidados surpreendentes ou J Query para basicamente criar e escrever JavaScript que é compatível com versões anteriores. Então você não precisa se preocupar com o JavaScript não funcionando em navegadores mais antigos. Há também um monte de ferramentas lá fora que você pode instalar com, como nó, como nó, gerenciador de pacotes e node.js. E ele pode compilar seu javascript no que eu chamo de JavaScript fictício, onde basicamente você, bem extravagante JavaScript moderno, e ele compila para baixo em um arquivo diferente que navegadores mais antigos, como o Internet Explorer 11 Compreender. Então, se você está amando o mundo do javascript e você quer continuar se aprofundando e aprofundando . Sua próxima aposta é provavelmente para continuar aprendendo JavaScript. Então, se você estiver interessado em continuar aprendendo javascript e se tornar um jato JavaScript muito, muito forte e poderoso, eu então você provavelmente vai querer começar a aprender mais algumas das coisas avançadas nos detalhes nítidos reais de todas essas coisas diferentes que aprendemos todos os diferentes métodos que você pode usar, como strings e arrays e coisas assim. Todos os diferentes ouvintes de eventos, certo, mais aulas, coisas assim. E então você vai querer saltar para provavelmente algum gerenciador de pacotes de notas para que você possa usar código de outras pessoas em seus projetos e então talvez começar a aprender algum ponto de vista do reator Js e você tem seu objetivo era aprender javascript para que você pudesse ser uma frente e desenvolvedor web . Bem, agora você tem habilidades suficientes que você pode realmente ir e aplicar para ser um desenvolvedor de fachada e Web . Você sabe, um monte de JavaScript direto da caixa. E isso é uma vantagem muito forte. Mais uma vez, parabéns por terminar todo este curso. - Sim. Por favor, certifique-se de recompensar a si mesmo. É muito importante para você se recompensar por todo o trabalho duro que você fez. Meu nome é Caleb dizendo que pode me encontrar na internet. Mas, o mais importante, se você tiver dúvidas, comentários, preocupações ou comentários, você sempre pode deixá-los na seção de comentários abaixo. Eu leio tudo o que entra, e tento responder a todos em tempo hábil também. Então, mais uma vez, obrigado por fazer este curso. Espero que tenha aprendido muito. Eu espero que você tenha se divertido aprendendo algum JavaScript. Você tem boas mãos na experiência, e por último, eu adoraria te ver no mundo. Então não se esqueça, você pode se juntar ao grupo do Facebook, o grupo de aprendizagem para Code Facebook. Você sempre pode deixar comentários ou perguntas para baixo. Li tudo o que vem e tento ser o mais útil possível. E eu espero que você tenha se divertido neste curso.