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 JavaScript Prof. Alex Camargo

1. Estruturas de Controle JavaScript Prof. Alex Camargo

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. JavaScript Prof. Alex Camargo

1.2 Exemplo JavaScript Prof. Alex Camargo Figura. Exemplo: if

1.2 Exemplo JavaScript Prof. Alex Camargo Figura. Exemplo: else

1.2 Exemplo JavaScript Prof. Alex Camargo 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. JavaScript Prof. Alex Camargo

2. Estruturas de Repetição JavaScript Prof. Alex Camargo

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). JavaScript Prof. Alex Camargo

2.2 Exemplo JavaScript Prof. Alex Camargo Figura. Exemplo: for

2.2 Exemplo JavaScript Prof. Alex Camargo Figura. Exemplo: while

2.2 Exemplo JavaScript Prof. Alex Camargo 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); JavaScript Prof. Alex Camargo

3. Funções JavaScript Prof. Alex Camargo

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. JavaScript Prof. Alex Camargo

3.2 Exemplo JavaScript Prof. Alex Camargo 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. JavaScript Prof. Alex Camargo

4. Manipulando o conteúdo HTML/CSS JavaScript Prof. Alex Camargo

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. JavaScript Prof. Alex Camargo

4.2 Exemplo JavaScript Prof. Alex Camargo Figura. Exemplo: innerHTML()

4.2 Exemplo JavaScript Prof. Alex Camargo Figura. Exemplo: className

4.2 Exemplo JavaScript Prof. Alex Camargo 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>. JavaScript Prof. Alex Camargo

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. JavaScript Prof. Alex Camargo

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; JavaScript Prof. Alex Camargo

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. JavaScript Prof. Alex Camargo

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>. JavaScript Prof. Alex Camargo

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 Prof. Alex Camargo

Javascript (parte 2)

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Javascript (parte 2)

Mais de Alex Camargo

Último

Javascript (parte 2)