Vous êtes sur la page 1sur 49
UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLÉGIO AGRÍCOLA DE FREDERICO WESTPHALEN WEB DESIGN II
UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM
COLÉGIO AGRÍCOLA DE FREDERICO WESTPHALEN
WEB DESIGN II
WEB DESIGN II
AULA 6 – Linguagem
Javascript
DISCIPLINA: WEB DESIGN II
PROF.: ROMULO VANZIN
Data: 23/10/2013
Linguagem JavasScript  JavaScript é uma linguagem de programação de propósito geral, dinâmica e possui
Linguagem JavasScript  JavaScript é uma linguagem de programação de propósito geral, dinâmica e possui

Linguagem JavasScript

Linguagem JavasScript  JavaScript é uma linguagem de programação de propósito geral, dinâmica e possui

JavaScript é uma linguagem de programação de propósito geral, dinâmica e possui características do paradigma de orientação a objetos.

Rodará no browser do cliente.

JavaScript é uma linguagem de programação completa, também conhecida como uma linguagem de script. Possuindo características comuns encontradas na maioria das linguagens de programação, como:

variáveis, funções, controle de fluxo, e todo um conjunto de operadores, JavaScript possui algumas capacidades de linguagem orientada a objeto.

Linguagem JavasScript  Os comandos JavaScript são embutidos nas páginas HTML e interpretados pelo navegador.
Linguagem JavasScript  Os comandos JavaScript são embutidos nas páginas HTML e interpretados pelo navegador.

Linguagem JavasScript

Linguagem JavasScript  Os comandos JavaScript são embutidos nas páginas HTML e interpretados pelo navegador. 

Os comandos JavaScript são embutidos nas páginas HTML e interpretados pelo navegador.

Eles são capazes de controlar não somente o conteúdo de documentos HTML, mas também o comportamento deles (eventos).

Linguagem JavasScript  Linguagem interpretada e não compilada.  Oferece regulares. bom suporte a expressões
Linguagem JavasScript  Linguagem interpretada e não compilada.  Oferece regulares. bom suporte a expressões

Linguagem JavasScript

Linguagem JavasScript  Linguagem interpretada e não compilada.  Oferece regulares. bom suporte a expressões 

Linguagem interpretada e não compilada.

Oferece regulares.

bom

suporte

a

expressões

Através de JavaScript é possível modificar dinamicamente os estilos de uma página HTML.

Linguagem JavasScript  Não é necessário instalação ou configuração de nenhuma biblioteca.  Funciona web.
Linguagem JavasScript  Não é necessário instalação ou configuração de nenhuma biblioteca.  Funciona web.

Linguagem JavasScript

Linguagem JavasScript  Não é necessário instalação ou configuração de nenhuma biblioteca.  Funciona web. na

Não

é

necessário

instalação

ou

configuração de nenhuma biblioteca.

Funciona web.

na

maioria

dos

navegadores

O bloco de <script> pode ser adicionado ao elemento <head> e/ou <body>.

Linguagem JavasScript
Linguagem JavasScript

Linguagem JavasScript

Linguagem JavasScript
Linguagem JavasScript
Linguagem JavasScript  JavaScript Sensitive. é uma linguagem Case  O uso de ponto e
Linguagem JavasScript  JavaScript Sensitive. é uma linguagem Case  O uso de ponto e

Linguagem JavasScript

Linguagem JavasScript  JavaScript Sensitive. é uma linguagem Case  O uso de ponto e vírgula

JavaScript Sensitive.

é

uma

linguagem

Case

O uso de ponto e vírgula ao término de instruções é facultativo, a não ser que haja mais de uma instrução na mesma linha (o uso de ponto e vírgula é uma boa prática de programação em JavaScript)

Comentários em JavaScript  Linha : // Comentário  Bloco : /* Comentário de Bloco
Comentários em JavaScript  Linha : // Comentário  Bloco : /* Comentário de Bloco

Comentários em JavaScript

Comentários em JavaScript  Linha : // Comentário  Bloco : /* Comentário de Bloco */

Linha:

// Comentário

Bloco:

/* Comentário de Bloco

*/

Olá Mundo em Javascript  Da um alerta na página com a mensagem <script type="text/javascript">
Olá Mundo em Javascript  Da um alerta na página com a mensagem <script type="text/javascript">

Olá Mundo em Javascript

Olá Mundo em Javascript  Da um alerta na página com a mensagem <script type="text/javascript">

Da um alerta na página com a mensagem <script type="text/javascript"> alert("Hello World"); </script>

Escreve no documento onde foi inserido o código <script type="text/javascript"> document.write("Hello World"); </script>

Variáveis Javascript  Deve começar com:  Caractere  Cifrão  Sublinhado  Exemplos válidos
Variáveis Javascript  Deve começar com:  Caractere  Cifrão  Sublinhado  Exemplos válidos

Variáveis Javascript

Variáveis Javascript  Deve começar com:  Caractere  Cifrão  Sublinhado  Exemplos válidos :

Deve começar com:

Caractere

Cifrão

Sublinhado

Exemplos válidos: _teste, valor, $nro, msg01, etc.

Exemplos inválidos: 9teste, x valor, (variavel

Variáveis Javascript  Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações
Variáveis Javascript  Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações

Variáveis Javascript

Variáveis Javascript  Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações

Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declarações formais.

Existem dois tipos de abrangência para as variáveis:

“Global” - Declaradas/criadas fora de uma função. As variáveis globais podem ser acessadas em qualquer parte do programa.

“Local” - Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da função onde foram criadas e precisa ser definida com a instrução Var.

Ex.:

var teste = "teste";

teste = "teste";

Tipos de Dados  Tipos Numéricos  Em JavaScript os números são representados pelo padrão
Tipos de Dados  Tipos Numéricos  Em JavaScript os números são representados pelo padrão

Tipos de Dados

Tipos de Dados  Tipos Numéricos  Em JavaScript os números são representados pelo padrão IEEE

Tipos Numéricos Em JavaScript os números são representados pelo padrão IEEE 754. Todos os valores numéricos são "declarados" pela simples atribuição dos valores a uma variável.

Exemplos:

Inteiros

var x = 35; //atribuição na forma comum

var x = 0xBF; //notação hexadecimal que equivale a

191

Tipos de Dados  Ponto flutuante  var x = 12,3; //declarado na forma comum
Tipos de Dados  Ponto flutuante  var x = 12,3; //declarado na forma comum

Tipos de Dados

Tipos de Dados  Ponto flutuante  var x = 12,3; //declarado na forma comum 

Ponto flutuante var x = 12,3; //declarado na forma comum

var

4,238e2;

//declarado

x

=

como

potência de 10 que equivale a 423,8

Tipos de Dados  Booleano  Uma variável do tipo booleano pode assumir apenas dois
Tipos de Dados  Booleano  Uma variável do tipo booleano pode assumir apenas dois

Tipos de Dados

Tipos de Dados  Booleano  Uma variável do tipo booleano pode assumir apenas dois valores:

Booleano

Uma variável do tipo booleano pode assumir apenas dois valores: true e false.

Os valores deste tipo são em geral usados pela linguagem como resultado de comparações e podem ser usados pelo usuário para valores de teste ou para atributos que possuam apenas dois estados.

Equivale ao uso de um inteiro com valores 0 ou 1 na linguagem C.

O JavaScript converte automaticamente true para 1 e false para 0 quando isso for necessário.

Tipos de Dados var a = 14; var b = 42; var tr = (a
Tipos de Dados var a = 14; var b = 42; var tr = (a

Tipos de Dados

Tipos de Dados var a = 14; var b = 42; var tr = (a ==

var a = 14; var b = 42; var tr = (a == 14); var fl = (a == b); // Neste caso tr irá conter o valor true e fl o valor false. var int1 = tr+1; var int2 = fl+1; // A variável int1 irá conter o valor 2 (true + 1), pois true é // automaticamente convertido para 1 e int2 irá conter o valor 1 // (false + 1), pois false é convertido para 0.

Tipos de Dados  Indefinido  Uma variável é indefinida quando ela foi declarada de
Tipos de Dados  Indefinido  Uma variável é indefinida quando ela foi declarada de

Tipos de Dados

Tipos de Dados  Indefinido  Uma variável é indefinida quando ela foi declarada de alguma

Indefinido Uma variável é indefinida quando ela foi declarada de alguma forma mas não possui nenhum valor concreto armazenado. Quando tentamos acessar uma variável que não teve nenhum valor associado a ela teremos como retorno "undefined"(indefinido).

Tipos de Dados
Tipos de Dados

var marvin;

window.alert(marvin); // Quando tentamos imprimir a variável marvin na janela de alerta // será impresso "undefined" pois não há nenhum valor associado a ela. var text = ""; // O mesmo não ocorre com o caso acima, pois essa variável contém uma

será

//

sequência

de

caractéres

nula

nada

e

impresso.

Tipos de Dados  NULL  O null é a ausência de valor; quando atribuímos
Tipos de Dados  NULL  O null é a ausência de valor; quando atribuímos

Tipos de Dados

Tipos de Dados  NULL  O null é a ausência de valor; quando atribuímos null

NULL

O null é a ausência de valor; quando atribuímos null a um objeto ou variável significa que essa variável ou objeto não possui valor válido.

Para efeito de comparação, se usarmos o operador de igualdade "==", JavaScript irá considerar iguais os valores null e undefined. E isso não afeta o uso da comparação (var.metodo == null) quando queremos descobrir se um objeto possui determinado método. No entanto, se for necessário diferenciar os dois valores é recomendável o uso do operador "===" de identicidade. Assim, para efeito de comparação, undefined e null são iguais, mas não idênticos.

Ex.: var vazio = null;

Tipos de Dados
Tipos de Dados

STRINGS

Strings são sequências de caracteres. Em JavaScript a string pode ser tanto um tipo primitivo de dado como um objeto; no entanto, ao manipulá-la temos a impressão de que sejam objetos pois as strings em JavaScript possuem métodos que podemos invocar para realizar determinadas operações sobre elas. Essa confusão ocorre porque quando criamos uma string primitiva, o JavaScript cria também um objeto string e converte automaticamente entre esses tipos quando necessário.

Para

se

declarar

uma

string,

basta

colocar

uma

sequência de caracteres entre aspas simples ou duplas.

Ex.: var str = "Eu sou uma string!";

Operadores  Aritméticos
Operadores  Aritméticos

Operadores

Operadores  Aritméticos

Aritméticos

Operadores  Aritméticos
Operadores  Comparação
Operadores  Comparação

Operadores

Operadores  Comparação

Comparação

Operadores  Comparação
Operadores  Lógicos
Operadores  Lógicos

Operadores

Operadores  Lógicos

Lógicos

Operadores  Lógicos
Estruturas de Controle  IF ELSE  Utilizamos essa declaração quando necessitamos que somente uma
Estruturas de Controle  IF ELSE  Utilizamos essa declaração quando necessitamos que somente uma

Estruturas de Controle

Estruturas de Controle  IF ELSE  Utilizamos essa declaração quando necessitamos que somente uma parte

IF

ELSE

Utilizamos essa declaração quando necessitamos que somente uma parte do código seja executada e quando uma determinada condição for verdadeira. Ex.:

if (condição) { //código a ser executado quando a condição for verdadeira. } else { //código a ser executado quando a condição for falsa.

}

Estruturas de Controle  switch  Utilizamos também essa declaração quando desejamos selecionar um bloco
Estruturas de Controle  switch  Utilizamos também essa declaração quando desejamos selecionar um bloco

Estruturas de Controle

Estruturas de Controle  switch  Utilizamos também essa declaração quando desejamos selecionar um bloco de

switch

Utilizamos também essa declaração quando desejamos selecionar um bloco de código entre vários outros. É uma forma mais prática para alguns casos.

switch(expressão) {

case valor 1:

//código a ser executado se a expressão = valor 1; break case valor 2:

//código a ser executado se a expressão = valor 2; break default:

//código a ser executado se a expressão for diferente do valor 1 e valor 2;

}

Estruturas de Controle  switch  Utilizamos também essa declaração quando desejamos selecionar um bloco
Estruturas de Controle  switch  Utilizamos também essa declaração quando desejamos selecionar um bloco

Estruturas de Controle

Estruturas de Controle  switch  Utilizamos também essa declaração quando desejamos selecionar um bloco de

switch

Utilizamos também essa declaração quando desejamos selecionar um bloco de código entre vários outros. É uma forma mais prática para alguns casos.

switch(expressão) {

case valor 1:

//código a ser executado se a expressão = valor 1; break case valor 2:

//código a ser executado se a expressão = valor 2; break default:

//código a ser executado se a expressão for diferente do valor 1 e valor 2;

}

Popup Boxes  Os popup boxes no JavaScript nos permitem alertar o usuário sobre algum
Popup Boxes  Os popup boxes no JavaScript nos permitem alertar o usuário sobre algum

Popup Boxes

Popup Boxes  Os popup boxes no JavaScript nos permitem alertar o usuário sobre algum acontecimento,

Os popup boxes no JavaScript nos permitem alertar o usuário sobre algum acontecimento, pedir-lhe uma confirmação para que uma determinada ação possa ser executada e pedir-lhe que nos informe algum dado.

Assim, podemos criar três tipos de popup boxes. São eles: Alert box, Confirm box e Prompt box.

Popup Boxes  Alert Box  Sintaxe: alert("Olá Mundo!");  Esse tipo de popup box
Popup Boxes  Alert Box  Sintaxe: alert("Olá Mundo!");  Esse tipo de popup box

Popup Boxes

Popup Boxes  Alert Box  Sintaxe: alert("Olá Mundo!");  Esse tipo de popup box tem

Alert Box

Sintaxe: alert("Olá Mundo!");

Esse tipo de popup box tem o objetivo de alertar o usuário sobre algo que ocorreu durante alguma ação por ele executada.

Um

botão de OK

é exibido junto a ela.

Para prosseguir com a navegação é necessário que o usuário clique nesse botão.

Popup Boxes  Confirm Box  Sintaxe: confirm("Você deseja continuar?");  Com Box, podemos ter
Popup Boxes  Confirm Box  Sintaxe: confirm("Você deseja continuar?");  Com Box, podemos ter

Popup Boxes

Popup Boxes  Confirm Box  Sintaxe: confirm("Você deseja continuar?");  Com Box, podemos ter a

Confirm Box

Sintaxe: confirm("Você deseja continuar?");

Com

Box, podemos ter a

certeza se o usuário deseja ou não executar determinada ação, uma vez que esse box exibe dois botões: OK e Cancel.

Confirm

o

Ao clicar em OK o box retorna true e ao clicar em Cancel o box retorna false.

Popup Boxes Ex.: if (confirm ("Algo está errado continuar??")) { alert("Continuando") } else {
Popup Boxes Ex.: if (confirm ("Algo está errado continuar??")) { alert("Continuando") } else {

Popup Boxes

Popup Boxes Ex.: if (confirm ("Algo está errado continuar??")) { alert("Continuando") } else {

Ex.:

if (confirm ("Algo está errado continuar??")) { alert("Continuando") } else { alert("Parando")

}

devo

Popup Boxes  Prompt Box  Sintaxe:  Receptor = prompt ("Minha mensagem", "Meu texto")
Popup Boxes  Prompt Box  Sintaxe:  Receptor = prompt ("Minha mensagem", "Meu texto")

Popup Boxes

Popup Boxes  Prompt Box  Sintaxe:  Receptor = prompt ("Minha mensagem", "Meu texto") 

Prompt Box

Sintaxe:

Receptor = prompt ("Minha mensagem", "Meu texto")

Receptor é a variável que vai receber a informação digitada pelo usuário. ‘Minha mensagem’ é a mensagem que vai aparecer como Label da caixa de input

‘Meu

que

texto’

é

texto,

opcional,

um

aparecerá na linha de digitação do usuário

Popup Boxes  Ex.: var nome = prompt("Informe seu nome", ""); document.write("Bem vindo = "
Popup Boxes  Ex.: var nome = prompt("Informe seu nome", ""); document.write("Bem vindo = "

Popup Boxes

Popup Boxes  Ex.: var nome = prompt("Informe seu nome", ""); document.write("Bem vindo = " +

Ex.:

var nome = prompt("Informe seu nome", ""); document.write("Bem vindo = " + nome);

Loops  As declarações de looping em JavaScript, assim como em outras linguagens, tem por
Loops  As declarações de looping em JavaScript, assim como em outras linguagens, tem por

Loops

Loops  As declarações de looping em JavaScript, assim como em outras linguagens, tem por objetivo

As declarações de looping em JavaScript, assim como em outras linguagens, tem por objetivo a execução de um mesmo bloco de código por uma determinada quantidade de vezes ou enquanto uma condição for verdadeira.

Loops  Declaração FOR  Looping que percorre determinado bloco de código por uma quantidade
Loops  Declaração FOR  Looping que percorre determinado bloco de código por uma quantidade

Loops

Loops  Declaração FOR  Looping que percorre determinado bloco de código por uma quantidade especificada

Declaração FOR Looping que percorre determinado bloco de código por uma quantidade especificada de vezes. for (var = valorInicial; var <= valorFinal; var = var + incremento)

{

//código a ser executado.

}

Loops var numero = 1; for (numero = 1; numero <= 5; numero++) { alert("O
Loops var numero = 1; for (numero = 1; numero <= 5; numero++) { alert("O

Loops

Loops var numero = 1; for (numero = 1; numero <= 5; numero++) { alert("O número

var numero = 1;

for (numero = 1; numero <= 5; numero++)

{

alert("O número atual é: " + numero);

}

Loops  Declaração While  Looping que percorre determinado bloco de código se e enquanto
Loops  Declaração While  Looping que percorre determinado bloco de código se e enquanto

Loops

Loops  Declaração While  Looping que percorre determinado bloco de código se e enquanto a

Declaração While Looping que percorre determinado bloco de código se e enquanto a condição for verdadeira.

while (var <= valorFinal) { //código a ser executado.

}

Loops  Ex.: var numero = 1; while (numero <= 5) { alert("O número atual
Loops  Ex.: var numero = 1; while (numero <= 5) { alert("O número atual

Loops

Loops  Ex.: var numero = 1; while (numero <= 5) { alert("O número atual é:

Ex.:

var numero = 1; while (numero <= 5) { alert("O número atual é: " + numero); numero = numero + 1;

}

Loops  Ex.: var numero = 1; while (numero <= 5) { alert("O número atual
Loops  Ex.: var numero = 1; while (numero <= 5) { alert("O número atual

Loops

Loops  Ex.: var numero = 1; while (numero <= 5) { alert("O número atual é:

Ex.:

var numero = 1; while (numero <= 5) { alert("O número atual é: " + numero); numero = numero + 1;

}

Loops  Do  Esse loop é uma variável do loop while. Ele sempre executará
Loops  Do  Esse loop é uma variável do loop while. Ele sempre executará

Loops

Loops  Do  Esse loop é uma variável do loop while. Ele sempre executará um

Do

Esse loop é uma variável do loop while. Ele sempre executará um bloco de código uma vez e o repetirá enquanto a condição for verdadeira. Mesmo que uma condição seja falsa, esse loop ocorrerá uma vez pois a condição é verificada após a execução.

While

Loops do { //código a ser executado. } while (var <= valorFinal); Ex.: var numero
Loops do { //código a ser executado. } while (var <= valorFinal); Ex.: var numero

Loops

Loops do { //código a ser executado. } while (var <= valorFinal); Ex.: var numero =

do { //código a ser executado.

} while (var <= valorFinal);

Ex.:

var numero = 1; do { alert("O número atual é: " + numero); numero = numero + 1;

Conversões  FUNÇÃO ISNAN  A função isNaN tem a finalidade de testar uma variável
Conversões  FUNÇÃO ISNAN  A função isNaN tem a finalidade de testar uma variável

Conversões

Conversões  FUNÇÃO ISNAN  A função isNaN tem a finalidade de testar uma variável para

FUNÇÃO ISNAN A função isNaN tem a finalidade de testar uma variável para determinar se é ou não é um número.

Esta função retorna verdadeiro se a variável não for um número.

Ex.:

if(isNaN(valor)){

alert("Não é um número!!!");

}

Conversões  FUNÇÃO PARSEFLOAT  Com a função parseFloat, é feita a conversão de um
Conversões  FUNÇÃO PARSEFLOAT  Com a função parseFloat, é feita a conversão de um

Conversões

Conversões  FUNÇÃO PARSEFLOAT  Com a função parseFloat, é feita a conversão de um objeto

FUNÇÃO PARSEFLOAT

Com a função parseFloat, é feita a conversão de um objeto string, retornando um valor de ponto flutuante.

valor=parseFloat("123.456");

alert(valor);

Conversões  FUNÇÃO PARSEINT  Com a função parseInt, o usuário poderá converter valores de
Conversões  FUNÇÃO PARSEINT  Com a função parseInt, o usuário poderá converter valores de

Conversões

Conversões  FUNÇÃO PARSEINT  Com a função parseInt, o usuário poderá converter valores de string

FUNÇÃO PARSEINT

Com a função parseInt, o usuário poderá converter valores de string em valores numéricos inteiros equivalentes.

valor=parseInt("123.456");

alert(valor);

Exercícios  1 - Faça um script que solicite a entrada da idade do usuário
Exercícios  1 - Faça um script que solicite a entrada da idade do usuário

Exercícios

Exercícios  1 - Faça um script que solicite a entrada da idade do usuário e

1 - Faça um script que solicite a entrada da idade do usuário e apresente a seguinte saída (numa caixa de alerta):

se a idade for menor que 18:

“Você pode entrar no site. Divirta-se!”

se a idade for igual ou maior que 18:

“Você não pode entrar no site. ”

Exercícios  2 - Faça um script que solicite dois números do usuário e escreva
Exercícios  2 - Faça um script que solicite dois números do usuário e escreva

Exercícios

Exercícios  2 - Faça um script que solicite dois números do usuário e escreva a

2 - Faça um script que solicite dois números do usuário e escreva a seguinte informação:

“NUM1 + NUM2 = SOMA”, onde NUM1 e NUM2 são os valores digitados, e SOMA o resultado.

Exercícios  3 - Faça um script que solicite dois números do usuário e escreva
Exercícios  3 - Faça um script que solicite dois números do usuário e escreva

Exercícios

Exercícios  3 - Faça um script que solicite dois números do usuário e escreva a

3 - Faça um script que solicite dois números do usuário e escreva a soma de todos os valores inteiros existentes no intervalo destes dois números.

Exercícios  4 – Faça o seguinte script:
Exercícios  4 – Faça o seguinte script:

Exercícios

Exercícios  4 – Faça o seguinte script:

4 – Faça o seguinte script:

Exercícios  4 – Faça o seguinte script:
Exercícios  5 – Faça um script que encontre a soma de todos os números
Exercícios  5 – Faça um script que encontre a soma de todos os números

Exercícios

Exercícios  5 – Faça um script que encontre a soma de todos os números pares

5 – Faça um script que encontre a soma de todos os números pares de 1 a 100.

6 - Faça um programa que calcule a tabuada de um número inteiro qualquer digitado pelo usuário. Por exemplo: Se for digitado “3”, o programa deverá imprimir em tela toda a tabuada do número (3x1=3,

3x2=6, 3x3=9

3x9=27,

3x10=30).

Exercícios  7 - Josiel disse a seu amigo que seu carro é econômico, pois,
Exercícios  7 - Josiel disse a seu amigo que seu carro é econômico, pois,

Exercícios

Exercícios  7 - Josiel disse a seu amigo que seu carro é econômico, pois, faz

7 - Josiel disse a seu amigo que seu carro é econômico, pois, faz 16km com 1 litro de gasolina. Faça um programa, que leia a quantidade de quilômetros percorridos por um carro, e a quantidade de litros que foram necessários para realizar o percurso, calcule e apresente quantos quilômetros/litro fez este carro.

DÚVIDAS http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br
DÚVIDAS http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br

DÚVIDAS

DÚVIDAS http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br

http://www.cafw.ufsm.br/~romulo

romulovanzin@yahoo.com.br