Linguagem JavaScript

1. Linguagem JavaScript • Programação na Internet • Secção de Sistemas e Tecnologias de Informação • ISEL-DEETC-LEIC • Luis Falcão - lfalcao@cc.isel.ipl.pt • Carlos Guedes – cguedes@cc.isel.ipl.pt • Nuno Datia – datia@isel.ipl.pt

2. Autores e contributos • Autores • Jorge Martins • Carlos Guedes • Contributos • Luís Falcão • Paulo Pereira • Pedro Félix Linguagem Javascript

3. História da JavaScript • Desenvolvida por BrendanEich da Netscape, como a linguagem de script para páginas no Netscape2 • Versão Standard actual: ECMAScript - Edition 3 • http://www.ecma-international.org/publications/standards/Ecma-262.htm Linguagem Javascript

4. Tipos de dados • Notas sobre o sistema de tipos: • Não existe tipo inteiro • Divisão entre dois números produz número real (fraccional) • Não existe tipo para representar caracteres • Um carácter é uma string de dimensão 1 Linguagem Javascript

5. Valores primitivos Linguagem Javascript

6. Literais • Em JavaScriptos literais são usados para representar valores. Chamam-se literais por que são colocados literalmente no texto do programa. Existem os seguintes formatos literais: • Números (Numbers) • Ex:42, 0xFFF, -345. • Literaisbooleanos • Ex:true, false. • Literaisfloating-point • Ex:3.1415, -3.1E12, .1e12, 2E-12 • Cadeias de caracteres(strings) literais • Ex:"one line \n another line" • 'another string literal' • Arrays literais • Ex:["French Roast", "Columbian", "Kona"] • Ex:["Lion", , "Angel"] • Objectos literais • apresentados mais tarde É possível omitir valores do arraycolocando vírgulas sem expressão associada. Essas posições do arrayficam com valor null Linguagem Javascript

7. varmyHashtable = { }; var myHashtable = new Object(); Objectos • Em JavaScriptum objecto é um contentor de pares nome/valor, ou seja é uma “hashtable” • Suporta duas formas de acesso para leitura e escrita de valores • Subscript notation e dot notation • Na dot notation é necessário que a chave seja um identificador válido em JavaScript // Afecta a variável 'myHashtable' com uma referência para uma nova hashtable varmyHashtable = { }; // O mesmo que na linha anterior, mas com notação semelhante ao Java varmyHashtable = newObject(); myHashtable["name"] = "Carlos Guedes"; // subscriptnotation myHashtable.salaCCISEL = 8; // dotnotation vars = myHashtable["salaCCISEL"]; alert("s = " + s); varn = myHashtable.name; alert("n = " + n); //Sintaxedainstruçãoforparaenumeração das"chaves"(nome das // propriedades)doobjecto for(varkey in myHashtable) { document.writeln("<p>" + key + ": " + myHashtable[key]+ "</p>"); } Linguagem Javascript

8. Objectos – notação literal • Outra forma de criar objectos é através da notação literal • Forma compacta de criar objectos • A descrição de um objecto é um conjunto de pares nome-valor separados por vírgula, dentro de chavetas. • Os nomes podem ser identificadores ou strings seguidos de ':' (dois pontos). Devido a um erro na definição da linguagem, as palavras reservadas da linguagem não podem ser usadas na forma de identificadores, mas podem ser usados na forma de string. • Os valores podem ser literais ou expressões de qualquer tipo. varmyHashtable = { name : "Carlos Guedes", salaCCISEL : 8 }; return { event: event, op: event.type, to: event.srcElement, x: event.clientX + document.body.scrollLeft, y: event.clientY + document.body.scrollTop }; varemptyObject = {}; • Os objectos literais são a base do formato JavaScript Object Notation(JSON) Linguagem Javascript

9. vararr1 = [ ]; var arr2 = new Array(); Arrays (1) • São objectos, logo hash tables • São esparsos e heterogéneos • Não é necessário indicar a dimensão na construção • Crescem automaticamente (como vectores em java ou ArrayListe .NET) • Os valores são obtidos através de uma chave numérica (para as posições do array, para as restantes chaves é usada a notação normal dos objectos) • A principal diferença relativamente aos objectos é a existência da propriedade length • Tem um valor superior em uma unidade ao maior índice atribuído • Índices começam em 0 • Não são tipificados • Quando um novo item é adicionado a uma posição ‘n’ superior à maior existente, a propriedade length fica com o valor ‘n’+1 • Suportam duas formas de criação: literal e comum para objectos Linguagem Javascript

10. Arrays (2) // Criação de arrays varmyArray = [];// notação literal varmyArray = new Array();// notação de objecto (igual à linha anterior) vararrayWithSize = newArray(10); // O Array é iniciado 10 valores undefined // Notação literal varmyList = ['oats', 'peas', 'beans', 'barley']; varmonth_lengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; varslides =[ {url: 'slide0001.html', title: 'LookingAhead'}, {url: 'slide0021.html', title: 'Summary', soccerClub: 'SLB'}, 5 ]; // Adição de um elemento por afectação myList[i + 6] ="SLB"; // Exemplo vardiasDaSemana = [ "domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado" ]; vardias = ""; for(vari = 0; i < diasDaSemana.length; ++i) dias += diasDaSemana[i] + "\n"; alert(dias); Linguagem Javascript

11. Funções (1) • Funções emJavaScriptsão como as funções da linguagem C • Na chamada a funções não é necessário passar todos os parâmetros indicados na definição da função • Os parâmetros actuais em falta ficam com valor undefined • Os parâmetros actuais adicionais estão acessíveis via arrayarguments • Facilita a criação de funções com parâmetros opcionais • Suportam a definição de funções internas • Em JavaScriptas funções são “first class objects” • Podem ser guardados em objectos e passados como parâmetros // Função de recebe qualquer número de argumentos function sum() { var total = 0; for (vari = 0; i < arguments.length; ++i) { total += arguments[i]; } return total; } Linguagem Javascript

12. Funções (2) • Existem três formas de definir funções • operador function • Operador prefixo que produz um objecto função • O nome é opcional • Útil para realizar funções recursivas • Quando é omitido a função designa-se por função anónima • Útil quando é necessário passar uma função como parâmetro (callbacks) function name (argumentList) block functionvisitInArray(arrayObject, observer) { for(vari = 0; i < arrayObject.length; ++i) { varelem = arrayObject[i]; if(typeof(elem) == "number") observer(elem); } } visitInArray([1, 2, "3", 4, 5], function (x) { alert(x * x); }); Utilização de uma função anónima (function operator) Linguagem Javascript

13. Funções (3) • Instruçãofunction • Cria uma função, com determinado nome, no contexto actual • É possível criar funções dentro de outras (ver mais emClosures) • É uma forma compacta de utilização do functionoperator (com nome) • Construtor defunction • Recebe strings com os argumentos e o corpo da função, retornado um objecto função • Não é fácil definir o corpo da função em termos de umastring • Principalmente quando este temstrings • É ineficiente, pois é necessário ser compilada de cada vez que é utilizada function name (argumentList) block varname = functionname (argumentlist) block ; new Function(strings...) ! Esta forma não deve ser utilizada ! Linguagem Javascript

14. Objectos e a keyword this • Uma função é um objecto (logo, uma hashtable) • Pode conter membros (propriedades) • Pode conter os seus próprios dados • Pode ter o papel de classe, de construtor e de contentora de métodos relacionados • Pode ser membro de outro objecto (quando é membro de um objecto designa-se de método) • Existe uma variável de nome this que contém a referência para o objecto usado para chamar a função • Numa chamada “global”, this é uma referência para o Objecto Global foo.bar();// em bar, this é foo do.re.mi.fa(); // em fa o objecto é do.re.mi function f1() { . . . }; f1(); // em f1, this é o Objecto Global Linguagem Javascript

15. Funções Construtoras • As funções usadas na iniciação de objectos são designadas de “Funções Construtoras” • Numa chamada a uma função construtora, a sequência de chamadas é ligeiramente diferente de uma chamada normal • A chamada é realizada com o operador prefixo new • O operador new altera o significado de this na função. Nesta situação representa o objecto que foi criado // Definição de um Ponto function Point(x,y1) { this.x = x; this.y = y1; this.add = function(p) { this.x += p.x; this.y += p.y; returnthis; } } // Teste var p = new Point(2,3); var p1 = new Point(4,5); p.add(p1); // p.x = 6; p.y = 8; • O construtor do objecto deve iniciar (criar) os seus membros (dados e/ou funções) • O construtor retorna implicitamente o novo objecto (this) a não ser que exista retorno explicito • Os objectos criados têm uma ligação (não acessível directamente) para o protótipo da função construtora (ver protótipos à frente) • É convenção as funções construtoras terem um nome iniciado por maiúscula Linguagem Javascript

16. Objectos e Funções construtoras nativas da linguagem Linguagem Javascript

17. Protótipos • Os objectos função têm a propriedadeprototype • Quando uma função é usada como função construtora, os objectos construídos ficam com uma ligação implícita (não acessível programaticamente) para o protótipo da função construtora • No acesso às propriedades de um objecto, se esta não for encontrada, é percorrida a cadeia de protótipos até ser encontrada, ou até a cadeia terminar (ver à frente) • A utilização da cadeia de protótipos disponibiliza o mecanismo herança baseada em protótipos (objectivos semelhantes à herança das linguagens OO - ver à frente). • É possível acrescentar novas propriedades aos protótipos das funções construtoras nativas (ex: String) Linguagem Javascript

18. c1 c2 c3 constructor constructor constructor a “aaa” a “aaa” a “aaa” b “bbb” b “bbb” b “bbb” Protótipo explícito Diagrama de protótipos Protótipo implícito function CF() { this.a ="aaa"; this.b ="bbb"; } CF.c = "ccc"; CF.prototype.foo="foo"; var c1 = new CF(); var c2 = new CF(); var c3 = new CF(); CF CFprototype prototype prototype c “ccc” foo “foo” Linguagem Javascript

19. Acesso às propriedades de um objecto Exemplo: Acesso à propriedade p objectocontém ‘p’? Sim Não Usar o prototype do objecto prototype Retornavalor ‘p’ do objecto object tem prototype? objecto prototype tem construtor? Sim Sim Não Não retornavalorundefined Linguagem Javascript

20. Protótipos: exemplo • Para ver este exemplo utilizem a extensão firebug para o browserfirefox. Linguagem Javascript

21. Herança em JavaScript Linguagem Javascript

22. Herança baseada em protótipos // Definição da classe base function Base() {} Base.prototype.m1 = function (){ alert("Base.m1"); } Base.prototype.m2 = function (){ alert("Base.m2"); } // Definição da classe derivada function Derived() {} Derived.prototype = new Base(); Derived.prototype.m3 = function (){ alert("Derived.m3"); } // Redefinição de um método com chamada ao método base Derived.prototype.m2 = function (){ alert("Derived.m2"); this.constructor.prototype.m2(); } // Teste var o = new Derived(); o.m1(); o.m2(); o.m3(); Linguagem Javascript

23. Herança baseada em chamada à cadeia de f. construtoras function Base1() { this.m1 = function (){ alert("Base1.m1"); } this.m2 = function (){ alert("Base1.m2"); } } function Derived1() { //this.base = Base1; //this.base(); Base1.call(this); // sintaxe alternativa às linhas anteriores this.m3 = function (){ alert("Derived1.m3"); } // Redifinição de m2 this.m2base = this.m2; this.m2 = function (){ alert("Derived1.m2"); this.m2base(); } } var o = new Derived1(); o.m1(); o.m2(); o.m3(); Linguagem Javascript

24. Variáveis • As variáveis são definidas com a instruçãovar • Apenas existem dois contextos para as variáveis • Global • Funções • Quando definidas numa função, apenas são válidas nesse contexto • Variáveis definidas numa função sem a utilização do prefixovar, assume-se que existe num contexto superior (possivelmente o do Objecto Global) • Variáveis não iniciadas assumem o valorundefined • Numa função, por cada chamada é criado um novo conjunto de variáveis com o contexto dessa função (suporte para chamadas recursivas) Linguagem Javascript

25. Closures • Funções podem ser definidas dentro de outras funções • As funções internas têm acesso às variáveis e parâmetros formais da função externa (no exemplo, têm acesso à variável ‘x’) • Se existir uma referência para uma função interna após a função externa terminar, todas as variáveis e parâmetros continuam a existir (mas apenas acessíveis no contexto da função interna) • Podem ser usados na criação de membros privados na função construtora function Demo(x) { var a = x+1; this.m1 = function (){ alert(a + "," + x); } } var d1 = new Demo(5); var d2 = new Demo(8); d1.m1(); // alerts 6,5 d2.m1(); // alerts 9,8 Linguagem Javascript

26. Retorno de uma função • Todas as funções retornam um valor (não existe tipo void) • O valor de retorno por omissão é: • undefined– chamada normal a funções • this– funções construtoras ( new X() ) Linguagem Javascript

27. Instruções Linguagem Javascript

28. Tabela de operadores e prioridade Prioridade + _ Linguagem Javascript

29. Conversão para bool • Sempre que há uma conversão parabooleano (explícita ou implícita): • Valor lógicofalse • false, null, undefined, “”, 0 • Valor lógicotrue • restantes Linguagem Javascript

30. Notas sobre operadores • Operador + • Usado naadição e concatenação de strings • Se um dos operandos são strings, faz concatenação depois de converter o outro operando parastring • Pode ser usado como operador prefixo para converter uma string para número • Ex.º:+"1" • Operador && (And lógico) • Usado em expressões de guarda • Ex.º:varvalue = p && p.name; • Operador ||(Or lógico) • Usado para atribuir valores por omissão • Ex.º:varvalue = v || 10; Linguagem Javascript

31. Operador typeof: informação sobre o tipo de dados • O operadortypeofretornaumastringde acordo com o tipo do operando • Sintaxe: vartipoDoOperador = typeof(operador); Atenção ! Atenção ! Linguagem Javascript

32. Palavras Reservadas • abstractboolean break bytecasecatch char class const continuedebugger defaultdeletedo doubleelse enum export extendsfalse final finally float forfunctiongotoif implements import ininstanceof int interfacelongnative newnullpackage private protected publicreturnshort static super switch synchronizedthisthrow throws transient truetrytypeofvar volatile voidwhilewith Legenda: Usadas na linguagem Não usadas na linguagem Linguagem Javascript

33. Referências • DouglasCrockford: “A Survey of the JavaScript Programming Language” http://javascript.crockford.com/ http://javascript.crockford.com/survey.html • Versão Standard actual: ECMAScript - Edition 3 http://www.ecma-international.org/publications/standards/Ecma-262.htm • Referências Online: “JScript @ MSDN” http://msdn.microsoft.com/en-us/library/4yyeyb0a.aspx • Flanagan, David, “JavaScript: The definitive guide”, O'Reilly Media; 5 edition, 2006 Linguagem Javascript