Post on 18-Feb-2017
JavaScript (parte I)JavaScript (parte I)
Karina Machado e Alex Camargo{karina.machado, alexcamargo}@furg.br
UNIVERSIDADE FEDERAL DO RIO GRANDECENTRO 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
JavaScript Prof. Alex Camargo
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
JavaScript Prof. Alex Camargo
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.
JavaScript Prof. Alex Camargo
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).
JavaScript Prof. Alex Camargo
1.3 Client-side x Server-side
Diferente de linguagens como: PHP, ASP, JSP, etc, o JavaScript executa no lado do cliente.
JavaScript Prof. Alex Camargo
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.
JavaScript Prof. Alex Camargo
1.4 Incorporando JS no HTML
Existem três maneiras de incorporar JS ao HTML.
Incorporado: inserir o script na seção head do documento.
JavaScript Prof. Alex Camargo
1.4 Incorporando JS no HTML
JavaScript Prof. Alex Camargo
Figura. Incorporando JS ao HTML: incorporado
1.4 Incorporando JS no HTML
Existem três maneiras de incorporar JS ao HTML.
Externo: escreve o script em um arquivo externo e insere como um link na seção head do documento.
JavaScript Prof. Alex Camargo
1.5 Comentários
Existem duas maneiras de fazer comentários em códigos JS.
Comentário de linha
JavaScript Prof. Alex Camargo
1.5 Comentários
Existem duas maneiras de fazer comentários em códigos JS.
Comentário de bloco
JavaScript Prof. Alex Camargo
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.
JavaScript Prof. Alex Camargo
3.1. Introdução
Os tipos de dados usados em JS são:
Primários: String, Number, Boolean.
Compostos: Object, Array.
Especiais: Null, Undefined.
JavaScript Prof. Alex Camargo
3.2 String
Strings são usadas para armazenamento e manipulação de texto.
JavaScript Prof. Alex Camargo
3.3 Number
O JS tem somente um tipo numérico, o Number. Pode conter valores com, ou sem, casas decimais.
JavaScript Prof. Alex Camargo
3.5 Array
Arrays são utilizados para armazenar múltiplos valores em uma única variável.
JavaScript Prof. Alex Camargo
3.6 Object
Em JS, objects podem conter muitos valores. Tais valores são escritos em pares nome:valor (chamados propriedades).
JavaScript Prof. Alex Camargo
3.6 Object
Em JS, objects podem conter muitos valores. Tais valores são escritos em pares nome:valor (chamados propriedades).
JavaScript Prof. Alex Camargo
Figura. Prorpiedades de um objeto
3.8 Undefined
Undefined é uma variável sem a especificação de qual tipo de dado a ser armazenado.
JavaScript Prof. Alex Camargo
4. Operadores
Os operadores em JS são classificados em:
Operadores Aritiméticos;
Operadores de Comparação;
Operadores de Atribuição.
JavaScript Prof. Alex Camargo
4.1 Operadores Aritiméticos
Operadores aritméticos são usados para realizar operações aritméticas em números ou variáveis.
JavaScript Prof. Alex Camargo
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.
JavaScript Prof. Alex Camargo
Figura. Operadores de comparação
4.3 Operadores de Atribuição
Operadores de atribuição atribuem valores a variáveis.
JavaScript Prof. Alex Camargo
Figura. Operadores de atribuição
5.1 Introdução
O JS pode ser utilizado para manipular objetos HMTL.
Para acessar elementos HMTL utilizamos o método getElementById.
JavaScript Prof. Alex Camargo
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.
JavaScript Prof. Alex Camargo
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).
JavaScript Prof. Alex Camargo
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)
*Para a resolução de alguns exercícios você vai precisar fazer a conversão de string para number: Number(variável).
JavaScript Prof. Alex Camargo
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.
JavaScript Prof. Alex Camargo