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 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.
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 bom suporte a expressões
regulares.
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 na maioria dos navegadores
web.
O bloco de <script> pode ser adicionado
ao elemento <head> e/ou <body>.
Linguagem JavasScript
Linguagem JavasScript
JavaScript é uma linguagem Case
Sensitive.
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
*/
Olá Mundo em 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: _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 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 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
var x = 4,238e2; //declarado como
potência de 10 que equivale a 423,8
Tipos de Dados
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 == 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 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
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
// sequência de caractéres nula e nada será
impresso.
Tipos de Dados
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
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
Comparação
Operadores
Lógicos
Estruturas de Controle
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 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 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
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 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 o Confirm 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.
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...devo
continuar??")) {
alert("Continuando")
} else {
alert("Parando")
}
Popup Boxes
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 texto’ é um texto, opcional, que
aparecerá na linha de digitação do usuário
Popup Boxes
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 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
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 número atual é: " + numero);
}
Loops
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 é: " + numero);
numero = numero + 1;
}
Loops
Ex.:
var numero = 1;
while (numero <= 5) {
alert("O número atual é: " + numero);
numero = numero + 1;
}
Loops
Do ... While
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.
Loops
do {
//código a ser executado.
} while (var <= valorFinal);
Ex.:
var numero = 1;
do {
alert("O número atual é: " + numero);
numero = numero + 1;
} while (numero < 1);
Conversões
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 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 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 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 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 a soma de
todos os valores inteiros existentes no
intervalo destes dois números.
Exercícios
4 – Faça o seguinte script:
Exercícios
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, 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
