JavaScript for Beginners

Sapo Sessions #2

JavaScript for Beginners
Sintaxe, boas práticas, metodologias e outras
informações úteis.

Pedro Eugénio
peugenio@co.sapo.pt
http://igeni.us

Sapo Sessions #2: Javascript for Beginners

Sequência

1. Bem-vindo ao mundo Javascript
biograﬁa, 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


1. Bem-vindo

Com que objectivo?

Efeitos

Animações

Manipulação

Validação

RIA


1.1 História do Javascript ECMA-262: é uma especiﬁcação
que serve de base para o
javascript e jscript

}
ECMAScript: é a linguagem de
scripts padronizada pelo
ECMA-262

Tanto a tecnologia JavaScript
1990 - Inicio da mudança quanto a JScript são compatíveis
com ECMAScript, porém cada um
disponibiliza recursos adicionais
Netscape - Livescript não descritos na especiﬁcação
ECMA.

IE - JScript
Javascript
1996 - ECMA

ECMAScript

ECMA-262


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


1.3 Hello World

<!DOCTYPE html PUBLIC quot;-/ /W3C/ /DTD XHTML 1.0 Transitional/ /ENquot;
quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>
<html lang=quot;ptquot;>
<head>
<title>Sapo Sessions - JavaScript</title>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;css/style.cssquot; media=quot;screenquot; />
</head>
<body onload=quot;alert('Hello World!')quot;>
<h1>Sapo Sessions: Javascript for Beginners</h1>
<h2>Hello World!</h2>
</body>
</html>


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”


Sequência

1. Bemvindo ao mundo Javascript
biograﬁa, 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


2. O básico

Variáveis e Tipos

Operadores

Estruturas de controle

Funções e Objectos

Eventos


2.1 Variáveis e Tipos

As variáveis em javascript não têm tipo ﬁxo

Qualquer valor pode ser guardado numa
variável

typeof variavel diz-nos o tipo da variável


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
/


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


2.1.3 Tipos Primitivos

São tratados e passados como valores

Alguns permitem usar métodos

quot;testequot;.toUpperCase();


2.1.3.1 Boolean

Dois valores possíveis

var verdade = true;

var falso = false;


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;


2.1.3.3 String

Strings e caracteres são ambas strings

var nome = “Pedro”;

var letra = “c”;


2.1.4 Tipos Complexos

Uma variável do tipo complexo é um Objecto

É sempre passado por referência


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”


2.1.4.2 Objectos

var objecto = new Object();

objecto.nome = “O meu objecto”;

objecto.total = 20;

objecto.init = function () { alert(“init”); }


2.2 Operadores

var total = 1 + 1;

total += 1;

total -= 1;

total == 1;

total === String(1);


2.2.1 Aritmética

somar, subtrair, multiplicar , dividir , resto da
divisão

+, -, * , / , %


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úmeros Não é boa prática!!!
É preferível usar o Object
Number: Number(a) para
converter de string para
número


2.2.2 Bitwise

&, |, ^, ~, >>, <<, e >>>

Tratam os argumentos como sendo binário e
efectuam a operação especiﬁca 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


2.2.3 Assignment

=, +=, -=, /=, %=

Atribuem um valor a uma variável

x = 10;

Pode apenas alterar a referência ao objecto

x = umaFuncao;


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


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


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...


2.2.7 O Operador: quot;? :quot;

É útil para substituir longas linhas de
programação if/then/else

return ( a && b ) ? a : b


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


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” );
}


2.3.2 While

while( x < 10 )
{
alert( “estou-me a repetir” );
x++; / para podermos parar o ciclo
/
}


2.3.3 Do...While...

do {
alert( “aqui vou eu outra vez” );
c += 1;
} while( c < 10 );


2.3.4 For

for( var c = 0; c < 10; c++ )
{
alert( “vai vai vai!!!” );
}


2.3.5 Switch

switch( option )
{
case quot;femeaquot; : alert( quot;Fquot; ); break;
case quot;machoquot; : alert( quot;Mquot; ); break;
}


2.3.5 Switch

switch( option )
{
}

!
E se não for
macho ou
femea?


2.3.5 Switch

switch( option )
{
default: alert( “outro” ); break;
}


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’ };


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


2.5 Eventos

Um evento ocorre quando acontece algo na
página do browser

document loading

mouse click

mouse over

...


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


3.1 DOM


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


3.1.2 Pesquisar elemento

Quero o elemento com id “eid”

document.getElementById(“eid”);

Quero todos os links da página

document.getElementsByTagName(“a”);


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”;


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);


3.1.5 Alterar o estilo do elemento

Quero que a página agora ﬁque com um
background negro

document.body.style.backgroundColor =
“black”;


3.1.6 Remover elemento

Quero remover da página o elemento “elem”

elem.parentNode.removeChild(elem);


4. Aplicação: Modal Window


Perguntas?

Pedro Eugénio

email: peugenio@co.sapo.pt

messenger: voxmachina@sapo.pt

web: igeni.us


Recursos

Javascript: http://www.w3schools.com/JS/

FireBug: http://getﬁrebug.com/

DOM: http://www.w3.org/DOM/


setTimeout( “endPresentation();” , 3000 );

JavaScript for Beginners

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a JavaScript for Beginners

Semelhante a JavaScript for Beginners (20)

Mais de SAPO Sessions

Mais de SAPO Sessions (12)

JavaScript for Beginners