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
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
sectionhistórico
Histórico Criado pela Netscape com o nome Mocha, depois mudado para Livescript. 1995 - Javascript (Netscape + Sun) Primeiro padrão (199X - ECMA 1 ): ECMA-262 2, ISO-16262 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: //www.ecma-international.org/publications/standards/ecma-262.htm
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).
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.
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.
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).
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>
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 http://www.ecma-international.org/ecma-262/5.1/#sec-7.6.1
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.
Valores válidos Valores válidos Number: 72 7.2.72 72. 7E2 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.
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....
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).
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 http://www.w3schools.com/js/js_popup.asp
Comandos Comandos for, while, if, switch. http://www.w3schools.com/js/
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>]
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>");
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;
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.
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/>");
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.
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). http://www.inf.ufpr.br/bmuller/ci320/4/params.js 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);
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 http://www.inf.ufpr.br/bmuller/ci320/4/median.html list.sort(function (a,b) {return (a-b);});
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(); // <====>
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)