introducao ao javascript
DESCRIPTION
Apresentação de slides introdutória para a oficina de inverno no Senac Santo Amaro, 2008. O tema é Javascript e Ajax.TRANSCRIPT
![Page 1: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/1.jpg)
Your NameYour TitleYour Organization Line 1Your Organization Line 2
Course TitleCourse Description
Javascript e Ajax
Oficina de inverno 2008Centro Universitário SENAC
Klaus Paiva
![Page 2: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/2.jpg)
Breve apresentação
Klaus Roberto de Paiva
Blog: blog.klaus.pro.brE-mail: klaus arroba klaus ponto pro.br
![Page 3: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/3.jpg)
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.
![Page 4: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/4.jpg)
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.
![Page 5: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/5.jpg)
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.
![Page 6: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/6.jpg)
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.
![Page 7: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/7.jpg)
7
Nosso primeiro exemplo
<html><head> <title>Meu primeiro Javascript</title></head><body> <script type="text/javascript"> window.alert( 'Olá mundo!' ); </script></body></html>
![Page 8: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/8.jpg)
8
window.alert? Orientação a objetos?
Estritamente falando... não.Javascript é baseada em objetos, não orientada a objetos.
![Page 9: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/9.jpg)
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.
*/
![Page 10: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/10.jpg)
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".
![Page 11: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/11.jpg)
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
![Page 12: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/12.jpg)
12
Tipos básicos
Sete tipos básicos:StringBooleanNumberFunctionObjectNullUndefined
![Page 13: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/13.jpg)
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.
![Page 14: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/14.jpg)
14
O operador +
Usado também para concatenar stringsVocê pode somar (concatenar) um número com uma string e o resultado será uma string.
![Page 15: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/15.jpg)
15
Operadores de comparação
== (igual)=== (exatamente igual, idêntico)!= (diferente)> (maior que)< (menor que)>= (maior ou igual que)<= (menor ou igual que)
![Page 16: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/16.jpg)
16
Operadores lógicos
&& (E lógico)|| (OU lógico)^ (XOR binário)! (negação)
Operador ternário:( condição ? caso verdadeiro : caso falso )
![Page 17: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/17.jpg)
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}
![Page 18: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/18.jpg)
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á!";}
![Page 19: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/19.jpg)
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.
![Page 20: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/20.jpg)
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.
![Page 21: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/21.jpg)
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 );
![Page 22: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/22.jpg)
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.
![Page 23: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/23.jpg)
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.
![Page 24: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/24.jpg)
24
Estrutura: for (continuação - exemplo)
var soma = 0;for( int i = 0; i < 10; i++ ){ soma += i;}alert( soma );
![Page 25: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/25.jpg)
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.
![Page 26: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/26.jpg)
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}
![Page 27: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/27.jpg)
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" );
![Page 28: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/28.jpg)
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
![Page 29: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/29.jpg)
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"] ]
![Page 30: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/30.jpg)
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;
![Page 31: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/31.jpg)
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] );}
![Page 32: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/32.jpg)
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]}
![Page 33: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/33.jpg)
33
DOM (Document Object Model)
(Imagem do livro Javascript Bible, Gold Edition - página 30)
![Page 34: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/34.jpg)
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
![Page 35: Introducao ao Javascript](https://reader034.vdocuments.site/reader034/viewer/2022052523/55620919d8b42af2128b46c9/html5/thumbnails/35.jpg)
35
FIM
Chega de slides,é hora de praticar!
=)