Exercício_Programação Cliente com JavaScript

Prévia do material em texto

1) Considere a página abaixo, construída utilizando jQuery:
$(document).ready(function() { .. I ... }); Esconder Texto do parágrafo.
Para que, ao se clicar no botão Esconder, o texto do parágrafo se torne oculto, deve-se preencher a lacuna I com:
A) $("button').click(function(){$('p#par').hide();});
B) $('button:eq(0)').click(function().defineProperty('p.par').hide());
C) $('button').click(function(){$('p.par').hidden();});
D) $('button:eq(1)').click(function(){$('p#par').hide0);});
E) $('button').click(function(){$('p.par').hide0);});
A alternativa correta é a E) $('button').click(function(){$('p.par').hide();});
Justificativa
· Gatilho de evento: O seletor $('button') seleciona o elemento da página, associando a função de retorno (callback) ao evento de clique através do método .click(...). 
· Seletor de classe: No documento HTML original da questão, o texto do parágrafo está definido com o atributo de classe Texto do parágrafo.. Em seletores CSS/jQuery, a seleção por classe exige o prefixo de ponto (.). Logo, $('p.par') seleciona corretamente o elemento pretendido. 
· Ação de ocultar: O método nativo .hide() altera a visibilidade do elemento no DOM (aplicando display: none), fazendo com que o parágrafo fique oculto ao clique. 
Análise das demais alternativas
· A) $('button').click(function(){$('p#par').hide();}); — Incorreta: O seletor # indica identificador único (id="par"), enquanto o elemento da página foi definido com uma classe (class="par"). 
· B) $('button:eq(0)').click(function().defineProperty('p.par').hide()); — Incorreta: Apresenta sintaxe inválida na declaração da função e recorre a defineProperty, que pertence à API nativa Object.defineProperty do JavaScript, não sendo um método encadeável do jQuery para manipular o DOM. 
· C) $('button').click(function(){$('p.par').hidden();}); — Incorreta: O método .hidden() não existe na biblioteca jQuery para ocultar elementos visuais (o método adequado é .hide()). 
· D) $('button:eq(1)').click(function(){$('p#par').hide();}); — Incorreta: Além de errar o seletor com # (busca por id), o pseudo-seletor :eq(1) selecionaria o segundo botão existente no DOM (a contagem começa em zero, :eq(0)), ignorando o primeiro botão. 
2) Uma aplicação web requer a atualização de conteúdo sem recarregar a página inteira. O desenvolvedor decide usar jQuery para realizar requisições AJAX, buscando dados de um servidor e atualizando um elemento da página.
Qual função jQuery è apropriada para enviar uma requisição AJAX GET e atualizar um elemento com o ID conteúdo'?
A) $.ajaxGet('#conteudo')
B) $('#conteudo').loadData()
C) $.get('url', function(data) { $('#conteudo').html(data); })
D) $('#conteudo').ajax('url")
E) $.post('url', function(data) { $('#conteudo').html(data); })
A alternativa correta é a C.
Justificativa: A função $.get() é o método nativo e adequado do jQuery especificamente para realizar requisições HTTP do tipo GET. No código da alternativa, após a requisição ser feita para a 'url', a função de callback recebe os dados (data) retornados pelo servidor e utiliza o método .html() para injetar esse conteúdo dentro do elemento com o ID conteudo ($('#conteudo')).
Por que as outras estão incorretas?
· A) Não existe um método nativo $.ajaxGet() no jQuery.
· B) Não existe o método .loadData(). O jQuery possui um método chamado .load(), que faria algo semelhante ($('#conteudo').load('url')), mas não .loadData().
· D) O método .ajax() não é encadeado diretamente a um seletor de elemento dessa forma. A chamada correta é global: $.ajax(...).
· E) Embora a sintaxe de callback esteja correta, o método $.post() realiza uma requisição do tipo POST, e o enunciado pede especificamente uma requisição GET.
3) Ao contrário da palavra-chave "var", a palavra- chave "let", tem como função restringir o acesso a variaveis
dentro de um bloco. Neste sentido, o que acontece quando executamos o código abaixo em um navegador
com suporte a ECMAScript versão ES6 ou superior?
Escopo de variáveis em JS
3.5.1.18">
let teste = 200;
if (teste > 100) {
let teste = 1;
console. log (teste) ;
A) O valor da variável teste será sempre 200.
B) Será exibido no console do navegador o valor 1.
C) Será exibido dentro da janela navegador o valor 1.
D) A instrução let introduz um escopo de bloco a variável teste.
E) A declaração da variável teste utilizando let funcionaria da mesma forma se utilizássemos var.
A alternativa correta é a A) O valor da variável teste será sempre 200.
Justificativa
· Comportamento do escopo na execução: A instrução let teste = 200; inicializa a variável no âmbito principal do script com o valor 200. Ao avaliar a condição if (teste > 100), a declaração interna let teste = 1; passa a existir estritamente no interior daquele bloco específico. 
· Persistência do valor externo: O identificador externo teste nunca tem o seu conteúdo alterado ou substituído durante todo o ciclo do programa. Assim que a execução sai da estrutura condicional, a variável interna deixa de existir, garantindo que qualquer chamada exterior — tal como a linha console.log(teste); — avalie invariavelmente o valor original de 200. 
Análise das demais alternativas
· B) Será exibido no console do navegador o valor 1. — Incorreta: A chamada console.log(teste); situa-se fora do bloco if delimitado por chaves { ... }. Uma vez terminado o bloco, a variável de valor 1 é descartada e o valor impresso na consola é 200. 
· C) Será exibido dentro da janela navegador o valor 1. — Incorreta: O comando console.log() envia a informação para as ferramentas de desenvolvimento do navegador (DevTools/Consola) e nunca diretamente para a área visual da página ou janela do documento. 
· D) A instrução let introduz um escopo de bloco a variável teste. — Incorreta (segundo o gabarito oficial da banca): A pergunta indaga pontualmente "o que acontece quando executamos o código", visando o efeito prático do algoritmo no ecrã/consola, em vez de uma definição concetual da sintaxe da linguagem. 
· E) A declaração da variável teste utilizando let funcionaria da mesma forma se utilizássemos var. — Incorreta: Caso fosse declarada com var, a palavra-chave não respeitaria o âmbito de bloco do comando de decisão if. Como consequência, o valor interno 1 sobrescreveria a variável global e o resultado impresso passaria a ser 1. 
4) Em um projeto web, um desenvolvedor opta por utilizar o JQuery para simplificar a manipulação do DOM. Ele
necessita implementar uma função que esconda todos os elementos com a classe .destaque ao clicar em
um botão específico.
Qual linha de código em JQuery realiza corretamente a ação descrita acima?
A) $("p.destaque").hideOnClick();
B) $("p.destaque"').click(function() { $(this).hide(); });
C) $(".destaque").on("click", "p", function() { $(this).hide(); });
D) $("button").click(function() { $("p.destaque").hide(); });
E) $("p").hasClass(".destaque").click(function() { $(this).hide();
A alternativa correta é a D) $("button").click(function() { $("p.destaque").hide(); });
Justificativa: O enunciado pede duas ações coordenadas:
1. Disparador: O evento deve ocorrer ao clicar em um botão específico ($("button").click(...)).
2. Efeito: Todos os parágrafos com a classe .destaque devem ser ocultados ($("p.destaque").hide();).
A opção D atende perfeitamente a esse fluxo: escuta o evento de clique no botão e, dentro do callback, seleciona os parágrafos com a classe destaque (p.destaque) e invoca o método .hide() para ocultá-los.
Por que as outras estão incorretas?
· A) Não existe um método nativo no jQuery chamado .hideOnClick().
· B) O ouvinte de clique foi colocado diretamente no próprio parágrafo ($("p.destaque").click), fazendo com que o parágrafo só desapareça se clicarem nele próprio, e não no botão.
· C) Configura delegação de eventos para disparar ao clicarem um elemento p dentro de .destaque, escondendo o próprio elemento clicado, e não ao clicar no botão.
· E) O método .hasClass() retorna um valor booleano (true/false), não permitindo encadear o método .click(). Além disso, o gatilho também não estaria no botão.
5) Um programador esta trabalhando em uma aplicação web e precisa garantir que uma variável seja acessivel
somente dentro do bloco onde foi declarada, evitando conflitos com outras partes do código.
Qual palavra-chave em Javascript deve ser usada para declarar a variável com o escopo desejado?
A) var.
B) let.
C) const.
D) scope.
E) block.
A alternativa correta é a B) let. (ou C, a depender do gabarito da banca, com preferência formal por let no contexto geral de variáveis reatribuíveis).
Justificativa
· let (e também const): Introduzidos no ECMAScript 6 (ES6), ambos possuem escopo de bloco (delimitado por { ... }). Uma variável declarada com let existe apenas dentro do bloco em que foi criada (estruturas if, laços for, funções, ou blocos livres), prevenindo vazamento de escopo e conflitos com o restante do código.
· Em concursos e provas de tecnologia, quando o enunciado cita especificamente uma "variável" com escopo de bloco, a resposta padrão esperada pela banca costuma ser let, reservando-se const para identificadores com valor fixo/imutável na atribuição.
Análise das demais alternativas
· A) var: Possui escopo de função (ou global), não respeitando escopo de bloco (if, for, etc.), o que frequentemente causa colisões de variáveis.
· D) scope: Não é uma palavra-chave para declaração em JavaScript.
· E) block: Não existe como palavra-chave para declarar variáveis na linguagem.
6) Em um projeto web, ao implementar uma tabela HTML dinamica utilizando jQuery e AJAX, os dados são
recebidos do servidor no formato JSON. A tabela e atualizada automaticamente sem recarregar a pagina,
melhorando a experiência do usuário.
Qual método HTTP e mais adequado para a realização dessa tarefa e por que?
A) PUT, pois permite substituir recursos no servidor.
B) GET, pois é utilizado para solicitar dados de um recurso especificado,
C) DELETE, pois remove recursos do servidor.
D) HEAD, pois solicita uma resposta similar ao GET, sem o corpo da resposta.
E) TRACE, pois permite diagnóstico no caminho para o alvo.
A alternativa correta é a B) GET, pois é utilizado para solicitar dados de um recurso especificado.
Justificativa
O método HTTP GET é semanticamente o padrão na arquitetura web/REST para leitura e recuperação de informações de um servidor. Quando uma página solicita dados (como um arquivo JSON) para preencher dinamicamente uma tabela sem alterar o estado do servidor nem enviar dados complexos no corpo da requisição, o GET é a escolha ideal, segura e idempotente.
Análise das demais alternativas
· A) PUT: Serve para atualizar integralmente ou criar um recurso no servidor (enviando novos dados), e não apenas consultar informações existentes.
· C) DELETE: Serve para solicitar a remoção de um recurso no servidor.
· D) HEAD: Embora faça uma requisição similar ao GET, o HEAD retorna apenas os cabeçalhos HTTP, sem o corpo da resposta (body), tornando impossível receber os dados JSON para renderizar na tabela.
· E) TRACE: É utilizado para testes de diagnóstico e loopback de requisições de rede, não para o tráfego regular de dados da aplicação.
7) Considere a página abaixo, desenvolvida utilizando-se jQuery.
Requisições AJAX com jQuery:/title>
c/head>
body?
spo
Executar a requisição
AJAX
$('#Ink').click(function () {
("sanasa.php", function(data, status) {
status) ;
console. log ("Retorno: " + data + "\nStatus; "+
Para que, ao clicar no link, seja feita uma requisição ao arquivo sanasa.php que esta no servidor, de forma que
o retorno seja recebido em data e o status da operação em status, a lacuna I deve ser corretamente preenchida
por:
A) $.get
B) $request
C) $post
D) $.send
E) $.ajax
A alternativa correta é a A) $.get.
Justificativa
A função auxiliar de AJAX do jQuery para requisições GET tem a seguinte assinatura:
JavaScript
$.get(URL, [data], [callback], [dataType]);
Quando utilizada na sua forma mais comum com URL e função de retorno, a função de callback aceita como parâmetros os dados retornados (data) e o status da resposta HTTP (status):
JavaScript
$.get("sanasa.php", function(data, status) {
 console.log("Retorno: " + data + "\nStatus: " + status);
});
Ao preencher a lacuna I com $.get, a sintaxe casa perfeitamente com a abertura de parênteses já existente no código do enunciado: $.get("sanasa.php", function(data, status) { ... });.
Análise das demais alternativas
· B) $request: Não existe esse método auxiliar na biblioteca jQuery.
· C) $post: Falta o ponto (.) separando o seletor $ do nome da função ($.post).
· D) $.send: Não é um método nativo da API do jQuery.
· E) $.ajax: O método genérico $.ajax() recebe como argumento obrigatório um objeto de configuração com pares chave-valor (ex.: $.ajax({ url: "sanasa.php", success: function(...) { ... } })), e não argumentos posicionais diretos como ("url", callback).
8) O jQuery pode selecionar elementos HTML a partir de seletores, otimizando o desenvolvimento. Sobre a
utilização de seletores no jQuery, è correto afirmar:
A) $('td, th'); retornará todos os elementos th que são filhos de td.
B) $('#formulario'); retornará todos os elementos da classe 'formulario'.
C) $('p:first'); retornará o primeiro dos elementos p.
D) $('.paragrafo'); retornará o elemento com id igual a 'paragrafo'.
E) $('p#first'); retornará o primeiro dos elementos p.
A alternativa correta é a C) $('p:first'); retornará o primeiro dos elementos p.
Justificativa
· C) Correta: O pseudo-seletor :first no jQuery seleciona o primeiro elemento correspondente ao seletor informado na página. Portanto, $('p:first') seleciona o primeiro elemento .
Análise das demais alternativas
· A) Incorreta: A vírgula , é o seletor de união (múltiplos seletores). Logo, $('td, th') seleciona todos os elementos e todos os elementos . Para selecionar th descendente/filho de td, a sintaxe seria com espaço ($('td th')) ou seletor de filho direto com sinal de maior ($('td > th')).
· B) Incorreta: O prefixo # representa o seletor por ID (identificador único), e não por classe. Portanto, seleciona o elemento com id="formulario".
· D) Incorreta: O prefixo . (ponto) representa o seletor por classe. Portanto, seleciona os elementos que possuem class="paragrafo", e não ID.
· E) Incorreta: A sintaxe p#first seleciona um elemento que possua o atributo id="first" (ex: ), e não o primeiro elemento do documento (que é feito com o pseudo-seletor :first ou :first-of-type).
9) Em um projeto de interface web, um desenvolvedor utiliza jQuery para aprimorar a interatividade. Ele planeja
modificar o estilo de um botão quando o usuário passa o mouse sobre ele. Para isso, ele precisa selecionar
corretamente o botão e aplicar a função de estilo.
Qual método jQuery o desenvolvedor deve usar para selecionar o botão pelo seu ID e aplicar uma mudança de
estilo ao passar o mouse?
A) $('#botao').onMouseOver()
B) $('#botao').hover()
C) $('.botao').mouseenter()
D) $('botao').mouseover()
E) $('#botao').mouseStyle()
A alternativa correta é a B) $('#botao').hover(). 
Justificativa
· Seletor de ID: Para selecionar um elemento pelo seu ID no jQuery, utiliza-se a sintaxe de seletor herdada do CSS com o símbolo cerquilha/hash (#), resultando em $('#botao'). 
· Evento de passar o mouse: O método nativo .hover() do jQuery é especificamente concebido para associar manipuladores aos eventos de passagem do cursor do mouse sobre o elemento (disparando funções ao entrar e ao sair), sendo o recurso padrão para alternar ou aplicar regras e estilos visuais de interação. 
Análise das demais alternativas
·A) $('#botao').onMouseOver() — Incorreta: O método .onMouseOver() não existe na biblioteca jQuery. O atributo correspondente no DOM nativo é onmouseover, enquanto o método de evento simplificado do jQuery é .mouseover(). 
· C) $('.botao').mouseenter() — Incorreta: O seletor utiliza o ponto inicial (.botao), que seleciona elementos pela classe CSS, contrariando o enunciado que exige expressamente a seleção pelo ID. 
· D) $('botao').mouseover() — Incorreta: A ausência de prefixo ('botao') faz o jQuery procurar por elementos cuja tag HTML seja , o que não atende à seleção por identificador único. 
· E) $('#botao').mouseStyle() — Incorreta: Não existe qualquer método denominado .mouseStyle() na API oficial do jQuery. 
10) Considere o bloco de código abaixo que utiliza JavaScript e JSON.
cacript>
var text = "{"trens" : [" +
'["trem":"0145", "linha":"azul"},'+
'["crem": "0146", "linha"; "vermelha"}, '+
! ["czem“: "0147", "linha" : "vezde" ] ] > ! ;
x = JSON. parse (text) ;
$("#exibe") .html =
Para que o bloco de código exiba 0146 vermelha, a lacuna I deve ser corretamente preenchida por:
A) x.trens[2].trem + " " + x.trens[2].linha
B) text.trens[trem] + " " + text.trens[linha]
C) x.trens[1].trem + " " + x_trens[1].linha
D) x.trens[trem] + " " + x.trens[linha]
E) text.trens[1].trem + " " + text.trens[1].linha
A alternativa correta é a C) x.trens[1].trem + " " + x.trens[1].linha. 
Justificativa
· Desserialização com JSON.parse: A variável text contém apenas uma cadeia de caracteres (string) pura. Ao executar o método x = JSON.parse(text);, a string JSON é convertida num objeto JavaScript manipulável e armazenada na variável x. Assim, qualquer acesso aos dados estruturados tem de ser efetuado através de x e nunca diretamente através de text. 
· Indexação de vetores (base zero): O array x.trens contém múltiplos objetos:
· Índice 0 (x.trens[0]): Trem 0145 / linha azul.
· Índice 1 (x.trens[1]): Trem 0146 / linha vermelha. 
· Índice 2 (x.trens[2]): Trem 0147 / linha verde. 
· Concatenação das propriedades: Para obter a saída exata "0146 vermelha", acede-se ao segundo elemento do vetor (índice 1) extraindo os valores das propriedades trem e linha, intercalados por um espaço: x.trens[1].trem + " " + x.trens[1].linha. 
Análise das demais alternativas
· A) x.trens[2].trem + " " + x.trens[2].linha — Incorreta: O índice [2] corresponde ao terceiro elemento da lista, o que exibiria "0147 verde". 
· B) text.trens[trem] + " " + text.trens[linha] — Incorreta: Além de tentar aceder aos dados a partir da string primitiva text, utiliza identificadores sem aspas ([trem] e [linha]) como se fossem variáveis declaradas, gerando um erro de referência (ReferenceError). 
· D) x.trens[trem] + " " + x.trens[linha] — Incorreta: Os índices de um array numérico em JavaScript são números inteiros (como 0, 1, 2) e não nomes de propriedades como variáveis não definidas. 
· E) text.trens[1].trem + " " + text.trens[1].linha — Incorreta: A variável text é uma simples string antes de ser processada pelo analisador JSON, pelo que não dispõe da propriedade .trens nem da estrutura em árvore de objetos.