Programação Web Aula 4 - Javascript Parte 1 - O Núcleo - PDF
Download "Programação Web Aula 4 - Javascript Parte 1 - O Núcleo"
Lúcia Canto Sintra
1 Programação Web Aula 4 - Javascript Parte 1 - O Núcleo Bruno Müller Junior Departamento de Informática UFPR 10 de Março de 2014
2 1 Abordagem 2 Orientação a Objeto Objetos de Javascript Objetos de Javascript 3 Programas Características Sintáticas Primitivas, Operações e Expressões Tipos Primitivos Valores válidos Declaração de variáveis Os objetos Number e Math Comandos de Entrada e Saída Comandos 4 Objetos Criação e Acesso Remoção e Listagem de Atributos 5 Array Métodos de Array 6 Funções
3 sectionhistórico
4 Histórico Criado pela Netscape com o nome Mocha, depois mudado para Livescript Javascript (Netscape + Sun) Primeiro padrão (199X - ECMA 1 ): ECMA-262 2, ISO Dividido em três partes: Core: comandos, operadores, etc.; Client-side: objetos que dão suporte ao uso em HTML; Server-side: objetos que dão suporte ao uso em servidores; 1 European Computer Manufacturers Association 2 http: //
5 Abordagem Javascript é uma das pedras fundamentais da execução de tarefas no lado do cliente. Só iremos abordar Client-side Javascript). Divivimos o conteúdo em mais de uma aula: Aula 1: A linguagem (sintaxe, estruturas, etc.) Aula 2: Javascript e HTML Aula 3: Javascript Dinâmico (inclui Ajax, Jquery, CofeeScript).
6 Orientação a Objeto não é uma linguagem orientada a objetos, mas uma linguagem baseada em objetos. Não tem classes. Seus objetos servem como objetos e como modelo de objetos. Simula aspectos de herança usando prototype based inheritance. Como não tem herança, também não tem polimorsmo.
7 Objetos de Javascript Objetos de Javascript Objetos são coleções de propriedades: propriedade de dados; valores primitivos; referências a outros objetos; propriedade de função; propriedade de método; Usa tipos primitivos, que não são objetos, que podem ser implementados em hardware.
8 Objetos de Javascript Objetos de Javascript acessa-se a propriedade motor da variável carro com carro.motor. é possíve acrescentar ou remover dinamicamente as propriedades de objetos. há um objeto raiz, chamado Object, de onde os objetos javascript herdam propriedades de função e de método (mas não de dados).
9 Programas Nestas aulas, só usaremos javascript incluídos em documentos html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>exemplo de uso do javascript em HTML <p> </title> </head> <body> <script> document.write("<h1>este é um Heading </h1>"); document.write("<p>este é um parágrafo.</p>"); </script> <p> O comando <strong>document.write</strong> escreve o texto indicado no documento HTML antes dele ser processado pelo navegador. </p> </body> </html>
10 Características Sintáticas Características Sintáticas Identicadores: começam com letra, _ ou $ case sensitive (teste e Teste são diferentes. não podem ser as palavras reservadas: break, case, catch, continue, etc., e nem as futuras palavras reservadas 3 comentários: // comentário até o m da linha /* comentário neste intervalo */ o interpretador tenta fazer com que ; seja desnecessário, mas nem sempre funciona. Ele insere um ; quando ELE ACHA que termina um comando e encontra um char nova linha. Isto pode gerar problemas como em: return \n x; 3
11 Tipos Primitivos Tipos Primitivos tem cinco tipos primitivos: Number, String, Boolean, Undefined e Null. Tem wrapper objects associados a cada tipo primitivo, chamados Number, String, Boolean, Undefined e Null. A vantagem dos wrapper objects é que disponibilizam uma série de propriedades e métodos úteis. Em Number, as propriedades são mais úteis. Em String, os métodos são mais úteis.
12 Valores válidos Valores válidos Number: E2 7e2 7e-2 String: Usa os delimitadores crase (') ou aspas ("), sendo \ o caractere de escape. 'You\'re', "\\". Null: Só tem um valor, null, que indica sem valor (objeto não alocado). Undened: Só tem um valor, undefined, que indica objeto alocado, porém sem atribuição de valor. Boolean: Dois valores: true e false.
13 Declaração de variáveis Declaração de variáveis As variáveis não tem tipo. Os valores tem. Declaração implícita (atribuição) ou explícita. Recomenda-se FORTEMENTE declará-las. No exemplo abaixo, counter e index tem o valor undefined. var counter, index, cidade = "Curitiba"; // declaração explícita... filme = "Lawrence of Arabia" // declaração implícita....
14 Os objetos Number e Math Os objetos Number e Math Number: Math exemplos de propriedades constantes numéricas: MAX_VALUE, MIN_VALUE, NaN, POSITIVE_INFINITY, PI, etc. exemplo de métodos: isnan, tostring, Uso: Number.PI Contém métodos que podem ser aplicados a objetos Number. sin, cos, floor, etc. Uso: Math.sin(x).
15 Comandos de Entrada e Saída Comandos de Entrada e Saída Aqui abordamos somente o contexto de HTML. Quando executado, o Javascript associa o arquivo HTML no objeto Document. A janela (do navegador) é associado ao objeto Window. O objeto Document contém vários métodos, dentre eles, write. Exemplo: document.write(<h1>res=, res, <h1>) Outros Comandos de saída: Alert, conrm, prompt
16 Comandos Comandos for, while, if, switch.
17 Criação e Acesso O comando new cria um novo objeto em branco, sem propriedades. Exemplo var novo_obj = new Object();. As propriedades de um objeto podem ser criadas dinamicamente. Isto é muito diferente de outras linguagens, onde as propriedades são denidas em tempo de compilação. var my_car = new Object (); // cria um objeto da classe Objetct my_car.marca = "Ford"; // Cria dinamicamente a propriedade marca. my_car.modelo = "Fusion"; // Cria dinamicamente a propriedade modelo. // Outra forma de criar var my_car = {marca: "Ford", modelo: "Fusion"}; // Acesso var prop1 = my_car.make; var prop2 = my_car.["make"]; // muito usada com [<variável>]
18 Remoção e Listagem de Atributos Para apagar atributos: delete my_car.model Para listar atributos: for (var prop in my_car) document.write ("<br> Nome: ", prop, "Valor:", my_car[prop], "</br>");
19 Array São objetos que podem conter outros objetos. Criação: var my_list = new Array (1, 2, three, four); var other_list = new Array(100); var my_list = [ 1, 2, three, four]; O primeiro elemento de um Array é a posição zero. O tamanho é denido pelo último elemento mais um. my_list[47] = 2222; // tamanho 48 O tamanho pode ser denido explicitamente: my_list.length = 100;
20 Métodos de Array Métodos de Array São muitos para listar aqui. Ficaremos só com alguns: join : retorna um String com todos os elementos; sort : ordena um vetor, tratando cada elemento como string. concat: concatena dois Arrays. push e pop: insere/retira a última posição do Array. shift/unshift: insere/retira a primeira posição do Array.
21 Funções Funcionalidade semelhante às linguagens tradicionais. Exige a palavra reservada function; São objetos: podem ser colocados como propriedades de objetos. devem ser denidos antes da chamada (normalmente em <head>). podem ser aninhadas, mas é incomum. function fun () { document.write ("Esta é uma função<br/>); return 2 } nova_fun = fun; // nova_fun aponta para o objeto fun fun(); // chama fun (pois tem parênteses) nova_fun(); // chama fun de novo. (pois tem parênteses) res = fun(); document.write (res, "<br/>");
22 Variáveis Variáveis Variáveis Locais Visíveis somente no escopo em que foram declaradas(com var); Variáveis Globais Declaradas explicitamente como tal; Variáveis declaradas implicitamente.
23 Parâmetros Parâmetros Passagem por valor (cópia); Passagem por referência para objetos; Se escrever em um elem. do Array, troca o valor do chamador. Se trocar todo o Array por outro objeto, nada muda no chamador (abaixo). Os parâmetros são passados como um Array, e podem ser de tamanho variável (usando a variável arguments). function fun1(my_list){ var list2 = new Array (1, 3, 5); my_list[3]=14; // altera "list" my_list = list2; // não altera "list" }... var list = new Array [2,4,6,8]; fun1(list);
24 Funções como Parâmetros Funções como Parâmetros O método sort ordena um vetor, considerando que cada elemento é um String. Assim [10, 2, 300] está ordenado. para ordenar inteiros, é necessário passar a função de comparação como parâmetro list.sort(function (a,b) {return (a-b);});
25 Construtores Construtores são métodos especiais para criar e iniciar as propriedades dos objetos recém criados. function mostra_carro () { document.write("<br/> Carro: ", this.car, "<br/> Marca: ", this.marca, "<br/> Modelo:", this.modelo, "<br/>");... } // THIS function carro (nova_marca, novo_modelo, novo_ano) { this.marca = nova_marca; this.modelo = novo_modelo; this.ano = novo_ano; this.mostra = mostra_carro; // <====> } meu_carro = new carro ("Ford", "Focus", "2014"); meu_carro.mostra(); // <====>
26 Erros Em linguagens interpretadas, encontrar erros é mais difícil. Por vezes, um erro implica em não mostrar o que devia. Porém não há um aviso de erro. Ferramentas que dizem o erro que ocorreu: Firefox: Tools WebDeveloper WebConsole Firefox: Firebug (add-on) Chrome: Developer Tools (Ctrl+Shift+J)