Sapo Sessions #2



JavaScript for Beginners
 Sintaxe, boas práticas, metodologias e outras
              informações útei...
Sapo Sessions #2: Javascript for Beginners



                     Sequência


1. Bem-vindo ao mundo Javascript
   biografi...
Sapo Sessions #2: Javascript for Beginners



1. Bem-vindo


   Com que objectivo?

     Efeitos

     Animações

     Man...
Sapo Sessions #2: Javascript for Beginners



1.1 História do Javascript    ECMA-262: é uma especificação
                 ...
Sapo Sessions #2: Javascript for Beginners



1.2 Javascript is not Java!!!


   Whhhhhhhhhaaaaaaaaaatttt?

     Só a sint...
Sapo Sessions #2: Javascript for Beginners



1.3 Hello World


  <!DOCTYPE html PUBLIC quot;-/    /W3C/  /DTD XHTML 1.0 T...
Sapo Sessions #2: Javascript for Beginners



1.3 Hello World



   <body onload=”alert(‘Hello World!’);”>

   body onload...
Sapo Sessions #2: Javascript for Beginners



                     Sequência


1. Bemvindo ao mundo Javascript
   biografia...
Sapo Sessions #2: Javascript for Beginners



2. O básico



   Variáveis e Tipos

   Operadores

   Estruturas de control...
Sapo Sessions #2: Javascript for Beginners



2.1 Variáveis e Tipos




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

  ...
Sapo Sessions #2: Javascript for Beginners



2.1.1 Declaração de variáveis




   A visibilidade de uma variável depende ...
Sapo Sessions #2: Javascript for Beginners



2.1.2 Convenções



   Maiusculas, minusculas, “_” e “$”

   teste e Teste s...
Sapo Sessions #2: Javascript for Beginners



2.1.3 Tipos Primitivos




   São tratados e passados como valores

   Algun...
Sapo Sessions #2: Javascript for Beginners



2.1.3.1 Boolean




   Dois valores possíveis

     var verdade = true;

   ...
Sapo Sessions #2: Javascript for Beginners



2.1.3.2 Numeric



   Pode-se usar variáveis do tipo Float ou Integer,
   ma...
Sapo Sessions #2: Javascript for Beginners



2.1.3.3 String




   Strings e caracteres são ambas strings

     var nome ...
Sapo Sessions #2: Javascript for Beginners



2.1.4 Tipos Complexos




   Uma variável do tipo complexo é um Objecto

   ...
Sapo Sessions #2: Javascript for Beginners



2.1.4.1 Arrays


   Um Array é uma lista de elementos

   Podem conter todo ...
Sapo Sessions #2: Javascript for Beginners



2.1.4.2 Objectos



   var objecto = new Object();

     objecto.nome = “O m...
Sapo Sessions #2: Javascript for Beginners



2.2 Operadores



   var total = 1 + 1;

   total += 1;

   total -= 1;

   ...
Sapo Sessions #2: Javascript for Beginners



2.2.1 Aritmética




   somar, subtrair, multiplicar , dividir , resto da
  ...
Sapo Sessions #2: Javascript for Beginners



2.2.1 Aritmética: “+”



   O operador “+” pode ser usado em três
   situaçõ...
Sapo Sessions #2: Javascript for Beginners



2.2.2 Bitwise

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

   Tratam os argumentos como se...
Sapo Sessions #2: Javascript for Beginners



2.2.3 Assignment



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

     Atribuem um valor a uma var...
Sapo Sessions #2: Javascript for Beginners



2.2.4 Incrementadores

   ++ e --

   Icrementam ou decrementam o valor de u...
Sapo Sessions #2: Javascript for Beginners



2.2.5 Comparação



    ==, !=, >, >=, <, <=, ===, !==

    Servem para comp...
Sapo Sessions #2: Javascript for Beginners



2.2.6 Lógicos



   &&, || e !

   Se a e (&&) b então...

   Se a ou (||) b...
Sapo Sessions #2: Javascript for Beginners



2.2.7 O Operador: quot;? :quot;




   É útil para substituir longas linhas ...
Sapo Sessions #2: Javascript for Beginners



2.3 Estruturas de controle



     Controlam a execução do código

     Deci...
Sapo Sessions #2: Javascript for Beginners



2.3.1 If


  if( a == b ) {
    alert( “a tem o mesmo valor que b” );
  }


...
Sapo Sessions #2: Javascript for Beginners



2.3.2 While



   while( x < 10 )
   {
     alert( “estou-me a repetir” );
 ...
Sapo Sessions #2: Javascript for Beginners



2.3.3 Do...While...




     do {
       alert( “aqui vou eu outra vez” );
 ...
Sapo Sessions #2: Javascript for Beginners



2.3.4 For




     for( var c = 0; c < 10; c++ )
     {
       alert( “vai v...
Sapo Sessions #2: Javascript for Beginners



2.3.5 Switch


    switch( option )
    {
      case quot;femeaquot; : alert...
Sapo Sessions #2: Javascript for Beginners



2.3.5 Switch


    switch( option )
    {
      case quot;femeaquot; : alert...
Sapo Sessions #2: Javascript for Beginners



2.3.5 Switch

    switch( option )
    {
      case quot;femeaquot; : alert(...
Sapo Sessions #2: Javascript for Beginners



2.4 Funções e Objectos

     Funções permitem partir o código em
     difere...
Sapo Sessions #2: Javascript for Beginners



2.4.1 Funções

   function helloWorld () { }

     Uma função

   var helloW...
Sapo Sessions #2: Javascript for Beginners



2.5 Eventos


   Um evento ocorre quando acontece algo na
   página do brows...
Sapo Sessions #2: Javascript for Beginners



                     Sequência


1. Bemvindo ao mundo Javascript
   biografia...
Sapo Sessions #2: Javascript for Beginners



3. O passo seguinte



   Document Object Model (DOM)

   Exemplo do uso de ...
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/...
Sapo Sessions #2: Javascript for Beginners



3.1.2 Pesquisar elemento



   Quero o elemento com id “eid”

     document....
Sapo Sessions #2: Javascript for Beginners



3.1.3 Alterar elemento




   Quero que o elemento com id igual a “caixa” te...
Sapo Sessions #2: Javascript for Beginners



3.1.4 Adicionar elemento



   Quero criar um novo link na página

     var ...
Sapo Sessions #2: Javascript for Beginners



3.1.5 Alterar o estilo do elemento




   Quero que a página agora fique com ...
Sapo Sessions #2: Javascript for Beginners



3.1.6 Remover elemento




   Quero remover da página o elemento “elem”

   ...
Sapo Sessions #2: Javascript for Beginners



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



Perguntas?



   Pedro Eugénio

     email: peugenio@co.sapo.pt

     messen...
Sapo Sessions #2: Javascript for Beginners



Recursos




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

   FireBug: http:/...
Sapo Sessions #2: Javascript for Beginners




setTimeout( “endPresentation();” , 3000 );
Upcoming SlideShare
Loading in...5
×

JavaScript for Beginners

3,030

Published on

JavaScript from the ground up.

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,030
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
157
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

JavaScript for Beginners

  1. 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. 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. 3. Sapo Sessions #2: Javascript for Beginners 1. Bem-vindo Com que objectivo? Efeitos Animações Manipulação Validação RIA
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Sapo Sessions #2: Javascript for Beginners 2.1.3.1 Boolean Dois valores possíveis var verdade = true; var falso = false;
  15. 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. 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. 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. 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. 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. 20. Sapo Sessions #2: Javascript for Beginners 2.2 Operadores var total = 1 + 1; total += 1; total -= 1; total == 1; total === String(1);
  21. 21. Sapo Sessions #2: Javascript for Beginners 2.2.1 Aritmética somar, subtrair, multiplicar , dividir , resto da divisão +, -, * , / , %
  22. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Sapo Sessions #2: Javascript for Beginners 2.3.4 For for( var c = 0; c < 10; c++ ) { alert( “vai vai vai!!!” ); }
  34. 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. 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. 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. 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. 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. 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. 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. 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. 42. Sapo Sessions #2: Javascript for Beginners 3.1 DOM
  43. 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. 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. 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. 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. 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. 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. 49. Sapo Sessions #2: Javascript for Beginners 4. Aplicação: Modal Window
  50. 50. Sapo Sessions #2: Javascript for Beginners Perguntas? Pedro Eugénio email: peugenio@co.sapo.pt messenger: voxmachina@sapo.pt web: igeni.us
  51. 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. 52. Sapo Sessions #2: Javascript for Beginners setTimeout( “endPresentation();” , 3000 );
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×