Atividade de Sistematização TODAS PROGRAMAÇÃO WEB

Prévia do material em texto

Atividade de Sistematização 2
Programação Web 
Pergunta 1
0,16 Pontos
Ao aplicar uma formatação a uma página é importante que você defina uma regra CSS, mas não somente isso. É necessário informar o documento em que a regra se encontra. Sobre a utilização das regras CSS, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO ou F para FALSO:
1. As folhas de estilo podem ser utilizadas de três maneiras diferentes: estilo inline, estilo externo e estilo interno.
2. O estilo externo deve ser evitado, pois não permite a formatação de várias páginas.
3. Um estilo interno pode ser escrito em qualquer editor e não deve conter nenhuma tag HTML.
4. O estilo inline é a forma mais simples e direta de aplicar uma formatação a um elemento HTML e deve ser utilizado diretamente no elemento que se quer alterar.
As assertivas I, II, III e IV são, RESPECTIVAMENTE:
1. V, F, F, V.
A. V, F, F, V.
B. F, V, F, V.
C. V, V, F, F.
D. F, F, V, V.
Pergunta 2
0,16 Pontos
Sobre a utilização da sintaxe CSS e a formatação de elementos HTML, analise o código a seguir no qual foram omitidas palavras ou conceitos:
   <style type="text/css">
       .box{
           width: 400px.
           margin: auto.
           I-__________________.
           border: 2px solid #ccc.
           II-__________________.
       }
       h1{color: white. text-align: center.}
       p{III-____________. text-align: justify.}
   </style>
Deseja-se exibir um box centralizado com um título e um parágrafo, como mostra a figura a seguir:
 
Figura
Fonte: Acervo do conteudista
#ParaTodosVerem: Imagem do navegador Google Chrome exibindo uma aba com o título “Estilos CSS”. No centro há um retângulo com o fundo na cor preta com o título “Estilos CSS” centralizado. Logo abaixo há um texto contendo um conjunto de palavras Lorem Ipsum. Tanto o título quanto o texto são apresentados na cor branca. Fim da descrição.
Para tanto, assinale a alternativa que preenche, de forma CORRETA, as lacunas I, II e III do código dado acima:
1. I- margin: 20px. II- background: black. III- font-color: white.
2. I- padding: 20px. II- background-color: black. III- font-color: white.
3. I- padding-top: 20px. II- background-color: black. III- color: white.
4. I- padding: 20px. II- background-color: black. III- color: white.
Pergunta 3
0,16 Pontos
Sobre a estrutura de sintaxe do CSS, leia atentamente as informações contidas nas colunas “A” e “B” para, em seguida, assinalar a alternativa que reúne as correspondências CORRETAS entre as informações nelas contidas.
Coluna A
1. Refere-se à quantificação ou qualificação da propriedade.
2. Define a característica do seletor que será alterada.
3. É o elemento HTML em que se deseja criar o estilo.
4. Determina os parâmetros do estilo e consiste em uma propriedade e um valor.
Coluna B
1. Seletor.
2. Declaração.
3. Propriedade.
4. Valor.
A sequência CORRETA da associação é:
I-4. II-3. III-1. IV-2.
Pergunta 4
0,16 Pontos
As páginas web modernas têm foco na apresentação do conteúdo, que extrapola o simples uso de tags do HTML. Sobre a formatação das páginas web, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. No início do HTML elementos da própria linguagem eram utilizados para definir a formatação das páginas.
2. O CSS (Cascading Style Sheet ou Folha de Estilo em Cascatas) foi introduzido a partir da versão 4.0 do HTML, com a finalidade de se encarregar da apresentação visual de um site, alterar elementos como fonte, cor e tamanho de textos.
3. Apesar de trazer vários benefícios, a utilização do CSS pode comprometer a flexibilidade e o controle dos elementos na página.
4. Na sintaxe do CSS, a regra é a unidade básica de uma folha de estilo e é composta de um seletor e uma ou mais declarações.
As assertivas I, II, III e IV são, RESPECTIVAMENTE:
vvfv
I-4. II-3. III-1. IV-2.
Atividade de Sistematização 3
Pergunta 1
0,17 Pontos
Podemos inserir um código JavaScript diretamente em uma tag HTML, como no código a seguir:
 
Assinale a alternativa que preenche, de forma CORRETA, a lacuna, considerando que queremos disparar um evento quando o usuário clicar em “EXIBIR MSG”:
Resposta a 
Onclick=”alert(‘eventosJS’);”
Pergunta 2
0,17 Pontos
A Linguagem JavaScript (JS) permite, entre outros, a criação de efeitos e validação de formulários. Dentre as inúmeras vantagens da utilização do JS, podemos citar que o desenvolvimento web é simplificado, por ser uma Linguagem nativa dos navegadores. Além disso, é possível executá-lo no lado do servidor, criar jogos e aplicativos desktop e mobile.
Considerando o que foi estudado, assinale a alternativa CORRETA que corresponde às características apresentadas no texto anterior:
flexibilidade e versatilidade
Pergunta 3
0,17 Pontos
Sobre os eventos em JavaScript, leia atentamente as informações contidas nas colunas “A” e “B” para, em seguida, assinalar a alternativa que reúne as correspondências CORRETAS entre as informações nelas contidas.
Coluna A
1. Um elemento HTML foi alterado.
2. Um elemento HTML foi clicado.
3. O mouse move-se sobre um elemento HTML.
4. O navegador terminou de carregar a página.
Coluna B
1. onmouseover.
2. onload.
3. onclick.
4. onchange.
I-2; II-4; III-1; IV-3.
(errada, não achei a resposta da 3)
Pergunta 4
0,17 Pontos
O JavaScript é considerado por muitos uma das Linguagens de Programação mais populares. Sobre o JavaScript, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. É uma Linguagem de alto nível, para programação de uso geral, muito aplicada no desenvolvimento web.
2. É uma Linguagem compilada, nativa de navegadores web, que permite validações de elementos HTML.
3. Evoluiu para o lado do servidor, podendo ser utilizada no desenvolvimento de aplicativos híbridos para dispositivos móveis.
4. A execução do JavaScript está associada a eventos, porém, há casos em que a instrução ou comando é executado conforme o navegador interpreta a página web.
As assertivas I, II, III e IV são, RESPECTIVAMENTE:
E: vfvv
Atividade de Sistematização 4
Pergunta 1
0,17 Pontos
Sobre a manipulação de dados com o WebStorage, leia atentamente as informações contidas nas colunas “A” e “B” para, em seguida, assinalar a alternativa que reúne as correspondências CORRETAS entre as informações nessas contidas.
Coluna A:
I-     setItem(nome, valor)
II-    getItem(nome)
III-   removeItem(nome)
IV-   clear()
Coluna B:
1-    É utilizado para recuperar dados.
2-    É utilizado para gravar dados.
3-    É utilizado para apagar todos os dados do armazenamento.
4-    É utilizado para apagar um dado gravado.
A sequência CORRETA desta associação é:
I-2; II-1; III-4; IV-3
Pergunta 2
0,17 Pontos
 O uso do jQuery permite manipular seletores alinhados com CSS, facilitando o acesso a propriedades de alteração do estilo, sem necessidade de utilizar funções padrão do JavaScript. Considerando o contexto apresentado, analise o código a seguir:
$(document).ready(function(){
     $("p").css("color", "red");
});
Assinale a alternativa CORRETA que apresenta resultado da execução desse código jQuery:
Altera a cor do texto de todas as tags "p" para a cor "red".
Pergunta 3
0,17 Pontos
O jQuery oferece uma forma simplificada para controlar o comportamento de uma página web. Para tanto, considerando-se sua sintaxe, qual é a forma correta de selecionar um elemento pelo seu ID usando o jQuery?
("#id_do_elemento").
Pergunta 4
0,17 Pontos
Sobre as requisições assíncronas, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. O AJAX permite uma melhor interação com o usuário uma vez que a troca de dados com o servidor ocorre em segundo plano, ou seja, as páginas não precisam ser recarregadas para que se atualize somente partes delas.
2. A biblioteca jQuery oferece uma vasta documentação para se trabalhar as requisições AJAX, por meio dos métodos ajax(), que tornam as requisições mais simples do que usar o método nativo do JavaScript, o XMLHttpRequest.3. O XMLHttpRequest é um objeto nativo padronizado nos navegadores atuais, mas foi implementado originalmente pela Apple como controle ActiveX nas versões antigas do Safari.
4. O Fetch veio para substituir os métodos da biblioteca jQuery e se tornou padrão mesmo nas versão mais antigas dos navegadores Firefox Chrome.
As assertivas I, II, III e IV são, RESPECTIVAMENTE:
RESPOSTA: VVFF
Atividade de Sistematização 5
Pergunta 1
0,17 Pontos
Sobre a utilização as diretivas no Vue.js, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. A diretiva v-bind é utilizada para interligar atributos HTML a propriedades da instância Vue.
2. A diretiva v-for é utilizada para renderizar listas baseadas em um array ou objeto.
3. A diretiva v-show é utilizada para renderizar condicionalmente um elemento com base em uma expressão booleana.
4. Quando se deseja alterar a visibilidade de um elemento com mais frequência, recomenda-se o uso da diretiva v-if por ser mais leve.
As assertivas I, II, III e IV são, respectivamente:
RESPOSTA VVVF
Pergunta 2
0,17 Pontos
Durante uma entrevista de estágio, você foi avaliado(a) sobre o uso de diretivas no Vue.js. Para tanto, um teste simples propunha que você utilizasse diretivas para alterar a imagem exibida em uma div. Complete as lacunas no código a seguir com as diretivas correspondentes:
<div id="app">
 <img I-____________="imagemAtual" alt="Imagem atual">
 <button II-__________:click="trocarImagem">Trocar imagem</button>
</div>
<script>
 const app = Vue.createApp({
   data() {
     return {
       imagens: ['imagem1.jpg', 'imagem2.jpg', 'imagem3.jpg'],
       indiceImagemAtual: 0
     }
   },
   computed: {
     imagemAtual() {
       return this.imagens[this.indiceImagemAtual]
     }
   },
   methods: {
     trocarImagem() {
       this.indiceImagemAtual = (this.indiceImagemAtual + 1) % this.imagens.length
     }
   }
 })
 app.mount('#app')
</script>
Assinale a alternativa que preenche, de forma CORRETA, as lacunas I e II, respectivamente:
1. v-bind e v-on.
Vbind e v-on
Pergunta 3
0,17 Pontos
Analise o código a seguir, que exibe uma lista de compras utilizando-se de componentes no Vue.js:
<html>
<head>
 <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
 <div id="app">
    <h1>{{ titulo }}</h1>
    <compras-list
        v-for="item in itens"
        v-bind:item = "item"
     ></compras-list>
 </div>
<script>
   const app = Vue.createApp({
     data() {
       return {
           titulo: "Lista de compras",
           itens: ['Café', 'Farinha', 'Macarrão', 'Feijão', 'Milho de Pipoca']
     }}
   })
   app.component('compras-list', {
       props: ['item'],
       template: '<li>{{ item }}</li>'
   })
   app.mount('#app')
</script>
</body>
</html>
Quanto a essa implementação, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. O código importa a versão mais recente do Vue.js (versão 3) de um servidor remoto (CDN).
2. Para percorrer um array e renderizar cada item na lista devemos substituir no código dado a diretiva v-for pela diretiva v-model, que é utilizada para iterar sobre o array de itens.
3. O código utiliza o método Vue.createApp para criar a instância do aplicativo Vue e app.mount para montá-lo no elemento HTML com id app.
4. No código fornecido, o componente "compras-list" é utilizado como parâmetro para a diretiva v-for do elemento div com id "app". Isso permite que a lista de carros seja exibida na página.
As assertivas I, II, III e IV são, respectivamente:
VFVV
Pergunta 4
0,17 Pontos
O uso de diretivas no Vue.js permite estender o comportamento e a funcionalidade de elementos HTML. Considerando a diretiva v-bind no Vue.js, assinale a alternativa correta:
c) A diretiva v-bind é utilizada para vincular o valor de um atributo HTML com uma expressão Vue.
A diretiva v-bind é utilizada para vincular o valor de um atributo HTML com uma expressão Vue.
Atividade de Sistematização 6
Pergunta 1
0,17 Pontos
Sobre o ciclo de vida em React, leia atentamente as informações contidas nas colunas “A” e “B” para, em seguida, assinalar a alternativa que reúne as correspondências CORRETAS entre as informações contidas.
Coluna A:
1. Inicialização.
II-    Montagem.
III-   Atualização.
IV-   Desmontagem.
Coluna B:
1-    O componente é atualizado com novas props ou estados.
2-    O componente é removido da árvore do DOM.
3-    O componente está sendo preparado para a renderização.
4-    O componente é inserido na árvore do DOM pela primeira vez.
A sequência CORRETA desta associação é: 
I-3; II-4; III-1; IV-2.I-4; III-1; IV-2.
Pergunta 2
0,17 Pontos
Sobre o uso do JSX em React, analise as seguintes assertivas quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. É possível desenvolver aplicativos React sem o uso do JSX, utilizando apenas JavaScript puro, porém, devido à sua sintaxe, que torna a escrita e manutenção do código mais fácil, o JSX é recomendado e amplamente utilizado no ecossistema React.
2. O JSX é uma linguagem de programação independente do JavaScript e, por essa razão, necessita de um transpilador para converter o código em JavaScript que o navegador possa entender.
3. O JSX permite a mistura de JavaScript, HTML e CSS em um único arquivo.
4. Apesar da simplicidade da sintaxe, uma desvantagem da utilização do JSX é a ausência de recursos de segurança, o que permite que dados sejam exibidos como código executável.
As assertivas I, II, III e IV são, respectivamente:
VFVF
Pergunta 3
0,17 Pontos
Considere os blocos de código exibidos a seguir:
	I-
	const elemento = React.createElement('p', null, 'Olá mundo React!');
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(elemento);
	II-
	const elemento = <p>Olá mundo React!</p>;
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(elemento);
Analise as assertivas a seguir quanto à veracidade, assinalando V para VERDADEIRO, ou F para FALSO:
1. A implementação I é mais simples, uma vez que não necessita da importação das bibliotecas do React.
2. Os dois códigos implementados em I e II produzem o mesmo efeito, sendo que a implementação II se utiliza da sintaxe do JSX;
3. Os dois códigos implementados em I e II apresentam formas diferentes para se criar componentes em React;
4. A implementação II requer o uso de um transpilador, pois o código JSX não é interpretado diretamente pelo navegador.
As assertivas I, II, III e IV são, respectivamente:
FVVV
Complete o código a seguir com as lacunas necessárias para exibir o texto "Olá mundo!" em um elemento HTML:
const root = ReactDOM const element React. root.render (element('p', null, 'ola mundo ')); WANAWA SYAM www B A createRoot = createElement!
Assinale a alternativa que preenche, respectivamente e de forma CORRETA, as lacunas.
createRoot – CREATE Element
CuseState - createRoot
createElement create Root
createElemente – useStace
Atividade de Sistematização 1
PERGUNTA 1:
Qual é a versão anterior do HTML, antes de HTML5? RESPOSTA: HTML 4.01
​
Pergunta 2
0,16 Pontos
Qual a empresa que está responsável pelos padrões da Web?
The World Wide Web Consortium
PERGUNTA 3: 
O DOCTYPE especifica o tipo de documento que a página irá utilizar qual a sintaxe do DOCTYPE para HTML5?
<!DOCTYPE HTML5 PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd">
<!DOCTYPE html>
<!DOCTYPE HTML5>
<!DOCTYPE>
<!DOCTYPE xHTML>
PERGUNTA 4:
O que o HTML está para?
Hyper Text Markup LanguagE