Javascript pode mudar html:

Este texto vai mudar.

O seletor abaixo altera o valor mostrado no parágrafo seguinte:

A opção selecionada foi ______, por isso, o valor é _____.

O número ao final desta frase foi é definido como uma variável e passa por diversas operações até chegar ao valor de .

Já o valor a seguir é calculado a partir de uma função: .

É possível se referir a diferentes elementos de um array (lista) e suas propriedades: .

E também fazer testes booleanos. Por exemplo, o número 40 está no array? .

Interação: inputs e events

Há vários tipos de eventos:

Eles podem estar associados a diversos tipos de inputs ("html forms"). Acima vimos botão e select box.

Para capturar eventos, é preciso incluir "event listeners", funções que registram quando um evento aconteceu e acionam uma nova função ("callback function").


Botões



Resultado da contagem: .


Caixas de texto

Esta caixa de texto responde aos seguintes eventos: focus, blur e keypress.

Escreva alguma coisa e aperte enter (ou enviar):

O texto da caixa é ______.


Caixa de número, com cálculo

Alguma coisa acontece 3 vezes ao dia. Insira um número de anos para saber quantas vezes ela terá acontecido em todos esses anos.

O resultado final é ____.


Seletores

Modificando a cor do fundo:


A cor deste trecho vai mudar

Ao contrário do seletor no alto da página e do que veremos em seguida, nesse caso o texto e o valor do seletor são iguais.




Resposta ______.


Radios e checkboxes

A lógica desses dois tipos de input é semelhante à dos seletores.

Escolha uma das alternativas abaixo (basta clicar no texto):





A opção escolhida foi ___.

Marque alguma das opções abaixo:





A opção escolhida foi ___.


Range slides

Escolha um número:

O resultado é __.

O resultado é __.


Lidando com arrays (listas) e objetos (dicionários)

Essa lista foi construída a partir de um js-array:

O texto abaixo foi criado a partir de um js-objeto.


Carregando dados de arquivos externos

O texto do arquivo é: