JavaScript for Beginners

  • 2,822 views
Uploaded on

JavaScript from the ground up. …

JavaScript from the ground up.

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,822
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
147
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 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
  • 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 especificaçã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 especificaçã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 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
  • 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 fixo 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 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
  • 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 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
  • 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 fique 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://getfirebug.com/ DOM: http://www.w3.org/DOM/
  • 52. Sapo Sessions #2: Javascript for Beginners setTimeout( “endPresentation();” , 3000 );