Sumário

Introdução —----------------------------------------------------------------------------------- 3

Programando em Javascript —------------------------------------------------------------ 4

Variáveis —------------------------------------------------------------------------------------- 5

Aritmética —------------------------------------------------------------------------------------ 6

Entrada de Dados —------------------------------------------------------------------------- 8

Estrutura de Condição —------------------------------------------------------------------ 11

HTML com Javascript —------------------------------------------------------------------- 13

2
Introdução
O Javascript é uma das principais tecnologias no desenvolvimento web. Por
meio dela é possível proporcionar interação ao usuário, dando mais vida para
os nossos projetos.

Essa linguagem, antigamente, era considerada uma tecnologia apenas

voltada para o front-end de uma aplicação web. Hoje em dia essa mesma
tecnologia evoluiu tanto que passou a atender tanto a parte front-end de uma
aplicação como também back-end. Além disso, o Javascript não se limita
mais apenas no desenvolvimento web. Sua estrutura também é utilizada para
desenvolver, por exemplo, aplicações mobile.

Nesse material, apresentarei as estruturas fundamentais para trabalhar com

essa tecnologia. Para isso é necessário que esteja clara a compreensão dos
fundamentos básicos da Programação Web, como a estrutura em HTML.

Espero que você tenha um rico e empolgante aprendizado. Mãos no código!

3
Programando em Javascript
Assim como o CSS podemos trabalhar com o Javascript por meio da
inicialização de uma tag, colocada na parte estrutural da página, a <script>.
Tudo que estiver dentro dessa tag, será interpretado como um script em
Javascript da página em questão, conforme exemplo abaixo:

Entenda: O comando alert é utilizado para exibir mensagem pelo navegador.

Ao executarmos o nosso .html, deverá apresentar o seguinte resultado:

4
Utilizar esse método para trabalhar com o Javascript pode trazer algumas
limitações. Por exemplo, se formos utilizar um determinado código em outras
páginas, devemos colocar o mesmo código no cabeçalho de cada uma. Isso
não será produtivo e nem eficiente para o desempenho do sistema.

É recomendável realizar a integração do código-fonte nas páginas.

Para isso é necessário criar um arquivo do tipo .js, nomeá-lo, salvá-lo e

integrar esse arquivo no HTML, conforme o exemplo abaixo:

Entenda: A <script> sempre será utilizada para integrar um código Javascript

na página. A diferença é que agora essa tag possui o atributo src, sendo ele
responsável por procurar o caminho onde está o arquivo .js. Nesse caso, está
na pasta scripts com o nome olamundo.js.

Variáveis
Conforme você trabalhou nas aulas de Lógica de Programação, variáveis são
locais reservados na memória para armazenar informações temporárias.
Informações essas que possuem um tipo de dado, conforme demonstrado na
figura abaixo:

Para iniciarmos uma variável no Javascript devemos utilizar a sintaxe var e,

em seguida, nomeá-la e, por fim, atribuir um valor. Vale ressaltar que no

5
Javascript não é necessário informar o tipo de dado de uma determinada
variável. Veja o exemplo logo abaixo:

O resultado demonstrado na página deverá ser o seguinte:

Entenda: no trecho alert(nome + " " + idade + " " + contratado) é utilizado o +
para inserir mais de um elemento no mesmo código. Nesse caso, concatenar
uma variável com um espaço e, em seguida, outra variável.

Aritmética
Realizar operações matemáticas é essencial em qualquer sistema. No
Javascript, assim como outras tecnologias, os valores devem estar
armazenados em variáveis e essas serão trabalhadas por meio de
operadores aritméticos. Analise os exemplos abaixo:

Principais operadores aritméticos:

6
Trabalhando com operações aritméticas no Javascript:

O resultado, ao acessar a página, deverá ser:

1- Um professor deseja calcular a média das notas de seus alunos. Crie um

programa que calcule as notas dos alunos e retorne a média.

2- Um usuário deseja converter uma temperatura em Celsius para Fahrenheit.

Crie um programa que faça a conversão.

3- Uma loja está oferecendo desconto de 10% em seus produtos. Crie um

programa que calcule o valor do desconto e exiba o valor final do produto.

7
Entrada de Dados
Para criarmos um sistema interativo é necessário que haja a leitura e o
processamento de informações fornecidas pelo nosso usuário. Por exemplo
uma calculadora, ela possui um campo onde são digitados os números. O
usuário, ao apertar uma determinada operação matemática, será feita uma
análise, pelo sistema, do que foi fornecido nos campos digitáveis e a
operação matemática para apontar um determinado resultado.

Quando vamos trabalhar com a entrada de dados é necessário que haja um

formulário, ou seja, um campo digitável e um botão para executar
determinada ação. Então, devemos inicialmente colocarmos a estrutura de
um formulário na página HTML, conforme demonstrado abaixo:

Entenda: A tag <form> define onde começa e termina um formulário.

Já a <input> é utilizada para criar campos digitáveis. Nesse caso, por meio do
atributo type, definimos que será um campo digitável do tipo texto.

Antes de partirmos para a manipulação das informações inseridas pelo

usuário no campo digitável, devemos compreender um outro conceito muito
importante na programação: bloco de instruções.

É por meio desses blocos que conseguimos referenciar o que nosso sistema
deverá fazer.

Bloco de instruções, basicamente, é uma inicialização de uma função que

possui um nome e tudo que estiver dentro dela será interpretado quando a
mesma for chamada.

Conforme o mesmo exemplo que estamos trabalhando, de leitura de nome,

analise o código abaixo:

8
Agora que já criamos a nossa função, devemos chamá-la quando o usuário
realizar alguma ação. No exemplo que estamos construindo, a função será
executada ao clicar no botão enviar.

Para isso existe no HTML o atributo onclick, onde devemos referenciar uma
função e toda vez que o botão for clicado ela será executada. Analise o
exemplo abaixo:

Agora que já chamamos a nossa função por meio do atributo onclick no

HTML, devemos trabalhar em nosso código Javascript para identificar o que
foi digitado e demonstrar na tela o resultado.

Uma das formas de realizarmos essa tarefa é necessário que façamos o

armazenamento dessa informação em algum lugar reservado e nomeado da
memória e depois verificamos o valor armazenado nesse local. Ou seja,
devemos armazenar o que foi digitado dentro de uma variável. Analise a
figura abaixo:

Entenda: O comando document.getElementsByName no Javascript é para

identificar no documento HTML qual é a tag com o atributo name definido
com o valor “nome”. Tudo isso, armazenado na variável valor.

Feito isso, foi demonstrado por meio do comando alert o valor dessa variável,
fornecido graças a leitura do documento HTML com o referido nome.

9
Existem outros comandos ao invés do getElementsByName, como por
exemplo o getElementById.

Ao clicar no botão enviar, deverá ser exibido a seguinte mensagem na

página:

1- Crie um sistema com dois campos digitáveis e um botão chamado

“Calcular”. Ao clicar nesse botão, o sistema deverá mostrar o resultado das
operações de soma, subtração, multiplicação e divisão, calculando os dois
números fornecidos pelo usuário.

2- Qual é o método em JavaScript usado para obter um único elemento do

HTML com base no seu ID?

a) getElementById
b) getElementByClass
c) getElementByTagName
d) getElementByName

10
Estrutura de Condição
O uso da estrutura de condição é essencial na construção de sistemas web
interativos. Basicamente, por meio dessa estrutura, o programa executará
uma determinada, caso atinja uma determinada condição.

Imagine que você está construindo um sistema para o DETRAN

(Departamento Estadual de Trânsito) e precisa verificar se determinado
usuário está habilitado para poder tirar carteira de habilitação. A condição
para que ele consiga tirar o documento é ser maior de idade, ou seja, ter 18
anos de idade ou mais. Na linguagem Javascript o código para atender essa
demanda será:

O resultado, ao acessar a página web, será:

Entenda: No Javascript, para determinar que estamos iniciando uma

condição, utilizamos o comando IF, que significa SE. Entre o ( ) determinamos
qual a condição que deverá ser seguida, no caso, SE MAIOR OU IGUAL A
18, exibe um alerta que pode tirar habilitação.

O comando ELSE, significa SE NÃO. Ou seja, SE NÃO atingir a condição, ele

executará o bloco dentro dessa condição. No caso, SE NÃO FOR MAIOR OU
IGUAL A 18, exibe um alerta que não pode tirar habilitação.

11
Por fim, para trabalharmos com essa estrutura, é necessário que tenhamos
em mente os operadores de condições. Para isso, analise a figura abaixo:

1- Crie um programa que receba o peso e a altura de uma pessoa e calcule o

Índice de Massa Corporal (IMC). Em seguida, exiba uma mensagem de
acordo com o resultado:

● Se o IMC for inferior a 18.5, exiba "Abaixo do peso".

● Se o IMC estiver entre 18.5 e 24.9, exiba "Peso normal".
● Se o IMC estiver entre 25 e 29.9, exiba "Sobrepeso".
● Se o IMC estiver entre 30 e 34.9, exiba "Obesidade grau 1".
● Se o IMC estiver entre 35 e 39.9, exiba "Obesidade grau 2".
● Se o IMC for superior a 40, exiba "Obesidade grau 3".

12
HTML com Javascript
Por meio do Javascript é possível fazer manipulação no documento HTML,
através do comando document.

Como vimos anteriormente, utilizando o comando document.getElement é

possível obter valores de uma determinada tag com um determinado nome ou
id.

Utilizando essa mesma estrutura, é possível fazer a inserção de elementos no

documento, conforme podemos analisar na figura a seguir:

Código HTML:

Código Javascript:

Entenda: Por meio das Id’s no HTML, inserimos esses elementos em uma
variável. Feito isso, utilizou-se o InnerHTML para inserir componentes HTML,
manipulando-os com o que foi armazenado nas variáveis.

13
1- Escreva um código que verifica se um número é positivo, negativo ou igual
a zero.

2- Escreva um código que solicita ao usuário dois números e exibe a soma

deles.

3- Crie uma página HTML com uma lista de imagens em miniatura e uma
área de visualização. Ao clicar em uma miniatura, exiba a imagem
correspondente na área de visualização.

4- Crie uma página HTML com um formulário de cadastro contendo campos

como nome, e-mail e telefone. Ao enviar o formulário, valide se todos os
campos estão preenchidos corretamente (por exemplo, se o e-mail possui um
formato válido). Exiba uma mensagem de erro ao lado de cada campo
inválido.

14
15