Desenvolvimento de Front-end - Resumo

Prévia do material em texto

<p>Você acertou 6 de 9 questões</p><p>Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes</p><p>quiser.</p><p>Verificar Desempenho</p><p>A</p><p>B</p><p>1 Marcar para revisão</p><p>Em um projeto web, um desenvolvedor opta por utilizar o JQuery para simplificar a manipulação do</p><p>DOM. Ele necessita implementar uma função que esconda todos os elementos com a classe</p><p>.destaque ao clicar em um botão específico.</p><p>Qual linha de código em JQuery realiza corretamente a ação descrita acima?</p><p>$�"p.destaque").hideOnClick();</p><p>$�"p.destaque").click(function() { $(this).hide(); });</p><p>Feedback</p><p>C</p><p>D</p><p>E</p><p>$�".destaque").on("click", "p", function() { $(this).hide(); });</p><p>$�"button").click(function() { $�"p.destaque").hide(); });</p><p>$�"p"�.hasClass(".destaque").click(function() { $(this).hide();</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta utiliza a função .click() do JQuery para atribuir um evento de clique a um</p><p>botão. Dentro do evento, ela utiliza a função .hide() para esconder todos os elementos</p><p>com a classe .destaque. As outras alternativas não representam corretamente a ação descrita,</p><p>seja por selecionar elementos de forma incorreta ou por utilizar métodos que não existem no</p><p>JQuery.</p><p>2 Marcar para revisão</p><p>Ao contrário da palavra- chave "var", a palavra- chave "let", tem como função restringir o acesso a</p><p>variáveis dentro de um bloco. Neste sentido, o que acontece quando executamos o código abaixo</p><p>em um navegador com suporte a ECMAScript versão ES6 ou superior?</p><p>Questão 5 de 9</p><p>Exercicio Programação Cliente Com Javascript Sair</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>O valor da variável teste será sempre 200.</p><p>Será exibido no console do navegador o valor 1.</p><p>Será exibido dentro da janela navegador o valor 1.</p><p>A instrução let introduz um escopo de bloco a variável teste.</p><p>A declaração da variável teste utilizando let funcionaria da mesma forma se utilizássemos</p><p>var.</p><p>Resposta incorreta</p><p>Corretas �6�</p><p>Incorretas �3�</p><p>Em branco �0�</p><p>1 2 3 4 5</p><p>6 7 8 9</p><p>A</p><p>B</p><p>C</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A resposta correta é: O valor da variável teste será sempre 200.</p><p>3 Marcar para revisão</p><p>Em um projeto de interface web, um desenvolvedor utiliza jQuery para aprimorar a interatividade.</p><p>Ele planeja modificar o estilo de um botão quando o usuário passa o mouse sobre ele. Para isso,</p><p>ele precisa selecionar corretamente o botão e aplicar a função de estilo.</p><p>Qual método jQuery o desenvolvedor deve usar para selecionar o botão pelo seu ID e aplicar uma</p><p>mudança de estilo ao passar o mouse?</p><p>$�'#botao').onMouseOver()</p><p>$�'#botao').hover()</p><p>$�'.botao').mouseenter()</p><p>D</p><p>E</p><p>$�'botao').mouseover()</p><p>$�'#botao').mouseStyle()</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra B. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é a B, $�'#botao').hover(). Este método é usado no jQuery para adicionar</p><p>manipuladores de eventos para a ação de passar o mouse sobre um elemento. As outras</p><p>alternativas, embora usem termos relacionados ao jQuery e eventos de mouse, não são</p><p>métodos corretos para esta ação específica.</p><p>4 Marcar para revisão</p><p>Uma aplicação web requer a atualização de conteúdo sem recarregar a página inteira. O</p><p>desenvolvedor decide usar jQuery para realizar requisições AJAX, buscando dados de um servidor</p><p>e atualizando um elemento da página.</p><p>Qual função jQuery é apropriada para enviar uma requisição AJAX GET e atualizar um elemento</p><p>com o ID 'conteudo'?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>$.ajaxGet('#conteudo')</p><p>$�'#conteudo').loadData()</p><p>$.get('url', function(data) { $�'#conteudo').html(data); })</p><p>$�'#conteudo').ajax('url')</p><p>$.post('url', function(data) { $�'#conteudo').html(data); })</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa C, $.get('url', function(data) { $�'#conteudo').html(data); }), é a resposta correta.</p><p>Este método do jQuery é usado para realizar uma requisição AJAX do tipo GET e, em seguida,</p><p>atualizar um elemento específico da página com os dados recebidos. As outras opções,</p><p>apesar de parecerem plausíveis, não são métodos válidos ou apropriados para realizar esta</p><p>tarefa conforme descrito no jQuery.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>5 Marcar para revisão</p><p>Considere o bloco de código abaixo que utiliza JavaScript e JSON.</p><p>Para que o bloco de código exiba 0146 vermelha, a lacuna I deve ser corretamente preenchida</p><p>por:</p><p>x.trens[2�.trem + " " + x.trens[2�.linha</p><p>text.trens[trem] + " " + text.trens[linha]</p><p>x.trens[1�.trem + " " + x.trens[1�.linha</p><p>x.trens[trem] + " " + x.trens[linha]</p><p>text.trens[1�.trem + " " + text.trens[1�.linha</p><p>A</p><p>B</p><p>C</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A resposta correta é: x.trens[1�.trem + " " + x.trens[1�.linha</p><p>6 Marcar para revisão</p><p>Considere a página abaixo, construída utilizando jQuery:</p><p>$(document).ready(function() { ..I... }); Esconder Texto do parágrafo.</p><p>Para que, ao se clicar no botão Esconder, o texto do parágrafo se torne oculto, deve-se preencher</p><p>a lacuna I com:</p><p>$�'button').click(function���$�'p#par').hide();});</p><p>$�'button:eq(0�').click(function().defineProperty('p.par').hide());</p><p>$�'button').click(function���$�'p.par').hidden();});</p><p>D</p><p>E</p><p>A</p><p>B</p><p>$�'button:eq(1�').click(function���$�'p#par').hide();});</p><p>$�'button').click(function���$�'p.par').hide();});</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A resposta correta é: $�'button').click(function���$�'p.par').hide();});</p><p>7 Marcar para revisão</p><p>Em um projeto web, ao implementar uma tabela HTML dinâmica utilizando jQuery e AJAX, os</p><p>dados são recebidos do servidor no formato JSON. A tabela é atualizada automaticamente sem</p><p>recarregar a página, melhorando a experiência do usuário.</p><p>Qual método HTTP é mais adequado para a realização dessa tarefa e por quê?</p><p>PUT, pois permite substituir recursos no servidor.</p><p>GET, pois é utilizado para solicitar dados de um recurso especificado.</p><p>C</p><p>D</p><p>E</p><p>DELETE, pois remove recursos do servidor.</p><p>HEAD, pois solicita uma resposta similar ao GET, sem o corpo da resposta.</p><p>TRACE, pois permite diagnóstico no caminho para o alvo.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O método HTTP GET é ideal para solicitar dados de um recurso especificado, como é o caso</p><p>ao se receber dados no formato JSON para uma tabela HTML dinâmica. Ele é usado para</p><p>realizar requisições que não resultam em uma atualização no estado do recurso, adequando-</p><p>se ao cenário descrito de atualização de uma tabela sem recarregar a página.</p><p>8 Marcar para revisão</p><p>O jQuery pode selecionar elementos HTML a partir de seletores, otimizando o desenvolvimento.</p><p>Sobre a utilização de seletores no jQuery, é correto afirmar:</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>$�´td, th´); retornará todos os elementos th que são filhos de td.</p><p>$�´#formulario´); retornará todos os elementos da classe 'formulario'.</p><p>$�´p:first´); retornará o primeiro dos elementos p.</p><p>$�´.paragrafo´); retornará o elemento com id igual a 'paragrafo'.</p><p>$�´p#first´); retornará o primeiro dos elementos p.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O seletor $�´p:first´) no jQuery é usado para selecionar o primeiro elemento p na página. Isso é</p><p>útil quando queremos aplicar estilos ou realizar operações apenas no primeiro elemento de</p><p>um tipo específico. Portanto, a afirmação "$�´p:first´); retornará o primeiro dos elementos p"</p><p>está correta, tornando a alternativa C a resposta correta para esta questão.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>9 Marcar para revisão</p><p>Um programador está trabalhando em uma aplicação web e precisa garantir que uma variável seja</p><p>acessível somente dentro do bloco onde foi declarada, evitando conflitos com outras partes do</p><p>código.</p><p>Qual palavra-chave</p><p>em Javascript deve ser usada para declarar a variável com o escopo</p><p>desejado?</p><p>var.</p><p>let.</p><p>const.</p><p>scope.</p><p>block.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é let, pois permite a declaração de variáveis com escopo de bloco, ou</p><p>seja, a variável existe apenas dentro do bloco onde foi declarada. As outras opções são</p><p>incorretas: var tem escopo de função, const também tem escopo de bloco mas é usada para</p><p>constantes, enquanto scope e block não são palavras-chave para declaração de variáveis em</p><p>Javascript.</p><p>Você acertou 7 de 10 questões</p><p>Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes</p><p>quiser.</p><p>Verificar Desempenho</p><p>A</p><p>B</p><p>1 Marcar para revisão</p><p>O Vue permite a junção de componentes para gerar componentes maiores e mais complexos. De</p><p>que maneira um componente pai passa um bloco HTML ou outros componentes de modo a</p><p>preencher um espaço pré-definido em seu componente filho (uma espécie de janela ou abertura)?</p><p>Através de eventos.</p><p>Através de props.</p><p>Feedback</p><p>C</p><p>D</p><p>E</p><p>Através de classes CSS.</p><p>Através de slots.</p><p>Através de uma imagem.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Os slots são utilizados no Vue para permitir a inserção de conteúdo HTML ou outros</p><p>componentes em um espaço pré-definido de um componente filho. Esses espaços, também</p><p>conhecidos como janelas ou aberturas, são definidos no componente filho, mas o conteúdo é</p><p>fornecido pelo componente pai. Os slots podem ser genéricos, onde há apenas um por</p><p>componente, ou nomeados, que permitem a definição de vários espaços diferentes, cada um</p><p>identificado por um nome específico. Portanto, a alternativa correta é a opção D� "Através de</p><p>slots".</p><p>2 Marcar para revisão</p><p>O método data retorna um objeto. Qual palavra-chave deveria estar no lugar dos pontos de</p><p>interrogação colocados dentro do método 'alertaPagina' ao referenciar a variável?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>data(){</p><p>return {</p><p>pagina : 'HOME'</p><p>}</p><p>},</p><p>methods:{</p><p>alertaPagina(){</p><p>alert( ?????.pagina)</p><p>}</p><p>}</p><p>Considere que os dados estão corretamente posicionados dentro da Vue Instance.</p><p>self</p><p>my</p><p>on</p><p>data</p><p>this</p><p>Questão 7 de 10</p><p>Corretas �7�</p><p>Incorretas �3�</p><p>Em branco �0�</p><p>1 2 3 4 5</p><p>6 7 8 9 10</p><p>Exercicio Vue Js Sair</p><p>A</p><p>B</p><p>C</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Utilizamos a palavra-chave this para dizermos ao JavaScript que o atributo referenciado</p><p>pertence ao objeto dentro do qual estamos trabalhando e não é uma variável externa, por</p><p>exemplo.</p><p>3 Marcar para revisão</p><p>Vue.js é um framework extremamente versátil e se tornou essencial em aplicações de pequeno,</p><p>médio e grande porte. O Vue tem a capacidade de interagir com diversos elementos do documento</p><p>HTML. Qual diretiva do Vue é utilizada num input do tipo text para que ele esteja ligado a uma</p><p>variável da Vue instance (two way data binding)?</p><p>v-on.</p><p>@.</p><p>v-cloak.</p><p>D</p><p>E</p><p>v-model.</p><p>v-two-way.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A diretiva v-model cria uma ligação de duplo sentido (two way data binding), de modo que</p><p>quando a variável altera, o HTML é alterado. E quando é modificado o valor do campo, a</p><p>variável é alterada por baixo dos panos.</p><p>4 Marcar para revisão</p><p>Devido a sua sintaxe flexível o Vue possibilita a redução do número de instruções presentes no</p><p>código sem perder a eficiência na realização da tarefa. Qual das alternativas abaixo representa</p><p>uma maneira possível de um componente filho passar informações para um componente pai?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Através de eventos.</p><p>Através de props.</p><p>Através de classes CSS.</p><p>Através de slots.</p><p>Através de uma imagem.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Um componente pode declarar que espera seus filhos emitirem eventos específicos e para</p><p>isso coloca um método a ser chamado quando seus filhos emitirem aquele evento (listener).</p><p>5 Marcar para revisão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Funções são uma parte importante da programação, permitindo o isolamento de código e a</p><p>reutilização de partes importantes. Qual das alternativas abaixo representa o bloco dentro da</p><p>nossa Vue instance adequado para colocarmos as funções, também chamadas de métodos?</p><p>Na função data.</p><p>No objeto computed.</p><p>No objeto functions.</p><p>Na função return.</p><p>No objeto methods.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Na estrutura de uma Vue instance, as funções, também conhecidas como métodos, são</p><p>armazenadas no objeto 'methods'. Este objeto é responsável por armazenar todas as funções</p><p>que serão acessíveis na Vue instance (ou componente), dependendo de onde foi declarado.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Portanto, a alternativa correta é a 'E', que indica o objeto 'methods' como o local adequado</p><p>para alocar as funções na Vue instance.</p><p>6 Marcar para revisão</p><p>Vue.js é um framework JavaScript leve, de rápida assimilação para os iniciantes e amplamente</p><p>utilizado no mercado mundial. Com relação ao framework Vue, qual entidade/empresa é</p><p>responsável pela sua manutenção?</p><p>Google.</p><p>Facebook.</p><p>Twitter.</p><p>Meta.</p><p>A comunidade.</p><p>A</p><p>B</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O Vue.js é um projeto de código aberto, o que significa que não é mantido por uma única</p><p>empresa ou entidade, mas sim pela comunidade de desenvolvedores que contribuem para o</p><p>seu desenvolvimento e manutenção. Portanto, a alternativa correta é "A comunidade".</p><p>Diferentemente de outros frameworks populares, como o Angular, que é mantido pelo Google,</p><p>ou o React, que é mantido pelo Facebook, o Vue.js não tem uma "big tech" por trás de sua</p><p>manutenção. Isso significa que as decisões sobre o futuro do framework são tomadas</p><p>coletivamente pela comunidade de desenvolvedores que o utilizam e contribuem para o seu</p><p>desenvolvimento.</p><p>7 Marcar para revisão</p><p>Vue.js é um framework JavaScript que possui uma comunidade ativa, contando com uma vasta</p><p>documentação disponível para consulta e aprendizagem.  Acerca dos seus conhecimentos sobre</p><p>Vue, qual seria o retorno típico da função data(), utilizada na Vue instance?</p><p>um array.</p><p>uma string.</p><p>C</p><p>D</p><p>E</p><p>um objeto.</p><p>uma template string.</p><p>um método.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A função data, que expõe os dados da Vue instance, deve retornar um objeto.</p><p>-----</p><p>8 Marcar para revisão</p><p>O carregamento do Javascript ocorre após o carregamento do HTML, pois este contém o caminho</p><p>para os arquivos JS ou sua declaração direta dentro da tag . Qual diretiva é utilizada (juntamente</p><p>com uma regra de CSS) para evitar que partes do HTML que contenham variáveis do Vue pisquem</p><p>antes de serem devidamente processadas pelo framework?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>v-cloak</p><p>v-hide</p><p>v-none</p><p>v-display</p><p>v-show</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A diretiva correta para evitar o efeito de "piscada" de elementos HTML que ainda não foram</p><p>processados pelo Vue é a v-cloak. Essa diretiva é utilizada em conjunto com uma regra CSS</p><p>específica, [v-cloak]{ display: none;}, que oculta os elementos até que o Vue.js tenha</p><p>terminado de compilar o template. Dessa forma, o usuário não vê nenhum conteúdo não</p><p>processado ou parcialmente processado na tela. As outras opções listadas não são diretivas</p><p>válidas para essa finalidade no Vue.js.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>9 Marcar para revisão</p><p>De modo geral, todas as variáveis devem ser inicializadas com a atribuição de valores.</p><p>Posteriormente, esses valores podem ser exibidos através da utilização de palavras-chaves da</p><p>linguagem. Qual diretiva pode ser utilizada para colocar</p><p>o valor textual de uma variável como texto</p><p>renderizado no HTML dentro de uma tag H1?</p><p>v-text</p><p>v-header</p><p>v-texto</p><p>v-model</p><p>v-class</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>A diretiva v-text é a correta para essa situação. Ela tem a mesma função que a utilização de</p><p>uma template string (bigodes duplos), ou seja, insere o valor de uma variável como texto</p><p>dentro do elemento HTML marcado. Nesse caso, a tag H1 seria preenchida com o valor textual</p><p>da variável, permitindo que o conteúdo seja renderizado corretamente na página.</p><p>10 Marcar para revisão</p><p>Montar a instância no HTML é uma tarefa relativamente simples. O que deve ser passado dentro</p><p>do método mount ao criar uma Vue instance, após importar o arquivo do Vue JS?</p><p>O nome de uma div.</p><p>O id de uma div.</p><p>Um id relativo à div onde queremos montar aquela instância.</p><p>Um seletor CSS relativo ao elemento raiz onde queremos montar aquela instância.</p><p>A classe da div onde queremos montar a instância do Vue.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Na criação de uma instância Vue, o método mount requer um seletor CSS que aponte para o</p><p>elemento raiz onde a instância será montada. Este seletor não precisa necessariamente ser</p><p>um id, embora seja recomendado que seja um identificador único para evitar conflitos.</p><p>Portanto, não é obrigatório que o elemento seja uma div ou que o seletor seja um id ou uma</p><p>classe específica.</p><p>Você acertou 6 de 10 questões</p><p>Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes</p><p>quiser.</p><p>Verificar Desempenho</p><p>1 Marcar para revisão</p><p>Considere o trecho de código:</p><p>Feedback</p><p>A</p><p>B</p><p>C</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>número</p><p>string</p><p>não é um tipo definido</p><p>D</p><p>E</p><p>no tipo de retorno da função é necessário incluir "string"</p><p>no tipo de retorno da função é necessário incluir "undefined"</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O operador typeof verifica o tipo do parâmetro que, no caso do exercício, é string. A função</p><p>retorna o valor 2 que é verificado no teste do comando "switch".</p><p>2 Marcar para revisão</p><p>Considere o trecho de código:</p><p>class P {</p><p>public exibir_informacao(a: number|string):void {</p><p>console.log('resultado');</p><p>}</p><p>}</p><p>const obj1 = new P��</p><p>obj1.exibir_informacao(10);</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>Questão 7 de 10</p><p>Corretas �6�</p><p>Incorretas �4�</p><p>Em branco �0�</p><p>1 2 3 4 5</p><p>6 7 8 9 10</p><p>Exercicio Programação Cliente Com Typescript Sair</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>vai exibir a frase: "resultado"</p><p>vai exibir o número 10</p><p>vai exibir "vazio"</p><p>O código está sintaticamente incorreto</p><p>vai exibir a mensagem: "number|string"</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O método exibir informação está usando um narrowing que permite receber tanto valores do</p><p>tipo numérico, como do tipo String.</p><p>3 Marcar para revisão</p><p>Considere o trecho de código:</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>function w(n: number): number {</p><p>if(n == 0){</p><p>return 0;</p><p>}</p><p>if(n == 1){</p><p>return 1;</p><p>}</p><p>return n+w(n-1);</p><p>}</p><p>console.log(w(5));</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>0</p><p>1</p><p>10</p><p>15</p><p>120</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A resposta correta é 15, pois trata-se de uma função recursiva.</p><p>Na primeira etapa, são a sequência das seguintes chamadas:</p><p>w(5��5+w(4�</p><p>w(4��4+w(3�</p><p>w(3��3+w(2�</p><p>w(2��2+w(1�</p><p>w(1��1</p><p>Na segunda etapa, são obtidos os seguintes resultados:</p><p>w(2��2�1�3</p><p>w(3��3�3�6</p><p>w(4��4�6�10</p><p>w(5��5�10�15</p><p>4 Marcar para revisão</p><p>Considere o trecho de código:</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>8</p><p>10</p><p>20</p><p>30</p><p>50</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A</p><p>B</p><p>C</p><p>O rastreio cuidadoso da questão releva o valor 8 como resposta correta. Cabe ressaltar que o</p><p>operador % é o resto da divisão inteira.</p><p>5 Marcar para revisão</p><p>Considere o trecho de código:</p><p>function y(a: number|string):string</p><p>{</p><p>return (typeof a === 'number' ? "número" : "string");</p><p>}</p><p>console.log(y('Teste'));</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>number</p><p>número</p><p>string</p><p>D</p><p>E</p><p>Teste</p><p>a</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A função "y" é definida para aceitar um parâmetro "a" que pode ser do tipo "number" ou</p><p>"string". A função retorna uma "string". Dentro da função, é feito um teste para verificar o tipo</p><p>do parâmetro "a" usando o operador "typeof". Se "a" for do tipo "number", a função retorna a</p><p>string "número". Caso contrário, retorna a string "string". No exemplo dado, a função "y" é</p><p>chamada com o argumento 'Teste', que é uma string. Portanto, a função retorna "string", que é</p><p>a alternativa correta.</p><p>6 Marcar para revisão</p><p>Considere o trecho de código que deve ser chamado por uma função externa:</p><p>class Teste {</p><p>lacuna imprimir = () � {</p><p>console.log('imprimir teste');</p><p>}</p><p>}</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>const t = new Teste();</p><p>console.log(t.imprimir())</p><p>Selecione a opção que substitui a palavra lacuna, para que o programa funcione corretamente.</p><p>private</p><p>protected</p><p>void</p><p>string</p><p>public</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>É necessário usar o modificador "public" no lugar da palavra "lacuna", pois, caso contrário, a</p><p>função não poderá ser chamada externamente.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>7 Marcar para revisão</p><p>Considere o trecho de código:</p><p>let vetor:number[] = �1, 5, 9, 10, 15�;</p><p>const e:number = vetor.indexOf(5�;</p><p>console.log(e);</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>0</p><p>1</p><p>5</p><p>15</p><p>Erro de execução</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra B. Confira o gabarito comentado!</p><p>A</p><p>B</p><p>C</p><p>Gabarito Comentado</p><p>A resposta correta é "1", pois a indexação de vetor no TypeScript inicia na posição 0. A função</p><p>"indeOf(x)" retorna a posição do elemento "x" dentro do vetor.</p><p>8 Marcar para revisão</p><p>Considere que o trecho de código abaixo está correto:</p><p>class Teste extends R�</p><p>public imprimir = () � {</p><p>console.log('imprimir teste');</p><p>}</p><p>}</p><p>Selecione a opção correta a respeito do código.</p><p>R é a superclasse de Teste</p><p>R herda as características da classe Teste</p><p>Não é possível fazer nenhuma afirmação sobre o código</p><p>D</p><p>E</p><p>A</p><p>B</p><p>A classe R possui um método chamado imprimir</p><p>A classe Teste é privada</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Logo no início da questão foi afirmado que o código está correto, portanto, podemos afirmar</p><p>que R é a classe mãe da classe Teste, ou seja, Teste herda as características da classe R.</p><p>9 Marcar para revisão</p><p>Em relação às propriedades da programação orientada a objetos que o TypeScript utiliza,</p><p>selecione a opção correta que está relacionada a reusabilidade de código.</p><p>encapsulamento</p><p>herança</p><p>C</p><p>D</p><p>E</p><p>polimorfismo</p><p>classe genérica</p><p>classes anônimas</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A herança é a propriedade relacionada a reutilização do código. Encapsulamento tem como</p><p>objetivo ocultar dados em um elemento. O Polimorfismo, por sua vez, é utilizado para que</p><p>diferentes tarefas sejam executadas por uma única entidade lógica. As demais opções não</p><p>são propriedades da programação orientada a objetos.</p><p>10 Marcar para revisão</p><p>Considere o trecho de código:</p><p>function t(a: number|string):number</p><p>{</p><p>let r:number= (typeof a === 'number' ? 1 � 2�;</p><p>return r**(r+r);</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>}</p><p>console.log(t('Teste'));</p><p>Selecione a opção correta com o resultado da execução do código.</p><p>1</p><p>2</p><p>Teste</p><p>8</p><p>16</p><p>Resposta</p><p>incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O código apresentado define uma função que recebe um parâmetro que pode ser do tipo</p><p>número ou string. Dentro da função, é criada uma variável 'r' que recebe o valor 1 se o tipo do</p><p>parâmetro for número e 2 se for string. Como o parâmetro passado na chamada da função é a</p><p>string 'Teste', a variável 'r' recebe o valor 2. A função então retorna o valor de 'r' elevado à</p><p>soma de 'r' com 'r' (ou seja, 2 elevado a 4�, que resulta em 16. Portanto, a alternativa correta é</p><p>a E, que indica o valor 16.</p><p>Você acertou 6 de 10 questões</p><p>Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes</p><p>quiser.</p><p>Verificar Desempenho</p><p>A</p><p>B</p><p>1 Marcar para revisão</p><p>Para diversas funcionalidades de um sistema ocorre a necessidade de um usuário válido, ou seja,</p><p>deve haver algum meio de autenticação disponível. Em termos do Angular, o acesso a uma rota</p><p>pode ser controlado de forma simples, com base em um serviço para verificação de usuário que é</p><p>associado às rotas privadas. Qual interface deve ser implementada pelo serviço?</p><p>SignIn</p><p>CanActivate</p><p>Feedback</p><p>C</p><p>D</p><p>E</p><p>Authenticate</p><p>SignOut</p><p>VerifyUser</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Para estabelecer uma rota autenticada no Angular, é necessário associar a ela um atributo</p><p>chamado canActivate. Este atributo deve estar vinculado a um serviço que implemente a</p><p>interface CanActivate. Ao implementar essa interface, o método canActivate é utilizado para</p><p>verificar se há um usuário logado. Se houver um usuário logado, o método retorna verdadeiro,</p><p>liberando o acesso à rota. Caso contrário, retorna falso, bloqueando o acesso.</p><p>Alternativamente, pode-se retornar uma página de login para redirecionar o usuário, em vez</p><p>de simplesmente bloquear o acesso.</p><p>2 Marcar para revisão</p><p>O uso de decorações, ou anotações, permite a definição de configurações para os diversos</p><p>elementos do Angular de forma simples, como na definição das propriedades do módulo, por meio</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>da anotação NgModule. Qual dos atributos de NgModule define o componente principal de um</p><p>módulo do Angular?</p><p>imports</p><p>providers</p><p>exports</p><p>bootstrap</p><p>declarations</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra D. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Os atributos da anotação NgModule permitem definir quais outros módulos serão importados</p><p>para o módulo corrente (imports), quais componentes serão disponibilizados para utilização a</p><p>partir dos seletores (declarations), os serviços que estarão disponíveis para utilização via</p><p>injeção de dependência (providers), e os módulos exportados para outros módulos (exports).</p><p>Questão 6 de 10</p><p>Corretas �6�</p><p>Incorretas �4�</p><p>Em branco �0�</p><p>1 2 3 4 5</p><p>6 7 8 9 10</p><p>Exercicio Angular Sair</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Entre os componentes disponibilizados, um deles deve ser especificado como principal, ou</p><p>raiz, no atributo bootstrap.</p><p>3 Marcar para revisão</p><p>Para qualquer programador Angular, é fundamental conhecer a utilização da biblioteca RxJS para</p><p>implementação de funcionalidades assíncronas. Considere o fragmento de código seguinte.</p><p>const observable = interval(1000)</p><p>.pipe(map((x:number)�x*x))</p><p>.pipe(observeOn(asyncScheduler));</p><p>Para que serve o método pipe no código apresentado?</p><p>Gerar números sequencialmente.</p><p>Elevar cada número gerado ao quadrado.</p><p>Fornecer o resultado de forma assíncrona para o assinante da fonte de dados.</p><p>Gerar o conjunto de números inteiros compreendido entre 1 e 1000.</p><p>Direcionar o fluxo de dados para o processamento seguinte, antes de enviar o resultado.</p><p>A</p><p>B</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>No código temos a criação de um Observable, que gera números sequencialmente, em</p><p>intervalos de 1 segundo (interval), cada número gerado é elevado ao quadrado (map) e o valor</p><p>final é retornado de forma assíncrona (asyncScheduler). Como temos três processamentos</p><p>sendo executados, precisamos do pipe para direcionar o fluxo de dados para o</p><p>processamento seguinte, antes de enviar o resultado.</p><p>4 Marcar para revisão</p><p>Formulários são a forma padrão para viabilizar a entrada de dados em sistemas cadastrais para</p><p>Web, podendo ser especificados no Angular ao nível dos modelos HTML. No entanto, para a</p><p>construção de um formulário em um front-end baseado no Angular, temos algumas regras de</p><p>implementação que devem ser observadas. Qual das opções a seguir constitui uma regra válida</p><p>para a implementação de formulários no Angular?</p><p>A diretiva ngModel será utilizada para estabelecer um relacionamento unidirecional com</p><p>os atributos da classe.</p><p>É necessário importar o módulo RouterModule para a definição de formulários.</p><p>C</p><p>D</p><p>E</p><p>O evento de submissão do formulário deve ser associado a um método da classe.</p><p>Todo formulário precisa de um botão do tipo Reset para envio das informações.</p><p>Não é possível utilizar as tags convencionais do HTML para campos de entrada.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Para trabalhar com formulários no Angular, precisamos da importação do módulo</p><p>FormsModule, ou ReactiveFormsModule, para adicionar o suporte necessário. Com o suporte</p><p>ativado, utilizamos a diretiva ngModel para estabelecer um relacionamento bidirecional entre o</p><p>campo de entrada e o atributo da classe. São utilizados tags convencionais do HTML para</p><p>definir os campos de entrada, incluindo um botão para envio, do tipo Submit. Finalmente, o</p><p>evento de submissão do formulário deve ser associado a um método da classe, permitindo</p><p>que o clique sobre o botão de envio ative o método associado, sem a mudança de endereço.</p><p>5 Marcar para revisão</p><p>A biblioteca RxJS é uma excelente opção para a implementação de elementos assíncronos, com a</p><p>substituição das funções assíncronas (async) e diretivas de espera (await) por um padrão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Observer, onde temos fontes de dados assinadas, que enviam suas alterações para o conjunto de</p><p>assinantes, com a informação sendo tratada em funções de resposta. Considerando a criação de</p><p>um aplicativo para acompanhamento estatístico, onde diversos gráficos são atualizados de forma</p><p>simultânea, a cada vez que uma nova pesquisa é cadastrada, qual seria o componente da</p><p>biblioteca RxJS adequado para emissão da informação atualizada?</p><p>Observable</p><p>Subject</p><p>Operator</p><p>Subscription</p><p>Observer</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Os componentes que devem receber a informação devem assinar �Subscription) a fonte de</p><p>dados, ficando responsáveis por tratar a informação recebida �Observer). No entanto, existem</p><p>dois modelos para a fonte de dados: o Observable, que é utilizado para uma ação pontual com</p><p>apenas um assinante, e o Subject, que é voltado para a criação de canais com múltiplos</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>assinantes. Nesse contexto, o Subject seria a solução mais adequada, pois permite a</p><p>atualização simultânea de diversos gráficos a cada vez que uma nova pesquisa é cadastrada.</p><p>Quanto aos operadores �Operator), são os elementos que permitem operações comuns</p><p>através do paradigma funcional.</p><p>6 Marcar para revisão</p><p>Durante o desenvolvimento de um sistema, principalmente nas fases iniciais, alguns recursos</p><p>necessários para a funcionalidade desejada podem não estar disponíveis, impedindo a execução</p><p>de testes. No entanto, podemos emular os recursos, permitindo a continuidade do projeto. No caso</p><p>do Angular, qual interface permite emular um servidor REST com persistência em banco de dados?</p><p>CanActivate</p><p>OnInit</p><p>HttpClient</p><p>InMemoryDbService</p><p>Router</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra D. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Na linguagem de programação Angular, a interface que permite emular um servidor REST com</p><p>persistência em</p><p>banco de dados é a InMemoryDbService. Esta interface é utilizada para</p><p>fornecer dados de teste (createDb) e o processo de geração da chave primária (genId). Assim,</p><p>toda chamada efetuada por um HttpClient será direcionada para o servidor emulado. As</p><p>demais opções apresentadas na questão têm funções diferentes: o CanActivate é utilizado no</p><p>processo de autenticação para as rotas do front-end, o OnInit especifica o método de</p><p>inicialização de um componente, o HttpClient permite acessar endereços HTTP e o Router</p><p>controla as rotas internas do front-end.</p><p>7 Marcar para revisão</p><p>Devido às exigências de qualidade e prazos extremamente curtos para a criação de softwares,</p><p>produtividade é um fator essencial para a área de desenvolvimento, e embora seja possível criar</p><p>projetos para Angular através de simples editores de texto, o Visual Studio Code é um excelente</p><p>ferramental para ganho de produtividade no uso do Angular. Entre as funcionalidades oferecidas</p><p>pelo ambiente, qual delas permite a identificação rápida de instruções de controle, variáveis,</p><p>atributos, métodos e demais tipos de elementos adotados na linguagem?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>debugging</p><p>syntax highlighting</p><p>code completion</p><p>refactoring</p><p>error highlighting</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Através do syntax highligthing, ou realce de código, temos o uso de cores para a</p><p>diferenciação de cada tipo de elemento em meio ao texto, permitindo uma rápida identificação</p><p>visual. Com relação às demais opções, error highligthing exibe uma marcação sob elementos</p><p>com erro de sintaxe, debugging (depuração) possibilita a execução passo-a-passo,</p><p>refactoring engloba ações de restruturação no código, como a criação de getters e setters</p><p>para os atributos, e code completion oferece opções para complementação automática de</p><p>código.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>8 Marcar para revisão</p><p>Considerando um serviço no estilo REST, implementado com base no NodeJS e na biblioteca</p><p>Express, e uma entidade Aluno, persistida no MongoDB via MongoClient, qual a assinatura do</p><p>método, no servidor, para responder à chamada http://localhost:3000/alunos/29891, obtendo</p><p>como retorno os dados do aluno de matrícula 29891 no formato JSON?</p><p>router.get('/alunos', async (req, res) � { });</p><p>router.put('/alunos/:id', async (req, res) � { });</p><p>router.get('/alunos/:id', async (req, res) � { });</p><p>router.delete('\alunos/:id', async (req, res) � { });</p><p>router.post('/alunos', async (req, res) � { });</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A</p><p>B</p><p>De acordo com a definição do REST, o método GET do HTTP é utilizado para realizar</p><p>consultas, o POST para incluir uma entidade, o PUT para alterar uma entidade existente e o</p><p>DELETE para remover uma entidade. Quando queremos consultar os dados de uma entidade</p><p>específica, o identificador, ou chave primária, deve ser fornecido no último segmento da</p><p>chamada, o que leva à necessidade da definição de uma variável (id) na rota. Os métodos de</p><p>resposta do Express, que são disponibilizados a partir de um Router, adotam os mesmos</p><p>nomes dos métodos HTTP, e usam como parâmetros a rota e a função para tratamento.</p><p>Portanto, a assinatura correta para a situação descrita no enunciado é:</p><p>router.get('/alunos/:id', async (req, res) � { });</p><p>Essa assinatura indica que estamos utilizando o método GET para buscar um aluno específico,</p><p>identificado pelo id na rota. A função assíncrona (req, res) � { } é o tratamento que será dado</p><p>à requisição e resposta do servidor.</p><p>9 Marcar para revisão</p><p>Em um sistema de controle de estacionamento, devem ser exibidas apenas as vagas vazias na</p><p>página de listagem, através de tags div configuradas como painéis, permitindo que o operador</p><p>associe a vaga ao carro que estiver acessando o local naquele momento. Qual diretiva do Angular</p><p>permitirá condicionar o desenho da div ao estado atual da vaga?</p><p>ngIf</p><p>ng-app</p><p>C</p><p>D</p><p>E</p><p>ngFor</p><p>ng-template</p><p>ngModel</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A diretiva correta seria ngIf, aplicada na forma de atributo, com uma expressão que retorna</p><p>valor booleano, indicando se o elemento será desenhado ou não. Para o contexto descrito,</p><p>poderia ser algo como . Quanto às demais opções, ngFor</p><p>permite repetir o desenho do elemento para cada objeto de um conjunto, ngModel define um</p><p>relacionamento bidirecional entre um campo de entrada e um atributo da classe, ng-app é o</p><p>seletor que identifica o aplicativo, e ng-template define um trecho reutilizável no modelo.   A</p><p>diretiva ngIf é utilizada para exibir ou ocultar um elemento de acordo com uma condição. No</p><p>caso do exemplo, a condição é que a vaga esteja vazia. Se a vaga estiver vazia, o elemento</p><p>será exibido. Se a vaga estiver ocupada, o elemento não será exibido.</p><p>10 Marcar para revisão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>No Angular é possível efetuar as críticas sobre os campos de um formulário durante o seu</p><p>preenchimento, com base na tecnologia de formulários reativos. O processo envolve a criação de</p><p>um FormGroup, ao nível da classe, contendo as configurações para cada campo, incluindo a</p><p>possibilidade de uma lista de validadores, e o grupo é associado ao formulário, no modelo. Para</p><p>uma situação em que o usuário deve aceitar as regras do site para se cadastrar, com a marcação</p><p>de uma caixa de seleção, qual seria o validador correto para o campo?</p><p>Validators.required</p><p>Validators.pattern</p><p>Validators.max</p><p>Validators.minLength</p><p>Validators.requiredTrue</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Para exigir a marcação da caixa de seleção, adotamos Validators.requiredTrue. Quanto aos</p><p>demais, required exige o preenchimento de algum campo não selecionável, como texto,</p><p>número ou e-mail, pattern define um padrão de preenchimento, para dados como CEP, max</p><p>define o valor máximo aceito para um número, e minLength define o número de caracteres</p><p>mínimo para um campo de texto.</p><p>Você acertou 1 de 10 questões</p><p>Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes</p><p>quiser.</p><p>Verificar Desempenho</p><p>1 Marcar para revisão</p><p>No código a seguir, marque a alternativa correta em relação ao resultado que devemos obter</p><p>executando-o.</p><p>Feedback</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>0</p><p>1</p><p>2</p><p>3</p><p>Erro de compilação</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Aqui um erro clássico ao utilizar eventos e useState, ao carregar o código pela primeira vez, a</p><p>função onSomarHandler é executada, pois estamos passando um parâmetro, gerando um loop</p><p>infinito, impossibilitando sua renderização, lembre-se, sempre que houver alguma atualização</p><p>na variável que definimos com useState, a aplicação será renderizada. Para corrigir, retire o</p><p>parâmetro passado na linha 13, �2*contador + 1�, chamando apenas onSomarHandler.</p><p>2 Marcar para revisão</p><p>Acerca das principais diferenças entre o DOM virtual e o DOM real, assinale a alternativa correta:</p><p>I. A atualização no DOM real acontece de forma mais lenta que o DOM virtual.</p><p>II. No DOM virtual não é possível atualizar diretamente o elemento HTML.</p><p>III. A manipulação do DOM real é muito custosa, devido à sua complexidade da árvore.</p><p>IV. Uma nova árvore do DOM é gerada para qualquer modificação feita em algum elemento de sua</p><p>árvore.</p><p>V. Existe pouco desperdício de memória no DOM real, já no DOM virtual um grande desperdício.</p><p>Questão 5 de 10</p><p>Corretas �1�</p><p>Incorretas �9�</p><p>Em branco �0�</p><p>1 2 3 4 5</p><p>6 7 8 9 10</p><p>Exercicio Reactjs Sair</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>I e II, apenas.</p><p>II e V, apenas.</p><p>I e III, apenas.</p><p>I, III e V, apenas.</p><p>I, II, III e IV, apenas.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é a E, que afirma que as afirmações I, II, III e IV estão corretas. A</p><p>atualização no DOM real é de fato mais lenta que no DOM virtual �I�, no DOM virtual não é</p><p>possível atualizar diretamente o elemento HTML �II�, a manipulação do DOM real é custosa</p><p>devido à sua complexidade �III) e uma nova árvore do DOM é gerada para qualquer</p><p>modificação feita em algum elemento de sua árvore �IV�. A afirmação V está incorreta, pois o</p><p>DOM virtual, ao utilizar o JSX para manipular os elementos e através do algoritmo de Diffing,</p><p>tem um uso de memória menor que o DOM real, e não maior como a afirmação sugere.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>3 Marcar para revisão</p><p>A partir da versão 16.8 do React, foi introduzido o conceito de Hooks, que trouxe uma nova</p><p>dinâmica. Avalie as assertivas relacionadas com a motivação de sua criação.</p><p>I� Classes em React sempre foram uma forma confusa de utilizar, como por exemplo a utilização</p><p>do this. Em componentes complexos, isso se tornava cada vez mais difícil sua reutilização.</p><p>II� Componentes complexos e grandes eram difíceis de refatorar.</p><p>III� A partir dessa versão, componentes de classes foram excluídas, forçando que todo o código</p><p>antigo fosse refatorado.</p><p>Quais são as afirmativas CORRETAS?</p><p>I, II e III.</p><p>I e III.</p><p>I e II.</p><p>II e III.</p><p>Apenas a I.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra C. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é a C, que afirma que as classes em React sempre foram uma forma</p><p>confusa de utilizar, especialmente em componentes complexos, e que componentes</p><p>complexos e grandes eram difíceis de refatorar. A terceira afirmativa está incorreta, pois,</p><p>apesar da introdução dos Hooks, a versão 16.8 do React não excluiu o suporte para</p><p>componentes de classes. Na verdade, a documentação oficial do React sugere que a</p><p>migração para Hooks seja feita de forma gradual, permitindo que os desenvolvedores</p><p>trabalhem com componentes de classes e Hooks de forma paralela.</p><p>4 Marcar para revisão</p><p>O React segue uma forma de fluxo de dados unidirecional ou também conhecido como vinculação</p><p>unidirecional. Nesse contexto, avalie as seguintes afirmativas:</p><p>I� Recebe o valor inicial do componente filho.</p><p>II� O componente pai pode alterar o seu valor.</p><p>III� Mudanças ocorrem dentro de componente pai.</p><p>Quais as afirmativas CORRETAS?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Apenas a I.</p><p>As alternativas II e III.</p><p>Apenas a II.</p><p>As alternativas II e II.</p><p>As alternativas I e III.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra C. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Para cada valor passado pelo componente pai, a props será única, não sendo alterada, sendo</p><p>o valor inicial recebido do componente pai. Se uma eventual mudança fosse necessária,</p><p>apenas dentro do componente filho será permitida.</p><p>5 Marcar para revisão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Formulários em React trabalham de forma um pouco diferente do que estamos habituados em</p><p>HTML. No React, aproveitamos os estados dos componentes para manipular os dados. Marque a</p><p>alternativa correta em relação a componentes controlados e não controlados.</p><p>Em um componente controlado, os dados são manipulados por um componente React,</p><p>diferente de um componente não controlado, onde os dados podem ter vindo, por</p><p>exemplo, de uma requisição AJAX.</p><p>Um input do tipo arquivo é um componente controlado.</p><p>Na marcação select, ao invés de utilizarmos a opção selecionada por padrão pelo atributo</p><p>selected, utilizamos um atributo value, na criação da marcação, usando como estado.</p><p>Podemos utilizar um array no atributo value, permitindo selecionar várias opções em</p><p>select.</p><p>Uma forma muito utilizada de manipular diferentes inputs é usar um atributo name com o</p><p>valor target.name, por exemplo.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra B. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é a B. No contexto do React, um input do tipo arquivo é considerado um</p><p>componente não controlado. Isso ocorre porque a escolha do arquivo pelo usuário é um</p><p>A</p><p>B</p><p>C</p><p>evento que ocorre fora do controle do React. A aplicação não tem conhecimento prévio do</p><p>arquivo que será selecionado pelo usuário. Portanto, é necessário criar uma referência do</p><p>objeto para salvar o nome do arquivo (por exemplo, fileInput.current.files[0�.name). Isso</p><p>permite que a aplicação acesse e manipule o arquivo selecionado pelo usuário, mesmo sendo</p><p>um componente não controlado.</p><p>6 Marcar para revisão</p><p>Considerando um cenário onde uma aplicação local é executada na porta 3000 como padrão e</p><p>não ocorrendo alteração na instalação, avalie as seguintes afirmativas.</p><p>I� Se fecharmos o terminal que estamos executando nosso servidor, a aplicação permanece ativa.</p><p>II� O create-react-app é um script que configura e instala o básico para nossa aplicação, mas</p><p>existem outras formas de iniciar uma configuração inicial para uma aplicação React.</p><p>III� Toda aplicação React criada pelo create-react-app possuirá uma pasta node_modules,</p><p>contendo os módulos que o React utiliza em suas aplicações.</p><p>Quais as afirmativas CORRETAS?</p><p>Apenas a I.</p><p>As alternativas II e III.</p><p>Apenas a III.</p><p>D</p><p>E</p><p>As alternativas II e II.</p><p>As alternativas I e III.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra B. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Toda nossa aplicação local é executada na porta 3000 como padrão, se não foi alterada na</p><p>instalação. Dentro de algum terminal, prompt do Windows, terminal dentro do Visual Code ou</p><p>prompt do Linux, se for executado o comando, sem parâmetro de background, ao fechar a</p><p>janela ativa, o servidor será interrompido.</p><p>O create-react-app é um script que configura e instala o básico para nossa aplicação, mas</p><p>existem outras formas de iniciar uma configuração inicial para uma aplicação React.</p><p>Toda aplicação React criada pelo create-react-app possuirá uma pasta node_modules,</p><p>contendo os módulos que o React utiliza em suas aplicações.</p><p>7 Marcar para revisão</p><p>Considerando o cenário da utilização de states em componentes do tipo classe sem utilização de</p><p>Hooks, avalie as seguintes afirmativas:</p><p>I� Mudanças ocorrem dentro de componentes filhos.</p><p>II� Definido o valor padrão no componente pai.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>III� Mudanças ocorrem dentro de componentes pai</p><p>Quais as afirmativas CORRETAS?</p><p>Apenas a I.</p><p>As alternativas  I e III.</p><p>Apenas a II.</p><p>As alternativas II e III.</p><p>As alternativas I e III.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra D. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Para utilizar states em componentes filhos, eles são passados como atributos (props), ou</p><p>seja, não podem ser alterados. Isso mudou apenas com a introdução de hooks, alterando toda</p><p>a dinâmica previamente utilizada, facilitando e muito a codificação.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>8 Marcar para revisão</p><p>Sobre ciclo de vida, diversos métodos podem acabar sendo chamados e reutilizados conforme a</p><p>fase de vida de um componente React, conforme as assertivas abaixo, analise as alternativas a</p><p>seguir:</p><p>I) constructor() apenas ocorre na fase de Montagem.</p><p>II) render() ocorre apenas na fase de Atualização.</p><p>III) getDerivedStateFromProps() é chamado em duas fases, tanto na montagem quando na fase de</p><p>atualização.</p><p>Quais as afirmativas CORRETAS?</p><p>I, II e III.</p><p>I e III.</p><p>I e II.</p><p>II e III.</p><p>Apenas a I.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é a B, que afirma que o método constructor() ocorre apenas na fase de</p><p>Montagem e que o método getDerivedStateFromProps() é chamado tanto na fase de</p><p>Montagem quanto na fase de Atualização. A afirmação II está incorreta, pois o método</p><p>render() não ocorre apenas na fase de Atualização, mas também na fase de Montagem. É</p><p>importante lembrar que o método render() é o único método obrigatório em componentes do</p><p>tipo classe no React.</p><p>9 Marcar para revisão</p><p>Podemos utilizar diferentes ambientes para testar nossas aplicações em React, avalie as seguintes</p><p>afirmativas:</p><p>I� O CodeSandBox não possui um template para React, necessitando de configuração extra para</p><p>utilização de React.</p><p>II�</p><p>O CodePen não possui um template já definido, precisando incluir as bibliotecas dentro de suas</p><p>configurações.</p><p>III� É necessário a instalação do node.js em nosso ambiente de desenvolvimento offline.</p><p>Quais as afirmativas CORRETAS?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Apenas a I.</p><p>Apenas a II.</p><p>Apenas a III.</p><p>As alternativas II e III.</p><p>As alternativas I e III.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra D. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O CodeSandBox já possui diversos templates com configurações pré-definidas, incluindo o</p><p>React, dispensando a configuração a parte para as bibliotecas, essa definição se encaixa mais</p><p>no CodePen, precisando de configurações a parte.</p><p>10 Marcar para revisão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Redux reúne todos os estados, centralizando e otimizando a passagem de dados entre</p><p>componentes e ficando responsável por essa distribuição. Marque a alternativa correta em relação</p><p>às suas diferentes responsabilidades e algumas definições:</p><p>I. A biblioteca não é nativa, necessitando de instalação através de um gerenciador de pacotes.</p><p>II. Store é o objeto que salva todos os estados que desejamos compartilhar.</p><p>III. Actions são dados enviados do nosso componente, sem permissão de utilizar outros objetos do</p><p>Redux.</p><p>IV. Reducers são funções puras que recebem o estado anterior e uma ação, retornando para o</p><p>próximo estado.</p><p>V. Nunca devemos modificar os argumentos passados para os reducers, a fim de manter que</p><p>sejam funções puras.</p><p>I e II, apenas.</p><p>II e V, apenas.</p><p>I, II, IV e V, apenas.</p><p>I, III e V, apenas.</p><p>I, II, III e IV, apenas.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra C. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A alternativa correta é a C, que afirma que a biblioteca Redux não é nativa e precisa ser</p><p>instalada através de um gerenciador de pacotes �I�, que a Store é o objeto que guarda todos</p><p>os estados que desejamos compartilhar �II�, que os Reducers são funções puras que recebem</p><p>o estado anterior e uma ação, retornando para o próximo estado �IV) e que nunca devemos</p><p>modificar os argumentos passados para os reducers, para que continuem sendo funções</p><p>puras �V�. A afirmação III está incorreta, pois as Actions, na verdade, são ações enviadas do</p><p>nosso componente e têm permissão para acionar outros objetos do Redux, informando qual</p><p>função deve ser executada e qual valor essa função vai utilizar como parâmetro.</p><p>Você acertou 4 de 10 questões</p><p>Verifique o seu desempenho e continue treinando! Você pode refazer o exercício quantas vezes</p><p>quiser.</p><p>Verificar Desempenho</p><p>1 Marcar para revisão</p><p>Conforme código a seguir, qual seria o resultado esperado em tela levando em consideração a</p><p>sintaxe JSX�</p><p>Feedback</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Não teria resultado, pois a variável resultado não contém marcação HTML, indicando erro</p><p>de compilação.</p><p>Não teria resultado, pois a variável resultado não contém marcação HTML, mas sem erro</p><p>de compilação, apenas tela em branco.</p><p>"Rodrigo"2032014012.</p><p>Rodrigo2032014012.</p><p>Rodrigo 32014032.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra D. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Não é necessário indicar uma marcação HTML para gerar algum resultado, o JSX irá tratar</p><p>como um texto qualquer, e mesmo as variáveis idade e telefone sendo definidas como inteiras,</p><p>para somar os valores seria necessária uma função matemática em Javascript para obter um</p><p>resultado como o da alternativa: Rodrigo 32014032.</p><p>A</p><p>B</p><p>C</p><p>2 Marcar para revisão</p><p>O Bind é amplamente utilizado em aplicações React,  um exemplo de código pode ser visualizado</p><p>abaixo:</p><p>Qual seria o resultado no console quando clicarmos em Clique aqui! (linha 14�?</p><p>Um objeto, ExemploBind</p><p>undefined</p><p>Código não compila</p><p>Questão 7 de 10</p><p>Corretas �4�</p><p>Incorretas �6�</p><p>Em branco �0�</p><p>1 2 3 4 5</p><p>6 7 8 9 10</p><p>Exercicio Reactjs Sair</p><p>D</p><p>E</p><p>Console em branco, sem resultado</p><p>Uma string, Exemplo Bind</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra A. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Como foi feita a ligação (bind) com o evento de forma correta, conforme linha 5 do código,</p><p>chamando o this agora na função evento, o que será exibido no "this" é o próprio</p><p>componente, ou seja, o objeto ExemploBind.</p><p>3 Marcar para revisão</p><p>Podemos utilizar diferentes ambientes para testar nossas aplicações em React, avalie as seguintes</p><p>afirmativas:</p><p>I� O CodeSandBox não possui um template para React, necessitando de configuração extra para</p><p>utilização de React.</p><p>II� O CodePen não possui um template já definido, precisando incluir as bibliotecas dentro de suas</p><p>configurações.</p><p>III� É necessário a instalação do node.js em nosso ambiente de desenvolvimento offline.</p><p>Quais as afirmativas CORRETAS?</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Apenas a I.</p><p>Apenas a II.</p><p>Apenas a III.</p><p>As alternativas II e III.</p><p>As alternativas I e III.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O CodeSandBox já possui diversos templates com configurações pré-definidas, incluindo o</p><p>React, dispensando a configuração a parte para as bibliotecas, essa definição se encaixa mais</p><p>no CodePen, precisando de configurações a parte.</p><p>4 Marcar para revisão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Após a instalação das bibliotecas necessárias quando da configuração do ambiente, utiliza-se um</p><p>comando para criar uma aplicação React, o Create React App, basicamente um script que</p><p>configura um novo projeto. Após sua execução, que comando precisamos chamar para abrir nossa</p><p>aplicação, considerando que estamos na pasta da referida aplicação?</p><p>npm init.</p><p>npx create-react-app nome_app.</p><p>npm install.</p><p>npx start.</p><p>npm start.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra E. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>O comando npm init é utilizado para criar um pacote json. O comando npx create-react-app é</p><p>usado para criar toda a estrutura e dependências das bibliotecas básicas de uma aplicação</p><p>React, porém, vale ressaltar que seu uso não é obrigatório. O comando npm install é utilizado</p><p>para instalar todas as dependências definidas no arquivo json, dentro de um projeto. O</p><p>comando npx start não existe. Por fim, o comando npm start é o que inicia o servidor React,</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>abrindo uma aplicação no navegador padrão do sistema operacional. Portanto, a alternativa</p><p>correta é a E, que indica o comando 'npm start'.</p><p>5 Marcar para revisão</p><p>Sobre React e suas características, assinale a alternativa correta: I. Biblioteca Javascript</p><p>desenvolvida pelo Facebook. II. Utiliza o conceito de componentes, ajudando na construção de</p><p>interfaces, facilitando na sua reutilização. III. Apesar de ser de código aberto, sua comunidade é</p><p>muito pequena, pois muitos não aderiram a forma complexa de utilizar JSX. IV. Usado para o</p><p>desenvolvimento de interface tanto para usuários web quanto para mobile �React native).</p><p>I e II, apenas.</p><p>II e III, apenas.</p><p>I, II e IV, apenas.</p><p>I, III e IV, apenas.</p><p>III e IV, apenas.</p><p>A</p><p>B</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra C. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A comunidade React cresce cada vez mais, sendo uma das maiores comparadas aos seus</p><p>concorrentes, devido a facilidade do JSX principalmente, permitindo um rápido entendimento</p><p>no código, tornando mais limpo.</p><p>6 Marcar para revisão</p><p>Considerando um cenário onde uma aplicação local é executada na porta 3000 como padrão e</p><p>não ocorrendo alteração na instalação, avalie as seguintes afirmativas.</p><p>I� Se fecharmos o terminal que estamos executando nosso servidor, a aplicação permanece ativa.</p><p>II� O create-react-app é um script que configura e instala o básico para nossa aplicação, mas</p><p>existem outras formas de iniciar uma configuração inicial para uma aplicação React.</p><p>III� Toda aplicação React criada pelo create-react-app possuirá uma pasta node_modules,</p><p>contendo os módulos que o React utiliza em suas aplicações.</p><p>Quais as afirmativas CORRETAS?</p><p>Apenas a I.</p><p>As alternativas II e III.</p><p>C</p><p>D</p><p>E</p><p>Apenas a III.</p><p>As alternativas II e II.</p><p>As alternativas I e</p><p>III.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra B. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Toda nossa aplicação local é executada na porta 3000 como padrão, se não foi alterada na</p><p>instalação. Dentro de algum terminal, prompt do Windows, terminal dentro do Visual Code ou</p><p>prompt do Linux, se for executado o comando, sem parâmetro de background, ao fechar a</p><p>janela ativa, o servidor será interrompido.</p><p>O create-react-app é um script que configura e instala o básico para nossa aplicação, mas</p><p>existem outras formas de iniciar uma configuração inicial para uma aplicação React.</p><p>Toda aplicação React criada pelo create-react-app possuirá uma pasta node_modules,</p><p>contendo os módulos que o React utiliza em suas aplicações.</p><p>7 Marcar para revisão</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>Sobre ciclo de vida, diversos métodos podem acabar sendo chamados e reutilizados conforme a</p><p>fase de vida de um componente React, conforme as assertivas abaixo, analise as alternativas a</p><p>seguir:</p><p>I) constructor() apenas ocorre na fase de Montagem.</p><p>II) render() ocorre apenas na fase de Atualização.</p><p>III) getDerivedStateFromProps() é chamado em duas fases, tanto na montagem quando na fase de</p><p>atualização.</p><p>Quais as afirmativas CORRETAS?</p><p>I, II e III.</p><p>I e III.</p><p>I e II.</p><p>II e III.</p><p>Apenas a I.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>A</p><p>B</p><p>C</p><p>A alternativa correta é a B, que afirma que o método constructor() ocorre apenas na fase de</p><p>Montagem e que o método getDerivedStateFromProps() é chamado tanto na fase de</p><p>Montagem quanto na fase de Atualização. A afirmação II está incorreta, pois o método</p><p>render() não ocorre apenas na fase de Atualização, mas também na fase de Montagem. É</p><p>importante lembrar que o método render() é o único método obrigatório em componentes do</p><p>tipo classe no React.</p><p>8 Marcar para revisão</p><p>Requisições HTTP são mensagens enviadas pelo cliente para iniciar uma ação no servidor. Nesse</p><p>contexto, avalie as afirmativas relacionadas com a utilização de Requisições HTTP em React.</p><p>I� React não permite utilizar bibliotecas externas, apenas a nativa do navegador (windows.fetch)</p><p>II� Olhando para o ciclo de vida, o local para preencher os dados com requisições AJAX seria no</p><p>método componetDidMount, pois assim pode-se utilizar o setState para atualizar seu componente</p><p>quando os dados estiverem disponíveis</p><p>III� Não é possível utilizar hooks em requisições.</p><p>Quais as afirmativas CORRETAS?</p><p>I, II e III.</p><p>Apenas a II.</p><p>I e II.</p><p>D</p><p>E</p><p>II e III.</p><p>Apenas a I.</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>React aceita utilizar bibliotecas externas para manipular requisições, bastando apenas instalar</p><p>de forma correta, seguindo a documentação da API e utilizando, para facilitar sua</p><p>manipulação, useStates, por exemplo. É possível utilizar hooks em requisições, basta</p><p>definirmos nossa variável com o auxílio de useState.</p><p>9 Marcar para revisão</p><p>No código a seguir, marque a alternativa correta em relação ao resultado que devemos obter</p><p>executando-o.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>0</p><p>1</p><p>2</p><p>3</p><p>Erro de compilação</p><p>Resposta correta</p><p>Parabéns, você selecionou a alternativa correta. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Aqui um erro clássico ao utilizar eventos e useState, ao carregar o código pela primeira vez, a</p><p>função onSomarHandler é executada, pois estamos passando um parâmetro, gerando um loop</p><p>infinito, impossibilitando sua renderização, lembre-se, sempre que houver alguma atualização</p><p>na variável que definimos com useState, a aplicação será renderizada. Para corrigir, retire o</p><p>parâmetro passado na linha 13, �2*contador + 1�, chamando apenas onSomarHandler.</p><p>10 Marcar para revisão</p><p>React Routes é uma biblioteca externa, que permite navegar entre telas, reaproveitando</p><p>componentes. Sua última versão necessita refatorar parte dos códigos, sem muito alarde, mas</p><p>alguns conceitos não mudaram. Assinale a alternativa correta quando comparamos suas versões e</p><p>algumas definições. I. Na versão anterior, era utilizado switch para encapsular as rotas, que foi</p><p>substituído pelos Routes. II. Não é necessário instalar a biblioteca react-router-config para se</p><p>utilizar o React Router v6, no lugar utiliza-se userRoutes. III. Ainda é necessário utilizar a props</p><p>exact em Route. IV. Em toda aplicação, só podemos ter um único BrowserRouter, encapsulando o</p><p>objeto principal. V. useNavigate foi substituído por useHistory.</p><p>A</p><p>B</p><p>C</p><p>D</p><p>E</p><p>I e II, apenas.</p><p>II e V, apenas.</p><p>I, II, IV e V, apenas.</p><p>I, III e V, apenas.</p><p>I, II, III e IV, apenas.</p><p>Resposta incorreta</p><p>Opa! A alternativa correta é a letra C. Confira o gabarito comentado!</p><p>Gabarito Comentado</p><p>Não é mais necessário utilizar exact, na atual versão o processo de correspondência nas</p><p>definições de rotas não é mais feito de cima para baixo, não importando a ordem que são</p><p>criadas rotas.</p>