introducao ao javascript
Post on 25-May-2015
2.705 Views
Preview:
DESCRIPTION
TRANSCRIPT
Your NameYour TitleYour Organization Line 1Your Organization Line 2
Course TitleCourse Description
Javascript e Ajax
Oficina de inverno 2008Centro Universitário SENAC
Klaus Paiva
Breve apresentação
Klaus Roberto de Paiva
Blog: blog.klaus.pro.brE-mail: klaus arroba klaus ponto pro.br
3
O que é Javascript?
Javascript, como o nome já diz, é uma linguagem de script.Entenda linguagem de script com uma linguagem de programação leve e mais simples.
O principal objetivo do Javascript é adicionar interatividade nas páginas HTML.É uma linguagem interpretada.Bastante simples e prática, é uma linguagem baseada em objetos e eventos.Suportada pela maioria dos navegadores atuais: Firefox, Internet Explorer, Opera, Safari...Seu nome real é ECMAScript. Este nome é baseado no orgão que padroniza a linguagem.Não confundir com JScript. Este é um padrão da Microsoft e com baixa adoção.
4
O que Javascript pode fazer?
Javascript é uma ferramenta de programação para páginas web.Javascript pode ler e escrever HTML dentro de uma página.Javascript pode ficar aguardando um evento ocorrer para disparar uma ação em resposta. (listener)Javascript pode ser usado para validar informações antes que elas sejam enviadas ao servidor.Javascript pode trabalhar com cookies (não comestíveis). Cookies permitem armazenar informações do usuário entre páginas ou sessões.Javascript possui suporte a expressões regulares.
5
O que Javascript não pode fazer?
Dentro do nosso escopo de estudo: Acessar ou definir as preferências do usuário para impressão, aparência e opções gerais do navegador.Executar um aplicativo (programa) no computador do usuário.Ler ou escrever em arquivos ou diretórios no computador do usuário.Enviar e-mails.
6
Ferramentas para escrever Javascript
Um editor de textosUsaremos aqui o SciTE
Um navegadorFirefox com a extensão Firebug (perfeito)Opera (ótimo)Internet Explorer 7 (bom)Internet Explorer 6 (OMG!)
Ou seja, custo zero com ferramentas de desenvolvimento.
7
Nosso primeiro exemplo
<html><head> <title>Meu primeiro Javascript</title></head><body> <script type="text/javascript"> window.alert( 'Olá mundo!' ); </script></body></html>
8
window.alert? Orientação a objetos?
Estritamente falando... não.Javascript é baseada em objetos, não orientada a objetos.
9
Comentários
Comentário de uma linha:// este é um comentário de linha
Comentário de bloco:/*
Este é um comentário de bloco.Ele pode ter múltiplas linhas.
*/
10
Localização do Javascript
Dentro da página (incorporado).Externo (anexado):
<script type="text/javascript" src="arquivo.js"></script>
A extensão padrão de um arquivo Javascript é "js".
11
Variáveis
Tipagem dinâmicaTipagem fracaExemplos:
var nome; // declaração de uma variávelvar idade = "vinte e sete"; // declaração e atribuiçãonome = "Christiane"; // atribuição de uma variávelidade = 27; // tipagem dinâmica
window.alert( nome + idade ); // tipagem fraca
12
Tipos básicos
Sete tipos básicos:StringBooleanNumberFunctionObjectNullUndefined
13
Operadores aritméticos
+ (adição e concatenação)- (subtração)* (multiplicação)/ (divisão)% (módulo)++ e -- (incremento e decremento)
Podendo ser pré-incremento ou pós-incremento.O mesmo vale para o decremento.
14
O operador +
Usado também para concatenar stringsVocê pode somar (concatenar) um número com uma string e o resultado será uma string.
15
Operadores de comparação
== (igual)=== (exatamente igual, idêntico)!= (diferente)> (maior que)< (menor que)>= (maior ou igual que)<= (menor ou igual que)
16
Operadores lógicos
&& (E lógico)|| (OU lógico)^ (XOR binário)! (negação)
Operador ternário:( condição ? caso verdadeiro : caso falso )
17
Estrutura: if . . . else if . . . else
Similar ao que temos em Java e C.if( condição ){ // instruções}else if( condição ){ // mais instruções}else{ // ainda mais instruções}
18
Estrutura: switch . . . case . . . case . . . default
Também similar ao que temos em C e Java.switch( variável ){ case "homem" : mensagem = "Bem-vindo!"; break; case "mulher" : mensagem = "Bem-vinda!"; break; default : mensagem = "Olá!";}
19
Caixas de diálogo
O Javascript possui três tipos de caixas de diálogo que permitem a interação com o usuário.
alert( mensagem )Usada para exibir uma informação. Esta caixa de diálogo não retorna informação alguma, apenas exibe a informação.
confirm( mensagem )Usada para pedir confirmação do usuário. A confirmação é sempre sim ou não (verdadeiro ou falso).
prompt( mensagem[, texto_padrão ] )Permite a entrada de uma string pelo usuário.
20
Funções
Funções em Javascript são compostas, basicamente, por quatro elementos.
NomeParâmetrosInstruçõesValor de retorno
Nenhum deles é obrigatório.function nome( parametros ){ // uma instrução // outra instrução return algum_valor;}
Uma função sem nome é chamada de anônima.
21
Funções (continuação - exemplo)
// definindo uma função de somafunction soma( a, b ){ return a + b;}
// agora vamos usar a função somavar x = 10;var y = 5;z = soma( x, y );
// e vamos usar novamentew = 5;w = soma( z, w );
22
Escopo de variáveis
Uma variável declarada dentro de uma função existe enquanto a função está sendo executada.Esta variável, limitada pelo escopo da função, recebe o nome de variável local.
23
Estrutura: for
Similar ao existente no Java e C.for( instrucao_inicio, condicao_parada, pos_iteracao ){ // instruções aqui // mais instruções // podemos passar para a próxima iteração usando: continue; // ou podemos forçar a parada da repetição usando: break;}
Cada uma das repetições recebe o nome de iteração.
24
Estrutura: for (continuação - exemplo)
var soma = 0;for( int i = 0; i < 10; i++ ){ soma += i;}alert( soma );
25
Estrutura: while
while( condição_parada ){ // instruções // outras instruções // podemos passar para a próxima iteração com um: continue; // ou interromper de vez usando: break;}
Também temos o do ... while disponível.
26
Estrutura: while (continuação - exemplo)
while( 18 > prompt( "Você deve ter mais que 18 anos para acessar esta página!", "" ) )
{ // he he he he}
27
Vetores e Matrizes
Vetores e Matrizes são conjuntos de variáveis.Podem ter somente uma dimensão (vetor) ou várias dimensões (matriz).Exemplos:
var cores = new Array();cores[0] = "blue";cores[1] = "red";cores[2] = "green";
var cidades = new Array( "São Paulo", "Rio de Janeiro","Porto Alegre" );
28
Vetores e Matrizes (continuação)
var cores = new Array();cores[0] = "blue";cores[1] = "red";cores[2] = "green";
O acesso aos itens dos vetores é feito usando seus índices:
alert( cores[0] ); // o primeiro elemento das coresalert( cores[2] ); // o terceiro elemento das cores
29
Vetores e Matrizes (continuação)
A criação de matrizes é similar. Para criar uma matriz de duas dimensões e tamanho 2x3, por exemplo:
var matriz = [];matriz[0] = [ "um", "dois", "três" ];matriz[1] = [ "quatro", "cinco", "seis" ];// matriz agora é// [ ["um", "dois", "três"], ["quatro", "cinco", "seis"] ]
30
Vetores e Matrizes (continuação)
Os índices de um vetor não são obrigatoriamente números. Podem ser, por exemplo, strings:
var notas = new Array();notas["Carlos"] = 7;notas["Shirley"] = 2;notas["Maria"] = 8.5;
31
Estrutura: for . . . in
Esta estrutura permite iterar nos elementos de um vetor ou nas propriedades de um objeto qualquer.Pode ser aplicado em um vetor que possui strings como índices, para descobrir quais são os índices usados.
for( indice in vetor_ou_objeto ){ // instruções aqui alert( "índice: " + indice ); alert( "valor: " + vetor_ou_objeto[indice] );}
32
Estrutura: for . . . in (continuação)
Exemplo:
var versao_atual = [];versao_atual["IE"] = 7;versao_atual["Firefox"] = 3;versao_atual["Safari"] = 3.1;versao_atual["Opera"] = 9.5;for( browser in versao_atual ){ alert( browser + ": " + versao_atual[browser]}
33
DOM (Document Object Model)
(Imagem do livro Javascript Bible, Gold Edition - página 30)
34
Eventos
Eventos são ações geradas pelo navegador ou pelo usuário.Você pode especificar funções para responder aos eventos disparados. (listeners)Exemplos de eventos:
blurfocuschangeclickmouseovermouseoutloadunload
35
FIM
Chega de slides,é hora de praticar!
=)
top related