tmn - Introdução ao JavaScript

  • 3,352 views
Uploaded on

Formação Introdução ao JavaScript core - No âmbito do concurso widgets tmn.

Formação Introdução ao JavaScript core - No âmbito do concurso widgets tmn.

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
3,352
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
6

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
  • ECMAScript – European Community Manofactures Association
  • Herança por prototype – objectos herda de outros objectos e não de classes Lambda – funções como classes de objectos

Transcript

  • 1. Introdução ao JavaScript
    • SAPO
    • http://www.sapo.pt/
    • tmn
    • http://developers.tmn.pt/
    • Cláudio Gamboa
    • 19 de Maio 2010
    • < [email_address] >
    [email_address]
  • 2. JavaScript
    • É uma linguagem de programação
    • É pequena, mas é sofisticada
    • Tem alguns erros de implementação
    • Corre principalmente no browser, mas está-se a passar para o servidor
    • Os standards são definidos pela ECMAScript desde 1998
    [email_address]
  • 3. JavaScript
    • É ”scriptable”
    • Usa objectos como containers
    • Tem herança por prototype – (objectos herdam de outros objectos e não de classes)
    • ” Linkavel” por variáveis globais
    [email_address]
  • 4. JavaScript
    • Variáveis e tipos de variáveis
          • Number
          • String
          • Boolean
          • Object
          • null
          • undefined
    [email_address] typeof (5); // number typeof ('some text'); // string typeof (true); // boolean typeof (new Object()); // object typeof (new Array()); // object typeof (varName); // undefined
  • 5. JavaScript Variáveis e tipos de variáveis
    • Number
          • Tem apenas um tipo numérico, não tem ints nem floats
          • 64-bit floating point
          • IEEE-754 (Double)
          • Falhas no mapeamento de algumas operações
    [email_address] >>> 0.1 + 0.2 0.30000000000000004
  • 6. JavaScript Variáveis e tipos de variáveis
    • NaN
          • Not a Number
          • Resulta de operações com undefined ou de um erro na operação
          • Operações com NaN = NaN
          • NaN não é igual a nada, incluindo NaN :)
    [email_address] +'5' = 5 (number) '5' + 4 = 54 +'5' + 4 = 9 +'a' = NaN +'a' + 4 = NaN typeof(+'a' + 4); // number
  • 7. JavaScript Variáveis e tipos de variáveis
    • Number()
          • Converte um valor para um número
          • Usar para ”input values”
    [email_address] <input type=”text” id=”inputform” value=”100” /> var val = document .getElementById('inputform').value; typeof(val); // string Number(val) * 0.20 = ... Number('aaa'); // NaN Number('123asd'); // NaN
  • 8. JavaScript Variáveis e tipos de variáveis
    • parseInt()
    • parseFloat()
          • Convertem um valor para um número
          • Param no primeiro ”não dígito”
    [email_address] parseInt('123aaa'); // 123 parseFloat('1.23bbb'); // 1.23 parseInt('08'); // 0 parseInt('08', 10); // 8 parseInt('FF', 16); // 255 parseInt('10', 2); // 2 parseInt('ab123'); // NaN var num = 12345.6789 num.toFixed(2); // 12345.68
  • 9. JavaScript Variáveis e tipos de variáveis
    • Math Methods
          • Math.PI
          • Math.abs()
          • Math.round()
          • Math.floor()
          • Math.random()
          • Math.log()
          • Math.sin()
          • Math.sqrt()
          • Math.pow()
    [email_address] Math.abs('-123'); // 123 Math.round('5.67'); // 6 Math.floor('5.67'); // 5 Math.random(); // 0 < x < 1 Math.log(1); // 0 Math.sin(Math.PI / 2); // 1 Math.sqrt(64); // 8 Math.pow(2, 4); // 16
  • 10. JavaScript Variáveis e tipos de variáveis
    • String
          • É uma sequência de 0 ou mais caracteres 16-bit
          • Encoding – Unicode (UCS-2) não UTF16
          • Não existe char – char é uma string.length = 1
          • Define-se com ' ' ou ” ”
          • 'string'.length = número de caracteres
    [email_address]
  • 11. JavaScript Variáveis e tipos de variáveis
    • String()
          • Converte uma variável para uma string
          • Também se pode usar variable+””
    [email_address] var myVar = 1; typeof (myVar); // number myVar = String(myVar); ou myVar = myVar+''; typeof(myVar); // string
  • 12. JavaScript Variáveis e tipos de variáveis
    • String Methods
          • charAt()
          • indexOf()
          • lastIndexOf()
          • match()
          • replace()
          • substring()
          • toLowerCase()
          • toUpperCase()
          • ...
    [email_address] 'abcd'.charAt(2); // c 'abcd'.indexOf('c'); // 2 'abcda'.lastIndexOf(a); // 4 'abcda'.match(/(a|c)/); // [a,c,a] 'abcda'.replace(/(a|c)/g,'*'); // *b*d* 'abcd'.substring(0,2); // ab 'abcd'.substring(1,2); // b 'abcd'.substr(1,2); // bc 'aBCd'.toLowerCase(); // abcd 'aBCd'.toUpperCase(); // ABCD
  • 13. JavaScript Variáveis e tipos de variáveis
    • Booleanos
          • true
          • false
    [email_address]
  • 14. JavaScript Variáveis e tipos de variáveis
    • Boolean()
          • Retorna true se o valor é verdadeiro
          • Retorna false se o valor é falso
          • É o mesmo que !!
    [email_address] Boolean(true); // true Boolean(false); // false Boolean(123); // true Boolean('false'); // true Boolean(0); // false Boolean(1); // true !!(0); // false !!(1); // true !!('ab'); // true
  • 15. JavaScript Variáveis e tipos de variáveis
    • null
          • Valor que não é nada
          • Mas é um valor :)
    [email_address]
  • 16. JavaScript Variáveis e tipos de variáveis
    • undefined
          • É um valor que ainda não é um valor :P
          • É o valor default para qualquer variável
    [email_address] var a = 1; var b; typeof(a); // number typeof(c); // undefined typeof(b); // undefined
  • 17. JavaScript Variáveis e tipos de variáveis
    • Valores falsos
          • false
          • null
          • undefined
          • ””
          • 0
          • NaN
    [email_address] Boolean( * ) // false
  • 18. JavaScript Variáveis e tipos de variáveis
    • Tudo o resto é verdadeiro
    • true
    [email_address]
  • 19. JavaScript Variáveis e tipos de variáveis
    • E tudo o resto são
    • Objectos
    [email_address]
  • 20. JavaScript Variáveis e tipos de variáveis
    • Object
          • Objectos podem ser vistos como estruturas
          • Objectos podem ser vistos como hash tables
          • Criam-se com
            • new Object
            • {} (Object literal)
          • O nome dos membros pode ser qualquer string
          • O valor dos membros também, excepto undefined
          • Acede-se aos membros com:
            • obj.membro
            • obj['membro']
    [email_address]
  • 21. JavaScript Variáveis e tipos de variáveis
    • Objects
    [email_address] var pessoa = { nome: 'Ze Manel', idade: 29, cidade: 'Lisboa', programa: function(){} }; pessoa nome idade cidade o que faz? (método) Ze Manel 29 Lisboa programa()
  • 22. JavaScript Variáveis e tipos de variáveis
    • Variáveis
          • Podem começar por qualquer letra [a-z] , _ , $
          • Devem ser declaradas com:
            • var nome_da_variavel;
          • _ na spec é reservada para implementações internas
          • $ na spec está reservada para as máquinas - MACROS
          • Não podem ser palavras reservadas
    [email_address]
  • 23. JavaScript Variáveis e tipos de variáveis
    • Palavras reservadas
    [email_address]
  • 24. JavaScript
    • Comentários
          • /* ... */
          • // ...
    [email_address] /* vou fazer um alert */ alert('Hello World'); // foi feito um alert('Hello World')
  • 25. JavaScript
    • Operadores
          • Aritméticos
              • +, -, *, /, %
          • Comparação
              • ==, !=, <, >, <=, >=, ===, !==
          • Lógicos
              • &&, ||, !
          • Bitwise
              • & (AND), | (OR), ^ (XOR), ~ (NOT),
              • >> (Shift right w/ sign),
              • >>> (Shift right w/ zero fill), << (Shift left)
          • Ternários
              • ?:
    [email_address]
  • 26. JavaScript Operadores
    • +
          • Soma – Se dois valores forem números vai somar
          • Concatenação – Se não forem vai concatenar
          • Faz conversão para números
    [email_address] 2 + 3 // 5 '2' + 3 // 23 'a' + 2 + 3 // a23 +'2' + 3 // 5 2 + 3 + 'a' // 5a
  • 27. JavaScript Operadores
    • ==, !=
          • Fazem comparação
          • Podem produzir colisão de tipos
            • Usar: ===, !==
    [email_address] (2 == 2) // true (2 != 3) // true (2 != 2) // false ('a' == 'a') // true (1 == true) // true (1 === true) // false
  • 28. JavaScript Operadores
    • &&
          • ” e...”
          • Se o primeiro existir (!= null) retorna o segundo
          • Se não existir, retorna o primeiro
    [email_address] a = 5; b = null; (a && b) // null (b && a) // null
  • 29. JavaScript Operadores
    • ||
          • ” ou...”
          • Se o primeiro for falso retorna o segundo
          • Se não for, retorna o primeiro – retorna o primeiro que encontrar
    [email_address] a = 5; b = null; c = null; (a || b) // 5 (b || c || a) // 5 (b || c) // null
  • 30. JavaScript
    • Statements
          • expressão
          • if
          • switch
          • while
          • do..while
          • for
          • break
          • continue
          • return
          • try..catch..finally
          • throw
    [email_address]
  • 31. JavaScript statements
    • for
    [email_address] for( var i=0; i < 5; i++) { alert(i); } // iterar num array for( var i=0; i < myArray.length; i++) { myArray[i]; ... } // iterar num objecto for( var i in myObject) { if(myObject.hasOwnProperty(i)) { /* verificar sempre se ”i” é propriedade do objecto */ myObject[i]; ... } }
  • 32. JavaScript statements
    • labels
          • Pode haver labels (identificadores)
              • do / for / switch / while
          • break pode-se referir aos labels
          • javascript: não pode ser usado como label
    [email_address] loop : for(var i=0; i < 5; i++) { for(var j=0; j < 2; j++) { if(i == 3) { break loop ; } alert(j +' => '+ i); } } alert('final'); break loop ; 0 => 0 1 => 0 0 => 1 1 => 1 0 => 2 1 => 2 final break; 0 => 0 1 => 0 0 => 1 1 => 1 0 => 2 1 => 2 0 => 4 1 => 4 final
  • 33. JavaScript statements
    • throw
          • Gera um objecto de excepção
    [email_address] throw {name:'nome_da_excepcao', message:'razão da excepcão'} // ou throw new Error('razão');
  • 34. JavaScript statements
    • try..catch..finally
          • ” Apanha” a excepção
    [email_address] function F() { try { alert(5 + aa) } catch(err) { // err objecto do erro alert(err.message); return; } } F(); function F() { try { alert(5 + aa) } catch(err) { // err objecto do erro alert(err.message); return; } finally { alert('fim'); } } F();
  • 35. JavaScript funções e scopes
    • function funcName() { ... }
          • Apenas uma função define um scope
    [email_address]
  • 36. JavaScript funções e scopes
    • var
          • Define uma variável num scope
    [email_address]
  • 37. JavaScript funções e scopes
    • scope
          • É um bloco em que as variáveis definidas dentro dele são privadas
          • Blocos/statements {} não definem um scope
          • Scopes são apenas definidos por funções
    [email_address] var a = 1; function F() { var b = 2; c = 3; alert(a); alert(b); alert(c); } F(); // 1 // 2 // 3 alert(a); // 1 alert(b); // undefined alert(c); // 3 var a = 1; var b = 3; function F() { var a = 2; b = 4; alert(a); alert(window.a); alert(b); } F(); // 2 // 1 // 4 alert(a) // 1 alert(b) // 4
  • 38. JavaScript funções e scopes
    • scope
          • No JavaScript 1.7 foi introduzido o ”let”
    • <script type=&quot;text/javascript;version=1.7&quot;>
    [email_address] function F() { let a = 2; if(true) { let a = 666; alert(a); // 666 } alert(a); // 2 }
  • 39. JavaScript funções e scopes
    • return
          • return expression;
          • return;
    [email_address] function F1() { return 'Hello'; } function F2() { return; } alert(F1()); // Hello alert(F2()); // undefined
  • 40. JavaScript
    • ...
          • É capaz de ser hora de comer...
    [email_address] var sInt = setInterval(function() { comer(); falar(); }, 1000); setTimeout(function(){ clearInterval(sInt); pensarEmVoltarPraSala(); }, 10 * 60 * 1000); setTimeout(function(){ voltarPraSala(); }, 15 * 60 * 1000);
  • 41. JavaScript
    • Objectos...
          • Sim, outra vez :)
    [email_address]
  • 42. JavaScript objects
    • Object
          • Objectos são copiados por referência:
    [email_address] // Declaração var pessoa = new Object(); ou var pessoa = {}; // Atribuição pessoa.nome = 'Ze Manel'; pessoa.idade = '29'; pessoa['for'] = 'javascript'; var oA = {num: 333}; var oB = oA ; alert( oB .num); // 333 oB .num = 666; alert( oB .num); // 666 alert( oA .num); // 666 var A = 333; var B = A ; alert( B ); // 333 B = 666; alert( B ); // 666 alert( A ); // 333
  • 43. JavaScript objects
    • Object literal
          • : a separar membro do valor
          • , a separar os pares nome/valor
    [email_address] var pessoa = { nome: 'Ze Manel', idade: 29, careca: false, bandas: ['Emperor', 'Opeth', '...'], animais: { gatos: 2, caes: 0 }, ' for ': 'javascript', filhos: null }; pessoa.nome; // Ze Manel pessoa['nome']; // Ze Manel pessoa['for']; // javascript
  • 44. JavaScript objects
    • Object literal
          • Útil para definir como argumento para uma função
    [email_address] function criarInput(type, id, value) { ... } criarInput('text', ... Ermm... qual a ordem? --------------------------------------------- function criarInput(obj) { ... elm.type = obj.type; elm.id = obj.id; elm.value = obj.value; } criarInput({type:'button', id:'myid', value:''});
  • 45. JavaScript objects
    • delete
          • Apaga um membro de um objecto
    [email_address] var obj = { primeiro_nome: 'Ze', ultimo_nome: 'Manel' }; delete obj['primeiro_nome']; obj.toSource(); // {ultimo_nome:'Manel'} FF only SAPO.Utility.Dumper.windowDump();
  • 46. JavaScript arrays
    • Array
          • Os arrays herdam dos objectos
              • typeof( array ) // object
          • Nomes dos membros são números
          • Têm uma propriedade length que dá o tamanho
    [email_address] var pessoa = [ 'Ze Manel', 29, 'Lisboa' ]; pessoa 0 1 2 Ze Manel 29 Lisboa
  • 47. JavaScript arrays
    • Array
          • Iterar num array
          • Usa-se o for e não o for..in – for..in não especifica a ordem pela qual queremos percorrer o array
    [email_address] // usa-se o: for(var i=0; i < array.length; i++) { } // ou: for(var i = (array.length – 1); i >= 0; i–- ) { } // e não o: for(var i in array) { }
  • 48. JavaScript arrays
    • Array
          • Para criar um array:
              • new Array()
              • []
    [email_address] var myArray = new Array(); var myArray = []; var myArray = new Array('Ze', 'Manel'); var myArray = ['Ze', 'Manel'];
  • 49. JavaScript arrays
    • Array
          • Adicionar
          • Aceder
    [email_address] var myArray = []; // Adiciona myArray.push('Ze'); myArray[myArray.length] = 'Manel'; // Acede myArray[0] // Ze myArray[1] // Manel // e não myArray.0
  • 50. JavaScript arrays
    • Array
          • Apagar/remover
    [email_address] var myArray = ['a', 'b', 'c', 'd']; alert(myArray); // a, b, c, d alert(myArray[0]); // a myArray.splice(0, 1); alert(myArray); // b, c, d alert(myArray[0]); // b delete myArray[1]; alert(myArray); // b, undefined, d
  • 51. JavaScript arrays
    • Array methods
          • concat
          • join
          • push
          • sort
          • slice
          • splice
          • ...
    [email_address] var a = ['a', 'b']; var b = ['d', 'c']; a.concat(b); // ['a', 'b', 'd', 'c'] a.join('|'); // 'a|b|d|c' a.push('e'); // ['a','b','d','c','e'] a.sort(); // ['a','b','c','d','e'] a.slice(2,4); // ['c','d'] a.splice(0,1); // ['b','c','d','e']
  • 52. JavaScript functions
    • Functions
          • Funções são classes de objectos
          • Funções podem ser:
              • passadas
              • retornadas
              • guardadas
              • (como outro valor qualquer)
          • Funções também são herdadas de objectos
          • Podem ser definidas onde quisermos, até mesmo dentro de outras funções
          • Definem um scope :)
    [email_address] function myFunction() { ... } // mesmo que var myFunction = function(){ ... }
  • 53. JavaScript functions
    • function
          • Definição
    [email_address] function myFunction(x, y) { alert(x+' - '+y); } // ao invocar a função myFunction('a', 'b', 'c') // c é ignorado // a - b myFunction('a') // y será undefined // a - undefined
  • 54. JavaScript functions
    • function
          • Podem-se associar funções como valores de membros de objectos
          • Passa a ser um método de um objecto
    [email_address] var obj = { myFunction: function() { }, otherFunction: function() { /* invocação dentro do objecto */ this.myFunction(); } } // invoca-se obj.myFunction(); var obj = {}; obj.myFunction = function() {}; obj.otherFunction = function(){ /* invocação dentro do objecto */ this.myFunction(); }; // invoca-se obj.myFunction();
  • 55. JavaScript functions
    • function
          • Invocar uma função
    [email_address] // como função: functionName(args); // como método dum objecto: objName.functionName(args); // como construtor: new functionName(args); // com o apply: functionName. apply (objName, args); // é o mesmo que: objName.method = functionName; objName.method(args);
  • 56. JavaScript functions
    • this
          • É o próprio objecto, mas depende da invocação
    [email_address] // como função: this = o objecto global // como método dum objecto: this = o objecto // como construtor: this = o novo objecto que é instanciado
  • 57. JavaScript functions
    • arguments
          • Quando uma função é invocada é criada uma variável interna ”arguments”
          • É um objecto array like
    [email_address] function myF() { alert(arguments[0]); alert(arguments[1]); alert(arguments.length); alert(arguments.callee); } myF('a', 'b'); // a // b // 2 // myF(){...}
  • 58. JavaScript functions
    • closures
          • É criado com funções dentro de outras funções que têm acesso ao scope do pai
          • Mesmo que a função pai tenha terminado, a função filha continua a correr e continua com acesso ao pai
    [email_address]
  • 59. JavaScript functions
    • closures
    [email_address] function abre(id) { var elm = document.getElementById(id); var tamanho = 0; function vaiAbrindo() { if(tamanho < 100) { tamanho = tamanho + 5; elm.style.height = tamanho+'px'; setTimeout(vaiAbrindo, 100); } } setTimeout(vaiAbrindo, 100); }
  • 60. JavaScript functions
    • closures
    [email_address] // ir a www.sapo.pt, escrever isto no Firebug e executar var s = 'border:1px solid red; height:0px; width:300px;'; document .body.innerHTML = '<div id=&quot;myid&quot; style=&quot;'+s+'&quot;></div>'; function abre(id) { var elm = document .getElementById(id); var tamanho = 0; function vaiAbrindo() { if(tamanho < 100) { tamanho = tamanho + 5; elm.style.height = tamanho+'px'; setTimeout(vaiAbrindo, 100); } } setTimeout(vaiAbrindo, 100); } abre('myid');
  • 61. JavaScript functions
    • Podem-se estender ”Built-in types”
          • Object.prototype
          • Array.prototype
          • Function.prototype
          • String.prototype
          • Number.prototype
          • Boolean.prototype
    [email_address] String.prototype.trim = function() { return this.replace(/^s+|s+$| +$/g, ''); } // Passamos a ter: var str = ' abcd '; str.trim(); // 'abcd'
  • 62. JavaScript
    • typeof()
          • Diz-nos de que tipo é um valor
    [email_address] tipo Vs. typeof Vs. constructor object - object - Object function - function - Function array - object - Array number - number - Number string - string - String boolean - boolean - Boolean null - object - error... undefined - undefined - error...
  • 63. JavaScript
    • eval()
          • É o compilador/interpretador de JavaScript do browser
          • Executa uma string e retorna o resultado
          • Usar apenas para JSON
    [email_address] eval(&quot;a=5; b=4; alert(a+b);&quot;); // 9 function a() { alert('__a__'); } function b(aFunction) { eval(aFunction)(); } b('a'); // __a__
  • 64. JavaScript
    • Global scope
          • Num browser a variável global é ” window ”
          • Tudo tem como pai/avô/bisavô o objecto ” window ”
          • Evitar poluir o ”scope global” com variáveis
          • No SAPO, por exemplo, temos uma única variável global, o ”SAPO”
          • No SAPO deve-se evitar a variável ”SAPO” para não ter problemas com a LibSAPO.js
          • ” Sapo”, ”sapo” também não, pois podem dar azo a confusões
    [email_address]
  • 65. JavaScript
    • O global scope
          • Quando queremos meter um bloco de código num site é boa prática criar um scope com uma função anónima que se executa a ela própria
    [email_address] (function(){ var options = { mode: 2 }; SAPO.Widget.ShareThis(options); })(); window.options; // undefined // senão seria: window.options; // {mode:2}
  • 66. JavaScript
    • Outros Objectos
          • Date()
          • RegExp()
          • ...
    [email_address] new Date(); new RegExp(”[a-z]”, ”ig”);
  • 67. JavaScript ainda há mais slides
    • ?
    [email_address]
  • 68. JavaScript
    • só para conseguir fazer
    • 69
    • slides
    • :)
    • (ainda falta um...)
    [email_address]
  • 69. JavaScript slide 69
    • Cláudio Gamboa
    • @email: [email_address]
    • @xmpp: [email_address]
    • @_: http://www.sapo.pt
    • @blog: http://blog.pdvel.com/
    • @social: suskind
    [email_address]