A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Linguagem JavaScript Programação na Internet Secção de Sistemas e Tecnologias de Informação ISEL-DEETC-LEIC Luis Falcão -

Apresentações semelhantes


Apresentação em tema: "Linguagem JavaScript Programação na Internet Secção de Sistemas e Tecnologias de Informação ISEL-DEETC-LEIC Luis Falcão -"— Transcrição da apresentação:

1 Linguagem JavaScript Programação na Internet Secção de Sistemas e Tecnologias de Informação ISEL-DEETC-LEIC Luis Falcão - Carlos Guedes – Nuno Datia –

2 ©ISEL/DEETC/STI – Programação na Internet Autores e contributos 2 Autores –Jorge Martins –Carlos Guedes Contributos –Luís Falcão –Paulo Pereira –Pedro Félix Linguagem Javascript

3 ©ISEL/DEETC/STI – Programação na Internet História da JavaScript Desenvolvida por Brendan Eich 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.htmhttp://www.ecma-international.org/publications/standards/Ecma- 262.htm 3 Linguagem Javascript

4 ©ISEL/DEETC/STI – Programação na Internet 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 4 TipoNome do tipoDescrição Primitivos Boolean Tipo lógico Number Vírgula flutuante a 64 bit String Sequência de zero ou mais caracteres Unicode. Strings literais são delimitadas por "" (aspas) ou por '' (plicas) Objectos Tudo, excepto os tipos primitivos, são objectos Linguagem Javascript

5 ©ISEL/DEETC/STI – Programação na Internet Valores primitivos 5 TipovalorDescriçãoExemplo Boolean true Valor lógico verdadeiro var b = true; false Valor lógico falso var b = false; Number NaN Not a Number é o resultado de uma expressão com um operando que não pode ser convertido em valor numérico var a = NaN; var a = 10 / "x"; // a assume valor NaN Infinity Representação de um valor infinito var a = Infinity; var a = 10/ 0; // a assume valor Infinity undefined conteúdo de variáveis não iniciadas var a; // a assume valor undefined null representa o não valor, ou seja a inexistência de valor associado a uma variável var a = null; // x tem um não valor, ou seja null Linguagem Javascript

6 ©ISEL/DEETC/STI – Programação na Internet Literais Em JavaScript os 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: 6 Números (Numbers) Ex: 42, 0xFFF, Literais booleanos Ex: true, false. Literais floating-point Ex: , -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 array colocando vírgulas sem expressão associada. Essas posições do array ficam com valor null Linguagem Javascript

7 ©ISEL/DEETC/STI – Programação na Internet Objectos Em JavaScript um objecto é um contentor de pares nome/valor, ou seja é umahashtable 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 7 // Afecta a variável 'myHashtable' com uma referência para uma nova hashtable var myHashtable = { }; // O mesmo que na linha anterior, mas com notação semelhante ao Java var myHashtable = new Object(); myHashtable["name"] = "Carlos Guedes"; // subscript notation myHashtable.salaCCISEL = 8; // dot notation var s = myHashtable["salaCCISEL"]; alert("s = " + s); var n = myHashtable.name; alert("n = " + n); // Sintaxe da instrução for para enumeração d as "chaves" (nome das // propriedades) do objecto for(var key in myHashtable) { document.writeln(" " + key + ": " + myHashtable[key] + " "); } // Afecta a variável 'myHashtable' com uma referência para uma nova hashtable var myHashtable = { }; // O mesmo que na linha anterior, mas com notação semelhante ao Java var myHashtable = new Object(); myHashtable["name"] = "Carlos Guedes"; // subscript notation myHashtable.salaCCISEL = 8; // dot notation var s = myHashtable["salaCCISEL"]; alert("s = " + s); var n = myHashtable.name; alert("n = " + n); // Sintaxe da instrução for para enumeração d as "chaves" (nome das // propriedades) do objecto for(var key in myHashtable) { document.writeln(" " + key + ": " + myHashtable[key] + " "); } var myHashtable = { }; var myHashtable = new Object(); var myHashtable = { }; var myHashtable = new Object(); Linguagem Javascript

8 ©ISEL/DEETC/STI – Programação na Internet 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. 8 var myHashtable = { 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 }; var emptyObject = { }; var myHashtable = { 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 }; var emptyObject = { }; Os objectos literais são a base do formato JavaScript Object Notation (JSON) Linguagem Javascript

9 ©ISEL/DEETC/STI – Programação na Internet 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 ArrayList e.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 9 var arr1 = [ ]; var arr2 = new Array(); var arr1 = [ ]; var arr2 = new Array(); Linguagem Javascript

10 ©ISEL/DEETC/STI – Programação na Internet Arrays (2) 10 // Criação de arrays var myArray = []; // notação literal var myArray = new Array(); // notação de objecto (igual à linha anterior) var arrayWithSize = new Array(10); // O Array é iniciado 10 valores undefined // Notação literal var myList = ['oats', 'peas', 'beans', 'barley']; var month_lengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var slides = [ {url: 'slide0001.html', title: 'Looking Ahead'}, {url: 'slide0021.html', title: 'Summary', soccerClub: 'SLB'}, 5 ]; // Adição de um elemento por afectação myList[i + 6] = "SLB"; // Exemplo var diasDaSemana = [ "domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado" ]; var dias = ""; for(var i = 0; i < diasDaSemana.length; ++i) dias += diasDaSemana[i] + "\n"; alert(dias); // Criação de arrays var myArray = []; // notação literal var myArray = new Array(); // notação de objecto (igual à linha anterior) var arrayWithSize = new Array(10); // O Array é iniciado 10 valores undefined // Notação literal var myList = ['oats', 'peas', 'beans', 'barley']; var month_lengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; var slides = [ {url: 'slide0001.html', title: 'Looking Ahead'}, {url: 'slide0021.html', title: 'Summary', soccerClub: 'SLB'}, 5 ]; // Adição de um elemento por afectação myList[i + 6] = "SLB"; // Exemplo var diasDaSemana = [ "domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado" ]; var dias = ""; for(var i = 0; i < diasDaSemana.length; ++i) dias += diasDaSemana[i] + "\n"; alert(dias); Linguagem Javascript

11 ©ISEL/DEETC/STI – Programação na Internet Funções (1) Funções em JavaScript sã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 array arguments Facilita a criação de funções com parâmetros opcionais –Suportam a definição de funções internas –Em JavaScript as funções são first class objects Podem ser guardados em objectos e passados como parâmetros 11 // Função de recebe qualquer número de argumentos function sum() { var total = 0; for (var i = 0; i < arguments.length; ++i) { total += arguments[i]; } return total; } // Função de recebe qualquer número de argumentos function sum() { var total = 0; for (var i = 0; i < arguments.length; ++i) { total += arguments[i]; } return total; } Linguagem Javascript

12 ©ISEL/DEETC/STI – Programação na Internet 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) 12 function name (argumentList) block function visitInArray(arrayObject, observer) { for(var i = 0; i < arrayObject.length; ++i) { var elem = arrayObject[i]; if(typeof(elem) == "number") observer(elem); } visitInArray([1, 2, "3", 4, 5], function (x) { alert(x * x); }); function visitInArray(arrayObject, observer) { for(var i = 0; i < arrayObject.length; ++i) { var elem = 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 ©ISEL/DEETC/STI – Programação na Internet Funções (3) Instrução function –Cria uma função, com determinado nome, no contexto actual –É possível criar funções dentro de outras (ver mais em Closures) –É uma forma compacta de utilização do function operator (com nome) Construtor de function –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 uma string –Principalmente quando este tem strings É ineficiente, pois é necessário ser compilada de cada vez que é utilizada 13 function name (argumentList) block var name = function name (argumentlist) block ; new Function(strings...) não ! Esta forma não deve ser utilizada ! Linguagem Javascript

14 ©ISEL/DEETC/STI – Programação na Internet 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 14 foo.bar(); // em bar, this é foo do.re.mi.fa(); // em fa o objecto é do.re.mi 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 function f1() {... }; f1(); // em f1, this é o Objecto Global Linguagem Javascript

15 ©ISEL/DEETC/STI – Programação na Internet 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 15 // 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; return this; } // Teste var p = new Point(2,3); var p1 = new Point(4,5); p.add(p1); // p.x = 6; p.y = 8; // 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; return this; } // 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 ©ISEL/DEETC/STI – Programação na Internet Objectos e Funções construtoras nativas da linguagem 16 Função construtora Disponível?Descrição Object Função construtora de objectos genéricos Function Função construtora de objectos função Array Função construtora de objectos array String Função construtora de objectos string Boolean Função construtora de objectos booleanos Number Função construtora de objectos numéricos Date Função construtora de objectos que representam um instante temporal com precisão até aos milissegundos RegExp Função construtora de objectos que representam expressões regulares Error Função construtora de objectos que representam erros Math X Objecto cujas propriedades são funções e constantes matemáticas Linguagem Javascript

17 ©ISEL/DEETC/STI – Programação na Internet Protótipos Os objectos função têm a propriedade prototype 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) 17 Linguagem Javascript

18 ©ISEL/DEETC/STI – Programação na Internet Diagrama de protótipos 18 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(); 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 prototype c c ccc CFprototype prototype foo c1 constructor a a aaa b b bbb c2 constructor a a aaa b b bbb c3 constructor a a aaa b b bbb Protótipo explícito Protótipo implícito Linguagem Javascript

19 ©ISEL/DEETC/STI – Programação na Internet Acesso às propriedades de um objecto 19 objecto contém p? object tem prototype? objecto prototype tem construtor? Retorna valor p do objecto Sim retorna valor undefined Não Sim Usar o prototype do objecto prototype Não Sim Exemplo: Acesso à propriedade p Linguagem Javascript

20 ©ISEL/DEETC/STI – Programação na Internet Protótipos: exemplo Para ver este exemplo utilizem a extensão firebug para o browser firefox.firebugfirefox 20 Linguagem Javascript

21 ©ISEL/DEETC/STI – Programação na Internet Herança em JavaScript 21 Linguagem Javascript

22 ©ISEL/DEETC/STI – Programação na Internet Herança baseada em protótipos 22 // 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(); // 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 ©ISEL/DEETC/STI – Programação na Internet Herança baseada em chamada à cadeia de f. construtoras 23 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(); 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 ©ISEL/DEETC/STI – Programação na Internet Variáveis As variáveis são definidas com a instrução var 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 prefixo var, assume- se que existe num contexto superior (possivelmente o do Objecto Global) Variáveis não iniciadas assumem o valor undefined Numa função, por cada chamada é criado um novo conjunto de variáveis com o contexto dessa função (suporte para chamadas recursivas) 24 Linguagem Javascript

25 ©ISEL/DEETC/STI – Programação na Internet 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 25 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 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 ©ISEL/DEETC/STI – Programação na Internet 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() ) 26 Linguagem Javascript

27 ©ISEL/DEETC/STI – Programação na Internet Instruções 27 Tipo de instrução InstruçãoNotas Condicional if... [else] switch... case... Default As labels podem ser expressões e strings (não necessitam de ser constantes) Ciclos while A expressão da condição é convertida para bool (ver regras à frente) for do... while continue Quebra de fluxo break return Excepções try... catch throw Expressão As expressões são instruções quando terminadas por ; Variáveis var Composta {... } Linguagem Javascript

28 ©ISEL/DEETC/STI – Programação na Internet Tabela de operadores e prioridade 28 Prioridade + _ OperadorDescrição. [] () Acesso a propriedades, indexação, chamadas a funções e sub-expressões ++ - ~ ! new delete typeof Operadores unários e criação de objectos * / % Multiplicação, divisão, divisão módulo + - Adição, subtracção, concatenação de strings > >>> Deslocação de Bit >= instanceof Menor, menor ou igual, maior, maior ou igual, instanceof == != === !== Igualdade, desigualdade, igualdade estrita, e desigualdade estrita & AND bit a bit ^ XOR bit a bit | OR bit a bit && AND lógico || OR lógico ? : Operador condicional (ternário) Linguagem Javascript

29 ©ISEL/DEETC/STI – Programação na Internet Conversão para bool Sempre que há uma conversão para booleano (explícita ou implícita): –Valor lógico false false, null, undefined,, 0 –Valor lógico true restantes 29 Linguagem Javascript

30 ©ISEL/DEETC/STI – Programação na Internet Notas sobre operadores Operador + –Usado na adição e concatenação de strings Se um dos operandos são strings, faz concatenação depois de converter o outro operando para string 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.º: var value = p && p.name; Operador || (Or lógico) –Usado para atribuir valores por omissão Ex.º: var value = v || 10; 30 Linguagem Javascript

31 ©ISEL/DEETC/STI – Programação na Internet Operador typeof : informação sobre o tipo de dados 31 O operador typeof retorna uma string de acordo com o tipo do operando Sintaxe: var tipoDoOperador = typeof(operador); Object'object' Array'object' Function'function' String'string' Number'number' Boolean'boolean' null'object' undefined'undefined' Atenção ! Linguagem Javascript

32 ©ISEL/DEETC/STI – Programação na Internet Palavras Reservadas 32 abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with Legenda: Usadas na linguagem Não usadas na linguagem Linguagem Javascript

33 ©ISEL/DEETC/STI – Programação na Internet Referências Douglas Crockford: A Survey of the JavaScript Programming Language Versão Standard actual: ECMAScript - Edition 3 Referências Online: MSDN Flanagan, David, JavaScript: The definitive guide, O'Reilly Media; 5 edition, Linguagem Javascript


Carregar ppt "Linguagem JavaScript Programação na Internet Secção de Sistemas e Tecnologias de Informação ISEL-DEETC-LEIC Luis Falcão -"

Apresentações semelhantes


Anúncios Google