tmn - Introdução ao JavaScript

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]

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]

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]

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

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

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

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

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

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

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]

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

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

JavaScript Variáveis e tipos de variáveis Booleanos true false [email_address]

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

JavaScript Variáveis e tipos de variáveis null Valor que não é nada Mas é um valor :) [email_address]

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

JavaScript Variáveis e tipos de variáveis Valores falsos false null undefined ”” 0 NaN [email_address] Boolean( * ) // false

JavaScript Variáveis e tipos de variáveis Tudo o resto é verdadeiro true [email_address]

JavaScript Variáveis e tipos de variáveis E tudo o resto são Objectos [email_address]

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]

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()

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]

JavaScript Variáveis e tipos de variáveis Palavras reservadas [email_address]

JavaScript Comentários /* ... */ // ... [email_address] /* vou fazer um alert */ alert('Hello World'); // foi feito um alert('Hello World')

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]

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

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

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

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

JavaScript Statements expressão if switch while do..while for break continue return try..catch..finally throw [email_address]

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]; ... } }

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

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');

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();

JavaScript funções e scopes function funcName() { ... } Apenas uma função define um scope [email_address]

JavaScript funções e scopes var Define uma variável num scope [email_address]

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

JavaScript funções e scopes scope No JavaScript 1.7 foi introduzido o ”let” <script type="text/javascript;version=1.7"> [email_address] function F() { let a = 2; if(true) { let a = 666; alert(a); // 666 } alert(a); // 2 }

JavaScript funções e scopes return return expression; return; [email_address] function F1() { return 'Hello'; } function F2() { return; } alert(F1()); // Hello alert(F2()); // undefined

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

JavaScript Objectos... Sim, outra vez :) [email_address]

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

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

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:''});

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();

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

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) { }

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'];

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

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

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']

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(){ ... }

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

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();

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

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

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(){...}

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]

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); }

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="myid" style="'+s+'"></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');

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+$|\n+$/g, ''); } // Passamos a ter: var str = ' abcd '; str.trim(); // 'abcd'

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

JavaScript eval() É o compilador/interpretador de JavaScript do browser Executa uma string e retorna o resultado Usar apenas para JSON [email_address] eval("a=5; b=4; alert(a+b);"); // 9 function a() { alert('__a__'); } function b(aFunction) { eval(aFunction)(); } b('a'); // __a__

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]

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}

JavaScript Outros Objectos Date() RegExp() ... [email_address] new Date(); new RegExp(”[a-z]”, ”ig”);

JavaScript ainda há mais slides ? [email_address]

JavaScript só para conseguir fazer 69 slides :) (ainda falta um...) [email_address]

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]

tmn - Introdução ao JavaScript

Mais conteúdo relacionado

Mais procurados (20)

Destaque (17)

Semelhante a tmn - Introdução ao JavaScript (20)

Último (19)

tmn - Introdução ao JavaScript

Notas do Editor