Manipulando o DOM no Desenvolvimento Web

21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 131 Manipulando o DOM Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 231 Início de conversa Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 331 Olá Cursista Nesta parte vamos explorar o tema manipulando o DOM Assista o vídeo com os principais tópicos sobre o tema e anote suas dúvidas Envie suas dúvidas no Classroom da disciplina Classroom Atividades Dúvidas sobre o conteúdo interaja com o professor e colabore com seus colegas Aproveite para aprofundar os estudos explorando o material organizado na seção SAIBA MAIS Objetivos de aprendizagem Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 431 Os objetivos de aprendizagem desta parte são Conhecer como o navegador estrutura os elementos HTML na memória Compreender o modelo de documento por objetos DOM Saber como usar o JavaScript para manipular elementos de uma página web Entender em que momento o JavaScript é executado Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 531 Conteúdo Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 631 A seguir vamos ao vídeo Manipulação do DOM Manipulação do DOM NEaD Faculdade Impacta NEaD Faculdade Impacta Clique no ícone ao lado e aproveite para fazer suas anotações durante os estudos utilizando o Google Keep Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 731 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 831 Leitura do texto de apoio Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 931 Leia o texto para aprofundar os temas discutidos no vídeo Entre em contato com o professor para esclarecer suas dúvidas Classroom Atividades Dúvidas sobre o conteúdo Manipulação do DOM Prof MSc Yuri Maximian Rottner Dirickson Texto revisto atualizado e ampliado por Prof Dr Rafael Will M de Araujo Resumo Vimos como o JS funciona em termos de estrutura e sintaxe agora vamos entender como integrálo com elementos HTML de um documento Web Para isso é necessário compreender a estrutura que o navegador constrói através do modelo de documento por objetos DOM e também as funções que o JavaScript disponibiliza para manipular essa estrutura Introdução O JavaScript é uma linguagem flexível e dinâmica e permite que diversas tarefas simples sejam implementadas de maneira rápida e descomplicada Apesar de hoje em dia ela também poder ser usada para programar o lado do servidor sua intenção primordial é a de funcionar em conjunto com o HTML e o CSS para trazer capacidades mais modernas à web Veremos como a partir de funções nativas do JavaScript no navegador podemos navegar nos elementos HTML que estão disponíveis e como podemos manipulálos livremente O que é o DOM Quando o HTML é carregado pelo navegador após uma requisição é iniciada a fase de análise e tradução do código HTML chamado em inglês de HTML parsing onde o navegador interpreta o código HTML linha a linha entendendo as tags e traduzindoas para os elementos que aparecerão no navegador visuais ou de configuração Na prática esses elementos são representados por objetos na memória RAM pelo navegador e como o HTML é intrinsecamente uma representação hierárquica de elementos uma vez que tags são colocadas dentro de outras tags o navegador disponibiliza essa estrutura como uma árvore de objetos contidos na memória Essa representação em árvore dos elementos HTML de um documento é chamada de Document Object Model DOM ou Modelo de Documento por Objetos A Figura 71 ilustra o exemplo de uma pequena página HTML e sua representação do Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1031 DOM Cada caixinha representa um objeto em memória com suas próprias propriedades e métodos construídos a partir da representação de suas tags no código HTML Figura 71 Exemplo de um DOM HTML DOCTYPE html html head titleExemplotitle head body h1Títuloh1 a hrefLinka body html Fonte do autor 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1131 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1231 Esses objetos em memória permitem usar funções e variáveis presentes no JavaScript para navegar nesta árvore de objetos e poder alterála da maneira que desejarmos JAVASCRIPT HTML DOM sd Navegando pelo DOM com o JS No ambiente do navegador o JavaScript possui algumas variáveis globais disponíveis a todo momento Uma das mais importantes é aquela que traz a referência ao DOM e sua árvore de elementos a variável document Tudo que será buscado ou alterado em termos de conteúdo do navegador será feito neste objeto A seguir detalharemos os principais métodos internos do objeto document para buscar elementos na árvore getElementById Esse é o método mais simples para buscar um elemento na árvore de elementos do DOM Sua sintaxe é documentgetElementByIdid onde passamos o id de algum elemento HTML existente na página O método retorna um objeto com a representação daquele elemento devendo ser guardado em uma variável ou o valor null caso não exista nenhum elemento HTML com aquele id getElementByClassName Apesar da facilidade do método getElementById seu uso nem sempre é possível em determinadas situações pois implicaria que cada um dos elementos da página tivessem um id atribuído para si Outra impraticabilidade é o caso em que desejamos recuperar um conjunto de elementos com características similares mas o getElementById só permite acessar um elemento de cada vez O método documentgetElementsByClassNameclass permite selecionar um conjunto de elementos pelo nome da classe a qual eles pertencem Note que a palavra Elements no nome do método está no plural pois será retornado um objeto do tipo HTMLCollection similar a um vetor e pode ser tratada como tal Cada índice corresponde a um elemento HTML e sua posição no vetor corresponde à ordem em que ele aparece no código HTML getElementByTagName Outra maneira de selecionar um conjunto de elementos no JavaScript é através do método documentgetElementsByTagNametag onde tag é o nome da tag que desejamos selecionar Esse método também retorna um objeto HTMLCollection similar a um vetor com todos os elementos definidos pela tag informada no parâmetro na ordem em que eles aparecem no código HTML querySelector Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1331 O método documentquerySelectorseletor é uma maneira mais moderna para buscar elementos da árvore do DOM Ele recebe um seletor CSS por parâmetro e retorna um objeto que faz referência ao primeiro elemento do código HTML que corresponde ao seletor usado querySelectorAll O método documentquerySelectorAllseletor é similar ao querySelector mas ao invés de retornar a primeira ocorrência retorna um objeto do tipo NodeList similar a um vetor contendo referência a todos os elementos na página que correspondem ao seletor passado por parâmetro A Figura 72 mostra um exemplo com 3 parágrafos e 3 divs em HTML e um código JavaScript que utiliza os métodos vistos para acessar alguns desses elementos Com os objetos retornados podemos usar a linguagem JavaScript para modificar vários aspectos desses elementos veremos mais adiante Figura 72 Exemplos de uso dos métodos que retornam referências a objetos do DOM HTML p classimportanteParágrafo 1p p idpar2Parágrafo 2p p classimportanteParágrafo 3p div classimportanteDiv 1div div classcomumDiv 2div div iddiv3Div 3div JavaScript Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1431 Retorna um objeto que representa o Parágrafo 2 const objeto1 documentgetElementByIdpar2 Retorna um vetor com os objetos Parágrafo 1 Parágrafo 3 e Div 1 nessa ordem const vetor1 documentgetElementsByClassNameimportante Retorna um vetor com os objetos Div 1 Div 2 e Div 3 nessa ordem const vetor2 documentgetElementsByTagNamediv Retorna um objeto que representa o Parágrafo 1 primeira ocorrência de um parágrafo com a classe importante const objeto2 documentquerySelectorpimportante Retorna um vetor com todos os objetos que possuem a classe importante Parágrafo 1 Parágrafo 3 e Div 1 nessa ordem const vetor3 documentquerySelectorAllimportante Fonte do autor 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1531 Independente do método utilizado é importante notar que para o JavaScript conseguir selecionar um elemento específico ou vários esses elementos precisam existir e estarem carregados no DOM Mesmo parecendo óbvio esse aviso se deve ao fato de que o JavaScript pode ser executado antes de o HTML ter sido carregado podendo acarretar em erros estranhos Isso se deve a maneira como o navegador interpreta o HTML e o JavaScript Execução do JS Como dito anteriormente quando o navegador recebe o documento HTML ele inicia a interpretação parsing do HTML linha a linha entendendo os elementos HTML Mas quando o HTML chega em algum recurso como arquivos CSS ou JS essa tradução é pausada enquanto o arquivo é baixado e seu conteúdo também traduzido parsed e executado no caso do JS Como tanto os arquivos JS quanto CSS são elementos de configuração do navegador para a correta visualização e execução do site a recomendação é colocálos no head do documento HTML Isso é ideal para o CSS pois permite que as regras do CSS sejam entendidas antes de mostrar os elementos aplicando o estilo no momento correto Já para o JavaScript isso traz um problema como o arquivo é baixado e executado ainda durante a tradução do head não há conteúdo no body para ser procurado pelo JavaScript resultando em buscas no DOM que devolvem vetores vazios ou null em lugares indesejados Para contornar esse problema os programadores usavam uma de duas soluções colocavam as tags de script no final do body garantindo assim que todos elementos HTML já tenham sido carregados corretamente ou associando uma função JavaScript com a execução do script inteiro a um evento que o navegador dispara quando o DOM está pronto veremos mais sobre eventos mais adiante Como forma de otimizar o carregamento de scripts surgiram duas configurações possíveis de serem colocadas na tag script o async e o defer async e defer Os atributos async e defer surgiram como forma de otimizar o uso de JavaScripts nas nossas páginas que se tornaram predominantes na web Ambos possuem funções diferentes para tipos de scripts diferentes O atributo async torna todo o processo de baixar e traduzir o JavaScript em um processo assíncrono ou seja o navegador faz ambas as coisas ao mesmo tempo em que termina de analisar o código HTML Neste caso não há um aumento substancial no tempo de carregamento da página por conta dos scripts a menos que eles sejam muito grandes Esse atributo é recomendado para scripts que não precisam do DOM já estar carregado para funcionar pois é possível que o script encerre sua execução antes que o DOM esteja Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1631 pronto O atributo defer faz com que o processo de baixar os arquivos de JavaScript seja assíncrono assim como o async mas sua tradução e execução são feitas após o carregamento completo do HTML e o DOM esteja pronto Dessa forma o navegador garante que scripts que precisam manipular o DOM sejam carregados de maneira mais eficiente assíncrona mas sua execução vai ocorrer apenas quando o DOM estiver pronto A Figura 73 mostra a diferença entre os atributos async e defer e como é a ordem de carregamento e tradução do HTML Figura 73 Diferenças de carregamento com defer e async Fonte do autor 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1731 Manipulando o DOM com o JS Vimos que o JavaScript possibilita navegar no DOM usando os métodos getElementById getElementsByClassName getElementsByTagName querySelector e querySelectorAll Esses métodos retornam objetos ou vetores de objetos que podem ser guardados em variáveis para usarmos posteriormente Exemplo const titulo documentquerySelectortitulo Com as referências aos objetos podemos começar a manipular os elementos no DOM Todos os objetos retornados nos métodos de busca obedecem a interface HTMLElement HTMLELEMENT sd garantindo acesso aos atributos presentes no HTML e a métodos específicos Depois dessa interface cada um dos elementos HTML possui uma interface própria com seus métodos e atributos específicos Exemplo a tag a possui a interface HTMLAnchorElement Toda e qualquer alteração nesses objetos reflete imediatamente no que está representado no DOM seja de maneira visual mudar a cor de um parágrafo por exemplo ou apenas na parte lógica associar aquele elemento a um escutador de eventos como veremos mais adiante Acessando e alterando propriedades Assim como em outras linguagens de programação os atributos e métodos dos objetos do DOM são acessados pelo operador ponto e o nome do atributo equivalente no HTML A Figura 74 mostra um exemplo de como podemos manipular ler e atribuir valores a esses atributos Note que o comando consolelogobjetoid vai imprimir no console do navegador o valor titulo que é o id do elemento Já o comando consolelogobjetotitle imprime uma string vazia pois originalmente não havíamos definido o atributo title na tag de abertura do h1 Ainda com o exemplo da Figura 74 note que é possível atribuir valores strings a esses atributos O interessante aqui é que essa ação mudará o elemento h1 carregado em memória RAM pelo navegador a versão original salva no disco continuará a mesma sem modificações Atribuir uma string ao atributo objetotitle fará com que o navegador adicione o atributo title no código HTML carregado em memória Você pode conferir essa mudança ao inspecionar esse elemento no menu Ferramentas do desenvolvedor como mostrado na Figura 74 O mesmo ocorre quando alteramos o texto do elemento h1 ao atribuir uma string ao atributo objetotextContent Isso faz com que o navegador substitua o texto original do h1 pelo novo texto atribuído pelo JavaScript Figura 74 Exemplo de manipulação dos atributos de um objeto no DOM HTML Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1831 h1 idtituloUm título qualquerh1 JavaScript const objeto documentgetElementByIdtitulo Acessando e imprimindo no console o valor do atributo id consolelogobjetoid Acessando e imprimindo no console o valor do atributo title consolelogobjetotitle Atribuindo um valor ao atributo title objetotitle Esse texto foi atribuído pelo JavaScript Modificando o texto do h1 objetotextContent Esse será o novo texto exibido pelo elemento h1 Fonte do autor 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 1931 O conteúdo do elemento pode ser obtido e alterado por dois atributos diferentes a depender do objetivo textContent e innerHTML A diferença mais básica entre ambas é que o textContent ignora tags HTML que estejam no conteúdo enquanto a innerHTML não Por exemplo no elemento pIsso é strongum parágrafostrongp o textContent voltaria o texto Isso é um parágrafo já o innerHTML retornaria Isso é um strongum parágrafostrong Para a associação de novos valores a lógica funciona de maneira parecida Se associarmos um novo valor ao atributo textContent com uma tag HTML Exemplo objetotextContent Novo emtextoem as tags internas são interpretadas como texto puro e não são interpretadas como novos elementos no DOM Já usando o atributo innerHTML elas seriam adicionadas como novos elementos no DOM Acessando e alterando estilos através do DOM Existem atributos que permitem modificar os estilos de um elemento mas o acesso a eles é um pouco diferente Temos três tipos de estilos a serem observados os que são definidos no atributo style os que são definidos em classes que o elemento faz parte e os que são herdados por não estarem definidos em nenhum lugar específico O atributo style representa um objeto do tipo CSSStyleDeclaration CSSSTYLEDECLARATION sd que por sua vez possui vários outros atributos que fazem referência às propriedades do CSS Por exemplo para alterar a cor de um texto podemos usar o atributo objetostylecolor Já para alterar a cor de fundo devemos usar objetostylebackgroundColor Note que neste último caso o nome da propriedade CSS seria backgroundcolor mas como o nome de variáveis e também de atributos do JavaScript não podem conter hifens o nome desses atributos é definido juntandose as duas palavras e deixando a primeira letra da segunda palavra em maiúscula no caso backgroundColor Figura 75 Alterando estilos através de um objeto no DOM HTML h1 idtituloUm título qualquerh1 JavaScript const objeto documentgetElementByIdtitulo objetostylecolor 00FF00 cor verde objetostylebackgroundColor yellow objetostylefontFamily Arial Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2031 Fonte do autor 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2131 A Figura 75 exemplifica a aplicação de estilos através do DOM Observe que qualquer alteração nos valores dos subatributos do atributo style irá refletir automaticamente na apresentação do elemento no navegador Aqui cabe uma observação importante sempre utilize o CSS para estilizar uma página Web pois é uma linguagem própria para este fim A alteração de estilos no DOM deve ser feita em situações muito específicas Exemplo mudar a cor de um texto para vermelho ao clicar num botão ou exibir algum elemento da página que antes estava invisível após alguma interação do usuário etc Já para os estilos herdados ou definidos em classes temos que obter os estilos calculados do elemento ou seja os estilos finais atribuídos ao elemento calculados após o navegador aplicar todas as regras definidas pelo código CSS juntando estilos internos e externos Para obter esses valores usamos a função global getComputedStyleobjeto onde objeto representa uma variável que faz referência a um objeto do DOM WINDOWGETCOMPUTEDSTYLE sd Essa função retorna um objeto do tipo CSSStyleDeclaration mas seus atributos não podem ser alterados pelo JavaScript e seus valores são sempre atualizados conforme algum outro estilo mude devido a alguma mudança no código CSS Os valores obtidos estarão sempre em unidades absolutas então unidades relativas serão transformadas em pixel e cores nas suas representações em rgb Acessando e alterando classes através do DOM É possível acessar e modificar o valor do atributo class do HTML através da representação do elemento no DOM Como ele é multivalorado um elemento em HTML pode fazer parte de várias classes ao mesmo tempo podemos manipulálo através de dois atributos className e classList O primeiro className utiliza uma representação em string Toda alteração inclusão ou remoção de classes só pode ser feita com operações sobre strings não sendo muito prático para manipulações mais complexas Já o atributo classList representa as classes como um vetor especial do tipo DOMTokenList DOMTOKENLIST sd com todas as classes definidas no elemento HTML e alguns métodos práticos para manipular seus valores add adiciona uma classe nova remove remove uma classe específica se existir e contains verifica se uma classe existe no vetor A Figura 76 mostra um exemplo do uso desses métodos Figura 76 Exemplo de operações com o atributo classList HTML p classimportante urgenteMeu parágrafop JavaScript Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2231 const objeto documentquerySelectorpimportante objetoclassListaddprincipal objetoclassListremoveurgente if objetoclassListcontainsurgente resultará no valor false consolelogContém a classe urgente else consolelogNão contém a classe urgente Fonte do autor 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2331 Alterando elementos internos Conforme já comentamos uma das maneiras de adicionar novos elementos internos a um elemento existente é atribuindo valores ao atributo innerHTML onde definimos os elementos como um trecho de código com tags HTML em formato de string Uma outra maneira mais flexível e programática é criar seus elementos usando os métodos presentes no JavaScript e adicionálos ao elemento pai Vamos imaginar uma lista não ordenada de elementos ul que já possua os itens Minas Gerais e Rio de Janeiro e queremos adicionar um terceiro elemento São Paulo Esse exemplo está ilustrado na Figura 77 onde a variável objeto guarda a representação da lista tag ul em memória Usamos o método documentcreateElementnome onde o parâmetro nome representa o identificador de uma tag qualquer para criar um objeto que representa aquele elemento HTML no JavaScript Esse método retorna uma referência ao novo objeto criado no caso do exemplo um objeto que representa um elemento definido pela tag li Podemos então usar quaisquer outros atributos para manipular esse objeto como o textContent para adicionar conteúdo textual ou style para adicionar estilos ao objeto criado dentre outros Vale lembrar que esse objeto ainda não faz parte do DOM pois acabou de ser criado e está apenas em memória Figura 77 Criação de novos elementos a partir do DOM HTML ul idlista liMinas Geraisli liRio de Janeiroli ul JavaScript Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2431 const objeto documentquerySelectorlista Cria um novo objeto em memória que representa o elemento HTML definido pelas tags lili const novoitem documentcreateElementli novoitemtextContent São Paulo define o texto desse elemento Adiciona o novo objeto ao elemento pai neste caso o elemento definido pelas tags ulul Como novoitem representa um elemento li um novo item será acrescentado ao final da listagem objetoappendChildnovoitem Fonte do autor 2022 Para acrescentar o novo objeto criado ao DOM precisamos adicionálo ao elemento pai usando o método documentappendChildobj onde o parâmetro obj é o novo objeto criado Assim esse novo elemento será acrescentado ao final do elemento pai Se quisermos adicionar em uma posição específica podemos usar o documentinsertBeforeobjnovo objposterior HTML DOM insertBefore sd É possível também remover um elemento qualquer usando o método remove no próprio objeto Exemplo objetoremove retirandoo inteiramente do DOM Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2531 Você sabia Atualmente o JavaScript está bastante padronizado entre os mais diferentes navegadores e plataformas mas nem sempre foi assim Logo após o seu surgimento no fim da década de 1990 cada navegador existente implementou o seu equivalente do JavaScript que na época era da NetScape tornando a programação web para diferentes navegadores um terror para os desenvolvedores Era muito comum ver condicionais para cada navegador if ie pois as funções mudavam de nome ou comportamento dependendo do navegador utilizado Nesse contexto a biblioteca jQuery ganhou enorme relevância Criada em 2006 ela veio com uma sintaxe muito fácil de ser entendida e programada e ela mesmo cuidava desse problema de integração entre os navegadores Se quiser saber mais sobre o jQuery e sua importância na época leia o seguinte artigo httpsptkhanacademyorgcomputingcomputerprogramminghtmljsjqueryjquery domaccessahistoryofjquery Referências CSSStyleDeclaration MDN Web Docs sd Disponível em httpsdevelopermozillaorgenUSdocsWebAPICSSStyleDeclaration Acesso em 26 jul 2022 DOMTokenList MDN Web Docs sd Disponível em httpsdevelopermozillaorgen USdocsWebAPIDOMTokenList Acesso em 26 jul 2022 HTML DOM insertBefore W3Schoolscom sd Disponível em httpswwww3schoolscomjsrefmetnodeinsertbeforeasp Acesso em 26 jul 2022 HTMLElement MDN Web Docs sd Disponível em httpsdevelopermozillaorgpt BRdocsWebAPIHTMLElement Acesso em 25 jul 2022 Javascript HTML DOM W3Schoolscom sd Disponível em httpswwww3schoolscomjsjshtmldomasp Acesso em 24 jul 2022 WindowgetComputedStyle MDN Web Docs sd Disponível em httpsdevelopermozillaorgenUSdocsWebAPIWindowgetComputedStyle Acesso em 25 jan 2022 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2631 Saiba mais Acesse o link a seguir e conheça mais sobre a manipulação do DOM usando JavaScript HTMLJS tornando páginas web interativas Programação Khan Academy Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2731 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 2831 Finalizando Desenvolvimento Web 21082023 0947 Desenvolvimento Web Nesta parte buscamos os seguintes objetivos de aprendizagem Conhecer como o navegador estrutura os elementos HTML na memoria Compreender o modelo de documento por objetos DOM Saber como usar o JavaScript para manipular elementos de uma pagina web Entender em que momento o JavaScript é executado Reflita sobre o conteudo que vocé explorou e faca um debate com seus colegas e professores pelo Classroom ou na prdéxima 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 httpssitesgooglecomfaculdadeimpactacombrdwp7 pli1authuser1 2931 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 3031 Desenvolvimento Web 21082023 0947 Desenvolvimento Web httpssitesgooglecomfaculdadeimpactacombrdwp7pli1authuser1 3131 Classroom Gmail Drive Portal do Aluno Núcleo de Educação a Distância Faculdade Impacta Telefone 11 55935382 Horário de atendimento 10h às 18h Desenvolvimento Web