javascript (parte 1)

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


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)

*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

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)

Education