Vous êtes sur la page 1sur 49

UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLGIO AGRCOLA 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 programao de propsito geral, dinmica e possui caractersticas do paradigma de orientao a objetos. Rodar no browser do cliente. JavaScript uma linguagem de programao completa, tambm conhecida como uma linguagem de script. Possuindo caractersticas comuns encontradas na maioria das linguagens de programao, como: variveis, funes, controle de fluxo, e todo um conjunto de operadores, JavaScript possui algumas capacidades de linguagem orientada a objeto.

Linguagem JavasScript

Os comandos JavaScript so embutidos nas pginas HTML e interpretados pelo navegador. Eles so capazes de controlar no somente o contedo de documentos HTML, mas tambm o comportamento deles (eventos).

Linguagem JavasScript

Linguagem interpretada e no compilada. Oferece bom regulares. suporte a expresses

Atravs de JavaScript possvel modificar dinamicamente os estilos de uma pgina HTML.

Linguagem JavasScript

No necessrio instalao configurao de nenhuma biblioteca.

ou

Funciona na maioria dos navegadores web. O bloco de <script> pode ser adicionado ao elemento <head> e/ou <body>.

Linguagem JavasScript

Linguagem JavasScript

JavaScript Sensitive.

uma

linguagem

Case

O uso de ponto e vrgula ao trmino de instrues facultativo, a no ser que haja mais de uma instruo na mesma linha (o uso de ponto e vrgula uma boa prtica de programao em JavaScript)

Comentrios em JavaScript

Linha:
// Comentrio

Bloco:
/* Comentrio de ... ... Bloco */

Ol Mundo em Javascript
Da um alerta na pgina com a mensagem <script type="text/javascript"> alert("Hello World"); </script>

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

Variveis Javascript

Deve comear com:


Caractere Cifro Sublinhado

Exemplos vlidos: _teste, valor, $nro, msg01, etc. Exemplos invlidos: 9teste, x valor, (variavel

Variveis Javascript

Em JavaScript, variveis dinmicas podem ser criadas e inicializadas sem declaraes formais. Existem dois tipos de abrangncia para as variveis:

Global - Declaradas/criadas fora de uma funo. As variveis globais podem ser acessadas em qualquer parte do programa.

Local - Declaradas/criadas dentro de uma funo. S podem ser utilizadas dentro da funo onde foram criadas e precisa ser definida com a instruo Var. Ex.: var teste = "teste"; teste = "teste";

Tipos de Dados

Tipos Numricos Em JavaScript os nmeros so representados pelo padro IEEE 754. Todos os valores numricos so "declarados" pela simples atribuio dos valores a uma varivel.
Exemplos: Inteiros var

x = 35; //atribuio na forma comum var x = 0xBF; //notao hexadecimal que equivale a 191

Tipos de Dados
Ponto flutuante var x = 12,3; //declarado na forma comum var x = 4,238e2; //declarado como potncia de 10 que equivale a 423,8

Tipos de Dados

Booleano Uma varivel do tipo booleano pode assumir apenas dois valores: true e false. Os valores deste tipo so em geral usados pela linguagem como resultado de comparaes e podem ser usados pelo usurio 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 necessrio.

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 varivel 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 varivel indefinida quando ela foi declarada de alguma forma mas no possui nenhum valor concreto armazenado. Quando tentamos acessar uma varivel que no teve nenhum valor associado a ela teremos como retorno "undefined"(indefinido).

Tipos de Dados
var marvin; window.alert(marvin); // Quando tentamos imprimir a varivel marvin na janela de alerta // ser impresso "undefined" pois no h nenhum valor associado a ela. var text = ""; // O mesmo no ocorre com o caso acima, pois essa varivel contm uma // sequncia de caractres nula e nada ser impresso.

Tipos de Dados

NULL O null a ausncia de valor; quando atribumos null a um objeto ou varivel significa que essa varivel ou objeto no possui valor vlido. Para efeito de comparao, se usarmos o operador de igualdade "==", JavaScript ir considerar iguais os valores null e undefined. E isso no afeta o uso da comparao (var.metodo == null) quando queremos descobrir se um objeto possui determinado mtodo. No entanto, se for necessrio diferenciar os dois valores recomendvel o uso do operador "===" de identicidade. Assim, para efeito de comparao, undefined e null so iguais, mas no idnticos. Ex.: var vazio = null;

Tipos de Dados

STRINGS Strings so sequncias de caracteres. Em JavaScript a string pode ser tanto um tipo primitivo de dado como um objeto; no entanto, ao manipul-la temos a impresso de que sejam objetos pois as strings em JavaScript possuem mtodos que podemos invocar para realizar determinadas operaes sobre elas. Essa confuso ocorre porque quando criamos uma string primitiva, o JavaScript cria tambm um objeto string e converte automaticamente entre esses tipos quando necessrio. Para se declarar uma string, basta colocar uma sequncia de caracteres entre aspas simples ou duplas. Ex.: var str = "Eu sou uma string!";

Operadores

Aritmticos

Operadores

Comparao

Operadores

Lgicos

Estruturas de Controle
IF ... ELSE Utilizamos essa declarao quando necessitamos que somente uma parte do cdigo seja executada e quando uma determinada condio for verdadeira. Ex.: if (condio) { //cdigo a ser executado quando a condio for verdadeira. } else { //cdigo a ser executado quando a condio for falsa. }

Estruturas de Controle

switch
Utilizamos tambm essa declarao quando desejamos selecionar um bloco de cdigo entre vrios outros. uma forma mais prtica para alguns casos.

switch(expresso) {
case valor 1: //cdigo a ser executado se a expresso = valor 1; break case valor 2: //cdigo a ser executado se a expresso = valor 2; break default: //cdigo a ser executado se a expresso for diferente do valor 1 e valor 2;

Estruturas de Controle

switch
Utilizamos tambm essa declarao quando desejamos selecionar um bloco de cdigo entre vrios outros. uma forma mais prtica para alguns casos.

switch(expresso) {
case valor 1: //cdigo a ser executado se a expresso = valor 1; break case valor 2: //cdigo a ser executado se a expresso = valor 2; break default: //cdigo a ser executado se a expresso for diferente do valor 1 e valor 2;

Popup Boxes

Os popup boxes no JavaScript nos permitem alertar o usurio sobre algum acontecimento, pedir-lhe uma confirmao para que uma determinada ao possa ser executada e pedir-lhe que nos informe algum dado. Assim, podemos criar trs tipos de popup boxes. So 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 usurio sobre algo que ocorreu durante alguma ao por ele executada. Um boto de OK exibido junto a ela. Para prosseguir com a navegao necessrio que o usurio clique nesse boto.

Popup Boxes

Confirm Box
Sintaxe:

confirm("Voc deseja continuar?");

Com o Confirm Box, podemos ter a certeza se o usurio deseja ou no executar determinada ao, uma vez que esse box exibe dois botes: 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 varivel que vai receber a informao digitada pelo usurio. Minha mensagem a mensagem que vai aparecer como Label da caixa de input Meu texto um texto, opcional, que aparecer na linha de digitao do usurio

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

Loops

As declaraes de looping em JavaScript, assim como em outras linguagens, tem por objetivo a execuo de um mesmo bloco de cdigo por uma determinada quantidade de vezes ou enquanto uma condio for verdadeira.

Loops
Declarao FOR Looping que percorre determinado bloco de cdigo por uma quantidade especificada de vezes. for (var = valorInicial; var <= valorFinal; var = var + incremento) { //cdigo a ser executado. }

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

Loops
Declarao While Looping que percorre determinado bloco de cdigo se e enquanto a condio for verdadeira.

while (var <= valorFinal) { //cdigo a ser executado. }

Loops
Ex.: var numero = 1; while (numero <= 5) { alert("O nmero atual : " + numero); numero = numero + 1; }

Loops
Ex.: var numero = 1; while (numero <= 5) { alert("O nmero atual : " + numero); numero = numero + 1; }

Loops
Do ... While Esse loop uma varivel do loop while. Ele sempre executar um bloco de cdigo uma vez e o repetir enquanto a condio for verdadeira. Mesmo que uma condio seja falsa, esse loop ocorrer uma vez pois a condio verificada aps a execuo.

Loops
do { //cdigo a ser executado. } while (var <= valorFinal); Ex.: var numero = 1; do { alert("O nmero atual : " + numero); numero = numero + 1; } while (numero < 1);

Converses
FUNO ISNAN A funo isNaN tem a finalidade de testar uma varivel para determinar se ou no um nmero. Esta funo retorna verdadeiro se a varivel no for um nmero. Ex.: if(isNaN(valor)){

alert("No um nmero!!!");

Converses
FUNO PARSEFLOAT Com a funo parseFloat, feita a converso de um objeto string, retornando um valor de ponto flutuante. valor=parseFloat("123.456"); alert(valor);

Converses
FUNO PARSEINT Com a funo parseInt, o usurio poder converter valores de string em valores numricos inteiros equivalentes. valor=parseInt("123.456"); alert(valor);

Exerccios

1 - Faa um script que solicite a entrada da idade do usurio e apresente a seguinte sada (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 no pode entrar no site.

Exerccios

2 - Faa um script que solicite dois nmeros do usurio e escreva a seguinte informao:
NUM1

+ NUM2 = SOMA, onde NUM1 e NUM2 so os valores digitados, e SOMA o resultado.

Exerccios

3 - Faa um script que solicite dois nmeros do usurio e escreva a soma de todos os valores inteiros existentes no intervalo destes dois nmeros.

Exerccios

4 Faa o seguinte script:

Exerccios

5 Faa um script que encontre a soma de todos os nmeros pares de 1 a 100. 6 - Faa um programa que calcule a tabuada de um nmero inteiro qualquer digitado pelo usurio. Por exemplo: Se for digitado 3, o programa dever imprimir em tela toda a tabuada do nmero (3x1=3, 3x2=6, 3x3=9...3x9=27, 3x10=30).

Exerccios

7 - Josiel disse a seu amigo que seu carro econmico, pois, faz 16km com 1 litro de gasolina. Faa um programa, que leia a quantidade de quilmetros percorridos por um carro, e a quantidade de litros que foram necessrios para realizar o percurso, calcule e apresente quantos quilmetros/litro fez este carro.

DVIDAS

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

Vous aimerez peut-être aussi