JavaScript for Beginners

Sapo Sessions #2

JavaScript for BeginnersSintaxe, boas práticas, metodologias e outras

informações úteis.

Pedro Eugé[email protected]://igeni.us

mailto:[email protected]


http://igeni.us

http://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


1. Bem-vindo

Com que objectivo?

Efeitos

Animações

Manipulação

Validação

RIA


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.


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 "-//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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd


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


2. O básico


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 fixo

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

"teste".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úmerosNã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 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


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: "? :"

É ú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 "femea" : alert( "F" ); break; case "macho" : alert( "M" ); break; }


2.3.5 Switch

switch( option ) { case "femea" : alert( "F" ); break; case "macho" : alert( "M" ); break; }

E se não for macho ou femea? !


2.3.5 Switch

switch( option ) { case "femea" : alert( "F" ); break; case "macho" : alert( "M" ); break; 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

...


Sequência

1. Bemvindo ao mundo Javascript


2. O básico


3. O passo seguinte

DOM


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

http://www.sapo.pt

http://www.sapo.pt


3.1.5 Alterar o estilo do elemento

Quero que a página agora fique 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: [email protected]

messenger: [email protected]

web: igeni.us






Recursos

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

FireBug: http://getfirebug.com/

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

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

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


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

Date post:	01-Nov-2014
Category:	Technology
Upload:	sapo-sessions
View:	4,768 times
Download:	3 times

JavaScript for Beginners

Technology