Revisão FrontEnd

FrontEnd - Bangu Lista de Exercícios
1) O que representa cada tipo primitivo de dados abaixo?

a) Float
b) Integer
c) Double
d) Boolean
e) String
Float: Armazena números fracionados com precisão de 6 à 7 dígitos decimais
Integer: Armazena valores numéricos negativo ou positivo sem casa decimal, ou
seja, valores inteiros.
Double: Armazena números fracionados com uma precisão de 15 pontos
decimais
Boolean: Armazena valores booleanos, assumindo apenas dois estados,
VERDADEIRO ou FALSO. Pode ser representado apenas um bit (que aceita
apenas 1 ou 0).
String: Armazena qualquer tipo de caracteres.
2) Qual a diferença entre HTML, CSS e JavaScript?

HTML é uma linguagem de marcação usada para para criar toda a estrutura da
página.
CSS é uma é uma linguagem de estilos usada para separar a parte estrutural da
aplicação (HTML) da parte estética.
JavaScript é uma linguagem de programação usada para adicionar
funcionalidades, movimento às páginas web, além de permitir o processamento e
transformação de dados enviados e recebidos.
3) Descreva a finalidade de cada elemento semântico HTML5 abaixo:

<main> representa o conteúdo principal do corpo.
<footer> define um rodapé para a página.
<nav> define um conteúdo de navegação.
<header> define um cabeçalho para a página.
<aside> representam uma seção de uma página cujo conteúdo é tangencialmente

relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do
conteúdo.
<input> possui o atributo type, que varia entre diversos tipos e utilizada para
entrada de dados.
<h1> representa o título principal.
<p> Principal tag de texto, compõe um parágrafo.
<head> delimita o cabeçalho do documento.
<body> representa o corpo do documento.
<meta> permite inserir metadados ao seu documento.
<pre> utilizada para representar texto pré-formatado. Muito utilizada para inserir
códigos.
<form> tag de formulário utilizada para obter informações do usuário.
<article> define um artigo da sua página. Nesse sentido, são utilizadas para separar
o conteúdo da sua página.
<section> define uma sessão para a página.
4) Considere o fragmento de código HTML5, abaixo:
5) Se a tag header de classe “topo”, for estilizada com propriedades CSS,

como será a exibição em cada uma das propriedades abaixo:
➢ display:inline – As divs internas se posicionam uma ao lado da outra.
➢ float:left – As divs internas se posicionam à esquerda.
➢ display:flex – A div slogan se posiciona acima da div logo.
➢ position:relative – A div slogan se posiciona abaixo da div logo.
➢ display:block – As divs internas se posicionam uma abaixo da outra.
Obs. Seria interessante fazer um teste na prática com cada uma dessas
propriedades separadamente para ver como se comportariam nesse código! Mas
está certa a resposta!!
6) Qual o significado de cada fragmento de comando abaixo:
➢ document: é o objeto que representa o próprio documento HTML.

➢ getElementById: permite obter um elemento do documento a partir de seu
atributo ID especificado.
➢ value: serve para obter o valor do campo de input.
➢ checked: serve para obter o valor do campo de input do tipo checkbox.
7) No Javascript, qual a sintaxe básica de uma estrutura condicional?

if ( condição ) {
//execução do bloco
} else {
//execução do bloco
}
8) No Javascript, qual a sintaxe básica do comando for?
for ([inicialização]; [condição]; [expressão final]) {
// execução do bloco
}
9) No Javascript, qual a sintaxe básica da declaração de uma variável?

const sum = 0;
let sum1 = 0;
var sum2 = 0;
10) No Javascript, qual a diferença entre as funções alert e prompt?

Alert é usado para mostrar uma caixa de alerta (diálogo) e um botão de OK.
Prompt é usado para abrir uma caixa de diálogo para entrada de dados.
11) Considere o seguinte trecho de código em Javascript:
var sum = 0;
for (var number = 2; number < 100;
number +=2) sum+=number;
Após a execução do código, o que será armazenado na variável sum?

Será armazenado a soma dos números pares de 2 a 98 através de uma estrutura de
repetição.
Obs. Qual o resultado armazenado na variável sum?
12) Descreva se o uso de jQuery influencia no tempo de processamento do

programa.
????
Sim influencia, apesar da sintaxe ser mais simplificada, ele precisa utilizar
consultar uma biblioteca de Javascript que éadicionada ao código.
13) Cite as vantagens na utilização do jQuery?
Adiciona scripts e outros elementos dinâmicos, como animações;
Reduz códigos em JavaScript;
Cria uma sintaxe mais fluida;
Aumenta a compatibilidade entre códigos e navegadores;
Orienta a inspeção e a manipulação de documentos em HTML, XML ou XHTML;
Trabalha com AJAX;
Garante compatibilidade aos plugins criados por outros desenvolvedores.
14) Avalie o seguinte código CSS3:
???
Aqui devem ser descritos a finalidade de cada uma das propriedades configuradas para a classe “titulo_pagina”. E
qual seria a finalidade desta formatação deste estilo na classe.
15) O que é e para que serve o DOM?

O DOM (Document Object Model) é a representação de dados dos objetos que
compõem a estrutura e o conteúdo de um documento na Web.
Serve para conectar o Javascript com HTML.
16) Com relação a desenvolvimento FrontEnd e BackEnd, como podem ser

desenvolvidos os programas na linguagem de programação JavaScript?
Os programas são desenvolvidos através de códigos, comandos, ferramentas,
funções.
Nesta questão deve se ter a conhecimento de que a linguagem Javascript pode ser
usada tanto para o BackEnd quanto para o Front-end.
No frontend, JavaScript é usado para criar interatividade dinâmica nas páginas da
web. No backend, através do Node.js, pode ser usado para construir regras de
negócio no lado dos servidores e acessar bancos de dados.
17) Qual a finalidade da responsividade no desenvolvimento de aplicações Web?
Um site responsivo é aquele projetado para se adaptar a qualquer tipo de

resolução, sem distorções. O design responsivo identifica a largura de cada
dispositivo, o espaço disponível e como a página será apresentada. Ele também
ajusta dimensões das imagens, das fontes e dos demais elementos para não ficarem
desproporcionais.
18) Qual a diferença entre os conceitos de Media types e Media queries no que
se refere ao desenvolvimento de páginas Web?
Um media type é uma categoria ampla de dispositivos user-agent nos quais um

documento pode ser exibido. O conjunto original de tipos de mídia foi definido
em HTML4, para o atributo media nos elementos <link>.
Uma media query consiste em uma consulta (query) que testa por medias e
features, ou seja, é uma consulta que testa o meio e as características desse meio
para, condicionalmente, aplicar determinados estilos.
19) Qual a sintaxe e a finalidade da propriedade position do CSS?
Define como um elemento pode ser posicionado (renderizado) no documento

(página).
position: (static, fixed, sticky, relative ou absolute);
20) No CSS qual a diferença na utilização dos caracteres # (Hashtag) e .

(ponto)?
O # (hashtag) é utilizado para identificar Ids enquanto o . (ponto) é utilizado pra

identificar classes.
21) Qual a diferença das propriedades getElementsByTagName,

getElementsById e getElementsByName e getElementsByClassName?
getElementsByTagName permite obter um elemento do documento a partir de sua

tag especificado.
getElementsById permite obter um elemento do documento a partir de seu

atributo ID especificado.
getElementsByName permite obter um elemento do documento a partir de seu

atributo de nome especificado.
getElementsByClassName permite obter um elemento do documento a partir de

seu atributo de classe especificado.
22) Represente como seria estilizar cor e tamanho da fonte da tag h1, utilizando
CSS inline:
<h1 style=”color: #000; font-size: 20px;”> Texto </h1>
23) Qual a diferença entre requisitos funcionais e não funcionais de software?

Dê exemplos:
Um requisito funcional se refere a uma funcionalidade específica do sistema, ou

seja, uma ação que o sistema deve ser capaz de realizar.
Ex: O ChatGPT deve ser capaz de responder a perguntas e fornecer informações

relevantes aos usuários.
Já um requisito não funcional se refere a uma característica ou qualidade do

sistema, como desempenho, segurança, usabilidade, confiabilidade, etc.
Ex: O ChatGPT deve ser fácil de usar e oferecer uma experiência agradável ao
usuário.
24) Em relação a linguagem para elaboração da estrutura de projetos de

software, a UML (ou Unified Modeling Language), quando utilizado o Use Case,
ou Caso de Uso, o que significa cada uma das nomenclaturas abaixo:
➢ <<extend>> - Quando o caso de uso B estende o caso de uso A, significa que

quando o caso de uso A for executado o caso de uso B poderá (poderá – talvez
não seja) ser executado também. A direção do relacionamento é do caso de uso
extensor (aqui o caso de uso B) para o caso de uso estendido (aqui o caso de
uso A).
➢ <<include>> - Quando o caso de uso A “inclui” o caso de uso B, significa que

sempre que o caso de uso A for executado o caso de uso B também será
executado. A direção do relacionamento é do caso de uso que está incluindo
para o caso de uso incluído.
➢ <<generalize>> - Quando o caso de uso B generaliza o caso de uso C isso

significa que, além de fazer tudo que nele está especificado (ele = B), ele
também executará tudo que está especificado no caso de uso C.
Complementando: o B herda comportamentos e características do C.
➢ <<enumeration>> - são elementos do modelo em diagramas de classes que

representam tipos de dados definidos pelo usuário. As enumerações contêm
conjuntos de identificadores nomeados que representam os valores da
enumeração.

Revisão FrontEnd

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Revisão FrontEnd

Enviado por

Direitos autorais:

Formatos disponíveis

FrontEnd - Bangu Lista de Exercícios

1) O que representa cada tipo primitivo de dados abaixo?

2) Qual a diferença entre HTML, CSS e JavaScript?

3) Descreva a finalidade de cada elemento semântico HTML5 abaixo:

<footer> define um rodapé para a página.

<nav> define um conteúdo de navegação.

<header> define um cabeçalho para a página.

<aside> representam uma seção de uma página cujo conteúdo é tangencialmente

<h1> representa o título principal.

<p> Principal tag de texto, compõe um parágrafo.

<head> delimita o cabeçalho do documento.

<body> representa o corpo do documento.

<meta> permite inserir metadados ao seu documento.

<form> tag de formulário utilizada para obter informações do usuário.

<section> define uma sessão para a página.

4) Considere o fragmento de código HTML5, abaixo:

5) Se a tag header de classe “topo”, for estilizada com propriedades CSS,

6) Qual o significado de cada fragmento de comando abaixo:

➢ document: é o objeto que representa o próprio documento HTML.

7) No Javascript, qual a sintaxe básica de uma estrutura condicional?

9) No Javascript, qual a sintaxe básica da declaração de uma variável?

10) No Javascript, qual a diferença entre as funções alert e prompt?

Após a execução do código, o que será armazenado na variável sum?

Obs. Qual o resultado armazenado na variável sum?

12) Descreva se o uso de jQuery influencia no tempo de processamento do

13) Cite as vantagens na utilização do jQuery?

Adiciona scripts e outros elementos dinâmicos, como animações;

Reduz códigos em JavaScript;

Cria uma sintaxe mais fluida;

Aumenta a compatibilidade entre códigos e navegadores;

Orienta a inspeção e a manipulação de documentos em HTML, XML ou XHTML;

Trabalha com AJAX;

Garante compatibilidade aos plugins criados por outros desenvolvedores.

14) Avalie o seguinte código CSS3:

15) O que é e para que serve o DOM?

16) Com relação a desenvolvimento FrontEnd e BackEnd, como podem ser

17) Qual a finalidade da responsividade no desenvolvimento de aplicações Web?

Um site responsivo é aquele projetado para se adaptar a qualquer tipo de

Um media type é uma categoria ampla de dispositivos user-agent nos quais um

19) Qual a sintaxe e a finalidade da propriedade position do CSS?

Define como um elemento pode ser posicionado (renderizado) no documento

position: (static, fixed, sticky, relative ou absolute);

20) No CSS qual a diferença na utilização dos caracteres # (Hashtag) e .

O # (hashtag) é utilizado para identificar Ids enquanto o . (ponto) é utilizado pra

21) Qual a diferença das propriedades getElementsByTagName,

getElementsByTagName permite obter um elemento do documento a partir de sua

getElementsById permite obter um elemento do documento a partir de seu

getElementsByName permite obter um elemento do documento a partir de seu

getElementsByClassName permite obter um elemento do documento a partir de

<h1 style=”color: #000; font-size: 20px;”> Texto </h1>

23) Qual a diferença entre requisitos funcionais e não funcionais de software?

Um requisito funcional se refere a uma funcionalidade específica do sistema, ou

Ex: O ChatGPT deve ser capaz de responder a perguntas e fornecer informações

Já um requisito não funcional se refere a uma característica ou qualidade do

24) Em relação a linguagem para elaboração da estrutura de projetos de

➢ <<extend>> - Quando o caso de uso B estende o caso de uso A, significa que

➢ <<include>> - Quando o caso de uso A “inclui” o caso de uso B, significa que

➢ <<generalize>> - Quando o caso de uso B generaliza o caso de uso C isso

➢ <<enumeration>> - são elementos do modelo em diagramas de classes que

Você também pode gostar