Construção de SitesAula5

Tamanho: px

Começar a partir da página:

Download "Construção de SitesAula5"

Milton Palma Fagundes
5 Há anos
Visualizações:

1 Construção de Sites Aula5 Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 9 de Agosto de 2010

2 Indice Introdução ao JavaScript 1 Introdução ao JavaScript 2

3 Introdução ao JavaScript O que é JavaScript? é uma linguagem de script; permite que uma página html tenha interatividade; é uma linguagem interpretada; pode ser usado em páginas html sem ter de comprar licensa.

4 Introdução ao JavaScript Para que serve JavaScript? colocar texto dinamicamente; criar eventos na página; validar dados; criar cookies;

5 Introdução ao JavaScript Primeiro exemplo de JavaScript <html><body> <script type = text/javascript > document.write( <h1>primeiro script</h1> ); </script> </body></html> Figura: Resultado do exemplo acima

6 Introdução ao JavaScript No exemplo anterior o JavaScript está dentro do body e também podemos colocá-lo no head. Scrip no head <html> <head><script type = text/javascript > function message(){ alert( Mensagem aparece quando a página carrega! ); } </head></script> <body onload = message() > </body></html>

7 Introdução ao JavaScript Podemos usar o atributo src da tag <script> para usar um arquivo.js que contém um script, veja o exemplo abaixo: Arquivo bem-vindo.js function message(){ alert( Seja bem vindo! ); } Arquivo teste.html <html><head> <script type= text/javascript src= bem-vindo.js > </script></head> <body onload= message() > </body></html>

8 JavaScript assim como outras linguagens se se estrutura por : statements são os comandos ou instruções ao browser. blocos são comando agrupados que começam por { e terminam com } comentários são usados para deixar o código mais fácil de entender. para comentar a lina use // para comentar por bloco use /* comentários */

9 Outra parte da estrutura do JavaScript são as variáveis. Declarando variáveis var X; var x; var y; Podemos dar nomes mais significativos as variáveis, embora devemos obedecer as seguintes regras: 1 nomes de variáveis são case sensitive, ou seja, X não é x ; 2 nomes de variáveis devem começar com uma letra ou ;

10 Usando variáveis <html><body> <script type = text/javascript > var nome1 = Eu ; var nome2; document.write(nome1); nome2 = Ele ; document.write( <br/> ); document.write(nome2); </script> </body></html>

11 Podemos realizar as seguintes operações aritiméticas com variáveis : Operador Descrição Exemplo + adição x = y subtração x = y - 2 * multiplicação x = y * 2 / divisão x = y / 2 % resto da divisão x = y % 2 ++ incremento x decremento x = y - -

12 Estrutura básico do JavaScript Podemos combinar as operações aritiméticas com o operador de atribuição = gerando os seguintes operadores : Operador Exemplo Equivalente a += x+=y x = x + y -= x-=y x = x - y *= x*=y x = x * y /= x/=y x = x / y %= x%=y x = x % y

13 O operador + pode ser usado com strings para concatenar strings, ou seja, juntá-las, veja o exemplo abaixo : Concatenando strings var texto1 = parte1 ; var texto2 = parte2 ; texto1 = texto1 + document.write(texto1); + texto2;

14 Podemos combinar strings e números usando o operador + da seguinte forma no exemplo abaixo: Combinando string com números var idade = 20; document.write( A minha idade é + idade + anos. );

15 Além dos operadores de aritimética temos os lógicos que são : Operador Descrição Exemplo == igual x == 8!= diferente x!= 8 > maior que x > 8 >= maior igual que x >= 8 < menor que x < 8 <= menor igual que x <= 8

16 Podemos usar os operadores lógicos com comandos condições como o if para testarmos valores, veja o exemplo abaixo : Sintaxe do if if( condição ){ código a ser executado se a condição for verdadeira; } Exemple de if if(idade < 18) alert( Menor de idade! ); if(idade >= 18) alert( Maior de idade! );

17 Caso a condição no if seja falsa podemos usar o comando else para definir bloco a ser executado. Sintaxe do if else if( condição ){ código a ser executado se a condição for verdadeira; } else { código a ser executado se a condição for falsa; }

18 Do exemplo anterior podemos juntar os dois ifs para saber se a pessoa é maior de idade ou não. E para isso vamos usar os if else: Exemplo de if else if(idade < 18){ alert( Menor de idade! ); } else { alert( Maior de idade! ); }

19 Ainda podemos colocar if dentro do else criando a seguinte estrutura : Estrutura if else if if(condição1){ } else { if(condição2) { } }

20 Podemos combinar duas condições usando os operadores lógicos e & &. Operador lógico ou = if(idade < 0!isNaN(idade) ){ alert( Idade inválida! ); } Com o operador lógico ou basta uma condição ser verdadeira para executar o código do if.

21 Com o operador lógico e é necessário que todas as condições sejam verdadeiras, para executar o código do if. Operador lógico e = & & if(idade < 18 & & idade >= 0){ alert( Menor de idade! ); }

22 JavaScript possue popup box que são janelas e tem três tipos: Alert popup Serve para avisos no site. alert( texto da janela ); ou texto = Uma mensagem de alerta ; alert(texto);

23 Normalmente usado para casos em que se pede a confirmação de alguma coisa: Confirm popup confirm( Texto da mensagem para ok ou cancel ); ou texto = Texto da mensagem para ok ou cancel ; confirm(texto);

24 Usado para entrada de dados a pagina. Prompt popup prompt( Texto para mensagem, Valor padrão ); ou texto = Texto para mensagem ; confirm(texto,);

25 Sintaxe de função function nome da funcao(var1, var2,..., varn) { código da função a ser executado. return (algum tipo de retorno); } Nome de função segue as mesmas regras para nomes de variáveis e para chamar a função basta usar o mesmo nome que a definiu. Parâmetros são valores de variáveis passados a função. Valor de retorno retorna algum valor a ser usado.

26 Dos comandos de repetição temos dois sendo eles: For usado em repetições com um número fixo de vezes; While repete um bloco de comando enquanto a condição é verdadeira; Sintaxe do For for(var = valor inicial; var < valor final; var ++){ código a ser executado; }

27 Exemplo de for <html> <body> <script type= text/javascript > var i=0; for (i=0;i<=6;i++){ document.write( <h + i + >Esse é cabeçalho + i); document.write( </h + i + > ); } </script> </body> </html>

28 Exemplo de while <html> <body> <script type= text/javascript > var i = 0; while (i <= 6){ document.write( <h + i + >Esse é cabeçalho + i); document.write( </h + i + > ); i++; } </script> </body> </html>

Documentos relacionados

Construção de Sites Aula 6

Construção de Sites Aula 6 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 17 de Agosto de 2010 Indice 1 Eventos onload e onunload 2 3