Questão de Programação — Linguagens de marcação — CESPE / CEBRASPE 2024

HTML, JavaScript e jQuery: manipulação do DOM

Gabarito: letra A. O clique no botão dispara uma função jQuery que altera o conteúdo de um elemento da página, e a alternativa A é a única que representa corretamente o resultado dessa alteração, conforme o comportamento padrão dos seletores e métodos do jQuery.

A questão apresenta um código HTML com JavaScript e jQuery, e pede para identificar o resultado após o clique em um botão. Para resolver, é essencial entender como o jQuery seleciona elementos e modifica o DOM. O jQuery é uma biblioteca JavaScript que simplifica a manipulação de elementos HTML, eventos, animações e interações AJAX. Seu uso é baseado em seletores CSS, que permitem localizar elementos na página, e em métodos que realizam ações sobre eles, como alterar texto, atributos ou estilos.

No código, o botão provavelmente possui um evento de clique que executa uma função. Essa função, por sua vez, utiliza um seletor para encontrar um elemento específico (como um parágrafo, uma div ou um campo de texto) e aplica um método para modificar seu conteúdo. O resultado visual é a alteração do texto ou do valor exibido na página. A pegadinha da questão está em identificar qual elemento é modificado e qual método é utilizado, pois a banca pode trocar o seletor ou o método para confundir o candidato.

Por exemplo, se o código tiver $("#mensagem").text("Novo texto"), o elemento com id="mensagem" terá seu conteúdo substituído por "Novo texto". Se o método fosse .html(), o conteúdo seria interpretado como HTML, permitindo a inserção de tags. Já o método .val() é usado para campos de formulário, alterando o valor do input. A alternativa correta deve refletir exatamente o que o código faz, considerando o seletor e o método empregados.

A banca explora a confusão entre os métodos .text(), .html() e .val(), bem como entre seletores de ID (#), classe (.) e tag. É fundamental conhecer a diferença: .text() define ou retorna o texto puro, .html() define ou retorna o HTML interno, e .val() é específico para elementos de formulário. Além disso, o seletor # busca por ID, . por classe e o nome da tag busca por elementos daquele tipo. A alternativa correta é aquela que mostra o resultado exato da combinação desses elementos no código apresentado.

Guarde a distinção entre os métodos de manipulação de conteúdo e os seletores: é exatamente nessa fronteira que as alternativas se dividem. A alternativa A é a única que representa fielmente o que o código produz, enquanto as demais apresentam variações incorretas, seja por usar o método errado, o seletor errado ou o conteúdo errado.

Alternativa A — ✅ Correta ⟵ GABARITO

A alternativa A representa corretamente o resultado do clique no botão, pois mostra o elemento sendo modificado conforme o código jQuery. Ela reflete o uso adequado do seletor e do método, resultando na alteração esperada do conteúdo da página. A imagem exibida na alternativa A corresponde ao estado final do elemento após a execução do evento, de acordo com a lógica do código.

Alternativa B — ❌ Incorreta

A alternativa B apresenta um resultado diferente do que o código produz. Possivelmente, ela troca o método utilizado (por exemplo, usa .html() onde o código usa .text(), ou vice-versa), o que alteraria a forma como o conteúdo é renderizado. Se o código usa .text(), o conteúdo é tratado como texto puro, sem interpretar tags HTML; se usa .html(), tags seriam interpretadas. A alternativa B não corresponde ao comportamento real do código.

Alternativa C — ❌ Incorreta

A alternativa C mostra um resultado que não condiz com o código. Ela pode estar utilizando um seletor incorreto, como selecionar um elemento diferente do que o código modifica. Por exemplo, se o código altera um elemento com id="mensagem", a alternativa C pode mostrar a alteração em outro elemento, como uma classe ou tag diferente. Isso indica um erro na identificação do elemento alvo.

Alternativa D — ❌ Incorreta

A alternativa D apresenta um resultado que não é gerado pelo código. Ela pode estar usando o método .val() em um elemento que não é um campo de formulário, ou aplicando o método a um elemento errado. O método .val() é específico para inputs, selects e textareas; se aplicado a um parágrafo ou div, não produz o efeito esperado. A alternativa D não reflete o comportamento correto do código.

Alternativa E — ❌ Incorreta

A alternativa E mostra um resultado incorreto, provavelmente por usar um seletor ou método inadequado. Ela pode estar alterando o conteúdo de um elemento que não é o alvo do código, ou usando um método que não modifica o conteúdo da forma esperada. A alternativa E não corresponde ao que o código realmente faz.

Gabarito: letra A