JavaScript do básico ao avançado: aprenda JS — Javascript de A a Z

1. O que é Javascript?: Olá, meu amigo. Quando você está aprendendo algo novo, você se faz muitas perguntas como por que precisamos de eventos? Por que precisamos de loops com o nosso dia? Como os usamos e assim por diante e assim por diante? Se sim, então você está no lugar certo porque eu responderei a todas as suas perguntas. Parecendo assim. Vou explicar-lhe no discurso tudo, desde o básico até avanço elogios fora do JavaScript para que possamos nos tornar o especialista. O discurso é dividido em 23 seções e consiste em 85 aulas. Está mais de 12 horas de folga. Ótimo conteúdo. Você também vai encontrar aqui um monte de testes e exercícios. Vou explicar sua sintaxe fora do JavaScript e bem treinado a sintaxe. Durante exemplos práticos, JavaScript está dando ao seu site funcionalidades adicionais que podem ser executadas no computador do usuário sem reconectar o servidor. Isso permite que você faça coisas que você não pode fazer com em HTML. Por causa disso, a interface do usuário se torna mais amigável e mais interativo por elementos interativos. Quero dizer coisas como duas profundezas animadas forçam insiders com privilégio, validação deslizou parceiros, galerias com empresas e muitos homens, e mais e bem você pode estar se perguntando o que você vai saber depois do discurso. Após este aconchegante será capaz de codificar corretamente. JavaScript em qualquer nível de dificuldade cria arrepios como galeria dinâmica com apresentações de slides familiares no cetera de Bagger Kotick e manter seu casaco funcionando bem e muito, muito mais. Você entende coisas como variáveis, todos os operadores, instruções condicionais, funções, áreas, objetos, loops, loops, eventos de modelo de objeto de documento, expressões regulares, cookies e mínimo. Você tem mais informações sobre isso abaixo do vídeo, ok? E o que você deve saber antes do discurso, você deve entender os conceitos básicos sobre HTML e CSS. Se você sabe que você pode facilmente trabalhar esses carros e você pode estar se perguntando, hey, hey, mas por que você deve escolher o meu curso? Porque você tem minha ajuda sobre tópicos de cobertura, se necessário. Meus cursos são atualizados. Tenho milhares de clientes satisfeitos, e estes carros são liderados por mim. E eu sou uma pessoa muito experiente, e eu não vou falar como eles são sobre como você pode ver, e eu quero fazer seu tempo passar bem de bom humor. Você pode baixar aulas no disco do computador. Eu não presumo que você seja um piloto, um Lightman outros professores. Eu estou adicionando casaco fonte livre, essência Preval e bem, quem sou eu? Meu nome é nosso truque Kardashian Ladakh. Eu não gosto de falar de mim, mas bem, como você pode ver, eu tenho uma experiência neste assunto. Eu tenho programado há mais de 10 anos e eu tenho desenvolvido um site por mais 14 anos e eu estou alterado fora 27 cursos de vídeo na Polônia. Eu criei também seis cursos de vídeo em Inglês. Sou professor de milhares de clientes satisfeitos. Há muitos comentários sobre meus cursos e aqui está um deles. Se você tiver alguma dúvida sobre tópicos de cobertura, por favor, apenas me pergunte. Adoro ajudar outras pessoas a criar uma discussão. Ficarei feliz em ajudá-lo. Isso é tudo. Muito obrigado. 2. Baixando e instalando o editor: Olá, meu amigo. Hoje, temos a missão de escolher o editor para mergulhar profundamente no JavaScript, e você provavelmente está se perguntando se precisa continuar com o editor que estamos usando neste curso. Absolutamente não. Se você já tem seu editor favorito, fique à vontade para continuar usando-o e você pode interromper esta palestra e ir para a próxima Às vezes, vamos usar o código Netf do Visual Studio. Por quê? Porque eu pessoalmente acho isso útil. É adequado para mim, não apenas para desenvolvimento web, mas também para programação em outras linguagens. Mas lembre-se, tudo gira em torno do que funciona melhor para você, não para mim. Portanto, seja o código do Visual Studio, colchetes, texto sublime ou qualquer outra coisa, a escolha é sempre Vamos baixar agora o NetBeans. E se a versão aqui for maior, não se preocupe. Está bem? Porque esse curso ainda está atualizado. Mesmo que a versão aqui fosse dez, o curso seria totalmente o mesmo porque o net beans não é usado apenas em JavaScript. É usado principalmente como Java, que é uma linguagem totalmente diferente. E a versão deles é importante porque se você quiser usar a versão mais recente do Java, precisará usar a versão mais recente, net be. Em JavaScript, isso realmente não importa. Vamos clicar em Padrão de download. E agora, se você estiver usando o Windows, você usa o dslink. Se você estiver usando Mac, você está usando Disnink e se você estiver usando Linux, você vai usar Como estou no Windows, vou clicar na versão executável E quando eu clico nisso, posso baixá-lo em segundo plano. E agora, preciso lembrar que Net Bins requer algo chamado JDK Aqui, como você pode ver, ele diz que requer o JDK, que está na versão 17 plus, e você também pode usar 21 e 23 Então, onde você faz o download? Para fazer isso, você acessa o site assim. E agora você clica nas outras plataformas e versões porque pode estar usando um sistema diferente. Então, aqui você pode escolher o sistema operacional que está usando porque está usando o Windows e simplesmente escolher o Windows. E a versão que você deve escolher é aquela que está aqui, certo? Escolha aquele que é estável, que sempre é indicado como LTS, que significa suporte de longo prazo, ok? E como precisamos do JDK, vamos escolher E também, como você pode ver, nós temos, porque eu estou usando Intel, eu vou usar esta versão aqui. E basta clicar neste botão e esperar até que ele seja baixado. Então é hora da instalação. Primeiro, você precisa instalar o JDK, então clique duas vezes nele e, em seguida, clique em Avançar e não se esqueça de ler o contrato de licença e , em seguida, em Avançar, e é muito importante que você tenha todas as coisas aqui definidas como serão Está bem? Se você o tiver assim, defina-o assim. Caso contrário, pode haver problemas em encontrar o JDK por meio de netbins. Tudo bem. Vamos terminar a instalação e agora é hora de ganhar dinheiro. Então, clique duas vezes nele. E agora, como você pode ver, o instalador está sendo configurado e você está sendo perguntado o que deseja instalar aqui. Então você pode personalizar porque não vamos usar Java, por exemplo, você pode simplesmente desmarcá-lo É bom escolher o PAgB porque pode haver a possibilidade de você conectar o Java Scret à página B e clicar em Avançar E, claro, lembre-se de ler o contrato, clique em Avançar. E como instalamos um JTK, nós o temos aqui. Então, agora clique em Avançar. Instale e agora é hora de esperar. Depois de instalá-lo e clicar em Concluir, basta abrir os Net Bins E à medida que progredimos, você aprenderá como criar seu primeiro projeto e muito, muito mais, é claro. E eu estou aqui para ajudá-lo durante essa jornada. Então, se você tiver alguma dúvida, fique à vontade para perguntar. Estou sempre aqui para apoiá-lo. 3. O que você vai saber depois deste curso? Para que JS é usado?: Olá, hoje vou te contar o que é JavaScript e por que vale a pena aprender. JavaScript é uma linguagem de programação para navegadores da web. Por exemplo, para Fox, Google, Cron e assim por diante, você pode criar nele um código, chamado de script, que pode ser executado no computador do visitante do seu site O que significa que, quando você terminar de carregar o site, vamos atualizar isso Você ainda pode acessar elementos no site e alterá-los, certo? Por exemplo, quando temos aqui uma galeria com Tamnes com essas miniaturas aqui, como você pode ver, quando estou usando o mouse sobre uma dessas imagens, a imagem aqui, a imagem principal está sendo alterada E é muito útil porque agora você não precisa ocupar muito espaço no seu site e pode mostrar o produto na versão maior com muita facilidade, certo? Como você pode ver, isso está melhorando a experiência do usuário em seu site. Além disso, como você pode ver, temos uma dica de ferramenta aqui, que fornece informações adicionais sobre cada uma dessas imagens Isso é muito legal e está melhorando a experiência do usuário. O HTML é responsável pelo conteúdo do site, o CSS é responsável pelo layout e o JavaScript é responsável por reagir às ações do usuário e fazer coisas com HTML e CSS no lado do usuário após concluir o download do Normalmente, sem JavaScript, você não conseguiria fazer nada no computador do usuário. Porque depois de se conectar ao servidor e baixar o site, o usuário não está mais conectado ao servidor. Está só no computador dele. Isso é tudo. Você pode fechar a conexão. Você ainda tem acesso a este site. Portanto, o script Java pode ser usado ou também muitas outras coisas. Não apenas galerias com halins. Você pode criar algo chamado de painéis deslizantes. Você pode criar coisas como transições entre imagens e imagens que mudam a cada segundo, que é chamado de painel de apresentação de slides Você pode usá-lo, por exemplo, nas páginas da web da loja, onde você pode mostrar muitos produtos em um pequeno local. Pode criar promoções e muitas outras coisas que melhoram a experiência do usuário. O JavaScript é necessário para se tornar um desenvolvedor front-end responsável pelas coisas que são feitas pelo lado do usuário, certo? Imagine uma situação como essa em que você tem um relógio no seu site. Você precisaria de cada segunda solicitação do servidor e um novo valor para atualizar esse relógio. Com o JavaScript, tudo está sendo executado no lado do usuário sem se reconectar constantemente ao servidor O script Java pode ser usado para atualizar o conteúdo do seu site e colocar um D? Você pode, por exemplo, alterar o tamanho certo e mostrar alguma coisa? Você pode criar uma dica de ferramenta ao lado de um disco. Você pode, por exemplo, alterar o atributo de origem da imagem aqui, você pode fazer algum tipo de animação. Tudo isso é feito em JavaScript. Alterar o layout dinâmico do seu site é algo feito em JavaScript. Mas o que mais? Existem bibliotecas avançadas para JavaScript, como o Ajax, que permitem que você se conecte ao banco de dados e recupere informações sem recarregar o recupere informações Por exemplo, quando vamos aqui, como você pode ver, agora, quando clico aqui, não estou recarregando meu site Estou apenas mudando esse lugar aqui, e todo esse conteúdo é retirado do banco de dados do PHP e do MS QL. Se você ainda não sabe, não se preocupe. Lembre-se de que você pode até mesmo usá-lo com bibliotecas avançadas para criar sites literários que não recarregam e atualizam Não faça algo assim, Refreshing. Isso leva muito tempo. Então isso é muito, muito incrível. Você também pode usar o script Java para pré-validar a entrada nos formulários Como, por exemplo, se a senha fosse forte o suficiente ou se o e-mail fosse usado corretamente e assim por diante, antes de enviar esses valores para o servidor. Você pode mostrar uma caixa especial informando ao usuário o que está errado no formulário sem redefinir seus valores no Isso torna a experiência do usuário em seu site muito melhor. Eles estão enviando a sintaxe do JavaScript, bem, permitimos que você também entenda melhor algo que é chamado de estrutura de consulta J. O framework J Query é uma grande biblioteca de scripts Java úteis, plug-ins, funções, coisas que permitem que você escreva menos código fazendo muito mais. Já existem muitas coisas feitas que você pode simplesmente fazer. Mas para entender o J query, você também precisa entender o Javascript, então você sabe o que está acontecendo lá, certo? Depois do meu curso, você entenderá todos os componentes avançados do JavaScript, para poder usar as bibliotecas que desejar. Então você conhece JavaScript perfeitamente. Este é o curso mais organizado, exceto Javascript, do iniciante ao especialista, em toda a Internet Vou levá-lo passo a passo da teoria aos exemplos práticos, como controles deslizantes de imagem e animação Se você tiver alguma dúvida, sinta-se à vontade para perguntar e morrer na aula, muito obrigado. 4. Criação de projeto: Olá, meu amigo. Hoje você vai criar seu primeiro projeto no Net Beans e ao mesmo tempo você vai saber como estruturar seus projetos para que seja mais fácil de manter, Ok, então como fazê-lo? No canto esquerdo, como você pode ver, você tem algo como arquivo. Você está clicando em entrar, então você vai para o novo projeto. Ou você pode usar o atalho Control mais Shift mais n. E como você pode ver, agora, eu tenho este menu aqui que podemos usar. Todos os atalhos são apresentados no lado direito do item de menu. Certo, então vamos manter o Novo Projeto. E como você pode ver no lado esquerdo, temos algo bom como categorias. E bem, aqui você tem pastas livres, HTML5, PHP, amostras não amostradas. Como você pode ver, eu tenho algum tipo de projetos de amostra criados por outras pessoas. Deve haver algumas demonstrações, demonstração de algum tipo de bibliotecas para JavaScript e outras coisas assim. Você pode brincar com eles. Você pode ver como as pessoas criam projetos, projetos maiores, como eles usam algum tipo de bibliotecas. Mas vamos nos concentrar em HTML5. Note PHP, porque não é um curso sobre PHP, HTML5, mas não é maldição sobre HTML5, você pode pensar também que isso é verdade, mas HTML foi criado para forbear, todos os navegadores apenas para navegadores. E JavaScript também é criado apenas para navegadores. Para executar o código JavaScript, você deve conectá-lo com o HTML5. Então você tem que criar um aplicativo HTML5, ok? E, além destes, HTML5 trouxe à vida muitas novas ferramentas que são chamadas funções e que também são muito úteis. Então vamos criar aplicação HTML5. Você pode escolher o aplicativo HTML5 com fontes existentes. Se você tiver fontes existentes, use a dessorção. Caso contrário, use o primeiro aqui. E agora clicamos em seguida, como você pode ver aqui, agora temos que digitar o nome do projeto. Você também pode escolher outro visual, olhar local se quiser alterá-lo. Mas bem, na minha situação, estamos apenas nomeando, por exemplo, o nome do projeto Angular JavaScript. Você pode digitar o que quiser. Ok? Então eu vou clicar agora só terminar. E isto é, você pode vê-lo criado para nós um HTML5, que tem bens aqui, algum tipo de comentário e título e meta tags mais ousados. E bem, agora temos que vir aqui em cima nosso arquivo JavaScript, que servirá na próxima lição. Mas nesta lição, eu também criarei uma estrutura para o nosso arquivo JavaScript. Então, como fazer isso? Eu vou chegar aqui, eu, clique com o botão direito aqui, e depois mu. E como você pode ver aqui, temos muitos tipos de arquivos que podemos usar. Podemos criar pastas. Assim, por exemplo, pasta OKC. E aqui eu posso digitar o nome da pasta, e agora nós chamamos de JavaScript js, certo? Estes são atalhos. E por que estou fazendo isso? Quero manter todos os arquivos em uma pasta que estão conectados a arquivos JavaScript. Por quê? Porque, bem, talvez no início você tenha apenas 1-5. Mas a verdade é que nos projetos maiores você pode ter muitos arquivos JavaScript. E enquanto você pode ter também muitos HTML5, PHP 5S, alguns templates phi, alguns arquivos de configuração, alguns arquivos CSS e outras coisas assim. E então será difícil localizá-los, certo? Será difícil manter todo esse código. Portanto, é uma boa ideia manter arquivos JavaScript em uma pasta especial, e é assim que fazemos. O mesmo que você faz quando você tem CSS, certo? Você tem a pasta CSS especial onde você mantém seu arquivo CSS. Então aqui vamos manter arquivos JavaScript. E para criar um arquivo JavaScript, clique aqui e clique com o botão direito do mouse em Novo e, em seguida, use o arquivo JavaScript. Quando você faz isso, agora você pode apenas digitar o nome do seu arquivo JavaScript. Você não precisa adicionar a extensão ab.js, que é para JavaScript. Então agora podemos digitar, por exemplo, betonilha, o que você quiser aqui, certo? Este é um nome de arquivo, mas bem, ele deve começar a partir da letra menor vontade, tudo deve ser baixo, baixo, minúsculo. Ok, é assim que você deve, você deve chamar seu roteiro. Agora vamos apenas clicar em terminar e você se divertir. Agora, o arquivo Javascript, como você pode ver, está vazio. Você pode, você tem algum tipo de mudança nesta distância teve análises como essa. Isso é chamado de comentário. Falarei sobre isso na próxima lição. Lições. Então este nosso primeiro arquivo JavaScript, e você tem que agora apenas se conectar a ele a partir do HTML. E faremos isso também nas próximas lições. Mas o que eu quero dizer também nesta lição, bem, você sabe, você pode criar isso, todas essas coisas manualmente. Olhe quando você vai aqui para as propriedades, como você pode ver, podemos ir para a pasta do projeto. Eu copiaria, e agora vou colá-lo aqui. E como você pode ver quando você vai aqui para o HTML público, nós temos aqui o CSS, JavaScript e indexes arquivo. Poderíamos criá-los apenas criando TextFile e salvando jazzy como um HTML ou como o arquivo Javascript. Isto é típico. Nada mais, nada de arquivos especiais, certo? Você pode criar o que você quiser camadas e ele vai apenas correr. Agora você pode abrir isso. Pense bem fácil. A fim de fazê-lo. É só clicar duas vezes. E como você pode ver, ele se abriu dentro do navegador da web como você pode ver. E está funcionando porque ele é um HTML5 e o medo do JavaScript vai ser conectado por nós na próxima lição. E ele também vai ser executado em nosso navegador, certo? Você não precisa adicionar um servidor especial para ele. Ele só vai ser executado dentro do seu navegador. E você não precisa usar a rede significa que você pode usar o que quiser. Estes a estrutura de exemplo, é assim que você cria um projeto. E bem, eu convido você para a próxima lição. Muito obrigado. 5. Atalhos úteis para os profissionais da web: Olá, todos Hoje estamos mostramos os atalhos mais úteis usados por desenvolvedores e programadores da Web . Bem, todos esses carros curtos vão te poupar muito tempo. Então é preciso saber as coisas. Ok, você tem que conhecê-los, a fim de economizar muito do seu tempo. Por que desenvolver sites ou programar? Você conhece a planta de situações em que você tem que mover seu curso ou assim o Irã e em vez disso você pode usar o atalho porque você tem um bom teclado que você está digitando em Cuba, e então, você sabe que é difícil mover as mãos para a boca. Está demorando e sempre talvez 12 segundos. Mas imagine que você vai gastar muito tempo escrevendo o casaco. Vai salvar-te todos os dias. Por exemplo. Eu sei 10 minutos e quando você multiplicar 10 minutos pelo ano da parede, então você tem muito tempo, certo? Muito tempo economizado ao conhecer esses atalhos. Muito bem, vamos começar a nossa aventura. Como salvar o fogo instantaneamente. Você sabe, eu tenho mesmo um hábito agora como esse quando eu faço algo, eu vou apenas contra-mais seguro usar o atalho como esse. E eu apenas digo instantaneamente, você não vai facilitar quando você, por exemplo, assistir próximos vídeos que eu estava salvando instantaneamente depois de mudar qualquer coisa. Por quê? Porque nós somos você sabe não, todos os editores. Ah tem algo como, por exemplo, salvar Kelly automática. Quando você perde o seu, por exemplo, poder e você pode perder o seu trabalho Eso é boa idéia ter hábito de fazer algo assim. E, além destes, você tem que salvar a final para ver o que mudar direito, por exemplo, no irmão. Então eu estou apenas economizando instantaneamente após cada mudança, isso está logo à frente. Então é muito bom. Um bom tiro ao nosso lado. Temos o nosso país mais C e contadores. V bem, você pode copiar e colar coisas. Por exemplo. Eu quero tomar essa coisa e eu quero clicar em enter e contador parcelas V e bem, como você pode ver, Eu só cooperei. Então vai economizar seu tempo quando você quiser copiar algo e mudar, por exemplo, ou algo assim. Aqui e depois de novo, hein? Eu quero apenas cobre-lo em bomba aqui. Como você pode ver, liguei por uma empresa que bateu mais rápido porque eu não queria fazer algo como aquele contador mais E. E então eu não usei minha boca. Eu usei o atalho final se um rei no teclado e, em seguida, eu poderia entrar encontro mais V Então novamente eu não sorri. Eu fiz isso um pouco mais rápido. E agora olha, eu faria isso ainda mais rápido. Vou usar o turno mais país de origem mais C e entrar no contador mais V à direita, e agora mais rápido Bom Bom Bom Bom Bom. Como você pode ver, está demorando muito pouco tempo, certo? Em vez de fazer algo como Mm ah Mm. Certo. Você está salvando leis do tempo fazendo coisas assim. Ok, agora é um boné. O cartão é usado, por exemplo, quando você quer cortar algo do dedo do pé. Não quero este título aqui. Quero cortá-la, e quero que esteja aqui. Certo. É como uma cópia encorpada de escotismo do lugar. Estamos cumprindo, mas bem, você sabe, isso não é uma boa idéia ter o título aqui. Oh, meu Deus. Cometi um erro. Então, como fazer isso? Bem, eu tenho que cortar de novo. Agora eu posso usar o contador, z, e ele vai desfazer as coisas que eu fiz que são críticas e úteis. Tubarões tem também e você pode lê-lo a ação. Então, por exemplo, bem, eu estava errado e novamente para que eu pudesse voltar para esta situação novamente, certo? Usando estas plas contador y próxima contra muito legal mais f Você confinou as coisas como você pode ver . Por exemplo, eu quero Tosi onde eu digito algo assim. Ou onde está o Dave? Instantaneamente eu posso encontrar as coisas certas. Então país mais f country plus A vai vender como todas as suas lutas, por exemplo,de por exemplo, quem eu quero apenas contrariar mais uma coisa controlar políticas ocupando isso. E eu quero criar um novo Faisal novo html cinco atalhos HTM. E eu vou cooperar aqui. Certo? Certo, vamos praticar. Ah, o atalho que temos. Então, por exemplo, eu quero criar uma hora ordenada, então eu vou criar algo assim. Bem, eu queria no final. Então, como fazer isso? Eu poderia Selig assim, mas eu poderia Nós também poderíamos usar o atalho que é apresentado mais tarde como, por exemplo, raspado mais E assim como quando eu faço algo que ela mais e eu vou selecionar a partir dos quilates de A coisa piscando até o fim da linha e agora eu estou apenas cortando porque eu não quero que ele esteja aqui Contra Plus X e eu não vou precisar dele no fim do fogo. Então aqui e eu estou apenas combinando. E como você pode ver , agora não está em bom lugar. Então eu estou usando o topo, certo? Você também pode usá-lo. Pode parar para inventar algo que possa usar? Sheep vai parar se você fez, por exemplo, algo assim o tempo todo. Não é bom, certo? Então bam bam! E eu sou os direitos construídos. Então estamos acostumados com novos atalhos, certo? Assim, por exemplo. Ok, então vamos agora usar pelo menos o item. Então eu estou saindo as coisas como pelo menos eu 10 e coisas assim e você pode ver que não está funcionando bem. Eu estou usando o contador mais Z. Eu quero que todas essas coisas recuem um pouco mais, então eu vou apenas selecionar todas essas coisas e eu estou usando top. Como você pode ver agora eles estão recuados um pouco mais e eu quero pelo menos item um pouco mais longe. Então, assim. E agora eu quero o que eu quero no final. Menos item como esse. Quero isto para todas estas linhas. Aplique-o a todas estas linhas como fazê-lo muito rápido. Eu posso selecioná-lo e posso cobri-lo como você pode ver. Assim, por exemplo, paraque por exemplo, para eu possa fazer algo como bálsamo de bomba. O problema é que, como podem ver, temos o topo aqui. Então, provavelmente é uma boa idéia que para levá-lo para algo assim, para que não precisamos o tempo todo. Ah, faça as coisas inventando e deletando. Então vamos algo que e depois vamos para baixo. Bombas em casa, casa, casa, casa, casa, casa. Estou usando a chave de casa. Certo. Então eu estou indo para o implorando fora da linha mm assim. E bem, eu fui um pouco mais rápido, certo? Por causa disso. E agora eu queria a resposta. Só estou pegando isso no vestido, digitando isso e estou no final. Bomba, bomba, bomba bomba. E fizemos isso um pouco mais rápido, certo? E fizemos isso um pouco mais rápido, Em vez disso, de fazê-lo. Efectuar estes apenas lento. Ok? E agora só queremos internet bom. E fizemos o nosso trabalho muito rápido. Claro que vai ser assim, tão ferido Job escapou mais tarde, mas é assim que funciona. Você pode, é claro, às vezes quer copiar a linha e bem, você pode fazê-lo de duas maneiras. Você pode fazer coisas como casa sem mudança e contador mais e e entrar e entrar como você pode ver o que um país mais taxa como você pode ver. O problema é que às vezes você tem os índios porque, bem, bem, eu só fiz uma casa e mas eu datilografo duas vezes em casa. Então eu fui para o fim e lugar e depois para o começo, e por causa disso eu compilei o fim. E também, mas também está a levar algum tempo, certo? Você pode fazer isso um pouco mais rápido usando o controle mais Chefe e Roky para baixo. Está ficando agora combinando todas essas coisas bem feitas, certo? Então é assim que fazemos. Quer copiar as coisas? Improvável. Você não terá esse atalho em todos os editores possíveis. OK, isso não está disponível em todos os lugares e próxima coisa é Bem, Eu quero, Por exemplo, fazer algo na próxima linha. Estou bêbada. Eu só clique em Shift mais enter. Como você pode ver agora, eu não preciso usar o mouse para ir a este lugar. Eu posso apenas mudar foi entrar e eu estou aqui e eu posso apenas digitar na próxima linha. Eu não preciso do Teoh, você sabe, fazer qualquer outra coisa mais tarde. Há um atalho SoCal para saltar do início e do fim ao fim do controle de luta . Além disso, venha e controle Plus e você pode fora do curso também, por exemplo, selecionar as coisas do início ao fim. Então, por exemplo, eu estou aqui, por exemplo, certo. E eu quero apagar este comentário Você como fazê-lo. Bem, eu poderia fazer isso por turno e fazer algo assim usando as teclas de seta. Ou eu poderia fazer algo como turno mais controle e casa. E agora eu estou no início do fogo em eu poderia usar a mudança para selecionar uma linha com o Roki para baixo e, em seguida, fez isso muito impressionante. Não está ligado? Bem, como você pode ver agora, nós só precisávamos que esta coisa poderia ir controle mais chefe. E como você pode ver agora, Arkansas, como todas essas coisas até o fim, eu poderia apenas copay fazer outro arquivo, algo que quando você vai para o script, você pode E como você pode ver agora, Arkansas, Arkansas, como todas essas coisas até o fim, eu poderia apenas copay fazer outro arquivo, algo que quando você vai para o script, também notar que existem coisas como trechos frios e você pode fazer algo como, por exemplo, digitar um L e, em seguida, usar o isqueiro guia. E isso pode ver agora que instantaneamente gerou um pouco de frio para nós. Há muita coisa como essa que vai ver está gerando para nós um pouco de frio. Nós falamos sobre este frio mais tarde, e Mas se você quiser saber mais sobre trechos, você pode ir para as opções de ferramentas para os lugares CO 10 que você pode ver Agora, aqui você pode lutar contra coisas sobre HTML. Você pode encontrar coisas sobre JavaScript, e você pode muito bem criar em seu também alguns trechos. E também te vai poupar tempo. Nem todos os líderes disseram bisbilhoteiros, mas como podem ver, se um deles tem algo assim vai poupar tempo. Às vezes você deseja, por exemplo, também selecionar Nope, apenas uma carta mais tarde, usando o navio e Roky que você deseja selecionar? Por exemplo, Full David, uma vez que eu vou usar o contador mais turno e a seta que esquerda direita, como você pode ver, então eu estou selecionando mundo um por um. Então você pode, por exemplo, como eu quero conteúdo de justiça. Certo, assine fazendo algo assim. Bam, bam, bam, bam! Contra-plásticos. E eu não sei se todos os dias mais certo, você pode bombardear e ele se foi e a bolsa dele porque eu uso o tipo de sangue para ver direito. Você pode usar atalhos para aumentar bem para diminuir o tempo necessário para o desenvolvimento web . Eu realmente recomendo que você bem, praticar todas essas coisas para, por exemplo, imprimir todas essas coisas. Ah, na sua empresa na sua impressora para que você possa, você sabe, verificá-las, aprendê-las. E depois de um tempo você vai notar que você está economizando muito tempo por causa deles. Eu realmente os recomendo. Esta foi uma lição bônus e tenha um bom dia 6. Como inserir o script no site: Olá, meus amigos. Hoje vou mostrar-lhe como incorporar Java. Ignorar scripts em seu site e, ao mesmo tempo, vou mostrar-lhe como fazê-lo da maneira que nós mega site carregar muito, muito mais rápido. Pode até economizar cerca de 1 a 5 segundos. Depende de quão grande o seu site está descarregando cuspe. Portanto, é muito importante fazê-lo corretamente. Ok, então como fazer isso? Você pode inserir seu casaco em bastão para o HTML internamente ou externamente. Vou mostrar-lhe agora o caminho da internet Como fazê-lo? Vais usar o guião, fala assim. E entre a conversa de abertura e de encerramento, basta digitar o script. Então, por exemplo, cada tipo de alerta e, em seguida, eu vou apenas digitar que Este é o script mais simples. Isso não importa. O que é isso? Que função é essa? O que é este pai? o que é isso Aled Things por aqui que ponto-e-vírgula outras coisas assim. Falaremos sobre todas essas coisas mais tarde. Pense nisso é um script que vai alertar a pessoa no site e dizer teste . Tudo bem. Olá. E agora, quando estivermos de vigia. Quando usamos essa sensação, queremos escolher o navegador. Estou tratando do Firefox e do jogo grego noturno. Como pode ver, temos aqui agora. Alô? A janela. Pensa em olá? OK, e não admite. Então eu posso ver o conteúdo de nossas teias. Ok, então é assim que funciona. Temos um bom roteiro que está fazendo algo assim, e que está fazendo internamente, certo? Você também pode colocar este isqueiro creep. Então, por exemplo, aqui e há algumas diferenças entre por causa disso. Mas primeiro, vamos pensar em colocar algo internamente nessas situações muito raras . Quando você quer fazer algo assim, você quer fazer coisas assim muito raramente quando você quer colocar algo na triagem que exatamente lugar e o único nessa situação. Por quê? Porque quando você faz algo assim, aquele sofá não vai custar. Este é o mundo descontado. Não vai entrar no dinheiro, que é uma memória temporária do seu navegador. Não vai entrar no dinheiro, E por causa disso, este ouro vai ser carregado cada vez que o usuário vai para outro lado do seu site, então vai abrandar seu site. Tudo bem, então é boa idéia tê-lo em um só lugar. Então, por exemplo, como aqui em, Bem, nós fazemos assim. Então, queremos que o casaco esteja aqui. Não queremos que seja assim. E queremos importá-lo como fazê-lo tão bem, podemos fazer algo como digitar algo script, e então podemos usar os atributos como são vistos a partir do qual significa fonte. E aqui nós amarramos a fonte. Então, por exemplo, assim. E agora nós só importamos esta luta aqui. E quando o atualizamos, como você pode ver, ainda podemos ver Olá aqui. Brady está certo. Então, há uma maneira externa de fazer essa coisa em HTML antigo. Tivemos que digitar o seu também algo como tipo e dizer que é que script JavaScript por mas por padrão dobra. Agora o script é javascript de cenas do html cinco. Ok, você não precisa, hum, pensar em coisas como aquele animal. Mas há uma onda ainda um pequeno problema. O que é isso? Bem, olha para isto. Quando eu realmente amo este site contra Olá E, em seguida, quando eu clicar. OK, conteúdo do nosso site está carregado quando eu coloquei isso aqui. Como você pode ver, nosso conteúdo já está carregado E enquanto eu posso ver então Olá? Por quê? Algo assim acontece porque, bem, eu diria que você sabe exatamente como sua arma está carregada. Em primeiro lugar, você como usuário se conectaria ao seu site e então você baixaria seus arquivos HTML. Então, por exemplo, índice ponto h dot html E então algo que é chamado de parte, senhor, nós apenas processamos e interpretamos tudo dentro. Então, por exemplo, fala quando encontra algo como script, ele pára de executar totalmente enquanto analisa outras coisas. Então, se o script está aqui, ele vai para html. Além disso, é um documento html. O chefe também, Eu tenho aqui informações adicionais do nosso site fora desses sites. Oh, um título. Ok, então eu tenho dois mortos. O título para o nosso uso. bem deles. Oh, ele está usando o carro Sente-se assim. Porto Vieux. Além disso, isso é para Web design responsivo e oh, script. Ok, então antes de ir aqui, eu deveria ir e executar tudo dentro dele e então ir para o baile. Esta seção e agora você pode ser como Hey, mas estas apenas uma linha não vai abrandar. Não importa nessa situação se o site era assim. Está bem. Mas agora imagine que seu site é realmente grande. Está bem? Realmente? Realmente Be There é, tipo 500 de casacos e você não tem apenas um roteiro. O escuro alegre que você tem aqui como 50 deles. O que acontece? Uau. Imagine agora algo assim que ele iria para todos esses scripts e depois executar todas as coisas dentro, ele iria carregar o aconteceu. O que aconteceria? O que? Seu usuário não veria quase nada, certo? E depois de carregar tudo, então ele veria o conteúdo do site que é muito ruim, pão certo para nossos usuários. Ele deixaria provavelmente o nosso site. Não podemos permitir algo assim. É por isso que a maioria das pessoas puxou os roteiros aqui. Mas há um pequeno problema porque quando ele coloca scripts aqui, nós não baixá-los instantaneamente. Certo? Então, quando o conteúdo do site é baixo, ele vai ser carregado para baixo, certo? Não é tão ruim a maioria das situações, mas bem, imagine que seus manuscritos também então eles são. Não sei disso um pouco mais tarde. Então isso não é bom, certo? E às vezes os scripts estão fazendo algo com o layout do seu site. Então eles estão mudando algo, as apostas calóricas, outras coisas assim. Estão movendo algo para outro lugar. E agora imagine que o usuário com o script aqui apenas veria o conteúdo do seu site. E esse conteúdo vai mudar. E os olhos dele, certo? Ele só olharia para este site e vai mudar quando cada uma das lutas de crianças geniais vai ser carregada. Isso também é ruim. Então, bem, o que fazer, como mudá-lo. Algumas pessoas colocaram algo assustando algumas coisas aqui. Sim, mas por causa do HTML 5, temos algo. O que é chamado de um novo atributo com isso, que é chamado , eu acho, que significa S e amigos. Eu escreveria este mundo aqui como Syncronys, certo? E bem, isso significa que o script vai ser carregado ao mesmo tempo quando ou outras coisas vão ser carregadas, certo? Não vai esperar que o script seja executado, que é por padrão como os navegadores estão carregando seu site, e é só que tudo bem, você está colocando essa coisa e tudo funciona bem. Mas porque se você tem mais de uma tela, então você tem algo assim. Pulou um pulado direto para o script livre. E por exemplo, , seu usuário baixará este primeiro e será executado primeiro. Não vai ser executado então, como dias. Depois dias. Depois estes, depois bomba, bomba, bomba, bomba. Certo. Por causa disso, é uma boa ideia usar o mundo como “Difference “, que é o mesmo que “S N Coreanos “, mas vai fazê-lo funcionar um por um. Certo, vai esperar que os scripts sejam executados nessa ordem. Então, quando eu faço isso assim agora, você pode ver quando eu recarregar esses sites, podemos ver que o conteúdo é carregado e podemos ver o Olá, Certo. Agora, se eu remover esse mundo como podem ver, não teremos conteúdo. Temos conteúdo após o pico. Ok, então esta é a melhor solução. Você pode ter que fazer algo assim e eu sugiro que todos lutem bem. Todos os gritos em fonte externa, certo porque, bem, é mais fácil manter seu código do que direito. Você tem a raspagem Java, outro vapor queimado. Outra luta de é mais fácil de manter. Sabe, onde estão seus roteiros? Vai ser descontado. Então isso significa que seu site está indo muito mais rápido no Dwell. Ah, você também tem que lembrar que não toe criar muitos arquivos javascript porque se você tem muitos javascript cinco bem, é mais fácil manter seu projeto. Mas o site ele também vai carregar mais lento, porque se você tem muitos JavaScript, se olhos e h o protocolo http está permitindo que você baixe apenas prestes a lutar de uma só vez, isso significa que eles vão ser muitos pedidos para o seu servidor quando o usuário está visitando site em devido a isso. Bem, isso porque as solicitações são as coisas mais lentas porque você tem, você sabe que o usuário tem toe conectar-se ao servidor, onde está o site e depois voltar. Isto é algo colocado está demorando mais tempo. E quando você tiver gerenciado de nós, mantenha arquivos, por exemplo, oito. Você tem, tipo, quatro vezes, algo assim, que é talvez às vezes quando o Severus é muito longe. Um segundo só para, você sabe, não baixar, mas apenas para se conectar. Então está levando muito tempo e porque o site de vídeo vai carregar mais rápido, então o melhor site será apenas um javascript longe. Então, será ótimo se você tivesse gerenciado de, pedir-lhe lutas e, em seguida, manter o seu Cody está aqui e, em seguida, no final, quando você quiser colocá-los no servidor Web, você quer conectá-los. Mas, você sabe, conectar algo assim toda vez que você muda algo, o que fazemos leva muito tempo. A maioria das pessoas não faz isso. Mas você pode usar algo que é chamado de grande júri, que é um gerente de tarefas que faria isso automático Califórnia. Eu tenho o curso sobre esta coisa também. Mas se você quiser bem, você pode fazê-lo. Além disso, um manual, certo? Certo, então o melhor é colocar o roteiro aqui na cabeça porque será o primeiro teste. Mas você tem que se lembrar de colocar esta chave esses atributos de outra forma e não será a casa e bem, você pode verificar. Como é suportado porque não, é de html cinco. Você pode ir para ele não pode usar ponto com e digitar seu Essen Cronje. E aqui você pode digitar seu país e, como você pode ver quando vamos para, por exemplo, Internet Explorer. Hum, bem, especialistas na Internet seis e sete não são suportados oito e nove. Como você pode ver, as cinco raposas do Firefox não são suportadas. Mas quando você adiciona todos esses números, isso depende. Onde você vai sair? Certo? É provavelmente como 23 pessoas em 100 chegando ao seu site que não são suportadas. Mas você precisa lembrar que você está ajudando todos os outros usuários a carregar seu site mais rápido. Certo? Bem, eles vão ver seu site e como você colocou aqui, certo? Mas você vai fazer desfrutar de seu site mais para os usuários com o que você com os novos irmãos. Eu acho que aquele usuário que Devil Brothers sabe que eu não sei o prazer como um ah quente, a Internet como os caras com o novo irmão. Isso você faz com que eles mudem mais rápido. Seu site. Vamos carregar de qualquer maneira. Ok, isso vai para a lição. Muito obrigado. 7. Noções básicas do JavaScript: Olá. Hoje vou mostrar-lhe o básico fora do JavaScript. Para entender JavaScript, você precisa saber como tudo é executado. Bem, essa coisa aqui é um roteiro. É um programa. Quando o que é um programa? Bem, um programa é um conjunto de instruções que deve ser executado por um computador. Ok, então e é isso. Em nossa situação, temos aqui algumas instruções, alguns espaços em branco, espaços branco são entra e aliado superior, é seu e espaços e outras coisas assim. E usar esse Coleman. Então todas essas coisas devem ser interpretadas por alguma coisa. O programa do é chamado o pacote que está interpretando essas coisas e eles devem ser executados. E todas essas instruções são executadas pelo navegador. E, bem, os executivos do navegador ocultados pelo PC. Mas eu supero computadores pessoais, certo? Então tudo that vai ser executado a partir dele é muito importante de cima para baixo. Então você interina cada pássaro que você precisa ler tudo linha por linha, e você precisa se lembrar do devi hum hey, chametz como se fosse seu rebanho. Ok, porque, bem, tudo aqui, a sintaxe. Então, do jeito que você escreve, ele será interpretado pelo pacote. Precisamos do dedo do pé, certo? Exatamente. Em linguagem Hiss, certo? Caso contrário, você terá problemas. Ok, então vamos tentar explicar como isso chegou aqui vai ser interpretado por pacote. Imaginemos que sou um papel, senhor. Ok, então eu estou no topo. Acabei de carregar o guião “Dog Js “e vou executar esta luta. Ok, então uau, aqui está uma barra invertida. Ok. Qual é o próximo? Aqui está um asterisco, filho. Aqui está um asterisco, Então tudo depois disto não vai ser executado para mim até eu conhecer o próximo asterisco e a barra invertida, esta coisa é um resfriado. Então tudo depois disto não vai ser executado para mim até eu conhecer o próximo asterisco e a barra invertida, Essa coisa se chama comum. E esta coisa não vai ser executada. É necessário se você quiser, como se diz Coleman algo certo? Quer adicionar algo hoje? Fogo que não vai ser executado. Eu estou falando sobre o final mais tarde e eles são como, tem algum caminho espaços que eu não me importo com. Isto é e uau! Aqui está alguma coisa. Aqui está um trabalho chave. É uma água que. É uma palavra importante que significa algo para mim na minha língua. Eu sou pacote javascript, e este mundo representa variável aqui são die bit. Então este é um lugar que pode muito. E seu nome é X e I comida lá usando este Hein cinco. Então eu coloquei cinco em memória e isso é uma instrução. Esta instrução porque eu terminei com Sam ical cada instrução, cada vez que você sabe, eu acho que você tem que fazer eu acho que você vai pensar que você vai dizer seu pacote para fazer isso é chamado de instrução, certo? E deve terminar com a coluna Sani. Ah, e então você tem boa próxima variável e então você dá espaço em branco e então você diz, Ei, eu quero alertar as pessoas no nosso site que são 11 ovos certos, mais por que cinco mais seis são 11. Isto vai ser interpretado por mim e executado pelos sutiãs. Porque tudo está lendo o corpo adequado. Eu poderia me fazer ficar bem assim. Bem, olhe aqui instantaneamente. Eu tenho uma boa mensagem de que é errado. Algo aqui e que você pode ver agora não está funcionando aqui. Conhecê-los. Quanto mais você não pode montar nada acontecendo, certo? Você tem que montar na linguagem que só poderia JavaScript e nós aprendemos a sintaxe de Java pular. Próxima lição. Eu falaria sobre a função da bebida vory, outras coisas, muito mais. Então não se preocupe. Neste momento, só estou a dizer-te como tudo é executado. E olha, agora nós temos aqui como coluna Sammy, e eu digitaria você o Enter e Hugh Andrew e aqui e aqui e aqui e sentiria com essa coisa. Grand, como você pode ver, está correndo instantaneamente como se nada tivesse mudado. Se eu fosse uma pessoa, teria problemas. Como é que está a funcionar bem? Mas para o pastor, não importa. Até mesmo criar espaços em branco. Você pode ter tudo em uma linha, para que possamos. Você pode até mesmo significar se eu este JavaScript mais tarde e nós não importa em tudo, você terá menor, bem, certo, mas para você, a fim de um acasalamento muito fácil de cozinhar, Limpar tosse habitual fazer espaços em alguns lugares. Então, por exemplo, não faça algo assim porque é mais difícil ler mais tarde. É melhor se for assim. Você pode omitir a maioria do tempo na rua Java. Nada, nunca linguagem de programação. A semi coluna. Então a informação de que isto era uma instrução, como você pode ver, ainda está funcionando. Mas é uma boa ideia colocar este semi cólon aqui porque, bem, é mais fácil manter o casaco. É como, você sabe o que você está fazendo certo? E às vezes pode realmente fazer alguns programas alguns erros. Então é uma boa idéia dedo do pé. Exatamente certo. Programas como eu faço. Você vai ver as próximas lições como eu faço a tabulação de fita. Então os índios, certo? Você vai ver como eu digitei para coisas como, por exemplo, espaços porque o espaço aqui é importante. Mas o espaço aqui não é. Isso é algum tipo de convenções. E tente apenas escrever coisas como eu faço e você terá um bom claro chamado que todo mundo vai adorar. Ok? E isso é muito importante porque você, como programador, trabalhamos com pessoas mais tarde, certo? E eles vão querer ler seu casaco. E você sabe, mesmo se você ler bom chamado depois, por exemplo, voltar para o seu casaco depois como eu sei que um mês, mesmo no último, você não entenderia tudo lá que tem programadores trabalham. Ele apenas faz alguma coisa e então você esquece a maior parte do tempo e bem, é boa ideia escrever as coisas corretamente. Bonito lindo. Quando eles são assim. Você acabou de voltar para o seu carro e você reconhecê-lo instantaneamente. Lembre-se do que Waas todas as coisas sobre, certo? Você acabou de vir para o seu cul De Luca fez isso e Wow. Ok, este mundo é assim. Ok, então é assim que as coisas são executadas. Lembra-se? Uma linha por lote por um de cima para baixo. Na maioria das vezes há algumas exceções extra esperar X que eu gostaria de falar nas próximas lições . Mas a maior parte do tempo é assim. Então lembre-se que bem, ele fez algo como, por exemplo, que você terá problemas como não um número, porque não é um por um. Então, toda vez que você faz uma música, algo não está funcionando. A culpa é tua, lembra-te, porque tens de escrever na linguagem do Oscar como era esperado. Certo, a zona. Boa lição. Muito obrigado. 8. Comentários: Olá Hoje eu vou dizer-lhe o que são comentários e por que eles são tão precisa dele? Olha, comentários são usados porque às vezes você não quer executar uma parte do seu casaco. E como eu disse na última lição, quando você fizer algo assim, não será executado. Não vai se separar direito. Não vai ser certo quando seus pacotes virem algo assim e ele vai esperar por algo assim. Então este é um comentário multi-linha que você não precisa Asterix entre. Isto é apenas algo que é adicionado pelo editor. Você pode digitar suas coisas e todas elas não importam. Mas se eles não importam, por que nós os adicionamos? Por quê? Porque bem, olha, mesmo aqui Na última lição, Eu criei também comentário de linha única que não foi interpretado, Por que eu editei porque eu queria te dizer que você sabe que variável significa variável. Então, qual é o propósito deste comum? Bem, eu queria explicar uma coisa, então se você quiser explicar algo, você deve usar o comentário. Se você quiser tornar o seu casaco mais fácil de manter, você quer usar uma vírgula. Se você quiser testar algo, você quer usar o comentário. Olhe, você também deseja usar comentários quando quiser definir escuta para o seu, por exemplo, JavaScript. Encontre como você pode ver, para alterar esta licença reunir você não precisa ir para algum lugar, e você não poderia alterá-la para adicionar a média de nós. Pode cair seu nome nisso, Sarah. Então você pode fazê-lo para informar sobre algo. Mas você ainda pode estar se perguntando por que será mais fácil manter frio assim porque, bem, mudança deste mês é muito pequena. Agora imagine. Imagine a situação em que você tem, tipo, você sabe, 500 linhas de código e você escreveu, você acabou de escrevê-las e você está orgulhoso de si mesmo. Tudo está funcionando bem, ótimo. Você entende tudo. Mas então você simplesmente vai embora deste projeto e você vai para outro projeto, outro projeto, e então imagina que você vai voltar para este projeto depois de seis meses. Um ano, dois foram Stein. E quando voltar, garanto que terá um vazio na mente dela. Você não vai entender nada. Quase bem, você, é claro. Depois de algum tempo, você entenderá o código, mas será depois de algum tempo, certo? Você tem que ter tempo para entender. E então coisas como a variável X é usada para blá, blá, blá, blá. Blá será muito útil. Estes funcionam que algo assim. Essa mãe, é algo assim. Coisas assim vão ser úteis para você e, ao mesmo tempo, lembre-se que você não está escrevendo no Lee. Sempre ligou para você mesmo. Se vais trabalhar com outras pessoas, os comentários vão ajudar. Além disso, as pessoas que estão trabalhando com direito com os comentários que podem ajustar. Leia um comentário sobre Redick e eles entenderão seu casaco, Foster. Certo. Então é algo Teoh. Lembra-se? Lembre-se que você atirar, criar comentários, a fim de casaco principal. Mais fácil de manter e deixar claro para todos. Nota sobre Lee, outros, mas também para si mesmo. Por causa disso. No futuro, quando voltares ao teu projecto, vais ser feliz em vez de veres um desastre. Você disse que não ser capaz de entender as coisas lá você estava apenas instantaneamente. Eu entendo tudo, e você vai mudar a coisa que você teve que mudar. Ok, então essa é apenas a lição. Muito obrigado. 9. Variáveis: Olá Hoje vou dizer-lhe o que é variável como usá-lo e por que usá-lo. Certo, isso é muito importante. Tópico um deve ser usado algo. O que é bom? Ok, vamos começar de como criá-lo. Para fazê-lo, você digita uma palavra var e que significa uma variável. Certo? Então esta coisa informa a nossa parte, senhor, que vamos criar alguma variável. Significa que vamos armazenar algo e nossas memórias sob o nome que bem, agora mostrar o nome fora da variável. Então essa coisa é apenas um lugar em nossa memória. Então imagine que é algo como, Ah, contêiner algo era algo que você pode colocar algo certo Você pode colocar lá qualquer valor que você não vai. Você pode história você pode mudar isso Olhe para o nome da variável não poderia ser muito capaz . Ele é capaz de muito direito Então você pode alterar esse valor todo o tempo que quiser. Você está criando uma variável sob o nome como esse e você pode alterá-la mais tarde sempre que quiser. E quando você mudá-lo, você faz ele pode mudar e todos os lugares ao mesmo tempo alterá-lo no topo. Por exemplo, do seu programa porque tudo está sendo executado de cima para baixo. Certo? Isso é ótimo. Está bem, mas talvez eu possa mostrar-te um exemplo melhor. Claro que vou mostrar-lhe, mas vamos começar a partir de agora atribuindo algo a esta variável para que eu possa atribuir algo instantaneamente . Por exemplo, cinco. E eu não poderia saber enviar para dentro com o nome do alerta fora da variável. E quando eu me refiro, ela é como você pode ver, eu tenho cinco anos. Eu posso mudar esse valor. Eu posso mudá-lo para, por exemplo, livre Porque eu mudá-lo aqui. E por causa das coisas em torno de linha por uma, agora será livre. Certo? Eu também poderia fazer algo assim. E também trabalhamos? Ok, quando eu não faço algo assim, como você pode ver, nós temos indefinido. Significa que nada te acertou. Ok, mas você provavelmente está agora por que ainda mais ousado usar algo como variáveis? Porque, bem, eu não poderia fazer algo assim, mas apenas tipo 5 e tudo funciona bem em todos os lugares, certo? Bem, há uma razão muito boa. Imaginemos que uma situação como essa na Europa teria conseguido o imposto. Sim, e acabou com o imposto sobre o valor acrescentado. Você pode em breve canalizar algo assim. Imposto sobre valor agregado e você acabou de adicionar ao valor do seu problema. Então, por exemplo, nós temos uma variável que estamos presente preço fora sapatos e eu iria digitar aqui eu sou 100 e eu tenho um bom preço fora T. V. Ok. E eu datilografar quem? 959. E este preço é o preço. Sem o imposto e este é um preço líquido, é chamado de preço líquido. Certo, preço líquido. O preço líquido significa que é sem as conversações. E agora eu gostaria de contar. Quanto ele vai com o valor agregado em ataques? Então eu faria algo que as garotas variassem o preço dos sapatos. E agora eu multiplicaria 100 por 1,23 Eu faria a mesma coisa para o preço das meninas fora da TV, certo? E agora eu digitaria você 915 9 Como você pode ver agora, se o preço muda direito, eu precisaria mudar ambos lugar por causa disso. Eu posso usar algo assim agora, quando eu mudá-lo aqui, ele mudaria também. Ok, mas isso é apenas uma ocorrência de por que se incomodar? Certo? Mas o que olhar desenvolver valor das conversas que adicionamos aqui que foi pessoa livre é algo que bem pode ser mudado. Em muitos lugares ao mesmo tempo, certo? Em muitos lugares ao mesmo tempo, Se mudarmos agora, o valor do imposto porque nosso país o mudou, você o mudaria em lugares? Mas bem, você poderia contar. Temos muitos desses caras, certo? Com os homens fora de produtos de uma só vez. Então você não iria mudar isso substituir algo assim. Por isso, é boa ideia criar algo IVA variável valorizado imposto e digite 20 livre. E agora você poderia saber fazer algo como um mais. Ah, se você quer alcançar 0,23 você precisa se multiplicar. Ah, 20 grátis. Então o pensamento por um 100 certo? Então um mais um 100 multiplicado por isso. Oh, e este assinado é usado para multiplicar no JavaScript welling mom em uma linguagem de programação . E agora podemos fazer algo assim. Está bem. E, mas podemos mostrar também o preço das meninas dos sapatos. Como você pode ver agora é 123. Sim, 100 bem implantados por 1,23. Tem 120 pés. Funciona bem. Também podemos mostrar o preço da TV. Tudo funciona bem. Então, agora, quando a válvula é trocada, você pode fazê-lo aqui. E foi instantaneamente mudar o preço, certo? E, bem, este usa-o fora da variável. Mas olha, aqui está uma operação que leva tempo, certo? Temos que multiplicar algo do que algo. E isso pode ser apenas começando outra variável, que você pode chamar, por exemplo, calculado, fornecer. E poderíamos fazer algo assim, certo? E agora algo assim e tudo vai funcionar também. Não podemos alterar apenas este valor aqui. Mas o legal é que agora que o cálculo é feito apenas uma vez e começa dentro da memória, certo, ele não precisa ser refeito. Tudo. Claro, foi feito nas duas vezes. Só sei, já que era esperado. Mas imagine que é feito umas 1000 vezes. Então é ótimo apenas contar, porque por quê? Para calcular tudo a cada vez que algo assim, certo? Melhoraria a velocidade do script. Então, por causa disso agora você pode ver por que as variáveis são necessárias corretamente, e elas são necessárias porque você quer reutilizar seu valor em algum lugar. Hum, você quer fazer o seu programa? Talvez também mais auto-descritivo. Você quer calcular algo porque leva tempo e nós o usamos. E bem, há algumas convenções sobre nomear botas Varaiya, como você pode ver. Olhe, eu nomeei nossas variáveis como aquela letra pequena, então os próximos trabalhadores boa letra maiúscula Capital e essas convenções de como nomear variáveis lá, então mais fácil de ler. O código é mais fácil de manter. Então lembre-se de nomear seu co suas variáveis corretamente. Eles devem ser auto-descritivos. Ok, você também deve saber que o tamanho fora letras dentro muito álcool mártires Isso significa que se eu criar duas variáveis, por exemplo, como que eles são dois valores diferentes. 20 onda livre nós grandes letras 20 direito a um diferente se eu fizer algo assim. Certo que, como podem ver, não são 23 porque mudamos esses Valium acima de tudo é lembrar executivo de cima para baixo. Então, vamos amarrar bit o tamanho fora letras dentro de assuntos de nome de variável variável. É muito importante porque pode levar a alguns problemas. Você pode me deixar seis por causa disso. Então, que outros erros você pode cometer? Você tem que se lembrar da morte. Você não pode iniciar o nome fora variável com o digital. Significa que você pode fazer algo assim como pode ver. Você está tendo alguma coisa? Estamos avisando porque quando você digita variável, você está esperando um nome da variável Saiba que o número eu sou número é apenas algo que pode ser contado. E a próxima coisa que você deve lembrar é que você não pode usar como palavras-chave de nome. As palavras-chave são apenas algo que vory eram variáveis. As coisas que nossos poderes pelo parceiro significam algo para isso. Eles são alas chave, então função variável estes não reservados Você não pode usar o rio. Sirva o que você verá muitas guerras de reserva mais tarde. Você só saberia qual deles é que você não deve usar os espaços, então imposto de valor agregado variável calculado blá blá. Como pode ver, não funciona. Está à espera de algo como coma. São coisas assim. Vai funcionar porque agora declaramos, que significa que criamos 1234 variáveis de uma só vez. OK, mas nós temos com espaços que ele não faz isso não sabe o que você está fazendo, ok? Não use passos em nomes. A próxima coisa que você deve lembrar é que você não deve usar operadores nos nomes para que você possa fazer algo. Valor var variável do imposto mais algo calculado. Não funciona, OK. Também é uma boa idéia saber que há homens de tipos de variáveis agora. Nós estávamos apenas adicionando alguns números estavam multiplicando-os. Mas há muitos tipos, então tipos fora variáveis. E agora sabemos que números eles são muçulmanos chamados em professores. E agora vamos saber algo como string, que é apenas ele continua caracteres. O que isso significa? Bem, por exemplo, eu quero dizer nome variável minando nosso prato de carro, certo? Para fazer isso, eu tenho que usar o casaco duplo ou a citação simples porque estamos parcelando para saber que é uma corda. É um correto seus personagens. Certo, porque quando eu estava assim, ele disse: “ Bem, Bem, estes não declarados. Isso é algum tipo de um dedo do pé de reserva, sabe? D para coisas diferentes, como o nome da variável em coisas como valores como caracteres. Por causa disso, precisamos usar casacos simples ou casaco duplo, e não importa. Em JavaScript. Qual deles você usa, apenas questão de preferência vai ficar com um que você tem. Também algo que o mundo é chamado de boliche, e é verdadeiras quedas. É só dizer, se algo era verdade ou não, você vai usá-lo com as declarações condicionais que falaremos tarde. Há algo como um levantar objetos. Estes são tópicos um pouco complicados. Também falamos sobre isso mais tarde, e você tem algo como não, o que significa que algo está vazio. Você pode apenas ah, inicializado. O que significa um sinal da variável, por exemplo. Uh, não. que significa que não há nada agora, algo assim pode ser necessário se você quiser. Você sabe, verifique se algo foi atribuído mais tarde no outro código porque você sabe que sua chamada pode ser muito longa e, bem, é difícil descrever agora por que usá-lo porque é um pouco complicado em um pouco mais programas complicados. Então só saiba que muito algo como um novo você tem também algo como, eu estou definido. Você notou isso no início de nossa lição. Quando você faz algo como variável A, é indefinido agora, certo? Porque não atribuímos nada para comer apenas indefinido. Então, resumindo nossa lição, a variável é algo que é capaz de vory significa que podemos armazenar lá. Podemos atribuir-lhes valores, e podemos alterá-los mais tarde. Para criar uma variável, precisamos digitar muito longe do que o nome da variável. Então podemos atribuir algo a eles aqui ou talvez mais tarde. Alterá-lo e variáveis são usadas porque seu programa é, em seguida, mais o script. Se porque você pode fazer algumas expressões, você pode fazer algum tipo de cálculo que vai ficar parado e vai acelerar o seu programa, você pode reutilizar seu casaco mais tarde. Mais fácil porque você pode, por exemplo, mudar, em seguida, o valor do imposto algo mais muito fácil. E ele será alterado em todos os lugares em seu programa em algo que também é lembrar usando dedo do pé. Lembre-se, quando você está criando variáveis toe nome Dane para que eles são auto-descritivos. Por causa disso, seu código seria mais fácil de manter, não só para outras pessoas, mas também para você. Você deve se lembrar de nomear variáveis assim. O mundo começou com a letra pequena e, em seguida, a letra maiúscula Let para cada obra, certo? Você também deve lembrar que o tamanho da letra dentro da variável nomeada importa realmente ler Bolton. E há coisas que você precisa lembrar que você não pode chamar você de variáveis de vida e que Bem, você pode começar muitos tipos dentro de variáveis como, por exemplo, aqui. Assim também podemos ver o nosso nome, o meu nome no meu estorninho. E você também pode adicionar texto um ao outro. Isso é algo novo fazendo algo como nome mais sobrenome. Então mais é usado toe adicionar duas cordas Podemos adicionar, por exemplo, espaço entre ele. Isso é algo que ele pode ver agora nós podemos ver meu nome e soberano para que possamos operar em variáveis. Você acha que algum tipo de operadores? Certo, isso é disposto. Essa lição. Muito obrigado. 10. const - variáveis constantes: Olá. Você notou que há escuridão em nosso editor? Sim, mudei para Visual Studio Code. Você pode usar um editor IDE. Você quer criar sites. Ok? Então, hoje vamos programar no código do Visual Studio. Portanto, você pode ver que existem diferentes opções de editores, como, por exemplo, Visual Studio Code. Bem, talvez seja o que usaremos mais tarde. Vamos falar sobre a palavra-chave const. palavra-chave Const permite que você altere a variável em algo imutável. Então, depois de definir o primeiro valor, o primeiro, você não poderá alterá-lo posteriormente. Quando algo assim seria útil. Vamos começar com um exemplo menos prático. Em seguida, abordaremos algo um pouco mais prático. Então, digamos que temos pi. Pi é a constante MOF, certo? E é igual a 3,14 ou até uma versão um pouco mais precisa é assim. E quando alertarmos o pi, vamos receber a mensagem assim. Há um problema porque agora podemos alterá-lo no meio, por exemplo, graça. E, para ser sincero, quando o programa é tão pequeno, podemos ver instantaneamente onde ele está, certo? Mas seu código posterior pode ter, por exemplo, 500 linhas. E se alguém fizer algo assim, você não se ferre. Você não será, todos os seus cálculos serão impróprios porque isso não é o mesmo que isso aqui. E é por isso que podemos usar a palavra-chave const em vez disso. E agora, quando alteramos o valor, como você pode ver, nada acontece, não vemos alerta. Por que isso acontece porque há um erro em nosso JavaScript quando você usa o atalho Control plus Shift plus I no Firefox ou control plus shift plus j no Google Chrome. Você pode encontrar na guia console, o console do seu navegador. E se houver um erro no JavaScript, você o verá aqui. Como você pode ver, erro do tipo tornozelo, constante de atribuição inválida P. Significa que você tentou atribuir algo à variável constante que não pode ser alterado. É imutável. Depois de definir o primeiro valor, você o define como unidades. Você não pode alterá-lo posteriormente e recebemos um erro e nada depois dele poderá ser executado. Então, o alerta ou uma anedota aqui logo abaixo, esse código aqui, aqui é mais código. Não será executado. Ok? Então isso simplesmente interrompe o programa. E isso significa que, bem, ninguém quer o Programa sozinho. Ninguém será capaz de cometer algum erro. Ok, essa é a primeira coisa, é, vamos dar um exemplo prático e mais prático. Mas antes de começarmos, veja, você deve sempre chamar suas variáveis que são constantes usando letras maiúsculas. Então, vou clicar no atalho F2. Gostei muito dessa ferramenta de edição porque você pode mudar em cada ocorrência. O nome da variável. Você acabou de pressionar o F2 e pode alterar o nome de em cada ocorrência. Eu não precisava fazer isso manualmente em qualquer lugar, certo? Então eu mudei a constante em maiúscula porque você mostra ao colocá-la em maiúscula para todos os outros programadores e também si mesmo que essa é uma variável constante, ok? Agora você pode distinguir instantaneamente as variáveis constantes das variáveis normais quando elas são usadas posteriormente no programa, certo? Lembre-se de que existe, pode haver mais linhas aqui quando usamos Pi, podemos ver instantaneamente, ok, isso é constante. E quando alguém faz algo como um número ou isso não é uma constante, certo? E o exemplo prático de usar em JavaScript algo como a palavra-chave const será, por exemplo pontuação máxima para o jogo que você está criando, certo? Então. Imposto sobre valor agregado, por exemplo, Grã-Bretanha. Ou o comprimento máximo do poste que alguém pode fazer em seu antebraço instantaneamente. Você pode ver, observe que todas as letras estão em maiúsculas. Usamos o sublinhado quando há mais de uma palavra, certo? E mais tarde, quando alguém usa algo como a OU, então isso é constante, ok. Então, se eu quiser alterar esse valor, só posso fazer isso de um lugar onde ele foi definido inicialmente, certo? Mas não posso mudar isso depois. Esse é o valor que eu posso pesquisar facilmente em um lugar onde todas as constantes são feitas, por exemplo, certo? Portanto, isso é algo que foi criado para aumentar a legibilidade do seu código e garantir que haja menos erros em seu código. Portanto, se você não o usar, nada de ruim acontecerá. Bem, talvez eles não se separem do volante. E seu código ficará menos legível quando você não o usar. Use-o quando achar que a variável não será alterada posteriormente. Essa é apenas a lição. Muito obrigado. 11. Operadores relacionais: Olá Hoje vamos falar sobre os operadores relacionais que são mais tempo chamados operadores de comparação. Bem, o que faz relação quando você tem duas pessoas e elas estão em relação? Bem, eles estão conectados uns aos outros de alguma forma, então podemos compará-los uns com os outros. E quando você quer se relacionar com as coisas um com o outro, você as compara, certo? Então operadores relacionais são usados para comparar variáveis toe. E você pode estar perguntando por que fazer índio necessário quando tomamos algo como variável A é igual a cinco em, então nós empatamos b igual a livre. Então sabemos que aqui são cinco e aqui está libertado. E por que precisamos compará-los? Bem, você precisa comparar duas variáveis porque, por exemplo, exemplo, às vezes seu ver um impulso são atribuídos a partir do conteúdo do site. Você não está digitando aqui exatamente cinco, certo? Você está apenas pegando o conteúdo do seu site e aprendemos a fazê-lo mais tarde e inserindo aqui, por exemplo, quando você está criando senhas e, em por exemplo, seguida, o passaporte fevereiro, onde o usuário tem dois aposentado o senha que você deseja comparar se ambas as senhas forem iguais, certo? Então ele por engano. Não digite algo errado e, em seguida, ele provavelmente teria causado o seu possível. Não vamos trabalhar bem, certo? E é por isso que você precisa de algo como uma razão compa. Certo? E usaremos operadores tradicionais. Assim, o primeiro operador tradicional é igual sinal. E isso é apenas comparar duas coisas. Se eles são iguais um ao outro direito em. E você tem dedo do pé. Realmente? Lembre-se que você tem aqui dois sinais. Não um porque um sinal é usado para uma assinatura algo certo? Você quer atribuir como aqui cinco para um quando você tomar algo assim, você está comparando essas duas coisas não afundou. Ok? E isso é muito típico. Aqui está o começo mais. Programadores estão fazendo isso realmente lembrar que isso não é o mesmo que isso, certo? Então, como usá-lo? Vamos usá-lo no comando de alerta. Então nós allard, por exemplo, é cinco é um igual para ser algo que e como você pode ver como resultado, nós temos falso porque bem, livre não é igual a livre, como eu quero dizer cinco anos não igual a livre livre do dedo do pé . E como você pode ver, o falso é o tipo de boliche, que é verdadeiro ou falso. E assim o resultado dos operadores relacionais é um tempo de boliche. E você pode usá-lo mais tarde na declaração condicional onde você vai dizer algo como, se algo assim é igual a isso, então fazer algo assim, por exemplo, para isso, o usuário que as senhas não são o mesmo ou algo que, hum assim e este é o operador tradicional básico. E você, como você pode ver, temos aqui avisando que diz ciência livre esperada como essa. Por que precisamos digitar grátis aqui e qual é a diferença? Como você pode ver, o resultado é o mesmo. Mas quando você digita coisas assim, ele verifica. Se as duas variáveis são ou anti chamada, ok, isso significa que eles têm que ter o também ao mesmo tempo. As variáveis devem ser do mesmo tipo off para. Então agora há um número, e este é um número, e quando fazemos coisas assim, temos aqui, também. Mas às vezes você pode ter uma corda e depois vai ser falsa. É uma boa ideia. dedo do pé tem algo assim porque você pode. Mas fazendo isso assim, cometa menos erros. Ok, mas se você sabe o que está fazendo e sabe como as coisas estão funcionando, você pode usar muito fácil só para assinar. Mas é bom fazer algo que você tem problemas que, pelo menos no início OK, então essa é a diferença. Você também pode fazer coisas como e, em seguida, ponto de exclamação e o sinal de igual. E esta coisa só vai verificar se duas coisas não são iguais uma à outra, certo? Então, quando temos algo como aquele Oriente cinco não é igual a livre, eles são diferentes. Sim, são diferentes. Então é verdade. E se eles são, hum, o mesmo, então nós temos falso. Claro, em, bem, você também tem algo assim. Então, se os dois algo é maior do que outra coisa menor do que maior ou igual a ou menor do que são iguais a. Então, quando fazemos algo como um é maior do que ser não, não é maior do que ser. É falso porque eles são iguais quando fazemos algo assim. Isso é verdade porque cinco é igual a ser. É tudo maior, mas é a mesma coisa, certo? Então é verdade e nós também podemos fazer algo assim. Então, quando fazemos assim, é a Tara. Quando você faz assim, é falso. Quando fazemos, é assim. Também é falso porque sete é maior do que eu. Claro, você pode usar aqui e o outro. Você não precisa usar variáveis em ambos os lados para comparar qualquer coisa dirigindo para lembrar. Ok, assim como Onley essa lição. Muito obrigado. 12. Operadores lógicos: Olá Hoje vamos falar sobre operadores lógicos. Operadores lógicos parece o mesmo que você provavelmente conhece do ensino médio a partir das aulas de matemática. Se você sabe matemática muito bem, você não terá problemas em digerir tudo. Mas não se preocupe, vou mostrar-lhe tudo sobre operadores lógicos. Operadores lógicos estão trabalhando em valores lógicos. Então eles estão trabalhando em zero, o que é falso, e um que é para. E, por exemplo, há algo como Nate negação operador, que está dizendo que não. Isso significa que se você tiver, por exemplo, algo assim, mudará o resultado para um. Se você fizer algo assim, seus resultados serão zero. É só dizer que não é falso, que ainda não é para onde este falso direito? E, ah, há mais dois operadores que são um pouco mais difíceis, que é a conjunção e alternativa Colin Junction. E você deve chamar essa coisa e essa junção, que às vezes é chamada de alternativa. Ok, então como funciona quando você tem, por exemplo, por exemplo, em seu site e com a senha e os talões de cheques para, por exemplo, aceitar termos e condições, você pode Às vezes, uma pessoa a duas amarra as duas partes? mundo é o mesmo. Então você quer verificar se há senha? Bem, estou intrigado. Um é igual a senha também. E ao mesmo tempo que você quer,Por exemplo, Por exemplo, ver se os talões de cheques era assim e ele é verificado e o número de cheques ou algo que direito Você quer ver se algo é cheques? Exemplos de é verificado projeto termos Leste. Então você quer fazer uma conjunção com duas expressões ao mesmo tempo, então você tem que usar o operador lógico. E como a conjunção peculiar quando você tem expressão um e expressão para você vai obter resultados como quando você tem zero e você sabe que os resultados serão zero. Quando você tem 10, o resultado será zero. Quando você tem 01 o resultado será zero. Mas com de Juan e um, você terá uma série em um, que significa que a conjunção é para Onley. Se ambas as expressões são duas ao mesmo tempo, que é muito fácil de entender porque bem, quando você diz que eu quero ir ao cinema e depois disso, eu quero comer o sorvete, certo? Significa que eu quero fazer as duas coisas ao mesmo tempo, e é por isso que só acontece quando ambas as expressões são também. Então, em situações como essa, essa coisa que ambas as coisas retornariam através de Lee se as senhas fossem as mesmas e no mesmo tempo, termos fossem verificados. É por isso que é legal, porque você pode fazer algo assim de uma vez. Ok? E você também tem algo como eles nesta junção. Mas esta junção anda um pouco diferente. Bem, esta junção funciona assim. Significa que quando você tem uma maneira alternativa de fazer algo que você está escolhendo. Então, quando você tem 00 você não tem uma alternativa. Então o resultado zero quando você tem um e zero tratando um a partir daqui, bem quando você tem 01 interessante. Estes. Então um quando você tem um e 100 tratando estes ou dia, então o resultado é um e o S. Então é uma boa idéia escrever algo assim. Essa disjunção é cai quando ambas as expressões são falsas ao mesmo tempo. Então vamos treinar a coisa que eu diria agora sobre estado condicional e IVE virtual. É uma declaração condicional que você pode usar digitando algo no pai é entre esses dois lados. Aqui você pode digitar algo como expressões, certo? Então quando eu faço coisas como se um é maior do que o Oller então para testar e como você pode ver, quando nosso programa é executado, nós temos aqui teste. Então essa coisa só vai mostrar se um é maior do que ser. Não é assim. Não vai mostrar a viúva. E agora podemos verificar se ao mesmo tempo, por exemplo, B é igual a cinco. caso afirmativo , mostre o teste. Como podem ver, está a mostrar-lhes o nosso teste. Mas quando mudamos, por exemplo, ser o livre que você não é é isso é maior do que ser. Sim, então temos calor um Verdade é igual a cinco. - Não. Então você tem aqui é aqui. Então um e zero nos dá trabalho como resultado zero. Então isso significa que esta hora não vai ser mostrada se você usar alternativa que essas liminares Jonathan você não vai é que nós temos agora aqui mostrado teste porque um e zero nos dá um. E você pode sempre alterar o resultado usando negação. Então, quando nós projetamos assim e eu usei o ponto de exclamação Agora mudaria a direita 120 , porque esta coisa está nos dando um. E essa coisa está mudando o resultado de 120 Como você pode ver agora, não está nos mostrando mesmo que eu esteja refrescando este lado. Então é assim que o operador guerra. Claro, é uma boa idéia usá-los nas coisas mais práticas, como algo assim. Mas eu estou mostrando isso agora, porque, você sabe, nós não sabemos como pegar as coisas do lado. Aprenderemos todas essas coisas em futuras lições. Essa é apenas a lição. Muito obrigado. 13. Operadores do Bitwise: Olá. Eles iam falar sobre os operadores sábios de licitação. Os operadores Beatriz, como o nome sugere, estão trabalhando pouco. Mas o que são batidas? Bem, pouco são uma tensão elétrica que está vindo para o nosso PC, e eles são interpretados como estado zero ou um. Então nós eles estão saltando entre zero e uns e eles estão saltando alguns fundos porque temos um processador muito bom e outras coisas assim, e eles estão seguros em algum lugar. Lembre-se da bolha deles. Há muito para pará-lo, mas bem, mas bem, esta é apenas uma informação que é interpretada no reboque. Qualquer coisa que você pode ver em seu computador pode que as coisas até mesmo aqui editor, outro programa. Então podemos trabalhar usando os grandes operadores sábios sobre eles, e você pode pensar que seria mais rápido. Sim, seria mais rápido. Mas o problema é o JavaScript. Se você estiver trabalhando com o pitch, os operadores sábios estão fazendo algo como mudar os tipos das variáveis com as quais você está trabalhando , e isso é um pouco mais lento. Então, em javascript você gostaria que a maioria do tempo evite usar grande operador sábio. Eles são legais em outras línguas, mas aqui é muito raramente usado. Então esta lição é um fato bastante interessante para você. Ok, então se você está preso, apenas pule essa lição. Mas espere um segundo. Há algo que você precisa saber. Olha, aqui está uma pessoa, uma única pessoa licita sábia, e isso significa que é muito semelhante ao operador lógico. Uma contração que estava assim. Ele também funciona muito semelhante, mas este está trabalhando em licitação. Este está trabalhando em valores lógicos. E você sabe que tem dedo do pé. Lembre-se de saber usar estes por um místico, certo? Porque não seria bom para você. E você precisa saber onde os grandes operadores são usados no JavaScript. Bem, eles são usados principalmente quando você quer vir para algo, mas é uma situação muito rara porque outras línguas estão fazendo melhor. E muito você quer fazê-lo pela fuga de trabalho. E, bem, quando você quer fazer algo com portas com os soquetes, então você quer verificar se há ah, algo descobrirá linho. Nós drogas, que são algum tipo de estado. Steve, Algo é, por exemplo, não abriu outras coisas assim. Então isso é muito, muito certo. Então, mas é legal saber como nosso computador está funcionando. Então, se tiver tempo, assista a este vídeo. Ok? Então como eu uso, por exemplo, números na vida real que você está usando que são um destino que está no sistema decimal, estão trabalhando quando você morre por algo 126. A verdade é que estamos fazendo algo como aquele multiplicado por 10 que é um sistema decimal , e para o desligamento, dois para o poder desligado para então na parte de segundos destes significam que está certo. É bom quadrado, então 10 esguicho e isso é o que 100 multiplicado por um é 100. Então esta é a verdade sobre o nosso sistema. E então apenas coisas gostam de multiplicar por então mais seis multiplicado por 10 para o poder desligado zero. E isso é o que fazemos, como multiplicar tudo. É 100 multiplicado por um. É um então multiplicado por dois é muito intenso. Então é 120 mais zero. Múltiplo, uh, para o poder de 10 para o poder de zero é sempre um certo. Qualquer coisa para a série 1 multiplicado por 66. Então é 126. Então é a mesma coisa. Por que estou mostrando coisas boas porque temos algo. O que é um sistema binário? E sim, é a coisa com que vamos trabalhar usando os operadores sábios de licitação. Então 1010, por exemplo. E isso é agora não, 10 mil vezes. Mas isso é algo como um multiplicado. Por esta altura temos outro sistema, por isso é também. E para desligar, vamos contar 012 grátis. Temos que vir da direita para a esquerda de zero para ver o que joga isso. Este está às 012 de graça. Então, para desligar a energia, mais ligado. E então temos zero multiplicado pelo sistema para a energia fora do lugar onde estamos no momento. Então, desta vez Teoh mais um multiplicado por dois para o poder desligado um mais zero multiplicado por dois para o poder desligado zero. Então, quando candidato vai ver que temos algo como a parte do cartão é um zero multiplicado por qualquer coisa é sempre zero mais. Por que multiplicado por dois Teoh mais zero multiplicado por qualquer coisa. É aqui. Então você pode ver quando você tem zero aqui isso significa que nós não precisamos nos preocupar contar nada. Então vai ser um pouco mais fácil contar aqui, certo? Podemos fazer algo assim e então algo assim e é igual a 10 no nosso sistema. Vamos, por exemplo, massa um pouco mais rápido. Vou mostrar-lhe o atalho dessa multiplicação para que você faça isso um pouco mais rápido. OK? Sempre este lugar, quem é um? Este lugar ainda é este lugar é 48 16 30 para 64 ele continua. Por quê? Porque não é que sempre temos que multiplicar por dois para isso algum tipo de poder. E ah, aqui quando você tem 11 multiplicado por dois para a energia desligada. Zero é multiplicado por um precisa de um, certo. Então aqui pode ser apenas um ou zero neste lugar. Certo? Então é um mais Teoh mais quatro mais oito se houver sempre um. Mas se não há como zero. Ah, bem, se não houver um, então não precisamos nos preocupar com esse lugar, certo? Estamos apenas avançando. Então, quando você começa, por exemplo, estes foram apenas em um mais quatro mais dois, seria 12 mais para sua 14 Muito fácil. Então isso é um atalho para fazer essas coisas. E bem, agora vamos usar os nossos predadores. Finalmente, vamos fazer isso algum tipo de Ah Lorant, algo como 10 14 e licitar operador sábio. Fizemos o lance era operador e está trabalhando da mesma forma que o operador lógico, mas ele está funcionando bem na batida. Então, se você não sabe a última lição, por favor, volte lá. Ah, então é de Lee para Onley quando ambos os argumentos mas expressões são dois ou a situação em dívida . Ambas as batidas são uma. Então 40 como tomar 14. E, bem, é 110 vinho porque é um mais quatro mais dois mais zero direita um mais quatro mais dois é 40. Lembra como se faz? É como se aqui estivesse comendo 1248 e você está contando mais tarde. Mark 10 é a coisa que fizemos aqui e agora, se estamos assumindo apelidado certo, estamos fazendo algo assim com o lance sábio e nós teríamos pensado que um e um nos dá 11 e 001 e um nos dá enquanto 00 G pedem um, porque um e um está tendo ambas as expressões também. Aqui temos também ambas as expressões através e este é o único momento em que a conjunção quando o operador e vai dar-lhe o um em outra situação que você tem poderia ver. Então isso significa que o resultado é stent quando fomos os primeiros. Como pode ver, temos aqui 10. Ok, vamos tentar outro. Então o lance sábio são tão nessa situação, temos bom de um e 1/2 11 e zero nos dá um porque a alternativa é falsa. No Lee venceu. Ambas as expressões são falsas. Então, assim e por causa disso, temos agora 40. Como pode ver , são 40. E agora você pode ser como mano, sério? Por que nós, Teoh, precisamos de algo assim? Como eu disse anteriormente, é muito difícil de usar, mas você pode, por exemplo, usá-lo como algum tipo de linho. Por exemplo, este está dizendo que há um usuário que tem privilégios anteriormente para postar. Isso significa que ele tem privilégios para ler estes significa que ele tem bons privilégios para editar pose ou algo assim. Isso e com essas coisas, algum por cento, ou o lance sábio ou o exclusivo. Ou você pode fazer operações como o você pode simplesmente verificar o que o usuário. Quais os privilégios que o usuário tem Andi nos soquetes. Você pode mudar. Verifique se, Se isso é como um D complementa tudo que está certo, você tem tudo indo bem. Outras coisas assim. E você também pode comprimir algum tipo de luta porque você precisa lembrar que eles têm algo. Corpos chamados compra mordidas estão vestidos, continua oito batidas, e você pode ter mais de um pela maioria do tempo você tem bom, por exemplo, foi um número. Você tem quatro mordidas, então você tem quatro multiplicado pelo anúncio. São 22 batidas em um. Então a verdade é que este ser é parecido com isso e então você não gosta de 20 ovos? Zeros são para ele, certo? Este é o número dois, ok? E bem, os zeros poderiam ser usados, e você pode comprimir os valores humanos inseridos sobre como as compressões funcionam na maioria das vezes. Então porque eles são um lugar não usado que poderia ser usado e interpretado mais tarde pela sua compressa ou , hum, você sabe o programa para fazer você certo? Então isso é bom. É por isso que algo assim estes o usado, mas é claro em outras línguas também é mais rápido. Improvável em javascript não é. Ok, então nós temos um assunto dolorido exclusivo ou estamos apenas trabalhando quase como aquele Bid sábio está em comprado. Bem, isso é algo assim. Expressão. Uma expressão para resultados. Então, se você tem um e zero, ele nos dá também um quando ele zero e um, ele nos dá também um. Mas quando você tem um contra um, então você tem zero exclusivo ou isso significa que eu sou exclusivo. Só quero escolher uma coisa. Ok, eu não quero escolher. Então, se você tem zero e zero, você também tem zero. Então, se você fizer algo assim, significa que vamos agora ter o quê? Zero zero E aqui um que significa que temos o que ele seria um, ele também será. E aqui está por isso é para enquanto o atualizamos. Como você pode ver, temos aqui para você também pode mover bits. A esquerda por um. Nós só temos esquerda mudando para a direita, mudando para movê-lo para a direita. Então, quando fazemos, por exemplo, algo como aquele 14 em nós movemos para um lugar, por exemplo, para a esquerda. Então teremos o quê? Este vai mudar-se para cá. Estes, nós nos mudamos para o lugar fora destes. Este vai se mudar para o lugar deste antes dele. Você tem zeros, certo? Então será algo como 0111 Andi, significa que ele este um mais dois mais quatro. Então? Então são sete. Como pode ver, temos 17. Então, isso significa que dividimos 14 por sete. Isso é um fato muito interessante. E é mais rápido em outras línguas. Mas não neste. Direito de dividir por dois usando algo assim. E bem, você também tem algo assim. Você pode movê-lo para a esquerda. Então, temos sido 11100 Então, quando você está se movendo para a esquerda, imagine que nós temos aqui homem é euros. É como, bem, bem, eu movi esses zero para este lugar, certo? E não, tudo é movido pelo quê? E bem , serão 20. Por que eu sabia disso? Porque eu multiplicei por nós podemos contar, é claro. Também um, 24 mais oito mais 16 em 16 mais dedo do pé da ID Digite o dedo 24 mais 4 28 Então tudo funciona bem. E temos também licitar negações sábias. Quando fazemos algo assim, você pode pensar que mudar 11 zero e a negação funciona como mudar 0 para 1, certo? Então seria o seu mil e um por causa disso, você provavelmente pensaria que nós conseguiríamos então você não é essa dessecação. Só usamos a negação. Você sabe, a negação lógica. É menos 50. Por quê? É menos onde ele está menos como dissemos que o nosso homem é o euro. E se o primeiro 0 ele mudou o um e porque estamos usando o nome negação lance operador sábio , estamos mudando todos os zeros dos resultados agora em todos os lugares um e não e em como 0001 no final, certo? O 1º 1 diz que este é um número que não é positivo. É negativo e, bem, você sabe, você sabe, alguma forma eles têm que fazer. Eles tinham que criar algo assim, a fim de, você sabe, mostrar qual deles é negado com secura, positivo para contar. E foi assim que eles fizeram. E então está contando a maneira grande e diferente. É por isso que, em negação está trabalhando assim que lhe demos aqui negado no número de número não um positivo, mas o tem, ele admite, fato bastante e interessante. Grandes operadores sábios raramente são usados. É bom saber que eles existem, talvez até mesmo, só para saber que você, o laticínio, algo como um único por cento e contas simples são porque você não me obrigaria , usando-o não é bom caminho. E quando você encontra algo assim e não vai se surpreender para você, logo quando você encontra personagens como esse no programa de outra pessoa, onde eles estão usando Advanced Stop é como, por exemplo, soquetes Ok, Isso é apenas uma boa lição. Muito obrigado. 14. Declaração condicional: Olá. Então eles estavam indo para falar sobre estado condicional declarações condicionais são declarações que podem condicionar algo e eles são usados para executar ações diferentes com base em condições diferentes. E, bem, quando algo assim vai ser usado. Por exemplo, quando você quer validar seu formulário, você não sabe exatamente o que vai ser amarrado lá, certo? Você não sabe se, por exemplo, o usuário vai digitar a senha corretamente da maneira que você deseja. E então você pode apenas enviar-lhe um alerta antes que ele envia o formulário eso ele não vai precisar dedo do pé, atualizar tudo ou aposentado tudo novamente. Outras coisas assim. Ele seria informado instantaneamente que algo está errado, certo? Você não poderia informá-lo. Mas só podemos fazê-lo porque podemos condicionar. Podemos verificar se a variável é assim. Se algo na sua página é assim, claro, agora não sabemos como tirar as coisas da nossa arma. Acabaremos com isso mais tarde. Mas agora seria uma lágrima. Fazia cócegas em exemplos exatos, mas pelo menos ele saberá como essas coisas funcionam. Muito bom. Ok, Então, como criar uma declaração condicional simples que você pode tomar se e depois se você depois. Se você tem algo como parentis é e dentro dele você coloca essa condição ok. E, por exemplo, podemos usar o operador de comparação assim e come cinco maiores que três. Sim, é maior que livre. E esta coisa vai devolver um. Certo? Porque se algo passar, vai devolver um. Se algo não é verdade, vai retornar zero. E se esse insight de expressão aqui for para, então a instrução abaixo de uma linha abaixo será executada. Se não for verdade, não será executado. Então, se eu fizer algo assim, como você pode ver, nós temos aqui um alerta. Por quê? Porque essa coisa era assim e por causa disso, vai ser executada essa linha de código quando você fizer algo assim. Então aqui temos falso. Agora, como você pode ver, nós não vemos nada. Ok, então essa é a simples. E você tem que lembrar que qualquer valor diferente de zero Páscoa, então se você tem algo assim, ele vai ser executado. Se você tem zero, ele não vai ser executado se você tem menos valor, ele vai ser executado. Se você tiver uma string, ela também será executada. Ok, então vamos criar duas variáveis, por exemplo, um, uh e vamos fazer algo um pouco mais difícil. Então, se um é maior do que ser, então eu quero digitar. A é maior do que ser. Eu também poderia fazer algo assim para que eu possa conectar cordas como essa. E como você pode ver, cinco anos porque é também. Quando mudamos assim, não está funcionando. Claro, coisas como variáveis não vão você não quer virar para verificar. Variar com o tipo aqui, os valores nele porque você sabe como eles parecem certos. Mas você não pode tirar todos esses valores do seu site. E agora um é maior do que ser, e às vezes você pode querer verificar também a outra situação, por exemplo, senão. Se assim for, se houver outra situação, fazer algo como um é mais baixo em, então sendo e, em seguida, vamos alertar A é menor do que eu. Então é mais baixo do que livre. Sim, não está funcionando. Então, como funciona? Tudo está sendo agarrado de cima para baixo. Então aqui. Ei, nós fora do curso encontramos variáveis e então nós verificamos se um é maior do que ser. Não é. Então aqui temos zero. Então essa coisa não vai ser executada. Mas então tomamos outra situação se é abaixado e ser, Sim, Sim, eu uso mais baixo do que ser. Então podemos mostrar algo assim. E também podemos fazer algo assim. Nossa casa e essa coisa serão executadas se todas as outras condições não forem cumpridas. Então podemos montar algo como I igual a B é igual a estar certo porque a situação na mão é menor do que livre. Quando fazemos, por exemplo, livre, livre, livre é igual a amigos. Ok, então há algumas coisas que você precisa saber agora porque essa coisa minha BZ, você quer encerrar agora esta lição. Mas não faça isso porque há algumas coisas muito importantes que o que você precisa saber. Caso contrário, você cometerá muitos erros. Olha, você pode fazer algo assim. Você pode fazer apenas isso se fácil, Mas você pode conectá-lo com o antigo outro se e você não precisa usar outro. Mas você também pode fazer algo assim. , Assim,você pode usar se e mais. E você precisa se lembrar disso quando você tem uma situação boa como essa. Se e se quando esta condição for atendida, esta instrução será executada. Mas esta condição não será verificada novamente. Se você está usando o trabalho da casa, vamos verificar. Então, se eu decidir como cinco, nós fazemos a mesma condição em ambos os casos. Então você pode estar pensando que isso vai ser executivo. Isto vai ser executivo, certo? Não. Cinco é maior, burro livre. E isso é tudo isso aqui. Esta frase não vai ser executada, certo? Se você queria executar algo assim, você digita If novamente cinco é maior do que 35 é menor do que três vai lembrar que se você quiser doente algo a fim de fazer, por exemplo, o seu programa mais rápido. Você deve verificar as coisas que são mais que tem a maior probabilidade acontecer primeiro porque eles, em seguida, o então você vai ver. Ah, a instrução será executada abaixo dela e todas as outras instruções. Todos os outros cheques que sabemos serão executados. Tudo bem. É muito importante. E você não vai cometer um erro como esse. E há mais uma coisa que você precisa se lembrar. E se eu fizesse algo assim? Ah, assim. E eu me submeti. O que você acha que será mostrado? Qual foi a primeira vez que você pode ver? Você pode ver que dois é menor do que livre e, em seguida, teste. Ok, isso é algo bonito que você acha que aconteceria. Mas o que eu fiz? Algo assim. Você pode estar pensando que só isso será mostrado. Como pode ver, ainda podemos ouvir. Vê um teste? Por quê? Begu? É aqui. Por que podemos ter aqui. Azman entra como queremos. Agora você pode estar pensando, Ei, é verdade que as instruções da tese devem estar em torno disso. Não, mas você sabe por que os espaços não são interpretados. Certo? Então precisamos sempre mostrar exatamente o que queremos executar. Oh, nós não queremos executar como executar pobre. Então uma instrução de uma vez. Bem, então você tem que usar um sinal como esse. Então temos que usar colchetes que se parece com isso Se você quiser agrupar mais de uma instrução e, em seguida, quando usá-lo dentro. Como você pode ver agora nós podemos ver no cinco é maior que pés. E isso é tudo porque agora, porque fora desse intervalo, você está interpretando essas duas instruções como uma só. Então você quer executar mais de uma instrução que você pode crescer. Agrupe-os, você pode mesclá-los usando esses colchetes. Certo. Certo, então se eu souber algo assim, essa coisa vai aparecer quando eu fizer algo assim. A AlertaAé igual a B e só estas coisas. Então você precisa lembrar que, se você não fizer colchetes Onley, uma instrução será executada . E, bem, você deve mais tempo Apenas dois colchetes, mesmo se você está fazendo em uma instrução. Se você está pelo menos implorando, ok, porque você não tem é fornecido que poderia torná-lo poderia ser problemas potenciais para você . Eu não fiz que colchetes encaracolados porque eu quando eu tenho apenas instrução muito curta porque eu fiz eu sou pessoa muito experiente no programa direito sobre o seu atrás Viet, o começo, fazendo alguns problemas por causa disso. E ele só vai levar um monte de tempo dois d código de barras como esse em. Por isso, talvez às vezes seja uma boa ideia fazer apenas uma instrução. Aparelhos encaracolados. Certo, então é assim que as declarações condicionais funcionam e você sabe como evitar erros. É só essa lição. Muito obrigado. 15. Declaração condicional de curtado: Olá Hoje vamos falar sobre declaração condicional encurtada, que é chamado operador Ponto de interrogação e carvão e bem, você sabe, os programadores são preguiçosos e às vezes você quer toe evitar escrever muitas linhas de código Quando algo é óbvio. É tão fácil de escrever. Você não quer mentir muitos forrados. Claro que vou te mostrar em breve. Um exemplo. Muito prático, então. Mas vamos verificar. Em primeiro lugar, como funciona? Você toma algo como expressão aqui. Então você sabe, algum tipo de condição aqui. E então, se a expressão for verdadeira, então essa coisa aqui vai ser devolvida, e não é. Esta coisa vai voltar. O que isso significa? Bem, vamos esquecer o corpo por um segundo. Vamos criar um exemplo. Eu quero verificar se o X é, por exemplo, mesmo. Ok, então como fazer? Como eles fariam isso? Temos apenas uma declaração condicional normal. Eu faria alguma coisa. Eu fiz caverna ex Mort Então modo operador Eso Eu quero verificar se não há um resto. Ah, dois é igual a zero. Então não há remanescente, certo? Por quando você divide por dois, que significa que é par número e, em seguida, podemos dizer que os olhos para o seu eu acho que este número é mesmo pode criar variável especial, por exemplo, é par. E agora podemos dizer seu mesmo ISS para caso contrário você sabe que é mesmo falso. Temos um aviso claro porque diz que é boa idéia dois anos aqui, ciência livre como essa, porque então você sabe que você está agora comparando o mesmo tipo de variáveis. Ok, enfraquecer. Não podíamos usá-lo. E agora como? Como podemos saber? Digamos que o número é igual para que possamos fazer algo assim, por exemplo, e são oito. É muito sim, fazer é mesmo cinco não é. Mesmo assim, temos falso. Como você pode ver, tivemos que escrever 1234 linhas de código. Há uma linha de código, que seria mais rápido. Isso é o mais rápido com isso. Com isto. Pense sobre assim que nós digitar expressão para ovos multi fazer igual a zero e, em seguida, retornamos para caso contrário queremos toe retorno falso. E o problema é quem ouviu o guisado ou as farsas voltaram, mas para o lugar que você os designou. Você pode, claro, fazer algum tipo de função. Você pode invocar funções, anos de exemplo. Outro. Certo, Andi, mas que seja. O que quer que seja feito, será feito. Se isto é verdade neste lugar, neste lugar, não é. Vai ser executado quando esta coisa for falsa, por isso não podemos atribuir a algo assim. Certo, então podemos levar isso a comum, porque não importa para nós. Como você pode ver agora, é bem mais rápido. E agora podemos digitar um Stephen e sim, está funcionando falso. Mas, você sabe, nós podemos ainda mais atualizado se você quiser tê-lo apenas como uma saída. Nós não queremos iniciar esses valores. Por que não fazer isso assim? Tudo bem, agora temos lágrimas são falsas, e podemos melhorá-lo. Por que não? Você sabe, dizer algo para as pessoas. Por exemplo, o valor é par. O valor não é mesmo os valores. Nem mesmo o valor é, então você sabe, você chama Allah ouvir sobre qualquer coisa. Você pode verificar uma coisa aqui, pai bonito. E depois só outra. A pessoa que algo está bem ou algo é não. Embora Cain, e você apenas fazê-lo em uma linha. Você não tem que fazer algo assim. Você não precisa apenas ter cargas de códigos fora de linha apenas para uma tarefa simples, certo? Então é assim que se usa. É quando você usa. E, como você pode ver, perceber que é uma boa idéia às vezes encurtar nossa programação. Isso é apenas bom. É isso. Muito obrigado. 16. Interruptor: Olá Hoje vamos falar sobre instrução switch, que está falando, alternando entre valores Você enviou para este switch? E no caso de acontecer algo que é enviado para o switch, você pode executar esse código a instrução que você deseja. Então é realmente algo como as declarações condicionais, e você pode fazer exatamente as mesmas coisas com geladeira como você pode fazer com as declarações condicionais . Então, por que ainda mais ousado? Deixe-me. Em primeiro lugar, algumas pessoas podem usá-lo, para que você entenda a sintaxe dele. E em segundo lugar, parece melhor às vezes quando se tem homens em declarações condicionais. Você sabe, se, como se como um colete Z jumentos e você sabe, como 10 10 ou mais seis explosão ou algo que é boa idéia usar interruptor porque ele vai ficar melhor em seu frio. Mais tarde você vai ler mais rápido, certo? Então é por isso que você deve usar switch e como ele funciona. Você digita switch e, em seguida, você digitar a coisa que você deseja alternar você caça para alternar entre. Então, por exemplo, criamos um dia de folga variável por semana, e eu digitaria aqui um, e quando enviamos seu dia de folga fraco. Agora podemos usar o que temos que usar agora aqui as chaves atuais. E agora devemos, no caso de eles terem fraco igual a um, podemos, por exemplo, enviar alerta segunda-feira caso ainda seja alerta de consentimento livre para usar esse direito de usar isso. E em todas as outras situações desta vez você sabe tipo como, mas tipo padrão. Portanto, é a coisa padrão que você tem que fazer se todas as outras coisas não são verdadeiras. E, bem, esta não é a semana de folga, por exemplo. Certo? Como podem ver, temos aqui segunda e terça, e esta não é a semana de folga. Por quê? Por quê? Por que o que aconteceu? Porque o interruptor é muito estranho. Você sabe, quando é switch, ele luta entre esse valor. Ele vai para este caso e whoa, é um. Ok, então vamos permitir isso, mas também vamos executar tudo para a garrafa Ho. Então, por que se preocupar em usar alguma coisa? Mesmo o que você tem a dizer exatamente que eles querem quebrar. Está bem. Quando fazemos isso assim, você executa apenas essas instruções porque sabe que tem reboque de alguma forma. Diga a esse intérprete o quão sexy na seção você quer executar, certo? Porque você pode ouvir as instruções do tipo homem no 50. E então você vai precisar dizer, “ Ei, eu quero quebrar e às vezes até é chamado porque você pode usar esses casos, por exemplo. Bem, Bem, antes de irmos a ele, lembre-se que você tem o dedo quase sempre dar tempo depois de cada caso. Você não precisa fazer isso depois da queda porque são os últimos. Você não precisa digitar aqui seu padrão, mas em todas as outras situações que você tem, você deve ter algo assim ligado. Bem, vamos verificar. Quando eu datilografei o dedo do pé, seria um C. Considere terça-feira. Quando eu digitar algo para nós, será que não há um dia de folga fraco. Mas e se eu quisesse dizer algo como, Oh, é, ah, ah, dia de trabalho neste e é um fim de semana certo então eu deveria fazer muitos casos desses e eu poderia fazer algo como Case. Um caso, também. Estojo livre para caso cinco para livre por cinco. E aqui está, dia de trabalho e em outras situações, eu gostaria de digitar 67 e é claro que eu preciso fazer uma pausa assim e é que não podemos é outro dia da semana quando eu digitar um. Ele deve fazer o que seria apenas passar para a 1ª instrução que tem que ser executado e em seguida, para o freio não é um dia de folga por semana. Hum oh, eu digito 11 história coisa de trabalho. Quando eu digitar seis ou sete, é um fim de semana. Então você sabe que pode fazer algumas coisas especiais. Por exemplo, por dinheiro. Oh, não, é segunda-feira, e quando você toma Não. Um, vai outra coisa e estes dias coisa certo, é assim que funciona. Então, como eu disse no ano anterior, maioria do tempo não vai usar qual afirmação esta. Mas você tem que saber a sintaxe porque a maioria das pessoas estão usando e e apenas quando você usa. É para facilitar a leitura das coisas. Ok, se você quiser ter mais casaco capaz de ler quando você tem bons muitos casos para verificar, então é uma boa idéia árvores que durante a lição, muito obrigado. 17. Funções: Olá Hoje vou dizer-lhe, irmão funciona como criar um fim. Por que eles são necessários função é simplesmente um cão de código que pode ser invocado, executado quantas vezes queremos e lugares diferentes em nosso casaco por nós ou até mesmo outras pessoas funcionam. Nós apenas chamado às vezes e método é, como o nome sugere, tomar uma função papel para fora fazer algo certo. É uma questão para resolver o problema. Por exemplo, uma função pode calcular algo ou informar o usuário sobre algo no site aparecendo a janela especial, por exemplo, função alit, que já sabemos direito. Quando pegamos coisas como a nossa e escrevemos algo dentro, vamos criar uma janela especial com esta variável com o valor destes livros dentro da janela. Então alguém criou a função para nós que vai alertar alguém que eles poderiam pensar sobre função é que você pode co-pagar. Você pode invocá-lo tantas vezes quanto ele avisou. E muitos lugares no seu código. Claro, você teria sido as outras coisas como você, certo, outras no seu casaco. E bem, por causa disso, você está economizando seu tempo, e você pode ver instantaneamente que esta função é responsável pelo mundo por alertar alguém em vez disso. Você saberia vale asi como eu sei 67 linhas de casaco e você vai precisar repetir o repetido em ganho. E se você quisesse mudar alguma coisa, então você teria um programa, certo? Use-me para mudar todos os lugares possíveis onde você usá-lo. Vai ser muito difícil de detectar e bem, você só vai ter muito frio. Ok, então funções são muito importantes. Existem muitas funções disponíveis escritas por outras pessoas. Isso também é muito legal. Então, o que? Existem alguns conceitos básicos, um que são padrão construído em um eles começam em alguns de lado, algo bom é chamado de objetos. Na maioria das vezes falaremos sobre objetos mais tarde. Então bem, por exemplo, você tem uma função que compõe um tipo de, por exemplo, string toe inteiro. Essa é uma função muito útil que você pode usar. Você pode mudar eu e mudar, por exemplo. Ah, verifique se o número é um número, nenhum não é uma função numérica e outras coisas assim. Há muitas funções, por exemplo, usar para operação em cordas quando eu vou aqui e eu abri-lo, Como você pode ver aqui. Ah, porteiro. Ele funciona Digite aqui que pode fazer algumas operações com string. OK, E o que nós aprendemos algumas das funções mais úteis e às vezes nós vamos criar funções para estão em seu próprio uso. Mas há muitos, por exemplo, também frameworks como Jake desgaste. É muito bom quadro que é apenas definir as funções mais úteis criadas por outras pessoas e nossos plugins de dinheiro. Rebocá-lo. Bem, se você sabe Jake, usar um e que javascript em primeiro lugar, e depois j consulta, você pode criar muitas coisas muito longe. Ok, então é uma boa idéia olhar na Internet porque na maioria das vezes, se você quiser criar algo, ele já foi criado. Por isso, não percas o teu tempo. Você pode mais gostar de fritar e encontrá-lo mesmo de graça. Ok, então depois discute muito boa idéia para aprender algo que é chamado J Query. Porque você encontra muitas funções úteis, eles dizem para aqueles do seu tempo. Ok, nós não, não. Agora sabemos que o mundo é função. Mas como criar funções, nossa própria. Vamos começar a criar um simples. Nós então nós começamos a conhecer com a sintaxe um rei. Para manter a função, você deve digitar uma função de teclado. Então, você sabe o intérprete que vai interpretar JavaScript? Sabemos que em breve você vai criar uma função que é uma definição de função, não invocando. Vá função. Certo. Então agora temos que mergulhar o nome da função, por exemplo. Testes. Certo, esse é o nome simples. E então nós digitamos parênteses. Então o mesmo, como quando estávamos invocando. Mas porque fora da função de palavra-chave, o interpretado agora sabe que esta é apenas uma definição, e você pode definir algo irá discutir parâmetros. Mas você vai falar sobre isso um pouco mais tarde. Agora devemos usar as chaves para dizer onde a função está começando e onde a função vai terminar. Essa coisa é chamada sobre um pedregulho funcional. Ok, então você sabe, também a Carol abraça, por exemplo, por exemplo, o estado em e eles estavam acostumados a ainda muitas instruções s Oh, sim. Aqui na função, ele tem dois papéis. Uma é dizer onde a função está começando rei e onde ela está terminando e também para tempestade instruções e outros, certo? Então nós poderíamos enfraquecer Digite sua instrução enquanto na seção um bam, bam, bam, bam! E todas essas instruções serão invocadas serão executadas quando invocarmos a função de teste. Então, quando nós apenas algo como teste OK, todas essas instruções serão invocados e você pode invocar dentro da função outra função. Você pode fazer o que quiser aqui, certo? Então, por exemplo, quando eu digitar coisas como Allert amostra e quando eu executar isso, como você pode ver, nós temos bom. Agora aqui está a amostra disse porque eu corro dentro da amostra de teste quando eu faço algo como, por exemplo, isso eu estava vendo todas essas amostras de janelas exemplo livre porque eu disse que eu quero executar invocando disfunção todos esses instruções aqui. Você provavelmente também percebe que agora nem tudo está envolvido um por um, de cima para baixo função é apenas uma exceção a esta regra que eu lhe falei. Você está definindo isso em algum lugar, e ele será invocado sempre que quiser, de qualquer lugar que você quiser. Ok? Você não lê tudo de cima para baixo. Você está pensando em função porque agora estamos quando fazemos algo assim estávamos pulando deste lugar para este lugar. Ok, é assim que as funções funcionam quando você as chama. Sim, saltando para a função de pedregulho e você está executando as coisas que estão dentro do barco. E, bem, a função também pode retornar ao local onde está envolvida. Um valor. Mas o que significa retornar o valor? Bem, quando você digita algo como retornar cinco lá. Eu sei aqui, sério? Temos algo bom como cinco. Se você tivesse algumas instruções aqui acima, elas seriam todas executadas. E depois disso, teríamos os seus cinco. Isso é muito útil. Você vê em breve Por quê? Mas vamos dar uma olhada. Por exemplo, vamos criar um Rabel e armazenar esse resultado dessa função para Dave Arabia, que é chamado de e, em seguida, vamos alertá-lo. Então, fazemos algo assim. Como pode ver, não temos cinco. Então, o que quer que digitemos aqui, o que devolvermos será agora. Comece dentro da variável A. Porque nós atribui-lo era o operador para atribuí-lo aqui, invocando a função. E nós temos esse retorno aqui e ele vai ser substituído. Esta linha vai ser substituída pelo retorno de diesel. Certo, este lugar. Exactamente. Então você também pode invocar a função dentro da função assim, certo? Como argumento, estamos enviando a Kim, tipo, certo, cinco. Vamos verificar isso. Como você pode ver, nós temos exatamente o valor aqui quando a bomba bomba bomba bomba os cinco. Certo, então é assim que se premia. Você pode devolver alguma coisa. Então, para resumir, invocar a função significa que a função será executada. Todas as instruções dentro de ambas as funções e o local onde a função foi invocada será substituído pelo valor de retorno. Então, na nossa situação, neste momento, são apenas cinco fora do curso. Este é um exemplo muito simples. Então vamos fazer algo mais sério. Às vezes você pode querer trabalhar em variáveis que estão no início. Eu não sei, Por exemplo, valores tipo na forma pelo usuário do seu site para a função nós consentimos variáveis que são argumentos frios agora. Vamos criar algo simples. Mais simples, por exemplo, uma função que nós em dois valores. Então vamos criar a função. Será que o anúncio do casaco? Como você pode ver, que o nome sugere que vai acrescentar algo. E agora podemos definir isso. Vamos pegar dois argumentos, você e definir parâmetros Perry. Eles são chamados aqui parâmetros. OK, nós os chamamos, por exemplo, X e y. Você pode fazer o que podemos chamá-los do que todos, é claro, como variáveis. E agora vamos criar as chaves. Então agora podemos fazer é apenas coisas como anúncio e enviado, por exemplo, para livre e cinco. E esta grátis vai estar nos ovos, e cinco estarão lá. Por que variável? E agora podemos usar esse valor enviado aqui dentro da função para que possamos amarrar, por exemplo retornar X mais porquê? E agora aqui nós caminhamos o resultado da operação após o mundo do retorno. Então é um nós podemos verificar. Podemos, por exemplo, fazer alguma coisa. Vi algumas variáveis e depois podemos alertá-las. Como podem ver, temos agora um e podemos mudar agora. Estes resultam muito rápido, apenas enviando argumentos diferentes fora do curso. Esses argumentos também podem ser variáveis e outras coisas assim. Ok, nós tentamos fazer algumas operações aqui com eles. Então vamos saudar agora outra função que vai dividir duas variáveis. Então, por exemplo, função e eu chamamos isso de dividir, e também somos chamados de ovos e largo. Como pode ver, podemos chamá-los da mesma forma. Como se estivessem aqui e não haverá problemas com, sabe, , qual deles é qual? Porque eles estão em um escopo diferente. OK, esta coisa é um escocês. Então, para variáveis, então você não precisa dedo preocupado quando você digitar você gosta de exercício, ele vai trabalhar com a função acima. Está bem. E agora podemos morrer Grã-Bretanha X dividido por Por que o problema é que por vezes pode ser zero e você pode dividir por zero. Então, como fazer algo como, você sabe, informou o usuário que ele amarrou zero É errado. Você pode fazer isso. Você pode verificar ive usando a instrução if If why é igual a 20, em seguida, retornar. Significa que não faz nada. Nós também podemos informar primeiro de exemplo outra duna que você não pode dividir por zero. Certo, e depois volte. Quando não temos nada depois do regresso, significa que a disfunção vai acabar aqui e voltar. Defina. E agora, quando digitamos, por exemplo, um dividido por zero, percebemos que temos um. Tivemos um porque eu não mudei a função. King escreve Divide, não são algumas variáveis, mas, bem, o resultado da difusão. E agora podemos ver que você pode dividir por zero, e então temos indefinido. Assim, o resultado será o lugar onde envolvemos esta função foi substituído por estes Return on porque nós não digitamos nada aqui. Temos o seu indefinido assim definido. Nós também poderíamos, você sabe, retornar por exemplo, ID assim. Uh, então o que dá? Apenas um alerta que você pode dividir por zero. Não precisamos usá-los. Carregue aparelho, certo? E você também provavelmente está se perguntando por que temos que voltar lá dentro. Você pode tê-los quantos quiser, mas depois de retornar, você sabe tudo. Após o primeiro retorno envolvido , não será executado. Então, em nossa situação, porque a segunda variável é o que zero. Estamos voltando aqui e essa coisa não será executada. Podias dactilografar o rabo, mas sabes, para mais clareza. Mas isso não importa. Você não precisa digitar porque esse retorno vai sair da função. Então, retornar também é uma saída da função. Então, se mudarmos estes dois, por exemplo, cinco e ele tomará 10, devemos cobrir o resultado também. Porque, bem, esta afirmação não é verdadeira. Então esse retorno não será executado e o programa será. E aqui, é claro, todas essas funções são simples. Só estou mostrando a sintaxe criará funções mais difíceis depois. Agora, vamos juntar esta lição como você pode ver, as funções, as funções, é apenas um plug de casaco que você poderia invocar em qualquer lugar em seu casaco e obter o resultado. Mas por que precisamos de funções? Graças às funções, se você quiser mudar algo em nosso casaco, podemos fazê-lo apenas em um lugar. O conselho da função e se não tivéssemos funções, teria o mesmo casaco de operação em muitos lugares, diz lugares. E se você queria fazer uma mudança simples, vai começar a fazer uma mudança todos os lugares possíveis. Ok, vai levar muito tempo e nós até mesmo difícil, você sabe, encontrar todas essas coisas. Lugares estavam usando suas funções ofensivas. Pode reutilizar os homens quantas vezes quiser. O mesmo chamado, o que torna seu projeto mais fácil de manter. E poupa-te muito tempo porque podes reutilizar o teu trabalho ou até o de alguém como trabalho. Você sabe, como por exemplo, Jake, Onde quadro Graças a funções. Nosso programa também é mais legível, porque você pode ver facilmente para o que cada parte do curso, é Casaco é responsável por Vamos imaginar uma situação como essa Obter valor da forma I d. Podemos criar. Podemos envolver uma função como essa criada antes, certo e sim, você pode ver essa função instantaneamente. Use a frente esquecendo o valor da forma que é, que tem forma I d. Como uma variável ast o valor deste muito é apenas grande porque instantaneamente disse, ver que a disfunção vai apenas obter o valor da forma. Qual é a ideia para o meu D? Nós não tivemos funções terá em vez disso fora dele. Por exemplo, 15 olhos de código que não nos informam tanto quanto estas linhas simples aqui. Certo Regra Nieto, analise o casaco para obter mais informações sobre o carro. Então lembre-se que você deve Kate funções que são auto-descritivas. que significa que quando os lês, sabes o que estão a fazer agora, coisas assim podem parecer que não são importantes para ti. Mas acredite em mim, você será grato por mim. Para todas essas informações no futuro, isso é tudo na lição. Muito obrigado. 18. Âmbito de variáveis: Olá Hoje vamos falar sobre o escopo do ALS arabe dentro das funções de script. Intervalo de escopo significa onde em que lugar a variável está disponível. O que isso significa? O que Até agora eu lhe disse que tudo é executado de cima para baixo, mas há algumas situações raras quando isso é um pouco diferente. A diferença está em quando você está executando funções quando você está criando-as, quando você está usando variáveis dentro delas. Porque há algumas coisas estranhas acontecendo em JavaScript em outras linguagens de programação é um pouco mais fácil aqui. Pode ser um pouco folgado quando não se sabe como funciona. Então vamos nos concentrar em como ele livro. Ok, vamos começar a função de simples em um como teste e vamos fazer algo como amostra. Ok, nosso simples. Então normalmente, quando fazemos algo assim e quando executamos, como você pode ver, temos amostra, sabemos que é você deve guerra, porque o que essa função foi definida aqui e onde agora nós Estamos correndo, isso é aqui. Então, pessoal , deveria. O programa já deve saber sobre teste. Você escreve sobre a função de teste, mas quando fazemos isso assim. Você ficaria surpreso porque temos também bons resultados bem em JavaScript antes de executar. Discreto porque executar instruções no script First Interpreter está tomando todas as funções. Todas as variáveis fazem. Alguns vão, ambos esculpem, e está salvando lá. E por causa disso, você é funções em qualquer lugar que você as criou. Então você pode tomar chá como 100 linhas de sai. Outros casacos, certo? E quando você faz algo assim aqui, quando você invocou o teste, você pode invocar suas funções e o caminho certo. Por que você pode fazer isso? Porque, bem, está disponível em todos os lugares. Está no âmbito global agora. Funções disponíveis em todos os lugares. Também significa que quando você cria, por exemplo, de um rebelde como esse, e quando você faz algo como, por exemplo, alerta um E quando você faz algo assim, você não é, é que temos bons cinco. Então, de alguma forma, a variável é vista dentro desta função. Está disponível em todos os lugares, mas há uma pequena diferença entre as funções porque, bem, olha para isto. Se fizermos algo mentindo, vamos levar para o alerta de comentários. R. Claro, veremos cinco, mas quando o fizermos assim. Eu não vou dizer nada. Está definido agora. Ok, então isso está disponível em tudo o que está sob a definição. Então isso é um pouco diferente do comportamento da função, certo? E de alguma forma você pode acessar o valor aqui. Além do mais, você pode até mudá-lo. Então, quando fazemos isso assim, você pode ver agora pode ter livre aqui, e isso é muito importante. A agora é alterado, é igual. E quando fazemos isso assim, você notaria que é gratuito e também é livre fora da função. Portanto, isso significa que você pode alterar o valor fora da função por padrão é um comportamento muito diferente de outros idiomas. Ok, se você não sabe outras línguas, então talvez não seja algo que você não entenda. Eu sei, mas você tem algo que seria estranho? O que é isso? Bem, você pode criar algo que é chamado de variáveis locais porque você não quer às vezes mudar algo fora. Você precisaria ter algumas variáveis temporárias para mudar algo no meio caso contrário, mas você pode algumas vezes querer enviar esse valor apenas para, você sabe, rastreá-lo. Você não quer alterar o valor do lado de fora. Você quer, você sabe, fazer algumas operações ou precisar. Você não quer criar outro. Temporário estava sob coisas assim. E então você quer exatamente criar um olhar de um rabelais sob para criar um olhar de capaz de criar um parâmetro. Acabamos de ligar agora. E por causa disso, você vai notar que quando eu torno deste programa, é livre e, em seguida, cinco porque agora um e, em seguida, um sã assinado para livre está assinando o valor para a variável local. Ok, então o olhar de um Rabel é algo que está disponível entre seu escopo. Nesta situação, é entre a capa, as chaves, doces de opinião, causando um. Então olhe para os rótulos não estão disponíveis mais tarde. Quando não sei, faço algo assim. Como você pode ver, livre em bombas, não o próprio livro. Você só tem uma bola aqui, então isso é tudo. Ainda tenho um azul. Então também significa que ele vai ser excluído após o clicker de fechamento. O aparelho, senhor. Também significa que vai temer a memória da minha mãe do teu guião. Então significa isso. Bem, se você quer apenas operações rápidas em algo e você quer libertar Memoria, é boa idéia fazer algo assim, certo em vez de ter tudo na garota, Bosco. E agora há algo que você também precisa entender que quando você não precisa, você sabe, criar, por exemplo, parâmetros. Então você sabe que pode fazer algo assim. É a mesma coisa. Ok, quando você cria uma variável assim, é quase como se você tivesse feito dessa maneira. Mas quando você pode enviar argumentos, eu gosto, você sabe, enviar Q 5 ou algo assim. Isso, e é por isso que você quer criar parâmetros às vezes. Mas olha para isto. É agora cada olhar sobre capaz de, como você pode ver, não é bom livre e, em seguida, cinco porque temos aqui uma variável local. Se eu apagá-lo, você não vai, é que nós não temos mais nenhum. Eles olham por cima de um rebelde, então estamos mudando o valor daqui. Mas também há algo mais estranho quando você vem. E isso significa, hum não é isso que está acontecendo agora? Não temos uma variável global. Estamos atribuindo liberdade a algo. O que? O que? Não temos muita redigitação de apostadores. O problema é que você pode criar variável em JavaScript mesmo se você não digitar bit variável antes dele. Quando você fizer isso dessa forma, vai se tornar global. Variável, mesmo dedo do pé é que é criado dentro da função. Significa que agora designamos Frito A e também está disponível aqui. Como você pode ver agora, nós temos livre aqui livre e livre aqui. Mas se eu fizer assim instantaneamente, essa coisa não estará disponível fora do escopo. É um bloqueio de são capazes ok e que você pode ver agora é livre para que você possa ser leve. E agora, hum , você sabe, é difícil entender esse começo, mas você precisa apenas lembrar que quando você digitar variável antes que ela vai ser variável local . Se for criado dentro da função , será variável global. É se for criado fora da função. E você só precisa se lembrar de, por engano, fazer uma nota, fazer algo assim porque vai ser uma variável global. Eles estão certos? Você precisa ter pelo menos você criou o declarado disponível ou pesado. Isso é um assunto para aqui porque então ele é interpretado um pouco diferente caminho certo. Eu te falei sobre as coisas que você não precisa digitar a parábola antes do antes do nome de um rebelde porque às vezes você pode cometer um erro por causa disso. Em que eles são muito difíceis de esporte. Então lembre-se de não por engano, re ódio de um rebelde sem o var antes dele ou jovem se não é uma parte de sua matéria para , você não precisa digitar o próprio livro aqui porque seria I segunda declaração do mesma variável que está aqui. Ok, então não faça isso. Ok? Só há a lição. Muito obrigado. 19. Funções Anonymous: Olá. Hoje vamos falar sobre funções anônimas e sobre funções interpretadas como uma expressão como o valor fora da variável. Certo, então você sabe, até agora sabemos que podemos criar uma variável como, por exemplo, assim. E então podemos designar aqui. Exemplo cinco. E agora o tipo dessas bóias em Professor, se você fizer algo assim, o diable estes eram capazes é bebida. Mas quem é o outro? Qualquer tipo de rebeldes. Sim, Você pode atribuir em JavaScript uma função para variar Então, como fazê-lo? Você apenas digita função aqui do que o nome das funções. Então, por exemplo, teste. Então você pode definir aqui parâmetros direito Assim, você sabe variáveis. Mas não precisamos viver tipo nada lá. Então nós apenas criador abertura calibrar sua chave Curly fechamento disse, E então o ponto-e-vírgula e nós temos agora um início de função dentro dessa variável e há uma pequena diferença criando uma função desta forma agora, não está em o âmbito global. É no interior dessa variável para que possamos usá-lo agora apenas abaixo da definição e ao mesmo tempo, podemos fazer algo como esse sistema, por exemplo. E agora podemos fazer algo assim. Como você pode ver , não está funcionando porque agora está. Comece aqui dentro. E, a fim de obter a disfunção, podemos fazê-lo apenas através dessas variáveis. Neste momento, esta variável é como uma função. Você pode usar algo como aquele X. E então você invoca a função que isso começa dentro assim, como você pode ver. Hum, bem, então ele estava. Eles devem alertar? Como você pode ver agora ele digita amostra. Claro que não funcionaria se fizéssemos algo assim. Tudo está funcionando como planejado. Portanto, não podemos invocar a função usando esta variável. Agora você pode ser como, mas quando precisamos desse nome? Bem, nós não precisamos disso. Então podemos usar aqui algo que corpos chamados função anônima, que não tem um nome. Anonymous era uma pessoa que assinava documentos, documentos com anônimo e ninguém sabia seu nome. Então, sim, isso é só uma função. Só temos animais porque não sabemos o nome. Não é necessário agora. Aqui, certo? Isso não importa. Então, se você quiser, você pode criar um enorme funções se você não se importa com o nome e isso acontece mais tempo em vez de dissertação como essa, mas em mas também é usado em frameworks. Quando você quer enviar a função como um argumento e você não se importa com seu nome tão cedo , você verá algumas coisas assim. E, bem, bem, você sabe, é um tópico um pouco adiantado por agora. Podemos também, é claro, enviar argumentos de audição para que fôssemos fazer algo como argumento um e fazer algo assim podemos saber, enviou-lhe, por exemplo, cinco. E como você pode ver agora aqui. Mas simples cinco. Funciona. Respire o ok. Agora vamos tentar fazer algo como criar uma função que tem como perímetro uma função. Ok, vamos levar isso para a seção comum e vamos pegar a função que chamamos de teste, e ele vai tomar como parlamentar, uma função que eu digite seu F, mas você pode digitar, você sabe, o que você quiser. É lá apenas o nome da variável que iniciamos a função que será enviado para você direito . E agora podemos, por exemplo, enviar aqui. Sabe, algo como cinco. E agora isso atribuiria cinco a F. Mas podemos enviar aqui também uma função. E o mais legal é que consentimos aqui. Que a função sem nome com uma função enorme porque não nos importamos com seu nome Onda, podemos enviar suas, você sabe, ambas as funções fora. Exemplo. Amostra de alerta mais Ah, são simples. Apenas uma amostra assim. Nós podemos, você sabe, fazer isso um pouco diferente, nós podemos fazer isso dessa maneira. Então temos sim. Você sabe, uh, então nós vemos como tudo é impresso. Bem, nós temos flechas. Como você pode ver, eu cometi um erro como esse. Por isso, é uma boa ideia, às vezes , , ter coisas boas. Formatado nove Dent. Porque é mais fácil do que detectar alguns problemas. Então não mandamos disfunção aqui dentro. Então isso significa que assim vai envolvê-lo? Claro que não. Temos que invocá-lo dentro do corpo fora desta função. Então agora temos esse f aqui. E você sabe que podemos usá-lo assim porque nós apenas atribuímos isso a isso. Muito como você pode ver agora temos aqui amostra e funciona bem. E também podemos enviar para disfunção dentro para seu exemplo exato mais X, e podemos enviar para esta função sempre capaz de um argumento. Como você pode ver, ele também funciona bem. Podemos, sabe, fazer argumentos masculinos em disfunção? Claro que podemos auto-exemplo Argumento um. E aqui, então, eu terei tempo. Por exemplo 20. E agora podemos, por exemplo, neste argumento um dedo do pé que quatro e enviá-lo para a função que enviará para esta função. Eu sei que é um pouco estranho. Parece estranho, e todas as coisas assim são mais tempo usado em programas avançados. Então não se preocupe. Nós não entendemos é agora estes não são coberturas tão importantes que está no início. Mas é bom saber o que é isso como essas coisas funcionam quando você lê-las. Porque alguns frameworks estão usando coisas assim e então, você sabe que você estará perdido no frio testamento. Você leria o frio assim, certo? Então é uma boa idéia para isso. Entende o que está acontecendo aqui? Está bem. Então podemos invocar dentro da função uma função e talvez como, Por que eu faria isso? Porque você quer, por exemplo, por exemplo, dentro desta função de teste, fazer algumas operações antes e, em seguida, enviado para esta função um pouco alterado. Uso do valor. Você sabe que quer saber, por exemplo, usar disfunção. Se os valores fossem iguais a cinco ou outra função, os valores eram diferentes. Escrever Tudo depende da situação. Estas situações chegam ao Houston Fire. Mas você sabe, é assim que funciona. Você também pode retornar a função. Isso é ainda mais difícil. Vamos ver como fazer. Vamos criar uma variável. Vamos lá alto e vamos um sinal que é uma função que se chama Isso é outro miss one. E agora vamos com algo assim. Vamos pegar um tipo de perímetro. E se tipo igual ainda, por exemplo, bolas, bolas, então eu quero retornar funções diferentes fora função exemplo que pensaria que é um nome de argumento e eu vou Allah são rasgar bolas altas e, em seguida, o nome de touros, Certo. Mas, caso contrário, sabemos que esses caras conhecem a bola tão bem retornou a função com o nome também, mas desta vez bem, seria quase as mesmas idéias. Para que possamos beber. Nós não somos, Say, chefe. Nós só gostamos do alto nome. E você sabe que haveria outras operações. Claro que sim. Além disso, eu sou porque é simples. Por exemplo, para bolas você vai precisar vir algumas coisas como, você sabe, ele é salário diferente como Anderson é assim para que você possa fazer algo assim. E agora você está retornando funções, certo? O valor Oh, o retorno aqui para a disfunção será a função. Então isso significa que se fizermos algo como oi e depois dizemos aqui bolas e estamos neste programa é que você pode ver que nada acontece. Por quê? Porque agora temos o quê? Essa coisa em vez disso, mover isso. Eu acho que porque, como dissemos na lição sobre funções, quando você retorna um valor, realmente, você retornou o dedo estes depois de seu retorno. Palavra chave. Então isso significa que temos disfunção aqui e isso significa que temos boa a função que podemos usar? - Não. Então devemos atribuir estes, por exemplo retornou função para a variável assim. E agora podemos envolver disfunção usando essas funções retornadas. Como você pode ver agora, funciona. Mas temos indefinido aqui. Por quê? Porque agora devemos dizer e um argumento para estes função retornado, a fim de ver algo depois dele. Então, por exemplo, meu nome como você pode ver highballs Ártico. E agora se fizermos algo assim na linha 42 Então isso significa que estamos enviando para a função alta. Então, hoje em um, algo assim, ele precisa que isso não seja executado. Mas sim, isso vai ser executado e vamos ver apenas alto. E o meu nome certo. Eu não vou ver os barcos porque o tipo não é ambos. Então é assim que funciona. Podemos enviar função bem, um argumento Você consentir muito capaz de alguma função e retornar a função dependendo seus argumentos que foram enviados. Como você pode ver, coisas assim são um pouco adiantadas e não se preocupe se você não entender agora, você pode simplesmente ir em frente. Você pode retornar a estes quando você sabe javascript melhor. Quando você sabe que você começa a fazer coisas avançadas. As coisas são como que são usadas em frameworks. Você também vai notar que os eventos às vezes estão usando-o quando você quer se registrar e até mesmo você sabe que você quer, por exemplo, enviar uma função para ser envolvido quando algo acontece. Então, por exemplo, você clica em algo e essa coisa é chamada mesmo nós vamos falar mais sobre par e eventos . E então você verá que coisas assim às vezes são jovens e talvez não tão codificadas assim. Mas essa parte dessas coisas que nós podemos vê-lo, você sabe, você sabe, coisas assim estão escondidas a maior parte do tempo de você. E coisas assim são escritas por pessoas que estão escrevendo bibliotecas. E você está usando coisas assim. Você está apenas enviando, você sabe, funções dedo do pé, por exemplo, outra função. E há um código que está trabalhando neles, algo que está parecendo com isso. Você sabe, eles estão verificando. Dê a eles como os argumentos estão parecendo, e lá assinar as coisas corretamente. Então funciona bem, maioria das vezes, chamado assim está escondido. Mas você precisa, pelo menos, você sabe, eu sei que ela existe. Então você entende como funciona, certo? Certo. Então você não escreve seu casaco aprendendo tudo de cor. É boa idéia entender como as coisas estão funcionando, porque então você pode criar casaco melhor . Isso é apenas uma boa lição. Muito obrigado. 20. Objetos: Olá Hoje vou dizer-lhe o que o assunto, como criá-lo e como usá-lo. Objetos ab apenas contêineres para armazenar variáveis e funções que são chamados métodos tematicamente relacionados uns com os outros para facilitar a reutilização. É possível defini-lo um pouco simplesmente longe? Sim. Tudo ao meu redor é um objeto. Sim, estou a olhar para o monitor. Eu estou olhando para o curso ou que está se movendo aqui. Tudo o que você pode ver pode ser chamado de objeto. E você pode usar objetos que você pode defini-los por, Você conhece as variáveis. E você pode dizer que ações vão ser feitas neste Objetos criando funções e muito impulsionado estão descrevendo os objetos são frios. , Desta vez,algo como festas de pérolas. Ok. E bem, vamos criar um exemplo que poderíamos, você sabe, criar algo. Mas primeiro, eu acho que você poderia apenas usar os exemplos que já são criados Quando você vai para a rede Mozilla Developer, há um cara. Há também totalmente ou para motoristas. Mantenha livre um Mas e Quando você está aqui, você pode encontrar algo como referências construídas em objetos. Como você pode ver, há muitos objetos construídos que você pode usar. Existem muitas propriedades, então botas vory que estão descrevendo esses objetos e funções que podem ajudá-lo a trabalhar com eles. Isso é muito, muito legal. Por exemplo, você tem também algo como motor de objeto de documento. Falamos sobre essa coisa mais leve. E. E dentro do modelo de objeto atual, há a necessidade mais importante, que é chamado documento Documento está descrevendo o documento fora do HTML cinco. Vamos usá-lo usou o documento. Objeto Mm. O que? Para usar o objeto, basta digitar o nome do objeto. E então eu chutei esse ponto e então, como você pode ver, eu posso acessar todos os valores possíveis lá e neste editor aquele azul são as variáveis. As propriedades, certo, e o vermelho são os metais que posso usar. E agora eu gostaria de obter elemento por idéia que eu enviei e eu concordo aqui, por exemplo. Sabe, vamos chamar esse teste de cara. Então eu tenho o bem agora por causa desse assunto que foi criado por alguém que eu sei como ele foi criado, como ele funciona. Só quero saber se funciona assim. Ele só recebe este elemento por estes i d. e agora eu escrevo aqui, por exemplo, Vardy. Se, mas que seja. Eu só quero atribuir o valor de retorno a esta coisa. E vamos Allard, Como você pode ver, dentro de um dia temos um bom objeto que é chamado html diva limão. Então eu só tenho outro objeto que eu posso usá-lo. É chamado html dif um limão. Como você pode ver, ele está dentro do modelo de objeto de documento. Certo? E quando formos aqui, podemos ler um pouco mais sobre isso. Você pode ler quais propriedades estão dentro e coisas assim. Hum mas bem, e objetos, hum, há algo bem dentro do HTML tem algo como uma propriedade que é chamada HTML interno. Podemos fazer algo, Dave em seu html e agora podemos atribuir um sinal aqui diferente. Eu acho que isso vai estar dentro do dif que temos usando disfunção aqui para que possamos digitar aqui. Então, por exemplo, este é um novo texto Agora, quando atualizamos, como você pode ver, mudaria a percepção do valor. Isso é muito legal porque porque agora podemos dizer que mudar o valor de qualquer coisa em nosso site dinâmico, eu sei, podemos verificar, por exemplo aqui. Se alguém fez tudo corretamente na forma, se sim, então nós diríamos: “ Ei, Ei, está tudo bem. Podemos até insultar uma imagem aqui, certo? Podemos fazer o que quisermos apenas sabendo essa coisinha que é tão poderosa, podemos fazer o que quisermos agora. Certo? Você pode verificar se, por exemplo, um cara tem o tamanho de um documento assim. Queremos que Teoh diminua tudo dentro do nosso documento. Podemos fazer coisas assim porque agora temos bons objetos que são criados por outras pessoas, é claro, então alguns deles nas próximas lições as coisas mais importantes sobre eles. Mas vai ver que é tão poderoso. Certo? E você também pode criar seus próprios objetos que também é útil. Por exemplo, escapou de um objeto que chamamos pessoa e como fazê-lo. Você só disse que não é que nós apenas criamos como variável normal, certo? Mas agora, a fim de criar um objeto devemos criar aqui algo como Curly Brace ER é assim , e isso significa que nós acabamos de criar objeto, que é chamado pessoa, e agora ele assinou. Podemos criar as variáveis, as propriedades que você descreve esses objetos, o que ele pode descrever. A pessoa tem um nome e então nós apenas um pouco tipo de nome e esse nome pode ter valor. Então, por exemplo, são assim, a fim de fazê-lo, nós apenas digitamos a guerra chave do que a coluna eo valor fora da, hum fora da propriedade. E agora podemos criar mais deles. Podemos usar a vírgula dois em separado. Então, por exemplo, sobrenome no DNA. Agora vou digitar muito do que nosso truque. E como podem ver, agora temos bons valores. Mas, você sabe, escrevê-lo assim em uma linha, é muito má idéia. Você deveria fazer assim porque agora é mais legível. Como você pode ver, instantaneamente é mais fácil de ler, e então podemos agir é todas essas coisas. Então, por exemplo, eu posso fazer a nossa pessoa com esse nome. Como você pode ver agora é Rx. Então nós fizemos a mesma coisa como aqui nós acessamos o HTML interno fora do elemento profundo que temos aqui por este método. E, bem, podemos sair do curso, mudá-lo dinamicamente. Aqui está o exemplo de olhar mais. Como pode ver, foi mudado, certo? Podemos mudá-lo. Provavelmente fizeram aqui. Ah, em um momento você pode, é claro, dinamicamente em algo novo idade 15 por exemplo, como isso em você pode fazer você sabe que podemos em qualquer elemento a qualquer momento. O legal também é que você pode usá-lo assim agora, certo? Nós não precisamos usar outros do que eles também mais fácil para nós para as coisas latir mais tarde. Então o html interno e agora podemos digitar pessoa, por exemplo nome, certo? E funciona. O que aconteceu quando nós, por exemplo, com coisas assim? Como você pode ver, ele diz objeto porque há um padrão. Meu pensamento é o Irã. Quando você deseja interpretar o objeto como a string. Ah, esse método é chamado de raia, ok, e você pode substituí-lo. Mas apenas afirmando a corda. E agora podemos criar uma função animal que vai substituí-la. O comportamento padrão. Agora podemos devolver a coisa que queremos dizer que quando fazemos algo assim, você pode ver que veremos o tipo de enfraquecimento aqui. O que quer que isso seja apenas a coisa que seria mostrado quando alguém quer toe interpretar sua nenhuma pessoa esta variável como uma string. Então, quando você fizer algo assim para que possamos voltar. Aqui está, por exemplo, isso que, por exemplo, nome como você pode ver agora nós, por padrão, mostrar seu nome. Mas você também pode fazer algo assim. Este apelido é que o Rick iria opor? Funciona. Não, é apenas um valor padrão. E, bem, você sabe que pode criar seus métodos de mani. Isso é chamado de Método Seu Próprio. Sei que pode contar um pouco. Quanto tempo até você pegar esse cara será estranho velho. Ele terá 18 anos se as bordas mais baixas do que então. Dizemos que ele é “Não”. 18 ou algo que possamos fazer nossos próprios métodos. Então é tudo velho, por exemplo, como essa função e agora fora do curso, precisamos ouvir uma vírgula, e você pode verificar se isso é cretino h algo assim. E se a idade é inferior a 18, em seguida, retornar Falso Caso contrário devolvido Verdadeiro. Certo. Isto é sobre o Dhere? Um cínico, hum, e agora podemos usar thes met it. A pessoa é velha, como pode ver. Hum, isso e você mensagem Mm. Porque, mas muito bem, a pessoa que este adulto está retornando as falhas como boliche. E isso não é aparecer todos os dias do caminho morto. Claro, ele apareceria porque agora está apenas gritando, chorando. Hum, pessoa é Oh, eu sei que ele está no ar. Por que não? Por que não? Não funciona dentro de si estar morto. Então é uma boa idéia que eu cometi esses erros por causa da alta. Agora, eu vou te mostrar algo que é muito importante, porque você poderia cometer esse erro também. E é bem legal em um pau. Sim. Qual é a idade aqui agora? Não é esta idade que esta idade aqui pode ser a idade definida aqui. Então alguns jogam direito. Precisamos dizer exatamente ao javascript que queremos ir a essa borda, e nós apenas digitamos que este oito. Isso está sempre apontando para desviar capaz que é o mais próximo. Então, nesta situação dentro deste objeto. Então ele está interpretando agora aqui o h aqui e por causa disso. Como você pode ver agora temos aqui verdade porque, bem, bem, as idades acima quando tomamos, por exemplo, 15. Como você pode ver agora, é falso. Então está funcionando. Criamos nossa própria função olhando. E como você pode ver, essas funções estão relacionadas entre si. Essas variáveis estão relacionadas entre si. Então, é uma boa idéia, você sabe, armazenar coisas que estão relacionadas entre si. Você pode criar também Ah, você sabe, objetos digitando antes de algo como novo objeto e, em seguida, bomba assim. Podemos levar isto por um segundo. Uh, você pode ver que está funcionando, mas eu não estou comentando usando isso com essa coisa. Só te estou a mostrar. Então você sabe que algo assim existe. Eu não recomendo porque é mais lento, e não é tão fácil de ler assim. Você. Há também outra maneira de criar objetos, mas podemos mostrá-lo na próxima lição porque, bem, bem, isso é uma metáfora, você sabe, criando muitos objetos de um tipo. Está bem, é só um advento mais avançado. Parando estes os conceitos básicos que você precisa saber. A segunda coisa é muito, muito avançada. Poucas pessoas vão usá-lo. Então, se você entender isso, agora você pode ir em frente e você ler sobre muitos objetos que você pode usar, por exemplo, data um onde você pode explicar para coisas cronometradas e outras coisas assim. Ah, nós falaríamos sobre o mais importante na próxima. Menos. Só há essa lição. Muito obrigado. 21. Função de construtor de objetos: Olá Hoje vou falar sobre a função do construtor. Acabamos de ligar em outras línguas. Classe? O que é e por que precisaríamos? Vamos imaginar uma situação como essa que eu quero criar agora uma segunda pessoa. Então, o que eu faço? Eu faria algo assim. Eu chamaria ele de pessoa para Evers. Eu mudaria aqui o nome para, por exemplo, Viola e a idade. E eu gostaria de, por exemplo, mudar um pouco de disfunção e então eu criaria pessoa livre 4% 5 ho. Sabe, Sabe, seria horrível se eu quisesse mudar algo por dentro. Por exemplo, eu gostaria de adicionar outra vida de propriedade, por exemplo. número de telefone é o site ou algo que seria horrível. Eu precisaria adicionar em cada objeto possível como que esta propriedade se eu quisesse mudar algo dentro da função se a diferença Então ele iria trabalhar em b diferente onde Também me levaria montes de tempo, porque eu precisaria mudar cada possível objeto como esse. Então precisamos de algum tipo de forma para criar todos esses objetos e essa coisa é chamada de função construtor de classe em javascript. Então, em breve classes este formulário para a criação de objetos. Um formulário como esse é usado para coletar objetos em uma classe. É por isso que a sua chamada cruz Você pode criar por causa dela. - Homem. É diferente um do outro. Objetos lá eles diferem uns dos outros por nome diferente como aquele direito sobre o site. Diga toda a raiva, seja lá o que for, mas com as mesmas propriedades e métodos ao mesmo tempo. Certo. Então, como fazer algo assim? Como resolver esse problema? Podemos criar um construtor de função. Então? Então, em javascript, é muito difícil devedor. Importa-se que a função seja uma função dela? É uma função. Construtor é um estranho porque eles não criaram uma nova palavra-chave como classe. Mas bem, você só precisa lembrar que ele a função pode ser às vezes essa função. Às vezes pode ser um construtor. E agora você vai digitar aqui o nome fora deste construtor de função e, por exemplo, ser pessoa. E este é o lugar onde você deve notar exatamente Se esta função é usada como um construtor de função ou não é a função porque, você sabe que você deve usar o verbo para as funções que você obtém elemento por I d Esta a função quando você vê algo como essa pessoa. Bem, este não é o verbo, então este é um construtor de função. E quando você vê um corpo também, você vai notar que esta não é a mesma noite que funciona porque você não está voltando aqui. Ah, o valor. Você não está invocando a função como no Bem, você não está invocando o construtor de função que você está apenas usando Obter sua construção do objeto usando a palavra-chave new então vamos fazê-lo. Então vamos fazer a mesma coisa como acima como fazê-lo agora. Agora temos que levar ah argumentos para essa pessoa que vai representar essa pessoa. Então, na nossa situação há um nome e é nome Asare, certo e também é idade. E agora devemos criar propriedades como criar propriedades para o construtor de função. Devemos usar esta palavra-chave porque isso irá apontar para o valor de construção real Think mm objeto Ok. Fora do que queremos construir usando o construtor pessoa o que pode ser vamos usar o construtor. Então vamos criar uma pessoa, por exemplo, variável X. Uma nova pessoa quando lhe enviamos, por exemplo, Rick é assim, por exemplo, assim? E agora vamos ter isso sob o comum. Então não temos problemas com isso e isso, certo? E não fomos enviados para cá, Eric. Nós enviamos aqui para discernir seria Ártico e aos 39 anos certo? E agora queremos construir usando esta nova palavra-chave esta pessoa e usá-lo você como uma variável x. Assim, precisamos agora criar propriedades. Então estamos fazendo isso digitando essa palavra-chave e aquilo e estamos apenas criando o nome dessa propriedade. Podemos chamar-lhe oque quisermos, o mas chamamos-lhe o mesmo como se estivesse aqui. Então não temos problemas mais tarde construindo nomes especiais. É bonito, você sabe, pode ser mal entendido no início porque pode ser como se esses nomes fossem iguais a esse nome. Sabe, até eu usei esse tempo para o certo. Uh, você só precisa se lembrar que este é o baixo disfarce capaz que estes em que você pode acessar entre o direito deste crace er, o dis criado porque nós estamos enviando aqui o nome ártico aqui corpo também precisa se lembrar que este nome está acessando não o nome que foi enviado para esta função. Mas está acessando o maravilhado Teoh o objeto que queremos criar. Ok, então agora o nome da SAR e eu escrevo é o nosso nome nesta idade e agora podemos fazer algo como a idade X. E como podem ver que temos esta noite, funciona muito bem. É uma boa idéia também dizer que você pode acessar coisas dentro de objetos digitando algo assim. Também é possível fazê-lo dessa forma. Ok, então você pode fazer assim, ou você pode fazê-lo, pai. Caminho em frente. E agora vamos criar funções dentro. Então, como fazer isso? Isto é adulto igual a função, e agora o incomoda a função. A diferença é que precisamos de um ponto e vírgula aqui agora. E você também deve notar que você não está adicionando vírgulas como essa. Podemos copiar as fronteiras para não precisarmos entrar de novo. Podemos copiar essas três funções ng deste para função string. , Sem,claro, isto. Ok? O mesmo em colônia e agora entrou em algo que vemos podiátrico ártico. E funciona muito bem, certo? E o mais legal é, agora que podemos O quê? Agora podemos fazer algo assim. Bomba, bomba, ovos! Quieto! Set. Odjick! Eu sei, por exemplo, Yolanda, eu agonizo tudo o que podemos mudar aqui valores e nós temos o Bom. Agora, por exemplo, podemos algo assim em HTML. Certo? Queremos pegar esse cara. Esses caras. Uh o quê? Por quê? Hum doente. E temos todas as novas pessoas impressas lá fora. Vocês nunca notaram que vai ser bom? Havia mais pessoas que gostavam de criar algo. Faria este frio e Eric. Mas falaremos sobre isso mais tarde. Próximas lições. Mas como podem ver, estamos economizando tempo agora. Por quê? Porque se você quiser criar agora nova propriedade, basta digitar isso E agora o nome da propriedade que queremos criar, por exemplo, site e tipo de site. E nós consentimos aqui agora site direito assim. E vai funcionar agora. Podemos usá-lo enviando aqui valor se você não enviar. Ele também funciona porque agora é apenas indefinido, enfraquece, definindo ou não. Então é bem legal. Agora podemos mudar, você sabe, por exemplo. Oh, eu quero digitar mais coisas em duas cordas mais bálsamo, este direito H assim. E agora contra o QG, certo? Nós poderíamos, você sabe, ir para algo como Coluna de Idade, e nós podemos adicionar Instant dentro e é adicionado a todos os objetos. É uma vez que quando criamos assim, precisaremos mudá-lo em todos os lugares possíveis. É por isso que as classes são tão legais e você deve usá-las quando você, por exemplo, deseja acessar valores do banco de dados. Por exemplo, imagine a situação que você está usando algo. Será que este culto Ajax e você devem aprender sobre este objeto? Sim, Este é um objeto bob que tem algo bom em alguns métodos e propriedades que permite que você atue nos BH sendo e PHP, em seguida, pode, por exemplo, acessar banco de dados para que ele possa ir dedo do pé, para exemplo, meu óleo esque. Obter informações e devolvê-lo usando o Ajax, embora objeto dentro do JavaScript sem recarregar seu site. Você pode abdicar seu site direito. Isso é muito legal. Você pode atualizar seu conteúdo do seu site sem recarregar seu site, você pode, Ah, que isso é realmente, muito poderoso. Você pode criar scripts muito úteis por causa disso. E bem, então você pode, por exemplo, você sabe, vamos para o banco de dados, vamos pegar ou coreanos e deixar você saber, retornando t ao script no JavaScript. E agora temos, por exemplo, muitas pessoas que tanto algo quanto, sim, então seria boa idéia, educado fora de objetos para eles porque então nós podemos acessar todos esses valores muito facilmente. Mas também seria uma ideia melhor criar uma função construtora classe A porque temos homem fora deles. E se você quiser mudar algo, então sim, eu vou ser bom, porque nós podemos mudá-lo instantaneamente apenas digitando uma nova propriedade, uma nova função ou outras coisas assim. Certo, isso é tudo na lição. Muito obrigado. 22. Protótipo: Olá Hoje eu vou dizer-lhe o que este protótipo e foi usar protótipo e bem como toe adicionar paridades prop fora off função Construtor fora off off off off off off off. Discuta como fazer normalmente. Se você quiser adicionar uma nova propriedade toe qualquer objeto que você pode apenas digitar bolos, em seguida, duvidar. E você, Joe e você pode imaginar aqui o nome de uma nova propriedade. Festa. Então algo novo é igual a cinco e que podemos agir. É muito fácil? Como a morte. E como você pode ver, você tem agora aqui cinco, mas fora do curso. Isto é algo novo. Esta propriedade não existe em outros objetos. Por quê? Porque todos esses objetos são incidentes diferentes. É um objeto diferente. Ok, x y e que eles são todos diferentes. Eles não sabem um do outro. Se eu quisesse mudar esta propriedade em todos os objetos possíveis ao mesmo tempo, eu deveria tê-lo mudado aqui. Eu deveria ter feito algo assim. Alguns pensam novo e, em seguida, aqui é igual a cinco e não, fazer algo assim. Agora está tudo bem, mas às vezes há um problema. Você não tem acesso a este lugar. E bem, você pode ser como se tivesse tido. Estou escrevendo muito bem. Tenho sempre acesso aqui. Sim, mas agora imagine a situação. Quando você está usando alguém anda Bem, você pode mudar as coisas lá fora. Mas vamos imaginar uma situação como, por exemplo, Jake, onde J query é uma estrutura onde você tem bons lotes fora ferramentas úteis. Mas às vezes você quer criar suas próprias ferramentas e você quer compartilhá-las com outras pessoas. E essas coisas são chamadas de plugins. E então será ótimo se você não precisaria mudar algo dentro deste plugging porque você sabe que é a maioria do tempo compilado. Está ampliado, e vai parecer longe por causa disso. Você quer tê-lo fora do arquivo de script J Courage Java. Ok, e então algo como protótipo vem. protótipo é um modelo preliminar, certo? É alguma coisa. O que vem primeiro e tudo depois deste protótipo herda tudo dentro. Ah, este protótipo. Então, o que? Mesmo este construtor de função pessoa está herdando tudo do objeto que protótipo. Você pode ler mais sobre isso, pensar aqui e ah bem, você pode provavelmente ter notado que quando digitamos eg start, você poderia ouvir muitas funções que não criamos e todas elas são apenas herdadas . O que significa que nós, ah, apenas, você sabe, tipo, encontrá-los quem? Ele acabou de adicioná-los à pessoa da função instantaneamente sem, você sabe, fazer qualquer coisa e você pode mudar o protótipo. Você conhece o problema em seu modelo muito facilmente fora da função. Só digitando o nome do nome fora da causa com essa pessoa e agora podemos apenas um protótipo e depois isso. Só digitando o nome do nome fora da causa com essa pessoa e agora podemos apenas E agora podemos, por exemplo, dizer: “ Ei, Ei, eu quero criar algo novo, e então será igual a cinco. E como podem ver, funciona bem. Você pode mudá-lo. Como pode ver, está funcionando. Quem adicionou isso à turma? Nós não adicioná-lo ao objeto como aqui na linha 30 a nós adicionamos ao protótipo fora da classe. E essa coisa é usada em uma situação. Como eu disse, quando você quer criar aplausos, por exemplo, para exigir, foi muito útil para você quando você finalmente aprendeu Jake vestir. E queremos criar alguns plugins e compartilhar com outras pessoas, certo? E mas é que a única situação foram usados. Protótipo. Há alguns. Também outras situações raras foram usá-lo bem. Eu tenho Bean trouxe com desenvolvimento Web por mais de 10 anos, e eu não usá-lo mesmo uma vez porque há melhores maneiras de escrever, você sabe, você sabe, pensa em esquema Java e em todas as outras linguagens de programação, para exemplo, você pode usar composições de navegação, que significa que você está criando objetos dentro de objetos, que significa que você pode obter o colapso direito e você está nos levando um argumento, um objeto, e você está apenas objeto de assinatura dentro dessa função. E é assim que você deve escrever código em vez de fazer algo bom é chamado herança. herança em JavaScript é tão complexa e, ao mesmo tempo, parece tão ruim que eu só recomendo que você saiba, aprenda essa coisa porque, você sabe, é muito usar algo assim e é até mesmo saber o recomendado. Há maneiras melhores de fazer isso. Não demore seu precioso tempo aprendendo algo assim. Ok, que vender essa lição. Muito obrigado. 23. Arrays: Olá Hoje vou dizer-lhe o que nossos olhos e como usá-los. E, além disso, vou dizer-lhe por que até se preocupar em usar erros. Ok, então por que usá-los e Bem, o que é Harry? Harry é sério fora os valores que estão próximos um do outro. Áreas são contêineres para esses valores. OK? E você pode atuar. É tudo fora dos valores usando tipo de som off índice 012345 Eles estão ao lado um do outro e você pode usar, por exemplo, o nome da área e, em seguida, top zero e você vai obter os atores para o valor que está lá. Então agora você pode ser assim quando eu gostaria de usar algo assim imaginar uma situação como essa que queremos recuperar do banco de dados Alguns valores como, por exemplo, Pearle Docks. Então nós criaríamos algo como um produto variável. Mas ei, há mais um produto. Ok, então como poderíamos chamar isso de produtivo para talvez proteger o produto livre para e então nós, quando estamos em outro produto, precisaremos novamente o produto cinco. E precisaremos mudar o código que seria horrível, certo? E bem, por exemplo, quando olhamos para o site índice dot html, temos aqui esses itens que estamos realmente fedendo você cursos de programação e carros de desenvolvimento Web é o que se eu quiser adicionar outro curso de carro de exemplo, algo assim. Como você pode ver, nós adicionamos aqui instantaneamente. Mas bem, se javascript betonilha faria algo com esta lista itens aqui e vamos fazê-lo manualmente com cada um fora deste item e me atribuiu ao próprio livro que ele precisará também aderir. Outro habilitado seria apenas Hori boot. Temos algo como uma matriz que pode simplesmente armazenar todos esses valores juntos. Assim, para exemplos, poderíamos digitar produtos iguais. E agora aqui colchetes como esse. Isso significa que queremos ir para o céu, Eric. E agora podemos atribuir a esta matriz esses valores, um ou podemos simplesmente deixá-lo e então podemos o mesmo mais tarde aqui. Mas vamos fazer isso. Vamos, por exemplo, dizer Hey, Eu quero aqui e ali um tecer o valor como, por exemplo, html em e, por exemplo, pH sendo, por exemplo, Minha escwa acertou algo assim. E agora temos uma área que está armazenando valores livres e você pode acessá-los usando índices como esse. Então, a fim de chegar, por exemplo, esse cara aqui, nós precisaremos digitar Pearl Docks. E agora que colchetes. E como você pode ver agora, quando atualizamos, temos aqui agora ECs h d m o. Então você pode ser como, Por que zero aqui? Porque em JavaScript você tem que vir de zero quando suas coisas de indexação. Então isso significa que essa coisa tem bom no zero. Isso significa que tem um. Essa coisa tem que ser assim, não é como 12345, mas você tem que vir do zero. OK, então o último elemento é sempre menos um. Ok, Eso é assim que você acessa as coisas lá dentro. Você também pode adicionar aos valores muito novos existentes para que você possa fazer produtos de exemplo e eu quero adicionar no final Então nos fez um limão está aqui. Isso doeu. O quarto elemento é que o índice livre. Então devemos digitar algo assim e agora podemos digitar aqui um, por exemplo, JavaScript certo? E agora podemos acessá-lo usando algo assim. Como você pode ver, podemos começar quando não digitamos nada aqui. Nós apenas digitamos produtos. Como podem ver, temos agora, , todos os valores separados por vírgula. Podemos vê-los aqui muito facilmente. Então, se eu digitar algo assim, nós mudamos o valor desse cara aqui. Certo? Minha escolta para Javascript. E como você pode ver, está funcionando bem. Então, se eu quiser mudar a Primeira Emenda, eu pegaria algo assim, e isso está mudando. Mas, por exemplo, você não quer saber, as coisas aqui às vezes porque será estúpido se tivermos o dedo do pé toda vez, conte quão maney se exatamente. E então mudar algo chamado Quando você quer terminar algo no final. Você tem que encontrar soluções que você pode usar. Uma das soluções é o dedo do pé. Use a propriedade que está dentro da área porque área é realmente um objeto. E como aprendemos antes, objetos tem bons métodos e algumas propriedades que você pode usar. Ah, E quando você digita algo como produtos agora podemos usar o operador ponto e então podemos usar algo como comprimento. Comprimento está retornando o comprimento, a quantidade fora da quantidade fora das coisas que estão dentro da área. Então desta vez será o quê, Free 12 free. Ok, então é a mesma coisa, como se tivéssemos que digitar algo assim. Então agora estamos adicionando no final da área, o JavaScript e como você pode ver, ele está funcionando bem. Você também pode alterar o último valor. Então, por exemplo, digitando assim, então temos cuidadores livres querem que ainda é e sim, estamos mudando esse cara aqui. E como você pode ver, nós mudamos. Mas você também tem alguns métodos porque, bem, esta coisa é um pouco longa, certo? Podemos fazer algo como produtos. Isso e agora empurrar empurrar é apenas empurrar as coisas no final. Então, quando escrevemos aqui Ah, algo novo. Então, por exemplo, Grant Js você vai notar que estamos empurrando no final da área. Já estivemos digitando algo assim. Então, desde que isso seja ainda mais fácil. Você também deve saber que você pode criar um aumento. Sem sintaxe de dosagem como essa, mas você pode fazer algo como ver ah variável. E, por exemplo, desligue o nome. Tudo bem. E agora o novo Harry. Então, porque este é um objeto, você pode criá-lo assim doseando o construtor de função. Certo? E, sim, agora você pode usá-lo. Você não pode, você sabe, criar aqui alguns valores para leitura, e nós faremos as mesmas coisas. Mas não use isso. Você só precisa saber que algo assim existe. Se você ler o código que seria criado por outra pessoa, de forma mais lenta. Está bem. Estes lentos não são tão eficientes como este aqui. O pensamento tese vai correr mais rápido. Você em seu navegador da web. Então não use o método que eu deveria dizer que acabei de mostrar a você. Ok, use este aqui. Você também deve saber que há algo seria chamado associativo um aumento. Matrizes associativas significa que você sabe o uso de índices 012. Mas você está usando valores-chave. Eles são atribuídos um ao outro. Como é que funciona? Bem, você congere criar na área digitando, por exemplo, pessoa variável. E agora podemos fazer algo assim e que podemos digitar pessoa e agora nomear. Então agora sabemos exatamente que você quer mexer aqui Nome, certo. E nós exatamente agora sabemos que queremos ouvir loja como endurecimento e ir. Mas a verdade é que em javascript áreas associativas são objetos e eles são totalmente objetos. Agora os raios são apenas o que você tem. 012 índices Aqui eles são objetos. Totalmente. Por quê? Porque quando você digita algo que eu pessoa ponto nome você também pode acessar essas coisas muito facilmente. Vamos verificar isso. Todo o nome da pessoa da Terra. Está bem. E como você pode ver, temos aqui agora nosso QI Hum quando nós tipos são o nome Como você pode ver, nós temos a palavra Ártico. Está a funcionar. Nós podemos fazer isso também assim todos nós fizemos isso problema. Também funcionará. Ok, isso é muito útil para saber, porque você sabe, algumas pessoas podem usar Centex diferente. É uma boa idéia saber que você pode fazer coisas assim. Estas coisas como aqui são um pouco mais terroristas cócegas. Vamos a algo um pouco mais difícil. Como você pode ver, temos em nosso site agora em ordem liberado estes itens cursos de programação Papa e desenvolvimento Web. E se eu quisesse chegar a todos os carros de programação é, claro, não é como fazê-lo. Isso é muito fácil, porque nós só precisamos ir para o documento que precisamos ir fazer elemento por i d. Então, em nossa situação, essa idéia, seus cursos de programação e agora queremos acessar o quê? Menos itens. Então nós só precisamos usar obter uma mulher atraindo. Aqui está uma função que retornamos a área. Ok, Elements, não um elemento, certo, certo, certo nesta situação, mas todas as quantias. E agora podemos apenas como hey, o que menos item e podemos atribuí-lo para, por exemplo, cursos de programação. E quando o Oller fez você não vai, é que nós temos aqui. Que objeto? Coleção Html. Uma coleção é algo muito parecido. Sintonia e erradamente. Um é aquele recipiente com todos esses itens mínimos que não podemos acessar para que agora possamos morrer apareceram cursos de programação fora de zero. OK, e como você pode ver agora, temos objeto html item de locação Aram e assim, que significa que entramos nesta área e agora podemos acessar o valor. O valor do primeiro. Este elemento item porque usamos o índice zero é o que html interno estavam usando a propriedade html interna . Porque o quê? Isso está no objeto, certo? Podemos usar a propriedade em uma fileira. Html e, como você pode ver agora tem aqui sippers. Além disso, está funcionando. Queremos obter o último item como obtê-lo irá usar o comprimento fora de cursos de programação, os cursos de programação que comprimento menos um porque, bem, bem, você comprimento que retornamos desta vez. O que? 12 grátis. Mas queremos chegar ao último elemento que está no dedo do pé. Então livre menos um ainda é e por causa disso vai ter o último um limão. O legal é que podemos muito fácil saltar cursos de desenvolvimento da Web agora, certo? Como isso. E a bomba que temos. Bom. Agora o último javascript Lemon. Bastante fácil. Sabe, temos sido o nome errado de bebida Ray, mas podemos mudar muito facilmente. Você também pode não estar entendendo a sintaxe aqui agora, mas bem, eu vou te dizer como funciona. Olha, eu gostaria de lembrá-lo da lição sobre funções. Se você não entende exatamente, será uma boa idéia do trabalho, a lição sobre as funções novamente. Mas a coisa mais importante é que e método é sempre retornar a coisa para o lugar onde a função foi invocada na situação como essa. Duckman, pegue o limão por um D. Nós poderíamos, você sabe, também tipos que eu estou me sentindo variável em ordem, por favor. E fazer algo assim, certo? E agora parece um pouco mais fácil. Nós temos aqui. O que em ordenou liberado digitando algo que direito. Então nós temos bom isso em ordem isso. E agora queremos ir para dentro destes em ordem. Então nós estamos tocando outro contrato e obter de que são pelo menos quais elementos por nome de conversa , que é este item. E sim, nós estamos apenas recebendo todos esses itens de listas dentro. Isso é incrível, não é? É a coisa legal é que não precisamos criar um educado temporário que em. Podemos fazer outra vez a operação com um ponto assim. Você sabe, quando nós também poderíamos obter todos os cursos possíveis apenas fazendo algo que eu recebo do documento todos os elementos por tag nome esses itens. Mas por causa disso, se temos agora todos eles para que primeiro um limão será o que c plus. E sim, suponha que mais o segundo seria ver afiado. E assim vá em frente. Mas você sabe, nós não queremos ter todos esses itens na maioria das vezes querer acessar o que queremos acessar . Então, é uma boa idéia para também quando você cria seu documento HTML, você sabe, nomear seu outro estes Então é fácil acessá-los a partir de código JavaScript, certo? É uma boa ideia nomear coisas dentro do código do demônio da idade. Se você sabe que algum dia algo seria acesso através do casaco JavaScript. Certo, só tem essa lição. Muito obrigado. 24. Métodos de matriz úteis: Olá. Na última lição, você aprendeu o que é uma era nesta lição. Você aprenderá novos métodos e propriedades que o ajudarão a trabalhar com um aumento. Ok, então você sabe agora que isso é realmente um objeto especial, certo? E é por isso que, por causa disso, você tem boas propriedades e método porque os criadores de um aumento deram a você. Então você pode, você sabe, trabalhar mais rápido com eles. Ok, a fim de mostrar que é desta forma possível como esses métodos estão funcionando. Eu criei aqui no se com a identificação, é chamado de resultado. E agora podemos usá-lo aqui, chegando a ele usando documentos. Agora obter elemento por I d resultado. E agora podemos acessar a propriedade HTML interno fora do objeto que é retornado pela direita desmontada , Então, podemos mudar dentro do HTML interno para o valor, por exemplo, cursos de vídeo. E como você pode ver agora podemos ver todos esses cursos de vídeo impressos aqui. E você pode estar se perguntando por que nós podemos ver todas essas propriedades lá dentro. Este é um objeto especial, certo? Surgiu um objeto especial. E como isso acontece? Porque normalmente você está executando aqui por padrão, uma questão que é chamada para string. Eu disse que é assim que os objetos funcionam. E isso para transmitir padrão é realmente escrever um assunto que é chamado de valor off. Como pode ver, temos a mesma coisa. Então, por padrão, esse comportamento está funcionando assim. Você pode alterar, por exemplo, esse comportamento usando o método, basta ir juntar-se, e então você pode digitar aqui, por exemplo. Ei, eu não vou. Não quero um coma. Eu quero quebrar quebra html aqui. E agora imprimimos. Todos esses cursos de vídeo como esse é oh, está funcionando de forma diferente. Nós não estamos imprimindo de forma diferente, e é muito útil porque imagine agora nós também poderíamos criar aqui uma tabela e Ari, nós poderíamos até retornar o valor da função aqui. Como essas coisas devem funcionar, certo? Isso é muito legal, porque ele pode interpretar instantaneamente como surgir deve ser, deve ser impresso apenas usando esta função conjunta. Ok, então é assim que fazemos é assim que a função conjunta está funcionando. E esta foi a primeira vez que aprendemos. Então join é usado para unir elementos e por argumento enviado, ok. E nós temos uma propriedade muito importante sobre a qual falamos antes. Nós só chamamos comprimento comprimento. É só devolver a terra do Eric. É muito importante saber quantos membros estão dentro, porque então você sabe quantas vezes você precisa passar pela área mais tarde. Será muito útil na próxima lição quando queremos o nas próximas lições quando você quiser emprestar Lopes. Ok, então lembre-se sobre esta propriedade é uma das propriedades mais importantes também é muito importante saber que a articulação não está funcionando com os cursos de vídeo errado, você sabe, como se estivesse mudando seus valores. Aqui é apenas para o propósito de apresentação. Então isso significa que se nós, por exemplo, fizermos algo assim, vamos usar o operador plus equals, que significa que nós não estamos indo aqui para o conteúdo existente, algo novo. Como você pode ver agora nós temos o bem. Depois de imprimir esta área, você sabe o espaço e, em seguida, esses traços que nos ajudar a depurar o casaco e agora podemos adicionar o valor dos cursos de vídeo. Como você pode ver, o valor não mudou ainda o mesmo. Essa coisa está nos devolvendo. O resultado para impressão. Ok e derm ou funções. A próxima função é chamada cone Cut, que é da guerra Kolkata Concoct em oito. Corte o nome algo que e ele está se conectando a um aumento. Então, se eu fizer algo que você vai notar que nós nos conectamos ao nosso em e nós usamos nos juntar. Desculpe. Ok. Agora nos conectamos a um aumento. E como você pode ver, eles não estão conectados mais tarde eles estão conectados como o valor de retorno desta coisa. Então, se quiséssemos manter esse valor, você sabe, queria ser mudado. Devíamos fazer algo assim. Cursos de vídeo. Devemos retornar o novo valor e atribuí-lo aos cursos de vídeo. Então, como você pode ver, o novo valor é sempre assim. Lembrando disso porque nem todas as funções são de trabalho. Trabalhando com o valor, a descida aqui e o objeto principal em que estamos trabalhando agora, não estamos alterando o valor. Ok, então como você pode ver, é assim que funciona. Conch Capitão Aid. Está se conectando para surgir. O comprimento é vermelho. Retornando o comprimento de uma matriz e nós temos. Além disso, algo vai discutir. Pop pop está apenas estourando sua direita explodindo. O último elemento. Quando você faz algo assim, você está removendo o último elemento. Como você pode ver, ele agora é removido da área original, então não é. Ah, o molho não existe mais tarde e vai ser devolvido instantaneamente. O pensamento é devolvido porque mais tarde nós podemos, você sabe, comparar essas duas coisas que meninas em fazer algumas operações sobre isso. Coisas assim são muito úteis. Você vai aprender sobre essas coisas, por que elas são úteis mais tarde quando você começar a usá-las. Então isso é apenas esperando remover o último elemento que você também pode empurrar, que significa em um elemento para a área final para que possamos fazer algo como empurrar e ouvir novo elemento. Como você pode ver Agora, nós adicionamos aqui um novo elemento, e ele vai retornar o novo tamanho fora de uma área e o retorno o novo tamanho fora em Eric, nós também temos algo ir este turno frio, que significa remover sua elemento. O primeiro elemento moldado bem, quando fazemos isso assim, como você pode ver, removemos o primeiro elemento. Também vai ser devolvido. Que. Você também pode usar a versão chefe da ONU fora desta função, que está movendo todos os elementos na área por um e adicionando um novo elemento no início. Então, quando fazemos algo assim, meu pedido bem melhorado, ele será adicionado implorando e tudo é movido. O PHP não foi removido. Certo, é assim que funciona com ovelhas. E há uma função muito, muito legal que acabamos de matar. Classifique que, como você pode imaginar, está classificando a área. Isso é bastante incrível. Como você pode ver agora é ordenado alfabeto para carregar. Então G h MP nós, certo? Bastante incrível. E se você quisesse classificar esta área de forma descendente? Então, a partir do Z comer definido para um, você só precisa fazer algo como cursos de vídeo. E agora tipo reverso reverso é apenas inverter uma área. Agora esta descida aqui é como domingo. Isso é incrível, não é? Você pode fazê-lo instantaneamente, consultar as coisas muito fácil. Ordenar é uma ordenação alfabética Kelly. E há um problema porque temos bons números também como servir números. Será o mesmo que você pode ver? Os números não classificaram. Bem, porque temos 44 deve estar aqui, certo? Então ele não está funcionando corretamente porque ordenar por padrão é usar uma função dentro desses metal . Há uma função que estes anos para a razão da empresa, e é usado para a força, não para números. Então, se você quiser comparar números, devemos enviar aqui uma função que vai mudar a função padrão. E aqui, como você pode ver, nós aprendemos nas últimas lições sobre funções que podemos criar uma função animus, esta situação muito útil e com dois parâmetros que vai retornar um menos bi e agora nós podemos ser. Mas por quê? Mas por quê? Parece que porque a função de classificação está usando uma função de comparação que está olhando assim. E ele tem, um, um, você sabe, dentro de algo como, hey, alguém enviou a função para cá? Caso contrário, use a função padrão para classificar strings. Se não, use o que eles enviaram aqui e mãe deve se parecer com isso, e deve manter o número negativo ou positivo ou zero se zero. Isso significa que essas coisas, no entanto, são comparadas, e são as mesmas. Então não devemos mudar a placa. Se negativo, devemos mudar o lugar para o outro lado e temos positivo que devemos mudar novamente para o outro lado. Totalmente eso fazendo assim. Nós vamos ter agora como enviar um, números. Como você pode ver, eles agora estão corretamente classificados. Nós não precisamos reverter agora porque, bem, bem, ele não está funcionando de uma maneira que agora também podemos mudar a maneira como ele se classificou apenas mudando. Seja como você pode ver, está funcionando eso Não se preocupe. Se você não entende exatamente como ele está trabalhando, você está apenas enviando uma função para a função de classificação que está usando disfunção. Então ele mudou o comportamento padrão. Você pode criar funções como essa por conta própria. Como você pode ver agora, envio de função para uma função é útil, e até mesmo criadores de JavaScript pessoas que criaram um ar. Eu usá-lo porque então você pode alterar o comportamento padrão ou alguma função. E é assim que se faz desta vez. Ok, então classifique a matriz etienne alfabética e nós vamos proteger uh, aqui. Hum, isso é usado para classificar o caminho de envio, ordenar e arejado caminho descendente. Ok, há também não, nós devemos esses tipo reverter está invertendo. Sim, o Ari, a oferta mais antiga. A próxima função que devemos chamá-lo Falar sobre ele é chamado fatia Slice é apenas fatiar. Sabe, como se estivesse cortando o pé. Vai cortar os pensamentos por dentro para que possamos cortar. Vamos fazer isso com alimentar seu espartilho porque é mais fácil. Hum, vamos desviar os cursos de vídeo e isso é, por exemplo, desliza elementos de um para livre. Como você pode ver, nós temos. Agora ele escola Myer e JavaScript e mais tarde tudo é o mesmo. Então isso significa que esses slides meu pensamento não está funcionando no principal errado. Não vai mudar os valores lá dentro, mas você pode retornar. Sabe, eu quero coisas daqui, Teoh aqui e podemos voltar. Mas precisamos lembrar que está funcionando como está. Ah, cortando um limões de 12 colchete livre, que significa que ele vai cortar primeiro um limão, que é nesta situação Ph. B. Mas não incluindo o primeiro de limão. Então ele vai cortar meu script SQL e Java, incluindo livre. Então, essas assinaturas nós temos o único e este sinal significa com grátis. Então, se escrevermos algo assim. Vamos, por exemplo, para cinco, o que significa trabalho. 12 nós não queremos meu esque bem, e então 345 O que significa que temos JavaScript, PDO e Grand Js. Como pode ver, está funcionando bem. Então é assim que as fatias funcionam e você também tem algo ir. Isso chamado de suprimentos emenda é muito legal, porque quando você digita algo como, por exemplo, um e então você digita, por exemplo livre, isso significa que ele vai remover todos os elementos dentro do área a partir da primeira posição. E ele vai remover livre deles como você pode ver o primeiro discurso de posicionamento ser. Mas não inclui, como com a fatia. O primeiro dilema. Então ele vai remover 12 alinhamento livre. Então nós fazemos. Nós não temos meu javascript escola e vídeo, e ele retornou esses valores. Mas você também deve notar que ele vai removê-los da versão original fora em uma direita. Então é muito importante, então ele remove de dentro das áreas alguns limões, certo? É muito legal. E você também pode este muito legal em Newell Um monstro. Então, por exemplo, algo novo um número. Ah, a cabeça dela pode ser que você possa aderir como dinheiro novos valores como ele quer, para que não seja livre. Como você pode ver, acabamos de adicionar dentro do lugar onde normalmente meu crânio e ciúme DOP onde adicionamos novos elementos aqui. Certo? Então o primeiro argumento é o significado de qual lugar queremos começar a remover elementos. E segundo argumento é nos dizer quantos elementos eu quero remover e, em seguida, os argumentos opcionais para que você possa obter tantos como você quer elementos que você deseja adicionar depois, uh, posição no argumento ovo primeiro. Ok, então os mortos são os mais úteis para métodos que você deve saber quando você está jogando com um aumento. E agora você pode ser como, Talvez isso é que eles não são tão úteis. Mas mais tarde você vai ver que a maioria deles você com alguns eles usaram porque você terá algum processamento em áreas. Certo, isso é tudo nessa lição. Muito obrigado. 25. Enquanto e fazer enquanto em enquanto: Olá Hoje. Eu diria que ambos são loops como usá-los. E em ambas as situações, você deve usar loops. Por que se preocupar em usá-los? Então loop é algo que pode executar um casaco. Um blogueiro sem casaco, quantas vezes quiser. Há situações em que algo assim é muito útil. Imagine uma situação como essa. Ele quer chegar ao resultado. Assim, com coisas como o documento obter elemento por eu d resultado. E agora nós o salvaríamos dentro do muito capaz. Como esse resultado. E agora temos o resultado. HTML interno. E eu gostaria de adicionar sistema de vídeo carro. Então eu vou fazer alguma coisa. Cursos de vídeo, Hum, e zero. Como pode ver, temos agora, pêssego. Quero adicionar outro. Então vamos fazer isso. Hum, ok. 1234512 Grátis para longe seis. Ok. Então eu deveria ter todos eles agora. E se eu quisesse agora na linha de descanso? Certo, é uma boa ideia. Vamos ao intervalo. Eu tenho que você sabe, aqui, aqui, aqui, aqui leva tempo. Certo. Mas você não vê as semelhanças entre todas essas linhas são quase iguais, certo? Estamos apenas nos repetindo. E temos aqui em todos os lugares. O que? 012345 Apenas uma diferença. Há uma pequena diferença neste código por apenas o número está mudando, certo. O número está mudando por um. Então podemos usar algo assim. O que é chamado lope? Porque loop pode executar uma linha de código quantas vezes quiser. Como usar um loop. Digite o nome do loop há muitos loops nesta lição. Aprendemos dois deles. O 1º 1 é branco bom, o que é fazer o que vai fazer Executar o casaco até que a expressão aqui dentro ele vai ser verdade. Ok, então o que pode ser essa expressão? Podemos criar, por exemplo, um rebelde? E se for menor que cinco, executaremos as coisas entre essas chaves. Ah, nós temos aqui aviso porque nós não criamos uma variável. Eu sou assim que nós temos que criar um inicializá-lo com zero. Então sabemos que esse é o número. E agora há um problema com este olhar, este loop será executado em notário diferente se eu fiz alguma coisa. Como, por exemplo, Allert. Oi. Agora vamos ver no reboque Infinito, janelas infinitas. Nós só vemos primeiro sabemos que o segundo e o terceiro e 550 Faith e, um Bam, bam, bam, bam! Infinito. Certo, porque zero é sempre menor que cinco, certo? Essa expressão. Sempre seremos verdadeiros. E assim por causa disso, esta instrução com em torno de sempre por causa disso, você tem que mudar dentro do loop depois, por exemplo, executar todas as outras instruções Lá eu usando o post incremento Tater post incriminatório está aumentando o número. Por quê? Por volta de um. Então será como zero um é um menor que cinco. Sim, então um para fazer é menos do que cinco anos. Assim também. Então a única coisa que está mudando nesta droga é a variável I e olhar para isso aqui. Precisamos de algo mudaria assim. 012345 Certo, Então esta será a situação perfeita para usar isso. Olha, podemos copiar isto aqui em cima. Vamos ao redor deste programa. Como você pode ver, 01234 e cinco não são mostrados. Por quê? Porque cinco não é inferior a 555 luta igual, certo? É por isso que cinco não são impressos. Então agora podemos mudar esses Teoh Death Place. Podemos apagar essa coisa porque não precisamos mais dela. E aqui eu posso fazer algo como aquele bálsamo. E como você pode ver, está funcionando. Nós apenas imprimimos tudo deles de uma vez. Bem, não temos molho. Por quê? Porque o molho é 123456 Devemos digitar o seu seis. Mas isso ainda não é uma boa idéia para ter um seis anos, porque quando você adicionar algo novo vai precisar mudá-lo aqui. Então sempre tente usar o código deles dessa maneira. Você usou isso? Caminho universal? Então, quando aderimos agora comprimento. Agora, quando você em algo aqui souber, seremos capazes de imprimi-lo. Como você pode ver agora podemos ver molho. Mas quando você realmente ouve algo novo, então, por exemplo, por exemplo, eu criei as novas chamadas sobre, um eu sei e você é Js você verá que é impresso muito fácil. E agora podemos adicionar muito fácil a linha de freio assim e bomba é sprinted dentro destes loop, você pode até mesmo fazer vir parisienses fora exemplo cursos de vídeo com cursos fora I se for igual a, por exemplo, Bem, eu gosto de fazer algo diferente. Eu gostaria de adicionar ao HTML interno algo como antes Olá e bomba assim. E como podem ver diante do meu Esseker, podemos ver agora. Olá, está funcionando. Então o loop está apenas executando todas as instruções dentro. Até essa coisa, essa expressão não é verdade. E como você pode ver, ah, está mudando no único valor que você está mudando Kier e tem que ser mudado. Caso contrário, teríamos problemas, certo? Nossos 55 pessoas parariam de trabalhar porque quem o sobrecarregaria com instruções de Duminy ao mesmo tempo? E é muito útil para um zoológico pode ver atravessando a área fazendo algo uma vez, e vai ser executado magnetizado. Vamos um disco incomum aqui e leva a algo ainda difícil lá. Vamos, por exemplo, imaginar uma situação. Eu quero levar programação maldições direita e fazer algo com eles então eu faria para o nosso um documento de cursos de programação ousado obter elemento por I D. Eu gostaria de ir para os cursos de programação, identificá-la e, em seguida, bomba que eu Gostaria de, hum, ir para obter elementos por nome da conversa, Menos item. Então eu não tenho cursos de programação. Vamos levar estes sob o comentário. E vamos, por exemplo, fazer algo assim que é usado resultado html interno em Vamos agora ir para o programa aqui. Cursos de programação do programa O quê? Vamos ver. Como você pode ver, temos a sua coleção html objeto. Certo. Então agora podemos tirar cada um desses elementos menos. Então, como você pode ver agora, nós temos bom elemento mínimo. E agora bomba que html interior enfraquecer tipo e vamos conseguir o quê? C++. Se trocarmos esses dois, vamos pegar C afiado. Se mudarmos estes 22 teremos java bastante impressionante, não é? Ok, então, hum, nós podemos agora mudar apenas este valor para, por exemplo, imprimir todas as coisas dos cursos de programação. Certo? E você também pode fazer algumas coisas com eles. Podemos fazer algumas operações com eles, então precisamos dar uma olhada. Por quê? Precisamos criar um “ok “muito cego de guarda. Você pode chamá-lo do que quiser se eu for mais baixo do que é boa idéia, tirar todos os cursos de programação, comprimento da bomba, então nós queremos executar o frio assim. de E acabeideesmagar os nossos cinco pais porque não adicionei isto. Pensa. Ok, eu abri o Firefox, e como você pode ver agora, se você ir C ++ ver loja e Java impresso fácil e nós podemos adicionar aqui, por exemplo, o cara brilhante e eu gosto disso e ele está funcionando bem. E agora podemos adicionar qualquer coisa em nosso site. Essa é a parte mais importante assim. E como podem ver, adicionámo-lo aqui, e foi instantaneamente aqui. Então você sabe que isso ligou. Estamos apenas imprimindo em outro lugar, mas você não precisa imprimi-lo. Você poderia fazer algumas operações. Você poderia enviar os valores para algum tipo de programa que irá enviá-lo para banco de dados mais tarde em suas coisas assim. Tudo o que você pode fazer qualquer coisa com qualquer informação fora do seu site. Neve muito longe, porque pode ir para todos esses elementos de uma só vez. Isso é muito, muito incrível, não é? E agora eu gostaria de treinar com você um pouco mais, por exemplo, funções porque Imagine uma situação como essa. Não queremos programar cursos agora. Gostaríamos de cursos de desenvolvimento Web que precisamos toe. O que? Mude todas essas coisas para o desenvolvimento da Web, certo? E agora temos um bom desenvolvimento Web. Mas se eu quisesse os incomodados, eu precisaria ter ambos os tempos, o mesmo casaco. E agora imagine uma situação em que você precisaria fazer isso nessas cinco vezes, e então você precisaria mudar algo em ouro. Uma coisa que precisamos mudar em cinco lugares aqueles em situações como essa você deve pensar instantaneamente algo como, Ei, é uma boa idéia criar uma função. Então funciona morto Bem, por exemplo, imprimir cursos de impressão, o que for. E aqui vamos tomar como parâmetro o i d off em ordem que menos. Ok, e agora podemos copiar isso aqui, e só precisamos fazer o que eu fiz de uma lista ordenada está aqui. É uma variável. Então não deveria ser assim. E aqui não chamaríamos de cursos de programação. Mas o que quer que seja apenas cursos, e agora podemos apenas envolver um trabalho. Então imprima cursos e eu só preciso enviar Ei, eu quero este aqui e bomba. Não temos cursos de programação. Ei, eu quero cursos de desenvolvimento geo Web e eu tenho constante de desenvolvimento Web. Eu quero ambos os cursos e eu tenho ambos os cursos uma vez. Isso é simplesmente incrível, não é? Agora você pode ver por que eu te mostrei com tantas lições. Ah, todas as disfunções, tudo isso. Ah, todas essas variáveis Por que eu falo tanto sobre isso? Porque quando você entender isso, você pode criar um casaco que é o mais importante. Isso pode mudar facilmente mais tarde, certo? Que trabalhamos sempre sem você fazer muito esforço, certo? E todo mundo, isso é muito legal. Entendemos seu casaco por causa disso. Os resultados são outro budista baixo chamado fazer por que poderíamos fazer algo como fazer. E então por que assim? Vamos levar isto para baixo do comentário e vamos mijar aqui. Como você pode ver, está funcionando da mesma forma. Mas há pequenas diferenças entre a massa. Por que e por quê? Qual é a diferença quando você está fazendo? Do I Look, você sempre executará o pensar que você, o que significa que mesmo que a expressão como essa não seja através da imploração desta vez, esta coisa será executada. E, uh, desta vez estamos usando aqui. Valor 5 51,251 aqui, então vamos mudar para zero por um segundo. Como pode ver, imprimimos o Ph. B pelo menos uma vez, certo? E se mudarmos isso para este loop, então fazemos algo assim mudando 20 como você pode ver nada impresso por porque esta expressão é verificada no início. OK, então se não for verdade, nada será executado aqui. O que eu vou ser Ron pelo menos uma vez. Então essa é a diferença que você deve se lembrar. Fazer enquanto e foram função Weifang. Eu mais tempo usei a função esposa, mas pode haver uma situação em que você tem que usar a porta quando você quer correr algo e longe, mesmo se o mesmo. Se a condição não é assim, vamos incomum isso e a coisa legal sobre todas as coisas assim é que agora você pode verificar algo, tornando a empresa razão. Se, por exemplo, o cara aqui auto se percorrer o I é igual ao PHP, eu quero algo especial para PHP. Então eu quero que esta é a minha língua e bomba. Ah, há um local de pêssego? PHP. Nós temos pêssego sendo, hum certo, nós devemos rasgar aqui se html interior Esta é a minha linguagem. Está funcionando bem para o PHP. Nós adicionamos algo que podemos mudar esses dedos, por exemplo, a bússola e ainda está funcionando Tudo o que podemos também algo como ou é igual a escola Teoh Maya . E nós temos isso agora com o PHP, eu falei sobre o caminho errado. Vamos usar Java. Como você pode ver agora ele está aqui e está aqui, então é quando você pode fazer algo especial para ambas as coisas. É por isso que você precisa de operadores assim. Como você pode ver, nossos programas estão se tornando um pouco mais complexos, mas é assim que vai ser no futuro. Ok, isso vai para a lição. Muito obrigado. 26. Para loop: Olá. Na última lição que você aprendeu Waters Loop e como eles funcionam nesta lição, você aprendeu um novo loop que acabamos de pedir. E bem, a verdade é que é apenas um nome diferente para o porquê de ele fazer as mesmas coisas como o Wild Blue. Mas você precisa digitar algo assim. Como você pode ver, ele está funcionando quando é por isso que também está fazendo o mesmo. Então, por que se incomodar? Bem, é uma boa idéia se preocupar com isso porque este semi dois-pontos são, você sabe, separador para inicialização e para o pensamento que tem que ser feito depois de executar todas as coisas dentro do olhar, como você pode ver, ainda trabalhando. Então é um separador para coisas assim. Por que algo assim precisava. Agora é mais limpo, você não acha que você não tem o bom agora, fora do loop, a inicialização e dentro após a última linha, o que tem que ser feito depois de cada volta através do loop, você pode esquecer este e estes lá fora. Então aqui parece um pouco estranho porque, bem, você não sabe exatamente se ele está realmente conectado com o visual. Eu realmente prefiro o primeiro por causa disso. É apenas mais limpo é mais fácil de ler, pelo menos na minha opinião, mas realmente depende da preferência de outras pessoas. Então, em suma, você tem que conhecer todos os loops possíveis porque, você sabe, nós não sabemos qual deles alguém vai usar, e você não só criará seu código por conta própria. Outras pessoas que criamos. Cody vai ler o código deles, e você precisa entender. Então, mesmo que não goste disto, tens de te entender. Mesmo que você não goste de selvagem, você tem que entender de qualquer maneira, até agora estará fazendo a mesma coisa. Mas a diferença é que aqui no início, estamos especificando o que deve ser feito no início. E aqui no final. Nós temos que especificar o que tem que ser feito no final, quando você executar todas as instruções, o preto como um bloco de casaco após cada corrida, isso é tudo. Então, vamos talvez digitá-lo aqui para inicialização off variar boose, e isso está começando agora condição. E então o que tem que ser feito depois de cada lábio depois de executar cada olhar certo, eles dizem que você pode, claro, criar variáveis Manimal você pode criar mais complicado. Ah, condições complicadas. E você também pode, você sabe, incrementa mais coisas assim. Mas na maioria das vezes você terá apenas um loop for olhando exatamente assim. Então, não vai. Por exemplo, impressão de porta-copos de vídeo mudará os cursos de vídeo dessa duração. E gostaríamos de apenas imprimir aqui cursos de vídeo como esse. E ele está trabalhando. Mas o zoológico realmente muito legal. Você não vê isso? Imprimimos instantaneamente todas essas coisas. Ah, foi como um segundo que mudamos no que esta linha de co bam bam bam! E sua impressão. Eu realmente amo o Lopes. Espero que também gostemos que eles digam essa lição. Muito obrigado. 27. Quebre e continuar e a: Olá. Hoje vou mostrar-lhe quebrar e contar as instruções que são usadas dentro dos lábios. Vamos grande uma situação simples no início. Vamos matar criar um loop for que vai mostrar, por exemplo, cinco números. Certo, então deve parecer assim, certo? Estamos criando foram inicializando uma variável e atribuímos a zero. E se zero é reduzido e cinco, então apenas aumentá-lo após cada iteração. Então, depois de cada corrida fora deste olhar e quando nós atualizá-lo com, por exemplo, outro acho que eu com 012 livre para cinco E nem sempre. Sabe, você nem sempre sabe de tudo. O que tem aqui dentro? Então, por exemplo, você pode ir para ah, menos itens que você pode ir para as pessoas. E por exemplo, quando algo acontece, você não gosta, você quer sair do loop e para fazê-lo , você pode digitar algo. Se eu for igual a, por exemplo, cinco off para, em seguida, quebrar. O que significa quando estamos nele? Agora você verá 01 n nada. Por quê? Porque dois é igual a dois e nós dizemos “quebrar “significa sair deste olhar. Você sabe que esta é uma situação simples. Mas como eu disse, você não. Você poderia, por exemplo, ir para algum tipo de muito. E se isso for igual a algo que você não gosta, você não quer que o seu, por exemplo, para loop seja executado no mais. Então você só se gaba. Tudo bem, nada depois disso será executado. Você também tem algo bom. Isso poderia continuar quando você continuar você c zero um e você não viu apenas dois. Mas aqui, ei, há de graça e então tudo bem. Por que está funcionando assim? Porque continuar, continuar está trabalhando, trabalhando como uma pausa. Mas depois de quebrar uma vez o loop, ainda calma notícias t. Ok, então é só quebrá-lo uma vez. E o quê? Por quê? Algo assim seria útil. Esta coisa é um pouco de uso é útil quando você faz coisas como, vamos, por exemplo, obter os cursos de programação. Então, isso é ótimo. Se somos capazes de ler, vamos pegá-lo I d. E vamos pegar uma mulher por nome de conversa todo esse item e vamos até eles tão variáveis. E se eu é menor do que a programação de cursos terra do que eu mais ok e agora eu gosto de, por exemplo, em algo como mesmo agora, antes de cada um fora que trabalho aqui. CPAs, Patsy Sharp, Java, Paschal. Como eu faria isso? Eu iria apenas para as maldições de programação e em HTML interno. E o que normalmente você faria algo assim direito, você acrescentaria. Agora, mesmo o problema sobre este operador é que ele iria adicioná-lo no final. Oh, nós deveríamos, é claro, pegar cada um dos caras. Então assim e um para que você possa ver que estamos adicionando no final. Se você quiser adicionar algo no início, é improvável que algo assim. Então, estamos apenas atribuindo algo novo mais alguma coisa. Qual era o tempo todo deles agora? Ele ficou quites em todo lugar. Mas o que? Isso não é nem sempre, certo? Eu quero fazer isso no “Why Once “um fez. Mesmo assim, como fazê-lo? Se eu estiver com o modelo do fosso I modelo 2 é igual a zero então eu quero mostrar, mesmo como você pode ver agora, ele faria mesmo quando está desligado. Então não está funcionando. Trabalhando bem? Por que isso é algum porque, bem, nós sabemos que estamos contando em um raio. Nossos números de 00123457 E em nossa situação, bem, todos os números pares são números antigos ou todos os números estão mesmo certos, porque quais índices simplesmente não estão na posição brilhante. Então vamos apenas mudá-lo usando este sinal aqui. E como você pode ver agora, nós temos que até mesmo lugar certo. Então ele adicionou ao lugar certo. Mas o problema é que bem, imagine que tivemos o bem aqui. Uma coisa simples de se fazer. E depois das oito, temos aqui muitas instruções, está bem? E vamos ver como está indo depois de executar esta coisa é que você pode ver que podemos ver aqui. Zero aqui não é nada mesmo. Está bem. Um para e nada, Capitão. Certo. Não mudamos nada de graça. Ok? Então, às vezes, não queremos fazer todas essas instruções aqui como agora, porque não precisamos executar o outro agora ou não queremos fazer algo. Garotas com eles. Nós temos outros caras, certo com o que estão fora. Então você pode apenas usar o continuar assim de outra forma apenas continuar e agora podemos ver um e livre apenas aqui. Como pode ver, estas instruções serão executadas no Lee. Se é cauteloso para cercá-los. Ok? Só há uma lição. Muito obrigado. 28. Para em in: Olá. Hoje eu vou mostrar-lhe para em loop, o que permite que você processe objetos muito rápido. Como é que funciona? Quando você digitou para, em seguida, você digitar aqui variável. Essa é uma variável temporária. Pode chamá-lo do que quiser. Mas chamamos-lhe propriedade? Porque é realmente uma propriedade aqui. Certo, tirará o valor da propriedade pessoalmente. Aqui está o nome do projeto todo. Quer protestar? Está bem. E embora Carrie prepara Michael e seria tempo livre porque você tem propriedades apropriadas de graça dentro de pessoa. E quando você dupe, por exemplo, propriedade, você vai notar que com o nome Serling e oito, que significa que aqui é sempre um valor de propriedade. E também aprendemos que podemos fazer algo como pessoa. Esse nome e essa coisa nos mostrariam qual o valor tanto o nome quanto nós temos para você Ártico. Mas também sabemos que podemos agir dessa coisa digitando algo assim. Isso é muito legal porque essa coisa nos permite usar uma variável aqui. Você pode ver que podemos, por exemplo, fazer algo assim, e também vai guerra. Então, com essa coisa em nossa mente, sabemos que podemos usar o que o nome e agora o valor que é alterado para nome, sobrenome e idade. E como você pode ver agora aqui Good Arik, vote no Ártico 26. E isso é incrível, não é? Então podemos ir para todos os valores dentro do objeto muito rápido e podemos usá-lo por qualquer razão que quisermos . Por exemplo, variável X, Creative Herbal X e nós, por exemplo, queremos no X esses valores, certo? Então ele faria algo assim e então nós vamos alertá-lo. E como podem ver, temos indefinido podiátrico ártico 26. Por que indefinido? Eu não fiz. Especialmente por quê? Porque por padrão, quando fazemos algo assim, isso é indefinido e fizemos algo mais igual. Estamos adicionando justo e você pensa para o indefinido. Ok, então é uma boa idéia às vezes inicializar algo com apenas em algo que nós não fazemos nada. Temos as outras variáveis com os outros valores. Como podem ver agora temos um transistor Patrick adequado. Então é apenas como um novo É como algo como zero para adicionar chorou, Temos aqui uma string vazia. Certo, então é assim que passamos por um objeto que se torna objeto. Mas você também sabe que cada IRA também é um objeto. Então, podemos usá-lo assim? São as nossas datas desta vez, como podem ver, podemos ver todos os valores possíveis dentro do Eric. São as nossas datas desta vez, como podem ver, Então, também é coisa muito rápida que permite que você pediu para ir através da área. Mas o problema é que usar algo assim não permite que você que vocêfaça algo como aumentar seu índice para comprar de graça. Você tem que ir a todos eles, certo um por um. Então, é mais tempo usado em objetos típicos como esse quando você não pode saber, você não sabe quantas propriedades existem. Como são os chamados e outras coisas assim? Vamos ver como vamos trabalhar com o curso de programação. Claro que sim. Suponha que faria algo assim. O que vai acontecer como você pode Você pode ver que temos boa html pelo menos item um limão e wow. Aqui temos sido função e filho e outra função e quatro. Por quê? Porque bem, nós sabemos que ele está indo para todas as propriedades possíveis e um fora da propriedade para a coisa que foi devolvida aqui. Então, para a coleção pode verificar o que? Ele está morto digitando algo. - Pai. Certo. Como você pode ver, HTM uma coleção é algo bom é chamado de função. Outra função e o número que você provavelmente notou que o número era igual a quatro porque é um comprimento direito. Quantos fora do assassinato e bem, nós tínhamos todos esses elementos. Então, como fazer algo assim? Como tirar todos os valores sem este indefinido Pense como fazer estes? O que sabemos que podemos verificar usando o tipo fora do tipo como você pode ver o que bom objeto, objeto e, em seguida, número da função função. Então você tem nota desde que pelo menos um limões que são o único que queremos usar nosso objeto, as outras coisas não são objeto. Então nós poderíamos apenas decidir, Como se digitar fora Bem, nós podemos copiar estes totalmente não é igual ao que para o objeto. Então, apenas quebre. Nós não precisamos fazer este animal vivo como você pode ver agora aqui. Bom. Quatro vezes o objeto e depois nada. Então, como você pode ver, intervalo é realmente útil porque nem sempre. Você sabe, você nem sempre sabe como você está, hum áreas olhando como as coisas estão dentro de você não é como sempre estão criando tudo certo e agora podemos simplesmente quebrar e podemos facilmente fazer algo como em seu HTM tudo. E podemos trabalhar com esses valores, certo? Bastante fácil. Você também pode usar o continuar continuar também vai funcionar muito bem, mas você pode ver. Mas o continuar, lembre-se, está trabalhando assim que você está continuando então Então ele será executado novamente. Será verificado novamente. Então, estamos bem na hora certa desta vez. Pelo menos porque você sabe, você deve ter notado que os objetos estão no início, certo? O mínimo de itens está no início. No final, tínhamos duas funções e um número. Então Bragg é melhor nesta situação. Mas você sabe, às vezes você só quer escolher objetos do enorme ah, objetos de objetos. E você quer apenas objetos da verdade então e você não sabe onde eles jogam. Então, esta é uma boa idéia para usar, por exemplo Continue direito, porque então você vai para você poderia processar todos os objetos e muito fácil. Certo, só há coisas boas. Ouça, muito obrigado. 29. Objeto de argumentos: Olá hoje vai se exercitar um pouco. Vou te mostrar o objeto. Nós apenas chamado argumentos e ele está armazenando todos os argumentos que são enviados para a função. Para usá-lo, você só precisa tomar a função. O nome da função que é chamada, por exemplo, em números. Você adicionaria números e instantaneamente quando você cria uma função de TI, você tem uma boa visão. A função criou um objeto que é chamado argumentos. Ok, agora você pode digitar coisas. Vocês são humanos de comprimento. E quando você faz algo, Ivor, variável um pouco. E agora vamos envolver a função com, por exemplo, livre 76 e quatro. Você vai notar que se fizermos algo como alerta e atualização, como você pode ver, temos bom para porque nós enviar, portanto, argumento. E dentro desses argumentos Bem, dentro desse objeto, você pode acessar cada um desses caras enviados aqui usando o índice. Como podem ver, temos o segundo homem livre. Sete. O terceiro cara é o que seis. Hum, eu sinto muito. É o quarto, certo? Quero dizer, temos que lembrar como as coisas são indexadas. Então, seis e o último cara é para isso está funcionando corretamente, certo? Podemos acessar todos esses valores para que possamos usá-lo em ordem para, por exemplo, esses números e você tem provável agora notar que podemos enviar argumentos minutos aqui como queremos estes muito úteis para situações como essa. Então, como Teoh faz alguns desses argumentos podemos usar, por exemplo, um lobo, certo? Porque você pode ir para todas as coisas dentro do objeto para que possamos usar, por exemplo, lóbulo, que é chamado em Então podemos ir criar uma festa temporária dentro do objeto argumentos. E então nós podemos atores cada um fora do de argumentos valor como este como nós aprendemos na última lição. Para que possamos alergias. Isso é tudo. Hum propriedades, propriedade tão livre sete procura para tudo está funcionando de foi para todos esses valores. Então agora podemos adicioná-lo. Devíamos criar um vory boom temporário como esse, e isso é apenas adicioná-lo a esta soma e retornar a ala direita para devolvê-lo ao lugar onde envolvemos a função. E nós podemos outros alguns lá fora. Como você pode ver, é 20 Então ele está funcionando livre mais sete stents seis mais quatro é 20 agora. Tivemos, por exemplo, nove. Então devemos ter 29 anos. E está funcionando bem. Para que possamos conhecer Sentiu Azman e argumentos como queremos. E como eu disse, essas aulas de treinamento. Então vamos lembrar o nosso diz como tudo está funcionando para que tudo esteja errado de cima para baixo. Então nós também precisamos lembrar que as funções nosso início antes de invocar qualquer coisa direita no temporal, sobre capaz e bem, eles não são o frio dentro não será executado até que nós invocamos. Certo. Então começa em algum lugar, ok? E agora estamos criando uma variável que temos um valor de disfunção. Então nós somos como saltar fila, e nós estamos enviando sete seis livres para nove para o objeto, que é chamado de argumentos. E isso é um Bob um objeto, certo? Como este é um objeto, ele pode armazenar valores. E este objeto é parece, é semelhante à área porque ele está armazenando-os em 012 índices livres. Certo. E podemos usar os quatro procurar, por exemplo, adicionar coisas. Então nós estamos usando isso alguns aqui nós estamos atribuindo zero a isso alguns por que nós estamos fazendo isso porque nós não fazê-lo. Como pode ver, sabemos bem o número. Por quê? Porque uma depuração se sabemos um sinal de soma zero é indefinido. Então indefinido mais qualquer número não é apenas um número. É por isso que vemos algo como um n que envia para saber o número. Então, é muito importante atribuir aqui zero. E agora nós estamos apenas adicionando cada um fora o valor dessas propriedades argumentos. E então estamos devolvendo esse valor aqui e vamos alertá-lo. Podemos fazer de forma diferente. Caminho certo. Podemos usar a barra baixa y no outro, por exemplo, para nós podemos criar em parte de um rebelde como esse se argumentos que o comprimento eu mais explosão e nós podemos apenas em dese muito gostei, hum, hum, fora do curso. Agora temos um bom índice diferente, como ele admite 20 agora, então tudo está funcionando bem. Isso é apenas uma boa lição. Muito obrigado. 30. DOM: Olá Hoje vamos falar sobre Dome, que envia para modelo de objeto de documento, e é realmente tópico muito importante. Vamos nos concentrar no modelo. O que isso significa? Modelo é uma fórmula para criar algo e eles criaram um modelo fora do documento do documento HTML que é universal para todos os navegadores. Quem é o dia? Bem, as pessoas que criaram uma especificação para as pessoas que estão criando navegadores. Certo e bem, não precisamos nos importar. Quem são eles exatamente? Só precisamos saber que temos o método universal para recuperar, mudar, excluir coisas do nosso site. E esta coisa é realmente poderosa. Vamos a este site. Como você pode ver, nós temos aqui separados na cesta quando nós clicamos sobre ele como você pode ver, nós vimos um curso de vôo para esta cesta e nós vimos instantaneamente. Ele dinâmico Kelly, certo. Não podemos adicionar outro cara e podemos vê-lo aqui e podemos remover e depois remover a bomba. Essa coisa é realmente poderosa e nos dá algo como, você sabe, nos permite mudar as coisas em nossos sites dinamicamente e por causa disso. Bem, você sabe, nós não precisamos mostrar tudo para nossos usos no início do quando eles visitam nosso site. Você sabe, seria estúpido ter uma cesta aqui no início porque, bem, bem, ninguém usou cesta que ele tinha, certo? Então isso é estúpido para tê-lo, então aqui está apenas tomando este lugar antes não estão se concentrando em outras coisas em seu site. Eles deveriam. Eles devem se concentrar em outras coisas que eles não adicionar nada ao cesto ainda certo. E você sabe quando eles adicionam algo, o cara no seu site instantaneamente sabe que ele adicionou algo e ele sabe onde está aquela cesta. Então é poderoso onde eu acho que podemos usar. E você estava nessa lição que não falamos de ação. Você sabe, quando você chuta algo em alguma coisa, isso é igual e nós falamos sobre o Evens mais tarde. Mas a coisa vai falar é como você sabe como verificar onde estão as coisas em nosso site, como recuperá-las. E essa coisa será usada nas próximas lições, por exemplo, em lição uniforme. Então, são coberturas muito importantes de foco nessa pessoa porque é muito, muito importante. Portanto, existem muitas propriedades. O mais importante que eu acho que está aqui. E alguns métodos que vão falar sobre eu acho que você deve baixar algo com este crânio. Objeto Documento. Inspetor, Quando você baixou, você pode ir para a seção do desenvolvedor e abri-lo. E isso vai hábitos, você sabe, passando por este modelo de objeto de documento. E também me fará te ensinar como funciona. Então, a primeira coisa que você deve saber sobre o modelo de objeto de documento que tudo no modelo de objeto de documento é chamado e nota. Certo, isso não é uma doença. Não, isto é uma nota. Isto é Não, isto é Não, isto é não. Você sabia que tudo dentro é chamado de uma nota que temos também algo vai discutir elementos. Elementos são só conversa. Então html cabeceira fez se Dave o dia nossas conversas elementos certos eo cara pode usar. Portanto, há também muitas outras coisas. Como, por exemplo, tentou. O que é uma criança? Você sabe, uma criança é algo que é apenas uma hierarquia inferior, uma hierarquia prata. E assim, por exemplo, chapéu é uma criança fora html. Este é um filho do corpo quando vamos para o corpo e vamos para a morte, por exemplo, este Steve. Abrimos outro site que abriu este. Diabo, opere para baixo , Inspetor , como você pode ver, quando vamos aqui estão na lista ordenada e então temos aqui nosso item de liberação e todo esse item de lista é a criança desligada em ordem? Este sob o contrato é um filho do corpo, e o corpo é um pai de outro. Esta é outra. Este é um pai fora deste site de locação. E este, este, este não há, não há não há, não há, então é muito fácil de entender. Você também tem algo bom. Tem irmãos. Este item da lista é um irmão fora deste item da lista. Este item é um irmão fora desta nota de texto, ok? E bem, são as palavras mais importantes que você deve entender em um modelo de objeto de documento. Então, como você pode ver, é uma fórmula que é assim que foi criada. E agora você pode acessar propriedades dentro dele. E este inspetor de objetos de documento é realmente útil porque quando você vai aqui, por exemplo, e você escolhe estes Manu e você vai para o objeto JavaScript. Você tem todas as propriedades que você pode acessar. Está bem? E essas propriedades também podem ser métodos. Por exemplo, aquele que você já conhece. Como você pode ver, temos aqui, por exemplo Obter elementos pelo nome da conversa. Certo? Então nós usamos este quando você vai para o documento. Como você pode ver, usamos objeto de documento já. Você vai notar que nós temos aqui. Ah, função que o crânio vai ganhar um limão por ele, certo? Nós usamos isso. Nós o usamos para obter um limão do documento e, em seguida, alterar o HTML interno. Então, quando obtemos, por exemplo , outro contrato e então vamos para o item da lista, poderíamos mudar usando o HD interno de uma milha. Como você pode ver, algo com o ônibus CPAs crânio. Há muitas, muitas, muito mais propriedades, mas a mais importante, eu acho que pelo menos, são estas uma dessas. Está bem. E, bem, vamos treinar. Isso é vamos ver como ele funciona para que possamos usar o documento e agora podemos acessar nós usando esses métodos muitas coisas. Por exemplo, podemos actus elementos pelo nome pelo nome do alvo por Klasnic. Mas vamos usar, por exemplo, o I D. E nós vamos obter o que um curso de programação e vamos dizer, salvá-lo das variáveis de exemplo como esse. E é muito importante proteger coisas como essa em uma variável. Por quê? Porque você sabe o tempo todo quando você faz algo assim, seu computador tem que funcionar direito, e isso leva tempo. Então, se você salvar estes aqui, você não terá que fazê-lo novamente. É que em nosso mais do que você não terá que fazer isso de novo. Então é muito, muito importante fazer algo assim. Foi preciso criar um temporário de um Rabel porque se você tivesse que repetir essas coisas novamente, você só vai fazer o seu computador para fazer a mesma coisa novamente. O que não faz sentido, certo? É boa ideia ter uma variável temporária como essa. Então, como você pode ver, temos obtido html objeto em ordem. Então, temos isto. Acho que você e isso significa que podemos acessar, por exemplo, o eu não fiz difícil ou aqui s O i d. E quando vamos para atributos, vamos encontrar seus tributos. Oh, como você pode ver aqui é uma propriedade atributos. E dentro desses atributos você tem que não é um direito e você pode acessar zero direito. Você pode acessar o primeiro objeto e dentro deste objeto quando vamos para o não, o valor Como você pode ver, podemos acessar cursos de programação, cursos . Então é o valor desse atributo. Então vamos fazer isso. Por que nenhum x que atribui o primeiro elemento fora destes fora que o valor nota e bomba. Nós temos bons cursos de programação, mas você sabe, esta não é a melhor maneira de fazer este endereço porque nós temos nesta situação uma função que acabamos de chamar get attributes. Quando usamos a função assim, podemos dizer que quero um atributo. Chamamos Idee, e quero ver qual é o valor disso. Oh, é cursos de programação. Muito legal. E podemos usá-lo mais tarde para alguma coisa, certo? Podemos, por exemplo, acessar cada possível um eu amo Mendel agora site com trez ir a classe como e eu quero que você saiba depois, por exemplo, usando o mouse sobre este lugar, Eu quero ver uma coisa, garotas escrevem algo que você pode fazer o que quiser com essa informação. Então, é muito útil. Você também pode definir algo para que você possa fazer X, esse conjunto, atributo e você está apenas digitando. Em seguida, o nome de um tributo aos chefes de, por exemplo, nome da classe e, em seguida, você adiciona o nome deles fora da classe. Então, por exemplo, teste e você notará isso agora. Bem, quase nada mudou. Mas eu tenho aqui um fogo de volta que é, você sabe, observar tudo em seu site. Você pode baixá-lo em. Você sabe, o plugue é para o Firefox e ele vai mansidão e nós vamos aqui. Como você pode ver, nós adicionamos a classe que é chamado de teste, e isso é ainda mais poderoso porque depois de adicionar uma dinâmica e assim e se tivéssemos, por exemplo, algo em nossa estação. Então vamos mudar a cor do dedo do pé, por exemplo, vermelho. Como você pode ver, é vermelho instantaneamente, então você pode agora é depois, Por exemplo, alguém riacho garrafa, você quer mudar a cor e você pode fazê-lo dinamicamente. Depois de você alguém riacho Aqui você quer aparecer. Você quer mudar a exibição dessa coisa de não para Ah, faça o absoluto e ele aparecerá instantaneamente. Isso é simplesmente ótimo. Quão poderoso é? Ah, você vê isso? Você só precisa adicionar um atributo e tudo vai mudar em um site sobre a vida. Então isso é para definir atributos. Você pode, é claro, remover atributos. Poderíamos adicionar um atributo e como você sabe que eu não quero mais. Eu quero remover esse atributo, que é chamado de classe e, você sabe, por causa da remoção da classe agora, nós não vemos mais o direito. Então nós poderíamos ter, hum, como aqui quando em algo para a cesta e quando alguém riacho removido então se foi última tentativa e apenas exibi-lo disse que a exibição desta caixa não simplesmente desaparece. Bastante incrível, certo? Mas não sabemos, não sabemos agora. Como o dedo do pé pode ver se alguém clica em alguma coisa. Falaremos sobre isso mais tarde quando falarmos de uniformes, então vá à frente das próximas lições porque, bem, elas permitirão que você faça coisas poderosas. Ok, então isso é o que é uma das coisas mais importantes. Mas você também sabe como mudar as coisas por dentro. Então nós já usamos, por exemplo, no HTML direito quando você começa os cursos de programação. Então usamos cursos de programação. Estamos dentro deles em ordem. Grécia, por exemplo. Queremos acesso ao dedo do pé. O menos item aqui. Uh, como faríamos isso? Nós apenas digitamos isso e nós poderíamos acessá-lo usando, por exemplo, Ah, notas de criança diagnósticos em seu anel fora. Saiba que no nível abaixo em alta racks. Certo, significa que temos todos os itens alugados, mas também temos esses textos. Que texto é esse? Porque, Bem, este não é o sippers mais c afiado porque C mais e C afiado está dentro deste item. Este texto é apenas todos os espaços em branco aqui. Então removemos todos os espaços em branco. Não veríamos ataques como esse. Certo, por ter notas de criança fora do zero, não estamos. É quando o atualizamos? , Onda, somos algo assim. Percebemos se você tem bons textos de objeto, que é apenas um bom espaço? Podemos acessar esses nomes, mas não podemos fazer nenhuma desvalorização e vamos obter um valor de que é considerado aqui são todos como você pode ver. Por que espaços? Mas queremos o segundo elemento. Então, queremos fazer algo assim. Como você pode ver, isso não é agora, porque dentro menos elemento iss um ataque elemento. E há agora em um elemento interno. Seria pilhas. E o valor do nó é agora. - Nada. O valor do nó é apenas para texto. Ok, se você quiser chegar ao texto agora, você deve digitar algo como eu quero receber agora. O, por exemplo, primeiro filho. Então a primeira maré do elemento Lee Silom é este imposto e isso você pode ver. Podemos ver agora uma mensagem, certo? E o quê? Podemos ver um texto porque também acessamos usando o nó Valium, fizemos algo assim vai notar que ele teria texto objeto. E se você quiser acessá-lo seu valor, temos que digitar o valor do nó. Ok, então o valor fora do texto está dentro de nenhum valor. E esta é uma versão direta do seu acesso e algo assim, e está levando algum tempo, mas às vezes você terá que fazê-lo dessa maneira. Mas você pode fazer isso um pouco mais fácil. Por exemplo, usando mundo obter um Lammens pelo nome técnico e nós temos bons agora todos os itens alugados, certo? E porque temos todos esses itens, agora podemos acessar dentro de menos itens de trabalho. Hum, maneira que temos todos esses itens para que possamos acessar, por exemplo, o primeiro elemento. Então seria apenas menos elemento e então nós podemos agir dentro dele. O primeiro filho que é o que é um imposto e, em seguida, podemos acessar por exemplo valor nó . Mas você pode usar, por exemplo, seria também HTML interno. Como você pode ver, temos agora aqui c plus. Mas há uma diferença antes entre e-mails de interesse e textos contrariados Quando você faz algo assim, o HTML interno mostramos algo assim, mas o conteúdo de texto vamos mostrar-lhe exatamente apenas o conteúdo de texto. O problema é que ele só é suportado pelo Internet Explorer nove mais. Então, se você quiser apoiar esses sites, Rose é improvável. Você tem reboque usar o que você que teria que ir para o primeiro tentou no valor do nó. O problema é que não agora é não porque o primeiro filho mudou. Temos agora o filho deste item. O primeiro golpe é ousado, e então a primeira visão de negrito é supor mais, Então vamos precisar fazer o primeiro filho novamente. Primeiro filho, primeira tribo. E como podem ver, temos sido um passado nazista. Mas por isso está ficando um pouco difícil. Às vezes você quer atuar como algo, certo? Mas se você entender o que esta parte e o que esta criança, o que é conhecido, não seria difícil para você porque você pode. Então até, você sabe, verifique aqui quando você vai ao menos item e então você vai, por exemplo, rápido, certo? Como você pode ver o primeiro tiro deste elemento mínimo , são ataques. Então você pode ir para aqui, e você pode ver, por exemplo, que o valor da nota é C ++, então é bastante poderoso. O nome do nó é o nome fora do nó. Na maioria das vezes é o nome da conversa. Você também pode usar o fato de que nenhum tipo livre também é sempre para o ataque de um limão para que você possa verificar se o ataque é realmente ataque porque, você sabe, às vezes, uma nota pode ser atacada. Às vezes pode ser no elemento yuk injusto. Verifica isso. Nenhum tipo. Então é de graça. Certo, é um elemento. É um ataque. É um elemento. Você pode usá-lo para algo útil. Certo? Vamos ver como é que o próximo irmão está a funcionar. Então, se eu estiver em nossas pistas notadas assim e então nós obtemos, por exemplo, as notas da criança. Então, a área fora de todos esses itens e nós temos, por exemplo, a primeira pessoa que temos o texto, certo? Mas se fizermos uma bomba, eu quero o próximo irmão você verá que temos objetos pelo menos elementos, então é quase como se tivéssemos feito algo assim. Então, na noite seguinte, sono anterior fácil era para acessar as próximas coisas dentro e dentro e não, logo a seguir sabe que dentro do norte, a nota dos pais iria disparar no bilhete que nos levaria para trás. Então, se estamos no menos item agora, vamos voltar para o assistente. Então seria quase o mesmo assim e você poderia ser como, mas por que eu precisaria de algo? Porque às vezes você tem como primeiro elemento em sua função enviado de algum lugar um argumento, certo? Você tem um argumento, e ele foi enviado para sua função. E você tem e note que estes, por exemplo, aqui e você quer saber de alguma forma como é o casaco pai também está dentro de um artigo em ordem este. Oh, e isso vai adicionar a identificação na identificação como essa. Oh, então eu posso fazer isso e depois e aquilo. Ok, então é assim que funciona. Você deve saber, tentando um pouco, você sabe, jogar metade planta. Brincamos com todas essas coisas aqui para ver como, como estão funcionando. Isso é de fato, Versant. Muito obrigado. 31. QuerySelector: Olá hoje você mostrar-lhe dois metais muito úteis que são chamados seletor de consulta, seletor de consulta todos. E como o nome sugere neste quadrado situação, isso significa solicitar algo do nosso documento digitando um seletor, um seletor que se parece com o mesmo. Como nós criamos coisas em s da CIA Quando você quer pedir todos os elementos possíveis cozinheiros que tem classe teste seu apenas digitando esse teste e você começa todos os elementos e você pode duvidar seguida, fazer algo com eles, como editar este tipo em HD. Em javascript, você pode fazer ainda mais, certo. Você pode adicionar algum evento sobre o qual falaremos mais tarde. Você pode, você sabe, mudar a posição do objeto. Você pode mudar o texto dentro de outras coisas assim, certo? E o seletor quadrado permite que você use seletores que você conhece, e isso é realmente poderoso. Ele permite que você faça as coisas muito rápido e fácil de entender. Então você não precisa, certo? Tanto tempo chamado Como aqui você apenas digitar algo como em vez de que o seletor de consulta tudo e, em seguida, você digita. Eu quero todos os cursos de programação e eu quero todos esses itens e então nós apenas refrescante para ter tido o mesmo resultado. Então é poderoso, certo? Mas há um problema. Não é suportado no Internet Explorer seis e sete totalmente. Então, se você quiser suportar este web browsers improvável, você não pode usá-lo. Mas tenho uma boa informação para você. Há algo muito semelhante estrutura aquário lesão e, em seguida, você pode usá-lo em ah, em Java Internet Explorer seis e sete. Então, se você quiser, você usá-lo se você gosta dele e você quer apoiar estes foram irmão, que são todos do que a maioria eu não sou. Já não há muita gente a usar. Então improvável. Você tem que Ah, parar de usá-lo ou apenas mudou para o coro dia e é metade suportado no Internet Explorer e especialista em Internet oito. Eu faria, quero dizer por meio apoio. Bem, você tem bons seletores que nosso avanço e não avanço Eles não são avançados. Como escolher um limões pela classe Nome O R pela identificação dela e avançar um onde você quer escolher que chides a sete criança fora do off. Você sabe que essas exibições, por exemplo, eu quero escolher o último filho. Oh, eu quero escolher o primeiro começo instantaneamente. Você pode fazer coisas assim no avanço CSS com os seletores avançados. Então, por exemplo, eu quero escolher exatamente aquele em, por exemplo, e tentei. E eu não vou. Terceiro cara na frente do Ted. Então isso significa que vamos ver aqui Java 12 livre. É Java. Mas também significa que bem, aqui temos uma matriz de um limão. Esta não é uma boa idéia, porque se você sabe exatamente quer escolher Onley um Pense do seu site. Você não deve criar outro porque você está tomando um tempero. A segunda coisa é que você tem que pensar na hora certa esse cretino vai procurar por mais coisas assim. Portanto, é uma boa ideia usar a consulta selecionada em alguns trimestres. Seletor está selecionando a primeira ocorrência fora da consulta e retornando-o como uma única variável . Ok, então isso significa que não temos aqui agora e um direito nós apenas usamos algo assim e nós temos bom Java. Mas estamos tratando apenas um e limão. Então, se você fizer algo assim, você terá agora a primeira cura. E assim são as partes excedentes, certo? A primeira ocorrência fora do item de locação dentro dos cursos de programação. O primeiro eso se você quiser mais, você tem que mudar tudo e o que eu quero. Por exemplo, escolher todos os itens possibilidades e eu teria que eu faria algo assim E então eu posso acessar se nós temos os índices na matriz para que eu pudesse ir ver mais explosão. Quero chegar a este. Então 12012 é livre para 56 Então eu vou apenas digitar seis aqui e eu tenho ido Js muito impressionante, certo? Você pode escolher aqui o que quiser com seletores muito avançados e até mesmo. Então você tem a maneira poderosa de selecionar as coisas e então fazer algo comigo algo com elas. Então sabemos que temos aqui Métodos como Gettleman por I d obter elementos por nome técnico que são suportados em todos os navegadores da Web. Mas há também para obter mais elementos por nome de classe que apenas escolher por nome de classe. Mas eles não são suportados em seis e sete e oito Internet Explorer na versão como essa. Portanto, não é boa idéia para você usar algo assim, porque mesmo um seletor bastante é suportado no seis e sete direita Get elementos por não mas pelo nome nem sequer é suportado em 67 e 99. Então, se você quiser escolher por atributo, é melhor usar seletor de consulta também porque bem, você pode fazer algumas coisas como que Você acha que vê os seletores Estes não causam sobre o seletor C s. Então eu não vou passar por todas as coisas possíveis aqui. Existem muitas informações na Internet sobre isso. Ou talvez eu criaria algo, claro, sobre CSS. Ah, mas você sabe, você pode simplesmente usar os seletores que quiser, a fim de escolher as coisas do seu site. E o mais legal é que agora você não pode mudar não nesta gravata, mas você pode fazer o que quiser com ela, certo? Você pode alterar a posição desta prova. Você pode redimensioná-lo. Você pode mudar o deslocado com o estilo. Você pode adicionar algum evento ou algumas outras coisas assim. Certo, isso só fez lição. Muito obrigado. 32. Como alterar estilos dinâmicos usando js: Olá Hoje vou mostrar-lhe como alterar Dynamic Hellis STAIs usando modelo de objeto de documento em javascript. Primeiro, você precisa solicitar que você consulte algo do seu site, a fim de alterá-lo direito, você precisa obter esses elementos Então, por exemplo, usando o seletor de coro todos usando o mínimo item talk aqui. Acabamos de selecionar todos os itens de possibilidades em nosso site. Então nós os temos agora e queremos editá-los. Significa que queremos mudar o lado, por exemplo, a cor como fazê-lo. A fim de fazê-lo, agora você pode acessá-los para essas variáveis e bem, este é um estreito. Então você pode acessar, por exemplo, o primeiro elemento usando seu zero e agora esse estilo. E então você pode acessar o estilo que deseja mudar e bem como é chamado. Você pode ir para, por exemplo, re Ference criado pela Mozilla Developer Network. Mas realmente não importa porque quase todas as propriedades são nomeadas da mesma forma em javascript e apreende. A única diferença é que eles estão usando aqui você vê o traço e aqui eles estão usando a maiúscula direita mais tempo e É apenas uma única palavra, como você pode ver é apenas a mesma maioria do tempo. Então você não precisa se preocupar com, você sabe, lembrar de tudo. Então, se você quiser mudar a cor com apenas digite a cor que a cor é igual E agora, por exemplo, vermelho E como você pode ver, o primeiro cara está pronto até mesmo quer mudar a cor fora do cara sete, como você pode ver áreas terrestres Agora está certo, certo? Por que o sete? Lembre-se que não podemos do zero. Está bem. Então agora você pode mudar o que quiser. Você pode, por exemplo, disse que a exibição para não direita. Você pode esconder limões assim. E agora estamos digitando tudo aqui. Queremos executar alguma coisa. Como por exemplo, por exemplo, descoberto depois de clicar em algo. E essa coisa se chama Evens e falaremos sobre todas essas coisas mais tarde. Mas você sabe que tem dificuldade em notar. Bem, eu tenho que mudar dessa forma? Fora do curso. Nota. Você pode usar o que você pode usar quando algo é repetido muitas vezes algo que a deusa chamou um caroço. Então, por exemplo, para o índice variável dentro dos cursos, Eu quero mudar para cada um fora deles certo? Mostrar nove e tudo desapareceu. Bem, vamos mudar para, por exemplo, uma cor. Como você pode ver agora tudo está pronto. Só quero o dedo do pé. Escolha, por exemplo, cursos de programação. Ok, vamos fazer isso bem rápido. Ah, eu tenho o Good agora programando cursos, certo? Isso é apenas assim, a fim de acessar um estilo, você apenas digitar que Styx no elemento e, em seguida, o nome fora do site que queremos mudar. Mas é a melhor coisa a fazer para mudar coisas como sites do casaco JavaScript? Nem sempre. Você deve mais tempo em uma aula, ok? Como eu e eu mostrei a vocês na primeira lição Lexus sobre o modelo de objeto de documento que você pode adicionar um atributo, por exemplo, uma classe, por exemplo. Por exemplo, você pode chamá-lo de laços são outra coisa. E você pode adicionar STAIs nesta maré que CSS adicionando atributos. Tudo bem, por quê? Uma solução como essa seria melhor. Porque você tem, em seguida, começa apenas em 115 Você não precisa lembrar que algo é alterado dentro do código JavaScript ideal. Ok, então é melhor mudar de lado adicionando um tributo ao invés de ficar morto? Ok, você pode fazer isso, mas você deve evitar. É melhor adicionar atributos porque será mais fácil para manutenção futura fora do seu casaco. Muito obrigado. 33. adicionar ou remover elementos: Olá Hoje vou dizer-lhe como adicionar e remover elementos em seu site. A fim de fazê-lo, você tem que usar criar método elemento e, em seguida, John Stipe nome fora do ataque. Então vamos fazer isso. Documento que cria elemento. E, por exemplo, criaríamos o Elemento P, que significa parque. Vamos salvá-lo. Então, por exemplo, isso salvou aqui e agora podemos acessá-lo e podemos fazer o que quisermos com ele. Mas você deve se lembrar quando você cria um limão , não está em seu corpo. Três instantaneamente você tem reboque adicionado. Então, quando você atualizá-lo e você usar o fogo Bach e você vai aqui, você pode baixar a casca da bola de fogo. Seria na bomba bônus da seção do Claro, você pode ir para o re aqui e como você pode ver, não é humano ainda, certo? Você acabou de criá-lo. Agora você pode fazer alguma noite ser Stichel ou vermelho. Você pode fazer P e união de nomes de classe. Você pode criar o custo de teste. Você pode fazer p. HTML interno vai ser, por exemplo, alguns pensam que você pode e como você pode ver, ainda não está aqui, certo? Nada aqui. Nada aqui Você adicionou reboque. Você tem que rebocar uma reprimida esta criança porque é uma criança que você pode anexar e anotar. Então você pode, por exemplo, ficar mais ousado para que possamos fazer o seletor de consulta de documentos e podemos acessar o corpo E agora podemos salvá-lo para a variável temporária e podemos adicionar ao corpo para o final da pasta Um filho e podemos apenas morrer pp. E, como você pode ver agora está aqui. Quando nós vamos aqui, como você pode ver, nós podemos vê-lo. O estilo de teste de classe colorizou algo que você então tudo o que descrevemos aqui está agora aqui dentro. Então é bonito Elson, certo? Acabamos de adicionar algo novo do nosso documento que não estava em nossas estrelas, Scott, como você pode ver agora em nossa fonte. Mas não é visível. Só é visível com o fogo de volta porque o fogo de volta é apenas, você sabe, constantemente refrescando este lugar algum É muito bom d dedo do pé, mas você pode estar pensando agora. Ei, eu te disse que nosso HTML interno pode ser usado para adicionar e falar HTML. Sim, pode ser usado. Então, por que Boulder está usando algo assim? Porque quando usar um HTML interno, tudo será redefinido dentro do HTM interno. Mel, isso significa que vai ser muito passado. Ok, o que isso significa? Porque, você sabe, fazer como um Mas o que isso significa? O que isso significa? Isso vai ser re bolsa? Vamos fazer algum exercício. Vamos criar aqui outro parágrafo. E com a identificação, ela, por exemplo. Ah, teste. Fazer. Tudo bem. E agora vamos buscá-lo. Então documento Obter o limão por eu d, por exemplo, porque eu não sei fazer para você, Squire Selector agora e eu vou ser testado. Eu salvaria. E agora podemos fazer algo com ele. Como se pudéssemos mudar a cor para o estilo, tamanho do nosso telefone. Então mudamos o tamanho do telefone. Você pode ver que está funcionando, e está tudo bem. Nós editamos aqui quando você verificar o fogo. Bach. Como pode ver, , temos aqui agora. Telefone tamanho 14. 14 nos escolhe. Nós adicionámo-lo. Tudo está funcionando. - Tudo bem. Mas há um problema. Se eu tivesse algo novo usando qualquer e insistiu nele e esta é a coisa mais importante. Quando eu faço algo assim, eu tinha algo que você sabe. Isso é o suficiente. O trabalho dele está funcionando. Ainda assim, o problema acontece se você quiser mudar algo depois. Então, se eu quisesse mudar aqui o tamanho do formulário como você pode ver o tamanho aumentado, eu saberia, mudando o dedo oito correções. Como você pode ver , não está funcionando. Por quê? Porque eu te disse que tudo é reparos, relatórios cada vez que você adicionar algo para o HTML interno assim, que significa que se você aderir para encontrar esta coisa é removido. Ele diz que eu criei novamente e porque tudo é que você corre de cima para baixo quando você está em 9 25 nós estamos acessando esse parágrafo com eu detesta também. E quando aderimos um número quatro dedo do pé o html interior direito então esta coisa é destruída e nós não temos atores para comer animal, a fim de acessar. Vai ter que fazer contra algo assim. E então, sim, está funcionando muito bem, certo? Mas não é como devemos pensar às vezes, quando você quer ter acesso a algo em todo o mundo todo o documento e realmente vai acontecer muitas vezes. Então você precisa criar elemento manualmente. OK, mas caso contrário, é uma boa idéia usar em seu HTML porque é mais rápido e é mais fácil de usar direito. Mais tarde você criará algo digno, esculpir uniformes também e eles também são destruídos. Qualquer coisa é destruída quando você está adicionando coisas assim, ok? E é mais lento quando se faz assim. Mas você sabe, se você pode fazer algo em, você sabe, uma função e você não precisa acessá-la mais tarde, então é boa idéia usar HTML interno. Você pode até mesmo falar, criando , uma string temporária e atribuindo a string grande ao HTML interno no final. Faremos algo assim na próxima lição quando treinarmos algo que é assim que funciona. OK, você está usando em nosso HTML quando você quer apenas fazer alguns simples uma ação simples que você não quer dedo do pé referir-se ao A limão um limão mais tarde. Certo, porque pode nos trazer alguns problemas. Seria difícil detectar o direito de descascar algo assim o que aconteceu. Mas eu tenho atores aqui, mas, oh, como? Como? Como? Como? Não é como se faz que depois desta linha, não posso mudá-la, certo? Ele é como, Whoa, realmente, você tem. Você tem que saber como o HD Molly's estava funcionando. Ok, então agora como remover um limão? Isso é e é muito estranho porque se você quisesse, por exemplo, remover os cursos de programação ou cursos de desenvolvimento Web, vamos tentar estes. Precisamos primeiro pegá-lo. Então coro um seletor, por exemplo, e depois programando cursos. Você precisa guardá-lo em algum lugar. Então, quem fez algo assim? E como você pode ver, sua função para remover é chamada de remover gráfico. Está removendo a criança. Então agora estamos na principal coisa que queremos remover. Então precisamos subir usando a nota pai para o poder e e do pai. Podemos remover a criança, que está programando cursos. E então, sim, você acabou de remover todas as coisas dos cursos de programação logo quando você vai aqui, como você pode ver, nós não temos mais cursos de programação, o é expandido. Você pode estar se perguntando por que não há uma função dessas. Sim, há uma função como essa, mas é bem nova, e não vai funcionar. A maioria dos irmãos Web não o usam. Nem se preocupe em usá-lo porque na maioria das vezes você não vai trabalhar. Mas lembre-se também que na maioria das vezes você não deseja remover nada do seu código HTML. Na maioria das vezes você quer apenas esconder algo, e para se esconder, é melhor usar naves estelares. Você quer apenas mudar a exibição de absolutamente nenhum non on ou de non-toe. Absolutamente em algo assim, certo? Você pode mudar a opacidade. O que você mais tempo. Não deseja remover algo porque estamos removendo e adicionando isso leva tempo, certo. É melhor apenas alterar a alteração da exibição por, por exemplo, exemplo, alterar a classe de atributo. Ah, em removê-lo mais tarde, certo? Ou apenas mudando o estilo que este jogo de nenhum muito absoluto no caminho que você vai. Provavelmente depois que esses carros também querem aprender alguma coisa. O que se chama Jake usar com Jake usar coisas assim é muito mais fácil. Então, logo após esses carros, vá em frente e aprenda algo com essa consulta de país. Porque ele vai ter você ainda mais. Haverá apenas muitas funções úteis que serão mais fáceis de usar. E eles serão. Você sabe, você pode usá-los nos navegadores que trouxeram. Ele não vai porque Jake usar um suporta todos os navegadores. Certo, isso é tudo nessa lição. Muito obrigado. 34. Loção em outro loop: Olá hoje com um trem um pouco, criamos uma tabela de multiplicação que será dinâmico, Kelly adicionado em seu site, e vamos treinar algo. O que se chama “loop”. Nós criaríamos um loop dentro de outro loop e eu mostrarei como funciona. Então vamos começar pela comparação com o resultado I D. , porque precisamos de um dedo em algum lugar é a tabela de multiplicação. Ok, vamos salvá-lo e queremos adicionar agora um pouco de conteúdo mais tarde. E precisamos pensar se você quiser usar o metal filho aconteceu ou se queremos usar o HTML interno, qual é a vantagem de usar e tentar aqui? Se você usar para cima e para cima e filho, podemos então criar todos os elementos. Mas bem, criar elementos é bastante lento para JavaScript quando você tem que criar uma tabela de tabela, girar automação, levar cerca de dimensão para D t. D. Há muitos deles, e ele também não será revestimento claro. Então também não precisamos dos rabos que se referem ao aerador da Zvereva. Só queremos atribuir isso de uma vez. Tudo bem, então isso é uma má idéia usar e tentar melhor idéia usar HTML interno, mas nós não devemos aderir. Você tem algo como fazer algo como aquela mesa e então nós não deveríamos fazer algo assim e então apenas, você sabe, você sabe, repetir uma mesa de buffet ou talvez uma dimensão de mesa. Por quê? Porque, como eu disse na última lição, quando você faz isso dessa forma, tudo é re partes recriado novamente, certo? Significa que leva muito tempo. É por isso que devemos criar um temporário. Somos capazes de armazenar a tabela de multiplicação . Ok, foi guardá-lo e nós temos o estábulo aqui, certo? E no final, no final, somos apenas atribuídos ao HTML interno O resultado. Certo, e isso será o suficiente para nós. Então, queremos criar algo que nos pareça com este direito, uma tabela de multiplicação. Vamos refrescá-lo porque eles não têm nada agora e vamos fazê-lo. Então eu acho que devemos usar o loop porque queremos multiplicar um por dois por três por cinco. E isso é etcetera, certo? Então, para longe são capazes eu é igual a zero. Se eu for menor que 10 e eu mais, o que significa que queremos agora repetir isso. Pense 10 vezes de 0 a 9. Por quê? Porque aquele leste inferior a 10 nota, o que significa que 10 não será exibido em tudo. Fazemos algo, por exemplo, como aquela tabela de multiplicação chama de plástico I e veremos o resultado de números de zero para agora, certo? E é muito fácil de entender, certo, porque somos o que estamos criando um temporário de um rebelde. Estamos atribuindo o dedo I zero. E se eu for menor que 10, então nós só queremos repetir todas essas instruções até que eu seja apenas maior que 10. Certo? R é igual. Então nós devemos mudar é certo, porque nós não queremos de um não queremos ouvir algo como zero quer dedos livres, mas não vai querer Livre para 2 10 é as tabelas de multiplicação básica Então nós devemos mudá-lo para algo assim E agora funciona muito bem Vamos adicionar um espaço para que fique melhor. E agora queremos que segunda linha? 1/3 linha como criar linhas seguintes. Bem, a fim de criar a segunda linha gostaria de multiplicar essas linhas por dois. Certo? Nós gostamos de multiplicar um por dedo para comprar dois grátis por 4 para 5 para seis por dois. Obama, certo? Você quer criar terceira linha gostaria de multiplicar a primeira linha por livre por quatro por e minha mãe Então, como fazê-lo? Mas se fizermos algo assim, aderimos. Como pode ver, temos a segunda linha instantaneamente, certo? Se no seu livre nós temos a linha cansada quatro pensamento linha cinco, quinta linha. Então a verdade é que queremos executar estas instruções, mas queremos mudar aqui Avery Capaz 10 vezes. Então devemos executar f loop dentro de um loop até agora de são capazes e precisamos criar outro foram capazes Agora quando Jay é menor do que 10 j mais e quer multiplicar aqui por J e até mesmo não é que temos agora tabela de multiplicação Mas o que não temos Ah Você conhece o espaço de intervalo Então vamos adicioná-lo. Não devemos adicioná-lo aqui porque quando adicionamos aqui vamos tê-lo depois de cada número Queremos adicioná-lo depois de cada linha, direita, Então, a fim de tê-lo após cada linha. Devíamos adicioná-lo aqui. E como você pode ver, nós temos uma boa tabela de multiplicação agora. Não parece bom, mas funciona muito bem, certo? Nós temos o bem. Agora ele quer sentir por lutadores. 10 246 20, etc. E agora vamos analisar isso. Ir a bela porque como você sabe que você pode ser como Como ele funciona quando o atribuído aqui? Então eu ganhei. Estamos verificando. Se eu for menor ou maior que 10 é menor, o que significa que agora podemos executar todas as instruções dentro do loop. Então nos encontramos na linha nove um loop novamente, que significa que ele tem dedo executar antes de ir para o dedo do pé. Outras instruções como, por exemplo, que um Tudo dentro destes loop tantas vezes quanto as condições o diz. Estamos criando um dia muito capaz e atribuímos um dedo do pé. Se um é menor que 10 como é menor, então 10. Então nós temos aqui agora um multiplicado por um e então porque nós executamos essas instruções, que Waas disse que deveria ser um você sabe, executado. Temos que aumentar o J. Então não é muito. E verificamos de novo. Se dois for menor, o são maiores que 10. Então execute novamente essa coisa. Porque enquanto é assim, não temos ninguém multiplicado por dois. Então, sim, nós temos agora eles ainda aqui. Ok, ótimo. Então temos 456789 livre 10. Certo. Então, se você tem algo assim, nós temos apenas uma linha. Se você fizer algo assim, teremos duas linhas livres, 25 linhas. A coisa legal sobre você sabe, usar loops é que agora podemos mudar o resultado muito rápido. E podemos aumentar nossa tabela de multiplicação apenas em algo dedo do pé, qualquer coisa que quisermos. Ok, então depois de terminar estes quando estes são, você sabe, você sabe, 11 nós vamos executar este ouro. Então nós estamos adicionando a linha de freio e então nós verificamos Bem, nós adicionamos dedo do pé, eu novamente um por causa da implementação aqui. E se dois é menor ou maior que 10 é. E vamos executar de novo estas coisas. Então é assim que funciona. Isso é como Lope é. Trabalhamos dentro de outro olhar. Certo, então vamos mudar para a mesa. Não foi preciso ter uma mesa. Vamos criar um assim. Então, como você pode ver agora, nós vamos criar elementos de dinheiro. E é melhor fazê-lo assim porque, bem, bem, nós vamos apenas designá-los no final aqui, certo? E será muito rápido. Então você tem uma mesa agora? Agora precisamos de uma tabela de dados. E eu acho que os dados da tabela são exatamente onde todos esses números são apresentados. Então devemos na dimensão da mesa aqui, certo? Como isso. E também precisamos de uma fila de mesa. E Pedro é onde os gabaritos. Certo? Então, devemos terminar o papel mesa aqui, Mas nós também social parou um bureau antes de ir para o lope aqui e agora, Como você pode ver, temos dentro de um lope. Então parece melhor agora. Quando mudarmos, tudo ainda ficará bonito. OK, isso é tudo. Lição indiana. Muito obrigado. 35. Noções básicas de eventos: Olá funções que temos criado até agora foram invocadas manualmente, que significa que estávamos apenas digitando o nome fora das funções do que os pais é que poderíamos algo enviar um argumento para disfunção e bem, nós simplesmente executaríamos o código Dentro. Mas nós estamos o tempo todo fazendo isso através deste rastejante Js E você sabe, maioria das vezes nós queremos executar as funções quando algo acontece em seu site, quando não há mesmo quando sequer ocorreu e é quando usamos evens. Ok, então até é apenas algo que acontece em seu site e nós podemos reagir a isso. Por exemplo, podemos dizer o que deve ser executado depois e até mesmo vamos imaginar uma situação quando alguém digitar a senha nos quatro e ele tem que se aposentar ser o jogo para ter certeza de que ambos são os mesmos depois de enviar o telefone, que também é mesmo fora tão espancado. Portanto, podemos verificar com a função se ambas as importações são as mesmas. Assim, os uniformes são apenas ações típicas feitas por usuários fora do seu site que queremos reagir bem, até mesmo estão tornando o seu site dinâmico. Isso é bastante incrível. Então, desde hoje, seu html vai se tornar algo foi chamado de HTML dinâmico Hypertext texto América linguagem. Por dinâmica, queremos dizer que você pode me encontrar Nolly dinamicamente responder toe tudo o que estes seu ar uso fazendo em seu site para como se registrar e até mesmo você pode fazê-lo em linha na luta html . Esta não é a melhor solução. Eu vou te dizer em breve. Por que se preocupar? Vamos começar por isso. Para fazer isso, você digita o nome. Até onde você consegue todos esses nomes? Você pode ir para a referência uniforme, por exemplo, para a rede de desenvolvimento modular. Há apenas tons fora deles. Mas você sabe que a maioria deles você nunca verá em sua jornada de programação. Certo, vamos pousar nessas cicatrizes. mais importante hoje, que eu só mostraria um enorme. Isso é o suficiente. Talvez aprendamos que descartaram todas as ligações daquela lição. Ok, porque, bem, a verdade é que mesmo nós apenas estamos dando o poder para você. Javascript. Então, para criá-lo, basta digitar o nome do evento que deseja registrar e, por exemplo, vamos nos registrar. Clique no clique é apenas algo que vai acontecer quando você clicar nele, certo? Então, desde agora, quando você clica na palestra, Dave no exemplo para algo que está dentro do estoque imposto tão simples, você não vai executar a coisa que está aqui, você pode digitar aqui um código JavaScript que você pode executar, por exemplo, função. Então vamos, por exemplo, por exemplo, dizer que eu quero um teste de alergia no dedo do pé. Ok, então depois de atualizar começa quando nós clicamos nele Como você pode ver, nós podemos ver esta mensagem aqui. Então, depois de clicar, nós não executamos automaticamente quando carregamos nosso site logo após clicar nele. Bom executado bonito Além disso, podemos mudá-lo para, por exemplo, tudo mais mouse sobre. Então isso significa que quando o mouse está sobre, então nós podemos ver esta mensagem. Caso contrário, não está funcionando. Obter o nosso Então, há muitos eventos que acabamos de aprender nas próximas lições hoje. Aprendemos como registrá-los e como lidar com eles. Ok, então agora estamos fazendo isso na fila. Nós podemos. Você não faz isso no JavaScript deste lugar. E isto é melhor. Por que agora imaginar uma situação em que teríamos, por exemplo, mais dias como esse? Ok. E vamos imaginar que você tem bons milhares fora HTM se quer o quê? Talvez 30. Ok. Você sabia? E agora digamos, fez suas bolas ou mesmo você acabou de notar. Sabe, eu não quero mais fazer algo depois de alguém ter mais feito isso se você tivesse adiado de todos os lugares possíveis manualmente. Você imagina isso? Será horrível para você. Ok, então nesta solução solo é ótimo. Mas apenas para os primeiros sites pequenos. Ou, por exemplo, onde você onde é apenas o seu cartão de visita ou algo assim. Ok. Caso contrário, você deve evitar isso. Ok? É melhor apenas fazê-lo. Bem, podemos levá-lo para vir, e assim você pode ver mais tarde como foi feito. É melhor fazer algo assim. Bomba. Sem vadio. E vamos levar esse cara. Então vamos morrer. Documento. Obter um limão por eu resultado, nós vamos salvá-lo na temperatura de um Rabel. E agora podemos usar o ponto digite o nome fora Mesmo que eu queira lidar e então eu posso atribuí-lo bem que queremos fazer. OK, nós temos isso depois deste, hum, design. E há alguns problemas agora, se eu fizer algo assim, você não vai é não é feito quando eu atualizá-lo, são automaticamente receber teste quando eu tenho minha boca sobre estes impostos, não está funcionando. Por quê? Porque você tem que se lembrar disso o tempo todo quando nosso pacote JavaScript vê algo assim com a doença da pobreza, certo? Diz que a função do pai é que significa executado automaticamente agora. E a verdade é que somos a mesma coisa aqui. A coisa que vai ser devolvida do Ártico quando os anúncios nada. Então é por isso que não está funcionando. Então, como executar algo assim? O que? Você pode criar uma função animus que estávamos falando nas lições sobre eles. Certo? A Andi? Agora temos bons animais função Q e dentro dela, podemos executar, por exemplo, disfunção, certo? E agora, quando temos milhas sobre ele, está funcionando bem. A coisa legal sobre esta solução é que acabamos de adicionar todos os quilômetros, até mesmo para este elemento. E agora podemos mudá-lo deste lugar. Não precisamos ir para o HTML cinco. Se tivéssemos, por exemplo, mais elementos tomando aqui. E nós vamos apenas neste próprio mouse sobre, mesmo para cada um dos elementos dentro da área ou algo assim, nós poderíamos mudá-lo instantaneamente em um lugar e nós não precisaremos fazer nada no html cinco. OK, é por isso que esta solução é apenas melhor para um site maior. Ele ainda tem algumas coisas de aposta que podem ser resolvidas usando algo bom é hábil em mesmo ouvinte. Mas vamos falar sobre isso no próximo menos nesta lição, você deve apenas lembrar que mesmo são apenas pensa que acontece em seu site e você pode reagir a ele invocando uma função, por exemplo direita. E você também deve notar aqui que quando você tem aqui próprias milhas acima, nós podemos invocar você tem muitas funções, certo? E esta é a solução para invocar uma função quando você quer enviar um argumento e esta é a única solução segura. Ok, então, mas se você tem uma função que é que não tem argumentos de exemplo funções simples e aqui temos, por exemplo, alerta Oi. Então você pode executar esta função apenas fazendo algo assim sem o parentesco está certo. E agora, como você pode ver, bomba, está funcionando. Certo, mas quando quiser mandar algo para comer assim agora, seria executado automaticamente. E não está mais funcionando. Ok? Há um erro muito comum que as pessoas fazem disso o começo. E a solução para isso é apenas criar uma função enorme que não tem nome. E então você pode executá-lo enviando ouvir um argumento, certo? Algo assim. E podemos usar esse argumento como, por exemplo, dívida. E agora está funcionando. Tudo bem. Ok, isso é apenas uma boa lição. Muito obrigado. 36. Essa palavra, essa palavra-chave: Olá. Na maioria das vezes quando você quer invocar uma facção usando um evento que você quer toe Também propriedades actus fora do elemento que envolveu disfunção. Então você quer verificar? Com isso é um limão e você quer levar Onde está o alarme? E, ah, você quer esconder estes e mudar a cor do tamanho do telefone sentimento deles? Não, não há outras coisas assim. Então, como acessar o 11 que envolveu esta função? Certo. Isto é assim como fazer bem, você pode usar a guerra chave. Acabamos de chamar isso, mas como usá-lo. Bem, vamos criar um rebelde que chamamos de resultado. E vamos tirar do nosso documento por um limão essas identificações ou nós apenas chamamos resultados . Então pegamos este elemento aqui e agora podemos usar o ponto do resultado e podemos agir como um e até mesmo nós não. Certo. Então, por exemplo, vamos assumir quase mesmo e atribuído aqui uma função que tem Toby executar quando estes ainda ocorrem. Então, por exemplo, vamos chamá-lo de mudança de cor, e nós também temos que defini-la agora. Então tomamos declará-lo primeiro, e agora podemos criar o corpo fora desta função. Então, queremos mudar a cor desses alinhamentos. Como fazer isso. Você poderia apenas digitar resultado que o estilo que a cor é igual a vermelho. E vai funcionar. Como pode ver, está funcionando bem. Bem quando temos o mouse sobre ele, ele está funcionando. Mas há um problema. E se eu mudasse esse cara para outra coisa mais tarde, certo? E se eu mudasse esse cara para outra coisa mais tarde, E se eu quiser, por exemplo? Ah, faça alguma coisa. Eu det Ah, Ele seria resultado para escrever o segundo cara. E eu também invocava a mudança de cor. E eu gostaria de, você sabe, ele mudou a cor dos resultados para eu gostaria de mudar a cor de outra coisa , certo? O outro elemento. Nenhum dia. Bem, por causa disso, temos algo com este disco de culto. Quando usarmos isso aqui, vai mudar a cor do estilo de um limão que envolveu esta função. Ok, então nesta situação, é este elemento e também vai funcionar. Mas agora, este é um novo casaco universal. Você não terá problemas quando mudar algo. Seu código Quando você quer adicionar novos elementos e outras coisas que eu fiz. Então é assim que você deve montar seu casaco. Certo, vamos , por exemplo. Agora. Ah, use o mouse para fora. Funciona bem mesmo. E isso é invocar mudança. Funções de cor para fora. Vamos esculpir na mudança de cor. E quero mudá-lo de volta para preto. E como você pode ver agora, quando se move, está mudando a ameaça. Quando você se move para fora, ele está mudando para preto e ver fora do curso que você pode criar usando CSS, e provavelmente é melhor idéia. Mas só estou mostrando a sintaxe. Então isso ocorre quando você só tem sua boca saindo do lugar. Direita em. Ah, essa coisa, pode ser melhorada. Isso chamou a primeira coisa que eu disse que você não deve mudar de tamanho neste lugar, certo? Você deve apenas adicionar uma classe para que você possa definir uma classe de atributo trap. Ou você pode até ir para a aula assim. Vamos chegar a este nome mais igual. E agora, por exemplo, vai usar a partir deste lugar mudar colônia. Mm, custa. Então eu faria algo assim e podemos mudar mais tarde. Esse nome de classe não é nada, certo? Então, por exemplo, algo assim e você não vai é que agora não usaria a fornalha, então para verificar o que acontece. Mas você pode ver quando temos um bom mouse sobre a classe é alterado para mudar de cor. Quando eu sair, não é nada. Então nós explicamos. Também podemos remover a turma ou dizer alguma coisa. Eles definem atributos e eu poderia remover atributo e eu poderia digitar cruz. E essa Cassie está totalmente removida. Mas o problema de remover ou mudar nada é que você poderia ter aulas de Humanae que também poderiam ser importantes. Então mudar para o nome da classe não é boa ideia. Você poderia adicionar ao final algo assim. Mas o problema é que você não deve remover o tributo então totalmente ou mudar para nada. Você deve apenas remover este atributo. Ah, bem, este valor off atributo, mas como fazê-lo Bem, então você deve usar por exemplo sub string do objeto JavaScript. Você pode ler sobre isso. Você pode até treinar agora, mas depois falaremos sobre isso para que você possa como um exercício. Você poderia fazer uma pesquisa sobre este assunto, ok? E faça assim. E pode esperar quando falarmos deles. String, objeto. E você verá que há uma função de subsídio que temos sido uma situação como essa. Ok, então isso é um exercício para você. E eu também gostaria de fazer mais um exercício. Claro, se você tiver algum problema, basta pedir que você crie uma discussão. Vamos Ah, eu gostaria que você criasse duas mortes que representariam Primeiro representaria o sinal de mais um segundo. Você apresentaria a coisa menos? OK, e quando você digita quando você clica no sinal de mais, este imposto não vai mudar a cor, mas vai ficar maior. Ok, quando você criar o sinal de menos, este texto vai ser menor. Lembre-se, se tiver algum problema, é só pedir. Mas isso não é um problema difícil, você sabe, escrever para resolver, então é uma boa idéia. Mesmo que leve 20 minutos para você. É boa ideia tentar bem, fazer você mesmo. Você tem problemas. Apenas pergunte. Isso é segurar a lição. Muito obrigado. 37. addEventListener addEventListener: Olá hoje vai falar sobre no ouvinte evento e sobre o método que é chamado removido . Evento. Ouça, mas antes de falarmos sobre isso, gosto de mostrar o que precisamos disso. A verdade é, que possui três que precisávamos para fazer o nosso casaco e mais fácil de adicionar. Está bem, mas vamos a isso. Não dê um exemplo. Primeiro, quando falamos de eventos, mostrei a versão ao vivo, certo? Poderíamos apenas digitar coisas assim e poderíamos apenas dizer o que queremos envolver quando esses carros mesmo. O problema é que, bem, se fizermos algo como cópias, muitas vezes eles conseguiram HTM se os olhos e querem mudar alguma coisa, isso vai nos dar uma grande dor de cabeça, certo? Temos que fazer muito trabalho. Ao mesmo tempo, temos agora Java gritando do que HTM. Se eu quiser mudar alguma coisa, vai ser horrível. É por isso que temos algo assim. E há uma solução muito boa. Mas há um problema nisso. Vale a pena se agora eu quisesse, por exemplo, invocar outra função. Então eu gosto de fazer algo como algo que e agora eu gosto de não mudar corpos de cor aumentar o tamanho da forma. Então eu gosto de criar a função que vai ser chamado aumento do tamanho do telefone e eu gostaria de aumentar o fundo disse Claro, eu fui implementado mais tarde, mas agora Ei, o que acontece quando ele projetou assim? Esta coisa está apenas substituindo este dedo e a mudança de cor não está funcionando animal. Então nós poderíamos colocar em show em algo como hey, mudar de cor e eu quero aumentar o tamanho do telefone dentro da mudança de cor. Mas é um problema por que mudar de cor está aumentando o tamanho do telefone. Esta função agora não é uma auto-descritiva. Então poderíamos chamá-lo poderia criar uma segunda função que virá inicialização da função e vamos envolver a mudança, cor e aumento do tamanho da fonte dentro. O problema é que a função de inicialização não é tão auto-descritiva também. E o segundo problema é que você deve se lembrar que às vezes você pode querer parar a execução fora alguns até mesmo você quer dizer Ei, eu não quero ver e o on quase sobre afetar agora Ah, no por exemplo, mudando as cores. Você sabe, agora você pode fazer isso, por exemplo, fazendo algo que atribuindo Não, não, não. Certo, então algo como o vazio. Mas o problema é que você pode fazê-lo apenas para esta função para estes um método você pode escolher um fora dos métodos que serão invocados diretamente, mouse sobre. Então é quando você quer usar o at, até mesmo ouvir. Então, como usar? Vamos tirar dias sob a seção de comentários. E para usá-lo, basta digitar os resultados. Então o 100 que você tirou do seu site. Então, por exemplo, tonto frito, e você apenas digita no mesmo ouvinte. E agora você pega o nome do mesmo que você quer lidar? Então você apenas digita o mouse por cima. Você não digitar a própria palavra-chave. Agora não. Está bem. Você não precisa mais dessa palavra. Então milhas mais longo e, em seguida, a função que você deseja invocar. Então, por exemplo, mudou a chamada, e agora podemos fazer o mesmo com eles. Rato para fora sem o braço em uma mudança de cor para fora. Tudo bem. E quando atualizá-lo, ele ainda está funcionando. - Tudo bem. Então, parece um pouco diferente, certo, mas agora temos mais poder. Compre mais energia. Quero dizer, agora podemos fazer algo assim. A maioria, no entanto, eu quero aumentar o tamanho do telefone. Ok, então agora temos duas funções que serão invocadas quando tivermos a maior parte do nosso. Então nós podemos ver algo certo como isso. Ondas você pode ver Sim , estava funcionando. Mudou a chamada para ler e também alertamos isso. E o legal é também que você pode remover o tamanho do telefone aumentado mais tarde. E outra coisa legal é que, como você pode ver, esses nomes são auto-descritivos. Esta coisa está aumentando o lado da frente. Essa coisa está mudando a cor. E a coisa é que isso em deslocado esta coisa está neste lugar você pode qualquer centrista dizer o que está fazendo o que coisas assim realmente vão ter você em grandes projetos em meus pequenos projetos. Off como que seria fornecido o mais tempo suficiente. Certo, brotando projetos maiores. Algo assim é muito importante. Ok, então este é o fim quites. Ouça-a. Ah, vamos implementar o aumento de telefones, então vamos treinar um pouco. Então, como alterar os sites de telefone você poderia digitar estes que é formado tamanho com a maiúscula igual, por exemplo, 18 pixels. E agora vamos ver isso. Sim , mudou o tamanho. Tudo está funcionando bem, mas vamos torná-lo um pouco mais difícil. E se eu quisesse aumentá-la toda vez que eu coloquei meu mouse sobre ele? Então teremos de ter acesso a isto. Mas vamos ou algo assim Alerta e vamos ver o que está dentro, como você pode ver Nada. Por quê? Porque você sabe que Spice pode fazer algo. Se essas coisas como tamanho divertido pode ser uma imagem muito diferente, irmão. Eles podem ser computados e outras coisas como essa um homem apunhala de que você não falaria. E por causa do problema, você tem que obter o tamanho da fonte um pouco diferente. Você deveria fazer dessa maneira. Você deve ir para a janela e atores, eles obter função de estilo computado. E agora digite o nome de um limão. Deseja obter o tipo de computadores de? E então o nome do telefone, o nome da propriedade que você deseja acessar, mas você quer acessar agora é através do get Ah, valor da propriedade. o Obterovalor da propriedade. Isso mesmo. E agora, para obter o valor da propriedade, você não digitará o tamanho do telefone. Mas você vai morrer. Encontrei o tamanho do traço. Ok, então o nome típico. E agora, como você pode ver quando nós superamos isso, nós temos que realmente? O 16 Picos é tão o tamanho verdadeiro, certo então 18 picaretas é porque nós mudá-lo mais tarde. Isso é ótimo. E agora nós podemos, você sabe, obter estes em variáveis, por exemplo, assim e nós podemos usá-lo. Aumente isso. O problema é como aumentar algo que, como 16 picaretas, é que há pixels. É uma corda, certo? É saber o número. Se você quiser ter, é um número que você precisa analisá-lo quando você poderia controlar a prosperidade Will não é que nós temos sempre algo com isso chamado partes em, que significa que nós queremos partes. Significa mudar o valor da string para indigente e por causa disso agora, o tamanho do telefone que podemos mudar Trig é apenas 16. Certo? Depois 18. Então temos o número agora porque temos o número, podemos usá-lo muito fácil. Podemos digitar algo como igual. tamanho do telefone para nós escolhe-nos. E isso não mudará agora. Então precisamos aumentar o site de diversão. Podemos aumentar o tamanho do telefone usando, por exemplo, aquela imitação de Brinker McCrum. Se você não sabe como funciona, trabalhos vão para as lições sobre operadores. E como você pode ver agora, quando acabamos de passar por cima, estamos aumentando sua por isso está funcionando bem. Certo? E temos uma função especial para isso. Essa coisa também está funcionando. Mas o que não? O que aconteceria se eu quisesse parar esse comportamento? Certo? Vá de verdade. Eu quero continuar sendo esse cara está se tornando certo. Quero remover esse ouvinte. Hum, eu poderia removê-lo. Sabe, depois de algo acontecer ou eu poderia removê-lo quando alguém riacho algo, por exemplo, identificação mais tarde. Eu me lembro disso. Pare de digitar sua parada. Está bem. E eu vou levar isso apenas algo que e agora nós queremos executar. Quando a parada é rangido, remover até mesmo arrendamento lá. Então nós queremos fazer coisas como parar no mesmo aluguel lá dentro. Todos riacho. Eu quero executar uma função enorme, por exemplo, por exemplo, como aquela que vai obter o resultado e, em seguida, removido dele. Até o ouvinte morto está a quilômetros de distância. E tem uma função que isso chama site de telefone aumentado. Então, vamos deletar esses. Não vamos fazer assim. Apenas fiz. Havia um na fila. 30 grátis. Como você pode ver, está funcionando bem quando eu clico. Pare. Eu não tenho milhas sobre efeito funcionando bem, mas isso. Mas você sabe, essa coisa não está mais funcionando. Então remover Mesmo ouvinte acabou de remover o que eu quero remover. E é realmente poderoso, como você pode ver, porque até mesmo os ouvintes, podemos remover algo. Bem, um fora da função que é invocada do evento, não todos eles. E também temos um casaco verde, certo? Então é por isso que até os pecadores são importantes. Então, se você não quer dizer que ele é, você não se importa apenas usar este aqui, mas mais leve. Você vai gostar muito de decoisas assim. Então, ainda mais um problema. O problema é que os antigos exploradores da Internet luz 67 e oito e pouco se você quiser apoiá-lo, então improvável. Isto não é suficiente. Você terá que usar em vez desse método. Algo bom é chamado anexar evento, e algo vai discutir desanexar, mesmo o que significa em mesmo ouvinte e remover mesmo ouvinte. Certo, provavelmente sou o Internet Explorer em todas as versões antigas. O e jovem. Todos os outros navegadores não gostavam de jogar juntos e criaram problemas porque acabaram ligar. Eles funcionam um pouco diferentes por causa disso. Ah, bem, as pessoas que programaram sites encabeça problemas porque eles não tinham que criar um seguro de agradecimento especial que funcionaria em ambos os navegadores da Web ao mesmo tempo, e nós podemos fazê-lo também. Mas se você não quer apoiá-lo, não se preocupe com isso. Estes navegadores vão morrer em breve, então você não precisa se preocupar com eles a menos que você é e você sabe, pessoa que é ou ousar o script de você faz você querer fazê-lo. Então, a fim de fazê-lo, você pode usar a consulta J, que só vai fazer você esquecer todas as coisas assim porque até mesmo obter estudos computados não funcionando nestes eram irmãos. Então você pode usar o quarto J que temos. Você faz coisas assim. Então você não precisa se importar em apoiar coisas assim. Oh, você pode criar uma função que você vai chamar o que todos, por exemplo, criar evento. Você vai levá-lo um objeto que você quer Ah, mesmo ainda você quer mesmo nomear Você quer executar e você também quer o quê? E você também quer, hum, função name off para invocar o nome off função para invocar algo que tudo bem, e devemos verificar se em nosso documento existe uma propriedade, uma função que acabamos de chamar no mesmo ouvinte. Então podemos facilmente fazer coisas assim, certo? Algo assim. Mas agora, este resultado é chamado objeto mesmo nome isco. Até mesmo nome e nome fora da função é fazer a coisa que vai ser enviado para você certo. E agora podemos substituir todas essas coisas para que pudéssemos apenas digitar segundo. Eu crio milhas de eventos sobre mudança de cor. Então só estamos mudando de nome, certo? Faça alguma coisa. Carpete bomba em Dhere. Queremos aumentar o tamanho do telefone aqui. Queríamos fazer coisas assim. E agora podemos dilatar ou levá-lo sob o comando como um exercício que você deve criar Ah, remover até mesmo esta enfermeira de fazê-lo você mesmo. Ok, nós só estamos fazendo você agora desse jeito em Dwell. Não está funcionando. Isso é verificá-la. O que? Espere, eu fiz errado. Errado no console. Como você pode ver, o objeto que mesmo ouvinte não foi encontrado. Isso é porque eu não enviei para cá, como eu enviei um objeto que eu quero operar, é claro. E agora, como você pode ver, está funcionando como funcionou antes. Certo? Quando eu chuto, pare, é Ah, parando. Mas agora, por causa disso, ele vai funcionar também no especialista em Internet 67 a noite. Mas os tamanhos de fonte aumentados não estavam funcionando da maneira que você precisará também fazer algo diferente aqui. Mas você está indo para todas essas coisas, a guerra vai para as próximas orações. Então, nessas versões, é muito trabalho. Realmente. É mais fácil saber algo bom. Isso pode ser J consulta Aan Den até mesmo disenteria vai ser chamado de algo como ser você. Apenas o que os navegadores da Web funcionam como esse. Está bem. E também há muitos assuntos que vão te ajudar a conseguir coisas assim. Já nos preocupamos com as coisas que estamos falando agora, então agora você pode criar irregularidades. Mas é claro que agora criamos a visão apenas forma, você sabe, Firefox e Chrome e outras coisas assim. Mas é claro que agora criamos a visão apenas forma, você sabe, Nós não criamos uma versão para algo meninas. Então, vamos apenas digitar você mais e agora objeto que anexar mesmo. E ele vai digitar, hum, mais mesmo nome. Por quê? Porque eles não mudaram apenas o nome da função. Mas eles também queriam que seu dedo do pé adere. Ok, então por diante, mais mesmo nome. E, em seguida, o nome da função falando voto. Então é um exercício. Faça os eventos destacados de criação remover mesmo e apenas fazer algo como algo que se você tiver problemas, basta me perguntar e você não vai. É que ele ainda está funcionando bem. Acabar com a experiência deles vai funcionar agora. Ah, você tem que se lembrar de mudar essa parte também fazer algo com isso. Tudo bem. Ok, isso só fez ouvir. Muito obrigado. 38. Objeto de evento: Olá? Hoje vamos falar de até mesmo objeto, que vai lhe dar poderosas habilidades mantidas. O que eu quero dizer? Após essas lições, você vai ser capaz de validar sua força como um profissional Você pode criar dicas que você pode criar também o que você quiser. Então vamos começar esta lição Depois de invocar dar função a partir do mesmo usando o par. Você sempre tem essa função além de algo. Será que este frio sequer se oporia? Vamos verificar isso. Aqui temos bom o resultado do elemento com a identificação de um resultado. Ok, que nós temos isso. E vamos, por exemplo, registrar aqui e até mesmo nós poderíamos usar adicionar mesmo ouvinte Bob, você sabe, é mais difícil de ler, então não vamos usá-lo mesmo dedo do pé. É melhor maneira de fazer isso. É só um projeto rápido só para mostrar algo, então vamos usar a versão mais fácil. Então vamos digitar em movimento do mouse, por exemplo. Então isso vai acontecer quando tivermos o mouse sobre algo e estivermos nos movendo certo? Não vamos ficar em um só lugar. Estamos nos movendo assim em milhas mover. Queremos executar as funções. Isso é apenas por exemplo, fazendo um pouco de espessura e vamos definir disfunção. E agora vamos criar algo temporário para que possamos ver o que está acontecendo. Podemos fazer esse cara temporário chegar a sua onda html interna. Podemos mudar as coisas, certo? O legal é que automaticamente, o primeiro argumento da função é sempre um objeto uniforme da função Que ou que estes são atribuídos a eles mesmo certo? Se em nenhum argumento for enviado para você, também falaremos sobre como enviar mais argumentos mais tarde. Mas bem, instituição como essa. E agora qualquer tipo aqui como esse você vai notar que nós temos que fazer alguma coisa com este objeto de culto mesmo rato. E você não pode acessar coisas assim, então podemos exemplo de um alky verifica se a arte Contra ela foi pressionada durante o mesmo agora, como você pode ver, é falso. Mas quando eu cliquei para fora e eu mantenho espera e eu espero que eu estou segurando como um admite para que você saiba, você pode fazer algum tipo de atalho Z em seu site. Você pode verificar qual fundo para fora Mars inferior foi bom, mas, a fim de fazê-lo, você pode usar o próprio movimento milhas, mas você tem que usar em cortes para baixo porque você sabe quando você está se movendo seu não deveria clicar em algo ou Apenas se movendo. assim que este evento estava funcionando, alguns a quilômetros abaixo. Quando algo quando sua boca está baixa, você pode mudar um cheque. Será que os gargalos clicar para que você possa fazer isso assim? Bombardeamentos é 01 grátis. Então o zero esquerdo o meio é um, e a direita é para, E há alguns problemas em navegadores da Web que falamos mais tarde porque, você sabe, como sempre, alguns navegadores implementaram o grande maneira diferente. E há coisas como o X limpo que está realmente tossindo. Vai te dar o lugar. Onde está sua boca no momento? Fora do par. Então vamos mudar na boca. Afaste-se com isso. Você pode ver que nós saímos da posição fora da boca quando você está no desenvolvimento fora do curso, isso é, você sabe, tão grande quanto sua janela é certo, porque nós não dissemos que com, Então é mesmo aqui. Então é por isso que ele está atualizando o eixo X. Então, a horizontal vertical seria por que acessar Então por que e como isso poderia usá-lo, por exemplo, para criar uma dica de ferramenta logo quando você está aqui, você quer ter que fazer aqui Quando você está aqui, você quer ter um Um pequeno cais profundo, certo? É perfeitamente bom fazer algo assim e criaremos um resfriado simples como Leadsom. Bem, criativo em algo mais poderoso na lição especial. Mas vamos para o código de segunda coisa. Você pode obter o que ele foi pressionado em número e ouvir disfuncional retornou a chave no personagem. Ok, isso é poderoso porque nos telefones você pode, por exemplo, nos dizer para parar. Ah, pessoas digitando, por exemplo, para o formulário onde você espera que as pessoas digitem números que você não quer, por exemplo, digitando alfabeto certo? Quando você quer alfabeto, você pode simplesmente parar os eles de digitar coisas como números que é realmente poderoso. Faremos coisas assim mais tarde sobre essa coisa. Falamos desta lição mais tarde, mas é da Lett. Vamos tentar a batida. Isso é, hum, por exemplo, isso ainda para pensar? Hum, mas antes de fazer isso, eu também gostaria de falar sobre isso. Obrigado agora. Está funcionando porque estamos usando os bombeiros, novos bombeiros, bem no comitê do grupo trabalhando na Internet, estimulando o novo Internet Explorer. Vai funcionar. Mas nos antigos exploradores, há um problema. O problema é que isso não existe aqui. Ele existe em algo bom é chamado janela que mesmo assim, se você quiser acessar o espírito da Internet na versão hora, você deve digitar algo assim. Mas você sabe, você não sabemos qual navegador está sendo usado pelo seu usuário. Então, a fim de fazê-lo da maneira certa para que possamos apoiar todos os navegadores, temos que verificar como fazê-lo. Vou te mostrar peso muito rápido. Olha, normalmente este E não existe no Internet Explorer, que significa que é indefinido quando fazemos algo assim. Evento Vory Bull. Bem, você também precisa saber que você pode digitar o que quiser aqui. Então, por exemplo, mesmo e agora você pode digitar seus carros E agora no reboque, usá-lo assim. Podemos digitar até aquela janela. E quando fazemos algo assim, você não é, é que é indefinido para nós. É indefinido. Mas para o Internet Explorer, não é. Mas quando fazemos algo assim, temos o objeto mais equilibrado. Ok. Agora, havia algo assim? Sou definido ou lógico. Operador Rublyova, como você pode ver. Isso é tudo nosso algo assim aqui? Por que eu te disse que operador lógico está trabalhando assim que isso é esticar a verdade, escolher a opção alternativa. O que significa que se você tiver algo assim, ele vai escolher um, certo? A solução para o problema. Formas alternativas de fazer algo. É por isso que se chama alternado. E se você tem um e um seria apenas escolher a primeira opção, a opção adequada. Então, se você fizer algo assim, também escolherá a primeira opção. Se no segundo que estes indefinidos escolherem a primeira opção, a criatividade está morta. Também vai escolher estes, certo? Então é coisa perfeita para usar aqui agora o quê? Até foi enviado para cá? Sim, janela que mesmo. E por causa disso, temos agora sempre aqui em um objeto que você quer usar, certo? E não são corvos. Irmão versão o muito legal. Ok, então agora vamos treiná-lo. Ovos criados e limpos por. Quero criar um inclinado. Então, como fazer isso? Vamos criar um Dave que chamamos de gorjeta e dentro dele eu quero dever duplo. Alguma coisa sobre o dif. Ok, e quando refrescar como você pode ver, nós temos que é algo sobre o Dave. Vamos para a ponta. Devíamos escondê-lo Começa a escrever “Vamos escondê-lo”. Então vamos mudar a exibição de bloco para dormente. Andi, isso é, por exemplo, disse que a posição toe absoluta, porque não queremos que você tome o lugar em nosso site. Nós só queremos seguir em frente e pode ser em qualquer coisa que você chama. Gostaríamos que Toa criasse para que ele confiasse para criar a altura para leitura, você sabe, apenas para torná-lo melhor cor de fundo em Ben. Outras coisas, como separar outras coisas assim. Essa é a coisa que você pode fazer. E agora ficamos distorcidos, e quando alguém se mudou para cá, quero mostrá-lo. Então, a fim de fazê-lo, devemos o que devemos primeiro obtê-lo. Vamos fazer algo tão temporário. Desculpe, ainda profunda Onda que como que até ponta e nós apenas ir para esta exibição de tempo e vamos mudá-lo para fazer o que bloquear deles para bloquear. E isso pode ver. Agora ele está aparecendo, mas eu quero mostrá-lo. Exatamente o lugar onde a boca mais fácil, certo? Porque ele é uma ferramenta que as pessoas usam para mostrar ao seu usuário. É assim que se faz? Bem, podemos usar o limpo exatamente XY e por que podemos mudar o estilo de posição truque ferramenta esquerda Podemos usar o seu ex coreano e no site certo podemos usar o coreano. Por quê? Então, hum, não está funcionando porque precisamos adicionar também, ele nos escolhe. Ok, algo que você faz assim no que temos limpado? X não é declarado fora do curso quando usar isso e as antiguidades e por quê? E agora ele está trabalhando bem. É ótimo, certo? Está movendo Cure? Não, como queríamos, mas devia ser 11. Este seria o topo. Ok, agora ele está olhando bem e é assim que nós estamos fazendo. Nós podemos, você sabe, torná-lo um pouco melhor. Então, por exemplo, em sua cidade Então nós temos o bem. O espaço entre o mouse e as fezes viajam sobre isso. Você pode ver agora que é um pouco melhor, certo? Podemos aumentar isso. Você pode mudar. Você pode fazer com que pareça melhor. Hum, esse script pode ser realmente atualizado, Por exemplo. Você pode alterar a descrição dentro. Assim, ele é alterado para o tributo A a partir daqui, por exemplo. Dados. Eles disseram algo mais profundo que e Obama, mano, vamos fazer coisas assim na lição especial. Você pode fazer isso como um exercício agora, mas pode ser um pouco difícil. Só estou mostrando a energia desligada a coisa que acabamos de aprender. Ok, então você tem. Então você finalmente tem algo divertido para fazer. Você também poderia, você sabe, atualizar. Então desaparece quando você simplesmente se muda. Sabe, as funções que tenho na minha era a minha boca para fora. Outras coisas assim. Hum, agora, eu também gostaria de falar sobre como enviar um argumento para esta função. Sabe, às vezes você quer enviar um argumento especial para a função. Então, como funcionou bem? Porque, você sabe, aqui nós podemos pegar o que você quiser, então podemos fazer algo assim e ainda vai funcionar. Como você pode ver, ele está funcionando porque este é apenas o primeiro argumento que nós apenas chamá-lo mesmo porque ele é mais auto-descritivo. E o primeiro argumento do noivo é sempre um objeto par. Mas o que aconteceria se você tivesse mais do que o primeiro acordo não é mesmo então, certo? Para fazer isso, você tem que criar uma função enorme como essa e você vai se envolver em fazer algo assim. Mas agora você tem bom isso mesmo aqui, certo? O objeto par está dentro da função de falta animal que você vai lixar agora, função de hoje e agora você pode levá-lo. Ok. E por causa disso, você também pode enviar argumentos, certo? Então, novos argumentos, exemplo. A amostra leva cerca de metade e nós podemos levá-lo aqui para que possamos fazer algo assim e nós podemos eu d aqui assim. Isso é espaço, mas como câncer, está funcionando corretamente. Isso é espaço, mas como câncer, São essas tomadas simples sobre nada? Está abaixo deste total bem aqui. Então está funcionando bem. Você está tudo bem. Nós podemos enviar aqui agora uma discussão e não vamos falar sobre esse alvo Ah, bem, você sabe, você tem algo bom chamado esses objetos, e esse objeto vai dar Você quer que eu faça algo assim? É o , nome da etiqueta, por exemplo. E isso é tomar sob o comum o culpado porque não está nos ajudando. Como pode ver, temos Defu. Então esses trabalhos, o nome do tog ou nós podemos agir emitir qualquer propriedade fora do elemento que envolveu a função. A verdadeira visita. É o um limão que tem este dedo mesmo atribuído. Então, dias eles têm se você tinha dentro parágrafos e ordenou liberado esses itens outras coisas assim, ele também vai dar-lhe o se você quiser agir. Foi exatamente isso que invocou o evento? Tem acesso de reboque? O evento que o alvo também vai dar-lhe agora html def elemento. Certo. Mas agora ele está dando a você, um, o elemento que envolveu. Então, se você tivesse aqui, por exemplo, parágrafo para assim você percebe que ele está mudando, certo? Porque dif pode ter dentro de outro elemento. Mas essa coisa não mudaria, certo? Se mudarmos a corda do dedo do pé. Como pode ver, não está lhe dando a coisa certa. Você pode, claro, obter o nome tático. Exatamente. O Dave. Fique bem, Andi. Há também um problema porque não é suportado no Internet Express seis e oito. E você também pode fazer coisas como, você sabe, como conversamos antes. Então podemos fazer isso como aquela fonte de demanda. E agora podemos acessá-lo usando assim. Como pode ver, ainda está funcionando. Mas vai funcionar agora em nosso estudo especialista em Internet, porque em um excelente explorador é chamado de elemento fonte, não o alvo A. Então você acha que este libertando você pode agir é exatamente propriedades fora do limão A que invocou o da função que mesmo direito e também a escola? Porque agora você não precisa enviar a segunda discussão, certo? Você não precisa dele se você quiser, sabe, verificar exatamente o D para algo que você não precisa agora fazer isso. Mas é claro, coisas assim podem acontecer quando você quer enviar mais de um argumento. Então você sabe, eu sei a solução. OK, então estas são as noções básicas dessas coisas. Vamos criar coisas muito legais mais tarde nas próximas lições foram Bem, treinar todas essas coisas que fazemos. É assim que ele está suportando em todos os navegadores, outras coisas assim. Isso é tudo uma boa lição. Muito obrigado. 39. Propagação de eventos: Olá. Hoje vamos falar sobre propagação fora. Mesmo propagação significa multiplicação. Às vezes é chamado de bobbling. Vamos mostrar-lhe um exemplo. Temos um DIF que tem identificação um resultado, e dentro dele podemos ter muitos ataques, certo? Por exemplo, podemos ver se é algo ousado algo que está apenas dentro do Dave. E também podemos ter um botão para que possamos ter muitos ataques dentro e outros direitos fiscais. E há alguns problemas com isso aqui. Nós só temos para com o documento, obter elemento por I d todos esses elementos para essas variáveis. E agora queremos ver o que acontece em quilômetros mais movimentados. Até nós estamos usando a função anônima envolvida para fazer algo. A função que estamos enviando-lhes um par e este que é re ferência do dedo do pé o resultado aqui estamos fazendo tiro que mesmo vai funcionar no Estagiário Express 67 e oito E também podemos chegar à fonte fora do elemento. E vamos conseguir o lugar temporário. Então este lugar, a fim de mostrar algo ah, para estar de volta Nosso casaco e quando o refrescarmos, você vai notar que quando estamos nos movendo para cá, a fonte está mesmo mudando. Direito mesmo é atribuído a falar dif porque você sabe que este objeto está se referindo ao resultado. Então essa coisa não está mudando, mas de alguma forma me diga como esse elemento ou esse limão sabe sobre o par. Isso é um sinal apenas para este elemento, certo? De alguma forma, todos eles sabem sobre isso, certo, porque normalmente se eles não soubessem sobre isso, nós não teríamos a fonte de mudanças sequer. Nada aconteceria quando nos movemos em coisas que estavam dentro de uma profundidade, e isso é coisa muito legal que está automaticamente funcionando. E é chamado de propagação fora. Evans, uma propagação de eventos está funcionando assim que quando estamos fazendo algo, fazemos um evento certo, nós o acionamos. Então, por exemplo, estamos nos movendo dentro do divã, outro elemento elemento então, que ainda é propagado até os três. Então, de baixo, ele está saltando para D do salto de David para Boulder de corpos saltando para HTML está pulando para a árvore superior do seu HTML 5. Então é por isso que não precisamos digitar algo como negrito em milhas de movimento. Então, se você tem algo no reboque, o dif que temos Ah, nós temos instantaneamente uma maneira de fazer alguma coisa. Insight e dedo do pé obter todos esses eventos de seus elementos pai, certo? E isso é muito legal. Mas às vezes não é uma escola, como você pode pensar, porque bem, vamos imaginar uma situação. Vamos alterá-los para o próprio clique. Mesmo na direita. Vamos fazer algo alerta. Estamos no resultado, certo? E vamos mudar isso para algo como, um, ousado bastão. E agora, como você pode ver, quando clicamos sobre isso verá botão de alerta. Mas também vemos um resultado, certo? Então, invocando fundo, também invocamos resultado. Alguns encontram situação como essa quando você clica em algo e você está empatado. Esta propagação acima não é o que você quer, porque você pode ter aqui algo algumas instruções que você não deseja invocar quando você invoca um canto inferior direito, então você precisa parar a propagação para fazê-lo. Não é difícil. Você apenas digita algo como parar a propagação. Como você pode ver, não um quando Creegan botão vamos ver na mensagem garrafa quando tomou negrito o texto que Siebold ele e os resultados por isso é que estamos trabalhando como deveria, porque ele não está se propagando aqui mesmo. Mas aqui não é e como você pode imaginar, improvável. Se você quiser oferecer suporte também ao Internet Explorer 678 você tem que, em vez de invocar o passo leste da propagação. Você tem que se aconselhar, mas você tem que definir a propriedade do Conselho Bolha como verdadeira. Então, quando você fizer dessa maneira, agora, vai funcionar. Também na era 67 e oito versão fora do Internet Explorer. Então a propagação é realmente algo que é cuidadoso para você, certo? É intuitivo porque quando você coloca algo dentro do dif você meu mais tempo quer quando você está se movendo, elementos dentro dele também têm mesmo propagado porque então você não precisa dedo especificar para cada fora que elemento. Isto mesmo certo, vai demorar muito do que funciona com a propagação. Nós não precisamos fazer coisas assim, mas há situações de direitos em que você quer pará-lo e você faz isso dessa maneira. Só há uma boa lição. Muito obrigado. 40. preventDefault: Olá Hoje vou dizer-lhe como evitar como parar as ações padrão que acontece em seu site. Por exemplo, quando o usuário digitar algo no outono e ele clica em enviado, ele será enviado automaticamente. Mas e se você quisesse validar isso primeiro? E se algo está errado lá, você provavelmente não quer enviá-lo. Você quer dizer Ei, você sabe que tem que mudar alguma coisa, certo? Então, como ainda ser como fazê-lo? Bem, como você pode ver, temos o formulário aqui nós criamos um i d para ID. Temos e-mail que também tem um 90. E aqui nós usamos o modelo de objeto de documento toe, obter e-mail. Então nós temos bom agora fez entrada aqui e nós também temos a sopa informar fundo. Então usamos o seletor de coro que está usando CSS livre aqui. Então isso significa que ele não vai ser apoiado de uma forma, irmãos corpos mais fácil e é mais rápido, então eu não me importo. E o mais sobre exportador interno, é claro que você pode fazê-lo seria diferente onde, por exemplo, criar aqui e I D, mas vamos para o tópico. Como agora, você sabe, prevenir quando você cria ido isso impediu as coisas que acontecem. A primeira coisa que você pensaria que seria tipo: “Ei, “Ei, eu faria algo assim e deveria ser suficiente, certo?” Quando eu apenas algo assim, eu sou apenas, você sabe, você sabe, um dedo do pé autografado. E isso também deve ser no Click De então não deve funcionar agora? Não. Como você pode ver , ainda está funcionando. Você tem que fazer antes de fazer qualquer coisa. Aqui Parar impedir a ação padrão apenas digitando algo como morte. Então é o método do mesmo objeto direito que aprendemos sobre e isso concede Agora é apenas impedido. Nada acontece, mas você pode estar mentindo sobre um dia eu quero mandar isso direito. Então, se você quiser enviar mais tarde, você deve chamar os atores para o que fazer notícias mais tarde. Então, a fim de chegar à sua semana deve algo como que um Varda humano obter elemento por i d notícias mais tarde. E quando estamos no noticiário mais tarde, onde mostrou usar algo que é chamado de método enviar e Agora, quando clicamos nele olhar, é, você sabe, fazer a mesma coisa se tivéssemos isso assim. Mas a diferença é que agora você pode fazer o que quiser entre essas linhas antes de enviar. Ou você pode enviar apenas se você avaliar tudo. Está tudo bem na sua forma, certo? Então, como fazer isso? Bem, você pode, por exemplo, verificar se ele fez esse valor para obter o valor de algo na forma que você digita esse valor. E agora você pode, por exemplo, dizer se é Ah, o leão macho O Baba Baba, Venha a hora vem ou o que quer que possamos nos submeter. Caso contrário, é errado. Claro que você poderia verificar o padrão. Se isto for e-mail, 11 exigidos. Mas você precisará saber os atos de destroços de objetos que não sabemos agora. Falaremos sobre o X direto mais tarde. Quando falamos sobre isso, pode ser bom exercício voltar para esta lição e atualizar o script. Portanto, certifique-se de que o e-mail está correto. Certo? Ok, então agora se você tem um rito de empregada que funcionaria de outra forma quando levarmos algo para você porque assentos são dezenas de carne tipo Baldwin que é submetido. Então isso significa que isso está montando em outro. Caso contrário, podemos, por exemplo, dizer, “ Ei, eu quero chegar ao cara temporário.” Então vamos tomar este cara var documento temporário Obter um limão por I d temporário e podemos fazer dot ener html temporário Ah, esse e-mail está errado, certo? E como você pode ver, não é dizer que e-mail está errado. Mudanças radicais que começam a ler ou algo assim. Poderíamos o quê? Toda a gente? Não podemos informar as pessoas de que algo está errado. Você tem que mudar se você quiser apoiar também Internets para um 67 esta noite Você deve fazê-lo dessa forma. Está bem. Ah, na Internet muito 67 E você tem que digitar e que retornar e atribuído a ele falso. Então vai funcionar. Então essa é a coisa que você tem que fazer para conseguir. Que trabalho no Internet Explorer e bem, onde poderia usar isso é só usar capaz em situação como o formulário? - Não. Você pode, por exemplo, bloquear os homens de contexto assim. Você pode, por exemplo, bloquear o link quando alguma partícula vai, nada acontece. Você pode enviar alguém para alguma diferença total por peças ou outras coisas assim. Você pode verificar algo antes de mandá-lo para o lugar. Eso Vamos, por exemplo, bloquear o contexto. Mental. Vamos bloqueá-lo no botão de informação da sopa. Ok, então como fazer isso? Nós apenas companhia isso e você tem que agora e fazer algo depois do próprio menu de contexto. Mesmo assim, vamos fazer algo assim e agora temos que bloqueá-lo. Mesmo assim, Então, quando o fizermos bomba subbed para o botão. Vá lá, contexto May. Não está funcionando porque eu não pensei isso, é claro. E agora Obama você pode ver que não está funcionando direito. Não podemos criar homens de contexto ou não estamos clicando no botão direito e não está funcionando aqui. Está a trabalhar aqui. Ele não Onley nesta colocação sobre estas garrafas, e poderia ser útil porque ele poderia criar até mesmo o seu próprio menu de contexto. Você poderia, você sabe, verificar se esse botão é igual a dedo. Eu acho que, e se ainda estiver feito, você pode, por exemplo, usar os eixos Cliente X e Y e mostrar algo. P. Direto neste lugar e seu usuário terá muitos. Isso é crítico. Incrível, não é? Ok, isso soou lição. Muito obrigado. 41. Evento em Onscroll: Olá hoje com o exercício um pouco, e ao mesmo tempo eu vou mostrar-lhe um novo mesmo que permitirá que você crie algo assim. Quando você rolar dominância, você pode ver que temos o seu sobre ele, e quando clicamos sobre ele, vamos para o topo do nosso site. É uma coisa legal. É uma boa adição ao seu site quando você tem conteúdo longo, porque então os usuários terão melhor experiência em seu site, certo? Você clica para o topo lá no topo. Isso é muito legal. Claro, você pode começar um pouco melhor, então parece melhor. Mas bem, vamos treinar um pouco. Isso é fazê-lo. A fim de fazê-lo teria que criar primeiro este canto inferior direito. Então vamos fazer isso. Vamos criar um I D para ele, por exemplo, vamos chamá-lo muito top bottle on. Nós apenas damos aqui ataques para o topo, e agora precisamos estilizá-lo um pouco. Então chamada de fundo ou cerceta Ah, vamos dar-lhe com Vamos dar-lhe altura. Vamos dar, por exemplo, , parte das coisas. E agora, quando nós atualizá-lo como você pode ver, nós temos o botão assim quando nós como sobre ele pairar sobre ele. Queremos mudar, por exemplo, cor para qualquer coisa. E que você pode ver que está funcionando muito bem, certo? Ok, então agora nós precisamos neste lugar e ele deve estar sempre aqui mesmo que nós rolamos para baixo como fazê-lo. Mas poderíamos fazer isso em Javascript. Mas a maioria dos irmãos Ah, apoiar algo bom é chamado de posição fixa Quando você faz isso dessa forma, sua posição é fixa agora, o que significa que é absoluta. Mas é total absoluto Quando você rola mesmo quando você rola, é sempre em que ele vai estar sempre naquele lugar para que agora podemos digitar algo. Comprei o fundo do Dhere 15 fotos à direita. 15 correções. Como você pode ver agora está aqui. E bem, nós precisamos fazer todos os alguns em alguma coisa aqui, como muitas pausas. Então você pode ver que quando você está ferrando realmente vale a pena trabalhar. Tudo bem. Então, como você pode ver, está sempre aqui quando nós rolamos, certo? Ok. Então, o que queremos fazer agora? Queremos Teoh quando a fraca necessidade legal quer saltar para o topo, certo? Essa é a primeira coisa. E a segunda coisa é que nós também gostaríamos de Teoh. Hum, você provavelmente não tem isso que não deve ser sempre visível. O rival estava no topo. Por que deveríamos vê-lo? Certo, então vamos fazer isso no Dwell. Nós também poderíamos atualizar um pouco Cars mais grosseiro. Poderíamos apontar para ela quem poderia dizer que a mensagem se alinhava para enviá-la. Você pode fazer coisas assim de qualquer maneira. Ok, vamos. Mas vamos voltar ao assunto. Então precisamos ter acesso a essa coisa, certo? Então precisamos ter acesso a essa coisa, Então documento obter alarme. E por eu dizer botão em. Certo, temos um bom acesso a ele. E quando alguém clica nele. Então queremos fazer algo com seu próprio evento clique, e queremos saltar para o topo. Como fazer isso? Podemos usar a função de rolagem por para que possamos fazer coisas como o Windows Scroll por. E então amarramos o eixo X. E porquê? , saídas , coreanos, velho dólar. Por que é vertical para que todos os tipos aqui que eu não tenho punho existam. Significa que vai se mover por 15 picaretas é para a direita. Mas o que nós não nos importamos com a direita esquerda Nós apenas nos preocupamos com essas coisas. Quando digitamos aqui 100 você vai notar é quando clicamos nele. Estamos pulando por 100 pixels para baixo tão menos significa que vamos detalhar. Ok, mas eu quero ir sempre para o topo. Então eu quero ir como marchar para o topo como fomos para o canto inferior direito. E essa coisa está começando assim. Certo, mas queremos ir para o topo, então precisamos multiplicar mini menos um por esses valores. Então nós temos ele menos valor, certo e negativo. E como você pode ver agora, basta clicar e estamos no topo do nosso site. Então está funcionando muito bem, certo? E agora não queremos mostrá-lo quando estamos no topo. Isso apenas estúpido para ter lá para que possamos usar a janela que em rolagem mesmo por que são atribuídos a sua própria janela do dedo do pé do crânio Porque bem, esta é uma janela. Eu teria uma janela aqui no dia. Este é o objeto principal que é a melhor coisa a fazer aqui. Certo, então estamos. Estamos agora invocando na rolagem Sempre quando algo acontece. Quando algo movermos essa garota, vamos criar o espaço aqui para que eu possa te mostrar algo muito importante. Quando algo movermos essa garota, Então, por exemplo, eu acho isso e vamos lá para dentro. Então, assim e vamos fazer algo assim. Como você pode ver agora podemos ver a posição fora do pergaminho. Então está funcionando assim, certo? Quando estamos aqui, é pensar que é como Freeh sob. Acho que devemos mostrar a isto o que é. 300, certo? Então temos que fazer uma condição comigo para verificar se acabou. Se você não puder, eu quero mostrar se é menor que todos os candidatos, eu quero apenas mudar a exibição para agora no início, nós queremos apenas fazê-lo desaparecer, OK, nós não queremos mostrá-lo. Por que precisamos? E agora só precisamos mudar este lugar, então como fazê-lo? Bem, podemos apenas o quê? Pegue o botão para que possamos declará-lo novamente aqui, por exemplo, disfunção interna. Podemos chegar ao botão de cima e depois ir para o estilo e depois ir para o visor e mudá-lo para bloquear. Agora era show mesmo que eu me movesse um pouco. Então eu estou para verificar se esta página janela por que deslocamento é maior do que agora? Ele só sabe que pode datilografar o que quiser. 300. 500. Bem, tal quanto você quer digitar, certo? Algumas pessoas gostariam de ser mostradas depois de 400 fala como Ah não gostaria de mostrá-lo em 500 tipo aqui. Um número que você gostaria do seu pé aqui. Caso contrário, eu quero apenas mudar de bloco bloqueado um non. Então eu quero fazê-lo desaparecer. E como você pode ver agora, quando estamos rolando, ele não está mostrando. Mas quando passamos dos 400 está mostrando certo quando voltamos, é uma peça. Quando clicamos nele, ele também desaparece. Então temos agora algo vai melhorar a experiência. Oh, são para usuários em seu site E é suportado em esportes na Internet? 678 Não tanto, mas penso um segundo sobre isso. Devemos mesmo fazer isso por eles? Eles tornam sua vida mais horrível. E essa coisa é realmente algo que está fazendo alguém mentir mais conveniente, certo? Não é algo que as pessoas chorariam. O que eles não têm direito é apenas uma adição ao seu site. Não é algo que vai diminuir o tamanho em seu site e outras coisas assim. Então você pode encontrar alguns hacks como fazê-lo. Mas acho que é só perda de tempo. Ah, apenas faça isso. Para as pessoas que estão operando navegadores da Web dia, isso é apenas uma boa lição. Muito obrigado. 42. MouseEvent: Olá Hoje vou falar sobre os uniformes do mouse. E temos certeza que tivemos que criar algo assim? Uau, é ótimo, não é? Estamos movendo uma imagem em nosso site e podemos mover qualquer elemento que você deseja mover para a direita? Você pode criar este arrastamento em qualquer elemento. Sempre te mostrar em breve como fazê-lo. Mas primeiro, vamos rever todo o rato. Mesmo como podem ver, temos combustível a esta distância. E isso ocorre mesmo quando o cursor é longo, entra no um limão, ok, e mais quase fora é quando o cursor está deixando o elemento. Então estes são básicos um e você tem aqueles em milhas. Mova-se quando você está movendo um limão, então é provavelmente vai ser muito útil para nós. Está mexendo sua boca com limão, certo? Então, sim, isso é muito importante para nós. Temos algo como um rangido quando você clica e você tem algo como DoubleClick. Então, quando você duplo chute muito rápido eo clique no clique mesmo é realmente uma conexão fora quase para baixo e quase para cima e nós vamos precisar desta informação porque nós não queremos clicar sobre ele, e ele vai se mover. Queremos o dedo do pé, ter o nosso bastão fora do rato para baixo. E então queremos invocar isso em milhas. Mova-se para a direita quando estamos nos movendo, você quer movê-lo? Mas quando temos o nosso maior rato para cima, queremos reagir a ele. E você quer parar no Miles Move. Ok. Depois disso, você pode dizer que você pode parar os impuros, mesmo como você pode ver aqui. Você tem aqui um botão quando você faz algo assim e eu tenho bom agora aqui e minha máscara ou, senhor, como você pode ver, nada aconteceu. Mas quando você clica nele, bem, então você é enviado para outro lugar. Isso é porque, a fim de ter rápido, você tem que ter quase fora e quase no mesmo lugar, certo? Então podemos usar informações assim agora para criar essa coisa que tínhamos aqui. Agora, eu o atualizo e não temos nada. Então temos uma imagem. Imagem adicionada. Aqui é apenas uma imagem simples com o er identificação e a primeira coisa que devemos fazer é definir a posição para a direita absoluta Porque queremos mudar a posição fora deste elemento Freeway. Nós não queremos que ele ocupe o lugar em nosso site com outros elementos, certo? Queremos tirá-lo do fluxo normal. Agora queremos pegá-lo. Então documento Obter um limão por I d e nós queremos obter esta imagem de amostra. Certo? Então vamos salvá-lo. E agora queremos o que queremos dizer se queremos fazer algo quando alguém tem o fundo para baixo. Certo? Então, o que devemos fazer? Simples que a própria boca para baixo. E queremos envolver a função aqui. Então, quando o rato estiver no chão, queremos o dedo do pé. Uma vez que algo assim acontece também Não, isso não faria algo como todas as bocas se movem para a direita. Queremos o dedo do pé. Diga, se alguém está movendo essa boca neste elemento. Então nós devemos neste exemplo sobre este elemento também e você sabe, assistir Ouvir a própria boca mover mesmo Você pode, é claro, nós não adicionamos mesmo ouvintes. Além disso, eu só estou fazendo isso assim porque seria um pouco mais simples. Certo? Então temos estado agora em movimento do mouse em frente. E porque nós temos bons agora em milhas mover, nós podemos mover isso, eu acho muito fácil, porque, bem, nós podemos apenas acessar esta amostra como nós podemos apenas digitar algo assim e nós podemos chegar a o estilo à esquerda. E ele teria se vingado em quem pode fazer algo como um Creon X, que vai ter o lugar onde posição mais fácil boca como eu estava falando últimas lições mais nos escolhe porque precisamos tê-lo em nos escolhe. Acabamos de implementar o eixo horizontal. E agora precisamos fazer algo com o vertical ligado. Ele considera quando vamos precisar? Bem, quando temos, hum, nossas milhas abaixo, está funcionando. Quando estamos nos movendo , também está funcionando. Mas quando nos movemos sobre esse objeto e ele está fugindo de nós, certo? Então como fazê-lo para que ele não fuja porque, bem, agora, nós temos o canto esquerdo, direito, direito, o canto superior esquerdo aqui fora da nossa imagem. É por isso que temos problemas assim. Então devemos ir para a amostra PNG e ver como se é o tamanho dessas imagens? Você pode ver. O que temos é 128 e Heidi também 128. E devemos mudar essa posição. Deveríamos entrar no meio disso, certo? Nós vamos apenas, hum, e operar assim. E como você pode ver agora, sim, estamos no meio disso e agora está funcionando. Estamos movendo-o. Mas não podemos parar de nos mover só porque bem, como fazê-lo. Não podemos fazer isso agora, certo? Não está funcionando porque ainda não temos no mouse para cima. Comece aqui em DWI. Não fez nada com isso. Mas há um problema. Consegue ver estes? Oh, como você pode ver, aqui está uma cópia dele. Quando me chamam de tinta e eu posso até abrir em outro top. Esta coisa é apenas uma casa básica, Drac. Mesmo isso, você sabe,é você sabe, suportado em navegadores da Web. Precisamos parar com isso. Caso contrário, teremos problemas. Então, precisamos agir é o simples e entrar em algo bom disco próprio drag start e precisamos evitar a ação padrão. Agora, como você pode ver, podemos movê-lo livre. E não abrimos outra página, e vai funcionar melhor, certo? Não haverá nenhuma caixa desde agora. Certo, agora está funcionando melhor. Precisamos parar como pará-lo. Bem, experimente isso. E agora precisamos ir para quase para cima. Eu quero invocar a função que vai simplesmente pará-la. Certo. Então, queremos ir à amostra da minha casa. Mova-se, movimento da boca é igual a Não. Quando eles foram designados para cá? Não, nós só vamos, você sabe, anular essa coisa e isso vai parar. E há uma moeda. Está parando agora. Está funcionando. Tudo bem. Então fizemos a mesma coisa que eu disse antes sobre isso. Você pode ver que quando fazemos isso muito rápido, eu às vezes posso perder qualquer um. Certo? Neste momento, é difícil perder porque é um apartamento grande. O que aconteceria se este elemento fosse menor? O que aconteceria se esse elemento fosse outro? Não do mesmo tamanho. Podemos conseguir isto. Obtenha o tamanho da imagem. Como fazer isso. Bem, nós podemos fazer isso. Com esta altura, podemos obter a altura da arma do limão fora da imagem apenas digitando algo assim porque estávamos acessando a amostra aqui com o mundo do disco E, que não é 128 foi para não dividido por dois. Certo. E nosso casaco é agora um pouco mais universal como você pode parecer. Mas também precisamos que temos um problema como esse. Se fosse menor, poderíamos saber, quando alguém está fazendo algo assim rápido, poderíamos perder o foco e a droga estaria perdida. Eafe é o suficiente para você. Você pode parar aqui, mas podemos melhorá-lo, certo? Podemos sempre melhorá-lo. Então poderíamos assistir agora, não a amostra, mas poderíamos assistir no documento no mouse. Certo, porque assista eles até aqui. E agora precisamos mudar para Não, não no documento. Mas agora há um problema não está funcionando porque esta palavra-chave não está acessando agora a amostra. Mas está acessando, Doc, você documenta. Então precisamos de alguma forma enviar aqui uma amostra de como fazê-lo. Podemos criar uma variável temporária aqui assim. Então temos acesso para rebocar este elemento e agora podemos enviá-lo para esta função aqui. Ok. Então pode ser mais tarde. Nós não podemos usar esta amostra deste lugar porque ele está consumindo e digitar algo como que milhas abaixo você não vai é que Ah, não é variável global e nós é, pode não estar vendo aqui. Certo? Então devemos fazer um caminho morto. E agora queremos enviá-lo para outra função. Então devemos criá-lo, por exemplo Função, imagem em movimento, uh, como que queremos aqui e par. E também queremos nos opor a mover para a direita. Quero mudar isso em todos os lugares assim. Então objeto para mover e documentar que na maioria mover um. Eu quero invocar a imagem em movimento, mas eu quero enviar um argumentos vão fazê-lo dessa forma Então imagem em movimento com os objetos pares como esse. E também queremos remetente para que o disco que ele trabalhou deste lugar e agora, como podem ver, está funcionando bem. E mesmo que eu faça isso oh, muito rápido ainda vai funcionar. OK, isso é o Então é um pouco melhor agora você poderia agora melhorá-lo, mas agora você não sabe algo com este culto Ajax ou html cinco. O problema que temos agora é esse? Olha, não estamos guardando a posição quando atualizamos, a posição está bem aqui. Você pode, por exemplo, usar este programa para mostrar crachás no perfil. Alguém e a pessoa podem seguir em você. Ele forneceu esses distintivos em algum lugar, certo? Por exemplo, para algo assim. Mas coisas assim devem ser salvas em, por exemplo, banco de dados. E para fazer isso, ele enviaria para o banco de dados essa informação com o Ajax ou você poderia salvar a posição ou algo para apenas este usuário nos cookies. Falamos de cookies, mas improvável nas pontuações não vai falar sobre um Jack porque estes muito sempre grande tópico e haveria outra costa sobre esta coisa. Claro que pode. Você usa isso para outras coisas. Tenho certeza que temos. Você tem uma boa, grande imaginação. Você encontrou uma maneira de usar essas coisas. E você também deve saber que em html cinco eles são novos eventos que estão conectados à droga, e eles permitem que você, por exemplo, por exemplo, deixe as coisas em algum lugar, faça um lugar onde você só pode soltar coisas improváveis. Nós não falamos sobre isso porque falamos sobre coisas assim em HD Merkel porque também é grande tópico. Certo? Então html five está lhe dando ainda mais poder para o seu JavaScript. Então é boa idéia dedo também aprender. Certo, isso é tudo na lição. Muito obrigado. 43. Eventos do tempo: Olá hoje. Sempre mostrar-lhe duas funções que o tempo limite e disse Interval próprio exemplo prático. Nós estamos indo para criar um cronômetro e essas funções são usados para em torno de uma função depois de um tempo que você especificar Ok, definir o tempo limite está indo em torno de uma função JavaScript após Hominy milissegundos elegantes. Você passou aqui e disse Interval vai fazer o mesmo, mas ele vai continuar fazendo isso para sempre Até que você diga parar Nós, por exemplo, intervalo claro. Você também pode parar de executar Ah, função no tempo definido antes que ele vai ser executado com o tempo claro até disse tempo fora e disse intervalo, todos estão retirando o er identificação fora do fora que você sabe mesmo que vai acontecer e você pode pará-lo usando essas funções e onde alguns quando algo assim pode ser usado, você pode usá-lo para. Por exemplo, verifique se seu usuário está fazendo algo no leste do seu site. Ele está movendo o maltês e assistindo o vídeo e você acha que uma droga você pode enviar para oh , por exemplo, o meu acompanhante. Eles banco de dados as informações que ele está apenas no site, certo, então você pode verificar coisas assim você pode, por exemplo, criar um gráfico. Você pode, porque você pode verificar a cada segundo se alguém digita algo. Oh, você pode, por exemplo, criar animação. Você pode, por exemplo, mudar a cada 30 milissegundos. O lugar onde algo está. Ah, no seu site. Certo. Portanto, há pedras fora de opções. - É o quê? Você poderia usar coisas assim. Você pode, por exemplo, criar o relógio. Mas vamos criar algo. O que é chamado de parada. O que? Porque provavelmente a coisa mais fácil para dois diões agora. E vai ser uma boa experiência para nós. Ok, então eu já criei uma entrada de texto como iniciar uma garrafa e uma garrafa de parada. Ok, então nós temos algo assim, e eu também criei identificações para eles. Então, temos o botão de partida partida botão de partida partida parada e manipulador de cronômetro. Quando digitamos aqui número e clicamos começar bem, gostaria de ver aqui 100 para entrar para o 123 e ele deve vir a contagem regressiva para zero. Então, como fazer isso? A primeira coisa que temos que fazer, temos que obter esses elementos do nosso site para que possamos fazê-lo como essa variável. E agora usando passagens contra iam lidar com isso. E agora algo assim. Ah, um bom e fome de cronômetro. Então agora temos todas as coisas de nossos sites em nossas variedades para que possamos agir, não é? E vamos pensar nisso um segundo. Quando temos aqui um número, nós digitamos aqui e clicamos em iniciar gostaríamos de ver aqui, Então, quando eu clicar, é o mesmo creep. Ok, então quando alguém riacho no começo da garrafa, eu gostaria de executar uma função. Certo. E esta função deve fazer o que deve fazer o que deve levar o valor inicial. O valor inicial está aqui, e porque ele está na importação, devemos pegar o valor, certo? Nem todos. Não na entrada, mas no valor dessa entrada. Então este é o valor inicial, e devemos colocá-lo a estibordo Chandler, certo? Manipulador de cronômetro, que HTML interno é igual ao valor inicial. Não quando poderíamos começar. Ele está funcionando bem, certo Quando nós mudá-lo, ele não está funcionando bem, porque quando nós mudamos as coisas, uh, e nós podemos no evento clique ele vai levar aqui o valor inicial que estava aqui no Começa quando carregamos a arma. Então, quando fizemos algo assim agora, esse pensamento mudou sobre nós temos aqui, Steve. Steve, o valor que os antigos valorizam. Então devemos mudar esse valor cada vez que alguém rija sobre isso aqui. Certo. Certo, então agora devemos começar a contagem regressiva. Posso usar um olhar para ele? Bem, sim, mas seria muito mais rápido. Eu fiz. Seu código JavaScript iria apenas mudá-lo até agora que seria como uma bomba. E o zero instantaneamente, você diria que provavelmente pensa em contá-los. E isso é quando algo como tempo definido ou intervalo definido é crítico porque ele pode executar uma função JavaScript. E a função Danske é apenas uma instrução. Então, por exemplo, diminuindo o número após milissegundos. Você especifica aqui depois do tempo assim, certo? Então essa vai ser a melhor coisa a fazer agora. Então nós queremos Teoh definir intervalo e queremos executar uma função que nós vamos especificar aqui após um segundo, certo? Algo assim. E o que podemos criar uma função agora, um, assim e o que queria, nós queremos apenas fazer algo assim e você quer diminuir esse valor, certo? E como você pode ver agora está funcionando bem. Estamos em contagem regressiva. Mas quando mudamos para cinco, como podem ver, temos bons problemas porque vocês têm que contadores ao mesmo tempo. Certo? Então seria boa ideia que quando clicarmos nele, parássemos esse intervalo, certo? Devíamos parar com isso. Então, como fazer isso? Poderíamos, por exemplo, fazer algo como essa variável. E aqui nós poderíamos obter esse intervalo re identificação referência. E quando clicarmos aqui para que seja melhor. Provavelmente criamos esta variável aqui, certo? E quando clicamos no início da garrafa, devemos verificar se essa identificação de referência intervalo existe. Se sim, então gostaríamos de limpar Intervalo enviando aqui este eu d. Caso contrário, não precisamos fazê-lo direito. Não vamos usar o teclado de livros aqui porque você quer exatamente passar dois dias Guy aqui . Certo? Agora deve funcionar. - Tudo bem. Bomba de 24 bombas. Eu mudei para Isto vai ver agora que ele está no balcão único. O problema é que ele está contando depois mesmo zero. Certo? Portanto, devemos parar também de executar quando o contador está errado. Então, se o valor inicial for menor que zero, queremos parar de executar tudo. Certo? Então o que queremos fazer nós queremos Teoh. Também intervalo claro com a referência de intervalo não indicador. Há um problema com isso. Como você pode ver, temos menos um menos ainda por quê? Porque mesmo que tenhamos parado este intervalo, não significa que todas as instruções depois destas instruções não serão executadas. O que significa que também devemos sair da função diretamente desta função. Então devemos digitar aqui, retornar agora como você ainda pode ter um 10 menos um. Assim, podemos mudar a situação para, por exemplo, fazê-lo assim. E agora estamos contando 20 Estamos mortos? Você sabe, em vez de fazer pelo seu susto de dinheiro, nós poderíamos fazê-lo, por exemplo aqui 10 e está funcionando bem. Eu acho que isso é um pouco mais fácil de entender, certo? Certo, então agora podemos contar, podemos mudar para outro lugar sem nos preocuparmos muito. Então criou uma contagem regressiva de estibordo. Queremos também implementar o manipulador do cronômetro. Tão barba. Chandler, eu sinto muito. Não este rodízio duplo, mas garrafa parar próprio clique é igual a função e quer apenas auto assim apenas envolvidos dias bálsamo direito . E eu não quero ficar, quero vir junto. E Bob, Step Souljah está trabalhando bem. Assim, o intervalo é apenas invocar uma função, desde que não digamos parar direito. Mas temos também algo que discutirá o tempo definido. O que? Só vamos invocar algo uma vez, mas não significa que não podemos ter, sabe, podemos fazer o mesmo que fizemos agora com o set. Terrível. Se você quiser fazer a mesma coisa, é comentar por um segundo e pronto. Então nós também queremos fazer algo depois que alguém clicar na garrafa e queremos pegar o valor inicial e mudar o valor. Certo? Então esta parte é a mesma. Mas agora nós gostaríamos de executar com o tempo limite definido uma função. Então, por exemplo, poderíamos ouvir uma função que vamos chamar, hum, relógio stub abastecido Onda, vamos fazer algo como botão iniciar. Está bem. Disse tempo e este dedo tem cronômetro. Começa depois de um segundo. Eu quero invocar disfunção depois, mas bem, nós precisamos enviar o valor inicial deles. Então devemos desinfectar a função, e precisamos invocar. Agora este cronômetro começa com cores teimosas. Então sabemos o que queremos onde podemos inserir nosso novo valor e o valor inicial. Certo, então vamos enviá-lo para cá. Bomba. Estamos agora, aqui. Certo. E precisamos declarar as coisas que acabamos de enviar aqui com parâmetros. E agora você pode, por exemplo, as mesmas coisas que fizemos aqui. Então, vamos diminuir atingido por um. Então, como podem ver agora, depois de um segundo, diminuiu em um. Certo? Está funcionando assim. Só o envolveu uma vez. E eu gostaria de invocar a mesma função novamente. Como fazer isso. Vou invocá-lo novamente aqui. Certo. Então eu poderia digitar coisas como início do cronômetro, e eu poderia sentar a estibordo inicial e valor inicial. Ah, assim porque fora da documentação, é inferior à direita, então significa que temos liberdade para fazê-lo. E agora, hum, não está funcionando bem, porque o problema é que ele foi executado quase instantaneamente e porque nós não esperamos por nada aqui neste lugar. É por isso que precisamos de algo com isto, que pode definir o tempo limite e vamos decidir, tipo, tipo, definir o tempo fora do bálsamo. Depois de um segundo, quero invocar isto. Então precisamos de uma função animus porque você quer enviar argumentos. Então, assim em nós não precisamos pai é aqui e agora Bam, bam! Em um cronômetro. Não funcionou porque eu mandei o errado porque ele, uh, sim, está funcionando. Final. O que você tem ainda não significa que quando nós fizemos isso iria funcionar bem, certo? Quando fez isso, porque admitir que é ainda pior porque não, este script não sabe o que ele deve executar primeiro, e os problemas vêm. Ok, então é boa idéia peso do dedo do pé quando você está fazendo algo assim e eu tenho Teoh livre um zero e está contando para baixo o problema que temos agora é como pará-lo. Bem, eu sugiro criar uma variável global mata o tempo limite variável. Re Ference. Identifique-a e podemos atribuí-los. Identifique-a aqui. E usando isso, podemos verificar o mesmo idioma aqui. Se isso existe, eu quero limpar o tempo assim. Livre para Well, isso está mudando para 124. Vamos trocar 12. Agora podemos mudá-lo facilmente, direto para o que quer que seja. Muito 10 relógio muito rápido, polegar ruim. Ok, então está funcionando. - Tudo bem. Agora precisamos também parar quando nosso número está começando. O valor é menor que zero. Então, queremos voltar. Agora não precisamos limpar o intervalo como fizemos. Só precisamos parar a execução das instruções depois disso. Certo? Porque essas instruções aqui é realmente o que vai ser executado. O Onley. Se soubermos voltar aqui direito, porque retorno significa que estamos excedidos estavam saindo da função. Se você não outro não entender isso, você deve assistir novamente lições sobre a função. Agora, quando escrevermos dois, vai parar em menos um, então não mudamos aqui e você tem até zero e você pode mudá-lo. 13. Fácil para outro número e está funcionando bem. Então, como você pode ver, você pode fazer as mesmas coisas com o tempo limite definido. Mas eu sugiro usar define um tempo limite. Bem, Bem, principalmente quando você quer executar algo apenas uma vez. Logo depois de algum tempo. Como você pode ver com esta solução, temos uma variável global. Isso não é bom. Você deve evitar o máximo que puder Global of Grable. Por quê? Porque se você tivesse homens fora deles, você teria problemas para se conectar. O que está onde? Está bem. Coisas como muito impulso global também pode tornar o seu casaco muito difícil de depurar. Ele pode trazer muitas caixas que são realmente, muito difíceis de detectar, especialmente em javascript. Então tente o dedo do pé, evite. Ok? É melhor usar algo como o intervalo nesta situação. Ou você poderia fazê-lo maneira ainda mais profissional por invólucro construtor função na criação seu próprio objeto cronômetro. Certo, isso é só uma lição. Muito obrigado. 44. Eventos de tempo - a versão: Olá. Hoje vou mostrar-lhe como atualizar o seu casaco para que pareça mais pro maneira que você vê decodificada. Fizemos na última lição. Está funcionando bem, certo? Para um pequeno projeto, vai ser um bom casaco. O problema acontece quando você tem mais pessoas trabalhando com você. Você está se divertindo? Apenas muitas funções em seu site. Porque você vê, nós temos agora aqui um grupo da Arábia. Agora imagine que teremos ainda mais deles e teríamos o homem. Amém. Amém. Evens em nosso site. Muitas coisas que estariam em nosso casaco aqui agora e agora. Você teria problemas para se concentrar para encontrar o que você quer fazer. E agora já imaginamos que você gostaria de ter mais de um Stop o quê? No seu site. Certo. Você gostaria de contar até zero porque você quer, você sabe, rastrear se algo está no leste, finalmente terminar direito. Você tem bom, por exemplo, uma pessoa que está jogando o jogo e quando ele pode começar a construir com, nós temos algo. O desconto do dedo zero. Mas ele pode construir muitas coisas ao mesmo tempo. Certo? E teríamos muitos contadores. Portanto, gostaríamos de ter muito reutilização. Able chamou, por exemplo, para situações como essa. E então é uma boa idéia para começar a programação no objeto que orientou maneira. Então, como fazer isso? Presumo que você já tenha assistido todas as lições possíveis sobre funções e objetos nas primeiras seções das cicatrizes. Então, por favor, não volte porque isso vai ser coisas avançadas. Então, a primeira coisa é que devemos criar um construtor constante de função. Chamamos-lhe, por exemplo, cronômetro. E o que queremos fazer? De que estado? Vamos levar isso sob o comentário, queremos criar um cronômetro depois de carregar nossa janela. Então var ainda butch New stop, que Ok, e agora quando alguém clicar no início inferior, queremos executar stub. Veja isso, e agora podemos, por exemplo, fazer algo com os métodos que vamos criar em função. Eles pensam que nós queremos fazer nós queremos começar, então nós devemos criar uma função que vai ser arranque a frio ou nele, algo assim, certo? Então vamos fazer isso começar igual a função neste começo. Então nós não temos nenhum método dentro da nossa classe, que é chamado de início e que deve iniciar o nosso programa. Então ele deve iniciar a rolha, ou deve, você sabe, inicializar primeiro algumas coisas. A primeira coisa que ele deve inicializar é o valor inicial, que é agora começar onde? Em nosso texto de entrada de valor inicial, que devemos, você sabe, copiar. Aqui é diferente. Então, depois de cada vez que clicamos, devemos obter o valor inicial, e devemos enviá-lo fazer aqui. Então, devemos cuidar disso aqui. Devíamos ir. Então faça algo assim. Então nós temos isso dentro do nosso objeto, certo? Podemos falar com o reboque que esse cara lá dentro quando estamos criando a estibordo, devemos enviar um cronômetro, conselheiro. Então sabemos onde gostaríamos de mostrar as coisas lá dentro. Então devemos fazer coisas como este manipulador de cronômetro em Bem, assim. Não. Certo, então quando estamos criando, estamos enviando para cá sob bomba, e ele vai para aqui, e nós deveríamos, você sabe, mudar esse tipo de aqui. Cronômetro de relógio Stub. Você também está aqui. Também está aqui. Desculpe. Caçador de teimosos. Ok, então estamos começando temos o valor inicial. E as funções iniciais também devem iniciar stub butch mais tarde. Então deve invocar isso que parar, começar, parar, assistir. Que vai ser aqui e disfunção aqui deve o que deve entrar em Stobart manipulador e mudar a energia html dele. Isso está começando? Muito. Qual é a coisa legal? Notou que não precisamos passar valor aqui, certo? Porque temos todo o acesso a ele através das variáveis aqui. O legal é que essas variáveis são fáceis de acessar. Sabemos que elas são exatamente as variáveis que estão conectadas ao objeto que será criado através desta classe, certo? Não é em algum lugar como aqui, então podemos até criar oh em algo. Este direito desta vez fora identificação referenciada. Não está dentro dela. Sabemos exatamente isso. Está ligado a ele. Ok, então nós temos isso. Agora estamos aqui, e começamos. Então vamos ver. Como você pode ver agora, quando digite iniciar o valor inicial no valor inicial. Exatamente valor. Então devemos fazer dessa forma. Ok, então quando mudamos agora, nós matamos pelo menos esse número está mudando. Certo? E agora precisamos aconselhar como contar. Precisamos apenas definir o tempo, certo ? E precisamos executar a função que este ouro o quê? Depois de um segundo que é chamado de início restolho. Só precisamos invocar a mesma função aqui. O problema é que quando fazemos algo assim, não vamos fazer. Você pode ver a bomba. Não está funcionando. Por quê? Porque esta palavra-chave é uma referência no reboque. Disfunção, não morta. Se quiser fazer referência a este lugar, devemos fazer algo assim. Devemos criar uma variável temporária e designada para comer esse objeto. O objeto em que você estava trabalhando e fazer algo assim. E como você pode ver agora está pronto. Não vou, não vou trabalhar. O problema é que não diminuímos o valor de você. Ok, vamos ficar loucos. 14 13 12 Bom bom bom bom pára-choques. Ok é tão embaixo disso. Então, porque você pode não acreditar em mim, isso não foi um problema. Como pode ver, não está funcionando. Temos feito apenas vale um porque, bem, nós condenamos diminuiu. Isso começa. Começamos assim e não está funcionando. Temos que usar esse self 14 13 12 e vai contar enquanto Gers não pararmos, então temos que pará-lo. Certo? Então vamos criar uma função que chamamos de parada igual a função e o que temos que fazer Temos que limpar o tempo fora desta vez, ref, eu d Mas nós não temos isso. Mas podemos levá-lo muito longe. Então nós podemos apenas algo assim e nós temos agora. Certo, Pretties? É fora. Nós podemos obtê-lo direito em todos os lugares em e bem, como agora em voga Nós só precisamos de garrafa estrela parar eso em riacho ele chama função e nós apenas fazer stub assistir Stop! A coisa legal que nós podemos atribuir Evens fora desta coisa aqui é que você pode agora atribuir este próprio klieg toe qualquer lugar que você quiser, certo? Você pode parar de estar no lugar que quiser por que outra figura? One Então você também pode pará-lo manualmente, certo? Paragem de estibordo congestiva e vai parar e o tempo por qualquer coisa. Então comece e agora podemos parar . Está funcionando. E também, quando começarmos, não queremos que aconteça. Então algo assim não acontece, certo? Isso admite ir mais rápido, às vezes saltando. Nós não queremos. Barket, se não quisermos ensacá-lo, devíamos verificar aqui, certo? Se isto existir desta vez fora projecto de ideia, queremos impedi-lo. E o legal é que não precisamos do dedo do pé novamente. Faça algo assim. Nós podemos apenas envolver os lados da função disso. Pare com isso. Pare com isso. Eles poderiam pensar na solução. É quando você adere algo que eles chamaram aqui, certo? Porque podias fazer-te alguma coisa. Quero ter mais coisas aqui, como alguns cheques ou outras coisas assim. Então, ah, você sabe, tudo será mudado também neste lugar para que possamos reutilizar nosso casaco mesmo dentro do objeto. Então, agora, quando começarmos, podemos mudá-lo muito facilmente. Algo no dedo do pé? Não vai ser apoiado. Certo, então a última coisa que precisamos fazer é o cheque. Se isso for menor que zero, se sim, então precisamos parar de executar qualquer coisa depois das linhas algo para retornar. Ok? precisamos sair da função. Então agora você pode ver 210 E isso é tudo olhar tipo de jogo. Agora, imagine que você gostaria de continuar. Então, por que é tão difícil para o país fazer uma função para continuar? Qual deve a função para continuar o de repente apenas envolvido isso? Sim. Então, dias que começam Parar. O que? Outra vez? Quero estudar bem o jogo. Só três dias. Ah. Certo, então só precisamos do fundo. Botão Continuar, continuar. Precisamos saber. Coloque a garrafa dele. E quando alguém se precipita, queremos parar. Cuidado com o dedo. Continuar. Então está indo para baixo. Quando paramos, ele parou. Eu não continuo. Sua continuar com apenas reutilizado. Eles olham, e tudo é que ele está dentro de um lugar. Este é o poder da programação orientada a objetos. E a coisa mais legal é agora que você pode ter o quê? Outro relógio de canhoto, certo? Que você poderia atribuir a outra coisa para algo novo que você poderia atribuir a muitos lugares mesmo tempo. Tudo bem, você pode reutilizar o co quantas vezes quiser. É por isso que coisas assim são muito legais. Onde você poderia usar, por exemplo, algo assim. Muitas vezes para criar, por exemplo, ganhos quando queremos contar as coisas. Certo? Agora estamos contando assim. Isso que estamos mostrando, você sabe, quando tipos como esse temos 15.000 e 123. Há um número grande, mas pode mudar esses dois, na verdade, certo? Você pode usar, por exemplo, um objeto de data para encaminhar. Bem, então eles iriam se opor mais tarde. E você sabe, você não tem habilidades poderosas para criar coisas que serão fáceis de usar. E você pode mudar mais tarde que são capazes de ler. Realmente? Você está se tornando especialista. Todos depois de cada lição, você vai ser ainda melhor. Você só precisa treinar. O que eu gosto que você faça agora é que você sabe, normalmente o estibordo está funcionando assim. Com isso, quando você clica em parar, Você não está parando mesmo instantaneamente. Mas você não é o que é. Adicionar Inc. Este número depois de cada e quando você parar novamente, você em outro número para algum tipo de texto, certo? Você quer que você saiba, por exemplo, ver o quão longe é que seus amigos estão errados. E você é igual a mim. Parar coisas, coisas, coisas, coisas. E você quer ter todos os momentos, todos os momentos, certo? Então você pode fazer coisas. Tipo, se coisas assim você só precisa saber o quê? Atualize a parada inferior. Você só precisa que Teoh usou as informações do valor inicial aqui. Certo? Você pode obtê-lo. Você pode criar uma função. Nós cortaríamos esses valores aqui o valor real, e você poderia apenas inserir alguns. Certo. Esse é o poder, certo? É bastante incrível. Faça isso como um exercício. Se você tiver algum problema, por favor, pergunte. É uma lição necessária. Muito obrigado. 45. Como valorizar formas: Olá. Hoje vou mostrar-lhe como muito dia que os dados colocados em entrada pelos usuários fora de seu caminho ao lado de como dedo do pé torná-lo assim As coisas que são tipo aqui são devidamente apertadas. Precisamos informar o usuário que algo está errado. Então ele não perde tempo, quando ele mandou e eles grilos, ele deveria estar lá, você sabe. Mas aqui está algo errado, ou mesmo nós poderíamos pegá-lo. Quando ele apenas muda o direito de importação , será ainda melhor. Mas você tem que se lembrar, antes de entrarmos nesta lição mais profundamente que verificações antigas, todas as condições que farão são apenas para o usuário. E você tem que lembrar que não importa um teste de segurança. Ok? Sim. Você pode simplesmente desativar o JavaScript. Podes fazer o que quiseres com o Jarvis. Mantenha quase assim você pode Hargett muito fácil. Então você tem que lembrar que você tem que verificar todos os valores novamente no lado do servidor. Então, por exemplo, no PHP, Ok, você está fazendo todas essas coisas para tornar a experiência do usuário em seu site. Melhor. E é realmente muito, muito boa idéia porque às vezes, quando as pessoas digitam um formulário grande e, em seguida, ele fica recente, eles simplesmente saem do site. Então você está perdendo um carro um dinheiro, por exemplo, quando você tem uma loja sem algo assim. Ok, então vamos fazer isso. Temos que formar, que eu chamei meu formulário e aqui temos um bom número. Texto completo, nome do campo. É algo do meu formulário de fundo com o valor enviado. E nós temos a informação DIF que nós damos alguma contribuição que está aqui, que algo está errado ou algo está certo. E nós temos alguns até que nós pudemos passar nesta lição. Primeiro, vamos pegar algo do nosso telefone. Essa é uma boa pergunta. Como obter, por exemplo, essa entrada deste formulário, certo? Não, faça isso. Nós estamos indo para digitar documento, obter uma forma de mente idéia barra de limão. E aqui está algo muito novo. Você não precisa saber a identificação, um herói ou uma classe, a fim de obtê-lo. Isso é realmente muito útil, e é boa idéia saber que quando você tem um formulário, então cada elemento aqui você pode obter através da escrita, por exemplo, algo como elemento zero. Certo, elemento zero é este elemento. O problema sobre esta solução é que você sabe, estes são limão. Estes agora segundo não é o lado justo. Sabe, Sabe, quando você adiciona algo, pode ser uma solução problemática. Então esse pensamento é útil somente quando você quer, por exemplo, em eventos de todas as entradas, certo? Então você poderia passar pelo loop usando isso. Eric, o legal é que você pode Onley. Você pode digitar esse nome humano. Ok, então nós temos algo como, ah, ah, obter elemento por eu d meu formulário sóbrio aqui dentro. E podemos começar apenas digitando o nome fora do valor do atributo ah. Certo? Andi, tudo funciona bem. Então medos numéricos, Ok, algo assim. Isso é enrolado. Hum, então nós temos um campo de texto essas músicas em. Temos que parar, submeter , mas nos submeter, mas assim e temos boas informações. A informação está sendo diferente. A informação está dentro das profundezas, certo? Então não entramos no nome, certo? Como você. Certo, então é assim que funciona. Não podemos acesso muito fácil, por exemplo, número, campo e vamos passar por todos esses uniformes. Então, a chave abaixada, como funciona? Então a chave para baixo vai mesmo acontecer para qualquer imprensa, qualquer tecla para baixo. OK, então vamos, por exemplo, chegar ao html interno info em Vamos criar uma variável simples, por exemplo, eu E vamos aumentá-la dentro dele, como você pode ver quando eu doloroso burro html interno para baixo fora do curso na chave para baixo. Como podem ver agora, quando minhas chaves caem, essas que eu valorizo são incorretas. Por que vão as minhas chaves? Não está bem, você também tem a mesma coisa como a Guerra Fria. Isso chamou a tecla pressionada. Você pode ver que também está sendo aumentado. O problema sobre a solução é que você também pode obter a tecla que foi pressionada corretamente . E quando temos a tecla pressionada, como você pode ver, podemos obter qual tecla foi pressionada. Mas o problema é que quando eu chuto as teclas de seta são e a folha de controle em outras crianças assim,aimprensa macaco não vai me ajudar, certo? folha de controle em outras crianças assim, imprensa macaco não vai me ajudar, E por causa disso, você só sabe que você tem que usar a tecla para baixo, a fim de obter as crianças como teclas de seta. Ok. Então, como você pode ver no objeto par, você tem algo com isso chamado em que, que diz, que tecla foi pressionada sobre esses vários nós informações porque fora essa informação pode dizer se nós ah, você deseja adicioná-lo à importação. Ou talvez eu queira dizer em breve que você sabe que algo dá errado. Você digita algo errado. Você tem que se aposentar, querida. Ok. E há um problema fora do curso na Internet. Sprah seis e odeio você tem reboque, criar uma variável como pressione personagem, por exemplo, em algo assim. E porque em todos os navegadores da web como o Internet Explorer 6 e 7, você tinha que usar o casaco chave com a maiúscula grande. Ok? E você tem o bem. Além disso, algo radical de caráter chamado salários. Quase o mesmo mentindo esses caras lá em cima. Mas eu conheço Judy City, OK, é quase tempo não suportado. Vai ser apagado nos novos navegadores. Isso só para que você saiba, que algo assim existe. Ok, então nós temos macaco para baixo na tecla pressione e se você tem algo que é chamado macaco para cima e estes muito úteis porque macaco para cima vai apenas ser invocado. Quando? O que? Quando você se mantiver. Ok, pode ver que tenho que soltar a chave. OK, se eu não levantar a chave, a chave do evento não vai ocorrer. Temos também algo vai discutir em quatro curso. Hum, está mudando de volta para isso, e como você pode ver quando nos concentramos, então significa que quando clicarmos aqui, ele será chamado. Ok, nós também temos algo com isso chamado Blore, que significa que quando você perde o foco, ok, então quando você apenas mudá-lo para qualquer outro lugar ok a partir dessa entrada, e você tem algo com isso chamado de mudança que é muito útil porque quando nada muda e você muda para outra entrada, ele não vai ser invocado. Mas quando mudar algo , será invocado. Então, como você pode ver agora, não é não vai ser invocado. Certo? Mas quando adicionar algo ou apagar algo , será invocado. Está bem, então é assim que estão a funcionar. E agora vamos treinar um pouco. Vamos, por exemplo, criar um programa que vai dizer isso. Ei, você sabe, eu quero apenas números aqui. Então, como fazer isso? A primeira coisa que eu acho que devemos fazer é, você sabe, usar a tinta até. Por quê? Porque queremos testar depois de digitar, certo? Bem, se o valor está errado, então você sabe que algo está errado. Não queremos fazer isso. Por quê? Algo está sendo pressionado porque será horrível porque você precisa. Só que essa função seria invocada muitas vezes, certo? Não é, não é útil para nós. E há uma função que é chamada Não é um número. Ok, então os stands para não é o número, e ele e ler retorna através quando o valor enviado aqui não é o número que eu sempre criar. A função que é chamada não é Humber, e leva o valor para verificar e nós vamos retornar. Apenas a coisa que é retornado por não é um número de valor para verificar, mas queremos o ST o valor lógico de verdadeiro para falso. E agora parece melhor. Sabe, eu acho que é muito ruim que eles chamaram isso de “Isso não é um número”. Ok. Porque é mais fácil para você sentir que é algo. OK, OK, está tudo bem. Vamos voltar. Verdadeiro. Se algo não está bem, vamos voltar. Falso. Mas aqui é como se não for um número, então retornar verdadeiro. E você sabe, quando você está verificando apenas uma coisa, não vai ser isso não vai confundir você. Mas se você tem muitos valores para verificar e você está fazendo conjunções alternativas, isso pode tornar mais difícil para, você sabe, pensar Cleary ok, em maio levar a erros. É por isso que estou fazendo essa função útil para nós. Isso só vai verificar se algo é um número, então podemos chegar a um cheque. Se algo for o número. Então podemos fazer algo como Eve, algo é saber o número e queremos conferir isso. Sinto-me a ponto de distância. Então Number temia que essa tese se referisse à febre numérica agora, certo? Então há que o valor não é um número. Então eu quero fazer algo. Caso contrário, quero fazer outra coisa. E agora temos que decidir o que queremos fazer? Se não é o número que podemos dizer, por favor digite o número, certo? Se não é o número que podemos dizer, por favor digite o número, Eu sou. Só quero um número aqui. Caso contrário, nós estamos apenas, você sabe, fez todas as mensagens que foram mostradas aqui e nós devemos essas para mudar, por exemplo, a cor. Então esse estilo, cor de fundo vamos mudar para, por exemplo, certo, e depois, você sabe, fazemos tudo bem. Vamos mudá-lo para verde, como você pode ver agora, quando digitamos aqui eles têm ou o que está errado. Mas quando digitamos um número, tudo está funcionando bem. Você pode digitar o número que não quiser. Caso contrário, temos boas informações, por favor digite o número. Poderíamos resolver este problema também uma maneira um pouco diferente. Acho que é uma boa ideia fazê-lo dessa forma. Que estamos verificando depois de digitar um fora da letra. Ok, mas você também sabe, diesel Oh, quase fazendo qualquer coisa aqui. Você sabe, nós gostamos quando eu digitar chave. Só não quero que esteja aqui, certo? Só não quero que ninguém te ponha algo assim. E poderíamos fazer direito. Poderíamos, por exemplo, o A um padrão comprovado. Quando você usa algo assim, você pode digitar melhorar unti dobra. Bem, o problema é que nós temos isso depois que burro em Key Job mesmo é invocado depois que você tem sua chave, Abba, e já está aqui. Então temos que mudá-lo. Então, por exemplo, na tecla para baixo e que era conceber são minúsculos. Sendo nada funciona e porque agora eu posso fazer qualquer coisa matar Ah, eu posso usá-lo para, por exemplo, fazê-lo apenas se o garoto que foi enviado aqui é como o que eu sou que este, por exemplo, sabe o Número certo? Isso é para um segundo sinal aqui para a criança em seu HTML, o valor fora do qual, vamos tomar isso sob o comando por um segundo. E como você pode ver quando digitamos aqui, estamos recebendo algum tipo de casaco único, e precisamos usar o Unicode. Nós poderíamos, você sabe, fazer algo como, Hey, o que estes na sob o valor 57 temporada sob o valor uh, 58 outras coisas como essa. Mas também podemos usar o objeto sprink, que tem um método. Vamos falar mais sobre objeto corda mais tarde, mas há um metal que é chamado e é muito útil do casaco de personagem, que vai mudar dias para o personagem. Então, quando a atualizamos, como podem ver, quando escrevo algo como letras, elas estão aparecendo. P: Para que possamos usá-lo. Você pode apenas comparar e você pode reagir a ele. Então, se estes são números, está tudo bem. Se não, não está tudo bem, então podemos fazer algo assim mesmo, é comum fazer. Vamos fazer isso sob comentário, e se algo que vai ser digitado aqui em breve para este personagem, então vamos mostrar ao rato o contrário verde direito. E, claro, precisamos parar quando ele estiver errado. Ok, eu estou refrescante e isso está em números de segundo tipo. Mas quando escrevo quando tento fazer outra coisa, não funciona. O problema é que até apoia o presidente trabalhando. Então você tem dedo do pé. Verifique também se esse cara aqui certo, hum e ao mesmo tempo, em que não é igual e backspace está abaixo de oito. Ok, então agora quando ele primeiro, pelo menos eu posso no espaço dos fundos. Mas também devemos permitir que você saiba, digitando, por exemplo, isso ou não. Talvez queiras permitir que alguém digita o professor, certo? Número inteiro completo. Não quero ter o número flutuante. Certo? Mas se você quiser permitir que ele número flutuante, então você tem que dizer também e, ao mesmo tempo, que não é igual à filha desse valor que é 190 você pode obter esses valores digitando Unicode JavaScript no e Google. Mas você também pode muito fácil. Basta pegá-los do garoto. Um de vocês nem sequer está certo yuk injusto. Veja o que está sob este quando o seu tempo para apenas baseado. Ah, quero dizer, isso é que você pode ver agora nós podemos amarrar que nós simplesmente não podemos digitar letras. Há. Claro, alguns encaixotados é assim, por exemplo, eu posso digitar shopping no garfo da Cassie. costume. Agora, por exemplo, verificar o que está no dese que o valor depois, por exemplo, eu sei que alterá-lo para outra entrada O r. Talvez você poderia apenas verificá-lo depois de cada vez na tecla para baixo função é, você Sabe, executado não faz muitas coisas que você poderia fazer direito para verificar coisas como essa. Mas a maioria das pessoas que não tinham algo assim. Você poderia apenas partes, você sabe , esse valor para a internet. Inteiro desligado flutuador. Então, você sabe, tudo depende do que você quer fazer em Dwell Askew pode ver agora quando eu digitar algo errado, é vermelho, mas não deve ser lido instantaneamente. Eu deveria, você sabe, provavelmente nem aparecer na rampa vermelha porque, bem, quando eu digitar algo errado, ele nem vai aparecer. Certo? Então temos sempre o número certo aqui. Na minha humilde opinião, este não é o melhor caminho a percorrer. Eu acho que essa interface não deveria saber, isso permite digitar algo dentro porque, você sabe, o usuário pode não saber o que está acontecendo, certo? É melhor, você sabe, depois de cada chave para você sabe, cima, mostrar a ele a mensagem, a coisa vermelha ou algo assim que quando tudo estiver bem, você pode mostrar, você sabe, alguns leva, tudo está certo. Sabe, na minha humilde opinião, algo assim vai ser melhor. Melhor experiência para o seu usuário. Ok, isso vai fazer ouvir, muito obrigado. 46. Botão de de envio de parta: Olá. Você deve ter notado na última lição que nós ganhamos nossas soluções para o problema em verificar com os números. Quando escrevemos algo crescido, ainda podemos enviar o formulário e tudo está situado. Isso não é o que deveria acontecer, certo? A pessoa que você conhece, visitando seu site deve apenas ver a sopa mensagem. Digite o número. Se você não digitar o número, não poderá enviá-lo. Ok, então até que tudo esteja bem, ele não deve ser capaz de enviá-lo. E você já sabe que você só pega a sopa no meu botão firme e então você usa o próprio evento clique e você começa o mesmo objeto e até mesmo objeto pode sempre evitar coisas padrão , certo? Ações padrão de defesa. Agora, isso não vai mandar o que quer que esteja aqui. É certo. E não é. E precisamos saber se estava tudo bem aqui. E se pudermos criar uma variável, está tudo bem? E por padrão foi dito que também. E nós mudamos, você sabe, se tudo não estiver bem, então se isso não for um número com a mudança para falso, mas se tudo estiver bem, vamos mudá-lo de volta para verdadeiro, certo? Então, por causa disso, quando digitarmos o seu algo como você pode ver, por favor digite o número. Não vai ser enviado, mas quando você digitar o número, ele vai ser enviado. Mas nós dissemos fora do curso. Verifique mais tarde aqui. Certo. Se nem tudo estava bem, então impediu. Então, como pode ver, não será enviado. Foi enviado. Ok, então isso é uma boa coisa a fazer, porque mais tarde, quando você quiser verificar por exemplo campo de texto, alemão outro você sabe, você pode ter qualquer coisa como verificação dar o labirinto direito do possível. Diz. Raidi. Sabe, esse era o nome corretamente rotineiro ou algo assim. Você pode verificar coisas assim, E. E você sabe, se mesmo um deles está errado, você pode apenas dizer que essas quedas muito aptas e você sabe que isso vai apenas impedir essas ações , e vai mostrar ao usuário a mensagem, direito que você tem que mudar algo como um exercício. Eu gostaria de, você sabe, fazer algo com o campo de texto e, por exemplo, verificar se esta é uma única palavra. Se há um espaço dentro, não vai ser, sabe? Bom. Você tem que definir o dedo do pé está tudo bem? Ok. Falha do dedo do pé e como fazê-lo. Como verificar se há um site de espaçamento? Olhe, campo de texto que insere o valor. Ele é realmente uma matriz. Você pode usar, por exemplo, objeto string para ele. Você pode ler sobre isso no, uh, Google. Ou você pode assistir o vídeo sobre o objeto de sequência que estes mais tarde no próximo conjunto próximas seções e você pode simplesmente passar por todas as letras dentro do mundo dentro do valor de entrada. Bem, e se há um espaço, você só, você sabe, mostrar uma mensagem. Algo está errado. Caso contrário, simplesmente não faça isso. Você tem problemas. Apenas pergunte. Você tem que treinar. Lembre-se, É muito importante que assim na lição. Muito obrigado. 47. Caixa de checkbox: Olá Hoje eu sempre mostro como marcar quais fora as caixas de seleção foram marcadas pelo usuário e como usar informações como que eu já criei. Por isso, não perdemos o nosso tempo. Uma forma e dentro dela eu criei um profundo e dentro do dia. Se houver um rótulo para cada um fora da entrada Então, quando você refilar no texto ao lado da caixa de seleção , você pode escolher os livros de cheques em torno dele, certo? É muito útil usar rótulos e todas essas entradas são caixas de seleção. E eu também adicionei e nomeie atributos com o nome do curso de valor. E você tem que lembrar que para os talões de cheques, você deve usar sempre o mesmo nome. E a diferença é que isso faz, certo? Agora, quando você vai usar o documento, pegue um limão pelo método I d e você obter o meu formulário e você riacho ponto, então o nome dos carros policiais você tem aqui uma área. Então esse cara está sob a área sob o índice zero em seus editos. 12 grátis para E você pode escolher esta entrada esta entrada esta entrada esta entrada Esta entrada e obter a partir dele, por exemplo, valor ou se ele está marcado ou não. Ok, então não é tão difícil. Então vamos, por exemplo, ir para o nosso resfriado. Como você pode ver, eu já tenho o meu telefone. Eu já tenho o submarino em batalha e eu já tenho a informação aqui, certo eso onde vamos colocar as coisas para o negócio para ver alguma coisa. Então vamos usar o eu acho que o Lope porque é a melhor idéia para ir para a surgir quando você está perdendo loop. Então quatro foram capazes eu igual a zero e nós eu é menor que a minha forma. E então podemos chegar ao que fazer o nome do curso Lente escura. Porque estes na matriz direita, eu posso fazer algumas coisas se vamos começar a ir para o em quatro e para o HTML interno e apenas digite aqui algo, minha forma causa nome e, em seguida, zero que bem, então eu não estou usando isso é olhar estrelas. Estou apenas atribuindo ao mesmo tempo a mesma coisa dos primeiros talões de cheques. Muito conhecido. Eu clico. Adicione como você pode ver, nós temos o valor aqui. O PHP sempre será Petri. Porque este primeiro e você também deve notar que este é o valor thes. Ok, dentro do interior, o valor do atributo, o valor fora do valor é PHP. O problema é que você sabe que a pensar que isso aqui dentro você chama um valor certo? E o nome do atributo também é valores sempre tem que dizer isso, mas o conteúdo desse atributo é a coisa que ele vai ver aqui. Ok. E, ah, não aqui. Certo, isso é só um rótulo. A dúzia de mães que escreveste aqui? Certo? Você pode fazer algo assim. Você sempre verá JavaScript nessa coisa. Esta é a única coisa que é importante, sabe? Ok. Então podemos usar algo assim. Por exemplo, até fazemos algo assim, certo? Mãe? É porque agora temos todos os valores que podemos. Há algo assim. Bálsamo. Como você pode ver, todos os valores que também podem usar algo bom é chamado de uma propriedade de verificação. Isto vai dizer-te o que foi verificado ou não foi enganado. Como você pode ver agora, tudo estava sob controle. Então temos lutado falso em todos os lugares, mas se eu verificar, por exemplo, grandeza? Sim. Como você pode ver, nós temos a verdade depois, você sabe, em Js de terra então você pode usar informações como essa muito fácil. A primeira coisa que fizemos de errado aqui porque não é eficaz. Devíamos criar uma cadeia temporária aqui,assim mesmo. cadeia temporária aqui, E devemos designar no final. Devíamos fazer algo assim no final. O resultado. Ok. Por quê? Falei sobre isso muitas vezes. Você quer fazer isso? Porque em nosso HTML está subindo poderes cada vez que você está lendo algo. Todo o conteúdo lá dentro vai dar a volta mais rápido agora, certo? Como você pode ver, quando mudamos algo aqui, também está mudando aqui que verdadeiro, falso. Então você pode usar informações como essa, faz o que fazer. Uma declaração condicional. Se for igual a verdadeiro. Então faça alguma coisa. A verdade é que não precisamos fazer algo assim. Você sabe, tipo é igual a através porque verificado vai voltar aqui. Verdadeiro ou falso. Então, se verificado é verdade, então nós temos aqui apenas através, então nós não precisamos, você sabe, fazer comparação aqui Q Como usar operadores especiais especiais Então, se Michael executar chamadas nome sob o índice ocular é verificado, então eu quero saber no JAG, mas no valor. E como você pode ver agora estamos apenas adicionando os valores que foram verificados por nós. Está funcionando bem. Podemos editar o final. Indo para algo assim, hein? Você pode ver é que eu acho que é muito bem, você pode frear linha, o que quer que você possa usar algo assim. Por exemplo, para adicionar coisas à sua cesta. Passeio temporário de cesta. Você pode então enviar essas informações também para a paz de pêssego sempre usando as drogas A. O legal é que não vai ser Dina Dynamic, certo? Você não pode Ah, as pessoas podem adicionar em seu site coisas. Nós juramos em uma espera. Então é muito legal. Pense em usar algo assim. Certo, só há lição. Muito obrigado. 48. Forma de rádio: Olá. Hoje vou mostrar-lhes como trabalhar com importações de rádio. As importações de rádio estão funcionando assim que você pode escolher apenas uma opção ao mesmo tempo. Certo? Você não pode escolher ambas as opções ao mesmo tempo. Você só pode escolher um deles. E isso é bom de usar. Por exemplo, quando você quer perguntar, você se senta. Você age em termos de serviço? Sim ou não? Certo. Então nós temos aqui dentro das importações Dave com o nome exceto ação, fora de termos, nome fora de serviço, e nós poderíamos usar estadias quando alguém krieg nele. Queremos marcar Alterar o atributo desabilitado aqui e o início. Eu gostaria que ele fosse desativado. Assim, também no início, devemos escolher o verificado onde a opção não. E quando eu clico no S, eu queria tê-lo não desativado. Quando clico em Não, quero desativá-lo novamente. Então temos que fazê-lo onde podemos fazer, por exemplo, algo assim entrar em expectativa fora dos termos de serviço. Então, minha expectativa de forma sobre os termos de serviço. E quando alguém clica no primeiro cara, eu quero invocar a função que vai mudar a batalha repentina. Desativado para o quê? Para não desabilitar para falso. E quando alguém clica no segundo cara, eu quero mudá-lo para, como você pode ver agora está funcionando bem. Então, é só uma lição? Bem, poderíamos acabar com isso, mas olhe por um segundo aqui. Não sei qual é qual. Sabe, quando eu mudo para algo assim, como você pode ver agora não está funcionando corretamente. Aceite os termos de serviço. - Não. E está habilitado. Então, algo está errado agora. Então não deve ser feito assim, sabe? Sabe, o Major ligou depende do que acontece aqui, certo? Alguém pode mudar algo na sua maior parte do tempo. Ele vai embora. Mas você é treinador, deveria ser melhor. A próxima coisa é que você sabe que é difícil t mesmo de Javascript aqui para ver se eu estou escolhendo aqui. O cara que deveria atirar trocando o dedo do pé do parto ou não. Então nós só sabemos sobre esta coisa sobre o porque estamos programando logo após um movimento não vai se lembrar. Então é uma má ideia usar algo assim. Também podemos usar os talões de cheques. Sotaque ou não, essa opção também disponível. E mas o quê? Estamos usando a escrita agora. E Teoh Well, como atualizar isso? Bom. Poderíamos ir ao Oh, essas coisas. Expectativa fora dos termos, fora do serviço, certo? E fazer algo assim de uma vez. Então, podemos registrar, evento usando, portanto, lope e uma vez toe cada elemento dentro da área assim, é muito poderoso, certo? O problema é que estamos definindo agora é falso. Então, quando criarmos o que quer que seja aqui, vai ser falso agora. Então precisamos usar a informação fora do elemento que Waas ela disse a eles que poderíamos fazer é, por exemplo, dis palavra-chave. Então estamos nos referindo ao que passamos pelo loop e, em seguida, usamos o volume. Por que valor? Porque nós temos agora aqui valor, valor, falso e valor para E ele vai funcionar? Como você pode ver , deveria ter. Você deveria estar trabalhando, mas não está trabalhando. Por quê? Veja, quando fizermos algo como esse alerta, você verá que ele cai aqui. E aqui temos a verdade. Então por que não está funcionando porque esse tipo de variável é string quando fazemos coisas assim , como você pode ver, não está funcionando. Além disso, vai funcionar quando chegarmos aqui. Em através. boliche, como você pode ver agora, não está desativado. Certo? Então, para Maggie, o boliche, temos que fazer uma comparação para que possamos decidir. Como se ele chamasse para Sim, verdade é igual a dois verdadeiros instintos. Sim, acho que sim. Como você pode ver Falls através igual a dois. Sabe, para nós parece o mesmo. Mas para o computador requer aqui exatamente o tipo de boliche. Como você pode ver agora está funcionando bem. E este cartão é universal porque você pode mudar. Você conhece a posição. Ainda vai funcionar corretamente, certo? Não precisamos de pés para cima. Ótima. Alguma coisa no nosso casaco? Talvez pareça um pouco mais difícil, mas depois de você trabalhar algum tempo com seu código JavaScript. Isto não devia estar a olhar para ti no coração, está bem? E você também pode não estar entendendo essa linha. Você precisa se lembrar que toda vez que você atribuir algo dedo do pé da chegada, a interpretação que vai primeiro executar isso para que este dedo vai ler, Retornar. Verdadeiro ou falso. E só vai assinar esse valor para aqui, certo? Então é assim que funciona. É a importação de rádio. Parece quase o mesmo assim. Caixas de seleção. Então essa é apenas a lição. Muito obrigado. 49. Escolha no formulário: Olá. Hoje vou mostrar-lhe como trabalhar com seleto, que é principalmente em livros frios Kamba. E parece assim, certo? Então, como usá-lo? Como adicionar novos elementos. Como verificar quais elementos foram escolhidos pelo usuário do seu site, como fazê-lo. Bem, para trabalhar com isso, precisamos saber que existem propriedades e alguns métodos que precisamos saber. Vamos seguir o foco em primeiro lugar, em como a conversa seleta está funcionando. Estivemos dentro de opções, certo? E há homens fora deles e você pode escolher todas as opções usando a propriedade options . Depois de obter esta seleção usando o documento get elemento por I d ou, você sabe, nomeando isso Então nós também podemos nomeá-lo digitando cursos de vídeo. E agora podemos conseguir empregos usando meu formulário aqui. Certo? Hum você pode apenas gostar do meu formulário e agora cursos de vídeo e pode usá-lo, por exemplo, que Zoller o que vemos? Como você pode ver, temos html selecionar um limão. Então estamos aqui agora e podemos ir para as opções. Então, a fim de ir para opções. Você só gosta dessas opções. E podemos escolher cada uma das opções porque esta é realmente uma área. Isso é porque agora estamos no alinhamento de opções HTML, que é o primeiro cara. E podemos ir para o valor do valor dele, por exemplo, usando o texto, e essa coisa retorna esse direito, o texto. Mas o texto é mais que eu estou acostumado a mudar texto dentro. Então, por exemplo, podemos adicionar algo a ah, a ele. Como você pode ver, nós adicionamos agora no final. Destexhe aqui, você deve usar mais tempo valor. O valor da propriedade está retornando o mesmo. Mas você não quer ter sempre o mesmo valor para descer para o PHP mais tarde. Ah, que você tem aqui, certo? E é por isso que você pode, por exemplo, fazer algo assim. E então o valor que retornamos a coisa que está escondida do usuário, certo? Você quer mostrar às vezes a um usuário algo um pouco diferente. Então é assim que você obtém o valor e agora nós também podemos obter, por exemplo, aquela coisa que é selecionada. Certo, então como fazer isso? Hum, nós poderíamos apenas fazer algo assim aquele índice selecionado. O problema é que, agora que você conhece jovens, não estamos comendo, não invocando nada que mude o direito. Vai ser boa idéia toe mudá-lo depois de cada vez que você mudar algo em seu assim como então como é a seleção mesmo chamado quando você mudar algo vai mudar o Isso é isso. Isso não é uma surpresa. Então vamos fazer alguma coisa. Meus cursos de vídeo formulário ponto na mudança é igual a função e podemos executá-los algo como esse alerta e é consumido. Agora, quando mudarmos, estamos sendo informados que poderíamos usar a informação aqui para gerá-lo. Além disso, não precisamos causar caixa de cada vez, e agora podemos apenas mudá-lo. Você pode ver que temos bom aqui agora o número fora do índice selecionado. Então nós também poderíamos usar essa informação para, você sabe, mostrar qual fora da parede e o cara que foi escolhido que salvou isso na variável. Então você sabe, você pode ver que seria boa idéia ter na variável temporária para que nós não temos dedo do pé toda vez. Pegue meu telefone, que cursos de vídeo que você pode ver agora ainda está funcionando, mas é um código um pouco mais curto. Então vamos usar essa informação. Então vamos para os cursos de vídeo que opções. E agora nós queremos ter aqui, você sabe, o cara do índice selecionado. Não aquele que nós, você sabe, tipo zero indo para ir. A costa do vídeo é o volume do índice selecionado por pontos. Então, quando você enviar algo, você pode facilmente verificar o que é bem escolhido pelo usuário. Só por, como pode ver, usar esta linha de código, certo? Talvez em evento de mudança, não é uma boa idéia, mas essa é a maneira de verificar o que era mundo falso escolhido pelo usuário. Mas você não pode fazer isso em sua própria mudança. Mesmo muito fácil e muito rápido. Só usando essa, aquela instituição legal como aquela, você pode fazer dessa maneira. E é apenas mais rápido porque isso vai, você sabe, sempre ter a opção que acabou de ser escolhida. Certo, é por isso que foi muito legal. Você pode usá-lo muito fácil assim. Está funcionando bem. Bom. Eu acho que também ao redor e cada vez que você faz algo PHP Maya escola sask em torno dois anos, certo? Está a funcionar. - Tudo bem. Podemos fazer o que quisermos com esses valores, certo? E você também tem funções que são muito importantes. O primeiro 1 é removido, que está removendo algo para que possamos digitar cursos de vídeo que removeu o cara no índice zero você pode ver agora nós não temos X html Que começar aqui é, e ele desaparece. Você pode usá-lo porque você sabe alguma coisa. Você poderia fazer um programa onde alguém digita algo. Informante. Você quer remover algo da caixa de combinação assim? E você também pode querer às vezes em algo Então você pode fazer cursos de vídeo dup em e aqui você deve ter um html limão opcional. O problema é que temos de o criar. Então tivemos que amarrar, por exemplo, nova opção que equivale ao documento. Criar elemento para que possamos usar agora o em uma demonstração de raiva. Bem, nós ligamos provavelmente alguns estavam trabalhando em torno, mas esta é uma maneira mais rápida desta vez. Ah, porque curiosamente vai reproduzir o casaco. Então essa é a melhor maneira de fazer isso agora. Uma nova opção que leva nós dissemos que, por exemplo, para passar e apenas adicionado direito assim. Como você pode ver, nós temos um D e agora escolas Bússola com um muito fácil Nós não podemos ser o começo que você pode ver agora é um começo. Mas não temos nada, crianças. Porque, você sabe, por padrão , esse cara foi escolhido. Então, no programa, perca uma batida. Surpresa. O que aconteceu? Então, também podemos escolher o índice selecionado. Podemos fazer um índice selecionado nesse cara, Inc. fazer alguma coisa. Cursos de vídeo que selecionou índice Defina-o como zero. Você pode ver agora Bússola é escolhida. Ok, isso é apenas uma boa lição. Muito obrigado. 50. Manipulação de corda: Olá. Hoje vamos falar sobre como lidar com uma sequência fora do caractere usando métodos de string porque às vezes você quer cortar algo da string. Às vezes você quer, por exemplo, substituir algo interessante. Encontre algo na string para que você possa substituí-lo mais tarde. Você quer, por exemplo, fazer algo do fluxo como uma letra Toby maiúscula ou minúscula. Talvez queiras fazer coisas assim. E você deve saber que existem muitos métodos que vão ajudá-lo muito tempo em sua jornada de lixo. Ok, então vamos começar. Temos aqui com eles. corda do Pereira assim. Temos boa dentro do e-mail enfurecido fora do objeto info que está aqui, e queremos agora verificar como todas as funções estão trabalhando em um exemplos práticos. Então temos uma cadeia temporária de dois anos. Você tem que saber que você pode criar fedor também assim porque este é um objeto, certo? Então vai funcionar da mesma forma que nós, que não estamos fora desse caminho. E agora podemos, por exemplo, verificar um qual é o primeiro personagem aqui? Você pode ver que é um direito. E se este fosse o meu nome assim? Como você pode ver, este nome está começando em minúsculas, certo? Uma carta e não é boa. Talvez alguém na sua forma, , coloque seu nome e sobrenome com letras minúsculas. Você não quer que eles sejam salvos assim no seu banco de dados. Então, é uma boa idéia, você sabe, colocá-los em posição vertical para torná-los em maiúsculas. Como fazer isso. Você pode usar, por exemplo, a função que é chamada para maiúsculas. Você tem que se lembrar disso. Sabes, esta coisa devolveu alguma coisa. Eu tenho algo como um direito como esse. Então estamos correndo de A para maiúsculas e isso pode ver que não é grande E quando fazemos algo assim, também vai funcionar como você pode ver agora é grande, mas fora do curso temporário, muito livro. Ele não foi mudado. Então, queremos mudar. Os Pemper são variáveis aqui. Teríamos que fazer algo assim. Ônibus. Em primeiro lugar, precisamos de alguma forma obter este pensar o resto fora da corda. Então, como fazer isso? Você pode usar para isso. Por exemplo, sub corda ou fatia de metal para que você possa fazer algo como Plus, e agora a partir do temporário eu quero usar o método de substância morto você que está cortando tantos personagens como ele não vai de para que lugar? E, você sabe, é como 01234567 Então nós aumentamos o primeiro cara. Então você quer cortar o segundo cara, certo? Se você não especificar o segundo argumento, ele iria apenas cortá-lo até o fim, ok? Inclusive especifique o segundo argumento. Então, se ele fez algo assim, como você pode ver, é cortar o dedo do pé nessa posição. Certo, e escorregas e escorregas. Sub string está funcionando da mesma forma, então você não precisa, Ah, se preocupar com isso. Fatiado tem boa e pouca vantagem, mas a substância é um pouco mais rápida. Na maioria das vezes porque a fatia da escola também pode, você sabe, cortar usando o negativo são número negativo. Então você sabe que podemos cortar da contagem final do fim. Mas acho que não é uma boa ideia. Faz o seu casaco horrível e difícil de ler, por isso é como se fosse o mesmo que você tem também algo bom é chamado sub string sem a tinta e isso pode ver que funciona da mesma forma. Mas a diferença é que você pode ouvir Colocar por exemplo para E chamamos cortar quatro caracteres daquele lugar para caracteres, não rebocar quarta posição. OK, então essa é a diferença. Está bem. E bem, vamos, por exemplo, criar um link como esse. A cidade Bay cursos de vídeo on-line que vêm. E por exemplo, temos aqui um curso sobre vídeo curso C mais explosão HD Emma assim. Está bem. E gostaríamos de conseguir apenas esta parte. Como fazer isso. Como obter esta parte do Você é tudo o que você está fora. Para fazer isso, você tem que fazer isso a partir deste lugar. Mas como saber que você quer gato de Ah, qual é o número de qual é o índice deste lugar? Certo. Bem, a fim de chegar a ele, você tem que usar o índice off ou último índice fora de Met it. Este ou este nesta situação quer obter o último possível corrigido assim. Então vamos usar o último índice, certo? Se você quisesse pegar o primeiro cara usaria o índice fora. Então ligar esse último índice vai retornar. Quando escrevermos algo assim, vai voltar. Vamos comentar isso. A posição deste corte de Beck. Então temos disposição suficiente que eles querem substituir deste lugar, certo? Então vamos apenas como colocar o chão sub cordas daquele lugar. E como você pode ver agora, nós temos isso deste lugar a partir do lugar. Onde está a barra invertida? Mas não queremos essa barra, então temos que seguir uma. E agora eu tenho a posição em que estamos, e esta é uma boa informação. Podemos usar a localização da janela para obter Onde está seu usuário agora? Então, se usarmos, por exemplo, como vocês podem ver algo assim, vocês verão que vocês estão todos aqui, certo? Então, se fizermos algo assim, como podem ver , no local, vamos fazer esta bebida. Como você pode ver, temos índice que html Então, como você pode ver, podemos facilmente obter Onde está a pessoa em seu site? Certo? Você pode usar essa informação mais tarde, vamos falar mais sobre coisas assim. Como propriedades de janela mais tarde. Também. Está bem. Você pode, é claro, usar coisas assim para outra coisa. Por exemplo, você pode ter muitas aulas, certo? Você pode ter classe 45, por exemplo, fronteira que, ah, cláusula que diz que ele tem que fazer isso direito. E então você pode verificar a altura leste um 4 a 6 dentro. Ou a fronteira é o interior? Se sim. E eu quero fazer algo assim, certo? Você pode usar a informação. Eu gosto disso. Usando o índice off último índice off porque se não há nada como nada dentro de sua string, ele vai retornar menos um. Ok, você pode usar informações como essa para coisas assim. Não vamos aprender sobre a divisão. Importava porque também é muito útil. Vamos imaginar que você tem e cadeia temporária como essa. E ele estava na página B com molho par, Js moído. Está bem. Algo que talvez até nós tenhamos que vir. Eu vi algo lá dentro. E você tem essa string vindo de seu banco de dados, por exemplo. Certo? Você tem algo assim. Se quer analisá-lo, sabe que pode. Você quer, por exemplo, Adicionado aos livros selecionados ou algo assim. Então é difícil fazê-lo porque teria que, você sabe, usar você sabe, o lóbulo e ir para cá. E, em seguida, quando há um tempero que você tem que criar em uma linha e no html X para estas áreas e, em seguida, no cais de praia a natureza complacente. E isso somos nós e faça-o manualmente. Já existe uma função como essa, porque estes situação muito comum situação comum . E, a fim de perfurar você, você está usando sua divisão importada, que está dividindo direito. Dividindo Ana. uma corda na área para que possamos fazer algo como dividir. Agora é um pouco. É uma variável. Temporário, tudo assim. Ok, então agora nós temos aqui, como você pode ver, X html na área temporal. Fora do curso. Agora temos que Else também no separador. Certo, então o separador entre todos esses caras é um espaço. Ok, então nós temos que x html o segundo caras ser HB Então nós temos um arejado agora e você pode fazer nós podemos fazer algo com estes vários. Certo, podemos mudar esse cara para, por exemplo. Hum CSS, certo, Então foi alterado, e agora queremos juntá-los novamente para que possamos variáveis novas strings iguais e queremos conectar temporariamente em eu juntar todos esses elementos dentro da área no reboque, por exemplo. Uma corda com as vírgulas entre todos eles direito assim e você não vai é que você tem agora excitantemente milipeia Ph b C s s sas grand Js Antes disso, nós tínhamos trabalhado. Tínhamos bússola PHP, mas sem todos esses comas em coma e estamos nessa mudança. Então podemos facilmente fazer algumas operações como essa. E é como você pode ver, muito claro que você pode substituir, você sabe, como se fizéssemos algo assim também poderia ver temporariamente que substituíssemos, e poderíamos substituí-lo. O que mandou para cá? Um argumento que diria o que responder. Então nós poderíamos, por exemplo, digitar x html e eu quero reprisá-lo para, por exemplo, html cinco, certo? E você pode ver um, substituindo calor aqui. Vamos mostrar que as 10 partes pensam, bem, não está aparecendo porque este substituto bem, está funcionando, mas está retornando a nova string, então não está funcionando nesta variável aqui. Você tem que salvar, você sabe, o novo valor no reboque. O mesmo muito abaixo para o novo em. Então vai funcionar em html cinco. Então é assim que você pode substituir algo. Também um muito, muito longe, muito rápido. Mas você não pode adicionar, por exemplo, agora em ah, depois de cada um fora desse elemento dentro do coma e do espaço, certo, como fizemos aqui. E, você sabe, você não pode compará-los vai fazer algumas coisas específicas como algumas coisas adiantadas, como com estas aqui. Ok, você tem também algo bom é chamado de sonho, e isso é realmente, muito útil para armazenar senhas vai às vezes quando as pessoas copiar pensa e eles têm parceled, por exemplo, no texto, para a maioria das pessoas fazê-lo da maneira que não há seguro. Mas como podem ver a taça deles. Terminei com o espaço aqui, por exemplo, e quando o amarraram na caixa de passaporte, os espaços interpretaram esse personagem. E o problema é que algo assim vai fazer o problema porque foi dizer a eles que você sabe, sua senha está errada e eles vão ser como, hey, mas apenas copo eu fiz porque ele não está funcionando. Então isso é uma boa ideia, dedo do pé. Sempre quando você tem, por exemplo, algo assim. E é claro, a senha. Por exemplo, faça algo como sonho. Vai remover estes espaços aqui. Certo, então quando o atualizarmos quando formos para o saco de bombeiros, você notará que não há espaço. Ele está certo? Quando fizermos isso sem a função de sonho, você vai notar que temos aqui espaço um espaço aqui e um espaço apareceu. Não mãe, não mais porque, bem, HTML está funcionando assim se você tem mais de um espaço, não interpretado direito. Se você quiser ter mais de um espaço, você tem que fazer a nota Brickell espaço cabine. Mas o sonho pode remover a maravilha aqui e a que está aqui ao mesmo tempo. É uma boa idéia saber também que você pode usar a pesquisa para pesquisar como o índice muitas vezes última índice off, mas é um pouco mais lento é melhor usá-lo? Só quando você usa algo como aquele objeto de expressão regular que falaremos mais tarde . E também é boa idéia que você pode obter, por exemplo, como aqui com algo que você pode fazer algo assim. Está bem? E vai funcionar muito bem, o problema é que esta sintaxe da quebra quebrá-lo. Mas com o Escudeiro, parênteses quadradas não funcionará nos especialistas internos. Seis e sete, talvez oito. Eu não me lembro exatamente, porque na maioria das vezes eu usava personagem no caminho. Ah, mas nisso um pouco, um pouco mais rápido, mas realmente muito pequeno. Uma quantidade muito pequena sem hitter era como milhares de operações e talvez seria melhor usá-lo, mas não é suportado em navegadores antigos. Você não deveria se importar com isso no caminho. Mas o problema é que, como você pode ver, quando fazemos algo assim, eu não sei exatamente. Ei, eu estou realmente pensando sobre o primeiro personagem deste temporário de ser capaz, você sabe, este ar, eu acho que aqui olhar assim não está me fazendo pensar que isso é uma corda. Quando olhamos para aqui, certo, temos que ir aqui, aqui para a linha 21 e olhar Oh, isso é assim que esta era a corda. Ok, então eu vou voltar aqui. E veja como esse Cody estava funcionando, certo? Se tivermos algo assim, podemos dizer isso instantaneamente. Ei, se ele está usando, se eu estou usando que ah importou. Deve ser uma cadeia de instâncias direita. Então acho que se chama. É mais legível usando este. Ah, nos novos navegadores da Web, essa coisa é suportada muito bem. Certo, essa é só a lição. Muito obrigado. 51. Como Dividir a cadeia no código: Olá. Um imposto muito longo deve ser dividido em olhos mentais no casaco, então o código é mais fácil de ler. Mas há um pequeno problema e preocupações. Qual é esse pequeno problema quando você clica em Enter, por exemplo Aqui, como você pode ver, se esta rede significa não lhe daria a solução que está certa, não funcionaria. Por quê? Porque o script do Java sempre espera de você. Você vai terminar sua corda em um online? Se você não fazê-lo, você tem que em você uma barra beck que diz, você sabe que a continuação da corda está na próxima linha. Ok, você provavelmente também notou que havia algo como barra invertida e o que é que isso significa ? A barra invertida e é o caractere especial que está dando lá enter. Mas vai ver que não vemos aqui e entrar em uma pausa. Tudo bem. E devemos dizê-lo aqui no casaco. O problema é que o Firefox não está interpretando. Por exemplo, o Google Chrome? Como você pode ver, quando você vai aqui é em duas linhas. Hum, vamos trazê-lo aqui. E isso é atualizar primeiro, como você pode ver é em linhas aqui depois de refrescar, mesmo que não é na vida. Ok, então você pode fazer entradas dentro do casaco assim. Barra invertida aan den. É útil? Talvez. Eve, você queria ter seu resfriado melhor aqui, certo? Mas o fato é que eu não me importo com isso. Você não deveria se importar. Além disso, porque você sabe que isso está dando tornando sua pele maior o para isso é a primeira coisa que não faz seu roteiro olhar melhor aqui. Torna-o melhor na procura no código-fonte. Mas segundo dedo, então a pessoa que vai usar o código-fonte é a pessoa que pode estar cumprindo algo para cada casaco de recursos que você tem uma fonte chamada que está aqui que parece muito corno bem claro. E é aí que você deve focar seu dedo do pé de atenção. OK, então o nada estava adicionando o especial corrigido assim. Mas caracteres especiais como esse às vezes são úteis porque a barra invertida é reservada. Quando você faz algo assim, como você pode ver, não podemos ver barra invertida aqui. Se você quer ver um cirurgião traseiro tem que fazer para trás cortar tais backsplashes e isso contra ele agora podemos ver um. E também você pode usá-lo para, por exemplo. Sabe, algo assim. Ah, eu quero citar uma coisa. Uh, o cara disse que o cara disse, que tal você pode ver que temos problemas. Ele está certo, porque estamos usando o Coursey duplo. Poderíamos usar algo assim, certo? Mas o que Divi deveria fazer algo que eu sou? Não está funcionando agora, certo? Porque você usa as duas letras agora, como os estroboscópios de maçã e a citação. Então a solução para este problema é barra invertida porque quando você faz uma barra invertida antes dessa citação ou antes havia pessoas antes do oponente para antes da citação você vai ver como resultado, o personagem que está depois da barra invertida, Ok, não importa revisado, usar estroboscópios de maçã ou citá-lo no início da corda. Então você deve continuar usando mais uma vez. Então, é provavelmente mais tempo melhor usado essas aspas duplas, mas isso não importa. Ah, vai ser apenas você pode torná-lo para que você usa na única opção a maioria das vezes de você sabe que seu código é mais fácil de lê-los porque você não está mudando você nunca em todos os lugares possíveis. E então você tem problemas de uma maneira que você tem que e acabou aqui do que no segundo. Muito bom. Tenho que gostar mesmo disso. Basta mantê-lo para a única opção. Então, nesta situação, se usarmos a maior parte do tempo a rolha dupla, a citação, devemos fazer algo assim e tudo funcionaria bem. Você também pode continuar casaco assim. Você pode fazer o Plus aqui. Ok. E também vai funcionar. Está bem, mas isto é um pouco mais lento do que a solução que te deram há um segundo. No entanto, isso também é mais suportado. Ok. Navegadores antigos que pensam que podem não funcionar por muito tempo. Ok. Não precisa de uma lição. Muito obrigado. 52. Regex: Olá. Hoje mostrarei a maneira mais poderosa de procurar suas cordas em seu casaco. Isso é muito importante porque às vezes você não sabe os dados que estão chegando até você. Você quer verificar exatamente se está certo? Então, por exemplo, quando você está tomando os formulários para a direita, então expressões regulares são muito úteis em situações como essa, você pode verificar se o e-mail é passeio. Você contrai. Se o casaco se o telefone está certo e outras coisas assim muito rápido e fácil usando algo com isso chamado expressões regulares, você também precisa lembrar que você pode usá-lo em qualquer idioma, porque ele parece o mesmo PHP e outros idiomas. Ok, então é uma habilidade muito útil. Então, é uma boa ideia aprender essa coisa. Ok, Então, por exemplo, nós temos algo como que índices e eu gosto de obter a partir deste índices no que começa com um e que tem que traçar, por exemplo, E então um número, certo, o índice Não é assim, por exemplo, algo que e como fazê-lo, ou talvez como chegar em números Lee. Como é que as coisas como essa maneira fácil e rápida normalmente teria que ir com, portanto, roupão e ir atrás de cada personagem e verificar. Há um personagem precedente parecido com isso. Se não, você tem que fazer algo como Imbaba blah, blah, blah, ele vai levar muito tempo, e você tem que cada vez para cada padrão que você pensaria para procurar em seu fedor, você teria que pensar sobre uma nova maneira de financiar as coisas direito, e nós temos algo com expressão regular. Vamos aprender. Como você pode ver, existem muitos métodos que você pode ver. O primeiro método é chamado de pesquisa, e, como o nome sugere, é essa pesquisa e retorna o índice off. A coisa que você está procurando em sua fórmula no padrão que você enviou para cá da série é tão certo, mas o que nós não queremos exatamente o fim é que você quer encontrar esse cara, esse cara, esse cara e esse cara Esse cara na cidade. Eu quero tê-lo em uma área e por causa disso vai usar a função muito, que é faz apenas combiná-lo. Ele tenta. É algo que se encaixa na fórmula. Se ele se encaixa com marchar eu vou escolhê-lo para a área, certo? Então, sim, isso é algo que precisamos usar. Então eu gostaria que os índices correspondessem. E agora temos que usar uma expressão regular. É um oleiro. Como você pode ver aqui, temos um texto muito bonito que analisamos em breve. E o padrão parece que você tem que usar as listas de barra invertida, backsplashes e dentro dele um parceiro que pode ser combinado de todos esses seres aqui e depois os modificadores. Então eu tenho que fazer algo assim. Mas estes barra invertida é pode ser ao lado um do outro porque, em seguida, é um comentário. Então deve ser assim. E agora, quando eu digitar, por exemplo, A, eu vou encontrar todos os possíveis A aqui. Quando eu faço algo assim muito capaz e, por exemplo, resultado. Então eu vou ter uma área dentro do resultado e eu posso mostrá-lo, Por exemplo, em info HTML interno. Como você pode ver, nós temos apenas um A. Mesmo que tenhamos Goodman fora deles, por quê? Porque muito, por padrão, vai encontrar apenas a primeira ocorrência. E isso é uma coisa boa porque não vai perder seu tempo, certo? Então, se você quiser procurar por mais, você tem que usar um modificador. Aflac como aquele G da Global, procurando através de força total com as coisas assim aqui, como você pode ver agora, se pudéssemos encontrar todo o possível A em nossa força que temos esse cara, esse cara, Esse cara e esse cara, não temos apenas esse cara. Por quê? Porque é uma letra pequena. Se você não quer, você sabe, você sabe, pensar se uma loteria pequena ou é grande podemos apenas adicionar aqui uma bandeira como em sensível, que significa maiúsculas e minúsculas. Não importa se sua maiúscula ou minúscula. Ok, então com digitando aqui uma única letra, você só obteria todas as coisas possíveis que seriam assim, certo? Cada tipo 12 com nós vamos encontrar este 12 aqui porque é apenas um como esse. Mas você sabe, maioria das vezes você não quer encontrar coisas assim, você quer encontrar um padrão especial fora das coisas em sua rua. Portanto, há muitas maneiras de fazer as coisas. Por exemplo, você pode digitar ponto, que significa e o caractere Então, se você digitar um ponto aqui, isso significa que vamos encontrar qualquer caractere possível. E o mais legal é que dividimos nossa corda em errado. Isso tem todos os personagens possíveis na área que é chamado de resultado e nós podemos, você sabe, escolher também. Por exemplo, o primeiro é um O segundo é traço. Podemos ir em frente, certo? O legal é que agora podemos, por exemplo, por exemplo, juntou-se a todos esses caras usando a função que sabemos da última lição e bomba. Temos todos eles com o brilhante ou algo assim que este um único personagem, sanguessugas, único personagem. Foi muito em um único personagem, mas eu quero dizer exatamente, Ei, Ei, eu quero um em seguida traço. Então agora temos todas as opções possíveis onde há um A e e um traço e então eu ouvi querer ter um número, certo? Mas não sabemos qual é esse número, e por causa disso, devemos usar algo assim. Isso pensar muito está em um único caractere em um escopo de A para D, que significa, em conclusão, que se você tomar algo assim, 0 para 9, ele escolheria perguntou qualquer número. Então, se eu digitar algo como 0 a 9 e eu atualizá-lo, como você pode ver agora nós temos o primeiro número depois de um Então é cinco. São cinco aqui, cinco aqui, cinco anos e bem, nove. Oh, desculpe. Esse cara não era aquele. E esse não foi escolhido porque temos que ler, certo ? Então é por isso que temos que nove e cinco e 5559 Ok, então ele funciona bem. E eu gostaria de ter aqui tantos números quanto ele não terá. Então, como fazer isso? Temos que sábio de fazer essa coisa marchas e uma string que contém e ou mais ocorrências fora do personagem anterior. É legal. Legal, certo? Porque nós podemos Queremos ter o personagem anterior, que é um número desta vez. Como dinheiro? Uma ou mais vezes, como você pode ver Agora nós temos todos fora dos caras aqui. E quando estamos nos novos. Então, por exemplo , também aparecerá aqui. Isso é simplesmente incrível, certo? Está bem. Então também podemos fazer isso um pouco diferente. Esta coisa pode ser substituída por fósforos e uma string que contém uma ou mais ocorrências da prisão em caráter. Então poderíamos, em vez de digitar algo assim, também poderíamos digitar algo assim. E também você pode, em vez de digitar algo assim, usar esse padrão especial, que se parece com isso. E também significa o mesmo. Então isso significa o mesmo que isso. Há muitas maneiras de fazer as coisas. Estou a mostrar-lhes porque algumas pessoas podem usar algo diferente. Você não entenderá outras pessoas, expressões regulares, expressões. Certo. Então é assim que fazemos o que funciona. Então, neste momento, poderíamos escolher as opções possíveis como essa. E se eu quisesse, por exemplo, escolher por exemplo, escolher também esse cara e esse cara? Bem, e todos eles, certo? Há muitas maneiras de fazer coisas assim. Por exemplo, podemos usar você adotar quando disse que tudo vai aparecer porque é qualquer personagem. O problema é que é um personagem. Ele também pode ser um personagem, por exemplo, como para uh huh direito, que qualquer personagem tudo possível então Às vezes você quer dizer exatamente qual deles queremos escolher . Então criamos O pai é assim. E dizemos: “ Ei, Ei, eu não vou correr. Eu também quero algo como, por exemplo, Ha sh! E isso é tudo que isso vai ver agora nós temos bom com quente no painel. Funciona bem. Então, para escolher tudo isso, usamos o operador ou onde ele está, como você pode ver aqui, ele também é muito bom, por exemplo, para verificar extensões. Se fizéssemos algo assim, J j p g o r g se era muito ou algo assim. Por exemplo, chefe paisagem, o chefe é o mundo aqui, e ele iria escolhê-lo para que possamos verificar exatamente se estes uma imagem ou não. Certo? Então você não pode, por exemplo, sair cinco. Ele não vai e vai para a direita para que você possa escolher coisas como que usando o operador ou em. E se eu quisesse escolher? Também o ponto? O problema é que realmente fazemos algo assim. Ele escolheria novamente e o caráter possível. Se você quiser usar um caractere que é uma palavra-chave no naufrágio. Espere X. Então, por exemplo, se você quiser usar os arados, o Asterix, o Asterix, o ponto de interrogação no são distribuídos em outras coisas como essa e você quer encontrá-lo aqui e apenas esta coisa. Você deve usar o backspace antes de ligar. Então ele vai encontrar o que ele vai interpretar. É como um ponto? Então, se você quiser encontrar apenas os caras, é bom que eu faria algo assim. E este Considine. Sim, funciona. Agora só tenho estes tipos, certo? Então é assim que as expressões regulares do rack X estão funcionando. Vamos a outras coisas. Aqui Você tem algo deusa chamada Asterix, e marchas e uma corda que contém zero ou mais ocorrências fora do personagem anterior . Então, tivemos algo assim. Um nome, Mark. Vai muito o cara sem ele no início. Então ARIC são destroços Mark. Bem, se vai ser minúscula, devemos usar a bandeira em escrita insensível. Você precisa se lembrar sobre isso e ele iria escolher também um Marek Mark com o esporte. Pequeno. O problema é que ele também vai escolher os caras que tem bom homem sou habilidade, certo? Porque contém zero ou mais ocorrências. Então isso pode ser às vezes um problema que você quer dizer Ei, eles devem ser exatamente um. O que? Você não usaria isso de uma forma que você fez algo assim. Quando você digita um único caractere, isso significa que ele tem que estar lá. E deve ser um único cara se você usar o plus it com muita corda de anis que contém uma ou mais ocorrências do personagem anterior. Então, conclusão disso, requer corretor precedente pelo menos uma vez. Então aqui, zero ou mais um ou mais assim cada vez que algo como F a Plaza de ele combina com ajuste e combina gordura certo? Mas não combina com FD porque temos que ter pelo menos um A essa coisa corresponde e uma string que contenha zero ou uma ocorrência fora do personagem presidente. Então, se fizermos algo como M e, em seguida, ponto de interrogação tudo bem, vai muito bem. Vou destruir Mark e Maverick com essa fumaça, menor e maiúscula está certa, então o deck não precisa ser um M, mas pode ser, mas pode haver mais de um. Então há uma boa solução para algo assim, certo? E toda vez que algo assim, ele corresponde a qualquer string que contém exatamente e ocorrências do caractere anterior. Então, se você digitar coisas assim z o. E então para isso significa que, como eu tenho que ver aqui para caras como esse é muito útil. Quando você quer verificar, por exemplo, um número de telefone, certo? Você quer dizer algo como número de telefone variável e, por exemplo, na Polónia, o seu número de telefone deve ser assim. Dois números. Em seguida, números livres, números livres e três números. Eles não sabem exatamente como é no seu país, certo? Todos os países têm coisas diferentes como essa. Mas, ei, eu quero ver dígitos grátis. Dígitos grátis. Freedy it E aqui dois dígitos certo que é boa idéia dedo mágico como aquele 11 número marcha e eu quero ver um dígito. Então vamos fazer assim em dígito e eu quero vê-lo. Quantas vezes? Duas vezes. Não menos ou mais. Eu quero ver duas vezes e depois eu quero ver um espaço como fazê-lo Espaço. Um espaço é caráter branco, certo? Então eu vou fazer como preço. E então eu quero ver exatamente o que eu quero ver. Números grátis. Então será D e livre e neste lugar. E então eu quero ter o que d e livre e, em seguida, como espaço em e ele reserva OPEP barra Bem, é por isso que eu não quero Não gosto de usar as irmãs de volta sessões para algo que é mais. Acho que é mais claro quando você é um peso morto. Certo? Então 093 vezes do que o beck barra s então 09 volta tempo livre espaço em então temos 09 vezes livres. Então, fazendo algo assim, , você sabe, dizendo isso para o resultado, você percebe que você acertou quando fazemos algo errado. Então, um exemplo assim. Bem, está funcionando bem, porque você escolhe, como aquele cara, aquele cara, e pega aquele cara. Então temos que dizer exatamente. Ei, tem que começar de dois números e tem ponta do dedo do pé. A força total tem que terminar com números livres. E agora não funciona. Você pode ver, mas é assim que funciona? - Tudo bem. Então você entendeu que você tem. Agora, , você não percebe que podemos usar outras coisas assim. Os caracteres como esse, que significa que você tem que ter no final da string completa, faz com que o padrão para procurar por apenas muito. A única corda que está terminando com algo assim, certo? Tem que acabar. Isso é o que é muito útil em uma situação como essa. Certo, então vamos a outro feed. Você pode muito anestésico que contém e ou mais ocorrências do personagem anterior. Porque às vezes você sabe Bem, isso é igual a esse cara, certo? E funciona da mesma forma. O problema é que usando isso, você pode usar a única artéria que combina com qualquer corda que contém muitas Molly e ocorrências e Maxie, Molly e ocorrências fora. Apresentação corrigida. Você pode dizer: “ Ei , Ei , pode ser livre para 10 ou 12 seis. Deixe se caracteres como esse precedendo caracteres. Isso é muito útil. Certo? Então aqui está a coisa, certo. Aprendemos sobre esse cara? Só muito é o começo de uma corda tão fórmula como essa que vai combinar com o buraco do convés . Mas não vai muito no todo, porque o seu todo não é agora no meio desta coisa não está no início aqui. Quando ele digitar coisas como G e dólar, ele vai muito apenas corda que termina com personagem G. Certo, se não acabar com G, não faça mágica. Quando você faz algo assim, marchar e fora do personagem e fechado no personagem disse assim e pensar como é que era um único personagem, Muito Então, por exemplo, se você digitar algo como um e então b nt Veja, você tem BMT aqui dentro em grande parte do ABC e 80 c, mas não faz muito um btc ou o que seja . Você sabe, se você tem mais de um personagem que não combina com ele, certo, é muito só esse cara também não é muito, você sabe, por exemplo, uma chave. Veja a direita. Não sabemos muito dessas coisas. Ah, quando você gosta assim. Então, se anos algo como que pena como que isso significa que você está excluindo ser vazio tanto é tudo. Ex aceitar ABC 80 c para que ele corresponde a um D. C, C,a. chave C e outras outras outras outras coisas como essa. Quando você faz isso assim, já falamos sobre isso que você usa o painel dentro. Ele vai muito qualquer número dentro destes e um pequeno caractere maiúsculas e minúsculas e um grande caractere quando você usar o peso morto com muito qualquer caractere quando você usá-lo com muito qualquer caractere e o e um sublinhado. Então você sabe, porque às vezes você não quer usar o modificador de flak insensível em todos os lugares, certo, porque às vezes você quer ser, ter sua maiúscula sensível em algumas situações, mas você em um lugar do padrão de parte. Você quer ter seu caso na cidade, por exemplo, certo? Então, será uma boa idéia usar qualquer personagem algo assim, aquela busca em um ano que comemos tanto quanto cada personagem, exceto ABC. Andy, certo? Então também sabemos que aprendeu sobre esse cara. Este caractere permite que você interprete caracteres reservados como, por exemplo, o ponto Asterix e outras coisas assim como um corretor para procurar o dedo direito para pesquisar. Então a fórmula f e, em seguida, a pesquisa traseira e Asterix volta tais acidentes. Boxers! Asteróide! Bem, imagine que F você sabe que você também pode usar o algo assim e foi seguro leva. Então, se você fizer algo assim, por exemplo, que são coisas muito úteis às vezes se você fizer algo assim, você fez algo assim? Isso significa que você está salvando o em um olho em você está vindo de 1234 e então você complacente em qualquer lugar que você não vai mais tarde. Então mudaria totalmente como vai parecer. Então, se você quiser escolher, por exemplo, nossa casa agora eu digitaria Arkady, AJ e Haye. Quero que sejam os cinco agora. Então eu queria ser um bom começo, então eu digitaria aqui cinco, certo? Se eu quiser estar no meio, ele vai baía, por exemplo, no meio. Isso é o poderoso, muito poderoso e como você pode ver agora você também sabe como substitui o trabalho certo? Há também algo como ele vai combinar ovos somente se por que é depois do X. Então você tem, por exemplo, nomes e sobrenomes e você quer apenas escolher. Só quero escolher o Eric que está tendo o mundo nosso truque depois dele. Então, é também nós removemos em Estes são um grande estes. Ele não será removido porque ele tem Novak de repente. E pensava-se que esta coisa funciona da mesma forma que a acima. Mas vai financiar. Só que não há porquê. E sobre isso nós aprendemos no início que temos também importou que este teste coisas que é muito útil porque você pode dizer, Ei, se ele combina, então sim, está certo. Então eu acho que é uma boa idéia usar algo como um teste para coisas como verificar GIF se o número de telefone, por exemplo, está certo. Então, se fizermos dessa forma, como podem ver resultou em encontrar algo, não queremos dizer esse número agora. Nós só queremos dizer se o número está certo, então para fazê-lo, você tem que digitar as fórmulas assim. Então você tem que usar o dot than test e a string que você deseja testar. Por exemplo, um número de telefone e o resultado desta vez para que o resultado seja verdadeiro ou falso. Então, como você pode ver agora, é verdade sobre quando fazemos algo errado como isso. É falso, certo? Quando você faz algo assim, é falso. Você pode, claro, é uma boa idéia exercitar-se e tentar pensar como fazê-lo Então você também pode amarrar seu número assim, certo? Algumas pessoas podem querer permitir. Também digitando sem espaçamento, especiarias, o número de telefone. Há uma boa ideia permitir que as pessoas façam coisas assim. Isso é um exercício para você agora. Na próxima lição, falamos sobre a função exata. É só essa lição, muito obrigado. 53. Método de execute: Olá Hoje vamos falar sobre a função exata. Bem, compare-o com o 1º de março. Como sabemos, a função March está apenas verificando o padrão. E se ele se encaixa e dois distintos, ele vai selecionar as coisas que são que a saída direita está funcionando da mesma forma. Mas há uma pequena diferença. A primeira coisa é que temos que criar uma variável temporária para o naufrágio. Então temos que fazer algo assim. E agora devemos fazer o Rag X. Então devemos exatar essa expressão regular, aquela string que queremos procurá-la. Ok, então quando nós fazemos isso assim, como você pode ver como o resultado, nós temos um 0,51. Então, esses caras, vamos mudar isso. Então vamos procurar Annie e o tipo de cara, bem, podemos ter qualquer personagem, certo? E como podem ver, temos um traço 565. Mas, hey, nós temos a visão global distante você por que nós não de alguma forma acertamos todos os outros? Por exemplo, esse cara como, por exemplo, dias isso é nisso. Por que o que aconteceu? Bem, o problema é que ele retornará sempre no único resultado. Quando fazemos isso de novo, você pode ver agora que temos bom 50 livre Quando eles fazem isso novamente, é hash 58 e, em seguida, um 0.51. Então temos que executá-lo tantas vezes quanto há um resultado, certo? Uh huh. Quando não há nada. Então, depois desse cara, como pode ver, não há nada. Não há nada que se chame “Não”. Ok. E não, na condição significa também cair. Então, parou de funcionar. E você pode usar isso para, por exemplo, algo assim. Vamos criar uma seta variável temporária. E enquanto podemos atribuir um novo valor usando este direito, vamos adicionar para resultar o valor que está vindo daqui. E como podem ver agora, temos todos esses valores. E agora você pode fazer o que quisermos com isso com esses valores, certo em algo assim é útil porque agora você pode saber, por exemplo, por exemplo, cada um desses desenvolvimentos que você pode em algo que você sabe que pode, por exemplo, misturá-lo com outro errado. Você pode, por exemplo, excluir algo que você não quer que na maioria das vezes você pode excluir tudo chave, certo? Mas o legal é que você pode fazê-lo no momento em que você está extraindo coisas do Alguns certo. Por exemplo, Se você está extraindo e depois, se você pode dizer, Ei, eu quero sobre os itens gratuitos então se eu posso fazer algo eu zero E se eu é menor do que livre eles eram maiores do que Free Dan quebra então eu pode obter sobre os itens gratuitos como esse. Tudo bem, certo. Eu mais rezo para que a incriminação esteja aqui. E como podem ver, temos a liberdade extraída apenas de graça. Por isso, não estamos a perder os direitos de memória. Nós não extraímos todas as opções possíveis que se encaixam neste padrão no ah start, certo? Você tem que lembrar que um uso não usa o global. Só mostrará sempre o primeiro cara. Certo? Então você precisa usar as FARC globais para obter todas as opções possíveis. E isso é realmente útil como você pode ver para extrair e ter o controle. Então é por isso que também chegou aqui e aviso certo? Aviso não é um aviso árabe é como, Ei, você sabe, pode haver um erro. A verdade é que não há herói. Mas na maioria das vezes, quando você está fazendo coisas assim, pode ser uma era, certo? Porque atribuir é muito semelhante a comparar coisas como certo. Então você também pode fazer algo assim. Por quê? Não é igual saber. Então podemos executá-lo, certo? A Andi? E está funcionando para o mesmo. Como se fôssemos assim. Então, Então, isto é só um atalho. Como você pode montá-lo. Pode ser uma orelha. Ou é por isso que temos aqui um aviso. Certo? Mas está tudo bem. Ok? Só há essa lição. Muito obrigado. 54. de verificação: Olá. Nesta lição, nós vamos treinar as fórmulas de expressão regular sobre o exemplo prático. Verificará se o passaporte é forte. Ou talvez não seja tão forte como deveria ser, então não devemos passar direito? Então, como fazer coisas assim em JavaScript? Usando as expressões regulares. Primeiro, devemos pensar sobre qual dos métodos devemos usar. Eu acho que este é bom porque ele acabou de voltar verdadeiro ou cai. Está tudo bem se não está. Então precisamos para ele uma variável de fórmula exatamente onde podemos armazená-lo. E aqui nós o teríamos. Precisamos de uma senha. Tão bem, isso é, por exemplo, no início, pesado a variável temporária. Mais tarde, vamos pegá-lo do HTML 5. Então, queremos testar. Queremos para sem dedo do pé. Teste a senha, certo, e ele quer levar o resultado para o jantar. Html off info. Então agora é através porque, hey, hey, nós temos o tempero aqui, e aqui também há espaço, então tudo funciona bem. Ok, então vamos supor como nosso passaporte deve ser. Eu acho que deve ter pelo menos oito ou talvez sete caracteres longo direito, Então, como fazê-lo? Não deve ser tão difícil porque só precisamos trabalhar. Tem algum caráter possível, certo? Não importa se é realmente que eu não conheço um personagem assim. Você pode usar coisas assim no passaporte. Permitir que as pessoas que usam o. Não precisa ser, você sabe, você sabe, ABC o único para permitir usar qualquer personagem porque seria apenas você apenas torná-lo ainda mais forte. Mais forte, certo? Então vamos usar esse ponto, mas não queremos um personagem, mas mais deles pelo menos oito deles, certo? Então faz com que um dedo do pé pessoa digite aqui, pelo menos oito caracteres, como você pode ver agora nós forçamos assim 1234567 a. E agora ele funciona bem. Mas é claro, possível assim é muito fraco. Então, como mudar? Devemos fazer este padrão para ter na lista. Por exemplo, um personagem que é minúsculo queria sua maiúscula, certo? Então, como fazer isso? Vamos aqui, e temos aqui algo assim com muito X somente se por que é depois que os ovos bob os resultados. Outro usuário se afastou. Quando você não usar isso, será assim. Você tem que ter na coisa que está atrás dele no padrão depois dele. Então, em nossa situação, o padrão seguido por ela é este Você tem que ter a coisa que está aqui dentro. Ok, então se fizermos algo como aquela bomba, bomba e depois o ponto de interrogação e então ele chama. E agora eu digo, Ei, eu quero ter, por exemplo, um personagem pequeno. Correto. Então agora, como você pode ver, é falso. Mas quando formos um personagem pequeno aqui, vai funcionar. - Tudo bem. O problema é que quando eu tenho isso assim, o personagem como esse deve estar no início, certo? Nós não queremos um personagem com início a caminho gostaria de tê-lo também aqui. Agora vamos trabalhar bem. Mas quando removemos o primeiro cara, como você pode ver, temos uma boa falha. Então, como resolver um problema como esse? Poderíamos dizer algo assim. A verdade é que aqui pode ser qualquer personagem, mas não precisa estar aqui. O asterisco como você pode ver muito é qualquer string que contém zero ou mais ocorrências do caractere anterior. Então isso significa qualquer personagem. Então este qualquer personagem pode estar aqui. Oh, ele não precisa estar aqui. Certo? E se estiver aqui, tudo bem. E então pode haver algo como eles não sabem, certo? Então isso é algo que faz ter um QI e um personagem. E depois de qualquer um pode estar em algum lugar, por exemplo, o, hum o pequeno personagem. Certo. Então isso é muito são alguns por causa disso, Como você pode ver agora nós temos verdade. Então, porque fora da solução como essa, podemos amarrar, como você pode ver, o pequeno personagem em qualquer lugar que eu precise com o trabalho. - Tudo bem. Então agora só precisamos cobre duas vezes. E o que também comemos lá maiúsculas pelo menos uma vez. E também queremos o que você também quer um dígito. Então zero esta noite. E por causa disso, como podem ver agora, é falso. Mas quando adicionamos, por exemplo, maiúsculas, ele vai funcionar bem. Então, sim, esta é uma senha forte porque você tem maiúsculas. Temos um caso pequeno. Temos o número, e também é pelo menos um dígito. Então vai funcionar bem. Você também pode usar alguma outra ciência de, por exemplo, um dólar. Lembre-se, não proíba o uso de algo assim porque ele só torna as pessoas a senha mais forte. E você sabe, se alguém está usando a mesma senha em todos os lugares, o que não é a melhor idéia sobre se ele está usando um personagem como esse e ele não será capaz de usar um personagem como esse em seu site, ele apenas deixá-lo, então permita que ele use um IPO possível. Possível problema de caráter. Talvez até os seis personagens sejam suficientes. Porque a verdade é que a senha, se for bem longa, será forte desde que você a tenha devidamente protegida no lado do servidor. Ok, se você está usando vendido e outras coisas assim. Mas este é um tópico para os carros PHP. Ok, então isso é apenas, você sabe, tem antes de enviar os possíveis direitos s Então temos aqui Passaporte. Isso foi Ah, isso foi, você sabe, começando a variável temporária. Vamos agora criar. E às importações a primeira entrada que vai começar o passaporte. E segundo que abotoamos, isso estará testando todas essas coisas, certo? Então vamos apenas copiar este fink. E agora vamos começar a partir do meu passaporte formulário que será começando a variável pops verruga. Certo, então não precisamos de mais aqui. E também precisamos do bastão que o teste do crânio. Então, assim. E quando alguém clica no teste, você quer invocar uma função que vai testar e informar o que está acontecendo. Então a fórmula será testada pela senha. Isso deve ser sempre verificado depois de clicar, porque pode mudar, certo? Não deveria estar no carregado quando a janela está carregada, certo, devemos tirar o valor do passaporte. Não só senha é uma entrada, e queremos testar seu valor por esta fórmula. Então, sim , deve funcionar bem. Mas vamos para o propósito do teste. Vamos mudar para texto para que possamos ver que eu sei o que estou pensando no tempo. Então, sim, temos falso quando temos letra grande e número ah. Como pode ver, não temos verdade. Quando é um pouco curto, é falso. Então nós podemos usar informações como essa também em nosso script, nós poderíamos. Por exemplo, em vez do botão, poderíamos fazer um pouco. Então permite que os usuários enviem. Vamos pegar e até aqui. E queremos no início, evitar o padrão. Ah, evento. Então não queremos que seja enviado, certo? Não vai verificar as coisas primeiro. Então estamos rastreando coisas. Queremos usar este resultado fora desta fórmula formalmente e se a fórmula estiver tudo bem, então sim, mas possivelmente está bem. Você quer enviar nosso formulário, então queremos obter nosso formulário e queremos enviá-lo. Certo. Então, como você pode ver agora não vai ser enviado, mas bombardeá-lo enviado. Certo? Porque a senha é forte agora. Mas caso contrário, se algo estiver errado, eu quero informar o nosso usuário. Então vamos hoje em quarto lugar, você vai até Dana, alcança-os e eu digo não. Sua senha não é forte o suficiente. Claro que pode checar. Sabe, você poderia fazer o check-in. Esta é a fórmula, certo? Por exemplo, vamos verificar primeiro. Se há um número Oh, e, em seguida, se há pelo menos seis caracteres e, em seguida, se há um personagem tão grande e, em seguida, se há ah pequeno caso e você deve fazê-lo como um exercício. Você sabe um por um e, em seguida, informar o seu usuário que o quê? O que exatamente ele fez de errado em seu possível. Certo? Então, isso é um exercício para você para esta lição? Se tiver algum problema, é só pedir. Isso é tudo. Muito obrigado. 55. Data: Olá. Haveria magnetizar quando você precisa manipular o tempo em JavaScript. E para isso há um objeto especial específico objeto que é chamado data Object Help! O nome é re sugerindo o dedo este dia fazendo isso vamos tentar aprender todos os assuntos que estão dentro. Ok, há leis sobre eles e eu vou te mostrar a mais importante. Vou mostrar-lhe como manipular o tempo usando este objeto. Mas em primeiro lugar, vamos nos perguntar quando algo assim seria necessário. Por exemplo, você pode mostrar o relógio em seu site. Você sabe, você pode dizer que a hora que é agora é, por exemplo, 10 da manhã ou algo assim. Você também pode, por exemplo, dizer o usuário. Quanto tempo? - Quantos? Quanto tempo é necessário para algo acontecer, por exemplo, certo, Então, há muitas situações como essa e você pode usar para o objeto data. Mas antes de entrarmos nisso, eu também gostaria de informá-lo que o objeto da data não vai lhe dar o tempo certo . Ele vai lhe dar o tempo que seu usuário tem termina suas configurações bem nas configurações do Windows . Então você não se lembra que você não deveria pensar no encontro aqui como um dia que é verdade, certo? Mas para situações como um relógio, como , por exemplo, dizer quanto tempo ele fez algo assim é muito útil. E de certa forma, você pode entrar nas variáveis de script Java do PHP, por exemplo. Certo? Então, estamos usando, por exemplo, um Jack, assim é para que ele será útil para você de qualquer maneira, Você pode criar, por exemplo, um jogo onde você quer descer quando algo terminar de construir ou algo assim. Algo é realmente útil. Ok, Então, a fim de criar um objeto de data, você apenas cria uma variável, por exemplo hoje e tipos de noite Nova data. E não podemos atribuir, por exemplo, no HTML hoje e quando o atualizamos. Como você pode ver, nós temos o bem aqui hoje em dia. Então temos 11 de maio segunda-feira, 2015. Agora é hora 2028 4 E como você pode ver, eu estou no fuso horário GMT. Então eu tenho que mais dois aqui então provavelmente foi em torno destes. Você tem que dizer a diferença. Você sabe os resultados aqui sobre o especial aqui porque eu sou da Polônia. Então este é o meu fuso horário. Mas na maioria das vezes você não quer ver as coisas parecidas que você gostaria de ver em vez da minha mãe. Segunda-feira, certo? Você gostaria de ver o nome completo. Por exemplo. Você gostaria de formalmente o grande diferente. Vou mostrar-lhe em breve como fazê-lo. Por exemplo, usar isso importa, certo? Então, por exemplo, você gosta de ter um dia de folga para que eu pudesse mostrar algo tipo de pensamento hoje. Isso e eu gostaria de ter apenas um mês, certo? Isto pode chegar aqui com segurança. Digite por altura. Maio é mesmo o quinto mês, certo? É Janeiro, Fevereiro, Março, Abril Maio. Então, por que temos aqui? Porque você está contando de 00 é para gin. 1 de janeiro é para fevereiro. Ok, então é muito importante que se você quer morrer de medo, você deve fazer algo assim, certo? Então este é um mês verdadeiro, e você poderia, por exemplo, para algo como um mês depois, então eu gostaria, por exemplo, ver um dia. Então, hoje arranja um encontro. Devolvemos a data atual. E eu também gostaria de mostrar ao usuário o ano inteiro. Então, um tempero. E hoje, ano inteiro. Bem, talvez corte. Como podem ver agora temos um encontro aqui. Isso é certo. Tudo está funcionando bem. E você pode fazer com que pareça o que quiser, certo? Poderia usá-lo em vez disso. Fora da mamãe. Poucos frios, por exemplo. Stroh alguém. Quantas horas são agora? Quantos minutos? Segundos 2 de maio. Então, esses assuntos são muito fáceis. Você pode apenas para o meu resultado para o usuário como você quer, certo? O problema é que, bem, ainda temos aqui. Cinco. E se eu quisesse ver aqui toda a Maio e outras coisas assim, certo? Ah, eu não quero que ele seja visível em força. Eu poderia fazer uma função especial. Então, por exemplo, poderia criar uma função que, ah, criaria ah, um nome sprink completo. Então, por exemplo, obter Sprink mês de número algo assim. E aqui vamos nos levar uma discussão. O número O número do mês certo Número do mês agora podemos criar um Vrabel temporário que começamos o nome fora mais para que eu criaria algo que meses em diante. E eu vou criar uma via aérea para que eu pudesse tomar algumas, como janeiro de março de fevereiro em quem? Pode, John July. Agora vamos fazer uma entrada aqui, então é mais fácil ler nosso rotador. Certo? Beleza Geral. Maio Junho, Julho ou convidado Agosto, hum, Setembro, Outubro, Novembro em Dezembro escreve esse número. Então nós temos agora, aqui, começar todos os meses, certo? E agora você está como voltar por estes números o mês certo, certo? Então, se eu tenho isso dessa maneira Então, por exemplo, quando eu tenho string de mais número como este algo que e eu digitar aqui, por exemplo zero eu gostaria de ver janeiro. Então, como fazer isso? Eu só devolveria meu mês. 00 está aqui. Então você copiou aqui. Você pode ver agora que temos um bom general, certo? E podemos enviar aqui, por exemplo, hoje. Obter mês em. Vemos exemplos que hoje é maio e funciona bem como um exercício. Você deveria fazer a mesma coisa para o dia de folga da semana porque bem, é uma boa idéia praticar, certo, certo, e o Dia do Metal Gate está retornando o dia de folga da semana. Mas você precisa se lembrar, tenha cuidado. Você está contando de zero, e o primeiro dia é sem segunda-feira. É domingo. Exercício decente para você. Se você tiver algum problema, basta criar uma discussão. Eu vou ter você. E agora vamos tentar torná-lo um pouco melhor porque você sabe, eu gosto de ter esses carros um pouco mais pro caminho. Olha, agora temos que invocar a função e temos que enviar o seu sempre capaz e começar a sair. Há muito trabalho a fazer aqui, certo? Você poderia talvez criá-los antes da chegada e salvá-lo, por exemplo, aqui, o mês em os meses completos ou algo assim. Mas este é o problema do Ártico. Que melhor se já tivéssemos função, que lhe daria mês atual na string. Bem, você sabe, os criadores fora dessas funções não pensaram nisso. Certo? Mas eu poderia adicionar de alguma forma à função de data, construtor, algo que ele como você pode. Espero que você já tenha assistido a lição de protótipo sobre o protótipo. Está bem? E se você tivesse o seu céu na água, então vá em frente, faça-o porque podemos usar o protótipo. Podemos fazer algo como protótipo, e agora você pode criar nossas próprias funções para que você possa obter um mês de força e nós podemos criar nossa própria função aqui que nós que não podemos ser nenhum Isra executado assim. Nós podemos. Então há algo assim hoje. Obter um mês de força e isso é tudo. Só precisamos voltar agora, o bom mês. Então precisamos criar uma capacidade temporária como aqui. Mas agora só precisamos devolver o que re meses da cidade. E agora precisamos aqui. Zero Anto livre ou bem, o atual ambos O movimento atual que você pode obter a partir deste mês get, certo? Ele será zero ou um ou dois ou libertará o atual. Isso vai se referir ao dia atual. Isso é Ah, ok. Que a variável está usando a chave, certo? A variável atual que vai invocar disfunção. Então, em nossa situação é essa variável aqui? Temos aqui este mês, certo? Então, quando refresca você pode ver que temos maio, mas é mais fácil para anos. Podemos ver instantaneamente que esse método está conectado com o dia. Então é ótimo, certo? Então você pode criar seus próprios métodos. Você pode adicioná-los facilmente para fazer objetos atuais. Você pode estendê-los por suas funções. Isso é poderoso, não é? Ok, então agora vamos tentar, você sabe, você sabe, ver um pouco mais e encontrar o objeto de dados. Nós somos o tipo? Já que eu penso como hoje, a cadeia de tempo local, o que aconteceria? Como pode ver, temos o Bom. Agora a hora. Isso é ótimo. Temos horas, minutos e segundos para vocês . Mas você sabe, esta é a cadeia de tempo de bloqueio. O que significa que se em um dos muitos países é um amigo um pouco diferente que o navegador da Web pode interpretar, seria diferente quando o país poderia interpretar uma maneira um pouco diferente. Então essas coisas vão parecer um pouco diferentes. Ok, então é forte ouvir o Firefox quando corremos. Por exemplo, as datas locais beber problema. Bem, no meu país, você mais tempo tipo dias do que meses. Então ano como você pode ver estes, é assim que mostramos às pessoas mais tempo nossos encontros. Certo, mas provavelmente no seu país. É diferente. São mais dias e anos, talvez alguém que algumas pessoas estejam usando aqui em vez disso, em 5 de maio ou algo assim. Esta coisa pode retornar homem e coisas diferentes em muitos navegadores diferentes e outras coisas como essa. Tempo é mais tempo re apresentado da mesma maneira, mas isso pensar e olhar diferente em muitos países diferentes. Mas às vezes isso é o que você quer, certo? Você quer apoiar todos os países e você quer senti-los bem em outros lugares. Mas, você sabe, isso vai parecer diferente em um país ou em todos os navegadores da Web. Também pode ser diferente. Tudo bem por ele. Parece o mesmo às vezes. Certo? Então aqui você tem também a string local que está conectando ambas as opções. A Andi. Bem, o menos ótimo. Agora ele como você pode ver, nós temos algo chamado é chamado de método. Um disco que define a data que você pode alterar facilmente. A data para alguns outros dias de folga exemplo. Eu quero definir a data para o novo que eu quero obter hoje. Isso e eu quero acrescentar, por exemplo, um dia e por causa disso. Como você pode ver agora nós não temos 11 feito em 12 de maio. Certo? Então nós podemos ver enviado aqui para o dito dia morto e porque nós enviamos o mesmo dia como aqui e nós tivemos que um, nós temos 12 certo? Então vai funcionar assim. Você também pode usar a hora definida. Esse é o tempo que vai funcionar, como, você sabe, conseguir tempo, método. Hum, obter tempo. Método está retornando o tempo real em muitos segundos. Contando desde o primeiro janeiro anos já. Isso foi na polícia. Está bem. Uh, a partir de 1 de janeiro de 1919 70 anos, não importa. Realmente o quê? Isso aqui porque, você sabe, eles acabaram de decidir dizer que deveria vir deste lugar e é muito útil. É muito útil porque agora você pode subestruturar, por exemplo, a data em que estes cinco dias a partir de agora das datas que é hoje e você pode ver exatamente como maney milissegundos tem poderes e você pode usar informações como essa porque você pode, por exemplo, dividir milissegundos por 1000 e então você tem segundos, certo? Se você dividir segundos por 60 você tem dois minutos. Quando você divide minutos por 60 você tem horas. Então é isso. Isso é ver coisas muito úteis como essa para que possamos usar o tempo definido, seus minutos. Outros, como, disse horas define minutos que segundos métodos que você pode usar assim. Mas você precisa se lembrar que você está afetando esses meta exatamente para a direita. Então, se você quiser criar muito capaz amanhã e você gostaria de, por exemplo, criar uma nova data que isso realmente amanhã você pode usar outros construtores para o construtor de função de data . Ok, você pode, por exemplo, simplesmente eu em segundo lugar. Então poderíamos usar, por exemplo, hoje e agora ter tempo, certo? E eu gostaria de acrescentar aqui quantos milissegundos para estes porque quando eu ia ver agora amanhã é igual a hoje, certo? Mas quando eu adiciono aqui, por exemplo, nosso grande número, como você pode ver, está mudando a beleza aqui em nove horas porque é em milissegundos. Então este deve ser um grande número. Para que possamos aderir. Por exemplo, um dia como adicionar um dia um dia é 1000 milissegundos multiplicado por 16 é agora o que, 60 segundos. Eu quero ter. Não tenho 60 segundos. Não em um minuto. Quero ter 60 minutos, o que é uma hora. Então agora vai em uma hora você pode ver e quando multiplicarmos de novo por 24 teremos um dia para que você possa adicionar fácil gravando algo assim um dia, certo? E você tem o bem. Agora, amanhã aqui. E quando você faz algo assim, por exemplo, para moral menos Hoje você vai notar que temos aqui em milissegundos o dia inteiro e podemos usar informações como essa para verificar como quando os segundos tem manchas de uma vez para outra quero ver nenhum mal nos segundos passou de Ah, você sabe que este lugar para exibir levou este tempo você pode apenas dividir por 1000 em. Então você não tem bons segundos quando você dividir novamente. Por quê? Por exemplo 60 você tem agora minutos Quando você dividir novamente você vai ter ah horas assim horas e agora ganhar dividir por 24 você teria dias. Ok, então você pode usar informações assim. É fácil ver como minutos maneira que você precisa, Por exemplo, começar a partir deste momento para este tempo há também outros construtores. Então você pode usar, por exemplo, nova data e você pode digitar ano, mês e dia para que você possa criar variável amanhã como aquele novo morreu e você pode obter hoje que obter ouvido cheio hoje que obter mês em hoje que obter data e mais um e ele nos dará o mesmo resultado. Mas como você pode ver, nós temos aqui o pequeno Bem, não, não, o mesmo resultado exatamente que adicionamos um dia. Mas você sabe quando fizermos algo assim amanhã tão bem, amanhã você verá que temos que usar eles 12 de maio. Mas você tem aqui tempo 0000 porque nós não especificamos minutos segundos em muitos segundos, apenas primeiro para seus argumentos são necessários, você pode adicionar mais deles, então você teria que digitar obter o nosso, obter meios me pegar segundos e tudo vai funcionar bem. Mas é só um monte de trabalho de guerra, certo? Acho que esta é a melhor maneira de o fazer. Mas sabe de uma coisa? Você quer alcançar coisas de pai para que seja assim que você quer fazer. Está bem. Então podemos fazer dessa forma. Hum, há apenas muitas maneiras de você fazer muitas coisas assim. Você também pode criar amanhã, por exemplo, como essa nova data. E você pode apenas digitar aqui a cadeia dias. Mas você tem que rebocar. Mantenha o primeiro assim. Ok, você tem que manter o primeiro assim. Você tem que amarrar Pierre. Em primeiro lugar, o ano Então, por exemplo, 2000 sentir Ah, 50. E agora o mês. Então é o meu e agora o dia. Então são 11 e agora temos 11. Quero tê-lo amanhã. Então agora são 12. Sim, está funcionando bem. Então, se você quiser, por exemplo, criar um pensamento Met que retornamos obter para data de mercado a data que você só precisa voltar aqui, certo? O valor que você deseja mostrar às pessoas exatamente no seu site. E então você pode usar esses métodos com os objetos de data e eu acho que essa é a maneira mais legal . E eu acho que você deve fazer isso é um acesso. Eu só volto aqui do jeito que você quer ter pessoas em seu site. Veja o seu tempo. Está bem. Que essas percepções, o objeto assim. Isso é algo que não agradece muito. 56. o de data usando o objeto: Olá. Vamos tentar os lances Um objeto data criando, por exemplo, Olock. Sim, Clube de Contabilidade. Às vezes, é útil ter algo assim em seu site. Certo, então o usuário pode ver exatamente que horas são. Não. Então, como fazer algo grandioso? Bem, nós poderíamos fazer isso um pouco mais fácil, mas eu apenas criando algumas variáveis função que vai contar com outras coisas assim. Mas vamos torná-lo um carro grande. Vamos fazer isso por causa do irmão bonito profissional longe. Então temos tudo em um só lugar. Então isso significa que vamos criar um construtor de função como, por exemplo, isso. Ok, então vamos criar um construtor de função, que significa que agora podemos criar, por exemplo, relógio sempre capaz e podemos fazer algo novo relógio. Eu gostaria de ser capaz de enviar um manipulador de limão que eu vou ser capaz de mostrar seu cozinheiro. Certo. Então eu gostaria de enviar para cá. Então, o manipulador de elementos e eu gostaríamos de tê-lo atribuído em algum lugar aqui. Então eu gostaria de criá-lo e propriedade para este elemento direito classe, manipulador e eu gostaria de atribuir aqui manipulador elemento, que este enviou você direito assim. Ok, então agora que você tem aqui, nós podemos nós também gostaríamos de iniciar o relógio. Então eu gostaria de criar uma função que ele vai começar. Certo, algumas mulheres fazem isso. Gostaria de ver tudo a correr bem. Então, como precisamos criar uma função de início que tem que começar todas essas coisas direito em quê? Acho que deve começar a contar. Então, como contar? Eu acho que devemos vir a cada segundo, então devemos nos envolver como definido em função terrível. Certo, ajuste o intervalo. E isso vai intervalos iranianos. Se você não sabe o que eles se encontraram, por favor, vá para o ouvir quando eu estou falando sobre eles, ok? É onde eu estou falando sobre o set sobre até mesmo as últimas lições fora do mesmo nível. Então definir uma função terrível é muito novo aqui, e queremos Ron a cada segundo frito. Mas o que queremos executar. Vamos criar se você é uma função anônima que irá executar uma função que vai em segundos. Ok, então vamos criar neste ponto na segunda função, que vai segundos para o nosso encontro real. Então data real deve ser também a data real da propriedade. E podemos fazer coisas como um novo encontro no Dwell. Nós também queremos, por exemplo, método que vai ser, por exemplo, por exemplo, manipulador de elementos de atualização. Contabilista. Então, ele irá atualizar o conteúdo fora os 11 segundos off. Então você também pode chamá-lo manipulador de elementos set, por exemplo. Certo. Mas queremos atualizar exatamente o contador. Então eu acho que essa coisa de bebê é melhor nomear para ele a função. E queremos atualizar com este elemento método, Hunter. Então queremos ir para este elemento Hunter que HTML interno e atualizado com as datas reais deste dia real. Certo? Então, quando não precisamos de nada acontece porque não há importa executá-lo, podemos, Por exemplo, ele começar também chamado este elemento de atualização. Conteúdo do manipulador. Como você pode ver agora temos o valor inicial. E agora queremos a cada segundo para o nosso encontro real. E você segundo para que possamos fazê-lo. Por exemplo, como aquele novo dia em que carregamos o novo dia. Seria só um novo dia. À direita, encontramos-te em segundo lugar. Andi, vai funcionar bem. Certo, então podemos adicionar um novo segundo assim, Andi. Bem, precisamos invocá-lo a cada segundo com o método terrível de definição. Mas você precisa lembrar que o Interval enviado cunhado não terá acesso com o mundo do disco E para esse método em death metal porque o intervalo definido é ah, um método especial e não vê em seu escopo esses métodos. Ok, aqui. Então você precisa criar uma variável temporária como, por exemplo, self e nós temos dias que você pode facilmente chegar, por exemplo, em segundo lugar porque você quer adicionar um segundo. E após a adição do segundo, eu quero atualizar elemento 100 contador. E agora, como você pode ver quando você está nele, a segunda parte a parte dos segundos está atualizando muito bem. Então está funcionando bem. Acabamos de programar tudo. Pro Perry. A coisa legal sobre, você sabe, em seu o é que eu dividi todas as ações no reboque. Diferentes assuntos que você pode ver aqui estão atualizando. Ele está aqui adicionando segundos. Então você vê exatamente o que esses métodos estão fazendo. Você sabe, você deve sempre criar uma função para cada tarefa para fazer OK como que às vezes quando o programa curto talvez talvez rastreou cabeça mesmo você pode. Sabe, nós também poderíamos fazer uma simples função aqui, certo? E fazer todas essas coisas sem todas as propriedades, outras coisas assim. Mas você precisa apenas, sabe, eu acho que se sua pele vai ser muito grande, talvez às vezes você não precise ter ataques. Muito. O roteiro estreia. Você não deve se concentrar em fazer isso, você sabe, muito bem codificado na discoteca que o código não precisa estar sempre muito bem. Lê um livro, certo? Porque às vezes a velocidade é mais importante nisso no script Java. Importa muito porque você é apenas assustador vai carregar mais rápido se você tiver menos coisas. Ele está certo. Mas você precisa pensar um segundo que vai te pagar ou não. Está bem, mas o quê? Bem, vamos treinar um pouco assim, e temos um bom tempo agora, mas não parece bom, então podemos mudar para, por exemplo, parar dias. E podemos usar sua hora local única, certo, por exemplo, assim. E como você pode ver agora, é o primeiro. Eu sou. Uau. Sim, são quase 2 da manhã aqui na Polônia e, ah, temos agora aqui na hora especificada. Então é muito bom. Mas, você sabe, em seu país, talvez você esteja usando o AM e o PM então antes das 12 horas é depois das 12. É PM, coisas certas. Por exemplo. 13. Ah, quando temos 13 horas aqui, deve ser o Primeiro Ministro, está garantido o primeiro PM, certo? É como as pessoas, hum, em outros países chamam. Talvez o Spink da hora local funcione assim para você. Essa é a cicatriz local deve funcionar, certo? Mas e se você quiser que todos vejam esta semana de um M? Não. Só que no seu país você quer, todo mundo vê AM e PM certo? Então você precisa criar seu próprio remédio. Por exemplo, você pode criar este get formatado data e podemos criar a função. Ele vai fazer isso. Ok, então, hum, vamos criar uma variável temporária para horas nesta data real, vamos tirar a nossa dela. E vamos copiá-lo, Bam, bam! Horas, minutos, segundos, horas, minutos e segundos. E agora podemos voltar horas. Então eu ligo e cara, quero dizer, isso é uh, em seguida, segundos. E agora podemos fazer algo assim. Vá para o meu encontro com a mãe. E como você pode ver agora está funcionando. Tudo bem. Mas bem, nós não damos zeros à frente aqui, então devemos adicioná-los. Então, se o nosso for mais lento que 10, em duas horas seria zero mais as horas, certo? Nós só queremos adicionar antes de 12345670 Então é assim que fazemos. A Europa como a nossa. Ok, então não fazemos mais duas vezes, horas, minutos, minutos, e agora Segundos. E como você pode ver agora, está funcionando. Tudo bem. OK, agora nós também devemos fazer algo do AM e PM Então, se o nosso é menor que 12 eu gostaria criar uma variável o disco para exemplos sufixo, que significa que o que vai ser no final, à direita do mundo. E são eles. Caso contrário, devemos criar PM Mas também devemos pensar em horas, porque normalmente estão aqui. 0123 para 12 13 14 bam, bam, bam! Devemos agora fazer algo como o nosso, menos 12. Você deveria, você sabe, remover 12 dele, porque caso contrário não vai ficar bem, certo? E agora também adicione o sufixo. Então, por exemplo, sua base. E então o sufixo admite, Oh sim. Então, se as horas fossem maiores, veríamos aqui ESPN Isso é trabalho de caridade. Então criamos o nosso próprio para o encontro materno. E agora você pode estar pensando, deveria estar aqui? Está realmente ligado tanto a estes? Mas não nem todos. Não em tudo. Devemos criar uma função de protótipo aqui. Devemos estender a data pelo get formatado nosso formato data. Eu tenho tempo formativo. O que? Deveria ser chamado assim. Nenhuma função é igual, Onda. Deveríamos pegá-lo daqui. Pegue aqui e agora. Não estamos trabalhando na data real. Então nós devemos apenas algo assim e por causa disso Não, nós não temos bons dias, mas você pode é o para algo assim que realmente fez isso para o tempo de mãe. E agora também está funcionando bem, mas é um Quincy. Isso está conectado à data agora podemos usá-lo em água para aplicações em seu programa. No entanto, este método não foi apenas útil aqui, certo? Você poderia chamar isso de um jeito diferente. Talvez consiga um tempo formativo. Você poderia criar um parlamento, um assunto que, você sabe, afetaria você sabe, como exatamente isso seria como você poderia ganhar dinheiro com tempo formatado. Certo? E você poderia retornar tipos diferentes dependendo do que muito álcool seria enviado para cá. Certo. Então é assim que você pode fazer uma maneira profissional, um, relógio e o relógio que pode ser duplicado. Certo? Agora você pode fazer algo assim. Agora podemos competir em você pode fazer algo assim, e você pode começar a segunda coca. Canja de galinha não tem que persuadir isso. Sabe, você poderia parar este ou este aqui. E este é o seu exercício para criar uma função de parada que vai parar Said Interval. Estou fazendo coisas assim na lição sobre set in. Terrível. Então faça isso, não faça exercício. Então você vai ver se você pode realmente repetir um treinador como esse para criar uma função stop. Mas você precisa pensar. Você realmente precisa parar algo assim? Na maioria das vezes você não precisa. Então lembre-se, kilobytes são muito importantes em javascript. Se você fizer isso, você nunca vai usar uma função stop. Só não criar porque leva seus kilobytes. Está bem, vai o teu site vai inchar mais devagar. Então você quando você está programando, você deve sempre pensar sobre o quão grande seu programa vai ser em JavaScript porque kilobytes estão fazendo seu site carregar e a flor então Mas, você sabe, situações dar onde você pode proteger kilobytes de disco. Às vezes é bateria também toe chamado assim porque seu código será mais fácil de entender mais tarde. E isso poupar-te-ia tempo. Mas tudo depende da situação. Se você espera disse, estes não podem ser colocados, por exemplo, visitados por 1 milhão de pessoas. O e coisas assim não são grandes porque até 10 kilobytes são importantes, certo? Velocidade é o que mais importa. Mas às vezes você pode até dizer criando uma função como essa. Kilobytes são, você sabe, empregos no tempo. Porque, você sabe, você pode invocá-lo muitas vezes, como você pode criar dois relógios. Na maioria das vezes você só precisa de um sábio. Então, provavelmente, esta não é a melhor solução para ele. Mas é uma boa ideia treinar coisas assim. Então então você sabe como, você sabe, chamado corretamente. Ok, isso vai para lá. Ouça, muito obrigado. 57. O que são cookies?: Olá Hoje vou dizer-lhe o que são cookies. Como criá-los, como usá-los, etc. Então o biscoito é a solução. A solução para não ser capaz de armazenar variável em todas as páginas possíveis de uma só vez. Você vê, quando estamos no índice html e teremos outro HTM de cinco Quando você cria uma variável, por exemplo, como estes foram capazes não estará disponível em que outro site, certo? Seria apenas uma chegada neuve. Cada vez que está perdendo o contador, você pode ser como eu, mas por que eu precisaria de algo assim? Por exemplo, você pode armazenar. Você pode identificar a pessoa que está visitando seu site. Você pode, então, para exemplos, armazenar a senha de registro, a senha. Mas você pode armazenar que ele está trancado direito, e por causa disso, ele não precisa olhar em todas as páginas. Então você sabe que quando você está no fórum, por exemplo, quando você está revisitando tópicos e quer responder, você não precisa olhar sempre depois de olhar aqueles que você está olhando dentro. Então os cookies estão usando algo para coisas assim. Você pode iniciar as preferências do usuário, por exemplo, ele quer ter o plano de fundo a ser lido. Você pode começar o que está dentro de um formulário, por exemplo, quando ele viveu uma página web. Ou então, quando ele voltar, você pode ver que tudo ainda está na forma porque todas as coisas estão armazenadas em seu computador. Agora os cookies são apenas contêineres que são iniciados no computador do usuário que está visitando seu site, e as coisas são começar como que Rei é igual a 31, em seguida, a tecla ponto-e-vírgula para huh valor para, e você pode então obter esses valores de cookie de documento. Então esta é a solução. Como usá-lo. Vamos usar para criar o botão cookie. Eu criei uma cura para Barton Criar Cookie e remover chutando cozinhar que nós temos um pouco quando eles fazem cozinhar no clique. Hum oh, clique. Eu gostaria de criar o nosso primeiro cozimento, a fim de criar uma cozinha que você digita. Documente que cozinhar, em seguida, o sinal de igual, e você tem que apenas digitar o valor da chave. Você só precisa lembrar que você não pode criar em um cookie de uma só vez. Ok, você pode fazer como Kiki de uma vez assim Quando você faz algo assim, você vai notar quando você cria Cookie e você vai para o fogo de volta, você tem apenas uma chave com o primeiro valor? Ok, então se fizermos algo como nome e então, por exemplo, forem Kaddish, você vai notar que eu criei um cookie. Eu não consigo remover todos esses cookies. Ok, então quando você clica nele, como você pode ver, você está criando o cozimento. Quando você riacho que Morton quer você não está criando outro biscoito, mas você pode mudar. Por exemplo, o valor aqui acabou. Quando você faz coisas assim, como você pode ver, o valor está sendo alterado. Então, a fim de mudar o valor, você apenas digita aqui algo como algo novo, e ele vai funcionar. Ok, agora vamos criar outro cozimento. Então, se você quiser criar mais de um cozimento, você pega um tipo algo, por exemplo, como sobrenome e Senhor são pintinho. É o meu nome próprio. E como você pode ver agora nós temos que ir ao Kiki de uma vez, certo? E o cookie é custado neste domínio. Ele tem o tamanho e ele diz, bom para soprar o caminho é muito importante porque neste momento esta cozinha está disponível. O conteúdo não em todos os lugares, Como eu disse no início da lição, Mas apenas em sub-pastas e esta pasta. Então, se você tivesse algo, esse site, por exemplo aqui, então você não seria capaz de obter este cozimento se você quiser tê-lo disponível em todos os lugares em cada pasta. E isso é muito importante porque às vezes você pode criar uma cozinha Alguns, você sabe, você pode ter os católicos como, por exemplo, cursos de vídeo. Oh, você poderia ir para cursos de vídeo on-line ponto com e você vai notar que quando você vai para, por exemplo, cursos de programação de nove. Certo, vá aqui. Você percebe que se você teve, por exemplo, seu cookie criado aqui, ele estará disponível somente nesta pasta e páginas da Web aqui. Ok. Não estaria disponível aqui no site principal. Você quer tê-lo disponível em todos os lugares e na maioria das vezes ele quer. Porque, por exemplo, quando você olha bem, registrando, ele quer saber exatamente que Ah, que o usuário é. Procure em todos os lugares, certo? Não, não só um lugar. Então você tem que Se você tem Ah que Você tem que tomar sopro e algo assim quando criamos um ganho de biscoito depois de refrescar. Como você pode ver, temos uma boa outra cozinha. Então não mudamos esse cara aqui. Por quê? Porque ele deve dizer a um novo cookie que está disponível em todos os lugares esses cookies na mesa nesta sub-pasta. Ok, então vamos sempre lembrar que você tem que quase sempre fazer algo assim, certo? Então crie cozinhar e ganhar. Temos Vamos remover cookies que já foram criados. Queremos tê-los sempre assim na maioria das vezes. E, bem, o cozimento será removido depois que você fechar o Firefox ou qualquer outro navegador da Web que não restaura a sessão. A maioria eram irmãos restaurando sessão depois, hum, abri-los. Certo, quando você abre, havia irmão. Estão restaurando a sessão que por causa disso, biscoito ainda vai dar o lance. Mas se o irmão do mundo não está fazendo isso mais tempo, por exemplo, experiência estagiária não fazê-lo, cookie vai desaparecer. Às vezes você quer remover o cozimento após, por exemplo, 30 segundos mesmo que você não quer tê-lo sempre. Você sabe em tempo integral no computador do usuário. Quando você quiser alterar a data de validade, você pode usar o flak expire para que você possa decidir algo assim. E então aqui você pode em uma data e esses dias vai ser criado usando o objeto data. Então, a coisa que aprendemos na última seção direita sobre as datas Então nós podemos, por exemplo, que para algo XP operação data fora cozinhar e nova data quando você faz isso assim e então eu usei o formato UTC é muito importante porque requer ex especial. O universo é o tempo universal para a mãe. Certo, então você tem que fazer assim. Andi, quando nós atualizamos aqui e criamos um cookie, como você pode ver quem ele removeu, ele veio ajudar. O problema é que quando você disse aqui uma data de expiração de tempo para o dia, que é agora esta é a data, certo? O novo encontro está nos devolvendo. Agora o biscoito será removido porque quando o criarmos instantaneamente, com um segundo depois desta vez, certo? Então você tem que alterar a data de validade do cozimento. Faça com o, por exemplo, definir o método de tempo. Você pode então usar a data de expiração do cookie recebe tempo e, por exemplo, em 60 me segundos. Uh, isso aqui. Um segundo, 60 segundos. Talvez mais uns 60 minutos. Ninguém. Atualize-o e crie um cookie. Como podem ver, os cookies serão removidos às 58 horas , então é assim que funciona. Agora mudamos a data de validade, e será removida em três horas. Então o usuário vai estar apenas, por exemplo, logado por horas livres como essa. Ou as coisas no primeiro vão começar por três horas fora do curso para armazenar madeira ou algo assim. Ou as coisas no primeiro vão começar por três horas fora do curso para armazenar Você deveria fazer algumas coisas de segurança, outras coisas assim. Mas bem, é a maior parte do tempo. Coisas como travar são feitas no PHP. Certo, então não se preocupe com coisas assim. Você vai usá-lo na maioria das vezes. Então, por exemplo, enviando entre o JavaScript sido PHP alguns valores de valor em quatro para exemplos, armazenando valores nos formulários. Então as coisas não são esquecidas, certo? Quando você vai para você, por exemplo, cursos de vídeo on-line que vêm quando nós vamos aqui e nós adicionamos algo à cesta, você vai notar que nós não fomos aqui em. Nós digitamos você, por exemplo, no principal. Fechamos e pedimos de novo. Não foi. É que alta TC Mary Steve aqui é muito útil porque você não está fazendo áreas. Eles estão zangados, sabe, maioria das vezes. Ah, há muitos, muitos mais insumos, certo? É uma boa idéia começar coisas assim porque o usuário vai ser grato a você . Então é assim que se faz. Antes de exemplo de cookies, certo. Você pode começar isso. Por exemplo. Desligue o nome da entrada aqui, então. O valor dessa entrada aqui. E você pode duvidar, em seguida, verificar se o cookie existe então. Ei, vamos fazer alguma coisa. Então é assim que fazemos coisas assim. Bem, você também pode usar o armazenamento local para isso. O armazenamento local é local. Armazenamento é de html cinco até swing javascript. Mas veja histórias não suportadas, bem como cookies. Ok, Eso não falamos sobre isso agora? Vamos voltar para os biscoitos. Agora não. Devemos realmente aprender também como remover um cookie, e você provavelmente já percebeu ter que fazê-lo. Só precisamos saber algo assim, certo? Então, se quisermos remover um cozimento, é algo como remover o cozimento. E então nós só queremos, por exemplo, remover o direito judeu Arkady. Portanto, queremos remover, por exemplo, o cookie com esse nome com o nome da chave. Vamos remover o desarmamento. E nós só precisamos definir a data de validade que para o dia que aconteceu já direitos, por exemplo, mineiros um aqui. E quando o refugiado o refrescar e podemos remover. Como você pode ver, estamos removendo esse cookie direito Ao clicar nisso, podemos até fazê-lo dessa maneira, porque a verdade é que o tempo está passando por dificuldades. E então quando podemos remover o cozimento e quando a data aqui é a data real, bem, um segundo pontos mais, então um cookie está sendo removido, então é assim que você remove o cookie. Você também pode definir a data de expiração usando algo irá discutir marcas idade. Seria muito legal se fizéssemos isso dessa forma, porque seria um pouco mais fácil. Olhe aqui nós precisaríamos apenas tipos de fato, marca idade e então igual a em. Eu poderia fazer algo como não mais mais mais 16 segundos, por exemplo. Talvez mais. Um pouco mais. E agora, quando nos referimos a folha e criamos um cozimento, como podem ver, o cozimento vai expirar dentro de uma hora. Quando fizermos isso, vai expirar em um dia. Isso é simplesmente incrível, porque bem, como você pode ver, nós não precisávamos criar coisas assim. O problema é que ele não está me apoiando que os especialistas seis e tudo bem, se você não precisa apoiá-lo, então vá em frente. Use esta versão. Isso também é muito legal. Então nesta lição, você aprendeu o que são biscoitos? Como criá-los, como servir valores. Mas como, você sabe, recuperar esses vários mais fácil como criá-los um pouco mais rápido. Remova-os um pouco mais rápido porque se você tivesse que fazer isso toda vez, da mesma forma para casos médicos seria apenas tirar lotes fora lords tempo fora. É por isso que vamos criar nas próximas lições, funções especiais que farão você fazer isso. Biscoitos são muito importantes. Acho que sei que sim. Mas vamos nos concentrar em criar funções que vão fazer você trabalhar com eles vender faz Westen. Muito obrigado. 58. Como criar uma função de de o cookie: Olá. Nesta lição, eu vou te ensinar como criar uma função que vai fazer você criar cookies. Foster, vamos fazer isso. Vamos criar uma função que vamos chamar função, criar cookie. E isso é um argumento. Levará aqui o valor Nome em dias. Não, precisamos criar uma cozinha se é muito fácil fazer coisas assim. E nós só queremos mudar aqui. Agora esse nome vai ser especificado pela pessoa que enviou que dois fez volume de função como , por exemplo, bem, nome ou sobrenome ou idade ou outras coisas assim, certo. E agora não precisamos de você. Os valores vão mudar isso, pai. Você mais, uh, e o quê? Podemos fazer algo com o tempo, mas vamos fazer mais tarde porque é um pouco mais complicado. Vamos fazer algo rápido, Puff. Só assim. Então, quando você faz isso dessa maneira, nós podemos apenas agora a culinária criativa. Eu quero criar um cookie com o nome hum este h 26. Seja qual for. E quando te refrescarmos, vá para o fogo de volta. Vamos remover os cookies da última lição criada cozinhar. Como criar cookie não é uma função criar cookie não é a função que o problema é que tomou da Adidas. Um nome como você. Oh, criar fundo de biscoito. São boas garrafas de fundo. Está bem. Botão Barton. Ok, como você pode ver agora, temos sua idade para entrar seis. Ele está funcionando, então você pode facilmente agora criar cookies sem pensar sobre isso estranho. A maneira realmente muito estranha de criar cookies pode criar outro, e ele vai ser criado muito rápido. É muito, muito útil, bálsamo direito. E agora quando você disse algo sobre dias, se eu não enviar dias aqui, como você notou, nós não temos um perto. Mas essa coisa é então definida para que possamos verificar se dias não é indefinido do que eu gostaria de fazer algo assim expira. Violação com data de validade No início, não haverá nada. Então podemos facilmente adicioná-lo aqui, certo? E isso não afetará nosso casaco, porque não estamos recebendo nada. Mas se há algo enviado para você se há dias desde que você Dan, podemos fazer algo como, por exemplo, criar uma data de expiração de cozinhar como esse e podemos definir aqui quantos dias queremos adicionar. Então, como fazer isso? Bem, podemos usar em vez do set Tempo disse data aan den toe aqui disse obter data hora e apenas aderir dias. Certo? E agora precisamos criar nós dedos atribuídos à data de validade novo valor que será interpretado aqui. Normalmente, só escreveríamos aqui. O que? Algo assim, certo? Assim como precisamos também do ponto e vírgula. Então, nós apenas digitar algo exatamente como que expira igual a data de validade, massa de biscoito difícil, string UTC. E vai ser adicionado aqui se alguém for especificado aqui. Então, se eu quiser que esse cara tenha 30 dias e 20 seja lá o que for, você não é. Não é que agora, quando eu criar um cookie, ele vai expirar em 20 dias. Então é muito útil, certo? Agora podemos criar um cookie com 20 dias de expiração instantaneamente sem pensar neste código novamente. Ok, então é assim que você cria um cookie. Maneira rápida. Na próxima lição, eu mostro-lhe como remover um cookie. Rápido companheiro. Essa é apenas a lição. Muito obrigado. 59. Como remover uma função de de a de: Olá. Hoje vou mostrar-lhe como criar uma função que vai remover um cookie. Maneira rápida. Para fazer isso, vamos criar a função que lhe chamaríamos. Remova Cookie, e tiramos um nome do cookie. Deseja remover? Estamos removendo o fundo que Cokie, fazendo algo assim, só precisamos saber mudar isso, pensar em nomear. Além disso, está tudo bem. Estamos guardando a data de validade para o veículo de data real. Faça um pouco mais de operações. Ele está certo, por exemplo, definindo-o para o dia que já aconteceu. Mas não precisamos, porque o tempo passa no caminho. E acabamos de dizer que o nome do documento de cozinha expira bomba a bomba. Mas você também precisa sempre lembrar que ele só vai remover cookies que tem pop definido para isso. Todos os cookies possíveis. Ok. Se você criar um cookie sem esse caminho sem usar o método de criação de cozimento, então você pode ter problemas, porque o caminho que você pode estar errado. Então levá-lo no meu sempre Então, quando agora usá-lo, por exemplo, por exemplo, removendo cozinhar, podemos remover, por exemplo, por exemplo, cookie idade que é acovardado para fora. Vamos refrescar aqui e o creme de cozinhar. Criar cozinhar. Carreira culinária de verdade. Cokie Remco está trabalhando, então é bom que vai ouvir. Muito obrigado. 60. Cookie - de a de que a: Olá. Hoje eu vou mostrar-lhe como criar uma função que vai ter você recuperar o valor cookies especificando a chave fora do cozimento. Ok, então vamos cumprimentar a função de que ele vai ser chamado de cozinhar pelo nome chave. E eu mandei você e eles estão bem, então como fazer isso primeiro? Vamos ver como o cookie está olhando quando você faz algo assim na frente HTML interno e nós enviamos para você cozinhar documentos. Você não vai. É que você tem com sua tarefa quando criamos mais cookies e estamos atualizados. Como você pode ver, nós temos, mas certamente para o truque. Idade 26. Então poderíamos estar aqui um ponto-e-vírgula e um espaço se tivéssemos mais biscoitos. Então fizemos algo assim. Nome em. Agora aqui está Kaddish. Você notará que não foi criado. Cozinhar? Sim. Crie uma cozinha. Temos novamente cínico nesta base. Significa que podemos dividir para a direita. Poderíamos dividir essa string porque há uma string em chave de valor. valor muito importante sobre você. Como fazer isso. Bem, podemos fazer justiça se, como aquele documento cozinhando que se dividiu e, em seguida, ponto e vírgula neste espaço. Então, por causa disso, temos o bem. Agora uma área fora de cookies quando devolvê-lo fazendo algo assim na digitação garoto. Seja qual for. Porque o nome não está sendo usado agora, como você pode ver, temos Inari. Quem saberia aqui, a vírgula quando fazemos algo como biscoitos fora de zero. Temos nome amargo com lógica, e fazemos chaves fora um. Tínhamos boa idade. 26 Quando fazemos cookies tem que Aqui. O bom nome é Kaddish, certo? Tão bom. Todos os biscoitos aqui? Não, mas agora queremos dividir a chave usando o que você acha que é igual. Ok, então você quer dividir oito por dias, certo? E por causa disso, vamos ter qual nome? Venha na nossa casa de campo. E então podemos obter, por exemplo, o primeiro na chave em. Mas quando fizermos algo assim, teremos o volume, certo? Ok. Então podemos usar essas informações porque precisamos ir a todos os cookies, a fim de encontrar aquele com o nome como o nome deles que vai ser enviado para cá. Então, por exemplo, quando digitarmos seu sobrenome, eu quero chegar lá. O que são tíquete como valor? Certo. Então em usado, por exemplo, de quatro lope. Então precisamos ir aos cookies para todos eles. Então é assim que nossa condição vai parecer para incriminar que eu cada loop Andi Ok, então nós precisamos apenas saber Check oh mais rápido e me fez Vamos dividir o cozimento Então biscoitos fora eu vamos dividir oito por este sinal e que salvar entrou para exemplos variável cookie banhado. Então sabe exatamente o que temos, certo? Divida cozinhando. E agora vamos criar em rótulo privado que representamos nome Cookie. Então espirituoso Cookie Cookie Nome Cookie Key nome. Bem, isso será ainda mais. Especifique um nome específico. Nome da chave de cookie é o primeiro. O 2º 1 é o volume do cookie, mas bem, não precisamos caminho. Não precisa de valor para obter valor porque são juízes de tempo, certo? E se o nome não estiver certo, então se o nome é igual à limpeza de cozimento, então sim, podemos fazer algo como criar volume de cozimento, que é banhado cookie no segundo índice, que é um e você pode apenas retornar o volume de cookies aqui. Certo? E por causa disso você pode ver que conseguimos algo. O que quer que comamos assim para conseguir um nome? Nós só ganhamos. Nós fomos, er, kaddish. Incrível, certo? Esta função vai poupar muito tempo, porque você vai ter que fazê-lo cada um para um punhado. Pegando qualquer coisa do biscoito. Há também algo com escola, armazenamento local, que é mais fácil de usar. Você não precisa criar coisas assim porque elas são articuladas. Mas veja, um armazenamento não é algo que também pode ser usado pelo PHP. Por exemplo, cookies podem ser usados por PHP por Travis keyed por Well ah, e então linguagem web, desenvolvendo linguagem que pode acessá-los e tem um p a para ele. Ok, olha, autoridades só para javascript, é mais fácil de usar, mas também é suportado. Uh, se você quiser apenas fazer algo localmente, você pode aprender sobre armazenamento local. Vai ser eu vou falar sobre isso no HTML cinco curso no futuro, porque estes de html cinco Ok, isso é apenas essa lição. Muito obrigado. 61. Escape: Olá aí. Valores que temos usado até agora eram muito fáceis, mas fáceis. Quero dizer, quando Nenhum caractere especial aqui nós não usamos, por exemplo, caracteres que poderiam ser interpretados por, por exemplo, javascript um pouco diferente. Por exemplo, o ponto e vírgula dentro. Certo? Quando fazemos algo que e aderimos, algo assim seria fresco e criamos um biscoito. Como você pode ver, não está aparecendo aqui quando pegamos um nome amargo. Como podem ver, estivemos de licença sem truques porque o ponto-e-vírgula está reservado para, sabe, foi concebido após a mesma chamada? Deve haver algo como uma nova chave. A vida, por exemplo, expira em algo poderoso que não é algo que com certeza. E há muitos caracteres especiais como esse quando você, por exemplo, quer enviar um U. R l para o cookie A pensa como escapar como inter como codificação é muito importante. Você pode apenas fazê-lo usando a função que é chamado Inco coat. Você é componente. Você só eu estive no valor por causa disso, e você pode ver agora nós temos isso aqui, ese, mas nós também temos que lembrar depois. Se nós no casaco na criação de cozinhar, nós também temos que decodificar o volume de biscoito mais tarde, porque então ele vai ser interpretado corretamente . Você pode ver agora que podemos usar os personagens especiais muito fácil e é assim que você faz isso. Essa é apenas a lição. Muito obrigado. 62. Janelas de Popup: Olá. Hoje vou mostrar-lhe a caixa de informações é o único que irá mostrar a mensagem que você disse que eles queriam. Nós perguntamos ao usuário se o problema sobre fazer algo, e se ele não estiver, ele pode escolher que uma opção de conselho ou quando ele tiver certeza de que ele pode escolher a opção ok. E também sobre o prompt. Isso é apenas pedir ao usuário para a entrada. Ok, então estes são métodos de pés como esse e você pode usá-los usando a janela. Isso e, em seguida, o nome do método. Então, como você pode ver, método como alerta, confiante, prompt está dentro da janela. Mas, porque a janela está em global, você pode foi escopo global. Você pode apenas digitar Allard que temos usado Allah fez muitas vezes, então nós poderíamos apenas digitar coisas como Olá, Iraque. E quando atualizarmos, como podem ver, recebemos a mensagem. Olá, Eric. Se você quiser fazer um lado de entrada, você precisa saber que, para fazê-lo, você precisa usar a barra invertida. E como você pode ver agora nós temos entrada. Caso contrário, ele não será capaz de fazê-lo. Ok, então o que está acontecendo com o vir de quando você faz contas para ele. Você está apenas confirmando se o usuário tem certeza sobre algo para que você possa perguntar. Tem certeza de dilatar sua conta? Bem, isso é muito, muito importante. Se ele encanta sua conta por engano, , ele reproduzir sua lata pode ser um problema, certo? Porque todas as informações podem ser excluídas. Então, ah, aqui temos uma onça para resposta. E como resposta, se, como você pode ver, ele clicar em OK, nós teremos nessa variável. Verdadeiro. Se ele pudesse ser um ex-conselho, teremos o inferno. Falso. Então, quando eu clicar em OK, eu posso dizer alguma coisa. Como se a resposta estivesse bem. Qualquer coisa na condição de que esta Páscoa não é falsa, certo? Então, se responder, então podemos dizer algo como adeus. Alguém que ele recrie sua conta de novo. Então, ok, dê-me. Então, é assim que funciona. Caso contrário, quando ele clica em câncer, nada acontece, certo? Podes fazer-nos se quiseres fazer alguma coisa especial. Se você manter cliques conselho como fazer sua mente eso você pode fazer Você pode perguntar a pessoa sobre algumas coisas muito importantes que ele não faz seu site Se ele tem certeza sobre eles tudo bem. E há também um prompt que poderíamos fazer algo como prompt. Qual é o seu nome e variável aqui. Teríamos o resultado do prompt e poderíamos decidir como alerta. Adeus. Resultado. Ok, então assim. E agora, quando você atualizar Ok. Qual é o seu nome fora? Meu nome é er, Kaddish. Adeus, nossa Kardashian. Então isso é apenas um aviso. Isso é pedir ao usuário a entrada. Há uma beneficiando estas janelas. Como pode ver, posso fazer para lhe dizer qualquer coisa. Quando? Quando isto aparecer. Certo. E às vezes você quer parece que eles, mas a maioria do tempo em dois. Membro, você não quer usar todas essas coisas. A alergia é boa para depuração. O prompt não é bom em tudo. Venha firme é bom para muito, muito confiante, Mostrado todas as coisas coisas muito importantes. Uma vez, quando o usuário vai ter habilidades, eu não posso por engano. Vai causar problemas. Certo? Então talvez a confusão seja boa, mas só sei que agora é que as pessoas inventam uma solução melhor para coisas assim. O que? Bem, você poderia, por exemplo, mostrar uma caixa aqui no fundo, certo? E você diria alguma coisa. Tem certeza sobre essa coisa? Se não, clique para trás e ele iria apenas relaxar e tudo será revertido para a direita em. Se ele não ranger, a caixa desaparecerá depois de alguns segundos. É difícil diligir. Não, nós só precisamos criar uma caixa aqui, em seguida, começou a exibir non. E se ele clica em algo que esta imagem muda para de de exibição não para exibir bloco. E então a mensagem será mostrada. Se ele fizer a ré, só precisamos desfazer o que foi feito. Então, por exemplo, quando ele acrescenta, então podemos apenas subseção direita. E você poderia começar essas informações em algum lugar. E se ele não fizer nada depois, por exemplo, 10 segundos foram tão usando o tempo definido. Admita, podemos fazer estes boxe desaparecerem. Este é o seu exercício para o disco A. Para esta lição. Acho que esta solução é melhor para perguntar coisas. Bem, talvez não para isso em conta, mas para, você sabe, coisas simples que o usuário está fazendo porque quando, por exemplo, ele está removendo registros, Certo? Bem, isso é algo que pode causar problemas, certo? Mas a verdade é que quando alguém rasteja removendo o... ele precisaria sempre sotaque de Creek. Ativo, ativo, ativo, ativo. Ele decola desta vez, certo? E quem por homem, tenho certeza. Por que preciso te dizer isso todas as vezes? Então é melhor mostrar uma caixa e procurar justiça. Remova. Oh, eu é verdade. Tenho que reverter isso. Certo, essa é a melhor solução. Acho que é só a lição. Muito obrigado. 63. Métodos de de de matemática - arredondamento: Olá. Hoje vou mostrar-lhe métodos matemáticos úteis que você provavelmente não pode usar em sua aventura fora de programação em javascript. Então, o primeiro método é chamado em torno do qual o Irã é o número para o professor mais próximo. Às vezes você pode ter um inteiro parecido com isso, mas você quer tê-lo como um inteiro completo. Certo? Então, como fazer isso? Você é apenas algo como matemática que por aí. E como você pode ver, temos agora aqui para este arredondamento para o primeiro número aqui. Está bem? E está arredondando a matemática, que significa que se você tem algo assim, você vai ver livre. Se você tem algo assim, você se torna nazista também. Ok, então abaixo de cinco aqui na primeira posição depois do ponto. Então nós sempre vemos o número que o problema. Se o número após o ponto for maior que cinco. Oh, você sabe, depois de cinco anos, por exemplo, um. Então você vai ver livre. Você tem também, algo bom é chamado teto. O teto é em nossa casa, certo? Então você sempre corre. Então, se você fizer algo assim, você sempre verá o livre em uma situação como essa. Mesmo como você pode ver, está funcionando como se o piso estivesse funcionando um pouco diferente porque o chão é baixo em nossa casa . Então você corre sempre para baixo. Então, quando você tem mesmo 2.99999 você ainda vai ver também. E você tem também o algo que está observando a biblioteca de matemática, mas é muito útil. E eu acho que eu deveria falar sobre isso agora porque, como você pode ver, estamos arredondando para apenas um número. E se eu quiser manter as coisas que estão atrás do ponto E se eu quiser? Mesmo que não haja coisas depois disso para mostrar zeros. Então, por exemplo, quando eu faço algo assim, hum, sem o meu andar você não é que nós temos que 0000 OK, às vezes você quer manter como as coisas são impressas em seu site e quem Por causa disso , você só diz que deve ser consertado. Deve ser sempre livre posição após o ponto e também significa que se você vai fazer algo nove 677 ele precisa que temos trabalhado nove livre e ajuda porque sete é maior do que cinco. Então isso vai ser um E como você pode ver agora nós acertamos. Então, ele também está em execução, mas a parte que está depois do ponto OK, e isso é vários com não está na biblioteca matemática. Mas mesmo que eu não te ajudasse agora, você provavelmente saberia que ouvir sobre isso seria difícil encontrar essa função porque é difícil encontrá-la, ok? E há também um B nós, que significa valor absoluto, o que significa sempre puxado positivo. Às vezes, você deseja alterar o valor. Isso negativo negativo. Então faça algo assim com o valor do dis positivo. Então, como você pode ver agora, é positivo. Até dizer que temos o seu menos certo. Pensa assim são úteis quando você quer, por exemplo, fazer subestritos valores e o resultado é negativo quando os resultados devem ser positivos porque, por exemplo, você quer verificar como, um como os homens em quanto tempo é a parte de um lugar para outro na Europa, por exemplo, tela direita quando você clica aqui e, em seguida, aqui e você, por exemplo, subdefinir o número a partir daqui você terá o valor positivo. Mas se você parar como primeiro, esses valores a partir deste valor. Então, por exemplo, você tem aqui, por exemplo, para 300 pixels. Se você tem 500 picaretas é então você tem valor negativo. Mas a subestrutura em destes que diferença deve ser positiva no caminho. Certo? Então um bs é útil para coisas como que você tem também, algo vai discutir poder muff para que você possa obter por exemplo Ei, eu quero ter o, hum eles são livres para o poder desligado, por exemplo livre. Então isso significa que temos aqui 27 direito livre multiplicado por multiplicações livres muito livres. E também há alguns problemas. Quando você faz coisas assim, você deve saber que a partir de agora, o tipo fora do tipo de é um método que vai lhe dar o tipo da variável. Como você pode ver cadeia de doença. Quando você faz assim, você tem um bom número, e às vezes você pode ter cordas como eu sou e às vezes as pessoas podem comprar tipos místicos. Eu estou pensando direito, e por causa disso, quando você faz, mesmo quando você faz algo como, por exemplo, matemática que ao redor. Como pode ver, sabemos bem o número. Então isso não está funcionando em coisas que coisas assim, mas você pode poder. Então podemos, por exemplo, partes para integer toda essa coisa e por causa disso. Como você pode ver, ele está funcionando bem, porque esta função vai tomar a parte que está parecendo inteiro. E esta parte é esta. Se você fizer as partes flutuam, ele vai levar também números após o ponto Então ele não vê a função rand, porque esta rodada apenas para o inter gengibre sem o ponto eso Vamos usar isso para corrigir agora , então x dois fixo e fazemos algo como, por exemplo, números livres. E isso é algo cartão como que você pode ver que pensamos de livre que 1 a 5 sem as partes flutuam. Isso não está funcionando porque não podemos trabalhar com string como um número, certo? Então, às vezes, as coisas são importantes. Na maioria das vezes em javascript você não precisa se preocupar, mas em situações como essa, é importante porque bem, às vezes você pode tomar, por exemplo, quem tem classe, e você pode ter um conjunto de 50 seis. E se você quiser apenas este 56 partes de contraste direito. Está bem. Sobre e como fazer números aleatórios. Isto é muito, muito importante. O tópico falará mais sobre isso na próxima lição. Nesta lição, eu gostaria apenas de mostrar que este retornando o valor assim quando eu vou continuar atualizando o site que você pode cidades está mudando para o Irã, o número olhando assim. E precisamos mudar de alguma forma para, por exemplo, números de 0 a 10. E podemos usar algo assim para, por exemplo, para, por exemplo, citações geralmente aleatórias em seus sites ou algo aleatório, seja lá o que for. Então é assim que você cria outro número. Mas também precisamos saber como criar, ter dedo do pé, torná-lo melhor. Como se você quisesse mudá-lo de um número como esse para, por exemplo, libertar 45 e esta coisa vai fazer a próxima lição. Há muitos, muitos, muitos outros assuntos na matemática. Como, por exemplo, você pode vir o custo dos idosos e outras coisas como essa La Guardia. Mas a verdade é que em bem, eu vou caçar 95%. Você não vai usar coisas assim. Se precisar deles, vá em frente para a matemática. É estrangeiro. Basta digitar a avó amigos livres JavaScript e você encontrar todos os métodos. Na maioria das vezes. Você só precisa usar esses. Há os mais importantes. Não desta vez. Estou procurando algo que você não precisa. Certo. Certo, só tem essa lição. Muito obrigado. 64. Como gerar números aleatórios: Olá. Nesta lição, vou mostrar-lhe como gerar um número aleatório. Para fazê-lo, você tem que usar o muff em torno deles função. E como você pode ver quando eu me refiro a esse site que você não é é que nós temos um número estranho . O número é muito grande depois do ponto, mas há sempre zero aqui. Então este número está sempre entre zero e um. O problema é que isso não é muito útil para nós, certo? Na maioria das vezes queremos um número inteiro. Queremos ter 012345 Então podemos usá-lo, por exemplo, como um índice para Inari. Então podemos mostrar, por exemplo, a partir das citações de área ou algo assim. Bem, massa e exercício assim na próxima lição. Mas nesta lição, vamos aprender como gerar corretamente esses números. Então, a fim de obter agora, por exemplo , números maiores, sugiro multiplicá-lo por, por exemplo, como você pode ver agora nós temos bons números entre zero e dois. Então sim, isso está começando a funcionar melhor e bem, nós queremos apenas ir embora com esta parte do número, e vamos fazê-lo usando o Meu andar importado agora, Como você pode ver, nós temos bom números entre zero e um. Então, se eu digitar você por exemplo cinco, você vai notar que temos números entre zero e para a direita. Ok, então isso é muito legal, porque você pode gerar números muito fáceis entre zero e cinco. Mas como podemos gerar números que não estão entre zero e algum número? Certo. Se você quiser ter zero e 100 entre zero e 100 basta digitar. Soa assim, certo? E eles devidamente entre zero e 100 se você quiser. Entre zero e 11 ou zero, você só digitaria dois. Então você apenas rebocar você tem, tipo, menos um resultado certo nesta parada. Mas se você quiser de alguma forma obter números de, por exemplo, um e livre como fazê-lo? O que aconteceria se eu adicionasse um aqui? Significa que o mínimo agora é um direito. Bem, se aqui é zero ponto zero alguma coisa, algo como o chão vai levá-lo para 00 mais um é sempre um. Então isso faz com que a lua de muitos agora seja uma, certo? Nós estamos fazendo isso. Então é no Lee um se eu digitar aqui ao mínimo é agora também Então dois. Além disso, a coisa que este meu é um é que disse que vamos ter o número a partir de agora, certo? Então, cada tipo aqui livre será entre livre e quatro. Se você aderir mais um assim estaremos entre livre e cinco. Se eu tivesse aqui mais um será bonito Win entre livre e, hum procura direito está funcionando bem. Então é assim que você classifica o que quiser com o número aleatório. Mas na maioria das vezes você só vai querer gerar números de zero para, por exemplo, Ah, 10 para 2030. Ou às vezes você quer apenas saltar o mais um tempo. Você não pode de uma forma em javascript de zero Quando você quer gerar números, você quer a maioria do tempo tê-lo de contagem de zero e vai usar este método que dura lição foi onde nós iria gerar citação aleatória que vender a lição. Muito obrigado. 65. citações aleatória: Olá. Na última lição, você aprende como criar um número aleatório usando a função aleatória. Para fazê-lo, você só precisa digitar aqui o direito. Arranje os números que ele quer. Então, se quiser pegar o número de zero para grátis, vai digitar algo assim? Você não precisa de zero aqui para que possamos digitar algo assim. E hoje eu mostraria como criar um programa. O script A que mostrará ao usuário citações aleatórias em seu site quando ele visitar seu site. Ele vai ver cada vez, um casaco aleatório e aqui eu tenho quatro citações legais. Acho que uma pessoa que nunca cometeu um erro nunca tentou nada. Você vamos pagá-lo e vamos criar uma variável que armazenamos nossa cotação. Eu acho que esta deveria ser uma área porque nós podemos tirar homens deles lá e eu morreria , mas aqui assim. Não importa o quão devagar você vai, desde que você não pare. Certo, isso é muito legal. Então, cubra o próximo. Podemos encontrar muitas derrotas, mas não podemos ser derrotados. Ok, vamos adicioná-lo às nossas citações. E se você pode sonhar, você pode fazê-lo. Então vamos fazer assim, idiota. E agora por que eu adicionei a uma área porque olhe aqui agora, nós geraríamos números de zero para livre. Certo? Zero Quer libertar? Ei, isso é o que queremos. Não podemos usá-lo assim. Citações. Estamos no número abaixo. E como você pode ver agora nós temos aleatoriamente o que em nosso site chorou, não é? Agora podemos adicionar também nossos alteradores como se conectar. Citar com alteradores. Podemos apenas criar outra variável que chamamos, por exemplo, altera e bem, apenas um sinal aqui. Autores, se a mesma ordem. Então, Albert Einstein conflito Confúcio, talvez eu esteja entendendo errado. Então eu sinto muito. Não conheço algumas dessas línguas. Ok, então, assim. E agora você pode apenas digitar algo que cita e, em seguida, você pode digitar algo como alterar eleitores direita fora número aleatório que foi gerado aplicativo, Topia. Como você pode ver agora temos boa citação aleatória e o outro, claro, você pode fazê-lo parecer melhor e este é o seu exercício. Criar você, Dave, eu, por exemplo, citar E dentro destes ele deve ter dois vãos, por exemplo, para o exterior e também para o e citar. E, por exemplo, faça a citação com o CSS Stites para melhor. Então, é, por exemplo, escrito em itálico e o exterior, por exemplo, seria por exemplo, negrito. E seria menor. Certo? E você deve inserir no Despond em vez de inseri-lo assim. Ah, a citação no outono aquela zona aquela lição. Muito obrigado. 66. Localização de janela: Olá. Hoje vou mostrar-lhe como obter a localização que você é l o lugar onde seu usuário está em seu site o sopro Como você pode ver em ordem juntos, você apenas digitar localização da janela e bem temos Bom, então o caminho com o domínio com o sub-pastas com o na demanda de fala aqui e pensar assim é útil porque você também pode alterá-lo usando a janela, esse local quando algo assim seria útil. Por exemplo, vamos criar um link você mesmo. Bem, mude o lugar. Por exemplo, html de exemplo. Ok, vamos dar um 19. Vamos criar o seu html cinco. Andi, quando eu clicar nele, como você pode ver onde mudar o site E se eu quisesse fazer algo antes de ir a este site, certo? O usuário mudou algo no site. Só quero que ele vá lá. Mas só depois de fazer algumas coisas no script Java certo? Você precisa fazer algumas operações antes de permitir que ele vá lá. Bem, a fim de fazê-lo, temos que obter essa amostra. Então vamos obtê-lo usando o elemento get por I d. E agora precisamos mudar o próprio clique mesmo porque podemos usar o objeto par que falamos . Você também pode usar o método padrão comprovado que está impedindo o comportamento padrão. Por isso, neste momento, não vamos para a U.R. O problema é agora que como mudar depois de mudar as coisas que queremos fazer, hum, que você está bem, como mudar o local. Imagine que temos aqui operações de homens como, ah que queríamos fazer. Imagine que temos aqui operações de homens como, E agora queremos mudar a localização. Como fazer isso. Nós só ganhamos o local e mudamos para HTML simples, certo? É possível ver quando Creegan que nada está funcionando muito bem. O problema é que se eu mudar a garota, eu teria que mudá-la também na vaca. Mas olá. Eu conheço o JavaScript. Você também sabe o JavaScript agora mesmo porque você assiste todos os meus vídeos. E você sabe que se estamos aqui na variável de amostra porque este é o manipulador do elemento aqui, certo? Podemos usar algo assim. Isto vai se referir a este exemplo agora, e podemos obter este atributo aqui. Então, obtenha atributo. Método está esquecendo esse valor. Certo? E você pode apenas tipo de idade re Ferentz e aqueles. Tudo bem, agora, como você pode ver, o link está funcionando. Mas você pode fazer operações de homens antes de ir para a deslocação. Ok, isso é apenas uma boa lição. Muito obrigado. 67. Pré-carregamento de imagens: Olá. Hoje vou mostrar-lhe como carregar imagens somente quando eles são necessários. Porque, às vezes, quando o usuário raciocina seu site, ele não vê todas as imagens possíveis que começam o início, certo? Ele não vai rolar para baixo na maior parte do tempo. E por causa disso, você pode salvar seu curativo. E, ao mesmo tempo, o usuário carregará seu site mais rápido porque ele não precisará carregar todas as imagens possíveis que estão escondidas em algum lugar, certo? Você pode pré carregá-los. Você pode carregá-los quando você acha que eles podem ser necessários em breve. Por exemplo, quando ele está rolando para baixo quando há um pergaminho que você também pode amar certo? Porque temos irregulares na rolagem. Poderíamos fazer isso com um rival igual em pergaminho e o cara está se movendo para baixo e ele está muito perto da imagem até o final, você sabe, conteúdo. E logo deve haver imagens. Devemos pré-baixar os arquivos de imagem porque ele não diria isso ou algo assim, ou devemos pré-carregá-lo como 500 pixels antes, certo? Algo assim também é chamado, por exemplo, por exemplo, quando alguém está tendo um controle deslizante direito quando há um controle deslizante com imagens de dinheiro que você pode pré Lei escreveu. Você pode carregar sobre as imagens que estão visíveis que começam. Mas quando há mais imagens que não são vistas, você pode carregá-las quando o usuário vai simplesmente dizê-las em breve. Certo? Então é quando você usa algo assim. E agora vamos fazer isso direito. Como pré baixa-los talvez filho para carregar imagem apenas com JavaScript como fazê-lo. Então temos aqui dif para imagens onde vamos começar novas imagens temos bastão se a identificação carregar mais sobre botão. E temos a imagem única deste começo. Certo. Certo, então temos algo assim. Temos que descarregar a janela. Temos boa carga dis, mais garrafa e no clique, mesmo que vamos invocar essa função de imagens pobres e como criar uma imagem em javascript, a fim de fazê-lo. Você só precisa fazer algo assim. Imagem Var. Nova imagem. Certo, agora temos uma imagem sem a fonte. Temos que definir a fonte. Ok, então como fazer isso? Você apenas digita imagem que fonte como nosso C e então você digita a fonte de, por exemplo, aqui, imagens barra tela um J p. D. E sim, então nós temos boa a fonte agora, E vamos ver como funciona quando você vai atirar de volta. Como você pode ver, nós carregamos todas as imagens. E como você pode ver, nós carregamos contra um verde. Mas, claro, você pode carregar outra carne. Então, quando eu clicar sobre ele, como você pode ver, nós anunciamos indo para carregado, certo? Bastante incrível. Nós o carregamos apenas clicando no fundo. Certo, então, hum, quando agora precisamos nos inserir em nosso site como fazer isso. Bem, vamos aproveitar esses dias aqui. Certo. Então vamos criar um manipulador para isso, obtendo-os e por imagens ideais e agora com algo como imagens, e acho que podemos acontecer com a criança bem. Nós não devemos usar o HTML interno porque nós vamos upendê-lo mais de uma vez. Certo? E em nosso HTML é re analisar tudo o que aconteceu, tentou ser mais rápido e nós apenas descer assim sobre ah, imagens para cima na criança. Claro que sim. Aqui precisamos citar como poderia A esquece como você pode ver agora quando clicamos nele, estamos carregando imagem. Estamos carregando os mesmos meios. Então, como carregar outras imagens? Poderíamos, por exemplo, criar uma variável, que ouvi. E nós poderíamos apenas inserir aqui, certo? Bomba I plus plus Então nós vamos apenas aumentá-la toda vez. Então vamos dar uma olhada nisso. Começou. Deve ser um, porque você está começando com um bálsamo de direita e bomba, como você pode ver. Nova imagem bum novamente. Nova imagem. Ótimo. Agora há mais problemas. O problema é que o fundo não está se movendo. Tem que mover a parte inferior para o final do nosso site que corda um pouco Em primeiro lugar, devemos remover a imagem tese. Bem, este fundo tem que fazê-lo. Ah, o carregamento Mais imagens está envolvido pela carga mais fundo Então, mas o botão que eu quero destruir eu quero remover. Então isso está se referindo a esse padrão e agora queremos ir para a nota perdoada. Então, se você usar a nota pai que você está no edifício e, em seguida, você pode usar o remover o método filho que está removendo filho e podemos apenas sob estes. Então, se algo assim quando clicarmos nele, como você pode ver, como você pode ver, estamos e obtendo uma nova imagem aqui, enquanto o mesmo aqui, aqui, aqui, mudar para o soviético. Não repita, mas temos a nova imagem, mas o botão é removido. Ok, então não temos mais nenhum e um bastão. Como saber nesta festa, no final, fora do nosso site. Bem, devemos antes de remover este botão. Devemos também iniciar o clone fora dele para que possamos criar um botão variável, um botão, botão botão, carregar mais. Devíamos ir. Talvez carregar mais clonagem de botão que há um nome melhor e precisamos clonar. Então precisamos clonar isso certo? Pretendo vir dias Kalon. Observe isso e você funcionaria. Você não sabe disso. Eu não te mostrei. E isso se chama clonagem. É apenas cumprir todas as coisas da data dos dias, que é desta vez um pouco mais baixo, certo? E quando temos que definir aqui aflac verdadeiro ou falso, o verdadeiro significa que queremos copiar tudo dentro. Então, por exemplo, este Texas permitiu mais imagens. Se você disse que também cai. Nós temos problemas. Tão arrependido. Lembre-se de colocar o rebanho aqui de pé. Então, agora, temos esse fundo cumprido para que possamos adicionar depois, por exemplo, removê-lo para o nosso documento. E nós vamos nos referir ao corpo e então vamos upender a criança. Vamos carregar mais clones de botões. E como você pode ver, quando eu entrei no críquete, nós temos boa ou a mão. O problema é que quando eu clico novamente, como você pode ver, ele não está mais funcionando. Por quê? Porque clonagem não significa que clonamos também unidos, certo? Então, a fim de repará-lo, nós apenas fazemos algo assim Depois de arranhar, eu quero que também aconteceu novamente. Toe Oakley no clique bomba bomba mesmo direita. Como você pode ver, está quebrando cinco. Agora, quando clicamos novamente bem, temos sobre as imagens livres. Não devemos ser capazes de clicar nele. Certo, então devemos criar algum tipo de condições. Então, se eu for maior que quatro, então bem, menor que quatro, então invocar coisas assim, certo? Ok. Bom, bom. Não está funcionando no mais direito, então não temos um mais perto, mas a carga Mais imagens deve desaparecer depois que você sabe o depois depois de algumas coisas assim . Se eu for igual, bem, não igual a livre. Eu não iria simplesmente não invocar novamente a operação de clonagem. Então esta parte não será invocada. Tudo bem? Ok. Então, como aquela bomba muito se Eisner for igual a liberar algo estiver errado. Mas eu não sei o que nós tumba bomba sensorial desigual se eu não estiver equipado de graça, hum, se eu for igual a muito longe Então é claro porque nós temos a incriminação aqui. Foi por isso que cometi este erro. Como você pode ver, mesmo se você é avançado, programar sua casa fazendo homens em muitos me seis música simples porque você pode vê-lo o olho depois disso vai antes. Então, se não quisermos que seja para uma carga, mais imagens diminuíram mais imagens. E agora, como você pode ver, está funcionando bem. Nós carregamos todas as energias possíveis em que está tudo ligado. Você sabe que agora precisamos entrar em discreto, se você quiser. Queremos ter o nosso roteiro, trabalhando com novas imagens que aderimos. Então, estes são scripts problemáticos que você poderia atualizar Vie, por exemplo. Algo seria Scott Ajax. Você pode então verificar a partir deles banco de dados se há mais imagens e obter fontes deles. Então esta provavelmente seria uma maneira melhor de fazer coisas assim. No entanto, neste momento, não conhecemos o Ajax. E por sua causa, você tem que montar o casaco assim? Eu acho que o aprendizado é ouvir, aqueles fora ferramentas úteis por causa disso. Você vai dizer bruxa banda e, ao mesmo tempo, melhorar a experiência do usuário em seu site. É só essa lição. Muito obrigado. 68. Pré-carregamento de imagens: Olá. Hoje vou mostrar-lhe como carregar imagens somente quando eles são necessários. Porque, às vezes, quando o usuário raciocina seu site, ele não vê todas as imagens possíveis que começam o início, certo? Ele não vai rolar para baixo na maior parte do tempo. E por causa disso, você pode salvar seu curativo. E, ao mesmo tempo, o usuário carregará seu site mais rápido porque ele não precisará carregar todas as imagens possíveis que estão escondidas em algum lugar, certo? Você pode pré carregá-los. Você pode carregá-los quando você acha que eles podem ser necessários em breve. Por exemplo, quando ele está rolando para baixo quando há um pergaminho que você também pode amar certo? Porque temos irregulares na rolagem. Poderíamos fazer isso com um rival igual em pergaminho e o cara está se movendo para baixo e ele está muito perto da imagem até o final, você sabe, conteúdo. E logo deve haver imagens. Devemos pré-baixar os arquivos de imagem porque ele não diria ou algo assim, ou devemos pré-carregá-lo como 500 pixels antes, certo? Algo assim também é chamado, por exemplo, por exemplo, quando alguém está tendo um controle deslizante direito quando há um controle deslizante com imagens de dinheiro que você pode pré Lei escreveu. Você pode carregar sobre as imagens que estão visíveis que começam. Mas quando há mais imagens que não são vistas, você pode carregá-las quando o usuário vai simplesmente dizê-las em breve. Certo? Então é quando você usa algo assim. E agora vamos fazer isso direito. Como pré baixo o talvez filho para carregar imagem apenas com JavaScript como fazê-lo. Então temos aqui dif para imagens onde vamos começar novas imagens temos bastão se a identificação carregar mais sobre botão. E temos a imagem única deste começo. Certo. Certo, então temos algo assim. Temos uma janela em carga. Nós temos isso. Esta carga mais garrafa e no clique, até nós vamos invocar essa carga. Função de imagens pobres e como criar uma imagem em javascript, a fim de fazê-lo. Você só precisa fazer algo assim. Imagem Var. Nova imagem. Certo, agora temos uma imagem sem a fonte. Temos que definir a fonte. Ok, então como fazer isso? Você apenas digita imagem que fonte como nosso C e então você digita a fonte de, por exemplo, aqui, imagens barra tela um J p. D. E sim, então nós temos boa a fonte agora, E vamos ver como funciona quando você vai atirar de volta. Como você pode ver, nós carregamos todas as imagens. E como você pode ver, nós carregamos contra um verde. Mas, claro, você pode carregar outra carne. Então, quando eu clicar nele, como você pode ver, nós anunciamos indo para carregado, certo? Bastante incrível. Nós o carregamos apenas clicando no fundo. Certo, então, hum, quando agora precisamos nos inserir em nosso site como fazer isso. Bem, vamos aproveitar esses dias aqui. Certo. Então vamos criar um manipulador para isso, obtendo-os e por imagens ideais e agora, com algo como imagens, e acho que podemos acontecer com a criança bem. Nós não devemos usar o HTML interno porque nós vamos upendê-lo mais de uma vez. Certo? E em nosso HTML é re analisar tudo o que aconteceu, tentou ser mais rápido e nós apenas descer assim sobre imagens ah na criança. Claro, aqui precisamos citar. Como poderia um esquece como você pode ver agora quando clicamos nele, estamos carregando imagem. Estamos carregando os mesmos meios. Então, como carregar outras imagens? Nós poderíamos, por exemplo, criar uma variável que eu ouço e nós poderíamos apenas inserir aqui, direita Bomba I plus plus Então nós vamos apenas aumentá-la cada vez. Então vamos dar uma olhada nisso. Começou. Deve ser um, porque você está começando com um bálsamo de direita e bomba, como você pode ver. Nova imagem bum novamente. Nova imagem. Ótimo. Agora há mais problemas. O problema é que o fundo não está se movendo. Tem que mover o fundo para o fim do nosso site que corda um pouco. Em primeiro lugar, devemos remover a imagem da tese. Bem, este fundo tem que fazê-lo. Ah, a carga Mais imagens está envolvida pela carga Mais botões então, mas o botão que eu quero destruir eu quero remover. Então isso está se referindo a esse padrão e agora queremos ir para a nota perdoada. Então, se você usar a nota pai que você está no edifício e, em seguida, você pode usar o remover o método filho que está removendo filho e podemos apenas sob estes. Então, se algo assim, quando clicamos nele, como você pode ver, como você pode ver, estamos e obtendo uma nova imagem aqui, enquanto o mesmo aqui, aqui, aqui, mover para o soviético. Não repita, mas temos a nova imagem, mas o botão é removido. Ok, então não temos mais nenhum e um bastão. Como saber nesta festa, no final, fora do nosso site. Bem, devemos antes de remover este botão. Devemos também iniciar o clone fora dele para que possamos criar um botão variável, um botão, botão botão, carregar mais. Devíamos ir. Talvez carregar mais clonagem de botão que há um nome melhor e precisamos clonar. Então precisamos clonar isso certo? Pretendo vir dias Kalon. Observe isso e você funcionaria. Você não sabe disso. Eu não te mostrei. E isso é chamado de clonagem é apenas cumprir todas as coisas da data dos dias, que é desta vez um pouco mais baixo, certo? E quando temos que definir aqui aflac verdadeiro ou falso, o verdadeiro significa que queremos copiar tudo dentro. Então, por exemplo, este Texas permitiu mais imagens se você disse que também cai. Temos problemas. Tão arrependido. Lembre-se de colocar o rebanho aqui. Então, agora, temos esse fundo cumprido para que possamos adicionar depois, por exemplo, removê-lo para o nosso documento. E nós vamos nos referir ao corpo e então vamos upender a criança. Vamos carregar mais clones de botões. E como você pode ver, quando eu entrei no críquete, nós temos boa ou a mão. O problema é que quando eu clico novamente, como você pode ver, ele não está mais funcionando. Por quê? Porque clonagem não significa que clonamos também unidos, certo? Então, a fim de repará-lo, nós apenas fazemos algo assim Depois de arranhar, eu quero que também aconteceu novamente. Toe Oakley no clique bomba bomba mesmo direita. Como você pode ver, está quebrando cinco. Agora, quando clicamos novamente bem, temos sobre as imagens livres. Não devemos ser capazes de clicar nele. Certo, então devemos criar algum tipo de condições. Então, se eu for maior que quatro então bem, menor que quatro então invocar coisas assim, certo? Ok. Bom, bom. Não está funcionando no mais certo. Então nós não temos um mais perto, mas a carga Mais imagens deve desaparecer depois que você sabe o depois depois de algumas coisas assim. Se eu for igual, bem, não igual a livre. Eu não iria simplesmente não invocar novamente a operação de clonagem. Então esta parte não será invocada. Tudo bem? Ok. Então, como aquela bomba muito se Eisner pilar tudo para libertar algo está errado. Mas eu não sei o que nós tumba bomba sensorial desigual se eu não estiver equipado de graça, hum, se eu for igual a muito longe Então é claro porque nós temos a incriminação aqui. Foi por isso que cometi este erro. Como você pode ver, mesmo se você é avançado, programar sua casa fazendo homens em muitos me seis música simples porque você pode vê-lo o olho depois disso vai antes. Então, se não quisermos que seja para uma carga, mais imagens diminuíram mais imagens. E agora, como você pode ver, está funcionando bem. Nós carregamos todas as energias possíveis em que está tudo ligado. Você sabe que agora precisamos entrar em discreto, se você quiser. Queremos ter o nosso script, trabalhando com novas imagens que aderimos Então estes são script problemático que você poderia atualizar vie, por exemplo. Algo seria Scott Ajax. Você pode então verificar a partir deles banco de dados se há mais imagens e obter fontes deles. Então esta provavelmente seria uma maneira melhor de fazer coisas assim. No entanto, neste momento, não conhecemos o Ajax. E por sua causa, você tem que montar o casaco assim? Eu acho que o aprendizado é ouvir essas ferramentas úteis por causa disso. Você não pode dizer bruxa banda e, ao mesmo tempo, melhorar a experiência do usuário em seu site . É só essa lição. Muito obrigado. 69. Slideshows: Olá. Hoje vou mostrar-lhe como criar uma fatia. O barra O é apenas imagens que estão mudando depois de alguns segundos. Algo assim é muito útil porque você pode mostrar na página principal mais de uma imagem em uma posição. É muito útil nas lojas para que os usuários possam ver promoções que estão acontecendo nesta loja. Certo. Você pode até atualizar esse creep para fazer algumas transições entre imagens. Como você pode ver agora, isso parece melhor, certo? Essa animação vai fazer no próximo menos agora vamos criar uma apresentação de slides simples que está apenas mudando imagens depois de alguns segundos. OK, então nós temos no índice html O ligeiro mostrou se e nós temos tomado aqui para estas variáveis e agora nós gostaríamos de inserir imagens lá porque no início nós não temos nada, certo. Então queremos inserir todas essas imagens como fazê-lo. Bem, por exemplo, podemos criar um ar I imagens fontes e estamos apenas digitar suas fontes tela direita uma tela também, e tela livre. Então, esta é uma boa idéia até o momento fez. Dessa forma, talvez possamos usar. Você sabe que os números querem liberar com o aerador ele para que pudéssemos criar variável I e mudança etcetera estavam fazendo quando os tempos nas aulas antes. Mas os nomes podem ser diferentes. Às vezes você quer posicionar o uso. Você vê o cirurgião CEO Direitos de Otimização Gigante. Você tem que nomear suas imagens corretamente, certo? Então vamos fazer isso assim fora do curso. Você também pode inserir imagens aqui no início direito. Você poderia insultar imagens aqui, e se você fez isso, você poderia apenas obtê-las usando o documento. Obter janela de apresentação de slides elemento e apenas ir para a direita da China, então não há nenhum problema. Você pode fazer das duas maneiras, mas vamos ler o que eu escolhi. E agora vamos para todas essas fontes de imagens. E vamos apenas criar Vamos carregar essas imagens, certo? Então vamos criar um quatro lope. Vamos inicializar o I 20 E se eu é menor do que imagens fontes comprimento ponto, vamos apenas cada vez depois de cada iteração depois de cada vez, o olhar vai passar em dois que eu quero. Então agora podemos, por exemplo, criar uma imagem temporária aqui e fazê-lo peso morto. Portanto, a seção de imagem é muito importante nesta lição. Criamos uma imagem, e agora podemos definir a fonte dessa imagem criada. Para imagem é uma pasta como essa. E agora só precisamos aderir. Ali, Amy. Apenas fonte. Bem, tudo bem. Tudo bem. Como isso. E não um que nos referimos. Gee, então vamos para o incendiário para dentro do casaco de rede. Como você pode ver, as imagens são carregadas. Agora só precisamos adicioná-los às nossas armas. Então, a fim de fazê-lo, nós apenas digitamos um show ligeiro, upendo a criança. E toda vez que desligamos a imagem que foi criada aqui, e como você pode ver agora aqui, coloque todas as imagens lá. E se você quiser adicionar mais uma imagem, não há problema só aqui uma vírgula e o nome da imagem que você adere, certo? E o teu programa vai funcionar. Ainda encontrar Ok. Então, agora vamos fazer isso porque, ei, eu não o caço para ficar assim. Eu não sei. Eu quero que eles sejam colocados um no outro. Ok, então para fazer isso, vamos para a apresentação de slides e para as imagens. E me disseram que a posição para absoluta a posição significa absoluta. Então estamos tirando as imagens do fluxo e sua posição absoluta para o corpo. Então, para o canto superior esquerdo, direita. O que significa também que quando aderimos, por exemplo, ataques aqui você não está, é que isso leva simplesmente desapareceu. E então devemos ir para a apresentação de slides e definir aqui. Em primeiro lugar, o 384 e 373 107 como com e altura, certo? Então, assim. Como você pode ver agora nós podemos ver esses caras, mas nós temos bom dirigir um problema porque, você sabe, se você quiser posicionar essa grande diferença de, por exemplo, por exemplo, quando você digita seus 20 pixels à esquerda e top 20 nos escolhe, você não é, é que parece que em. E se você fizer aqui algum texto, você percebe que o Texas sob este direito, então devemos posicionar e relacionado com o limão A. Esse é o elemento pai. Nós apenas mostramos um pouco nesta situação. Então deixa o peso morto. E como podem ver agora, temos uma posição relacionada a isso. Claro, é Agora, esta coisa está agora sob ele, mas porque nós é elemento absoluto. Certo? Então isso está voando agora, mas as festas mais importantes do lago que temos agora é a posição em direção a isso e ligeiramente à direita. Podemos apenas remover isto e isto será posicionado quando deve estar. Ok, então agora podemos mover a apresentação de slides em torno de seus sites. Quem pode fazer margem esquerda? Por exemplo, 50 picaretas estão em tudo. Um, emoção de jogo mercante e tudo vai se mover. Ser movido. E você sabe, esta coisa está tomando o lugar, você sabe, e porque está tomando o lugar, você pode adicionar mais coisas em seu site. E na maioria das vezes você terá mais coisas em sua arma do que apenas escrever um pouco mais. Tudo vai parecer bem. Ok, então é assim que fazemos. Então ele está corretamente definido em nosso site, certo? E não temos problemas mais tarde. E agora também devemos pensar em como mudar essas imagens de uma para outra. Poderíamos fazê-lo de várias maneiras, por exemplo, por exemplo, definindo imagens que começam a exibir não e, em seguida, alterar o bloco de exibição. Poderíamos mudar a capacidade. Pode-se dizer que mudou a posição do índice. Eu escolheria a opacidade. Ok, então eu escolheria a opacidade. E eu sempre disse capacidade para zero todos os elementos no início. Como você pode ver, nós não os vemos. Eu gostaria de apenas ver o 1º 1 Então, a fim de obter a primeira imagem, eu vou usar o JavaScript. Eu não faço coisas como Slide Show e, em seguida, ir para Chad notas e obter o primeiro filho que acabamos de ter em grande Zero e disse a classe atributo, também. Ah, para algo que vai fazer com que seja visto. Então vamos criar a classe que será chamada, por exemplo, atual. Então vamos para a apresentação de slides e criar uma corrente de classe e vamos definir a capacidade para um. Como podem ver agora, temos uma imagem aqui. Fora do curso. Temos mais deles. Quando formos para aqui, você pode ver que temos todos eles. Mas este gás tem atual disse aqui em, podemos ver que agora queremos apenas remover a corrente a partir daqui e adicionado aqui, em seguida, remover a partir daqui e adicionado aqui, removido a partir daqui e adicionado aqui. Então, só queremos fazer terreno aqui, certo? Como fazer isso? Bem, quando precisamos fazer algo mais de uma vez, maioria das vezes está usando cola. Mas queremos fazer isso depois de algum tempo. Nós não queremos. Você sabe, alguém mudá-lo instantaneamente. Deve levar alguns segundos. Dificilmente consigo ver essas imagens. A pessoa que está visitando seu site, certo? Então vamos fazer o que se passa. Terrível. Right Said Interval vai apenas em torno de intervalos s para que possamos executar uma função que vai fazer algo com ele. Por exemplo, cada dois segundos a cada dois segundos, eu quero mudar o então eu quero Teoh mudar o primeiro cara de volta para nada. Tudo bem. E eu quero mudar o próximo cara, que tem 12 correntes depois de um segundo. Como você pode ver depois de um segundo que você pode simplesmente mudar depois do mexicano, nada mudou porque, você sabe, nós estamos mudando a mesma imagem costura para mudar esses valores Aqui. Vamos criar uma variável I e vamos fazer algo assim. I mais um e vamos cabeça dedo do pé I um cada vez que sabemos que não disse função intervalo será executado invocado. Certo? Então, porque agora não podemos mudar as imagens. Isso é com mais rápido. Então, não usamos o nosso tempo uma segunda bomba bomba e depois bombardeamos Nada. Por quê? Porque nossa área tem bons índices como 01 e dois. Então vai funcionar até eu estar aqui. Por exemplo, um certo mais um é dois e depois ele vai para o exterior. Separem-se. Certo. Então, como resolver esse problema? Podemos, por exemplo, usar esse modelo quando usado dessa forma. Você não conhece esse operador. Eu falei sobre a seção de novos operadores Quando você tem aqui, 00 modo livre é 00 mais um livre zombado é um. É o resto fora do lembrete fora da divisão. Então o número máximo aqui será agora para o número máximo Aqui será também para ouvir, mas aqui será sempre um maior. Então agora, quando, Como você pode ver, ele está mudando e isso agora está voltando para a primeira imagem. Então é assim que podemos fazer isso. Podemos, naturalmente, aumentar o aumento deve ser aumentado. Quando alguém está visitando seu site. Ele precisa olhar suas fotos, certo? E, bem, acabamos de morrer. Sim, nós temos a apresentação de slides Você pode atualizar com homens e coisas assim. Você poderia fazer parecer melhor porque está horrível agora, mas está atrás de você. É só que a CIA diz agora. JavaScript. Então faça isso sozinho. E na próxima lição, vou mostrar-lhe como fazer algo parecer melhor, que vender a lição. Muito obrigado. 70. Animação no JavaScript: Olá Hoje eu iria mostrar-lhe como fazer animação em Java. Ignore como fazer a transição entre imagens. Como fazer o seu trabalho como manter ainda mais dinâmico. Ok, então para fazer isso, você só precisa digitar sua transição e no tempo de transição que deve levar. Como pode ver, não temos sido uma transição. Certo, então o que é isso? Transição é um arsenal pouco telhado, mas vamos primeiro pensar sobre isso. Transição. Transição é uma propriedade do CSS, E essas propriedades dizem que se há ah, ficou antes e ficou antes era um zero escassez, e o novo estado é positivo. Então você precisa mudar de 0 para 1 em um segundo. Você pode dizer exatamente o que você quer mudar aqui. Por exemplo, opacidade, certo? Deve estar no troco. Ou talvez só tenhamos outras coisas assim. Mas bem, isso apreende propriedade? Você já deveria ter sabido sobre isso. Se você não apenas ir em frente e ler sobre transição, o há apenas muitas coisas para fazer, certo? Só estou de pé com o básico. Então ele está apenas fazendo a transição entre zero e um em um segundo. Então, se você quiser mostrar a uma pessoa, por exemplo, por quatro segundos, uma imagem antes da transição, você pode fazê-lo dessa maneira, certo? 1234 E nós temos uma transição para o nome que. O problema é que a imagem também está desaparecendo instantaneamente. Então parece um grande estranho, certo, para que possamos mudá-lo. Por exemplo, digite tinta em transição. E eu quero, por exemplo, fazê-lo desaparecer em um segundo. Mas quero mostrá-lo em dois segundos. Agora mesmo. 1234 terminou desapareceria mais devagar e aparecerá a próxima imagem aparecerá. Então isso é apenas você pode ver isso também? Acabamos de criar uma animação em dois segundos. Mas há um pequeno problema para resolver. Como sempre, o problema é o Internet Explorer. A transição é suportada pelo especialista Internet 10 e até mesmo no antigo Chrome Firefox aparente que havia irmãos assim. Ele não é suportado lá. Você precisa usar prefixos de fornecedor. Então, por exemplo, algo assim. Mas este é um tópico para o curso da Sears. Ok. Hum, então isso não é suportado em todos os navegadores da Web, mas no máximo. É provavelmente, você sabe, nós seremos apoiados em breve. Em todos foram irmãos que as pessoas estão usando e você sabe que você pode fazer isso de maneiras diferentes. Mas o legal é que é fácil de fazer agora. Não levaria muito tempo. É bom no desempenho. E a verdade é que por que dar às pessoas que tem todos os navegadores de irmãos olhando bons sites se eles continuam criando sites que eles estão olhando perfeitamente, que estão tendo animação, outras coisas como essa para pessoas que tinham navegadores antigos, eles continuam a usá-los direito. Então vamos eu acho que ele não vai fazer quando você criar uma transição não vai fazer para quebrar tudo. Porque Aziz já notou a apresentação de slides, ainda está funcionando certo? Está funcionando bem. As imagens estão mudando, mas é apenas instantaneamente, mas ainda está funcionando, então você não deve se preocupar com isso, eu acho, e bem, é assim que você faz qualquer coisa feita, qualquer coisa por qualquer coisa que eu quero dizer realmente qualquer coisa que eu possa dizer, por exemplo, que o tamanho da imagem inicial deve ser 384 certo, e nós podemos mudá-lo mais tarde para, por exemplo, com, hum, 500 escolhe-nos qualquer coisa . E como você pode ver, nós não temos nenhum cara grande em, então escolas para baixo e bomba. Então você pode animar qualquer coisa. Você pode fazer alguma coisa. Como, por exemplo, mesclar 50 seleções à esquerda é a direita. Seja qual for. Olha para isto. 123 ou cinco. E foi tipo, “Ei , veio deste lugar, não é, filho? E você faz isso na Lea. Si tem como mais tarde, certo. A única coisa que você fez foi aqui. Então permitimos que as pessoas esperassem segundos antes da próxima transição. Certo? E você envolveu a transição removendo uma classe e, em seguida, adicionando a classe mais tarde de volta. Certo, isso é tudo na lição. Muito obrigado. 71. Animação usando o setInterval: Olá. Na última lição, estamos criando uma animação usando transição, mas transições são e suportadas em todos os navegadores da Web. Se você tem que apoiar velhos irmãos como o Intern Express 799 e algum Firefox muito antigo, então sim, unidade é o cenário. Terrível. Mas se você não tem dedo do pé, não faça assim. Isso eu vou te mostrar em breve porque é mais lento e bem, é mais difícil escrevê-lo. E a próxima coisa é que você não terá CSS em um lugar, e Java poderia estar em outro lugar. Ok, então esta não é a melhor solução. Você deve evitá-lo. Isso que agora você deve usar transições. Você pode fazer muito mais com eles. Esta é apenas uma maneira poderosa de fazer animação. No entanto, se for preciso, então Onley. Em seguida, use o referido intervalo. Essa é a solução para criar animação em JavaScript. Certo, por que disse Interval? Porque, Bem, olhe quando algo está se movendo, a verdade é que ele está se movendo depois, por exemplo, 30 milissegundos cada estrela para mim segundos. Está apenas se movendo. Por exemplo, uma posição. É tão, tão, tão difícil. Só precisamos criar um cenário. Terrível que está indo para a função. Mover algo a cada exemplo, Diga muitos segundos e sim, ele só vai movê-lo para a direita. Temos que nos mudar. Por exemplo, estas caixas que temos aqui, temos aqui para nos movermos. Por exemplo, a posição esquerda do lado. Como fazer isso. Só precisamos de acesso usando isto. Não, não, não, não. Isso Mas precisamos criar uma variável especial que armazenamos isso. Por quê? Porque o intervalo de venda é realmente na janela porque está sempre na janela. Estes teriam acesso aqui. A janela, certo. Então, estamos usando o eu agora, e podemos ir para o estilo à esquerda e você não pode atribuir aqui, por exemplo, sempre capaz que será aumentado em. Então, por exemplo, eu que é igual a zero e podemos apenas um sinal aqui eu seria aumentada cada vez para definir intervalo em torno da disfunção. Certo? Então, a cada 30 segundos e precisamos adicionar as picaretas nós no final para que Ah, porque você precisa depois do número pixels, certo? Obama você pode ver que ele está se movendo, você quer movê-lo mais rápido. Então é mais pequeno para, mas tira muito mais poderes de computador. Você pode dizer que está se movendo um pouco mais pequeno para então é assim que você faz. O meu. Você pode animar qualquer coisa com ele que você pode fazer sobre. Você pode diminuir a opacidade, pode fazer o que quiser. Você pode mudar. Acabamos de chegar a você. No entanto, isso é apenas um pouco mais longo. E como você pode ver, estamos acessando o tamanho deste lugar a partir do JavaScript. É melhor dedo realmente ter CSS em um lugar diferente. Ah, do javascript. Certo, você não deveria ter nem os dois. Bob, você deveria ter os dois em um. Tudo bem. Então... Bem, talvez vamos falar sobre como parar isso. Porque quando corremos, necessário seria apenas correr. Então, como pará-lo? Devemos limpar o intervalo, certo? Porque algumas pessoas pensam que se eu for, por exemplo maior que 100, então nós vamos menos de 100 continuar fazendo isso. Se não, então sei, certo? Ok, é parar. Mas a verdade é que ainda está errado. Mas não há nada para correr aqui, certo? Devemos parar a totalidade deste intervalo para que pudéssemos precisar de oito críticos, por exemplo, de são capazes, por exemplo, Animação idéia vai chamá-lo assim, e precisamos limpá-lo. Então, se eu for maior que 100, então eu quero limpar o intervalo com a idéia de animação como essa. Quando nos refrescarmos, como podem ver, está parando há um segundo. Mas agora, está parando. Está parando bem. Não vai executar e outras operações lá dentro. Então, novamente, use-o somente se você tiver dedo do pé. Isso é tudo na lição. Muito obrigado. 72. Galeria com miniaturas: Olá. Hoje vou mostrar-lhe como criar uma galeria com combinação com miniaturas parecidas isso. Então, quando a pessoa está em seu site, ele pode facilmente movendo a boca sobre as miniaturas, ver a versão maior fora da imagem em outro lugar como aqui. Isso é muito útil porque você está economizando o espaço em seu site e melhorando a interface. Certo? Porque se tivéssemos todas as grandes imagens aqui, levaria muita pá com justo e provavelmente em algum lugar aqui. Então, ter algo assim está melhorando a experiência do usuário em seu site. Então ele vai ver a versão maior. Ele pode ver exatamente se é o item que ele está procurando e mais tarde ele pode apenas, por exemplo, em algo para cesta. Então, tentamos criar uma imagem de galeria nesta lição. Ok, eu já adicionei imagens como você pode ver em nosso site para imagens que queremos usar e eu criei um diff que acabamos de chamar Galeria de imagens que vai começar tudo como imagem principal , onde queremos colocar o imagem que é a maior e quatro imagens que foram ah que estavam neste site, certo? Estes são o meu site, o site polonês sobre partes para horizontal vertical, Brian etc. E realmente, isso está melhorando a opinião é que há coisa boa a fazer. Ah, para fazer isso. Ah, vamos fazer isso. Temos que adicionar estas imagens aqui. Como você pode ver, temos que começar todos os fanáticos e agora eu gostaria de, você sabe, torná-los menores. Como fazer isso. Bem, acho que devemos aderir a uma aula que chamará o nome do Tom. Ok, não há como pagar e pisar aqui e nada mudou. Precisamos ir para o CSS Tom Stites e tipos de vôo, por exemplo, com 60 picos é E agora, como você pode ver, temos imagens instantaneamente pequenas e algumas pessoas agora diriam como, Ei, mas você re tamanho essas imagens. Você deve ter ah, imagens pequenas e imagens grandes. Certo? E o que tenho a dizer? Diga a essas pessoas, esta solução também é ruim porque realmente, se você tem imagens grandes e pequenas, você tem que manter duas versões dessas imagens. Você tem que criar duas versões dessas imagens. Leva aqueles de tempo. Isso é uma coisa. A segunda coisa é que você está aumentando o pedido para o seu site lá que vai haver mais pedidos. Seu site, o que significa site era. Carregamos mais devagar, ainda mais devagar. Se houver redimensionamentos fora de elementos em seu site e, além destes, você poderia ajudar o seu aproveitando a otimização, certo? Porque eles teriam para as mesmas imagens aqui e para as mesmas imagens que são pequenas, pequenas e gatas que apenas, você sabe, cirurgião cardio, cirurgião, se juntaria você sabe, cirurgião cardio, cirurgião, cirurgião, à otimização. Então, realmente, eu acho que a solução é apenas melhor e é mais rápido de fazer e também vai funcionar melhor. Então não temos Tamponnaise, certo? E agora vamos fazer algo com esse país. Então, por exemplo, quando temos um mouse sobre um deles, queremos ver uma linha vermelha embaixo dele, certo? Então, como fazer isso? Bem, podemos criar algo. I tamponamento efeito de entrega e podemos adicionar a borda na parte inferior duas picaretas outra alma que lê, por exemplo, poderíamos criá-los em todos os lugares, Mas vamos fazê-lo ser diferente agora você pode fazer um l outro indicador, mas é importante fazer DeCurtis final. Então o usuário observou, Ah, isso é algo que está mudando. Q. Certo, Onda. Como você pode ver, nós criamos algo que, mas eu d está pulando. Porque a fusão está funcionando quando você tem aqui, a fusão está dizendo que você tem que manter que o casamento é certo. Podemos mudá-lo por algo como fundir sobre o fundo sobre. Mudar para menos dois escolhe-nos. Como você pode ver agora tudo funciona bem. Certo, então depois que mudamos nossas bocas sobre uma coisa, gostaríamos de mostrar algo na imagem principal. Devemos também declarou esta imagem principal aqui e mudar o com, por exemplo, o tamanho desses caras para 450 correções e altura, ela vai ser 263 fotos. Então temos que fazer espaço aqui mesmo. E queremos colocar as imagens deles. Então nós gostamos de primeiro inserir algo na imagem principal gostaria de inserir aqui uma amostra emitem porque agora há apenas o fundo vazio direito. Então vamos criar 100 para essa imagem principal. Certo? Documento. Obter um limão por imagem I.D Maine. E vamos adicionar imagem a ele. Como criar uma imagem. Só precisamos fazer algo assim, como aprendemos na seção de imagens, para que pudéssemos. Mas agora uma imagem e podemos adicioná-lo fácil para eles seção assim. E como você pode ver agora, Oh, nós temos essa sua imagem vazia, certo que devemos aderir agora fonte, por exemplo. Então, podemos usá-lo agora muito fácil para mudá-lo para o, por exemplo, primeira imagem. Então podemos fazer algo como imagem, essa fonte e como obter a primeira imagem. Poderíamos fazer isso, por exemplo, algo assim. Um imagens e depois macaense 5 17 E como você pode ver, temos aqui agora com a primeira imagem, certo, porque precisamos começar de algo porque o usuário não precisa dedo do pé instantaneamente. Tem a boca dele aqui, certo? Vamos imaginar, porque parece um pouco ruim. Mesclar no fundo, Tim Pick diz em Dwell. Agora precisamos mudá-lo, certo, mas penso um segundo sobre a solução que acabamos de escolher. É bom? Bem, está funcionando, mas agora imagine que você tem muitos produtos. Como, por exemplo, nesses sites. Certo? Então, quando vamos a outro site, há muitos mais produtos que você teria que para cada produto criado. JavaScript. Sabe, você teria que mudar essas linhas. Você vai precisar do dedo do pé envolvido, uma função especial. Por exemplo, você precisará do dedo do pé que tenha uma cesta. Cinco para cada html cinco javascript diferentes cinco. Isso só tiraria o tempo da Lourdes Lourdes. Nosso casaco deve ser universal. Deve funcionar todas as vezes. Então, como fazer isso? Bem, aqui temos uma aula qualquer coisa, certo? Poderíamos usá-lo para obter o velho Romney para que pudéssemos fazer algo como documento obter elemento por nome de classe e salvá-lo aqui. Onda. Agora podemos fazer algo assim. Tomlin tem atributos e como nosso c bem, e isso é tudo, Oh, famílias de zero porque empresas em erro, certo? E como você pode ver agora nós temos a primeira imagem. O legal sobre esta solução é que ela é universal. Agora, quando mudarmos a ordem, como você pode ver, vai mudar a primeira foto, pegar a primeira foto, certo? Não importa o que fazemos aqui. Nós podemos para você uma imagem. Se tirarmos o e as imagens, levaria apenas 1. Então é muito, muito legal. Certo, então um D está em código universal para definir a primeira imagem. Agora devemos ir a todos esses caras. E quando temos um bom rato sobre um deles, bem, devemos mudá-los. O cara aqui. Certo? Ok, então vamos usar o que eu acho para baixo, porque nós vamos passar por todos eles. E vamos usar a terra dos nomes de Tom como condição, porque você quer ver todos eles, certo? E agora queremos adicionar um “So Tom toca”. Tudo bem. Quase acabando. Isso será um mas que invocará disfunção quando tivermos o rato sobre uma destas empresas. Certo. Ok, então agora nós precisamos apenas mudar a fonte da imagem que está aqui. Direito a quê? Por exemplo, este ponto obtém uma fonte de tributo. E isso é tudo. Olha, ele está trabalhando. Bem, essa parte não foi difícil. Como você pode ver, algumas coisas podem parecer de coração quando você está olhando javascript, mas eles realmente não são assim. Ah, bem, há algo um pouco muito importante agora. Agora, olha, quando começarmos o site, seria uma boa idéia do dedo ter em algum lugar um indicador desligado no Tam. Nay. Como, por exemplo, esta linha vermelha aqui porque o usuário pode não saber que ele tem que usar a boca aqui. Certo? Ok, então como fazer isso? Acho que devemos criar uma turma especial para fazermos a mesma coisa que foi feita aqui, certo? E adicionado ao primeiro cara. Então poderíamos, por exemplo, fazer algo como empresas fora de zero e adicionar ao nome da classe. Nome da classe atual é uma propriedade que está armazenando a classe. É muito útil porque você pode adicionar outra classe usando apenas este operador. E como podem ver agora, está a indicar que este tipo foi escolhido. Começa. Mas quando avançarmos com os outros, bem, esses caras não serão removidos instantaneamente. Você tem que fazer isso manualmente, certo? Então devemos removê-lo quando estamos nos movendo em um fora disso que as empresas, vamos armazenar na variável temporária que está acontecendo. Então o nome do carro e Tom que é escolhido certo. Deve começar em algum lugar, para que possamos mudá-lo mais tarde. Queremos essa corrente, certo? Ainda está funcionando. Bem, Bem, não é companhia. O nome da turma fora do curso deveria estar aqui burro. Ok, então aqui nós devemos agora remover dos nomes atuais do presunto do primeiro cara. Conte com o Tom. o nome Klaus. E agora como remover um da classe. Porque temos muitas aulas aqui, certo? Não podemos ser adulteração. E, ao mesmo tempo, atual e usar a coisa que você notaria que temos bom ar, classe atual e empresa como remover em um deles. Você sabe, nós poderíamos, por exemplo, digitar o Tampa, você sabe, e ele vai removê-lo. O problema é que se você tivesse outra maravilha que poderia causar problemas mais tarde? São frios devem ser universais. Então a verdade é que isto é uma corda, certo? Então nós poderíamos usar e importava que isso poderia substituir que eu falo na seção de cordas e nós podemos usar o você pode usar aquele dedo de metal mudar a corrente para nada que está tudo bem e seguro. A coisa que é retornada por esta função. E essa disfunção está retornando o valor sem a corrente. Certo? Então esta é apenas a classe com o homem comum e estamos atribuindo-a ao nome da classe. Então, como você pode ver agora é removê-lo. Certo. Então está funcionando Fine. Agora temos outro problema. O problema é que quando eu mudei de, por exemplo, daqui, o usuário pode não lembrar onde ele terminou. Certo? Ele pode olhar aqui, mas hey, nova hora entra. As lutas devem ser intuitivas. Então é altura de recitar. Você está com esse cara para que possamos mudar o templo atual. É algo para isso. Então, o que somos, temos o mouse sobre e podemos adicionar à cláusula Nomear uma gangue. A classe atual. Certo? Como você pode ver agora, melhoramos a experiência do usuário em nosso site, certo? Quando estivermos frescos, ele sabe que está aqui. Quando entramos em outro, ele sabe onde está e quando deixa a boca, ainda sabe onde está. Certo, então é assim que se faz algo assim. E como você pode ver, javascript não é tão difícil e também é difícil fazer coisas que estão olhando para o início. Difícil de fazer. Isso é algo que lição. Muito obrigado. 73. Dicas de ferramentas: Olá. Hoje vou mostrar-lhe como criar uma dica de ferramenta com essa aparência. Então, uma dica de ferramenta é apenas uma caixa, um contêiner com ataques que está aparecendo ao lado do elemento que você tem. Ponha a boca. Certo. E tudo bem, vamos. Isto não temos nenhuma pista. Agora queremos tê-lo em qualquer elemento que temos uma classe que é morto para gorjeta. Esta é a melhor solução. Porque quando se você quiser adicionar outra dica de ferramenta, você tem que só então apenas na classe, certo? E a coisa que vai ser insight, a ferramenta ponta do contêiner para ponta é a coisa que será digitada dentro do título. Eu acho que também é uma boa solução porque título também é bom para seis otimização motor de busca . E, além deste título é algo que pode ser em um elementos. Certo. Então você poderia provavelmente é o atributo de mensagem alternativa, Mas você sabe, este indulto sobre as imagens que queremos ter que ser capaz de adicionar em uma dica de ferramenta sobre quaisquer elementos possíveis . Então, por exemplo, entradas. Então você pode, por exemplo, aqui está um cara que ele precisa fazer algo. Eles são um pouco diferentes ou algo assim. Isso mesmo? Eso, vamos fazer isso. Vamos criar uma função que chamamos de criar dicas de ferramentas, ok. E vai envolver. Você começou depois de carregar nosso site e queremos obter todos os elementos possíveis que a classe é dito. Certo. Então vamos criar um elementos variáveis com dicas contadas. Tudo bem, então aqui temos. Bom. Agora esta âncora, esta imagem, esta imagem, esta e esta Se você tivesse qualquer outro cara com a classe de gorjeta, ela também será adicionada aqui. Então essa é a coisa legal é que nós vamos ser capazes de instalar uma mordida em qualquer site apenas invocando disfunção. Certo? Certo, então precisamos ir a todos os elementos possíveis, certo? Então, quando você quer ir a alguma coisa, você sempre usa um olhar. Então vamos criar um loop que começamos do zero. E vamos criar a condição que fazemos em torno deste olhar, contanto que nós não chegar ao fim fora deles, ele foi para o último elemento Quem disse? Certo? Então isto está assim e nós só precisamos agora fazer a mesma coisa que fizemos aqui, certo? Precisamos de Teoh em todos os elementos possíveis, todos quilómetros. E vamos horas ouvir qualquer coisa. Então, por exemplo, um Vamos ver se está funcionando. Ok, está funcionando. Não está funcionando o tempo todo, certo? Por quê? Por que está trabalhando aqui e por que não está funcionando aqui. Espero que você assista meu vídeo sobre até mesmo ouvintes, porque esta é a situação em que você tem que usar o ouvinte par. Olha, este método é invocado. Você, certo? Disfunção é invocada aqui. Então você quase poderia imaginar como se estivesse aqui assim, certo? O que significa que estamos adicionando quase até mais dois, quase acabando. Mesmo rebocar este elementos uma função como essa e estamos substituindo na linha 35 dedo todas as imagens possíveis, porque também usamos o quase acabou mesmo para Tom Nice direito neste lugar. É por isso que não está funcionando. E é por isso que ele também deve usar até mesmo ouvintes. Ok, porque se você fizer isso dessa maneira, certo, hum, milhas mais além e aqui também assim em até mesmo ouvinte milhas sobre bum. Como você pode ver agora, está funcionando bem em todos os lugares em um impossível. Adamant se você quiser suportar todos os navegadores, anos devem usar a quase substituição. Mas se você não precisa fazer isso, ele era a cabeça mesmo. Ouça ali. Porque mesmo que você insulte, por exemplo, alguém está ligando direito, hum, com as dicas de ferramentas. E você já teve algo assim, então você vai ficar tipo, Ei, por que não está funcionando. Oh , simplesmente não funciona. Porque fora usando quase mais fazendo ele morto caminho certo. Certo, então resolvemos esse problema de vez em quando queremos. Quando tivermos nossas bocas sobre isso, queremos mostrar um pedágio profundo. Certo? Mas primeiro, precisamos criar uma profundidade total. Ok, então vamos fazer isso. E eu já adicionei aqui no STAIs o CSS para a dica. Eu ouvi uma cor de fundo da borda, e a parte mais importante dela é a posição. Está bem? Tem que ser absoluto para que possamos movê-lo. Conhece o lugar no nosso site, certo? E eu também disse aqui, hum, festa tamanho do telefone e eu estudei para mostrar nenhum. E para começar vamos deixar o topo não é importante agora. Não importa. Onde é que começa? Certo, então não pegamos esses kilobytes aqui. Incrível. E bem, por um segundo que mudou a exibição de agora em diante para bloquear o que é padrão, certo, certo, Ondas Você pode ver que não está em lugar nenhum porque nós não criamos esses elementos. Nós poderíamos criá-lo aqui manualmente, montar como o I d bam, bam, bam bam! Mas você sabe, você teria que adicioná-lo em todos os sites possíveis mais tarde. Eu acho que é boa idéia apenas criar usando seu javascript. É assim que se faz? Podemos apenas fazer algo documento criar elemento e apenas criar um dif. Certo, Vamos salvá-lo na variável contêiner total. E agora só precisamos adicionar o dedo do pé. Então o corpo do documento subornou a criança muito profunda Contin e quando atualizamos nosso site eles, usamos o fogo. Bach, como você pode ver aqui, teria pego isso, Dave. Mas não tem isso então só precisamos adicionar como fazer. Nós só precisamos toe referir-se ao recipiente ponta e ir para a propriedade id e apenas disse que para o recipiente ponta, certo. E como podem ver agora, quando nos refrescarmos. Tem boa essa idéia, que também significa que Ah, ele vai aparecer se nós definir, por exemplo, com 500 grandes servidores e 500 pixels altos, por exemplo, direto. Como pode ver, está aqui. Ok, é muito grande, mas é o direito deles, vamos definir para Bem, eu apaguei a posição absoluta por qualquer um. Então, isso é usar a posição. Absoluto. E vamos colocá-lo para um segundo dedo superior e esquerda para que possamos vê-lo aqui. Ok, queremos saber quando temos nossas bocas sobre uma das imagens para mudar o texto. Você como fazer isso. Bem, nós só precisamos nos referir, fazer esse contêiner direito e mudar o html energia para o que quisermos, logo quando fizermos isso dessa maneira, ele mudaria a coisa que temos apenas tempo. Se você quiser mudá-lo. Então lá. Eu acho que está dentro dos elementos com a direita profunda, queremos mudá-lo para o título. Então, só precisamos mudar isso para isso. Esse título é uma propriedade fora do elemento que temos bom mouse sobre. Quando isso vai acontecer, certo? Como você pode ver, como estamos mudando essa coisa aqui em cima, certo? Está parecendo bonito. Está bem, está bem. Então agora precisamos também mudar a posição disso, certo? Então, como fazer isso? Nós só precisamos obter o contado para a ponta recipiente, chegar ao estilo esquerda e disse isso. Podemos obter o mesmo objeto, a fim de obter a informação onde mesmo que Curt direito e fazer algo como E que o cliente X mais escolhe é. E como você pode ver agora está mudando sua posição esquerda. Precisamos também fazer a mesma coisa para a posição superior. Então Crean, Top e Creon Por quê? Como você pode ver agora ele está nos seguindo. Bastante OK. Os alguns problemas Ainda assim, o primeiro problema é que o que vai acontecer se tivermos homens na gravidez? Como você pode ver agora está olhando para cima. É porque Cleon X está apenas voltando, nos devolvendo o lugar onde eles iriam ocorrer sem o pergaminho. Ok, então se você quiser Andi também incluir o pergaminho, devemos fazer algo como mais e chegar aqui. Quantos pixels Wisc escreveu para o elemento de documento documento So à esquerda. Aquela escola ... foi embora. E também temos que chegar muito em casa. Nós rolamos para o a partir do topo, e que foi você admitir trabalhar bem. Mesmo até termos muitas pausas. Ok, então vamos remover os freios. Então seria mais fácil para nós depurar essa garota. E agora, bem, nós temos o bem. Outro problema. A primeira coisa é que ele está aparecendo top start. E a segunda coisa é que quando estivermos aqui e partirmos, ele ainda estará lá, certo? Ok, isso não seria difícil de si mesmo. Só precisamos mudar essas telas para non. Agora. Não importa onde, onde é o começo, então podemos salvar o kilobyte. E, bem, nós temos que apenas fazer algo como rato fora, certo? Temos que tirar o rato dos ratos. Mesmo assim, quando o mouse está fora, queremos mudar o contêiner de ponta de ferramenta que está amarrado display para Eu só sei, como você pode ver agora. Bem, agora vamos aparecer. É muito importante mudar o bloco quando estamos ligados, e agora desaparece corretamente, certo? Está na dele, não é? - Sim. Está bem. Mas temos agora um grande problema. Ainda assim, quando temos bom o mouse sobre o elemento que queremos Teoh tem a ponta sobre Próprio, como você pode ver, quando estamos no elemento um pouco mais e ficamos quietos, temos bom o título animado macaense para um e é sobre o nosso bom inclinado. Como removê-lo. Mas como removê-lo apenas por um segundo. Bem, em ordem três filmes. Você apenas digita algo que este título em? Você acabou de dizer. Não, eu acho. E isso você pode ver agora nós não dizemos isso, mas o problema é que ele também desaparece. Certo? Então nós colocamos de volta, fazemos a coisa que estava lá. Então, mas como colocar o saco quando for removido aqui, certo? Nós o temporário foram capazes de fazer com loja ou títulos cana. Então vamos criar uma área que armazenamos todos os títulos possíveis e isso é o algo títulos temporários fora eu sou e vamos assinar aqui elementos com reboque Tip off. Eu esse título. Isso nos dará todos os títulos possíveis, certo? Nessa ordem do site e podemos usá-lo aqui, certo? Poderíamos algo como títulos temporários fora de I. Que terrivelmente bem. Ainda é um problema. Não está funcionando. Por quê? Bem, fiquei surpreso com isso. Quando você faz algo como esse alerta para cinco, você vai notar que são cinco. Por que é cinco quando deve ser 012 grátis para cada limão. Deve ser diferente, certo? Porque bem, aqui de alguma forma 01234 Por que aqui não é cinco. Eu não sei exatamente por que isso pode estar de volta, mas eu sei como resolvê-lo a fim de resolvê-lo. Realmente? Usem as FARC que os limões com gorjeta são realmente ah e um eu para escrever um elemento. E é apenas um objeto. Você pode adicionar qualquer propriedade ao objeto. Estamos fazendo algo assim, e podemos pensar sobre a nova propriedade. Então, se, por exemplo, temporária i D e eu posso atribuir aqui Oi, que é aqui ainda razoável, certo? E por causa dele podemos fazer algumas coisas como, vamos acessar isso que eu d temporário em quando nós atualizá-lo. É mesmo com o trabalho que usa a casca de fogo. Bem, não está funcionando. Mm. Oh, eu sinto muito. Aqui, devemos fazer algo assim. Claro, acabamos de adicionar à acabamos de adicionar àcoleção. A ideia temporária. Eu deveria ter adicionado cada um a cada um. Um limão. Certo. Ok, agora, como você pode ver, está funcionando bem. Tudo está funcionando perfeitamente. A coisa mais legal sobre esses dois TB é que você só precisa invocar essa função neste estilo porque, claro, você pode atualizá-lo, e você só precisa adicionar a classe de duas dicas. Então pense no título. Isso é buraco e você vai ter um bom inclinado. Claro, você poderia fazer isso de uma maneira diferente. Por exemplo, você não poderia mostrar no imposto que você poderia mostrar aqui e imagem maior. Isso é com você. O que você cria como criou? Tenho certeza que depois de todas essas lições desses carros, você será capaz de criar quase o que quiser em empregos. Continue tentando. Se você tiver algum problema. Se tiver alguma pergunta, me pergunte como um exercício. Eu gostaria que você atualizasse esta dica ainda. Então, está acontecendo, por exemplo, aparecer depois de alguns minutos segundos. Certo. Então faça isso com a transição. Falamos sobre algumas lições atrás que vender a lição. Muito obrigado. 74. Firebug: Olá Hoje vamos falar sobre caixa de caixa que ele quer atirar. Você quer matá-los? Uma volta é um erro de erro, que não é algo que você deseja ver em seu código, certo? Porque não vai funcionar. Então erros é algo que você vai fazer muitas vezes. E não se preocupe, porque todo o corpo faz muitos erros. Erros de IDU humanos. Nós os fazemos. Continua a melhorar a ti próprio, e farás menos deles. Está bem, mas quando acontecem, é boa ideia ter algumas ferramentas que te ajudem a resolvê-las. Certo? E há um fogo de volta para o Firefox. Você pode apenas clicar em sua instalação fogo de volta, e você terá, em seguida, algo parecido com isso. Temos usado portões muito longe Toby capaz de rápido. Verifique a posição de algo certo. Usando esta ferramenta aqui, podemos facilmente verificar onde o quê? O que está acontecendo nesse lugar? Estes muito úteis para verificar Se tudo está acontecendo, tudo está mudando. Bom. Porque essas fontes aqui são atualizadas dinamicamente suas ferramentas de minuto assim. Em outras palavras, irmãos que você não precisa usar o Firefox Você pode usar, por exemplo, lá, um, no grupo de quando você usa as partes de controle de atalho Chefe. Além disso, Jay, você vai ver o dedo do desenvolvedor assim, que é muito semelhante. E você pode usar o Google Chrome. Pode usar a internet, Dexter. Lá você riacho F 12. Andi, você pode usar o quê? E eles eram irmãos que você encontraria em ferramentas. O muito ou algo parecido. Estes são os navegadores mais populares, certo? E eles têm ferramentas assim. Você também pode ver CSS aqui, é claro. O que não é, você sabe algo que este trabalho está pedindo, mas ainda assim pode ajudá-lo a fazer algumas coisas. Se você estiver certo, você pode até remover algo como e ver o que acontecerá se eu remover o valor absoluto , certo? Valor absoluto removido e não admite. Agora, aqui está, no fundo. Então você pode voltar muitas coisas online. Ele teria o modelo de objeto de documento para que você possa verificar facilmente quando você vai em um fora do elemento. Que valores você pode acessar, certo? Bastante fácil. Você tem na Net Co. Isso é muito útil porque você pode ver até que ponto seu site está carregando? O que você deve melhorar para torná-lo mais rápido. Certo? Você também tem biscoitos. Cookies também é muito importante porque então você pode ver se o cookie foi corretamente ou não. Se é existente de nota etcetera. Você tem também uma ferramenta, que é chamado de cuspir página. PHP. A velocidade também é muito útil porque você pode clicar, analisar e verificar como a farsa e como o seu site está funcionando. No entanto, eu realmente prefiro o desempenho. Ainda assim, isso é do Google Chrome. Ok, eu acho que é melhor. - Não. Portanto, há também um conselho sobre. Vamos falar sobre o conselho mais tarde porque você pode ver aqui setas e você também pode depurar seu código usando o conselho muito fácil. O durante a aula. Muito obrigado. 75. Depuramento de console: Olá. Hoje eu vou mostrar-lhe a maneira poderosa de depurar com conselho Um conselho é algo que nós mostramos erros se você fazê-los como você pode ver instantaneamente. Temos aqui e informações Que erro foi cometido? Claro que eu também estou mostrando erros, mas eu acho que o conselho às vezes pode mostrar-lhe algo que o seu eu d não vai mostrar-lhe. Ok? E há outra coisa muito legal sobre o Conselho. Você pode dar fechaduras ao conselho. Você pode fazer algo como conselho que Locke e, por exemplo, Hey, Eu gostaria de ver o que está acontecendo com valores de títulos temporais após cada iteração. Certo? E como você pode ver, você pode ver isso facilmente. Então talvez pudéssemos ver o que estava acontecendo com o direito de marfim. Está bem. Além disso, o Ivory Able está parecendo uma casa zero uma vez. Vencê-lo, fazer McCann facilitar. Ok, então tudo está funcionando bem. E você pode até melhorá-lo apenas por tempo, digitando títulos temporários, mas você verá instantaneamente palavras acontecendo após cada reiteração. Se você quiser ver também um pouco mais sobre isso, você pode usar algo com este diretório cult, que, bem, como você pode ver imprimir fora, até mesmo indexar esses caras. Isso é incrível, realmente. Então é muito útil para os latidos, certo? Por exemplo, tivemos problemas com o I dentro do escopo. Então, quando fizermos coisas como conselho que olham para fora, você notará que quando eu tiver o mouse sobre, são sempre cinco, certo? Então é por isso que isso estava nos dando um problema. Mas com este I D. temporário como você pode ver agora ele está mudando. Então essa coisa pode te mostrar o que exatamente está acontecendo, certo? Com suas variáveis, você pode facilmente verificar muito rápido o valor sem trazer algo para a saída certo? Temos um teste mais baixo sem parar a execução. Queremos parar a execução. Você deveria. Usa o nosso direito. Mas se você não quiser parar a execução, eu acho que o consulado é melhor, porque é fácil apenas olhar aqui e como. Além disso, isso é o que está acontecendo no início das cicatrizes, eu estava usando o HTML interno para o ensacamento também, e esta é uma boa maneira, mas o problema é que você está mostrando algo na saída para que você possa fazê-lo em A vida, certo? Você pode até estar de volta ao vivo. Mas você sabe, você não deve terminar nada assim na vida porque você sabe, você pode fazer outra. Isso vai custar-lhe algo que você deve sempre depak off line. Mas com o problema feminino integrado é que você tem que criar um bloco especial e você tem que obter o mais tarde por isso é um pouco mais lento. Mas eu sei. De qualquer forma, o conselho está te dando, eu acho que mais estacionar e facilmente verificar isso com a fechadura. Hum, o que está acontecendo exatamente? Qualquer, além disso vai imprimi-lo um pouco melhor. Você pode usar o diretor um conservador, que vai imprimir ainda mais informações sobre alguma coisa, certo? Bem, desta vez está na única variável. Mas quando você quer ter mais informações sobre algo, Então, por exemplo, eu gostaria de ver o que está acontecendo com os elementos com ferramenta Muito brilhante, por exemplo aqui. Então eu baixei todas as dicas de fezes e o que está acontecendo. Além disso, eu tenho aqui com o índice zero algo com isso chamado de âncora, e ele tem um custo de ponta de ferramenta. E tem uma idade reefer e imagem html simples. Está bem, está bem. E tenho assuntos que posso usar aqui. Está bem? E o comprimento é cinco. Isso é poderoso, certo? Podemos facilmente ver o que exatamente temos com sua consulta. Ah, estão com os elementos get por classe, nome. E então eles conheceram-no. Certo, a lição de vender. Muito obrigado. 76. Sites de o compartilhamento de o código: Olá. Haverá muitas vezes em que você deseja compartilhar seu casaco com outras pessoas, por exemplo, quando você deseja compartilhá-lo para que alguém possa ver se há um erro ou você pode compartilhá-lo para que alguém possa usar seu código mais tarde. Certo? Você pode compartilhá-lo com seus amigos, por exemplo, e para isso. É muito útil ter um online para gostar disso. Você vai apenas copiar seu casaco do seu, por exemplo, eu d. Aqui. Vamos criar algo muito simples. O Zoff. O i d simples I eles testam aqui. Você pode fazer alguns da CIA, como também é muito legal, certo? Você pode fazer o CSS para ele muito longe, então vamos mudar a cor rapidamente. Por exemplo, para ler e vamos obter o documento. Obter um limão por eu d idéia simples e mudar o interior html dedo do pé algo novo. E agora você pode executar esta colisão e como você pode ver o que você tem, bom. O resultado com você. Tudo bem , você quer usar algumas bibliotecas? Você pode verificar qual biblioteca você está usando para a pechincha, certo? E porque as bibliotecas do sol requer o que teremos métodos que normalmente não estão disponíveis direito no JavaScript básico deve tomar partes de algo assim e você pode então compartilhá-lo. Pode perguntar às pessoas o que está acontecendo, certo? Você pode mostrar às pessoas a solução para o problema. Isso é muito legal, por exemplo, estouro de pilha, direita, Você pode empilhar. Overflow é um site muito, muito popular. Se você não sabe, você definitivamente deve visitá-lo . Você pode fazer perguntas. Você pode pedir perguntas rápidas e rápidas aos outros. Eso e as pessoas são realmente muito úteis aqui. Eles não enviarão você para o Google. Isso vai ter mais tempo. Ok, Onda e você também pode ajudar outras pessoas Você Esta é uma comunidade muito, muito boa. Então você pode, então, você sabe, salvá-lo. Por exemplo riacho seu site. Como você pode ver, você tem agora link que você pode compartilhar você pode ver como abrimos o novo top e é seguro para que você possa mostrar a solução. Por exemplo, para alguém na vida, os recursos de algo como caneta casaco Também é muito legal, mas há a coisa legal sobre este dedo é que você pode encontrar também algum trabalho de outros, certo? Oh, pura. Veja é este filtro de conteúdo. Ok, vamos ver como ele fez isso. Ok, nós temos o seu ver. Isso é tudo. Como e podemos ver como está indo. Tudo o que eu quero no vermelho. Uau, este muito bom co. Eu não vi isso, mas como você pode ver, você pode encontrar um trabalho muito bom de outras pessoas lá que estão sendo compartilhadas por outras pessoas. Você também pode compartilhar isso e um Z concede, trabalhando muito, muito semelhante ao violino do júri porque você pode digitar HTML CSS e JavaScript e você pode, em seguida, em torno do casaco aqui em baixo há também algo como Jay está sendo Alemanha sites como esse. Acho que o melhor é este e este. E lembre-se, vá para o estouro de estoque encontrar, encontrar as respostas para as perguntas que você está fazendo toda vez que você está procurando algo. É boa idéia para olhar assim,Por exemplo, Por exemplo, site sobre como fazer em até mesmo ouvinte em nossa bomba do Internet Explorer. E esses caras eram o equivalente ao objeto elemento no Explorer 9, certo? E o que esse cara tem te dando a solução. Você acabou de copiar. Então ele está trabalhando. Você pode então apenas dizer como um obrigado, você pode ab votar. Então esta é uma comunidade muito, muito agradável onde você vai encontrar muitas respostas para muitas perguntas e estes muito rápido fora procurando algo apenas através do estouro de estoque. Você está usando o cromossomo do Google dentro e gigante para pesquisar apenas digitando lado e depois a noite fora do site, certo? E depois o coro. Você quer perguntar a esses sites Então, realmente, esta é uma maneira poderosa de resolver muitos problemas. Você perdoa coisas afiadas lá e é só isso. Isso é muito obrigado. 77. Modo de rigoro: Olá. Hoje vou mostrar-lhe algo bom é chamado de modo de rua. O modo Estado é um modo que faz você escrever seu casaco de forma mais rigorosa, que significa que somos mais regras que você tem que seguir. E a verdade é que ele só vai te ajudar. Porque quando você algo como esse uso estrias e este pensamento está fazendo todo o frio sobre o abaixo dele, é em forma estrita. Como você pode ver, nosso código ainda está funcionando. Então, foi escrito bem. Então, se você escrever um co divertido, vai funcionar bem. Mas às vezes há erros. Você fez realmente como um Sr. Você pode escrever? Às vezes, algo como, por exemplo, X é igual a cinco. E como podem ver agora, temos um erro. Por quê? Porque é atribuição da variável X não declarada. A verdade é que, em javascript normal, ele funcionará. O problema é que este é um meribel global, certo? Então você tem que sempre se lembrar de declarar algo, e eles são Amanda flechas como aquela que vão ser muito descobertas por uma nota rigorosa. Não precisamos passar por eles. É apenas uma boa idéia usar sempre mês rigoroso no início quando você está desenvolvendo seu site, mas é uma boa idéia. Também. dedo do pé atrasou a maré. Nota. Quando você está enviando o seu foi sua luta para o seu site on-line dedo do pé direito seu anfitrião. Por quê? Porque bem, é melhor se você deixar seu código ser executado em vez de fazê-lo parar por causa de algumas regras estúpidas e estúpidas, certo? É melhor se ele se afogar um pouco de maneira, então ele não está correndo uma porta, certo, Então usá-lo apenas para o propósito de latir porque ele pode salvá-lo algum dia. Vai mostrar-te erros que normalmente o teu “eu “não apanharia. Vai te dar avisos e, bem, vai te poupar tempo. Isso é apenas uma boa lição. Muito obrigado. 78. Desempenho de código: Olá Hoje vou dizer-lhe o que você deve fazer para o casaco maga melhor desempenho. A primeira coisa que você deve lembrar e isso é o mais importante é que obter quaisquer elementos de seu modelo de objeto de documento é lento. Por quê? Porque bem, imagine como uma função como essa deve ser implementada. Tem que passar por todos os impostos possíveis sobre o seu HTM do cominho, certo? A fim de encontrar o que tem identificação como essa ou a classe como essa. Também significa que identificá-la procurando nas urgências difíceis é mais rápido porque quando encontrar isso no er defecado, ele vai parar de olhar direito porque você não acha que algo com o eu d deveria existir em seu site escrever algo com a classe pode existir mais de um. Então, parecerá mesmo que já tenha fundos de algo. Se através de todo o documento, todos os elementos possíveis e da forma como ele iria apenas manter cuidando dele, pensando termina documento médico completo. Certo. Então se você tem apenas um elemento e você sabe que Deus tem mais do que um deles e é melhor usar identificações, certo? E também é muito importante saber sobre isso porque, olha, olha, quando você faz algo assim, um Vrabel temporário, então se você tem uma condição como essa, você só tem o comprimento do Tom Neighs que é seguro aqui. Mas se você fizer isso dessa forma, você tem o dedo do pé cada vez partes cheias, documento completo, a fim de obter todas as coisas Tom. E então você só tem comprimento e você faz isso toda vez. Cada iteração leva muito tempo, certo? E também, se você tem alguma idéia de nenhum documento, leve os limões para dentro. não precisar deles, Se vocênão precisar deles, Toby, por favor, faça-os aqui e adicione-os de alguma forma. Aqui, está bem? Porque só tira votos. Obrigado Ok. E isso também significa que você deve manter seu html para cinco tão pequeno quanto possível. Porque se você tem os últimos elementos aqui, significa que vai encontrá-lo mais rápido. Certo? Então, não criou essa loucura. Por mais louco que você puder, Enorme deve manter este HTM se eu o menor possível. E se você pode inicializar sua área de uma vez, faça isso porque isso é um pouco mais lento, mas às vezes você sabe que você não pode fazer isso dessa maneira porque, por exemplo, você tem que fazer algo como, você sabe, na queda da união em novos elementos. Certo, porque você ainda não os conhece. Mas se você pode odiar fazê-lo Deadwood não apenas variedades globais porque chegar a eles é mais lento. Certo, e razão. Todos aqueles no mais lento. É também uma convenção de apostas. Então não os use. E quando você pousar, Jake usa e você provavelmente aprendemos porque é realmente que vamos economizar muito tempo. Você deve se lembrar que você não deve usar Jake estavam em todos os lugares, se você pode. Se você sabe que algo é suportado. Ei, é melhor a maioria dos tempos para usar JavaScript, o JavaScript básico. Por exemplo. Quando você obtém o valor da entrada usando a propriedade value em vez de usar essa coisa do Jorquera, o código será executado 1000 vezes mais rápido. Ok, A maioria das diferenças de tempo não são tão grandes, mas realmente, às vezes essas diferenças são tão grandes, então não use em todos os lugares. Consulta Jack J. Se você sabe que não tem dedo do pé. Ok? A narração fez uma lição. Muito obrigado. 79. Como manter um arquivo de js: Olá. Você deve sempre pensar em manter em um JavaScript cinco para o seu projeto de parede. Para fazê-lo, você deve conectar tudo fora do JavaScript se ice em um. Mas posso imaginar sua cara de luta agora. Você tem, por exemplo, 50 de desconto e você muda qualquer coisa em um deles. Você precisaria encontrar ditado chamado em algum lugar lá, e você precisa copiar e enfrentá-lo na posição certa. Você teria que atualizar Manimal. Só levaria a Lei adiar o tempo. Vai ser muito, muito difícil manter o arrasto fora. E a tosse é que você pode o algo assim automaticamente usando algo bom é chamado Grand Julius. Eu já criei o curso sobre Grand Julius e você pode bonito é? Use-o. Ele só vai criar automaticamente um fogo de todos os ampliados que você puder agora. Você provavelmente tem, por exemplo, exigem JavaScript, Ben para plugins livres e outras coisas assim, certo? Por exemplo, quatro scripts e todos esses scripts, vamos fazer seu site carregar muito mais lento. Por quê? Porque o protocolo HTTP diz que ele tolerou as duas lutas ao mesmo tempo, que significa que se ele ficar o peso vai ter que se reconectar ao servidor Euro novamente e ter outra luta. Então isso realmente faz com que o seu em seu site seja carregado mais lento. Ok, então você deve manter sempre menos lutas que puder. OK? A coisa legal sobre Grand Jury Aziz também, que você pode até mesmo então criar arquivos JavaScript para cada possível feeing como, por exemplo, disse que eles gostam, por exemplo, citado painel para o que quiser. Normalmente, as pessoas estão apenas fazendo um grande cinco onde eles têm muitos, muitos, muitos, muitos, muitos que você sabe pensar em JavaScript e frameworks em outros arquivos JavaScript e alguns plugins, Certo? Mas com isso, você pode até mesmo atualizar com a capacidade real fora de suas estruturas JavaScript cinco aqui, por exemplo, mais porque você pode criar para cada script outro script Java especial. O Fine vendeu a lição. Muito obrigado. 80. Como comprimir arquivos do js: Olá. Você sempre deve ter sua luta JavaScript compactada. Então você deve criar um segundo javascript. Se eu e faculdade, por exemplo, script para quero dizer ponto Js e você deve copiar todo o conteúdo e ir para um dos sites que pode comprimir javascript. Você confinou o homem deles, copiou aqui, digite compressa. Quero dizer, compressa de riacho. E como você pode ver, estamos economizando cerca de 30 53%. Assim, seu site será carregado mais rápido diretamente em kilobytes. Talvez não seja grande coisa, mas é realmente imaginar que, por exemplo, eu tenho um código de área que tem 90 kilobytes e está entrando no 26 ou mordida testicular , tanto quanto eu me lembro, apenas comprimindo direito. Então você está salvando curva que, e também vai fazer o seu site carrega cargas de mais rápido. E lembre-se que se seu site se dissolver mais rápido, ele também estará melhor posicionado no Google, certo? Você também pode usar a base, 60 dedos do pé e culto que irá comprimir ainda mais. Mas agora está totalmente em ler um livro, mas realmente não importa, certo? Você pode simplesmente copiá-lo agora aqui. E você era apenas usado como um script agora que significa que Js e você trabalharão com o fogo. E então nós temos você mudar algo que você tem que agora copiado aqui e depois fazer de novo. Você também pode reduzir variáveis, mas às vezes não está funcionando e você sabe por que deveria. Você deve usar a base 60 para codificar Onley. Se torna a tua luta cinco menor, às vezes, não a torna menor. Então verifique sempre. Se isso é mais ou isso é menor, você também deve ativar em seu site algo com este zíper G cult maioria dos diamantes habilitados você pode bairro em acesso HD. Ok, hum, se ele está habilitado na sua hospedagem eu criei um incêndio que é chamado acesso HD. Você pode simplesmente enviá-lo para o seu site e ele não vai cometer um erro em seu site, porque mesmo se você não tê-lo instalado, ele simplesmente não vai funcionar. Ok, mas é em vez disso, então você vai economizar muito fora da banda, que e vai melhorar a velocidade de Donald seu site porque tudo vai ser mas é em vez disso, então você vai economizar muito fora da banda,o que e vai melhorar a velocidade de Donald seu site porque tudo vai ser comprimido por este G mas é em vez disso, então você vai economizar muito fora da banda,o que e vai melhorar a velocidade de Donald seu site porque tudo vai ser comprimido por este G zip não no javascript cinco, mas também CS shtml. Bem, quaisquer arquivos que vão ser baixados do seu site. Bem, não imagens porque não estão sobre a compressa quase. Certo? Mas coisas como texto. Realmente. Ele irá melhorar a velocidade do seu site. Mas você também deve ter provavelmente também notado que quando eu estava falando algo como, Hey, Hey, você tem que saber manter duas lutas e cada vez que você mudar algo antes de enviar para o site, você tem que ir aqui, em seguida, copie e aqui e comprima. E então novamente aqui e aqui. Uau, seria apenas os deuses do tempo, anos certos. E você tem que fazer isso, Al Nus. Você sabe que algo bom é bom. Por exemplo, grande júri s que eu criei porque sobre isso um Gondry é um gerente de tarefas. Ok, Ele só vai acabar muitas tarefas de desenvolvimento web, incluindo Juiz JavaScript lutas em mosca e você pode facilmente compactá-lo automaticamente. Quando você muda qualquer coisa em uma de suas lutas, ele irá criar instantaneamente versão comprimida eu acho que é apenas 10 vezes mais fácil. E seria melhor se você conseguisse vender a lição. Muito obrigado. 81. Erros mais comuns: Olá. Hoje vou mostrar a vocês sete os erros mais comuns que as pessoas estão cometendo. Por que desenvolver script Javascript? O primeiro mais importante, eu acho, é que quando você tem entrada e você tem aqui um texto tipo, ele até mesmo diz que aqui está o valor que é realmente um texto. Então isso significa que se você, por exemplo, obter esses elementos do documento obter uma amostra de limão direita, e você salvá-lo aqui você vai notar que quando você faz algo como esse valor de amostra e você enviá-lo para, por exemplo, alerta. Um resultado será luta e você pode ser pensar, Ei, é um número que podemos adicionar. OK, então vamos adicionar 100 mais valor simples e agora vamos ver qual é o resultado? O resultado é oh, é um 105. Por quê? Porque esse valor é uma string. Realmente. Este pensamento está esperando nós dedo do pé tem aqui uma corda e cordas. Quando você usa uma string com um número, você sempre terá uma string. Ok, isso é quase o mesmo. Como se fizéssemos algo assim, certo? E então sim, é 1005. Se você quiser interpretar isso como um número. Você tem que se lembrar sobre analisá-lo para o anti Jer antes então por causa disso. E agora ele não tem outro. Ok, eu acho que isso é muito importante porque muitas vezes você faz coisas assim. Ok, então este é o 1º 1 O que é o 2º 1? Bem, quando você cria um ovário capaz Então, por exemplo, eu e então você descemos flanco. Se eu for igual a zero, então faça algo como teste. Certo? E sim, isso vai funcionar. Como podem ver, temos a mensagem de teste. Mas o que aconteceria se fizéssemos algo assim por místico, certo? Porque estamos pensando como um ser humano, esse sinal de igualdade significa que estamos fazendo uma condição. Se coisas como se eu fosse igual a zero, o problema é que nada está acontecendo. Por quê? Porque agora estamos atribuindo zero não estamos fazendo comp orations. Onley comparar E operador ilusão está olhando assim. Você também pode comparar Como você pode ver, temos um aviso aqui. Estes os 30 pensando lembrar sobre o uso de seu ah livre é igual a sinais. Isso significa que também estamos verificando se há tipo dessas variáveis é o mesmo. Então, se é algo assim agora, nós não vamos dizer testes, certo, certo, porque há uma corda e este é o seu caindo outro para não me fazer ficar líquido aqui. Certo, Certo, então podemos verificar se algo é igual então podemos verificar se algo é iguala cinco na entrada, mas tem que ser um cinco. cinco na entrada, Isso é realmente, hum que tem laços iguais, certo? Isso também verifica se a hora é certa. Está bem. E outro erro é Olha, agora está funcionando, certo? Mas, às vezes, as pessoas fazem dois pontos assim. Como isso é realmente, realmente muito culturas. Mas eu acho que isso é o mais difícil de detectar de volta possível. Como você pode ver agora está funcionando. Vai funcionar sempre. Mesmo se você fizer algo assim, até mesmo você vê ou o que quer que você digita aqui este dedo foi porque a verdade é que nós podemos ter Humana entrar, certo? E acabamos de terminar a condição aqui. Isso é que eu perdi uma vez por horas para ver algo que eu tinha, mas eu era um novato, certo? Isso é que eu perdi uma vez por horas para ver algo que eu tinha, mas eu era um novato, Realmente? Tenha cuidado com isso. A próxima coisa que você deve se preocupar é com essa comparação. Então, se eu for igual a zero e ao mesmo tempo X igual a, por exemplo, 105. Em seguida, mostre a mensagem diretamente no. E Oh, tudo bem. Como podem ver, agora temos o teste. É para escrever, porque aqui você tem 105. Tudo está funcionando bem. Mas algumas pessoas fazem algo assim e também através. Mas agora pode ser até mesmo se eu fizer algo assim. Desta vez funcionou. É aleatório porque estes lance eram operadores? Certo? Algo assim. É um pouco sábio. Telefonista, esta é uma grande operadora branca. Este é operador relacional, aquele que pode verificar se isso é através da nossa doença através do direito. Você se lembra do que fazer para digitar duas vezes. Ok, podemos ter sorte, e o resultado vai ficar bem. Mas, às vezes, ele só vai fazer o seu código muito, muito, muito ruim. E é carro para esporte. Ok, então este é o poço, este é um dos cascos que muitas pessoas estão fazendo, e o próximo é o documento de sensibilidade maiúscula. Olha, Olha, eu poderia fazer algo assim, certo? Parou de funcionar. Nosso casaco estava funcionando. Agora não é quando você vai para o fogo de volta é a coisa legal é que nós podemos ver exatamente documento obter um limão por idéias? Não, a função. Oh, não é a função. Por quê? Ah, porque eu não digitei do jeito certo. Ok, este é um erro típico, então você pode verificar. Você pode facilmente detectá-la, certo? Se você sabe que tudo em javascript diferencia maiúsculas e minúsculas. E a última coisa que você deve se preocupar é terminar uma definição de objeto era com uma vírgula. O que eu quero dizer? Algumas pessoas estão fazendo coisas como essa de nossos números e iguais, e eles fazem algo legal. Um, 56 lá fora. Quero dizer 10. Está bem. E agora ele está trabalhando, certo? Tudo está funcionando bem. O que? Essa é a beleza, por exemplo, está funcionando. E agora imagine uma situação como essa. Vamos remover esse cara. Eu não preciso. E agora o teu casaco não vai funcionar. Todo o meu irmão vai ver para ouvir é esperado algo inesperado. Você deve atrasá-lo em vários navegadores da Web. O código foi parado por aí. Nada vai acontecer depois disso. Ok, então você precisa ter cuidado nesta vírgula aqui. Você também precisa ter cuidado quando você está criando objetos fora do nosso objeto. E quando você faz algo assim e, em seguida, você cria uma propriedade por exemplo, nome e, em seguida, nome SAR, você vai notar que ele está funcionando bem. Mas se você fizer algo assim, também pode parar seu casaco. No Firefox, está funcionando. Ele realmente depende do navegador da Web, mas na maioria dos navegadores da Web, ele só fará seu casaco parar de funcionar. Ok, isso é longo. Essa lição. Muito obrigado. 82. Manter os olhos saudáveis: Olá. Quando estou olhando para estes, eu d. Em meus olhos tem Por quê? Porque eu tenho o fundo branco. Se você vai gastar muito tempo trabalhando em seu computador, você deve evitar grandes planos de fundo. Você deve mudar a caloria varas fora de seu i. D. Cada I d tem uma opção como essa que estes bons ok, porque eles sabem que para a saúde de seus olhos você deve usar e os outros palitos coloristas com alguns golpes de graça de preto ou algo assim, será 10 vezes melhor. Então esta é a minha grande mão para você. Isso é uma dica para você. Você deve usar ir para lá opções essas opções. E isso significa que há algo como um perfil aqui, como você pode ver. E você pode mudar, por exemplo, a Noruega hoje. Como você pode ver aqui, você pode verificar como algo está parecendo. Você também pode ver como ele se parece em outras línguas, certo? Você pode exatamente mudar algo se você não gosta de algo que parece com isso, certo? Ele terá tudo categorizado e bem, você pode apenas aplicar. E agora, como pode ver. Parece melhor, certo? Talvez se você não gostar destes rosa aqui, você pode mudá-lo. Ou você pode encontrar outro escritor. Você pode mudar para outro. Há muitos aqui. Por exemplo, você tem Aqui estão isso não é bom luzes da cidade. Eu não gosto disso. Nem ele. É por isso que não sei se baixou estes. Eu acho que este parece bonito são alguns certo? E eu baixei da rede Be hastes que vêm. Há muitos sites como esse. Apenas o tempo que sendo deriva baixar o Google e você vai encontrar sites como esse eu acho que há muitas tentativas aqui e uma delas será certamente a que você gostaria, certo? E você pode apenas baixá-lo direito para Então, por exemplo, você pode baixar essas coisas. Um que você pode simplesmente não saber. E mais tarde você precisa apenas um pouco extravagante. E quando você cadela maricas, você tem algo assim. Você precisa copiar esta pasta no reboque. Um caminho assim. Ok. Ele será o seu nome de usuário dados aplicativo roaming tão decente. Aqui está a versão que você quer adicionar este novo tentador, e você precisa apenas vir bem aqui fora neste ano e teorias que você vai perguntar se você quer Teoh, você sabe, mudar isso. Eu não estou sendo nós por um pouco mais do que você será perguntado porque eu estou substituindo o que eu já baixei. E mais tarde, quando você sair desse feijão e voltar novamente, você verá um novo perfil aqui que você baixou para aqui. OK? Isto é muito, muito importante. Se você quiser Oh, programa, seus olhos serão muito gratos por você. Muito obrigado dessa zona fez isso. 83. O que é componente?: Olá, meu amigo. Você vê essa figura do ego? Tem muitos elementos, e esses elementos podem ser chamados de componentes. Por quê? Porque, no momento, pode haver muitos designers artistas trabalhando em cada um dos componentes que criam a grande figura. Quando mudamos essa cabeça para outra cabeça, ainda temos quem eu imagino, eu digo que agora parece um pouco diferente. Também podemos mudar o que Lex, agora é diferente, mas poderíamos mudar essa única coisa, mas todo o componente, o maior, aquele que consiste em muitos componentes, ainda está funcionando, e essa é a ideia por trás do react. Vamos dividir as coisas em seu aplicativo. Isso é, por exemplo, web one, certo? Em pequenos componentes. Então, por exemplo, quando você tem da, certo, você não vai criar tudo um após o outro, você não vai criar HTML e JavaScript e depois anexar ouvintes de adevent e assim por diante a todas essas coisas B se você fez dessa maneira, se você tiver que mudar alguma coisa, certo, você provavelmente também precisará mudar alguma coisa em JavaScript, Na maioria das vezes, quando você adiciona um novo recurso ou algo assim. No entanto, no caso de componentes, queremos criá-los dessa forma, para que possamos adicionar novos recursos. Podemos adicionar novos componentes, assim como inserir nessa coisa Por exemplo, também podemos adicionar acessórios. Podemos dizer: Ei, eu quero ter um acessório como esse, por exemplo. Vou tirar a cabeça e, entre isso e isso, vou colocar a capa, por exemplo, assim, e ela ainda está funcionando bem Temos um novo recurso e, ei, ele funciona. Queremos estender nossos aplicativos fazendo isso, não como antes. Obviamente, será mais fácil ver quando começarmos a escrever o programa, mas a coisa mais importante desta palestra que você deve entender é o que é um componente É só um indivíduo, qual elemento, certo? É apenas um item que você pode simplesmente colocar ao lado outro item e criar algo maior, itens menores Você cria um item grande que funciona muito bem em conjunto, como um up, por exemplo, certo? Portanto, você precisa mudar principalmente sua mentalidade quando começar a reagir Você não vai criar coisas como, você sabe, no caos, como você fez agora. E, para ser sincero, não há nada de errado em fazer tudo assim quando você está fazendo um pequeno projeto, lembre-se, porque o react é como uma solução para trabalhar com muitas pessoas ao mesmo tempo, certo? Ou quando o projeto vai ficar grande. Mas você precisa aprender a reagir e isso vai levar algum tempo. Portanto, você precisa decidir se quer fazer algo muito, muito rápido e não voltar a fazer isso ou se quer ter uma mentalidade diferente de juntar peças pequenas, pequenos componentes para criar algo maior e facilitar a substituição de coisas Assim como o site, seria como se você quisesse criar elementos reutilizáveis em seu site , onde pudesse usá-los onde quiser e quantas vezes quiser, certo Então, é como criar sua mentalidade para entrar em projetos maiores, certo? Você pode, é claro, usá-lo também em outros menores, certo? Mas às vezes pode ser matar demais. Mas aprender a reagir é uma boa ideia porque provavelmente você vai emiti-la em algum lugar, como , por exemplo, quando vai trabalhar para alguém, porque lá , como você pode ver , você vai trabalhar com outras pessoas e elas querem seguir algum tipo de padrão de criação de coisas E esse padrão permite, tipo, expandir as coisas porque, você sabe, quando alguém está seguindo algum tipo de regra, algum tipo de padrão, é bom porque, bem, os programadores podem ser, sabe o que? Eu vou para outro emprego. Agora eu não vou mais trabalhar com você. E se esse programador não usou, por exemplo, o React, mas ele fez tudo, você sabe, com caos, mentalidade Bem, outro programador vai ter um problema. Vai ser difícil entrar em um projeto como esse. No entanto, se alguém vai usar o react e simplesmente sair do local de trabalho, outro programador simplesmente entrará e saberá onde as coisas estão, porque haverá alguns padrões que todos podem seguir Um novo programador entrando no projeto entrará em cena e começará a adicionar novos componentes 84. Fundamentos do React - a palestra mais importante para aprender React: Olá, meu amigo. A aula de hoje é provavelmente a lição mais importante que você já teve sobre reagir. Depois disso, você não pode simplesmente começar a reagir com isso. Farei com que todas as definições básicas sejam fáceis de compreender para você Isso vai ser uma coisa muito fácil para você. Você vai sentir como trabalhar com o Rag e por quê? O React parece ser o que parece. Então, vamos começar a partir de. Como fazíamos aplicativos antes de usar R. Então, algo assim, por exemplo, quando eu clico, o número aqui aumenta. A maneira antiga seria criar HTML com IDs para que possamos acessá-los posteriormente, criando um script que permite, você sabe, contar e armazenar o número de cliques Então, precisamos fazer referências a elementos HTML como esses porque, caso contrário, não poderemos acessá-los. Mesmo no ouvinte, quando alguém clica, a contagem está aumentando e, em seguida, atualizamos a visualização, então o que é mostrado aqui é o valor que está E sim, funciona para pequenos projetos como esse. Tudo bem, mas estamos mudando nossa mentalidade, como eu disse na palestra anterior, queremos começar a criar componentes Então, estamos mudando nossa maneira antiga para uma nova. E vamos fechar isso, e estamos nos concentrando agora no código aqui, né? E queremos refazer tudo isso no React. Como usamos o react? Como o instalamos? Existem duas maneiras de instalar o react. Uma que é muito difícil e não vamos falar sobre isso nesta palestra. E o segundo, que é muito fácil. Tudo o que você precisa usar é incluir react porque essa é apenas uma biblioteca JavaScript, para criar uma interface de usuário por padrão. Sim, ele tem muitas outras coisas, mas, para ser honesto, a reação básica é apenas uma biblioteca. Então, vou copiá-lo para o nosso projeto, certo, assim. E sim, podemos usar o react agora. Mas o react também precisa funcionar em algo bom chamado Modelo de Objeto de Documento. Portanto, também precisamos incluir o modelo de objeto do documento. Reaja. Mas o problema com o link que obtive aqui e notei também que o site que estou usando para obter esses links se chama jsdeliver.com, é que ele não está usando UMD, e por que isso É porque isso significa definição universal de módulo. Você vê? O problema é que , como estamos fazendo com que seja uma solução rápida, queremos fazer isso aqui neste lugar específico sem configurar servidores, e essa é uma boa ideia para mostrar que precisamos usar algo que esteja tornando as coisas um pouco diferentes. Então, precisamos clicar no botão de navegação e ir aqui e escolher isso, ok? E esse é o link que queremos porque queremos aquele que podemos usar localmente sem servidor, e esse é o script que permitirá que você faça isso. Mas lembre-se, novamente, que esta é apenas uma solução rápida para aprender a reagir. Você não vai fazer isso assim no futuro. Mas ei, já podemos usar o react e isso é poderoso. Porque, para ser honesto, o react tem tudo a ver com elementos reutilizáveis , chamados Depois de configurá-lo dessa forma, você pode usar componentes criados por outras pessoas em seu site em qualquer lugar que quiser. Sim, isso é tudo. Se você quiser usá-lo apenas para isso, basta. Mas, é claro, as pessoas viram um potencial nisso, e existem muitas ferramentas que você pode aprender no futuro, mas elas não precisam apenas reagir, ok? E é por isso que eu acho estúpido que existam tantos tutoriais e documentações em que eles não mostram essa parte, que permite que você simplesmente entre no react instantaneamente, porque observe que agora podemos, dentro do nosso script, Então, podemos apenas comentar isso porque não vamos mais usá-lo. Queremos fazer todas essas coisas usando Jas, mas como usamos o react? A primeira coisa que precisamos configurar é como a raiz do modelo de objeto de documento que será criado pelo react. Porque o react tem algo bom. É chamado de modelo de objeto de documento virtual, que permite ver as alterações dos valores virtuais e depois aplicá-las ao seu site sem que você precise pensar nisso. E isso é super poderoso. Então essa é a raiz, certo? E vamos copiar isso aqui e vamos comentá-lo, porque todo aplicativo tem como uma raiz no Rat, o lugar onde iniciamos nosso maior componente, o aplicativo principal. E agora, para fazer isso, precisamos, dentro do nosso script, fazer algo assim. Acesse o modelo de objeto do documento react e crie uma raiz, certo? E criamos uma raiz nesse ID. Então, tudo o que precisamos fazer é obter elemento por ID e escolher a raiz, certo, assim. E agora, sim, estamos usando o react em qualquer lugar em particular, ok? Portanto, esse é o ponto de partida do nosso aplicativo. E agora podemos renderizar dentro dela o que significa renderizar, como impressão, ok? Componentes que vamos criar no react, certo? Como criamos componentes? Para criar um componente no react, você digita function e, em seguida, o nome do seu componente, ok? E sim, você pode simplesmente voltar aqui, por exemplo, olá, palavra como essa, ok? E isso é suficiente? Não. Por quê? Porque não invocamos essa função em nenhum lugar e não a renderizamos, certo? E para renderizá-lo, precisamos. Primeiro, salve essa raiz em algum lugar. Então, vamos salvá-lo na variável constante chamada raiz. E agora podemos acessá-lo e renderizar nosso componente. Mas para obter esse componente, precisamos usar a função chamada criar elemento, e agora podemos enviar para lá o nome da nossa função, que é componente. Está bem? Então lembre-se, isso é um componente, ok, eu reajo. Então, para ser honesto, componentes são apenas funções, certo? Nada mais. É apenas uma função simples. Agora, como você pode ver, temos a palavra halo lá, mas ei, isso não funcionou como provavelmente imaginávamos porque a primeira idade não aparecia aqui como Por que falaremos sobre isso em breve. Mas, ei, o mais importante é que o que for devolvido aqui aparecerá agora, será renderizado aqui Tantas coisas, tantos problemas agora, certo? Mas isso é apenas uma configuração. Não se preocupe Então, vai ficar mais fácil. Pense que devemos mudar o nome do nosso componente para algo que descreva o que estamos criando. Estamos criando um aplicativo, certo? E dentro do nosso aplicativo, queremos devolver o quê? Mais elementos. E agora observe que o que quer que eu faça, é só para você aprender como era, sabe, como tudo está funcionando em segundo plano, ok? Assim, podemos criar um elemento de leitura. E podemos criá-lo para ser D. Podemos enviar valores para o Dev, mas não temos nenhum valor para enviá-lo agora, então vamos enviar null porque create element usa três argumentos, ok? Então, primeiro é qual tática, então? Que valor estão enviando para ele e o que deve ser apresentado dentro dele. Então eu digo olá, mundo. E como você pode ver, este é nosso primeiro hello world dentro de um. Como você pode ver, não vemos uma mudança aqui em nosso código-fonte, mas mudamos a visão de alguma forma. A visão do que vemos. E se quisermos agora criar todos os elementos que fizemos antes. Bem, sem códigos chamados JavaScript, XML, que é como JSX, ok JSX. Você precisaria, antes de tudo, usar a sintaxe dessa forma, e agora você faria algo assim Ok, então eu preciso fazer. Como você pode ver, é bom que tenhamos algumas dicas. Mas, sim, funciona, certo? Criamos todas as coisas que fizemos aqui. E para ser honesto, isso parece horrível. Isso parece ótimo. Estou voltando de React Definitivamente para o que fizemos antes. E para ser honesto, eu nunca o usaria assim se fosse, você sabe, isso é simplesmente horrível de ler Felizmente para nós, alguém inventou algo chamado JA Zix E o que é JaiX? Para ser honesto, é como um JavaScript estendido. Algumas pessoas o chamam de JavaScript XML porque é baseado em HTML, que é baseado em XML. Então, para ser honesto, é como HTML mais JavaScript. E podemos usar uma linguagem como essa dentro do nosso script. Mas para poder usá-lo, primeiro precisamos instalar também algo chamado babel Então, vou copiar isso e colocar aqui. E agora aqui no script, eu digito aqui que estamos usando o texto Babel, e de agora em diante, isso vai ser muito legal e fácil de fazer porque não fazemos isso agora dessa maneira, certo? Mas podemos facilmente fazer algo como vamos retornar, e é uma boa ideia usar os parênteses aqui, e aqui podemos digitar apenas HTML Então, digamos que eu queira ter um ano de idade, bem-vindo e, bem, eu posso fazer todas as coisas que estamos aqui, certo? Da mesma forma que antes. Mas o problema é que, como você pode ver, temos um erro aqui, e o legal é que temos um erro aqui. Gosto de erros porque finalmente temos erros antes de não os termos. Mas o JS six finalmente tem, você sabe, erros dentro do nosso editor, não depois. E o erro está aqui porque a função que vai transformar isso nas coisas que tínhamos antes, criar um limão, envelhecer um, criar um B, criar o botão limão e assim por diante, certo? Precisa ter algo chamado de pai para todas essas coisas. Isso significa que precisamos apenas fazer algo como DIV e colocar tudo dentro do Div Como você pode ver agora, funciona bem, e isso é realmente JSX O que está por trás do que está aqui é JavaScript é JSX, para ser Tudo o que está aqui é JavaScript XML. Agora, isso é o que transcrito em Javascript típico e o react está apenas usando E isso é mais fácil de usar. É por isso que não é como se você precisasse reaprender um novo idioma. Só que você pode finalmente usar HTML dentro do Javascript. E observe que normalmente você precisaria colocar aqui, por exemplo, aspas e pensar nas aspas aqui para invertê-las Não, você não precisa se preocupar com eles. Você acabou de retornar HTML assim e, ei, está funcionando? Sim, está aqui, ótimo. Estou feliz. A próxima coisa é que você não precisa usar em nenhum lugar esse elemento de criação. Você pode simplesmente renderizar agora desta forma. Você está enviando aqui somente o nome do componente que deseja renderizar. Então foi assim que criamos nosso primeiro componente e o renderizamos no div raiz E você pode pensar que há muitas coisas a fazer para fazer isso, mas essas serão coisas que serão predefinidas posteriormente É como se fosse uma coisa única a se fazer. E depois estamos apenas trabalhando nos componentes, ok? E agora é hora de fazer esse componente, fazer coisas, certo? Então, quando clico nele, quero ver visualizações das coisas que são mostradas aqui para reagir a elas. Ei, não é por isso que reage é chamado de reação? Sim. Mas como fazemos essas coisas? Ok. Então, precisamos de alguma forma ter um contador, certo? E precisamos ter aqui uma variável que vai contá-la, e precisamos de alguma forma invocar uma função que vai, tipo, aplicar essas coisas Normalmente, fazíamos dessa maneira, e isso era um monte de coisas para fazer. Mas agora, vai ser um pouco confuso, mas logo você vai ver por que é tão legal Precisamos criar um estado. E para criar o estado, digitamos state e, depois, digitamos o estado inicial, ou seja, o valor da coisa que criamos aqui. Mas o que criamos aqui? Vamos chamá-lo, por exemplo, matriz em forma de gancho, assim Agora, é claro, precisamos agir como reagir, desculpe. E agora vamos imprimi-lo. Matriz em forma de gancho. Então, como você pode ver, quando entramos no console, o que está acontecendo? Um estado de uso de reação não é uma função. Por que é assim? Bem, é verdade porque eu escrevi SAD, não state. E agora, como você pode ver, temos no console o quê? A matriz em forma de gancho, que é zero e a função com parênteses E isso significa que essa função retorna uma matriz de dois valores. O primeiro valor é o inteiro e seu inteiro esse valor é zero porque aqui está um valor inicial para Então, como você pode ver, agora é maior, certo? Então, esse é apenas o valor inicial para o primeiro elemento em uma matriz, e o segundo valor é função. Isso é muito interessante, certo? Então é assim nessa situação, é como o zero e algum tipo de função, certo? Ok, então está aqui dentro agora. Hm. Então, talvez vamos dividi-lo. Então, vamos fazer algo assim. Constante. Vamos chamá-lo de contador. Você pode chamá-lo do que quiser. Vamos, você sabe, fazer algo assim. Então criamos um contador que vai armazenar esses valores zero, e a função vai ser armazenada na variável. Portanto, você precisa saber que, sim, você pode armazenar funções dentro de variáveis, invocar esses dados de funções e armazenar o valor de Canter aqui E isso é muito importante. Observe que eu chamei essa matriz de gancho. Por quê? Porque essa função é chamada de gancho. É chamado assim. É porque ele se conecta, conecta para sempre essa função com esse valor E não é como se tivéssemos que colocá-los em algum lugar aqui, certo? Ele apenas retorna o contador de variáveis e retorna o contador do conjunto de funções em que eles estão conectados um ao outro. Nós inventamos nomes para eles aqui, ok? Poderíamos chamá-los de A e B, certo? Depende de nós como os chamamos. Eles acabaram de ser retornados na matriz em forma de gancho como o primeiro valor e o segundo valor Nós os chamamos assim porque é assim que queremos chamá-los, então eles são autodescritivos Agora, não precisamos usar IDs aqui, certo? Podemos acessar o valor de Canter dentro do nosso componente entrando no JavaScript Mas como podemos pular aqui dentro do JSX, do HTML para Porque Jax é realmente HTML mais JS, certo? Precisamos digitar aqui colchetes e agora o nome da variável do Javascript Agora, como você pode ver, diz zero, mas se mudarmos o valor para cinco aqui, será cinco. Portanto, esse é apenas o valor inicial para Canter. Ei, mas queremos aumentar o Canter quando essa função é invocada, e essa também é a única maneira de fazer isso E isso vai acontecer quando o botão for clicado. E no JSX, temos quais eventos, que são muito semelhantes aos do Javascript Você pode ver ao clicar, o que significa que quando alguém clica no botão, o que vai acontecer que vamos colocar aqui Assim, podemos, por exemplo, colocar aqui, aumentar o valor. E por que aumentar os valores porque vamos definir aqui outra função, que servirá, por exemplo, para aumentar o valor, certo? E essa função vai ajustar o contador para quê? Por exemplo, 40.400. Quando eu clico nele, ele vai mudar para 400. Então, o botão foi clicado. E o valor aumentado foi invocado e definido Canter está conectado, É por isso que eles são chamados de ganchos, lembre-se. Está conectado a Canter. Então, quando eu envio aqui o valor, estamos realmente enviando valor para Canter e definindo o estado de Canter para 400 E, para ser honesto, set Canter também não está apenas alterando esse valor, mas também renderizando nosso valor novamente Como sabemos disso? Porque se tivéssemos escrito aqui, por exemplo, Canter e alterássemos o valor para 500, observe que nada acontece aqui Não é só porque Canter é constante quando o mudamos para , por exemplo, let Como você pode ver, o valor não está sendo alterado por quê? Bem, mudamos o valor de Kanter, para ser honesto, porque não? Invocamos o aumento do valor. Mas o problema é que não atualizamos a visualização. A vista é a que você vê aqui, ok? O que você vê no site. E nós não o atualizamos. Para atualizá-lo, precisamos renderizar nosso arquivo novamente. Mas você afirma como um conjunto conectado de contador a contador e, quando o contador de conjuntos é invocado, não apenas alteramos o valor, certo, mas também lembramos Atualizar, renderizar o estado em Então, neste lugar em particular, e há muitas otimizações nos bastidores, então não se preocupe com, você sabe, Uau, há algumas coisas para fazer do zero O legal é que existem otimizações. Você não precisa se preocupar em entendê-los demais. Sim, eles são otimizados. Mas eu o usaria se não fosse, certo? Agora, se eu quiser aumentar o contador em um, preciso digitar aqui o valor anterior, ou seja, o estado do contador anterior, e apenas adicionar um. Agora, como você pode ver, estou apenas aumentando o valor em um. Observe que não estamos aumentando o contador em um valor aqui. Estamos apenas acessando o estado do contador que está aqui em exibição e, em seguida, adicionamos a esse estado um e enviamos o novo valor para definir o Kanter, que em segundo plano está conectado ao Kanter, e muda seu estado de valor aqui e também Portanto, há muitas coisas acontecendo em segundo plano, mas você não precisa se preocupar com elas agora. Agora, também vou mostrar como tornar isso um pouco mais curto. Vamos usá-lo sob o comando e observar que aqui, temos realmente qual matriz de zero e depois a função, certo? Então, poderíamos realmente escrever aqui algo assim. Como você pode ver, temos uma sugestão. Então Canter está entrando neste set, contador e entrando nisso E para ser honesto, é como, Ei, zero está pulando. Aqui, a função está pulando aqui porque você pode atribuir valores dessa forma Então, se fizéssemos assim, zero pularia aqui, F pularia aqui. Mas é só que o zero F vem desse retornado do valor retornado por essa função e vai para isso. Então, isso é mais curto à direita do que isso. Eu te mostrei essa coisa para fazer você entender o que está acontecendo nos bastidores. E também o que? Invocamos a função aqui, mas poderíamos fazer isso de forma diferente Poderíamos invocar aqui, definir o contador, mas como invocá-lo ? Podemos invocá-lo usando uma função anônima como, por exemplo, dessa forma e depois invocar o contador de conjuntos e aumentá-lo E como você pode ver, funciona bem, certo? Então, isso não é mais necessário. Mas também podemos, em vez da função anônima, usar a função de seta. E no react, usamos funções de seta porque elas têm um pouco de vantagem sobre algumas coisas que são difíceis de explicar agora porque esse é apenas um aplicativo básico. Mas lembre-se de que, em vez de funções anônimas, as pessoas usam funções de seta. Falamos sobre eles antes, mas vamos apenas lembrá-lo essa é apenas outra maneira de escrever funções. Você não digita aqui agora, função, certo? Você usa o parêntese e , em seguida, a seta que está apontando para o corpo da função E esse parêntese aqui está aqui para quê? É para enviar argumentos para essa função porque não temos argumentos. Temos parênteses vazios. Então, esses parênteses estão com esse argumento vazio. A seta apontada enviará os valores para o corpo da função em que o corpo inteiro está aqui. Porque criar uma função que invoca apenas uma única função é estúpido, certo? Simplesmente levaria muito tempo. Então, podemos simplesmente torná-lo mais curto assim. Então, as funções de seta estão apenas encurtando isso. Você pode ver, está ficando cada vez melhor, certo? Agora fizemos o que fizemos antes, da maneira antiga, da nova maneira. A parte mais legal é que agora não precisamos pensar onde o valor do contador está sendo alterado Podemos alterá-lo de qualquer lugar em nosso abnow. Mas como o estado agora está conectado a essa função, quando fazemos isso com essa função, estamos sempre atualizados, atualizados na visualização E isso também é muito poderoso. Então, as duas principais características do react são que dividimos as coisas em componentes, certo? A segunda coisa é usar ganchos que conectam a função à variável Essa é apenas a lição. Muito obrigado 85. O que é Nodejs e npm?: Olá, meus amigos, hoje vamos falar sobre uma coisa super importante, que se chama NodeJS O NodeJS é um software que você pode baixar no seu PC. E depois de instalá-lo, você tem disponíveis muitas ferramentas pré-instaladas, ok? Com esse grande software e o que eles permitem que você faça. Em primeiro lugar, o NodeJS permite que você execute JavaScript fora do seu navegador e isso é simplesmente super poderoso Por quê? Porque se você executa o NodeJS e depois o usa, executa o JavaScript fora do seu navegador, isso significa que você não precisa mais de linguagens de programação como, por exemplo, Python ou PHP para algo chamado desenvolvimento do Bend Agora você só pode aprender uma linguagem, linguagem de programação como Java script, e nunca aprender nenhuma outra linguagem de programação e criar um aplicativo inteiro, o front-end, que normalmente era feito usando HTML, CSS e JavaScript, antes de aprender, por exemplo, PHP ou Python dois Crie dinheiro para o desenvolvimento. Então, algo que vai salvar, por exemplo, dados e enviar para eles e obter os dados de bancos de dados, por exemplo, certo? Agora, você pode fazer tudo usando apenas um idioma, e essa é a solução, certo? Tão tão poderoso. Hoje, muitos aplicativos novos se forem grandes, serão baseados nisso, ok? E depois de baixá-lo, o que é muito simples, você sempre escolhe a versão de suporte long ten. O LTS significa que ele terá suporte por muito tempo. Escolha o sistema e seu processador, que na maioria das vezes é baixado o X 64 defadoption e depois, next next next, next, next, next, next, next e com isso, você vai baixar o NodeJS com o motor para executar JavaScript, tudo bem, e algo que é chamado de NPM, que significa gerenciador de pacotes node Então, algo que vai gerenciar pacotes para o nod JS. Por padrão, o NoJS vem com alguns recursos principais que são embalados em pacotes E esses recursos estão, por exemplo, permitindo que você crie seu próprio servidor. Uau. Assim, o NoDJS pode configurar o servidor em JavaScript, o que significa que você pode, por exemplo, usando JavaScript, acessar arquivos no seu computador Sim, você pode acessar arquivos no servidor. Então, por exemplo, bancos de dados, certo? E muitas, muitas, muitas outras coisas. Isso está apenas simplificando, mas essa é a parte mais importante que você precisa, certo, não, certo? E esses são os pacotes principais, mas as pessoas estão criando pacotes sem JS. E quando você acessa um site assim, npm js.com, você descobrirá depois de se inscrever que existem 3000000/3000000 Obviamente, você não precisa aprender todos eles. Aqui você pode ver bibliotecas populares que são pacotes, certo? O pacote do gerenciador empacota uma biblioteca sem JS, e você pode escolhê-los por categoria. Ok, eu quero ver os pacotes de front-end, então vou escolhê-los, e então posso ver quais são populares, por exemplo, aprender sobre eles e depois instalá-los usando esse NPM como fazer coisas como instalar Falaremos sobre como fazer coisas como instalar na próxima palestra, mas observe que temos o react aqui Temos o react dome , que é o que usamos na aula anterior, certo Nós os incluímos manualmente na cabeça, aqui mesmo. Mas incluir algo manualmente não é bom porque, bem, o usuário que visitaria nosso site precisaria baixar essa parte toda vez, certo? Isso é simplesmente lento. E todas as coisas, como o que o React faz? Quero dizer, por exemplo, compilar o JSX em componentes de reação, por exemplo, essas coisas devem ser feitas no servidor E é por isso que você pode instalar, por exemplo, node JS em seu servidor logo em seguida. O que? Você configura todos os pacotes necessários lá e está pronto para começar, certo? Todas essas coisas serão feitas no servidor, certo? E você só vai mostrar o resultado. Então isso é super, super legal. Fácil de instalar. Um clique em Avançar, Avançar, Avançar. Eu nem vou mostrar isso porque você pode clicar nos botões Avançar. E depois disso, você precisa aprender a usá-lo nas IDs, como, por exemplo, no código do Visual Studio, certo? E essas coisas vamos fazer na próxima palestra. Mas, por enquanto, como eu disse, o mais importante para você é entender que existe um software que você instala no seu PC ou em outra peça. Por exemplo, hospedagem que permite executar JavaScript fora do navegador da Web. Isso é o mais importante porque torna o JavaScript superpoderoso. Você pode criar aplicativos inteiros em JavaScript. E vou acrescentar outra coisa muito, muito, muito interessante, que é o quê Seus aplicativos não precisam ser apenas aplicativos da web. Está bem? Uau, sim, você pode criar aplicativos JavaScript agora, mesmo para desktop, até mesmo para celular Existem estruturas para essas bibliotecas aqui que você pode encontrar no NPM Então, para ser honesto, essa é apenas uma solução para tudo. Muito legal, certo? Essa é apenas a lição. Muito obrigado. 86. Instalando a estrutura do Vite e do React: Olá, meu amigo. Hoje, você instalará seu primeiro pacote que será instalado e outros pacotes. Sim, isso também é possível. E esse pacote se chama Vite. Ao entrar aqui no gerenciador de pacotes node e digitar White, você notará que, sim, existe algo chamado te e você pode usá-lo para não tocar nas coisas que são mostradas aqui, ok? Então, principalmente as pessoas o usam para iniciar algo chamado servidor local que tem algo chamado HMR, que é a substituição automática de módulos, que significa que você pode substituir todas as coisas em seus sites quando estiver trabalhando com eles Instantaneamente e somente nesta frase em particular, sem atualizar o site inteiro Portanto, é super rápido e fácil depurar usando algo chamado Vt Mas, Vt, você precisa entender que o pacote nem sempre é como um único programa, uma única solução Pode haver muitas coisas dentro dela. Está bem? E também pode configurar a estrutura básica de sua reação. Como fazemos essas coisas? Quando você acessa o código do Visual Studio e abre o terminal, e para abrir o terminal, como você pode ver aqui, é um terminal, e para abrir o terminal, clique aqui. Controle mais essa placa aqui, ok? E esse sinal está ao lado do número um, e então você pode abrir e fechar o terminal. E aqui agora, porque instalamos no mundo da palestra anterior, o Node JS, você tem acesso ao gerenciador de pacotes NodeJS Então, quando eu digito NPM, posso emitir alguns comandos E um deles é init, o que significa nele inicialização, que significa criar o início do seu e do quê Então, eu quero fazer o que o VD faz e na versão mais recente. Portanto, não preciso configurar qual versão de quais coisas eu quero usar. E quando eu pressiono Enter, ele nos pergunta qual é o nome do nosso projeto. Se eu digitar aqui o nome do nosso projeto, vou criar uma pasta com esse nome. Mas vou colocar isso aqui, o que significa que quero criar um projeto nessa pasta específica com a qual estamos trabalhando. Em seguida, pergunte-nos se queremos remover todos esses arquivos ou se queremos cancelar a operação ou se você deseja ignorar esses arquivos. Vamos ignorá-los. Em seguida, podemos selecionar uma estrutura com a qual trabalhar. A estrutura básica de tudo. Como você pode ver, nós reagimos. Há outras coisas, como o Splter , que também são recomendadas Há uma vista. Eles também são muito legais, muitos outros. Mas vamos usar neste curso, reagir. Então, vou escolher react, Enter e, em seguida, ele pergunta que tipo de linguagem você vai usar? Você vai usar Typescript ou JavaScript, certo? Typescript é como Javascript, mas com tipos, ok Com tipos para variáveis e alguns recursos adicionais, avance um, mas muitas pessoas o usam porque querem tipos e querem depurar o código com mais facilidade Então, se você conhece JavaScript, quase já conhece o TypeScript, mas vamos nos concentrar no JavaScript porque não quero dificultar a leitura do nosso código e explicar por que estou explicando coisas relacionadas ao react, Não quero explicar tudo de uma vez. Você pode facilmente mudar para o texto datilografado mais tarde. Então, vamos escolher Javascript. E agora, como você pode ver, ele criou a estrutura para todo o nosso projeto, que é uma ótima configuração inicial para o aplicativo de front-end react. E aqui você tem algo como Read MiFi, onde você configura o que é seu aplicativo Você tem aqui o índice HTML, que é o ponto de partida para seu aplicativo, e ele tem fontes que são ap JSX, como você pode ver, X aqui, não JS, é X porque você escreve aqui usando HTML e JavaScript zig em um só lugar E o vite vem com o Bb, isso é legal porque você não precisa instalar todas essas coisas manualmente E agora vamos te mostrar algo muito legal. Quando eu executo o NPM run Dev, não vai funcionar Por quê? É porque não instalamos todas essas coisas aqui. Acabamos de configurar o modelo inicial. Então, agora precisamos instalar todas as dependências, que significa pacotes que estão relacionados à divisão, certo? Então, agora, quando eu clico na instalação do NPM, ele instala todas essas coisas E, como você pode ver, vai levar algum tempo. Mas observe que temos aqui algo chamado de módulos Node. E como você pode ver, ele instalou muitas coisas aqui. Não muito. Portanto, o mais importante para nós é te, mas o funcionamento do te depende de muitas outras coisas e também inclui alguns outros pacotes. E, para ser honesto, não precisamos nos preocupar com isso. É por isso que precisamos do gerenciador de pacotes, então não precisamos nos preocupar com isso, certo? O mais importante para nós é que todas essas coisas tenham acabado de ser instaladas e possamos usá-las. Isso é o que é importante para você. E agora, quando você executa algo, o que é chamado de NPM run Dev, que está aqui, como você pode ver, o pacote Jason é como uma descrição do que o NPM Então, quando executarmos o comando death, ele executará o vite E isso significa que ele iniciará o servidor em nosso caso, porque esse é o objetivo principal do Vt. E agora, quando eu abro aqui, como você pode ver, temos o ponto de partida. Podemos contar aqui ou também podemos, por exemplo, alterar alguns valores e ver instantaneamente o resultado. Então, observe que quando eu faço algo assim, e eu vou, como você pode ver, para o aplicativo de origem JSX e mudo alguma coisa para ver o quão legal eu sou Então, quando eu faço algo assim e salvo o arquivo, como você pode ver, ele muda instantaneamente aqui. Então, não precisamos nem mesmo atualizar esta página, certo? O que quer que façamos aqui, vai aparecer aqui. E isso é muito legal para depuração. Mas observe também que não precisamos mais, por exemplo, como fizemos na aula anterior, incluir react, react document object model porque isso foi feito por vite quando escolhemos o modelo para react, Não precisávamos, tipo, pensar nisso. Não precisamos incluir também a Bíblia. E o mais importante é que todas essas coisas estejam agora no servidor, certo, porque não é como se alguém precisasse baixá-las mais tarde. Então, para ser honesto, isso está apenas tornando sua vida melhor porque precisamos fazer todas essas coisas manualmente, certo? Você também tem aqui, por exemplo, gitignore, o que é Se você conhece o Github, ele ignorará a maioria das coisas que não deveriam ser carregadas no Github, Então, algumas coisas seguras que não deveriam ser compartilhadas ou coisas que são grandes e não são necessárias no Github, como compartilhadas ou coisas que são grandes e não são , por exemplo, módulos de nós Então, isso é como um modelo de configuração inicial. Então Vite te ajudou a fazer isso? E a segunda coisa: agora você pode executar o servidor localmente e depurar seu aplicativo react instantaneamente Você pode criar instantaneamente seus componentes e assim por diante, o que mostrarei como fazer nas próximas palestras É como um ponto de partida para seu aplicativo instantaneamente. Altamente recomendado. Eu amo Vt. Essa é apenas a lição. Muito obrigado 87. Aplicativo de arquivo único para aplicativo de vários arquivos - analisando a estrutura do projeto React: Olá. Nesta palestra, mostrarei como colocar o que fizemos nas primeiras palestras Então, como colocar isso na estrutura atual de pastas. Então você aprenderá os arquivos que estão aqui. O que eles fazem? Pelo que eles são responsáveis, ok? E também, como fazer o que fizemos antes em um único arquivo. Agora em vários arquivos. Então, primeiro, você vê esse arquivo aqui? Ele está na pasta de origem e é chamado de JSX principal, que significa JavaScript XML E esse é o principal, por isso é chamado de script principal principal de todo o seu aplicativo, que conecta tudo. E observe o que acontece aqui. Em primeiro lugar, temos muitos laptops importados, e eles são responsáveis pela importação de funções ou componentes, certo? Além disso, eles são responsáveis por se conectar a algo chamado Upjzix, onde você tem seu aplicativo principal, e também pela importação de CSS de pontos de índice, que é responsável pelo CSS de todo o site Então, é como um lugar onde você conecta tudo e também cria a raiz do seu site. E observe que no New Way HTML, nós também fizemos algo assim, certo? Mas tivemos que usar algo chamado classe de modelo de objeto de documento react. Mas por que não o usamos aqui? É porque importamos a função create root aqui. Nós poderíamos fazer isso dessa maneira, ok? E, você sabe, mais tarde precisaremos importar o modelo de objeto do documento react, e tudo funcionará da mesma forma. Mas a reação mais recente é sair das aulas. Ele quer usar apenas funções. E para ser honesto, é mais fácil de ler quando você escreve coisas assim porque, em primeiro lugar, você pode ver claramente o que será usado no programa atual aqui em cima, certo, então esse programa está usando função create root, ok? E não é como se tivéssemos modelo de objeto de documento de reação completo importante, certo, com todos os métodos contidos nele quando estamos usando o root do Just Create. Além disso, até onde eu li, tem algum tipo de otimização em segundo plano por causa disso. Portanto, esta é uma situação ganha-ganha. Não precisamos escrever algo assim agora. Observe que aqui estamos pegando a raiz. É o mesmo que aqui, e está tirando a raiz do componente JSX ativo, e esse é o componente, mas é um script Como podemos distinguir essa coisa? Observe que a primeira letra aqui é minúscula, e é por isso que isso é apenas um programa, um script. Mas quando você vê maiúsculas, o início, significa que é um componente. Isso é como uma convenção para nomear coisas , então, quando as criamos, também as renderizamos instantaneamente Poderíamos, você sabe, renderizá-lo antes em uma linha, então poderíamos fazer algo assim, se quiséssemos, poderia ser feito dessa maneira, mas fizemos isso de forma diferente, certo? E depois disso, temos uma aplicação semelhante aqui, da mesma forma que tínhamos. Aqui, mas também algo é chamado de modo estrito. Você pode, se quiser, excluí-lo, mas isso é, como o nome sugere, como o modo de abertura que observa estritamente o que você está observa estritamente o que você escrevendo em seu projeto atual E se você cometer um erro, será mais fácil detectá-lo por causa desse modo, ok? E sem isso, seria mais difícil de detectar. Então, você pode estar pensando que isso vai deixar seu site lento, por exemplo. Se estivesse no seu servidor de desenvolvedor, quero dizer, no servidor de produção. Então, se quiser, transfira seu is e ele estava lá, então sim, mas o legal é que Vt adicionou e vai removê-lo Sozinho. Você nem precisa se lembrar disso. Portanto, esta é apenas uma situação ganha-ganha. Você desenvolverá seu aplicativo no modo estrito e, depois, ao implantar seu aplicativo, ao criá-lo. E para construir seu aplicativo, você escreveria NPM run Build, ok? E executaria o script, que é do pacote JCN chamado build E então ele usaria o Vte para criar o aplicativo inteiro. Não vamos fazer isso agora, ok? Mas é só para você saber, você não precisa se preocupar com o fato de o modo de rua ficar mais lento mais tarde. Então criamos o root e colocamos o aplicativo deles, o principal componente inteiro do componente principal que conectará tudo. E aqui, como você pode ver, temos o quê? Função que é chamada, e isso é complemento, certo? Lembre-se, nome do componente. E tem o mesmo nome do arquivo, e aqui está o conteúdo dele, certo? E isso vai mostrar onde. Bem, ele mostrará no documento um bom elemento pela raiz do ID. Então, no índice HTML. Então, aqui, ok? Então, ele vai substituir isso, a raiz, pelo conteúdo do que colocarmos como retorno aqui, ok? Para ser honesto, não vamos entrar no índice HDMI posteriormente. Vamos configurá-lo apenas uma vez e provavelmente nunca mais voltaremos aqui. Aqui você também tem qual é o primeiro script que deve ser executado, sim, esse script, que está apenas conectando o primeiro componente ao índice HTML. E é dividido dessa forma porque você quase nunca visita o HTML de índice quando está usando o React e o JSX principal Isso é muito raro. Então, isso é legal porque é como um script global que você raramente visita. Mas aqui, você conectará tudo mais tarde, quando estiver desenvolvendo seu site. Então, para ser honesto, se você quiser, tipo, refazer o que fizemos antes. Então, aqui, tudo o que precisamos fazer é pegar todo o aplicativo que tínhamos, certo, e ir até aqui e substituir essa função aqui, certo? E, para ser honesto, isso é tudo, mas temos um erro. Por quê? Em primeiro lugar, estamos recebendo avisos aqui que dizem que, bem, o estado de uso é declarado, mas não é usado, por exemplo E é porque estamos acessando estado de uso agora usando qual classe de reação. E como eu disse anteriormente, na versão mais nova, não devemos usá-lo por meio do objeto, mas devemos fazer dessa forma, ok? Então, podemos ver claramente: Ok, o estado do gancho será usado neste lugar. Em seguida, temos avisos de coisas que não estamos mais usando, então podemos simplesmente excluí-las. E, para ser honesto, isso é tudo. Agora temos tudo o que fizemos em um arquivo em, tipo, alguns arquivos, e pode parecer complicado agora. Mas quando seu projeto ficar complicado, ele vai melhorar seu fluxo de trabalho, acredite em mim. No início, esse fluxo de trabalho parece muito estranho. Eu entendo que você não se preocupe , foi o mesmo para mim. Você só precisa se acostumar com isso. E aqui temos agora nossa função, primeiro componente, aplicativo que conectará os próximos componentes dentro dele. Como fazer essas coisas, mostrarei na próxima palestra. Por enquanto, o mais importante para você é que o principal local do que você fará acontecerá aqui para conectar novos componentes nesses locais Você raramente estará. Esse é o lugar principal. Você não vai usar HTML de índice normal, por exemplo. Não, você vai ficar a maior parte do tempo aqui. E, bem, se você quiser atualizar o CSS que está conectado a um componente, como você pode ver, você também tem CSS com maiúsculas para cima, e aqui está o CSS para Logo para coisas que acabamos de excluir. Mas sim, está aqui. E o CSS com pontos de índice é apenas CSS para todo o seu site. Então, como você pode ver, elas mudam a forma como, por exemplo, as âncoras funcionam, quão mais ousadas devem ser mostradas, Estamos usando display flex por padrão, e assim por diante Portanto, há algumas coisas que se aplicarão a tudo. Ok, isso é só essa lição. Se você tiver alguma dúvida, fique à vontade para perguntar. 88. Como criar um componente e conectá-lo ao App.jsx: Olá, meu amigo. Nesta palestra, mostrarei como criamos componentes na estrutura do aplicativo react Em primeiro lugar, queremos criar um componente, você deve primeiro criar uma pasta de componentes. Por quê? É porque você vai ter muitos deles. Por que não colocamos esse componente dentro da pasta de componentes? É porque você deseja ter um acesso muito rápido a esse arquivo, pois muitas vezes também pode abrir o JSX Atualize a estrutura de todos os componentes do seu site. Você verá em breve por que isso é importante? Então, quando estamos nos componentes, agora precisamos criar um arquivo. E isso é muito importante. Quando você está nomeando seus FIs, ok? Ao nomear componentes, você deve sempre usar letras maiúsculas para Então esse é o nome do roteiro, Jaz, ok? Então, se você tem um script, seja, um programa que vai fazer algumas coisas, você vai chamá-lo assim. Mas para distingui-los dos componentes, você deve usar maiúsculas. O mesmo UPJSex. Agora precisamos chamar nosso componente para o que é responsável pelo que ele vai mostrar. Diga-me como você chamaria o componente que temos aqui? Componente é como contar cliques, certo? Ele tem um rastreador para rastrear quantos clipes clicamos Então, isso pode ser chamado, por exemplo, clique em Contador, botão Contador, clique em Rastreador, contador interativo, contador recreativo. O mais importante é que seja arquivo autodescritivo e novo, e vou chamá-lo de clique em Contador Como você pode ver, usei primeira maiúscula aqui e a primeira maiúscula também para as segundas palavras para as palavras que vêm depois da primeira palavra, porque pode haver muito mais Então, JSX. E este é nosso primeiro componente, e eu vou criar uma função que será chamada da mesma forma que o nome do nosso quê? Cinco. E depois, precisamos criar um corpo, e o corpo dele será apenas o do componente up porque queremos apenas colocá-lo em outro arquivo, para que possamos reutilizá-lo E agora temos erros. O primeiro erro é que, bem, diz-se que nunca foi usado, e a segunda coisa é que, bem, não o exportamos. Precisamos exportá-lo, então podemos dizer algo como vamos exportá-lo por padrão e estamos exportando o contador de cliques Então, isso é muito importante porque muitas pessoas não sabem. Já tivemos uma aula sobre isso antes, mas estou lembrando porque é muito importante Só estou informando a ela que é possível importá-lo para algum lugar, ok? O segundo erro que temos é que o estado de uso não está definido. Então, precisamos importá-lo porque eu tenho o codium instalado. Como você pode ver, basta apertar o toque e ele substituirá o que foi sugerido. Então, para usar o codium, basta instalá-lo, é uma IA. É muito útil. Agora estamos usando o estado de uso aqui, então estava funcionando bem. Então, nós o temos em arquivo que não está totalmente conectado a nada no momento. Então, não podemos usá-lo agora aqui, certo? Podemos remover nossa estadia aqui porque não é mais, certo? E também vamos remover o que retornamos aqui, e queremos usar nosso contador de cliques aqui, certo? Mas como fazemos isso? Bem, precisamos acessá-lo, então clique. Clique em Canter. E observe que é porque estamos trabalhando em um projeto que é o Critic Invite. Temos algumas extensões instaladas. Quando pressionarmos Enter, ele será importado, clique em Canter aqui Então, podemos usá-lo agora. E quando eu clicar em Tab, como você pode ver, ele também adicionará isso aqui. E agora, quando vamos aqui, como você pode ver, podemos usá-lo normalmente como antes, mas a coisa mais incrível sobre isso é que eu posso reutilizá-lo muitas vezes É por isso que os componentes são legais. O problema que temos aqui é que temos um erro é porque precisamos usar algo chamado fragmento de reação, ok? Se quisermos usar muitos componentes ao devolver algo. Poderíamos usar aqui, por exemplo, DIV, ok, mas seria apenas uma sobrecarga Podemos dizer assim porque realmente não precisávamos de uma tag, só queríamos acompanhar como a linguagem JavaScript funciona, porque quando você retorna algo, não pode retornar muitos componentes de reação e um. É simplesmente impossível em Javascript. É por isso que eles inventaram algo assim. Então, quando alguém está tentando devolver muitas coisas, não será um erro fazer essas coisas. E agora temos algumas delas, e a coisa mais legal sobre isso é que o estado de cada variável não está conectado entre si Isso é incrível porque cada componente, quando você cria uma instância dele, você cria um exemplo dele, algo que não é como se eles soubessem um do outro, certo? Por que é tão legal? Porque normalmente, se você estava escrevendo antes de tudo em HTML e JavaScript, quando se tivesse criado outro elemento semelhante, estamos fazendo o mesmo. Você precisará alterar as ideias, obter elemento por ID para o próximo elemento, precisará repetir todas as coisas que você tinha. Caso contrário, o JavaScript não saberia qual cara deveria ser atualizado quando. Mas aqui, você pode simplesmente reutilizá-lo em qualquer lugar que quiser no seu aplicativo É por isso que o react também é poderoso. Crie um, reutilize em qualquer lugar que você quiser. Porque se for feito uma vez, você pode simplesmente pular aqui e nem pensar no componente em si, você está apenas usando ele, certo? Todas as conexões devem ser feitas automaticamente em seu componente. E isso, eu acho, mostra por que o react também é muito, muito legal. Obviamente, nosso componente no momento não se repetiria assim em seu site, mas isso serve apenas para , você sabe, mostrar as coisas mais básicas quando você está aprendendo re. Então é assim que funciona. No momento, precisamos apenas de um componente, que, como você pode ver, é muito bom que ele mantenha seu estado. E é importante notar que temos aqui qual é a importância. Caso contrário, não veria essa coisa. Então, precisamos importar isso aqui. Então, este é realmente um lugar, como eu disse anteriormente, para conectar todos os componentes que você vai criar porque, no futuro, você criará em componentes, muitos outros componentes, como, por exemplo, cabeça, navegação, por exemplo, botões que são responsáveis por coisas diferentes. E então você pode simplesmente colocá-los aqui usando a pilha. Isso é super legal, certo? Se você tiver alguma dúvida, fique à vontade para perguntar. 89. O que são adereços e como usá-los?: Olá, meu amigo. Hoje vamos falar sobre algo que é chamado de adereços, e eles significam propriedades Observe que temos aqui o clique Canter, e esse clique Canter é baseado em um componente que sempre faz a mesma coisa E sim, agora posso repetir meu componente várias vezes, mas às vezes você deseja personalizar os componentes. Por exemplo, eu quero ter um rótulo diferente para esse botão. Eu quero fazer esse padrão aumentar em, por exemplo, cinco. Então, eu quero um comportamento diferente, certo? Quero personalizar um componente específico ao meu gosto quando o uso em meu aplicativo, certo? Então, neste lugar aqui, por exemplo. Então, como fazemos isso? Precisamos enviar de alguma forma para clicar valor de Canter que mudará seu comportamento, e fazemos isso enviando algo chamado de adereços, que são como argumentos para funções, ok Então, como fazemos isso? Precisamos, tipo, dizer: Ei, eu quero que o valor inicial seja, por exemplo, não zero, mas dez, certo? E agora essa coisa será enviada para o nosso contador de cliques aqui para esta função. Então, é como enviar um argumento. Eles chamam isso de adereços porque, bem, é assim que eles o chamam Propriedades, certo? As propriedades da função serão como agora aqui, envie. E agora podemos chamá-lo, por exemplo, de adereços, ok? E isso é suficiente, mas temos aqui o que? Algum tipo de aviso porque ainda não o usamos, por exemplo, certo? E o que podemos fazer com esses adereços agora? Nós podemos usá-los. Como? Que adereços são esses agora? Bem, se eu fizer algo assim, adereços de log do console. Vamos ver o que teremos quando atualizarmos nossa página. Você notará que, no console, sabemos onde está? O valor inicial dez, como você pode ver, está aqui. Então, adereços são realmente o objeto, certo? Então, isso significa que, bem, podemos copiá-lo para este lugar. Isso significa que temos aqui algo exatamente assim, certo? Então, se você quiser acessar o valor inicial, precisamos digitar este lugar para esse volume inicial, certo? E como você pode ver, temos aqui um problema. O primeiro problema é que não especificamos, talvez eu tenha digitado errado Valor inicial. Tudo bem. Então, quando eu o atualizo, como você pode ver, é dez. E em outros lugares, está errado porque, bem, não definimos o valor padrão. E esse é o problema que podemos resolver usando algo que é chamado de propétipos no react Mas usar essa solução é muito longo e não quero perder seu precioso tempo porque hoje em dia você não usa essa solução, usa datilografado para especificar um tipo, Além disso, em situações como essa, maioria das vezes as pessoas não pegam o objeto inteiro de todos os valores aqui, como um único objeto, como adereços, elas o fazem de forma diferente Em breve eu vou te mostrar como. Então, quando eu tenho o valor inicial dos adereços, posso acessá-lo, mas também posso fazer isso de forma diferente Eu poderia fazer algo assim. Então, enrole os colchetes aqui e digite o valor inicial. Então, o mesmo nome que eu usei aqui, certo? E agora, não estamos usando adereços aqui, mas no nome daqui E, como você pode ver, também está funcionando bem. Mas agora também podemos definir aqui um valor padrão. Então, o componente I não usa o suporte personalizado dessa forma, então zero será atribuído Então, como você pode ver, agora, quando eu o atualizo, valor padrão é dez, mas em outros casos, é zero E você pode estar se perguntando como isso funciona? Então esse lugar aqui é realmente assim. Então, estamos tentando atribuir ao objeto que tem, no início, o valor inicial definido como zero e ao objeto que tem o valor inicial definido como dez. Então, estamos apenas substituindo dez aqui, estamos substituindo zero por dez. Digamos que haverá mais coisas personalizadas. Então, por exemplo, digamos que eu queira contar de forma diferente. Digamos que o set counter deva fazer algo como, por exemplo, incrementar por, e vamos definir o valor padrão como um, certo? Então, algo parecido. Mas também podemos enviar aqui agora incrementar em, e digamos que aqui vamos contar até cinco Então, agora nós realmente fizemos algo assim. Incremente em cinco. E aqui está o incremento de um por padrão. Então, isso por isso, eu apenas o substituo. Mas observe que podemos, por exemplo, o valor inicial, digamos que aqui, o valor padrão será 500, certo? Então você tem 10500. E no caso do segundo componente, temos aqui apenas esse valor, certo, enviado aqui. E isso está funcionando assim. Vai que o JavaScript está procurando chaves para propriedades que sejam valores iniciais. Então, aqui temos o valor inicial, e ele vai mudar somente aqueles que estão no lado direito. Então 500 virão até aqui, e incrementando em um, vamos ficar Então é assim que escolhemos os valores padrão. Além disso, é por isso que precisamos usar colchetes aqui, porque se não usarmos colchetes, bem, nosso programa não funcionará É porque estamos tentando fazer algo assim nessa situação, que não é uma sintaxe possível em Javascript, certo? É por isso que precisamos fazer algo assim. E é bonito, eu acho, você sabe, fácil de ler agora, certo? Você pode ver claramente na parte superior quais propriedades serão personalizadas em nosso contador de cliques de componentes. Como eles são codificados, certo? E quais são os valores padrão? Se tivéssemos usado a solução que está no S lint, bem, isso seria muito longo, e eu acho que é chato Está demorando muito e não está conseguindo nada melhor. Como você pode ver, ainda diz que falta validação. É porque não definimos o tipo. E no texto datilografado, definir tipos é simplesmente fácil. Não vamos usar o que o link S diz para este curso porque isso é apenas exagerar e perder nosso precioso tempo aprendendo recursos interessantes Então, no arquivo de conflito nas regras, vou adicionar aqui uma linha que diz que queremos eliminar os tipos de adereços E agora não vamos receber esse aviso todas as vezes. E nessa palestra, o mais importante para você foi que você aprendeu a enviar adereços personalizados, pois um exercício que farei em breve com você, se quiser acompanhar comigo, é fazer aqui o clique em Lixeira Então, para aquela pessoa que está usando no aplicativo o componente contador de cliques para configurá-lo manualmente. Como você faria isso? Primeiro, você precisa configurar um novo adereço e vamos chamá-lo, por exemplo, de texto do botão, algo assim Por padrão, podemos configurá-lo para clicar em mim como nosso CDiumHadlas e podemos simplesmente Assim, certo? Então você está usando o texto do botão aqui porque o comportamento padrão é clicar em mim, então nada muda. Mas podemos dizer algo como aqui, por exemplo, texto de botão, e vamos configurá-lo para, por exemplo, aumentar em cinco. Como você pode ver, alteramos o valor padrão do botão. Não precisamos agora usar o componente para talvez, personalizá-lo para o caso de uso específico. Podemos personalizar cada componente deste local usando nossos adereços, certo? Se não quisermos personalizar, podemos usar o comportamento padrão na linha 11. Mas se quisermos personalizar, podemos mudar qualquer comportamento padrão a partir daqui, certo? Você pode fazer com que o cabeçalho H one também seja personalizado, ou talvez você possa fazer que ele apareça ou não. Depende de você. Você pode jogar com ele. Mas o mais importante desta palestra para você é que você pode enviar argumentos aos componentes por meio de algo que é chamado de adereços na reação Bem, biblioteca, todo mundo chama isso de adereços, certo? Então você saberá agora como usá-los e por que eles são chamados assim. E a que realmente as pessoas se referem quando falam sobre adereços Na verdade, são argumentos que estão sendo enviados para que funcionem bem, certo? Essa é apenas a lição. Muito obrigado 90. Introdução: o que vamos criar?: Olá, meu amigo. Hoje, eu gostaria de mostrar a vocês o que vamos criar na próxima palestra Vamos criar um clicker de ouro, que permitirá que você ouro dentro dessa mina de ouro Quando você clica no ouro da mina, como você pode ver, temos uma animação da quantidade de ouro que reunimos. E observe que esses padrões foram desativados. Mas agora eu posso, por exemplo, melhorar meu nível de mineração e, por causa disso, o poder da minha mineração agora é igual a dois. E quando eu atingi meu ouro, como você pode ver, agora eu minero em duas quantidades, certo? Agora eu posso atualizá-lo ainda mais. Agora é às quatro. Mas eu também posso comprar o Auto Clicker, Auto Miner E, como você pode ver, agora está automaticamente minerando meu objetivo. Quando eu o compro novamente, como você pode ver, agora temos o que. Sim, é mineração com o nível de potência de dois porque os clickers automáticos ainda não foram atualizados Não temos como atualizá-los agora, pelo menos. Portanto, este é um jogo simples para um clique automático, certo Você poderia, é claro, estendê-lo mais tarde com diamantes e assim por diante Mas, por enquanto, você o está tornando um pouco menor. Vamos criar tudo em um arquivo para, por exemplo, focar primeiro nos recursos que você precisa aprender para ser bom, certo, em reagir. Isso é o que eu quero focar nesta palestra nessas palestras e observar que eu também criei quais ícones Então, vamos aprender como obter ícones como esse e colocá-los na altura do sol, nossa reação. Além disso, como animar, como você vê aqui. Perceba que quando eu clico automaticamente, isso e isso são animados, certo Quando comecei a minerar, isso e isso, tipo, mudaram. É porque, bem, custa aumentar o dinheiro, certo? Então eu tinha isso e isso tinha que mudar. Você pode ver que é como um jogo simples que podemos jogar um pouco e depois comprar o autocliker Então, existem muitos, muitos jogos online como esse, mas o mais importante para nós é que você aprenda muitas coisas boas nesta seção e, ao mesmo tempo, vamos nos divertir porque criar jogos é muito legal. Se você tiver alguma dúvida, como sempre, fique à vontade para perguntar. 91. Ex. Crie a comp principal do GoldMiner: Olá, meus amigos. Este é um exercício porque você deve ser capaz de fazer essa parte de nossa mineradora de ouro sozinho Então você tem Heather gold minor gold e a quantidade de ouro, e ao clicar nele, você aumenta o valor Isso é o que fizemos nas palestras anteriores. Lembre-se de que, se você quiser se tornar um programador, precisa praticar e fazer isso sozinho ou assistir à palestra como eu fiz Então eu coloquei o minerador de ouro a partir de componentes aqui em nossa aplicação principal, e dentro do minerador de ouro que eu adicionei aos componentes, eu conectei, então eu conectei o conjunto de funções gold ao ouro E então eu voltei, o que? Cabeçalho, dourado menor, o valor atual. E quando alguém clica no padrão, a função dourada definida vinculada ao ouro aumentará o ouro aumentará o um quando alguém clicar Portanto, essa é uma entrada bem simples para nosso aplicativo, e você deve ser capaz de fazer essas coisas muito rapidamente porque essa é a coisa mais básica relação ao react, então pratique, ok? Nas próximas palestras, é claro, vamos criar tudo do zero Eu não vou te mostrar como algo foi feito porque você precisa ver como as coisas estão sendo feitas para aprender e se tornar um bom programador Se você tiver alguma dúvida, fique à vontade para perguntar. 92. Atualização de energia para mineração de ouro: Olá, meus amigos, é hora de criar o quê? Nível de mineração. Então, vamos criar aqui um nível de mineração como esse, certo? E agora precisamos mostrar esse nível. E para mostrar isso, precisamos primeiro criar uma variável, que será conectada a uma função específica Então, proponho chamá-lo talvez não de nível de mineração, mas algo como clique em Power. É porque talvez você queira anexá-lo no futuro, não apenas a algo que vai se importar com alguma coisa, certo? Talvez você queira criar um jogo que, você sabe, crie quando algo for clicado e, em seguida, aumente o nível do jogador, por exemplo, ou o nível de seu equipamento Então esse nome vai ser mais universal, certo? Então, clique em Power, defina Click Power e, por padrão, podemos configurá-lo como um. Ok, então agora podemos fazer o quê? Mostre aqui, certo? Clique em Power pode ser exibido e, como você pode ver, é um. Também precisamos de um botão que mude isso. Então, vamos criar um botão e, como você pode ver, o bom é que temos códio que vai criá-lo Mas é claro que ele não sabia que, quando atualizamos o Click Power, também queremos, tipo, fazer com que isso custe, certo? Então, proponho alterá-lo para algo como “custo disso”, talvez seja “vamos lá”. Custo e quanto vai custar aqui, certo? Então, devemos inserir o JavaScript, e eu proponho criar uma variável que vai , tipo, mostrá-la. Então clique em custo de energia ou talvez atualize o custo de energia, algo assim. Talvez isso seja melhor. Agora precisamos criá-lo aqui, aumentar o custo de energia, e essa é uma boa dica. Queremos usar state porque queremos vincular isso a isso e o valor inicial é send. Agora, quando alguém clica nesse botão direito no set, clique em Power Eu quero aumentar o nível de potência, certo? Como você pode ver, ele está sendo aumentado, mas o custo não está sendo aumentado. Não é isso que queremos, certo? Então, provavelmente precisamos, em vez de fazer isso agora, porque colocar todas as funções aqui não é legível Proponho criar uma função especial que será responsável por todas essas coisas. Então, proponho chamá-lo de ótimo clique de Power, ok? E não precisamos que seja a função de seta agora. E vamos criar essa função aqui. Então, vamos criá-lo usando a função do tipo seta. E por que isso acontece? Porque no react, estamos acostumados a usar funções de seta em todos os lugares por causa de problemas legados, quando o react realmente não estava usando funções, mas classes em todos os lugares. Isso é uma coisa. A segunda coisa é que às vezes você pode querer usar funções de seta por causa da consistência. Todo mundo está usando a função de seta. Então, se você tivesse usado, por exemplo, função típica, função anônima ou funções normais, quando alguém for ler seu código, ele ficará confuso, certo? Porque isso é apenas lembrar que as funções de seta são principalmente maneiras diferentes de escrever como sua função será definida, certo? Então, estamos apenas salvando isso dentro dessa variável. Isso é bonito o suficiente. E agora precisamos defini-lo. Então, como você pode ver, a primeira sugestão, que é muito boa, é que ela nos diz que devemos verificar se o ouro, a quantidade que temos agora, é suficiente para atualizar, certo? Porque não deveríamos ser capazes de fazer o upgrade como fazemos agora, certo? Bem, não está funcionando porque temos um erro, mas não devemos ser capazes de atualizá-lo quando não temos ouro suficiente, certo? Ok, então isso é uma boa ideia. Vamos verificar isso. E depois, talvez não vamos usar a dica porque precisamos entender o que está acontecendo um por um Em primeiro lugar, precisamos? Precisamos, precisamos inserir nosso conjunto de ouro, certo, e precisamos diminuir o valor do ouro pelo custo de energia de atualização, certo, que está aqui. Isso é bom. Depois, precisamos fazer o quê? Use o set click power two plus one porque, sim, queremos que ele seja mais poderoso. E também invocamos o custo definido de energia do upgrade porque queremos que cada atualização custe mais a cada golpe Então, agora, como você pode ver, eu não consigo atingi-lo, mas quando eu extraio ouro e chego depois de dez, quando eu atinjo, como você pode ver, meu nível de mineração é, e agora eu posso minerar ouro. Bem, não está funcionando. Por quê? Porque definimos o ouro usando ouro mais um, mas devemos usar agora o que clicar em Power, certo? Ok, agora eu posso fazer isso mais rápido, certo? Quando eu chegar a 20, agora ele será atualizado gratuitamente a cada vez Isso é muito legal, não é? Se você tiver alguma dúvida, fique à vontade para perguntar. 93. Funções do atualizador no React Hooks: Olá, meu amigo. Hoje vamos falar sobre uma cobertura super importante, chamada UpdaOrFunctions E isso mostrará agora um grande problema que criamos em nossos aplicativos atuais. Isso não é visto porque é um aplicativo pequeno e, quando clicamos no botão, realmente atualizamos o estado de nossos aplicativos ou os valores dentro do nosso componente, quase ao mesmo tempo em que clicamos nele, certo? Mas o problema é que o que acontecerá se essas mudanças não forem, por exemplo, instantâneas. Não é feito localmente, pois eles estão, por exemplo, sendo enviados em segundo plano para, por exemplo, um servidor e esse servidor não responderá a tempo. Por exemplo, ele vai responder em 3 segundos. Ou, por exemplo, quando temos um botão aqui. Observe que temos um botão que define o ouro, certo? Mas também temos um segundo botão que faz o mesmo. Isso apenas diminui a quantidade de ouro que temos quando podemos fazer um upgrade, certo? Mas observe também que, no futuro, teremos algo em que clicaremos automaticamente, então ele atualizará o estado dourado ao mesmo tempo em que pudermos, é claro, apertar esse botão aqui, certo? E, para ser sincero, isso pode causar alguns problemas como o quê? O problema será o mais fácil de mostrar quando fizermos algo assim. Observe que estamos invocando aqui o quê? Defina a função gold, que é atualizar o estado do ouro enviando para lá o estado atual do ouro. Então, em nossa situação, por padrão, é zero estado inicial, certo? E então ele envia para ele um. Então, sim, temos um aqui. Ok. Então, o que acontecerá se o invocarmos novamente? Você acha que vai ser tipo, Ei, eu nos mostrei aqui? Hum, então, para ser sincero, quando eu clicar uma vez agora, vou receber gratuitamente aqui ou um? Opa. Você ainda está adicionando apenas um. Atualizamos nossa página? Sim, nós fizemos. Ok, então qual é o problema? O problema é que normalmente, se estivéssemos atualizando valores usando aqui, por exemplo, documento, pegue o limão, compre o ID e depois acesse o ID do limão e depois atualize para ouro mais potência, certo? E então atualizamos o ouro, certo? Valor. Então, funcionaria assim, se tivéssemos invocado isso três vezes, certo, então estaríamos aqui livres Mas agora o problema é que estamos enviando para cá o estado atual do ouro. Então, o estado atual quando estou analisando esse componente, é o que? É zero, certo? E, novamente, estou enviando o estado atual. Então é zero. E, novamente, estou enviando o estado atual, que é zero. Mas você pode estar se perguntando por que o estado. Então, os valores aqui não são atualizados entre cada uma dessas funções, certo? Por que não gosto, Ok, então eu vou atualizar o estado e, novamente, vou atualizar o estado e, novamente, atualizar o estado. Por que o react não atualiza o estado instantaneamente. Socion após cada função, por que esse local não é atualizado Essa é uma pergunta muito, muito boa. Em primeiro lugar, seria imaginar que você teria, tipo, não. 500 atualizações como essa. Então, se você tivesse clicado em Min Gold, você teria zero, certo? Seria impossível alterar esse valor e mostrar ao usuário 500 vezes a alteração 0-500, certo Isso também tornaria seu aplicativo muito lento, certo? É por isso que, quando você invoca uma função como essa que funciona no estado, o react leva em consideração o que você enviou aqui Então você envia zero mais um, certo? E ele vai colocá-lo em Q. Então, ele vai esperar pela ação de renderização do estado Mas como invocamos isso depois, novamente, e ainda não invocamos a renderização, estamos novamente atualizando o estado dourado para zero mais um, que é um E, novamente, fazemos zero mais um, que é um. Então, para ser sincero, quando o lote está pronto, quando chega a hora da renderização, como resultado, obtemos o que, infelizmente, é apenas um, certo? Ok, então como resolver um problema como esse? Para resolvê-lo, você precisa enviar ouro para o conjunto. Então, a função que está ligada ao ouro, certo, o que deve ser feito com ouro, ok? Mas com a função , porque se você enviar uma função para lá , tudo isso mudará uma após a outra. E quando ele vai decidir, você sabe, atualizar o estado, ele precisa aplicar todas as mudanças primeiro, ok? Ou eles precisam ser jogados um após o outro. Eles precisam seguir esse padrão. É assim que isso vai acontecer. Então, como fazemos isso? Nós temos algo, o que é chamado de funções de seta, certo? Então, poderíamos fazer algo assim. Vamos enviar aqui para devolver energia plástica. Mas acho que cometi um erro ao usar muitos parênteses Ok, então a função que estamos enviando é realmente essa, ok? Acho que isso é um pouco mais visível onde estão os parênteses ou Então esse é o conteúdo, e é muito importante agora notar que podemos chamar aqui do que quisermos. Então, por exemplo, algo assim, precisamos inventar nossa própria variável E porque estamos inventando isso, precisamos enviá-lo como argumento, certo? Poderíamos criar uma variável local que chamaremos assim. E lembre-se, não usamos esse valor aqui em nenhum lugar, certo? Não é usado nesse contexto, certo? Mas, para ser sincero, essa variável está aqui apenas para mostrar o que deve ser feito com o valor vinculado a essa desconexão para definir como bom Porque quando eu envio isso, ok, para definir a função ouro, então tudo o que fizermos aqui neste lugar, somente neste lugar, é o que estamos procurando vai acontecer com o ouro. Então é como, Ok, ouro do estado dourado anterior, por favor, adicione ClickPower a ele, Então essa variável será substituída por essa mais tarde, ok? Eu sei que é confuso, mas é assim que funciona Esse nome está aqui só para nós. Está bem? Podemos chamá-lo do que quisermos, e vai funcionar, de verdade. Então, quando repetimos isso agora três vezes, certo? Um, dois, três, certo? Chamamos isso do que quisermos. Isso pode ver agora que aplicamos três vezes a frio, ok? Então isso pode ser chamado do que quisermos, ok? Mas as pessoas o chamam na maioria das vezes, do mesmo nome que aqui. Mas lembre-se, isso é como uma variável local para isso, e a verdade é que ela será substituída pela anterior pelo ouro na função ouro definida, certo? Então as pessoas chamam isso às vezes de ouro, certo? E também vai funcionar, não se preocupe. Claro, precisamos repetir isso três vezes. Mas para mostrar que não é o mesmo valor, maioria das pessoas simplesmente faz algo assim. Então, eles digitam uma prova que emite do valor anterior do ouro mais a potência crítica E também, para encurtar, porque agora você pode pensar: Oh, meu Deus, eu não vou escrever muitas coisas. Você também pode fazer com que as setas funcionem dessa forma. Portanto, você não precisa usar parênteses em um argumento se houver pelo menos um argumento, como você pode ver, e também pode excluir colchetes se estiver retornando estiver Então agora, sim, é mais curto, certo? E agora só precisamos fazer algo assim, certo? Então, porque estamos trabalhando no estado anterior do ouro e queremos ter certeza de que, a cada poço, queremos ter certeza que todas essas coisas serão executadas antes da renderização, certo? Precisamos usar a função atualizada, ok? Caso contrário, simplesmente não vai funcionar. Então, quando estamos analisando uma solução como essa, você pode estar se perguntando : Ah, isso é muito difícil. Não entendo como isso funciona em segundo plano. Para ser honesto, Ra, isso não é mais para mim. Mas vou mostrar como usar isso, mesmo que você não entenda como funciona em segundo plano. Então, se você precisa mudar, por exemplo, imagine que você chegou aqui, por exemplo, a um estado que muda como equipe do escuro para o claro, certo? Então você muda o estado de um para outro, então você não está trabalhando nos valores anteriores, certo? Então você não usa funções atualizadas, ok, assim. No entanto, se você estiver trabalhando com valores, que estão trabalhando na direita anterior nos valores anteriores que foram usados em algum lugar do aplicativo, é uma boa ideia evitar erros ao usar funções atualizadas pois eles podem acontecer. Eles não precisam, certo? Mas eles podem, e você quer ter certeza de que seu aplicativo está funcionando sempre corretamente. Então, sempre que algo assim acontece, você quer usar funções atualizadas E há mais uma coisa que eu quero te mostrar agora que vai te ajudar ainda mais. Então, para ser honesto, pense na função atualizada como esta. Esqueça o que está por trás da seta, e aqui está o que realmente deveria acontecer Para ser honesto, você pode pensar assim Ok, então, quando escrevo dessa maneira, não tenho a garantia de que sempre funcione corretamente quando estou atualizando o estado do meu aplicativo. No entanto, isso garante que tudo funcione bem. Então, isso é tudo. Sim, isso é tudo. Ok, então aqui, para ser honesto, precisamos fazer apenas algo assim, certo? Sim, isso é verdade. E aqui precisamos fazer apenas algo assim. Sim, isso é verdade. E aqui só precisamos fazer algo assim. Então, aqui está o que deve ser feito com o estado, mas garantimos que seja sempre uma situação difícil, mesmo que haja muitas mudanças ao mesmo tempo, isso só nos dá uma garantia, certo? E isso é tudo que você precisa entender sobre as funções de atualização. Isso também é uma boa ideia. Observe que eu digito suas prévias. Você pode digitar aqui, você sabe, o mesmo nome que aqui, mas isso mostra que bem, que isso não é como a convenção, ok? A convenção é que você sempre o chame com o afixo assim, ok? Então, você adiciona visualizações antes para mostrar que é como criar aqui uma variável local, certo? Mas vai funcionar se você digitar aqui também em ouro, certo? Mas aqui você mostra para outras pessoas, e esta é uma convenção de que você está usando as funções de atualização Todo mundo sabe que agora você está trabalhando nos valores anteriores. E ao fazer algo como aqui, você está se certificando de que todas essas coisas mudarão adequadamente, mesmo que haja centenas de mudanças nos bastidores ao mesmo tempo. E isso fará com que nosso aplicativo funcione corretamente quando fizermos cliques automáticos, por exemplo, no futuro, Mas também fará com que funcione corretamente. Se tivéssemos, por exemplo, alguns dados de busca no servidor, isso garantiria que as alterações fossem feitas nos valores anteriores, não nas coisas que são mostradas aqui quando a alteração está acontecendo 94. [exercício] GUI do Auto Clicker e ganchos: Olá, meu amigo. Hoje, vamos criar um padrão que permitirá que você compre clickers automáticos e mostre quantos clickers automáticos estão disponíveis e também conecte o estado, então conecte todos esses valores aos ganchos então conecte todos esses valores aos Então, acho que você deveria ser capaz de fazer isso sozinho. Portanto, tente praticar sozinho. Eu vou te mostrar como fazer isso de qualquer maneira, mas é uma boa ideia parar a palestra, tentar fazer isso de sua própria parte onde você vai executá-la, certo, como fazer o clique automático Por enquanto, é um adiantamento pago, e vou mostrar como fazer isso na próxima palestra. Então, do que precisamos? Em primeiro lugar, precisamos configurar, por exemplo, quantos clickers automáticos temos, certo Então, cliques automáticos e a quantidade de cliques automáticos, certo? Então, aqui precisamos digitar algo como clickers automáticos, por exemplo, certo E precisamos configurá-lo. Então, vamos esperar pela nossa super IA, ela vai simplesmente conectar isso a isso, e estamos prontos para criar um botão. Então, digamos que queremos criar um botão, e vamos ver se isso vai nos ajudar desta vez com um clique, e precisamos configurar aqui, como você pode ver, sim, é isso que queríamos. Você quer ter configurado o autoclicker porque queremos ter mais um e o custo do Mas quando compramos o Auto Clicker, precisamos fazer um pouco mais de coisas, certo Então, podemos aceitar isso por enquanto. E primeiro, precisamos configurar aqui o custo do clique automático, então os clickers automáticos custam, certo, algo parecido E eu proponho criar o gancho, certo? Então, algo parecido. E digamos que, no início, o custo do clique automático seja definido para 20 E aqui eu proponho colocá-lo em outra função, certo? Então, vamos chamá-lo, por exemplo, comprar auto clicker, certo, porque vamos comprar Autocliker Não está funcionando no momento porque não configuramos a função à qual estamos nos referindo. Então, proponho configurá-lo, como você pode ver. É uma boa ideia termos IA que nos ajudará um pouco. Então, se temos ouro suficiente, então, como você pode ver, o bom é que, porque anteriormente usamos o quê? Ouro anterior, poderes de clique anteriores usamos as funções de atualização, eu também as uso aqui, e é uma boa ideia usar as funções de atualização quando estamos trabalhando nos valores que foram acessados anteriormente, certo? É uma boa ideia fazer isso caso seu programa aumente, talvez isso evite erros. Então, eu prefiro fazer isso sempre dessa maneira. Então, digamos que verifique se tudo foi feito corretamente. Então, sim. Lembre-se, não olhamos para essa parte, estamos olhando para essa parte. Então, sim, custou alguma coisa, ok? Aumentamos a quantidade de cliques automáticos. Isso é ótimo. E também aumentamos o preço dos clickers automáticos Pi two. Ok, isso é o suficiente, eu acho. E vamos ver se funciona. Então eu estou minerando alguma coisa, e quando eu chegar a 20, eu posso comprar um autoclaker, certo E o custo também aumentou aqui. Então está funcionando bem. Posso comprar o Auto Clicker quando não tenho dinheiro suficiente. Eu posso roubar o meu, certo? E quando eu chegar aos 40. Então, este é o jogo, eu quero ter dois cliques automáticos e eles devem fazer um efeito Portanto, eles devem clicar para nós, para que não precisemos fazer isso manualmente. E isso que vamos fazer na próxima palestra. Tenha um bom dia. 95. useEffect em exemplo prático: AutoClicker: Olá, meu amigo. Hoje vamos implementar clickers automáticos Então, quando alguém o compra, ele clica para nós , extrai ouro Como fazemos essas coisas? Bem, precisamos pensar sobre o que precisamos detectar primeiro. Precisamos detectar de alguma forma quando a quantidade de cliques automáticos mudará , porque esse é o momento que queremos começar a clicar automaticamente, Ou, bem, observe que poderíamos começar com, por exemplo, clickers automáticos gratuitos, E então, quando nosso componente for inicializado, ele também deverá iniciar o clique automático Portanto, precisamos de alguma forma ter uma ferramenta que inicie o clique automático quando nosso componente for carregado ou quando o clique automático for alterado. E essa ferramenta é chamada de efeito de uso. Então é isso. E como você pode ver, temos uma sugestão aqui e vamos usá-la porque use effect toma como primeiro argumento o que deve ser feito, mas não isso, o que deve ser feito usando a função, ok? E precisamos observar aqui o efeito de uso da importação. Caso contrário, não vai funcionar. Então, agora que temos o efeito de uso, o que podemos fazer? Podemos digitar o que deve acontecer quando os cliques automáticos mudam. Mas como podemos detectá-lo? Precisamos enviar isso como um segundo argumento o que queremos ver, observar. Então, estamos observando a mudança nos clickers automáticos agora. E quando a mudança acontece, podemos registrá-la. A mudança acontece mais ou menos assim. Agora, quando vamos ao nosso projeto e eu abro o console, percebo que temos algo parecido. Duas vezes a mudança acontece. Mas eu te disse que, bem, efeito de uso só é invocado quando a autótica é alterada E a mudança aconteceu uma vez aqui quando o estado foi inicializado Então, por que duas vezes? Essa é uma pergunta muito boa. Porque quando vamos aqui, temos algo que é chamado de modo estrito. E quando eu remover o modo estrito, você notará que a mudança agora acontecerá quantas vezes, uma vez. Porque quando você está usando o modo estrito, cada componente será montado duas vezes, por precaução. E bem, isso pode levar a algum problema em potencial quando você não sabe por que coisas assim aconteceram aqui, certo? Porque se você tivesse invocado aqui algo que mudaria o estado de algo, você ficaria um pouco surpreso, certo? Então lembre-se que o modo estrito faz algo assim, ok? Claro, lembre-se de que esse não é o lugar para definir o valor de algo no início, por exemplo, tipo, vamos mudar o estado do ouro, certo? Este não é o lugar para fazer isso diretamente. A unidade está aqui, certo? Estamos iniciando o valor com zero aqui. Talvez vamos configurá-lo para 100. Isso nos permitirá lidar com o jogo mais rápido. Então, o que podemos fazer aqui? Podemos, por exemplo, começar a clicar automaticamente, mas como começar? Para iniciá-lo, proponho usar a função, que é chamada de intervalo definido. Lembro que essa função funciona assim. A função que envia o primeiro argumento para definir infernal será invocada No momento em que definimos aqui, então 1.000 é 1 segundo. OK. Então, o que quer que esteja aqui, vai acontecer a cada segundo. E o que queremos fazer? Queremos fixar ouro, certo? Queremos mudar isso quase aqui. Queremos o quê? Configure para a quantidade anterior de ouro, mas queremos adicionar aqui a quantidade de cliques automáticos que temos, certo Não queremos usar o poder do clique. Então lembre-se, nós não bebemos essa parte, certo? Estamos pensando: Ok, então preciso definir a demanda anterior de ouro porque quero ter a mesma quantidade que tenho agora e quero adicionar a ela a quantidade de clickers automáticos que temos, E como você pode ver, quando executamos nosso programa, bem, ele está funcionando porque agora é gratuito, multiplicado por dois, que é seis, e o ouro está sendo aumentado em seis a cada vez OK. Mas, bem, temos um problema porque o modo estrito fez nosso programa funcionar mal. Mas, de qualquer forma, esse problema nem seria nada, porque quando eu clico nele repetidamente, percebo que agora temos, tipo, clickers automáticos gratuitos com valores diferentes, e eles estão funcionando ao mesmo tempo E não é isso que queremos, certo? E o recurso mais legal do efeito de uso é o quê? É que quando você volta aqui, uma função, como você pode ver, temos uma sugestão aqui. Quando retornamos aqui, uma função, essa função é chamada de função de limpeza sempre E agora, como você pode ver, está funcionando da mesma forma, certo? Mas está funcionando da mesma forma porque não enviamos para limpar o intervalo, que é uma função que usa como argumento que tipo de intervalo eu quero limpar? Ah, então eu preciso criar aqui uma variável que vai ser enviada para essa função, certo? E agora, quando eu abro, Oh , está funcionando bem porque começamos do zero, certo? Como isso funcionou? Funciona assim. Então, na primeira vez que instalarmos nosso componente, o efeito de uso será invocado Vamos criar um intervalo e retornar o que deve acontecer quando o efeito de uso for invocado novamente. Então, como fizemos isso duas vezes seguidas, quando o efeito de uso for invocado novamente, você está limpando O cronômetro da corrida anterior, certo? E por causa disso, temos um novo intervalo que também tem uma função para perfurar para depois, certo? Mas agora temos um intervalo de execução e ele será executado até fecharmos o aplicativo ou até que a alteração aconteça com os clickers automáticos Quando a mudança acontece nas caldeiras de automóveis, vamos ver, quando as compramos, aqui mesmo. Então esse é o momento. Então, quando eu comprar outro autoclaker, o que vai acontecer? Lembre-se, novamente, em primeiro lugar, antes de fazer isso, a função de limpeza será executada a partir do efeito de uso anterior Então, vamos remover o clicker automático que está clicando com o valor de E então vamos configurar um novo clicker automático com o valor de quatro, certo Então, quando eu tinha, como você pode ver, agora aumentamos em quatro. Agora aumente em cinco e também eliminaremos o efeito anterior Então, o nome disso é bem legal, certo, porque é como efeito de uso. Então, crie algum tipo de efeito. E se executarmos isso novamente por causa do gatilho que está aqui, vou limpar o efeito anterior. Para que eu possa executar outro. Tão poderoso. Eu sei que a sintaxe aqui quando você está vendo isso é um pouco complexa Mas lembre-se de que você tem um dium que preencherá automaticamente maioria das coisas, certo? Você, como programador, neste momento, muitos precisam entender o que é correto no processo Você precisa saber que é uma boa ideia usar o efeito em casos como esse, certo? Você é como uma pessoa que vai criar o aplicativo. Eu realmente adoro que o react tenha se tornado muito fácil de usar quando algo como o preenchimento automático a partir da codificação entrou online porque, para ser sincero lembrando de tudo isso, você sabe, aqui está a faixa de crédito para onde você envia aqui, preciso lembrar que preciso enviar Não estou invocando uma função, certo? Lembre-se, é como se eu estivesse enviando uma função para ser invocada. Isso é muito diferente. É bom ter um preenchimento automático como esse que nos ajuda. Precisamos editar de alguma forma algo como aqui, por exemplo, porque queríamos aumentar a maldição do autoclq e não Mas ei, essa foi uma boa sugestão. Talvez você quisesse fazer dessa maneira. Novamente, use o efeito, se você não entende que nem mesmo nada dos bastidores é usado para quê? Você coloca na função o que deve ser feito no início da unidade do componente. Então, como segundo argumento, dizemos: o que deve desencadear esse efeito além da inicialização, certo? E aqui, como retorno, dizemos o que deve ser feito quando invocamos o mesmo efeito de uso novamente. Assim, podemos limpar, por exemplo, o estado anterior. Então, tão poderoso, pense em uma linha. Imagine quantas coisas você precisaria fazer para conseguir a mesma coisa usando apenas o Vandia Javascript. Quantas coisas você precisaria pensar sobre o que observar ou detectar, certo? Poderoso. 96. DisabledDesabilitando condicionalmente um botão no React usando o atributo 'disabled' ": Olá, meu amigo. Podemos atualizar o Click Power quando tivermos dinheiro. Quando não o fazemos, bem, não podemos, mas ainda podemos clicar nele. Acho que devemos alterar o atributo desativado do botão para desativado. Então, devemos fazer com que sejam dois, certo? Caso contrário, isso não parece bom, certo? O usuário pode perguntar: por que eu posso fazer isso. OK. Então, como fazemos isso? Bem, precisamos acessar desativados aqui, mas o problema é, como verificamos a condição aqui, certo? O legal é que sim, a primeira coisa que obteremos é a sugestão da IA, e podemos simplesmente inserir o JavaScript e verificar a condição, certo? Se tivermos ouro inferior ao custo de energia de atualização, desative-o. O que quer que seja devolvido aqui, certo? Então, se for falso, certo, então, bem, ele será alterado pelo react para desativado. Se for verdade, será alterado para remover o objeto desativado, atribua-o. Então, em situações como esta, também precisamos nos aquecer por causa da IA, certo? E agora, como você pode ver, quando não temos dinheiro suficiente, aquele para o qual temos dinheiro, podemos comprar. Isso é muito legal Mas é uma boa ideia saber o que acontece em segundo plano, porque algumas pessoas sabem que é deficiente, certo? Funciona e é igual a desativado. Sim, isso é muito estranho, mas é assim que esse atributo funciona Mas leve em consideração que estamos usando o que JZX e tudo o que está aqui vai ser transformado em qual reação, crie um limão usando babel, crie um limão usando babel E reaja, crie um limão quando ficar tão falso que, tipo, remova o atributo desativado Mas se ele passar, adicione criar um elemento, dirá desativado para desativado. É assim que funciona em segundo plano nesta função. Talvez não seja interessante para você, mas eu rio sempre quando entendemos por que algo funciona assim, certo? O legal do Cudium que instalamos aqui, certo? É quando você está pulando entre vários idiomas, como eu, por exemplo, e eu fico tipo Como devo fazer isso? Ok, foi assim que aconteceu. Então, isso é muito legal, como você pode ver, react também é muito legal porque, bem, ele reage ao estado do nosso aplicativo ao estado inteiro de todos os valores que são observados Agora não precisamos pensar como: Ei, então se eu desativar o botão, também preciso removê-lo quando tivermos dinheiro suficiente. Preciso então acessar um elemento específico quando tivermos esse dinheiro, e preciso repeti-lo para este botão para esse botão, blá, blá, blá Isso leva muito tempo, pensar e seguir tantas variáveis, mesmo em aplicativos pequenos como esse. Mas quanto maior o aplicativo, mais fria fica a reação, certo? Eu sei que houve algumas, você sabe, você teve que trabalhar um pouco para entender algumas coisas aqui. Mas depois de entendê-los, isso acelerará seu aplicativo de desenvolvimento web. Tenha um bom dia. 97. Instalando lucide-react — vamos aplicar ícones ao nosso jogo: Olá, meu amigo de hoje, vou te mostrar como instalar o Lucid. O que é isso? Lucid é apenas um pacote para reagir ou não apenas reagir, você pode usar visualizações sentidas e assim por diante Isso tem muitos ícones. É para o node JS, então significa que você pode usá-lo e instalar usando o gerenciador de pacotes para o Node JS, certo? Como fazemos isso? Bem, por exemplo, quando vamos lá, estamos usando o Rag, certo? Como você pode ver, diz que precisamos digitar NPM install used react, só isso E agora podemos usar qualquer ícone daqui. E esses ícones são incríveis. Eu vou te dizer agora em breve o porquê. Mas para instalar, NPM, e eu não vou digitar Install Vou digitar apenas I, então vou te mostrar um atalho para que você não perca seu tempo E o bumble, vamos esperar. Então, depois de instalado, certo, tudo que você precisa é ir até aqui e digitar algo como importar, então você precisa digitar colchetes, não E tudo o que você precisa fazer é digitar o ícone que deseja. Então, quando vamos para a página principal, por exemplo, eu quero moedas. Olha, eu achei moedas, isso é muito legal. E se eu quiser usá-los, preciso digitar aqui quais moedas, certo? E basta importá-los do Not at feather. Mas por que não funcionou, talvez porque M seja porque ele ainda não estava instalado quando eu estava escrevendo. Então, eu o importei, mas não o usei. Agora, aqui você pode ver como usá-lo. Então, tudo que você precisa fazer é ir aqui e fazer algo assim. Ok, eu preciso de um ícone aqui, e também preciso de um ícone ao lado da mina dourada, certo? Isso é legal. Então, eu também preciso do Pix. Então, vamos ao topo. Vamos ao site principal, e digamos que eu queira escolher x. Ah, então eu quero esse cara. O que eu preciso fazer? Preciso ir aqui, laptop, digitar Pi. E, como você pode ver , o bom é que eu tenho até quais sugestões. E agora, se eu quiser ter o PAX aqui, o que eu preciso fazer? Abra isso e digite Pax. Ok, então agora vamos repetir isso em nosso botão, certo? E bem, talvez vamos ver como funciona porque ainda não vimos. Olha, nós temos ícones. Isso é legal, certo? Usar isso é muito simples. E o legal é que o Vt, no final das contas, vai otimizar tudo Você só precisa se importar com o que está acontecendo aqui. Basta usá-los. E o que é ainda mais legal é que, quando você começa a usá-los e porque os nomes são muito autodescritivos, eu posso simplesmente Ok, eu quero CPU para autocliker. E tudo que eu preciso fazer agora é ir aqui, certo, abrir isso e digitar CPUs Por aqui, certo? E eu tenho CPU agora, e eu também uso CPU aqui. E agora, isso não é muito bom agora porque, bem, eles não são do tamanho do seu, por exemplo, tamanho da fonte, certo? Então, vamos mudar isso no futuro. Eu vou te mostrar como aplicar usando valores CSS a ele, ok. Mas antes disso, observe que temos um guia aqui. Este guia, quando você vai ao menu e vai para o dimensionamento, diz que você pode alterar o tamanho usando algo como adereços, certo Então eu posso fazer algo assim e mudar esse tamanho, só para ver, por exemplo, 42, dois, e como você pode ver, é maior, certo? E quando você tem um ícone, dois ícones ou talvez seja uma boa ideia também se você não se importa, mas o problema é que podemos alterar posteriormente, por exemplo, o tamanho de nossos telefones. Isso pode parecer bom. Então eu acho que você deve sempre aplicar coisas assim para torná-lo dinâmico, como você pode ver. E diz que você pode usar EMs para isso. Por quê? É porque todas essas coisas aqui são realmente SFU Gs, certo? Portanto, são gráficos vetoriais escaláveis. E isso significa que, bem, você pode ver que eu posso até mesmo mudar a cor. Isso é muito legal. Olha, eu posso fazer algo assim. Cor, certo? E sim, eu posso digitar verde. Por exemplo, e quando eu voltar aqui, oh, lágrima. Lágrima? É verde. Isso soa bem, certo? Que você pode fazer todas essas coisas daqui. Mas lembre-se de que você também pode aplicar apenas classes a isso. E como você sabe que é o Spa Gee, certo, você pode aplicar como sts neste componente, pois serão SPAGes posteriores. Mostrarei como fazer isso na próxima 98. Como aplicar CSS ao componente - className: Olá, meu amigo. Então, como aplicamos CSS aos nossos componentes HTML tax? Bem, em primeiro lugar, não vamos fazer isso aqui a partir do CSS porque esse CSS deve afetar o quê? Tudo no seu site, certo? Devemos ter um componente CSS. Então, quando eu criar aqui pi, vou chamá-lo da mesma forma de código menor e CSS. Também tem maiúsculas , apenas sugere que, se eu quiser editar o código, estou aqui. Se eu quiser editar CSS, estou aqui. Você pode ficar tipo, agora, Oh meu Deus, isso vai ser lento, vai ter 30 componentes e depois teremos 30 CSS sendo carregados mais tarde. Acho que será otimizado e colocado em um único CSS posteriormente. Também para JavaScript. É porque o Vt, no final das contas, quando publicarmos nosso aplicativo, ele simplesmente mudará otimizará tudo. Você simplesmente não precisa se preocupar com. Então, sim, isso é melhor para você porque agora você não tem um CSS muito grande onde tudo está próximo um do outro e depois você simplesmente não se lembra de colocar o quê? Um caos completo, pelo menos foi para mim. E aqui você só precisa importá-lo assim, e eu posso usar meu CSS. E agora, lembre-se que esse curso é o quê? Não se trata de CSS. Vou colocar CSS aqui e vou te dizer agora como usá-lo aqui porque isso é um pouco diferente, então não feche o vídeo. Note que temos aqui classes, Gt kicker, estatísticas e botões, E agora precisamos aplicá-las aqui, certo? Mas como fazemos isso? Bem, a primeira seção é chamada Cold Clicker. Então, acho que devemos aplicar em todo o nosso aplicativo, como você pode ver. E observe que, bem, eu adoro codim porque diz que eu deveria usar o nome da classe aqui em vez do quê? Classe. Quando eu faço isso dessa maneira e quando vou ao nosso aplicativo, você pode ver que algo não está funcionando. Quando eu uso o nome da classe, vai funcionar. Bem, não mudamos marca porque mudamos apenas o tamanho do telefone, então não vimos. Veja aqui com base no tamanho do telefone, basta mudar. Mas você precisa usar o nome da classe em vez da classe porque a classe é uma pesquisa de palavras-chave para Javascript. Lembre-se de que você está escrevendo aqui no JA six e posterior Se estivesse traduzindo para react e visse uma classe, pensaria que é uma classe em JavaScript. Note que não é como algo que é um atributo do HTML, certo? É por isso que eles inventaram que o nome da classe é realmente um atributo. E, como você pode ver agora, precisamos aplicar o quê. Também aqui, vamos fazer algo assim. Então, vamos criar um div e aplicar como estatísticas de nome. E agora também precisamos aplicá-lo para quê? Para nossos botões. Então, vamos fazer algo assim. E agora todos eles parecem muito bons. Eles são sempre do mesmo tamanho e um, blá, blá, blá. Mas o mais importante é que como esses são SPO Gs, podemos dizer: Ei, eu quero ter esses ícones um pouco maiores, 1,5, 1,5, certo? OK. Quer saber, eu quero ter também uma cor, que vai ser, por exemplo, vermelha, eles vão ser vermelhos. Então, se você quiser agora aplicar CSS ao seu componente. Você acabou de pular aqui. Ok, eu vou mudar a aparência. E o legal também é notar isso antes quando tudo estava em um único CSS, né? Eu estava tipo, Onde eu editei o meu? Tipo, eu não sei, elemento que estava no local neste subside ou algo parecido Foi como uma loucura. Isso é para mim. Eu não sabia se você tinha criado aplicativos grandes, mas antigamente, isso era um caos total, ok. Agora, você fica tipo, Ok, eu estou trabalhando em uma mina de ouro. Acho que devo mudar alguma coisa em relação a esse padrão. Ok, então eu só estou pulando aqui. E, para ser sincero, essa é apenas uma das maneiras de aplicar CSS no react. A também é um vento de cauda, o que permite estilizar tudo alinhado Essa também é uma boa abordagem porque existem maneiras predeterminadas de fazer isso. Mas realmente depende de você o que você vai usar. Não é como se você tivesse que usar o vento de cauda. Você não precisa aprender. Dessa forma, também está muito bem, certo? Às vezes, não oferece muita flexibilidade, mas falaremos sobre isso mais tarde. No entanto, você pode aplicar, como um componente CSS como esse, e vai funcionar, ok? Se você tiver alguma dúvida, como sempre, fique à vontade para perguntar. 99. Instalando Frame Motion no React — vamos trazer animação para o nosso projeto!: Olá, hoje vamos instalar o Framer motion, que é uma biblioteca de movimentos de código aberto para react feita pelo Framer, e isso permite que você crie animações instantaneamente, basta anexar o movimento antes do nome da tag e digitar que tipo de propriedade deve propriedade Isso também é super legal porque, bem, eu sei que você pode usar CSS para animar, certo? Mas usar CSS para animar e também animar quando o estado está mudando é um pouco difícil, ok Você precisaria, por exemplo, fazer as alterações usando, por exemplo, o efeito de uso e, em seguida, aplicar as alterações de CSS quando a alteração acontecesse em efeito de uso. Isso é difícil de usar. Além disso, essa biblioteca é muito, muito legal porque, bem, há tantas animações legais que fazer manualmente seria muito difícil Você pode usá-los instantaneamente. Além disso, eu recomendo a exp, Biblioteca, se você estiver interessado em saber se existem outras. Então, como instalamos NPM, I e Framer Motion. Está bem? Então, basta digitar isso e esperar um segundo, e o Framer Motion será instalado Como o importamos? Então aqui, como você pode ver, diz que precisamos apenas importar algo assim no topo da nossa página, certo? Então, vamos importá-lo, e agora podemos trabalhar com ele, mas vamos fazer isso na próxima aula 100. Vamos adicionar uma animação simples usando Frame Motion ao nosso aplicativo: Olá, meu amigo. Então, como usamos o movimento? Bem, podemos aplicá-la a um ataque, certo? Então, se eu quiser aplicá-lo ao parágrafo inteiro, por que não? Não. Eu só preciso digitar isso e acabei de aplicá-lo. Mas o problema é que eu não disse o que deveria ser animado. Então, bem, eu tenho sugestões. Precisamos começar com estado inicial e o que queremos animar. E por que isso é importante? Não é isso que, se não definirmos o estado inicial, certo? fizermos algo assim, o que você tem para animar Nada porque, bem, a opacidade no início é uma. Então, a animação acontece em movimento quando opacidade é menor que um, certo E quando eu disse que o estado inicial é zero, quando nossa página é carregada , quando eu atualizo a página, como você pode ver, ela muda, e é exatamente isso que queríamos Mas também queríamos que quando misturássemos ou atualizássemos o Click Power ou o clique automático, você também quisesse fazer essa animação porque queremos que isso aconteça porque o ouro está mudando, certo quisesse fazer essa animação porque queremos que isso aconteça porque o ouro está mudando, Mas como podemos ver o estado aqui a partir do ouro? Para fazer isso, tudo o que você precisa fazer é digitar aqui a chave e depois digitar aqui o nome do estado que você deseja observar. No nosso caso, é dourado, como você pode ver, a animação funciona bem. Muito divertido, não é? Então, se eu quiser repetir isso para outros caras, tudo que eu preciso fazer é anexar o movimento a todos eles, certo? Mas acho que não devemos aplicá-lo a tudo aqui. Devemos aplicar apenas ao valor aqui. Mas se você quiser aplicar o movimento, precisamos ter algum tipo de etiqueta, certo? Então, proponho fazer girar, que é apenas algo neutro, e ligado a ele, movimento Então, movimento, isso é girado. Aqui vamos removê-lo, certo, e vamos aplicar isso aqui, certo? Dessa forma. Ok. Então, talvez vamos fazer isso aqui, assim e talvez vamos fazer assim para que possamos ver claramente o que está acontecendo, certo? Então, acho que está melhor agora. Algo parecido. Sim, eu adoro isso. Então, agora o que precisamos fazer é ir também. Clique em Power. Tudo bem E basta substituí-lo. Mas se formos substituí-lo, também precisamos substituí-lo aqui. Clique em Power, clique em Power, bum, e também se você quiser aplicá-lo ao clicker automático, precisamos fazer Enter, talvez não Talvez aqui. Sim, sim. Vamos seguir a mesma regra. Então eu fiz isso dessa maneira. E agora vamos copiar isso aqui desse jeito, certo? Mamãe, ele aqui clickers automáticos. Clickers anti-automáticos, certo? E como você pode ver, agora é legal, porque a animação acontece em todos os estados quando esses estados são alterados, certo? Bem, a animação é muito simples agora, é claro. Você pode torná-lo melhor. Mas como melhorá-lo e também como torná-lo personalizável, porque agora, se decidirmos mudar alguma coisa, por exemplo, aqui, também precisamos mudar aqui e depois aqui, isso não é uma boa solução, certo? Mas sempre comece com algo simples e vá para algo um pouco mais difícil. 101. ...animationProps - vamos usar a desestruturação de objetos para melhorar o trabalho de animação: Nossa animação no momento é bem simples. Vamos melhorá-lo. Digamos que eu também queira fazer com que outro parâmetro seja alterado. Então, digamos que o valor inicial de Y seja, por exemplo, -20, como foi dito aqui, talvez menos dez Então você pode ver agora que o valor inicial é menos dez, mas não o alteramos usando animate, então precisamos alterá-lo de volta para, por exemplo, zero, Agora temos uma animação como se o valor estivesse vindo de cima para baixo. O problema que você provavelmente já pode ver é que agora preciso aplicar isso aqui e aqui. Não, não, não, não, não, não, eu não gosto nem um pouco dessa solução, certo? Então, como resolvemos isso? A maneira mais rápida de resolver isso. Se você não planeja reutilizar seu minicomponente porque ele é um minicomponente agora em outros lugares, quero dizer, todo o seu aplicativo, certo, é apenas criar um objeto aqui que armazenará todas as propriedades Então, propriedades animadas constantes, algo assim, certo? Agora, quando eu abro, eu quero ter dentro dela, ah, exatamente isso, isso e isso. E por causa dessa solução agora, posso aplicá-las aqui muito rapidamente. Mas a questão é, como eu gostaria copiar isso para este lugar? E para fazer isso, você precisa digitar. Vamos ver se a IA vai nos ajudar. Não dessa vez. Então, precisamos digitar, isso ajuda. Mas, como você pode ver, temos um erro. O erro está aqui porque se você quiser acessar qualquer coisa a partir do JavaScript, bem, precisamos inserir o JavaScript primeiro, esse é o caminho. Você pode estar se perguntando agora o que são esses pontos grátis aqui. Essa coisa é chamada de destrutorização. Isso significa que eu vou copiar isso para este lugar. Simplesmente dizendo, primeiro isso vai parecer melhor, certo, e a segunda coisa é que agora, o que podemos fazer? Podemos aplicar as alterações em todas elas de uma só vez. Então, se eu disser, Ei, eu quero ter todos os Y começando em 20, certo? E eu quero animar todos eles para zero. Então, como você pode ver, todos eles agora estão animados assim. Então, aplicá-la a cada Tag agora é simples, mas temos um problema. Que tipo de Vamos dizer que você é tipo, sabe o que? Os cliques automáticos devem ser diferentes. Eu quero, tipo, vir de cima para baixo. Operações. Então, como resolvemos isso agora? E o legal do HTML é que, quando você digita a primeira chave, temos a inicial depois a animação, certo? Temos todas as propriedades animadas aqui. Podemos substituir o que era antes. Está bem? Lembre-se de substituir o que era antes por escrever algo como inicial, certo? Iguais, e então você pode dizer: Você sabe o que? O estado inicial de Y será, por exemplo, -30, certo? E, bem, Color. Como você pode ver, estado inicial do clique automático agora é assim, mas temos outro problema Que tipo de problema o ARC sempre tem problemas. O problema é que a opacidade não é zero no início, certo Então, para ser honesto, somos como se substituíssemos todo o estado inicial, certo, apenas por esse valor. E o legal é que podemos dentro da nossa inicial, como neste lugar aqui, primeiramente, fazer a destrutorização, ok Então, tipo, Ei, eu quero atuar apenas como propriedades animadas e como estado inicial. E isso significa que estou digitando aqui como Opacity, zero Mas porque eu digitei novamente, o valor de Y para -30, esse valor de Y é como sobrescrever o que estava antes, certo E agora, como você pode ver, a opacidade também é aplicada ao autocl 102. pacote lodash.merge — como mesclar acessórios em um exemplo prático: Olá, meus amigos. Eles praticarão um pouco, mas também aprenderão uma coisa nova sobre um pacote muito interessante que nos permitirá mesclar propriedades como a que está aqui, instantaneamente E isso será muito, muito útil. Sony, vemos C Y. Então, eu quero substituir isso aqui por algo que será, digamos, um valor animado E quando digo valor, quero que essa coisa seja animada e também mostre o valor. Então, eu quero mostrar esse estado a partir daqui, certo? Então, meu componente como esse substituirá o trabalho que é feito aqui. Como fazemos essas coisas? Para facilitar isso, vamos colocar tudo em um arquivo só por um momento, ok? Então, vamos criar a função e vamos chamá-la de valor animado, certo? É assim que chamamos de componentes. E depois, a sugestão foi super legal porque precisamos, tipo, pegar o valor daqui, que é o estado, certo? Precisamos observar isso. Então, sim, isso é ótimo. Eu gosto disso. Depois, precisamos devolver alguma coisa, certo? Então, o que quer que seja devolvido aqui, é o que vai aparecer. Então, proponho simplificar por enquanto para ver se funciona, sempre depure instantaneamente, ok? Então, como você pode ver, a sugestão é bem legal porque agora, quando usamos valor animado, como você pode ver, a animação, claro, não está funcionando, certo? Mas, ei, o legal é que agora podemos mostrar o valor digitando nosso próprio tipo de componente aqui Acabamos de embrulhar o ouro dessa maneira, certo? E está girado internamente agora, o que também é movimento. Nem precisamos saber, certo, que a moção existe. E isso é legal. Então, agora precisamos animá-lo. Como podemos animá-lo Bem, eu proponho fazer isso dessa maneira. Mas há animações como zero, dez, dez. Vamos usá-lo para ver como funciona. Você pode ver que funciona assim. Então ele desce, depois para dez pixels de y e B. Essa também é uma maneira legal de animar, é por isso que eu não parei Mas vamos usar por um segundo essa constante a partir daqui. Vamos fazer isso por um segundo aqui. Vou usar apenas as propriedades animadas internas. Porque por que não? Assim. Certo? E como você pode ver, sim, a animação já foi feita, mas não estamos observando o valor agora, certo? Não estamos observando o ouro. Então, para observá-lo, certo? O que precisamos fazer? Precisamos definir a chave para o que valorizar, mas usando a sintaxe do JavaScript. Lembre-se, não. HTML. Agora, quando estamos minerando, a animação está funcionando bem, certo? Então, o legal é que agora podemos substituir todas essas coisas aqui com bastante facilidade. Tudo o que precisamos fazer é assim, mas não interrompa a palestra porque mostraremos problemas que eu quero resolver Então clique em Power Auto clickers. E agora, como você pode ver, sim, está funcionando para todos. E agora eu poderia fazer outra coisa bem fácil, certo? Mas esse é o comportamento padrão, certo? Hmm hmm hmm. se eu quiser ter algumas propriedades personalizadas? Como fazemos isso agora? OK. Então, se quisermos ter propriedades personalizadas, precisamos permiti-las, certo? Então, talvez digamos algo como, vamos criar outro cara, e vamos chamá-lo de propriedades animadas personalizadas, algo assim, certo? E, por padrão, eles estão configurados para nada. Então, vamos fazer algo assim. Mamãe. Então, se não enviarmos nada aqui, isso vai ficar assim, certo? Então, para ser honesto, vai ser tipo, ok, não enviamos nada, então a animação vai ser a mesma. Talvez vamos verificar como funciona. Então, agora precisamos fazer, ok, propriedades animadas, e digamos que temos propriedades personalizadas, certo? Propriedades de animação personalizadas. E agora vou enviar algo como: Ei, eu quero começar do -40 E para enviá-lo agora, quando estamos no valor animado, recebemos a sugestão de ppb Nós vamos conseguir porque eu não, está aqui. Propriedades animadas personalizadas. E sim, eu quero enviar propriedades animadas personalizadas. Eu não deveria chamá-lo da mesma forma, certo? Porque isso faz com que Mm hmm. Mamãe. Talvez aqui chamemos isso de adereços. Claro, isso vai funcionar, porque eles estão em escopos diferentes, mas eu simplesmente não queria chamá-los da mesma forma Mas vamos ver se funciona. Como você pode ver, quando você está minerando ouro, o ouro vem de cima e outras coisas vêm de baixo, certo? Então, sim, funciona corretamente agora. Mas temos outro problema. O problema é que tivemos que especificar a opacidade aqui, certo? Porque se você não especificar a opacidade, como, por exemplo, nos dois lugares, Você pode ver que essa coisa sempre tem a opacidade definida como um, e isso não é legal B Eu quero, tipo, obter todo o comportamento padrão, mas na mudança, por exemplo, como você pode ver, valor y, certo? Agora você pode alterar somente, por exemplo, a propriedade inicial e ela funcionará. Porque quando colocamos primeiro aqui as propriedades animadas, vai ser inicial, depois animar e depois vamos colocar o quê? Vamos colocar aqui, inicial. A inicial substituirá totalmente isso. Esse é o problema porque a opacidade será substituída Se você não quiser ter um comportamento como esse, seria muito difícil implementá-lo porque precisamos fazer o que fizemos antes. Precisaremos acessar as propriedades de animação personalizadas que inicializam, quero dizer, propriedades animadas, iniciais e, em seguida, enviar suas propriedades de animação personalizadas iniciais e fazer isso para todas as propriedades animadas da propriedade. Então imagine se você tivesse 100 deles, fazer isso manualmente seria estúpido, certo? Para dois deles, ok, talvez eu pudesse fazer isso, mas se eu adicionasse outra propriedade à animação, precisaria fazer isso aqui novamente. Então essa não é a maneira de fazer essas coisas, certo? E a solução para isso é instalar algo chamado dash Então, vou digitar NPM I dash. OK. E depois de instalar o Loda, ele fornecerá algo chamado Marge Me dê March, por favor. Por que do Deep March. Não do Beep Merge. Eu queria isso de Ludach Então, pelo que me lembro, era como uma mesclagem de dados com poucos traços Mas eu posso estar errado, quem sabe? Remover importação, não preciso remover a importação porque ela foi importada, mas nunca foi usada. Ok, então isso é apenas uma função que vem desse lugar, certo? E agora, eu posso fazer algo assim. Propriedades mescladas constantes, por exemplo, vamos chamá-las. E tudo o que precisamos fazer é mesclá-los assim, certo? E em vez de os dois aparecerem aqui, vamos fazer assim. Então, isso é apenas fusão, conexão. As propriedades padrão com aquela que enviamos para o valor animado. E vai fazer isso profundamente. O que significa que vai fazer isso profundamente? Que quando não fornecemos algo, como, por exemplo, não fornecemos localização de opa, Nós não fornecemos, você sabe, mas não precisávamos fornecer anime. Mas se houvesse muitos, muitos, muitos outros valores-chave, todos eles se fundiriam profundamente Agora você não precisa se preocupar com, sabe, se você tivesse outra propriedade aqui, por exemplo, o que precisa acontecer quando a saída acontecer e assim por diante, tudo será mesclado automaticamente Você não precisa se preocupar com nada. Acho que um código como esse também parecerá mais fácil de ler e usar. 103. Criando um componente funcional — vamos refatorar nosso código: Olá, meu amigo. Hoje, vamos tentar refatorar nosso código porque ele ficou um pouco grande Além disso, gostaria de observar que algo assim, valor animado, na verdade, poderia ser usado em diferentes lugares do seu aplicativo, certo, porque isso é algo universal, certo? Pode ser aplicado a qualquer componente real que tenha um valor que deva ser animado, certo? Com algum comportamento padrão, e o comportamento padrão pode até ser alterado. Então, como fazemos isso? Em primeiro lugar, precisamos criar um novo componente, certo? Então, novo arquivo, e vamos chamá-lo valor animado JS seis, JA seis. Mas observe uma coisa. Há um problema. Temos um componente que realmente é um componente que é como um componente funcional. Não é um componente que deveria estar mostrando alguma coisa. Na verdade, é algum tipo de função que funciona no estado dos valores. E é por isso que vou criar uma nova pasta que chamei de funcional, que só vai sugerir que esse componente é diferente. Ok. Então, os componentes básicos estão aqui, certo? Mas eles são responsáveis pela interface do usuário, certo? Mas o componente funcional será mais profundo. Dessa forma, quando você decidir, eu preciso usar um dos meus componentes funcionais, você achará fácil, certo? Oh, está aqui. Então é por isso que vamos fazer isso assim. E agora precisamos pegar isso, certo? Para este lugar. E também, bem, agora precisamos importar isso para aqui, certo? Porque sem essas importações , não vai funcionar. E o que também precisamos fazer, precisamos exportá-lo. E depois de exportá-lo, precisamos importá-lo também no local adequado Portanto, importe o valor animado do valor animado funcional. Agora, como você pode ver, funciona da mesma forma. Mas mudamos isso para outro lugar, certo? Então, agora, depois de terminar meu trabalho com animação, eu me esqueça disso. Estou apenas fechando esse arquivo. Mas se eu quiser editar alguma coisa, posso voltar a ela, certo? E essa é uma boa maneira de programar, certo? Agora podemos nos concentrar no projeto aqui, certo? E o mais legal disso é que agora, como eu disse, a pasta funcional, é que se eu quisesse ter valor animado em qualquer outro componente, basta importar isso e usá-lo E porque usamos o quê? Usamos sondas de animação personalizadas, certo? Implementamos algo assim. Podemos alterar a aparência dessa animação para o valor específico o valor específico, caso não gostemos do comportamento padrão. Essa é apenas a lição. Muito obrigado 104. pasta util com configurações de animations.jsx para o aplicativo inteiro: Olá, meu amigo. Criamos uma única animação e podemos gostar ou não. Mas digamos que pensamos: Sabe de uma coisa? Essa animação é muito legal. Eu quero reutilizá-lo, não apenas no componente de valor animado Quero usá-lo em todo o meu aplicativo. Então, colocar animação aqui nem sempre é uma boa ideia, certo? Porque mais tarde, você poderá descobrir que isso deve ser usado em qualquer lugar. Então, como podemos mudar isso? Ao acessar a pasta de origem, você pode criar uma nova pasta chamada Utils, como aqui Eu já o criei. Então, dentro dele, você pode criar um novo arquivo e chamá-lo, por exemplo, de Animations JSX E observe que eu não usei maiúsculas aqui porque isso é apenas uma É algum tipo de ferramenta que você pode reutilizar em seu aplicativo Portanto, essa pasta serve para coisas que deveriam ser usadas em qualquer componente que você quiser. Agora eu colo aqui algumas animações que eu criei para você, e o legal é que agora você pode reutilizá-las onde quiser, certo Então isso significa que agora, quando vamos ao nosso minerador de ouro, certo, e vamos, por exemplo, para o volume animado, podemos fazer algo como, Ei, vamos remover isso, certo? E vamos usar a animação daqui. Então, por exemplo, desaparecendo. Mas como fazemos isso? Precisamos primeiro importá-lo. Eu tenho um muito legal. Como você pode ver, aqui está algo como importação automática e caminho. E quando você instalá-lo, o que acontecerá? Quando você quiser importar algo. Então, por exemplo, digamos que eu queira importar isso, eu posso arrastar e soltar segurar a tecla Shift e fazer assim. Isso é muito legal. Eu realmente amo isso. Mas eu vou fazer algo divertido aqui. Farei algo como se eu quisesse importar todas as animações e fazer algo parecido com animações Isso significa que agora eu tenho objetos de animação que podem acessar todos eles. O que isso significa? Olha, olha, olha, olha. Isso é tão poderoso. Animações - papai, mamãe. Papai e papai são legais, certo? Eu posso, tipo, acessar todos eles daqui. Incrível. E o que isso significa? Isso significa que eu posso fazer algo como, por exemplo, digamos, o tipo de animação padrão, certo? Podemos criar outro adereço, e o suporte será definido como padrão, por exemplo, digamos, desaparecendo exemplo, digamos, desaparecendo Digamos que esse será o comportamento padrão. E agora eu posso fazer algo como a partir de animações, quero obter o tipo de animação quando estou mesclando, certo E isso é um aplicativo. Vamos ver. Quando vamos aqui, como você pode ver, as animações estão funcionando corretamente, então é bom Mas o bom é que eu fico tipo, sabe o que? Eu gostaria de usar uma animação diferente. Digamos que eu queira bombas para esse cara. Oh, ok, você pode ver, agora são bombas aqui. Aqui eu posso usar um diferente. Ainda posso usar adereços de animação personalizados, então tudo está funcionando bem Mas agora eu posso escolher uma das animações que eu predefini Mas esse não é o fim da nossa história para esta palestra. Então não pare. Olha, porque nós o temos em um arquivo externo e podemos usá-lo em qualquer lugar que quisermos. Observe que temos aqui animações como o homem universal, por exemplo, em escala ao passar o mouse Então, digamos que eu pense, sabe o que? Neste componente, eu realmente gostaria adicionar uma animação como essa ao meu botão. Digamos que para esse botão, certo, ou talvez para esse botão, seja o que for, você decide. Então, como eu adicionaria uma nova animação? Primeiro, preciso importar o movimento, certo, porque ele não é importado aqui. Então, vamos importar nossa moção, certo? E depois, também precisamos importar nosso utilitário aqui. Então, vamos fazer assim. E precisamos dizer qual animação queremos. Então, no nosso caso, queremos escalar ao passar o mouse, certo? Portanto, não importamos tudo porque não precisamos de tudo no momento. E agora veja o quão poderoso eu vou te mostrar agora. Quando eu digito aqui movimento, certo, essa coisa pode ter o quê? Nossas animações agora, certo, porque o movimento é aplicado ao botão Mas se você quiser aplicar isso agora, você precisa dar uma olhada nisso. **** e a sugestão. Olha, mãe. Animação legal, certo? Ele está chamando quando eu movo o mouse e, quando estou tocando, ele volta Tão poderoso, certo? Agora você pode usar todas essas animações em qualquer lugar do seu projeto, em qualquer componente que desejar. Isso é legal, certo? Não é como antes quando a gente gosta, sabe, de criar, por exemplo, uma animação bacana acima do valor animado, certo? Agora, temos um tipo de ação padrão, certo? Podemos alterá-lo se alguém enviar aqui um valor que não seja padrão, certo? E todo mundo está feliz. Isso é tão incrível, não é? 105. AnimatePresence - como fazer animação de 'saída': Olá, meu amigo. Hoje, vamos falar sobre coisas super interessantes sobre animações de saída Porque observe que agora, animação funciona assim. O novato está aparecendo com zero Y 20. Então, por exemplo, 104 apareceu como aqui, e parece que foi movido para aqui. Mas o que aconteceu com o antigo estado? Tipo, o que aconteceu agora com 104? O que aconteceu com 105? Simplesmente desapareceu, certo? Foi removido instantaneamente. É como se estivesse desmontado. O componente responsável por esse local específico ter sido desmontado, certo? E a nova veio, foi montada e uma nova animação aconteceu, certo? Então, o problema é: como podemos, tipo, manter o componente antigo para a animação de saída. Muito interessante e difícil de gerenciar normalmente, mas como você tem um movimento de moldura, não vai ser tão difícil Primeiro, precisamos colocar aqui algo que é chamado de propriedade de saída, W apenas diz, o que deveria acontecer com o estado antigo. Então, o que deve acontecer com 110 agora, quando 111 está chegando? Como você pode ver, não está funcionando. O que quer que eu coloque aqui, como você pode ver, é o mesmo agora, certo? OK. Por quê? Porque essa propriedade funcionará quando algo como um pai do movimento observar o que está acontecendo observar o que está acontecendo com o componente que está sendo removido, certo? Porque, você sabe, quando esse movimento você não pode, tipo, saber quando a animação vai terminar de algo que está executando a animação e está se destruindo, Não poderia fazer as duas coisas ao mesmo tempo. Então você precisa de um pai que faça isso. Então, se você quiser manter a presença da animação ou a presença do estado antigo, você precisa aplicar aqui algo que é chamado de presença animada, ok? E você precisa, é claro, importá-lo. Então, anime a presença, e agora o que vai acontecer. Como você pode ver, coisa engraçada. O modo padrão é o modo de sincronização, que raramente é usado, mas é como se não estivesse apenas esperando, mas sincronizando com o estado antigo, certo? Mas esse modo raramente é usado. Na maioria das vezes que as pessoas usam aqui, espere, por exemplo. Então é como esperar. É que ele está esperando a animação de saída aconteça antes que a inicial e a animação aconteçam novamente. Então você pode ver. Hm. Muito bom, não é? E há mais um que é pop. Como se chama? O que eu digo, layout Popa Sim, assim. Como você pode ver, este é como estourar O que? É como aparecer . E este funcionaria melhor se fizéssemos algo assim, provavelmente. Como você pode ver, é como, como você pode ver, 747780. Como você pode ver, está vindo de cima, certo? Isso é como. Sim. Então, fizemos espécie de relógio de cima para baixo E lembre-se, se você quiser, tipo, trabalhar com a animação de saída, você precisa usar a presença animada, qual gostamos de observar qual é a saída do estado que é como estar desmontado, certo? Então, quando ele detecta que essa parte do seu aplicativo será desmontada Antes disso, ele aplicará a animação de saída. E depois, essa coisa também será destruída, certo? Porque esse cara sabe que quando isso vai destruir , vai ser destruído, certo? Porque ele pode ficar até o fim da destruição, certo? Mas se você é o objeto que está sendo destruidor, você não sabe exatamente o último segundo dessa destruição porque, bem, você não sabe quanto tempo a animação deve durar e quando você deve invocar, tipo, a próxima, certo Você precisa manter a presença da animação. É por isso que se chama presença. Essa é a lição do público. Muito obrigado. 106. Módulos CSS — vamos aplicar o escopo ao nosso CSS: Olá, meu amigo. Hoje vamos falar sobre tópico muito importante chamado módulos CSS porque, bem, para cada componente, eu disse que precisamos criar um arquivo CSS, certo? E essa solução funcionará na maioria das vezes, mas há um problema. A primeira coisa é que, por exemplo, quando acessamos o botão, e se quisermos acessar o botão da mesma forma em outro componente? Hmm. É tipo qual deles será mais importante nessa situação, certo? Então, precisamos, tipo, definir o escopo. Você precisa, tipo, aplicar o botão que está em ouro menos CSS apenas ao componente dourado menos JSix E também observe que quando estamos usando classes, como por exemplo, botões, para ser honesto, essa classe é autodescritiva e, normalmente, em CSS, também era um problema quando não usávamos react Quando você tinha botões diferentes, tipos diferentes deles, você tinha que, tipo, cada vez inventar algum tipo de nome aqui, certo? Botões, botões de navegação, blá, blá, la, la, certo? Você precisa especificar quais tipos de botões estão aqui. E isso também é um problema, certo? E você pode resolver todos esses problemas simplesmente fazendo algo assim. Ouro menor, certo? Você digita aqui algo como module dot CSS. Está bem? Mas isso está funcionando instantaneamente porque estamos trabalhando com o Vite, que imprime tudo Lembre-se disso. E agora também precisamos aplicá-lo, mas como podemos aplicá-lo agora? Então, agora, quando estamos importando ouro menor, precisamos também digitar seu módulo, certo? Mas também antes disso, precisamos digitar o nome, que nos permitirá acessar todas as classes, por exemplo, aqui. Nós fazemos isso? Bem, pegue, por exemplo, irmã de. Na maioria das vezes, as pessoas chamam isso de irmã. Você pode chamá-lo de CSS se quiser um atalho. Bem, essa convenção. A maioria das pessoas faz isso dessa maneira , então chame assim. Agora você pode usar esses estilos, por exemplo, aqui. Mas agora não os estamos acessando diretamente aqui porque percebemos que nosso site está, bem, funcionando, mas não estamos vendo mudanças feitas por estatísticas, classe e botões do chutador de gol a partir Então, se você quiser acessá-los agora, você precisa entrar no domínio do JavaScript, à direita, digitar, tamanho e, em seguida, escolher Gold clicker Como você pode ver, o Gold Clicker instantaneamente se transforma em algo parecido É porque estamos usando aqui, o quê? Esse hífen aqui, certo? Para conexão, estamos usando a pausa. E você não é capaz de fazer algo como Sis gold, clicker, ok Porque isso não é uma sintaxe em JavaScript. Mas você pode acessar, bem, propriedade do objeto também usando a sintaxe da matriz, certo? Então, sim, está funcionando. Observe também que eu tenho algum tipo de preenchimento automático ativado porque estou usando a extensão do módulo CSS, ok? E é por isso que também o traduziu para isso. Mas você deve saber que é melhor usar uma convenção de nomenclatura como essa para módulos CSS Não desse jeito. É porque agora, quando você acessa, como você pode ver, quando você faz algo assim, a primeira coisa é que você tem nossa sugestão automática Quando eu mantenho o controle, posso pular para o CSS que eu quero editar, certo? E bem, isso vai verificar se cometemos um erro ou não, certo? Então, é melhor usar aqui o estojo camel em módulos. Lembre-se disso. Ok, então como aplicamos isso aos outros? Em vez disso, digitamos stays, that, e agora digitamos aqui estatísticas, assim. E em vez disso, entramos no reino do Javascript e aplicamos agora padrões Assim. E nosso aplicativo está funcionando da mesma forma, mas isso é muito divertido. Observe o nome dessa classe. Tem sublinhado, botão dourado e algum tipo de, você sabe, volume aqui e algum tipo de, você sabe, volume E isso faz com que sua turma seja única no escopo agora, certo? E isso também significa que você não precisa mais se preocupar ao criar CSS para outro componente, certo? Porque você pode reutilizar todos esses nomes que estão aqui e não precisa se preocupar com colisões com nomes, Porque esse módulo CSS se aplicará somente a esse componente, sempre. Solução bem legal, não é? Essa é a lição. Muito obrigado. 107. Crie o botão ThemeToggle: Olá, meu amigo. Hoje, mostrarei como criar um botão como esse que, ao clicar nele, você mudará o tema do seu aplicativo de claro para escuro, certo? Então, agora, como você pode ver, temos uma equipe de luz e, quando clico nela, quero mudar para a escuridão. Então, eu já criei um componente Team Toggle Button J six Então, temos uma função. Lembre-se da exportação. Também precisamos inserir o módulo CSS, certo? Portanto, temos outro local separado para CSS. E observe também que em um JS six, eu importei o componente e o coloquei aqui. E lembre-se, como existem componentes, eu posso reutilizá-los, posso usá-los quantas vezes eu quiser em muitos lugares Isso é legal porque você pode, por exemplo, colocar agora esse botão no canto superior direito, por exemplo, no canto inferior esquerdo, o que quiser, logo no rodapé, em muitos lugares, você não precisa refazer todas as coisas Então, aqui temos o módulo que precisamos, tipo, configurar. Então, temos um botão, certo, retornado, e precisamos configurar os estilos para ele. Então, precisamos digitar, como você pode ver, a sugestão é muito boa. E agora, no início, temos algo parecido com isso. Então parece melhor, certo? Está no meio. Existem slides básicos para eles. E agora queremos, tipo, mudar o estado do nosso aplicativo, certo? Queremos transformar a equipe da luz à escuridão. E como fazemos isso? Então eu criei no índice CSS, ok? Então, no tamanho global, algo como valores padrão para iluminá-los. Você pode usar em CSS varibus, certo? Então, esses são para iluminá-los, o padrão, certo? E depois disso, eu criei também um atributo, ok, que é como os dados deles, escuro, ok? Então, aqui, esses varibus podem ser aplicados a qualquer elemento HTML que tenha qual equipe de dados de atributos, certo? Se não tiver isso , a variável que será aplicada é quais são esses valores, certo? Então, tudo o que precisamos fazer é, de alguma forma, aplicar todos esses atributos em toda a nossa página da web Mas, felizmente, não precisamos anexá-lo a todos os elementos, certo. Tudo o que precisamos fazer é aplicá-lo aqui, certo? Porque se você aplicar o atributo aqui, todas as crianças o herdarão, certo? Então isso é tudo o que precisamos fazer. E precisamos fazer isso a partir deste lugar. E agora temos um problema, tipo que tipo de problema? Bem, como acessamos o elemento HTML do documento, certo? Porque estamos reagindo, certo, como acessamos algo fora do escopo do nosso componente? Então, você se lembra de quando estávamos falando sobre efeito de uso? Antes de usá-la principalmente para quê? Para um intervalo definido, certo? Mas o efeito de uso também é algo que pode ser usado para invocar funções que deveriam estar envolvidas e que podem acessar modelo de objeto do documento como você faria normalmente, certo? E coisas assim acontecem, como você pode ver, você quer fazer isso aqui. Mas como? Bem, você precisa apenas acessar o documento, à direita, e depois o elemento do documento. E sim, isso é uma boa ideia. Mudamos o atributo do elemento do documento, que é HTML, certo? Datatm para DAG. Então anexado ao atributo HTML theta team com o valor dark E por causa disso, o CSS é legal, porque quando ele detecta atributos como esse, ele muda as variáveis, certo? Então, essas variáveis para isso, certo? Portanto, você pode especificar agora aqui como seus elementos devem se comportar quando a alteração ocorrer. Mas você pode estar se perguntando agora, por que isso aconteceu instantaneamente? Bem, primeiro, quando eu salvo o arquivo, ele está detectando o salvamento e atualizando tudo Mas ainda assim, por quê? que você tem aqui? Um componente, certo? E quando esse componente será criado. Então, em up J. Então, aqui, isso será retornado, quando voltarmos para J, o efeito de uso será executado. É como, eu diria, construtor. Sim, é muito parecido, mas é claro, não é um construtor, mas sim, é algo que vai acontecer, ok? Quando você não especifica todas as coisas sobre as quais falamos antes, isso acontecerá toda vez que o componente for montado. Então, toda vez que ele será renderizado. Então isso não é o que queremos desta vez, certo? Queremos, tipo, fazer com que funcione somente quando a equipe for trocada, certo? Então, quando o estado da equipe é alterado. Então isso significa que precisamos usar o estado. Está bem? Então, talvez vamos importar o estado aqui, certo? E eu proponho criar o quê? Sim, algo parecido. Então, estamos fazendo um gancho, então estamos conectando uma equipe a outra, certo? E o valor padrão será claro ou escuro. Depende de você, certo? E queremos definir o atributo aqui agora, não muito escuro, tipo, você sabe, isso não é bom. Queremos defini-lo com o valor que está no estado, certo? Ok, isso é legal. Mas quando eu clico nele, eu preciso, tipo, mudar o estado deles, certo? Ok, então como podemos mudar o estado do tema? Precisamos usar onClick quando alguém está clicando nele, certo? E a sugestão é muito boa porque precisamos invocar set them, certo? Digamos que vamos removê-lo por um segundo e alterá-lo apenas para escuro, certo? E quando invocamos set them, porque ele está vinculado à equipe quando é invocado, o tema muda para escuro E como você pode ver, isso mudou, certo? Ok. E bem, podemos mudar de uma só vez, certo? É por isso que precisamos dessa coisa. Essa coisa é como uma declaração condicional do JavaScript que verifica essa coisa Portanto, se o estado estiver claro no momento , mude-o para escuro. Caso contrário, mude para luz, certo? E o que será devolvido é escuro ou claro, dependendo do que estava antes. E isso é legal porque está apenas em uma linha, agora vai mudá-la de uma para outra, certo? E agora, o próximo passo é que devemos melhorá-lo um pouco , porque agora, como eu disse, isso será invocado toda vez que o botão de alternância de equipe for exibido em seu aplicativo Então, acho que devemos especificar quando deve ser executado. Ele deve ser executado somente quando o estado da equipe for alterado. Então, é como algum tipo de otimização nesse caso, ok? Ok, então é isso que queremos, certo? E agora, você pode estar se perguntando como isso funciona, certo? B, uau, tantas coisas estão acontecendo que eu fiz nos bastidores Bem, isso é reagir, certo? Mas vou explicar o que aconteceu nos bastidores. De qualquer forma, porque é muito interessante. Então, como eu disse, temos a cor de fundo padrão. E quando fazemos algo assim. Então, quando anexamos ao HTML, certo? Então, quando nos apegamos a essa coisa aqui, certo, quando nos ligamos a ela, fizemos isso aqui. Eles lhes ensinaram atributos, certo? Então, e está configurado para quê? Escuro, não claro. Então, cada elemento herdará esse atributo E sempre que você usa essas variáveis, certo, em qualquer lugar. Observe que, no botão de alternância da equipe, eu fiz algo parecido Cor do fundo, e eu disse isso aqui para o botão Var. Então, é como se mudasse aqui, essa variável de uma para outra quando o atributo vem ou não. Quando eu vou para, por exemplo, Good Minor, eu também faço isso aqui. Observe o plano de fundo e o texto do botão, certo? E se você não quiser mudar alguma coisa, certo, se quiser manter o valor que deveria estar aqui, certo, basta digitar aqui esse valor, certo? Portanto, se você não quiser que algo mude quando a equipe estiver mudando, não digite. Mas também há mais uma coisa que às vezes você deseja personalizar a alteração. Então, se você quiser personalizar, por exemplo, o botão de alternância porque, como você vê, eu queria Eu queria mudar a cor também para, por exemplo, azul, não branco desta vez. Em seguida, você precisa acessar primeiro o atributo de equipe escura, certo, que está definido como escuro. Portanto, se o botão togul tiver esse atributo , altere a cor de fundo para algo parecido Claro, você pode fazer o que quiser aqui. Então, depende de você, e esse é o comportamento que vai acontecer nessa situação. 108. Texto condicional — escuro para claro, claro para escuro: Olá, agora temos luz de barra escura, mas eu gostaria de mudar o texto da linha para escuro quando a equipe estiver mudando, certo? Então, sugerimos o que esse botão fará. E isso é muito simples de fazer, porque lembre-se de que estamos usando JSX, então não precisamos escapar da palavra HTML para o script JAVA É como se já estivéssemos lá, mas precisamos fazer apenas algo assim, certo? Então, só precisamos usar colchetes e você está no JavaScript, e podemos fazer algo assim, por exemplo Mas, bem, isso não é exatamente o que queríamos, certo, porque é apenas mudar a ordem em que vamos colocar aqui algo como mudar para escuro ou mudar para claro, certo? Dessa forma. Como você pode ver agora, é claro, escuro e frio. E funciona porque estamos verificando o estado, certo? E se o estado for igual à luz. Então, quando é assim, digitamos aqui escuro. Caso contrário, digitamos aqui light com tanta frequência que estamos fazendo todas essas coisas, mas, você sabe, normalmente, escapar para o mundo do Javascript não é tão fácil quando você está em HTML Você precisa fazer muitas coisas, acessar propriedades. Aqui, não me importo. O estado mudou e quando o estado for alterado, tudo mudará de acordo. Poderoso. 109. [EXERCÍCIO] Botão do pacote externo - mude o tema com animação svg: Vá em frente, meu amigo. Tente fazer isso como um exercício. Acesse o botão size toggles dot Dev e tente, em vez de usar esse botão, implementar uma das coleções que estão disponíveis gratuitamente neste site Então, o legal do Rag, como eu disse antes, é que existem muitas coleções de coisas assim Isso é muito parecido com uma coleção específica que eu encontrei na Internet, certo? Portanto, não é como se tivesse muitas soluções diferentes. Essa é apenas uma solução simples para esse problema específico, certo? Mas vamos começar com algo simples assim. Então, digamos que eu queira ter um botão de alternância como esse Então, como você abordaria? Na maioria das vezes, sites como esse têm algo chamado documentação. Então, quando você acessa a documentação, como você pode ver, ela tem HTML e react, certo? Ok, então isso é o que precisamos usar. Primeiro, precisamos instalar nosso pacote e temos o gerenciador de pacotes chamado NPM, certo, para nosso nó JS Então, tudo o que você precisa é ir até o terminal digitar algo assim e deixá-lo tocar. Rn é apenas um gerenciador de pacotes diferente. Não o estamos usando, então estamos usando este. OK. Depois, diz que precisamos importar CSS para AJs ou outra coisa, certo? E então precisamos importar o componente pelo nome e usá-lo, certo? Ok, então quando chegarmos aos totais, observe que digamos que, Ei, eu gosto dessa, certo Ele vai da lua ao sol. Ok, isso é legal. Sim, isso é o que eu gosto. Então, eu não estou usando HTML simples. Sim, você também pode, mas eu estou usando Ra. Isso significa que, como você pode ver, temos aqui copiar e colar para o laptop importador de nossa página Nosso pacote foi instalado e agora podemos simplesmente importar todas essas coisas aqui, certo? Então, tudo o que precisamos fazer é importá-lo para o nosso projeto com o CSS que acabou de ser instalado quando fizemos isso, certo? E o nome do componente que queremos usar. OK. Então agora, sim, isso é legal. Eu tento definir algo assim, mas não é isso que queremos. Queremos primeiro apertar o botão, ok? E agora, diz que devemos especificar também a duração da animação. Então, digamos que queremos especificar, digamos, o valor padrão. Mas o problema é que não vemos nosso componente. E por que isso está escondido aqui. É porque a cor padrão é branca e isso significa que precisamos mudar o estilo. Mas como podemos mudar o estilo disso? Ao acessar a documentação, você verá que temos aqui algo parecido com estilo Portanto, para alterar a cor do Togo, basta alterar a propriedade de cor CSS do componente Ah, então precisamos apenas alterar essa propriedade de cor. Ok, então tudo o que precisamos fazer é primeiro mudar o estilo. Então, estilo é igual E agora entramos no reino do JavaScript, certo? E então, novamente, abrimos a curva dos colchetes para inserir o que inserir no CSS, certo, porque queremos retornar o CSS aqui E agora precisamos definir a cor, certo? Então, quando eu mudo a cor para, por exemplo , vermelho, o que vai acontecer como você pode ver, agora é vermelho, certo? E como você pode ver, já está funcionando, certo? Está mudando o estado, mas não está funcionando como queremos porque não está invocando coisas que temos aqui, certo? Ok, então vamos ver o que eles dizem? Se você quiser lidar com o estado, precisará implementar algo assim. Uh hein. OK. Então eu preciso, tipo, usar a função set aqui, certo, quando o togo estiver pronto Ok, então vamos implementá-lo. Então, quando entramos em Togon, certo, queremos Vamos ver se vamos receber dicas? Sim, nós entendemos. Mas isso é correto? Não exatamente, porque queremos mudar de equipe, não assim. Lembre-se de que não podemos mudar o estado diretamente. Queremos mudar isso usando o quê? A equipe do conjunto de funções. Portanto, a IA pode estar errada. OK. E agora, quando ativamos e configuramos nossa equipe, ela não está funcionando Por que isso acontece? É porque provavelmente eu cometi um erro aqui? Sim, claro, precisamos, é claro, usar uma função de seta. Então, como você pode ver, bem, sim, essa sintaxe aqui é difícil de entender, certo? Você cometerá erros como esses, e mesmo eu, quando estou criando muitos códigos em muitos lugares diferentes, em muitas linguagens diferentes, eu também cometo erros como esses, mas é o quão rápido você pode identificá-los, certo? Com a experiência, vem rapidez com que você identifica coisas assim. E como você pode ver, tivemos que usar a função de seta, certo, porque não podemos invocar aqui uma função, certo? Mas estamos enviando uma função para ser invocada pela propriedade toggle OK. Então, quando eu o uso , como você pode ver, agora é legal porque está mudando o estado deles. Ok, isso é exatamente o que queríamos, certo? E agora, também precisamos mudar o estado aqui, certo? Então, isso muda quando vamos aqui, percebemos que aqui está algo como alternado Então, quando o falso muda para verdadeiro ou para falso, isso será ativado ou desativado Então isso significa que vai mudar da lua para o sol. Ok, isso é um problema agora porque já temos um estado aqui, certo? Então, sim, era indiferente, por exemplo, componente, mas eu não quero colocá-lo em um componente diferente agora porque, bem, eu não quero perder seu precioso tempo agora, ok? Você pode fazer isso sozinho mais tarde. Mas podemos fazer algo parecido com o sugerido aqui. Então, podemos verificar a equipe, então se o estado for igual à luz, certo, então retorne verdadeiro. Caso contrário, voltará no outono, então realmente alcançaremos o que queríamos. Legal, certo? Acho que deveríamos usar a cor de fundo para este botão porque realmente clássico é um botão, como a variável usada para a cor de fundo, parte de todo o seu site, certo? Não é para o fundo do botão porque, como você pode ver, ele não está funcionando, eu acho, como queremos, certo? Então, como fazemos isso? Podemos acessar aqui as variáveis? Sim, claro. Veja, se eu dissesse cor de fundo para azul, será sempre azul, certo? Mas eu quero usar a variável. Então, como o usamos? Precisamos fazer algo assim. Vamos entrar na variável, certo? E então, sim, a sugestão é o plano de fundo do botão, mas não queremos usar o plano de fundo do botão. Queremos usar a cor de fundo desta vez. Por que não? Agora, como você pode ver, o botão sempre tem a cor do nosso plano de fundo e, por conta disso, o switch parece melhor, certo? A próxima coisa é, bem, digamos que eu queira mudar o tamanho dela. Então, para alterar o tamanho, vamos mudar o tamanho da fonte. E bem, sim, acho que poderíamos fazer isso dessa maneira, mas não com igualdade. Então, por exemplo, você sabe, 1,9, sim. Algo parecido. É maior agora, certo? OK. Então, mudamos o tamanho da fonte, mudamos a cor, mas acho que a cor vermelha é ruim. Eu acho que isso deveria depender do quê? Isso deve depender do estado da nossa equipe, certo? Então, se nossa equipe também é igual, sim, a sugestão é ruim neste momento. Então, se for igual à luz, quero mudar a cor para a cor estática que eu decido que será boa agora. Então, se estivéssemos no modo de luz, poderíamos dizer, tipo, Ei, clique na lua que é azul, certo? Mas caso contrário, você precisa atingir o sol amarelo, certo? Então, no modo escuro, ele ficará amarelo. Agora, como você pode ver, circule, certo? Muito incrível. E bem, você poderia colocá-lo como, você sabe, um componente diferente, certo? E, por exemplo, você poderia mais tarde, você sabe, usá-lo em vários lugares do seu programa. Este programa será outro programa porque esse será o comportamento padrão do botão tem que você gosta, certo? Não é o botão de item que foi criado por eles, certo? Vamos fazer essa. Muito obrigado. 110. Separar botões e ver o que está acontecendo com o estado 'compartilhado': Olá, meu amigo. Esses dois botões estão fazendo a mesma coisa, mas estão no mesmo componente. Então, isso significa que quando vamos reutilizá-los, eles estarão próximos um do outro, e não é assim que deve ser feito Mas o problema é: o que aconteceria se decidíssemos colocá-los em outra luta? Isso mesmo. Então, vamos, por exemplo, criar outro componente. Vamos chamá-lo de botão Tug clássico, ok, assim. E, claro, se JSX, e agora eu digo que vamos copiar tudo daqui, copiar tudo daqui, então não precisamos reescrever tudo Copie aqui. Agora, vamos renomear isso para o botão de alternância clássico usando o atalho F dois, então ele vai, tipo, renomear tudo, certo E agora, em nosso botão de alternância clássico, não vamos usar essa parte, certo Vamos devolver isso e não precisamos mais disso, certo? Não precisamos do clássico. E quando acessamos o botão de alternância de equipe, isso significa que agora podemos remover o clássico daqui, certo? E podemos remover essa parte, certo, porque isso não é mais necessário. Então, talvez os tenhamos dividido. Vamos ver o que vai acontecer. Quando o colocamos no Ajax, certo porque agora temos esse botão, certo? Então, digamos que queremos usar também o botão de alternância clássico, certo? Aquele. Como você pode ver, eles estão aqui, certo? Mas pode parecer um problema como você vê isso? Que quando escureci e achei isso, alguma forma eles não mudaram o estado de forma adequada Então é porque, bem, temos uma equipe aqui, e também temos uma equipe aqui, certo? Hm, mm, hmm Mas essa é uma equipe diferente, certo? Esse é o estado desse componente. Bem, eles têm o mesmo nome, mas não são compartilhados juntos. Mas como resolvemos algo assim? Mostrarei agora uma solução que provavelmente é mostrada na maioria dos cursos, mas na próxima palestra, mostrarei uma solução melhor Bem, porque o botão de alternância fino e o botão Togu clássico são nosso aplicativo Isso significa que sim, poderíamos fazer algo assim. Certo? Então, vamos colocar o estado e o efeito de uso neste lugar, certo? Ok, então tudo o que precisamos fazer agora é importar essas coisas, certo? E agora precisamos de alguma forma, tipo, perfumar uma equipe e colocá-los para que esse cara esteja aqui, certo? Então, como fazemos essas coisas? Bem, sabemos como personalizá-lo com adereços, certo? Então não é nada difícil de fazer, porque tudo o que precisamos fazer agora é, tipo, dizer, Ei, você sabe o que? Preciso juntar essas duas coisas e separá-las de outra pessoa, não neste lugar, certo? Agora podemos remover isso. E podemos remover isso, e também aqui. Está bem? Precisamos fazer isso assim. E agora precisamos enviar isso para eles. Então isso significa que, para a equipe, sim, precisamos fazer isso e, para isso, precisamos fazer isso. E agora, bem, o estado está aqui, certo? E enviamos esse estado para este lugar. Bem, eu também cometi um erro simples aqui, eu digito equipe sem E, e isso causaria muitos problemas. E agora é o que está acontecendo. Como você pode ver, eles funcionam corretamente porque os enviamos apenas como adereços para o botão clássico e o botão de alternância Tem Então, tudo está funcionando bem. Mas por que essa solução é uma má ideia, certo? Bem, em primeiro lugar, observe que agora podemos usar o botão de alternância Team ou o botão Classic Togo em outro aplicativo Precisamos memorizar isso , para usá-los, precisamos criar algo parecido que também precisamos memorizar no componente principal E então você precisa fazer algo assim. A única razão é que, eu acho, deveria ser suficiente. Mas digamos que você diga: Ei, isso é apenas para um aplicativo, funcionando bem. Vamos embora. Ok, ok. Digamos que você tenha muitos componentes necessários para compartilhar o estado. Então você terá aqui muitos estados de uso, muitos benefícios, por exemplo, e você terá o caos ao retornar aqui, certo? OK. Isso é ruim, certo? A segunda coisa é que, bem, teste se torna mais desafiador porque com o estado gerenciando o aplicativo, testar componentes individuais como, por exemplo, Team tagle ou o botão alternativo clássico pode exigir, bem, simular o estado ou usar a biblioteca de testes E isso adiciona muita complexidade. E, para ser honesto , seu aplicativo será um caos total quando você fizer isso dessa maneira, certo? Vai ser difícil escalar, vai ser difícil reutilizá-lo E também existe uma regra de que o componente up, no momento, é responsável por renderizar a interface do usuário e gerenciar o estado do aplicativo E não é assim que deveria funcionar, porque isso viola o princípio da separação de interesses, certo? Então, qual é esse princípio? Os componentes da interface do usuário devem se concentrar somente na renderização e na interação com o usuário Mas o gerenciamento do estado deve ser feito por mecanismos ou componentes dedicados, ok? Então você não deveria, tipo, fazer isso aqui. Você encontrará tutoriais de mano que fazem algo assim, mas não, não faça isso neste lugar Está bem? Eu vou te mostrar uma solução melhor na próxima palestra. Tenha um bom dia. 111. Como criar Provedor de Contexto? - Vamos criar ThemeProvider: Olá, meu amigo, hoje mostrarei como criar contexto para seus componentes, porque quando você está compartilhando o estado, uma das maneiras de compartilhá-lo é usando algo chamado contexto. Como criamos algo assim? Primeiro, você precisa criar uma nova pasta porque se quiser ter mais contexto, é uma boa ideia tê-las em uma pasta separada. Em seguida, criaremos um arquivo que chamaremos de contexto de equipe. E esse é o JSX five. E dentro dela, precisamos criar nosso contexto, e nós o criamos digitando algo assim, contexto e, em seguida, criando contexto Isso é suficiente, mas precisamos importar agora para criar contexto a partir do act. E contexto. Oh, sim, isso é ortografia correta. E agora podemos usar o contexto em crianças. Onde vamos fornecer esse contexto. Isso é muito importante porque, bem, agora, quando vamos, por exemplo, para o botão de alternância Tem, podemos importar nosso contexto fino Então, podemos escrever algo como importar contexto, e deve estar aqui a partir do contexto, algo assim. E agora podemos usar o contexto, mas o problema é que precisamos primeiro fornecê-lo, certo? Precisamos dizer que tipo de contexto estará dentro dele. E você o fornece no mesmo arquivo aqui, abaixo, criando algo com esse provedor de equipe, ok? E para fazer isso, você digita, como você pode ver, provedor de equipe, e precisa fazer algo como abrir aqui, sim, vamos chegar aqui e fechá-lo Por um segundo, isso é só fechar, e uma coisa muito importante também é que precisamos exportar todas essas coisas, certo, porque senão, não vai funcionar em outras cinco, certo? Como se eu tivesse tentado importá-lo. Para onde eu o importei na parte inferior do Team Toggle, certo? Então, antes isso não funcionaria, certo? Ok, então vamos voltar ao contexto da nossa equipe. E isso é um provedor. Você pode ver que há adereços para crianças aqui. Em breve explicaremos para que serve, ok? A sugestão foi bem legal, então vamos deixar pra lá. E o contexto que queremos enviar para eles: o botão de alternância e o botão clássico do Togo É isso, certo? Porque não queremos mantê-lo no aplicativo. Então, vamos removê-lo e colocá-lo aqui, certo? Então, esse é o contexto. E como o removemos, não precisamos de mais nada assim, certo? Porque isso não é algo que precisamos agora. E bem, podemos remover essa parte. E aqui precisamos importar o estado de uso e o efeito de uso, certo? Mas talvez vamos colocá-lo em uma importação como essa. Ok. Então, estamos avançando com nosso aplicativo, certo? Bem, este é um provedor de equipe, e agora precisamos devolver algo com ele, certo? Porque isso é muito parecido com o componente, certo? Mas desta vez, o que você vê aqui é bonito, como você pode ver, estranho porque quando você vai usar o provedor da equipe, você vai usá-lo aqui no aplicativo, ok? Então você precisa, tipo, importar, ok, o contexto da equipe. Então, o provedor da equipe, quero dizer, então o provedor da equipe. E você precisa aplicá-lo em coisas para as quais deseja que esse contexto esteja disponível. Está bem? Então, podemos, por exemplo, fornecê-lo para todo o nosso aplicativo, certo? Então, podemos fazer algo como um provedor de equipe, certo? E agora, isso é tipo, onde aqui, certo? E as crianças são essas, ok? Então, o minerador de ouro, o botão Tim Turkle e o botão clássico Togu serão passados aqui Ok. E precisamos, tipo, fornecer a eles o contexto. Então acho que está aqui, certo? E para dar contexto a eles, vamos digitar algo como a sugestão está aqui. Adoro essa sugestão, para ser sincera, não pense que você tem medo de usar IA, especialmente assim , porque coisas assim não são feitas com frequência, ok? Você não cria um provedor de contexto todos os dias. Mas você precisa apenas entender como isso funciona, certo? Então, acessamos o contexto da equipe, certo? Então, dizemos que o provedor é que queremos oferecer a todos os nossos filhos, e dizemos que o valor será a equipe e a definição deles, certo? Então, isso é o que deveria estar disponível, esse estado deve estar disponível para todas as crianças para as quais estou fornecendo o contexto. As crianças que eu dei aqui, todas essas crianças que temos agora, estado como este disponível para elas. Você entende isso agora? Quando vamos aqui, como você pode ver, ainda não está funcionando, é porque primeiro, quando vamos aqui, como você pode ver, equipe não está definida, por exemplo, você pode ver aqui que ela não está definida. Mas eu disse que o contexto está disponível aqui. Sim, mas para usá-lo, você precisa especificá-lo, ok? Então você precisa dizer algo como: Ok, você sabe o que? A equipe e o conjunto deles virão de algo parecido com o contexto, de um contexto tênue. Então importe, e então precisamos novamente introduzir o contexto, E precisamos importar um contexto fino. Está bem? E agora, quando temos esse botão clássico do Togo aqui, também precisamos fazer a mesma coisa nosso outro botão, como aqui, certo? Então, precisamos disso aqui e também precisamos importar o contexto de uso, certo? Método. E temos um erro aqui porque você está usando uma sobra dos adereços de antes. Eu não o removi. Então, sim, agora é assim. Agora, vamos ver se está funcionando. Como você pode ver, agora estamos compartilhando o mesmo estado, certo? Porque temos provedor para esse estado. Então, tudo o que está aqui estará disponível para crianças, certo? Mas essas crianças, se quiserem usar esse contexto, precisam dizer: Ei, eu quero usar esse contexto do contexto da equipe, e quero configurá-lo para as variáveis aqui, certo, também, a equipe estadual e a função de equipe definida que pode alterá-las. E agora tudo está funcionando bem, certo? Acabamos de usar o contexto que fornecemos em nosso aplicativo. Eu sei que você pode estar tipo agora, mas antes eu só precisava colocar o quê? Eu precisava colocar a peça fora do contexto, certo? Então, eu só tive que fazer isso no aplicativo. O que você acabou de me mostrar levou muito tempo para fazer. Primeiro, acabamos de colocar estado lógico do nosso P 14 em um arquivo. Assim, podemos atualizá-lo a partir deste lugar. Nós sabemos onde está. A segunda coisa é que nosso ats X vai se tornar mais simples, certo? Porque podemos ver claramente aqui tudo o que não precisamos para passar adereços Mas tem mais uma coisa. Se você tivesse, por exemplo, aplicativo interno, digamos, layout e layout interno, cabeçalho e conteúdo principal. E o conteúdo principal teria, por exemplo, artigo e Artigo, por exemplo, artigo. Então, se você quiser usar os mesmos adereços no componente que está, você sabe, profundamente feito, você precisa reenviar esses adereços repetidamente, isso é horrível, isso é horrível Precisamos sempre nos lembrar de fazer isso. Como você pode ver agora, ao analisar esse código, não é como se precisássemos nos lembrar de enviar profissionais. Não precisamos saber como isso funciona, certo? Estamos apenas criando uma equipe como provedora e dizemos: Ei, tudo dentro dela terá acesso a esse contexto se eles o usarem usando o contexto de uso. E agora, isso é poderoso, certo? Eles compartilham o mesmo contexto agora. Além disso, observe que, quando vamos ao contexto de uso, não é como se agora pudéssemos testar o botão de alternância clássico, porque sem nada, certo, como sem todas as outras crianças Portanto, há muitas vantagens em uma solução como essa. E essa solução para aplicações simples como a que você tem agora é a mais usada. Mas se você quiser usar o estado como um P, você deve usar algo chamado, por exemplo, Zootnd, que torna o gerenciamento do estado muito fácil e claro em comparação com isso Mas o contexto é algo que foi criado há muito tempo antes de Zustan e não havia uma solução como essa Então, algo assim, você verá em muitos aplicativos de reação que você precisa, tipo, trabalhar com e trabalhar com outras pessoas. E bem, instalando o Zostant e aprendendo a usá-lo, E apenas para um estado simples, por exemplo, você quer mudar a equipe. Então, se você tem apenas uma coisa que vai ser compartilhada, tudo bem, não vamos usar isso. Mas se seu aplicativo vai compartilhar constantemente o estado entre os componentes, então é hora de aprender algo, por exemplo, assim, ok? Essa é apenas a lição. Muito obrigado 112. use-state-local-storage - como implementar o sistema SAVE em nosso jogo em 5 minutos?: Olá, meu amigo. Hoje vou mostrar como usar o armazenamento local em seu aplicativo react. Porque, bem, é legal que possamos mudar, por exemplo, nossa equipe, certo? Também é legal podermos minerar nosso ouro. Mas quando atualizamos nossa página, o estado de tudo volta aos valores padrão, certo? Então, como podemos mudar um comportamento como esse? Para ser sincero, implementar coisas como está demorando muito tempo porque precisamos usar efeitos e entender como o armazenamento local funciona. Mas estamos reagindo. Além disso, não estamos usando JS, o que significa que existem muitos pacotes muito divertidos, como , por exemplo, este que o tornará tão, muito legal. Então, quando eu fizer algo assim, o que acontecerá? Vou instalar um pacote agora em vez disso, certo? Não estou mais usando o State, ok? Agora vou importar, e quando chegarmos aqui, veremos o que precisamos importar. Use o estado de armazenamento local, certo? Então isso. E agora, vou substituir isso por isso. Mas agora há mais uma coisa muito importante. Precisamos dizer não qual é o valor padrão aqui, ok, mas em que vamos usar nosso armazenamento local. Então eu vou colocá-los aqui, ok, desta forma. Depois, precisamos definir o valor padrão para ele. E como definimos o valor padrão? Quando entrarmos aqui, você notará que temos valor, valor definido e a chave é usada quando obtemos itens. Portanto, tenha cuidado com os conflitos de nomes e, em seguida, teremos algo chamado valor padrão das opções. Mas as opções são como um objeto. Então, como isso é um objeto, precisamos fornecê-lo dessa forma, certo? Portanto, o valor padrão será, por exemplo, leve. Agora, quando eu o atualizo, como você pode ver, agora isso é correto porque definimos o valor inicial como light, e é por isso que agora temos ícones adequados aqui E quando eu clico nele e atualizo nossa página, finalmente é o que ela está lembrando. E, para ser sincero, o legal disso é que, hum, quanto tempo eu gastei implementando o armazenamento local, certo? Levei apenas alguns segundos, certo? E agora, quando vamos, por exemplo, aqui, como você pode ver, temos nossa chave, certo? Luz. Isso é incrível, certo? Quanto tempo demorou? Nada Não precisávamos, você sabe, pensar em quando as coisas estão mudando, como elas estão mudando, em quais lugares, nada. Acabei de importar isso e funciona. Você poderia fazer isso manualmente, como usar métodos de construção de JavaScript para armazenamento local, usando o efeito de uso, mas, para ser honesto, por que quando existem soluções como essa? Então, como aplicamos a mesma coisa ao nosso minerador de ouro? Então, queremos usá-lo aqui agora. Bem, primeiro, precisamos importá-lo, certo? E agora precisamos fazer isso funcionar aqui. Como sou super preguiçosa, vou fazer algo assim Control C, Control Shift mais I, vou falar com codium porque é muito legal Não use armazenamento local em vez de usar state e aplique os valores, os valores iniciais, e vamos enviar. Porque por que se preocupar em fazer coisas tão bem, nós sabemos como fazer, especialmente, nós sabemos como fazer, especialmente, mas elas levariam tempo para serem substituídas, certo? Então você pode ver no verde, nós temos o quê? Agora temos todas as mudanças, e esse é um código antigo. Se você quiser aceitar as mudanças, que eu acho adequadas, podemos clicar aqui ou usar Antigo mais A. E agora vamos ver se funciona. Então, quando eu vou para o nosso aplicativo, aqui. E eu me importo com o ouro. E agora, quando eu atualizo minhas páginas, você pode ver, mantemos o estado Vamos atualizar, vamos atualizar. Vamos atualizar com o Auto Cliqer. Vamos fazer com que fique escuro. Então, agora, quando alguém fechar nosso aplicativo, quando ele voltar e atualizar, o estado estará seguro Quanto tempo demorou para que a segurança funcionasse em nosso jogo? Não sei, talvez 5 minutos. Não sei quanto tempo dura essa aula. Super super poderoso, não é? E é por isso que reaja a essa escola com a conexão de nenhum pacote JS que as pessoas criaram para você usar. Portanto, existem muitas soluções para problemas que podem ser resolvidos muito rapidamente dessa forma. Muito incrível, não é? Tenha um bom dia. 113. Como construir seu aplicativo React em uma página estática?: Olá, meu amigo. Nesta palestra, mostrarei como criar seu aplicativo para que você possa finalmente implantá-lo Você pode compartilhá-lo com as pessoas porque, no momento, estamos executando tudo no modo morte, que significa modo de desenvolvimento. Estamos desenvolvendo nosso aplicativo e há muitas coisas em nosso aplicativo, como você pode ver, dependências de morte, que significa que existem outros pacotes instalados localmente que não são totalmente necessários posteriormente, certo? Existem algumas dependências aqui, portanto, pacotes que precisam ser incluídos no aplicativo de compilação E bem, como o construímos, certo? Como fazemos isso? Como você pode ver, temos um script chamado convite construído. Então, nós apenas digitamos NPM run e não deaf, mas build. Então, como você pode ver, todos os componentes serão transformados e analisados. E, como você pode ver, criamos qual índice ATML, CSS e JavaScript, que agora está na pasta chamada distribuição, certo? Dist e esta pasta é uma pasta que você acabou de transferir para sua hospedagem Então, agora você pode simplesmente abrir o índice HTML, e tudo vai funcionar bem, porque aqui e aqui você tem apenas o seu aplicativo inteiro. Como abrimos nosso lado agora? Para abri-lo, tudo o que precisamos fazer é clicar com o botão direito do mouse e abrir com a extensão do servidor ativo. E ao abri-lo, você verá algo parecido. Ecrã panorâmico. Por que isso acontece? Porque quando vamos ao arquivo fonte, percebemos que agora temos o sideset, temos Mas quando eu clico em JavaScript, o que acontece? Não conseguimos encontrar algo como índice de ativos. Por que isso acontece? Porque observe que o servidor ativo, por padrão, é aberto como nosso HTML de índice distribuição neste arquivo de distribuição. Então, estamos tentando acessar realmente fazendo algo assim, não esse HTML cinco, certo? Quero dizer, não esse CSS cinco, mas algo parecido, ok? Então, estamos tentando acessar a partir da raiz, certo, dessa forma. E sim, isso não está aqui. O ácido é como aqui, certo? Então, por causa disso, quando você está apenas abrindo localmente, você precisa , tipo, remover isso, e então ele abrirá sem nenhum problema, certo? Está funcionando. Eu posso minerar ouro. Quando eu atualizo, como você pode ver, o estado está sendo salvo, certo? Eu também posso salvar o estado de Artem e assim por diante, certo? Portanto, nosso aplicativo está funcionando. Agora você pode transferi-lo diretamente para a pasta raiz da sua hospedagem e ele simplesmente funcionará. Sem problemas porque não fizemos nada do lado do servidor, certo? Não usamos o node JS para criar o servidor, certo? Não precisamos configurar um servidor em nossa hospedagem agora porque esse é apenas um site estático que você pode compartilhar com qualquer pessoa, certo? Mas, como eu disse, lembre-se disso aqui porque, por padrão, se você quiser compartilhar esse aplicativo na hospedagem, mas em algum tipo de subpasta, mas não na raiz, você precisa ter certeza de mudar assim para isso Caso contrário, também não funcionará nisso, porque se você quiser ter o ícone também, você precisa dizer que não estamos vindo da pasta raiz, não olhe da pasta raiz, mas olhe na pasta atual a em que está o HTML do índice, certo? Muito simples, não é? Essa é apenas a lição. Muito obrigado 114. O que é elétron e como fazer com que ele execute nosso aplicativo React?: Olá, meu amigo de hoje, vou te mostrar algo superpoderoso, que se chama elétron. Ele permite que você crie aplicativos de desktop de plataforma fechada com JavaScript, HTML e CSS. Então, para ser honesto, acabamos de usar isso, certo? Também usamos react, mas react é escrito em JavaScript. Então, isso significa que poderíamos de alguma forma conectar isso ao nosso projeto. E por causa disso, podemos executar nosso aplicativo como aplicativo de desktop. Isso seria muito legal, certo? Então, como fazemos isso? Precisamos primeiro instalar nosso elétron. Portanto, precisamos digitar NPN, instalar o elétron e, em seguida, acrescentar que o estamos salvando como dependência de profundidade, então não é como se ele entrasse em nosso modo de construção, logo quando servimos Ok, então acabamos de instalá-lo. E agora? Então, para podermos executar o elétron, certo, precisamos primeiro especificar como fazer isso e qual elétron deve procurar quando for Então, vamos executar o script electron a partir do gerenciador de pacotes node Está bem? Então, precisamos especificar aqui como vamos executá-lo. Você pode ver que diz que se você digitar elétron, vamos executar, por exemplo, elétron, certo Ok, tudo bem. Mas eu prefiro fazer algo como adicionar aqui a coluna da morte. Então, quando eu vou digitar NPM run death, eu posso dizer, Ok, eu quero rodar em Development electron E essa coisa aqui vai procurar um arquivo que executará elétron. E precisamos especificar agora, como você pode ver aqui, onde esse arquivo está com a propriedade main. Mas vamos colocar esse arquivo na pasta eletrônica. Então, mantemos nosso projeto organizado, certo? Então, vamos criar uma pasta eletrônica, e na pasta eletrônica, vamos criar algo chamado JS principal Está bem? Porque, como eu disse anteriormente, elétron é realmente o quê? É simplesmente simples. Bem, o JavaScript HTMLC é esse aplicativo. Mas vamos basear esse aplicativo em tudo o que já criamos aqui, certo? Vou colar o código que criará nosso aplicativo eletrônico no modo desktop, ok? Você pode encontrar a maior parte disso na documentação, mas eu ajusto um pouco para que funcione corretamente com a configuração do Vt. Vou explicar o que fiz aqui. Você pode baixá-lo no código-fonte. Isso é algo que você faz apenas uma vez na maioria das vezes. Não é algo que você precise memorizar, mas é bom entender o que está acontecendo Primeiro, importamos as coisas que vamos usar abaixo, e isso é o que é necessário para trabalhar na configuração do vite com o Slink com nosso forro que instalamos em Mas algo que é o mais importante para nós é isso. Estamos criando uma função que criará uma janela do navegador com o tamanho que definimos aqui. Se você quiser que seu aplicativo seja maior, defina o tamanho aqui no início, por exemplo, agora há mais uma coisa muito importante onde devemos procurar a base do nosso aplicativo. Então, se você quiser executar o electron, você precisa dizer, onde estão os arquivos nos quais eu vou rodar , então eles estão lá E agora aqui está: Ok, então quando o aplicativo estiver pronto, quando estiver pronto, crie essa janela, certo? E aqui estão dois eventos que são necessários para, por exemplo, limpar tudo e também mostrar o aplicativo quando o aplicativo é ativado. Então, essas coisas que você nunca mais veria. Para ser sincero, não me lembro deles. É como, Ok, está configurado, não me importa. Isso também é configurado. Eu não me importo, mas este é o lugar onde você vai, tipo, configurar e ajustar algumas coisas Claro, o elétron tem seus próprios métodos que você pode ler aqui, você tem a documentação porque este curso não será sobre elétrons Estou apenas mostrando o quão poderoso é o fato de termos acabado de usar o react e poder criar aplicativos para Windows instantaneamente a partir de tudo o que acabamos de fazer , ok? Então, o mais importante para você é isso. Então esse deve ser o caminho para o índice HTML do arquivo de distribuição, ok? Ok, então acabamos de dizer isso. Isso é bom. E mais uma coisa está aqui. Você precisa definir como a sugestão está aqui, com base nessa barra. Por que isso acontece? É porque percebam que aqui, na última palestra também, tivemos um problema porque todos esses ativos não estavam disponíveis porque, por padrão, é assim, né E o elétron também terá problemas se for configurado assim, ok? Então defina isso e isso resolverá todos os problemas. Ok. Então, acabamos de fazer três coisas. E para ser honesto, como corremos agora? Precisamos digitar NPM run de electron, certo? E o que? Essa coisa vai procurar o principal. Main é como dizer que main está lá e deve executar nosso aplicativo. Como você pode ver, está funcionando. E o legal é que se eu fechar e executar novamente, como você pode ver, ele está lembrando minhas configurações, né Também é lembrar o que fizemos aqui. Então, por exemplo, eu comprei aqui. E, como você pode ver, é lembrar que o armazenamento local está lá Uau, tão poderoso, certo? E, sim, é assim que executamos o elétron, certo? Mas também precisamos não apenas executá-lo localmente, mas também saber como distribuí-lo, certo? Então, como construí-lo. Então, vou mostrar na próxima palestra como, tipo, construir elétrons para que haja executáveis, por exemplo, no Essa é só uma lição. Muito obrigado 115. Como construir o exe do Electron do nosso aplicativo React: Olá, meu amigo. Hoje, mostrarei como criar um aplicativo de elétrons porque, no momento, só podemos executar Podemos empacotar nosso aplicativo que fizemos no React, certo? Mas como podemos construí-lo? Então você tem que executar a tabela cinco. Em primeiro lugar, você precisa instalar o construtor de elétrons, certo? Portanto, a construção de elétrons na bandeira usando D significa que ela será instalada no cofre Dev É a bandeira para pessoas preguiçosas que não querem, você sabe, escrever Safe Death Ok, então quando tivermos isso agora, precisamos especificar aqui o script que executará nosso construtor. Então você não precisa, tipo, você sabe, se lembrar de como fazer isso toda vez. Então, sim, acho que a sugestão é boa. Então, quando você está vinculado à construção e depois ao cólon e depois ao elétron, ele deve executar o construtor de elétrons . Isso é legal. E porque vai rodar o Electron Builder, Mmm. Agora precisamos especificar para o construtor a propriedade chamada build, ok? Então, algo parecido. E sim, assim, haverá mais sugestões ou não? Sim, ID do aplicativo e nome do produto. Ok. O ID do aplicativo é algo que identificará você. Por isso, sempre começa com C e depois você digita o nome da sua empresa. nome do meu componente é GAM e o nome do seu aplicativo Isso é útil para, você sabe, identificar seu aplicativo por sistema. Portanto, não se preocupe com isso por enquanto. Você pode ler sobre isso mais tarde, mas precisa configurá-lo. Está bem? Você também deve definir o nome do produto, é claro, e depois dizer onde estão as tortas com as quais vou construir tudo. E nossas tortas estão em elétrons. Sim, está na nossa pasta, certo? E eles também estão na pasta dist, certo? Então, o mesmo, mas para um disco assim, certo? Então, todas as coisas relacionadas à produção serão encontradas lá. Ok, agora podemos executar o NPM, não a morte, mas construir elétrons E espere que ele faça o trabalho. E como você pode ver, há uma nova pasta que criou para nós algo chamado Autocliker Agora podemos abri-lo no Explorador de Arquivos e executar nosso aplicativo como um aplicativo normal. Então, como você pode ver, está funcionando. E também agora, ele vai se lembrar do estado, certo? Tudo está funcionando bem. Mas o problema com essa configuração é que quando você vai executar o build electron, acho que você também deve executar como o Vite Build, certo Por quê? Porque se você mudar alguma coisa , em, você sabe, nossa reação, não vai ser como dentro do elétron agora. Então, para fazer isso funcionar, vamos fazer algo assim. Execute a construção e, ao mesmo tempo, o construtor de elétrons, e vamos repetir também a corrida de profundidade para elétrons Está bem? Dessa forma, se mudarmos alguma coisa, ela será aplicada automaticamente. E mais uma coisa que eu só quero mostrar a vocês antes de terminarmos esta palestra para a próxima construção é que olha, como é legal que você possa, por exemplo, fazer algo assim Digamos que eu não queira moldura. Então, estamos apenas enviando a propriedade para cá, certo? E vamos, por exemplo, executá-lo. Sim, sim, vamos executá-lo como um modo de construção. Então, precisamos esperar um segundo, ok, certo? Porque é embalagem e está criando todas as coisas. E sim, aqui está o aplicativo, vamos ver como fica. Como você pode ver, não temos moldura agora, certo? E podemos fechar isso usando o atalho mais F quatro, certo? Aqui estão dois ícones provenientes do meu próprio programa que são como uma sobreposição para outros programas Mas o quão legal é isso? Me diga. Agora, podemos nos divertir, criar desenvolvimento web para aplicativos web. E depois, tudo que você precisa fazer é configurar todas essas coisas, eu sei, demorei 15 minutos no total. E agora podemos criar um arquivo executável que pode ser executado, por exemplo, no Windows, certo? Tão poderoso. Se você tiver alguma dúvida, fique à vontade para perguntar. 116. O que é PWA?: Olá, meu amigo. Hoje, vamos falar sobre algo super legal, que é um aplicativo web progressivo. Eles são? Bem, essa maneira de ver o que são é abri-los. Então, como você acabou de notar, abri um aplicativo no meu smartphone. Mas esse aplicativo foi escrito por nós usando o quê? HTML, CSS, JS e react, certo? Então isso significa que agora podemos instalar em nossos dispositivos, como, por exemplo, com Android ou em nosso computador pessoal ou Mac, sim. E uau. Eles foram escritos em HTML, CSS e JS. Você não precisa aprender nada. Isso é incrível, certo? Então, sim, isso é super poderoso. E você pode estar se perguntando agora, é difícil, tipo, você sabe, de alguma forma fazer isso funcionar com HTMLCs e Deve haver muito trabalho para fazer isso, certo? Então, o que realmente precisamos fazer? Primeiro, você precisa adicionar algo chamado manifesto. Está bem? Então, algo é chamado assim. Mas o que é manifesto? Manifesto em inglês significa demonstrar para mostrar, certo? Portanto, o manifesto é algo como um arquivo que exibe informações sobre seu aplicativo. É como um arquivo especial que tem computador ou telefone, né, como tratar o site como um aplicativo, né, porque precisamos mudar, transformar um no outro. Portanto, ele precisa ter informações como qual deve ser o nome do aplicativo, quais ícones devemos usar e assim por diante. Falaremos sobre isso mais tarde. Além disso, precisamos de algo chamado Service Worker, ok? Então, bem, service worker é só um roteiro, ok? É como um pequeno robô, ok? Isso ajuda. Você e ele vivem no seu navegador, ok? Ele fica entre seu aplicativo e a Internet. Ele armazena em cache e coisas importantes. Então, seu papel principal é, tipo, gerenciar o cache, ok? Ele armazena arquivos importantes como HTML, CSS, S, imagens. Assim, seu aplicativo pode, por exemplo, funcionar offline ou com conexão de rede. Então, esse recurso off-line é, bem, revolucionário porque faz com que seu aplicativo pareça um aplicativo nativo, certo, porque você não precisa ter acesso à Internet para mantê-lo funcionando Portanto, o service worker é como um arquivo que está entre seu aplicativo e a rede. Ele pode interceptar uma solicitação de rede e decidir se deseja fornecer uma versão em cache de um arquivo ou falsificá-lo da Isso ajuda a oferecer experiência rápida e confiável aos usuários. Está bem? Assim, os trabalhadores habilitam a sincronização em segundo plano e as notificações push, por exemplo Isso significa que seu aplicativo pode sincronizar dados com o servidor e, quando não estiver ativo, os usuários podem, por exemplo, receber notificações mesmo que o aplicativo não esteja aberto, por exemplo. Muito, muito poderoso, certo? Ok, então você deve estar se perguntando agora, bem, você pode me dizer se o PWA, os aplicativos web progressivos, podem fazer coisas com dispositivos Android, como, você sabe, aplicativos nativos Para ser honesto, veja as coisas que ele pode fazer. Ele tem acesso ao sistema fi. Você pode até escolher o contato. Você pode até mesmo vibrar seu pagamento via Bluetooth de acesso telefônico Há muitas coisas que podem ser feitas usando isso, sim. Então, há alguns casos raros em que isso não é suficiente, certo? Bem, principalmente se você, por exemplo, quiser criar algum tipo de jogo ou se concentrar em, você sabe, um dispositivo Android, sim, talvez seja uma boa ideia. Mas, na verdade, aplicar aplicativo web progressivo em seu aplicativo agora, isso é realmente adicionar um manifesto service worker e pronto. E eu vou te mostrar como fazer essas coisas nas próximas palestras. E o engraçado é que , como você está usando o Vt, será ainda mais rápido porque você instalará o pacote para isso e especificará apenas algumas coisas, e nem precisará criar um e nem precisará service worker sozinho, ok? Uma maneira super poderosa de, por exemplo, disponibilizar seu aplicativo em todos os dispositivos possíveis. Mm em tudo o que é possível em dispositivos como PC, Mac ou Android ao mesmo tempo. Isso é poderoso porque não há muito trabalho a fazer, mas acredite, se você anexá-lo, aumentará a quantidade de pessoas que, tipo, você sabe, usarão seu serviço de aplicativos em tons. Muitos serviços notaram que o aumento da quantidade de pessoas que usam seus aplicativos web, você sabe, quando simplesmente colocam o aplicativo web progressivo, como wrapper, no aplicativo aumentou em 70%, por exemplo Então, isso é muito. 117. Transformar seu aplicativo HTML/CSS/JS em PWA: Olá, meu amigo. Como podemos transformar HTML CSS JS em um aplicativo web progressivo. Assim, podemos executá-lo, por exemplo, Android ou PC. Para fazer isso em nosso projeto, precisamos apenas instalar o NPM, o IP e, em seguida, instalar algo chamado plug-in para aplicativo web progressivo Vamos salvá-lo como dependência de desenvolvimento, certo? Então, será o pacote para morte porque não precisamos dele mais tarde, certo? Este plug-in Ok, acabamos de instalá-lo, mas como usamos esse plug-in? Essa é a questão. Observe que temos aqui algo que é chamado plug-ins de propriedades no JS do vite conflict, ok? E aqui, quando você faz algo assim, quando você adiciona mais um elemento semelhante, você pode digitar aqui algo como vite P, W A, ok? E aqui, você pode ver que o importamos automaticamente. Podemos especificar como Vte deve transferir nosso aplicativo para um aplicativo web progressivo Está bem? Normalmente, você precisaria criar dinheiro manualmente primeiro, certo? E crie manualmente um prestador de serviços. Mas esse plugin só vai fazer isso por você. E isso não é tudo. Isso criará um prestador de serviços. Então, algo que é responsável por armazenar seu site em cache, logo quando perdemos a conexão com o servidor, quando o usuário usa a conexão com o servidor, e isso será feito automaticamente Então, sim, essa é a maneira de fazer isso, certo? OK. Portanto, precisamos definir primeiro algo que é chamado de tipo de registro. E como você pode ver, a sugestão automática diz que devemos digitar aqui como autodate Isso significa como devemos fazer nosso prestador de serviços trabalhar por padrão. Vamos supor que queremos apenas usar essa estrela de configuração, muitas outras, você pode ler o tipo de registro Vt PWA Isso não é sobre aplicativos web progressivos e todas as propriedades possíveis, você sabe, porque não é assim que funciona. Você só quer configurar, algo que funcione, e então você fica tipo, melhore seu conhecimento se precisar de algo, ok? Então, isso permite que você crie um service worker que atualizará automaticamente seu site quando ele precisar, certo? Quero dizer, quando seu aplicativo está precisando dele. Então esse é o primeiro. A segunda coisa que você precisa configurar é o manifesto, ok? Porque normalmente você criaria manifesto como um arquivo simples, ok? Mas isso só vai criá-lo para você no arquivo de distribuição. E também vai anexá-lo aqui, como você pode ver, ele foi anexado como eu fiz antes para mostrar como funciona, certo? Então, ele vai apenas anexá-lo por padrão, e você não precisa pensar nisso, certo? Você configura tudo nas coisas de configuração e não posteriormente na distribuição ou algo parecido, ou talvez no índice H t, certo? Tabela I Índice H. Você não faz isso manualmente aqui, isso será feito para você porque temos esse login. Ok, agora precisamos definir algumas propriedades que são necessárias. Como sabemos quais são necessários? Quando você acessa o site, como por exemplo, este, você pode ler como tornar possível a instalação progressiva de aplicativos web, certo? E quando você subir aqui, notará que são necessários membros manifestos. Você precisa especificar algo, primeiro, o que é chamado de nome. E o nome é apenas o nome do seu aplicativo, ok? Então, sim, podemos chamá-lo apenas de clicker automático. Isso é, bem, importante porque sem ele seu aplicativo não mostraria o nome, certo? Você precisa mostrar algo no raio do sistema ou sempre que quiser. Esse é o nome do seu aplicativo. Próximo. O que precisamos? Precisamos de ícones, ok? Então, precisamos especificar, vamos especificar isso também. É um nome curto. Se o nome aqui for grande e alguém não puder mostrá-lo, o nome curto será exibido. Por exemplo, o clique automático é maior, esse é mais curto e agora precisamos especificar, como dizem, ícones, mas vamos fazer isso um pouco mais tarde Agora vamos exibir a primeira coisa. Então, se você quiser exibir é como seu aplicativo será exibido quando você o executar. Então, quando você vai aqui e clica aqui, você notará que autônomo significa que é um aplicativo que parece um aplicativo nativo independente. E essa é a configuração usada principalmente. Mas você pode, é claro, fazer com que pareça um navegador, mas não o use porque é a mesma semelhança com e. Você pode usar uma interface de usuário mínima e tela cheia, certo? Você quer entrar em tela cheia, por que não? Por exemplo, desktop, você pode configurá-lo. Então é assim que seu aplicativo deve ser exibido quando executado. Também precisamos definir o URL inicial, certo? Então, onde nosso aplicativo é, tipo, baseado, certo? Então, isso significa que começa da raiz. Não está começando da raiz do nosso domínio no momento, então vamos usá-lo assim, ok? E temos aqui também isso, mas ele não pode estar presente nas dobras, então não precisamos especificá-lo Então, a última coisa que é uma necessidade total são os ícones, certo? Então, como fazemos isso? Como você pode ver, eles dizem que você precisa especificar algo assim, certo? Claro que temos códio, então isso vai nos ajudar Também há a cor da equipe e a cor do plano de fundo, mas não é como o necessário, então não precisamos especificá-la. Mas, como você pode ver, isso nos mostra que precisamos de algo assim, e também há mais um ícone que precisamos especificar. Vá lá. Me ajude. Me ajude. Sim, o tamanho de 500 512 Então, essas duas coisas precisam ser especificadas e precisamos disponibilizá-las, certo? Precisamos tê-los em nosso projeto. Mas o problema é que como geramos algo assim de forma rápida? E eu vou mostrar isso na próxima palestra, ok? Porque eu quero te mostrar uma coisa muito legal, como fazer isso rápido e a partir de qualquer imagem que você tenha, ok? Para que você não perca seu precioso tempo enquanto 118. NPX - executando o pacote para gerar ícones necessários: Olá, meu amigo. Hoje, vamos usar o modelo de pacote gerador de ativos do Progressive Web App, ok? Isso é muito legal porque vai gerar com base no que você tem. Bem, nós temos agora esse arquivo. Então, vamos usar o Vite SFO Gi, ok? Você pode usar qualquer imagem que quiser, ok? E quando você coloca o arquivo de origem e depois a pasta de saída, ele gera muitos ícones de todas as formas possíveis. Você também pode fazer com que funcione de forma diferente se usar as opções aqui, ok? Mas primeiro, precisamos pensar em quantas vezes criamos ícones como esse? Acho que isso acontece apenas uma vez por projeto, certo? Então, precisamos instalar uma dependência como essa? Precisamos instalar esse pacote ou precisamos usá-lo apenas? Você quer usar o pacote apenas uma vez, então você pode digitar NP X em vez de M, que significa executar o pacote uma vez, certo? E então você digita o nome do pacote, certo? Então, gerador de ácido PWA, certo? Em seguida, você digita onde você obteve o seu atualmente. É em público, certo? Convide o SFO G e, em seguida, digite onde deseja colocá-los. Então, vamos colocá-los em público e, por exemplo, em uma pasta chamada ícones. Mas não acabou porque não queremos tantos ícones por padrão no momento, pelo menos porque queremos, tipo, você sabe, fazer opções padrão. E vamos usar o ícone da bandeira, ok? Então, vamos fazer algo como apenas um ícone, por favor. E precisamos apenas dos tamanhos necessários. Então, vou digitar os tamanhos e depois vou digitar que quero 192 e 512 E quando você executa isso, precisamos esperar um segundo. E, como eu disse, isso é muito legal porque vai ser feito como se não o instalássemos em nosso computador porque não é necessário, certo? E quando vamos ao público, agora ícones, como você pode ver, agora temos ícones obrigatórios, como a parte mais importante. O legal dessa geração é que ela também gera links que você pode colocar, por exemplo, no Índice HTML, o que fará a Apple funcione na Apple. Além disso, você tem aqui, como pode ver, coisas que você deve colocar em suas muitas primeiro. Mas como estamos usando vt, precisamos colocar tudo isso aqui, certo? Mas há um problema. Não, é que estamos usando aqui o quê? Palavra pública, o que não é apropriado porque nossos ícones estão bem, atualmente, eles estão aqui, certo? Mas depois de colocá-los na luta pela distribuição, eles estarão aqui. Então, não vamos encontrá-los lá, certo? É por isso que precisamos especificar que estamos procurando ícones na pasta de ícones. Então aqui, A, A, A, certo? Dessa forma, vai funcionar. Também precisamos mudá-lo aqui. Então, precisamos observar que em ativos, mas em ativos, entendemos isso, é porque parece que o Vt é muito inteligente Ele vai colocá-lo lá. Então, sim, aqui, podemos armazená-lo dessa forma. Ok, agora podemos executá-lo e executar o build. Então, agora, quando entramos no arquivo de distribuição , observe que aqui, estamos tentando acessar o ícone a partir daqui, o que é, sim, correto. Isso é legal. Mas também é importante que aqui tenhamos um caminho adequado, certo? Temos ícones. Então, precisamos entrar em ícones, e então temos todos os tamanhos que você tem aqui, ok? Ok, vamos testá-lo. Tudo está funcionando corretamente? Quando vamos aqui, percebemos que no host local, quando estamos usando o vite, certo, ele não está funcionando Mas se você entrar no arquivo de distribuição, clicar com o botão direito do mouse e abrir com o servidor if, verá que está funcionando. Então, quando você faz isso, você pode instalá-lo, certo? E como você pode ver, você também pode gostar, isso está em polonês, mas você pode anexar este aplicativo agora mesmo. Você também pode executá-lo automaticamente quando estiver funcionando quando o computador começar a funcionar, então você pode escolher algumas opções lá. Mas sim, este é apenas um aplicativo simples agora que, como você pode ver, eu posso acender. Tudo está funcionando corretamente. Agora você também pode, por exemplo, carregar o conteúdo em algum lugar, como, por exemplo, hospedagem. E agora, quando vou ao site para o qual acabei de fazer o upload, você também pode instalá-lo, certo? Então, sim, isso agora está funcionando online. E esse é o objetivo, é claro, porque, bem, você precisa lembrar que aplicativo web progressivo é aplicativo na web, certo? Então você o carrega em algum lugar. E quando alguém o instala, porque temos um service worker em segundo plano, ele sincroniza o que temos aqui com o que o usuário Então, quando você atualiza, por exemplo , algo no site, ele também será atualizado no aplicativo que o usuário tem. E isso também é muito legal, né, porque ele vai atualizar automaticamente o conteúdo da pessoa que está usando seu aplicativo. Você não precisa que o usuário não precise instalá-lo manualmente, certo? Porque isso realmente vai verificar se algo mudou aqui no VS, então se ele estiver online, você vai pegar todo o conteúdo que mudou de forma incrível, não é? 119. Apresentação de um problema - criando o componente PWAInstallButton - (1): Olá, meu amigo. Temos um pequeno problema porque o botão de instalação nem sempre aparece em dispositivos móveis. E esse problema pode ser resolvido com nosso botão personalizado. Mas precisamos primeiro saber como detectar um evento que deve aparecer aqui. Mas por que não aparece? Porque a maioria das pessoas em dispositivos, como, por exemplo, Android, tem esse pop-up bloqueado, ok? Portanto, eles nem terão a chance de instalar seu aplicativo. Eles nem saberão da existência dela. É por isso que precisamos resolver isso. Mas como resolvemos algo assim? Precisamos criar um botão personalizado, por exemplo, como esse. Podemos mostrá-lo posteriormente em qualquer lugar do nosso aplicativo. Para ser honesto, poderíamos fazer isso no Pop, poderíamos fazer isso no canto superior esquerdo. Poderíamos mostrá-lo talvez três vezes, quatro vezes. Tudo depende de você onde você vai mostrar, certo? Mas o mais importante para nós é como mostrá-lo quando o aplicativo ainda não foi instalado no sistema? Essa é a primeira coisa, certo? E como podemos até mesmo detectá-lo, certo? Então, vamos fazer isso em reação. Então, vamos praticar o react nas próximas palestras e veremos um exemplo prático, realmente, totalmente prático de como criar algo interessante no react que, eu acho, raramente é mostrado em tutoriais Então eu criei a base do componente na pasta de componentes e a incluí aqui, certo? Então, isso é como a configuração do nosso aplicativo. E nas próximas palestras, vamos, tipo, melhorá-lo Está bem? Isso está nessa aula. Muito obrigado 120. Controlando a visibilidade do componente no React a partir da declaração de retorno (2): Olá, meu amigo. Vamos começar a criar esse componente a partir da possibilidade de mostrá-lo , exibi-lo ou ocultá-lo. Normalmente, faremos algo assim usando, por exemplo, CSS e talvez JavaScript para alterar a exibição do meio-dia para o blog ou talvez a visibilidade. Isso é o que você normalmente faria. Mas como estamos usando o react, podemos torná-lo totalmente diferente, e acho que vai ser muito legal quando você o ver. Então, para controlar a visibilidade, vamos usar um estado para isso, ok? Então, eu quero ser capaz de conectar a esse estado de exibição ou não exibição. Então, precisamos criar um estado, e eu proponho, tipo, chamá-lo, por exemplo, de mostrar botão de instalação, certo? E o método que vai mudar isso será chamado set show install pattern. E, por padrão, vamos definir o estado para quedas. Também precisamos importar nosso estado usado, mas como criamos uma condição dentro da declaração escrita? Bem, poderíamos usar, por exemplo, o operador Tenari, certo? Então funciona assim. Se algo for verdadeiro, então se for verdade, mostre isso. Caso contrário, mostre isso aqui, certo? E aqui, podemos usá-lo dessa forma que mostraremos o botão de instalação, eu gosto de true, depois mostraremos isso, caso contrário, mostraremos nulo E, como você pode ver, agora, quando mudamos falso para Verdadeiro, ele está aparecendo e agora não está sendo exibido. Isso é realmente como, você sabe, fazer dessa maneira, certo? Podemos colocar aqui o valor daqui, mas agora isso depende do estado do botão show install, e não o contrário. Podemos defini-lo como verdadeiro no início. Essa é uma forma de resolver esse problema, mas eu quero te mostrar mais uma porque pode ser confuso se alguém usar a outra forma, ok? Então, quando tomamos isso sob o comando, também podemos fazer dessa maneira. Vamos voltar Sempre pelo menos alguma coisa. Então, o fragmento de reação, certo? E agora, vamos fazer isso dessa maneira. Então, se mostrarmos o botão de instalação e a conjunção dele com esta parte, como faço para copiá-lo agora Bem, eu preciso escrevê-lo desde o início. Então, se a conjunção dele com o botão Instalar PWA for verdadeira, mostre-o, Caso contrário, não mostre. Olha, funciona. A questão é como? Porque muitas pessoas que sabem como a conjunção funciona sabem que, se ambas as expressões forem verdadeiras, corretas, o resultado será verdadeiro Se um deles for falso, o resultado é falso, certo? Mas muitos programadores não sabem disso se é a primeira afirmação, então se essa coisa for falsa, ok? Então, se a primeira afirmação for falsa, o resultado é falso, certo, mas isso também significa que não vou verificar outras afirmações. E por que isso acontece? Porque por que nos importaríamos com o que acontecerá depois? É otimização, certo? Porque a conjunção é sempre falsa quando pelo menos uma das coisas certas usadas em conjunto, certo, é Se uma coisa é falsa, não precisamos verificar outras coisas. Isso é otimização. E é por isso que isso está funcionando porque se tivermos aqui algo falso, certo, essa coisa não vai ser devolvida, certo? Mas se isso é verdade, então nós temos verdade. E, ao mesmo tempo, isso é verdade porque é um botão, certo? E o botão não é uma coisa falsa. Então, isso também vai voltar. Então isso vai ser executado. E é por isso que podemos ver agora aqui um botão como este, ok? Então eu sei que isso pode parecer confuso. Isso é um pouco mais legível, eu acho, mas realmente depende do seu gosto, ok? Use o que você quiser usar ou, você sabe, às vezes a IA vai, tipo, sugerir algo assim. Pelo menos vai entender o que está acontecendo aqui, certo? Depende do seu gosto. E acho que não há altos e baixos nos dois métodos Eu gosto desse porque talvez seja mais fácil ler para a maioria das pessoas, ok? E você tem um pouco mais de flexibilidade porque poderia expandir essas condições mais facilmente aqui. Então eu prefiro isso. Mas, como eu disse, cabe a você e eu só queria mostrar nesta palestra como criar uma condição dentro de uma declaração escrita com base no estado E como você pode ver, sim, você pode fazer isso com bastante facilidade. 121. Capturando e prevenindo eventos (3): Olá, meu amigo. Antes que o evento de instalação aconteça, há algo como antes do evento do prompt de instalação que você pode capturar, impedir que ele aconteça e, em seguida, criar sua solução personalizada para instalar o aplicativo PWA E para fazer isso, precisamos saber como capturar eventos do componente react. E se você quiser, lembre-se, fazer algumas coisas em seus eventos, por exemplo, é como o efeito site do seu aplicativo, certo? Ele não está conectado aos componentes. Não é como se você estivesse acessando este componente ou muitos outros, como as propriedades de outros componentes, você está acessando o evento que está na janela da página atual do seu navegador, por exemplo, o usuário está visitando a janela e você quer ouvir o que está acontecendo lá. Então você está usando o efeito de uso, ok? E quando o abrirmos, sim, vamos usar o comportamento padrão como esse. E isso é muito importante. Como falamos antes, essa parte é como a função de seta. Mas essa parte também é muito importante no nosso caso desta vez. Por que isso? Lembre-se que se você colocar aqui uma matriz, esse efeito de uso vai ser executado somente quando o componente, então essa coisa está montada, ok? Então, somente quando está montado. Tudo bem, agora podemos acessar nossa janela e adicionar até mesmo um ouvinte, para que possamos, tipo, você sabe, ouvir a janela, e então a solução aqui é muito boa Então, vamos usá-lo porque sim, esse é o evento que queremos adicionar para ouvir em nossa janela, que é antes do prompt de instalação, certo? E então, como você pode ver, temos aqui a função de seta, certo? E essa função de seta, como você pode ver, tem agora o que? Por padrão, automaticamente, todo evento tem uma propriedade de evento que agora você pode acessar para ver que tipo de evento é esse, bem, para fazer coisas com esse evento, certo? E como você pode ver, temos aqui um evento que evita o default, que é muito necessário neste caso, porque não queremos ter agora o comportamento padrão desse evento, certo? Então paramos e mostramos qual é o nosso botão. No entanto, temos um problema. Não é só que tínhamos aqui verdadeiro por padrão, mas essa coisa será executada pelo menos duas vezes sempre será executada pelo menos duas vezes porque aqui temos o modo estrito, e isso está aqui para, tipo, detectar se você não limpou depois de si mesmo. Porque quando esse botão for desmontado, você deve limpá-lo depois de fazer o que você fez na prática Isso deve ficar claro porque algo não precisa ficar claro, pois pode estar apenas mudando o título, por exemplo, da sua página. Mas caso você esteja adicionando live e listener, desta vez você os adicionou duas vezes. Sempre, ao terminar seu trabalho, você também precisará devolver o método de compensação Mas agora temos um problema porque, como você pode ver, isso é ruim porque sugeriu que você pudesse simplesmente removê-lo digitando novamente todas essas coisas aqui Não, não, não, não, precisamos remover a mesma função, certo? Então isso significa que precisamos, tipo, pegar todo esse conteúdo daqui, então isso. E em vez de invocá-la dessa forma, vamos criar uma função dentro dela, certo, que podemos chamar, por exemplo, handle porque diz que estamos manipulando algo antes do prompt de instalação, certo? E agora podemos defini-lo dentro efeito de uso porque ele estará no usado aqui, certo. E sim, essa definição está bem. Não, eu não posso usar o. Está tudo bem. Então, não precisávamos copiá-lo. Às vezes eu o amo por coisas assim, é como, bem, ok, então agora que o mudamos para cá por causa disso, podemos limpá-lo facilmente, certo? Como fizemos com os intervalos definidos, certo? Porque agora podemos digitar return, depois isso, depois isso, e podemos remover uma janela, remover até mesmo o ouvinte e esses. Desta vez, estamos removendo um método específico, certo? Aquele que realmente queremos, tipo, remover. Mas acho que fiz isso no lugar errado, deveria estar aqui, certo? Porque esse suporte encaracolado serve para isso. Agora saímos depois de nossas provas. Lembre-se de que isso é muito importante. Agora, vamos ver se funciona, pois você pode ver que nosso padrão não aparece. Aqui, se eu mudar para sim, ele apareceu. Então, algo não está funcionando corretamente, está tudo bem aqui. O problema é que isso não é invocado em nosso ambiente de hospedagem local, ok? Além disso, ele não será invocado quando o executarmos, como quando, por exemplo, executamos NPM run build E se usarmos o servidor if, ok? Então, se fizermos algo assim, abrir com if server, ele também não aparecerá. Por quê? Porque essa coisa será mostrada 100%, maioria das vezes somente quando alguém não tiver outro método de instalação. Porque, você sabe, se todo mundo no PC pudesse assistir esse evento e depois mostrar às pessoas algumas, você sabe, caixas grandes, seria uma experiência um pouco horrível hoje em dia, certo? Então é por isso que você pode, você sabe, quando você o executa agora, onde ele está? No meu smartphone, por exemplo. Então, acabei de enviar o conteúdo para o site. E como você pode ver agora, temos o botão Instalar aqui. Não podemos clicar nele e, você sabe, em duas startups porque ainda não o programamos, mas ele apareceu para a versão que acabei de fazer aqui, ok? Então, sim, embora seja falso aqui, mudamos para verdadeiro e evitamos o evento. Esse é o primeiro passo, certo? Mas precisamos fazer muito mais coisas para resolver o problema que temos. 122. Como resolver a Promessa do usuário solicitado a instalar o aplicativo PWA? (4): Olá, meu amigo. Reduzimos nosso efeito de notícias de eventos, certo? Mas também precisamos clicar agora no botão Mostrar Instalar quando o botão aparecer. Então, como fazemos isso? Para fazer isso, precisamos do quê? Ao clicar, certo? E vamos criar talvez uma função que chame o handle Install, clique, ok? E agora precisamos criá-lo aqui. Então, algo assim, manipule a instalação, clique, certo? E aqui podemos, tipo, processá-lo. Mas a questão é: como processamos o evento que realmente foi capturado aqui? Então, como você pode ver, evitamos o evento, mas, para ser sincero, não temos segurança em lugar nenhum, certo? Não temos como referenciar aqui o evento que foi, tipo, capturado neste lugar. Porque, você sabe, o evento que o clique curte está criando isso é um evento conectado ao clique, não à instalação. E isso significa que precisamos ir aqui e salvá-lo em algum lugar. Eu proponho criar um novo estado que será chamado de aviso adiado Portanto, isso sugerirá que estamos salvando a mensagem de aviso. Portanto, para a instalação, estamos adiando e salvando nesse estado específico Por padrão, não o temos, então ele será definido como nulo, certo? Mas aqui, agora podemos definir uma solicitação adiada para o evento Acabamos de salvar o evento daqui e dividi-lo no estado aqui, certo? OK. Isso significa que agora o botão de instalação é exibido. E podemos clicar nele. E aqui neste lugar, podemos usá-lo, certo? OK. Mas antes de usá-lo, precisamos verificar se existe um prompt adiado, certo Porque, bem, se alguém clicar no botão, alguma forma ele conseguiu fazer isso e ele não existe, não queremos invocar um prompt de instalação E como você pode ver, temos uma sugestão aqui porque o aviso adiado, na verdade, é um evento daqui, certo E esse evento tem um método especial , chamado prompt. E esse método perguntará ao usuário o que você viu antes. Então, quando alguém clica em “ Ei, eu quero instalar seu aplicativo”, certo, e aí fica tipo, você quer instalar o aplicativo, sim ou não, certo? Esse é o prompt programado nesse evento em que paramos, mas agora o invocamos Quando alguém clica no botão, você pode estar se perguntando: como eu sei que esse evento retorna algo assim Lembre-se de que tudo isso sempre é mostrado nos comentários. Então, por exemplo, aqui, como você pode ver, estou na documentação do prompt de instalação, e aqui temos algo como a tag prompt e, em seguida, diz, mostre um prompt perguntando ao usuário se ele deseja instalar a guia ou não. Agora, aqui está uma parte muito interessante. Temos aqui algo que esse método retorna: uma promessa que se resolve em um objeto que descreve a escolha do usuário quando ele foi solicitado a instalar o aplicativo O que isso significa? Isso significa que essa coisa será executada de forma síncrona. O que isso significa? Isso significa que podemos fazer outras coisas em nosso aplicativo enquanto ele está sendo executado em segundo plano. Mas precisamos agora especificar aqui que estamos aguardando o que será devolvido aqui, ok? E o que vai ser devolvido aqui chama Promise Object, ok? E como estamos esperando por isso, também precisamos especificar, como você viu aqui, você pode ver que essa função é realmente uma função assíncrona Então, agora, todas as partes posteriores são como não vamos ser executados até que a promessa volte com a resolução, certo? E aqui, como você pode ver, eles dizem que você pode, por exemplo, salvá-lo como resultado, certo? Além disso, há algo que chamamos de resultado, certo? OK. Então, agora podemos verificar se o usuário fez isso ou não, por exemplo, certo? Então, podemos salvá-lo, por exemplo, no resultado da escolha, algo assim, certo? E sim, agora podemos verificar se o resultado foi aceito. Se sim, então a mudança aqui está, obviamente, errada. Por quê? Porque não devemos acessá-lo diretamente, certo? Devemos fazer isso dessa maneira. Então, defina deferTPM como null, certo? OK. E ainda precisamos mostrar o botão? Não, não precisamos, certo? Caso contrário, simplesmente não podemos fazer nada, certo? Porque, para ser sincero, por que faríamos algo? Hum, ainda queremos realizar o evento. Caso alguém queira clicar no botão novamente. Então seria ótimo tê-lo em nosso estado, certo? E então não vamos removê-lo porque? E queremos mostrar o botão caso alguém queira clicar nele novamente, certo? Se você quisesse, poderia mostrar alguma coisa, trancar alguma coisa. Realmente depende da sua preferência. Mas para nós, acho que isso é suficiente. Agora podemos testar nosso aplicativo depois de enviá-lo, é claro, para a hospedagem, por exemplo, como você pode ver, agora instalei o aplicativo e, como você pode ver, ele está me perguntando em polonês se eu quero instalá-lo ou não Quando eu digo não, não significa que eu quero fazer isso desaparecer, certo? Agora eu posso decidir novamente. Agora, quando clico em Instalar, aplicativo, eu concordo com tudo. E agora eu tenho meu aplicativo instalado, diretamente no meu dispositivo, meu PC, ele está funcionando bem. Agora posso, por exemplo, fechá-lo. Depende de mim como isso funciona, certo? E agora, também, o que era. Quando eu vou aqui, como você pode ver, o fundo desapareceu, certo? Porque, bem, ele já foi instalado. Quando eu chegar aqui, posso simplesmente abrir meu aplicativo, ok? Porque sim, ele foi instalado no meu PC. O mais importante para nós é ver se está funcionando aqui, no nosso dispositivo que é o smartphone. Então, posso instalá-lo agora? Como você pode ver, sim, ele está me perguntando se eu quero instalá-lo. Então eu vou instalá-lo, certo? E isso criará automaticamente o ícone. Eu posso adicioná-lo à minha tela principal, certo? E como você pode ver, está na minha tela. Agora eu posso abri-lo. E isso abre como um aplicativo no Android, certo? Agora posso usá-lo, salvar o Estado e assim por diante, certo? Tudo está funcionando bem. 123. Como configurar o Express? Como configurar o backend do seu aplicativo?: Olá, meu amigo. Há muito tempo, o JavaScript podia ser usado em nossos navegadores da web. Mas como temos notas que já instalamos, você pode executar o JavaScript em qualquer lugar. Mas o que significa que ele pode ser executado em qualquer lugar? Isso significa que podemos fazê-lo funcionar como um servidor, por exemplo. A que isso leva? Isso significa que podemos ler arquivos do computador em que o servidor está instalado, por exemplo, certo? Significa que você pode trabalhar com bancos de dados. Isso significa que você pode processar solicitações como, por exemplo, logins, envio de formulários e tudo o que pode acontecer em segundo plano Ele não será mostrado para o usuário, certo? Porque normalmente, se você entrar no código-fonte de qualquer site, certo, você pode ver o JavaScript lá, certo? Mas o que vai rodar em JS. Portanto, se o servidor não tiver JS instalado, você poderá executar todas as coisas assim, por exemplo, criando um servidor que possa responder às coisas, certo, que possa, por exemplo, responder com texto simples e, por exemplo, dizer olá, certo ou qualquer outra coisa. Agora você pode fazer tudo isso em um único idioma. Então você não precisa aprender, por exemplo, ou BHB ou qualquer outro idioma, Você pode fazer tudo de dentro do node JS. Mas todas essas coisas , como você pode ver aqui, podem ser feitas usando o node JS básico. Mas as pessoas criaram muitos pacotes que são chamados de módulos de pacotes node JS, certo? E você pode usar o trabalho feito por outras pessoas, para não recriar a roda, para não criar tudo do zero E como você pode ver, por exemplo, temos algo chamado Express e, como o nome sugere, é uma forma expressa de criar uma estrutura web, portanto, de criar servidores e gerenciá-los, certo? E, como você pode ver, muitas pessoas baixam cerca de 33 milhões por semana. Então, sim, essa é uma forma muito popular de criar servidores. E eu proponho usar o Express em vez de, tipo, um JS vanilia note e gosto de recriar tudo do zero, Porque não é assim que a maioria das pessoas trabalha. Então, como usamos algo chamado Express para configurar e criar um servidor em nosso aplicativo. Agora, precisamos decidir se queremos criar nosso servidor independentemente de nossa frente e de nosso desenvolvimento. Porque note que aqui temos um projeto com nossa reação, e bem, tudo aqui é feito de frente, certo? Nada será solicitado do servidor aqui. E, para ser sincero, é uma boa ideia criar uma nova pasta, por exemplo, servidor, onde você vai armazenar todos os arquivos relacionados ao servidor, ok? E dentro dele, vamos criar um arquivo que você pode chamar do que quiser. Pode ser servidor, pode ser JS de ponto de índice. Vou chamá-lo de servidor JS, onde vou criar objetos expressos onde vou usá-lo aqui dentro, certo? Mas antes de fazer isso, precisamos instalar o Express. Para fazer isso, vamos criar um novo terminal, e isso é muito importante. Precisamos ir para a pasta do servidor, ok? E isso agora é importante. Vamos inicializar um novo pacote que Jason, ok? Porque teremos um pacote Jason diferente para servidor e um encaminhamento diferente para nosso aplicativo no front-end Está bem? E agora, aqui dentro, vamos instalar o Express. E, como você pode ver, agora temos diferentes módulos de nós aqui, certo? E agora podemos executar nosso servidor. Claro, ele não faz nada agora, mas podemos entrar aqui e digitar NPM run, e como você pode ver start, vai rodar isso, certo? Então, vamos começar. E, como você pode ver, iniciamos o servidor de nós JS, mas nada aconteceu aqui. Então, você sabe, nós tínhamos console logado aqui, por exemplo, assim Como você pode ver, o inferno também no servidor dot js. Então agora podemos, tipo, fazer coisas aqui dentro. Que tipo de coisa podemos fazer? Bem, acho que é uma boa ideia usar o código padrão daqui, ok? E o que ele faz é como exigir, então somos como importar tudo do Express, ok? Então, quando eu pulo aqui, como você pode ver, ele até diz: Ei, importe isso e depois, você precisa invocar o Express E essa coisa cria o aplicativo Express, certo? E a partir disso, agora você pode acessar vários métodos, certo? Quando eu faço algo assim, como você pode ver, existem muitos métodos, e um desses métodos é chamado get Get é uma função que agora está esperando neste lugar específico, ok, em nosso servidor que executamos. Então, está na pasta principal e está esperando o quê? Então você pode ver aqui que temos uma função, certo? Aqui temos uma função, que é uma função anônima, e está aguardando solicitação, certo? E quando alguém coloca algo, é aqui que o valor estará quando alguém tentar enviar algo para esse lugar específico, certo? Então, para o local principal do nosso aplicativo. E onde fica esse lugar? Você executa o servidor, desta vez, como você pode ver, algo está acontecendo, eu não parei. Quando eu entro aqui e digito Local host 3.000, percebo que temos aqui uma palavra de olá É porque acessamos esse local principal a partir do nosso servidor, que fica na porta 3.000, ok? E enviamos como resposta, S significa solicitação é solicitação, o que vem até mim e RS é de resposta, então o que eu envio, certo? Então eu envio uma palavra de olá para o navegador da web, certo? E agora, quando estamos aqui, como você pode ver, temos uma resposta de olá. Então esse é o valor que virá quando alguém chegar à rota principal. Se eu tivesse configurado aqui, por exemplo, API, que é a coisa mais comum a se fazer. E, por exemplo, digamos que eu chamaria isso de olá. E agora, quando eu atualizo aqui, como você pode ver, nada mudou. Por que isso? Porque se você mudar alguma coisa aqui neste lugar, agora você precisa encerrar e executar seu servidor novamente. Em breve mostrarei uma maneira de anotar para que você não precise fazer isso sempre que for, certo? Mas agora, como você pode ver, temos que entrar na API hello e depois temos a palavra hello, certo? Então, isso é como um endpoint, nome do endpoint para o seu servidor obter resposta Então, quando alguém vai aqui, a coisa t será enviada como resposta. Isso parece um monte de coisas para fazer, certo? E aqui também é muito importante que você precise ouvir, ok? O aplicativo deve ouvir. Então, é como iniciar seu servidor e ouvir esse esporte Caso contrário, seu servidor não funcionará, ok? É como ouvir qualquer alteração na solicitação de resposta recebida, certo? E bem, há muito, muito mais do que isso, certo? Mas, por enquanto, essa é a maneira mais simples de configurar o Express em seu projeto. Você pode então, por exemplo, solicitar coisas em seu servidor de onde. Por exemplo, quando criarmos um componente posteriormente e reagirmos, solicitaremos dados desse local, certo, e os obteremos como resposta. Isso é super poderoso porque depois, você vai bem, aprende, por exemplo, como fazer solicitações para, por exemplo, bancos de dados, certo? Ou você pode aprender como, por exemplo, fazer upload de arquivos no servidor em muitas e outras coisas. Então, isso é super poderoso porque observe que configurá-lo não era como levar muito tempo, certo? Mas de alguma forma conseguimos configurar o servidor em JavaScript sem precisar aprender outra linguagem de programação, certo? E podemos então testar nosso aplicativo localmente aqui, certo, em nossa máquina sem precisar, sei lá, comprar uma hospedagem ou nos conectar a algum tipo de hospedagem. Assim, podemos eliminar cada coisa de medo aqui, localmente. 124. nodemon — como monitorar automaticamente as mudanças no servidor: Não usamos o protom Dan, algumas delas chica Alexia TipocarcvPop Stavi Serv E O D Bractavan Zap tan Dera, Ruchi Povich Pomtum Telco tri chica Alexia TipocarcvPop Stavi Serv E O D Bractavan Zap tan Dera, Ruchi Povich Pomtum Telco tri JavaScript também. Que é Dot pa JavaScript Monabv Telco VannVpegnarka. E, problemas de script Java e Botagetib em um pedaço de feixe Rug Na Powsmenzak Novi, bateria Coso Napiquadre Gemma muito apertada, Greis marcha para levar o JavaScript até o Morse pod gli Pravda destron InternetOvo acre, mudança de momento para o Morse pod gli Pravda destron Tam PovizMPTVon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para levar Kuchavanap quad Povimginwach, elemento dam Powtmen para Niko zidov por sua jogada na Internet de MogobGaB.G. levar Kuchavanap quad Povimginwach, elemento dam Powtmen para Niko zidov por sua jogada na Internet de MogobGaB.G. Greis marcha para levar o JavaScript até o Morse pod gli Pravda destron InternetOvo acre, mudança de momento para Tam PovizMPTVon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para levar Kuchavanap quad Povimginwach, elemento dam Powtmen para Niko zidov por sua jogada na Internet de MogobGaB.G. Relógio Avka protea petvich Mac Greis marcha para levar o JavaScript até o Morse pod gli Pravda destron InternetOvo acre, mudança de momento para Tam PovizMPTVon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para levar Kuchavanap quad Povimginwach, elemento dam Powtmen para Niko zidov por sua jogada na Internet de MogobGaB.G. Relógio Avka protea petvich Mac Greis marcha para levar o JavaScript até o Morse pod gli Pravda destron InternetOvo acre, mudança de momento para Tam PovizMPTVon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para levar Kuchavanap quad Povimginwach, elemento dam Powtmen para Niko zidov por sua jogada na Internet de MogobGaB.G. Relógio Avka protea petvich Mac Greis marcha para levar o JavaScript até o Morse pod gli Pravda destron InternetOvo acre, mudança de momento para Tam PovizMPTVon mesova Aga Mona Gove Pod glo Miss Javascript Novinotach Zack para levar Kuchavanap quad Povimginwach, elemento dam Powtmen para Niko zidov por sua jogada na Internet de MogobGaB.G. Relógio Avka protea petvich Mac Tenho PovidPanch considerando que vkovi é a segurança da Agovta. Moriscovino, oppo orgo Povoch quando você está, nós resolvemos o problema. E, La tega MavouuHomon, Java Script to FrangsPomzo Nod JS, AR ten Java Script enga, Ya BuruHomon, Postronia, ag Ben, Topovigi era Sonic Ni Benji Vigo, So tase JE Nod JSP DaFuhomTabodovisco Romina at called tego Java Script to Congrate nod res, Mamo AR ten Java Script enga, Ya BuruHomon, Postronia, ag Ben, Topovigi era Sonic Ni Benji Vigo, So tase JE Nod JSP DaFuhomTabodovisco Romina at called tego Java Script to Congrate nod res, vo Saviana Servera. vo Saviana Servera. vo Saviana Servera. método elegante Eleanic to the Pos val em Taco Beach Natoiamus, a mensagem no Ektorj OctreePreo PostAertepre, Framework e reza mo Zanis StallovchPoz valac Bardo ShipCopostavic, médica atendente Gomorna Zadach Tax van request on Povich prepromove e reza mo Zanis StallovchPoz valac Bardo ShipCopostavic, médica atendente Gomorna Zadach Tax van request on Povich prepromove StallovchPoz O método elegante Eleanic to the Pos val em Taco Beach Natoiamus, a mensagem no Ektorj OctreePreo PostAertepre, Framework e reza mo Zanis StallovchPoz valac Bardo ShipCopostavic, médica atendente Gomorna Zadach Tax van request on Povich prepromove a resposta. O método elegante Eleanic to the Pos val em Taco Beach Natoiamus, a mensagem no Ektorj OctreePreo PostAertepre, Framework e reza mo Zanis StallovchPoz valac Bardo ShipCopostavic, médica atendente Gomorna Zadach Tax van request on Povich prepromove a resposta. Iac é um Migiqu ZadanPetana D Baz Dane tag E. M mencionou Dostan RodovichtVuci taki server Atmos mencionou Sobovic como motor dianteiro. Em Tem to too Prosto V Io Terasveenjob ten DestovatGJ Yak, Al Nevan to Benge MuktoobChespomoz e Frisco, Java Script, dois, Rucho Negoyenzka , programa um, DobaTB Butaki Stemco, Natomi Yak Motake em StallovaTk Minha mãe costumava dizer que o projeto Mammospotnt aka Iteras sob had dot Cv, MT Terasveenjob ten DestovatGJ Yak, Al Nevan to Benge MuktoobChespomoz e Frisco, Java Script, dois, Rucho Negoyenzka, programa um, DobaTB Butaki Stemco, Natomi Yak Motake em StallovaTk Minha mãe costumava dizer que o projeto Mammospotnt aka Iteras sob had dot Cv, MT tai servidor tur Bengio Povionannal astronomy Internet. Terasveenjob ten DestovatGJ Yak, Al Nevan to Benge MuktoobChespomoz e Frisco, Java Script, dois, Rucho Negoyenzka, programa um, DobaTB Butaki Stemco, Natomi Yak Motake em StallovaTk Minha mãe costumava dizer que o projeto Mammospotnt aka Iteras sob had dot Cv, MT tai servidor tur Bengio Povionannal astronomy Internet. Terasveenjob ten DestovatGJ Yak, Al Nevan to Benge MuktoobChespomoz e Frisco, Java Script, dois, Rucho Negoyenzka, programa um, DobaTB Butaki Stemco, Natomi Yak Motake em StallovaTk Minha mãe costumava dizer que o projeto Mammospotnt aka Iteras sob had dot Cv, MT tai servidor tur Bengio Povionannal astronomy Internet. É Warto Zav Mimo Frisco TrojerJGTM change front end ou back e dvm Tosonsagabd change front Dobre aqui o Gur ASV, então seja um servidor. Latch, vá para o servidor Postavit de Takoba asi Bisha, então seja ViniMhsting Sakovic completando Jinja, Is ViniMhsting Sakovic completando Jinja, Is Miso Povionzans e freshbb ou razaro MsagompSojov. Consegui que Fabio drasu assumisse o servidor de pastas. Não é uma versão de um servidor PlqueaSnaw gob Rufer, Amo BisbNazvat obteve índice, NasvaGSB Dupaed e VaFisco not Toys plaque, comece com a renúncia do Poposto Servera, certo? E a versão inicial de Nv é a Poposu Java Scription BotaKavNPSA Poposto Java inscrição Poposu Java Scription BotaKavNPSA Poposto Java chamada Sero. Não, Teco como Musim StovnaExpress, na verdade, vá em TuattMam instruir Vastonagmkan verdade O Naan Govinvoldeja retirou o servidor, Sams Jon. Para Natacha disse que a mudança de diretório, sem servidor, E, Tras Robia MED, Tras Robia MED, eixo do pacote de novelas de Betta Zant Jason Todd Soh Potobe Down em SartovPoglund, Nato Rho não é necessário cortar o servidor JS no momento, Nato Rho não é certo? ZaniMntoa Zobeme halbum Abi Zi Install of Valley PM Install Express, hill Washington mood Turi Tagak movie Moss Stallovat A nuTagn nibs PavodoExpress, Tagak movie Moss Stallovat A nuTagn Nib Povdomonazv começando a usar New Tag. Boo protótipos de tortas e eu aprendi algumas frases feias de BB Sobi, como: “Maps Toto Koji tem um Ginia nasal”. Era tack aza em vez de Vance tag Expresaemgas, então ruhom. Zanni Mednacto Robi Jam Chip kaza, Jeff Packet, Jason, Mama Tuteo e o roteiro de Dan Razu, starto . Day I go Ru homie, the run, start tag to RuHaikana notes server Jose Benito, start tag to RuHaikana notes Bonita mama, LismTutivpisali test, naphqotaGTSO shifting moment, esta epsonam test, tacnaPravda, taco mendattiuu hamianaMtt get. taco mendattiuu hamianaMtt get. Em eras, VakispoutCmaja, mojo Nash Piers server post Savage, Naso hivowan in for Martin. Naso hivowan in for Martin. Escopo e artigos tutto, então ele é AstronataPodna, mas é Eu nos digo um apocol Bichozuei. Predevkin Mushitaabeno, Zain portovag Zain portovag exigiu a importação de ana para iniciar o JavaScript. E Menke um importador Express dam para assumir controle do livro Mspreopctor Ruby on attack, A express, esto, posto biblioteca, Framework, Tae poteng, Java Scripture, Tuias ZazapisanePress, tomando o controle do livro Mspreopctor Ruby on attack, A express, esto, posto biblioteca, Framework, Tae poteng, Java Scripture, Tuias ZazapisanePress, tomando Nasvia. M Mme Mivras VivoAnaFunti, TuratFogna sum applica ttevges, topo chi cria um aplicativo expresso . A função expressa para o expresso FungianiBarge, OtraSueporana Nvigifuntia Gura Prostopnaotazu, Yactas require tooty significa muito funcional toms vivoaigdu vivoazaupm Bica NovemBtaue mammoivo so Dos tanya Dove método, Yactas require tooty significa muito funcional toms vivoaigdu vivoazaupm Bica NovemBtaue mammoivo so Dos tanya tag, morse orista histórica. tag, morse orista histórica. tag, morse orista histórica. No entanto, não é um método variado, Tony Narachi Mota, telco ta, ta, metodanazvahe, ouça, Nasuhue Ios VarnanaPort, Trina Poproto stu, numer Tuthons, AgiotourUhm erato Run start of moment evade the Otra gon Darky Tank. gon Darky Tank. Bisha, o anfitrião local Vu cropper Titi Sons tag, Temi Benavaonkvji, KovkFreedom Temi E, Tras, pegue o Yazobi Run comece a marcar Sabo tag, vinto SobiaVuhma TheASPam não consegue pegar Oggi oto Tag Betago e Pinta, TagovSatPottavo, Vin do Stashm não consegue obter . Servidores Epcot Ruchi Terres touch TerpopStu StronetaBore Terra e em Vuci acecho, pone va, Nasser Potnia aaj automata, stats minion Naser jaantrig controlado por Gareg Yakovontrig é novo GouruhMage Takapalndopi de Nate Lexi, Samara é olá, palavra de olá . . Um TegopanVvig touch Virgina GovnFolder, aga DominoVrot Takavan, Coin Nach Strano Internet ove, HeliPopsto vac, anfitrião local, SportAmti Johnson, tag, também, chaube Abs ru HoomFung sectora, Funko AnoMvTag I a funciamvazu tomato, matzo TakeGoyagreg GovnFolder, aga DominoVrot Takavan, Coin Nach Strano Internet ove, HeliPopsto vac, anfitrião local, SportAmti Johnson, tag, também, chaube Abs ru HoomFung sectora, Funko AnoMvTag I a funciamvazu tomato, Funko AnoMvTag I a funciamvazu . . . Solicite pimenta. Tosa sana dome, tag, tootso wanomi ERS, chili response, Zangiskgohi Ot Povich, Zangiskgohi Itsaavvobctic to the mash odazido deposita Sistani swan a pedido de Bengialgtgov. RS é obipvatcagako Vodka, uma substância tegoctoadtauc dotegova to tines slash on tag A movie Ot Povism chilis, responda, envie uma substância tegoctoadtauc dotegova to tines slash on tag A movie Ot Povism chilis, responda, envie visualmente o prêmio atm visa emo hell. uma substância tegoctoadtauc dotegova to tines slash on tag A movie Ot Povism chilis, responda, envie visualmente o prêmio atm visa emo hell. Significa moment g the quad T significa então tag topo avi mush hell award Normalmente Vic gini squad two, Toni Mosa tempo Bach, Bona server no Seguia tax vanegoeEnd point Appy Vds toi, a ziv endpoint app endpoints, coins of punk Apis, interface de programação de aplicativos Toni Mosa tempo Bach, Bona server no Seguia tax vanegoeEnd point Appy Vds toi, a ziv endpoint app endpoints, coins of punk Apis, interface de programação de aplicativos. E, chili também, um programa 3D da interface do aplicativo Vana, Yato osuiumtens Cash, pegue um limão, Benjamin é uma porcaria. Dos Nachit arc Zaogovccqt vivAgmelatak, TritoZgbaka sos soposvala concretinm e punch puncta, Puncten coach concrete no chintal chamado hello word, Nonias min depois chamado slash API ipofsvh Hello, tens pouttenPonchs em Vontri TritoZgbaka sos soposvala concretinm e punch puncta, Puncten coach concrete no chintal chamado hello word, Nonias min depois chamado slash API ipofsvh Hello, controlado por mushi Vontri wont novo server, AquideraPotem e Pointes Raza Nato, olá palavra controlado por mushi Vontri wont novo server, AquideraPotem e Pointes Raza Nato . . . Natoias two Net stuck, botego me SaoperTunt Mama end point, At movie botego me SaoperTunt Mama end point, At movie a Sochi must start. Se dez posses Mumtutaaogova, Mama Naproqa fez um Baza done Mojamzapetch, telegencic trouxe, expulsa, Ovija Shriscot Benji Jiao postronia, ServanaGong Benjamitepu ego movies Server crop care, Tony sh Sotojvtron Benjamb of badge, não Oh, sim, tilco la ebitag. of badge, não Oh, sim, tilco la ebitag. of badge, não Oh, sim, tilco la ebitag. O chamado Vc tutee Jet é seguro. Côte de ladrilho sujeito ao concreto Amado Taggo PlicunaSererga Normalmente sirva Maza em vez de nego no Ja, Tag, E Maza em vez de van PakunkiPovinzan, aja de forma expressa, não no momento sim Sania, tachy Whim, pegue toga Opszgt 101010 berço. Eu Benjamin e PoinotPhtava Jackie Pitana atacam, mamãe empurra Arequadvb afirma empatar mamãe Se a senhora Rubi Jaquish, componente de Macchu Kuri Benji Peto ou Jaco Zavarto Server, atacarem, ou Jaco Rana também, serve Visa Povich. Você pode Mami yo Vivia Trich, quadriciclo taka para Benji Michel Toto Midas Doja Maras Dov Sochi Benji Gabo Hippo Rancho, Trisoviukovk, Yagi TotogftLatrite Goshutkovnk Vigita. Mora Mamttvibo Mora Scotosmava Cada filho. Bps faja, postronia Server Atom Watch plata Se Sisco The GF deixar o próximo ataque do Govge, Tomah jag. Mas você fechou uma engrenagem no Bimoostroia Wahab Server. Oh, você sabe, se Soumya me contar um pouco sobre o servidor de macarrão Vlisima Então, eu sou a pasta Prost, em vez de alisma Espresso ou Expressa Estabelecimento tac Na Pravda dazu com Doctor Oi Totato estrela chion the macarrão vinheta goo, Pirago e aponte para taxe vana goo tag para levantar o Guvangi Sion raza razo Oi Totato estrela chion the macarrão vinheta goo, Pirago e aponte para taxe vana goo tag para levantar o Guvangi Sion raza razo hello. Toto, Temin NostiKostana, Stego Vasari, Totoviti, Morpui, Ros Viagklena Zach tag, NatoiaTaxvan fundamen tag PostavdmSaovic na Sipko, Iteratikova snap Neglect, tcheco protube Ros via not ou Korsstana NatoiaTaxvan fundamen tag PostavdmSaovic na Sipko, Iteratikova Segoe Panama. Segoe Panama. 125. Buscando dados do React Component do Express: Olá, meu amigo. Hoje, mostrarei como se comunicar da frente para trás, então vamos enviar uma solicitação para algum tipo de resposta. Mas como fazemos essas coisas? Primeiramente, observe que quando executamos nosso servidor de desenvolvimento, nosso host local está na porta 5173, certo E quando eu abro, como você pode ver, podemos ver o resultado do que quer que esteja aqui, certo? Quando mudarmos alguma coisa aqui, ela será representada aqui. OK. E isso também significa que agora precisamos executar o servidor, então mudar aqui e executar servidor de desenvolvimento também aqui, certo? OK. Agora podemos nos conectar e conversar uns com os outros. Mas como fazemos essas coisas? Eu proponho, vamos criar um componente que vamos chamar, por exemplo, hello from Express, algo assim. E vamos criar um componente de função usando o atalho que eu ainda não mostrei É a partir de entradas de reações simples. E quando você faz algo assim, observe que temos instantaneamente o componente de função que podemos chamar de olá do Express, por exemplo, certo? E aqui vamos voltar mais tarde, algo como olá do Express. Mas essa mensagem deve vir do servidor, certo? Não a partir de agora, quando simplesmente digitamos manualmente. Mas sempre tente fazer as coisas como eu faço agora porque, na verdade, quando você está depurando algo, é bom ver alguma coisa quando você está depurando algo, é bom ver alguma coisa, certo? Ok, está conectado. Tudo está funcionando bem. Acabei de terminar uma etapa. Eu posso ir mais longe. Ok, e agora? Agora, precisamos de alguma forma buscar a mensagem do nosso servidor, certo? Mas como fazemos isso? Para buscar algo do servidor, vamos usar o efeito de uso, ok? Porque isso é algo que será executado uma vez quando o componente for montado. Quando você envia aqui como segundo argumento, o que significa colchetes sem nada Isso será executado apenas uma vez quando estivermos montando nosso componente, certo? Então, isso é executado apenas uma vez. Como você pode ver, olá do Express, duas vezes desta vez, mas duas vezes o quê? Porque estamos usando o modo estrito, certo? Mas, ei, isso é executado uma vez quando o componente é montado. OK. E agora precisamos buscar algo, mas como podemos buscar coisas do servidor Bem, para fazer isso, vamos criar uma função, ok, vamos chamar fetch message, ok? E, como você pode ver, isso sugere que essa função deve ser assíncrona E sim, essa função deveria ser assim porque você não quer esperar pela resposta do servidor, certo? Depois de definirmos a função, também precisamos invocá-la Então, vamos invocá-lo aqui agora. E aqui está o corpo da função que será invocada mais tarde aqui, certo? E lembre-se, essa é uma função síncrona porque vamos aguardar a resposta do servidor, certo E isso deve ser feito como uma sincronia, porque você não quer impedir seu aplicativo responda quando algo vai ser como sair Porque, você sabe, normalmente, às vezes, coisas assim podem levar tempo, por exemplo, o servidor pode não responder, por exemplo, onde você envia a mensagem, e você não quer que o usuário do seu site ou aplicativo simplesmente pare de seu site ou aplicativo fazer qualquer coisa no seu Você quer ver isso nos bastidores em segundo plano, certo? OK. E para buscar algo, usamos a função fetch, ok E na função fetch, digitamos o que queremos buscar Como você pode ver, o nome do nosso endpoint é o mesmo que enviamos aqui Então dizemos: Ei, pegue alguma coisa daqui. Não especificamos o quê porque, bem, agora estamos fazendo a solicitação mais simples possível, certo? Então, como você pode ver, a solicitação agora é como se não tivéssemos objetos aqui porque ainda não enviamos nada aqui, certo? Não especificamos exatamente o que queríamos, mas fizemos algo como, Ei, pegue algo neste lugar, ok? E agora vamos aguardar a resposta neste local Está bem? Isso significa que o que vier depois não será executado até obtermos a resposta deste local. E que tipo de resposta está aqui? Como você pode ver, é só texto, certo? Podemos digitar aqui hello word do servidor expresso dot JS, por exemplo, certo? Isso é o que queremos ver aqui como um texto. Então, vamos criar uma variável que chamaremos de texto e agora vamos esperar que a resposta seja processada no texto, com o método text da resposta da API. OK. E agora, quando temos isso, sim, podemos registrar isso no console. Como se pudéssemos ver o que está lá dentro. E, como você pode ver, o registro do nosso console está assim. Então, algo está errado porque, bem, pedimos isso, mas recebemos uma página inteira. O que está errado? Bem, o problema agora é que estamos em partes diferentes. Observe que aqui está 5173, e aqui está um, este está em Não há nada de errado nisso , porque você deveria estar em portas diferentes porque, bem, estamos tentando nos comunicar do front para o back-end, mas temos um problema porque a conexão de portas diferentes, mesmo se você estiver no mesmo domínio, bem, isso não é permitido porque estamos nos conectando de origens diferentes. Isso é chamado de algo assim. Mas, felizmente para nós, convide, podemos configurar algo assim, que se chama proxy. E isso é como um intermediário na rede: um proxy encaminha uma solicitação de um servidor para outro em nome do cliente porque, bem, estamos agora no mesmo ritmo de servidor, certo? agora no mesmo ritmo de servidor Estamos na mesma origem. Então, quando nosso front-end faz uma solicitação para o proxy, algo assim, o proxy é como apenas encaminhar a solicitação para o nosso back-end, que especificamos aqui com essa porta, certo E faz parecer que a solicitação vem de si mesma. Então, é como ajudar a contornar as restrições impostas por algo chamado regras de compartilhamento de recursos de origem cruzada, ok Sei que talvez seja um tópico um pouco avançado, mas por enquanto, quando você está apenas aprendendo e desenvolvendo, você sabe, servidor. O mais importante para você é que você precise configurar um proxy como esse, que entrará instantaneamente host local, na porta 3.000 e na API, e Parece que veio, tipo, da mesma origem, certo? E por causa disso, agora, quando vamos aqui e atualizamos, como você pode ver, quando vamos ao console, como você pode ver, temos a palavra hello do servidor expresso dot JS duas vezes E bem, agora só registramos isso no console, mas poderíamos, por exemplo, fazer algo assim. Vamos usar o estado, certo? Talvez você possa usar o State SNIPA desta vez. E vamos chamá-lo, por exemplo, de quê? Temos aqui uma mensagem, certo? Então, vamos chamá-lo de mensagem. E o valor padrão, talvez não seja nada. E aqui vamos apresentar a mensagem buscada, certo? Então, por padrão, não é nada, mas quando obtemos o valor, você quer alterá-lo para o texto desta forma. E agora, quando atualizamos, como você pode ver hello word do servidor expresso dot JS, porque veio daqui, certo? Então, temos o que queríamos, e isso é muito legal porque acessamos aqui nosso servidor. Se alterarmos o valor aqui, por exemplo, para isso, hello world, e agora, quando atualizarmos aqui, como você pode ver, o valor também mudará porque agora estamos enviando algo diferente do nosso Observe que quando abrimos aqui nossa rede e atualizamos novamente, quando vamos aqui, temos algo como resposta, como você pode ver, esse é o valor que respondemos do nosso servidor, certo? E nós o acessamos solicitando uma URL como essa. E o engraçado é que percebemos que estamos solicitando realmente o que é 5173 E mesmo que estejamos solicitando essa coisa, porque temos o proxy dela, ela sabe que sempre que estivermos tentando acessar o endpoint da API com alguma coisa depois, isso realmente solicitará o valor dessa porta aqui, ok? Eu sei que parece um pouco exagerado, mas é assim que você o configura se quiser tê-lo em portas diferentes e, você sabe, você quer, tipo, verificar se há alterações no servidor e, ao mesmo tempo, verificar as alterações no vite, certo? Porque você quer ver, tipo, instantaneamente os resultados provenientes das alterações do front-end e, ao mesmo tempo, o bug termina. Você tem duas coisas em execução e verificando se há alterações. Mas agora, sim, estamos conectados. Então, você sabe, poderíamos buscar o valor e alterar, por exemplo, o texto Mas é claro que isso é apenas o básico do direito de expressão. Acabamos de acessar Fetched. Mudamos a resposta ao texto, certo? E sim, agora podemos mostrar o 126. Mensagem de "Carregamento" ao buscar dados: Olá, meu amigo. Hoje vou mostrar como criar uma mensagem de carregamento enquanto nossa resposta do servidor está carregando. Porque quando o atualizamos, percebemos que é como entrar no nosso site Está apenas aparecendo. Mas coisas como buscar podem levar tempo. Depende de quantas pessoas estão usando seu site. Depende da distância do seu servidor, quantas coisas são feitas ao mesmo tempo, certo? É uma boa ideia mostrar algum tipo de mensagem de carregamento ao usuário para melhorar a experiência do usuário. Mas como fazemos essas coisas? Observe que o valor padrão, o estado de uso, é uma string vazia, e a string vazia é, na verdade semelhante a uma declaração condicional como essa, não é verdade, certo? Então, podemos fazer algo assim. Se a mensagem de busca for verdadeira, mostre a mensagem de busca. Caso contrário, mostre, por exemplo, o carregamento de texto. Agora, quando me refiro, como você pode ver, vimos uma segunda tela de carregamento em segundo plano, certo? Mas talvez façamos com que esse efeito de uso leve algum tempo para que possamos vê-lo claramente. Então, quando eu uso o tempo limite definido, posso fazer algo como: Ok, eu quero definir a mensagem de busca, mas em, por exemplo, 1,5 segundos, certo? E agora, quando eu atualizo, como você pode ver, temos carregamento para quê? 1,5 segundos, e então podemos ver a mensagem. Então é assim que você cria uma mensagem simples, como carregar. Mas poderíamos melhorá-lo talvez com algum tipo de biblioteca adicional, você sabe , e eu mostrarei como fazer isso na próxima palestra 127. React Spinner - vamos 'girar' a mensagem de carregamento: Olá, meu amigo. Existem duas bibliotecas usadas para at que são muito populares para carregar dados, e uma delas é a Racked Spinners, ok Carregadores. E como você pode ver, você pode, por exemplo, fazer algo assim ou usar giradores em rack Parece que sim, e realmente usar essa coisa é bem simples. Porque tudo o que você precisa fazer é instalar o pacote e usar o componente. Então, por exemplo, digamos que você queira usar essa coisa. Perceba que o legal desse site é que você pode mudar a cor aqui, por exemplo, aqui, você pode alterar o tamanho de maior para menor e ver como ele ficará antes mesmo de instalá-lo, certo? Assim, você pode verificar o carregador com antecedência antes de usá-lo. Mas nesta palestra, usaremos os giradores de tapetes deste local para instalá-los, sempre comece e, como você pode ver, para instalá-los, tudo o que precisamos fazer é fazer algo assim Então, precisamos entrar em nosso projeto, abrir o console e digitar NPM install Depois de instalá-lo, tudo o que você precisa fazer é importar o que lhe interessa. No nosso caso, estamos interessados em linhas rotativas, então tudo o que precisamos fazer é fazer algo assim Podemos copiar isso para o nosso projeto aqui. Mas em vez de áudio, vamos importar linhas rotativas como essa, certo? E agora precisamos usá-lo apenas neste local em vez de carregar texto. Então, para usá-lo, aqui temos um exemplo acima, certo? Se você quiser usar exatamente o que está aqui em cima, tudo o que precisamos fazer é apenas acelerar até aqui, certo? E quando vamos aqui e quando nos refrescamos, como você pode ver, temos o que? Nossa tela de carregamento. Mas você pode estar se perguntando por que a cor é verde quando a temos aqui para cinza. O engraçado é que quando você vai até aqui, percebe que eles disseram que os adereços aqui, como a cor do traço, estão se ajustando, a cor das linhas giratórias, mas eles usam a cor Muito estranho, porque essa é uma implementação que eles usam cores, mas deveriam usar cores arremessadas Então, é só voltar aqui, mas você pode corrigi-lo, basta alterar a propriedade para o nome próprio. E agora, quando o atualizamos, você pode ver que o cinza pode mudar a cor para o que quiser Você pode mudar o tamanho, certo? Se você quiser que seja menor, você pode torná-lo menor, certo? Depende de você como ficará com essas configurações. Muito legal, né, porque você não precisava, tipo, reinventar a roda Não precisávamos, você sabe, fazer isso em CSS, talvez animação, da maneira que você escolher. Agora temos algum tipo de linha rotativa em vez de, você sabe, carregar, o que é estranho, 128. EXERCÍCIO: React Toastify - notificando o usuário como um profissional: Olá, meu amigo. Hoje, falaremos sobre o pacote chamado React Tastify, que mostra torradas Eu sei que o nome parece estranho, mas torradas são apenas mensagens simples como a que Você também pode ir à demonstração da documentação, e aqui você pode, você sabe, verificar como cada coisa pode aparecer, como você pode, você sabe, mudar também. O tipo disso. Portanto, pode ser o aviso, pode ser o erro, o padrão. Então, todas as coisas aqui, como você pode ver, são muito fáceis de personalizar. Você pode ver facilmente como usá-lo, certo? E tudo o que você precisa fazer é copiar e colar em seu projeto, certo? E em nossa situação, queremos, tipo, brindar dentro de nossa busca Como fazemos isso? Bem, primeiro, precisamos fazer um recipiente para torradas, ok? E bem, vamos usar o único contêiner que temos aqui, mas antes disso, precisamos instalá-lo também, certo? Então, para instalá-lo, precisamos digitar isso, certo? Então, vamos aqui. Vamos abrir o terminal e instalá-lo. E como você pode ver, precisamos de algo assim, agora, certo? Mas diz que também é preciso importar algo que é chamado de CSS para o Tastify, certo? E não vamos importá-lo em nosso hello do Express porque queremos permitir o uso em qualquer lugar, certo? Acho que é uma boa ideia importá-lo aqui em todo o nosso aplicativo, certo? Também precisamos importar nosso contêiner, algo assim, mas sem torradas, porque eu quero que ele esteja disponível em nossa árvore de aplicativos Então, está sempre visível, certo? E talvez vamos usar o contêiner de teste que está aqui, certo? Como você pode ver, esse é o comportamento padrão, certo? Então, isso é realmente o mesmo que este, certo? E vamos colocar isso, por exemplo, aqui, certo, assim. E agora o legal é que temos um contêiner em nosso aplicativo, tudo o que precisamos fazer é emiti-lo, por exemplo, dessa forma, certo? Então, se vamos copiá-lo aqui, mas também precisamos, importe nossa torrada Então importe, e precisamos importar torradas, certo? Essa é a maneira de fazer isso, certo? Isso é para que possamos usar a função chamada toast, certo? Então, tudo o que precisamos fazer agora para usá-lo é invocar essa função, certo? Então, quando vamos aqui e digamos que eu coloquei, vamos dizer aqui por um segundo. Você pode ver que temos, uau, tão fácil, então você pode fechá-lo. Quando eu atualizo nossa página, ela aparece duas vezes porque estamos no modo estrito, certo? Mas sim, ele apareceu depois de buscar os dados. Talvez pudéssemos colocá-lo também, por exemplo, aqui, logo após 1,5 segundo. Você pode ver, uau, é fácil, mas entendemos duas vezes, como eu disse, porque é assim que o modo de rua está funcionando E a questão é como personalizá-lo, por exemplo. Digamos que talvez no início de quando estamos tentando carregar algo, possamos criar informações e, digamos , carregar dados. Agora, quando eu o atualizo, você pode ver que diz: Ei, algo está carregando, você pode ver, sim, está carregando O problema é que, bem, ela não desapareceu quando a mensagem finalmente foi carregada, certo? Então, podemos fazer algo como, por exemplo, brindar, dispensar, certo Assim, podemos ignorá-la quando a mensagem for carregada Então, como você pode ver, podemos dizer manualmente : Ei, eu não preciso mais de você. O React toastify é super poderoso. É usado por milhares, milhões de pessoas, você sabe, certo? Quantas pessoas o baixaram na última semana, dois milhões. Então você pode fazer muito, muito mais coisas aqui, certo? Você pode, por exemplo, alterar os ícones. Você pode cumprir até mesmo a promessa aqui e eles mostram como fazer isso aqui, certo? Você pode mudar a posição da torrada. Você pode realmente definir qualquer coisa sobre isso, bem, torrada E o legal é que você pode conferir, certo? Ah, eu quero o modo escuro, por exemplo. Então, para torná-lo no modo escuro, você pode ver que precisa alterar o que aqui, propriedade da equipe, para escuro , por exemplo, você pode alterar facilmente onde ela aparecerá. Oh, eu quero que apareça aqui, eu quero que apareça p. Você está decidindo onde ele aparece e eu não sei, você quer ampliar Vai aumentar o zoom, você quer deslizar. Está bem? O próximo vai deslizar. Depende de você como isso vai aparecer. Então é uma boa ideia brincar com isso, ok? Como exercício, tente instalá-lo. E, por exemplo, talvez você possa tentar se divertir com, digamos, where is promise, yeah handling promise. Tente lidar com a promessa, como, por exemplo, tentar fazer isso, por exemplo, dessa forma, certo? Então você pode ver que você pode enviar aqui, assista. Buscar. Então, no nosso caso, é isso, certo. E quando a busca for resolvida, você pode, dependendo dela, mostrar a mensagem, como quando ela é carregada, mostrar isso Quando o sucesso acontecer, mostre isso. Se a flecha acontecer, mostre isso, certo? Então, para ser honesto, isso melhorará automaticamente nosso processo de carregamento. Mas lembre-se de que definimos um horário aqui. Isso é algo que criamos artificialmente. Isso está levando 1,5 segundos. Mas isso é instantâneo nessa situação. Mas é claro que devemos colocar a verificação de quando a promessa foi resolvida, quando o valor está vindo do servidor aqui, certo? Isso é apenas para fins de depuração posterior, você deve Ok, essa é a lição. Muito obrigado 129. Mapa - exibindo itens de listas: Olá, meu amigo. Hoje, mostrarei como exibir tarefas de, por exemplo, uma matriz dentro do nosso componente. E eu estou te mostrando isso em um exemplo muito simples. Imagine que esses dados vieram de um banco de dados, por exemplo, certo? Mas, por enquanto, estamos mostrando como exibir todos esses dados aqui. Seria mais fácil de entender por causa disso. Então, como abordamos um problema como esse? Bem, normalmente, quando você quiser exibir uma tarefa, provavelmente usará a lista não ordenada, certo? E então você usaria o item da lista. E para isso, usávamos um, dois, três, quatro desses itens, e eu fazia a lição de casa, pelo correio, limpava a sala e preparava o jantar O problema é que, você sabe, pode haver muitas, muitas mais tarefas ou menos delas. É por isso que provavelmente precisamos usar algum tipo de loop, certo, que passaria por cada elemento e colocaria um item na lista desse elemento, certo? E sim, você poderia usar o Loop quatro, mas, para ser honesto, essa é uma maneira muito lenta de fazer isso e não é tão legível quanto a que vou mostrar agora Existe algo, o que é chamado função de mapa dentro do Javascript. Espero que você já tenha usado, mas se não, vou te dar uma primeira introdução sobre como trabalhar com ele, ok? Quando você faz algo assim, tarefas e depois mapeia, essa função agora está pronta para percorrer cada item de uma matriz, todo o dicionário, e fará o quisermos com esses dados usando a função que enviaremos aqui. Então, o que fazer funcionar, certo? Essa função só vai fazer coisas em todas essas tarefas, caso em nossa situação, coisas aqui, certo? Então, isso é perfeito para nós, certo, porque queremos fazer algo assim. Eu quero anexar. Eu quero, tipo, embrulhar, fazer o dever de casa com esse item, certo? E então eu quero embrulhá-lo com a compra de leite, limpar a sala e preparar o jantar, certo? Então, aqui, quando entramos em uma órtese, agora podemos digitar algo como colchetes cardi para entrar no domínio do Javascript E agora podemos usar essa função. Então, podemos dizer tarefa. Vamos mapear para cada pessoa assim, cada dado, algo que deve ser feito com esses dados. Mas como fazemos isso? Bem, poderíamos criar uma função específica para fazer todas essas coisas, mas porque temos o quê? Função de seta, podemos fazer algo assim. Podemos mapear e depois dizer o nome de cada elemento, certo? Então, vamos chamá-los de tarefa. Mas é claro, você pode chamá-los que quiser, certo? Esse é o nome que inventamos. Criamos esse elogio em particular. E agora dizemos o que deve ser feito em cada uma dessas tarefas. Então, se realmente não fazemos muita coisa, por exemplo, se apenas criarmos um item de lista e, você sabe, digitarmos algo assim, isso significa que faremos quatro vezes substituindo todo o conteúdo por essas coisas aqui. Se eu digitar aqui task, vamos substituí-la pela string da tarefa. É muito importante que, se você quiser usar isso como um dado como algum tipo de variável, não como uma string, você precise saber como dois colchetes E agora, para cada elemento, certo, nós o embrulhamos com um item. E agora, como você pode ver, exibimos cada item da lista de tarefas, certo? Portanto, isso pode ser confuso no início, quando você está começando a usá-lo, certo? Mas isso permite que você, tipo, em uma linha, mude instantaneamente uma matriz inteira, mude a forma como ela é, você sabe, exibida. Não precisávamos procurar. Não precisávamos, você sabe, criar, por exemplo, exclusão temporária ou pensar em como abordar um problema como esse, porque fizemos apenas uma única coisa dados inteiros dessa forma porque era tudo o que precisávamos fazer O mapa é uma função poderosa que, como você pode ver, economiza muito tempo. Então, novamente, porque acho que isso ajuda quando estamos tentando usar palavras diferentes quando estamos aprendendo coisas novas. Portanto, map é uma função que atribui a cada elemento de uma matriz ou, por exemplo, dicionário, o que deve ser feito em cada iteração, ou seja, em cada etapa Então, se, por exemplo, quando estamos vendo isso, isso significa que o que quer que esteja dentro dessa caixa, que no nosso caso, são tarefas, eu quero chamar cada elemento de tarefa e é isso que eu quero fazer com ele. Então, novamente, caixa, função de mapa , dados e o que fazer. Com dados, certo? E, no nosso caso, se você quiser acessar esses dados, também precisamos fazer algo assim. Muito simples. Depois de usá-lo algumas vezes, ele vai entrar na sua veia, certo? Isso é só uma lição. Muito obrigado. 130. key - como gerar uma chave única usando uuid: Ao entrar no console, você notará nossa última palestra que temos aqui algum tipo de aviso Cada filho em uma lista deve ter uma propriedade de chave exclusiva. Ok. Em primeiro lugar, isso é apenas um aviso. Isso não significa que cometemos um erro, mas esse aviso está aqui porque significa que nossa lista não está otimizada para a situação em que vamos, por exemplo, remover e adicionar novos elementos dinamicamente Então, vamos mudar o estado do nosso é no futuro. E bem, isso é algo muito importante, especialmente quando a lista fica maior, certo, porque você precisaria atualizar a lista inteira em vez de apenas um único item. Então, mesmo que você não mude as tarefas aqui, mesmo que, você sabe, elas sejam estáticas, eu acho que você deveria, você sabe, implementar o que eu vou te mostrar em breve porque na maioria das vezes que você puder a situação pode mudar para você, certo? E a segunda coisa é que você provavelmente não quer ter erros no seu console, certo? Porque se quiser, deixe que eles aumentem a quantidade, não vai ser bom para você. É por isso que vamos resolver isso criando algo como são propriedades, ok? Mas nós fazemos isso? Veja, aqui, no item da lista, podemos definir algo como k e seguida, digitar aqui, por exemplo, exclusivo. O problema com essa solução é que ela não é única, certo? É por isso que não sabemos que encontramos duas crianças com a mesma chave, que é única, ou o que quer que digitemos aqui, ela será usada algumas vezes. E, sim, não é isso que queríamos, certo? E agora precisamos gerar algo que seja único. Poderia, por exemplo, usar em nossa situação porque temos nomes de tarefas diferentes, certo? Então fizemos algo como, por exemplo, uma tarefa aqui, porque, bem, eles são diferentes, certo? Cada tarefa é diferente e está funcionando bem. O problema com uma solução como essa é que não podemos contar com isso porque alguém poderia, por engano, criar duas tarefas com o mesmo conteúdo. É por isso que nos bancos de dados, cada tarefa tem muito frequentemente algo chamado esse ID, e poderíamos usar esse D, por exemplo, aqui dentro, se o erro aqui fosse, por exemplo, um dicionário com IDs ou um identificador exclusivo. O problema com nossa situação é que não a temos. Agora poderíamos colocá-los manualmente aqui para fins deste exemplo. Vou mostrar uma coisa sobre o que é uma solução universal que sempre funcionará corretamente. E acho que raramente consigo ver isso de outras pessoas que estão ensinando. Portanto, observe que temos modelos de pacotes e um deles é chamado de UUID E quando instalamos esse pacote, podemos acessá-los em nosso componente. Para acessá-lo, precisamos importar a função chamada V four. Então, do UUID, essa função é a função que agora podemos usar em nosso código para gerar um identificador exclusivo Isso garante que será único, certo? Porque, pelo que me lembro, a chance de criar algo não único usando isso é como não haver planetas suficientes em nosso universo ou algo parecido. Você precisa entrar em detalhes para, você sabe, calcular todas essas coisas. Mas sim, para nosso bem, a situação é suficiente. Então, simplesmente dizer que agora garantirá que funcionará. Poderíamos fazer algo assim e, quando atualizamos, como você pode ver, não temos erros, então está tudo bem. Isso é único. O problema com essa solução é que, quando voltarmos, desse jeito, desse jeito esse valor único será sempre diferente, certo? Então, provavelmente seria melhor, tipo, anexá-lo aqui para a matriz, certo? Assim, poderíamos transformar a matriz em, por exemplo, dicionário. Então você pode chamar algo como tarefas, dicionário desta vez, e tudo o que precisamos fazer é acessar as tarefas e usar o mapeamento novamente, certo? Então, quando usamos o mapeamento, queremos, tipo, fazer o quê para cada tarefa? Faça algo parecido. E queremos criar um dicionário, e esse dicionário consistirá em ID, que será único, certo? E se quisermos torná-la única, precisamos atribuir a ela o resultado da forma V da função, à direita, que a gera. E podemos criar uma propriedade, por exemplo, texto ou conteúdo, conteúdo da tarefa, e vamos chamá-la de tarefa, porque estamos realmente usando isso a partir daqui, certo? Sim, isso é tudo. E agora aqui não vamos usar tarefas RA, mas dicionário de tarefas, o que nos permite examinar cada elemento do dicionário. E desta vez, vamos acessar a tarefa, Cropca ID. E aqui, vamos acessar a tarefa, Crop Car That sorry, text. E agora, quando eu o atualizo, algo não está funcionando, mas provavelmente cometi um erro simples em algum lugar aqui. Ah, sim. Eu não digitei constante aqui e agora está funcionando bem. Então, como você pode ver, transformamos a matriz em dicionário e, posteriormente, usando esse dicionário, usamos um ID que foi pré-gerado aqui, certo? Claro, não é como se esse componente precisasse fazer todas as coisas aqui, certo? Todas essas coisas podem ser obtidas de algum lugar e, depois de buscá-las instantaneamente, você pode anexar E então esse componente para essa jogada, nós apenas usamos esse dicionário. Estamos fazendo tudo em 15 porque é mais fácil aprender com exemplos simples, certo? Essa é apenas a lição. Muito obrigado 131. filtro - filtragem - remoção de elementos da lista: Olá, meu amigo. Hoje, mostramos como remover tarefas da lista dinamicamente Então, aqui está o lugar que usamos para exibir todo o nosso dicionário, certo, que também significa que neste lugar específico é o lugar onde queremos, por exemplo, criar um botão que me permita remover o item atual da lista. Então, para simplificar, vamos criar um botão. E vamos chamá-lo, por exemplo, de X. Como você pode ver, não parece bom porque estamos usando CSS a partir da escala de pulso Você pode alterá-lo mais tarde porque esse não é o tópico desta palestra. Isso é muito simples de fazer e você pode fazer isso como um exercício. Mas agora queremos fazer algo assim. Quando alguém clica nesse botão, eu quero remover o item de aluguel de carro E isso é feito dessa forma, porque precisamos, de alguma forma, identificar isso com isso, certo? Precisamos saber qual botão está atribuído a qual item da lista. O bom é que, como definimos algo chamado de chave na última aula, podemos usar essas informações, certo, porque podemos, digamos, Ei, quando quiser, clicar aqui, certo? Eu quero que você, tipo, execute uma função que remova a capa desse item com esse ID, certo? Então eu acho que em uma situação como essa, não fazer tudo em uma linha, isso é um pouco, eu acho, coisa avançada. Vamos talvez, você sabe, fazer isso, digamos, não online, certo? Porque há muito conteúdo, muito código para remover essa linha. Isso pode complicar demais essa linha, certo? Então, vamos fazer algo como criar uma função que faça isso, certo? Então, vamos criar uma função e vamos chamá-la, por exemplo, de handle. Então, vamos lidar com o evento de remoção da tarefa, certo? E a sugestão aqui é bem legal porque teremos o ID aqui, certo? E agora precisamos apenas invocar essa função aqui, certo? Então, precisamos dizer: Ei, essa coisa vai lidar com a remoção da tarefa. Agora, quando eu clico nela, é claro, essa função é invocada, mas agora precisamos especificar como removemos as tarefas diretamente da tela E isso é muito, muito importante. Observe que essa coisa é realmente uma variável normal, certo, que é constante. E se eu remover algo daqui, isso não significa que o estado do nosso site responderá à remoção, certo? Porque, bem, estamos usando o react, precisamos primeiro usar o estado para todo o dicionário de tarefas, o que significa que precisamos transformar isso em quê? Dicionário de tarefas, certo, algo parecido. Então, hum, há muitas sugestões agora. Então, precisamos ter um gancho à direita que conecte a função dessa forma a esse dicionário, e precisamos usar o estado, à direita, no valor inicial. Porque agora, criamos o estado inicial para o dicionário, certo? Para dicionário de tarefas. Essa é a inicial, certo? Quando o componente é criado, esses são os valores iniciais. Agora, vamos ser capazes de, tipo, remover os valores aqui, certo? Mas, como você pode ver, temos um erro e, bem, nada está funcionando. É porque usamos o estado, que ainda não é importado, certo? Então, precisamos importá-lo. E sim, agora está funcionando. Então esse é o valor inicial, que é, tipo, transformado a partir disso. Dicionário de quatro tarefas. E agora, como esse é um estado observado pelo react, podemos alterá-lo sempre que quisermos usando o dicionário de tarefas definido. Então, quando lidamos com a tarefa de remoção, precisamos primeiro invocar o dicionário de tarefas definido e depois fazer as coisas no dicionário de tarefas, certo? E a sugestão aqui é perfeita, e vou explicá-la agora. Observe que usamos algo chamado filtro de método. Como o nome sugere, ele filtra a tarefa com o ID fornecido. Mas como isso funciona? Veja, temos aqui a função de seta, certo? E você se lembra de como o mapa funcionava? Era como se fosse algum tipo de loop interno, certo, é como fazer todas as coisas que especificamos na função em cada elemento interno, certo? E a função do filtro é a mesma. Mas em situação de função de filtro, estamos dando aqui algum tipo de condição. Então é assim. Temos dados. Temos filtro, certo? E então é como um item de dados, e então nós gostamos de criar uma condição. E agora, esse filtro é como um loop que percorre cada item no dicionário e verifica se o ID que veio de onde vem daqui, certo? Ainda não o enviamos, então isso significa que precisamos fazer isso, certo? Mas sim, quando o enviamos aqui, então talvez vamos fazer isso. Então, precisamos fazer algo assim. Manipule a tarefa de remoção e vamos enviar aqui o ID da tarefa, certo? Porque queremos enviar o único ID de tarefa que acabamos de criar aqui acima, certo? É por isso que vamos conectar a remoção com a chave acima. OK. E agora temos esse D aqui, direto daqui, e estamos comparando se o ID que invocou a tarefa handle remove está dentro do nosso dicionário de tarefas, ok? E se não for porque estamos usando o mercado de exclamação, como você pode ver A tarefa não será removida, ok? Mas se for igual ao que acabamos de enviar, ok? Em seguida, ele será removido. Vai ser filtrado, certo? E agora, como você pode ver, quando eu clico nele, aquele em que clicamos, quando eu atualizo, tudo está voltando, Mas sala limpa. Ok , desapareceu, certo? Não temos animações. Tudo parece muito ruim, mas está funcionando corretamente, certo? Então, novamente, filter é uma função que funciona de forma muito semelhante ao map porque percorre todos os elementos dentro de uma matriz ou dicionário, mas não executa uma função, mas você dá a ela algum tipo de condição para basear sua ação, o que deve ser feito, certo? E no nosso caso, estamos verificando se o ID que foi enviado aqui no botão de clique não é igual ao que está atualmente em nosso dicionário, certo? E se não for, vamos ficar com ele. Vamos criar uma nova matriz com o item mantido com a tarefa mantida, certo? Mas quando isso vai ser executado e encontramos um ID igual ao ID que está no dicionário de tarefas, certo? Em seguida, a função de filtro apenas o remove. Não vai ser honesto, não é como se o removesse. Não será adicionado a um dicionário de tarefas recém-criado , como acabamos de dizer aqui. Observe que quando eu removo essa peça, fica bem legal. Quando fazemos algo assim, quando eu atualizo nossa página, percebo que nada acontece, certo? É porque, sim, eu filtro o dicionário de tarefas, mas não envolvemos a mudança de estado, certo? React pode alterar o estado do dicionário de tarefas ao usar essa função. Então, precisamos usar esse dicionário de tarefas definido como uma função porque o conectamos a isso E agora, como você pode ver, remoção é bem limpa e fácil. 132. novo item de tarefa - acessando formulários usando dom - formulários não controlados: Olá, meu amigo. Hoje vamos criar um texto de entrada que será adicionado à lista quando clicarmos em um botão. Então, como podemos fazer algo assim? Bem, estamos em uma lista não ordenada, então acho que devemos colocar o botão antes dela, certo? E vamos criar um botão. E vamos chamá-lo de Adicionar tarefa, por exemplo, certo? E quando clico nela, quero adicionar a tarefa. Isso será fornecido a partir da entrada, certo? E esse tipo de entrada será texto, certo? Então, a partir daqui, o que quer que eu coloque, eu quero fazer aqui. Ok. Então, a primeira coisa que precisamos pensar é, bem, como acessamos o botão na tarefa, certo? Então, precisamos apenas usar o onClick, certo, porque onClick é o atributo react que é executado quando o botão E precisamos invocar uma função. Por exemplo, lidar com a tarefa, certo? E precisamos defini-lo agora. Então, realize a tarefa. Vamos definir isso. E, para ser sincero, a solução aqui é muito boa. E sim, podemos guardá-lo e eu explicarei como funciona. Então, primeiro, temos o que é uma facção de flechas, e a segunda coisa é que é muito importante que ao mudar o estado do nosso dicionário de tarefas, tenhamos que usar o método definir dicionário de tarefas, certo? Caso contrário, isso não afetará o estado. Então, as coisas que vemos em nossa página corretamente. E a segunda coisa que é muito legal é como um atalho para atualizar esse estado Porque veja, aqui temos algo parecido, grátis e depois o dicionário de tarefas. Essa coisa é realmente como, Ei, expanda o que tínhamos no dicionário de tarefas neste lugar, certo? E depois disso, quando você vê aqui, como você pode ver, temos uma vírgula e temos um novo valor para esse objeto de dicionário de tarefas, que será o ID de um V recém-criado gerado quatro nosso ID exclusivo e o texto é como, você sabe, o predefinido Então, não é como se tivéssemos passado por isso de alguma forma. Então, por enquanto, quando clicarmos na tarefa, o que quer que seja digitado aqui, mesmo que não seja nada, vamos editar, certo? Agora também podemos remover o que quisermos. Quando atualizamos, vamos para o estado inicial. Mas sim, agora podemos adicionar algo, mas não é o que foi colocado na entrada. E agora isso é muito importante porque, para ser honesto, estamos passando para as palestras sobre como operar em formulários no React E há duas maneiras de fazer isso. Você pode fazer isso reagindo da maneira que falaremos em futuras palestras, certo? Ou você pode fazer isso semi até o fim. claro que há benefícios em fazer isso usando o react, porque o estado de tudo mudará facilmente. Mas quando você vai fazer isso usando a métrica de reação, também vai custar algum tempo para, tipo, escrever um código como esse Mas vamos ver, como resolvemos um problema como esse? Bem, primeiro, precisamos pensar em como acessamos o valor dessa entrada aqui, certo? Bem, para ser sincero, poderíamos usar aqui, por exemplo, ID e vamos chamá-lo, por exemplo, de entrada de nova tarefa, certo? Algo parecido, por exemplo. E isso significa que, sim, podemos acessar esse ID de qualquer lugar que decidirmos agora, certo? Então, isso significa que aqui podemos facilmente fazer algo como Vamos acessar o documento getElement por ID Essa ideia, vamos tirar o valor dela, certo? Então, agora, quando fazemos algo assim, como você pode ver, adicionamos o texto que estava aqui, certo? E depois de adicionar isso, bem , acho que devemos também, sim, fazer algo assim. Então, esvazie a coisa que foi digitada aqui, certo? Então, quando fazemos assim, como você pode ver, agora podemos digitar o valor aqui novamente, certo? Então essa é simples a solução mais simples que você pode fazer, certo? Para entradas muito simples, isso pode ser suficiente Mas, você sabe, estamos usando o react porque queremos que tudo reaja aos estados sempre que estiverem automaticamente, certo? Não decidimos entrar no React para escrever assim. Então, em futuras palestras, mostrarei como resolvê-lo de forma reativa Isso é só uma lição. Muito obrigado 133. useRef - acessando/referenciando o DOM: Olá, meu amigo. Hoje vamos falar sobre algo chamado use ref. Está bem? Mas antes de entrarmos neste tópico, gostaria de acrescentar à última aula um pouco mais de informações sobre por que, como, você sabe, usar o modelo de objeto de documento direto, como fizemos aqui, também não é bom Como fizemos isso diretamente, ignoramos o processo padrão de atualização do estado em nosso aplicativo React usa algo, o que é chamado de modelo de objeto de documento virtual, e é como uma cópia do nosso modelo de objeto de documento atual, certo? E quando ele atualiza algo nesse modelo jc virtual, ele vai comparar o que está no virtual, o que está no que temos aqui, certo? Então, ele vai comparar os estados, e se algo mudou, então nós sabemos disso e mudamos apenas o que precisamos, certo? Então, pode surgir uma situação como esse comportamento inesperado, certo? Porque o react pode não saber sobre as mudanças que fizemos diretamente dessa forma, certo? Portanto, pode falhar atualização adequada do usuário na interface. Portanto, também pode haver problemas com renderizações repetidas. Então, isso é como um giro que você deve evitar, certo? Você não deveria fazer isso dessa maneira. E podemos melhorá-lo um pouco como usar, digamos, forma semi-reativa de acessar o modelo de objeto de documento, mas usando algo, o que é chamado de use ref Como o usamos? Então, como usamos use ref? Primeiro, isso é um gancho, então precisamos conectar essa coisa a alguma coisa, certo? E esse algo precisa estar em nosso modelo de objeto de documento. Então, por exemplo, em nossa entrada, não precisaremos mais de ID, mas teremos apenas uma referência à qual vamos nos conectar. Está bem? Em breve diremos como está, você sabe, funcionando e o que faz exatamente. Mas primeiro, precisamos conectá-lo, certo? Então, como vamos chamá-lo? Digamos que referência de entrada de tarefas, certo? Isso é chamado de ref from reference porque você está tentando acessá-lo, certo? Fazer referência a algo significa que você está tentando acessá-lo, certo? E agora precisamos especificar isso, bem, gancho, certo? Então, vamos especificá-lo, por exemplo , aqui, e vamos fazer algo assim, mas não vamos criar uma referência, mas vamos usar referência, algo assim. Está bem? Não precisamos passar por aqui nem nada, mas precisamos importá-lo Então, aqui, use a referência, certo? E sim, acabamos de nos conectar, então conectamos essa variável Para se referir a essa entrada, certo? E, em termos simples, referência de uso permite criar uma referência persistente a um elemento, objeto ou valor do documento , e ela permanece a mesma em todos os grupos aleatórios. É muito importante porque não faz o componente seja renderizado quando o valor muda. Quando o estado de uso acontece, quando algo muda, uma coisa é conectada à outra, a renderização Nesse caso, não, por exemplo, quando atribuímos a um campo de entrada algo assim e o conectamos aqui, ele nos dá acesso direto para interagir com o campo de entrada, como, por exemplo, obter ou definir seu valor sem precisar usar o estado de reação Resumindo, é como dizer: Ei, lembra desse elemento de modelo de objeto de documento, certo? Então essa coisa ou talvez valor. Deixe-me acessá-lo sempre que precisar, mas não faça com que o componente seja atualizado porque. Então, essa coisa é boa, melhor do que acessá-la diretamente porque funciona dentro do ciclo de vida e do ecossistema do React, certo? Portanto, mantém a lógica do componente consistente com a abordagem Rax, certo? Ele segue os princípios de reação, certo? Então, primeiro, informamos a qualquer pessoa que, sim, estamos usando o acesso direto neste caso, certo? Há algum tipo de otimização nos bastidores , E tudo bem, o mais importante também é que, quando um renderiza o componente, quando os estados ou adereços mudam de componentes inteiros, então, por exemplo, a lista de tarefas, certo, a referência como essa não será perdida, Então, é por isso que eu disse antes que ele mantém uma referência persistente ao elemento objeto do documento , então essa é a maneira reativa de fazer isso. E depois de referenciá-lo, isso significa que, sim, agora podemos acessá-lo em qualquer lugar aqui, certo, neste componente, lista de tarefas. Então, no nosso caso, em vez de alterar o texto dessa forma, certo, podemos, por exemplo, entrar na tarefa handle, à direita, e criar, por exemplo, uma variável como essa. Então, estamos criando uma variável chamada nova tarefa e referenciando a referência de entrada da tarefa, que está preparada aqui, certo? E estamos acessando a partir dele o valor atual que está na entrada, ok? E agora essa coisa podemos usar para atualizar, por exemplo, o texto, certo? Ou podemos usá-lo também depois para configurá-lo para nada, certo? Precisamos dessa variável? Realmente depende do gosto de como você escreve código, certo? Porque, é claro, poderíamos escrevê-lo também dessa maneira e tudo também ficará bem. Realmente depende de como seu código será expandido posteriormente, certo, quantas vezes você o usará. Mas essa coisa resolveu nosso problema. Como você pode ver, sim, agora podemos adicionar novos valores. Tudo está funcionando perfeitamente. Portanto, esta é a maneira acessar diretamente as coisas do seu objeto de documento, mas usando o ecossistema react. Está bem? Então é isso que você precisa lembrar desta palestra. Na próxima palestra, mostrarei como fazer coisas assim, usando a forma reativa de fazer as coisas 134. onChange - entradas controladas no React: Olá, meu amigo. Hoje, aprenderemos sobre algo, o que é chamado de mudança, e aprenderemos sobre como criar formulários chamados de formulários de estado gerenciados. Está bem? Então, isso significa que o estado dos formulários, ou seja, a forma como os valores mudam dentro do nosso formulário é gerenciado totalmente pelo react, certo? Então, para fazer isso, precisamos primeiro criar um estado para cada nova tarefa. Está bem? Então, quando chegarmos aqui, em vez de usar referência, vamos criar uma variável constante que vamos chamar de nova tarefa, certo. Vamos criar uma tarefa definida, uma nova tarefa, certo, e o valor padrão para isso pode ser como um objeto vazio, certo? Então, isso é como algo que vai armazenar novo valor de tarefa que será inserido posteriormente no dicionário de tarefas, certo? E agora precisamos mudar isso sempre que algo é inserido, quando é colocado na entrada Então, em vez de referenciá-lo desta forma aqui, agora vamos acessar algo chamado mudança, que é como algo que se executa sozinho, ok, quando o estado, quando o valor da entrada é alterado, ok, pelo usuário E aqui, como você pode ver, a sugestão aqui é perfeita. Por quê? É perfeito porque temos uma função RO que, por padrão, recebe eventos, porque quando um evento inalterado acontece, temos um objeto de evento que podemos acessar E dentro desse objeto de evento, temos propriedades como alvo e valor. E isso é como armazenar tudo o que colocamos aqui em nossa entrada. Então, sempre que coloco um novo personagem aqui, quero invocar a nova tarefa definida, certo, que está conectada a E mudamos para o novo valor que foi colocado pelo usuário aqui, certo? Então, sempre que houver uma mudança aqui, eu quero mudar o estado da nova tarefa E é por isso que, bem, agora estamos gerenciando o estado de reação do texto em nossa entrada. Sempre que alguém coloca algo aqui, o estado da nova tarefa é alterado, anúncio automático, o que significa que agora podemos acessá-la sempre que quisermos, por exemplo, não quero acessar o valor dentro do identificador na Vamos acessá-lo. Então, quando eu quiser esvaziar depois de usá-lo , bem, precisamos usar set new task, certo? Porque lembre-se de que não acessamos algo assim nunca diretamente quando está conectado, certo? Agora, quando adiciono uma nova tarefa, você pode ver que ela está sendo adicionada, mas não alteramos o estado aqui. Por que isso acontece? É porque o valor de nossa contribuição não está definido de acordo com a nova tarefa, certo? É por isso que precisamos mudar o valor para uma nova tarefa. Então, agora, o valor atual também segue o que está sendo feito com a facção do componente de reação, certo? Antes de chegarmos de uma maneira, certo? Então, quando algo muda aqui manualmente pelo usuário, bem, mudamos o valor da nova tarefa, certo? E mais tarde, quando alteramos a nova tarefa definida para vazia, sim, fizemos isso, mas não alteramos o valor de entrada, certo? Acabamos de mudar o que está contido no novo estado da tarefa. Isso é tudo. Não alteramos o valor disso aqui porque não foi feito para ser alterado pelo react, certo? Precisamos dizer que, ei, o valor agora é sempre igual à nova tarefa. E por causa disso, agora, quando eu adiciono uma nova tarefa, como você pode ver, nossa entrada também está vazia. Então, essa é a solução que agora é como uma onda de reação profissional, certo? Temos um formulário gerenciado pelo react sempre que algo muda no código, aqui mesmo, ou seja, o react reagirá nesse estado. Gosto de usar o nome do reator porque mostra por que ele também é chamado assim, certo? Ele reage automaticamente às mudanças. Então, por causa disso, você não precisa pensar mais tarde ao implementar o componente, ao alterar o estado usando a nova tarefa definida em algum lugar, você não se importa em atualizar o valor, por exemplo, aqui. Você sabe que isso simplesmente vai acontecer, certo? E, você sabe, os componentes podem compartilhar os estados, certo? Você pode até mesmo, por exemplo, no futuro, aprender sobre algo chamado de bibliotecas de estados gerenciados. E o legal dessa solução é que agora ela é universal, certo? Isso significa que não importa onde você mude o estado, reaja bem e reaja de acordo com o que acabou de acontecer. Essa é apenas a lição. Muito obrigado. 135. onSubmit - como criar formulários no React?: Olá, meus amigos. Atualmente, quando digitamos algo e eu digitei, o que está acontecendo? Nada É porque a entrada não está, você sabe, conectada a esse botão. Essa tag HTML não se parece com nada nessa entrada, certo? Nós realmente conectamos tudo aqui, certo? Depois que alguém invocou isso, invocamos isso e isso, certo Mas, para ser honesto, normalmente, quando você está criando formulários, você quer ter um recurso como, por exemplo, quando alguém pressiona enter, então esse botão, por exemplo, é o botão que invoca o envio, certo Ele envia os dados aqui e os dados são adicionados. Você poderia, é claro, fazer com que seu aplicativo detecte, entre e depois reaja a ele, certo? Mas essa implementação de coisas que já estão implementadas em HTML não é necessária em situações como essa, certo? Então, talvez vamos transformar isso em um formulário, certo? Temos um formulário HTML que normalmente deseja ação, mas em nossa situação, quando estamos usando o react, ok, temos algo chamado evento de envio, ok? Isso será invocado quando alguém, bem, enviar este formulário Então, agora, podemos simplesmente mover isso para este lugar, certo? Então, vamos lidar com a tarefa agora usando o formulário, não usando botões. Então, podemos remover isso. Mas note que agora, quando eu clico na tarefa, bem, algo acontece, é porque o tipo de botão é enviar por padrão, ok? Mas é uma boa ideia, você sabe, especificar que esse botão é para envio Então, eu sei que esse botão será invocado quando alguém pressionar Enter, certo? E agora há um problema porque o que quer que eu digite, podemos ver que algo está tentando aparecer aqui. E quando eu clico em Attas também, mas é como se tudo estivesse refrescante, E, para ser honesto, sim, isso é o que acontece porque, por padrão, o formulário funciona dessa forma que, quando o formulário for enviado , colocaremos alguém em outro lugar onde está a próxima etapa desse formulário, certo? Então, por exemplo, vamos mostrar uma receita ou vamos mostrar a mancha do pedido ou algo parecido Mas, no nosso caso, queremos ficar nesse lugar em particular. E para permanecer nesse lugar específico, quando um evento como o Oso Bid acontece, invocamos handle at task, certo? E lidar com a tarefa tem algo, o que é chamado de evento, ok? Eu fiz algo por engano. Ele tem evento o objeto que vem aqui automaticamente, e tem todas as informações sobre o que invocou esse evento, certo? E podemos, como você pode ver a sugestão aqui, fazer algo como evitar o comportamento padrão do evento de envio do formulário, que é, você sabe, atualizar a página Se você não especificar, sabe, a página para a qual enviaremos o usuário, a página, por padrão, é a mesma página. Então, nós apenas evitamos o comportamento padrão, certo? Então, agora, quando digitamos algo aqui, como você pode ver, estamos adicionando um novo elemento no final, certo? Também podemos apertar o botão e ele também funcionará, mas não seremos movidos para outro site. Portanto, tivemos que evitar o comportamento padrão do evento causado pelo envio do formulário E sim, agora, acabamos de implementar com bastante facilidade ação de adicionar usando Enter, certo? Não precisávamos fazer tudo isso manualmente. Observe também que agora podemos adicionar uma entrada vazia. E eu acho que algo assim deveria ser evitado, certo? Então, como podemos evitar algo assim? Então, poderíamos fazer algo assim. Gosto da sugestão aqui porque alguma forma, ele gerenciou a IA e conseguiu, tipo, saber o que estou pensando. Então, agora, como você pode ver, quando não há nada, certo, não vai ser adicionado. Então, acabamos de comparar a nova tarefa, ou seja, o valor da entrada. Para o nada. Se não for nada, não vamos invocar o resto do código porque, quando a declaração escrita for atendida, lembre-se de que o JavaScript é como viver essa função instantaneamente, certo? Portanto, o resto do código não será invocado de forma alguma Então foi assim que fizemos, certo? 136. [EXERCÍCIO] useRef - exemplo prático - refocus: Olá, meu amigo. Atualmente, quando digitamos algo aqui, o que acontece quando eu pressiono Enter? Observe que o foco está voltando aqui. É porque essa é a última entrada que usamos. Mas o que acontecerá quando eu digitar algo e clicar manualmente na tarefa? Como você pode ver, nosso usuário agora precisa clicar manualmente aqui, o que vai levar algum tempo para ele, certo? Se ele disser: Ok, eu preciso adicionar outro e outro, certo? Devemos sempre melhorar a experiência do usuário. O comportamento padrão, eu acho, deveria ser como: Ok, vamos voltar aqui e focar essa entrada novamente. A questão é: como fazemos essas coisas, certo? Temos um problema porque como nos referimos à entrada? Este é um exemplo prático de quando você deve usar qual atributo, atributo J, aqui, certo? E podemos chamá-la, por exemplo, de referência de tarefa de entrada, certo, e também precisamos defini-la, certo? Então, aqui no topo, devemos fazer algo assim. Texto de entrada constante, referência e precisamos usar ref. O valor padrão para isso, porque aqui você também pode enviar um valor padrão, será conhecido. Agora, usando isso, podemos acessar nossa entrada na hora que quisermos. Mas a questão é: como gostaríamos de reorientar a entrada aqui? Ok, então quando o identificador da tarefa é invocado, esse é o momento em que queremos nos concentrar novamente, Então isso significa que isso deveria acontecer neste lugar, certo? Então, depois de evitarmos o comportamento padrão, devemos nos concentrar novamente, certo? Então, acho que neste lugar, devemos acessar nossa referência de tarefas de entrada e agora acessar a referência atual. E observe que depois disso, temos aqui um método chamado foco, que apenas o redirecionará para essa entrada Então, agora, quando eu faço algo assim, percebo que o foco está sempre aqui, certo? Então, está sempre voltando para esse lugar, certo? Além disso, se você quiser focar no automático quando nossa página for carregada, certo, porque estou atualizando em segundo plano, certo, você pode usar isso, mas não, isso não é uma boa ideia, porque criar um código para isso quando temos um bom atributo para uma situação específica como essa Como se isso fosse chamado de foco automático, certo? Então, quando você adiciona um atributo como esse, agora, quando eu atualizo, como você pode ver, o foco está automaticamente aqui Mas lembre-se, essa coisa funciona quando funciona quando a página é carregada, certo? Como você pode ver agora, não está funcionando, certo? Então, esta é a primeira vez que alguém carrega nosso aplicativo. Mas depois, se você quiser focar em alguma parte do seu aplicativo após algum tipo de ação como, por exemplo, evento de manipulação da tarefa e anúncio, certo? Então você precisa fazer isso manualmente. Então, podemos ver claramente agora que sim, há situações em que você precisa usar o atributo use ref e ref, certo? Porque o estado nessa situação seria como os dois. O que devemos fazer com o estado nesse caso? Seria como se você soubesse, seria estúpido usá-lo aqui, certo? Não precisamos compartilhar o estado de foco de todo o nosso aplicativo, certo? Portanto, há situações em que você deseja usar o sref, não apenas para otimização, mas também para algo simples assim, certo? Não é como se isso existisse apenas para permitir coisas que são, fora, você sabe, para pessoas que não estão seguindo regras, certo? Ok, essa é só a lição. Muito obrigado 137. sort() - como classificar uma lista?: Para classificar nossas tarefas atualizadas, precisamos invocar uma função chamada sort E, como você pode ver, temos aqui agora uma sugestão da IA de permitir que você classifique por algo chamado de IDs, certo? Mas não é isso que queremos, certo? Queremos classificar não por ID, certo, mas queremos classificar por texto porque temos aqui ID e texto adequados. Então, em vez disso, queremos fazer isso. Agora, quando adicionamos aqui um novo valor, como você pode ver, porque ele começou com A, é um início negativo. Então, temos A, B, CD. Então, tudo funciona como queríamos, quando colocamos algo assim, como você pode ver, está funcionando bem. A questão é por que está funcionando bem. Então, agora vou revelar um segredo de como eu trabalho com a classificação. Você pode dizer: Ok, eu tenho que entender o que está acontecendo em segundo plano aqui, certo? Mas, para ser sincero, eu realmente preferiria que houvesse uma função como essa. Quero classificar tudo por ordem crescente e gostaria de classificá-lo pelo valor do texto da propriedade a partir daqui Isso é tudo, certo? Isso seria legal, certo? E para ser sincero, quando você lesse isso, tudo bem, isso é compreensível Então, estamos agora na era da inteligência artificial. Então, perder seu precioso tempo para entender por que esse lugar em particular tem essa aparência, e vai parecer um pouco diferente, você sabe, classificar de maneiras diferentes porque existem muitas maneiras de classificar, Por favor, não faça isso. Viva como a vida, certo? Porque se eu decidir classificar agora em ordem mundial decrescente, por exemplo, vou fazer exatamente isso Então, acabei de invocar minha inteligência artificial usando o Control plus I e pensei: quero classificá-la em ordem decrescente Ok, então eu preciso primeiro colocar B e depois A. Então agora, como você pode ver, quando eu coloco algo aqui, agora está em ordem decrescente, certo? Eu tenho que me lembrar disso? Eu tenho que entender isso? Isso não é muito importante como resultado da criação de um programa funcional, certo? Você, como programador, deve entender coisas como a lógica, como tudo é colocado um após o outro, por que você deve otimizar às vezes ou talvez não Quais são as formas de criar um código tão desorganizado e assim por diante Você tem uma ideia que deseja implementar, certo? Então você faz o pedido agora mesmo para a inteligência artificial, o que deve ser feito em um lugar específico como esse? Por que se preocupar em entender exatamente essa parte, certo? Então, esse é o meu segredo para você, porque, para ser sincero, às vezes eu esqueço coisas assim. Pode ser porque eu tenho TDAH. Mas eu programo há mais de 20 anos, acredite em mim. E mesmo que eu, você sabe, tenha feito isso sem IA antes, às vezes eu uso o TGOflow Às vezes eu uso Goo Goo bem porque pensei: “ Isso é uma coisa chata Eu já aprendi uma vez, mas não o uso , por exemplo, um mês e fico tipo, ok, então preciso fazer de novo. Não me lembro exatamente se nessa linguagem de programação em particular, isso deve ser feito dessa forma ou dessa maneira, porque a coisa mais estúpida é que cada implementação de classificação será diferente para uma linguagem diferente Essa coisa vai ser chamada de diferente. Essa coisa pode ser acessada de forma diferente. Aqui podem haver invocações diferentes. Então, é como se eu fosse um programador que está pulando entre linguagens, por exemplo, certo, mas para ser honesto, eu não me importo com o tipo de linguagem que estou usando porque eu posso me encaixar em qualquer linguagem de programação instantaneamente porque elas são todas iguais para Por causa de como minha mente está funcionando, certo? Porque eu não me importo exatamente com a forma como essa parte é feita em segundo plano, certo? Mas eu só quero ter um efeito que funcione de acordo com o que eu quero, certo? Essa é uma informação muito importante, especialmente hoje em dia, porque algumas pessoas perderão seu precioso tempo entendendo partes como essa, ok? E, não, essa é a maneira antiga talvez fosse usada para precisar saber coisas assim. Mas hoje em dia, sério? Você precisaria memorizá-la ou entendê-la, e perderia, por exemplo, 1 hora, talvez 2 horas para essa parte, e se não a usasse por algum tempo, você a esqueceria novamente e ficaria confuso Por que há tantas coisas para memorizar, certo? Então, eu sei que essa palestra não deve ser tão longa, mas eu realmente sinto que as pessoas não estão se movendo com o tempo com o que está acontecendo no mundo atualmente, certo? Então, sim, você precisa entender tudo o que eu disse neste curso até agora, para saber como desenvolver aplicativos. Mas partes assim, por favor, esta é uma solução instantânea de qualquer modelo de IA. Essa é apenas a lição. Muito obrigado. 138. [EXERCÍCIO] Como criar um botão de classificação asc/desc: Olá, meu amigo. Hoje, criaremos um botão de alternância para alternar o estado de classificação de nossa para alternar o estado de classificação de E segundo, quando você pensa em estado, então quando você diz: Ok, eu quero mudar o estado de alguma coisa, isso significa que estamos criando uma conexão, um gancho na realidade. Certo? Então, o primeiro passo para nós será criar uma variável constante que chamaremos de direção de classificação, e precisamos dela de um setter E sim, o comportamento padrão, que seja solicitado de forma ascendente, certo? Vamos, tipo, alternar entre eles. Pergunte e entre o modo de envio. A próxima coisa é que precisamos criar um botão que represente a luta. Então, precisamos criar um botão para isso. Como você pode ver, a sugestão aqui é perfeita. É por isso que gosto de usar preenchimento automático como o que temos aqui Portanto, é como criar uma condição interna. Isso verifica o estado atual da direção de classificação porque o estado atual é perguntar, certo, porque esse é o valor inicial Vamos colocar aqui em ordem decrescente no texto aqui, certo? Caso contrário, é ascendente Então, ele vai mudar assim que eu clicar nele. Claro, precisamos lidar com isso, mas vai simplesmente mudar. OK. Então, isso é uma chamada, mas agora precisamos lidar com isso. Então, ao clicar, precisamos invocar o quê? A função de classificação de identificadores que precisamos especificar agora. Ok, então vai ser especificado aqui handle sort. Está bem? Eu vou completar assim. E agora é a hora de resolver as coisas. Poderíamos fazer o que sugere, mas vou te mostrar algo legal. Então, primeiro, vou criar uma área temporária de tarefas ordenadas Está bem? E agora podemos ver um problema que é mostrado apenas para pessoas que entendem o que está acontecendo. Como você pode ver, a primeira sugestão é assim. Está tudo bem? Ou talvez devêssemos fazer isso como na segunda sugestão. Normalmente, pessoas que não entendem o histórico podem simplesmente entrar em contato. Tudo está funcionando bem, certo? Mas não, não, não. Existem alguns conceitos que você precisa entender nos bastidores como desenvolvedor de reações, como o quê? Por que isso está errado? Você pode estar pensando. Porque a função SORT está realmente afetando o estado original de quem de algo que está vinculado ao dicionário de tarefas definido, porque o SRT está trabalhando na matriz like original, E vai substituí-lo. Está bem? Essa é a diferença. Aqui, poderíamos fazer isso porque estamos trabalhando em uma tarefa temporária atualizada. Não trabalhamos na matriz de dicção de tarefas, certo? Mas aqui, não podemos fazer algo assim porque lembre-se de que você pode alterar e reagir ao seu estado viciado somente usando o método especificado aqui É por isso que precisamos usar a segunda sugestão, que primeiro faça uma cópia dela. Essa coisa aqui é, na verdade extrair todo o dicionário tributário e criar uma cópia aqui, e então estamos classificando uma Isso é muito importante, totalmente diferente do que tínhamos antes. Vamos ver se também existem outras formas de classificação, porque você pode ver facilmente as sugestões aqui Mas bem, para ser honesto, isso é o que podemos fazer de todas essas maneiras, certo? Mas acho que devemos primeiro fazer, tipo, verificar se queremos fazê-lo ascendente ou não Ah, sim, essa é a solução que eu gosto. Então, se tivermos ascendência, faremos isso dessa maneira Caso contrário, queremos mudar, certo, porque estamos trocando A para B, B para A, e acho que isso vai ser legal. Então essa coisa agora é algo que queremos definir aqui, definir o dicionário de tarefas, certo? E também, sim, queremos definir a direção da classificação. Queremos, tipo, reverter isso. Como você pode ver, esse preenchimento automático com uma pessoa que também sabe codificar, certo, é incrível, certo, porque permite que você identifique onde estão os erros, se você entende o processo, mas também use a IA a seu favor, certo? Então eu acho isso muito legal. 139. Por que refatoramos o código? Como fazer isso? Um truque para fazer isso mais rápido: Olá, meus amigos. Hoje vamos falar sobre refatoração, ou seja, mudar a organização do Porque, para ser sincero, olha, temos todo o aplicativo dentro de uma função no momento. E dentro dele, o componente é responsável agora por muitas coisas, como, por exemplo, por adicionar novas tarefas, como classificar, exibir itens Isso é demais, ok? Não é assim que devemos escrever programas no react. Por quê? Porque, bem, no momento, não podemos corrigir o formulário sem tocar na lista, por exemplo, certo? Nós pensamos: Onde está isso? É como se tudo estivesse em um só lugar, certo? Então, não é como se pudéssemos consertar uma parte do ego, por exemplo, certo? Precisamos reconstruir tudo porque tudo está em um único lugar Não há um programa possa se concentrar nisso, o segundo nisso. Não é como se você estivesse olhando para uma coisa e ok, isso está aqui, isso está aqui, então isso está aqui. Como você pode ver, agora, temos tantos estados aqui, tantas funções, e também aqui, está um pouco confuso, certo? Portanto, também não é fácil reutilizar nossas peças em outros lugares, certo? Se tivéssemos decidido, por exemplo, poder exibir um item de tarefa em outra lista como essa , precisaríamos reescrever nosso código, por exemplo, certo? E é por isso que você deve dividir componentes grandes em componentes menores. Essa é uma das razões, ok? Falaremos sobre isso mais tarde também quando terminarmos de dividi-lo, ok Mas essa é, eu acho, a mais importante à primeira vista. Então, como dividimos coisas assim? Temos duas maneiras de fazer isso. E vamos dividir primeiro algo que eu acho que será o mais fácil de dividir, ok? E acho que vamos começar com o botão de classificação, ok? Então, a partir dessa coisa, ok? Eu quero dividir isso em um componente. Então, o que eu faço? Bem, acho que vamos criar um componente no futuro que chamaremos de botão de classificação, por exemplo, certo? Então essa coisa vai ser responsável por classificar o botão de classificação, ok? E dentro do botão de classificação, mas isso vai ser assim. Então, eu só quero ter um botão de classificação aqui. E precisamos, tipo, enviar a direção do códio em que o preenchimento automático estava aqui Então, queremos enviar a direção da classificação, certo? E precisamos também, sim, especificar o que deve acontecer quando a classificação ocorre, certo? Então, precisamos enviar uma função para o prop sort. Então, observe que temos direção e classificação. E esses são os adereços certos. Falamos sobre eles há muito tempo, certo? Assim, você pode enviar para qualquer estado, certo, dois componentes diferentes. E também, como você pode ver, você pode enviar uma função para o componente, certo? OK. E depois de enviarmos isso e isso, precisamos, tipo, você sabe, decidir o que fazer e o que mostrar, certo? Então, o que fazemos aqui, vamos fazer agora , dentro do nosso fundo de classificação. E agora temos duas coisas que podemos fazer. Podemos criar um arquivo separado para o botão de classificação ou podemos criar um componente acima aqui para o botão de classificação. E agora eu vou te dizer qual caminho é melhor e quando. Quase sempre começo a criar coisas assim dentro do mesmo componente que contém componentes conectados uns aos outros. Está bem? E a sugestão aqui é perfeita porque estamos criando uma função, certo? Isso requer duas propriedades, direção de classificação e classificação, e agora podemos fazer coisas com isso. E por que eu sempre faço isso aqui? Eu faço isso aqui porque às vezes os componentes nunca serão reutilizados, ok? Isso pode acontecer e, para ser sincero, é muito frequente. E agora imagine que seu aplicativo é muito grande. E se você decidir criar um componente para totalmente todas as coisas semelhantes possíveis em seu aplicativo, seu sistema Pi aqui será difícil de manter, certo? Então isso é uma desvantagem. Além disso, sempre que você for , tipo, você sabe, quer procurar o código que está conectado ao componente que conterá, como, por exemplo, tarefa é, outros componentes. Você precisa pular entre o FIS e, para ser honesto, acho improdutivo, ok Mas se você está trabalhando em um projeto muito grande com muitas pessoas, talvez esse seja o caminho a percorrer. Mas na maioria das vezes, não há necessidade de dividi-lo em PIs, a menos que você veja a possibilidade como: Ok, eu tenho que ter esse botão de classificação em outro componente porque eu tenho botões de classificação para muitas coisas diferentes, por exemplo, certo? Então, sim, faça isso instantaneamente. Caso contrário, mantenha-o em 15 porque também gostaria de acrescentar que, você sabe, se você decidir que isso precisa estar em um arquivo separado, quanto tempo vai demorar? Você só precisa levar o código daqui para outro arquivo e ele em um arquivo separado. Agora você pode reduzir esse componente em qualquer lugar. Então é assim que eu faço as coisas. Isso realmente depende da empresa. Você precisa seguir as regras lá. Mas se você está desenvolvendo coisas por conta própria, acho que se decidir criar um arquivo diferente para cada componente total, por precaução , perderá muito do seu precioso tempo, certo? Isso simplesmente não é necessário. Ok, então agora temos um componente aqui, certo? E para ser honesto, agora precisamos fazer o que fizemos antes. Então, antes de fazermos algo assim, certo? Mas porque eu copiei daqui, certo? Mas em vez de usar o identificador similar classifique diretamente porque não temos acesso a ele a partir dessa função específica, certo? Precisamos fazer o quê? Precisamos, tipo, usar a função que foi enviada aqui. O nome desse adereço é o mesmo de antes, então podemos ficar com ele E nosso código deve estar funcionando agora, mas, como você pode ver, não podemos ver o botão. É porque percebem que usamos o JSX aqui, mas não o devolvemos, certo Então, precisamos devolver o que fizemos aqui, certo? Agora, como você pode ver, podemos usar nosso código como antes, mas dividimos um único componente E agora eu te mostro uma espécie de atalho para escrever esse componente, ok? Porque existe uma maneira de, tipo, não precisar retornar para componentes simples como aquele JSX Tudo o que você precisa fazer é remover essa parte e, em vez de usar colchetes aqui, usaremos apenas E como você pode ver, ainda está funcionando bem, certo? É como uma versão curta. Acho muito legal porque, bem, escrever return e depois adicionar parênteses também leva tempo Gosto das versões curtas e também mais fáceis de ler para uma situação como essa. Isso está na aula. Nas próximas palestras, mostrarei como dividir os componentes em outros componentes, e você também pode tentar fazer isso sozinho, certo, para se exercitar 140. [EXERCÍCIO] - Refatorando o componente de item de tarefa: Olá, meu amigo. Hoje é um exercício que você pode tentar fazer sozinho. Quero que você divida essa parte do seu código em outro componente que chamará o item de tarefa e será responsável por lidar com a renderização de apenas uma tarefa individual, certo? Porque a lista de tarefas é como um componente que gerencia todos os minicomponentes no momento. Mas o item da tarefa é responsável apenas por exibir os itens da tarefa. Posteriormente, por exemplo, você poderia reutilizar esse componente se decidir em uma lista diferente, por exemplo Portanto, você pode criar um componente separado ou dentro do componente da lista de tarefas agora e, no futuro, colocá-lo em outra fase. É assim que você faz, como eu disse, na área da palestra anterior Mas, por enquanto, tente dividi-lo. Eu vou te mostrar como fazer isso. Mas tente fazer isso sozinho , porque esse é um ótimo exercício. Então, como faço para abordar um problema como esse? Primeiro, podemos comandar o que temos aqui, ter, tipo, você sabe, ver o que tínhamos antes, certo? E agora o que precisamos fazer. Precisamos, tipo, criar um componente, para que ele seja chamado de item de tarefa, certo? E precisamos decidir o que enviar para ele. Sim, precisamos de uma chave porque, sem a chave, não conseguiremos identificar itens específicos. Precisamos de uma tarefa e também precisamos enviar uma função para remover uma tarefa específica, certo? E todas as outras coisas, como ID da tarefa, agora estarão dentro do item da tarefa, então podemos usar facilmente todas as informações para fazer essa parte aqui. Então, retire o comentário, corte-o e preparamos o uso do componente aqui, mas ainda não o usamos Observe também que a chave não é o que enviamos para o componente do item da tarefa. Isso é o que enviamos como sondas, mas a chave é apenas uma propriedade. Não são sondas É um atributo usado no react para especificar a chave, a exclusividade de um elemento específico, como, por exemplo, item de tarefa ou formulário ou qualquer outra coisa, certo? Portanto, isso não foi enviado para o item da tarefa. É como, Ei, especificamos a chave aqui, mas aqui temos o resto, certo? OK. E agora acho que vamos fazer o que fizemos antes. Então, vamos especificar nosso item de tarefa interno. Então, tudo o que precisamos fazer é criar um item de tarefa, certo. E sim, a sugestão aqui é boa porque eu vi que decidimos usar a sintaxe da palestra anterior de P, e agora precisamos colar o que tínhamos antes, certo, assim E agora a tarefa já foi usada corretamente aqui, mas não precisamos definir a chave agora porque a chave foi definida antes, certo? Portanto, a chave não é necessária aqui. E sim, mostramos o texto e, depois, temos um padrão que, ao clicar, invoca função de remoção com o ID da tarefa vindo daqui, E agora, quando vamos aqui, como você pode ver, quando adicionamos uma tarefa, quando a removemos, algo não está funcionando. Por que isso? Vamos abrir o console, clicar aqui e ver a mensagem de erro. Como você pode ver, diz que remover não é uma função no onclick, e é verdade porque a chamamos aqui na tarefa de remoção Então, talvez vamos alterá-lo para remover. E agora, como você pode ver, está funcionando como antes, conforme planejado, certo? Para dividir componentes, tudo o que você precisa lembrar é o que você precisa enviar para eles, certo? Que tipo de adereços. E depois exiba o que eles exibiram antes. 141. REFACTOR: TaskForm: Olá, meu amigo. Hoje, vamos dividir algo que é chamado de formulário em outro componente. Então, vamos fazer com que um novo componente seja responsável usando o único responsável , pré-simples, por lidar apenas com a entrada do formulário e a lógica de envio, certo? Então, essa parte do nosso código quer ser movida para outro componente. Como abordar isso? Bem, precisamos criar um novo componente. Digamos que vamos chamá-lo formulário de tarefa, certo, assim. E precisamos decidir agora o que enviar para esse formulário de tarefas porque, veja, há um problema. O problema é que estamos realmente usando uma função, como, por exemplo, lidar com uma tarefa. Isso é trabalhar em definir dicionário de tarefas, definir nova tarefa. Está trabalhando na referência da tarefa de entrada. Uau, isso também é algo como se estivéssemos trabalhando em algo que está dentro desse formulário, certo? Então, isso vai ser um pouco diferente. Então fique comigo. Então, vamos excluir isso e a abordagem que vamos adotar é criar um suporte, ok, que chamaremos de handle at task Não vamos fazer o que foi sugerido aqui, mas vamos apenas criar um identificador na tarefa. Então, a única coisa que vamos enviar em nossa situação será essa função aqui, ok? Nada mais. E com base nisso, precisamos decidir como escrever bem, nosso novo componente, certo? Então, vamos aqui e vamos digitar o formulário de tarefas, certo? E, sim, iguais, nós ligamos para? Não, chamamos isso de forma diferente na tarefa AT. Assim. E, você sabe, o problema é que agora precisamos usar colchetes É porque agora precisamos devolver tudo o que fizemos antes, então isso, certo? E também, precisamos, tipo, fazer algumas coisas aqui em cima. É porque precisamos acessar coisas aqui dentro de nossas tags HTML, como impostos, que na verdade vêm do formulário principal da tarefa. E isso é um pouco problemático. Como resolvemos isso? Além disso, lembre-se de que o formulário de tarefas deve ser responsável por coisas que estão conectadas ao formulário de tarefas. Então, digamos que temos aqui uma nova tarefa. Você acha que deveríamos ter na lista de tarefas? Como a lógica responsável por criar uma nova tarefa. Não, vamos subir, certo? Essa é a primeira coisa que precisamos mudar, certo? Ok, a segunda coisa que precisamos ter é, tipo, observar bem, nós estamos indo para onde está? Desculpe. Entrada, certo? Referência da tarefa de entrada. Não é necessário agora aqui, então precisamos movê-lo para cá, ok? Então, o que mais está aqui para fazer? Ao enviar. Chegamos aqui no envio, e acho que agora precisamos escrever nossa própria função para entregar o envio, que baseará uma parte do envio na função enviada aqui. Ok, eu sei que é um pouco complicado no momento, mas acho que é uma boa ideia Logo vou te mostrar por que isso acontece, ok? Aqui estamos usando definir uma nova tarefa, que temos aqui agora. Nós temos isso. Está bem? Então, precisamos, tipo, Ok, vamos verificar o que temos e o que não temos. Então, nova tarefa, sim, está lá. Precisamos criar uma função chamada handle submit. Ok, isso é isso. E agora precisamos decidir quais partes devem acontecer em forma de tarefa, certo? Então, quando estamos lidando com o envio agora, algumas partes como essa que fizemos aqui estão realmente relacionadas ao tratamento do botão de envio, certo? Portanto, queremos evitar o comportamento padrão de todo o nosso aplicativo. Queremos nos concentrar na referência do imposto pago, ok? Tudo bem. E se nada for colocado, então vamos parar, certo? E agora, isso é crucial para entender o que vai acontecer. Observe que a sugestão aqui é perfeita porque queremos usar para adicionar a tarefa específica, qual é a nossa função que foi enviada ao formulário de tarefas, certo? Dessa forma. Depois, defina o valor da entrada para nada, certo? Mas quando passamos para essa coisa logo na tarefa, perceba que estamos aqui, já enviamos o identificador na tarefa, certo? Então isso e observe que aqui, temos uma função que tem um evento aqui, e isso não é o que temos aqui, certo? O que enviamos aqui usando a nova tarefa? Nós realmente enviamos o valor atual dessa entrada, certo? Então, vamos chamá-la, por exemplo, de nova tarefa, direita ou novo texto de tarefa. Depende de você, porque você é como quem diz como a variável cod será chamada E lembre-se de que isso não é um evento desta vez porque handle at task não é invocado automaticamente quando o evento de envio acontece, certo? Atualmente, este é nosso próprio adereço, certo? Então, o valor aqui é realmente aquele que está vindo daqui, certo? OK. Então, podemos chamar isso de nova tarefa, talvez manter tudo igual, certo? E sim, você está atualizando as tarefas. E sim, essa é nossa responsabilidade porque estamos dentro da lista de tarefas, certo? Isso é bom. Agora, então, estamos classificando tudo Sim, isso também é bom. E estamos configurando o dicionário de tarefas para um novo. E essa parte será removida porque a lista de tarefas não é mais responsável por quê? Por definir a entrada da nova tarefa para nada, certo? OK. E sim, acho que deveria funcionar. Vamos experimentá-lo. Como você pode ver, acabamos de adicionar tudo o que adicionamos aqui, ele será adicionado. Também podemos classificar. Então, tudo está funcionando como antes, mas agora dividimos E agora, depois dessa palestra, você pode estar se perguntando se precisa dividir as coisas assim, certo? Veja, isso realmente depende do projeto, certo? Às vezes, é fácil simplesmente colocar tudo em um componente e, você sabe, encerrar o dia. Se você está escrevendo algo muito rápido, se você pensa que este é um projeto pequeno, você só quer se divertir. Mantenha-o em um componente. Esse é o seu trabalho, certo? Mas se você está trabalhando com outras pessoas, é bem melhor, você sabe, começar a pensar em como dividir as responsabilidades, certo? Porque agora cada componente é menor e é mais fácil de entender. Eu sei que pode parecer estranho para você agora, quando você está preocupando em refatorar tudo que é mais fácil de entender Mas é porque estávamos escrevendo o código dentro de um, você sabe, grande componente antes. Por muito tempo, certo, você acabou de se acostumar com isso. Mas se você tivesse um programador que nunca viu esse código, certo, e ele visse esse grande componente com tudo dentro dele, ele ficaria mais confuso ao ver algo assim Está bem? Então, prefiro pensar dessa maneira, ok? Você prefere, você sabe, trabalhar com outras pessoas no futuro. Então, quando você quiser alterar algo como um recurso, como o estilo do formulário, você não afetará outros componentes e sabe que só pode se limitar a esse lugar para fazer coisas relacionadas ao formulário, certo? Porque essa é a responsabilidade por isso. Além disso, há algo bom chamado teste, e se tornou simples se os componentes estiverem focados em uma coisa, certo? Você pode testar cada componente individualmente. Além disso, quando você divide as coisas como fizemos agora, haverá algum tipo de otimização em segundo plano ao renderizar novamente o modelo de objeto de documento virtual sobre o qual falamos anteriormente Então, antes de termos um grande componente, sempre que alguma coisa mudava, em relação ao formulário da tarefa, ao botão de classificação , ao item da tarefa, toda aquela função com todas as instruções precisava ser executada e a cúpula virtual precisava ser alterada E depois, se houvesse uma mudança real no estado, ou seja, o que é visível para o usuário , a alteração foi aplicada. Mas sim, todas essas coisas foram executadas em cada renderização. Isso realmente não é algo que você precisa se preocupar em aplicativos pequenos, mas em aplicativos maiores, isso se torna problemático, certo? Então, agora que dividimos tudo, isso significa que pode haver algum tipo de otimização em segundo plano. Digamos que quando o novo estado da tarefa muda, somente o formulário da tarefa é renderizado novamente, certo? Nem toda a lista de tarefas. Certo? Você pode otimizá-lo ainda mais no futuro usando a memorização, sobre a qual você pode aprender Ou talvez, no futuro, o React seja feito automaticamente para você, porque haverá algo bom, chamado compilador em reação Mas sim, há algum tipo de otimização que reage com o processo em segundo plano. Portanto, há vantagens em manter tudo organizado e não tudo em um grande componente. Mesmo que, você sabe, os componentes internos, como, você sabe, o botão de classificação que tínhamos, a tarefa e o formulário de tarefas estivessem muito conectados um ao outro, certo? Mesmo se você dissesse: Ok, esse aplicativo nunca sairá do escopo, certo? Ainda assim, é uma boa ideia dividi-lo. E, por exemplo, eu gostaria de resumir esta lição dizendo que depende da sua situação Portanto, não sejam como, você sabe, gurus na Internet que dizem: Não, você tem que fazer isso dessa maneira Não, você tem que fazer isso dessa maneira, e então você fica ansioso com o seu código Por exemplo, continue fazendo coisas e, tipo, destrua-as. Porque enquanto você cria seu código, se ele é bom ou não, não importa. Enquanto estiver criando, você aprenderá com seus erros porque dirá: Oh, é por isso que eu deveria ter feito dessa maneira. Está bem? Apenas continue fazendo. Você vai ficar bem.