Javascript (parte 1)

JavaScript (parte I)JavaScript (parte I)
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. Uma breve história
- 1.1 Introdução
- 1.2 JavaScript x JAVA
- 1.3 Client-side x Server-side
- 1.4 Incorporando JS no HTML
- 1.5 Comentários
2. Variáveis e Constantes
- 2.1 Introdução
- 2.2 Variáveis
- 2.3 Constantes
JavaScript Prof. Alex Camargo

I. Sumário
3. Tipos de dados
- 3.1 Introdução
- 3.2 String
- 3.3 Number
- 3.4 Boolean
- 3.5 Array
- 3.6 Object
- 3.7 Null
- 3.8 Undefined
4. Operadores
- 4.1 Introdução
- 4.2 Operadores Aritiméticos

I. Sumário
- 4.3 Operadores de Comparação
- 4.4 Operadores de Atribuição
5. Manipulando Objetos
- 5.1 Introdução
- 5.2 getElementById

1. Uma breve história

1.1. Introdução
JavaScript é uma linguagem criada em 1995 por Brendan Eich,
funcionário do projeto Netscape.
 Utilizado para dar interatividade a páginas HTML.
 Linguagem interpretada.
 Atualmente é base para vários frameworks.

1.2 JavaScript x JAVA
Apesar dos nomes bastante parecidos, JavaScript é diferente de
JAVA.
 JavaScript é uma linguagem de script para navegadores
(Netscape).
 JAVA é uma linguagem de programação de propósito geral
(Oracle).

1.3 Client-side x Server-side
Diferente de linguagens como: PHP, ASP, JSP, etc, o JavaScript
executa no lado do cliente.
Figura. Requisição HTTP

1.4 Incorporando JS no HTML
Existem três maneiras de incorporar JS ao HTML.
 Inline: através dos manipuladores de evento: onclick,
onmouseover, onload, etc.

Figura. Incorporando JS ao HTML: inline

 Incorporado: inserir o script na seção head do documento.

Figura. Incorporando JS ao HTML: incorporado

 Externo: escreve o script em um arquivo externo e insere
como um link na seção head do documento.

Figura. Incorporando JS ao HTML: externo

1.5 Comentários
Existem duas maneiras de fazer comentários em códigos JS.
 Comentário de linha

1.5 Comentários
Figura. Comentário de linha

1.5 Comentários
Existem duas maneiras de fazer comentários em códigos JS.
 Comentário de bloco

1.5 Comentários
Figura. Comentário de bloco

2. Variáveis e Constantes

2.1. Introdução
As variáveis/constantes em JS são fracamente tipadas e case
sensitive.
 Podem começar com letra, cifrão e underline.
 Não podem iniciar com número.
 Devem ser declaradas com a palavra-chave var/const.

2.2 Variáveis
Exemplos de declaração de variável.

2.1. Introdução
Figura. Declaração de variável

2.2 Variáveis
Figura. Declaração de variável (renderização)

2.3 Constantes
Exemplos de declaração de constante.

2.3 Constantes
Figura. Declaração de constante

2.3 Constantes
Figura. Declaração de constante (renderização)

3. Tipos de dados

3.1. Introdução
Os tipos de dados usados em JS são:
 Primários: String, Number, Boolean.
 Compostos: Object, Array.
 Especiais: Null, Undefined.

3.2 String
Strings são usadas para armazenamento e manipulação de
texto.

3.2 String
Figura. Tipo de dado: string

3.3 Number
O JS tem somente um tipo numérico, o Number. Pode conter
valores com, ou sem, casas decimais.

3.3 Number
Figura. Tipo de dado: number

3.4 Boolean
Representa um valor: true ou false.

3.4 Boolean
Figura. Tipo de dado: boolean

3.5 Array
Arrays são utilizados para armazenar múltiplos valores em uma
única variável.

3.5 Array
Figura. Tipo de dado: array

3.6 Object
Em JS, objects podem conter muitos valores. Tais valores são
escritos em pares nome:valor (chamados propriedades).

3.6 Object
Em JS, objects podem conter muitos valores. Tais valores são
escritos em pares nome:valor (chamados propriedades).
Figura. Prorpiedades de um objeto

3.6 Object
Figura. Tipo de dado: object

3.7 Null
Inicializa uma variável com valor nulo (nada).

3.7 Null
Figura. Tipo de dado: null

3.8 Undefined
Undefined é uma variável sem a especificação de qual tipo de
dado a ser armazenado.

3.8 Undefined
Figura. Tipo de dado: undefined

4. Operadores

4. Operadores
Os operadores em JS são classificados em:
 Operadores Aritiméticos;
 Operadores de Comparação;
 Operadores de Atribuição.

4.1 Operadores Aritiméticos
Operadores aritméticos são usados para realizar operações
aritméticas em números ou variáveis.
Figura. Operadores aritméticos

4.2 Operadores de Comparação
Os operadores de comparação são usados para determinar a
igualdade ou diferença entre variáveis ou valores.
Figura. Operadores de comparação

4.3 Operadores de Atribuição
Operadores de atribuição atribuem valores a variáveis.
Figura. Operadores de atribuição

5. Manipulando Objetos

5.1 Introdução
O JS pode ser utilizado para manipular objetos HMTL.
 Para acessar elementos HMTL utilizamos o método
getElementById.

5.2 getElementById
O método getElementById() retorna o elemento que tem o
atributo ID com o valor especificado.
 O ID é uma identificação de um elemento HTML.
 Um ID deve ser único dentro de uma página.
 O resultado é um OBJETO.

5.2 getElementById
Figura. Método getElementById

5.2 getElementById
Figura. Método getElementById (renderização)

II. Exercícios
1. Faça um programa que escreva a mensagem "Alô mundo!" na
página.
2. Faça um programa que peça um número através de um input e
então mostre a mensagem "O número informado foi [número]." via
alert.
3. Faça um programa que receba o nome completo e salário de um
funcionário através de um input, calcule e escreva na página o
nome seguido do novo salário, sabendo-se que este sofreu um
aumento de 25%.
*Para a resolução de alguns exercícios você vai precisar fazer a
conversão de string para number: Number(variável).

II. Exercícios
4. Faça um programa que receba o nome e o ano de nascimento de
uma pessoa através de um input. Com base no ano atual, calcule e
mostre via alert o nome seguido da idade dessa pessoa.
5. Faça um programa que calcule e exiba o peso ideal de uma
pessoa tendo como entrada, via prompt, a sua altura. Use a
fórmula: (72.7*altura)-58.
6. Faça um programa que peça 3 números via prompt. Calcule e
mostre via alert:
a. o produto do dobro do primeiro mais a metade do segundo.
b. a soma do triplo do primeiro com o terceiro.
c. o terceiro elevado ao cubo.
7. Faça um programa que peça a temperatura em graus Farenheit
via prompt, converta e mostre a temperatura em graus Celsius via
alert. C = (5* (F-32)/9)

II. Exercícios
8. Faça um programa que receba através de inputs as 4 notas
bimestrais e escreva a média (via alert ou na página).
9. Faça um programa para efetuar o cálculo da quantidade de litros
de combustível gastos em uma viagem. Deverão ser fornecidos,
através de inputs, o tempo gasto na viagem, consumo e velocidade
média do veículo. Escreva o resultado na página.
10. Em quantos meses, aproximadamente, o custo da transição
para energia renovável será compensado? Receba o custo de
implementação. Receba o custo mensal da energia convencional.
Calcule a quantidade de meses. Mostre a quantidade de meses. Os
valores devem ser recebidos via input ou prompt. O resultado
dever ser exibido via alert ou escrito na página.

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 1)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Javascript (parte 1)

Semelhante a Javascript (parte 1) (20)

Mais de Alex Camargo

Mais de Alex Camargo (20)

Último

Último (20)

Javascript (parte 1)