Desenvolvimento Web Parte 08: Eventos em JavaScript

21082023 0948 Desenvolvimento Web Desenvolvimento Web Parte08 Para Refletir 02 Pe httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 131 21082023 0948 Desenvolvimento Web 5 Desenvolvimento Web Parte 08 Para Refletir 02 Inicio de conversa httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 231 21082023 0948 Desenvolvimento Web Nesta parte vamos explorar o tema eventos em JavaScript Assista 0 video com os principais topicos sobre o tema e anote suas duvidas Envie suas duvidas no Classroom da disciplina Classroom Atividades Duvidas sobre o contetido interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na segao SAIBA MAIS a Ee nse TE i wef BS F 7 ae x een NN Sif tS By g y V Se NNN Bi 5 ee UM i a ee A i 7a ne ae i b J ei e i ce a ee i a L y e J r se ee ss or sae me 2 y ows eee Gj a G eS a a prt hs o x 4 os PH ves rrr aptatlia o a 4 ee ie i a httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 331 21082023 0948 Desenvolvimento Web l ee fl t i S J he SN i Tal H i as 1H ss SS mi E I WF s Gt LA pete Wi Fy it eT Os objetivos de aprendizagem desta parte sao Entender o conceito de Eventos Conhecer os tipos de eventos em JavaScript Reconhecer a associacao de eventos e as fungcdes em JavaScript Manipular o objeto de evento httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 431 21082023 0948 Desenvolvimento Web Faculdade IMPACTA Desenvolvimento Web Parte 08 Para Refletir 02 Conteudo A seguir vamos ao video httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 531 21082023 0948 Desenvolvimento Web Koo ee ep NEaD Faculdade Impacta Clique no icone ao lado e aproveite para fazer suas anotacdes durante os estudos utilizando o Google Keep httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 631 21082023 0948 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 731 21082023 0948 Desenvolvimento Web Desenvolvimento Web Parte08 Para Refletir 02 Leitura do texto de apoio httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 831 21082023 0948 Desenvolvimento Web viviwseevi vyula wVeVVIUIUvvil yvuUuuUY UUVIUUYD viguvvivell MrALIVIUUULYD wvwuVvIiuusv VVYUNIWU Vv conteudo Eventos em JavaScript Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo O JavaScript uma linguagem de programacao completa que é executada no navegador permitindo melhorar a interacéo do usudrio com a pagina web E possivel implementar qualquer Idgica com variaveis fundes e diversos tipos de dados Mas a caracteristica que torna essa linguagem tao importante para a web é poder vincular uma variavel a um elemento HTML e tratar aquele elemento como um objeto em memoria Outra caracteristica importante a programacao e tratamento de eventos algo muito importante quando trabalhamos com interface grafica e que permite vincular a execuao de uma funao a uma acao do usudrio Introdugao Quando trabalhamos com interface grafica no nosso caso a pagina web é necessario programar a resposta do sistema para cada interagao do usuario Essas interagdes podem ser por exemplo o clique do mouse em um botao a passagem do mouse por cima de um elemento qualquer a mudanga de conteudo de algum componente especialmente em elementos definidos com a tag input o apertar de uma tecla etc Cada uma dessas interagdes além de varias outras existentes gera o que chamamos de evento E o JavaScript permite programar a resposta a um evento com a execugao de uma funao Escutando eventos com JS Uma das grandes vantagens do JavaScript é a possibilidade de reagir a certas interagcoes do usuario com as nossas paginas Praticamente tudo que o usuario manipula na pagina é passivel de reacgao Esse sistema é chamado de sistema de eventos no JavaScript onde eventos sao avisos de interagdes especificas do usuario com a pagina carregada O JavaScript possui uma programacao que possibilita escutar a manifestacdo desses eventos em cada elemento HTML adicionando escutadores do inglés listeners nos elementos que desejamos vincular alguma reagao a uma determinada interagao do usuario Os listeners sao fungdes que criamos para serem executadas toda vez que um determinado evento acontecer no nosso elemento HTML especificado A associagao entre um listener e o seu evento é chamado de registro de listener e pode ser httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 931 21082023 0948 Desenvolvimento Web determinado evento Principais eventos em JS O JavaScript disponibiliza diversos eventos ou seja podemos capturar varios tipos de interagdes diferentes do usuario A Tabela 81 descreve alguns dos principais eventos Tabela 81 Principais eventos em JavaScript Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1031 21082023 0948 Desenvolvimento Web possuem seus proprios modelos de eventos Cada modelo possui suas especificidades mas em geral a ideia por tras da maioria delas é executar uma funcao como resposta a determinada acao do usuario Associagao de eventos em JS A seguir descrevemos as principais formas de associar eventos a um elemento em HTML Duas delas utilizam os atributos com prefixo on sendo uma delas através de funcdes nomeadas e a outra com fungdes andnimas As outras duas formas utilizam o método addEventListener sendo uma delas com fungdes nomeadas e a outra funcdes andnimas E possivel criar outras variagdes dessas formas por exemplo ao associar 0 escutador do evento a uma arrow function uma forma simplificada de definir fungcdes pequenas JAVASCRIPT ARROW FUNCTION sd Como tratase apenas de uma mudanga na notacdo da funao nao usaremos arrow functions em nossos exemplos Associagao pelos atributos on com fungoes nomeadas Quando construimos uma funcao com nome é possivel vincular a sua execucao a um evento com o prefixo on através de uma atribuigao simples O nome da funcao se comporta como uma variavel que guarda o endereco de memoria da regiao onde esta armazenada a fungao A Figura 81 mostra um exemplo de como essa vinculagao ocorre Nela temos duas fungdes chamadas de exibemensagem que exibe um alerta na tela e a funcao atualizamensagem que incrementa uma variavel contadora e adiciona um texto na tag span No fim do cédigo em JavaScript fazemos duas atribuig6es com os nomes dessas fungdes sem aspas pois ndo estamos chamando as fungées e sim copiando o endereco de memoria delas o endereco da funao exibemensagem é copiado no atributo onclick do objeto botao e o endereco da funao atualizamensagem é copiado no atributo onfocus do objeto campotexto Se vocé retirar 0 foco do campo de texto e depois clicar nele novamente a mensagem sera atualizada com o novo valor do contador Figura 81 Exemplo de associagao de eventos pelos atributos on com fungoes nomeadas HTML input typetext idtxt placeholderDigite alguma coisa span idmsg stylecolor red span brbr button typebutton idbtn button httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1131 21082023 0948 Desenvolvimento Web const campo texto documentquerySelector inputtxt const mensagem documentgquerySelector spanmsg const botao documentquerySelector buttonbtn let contador 0 function exibe mensagem alert Vocé clicou no botdo function atualizamensagem contador 1 1f contador 1 mensagemtextContent O campo de texto ganhou foco contador vez else mensagemtextContent O campo de texto ganhou foco contador vezes Vincula a fungdo exibe mensagem ao evento de click clique do botado botaoonclick exibe mensagem Vincula a funcdo atualizamensagem ao evento de focus foco do campo de input campo textoonfocus atualizamensagem ExemploGoogle Chrome Exemplo x v SCP eal Te LCT bP 4h 7 sr 2 iO Digite alguma coisa O campo de texto ganhou foco 1 vez Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1231 21082023 0948 Desenvolvimento Web Podemos usar os atributos com prefixo on para fazer referéncia direta a fungdes anénimas Lembrese que uma funcao é armazenada na memoria como um objeto qualquer entao nada impede que o seu endereco seja guardado diretamente em um atributo de outro objeto em JavaScript neste caso um atributo com prefixo on A Figura 82 mostra como podemos vincular fungdes anénimas a eventos através desses atributos Note que o cdédigo é muito semelhante ao da Figura 81 mas as funcdes nao possuem nomes A primeira vista 0 cédigo parece pouco estranho mas esse tipo de construcao é perfeitamente valido em JavaScript e 6 comum encontrar exemplos assim na literatura especializada Em termos de execugao os cddigos das Figuras 81 e 82 sao equivalentes isto 6 as mensagens na tela serao exatamente iguais Figura 82 Exemplo de associagao de eventos pelos atributos on com fungoes anonimas HTML input typetext idtxt placeholderDigite alguma coisa span idmsg stylecolor red span brbr button typebutton idbtn button JavaScript httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1331 21082023 0948 Desenvolvimento Web const botao documentquerySelector buttonbtn let contador 0 Vincula uma funcao andénima ao evento de click clique do botdo botaoonclick function alert Vocé clicou no botdo Vincula uma funcaéo andénima ao evento de focus foco do campo de input campo textoonfocus function contador 1 if contador 1 f mensagemtextContent O campo de texto ganhou foco contador vez else mensagemtextContent O campo de texto ganhou foco contador vezes Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1431 21082023 0948 Desenvolvimento Web O método addEventListener fornece uma maneira mais moderna de associar eventos a uma fungao Para vincular um evento qualquer temos dois parametros basicos 0 nome do evento passado como string e sem o prefixo on e o endereco da funcdo que sera executada por aquele evento A diferenca deste método em relacao aos atributos com prefixo on é que ele permite adicionar mais de uma funao a um mesmo evento As funcdes serao executadas na ordem em que foram vinculadas aquele evento Outra observagao importante é que alguns navegadores nao suportam certos tipos de eventos através dos atributos com prefixo on Exemplo focusout que na data em que esse material foi escrito ndo havia suporte ao atributo onfocusout pelos navegadores Chrome Safari e Opera focusout Event Sd A Figura 83 ilustra como podemos associar eventos através do método addEventListener dos objetos botao e campotexto Note mais uma vez que passamos os nomes das fundes como um dos pardmetros do método mas sem adicionar abre e fecha aspas apds seus nomes Estamos enviando o endereco de memoria das funcdes para o método e nao realizando uma chamada direta a elas Quem vai se encarregar de chamar essas funcées é 0 escutador de eventos event listener desses objetos quando esses eventos forem acionados pelo usuario A execugao do cddigo é semelhante aos das Figuras 81 e 82 Figura 83 Exemplo de associagao de eventos pelo método addEventListener com fungdes nomeadas HTML input typetext idtxt placeholderDigite alguma coisa span idmsg stylecolor red span brbr button typebutton idbtn button JavaScript httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1531 21082023 0948 Desenvolvimento Web Desenvolvimento Web Parte 08 Para Refletir 02 const botao documentquerySelector buttonbtn let contador 0 function exibe mensagem alert Vocé clicou no botdo function atualiza mensagem contador 1 if contador 1 mensagemtextContent O campo de texto ganhou foco contador vez else mensagemtextContent O campo de texto ganhou foco contador vezes Vincula a fungdo exibe mensagem ao evento de click clique do botado botaoaddEventListenerclick exibe mensagem Vincula a funcdo atualizamensagem ao evento de focus foco do campo de input campo textoaddEventListener focus atualizamensagem Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1631 21082023 0948 Desenvolvimento Web Entre todas as maneiras de vincular funcdes a eventos essa é a mais interessante Ao invés de passar o nome da fungao que contém seu endereco ao método addEventListener podemos criar uma funcao andénima no lugar do parametro Essa operacao funciona e faz sentido primeiro a fungao anénima sera armazenada como um objeto na memoria RAM e o seu endereco sera retornado apos a sua definicao Esse endereco é imediatamente passado por parametro para o método addEventListener que sera executado em seguida vinculando assim esse objeto criado a funao anénima com o evento passado como string para o método A sintaxe basica é objetoaddEventListenernomedoevento function corpodafunao ea Figura 84 ilustra como podemos usar essa forma com a mesma ldégica dos exemplos das Figuras 81 82 e 83 E muito comum encontrar codigos semelhantes na literatura e a desvantagem deste método é que nao podemos reaproveitar a funcao Por outro lado a associacao do listener e a ldgica da funao ficam mais préximas no cddigo Figura 84 Exemplo de associagao de eventos pelo método addEventListener com fungoes an6nimas HTML input typetext idtxt placeholderDigite alguma coisa span idmsg stylecolor red span brbr button typebutton idbtn button JavaScript httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1731 21082023 0948 Desenvolvimento Web const botao documentquerySelector buttonbtn let contador 0 Passa uma funcéo andnima como pardmetro vinculandoa ao evento de click clique do botdo botaoaddEventListenerclick function alert Vocé clicou no botdo b Passa uma funcéo andnima como pardmetro vinculandoa ao evento de focus foco do campo de input campo textoaddEventListenerfocus function contador 1 if contador 1 f mensagemtextContent O campo de texto ganhou foco contador vez else mensagemtextContent O campo de texto ganhou foco contador vezes b Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1 authuser1 1831 21082023 0948 Desenvolvimento Web Todo evento gerado pelo JavaScript vem acompanhado de um objeto especial com informac6des sobre aquele evento especifico Esse objeto 6 chamado de objeto de evento event object e pode ser acessado adicionando um parametro com um nome qualquer a fungao associada a um evento Comumente esse parametro é chamado de event evt ou simplesmente e ficando a critério do desenvolvedor escolher 0 nome mais apropriado A depender do tipo de evento esse objeto pode ser do tipo Event ou alguma especializagao desse tipo como por exemplo MouseEvent HTML DOM MOUSEEVENT sd para eventos que envolvem manipulagdo do mouse Exemplo evento mouseover ou KeyboardEvent HTML DOM KEYBOARDEVENT sd para eventos que envolvem manipulagao do teclado Exemplo evento keydown Ha outros tipos mais especificos como por exemplo PointerEvent FocusEvent etc Cada um desses objetos especificos acompanha um conjunto de atributos cujos valores podem ser acessados para obter informacdes adicionais sobre o evento Também acompanham um conjunto de métodos que podem alterar o comportamento daquele evento A Figura 85 ilustra o uso do objeto de evento a funcdo exibemensagemevent esta associada ao evento de click do botao e utiliza os atributos clientX e clientY do objeto event para saber as coordenadas x e y do clique do mouse naquele botao Ja a funao verificateclaevent esta associada ao evento de keydown do campo de texto Toda vez que uma tecla é pressionada nesse campo esse evento é disparado A funcao entao verifica se o valor do atributo key do objeto event que contém o caractere pressionado esta na faixa entre 0 e 9 Se essa verificagao for verdadeira chamamos o método preventDefault do objeto event que fara com que a acao padrao do evento seja cancelada A acao padrao do evento keydown é adicionar a tecla pressionada ao campo de texto Em resumo 0 campo de texto do exemplo nao aceita valores entre 0 e 9 mas aceita qualquer outra tecla Figura 85 Exemplo do uso do objeto de evento HTML input typetext idtxt placeholderDigite alguma coisa brbr button typebutton idbtn button JavaScript httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 1931 21082023 0948 Desenvolvimento Web function exibe mensagem event alert Vocé clicou no botdo nas coordenadas x event e y event function verifica teclaevent Verifica se a tecla pressionada esta entre 0 e 9 1f event 0O event 9 Se a tecla estiver entre 0 e 9 impreca a acdo padrado do evento ou seja nao permita que o valor digitado seja inserido ao campo de texto eventpreventDefault addEventListenerclick exibe mensagem addEventListenerkeydown verificatecla Fonte do autor 2022 Vocé conhece O desenvolvedor e consultor em softwares especializado em aplicagdes JavaScript Erick Wendel possui um portfolio de cursos alguns gratuitos videos participagdes de comunidades e fdruns de JavaScript sendo nomeado pela Microsoft como MVP Most valuable Professional em Javascript além de ser formado pela Faculdade Impacta de Tecnologia em 2016 Se quiser acompanhar mais do Erik veja o seu site pessoal com links para suas midias sociais httpserickwendelcom httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2031 21082023 0948 Desenvolvimento Web Podemos associar uma fungao ao clique deste botdao e dentro da funao podemos verificar se os dados do formuldario sao validos Se houver alguma inconsisténcia chamamos o método preventDefault a partir do objeto de evento de clique cancelando o envio do formulario ao servidor O JavaScript também possui uma programagao que permite criar eventos customizados chamados de eventos sintaticos e usalos da maneira que desejarmos mas esse assunto vai além do escopo da nossa disciplina Para ler mais a respeito acesse Creating and triggering events sd Vamos praticar Edite o exercicio com a pagina da empresa ficticia Cursinho Web para validar o formulario da pagina contatohtm Nao deve ser permitido enviar o formulario caso os campos Nome completo ou Email estejam em branco Dica lembrese de criar varidveis no JS para fazer referéncia aos dois inputs nome completo e email e ao botao Enviar Utilize o método trim sobre strings para que nado sejam permitidas strings que contém somente caracteres em branco Para evitar que o formulario seja enviado utilize o método preventDefault do objeto de evento Caso o nome completo ou 0 email sejam vazios devem ser exibidas mensagens alerts de acordo com as Figuras 86 e 87 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2131 21082023 0948 Desenvolvimento Web completo vazio Fr This page says iC C ursinhe Web O nome nao pode ser vazio Dados para contato Nome completo Email Qual disciplina te interessa mais Desenvolvimento Web y Quais linguagens vocé conhece O C O Java O JavaScript O Python OO PHP O Ruby Onde vocé conheceu o Cursinho Web O Amigos O Google O Youtube O Instagram Limpar Enviar Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2231 21082023 0948 Desenvolvimento Web Desenvolvimento Web Parte08 Para Refletir 02 vazio T 1 This page says iC y Cur sinhe W eb O email nao pode ser vazio Dados para contato Nome completo Email Qual disciplina te interessa mais Quais linguagens vocé conhece O C O Java O JavaScript O Python O PHP O Ruby Onde vocé conheceu 0 Cursinho Web O Amigos O Google O Youtube Instagram Emir Fonte do autor 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2331 21082023 0948 Desenvolvimento Web Creating and triggering events MDN Web Docs sd Disponivel em httpsdevelopermozillaorgen USdocsWebGuideEventsCreatingandtriggeringevents Acesso em 05 ago 2022 Javascript Arrow Function W3Schoolscom sd Disponivel em httpswwww3schoolscomjsjsarrowfunctionasp Acesso em 05 ago 2022 focusout Event W3Schoolscom sd Disponivel em httpswwww3schoolscomjsrefeventonfocusoutasp Acesso em 05 ago 2022 The Event Object W3Schoolscom sd Disponivel em httpswwww3schoolscomjsrefobjeventasp Acesso em 06 ago 2022 HTML DOM MouseEvent W3Schoolscom sd Disponivel em httpswwww3schoolscomjsrefobjmouseeventasp Acesso em 06 ago 2022 HTML DOM KeyboardEvent W3Schoolscom sd Disponivel em httpswwww3schoolscomjsrefobjkeyboardeventasp Acesso em 06 ago 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2431 21082023 0948 Desenvolvimento Web r Faculdade Jurys Desenvolvimento Web Parte08 Para Refletir 02 Saliba mais Acesse 0 video sobre manipulagao de eventos em JavaScript através do DOM httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2531 21082023 0948 Desenvolvimento Web f é i is bh i Ett fa httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2631 21082023 0948 Desenvolvimento Web o eee Le Ee Le eee ep ee ee Curso em Video CURSO EM VIDEO Eventos DOM curso JavaScript 10 YouTube sd Disponivel em httpswwwyoutubecomwatchvwWnBB mZlvY Acesso em 23 ago 2022 httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2731 21082023 0948 Desenvolvimento Web Desenvolvimento Web Parte08 Para Refletir 02 Finalizando httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2831 21082023 0948 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Entender o conceito de Eventos Conhecer os tipos de eventos em JavaScript Reconhecer a associacao de eventos e as funcdes em JavaScript Manipular o objeto de evento Reflita sobre o conteudo que vocé explorou e faga um debate com seus colegas e professores pelo Classroom ou na prdxima aula ao vivo live Fique atento ao prazo de encerramento da atividade continua que compdem esses conteudos de aprendizagem Esperamos que vocé tenha aprofundado seus conhecimentos durante os estudos e tenha aproveitado todo o conteudo apresentado httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 2931 21082023 0948 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 3031 21082023 0948 Desenvolvimento Web Desenvolvimento Web Parte08 Para Refletir 02 Nucleo de Educagao a Distancia Faculdade Impacta Telefone 11 55935382 Hordrio de atendimento 10h as 18h httpssitesgooglecomfaculdadeimpactacombrdwp8pli1authuser1 3131