TecInternetII AV1 Revisao resolvido

Prévia do material em texto

TEC. INTERNET II – REVISÃO – AV1 - RESOLVIDO 
 
TODAS as questões se referem ao código abaixo: 
 
 
 
 
 
 
 
 
 
 
 
 
 
1) O que foi feito entre as linhas 6 e 10? 
 
Foi feita a estilização da página com CSS. Foi aplicada a cor de fundo vermelha à classe ‘y’. 
 
 
2) Quantas linhas possui o formulário renderizado? 
 
O formulário possui 4 linhas. É possível concluir através das 3 tags <br> presentes no formulário. 
 
 
 
 
 
 
 
 
3) Desenhe o formulário. Só digite o código ao final, para verificar se você acertou. 
 
 
 
 
4) Quantas linhas possui a tabela renderizada? 
 
A tabela possui 5 linhas, sendo uma linha com o título e quatro linhas de dados. 
 
 
5) Quantas colunas possui a tabela renderizada? 
 
A tabela possui 3 colunas: E, M e P 
 
 
6) Quantos filhos diretos a tabela possui? 
 
A tabela possui 2 filhos diretos: <thead> e <tbody> 
 
 
7) Quantos filhos diretos o elemento <tbody> possui? 
 
O elemento <tbody> possui 4 filhos diretos, que são os quatro registros de dados. 
 
 
8) Diferencie <thead> de <tbody>. 
 
Apesar de não possuírem diferenças visuais, <thead> e <tbody> são diferentes semanticamente, ou 
seja, possuem significados diferentes em relação ao conteúdo. A utilização de <thead> e <tbody> para 
diferenciar título e dados da tabela, respectivamente, é uma boa prática. Deficientes visuais e robôs de 
busca “entendem” melhor a informação dessa forma. 
 
 
 
9) Desenhe a tabela. Só digite o código ao final, para verificar se você acertou. 
 
 
 
 
10) Diferencie classe de id (CSS). 
 
Em CSS, classes são utilizadas para estilizar um grupo de elementos de forma semelhante. Assim, uma 
definição de classe pode e deve ser aplicada a diferentes elementos. Já os id’s têm o propósito de 
serem únicos. Apesar da página aceitar o mesmo id para diferentes elementos, isso deve ser evitado. 
Id’s devem ser aplicados em apenas um elemento. 
 
 
11) O que significa o código da linha 70? 
 
O código da linha 70 adiciona uma função (f1) o evento ‘load’ (onload) ao objeto window. Isso significa 
que, assim que a página terminar de ser carregada (loaded), o JavaScript irá executar a função f1. 
 
 
12) O que é feito entre as linhas 87 e 89? 
 
É feita a clonagem da última linha da tabela (o primeiro lastElementChild obtém o <tbody> e o segundo 
lastElementChild obtém o último <tr> da tabela). Os dados da clonagem são armazenados na variável n. 
 
 
 
 
 
 
 
 
 
13) O que faz a função f1()? 
 
É feita a atribuição de eventos a dois elementos da página: 
 
1. Evento click no elemento cujo id é ‘bt1’, que quando clicado executará a função f2() 
2. Evento click no elemento cujo id é ‘cb1’, que quando clicado executará a função f3() 
 
 
14) O que faz a função f2()? 
 
Cria uma nova linha na tabela, através das seguintes etapas: 
 
1. São obtidos os dados do formulário, onde cada dado é armazenado em uma variável distinta 
2. É feita a clonagem da última linha de dados da tabela 
3. Os dados da linha clonada são substituídos pelos dados das variáveis (vindas do formulário) 
4. Por fim, é feita a inserção da linha recém-preenchida na tabela 
 
 
15) O que faz a função f3()? 
 
Esta função pinta ou retira a cor de fundo vermelha (definida em CSS) da tabela, conforme a marcação 
do checkbox do formulário. 
 
 
16) Reescreva todo o código, modificando os identificadores para valores mais apropriados. 
 
Verifique o código-fonte disponibilizado juntamente com este exercício.