Javascript (parte 2)

JavaScript (parte II)JavaScript (parte II)
Karina Machado e Alex Camargo
{karina.machado, alexcamargo}@furg.br
UNIVERSIDADE FEDERAL DO RIO GRANDE
CENTRO DE CIÊNCIAS COMPUTACIONAIS
SISTEMAS PARA INTERNET I
Rio Grande/2015

I. Sumário
1. Estruturas de Controle
- 1.1 Introdução
- 1.2 Exemplo
- 1.3 Exercício
2. Estruturas de Repetição
- 2.1 Introdução
- 2.2 Exemplo
- 2.3 Exercício
3. Funções
- 3.1 Introdução
- 3.2 Exemplo
- 3.3 Exercício
JavaScript Prof. Alex Camargo

I. Sumário
4. Manipulando o conteúdo HTML/CSS
- 4.1 Introdução
- 4.2 Exemplo
- 4.3 Exercício

1. Estruturas de Controle

1.1 Introdução
Muitas vezes, na escrita de um código, você quer executar ações
distintas para diferentes decisões. Em JavaScript temos as
seguintes instruções condicionais:
 if: especifica um bloco de código a ser executado se a condição
for verdadeira.
 else: especifica um bloco de código a ser executado se a
mesma condição for falsa.
 switch: especifica blocos alternativos de código a serem
executados.

1.2 Exemplo
Figura. Exemplo: if

1.2 Exemplo
Figura. Exemplo: else

1.2 Exemplo
Figura. Exemplo: switch

1.3 Exercício
1. Faça um script que receba quatro notas de um aluno. O script
deve calcular a média final do aluno e apresentar na tela uma
mensagem de “Aprovado” caso sua média tenha sido maior ou
igual a sete ou “Reprovado” se sua média for menor que sete.
- As notas devem ser informadas pelo usuário através de 4 prompts, um
para cada nota.

2. Estruturas de Repetição

2.1 Introdução
Repetições são úteis se você deseja executar o mesmo código
repetidamente. Em JavaScript, vamos abordar as seguintes
estruras de repetição:
 for: percorre um bloco de código um número x de vezes.
 while: percorre um bloco de código enquanto uma condição
especificada for verdadeira (teste no início).
 do/while: percorre um bloco de código enquanto uma
condição especificada for verdadeira (teste no final).

2.2 Exemplo
Figura. Exemplo: for

2.2 Exemplo
Figura. Exemplo: while

2.2 Exemplo
Figura. Exemplo: do/while

2.3 Exercício
1. Faça um script que receba um número e mostre a sua tabuada.
O script deve exibir os resultados em uma tabela HTML (um valor
por linha).
- O número deve ser informado pelo usuário via prompt.
- Utilize concatenação de string para “montar” a tabela a ser exibida.
tabuada = i + “X” + j + “ = ” + k;
document.write(tabuada);

3. Funções

3.1 Introdução
Funções são blocos de código projetados para executar uma
tarefa específica.
 É executado quando "algo" a invoca (chama).
 Pode, ou não, retornar um valor.
 Quando atinge uma instrução de retorno, chega ao seu fim ou
pára a execução.

3.2 Exemplo
Figura. Exemplo: funções

3.3 Exercício
1. Escreva uma função que receba 2 números inteiros n1 e n2
como entrada e retorna a soma de todos os números inteiros
contidos no intervalo [n1,n2]. Use esta função em um script que lê
n1 e n2 do usuário e imprime a soma.
Ex. de saída:
n1 = 1
n2 = 3
Soma: 6
- Os números devem ser informados via prompt.
- O cálculo deve ser feito através de uma estrutura de repetição.

4. Manipulando o conteúdo
HTML/CSS

4.1 Introdução
Desde a sua concepção, o JavaScript tem como finalidade
principal a interatividade do conteúdo das páginas web. Iremos
estudar os seguintes propriedades:
 innerHTML: seta ou retorna o conteúdo de um elemento
HMTL;
 className: seta ou retorna o nome da classe de um elemento
HMTL;
 style."Propriedade": seta as propriedades de estilo de um
elemento HTML.

4.2 Exemplo
Figura. Exemplo: innerHTML()

4.2 Exemplo
Figura. Exemplo: className

4.2 Exemplo
Figura. Exemplo: style.”Propriedade”

4.3 Exercício
1. Escreva um script que altere as seguintes propriedades do texto
de um textarea: alinhamento (a direita), cor (verde), peso (negrito).
O script também deve oferecer a opção “Mostrar sugestão”, o texto
sugerido pode ser da sua escolha.
- Crie um botão para cada opção.
- Podem ser usadas as propriedades className ou style.”Propriedade”.
- O texto sugerido deve ser escrito através do innerHTML em um <span>.

II. Exercícios
1. Faça um script que leia a idade de uma pessoa e informe a sua
classe eleitoral.
IDADE CLASSE
Abaixo de 16 anos Não-eleitor
Entre 16 e 17 Eleitor facultativo
Entre 18 e 65 anos Eleitor obrigatório
Maior de 65 anos Eleitor facultativo
- A idade deve ser informada pelo usuário via prompt e a resposta exibida
em um alert.
- Utilize a estrutura de repetição if ou switch.

II. Exercícios
2. Utilizando uma estrutura de repetição (while ou do/while), crie
um script que leia valores inteiros. A condição de parada deve ser
-0. Por fim, escreva a média aritmética dos valores lidos.
- Os valores devem ser informados pelo usuário via prompt e a resposta
exibida em um alert.
- Exemplos de variáveis a serem utilizadas:
var numero, contador=0, soma=0, media;

II. Exercícios
3. Faça um script que leia a altura (em metros) e o sexo (em
números: 1 = feminino ou 2 = masculino) de uma pessoa. Também
faça uma função que receba os valores via parâmetro e retorne o
seu peso ideal utilizando as fórmulas abaixo.
- para homens: (72.7 * h) - 58
- para mulheres: (62.1 * h) – 44.7
- Os valores devem ser informados pelo usuário via prompt e a resposta
exibida em um alert.
- Utilize uma estrutura de decisão dentro da função para calcular o valor de
acordo com a opção desejada.

II. Exercícios
4. Escreva um script que pergunte o time gaúcho favorito do
usuário (via prompt). Se a resposta for "internacional", escreva (em
vermelho) um trecho do hino do Internacional na página. Porém, se
a reposta por "gremio", escreva (em azul) um trecho do hino do
Grêmio. O script deve exibir "Valor não reconhecido!" e, sempre
que o usuário errar, solicitar novamente outra resposta.
- A resposta deve ser informada via prompt.
- Podem ser usadas as propriedades className ou style.”Propriedade”.
- O trecho do hino deve ser escrito através do innerHTML em uma <div>.

III. Referências
Material cedido por Caroline Tomasini.
FLANAGAN, David. JavaScript: the definitive guide. O'Reilly
Media, Inc., 2006.
W3SCHOOL. JavaScript Tutorial. Disponível em:
<http://www.w3schools.com/js>. Acesso em: Set/2015.

Javascript (parte 2)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Javascript (parte 2)

Mais de Alex Camargo

Último

Javascript (parte 2)