Série de modelos de objetos de documentos 2023 — Parte 4: eventos do DOM (criando, escutando e reagindo a eventos)

1. Introdução do curso — DOO: Woo hoo, meus queridos alunos. Bem-vindo, bem-vindo de volta a mais uma aula emocionante em uma série inteira tudo sobre o dom. Eu sou Clyde, eu vou ser seu instrutor e espero que você esteja acompanhando porque cada classe se baseia em si mesma. Mas esta classe pode estar tomando de forma independente ou iCloud, o que é possível sobre esta classe é tudo sobre eventos. Agora, se as veias são cruciais para entender quando se trata de trabalhar, porque muitas vezes você não quer apenas afetar o DOM. Você não quer começar a mexer com um aplicativo da Web até que um evento aconteça. O que eu quero dizer com um evento? Bem, existem muitos tipos diferentes de eventos e cada tipo de evento tem suas próprias propriedades e métodos anexados a ele. Eventos como eventos de keyup. Quando o usuário toca no teclado, que tal um evento de clique? Isso é comum quando um usuário clica em um botão, às vezes você quer algo exibido, às vezes uma veia de rolagem, às vezes um evento de carregamento de página, a lista continua, eles são toneladas disso. Mas antes mesmo de chegarmos aos diferentes tipos de veias, você precisa entender os eventos trazidos apenas os eventos. Você precisa entender a diferença entre ouvintes de eventos e manipuladores de eventos. Você precisa entender como aqueles para a página. E nós temos uma variedade de maneiras de fazer isso. Podemos usar ouvintes de eventos embutidos, propriedades de evento embutido e podemos usar o método addEventListener. Então eu vou estar discutindo tudo isso. Vou discutir os prós e contras de usar um sobre o outro. Eu vou recomendar o que eu acho que é a melhor abordagem que realmente vai ser divertido. Então, sem mais delongas meus alunos idéia, Vamos entrar na primeira palestra sobre eventos DOM, peso ícone, áudios. 2. O que é um evento: Estamos entrando nisso. Super, super animado. Estou super amped e um Po2 inteiro. Este vai ser um curso realmente incrível sobre técnicas avançadas quando se trata de manipulação DOM. E por que esse curso é tão excitante? Bem, pela simples razão de que até agora, ao aprender os fundamentos do DOM, você praticamente só viu como modificar o DOM no console. E isso significa que é temporário. Em outras palavras, toda vez que a página era atualizada, nossas alterações eram perdidas. O objetivo deste curso é combinar o que aprendemos até agora para criar páginas dinâmicas. E para fazer isso, temos que entender uma palavra simples que tem um tópico muito complicado, eventos. Certo, parede fina, quais são os eventos? Deixe-me pegar essa pedra e jogá-la na tela. Ok, esta é a pergunta, o que é um evento? Bem, eu sempre gosto de começar a cinta simplisticamente nas rachaduras e evento é apenas uma ação que um usuário ou um navegador tomou. E os muitos tipos diferentes de eventos como quando um usuário passa o mouse sobre um elemento, quando um usuário clica em um elemento, envia um formulário, o navegador pode até enviar as veias quando a página termina de carregar. E quando um usuário pressiona uma tecla? Estes são apenas alguns exemplos de diferentes tipos de eventos, mas eles são muitos, muitos mais. Então sabemos que um evento é uma ação que o navegador do usuário toma. Importante, porém, um evento sempre ocorre no navegador. Ok, legal. Em um nível muito alto, sabemos o que é um evento. Sabemos que tipo de estranho acontece. Mas como usamos os eventos para nos concentrarmos nessa palavra? Como acessamos esses eventos? Como interagimos com eles? Como ouvimos esses eventos? E a resposta é rodar os tambores. Javascript. Isso é certo. Javascript em evento está relacionado com JavaScript. E codificando respostas JavaScript que são executadas em um evento. Como os desenvolvedores podem exibir mensagens para nossos usuários, podemos validar filha, clique no botão do reator, e muitas, muitas outras coisas. É muito, muito emocionante que haja uma ressalva. Eu só quero dizer, sim, webby veias em não parte da linguagem JavaScript principal. Comportar mal esta distinção em mente. Então o que eu estou tentando dizer é que as veias em si são dadas a nós pela API DOM. Lembre-se das APIs DOM incorporadas no navegador. Javascript é apenas uma das muitas linguagens que normalmente usamos para acessar e interagir com esses eventos. Isso faz sentido? Espero que sim. E não se preocupe se estiver um pouco perdido. Tudo o que vamos entrar em toneladas de detalhes neste curso sobre eventos. Você realmente vai se tornar um grande mestre e eventos eu estou super, super animado. Então fique motivado, continue. E vejo-te na próxima palestra. 3. Duas coisas mais importantes para saber: Lembre-se, os eventos são cruciais para entender e dominar o desenvolvimento de front-end. E é por isso que vou passar muito tempo nesta primeira seção do curso explicando eventos em veias são apenas ações tomadas pelo usuário ou pelo navegador. Embora você possa executar uma função quando sua página é carregada, principalmente, você vai querer executar código quando o usuário faz algo como quando um usuário clica em um link no formulário rola o mouse sobre um objeto ou faz outra coisa. E lembre-se, todas essas ações são chamadas de eventos. E como mencionei na palestra anterior, muitos tipos diferentes de eventos. E cada um tem o seu próprio nome. Por exemplo, quando um usuário clica em um botão, surpresa, surpresa que o evento clique é acionado. Quando o usuário pressiona uma tecla. Um evento de tecla pressionada é acionado quando o navegador apresenta e carrega todos os dados do servidor, um evento de carregamento é acionado. Então lembre-se, assim como na sua vida pessoal, você tem muitos eventos diferentes, como uma festa de aniversário, um evento de casamento, et cetra, et cetra. A mesma coisa acontece no seu navegador. São eventos que acontecem o tempo todo. Ok? Ok, você já entendeu. Vamos seguir em frente. Você precisa entender duas coisas para dominar eventos e eles não são tão difíceis. O que são eles? Em primeiro lugar, precisamos entender qualquer ouvinte de eventos. O que é um ouvinte de eventos? É bastante intuitivo. Na verdade. Um ouvinte de evento anexa uma interface responsiva a um elemento. Cabeças frias, um pouco de água cheia. Quero dizer, pense nisso assim. Quando anexamos um ouvinte a um elemento, estamos permitindo que esse elemento específico para esperar e ouvir um determinado evento para disparar. Segundo, faça sentido. Não te preocupes se ainda não compreenderes isso. Vamos ver muitos, muitos exemplos neste curso. Por enquanto, basta entender que precisamos colocar um ouvinte em um elemento, a fim de ouvir um evento específico. E não há apenas um tipo de escuta. Eles são três maneiras de atribuir ouvintes de eventos a elementos. Temos ouvintes de eventos embutidos em propriedades de linha, ou podemos usar ouvintes de eventos. E vamos analisar todos esses três métodos para garantir que você esteja familiarizado com cada maneira e evento pode ser acionado. E então, é claro, vamos discutir os prós e contras de cada método. Ok, então nós falamos sobre o ouvinte de eventos. Qual você acha que a segunda coisa mais importante é quando se trata de evento? Pense sobre isso. Você pode adivinhar? Temos um elemento que está ouvindo um evento e agora dizem que um evento realmente acontece. O que acontece a seguir? Agora tenho certeza que você adivinhou. Precisamos de um manipulador, precisamos de algum tipo de execução. Precisamos dizer ao navegador, ok, Legal, o que você faz? E isso nos leva a manipuladores de eventos. O ponto importante a observar é que cada evento disponível, um evento clique, um evento keypress, excêntrico cetera, tem que ter um manipulador de eventos. E um manipulador de eventos apenas um bloco de código. Normalmente, uma função JavaScript que você e eu escrevemos como programador é executada quando o evento acontece. E quando um evento acontece como programa é como usar palavras extravagantes, então usamos a palavra lutas. Quando um evento é acionado. Executamos esta função manipulador. E um pouco de informação, muitas pessoas, e quando você começa a pesquisar essas coisas, muitos desenvolvedores costumam se referir a EventHandlers como ouvintes de eventos. E embora eles são muito próximos, eles, estritamente falando sobre não a mesma coisa. Embora eles sempre trabalhem em conjunto, eles trabalham juntos. Basta lembrar que o ouvinte escuta para o evento acontecendo. E o manipulador é o código que é executado em resposta a esse evento acontecendo. Agora, na verdade, só quero fazer uma pausa aqui. Você tomou em coisas muito, muito importantes quando se trata de evento. E quero que faça uma pausa. Eu quero que você apenas, eu quero que isso absorva. E na próxima palestra, quero que vejamos esses métodos de ouvinte com um pouco mais de detalhes. 4. Escute os eventos em linha: Tudo bem, vamos continuar de onde paramos. Lembre-se, nós estávamos falando sobre, uh, veias e nós precisávamos entender as duas coisas mais importantes para eventos de Moscou e aqueles eram ouvintes de eventos e manipuladores de eventos. Agora, quero que nos concentremos no ouvinte. E, em particular, eu quero olhar para as diferentes maneiras de adicionar ouvintes a um elemento. E para refrescar sua memória. Havia três maneiras que, com três maneiras diferentes, poderíamos adicionar ouvintes aos elementos. Ouvintes de eventos embutidos em propriedades de linha e ouvintes de eventos. Estranho, não é muito intuitivo, mas quero que discutamos cada um deles. E ao fazer isso, você terá uma sensação muito mais intuitiva de como eles funcionam. Então eu convidado não é melhor lugar para começar, em seguida, com o primeiro método, ouvintes de eventos inline. Agora o que eu quero que nós façamos é que eu quero que nós assumamos temos um botão em nossa página e quando esse botão é clicado, tudo o que nós entramos fazer é alerta, boom, para o usuário. Uma página muito simples. Nada extravagante. Então, como iríamos escrever isso? Em primeiro lugar, precisamos do nosso HTML. Nosso HTML consiste em um elemento de botão. Dentro do elemento botão, é aqui que a magia acontece. Como você pode ver, nós escrevemos onclick, nós atribuímos isso a uma função chamada boom. Não se preocupe muito sobre como tudo isso funciona e onde obtemos esse onclick. Por enquanto, basta perceber que esse evento onclick ou essa palavra onclick é fornecido a nós pela API DOM. Em seguida, atribuímos ao valor do boom. E essa queimadura no nosso caso, vai ser JavaScript. Vai ser uma função JavaScript que executamos. O que significa que sim, temos que escrever JavaScript. Podemos colocar isso em linha e script tags ou pode estar em um arquivo externo. Mas aqui vamos nós. Temos o nosso JavaScript. Nós definimos uma função chamada boom. E sim, nós apenas alertamos queimar para a tela. Este, meus queridos alunos, é um EventListener inline. Mas deixa-me mostrar-te como funciona. Deixe-me pular para o editor de codificação e vamos vê-lo em ação. Ok, vamos ver como funciona um ouvinte de eventos em linha. E neste curso você vai me ver usar muito o código do Visual Studio. Em primeiro lugar, é grátis. Em segundo lugar, é incrível. E em terceiro lugar, temos que usar um editor de texto, e este é exatamente o que eu escolhi. Agora, quando eu estou usando Visual Studio Code, também estão usando Live Server e quer viver servidor faz em seu núcleo muito básico, porque ele me permite executar meu computador como um servidor. Então o que eu posso fazer é quando eu mudar as coisas no HTML seria automaticamente e atualizar o navegador. Se você quiser saber mais, por favor me pergunte em P & R. Caso contrário, é super, super simples de dominante Visual Studio Code. Veja a guia Extensões e, em seguida, baixe o Live Server. Mas o suficiente disse, vamos olhar para um ouvinte de eventos em linha e como ele funciona. O ponto de partida é escrever o nosso HTML. Você pode ver aqui eu coloquei uma página em branco. Então vamos apenas sentar um modelo HTML muito em branco. Então eu quero criar uma tag body dentro de uma tag body, vamos inserir este botão. E, claro, vamos chamá-lo de Click Me. E o que temos que fazer? Isso é certo. Temos que adicionar esta propriedade EventListener in-line e é chamado onclick. Mais uma vez, isso é dado a nós pela API DOM. Esta não é uma palavra que eu escolhi. Temos que usar essa palavra no clique. Se quisermos ouvir o evento clique, então a próxima coisa que temos que fazer é que, em seguida, definir um manipulador de eventos. Vai ser chamado toda vez que este evento for disparado. E neste caso, eu quero definir uma função chamada boom, nós passamos por isso, nós vimos isso. Então lá vamos nós. É assim que HTML. Mas agora, se salvarmos isso e você sabe o que, deixe-me apenas remover-me clicando no botão que vemos no canto inferior direito, que é do Live Server. E isso me permite exibir isso na vida de um navegador. Clique nesse botão. E aqui vamos nós. Estes são Click Me botão que definimos em nosso HTML. Mas se eu clicar nisso, nada vai acontecer, certo? E se inspecionarmos este documento, veremos algum tipo de erro no console. Então, sim, a atualização do console e vamos clicar no botão. Boom, não está definido. Isso faz todo o sentido, direitos. E é por isso que temos que incluir nosso JavaScript porque temos dois define função boom. Vamos voltar ao nosso código. Agora é incluir tags de script. E eu sei que não é ideal ter JavaScript embutido, mas quer saber? Este é um exemplo tão simples. Haverá bom para os nossos propósitos. Tudo o que temos que fazer agora é definir uma função chamada Bu. Claro que temos que usar a palavra-chave função em JavaScript dentro definir um nome de função, que neste caso é chamado boom. E nas chaves encaracoladas isso é que podemos definir a carne da nossa função. Neste caso, nós só queremos alertar boom, para a tela. Então, se salvarmos isso, volte para o nosso navegador. Vamos remover isso agora. E se clicarmos neste botão, boom, temos esse alerta. Quão legal foi isso? E este é um ouvinte de eventos em linha. Incrível. Tenho certeza que você pode ver como é fácil e intuitivo. E se, Por que você sabia que este EventListener inline é o primeiro método de registrar manipuladores de eventos encontrados na web. Bastante interessante. Então este é o ponto de partida. Este foi o ponto de entrada em ouvintes de eventos. Que legal. E pode parecer fácil de usar como atributos de manipulador de eventos. Se você apenas vai fazer algo realmente rápido que eles rapidamente se tornarão incontroláveis e ineficientes. Mas de qualquer forma, vamos discutir mais sobre isso mais tarde. Deixe-me não lhe dar um alerta de spoiler. 5. Propriedades em linha: Antes de seguirmos em frente, eu só queria liberar energia entre ouvintes de eventos e manipuladores de eventos. Essa propriedade onclick é a propriedade de ouvinte fraco que está sendo usada nessa situação. É essencialmente como qualquer outra propriedade que usaríamos em um botão, como conteúdo de texto, por exemplo, ou estilo. Mas neste caso, sabemos que é um tipo especial de propriedade porque quando o definimos igual a algum código, sabemos que coalhar ser executado sempre que o evento é acionado no botão. Portanto, apenas tenha em mente que onclick é o ouvinte. Esse boom, é claro, é o manipulador de eventos. Ok, ok, você tem a nós, vamos seguir em frente. Vimos em ouvintes de eventos de linha, agora é hora de olhar em propriedades de linha. E novamente com as propriedades do interior, vamos precisar do nosso HTML e vamos precisar de JavaScript. Mas como você verá, nosso código é escrito um pouco diferente. Com o HTML, nós literalmente apenas temos um elemento botão. Como é fácil e intuitivo que não temos código extra. Não é tão confuso porque nós temos apenas um elemento botão com Click Me, gosto entre as tags, algum embaçado. Eu vou JavaScript então tem que ser um pouco mais complicado, mas pelo menos isso juntos e em um só lugar. Então, a primeira coisa que temos que fazer, e vimos isso na Parte 1 da nossa série. Nós sabemos disso. A primeira coisa é que temos que agarrar esse botão e aqui começamos no documento, a página web padrão. Nós acessamos uma propriedade chamada QuerySelector. E é claro que pegamos o botão. Agora, dentro do nosso JavaScript, podemos adicionar uma propriedade inline chamada, você adivinhou no clique. E lembre-se que em propriedades de linha muito especiais porque quando esse evento é acionado, ele executa automaticamente o código ao qual atribuímos essa propriedade. Sim, vamos atribuir o código de alerta. Boom, vamos verificar isso no nosso editor de codificação. Agora queremos olhar em propriedades de linha e como eles funcionam. Então, vamos excluir nosso código do exemplo anterior aqui. E vamos começar apenas com o nosso botão. E, claro, nosso HTML agora é ainda mais simples, certo? Temos um ônibus e clique em mim. Mas neste momento não anexamos nenhum ouvinte, nenhum ouvinte de eventos a este elemento todas as noites. E é por isso que nosso JavaScript recebe vacinas um pouco mais complicadas. Mas então pelo menos todo o nosso código está em um bloco que não está dividido entre HTML e JavaScript. Então, o primeiro passo é criar nossa tag de script, como vimos no exemplo. E íngreme. Um. Leia seus elementos. Queremos agarrar o botão porque é isso que queremos anexar. Vamos chamá-lo de botão btn. E, claro, estamos muito familiarizados com isso da parte 1. Temos que começar em nosso objeto de documento. Nós não fizemos. Xy é uma propriedade chamada QuerySelector. Também podemos fazê-lo de outra maneira é esta é a maneira que eu quero usar e nós queremos ver alguém animais. Então lá vamos nós. Nós realmente fomos. Segundo passo. Você se lembra? Vamos escrever. Temos que adicionar as veias e o código para executar. Então é bem simples. Só pegamos nosso botão dentro, queremos adicionar propriedade a tudo onclick, não é? E novamente, essa palavra onclick é dada a nós pela API DOM e permanecer. Mas o que acontece quando este evento clique é disparado? O código que atribuímos esta propriedade onclick será executado automaticamente. Então é isso que temos que fazer agora. Temos que assinar um bloco de código. Aqui. Vou usar a nova era. Se você não sabe o que é isso, não se estresse. Eu cubro você. Fiz um curso inteiro sobre JavaScript. Estamos falando de coisas assim. Na verdade, é chamado de círculos de vovó completos JavaScript, paz. Você não pode deixar, se você já sabe. Vamos seguir em frente. Aqui vamos nós. Então lá vamos nós. E, claro, dentro dessas chaves é onde a carne, o coração do nosso código pertence. E sim, eu sei que as instâncias de terra não são muito complicadas porque tudo o que estamos fazendo é alertar a benção para a tela. Então você tem isso? Esta é uma propriedade inline. E isso é chamado de propriedade inline porque vamos pensar sobre isso dessa maneira. Nosso HTML é apenas padrão. Não fazemos nada de especial. Em nosso JavaScript. Adicionamos essa propriedade embutida chamada onclick, e nem sempre precisa ser desclicada. Toda a sua infinidade de coisas que podemos acrescentar aqui. Estamos apenas olhando para o evento onclick. Temos que adicionar isso como uma propriedade ao nosso botão. E então, é claro, definimos o código que é executado. Nós netted VTE Apesar. Se voltarmos ao nosso navegador, atualize, clique neste botão, e lá vamos nós. Missão de bomba concluída. 6. O método addEventListener(): Bem feito perto de hélio, vindo ao longo do caminho, acabamos de ver em propriedades de linha, esperança está se tornando mais intuitiva e espero que você se divirta. Então lá vamos nós. Nós olhamos para ouvintes de eventos em linha. Analisamos as propriedades em linha. A terceira e última coisa que temos que discutir é agora ouvintes de eventos. Mais uma vez, precisamos de HTML e JavaScript. Como HTML pode ser muito simples, assim como quando usamos em propriedades de linha. E assim como quando estávamos olhando em propriedades de linha, temos que incluir toda a nossa magia no próprio JavaScript. Então o primeiro passo é que temos que agarrar o botão. Já sabemos como fazer isso. Eu só vou estar usando um seletor de consulta para ajustar esse padrão. É agora que temos isso, mas um JavaScript final, o que eu quero fazer agora é usar um ouvinte de eventos. Então o que fazemos é acessar nosso botão e adicionamos essa propriedade chamada add event ouener. Novamente, essa é uma palavra-chave fornecida a nós pela API DOM. É preciso dois argumentos e vamos entrar nisso em muito mais detalhes mais tarde. Não se preocupe, agora, apenas perceba que são necessários dois argumentos. O primeiro argumento é o que o evento é que queremos ouvir, e o segundo argumento é o manipulador de eventos. Aqui queremos ouvir o evento clique e queremos executar um manipulador de eventos chamado boom. Em outras palavras, queremos definir uma função chamada boom e executar dívida, que é o passo final. Definimos uma função chamada boom, que será executada quando esse evento é acionado. Este método, addEventListener, esta terceira solução tem alguns prós. Em primeiro lugar, é o padrão mais recente que permite a atribuição ou mais de uma função como ouvintes de eventos para um evento. Isso é realmente a coisa legal sobre isso. E, claro, também vem com uma infinidade de outros conjuntos úteis de opções. Novamente, não se preocupe ainda com os detalhes. Estamos apenas olhando para o alto nível aqui, Vamos saltar para o editor de codificação e vamos ver como isso funciona em ação. Estamos quase, quase terminando agradável e eles estão fazendo isso, tão bem. Agora vamos estar falando sobre o método mais recente, e que é o método addEventListener. Como é que isso funciona? Bem, se começarmos com isso, apague tudo. Começamos por esse botão, o botão Click Me. Novamente. Nosso HTML é muito, muito limpo. Não é bagunçado. E tudo o que fazemos agora tem que ser escrito em JavaScript, o que, você sabe, você pode argumentar torna o JavaScript mais complicado. Contrariamente a isso, porém, é que pelo menos tudo está em um só lugar. Por isso, faz com que o seu código seja muito mais sustentável. Uma vez que seu site começa a ficar cada vez mais complexo, espero que faça sentido. Mas vejamos um exemplo. Passo 1 é o quê? Isso é certo. É o mesmo que o método anterior. Temos que encontrar o elemento que queremos anexar um ouvinte de eventos para. Neste caso, é o bastão. Então encontre os elementos aos quais queremos adicionar um ouvinte de eventos. E sim, alistado colocou em uma variável chamada botão. Claro que acessamos nosso documento, acessamos a propriedade chamada QuerySelector com no documento e pegamos nosso botão. Então, se também um bom, Agora temos o nosso botão. Sabe como isso funciona, então qual é o próximo passo? O próximo passo é que temos que adicionar este método, adicionar ouvinte evento a este botão. Stick para adicionar o ouvinte de eventos ao nosso botão. Então, tudo o que temos que fazer para isso enquanto acessamos nosso botão. Em seguida, adicionamos esta propriedade de ouvinte de evento add ao nosso botão. E essa propriedade addEventListener é um método mais recente. É incrível. É muito, muito bom e você vai ver o porquê mais tarde neste curso. E como mencionei, são necessários dois argumentos. O primeiro argumento é o evento que queremos ouvir, que tem clique. E o segundo item, ou o segundo argumento é a função que queremos executar, que neste caso, vamos chamá-lo de boom, que nos leva ao terceiro passo. E isso é definir essa função de boom. Passo três leva Fine. Função “boom”. E aqui vamos nós. Vamos apenas usar a palavra-chave function dada a nós pelo JavaScript. Em seguida, definimos uma função chamada boom. E, claro, o nosso boom, isso vai ser um alerta de explosão muito chato. Lá vamos nós. E se guardarmos isso e vamos ao nosso navegador e clicarmos neste botão. Boom, feito e polvilhado. 7. Resumo: Quem você tem que ter uma quantidade incrível de Walden. Então nós olhamos para a aventura inline em propriedades de linha e agora nós apenas vimos ouvintes de eventos em ação. Mas a única coisa que eu quero salientar aqui é que não importa o método que usamos, que você percebe que todos os três produzem exatamente o mesmo resultado. Então, quando se trata de exemplos muito simples como o que usamos agora, onde é apenas um simples evento de clique de botão. Isso realmente não importa qual método você usa. Sabe, essas coisas só pararam de se tornar realmente importantes quando você para de intimidar. Ciência muito mais complicada. Mas de qualquer maneira, Suficiente disse que você entende são todos os três trabalhos que vamos estar discutindo agora esses métodos com mais detalhes à medida que avançamos. E se você for como eu, você está ansioso para começar a entrar em exemplos mais concretos e sólidos. E confie em mim, vamos aguentar o nome pendurado. Vamos entrar em coisas legais e legais neste curso. Vejo você na próxima palestra. 8. Escute em eventos em linha — Visão detalhada: Antes de começarmos a ficar mais avançados, só quero recapitular agora com um pouco mais de detalhes. Cada um dos três métodos que acabamos de discutir sobre como adicionar ouvintes de eventos a um elemento. E o primeiro que discutimos foi este ouvinte de eventos em linha. E como você sabe, esta é a maneira mais fácil. É a maneira mais simples de começar a entender os eventos. Mas como você verá em breve, eles geralmente não devem ser usados além de testes e fins educacionais, mas é um bom lugar para começar e é por isso que olhamos para isso. E você se lembra da sintaxe, você se lembra de sujeira mais difícil, malicioso, esfriar este exemplo aqui de um botão. Este é o nosso HTML e sabemos que um ouvinte de eventos em linha é um pouco mais confuso. Não é apenas HTML direto como este, é. Temos que adicionar um atributo, temos que adicionar uma propriedade a este botão. E neste exemplo, digamos que queremos ouvir o evento clique. Como faríamos isso? Bem, como eu tenho certeza que você adivinhou, e como você se lembra, nós temos que adicionar este valor de propriedade chamado onclick a este botão. E como eu mencionei, este onclick é uma palavra-chave DOM API. Temos que usar esta ortografia específica e, portanto, palavra. Se escrevermos mal, não funcionará. Então, adicionamos esse atributo ao botão. O que vamos fazer? Bem, então temos que atribuir um valor a ele, não é? E fazemos isso com o sinal de igual. E a última coisa que temos que fazer é definir a função que é chamada quando este evento onclick é disparado. E em nosso exemplo definimos uma função chamada boom. E tínhamos essa função definida em um script separado que não precisamos ter um script. Na verdade, podemos escrever nosso JavaScript diretamente na linha também. Por exemplo, vamos apenas alertar oi para a tela. Lá temos ele. Temos um EventListener inline válido na tela agora. E como você pode ver, é meio intuitivo na economia, já que sabemos que essa função de alerta será executada automaticamente toda vez que um evento de clique é acionado nesse padrão. Para recapitular, estamos escrevendo nosso ouvinte de cliques, AKA no clique. E neste caso, também escrevemos nosso manipulador AKA que função de alerta inline dentro do nosso arquivo HTML. Tudo é bom e bem, mas esse método não é ótimo. Bem, por que não é ótimo? Como eu disse, pode parecer fácil usar um atributo Event Handler se você está apenas fazendo algo muito rápido, que ele pode rapidamente tornar-se incontrolável, ineficiente e não amigável motor de busca. Geralmente, não é uma boa idéia misturar seu HTML e JavaScript como torna-se difícil de passar. Manter seu JavaScript tudo em um só lugar é uma abordagem muito melhor. E se ele estiver em um arquivo separado, você pode aplicar a vários documentos HTML, mesmo em um único arquivo, manipuladores de eventos em linha não é uma boa idéia. Por exemplo, um botão seria bom. Mas o que acontece se você tiver 100 botões? Você teria que adicionar 100 atributos a um arquivo. Tornar-se-ia rapidamente num pesadelo de manutenção. E caso ainda não estejas farta da minha voz, só quero voltar para casa mais uma vez. Você pode comparar um ouvinte de evento embutido para escrever CSS embutido em um elemento HTML. Não é uma boa ideia. É muito mais prático manter uma folha de estilos separada de classes e, em seguida, criar estilos embutidos em cada elemento da sua página. Da mesma forma, é mais viável manter nosso JavaScript em um arquivo de script totalmente separado. Em seguida, adicionando manipuladores de eventos JavaScript e ouvintes a cada elemento em nosso HTML inline. Simplesmente não faz sentido. Agora, tenho certeza que temos. Mas de qualquer forma, antes de passarmos a discutir o próximo método, quero que vejamos agora um exemplo prático, legal e divertido de usar um EventListener in-line. E sei que não é a melhor prática. Mas confie em mim, aprender isso básico e extraterrestres pontos. Agora espero que você possa pagar. Então, vemo-nos na próxima palestra. Digamos que encontre bom seu computador, prepare-se para codificar comigo. Veja agora. 9. Desafio para ouvinte em linha — introdução: Primeiro exemplo prático, super, super animado. Tenho o meu café, mantém-me a andar. Adoro o novo. Apenas agradável. Mantém-me lá fora, de qualquer maneira. Você pode ver no fundo aqui da tela, Eu pensei que um site muito simples. Na verdade, é um site muito divertido. E tudo o que quero fazer é querer mudar as cores e não pode, mas quero deixar o nosso código de uma forma muito prática, exceto por uma coisa. E isso é que vamos usar um ouvinte de eventos inline. Eu sei, e continuo tentando dizer que não é a melhor abordagem, mas são os fundamentos que eu quero passar e você precisa entender o básico antes de começarmos a ficar mais avançados. Também entenda por que as coisas foram feitas de uma certa maneira. Você entende por que o Código progrediu de uma certa maneira. Só se você entender que de onde veio, você sabe como se originou. Então esta vai ser uma palestra muito divertida. Vou codificar isso com você. Se você não quiser codificar tipo de configuração, não se preocupe, eu vou fornecer isso em um arquivo separado, mas eu encorajo altamente você a codificar junto com ele. Uma vez codificado, será o ponto de partida. Então eu vou entregá-lo para você e eu quero que você tente e resolver o JavaScript. Eu quero que você tente e acessar o DOM e Ed, este EventListener inline. Você deve saber como fazer isso. E o que queremos que aconteça? Bem, temos dois botões aqui. O único botão ligado. Que tal fazer tudo bem? E como você adivinhou, tudo fica azul. E então temos o mesmo botão. Mas acontece que podemos ler um exemplo muito simples. Se for divertido, o que estamos esperando? Vamos saltar para as tomadas como ele parou de cortar. E eu vou construir esta página primeiro, o código completo, a solução com você. Por isso, encorajo-te a programar comigo. Se você não quiser, tudo bem também e forneceu a atribuição baseada no modelo, e eu vou vê-lo na foto. 10. Desafio para ouvinte em linha — criando nosso HTML: Ok, agora, vamos começar. E como você pode ver, eu tenho um arquivo de código do Visual Studio em branco na minha frente. Eu não incluí nada, então vamos puxar a base do nosso site. Vamos abrir esta estrutura de pastas e vamos criar um arquivo chamado index.html. Podemos usar, podemos escondê-lo agora. E então vamos começar com um modelo de arquivo HTML base e um título. Podemos mudar de cores. Muito auto-explicativo é explicativo é um metal dentro do nosso corpo. Isto é que estamos HTML abdominais vai ser, vamos incluir uma tag H1. E, claro, podemos dizer que este é um site muito divertido. Vamos dar à nossa etiqueta H1 uma identificação de, sei lá, título. Ok, antes de ir mais longe, O que é realmente legal é que podemos usar o Live Server e podemos ver como ele negando esta página em tempo real. Então vamos fazer isso. Aqui vamos nós. Então, há nossas imagens H1, colocá-lo no elevador e eles consideram, como é isso? E podemos realmente ver o nosso código à esquerda e o resultado do nosso código à direita. É muito útil. Agora é criar um parágrafo com um ID do primeiro parágrafo. E no parágrafo podemos apenas dizer Wall-E. A água é um ótimo animal de estimação. Lá vamos nós. Podemos ter outro parágrafo, claro, com id de segundo Graph. E aqui podemos escrever algumas palavras. Vali come muitos gráficos. Salve isso, e você pode vê-lo atualizado em nosso navegador. E depois lembras-te que tínhamos dois botões, certo? Isso vai ser com EventListener in-line entra em jogo. Então vamos ler isso em uma div com uma classe de wrapper. E podemos ter dois botões. O primeiro botão pode dizer que tal fazer tudo azul? E o segundo botão pode dizer que tal tornar tudo vermelho? E se eu salvar isso, devemos ter nossos botões em nosso navegador. Lá vamos nós. Deixe o estilo parece terrível. Então vamos apenas por causa da completude, Editar Tabela Estilo em nossa seção de cabeça. E é só apimentar um pouco. Eu sei que não vai ser ótimo. Este não é um site chique de sinos e assobios, mas vamos melhorar um pouco. A primeira coisa que podemos fazer é alinhar tudo ao centro. Então podemos pegar nosso H1 e nosso parágrafo e podemos apenas pegar a linha para o centro. Lá vamos nós. Listados começando a vir, certo? Vamos agora começar nossos botões. Em primeiro lugar, podemos exibi-los como blocos. Então, cada botão é seu próprio bloco. Vamos adicionar alguma margem. Já está começando a parecer melhor. E a próxima coisa que eu quero fazer agora é eu quero parecer esses botões junto com o nosso gosto. Então, podemos ir à margem. A esquerda é água. E é claro que podemos ir direitos de margem é alterado. E isso deve parecer para tudo. Legal. O Bashar apagou? Acho que isso é bom o suficiente para começar, certo? Então deixe-me apenas aumentar este editor de texto aqui. Então, aqui vamos nós. Aqui está o nosso documento base, o nosso esqueleto. Quero pausar o vídeo neste ponto. Quero que pense em duas coisas. Primeiro, eu quero que você pense sobre como você pode adicionar um ouvinte de eventos em linha a cada um desses balanços. E em, eu quero que você pense sobre como devemos escrever nossa enzima. E eu gostaria que você incluísse um arquivo JavaScript separado para escrever seu folheto. Então pense em como podemos fazer isso. E na próxima palestra vou passar pela solução com você. Eu vou te mostrar como eu faria isso. Veja agora. 11. Desafio para ouvinte em evento em linha — solução: Como você foi? Espero que tenha dado uma chance e não importa se você entendeu errado ou certo. O importante é que tentaste e é assim que aprendes e é por isso que estou aqui para te ajudar se ficares preso. Então vamos começar rachando. Vejamos a solução juntos. Em primeiro lugar, deixe-me remover-me apenas para que você possa ver a tela em tamanho real. Lá vamos nós. E não está cortando a solução. Então, aqui vamos nós. Temos os nossos botões, mas nada aconteceria, certo? Se voltarmos ao nosso navegador aqui. E vamos fazer isso maior. Se eu clicar neste botão, nada está acontecendo. Faz sentido, certo? Porque não dissemos ao navegador para fazer nada quando o botão é clicado. E é por isso que precisamos adicionar nosso EventListener embutido. E você se lembra como se faz? Qual é o primeiro passo? Vamos tentar. Precisamos adicionar os atributos a cada botão. Qual é o evento que queremos ouvir? Chama-se onclick, certo? Embora tenhamos esse atributo onclick agora, nada acontecerá porque nós realmente anexamos um ouvinte, mas não definimos manipulador. Então, se clicarmos nesse botão, novo, nada vai acontecer. Para que possamos fazer algo acontecer, precisamos nos atribuir e manipulador de eventos. Então vamos fazer isso. Vamos atribuir a ele um manipulador de eventos em sim, poderíamos incluir todo o nosso JavaScript se thin ainda, mas não queremos fazer isso. Isso fica bagunçado. E como eu disse na palestra anterior, eu quero que nós escrevamos nosso JavaScript em um arquivo separado. Então vamos agora executar uma função. E vamos chamar essa função porque estamos girando tudo explodiu. Isso basta chamar esta função azul e vamos executar essa função. No segundo botão. Podemos fazer exatamente a mesma coisa. Podemos adicionar um ouvinte clique. E neste caso podemos executar uma função chamada read. Bastões muito simples se formos para o nosso navegador, ok, O que eu quero fazer é que eu só quero inspecionar este documento e eu quero ir para o console. O que você acha que vai acontecer se eu clicar em, digamos, que tal tudo que é azul? O que acha que vai acontecer quando eu clicar nesse botão? Devemos receber um erro. Lwe não está definido porque estamos tentando executar uma função JavaScript chamada azul, mas ainda não escrevemos o código, que é o que vamos fazer agora. Em nosso HTML, podemos incluir uma tag de script. E, claro, nosso script pode fazer referência ao nosso próprio arquivo. Vamos chamá-lo de App.js. E dentro da nossa estrutura de pastas, podemos criar um novo arquivo chamado app.js. É muito, muito simples e como podemos incluir nosso JavaScript. Então deixe-me minimizar isso, então temos uma tela maior. E qual é o primeiro passo? Dê um passo para trás. Nós definimos todo o nosso HTML com o que nossos botões. Nós anexamos um ouvinte de eventos a esse botão. E agora dissemos 50 manipulador. Queremos que o analisador execute uma função chamada loop e uma função chamada read para esse botão. Então é onde estamos agora. O PDV vai chegar ao HTML. Isso vai acionar esse evento quando o usuário clicar. Em seguida, vai estar procurando esta função em novo arquivo JavaScript e como estamos. Então, o que queremos que aconteça? Bem, há algumas maneiras de fazermos essa solução. Podemos fazê-lo de uma forma muito rápida e desagradável. Nesse caso, podemos pegar nosso corpo de uma página inteira e mudar o sabor de um corpo inteiro para ler tudo azul. Essa é a abordagem preguiçosa. E em muitos casos, quando suas páginas muito exigente e dinâmico, ansioso e eu quero mudar as cores de certos elementos. O que eu quero fazer é pegar os elementos que queremos fazer. Vai ser o primeiro passo em nosso JavaScript. E se formos para o nosso arquivo de índice aqui, queremos mudar o H1 atingindo azul, e queremos mudar esses dois parágrafos para azul. Era tudo o que queríamos fazer. Então o primeiro passo será pegar esses elementos. O segundo passo será alterar os atributos desses elementos para azul ou vermelho. A teoria é tão simples. Então vamos ficar presos nisso. O primeiro passo, agarrando os elementos, queremos mudar. E é claro que queremos mudar três coisas diretamente. Então eu vou definir uma variável JavaScript chamada title. Vamos acessar o objeto do documento. Este objeto de documento, como você sabe, é a raiz de nossa página web e documento honesto. Temos muitas propriedades. O que eu quero usar este elemento get por ID. E claro que lhe demos uma identificação do título. Depois voltamos para a nossa página de índice. Podemos ver que demos a ele uma identificação do título. Nossos parágrafos então têm uma idéia do primeiro parágrafo e segundo parágrafo. Então nós podemos ir aqui e podemos definir agora paralelo. Podemos usar a mesma função. Mas sim, temos o primeiro parágrafo. E é claro que podemos duplicar isso. Podemos dizer que o pai. E não vai ser o primeiro parágrafo, vai ser o segundo parágrafo. Hoje vamos, Nós literalmente terminamos nosso primeiro passo. O segundo passo agora é definir nossas funções azul e vermelho. Então vamos começar com a cola de função azul. A carne do nosso código está dentro destas chaves. Agora, quero que definamos uma variável chamada cor. E nós vamos atribuir a isso o valor de surpresa, surpresa azul porque essa é a cor para a qual queremos mudar tudo. Qual é a próxima coisa que quero fazer? Agora precisamos acessar nosso título e nossos dois parágrafos e mudar a cor para azul. É realmente assim tão simples. E este não é um curso sobre CSS, mas eu estou supondo que você tem algum conhecimento de CSS e HTML. E as muitas maneiras novamente de esfolar um gato, eu vou usar o método de atributo SEC. O primeiro argumento deste método é o que queremos afetar ou o que queremos acessar. E, claro, queremos acessar o atributo de estilo deste elemento. E, claro, o segundo argumento é o valor que queremos dar para baixo. Neste caso, queremos mudar a cor, não se preocupe. Então podemos fazer assim. Podemos ir colorir. E, claro, podemos apenas adicionar nossas covariáveis. Aqui vamos nós. Isto deve funcionar, certo? E se formos para o nosso navegador, vamos apenas limpar o console e clicar sobre isso tudo no botão azul. E boom, este é um site muito divertido, mas agora nós só mudamos o H. Nós não mudamos os dois parágrafos. Então vamos fazer isso rápido. Podemos excesso de par um. Podemos sentar É atributo novamente o estilo. E agora queremos mudar a cor. Mas desta vez eu quero usar literais modelo é uma sintaxe mais recente. E se você não tem certeza que estes são, por favor, confira o meu curso de mestre completo JavaScript. Se você sabe o que eles são, ótimo, você será capaz de acompanhar. Então aqui queremos afetar nosso atributo de cor e queremos que seja definido para o valor. Olá. Lá vamos nós. E se eu salvar isso e voltar para o nosso navegador, vamos clicar neste botão. Nós literalmente mudamos o H1 e mudamos o primeiro parágrafo. - Sim. E é claro que este vai pensar em fazer, e isso é mudar o parágrafo 2. Então vamos fazer é duplicar essa linha e alterá-lo para pai para deixar definido. E se voltarmos para o nosso navegador, clique no botão, tudo é alterado para azul como seria de esperar, missão completa todos Diana, Isso é tão incrível. Então agora vamos voltar aqui e vamos fazer o mesmo com o vermelho. Na verdade, tudo o que precisamos fazer é copiar esta função, colar esta função e mudar azul. Para ler. É tudo o que temos que fazer. Como esta final, isso é de repente você tem que concordar comigo. E é tão fácil quando você solta o cachorro fazendo essas coisas. E uma coisa que eu quero mencionar é que podemos duplicar as funções como esta e definir duas variáveis chamadas cor dentro de cada função porque eles tiveram escopo local ou escopo de bloco. Se você não tem certeza do que eu quero dizer, novamente, por favor, confira meu curso de JavaScript completo de grandmaster. Mas deve funcionar agora, temos que acabar. Se temos nosso navegador, temos dois botões. Deixe-me apenas remover este console. Se você clicar na primeira coisa fica azul, se clicarmos na leitura, tudo ficará vermelho. Você literalmente Janet e nos disse alguns minutos úteis se formos melhor, código JavaScript arquivo como nosso arquivo de índice. Então, aqui está um exemplo prático de usar um ouvinte de eventos em linha para realmente anexar um ouvinte de eventos ao botão, o evento onclick. E então também implementamos um manipulador de eventos em um arquivo JavaScript separado são feitas tão bem feito. Estou super impressionado em me divertir muito. Mas agora eu quero ir para os outros métodos que discutimos e olhar para exemplos desses. Vejo-te na próxima palestra. 12. Propriedades em linha — visão detalhada: Certo, então discutimos manipuladores de eventos em linha. O próximo passo é discutirmos o outro tipo, e isso é chamado de método de propriedade inline. Esta é uma maneira muito semelhante de adicionar um ouvinte a um elemento, ao ouvinte de eventos in-line. Exceto aqui estamos sentando a propriedade de um elemento usando JavaScript. Em vez de usar o atributo em HTML, faz cenas econômicas. Então, a configuração será muito semelhante. Por exemplo, ainda precisamos do elemento HTML botão Up, mas agora não precisamos mais incluir a função azul onclick, por exemplo, na própria maquete HTML. Mas ainda precisamos definir um manipulador, não é? Aquela esmola real, essa função. Vai permanecer bastante semelhante também. Mas agora precisamos apenas acessar o elemento botão em JavaScript antes de escrever a função em JavaScript. Assim, o primeiro passo será como ter dois eixos. Este botão em JavaScript, sim, podemos apenas usar a consulta selecionar um botão. Claro que podemos acessá-lo bem. Identificação, nome da classe, etiqueta, nome, cítrico, cetera. Sim, acabamos de usar o seletor de consulta. Deixe-me virar esta página. Lembre-se, sob ambas as abordagens e por ambas as abordagens não têm sentido. Abordagem de propriedade em linha versus um EventListener embutido, o que vimos na palestra anterior. E ambas essas abordagens que estão eventualmente anexando um ouvinte evento é uma propriedade em nosso elemento HTML. Ambos estão conseguindo a mesma coisa. Mas usar uma propriedade inline é um pouco melhor do que escrever diretamente nosso ouvinte de eventos em nosso arquivo HTML. Por que é melhor? Bem, pelo menos agora seu modelo HTML é muito barato e temos toda a nossa carne em um arquivo JavaScript. É mais fácil, é mais fácil de manter. Mas ao dizer que ainda não é a melhor abordagem e sofre de alguns dos mesmos obstáculos. E outra coisa interessante em outra coisa muito irritante que acontece é quando você tenta sentar várias propriedades separadas do objeto para o mesmo elemento, fará com que tudo menos o último seja substituído. Então isso pode ser bastante irritante. Bats, eu acho que você sabe o que vem a seguir, você, isso mesmo. Quero olhar para outro exemplo prático muito legal. Vejo-te na próxima palestra. 13. Desafio por propriedades em linha — introdução: Tudo bem, você me conhece, eu amo exemplos práticos e este aqui é muito, muito divertido. Então vamos olhar para a tela atrás de mim. Você pode ver que nós temos um pouco de texto Lorem Ipsum com um botão dizendo aperte o joelho e mostre mais. Isso foi sobre? Bem, vamos vovó Rato. E vamos clicar nesse botão. Você pode notar algumas coisas. Primeiro, expandimos essa caixa. Então agora você pode ler mais texto. E o texto no botão não mudou para dizer um colapso de agora. Eu posso clicar, vamos agora é claro que nossa caixa e a palavra agora em que o botão muda para expandir sobre ele. Exemplo legal. E você pode começar a ver que estamos ficando mais avançados aqui. Mas sim, novamente, eu não quero que nós pulemos para usar o novo método addEventListener. Quero que nos preparemos para isso. Então você viu no teste anterior, nós usamos o manipulador de eventos em linha. Aqui, eu quero que usemos o método de propriedade embutida de adicionar ouvintes de eventos. E lembre-se, ambas as abordagens são muito semelhantes. Tudo o que estamos fazendo é adicionar uma propriedade ao botão HTML aqui. Mas estamos fazendo isso encontrar maneiras diferentes nesta instância em uns para fazê-lo via JavaScript. Então este é o gosto introdutório. Vai ser muito divertido, semelhante ao anterior. Vou escrever o nosso código juntos. Muito, muito bom para você programar comigo. Mas, novamente, você não tem que fornecer a cor do documento esqueleto, documento HTML para você como um recurso para a próxima palestra que por favor, Eu encorajo altamente você a codificar comigo. E então, na próxima palestra, vamos obviamente passar pela solução juntos. Espero que você se divirta pode ser e ficar motivado. E vejo-te na próxima palestra. 14. Desafio por propriedades em linha — criando nosso HTML: Então, aqui vamos nós. Novamente. Estou começando com um modelo em branco aqui no código do Visual Studio. Então vamos começar rachando. Vamos começar a codificar isso. Basta ir para a nossa pasta aqui e vamos criar um arquivo chamado index.html. E, claro, podemos começar com um modelo HTML5. O título pode ser propriedades inline. Vamos nos livrar disso para que você possa ver o que está acontecendo. E é anteriormente, Vamos abrir servidor ao vivo apenas para que possamos começar a codificar e ver o que estamos fazendo ao mesmo tempo. Aqui vamos nós em uma coisa vai me fazer, apenas se livrar de mim mesmo para que você possa ver o que está acontecendo. Aúdios. Então, aqui vamos nós. Vamos começar a codificar. Agora eu só vou ter uma div com um ID de conteúdo porque é assim que nosso conteúdo vai ser tudo uma boa prática. E então eu quero tags de parágrafo e eu quero texto ipsum lorem em cada um. Então podemos fazer isso e Lorem Ipsum, podemos salvar. E agora você pode ver em uma tela nós temos apenas dois parágrafos com texto velho Lorem Ipsum chato. Nada de especial. Então esse é o nosso conteúdo principal. A outra coisa que eu quero fazer é adicionar esses direitos de botão, mas eu só quero mostrar novas maneiras de fazer as coisas em seu código. Nunca há uma maneira de esfolar um gato. Então aqui, em vez de usar um botão, eu só vou estar usando uma etiqueta âncora. E eu vou ter uma identificação do show more. Vamos passar pelo HREF. Então lá vamos nós. E isso pode ser preciso para mim e mostrar mais. E se guardarmos isso, parece que um buraco entediante leva, não é? Mas não se preocupe, vamos estilizá-lo em breve. Na verdade, vamos estilizar agora. Vamos em nossa seção de cabeça. E novamente, em vez de escrever CSS inline, o que não é uma boa idéia, LET referência em arquivo externo. Então vamos incluir uma tag de link aqui e nossos átrios, se pudermos chamá-lo, eu não sei, styles.css. Vamos para a nossa estrutura de pastas aqui. E é um arquivo intuitivo chamado styles.css. Então, aqui vamos nós. Vamos nos livrar disso e fazer nosso site parecer um pouco mais estranho. O que quero fazer é acessar nosso corpo. E vamos mudar o plano de fundo da página inteira. Triple E, falta de faróis, cinza macio. Parece legal. E então o que eu quero fazer é acessar o conteúdo. Volte para o nosso HTML. Lembra-se disto? É essa tag div com o ID do conteúdo. E isso só contém até parágrafos. Então, em um recurso, estamos modelando nossos dois parágrafos. A primeira coisa que podemos fazer é mudar a largura para dizer 400 pixels. Lá vamos nós. Então você pode ver que nós o condensamos para um tamanho menor. E nós podemos mudar este fundo apenas para diferenciá-lo do fundo real da página restante para o triplo F. Então é branco, é bom. Claro que podemos nos dar um pouco de estofamento. Eu não quero estofamento no topo. Vamos remover isso. Sim, assim é melhor. E devemos mudar esta fonte? E acho que podemos. Vamos usar um cisne aqui, Gill Sans ou menos. Sim, vamos lá, bonito, funky. Tem que admitir, o que mais podemos fazer? Podemos mudar a cor do texto real. Você pode ver que estou usando números muito fáceis. Sim. É como um cinza mais escuro. O que podemos fazer agora é eu quero mover tudo o que leva todo o conteúdo div, para o meio da nossa página. Então, é claro que podemos usar o joelho de margem e a esquerda e a direita podem ser alteradas para levar aquela coisa para o centro. Lá vamos nós, parece bom. E agora eu quero adicionar uma altura máxima de 100. E ou eles são apenas número aleatório um 148 pixels. Lá vamos nós. E o transbordamento pode ser escondido. Lá vamos nós. Então você pode ver que nossos Takes agora estão sendo cortados, o que faz sentido, certo? O único propósito do exercício. E como eu mencionei, este não é um curso sobre CSS, ok? Mas eu só quero adicionar uma propriedade CSS transição aqui. Pesquisa tipo de transição suave quando abre na altura máxima. Ok, então eu quero adicionar uma transição. Eu obviamente quero que isso se aplique quando afetamos a propriedade de altura máxima. E digamos apenas 0,7 segundos. Então lá vamos nós. Essa é a nossa div legal. Agora eu só quero estilizar a etiqueta âncora que nós temos lá, mas estilo isso e fazer com que pareça um botão. Em primeiro lugar, como é que o acedemos? Bem, se formos para a nossa página de índice ou chamámos, tínhamos uma identificação de mostrar mais. Vamos ao Styles. E vamos ver isto aqui. Mostre mais. Lá vamos nós. Vamos primeiro mudar esse plano de fundo para dizer 36, a2 e 167. É uma bela cor azul. Eu gosto disso. E então nós podemos mudar o texto para branco porque nós pegamos eu mal posso lê-lo agora. Lá vamos nós. Isso parece melhor. Mudou a família de fontes para coincidir com a acima. Família Font. Sim, isso deveria ter melhor. Agora, é claro que podemos adicionar estofamento para torná-lo apenas melhor. Nós também pode definir uma largura de um 100 e 40 pixels. Vamos fazer a fonte um pouco maior. Então podemos ir 18 pixels. E só para ser pedante, quero colocar o texto dentro do botão no centro. Então vamos pegar uma linha até o siento. Você provavelmente não notará muita diferença. Sim, eu não tinha notado muita coisa diferente. E então vamos adicionar margens para levar essa coisa para o centro. Então eu quero adicionar também uma margem para o topo. E então, claro, vamos ver essa coisa. E então o cursor, eu queria apontar, hmm, por que este botão não está se sinterizando sozinho? Sabe o que eu não fiz? Eu não defini isso como um elemento de bloco. Certo, precisamos exibir o bloco. E isso deve funcionar. Novamente. Sorte que eu estava ficando um pouco preocupado por um segundo. Está bem, fixe. Então aqui está nossa equipe de esqueleto. Embora isso tenha sido muito, muito legal, nós temos nossa configuração. Mas, obviamente, o que acontece agora se eu clicar neste botão, etiqueta âncora? Nada acontece. E isto é o que eu quero que você tente resolver agora. E lembre-se do que queremos fazer, querendo usar propriedades inline, também conhecido como querer realmente colocar tudo em nosso arquivo JavaScript e adicionar uma propriedade chamada onclick a esta tag âncora em nosso JavaScript. E, claro, queremos abrir tudo e tudo mais. Então dê uma chance. Se não sabe a resposta, não se preocupe, é para isso que estou aqui. E na próxima seção, vamos nos divertir e fazer a solução para obtê-lo. Eu não posso esperar. 15. Desafio para propriedades em linha — solução: Certo, então aqui estamos. Foi aqui que paramos da última vez. E se você ver se eu apertar este botão, nada acontece. Então, quais são os passos que precisamos tomar para que isso funcione? Bem, em primeiro lugar, precisamos chegar às coisas do nosso DOM. Precisamos pegar essa div de conteúdo. Por que precisamos pegar o conteúdo deles? Div vai se lembrar agora que restringimos sua altura. Na verdade, cortámo-lo. Se inspecionarmos este elemento. E nós realmente olhamos para esta div em si. Você pode ver no canto inferior direito que restringimos a altura desta div a 148 pixels. E sim, nós editamos o preenchimento de 20, que nos dá um pouco HDL, que é descontroladamente pairar sobre isso. Podemos ver que a altura é um 168, é um 148 mais o estofamento. E se voltarmos ao nosso código, é exatamente o que especificamos neste conteúdo. Div, altura máxima, 148 pixels e preenchimento de 20. E se formos para o nosso HTML, essa ideia de conteúdo é embrulhada dentro da nossa tag div. E nós apenas restringimos a alta temperatura. Então, se voltarmos aqui, é a primeira coisa que temos que fazer. Temos que pegar essa caixa de conteúdo e mudar sua altura quando o botão é clicado. O que me leva à segunda coisa que precisamos para conseguir uma rede é este botão. E precisamos acessar este botão por duas razões. Primeiro, quando clicamos neste botão, queremos mudar o estilo dessa div. E dois, nós também queremos mudar o texto deste botão sujo. Começando a fazer sentido. Espero que sim. Mas se não acontecer, não te preocupes, vamos falar disso agora. Qual é a primeira coisa que devemos fazer? Bem, a primeira coisa que quero fazer é quando clicarmos naquele botão, eu fui aplicar uma certa cláusula, toda essa div. E então a cláusula deve abri-la. Deve fazer com que a altura máxima seja maior. Então a primeira coisa que eu quero fazer em nosso editor de texto aqui é que eu quero ir para nossos estilos e um 12 definir um estilo que só vai ser aplicado quando a caixa é fechada e nós clicá-lo para abrir. Meio que faz sentido. Não se preocupe se não depender do que quero dizer em breve. Então tudo o que quero fazer é pegar nossa caixa de conteúdo porque é isso que queremos afetar. E nós vamos adicionar essa aula, e eu vou chamá-la de aula aberta por enquanto. E quando suas aulas se ativaram, o que queremos fazer é querer ficar com o exército de altura máxima. E queremos que essa caixa cresça de 148 pixels para muito maior, muito maior. Então é por isso que estou usando um número arbitrário, 1000 pixels. E é claro que eu queria ser uma transição agradável e suave. Quando a propriedade de altura máxima é alterada, digamos que leva dois segundos. Como é que isso parece? Então temos todo o nosso CSS. Agora precisamos realmente adicionar nossos ouvintes de eventos e estamos fazendo isso com JavaScript. Então tudo o que precisamos fazer aqui é adicionar uma tag de script. E, novamente, isso basta chamá-lo de um arquivo ab.js aplicativo. Podemos acessar nossa estrutura de pastas aqui. Você pode ver que eu só tenho dois arquivos aqui, índice e CSS. Vamos ter que fazer agora é apenas adicionar o nosso arquivo app.js e me fechar isso. E como podemos começar a escrever a carne no coração do nosso site. E passo 1 para lembrar o que era. Isso é certo. Temos que pegar o elemento div e o bastão. Então eu vou definir uma variável em chamadas JavaScript. Eu não sei, vamos chamá-lo de conteúdo porque é onde o nosso conteúdo principal fica e ele tem um ID do conteúdo. Nós acessamos nosso objeto de documento. Nesse objeto que acessamos sua propriedade, obter elemento por ID. E, claro, o ID que especificamos foi chamado de conteúdo. Então lá vamos nós. Aí está o nosso conteúdo. Agora eu quero agarrar o nosso botão e eu sei que nós não fizemos realmente elementos botão de fim rápido. Embrulhamo-lo numa etiqueta de âncora. Fiz isso só para mostrar maneiras diferentes de fazer a mesma coisa. Mas neste caso, ainda quero chamá-lo de botão. Novamente. Acedemos ao nosso documento. Nós acessamos esta propriedade, obter elemento por ID. E como é que lhe chamamos outra vez? Vamos para o nosso HTML. A ideia de mostrar mais. Aqui temos IoT Show. Hoje vamos, podemos pegar nossos dois itens. E meus queridos amigos, este é o coração do passo. E isso é adicionar um evento, ouvinte e manipulador através da abordagem de propriedade embutida. Lembre-se de como fazer isso. Em primeiro lugar, estamos querendo adicionar o nosso ouvinte de eventos no botão? Queremos que um acordo seja acionado toda vez que um usuário clica nesse botão. O ponto de partida é acessar nosso botão. Agora temos o botão. O que temos que fazer agora é que temos que adicionar isso em não-propriedade. O ouvinte de eventos. Como é que fazemos isso? Vamos usar a notação de pontos e queremos adicionar um ouvinte de clique neste botão, não se preocupe. E então eu vou estar usando a nova sintaxe de seta para definir uma função que vai ser disparada automaticamente quando o evento é contratado. Então toda a carne do nosso código está dentro deste quarteirão. Neste momento, o botão foi marcado. E agora temos dois garfos no ano da estrada. A caixa já está aberta e os botões já foram cortados e você está pegando novamente para recolhê-la. Tudo. A caixa já está recolhida e você clica no botão pela primeira vez para expandi-la. E sempre que você colocar esses garfos na estrada, sempre que você tem esse tipo de caixas abertas ou se as caixas caíram. Isso mesmo, você adivinhou. Temos que usar as declarações if. Como escrevemos essas afirmações “se”? Tudo há algumas maneiras de fazê-lo. Como sempre, continue dizendo as muitas maneiras de esfolar um gato quando se trata de programação. Vou manter tudo muito simples. E eu vou assumir agora que a caixa está fechada, que os botões nunca foram conectados. E se o botão nunca foi clicado, sabemos que o nome da classe de aberto não seria o. Por exemplo, se formos para o arquivo de índice para fora div tag saudado ID do conteúdo não tem classe, certo? Nós não adicionamos nenhuma classe a ele. Lembra da folha de estilo? Temos essa classe aberta que muda a altura máxima dessa div. Mas não adicionamos essa classe aberta. Toda enfermeira que sabemos é que a dose de conteúdo está fechada. Seu className será igual a nada. Vai ficar em branco. Então, nesse caso, o que queremos fazer? Bem, queremos expandir a caixa. Isso faz desde, certo? E quando expandimos a caixa, como fazemos? Temos que adicionar esse nome de classe aberto a ele. Então tudo o que precisamos fazer é acessar essa div. Precisamos, em seguida, acessar sua propriedade className porque queremos que eles para editar o nome da classe e entramos em atribuir que para a classe de aberto. Agora sabemos que a caixa vai se expandir. A segunda coisa que queremos fazer, não se esqueça, como queremos acessar nosso botão e alterar sua propriedade HTML interna para colapsar agora. Então, lá temos. Isso é se as caixas fechassem e agora nós acabamos de abrir. Claro que temos que lidar com o outro cenário em que está aberto e você quer que ele desmorone. Então temos que sair. E agora, é claro, queremos derrubar a caixa. E como desmoronamos a caixa? Bem, a primeira coisa que temos que fazer é acessar todo o conteúdo da tag div. Temos que então acessar sua propriedade de nome de classe e temos que dar que um valor de nada e que irá encolher automaticamente a caixa. Não se perca. Você se lembra por que RP na frente da caixa? Bem, nós temos esses estilos e nossa folha de estilo. Quando essa tag div tem a classe aberta, sabemos que sua altura máxima pode ser de até 1000 pixels. Enquanto que quando removemos essa classe aberta, ela reverte para os estilos CSS padrão, que tem uma altura máxima de 148 pixels, que significa que ela irá encolher, torna isso. Então vamos voltar ao nosso arquivo JavaScript. A última coisa que temos que fazer, Você adivinhou como temos que mudar a propriedade HTML interno em nosso botão para expandir. Como uma droga e essa ideia de amigos devem funcionar? Vamos para o nosso navegador. Atualize e vamos clicar nesta visão de botão. Quão incrível é isso? Você tem que admitir que é muito, muito épico. Isto é refrescas o que eu posso fazer para torná-lo mais tipo de extremo é que podemos realmente adicionar mais texto Lorem Ipsum aqui e editar novamente. Vamos voltar ao nosso navegador e vamos ao botão. Dividiam-se mais. Você pode ver um pouco mais. Coloque beta. Isso é incrível, não é? Tudo feito? Eu a sério. E você pode começar a ver como, uma vez que você entenda o básico e os fundamentos, podemos continuar crescendo e ficando cada vez mais avançados. E faz cenas à medida que continuamos e não nos perdemos em todos os detalhes. Lembre-se do que fizemos. Acabamos de anexar um ouvinte de eventos a esta expansão, bem este botão aqui. Adicionamos um ouvinte de evento que escuta um evento de clique quando as caixas fecharam seu estado atual. Agora, na tela, sabemos que, em seguida, queríamos adicionar uma cláusula de abertura quando este botão é clicado e realmente prová-lo para você. Vamos inspecionar este documento aqui. Vamos abrir o corpo. E você pode ver aqui ele tem 0 nome de classe no momento que procuram nada ou nada. Se clicarmos neste botão, lembre-se de editar uma vantagem que hoje botão. Quando esse botão é clicado e as caixas recolhidas, vamos adicionar um nome de classe chamado Abrir. Quão incrível é isso? Nós apenas editamos dinamicamente um nome de classe aberto. E, claro, quando isso acontece, aplicamos um conjunto totalmente diferente de estilos para então fazer o conteúdo do que o torna muito mais alto. Sim, editamos um pouco de estilo CSS. Nós editamos uma adoção de transição, então não aconteceu. Então gradualmente chega lá. Também alteramos esse HTML interno do botão. Então, há muito que fizemos nesta palestra e vamos construir sobre ela. Então eu estou super, super animado para continuar. Vejo-te em breve. 16. O método addEventListener() — visão detalhada: É o momento que todos estávamos esperando, e que está entrando na última edição da API DOM quando se trata de manipuladores de eventos e ouvintes de eventos, é o método add event ouvinte. Isto é o que o ouvinte de eventos é tudo sobre as rachaduras e ouvinte de eventos relógios para um evento em um elemento. Nós não atribuímos qualquer evento diretamente em uma propriedade desse elemento. Lembre-se das outras duas abordagens em manipuladores de eventos de linha e propriedades inline e abordagens que anexando uma propriedade ao elemento. E uma propriedade apenas acontece para ser o ouvinte evento que este não é o caso aqui. Em vez disso, usamos o método addEventListener para anexar, você adivinhou, um ouvinte e um manipulador. E é bem intuitivo. Este ouvinte de evento, parede, ouvir ou assistir a um evento que está sendo acionado no elemento HTML ao qual anexamos. Não há nada de sinistro ou estranho nisso. Agora. Mas neste ponto você pode estar se perguntando, é este addEventListener de JavaScript, isso é uma parte da linguagem JavaScript? E a resposta curta a esta pergunta é, não. Não é de JavaScript. Na verdade, é da API DOM. Do que estou falando quando continuo falando sobre essas APIs? Wall, quando escrevemos código, há um monte de APIs web que podemos usar imediatamente. Quais são algumas dessas APIs e falando sobre quando temos h com o que a API histórico, armazenamento, WebSockets, APIs do sistema de arquivos. Eles são uma tonelada deles. E estes são todos tipos separados de API, sistemas separados que estão sendo executados no navegador. E, claro, um deles é a API DOM e redes maneira este ouvinte de eventos adicionar, ele vem de. A razão pela qual tantas pessoas podem se confundir entre o que é JavaScript e o que a API DOM é, é que as APIs web em usado principalmente retirar o script. Mas como já mencionei antes, não precisamos usar estritamente JavaScript para manipular e acessar suas APIs web. Acontece em 99 por cento do tempo. Estamos usando JavaScript para fazer isso. E acho que é aí que a confusão deve vir. Mas tenha em mente que o addEventListener não é JavaScript, mas tudo bem, Já, você tem isso. Vamos seguir em frente. A pergunta que você provavelmente está fazendo agora é legal. Como funciona este manipulador de eventos? Bem, o ponto de partida é usar a sintaxe real para escrever as palavras adicionar evento, ouvinte. É um ponto de partida. Mas, infelizmente, não é tão simples como este. O método addEventListener usa dois parâmetros obrigatórios. Bem, o que são eles? O primeiro parâmetro é o evento, faz sentido vertente e as veias, é claro, é a ação que queremos atentar. Por exemplo, quando usamos os exemplos de beco anteriormente, estávamos atentos para o evento onclick, que eles são uma tonelada de outros eventos. Vamos entrar em contato com eles em breve. Então esse é o primeiro parâmetro. Qual é o segundo parâmetro? Na comunidade de programação e neste método, é chamado de função de retorno de chamada. E eu não quero que você se sinta intimidado por todas essas palavras grandes e extravagantes. A função de retorno de chamada é apenas o nosso manipulador de eventos. Em outras palavras, importante, esta função de retorno de chamada automaticamente leva o perímetro da veia. E esse parâmetro tem uma propriedade chamada target. E o alvo, conhecido como o elemento que encontra o evento, será automaticamente dado a nós nesta função de retorno de chamada. Então o que eu quero dizer com o alvo e o elemento que disparou o evento. Bem, se nos livrarmos de tudo na tela por enquanto, você vai concordar comigo que adicionar ouvinte de eventos tem que ser adicionado em algo, certo? Ele tem que ser adicionado em um elemento. E é esse elemento que é referido como o alvo é um tipo que faz sentido. Não se preocupe, vamos entrar em muito mais detalhes neste curso. E quero ver exemplos, obviamente. Mas antes de o fazermos, quero falar um pouco mais sobre este saco todo. O que é uma função de retorno de chamada? Bem, vamos saltar para a próxima palestra para descobrir. 17. O que é uma função de retorno de chamada: Antes de seguirmos em frente e começarmos a fazer desafios e a olhar para coisas novas, melhoradas e mais avançadas. Como eu disse, OK, só quero dar um passo atrás e discutir esta chamada de volta em um pouco mais de detalhes. Lembre-se que não se intimide. Um retorno de chamada é apenas uma função que é chamada off para outra coisa aconteceu. É tudo o que uma função de retorno de chamada é. E sabemos que o primeiro argumento para o método add event listener foi o evento que queremos ouvir, por exemplo, um evento onclick. O segundo argumento foi o manipulador de eventos, que no nosso caso sabemos que é uma função de retorno de chamada. Esta função de retorno de chamada será executada automaticamente quando o evento for acionado. Lembre-se que a definição de um retorno de chamada é uma função que é chamada depois que algo aconteceu com algo no nosso caso é que o evento disparar. E o que é realmente legal sobre esse retorno de chamada específico quando usamos o método addEventListener é que obtemos muitos dados sobre esse evento automaticamente, que pode ser muito, muito útil. Que tipo de informação temos de volta? Coisas como o alvo onde o evento ocorreu, o tipo de evento que ocorreu, et cetera, et cetera. Em vez de apenas olhar para as palavras na tela, Vamos saltar para o Visual Studio Code. Vamos codificar rapidamente um retorno de chamada, e vamos ver o que realmente retornou para nós. Vamos ver isso em ação. Certo, vamos ver essa função de retorno em ação. Muito, muito simplesmente. Eu comecei aqui com um arquivo index.html em branco. E vamos codificar um ouvinte de eventos muito rápido. E vamos ver o que é realmente transformar Batistas em um saco escolar. Vamos querer fazer sentar uma página HTML muito simples dentro do corpo. Vamos apenas ter uma etiqueta H1. E a batida pode ser apenas callbacks são possíveis. Lá vamos nós, isso é tudo o que eu quero que o nosso HTML contenha. E vamos apenas adicionar um ouvinte de eventos a esta tag 81. E vamos ver o que é jogado de volta para nós. Então é claro que precisamos adicionar nosso roteiro. Sim, o primeiro passo é, claro, a etiqueta H1. Então vamos definir um como documentos e uso indevido do seletor de consulta. E vamos pegar nosso H1. A próxima coisa que queremos fazer é anexar o método de ouvinte de evento add para este elemento H1. Então começamos acessando nosso elemento H1 e automaticamente, e lembre-se que essas APIs estão falando, ele automaticamente tem este método de ouvinte de evento add disponível para nós diretamente fora da caixa neste elemento. Muito, muito legal. Lembre-se que são necessários dois argumentos. O primeiro argumento é o evento, e o evento aqui é o evento click. E qual é o segundo argumento? Isso mesmo, é a função de retorno. Então eu só vou usar sintaxe de erro mais uma vez. Aqui está a nossa função de seta. Esse segundo argumento é o nosso retorno. Não se intimide. Isso é tudo o que é. Apenas a função vai ser executada quando esse evento acontece. E lembre-se do que estávamos dizendo que essa função de retorno de chamada tem automaticamente os dados do evento. Deixa-me mostrar-te o que quero dizer. Podemos passar no caso de uma escola de dados. E então, é claro, o que podemos fazer é apenas fazer o console logout esses dados. Esta variável que eu estou colocando no entanto estes dados são dados para nós automaticamente. Pode chamá-lo do que quiser. Você pode chamá-lo de um, você pode chamá-lo de B, você pode chamá-lo c. Nós apenas aconteceu de chamá-lo de pontos ou qualquer variável que definimos um nome que é dado a nós automaticamente pela função callback quando esse evento é bom. Deixa-me mostrar-te o que quero dizer. Vamos guardar isto. Vamos para o nosso navegador. Vamos inspecionar isso. Vamos refrescar. Aqui vamos nós. Temos nossos callbacks de página também são net, nossa tag H1. Tem uma consola. Se eu clicar neste, o que acha que vai acontecer? Em primeiro lugar, o evento clique será disparado. E, em segundo lugar, temos sementes para registrar o console os dados que obtemos do retorno de chamada. Então devemos ver o registro do console da filha deles. Eu clico nisso. Vamos nós. Você pode ver aqui que a filha que temos é este evento de rato. Sabemos que o evento clique ocorre a partir do mouse. E você pode abrir isso e nós temos um monte de propriedades e métodos. Quão incrível é isso? E dentro destas veias do rato, temos esta propriedade chamada alvo. Lembre-se que o alvo era o elemento real que encontrar o evento em si. Nesse caso, o destino é a marca H1. Então lá vamos nós. Quão legal é isso? E lembre-se quando estamos usando essa função de retorno de chamada, recebemos um monte de filha sobre o evento real em si automaticamente. Então nos dá muito poder, muita flexibilidade como programadores, porque temos mais informações. Espero que esteja começando a fazer sentido. Já chega, vamos seguir em frente. 18. Desafio para ouvintes de eventos — introdução: Você sabe que eu amo exemplos, é por isso que eu tenho que fazer outro. E nós realmente vimos alguns exemplos realmente legais neste curso que você pode aplicar praticamente em seus próprios sites. Isso não é exceção e é muito útil porque você vai estar aprendendo alguns tipos diferentes de técnicas. Sim, vai ser uma palestra divertida e divertida. Então, o que não quer que você faça? Bem, você pode ver que este é o círculo clique no Website Challenge. E como eu tenho certeza que você adivinhou, nós temos que clicar no círculo. Quando o usuário clica no círculo, as cores mudam. Bastante bacana. Morcegos. Há poucas coisas que eu quero que você faça no site. Em primeiro lugar, quero que você adicione que leva para abaixo do círculo. Isto é pura manipulação DOM, dinâmica. Eu não quero que você pare que leva em seu HTML. Em segundo lugar, quero que você adicione essa dinâmica de círculo. Em terceiro lugar, eu quero que você adicione um ouvinte ao círculo, especificamente um evento de escuta crítica a esse círculo. E eu quero que você use o método AED é oito ouvinte. E por último, temos que adicionar um manipulador, certo? E o que queremos que o encarregado faça? Queremos que o manipulador mude a cor do círculo. Mas eu quero que você faça isso aleatoriamente. Serei honesto com você. Eu não espero que você saiba como fazer isso, mas dê uma chance, tente chegar o mais longe que puder. E então, como meus exemplos anteriores, tenho certeza que você está muito familiarizado com o processo. Na próxima palestra vou codificar a estrutura geral do cientista. Em seguida, o seguinte link, John vai estar passando pela solução com você. Então vai ser muito divertido. Nós vamos ter que excesso de objeto JavaScript apenas para criar um tipo de número aleatório aqui porque queremos cores aleatórias. Então vai ser incrível mais tarde. Estou muito, muito entusiasmada. 19. Desafio para ouvintes de eventos — criando nosso HTML: Como sempre, começamos com nada. Desculpe, Vamos começar rachando e vamos apenas criar uma pasta aqui chamada index.html. Pode fazer isso pequeno. E vamos começar a rachar. E isso basta começar com um modelo HTML5. O título do documento pode ser desafio círculo. A primeira coisa que eu quero fazer é criar, nós sabemos o que, deixe-me abrir o navegador. Então vamos começar o servidor ao vivo. Temos para ver o que estamos fazendo. É sempre, sempre útil. Então a primeira coisa que quero fazer é criar uma div com um ID principal. E esta div pode apenas dizer, bem-vindo ao círculo, clique e salve isso e eles iriam, você pode ver o resultado em nosso navegador. E então eu quero outra div apenas descrevendo para o usuário o que queremos que eles façam. E podemos apenas dizer, clique na bola redonda para mudar sua cor aleatoriamente. Vamos, está tudo a fazer sentido. E agora quero que criemos nosso círculo real. E eu me lembro do que eu disse na palestra anterior. Quero que faça isso dinamicamente. Então tudo o que eu quero fazer é ter um div com uma identificação de papel. E é aqui que quero que coloquemos nosso círculo. Na verdade, podemos ter um comentário aqui dizendo inserir círculo aqui. E talvez possamos colocá-lo em um div chamado círculo com uma idéia de círculo. Lá vamos nós. Pode ser uma div vazia porque, como eu mencionei, queremos fazer isso dinamicamente. Estatísticas nossa div que vai conter um círculo e tudo o que precisamos fazer para realmente inserir o círculo aqui é aplicar estilos a ele, estilos CSS, vamos fazer em breve. A última coisa é que precisamos inserir o texto abaixo do círculo, não se preocupe. E novamente, eu só vou colocar esta nota na parte inferior em uma tag div e esta tag div e ter uma identificação de notas. E novamente, podemos ter uma tag div vazia para o nosso livro é que eu quero que nós adicionemos isso, desta vez via JavaScript dinamicamente. Então aqui vamos nós, Aqui está o nosso HTML. Você pode ver como é simples. Não estamos sendo muito complicados aqui, mas é um exercício muito, muito valioso. O que eu quero que façamos agora antes de eu parar esta palestra é que eu quero que nós apenas para adicionar algum site possuir porque ele parece muito misturado. Então, dentro do elemento de cabeça, Vamos vincular a um arquivo CSS externo, e vamos nomeá-lo abaixo styles.css. Então, se nós apenas ir para o nosso projeto Groot, Sim, e nós incluímos outro arquivo chamado styles.css. Devemos ser capazes de estilizar isso muito bem. A primeira coisa que eu quero fazer é ter um fundo muito legal, quase um tipo gradiente de olhar e sentir. Então esse estilo nosso HTML. E é uma propriedade fictícia de fundo. E eu quero acessar um estilo chamado gradientes radiais. E leva aqui vários argumentos. Nós vamos passar isso, apenas torná-lo cinza e preto. Tão simples. Guarde isso. E lá vamos nós. Sei que parece melhor agora que vai melhorar. Eu prometo. Post mal podemos ler leva delicioso make, eu vou levá-lo largo. Aqui vamos nós. Pelo menos podemos ler que é melhor. Vamos adicionar um pouco de preenchimento no topo da perspectiva da mangueira. - Sim. E está ficando maior e vamos agora mudar ou não leva para o centro para que possamos ir ao centro de alinhamento de texto. Aqui vamos nós. Está me pegando. Ainda não estamos bem David, estamos entendendo. Agora quero estilizar nosso div com o ID principal. Vamos voltar ao nosso HTML. Ele está lá. Bem-vindo ao Círculo. Clique. Quero anunciar a Style que queremos a identidade do Maine. E como saber que podemos digitar o peso, podemos torná-lo ousado. E talvez possamos aumentar um pouco o tamanho da fonte. Só estou tentando fazer coisas que o tornem um pouco melhor. Lá vamos nós. E agora quero estilizar a reputação. Então, se formos para o índice, vou lembrá-los o que é isso. Temos esta div com a identificação do invólucro, que vai manter o nosso círculo. Vamos discar isso. Então precisamos da identificação de. E, novamente, queremos que seja colocado no centro. Então vamos fazer margens e alterar para esquerda e direita. E isso apenas agora especificar a altura e a largura. A altura é apenas fazê-lo, eu não sei, 12 ele e a largura. E vamos torná-lo um pouco menos. Vamos fazer dele um adolescente. Está bem. Então você pode ver que está começando a poupar Abbas. O ato está começando a parecer muito melhor. E, claro, o próximo passo é realmente fazer o nosso círculo, para realmente exibi-lo. Sim, vamos fazer isso. Lembre-se que a div tinha um círculo ideal. A primeira coisa que eu quero fazer no círculo, e isso vai se tornar muito importante, especialmente na próxima palestra é no 12, mudar sua cor, sua cor de fundo. E D são várias maneiras de fazer isso. Eu vou realmente ter uma palestra bônus sobre como tudo isso funciona. Por enquanto, apenas perceba que eu vou estar usando o formato de cor hexadecimal. Isso é o que eu vou fazer. Vamos alterar a cor de fundo e não-elites valor inserido. Você sempre tem que começar com a hashtag quando se trata de valores de Higgs. E agora consiste em caracteres separados. A cor que vou fazer é como uma cor laranjada para começar. Vai ser se 63 e, em seguida, 47. Nós guardamos isso. Temos nossa cor de fundo, mas tenha em mente esta pomba, por que não estamos vendo uma cor de fundo agora é que esta div em si não tem altura ou largura. Então isso é a uma altura de 200 pixels e uma largura de 200 pixels. Como é que isso parece? Lá vamos nós. Mas é um quadrado, são o que está acontecendo. Não se preocupe, nós vamos estar fazendo isso em um círculo agora. Você sabe como fazer isso em um círculo. Só temos que falsificar o raio da fronteira, não é? Raio da fronteira. E isso foi feito a 100 por cento. Lá vamos nós. Isso agora é círculo. E você pode ver os círculos quase tocando ele está tocando o gosto clique em sua onboard muda de cor. Eu não gosto disso. Então, vamos apenas adicionar alguma margem para os 20 pixels principais. Lá vamos nós. Em seguida, historiador para olhar bem. E a última coisa que quero fazer é que temos as nossas anotações no canto inferior direito. Só quero que o estilizemos, mesmo que não tenhamos editado o texto. Então o que eu quero fazer é pegar aquele bilhete e eu não quero ele preso ao círculo, eu fui empurrar para baixo. Então, novamente, nós vamos apenas fingir o topo da margem. Isso deve parecer bem. Se não acontecer, mudaremos mais tarde, mas aqui vamos nós. É aqui que quero deixar tudo para você. Quero passar o dinheiro para você. Isso vai ser incrível agora. Obviamente, quando eu clico neste círculo, não faz nada. Eu quero que você faça isso. E eu quero que você inclua seu código de manipulador de eventos em um arquivo JavaScript separado. Precisamos começar a nos acostumar com a boa prática. E pense no que você tem que fazer. Querendo anexar um ouvinte de evento a este círculo div com o id do servidor. Você, em seguida, querendo esperar para qual evento e tentou o evento clique. E então nós vamos ter que de alguma forma gerar uma cor aleatória. E se você vai para a nossa folha de estilo aqui e você olhar para o nosso círculo, cor de fundo, esse valor x. Ele precisa ser gerado aleatoriamente. E pode ser um pouco complicado para você. Não se preocupe, vou passar por isso com você na próxima palestra. Eu vou ter duas festas para nunca ter uma palestra bônus sobre exatamente como nosso código vai funcionar. Porque é realmente fascinante e está melhorando. 20. Desafio para ouvintes de eventos — solução: Woo hoo, eu espero que você tenha se divertido e eu espero dar uma chance. Eu sempre digo que não importa se você está certo ou errado. A questão é que você tentou. Então, aqui estamos nós. Literalmente, não fiz nada desde a última palestra. E vamos começar a cortar e não é fazer a solução juntos. Em primeiro lugar, deixe-me me livrar de mim mesmo para que você possa ver a tela melhor. O que vamos fazer? Qual é o ponto de partida? Will? Em primeiro lugar, vamos adicionar esta nota dentro desta tag div com ID da nota o aluno dinamicamente primeiro. E lembre-se do que eu disse em um teste para incluir código de manipulador de lei em um arquivo JavaScript separado. Então tudo o que temos que fazer aqui é inserir uma tag de script. Sim, precisamos obter um arquivo diferente. Vamos chamá-lo de app.js. Podemos ir para a nossa estrutura raiz aqui. Podemos adicionar um arquivo chamado app.js. Lá vamos nós. Fim a adicionar. Isso leva dinamicamente na parte inferior, é o mais simples, e é por isso que eu quero começar com isso. Sabe como faríamos isso? Tem um arquivo HTML de índice. Em primeiro lugar, onde queremos acrescentar esse texto? Isso mesmo, queremos editar dentro de uma tag div com um ID de nota. Então a primeira coisa que temos que fazer é pegar isso do DOM. Não se preocupe. Vamos para aqui. O primeiro passo leva dinamicamente para a div. E aqui eu vou fazer uma maneira rápida e desagradável de fazer isso do que pegar o objeto do documento porque este é o ponto de partida. Esta é a raiz da nossa página web. Lá temos um método chamado getElementByID. Sabemos que a identificação é uma nota. E que propriedade queremos acessar este elemento? Queremos ter acesso. Podemos fazer ticks conteúdo, por exemplo, podemos fazer em HTML, não importa. E queremos mudar o conteúdo, não. E podemos dizer o que quisermos. Isto é pura manipulação DOM. Como é que parece? E se eu salvar, ele aparece em nosso navegador. Quão legal é isso? Espero que te entusiasmes. É realmente, realmente incrível. Mas essa foi a parte fácil. Agora, R1 tem que avançar. Eu quero agora ir para a etapa 2, e que está mudando a cor de fundo do círculo em um evento clique. Como faríamos isso? Será novamente tomar um banco estadual. Qual é o primeiro passo? O primeiro passo é que temos que agarrar o círculo de alguma forma, não se preocupe, porque é isso que queremos anexar o ouvinte. Então vamos definir uma variável JavaScript, inicia chamá-lo círculo por falta de uma palavra melhor. E vamos atribuí-lo ao valor de toda a div que circulou. Então, é claro que começamos com o nosso elemento raiz da nossa página, que é o documento que acessamos uma propriedade chamada getElementByID e o ID que chamamos era círculo. Lembre-se se eu pudesse nosso arquivo de índice. Estamos querendo acessar a propriedade de fundo dessa div com o id de círculo. Para o primeiro abril é que temos esse círculo agora. Incrível, é um ótimo trabalho. O segundo passo é fazer o quê? Temos que anexar o ouvinte de eventos. Então, acessamos nosso círculo. Lembre-se que cada elemento tem acesso ao método add event listener. E o método addEventListener tem dois argumentos. Ele realmente tem mais, mas não se preocupe com isso por enquanto ele tem dois argumentos obrigatórios. O primeiro é o tipo de evento real. Neste caso, queremos ouvir o clicker foi tratado. E o segundo argumento é a nossa função manipuladora. E vamos chamar nossa função changecolor. Muito intuitivo até agora. E isso nos leva à parte final desta solução. Este é o lugar onde os medidores, este é o lugar onde o código mais avançado vai estar. E então é que temos que definir nossa função manipulador. Neste momento, anexamos um ouvinte de eventos ao círculo. Nós dissemos que queríamos executar uma função chamada mudança de cor quando é clicado. Mas é claro que nós realmente não definimos essa função de mudança de cor. Vamos fazer isso agora. Então, é claro, vamos usar a palavra-chave de função do JavaScript. E nós chamamos isso de mudar de cor, não é? E como conseguimos a carne do nosso código vai estar dentro destes dois colchetes. Quem tem cuidado? Então, por onde começamos? E isso vai ficar um pouco confuso, talvez, mas confie em mim, na próxima palestra, vou explicar exatamente como esse código funciona. O primeiro passo que eu quero fazer é gerar uma cor aleatória. Uma vez que eu gerou em cor aleatória no formato hexadecimal, eu então fui para atribuir uma cor de fundo de que div, será que o círculo para essa cor aleatória que geramos para o sentido econômico. Então a primeira dica é em um para gerar uma cor aleatória. Então vamos definir uma variável JavaScript chamada cor aleatória. Agora, o que eu quero que façamos é que eu quero que nós acessemos o objeto de matemática do JavaScript. E não se preocupe, nós temos acesso a isso automaticamente fora da caixa em todos os navegadores. Cada navegador tem essas funções disponíveis. É um objeto matemático. É realmente, realmente incrível. E neste objeto de mapa, há um método chamado aleatório. E como seria de esperar, este método aleatório retorna um número aleatório. Mas como você vê aqui no meu IDE, isso me dá uma dica. Diz que retorna um número entre 01. O que ele não diz, porém, é que ele inclui o número 0, mas nunca incluirá o número 1. Em outras palavras, ele produzirá um número maior ou igual a 0, mas menor que um. Legal, então é isso que a função Math.Random faz. Mas você concordaria comigo neste momento, se eu fizesse isso, vamos conseguir um número entre 01, o que não nos ajuda muito. Só nos dará um alcance muito limitado. Na verdade, ele vai nos dar, uma vez que fizermos arredondamento como qualquer outro, vai nos dar um número. Não é bom o suficiente para nós. Então temos que multiplicá-lo por um número. Bem, por qual número multiplicamos? Neste caso, o número vai ser 1600000777 para 16. Não se preocupe. Vou explicar-te como chego a este número. Mas, por enquanto, essa é a gama de cores disponíveis para nós. Também conhecido como são as quantidades de cores diferentes que podemos gerar aleatoriamente. Então, quão legal é isso? Oh cara, me desculpe, eu continuo aparecendo. Sim, mas isto é importante. Se parássemos aqui, não seria suficiente. Deixa-me mostrar-te porquê. Eu só consolo registrar esta cor aleatória. Ok, e é abrir o console e nosso navegador. Se agora clicarmos no círculo, manitol para clicar no círculo, mas podemos olhar para esse número. Então, sim, estamos produzindo números aleatórios, o que é incrível. Você pode ver como ele está criando todos aqueles decimais, aqueles números de ponto flutuante. Nós não queremos isso. Queremos arredondar esses números. Está bem? Então, não é muito bom para nós. Então é por isso que neste código, o que eu quero fazer agora é arredondar isto para o número inteiro mais próximo. Então, podemos envolver toda a quantidade entre parênteses e podemos acessar outro método de matriz JavaScript chamado floor. Então pegamos a interface do tapete e executamos um método chamado chão. Lá vai você. E isto deve arredondar os números. Então, se agora abrir o nosso console novamente, console, e vamos clicar no círculo. Agora você pode ver que estamos nos preparando. Incrível, números redondos. - Sim. Mas você pode estar pensando para si mesmo neste momento, Clyde, isso não é o mesmo que aqueles valores hexadecimais que escrevemos em nossa folha de estilo, seu principal. Mas se eu voltar para a nossa folha de estilo, nós como nossa cor de fundo círculo, lá vamos nós. Você pode ver que temos algumas ninhadas enfiadas lá dentro. E esse é o ponto com todo esse sistema hexadecimal. Ele inclui na verdade 16 caracteres. Vai de 0 a 9, mas não tínhamos as letras a, b, c, d, e e f. Então, como obtemos esses caracteres aleatórios? Como colocamos esses números em formato hexadecimal? Felizmente para nós, há uma outra função chamada string. E novamente, eu vou estar expandindo o que exatamente isso é na palestra bônus que está chegando. Por enquanto, basta entender que ele assume o número e converte em qualquer base que você especificando o argumento. Sim, vai ser a base 16 porque sabemos que os valores hexadecimais, podem levar 16 valores aleatórios diferentes. Vou explicar isso na próxima palestra. Não se preocupe, vai para cima então vamos agora voltar para o nosso arquivo JavaScript. E a outra coisa que eu quero fazer sobre isso é que eu quero implementar uma função chamada toString, como eu acabei de mencionar, e é preciso um argumento. E essa é a base que você quer usar. E queremos usar a base 16. Ooh, eu sei que é uma linha bastante longa, mas não se preocupe, se agora salvarmos isso e acessarmos, nosso console deve funcionar. E clicamos no círculo. Quão incrível é isso? Está literalmente produzindo valores hexadecimais. Sim, não temos haxixe na frente, o que vamos fazer agora. Mas produzimos um valor hexadecimal aleatório. Incrível. Espero que esteja se divertindo. Fizemos até agora e quase dia, quase fizemos. Então a última coisa que temos que fazer agora é produzir uma cor aleatória. Agora temos que afetar a cor de fundo dessa div, e temos que tocá-la de cor aleatória para ela. Então vamos fazer isso rápido. Podemos excluir esse console agora porque sabemos que estamos recebendo os valores certos. O próximo passo é acessar nosso círculo. Lembre-se que já temos o círculo. Nós existimos para obter elemento pelo método ID. E temos toda essa div disponível para nós agora. Então tudo o que temos a fazer é que queremos afetar sua propriedade de estilo. Não se preocupe. E com no estilo, queremos afetar a cor de fundo. Esse é o que queremos mudar. E queremos atribuí-lo a um valor. E eu vou estar usando literais modelo aqui. Se você não sabe o que eles são, por favor, confira o meu curso de grande-master completo JavaScript. Se você sabe o que eles são maiores do que você seria capaz de seguir adiante. Qual é a primeira coisa que queremos colocar em nossos literais modelo? Isso é certo. Temos que colocar nossa hashtag. Lembre-se, essa é a única coisa que nos falta quando geramos nossa cor aleatória. Em seguida, direto do que queremos inserir nossa cor aleatória. E meus queridos alunos, é isso. Você acabou de terminar. É uma coisa bem avançada, não é? E não se preocupe, eu vou estar expandindo na próxima palestra, palestra bônus sobre como toda essa matemática aleatória funciona e como chegamos aos 16,7 milhões de âmbar. Mas, por enquanto, você fez isso. Vamos expandir isto. Vamos clicar nisso e eu nem testei isso, espero que funcione, mas deixe-me marcar. Missão completada. Como isso realmente me excita. Espero que tenha se divertido. Espero que tenha aprendido muito com esta palestra, começando a ficar muito mais avançado. Agora estamos anexando elementos de ouvintes. Adicionamos leva dinamicamente dentro de escuta para o evento clique por meio do novo método add event listener. E então, é claro, temos nosso código manipulador em um arquivo JavaScript separado. Tão bem feito. Estou realmente impressionado. E deixe-me apenas incluir algumas folhas de bônus. Só não me deixe explicar todo esse trabalho hexadecimal e como as cores funcionam quando se trata de CSS e do navegador. Vejo-te na próxima palestra. 21. maneiras diferentes de definir uma cor: Cara, o que aconteceu? Vamos verificar a palestra anterior. Lembre-se, tivemos que produzir uma cor aleatória cada vez que o círculo era clicado. E como fizemos isso? Bem, lembre-se que primeiro tivemos que agarrar esse círculo usando o elemento get pelo método ID. E uma vez que tivemos isso, tivemos que gerar um número aleatório cada vez que esse círculo foi clicado em número aleatório tinha que estar começando em 0 entidade para percorrer todo o caminho até dezesseis milhões, setecentos e sete a 15. Sim. Não me enganei assim. Isso é um cinco no final. Repare, como se puséssemos um código R. Mas não se preocupe, vou explicar isso nesta palestra. Então, como eu mencionei, e por que usamos esses números? Bem, vamos nos livrar disso em seu começo olhando para como nós realmente sentamos cores em nosso código. A cor pode ser definida de qualquer uma das três maneiras a seguir. Usando uma palavra-chave. Usando os hs são todos sistema de coordenadas cilíndricas. E usando o sistema de coordenadas cúbicas RGB. Isto não é um curso sobre CSA, por isso vou ser muito rápido e breve sobre isto. Vamos primeiro olhar para o método de palavra-chave. Este é um identificador que não diferencia maiúsculas e minúsculas que representam uma cor específica. Exemplos estão usando a palavra-chave vermelho, azul, tomate, luz ver verde, et cetera, et cetera, e FYI. Eles são cerca de 140 nomes de colunas no total, dar e receber. E estes são os mais intuitivos, que não nos dá tanta flexibilidade. Está bem, Legal. O que é este sistema de coordenadas cilíndricas HSL? Como é que isso funciona? Bem, isso define uma cor de acordo com sua tonalidade, saturação e leveza. E há um componente alfa extra que representa a transparência das cores. E, finalmente, vamos olhar para este sistema de coordenadas cúbicas RGB. Como é que isso funciona? Em primeiro lugar, lembre-se que este é o que usamos em nosso cenário provadores. E talvez muito intuitivamente, o modelo RGB define uma cor de acordo com seus componentes vermelho, verde e azul. E o que é super interessante é que as cores RGB podem ser definidas por dois métodos. Através do método hexadecimal, que é o que usamos. E através de notações funcionais, como usar o método funcional RGB. Mas como mencionei, usamos o formato hexadecimal. Antes de seguir em frente com essas cores, deixe-me pular para o console. Deixe-me mostrar-lhe o que quero dizer com estes três métodos. Vamos chamá-lo de barra quatro métodos porque você tem que certos métodos no sistema RGB. As imagens mostram o que quero dizer. Vamos pular agora. E você pode ver nos testes do método addEventListener que passamos, usamos o formato hexadecimal, mas há outras maneiras que nos darão exatamente o mesmo resultado. E só se resume a preferência pessoal. Não há caminho errado ou certo. Deixa-me mostrar-te algumas das outras formas de o fazermos. Então vamos comentar essa cor de fundo. Então, agora não há cor de fundo. O que podemos fazer é usar o RGB, que consiste apenas de valores vermelhos, verdes e azuis variando entre 0 e 255. Se agora colocarmos 255, 1909 e 71, e economizarmos, obteremos exatamente as mesmas cores que tínhamos antes. Mas esta não é a única maneira, pois não? Não, temos outro método. Então vamos usar agora saturação de matiz e método de leveza. E se colocarmos valores nove e 100 por cento e 64% e salvarmos isso e comentaremos isso. É exactamente da mesma cor, mas estas não são as únicas formas de existir? - Não? Em cima da minha cabeça, eu posso pensar em usar também o nome da cor como gosto. Então o que eu quero dizer com isso, bem, vamos pegar a propriedade de cor de fundo, e é chamado de tomate. E se guardarmos isso e comentarmos isso, é exatamente da mesma cor. E você pode ver aqui se eu descomentar tudo isso, meu IDE dá dicas de que cor eles são e agora tudo a mesma coisa. Então este é o meu ponto. Existem muitas maneiras diferentes de esfolar um gato. Se saltar de volta para a palestra. 22. Bit vs Byte vs. Byte vs. o hexadecimal: Certo, ótimo, então espero que esteja começando a fazer sentido. Mas vamos seguir em frente. Não chegamos à micela, vamos nos livrar de tudo isso. E vamos discutir este sistema RGB. Em particular, quero que discutamos este formato hexadecimal. Você pode estar pensando, Clyde, por que ele usa hexadecimal? A razão para mim apenas, é intuitivo e esses números hexadecimais são muito naturais para computadores. Por que eles são naturais para computadores, porque computadores armazenar e lidar com dígitos binários. E como veremos em breve, quatro dígitos binários compõem um dígito hexadecimal. Não te preocupes se estiveres a coçar a cabeça. Vamos entrar em breve. Então a primeira coisa que precisamos discutir é que precisamos discutir esse conceito de um dígito binário. E no mundo da computação, a palavra dígito binário é muitas vezes encurtada para a palavra, mas BIT. Veja esses litros verdes, eles, ok, bem, o que é um dígito binário? Um dígito binário só pode ser 0 ou um, e por isso também é um número mágico 2. A maioria dos nerds de computador lá fora, todos os sinais dentro de um computador têm dois e apenas dois dias diferentes para valores binários. 01. Então você pode pensar nisso como sendo 01, estar ligado, ou 0 pode ser falso e um pode ser verdadeiro. Na terminologia informática, uma peça de informação que pode armazenar um 0 ou um é chamada de aposta. Então, em outras palavras, um bit representa valores de 0 a um, IE pode representar dois valores. Coloque dois bits juntos, e você pode representar 012 ou três. Também conhecido como você pode representar quatro valores, três, mas pode representar Sarah para sete valores ou oito valores no total. Quatro bits significa que você pode representar dois para o poder de quatro, que é 16 locais diferentes. Acho que podemos ir ad infinitum, mas a fórmula é simples. X bits podem representar dois para o poder de valores x. E é por isso que dois é um número muito importante para jogos de computador. Estes são chamados de números de base 2. Assim como a base 10 números são muito importantes para nós. Humanos, adolescente fino, dedos na mão. Tina, cem e dez cem, et cetra, et cetera. São números muito importantes para os humanos. Enquanto muitos geeks de computador sabem os números 2, 4, 8, 16, 32, 64, 128, 256, seis cetra cítrico. E você vai ver o ponto de tudo isso em um segundo. Ok? Então isso é um pouco, um pouco eventualmente se torna um byte. Em algum momento, os primeiros engenheiros de computação vieram com mordida como a próxima unidade acima um pouco. Um byte é definido apenas como oito bits. E isso significa que um bytes pode representar dois para o poder de oito números ou 256 valores diferentes. E se o valor mínimo de um byte for 0 e o valor máximo de um byte for 255. Ou se quisermos olhar para ele em forma binária, serão apenas os oito bits sendo todos uns. Quem aplicou isso é uma grande teoria, mas estou farto da teoria. Por que isso se torna importante para nós? Praticamente? Boa pergunta. Então vamos voltar para o nosso número hexadecimal. Lembre-se que começamos com uma hashtag e foi seguido por seis dígitos para lembrar disso. E também tenha em mente, como mencionamos antes, o sistema RGB define números com base em valores vermelho, verde e azul. E no sistema hexadecimal, os dois primeiros dígitos estão relacionados à leitura. Os dois segundos verdes e os dois últimos estão relacionados ao azul. Pilha meio que faz sentido. Mas vamos dar uma olhada em um desses valores. Os valores hexadecimais podem ser de 0 até o caractere. Se, em outras palavras, um dígito hexadecimal pode ter 16 valores diferentes. Um cliente que é legal, mas não há apenas um dígito para cada cor. Eu posso ver que os dois dígitos dizem, e essa é uma boa pergunta. Agora temos dois dígitos, cada um pode ter 16 valores diferentes. Isso significa que dois dígitos hexadecimais combinados como este podem fazer 16 vezes 16 é 256 cores diferentes. Isso está começando a fazer sentido. Sabemos que a taxa pode levar 256 cores diferentes. O verde pode levar 256, e o azul, que significa que eles são 16777216, diferentes tons de cor que podem ser produzidos pelo formato hexadecimal. Woo hoo. Espero que isso esteja explodindo sua mente. É realmente fascinante. Então, para voltar à minha lógica, sim, minha afirmação de que números hexadecimais são naturais para computadores. Por que é natural para os computadores? Mais simplesmente porque cada dígito hexadecimal, então você sabe, o vermelho, o verde e o azul. Esses podem ser armazenados como um byte e bytes de muito, muito conveniente quando se trata do mundo do computador que pode conter um caractere ascii. E também importante, um byte é o tamanho mínimo de filha padrão de fato para armazenamento de memória. E se eu, eu, também é o tamanho mínimo de CPU e outros registros periféricos. Toma isso também armazenado como bytes. Campus Unicode ou scripts geralmente são codificados como bytes via UTF8. O ponto que estou tentando dizer é que mordidas são muito, muito úteis quando se trata de computadores. E é por isso que o tipo hexadecimal de formato ou sistema, para mim, faz mais sentido intuitivo. E você pode estar pensando, legal, podemos produzir 16,77 milhões de cores. Isso é o suficiente? E sim, é suficiente. O olho humano só pode distinguir até 10 milhões de cores. Então, ter 16,7 milhões é muito mais do que suficiente. Mas você fez uma boa pergunta e para ser sincero, existem outros padrões lá fora, por exemplo, você pode ter visto domesticado, mas HDR, isso se relaciona com a profundidade de cor, com cada valor RGB sendo 30 bits, portanto, dez bits por canal em vez de nossos oito bits. Mas, novamente, é um tipo de ponteiros porque o olho humano só pode distinguir após uma certa quantidade de cores. Você conhece o velho ditado por que consertar algo se não está quebrado. Mas voltando ao nosso código, é exatamente por isso que escrevemos a função. Queremos produzir um número aleatório. E queríamos produzir um número aleatório até 16777216. Lembre-se, a função aleatória matemática, que é de JavaScript que gera um número entre 0, que é inclusivo e um que é exclusivo. Assim, o acima ou produzir valores entre 0 e 16, triplo 7.999215. E então usamos o método matemático para arredondar para baixo para o número inteiro mais próximo. E eu fiz isso muito deliberadamente porque agora se arredondarmos para o número inteiro, você concorda comigo, vamos obter valores entre 0 inclusive e 16777215 inclusivamente. E pescoço é exatamente o que eu queria. Esse valor, 16, triplo sete a 15 será convertido em valor hexadecimal. Se FF, FF, FF, o que eu fiz muitos f's, eles significam apenas seis f's. Portanto, esse é o número mais alto que queremos para conversão hexadecimal. E se você incluir isso com o número 0, ele produz 161717, 16 valores únicos. Quem? Espero que isto esteja a fazer sentido. Mas lembre-se, nós não paramos. Sim, nós adicionamos a função chão e então nós também tivemos que adicionar o método toString. Então, na próxima palestra, porque isso está ficando bastante longo agora, eu quero apenas mencionar brevemente o método toString em como isso funciona. Espero que estejas a aprender muito, espero que te divirtas, e eu vejo-te, vejo-te na próxima palestra. 23. Como funciona o método toString(): Estamos quase terminando e percorremos um caminho tão longe. Então aguente firme. Esta vai ser a última palestra sobre nós. Então só vamos, agora temos um número hexadecimal gerado aleatoriamente. E antes de avançarmos, só quero lembrá-los o que é esse objeto matemático. É um objeto JavaScript disponível para nós automaticamente em todos os navegadores. Então isso é simples o suficiente. Nós apenas usamos os métodos Math.Random e Math.Floor. E usando esses dois métodos, agora temos um número de resultados na faixa de 0 e 1, seis, triplo sete a 15. Lembre-se do nosso formato hexadecimal, pode variar de 0, dois Fs. Portanto, ter números não é suficiente. E é exatamente por isso que precisamos acessar o método toString. Este método converte um objeto ou um número, no nosso caso, você adivinhou para uma string. E a boa notícia para nós é que cada objeto tem um método toString. E praticamente tudo em JavaScript é um objeto, incluindo o que acabamos de produzir. Sim, eu vou número. E esta função toString aceita uma única base de parâmetros opcional. A base apenas especifica como o inteiro deve ser representado em uma string. Então digamos que definimos uma variável chamada num. E vamos apenas para argumentação, suponha que esse número é 1, 2, 3. E se acessarmos este método toString, mas fizemos isso como base 2, lembraremos que a base dois é binária, ou seja, temos apenas dois dígitos, 01. Então, se acessarmos o método toString como base 2 nesse número, obteríamos retornado o resultado em forma binária, que é para 1011. Mas, no nosso caso, não usamos a base de dois graus, você seria usado com base em 16. Lembre-se, hexadecimal é a base 16. É composto de 16 símbolos diferentes. Assim, o método toString acima irá converter o 123 em forma hexadecimal. Ele irá no exemplo acima, com o nosso número 1, 2, 3, retornar o valor sete. E é por isso que usamos o método toString em nosso número para convertê-lo em formato hexadecimal. Espero que esteja fazendo sentido. Espero que esteja mais confortável com o que acabamos de fazer. E como sempre, não terminamos. Temos muito mais para aprender. Então chega de pular sobre isso. Agora, vamos seguir em frente. 24. Os tipos de eventos — rato e teclado: Aprendemos sobre manipuladores de eventos em linha, propriedades de manipulador de eventos e ouvintes de eventos. E na maioria desses casos, sempre olhamos para o evento clique. Mas enquanto eu continuava a aludir ao OEM, muitos outros eventos no DOM. E isso me traz a essa palestra. E é que quero que discutamos eventos comuns. E por eventos comuns são apenas eventos malvados que você vai encontrar mais. Mas primeiro, vamos dar um passo atrás. As veias manequim são coisas que aconteceram. Na maioria das vezes, um evento é acionado pela ação do usuário. Por exemplo, clicar em um botão do mouse ou tocar em um teclado. E sabemos que em cada evento, seja um evento de clique ou um evento de teclado, cada evento é único. É um objeto com suas próprias propriedades e métodos. Este é um ponto importante que quero passar e veremos exemplos disso em breve. E muito importante, todos os eventos herdam do objeto de evento. É uma interface que representa cada evento que ocorre no DOM. E sim, cada evento, não importa que tipo seja, herda desse objeto de evento. Isso poderia ter sido um IV intruso por uma ação do usuário ou poderia ter sido gerado por uma API. Por exemplo, para representar o progresso de uma tarefa assíncrona. O evento poderia ter sido acionado programaticamente. Você poderia ter definido o evento e enviá-lo para alvo especificado usando o alvo veia e despacho no método de impressão. Não se preocupe, um DRE pode ser um fenômeno um pouco confuso. Basta ter em mente que o ponto que eu estou tentando fazer é que eles são muitos tipos de Vivienne, alguns dos quais usam outras interfaces baseadas no objeto principal do evento, esta interface fraca aqui. E o que é realmente legal é que o objeto C fraco contém o conjunto padrão de propriedades e métodos que são comuns a todos os eventos. Bem, continuo a mencionar que são toneladas de veias diferentes, mas o que são? Bem, temos literalmente uma infinidade de tipos diferentes. Você pode ver alguns deles aqui na tela. Mas como eu mencionei, eu só quero que olhemos para os eventos comuns aqui , ou seja, as veias que vamos encontrar com a maioria dos desenvolvedores de ondas S. Então vamos nos livrar de todo o outro barulho. E vamos olhar para alguns outros eventos comuns que estão disponíveis para nós. E eu sei que você pode estar olhando para aqueles grungy ou eles apenas cinco tipos comuns de eventos e respostas. Sim. Como a maioria das veias que vamos estar ouvindo cairão em uma dessas cinco categorias. Eventos de mouse, como você sabe, estão entre os eventos mais usados. E eles apenas se referem a eventos que envolvem clicar nos botões do mouse ou passar o mouse sobre mover o ponteiro do mouse. O que eu quero dizer por pairar e mais amplo vê um evento pairar. Bem, lembre-se, quando usamos mouse para e mouse deixar em conjunto, nós praticamente criando um efeito de pairar que dura enquanto o ponteiro do mouse está no elemento. E sabemos que um evento clique é um evento composto que é composto de uma combinação de mouse para baixo e mouse para cima. Portanto, há realmente muito que podemos fazer com esta categoria de mouse. Mas não temos apenas eventos de rato, Dewey. Também temos muitos eventos de teclado. E como o nome indica, eventos de teclado são usados para lidar com ações de teclado, como pressionar uma tecla, levantar uma tecla, manter pressionada uma tecla, etc, etc. Você pode notar na tela aqui que temos um evento de tecla para baixo e evento de tecla pressionada no dia meio que o mesmo. Sim, eles são parecidos, mas eles não são exatamente os mesmos. Chave. Dom reconhecerá todas as teclas que forem pressionadas, enquanto a tecla pressionada emitirá teclas, ou seja, excluirá as teclas que não produzem um caractere. Por exemplo, como as teclas Shift out, delete, et cetera, et cetera. E lembre-se de como eu disse que cada tipo de evento tem seu próprio conjunto de propriedades e métodos. Bem, o teclado não é exceção. Eles têm um conjunto específico de propriedades para acessar nos dando informações sobre chaves individuais, em seguida, ter abraçado. Deixe-me mostrar-lhe um exemplo rápido. 25. Exemplo de evento no Keydown: Lembre-se do que eu disse que cada evento tem suas próprias propriedades e métodos únicos disponíveis para ele. Bem, agora eu quero olhar para o evento de tecla para baixo porque estamos olhando para eventos de teclado. Então eu pensei que este é um bom momento para parar e dar uma olhada em um exemplo. Então, como sempre, eu estou começando com um arquivo muito em branco porque eu quero que nós codifique juntos. Eu quero criar uma página HTML muito simples com um corpo. E no corpo eu só quero uma tag de script. Eu nem quero incluir qualquer HTML. Isso vai ser muito simples. E o que eu quero fazer é ouvir um evento chave para baixo em todo o documento. Então, acessamos nosso objeto de documento, e em que adicionamos o addEventListener. O evento que queremos ouvir agora é chamado chave para baixo. Não importa. E eu quero usar a sintaxe de seta para pegar o evento. E, a fim de obter os dados. Isso mesmo, precisamos de uma variável e eu vou chamar esse evento variável. E neste objeto de evento que nos é devolvido, há uma propriedade chamada chave. Esta tecla nos dirá qual tecla foi pressionada em nosso teclado. E é isso que quero dizer. E hortelã dizendo que cada tipo de evento tem seu próprio conjunto único de propriedades. O evento clique, ele não tem uma propriedade chave em tudo, quero dizer por ele. Então, para provar isso para você, vamos fazer login vein to key. Então nós vamos fazer, Vamos agora para o nosso navegador e testis. Então, é claro que devemos obter uma página em branco é o que esperamos. Inspecione este documento. Vamos para o console, atualizar. E agora deixe-me pressionar a tecla A no meu teclado. Olhe para esse console registra todos os valores que estou pressionando no meu teclado. Olá mundo. Quão legal somos nós? Hoje vamos. Este é apenas um exemplo. Se você quiser ver quais métodos e propriedades estão disponíveis em todo o evento, tudo o que podemos fazer é em vez de acessar uma propriedade no evento, podemos apenas registrar o evento inteiro em si. Então vamos atualizar e deixe-me pressionar qualquer tecla, apenas minha barra de espaço, por exemplo. E lá vamos nós. Temos um evento de teclado. E dentro deste evento, você pode ver suas propriedades e métodos. E lá estava a chave, a propósito. Foi assim e como eu soube que havia uma propriedade chave na esperança de que estivesse fazendo sentido. Vamos voltar para a palestra. 26. Tipos de eventos — formas: Herbert fazendo cenas e espero que você se divirta. Então falamos sobre os eventos do teclado. Vamos ver as quatro reuniões. E você pode imaginar como isso é importante. Para mim. Veias são ações que dizem respeito a formulários, como elementos de entrada que estão sendo selecionados ou não selecionados, e, claro, formulários que estão sendo enviados. Eles são um monte de eventos disponíveis para nós que podemos olhar para fora em um focos formais, um bastante interessante. O foco é alcançado quando um elemento é selecionado, por exemplo, através de um clique do mouse ou quando o usuário navega através de uma forma de fogo, a tecla Tab. E o que super-duper interessante é que JavaScript é frequentemente usado para enviar formulários e visto os vales através de uma linguagem back-end. E a vantagem de usar JavaScript para costura formulários é que ele não requer uma recarga de página para enviar o formal e JavaScript, claro, também pode ser usado para validar campos de entrada respondidos. E já me conheces, adoro exemplos. Então vamos olhar para um exemplo de formulário agora. Como podemos ouvir as veias e como podemos extrair dados de um formulário e exibi-los em uma tela. Vamos dar uma olhada. 27. Tipo de evento de formulário — exemplo: Certo, temos falado sobre formulários e como podemos interagir com formulários. Isto é olhar para um exemplo muito simples e rápido. Aqui na tela você pode ver que não parece tão agradável. As imagens ampliam para que você possa vê-lo um pouco melhor. Este formulário apenas pede o nome do usuário e eles sabem qual é o seu animal favorito. Então, podemos escrever o meu nome. E meu animal favorito, como você sabe, é uma água. Dê-nos que envie isso. Eu só quero mostrar uma mensagem dizendo Oi Clyde, eu adoraria ter suas togas vestidas, por favor. Então isso pegou dinamicamente o que é o animal que eu escolhi e também meu nome. Como iríamos fazer isso? Bem, é disso que se trata esta palestra. Então eu vou ousar a correlacionar a página do esqueleto aqui. E então na próxima palestra, eu vou te mostrar a solução. Então vamos dar uma chance. Isso começou. E aqui vamos nós, colocar uma página em branco ou você sabe o que eu vou fazer, deixe-me realmente colocar um navegador em branco à direita. E eu vou levar dizer que à esquerda apenas para que possamos puxar juntos e nós podemos ver o processo passo a passo. primeiro passo é criar um modelos HTML muito simples. E, claro, temos o nosso corpo dentro do nosso corpo. Vamos começar a construir a nossa forma. A primeira coisa que quero fazer é ter uma etiqueta. E podemos dizer o nome, por favor. E, claro, podemos ter uma entrada de texto do tipo. Isto só tem a identificação do nome. Se guardarmos isso e formos para o dia do navegador, temos o nome, por favor. E podemos inserir nosso nome baseado no medo, simples, e você torna isso um pouco maior. E então isso podemos reduzir um pouco só para que tudo esteja em uma linha. E os mistérios têm uma quebra e código. E então podemos começar a implementar nossa lista suspensa e ganhar. Podemos embrulhar isto numa etiqueta. Deixe-me remover esta queda. E podemos fazer a pergunta, qual é o seu animal favorito? E, claro, podemos ter uma tag seleta aqui. A identificação pode ser animal. Então sim, podemos ter as nossas opções. E nós temos um cão vai falar e kett, e é claro que os valores têm que ser conversa de guerra e ket. E se eu salvar isso, vamos deletar essa mão de nome. Nós não precisamos dele. Só vou salvar este dia. Regata é caixa de oscilação com cão, cão e gato refrigerante. Muito bem. Do que precisamos a seguir? Bem, precisamos do botão de enviar, certo? Outra quebra o padrão intuitivo agora, com um ID de botão. E o botão pode dizer “enviar “, que tal? Agora a última coisa que eu quero adicionar é quando o usuário clica admitido, nós exibimos essa mensagem bem na parte inferior, precisamos de um elemento HTML para inserir que leva em. Então eu quero adicionar um elemento div com ID da mensagem. E agora essa tag div pode estar vazia. Está tudo bem. E então qual é o próximo passo? Bem, o próximo passo é rodar os tambores. Para acessar o DOM usando JavaScript. É aqui que entra a diversão. Então tudo o que temos que fazer agora é adicionar nossa tag de script. E esse é o jeito que eu quero deixar com você. Mas antes de eu ter em mente, quando começamos a acessar coisas de uma caixa de entrada, muitas vezes o que nos devolvemos é um objeto que é um pouco de uma dica. E pense nisso quando você estiver tentando acessar o nome do usuário sem lhe dizer qual é a solução, basta pensar no estágio que você precisa tomar. Bem, em primeiro lugar, você tem que anexar um ouvinte de eventos a algo. O que você quer? Um texto que tinha sido testado dois. Isso é certo. Estamos anexando ao botão “enviar”. E que evento você está ouvindo? Você só pensa para o evento clique. Porque quando o usuário clica nesse botão, você quer que algo aconteça. E então você basicamente só precisa definir seu manipulador de eventos, essa função de retorno de chamada. Você precisa definir todas as coisas que você quer que aconteça. Isso é tudo o que há para ele. Dê uma chance. E na próxima palestra, vou ver a solução com você. 28. O tipo de evento de formulário — adicionando JavaScript: Está bem. Você deu uma chance? Espero, senhor. Então vamos começar a enfrentar o mosquito. O que é oferecido bastão. Bem, o primeiro passo é aqui. Permitam-me, na verdade, fazer um comentário. Agora, vamos acessar o DOM via JavaScript EBITDA, e é por isso que inserimos essas tags de script. Qual é o primeiro passo? Quando o usuário clica em enviar, queremos que um evento seja acionado. E a seguir, quando queremos que nosso código manipulador execute, não é? Então, primeiro passo, agarra no botão, e agora sabemos exatamente como fazer isso. Nós definimos uma variável chamada botão. Acedemos ao nosso objeto de documento com o nosso pescoço, acessamos um método chamado get element by ID. E o que faz a identificação do botão? No entanto, muito intuitivamente, chamamos de botão. Lá vamos nós. Aí está o nosso botão. Deixa-me só fazer isto maior. Você não precisa olhar para o navegador por enquanto. Então lá vamos nós. Esse é o primeiro passo. Passo dois. O segundo passo é adicionar nosso ouvinte de eventos ao botão. E sim, vamos agarrar este botão. Vamos acessar o método add event listener. O evento que queremos ouvir, o evento clique. E o segundo argumento é definir nossa função manipuladora. Neste caso, vamos apenas chamá-lo no botão clique por falta de uma palavra melhor. E isto também era bastão, não era? Adicione o ouvinte de eventos. Aqui vamos nós. E o terceiro e último passo é o quê? 3, 2, 1, claro que já adivinhou. Ele está definindo nossa função manipulador. E, claro, começamos usando palavra-chave de função do JavaScript, nós o chamamos no botão clique. E toda a carne quente do nosso código vai estar dentro destas chaves. Então lá vamos nós. O que queremos que aconteça agora? Bem, se eu rolar para cima, sim, lembre-se que temos este div com identificação da mensagem. Agora é só uma tag div vazia. Colocar o que queremos fazer é que estamos correndo para pegar todas as entradas do formulário e inseri-los com inativos. Então a primeira coisa que temos que fazer é ter acesso a essa div. Temos que ter uma referência a ele. Podemos alterar suas tomadas conter propriedade. Vamos definir uma variável JavaScript chamada mensagem se dois. Então sabemos o que é e sabemos que podemos acessá-lo usando o objeto de documento. Podemos, em seguida, acessar get elemento por ID e o ID de que é mensagem. E agora que queremos pegar o nome do usuário e o formulário que aborda esse problema primeiro, você pode pensar que fazemos isso definindo um nome. Nós acessamos o documento, obtemos elemento por ID e o ID é nome. Você pode pensar que é assim que fazemos. Nós rolamos para cima. Você pode ver que nós demos esse campo de entrada e ID do nome. Mas se fizermos isso, isso só console logar isso, nome do log do console. O que você esperaria ver? Lembra-te que te dei uma dica na palestra anterior. Bem, isso é abrir o console aqui. Torne isso um pouco maior. Se o nosso nome, ele tem dinheiro. E nós vamos para o nosso console e clique em Enviar, o que você acha que vai acontecer? Como podem ver, o que nos devolveu não é o valor real, mas é um objeto novamente. E o que temos que fazer agora é que temos que realmente acessar uma propriedade chamada valor neste ticket, o valor desse texto de entrada. O que fazemos aqui com console log main, nós realmente não queremos um console log o nome, queremos que ele seja o valor real. E se eu escrever alguma coisa lá e eu vou me submeter, lá vamos nós, nós obtemos o valor real. Então, isso meio que faz sentido? Então vamos fechar isso agora. Vamos voltar ao nosso editor de texto. Então o que eu quero fazer é que nós não queremos acessar o nome em si porque esse retorno para nós todo o objeto que queremos acessar esta propriedade chamada valor. E, claro, o próximo passo é escolher o animal que o usuário escolheu, certo? Então documento animal tardio obter elemento por ID. Novamente. Definimos com uma identificação de animal. E novamente, queremos acessar a propriedade value desse objeto. Se rolarmos para cima, você pode ver que demos a esse elemento de seleção uma identificação de animais. Foi assim que escolhi a palavra animal aqui, que foi interrompido incorretamente. E então lá vamos nós. Neste ponto, temos toda a informação que precisamos. O último e último passo é adicionar esta informação como texto a essa div. Então agora podemos ir mensagem de saída LED. Desça aqui para baixo. Tudo o que temos que fazer é acessar nossa mensagem div. Queremos alterar o conteúdo do texto, e aqui eu posso usar literais de modelo. O que queremos dizer? Bem, seria rude se não disséssemos oi e cumprimentá-lo pelo nome. E então só queremos dizer, eu adoraria ter o seu animal, por favor. E se salvarmos isso e formos ao nosso navegador, tudo deve funcionar. Se nosso nome é Wally e o animal favorito é um gato, e você vai se apresentar, Holly, eu adoraria ter seu pedaço de gato. E lá vamos nós. Nós literalmente usamos tipos de formulários, sim, com valores de saída dentro dos formulários. E temos exibido na tela muito intuitivo, muito fácil. Espero que esteja fazendo sentido e eu me divirto. Vamos seguir em frente. 29. Tipos de eventos — toque e janela: Quem sufocamos cruzando este incrível. Não vamos falar sobre esses eventos de toque. O que são esses? Sobre o que é isso? Bem, em primeiro lugar, eu quero definir um sensível sido tão apenas acionado em dispositivos habilitados para toque , como smartphones e laptops touchscreen. Enquanto essas ravinas de toque precisavam bem, vamos pensar sobre isso. Veias do mouse como no clique e movimento do mouse. Eles são acionados na maioria dos navegadores e dispositivos. No entanto, para smartphones e iPads e similares, o movimento do mouse nem é acionado porque o conteúdo leva o dedo pairando sobre o telefone, por exemplo, alguns smartphones ou adicionando costuras, isso irá adicionar mais telefones inteligentes, não deve tomar movimentos do mouse no futuro. Mas em casos em que você não quer usar o mouse e os feijões. Temos estes eventos de toque. E a última coisa que eu quero discutir agora são essas janela que ele ganha coisa Android vale a pena saltar muito tempo em agradável porque eles são bastante auto-explicativo. Você pode ouvir quando o usuário rola uma página para baixo para redimensionar a página da página é carregada, et cetera, et cetera. Muito, muito útil. Canta. Legal. Mas de qualquer forma, nós fizemos em quantidades incríveis. Viemos muito, muito longe. Tão bem feito. Série D, eu acho que você deve tomar em todas essas coisas que você aprendeu até agora, tomar um fôlego, fazer uma pausa, tomar um café, e apenas se orgulhar de si mesmo. Dentes de Sears vêm através de uma queda de distância que antes de passarmos para a próxima seção, eu só quero que nós tentemos nossa mão em alguns desafios. Estou super entusiasmada. Espero que você também esteja. Vejo-te agora. 30. Projeto do curso: introdução: Ou estranho, isso vai ser muito, muito divertido algumas palestras falando muito brevemente sobre formulários e como eles funcionam. Então, o que eu quero que construamos juntos, a propósito, é exatamente o que você está vendo na tela na sua frente agora. E eu vou estar codificando o HTML e CSS do zero no que eu quero que você faça? Claro, os usuários devem ser capazes de digitar o nome. Você pode ver agora quando eu cliquei na caixa de texto de entrada, o estilo dessa borda inferior acabou de mudar. E digamos que os tipos de usuário, Bob, Luka, legal. Ou seja, eu quero que você exiba isso leva, abaixo, pegando esse valor da caixa de entrada e exibindo-o abaixo. E você pode ver que isso acontece em tempo real. Então vai ser muito interessante. Nós vamos estar ouvindo o evento de entrada. A propósito, e o sinal de NIM? Will, se o usuário clicar nele, eu fui você para mostrar que um evento de envio foi disparado. E quero que exiba o carimbo de data/hora. E dá-me só um segundo. Deixe-me atualizar rapidamente esta página. Deixe-me errar rapidamente com algum código. Dê-me dois segundos. Ok, estou de volta agora. O que eu quero que você faça também é que eu quero que você comece a brincar com esse evento de foco em formulários. Então o que eu quero dizer com isso, bem, se o usuário clica nesta caixa de texto de entrada, quer mudar sua cor de fundo e o texto a propósito, porque agora quando o usuário digita Bob, que Bob input toma como não branco mais, é Preto. E podemos fazer uma tonelada de outras coisas em formulários. Isto não é um curso de formulários. Vou ser relativamente rápido. Mas você realmente não pode fazer muito. Por exemplo, se copiarmos Bob, se eu realçar isso e acima, basta pressionar o controle C no meu teclado. Enquanto olhamos para isso, recebemos um alerta dizendo que você copiou o gosto. Então eles realmente são um monte de eventos que podemos ouvir quando se trata de formas de fazer essas cenas. Então eu estaria me divertindo. E vejo-te nas próximas palestras. 31. Projeto do curso — criando nosso HTML: Bem-vindos à palestra da Escola. Está bem, fixe. À esquerda temos o editor de código do Visual Studio. À direita temos o nosso navegador. E no interesse do tempo, vou ser super rápido. Sim, vou cortar rapidamente o HTML. Vou dividir os CSAs em tempo real com você. Mas este não é um curso sobre CSS ou HTML. Então eu vou ser relativamente rápido. Se não quiser continuar, está tudo bem. Eu forneci os arquivos HTML e CSS abaixo nos recursos. Então, sem mais delongas, vamos começar a codificação. Tudo bem, então deixe-me começar a codificar nosso HTML. Vamos apenas criar um modelo muito, muito simples. Tudo o que vou fazer agora é criar um elemento de cabeçalho. E, claro, temos que vincular ao nosso estilo, arquivo style.css. Então o que vamos fazer ainda, e a propósito, você pode ver no topo do meu editor, eu tenho três arquivos, meu índice, arquivo HTML, styles.css, e um arquivo de aplicativo, e não há mais nada no meu diretório que tem tudo o que eu tenho parede criada. Eu criei este arquivo de texto aqui sem motivo. Então deixe-me deletar isso. Lá vamos nós. Então você pode ver que eu só tenho três arquivos, especialmente quando eu tenho e eles estão todos vazios. Então lá vamos nós. Fizemos nossa seção da cabeça e agora apodrece nosso corpo. E é com isso que quero lidar, certo? Queremos lidar com formulários. E isso apenas cria uma cláusula aqui e chama-lhe uma forma legal. Não precisamos de uma ação neste caso. Nós não vamos estar enviando solicitação GET e postar solicitação para um servidor, então você pode ignorar isso. E lá vamos nós. Aí está a nossa forma. Podemos encerrar tudo por enquanto. E vamos criar um rótulo. E este pode ser o nome do usuário. Aqui vamos nós. E com a Índia podemos ter uma tag de extensão em seu nome, as capitais de estado em seu nome. E então, é claro, se salvarmos isso e atualizarmos, nosso navegador vai ser apenas tomadas estrangeiras. O que precisamos agora é da caixa de entrada, não se preocupe. tipo de entrada é igual ao texto está bem. Apenas uma questão lenta de completude, mesmo que não vamos usar um cheque. Isso apenas diz que este é o nome, o nome do usuário. E se guardarmos isso, estas são caixas de entrada. Então lá vamos nós. Temos o nome do usuário. A única outra coisa que eu fui como um botão de enviar. Vamos criar outro elemento de rótulo. Vamos apagar esse rótulo. E aqui dentro podemos ter apenas uma caixa de entrada, mas do tipo enviar. Vamos tipos de MIT. O valor pode ser inscrito. Agora, como exemplo, vamos apenas ter um U maiúsculo, salve isso e joelhe-se como nosso botão de inscrição agora. Então lá vamos nós. Isso é literalmente tudo o que eu quero que façamos. Aqui na parte inferior, eu quero incluir uma tag de script e vamos fazer referência ao nosso arquivo app.js. Então, aí está. Uma forma muito simples que não precisa de um ano inteiro. Vamos aprender coisas muito interessantes. E como desenvolvedor, você estará correndo através de formulários o tempo todo. Então, antes de continuarmos, eu acabei de desenhar o CSS e vamos pegar as simples e chatas tomadas antigas que você vê na tela agora. E podemos convertê-lo em algo muito legal. Vamos agora para o nosso arquivo styles.css. E começa a codificar nosso CSS. E mais uma vez, vou manter isso muito simples. Isso é acessar nosso formulário. Lembre-se que envolvemos em uma classe de forma legal de obter nosso arquivo de índice. Você pode ver o nosso formulário é embrulhado em uma classe chamada legal para o arquivo CSS Skoda. Em primeiro lugar, vamos definir sua largura como 70 por cento, apenas para que ela não se estenda em toda a tela. E vamos dar a isso um fundo legal. Fundo. E o fundo pode ser RGB 6791117. Essa é a cor que escolhi. Quer saber, se eu apenas comentar essa largura, você pode ver por que eu fiz isso. Se eu não especificar uma largura, o bloco inteiro se estende por toda a tela. Eu não quero isso. É por isso que me restrito a 70%. Esperava que fizesse santos e font-size. Nós realmente não precisamos fazer isso. Acho que sim. Podemos defini-la como um objectivo que já é. Então deixe-me apagar essa perda de tempo ou o que mais podemos acrescentar aqui? Será estofamento seria bom efeito o preenchimento superior, o preenchimento direito e inferior pode ser diferente e, em seguida, claro, o elevador pendente pode ser dois a esse respeito, está realmente começando a parecer melhor OT, vamos adicionar uma borda em torno de tudo isso. Pode ter cinco pixels sólidos. E agora vamos apenas escolher um CALEA aleatório, 5368 e. Como é que isso parece? Essa é uma fronteira legal. Agora o que eu quero fazer é empurrar isso para o centro da tela. Porque você pode ver que é empurrado para a esquerda. E há uma maneira muito fácil de fazer isso. E eu posso apenas afetar sua margem e dizer alterar baseado em consulta simples. Agora, eu quero falsificar o estilo da caixa de entrada real. Então tudo o que temos que fazer aqui é eu quero acessar nossa forma legal e eu quero afetar a entrada. Agora, se você tem um monte de entradas, às vezes você quer especificar com mais detalhes o que queremos. Aqui sabemos que esse tipo é texto. É a única coisa que queremos fingir. E o que queremos fazer é acessar a forma alquílica novamente, e queremos encaixar no rótulo. Quero agradecer a ambos ao mesmo tempo. Primeiro, o que quero fazer é encontrar uma família de fontes diferente. Agora é só um pouco chato. E digamos que é Colibri. É, na verdade, livrar-se de todo o resto. Como é que isso parece? Na verdade? Pensa neste tipo de equilíbrio. Sim, assim é melhor. E então vamos definir uma cor, AAA. Se eles, vamos começar a melhorar. Agora vamos rolar um pouco para baixo. Quero que finjamos agora a etiqueta. E quero que a propriedade de exibição seja bloqueada. Muito melhor porque então pelo menos agora podemos dividir a pasta de envio. Faz sentido. A próxima coisa que quero fazer agora é apenas adicionar alguma margem ao fundo. Só porque enviar botões para fechar isso, você diz 10 pixels. Como é que isso? Sim, eles melhoraram. Agora quero mostrar-vos outra técnica. Não temos de o fazer neste caso, mas só vai ajudar-te a aprender. Eu sei que não é um curso de CSS, mas que você pode até aprender algumas coisas com isso. Sim, vamos apenas dizer que queremos selecionar todos os elementos span. A forma como os elementos pai é um elemento de rótulo. Apenas comentou, resolver. Mas é isso que eu quero fazer ainda. E se você quiser fazer isso, certo, se eu obter 0 arquivo de índice, podemos ver que queremos obter este elemento span e seu pai é um rótulo. É o que queremos fazer aqui. Tudo o que teríamos que fazer para fazer é acessar nossa forma legal. Queremos que o rótulo seja o pai. E queremos acessar o elemento span que tem um pai de rótulo, como a maneira legal legal de fazer isso, eu quero definir sua largura de malicioso, digamos um 150 pixels. E eu quero flutuar este espaço para a esquerda. E vai fazer com que pareça muito melhor. Olha para isto. Quão legal é isso? Agora o que eu quero fazer é quando o usuário digita nesta caixa de entrada, este é apenas o estilo padrão simples, chato aplicado a um navegador. E eu não gosto em primeiro lugar, você pode ver os carrapatos tão largos assim você não pode sequer vê-lo. Tem uma caixa de entrada feia cinza, que eu não gosto. Tem fronteiras que eu não gosto. Solicitante seja criativo. Ou precisamos fazer aqui é acessar nosso formulário COO. Lembre-se, queremos acessar nossa tag de entrada e se você quiser ser mais específico, você pode, especificando o tempo de entrada, podemos saber que seu tipo de entrada é texto? Em primeiro lugar, o que eu quero fazer é mudar este pano de fundo para transparente e realmente começar a parecer melhor. Eu também quero remover a fronteira para o que ela vai dizer fronteira nenhum. Veja como estamos ficando bons. É muito, muito legal. Eu quero ter uma fronteira legal lá embaixo. Só acaba com isso. Isto deve dizer fronteira tracejada. Podemos especificar sua cor é de 15 a 19 para 235. Como é que isso funciona? Acho que isso parece muito legal. Agora, uma vez que um esboço de nenhum, bem, na verdade antes apenas de mim erótica, esboço de nenhum, mas deixe-me comentou. O que eu quero dizer com este esboço? Onde você pode ver quando o usuário clica na caixa de texto de entrada, borda azul, que delineia esta foto. Eu não quero isso. Então, se formos para nenhum e o usuário clica em sua caixa de texto de entrada, não há contorno. Então foi tudo o que fiz lá. Agora, eu quero que a borda inferior seja um pouco mais larga. Suspeito especificar uma largura de 300 pixels. Então realmente parece melhor. E basta mudar o estilo da fonte para Itálico. Eu vou definir. Eu acho que é muito legal. Uau, isso é legal. Agora o que eu quero fazer é quando o usuário começa a digitar nesta caixa de entrada, queremos mostrar ao usuário que eles estão na caixa de texto atual. Especialmente se você tivesse mais de um ano, você sabe, nome, sobrenome, excêntrico, cetera. Então, queremos agora acessar a propriedade focus. Então, tudo o que temos de fazer aqui de novo, isto é fixe. Telefone. Especifique a entrada. Você não precisa especificar esta parte superior. Só estou mostrando que essa é uma maneira de fazer isso. E, claro, queremos aplicar todos os estilos quando o foco é ativado nesta caixa de texto de entrada. E tudo o que eu quero mudar aqui, podemos fazer um monte de coisas que tudo o que eu quero mudar como o estilo inferior para um pixel tracejado. E vamos mudá-lo para RGB para 17, 255 e 169. Como isso parece uma cor amarelada? Então, quando o usuário se concentra nessa caixa de texto, essa borda inferior muda de cor. Deixa-me só dar um zoom. Consegue vê-lo lá? Quem estamos quase, quase terminando. A última coisa que quero fazer é resolver a atualização de estilo, inscrever-me. E agora isso parece muito chato. Novamente, isso é excesso fora. Forma legal. Vamos então especificar o elemento de entrada que queremos. Mas neste caso, o tipo não gosto é que o tipo é um botão Enviar. Aqui vamos nós. O que podemos fazer? Podemos mudar a família de fontes para Calibri. Família de fontes para Calibri. Como é que isso parece? Ansioso? Acho que isso parece legal. As fontes ficaram um pouco menores. Então eu quero fazer font-size um m, o mesmo que acima. Defina a margem para o topo. Idêntico fora mover o escuro. Quieto o suficiente. Sim, assim é melhor. Vamos mudar sua cor de fundo para 57686 horas. Está ficando melhor. Eu não quero uma fronteira, então vamos remover isso. Tinha agora bordas ligeiramente arredondadas. Então, o raio da borda, vamos ter como cinco pixels. Agora, começando a parecer melhor. É estofamento de cabelo. Oito pixels, dois pixels, oito pixels, dois pixels. Como é que isso parece? Stein pegou massa começando a parecer um botão de verdade. E por último, mal se consegue ler que tudo o que quero fazer agora é mudar a cor. Simples. 202 e para 19. Como isso olha para uns e todo fim de semana RBG, eu vou GB. Aqui vamos nós. Muito, muito melhor equipe agora, quando o usuário paira sobre ele, ele não faz nada e eu queria, então novamente, nós acessamos nossa forma legal. Nós x é a nossa caixa de entrada. Este que sabemos é um tipo de entrada Submeter. E queremos afetar o estilo. Claro, quando o usuário passa o mouse sobre ele. E tudo o que eu quero fazer aqui, porque eu só quero mudar o fundo para 39, 40, 60, um solo quer fazer. Então, quando o usuário passa o mouse sobre ele, você pode ver que ele fica escuro. Então lá vamos nós. Eu disse-te que ia ser uma palestra muito, muito simples. Acabamos de fazer o HTML e o CSS. E agora quero que comecemos a adicionar JavaScript. Quero que comecemos a trabalhar com este formulário apenas que você possa obter um pouco de um campo de como os formulários funcionam. Este não é um curso sobre formulários que literalmente levaria horas para passar por tudo para fazer formulários. Mas eu vou estar lhe dando informações muito valiosas em um curto espaço de tempo. Então fique motivado e te vejo na próxima palestra. 32. Projeto do curso — comportamento e carimbo padrão: Devemos ir? Estamos começando exatamente de onde paramos na palestra anterior. Acabamos de começar o nosso HTML e o nosso CSS. À direita, temos a nossa saída. Mas é claro que nada acontece agora. O que eu quero te mostrar primeiro? O que é apenas olhar para a nossa forma. Então deixe-me expandir este navegador. Deixe-me aproximar para 100 por cento. Bem, na verdade as formas, mas muito tempo, não é? Então ela tem biscoito opcode. Vamos rolar para cima. Sim, eu acho que Sunni por cento é muito delicioso prato seria 50%. E parece muito melhor. Não quero me preocupar mais com isso. Está bem. Primeiro dia quero mostrar-lhe que podemos acessar nossos formulários diretamente do console muito, muito facilmente, muito facilmente, na verdade. E uma das maneiras que podemos acessar todos os formulários em toda a nossa página, isso para acessar o objeto do documento. Nesse objeto de documento, há uma propriedade chamada forms. É literalmente fácil e o que é devolvido para nós é uma HTMLCollection. Já sabemos sobre colisões HTML na primeira série desta série de duas partes. Que basicamente ele vai voltar para nós uma HTMLCollection com todas as nossas formas, neste caso o comprimento filhotes um porque nós só temos uma forma. E, claro, estes são formados com classe de forma legal. Então é assim que podemos acessar formulários dentro do nosso documento. Essa é a primeira coisa que eu queria te mostrar. A segunda coisa que eu quero fazer é por que nós não temos o usuário digitando o nome em uma dívida para ser exibido. Abaixo está uma espécie de fazer cenas. Como faríamos isso? Em primeiro lugar, quero que criemos um elemento de parágrafo. E, em seguida, com JavaScript, eu quero que nós adicionemos dinamicamente o que o usuário digitou na caixa de entrada para seu elemento de parágrafo. Deixa-me mostrar-te o que quero dizer. Então vamos para o nosso arquivo de índice e eu quero editar com agora cheio. Então aqui podemos ter apenas um elemento de parágrafo e vamos dar-lhe um ID de saída. Claro que está vazio agora. E então, em nossos estilos, podemos começar a estilizá-lo. E eu vou aplicar apenas um estilo muito, muito simples para ele porque eu não quero insistir sobre isso. E eu vou dar estofamento para o topo de um nome. Tábua em cima. Vou dar-lhe uma borda de massa superior de um pixel, RGBA sólido do AD1, 174 a 28, e ponto zero por 45 anos para reduzir essa transparência. E com isso, eu queria me estressar em toda a caixa. Tamanho da fonte. Podemos ter um objetivo e a cor pode ser apenas folha tripla. Ok, lá vamos nós. Então nós definimos como nossa saída deve ser. Demos a ele uma borda superior, é por isso que estamos vendo, mas nada é exibido ainda. Como eu mencionei, quando o usuário toca seu nome, Bob, eu queria que ele fosse exibido abaixo. Como faríamos isso? Bem, é muito simples. Um cara, muito, muito simples. Tudo o que temos que fazer é começar a codificar JavaScript para acessar o DOM e sabemos como fazer isso. Já fizemos muitos exemplos antes. Em primeiro lugar, vamos acessar nosso objeto de documento no pescoço. Podemos acessar um seletor de consulta e nós estamos cheios. E neste formulário queremos adicionar um ouvinte de eventos. E o ouvinte de eventos que queremos ouvir é o que isso vai ser muito interessante com formulários. Este é um dos pontos que eu quero fazer que é sempre que um botão é clicado em um formulário, um evento de envio é disparado no próprio formulário, não no botão no próprio formulário. Essa é uma das coisas que você deve realmente envolver sua cabeça em torno porque vai ser muito importante para você como um desenvolvedor. Você tem isso? Ótima. Então é isso. Ele provavelmente já sabe que vamos estar ouvindo para um evento submeter nesse formulário. Então é claro que podemos definir nossa mão e eu vou apenas fazê-lo diretamente dentro deste código aqui. O que vamos fazer? Quero pegar nossa saída. Quando o usuário digita Bob, fomos pegar esse texto e queremos exibi-lo nesse parágrafo com ID de saída. Então, no topo do nosso arquivo ele, por que não pegamos nosso elemento de parágrafo de saída. Eu não estou digitando muito bem hoje. E é apenas dizer que definimos isso como uma variável chamada saída, que ela vai ser documento get elemento por ID. E o ID que lhe demos foi emitido. Eles vamos, por isso temos a nossa saída. Tudo o que queremos fazer agora é pegar nossa saída em nossas saídas, esse parágrafo, queremos afetar sua propriedade de conteúdo de texto. E sim, vou usar modelos, literais. Se você não sabe o que pareceu fechar, por favor, confira meu curso de JavaScript completo de grandmaster. Um muito, muito legal. Mas eu só quero dizer aqui que um evento de submissão foi disparado. E é usado os colchetes de cifrão para exibir nosso carimbo de data/hora. Para exibir o carimbo de data/hora, precisamos acessar nosso próprio evento. E para isso, temos que dar essa função callback, uma variável na qual colocamos. E como eu mencionei antes, nós colocamos em uma variável chamada e. Então lá vamos nós. Temos uma variável chamada e, e nela temos um carimbo de data/hora. Então lá vamos nós. Isso é tudo o que eu quero fazer é expandir o código aqui. Então vamos voltar ao nosso navegador e começar a digitar a palavra baba. Então nós temos Bob e quando eu clicar em Inscrever-se, Agora, o que aconteceu lá? O que aconteceu, mas apareceu brevemente e depois desapareceu. Deixa-me mostrar-te outra vez. Vamos conversar. Vamos clicar no cadastro agora. Ele é exibido e, em seguida, desaparece. O que está acontecendo? Está bem. Deixe-me dar um passo atrás. Lembre-se que a primeira coisa que eu queria que você entendesse os formulários é que um evento de envio é acionado toda vez que um botão é clicado dentro de um formulário. Lembre-se que vai me deixar expandir isso. Na verdade, não é apenas um botão porque, como você já sabe, a inscrição agora não era um elemento de botão. Nós envolvemos em um elemento de entrada com o tipo de envio. Então deixe-me corrigir minha declaração acabou de dizer anteriormente, um evento submeter é disparado em um formulário quando Eva no botão é clicado ou um elemento de entrada que tem tipo enviar, Zack Hanna, fazendo sentido. Então essa é a primeira coisa que eu queria passar. A segunda coisa quando se trata de formulários é que um padrão? Cena a filha formulário para o seu próprio site de urina URL. E quando faz isso, faz com que uma atualização de página. Esse é o comportamento padrão. Então deixe-me nem mesmo digitar nada na caixa de entrada e clique em Inscrever-se. Agora, olhe no canto superior esquerdo estava acontecendo. Vamos levantar-nos. Está causando uma atualização. Mas não se preocupe, nós emitimos chamado previne default. Vou entrar nisso no projeto final deste curso. Então não se preocupe muito agora, eu vou falar sobre isso mais tarde. Por enquanto, basta entender que podemos parar esse comportamento padrão. Então lá vamos nós, Hope está fazendo cenas, mas vamos voltar ao nosso código. Então, a fim de evitar o comportamento, e novamente, eu vou entrar em mais detalhes mais tarde no curso sobre nós Sedona, girar para longhand ou baixo ANA fazer agora é eu quero acessar nosso objeto de evento que colocamos em uma variável chamada e. E nesse objeto temos um método chamado previne default. Se salvarmos isso agora e voltar ao nosso site, o usuário digita Bob e clique em Cadastrar-se. Agora, lá vamos nós. Sim, impedimos a página de se refrescar. E agora, é claro, o nosso elemento de parágrafo com ID de saída recebe este texto, exibi-lo. Quão legal é isso? E sabemos que quando essa entrada é clicada, um evento de envio é disparado. Quem? Ok, então isso é meio que trabalhar com formas, hábitos, fazer um pouco de cenas, mas eu não quero parar. Sim, quero brincar com mais alguns eventos. Então, na próxima palestra, eu quero começar a olhar para coisas como, você sabe, um evento de entrada e o evento de foco. Quero começar a ver como podemos usá-los. Vi esperança que você é como design amplificador. Vejo-te na próxima palestra. 33. Projeto de curso — usando o evento de entrada, evento de foco e cópia: Como eu mencionei, eu quero brincar com alguns tipos mais pares. A, porque é divertido e B, porque é muito, muito valioso para você. Você vai usar isso o tempo todo em sua carreira de codificação. Então vamos começar rachando. Quero pegar nossa entrada, pegar nossa caixa de texto de entrada. Porque nós vamos usar isso bastante. E, a fim de fazer isso, Vamos definir uma variável JavaScript chamada texto de nome. E vamos pegá-lo acessando o seletor de consulta em nosso documento. E o que queremos procurar por tudo o que queremos para obter a nossa caixa de entrada, mas não a enviar um. Para que possamos ser mais específicos. - Sim. Podemos dizer que tem que ser do tipo texto. Isso faz sentido? E lá vamos nós. Nós literalmente temos como nomeados leva caixa. Ok, a próxima coisa que quero fazer é ouvir um evento de entrada. E o evento será acionado toda vez que o valor da entrada nessa caixa de texto mudar. Como ouvimos esse evento? Em primeiro lugar, eu quero fazer um comentário apenas dizendo, vamos brincar com diferentes tipos. Vamos rolar para baixo. É uma codificação de pensamento. A primeira coisa que eu quero fazer é que eu quero pegar, Eu vou nomear leva variável com apenas definir resto, que é essa caixa de entrada. Eu quero, em seguida, adicionar um ouvinte de evento chamado input. E então eu quero executar nossa função de manipulador bem aqui dentro. Tudo o que quero fazer é acessar nossa variável de saída. Lembre-se, aplicativo de rolagem, esse é o nosso elemento de parágrafo. E tudo o que quero fazer é me perguntar se encaixam na propriedade de conteúdo de texto. E novamente, eu vou estar usando literais de modelo. O valor inserido é. E o que é muito legal aqui é que cada elemento de entrada dentro de sua página, a API DOM nos dá acesso a uma tonelada de propriedades nessa caixa de entrada. E um deles é chamado como propriedade de valor. E isso nos dá surpresa, surpresa. O valor que foi digitado na caixa de entrada. Então, tudo o que temos a fazer é pegar a caixa de entrada, que definimos em uma variável chamada texto de nome e acessar sua propriedade value. É realmente o simples. E se formos para a nossa página agora e escrevermos Bob B, B, você pode ver que ele está atualizando o texto abaixo em tempo real. Também sei baba, baba, baba, baba, baba. Então lá vamos nós. Você pode ver como é fácil trabalhar com formulários. E se voltarmos ao nosso código, sim, você pode estar pensando Clyde, aquele evento de entrada, não formado específico e você estaria 100% correto. Não é apenas relacionado a formulários que eu estou apenas mostrando diferentes maneiras de ouvir eventos com forma interna. E mencionado na palestra anterior que temos o evento de foco. Então, por que não brincamos com isso? E, embora possa não parecer bonito se o usuário digita ou se concentra nesta caixa de entrada. Por que não mudamos essa cor de fundo? Então vou mostrar como isso funciona. Então, a fim de fazer isso, novamente, Vamos acessar nosso elemento de entrada, que colocamos em uma variável chamada texto nome. Quero adicionar um ouvinte de eventos. E desta vez vamos ouvir um evento de foco. E agora eu quero pegar nosso evento em si e colocá-lo em uma variável chamada e. E nós vamos estar entrando nisso mais tarde no curso. Então não se preocupe se você não está entendendo bem agora. Mas tudo o que eu quero fazer aqui é pegar nosso evento em si. Eu quero pegar esse alvo, também conhecido como vai ser aquela entrada em si que lutar contra o evento. Queremos afetar essa propriedade de estilo em mim. Queremos mudar o fundo e podemos mudar o fundo para azul claro. Então, vamos voltar aqui. Vamos agora clicar e essa caixa de entrada. E lá vamos nós. O é o fundo azul claro. E é claro que você aceita isso horrível. Então você também pode entrar aqui. Fizemos bem e mudamos seus conhecimentos de fundo. Queremos mudar a cor e a cor que podemos simplesmente mudar para preto. Só estou te mostrando o que você pode fazer. - Obviamente. Na minha opinião, não parece tão bom como era antes. Esse é apenas um exemplo de nós usando essa entrada. O de inadvertidamente teve carrapato o sinal para cima. Agora, lá vamos nós. Deixe-me atualizar a página. Vamos voltar ao nosso código e é assim que podemos usar o evento de foco como eu meio que faço sentido. Espero que sim e sim, só estou tentando lhe dar um sabor sobre o que você pode fazer com algumas dessas coisas. Nós também temos uma cópia de veias, colar eventos quando o usuário copia e cola coisas, um grãos de café, cortes , leva e sombra para mostrar um limitador, mostrar-lhe. Assim, listas, xs são nomeados texto. Mais uma vez, basta rolar para baixo. Sim, eu não ia entrar nisso, mas agora que mencionei isso, deixe-me mostrar-lhe rapidamente. Vamos adicionar um ouvinte de eventos chamado copy. E novamente, isso é apenas executar nosso manipulador bem dentro desta função aqui. E isso só alerta algo para a tela. Você copiou o texto. Quero dizer, você pode ser muito criativo com todas essas coisas. Oh, lá vamos nós. Vamos voltar ao nosso navegador. Vamos digitar Bob e Bob, e deixe-me destacá-lo e ir Control C no meu teclado. Copiar. E lá vamos nós, recebemos um alerta dizendo que você copiou o texto. O mesmo se aplicaria. Claro, se colocarmos colar aqui, volte ao nosso navegador. Você não copiou, você colou texto. Se voltarmos ao nosso navegador, falamos sobre copiar, desculpe, Bob, nós copiamos. Apagamos tudo o suficiente. Eu colo. Podemos alertar para colar o texto. Acho que está começando a ter algumas formas moleculares. Agora você começa a ver como é fácil trabalhar com as veias dentro de formas e não tomar todo esse conhecimento como garantido. Você realmente aprendeu muito em um curto espaço de tempo. Você sabe que um formulário envia um evento de envio sempre que um botão de envio é clicado. Ou se um elemento de entrada é clicado que tem tipo de envio. E você sabe que um formulário atualizou a página por padrão, que impedimos a propósito, e você sabe como trabalhar com eventos agora se em um formulário. Sei que são exemplos muito básicos, mas a sério, vai ajudar-vos muito no futuro. Então estamos apenas começando neste curso. Então, não vamos parar aqui. Vamos continuar a ver agora. 34. Curso de melhor uso: Oh bem, e paredes implacáveis até agora em todo o curso. E por completar esta aula, você realmente é o Estudioso Walden. Eu me diverti muito. E nesta classe, agora você sabe sobre VTS. Você sabe sobre os diferentes tipos de ouvintes de eventos que podemos anexar à página. Você sabe o que é um ouvinte de eventos, o que um manipulador de eventos é. Que na próxima perda, há sempre um homem Butters. Mas na próxima aula vamos discutir um conceito muito avançado quando se trata de coisas. E isto é, vamos olhar para a hierarquia de nós e então vamos discutir como INK, público e evento, capturando, dois conceitos muito importantes quando se trata de trabalhar com o DOM. Então eu realmente não posso esperar. Então ainda não terminamos com a mídia HOT, apenas uma ou duas aulas mais tarde. Espero que estejas a divertir-te tanto como eu, mas verás algumas de volta a respirar. Apreciar a vista é linda e verei você estudante medea na próxima perda. Obrigado.