tmn - Introdução ao JavaScript

3,889 views

Published on

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

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

No Downloads
Views
Total views
3,889
On SlideShare
0
From Embeds
0
Number of Embeds
963
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

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
  • tmn - Introdução ao JavaScript

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

    ×