JavaScript for Beginners

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

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

3. Sapo Sessions #2: Javascript for Beginners 1. Bem-vindo Com que objectivo? Efeitos Animações Manipulação Validação RIA

4. Sapo Sessions #2: Javascript for Beginners 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

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

6. Sapo Sessions #2: Javascript for Beginners 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>

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

8. Sapo Sessions #2: Javascript for Beginners 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

9. Sapo Sessions #2: Javascript for Beginners 2. O básico Variáveis e Tipos Operadores Estruturas de controle Funções e Objectos Eventos

10. Sapo Sessions #2: Javascript for Beginners 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

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

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

13. Sapo Sessions #2: Javascript for Beginners 2.1.3 Tipos Primitivos São tratados e passados como valores Alguns permitem usar métodos quot;testequot;.toUpperCase();

14. Sapo Sessions #2: Javascript for Beginners 2.1.3.1 Boolean Dois valores possíveis var verdade = true; var falso = false;

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

16. Sapo Sessions #2: Javascript for Beginners 2.1.3.3 String Strings e caracteres são ambas strings var nome = “Pedro”; var letra = “c”;

17. Sapo Sessions #2: Javascript for Beginners 2.1.4 Tipos Complexos Uma variável do tipo complexo é um Objecto É sempre passado por referência

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

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

20. Sapo Sessions #2: Javascript for Beginners 2.2 Operadores var total = 1 + 1; total += 1; total -= 1; total == 1; total === String(1);

21. Sapo Sessions #2: Javascript for Beginners 2.2.1 Aritmética somar, subtrair, multiplicar , dividir , resto da divisão +, -, * , / , %

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

23. Sapo Sessions #2: Javascript for Beginners 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

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

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

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

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

28. Sapo Sessions #2: Javascript for Beginners 2.2.7 O Operador: quot;? :quot; É útil para substituir longas linhas de programação if/then/else return ( a && b ) ? a : b

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

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

31. Sapo Sessions #2: Javascript for Beginners 2.3.2 While while( x < 10 ) { alert( “estou-me a repetir” ); x++; / para podermos parar o ciclo / }

32. Sapo Sessions #2: Javascript for Beginners 2.3.3 Do...While... do { alert( “aqui vou eu outra vez” ); c += 1; } while( c < 10 );

33. Sapo Sessions #2: Javascript for Beginners 2.3.4 For for( var c = 0; c < 10; c++ ) { alert( “vai vai vai!!!” ); }

34. Sapo Sessions #2: Javascript for Beginners 2.3.5 Switch switch( option ) { case quot;femeaquot; : alert( quot;Fquot; ); break; case quot;machoquot; : alert( quot;Mquot; ); break; }

35. Sapo Sessions #2: Javascript for Beginners 2.3.5 Switch switch( option ) { case quot;femeaquot; : alert( quot;Fquot; ); break; case quot;machoquot; : alert( quot;Mquot; ); break; } ! E se não for macho ou femea?

36. Sapo Sessions #2: Javascript for Beginners 2.3.5 Switch switch( option ) { case quot;femeaquot; : alert( quot;Fquot; ); break; case quot;machoquot; : alert( quot;Mquot; ); break; default: alert( “outro” ); break; }

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

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

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

40. Sapo Sessions #2: Javascript for Beginners 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

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

42. Sapo Sessions #2: Javascript for Beginners 3.1 DOM

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

44. 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”);

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

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

47. Sapo Sessions #2: Javascript for Beginners 3.1.5 Alterar o estilo do elemento Quero que a página agora ﬁque com um background negro document.body.style.backgroundColor = “black”;

48. Sapo Sessions #2: Javascript for Beginners 3.1.6 Remover elemento Quero remover da página o elemento “elem” elem.parentNode.removeChild(elem);

49. Sapo Sessions #2: Javascript for Beginners 4. Aplicação: Modal Window

50. Sapo Sessions #2: Javascript for Beginners Perguntas? Pedro Eugénio email: peugenio@co.sapo.pt messenger: voxmachina@sapo.pt web: igeni.us

51. Sapo Sessions #2: Javascript for Beginners Recursos Javascript: http://www.w3schools.com/JS/ FireBug: http://getﬁrebug.com/ DOM: http://www.w3.org/DOM/

52. Sapo Sessions #2: Javascript for Beginners setTimeout( “endPresentation();” , 3000 );

JavaScript for Beginners

JavaScript for Beginners

Recommended

More Related Content

What's hot

What's hot(19)

Viewers also liked

Viewers also liked(20)

Similar to JavaScript for Beginners

Similar to JavaScript for Beginners(20)

More from SAPO Sessions

More from SAPO Sessions(12)

Recently uploaded

Recently uploaded(14)

JavaScript for Beginners