Sapo Sessions #2
JavaScript for BeginnersSintaxe, boas práticas, metodologias e outras
informações úteis.
Pedro Eugé[email protected]://igeni.us
Sapo Sessions #2: Javascript for Beginners
Sequência
1. Bem-vindo ao mundo Javascript
biografia, javascript is not java!, hello world!
2. O básico
variáveis, operadores, estruturas de controle, funções, objectos e eventos
3. O passo seguinte
DOM
Sapo Sessions #2: Javascript for Beginners
1. Bem-vindo
Com que objectivo?
Efeitos
Animações
Manipulação
Validação
RIA
Sapo Sessions #2: Javascript for Beginners
1.1 História do Javascript
1990 - Inicio da mudança
Netscape - Livescript
IE - JScript
1996 - ECMA
ECMAScript
ECMA-262
Javascript}ECMA-262: é uma especificação que serve de base para o javascript e jscriptECMAScript: é a linguagem de scripts padronizada pelo ECMA-262
Tanto a tecnologia JavaScript quanto a JScript são compatíveis com ECMAScript, porém cada um disponibiliza recursos adicionais não descritos na especificação ECMA.
Sapo Sessions #2: Javascript for Beginners
1.2 Javascript is not Java!!!
Whhhhhhhhhaaaaaaaaaatttt?
Só a sintaxe é semelhante!
Duas companhias diferentes
Netscape e Sun
Java precisa de uma JVM
Javascript corre directamente no browser
Sapo Sessions #2: Javascript for Beginners
1.3 Hello World
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="pt"><head><title>Sapo Sessions - JavaScript</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /></head><body onload="alert('Hello World!')"><h1>Sapo Sessions: Javascript for Beginners</h1><h2>Hello World!</h2></body></html>
Sapo Sessions #2: Javascript for Beginners
1.3 Hello World
<body onload=”alert(‘Hello World!’);”>
body onload=”DON’T”
HTML e código Javascript juntos porquê?
A forma correcta
script src=”helloWorld.js”
Sapo Sessions #2: Javascript for Beginners
Sequência
1. Bemvindo ao mundo Javascript
biografia, javascript is not java!, hello world!
2. O básico
variáveis, operadores, estruturas de controle, funções, objectos e eventos
3. O passo seguinte
DOM
Sapo Sessions #2: Javascript for Beginners
2. O básico
Variáveis e Tipos
Operadores
Estruturas de controle
Funções e Objectos
Eventos
Sapo Sessions #2: Javascript for Beginners
2.1 Variáveis e Tipos
As variáveis em javascript não têm tipo fixo
Qualquer valor pode ser guardado numa variável
typeof variavel diz-nos o tipo da variável
Sapo Sessions #2: Javascript for Beginners
2.1.1 Declaração de variáveis
A visibilidade de uma variável depende da sua declaração
var teste = “ola”; // variável local
teste = “ola”; // variável global
Sapo Sessions #2: Javascript for Beginners
2.1.2 Convenções
Maiusculas, minusculas, “_” e “$”
teste e Teste são duas variáveis diferentes
Não se podem usar palavras reservadas
http://javascript.about.com/library/blreserved.htm
Sapo Sessions #2: Javascript for Beginners
2.1.3 Tipos Primitivos
São tratados e passados como valores
Alguns permitem usar métodos
"teste".toUpperCase();
Sapo Sessions #2: Javascript for Beginners
2.1.3.1 Boolean
Dois valores possíveis
var verdade = true;
var falso = false;
Sapo Sessions #2: Javascript for Beginners
2.1.3.2 Numeric
Pode-se usar variáveis do tipo Float ou Integer, mas são sempre tratadas como sendo do tipo Numeric
var x = 10;
var y = 25.3;
Sapo Sessions #2: Javascript for Beginners
2.1.3.3 String
Strings e caracteres são ambas strings
var nome = “Pedro”;
var letra = “c”;
Sapo Sessions #2: Javascript for Beginners
2.1.4 Tipos Complexos
Uma variável do tipo complexo é um Objecto
É sempre passado por referência
Sapo Sessions #2: Javascript for Beginners
2.1.4.1 Arrays
Um Array é uma lista de elementos
Podem conter todo e qualquer tipo de valores
var lista = [0,”teste”,false];
var lista = new Array( 0 , “teste” , false );
lista[1] = ?
“teste”
Sapo Sessions #2: Javascript for Beginners
2.1.4.2 Objectos
var objecto = new Object();
objecto.nome = “O meu objecto”;
objecto.total = 20;
objecto.init = function () { alert(“init”); }
Sapo Sessions #2: Javascript for Beginners
2.2 Operadores
var total = 1 + 1;
total += 1;
total -= 1;
total == 1;
total === String(1);
Sapo Sessions #2: Javascript for Beginners
2.2.1 Aritmética
somar, subtrair, multiplicar , dividir , resto da divisão
+, -, * , / , %
Sapo Sessions #2: Javascript for Beginners
2.2.1 Aritmética: “+”
O operador “+” pode ser usado em três situações diferentes:
concatenação de strings
adição
converter strings para númerosNão é boa prática!!!É preferível usar o Object Number: Number(a) para converter de string para número
Sapo Sessions #2: Javascript for Beginners
2.2.2 Bitwise
&, |, ^, ~, >>, <<, e >>>
Tratam os argumentos como sendo binário e efectuam a operação especifica de seguida
&, |, ^ efectuam as operações de: and, or e xor em cada bit individual
~ inverte todos os bits de um inteiro
<< e >> movem os bits assim como >>> mas este último não mantém o sinal da operação
Sapo Sessions #2: Javascript for Beginners
2.2.3 Assignment
=, +=, -=, /=, %=
Atribuem um valor a uma variável
x = 10;
Pode apenas alterar a referência ao objecto
x = umaFuncao;
Sapo Sessions #2: Javascript for Beginners
2.2.4 Incrementadores
++ e --
Icrementam ou decrementam o valor de uma variável
x++ ou x--
É o mesmo que dizer:
Pega no valor de x e incrementa-lhe 1
Pega no valor de x e decrementa-lhe 1
Sapo Sessions #2: Javascript for Beginners
2.2.5 Comparação
==, !=, >, >=, <, <=, ===, !==
Servem para comparar variáveis
Se contêm, ou não, o mesmo valor
Se o valor de uma é maior ou menor
Se o valor e o tipo são iguais/diferentes
Sapo Sessions #2: Javascript for Beginners
2.2.6 Lógicos
&&, || e !
Se a e (&&) b então...
Se a ou (||) b então...
Se não a (!a) então...
Sapo Sessions #2: Javascript for Beginners
2.2.7 O Operador: "? :"
É útil para substituir longas linhas de programação if/then/else
return ( a && b ) ? a : b
Sapo Sessions #2: Javascript for Beginners
2.3 Estruturas de controle
Controlam a execução do código
Decidem se o pedaço de código é executado ou não
Permitem a execução repetida de pedaços de código
Sapo Sessions #2: Javascript for Beginners
2.3.1 If
if( a == b ) {alert( “a tem o mesmo valor que b” );
}
if( a == b ) {alert( “a tem o mesmo valor que b” );
} else {alert( “não têm o mesmo valor” );
}
Sapo Sessions #2: Javascript for Beginners
2.3.2 While
while( x < 10 ){alert( “estou-me a repetir” );x++; // para podermos parar o ciclo
}
Sapo Sessions #2: Javascript for Beginners
2.3.3 Do...While...
do {alert( “aqui vou eu outra vez” );c += 1;
} while( c < 10 );
Sapo Sessions #2: Javascript for Beginners
2.3.4 For
for( var c = 0; c < 10; c++ ){alert( “vai vai vai!!!” );
}
Sapo Sessions #2: Javascript for Beginners
2.3.5 Switch
switch( option ) { case "femea" : alert( "F" ); break; case "macho" : alert( "M" ); break; }
Sapo Sessions #2: Javascript for Beginners
2.3.5 Switch
switch( option ) { case "femea" : alert( "F" ); break; case "macho" : alert( "M" ); break; }
E se não for macho ou femea? !
Sapo Sessions #2: Javascript for Beginners
2.3.5 Switch
switch( option ) { case "femea" : alert( "F" ); break; case "macho" : alert( "M" ); break; default: alert( “outro” ); break; }
Sapo Sessions #2: Javascript for Beginners
2.4 Funções e Objectos
Funções permitem partir o código em diferentes partes
Objectos permitem estruturar o código de forma modular
var myObj = new Object();
myObj.nome = ‘Pedro’;
ou
var myObj = { nome: ‘Pedro’ };
Sapo Sessions #2: Javascript for Beginners
2.4.1 Funções
function helloWorld () { }
Uma função
var helloWorld = function () { }
Uma função que se parece com o objecto que é de qualquer forma
elem.onclick = function () { }
Uma função anónima
Sapo Sessions #2: Javascript for Beginners
2.5 Eventos
Um evento ocorre quando acontece algo na página do browser
document loading
mouse click
mouse over
...
Sapo Sessions #2: Javascript for Beginners
Sequência
1. Bemvindo ao mundo Javascript
biografia, javascript is not java!, hello world!
2. O básico
variáveis, operadores, estruturas de controle, funções, objectos e eventos
3. O passo seguinte
DOM
Sapo Sessions #2: Javascript for Beginners
3. O passo seguinte
Document Object Model (DOM)
Exemplo do uso de javascript numa ferramenta poderosa
Manipulação da estrutura HTML sem necessidade de fazer reload à página
Sapo Sessions #2: Javascript for Beginners
3.1 DOM
Sapo Sessions #2: Javascript for Beginners
3.1.1 Introdução
Manipulação da estrutura HTML
Alteração/Criação/Remoção de elementos
Alteração do estilo de um elemento
Sapo Sessions #2: Javascript for Beginners
3.1.2 Pesquisar elemento
Quero o elemento com id “eid”
document.getElementById(“eid”);
Quero todos os links da página
document.getElementsByTagName(“a”);
Sapo Sessions #2: Javascript for Beginners
3.1.3 Alterar elemento
Quero que o elemento com id igual a “caixa” tenha o valor “teste”
var caixa = document.getElementById( ‘caixa’ );
caixa.value = “teste”;
Sapo Sessions #2: Javascript for Beginners
3.1.4 Adicionar elemento
Quero criar um novo link na página
var oLink = document.createElement(“a”);
oLink.innerHTML = “mais um link”;
oLink.href = “http://www.sapo.pt”;
document.body.appendChild(oLink);
Sapo Sessions #2: Javascript for Beginners
3.1.5 Alterar o estilo do elemento
Quero que a página agora fique com um background negro
document.body.style.backgroundColor = “black”;
Sapo Sessions #2: Javascript for Beginners
3.1.6 Remover elemento
Quero remover da página o elemento “elem”
elem.parentNode.removeChild(elem);
Sapo Sessions #2: Javascript for Beginners
4. Aplicação: Modal Window
Sapo Sessions #2: Javascript for Beginners
Perguntas?
Pedro Eugénio
email: [email protected]
messenger: [email protected]
web: igeni.us
Sapo Sessions #2: Javascript for Beginners
Recursos
Javascript: http://www.w3schools.com/JS/
FireBug: http://getfirebug.com/
DOM: http://www.w3.org/DOM/
Sapo Sessions #2: Javascript for Beginners
setTimeout( “endPresentation();” , 3000 );