Scribd
Carregar
14K visualizações

Aula6 JavaScript

A aula abordou a linguagem JavaScript, explicando que é uma linguagem dinâmica e orientada a objetos que roda no navegador do cliente. Apresentou os principais tipos de dados em JavaScript como números, strings, booleanos e objetos. Também explicou estruturas de controle como if/else e switch, além de operadores, funções popup e loops.

Enviado por

Any Beatriz
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
14K visualizações

Aula6 JavaScript

A aula abordou a linguagem JavaScript, explicando que é uma linguagem dinâmica e orientada a objetos que roda no navegador do cliente. Apresentou os principais tipos de dados em JavaScript como números, strings, booleanos e objetos. Também explicou estruturas de controle como if/else e switch, além de operadores, funções popup e loops.

Enviado por

Any Beatriz
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 49

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

[email protected]

Você também pode gostar