Javascript - interatividade para web, Exercícios de Programação Javascript

Baixe Javascript - interatividade para web e outras Exercícios em PDF para Programação Javascript, somente na Docsity!

Javascript – interatividade para web

Luis Fernando Penha Junior

Sumário

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

Apresentação do curso

Diante do volume de informações que a Internet oferece, e da forma como são apresentadas, faz-se necessário estabelecer formas de organização dos conteúdos disponíveis, ampliar a interatividade e permitir o aumento de performance dos sites para fazer com que o usuário possua uma experiência mais rica, prazerosa e assertiva nas suas buscas por conteúdo, potencializando a vivência na web. O JavaScript é uma das principais opções para o desenvolvimento de projetos. É uma das linguagens mais utilizadas no mundo, com uma grande comunidade que utiliza e compartilha informações. Sendo versátil, surge como uma possibilidade de desenvolvimento para internet, especificamente para a interface de aplicações ( front-end ), adicionando interatividade aos sites e desenvolvendo experiências mais ricas. Através das tecnologias e plataformas existentes, pode ser executado como uma linguagem de acesso a dados ( back-end ), em dispositivos móveis e até em projetos de robótica e automação (Arduíno), o que torna o aprendizado dessa linguagem algo valioso por suas inúmeras possibilidades. Uma das principais bibliotecas para JavaScript , quando se trata da parte de front-end e interatividade, é o jQuery. Através de sua simplicidade e robustez, é uma das melhores opções para o desenvolvimento de aplicações ricas para web. O domínio dessas tecnologias possibilita a atuação profissional em agências de publicidade, estúdios digitais, produtoras de aplicativos entre outras. Nesse contexto, o curso JavaScript – INTERATIVIDADE PARA WEB tem o objetivo de preparar profissionais para construir funções personalizadas, manipular o fluxo de eventos da página/aplicação, compreender o código de outros desenvolvedores, instalar e utilizar a biblioteca jQuery, utilizar os seletores e eventos desta para controlar os elementos existentes dentro do DOM, seguindo os mais recentes padrões Web.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

CAPÍTULO 1 – RESOLUÇÃO DE PROBLEMAS DE LÓGICA

Neste capítulo você aprenderá a trabalhar com a resolução de alguns problemas de lógica de programação

Lógica de programação

A lógica de programação pode ser definida como a elaboração de sequências de ações para atingir um determinado objetivo. Estas sequências podem ser entendidas como um passo a passo para a realização de tarefas e são chamadas de algoritmos. Pense em uma situação comum do dia a dia, como por exemplo a ação de dirigir:

Dirigindo

Se o sinal for amarelo, reduza a velocidade

Se o sinal for vermelho, pare o veículo

Se o sinal for verde, siga em frente

Note que a condição do algoritmo acima é definida pela cor do sinal. A partir disso, há a possibilidade de parar o veículo ou seguir andando.

Situação

Escreva um programa que armazene o valor 999 na variável A e o valor 555 na variável B. A seguir troque os seus conteúdos fazendo com que o valor que está em A passe para B e vice-versa utilizando uma variável C para realizar a troca.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

1. Pronto! Você efetuou a troca dos valores da variável A para a variável B.

Exercícios extras

Tarefa: Treinando a lógica - cálculo de média Objetivo: síntese da própria linguagem de maneira que a lógica chegue a assemelhar-se a comandos.

1. Faça um programa que calcule a média simples (aritmética) de 3 valores quaisquer informado pelo usuário. Utilize as variáveis valor1, valor2 e valor3. Exiba a média na tela para o usuário.

Tarefa: Treinando a lógica - positivo ou negativo Objetivo: síntese da própria linguagem de maneira que a lógica chegue a assemelhar-se a comandos.

1. Crie uma função que descubra se um valor informado pelo usuário é positivo ou negativo (considere o valor zero como positivo). Exiba na tela o resultado com uma mensagem amigável.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

CAPÍTULO 2 – ESTRUTURA E SINTAXE JAVASCRIPT E

VARIÁVEIS

Neste capítulo você aprenderá a trabalhar com as regras de sintaxe e convenções do Javascript como variáveis, números e etc.

Variáveis

Variáveis são espaços na memória do computador onde você pode armazenar dados. Você começa declarando uma variável com a palavra-chave var, seguida por qualquer nome que você queira chamá-la. Exemplo:

Após a declaração de uma variável, você pode dar a ela um valor. Exemplo:

Você tambem pode mudaro valor de uma variável. Exemplo:

Variáveis: tipos de dados

As variáveis possuem uma classificação quanto ao tipo de dado que está sendo inserido: String: São utilizadas para guardar dados que são representados em forma de texto. Exemplo: var minhaVariavel = 'teste'; Number: Representam valores que são números. Exemplo: var minhaVariavel=10;

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

1. Você pode alterar uma variável dando a ela um valor diferente. Digite meuNome=’Bob’; e pressione Enter
2. Retorne o nome da variável e veja o resultado

Exercícios extras

Tarefa: Criar e executar variáveis Objetivo: identificação dos padrões JavaScript e sua sintaxe, distinguindo o que são as variáveis e o que são os tipos de dados.

1. Utilizando o console do Google Chrome, crie uma variável para retornar o valor Javascript ao digitar meuCurso e uma para retornar o valor França ao digitar myPlace. Faça o teste de execução

Tarefa: Modificar variáveis Objetivo: identificação dos padrões JavaScript e sua sintaxe, distinguindo o que são as variáveis e o que são os tipos de dados.

1. Utilizando o console do Google Chrome, altere o valor das variáveis criadas anteriormente: meuCurso passará a ter o valor Html5 e myPlace passará a ter o valor Brasil

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

CAPÍTULO 3 – APRESENTAÇÃO DOS TIPOS DE DADOS,

ESTRUTURAS DE CONTROLE E OPERADORES

Neste capítulo você aprenderá a trabalhar com os principais tipos de operadores do Javascript e também com as suas estruturas de controle.

Operadores

Para manipular variáveis, é necessária a utilização de operadores. No Javascript encontramos alguns tipos de operadores como: aritméticos, lógicos, incrementais comparativos e etc.

Operadores aritméticos

São os responsáveis por efetuar cálculos matemáticos. Os operadores aritméticos padrão são os de soma (+), subtração (-), multiplicação (*) e divisão (/).

Operadores lógicos

Operadores lógicos são usados para criar expressões que envolvam valores do tipo booleano, como verdadeiro ou falso.

Operadores de comparação

Um operador de comparação compara seus operandos e retorna um valor lógico baseado em se a comparação é verdadeira. Os operandos podem ser numéricos, strings, lógicos ou objetos.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

1. Abra o arquivo no navegador e verifique o resultado. Deverá ser 16

As instruções IF e ELSE

A instrução if é uma das mais importantes em JavaScript. Você pode utilizar esta instrução para criar fluxos de códigos condicionais em nossos scripts. Um bom exemplo disso é quando você quer que o seu script execute uma ação baseada na resposta do usuário.

Tarefa – Escrevendo uma instrução if Objetivo: Reconhecimento dos operadores, estruturas condicionais e estrutura de repetição identificando as possibilidades de escolha/condicionais e inteligência dos programas.

1. Abra o arquivo base.html no seu editor de códigos e salve-o com o nome teste-if.html
2. Dentro da tag body , crie a seguinte linha de código:
3. Dentro da tag script você irá declarar a primeira variável: var valor1 = 200;
4. Pressione Enter e digite a segunda variável: var valor2 = 300;
5. Na linha seguinte digite: if (resultado == 500){ alert('O valor do resultado é igual a 500') }
6. Seu código ficará da seguinte forma:

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

O script anterior exemplifica bem o uso da instrução if para testar uma condição. Isto quer dizer: “Se o valor da variável resultado for igual a 500, execute uma ação. Note o uso do sinal { } para definir a ação que será executada pelo script se a condição for aprovada.

Exercícios extras

Tarefa: Exercitando os operadores aritméticos Objetivo: identificação dos padrões JavaScript e sua sintaxe, distinguindo o que são as variáveis e o que são os tipos de dados.

1. Crie um script que escreva na tela do navegador “A soma dos números é 480”. Declare as variáveis como desejar para que o resultado seja obtido.

Tarefa: Exercitando a instrução if Objetivo: identificação dos padrões JavaScript e sua sintaxe, distinguindo o que são as variáveis e o que são os tipos de dados.

1. Crie uma variável com o nome v1 e valor 18 , e outra com nome v2 e valor 35. Em seguida, faça com que o script imprima na tela a mensagem “Curso de JavaScript”, ao analisar se v1 é menor que v2.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

1. Crie a variável total , que receberá a soma de valor1 , valor2 e valor
2. Crie a variável media , que receberá o resultado de total dividido por três.
3. Agora, insira a instrução que irá escrever o resultado da média juntamente ao texto “A média dos valores informados é ”
4. Abra o seu navegador e veja o resultado.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

Exercícios extras

Tarefa: Exercitando a lógica com JavaScript Objetivo: Utilização dos operadores, estruturas condicionais e estrutura de repetição em conjunto.

1. Use a estrutura de repetição enquanto condição faz para mostrar uma contagem de números pares na tela. Essa contagem deve iniciar em 0 e terminar com um número previamente informado pelo usuário.

Tarefa: Exercitando a lógica com JavaScript Objetivo: Utilização dos operadores, estruturas condicionais e estrutura de repetição em conjunto.

1. Crie um programa que solicite ao usuário a temperatura em Celsius e converta para fahrenheit. Exiba na tela o resultado com uma mensagem amigável.

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

1. Digite o seguinte código para iniciar a função
2. Em seguida, digite a instrução que irá analisar se o número divido por dois terá resto zero. Caso isso aconteça, o resultado do cálculo será um número par
3. Caso o resultado do if não seja confirmado, será preciso retornar o valor contrário, ou seja, ímpar
4. Tente executar o código e perceba que nada acontece.

Tarefa – Chamando a função criada Objetivo: Identificação de funções, objetos, DOM e eventos de disparo, a fim de organizar a linguagem de forma mais efetiva e própria, e apresentar a personalização do código.

1. Agora você precisa chamar a função criada. Defina uma variável para o resultado acrescentando o valor que será utilizado para verificação, como mostrado na linha nove

Esse material é de uso exclusivo do curso J AVASCRIPT – INTERATIVIDADE PARA WEB

1. Em seguida, faça a função retornar o valor no console.
2. Execute a função e veja que o resultado será Par

DOM

O DOM (Document Object Model) é um modelo de documento que guarda toda a estrutura de uma página web. Ele é carregado pelo browser assim que a página é aberta. Através do DOM, o JavaScript você pode modificar todos os elementos de uma página e realizar ações como:

• Adicionar ou remover elementos HTML
• Alterar os elementos HTML da página
• Alterar atributos dos elementos HTML (como o 'src' de uma imagem por exemplo)
• Alterar o CSS
• Reagir a eventos na página (clique, rolagem, input em formulários, passar o cursor sobre elementos, etc)