# Exercícios de Exame

Questões de exames antigos de Linguagens e Tecnologias Web, com resolução.

Página: https://resumos.rgo.pt/cadeiras/ltw/exercicios-exame/

## HTML e CSS

Significado do seletor \`header h1, h2\`

Exame, 2016/17

Que elementos seleciona o seguinte seletor CSS?

```css
header h1, h2 { ... }
```

Solução

Seleciona os elementos `h1` dentro de um `header` e todos os elementos `h2` do documento.

A vírgula funciona como um "ou": a regra aplica-se à união dos conjuntos definidos por `header h1` e por `h2`.

*   **Elementos h1 e h2 dentro de um header..** A vírgula separa dois seletores independentes; o segundo, `h2`, não está limitado ao header.
*   **Elementos h1 dentro de um header e qualquer elemento h2..** `header h1` seleciona h1 descendentes de header e `h2` seleciona todos os h2 do documento.
*   **Elementos h1, h2 e header..** O seletor não inclui o próprio header.
*   **Nunca seleciona nenhum elemento..** Ambos os seletores são válidos e podem corresponder a elementos.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/css-estilo-layout/#seletores)

Especificidade e cor de um conjunto de regras CSS

Exame, 2015/16

Considere o seguinte código HTML:

```html
<div class="post" id="first">
  <div class="header">
    <h1>Title</h1>
  </div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <div class="footer">
    <p>This is a footer</p>
  </div>
</div>
```

E o seguinte código CSS:

```css
#first div { color: blue; }                /* R1 */
div .header { color: magenta; }            /* R2 */
p + p + div:first-child { color: red; }    /* R3 */
h1 { color: green; }                       /* R4 */
div + p { color: cyan; }                   /* R5 */
p { color: yellow; }                       /* R6 */
```

(a) Indique a especificidade de cada regra, no formato (estilo inline, id, classe, tipo), por exemplo 0,2,2,1.

(b) Considerando apenas as regras de R1 a R3, indique a cor de cada um dos textos: Title, First paragraph, Second paragraph e This is a footer.

(c) Considerando todas as regras, indique a cor de cada um desses textos.

Solução

(a) R1: 0,1,0,1; R2: 0,0,1,1; R3: 0,0,1,3; R4: 0,0,0,1; R5: 0,0,0,2; R6: 0,0,0,1.

(b) R1 aplica-se às duas divs internas e vence R2 (mais específica), pelo que Title e o rodapé herdam azul. Nenhum seletor de R1 a R3 corresponde aos parágrafos, logo ficam pretos.

(c) Title fica verde por R4 (regra direta sobre o h1 vence a herança). O primeiro parágrafo fica ciano porque R5 (0,0,0,2) vence R6 (0,0,0,1). O segundo parágrafo e o texto do rodapé ficam amarelos por R6.

A specificity de R3 conta a pseudoclasse :first-child como classe e os três tipos p, p, div. A cor é herdada, mas uma regra que corresponda diretamente ao elemento vence sempre a herança; entre regras diretas vence a de maior specificity e, em caso de empate, a última.

Confere a tua resposta:

*   As spécificités são R1 0,1,0,1; R2 0,0,1,1; R3 0,0,1,3; R4 0,0,0,1; R5 0,0,0,2; R6 0,0,0,1.
*   Com apenas R1 a R3: Title e o texto do rodapé ficam azuis; os dois parágrafos ficam com a cor predefinida (preto).
*   Com todas as regras: Title verde, primeiro parágrafo ciano, segundo parágrafo amarelo e rodapé amarelo.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/css-estilo-layout/#cascata-e-heran%C3%A7a)

Seletor do título do primeiro artigo com classe featured

Exame de recurso, 2016/17

Que seletor CSS se deve usar para selecionar o título (h2) do primeiro artigo com a classe `featured`?

Solução

`article.featured:first-child h2 { ... }`.

A pseudoclasse `:first-child` tem de ficar junto do elemento a que se refere (o article com a classe featured), e o h2 é um descendente desse article.

*   **`article.featured :first-child h2 { ... }`.** A pseudoclasse aplicava-se a um elemento dentro do article, não ao próprio article.
*   **`article.featured h2:first-child { ... }`.** Seleciona o h2 apenas se este for o primeiro filho dentro do article featured.
*   **`article:first-child .featured h2 { ... }`.** Seleciona h2 dentro de um elemento .featured que esteja dentro do primeiro article.
*   **`article.featured:first-child h2 { ... }`.** Seleciona o h2 dentro de um article com a classe featured que seja o primeiro filho do seu pai, ou seja, o título do primeiro artigo featured.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/css-estilo-layout/#seletores)

## JavaScript e DOM

Comportamento de \`$("a").click(say("Hello"))\`

Exame, 2015/16

Assuma que o seguinte código jQuery se encontra definido dentro do evento ready de um documento HTML. Indique qual o comportamento esperado:

```js
$('a').click(say('Hello'));

function say(message) {
  alert(message);
}
```

Solução

É mostrado um alerta com a mensagem Hello assim que a página carrega.

Os argumentos de `.click()` são avaliados antes da chamada, pelo que a função say corre logo durante o registo do handler. Para adiar a execução, passa-se a referência da função sem a invocar.

*   **É mostrado um alerta com a mensagem Hello assim que a página carrega..** `say("Hello")` é invocada imediatamente durante o registo do handler; o valor retornado (undefined) é o que fica associado ao click.
*   **É mostrado um alerta com a mensagem Hello quando se carrega num link..** Para isso era preciso passar a função sem a invocar: `$("a").click(say)` ou usar uma função anónima.
*   **Não acontece nada..** A função say chega a ser executada, embora na altura errada.
*   **A página não carrega..** O código não lança erros; apenas produz o alerta demasiado cedo.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/javascript-dom-eventos/#guardar-a-fun%C3%A7%C3%A3o-que-foi-registada)

A palavra-chave \`this\` em JavaScript

Exame, 2016/17

Em JavaScript, a palavra-chave `this` refere-se sempre...

Solução

Ao contexto de execução.

O valor de `this` não é fixo: numa função simples é o objeto global (ou undefined em modo estrito), num método é o objeto recetor, num handler de evento é o elemento.

*   **Ao objeto atual..** Nem sempre: em funções normais, `this` depende de como a função é chamada.
*   **A um objeto que representa o documento..** Isso acontece apenas em handlers de eventos do DOM.
*   **A um objeto que representa o browser..** `window` representa o browser, não `this`.
*   **Ao contexto de execução..** `this` é determinado pelo contexto em que o código corre (global, função, método, evento).

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/javascript-dom-eventos/#objetos-this-e-prot%C3%B3tipos)

Incrementar quantidades e enviar o total por Ajax

Exame, 2016/17

Considere o seguinte excerto HTML (podem existir outros elementos ul, li e a no documento):

```html
<div id="products">
  <ul>
    <li>Apple: <span class="qty">3</span> <a href="#">+</a></li>
    <li>Banana: <span class="qty">5</span> <a href="#">+</a></li>
    <li>Pear: <span class="qty">6</span> <a href="#">+</a></li>
  </ul>
  <a href="#" class="buy">Buy</a>
  <p class="total">0</p>
</div>
```

Escreva o código jQuery necessário para que:

(a) Quando o link no final de cada linha seja clicado, a quantidade nessa linha seja incrementada uma unidade.

(b) Quando o link com a classe buy seja clicado, seja enviado, num pedido Ajax do tipo POST para o endereço calculatetotal.php, um array products com a lista de produtos e as suas quantidades, por exemplo \[{"name":"Apple","qty":3},{"name":"Banana","qty":5},{"name":"Pear","qty":6}\]. Quando o resultado for recebido, o texto do parágrafo total deve ser substituído pelo valor retornado, ou por "not enough stock" caso esse valor seja menor do que 0.

Solução

```js
$('#products ul li a').click(function () {
  const qty = $(this).closest('li').find('.qty');
  qty.text(parseInt(qty.text(), 10) + 1);
});

$('#products a.buy').click(function () {
  const products = [];
  $('#products ul li').each(function () {
    const li = $(this);
    products.push({
      name: li.contents().first().text().trim().replace(/:$/, ''),
      qty: parseInt(li.find('.qty').text(), 10),
    });
  });
  $.post('calculatetotal.php', { products: products }, function (total) {
    $('.total').text(total < 0 ? 'not enough stock' : total);
  });
});
```

Em (a), o link está dentro do li, pelo que o encadeamento closest mais find isola a quantidade da linha certa. Em (b), o método each percorre as linhas para montar o array no formato pedido e a callback do POST atualiza o total conforme o valor recebido.

Confere a tua resposta:

*   O handler do link "+" seleciona o span.qty da mesma linha (por exemplo com .closest("li").find(".qty")) e incrementa o valor.
*   O handler do link .buy percorre os li, constrói o array products com name e qty e envia o POST com esse array.
*   Na resposta, o texto de .total é atualizado para o valor retornado ou para "not enough stock" quando o valor é inferior a 0.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/http-ajax-json/#json-e-fetch)

## HTTP, Ajax e JSON

Porque é que o HTTP é um protocolo stateless

Exame, 2014/15

Explique sucintamente o que queremos dizer quando dizemos que o protocolo HTTP é um protocolo stateless.

Solução

Stateless significa que cada pedido HTTP é autossuficiente: o servidor não associa pedidos consecutivos ao mesmo utilizador, nem guarda estado entre eles. Quem mantém o estado (por exemplo via cookies de sessão) é o cliente, reenviando-o em cada pedido.

Sem estado no servidor, qualquer servidor pode responder a qualquer pedido, o que facilita a escalabilidade; o preço é que a aplicação tem de transportar o estado relevante em cada mensagem.

Confere a tua resposta:

*   Cada pedido é tratado de forma independente, sem memória de pedidos anteriores.
*   O servidor não guarda, por si, estado entre pedidos do mesmo cliente.
*   O estado tem de ser mantido pelo cliente, por exemplo em cookies ou numa sessão.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/http-ajax-json/#ler-mensagens)

Como são enviadas as cookies no protocolo HTTP

Exame, 2015/16

No protocolo HTTP, como são enviadas as cookies?

Solução

Num header HTTP (Cookie no pedido, Set-Cookie na resposta).

As cookies são um mecanismo de transporte nos cabeçalhos da mensagem HTTP, não no corpo nem no URL.

*   **Numa resposta AJAX usando JSON..** AJAX e JSON são do lado do cliente; as cookies viajam nos cabeçalhos.
*   **Na barra de endereços do browser..** O URL não transporta cookies.
*   **Ficam guardadas no servidor..** As cookies ficam no browser; o servidor guarda apenas o identificador da sessão.
*   **Num header HTTP..** O browser envia `Cookie` nos pedidos e o servidor responde com `Set-Cookie`.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/http-ajax-json/#estados-cookies-e-cache)

O que garante um URL que começa por https://

Exame de recurso, 2016/17

Ao navegar para um site cujo URL começa por https:// temos sempre a certeza de que...

Solução

A comunicação é cifrada.

https:// = HTTP sobre TLS: os dados trocados entre cliente e servidor vão cifrados, protegendo contra escutas na rede.

*   **Não está a existir um ataque do tipo Man in the Middle..** HTTPS cifra a comunicação, mas não protege de todos os ataques possíveis.
*   **O servidor usa a versão 2.0 do protocolo HTTP..** https:// indica TLS sobre HTTP, não uma versão específica do protocolo.
*   **A comunicação é cifrada..** O "s" indica que a ligação usa TLS, garantindo confidencialidade e integridade.
*   **A versão do HTML é superior a 4..** O esquema do URL não diz nada sobre a versão do HTML servido.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/seguranca-web/#https-e-revis%C3%A3o-de-uma-a%C3%A7%C3%A3o)

## Segurança web

Vulnerabilidade explorada com script num parâmetro do pedido

Exame, 2014/15

Ao examinar os logs do servidor, um administrador de sistemas reparou no seguinte pedido HTTP:

```
post_comment.php?title=&body=<script>window.onload = function() {var link=document.getElementsByTagName("a");link[0].href="http://do-something.com/";}</script>
```

Que tipo de vulnerabilidade estava a ser explorada?

Solução

Cross-Site Scripting (XSS).

O parâmetro body contém código JavaScript. Se a página o présenter sem escapar no contexto HTML, o script executa no browser de quem vê o comentário, podendo roubar cookies ou alterar a página.

*   **Cross-Site Scripting.** O atacante injeta JavaScript num parâmetro; se o servidor o devolver sem escapar, o script corre no browser da vítima.
*   **SQL Injection.** Não há aqui alteração da sintaxe de uma consulta SQL.
*   **Javascript Vulnerability.** O problema não está na linguagem, mas na falta de validação/escapamento da entrada.
*   **Cross-Site Request Forgery.** CSRF engana o utilizador para enviar um pedido que ele não queria; aqui o pedido é assumido como legítimo.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/seguranca-web/#xss-e-contexto-de-sa%C3%ADda)

Como prevenir um ataque de Cross-Site Request Forgery

Exame, 2015/16

Qual a forma correta de prevenir um ataque do tipo Cross-Site Request Forgery?

Solução

Usar um token de segurança diferente para cada sessão (token anti-CSRF).

O ataque funciona porque o browser envia automaticamente as cookies de sessão. Um token que só o servidor original conhece, devolvido no formulário e validado no envio, impede que um pedido de outro site seja aceite.

*   **Usar sempre formulários do tipo POST..** POST por si só não impede que outro site envie um pedido forjado.
*   **Fazer os pedidos usando AJAX..** Um pedido AJAX também pode ser disparado por um site malicioso.
*   **Usar um token de segurança diferente para cada sessão..** O token (único por sessão e imprevisível) é incluído no formulário e verificado no servidor; um site externo não o conhece.
*   **Ter sempre um diálogo de confirmação..** Ajuda contra cliques acidentais, não contra pedidos forjados automáticos.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/seguranca-web/#csrf)

Ataque prevenido ao usar salts diferentes para cada password

Exame, 2014/15

Uma password deve ser sempre cifrada usando um algoritmo de hash seguro. Que tipo de ataque é prevenido ao usar salts diferentes para cada password?

Solução

Rainbow Tables.

Sem salt, duas passwords iguais produisent o mesmo hash, o que permite tablas pré-calculadas. Com um salt aleatório por utilizador, cada hash é distinto e essas tabelas falham; além disso, é preciso calcular um hash por entrada.

*   **Man in the Middle Attack.** Isso previne-se com cifras na comunicação (TLS), não com salts.
*   **Rainbow Tables.** O salt torna cada hash único, pelo que tabelas pré-calculadas de hashes (rainbow tables) deixam de servir.
*   **Brute Force.** A força bruta continua possível; o que se usa contra ela é um hash lento.
*   **Dictionary Attack.** O salt também dificulta dicionários por utilizador, mas o ataque diretamente visado pelas rainbow tables é esse.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/seguranca-web/#palavras-passe-e-sess%C3%A3o)

Ataque de Session Fixation

Exame, 2016/17

Um ataque do tipo Session Fixation consiste em...

Solução

Forçar uma certa cookie de sessão a um utilizador.

Na fixation, o atacante consegue que a vítima use um session id à sua escolha (por exemplo num link). Depois de a vítima iniciar sessão, o atacante entra com o mesmo id. A defesa passa por regenerar o id no login.

*   **Decorar e copiar a cookie de sessão de um utilizador..** Isso descreve antes o session hijacking por cópia da cookie.
*   **Roubar uma cookie de sessão enviada de forma insegura..** Isso é session hijacking por interceção na rede.
*   **Tirar partido de cookies não cifradas..** Relaciona-se com cookies em claro, não com fixation.
*   **Forçar uma certa cookie de sessão a um utilizador..** O atacante fixa um identificador de sessão conhecido na vítima; se esta autenticar com ele, o atacante reutiliza a sessão.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/seguranca-web/#autentica%C3%A7%C3%A3o-e-autoriza%C3%A7%C3%A3o)

## Expressões regulares

Primeiro match de seis expressões regulares

Exame, 2016/17

Considere a seguinte string:

```
Washing the washing machine while watching the washing machine washing washing
```

Para cada uma das expressões regulares seguintes, indique qual o primeiro match (a substring encontrada, da esquerda para a direita):

(a) /wa.\*ing/

(b) /\[a-z\]{3}\\b/

(c) /(ing).\*?\\1/

(d) /^.{3}/

(e) /(sh|ch)(?!ing)/

(f) /(.+?).\*?\\1/

Solução

(a) /wa._ing/ → "washing the washing machine while watching the washing machine washing washing" (o primeiro "wa" minúsculo até ao último "ing", porque ._ é guloso).

(b) /\[a-z\]{3}\\b/ → "ing" (as três primeiras letras minúsculas seguidas de fronteira de palavra são o "ing" final de "Washing").

(c) /(ing)._?\\1/ → "ing the washing" (o primeiro "ing" é o de "Washing"; o ._? preguiçoso para no "ing" seguinte, em "washing").

(d) /^.{3}/ → "Was" (os três primeiros caracteres).

(e) /(sh|ch)(?!ing)/ → "ch" de "machine" (os "sh" de "Washing", "washing" e "watching" estão seguidos de "ing" e são rejeitados pelo lookahead negativo).

(f) /(.+?).\*?\\1/ → "ashing the wa" (não há outro "W" maiúsculo, pelo que o match começa no "a" seguinte; o grupo captura "a" e volta a encontrar "a" no "wa" de "washing").

O motor de expressões regulares testa da esquerda para a direita e, dentro de cada posição, respeita a Guloso/preguiça dos quantificadores: .\* avança o mais possível, .\*? o menos possível, e os lookarounds filtram sem consumir caracteres.

Confere a tua resposta:

*   (a) "washing the washing machine while watching the washing machine washing washing".
*   (b) "ing" (de "Washing").
*   (c) "ing the washing".
*   (d) "Was".
*   (e) "ch" (de "machine").
*   (f) "ashing the wa".

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/expressoes-regulares/#guloso-pregui%C3%A7oso-e-primeiro-resultado)

Primeiro match de seis expressões regulares (2016)

Exame, 2015/16

Considere a seguinte string:

```
When you write copy you have the right to copyright the copy you write
```

Para cada uma das expressões regulares seguintes, indique qual o primeiro match:

(a) /copy.\*right/

(b) /\[write\]/

(c) /(\\w{4}).\*\\1/

(d) /write$/

(e) /(ri|py)(?!t)/

(f) /(\\w{3,}?).\*?\\1/

Solução

(a) /copy.\*right/ → "copy you have the right to copyright" (do primeiro "copy" até ao último "right", que está dentro de "copyright").

(b) /\[write\]/ → "e" (a classe contém os caracteres w, r, i, t, e; o primeiro que aparece na string é o "e" de "When").

(c) /(\\w{4}).\*\\1/ → "write copy you have the right to copyright the copy you writ" ("When" não se repete; o primeiro grupo de 4 letras que volta a aparecer é "writ", no "write" final).

(d) /write$/ → "write" (a última ocorrência, presa ao fim da string).

(e) /(ri|py)(?!t)/ → "py" de "copy" (o "ri" de "write" está seguido de "t" e é rejeitado; "py" está seguido de espaço).

(f) /(\\w{3,}?).\*?\\1/ → "write copy you have the right to copyright the copy you writ" (igual a (c): o grupo preguiçoso "wri" repete-se no "write" final).

Em (b), a classe de caracteres não é a palavra "write". Em (c) e (f), a captura tem de começar na primeira posição em que o texto capturado volte a surgir mais à frente; como "When" é único, o match começa em "writ".

Confere a tua resposta:

*   (a) "copy you have the right to copyright".
*   (b) "e" (a terceira letra de "When").
*   (c) "write copy you have the right to copyright the copy you writ".
*   (d) "write" (a última palavra da string).
*   (e) "py" (de "copy").
*   (f) "write copy you have the right to copyright the copy you writ".

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/expressoes-regulares/#guloso-pregui%C3%A7oso-e-primeiro-resultado)

## XML e XPath

Expressões XPath sobre um documento de autores

Exame, 2016/17

Considere o seguinte documento XML (o nó de contexto é a raiz do documento):

```xml
<authors>
  <author country="Spain" name="Miguel de Cervantes">
    <book year="1605" type="Novel">Don Quixote</book>
  </author>
  <author country="England" name="William Shakespeare">
    <book year="1599" type="Tragedy">Hamlet</book>
    <book year="1606" type="Tragedy">Macbeth</book>
  </author>
  <author country="Russia" name="Leo Tolstoy">
    <book year="1865" type="Novel">War and Peace</book>
  </author>
  <author country="Portugal" name="Jose Saramago">
    <book year="1995" type="Novel">Ensaio sobre a Cegueira</book>
    <book year="1997" type="Novel">Todos os Nomes</book>
  </author>
</authors>
```

Escreva as expressões XPath que selecionam:

(a) O nome de todos os autores.

(b) O título dos livros do tipo Novel.

(c) O nome dos autores que escreveram mais do que um livro.

(d) O país do autor do livro "Ensaio sobre a Cegueira".

Solução

(a) `//author/@name`

(b) `//book[@type='Novel']` (devolve os elementos; o texto dos títulos fica em `//book[@type='Novel']/text()`)

(c) `//author[count(book) > 1]/@name`

(d) `//author[book = 'Ensaio sobre a Cegueira']/@country` (devolve "Portugal")

Os atributos selecionam-se com @ e os predicados com \[\]; count(book) > 1 filtra os autores com mais de um elemento book filho, e a comparação book = "..." compara o conteúdo do elemento filho com o texto indicado.

Confere a tua resposta:

*   (a) //author/@name.
*   (b) //book\[@type="Novel"\] (ou o seu texto).
*   (c) //author\[count(book) > 1\]/@name.
*   (d) //author\[book = "Ensaio sobre a Cegueira"\]/@country.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/xml-xpath/#caminhos-xpath)

Nós selecionados pela expressão \`.//person/job\`

Exame, 2015/16

Explique sucintamente quais os nós que são selecionados pela seguinte expressão XPath: `.//person/job`

Solução

Seleciona todos os elementos `job` filhos de qualquer elemento `person` que seja descendente do nó de contexto (a qualquer profundidade).

`.` é o nó de contexto, `//person` apanha todos os person abaixo dele e `/job` os seus filhos diretos do tipo job.

Confere a tua resposta:

*   `//` seleciona descendentes do nó de contexto a qualquer profundidade.
*   A expressão seleciona todos os elementos job que são filhos de um elemento person descendente do nó de contexto.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/xml-xpath/#caminhos-xpath)

Texto num complexType de XSD

Exame, 2015/16

Em XSD, um complexType pode conter texto?

Solução

Sim, desde que o atributo mixed tenha o valor true.

Num complexType, o conteúdo misto (texto e elementos) só é permitido quando mixed="true"; caso contrário, o conteúdo limita-se aos elementos declarados.

*   **Sim, desde que não contenha outros elementos XML..** Isso descreve um simpleType com conteúdo de texto.
*   **Sim, desde que o atributo mixed tenha o valor true..** mixed="true" permite texto intercalado com os elementos filhos num complexType.
*   **Sim, desde que o atributo text tenha o valor true..** Não existe esse atributo em XSD.
*   **Não, só elementos simpleType podem conter texto..** Um complexType com mixed="true" também pode conter texto.

[Voltar à explicação](https://resumos.rgo.pt/cadeiras/ltw/xml-xpath/#boa-forma%C3%A7%C3%A3o-e-validade)