Javascript - Interatividade para Web

Javascript – interatividade para web
Luis Fernando Penha Junior

Sumário
Apresentação do curso ................................................................................... 4
CAPÍTULO 1 – RESOLUÇÃO DE PROBLEMAS DE LÓGICA......................... 5
Lógica de programação ............................................................................. 5

Situação ..................................................................................................... 5
Tarefa – Resolvendo a situação ................................................................ 6
Exercícios extras........................................................................................ 7
CAPÍTULO 2 – ESTRUTURA E SINTAXE JAVASCRIPT E VARIÁVEIS ......... 8
Variáveis .................................................................................................... 8
Variáveis: tipos de dados ........................................................................... 8
Tarefa – Declarando uma variável ............................................................. 9
Tarefa – Adicionando valores a uma variável ............................................ 9
Tarefa – Atualizando uma variável............................................................. 9

Exercícios extras...................................................................................... 10
CAPÍTULO 3 – APRESENTAÇÃO DOS TIPOS DE DADOS, ESTRUTURAS DE
CONTROLE E OPERADORES ....................................................................... 11
Operadores .............................................................................................. 11
Operadores aritméticos ............................................................................ 11
Operadores lógicos .................................................................................. 11
Operadores de comparação .................................................................... 11
Tarefa – Trabalhando com operadores aritméticos ................................. 12
Tarefa – Testando incrementos ............................................................... 12

As instruções IF e ELSE .......................................................................... 13
Tarefa – Escrevendo uma instrução if ..................................................... 13

CAPÍTULO 4 – RESOLUÇÃO DE PROBLEMAS DE LÓGICA DE PROGRAMAÇÃO
UTILIZANDO JAVASCRIPT ............................................................................ 15
Situação ................................................................................................... 15
Tarefa – Resolvendo a situação .............................................................. 15
CAPÍTULO 5 – USO DE FUNÇÕES, OBJETOS, DOM E EVENTOS DE DISPARO
......................................................................................................................... 18
Funções ................................................................................................... 18
Definição da função ................................................................................. 18
Tarefa – Criando uma função de par ou ímpar ........................................ 18
Tarefa – Chamando a função criada........................................................ 19

DOM ........................................................................................................ 20
Elementos do DOM.................................................................................. 21
Tarefa – Utilizando o DOM para modificar elementos HTML ................... 21

CAPÍTULO 6 – VALIDAÇÃO DE FORMULÁRIOS ......................................... 23
Validar formulários ................................................................................... 23
Tarefa – Criando a validação de um formulário ....................................... 23

CAPÍTULO 7 – JQUERY, INSTALAÇÃO, PLUG-INS E VALIDAÇÃO ........... 26
jQuery ..........................................................Erro! Indicador não definido.

Instalando o jQuery .................................................................................. 26
Tarefa – Fazendo o download do jQuery ................................................. 26

jQuery - Sintaxe ....................................................................................... 27
jQuery – Selecionar elementos ................................................................ 27
Tarefa – Criando efeitos de mostrar/ocultar com jQuery ......................... 27

Esse material é de uso exclusivo do curso JAVASCRIPT – INTERATIVIDADE PARA WEB
3
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.
4
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.
5
Tarefa – Resolvendo a situação
Objetivo: síntese da própria linguagem de maneira que a lógica chegue a
assemelhar-se a comandos.
1. Para iniciar o exercício, você deverá declarar as variáveis A, B e C;

2. Atribua 999 para variável A;
3. Atribua 555 para variável B;
4. Como não é possível trocar os valores entre as variáveis A e B diretamente, você

precisa transferir o valor da variável A para a variável C, deixando-a vazia;
5. Agora, como a variável A está vazia, transfira o valor da variável B para a variável A;
6. Finalmente, transfira o valor da variável C que anteriormente estava em A, para a

variável B;
6
7. 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

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

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.
7
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;
8
Boolean: Representam um valor verdadeiro ou falso.
Exemplo: var minhaVariavel=true;
Array: Permitem armazenar diversos valores em uma única variável.
Exemplo: var minhaVariavel=[1,’Teste’,’Oi’,10];
Object: Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser
armazenado em uma variável.
Exemplo: var minhaVariavel=document.querySelector('h1');
Tarefa – Declarando uma variável

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.
8. Abra o navegador Google Chrome e acesse console através do atalho Ctrl+Shift+J

9. Digite var meuNome; e pressione Enter.
10. Em seguida, crie mais uma, pressionando Enter ao final da declaração: var minhaIdade;
11. Você pode testar se os valores agora existem no ambiente de execução digitando apenas os
nomes das variáveis.
Tarefa – Adicionando valores a uma variável

1. Uma vez que você declarou uma variável, você pode adicionar um valor a ela. Digite
meuNome=’João’; e pressione Enter
2. Repita o processo com a idade: minhaIdade=’30’;
3. Você pode retornar os valores de suas variáveis digitando seus nomes no console. Digite
meuNome e pressione Enter.
Tarefa – Atualizando uma variável


9
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

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

2. 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
10
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.
11
Tarefa – Trabalhando com operadores aritméticos
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 editor de códigos desejado

2. Dentro da tag <script> crie a seguinte variável: var primeiroValor = 12;
3. Na linha abaixo, vamos criar a segunda variável: var segundoValor = 10;
4. Vamos criar a variável para realizar a operação aritmética entre os valores. Na linha abaixo,
digite: var resultado = primeiroValor * segundoValor;
5. Faça o código imprimir o resultado na tela. Digite: document.write(resultado);
6. Seu código ficará como mostrado na imagem a seguir
7. Salve como teste-operadores.html e abra o arquivo no navegador.

8. O resultado mostrado na tela será 120
Tarefa – Testando incrementos

programas.
1. Abra o arquivo teste-operadores.html e apague o conteúdo dentro da tag <script>

2. Salve o arquivo com o nome teste-incremento.html
3. Crie a variável valor1 e atribua o valor 15
4. Na linha abaixo crie a variável valor2 e acrescente o valor ++valor1
5. Em seguida digite document.write(valor2);
6. Seu código ficará como mostrado na imagem a seguir
12
7. 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

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: <script type="text/javascript"> </script>
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:
13
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

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

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.
14
CAPÍTULO 4 – RESOLUÇÃO DE PROBLEMAS DE LÓGICA
DE PROGRAMAÇÃO UTILIZANDO JAVASCRIPT
Neste capítulo você irá fazer a resolução de alguns problemas de lógica utilizando a
linguagem básica do JavaScript
Situação
Faça um programa que calcule a média simples (aritmética) de 3 valores informados
pelo usuário: 15, 17 e 35. Utilize as variáveis valor1, valor2 e valor3. Exiba a média
na tela para o usuário.
Tarefa – Resolvendo a situação

Objetivo: Utilização dos operadores, estruturas condicionais e estrutura de
repetição em conjunto.
1. Abra o arquivo base.html

2. Salve o arquivo com o nome exercício-logica-1.html
3. Altere o título do documento para PRATICANDO A LÓGICA
4. Dentro da tag body, inicie a tag script
5. Dentro da tag script, crie as variáveis que receberão os valores: valor1 recebe 15,
valor2 recebe 17 e valor3 recebe35
15
6. Crie a variável total, que receberá a soma de valor1, valor2 e valor3
7. Crie a variável media, que receberá o resultado de total dividido por três.
8. Agora, insira a instrução que irá escrever o resultado da média juntamente ao texto “A
média dos valores informados é ”
9. Abra o seu navegador e veja o resultado.
16
Exercícios extras
Tarefa: Exercitando a lógica com JavaScript

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

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.
17
CAPÍTULO 5 – USO DE FUNÇÕES, OBJETOS, DOM E
EVENTOS DE DISPARO
Neste capítulo você aprenderá a criar funções e compreender como utilizar
elementos de disparo. Também verá os objetos que estruturam o DOM e como
acessá-los ou manipulá-los.
Funções
As funções servem basicamente para guardar instruções em um bloco de código.
Guardar esses trechos de comandos em uma função significa que podemos deixar o
código mais organizado, evitando ter que escrever os mesmos comandos repetidas
vezes.
Definição da função
Definir uma função é o processo pelo qual declaramos o nome da função e
colocamos o que ela deve fazer. A sintaxe básica de uma função é:
function nome_da_função( ) {
instruções que a função irá executar
Tarefa – Criando uma função de par ou ímpar

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. Abra o console do navegador ou o editor de sua preferência

18
2. Digite o seguinte código para iniciar a função
3. 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
4. Caso o resultado do if não seja confirmado, será preciso retornar o valor contrário, ou seja,
ímpar
5. Tente executar o código e perceba que nada acontece.
Tarefa – Chamando a função criada

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
19
2. Em seguida, faça a função retornar o valor no console.
3. 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)
20
Elementos do DOM
A primeira coisa que você precisa fazer é encontrar o elemento com o qual quer
trabalhar. Para isso, ao trabalhar com o DOM, você pode procurá-las pelo atributo id,
pelo nome da tag (h1, p, img, div, etc.) ou pelo nome da classe.
Tarefa – Utilizando o DOM para modificar elementos HTML

1. Abra o arquivo teste-dom.html

2. No final da tag body, crie a tag <script> </script>
3. Dentro da tag script, defina uma variável com o nome boxVerde que receberá o id caixa-1
como valor
4. Defina também uma variável com o nome boxAzul que receberá o id caixa-2
5. Após a criação das variáveis, digite o comando utilizado para a troca de cor de fundo do
elemento caixa-1 (boxVerde). A cor escolhida será o verde (green)
21
6. Faça o mesmo com o elemento caixa-2 (boxAzul), escolhendo a cor azul (blue)
7. Verifique no navegados os dois elementos alterados
8. Troque o texto do elemento caixa-2 para “Obrigado pela atenção” utilizando o elemento
innerText mostrado a seguir
Exercícios extras
Tarefa: Exercitando a criação de funções

1. Abra o console do seu navegador e crie uma função que calcule o IMC (índice de massa
corporal) de uma pessoa que tenha 1,82m de altura e 85 quilos
2. Atribua as variáveis desejadas e faça o resultado ser exibido no próprio console
Tarefa: Exercitando a manipulação de elementos utilizando o DOM

1. Abra o arquivo exercitando-dom.html

2. Manipule os elementos DOM para trocar a cor da div primeira-div para verde claro
(lightgreen) e o texto do parágrafo para “eu consegui usar o DOM”.
22
CAPÍTULO 6 – VALIDAÇÃO DE FORMULÁRIOS
Neste capítulo você aprenderá a trabalhar com a validação de dados em formulários
de contato utilizando Javascript
Validar formulários
A validação de formulários em JavaScript é utilizada para garantir que os dados
solicitados nos campos preenchidos em qualquer site sejam fiéis ao que o
programador deseja. Ela é feita no browser e garante a consistência das
informações quando são enviados para a base de dados.
A validação é necessária em várias situações, quando, por exemplo, o utilizador não
preencheu um dos campos. Se a validação é feita, o utilizador recebe uma
mensagem avisando que o campo não foi preenchido, antes do formulário ser
enviado.
Tarefa – Criando a validação de um formulário

Objetivo: Identificação do uso prático da linguagem a partir do uso da validação
de campos de formulário com JavaScript.
1. Abra o arquivo formulário-de-contato.html

2. Dentro da tag head, logo abaixo de title, crie a tag script:
3. A validação será feita após o usuário clicar no botão de envio. Para isso, será necessário criar
a ação (onclick) no botão que chamará a função de validação.
23
4. Dentro da tag script, crie a função para realizar a validação
5. No campo da função, crie as variáveis que receberão os valores dos campos do formulário
6. Após a criação das variáveis, será criada uma condição que analise se os campos estão em
branco. Caso estejam, um alerta com a mensagem “Campo nome é obrigatório” será exibido
na tela
7. Salve o arquivo e abra o mesmo no navegador.

8. Clique no botão Enviar do formulário e veja a mensagem de alerta
9. Repita o processo com o restante dos campos. Acrescente a condição if para todos, altere a
mensagem de alerta e os campos de nome necessários. Faça o teste novamente
24
Exercícios extras
Tarefa: Exercitando a validação de formulários com Javascript

1. Abra o seu editor de códigos e crie um arquivo base em html

2. Dentro da tag body, crie um formulário de contato com os campos nome, idade, email,
mensagem e um botão para enviar
3. Crie as funções necessárias para que, ao clicar no botão enviar, elas analisem os campos
vazios e retornem uma mensagem de alerta.
Tarefa: Exercitando a validação de formulários com Javascript

1. Abra o arquivo exercitando-valid.html

2. Faça com que, ao clicar no botão de envio, ele retorne a seguinte mensagem para cada
campo que esteja em branco:
a. Nome: “Por favor, digite seu nome”
b. Idade: “Qual a sua idade?”
c. Email: “Você tem email? Caso não tenha, crie em gmail.com
d. Mensagem: “Deixe a sua mensagem. É importante para nós!”
25
CAPÍTULO 7 – JQUERY, INSTALAÇÃO, PLUG-INS E
VALIDAÇÃO
Neste capítulo você aprenderá um pouco mais sobre jQuery, suas bibliotecas e as
formas de operação.
JQuery
JQuery é uma biblioteca de funções em JavaScript que foi desenvolvida para
simplificar os scripts interpretados no navegador, a navegação em documentos
HTML, a seleção de elementos DOM, criação de animações, manipulação de
eventos e etc.
Ele roda em praticamente todos os navegadores e possui plug-ins para realizar
diversas funcionalidades, como galerias de fotos, grids, sliders, popups, validação de
formulários e muito mais.
Instalando o jQuery
Antes de usarmos o jQuery é necessário fazer o download do arquivo com todo o
código da biblioteca. Para isso, vá até http://jquery.com/download/ e veja qual é a
versão comprimida mais recente.
Tarefa – Fazendo o download do jQuery

Objetivo: Delimitação de possibilidades de uso da Biblioteca jQuery.
Desenvolvimento da autonomia do aluno no processo de pesquisa, instalação e
uso dos plug-ins e suas funções.
1. Abra o seu navegador e acesse o site http://jquery.com/download

26
2. Veja qual é a última versão comprimida e faça o download para a pasta Exercício jQuery>JS.
Observação: Pode ser que, em vez de iniciar o download do arquivo, o código abra em
formato texto em uma outra aba do navegador. Se isso acontecer, pressione CTRL + A para
selecionar todo o código e CTRL + C para copiá-lo. Em seguida, abra um novo arquivo js no
seu editor de códigos, cole o código e salve o com a extensão '.js'. Por exemplo 'jquery.js'.
3. Abra o arquivo show-hide-jquery.html e, na área <head> </head>, crie o link para “chamar” o
arquivo jQuery: <script src="js/jquery.js"></script>
Observação: é recomendável incluir a tag do jQuery dentro da seção head do
código HTML, já que queremos garantir que algumas funcionalidades da página
sejam carregadas antes de qualquer outro script.
JQuery - Sintaxe
Basicamente tudo que você fizer em jQuery começará com um sinal de cifrão '$'. A
sintaxe básica dos comandos jQuery é: $("elemento").ação( );
JQuery – Selecionar elementos
Para identificar os elementos, são utilizados os seletores, como em CSS. Portanto,
elementos de uma determinada classe serão identificados com ponto: ".exemplo". Já
um elemento com o id, será identificado pela hashtag: "#exemplo". As tags podem
ser selecionadas diretamente: ("h1"), ("p"), etc.
Tarefa – Criando efeitos de mostrar/ocultar com jQuery

1. No arquivo show-hide-jquery.html, após a tag <script src='js/jquery.js'></script>, crie uma

nova tag <script> </script>
27
2. Dentro da nova tag <script>, inicie a criação da função
3. Em seguida, dentro da função, será criada a seleção para o elemento que receberá o clique,
no caso, a div com a classe “btn”
4. Agora, é preciso fazer a seleção do parágrafo com a classe caixa, que tem uma relação de
parentesco com o botão que será clicado. Em seguida, a aplicação do efeito slideToggle
5. Abra o site no navegador e clique sobre o botão “Clique para mostrar”. Veja o efeito em
funcionamento
6. Em seguida, crie um if para que, ao clicar sobre o botão, o texto do mesmo seja alterado para
“Clique para ocultar”
7. Crie um else para que, quando o “Clique para ocultar” receber o clique, volte para “Clique
para mostrar”
28
8. Volte ao navegador, atualize a página e teste novamente o clique sobre os botões
Exercícios extras
Tarefa: Exercitando a aplicação e manipulação de jQuery

1. Crie uma pasta chamada Exercitando jQuery e dentro dela as pastas img, css e js.
2. Baixe o jQuery do site oficial e faça a alocação dos arquivos na pasta correta
3. Copie o arquivo show-hide-jquery-2.html para a sua pasta Exercitando jQuery
4. Utilizando os conhecimentos vistos em aula, crie um efeito para mostrar e ocultar o texto do
parágrafo.
5. Faça com que o nome do botão seja alterado para “Ocultar informação” ao ser clicado para
exibir e que volte ao nome anterior (“Exibir informação”) quando recolhido
Tarefa: Validação de formulários com jQuery

1. Vá até a pasta Exercício Formulário jQuery

2. Abra o arquivo valid-form-jquery.html no seu editor de códigos
3. Faça a validação dos campos apresentados
29
Referências:
LÓGICA DE PROGRAMAÇÃO
Autor: Gley Fabiano Cardoso Xavier
Livro: JavaScript - Guia do Programador.
Autor: Maurício Samy Silva.
Site: Mozilla Developer Network - https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
30

Javascript - Interatividade para Web

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Javascript - Interatividade para Web

Hochgeladen von

Copyright:

Verfügbare Formate

Javascript – interatividade para web

Luis Fernando Penha Junior

Apresentação do curso ................................................................................... 4

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

Lógica de programação ............................................................................. 5

CAPÍTULO 2 – ESTRUTURA E SINTAXE JAVASCRIPT E VARIÁVEIS ......... 8

Tarefa – Declarando uma variável ............................................................. 9

Tarefa – Adicionando valores a uma variável ............................................ 9

Tarefa – Atualizando uma variável............................................................. 9

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

CONTROLE E OPERADORES ....................................................................... 11

Tarefa – Trabalhando com operadores aritméticos ................................. 12

Tarefa – Testando incrementos ............................................................... 12

Tarefa – Escrevendo uma instrução if ..................................................... 13

UTILIZANDO JAVASCRIPT ............................................................................ 15

Tarefa – Criando uma função de par ou ímpar ........................................ 18

Tarefa – Chamando a função criada........................................................ 19

Tarefa – Utilizando o DOM para modificar elementos HTML ................... 21

CAPÍTULO 6 – VALIDAÇÃO DE FORMULÁRIOS ......................................... 23

Validar formulários ................................................................................... 23

Tarefa – Criando a validação de um formulário ....................................... 23

CAPÍTULO 7 – JQUERY, INSTALAÇÃO, PLUG-INS E VALIDAÇÃO ........... 26

jQuery ..........................................................Erro! Indicador não definido.

Tarefa – Fazendo o download do jQuery ................................................. 26

Tarefa – Criando efeitos de mostrar/ocultar com jQuery ......................... 27

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

Diante do volume de informações que a Internet oferece, e da forma como

O JavaScript é uma das principais opções para o desenvolvimento de

Uma das principais bibliotecas para JavaScript, quando se trata da parte de

Nesse contexto, o curso JavaScript – INTERATIVIDADE PARA WEB tem o

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

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

A lógica de programação pode ser definida como a elaboração de sequências de

como um passo a passo para a realização de tarefas e são chamadas de algoritmos.

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

Escreva um programa que armazene o valor 999 na variável A e o valor 555 na

em A passe para B e vice-versa utilizando uma variável C para realizar a troca.

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

1. Para iniciar o exercício, você deverá declarar as variáveis A, B e C;

3. Atribua 555 para variável B;

4. Como não é possível trocar os valores entre as variáveis A e B diretamente, você

6. Finalmente, transfira o valor da variável C que anteriormente estava em A, para a

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

Tarefa: Treinando a lógica - cálculo de média

1. Faça um programa que calcule a média simples (aritmética) de 3 valores quaisquer

Tarefa: Treinando a lógica - positivo ou negativo

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

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 são espaços na memória do computador onde você pode armazenar

qualquer nome que você queira chamá-la. Exemplo:

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

Variáveis: tipos de dados

Exemplo: var minhaVariavel = 'teste';

Number: Representam valores que são números.

Exemplo: var minhaVariavel=10;

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

Exemplo: var minhaVariavel=true;

Array: Permitem armazenar diversos valores em uma única variável.

Exemplo: var minhaVariavel=[1,’Teste’,’Oi’,10];